@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: #232323; background-color: #ffffff; font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-weight: 400; height:100%; letter-spacing:.07rem; 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%; image-rendering: -webkit-optimize-contrast; }
.pgtop	{ position: absolute; top: 0; left: 0; }

/* ------------ 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); }

/* ------------ HEADER ------------- */
.header	{ display: -webkit-flex; display: flex; align-items: center; width: 100%; position: fixed; left: 0; right: 0; top: 0; background-color: #fff; list-style-type: none; height: 70px; padding: 0 20px; z-index: 10; }
.header > li	{ width: calc(100% / 3); }
.header > li:first-child > a	{ display: block; padding: 5px 0; width: 120px; transition: all .3s; opacity: 1; }
.header > li:nth-child(2)	{ text-align: center; }
.header > li:nth-child(2) > a	{ display: block; padding: 5px 0; width: 176px; transition: all .3s; opacity: 1; margin: 0 auto; }
.headerlinks	{ display: -webkit-flex; display: flex; align-items: center; justify-content: flex-end; list-style-type: none;  }
.headerlinks li	{ position: relative; }
.headerlinks li:first-child	{ padding: 0 10px 0 0;  }
.headerlinks li:last-child	{ padding: 0 0 0 10px;  }
.headerlinks li:not(:last-child)::after	{ content:""; position: absolute; right: 0; top: 5px; bottom: 5px; width: 1px; background-color: #000; }
.headerlinks li > a	{ display: block; padding: 5px 0; font-size: 12px; line-height: 1; font-weight: 700; transition: all .3s; opacity: 1; }
@media (min-width: 768px)	{ 
	.header a:hover	{ opacity: .5!important; }
}
@media (max-width: 767.9px)	{ 
	.header	{ height: 50px; justify-content: space-between; }
	.header > li	{ width: auto; }
	.header > li:first-child	{ display: none; }
	.header > li:nth-child(2) > a	{ width: 147px; }
	.headerlinks li > a	{ font-size: 10.5px; }
}

/* ------------ MAIN ------------- */
.main	{ margin: 70px 20px 0; display: -webkit-flex; display: flex; align-items: center; justify-content: center; padding: 64px 0; background-image: url(../images/bgx.png);  }
.main picture	{ width: 348px; }
@media (max-width: 767.9px)	{ 
	.main	{ margin: 50px 0 0; padding: 64px 9.8%; }
}
.howto	{ width: 100%; padding: 80px 0 40px; text-align: center; }
.howto > img	{ margin: 0 auto; }
.howto.rev > img	{ width: 100%; max-width: 208px; }
.howto.fav > img	{ width: 100%; max-width: 232px; }
@media (max-width: 767.9px)	{ 
	.howto	{ padding: 60px 0 30px; }
}

/* ------------ CONTENTS ------------- */
.wrapper	{ background-color: #fff; padding: 0 20px; }
.contentsinner	{ background-color: #e6e6e6; padding: 80px 20px 20px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.contentsinner > hr	{ position: relative; margin: 0 0 80px; padding: 20px 0 0; width: 100%; max-width: 1080px; background-color: transparent; border: 0; }
.contentsinner > hr::after	{ content:""; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 1px; background-color: #ddd; z-index: 2; }
.contentsblock	{ width: 100%; max-width: 1080px; background-image: url(../images/bgx.png); padding: 60px 4.6%; display: -webkit-flex; display: flex; flex-wrap: wrap; margin: 0 0 60px; }
.contenttxt	{ width: 39%; display: -webkit-flex; display: flex; flex-direction: column; justify-content: space-between; }
.contxt_top	{ width: 100%; }
.contxt_top > h2	{ display: -webkit-flex; display: flex; align-items: flex-start; flex-direction: column; margin: 0 0 24px; }
.contxt_top > h2 > span	{ background-color: #fff; margin: 0 0 6px; font-size: clamp(12px, 24px, 2vw); font-weight: 700; line-height: 1; color:#777; padding: 3px 2px 2px; }
.contxt_top > b	{ display: block; font-size: clamp(12px, 16px, 1.3vw); font-weight: 700; line-height: 1.4; color:#232323; }
.contxt_top > b.mid	{ font-size: clamp(12px, 18px, 1.4vw); }
.contxt_btm	{ width: 100%; font-size: clamp(9px, 12px, 1vw); line-height: 1.3; font-weight: 700; }
.contentimg	{ width: 61%; }
.contentimg > ul	{ border-radius: 10px; box-shadow: 5px 5px 20px 0px rgba(0,0,0,.25); }
.contentimg > ul li	{ border-radius: 10px; overflow: hidden; }
.singleimg	{ border-radius: 10px; box-shadow: 5px 5px 20px 0px rgba(0,0,0,.25); overflow: hidden; line-height: 0; }
.step	{ display: -webkit-flex; display: flex; flex-direction: column; width: 100%; max-width: 94px; list-style-type: none; margin: 0 0 30px; }
.step li	{ line-height: 0; }
.step.rev li:last-child	{ background-color: #ffc832; }
.step.fav li:last-child	{ background-color: #ff7276; }
.contentattention	{ width: 100%; padding: 40px 32px; background-color: #fff; margin: 60px 0 0; border-radius: 10px; }
.contentattention > strong	{ display: block; width: 100%; color:#c90000; font-size: 14px; font-weight: 700; line-height: 1; margin: 0 0 20px; padding: 0 0 0 1em; }
.contentattention > ul	{ margin: 0 0 0 .8em;  }
.contentattention > ul > li	{ color:#232323; font-size: 13px; font-weight: 400; line-height: 1.8; letter-spacing:.04rem; }
.contentsbutton	{ width: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0 0 60px; }
.contentsbutton > a	{ background-color: #4d4d4d; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 400px; height: 70px; line-height: 1; border-radius: 6px; transition: all .3s; opacity: 1; }
.contentsbutton > a span	{ color:#fff; font-size: 18px; font-weight: 700; line-height: 1; }
@media (min-width: 1180px)	{ 
	.contentsblock	{ padding: 60px 50px; }
}
@media (min-width: 768px)	{ 
	.contentsbutton > a:hover	{ opacity: .5!important; }
}
@media (max-width: 767.9px)	{ 
	.wrapper	{ padding: 0; }
	.contentsinner	{ padding: 60px 0 20px; }
	.contentsinner > hr	{ margin: 0 0 30px; padding: 1px 0 0; }
	.contentsinner > hr::after	{ width: auto; bottom: 0; left: 9.8%; right: 9.8%; background-color: #ddd; }
	.contentsblock	{ padding: 45px 9.8%; margin: 0 0 30px; }
	.contenttxt	{ width: 100%; margin: 0; }
	.contxt_top > h2	{ margin: 0 0 26px; }
	.contxt_top > h2 > span	{ margin: 0 0 4px; font-size: clamp(16px, 23px, 5.4vw); padding: 3px; }
	.contxt_top > b	{ font-size: clamp(12px, 16px, 3.6vw); line-height: 1.5; margin: 0 0 26px; }
	.contxt_top > b.mid	{ font-size: clamp(12px, 20px, 4.6vw); }
	.contxt_top > b.cdg	{ font-size: clamp(12px, 18px, 4.1vw); }
	.contxt_btm	{ font-size: clamp(10px, 14px, 3vw); line-height: 1.5; letter-spacing:.03rem; margin: 0 0 40px; }
	.contentimg	{ width: 100%; }
	.step	{ max-width: 31.3%; }
	.contentsbutton	{ margin: 0 0 30px; }
	.contentsbutton > a	{ max-width: 240px; height: 50px; }
	.contentsbutton > a span	{ font-size: 16px; }
	.contentattention	{ padding: 26px 15px; }
	.contentattention > strong	{ font-size: 13px; margin: 0 0 12px; }
	.contentattention > ul > li	{ font-size: 12px; line-height: 1.6;  }
}

/* ------------ SLICK ------------- */
.slick-dots	{ display: -webkit-flex; display: flex; justify-content: center; bottom: -30px; }
.slick-dots li	{ margin: 0; width: 18px; height: 15px; }
.slick-dots li button	{ padding: 0; width: 18px; height: 15px; }
.slick-dots li button::before	{ content:"●"; color:#a3a3a3; opacity: 1!important; line-height: 1!important; font-size: 12px; width: 18px; height: 15px; text-align: center; }
.slick-dots li.slick-active button:before	{ color:#232323; opacity: 1!important; }
.slick-dotted.slick-slider	{ margin-bottom: 0; }
@media (max-width: 767.9px)	{ 
	.slick-dots li button::before	{ font-size: 11px; }
}

/* ------------ BRANDS ------------- */
.bottomoval	{ box-sizing: content-box; padding: 0; text-align:center; background-color: #eeeeee; }
.bottomoval .wrapper	{ max-width: 100%; padding: 100px 0 90px; }
.bottomoval .wrapper h2	{ margin: 0 auto 53px; max-width: 90px; display: block; }
.bottomoval .wrapper h2 img	{ width: 100%; 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% / 7); padding: 7px 1.1%; }
.itemBrandColumn img	{ width: 100%; vertical-align:bottom; line-height: 0; }
@media (orientation: portrait) and (max-width: 767px)	{ 
	.bottomoval .wrapper	{ padding: 73px 0 45px; }
	.bottomoval .wrapper h2	{ margin: 0 auto 43px; max-width: 68px; }
	.itemBrandWac	{ margin:0 auto; padding: 0 23px; }
	.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: 93px 0 5px; width: 230px; line-height: 1; }
.footbtn > a > img	{ width: 100%; }
@media (orientation: portrait) and (max-width: 767px)	{ 
	.footbtn > a	{ padding: 70px 0 38px; width: 170px; }
}

/* ------------ FOOTER ------------- */
footer	{ text-align: center; box-sizing: border-box; padding: 20px; }
footer .footer-inner	{ margin: 0 auto; padding: 20px; box-sizing: border-box; line-height: 1; background-color: #e6e6e6; }
footer .footer-inner small	{ color:#232323; font-size: 10px; font-weight: 700; letter-spacing:0; }
@media (max-width: 767px)	{ 
	footer	{ padding: 0; }
	footer .footer-inner	{  width: 100%; padding: 15px 0; }
	footer .footer-inner small	{ font-size: 9px; }
}
@media (max-width: 320px)	{ 
	footer .footer-inner small	{ font-size: 6px; -webkit-transform: scale(0.6); -webkit-transform-origin:0 0; }
}

/* ------------ BLOCK ------------- */
@media (max-width: 767.9px)	{ .pconly { display: none!important; } }
@media (min-width: 768px), (max-width: 813px) and (max-height: 376px)	{ .pconly { display: block; } }
@media (max-width: 767.9px)	{ .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; }