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



@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500&display=swap');
/*
font-family: 'Zen Kaku Gothic New', sans-serif;
Regular 400
Medium 500
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
/*
font-family: "Montserrat", serif;
font-weight: 500;
*/

/*
font-family: "mr-eaves-xl-modern", sans-serif;
font-weight: 200;
font-style: normal;
font-family: "mr-eaves-xl-modern", sans-serif;
font-weight: 300;
font-style: normal;
*/
@font-face {
font-family: "DINPro-Regular";
src: url('font/DINPro-Regular.woff2') format('woff2'), url('font/DINPro-Regular.woff') format('woff');
}


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

body{
	-webkit-text-size-adjust: 100%;
	font-size: 0.77vw;
	font-style: normal;
	color:#4D4D4D;
	line-height: 1;
	font-weight: 500;
	background: #EAEAEA;
	font-family: "Zen Kaku Gothic New", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "verdana", sans-serif;
}

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


.inView{
	position: relative;
	opacity: 0;
	-webkit-transition:opacity 1.0s;
	transition:opacity 1.0s;
}
.inView.view{opacity: 1;}


.pcview{display: block;}
.spview{display: none;}


.wrapper{
	width: 100%;
	height: 100%;
}



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

.header{
	width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 10;
}
.mainImage{
	position:absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: url("../images/main_pc.webp") center center;
	background-size: cover;
}


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

.header .topBox{
	position: relative;
	width: 100%;
	height: 100vh;
	z-index: 20;
}
.header .topBox .logo{
	position: absolute;
	z-index: 50;
	width: 5.2%;
	top: 6vh;
	left: 7.8%;
	opacity: 0;
	-webkit-transition: opacity 1.0s;
	transition: opacity 1.0s;
}
.start .header .topBox .logo{opacity: 1;}

