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

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@500&display=swap');
/*
  font-family: "Schibsted Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
*/

/*
font-family: jaf-lapture-subhead, serif;
Regular 400
SemiBold 600
*/




/*
.guide,
.guide1{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;}
.guide:before{content: '';position: fixed;width: 1px;left: 10.25%;top: 0;bottom: 0;background: #FF0004;}
.guide:after{content: '';position: fixed;width: 1px;right: 10.25%;top: 0;bottom: 0;background: #FF0004;}
.guide1:before{content: '';position: fixed;width: 1px;left: 23%;top: 0;bottom: 0;background: #FF0004;}
.guide1:after{content: '';position: fixed;width: 1px;right: 23%;top: 0;bottom: 0;background: #FF0004;}
*/

/* ---------- 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(10.5px , 0.86vw ,12px);
}

body{
	-webkit-text-size-adjust: 100%;
	font-style: normal;
	color:#000000;
	line-height: 1;
	background: #FFF;
	width: 100%;
	height: 100%;
	font-family: jaf-lapture-subhead, serif;
	font-weight: 400;
}


#loader-bg{
    position:fixed;
    width:100vw;
    height:100vh;
    top:0px;
    left:0px;
    z-index:10000;
	background: #FFF;
}

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


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

.HHpc{
	position: fixed;
	z-index: 200;
	top: 2.6em;
	left: 3.3em;
	width: 6.5em;
	display: block;
}
.HHsp{display: none;}

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

.header{
	width: 100%;
	height: 100vh;
	position: relative;
	background: #FFF;
	font-size: clamp(10px , 0.84vw ,14px);
}
.vegas{
    width:83.3%;
    height: 100%;
    position: relative;
	z-index: 10;
	overflow: hidden;
}
.vegas .vegasImage{
	position: absolute;
    width:100%;
	top: 0;
	bottom: 0;
	left: 0;
}
.header .title{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 16.7%;
	z-index: 20;
	line-height: 1;
	text-align: center;
	font-weight: 600;
	font-size: 1.33em;
	color: #3B414F;
	filter: blur(1.5em);
	opacity: 0;
	transition: filter 1.6s, opacity 0.5s;
}
.header.start .title{filter: blur(0);opacity: 1;}

.header .title h1{
	font-size: 2.625em;
	line-height: 0.9;
}
.header .title h2{
	margin-top: 1em;
}



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



#wrapper{
	width: 100%;
	background: #FFF;
	overflow: hidden;
}


/* 各セクション */
.group{
	width: 100%;
	position: relative;
}

.group .bkImg{
	position: absolute;
	/*inset: 0;*/
	height: 100vh;
	height: 100lvh;
	width: 100%;
	background-position: center center;
	background-size: cover;
	top: 0;
	left: 0;
	z-index: 0;
	/*backface-visibility: hidden;*/
}
/*
@media(min-width: 769px) {
	height: 100vh;
	will-change: transform;
	transform: translateZ(0);
}
*/

.set01 .bkImg{background-image: url("../images/groupbk01.webp");}
.set02 .bkImg{background-image: url("../images/groupbk02.webp");}
.set03 .bkImg{background-image: url("../images/groupbk03.webp");}


.group .element{
	position: relative;
	width: 100%;
	z-index: 10;
}


.specBox{
	position: absolute;
	top: 0;
	left: 0;
	height: 100vh;
	width: 36%;
	z-index: 20;
	color: #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
@media(min-width: 769px) {
.specBox{transition:opacity 0.4s;}
.specBox.is-hide{opacity: 0;}
}



.specBox .inner{
	display: flex;
	flex-direction: column;
	gap:2em;
}
.specBox .spec{
	letter-spacing: 0.03em;
	font-weight: 400;
	position: relative;
}
.specBox .spec.topLine{
	padding-top: 2.3em;
	margin-top: 0.3em;
}
.specBox .spec.topLine::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 1px;
	width: 3.5em;
	background: #FFF;
}

.specBox .spec p{font-size: 1em;}
.specBox .spec .num{}
.specBox .spec .price{}
.specBox .spec .name{font-size: 1.16em;margin: 0.6em 0;}
.specBox .spec .link{margin-top: 0.8em;}
.specBox .spec .link a{
	display: block;
	width: 11em;
	border: 1px solid #FFF;
	border-radius: 0.3em;
	color: #FFF;
	font-family: "Schibsted Grotesk", sans-serif;
	font-weight: 500;
	font-style: normal;
	text-align: center;
	padding: 0.4em 0;
}

@media(min-width: 769px) {
.specBox .spec .link a{-webkit-transition: background 0.3s;transition: background 0.3s;}
.specBox .spec .link a:hover{background:rgba(255,255,255,0.3);}
}








