@charset "UTF-8";

	
/* example
----------------------------------------------- */
	

.anim{
	-moz-transition: -moz-all 300ms cubic-bezier(.50,.0,.50,1);
    -webkit-transition: -webkit-all 300ms cubic-bezier(.50,.0,.50,1);
    -o-transition: -o-all 300ms cubic-bezier(.50,.0,.50,1);
    -ms-transition: -ms-all 300ms cubic-bezier(.50,.0,.50,1);
    transition: all 300ms cubic-bezier(.50,.0,.50,1);
}

p:nth-of-type(2){}


p:last-child{}





/* class
----------------------------------------------- */
a.btn{ display:block;  text-indent: 200%; white-space: nowrap;overflow: hidden;height:inherit;}


ul.sns{}
ul.sns li{ display:inline-block; margin-right:10px;}

ul.sns li.facebook { width:20px; height:20px;}
ul.sns li.twitter { width:23px; height:20px;}


ul.arrowLink{}
ul.arrowLink li{ position:relative; margin-bottom:10px;}
ul.arrowLink li a{ display:block; padding-left:1.5em; line-height:1.5;}
ul.arrowLink li a:before{
		content:"→";
		display:block;
		position:absolute;
		left:0px;
		top:2px;
}


ul.arrowLink li:last-child{ margin-bottom:0;}


/* common
----------------------------------------------- */


footer#globalFooter .logo{background:url(./img/logo_black.png) center center no-repeat; background-size:contain; position:absolute; bottom:20px; left:30px; z-index:11; width:250px; height:40px; overflow:hidden;}

footer#globalFooter .copy{position:absolute; bottom:0px; right:30px; z-index:11; text-align:right; width:auto; height:80px; overflow:hidden; font-size:0.7rem; line-height:1.6; color:#666; white-space:nowrap;letter-spacing:0.1em; display:table-cell; vertical-align:middle; }
footer#globalFooter .copy a{ color:#666 !important; display:table-cell; vertical-align:middle; height:80px;}

footer#globalFooter ul.link{ width:auto; position:absolute; bottom:20px; left:20px;}

footer#globalFooter ul.link li{ margin:0 10px; display:inline-block;}
footer#globalFooter ul.link li a{opacity:.7;transition: all 300ms cubic-bezier(.50,.0,.50,1);}
footer#globalFooter ul.link li a:hover{ opacity:1;}
footer#globalFooter ul.link li img{ width:100%; height:auto;}

footer#globalFooter ul.link li.contact	{ width:40px; height:40px;}
footer#globalFooter ul.link li.facebook	{ width:40px; height:40px;}
footer#globalFooter ul.link li.instagram{ width:40px; height:40px;}




/* top
----------------------------------------------- */
#siteLogo{ 
	background:url(./img/logo.png) center center no-repeat; 
	background-size:contain; 
	position:fixed; 
	top:calc(44% - 0px); 
	left:10%; 
	z-index:5; 
	width:80%; 
	height:0; 
	padding-top:12%; 
	overflow:hidden;  
	opacity:0; 
	border:solid 0px #f30;

	transition: all 1000ms cubic-bezier(.50,.0,.50,1);
}

#siteLogo.active{ opacity:1;}


ul#siteMenu{ text-align:left; position:fixed; top:50px; left:50px;z-index:9; width:0; overflow:hidden;transition: all 1000ms cubic-bezier(.50,.0,.50,1);}
	ul#siteMenu.active{ width:700px;}
	ul#siteMenu.deactive{  width:0px !important;}
	body.noIntro ul#siteMenu{ width:700px;}

	
