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

/* 1 Overwrite style setting*/
/* 2 Layout style setting*/
/* 3 Header style setting*/
/* 4 Contents style setting*/
/* 5 Shop-intro style setting*/
/* 6 footer style setting*/

/* 1 Overwrite style setting*/
body{
	width:100%;
	background-color:#eeece7;
	font-size:62.5%;
	font-family: 'Patua One', cursive, 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	}

#wrapper{
	width:100%;
	}
	
/* 2 Layout style setting*/
#header{
	width:1000px;
	height:600px;
	margin:0 auto;
	color:#327260d;
	}

.section{
	width:1000px;
	margin:0 auto;
	}

.section h2{
	font-size:2.3rem;
	text-align:center;
	margin-top:5%;
	color:#37260d;
	}
	
#footer{
	width:1000px;
	margin:0 auto;
	}
	
/* 3 Header style setting*/

.headerimg{
	width:100%;
	height:600px;
	position:relative;
	top:0;
	left:0;
	overflow:hidden;
	}

.headerimg #mainimg{
	display:block;
	width:100%;
	height:auto;
	z-index:0;
	position:absolute;
	top:0px;
	left:0px;
	}
	
.headerimg p #logoS{
	width:64px;
	height:auto;
	position:absolute;
	top:3%;
	left:5%;
	}
	
.headerimg p.shopname{
	width:290px;
	height:auto;
	font-size:1.2rem;
	position:absolute;
	top:3%;
	left:15%;
	}
	
.headerimg nav ul#forPC{
	width:375px;
	z-index:1;
	list-style:none;
	position:absolute;
	top:3%;
	right:5%;
	}

#header li{
	display:inline-block;
	font-size:1.2rem;
	margin-right:20px;
	}

#header li a{
	text-decoration:none;
	color:#37260d;
	}

#header li a::after{
	content:"";
	display:block;
	border-bottom:1px solid #37260d;
	margin:5px auto 0;
	width:0;
	-webkit-transition:width 0.3s ease-in-out;
	-moz-transition:width 0.3s ease-in-out;
	-o-transition:width 0.3s ease-in-out;
	-ms-transition:width 0.3s ease-in-out;
	transition:width 0.3s ease-in-out;
	}

#header li a:hover::after{
	width:100%;
	}
	
#navigation2{
	display:none;
	}
	
.headerimg p img#logoL{
	width:298px;
	height:auto;
	z-index:2;
	position:absolute;
	top:142px;
	left:355px;
	}

/* 4 Contents style setting*/
.section ul#parents{
	width:1000px;
	margin:0 auto;
	}
	
.section ul li.p1{
	margin-top:20px;
	display:inline-block;
	width:245px;
	height:353px;
	position:relative;
	top:0px;
	left:1%;
	}

.section ul li ul.conceptDetail{
	width:245px;
	position:absolute;
	top:0px;
	left:0px;
	display:none;
	list-style:none;
	}
.section ul li ul.conceptDetail li{
	text-decoration:none;
	text-align:center;
	font-size:1em;
	color:#ffffff;
	text-shadow:0 0 5px #000000;
}

.section ul li ul.conceptDetail li h3{
	font-size:1.5rem;
	margin-top:40px;
	letter-spacing:1.3px;
	color:#D4EFDB;
	text-shadow:-1px -1px 1px #000;
	display:inline-block;
	border-bottom:#D4EFDB solid 1px;
	}

.section ul li ul.conceptDetail li h4{
	font-size:1.2rem;
	margin-top:5px;
	margin-bottom:5px;
	font-weight:bold;
	color:#D4EFDB;
	text-shadow:-1px -1px 1px #000;
}

.section ul li ul.conceptDetail li a{
	display:inline-block;
	text-decoration:none;
	list-style:none;
	text-shadow:#2E2929 5px 5px 5px;
	color:#ffffff;
	margin-top:10px;
	font-size:1.2rem;
	font-weight:bold;
	}

