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


@media(min-width:1700px) {
.categoryTitle{padding-top: 578px;}
}


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






@media(max-width:1200px) {

.categoryTitle{padding-top: 37%;}
.categoryTitle h2,
.categoryTitle.delighter h2{width: 23%;max-width: none;}

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

.categoryLead h3{width: 260px;}
.categoryLead .text{
	width: calc(100% - 260px);
	margin-left: 260px;
}

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

.subTitle h2,
.subTitle.delighter h2{width: 290px;}
.subTitle .text,
.subTitle.delighter .text{
	margin-left: calc(330px + 2.5%);
	width: calc(96% - 330px);
}

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

.itemMain .visualBox .single{width: 88%;margin-left: 11%;}

.itemMain .visualBox .double .farst{width: 88%;}
.itemMain .visualBox .double .second{width: 88%;margin-left: 12%;}
.itemMain.reverse .visualBox .double .second{margin-left: 12%;}

.itemMain .itemBox .inner{width: 71%;margin-left: 13%;}
.itemMain.reverse .itemBox .inner{margin-left: 16%;}


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

.recommend .recList{padding-top: 40px;}
.recommend .spec .name{width: calc(100% - 68px);}
.recommend .spec .name h3{font-size: 15px;}
.recommend .spec .name h4{font-size: 13px;}
.recommend .spec .buy{width: 65px;}
.recommend .spec .buy a{font-size: 15px;}


}




@media(max-width:1000px) {

#header h1.title{top: 12%;bottom: 12%;}
#header .inner{width: 68%;}

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


.lead{padding: 100px 0;}
.lead .inner h2,
.lead .inner.delighter h2{width: 450px;}
.lead .inner p,
.lead .inner.delighter p{margin-top: 2.5em;font-size: 15px;line-height: 2.2;}

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

.categoryTitle{padding-top: 40%;}
.categoryTitle h2,
.categoryTitle.delighter h2{width: 25%;}

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

.categoryLead,
.categoryLead.delighter{padding: 70px 0;}
.categoryLead h3{width: 240px;}
.categoryLead .text{width: calc(100% - 240px);margin-left: 240px;}
.categoryLead .text p{font-size: 15px;line-height: 2.0;width: 90%;margin-left: 10%;}

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

#outer,
.spaceArea{padding-top: 30px;margin-top: 80px;}

#knit,
#cutsewn,
#pants{padding-top: 30px;margin-top: 190px;}


.subTitle h2,
.subTitle.delighter h2{width: 260px;}
.subTitle .text,
.subTitle.delighter .text{margin-left: calc(300px + 1.5%);width: calc(97% - 300px);}
.subTitle.delighter.started h2{left: 1.5%;}
.subTitle .text p{
	font-size: 15px;
	line-height: 2.0;
	width: 92%;
	margin-left: 8%;
}

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

.itemMain.mgShort{margin-top: 110px;}
.itemMain.mgLong{margin-top: 180px;}


.itemMain .visualBox .single{width: 90%;margin-left: 9%;}
.itemMain .visualBox .double .farst{width: 90%;}
.itemMain .visualBox .double .second{width: 90%;margin-left: 10%;}
.itemMain.reverse .visualBox .double .second{margin-left: 10%;}

.itemMain .itemBox .inner{width: 74%;margin-left: 12%;}
.itemMain.reverse .itemBox .inner{margin-left: 12%;}

.itemMain .itemBox .text{margin-top: 55px;}
.itemMain .itemBox .text p{font-size: 13px;padding: 15px 0;}

.itemMain .itemBox .spec{margin-top: 20px;}

.itemMain .itemBox .spec .name{width: calc(100% - 75px);}
.itemMain .itemBox .spec .name h3{font-size: 15px;}
.itemMain .itemBox .spec .name h4{font-size: 13px;}
.itemMain .itemBox .spec .buy{width: 70px}
.itemMain .itemBox .spec .buy a{font-size: 15px;padding: 0.5em 0;}


.itemMain .itemBox .itemSlide .nameSvg{width: 14%;right: -5.5%;}


.itemMain .fabricInfo{margin-top: 25px;}
.itemMain .fabricInfo .icon{width: 90px;}
.itemMain .fabricInfo .fab_text{width: calc(100% - 105px);}
.itemMain .fabricInfo .fab_text br{display: none;}

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

.movieArea{margin-top: 90px;}
.movieArea.mgShort{margin-top: 35px;}

.movieArea .videoBox,
.movieArea.delighter .videoBox{width: 75%;}

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

.recommend h2 span,
.recommend h2.delighter span{width: 500px;}

.recommend .colorTips{padding: 20px 0;}
.recommend .spec .name{width:100%;text-align: center;}
.recommend .spec .buy{
	position: relative;
	top: 0;
	right: 0;
	width: 70px;
	margin: 10px auto 0;
	-webkit-transform:none;
	transform:none;
}

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

.allBanner .seemore a{font-size: 18px;}

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


.bottomLinks h2{padding-bottom: 30px;}
.bottomLinks h2 span,
.bottomLinks .delighter h2 span{width: 540px;}

.allContents{margin-top: 160px;	}
.allContents .allList .listLeft{width: 43%;margin-left: 1.5%;}
.allContents .allList .listRight{width: 43%;margin-right: 1.5%;}
.allContents .allList h3{width: 180px;}
.allContents .allList .seemore a{font-size: 16px;padding: 0.5em 0.5em;}


.otherContents{margin-top: 160px;}
.otherContents .otherList ul{width: 106%;}
.otherContents .otherList ul li{width: 27.33333%;margin-right:6%;}
.otherContents .otherList h3{width: 76%;}
.otherContents .otherList .image h4{width: 70%;}

.otherContents .otherList .seemore a{font-size: 16px;padding: 0.7em 1.0em;}
.otherContents .otherList .soon{font-size: 16px;padding: 0.6em 0.9em 0.7em;margin: 12px 0;}

.otherContents .otherList:before{left: 32.0%;height: calc(78% + 30px);}
.otherContents .otherList:after{left: 67.4%;height: calc(77% + 30px);}

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

.footer{margin-top: 220px;}
.footer .instagram{font-size: 17px;}
.footer .instagram .icon{width: 34px;}
.footer h2{width: 160px;margin-top: 100px;}
.footer .copyright{font-size: 13px;}
.footer .pagetop{width: 90px;}

}





