@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: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, "小塚ゴシック Pro L", sans-serif; font-weight: 400; height:100%; overflow-x: hidden;}
.spConInner	{ margin: 0 auto; box-sizing: border-box; }
@media (max-width: 979px)	{ .spConcontainer { width: 100%; margin: 0; padding:0; } }
@media (min-width: 980px)	{ .spConInner { max-width: 1480px; } }
.img-responsive	{ display: block; height: auto; max-width: 100%; }
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; }
a:hover	{ color: #a5a5a5; font-style: normal; text-decoration: none; }
.img-responsive	{ display: block; height: auto; max-width: 100%; }

/* ------------ LOADING ------------- */
.loading	{ position: fixed; display: -webkit-flex; display: flex; justify-content: center;  align-items: center; z-index: 99999; background-color: #ffffff; top: 0; left: 0; right: 0; bottom: 0; }
.loading-block	{ width: 60px; display: flex; justify-content: space-between; }
.circle	{ width: 10px; height: 10px; background-color: #dfdfdf; border-radius: 50%; animation: loading 1s infinite; }
.circle:nth-child(2)	{ animation-delay: 0.1s; }
.circle:nth-child(3)	{ animation-delay: 0.2s; }
.circle:nth-child(4)	{ animation-delay: 0.3s; }
@keyframes loading {
	0%	{ transform: scale(0.1); }
	100%	{ transform: scale(1); }
}
.fadein	{ opacity: 0; transition-duration: 1s; transform: translate(0, 30px); }
.fadein.inview	{ opacity: 1; transform: translate(0, 0); }

.delay03	{ transition-delay: .3s; }
.delay06	{ transition-delay: .6s; }
.delay09	{ transition-delay: .9s; }
.delay20	{ transition-delay: 2s; }

/* ------------ MAIN ------------- */
.mainVisual	{ position: absolute; top: 0px; left: 0px; width: 100%; height:100vh; padding: 0; z-index:-1; }
.mainVisual-inner	{ width: 100%; height:100%; position: relative; }
.mainVisual-inner .maintt	{ width: calc(100% - 200px); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.mainVisualimg	{ width: 100%; height:100%; box-sizing: border-box; background-size: cover; background-position-x: center; background-position-y: center; background-repeat: no-repeat; }
@media (orientation: portrait) and (max-width: 767px)	{ 
	.mainVisual-inner .maintt	{ width: calc(100% - 50px); }
}

.mainTitle	{ width: 100%; height:100vh; margin: 0; }
.mainTitle .wrapper	{ width: 100%; height:100%; padding: 0 100px; position: relative; }
.mainTitle .wrapper > h1	{ position: absolute; top: 25%; left: 100px; width: 25%; display: block; line-height: 1; max-width: 360px; }
.mainTitle .wrapper > h2	{ position: absolute; bottom: 32%; left: 100px; width: 17%; display: block; line-height: 1; max-width: 250px; }
.mainTitle .wrapper > strong	{ position: absolute; top: 25%; right: 100px; width: 8.5%; display: block; line-height: 1; max-width: 130px; }
.mainTitle .wrapper > b	{ position: absolute; bottom: 32%; right: 100px; width: 6.5%; display: block; line-height: 1; max-width: 95px; }
.mainTitle .wrapper > video	{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 18.5%; max-width: 260px; }
.mainTitle .wrapper img	{ width: 100%; height: auto; line-height: 1; }
@media (orientation: portrait) and (max-width: 767px)	{ 
	.mainTitle .wrapper > h1	{ top: 40px; left: 25px; width: 56%; }
	.mainTitle .wrapper > h2	{ bottom: 15%; left: 25px; width: 50%; }
	.mainTitle .wrapper > strong	{ top: 40px; right: 25px; width: 1.8%; }
	.mainTitle .wrapper > b	{ bottom: 15%; right: 25px; width: 16.5%; }
	.mainTitle .wrapper > video	{ top: 47%; width: 40%; max-height: 400px; min-width: 150px; }
}
@media (orientation: landscape) and (max-height: 490px)	{ 
	.mainTitle .wrapper h1	{ width: 230px; }
	.mainTitle .line	{ width: 230px; height:30px; }
}

/* ------------ CONTENT ------------- */
.section	{ width: 100%; padding: 0; margin: 0; }
.section.area01	{ background-color: #dfdfdf; }
.section.area02	{ background-color: #ffffff; }
.section.area03	{ background-color: #dfdfdf; }
.section .wrapper	{ display: -webkit-flex; display: flex; width: 100%; padding: 0; margin: 0; overflow: hidden; }
.section.area02 .wrapper	{ flex-direction: row-reverse; }
.section .wrapper > *	{ width: 50%; }
.section .wrapper .content	{ display: -webkit-flex; display: flex; flex-direction: column; align-items: center; position: relative; }
.section .wrapper .content b	{ padding: 104px 0 80px; line-height: 1; width: 100%; max-width: 100px; }
.section .wrapper .content strong	{ padding: 0 0 40px; width: 100%; max-width: 400px; }
.section .wrapper .content p	{ font-size: 18px; line-height: 28px; font-weight: 700; text-align: center; width: 100%; max-width: 400px; padding: 0 0 104px; }
@media (orientation: portrait) and (max-width: 767px)	{ 
	.section .wrapper .blank	{ display: none; }
	.section .wrapper .content	{ width: 100%; }
	.section .wrapper .content b	{ padding: 80px 0; line-height: 1; width: 100%; max-width: 100px; }
	.section .wrapper .content strong	{ max-width: 300px; }
	.section .wrapper .content p	{ font-size: 15px; line-height: 23px; padding: 0 0 75px; }
}
.section .wrapper .content .conimages	{ width: 400px; position: absolute; top: 110px; bottom: 110px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.section .wrapper .content .conimages .conimages_inner	{ position: relative; width: 400px; height:100%; }
.section .wrapper .content .conimages .conimages_inner img	{ width: 100%; height: auto; line-height: 1; }
.section.area01 .wrapper .content .conimages .conimages_inner .img01	{ position: absolute; left: -380px; top:0; width: 200px; line-height: 1; }
.section.area01 .wrapper .content .conimages .conimages_inner .img02	{ position: absolute; left: -1120px; top:0; width: 700px; line-height: 1; }
.section.area01 .wrapper .content .conimages .conimages_inner .img03	{ position: absolute; left: -480px; bottom:-10px; width: 420px; line-height: 1; }
.section.area02 .wrapper .content .conimages .conimages_inner .img01	{ position: absolute; right: -886px; top:30px; width: 800px; }
.section.area02 .wrapper .content .conimages .conimages_inner .img02	{ position: absolute; right: -355px; top:0; width: 295px;  }
.section.area03 .wrapper .content .conimages .conimages_inner .img01	{ position: absolute; left: -640px; top:0; width: 314px; }
.section.area03 .wrapper .content .conimages .conimages_inner .img02	{ position: absolute; left: -1080px; top:0; width: 400px;  }
.section.area03 .wrapper .content .conimages .conimages_inner .img03	{ position: absolute; left: -290px; bottom:0; width: 250px; }
@media (orientation: portrait) and (max-width: 767px)	{ 
	.section .wrapper .content .conimages	{ position: static; width: 100%; top:auto; left:auto; bottom:auto; -webkit-transform: translateX(0); transform: translateX(0); }
	.section .wrapper .content .conimages .conimages_inner	{ width: 100%; height:auto; }
	.section.area01 .wrapper .content .conimages .conimages_inner .img01	{ position: absolute; left: 25px; right:auto; top:0; width: 37.3%; }
	.section.area01 .wrapper .content .conimages .conimages_inner .img02	{ position: static; padding: 50px 25px 25px 20%; left: auto; top:auto; width: auto; }
	.section.area01 .wrapper .content .conimages .conimages_inner .img03	{ position: static; right: auto; bottom:auto; width: 100%; padding: 0 25px 80px 0; }
	.section.area02 .wrapper .content .conimages .conimages_inner	{ padding: 0 0 60px; }
	.section.area02 .wrapper .content .conimages .conimages_inner .img01	{ position: static; right: auto; top:0; left: 0; width: 100%; height:auto; z-index:-1; }
	.section.area02 .wrapper .content .conimages .conimages_inner .img02	{ position: static; right: auto; top:auto; width: auto; padding: 90px 0 80px 25px; }
	.section.area02 .wrapper .content .conimages .conimages_inner .img02 img	{ width: 180px; }
	.section.area03 .wrapper .content .conimages .conimages_inner .img01	{ position: static; padding: 0 0 25px 0; margin: 0; left:auto; top:auto; width: 81.3%; }
	.section.area03 .wrapper .content .conimages .conimages_inner .img02	{ position: static; padding: 0 25px 80px 0; left:auto; top:auto; width: 100%;  }
	.section.area03 .wrapper .content .conimages .conimages_inner .img03	{ position: absolute; top:40px; left: 50%; width: 50%; padding: 0 25px 0 0; }
}

/* ------------ ARROWS TOP ------------- */
ul.bottomarrow	{ padding: 0; margin: 0; display: -webkit-flex; display: flex; width: 100%; height:50%; position: absolute; bottom: 0; left: 0; }
ul.bottomarrow > li	{ width: 50%; list-style: none; }
.mainTitle .arrow	{ background: url(../images/down_pc.svg) center bottom no-repeat; background-size: 84px auto;}
@media (orientation: portrait) and (max-width: 767px)	{ 
	ul.bottomarrow > li	{ width: 100%; display: none; }
	.mainTitle .arrow	{ display: block; background-image: url(../images/down_sp.svg); background-size: 55px auto; }
}

/* ------------ ARROW ------------- */
.arrowtp	{ height:124px; width: 100%; background-repeat:no-repeat; background-position: top center; background-size: auto 124px;}
.arrowbt	{ height:124px; width: 100%; background-repeat:no-repeat; background-position: bottom center; background-size: auto 124px;}
.area01 .arrowtp	{ background-image: url(../images/ar01up_pc.svg); }
.area01 .arrowbt	{ background-image: url(../images/ar01dw_pc.svg); }
.area02 .arrowtp	{ background-image: url(../images/ar02up_pc.svg); }
.area02 .arrowbt	{ background-image: url(../images/ar02dw_pc.svg); }
.area03 .arrowtp	{ background-image: url(../images/ar03up_pc.svg); }
.area03 .arrowbt	{ background-image: url(../images/ar03dw_pc.svg); }
@media (orientation: portrait) and (max-width: 767px)	{ 
	.arrowtp	{ height:70px; background-size: auto 70px;}
	.arrowbt	{ height:70px; background-size: auto 70px;}
	.area01 .arrowtp	{ background-image: url(../images/ar01up_sp.svg); }
	.area01 .arrowbt	{ background-image: url(../images/ar01dw_sp.svg); }
	.area02 .arrowtp	{ background-image: url(../images/ar02up_sp.svg); }
	.area02 .arrowbt	{ background-image: url(../images/ar02dw_sp.svg); }
	.area03 .arrowtp	{ background-image: url(../images/ar03up_sp.svg); }
	.area03 .arrowbt	{ background-image: url(../images/ar03dw_sp.svg); }
}

/* ------------ ATTENTION TITLE ------------- */
.attenArea	{ display: -webkit-flex; display: flex; flex-wrap: wrap; }
.attenArea .attCont	{ width: 50%; }
.attenArea .attCont.cont01	{ background-color: #f7f7f7; }
.attenArea .attCont.cont02	{ background-color: #dfdfdf; }
.attenArea .attCont.cont03	{ background-color: #dfdfdf; }
.attenArea .attCont.cont04	{ background-color: #f7f7f7; }
.attenArea .attCont .wrapper	{ display: block; width: 100%; padding: 140px 30px 120px; margin: 0 auto; text-align: center; }
.attenArea .attCont .wrapper h3	{ display: block; width: 100%; max-width: 280px; line-height: 1; padding: 0; margin: 0 auto 95px; }

@media (orientation: portrait) and (max-width: 767px)	{ 
	.attenArea .attCont	{ width: 100%; }
	.attenArea .attCont.cont01	{ background-color: #f7f7f7; }
	.attenArea .attCont.cont02	{ background-color: #dfdfdf; }
	.attenArea .attCont.cont03	{ background-color: #f7f7f7; }
	.attenArea .attCont.cont04	{ background-color: #dfdfdf; }
	.attenArea .attCont .wrapper	{ padding: 100px 0; }
	.attenArea .attCont .wrapper h3	{ max-width: 230px; margin: 0 auto 77px; }
}

/* ------------ ATTENTION CONTENT ------------- */
.attenArea .attCont .wrapper	{ width: 100%; max-width: 570px; }
.attenArea .attCont.cont01 .wrapper ul	{ display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: center; }
.attenArea .attCont.cont01 .wrapper ul.after	{ color:#777777; }
.attenArea .attCont.cont01 .wrapper ul > li	{ list-style: none; line-height: 30px; text-align: center; font-size: 16px; font-weight: 700; padding: 0; position: relative; }
.attenArea .attCont.cont01 .wrapper ul > li br	{ display: none; }
.attenArea .attCont.cont01 .wrapper ul > li.slash	{ padding-left: 14px; }
.attenArea .attCont.cont01 .wrapper ul > li.slash::before	{ content: "/"; position: absolute; left:4px; }
.attenArea .attCont.cont01 .wrapper p	{ color:#777777; line-height: 1; text-align: center; font-size: 16px; font-weight: 700; padding: 60px 0 14px; }
.taisste	{ display: -webkit-flex; display: flex; flex-direction: column; align-items: center; }
@media (max-width: 1000px)	{ 
	.attenArea .attCont .wrapper	{ width: 100%; max-width: 570px; text-align: center; }
	.attenArea .attCont.cont01 .wrapper ul	{ display: inline-block; text-align: left; padding: 0 0 0 16px; margin: 0 auto; }
	.attenArea .attCont.cont01 .wrapper ul > li	{ list-style: outside; text-align: left; font-size: clamp(14px, 16px, 1.8vw); line-height: 30px; padding: 0; }
	.attenArea .attCont.cont01 .wrapper ul > li span	{ vertical-align: -0.1em; }
	.attenArea .attCont.cont01 .wrapper ul > li br	{ display: block; }
	.attenArea .attCont.cont01 .wrapper ul > li.slash	{ padding-left: 0; }
	.attenArea .attCont.cont01 .wrapper ul > li.slash::before	{ content: ""; display: none; }
	.attenArea .attCont.cont01 .wrapper p	{ display: block; text-align: left; padding: 0; width: 260px; min-width: 260px; font-size: 15px; padding: 60px 0 14px; margin: 0 auto; }
	.taisste	{ display: inline-block; }
}


.attenArea .attCont.cont02 .info	{ display: block; text-align: center; }
.attenArea .attCont.cont02 .info > strong	{ display: text-align: center; block; color:#111111; font-size: 16px; line-height: 30px; font-weight: 700; padding: 0; }
.attenArea .attCont.cont02 .info > p	{ color:#777777; font-size: 16px; line-height: 30px; font-weight: 700; padding: 0 0 30px; }
@media (max-width: 1000px)	{ 
	.attenArea .attCont.cont02 .info > strong	{ font-size: 15px; line-height: 26px; }
	.attenArea .attCont.cont02 .info > p	{ font-size: 15px; line-height: 26px; padding: 0 0 26px; }
}
.attenArea .attCont.cont03 .wrapper ul	{ display: block; }
.attenArea .attCont.cont03 .wrapper ul > li	{ list-style: outside; color:#777777; text-align: left; font-size: 14px; font-weight: 700; line-height: 26px; padding: 0; margin: 0; }
@media (max-width: 1000px)	{ 
	.attenArea .attCont.cont03 .wrapper ul	{ margin: 0 22px 0 35px;  }
	.attenArea .attCont.cont03 .wrapper ul > li	{ font-size: 11.8px; line-height: 20px; }
	.attenArea .attCont.cont03 .wrapper ul > li span	{ vertical-align: -0.1em; }
}
@media (max-width: 374px)	{ 
	.attenArea .attCont.cont03 .wrapper ul	{ max-width: 100%; margin: 0 25px 0 35px; }
}
.attenArea .attCont.cont04 .wrapper dl	{ display: block; }
.attenArea .attCont.cont04 .wrapper dl > dt	{ color:#111111; text-align: left; font-size: 14px; font-weight: 700; line-height: 26px; padding: 0 0 0 28px; margin: 0; position: relative; }
.attenArea .attCont.cont04 .wrapper dl > dt::before	{ content: "Q"; position: absolute; left:0px; }
.attenArea .attCont.cont04 .wrapper dl > dd	{ color:#777777; text-align: left; font-size: 14px; font-weight: 700; line-height: 26px; padding: 0 0 26px 28px; margin: 0; position: relative; }
.attenArea .attCont.cont04 .wrapper dl > dd::before	{ content: "A"; position: absolute; left:0px; }
@media (max-width: 1000px)	{ 
	.attenArea .attCont.cont04 .wrapper dl	{ max-width: 320px; margin: 0 auto;  }
	.attenArea .attCont.cont04 .wrapper dl > dt	{ font-size: 12px; line-height: 20px; padding: 0 0 0 24px; }
	.attenArea .attCont.cont04 .wrapper dl > dd	{ font-size: 12px; line-height: 20px; padding: 0 0 20px 24px; }
}
@media (max-width: 374px)	{ 
	.attenArea .attCont.cont04 .wrapper dl	{ max-width: 100%; margin: 0 20px; }
}

/* ------------ 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: 94px; 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: 228px; line-height: 1; }
.footbtn > a > img	{ width: 100%; }
@media (orientation: portrait) and (max-width: 767px)	{ 
	.footbtn > a	{ padding: 70px 0 38px; 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	{ text-align: center; box-sizing: border-box; padding: 0; background-color: #dfdfdf; }
footer .footer-inner	{ margin: 0 auto; padding: 20px 0 25px; box-sizing: border-box; line-height: 1; }
footer .footer-inner small	{ color:#000000; font-size: 10px; font-weight: 700; }
@media (max-width: 767px)	{ 
	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; }
}

/* ------------ GO TOP ------------- */
#scrollUp { display: none; bottom: 20px; right: 12px; background-color:rgba(255,255,255,0); display:block; width: 30px; height: 30px; overflow: hidden; background-image: url(../images/gotop.png); background-position: center center; background-repeat:no-repeat; background-size:cover; }
a#scrollUp:link, 
a#scrollUp:visited, 
a#scrollUp:hover, 
a#scrollUp:active	{ text-decoration: none; }
a#scrollUp:hover, 
a#scrollUp:active	{ background-color:rgba(255,255,255,0); background-image: url(../images/gotop_ov.png); }
@media (max-width: 767px)	{ 
	#scrollUp {  bottom: 15px; right: 5px; }
}

/* ------------ BLOCK ------------- */
@media (max-width: 567px)	{ .pconly-slider { display: none!important; height: 100%; min-height: 100%; } }
@media (min-width: 568px)	{ .pconly-slider { display: block; height: 100%; min-height: 100%; } }
@media (max-width: 567px)	{ .sponly-slider { display: block; height: 100%; min-height: 100%; } }
@media (min-width: 568px)	{ .sponly-slider { display: none!important; height: 100%; min-height: 100%; } }

@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; } }

@media (max-width: 1100px)	{ .pconly_st { display: none!important; } }
@media (min-width: 1101px)	{ .pconly_st { display: block; } }
@media (max-width: 1100px)	{ .sponly_st { display: block; } }
@media (min-width: 1101px)	{ .sponly_st { display: none!important; } }
@media (max-width: 1300px)	{ .pconly_st2 { display: none!important; } }
@media (min-width: 1301px)	{ .pconly_st2 { display: block; } }
@media (max-width: 1300px)	{ .sponly_st2 { display: block; } }
@media (min-width: 1301px)	{ .sponly_st2 { display: none!important; } }

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