ul.menu li{ margin-bottom:10px; width:auto; white-space:nowrap;}
ul.menu li a{ color:#333 !important; padding-left:1.5em; position:relative; line-height:1; opacity:.7;transition: all 300ms cubic-bezier(.50,.0,.50,1); cursor:pointer;}
ul.menu li a:hover{ opacity:1;}
ul.menu li a:before{ content:'≫'; display:inline-block; position:absolute; top:0.2em; left:0;}

#menuNav{position:fixed; top:0px; left:0px;z-index:9; width:0; overflow:hidden;transition: all 300ms cubic-bezier(.50,.0,.50,1); width:50px; height:50px; background-color:#333; cursor:pointer;}
#menuNav:hover{ background-color:#666;}
#menuNav hr{ position:absolute; width:31px; height:0; border-bottom:solid 3px #fff;}
#menuNav hr:nth-of-type(1){ top:12px; left:8px;}
#menuNav hr:nth-of-type(2){ top:22px; left:8px;}
#menuNav hr:nth-of-type(3){ top:32px; left:8px;}

body#top.home ul.menu li a{color:#fff !important;}


/* section
----------------------------------------------- */


.content-area section.contents{ transition: all 1000ms ease-out;}
body#top.home .content-area section.contents{display:none;  }

.content-area section.contents.open{ opacity:1;}

.content-area h2{ font-size:2.5rem; margin-bottom:60px; text-align:center; color:#999;}


/* about
----------------------------------------------- */


.content-area section#about .detail{ text-align:left; overflow:hidden; position:relative; width:80%; margin:auto;}

.content-area section#about .detail h3{ line-height:1; margin-bottom:15px; font-size:1.4rem;font-weight: 500;}

.content-area section#about .detail .thumbInner{ padding-left:230px; min-height:200px; margin-bottom:25px;}
.content-area section#about .detail .thumbInner .photo{ width:200px; height:200px; position:absolute; top:0; left:0;}
.content-area section#about .detail .moreInner{ min-height:200px;}

	.content-area section#about .about{ font-size:1.2rem; margin-bottom:80px;}
	.content-area section#about .ayuko{ margin-bottom:50px; padding-bottom:50px; border-bottom:solid 1px #ccc;}
	.content-area section#about .onao{ margin-bottom:100px; padding-bottom:50px; border-bottom:solid 1px #ccc;}
	
	.content-area section#about .ayuko .thumbInner{ margin-bottom:80px;}
	.content-area section#about .ayuko .moreInner{ overflow:hidden;}
	.content-area section#about .ayuko .moreInner .image{ width:49%; float:left; padding-top:25%;}
	.content-area section#about .ayuko .moreInner .image_1{ background:url(./img/photo/image_1.jpg) center center no-repeat; background-size:cover; margin-right:1%;}
	.content-area section#about .ayuko .moreInner .image_2{ background:url(./img/photo/image_2.jpg) center center no-repeat; background-size:cover; margin-left:1%;}

.content-area section#about .stores{}
.content-area section#about .stores dl{}
.content-area section#about .stores dl dt{ font-size:1.2rem;}
.content-area section#about .stores dl dd{ font-size:0.9rem;margin-bottom:50px;}





/* product
----------------------------------------------- */



.content-area section#products .category{ text-align:center; overflow:hidden; position:relative; width:80%; margin:0 auto  100px auto; border-bottom:solid 1px #ccc; padding-bottom:50px; vertical-align:top;}
.content-area section#products .category h3{ line-height:1; margin-bottom:30px; font-size:1.8rem; color:#999;font-weight: 500;}





.content-area section#products .item { position:relative; width:27%; overflow:hidden; min-height:550px;margin:0 2% 50px 2%; display:inline-block; letter-spacing:0;}
.content-area section#products .item .photo{ width:100%; height:0px; padding-top:100%; background-color:#f2f2f2; border:solid 1px #ddd;  position:relative; top:0; left:0; text-indent:-999px; overflow:hidden; margin-bottom:20px;}

.content-area section#products .item .name{}
.content-area section#products .item .data{ min-height:210px}
.content-area section#products .item .material{}

.content-area section#products .item dl{ overflow:hidden;margin-bottom:20px;text-align:left;  }
.content-area section#products .item dl dt{ clear:both; width:60px; color:#999; font-size:0.8em; line-height:1.5;margin-bottom:2px;}
.content-area section#products .item dl dd{ margin-bottom:15px; line-height:1.5;}

.content-area section#products .item dl dd ul{}
.content-area section ul li{ display:inline-block; margin:0 5px 3px 0; width:15px; height:15px; text-indent:-999px; overflow:hidden; position:relative;}

.content-area section#products .item dl dt:nth-of-type(1){ display:none;}
.content-area section#products .item dl dd:nth-of-type(1){ font-size:1.2em; font-weight:700;margin-bottom:20px; }

 

  
.content-area section ul li.black{ background-color:#282828;}
.content-area section ul li.gray{ background-color:#ccc;}
.content-area section ul li.darkgreen{ background-color:#346633;}
.content-area section ul li.pink{ background-color:#fecccb;}
.content-area section ul li.orange{ background-color:#fd5e36;}
.content-area section ul li.red{ background-color:#cc3433;}
.content-area section ul li.blue{ background-color:#2678a0;}



.content-area section ul li.pinkgray{ background-color:#fecccb;}

.content-area section ul li.pinkgray:after{ content:''; display:inline-block; position:absolute; top:0; right:0; width:7.5px; height:15px; background-color:#ccc;}


.content-area section ul li.lightmix{ background-color:#fecccb;}
.content-area section ul li.darkmix{ background-color:#ccc;}

.content-area section ul li.lightmix:before,
.content-area section ul li.darkmix:before{ content:''; display:inline-block; position:absolute; top:0; left:0; width:5px; height:15px;}

.content-area section ul li.lightmix:after,
.content-area section ul li.darkmix:after{ content:''; display:inline-block; position:absolute; top:0; right:0; width:5px; height:15px;}

.content-area section ul li.lightmix:before{ background-color:#fe5e36;}
.content-area section ul li.darkmix:before{ background-color:#000;}

.content-area section ul li.lightmix:after{ background-color:#ccc;}
.content-area section ul li.darkmix:after{ background-color:#666;}






.content-area section#products .item .more{ display:inline-block; width:65%; float:left;}

.content-area section#products .item .more a{ display:block; padding:10px 0px; text-decoration:none !important; color:#fff; font-weight:700; letter-spacing:0.05em; font-size:0.8em; line-height:1;}


.content-area section#products .item .more a{ background-color:#680000;}

.content-area section#products .item .more a:hover{ opacity:.6; }

.content-area section#products .stores{ padding-top:100px;}
.content-area section#products .stores dl{}
.content-area section#products .stores dl dt{ font-size:1.2rem;}
.content-area section#products .stores dl dd{ font-size:0.9rem;margin-bottom:50px;}








/* product detail
----------------------------------------------- */
body#products.detail #bg{  background:url(./img/bg_products_detail.jpg) right center no-repeat; background-size:cover;}


.itemDetail{}




body#products .content-area .itemDetail { position:relative; width:100%; overflow:hidden; min-height:550px;margin:0 0 100px 0; display:inline-block; padding:0 20% 100px 20%; border-bottom:solid 1px #ccc;}
body#products .content-area .itemDetail .photo{ width:100%; height:0px; padding-top:100%; background-color:#f2f2f2; border:solid 1px #ddd;  position:relative; top:0; left:0; text-indent:-999px; overflow:hidden; margin:0 auto 20px auto;}

body#products .content-area .itemDetail .name{}
body#products .content-area .itemDetail .data{}
body#products .content-area .itemDetail .material{}

body#products .content-area .itemDetail dl{ overflow:hidden;margin-bottom:20px;text-align:left;  }
body#products .content-area .itemDetail dl dt{ clear:both; width:60px; color:#999; font-size:0.8em; line-height:1.5;margin-bottom:2px;}
body#products .content-area .itemDetail dl dd{ margin-bottom:15px; line-height:1.5;}

body#products .content-area .itemDetail dl dd ul{}
body#products .content-area .itemDetail dl dd ul li{ display:inline-block; margin:0 5px 3px 0; width:15px; height:15px; text-indent:-999px; overflow:hidden; position:relative;}

body#products .content-area .itemDetail dl dt:nth-of-type(1){ display:none;}
body#products .content-area .itemDetail dl dd:nth-of-type(1){ font-size:1.2em; font-weight:700;margin-bottom:20px; }

 

body#products .content-area .itemDetail .buy{ display:inline-block; width:48%; float:left;}

body#products .content-area .itemDetail .buy a{ display:block; padding:10px 0px; text-decoration:none !important; color:#fff; font-weight:700; letter-spacing:0.05em; font-size:0.8em; line-height:1;}

body#products .content-area .itemDetail .buy{  margin-left:0%; }

body#products .content-area .itemDetail .buy a{ background-color:#680000; }

body#products .content-area .itemDetail .buy a:hover{ opacity:.6; }