@charset "UTF-8";
/* CSS Document */



@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');
/*
reguler 400
medium 500
bold 700
*/


  @font-face {
  font-family: "FuturaNowTextMediumItalic";
  src: url('../font/FuturaNowTextMediumItalic/font.woff2') format('woff2'), url('../font/FuturaNowTextMediumItalic/font.woff') format('woff');
}
 
 @font-face {
  font-family: "DINNextProBold";
  src: url('../font/DINNextProBold/font.woff2') format('woff2'), url('../font/DINNextProBold/font.woff') format('woff');
}
@font-face {
  font-family: "DINNextProLight";
  src: url('../font/DINNextProLight/font.woff2') format('woff2'), url('../font/DINNextProLight/font.woff') format('woff');
}
@font-face {
  font-family: "DINPro-Regular";
  src: url('../font/DINPro-Regular.woff2') format('woff2'), url('../font/DINPro-Regular.woff') format('woff');
}

/*
.guide0,
.guide1,
.guide2,
.guide3,
.guide4{opacity: 0.3;z-index: 1000;position: relative;}
body:before{content: '';position: fixed;width: 1px;left: 50%;top: 0;bottom: 0;background: #FF0004;opacity: 0.3;z-index: 1000;}
.guide0:before{content: '';position: fixed;width: 1px;left: 5%;top: 0;bottom: 0;background: #FF0004;}
.guide0:after{content: '';position: fixed;width: 1px;right: 5%;top: 0;bottom: 0;background: #FF0004;}
.guide1:before{content: '';position: fixed;width: 1px;left: 10%;top: 0;bottom: 0;background: #FF0004;}
.guide1:after{content: '';position: fixed;width: 1px;right: 10%;top: 0;bottom: 0;background: #FF0004;}
.guide2:before{content: '';position: fixed;width: 1px;left: 15%;top: 0;bottom: 0;background: #FF0004;}
.guide2:after{content: '';position: fixed;width: 1px;right: 15%;top: 0;bottom: 0;background: #FF0004;}
.guide3:before{content: '';position: fixed;width: 1px;left: 7.5%;top: 0;bottom: 0;background: #00a0e9;}
.guide3:after{content: '';position: fixed;width: 1px;right: 7.5%;top: 0;bottom: 0;background: #00a0e9;}
.guide4:before{content: '';position: fixed;width: 1px;left: 12.5%;top: 0;bottom: 0;background: #00a0e9;}
.guide4:after{content: '';position: fixed;width: 1px;right: 12.5%;top: 0;bottom: 0;background: #00a0e9;}
*/

/* ---------- RESET ---------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, b, u, i, center, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video, textarea, input {margin:0;padding:0;border:0;font-size: 100%;font:inherit;vertical-align: baseline;text-decoration:none;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul, li {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
input, textarea, button{-webkit-apparence:none;border:none;background: none;outline: none;}
input:focus, textarea:focus{-webkit-apparence:none;outline: none;border:none;}
img{border:none;outline:none;vertical-align:top;font-size:0;line-height:0;}
img a{border:none;outline: none;}
a:focus{outline:none;}
hr {height:0;margin:0;padding:0;border:0;}
h1, h2, h3, h4, h5, h6, p{margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;text-decoration:none;}
input, textarea, button{-webkit-apparence:none;border:none;background: none;outline: none;}

img{width:100%;height:auto;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translate3d(0,0,0);}

*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none;   outline:none;box-sizing:border-box;margin:0;padding:0;}
/*----------------------------------*/




html{
	width: 100%;
	height: 100%;
	/*font-size: clamp(11px , 0.94vw ,15px);*/
	font-size:clamp(11px,calc(var(--vw)*0.94),15px);
}

body{
	-webkit-text-size-adjust: 100%;
	font-style: normal;
	color:#5a5d5c;
	line-height: 1;
	background: #FFF;
	width: 100%;
	height: 100%;
	font-family: "Zen Kaku Gothic New", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	font-weight: normal;
}


#loading{
    position:fixed;
    width:100vw;
    height:100vh;
    top:0px;
    left:0px;
    z-index:10000;
	background: #FFF;
}
#loading.is-hide{
	opacity: 0;
	pointer-events: none;
}

.inView{
	position: relative;
	opacity: 0;
	top: 3em;
	-webkit-transition:opacity 1.2s, top 1.0s cubic-bezier(0.33, 1, 0.68, 1);
	transition:opacity 1.2s, top 1.0s cubic-bezier(0.33, 1, 0.68, 1);
}
.inView.view{opacity: 1;top: 0;}




