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





@media(min-width:1600px) {

.categoryHeader .categoryPhoto span{padding-top: 870px;}

}






@media(max-width:1200px) {

.sideNavi{right:-70px;width: 69px;}
.sideNavi ul li{margin-bottom: 25px;}
.sideNavi .num{font-size: 11px;}
.sideNavi .title{font-size: 12px;}
.sideNavi .pagetop{width: 57px;}

/*----------*/
.lead .leadTitle  h2{font-size: 55px;}
.lead .leadBody p,
.lead.delighter .leadBody p{font-size: 17px;}

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

.mainNavi .name h2{font-size: 26px;}
.mainNavi .name h2 em{font-size: 22px;}

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

.separator{margin-top: 23%;}

.category.c02{margin-top: 25%;}
.category.c03{margin-top: 25%;}

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

.categoryHeader .title .topic{font-size: 1.4vw;}
.categoryHeader .title .topic em{font-size: 2.3vw;}
.categoryHeader .title h2{font-size: 4.5vw;padding-bottom: 0.6em;}
.categoryHeader .title h2 em{font-size: 4.0vw;}
.c03 .categoryHeader .title h2{font-size: 4.0vw;}
.c03 .categoryHeader .title h2 em{font-size: 3.6vw;}

.categoryHeader .title .catch{width: 65%;padding-top: 8%;}
.categoryHeader .title .catch h3{width: 27%;}

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

.styleSet{margin-top: 13%;}

.styleTitle{width: 90%;}
.styleTitle .icon{width: 67px;}
.styleTitle .styleName h2.top01{font-size: 54px;}
.styleTitle .styleName h2.top02{font-size: 48px;}
.styleTitle .styleName h2.low{font-size: 48px;}
.styleTitle .styleName .line{width: 105px;height: 105px;}

.styleTitle .titleText,
.styleTitle.delighter .titleText{width: 92%;}
.styleTitle .titleText p{width: 92%;margin-top: 3.0em;}
.styleTitle .sideTag{font-size: 22px;}
.styleTitle .sideTag span{top: -50px; left: 330px;padding: 12px 40px;}

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

.stylingItems{margin-top: 18%;}
.stylingItems .stylingTitle h2{font-size: 51px;}

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

.itemMain{margin: 10% auto 12%;}

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

.itemList{width: 98%;margin: 70px auto 0;}
.itemList h3{font-size: 19px;}
.itemList .spec h4{font-size: 15px;}
.itemList .detail{width: 78px;}
.itemList .detail a{font-size: 15px;}
.itemList02 dl .name{font-size: 15px;}
.itemList02 dl dd{width: 78px;}
.itemList02 dl dd a{font-size: 15px;}

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

.movieArea{margin: 10% auto;}
.movieArea.s03{margin: 6% auto;}

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

.allBanner{width: 82%;margin-top: 20%;}
.allBanner .detail h2{font-size: 24px;}

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

.otherContents{width: 82%;margin-top: 24%;}
.otherContents h2 span,
.otherContents h2.delighter span{font-size: 54px;}
.otherContents .otherList ul{padding-top: 6%;}
.otherContents h3{font-size: 26px;}
.otherContents h4{font-size: 18px;}
.otherContents .more a{font-size: 22px;}
.otherContents .more span{font-size: 19px;line-height: 22px;}

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

.footer{margin-top: 27%;padding: 150px 0 55px;}
.footer h2{margin-top: 14%;}
.footer .copyright{font-size: 18px;}

}





@media(max-width:1080px) {


#header .title h1{font-size: 4.8vw;}
#header h2{width: 16%;}
#header .season{font-size: 1.8vw;}


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

.mainNavi{width: 80%;}

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

.styleTitle .styleName h2.top01{font-size: 51px;}
.styleTitle .styleName h2.top02{font-size: 45px;}
.styleTitle .styleName h2.low{font-size: 45px;}
.styleTitle .titleText p{width: 100%;margin-top: 3.0em;}

.styleTitle .sideTag span{top: -35px; left: 320px;padding: 12px 35px;}

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

.itemList .spec{margin-top: 25px;padding: 10px 0;}
.itemList .spec h4 em{padding-right: 0;display: block;}
.itemList .spec .num{margin-top: 0.2em;}

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

.stylingItems .stylingTitle h2{font-size: 49px;}

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

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

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

.otherContents h2 span,
.otherContents h2.delighter span{font-size: 50px;}
.otherContents h3{font-size: 24px;}
.otherContents h4{font-size: 16px;}
.otherContents .more a{font-size: 21px;}

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

}