.imgFarst{
	width: 70%;
	height: 100vh;
	min-height: 66vw;
	margin-left: 28.5%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.imgFarst figure{width: 42%;}

.imgFarst img,
.imgMiddle img{
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
}


.set01 .imgMiddle{width: 59%;margin-left: 35.7%;}
.set02 .imgMiddle{width: 57%;margin-left: 36.6%;}
.set03 .imgMiddle{width: 57%;margin-left: 36.6%;}

.imgMiddle .side{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.set01 .imgBox{margin: 17.8% auto 0;}/*150px*/
.set01 .side figure{width: 49.7%;}
.set01 .vertical{width: 49.7%;}
.set01 .vertical figure:first-child{margin-bottom: 2.3%;}
.set01 .normal{width: 49.7%;}
.set01 .narrow{width: 37.8%;}
.set01 .wide{width: 71.5%;}

.set02 .imgBox{margin: 18.25% auto 0;}/*150px*/
.set02 .side figure{width: 49.4%;}
.set02 .normal{width: 61.3%;}
.set02 .wide{width: 77.8%;}

.set03 .imgBox{margin: 18.25% auto 0;}/*150px*/
.set03 .side figure{width: 49.4%;}
.set03 .normal{width: 61.3%;}
.set03 .wide{width: 77.8%;}

.imgLast{
	width: 100%;
	margin-top: 10.4%;
	position: relative;
	z-index: 10;
}

.imgLast img{
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}


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

.footer{
	width: 100%;
	height: 30vw;
	background: rgba(228, 233, 232, 1);
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.footer .allProducts{}
.footer .allProducts a{
	display: block;
	border: 1px solid #000;
	border-radius: 0.2em;
	margin: 0 auto;
	font-size: 1.66em;
	color: #000;
	width: 11em;
	text-align: center;
	padding: 0.75em 0 0.6em;
}
@media(min-width: 769px) {
.footer .allProducts a{-webkit-transition: background 0.3s;transition: background 0.3s;}
.footer .allProducts a:hover{background:rgba(0,0,0,0.1);}
}



.footer .copyright{
	position: absolute;
	bottom: 2em;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 0.92em;
	font-family: "Schibsted Grotesk", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}


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


@media(max-width:1080px) {
html{font-size: 0.9vw;}
.header{font-size: 0.91vw;}
.vegas{width:80%;}
.header .title{width: 20%;}

}



/*+++++++++++++++++++++++++++++++++++++++*/


@media(max-width:768px) {
html{font-size: 2.1vw;}

.HHpc{display: none;}

.HHsp{
	display: block;
	position: fixed;
	z-index: 200;
	top: 1.2em;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 4em;
}
.HHsp figure{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transition: opacity 0.3s;
}
.logo-black {opacity: 1;}
.logo-white {opacity: 0;}
.logo.is-white .logo-black {opacity: 0;}
.logo.is-white .logo-white {opacity: 1;}

/*-------*/

.header{
	width: 100%;
	height:100vh;
	height: 115svh;
	padding-top: 11svh;
}
.vegas{
	width: 100%;
	height: 55svh;
}
.header .title{
	position: absolute;
	top: calc(11svh + 55svh);
	bottom: 15svh;
	right: 0;
	width: 100%;
	font-size: 2.6em;
	background: #FFF;
}


/*
.ios-safari .header{height:100lvh;padding-top: 11lvh;}
.ios-safari .vegas{height: 55lvh;}
.ios-safari .header .title{top: calc(11lvh + 55lvh);}
.ios-safari #wrapper{margin-top: 60px;}
*/

/*-------*/

.set01 .bkImg{background-image: url("../images/groupbk01sp.webp");}
.set02 .bkImg{background-image: url("../images/groupbk02sp.webp");}
.set03 .bkImg{background-image: url("../images/groupbk03sp.webp");}

/*-------*/

.specBox{
	position: relative;
	height:auto;
	width: 75%;
	margin: 1em auto 0;
	display: block;
}

.specBox .inner{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	flex-direction:row;
	gap: 0em;
}
.specBox .spec{width: 45%;margin-top: 2.5em;}
.specBox .spec.topLine{padding-top: 2.5em;margin-top: 2.6em;}
.specBox .spec .name{white-space: nowrap;}
.specBox .spec .link a{width: 100%;}

/*-------*/

.imgFarst{
	width: 77%;
	height:auto;
	min-height:inherit;
	margin: 0 auto;
	display: block;
}
.imgFarst figure{width: 100%;padding-top: 25vw;}


.set01 .imgMiddle,
.set02 .imgMiddle,
.set03 .imgMiddle{width: 100%;margin:0 auto;}

.set01 .imgMiddle .side,
.set02 .imgMiddle .side{display: block;width: 71.8%;}


.set01 .imgBox{margin: 32vw auto 0;}
.set01 .side figure{width: 100%;}
.set01 .side figure:first-child{margin-bottom: 1.3vw;}
.set01 .vertical{width: 92.3%;}
.set01 .vertical figure:first-child{margin-bottom: 1.3vw;}
.set01 .normal{width: 92.3%;}
.set01 .narrow{width: 68.7%;}
.set01 .wide{width: 96.5%;}

.set02 .imgBox{margin: 32vw auto 0;}
.set02 .side figure{width: 100%;}
.set02 .side figure:first-child{margin-bottom: 1.3vw;}
.set02 .normal{width: 66.7%;}
.set02 .wide{width: 87.2%;}
.set02 .wide.i0202{width: 91.8%;}
.set02 .wide.i0205{margin-top: 1.3vw;}

.set02 .normal.i0206{width: 87.2%;}

.set03 .imgBox{margin: 32vw auto 0;}
.set03 .imgMiddle .side{width: 92.8%;}
.set03 .side figure{width: 49.4%;}
.set03 .normal{width: 57%;}
.set03 .wide{width: 71.8%;}

.imgLast{margin-top: 32vw;}

.imgLast img{
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 2;
	object-fit: cover;
}


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

.footer{height: 115vw;font-size: 0.9em;}
.footer .copyright{bottom: 4em;}



}


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



@media(max-width:680px) {
html{font-size: 2.85vw;}


.header{
	padding-top: 13svh;
}

.vegas{
	width: 100%;
	height: 79vw;
}
.header .title{
	top: calc(13svh + 79vw);
	font-size: 3.8em;
}



.specBox{width: 80%;}
.specBox .spec{width: 46.5%;margin-top: 2.5em;}

.footer{font-size: 1em;}

}