/*----------------------*/

.fixdContents{}

.HHlogo{
	width: 4.2em;
	position: fixed;
	z-index: 500;
	top: 1.6em;
	left: 1.8em;
}

.HHlogo #logo .st{fill: #EAEADD;transition: fill 0.2s;}
.HHlogo .text{opacity: 1;transition: opacity 0.3s;}

.HHlogo.isDark #logo .st{fill: #003559;}
.HHlogo.isDark .text{opacity: 0;}


.targetAria{}

/*----------------------*/


.hero{
	width: 100%;
	height: 100vh;
	position: relative;
}

.hero .mainImage{
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
	z-index: 1;
}
.hero .mainImage .visual{
	width: 50%;
	height: 100%;
	overflow: hidden;
}
.hero .mainImage .visual span{
	width: 100%;
	height: 100%;
	display: block;
	background-position: center center;
	background-size: cover;
	opacity: 0;
	transform:scale(1.3);
	transition:transform 2.5s cubic-bezier(0.33, 1, 0.68, 1),opacity 1.5s cubic-bezier(0.45, 0, 0.55, 1);
}
.hero .mainImage .visual.v01 span{background-image: url("../images/main01.webp");}
.hero .mainImage .visual.v02 span{background-image: url("../images/main02.webp");}

.hero.view .mainImage .visual span{opacity: 1;transform:scale(1);}



.hero .title{
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 10;
	margin: 0 auto;
	width: 100%;
}

.hero .title .mainTitle{
	width: 22.5em;
	margin: 5vh auto 0;
	position: relative;
}

.hero .title h1{
	width: 100%;
	position: relative;
}
.hero .title h1 span{
	display: block;
	opacity: 0;
	transition:opacity 1.0s;
}
.hero.start .title h1 span{opacity: 1;}


.lineBox{
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
    aspect-ratio:100 / 73;
}
.lineBox svg{
	width:100%;
	height:100%;
	display:block;
}
.lineBox rect{fill:none;}

.start .lineBox rect{
	fill:none;
	stroke:#CCFF02;
	stroke-width:0.4;
	/*vector-effect:non-scaling-stroke;*/
	stroke-dasharray:100;
	stroke-dashoffset:100;
	animation: draw 3s cubic-bezier(0.5, 1, 0.89, 1) forwards;
}
@keyframes draw{
    to{
        stroke-dashoffset:0;
    }
}

.hero .title h2{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 17vh;
	font-family: "FuturaNowTextMediumItalic";
	font-size: 1.4em;
	text-align: center;
	color: #CCFF02;
	letter-spacing: 0.05em;
	opacity: 0;
	transition:opacity 1.0s 1.5s;
}
.hero.start .title h2{opacity: 1;}

/*----*/

.scrollbar{
	width: 3em;
	position: absolute;
	left: 50%;
	bottom: -5em;
	height:10em;
	z-index: 100;
	opacity: 0;
	transition:opacity 1.0s 1.5s;
}
.start .scrollbar{opacity: 1;}


.scrollbar p{width: 1.12em;margin-left: 0.6em;}

.scrollbar .base{
	width:1px;
	height:10em;
	position: absolute;
	bottom:0px;
	left: 0;
	overflow: hidden;
    z-index: 5;
    /*background:#eaeadd;*/
}
.scrollbar .bar{
	width:1px;
	height:10em;
	position: absolute;
	bottom:0px;
	left: 0;
	overflow: hidden;
    z-index: 10;
}
.scrollbar .line{
		width: 100%;
		height: 100%;
		display: block;
		background: linear-gradient(to bottom,rgba(204,255, 0, 1) 50%, rgba(204, 255, 0, 0) 50%);
		background-position: 0 -100%;
		background-size: 100% 200%;
		animation: scrolldown 3.6s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
}
@keyframes scrolldown {
	0% {background-position: 0 100%;}
	50% {background-position: 0 0;}
	100% {background-position: 0 -100%;}
}




/*------*/

.main{width: 100%;}
.wapper{width: 100%;}

.imageBox{
	width: 100%;
	margin: 0 auto;
}

.imageBox.b02{margin-top: 10em;}
.imageBox.b03{margin-top: 10em;}
.imageBox.b04{margin-top: 10em;}