@media(max-width:960px) {


.sideNavi{display: none;}

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

.lead .leadHeader{padding: 20px 0;}
.lead .leadHeader h3{width: 270px;}
.lead .leadHeader .season{font-size: 19px;}
.lead .leadTitle  h2{font-size: 50px;}
.lead .leadBody{width: 95%;margin-top: 40px;}
.lead .leadBody p,
.lead.delighter .leadBody p{font-size: 16px;}

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

.mainNavi{width: 85%;margin-top:11%;padding-bottom: 15%;}


.mainNavi .navBox,
.mainNavi.delighter .navBox{width: 29%;padding-bottom: 30px;}
.mainNavi .navBox.to02{margin: 0 6.5%;}

.mainNavi  .topic{font-size: 14px;}
.mainNavi  .topic em{font-size: 21px;}

.mainNavi .name{padding: 18px 0 13px;}
.mainNavi .name h2{font-size: 24px;}
.mainNavi .name h2 em{font-size: 20px;}

.mainNavi .more{width: 65%;}
.mainNavi .more a{font-size: 17px;padding: 8px 0 7px;}


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

.wrapper{overflow: hidden;}

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

.styleSet{width: 90%;margin-top: 14%;}

.styleTitle{width: 95%;}
.styleTitle .icon{width: 60px;margin-left:0%;}
.styleTitle .styleName{width: 98%;margin-top: 40px;}

.styleTitle .styleName h2.top01{font-size: 47px;}
.styleTitle .styleName h2.top02{font-size: 42px;}
.styleTitle .styleName h2.low{font-size: 42px;}
.styleTitle .styleName .line{left: 50px;width: 100px;height: 100px;}

.styleTitle .titleText,
.styleTitle.delighter .titleText{width: 98%;margin-top: 60px;}
.styleTitle .titleText h3{font-size: 23px;}
.styleTitle .titleText p{margin-top: 2.5em;font-size: 14px;}

.styleTitle .sideTag{font-size: 20px;}
.styleTitle .sideTag span{top: -50px;left: 300px;padding: 10px 30px;}


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

.styleImage{width: 106%;left: -3%;}

.style02 .styleImage .itemBox{width: 37%;right: 3%;padding-top: 17%;}
.style03 .styleImage .img06{left:0%;}
.style03 .styleImage .itemList02{width: 67%;padding-top: 2%;padding-left: 3%;}


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


.stylingItems .stylingTitle h2{font-size: 44px;}
.stylingItems.delighter .stylingTitle:before{top: -20px;}

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

.itemMain{width: 100%;}
.itemMain .itemBox,
.itemMain .itemBox.delighter{width: 43%;}
.itemMain .itemBox .text{font-size: 13px;line-height: 1.7;}

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

.itemList{width: 100%;margin-top: 55px;}
.itemList h3{font-size: 17px;}
.itemList .itemImage{margin-top: 13px;}
.itemList .itemCopy{font-size: 13px;line-height: 1.7;}
.itemList .detail{width: 70px;}


.itemList02{margin-top: 25px;}
.itemList02 dl{margin-top: 15px;}
.itemList02 .otherTrigger{margin-top:15px;}
.itemList02 .otherTrigger p.more{font-size: 15px;}
.itemList02 .otherTrigger p.close{font-size: 15px;}
.itemList02 dl{padding: 4px 0;}
.itemList02 dl dd{width: 70px;}

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

.movieArea{width: 100%;}
.movieArea .thumb .playBT .play{width: 85px;}

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

.allBanner{width: 88%;}
.allBanner .detail h2{font-size: 19px;}
.allBanner .detail .more a{font-size: 18px;}

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

.separator{width: 88%;}

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

.otherContents{width: 92%;}
.otherContents h2{padding-bottom:25px;}
.otherContents h2 span,
.otherContents h2.delighter span{font-size: 45px;}
.otherContents h3{font-size: 22px;}
.otherContents h4{font-size: 14px;}

.otherContents .otherList ul{width: 106.2%;padding-top: 6%;}
.otherContents .otherList ul li{width: 27.333%;margin-right: 6%;}

.otherContents .otherList ul:before{left: 30.333%;}
.otherContents .otherList ul:after{left: 63.666%;}

.otherContents .more{margin: 20px auto 35px;}
.otherContents .more a{font-size: 19px;display: block;padding: 0.4em 0;}

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

.footer{padding: 90px 0 45px;}
.footer .instagram{font-size: 17px;}
.footer .instagram .icon{width: 32px;}
.footer h2{width: 170px;}
.footer .copyright{font-size: 16px;}
.footer .pagetop{width: 55px;top: 80px;}

}






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





@media(max-width:768px) {

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

#header .title{
	width: 90%;
	top:auto;
	bottom: 17%;
	margin: 0 auto;
	-webkit-transform:none;
	transform:none;
}
#header .title h1{font-size: 8.0vw;text-align: left;line-height: 0.9;padding: 0.15em 0;}
#header .title h1 br{display: block;}



#header .title h1{
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	filter: blur(5px);
	left: 1em;
	-webkit-transition: all 2.5s cubic-bezier(0.33, 1, 0.68, 1);
	transition: all 2.5s cubic-bezier(0.33, 1, 0.68, 1);
}
#header.start .title h1{
	left: 0;
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-filter: blur(0);
	-moz-filter: blur(0);
	filter: blur(0);
}



#header h2{
	width: 25%;
	left: 5vw;
	top: 5vw;
	padding-top:0;
}

