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





@media(max-width:1300px) {



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

.feature{width: 81%;}
.coordinate{width: 81%;}
.allBanner{width: 81%;}

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

.otherContents{width: 81%;}
.otherContents h3{font-size: 23px;}
.otherContents h4{font-size: 15px;}
.otherContents .more a{font-size: 19px;}

.otherContents .otherList ul:before{top: 100px;bottom: 85px;}
.otherContents .otherList ul:after{top: 100px;bottom: 85px;}

}



@media(max-width:1200px) {

.sideNavi{right:-10%;width: 9.5%;}
.sideNavi ul{width: 75px;}
.sideNavi .pagetop{width: 75px;}


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

.itemMain .itemName,
.itemMain .delighter .itemName{padding: 4vw 0;}
.itemMain .itemName h2{width: 24px;padding: 15px 0;}

/* ------------------------------------------- */
.coordinate .coordTitle{width: 100%;}


.coordinate .coordTitle h2,
.coordinate .coordTitle.delighter h2{width: 290px;font-size: 40px;}
.coordinate .coordTitle .copy{
	font-size: 14px;
	width: calc(100% - 280px);
	min-height: 28vw;
	margin-left: 290px;
	padding: 13% 0 5%;
}

.coordinate .coordTitle .copy p,
.coordinate .coordTitle.delighter .copy p{width: 85%;}

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

.allBanner .detail h2{font-size: 22px;}
.allBanner .detail .more a{font-size: 22px;}

}






@media(max-width:1050px) {



.scrollbar{width: 23px;left:3%;}
.scrollbar p{width: 14px;margin-top: 6px;}


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

.lead .leadInner .leadBody{width: 100%; margin-top: 60px;}
.lead .leadBody p,
.lead.delighter .leadBody p{font-size: 15px;}

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

.mainNavi .name h2{font-size: 28px;}

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

.separator{margin-top: 18%;}

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

.category{margin-top: 18%;}

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

.categoryHeader{padding: 14% 0;}
.categoryHeader .title h2{margin-top: 25px;padding-top: 20px;font-size: 44px;}
.categoryHeader .title .season{font-size: 23px;margin-top: 30px;}
.categoryHeader .catch{right: 7%;width: 90px;}
.categoryHeader .copy p,
.categoryHeader.delighter .copy p{font-size: 15px;}

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

.feature{margin-top: 18%;width: 81%;}
.feature.f01,
.feature.f04{margin-top: 12%;}

.feature h2{font-size: 42px;}
.feature h3{font-size: 20px;}
.feature .copy{margin-top: 2.3em;}

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

.pointList{width: 80%;margin-top: 12%;}
.pointList h2.titlePC{width: 3.6%;}
.pointList h2.titlePC span{padding: 30px 0;}
.pointList .photo{width: 250px;}

.pointList .detail{width: calc(95% - 250px);right: -2%;}
.pointList .detail h3{font-size: 24px;padding: 20px 0;}

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

.itemMain{margin-top: 18vw;width: 85%;}
.itemMain.set01{margin-top: 20vw;}

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

.itemMain.sta .visualBox{margin-left: 3%;}
.itemMain.rev .visualBox{margin-right: 4%;}

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

.itemMain .itemBox,
.itemMain .itemBox.delighter{width: 38%;}

.itemMain.rev .itemListOnly .itemBox{margin-left: 0%;}
.itemMain .itemListOnly .itemBox,
.itemMain .itemListOnly .itemBox.delighter{width: 40%;}

.itemMain .itemBox .text{width: 100%;}

.itemList{margin-top: 30px;}
.itemList dl{margin-top: 12px;}
.itemList dl .name{width: calc( 100% - 85px);font-size: 16px;letter-spacing: 0.03em;}
.itemList dl .name span{font-size: 12px;}
.itemList dl .num{width: calc( 100% - 85px);margin-top: 0.2em;}
.itemList dl dd{width: 80px;}
.itemList dl dd a{font-size: 15px;}

.coordinate .itemList dl .name{width: calc( 100% - 68px);font-size: 15px;}
.coordinate .itemList dl .num{width: calc( 100% - 68px);}
.coordinate .itemList dl dd{width: 65px;}
.coordinate .itemList dl dd a{font-size: 13px;}
.coordinate .itemList .otherTrigger p.more{font-size: 15px;}

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

.otherImage{margin-top: 10%;}

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

.movieArea{margin-top: 10%;}

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

.coordinate{width: 81%;margin-top: 15%;}

.coordinate .coordTitle h2,
.coordinate .coordTitle.delighter h2{width: 270px;font-size: 37px;}
.coordinate .coordTitle .copy{padding: 11% 0 4%;}

.coordinate .cooedItems{margin-top: 8%;}

/*.collectionItems .colorTips{padding: 20px 0 15px;}*/
.collectionItems .itemList{padding: 12px 0;}


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

.allBanner{margin-top: 20%;}
.allBanner .detail h2{font-size: 20px;}
.allBanner .detail .more a{font-size: 20px;}
.allBanner .detail .line{padding-top: 50%;}

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


.otherContents{width: 81%;margin-top: 23%;}
.otherContents h2 span,
.otherContents h2.delighter span{font-size: 42px;}

.otherContents .otherList{margin-top: 70px;}
.otherContents .otherList ul{width: 105%;}
.otherContents .otherList ul li{width: 28.333%;margin-right: 5%;}
.otherContents .otherList ul:before{top: 90px;bottom: 82px;left: 30.8%;}
.otherContents .otherList ul:after{top: 90px;bottom: 82px;left: 64.1%;}

.otherContents h3{font-size: 21px;}
.otherContents h4{font-size: 14px;}
.otherContents .more span{font-size: 16px;}
.otherContents .more a{font-size: 18px;}


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

.footer{margin-top: 30%;}
.footer .instagram{font-size: 18px;text-align: center;}
.footer .instagram .icon{width: 36px;}
.footer h2{width: 480px;margin-top: 17%;}
.footer .copyright{letter-spacing: 0.1em;font-size: 16px;}

.footer .pagetop{width: 70px;top: 14vw;right: 1vw;}

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

}










