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




@media(max-width:1200px) {
html{font-size: 15px;}

.visual.wide .styleNum{right: 11.5%;}
.visual.wide .catch{width: 20%;padding-right: 3%;}

.sideNavi{font-size: 0.93em;}

}




@media(max-width:980px) {

html{font-size: 1.5vw;}
.allBanner{font-size: 0.9em;}
.sns{font-size: 0.9em;}

}



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



@media(max-width:768px) {

.pclink{pointer-events: none;}
.sideNavi{display: none;}

html{font-size: 17px;}

#loader-bg{height: 100svh;}

.screenwide{display: none;}

br.res{display: block;}
.pcView{display: none;}
.spView{display: block;}

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

#header{display: block;height: 100svh;}
#header .text{
	width:100%;
	margin: 0 auto;
	display: block;
}
#header .text .detail{
	width: 100%;
	display: block;
}

#header .text .detail .logo{
	top:2vw;
	left: auto;
	right: 2vw;
	width:20%;
}

#header .text .detail h1{
	width: 22vw;
	padding-bottom: 0;
	padding-top: min(11vw , 7vh);
	margin-left: 12.5%;
}
#header .text .detail .title{
	position: relative;
	bottom: 0;
	font-size:2.5vw;
	margin-left: 12.5%;
	margin-top: 1.3em;
	-webkit-transform:none;
	transform:none;
}
#header .text .detail .title h3{font-size: 2em;}
#header .text .detail .title h3 em{font-size: 1em;}
#header .text .detail .title h3 br{display: none;}
#header .text .detail .title h2{padding-bottom: 0;margin-top: 0.8em;}

#header .image{
	margin-top: 5vw;
	width: 100%;
	height: calc(100% - 40vw);
}

#header .image .season{
	bottom: 12vw;
	right: 3.8vw;
	font-size: 0.9em;
	transform:rotate(90deg);
	transform-origin: top right;
}

.scrollbar{
	width: 3em;
	right:2.8vw;
	bottom: -3.6em;
	height:7em;
}
.scrollbar p{width: 0.85em;margin-left: 1.5em;}
.scrollbar .base{height:7em;}
.scrollbar .bar{height:7em;}

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

.panel-pin.lead{background-image: url("../../images/panel_bk01sp.webp");}
.panel-pin.pre01{background-image: url("../../images/panel_bk02sp.webp");}
.panel-pin.pre02{background-image: url("../../images/panel_bk03sp.webp");}