#header .season{
	width: 90%;
	bottom:12%;
	letter-spacing: 0.1em;
	margin: 0 auto;
	text-align: left;
	font-size: 3.8vw;
	left: 2.5em;
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	filter: blur(5px);
	-webkit-transition: all 2.0s cubic-bezier(0.33, 1, 0.68, 1) 1.5s;
	transition: all 2.0s cubic-bezier(0.33, 1, 0.68, 1) 1.5s;
}
#header.start .season{
	left: 0;
	-webkit-filter: blur(0);
	-moz-filter: blur(0);
	filter: blur(0);
}





.scrollbar{
    width: 25px;
    position: absolute;
    left:auto;
	right: 3%;
    bottom: -70px;
    height:140px;
}
.scrollbar p{
    width: 14px;
	margin-top: 0;
	margin-left: 5px;
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}
.scrollbar .base{right: auto;left: 0;}
.scrollbar .bar{right: auto;left: 0;}





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

.lead{margin-top: 20%;}
.lead .leadHeader .season{display: none;}

.lead .leadTitle .season,
.lead.delighter .leadTitle .season{
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	width: 1px;
	height: 1px;
	-webkit-transform:rotate(90deg);
	transform:rotate(90deg);
	opacity: 0;
	-webkit-transition: opacity 1.0s 2.0s;
	transition: opacity 1.0s 2.0s;
}
.lead.delighter.started .leadTitle .season{opacity: 1;}

.lead .leadTitle .season span{
	font-size: 18px;
	line-height: 1;
	letter-spacing: 0.05em;
	position: absolute;
	top: 0;
	left:0;
	text-indent: -5px;
	white-space: nowrap;
	-webkit-transform:translateX(-50%);
	transform:translateX(-50%);
}

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


.mainNavi{width: 90%;margin-top:14%;padding-bottom: 20%;}
.mainNavi .navBox,
.mainNavi.delighter .navBox{width: 30%;padding-bottom: 30px;}
.mainNavi .navBox.to02{margin: 0 5%;}