.section ul li ul.conceptDetail li a::after{
	content:"";
	display:block;
	border-bottom:1px solid #ffffff;
	margin:5px auto 0;
	width:0;
	-webkit-transition:width 0.3s ease-in-out;
	-moz-transition:width 0.3s ease-in-out;
	-o-transition:width 0.3s ease-in-out;
	-ms-transition:width 0.3s ease-in-out;
	transition:width 0.3s ease-in-out;
	}

.section ul li ul.conceptDetail li a:hover::after{
	width:100%;
	}	

/*concept*/	

.concept{
	background-image:url(../img/concept.png);
	width:245px;
	height:353px;
	transition:all 0.4s;
	background-size:contain;
	}

.concept:hover{
	background-image:url(../img/concepton.png);
	background-size:contain;
}


/*flow*/	
.flow{
	background-image:url(../img/flow.png);
	width:245px;
	height:353px;
	transition:all 0.4s;
	background-size:contain;
	}
	
.flow:hover{
	background-image:url(../img/flowon.png);
	background-size:contain;
	}

/*menu*/
.menu{
	background-image:url(../img/menu.png);
	width:245px;
	height:353px;
	transition:all 0.4s;
	background-size:contain;
	}
	
.menu:hover{
	background-image:url(../img/menuon.png);
	background-size:contain;
	}
	
/*info*/
.info{
	background-image:url(../img/info.png);
	width:245px;
	height:353px;
	transition:all 0.4s;
	background-size:contain;
	}
	
.info:hover{
	background-image:url(../img/infoon.png);
	background-size:contain;
	}
/* 5 Shop-intro style setting*/

.section h3.name{
	font-size:1.5rem;
	color:#ffffff;
	padding-top:17px;
	padding-bottom:17px;
	text-align:center;
	width:1000px;
	background-color:#6b5c49;
	margin:0 auto;
	margin-top:20px;
	}

.section  #text{
	width:1000px;
	margin:0 auto;
	background-color:#928680;
	padding-top:15px;
	padding-bottom:30px;
	overflow:hidden;
	height:auto;
	position:relative;
	}
	
.section #text img{
	position:absolute;
	top:0;
	right:0;
	}

.section p.text2{
	font-size:1.2rem;
	color:#ffffff;
	width:695px;
	padding-top:15px;
	padding-left:20px;
	}
	
/* 6 footer style setting*/
#footer .footer{
	width:1000px;
	height:100px;
	margin:0 auto;
	margin-top:30px;
	position:relative;
	overflow:hidden;
	}

#footer #footerimg{
	display:block;
	width:1000px;
	position:absolute;
	top:0px;
	left:0px;
	z-index:0;
	}

#footer p #logoSf{
	width:64px;
	height:auto;
	position:absolute;
	top:12%;
	left:5%;
	z-index:1;
	color:#ffffff;
	}

.footer p.shopnamef{
	width:290px;
	height:auto;
	display:inline-block;
	line-height:normal;
	letter-spacing:normal;
	padding:0;
	position:absolute;
	top:15%;
	left:15%;
	z-index:2;
	font-size:1.2rem;
	color:#fff;
	}

.footer ul{
	width:375px;
	z-index:3;
	position:absolute;
	top:15%;
	right:5%;
	}

.footer ul li{
	display:inline-block;
	margin-right:20px;
	font-size:1.2rem;
	list-style:none;
	}
	
.footer li a{
	text-decoration:none;
	color:#ffffff;
	}
	
.footer li a::after{
	content:"";
	display:block;
	border-bottom:1px solid #ffffff;
	margin:5px auto 0;
	width:0;
	-webkit-transition:width 0.3s ease-in-out;
	-moz-transition:width 0.3s ease-in-out;
	-o-transition:width 0.3s ease-in-out;
	-ms-transition:width 0.3s ease-in-out;
	transition:width 0.3s ease-in-out;
	}

.footer li a:hover::after{
	width:100%;
	}

#footer .footer p.copy{
	display:block;
	width:800px;
	position:absolute;
	right:5px;
	bottom:5px;
	font-size:0.8em;
	text-align:right;
	color:#fff;
	}

/*//////////////////////////////////////////////////////////////////////////*/
@media screen and (max-width:500px){
/* 2 Layout style setting*/
#header{
	width:100%;
	height:auto;
	}

