@charset "utf-8";


html{
	font-size: 10px;
	/*font-size: 62.5%;*/
}

body {
    font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400px;
	line-height: 1.0;
	letter-spacing: 0;
	color: #000000;
}

.clearFix:after,
header:after,
#wrapper:after,
section:after,
footer:after{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	_zoom: 1;
}

*:first-child+html .clearFix:after,
*:first-child+html header:after,
*:first-child+html #wrapper:after,
*:first-child+html section:after,
*:first-child+html footer:after{ zoom: 1; } /* IE7 */

a,a img,input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="image"],
#menu{
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-o-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
}

a:hover img,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="image"]:hover{
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}



/**************************************************
 header
**************************************************/
header{
	position: fixed;
	width: 100%;
	min-width: 1100px;
	height: 100px;
	top: 0;
	background-color: rgba(255,255,255,0.95);
	z-index: 9990;
}

h1{
	float: left;
	padding: 24px 0 0 30px;
}

h1 img:nth-child(2){display: none;}

#menu{
	width: 60px;
	height: 60px;
	background: url(../img/menu.png) no-repeat 0 0;
	background-size: 60px 120px;
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 0;
	display: none;
}

#menu.selected{
	background: url(../img/menu.png) no-repeat center -60px;
	background-size: 60px 120px;
}


/**************************************************
 globalNavi
**************************************************/
#globalNavi{float: right;}

#globalNavi ul{
	font-size: 0;
	padding: 25px 30px 0 0;
}

#globalNavi ul li{
	display: inline-block;
	vertical-align: top;
	font-size: 16px;
	font-size: 1.6rem;
	border-right: 1px solid #EB7892;
}

#globalNavi ul li:first-child{border-left: 1px solid #EB7892;}

#globalNavi ul li a{
	display: block;
	height: 50px;
	color: #EB7892;
	padding: 15px 20px 0 20px;
}

#globalNavi ul li a:hover,
#globalNavi ul li:hover a{opacity: 0.5;}



/**************************************************
 visualHanger
**************************************************/
#visualHanger{
	position: relative;
	/*display: table;*/
	display: flex;
	width: calc(100% - 30px);
	min-width: 1100px;
	top: 100px;
	background: url("../img/visual_bg1.png") no-repeat top right;
	padding-bottom: 30px;
}

#visualImage{
	/*display: table-cell;*/
	width: 59%;
	height: calc(((100vw - 30px) * 0.59) * 0.75);
	min-height: 470px;
	position: relative;
	overflow: hidden;
	background: rgba(247,241,223,0.9);
}

#visualCopy{
	/*display: table-cell;
	vertical-align: middle;*/
	width: 41%;
	background: rgba(247,241,223,0.9);
	padding: 0 65px;
	min-height: 470px;
	display: flex;
	align-items: center;
}

#visualCopy dl dd{
	font-size: 20px;
	font-size: 2.0rem;
	line-height: 1.6;
	color: #534741;
	padding-top: 50px;
}

#visualImage img{
	position: absolute;
	width: 102%;
	opacity: 0;
}

#thumbNail{
	width: calc((100% - 30px) * 0.59);
	text-align: center;
	margin-top: 120px;
}

#thumbNail ul{font-size: 0;}

#thumbNail ul li{
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 10.0rem;
	background-color: #EFBDCA;
	margin: 0 17px;
	cursor: pointer;
}

#thumbNail ul li.selected{background-color: #EB7892;}



/**************************************************
 introHanger
**************************************************/
#introHanger{
	width: 1089px;
	height: 359px;
	padding: 80px 0 0 0;
	margin: 20px auto 40px auto;
	background: url("../img/intro_bg.png") no-repeat 0 0;
	font-size: 21px;
	font-size: 2.1rem;
	line-height: 2.0;
	color: #FFFFFF;
	text-align: center;
}



/**************************************************
 shopBanner
**************************************************/
#shopBanner{
	padding: 10px 0 30px 0;
	text-align: center;
}



/**************************************************
 snsHanger
**************************************************/
#snsHanger{
	display: table;
	width: 1100px;
	margin: 30px auto 80px auto;
}