.mainNavi .name h2{font-size: 20px;}
.mainNavi .name h2 span{font-size: 18px;}
.mainNavi .to01 .more a{border-color:#A74E58;color:#A74E58;}
.mainNavi .to02 .more a{border-color:#B6431A;color:#B6431A;}
.mainNavi .to03 .more a{border-color:#62873D;color:#62873D;}

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

.wrapper{overflow: hidden;padding-bottom: 14.8vw;}

.separator{margin-top: 25%;}

.category.c02{margin-top: 28%;}
.category.c03{margin-top: 28%;}


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

.categoryHeader .categoryPhoto span{padding-top: 121.5%;}
.c01 .categoryHeader .categoryPhoto span{background-image: url("../../images/category01_sp.jpg");}
.c02 .categoryHeader .categoryPhoto span{background-image: url("../../images/category02_sp.jpg");}
.c03 .categoryHeader .categoryPhoto span{background-image: url("../../images/category03_sp.jpg");}


.categoryHeader .title .topic{font-size: 2.8vw;}
.categoryHeader .title .topic em{font-size: 3.5vw;}
.categoryHeader .title h2{font-size: 5.8vw;padding-bottom: 0.7em;margin-top: 0.45em;}
.categoryHeader .title h2 em{font-size: 5.2vw;}
.c03 .categoryHeader .title h2{font-size: 5.8vw;}
.c03 .categoryHeader .title h2 em{font-size: 5.2vw;}
.c03 .categoryHeader .title h2 br{display: block;}

.categoryHeader .title .catch{width: 73%;padding-top: 13%;}
.categoryHeader .title .catch h3{width: 32%;}

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

.styleSet{margin-top: 15%;width: 100%;}

.styleSet.style02,
.styleSet.style04,
.styleSet.style06{margin-top: 25%}


.styleTitle{width: 85%;margin: 0 auto;position: relative;}
.styleTitle .icon{width: 58px;}
.styleTitle .styleName{width: 100%;margin-top: 50px;padding-bottom: 15px;}

.styleTitle .styleName h2.top01{font-size: 45px;}
.styleTitle .styleName h2.top02{font-size: 40px;}
.styleTitle .styleName h2.low{font-size: 40px;}
.styleTitle .styleName .line{width: 95px;height: 95px;}

.styleTitle .sideTag{font-size: 19px;}
.styleTitle .sideTag span{top: -50px;left: 305px;padding: 10px 20px;}
.styleTitle .titleText p{margin-top: 2.0em;}


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


.styleImage{width: 100%;left:0;}


.style01 .styleImage .img01{width: 65.5%;margin-left:0;}
.style01 .styleImage .img02{width: 64.5%;margin-left: 35.5%;margin-top: -10%;}
.style01 .styleImage .img03{width: 63.0%;z-index: 1;margin-left:0;margin-top: -13%;}
.style01 .styleImage .img04{width: 90.4%;margin-left: 9.6%;margin-top: 0;}

/*-----*/

.style02 .styleImage .img01{width: 65.5%;margin-left:0;}
.style02 .styleImage .img02{width: 80%;margin-left: 20%;margin-top: -6%;}
.style02 .styleImage .img03{width: 41.6%;margin-left: 9.6%;margin-top: -6%;}
.style02 .styleImage .img04{width: 80%;margin-left: 20%;margin-top: -5%;}

.style02 .styleImage .itemBox{
	position:relative;
	width: 72%;
	max-width: 23em;
	right:0;
	padding-top:0;
	margin-left: 20%;
	margin-top: 4%;
}
.style02 .styleImage .itemBox .itemList02{margin-top: 0;}

/*-----*/

.style03 .styleImage .img02{width: 83.2%;margin-left: 16.8%;}
.style03 .styleImage .img03{width: 52.2%;margin-left:0;margin-top: -8%;}
.style03 .styleImage .img04{width: 80.5%;margin-left: 19.5%;margin-top: -5%;}

.style03 .styleImage .img05{width: 83.2%;margin-left: 16.8%;}
.style03 .styleImage .img06{width: 54.4%;left:0;top: 0;padding-top:0;position:relative;margin-top:-5%;}
.style03 .styleImage .img06 .itemList02{display: none;}
.style03 .styleImage .img07{width: 43.2%;margin-left: 50.4%;margin-top:-39%;}
.style03 .styleImage .img08{width: 43.7%;margin-left: 13%;margin-top: -11%;}

.style03 .styleImage .itemBox{
	display: block;
	position:relative;
	width: 75%;
	max-width: 23em;
	margin-left: 13%;
	margin-top: 4%;
	text-align: left;
}
.style03 .styleImage .itemBox .itemList02{
	margin:0;
	padding: 0;
	width: 100%;
}

/*-----*/

.style04 .styleImage .img01{width: 65.5%;margin-left:0;}
.style04 .styleImage .img02{width: 80%;margin-left: 20%;margin-top: -6%;}
.style04 .styleImage .img03{width: 41.6%;margin-left: 9.6%;margin-top: -6%;}

/*-----*/

.style05 .styleImage .img02{width: 60.2%;margin-left: 33.3%;}
.style05 .styleImage .img03{width: 52.2%;margin-left: 0;margin-top: -10%;}
.style05 .styleImage .img04{width: 80.5%;margin-left: 19.5%;margin-top: -8%;}

/*-----*/

.style06 .styleImage .img02{width: 60.2%;margin-left: 33.3%;}
.style06 .styleImage .img03{width: 54.4%;z-index: 4;margin-left: 0;margin-top: -8%;}
.style06 .styleImage .img04{width: 81.0%;margin-left: 19%;margin-top: -14%;}


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

.stylingItems{margin-top: 23%;width: 100%;left:0;}
.stylingItems .stylingTitle{width: 100%;}
.stylingItems .stylingTitle h2{font-size: 40px;}

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

.itemMain{margin: 14% auto;width: 60%;}
.itemMain .visualBox{
	width: 100%;
	float: none;
}
.itemMain .itemBox,
.itemMain .itemBox.delighter{
	width: 100%;
	float: none;
	margin-top: 15%;
}
.itemMain .itemBox .text{font-size: 14px;line-height: 1.9;margin: 16% auto 12%;}


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

.itemList{display: block;flex-wrap: wrap;margin-top: 0;width: 55%;}

.itemList .listIn,
.delighter .itemList .listIn{width: 100%;}

.itemList .listIn.posLeft,
.itemList .listIn.posCenter,
.itemList .listIn.posRight{margin: 20% auto 0;}

.itemList .listIn02,
.delighter .itemList .listIn02{width: 100%;}

.itemList .listIn02.posLeft,
.itemList .listIn02.posRight{margin: 20% auto 0;}


.itemList h3{font-size: 20px;}
.itemList .itemImage{margin-top: 15px;}
.itemList .itemImage img{padding: 0 7%;}
.itemList .listIn02 .itemImage img{padding: 0;}

.itemList .itemCopy{font-size: 14px;line-height: 1.85;}
.style01 .itemList .posRight .itemCopy{margin-top: 18%;}



.itemList .spec{margin-top: 25px;padding: 15px 0;}
.itemList .spec h4{font-size: 16px;}
.itemList .spec h4 em{padding-right: 0.5em;display:inline-block;}

.itemList .detail{width: 85px;}
.itemList .detail a{font-size: 16px;}


.itemList02 dl{margin-top: 8px;}
.itemList02 dl .name{font-size: 16px;}
.itemList02 dl .num{margin-top: 0.3em;}
.itemList02 dl dd{width: 85px;}
.itemList02 dl dd a{font-size: 16px;}


.slick-dots{bottom:-8.6%;}
.dots2line .slick-dots{bottom:-9%;}
.itemMain .slick-dots{bottom:-9%;}
.listIn02 .slick-dots li{margin: 1.4% 1.7%;width:9.2%;}


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

.movieArea{margin: 10% auto 13%;}
.movieArea.s03{margin: 8.5% auto;}
.movieArea .thumb .playBT .play{width: 12%;}

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

.allBanner{width: 95%;margin-top: 23%;border-width: 1px;}
.allBanner .photo span{padding-top: 75%;}

.allBanner .detail h2{font-size: 2.5vw;}
.allBanner .detail .more a{font-size: 2.8vw;border: none;}

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

.otherContents{width: 95%;margin-top: 26%;}
.otherContents h2 span,
.otherContents h2.delighter span{font-size: 39px;}

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

.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: 15px;margin-top: 30px;}

.footer .pagetop{display: none;}

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


.spBottomNavi{
	display: block;
	width: 100%;
	position: fixed;
	left: 0;
	bottom: -16.2vw;
	z-index: 600;
	-webkit-transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
	transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.spBottomNavi.view{bottom: -1px;}

.spBottomNavi ul{
	width: 100%;
	display: flex;
}
.spBottomNavi ul li{
	width:27%;
	text-align: center;
	height: 16vw;
	position: relative;
	vertical-align: top;
}
.spBottomNavi ul li:last-child{
	width: 19%;
	background: #DBD7D7;
	position: relative;
}
.spBottomNavi ul li:last-child img{
	width: 50%;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: 0 auto;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
.spBottomNavi ul li a{
	display: block;
	width: 100%;
	height: 16vw;
	position: relative;
	text-align: center;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
.spBottomNavi ul li.n01 a{background-image: url("../../images/spnavi01.jpg");}
.spBottomNavi ul li.n02 a{background-image: url("../../images/spnavi02.jpg");}
.spBottomNavi ul li.n03 a{background-image: url("../../images/spnavi03.jpg");}

.spBottomNavi ul li .text{
	position: absolute;
	top: 45%;
	left: 0;
	width: 60%;
	z-index: 10;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);  
}


}







@media(max-width:720px) {


#header .title h1{font-size: 10.0vw;}
#header .season{font-size: 4.5vw;}
#header h2{width: 27%;}

.scrollbar{width: 25px;height:110px;bottom: -55px;}
.scrollbar p{width: 13px;margin-left: 3px;}
.scrollbar .base{height:110px;}
.scrollbar .bar{height:110px;}
.scrollbar .line{background-position: 0 -110px;}

@keyframes scrolldown {
	0% {background-position: 0 -110px;}
	50% {background-position: 0 0;}
	100% {background-position: 0 110px;}
}

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

.bkColor{padding-bottom: 32vw;}

.lead{margin-top: 23%;width: 87%;}

.lead .leadHeader{padding: 17px 0;}
.lead .leadHeader h3{width: 250px;}

.lead .leadTitle  h2{font-size: 43px;}
.lead .leadTitle .season span{font-size: 17px;}

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


.mainNavi{width: 80%;margin-top: 17%;padding: 5% 0;}

.mainNavi:before,
.mainNavi.delighter:before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 100%;
	left: 0;
	width: 1px;
	height: auto;
	background: #938C8E;
	-webkit-transition: bottom 1.8s cubic-bezier(0.76, 0, 0.24, 1);
	transition: bottom 1.8s cubic-bezier(0.76, 0, 0.24, 1);
}
.mainNavi.delighter.started:before{bottom: 0;}

.mainNavi:after,
.mainNavi.delighter:after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 100%;
	left: auto;
	right: 0;
	width: 1px;
	height: auto;
	background: #938C8E;
	-webkit-transition: bottom 1.8s cubic-bezier(0.76, 0, 0.24, 1);
	transition: bottom 1.8s cubic-bezier(0.76, 0, 0.24, 1);
}
.mainNavi.delighter.started:after{bottom: 0;}


.mainNavi .navInner{
	width: 53%;
	margin: 0 auto;
	padding-bottom: 0;
	display: block;
}
.mainNavi .navBox,
.mainNavi.delighter .navBox{width: 100%;padding-bottom: 0;border-bottom:none;}

.mainNavi .navBox.to02{margin: 15vw 0;}

.mainNavi.delighter .navBox.to02{-webkit-transition-delay: 0.7s;transition-delay: 0.7s;}
.mainNavi.delighter .navBox.to03{-webkit-transition-delay: 1.4s;transition-delay: 1.4s;}

.mainNavi  .topic{font-size: 16px;}
.mainNavi  .topic em{font-size: 23px;}

.mainNavi .name{padding: 16px 0 12px;}
.mainNavi .name h2{font-size: 27px;line-height: 1;}
.mainNavi .name h2 em{font-size: 23px;}


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

.wrapper{padding-bottom: 18.5vw;}

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

.categoryHeader .title .catch h3{width: 35%;}

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

.styleTitle{width: 91%;margin-left: 9%;}

.styleTitle .styleName{margin-top: 45px;padding-bottom: 15px;}
.styleTitle .icon{width: 55px;}
.styleTitle .styleName h2.top01{font-size: 42px;}
.styleTitle .styleName h2.top02{font-size: 40px;}
.styleTitle .styleName h2.low{font-size: 40px;}
.styleTitle .styleName .line{width: 90px;height: 90px;}


.styleTitle .sideTag{font-size: 17px;}
.styleTitle .sideTag span{top: 0px;left: 180px;padding:10px 15px;}

.styleTitle .titleText,
.styleTitle.delighter .titleText{width: 90%;margin:55px 0 0;}
.styleTitle .titleText h3{font-size: 22px;}
.styleTitle .titleText p{margin-top: 1.8em; line-height: 2.2;}


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

.stylingItems .stylingTitle h2{font-size: 38px;}


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

.itemMain{margin: 14% auto;width: 62%;}
.itemMain .itemBox .text{font-size: 13px;}

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

.itemList{width: 62%;}

.itemList .listIn.posLeft,
.itemList .listIn.posCenter,
.itemList .listIn.posRight{margin-top: 22%;}
.itemList .listIn02.posLeft,
.itemList .listIn02.posRight{margin-top: 22%;}

.itemList h3{font-size: 19px;}
.itemList .itemCopy{font-size: 13px;margin-top:15%;}

.itemList .detail{width: 80px;}
.itemList02 dl dd{width: 80px;}

.itemMain .slick-dots li button{padding-top: 45%;}

.dots2line .slick-dots{bottom:-10%;}

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

.allBanner .photo{width: 58%;}
.allBanner .bannerInner{width: 42%;}
.allBanner .detail h2{font-size: 2.8vw;}
.allBanner .detail .more{width: 80%;}
.allBanner .detail .more a{font-size: 2.8vw;padding: 0.6em 0;}
	

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


.otherContents{width: 88%;position: relative;padding-bottom: 12%;}
.otherContents:after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: #8E9787;
}

.otherContents h2{padding-bottom:20px;}

.otherContents h2:after,
.otherContents h2.delighter:after{background: #8E9787;}

.otherContents .otherList{
	width: 90%;
	border-bottom: none;
	margin: 12% auto 0;
	position: relative;
}
.otherContents .otherList:before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	background: #8E9787;
}
.otherContents .otherList:after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 1px;
	background: #8E9787;
}
.otherContents .otherList ul{
	width: 100%;
	padding-top: 0;
}
.otherContents .otherList ul li{
	width: 100%;
	margin-right:0;
	display: block;
	padding: 0;
	position: relative;
}
.otherContents .otherList ul li:not(:first-child){
	margin-top: 10%;
	padding-top:10%;
}
.otherContents .otherList ul li:not(:first-child):before{
	content: "";
	position: absolute;
	top: 0;
	left: 7%;
	right: 7%;
	height: 1px;
	background: #8E9787;
}

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



