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





@media(min-width:1601px) {
.allBanner figure{padding-top: 777px;}
}





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

.menu::after{left: 25%;right: 25%;}

.categoryTitle .titBody{left: 52%;font-size: 0.95em;}
.categoryTitle .titBody h2{font-size: 4.5em;}

.categoryItem{width: 61%;}
.categoryItem .specBox{width: 70%;}

.allBanner{font-size: 0.9em;}

.sideNavi{font-size: 0.93em;}

}




@media(max-width:980px) {

html{font-size: 1.5vw;}

#header{font-size: 0.95em;}

.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;}
br.no{display: none;}
.pcView{display: none;}
.spView{display: block;}

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

#header{display: block;height: 100svh;}
#header figure{background-image: url("../../images/main_sp.webp");}

#header .element .logo{position: relative;width: 9em;top:0;margin-top: 2vh;}
#header .element h1{width: 2em;top: calc(50% + 4.5em);}
#header .season{position:relative;left:0;right:0;display: block;margin-top: 3vh;}
#header .season h2{width: 13em;margin: 0 auto;}
#header .season h3{width: 13em;margin: 1em auto 0;}


.scrollbar{width: 2em;right:2.8vw;bottom: -3.6em;height:7em;}
.scrollbar p{width: 0.85em;margin-left: 0.8em;}
.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 .logo{width: 11em;}
.lead .element h2{padding: 6vh 0 2vh;font-size: 2.5em;}
.lead .element h3{width: 18em;}
.lead .element .copy{font-size: 1.1em;margin-top: 6vh;}

.menu::after{display: none;}
.menu .element{width: 100%;padding: 3.5em 0;line-height: 1;font-size: 0.9em;background: rgba(59,69,95,0.3);}
.menu p{margin-top: 1.8em;}
.menu h2{margin: 0.2em 0;}



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

.category{margin-top: 20vw;}
.category.ca02{margin-top: 32vw;}

.categoryTitle{padding: 0;height: 100vh;}
.ca01 .categoryTitle{background-image: url("../../images/category01sp.webp");}
.ca02 .categoryTitle{background-image: url("../../images/category02sp.webp");}

.categoryTitle .titBody{left: 0;bottom: 40%;font-size: 0.9em;padding-bottom: 4vh;}
.ca02 .categoryTitle .titBody{top: 40%;bottom: 0;}


.categoryTitle::after{bottom: 40%;left: 100%;}
.ca02 .categoryTitle::after{top: 40%;bottom: 0;}
.categoryTitle.view::after{left: 0%;}




.categoryTitle .titBody p{font-size: 1.25em;margin: 1.8em 0 0;}
.categoryTitle .titBody h2{margin: 0.2em 0;}
.categoryTitle .titBody h3{margin-top: 0;}

.categoryTitle .titBody .logo{display: none;}

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

.movieArea{position: relative;}

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

.categoryItem{width: 100%;margin-top: 20vw;}
.categoryItem h2{right: 6.5%;width: 5em;}
.ca02 .categoryItem h2{left: 6.5%;right:  auto;}

.categoryItem .element{padding-top: 1px;}
.categoryItem .element figure{margin-top: 6em;}
.categoryItem .element .copy{
	width: 80%;
	margin-top: 3em;
	line-height: 2.0;
	font-size: 1em;
	text-align: justify;
	text-justify: inter-ideograph;
}
.categoryItem .element .copy br{display: none;}
.categoryItem .specBox{width: 87%;}


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

.itemList{width: 94%;margin:1.5em auto;}

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


.mainItem{width: 87%;margin-top: 15vw;padding-top: 6vw;}
.mainItem .textBox{width: 100%;}
.mainItem .textBox .itemName{margin: 1.3em auto 0;width: 94%;}
.mainItem .textBox h3{width: 94%;}
.mainItem .textBox hr{margin: 2.5em 0;}
.mainItem .textBox .copy{width: 96%;}
.mainItem .mainSlide{width: 75%;max-width: none;padding-bottom: 3em;}
.mainItem .specBox{width: 90%;max-width: none;margin-top: 3em;}



.mainItem .named{margin-top: 16vw;}
.mainItem .named.m01{margin-top: 10vw;}
.mainItem .named.lr{width: 100%;margin: 10vw auto 0;display: block;}
.mainItem .named .numName{display: block;gap:0;width: 75%;margin: 0 auto;}
.mainItem .named .numName .num{font-size: 1.4em;}
.mainItem .named .numName .name,
.mainItem .named.lr .numName .name{margin: 0.8em 0 1.3em;}
.mainItem .named.lr .element{width: 100%;margin: 0 auto;}
.mainItem .named .mainSlide{width: 75%;margin: 0 auto;}
.mainItem .named .specBox{width: 100%;}
.mainItem .mainClumn{width: 100%;margin: 0 auto;display: block;}
.mainItem .mainClumn .named{width: 100%;}
.mainItem .mainClumn .named .mainSlide{width: 75%;margin-top: 0em;}


