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




@media(max-width:1200px) {

body{font-size: 13px;}

.topNav .menu .text p{font-size: 1em;}

.subTitle .number{width: auto;min-width: 53%;}
.subTitle .number em{padding-left: 0.6em;padding-right: 0.3em;}

.teemJarvi .teemDetail .teemCopy{width: 86%;}

.slick-dots{bottom:-2.7rem;}
.slick-dots li{width:1.7rem;margin: 0 0.6rem;}
.slick-dots li button{padding-top: 0.9rem;}



.slick-dots li.slick-active button:after{top: -3px;left: -3px;right: -3px;bottom: -3px;}
.allBanner .detail h2{font-size: 2.0em;}
.allBanner .more a{font-size: 1.7em;}

}



@media(max-width:980px) {

body{font-size: 1.3vw;}
#header .vegas::after{width: 3px;}

.slick-dots{bottom:-3em;}
.slick-dots li{width:1.5rem;margin: 0 0.5rem;}
.slick-dots li button{padding-top: 0.75rem;}


}







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



@media(max-width:768px) {

.pclink{pointer-events: none;}
.sideNavi{display: none;}
body{font-size: 15px;}
.screenWide{display: none;}


#loader-bg{height: 100svh;}




#header .titleBox .logo{top: 4vw;right: 2.2vw;width: 18%;}
#header .titleBox h1{right: 2.5vw;top: 37%;width: 48%;}


#header .vegas .vegasImage01{top: 59%;bottom: 0%;width:100%;}
#header .vegas .vegasImage02{top: 0;bottom: 41%;width:100%;}
#header .vegas::after{
	top: auto;
	bottom:calc(41% - 2px);
	left: 0;
	width: 0%;
	height: 4px;
	-webkit-transition: width 1.6s cubic-bezier(0.45, 0, 0.55, 1);
	transition: width 1.6s cubic-bezier(0.45, 0, 0.55, 1);
}

#header.start .vegas::after{bottom:calc(41% - 2px);width: 100%}




.lead{margin-top: 9vw;}
.lead .leadText{width:87%;margin: 0 auto;display: block;}
.lead .leadText h2{width: 32vw;margin: 0 auto;}
.lead .leadText h2 img{width: 100%;}
.lead .leadText .copy{
	width:100%;
	font-size: 1.14em;
	line-height: 1.9;
	margin-top: 2.5em;
	text-align: justify;
	text-justify: inter-ideograph;
}
.lead .sideText{display: none;}


/*-----*/

.topNav{width: 100%;margin: 8vw auto 0;}
.topNav::before,.topNav::after{display: none;}

.topNav .menuSet{width: 60%;display: block;}
.topNav .menuSet::before,.topNav .menuSet::after{display: none;}