.otherContents .photo{margin: 17px auto 0;width: 60%;}
.otherContents .more{margin: 20px auto 0;width: 100%;}
.otherContents .more a{
	display: inline-block;
	padding: 0.4em 1.5em;
	background: #A7BE8C;
	border: none;
	color: #FFF;
}

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

.footer{margin-top: 30vw;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;}


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

.spBottomNavi{bottom: -19.2vw;}
.spBottomNavi ul li{height: 19vw;}
.spBottomNavi ul li a{height: 19vw;}
.spBottomNavi ul li:last-child img{width: 55%;}
.spBottomNavi ul li .text{top: 45%;width: 75%;}




}


  





@media(max-width:550px) {


#header .title h1{font-size: 10.5vw;}
#header .season{font-size: 5.0vw;}
#header h2{width: 32%;}

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

.lead .leadHeader h3{width: 230px;}

.lead .leadTitle{
	padding: 12px 0 30px;

}
.lead.delighter .leadTitle:after{bottom: calc(100% + 8px);}
.lead.delighter.started .leadTitle:after{bottom: 8px;}

.lead .leadTitle  h2{font-size: 38px;}
.lead .leadTitle .season span{font-size: 16px;text-indent: -4px;}

.lead .leadBody{margin-top: 9vw;width: 95%;}
.lead .leadBody p,
.lead.delighter .leadBody p{font-size: 15px;line-height: 2.0;}

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

.mainNavi{width: 80%;margin-top: 19%;padding: 5% 0;}
.mainNavi .navInner{width: 55%;}

.mainNavi  .topic{font-size: 14px;}
.mainNavi  .topic em{font-size: 20px;}
.mainNavi .name h2{font-size: 23px;line-height: 1;}
.mainNavi .name h2 em{font-size: 20px;}

.mainNavi .more{margin-top: 17px;}
.mainNavi .more a{font-size: 16px;}

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

.category.c02{margin-top: 28%;}
.category.c03{margin-top: 28%;}
.separator{width: 90%;margin-top: 27%;height: 1px;}

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

.categoryHeader .title .catch h3{width: 37%;}

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


.styleTitle{width: 92%;margin-left: 8%;}
.styleTitle .icon{width: 9.3vw;}
.styleTitle .styleName{margin-top: 10vw;padding-bottom: 10px;}
.styleTitle .styleName h2.top01{font-size: 7.7vw;}
.styleTitle .styleName h2.top02{font-size: 7.5vw;padding-left: 0.2em;}
.styleTitle .styleName h2.low{font-size: 7.5vw;}
.styleTitle .styleName .line{width: 18vw;height: 18vw;}
.styleTitle .sideTag{font-size: 13px;}
.styleTitle .sideTag span{top: 0px;left: 150px;padding:8px 12px;}

.styleTitle .titleText,
.styleTitle.delighter .titleText{margin-top: 45px;}
.styleTitle .titleText h3{font-size: 20px;}
.styleTitle .titleText h3 br{display: block;}
.styleTitle .titleText p{margin-top: 1.5em;}



.style02 .styleImage .itemBox{max-width: 22em;margin-top: 6%;}
.style03 .styleImage .itemBox{max-width: 22em;margin-top: 6%;}

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

.stylingItems{margin-top: 26%;}
.stylingItems .stylingTitle h2{font-size: 7.8vw;}


.stylingItems .stylingTitle:after,
.stylingItems.delighter .stylingTitle:after{height: 17vw;}
.stylingItems.delighter.started .stylingTitle:after{bottom: -17vw;}
.stylingItems .stylingTitle.line2:after,
.stylingItems.delighter .stylingTitle.line2:after{height: 25vw;}
.stylingItems.delighter.started .stylingTitle.line2:after{bottom: -25vw;}

.stylingItems .stylingTitle:before,
.stylingItems.delighter .stylingTitle:before{top: -5vw;}


.stylingItems .stylingTitle.line2 br.res{display: block;}
.stylingItems .stylingTitle.line2 h2{line-height: 1.0;}
.stylingItems .stylingTitle.line2 h2{padding-bottom: 0.4em;}

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

.itemMain{width: 71%;}
.itemMain .visualBox{width: 95%;margin: 0 auto;}

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

.itemList{width: 71%;}
.itemList h3{font-size: 18px;}

.slick-prev,
.slick-next {width: 6.5vw;height: 9vw;margin-top: -4.5vw;}
.slick-prev{left:-7vw;}
.slick-next{right:-7vw;}
.slick-prev::after{width: 60%;}
.slick-next::after{width: 60%;}

.itemList02 dl{margin-top: 4px;}

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

.movieArea{margin: 11% auto 14%;}
.movieArea .thumb .playBT .play{width: 15%;}

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


.allBanner .photo{width: 55%;}
.allBanner .bannerInner{width: 45%;}
.allBanner .detail h2{line-height: 1.5;font-size: 3.0vw}
.allBanner .detail h2 br.res{display: block;}

.allBanner .photo span{padding-top: 78.5%;}
.c01 .allBanner .photo span{background-image: url("../../images/banner_c01sp.jpg");}
.c02 .allBanner .photo span{background-image: url("../../images/banner_c02sp.jpg");}
.c03 .allBanner .photo span{background-image: url("../../images/banner_c03sp.jpg");}

.allBanner .detail .line{padding-top: 33%;}
.allBanner .detail .line span{top: 12%;bottom: 22%;}
.allBanner .detail .line span:after{bottom: -2px;left: 3px;height: 10px;}
.allBanner .detail .more{width: 70%;}
.allBanner .detail .more a{font-size: 3.3vw;padding: 0.5em 0;}

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

.otherContents h2 span,
.otherContents h2.delighter span{font-size: 34px;}
.otherContents h3{font-size: 19px;}
.otherContents h4{font-size: 14px;margin-top: 0.5em;}
.otherContents .more a{font-size: 18px;}


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

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


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

.wrapper{padding-bottom: 20vw;}

.spBottomNavi{bottom: -21.2vw;}
.spBottomNavi ul li{height: 21vw;}
.spBottomNavi ul li a{height: 21vw;}

.spBottomNavi ul li:last-child img{width: 55%;}
.spBottomNavi ul li .text{top: 45%;width: 75%;}

.spBottomNavi ul li{width: 28%;}
.spBottomNavi ul li:last-child{width: 16%;}
.spBottomNavi ul li:last-child img{width: 73%;}
.spBottomNavi ul li .text{top: 45%;width: 80%;}


}