.imageBox .column{
	width: 85%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
.imageBox .column.rev{flex-direction: row-reverse;}

.imageBox .inner{margin: 0 auto;position: relative;}



figure.mask img{
	display:block;
	width:100%;
	clip-path: inset(0 100% 0 0);
}
figure.mask.view img{
	animation: maskImage 1.2s ease forwards;
}
@keyframes maskImage{
to{
	clip-path: inset(0 0 0 0);
	}
}


.imageBox .set01{width: 77%;z-index: 5;margin-top: 10em;}
.imageBox .set01 figure{width: 43%;}

.imageBox .set02{width: 85%;z-index: 1;margin-top: -7.5em;}

.imageBox .set03{
	width:85%;
	margin-top: -12em;
	display: flex;
	align-items:flex-end;
	flex-direction:row-reverse;
	justify-content: space-between;
}
.imageBox .set03 figure{width: 47.5%;margin-right: 8%;}
.imageBox .set03 .spec{position: relative;bottom: -5em;}

.imageBox .set04{width: 47.7%;margin: 0;}
.imageBox .set05{width: 47.7%;margin: 7.5em 0 0;}

.imageBox .set06{
	width:81%;
	margin-top: 7em;
	display: flex;
	align-items: flex-end;
	z-index: 5;
}
.imageBox .set06 figure{width: 50%;}
.imageBox .set06 .spec{margin: 0 0 10em 3em;}

.imageBox .set07{
	width:100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-direction:row-reverse;
	margin-top: -7em;
	z-index: 1;
}
.imageBox .set07 figure{width: 58.5%;}
.imageBox .set07 .spec{margin-left: 8.5%;}



.imageBox .set08{width: 47.7%;margin: 0;}
.imageBox .set09{width: 47.7%;margin:15em 0 0;}


.imageBox .set095{
	width: 58.5%;
	margin: 5em 0 0 30.5%;
	display: flex;
	align-items: flex-end;
}
.imageBox .set095 figure{width: 56%;}
.imageBox .set095 .spec{width: 44%;padding:0 0 1em 3.2em;}
.imageBox .set095 .spec a{display: inline-block;line-height: 1.5;}
.imageBox .set095 .spec .name{margin-left: -0.15em;}


.imageBox .set10{width: 100%;}

.imageBox .set10 figure{margin: 0 auto;position: relative;}
.imageBox .set10 .img01{width: 32.8%;left: -3%;margin-top: 5em;}
.imageBox .set10 .img02{width: 32.8%;left: 23%;margin-top: 3em;z-index: 5;}
.imageBox .set10 .img03{width: 58.5%;left: -17.5%;margin-top: -16em;}
.imageBox .set10 .imageColumn{
	width: 68%;
	margin: 5em auto 0;
	position: relative;
	left: -7%;
	display: flex;
	justify-content: space-between;
}
.imageBox .set10 .imageColumn figure{width: 48.3%;margin: 0;}
.imageBox .set10 .img06{width: 58.5%;left: 16%;margin-top: 3em;}

.imageBox .set11{width: 47.7%;margin: 0;}
.imageBox .set12{width: 47%;margin: 7.5em 0 0;}

.imageBox .set13{width: 81.25%;margin-top: 7em;}
.imageBox .set13 figure{width: 50%;}
.imageBox .set13 .spec a{display: inline-block;line-height: 1.5;}
.imageBox .set13 .spec .name{margin-left: -0.15em;}


.imageBox .set14{width: 100%;margin-top: -20em;z-index: 5;pointer-events: none;}
.imageBox .set14 figure{width: 58.5%;margin-left: 41.5%;}
.imageBox .set14 .spec{text-align: right;padding-right: 5em;pointer-events: all;}
.imageBox .set14 .spec a{justify-content: flex-end;}

.imageBox .set15{width: 32.8%;margin-top: -2em;left: -12.5%;}

.imageBox .set16{width: 85%;margin-top: 5em;}
.imageBox .set16 figure{width: 69%;}

.imageBox .set17{width: 85%;margin-top: 5em;}


/*----------------------*/

.spec{
	color: #5a5d5c;
	font-family: "DINNextProLight";
	letter-spacing: 0.01em;
	margin-top: 2.8em;
}

.spec .gender{
	font-size: 1.17em;
	margin: 1.5em 0 0.8em;
}
.spec .gender em{
	display: inline-block;
	padding: 0.3em 0.4em 0 0.4em;
	line-height: 0.85;
	border-left: 1px solid #5a5d5c;
	border-right: 1px solid #5a5d5c;
}
.spec .item{margin-top: 0.8em;}

.spec a{
	color: #5a5d5c;
	display: inline-flex;
	justify-content: flex-start;
}
.spec a.soon{pointer-events: none;}

@media(min-width: 769px) {
.spec a{transition:color 0.3s;}
.imageBox.b01 .spec a:hover,
.imageBox.b02 .spec a:hover{color:#005eae;}
.imageBox.b03 .spec a:hover{color:#56b879;}
.imageBox.b04 .spec a:hover{color:#ed6c00;}
.imageBox.b04 .set11 .spec a:hover,
.imageBox.b04 .set12 .spec a:hover{color:#56b879;}



}

.spec .category{font-size: 1.17em;}
.spec .category em{display: none;}
.spec .category i{display: none;}
.spec .name em{font-size: 1.17em;padding-right: 0.4em;}
.spec .price{font-size: 1.17em;padding-left: 0.4em;}
.spec .price i{margin-left: 0.4em;}

/*----------------------*/

.carousel.embla{
	overflow:hidden;
	width:100%;
	margin:6em auto 0;
}
.embla__container{display:flex;}

.embla__slide{
	flex:0 0 20vw;
	margin-right:1.5vw;
}
.embla__slide img{
	display:block;
	width:100%;
}


/*----------------------*/

.movie{
	position:relative;
	margin: 10em  auto 0;
	overflow:hidden;
}
.movie video{
	width: 100%;
	aspect-ratio:16 / 9;
}
.mov01 .movieSound{
	position:absolute;
	right:0.8em;
	bottom:0.8em;
	z-index:10;
	width: 3.5em;
	height: 3.5em;
	cursor:pointer;
	background: url("../images/sound_off.svg") center center;
	background-size: cover;
}
.mov01 .movieSound.on{
	opacity:1;
	background: url("../images/sound_on.svg") center center;
	background-size: cover;
}

.fancybox-content {
    background: none !important;
    padding: 0 !important;
}
.fancybox-slide--iframe{
    padding:0 !important;
}
.fancybox-slide--iframe .fancybox-content{
    width:100vw !important;
    height:calc(100vw * 9 / 16);
}
.fancybox-iframe{
    width:100%;
    height:100%;	
}
.movieClose{
    position:fixed;
    top:2.5vh;
    left:50%;
    transform:translateX(-50%);
    z-index:999999;
    color:#fff;
	font-size: 1.2em;
	font-family: "DINPro-Regular";
	background: rgba(255,255,255,0.3);
	padding: 0.35em 1.2em;
	border-radius: 2em;
	cursor: pointer;
}

.movie.mov02{
	width: 100%;
	aspect-ratio:16 / 9;
	background: url("../images/mov_th.webp") center center;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
}
.movie.mov02 .play{
	width: 9.3em;
	height:9.3em;
}
.movie.mov02 .play a{
	width:100%;
	height:100%;
	border: 1px solid #CCFF02;
	border-radius: 50%;
	position: relative;
	background: rgba(255,255,255,0.3);
	display: flex;
	justify-content: center;
	align-items:center;
	color: #CCFF02;
	font-family: "DINNextProBold";
	font-size: 1.45em;
	letter-spacing: 0.02em;text-align: center;
}
.movie.mov02 .play a span{
	display:block;
	width: 1.2em;
	height: 1.4em;
	margin: 0.4em auto 0;
	position: relative;
	left: 0.1em;
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
	background: #CCFF02;
}
@media(min-width: 769px) {
.movie.mov02 .play a{transition: background 0.3s, color 0.3s;}
.movie.mov02 .play a span{transition: background 0.3s}
.movie.mov02 .play a:hover{background: #CCFF02;color: #FFF;}
.movie.mov02 .play a:hover span{background: #FFF;}
}

/*----------------------*/

.itemCredit{
	width: 82.5%;
	margin: 10em auto 0;
}

.itemCredit h2{
	font-family: "DINNextProBold";
	text-align: center;
	font-size: 2.83em;
	letter-spacing: 0.02em;
	position: relative;
	line-height: 1;
	padding: 0.7em 0 0.5em;
}
.itemCredit h2::before,
.itemCredit h2::after{
	content: '';
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	height: 2px;
	width: 13em;
	background-color: #56b879;
}
.itemCredit h2::before{top: 0;}
.itemCredit h2::after{bottom: 0;}

.itemCredit .itemList{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
}

.itemCredit .itemList .item{
	width: 50%;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	margin-top: 5em;
}
.itemCredit .itemList .item figure{width: 53.5%;}
.itemCredit .itemList .item:nth-child(even) figure{margin-left: 5%;}

.itemCredit .itemList .item .itemSpec{
	width: 35.5%;
	margin-left: 6%;
	font-family: "DINNextProLight";
	font-size: 1em;
}
.itemCredit .itemList .itemSpec li{margin-top: 1.5em;position: relative;}
.itemCredit .itemList .itemSpec li:first-child{margin-top: 0;}


.itemCredit .itemList .item .type{font-size: 1.17em;}
.itemCredit .itemList .item .type span{display: none;}

.itemCredit .itemList .item .info{}

.itemCredit .itemList .item .info .num{font-size: 1.17em;margin: 0.4em 0 0.1em;display: block;}
.itemCredit .itemList .item .info .sp{display: none;}
.itemCredit .itemList .item .info .name{}
.itemCredit .itemList .item .price{
	width: 13em;
	font-size: 1.17em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0.4em;
}
.itemCredit .itemList .price a{
	background: #56b879;
	border: 1px solid #56b879;
	color: #FFF;
	padding: 0.5em 1.5em 0.2em;
	border-radius: 0.4em;
	font-family: "FuturaNowTextMediumItalic";
}

.itemCredit .itemList .price a.soon{
	background: #FFF;
	border: none;
	pointer-events: none;
	color: #56b879;
	white-space:nowrap;
	padding-left: 0;
	padding-right: 0;
	border-radius: 0;
	position: relative;
	left: 0.25em;
	font-size: 0.9em;
}



.itemCredit .allItems{
	margin-top: 10em;
	text-align: center;
}
.itemCredit .allItems h3{
	font-size: 2.4em;
}
.itemCredit .allItems a{
	color: #FFF;
	display: inline-block;
	font-family: "DINNextProBold";
	letter-spacing: 0.03em;
	background: #56b879;
	border: 1px solid #56b879;
	padding: 0.8em 1.5em 0.6em;
	border-radius: 0.4em;
	font-size: 3.0em;
	margin-top: 1em;
}
@media(min-width: 769px) {
.itemCredit .itemList .price a{transition: background 0.3s, color 0.3s;}
.itemCredit .itemList .price a:hover{background:#EFEFEF;color: #56b879;}
.itemCredit .allItems a{transition: background 0.3s, color 0.3s;}
.itemCredit .allItems a:hover{background:#EFEFEF;color: #56b879;}
}






/*----------------------*/


.footer{
	width: 100%;
	margin-top: 12em;
	overflow: hidden;
	height: 60vw;
	position: relative;
	background: url("../images/footer02_pc.webp") center center;
	background-size: cover;
}
.footer h2{
	width: 12.6em;
	margin: 6.5em auto 0;
}
.footer .pageTop{
	position: absolute;
	top: 6em;
	right: 5%;
	z-index: 5;
	width: 6.6em;
	cursor: pointer;
}


.footer .pageTop .icon{
	position: relative;
	width: 6.5em;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 1.0em 0 0.6em;
	border: 1px solid #CCFF02;
	background: rgba(255,255,255,0.3);
	transition: background 0.3s;
}
.footer .pageTop .icon .arrow{
	width: 2.2em;
	height: 1.6em;
	background: #CCFF02;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	transition: background 0.3s;
}
.footer .pageTop .icon .txt{
	font-family: "FuturaNowTextMediumItalic";
	 font-size: 2.2em;
	 margin-top: 0.5em;
	 color: #CCFF02;
	 transition: color 0.3s;
}

@media(min-width: 769px) {
.footer .pageTop:hover .icon{background: #CCFF02;}
.footer .pageTop:hover .icon .arrow{background: #FFF;}
.footer .pageTop:hover .icon .txt{color: #FFF;}
}







.footer .copyright{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2.5em;
	color: #FFF;
	letter-spacing: 0.1em;
	font-family: "DINNextProBold";
	font-size: 1.25em;
	text-align: center;
}




 
 
/*----------------------*/

.fixdContents{}

.HHlogo{
	width: 6em;
	position: fixed;
	z-index: 500;
	top: 1.6em;
	left: 2.5em;
}

.HHlogo #logo .st{fill: #CCFF02;transition: fill 0.25s;}
.HHlogo .text{
	opacity:0;
	color: #005eae;
	transition: all 0.25s;
	font-family: "DINNextProBold";
	font-size: 1.35em;
	margin-top: 0.8em;
	white-space:nowrap;
}

.HHlogo.color01 #logo .st{fill: #005eae;}
.HHlogo.color02 #logo .st{fill: #56b879;}
.HHlogo.color03 #logo .st{fill: #ed6c00;}
.HHlogo.color01 .text{color: #005eae;opacity:1;}
.HHlogo.color02 .text{color: #56b879;opacity:1;}
.HHlogo.color03 .text{color: #ed6c00;opacity:1;}


.targetAria{}