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




@media(max-width:1200px) {

.cross{top: 30px;width: 36px;height: 36px;}
.hero .cross{top: calc(70px + 30px);}
.cross.Left{left: 30px;}
.cross.Right{right: 30px;}

.about  .element .bodytext{font-size: 1.1em;}
.benefit_item p{font-size: 1.1em;}
.zone .info .txt p{font-size: 1.1em;}
.features__list .info p{font-size: 1em;}
.features__list .spec .spec__list .item{font-size: 0.85em;}
.collection .item_list .item_spec{font-size: 1.1em;}
.footer{font-size: 1.1em;}

}




@media(max-width:1080px) {

.cross{top: 2.5em;width: 2.5em;height: 2.5em;}
.hero .cross{top: calc(58px + 2.5em);}
.cross.Left{left: 2.0em;}
.cross.Right{right: 2.0em;}
.reiser .cross.topLeft{top: -2.0em; left:-2.0em;}
.reiser .cross.topRight{top: -2.0em; right:-2.0em;}
.reiser .cross.bottomLeft{bottom: -2.0em;left:-2.0em;}
.reiser .cross.bottomRight{bottom: -2.0em; right:-2.0em;}

.areaTitle_set h2{font-size: 6.5em;}
.areaTitle_set h2 span{font-size: 1.6em;}


.hero .titleBox{width: 52%;}
.navi{font-size: 14px;}

.about .section__wrap{padding: 7em 0;}
.about .element .element__inner{width: 75%;}


.benefit{grid-template-columns: 45% 55%;}
.benefit .section__wrap .element{width: 78%;padding: 12em 0;}
.benefit_item h2 .num{font-size: 7.0em;}
.benefit_item.n03 h2 .num{font-size: 5.0em;}
.benefit_item.n04 h2 .num{font-size: 4.0em;}

.compartments .section__wrap{padding: 12em 0;}
.compartments .zone{width: 88%;}

.features .section__wrap .element{width: 88%;padding: 12em 0;}

.reiser .section__wrap{width: 86%;}
.reiser .itemInfo .name h2{font-size: 7.2em;}

.collection .section__wrap .element{width: 88%;padding: 12em 0 14em;}

.footer{font-size: 1.0em;}
.footer__inner{width:90%;}

}


@media(max-width:940px) {
html{font-size:1.3vw;}
.navi{font-size: 1.4vw;}




}






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






