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




@media(min-width:1750px) {

.categoryHeader .caImage h2{width: 297.5px;}
.categoryHeader .sideText{font-size: 26.25px;}



}





@media(max-width:1200px) {

#header .title{width: 25%;}
#header .logo{width: 75px;}

/*-------*/

.lead{width: 85%;}

/*-------*/

.mainNavi{margin-top: 10vw;}
.mainNavi .nav h2{font-size: 30px;}
.mainNavi .nav h3{font-size: 17px;}
.mainNavi .nav .image a .hover p{font-size: 15px;}

.mainNavi .navInner{padding-bottom:4.5vw;}

/*-------*/

.category{margin-top: 13vw;}
.category.c02{margin-top: 20vw;}

/*-------*/



.styleSet{margin-top: 9vw;padding-top: 4vw;}
.styleTitle .icon{width:130px;}
.styleTitle .season{font-size: 22px;}
.styleTitle .styleName{width: 95%;margin-top: 70px;}
.styleTitle .styleName h2{font-size: 58px;}

/*-------*/

.allBanner{margin-top: 16vw;}
.allBanner .detail h2{font-size: 23px;}
.allBanner .detail .more a{font-size: 23px;}

/*-------*/

.otherAreaTitle h2{font-size: 52px;}
.otherAreaTitle h3{font-size: 30px;}

.onlineStore{margin-top: 20vw;}

/*-------*/

.sideNavi{min-width: 75px;right:-8%;}
.sideNavi ul li{margin-bottom: 20px;}
.sideNavi .sub{font-size: 15px;}
.sideNavi .sub em{font-size: 11px;padding-right: 2px;margin-top: 3px;}
.sideNavi .sub span{width: 8px;height: 8px;margin-right: 3px;margin-top: 4px;vertical-align: top;}

}




@media(max-width:1080px) {



/*-------*/

.mainNavi{width: 87%;}

/*-------*/

.styleSet{margin-top: 11vw;padding-top: 5vw;}
.styleTitle .icon{width:120px;}
.styleTitle .season{font-size: 21px;right: -2em;}
.styleTitle .styleName{width: 100%;margin-top: 65px;}
.styleTitle .styleName h2{font-size: 55px;}

/*-------*/

.itemList{max-width:28vw;font-size: 15px;}

/*-------*/

.allBanner{width: 80%;}
.allBanner .detail h2{font-size: 22px;}
.allBanner .detail .more a{font-size: 20px;	}

/*-------*/

.otherAreaTitle h2{font-size: 50px;}
.otherAreaTitle h3{font-size: 28px;}
.onlineStore .otherAreaTitle{width: 100%;}

/*-------*/

.footer h2{width: 290px;}

}








@media(max-width:980px) {

#header .logo{width: 65px;}

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

.sideNavi{display: none;}

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

.scrollbar{display: none;}

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

.leadNav{padding: 14vw 0 0;}
.lead .catch{font-size: 45px;line-height: 0.52;}
.lead .copy{font-size: 20px;}

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

.mainNavi{margin-top: 12vw;width: 90%;}
.mainNavi .nav h2{font-size: 28px;}
.mainNavi .nav h3{font-size: 15px;}
.mainNavi .nav .image a .hover p{font-size: 14px;}

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

.category{margin-top: 16vw;}
.category.c02{margin-top: 22vw;}

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

.categoryHeader .categoryInner{width: 90%;}
.categoryHeader .caImage h2{width: 18vw;}

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

.styleSet{width: 95%;}
.styleTitle .icon{width:110px;}
.styleTitle .season{font-size: 19px;}
.styleTitle .styleName{margin-top: 55px;}
.styleTitle .styleName h2{font-size: 50px;}

.styleTitle .titleText{margin-top: 30px;font-size: 14px;}

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

.itemList{max-width:34vw;font-size: 14px;}
.itemList dl .name{width: calc(100% - 65px);}
.itemList dl dd{width: 65px;}
.itemList dl dd a{font-size: 13px;}

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

.allBanner{width: 85%;margin-top: 18vw;}
.allBanner .detail h2{font-size: 18px;}
.allBanner .detail .more a{font-size: 19px;padding: 10px 0;}

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

.otherAreaTitle{padding: 26px 0 26px;}
.mac .otherAreaTitle{padding: 30px 0 23px;}

.otherAreaTitle h2{font-size: 43px;}
.otherAreaTitle h3{font-size: 24px;}

/*-------*/

.onlineStore{width: 90%;margin-top: 22vw;}
.onlineStore .otherAreaTitle{width: 88%;}
.onlineStore .onlineList{margin-top: 60px;}

/*-------*/

.snsIcon{margin-top: 15vw;}
.snsIcon h3{font-size: 19px;}
.snsIcon .instagram{width: 36px;margin-top: 25px;}

/*-------*/

.footer{padding: 33% 0 50px;margin-top: 15vw;}
.footer h2{width: 260px;}
.footer .copyright{font-size: 17px;margin-top: 35px;}
.footer .pagetop{width: 50px;}

}








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