/*------*/

.slick-dots{bottom:-3.6em;}
.slick-dots li{margin: 0 1em;width:3.4em;height: 1.0em;}
.slick-dots li.slick-active button:after{bottom: -7px;height: 2px;}


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

.visual{width: 100%;margin-top: 26vw;position: relative;}
.visual.double .imageBox{display: block;}
.visual.double .imageBox .main{width: 100%;}
.visual.double .imageBox .sub{width: 72%;margin: 8vw 0 0 6.2vw;}
.visual.double .specBox{position: relative;width: 87.5%;margin: 3em auto 0;}
.visual.single .imageBox{width: 100%;}
.visual.single .imageBox .sub{width: 91%;margin: 9vw 0 0 9vw;}
.visual.single .specBox{width: 87.5%;margin: 3em auto 0;}

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

.subTitle{width: 82%;margin-top: 26vw;}
.subTitle .subTitleInnter{width: 100%;}
.subTitle h2{margin:0;width: 98%;}
.subTitle .copy{width: 98%;}

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

.styling{width: 100%;margin-top: 12vw;display: block;}
.styling.second{margin-top: 20vw;}
.styling .styleBox{width: 100%;margin-top: 2em;}
.styling .styleBox.right{margin-top: 10vw;}
.styling .styleBox h3,
.styling .styleBox h3.space{padding-bottom: 0.7em;}
.styling .specBox{width: 86%;margin: 3em auto 0;}

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


.option{width: 100%;margin-top: 12vw;display: block;}
.option.second{margin-top: 14vw;}
.option .num{width: 82%;margin: 0 auto;font-size: 1.4em;}
.option .photoBox{width: 100%;margin-top: 2em;}

.option .elementBox{width: 87%;padding-right: 0;margin: 12vw auto 0;}
.option .elementBox h3{font-size: 1.4em;padding-bottom: 1.8em;}
.option .mainSlide{width: 75%;max-width: none;padding-bottom: 3em;}

.option .specBox{margin-top: 3em;}


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

.allBanner{font-size: 0.9em;margin-top: 21vw;}
.allBanner figure{padding-top: 110%;}
.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");}

.allBanner .element{-webkit-transform:translateY(-50%);transform:translateY(-50%);}
.allBanner .element hr{width: 30em;margin: 2em auto 3em;}

.otherContents .allBanner .element h3{font-size: 2.4em;margin-top: 0.3em;}

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


.otherBanner{width: 100%;margin: 5em auto 0;}
.otherBanner .element{right:10%;left: 10%;width: auto;justify-content:flex-start;}
.otherBanner .element .logo{width: 32%;margin: 5vw auto 0;}
.otherBanner .element h2{width: 38%;margin: 18% 0 9%;}
.otherBanner .element h3{width: 41%;}
.otherBanner .element .season{display:none;}

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

.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: 7%;bottom: 8vw;}
.footer .block .logo{display: none;}
.footer .season{
	position:relative;
	right:0;
	bottom: 0;
	line-height: 1.6;
	font-size: 1em;
	margin-bottom: 1em;
}
.footer .block .copyright{margin-top: 0;line-height: 1.5;}

.footer .logo.spView{
	position: absolute;
	top: 7vw;
	left: 0;
	right: 0;
	width: 12em;
	margin: 0 auto;
	
}

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


.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:#e37104;
}
.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: 14vw;
    left:0;
    right:0;
	bottom: 0;
    margin: 0 auto;
	z-index: 20;
	opacity: 0;
	-webkit-transition:opacity 0.5s;
	transition:opacity 0.5s;
	line-height: 1;
	font-family: "MidCenturySansSmBold";
	font-weight: normal;
}
.spNavi.open .naviInner{opacity: 1;}
.spNavi .naviInner a{color: #FFF;}

.spNavi .naviInner .innerTop{
	position: absolute;
	top: 0;
	bottom: calc(50% + 3vh);
	left: 0;
	width: 100%;
	background: url("../../images/spnavi01.webp") center center;
	background-size: cover;
}
.spNavi .naviInner .innerBottom{
	position: absolute;
	top: calc(50% + 3vh);
	bottom: 0;
	left: 0;
	width: 100%;
	background: url("../../images/spnavi02.webp") center center;
	background-size: cover;
}
.spNavi .naviInner .centerLine{
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: -1px auto 0;
	width: 92%;
	height: 2px;
	background: #e37104;
}

.spNavi .category{
	width: 80%;
	height: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: flex-start; 
	flex-direction: column;
}
.spNavi .category .num{
	width: 1.8em;
	height: 1.8em;
	font-size: 1.5em;
	line-height: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #e37104;
	color: #FFF;
}
.spNavi .category h2{
	font-size: 2.5em;
	letter-spacing: 0.03em;
	line-height: 1.1;
	margin-top: 0.4em;
	color: #FFF;
}
.spNavi .innerBottom .category .list{margin-top: 3vh;}

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


.spNavi  h3{
	position: absolute;
	top: 4vh;
	right: 4%;
	z-index: 50;
	width: 3.5em;
}



}


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