@media(max-width:768px) {

html{font-size: 2.3vw;}


.sp{display: block;}
.pc{display: none;}

br.res{display: none;}

/*----*/

.navi{padding:0 4%;font-size: 1.2em;height: 3.7em;}
.navi .logo{width: 2.8em;}
.navi nav{padding: 0px 0;}
.navi nav ul{display: none;}
.navi .buy{font-size: 0.7em;}
.navi .buy a{padding: 1em 1.4em;}

.navi .buy a .arrow{width: 0.7em;height: 0.7em;}
.navi .buy a .arrow::after{height: 1em;}

/*----*/

.hero{
	height: 205vw;
	max-height:none;
	background-image: url("../images/hero_sp.webp");
}

.hero .titleBox{
	font-size: 1.4em;
	top: 55%;
	right: 0;
	left: 0;
	width: 100%;
	padding:0;
	background: none;
}

.hero h1{font-size: 1.9em;}
.hero h2{font-size: 1.15em;}

.hero .topics{
	column-gap: 0;
	margin: 0.8em  auto 0;
	flex-wrap: wrap;
	width: 68%;
}
.hero .topics .to{
	width: 50%;
	font-size: 0.84em;
	margin-top: 1.5em;
}
.hero .topics em{font-size: 2.1em;}
.hero h3{margin-top: 103vw;}
.hero h3 em{font-size: 2.0em;}


/*----*/

.areaTitle_set h2{font-size: 4.9em;}
.areaTitle_set h3{font-size: 0.95em;}
.areaTitle_set h4{font-size: 1.8em;margin-top: 0.4em;line-height: 1.7;}


/*----*/


.cross{top: 0.6em;width: 1.9em;height:1.9em;}
.hero .cross{top: calc(4.5em + 0.6em);}
.cross.Left{left: 0.6em;}
.cross.Right{right:0.6em;}

.cross::before{top: 30%;}
.cross.Left::after{left: 30%;}
.cross.Right::after{right: 30%;}

.reiser .cross{display: none;}


/*----*/

.section__wrap.column{display: block;}


/*-----*/

.about .section__wrap{padding: 23vw 0 18vw;}
.about .element{width: 100%;display: block;}
.about .element .element__inner{width: 82%;margin: 0 auto;}

.about  .element h4.catch{font-size: 2.1em;line-height: 1.6;margin-top: 1.2em;}
.about  .element .bodytext{font-size: 1em;}

.about .visual{width: 100%;overflow:hidden;}
.about .visual figure{width: 100%;}

/*-----*/

.benefit{display: block;padding: 22vw 0;}


.benefit .sticky_content{position: relative;width: 82%;margin: 0 auto;}
.benefit .sticky_content .movie{aspect-ratio: 9 / 16;height: auto; margin-top: 10vw;}
.benefit .sticky_content .movie video{height: auto;aspect-ratio: 9 / 16;}


.benefit .section__wrap{display: block;}
.benefit .section__wrap .element{width: 82%;max-width: none;padding: 0;margin: 0 auto;}

.benefit_item{margin-top: 6.3em;}
.benefit_item p{font-size: 1em;}
.benefit_item .number{padding: 0 0.5em 1em;}

.benefit_item h2{font-size: 1.2em;margin-top: 1.2em;}
.benefit_item h2 .num{font-size: 5.5em;}
.benefit_item.n03 h2 .num{font-size: 4.0em;}
.benefit_item.n04 h2 .num{font-size: 4.0em;display: block;}
.benefit_item.n04 h2 .txt{margin-left: 0;}
.benefit_item h3{font-size: 1.5em;margin-top: 1.2em;line-height: 1.6;}
.benefit_item p{margin-top: 1.0em;}
.benefit_item figure{margin-top: 2.5em;}



/*-----*/

.compartments .section__wrap{padding: 22vw 0;}
.compartments .element{width: 90%;margin: 0 auto;}

.compartments .zone{width: 82%;}
.compartments .zone.n01{margin-top: 5em;}

.compartments .areaTitle_set h2{font-size: 2.85em;}
.compartments .areaTitle_set h2 span{font-size: 4.2em;display: block;}


.zone .visual.column{display: block;}
.zone .visual.column .main{width: 100%;}
.zone .visual.column .sub{width: 30%;}

.zone .info{margin-top: -1.0em;display: block;}
.zone .info .number{
	text-align: left;
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
}
.zone .info .number .num{font-size: 7.5em;line-height: 0.75;padding-right: 0.08em;}

.zone .info .txt{width:100%;padding: 0;margin-top: 1.8em;}
.zone .info .txt::before{display: none;}
.zone .info .txt h2{font-size: 1.6em;line-height: 1.5;}
.zone .info .txt p{margin-top: 1.0em;line-height: 1.8;font-size: 1em;}

.zone .sub.sp{width: 100%;margin-top: 2.2em;}
.zone .sub.sp.column{display: flex;justify-content: space-between;}
.zone .sub.sp.column div{width: 48%;}
.zone .sub.sp.column .note{line-height: 1.5;}
.zone .sub.sp.column .note::before{top: 0.8em;}

.compartments .plus{padding: 20vw 0 6.5vw;}
.compartments .plus span{width: 1.2em;height: 1.2em;}


/*----*/

.features .section__wrap .element{width: 82%;padding: 22vw 0;}

.features__list{margin-top: 4em;}
.features__list ul{display: block;border-right: none;}
.features__list ul li{
	width: 100%;
	border-bottom: 1px solid #7d858a;
	border-left: 1px solid #7d858a;
	border-right: 1px solid #7d858a;
	padding: 2.7em;
}
.features__list figure{margin-top: 1.2em;}
.features__list .info{margin-top: 1.3em;}
.features__list .info p{font-size: 0.86em;line-height: 1.9;}


.features__list .spec{display: block;padding-top: 3em;padding-bottom: 1.3em;}

.features__list .spec .spec__title h2{font-size: 1.4em;}
.features__list .spec .spec__title span{letter-spacing: 0.25em;}
.features__list .spec .spec__list{margin-top: 2.0em;}
.features__list .spec .spec__list .item{font-size: 0.78em;display: block;padding: 1.5em 0;line-height: 1.5;}
.features__list .spec .spec__list .item em{width:100%;display: block;}
.features__list .spec .spec__list .item span{text-align: left;display: block;width: 100%;margin-top: 0.5em;}


/*----*/


.reiser .section__wrap{width: 82%;padding: 22vw 0;}
.reiser .visual{width: 100%;}

.reiser .element{width: 100%;display: block;margin-top: 3.5em;}
.reiser .element .itemInfo{width: 100%;margin-left: 0;}

.reiser .itemInfo .name .shoulder{font-size: 1.15em;margin-bottom: 1em;}
.reiser .itemInfo .name h2{font-size: 4.8em;}
.reiser .itemInfo .name h3{font-size: 1.7em;}
.reiser .itemInfo .buy{margin-top: 2.5em;}


/*----*/


.collection .section__wrap .element{width: 100%;padding: 22vw 0 23vw;}
.collection .areaTitle_set{width: 82%;margin: 0 auto;}
.collection .areaTitle_set h2{font-size: 3.8em;padding-bottom: 0.2em;}

.collection br.res{display: block;}

.collection .item_list{width: 100%;margin-top: 3em;margin-left: 0;}

.productSlider {overflow: hidden;}
.productSwiper {width: 88%;}
.productSwiper .swiper-wrapper {align-items: flex-start;}
.productSwiper .swiper-slide{padding: 0 3vw;}

.sliderProgress {
	width: 82%;
	margin: 20vw auto 0;
	position: relative;
	height: 2px;
	background: #c7ced0;
	display: block;
}
/*
.sliderProgress span{
  display: block;
  width: 100%;
  height: 2px;
  background: #E60000;
  transition: width .3s ease;
}
*/

.sliderProgress span {
    display: block;
    width: 100%;
    height: 100%;
    background: #E60000;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s ease;
}

.collection .item_list .item_spec{font-size: 1em;}
.collection .item_list .item_spec .color{font-size: 0.79em;}








/*----*/

.footer{font-size: 15px;padding: 3.5em 0;}
.footer__inner{width: 88%;}
.footer .element .logo{width: 4.5em;}


}




@media(max-width:550px) {


html{font-size: 3.75vw;}

br.res{display: block;}

.navi{padding:0 4%;font-size: 15px;height: 55px;}
.navi .buy{font-size: 0.8em;}

.hero .titleBox{font-size: 1em;}
.hero .topics{width: 77%;}
.hero .cross{top: calc(55px + 0.6em);}

.about .section__wrap{padding: 26vw 0 20vw;}
.about .element .element__inner{width: 88%;}
.about .visual figure{width: 108%;margin-left: -4%;}


.benefit{padding: 26vw 0;}
.benefit .sticky_content{width: 88%;}
.benefit .section__wrap .element{width: 88%;}


.compartments .section__wrap{padding: 26vw 0;}
.compartments .element{width: 86%;}
.compartments .zone{width: 88%;}



.features .section__wrap .element{width: 88%;padding: 26vw 0;}
.features__list ul li{padding: 1.7em;}

.reiser .section__wrap{width: 88%;padding: 26vw 0;}



.collection .section__wrap .element{padding: 26vw 0 23vw;}
.collection .areaTitle_set{width: 88%;}
.collection .areaTitle_set h2{font-size: 2.6em;}

.productSwiper {width: 94%;}
.sliderProgress {width: 88%;}

}