@media(max-width:950px) {



#header h2{height: 60vh;max-height: 400px;}
#header.start h2{right: 4.5%;opacity: 1;}

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


.lead .leadTitle h2,
.lead.delighter .leadTitle h2{font-size: 30px;}
.lead .leadInner .leadBody{margin-top: 55px;}

.lead .leadBody p,
.lead.delighter .leadBody p{font-size: 14px;}


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


.mainNavi{margin-top: 70px;}

.mainNavi .name h2{font-size: 25px;}
.mainNavi .more a{font-size: 17px;}

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

.separator{width: 82%;}

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

.category{margin-top: 20%;}

.categoryHeader .categoryPhoto{width: 60%;}

.categoryHeader .categoryInner,
.categoryHeader.delighter .categoryInner{width: 92%;}
.categoryHeader .title h2{margin-top: 25px;padding-top: 20px;font-size: 42px;}
.categoryHeader .title .season{font-size: 20px;margin-top: 25px;}

.categoryHeader .catch{right: 0%;width: 85px;}

.categoryHeader .copy{bottom: 6%;width: 42%;left: 4%;}
.categoryHeader .copy p,
.categoryHeader.delighter .copy p{font-size: 14px;}

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


.feature{width: 85%;}
.feature .featureBody{width: 90%;}
.feature .featureBody .textBox{width: 90%;}

.feature.f02 .featureBody .textBox,
.feature.f03 .featureBody .textBox,
.feature.f04 .featureBody .textBox{padding-bottom:80px;}


.feature .topic{font-size: 13px;}
.feature .topic span{font-size: 17px;}

.feature h2{font-size: 37px;}
.feature h3{font-size: 16px;}

.feature .copy{font-size: 13px;}

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

.pointList{width: 85%;margin-top: 15%;}

.pointList ul li{margin-top: 45px;}
.pointList ul li:nth-child(1){margin-top: 20px;}
.pointList .photo{width: 220px;}
.pointList .photo span{padding-top: 120%;}

.pointList .pointBody{width: 92%;margin-left: 8%;}
.pointList h2.titlePC span{padding: 25px 0;}
.pointList h2.titlePC span:before{left: -10px;right: -10px;}
.pointList h2.titlePC span:after{left: -10px;right: -10px;}

.pointList .detail{width: calc(95% - 220px);right: 0%;}
.pointList .detail h3{font-size: 22px;width: 250px;padding: 15px 0;}
.pointList .detail p{font-size: 13px;}

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

.itemMain{width: 90%;}
.itemMain.sta .visualBox{margin-left: 2%;}
.itemMain.rev .visualBox{margin-right: 2%;}


.itemMain .itemName,
.itemMain .delighter .itemName{padding: 4vw 0;}
.itemMain .itemName h2{width: 22px;padding: 15px 0;}

.itemMain.sta .itemName:before{left: 0px;}
.itemMain.rev .itemName:before{right: 0px;}

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

.itemMain .itemBox,
.itemMain .itemBox.delighter{width: 42%;}
.itemMain.sta .itemBox{margin-right: 2%;}
.itemMain.rev .itemBox{margin-left: 2%;}
.itemMain .itemBox .text p{font-size: 13px;}

.itemList{margin-top: 25px;}
.itemList dl .name{width: calc( 100% - 75px);}
.itemList dl .num{width: calc( 100% - 75px);}
.itemList dl dd{width: 70px;}
.itemList dl dd a{font-size: 15px;}


.coordinate .itemList dl .name{width: calc( 100% - 62px);font-size: 15px;}
.coordinate .itemList dl .num{width: calc( 100% - 62px);}
.coordinate .itemList dl dd{width: 60px;}


/* ------------------------------------------- */
/*
.otherImage.set01{width: 80%;}
.otherImage.set02 .img01{width: 46.5%;margin-right: 14%;}
.otherImage.set02 .img02{width: 53%;}
.otherImage.set04{width: 80%;}
.otherImage.set05{width: 80%;}
.otherImage.set06{width: 80%;}
.otherImage.set07{width: 80%;}
*/
/* ------------------------------------------- */

.movieArea .videoBox{width: 85%;}
.movieArea .thumb .playBT .play{width: 15vw;height: 8.5vw;margin-top: -4.25vw;padding:1.9vw 5.2vw;}

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

.coordinate{width: 95%;}


.coordinate .coordTitle{width: 95%;}
.coordinate .coordTitle h2,
.coordinate .coordTitle.delighter h2{width: 270px;font-size: 34px;top: 15%;}
.coordinate .coordTitle .copy{padding: 10% 0 4%;font-size: 13px;line-height: 2.4;}
.coordinate .coordTitle .copy:after,
.coordinate .coordTitle.delighter .copy:after{width: 3px;}


.collectionItems .text p{font-size: 13px;}

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

.allBanner{width: 87%;}
.allBanner .detail h2{font-size: 2.2vw;}
.allBanner .detail .more a{font-size: 2.1vw;}

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

.otherContents{width: 90%;}
.otherContents h2,
.otherContents h2.delighter{padding-bottom:25px;}
.otherContents h2 span,
.otherContents h2.delighter span{font-size: 36px;}
.otherContents .otherList{margin-top: 60px;}
.otherContents .otherList ul:before{top: 85px;bottom: 70px;}
.otherContents .otherList ul:after{top: 85px;bottom: 70px;}

.otherContents h3{font-size: 19px;}
.otherContents h4{font-size: 13px;}

.otherContents .more{margin: 17px auto 25px;}
.otherContents .more span{font-size: 14px;padding: 10px 0 11px;}
.otherContents .more a{font-size: 17px;padding: 10px 0 9px;}

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


.footer .instagram{font-size: 17px;}
.footer .instagram .icon{width: 34px;}
.footer h2{width: 410px;}
.footer .copyright{font-size: 13px;margin-top: 25px;}
.footer .pagetop{width: 65px;}

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

.sideNavi{display: none;}

}











@media(max-width:768px) {

.wrapper{width: 100%;overflow-x: hidden;}

.spOnly{display: block;}
.pcOnly{display: none;}
.pclink{pointer-events: none;}
.screenWide{display: none;}

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

#header .title{width: 75%;top: 75vh;}
#header .title .date{margin-top:9%;}


#header h2{
	height: 53vh;
	max-height: none;
	top: 5%;
	right: 1%;
	-webkit-transform:none;
	transform:none;
}
#header.start h2{right: 5%;}

.scrollbar{display: none;}

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

.lead{margin-top: 17vw;}
.lead .leadInner{width: 80%;}

.lead .leadInner .leadBody{margin-top: 45px;}

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

.mainNavi{margin-top: 60px;}
.mainNavi .name h2{font-size: 23px;padding: 12px 0 16px;}
.mainNavi .photo{margin-top: 20px;}