#instagram{
	display: table-cell;
	vertical-align: top;
	width: 700px;
	height: 100%;
	margin-right: 60px;
}

#instagram span{
	display: block;
	font-size: 17px;
	font-size: 1.7rem;
	font-weight: 700;
}

#instagram ul{font-size: 0;}

#instagram ul li{
	display: inline-block;
	vertical-align: top;
	position: relative;
	width: 159px;
	height: 159px;
	margin: 20px 20px 0 0;
	overflow: hidden;
}

#instagram ul li:nth-child(4n){margin: 20px 0 0 0;}

#instagram ul li img{
	width: auto;
	height: 100%;
}

#facebook{
	display: table-cell;
	vertical-align: top;
	width: 340px;
	padding-top: 20px;
}



/**************************************************
 pruducts
**************************************************/
#pruducts{
	margin: 0 30px;
	padding: 20px;
	background-color: #F7F1DF;
	min-width: 1040px;
}

#proInner{
	border: 1px solid #C59B6D;
	padding: 30px;
}

#proInner h2{
	text-align: center;
	padding: 15px 0 0 0;
}

#proHanger{
	display: flex;
  	flex-wrap: wrap;
  	justify-content: space-between;
}

.proCate{
	width: calc(50% - 20px);
	margin: 50px 0 0 0;
	background: url("../img/pro_bg.png") no-repeat right 45px;
	background-size: 47% 100%;
}

.proCate h3{
	font-size: 22px;
	font-size: 2.2rem;
	font-weight: 500;
	color: #C59B6D;
	height: 45px;
}

.proCateInner{
	display: flex;
	color: #534741;
}

.proCateInner p{
	width: calc(53% - 15px);
	margin-right: 15px;
	font-size: 17px;
	font-size: 1.7rem;
	line-height: 1.8;
}

.proCateInner p img{
	display: block;
	width: 100%;
	margin-bottom: 20px;
}

.proCateInner dl{
	width: 47%;
	padding: 0 20px;
	font-size: 17px;
	font-size: 1.7rem;
}

.proCateInner dl dt{
	font-weight: 700;
	line-height: 1.3;
	padding: 20px 0 0 0;
}

.proCateInner dl dd{
	line-height: 1.8;
	padding: 5px 0 20px 0;
}

.proCate2{
	margin: 70px 0 0 0;
	display: table;
	width: 100%;
}

.proCate2 p{
	display: table-cell;
	vertical-align: middle;
	width: 35%;
}

.proCate2 p img{width: 100%;}

.proCate2 dl{
	display: table-cell;
	vertical-align: middle;
	width: 65%;
	padding-left: 40px;
}

.proCate2 dl dt{
	font-size: 22px;
	font-size: 2.2rem;
	font-weight: 500;
	color: #C59B6D;
}

.proCate2 dl dd{
	font-size: 17px;
	font-size: 1.7rem;
	line-height: 1.8;
	color: #534741;
	padding-top: 20px;
}



/**************************************************
 shop
**************************************************/
#shop{
	width: 1100px;
	margin: 70px auto 0 auto;
}

#shop h2{text-align: center;}

#shopInner{
	display: table;
	width: 100%;
	padding: 40px 0 0 0;
}

#shopPhoto{
	display: table-cell;
	width: 520px;
}

#shopPhoto img{width: 100%;}

#shopInner dl{
	display: table-cell;
	vertical-align: middle;
	width: 540px;
	padding: 0 0 0 40px;
}

#shopInner dl dt{
	font-size: 22px;
	font-size: 2.2rem;
	font-weight: 500;
	color: #C59B6D;
}

#shopInner dl dd{
	font-size: 17px;
	font-size: 1.7rem;
	line-height: 1.8;
	padding: 30px 0 0 0;
}

#aboutShop{
	margin: 30px 0 0 0;
	border: 1px solid #C59B6D;
	padding: 40px;
}

#aboutShop dl dt{
	font-size: 22px;
	font-size: 2.2rem;
	font-weight: 500;
	color: #C59B6D;
}