.section{
	width:100%;
	}

.section h2{
	font-size:18px;
	}
	
#footer{
	width:100%;
	}

/* 3 Header style setting*/

#header li a{
	color:#fff;
	}
#header li a::after{
	border-bottom:1px solid #fff;
	}

.headerimg{
	width:100%;
	height:0px;
	padding-top:60%;
	}

.headerimg p #logoS{
	width:5%;
	}
	
.headerimg p.shopname{
	width:100%;
	font-size:11px;
	margin:0 auto;
	}
	
.headerimg nav ul#forPC{
	display:none;
	}


#navigationbtn{
	display:block;
	width:100%;
	height:100px;
	background-color:#6b5c49;
	border-radius:5px;
	padding-top:3%;
	}
	
.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}

.mobileNav{
	width:100%;
	height:40px;
	display:block;
	}

#navigation2{
	width:100%;
	text-align:center;
	display:inline-block;
	}
	
#navigation2 ul{
	width:80%;
	margin:0 auto;
	}

#navigation2 li{
	margin:0px;
	padding:0 10px;
	border-left:1px solid #fff;
}

#navigation2 li.border{
	border-right:1px solid #fff;
	}
	
.headerimg p img#logoL{
	width:30%;
	height:auto;
	z-index:2;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	}
	
/* 4 Contents style setting*/
.section ul#parents{
	width:100%;
	}
	
.section ul li.p1{
	margin-top:20px;
	display:inline-block;
	width:49%;
	height:0px;
	padding-top:69%;
	position:relative;
	}

.section ul li ul.conceptDetail{
	width:70%;
	height:auto;
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	margin:auto;
	display:block;
	list-style:none;
	}
.section ul li ul.conceptDetail li{
	text-decoration:none;
	text-align:center;
	text-shadow:0 0 5px #000000;
}

.section ul li ul.conceptDetail li h3{
	font-size:15px;
	margin-top:10%;
	}

.section ul li ul.conceptDetail li h4{
	font-size:14px;
	margin-top:3%;
}

.section ul li ul.conceptDetail li a{
	margin-top:4%;
	font-size:12px;
	}

.section ul li ul.conceptDetail li a::after{
	content:"";
	display:block;
	border-bottom:1px solid #ffffff;
	margin:5px auto 0;
	width:0;
	-webkit-transition:width 0.3s ease-in-out;
	-moz-transition:width 0.3s ease-in-out;
	-o-transition:width 0.3s ease-in-out;
	-ms-transition:width 0.3s ease-in-out;
	transition:width 0.3s ease-in-out;
	}

.section ul li ul.conceptDetail li a:hover::after{
	width:100%;
	}	

.concept,
.flow,
.menu,
.info{
	width:49%;
	height:0px;
	padding-top:69%;
	transition:all 0.4s;
	background-size:contain;
}
/*concept*/	

.concept{
	background-image:url(../img/concepton.png);
	}

/*flow*/	
.flow{
	background-image:url(../img/flowon.png);
	}
	
/*menu*/
.menu{
	background-image:url(../img/menuon.png);
	}
	
/*info*/
.info{
	background-image:url(../img/infoon.png);
	}

/* 5 Shop-intro style setting*/

.section h3.name{
	font-size:14px;
	width:100%;
	height:auto;
	margin-top:20px;
	}

.section  #text{
	width:100%;
	margin:0 auto;
	}
	
.section #text img{
	display:none;
	}

.section p.text2{
	font-size:14px;
	width:95%;
	margin:3% auto;
	padding:0;
	}
	
/* 6 footer style setting*/
#footer .footer{
	width:100%;
	height:0px;
	padding-top:15%;
	}

#footer #footerimg{
	width:100%;
	}

#footer p #logoSf{
	width:5%;
	top:12%;
	left:5%;
	}

.footer p.shopnamef{
	width:80%;
	top:15%;
	left:15%;
	font-size:12px;
	}

.footer ul{
	display:none;
	}

#footer .footer p.copy{
	width:100%;
	font-size:8px;
	}
}