@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300&display=swap');
* { min-height:0; min-width:0; box-sizing: border-box; }
*:focus	{ outline: none; }
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
  font-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
}
body	{ color: #111111; background-color: #ffffff; font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-weight: 400; height:100%; letter-spacing:.03rem; font-feature-settings: "palt" }
@media (max-width: 979px)	{ .spConcontainer { width: 100%; margin: 0; padding:0; } }
@media (min-width: 980px)	{ .spConInner { max-width: 1480px; } }
a:hover img.hov	{ opacity: .6; -webkit-opacity: .6; -moz-opacity: .6; filter: alpha(opacity=60); -ms-filter: "alpha(opacity=60)"; }
a img.hov	{ -webkit-backface-visibility: hidden; -webkit-transition: opacity 0.1s ease-out; -moz-transition: opacity 0.1s ease-out; -ms-transition: opacity 0.1s ease-out; transition: opacity 0.1s ease-out; }
a, a:link, a:visited, a:active	{ color: #000; text-decoration: none; -webkit-backface-visibility: hidden;  backface-visibility: hidden; }
a:hover	{ color: #a5a5a5; font-style: normal; text-decoration: none; }
img	{ line-height: 0; width: 100%; }

/* ------------ LOADING ------------- */
.loading	{ position: fixed; display: -webkit-flex; display: flex; justify-content: center; align-items: center; background: #111111; background-position:center; background-attachment: fixed; z-index: 999; top: 0; left: 0; right: 0; bottom: 0; }
.loader,
.loader:after	{ border-radius: 50%; width: 10em; height: 10em; }
.loader	{ margin: 60px auto; font-size: 10px; position: relative; text-indent: -9999em; border-top: 1.1em solid rgba(255, 255, 255, 0.2); border-right: 1.1em solid rgba(255, 255, 255, 0.2); border-bottom: 1.1em solid rgba(255, 255, 255, 0.2); border-left: 1.1em solid #ffffff; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 1.1s infinite linear; animation: loadAnimation 1.1s infinite linear; }
@-webkit-keyframes loadAnimation	{
  0%	{ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100%	{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes load8	{
  0%	{ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100%	{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
.fadein	{ opacity: 0; transform: translate(0, 30px); transition: all 1.8s 0s; }
.fadein.inview	{ opacity: 1; transform: translate(0, 0); }

/* ------------ MAIN ------------- */
#top	{ background: url(../images/bg01.png) center center / 4px 4px repeat #fff; background-attachment: fixed; height: 100%; position: relative; }
.mainStage_wrapper	{ position: relative; height: 100%; height: 100vh; height: calc(var(--vh, 1vh) * 100); }
.mainStage_wrapper .gwlogo	{ position: absolute; left:40px; top:40px; width: 204px; line-height: 0; z-index: 1; }
.mainStage_wrapper .uslogo	{ position: absolute; right: 40px; top:40px; width: 91px; line-height: 0; z-index: 1; }
.mainStage_wrapper .icons	{ position: absolute; left:40px; bottom: 40px; width: 90px; line-height: 0; z-index: 1; }
.mainStage	{ position: relative; padding: 20px; margin: 0 auto; display: -webkit-flex; display: flex; justify-content: center; max-width: 1020px; height: 100%; }
.mainStage .mainTitle	{ width: 40%; display: -webkit-flex; display: flex; justify-content: center; flex-direction: column; position: relative; z-index: 1; }
.mainStage .mainTitle > h2	{ width: 108%; padding: 7px 0; margin: 0; line-height: 0; vertical-align: middle; }
.mainStage .mainImage	{ width: 60%; background: url(../images/bg02.png) center center / 4px 4px repeat #fff; background-attachment: fixed; display: -webkit-flex; display: flex; justify-content: center; align-items: center; position: relative; }
.mainStage .mainImage .mainImagelogo	{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 260px; }
.mainStage .mainImage .mainImagebg	{ padding: 20px; margin: 0; z-index: 1; }
.mainStage .mainImage .mainImagebg img	{ max-height: calc(75vh - 40px); }
.subTitle	{ display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 130px 0 93px; margin: 0; position: relative; }
.subTitle > strong	{ width: 148px; padding: 0; margin: 0 0 40px; }
.subTitle > p	{ font-size: 20px; line-height: 33px; font-weight: 700; text-align: center; padding: 0; margin: 0; }
.subTitle > b	{ display: none; }
@media (max-width: 767px)	{ 
	#top	{ background-size: 4px 4px; }
	.mainStage_wrapper .gwlogo	{ left:25px; top:25px; width: 146px; }
	.mainStage_wrapper .uslogo	{ right: 25px; top:24px; width: 68px; }
	.mainStage_wrapper .icons	{ display: none; }
	.mainStage	{ padding: 60px 15px 0; flex-direction: column; justify-content: stretch; }
	.mainStage .mainTitle	{ width: 100%; height: 100px; order:2; padding: 0 0 0 15px; margin: 0; transform: translateY(-25px); }
	.mainStage .mainTitle > h2	{ width: 78%; max-width: 380px;  padding: 4px 0; }
	.mainStage .mainImage	{ width: 100%; order:1; background-size: 4px 4px; height: calc(100% - 100px); }
	.mainStage .mainImage .mainImagelogo	{ max-width: 170px; }
	.mainStage .mainImage .mainImagebg	{ padding: 0; text-align: center; }
	.mainStage .mainImage .mainImagebg img	{ max-width: 70%; }
	.subTitle	{ padding: 70px 0 156px; }
	.subTitle > strong	{ width: 113px; padding: 0; margin: 0 0 30px; }
	.subTitle > p	{ font-size: 15px; line-height: 25px; }
	.subTitle > b	{ display: inline-block; width: 67px; padding: 0; margin: 0; line-height: 0; vertical-align: bottom; position: absolute; bottom: 25px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
	.subTitle > b.inview	{ display: inline-block; width: 67px; padding: 0; margin: 0; line-height: 0; vertical-align: bottom; position: absolute; bottom: 25px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
/* ------------ SECTION ------------- */
.howto	{ display: -webkit-flex; display: flex; justify-content: center; align-items: center; padding: 100px 0 70px; margin: 0; background-color: #fff; position: relative; }
.howto > h3	{ width: 260px; padding: 0; margin: 0; line-height: 0; vertical-align: bottom; }
@media (max-width: 767px)	{ 
	.howto	{ padding: 100px 0 50px; }
	.howto > h3	{ width: 200px; }
}
.section	{ padding: 0 20px; margin: 0; background-color: #fff; position: relative; }
.howtouse	{ display: -webkit-flex; display: flex; align-items: center; justify-content: center; padding: 100px 0; margin: 0; background-color: #fff; }
.howtouse.leftCircle	{ background-color: #dfdfdf; }
.howtouse-indent	{ display: -webkit-flex; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; }
.htuStep	{ width: 480px; height: 480px; position: relative; display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.htuStep_wrapper	{ display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.htuStep_wrapper > b, 
.htuStep_wrapper > strong, 
.htuStep_wrapper > h4, 
.htuStep_wrapper > p, 
.htuStep_wrapper > span { padding: 0; margin: 0; text-align: center; line-height: 0; vertical-align: bottom; z-index: 2; }
.htuStep_wrapper > b { width: 180px; margin-bottom: 20px; }
.htuStep_wrapper > strong { width: 280px; margin-bottom: 42px; }
.htuStep_wrapper > h4 { width: 280px; margin-bottom: 40px; }
.htuStep_wrapper > p { width: 420px; margin-bottom: 20px; font-size: 20px; line-height: 30px; font-weight: 700; letter-spacing:0; }
.htuStep_wrapper > span { width: 420px; font-size: 14px; line-height: 22px; font-weight: 400;  }
.stepCircle	{ width: 480px; height: 480px; border-radius: 50%; position: absolute; top: 0; bottom: auto; left: 0; right: 0; background: url(../images/bg01.png) center center / 4px 4px repeat #fff; background-attachment: fixed; }
.captureimg	{ padding: 0; margin: 0; width: 100%; max-width: 370px; z-index: 3; }
@media (max-width: 950px)	{ 
	.htuStep	{ width: 400px; height: 400px; }
	.stepCircle	{ width: 400px; height: 400px; }
	.captureimg	{ max-width: 300px; }
	.htuStep_wrapper > b { width: 160px; margin-bottom: 10px; }
	.htuStep_wrapper > strong { width: 250px; margin-bottom: 25px; }
	.htuStep_wrapper > h4 { width: 250px; margin-bottom: 25px; }
	.htuStep_wrapper > p { width: 380px; margin-bottom: 10px; font-size: 16px; line-height: 22px; }
	.htuStep_wrapper > span { width: 380px; font-size: 12px; line-height: 18px; }
}
@media (min-width: 768px)	{ 
	.htuStep	{ transform: translateX(-40px); }
	.howtouse-indent	{ transform: translateX(30px); }
	.leftCircle .howtouse-indent	{ transform: translateX(-30px); }
	.leftCircle .htuStep	{ transform: translateX(40px); }
	.leftCircle .captureimg	{ order:2; }
	.leftCircle .stepCircle	{ order:1; }
}
@media (max-width: 767px)	{ 
	.section	{ padding: 0 15px; }
	.howtouse	{ padding: 50px 17px; }
	.howtouse-indent	{ flex-direction: column; width: 100%; }
	.htuStep	{ width: 100%; height: auto; margin-top: -30px; }
	.htuStep_wrapper	{ position: absolute; top: 60%; left: 50%; transform: translate(-50%,-50%); }
	.htuStep_wrapper.inview	{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
	.htuStep_wrapper > b { width: 150px; margin-bottom: 10px; }
	.htuStep_wrapper > strong { width: 215px; margin-bottom: 25px; }
	.htuStep_wrapper > h4 { width: 215px; margin-bottom: 25px; }
	.htuStep_wrapper > p { width: 275px; margin-bottom: 10px; font-size: 13px; line-height: 19px; }
	.htuStep_wrapper > span { width: 275px; font-size: 10px; line-height: 16px; }
	.stepCircle	{ width: 100%; height: auto; position: static; }
	.captureimg	{ width: 70%; }
}
@media (max-width: 374px)	{ 
	.howtouse	{ padding: 40px 12px; }
	.htuStep	{ margin-top: -26px; }
	.htuStep_wrapper > b { width: 120px; margin-bottom: 7px; }
	.htuStep_wrapper > strong { width: 180px; margin-bottom: 20px; }
	.htuStep_wrapper > h4 { width: 180px; margin-bottom: 20px; }
	.htuStep_wrapper > p { width: 250px; margin-bottom: 8px; font-size: 12px; line-height: 16px; }
	.htuStep_wrapper > span { width: 250px; font-size: 8px; line-height: 14px; }
}

/* ------------ RIGHT SECTION ------------- */
.sectionchangeline	{ display: -webkit-flex; display: flex; width: 13px; flex-direction: column; position: absolute; right: 34px; z-index: 5; font-size: 0;}
.sectionchangeline > li	{ list-style: none; padding: 0; margin: 0; line-height: 0; vertical-align: bottom; }
.sectionchangeline.dwn	{ bottom: 0; }
.sectionchangeline.up	{ top: 0; }
.bottomArea .sectionchangeline	{ right: 14px; }
@media (max-width: 767px)	{ 
	.sectionchangeline, 
	.bottomArea .sectionchangeline	{ width: 10px; right: 30px; }
}
/* ------------ bottom AREA ------------- */
.bottom_wrapper	{ position: relative; }
.bottom_wrapper *	{ font-feature-settings: normal; }
.bottomArea	{ display: -webkit-flex; display: flex; flex-wrap: wrap; padding: 0; margin: 0 20px; }
.bottomArea .btAcheckItem, 
.bottomArea .btAnotic	{ width: 50%; background-color: #ff3; position: relative; display: -webkit-flex; display: flex; align-items: center; flex-direction: column;}
.bottomArea .btAcheckItem	{ background-color: #dfdfdf; }
.bottomArea .btAnotic	{ background: url(../images/bg01.png) center center / 4px 4px repeat #fff; background-attachment: fixed; }
@media (min-width: 768px)	{ 
	.bottomArea .btAcheckItem	{ order:1; }
	.bottomArea .btAnotic	{ order:2; }
}
@media (max-width: 767px)	{ 
	.bottomArea	{ margin: 0; }
	.bottomArea .btAcheckItem, 
	.bottomArea .btAnotic	{ width: 100%; }
}
.checkItemArea	{ display: -webkit-flex; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 100px 20px 77px; margin: 0; }
.checkItemArea > h4	{ width: 100%; max-width: 300px; line-height: 0; vertical-align: bottom; padding: 0 0 35px; margin: 0; }
.checkItemArea > h5	{ font-size: 20px; line-height: 30px; font-weight: 700; letter-spacing:0; text-align: center; padding: 0 0 51px; margin: 0; }
.checkItemArea > span	{ font-size: 14px; line-height: 22px; font-weight: 400; text-align: center; }
.btAnotic .wrapper	{ display: -webkit-flex; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 100px 20px 80px; margin: 0; }
.btAnotic .wrapper > h4	{ width: 100%; max-width: 300px; line-height: 0; vertical-align: bottom; padding: 0 0 36px; margin: 0; }
.btAnotic .wrapper > h5	{ font-size: 20px; line-height: 30px; font-weight: 700; letter-spacing:0; text-align: center; padding: 0 0 81px; margin: 0; }
.btAnotic .wrapper > b	{ font-size: 16px; line-height: 26px; font-weight: 700; letter-spacing:0; text-align: center; }
.btAnotic .wrapper > p	{ color:#777777; font-size: 16px; line-height: 26px; font-weight: 700; letter-spacing:0; text-align: center; padding: 0 0 16px; margin: 0; }
.btAnotic .wrapper > span	{ font-size: 14px; line-height: 22px; font-weight: 400; text-align: center; }
.bottomCh01	{ padding-bottom: 78px!important; }
.bottomCh02	{ padding-bottom: 51px!important; }
.bottomCh03	{ padding-bottom: 26px!important; }
.bottomCh04	{ padding-bottom: 51px!important; }
@media (max-width: 767px)	{ 
	.checkItemArea	{ padding: 75px 37px 47px; }
	.checkItemArea > h4	{ max-width: 220px; padding: 0 0 20px; }
	.checkItemArea > h5	{ font-size: 13px; line-height: 19px; padding: 0 0 27px; margin: 0; }
	.checkItemArea > span	{ font-size: 10px; line-height: 16px; text-align: center; }
	.btAnotic .wrapper	{ padding: 75px 37px; }
	.btAnotic .wrapper > h4	{ max-width: 220px; padding: 0 0 20px; }
	.btAnotic .wrapper > h5	{ font-size: 13px; line-height: 1; padding: 0 0 50px; margin: 0; }
	.btAnotic .wrapper > b	{ font-size: 11px; line-height: 17px; }
	.btAnotic .wrapper > p	{ font-size: 11px; line-height: 17px; padding: 0 0 16px; margin: 0; }
	.btAnotic .wrapper > span	{ font-size: 10px; line-height: 16px; font-weight: 400; text-align: center; }
	.bottomCh01	{ padding-bottom: 45px!important; text-align: left!important; }
	.bottomCh02	{ padding-bottom: 30px!important; }
	.bottomCh03	{ padding-bottom: 26px!important; }
	.bottomCh04	{ padding-bottom: 26px!important; }
}


/* ------------ BRANDS ------------- */
.bottomoval	{ max-width: 520px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; padding: 0 0 92px; margin: 0; }
.bottomoval .wrapper	{ padding: 0; display: -webkit-flex; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.bottomoval .wrapper h2	{ margin: 0 auto 61px; max-width: 88px; display: inline-block; vertical-align:bottom; line-height: 0; }
.itemBrandWac	{ margin:0 auto; max-width: 930px; padding: 0 10px; display: -webkit-flex; display: flex; flex-wrap: wrap; }
.itemBrandColumn	{ width: calc(100% / 5); padding: 7px 1.1%; }
.itemBrandColumn a { display: inline-block; }
.itemBrandColumn img	{ width: 100%; vertical-align:bottom; line-height: 0; }

@media (max-width: 767px)	{ 
	.bottomoval	{ padding: 0 0 75px; }
	.bottomoval .wrapper	{ padding: 0; }
	.bottomoval .wrapper h2	{ margin: 0 auto 38px; max-width: 70px; }
	.itemBrandWac	{ margin:0 auto; padding: 0 27px; }
	.itemBrandColumn	{ width: calc(100% / 4); padding: 5px 5px 1px; }
}
.footbtn	{ text-align: center; padding: 0; margin: 0; }
.footbtn > a	{ display: inline-block; margin: 0 auto; padding: 63px 0 0; width: 200px; line-height: 0; }
.footbtn > a > img	{ width: 100%; }
@media (max-width: 767px)	{ 
	.footbtn > a	{ padding: 50px 0 0; width: 170px; }
}

/* ------------ LEED ------------- */
.leed	{ background-color: #ffffff; padding: 100px 0; margin: 0; text-align: center; }
.leed .wrapper	{ padding: 0; margin: 0 auto; max-width: 370px; line-height: 1; }
@media (max-width: 767px)	{ 
	.leed	{ padding: 80px 0; }
	.leed .wrapper	{ max-width: 277px; }
}

/* ------------ FOOTER ------------- */
footer	{ background-color: #ffffff; display: -webkit-flex; display: flex; align-items: center; justify-content: center; height: 50px; }
footer > small	{ color:#000000; font-size: 10px; font-weight: 400; line-height: 1; letter-spacing:0; font-family: "Helvetica Neue", Helvetica, Arial, Segoe UI, SegoeUI, sans-serif; }
@media (max-width: 767px)	{ 
	footer	{ height: 37px; }
	footer > small	{ font-size: 9px; }
}
@media (max-width: 320px)	{ 
	footer > small	{ font-size: 7px; }
}

/* ------------ BLOCK ------------- */
@media (max-width: 767px)	{ .pconly { display: none!important; } }
@media (min-width: 768px), (max-width: 813px) and (max-height: 376px)	{ .pconly { display: block; } }
@media (max-width: 767px)	{ .sponly { display: block; } }
@media (min-width: 768px), (max-width: 813px) and (max-height: 376px)	{ .sponly { display: none!important; } }
.delay01	{ transition-delay: 0.1s; }
.delay02	{ transition-delay: 0.2s; }
.delay03	{ transition-delay: 0.3s; }
.delay04	{ transition-delay: 0.4s; }
.delay05	{ transition-delay: 0.5s; }
.delay06	{ transition-delay: 0.6s; }
.delay07	{ transition-delay: 0.7s; }
.delay08	{ transition-delay: 0.8s; }
.delay09	{ transition-delay: 0.9s; }
.delay10	{ transition-delay: 1s; }
.delay00	{ transition-delay: 1.6s; }

/* ------------ clearfix ------------- */
span.clearfix	{ display:block; }
.clearfix:after	{ content:"."; display:block; height:0; clear:both; visibility:hidden; font-size:0; line-height:0; }
.clearfix	{ *overflow:hidden; *zoom:1; }
.clearfix:not(:target)	{ /* overflow:hidden\9; */ /* zoom:1\9; */ }
* html .clearfix	{ height:1%; overflow:visible; }