@media(max-width:850px) {

#header .inner{width: 70%;}

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

.lead{padding: 80px 0;}
.lead .inner h2,
.lead .inner.delighter h2{width: 400px;}

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

.categoryTitle h2,
.categoryTitle.delighter h2{width: 28%;}

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

.categoryLead .inner,
.categoryLead.delighter .inner{width: 90%;}
.categoryLead h3{width: 220px;}
.categoryLead .text{width: calc(100% - 220px);margin-left: 220px;}

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

#knit,
#cutsewn,
#pants{padding-top: 30px;margin-top: 160px;}

.subTitle h2,
.subTitle.delighter h2{width: 230px;}
.subTitle .text,
.subTitle.delighter .text{margin-left: calc(250px + 1.5%);width: calc(97% - 250px);}

.subTitle .text p{font-size: 14px;}

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

.itemMain.mgShort{margin-top: 90px;}
.itemMain.mgLong{margin-top: 160px;}

.itemMain .itemBox .text p{font-size: 12px;}
.itemMain .itemBox .spec .name{width: calc(100% - 70px);}
.itemMain .itemBox .spec .name h3{font-size: 14px;}
.itemMain .itemBox .spec .name h4{font-size: 12px;}

.itemMain .itemBox .spec .buy{width: 65px}
.itemMain .itemBox .spec .buy a{font-size: 14px;}



.itemMain .fabricInfo{margin-top: 20px;}
.itemMain .fabricInfo .icon{width: 85px;}
.itemMain .fabricInfo .fab_text{width: calc(100% - 95px);font-size: 11px;line-height: 1.6;}

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

.movieArea{margin-top: 90px;}
.movieArea.mgShort{margin-top: 40px;}


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

.recommend h2 span,
.recommend h2.delighter span{width: 450px;}

.recommend .spec .name h3{font-size: 14px;}
.recommend .spec .name h4{font-size: 12px;}
.recommend .spec .buy a{font-size: 14px;}

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

.allBanner .seemore a{font-size: 17px;}

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

.bottomLinks h2 span,
.bottomLinks .delighter h2 span{width: 520px;}
.allContents .allList h3{width: 160px;}

.otherContents .otherList .seemore a{font-size: 15px;}
.otherContents .otherList .soon{font-size: 15px;}


}




