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

@media(max-width:1020px) {

html{font-size:1.15vw;}

.itemCredit{width: 90%;}
.itemCredit .allItems{font-size: 0.95em;}

}


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






@media(max-width:768px) {

html{font-size: 2.5vw;}

.hero{overflow: hidden;height: 100%;}
.hero .mainImage{display: block;}
.hero .mainImage .visual{width: 100%;height: 50%;}
.hero .mainImage .visual.v01 span{background-image: url("../images/main01sp.webp");}
.hero .mainImage .visual.v02 span{background-image: url("../images/main02sp.webp");}


.hero .title .mainTitle{
	position: absolute;
	top: 25%;
	left: 0;
	right: 0;
	width: 13em;
	margin: 0 auto;
	transform:translateY(-60%);
}
.start .lineBox rect{stroke-width:0.8;}

.hero .title h2{
	bottom: auto;
	top: calc(50% - 2.5em);
	font-size: 1.1em;
}
.scrollbar{bottom: -3.5em;height:7em;}
.scrollbar p{width: 0.8em;margin-left: 0.5em;}
.scrollbar .base{height:7em;}
.scrollbar .bar{height:7em;}


/*------*/


.imageBox.b02{margin-top: 20vw;}
.imageBox.b03{margin-top: 20vw;}
.imageBox.b04{margin-top: 20vw;}


.imageBox .column{width:100%;display: block;}



.imageBox .set01{width: 88%;margin-top: 19vw;}
.imageBox .set01 figure{width: 77%;}

.imageBox .set02{width: 100%;margin-top: -7vw;}
.imageBox .set02 .spec{width: 75%;margin: 0 auto;}

.imageBox .set03{width:100%;margin-top: 9vw; display: block;}
.imageBox .set03 figure{width: 84%;margin:0 0 0 16%;}
.imageBox .set03 .spec{width: 63%;margin-left:32%;bottom: 0;}

.imageBox .set04{width: 84%;margin: 0 0 0 6%;}
.imageBox .set04 .spec{width: 85%;margin: 0 auto;}

.imageBox .set05{width: 84%;margin: 9vw 0 0 16%;}
.imageBox .set05 .spec{width: 73%;margin-left: 24%;}

.imageBox .set06{width:84%;margin: 9vw 0 0;display: block;}
.imageBox .set06 figure{width: 100%;}
.imageBox .set06 .spec{width: 85%; margin: 0 0 0 15%;}

.imageBox .set07{display: block;margin-top: 9vw;}
.imageBox .set07 figure{width: 100%;}
.imageBox .set07 .spec{width: 55%;margin-left: 37%;}


.imageBox .set08{width: 84%;margin: 0 0 0 16%;}
.imageBox .set09{width: 84%;margin:5vw 0 0 5%;}


.imageBox .set095{width: 67.2%;margin: 5vw auto 0;display: block;}
.imageBox .set095 figure{width: 100%;margin: 0;}
.imageBox .set095 .spec{width: 100%;padding:0;}
.imageBox .set095 .spec a{line-height: 1.0;}
.imageBox .set095 .spec .name{margin-left: 0;}
.imageBox .set095 .spec .name br{display: none;}

.imageBox .set10 .img02{width: 67.2%;left: 0;margin:6vw 0 0 32.8%;}
.imageBox .set10 .img03{width: 100%;left: 0;margin-top: 7vw;}
.imageBox .set10 .imageColumn{width: 100%;margin-top:9vw;left: 0;display: block;}
.imageBox .set10 .imageColumn figure{width: 67.2%;margin: 0 auto;}
.imageBox .set10 .imageColumn figure.img05{margin: 5vw 0 0 32.8%;}
.imageBox .set10 .img06{width: 100%;left:0;margin-top: 5vw;}

.imageBox .set11{width: 84%;margin: 0 0 0 6%;}
.imageBox .set11 .spec{width: 85%;margin: 0 auto;}

.imageBox .set12{width: 84%;margin: 9vw 0 0 16%;}
.imageBox .set12 .spec{width: 65%;margin-left: 24%;}

.imageBox .set13{width: 84%;margin-top: 9vw;}
.imageBox .set13 figure{width: 100%;}
.imageBox .set13 .spec{width: 88%;margin-left: auto;margin-right: auto;}
.imageBox .set13 .spec a{line-height: 1.0;}
.imageBox .set13 .spec .name{margin-left: 0;}
.imageBox .set13 .spec .name br{display: none;}

.imageBox .set14{width: 100%;margin-top:6vw;}
.imageBox .set14 figure{width: 100%;margin-left: 0;}
.imageBox .set14 .spec{width: 94%;padding-right: 0;}

.imageBox .set15{width: 67.2%;margin-top:9vw;left: -1em;}

.imageBox .set16{width: 100%;margin-top: 9vw;}
.imageBox .set16 figure{width: 100%;}
.imageBox .set16 .spec{width: 60%;margin-left: 33%;}

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

/*------*/

.spec{margin-top: 1.5em;}
.spec .item{margin-top: 1em;}
.spec a{display:inline-block;}
.spec .category em{display: inline-block;}
.spec .category i{display: inline-block;padding-left: 0.4em;}
.spec .name{display: block;margin-top: 0.15em;}
.spec .price{display: none;}

/*------*/

.carousel.embla{margin-top:9vw;}
.embla__slide{flex:0 0 42vw;margin-right:3vw;}

/*------*/

.movie{margin-top: 20vw;}
.movie video{aspect-ratio:4 / 5;}

.movieClose{
    top:2.5vw;
    left:auto;
	right: 2.5vw;
    transform:translateX(0%);
	font-size: 1.0em;
}


.movie.mov02 .play{width: 5em;height:5em;}
.movie.mov02 .play a{font-size: 1.15em;}
.movie.mov02 .play a span{width: 1.05em;height: 1.2em;margin-top: 0em;}

/*------*/


.itemCredit{width: 100%;margin-top: 20vw;}

.itemCredit h2{font-size: 1.7em;}
.itemCredit h2::before,
.itemCredit h2::after{width: 70vw;}

.itemCredit .itemList{width: 78%;margin: 0 auto;display: block;}
.itemCredit .itemList .item{width: 100%;display: block;margin-top: 9vw;}
.itemCredit .itemList .item figure{width: 78%;margin: 0 auto;}
.itemCredit .itemList .item:nth-child(even) figure{margin: 0 auto;}


.itemCredit .itemList .item .itemSpec{width: 95%;margin:1.7em auto 0;}
.itemCredit .itemList .item .itemSpec li{width: 100%;margin-top: 1.2em;}

.itemCredit .itemList .item .type{
	width: 10.5em;
	display: flex;
	justify-content: space-between;
}
.itemCredit .itemList .item .type em{display: none;}
.itemCredit .itemList .item .type span{display: block;}

.itemCredit .itemList .item .info{width: 100%;}
.itemCredit .itemList .item .info .num{font-size: 1em;display: inline-block;}
.itemCredit .itemList .item .info .sp{display: inline-block;padding: 0 0.3em;}
.itemCredit .itemList .item .info .name{}

.itemCredit .itemList .item .price{
	position: absolute;
	right:0;
	top: 0;
	width: auto;
	font-size: 1.1em;
}
.itemCredit .itemList .price a{display: block;padding: 0.3em 1.1em 0.1em;}
.itemCredit .itemList .item .price span{display: none;}

.itemCredit .itemList .price a.soon{left: 0.8em;}



.itemCredit .allItems{margin-top: 16vw;}
.itemCredit .allItems h3{font-size: 1.6em;}
.itemCredit .allItems a{font-size: 1.8em;margin-top: 0.8em;}


/*------*/

.footer{
	width: 100%;
	margin-top: 20vw;
	height: 100vh;
	background-image: url("../images/footer02_sp.webp");
}
.footer h2{width: 8.5em;margin-top: 20vw;}
.footer .copyright{font-size: 1.2em;}

.footer .pageTop{font-size: 0.5em;right: 4%;top: 3em;}


/*------*/


.HHlogo{width: 3.5em;top: 0.8em;left: 0.5em;}
.HHlogo #logo .st{transition: fill 0.1s;}
.HHlogo .text{font-size: 0.76em;}



}



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


@media(max-width:550px) {
html{font-size: 3.3vw;}
}