@media(max-width:440px) {


.lead .leadHeader{padding: 3% 0  2%;}
.lead .leadHeader h3{width: 57%;}

.lead .leadTitle{padding: 10px 0 26px;}
.lead .leadTitle  h2{font-size: 8.5vw;}
.lead .leadTitle .season span{font-size: 3.4vw;text-indent: -4px;}

.lead .leadBody{width: 97%;}
.lead .leadBody p,
.lead.delighter .leadBody p{font-size: 14px;letter-spacing: 0.02em;}

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

.mainNavi  .topic{font-size: 12px;}
.mainNavi  .topic em{font-size: 16px;padding-top: 0;}
.mainNavi .name{padding: 12px 0 12px;}
.mainNavi .name h2{font-size: 19px;line-height: 1;}
.mainNavi .name h2 em{font-size: 17px;}

.mainNavi .more{margin-top: 15px;}
.mainNavi .more a{font-size: 15px;padding: 7px 0 6px;}

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

.categoryHeader .title .topic{font-size: 3.1vw;}
.categoryHeader .title .topic em{font-size: 3.6vw;padding-top: 0;}

.categoryHeader .title h2{font-size: 6.1vw;letter-spacing: 0.05em;line-height:1.1;padding-bottom: 0.6em;}
.categoryHeader .title h2 em{font-size: 5.7vw;}
.c03 .categoryHeader .title h2{font-size: 6.1vw;}
.c03 .categoryHeader .title h2 em{font-size: 5.7vw;}

.categoryHeader .title .catch{padding-top: 10%;}
.c03 .categoryHeader .title .catch{padding-top: 8%;}
.categoryHeader .title .catch h3{width: 40%;}

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


.styleTitle .styleName h2.top01{font-size: 9.5vw;}
.styleTitle .styleName h2.top02{font-size: 8.7vw;padding-left: 0.2em;}
.styleTitle .styleName h2.low{font-size: 8.5vw;letter-spacing: 0.06em;}

.style03 .styleTitle .styleName h2.low{font-size: 8.2vw;}

.c03 .styleTitle .styleName h2.top01{font-size: 8.5vw;letter-spacing: 0.06em;text-indent: -0.1em;}
.c03 .styleTitle .styleName h2.top02{font-size: 7.9vw;padding-left: 0.1em;}
.c03 .styleTitle .styleName h2.low{font-size: 8.2vw;}

.styleTitle .styleName .line{width: 20vw;height: 20vw;}

.styleTitle .sideTag{font-size: 12px;}
.styleTitle .sideTag span{top: 0px;left: 145px;padding:6px 10px;}

.c03 .styleTitle .sideTag span{left: 135px;}



.styleTitle .titleText,
.styleTitle.delighter .titleText{margin-top: 40px;}
.styleTitle .titleText h3{font-size: 19px;}
.styleTitle .titleText p{font-size: 13px;line-height: 1.9;}


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

.stylingItems{margin-top: 27%;}
.stylingItems .stylingTitle h2{font-size: 8.5vw;letter-spacing: 0.06em;}




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


.itemMain .itemBox .text{font-size: 12px;margin: 15% auto 12%;}

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

.dots2line .slick-dots{bottom:-11%;}
.dots2line .slick-dots li{margin-top:1.8%;margin-bottom: 1.8%;}


.itemList .listIn.posLeft,
.itemList .listIn.posCenter,
.itemList .listIn.posRight{margin-top: 23%;}
.itemList .listIn02.posLeft,
.itemList .listIn02.posRight{margin-top: 23%;}


.itemList{width: 75%;margin-top: 0;}
.itemList h3{font-size: 18px;}
.itemList .itemImage{width: 96%;margin: 8px auto 0;}
.itemList .itemCopy{font-size: 12px;margin-top:15%;}
.style01 .itemList .posRight .itemCopy{margin-top: 19%;}

.itemList .spec{margin-top: 22px;padding: 13px 0;}
.itemList .spec h4{font-size: 15px;}
.itemList .spec .num{font-size: 11px;margin-top: 0.3em;}
.itemList .detail{width: 70px;}
.itemList .detail a{font-size: 16px;padding: 5px 0px;}


.itemList02 dl{margin-top: 5px;}
.itemList02 dl .name{font-size: 15px;}
.itemList02 dl .num{font-size: 11px;margin-top: 0.3em;}

.itemList02 dl dd{width: 70px;}
.itemList02 dl dd a{font-size: 16px;padding: 5px 0px;}


.itemList02 .otherTrigger{margin-top:12px;}
.itemList02 .otherTrigger p.more{font-size: 14px;margin-left: 40px;padding:5px 8px 4px 0;}
.itemList02 .otherTrigger p.close{font-size: 14px;left: 40px;padding:5px 8px 4px 0;}
.itemList02 .otherTrigger span{width: 30px;height: 22px;}
.itemList02 .otherTrigger span:after,
.itemList02 .otherTrigger span:before{width: 13px;}


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

.allBanner{width: 97%;margin-top: 27%;}

.allBanner .detail h2{font-size: 3.4vw;}
.allBanner .detail .more{width: 75%;}
.allBanner .detail .more a{font-size: 3.8vw;}
.allBanner .detail .line{padding-top: 35%;}
.c03 .allBanner .detail .line{padding-top: 30%;}

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

.otherContents h2{padding-bottom:16px;}
.otherContents h2 span,
.otherContents h2.delighter span{font-size: 32px;}

.otherContents .otherList{width: 92%;margin-top: 15%;}


.otherContents .otherList ul li:not(:first-child){margin-top: 12%;padding-top:12%;}

.otherContents h3{font-size: 17px;}
.otherContents h4{font-size: 12px;margin-top: 0.3em;}
.otherContents .more a{font-size: 16px;}

.otherContents .photo{margin-top: 14px;}


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

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

.footer .pagetop{width: 42px;bottom: 120px;}

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

.wrapper{padding-bottom: 22vw;}

.spBottomNavi{bottom: -23.2vw;}
.spBottomNavi ul li{height: 23vw;}
.spBottomNavi ul li a{height: 23vw;}

.spBottomNavi ul li{width: 27%;}
.spBottomNavi ul li:last-child{width: 19%;}

.spBottomNavi ul li:last-child img{width: 82%;}
.spBottomNavi ul li .text{top: 45%;width: 92%;}

}



@media(max-width:360px) {

.styleTitle .sideTag span{left: 135px;}
.c03 .styleTitle .sideTag span{left: 125px;}
.styleTitle .titleText h3{font-size: 18px;}


.itemList h3{font-size: 17px;}
.itemList .spec h4{font-size: 14px;}
.itemList .detail a{font-size: 15px;}
.itemList02 dl .name{font-size: 14px;}
.itemList02 dl dd a{font-size: 15px;}
.itemList02 .otherTrigger p.more{font-size: 13px;}
.itemList02 .otherTrigger p.close{font-size: 13px;}


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

}