.mainNavi .more{width: 75%;}
.mainNavi .more a{padding: 8px 0 7px;}
/*---------------------------------------*/


.category{margin-top: 24vw;}

.categoryHeader{padding: 8vw 0 5vw;}
.categoryHeader .categoryPhoto{width: 44%;margin: 0 0 0 37.3%;}
.categoryHeader .categoryInner,
.categoryHeader.delighter .categoryInner{width: 90%;max-width: none;}

.categoryHeader .title{margin-top: 3vw;}
.categoryHeader .title .season{font-size: 23px;}

.categoryHeader .catch{
	top: 8vw;
	right: 0vw;
	width: 10vw;
	-webkit-transform:none;
	transform:none;  
}
.categoryHeader .copy{
	position:relative;
	bottom: 0;
	left: 0;
	width: 90%;
	padding-right: 7.5%;
	box-sizing: border-box;
	margin: 2.5em auto 0;
}
.categoryHeader .copy p,
.categoryHeader.delighter .copy p{font-size: 15px;}

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

.separator{margin-top: 24vw;width: 90%;}

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


.feature{margin-top: 22vw;width: 90%;}
.feature.f01,.feature.f04{margin-top: 12vw;}
.feature .featureBody{width: 95%;}

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

.pointList{width: 90%;margin-top: 10vw;}
.pointList .pointBody{width: 100%;margin: 0;}
.pointList h2.titlePC{display: none;}
.pointList h2.titleSP{
	display: block;
	position:relative;
	width: 100%;
	font-size: 25px;
	letter-spacing: 0.1em;
	line-height: 1.6;
	padding: 5px 0 5px 3%;
}
.pointList h2.titleSP:before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #2D2A26;
}
.pointList h2.titleSP:after{
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #2D2A26;
}
.pointList ul li{margin-top: 8%;}
.pointList ul li:nth-child(1){margin-top: 8%;}

.pointList .detail h3{font-size: 21px;width: 220px;padding: 10px 0;}


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

.itemMain{width: 90%;margin-top: 20vw;}
.itemMain.set01{margin-top: 20vw;}

.itemMain .visualBox{width: 54%;}
.itemMain.sta .visualBox{margin-left: 0%;}
.itemMain.rev .visualBox{margin-right: 0%;}

.itemMain .itemName,
.itemMain .delighter .itemName{padding: 5vw 0;}
.itemMain .itemName h2{width: 2.7vw;}

.itemMain.sta .delighter.started .itemName{left: -6%;opacity: 1;}
.itemMain.rev .delighter.started .itemName{right: -6%;opacity: 1;}


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

.itemMain.sta .itemBox{margin-right: 0%;}
.itemMain.rev .itemBox{margin-left: 0%;}
.itemList dl dd a{padding: 8px 0px 7px;}
.itemList .otherTrigger{margin-top:13px;}

.slick-dots li button{height:12px;width:32px;}


.coordinate .itemList dl .name{width: calc( 100% - 75px);font-size: 16px;}
.coordinate .itemList dl .num{width: calc( 100% - 75px);}
.coordinate .itemList dl dd{width: 70px;}
.coordinate .itemList dl dd a{font-size: 14px;}
.coordinate .itemList .otherTrigger p.more{font-size: 16px;}

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

.otherImage{margin-top: 12vw;}


.otherImage.set01 .img01{width: 46%;margin-right: 5%;}
.otherImage.set01 .img02{width: 65%;float: left;margin-top: -9%;}

.otherImage.set02 .img01{width: 46%;float: right;margin-right: 10%;}
.otherImage.set02 .img02{width: 54%;}
.otherImage.set02 .img03{margin-top:17%;}

.otherImage.set03{width: 90%;}
.otherImage.set04{width: 85%;}
.otherImage.set05{width: 90%;}

.otherImage.set06{width: 90%;}


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

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

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


.coordinate{width: 90%;margin-top: 11vw;}
.coordinate .coordTitle{width: 92%;}


.coordinate .coordTitle h2,
.coordinate .coordTitle.delighter h2{position: relative;width: 100%;font-size: 34px;top: 0%;}

.coordinate .coordTitle .copy{
	width:100%;
	padding: 1em 0;
	min-height: 0;
	margin: 25px 0 0 0;
	font-size: 13px;
	line-height: 2.4;
}
.coordinate .coordTitle .copy p,
.coordinate .coordTitle.delighter .copy p{
	width: 100%;
	left:0;
	top: 20px;
	padding-left: 5%;
	-webkit-transition: top 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.5s, opacity 1.2s 0.5s;
	transition: top 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.5s, opacity 1.2s 0.5s;
}
.coordinate .coordTitle .copy:after,
.coordinate .coordTitle.delighter .copy:after{width: 2px;}

.coordinate .coordTitle.delighter.started .copy p{left: 0;opacity: 1;top:0;}



.coordinate .slick-list{overflow:hidden;padding-bottom: 2px;}
.coordinate .cooedItems,
.coordinate .cooedItems.delighter{
	width: 95%;
	position: relative;
	top: 30px;
	opacity: 0;
	-webkit-transition: top 1.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.6s;
	transition: top 1.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.6s;
}
.coordinate .cooedItems.delighter.started{opacity: 1;top: 0;}

.coordinate .cooedItems li,
.coordinate .cooedItems.delighter li{
	top: 0;
	opacity: 1;
	-webkit-transition: none;
	transition: none;
}
.coordinate .cooedItems li.left{
	padding:0 0.6%;
}
.coordinate .cooedItems li.center{
	padding:0 0.6%;
	-webkit-transition-delay: 0;
	transition-delay: 0;
}
.coordinate .cooedItems li.right{
	padding:0 0.6%;
	-webkit-transition-delay: 0;
	transition-delay: 0;
}




.coordinate.coodi03 .copy{display:none;}
.coordinate.coodi03 .coordTitle h2,
.coordinate.coodi03 .coordTitle.delighter h2{padding: 0.8em 0 0.8em 4%;position: relative;}

.coordinate .coordTitle h2 br.res{display: block;}

.coordinate.coodi03 .coordTitle h2:after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0%;
	left: 0;
	width: 2px;
	background: #2D2A26;
	-webkit-transition: bottom 1.6s cubic-bezier(0.76, 0, 0.24, 1);
	transition: bottom 1.6s cubic-bezier(0.76, 0, 0.24, 1);
}