.topNav .menuSet .menu{width: 100%;padding:10% 0;border-bottom: 1px solid #565654;}
.topNav .menuSet .menu.m03{border: none;}

.topNav.view .menuSet .menu{opacity: 0;}
.topNav .menuSet .menu.m01{-webkit-transition-delay:0s;transition-delay:0s;}
.topNav .menuSet .menu.m02{-webkit-transition-delay:0s;transition-delay:0s;}
.topNav .menuSet .menu.m03{-webkit-transition-delay:0s;transition-delay:0s;}

.topNav .menuSet .menu.view{opacity: 1;}

.topNav .menu a.photo{width: 74%;margin: 0 auto;}
.topNav .menu figure figcaption{font-size:2.9em;left: 0.4em;bottom: 0.8em;}
.topNav .menu .more{display: none;}
.topNav .menu .text{width: 90%;margin-top: 2em;}

.topNav .moreSP{
	font-family: "SequelSansBook";
	font-size: 1.4em;
	background: #484B44;
	padding: 0.5em 0 0.6em;
	display: block;
	line-height: 1;
	letter-spacing: 0.03em;
	width: 6em;
	margin: 1.5rem auto 0;
	text-align: center;
}
.topNav .moreSP a{color: #C2DA70;}

.topNav .sideTextSP{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 50;
	width:13%;
	display: block;
}
.topNav .sideTextSP span{
	display: block;
	position: relative;
	left: -100%;
	-webkit-transition: left 0.8s cubic-bezier(0.33, 1, 0.68, 1);
	transition: left 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.topNav.view .sideTextSP span{left: 0;}


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


.catergory{margin-top: 9vw;}

.cateHeader .imageSet{display: block;}
.cateHeader .imageSet .main{width: 100%;padding-top: 100%;}
.cateHeader .imageSet .sub{width: 100%;padding-top: 58%;}

.cateHeader .logo{left: 2%;top: 4%;width: 19vw;}

.cateHeader .cateTitle{
	left: 0;
	top: 0;
	width: 100%;
	padding-left: 0;
}
.ca01 .cateHeader .cateTitle{bottom: 0;left: 0;}
.ca02 .cateHeader .cateTitle{bottom: 0;left: 0;}
.ca03 .cateHeader .cateTitle{bottom: 0;left: 0;}
.cateHeader .cateTitle::after{display: none;}
.cateHeader .cateTitle h2{
	position: absolute;
	width: 14%;
	left: auto;
	right: 5%;
	opacity: 0;
	-webkit-transition: right 1.0s cubic-bezier(0.33, 1, 0.68, 1) 0.7s, opacity 1.0s 0.7s;
	transition: right 1.0s cubic-bezier(0.33, 1, 0.68, 1) 0.7s, opacity 1.0s 0.7s;
}

.ca01 .cateHeader .cateTitle h2{top: 7vw;}
.ca02 .cateHeader .cateTitle h2{top:auto;bottom: 5vw;}
.ca03 .cateHeader .cateTitle h2{top: 7vw;}

.cateHeader.view .cateTitle h2{opacity: 1;left: auto;right: 7%;}

.cateHeader .cateTitle h3{
	position: absolute;
	margin-top: 0;
	left: 10vw;
	padding: 4vw 0 5vw 5vw;
	opacity: 0;
	width: 64%;
	-webkit-transition: left 1.0s cubic-bezier(0.33, 1, 0.68, 1) 0.7s, opacity 1.0s 0.7s;
	transition: left 1.0s cubic-bezier(0.33, 1, 0.68, 1) 0.7s, opacity 1.0s 0.7s;
}
.cateHeader.view .cateTitle h3{left: 7vw;opacity: 1;}

.ca01 .cateHeader .cateTitle h3{bottom: 58vw;}
.ca02 .cateHeader .cateTitle h3{bottom: 10vw;}
.ca03 .cateHeader .cateTitle h3{bottom: 80vw;}

.cateHeader .cateTitle h3::after{
	content: '';
	position: absolute;
	z-index: 10;
	top: 0;
	bottom:0;
	left: 0;
	width: 4px;
}
.ca01 .cateHeader .cateTitle h3::after{background: #006AB7;}
.ca02 .cateHeader .cateTitle h3::after{background: #C2DA70;}
.ca03 .cateHeader .cateTitle h3::after{background: #3D5244;}



.ca01 .cateHeader .imageSet .main{background-image: url("../../images/ca01main_sp.webp");}
.ca01 .cateHeader .imageSet .sub{background-image: url("../../images/ca01sub_sp.webp");}
.ca02 .cateHeader .imageSet .main{background-image: url("../../images/ca02main_sp.webp");}
.ca02 .cateHeader .imageSet .sub{background-image: url("../../images/ca02sub_sp.webp");}
.ca03 .cateHeader .imageSet .main{background-image: url("../../images/ca03main_sp.webp");}
.ca03 .cateHeader .imageSet .sub{background-image: url("../../images/ca03sub_sp.webp");}


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

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

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

.feature{margin-top: 12vw;}
.feature.top{margin-top:9vw;}

.featureTitle{margin-bottom: 0;border-top: none;border-bottom: 9vw solid #FCFBF7;}
.featureTitle .featureTitleInner{width: 100%;display: block;}
.featureTitle .featureTitleInner::after{width: 2vw;}
.featureTitle .featureName{width: 100%;height: 52.2vw;display: block;}

.featureTitle .featureName .nameInner{margin:0 auto;width: 87%;position: relative;}

.featureTitle .featureName h2{width: 57%;padding-top: 3.2vw;}
.featureTitle .featureName h3{position: absolute;top: 4vw;right: 0;width:12.2vw;}

.f04 .featureTitle .featureName h3,
.f06 .featureTitle .featureName h3{width:19.6vw;}
.f08 .featureTitle .featureName h3,
.f09 .featureTitle .featureName h3{width:26.9vw;}

.f01 .featureTitle .featureName h3,
.f02 .featureTitle .featureName h3,
.f03 .featureTitle .featureName h3,
.f04 .featureTitle .featureName h3,
.f05 .featureTitle .featureName h3,
.f06 .featureTitle .featureName h3,
.f07 .featureTitle .featureName h3,
.f08 .featureTitle .featureName h3,
.f09 .featureTitle .featureName h3{margin-top: 0;}

.featureTitle .featureImageSet{width: 100%;}
.featureTitle .featureImageSet::before,
.featureTitle .featureImageSet::after{display: none;}

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

.pickup{width: 87%;margin: 9vw auto 0;}

.pickup .pickHeader h3{position: relative;top: 0;left: 0; -webkit-transform:none;transform:none;}

.pickup .pickHeader .pickTitle{margin-top: 8vw;}


.pickup .pickLead{width: 85%;margin: 2.5em auto 0;text-align: left;}
.pickup .pickLead br{display: none;}
.pickup .pickLead p{text-align: justify;text-justify: inter-ideograph;}
.pickup .pickContents{margin-top: 9vw;width: 92%;}

.pickup .pickContents .pickItemSet{display: block;text-align: left;}
.pick01 .pickContents .pickItemSet{width:90%;}
.pick02 .pickContents .pickItemSet{width:90%;}
.pick01 .pickContents .pickItemSet .pickItem{width:100%;}
.pick02 .pickContents .pickItemSet .pickItem{width: 100%;margin-bottom: 9vw;}
.pick02 .pickContents .pickItemSet .pickItem.last{margin-bottom: 0;}

.pickup .pickContents .pickItem h4{
	position: absolute;
	top: 0;
	left: -0.2em;
	text-align: left;
	font-size: 2.2em;
	padding: 0 1.4em 0.2em 0;
	transform-origin: left top;
	-webkit-transform:rotate(90deg);
	transform:rotate(90deg);
}

.pickup .pickContents figure{margin-top: 0;}

.pickup .pickContents .pickItemSet .and{width: 100%;display: block;padding: 2em 0;}
.pickup .pickContents .pickItemSet .and span{display: block;width: 4em;height: 4em;margin: 0 auto;}

.pickup .plus{width: 100%;margin-top: 9vw;}
.pickup .plus .plusInner{width: 100%;margin: 0 auto;display: block;}
.pickup .plus .plusInner .text{width: 100%;padding-left: 0;text-align: left;display: block;}
.pickup .plus h4{text-align: left;padding-left: 0;font-size: 2.2em;}
.pickup .plus .plusInner .text p{font-size: 1.14em;}
.pickup .plus .plusInner figure{width: 100%;margin-top: 3em;}


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

.subTitle{width: 80%;margin: 16vw auto 8vw;	align-items: flex-end;}

.subTitle h2 br{display: block;}

.subTitle .normal{padding-right: 0.5em;}

.subTitle .number{width: 100%;padding-left: 0;}
.subTitle .number em{padding-left: 0.5em;}

.subTitle h3{text-align: right;padding-left: 1em;padding-bottom: 0.4em; font-size: 1.5em;}
.subTitle h3 span{font-size: 0.8em;}
.subTitle h3 em.pc{display: none;}
.subTitle h3 em.sp{display:inline-block;top: 0;}
.subTitle h3 br.res{display: block;}

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

.itemMain{width: 100%;margin-top:8vw;display: block;}
.itemMain.m03,
.itemMain.m04,
.itemMain.m05,
.itemMain.m0601,
.itemMain.m07,
.itemMain.m08{margin-top:0;}
.itemMain.m0602{margin-top:12vw;}

.itemMain .visualBox{width: 100%;}

.itemMain .itemBox .itemSlide{overflow: visible;}
.slick-dots{bottom:-3.4em;}
.slick-dots li{width:2.5em;margin: 0 0.7em;}
.slick-dots li button{padding-top: 1.2em;}


.itemMain .itemBox{width:70%;margin: 9vw auto 0;}
.itemMain .itemBox .text{font-size: 1.05em;}

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

.itemList .detail a{padding: 0.1em 0;}
.itemList .otherTrigger{margin-top:1.2em;}

.style .itemList{width: 100%;}
/*--------*/

.styleList ul{display: block;}
.styleList ul li{width: 100%;margin-bottom: 7vw;}
.styleList ul li.noSpec{margin-bottom: 4vw;}
.styleList ul li:nth-child(3),
.styleList ul li:nth-child(4){margin-top:0;}

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

.teemJarvi{border: none; background: none; margin-top:10vw;}
.teemJarvi .teemInner{display: block;}

.teemJarvi .image{width: 100%;padding: 8vw 0 4.2vw;}
.teemJarvi .image figure{
	position:relative;
	width: 100%;
	height: 46vw;
	right: 0;
	left: 0;
	background-image: url("../../images/teemu_sp.webp");
}
.teemJarvi .teemDetail{width:92.5%;margin-left: 7.5%; background: none;}
.teemJarvi .teemDetail .teemTitle{width: 100%;padding: 2.3em 0 1.6em 0em;}

.teemJarvi .teemDetail .teemTitle h2{font-size: 2.5em;}
.teemJarvi .teemDetail .teemTitle h3{margin-top: 0.3em;}
.teemJarvi .teemDetail .teemTitle .logo{right: 7%;}
.teemJarvi .teemDetail .teemCopy{width: 92%;padding: 1.5em 0 1em 0em;line-height: 2.0;font-size: 1.05em;}



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


.allBanner{width: 100%;margin-top: 12vw;border-width: 1.0em;}
.allBanner .photo{padding-top: 76.8%;}

.allBanner .detail{height: 9em;width: 90%;}
.allBanner .detail h2{font-size: 1.8em;}
.allBanner .detail h2 br{display:block;}
.allBanner .more{right: 0%;}
.allBanner .more a{font-size: 1.8em;border: none;background: #C2DA70;}

.ca01 .allBanner .photo{background-image: url("../../images/all_ca01_sp.webp");}
.ca02 .allBanner .photo{background-image: url("../../images/all_ca02_sp.webp");}
.ca03 .allBanner .photo{background-image: url("../../images/all_ca03_sp.webp");}
.otherContents .allBanner .photo{background-image: url("../../images/all_other_sp.webp");}
/*--------*/

.otherContents{margin-top: 12vw;}

.otherContents .otherTitle{width: 80%;margin-top: 12vw;}
.otherContents .otherTitle h2{font-size: 2.8em;display: block;}
.otherContents .otherTitle h2::before,
.otherContents .otherTitle h2::after{height: 2px;}
.otherContents .otherList{width: 65%;margin-top: 9vw;}
.otherContents .otherList ul{display: block;}
.otherContents .otherList ul li{width: 100%;}
.otherContents .otherList ul li.ol02{margin-top: 9vw;}
.otherContents .otherList .image h4{bottom: 0.5em;left: 0.5em;font-size: 3.0em;}
.otherContents .otherList .text{font-size: 1.6em;padding: 0.5em 0 0.6em 1em;}


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

.sns{margin-top: 12vw;width: 90vw;}
.sns ul li{padding: 0.5em 0;border-width: 1px;}
.sns a{font-size: 1.5em;}

.lineBanner{width: 70vw;margin: 12vw auto;}


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

.footer{background-image: url("../../images/footer_sp.webp");background-position: top center;}
.footer h2{
	top: 16vw;
	width:40%;
	max-width:none;
	-webkit-transform:none;
	transform:none;
}
.footer .copyright{bottom: 7vw;font-size: 3.1vw;}
.footer .copyright br{display: block;}

.footer .pagetop{display: none;}

.spSpace{display: block;height: 13.5vw;}


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



.spBottomNavi{
	display: block;
	width: 100%;
	position: fixed;
	left: 0;
	bottom: -16.2vw;
	z-index: 600;
	-webkit-transition: all 0.7s cubic-bezier(0.25, 1, 0.5, 1);
	transition: all 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
.spBottomNavi.view{bottom: -1px;}
.spBottomNavi ul{
	width: 100%;
	display: flex;
}
.spBottomNavi ul li{
	width:26.5%;
	text-align: center;
	height: 16vw;
	position: relative;
	vertical-align: top;
}
.spBottomNavi ul li:last-child{
	width: 20.5%;
	background: #C2DA70;
	position: relative;
}
.spBottomNavi ul li:last-child img{
	width: 35%;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: 0 auto;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
.spBottomNavi ul li a{
	width: 100%;
	height: 16vw;
	position: relative;
	text-align: left;
	display: flex;
	align-items: flex-end;
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
}
/*
.spBottomNavi ul li.current a{color: #003559;}
*/
.spBottomNavi ul li.n01 a{background-image: url("../../images/spnavi01.webp");}
.spBottomNavi ul li.n02 a{background-image: url("../../images/spnavi02.webp");}
.spBottomNavi ul li.n03 a{background-image: url("../../images/spnavi03.webp");}
.spBottomNavi ul li.n04 a{background-image: url("../../images/spnavi04.webp");}

.spBottomNavi ul li a .text{
	color: #484B44;
	font-family: "Sequel100Black55";
	font-size: 3.5vw;
	padding: 0 0 0.5em 0.5em;
	line-height: 0.95;
}

}




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

.lead{margin-top: 10vw;}
.lead .leadText h2{width: 34vw;}
.lead .leadText .copy{line-height: 1.8;margin-top: 2.0em;}


.topNav .menuSet{width: 70%;}
.topNav .menuSet .menu{padding:10% 0 10%;}
.topNav .menu figure figcaption{font-size:2.2em;left: 0.3em;bottom: 0.6em;}
.topNav .menu .text{margin-top: 1.5em;}
.topNav .menu .text h3{font-size: 1.5em;}
.topNav .menu .text p{letter-spacing: 0em;margin-top: 0.5em;}
.topNav .moreSP{font-size: 1.3em;padding: 0.6em 0;}
.topNav .sideTextSP{width:15%;}

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

.catergory.ca02,
.catergory.ca03{margin-top: 18vw;}
.cateHeader .cateTitle h3::after{width: 3px;}

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

.feature{margin-top: 14vw;}

.featureTitle .featureName h3{width:12.8vw;}
.f04 .featureTitle .featureName h3,
.f06 .featureTitle .featureName h3{width:21.3vw;}
.f08 .featureTitle .featureName h3,
.f09 .featureTitle .featureName h3{width:28vw;}

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

.pickup .pickHeader h3{font-size: 1.15em;}
.pickup .pickHeader .pickTitle{margin-top: 7vw;}
.pickup .pickHeader .pickTitle h2{font-size: 2.2em;width: 70%;}
.pickup .pickLead{margin-top: 2em;line-height: 1.8;letter-spacing: 0.01em;}

.pickup .pickContents .pickItem h4{font-size: 1.7em;}
.pickup .pickContents .pickItemSet .and span{width: 3em;height: 3em;}

.pickup .plus h4{font-size: 1.7em;}
.pickup .plus .plusInner .text p{font-size: 1.0em;letter-spacing: 0;line-height: 1.7;margin-top: 1.2em;}
.pickup .plus .plusInner figure{margin-top: 2em;}

.pick02 .pickContents .pickItemSet .pickItem{margin-bottom: 7vw;}

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

.subTitle{width: 87%;margin: 18vw auto 8vw;padding-left: 2%;}
.f09 .subTitle.num01{margin-top: 9vw;}

.subTitle .normal{font-size: 2.3em;padding-right: 0.8em;}
.subTitle h3{padding-left: 1em;font-size: 1.2em;}

.subTitle .number{font-size: 2.3em;padding: 0.5em 0;}
.subTitle .number .num{font-size: 0.7em;width: 1.6em;height:1.6em;}
.subTitle .number em{padding-left: 0.3em;}


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


.itemMain .itemBox{width:85%;margin: 9vw auto 0;}

.itemMain .itemBox .itemSlide{width: 86%;margin: 0 auto;padding-bottom: 4.0em;}
.slick-prev,
.slick-next {width: 7vw;height: 7vw;margin-top: -3.5vw;}
.slick-prev{left:-9vw;}
.slick-next{right:-9vw;}

.slick-dots{bottom:-3.2em;}
.slick-dots li{width:6.8vw;margin: 0 0.7em;}
.slick-dots li button{padding-top: 3.2vw;}



.itemMain .itemBox .text{font-size: 1.0em;margin-bottom: 2.0em;}


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

.itemList .name{width: calc( 100% - 5.5em);font-size: 1.3em;}
.itemList .detail a{font-size: 1.3em;}

.itemList .otherTrigger span{width: 2.6em;height: 1.8em;}
.itemList .otherTrigger span:after,
.itemList .otherTrigger span:before{width: 1em;}
.itemList .otherTrigger p.more{margin-left: 3.2em;}
.itemList .otherTrigger p.close{left: 3.2em;}

.style .itemList{font-size: 0.9em;margin-top: 1.8em;}
.style .itemList dl{margin-top: 1.3em;}

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

.style{width: 87%;}
.styleList ul li{margin-bottom: 9vw;}

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

.teemJarvi .teemDetail{width:93.5%;margin-left: 6.5%;}
.teemJarvi .teemDetail .teemTitle{padding: 1.6em 0 1.0em 0;}
.teemJarvi .teemDetail .teemTitle h2{font-size: 2.0em;}
.teemJarvi .teemDetail .teemTitle h3{font-size: 1.3em;}
.teemJarvi .teemDetail .teemTitle .logo{width: 5.5em;}
.teemJarvi .teemDetail .teemCopy{width: 94%;padding: 1.0em 0 1.5em 0;line-height: 1.8;font-size: 1.1em;}
.teemJarvi .teemDetail .teemCopy br{display: none;}

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

.allBanner{border-width: 0.7em;margin-top: 16vw;}
.allBanner .detail{height: 6.5em;width: 88%;}
.allBanner .detail h2{font-size: 1.4em;}
.allBanner .more a{font-size: 1.3em;padding: 0.6em 0.7em 0.6em;}
.otherContents .allBanner .detail h2{font-size: 1.15em;}

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

.otherContents .otherTitle{width: 85%;margin-top: 16vw;}
.otherContents .otherTitle h2{font-size: 2.2em;padding: 0.6em 0;}
.otherContents .otherTitle h2::before,
.otherContents .otherTitle h2::after{height: 1px;}

.otherContents .otherList{width: 80%;}
.otherContents .otherList .image h4{font-size: 2.4em;}
.otherContents .otherList .text{font-size: 1.5em;}

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

.sns{margin-top: 16vw;width: 93vw;}
.sns ul li{padding: 0.2em 0;}
.sns a{font-size: 1.2em;}
.sns .icon{width: 1.7em;margin-top: 0.5em;}
.lineBanner{width: 73vw;margin: 12vw auto 15vw;}

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

.footer .copyright{bottom: 11vw;}

/*--------*/
.spBottomNavi{bottom: -20.2vw;}
.spBottomNavi ul li{height: 20vw;}
.spBottomNavi ul li a{height: 20vw;}
.spBottomNavi ul li:last-child img{width: 39%;}
.spBottomNavi ul li a .text{font-size: 4.1vw;}


}

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