@media(max-width:768px) {


.wrapper{padding-bottom: 30px;}



.pclink{pointer-events: none;}
.itemSlick a.pclink{pointer-events: none; display: block;}



#header h1.title{
	top: 50%;
	bottom:auto;
	width: 85%;
	margin: -2.0% auto 0;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
#header h1.title img{height: auto;width: 100%;}

#header h1.title .pcview{display: none;}
#header h1.title .spview{display: block;}

#header .mountain{
	width: 100%;
	height: 50%;
	top: 0;
	left: 0;
	margin-left: -100%;
	background-image:url("../../images/main_mountain_sp.jpg");
	-webkit-transition: all 1.5s cubic-bezier(0.76, 0, 0.24, 1) 1.3s;
	transition: all 1.5s cubic-bezier(0.76, 0, 0.24, 1) 1.3s;
}
#header.start .mountain{margin-left: 0%;}
#header .space{
	width: 100%;
	height: 50%;
	top: 50%;
	right: 0;
	margin-right: -100%;
	background-image:url("../../images/main_space_sp.jpg");
	-webkit-transition: all 1.5s cubic-bezier(0.76, 0, 0.24, 1) 1.3s;
	transition: all 1.5s cubic-bezier(0.76, 0, 0.24, 1) 1.3s;
}
#header.start .space{top: 50%; margin-right: 0%;}
#header .inner{
	top: 50%;
	left: 5%;
	right:auto;
	width: 100%;
	-webkit-transition: opacity 1.8s cubic-bezier(0.25, 1, 0.5, 1) 2.5s, left 1.8s cubic-bezier(0.25, 1, 0.5, 1) 2.5s;
	transition: opacity 1.8s cubic-bezier(0.25, 1, 0.5, 1) 2.5s, left 1.8s cubic-bezier(0.25, 1, 0.5, 1) 2.5s;
}
#header.start .inner{opacity: 1;top: 50%;left: 0;}

#header .bkMountain{width: 100%;height: 0%;top: 0;left: 0;bottom:auto;}
#header .bkSpace{width: 100%;height: 0%;top: auto;right: 0;bottom: 0;}
#header.start .bkMountain{height: 50%;}
#header.start .bkSpace{height: 50%;}

#header .categoryImage{width: 45%;padding: 2% 0;}
#header .spBox{
	position: absolute;
	width: 55%;
	top: 50%;
	left: 45%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
#header h2{
	width: 60%;
	margin: 0 auto 7%;	
}
#header .seemore{width:auto;}
#header .seemore a{
	width:auto;
	display:inline-block;
	font-size: 2.2vw;
	padding: 0.7em 0.7em;
}


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

.naviChange{display: none;}

.hamburger{
	width: 40px;
	height: 31px;
	top: 20px;
	left: auto;
	right: 20px;
}