.header .topBox h1{
	position: absolute;
	z-index: 50;
	width:28%;
	top: 50%;
	left: 6.9%;
	opacity: 0;
	-webkit-transition: opacity 1.0s;
	transition: opacity 1.0s;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
.start .header .topBox h1{opacity: 1;}



.leadBox{
	width: 100%;
	display: flex;
	justify-content: center;
	padding-left: 15vw;
}
.leadBox .leadText{
	margin: 10vw auto 10vw;
	position: relative;
	z-index: 60;
	display: inline-block;
}
.leadBox .leadText .textLine{
	position: relative;
	white-space: nowrap;
	font-size: 1.0em;
	margin-bottom: 4em;
	letter-spacing: 0.25em;
}
.leadBox .leadText .textLine .lineBase{
	position: relative;
	z-index: 1;
	color: #4D4D4D;
	display: inline-block;
}
.leadBox .leadText .textLine .lineMask{
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 100%;
	color: #FFF;
	overflow: hidden;
	display: inline-block;
}



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

.fixedNav{
	position: fixed;
	z-index: 999;
	width: 7%;
	top: 0;
	bottom: 0;
	right: 0;
	pointer-events: none;
	opacity: 0;
	-webkit-transition: opacity 1.0s;
	transition: opacity 1.0s;
}
.start .fixedNav{opacity: 1;}

.fixedNav .anchor{
	position: absolute;
	top: 17.5%;
	bottom: 17.5%;
	left: 0;
	right: 0;
}
.fixedNav .anchor div{position: absolute;left: 0;pointer-events: auto;}
.fixedNav .anchor div.navWoman{top: 0;}
.fixedNav .anchor div.navMan{top:33.3%;}
.fixedNav .anchor div.navKids{bottom: 33.3%;}
.fixedNav .anchor div.navTop{bottom: 0;}

.fixedNav .navTop span{
	width: 100%;
	display: block;
	height: 1em;
	position: relative;
}
.fixedNav .navTop span::before,
.fixedNav .navTop span::after{
	content: '';
	position: absolute;
	width: 50%;
	height: 1px;
	top: 0;
	background: #4D4D4D;
}
.fixedNav .navTop span::before{
	left: 50%;
	transform-origin: top left;
	-webkit-transform: rotate(33deg);
	transform: rotate(33deg);
}
.fixedNav .navTop span::after{
	right: 50%;
	transform-origin: top right;
	-webkit-transform: rotate(-33deg);
	transform: rotate(-33deg);
}

.fixedNav .anchor a{
	font-size: 0.9em;
	color: #4D4D4D;
	font-family: "Montserrat", serif;
	font-weight: 500;
	letter-spacing: 0.03em;
	position: relative;
}

@media(min-width:769px) {
.fixedNav .anchor a{-webkit-transition: color 0.4s;transition: color 0.4s;}
.fixedNav .anchor a:hover{color: #FFF;}

.fixedNav .anchor a.line::after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: #FFF;
	opacity: 0;
	-webkit-transition: opacity 0.4s;
	transition: opacity 0.4s;
}
.fixedNav .anchor a.line:hover::after{opacity: 1;}

.fixedNav .navTop span::before,
.fixedNav .navTop span::after{-webkit-transition: background 0.4s;transition: background 0.4s;}
.fixedNav .navTop a:hover span::before,
.fixedNav .navTop a:hover span::after{background:#FFF;}
}


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

.main{
	width: 100%;
	overflow: hidden;
}

.wave{
	position: absolute;
	z-index: 1;
	opacity: 0.25;
	left: 0;
	right: 0;
}
.topItem .wave{top: 38vw;}
.category.woman .wave{bottom: 95vw;}
.category.man .wave{top: 100vw;}
.footer .wave{top: 20vw;}

.wave.w01 figure{
	display: block;
	animation: waveanime01 6s ease-in-out infinite alternate;
	transform-origin: center;
	transition: 3s ease-in-out;
}
@keyframes waveanime01 {
	0% {
	transform:translate(0, 0) rotate(-19deg)  scale(1.75);
	}
	50% {
	transform:translate(0, -4vw) rotate(-22deg) scale(1.75);
	}
	100% {
	transform:translate(0, 0) rotate(-25deg) scale(1.75);
	}
}

.wave.w02 figure{
	display: block;
	animation: waveanime02 6s ease-in-out infinite alternate;
	transform-origin: center;
	transition: 3s ease-in-out;
}
@keyframes waveanime02 {
	0% {
	transform:translate(0, 0) rotate(27deg)  scale(1.75);
	}
	50% {
	transform:translate(0, -4vw) rotate(30deg) scale(1.75);
	}
	100% {
	transform:translate(0, 0) rotate(33deg) scale(1.75);
	}
}


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

.topItem{
	position: relative;
	width: 100%;
	padding: 34vw 0 28vw;
	z-index: 10;
}
.swiperItem{
	width:100%;
	margin: 0 auto;
	position: relative;
	z-index: 5;
}
.swiperItem .swiper-wrapper .swiper-slide{
	padding: 0 5vw;
}

@media(min-width:769px) {
.swiperItem{width: 84.0%;}
.swiperItem .swiper-wrapper{width: 100%;display: flex;justify-content: space-between;}
.swiperItem .swiper-wrapper .swiper-slide{display: block;width: 28%;padding: 0;}

}

@media(min-width:1021px) {
.swiperItem .swiper-wrapper .swiper-slide{display: block;width: 26.3%;}
}

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


.category{width: 100%;position: relative;}
.category.woman{z-index: 10;}
.category.man{margin-top: 18.5vw; z-index: 10;}
.category.kids{margin-top: 11vw; z-index: 10;}

.category .categoryTitle{
	margin: 0 auto;
	font-family: "mr-eaves-xl-modern", sans-serif;
	font-weight: 300;
	font-size:2.4em;
	letter-spacing: 0.04em;
	padding: 0.3em 0 0.15em;
	position: relative;
	z-index: 50;
}

.category.woman .categoryTitle{width: 71%;text-align: right;}
.category.man .categoryTitle,
.category.kids .categoryTitle{width: 65%;}


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

.swiperImage{
	width: 100%;
	position: relative;
	z-index: 50;
	opacity: 0;
	padding-bottom: 30px;/*dot分を足す*/
	-webkit-transition: opacity 1.0s;
	transition: opacity 1.0s;
	/*background: rgba(0,0,0,0.1);*/
}
.swiperImage.view{opacity: 1;}

.swiperImage .swiper-pagination {
	bottom: -30px !important;
	/*background: rgba(0,0,0,0.1);*/
}
.swiperImage .swiper-pagination-bullet {
	background-color:#FFF  !important;
	opacity: 1 !important;
	width: 10px !important;
	height: 10px !important;
	margin: 0 5px !important;
	cursor: pointer;
}
.swiperImage .swiper-pagination-bullet-active {
	opacity: 1 !important;
	background-color:#4D4D4D  !important;
}

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

.itemSet{
	width: 100%;
	display: block;
	position: relative;
	z-index: 50;
	margin-top: 14.5vw;
}

.itemSet .itemBox{}

.itemSet .itemBox.box01{width: 44.3%;margin-left: 21.3%;}
.itemSet .itemBox.box02{width: 34.4%;margin-left: 44%;}
.itemSet .itemBox.box03{width: 33.2%;margin-left: 33.4%;}
.itemSet .itemBox.box04{width: 44.3%;margin-left: 7.8%;}
.itemSet .itemBox.box05{width: 31.0%;margin-left: 34.5%;}
.itemSet .itemBox.box06{width: 34.4%;margin-left: 21.3%;}
.itemSet .itemBox.box07{width: 44.2%;margin-left: 34.5%;}
.itemSet .itemBox.box08{width: 31.2%;margin-left: 18.7%;}
.itemSet .itemBox.box09{width: 44.2%;margin-left: 34.5%;}
.itemSet .itemBox.box10{width: 34.5%;margin-left: 21.3%;}
.itemSet .itemBox.box11{width: 44.4%;margin-left: 34.5%;}
.itemSet .itemBox.box12{width: 34.6%;margin-left: 50.0%;}
.itemSet .itemBox.box13{width: 44.2%;margin-left: 21.3%;}
.itemSet .itemBox.box14{width: 44.2%;margin-left: 27.9%;}

.itemSet .itemBox figure{width: 100%;}

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


.spec{
	width: 100%;
	font-family: "mr-eaves-xl-modern", sans-serif;
	font-weight: 200;
	letter-spacing: 0.03em;
}

.spec .specName{
	width: 100%;
	margin-top: 1em;
}
.spec .specName dl{
	width: 100%;
	position: relative;
	margin-top: 0.7em;
	display: flex;
	justify-content: space-between;
}
.spec .specName dl dt{width: calc(100% - 5.1em);padding-right: 0.2em;line-height: 1.1;}
.spec .specName dl dt p{font-size: 0.94em;}
.spec .specName dl dt p em{padding-right: 0.6em;}
.spec .specName dl dt p span{font-size: 0.94em;}
.spec .specName dl dd{width: 5.1em;white-space:nowrap;}

.spec .specName dl dd a{
	color: #4D4D4D;
	display: inline-block;
	position: relative;
	padding: 0 0.1em 2px 0.1em;
	font-family: "mr-eaves-xl-modern", sans-serif;
	font-weight: 300;
	font-size: 0.98em;
}
.spec .specName dl dd a::after{
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: #707070;

}
@media(min-width:769px) {
.spec .specName dl dd a{-webkit-transition: color 0.4s; transition: color 0.4s;}
.spec .specName dl dd a:hover{color:#FFF;}
}

/*
.spec .specOther{
	width: 100%;
	margin-top: 0.7em;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	font-size: 0.93em;
}

.spec .specOther .link{font-size: 1.12em;font-family: "MrEavesXLModOT-Book";}
.spec .specOther .link a{
	border: 1px solid #707070;
	display: inline-block;
	padding: 0.3em 0.5em 0.3em;
}
@media(min-width:769px) {
.spec a{-webkit-transition: color 0.4s, border-color 0.4s;transition: color 0.4s, border-color 0.4s;}
.spec .specOther .link a:hover{color:#FFF;border-color: #FFF;}
}
*/

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



.allItemLink{
	text-align: center;
	margin-top: 15vw;
	position: relative;
	z-index: 50;
}

.allItemLink a{
	color: #4D4D4D;
	font-size: 1.4em;
	font-family: "mr-eaves-xl-modern", sans-serif;
	font-weight: 300;
	font-style: normal;
	letter-spacing: 0.04em;
	position: relative;
	display: inline-block;
	padding-bottom: 3px;
}
.allItemLink a::after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: #4D4D4D;
}
.allItemLink a span{

}
@media(min-width:769px) {
.allItemLink a{-webkit-transition: color 0.4s; transition: color 0.4s;}
.allItemLink a:hover{color:#FFF;}
}





.footer{
	width: 100%;
	position: relative;
	padding: 18vw 0 27vw
}

.footer .element{
	width: 100%;
	position: relative;
	z-index: 50;
	transform: translate3d(0, 0, 0);
}

.footer .element h2{
	width: 10%;
	margin: 0 auto 14vw;
}
.footer .element .copyright{
	text-align: center;
	font-family: "DINPro-Regular";
	color: #2C2626;
	letter-spacing: 0.03em;
}




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


@media(min-width:1920px) {
body{font-size: 15px;}
}

@media(max-width:1650px) {
body{font-size: 13px;}
.swiperImage{padding-bottom: 27px;}
.swiperImage .swiper-pagination {bottom: -27px !important;}
.swiperImage .swiper-pagination-bullet {width: 9px !important;height: 9px !important;}
}

@media(max-width:1280px) {
body{font-size: 12px;}
.category .categoryTitle{font-size:2.2em;}
.swiperImage .swiper-pagination-bullet {width: 8px !important;height: 8px !important;}
}

@media(max-width:1020px) {
.header .topBox .logo{width: 6.0%;left: 7%;}
.header .topBox h1{width:31%;left: 6%;}
.category .categoryTitle{font-size:2.0em;}
.swiperImage{padding-bottom: 25px;}
.swiperImage .swiper-pagination {bottom: -25px !important;}
.swiperImage .swiper-pagination-bullet {width: 7px !important;height: 7px !important;margin: 0 4px !important;}

.footer .element .copyright{font-size: 0.95em;}
}



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

@media(max-width:768px) {

body{font-size: 2vw;}

.pcview{display: none;}
.spview{display: block;}



.mainImage{background-image: url("../images/main_sp.webp");}

.header .topBox{height: 100svh;}
.header .topBox .logo{width: 12%;top: 10svh;left: 5%;}
.header .topBox h1{width:45%;top: 55%;left: 5%;}

.leadBox{padding-left: 0;}
.leadBox .leadText{text-align: center;}
.leadBox .leadText .textLine{margin-bottom: 3em;letter-spacing: 0.15em;font-size: 0.85em;}

/*------*/

.fixedNav{
	right: 0;
	left: 0;
	margin: 0 auto;
	width: 90%;
}
.fixedNav .anchor{
	top: auto;
	bottom:2.5em;
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.fixedNav .anchor div{position: relative;}


.fixedNav .anchor div.navTop{
	position: absolute;
	left: auto;
	bottom: 3.5em;
	right: 0;
	padding-left: 1.5em;
	font-size: 0.85em;
	transform-origin: top right;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
.fixedNav .navTop span{
	position: absolute;
	width: 1.6em;
	top: 0.2em;
	left: -2.0em;
	height:1em;
	transform-origin: center center;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
.fixedNav .navTop span::before{
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.fixedNav .navTop span::after{
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

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

.topItem{padding: 40vw 0 15.3vw;}

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

.topItem .wave{top: 50vw;}
.category.woman .wave{bottom: 220vw;}
.category.man .wave{top: 110vw;}
.footer .wave{top: 20vw;}

@keyframes waveanime01 {
	0% {
	transform:translate(0, 0) rotate(-19deg)  scale(2.3);
	}
	50% {
	transform:translate(0, -4vw) rotate(-22deg) scale(2.3);
	}
	100% {
	transform:translate(0, 0) rotate(-25deg) scale(2.3);
	}
}
@keyframes waveanime02 {
	0% {
	transform:translate(0, 0) rotate(27deg)  scale(2.3);
	}
	50% {
	transform:translate(0, -4vw) rotate(30deg) scale(2.3);
	}
	100% {
	transform:translate(0, 0) rotate(33deg) scale(2.3);
	}
}


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

.category.man{margin-top: 17vw;}
.category.kids{margin-top: 17vw;}

.category.woman .categoryTitle{width: 90%;}
.category.man .categoryTitle,
.category.kids .categoryTitle{width: 80%;}

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

.itemSet{margin-top: 15.3vw;}

.itemSet .itemBox.box01{width: 55.1%;margin:0 auto;}
.itemSet .itemBox.box02{width: 79.5%;margin:0 auto;}
.itemSet .itemBox.box03{width: 53%;margin:0 auto;}
.itemSet .itemBox.box04{width: 100%;margin:0 auto;}
.itemSet .itemBox.box05{width: 53%;margin:0 auto;}
.itemSet .itemBox.box06{width: 79%;margin:0 auto;}
.itemSet .itemBox.box07{width: 100%;margin:0 auto;}
.itemSet .itemBox.box08{width: 53%;margin:0 auto;}
.itemSet .itemBox.box09{width: 100%;margin:0 auto;}
.itemSet .itemBox.box10{width: 79.5%;margin:0 auto;}
.itemSet .itemBox.box11{width: 100%;margin:0 auto;}
.itemSet .itemBox.box12{width: 79.5%;margin:0 auto;}
.itemSet .itemBox.box13{width: 100%;margin:0 auto;}
.itemSet .itemBox.box14{width: 69%;margin:0 auto;}

.itemSet .itemBox.box04 .spec,
.itemSet .itemBox.box07 .spec,
.itemSet .itemBox.box09 .spec,
.itemSet .itemBox.box11 .spec,
.itemSet .itemBox.box13 .spec{width: 79.5%;margin:0 auto;}





.allItemLink{margin-top: 25vw;}
.allItemLink a{font-size: 1.3em;}



.footer{height: auto;display: block;padding: 30vw 0 36vw;}
.footer .element h2{width: 17%;}
.footer .element .copyright{font-size: 0.9em;}

}








@media(max-width:620px) {

body{font-size: 3vw;}

.header .topBox h1{width:70%;left: 0;right: 0;margin: 0 auto;}
.leadBox .leadText{margin: 30vw auto 20vw;}

/*----*/

.fixedNav .anchor a{font-size: 1.12em;}
.fixedNav .anchor div.navTop{font-size: 0.8em;}
.fixedNav .navTop span{left: -1.8em;}

/*----*/

.category .categoryTitle{font-size:1.65em;padding: 0.6em 0 0.6em;}

/*----*/

.swiperImage{padding-bottom: 15px;}
.swiperImage .swiper-pagination {bottom: -15px !important;}
.swiperImage .swiper-pagination-bullet {width: 4px !important;height: 4px !important;margin: 0 3px !important;}

/*----*/

.spec .specName{font-size: 0.9em;}
.spec .specOther{font-size: 0.9em;}

/*----*/

.footer .element .copyright{font-size: 0.82em;}

}




























html.lenis, html.lenis body {height: auto;}
.lenis.lenis-smooth {scroll-behavior: auto !important;}
.lenis.lenis-smooth [data-lenis-prevent] {overscroll-behavior: contain;}
.lenis.lenis-stopped {overflow: hidden;}
.lenis.lenis-smooth iframe {pointer-events: none;}