img{ border:none; vertical-align:bottom; -webkit-backface-visibility: hidden;}
.center{ text-align:center;}
ul{ list-style:none; margin:0; padding:0;}
p{ margin:0;}
body{ margin: 0 auto; padding: 0; font-family: "Noto Sans Japanese"; color: #313131;}
a img{ outline: 0;}
a{ text-decoration: none;}
a:hover img{ opacity:0.6; transition: all 0.6s;}
img{ width: 100%; vertical-align: bottom;}

/* IE8+, Chrome */
a{ outline: 0;}

/* Firefox */
a::-moz-focus-inner,
a::-moz-focus-inner { border: 0;}

#container{ width: 100%; margin: 0 auto; padding:0; position: relative; min-width: 1080px;}

#site-header-pc{ width: 100%; margin: 0 auto; background: #FFF; padding: 14px 0 25px; z-index: 99999; position: fixed; top: 0; box-sizing: border-box; border-bottom: #0377E8 solid 5px; color: #001037;}
#site-header-pc h1{ width: 390px; margin: 17px 0 0; float: left;}
#site-header-pc .right-area{ width: 575px; margin: 0; float: right;}
#site-header-pc .right-area p.head-txt{ font-size: 22px; font-weight: bold;}
#site-header-pc .right-area p.head-btn{ height: 50px; float: left;}
#site-header-pc .right-area p.head-btn:last-child{ margin-left: 25px;}
#site-header-pc .right-area p.head-btn img{ width: auto; height: 100%;}
#sp-ttl{ display: none;}
#site-header-sp{ display: none;}

#nav-Area{ width: 100%; margin: 0 auto;}
#nav-Area ul.nav-list{ width: 1080px; height: 80px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
#nav-Area ul.nav-list li{ margin: 0 auto; text-align: center; box-sizing: border-box; font-weight: bold;}
#nav-Area ul.nav-list li a{ width: 216px; height: 80px; color: #001037; text-decoration: none; transition: all 0.6s; display: flex; justify-content: center; align-items: center; font-size: 18px;}
#nav-Area ul.nav-list li a:hover{ color: #FFF; background: #0B8FFC; transition: all 0.6s;}

#main-visual{ width: 100%; margin: 130px auto 0;}
#main-visual img{ width: 100%;}
#contents{ width: 100%;}
#lead{ width: 100%; background: #F1F9FE; padding: 120px 0;}
#lead .leadArea{ width: 1000px; margin: 0 auto;}
#lead .leadArea p{ font-size: 18px; line-height: 200%;}

section{ position: relative;}
section .icon{ width: 80px; position: absolute; top: -40px; left: 0; right: 0; margin: auto;}
section .icon img{ width: 80px;}
section h2{ font-size: 40px; margin: 0 0 40px; color: #0A8FFB;}
section h2.pp{ color: #6E5EB6;}
section h3{ font-size: 30px; margin: 0 0 40px;}
section h3 span{ font-size: 22px;}
section p{ line-height: 180%;}
section .imgCenter{ width: 800px; margin: 40px 0 0;}
section .imgCenter.ctSize{ width: 475px; margin: 40px auto 0;}

#results{ width: 800px; margin: 0 auto; padding: 120px 0 100px; text-align: center;}
#results .resultsImg{ margin: 40px 0 0;}
#results .resultsImg ul{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
#results .resultsImg li{ width: 390px;}
#results .resultsImg li img{ width: 390px;}

#effects{ width: 100%; background: #F1F9FE; padding: 120px 0; text-align: center;}
#effects .effectsWrap{ width: 800px; margin: 0 auto;}
#effects .effectsWrap .imgEff01{ margin: 40px auto 30px;}
#effects .effectsWrap .imgEff01 img{ width: 500px;}
#effects .effectsWrap .imgEff02{ margin: 0 auto;}
#effects .effectsWrap .imgEff02 img{ width: 800px;}
#effects .effBox{ margin: 40px 0 0; background: #FFF; padding: 50px; box-sizing: border-box; text-align: left;}
#effects .effBox .boxTtl{ font-size: 28px; font-weight: bold; border-bottom: #6EBDFC 5px solid; margin-bottom: 20px;}
#effects .effBox .boxSubTtl{font-size: 20px; font-weight: bold;}
#effects .effBox:nth-child(odd){ margin-bottom: 80px;}

#effects .area-accordion{ display: flex; flex-wrap: wrap; justify-content: space-between;}
#effects .area-accordion .accordion{ width: 800px; box-sizing: border-box; border: solid 2px #0A8FFB;}
#effects .accordion .submenuheader{ background: #FFF; color: #0A8FFB; text-align: center; text-decoration: none; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; padding: 15px 0; position: relative; font-size: 28px; font-weight: bold;}
#effects .accordion .submenuheader .accordsuffix{ width: 20px; position: absolute; right: 20px; top: 5px;}
#effects .accordion .submenuheader .accordsuffix img{ width: 20px; opacity:1; transition: none;}
#effects .accordion .submenu{ margin: 0; box-sizing: border-box; background: #FFF; padding: 0 40px 40px;}
#effects .accordion .submenu::after{ content:""; display:block; clear:both;}
#effects .accordion .submenu li{ font-size: 16px; line-height: 180%; text-align: left;}

#benefits{ width: 800px; margin: 0 auto; padding: 120px 0; text-align: center;}
#benefits .img-balloon{ margin: 40px auto 30px;}
#benefits .img-balloon img{ width: 500px;}

#fee{ width: 100%; background: #F1F9FE; padding: 120px 0; text-align: center;}
#fee .feeWrap{ width: 800px; margin: 0 auto;}
#fee .feeTable{ margin-top: 30px;}
#fee .feeTable table{ width: 100%; box-sizing: border-box; border-left: #0A8FFB solid 3px; border-right: #0A8FFB solid 3px; border-bottom: #0A8FFB solid 3px;}
#fee .feeTable table tr{ background: #FFF;}
#fee .feeTable table tr:nth-child(odd){ background: #E7F4FF;}
#fee .feeTable table th{ width: 110px; text-align: left; padding: 20px 0 20px 40px; font-size: 18px;}
#fee .feeTable table .company th{ font-size: 24px; background: #0A8FFB; color: #FFF; padding: 20px 0; text-align: center;}
#fee .feeTable table th.company-ki{ width: 255px; color: #FFFF6D;}
#fee .feeTable table td{ padding: 20px 0; text-align: center;}
#fee .feeTable table td.company-ki{ color: #FF6854; font-size: 24px; font-weight: bold;}
#fee .feeTable table td.company-ki span{ font-size: 14px; display: block;}

#construction{ width: 800px; margin: 0 auto; padding: 120px 0; text-align: center;}
#construction .youtubeArea{ width: 375px; margin: 0 auto;}
#construction .youtubeArea iframe{ width: 375px; height: 211px;}

#contact{ width: 100%; padding: 120px 0; text-align: center; background: url("../img/bg_hidden_pc.jpg") no-repeat center top #F1F9FE; }
#contact .contactWrap{ width: 800px; margin: 0 auto;}
#contact .contactWrap .ctLead{ font-size: 20px; margin-bottom: 60px;}

ul.list-2{ list-style: none; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
ul.list-2 li{ width: 375px;}
ul.list-2.ctSize li{ width: 350px;}
ul.list-3{ list-style: none; display: flex; justify-content: center; flex-wrap: wrap; align-items: center;}
ul.list-3 li{ width: 220px;}

.w1080{ width: 1080px; margin: 0 auto; box-sizing: border-box;}
.w1080::after{ content: ""; display: block; clear: both;}

.w820{ width: 800px; margin: 0 auto; box-sizing: border-box;}
.w820::after{ content: ""; display: block; clear: both;}

.mt10{ margin-top: 10px;}
.mt20{ margin-top: 20px;}
.mt40{ margin-top: 40px;}
.mb10{ margin-bottom: 10px;}
.mb80{ margin-bottom: 80px;}
.fw-b{ font-weight: bold;}


#footer{ width: 100%; margin: 0 auto; background: #001037; padding: 40px 0;}
#footer p.copy-light{ font-size: 12px; line-height: 1.6; color: #fff; text-align: center;}


/* page top
------------------------------------------------*/
#page-top{ width: 40px; height: 40px; display:none; position:fixed; right:40px; bottom: 45px; z-index:200;}
#page-top p{ margin:0; padding:0;}
#page-top p img{ width: 40px; opacity:0.8; filter:alpha(opacity=80);}
#page-top p:hover img{ opacity:0.6; filter:alpha(opacity=60);}
#move-page-top{ text-decoration:none; display:block; cursor:pointer;}


.sp{ display: none;}

/*-- SP --*/



@media screen and (max-width: 767px){
html {-webkit-text-size-adjust:none; margin:0 auto; padding:0;}
body{ width: 100%; color: #313131; font-family: "Noto Sans Japanese"; margin: 0 auto; padding: 0;}
img{ border:none; width:100%; height:auto; vertical-align:bottom; outline: 0; -webkit-backface-visibility: hidden;}
a:hover img{ opacity:0.6; transition: all 0.6s;}
	
	
#site-header-pc{ display: none;}
#site-header-sp{ width: 100%; margin: 0 auto; background: #FFF; padding: 10px 0; z-index: 99999; position: fixed; top: 0; box-sizing: border-box; display: flex; border-bottom: #0377E8 solid 5px; color: #001037;}
#site-header-sp .head-sp-inner{ width: 100%; top: 0; display: block;}
#site-header-sp .head-sp-inner .txt-head{ width: 100%; margin: 0 auto; font-size: 3.5vw; font-weight: 600; color: #001037; text-align: center;}
#site-header-sp .head-sp-inner .btn-head{ width: 90%; margin: 0 auto; padding: 2% 0 0;}
#site-header-sp .head-sp-inner .btn-head::after{ content: ""; display: block; clear: both;}
#site-header-sp .head-sp-inner .btn-head .btn-l{ width: 48%; margin: 0; float: left;}
#site-header-sp .head-sp-inner .btn-head .btn-r{ width: 48%; margin: 0; float: right;}

#sp-ttl{ width: 100%; margin: 0 auto; padding: 24% 5% 3%; box-sizing: border-box; display: block;}
#sp-ttl h1{ width: 100%; margin: 0 auto; padding: 0;}

#container{ width: 100%; margin: 0 auto; padding:0; position: relative; min-width: 100%;}

/*#nav-Area{ width: 100%; margin: 0; background: none;}
#nav-Area ul.nav-list{ width: 100%; height: auto; margin: 0 auto; line-height: 1;}
#nav-Area ul.nav-list::after{ content:""; display:block; clear:both;}
#nav-Area ul.nav-list li{ font-weight: bold; text-align: center; float: left; border-left: solid 1px #001037; box-sizing: border-box; background: #FFF;}
#nav-Area ul.nav-list li:nth-child(-n+2){ width: calc(100% / 2); border-top: solid 1px #001037;}
#nav-Area ul.nav-list li:nth-last-child(-n+3){ width: calc(100% / 3); border-top: solid 1px #001037; border-bottom: solid 1px #001037;}
#nav-Area ul.nav-list li a{ height: 6.6vw; padding: 2vw 0 7vw; margin: 0; color: #001037; display: block; font-size: 18px;}*/
	
#nav-Area{ width: 100%; margin: 0 auto; overflow-x: scroll;}
#nav-Area ul.nav-list{ width: 650px; height: 70px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
#nav-Area ul.nav-list li{ margin: 0 auto; text-align: center; box-sizing: border-box; font-weight: bold;}
#nav-Area ul.nav-list li a{ width: 130px; height: 70px; color: #001037; text-decoration: none; transition: all 0.6s; display: flex; justify-content: center; align-items: center; font-size: 14px;}
#nav-Area ul.nav-list li a:hover{ color: #FFF; background: #0B8FFC; transition: all 0.6s;}
	
#main-visual{ width: 100%; margin: 0 auto 0;}
#main-visual img{ width: 100%;}
#contents{ width: 100%;}
#lead{ width: auto; background: #F1F9FE; padding: 10% 5% 15%;}
#lead .leadArea{ width: auto; margin: 0 auto;}
#lead .leadArea p{ font-size: 14px; line-height: 160%;}

section{ position: relative;}
section .icon{ width: 40px; position: absolute; top: -20px; left: 0; right: 0; margin: auto;}
section .icon img{ width: 40px;}
section h2{ font-size: 18px; margin: 0 0 5%; color: #0A8FFB;}
section h2.pp{ color: #6E5EB6;}
section h3{ font-size: 16px; margin: 0 0 5%;}
section h3 span{ font-size: 12px;}
section p{ line-height: 160%; font-size: 14px; text-align: left;}
section .imgCenter{ width: auto; margin: 5% 0 0;}
section .imgCenter.ctSize{ width: 80%; margin: 5% auto 0;}

#results{ width: auto; margin: 0 5%; padding: 15% 0; text-align: center;}
#results .resultsImg{ margin: 0;}
#results .resultsImg ul{ display: block; flex-wrap: wrap; justify-content: space-between; align-items: center;}
#results .resultsImg li{ width: auto; margin-top: 5%;}
#results .resultsImg li img{ width: 100%;}

#effects{ width: auto; background: #F1F9FE; padding: 15% 5%; text-align: center;}
#effects .effectsWrap{ width: auto; margin: 0 auto;}
#effects .effectsWrap .imgEff01{ width: 85%; margin: 5% auto 4%;}
#effects .effectsWrap .imgEff01 img{ width: 100%;}
#effects .effectsWrap .imgEff02{ margin: 0 auto;}
#effects .effectsWrap .imgEff02 img{ width: 100%;}
#effects .effBox{ margin: 10% 0 0; background: #FFF; padding: 5%; box-sizing: border-box; text-align: left;}
#effects .effBox .boxTtl{ font-size: 16px; font-weight: bold; border-bottom: #6EBDFC 3px solid; margin-bottom: 4%; padding-bottom: 2%;}
#effects .effBox .boxSubTtl{font-size: 14px; font-weight: bold; margin-bottom: 2%;}
#effects .effBox:nth-child(odd){ margin-bottom: 10%;}

#effects .area-accordion{ display: flex; flex-wrap: wrap; justify-content: space-between;}
#effects .area-accordion .accordion{ width: 100%; box-sizing: border-box; border: solid 2px #0A8FFB; margin: 0 0 5%;}
#effects .accordion .submenuheader{ background: #FFF; color: #0A8FFB; text-align: center; text-decoration: none; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; padding: 3% 0; position: relative; font-size: 16px; font-weight: bold;}
#effects .accordion .submenuheader .accordsuffix{ width: 20px; position: absolute; right: 14px; top: 6px;}
#effects .accordion .submenuheader .accordsuffix img{ width: 20px;}
#effects .accordion .submenu{ margin: 0; box-sizing: border-box; background: #FFF; padding: 0 5% 5%;}
#effects .accordion .submenu::after{ content:""; display:block; clear:both;}
#effects .accordion .submenu li{ font-size: 14px; line-height: 160%; text-align: left;}

#benefits{ width: auto; margin: 0 auto; padding: 15% 5%; text-align: center;}
#benefits .img-balloon{ width: 80%; margin: 5% auto;}
#benefits .img-balloon img{ width: 100%;}

#fee{ width: auto; background: #F1F9FE; padding: 15% 5%; text-align: center;}
#fee .feeWrap{ width: auto; margin: 0 auto;}
#fee .tableCau{ font-size: 13px; text-align: center; margin-top: 5%;}
#fee .feeTable{ margin-top: 3%; overflow-x: scroll; padding-bottom: 3%;}
#fee .feeTable table{ width: 660px; box-sizing: border-box; border-left: #0A8FFB solid 3px; border-right: #0A8FFB solid 3px; border-bottom: #0A8FFB solid 3px;}
#fee .feeTable table tr{ background: #FFF;}
#fee .feeTable table tr:nth-child(odd){ background: #E7F4FF;}
#fee .feeTable table th{ width: 16%; text-align: left; padding: 2% 0 2% 3%; font-size: 14px;}
#fee .feeTable table .company th{ font-size: 16px; background: #0A8FFB; color: #FFF; padding: 2% 0; text-align: center;}
#fee .feeTable table th.company-ki{ width: 28%; color: #FFFF6D;}
#fee .feeTable table td{ padding: 2% 0; text-align: center; font-size: 14px;}
#fee .feeTable table td.company-ki{ color: #FF6854; font-size: 16px; font-weight: bold;}
#fee .feeTable table td.company-ki span{ font-size: 12px; display: block;}

#construction{ width: auto; margin: 0 auto; padding: 15% 5%; text-align: center;}
#construction .list-2 li .youtubeArea{ width: 100%; margin: 0 auto; position:relative; padding-bottom: 56.25%;}
#construction .list-2 li .youtubeArea iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

#contact{ width: auto; padding: 15% 5%; text-align: center; background: url("../img/bg_hidden_sp.jpg") no-repeat center top #F1F9FE; background-size: 100%;}
#contact .contactWrap{ width: auto; margin: 0 auto;}
#contact .contactWrap .ctLead{ font-size: 14px; margin-bottom: 10%;}

ul.list-2{ list-style: none; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
ul.list-2 li{ width: 100%;}
ul.list-2 li.yt-sp{ margin-bottom: 5%;}
ul.list-2.keep li{ width: 47.5%;}
ul.list-2.ctSize li{ width: 80%; margin: 0 auto;}
ul.list-2.ctSize li:last-child{ margin-top: 5%;}
ul.list-3{ list-style: none; display: flex; justify-content: center; flex-wrap: wrap; align-items: center;}
ul.list-3 li{ width: 40%;}
ul.list-3 li:first-child{ margin-right: 5%;}
ul.list-3 li:last-child{ margin-top: 5%;}

	
.w1080{ width: 94% !important; margin: 0 auto; box-sizing: border-box;}
.w1080::after{ content:"."; display:block; clear:both; height:0; visibility:hidden;}

.w820{ width: 94% !important; margin: 0 auto; box-sizing: border-box;}
.w820::after{ content:"."; display:block; clear:both; height:0; visibility:hidden;}
	
	
.mt10{ margin-top: 5%;}
.mt20{ margin-top: 5%;}
.mt40{ margin-top: 10%;}
.mb10{ margin-bottom: 2%;}
.mb80{ margin-bottom: 10%;}
.fw-b{ font-weight: bold;}
.smCenter{ font-size: 12px; text-align: center;}


#footer{ width: 100%; margin: 0 auto; background: #001037; padding: 6% 0;}
#footer a{ color: #FFF; text-decoration: none;}
#footer a:hover{ color: #FFF; text-decoration: none;}
#footer p.copy-light{ font-size: 10px; line-height: 1.6; color: #fff; text-align: center;}



/* page top SP
------------------------------------------------*/
#page-top{ width:25px; height:25px; display:none; position:fixed; right:2%; bottom:5%; z-index: 11;}
#page-top p{ margin:0; padding:0;}
#page-top p img{ width:100%; opacity:0.8; filter:alpha(opacity=80);}
#page-top p:hover img{ opacity:0.6; filter:alpha(opacity=60);}
#move-page-top{ text-decoration:none; display:block; cursor:pointer;}


.pc{ display: none;}
.sp{ display: block;}
	
	
}