@media(max-width:680px) {

html{font-size: 2.4vw;}

#header .element .logo{width: 10em;margin-top: 3vh;}
#header .element h1{width: 2.5em;top: calc(50% + 5.5em);}
#header .season{margin-top: 2.5vh;}
#header .season h2{width: 14em;}
#header .season h3{width: 14em;}

.scrollbar{right:2.8vw;bottom: -3em;}
.scrollbar p{width: 1em;}

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

.lead .element{padding-bottom: 8vh;}
.lead .element h2{padding: 5vh 0 3vh;font-size: 2.3em;}
.lead .element h3{width: 17em;}
.lead .element .copy{font-size: 1.25em;margin-top: 6vh;}

.menu .element{padding: 3.8em 0;}
.menu .num{font-size: 2.1em;width: 1.8em;height: 1.8em;}
.menu p{font-size: 1.33em;}
.menu h3{font-size: 1.65em;}
.menu .more{margin-top: 1.5em;}
.menu .more a{padding: 0.45em 1.4em 0.55em;}

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

.category{margin-top: 26vw;}
.category.ca02{margin-top: 32vw;}

.categoryTitle .titBody{bottom: 50%;font-size: 1em;padding-bottom: 4.5vh;}
.ca02 .categoryTitle .titBody{top: 50%;}

.categoryTitle::after{bottom: 50%;}
.ca02 .categoryTitle::after{top: 50%;}
.categoryTitle.view::after{left: 0%;}


.categoryTitle .titBody .num{font-size: 2.1em;}
.categoryTitle .titBody h3{font-size: 1.57em;}


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

.categoryItem h2{width: 4.5em;}
.categoryItem .element .copy{font-size: 1.15em;}

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

.mainItem .number{font-size: 1.4em;}
.mainItem .textBox .itemName{width: 96%;}
.mainItem .textBox h3{font-size: 1.7em;width: 96%;}
.mainItem .textBox .copy{font-size: 1.15em;}

.mainItem .mainSlide{width: 85%;margin-top: 3.5em;}
.mainItem .specBox{width: 100%;}

.mainItem .named .numName{width: 85%;}
.mainItem .named .numName .name,
.mainItem .named.lr .numName .name{margin: 0.8em 0 1.0em;}
.mainItem .named .mainSlide{width: 85%;}
.mainItem .mainClumn .named .mainSlide{width: 85%;}

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


.visual.double .specBox{margin-top: 3.5em;}
.visual.single .specBox{margin-top: 3.5em;}


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

.subTitle .copy{font-size: 1.15em;}

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

.slick-prev,
.slick-next {width: 6vw;height: 6vw;margin-top: -3vw;}
.slick-prev{left:-6vw;}
.slick-next{right:-6vw;}

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

.styling{margin-top: 13vw;}
.styling.second{margin-top: 21vw;}
.styling h2{font-size: 1.7em;}
.styling .styleBox{margin-top: 1.5em;}
.styling .specBox{width: 87%;}
.styling .styleBox h3{font-size: 1.6em;}
.styling .styleBox h3.space{font-size: 1.7em}

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

.option{margin-top: 13vw;}
.option.second{margin-top: 15vw;}

.option .elementBox{margin-top: 13vw;}
.option .elementBox h3{font-size: 1.5em;}
.option .mainSlide{width: 85%;}

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

.itemList{font-size: 1.13em;margin:1.3em auto;width: 92%;}
.itemList dl{margin-top: 0.8em;}
.itemList .name{width: calc( 100% - 8.5em);}
.itemList .detail{width: 6em;}
.itemList .detail a{font-size: 1.12em;}


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

.allBanner{font-size: 0.85em;}
.allBanner figure{padding-top: 128%;}
.allBanner .element hr{margin: 2.5em auto 4em;}
.allBanner .element .detail a{font-size: 1.6em;}


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

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

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

.footer{font-size: 1.15em;}
.footer .logo.spView{top: 8vw;width: 10em;}

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


.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{width: 10vw;right: 6vw;top: 3vw;}

.spNavi .naviInner{font-size: 1em;top: 21vw;}

.spNavi .category .num{width: 1.6em;height: 1.6em;font-size: 1.6em;}
.spNavi .category h2{font-size: 2.7em;}
.spNavi .category .list .fa{font-size: 1.8em;margin: 0.9em 0;}
.spNavi  h3{right: 6%;width: 4em;}



}




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

}