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




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

#header .title h1{width:1.88em;}
#header .title h2{width: 0.84em;}
#header .title h3{width: 11.6em;}

.lead{padding: 3.8em 0 14vw;}

.feature{margin-top: 14vw;}
.feature.farst{margin-top: 10.5vw;}

.sideNavi{font-size: 0.93em;}

}


@media(max-width:980px) {

html{font-size: 1.5vw;}
.allBanner .detail{font-size: 0.95em;}

}



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



@media(max-width:768px) {

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

html{font-size: 17px;}

#loader-bg{height: 100svh;}

.wide{display: none;}

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

#header .title h1{
	width:32.5%;
	right: 0;
	left: 0;
	margin: 0 auto;
	top: 50%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
#header .title h2{
	width: 32%;
	right:0;
	left: 0;
	margin: 0 auto;
	bottom: 8%;
}
#header .title h3{
	width: 29%;
	top: 5%;
	-webkit-transform:none;
	transform:none;
}
.scrollbar{left:92%;bottom: -3em;height:8em;width: 1.4em;}
.scrollbar .base{height:8em;right:auto;left: 0;}
.scrollbar .bar{width:1px;height:8em;right:auto;left: 0;}
.scrollbar p{margin-left: 0.5em;}

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

.lead{padding: 7vw 0 9vw;}
.lead .logo{width: 10em;margin: 0 auto;}
.lead .leadInner{margin-top: 5vw;}
.lead .leadInner .text p{font-size: 1em;}

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