#aboutShop dl dd{
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.8;
	padding: 30px 0 0 0;
}


/**************************************************
 bannerHanger
**************************************************/
#bannerHanger{
	text-align: center;
	padding: 25px 0;
}

#bannerHanger h2{padding: 60px 0 30px 0;}

#bannerHanger div img{
	width: 280px;
	margin: 5px 20px;
}


/**************************************************
 access
**************************************************/
#access{
	margin: 50px 30px 0 30px;
	text-align: center;
	min-width: 1100px;
	background: url("../img/access_bg1.png") no-repeat 20px top,url("../img/access_bg2.png") no-repeat right 50px;
}

#access p{
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1.8;
	padding: 20px 0 0 0;
}

#map{
	margin: 50px 0 0 0;
	height: 400px;
}

#map iframe{
	width: 100%;
	height: 100%;
}


/**************************************************
 footer
**************************************************/
footer{
	margin: 40px 0 0 0;
	padding: 0 30px;
	text-align: center;
}

#inquiry{
	padding: 20px;
	background: url("../img/footer_bg.png") repeat center top #C59B6D;
}

#inquiry dl{
	padding: 30px 0;
	border: 1px solid #FFFFFF;
}

#inquiry dl dd{
	padding: 30px 0 0 0;
	color: #FFFFFF;
	font-size: 18px;
	font-size: 1.8rem;
}

#inquiry dl dd img{
	display: block;
	margin: 0 auto 15px auto;
}

#copyRight{
	padding: 50px 0 20px 0;
	font-size: 14px;
	font-size: 1.4rem;
}



/**************************************************
 Responsive
**************************************************/
@media screen and (max-width: 640px){
	
	
/** header **********/	
header{
	min-width: 100%;
	height: 60px;
}

h1{
	float: none;
	padding: 9px 0 0 15px;
}

h1 img:nth-child(1){display: none;}
	
h1 img:nth-child(2){
	display: block;
	width: 150px;
}

#menu{display: block;}
	
	
/** globalNavi **********/
#globalNavi{
	float: none;
	position: absolute;
	width: 100%;
	top: 60px;
	background-color: #EB7892;
	display: none;
}

#globalNavi ul{
	padding: 20px 0;
	text-align: center;
}

#globalNavi ul li{
	display: block;
	border-right: none;
}

#globalNavi ul li:first-child{border-left: none;}

#globalNavi ul li a{
	height: auto;
	color: #FFFFFF;
	padding: 20px;
}
	
	
/** visualHanger **********/
#visualHanger{
	display: block;
	width: 100%;
	min-width: 100%;
	top: 60px;
	background: url("../img/visual_bg1.png") no-repeat top right;
	padding-bottom: 30px;
}

#visualImage{
	width: 100%;
	height: 73vw;
	min-height: auto;
}

#visualCopy{
	width: 100%;
	padding: 50px 20px 30px 20px;
	min-height: auto;
}
	
#visualCopy dl dt img{
	display: block;
	margin: 0 auto;
	width: 240px;
}

#visualCopy dl dd{
	font-size: 18px;
	font-size: 1.8rem;
	padding-top: 30px;
}

#thumbNail{
	position: absolute;
	width: 100%;
	top: calc(73vw - 50px);
	z-index: 3;
}

#thumbNail ul li{margin: 0 15px;}


	
/** introHanger **********/
#introHanger{
	width: 100%;
	height: auto;
	padding: 30px 50px;
	margin: 60px auto 30px auto;
	background: url("../img/intro_lt.png") no-repeat -5px 10px,url("../img/intro_rt.png") no-repeat calc(100% + 5px) 10px,url("../img/intro_lb.png") no-repeat -5px calc(100% - 10px),url("../img/intro_rb.png") no-repeat calc(100% + 5px) calc(100% - 10px),#C59B6D;
	background-size: 70px auto,80px auto,70px auto,90px auto;
	font-size: 17px;
	font-size: 1.7rem;
	line-height: 1.8;
	text-align: left;
}
	
#introHanger br{display: none;}	
	
	
	
/** shopBanner **********/
#shopBanner{padding: 0 10px;}