.collectionItems{
	margin-top: 10vw;
}
.collectionItems ul{
	width: 60%;
	margin: 0 auto;
}
.collectionItems ul .collectionList,
.collectionItems.delighter ul .collectionList{
	width: 100%;
	display: block;
	margin-bottom: 10vw;

}
.collectionItems .collectionList:nth-child(1){
	padding:0;
}
.collectionItems .collectionList:nth-child(2){
	padding:0;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}
.collectionItems .collectionList:nth-child(3){
	padding:0;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	margin-bottom: 0;
}


.collectionItems .itemSlide{width: 85%;margin: 0 auto;}
.collectionItems .itemSlide ul{width: 100%;}
.collectionItems .slick-dots{width:85% !important;margin: 0 auto;right: 0;left: 0;}




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

.allBanner{margin-top: 22vw;}

.allBanner .spLink{
	display: block;
	z-index: 20;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.allBanner .photo{width: 58%;padding-top: 40%;}
.allBanner .bannerInner{width: 42%;}
.allBanner .detail h2{font-size: 2.4vw;}
.allBanner .detail .more a{font-size: 2.4vw;}
.allBanner .detail .line span{top: 13%;bottom: 15%;}
.c01 .allBanner .detail .more a{border: none; background: #5C7974;color: #FFF;}
.c02 .allBanner .detail .more a{border: none;background: #517D90;color: #FFF;}

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

.otherContents{width: 94%;margin-top: 24vw;}

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


.footer{padding-top:10%;background-image: url("../../images/footer_sp.jpg");}
.footer .instagram{font-size: 19px;}
.footer .instagram .icon{width: 34px;margin-top: 13px;}
.footer h2{width: 180px;margin-top: 18vw;}
.footer .copyright{font-size: 14px;margin-top: 30px;}


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


body.fixed{
    position:fixed;
    width:100%;
    height:100%;
    overflow:hidden;    
}

#trigger{display: block;}
/*トリガー*/
.menu-trigger{
	position:fixed;
	top:20px;
	left:20px;
	width:40px;
	height:30px;
	z-index:500;
    pointer-events: auto;
}
.menu-trigger span{
	position:absolute;
	left:0;
	width:100%;
	height:2px;
	background-color:#212322;
	-webkit-transition: all 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
	transition: all 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.menu-trigger span:nth-of-type(1){top:0;width: 70%;left: 30%;}
.menu-trigger span:nth-of-type(2){top:14px;}
.menu-trigger span:nth-of-type(3){bottom:0;}

.menu-trigger.color span{background-color:#212322;}

.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:-1;
	pointer-events: none;
	opacity: 0;
    overflow:hidden;
	display: block;
	-webkit-transition-delay: 0.8s;
	transition-delay: 0.8s;
}
.spNavi.open{
	pointer-events: auto;
	 z-index:550;
	opacity: 1;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}
.spNavi .bk{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	opacity: 0;
    -webkit-transition:opacity 0.6s 0s;
	transition:opacity 0.6s 0s;
}
.spNavi.open .bk{
	opacity: 1;
    -webkit-transition:opacity 0.8s 0.2s;
	transition:opacity 0.8s 0.2s;
}

.spNavi .bk .top{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 50%;
	background: url("../../images/spnavi_bk01.jpg") center center;
	background-size: cover;
}
.spNavi .bk .bottom{
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	bottom: 0;
	background: url("../../images/spnavi_bk02.jpg") center center;
	background-size: cover;
}

.spNavi .spCloseBT{
	position: fixed;
	top: 30px;
	left: 20px;
	z-index: 40;
	width: 100px;
	height: 100px;	
}
.spNavi .spCloseBT span{
	position:absolute;
	left:0;
	width:100%;
	top: 50%;
	height:1px;
	opacity: 0;
	background-color:#212322;
}
.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 .naviInner{
    width:70%;
    position: absolute;
    top: 0;
    left:0;
    right:0;
	bottom: 0;
    margin: 0 auto;
	z-index: 20;
	opacity: 0;
	-webkit-transition:opacity 0.5s 0s;
	transition:opacity 0.5s 0s;	
}
.spNavi.open .naviInner{
	opacity: 1;
	-webkit-transition:opacity 0s 0.4s;
	transition:opacity 0s 0.4s;
}
.spNavi .naviInner .innerTop{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 50%;
}
.spNavi .naviInner .innerBottom{
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	bottom: 0;
}
.spNavi .naviInner .menu{
	position: absolute;
	left: 0;
	right: 0;
	opacity: 0;
	bottom: 5%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	-webkit-transition: bottom 0.6s, opacity 0.6s;
	transition: bottom 0.6s, opacity 0.6s;
}
.spNavi.open .naviInner .menu{
	opacity: 1;
	bottom: 0;
	-webkit-transition: bottom 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.6s, opacity 0.6s 0.6s;
	transition: bottom 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.6s, opacity 0.6s 0.6s;
}


.spNavi .instagram{
	position: fixed;
	right: 5vw;
	top: 8vw;
	width: 40px;
	opacity: 0;
	-webkit-transition:opacity 0.6s;
	transition:opacity 0.6s;
}
.spNavi.open .instagram{
	opacity: 1;
	-webkit-transition:opacity 0.6s 0.6s;
	transition:opacity 0.6s 0.6s;
}

.spNavi .date{
	position: fixed;
	right: 15vw;
	top: 8vw;
	opacity: 0;
	font-family: "CulturaNewBook";
	letter-spacing: 0.08em;
	line-height: 1.15;
	font-size: 20px;
	color: #212322;
	-webkit-transition:opacity 0.6s;
	transition:opacity 0.6s;
}
.spNavi.open .date{
	opacity: 1;
	-webkit-transition:opacity 0.6s 0.6s;
	transition:opacity 0.6s 0.6s;
}


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





.spNavi .nav{
	position: relative;
	width: 100%;
	margin: 0 auto;
	bottom: 15%;
	font-family: "CulturaNewBook";
	letter-spacing: 0.1em;
	line-height: 1.1;
	color: #212322;
}


.spNavi .nav .topic{font-size: 15px;}
.spNavi .nav h3{font-size: 37px;letter-spacing: 0.15em;}

.spNavi .nav .title{
	width: 100%;
	margin-top: 2vw;
	padding: 2.5vw 0;
	position: relative;
}
.spNavi .nav .title:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 90px;
	height: 2px;
}
.spNavi .nav .title:after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
}
.spNavi .innerTop .nav .title:before{background: #5E7775;}
.spNavi .innerTop .nav .title:after{background: #5E7775;}
.spNavi .innerBottom .nav .title:before{background: #5B7E96;}
.spNavi .innerBottom .nav .title:after{background: #5B7E96;}


.spNavi .nav a{
	font-size: 16px;
	line-height: 1;
	border-radius: 4px;
	position: absolute;
	padding: 7px 13px 9px;
	top: 50%;
	right: 0;
	color: #FFF;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%); 
}
.spNavi .innerTop .nav a{background:rgba(94,119,117,0.8);}
.spNavi .innerBottom .nav a{background:rgba(91,126,150,0.8);}

}






@media(max-width:720px) {


#header .title{width: 85%;}


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

.lead{margin-top: 20vw;}
.lead .leadInner .leadBody{margin-top: 35px;}
.lead .leadBody p,
.lead.delighter .leadBody p{line-height: 2.2;}

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

.mainNavi{width: 100%;margin-top: 10vw;}

.mainNavi .name{margin-top: 7px;}
.mainNavi .navBox,
.mainNavi .navBox.delighter{width: 75%;margin: 0 auto;}
.mainNavi .navBox.to01{float: none;}
.mainNavi .navBox.to02{float: none;margin-top: 10vw;}

.mainNavi .to01 .more a{background: #6E837F;color: #FFF;}
.mainNavi .to02 .more a{background: #688799;color: #FFF;}

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

.categoryHeader .title h2{margin-top: 2.5vw;padding-top: 2.5vw;font-size: 36px;}
.categoryHeader .title .season{font-size: 20px;margin-top: 20px;}

.categoryHeader .title h2:after{width: 70px;}
.categoryHeader .catch{width: 10.5vw; }
.categoryHeader .copy p,
.categoryHeader.delighter .copy p{font-size: 14px;}

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

.feature{margin-top: 27vw;width: 100%;}
.feature.f01,.feature.f04{margin-top: 16vw;}

.feature .featureBody{width: 85%;}

.feature .featureBody:before,
.feature.delighter .featureBody:before{width: 1px;}
.feature .featureBody:after,
.feature.delighter .featureBody:after{width: 1px;}

.feature .topic span{font-size: 16px;}
.feature h2{font-size: 34px;}
.feature h3{font-size: 16px;}


.feature.f02 .featureBody .textBox,
.feature.f03 .featureBody .textBox,
.feature.f04 .featureBody .textBox{padding-bottom:18%;}

.feature .photo,
.feature.delighter .photo{padding-top: 85%;}
.feature.f01 .photo{background-image: url("../../images/feature01sp.jpg");}
.feature.f02 .photo{background-image: url("../../images/feature02sp.jpg");}
.feature.f03 .photo{background-image: url("../../images/feature03sp.jpg");}
.feature.f04 .photo{background-image: url("../../images/feature04sp.jpg");}
.feature.f05 .photo{background-image: url("../../images/feature05sp.jpg");}
.feature.f06 .photo{background-image: url("../../images/feature06sp.jpg");}


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


.pointList{width: 86%;margin-top: 15vw;}

.pointList h2.titleSP{font-size: 24px;}


.pointList .photo{width: 45%;float: left;}
.pointList .photo span{padding-top: 114%;}


.pointList .detail{width: 50%;float: right;position:relative;}
.pointList .detail .detailInner,
.pointList .delighter .detail .detailInner{
	position: relative;
	top: 25px;
	opacity: 0;
	-webkit-transform:none;
	transform:none; 
}
.pointList .delighter.started .detail .detailInner{top: 0;opacity: 1;}

.pointList ul li{margin-top: 12%;}
.pointList ul li:nth-child(1){margin-top: 12%;}

.pointList .detail h3{display: none;}
.pointList .detail p{line-height: 2.0;margin:0 auto;}

.pointList .spTitle,
.pointList .delighter .spTitle{
	display: block;
	width: 45%;
	position: relative;
	margin-bottom: 30px;
	opacity: 0;
	left: 25px;
	-webkit-transition: left 1.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.4s;
	transition: left 1.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.4s
}
.pointList .delighter.started .spTitle{left: 0;opacity: 1;}


.pointList .spTitle h4{
	position:relative;
	font-weight: 500;
	font-size: 20px;
	letter-spacing: 0.1em;
	line-height: 1;
	text-align: center;
	margin: 0 auto;
	padding: 10px 0;
}
.pointList .spTitle h4:before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	background: #2D2A26;
}
.pointList .spTitle h4:after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 1px;
	background: #2D2A26;
}


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


.itemMain{width: 90%;margin-top: 23vw;}
.itemMain.set01{margin-top: 20vw;}


.itemMain .visualBox{width: 78%;}
.itemMain.sta .visualBox{float: none;margin: 0 auto;}
.itemMain.rev .visualBox{float: none;margin: 0 0 0 0;margin-left: calc(24% + 5vw);}



.itemMain .itemName,
.itemMain .delighter .itemName{padding:8vw 0;width:11%;left:-18%;}

.itemMain.sta .delighter.started .itemName{left: -11%;opacity: 1;}
.itemMain.rev .delighter.started .itemName{right: -11%;opacity: 1;}

.itemMain .itemName:before{width: 1px;}
.itemMain.sta .itemName:before{left: 2px;}
.itemMain.rev .itemName:before{right: 2px;}
.itemMain .itemName h2{width: 4.0vw;}

.itemMain .itemBox,
.itemMain .itemBox.delighter{width: 71%;}

.itemMain.sta .itemBox{float: none;margin: 12vw auto 0;}

.itemListOnly{
	position:relative;
	width: 76%;
	margin-left: calc(24% + 5vw);
}
.itemMain.rev .itemBox{float: none;margin: 8% 0 0 7%;}
.itemMain .itemListOnly .itemBox,
.itemMain .itemListOnly .itemBox.delighter{width: 83%;margin: 8% 0 0 7%;}


.itemMain .itemBox .itemSlide .itemSlick{border-width: 1px;}
.itemMain .itemBox .itemSlide{padding-bottom: 50px;}

.itemList dl .name{width: calc( 100% - 85px);font-size: 16px;}
.itemList dl .num{width: calc( 100% - 85px);}
.itemList dl dd{width: 80px;}

.coordinate .itemList dl .name{width: calc( 100% - 85px);font-size: 16px;}
.coordinate .itemList dl .num{width: calc( 100% - 85px);}
.coordinate .itemList dl dd{width: 80px;}
.coordinate .itemList dl dd a{font-size: 15px;}


.c01 .itemList dl dd a{background:#5C7974;border-color: #5C7974;color: #FFF;}
.c02 .itemList dl dd a{background:#517D90;border-color: #517D90;color: #FFF;}


.itemList .otherTrigger p.more{margin-left: 43px;padding:6px 5px 6px 0;font-size: 16px;}
.itemList .otherTrigger p.close{left: 43px; padding:6px 5px 6px 0;font-size: 16px;}
.itemList .otherTrigger span{width: 33px;height: 27px;}

.coordinate .itemList .otherTrigger p.more{margin-left: 43px;padding:6px 5px 6px 0;font-size: 16px;}
.coordinate .itemList .otherTrigger p.close{left: 43px; padding:6px 5px 6px 0;font-size: 16px;}



/*-------------*/
.slick-prev,
.slick-next {width: 8vw;height: 8vw;top:49vw;}
.slick-prev{left:-8vw;}
.slick-next{right:-8vw;}

.itemMain .slick-prev,
.itemMain .slick-next {top: 50%;margin-top: -4vw;}
.itemMain .slick-prev{left:-10vw;}
.itemMain .slick-next{right:-10vw;}

.slick-prev::after{left: 3vw;width: 5.0vw;height: 5.0vw;  }
.slick-next::after{right: 3vw;  width: 5.0vw;height: 5.0vw;  }
.slick-dots li{margin: 0 7px;}


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

.otherImage{margin-top: 13vw;}
.otherImage.set01,
.otherImage.set02,
.otherImage.set03,
.otherImage.set04,
.otherImage.set05,
.otherImage.set06,
.otherImage.set07{width: 100%;overflow: hidden;}


.otherImage.set01 .img01{width: 75%;margin-left: 25%;margin-right:0;float: none;}
.otherImage.set01 .img02{width: 88%;float: none;margin-top:10%;}

.otherImage.set02 .img01{width: 75%;float: none;margin-left: 15%;margin-right:0;}
.otherImage.set02 .img02{width: 82%;float: none;margin-top:10%;}
.otherImage.set02 .img03{width: 75%;float: none;margin-left: 25%;margin-top:10%;}

.otherImage.set03 .img01{width: 75%;margin-left: 25%;margin-right:0;float: none;}
.otherImage.set03 .img02{width: 60%;float:none;margin-top:8%;margin-left: 7%;}

.otherImage.set04 .img01{width: 75%;margin-left: 25%;margin-right:0;float: none;}
.otherImage.set04 .img02{width: 60%;float: none;margin-top: -8%;}

.otherImage.set05 .img01{width: 75%;margin-left: 25%;margin-right:0;float: none;}
.otherImage.set05 .img02{width: 60%;float: none;margin-top:-8%;margin-left:0;}

.otherImage.set06 .img01{width: 60%;margin-left: 34%;}

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

.movieArea{margin-top: 14vw;}

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

.coordinate{width: 100%;margin-top: 14vw;}

.coordinate .coordTitle{width: 85%;}
.coordinate .coordTitle h2,
.coordinate .coordTitle.delighter h2{font-size: 32px;padding-left: 3%;}
.coordinate .coordTitle .copy{padding: 1em 0;margin-top: 30px;}
.coordinate .coordTitle .copy p,
.coordinate .coordTitle.delighter .copy p{padding-left: 8%;}

.coordinate .cooedItems,
.coordinate .cooedItems.delighter{width: 72%;margin-top: 10vw;}

.coordinate .cooedItems li.left{padding:0 0.7%;}
.coordinate .cooedItems li.center{padding:0 0.7%;}
.coordinate .cooedItems li.right{padding:0 0.7%;}

.collectionItems .itemList dl .name{padding-top: 3px;}

.collectionItems .itemSlide{width: 100%;}

.collectionItems .slick-prev,
.collectionItems .slick-next {top: 50%;margin-top: -4vw;}
.collectionItems .slick-prev{left:-10vw;}
.collectionItems .slick-next{right:-10vw;}





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

.allBanner{width: 88%;border-width: 1px;margin-top: 23vw;}
.allBanner .detail{width: 100%;}

.allBanner .detail h2{font-size: 2.6vw;}
.allBanner .detail .more{width: 80%;margin: 0 auto;}
.allBanner .detail .more a{font-size: 2.8vw;}

.allBanner .detail .line{padding-top: 35%;}
.allBanner .detail .line span{top: 13%;bottom: 17%;}


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

.otherContents{width: 72%;}


.otherContents h2,
.otherContents h2.delighter{width: 100%;padding: 18px 0;position: relative;}
.otherContents h2 span,
.otherContents h2.delighter span{font-size: 32px;}

.otherContents h2:after{
	content: "";
	position: absolute;
	bottom: 0;
	top: 0;
	left: 0;
	width: 2px;
	height: auto;
}
.otherContents h2:before{
	content: "";
	position: absolute;
	bottom: 0;
	top: 0;
	right: 0;
	width: 2px;
	background: #212322;
}

.otherContents .otherList{margin-top: 0;padding-bottom: 18vw;border: none;}
.otherContents .otherList ul{width: 80%;margin: 0 auto;max-width: 320px;margin-top: 12%;}
.otherContents .otherList ul li{width: 100%;margin:0 auto;display: block;padding: 0 10%;}
.otherContents .otherList ul li:nth-child(1),
.otherContents .otherList ul li:nth-child(2){margin-bottom: 14%;padding-bottom: 14%;border-bottom: 1px solid #5C3327;}

.otherContents .otherList ul:before{display: none;}
.otherContents .otherList ul:after{display: none;}

.otherContents h3{font-size: 22px;line-height: 1.2;}
.otherContents h4{font-size: 15px;}

.otherContents .more{margin: 20px auto 0;border-width: 1px;}
.otherContents .more span{font-size: 16px;}
.otherContents .more a{font-size: 17px;padding: 9px 0 8px;}

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

.footer{margin-top: 18vw;padding-top: 11vw;padding-bottom: 40px;}

.footer h2{width: 160px;margin-top: 20vw;}
.footer .copyright{margin-top: 20px;line-height: 1.2;}
.footer .copyright br{display: block;}

.footer .pagetop{width: 60px;top: 25vw;}

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

}


  





@media(max-width:550px) {


#header h2{right: 4%;}
#header.start h2{right: 8%;}
#header .title .date{width: 20%;}

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

.lead .leadInner .leadBody{margin-top: 34px;}
.lead .leadBody p,
.lead.delighter .leadBody p{font-size: 13px;}

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

.mainNavi{margin-top: 14vw;}

.mainNavi .navBox,
.mainNavi .navBox.delighter{width: 85%;}

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

.categoryHeader .title h2{font-size: 30px;}
.categoryHeader .title .season{font-size: 18px;margin-top: 15px;}

.categoryHeader .categoryPhoto{width: 46%;margin: 0 0 0 35.3%;}
.categoryHeader .title h2:after{width: 60px;}
.categoryHeader .catch{width: 11.0vw;}

.categoryHeader .copy{margin-top: 1.7em;}
.categoryHeader .copy p,
.categoryHeader.delighter .copy p{font-size: 13px;}

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

.feature h2{font-size: 30px;}
.feature h3{font-size: 15px;}

.feature .copy{line-height: 2.1;}

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

.pointList{width: 88%;}
.pointList h2.titleSP{font-size: 22px;line-height: 1.5;}
.pointList .spTitle h4{font-size: 18px;padding: 10px 0;}

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

.itemList dl{margin-top: 12px;}
.itemList dl .num{margin-top: 0;}
.itemList dl dd a{font-size: 14px;}

.coordinate .itemList dl{margin-top: 12px;}
.coordinate .itemList dl .num{margin-top: 0;}
.coordinate .itemList dl dd a{font-size: 14px;}

.slick-dots li button{height:11px;width:28px;}

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

.coordinate .coordTitle h2,
.coordinate .coordTitle.delighter h2{font-size: 30px;line-height: 1.1;}

.collectionItems ul{width: 65%;}
.collectionItems ul .collectionList,
.collectionItems.delighter ul .collectionList{margin-bottom: 14vw;}
.collectionItems .collectionList:nth-child(3){margin-bottom: 0;}


.collectionItems .slick-dots{width:85% !important;}

.collectionItems .itemSlide{padding-bottom: 48px;}
.collectionItems .slick-dots{bottom:-32px;width: 100% !important;}

.collectionItems .slick-dots li{
    margin: 0 7px;
	width: auto;
	padding-top:0;
	position: relative;
}

.collectionItems .slick-dots li button{
	position:relative;
	height:11px;
	width:28px;
}


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

.allBanner .detail .more a{font-size: 3.0vw;padding: 7px 0;}

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

.otherContents h2 span,
.otherContents h2.delighter span{font-size: 27px;}

.otherContents .otherList ul{width: 100%;}

.otherContents h3{font-size: 20px;}
.otherContents h4{font-size: 14px;margin-top: 0.3em;}

.otherContents .photo{margin:15px auto 0;width: 85%;}

.otherContents .more{width: 85%; margin-top: 15px;}


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

.footer .instagram{font-size: 17px;}
.footer .instagram .icon{width: 30px;}
.footer h2{width: 140px;margin-top: 25vw;}

.footer .pagetop{width: 55px;top: 25vw;}

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

.menu-trigger{top:15px;left:13px;width:26px;height:18px;}
.menu-trigger span{height:1px;}
.menu-trigger span:nth-of-type(2){top:9px;}

.spNavi .spCloseBT{top: 5vw;left: 2vw;width: 86px;height: 86px;}
.spNavi .instagram{right: 5vw;top: 10vw;width: 32px;}

.spNavi .date{right: 18vw;top: 9.5vw;font-size: 16px;}

.spNavi .nav{bottom: 16%;}
.spNavi .nav .topic{font-size: 14px;}
.spNavi .nav h3{font-size: 34px;}
.spNavi .nav .title{margin-top: 2.5vw;padding: 4.0vw 0;}
.spNavi .nav .title:before{width: 80px;}
.spNavi .nav a{font-size: 15px;}

}






@media(max-width:440px) {

#header .title{top: 70vh;}
#header h2{height: 51vh;}

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

.lead{margin-top: 22vw;}

.lead .leadTitle{padding-left: 7%;}
.lead .leadTitle h2,
.lead.delighter .leadTitle h2{font-size: 25px;}
.lead .leadInner .leadBody{margin-top: 30px;}

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

.mainNavi .navBox.to02{margin-top: 13vw;}

.mainNavi  .topic{font-size: 13px;}
.mainNavi .name{margin-top:5px;}
.mainNavi .name h2{font-size: 21px;padding: 10px 0 13px;}
.mainNavi .photo{margin-top: 15px;}

.mainNavi .more a{font-size: 4.0vw;padding: 7px 0 6px;}

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

.separator{margin-top: 26vw;width: 90%;}

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

.category{margin-top: 26vw;}

.categoryHeader .title  .topic{font-size: 11px;}
.categoryHeader .title  .topic span{font-size: 13px;}

.categoryHeader .title h2{font-size: 24px;}
.categoryHeader .title .season{font-size: 15px;margin-top: 12px;}

.categoryHeader .title h2:after{width: 50px;}
.categoryHeader .catch{width: 11.5vw;}

.categoryHeader .copy{margin-top: 1.5em;}
.categoryHeader .copy p,
.categoryHeader.delighter .copy p{line-height: 1.9;font-size: 12px;}

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


.feature{margin-top: 30vw;}
.feature.f01,.feature.f04{margin-top: 20vw;}

.feature .featureBody{width: 88%;}

.feature .topic{font-size: 12px;}
.feature .topic span{font-size: 14px;}

.feature .featureBody .textInner{margin-top: 20px;}
.feature h2{font-size: 24px;}
.feature h3{font-size: 14px;}

.feature .copy{line-height: 1.9;font-size: 12px;margin-top: 2.0em;}


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

.pointList{margin-top: 17vw;}
.pointList h2.titleSP{font-size: 19px;padding: 4px 0 4px 5%;}

.pointList ul li{margin-top: 15vw;}
.pointList ul li:nth-child(1){margin-top: 15vw;}

.pointList .photo{width: 47%;}

.pointList .spTitle,
.pointList .delighter .spTitle{width: 47%;margin-bottom: 20px;}
.pointList .spTitle h4{font-size: 15px;padding: 10px 0;}

.pointList .detail{width: 48%;}
.pointList .detail p{line-height: 1.9;font-size: 12px;}


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

.itemMain{width: 90%;margin-top: 27vw;}
.itemMain.set01{margin-top: 22vw;}

.itemMain .visualBox{width: 80%;}
.itemMain.rev .visualBox{margin-left: calc(20% + 5vw);}


.itemListOnly{width: 80%;margin-left: calc(20% + 5vw);}

.itemMain .itemName,
.itemMain .delighter .itemName{padding:8vw 0;width:11%;left:-18%;;}

.itemMain.sta .delighter.started .itemName{left: -12%;opacity: 1;}
.itemMain.rev .delighter.started .itemName{right: -12%;opacity: 1;}

.itemMain.sta .itemName:before{left: 1.8vw;}
.itemMain.rev .itemName:before{right: 1.8vw;}
.itemMain .itemName h2{width: 4.2vw;left: 0px;padding: 10px 0;}


.itemMain.rev .itemBox{float: none;margin: 8% 0 0 0;}
.itemMain .itemListOnly .itemBox,
.itemMain .itemListOnly .itemBox.delighter{width: 92%;margin: 8% 0 0 0;}

.itemMain .itemBox,
.itemMain .itemBox.delighter{width: 75%;}
.itemMain.sta .itemBox{margin-top: 13vw;}


.itemMain .itemBox .text p{font-size: 12px;line-height: 1.9;}

.itemMain .itemList{width: 108%;margin-left: -4%;}
.itemMain .itemListOnly .itemList{width: 100%;margin-left: 0;}

.coordinate .itemList dl,
.itemList dl{margin-top: 10px;}
.coordinate .itemList dl .name,
.itemList dl .name{width: calc( 100% - 75px);font-size: 15px;line-height: 1.0;}
.coordinate .itemList dl .name span,
.itemList dl .name span{font-size: 11px;}
.coordinate .itemList dl .num,
.itemList dl .num{width: calc( 100% - 75px);font-size: 11px;}
.coordinate .itemList dl dd,
.itemList dl dd{width: 70px;}
.coordinate .itemList dl dd a,
.itemList dl dd a{font-size: 13px;padding: 7px 0px 5px;}
.coordinate .itemList .otherTrigger p.more,
.itemList .otherTrigger p.more{font-size: 15px;padding:5px 5px 5px 0;}
.coordinate .itemList .otherTrigger p.close,
.itemList .otherTrigger p.close{font-size: 15px;padding:5px 5px 5px 0;}
.coordinate .itemList .otherTrigger span,
.itemList .otherTrigger span{width: 33px;height: 25px;}


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

.coordinate{margin-top: 16vw;}

.coordinate .coordTitle h2,
.coordinate .coordTitle.delighter h2{font-size: 25px;}

.coordinate .coordTitle .copy{padding: 0.8em 0;margin-top: 25px;}
.coordinate .coordTitle .copy p,
.coordinate .coordTitle.delighter .copy p{padding-left: 6%;font-size: 12px;line-height: 2.0;}


.coordinate .cooedItems,
.coordinate .cooedItems.delighter{width: 80%;margin-top: 12vw;}

.coordinate .cooedItems li.left{padding:0 0.9%;}
.coordinate .cooedItems li.center{padding:0 0.9%;}
.coordinate .cooedItems li.right{padding:0 0.9%;}

.slick-prev{left:-7vw;}
.slick-next{right:-7vw;}
.coordinate .itemList{width: 102%;margin-left: -1%;}




.collectionItems ul{width: 68%;}
.collectionItems ul .collectionList,
.collectionItems.delighter ul .collectionList{margin-bottom: 15vw;}
.collectionItems .collectionList:nth-child(3){margin-bottom: 0;}


.collectionItems .text p{font-size: 12px;line-height: 1.9;}
.collectionItems .slick-dots li{ margin: 0 5px;}

.collectionItems .text{width:100%;}



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

.otherImage{margin-top: 15vw;}

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

.movieArea{margin-top: 16vw;}
.movieArea .thumb .playBT .play{width: 18.5vw;height: 10.8vw;margin-top: -5.4vw;padding:2.3vw 6.2vw;}

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

.allBanner{margin-top: 23vw;}
.allBanner .photo{width: 52%;padding-top: 43%;}
.allBanner .bannerInner{width: 48%;}
.allBanner .detail h2{font-size: 3.2vw;}
.allBanner .detail .more a{font-size: 3.4vw;padding:6px 0 6px;}
.allBanner .detail .line{padding-top: 30%;}

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


.otherContents{width: 77%;}
.otherContents h2,
.otherContents h2.delighter{padding: 13px 0;}
.otherContents h2 span,
.otherContents h2.delighter span{font-size: 24px;}

.otherContents .otherList{padding-bottom: 20vw;}
.otherContents .otherList ul{margin-top: 15%;}
.otherContents .otherList ul li:nth-child(1),
.otherContents .otherList ul li:nth-child(2){margin-bottom: 16%;padding-bottom: 16%;}

.otherContents h3{font-size: 17px;}
.otherContents h4{font-size: 13px;margin-top: 0.3em;}

.otherContents .photo{width: 82%;}

.otherContents .more{margin-top: 15px;width: 82%;}

.otherContents .more a{font-size: 16px;padding: 8px 0 7px;}


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

.footer{margin-top: 22vw;padding-top: 13vw;}
.footer .instagram{font-size: 16px;}
.footer .instagram .icon{width: 28px;}
.footer h2{width: 120px;margin-top: 25vw;}
.footer .pagetop{width: 50px;top: 25vw;}
.footer .copyright{font-size: 13px;}

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

.spNavi .spCloseBT{top: 4vw;left: 1vw;width: 75px;height: 75px;}
.spNavi .instagram{width: 30px;}

.spNavi .naviInner{width:80%;}

.spNavi .date{right: 18vw;top: 9.5vw;font-size: 15px;}

.spNavi .nav .topic{font-size: 13px;}
.spNavi .nav h3{font-size: 32px;}
.spNavi .nav .title{margin-top: 3.0vw;padding: 4.5vw 0 5.0vw;}
.spNavi .nav .title:before{width: 70px;}
.spNavi .nav a{font-size: 13px;}

}




@media(max-width:360px) {

.lead .leadTitle h2,
.lead.delighter .leadTitle h2{font-size: 23px;}

.mainNavi .name h2{font-size: 20px;}

.feature h2{font-size: 23px;}
.feature h3{font-size: 13px;}

.pointList h2.titleSP{font-size: 15px;}
.pointList .spTitle h4{font-size: 14px;}

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

.otherContents h2 span,
.otherContents h2.delighter span{font-size: 22px;}
.otherContents h3{font-size: 17px;}
.otherContents h4{font-size: 12px;}
/*
/*---------------------------------------*/

.footer .copyright{font-size: 12px;}

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

.spNavi .spCloseBT{width: 70px;height: 70px;}

.spNavi .nav .topic{font-size: 12px;}
.spNavi .nav h3{font-size: 28px;}
.spNavi .nav a{font-size: 13px;}

}