@charset "utf-8";
body{font-family:wf_segoe-ui_normal, 'Segoe UI', Arial, Meiryo, Tahoma, sans-serif;}
a, input, button{outline:none;}
img, input{border:0;}
.Details{width:1200px; margin:0 auto;}
.clear { clear:both; }
 /* ----------------- */
.btn-down{text-align: center;}
.btn-down a{width: 280px;height: 60px;line-height: 60px;display: inline-block;border-radius: 5px;color: #fff;font-size: 22px;text-align: left;margin: 15px;border: 1px solid transparent;}
.btn-down a span{margin-left: 30px;}
.btn-down a span::after{content: '';display: inline-block;width: 1px;height: 30px;background-color: #fff;border-right: 1px solid #0cad85;vertical-align: middle;opacity: 0.3;margin-left: 15px;}
.btn-down a:nth-of-type(1){background: url(../image-style/index-jp/window.png) no-repeat 238px center #0ca6f2;}
.btn-down a:nth-of-type(2){background: url(../image-style/index-jp/mac.png) no-repeat 238px center #0ec799;}
.btn-down a:nth-of-type(1):hover span::after{background-color: #0ca6f2;border-right: 1px solid #0ca6f2;}
.btn-down a:nth-of-type(2):hover span::after{background-color: #0ec799;border-right: 1px solid #0ec799;}
.btn-down a:nth-of-type(1):hover{background: url(../image-style/index-jp/window-hover.png) no-repeat 238px center transparent;border: 1px solid #0ca6f2;color: #0ca6f2;}
.btn-down a:nth-of-type(2):hover{background: url(../image-style/index-jp/mac-hover.png) no-repeat 238px center transparent;border: 1px solid #0ec799;color: #0ec799;}
 /* ----------------- */
.DivMain01{margin-top: 71px;background:url(../image-style/index-jp/bg01.jpg) no-repeat top / 100% auto;min-height: 374px;padding: 105px 0 160PX;}
.DivMain01 .main01-con{background-color: #fff;position: relative;}
.DivMain01 .main01-con::after{content: '';display: block;clear: both;}
.DivMain01 .main01-con .left{width: 50%;float: left;}
.DivMain01 .main01-con .left img{width: 100%;}
.DivMain01 .main01-con .right{width: 50%;float: right;text-align: center;background:url(../image-style/index-jp/free.png)no-repeat top right;position: relative;z-index: 20;}
.DivMain01 .main01-con h1{font-size: 31px;color: #000;font-weight: 600;margin-top: 70px;}
.DivMain01 .main01-con h4{font-size: 23px;color: #2f2f2f;margin: 30px 0 15px;}
.DivMain01 .main01-con p{font-size: 15px;color: #666666;}
.DivMain01 .main01-con .pan{position: absolute;left: 0;right: 0;text-align: center;top:130px;z-index: 10;}
.DivMain01 .main01-con .pan img{transform: scale(0.95);}
 /* ----------------- */
.DivMain02{background:url(../image-style/index-jp/bg02.jpg) no-repeat center / cover;height: 628px;}
.DivMain02 h2{text-align: center;font-weight: 600;color: #000;padding: 30px 0;line-height: 1.5;}
.DivMain02 p{font-size: 15px;color: #818181;}
 /* ----------------- */
.DivMain03{background-color: #fafafa;padding: 40px 0;}
.DivMain03 h2{text-align: center;font-weight: 600;color: #000;padding: 30px 0;line-height: 1.5;}
.DivMain03 .des{font-size: 15px;color: #818181;white-space: nowrap;}
.DivMain03 .main03-con{margin: 80px 0;}
.DivMain03 .main03-con::after{content: '';display: block;clear: both;height: 8px;background-color: #fff;position: relative;top:40px}
.DivMain03 .main03-con .left{width: 50%;float: left;display: flex;align-items: center;flex-wrap: wrap;height: 300px;}
.DivMain03 .main03-con .right{width: 50%;float: right;display: flex;align-items: center;flex-wrap: wrap;height: 300px;}
.DivMain03 .main03-con .img-box img{margin-right: 15px;}
.DivMain03 .main03-con .con{padding: 0 30px;}
.DivMain03 .main03-con h3{font-size: 23px;color: #222222;font-weight: 600;line-height: 1.3;}
.DivMain03 .main03-con p{font-size: 15px;color: #777777;margin: 15px 0;}
 /* ----------------- */
.DivMain04 {background: #f5f7f7;padding: 30px 0 50px;}
.DivMain04 h2{text-align: center;font-weight: 600;color: #000;padding: 30px 0;line-height: 1.5;}
.DivMain04 ul li{width: 48%;float: left;text-align: center;background: #ffffff;padding: 30px;box-sizing: border-box;margin: 10px;min-height: 360px;border-radius: 10px;border: 1px solid #e5e4e1;}
.DivMain04 ul li strong{display: block;}
.DivMain04 ul li strong::before{content: '';display: inline-block;width: 100px;height: 1px;background: #e0e0e0;position: relative;top:-5px;right: 15px;}
.DivMain04 ul li strong::after{content: '';display: inline-block;width: 100px;height: 1px;background: #e0e0e0;position: relative;top:-5px;left: 15px;}
.DivMain04 ul li h4{font-size: 19px;font-weight: 600;color: #000;}
.DivMain04 ul li p{font-size: 14px;color: #838383;padding-top: 20px;}
.DivMain04 ul li .img-box{padding: 25px 0;}
.DivMain04 .main04-btn{text-align: center;}
.DivMain04 .main04-btn p{color: #ff9019;font-size: 16px;padding: 30px 0;}
.DivMain04 .main04-btn a{background: #ffa600;padding: 20px 40px;border-radius: 5px;transition: all 0.5s;position: relative;}
.DivMain04 .main04-btn a:hover{background-color: #fe9635;top:1px;}
.DivMain04 .main04-btn a span{color: #fff;font-weight: 600;font-size: 19px;}
/* ----------------- */
.DivMain05 {text-align: center;padding: 50px 0;}
.DivMain05 h2{font-weight: 600;color: #000;padding:10px 0 30px;line-height: 1.5;}
.DivMain05 .main05-con{width: 50%;float: left;position: relative;}
.DivMain05 .main05-con:nth-of-type(2)::after{content: '';display: block;position: absolute;top:0;bottom:0;left: 0;width: 1px;background-color: #dfdfdf;z-index: 8;}
.DivMain05 .main05-con .clk_divider{position: absolute;top:150px;left: -7px;width: 8px;background-color: #fff;z-index: 10;color: #8f8f8f;}
.DivMain05 .main05-con h3{font-size: 25px;font-weight: 600;margin: 20px 0;height: 45px;}
.DivMain05 .main05-con h3 img{margin: 0 10px;vertical-align: middle;}
.DivMain05 .main05-con ul{padding-left: 75px;text-align: left;}
.DivMain05 .main05-con ul li{color: #f07c0c;list-style: disc;font-size: 15px;}
.DivMain05 .main05-con ul li span{color: #777777;}
.DivMain05 .main05-con .btn-more{width: 280px;height: 60px;margin: 30px auto;}
.DivMain05 .main05-con .btn-more a{display: block;height: 100%;position: relative;overflow: hidden;border-radius: 5px;background-color: #ffa600;border: 1px solid #ffa600;}
.DivMain05 .main05-con .btn-more a::after{display: block;content: "";position: absolute;z-index: 10;top: 50%;left: 50%;width: 0;height: 0;margin: 0;opacity: 0;border-radius: 50%;background: #ffa600;-webkit-transition: all 0.4s;-moz-transition: all 0.4s;transition: all 0.4s; }
.DivMain05 .main05-con .btn-more span{color: #fff;line-height: 60px;position: absolute;left: 0;right: 0;z-index: 20;}
.DivMain05 .main05-con .btn-more span::before{content: "";display: inline-block;width: 40px;height: 1px;background-color: #fff;vertical-align: middle;margin-right: 20px;-webkit-transition: all 0.4s;-moz-transition: all 0.4s;transition: all 0.4s;}
.DivMain05 .main05-con .btn-more a:hover span::before{width: 0;}
.DivMain05 .main05-con .btn-more a:hover span{color: #ffa600;}
.DivMain05 .main05-con .btn-more a:hover::after{width: 290px;height: 290px;margin: -145px 0 0 -145px;opacity: 1;background: #fff;}
/* ----------------- */
.DivMain06 {background: #f5f7f7;padding: 30px 0;}
.DivMain06 h2{text-align: center;font-weight: 600;color: #000;padding: 30px 0;line-height: 1.5;}
.DivMain06 img{width: 100%;}
.DivMain06 p{padding-top: 20px;text-align: center;}
.DivMain06 p a{color: #ff8e1c;text-decoration: underline;font-size: 18px;}
/* ----------------- */
.DivMain07{background:#fff;color: #181818;}
.DivMain07 h3{font-size: 26px;border-bottom:4px solid #dddddd;padding: 25px 0;margin-bottom: 30px;}
.DivMain07 .left{float: left;width: 20%;}
.DivMain07 .right{float: right;width: 80%;padding-left: 40px;box-sizing: border-box;}
.DivMain07 .right p{line-height: 35px;font-size: 15px;}
.DivMain07 .right p strong{float: left;text-align: right;display: block;width: 180px;}
.DivMain07 .right p span{display: inline-block;width: 540px;padding-left: 30px;}
.DivMain07 .right .drp_btn2{text-decoration: underline;color: #05bdfd;}
.DivMain07 .right .drp_btn2 strong{width: 100%;text-align: left;margin: 10px 0;}
.DivMain07 .right .drp_btn2:hover{color: #4185ea;}
.DivMain07 .des{text-align: center;color: #181818;padding: 40px 0 20px;}
.DivMain07 .line{border-bottom: 1px #b4b4b4 dashed;padding-top: 50px;}
/* ----------------- */
.DivMain08{background:#fff;color: #5c5c5c;padding-bottom:100px;text-align: center;}
.DivMain08 h2{text-align: center;font-weight: 600;color: #000;padding: 30px 0;line-height: 1.5;}
.DivMain08 h4{color: #000;padding:30px 0;font-size: 23px;}
.DivMain08 ul li{float: left;width: 33.33%;padding: 0 20px;box-sizing: border-box;}
/* ----------------- */
.DivMain09{background:url(../image-style/index-jp/bg09.jpg) no-repeat center / cover;height: 439px;padding-top:50px;box-sizing: border-box;text-align: center;}
.DivMain09 h3{font-size: 23px;line-height: 1.5;padding-top: 30px;color: #666666;}
.DivMain09 .button-group {padding: 30px 0;}
.DivMain09 .button-group a{display: inline-block;background: #16c79b;color: #fff;border-radius: 30px;width: 320px;height: 60px;line-height: 60px;transition: all 0.5s;}
.DivMain09 .button-group a:hover{background-color: #2e8b57;box-shadow: none;-webkit-transform: translateY(1px);transform: translateY(1px);transform: scale(1.1);}
.DivMain09 .button-group a span{margin-left: 15px;font-size: 20px;font-weight: 600;}
.DivMain09 .button-group a img{vertical-align: -5px;}
/* ----------------- */

.aside-fixed-banner {position: fixed;right: 10px;bottom:2%;z-index: 100;}
.aside-fixed-banner span{position:absolute; right:-3px; font-size:30px; top:-5px; cursor:default;}

@media (max-width: 979px) {
	.aside-fixed-banner {display: none !important;}
	
	.Details{width:100%; padding: 0 15px; box-sizing: border-box;}
/* CSS Document */
	.DivMain01 .main01-con h1{font-size: 27px;margin-top: 33px;}
	.DivMain01 .main01-con h4{font-size: 17px;margin: 15px 0 0;}
/* CSS Document */
	.DivMain04 ul li{float: none;width: 80%;margin: 10px auto;}
/* CSS Document */
	.DivMain05 {padding: 30px 0 0;}
	.DivMain05 .main05-con{width: 100%;float: none;padding-top: 30px;}
	.DivMain05 .main05-con:nth-of-type(2)::after{left: 0;right: 0;top:0;height: 1px;width: 100%;}
	.DivMain05 .main05-con .clk_divider{width: 55px;left: 0;right: 0;margin: 0 auto;top:-10px;}
	.DivMain05 .main05-con ul{padding-left: 0;width: 420px;margin: 0 auto;}
/* CSS Document */
	.DivMain03{padding:0;}
	.DivMain03 .main03-con{margin: 30px 0 0;}
	.DivMain03 .main03-con::after{top:0;}
	.DivMain03 .main03-con .left{width: 100%;float: none;justify-content: center;height: auto;}
	.DivMain03 .main03-con .right{width: 100%;float: none;justify-content: center;height: auto;}
	.DivMain03 .main03-con .con{text-align: center;padding: 30px 0;}
	.DivMain03 .main03-con h3{font-size: 19px;}
/* CSS Document */
	.DivMain07 h3{font-size: 18px;text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
	.DivMain07 .left p {text-align: center;}
	.DivMain07 .left img {width: 100%;}
	.DivMain07 .left p strong{display: block;width: 100%;}
	.DivMain07 .right p strong{text-align: left;display: block;width: 100%;float:none;padding-left: 30px;box-sizing: border-box;}
	.DivMain07 .right p span{display: block;width: 100%;padding-left: 30px;box-sizing: border-box;}
/* CSS Document */
	.DivMain09{height: auto;padding:30px 0;}
}
@media (max-width: 767px) {
	/* CSS Document */
	.DivMain01{background: #e4e3e1;padding: 30px 0;}
	.DivMain01 .main01-con{background-color: transparent;}
	.DivMain01 .main01-con .left{width: 100%;float: none;}
	.DivMain01 .main01-con .right{width: 100%;float: none;padding: 30px 0;margin-top: 15px;background-color: #FFF;}
	.DivMain01 .main01-con h1{margin-top: 0;font-size: 23px;}
	.DivMain01 .main01-con .pan{display: none;}
/* CSS Document */
	.DivMain02{background: #f4f4f6;height: auto;padding-bottom: 30px;}
/* CSS Document */
	.DivMain03 .main03-con img{width: 100%;}
	.DivMain03 .main03-con .img-box img {width: auto; margin: 10px;}
/* CSS Document */
	.DivMain05 h2{font-size: 17px;padding: 10px 0;}
	.DivMain05 .main05-con .img-box img{width: 100%;}
	.DivMain05 .main05-con ul{width: 90%;}
/* CSS Document */
	.DivMain010 .screen{height: 280px;}
/* CSS Document */
	.DivMain08{padding: 0;}
/* CSS Document */
	.DivMain09{background: #fff;}
	.DivMain09 h3{font-size: 17px;}
	.DivMain09 p{font-size: 13px;}

}
@media (max-width: 479px) {
	body { margin:0; padding:0; font:13px/23px; color:#333; text-align:justify; }
/* CSS Document */
	.DivMain01 .main01-con h1{font-size: 19px;}
	.DivMain01 .main01-con h4{font-size: 15px;}
	.DivMain05 .main05-con h3 {font-size: 17px;}
	.DivMain04 ul li{width: 100%;}
	.DivMain04 .main04-btn a{padding: 15px 20px;}
	.DivMain06 {display: none;}
	.DivMain08 h3{padding: 30px 0;}
	.DivMain08 ul {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;}
	.DivMain08 ul li{float: none;width: 100%;padding:20px;}
}