.lead .element{top: 10vw;left: 15vw;width: 70%;display: block;}
.lead .logo{display: none;}
.lead .copy{font-size: 1.15em;color: #FFF;line-height: 2;}

.menu .element{padding-top:0;}
.menu p{font-size: 1em;;}

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

.category{margin-top: 11vw;}
.category.ca02{margin-top: 22vw;}
.categoryTitle .titHeader{width: 88%;margin: 2em auto 0;}
.categoryTitle .titHeader .logo{width: 7.5em;}
.categoryTitle .titHeader .season{text-align: right;font-size: 1em;line-height: 1.2;}

.categoryTitle .titBody{width: 88%;margin: 2.5em  auto 0;align-items: flex-end;}
.categoryTitle .titBody .eng h3{font-size: 0.95em;}
.categoryTitle .titBody .eng hr{margin: 1em 0 2em;}
.categoryTitle .titBody.view .eng hr{width: 15em;}
.categoryTitle .titBody .jp h4{font-size: 1.3em;line-height: 1.4;}
.categoryTitle .titBody .jp hr{width: 5em;margin-top: 0.8em;}

.categoryImage{width: 100%;margin-top: 6vw;}
.categoryImage .image.left{width: 64%;padding-top: 58.5%;}
.categoryImage .image.right{width: 36%;}

.ca01 .categoryImage .image.left{background-image: url("../../images/ca01image01sp.webp");}
.ca01 .categoryImage .image.right{background-image: url("../../images/ca01image02sp.webp");}
.ca02 .categoryImage .image.left{background-image: url("../../images/ca02image01sp.webp");}
.ca02 .categoryImage .image.right{background-image: url("../../images/ca02image02sp.webp");}

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

.movieArea{
	margin-top: 8vw;
	position: relative;
}

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

.mainItem{width: 80%;margin-top: 20vw;display: block;}
.mainItem.second{margin-top: 0;}
.mainItem .itemInfo{width: 100%;}
.mainItem .infoBase{display: block;min-height:none;}
.mainItem .textBox .copy{width: 100%;}
.mainItem .elementBox{width: 100%;margin-top: 10vw;}
.mainItem .specBox{margin: 3em auto 0;}
.mainItem .addSpec{margin: 0 auto 0;}
.mainItem .mainSlide{width: 85%;margin: 0 auto;padding-bottom: 3em;}



.mainItem .mainSlide h3{
	position: relative;
	right:0;
	left: -3%;
	width: 100%;
	margin-bottom: 1em;
	font-size: 1em;
	transform:none;
}





.mainItem .slick-dots li.slick-active button:after{
	content: "";
	display: block;
	position: absolute;
	left: -6px;
	top: -1px;
	bottom: -1px;
	width: 1px;
	background: #1e0e07;
}
.mainItem .slick-dots{bottom:-3.6em;left: 0em; width:100%;}
.mainItem .slick-dots li{margin: 0 1.2em;width:3.5em;height: 1.1em;display: inline-block;}
.mainItem .slick-dots li:first-of-type{margin-left: 0;}
.mainItem .slick-dots li:last-of-type{margin-right: 0;}
.mainItem .slick-dots li.slick-active button:after{
	content: "";
	display: block;
	position: absolute;
	left: -1px;
	right: -1px;
	bottom: -7px;
	top: auto;
	width:auto;
	height: 2px;
}

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

.visual{width: 100%;margin-top: 16vw;}
.visual .topArea{display: block;}
.visual .styleNum{position: relative;margin-left: 9%;}
.visual.wide .styleNum{right: 0;transform:none;}

.visual .catch{width: 100%;padding-bottom: 0;margin-top: 8vw;font-size: 2.0em;}
.visual.wide .catch{width: 100%;margin-top:8vw;}
.fa03 .visual.wide .catch{margin-top: 8vw;}

.visual .catch.pcView{display: none;}


.visual figure{width: 100%;margin-top:12vw; }
.visual.wide figure{width: 100%;}
.visual figure.narrow{margin-top:9vw; }


.visual .copy{
	position: relative;
	font-size: 1.0em;
	width: 80%;
	margin: 2em auto 0;
	padding-bottom: 0;
}
.fa02 .visual .copy{right: 0;top:0;width: 80%;color: #201510;}
.fa03 .visual .copy{right: 0;top: 0;width: 80%;color: #201510;}
.fa04 .visual.wide .copy{left: 0;top: 0;width: 80%;color: #201510;}

.visual .specBox.line{width: 83%;margin: 2em auto 0;padding: 0 1em;}
.visual.wide .specBox.line{width: 83%;max-width: none;margin: 2em auto 0;}
.fa04 .visual.wide .specBox.line{margin-left: auto;margin-right: auto;}
.fa05 .visual .specBox.line{margin-left: auto;margin-right: auto;}

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

.subTitle{width: 83%;margin-top: 20vw;}
.subTitle .subTitleInnter{width: 100%;}
.subTitle .copy{width: 100%;margin-top: 2.5em;font-size: 1em;}

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

.styling{width: 100%;margin-top: 12vw;display: block;}
.styling.second{margin-top: 15vw;}
.styling .styleBox{width: 100%;}
.styling .styleBox.right{margin-top: 5.3vw;}
.styling .styleBox.right.space{margin-top: 15vw;}

.styling .styleBox h3{width: 83%;margin: 0 auto 5vw;position: relative;top: 0;padding-left: 2em;}
.styling .specBox{width: 83%;margin: 8vw auto 0;padding: 0 1em;}

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

.option{width: 100%;margin-top: 10vw;display: block;}
.option .photoBox{width: 100%;}
.option .elementBox{width: 83%;margin: 9vw auto 0;}
.option .elementBox h3{padding-bottom: 1.2em;font-size: 1.5em;}
.option .mainSlide{width: 82%;padding-bottom: 3em;}
.option .slick-dots{bottom:-3.6em;}
.option .slick-dots li{margin: 0 1.2em;width:3.5em;height: 1.1em;}
.option .slick-dots li.slick-active button:after{bottom: -7px;height: 2px;}
.option .specBox{margin-top: 8vw;padding: 0 1em;}

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

.allBanner{font-size: 1em;margin-top: 20vw;}
.allBanner figure{padding-top: 110%;}
.allBanner .logo{width: 27vw;top: 8vw;left: 9vw;}
.allBanner .element{left: 9%;top: 54%;text-align: left;}
.allBanner .element .season{font-size: 1em;padding-bottom: 0.8em;}
.allBanner .element h3{padding-bottom: 1.3em;}
.allBanner .element .detail{margin-top: 3.5em;}
.allBanner .element .detail a{font-size: 1.5em;}

.ca01 .allBanner figure{background-image: url("../../images/all_fa01sp.webp");}
.ca02 .allBanner figure{background-image: url("../../images/all_fa02sp.webp");}
.otherContents .allBanner figure{background-image: url("../../images/all_brandsp.webp");}

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

.otherContents{text-align: center;}
.otherTitle{width: 88%;margin-top: 20vw;text-align: left;}
.otherBanner{width: 100%;margin-top: 10vw;line-height: 0;}
.otherBanner .logo{top: 3vw;right:3vw;width: 19%;}
.otherBanner .element{left: 7%;right: 7%;display: block;}
.otherBanner .element h2{position: absolute;left: 0;bottom: 7vw;width: 30%;}
.otherBanner .element h2 img{width: 100%;}
.otherBanner .element h4{position: absolute;right: 0;bottom: 7vw;width: 33.8%;text-align: right;}
.otherBanner .element h4 img{width: 100%;}
.otherBanner .center{position: absolute;width: 100%;top: 0;left: 0;}
.otherBanner .element h3{width:6%; margin: 8vw auto 0;}

.otherContents .link{margin-top: 5vw;}
.otherContents .link span{display: inline-block;font-size: 1.4em;margin: 0 auto;padding: 0.5em 1em 0.6em;}
.otherContents .link a{display: inline-block;font-size: 1.4em;margin: 0 auto;padding: 0.5em 1em 0.6em;}


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

.sns{width: 88%;margin: 20vw auto;}
.sns .snsList{width: 100%;}
.sns .snsList .list a p{font-size: 1.3em;}
.sns .snsList .list a .icon{width: 3.5em;}

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

.officialsite{width: 88%;padding: 2em 0;}
.officialsite .logo{width: 9em;}
.officialsite h3{font-size: 1.6em;}
.officialsite .more a{font-size: 1.4em;}

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

.footer{
	height: 100vh;
	margin-top: 20vw;
	background-image: url("../../images/footer_sp.webp");
}
.footer .block{left: 10%;bottom: 10%;}
.footer .block .logo{width: 15em;padding-bottom: 1.5em;}
.footer .season{
	position:relative;
	right:0;
	bottom: 0;
	line-height: 1.6;
	font-size: 1em;
}
.footer .block .copyright{margin-top: 0;line-height: 1.6;}



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


.menu-trigger{display: block;}
.spNavi{display: block;}

body.fixed{
    position:fixed;
    width:100%;
    height:100%;
    overflow:hidden;    
}
#trigger{display: block;}
.menu-trigger{
	position:fixed;
	top:3vw;
	left:2vw;
	width:36px;
	height:35px;
	z-index:550;
    pointer-events: auto;
}
.menu-trigger span{
	position:absolute;
	left:0;
	width:100%;
	height:2px;
	background:#5c663f;
	-webkit-transition: all 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6), background 0.2s;
	transition: all 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6), background 0.2s;
}
.menu-trigger.color span{background:#5c663f;}

.menu-trigger span:nth-of-type(1){top:0;}
.menu-trigger span:nth-of-type(2){top:17px;}
.menu-trigger span:nth-of-type(3){bottom:0;}
.menu-trigger.open span:nth-of-type(1) {
	left: calc(-100% - 23px);
}
.menu-trigger.open span:nth-of-type(2) {
	left: calc(-100% - 23px);
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}
.menu-trigger.open span:nth-of-type(3) {
	left: calc(-100% - 23px);
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

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


.spNavi{
    position:fixed;
    top:0;
    right:0;
    left: 0;
    width:100%;
    height:100%;
	z-index:999;
	pointer-events: none;
    overflow:hidden;
	display: block;
	opacity: 0;
	visibility: hidden;
	color: #706e70;
	background: #FFF;
	-webkit-transition:all 0.8s;
	transition:all 0.8s;
}
.spNavi.open{pointer-events: auto;opacity: 1;visibility:visible;}
.spNavi .spCloseBT{
	position: fixed;
	top: 2vw;
	left:1.5vw;
	z-index: 9999;
	width: 8vw;
	height: 8vw;
	cursor: pointer;
	display: block;
}
.spNavi .spCloseBT span{
	position:absolute;
	left:0;
	width:100%;
	top: 50%;
	height:3px;
	opacity: 0;
	background-color:#60605C;
}
.spNavi .spCloseBT span:nth-of-type(1){
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
	-webkit-transition:all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s;
	transition:all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}
.spNavi .spCloseBT span:nth-of-type(2){
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
	-webkit-transition:all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s;
	transition:all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}
.spNavi.open .spCloseBT span:nth-of-type(1){
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	opacity: 1;
	-webkit-transition:all 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.6s;
	transition:all 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.6s;
}
.spNavi.open .spCloseBT span:nth-of-type(2){
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	opacity: 1;
	-webkit-transition:all 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.6s;
	transition:all 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.6s;
}

.spNavi .pagetopBT{
	position: fixed;
	top: 2vw;
	right: 4vw;
	z-index: 9999;
	width: 6vw;
}

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

.spNavi .naviInner{
	font-size: 0.9em;
    position: absolute;
    top: 8%;
    left:10%;
    right:0;
	bottom: 0;
    margin: 0 auto;
	z-index: 20;
	opacity: 0;
	-webkit-transition:opacity 0.5s;
	transition:opacity 0.5s;
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap:0;
	align-items: center;
	line-height: 1;
}
.spNavi.open .naviInner{opacity: 1;}
.spNavi .naviInner a{color: #706e70;}

.spNavi .naviInner .innerTop{width: 100%;display: flex;}
.spNavi .naviInner .innerBottom{width: 100%;display: flex;}
.spNavi .naviInner .centerLine{
	width: 92%;
	margin: 3vh auto;
	height: 2px;
	background: #706e70;
}

.spNavi .category{width: 50%;margin: 0;}
.spNavi .innerBottom .category{padding: 1.1em 0;}
.spNavi .category .num{
	width: 2em;
	height: 2em;
	border: 1px solid #706e70;
	font-size: 1.1em;
	line-height: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}
.spNavi .category h2{
	font-size: 2.3em;
	letter-spacing: 0.03em;
	line-height: 1.1;
	margin-top: 0.4em;
}
.spNavi .innerTop .category h2{color: #693138;}
.spNavi .innerBottom .category h2{color: #5c663f;}
.spNavi .category hr{
	width: 9em;
	height: 1px;
	background: #706e70;
	margin: 1em 0;
}
.spNavi .category h3{
	font-size: 0.93em;
	letter-spacing: 0.02em;
	line-height: 1.4;
	font-weight: 600;
}
.spNavi .innerTop .category h3{color: #693138;}
.spNavi .innerBottom .category h3{color: #5c663f;}

.spNavi .category .list{}

.spNavi .category .list .fa{
	font-size: 1.7em;
	font-weight: 600;
	letter-spacing: 0.015em;
	margin: 0.5em 0;
}
.spNavi .category .list .fa span{
	width: 0.75em;
	height: 0.75em;
	background: #706e70;
	margin-right: 0.5em;
	display: inline-block;
}
.spNavi .category .list .fa em{font-size: 1.1em;margin-left: 0.2em;}

.spNavi .naviInner figure{
	width: 50%;
	background-position: center center;
	background-size: cover;
}
.spNavi .naviInner .innerTop figure{background-image: url("../../images/spnavi01.webp");}
.spNavi .naviInner .innerBottom figure{background-image: url("../../images/spnavi02.webp");}


}


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







@media(max-width:680px) {

html{font-size: 2.4vw;}

#header .text .detail .logo{top:2.3vw;right: 2.3vw;}
#header .text .detail h1{width: 24vw;padding-top: min(14vw , 8vh);}
#header .text .detail .title{font-size:3.15vw;}
#header .text .detail .title h2{font-size: 0.85em;}
#header .image{margin-top: 6.5vw;height: calc(100% - 47vw);}

#header .image .season{bottom: 13vw;right: 3.5vw;font-size: 1.2em;}

.scrollbar{right:2.4vw;bottom: -3.2em;}
.scrollbar p{width: 1em;margin-left: 1.5em;}


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

.lead .element{left: 12vw;width: 80%;}

.menu .num{font-size: 1.7em;}
.menu p{font-size: 1.1em;margin-top: 1.5em;}
.menu h3{font-size: 1.55em;}
.menu hr{width: 9em;margin: 1.0em  auto 1.5em;}
.menu .more{font-size: 1.4em;margin-top: 1.5em;}

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

.category.ca02{margin-top: 27vw;}

.categoryTitle .titHeader{width: 90%;margin-left: 7%;}
.categoryTitle .titHeader .logo{width: 6.5em;}
.categoryTitle .titBody{width: 90%;margin-left: 7%;}
.categoryTitle .titBody .eng h2{font-size: 2.5em;}
.categoryTitle .titBody.view .eng hr{width: 13em;}
.categoryTitle .titBody .jp hr{width: 4em;}

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

.mainItem{width: 82%;}
.mainItem .textBox .itemName{font-size: 2em;margin-top: 0.6em;}
.mainItem .textBox .copy{font-size: 1.12em;}
.mainItem .mainSlide{width: 88%;padding-bottom: 5.5em;}
.slick-prev{left:-7vw;}
.slick-next{right:-7vw;}
.mainItem .specBox{width: 98%;margin: 0 auto;}
.mainItem .addSpec{width: 98%;margin: 0 auto;}

.mainItem .mainSlide h3{margin-bottom: 0.9em;font-size: 1.1em;}

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

.visual{margin-top: 17vw;}

.visual .styleNum{font-size: 1.2em;}
.visual .catch{font-size: 2.2em;}

.visual .copy{font-size: 1.12em;width: 82%;}
.fa02 .visual .copy{width: 82%;}
.fa03 .visual .copy{width: 82%;}
.fa04 .visual.wide .copy{width: 82%;}

.visual .specBox.line{width: 87%;margin-top: 2.3em;}
.visual.wide .specBox.line{width: 87%;margin-top: 2.3em;}

.specBox.line .itemList{margin: 1.3em 0;}

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

.subTitle{width: 82%;}
.subTitle h2{font-size: 1.9em;padding-left:1.4em;padding-bottom: 0.4em;}
.subTitle h2::before{width: 0.5em;height:2.1em;}
.subTitle .copy{font-size: 1.12em;}

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

.styling{margin-top: 13vw;}
.styling.second{margin-top: 19vw;}
.styling .styleBox h3{width: 82%;font-size: 1.16em;padding-left: 1.8em;}
.styling .styleBox h3::before{width: 1.0em;height: 1.0em;}
.styling .specBox{width: 87%;}
.styling .styleBox.right.space{margin-top: 19vw;}


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

.option{margin-top: 13vw;}
.option .elementBox{width: 87%;}
.option .mainSlide{width: 83%;padding-bottom: 3.8em;}

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

.itemList{font-size: 1.13em;}
.itemList dl{margin-top: 0.8em;}
.itemList .name{width: calc( 100% - 8em);}
.itemList .detail{width: 6em;}
.itemList .detail a{font-size: 1.12em;}
.itemList .trigger.kingTrigger{margin-top: 0.8em;}
.itemList .trigger .more{width:calc( 100% - 8em);}
.itemList .trigger .more::before{width: 7em;}
.itemList .trigger .plus{height: 1.9em;width: 6em;}
.itemList .trigger .plus:after,
.itemList .trigger .plus:before{top: 0.8em;}

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

.allBanner figure{padding-top: 128%;}

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

.otherTitle{margin-top: 22vw;}
.otherTitle h2{font-size: 1.9em;padding-left:1.3em;}
.otherBanner{margin-top: 12vw;}
.otherBanner .element h2{bottom: 8vw;width: 35%;}
.otherBanner .element h4{bottom: 8vw;width: 42%;}
.otherBanner .element h3{width:6.3%;}

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

.sns .snsList .list.instagram{width: 29%;}
.sns .snsList .list.line{width: 42%;}
.sns .snsList .list.facebook{width: 29%;}

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

.officialsite h3{font-size: 1.5em;margin: 1em 0;}
.officialsite .more a{padding: 0.5em 1.2em 0.6em;}

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

.menu-trigger{top:4vw;left:2vw;width:20px;height:26px;}
.menu-trigger span:nth-of-type(2){top:12px;}

.spNavi .spCloseBT{width: 12vw;height: 12vw;}
.spNavi .spCloseBT span{height:2px;}

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

.spNavi .pagetopBT{right: 5vw;width: 10vw;}
.spNavi .naviInner{font-size: 1em;top: 17vw;left:0;}

.spNavi .naviInner .centerLine{width: 90%;margin: 2vh auto;}

.spNavi .category{padding-left: 6vw;}
.spNavi .innerBottom .category{padding: 1.4em 0 1.4em 6vw;}

.spNavi .category h2{font-size: 2.5em;}
.spNavi .category h3{font-size: 1.1em;}
.spNavi .category .list .fa{font-size: 1.8em;margin: 0.8em 0;}

}




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

#header .image{margin-top: 6.5vw;height: calc(100% - 50.5vw);}

}