#shopBanner img{width: 100%;}
	
	
	
/** snsHanger **********/
#snsHanger{
	display: block;
	width: 100%;
	margin: 0;
	padding: 30px 10px 30px 10px;
}

#instagram{
	display: block;
	width: 100%;
	margin-right: 0;
}

#instagram span{text-align: center;}
	
#instagram ul li{
	width: calc(50% - 5px);
	height: calc((50vw - 10px) - 5px);
	margin: 10px 10px 0 0;
}

#instagram ul li:nth-child(2n){margin: 10px 0 0 0;}

#facebook{
	display: block;
	width: 100%;
	padding-top: 30px;
}

	

/** pruducts **********/
#pruducts{
	margin: 0 auto;
	padding: 10px;
	width: calc(100% - 20px);
	min-width: calc(100% - 20px);
}

#proInner{padding: 10px;}

#proInner h2{padding: 10px 0 0 0;}

#proHanger{display: block;}

.proCate{
	width: 100%;
	margin: 30px 0 0 0;
	background: url("../img/pro_bg.png") no-repeat right 35px;
	background-size: 49% 100%;
}

.proCate h3{
	font-size: 20px;
	font-size: 2.0rem;
	height: 35px;
}

.proCateInner p{
	width: calc(51% - 10px);
	margin-right: 10px;
	font-size: 15px;
	font-size: 1.5rem;
}

.proCateInner dl{
	width: 49%;
	padding: 0 10px;
	font-size: 15px;
	font-size: 1.5rem;
}

.proCate2{
	margin: 30px 0 0 0;
	display: block;
}

.proCate2 p{
	display: block;
	width: 100%;
}

.proCate2 dl{
	display: block;
	width: 100%;
	padding: 10px 0 0 0;
}

.proCate2 dl dt{
	font-size: 20px;
	font-size: 2.0rem;
}

.proCate2 dl dd{
	font-size: 15px;
	font-size: 1.5rem;
	padding-top: 10px;
}


	
/** shop **********/
#shop{
	width: 100%;
	margin: 40px 0 0 0;
	padding: 0 10px;
}

#shopInner{
	display: block;
	padding: 30px 0 0 0;
}

#shopPhoto{
	display: block;
	width: 100%;
}

#shopInner dl{
	display: block;
	width: 100%;
	padding: 15px 0 0 0;
}

#shopInner dl dt{
	font-size: 20px;
}

#shopInner dl dd{
	font-size: 15px;
	font-size: 1.5rem;
	padding: 15px 0 0 0;
}

#aboutShop{
	margin: 20px 0 0 0;
	padding: 20px;
}

#aboutShop dl dt{
	font-size: 20px;
	font-size: 2.0rem;
}

#aboutShop dl dd{
	font-size: 14px;
	font-size: 1.4rem;
	padding: 10px 0 0 0;
}

	
	
/** bannerHanger **********/
#bannerHanger h2{padding: 30px 0 20px 0;}

	
	
/** access **********/
#access{
	margin: 30px 0 0 0;
	padding: 0 10px;
	min-width: 100%;
	background: none;
	/*background: url("../img/access_bg1.png") no-repeat left 5%,url("../img/access_bg2.png") no-repeat right 20%;
	background-size: 100px auto,120px auto;*/
}

#access p{
	font-size: 16px;
	font-size: 1.6rem;
	padding: 15px 0 0 0;
}

#map{
	margin: 10px 0 0 0;
	height: 50vw;
}

#map iframe{
	width: 100%;
	height: 100%;
}

	
/** footer **********/
footer{
	margin: 30px 0 0 0;
	padding: 0 10px;
}

#inquiry{padding: 10px;}

#inquiry dl{padding: 15px 0;}

#inquiry dl dd{
	padding: 20px 0 0 0;
	font-size: 15px;
	font-size: 1.5rem;
}
	
#inquiry dl dt img{width: 179px;}

#inquiry dl dd img{width: 250px;}

#copyRight{
	padding: 20px 0;
	font-size: 12px;
	font-size: 1.2rem;
}



}