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

@media(max-width:1080px) {

.lookSet .mainImage .number{font-size: 1.8em;}
/*----*/

.mainNavi{font-size: 14px;}
.mainNavi .naviBody{right: -32em;width: 32em;}

/*-----*/

.modal{font-size: 14px;}
.modal .itemBox figure{width: 30%;padding: 0.5em 0;}
.modal .itemBox .spec{width: 63%;}
}


@media(max-width:900px) {
html{font-size:13px;}

.mainNavi{font-size: 13px;}
.modal{font-size: 13px;}

}



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

@media(max-width:768px) {



.guide:before{left: 6.4%;}
.guide:after{right: 6.4%;}
.guide1:before{left: 16.6%;}
.guide1:after{right: 16.6%;}
.guide2:before{left: 50%;}



.screen{display: none;}



html{font-size:2.4vw;}


.header .title h1{
	top:50%;
	width: 51.7%;
	-webkit-transform:translateY(-68%);
	transform:translateY(-68%);

}
.header .title h2{
	bottom:auto;
	top: 50%;
	width: 46.8%;
	-webkit-transform:translateY(380%);
	transform:translateY(380%);
}

/*------*/

.topElement{font-size: 0.95em;}
.topElement .text01{width: 31%;}
.topElement .text02{width: 30%;}
.topElement .text03{width: 21%;}
.topElement .text03 span{display: inline-block;padding-left: 0.3em;}
.topElement .text04,
.topElement .text05{display: none;}
.topElement .counter{width: 18%;text-align: right;}
.topElement .looks{width: 18%;text-align: right;}


/*-----*/

.mainNaviTrigrer{right: 1.2em;bottom: 1.2em;width: 4.5em;height: 4.5em;}

.mainNavi{font-size: 1em;}
.mainNavi .naviBody{right: -100vw;width: 100vw;}
.mainNavi .close{right: 1em;top: 0.6em;width: 3.4em;height: 3.4em;}
.mainNavi h3{width: 11.5em;margin-top: 3.5em;}
.mainNavi h4{width: 9em;margin: 5em auto 2em;}
.mainNavi .naviList{width: 85%;}
.mainNavi .naviList li{width: 29%;}
.mainNavi .naviSingle{width: 60vw;}
 

/*------*/



.header{height: 100svh;}

.lead{padding-top: 3em;}
.lead .copy{width: 85%;}
.lead .menu h2{width: 4em;}
.lead .menu{width: 70%;margin-top: 4.5em;}

/*------*/
.bkBlue{padding-top:0;margin-top: 7em;}

.category.cateKIDS .categoryTitle{width:100%;}
.category.cateKIDSBABY .categoryTitle{top: 0em;right: 0.5em;width: 18em;}
.category.cateBABY .categoryTitle{width: 100%;}

.topElement.is-over {color: #FFF;}

/*------*/

.lookSet{padding: 6.5em 0;}
.lookSet.no01{padding-top: 3em;}
.lookSet.no06{padding-top: 5em;}
.lookSet.no07{padding-top: 0;}
/*.lookSet.no09{padding-bottom: 18em;}*/
.lookSet.no09{padding-bottom: 13em;}
.lookSet.no12{padding: 2em 0 3em;}
.lookSet.no14{padding-bottom: 10em;}


/*-----*/
.lookSet .mainImage{width: 100%;}
.lookSet.no03 .mainImage{width: 110%;margin-left: -5%;}
.lookSet.no04 .mainImage{display: none;}
.lookSet.no04 .horizontal-wrapper{
	position: relative;
	display: block;
	width: 100%;
}

.lookSet.no04 .horizontal {width: 130vw;position: relative;}
.lookSet.no04 .photo{width: 130vw;will-change: transform;}





.lookSet.no06 .mainImage{width: 100%;}
.lookSet.no07 .mainImage{width: 100%;}
.lookSet.no08 .mainImage{width: 100%;}
.lookSet.no10 .mainImage .photo{position: relative; width: 160%;left: -30%;}
.lookSet.no13 .mainImage .photo{position: relative; width: 108%;left: -8%;}






.lookSet .mainImage .number{font-size: 2em;}
.lookSet.no01 .mainImage .number{top: 1em;left: 1em;}
.lookSet.no03 .mainImage .number{left: 1.7em;}
.lookSet.no04 .horizontal-wrapper .number{top: -1.3em;right: 0.9em;}
.lookSet.no06 .mainImage .number{top: 11em;}
.lookSet.no07 .mainImage .number{top: 1.2em;left: 1em;color: #FFF;}
.lookSet.no09 .mainImage .number{top: 1.2em;left: 1em;}
.lookSet.no10 .mainImage .number{top: 4em;left: 1em;}
.lookSet.no11 .mainImage .number{top: 1.2em;left: 1em;}
.lookSet.no12 .mainImage .number{top: 1.5em;right: 1em;}
.lookSet.no13 .mainImage .number{top: -1.5em;left: 1em;}
.lookSet.no14 .mainImage .number{top: -1.6em;left: 1em;color: #93bdc6;}



/*------*/

.lookSet .subImage{width: 100%;margin-top: 4.3em;}
.lookSet .subImage.column{display: block;}

.lookSet.no01 .subImage .sub01{width: 66.6%;margin: 0 auto;}
.lookSet.no01 .subImage .sub02{width: 87.2%;margin: 4.3em auto 0;}
.lookSet.no02 .subImage .sub01{width: 100%;}
.lookSet.no03 .subImage .sub01{width: 100%;margin-top: 11em;}

.lookSet.no04 .subImage.column{width:100%;padding-bottom: 0;}
.lookSet.no04 .subImage .sub01{width:66.6%;margin: 6.8em auto;}
.lookSet.no04 .subImage .sub02{width:100%;margin:auto;}
.lookSet.no04 .subImage .sub04{width: 87.2%;}

.lookSet.no05 .subImage .sub01{width:52.8%;margin-left: 38%;}
.lookSet.no05 .subImage .sub02{width:77%;margin: 55vw 0 0 23%;}
.lookSet.no05 .subImage .sub03{width: 66%;top: 33%;left: 0.8%;}
.lookSet.no06 .subImage .sub01{width: 95%;margin-left: 0;}
.lookSet.no07 .subImage.pcImage{display: none;}
.lookSet.no07 .subImage .sub03{width: 100%;margin-top: 5.5em;}
.lookSet.no08 .subImage.pcImage{display: none;}
.lookSet.no08 .subImage .sub02{display: none;}
.lookSet.no08 .subImage .sub03{width: 88%;margin: 9em auto 0;}
.lookSet.no09 .subImage.farst{margin-top: 3em;}
.lookSet.no09 .subImage .sub01{width: 65%;margin-left: 7%;}
.lookSet.no09 .subImage.column{margin:3em 0 0 -58vw;display: flex;width: 183vw;}
.lookSet.no09 .subImage.leftIn{left: -130vw;}

.lookSet.no11 .subImage .sub01{width: 42.2%;margin:5.5em auto 0;}
.lookSet.no11 .subImage .sub02{width: 76.5%;margin:5.5em auto 0;}
.lookSet.no13 .subImage{display: flex;padding: 0;margin-top: 10em;}
.lookSet.no13 .subImage figure{width: 42%;}
.lookSet.no14 .subImage .sub01{width: 69%;margin-left:0;}
.lookSet.no14 .subImage .sub02{width: 71.2%;margin:4.3em 0 0 28.8%;}

.lookSet .subImage .attention{left: 1em;bottom: -2.3em;font-size: 0.8em;}


/*-----cross fade----*/

.lookSet .fade-wrap{
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 2 / 3;
	overflow: hidden;
}
.lookSet.no07 .fade-wrap{width: 72.5%;margin: 5em auto 0;}
.lookSet.no08 .fade-wrap{width: 72.5%;margin: 6em auto 0;}

.lookSet .fade-img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	-webkit-transition: opacity 0.8s;
	transition: opacity 0.8s;
}
.lookSet .fade-img.img1{opacity: 1;}
.lookSet .fade-img.active {opacity: 1;}

/*-------*/


.fish-rail{left: 20%;right: -0%;bottom: -17%;}
.fish-rail .fish{width: 32%;}
@keyframes fish-move{
  0%   { transform: translateX(0) scaleX(1); }
  49%  { transform: translateX(calc(-250%)) scaleX(1); }
  50%  { transform: translateX(calc(-250%)) scaleX(-1); }
  100% { transform: translateX(0) scaleX(-1); }
}
.lookSet.no05 .deco.d01{top: 14%;right:-40%;width: 42%;}
.lookSet.no05 .deco.d03{right: 8vw;width: 25vw;bottom: -3vw;}
@keyframes fish05 {
0% {transform: translateY(0%);}
20% {transform: translateY(-13vw);}
60% {transform: translateY(-13vw);}
80% {transform: translateY(0%);}
100% {transform: translateY(0%);}
}



.lookSet.no07 .deco{top: -10.5%;right:4%;width: 28%;}
.lookSet.no08 .deco.d01{bottom: -9%;left:9%;width: 24%;}
.lookSet.no08 .decoSet{top: -22%;right: 0;}
.lookSet.no08 .d02{top: 0;right:21%;width: 12.5%;}
.lookSet.no08 .d03{top: 1.0em;right:4%;width: 17.5%;}
.lookSet.no08 .d04{top: 6.2em;right:15%;width: 18%;}
.lookSet.no08 .d05{bottom: -7%;left:9%;width: 24%;}
.lookSet.no09 .deco{top: 13%;right:-3%;width: 27%;}
.lookSet.no10 .deco.d01{top: 28.5%;left:17%;width:15%;}
.lookSet.no10 .deco.d02{top: 34%;right:11%;width:16%;}
.lookSet.no11 .decoSet{width: 34%;margin: 5em auto 0;}
.lookSet.no13 .deco.d01{top:14%;right:15%;width:21%;}
.lookSet.no13 .deco.d02{bottom: -13%;right:10%;width:32%;}





/*-------*/


.lookSet .itemTrigger{margin-top: 4em;}


/*-------*/


.modal{
	width: 90%;
	font-size: 1em;
}
.modal .number{
	font-size: 0.9em;
}
.modal .gender{
	margin:0.5em auto 1.5em;
}
.modal .itemBox figure{
	width: 35%;
	padding: 0.6em 0;
}
.modal .itemBox .spec{width: 58%;}


.fancybox-content {
  border-radius: 1em;
  padding: 2.6em 0 1.5em;
}


.fancybox-close-small{
	width: 3.2em;
	height: 3.2em;
	right: -0.9em !important;
	top: -1.2em !important;
}








}










@media(max-width:540px) {

html{font-size:3.2vw;}
.lead .copy{font-size: 1.05em;}

.lead .menu{width: 80%;}






}