@media(max-width:768px) {

.pclink{pointer-events: none;}
.wide{display: none;}

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

#header{background-image: url("../../images/mainsp_01.webp");}

#header .title{
	width: 50%;
	top: 50%;
	left: 0;
	right: 0;
	margin: 0 auto;
}
#header .title h2{color: #FFF;font-size: 2.8vw;}
#header .logo{width: 100px;right:0;left: 0;top: 30px;}


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

.scrollbar{
	display: block;
    width: 25px;
    left:auto;
	right: 3vw;
    bottom: -40px;
    height:100px;
}
.scrollbar p{
    width: 15px;
	margin-top: 0px;
	margin-left: 6px;
	-webkit-transform:rotate(180deg);
	transform:rotate(180deg);
}
.scrollbar .base{height:100px;right:auto;left: 0;}
.scrollbar .bar{height:100px;right:auto;left: 0;}


/*-------*/

.leadNav{padding-top: 20vw;}
.lead{width: 100%;}
.lead .copy{font-size: 19px;margin-top: 2.8em;}

/*-------*/

.mainNavi{margin-top: 15vw;width: 75%;padding: 0;}
.mainNavi::before,
.mainNavi::after,
.mainNavi .navInner::after{display: none;}


.mainNavi .navInner{display: block;padding: 0;}
.mainNavi .nav{width: 100%;}
.mainNavi .nav.n02{margin-top: 13vw;}
.mainNavi .nav h2{padding: 0.5em 0 0.5em;}
.mac .mainNavi .nav h2{padding: 0.7em 0 0.4em;}
.ipad .mainNavi .nav h2{padding: 0.7em 0 0.4em;}
.iphone .mainNavi .nav h2{padding: 0.7em 0 0.4em;}

.mainNavi .nav h2::after{
	left: 5%;
	right: 5%;
}
.mainNavi .nav h2::before{
	content: '';
	position: absolute;
	left: 5%;
	right: 5%;
	top: 0;
	height: 1px;
	background: #C9C5C0;
}
.mainNavi .nav h3{
	font-size: 18px;
	padding: 0.5em 0 1em 0;
	height:auto;
}
.mainNavi .nav li:first-child h3{padding: 0 0 0.5em 0;}

.mainNavi .nav h3 span{font-size: 0.9em;margin-top: 0.5em;}

.mac .mainNavi .nav h3 span em{height: 0.7em;}
.ipad .mainNavi .nav h3 span em{height: 0.7em;}
.iphone .mainNavi .nav h3 span em{height: 0.7em;}


.mainNavi .nav .image a .hover{position:relative;margin-top: 18px;}
.mainNavi .nav .image a .hover p{
	position: relative;
	top: 0;
	width: 6em;
	font-size: 15px;
	padding: 0.4em 0;
	opacity: 1;
	-webkit-transform:none;
	transform:none;
	-webkit-transition:none;
	transition: none;
}

.mainNavi .nav h2{
	-webkit-transition: top 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.2s;
	transition: top 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.2s;
}
.mainNavi .nav.view h2{opacity: 1;top: 0;}