.hamburger-trigger.active span:nth-of-type(1) {background: #5B4926;}
.hamburger-trigger.active span:nth-of-type(3) {background: #5B4926;}

.navi{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: -1;
	opacity: 0;
	color: #5B4926;
	line-height: 1.0;
	letter-spacing: 0.05em;
	background:#E0DCCB;
	-webkit-transition: all 0.8s;
	transition: all 0.8s;
}
.navi.active{
	z-index: 99;
	opacity: 1;
	left: 0;
	color: #5B4926;
}
.navi.coloring{color: #5B4926;}
.navi.active a{color: #5B4926;}
.navi.active h3{color: #5B4926;}

.navi .inner{
	margin: 0 auto;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-transform:scale(1.2,1.2);
	transform:scale(1.2,1.2);
	-webkit-transition: all 1.0s;
	transition: all 1.0s;
}
.navi.active .inner{
	-webkit-transform:scale(1.0,1.0);
	transform:scale(1.0,1.0);
}

.navi ul{
	width:auto;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0 auto;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}
.navi ul li{margin-bottom: 32px;text-align: left;}
.navi ul li:last-child{margin-bottom: 0px;}

.navi h3{font-size: 28px;position: relative;padding: 0 1.3em 0 0.5em;}
.navi p{margin-top: 22px;padding-left: 1.2em;}
.navi p a{font-size: 22px;}

.navi h3:after{
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 3px;
	height: 1px;
	background: #5B4926;
}



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

.lead{padding: 6% 0;}
.lead .inner{width: 85%;padding: 7% 0 5%;}
.lead .inner:before,.lead .inner.delighter:before,
.lead .inner:after,.lead .inner.delighter:after{width: 1px;}
.lead .inner:before{left: -30px;}
.lead .inner:after{right: -30px;}

.lead .inner h2,
.lead .inner.delighter h2{width: 440px;}
.lead .inner p,
.lead .inner.delighter p{margin-top: 8%;font-size: 16px;line-height: 2.2;}

.lead .spLogo{
	display: block;
	position: absolute;
	top:11%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 63%;
	opacity: 0.2;
	z-index: 2;
}

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

.categoryTitle{padding-top: 58%;}

.categoryTitle.mou{background-image:url("../../images/categorybk_mou_sp.jpg");}
.categoryTitle.spa{background-image:url("../../images/categorybk_spa_sp.jpg");margin-top: 30%;}

.categoryTitle h2,
.categoryTitle.delighter h2{width: 34%;}


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


.categoryLead,
.categoryLead.delighter{padding: 8% 0;}
.categoryLead .inner,
.categoryLead.delighter .inner{width: 87%;}

.categoryLead h3{display: none;}
.categoryLead .text{width: 100%;margin-left: 0%;}
.categoryLead .text p{width:90%;margin:0 auto;font-size: 15px;line-height: 2.0;padding: 1.8em 0;}


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


#outer,
.spaceArea{padding-top: 10%;margin-top: 5%;}
#knit,
#cutsewn,
#pants{padding-top: 10%;margin-top: 10%;}


.subTitle:before,
.subTitle.delighter:before,
.subTitle:after,
.subTitle.delighter:after{display: none;}

.subTitle .spLine{
	width: 100%;
	position: relative;
}
.subTitle .spLine:before,
.subTitle.delighter .spLine:before,
.subTitle .spLine:after,
.subTitle.delighter .spLine:after{
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 0%;
	height: 1px;
	background: #294634;
	-webkit-transition: width 1.5s cubic-bezier(0.76, 0, 0.24, 1);
	transition: width 1.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.subTitle .spLine:before{top: 0;}
.subTitle .spLine:after{bottom: 0;}
.subTitle.delighter.started .spLine:before,
.subTitle.delighter.started .spLine:after{width: 100%;}

.subTitle h2,
.subTitle.delighter h2{
	position:relative;
	top: 0%;
	left: -1%;
	padding: 2.5% 0;
	width: 85%;
	border-right: 1px solid #294634;
	-webkit-transform:none;
	transform:none;
}
.subTitle.delighter.started h2{left: 2.0%;opacity: 1;}
.subTitle h2 img{width: 240px;}


.subTitle .text,
.subTitle.delighter .text{
	margin:30px auto 0;
	width: 95%;
	border-left:none;
	right: 0;
	left:0;
	top: 30px;
}
.subTitle.delighter.started .text{right:0;top: 0; opacity: 1;}

.subTitle .text p{
	font-size: 15px;
	line-height: 2.0;
	width: 100%;
	margin-left: 0%;
	padding: 0;
}

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


.itemMain.mgShort{margin-top: 10%;}
.itemMain.mgLong{margin-top: 18%;}

.itemMain .visualBox .single{width: 95%;margin-left: 5%;}

.itemMain .itemBox .inner{width: 80%;margin-left: 10%;}
.itemMain.reverse .itemBox .inner{margin-left: 6%;}

.itemMain .itemBox .spec .buy a{color: #FFF;background: #597063;border: none;}
.spaceArea .itemMain .itemBox .spec .buy a{color: #FFF;background: #59707C;border: none;}



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

.set01plus{width: 92%;margin-top: 13%;}
.set01plus p{width: 58%;margin-left: 42%;}

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

.movieArea{margin-top: 15%;padding-bottom: 10%;}
.movieArea.mgShort{margin-top: 10%;}
.movieArea .bk,
.movieArea.delighter .bk{height: 30vw;}
.movieArea .videoBox,
.movieArea.delighter .videoBox{width:85%}

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


.recommend{margin-top: 15%;}
.recommend h2 span,
.recommend h2.delighter span{width: 400px;}


.recommend .recList{width: 90%;margin: 0 auto;padding-top: 2%;}
.recommend .recList ul{width: 108%;text-align: left;}
.recommend .recList ul li{width: 42%;margin-right: 8%;margin-top: 10%;text-align: center;}


.recommend .spec .buy a{color: #FFF;background: #597063;border: none;}
.spaceArea .recommend .spec .buy a{color: #FFF;background: #59707C;border: none;}

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


.allBanner{margin-top: 18%;}
.allBanner .seemore a{font-size: 16px;}

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


.bottomLinks h2 span,
.bottomLinks .delighter h2 span{width: 480px;}

.allContents{margin-top: 20%;}
.allContents .allList,
.allContents.delighter .allList{padding: 40px 0;}
.allContents .allList h3{width: 140px;}
.allContents .allList .seemore a{font-size: 15px;}


.otherContents{margin-top: 20%;}
.otherContents .otherList .seemore a{font-size: 14px;}
.otherContents .otherList .soon{font-size: 14px;}

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

.footer{margin-top: 18%;}

}






@media(max-width:700px) {

.screenWide{display: none;}

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

#header h2{width: 72%;}
#header .seemore a{font-size: 2.4vw;}


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

.lead{padding: 7% 0;}
.lead .inner{width: 88%;padding: 7% 0 5%;}
.lead .inner h2,
.lead .inner.delighter h2{width: 400px;}
.lead .inner p,
.lead .inner.delighter p{font-size: 15px;}

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

.categoryTitle h2,
.categoryTitle.delighter h2{width: 36%;}

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

.categoryLead .inner,
.categoryLead.delighter .inner{width: 90%;}
.categoryLead .text p{width:95%;font-size: 14px;}

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


#outer,
.spaceArea{padding-top: 10%;margin-top: 7%;}
#knit,
#cutsewn,
#pants{padding-top: 10%;margin-top: 15%;}


.subTitle h2,
.subTitle.delighter h2{padding: 3% 0;}
.subTitle .text,
.subTitle.delighter .text{margin-top:25px;}
.subTitle .text p{font-size: 14px;}

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

.itemMain.mgShort{margin-top: 14%;}
.itemMain.mgLong{margin-top: 24%;}


.itemMain .visualBox,
.itemMain.delighter .visualBox{
	width: 100%;
	float: none;
}

.itemMain .itemBox,
.itemMain.delighter .itemBox{
	width: 100%;
	float: none;
	margin-top: 10%;
}

.itemMain.reverse .visualBox{float: none;}
.itemMain.reverse .itemBox{float: none;}


.itemMain .visualBox .single{width: 80%;margin: 0 auto;}
.itemMain.reverse .visualBox .single{margin: 0 auto;}

.itemMain .visualBox .double{width: 90%;margin: 0 auto;}
.itemMain .visualBox .double .farst{width: 85%;}
.itemMain .visualBox .double .second{width: 85%;margin-top: 3%;margin-left: 15%;}
.itemMain.reverse .visualBox .double .second{margin-left: 15%;}

.itemMain.reverse.set04 .visualBox .double .farst{margin-left: 15%;}
.itemMain.reverse.set04 .visualBox .double .second{margin-left: 0%;}


.itemMain .itemBox .inner{width:80%;margin: 0 auto;}
.itemMain.reverse .itemBox .inner{margin:0 auto;}

.itemMain .itemBox .itemSlide{width: 83%;margin: 0 auto;}

.itemMain .itemBox .itemSlide .nameSvg{width: 12%;right: -4.95%;}
.itemMain .itemBox .itemSlide .cordura{width: 19%;top: 2%;left: 2%;}

.itemMain .itemBox .text p{font-size: 14px;line-height: 1.8;padding: 1.5em 0;}

.itemMain .itemBox .spec .name{width: calc(100% - 85px);}
.itemMain .itemBox .spec .name h3{font-size: 16px;}
.itemMain .itemBox .spec .name h3 span{font-size: 12px;}
.itemMain .itemBox .spec .name h4{font-size: 14px;margin-top: 0.2em;}

.itemMain .itemBox .spec .buy{width: 78px;}
.itemMain .itemBox .spec .buy a{font-size: 16px;}



.itemMain .fabricInfo{margin-top: 35px;}
.itemMain .fabricInfo .icon{width: 100px;}
.itemMain .fabricInfo .fab_text{width: calc(100% - 115px);font-size: 13px;line-height: 1.6;}
.itemMain .fabricInfo.pcView{display: none;}
.itemMain .fabricInfo.spView{display: block;}


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

.set01plus{width: 100%;margin-top: 15%;}
.set01plus p{width: 70%;margin-left: 30%;}

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

.movieArea{margin-top: 18%;}
.movieArea.mgShort{margin-top: 18%;}
.movieArea .bk,
.movieArea.delighter .bk{height: 35vw;}
.movieArea .videoBox,
.movieArea.delighter .videoBox{width:90%}

/*.movieArea .playButton p{width:70px;height:70px;}*/
.thumb .playBT .play{
    width: 76px;
    height: 76px;
    margin-top: -38px;
    padding:17px;
}


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

.recommend{margin-top: 17%;}
.recommend .recList{width: 100%;}
.recommend .recList ul{width: 105%;}
.recommend .recList ul li{width: 45%;margin-right: 5%;}

.recommend .colorTips{padding: 15px 0;}


.recommend .spec .name h3{font-size: 15px;}
.recommend .spec .name h4{font-size: 13px;}
.recommend .spec .buy{margin-top: 8px;}
.recommend .spec .buy a{font-size: 15px;}


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

.allBanner{margin-top: 18%;padding: 3% 0;}
.allBanner .inner{width: 85%;}

.allBanner .inner .linkBox h4{width: 60%;margin-left: 3.5%;}

.allBanner .seemore{left: 70%;}
.allBanner .seemore a{font-size: 2.6vw;border: none;}

.allBanner .seemore a{color: #FFF;background: rgba(41,70,52,0.8);}
.spaceArea .allBanner .seemore a{color: #FFF;background: rgba(0,38,58,0.8);}


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

.bottomLinks h2 span,
.bottomLinks .delighter h2 span{width: 400px;}

.allContents{margin-top: 24%;}

.allContents .allList .listLeft{width: 85%;float: none;margin: 0 auto;}
.allContents .allList .listRight{width: 85%;margin: 0 auto;float: none;}
.allContents .allList ul li{margin-top: 18px;}
.allContents .allList ul li:first-child{margin-top: 0;}
.allContents .allList .listRight ul li:first-child{margin-top: 18px;}

.allContents .allList h3{width: 160px;}
.allContents .allList .seemore a{font-size: 16px;}

.allContents .allList .seemore a{border: none;color: #FFF;background: rgba(41,70,52,0.7);}
.allContents .allList .space .seemore a{color: #FFF;background: rgba(0,38,58,0.7);}

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

.otherContents{margin-top: 24%;}

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

.otherContents .otherList,
.otherContents.delighter .otherList{margin-top:0px;border: none;}

.otherContents .otherList ul{width: 66%;margin: 0 auto;}
.otherContents .otherList ul li{
	width: 100%;
	margin: 12% 0 0;
	display: block;
	padding: 0 9%;
	border-bottom: 1px solid #294634;
}
.otherContents .otherList h3{width: 70%;}

.otherContents .otherList .image{margin-top: 10%;}
.otherContents .otherList .other01 .image{margin-top: 2%;}

.otherContents .otherList .seemore{margin: 8% 0 12%;}
.otherContents .otherList .seemore a{border: none;color: #FFF;background: rgba(41,70,52,0.7);}
.otherContents .otherList .soon{margin: 8% 0 12%;border: none;color: #FFF;background: rgba(41,70,52,0.7);}


.otherContents .otherList .seemore a{font-size: 15px;}
.otherContents .otherList .soon{font-size: 15px;}


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

.footer{margin-top: 30%;padding: 90px 0 30px;}
.footer .instagram{font-size: 17px;}
.footer .instagram .icon{width: 34px;}
.footer h2{width: 150px;margin-top: 90px;}
.footer .copyright{font-size: 12px;}
.footer .pagetop{width: 80px;right: -10px;}


}





@media(max-width:550px) {

#header h1.title{width: 90%;margin-top: -2.2%;}

#header .categoryImage{width: 55%;padding: 1.5% 0;}
#header .spBox{width: 45%;left: 55%;}

#header h2{width: 83%;margin-bottom: 10%;}
#header .seemore a{font-size: 2.7vw;padding: 0.6em 0.7em;}

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

.lead .inner{width: 88%;padding: 10% 0 7%;}
.lead .inner h2,
.lead .inner.delighter h2{width: 340px;}
.lead .inner p,
.lead .inner.delighter p{margin-top: 8%;font-size: 14px;line-height: 2.0;text-align: left;}
.lead .spLogo{top:12.5%;width: 65%;}

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

.categoryTitle{padding-top: 60%;}
.categoryTitle h2,
.categoryTitle.delighter h2{width: 40%;}

.categoryTitle.spa{margin-top: 35%;}
/*---------------------------------------*/

.categoryLead .text p{width:93%;font-size: 13px;line-height: 1.9;}

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

#outer,
.spaceArea{margin-top: 11%;}
#knit,
#cutsewn,
#pants{margin-top: 20%;}

.subTitle h2,
.subTitle.delighter h2{padding: 4% 0;}
.subTitle h2 img{width: 210px;}

.subTitle .text,
.subTitle.delighter .text{width: 90%;}
.subTitle .text p{font-size: 13px;line-height: 1.9;}

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

.itemMain.mgShort{margin-top: 16%;}
.itemMain.mgLong{margin-top: 27%;}

.itemMain .itemBox,
.itemMain.delighter .itemBox{margin-top: 13%;}

.itemMain .visualBox .single{width: 75%;}
.itemMain .visualBox .double{width: 88%;}

.itemMain .itemBox .text p{font-size: 13px;padding: 1.5em 0;}

.itemMain .itemBox .spec{margin-top: 15px;}
.itemMain .itemBox .spec .name{width: calc(100% - 80px);}
.itemMain .itemBox .spec .name h3{font-size: 15px;}
.itemMain .itemBox .spec .name h3 span{font-size: 12px;}
.itemMain .itemBox .spec .name h4{font-size: 13px;margin-top: 0.2em;}
.itemMain .itemBox .spec .buy{width: 75px;}
.itemMain .itemBox .spec .buy a{font-size: 15px;}

.itemMain .itemBox .itemSlide .nameSvg{width: 13%;right: -5.1%;}


.itemMain .fabricInfo{margin-top: 35px;}
.itemMain .fabricInfo .icon{width: 100px;float: none;}
.itemMain .fabricInfo .fab_text{width:100%;float: none;margin-top: 10px;}




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

.set01plus{width: 100%;margin-top: 18%;}
.set01plus p{width: 80%;margin-left: 20%;}

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

.movieArea{margin-top: 20%;}
.movieArea.mgShort{margin-top: 20%;}
/*
.movieArea .playButton p{width:60px;height:60px;}
.movieArea .playButton p:after{
    border-left: 20px solid #FFF;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
}*/
.thumb .playBT .play{
    width: 66px;
    height: 66px;
    margin-top: -33px;
    padding:17px;
}


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

.recommend{margin-top: 19%;}
.recommend h2 span,
.recommend h2.delighter span{width: 85%;}

.recommend .recList{width: 90%}
.recommend .recList ul{width: 100%;}
.recommend .recList ul li{width: 100%;margin: 17% 0 0;}
.recommend .recImage{width: 82%;margin: 0 auto;}

.recommend .colorTips{padding: 20px 0;}



.recommend .spec .name{width: calc(100% - 80px);text-align: left;}
.recommend .spec .name h3{font-size: 15px;}
.recommend .spec .name h3 span{font-size: 12px;}
.recommend .spec .name h4{font-size: 13px;}

.recommend .spec .buy{
	position: absolute;
	top: 50%;
	right: 0;
	z-index: 5;
	width: 75px;
	margin: 0;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
.recommend .spec .buy a{font-size: 15px;padding: 0.5em 0;}


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


.allBanner{margin-top: 23%;}
.allBanner .inner{width: 88%;}

.allBanner .inner .linkBox{padding: 6% 0;}
.allBanner .inner .linkBox h4{width: 65%;margin-left: 3.5%;}

.allBanner .seemore{left: 68%;}
.allBanner .seemore a{font-size: 3.0vw;padding: 0.7em 0.8em;}


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


.bottomLinks h2{padding-bottom: 22px;}
.bottomLinks h2 span,
.bottomLinks .delighter h2 span{width: 340px;}

.allContents .allList ul li{margin-top: 16px;}
.allContents .allList ul li:first-child{margin-top: 0;}
.allContents .allList .listRight ul li:first-child{margin-top: 16px;}
.allContents .allList h3{width: 140px;}
.allContents .allList .seemore a{font-size: 15px;}


.otherContents{margin-top: 30%;}
.otherContents .otherList ul li{margin-top: 15%;}
.otherContents .otherList h3{width: 75%;}
.otherContents .otherList .seemore{margin: 10% 0 15%;}
.otherContents .otherList .seemore a{font-size: 14px;}
.otherContents .otherList .soon{font-size: 14px;margin: 10% 0 15%;}

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

.footer{margin-top: 35%;padding: 50px 0 20px;}
.footer .instagram{font-size: 16px;}
.footer .instagram .icon{width: 30px;}
.footer h2{width: 120px;margin-top: 70px;}
.footer .copyright{font-size: 11px;margin-top: 25px;line-height: 1.3;}
.footer .copyright br{display: block;}
.footer .pagetop{width: 70px;right: -8px;top: 50px;}


}










@media(max-width:440px) {

/*---------------------------------------*/
.hamburger{
	width: 30px;
	height: 24px;
	top: 15px;
	right: 15px;
}
.hamburger-trigger{
	width: 30px;
	height: 24px;
}

.hamburger-trigger span:nth-of-type(1) {top: 0;right:0;width:24px;transition: top .4s , width .3s , background .3s;}
.hamburger-trigger span:nth-of-type(2) {top: 11px;left: 0;transition: opacity .4s , background .3s;}
.hamburger-trigger span:nth-of-type(3) {bottom: 0;left: 0;transition: bottom .4s , background .3s;}
.hamburger-trigger.active span:nth-of-type(1) {
	top: 11px;
	right: -8px;
	width: 38px;
}
.hamburger-trigger.active span:nth-of-type(3) {
	bottom: 11px;
	width: 38px;
}



.navi ul li{margin-bottom: 8.5vw;}
.navi h3{font-size: 7.0vw;}

.navi p{margin-top: 5.0vw;}
.navi p a{font-size: 5.2vw;}


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

#header .categoryImage{width: 57%;}
#header .spBox{width: 43%;left: 57%;}

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

.lead .inner h2,
.lead .inner.delighter h2{width: 85%;}

.lead .inner p,
.lead .inner.delighter p{font-size: 13px;letter-spacing: 0.05em;}
.lead .spLogo{top:11.5%;width: 67%;}

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

.categoryLead .text p{font-size: 12px;letter-spacing: 0.05em;}

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

.subTitle h2 img{width: 190px;}
.subTitle .text p{font-size: 12px;letter-spacing: 0.05em;}

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

.itemMain .itemBox .itemSlide{width: 86%;}
.itemMain .itemBox .itemSlide .nameSvg{width: 13%;right: -5.4%;}


.itemMain .itemBox .text p{font-size: 12px;letter-spacing: 0.05em;}
.itemMain .itemBox .spec .name{width: calc(100% - 75px);}
.itemMain .itemBox .spec .name h3{font-size: 14px;}
.itemMain .itemBox .spec .name h3 span{font-size: 12px;}
.itemMain .itemBox .spec .name h4{font-size: 12px;margin-top: 0.2em;}
.itemMain .itemBox .spec .buy{width: 70px;}
.itemMain .itemBox .spec .buy a{font-size: 14px;}


.itemMain .fabricInfo{margin-top: 25px;}
.itemMain .fabricInfo .icon{width: 85px;float: none;}
.itemMain .fabricInfo .fab_text{margin-top: 8px;font-size: 12px;}




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

.recommend h2 span,
.recommend h2.delighter span{width: 82%;}

.recommend h2:after,
.recommend h2.delighter:after{bottom:1.6vw;}

.recommend .spec .name{width: calc(100% - 75px);}
.recommend .spec .name h3{font-size: 14px;}
.recommend .spec .name h3 span{font-size: 12px;}
.recommend .spec .name h4{font-size: 12px;}
.recommend .spec .buy{width: 70px;}
.recommend .spec .buy a{font-size: 14px;}

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

.allBanner .inner{width: 90%;}
.allBanner .inner .linkBox h4{width: 70%;}
.allBanner .seemore{left: 70%;}
.allBanner .seemore a{padding: 0.8em 0.9em;}

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

.bottomLinks h2{padding-bottom: 20px;}
.bottomLinks h2 span,
.bottomLinks .delighter h2 span{width: 300px;}

.allContents{margin-top: 30%;}
.allContents .allList,
.allContents.delighter .allList{padding: 10% 0;}
.allContents .allList ul li{margin-top: 10px;}
.allContents .allList .listRight ul li:first-child{margin-top: 10px;}
.allContents .allList h3{width: 142px;}
.allContents .allList .seemore a{font-size: 14px;}



.otherContents{margin-top: 32%;}
.otherContents .otherList ul{width: 70%;}

.otherContents .otherList ul li{padding: 0 8%;}
.otherContents .otherList .seemore a{font-size: 13px;}
.otherContents .otherList .soon{font-size: 13px;margin: 10% 0 15%;}


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

.footer .instagram{font-size: 14px;}
.footer .instagram .icon{width: 28px;}
.footer h2{width: 120px;margin-top: 80px;}

}





@media(max-width:360px) {


.lead .inner{width: 90%;}
.lead .inner p,
.lead .inner.delighter p{font-size: 12px;}

.categoryLead .text p{width:95%;}

.subTitle h2 img{width: 170px;}
.subTitle .text,
.subTitle.delighter .text{width: 93%;}


.itemMain .visualBox .single{width: 80%;}
.itemMain .visualBox .double{width: 92%;}


.itemMain .itemBox .itemSlide{width: 90%;}
.itemMain .itemBox .itemSlide .nameSvg{width: 13%;right: -5.2%;}


.itemMain .itemBox .text p{font-size: 12px;letter-spacing: 0.05em;}
.itemMain .itemBox .spec .name{width: calc(100% - 70px);}
.itemMain .itemBox .spec .name h3{font-size: 13px;}
.itemMain .itemBox .spec .name h3 span{font-size: 11px;}
.itemMain .itemBox .spec .name h4{font-size: 11px;}
.itemMain .itemBox .spec .buy{width: 65px;}
.itemMain .itemBox .spec .buy a{font-size: 13px;}


.recommend h2:after,
.recommend h2.delighter:after{bottom:2.0vw;}

.recommend .recImage{width: 88%;}

.recommend .colorTips{padding: 15px 0;}

.recommend .spec .name{width: calc(100% - 70px);}
.recommend .spec .name h3{font-size: 13px;}
.recommend .spec .name h3 span{font-size: 11px;}
.recommend .spec .name h4{font-size: 11px;}
.recommend .spec .buy{width: 65px;}
.recommend .spec .buy a{font-size: 13px;}


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

.bottomLinks h2{padding-bottom: 15px;}
.bottomLinks h2 span,
.bottomLinks .delighter h2 span{width: 270px;}


.allContents .allList ul li{margin-top: 10px;}
.allContents .allList .listLeft{width: 90%;}
.allContents .allList .listRight{width: 90%;}
.allContents .allList .listRight ul li:first-child{margin-top: 10px;}
.allContents .allList h3{width: 130px;}
.allContents .allList .seemore a{font-size: 13px;}




.otherContents .otherList .seemore a{font-size: 12px;}
.otherContents .otherList .soon{font-size: 12px;}



}