.topNav .menu{height: 100vw;}
.topNav .menu.m02{color: #1C1F10;}
.topNav .menu .detail{top: auto;bottom: 10vw;font-size: 2.1vw;}
.topNav .menu .copy{width: 9vw;}

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

article.wapper .topLogo{width: 19.5vw;margin: 5.5vw auto;}

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

.cateHeader{font-size: 2.3vw;}
.cateHeader .headerIn{padding-top: 0;}

.cateHeader .detail{top: 0;}
.cateHeader .detail .number{width: 4em;margin-top: 15.9vw;}
.cateHeader .detail .copy{top: 6vw;right: calc(3% + 1.5em);width: 4.7em;}
.cateHeader.view .detail .copy{right: 3%;opacity: 1;}

.ca02 .cateHeader .detail .copy{top: 28vw;}


.cateHeader .photoSet{position: relative;width: 100%;}
.ca01 .cateHeader .photoSet .photoMain{
	position: relative;
	width: 81.6%;
	margin-top: -2vw;
}
.ca01 .cateHeader .photoSet .photoSub01{
	position: relative;
	width: 61.3%;
	top: 0;
	left: 0;
	margin-left: 32.2%;
}
.ca01 .cateHeader .photoSet .photoSub02{
	position: relative;
	width: 60.8%;
	bottom: 0;
	right: 0;
	margin-top: -6.5vw;
	margin-left: 39.2%;
}

.ca02 .cateHeader .photoSet.pcv{display: none;}
.ca02 .cateHeader .photoSet.spv{display: block;}

.ca02 .cateHeader .photoSet .photoMain{
	position: relative;
	width: 69.3%;
	z-index: 1;
	margin-left: 30.7%;
	margin-top: -14vw;
}
.ca02 .cateHeader .photoSet .photoSub01{
	position: relative;
	width: 61.3%;
	top: 0;
	right: 0;
	z-index: 3;
	margin-left: 38.7%;
}
.ca02 .cateHeader .photoSet .photoSub02{
	position: relative;
	width: 48%;
	bottom:0;
	left: 0;
	z-index: 2;
	margin-top: -4.0vw;
}


.ca01 .cateHeader.view .photoSet .photoSub01 figure img{-webkit-transition-delay:0.5s;transition-delay:0.5s;}
.ca01 .cateHeader.view .photoSet .photoMain figure img{-webkit-transition-delay:1.0s;transition-delay:1.0s;}
.ca01 .cateHeader.view .photoSet .photoSub02 figure img{-webkit-transition-delay:1.5s;transition-delay:1.5s;}

.ca02 .cateHeader.view .photoSet .photoSub01 figure img{-webkit-transition-delay:0.5s;transition-delay:0.5s;}
.ca02 .cateHeader.view .photoSet .photoSub02 figure img{-webkit-transition-delay:1.0s;transition-delay:1.0s;}
.ca02 .cateHeader.view .photoSet .photoMain figure img{-webkit-transition-delay:1.5s;transition-delay:1.5s;}


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

.movieArea{width: 100%;margin-top: 6.4vw;}

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

.feature{margin-top: 21vw;}
.feature.farst{margin-top: 13vw;}

.featureTitle{width: 100%;}
.featureTitleInner{width: 85%;margin: 4em auto 0;height: 16.25em;}
.featureTitle .titleText{left: 0;padding-left: 1.6em;}
.featureTitle .copy{right: 0;}

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

.detailItem{width: 85%;display: block;}
.detailItem .imageBox{width: 100%;}
.detailItem .elementBox{width: 100%;display: block;}
.detailItem .elementBox p{line-height: 1.8;letter-spacing: 0.01em;}
.detailItem .elementBox .specBox{margin-top: 3.0em;}

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

.imageCut{width: 100%;margin-top: 16vw;}
.imageCut .double{display: block;}
.imageCut .double .farst{width: 100%;}
.imageCut .double .second{width: 81.6%;margin: 5.3vw auto ;}
.f01 .imageCut .double .second{margin: 5.3vw 0 0 18.4%;}
.imageCut .single{width: 100%;}

.imageCut .specBox{width: 85%;margin: 2em auto 0;padding-left: 0;}
.imageCut .specBox.half{width: 85%;margin-left: auto;margin-right: auto;padding: 0;}

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

.subTitle{width: 85%;margin-top: 17vw;}
.subTitle .subText{width: 100%;margin-top: 2em;}

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

.styleSet{width: 100%;margin-top: 13vw;}
.styleSet.top{margin-top: 9vw;}

.styleSet h3{width: 85%;margin: 0 auto;}
.styleSet .styleImage{margin-top: 1.25em;display: block;}
.styleSet .styleImage figure{width: 100%;}
.styleSet .styleImage figure:nth-child(2){margin-top: 5vw;}

.styleSet .styleSpec{width: 85%;margin: 2em auto 0;}

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

.mainItem{width:100%;margin-top: 9vw;display: block;}
.mainItem .imageBox{width: 100%;}

.mainItem .elementBox{width: 85%;margin: 6vw auto 0;}
.mainItem .mainSlide{padding-bottom: 3.2em;width: 80%;margin: 0 auto;}
.mainItem .slick-dots{bottom:-3.2em;}
.mainItem .slick-dots li{margin: 0 1.2em;width:3.5em;height: 1.1em;}
.mainItem .slick-dots li.slick-active button:after{height: 2px;bottom: -7px;}

.mainItem .elementBox .specBox{width: 85%;margin: 2.5em auto 0;position: relative;}

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

.allBanner{
	height: 110vw;/*128*/
	margin-top: 20vw;
	padding-top: 0;
}
.allBanner.c01{background-image: url("../../images/all_ca01sp.webp");}
.allBanner.c02{background-image: url("../../images/all_ca02sp.webp");}
.allBanner.brand{background-image: url("../../images/all_brandsp.webp");margin-top: 19vw;}

.allBanner .bannerInner{bottom: 5.3vw;border-width: 2px;}
.allBanner .detail{
	width: 87%;
	padding-right: 0;
	padding-bottom: 3em;
	display: block;
	font-size: 1em;
}
.allBanner .detail h2{line-height: 1.2;}
.allBanner .detail h2 em{font-size: 1.1em;}
.allBanner .detail h2 br.res{display: block;}
.allBanner .more{display: block;margin: 1.7em 0 0 0;}

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

.otherContents{margin-top: 24vw;}

.otherBanner{
	height: 128vw;
	padding-top:0;
	background-image: url("../../images/other_banner_sp.webp");
	font-size: 2.1vw;
}
.otherBanner .logo{
	top: 5.2vw;
	right:0;
	left:0;
	margin: 0 auto;
	width: 33vw;
}
.otherBanner .detail{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	color: #FFF;
	text-align: center;
	padding-right: 0;
	-webkit-transform:none;
	transform:none;
}
.otherBanner .detail div{
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
.otherBanner .detail .more{
	position: absolute;
	margin: 0 auto;
	left: 50%;
	bottom: 10vw;
	-webkit-transform:translateX(-50%);
	transform:translateX(-50%);
}

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

.sns{width: 85%;margin-top: 16vw;}
.sns ul li{border-width: 1px;padding: 2em 0;}
.sns a{font-size: 1.2em;}
.sns .icon{width: 2.3em;margin-top: 0.8em}

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

.lineBanner{width: 75%;margin: 9vw auto;}

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

.officeal{
	width: 75%;
	padding: 0.8em 0;
	border-width: 2px;
	font-size: 2.1vw;
}
.officeal h2{margin-top: 1.2em;font-size: 2em;}
.officeal h3{font-size: 1.9em;}

.officeal .more{margin-top:2.2em;}
.officeal .more a{font-size: 1.3em;width: 9em;}

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

.footer{
	height: 100vh;
	margin-top: 16vw;
	background-image: url("../../images/footer_sp.webp");
}
.footer .pagetop{width: 7vw;margin-top: 5.3vw;}
.footer h2{
	top: 24vw;
	left: 0;
	right: 0;
	width: 28.5vw;
	margin: 0 auto;
	-webkit-transform: none;
	transform:none;
}
.footer h3{right: 4%;width: 4.5vw;}
.footer .copyright br{display: block;}


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


.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:#FFF;
	-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:#60605c;}


.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: #60605C;
	-webkit-transition:all 0.8s;
	transition:all 0.8s;
}
.spNavi.open{pointer-events: auto;opacity: 1;visibility:visible;}
.spNavi .bk{
	position: absolute;
	top: 0;
	left:0;
	right:0;
	bottom: 0;
	z-index: 10;
}
.spNavi .bk .top{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 50%;
	background: url("../../images/spnavi_bk01.webp") top center;
	background-size: cover;
	border-bottom: 1px solid #FFF;
}
.spNavi .bk .bottom{
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	bottom: 0;
	background: url("../../images/spnavi_bk02.webp") center center;
	background-size: cover;
	border-top: 1px solid #FFF;
}

.spNavi .spCloseBT{
	position: fixed;
	top: 2.5vw;
	left: 2vw;
	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: 4vw;
	right: 5vw;
	z-index: 9999;
	width: 7vw;
}

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

.spNavi .naviInner{
    position: absolute;
    top: 0;
    left:0;
    right:0;
	bottom: 0;
    margin: 0 auto;
	z-index: 20;
	opacity: 0;
	-webkit-transition:opacity 0.5s;
	transition:opacity 0.5s;
}
.spNavi.open .naviInner{opacity: 1;}
.spNavi .naviInner a{color: #60605c;}

.spNavi .naviInner .innerTop{
	position: absolute;
	top: 0;
	bottom: 50%;
	left: 0;
	right: 0;
	display: flex;
	align-items:flex-end;
}
.spNavi .naviInner .innerBottom{
	position: absolute;
	top: 50%;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items:flex-end;
}
.spNavi .category{
	font-size: 1em;
	width: 50%;
	margin-left: 15vw;
	margin-bottom: 5svh;
}
.spNavi .category h2{
	position: relative;
	width: 13em;
	margin-bottom: 1.5em;
}
.spNavi .category .fa{
	font-size: 1.6em;
	line-height: 1;
	font-family: "TTRationalistLight";
	letter-spacing: 0.03em;
	margin-top: 0.7em;
}
.spNavi .category .fa em{font-size: 1.4em;margin-left: 0.2em;}
.spNavi .category .fa span{
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	background: #60605c;
	margin-right: 0.4em;
}


}




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







@media(max-width:680px) {

html{font-size: 2.8vw;}

.scrollbar{left:93%;bottom: -4.2vw;height:6em;}
.scrollbar p{width: 0.95em;}
.scrollbar .base{height:6em;}
.scrollbar .bar{height:6em;}
.scrollbar p{margin-left: 0.3em;}

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

.lead{padding: 8vw 0 10vw;}
.lead .logo{width: 26.5vw;}
.lead .leadInner{margin-top: 12vw;}
.lead .leadInner .shoulder{width: 20%;display: block;position: relative;}
.lead .leadInner .shoulder h2{width:1.5em;margin-left:0;}
.lead .leadInner .shoulder h3{position: absolute;bottom: 0;left: 0.75em;width: 0.75em;margin-left: 0;}

.lead .leadInner .text{width: 80%;margin-right: 4.5%;padding: 0.6em 0;}
.lead .leadInner .text p{font-size: 1em;letter-spacing: -0.02em;line-height: 2.3;}

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

.topNav .menu{height: 115.2vw;}
.topNav .menu.m01 .bk span{background-image: url("../../images/nav01_sp.webp");}
.topNav .menu.m02 .bk span{background-image: url("../../images/nav02_sp.webp");}

.topNav .menu .detail{bottom: 10vw;font-size: 0.76em;}
.topNav .menu .detail .more{font-size: 1.45em;margin-top: 1.5em;}
.topNav .menu .detail .more a{padding: 0.7em 1.6em 0.6em;}
.topNav .menu .copy{width: 12.5vw;}

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

.cateHeader{font-size: 0.71em;}
.cateHeader .detail .number{margin-top: 13.8vw;}
.cateHeader .detail .name{margin-top: 0.4em;}
.cateHeader .detail .season{font-size: 1.45em;margin-top: 0.4em;}

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

.featureTitle{font-size: 0.75em;}
.featureTitle::after{top: 1em;}
.featureTitleInner{width: 87%;margin-top: 3em;}
.featureTitle .titleText{padding-left: 1.4em;}
.featureTitle .titleText::before{width: 0.35em;}
.featureTitle .titleText h3{font-size: 1.45em;padding-top: 0.1em;margin-bottom: 0.4em;}
.featureTitle .copy::before{width: 0.35em;}
.featureTitle .copy p{left: -1.5em;margin-right: 2em;}

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

.detailItem{width: 87%;margin-top: 2.2em;}
.detailItem .elementBox p{margin-top: 1.3em;}

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

.imageCut .specBox{width: 87%;margin-top: 1.7em;}
.imageCut .specBox.half{width: 87%;}

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

.subTitle{width: 87%;margin-top: 18vw;}
.subTitle .headline{font-size: 0.75em;}
.subTitle .subText{width: 100%;margin-top: 1.8em;}

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

.styleSet{margin-top: 14vw;}
.styleSet.top{margin-top: 10vw;}

.styleSet h3{width: 87%;font-size: 1.1em;}
.styleSet h3 span{width: 0.9em;height: 0.9em;margin: 0 0.8em;}
.styleSet h3 span::after{top: 45%;}

.styleSet .styleImage{margin-top: 1.1em;}

.styleSet .styleSpec{width: 87%;margin-top: 1.7em;}

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

.mainItem{margin-top: 10vw;}
.mainItem .elementBox{width: 87%;margin-top: 5vw;}
.mainItem .mainSlide{padding-bottom: 3em;width: 86%;}
.mainItem .slick-dots{bottom:-3em;}
.mainItem .slick-dots li{margin: 0 1em;width:3em;height: 1.0em;}
.mainItem .slick-dots li.slick-active button:after{bottom: -6px;}

.mainItem .elementBox .specBox{width: 100%;margin-top: 1.6em;}

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

.itemList{font-size: 1.05em;}
.itemList dl{margin-top: 1.5em;}

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

.allBanner{height: 128vw;margin-top: 23vw;}
.allBanner .bannerInner{bottom: 5.5vw;border-width: 1px;}
.allBanner .detail{font-size: 0.75em;}
.allBanner .more a{font-size: 1.5em;padding: 0.6em 0 0.5em;width: 7em;}

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

.otherBanner{margin-top: 8vw;font-size: 0.74em;}
.otherBanner .detail h3{font-size: 1.6em;margin-top: 0.8em;}
.otherBanner .detail .more a{font-size: 1.5em;padding: 0.6em 0 0.5em;width: 7em;}
.otherBanner .detail .more .soon{font-size: 1.4em;padding: 0.6em 0 0.5em;width: 8.5em;}
/*--------*/

.sns{width: 95%;}
.sns ul li{border-width: 1px;padding: 1.2em 0;}
.sns a{font-size: 0.95em;}

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

.officeal{border-width: 1px;font-size: 2.3vw;}
.officeal .logo{width: 28.5%;}

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

.footer .pagetop{width: 10.5vw;margin-top: 5.5vw;}
.footer h2{top: 30vw;width: 30vw;}
.footer h3{right: 4%;width: 5.8vw;}
.footer .copyright{font-size: 0.93em;}

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

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


/*.spNavi .spCloseBT{top: 3vw;}*/

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

.spNavi .pagetopBT{top: 3.5vw;right: 4vw;width: 13vw;}
.spNavi .category{font-size: 0.8em;margin-bottom: 4svh;}

}




@media(max-width:540px) {
html{font-size: 3.55vw;}
.spNavi .category{font-size: 0.85em;}
}