.mainNavi .nav .navCategry{
	width: 100%;
	display: flex;
	margin-top: 35px;
}
.mainNavi .nav .navCategry li{
	width: 33.333%;
	position: relative;
	opacity: 0;
	-webkit-transition:opacity 1.0s;
	transition: opacity 1.0s;
}
.mainNavi .nav.view .navCategry li{opacity: 1;}
.mainNavi .nav .navCategry li:nth-child(1){-webkit-transition-delay:0.5s;transition-delay:0.5s;}
.mainNavi .nav .navCategry li:nth-child(2){-webkit-transition-delay:0.8s;transition-delay:0.8s;}
.mainNavi .nav .navCategry li:nth-child(3){-webkit-transition-delay:1.1s;transition-delay:1.1s;}


/*-------*/

.category{margin-top: 20vw;}
.category.c02{margin-top: 25vw;}

/*-------*/

.categoryHeader .categoryInner{width: 91%;}
.categoryHeader .caImage span{padding-top: 89%;}
.c01 .categoryHeader .caImage span{background-image: url("../../images/category01sp.webp");}
.c02 .categoryHeader .caImage span{background-image: url("../../images/category02sp.webp");}

.categoryHeader .caImage h2{width: 24vw;}
.c01 .categoryHeader .caImage h2{top: 10%;left: 5%;}
.c02 .categoryHeader .caImage h2{top: 9%;right: 10%;}

.categoryHeader .sideText{width: 5vw;right: -2.5vw;font-size: 2.7vw;}
.categoryHeader .sideText p:nth-child(1){top: 4%;}
.categoryHeader .sideText p:nth-child(3){bottom: 4%;}


/*-------*/

.styleSet{width: 100%;}
.styleSet.styleLa02,
.styleSet.styleLa03,
.styleSet.styleMe02,
.styleSet.styleMe03{margin-top: 20vw;}

.styleTitle{width: 88%;margin: 0 auto;}
.styleTitle .icon{margin-left: 3vw;}
.styleTitle .styleName h2{display: block;line-height: 0.95;padding: 0.4em 0 0.4em 0.3em;}
.mac .styleTitle .styleName h2{padding: 0.65em 0 0.35em 0.3em;}
.ipad .styleTitle .styleName h2{padding: 0.65em 0 0.35em 0.3em;}
.iphone .styleTitle .styleName h2{padding: 0.65em 0 0.35em 0.3em;}

.styleTitle .styleName h2 br{display: block;}
.styleTitle .titleText{
	margin-top: 2em;
	font-size: 16px;
	line-height: 2.0;
	padding: 0 2.5vw;
	text-align: justify;
	text-justify: inter-ideograph;
}
.styleTitle.view .titleText p br{display: none;}

/*-------*/

.styleBody .styleTop{display: block;position: relative;overflow:hidden;}
.styleTop .styleMain{width: 100%;position: relative;z-index: 50;}
.styleTop .styleMain .setIn{width: 90%;margin-left: 5%;}
.rev .styleTop .styleMain .setIn{margin-left: 5%;}


.styleTop .styleSub,
.me03 .styleTop .styleSub{
	width: 100%;
	position: relative;
	z-index: 10;
	margin-top:-60vw;
	padding-top: 60vw;
	overflow:hidden;
}
.c01 .styleTop .styleSub .subBK,
.c02 .styleTop .styleSub .subBK{background: none;position: relative;z-index: 5;}
.styleTop .styleSub::before{
	content: '';
	position: absolute;
	z-index: 1;
	top: 0;
	left: 5vw;
	bottom: 0;
	width: 0;
	-webkit-transition: width 1.5s cubic-bezier(0.76, 0, 0.3, 1);
	transition: width 1.5s cubic-bezier(0.76, 0, 0.3, 1);
}
.styleTop .styleSub.view::before{width: 100%;}

.rev .styleTop .styleSub::before{left: 0;}
.rev .styleTop .styleSub.view::before{width: 95vw;}

.c01 .styleTop .styleSub::before{background:#D3E9D4;}
.c02 .styleTop .styleSub::before{background:#C3D4DE;}

.la02 .styleTop .styleSub::before{bottom: 25vw;}
.la03 .styleTop .styleSub::before{bottom: 25vw;}



.styleTop .styleSub .s01{z-index: 60;margin-top: 3.5vw;}
.styleTop .styleSub .s02{z-index: 70;}

.la01 .styleTop .styleSub .subBK{width: 100%;margin:0;padding:0 0 3.5vw 0;}
.la01 .styleTop .styleSub .s01{width: 53%;margin-left: 47%;}
.la01 .styleTop .styleSub .s02{width: 43.5%;margin-top: -25vw;}

.la02 .styleTop .styleSub .subBK{width: 100%;margin:0;padding:0;}
.la02 .styleTop .styleSub .s01{width: 53.8%;}
.la02 .styleTop .styleSub .s02{width: 60%;margin-left: 21%;}

.la03 .styleTop .styleSub .subBK{width: 100%;margin:0;padding:0;}
.la03 .styleTop .styleSub .s01{width: 53%;margin-left: 47%;}
.la03 .styleTop .styleSub .s02{width: 43.5%;margin-top: -25vw;}

.me01 .styleTop .styleSub .subBK{width: 100%;margin:0;padding:0 0 3.5vw 0;}
.me01 .styleTop .styleSub .s01{width: 43.5%;margin-left: 56.5%;}
.me01 .styleTop .styleSub .s02{width: 43.5%;margin-top: -33vw;margin-left: 10vw;}

.me02 .styleTop .styleSub .subBK{width: 100%;margin:0;padding:0 0 3.5vw 0;}
.me02 .styleTop .styleSub .s01{width: 43.5%;}
.me02 .styleTop .styleSub .s02{width: 42%;margin-top: -38vw;margin-left: 48%;}
.me02 .styleTop .styleSub .mask{display: none;}

.me03 .styleTop .styleSub .subBK{width: 100%;margin:0;padding:0 0 3.5vw 0;}
.me03 .styleTop .styleSub .s01{width: 43.5%;margin-left: 47%;}
.me03 .styleTop .styleSub .s02{width: 38.4%;margin-top: -33vw;margin-left: 5vw;}

.styleBody .styleBottom{display: block;}
.styleBody.la03 .styleBottom{margin-top:0;}
.styleBody.me02 .styleBottom{margin-top:0;}

.styleBody .styleBottom .item{width: 68%;}
.styleBody .styleBottom .item.left{padding-top:0;margin-left: 7.5%;}
.styleBody .styleBottom .item.right{margin-left: 24.5%;}
.styleBody.rev .styleBottom .item.left{padding-top: 0%;}
.styleBody.rev .styleBottom .item.right{padding-top: 0%;}

.styleBody .styleBottom .item:first-child{margin-top:16vw;}
.styleBody .styleBottom .item:last-child{margin-top:9vw;}


.styleBody .styleBottom .item .itemInner{width: 100%;}
.styleBody .styleBottom .item.left .itemInner{margin-left: 0%;}
.styleBody .styleBottom .item.right .itemInner{margin-left:0%;text-align: right;}



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

.itemList{width: 23em;font-size: 17px;max-width: none;}

.styleTop .itemList{
	position:relative;
	right: 0;
	left: 0;
	width: 72%;
	max-width: 400px;
	margin: 4vw auto 0;
	opacity: 0;
	top: 1.5vw;
	-webkit-transition: top 1.2s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
	transition: top 1.2s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
}
.rev .styleTop .itemList{right:0;left:0;}
.styleBottom .itemList{width: 100%;max-width: 400px;margin-top: 30px;}

.itemList{font-size: 17px;}
.itemList dl .name{width: calc(100% - 75px);}
.itemList dl dd{width: 75px;}
.itemList dl dd a{font-size: 16px;}

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

.allBanner{width: 100%;margin-top: 23vw;}
.allBanner .spLink{
	position: absolute;
	z-index: 30;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
}

.allBanner .photo{width: 100%;}
.allBanner .photo span{padding-top: 63%;}
.allBanner .bannerInner{
	position: relative;
	width: 100%;
	top: auto;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 25;
}
.allBanner .detail{
	position: relative;
	width: 100%;
	top: 0;
	-webkit-transform:none;
	transform:none;  
}
.allBanner .detail h2{
	font-size: 22px;
	text-align: left;
	margin:0;
	padding:1.2em 0 1.2em 9%; 
}
.allBanner .detail .more{
	width:auto;
	margin: 0;
	position: absolute;
	right: 6.3%;
	top: 50%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);  
}
.allBanner .detail .more a{
	font-size: 22px;
	padding: 10px 20px;
}

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

.onlineStore{width: 88%;margin-top: 25vw;}
.onlineStore .otherAreaTitle{width: 100%;}

.onlineStore .onlineList{width: 70%;max-width: 500px;margin: 12vw auto 0;}
.onlineStore .onlineList .top{width: 100%;}
.onlineStore .onlineList .bottom{width: 100%;}
.onlineStore .onlineList .mid{margin: 8% 0;}
.onlineStore .onlineList .mid ul{display: flex;flex-wrap: wrap;justify-content: center;}
.onlineStore .onlineList .mid ul li{width: 47%;margin-right: 0%;margin-bottom: 8%;}
.onlineStore .onlineList .mid ul li:nth-child(odd){margin-right:6%;}
.onlineStore .onlineList .mid ul li:last-child{margin:0;}
.onlineStore .onlineList .mid ul li:last-child{margin:0;}
.onlineStore .onlineList a{background: #B2DAB3;border:none;}
/*----------*/

.snsIcon{margin-top: 18vw;}
.snsIcon h3{font-size: 20px;}
.snsIcon .instagram{width: 38px;margin-top: 25px;}

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

.footer{margin-top: 18vw;padding: 45% 0 45px;background-image: url("../../images/footer_sp.webp");}
.footer .copyright{font-size: 17px;margin-top: 20px;}
.footer .copyright br{display: block;}

.footer .pagetop{display: none;}

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


body.fixed{
    position:fixed;
    width:100%;
    height:100%;
    overflow:hidden;    
}

#trigger{display: block;}
/*トリガー*/
.menu-trigger{
	position:fixed;
	top:20px;
	left:20px;
	width:42px;
	height:42px;
	z-index:600;
    pointer-events: auto;
}
.menu-trigger span{
	position:absolute;
	left:0;
	width:100%;
	height:2px;
	background-color:#716F71;
	-webkit-transition: all 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
	transition: all 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.menu-trigger span:nth-of-type(1){top:0;}
.menu-trigger span:nth-of-type(2){top:20px;}
.menu-trigger span:nth-of-type(3){bottom:0;}

.menu-trigger.color span{background-color:#716F71;}

.menu-trigger.open span{background-color:#FFF;}
.menu-trigger.open span:nth-of-type(2){
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}
.spNavi{
    position:fixed;
    top:0;
    right:0;
    left: 0;
    width:100%;
    height:100%;
    z-index:500;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
    overflow:hidden;
	display: block;
	line-height: 1;
	font-family: "OxfordStreetRegular";
	-webkit-transition-delay: 0.8s;
	transition-delay: 0.8s;
}
.spNavi.open{
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}
.spNavi .bk{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	opacity: 0;
	background: url("../../images/spnavi_bk.webp") center center;
	background-size: cover;
    -webkit-transition:opacity 0.6s 0s;
	transition:opacity 0.6s 0s;
}
.spNavi.open .bk{
	opacity: 1;
    -webkit-transition:opacity 0.8s 0.2s;
	transition:opacity 0.8s 0.2s;
}



.spNavi .naviInner{
    width:100%;
    position: absolute;
    top: 0;
    left:0;
    right:0;
	bottom: 0;
    margin: 0 auto;
	z-index: 20;
	opacity: 0;
	-webkit-transition:opacity 0.5s 0s;
	transition:opacity 0.5s 0s;
}
.spNavi.open .naviInner{
	opacity: 1;
	-webkit-transition:opacity 0s 0.4s;
	transition:opacity 0s 0.4s;
}
.spNavi .naviInner .menu{
	position: absolute;
	left: 30%;
	top: 50%;
	margin: 0 auto;
	width: 50%;
	opacity: 0;
	line-height: 1;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	-webkit-transition: left 1.6s, opacity 0.6s;
	transition: left 1.6s, opacity 0.6s;
}
.spNavi.open .naviInner .menu{
	opacity: 1;
	left: 25%;
	-webkit-transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.6s, opacity 0.8s 0.6s;
	transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.6s, opacity 0.8s 0.6s;
}

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

.spNavi .rootAll{}
.spNavi .rootAll a{color: #FFF;font-size: 3.6vw;}


.spNavi .root{margin:6vh auto 1.2vh;}
.spNavi .root a{color: #FFF;font-size: 3.6vw;}
.spNavi .root a em{letter-spacing: 0.07em;}

.spNavi .navicategory{
	width: 100%;
	border-top: 1px solid #FFF;
}
.spNavi .navicategory ul{}
.spNavi .navicategory ul li{
	font-size: 4.0vw;
	letter-spacing: 0.07em;
	margin-top: 2.5vh;
}
.spNavi .navicategory a{color: #FFF;}
.spNavi .navicategory a em{
	 font-family: "TTHovesProLight";
	 font-size: 0.8em;
	 width: 1.8em;
	 display: inline-block;
}

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


}








@media(max-width:720px) {

#header .logo{width: 80px;top: 25px;}

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

.mainNavi{width: 82%;}
.mainNavi .nav h2::after{left: 3%;right: 3%;}
.mainNavi .nav h2::before{left: 3%;right: 3%;}

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

.styleTitle .icon{width: 100px;}
.styleTitle .season{font-size: 17px;}
.styleTitle .styleName{margin-top: 10vw;}
.styleTitle .styleName h2{font-size: 40px;}
.styleTitle .titleText{font-size: 15px;}


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

.styleTop .itemList .listInner{padding-top: 0.3em;padding-bottom: 0.3em;}
.styleBottom .itemList .listInner{padding-top: 0.3em;padding-bottom: 0.3em;}
.itemList dl{margin-top: 1em;}

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

.allBanner .detail h2{font-size: 20px;}
.allBanner .detail .more a{font-size: 20px;}

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

.otherAreaTitle{padding: 22px 0 22px;}
.mac .otherAreaTitle{padding: 25px 0 20px;}
.ipad .otherAreaTitle{padding: 25px 0 20px;}
.iphone .otherAreaTitle{padding: 25px 0 20px;}

.otherAreaTitle h2{font-size: 40px;}
.otherAreaTitle h3{font-size: 22px;}

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

.snsIcon{margin-top: 20vw;}
.snsIcon h3{font-size: 19px;}
.snsIcon .instagram{width: 35px;margin-top: 25px;}

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

.footer{margin-top: 20vw;padding: 50% 0 40px;}
.footer h2{width: 250px;}
.footer .copyright{font-size: 15px;}

}







 
@media(max-width:550px) {


#header .title{width: 63%;}
#header .title h2{color: #FFF;font-size:3.5vw;}
#header .logo{width: 20%;top: 25px;}


.scrollbar{
    bottom: -27px;
    height:80px;
}
.scrollbar p{
    width: 13px;
}
.scrollbar .base{height:80px;}
.scrollbar .bar{height:80px;}


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

.leadNav{padding-top: 23vw;}
.lead .catch{font-size: 40px;}
.lead .copy{font-size: 18px;}

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

.mainNavi{margin-top: 22vw;}
.mainNavi .nav.n02{margin-top: 15vw;}

.mainNavi .nav h2{font-size: 28px;}
.mainNavi .nav h3{font-size: 16px;}
.mainNavi .nav .image a .hover{margin-top: 10px;}
.mainNavi .nav .image a .hover p{font-size: 13px;}

.mainNavi .nav .navCategry{margin-top: 25px;}

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

.category{margin-top: 22vw;}
.category.c02{margin-top: 35vw;}

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

.styleTitle .icon{width: 85px;}
.styleTitle .season{font-size: 15px;padding: 0 0.3em;}
.styleTitle .styleName h2{font-size: 35px;}
.styleTitle .titleText{font-size: 14px;}

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

.styleBody{margin-top: 8vw;}

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

.itemList{width: auto;font-size: 15px;}
.itemList dl .name{width: calc(100% - 70px);}
.itemList dl dd{width: 70px;}
.itemList dl dd a{font-size: 15px;}

.styleTop .itemList{width: 72%;max-width:none;margin-top: 4vw;}
.styleBottom .itemList{width: 100%;max-width: none;margin-top: 4vw;}

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

.allBanner .detail h2{font-size: 17px;padding:1.2em 0 1.2em 7%;}
.allBanner .detail .more a{font-size: 17px;}

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

.otherAreaTitle{padding: 20px 0 20px;}
.mac .otherAreaTitle{padding: 22px 0 17px;}
.ipad .otherAreaTitle{padding: 22px 0 17px;}
.iphone .otherAreaTitle{padding: 22px 0 17px;}

.otherAreaTitle h2{font-size: 36px;}
.otherAreaTitle h3{font-size: 20px;}

.onlineStore{margin-top: 28vw;}
.onlineStore .onlineList{width: 85%;}

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

.footer h2{width: 40%;}
.footer .copyright{font-size: 13px;margin-top: 15px;}
.footer .pagetop{display: none;}

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

.menu-trigger{top:15px;left:12px;width:30px;height:30px;}
.menu-trigger span:nth-of-type(2){top:14px;}

.spNavi .naviInner .menu{left: 15%;width: 80%;top:55%;}
.spNavi.open .naviInner .menu{left: 10%;}

.spNavi .rootAll a{font-size: 5vw;}
.spNavi .root a{font-size: 5vw;}
.spNavi .navicategory ul li{font-size: 5.5vw;}

}





@media(max-width:440px) {

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

.lead .catch{font-size: 34px;}
.lead .copy{font-size: 15.3px;}

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

.mainNavi .nav h2{font-size: 26px;}
.mainNavi .nav h3{font-size: 13px;}
.mainNavi .nav .image a .hover p{font-size: 12px;}

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

.categoryHeader .sideText{font-size: 3.0vw;}

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

.styleTitle .icon{width: 70px;}
.styleTitle .season{font-size: 12px;}
.styleTitle .styleName h2{font-size: 29px;}
.styleTitle .titleText{font-size: 13px;}

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

.styleSet.styleLa02,
.styleSet.styleLa03,
.styleSet.styleMe02,
.styleSet.styleMe03{margin-top: 24vw;}

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

.styleBody .styleBottom .item{width: 70%;}
.styleBody .styleBottom .item.left{padding-top:0;margin-left: 7.5%;}
.styleBody .styleBottom .item.right{margin-left: 22.5%;}

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

.itemList{font-size: 13px;}

.styleTop .itemList{margin-top: 5vw;}
.styleBottom .itemList{margin-top: 5vw;}


.itemList dl dd a{font-size: 13px;padding: 3px 0px;}
.itemList dl .name{width: calc(100% - 65px);}
.itemList dl dd{width: 65px;}

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

.allBanner .detail h2{font-size: 15px;padding:1.1em 0 1.1em 7%; }
.allBanner .detail .more a{font-size: 15px;padding: 6px 10px;}

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


.otherAreaTitle h2{font-size: 32px;}
.otherAreaTitle h3{font-size: 18px;}

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

.onlineStore{margin-top: 28vw;}
.onlineStore .onlineList{width: 85%;margin-top: 15%;}

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

.snsIcon{margin-top: 23vw;}
.snsIcon h3{font-size: 16px;}
.snsIcon .instagram{width: 28px;margin-top: 15px;}

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

.footer{margin-top: 23vw;padding: 43% 0 30px;}
.footer h2{width: 45%;}
.footer .copyright{font-size: 11px;margin-top: 10px;}


}






@media(max-width:360px) {

.lead .catch{font-size: 33px;}
.lead .copy{font-size: 14.5px;}

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

.mainNavi{width: 85%;}
.mainNavi .nav h2{font-size: 24px;}

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

.styleTitle .styleName h2{font-size: 28px;}
.styleTitle .titleText{font-size: 12px;}

/*----------*/
.allBanner .detail h2{font-size: 14px;}
.allBanner .detail .more a{font-size: 14px;}

/*----------*/
.otherAreaTitle h2{font-size: 30px;}
.otherAreaTitle h3{font-size: 17px;}

}