@charset "utf-8";

/* @group Reset */
/* HTML5 */
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {
display:block;
}
*{ margin: 0;padding: 0}

a { text-decoration : none;
color: #4c4d49}
ul, ol { list-style : none}
img { vertical-align : middle}

/* @end */


/* @group Fluid-img */

img { max-width : 100%;
border-style:none;}


/* @end */


/* @group HTML */
body{
/*	background-color:#F2F2F2;*/
	}
html {
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Osaka",sans-serif;
font-size : 72%; /*レスポンシブタイプセッティングの指定*/
line-height : 1.6;
color:4c4d49}


/* @end */


/* @group Heading */

h1 {
font-size : 3em; /* 48px */
line-height : 1; /* 48px */
margin-bottom : 0.5em
} 

h1 img{
	margin-left:0.5em;
	}
	
h2 {
	font-weight:normal;
font-size : 2.25em; /* 36px */
line-height : 1.3333; /* 48px */
margin-bottom : 0.6667em } 


h3 {

margin-top:1em;
font-weight:normal;
line-height : 1; /* 24px */
margin-bottom : 1em; 
color:#4c4d49;} 
h4 {
margin-top:1.2em;
font-size : 1.2em; /* 24px */
font-weight:normal;
line-height : 1; /* 24px */
margin-bottom : 1em;
color:#4c4d49;} 

hgroup h2 {
font-size : 1.0em; /* 16px */
font-weight:normal;
line-height : 1.5; /* 24px */
margin-bottom :0em } 

/* @end */

/* @group Header */

header { 
width:100%;
padding-top : 1.5em;
/*background : #F2F2F2;*/
/*background : #F2F2F2;*/
}

header h1 { margin-bottom : 0.1em;
text-align:center;
}
#headercol p.headerp{
	background: url("../../assets/images/point.png") no-repeat scroll left center rgba(0, 0, 0, 0);
    padding: 0 0 0 20px;
    position: absolute;
    right:5%;
    text-transform: uppercase;
    top: 5px;
	}
header h2 {color : #4c4d49;
margin-left:1%;
padding-left:1%;
padding-right:2%;
text-align:center;
 margin-bottom : 1.5em}

/* @end */

/* @group Nav */



/* @end */

/* @group Contents */

#contents {
 clear:both;
 width : 90%;
 margin : 0 auto;
 background-color:#FFFFFF;
}
#sub{
	width:90%;
	 margin : 20px auto;
	}
#contents p { 
margin-bottom : 1.5em;
text-align : left}
#contents img { 
margin-bottom : 1.5em; 
}
#news{
	clear:both;
	width:100%;

	margin:0px auto;


	}
	#sub{
		width:100%;

		}
aside{
	border-top:5px solid #CCC;	
	width:100%;
	margin:0 auto;

	}
#reciept{
	width:100%;
	margin:0 auto;
	position:relative;


}
/* @end */

/* @group Footer */

footer {
padding : 1.5em 0;
color : black;
text-align : center;}

/* @end */
  ul { width: 100%; font-weight: normal; }
	ul li { width: 50%; float: left; text-align: center;}
		ul li a { padding: 10px 0px 10px;

		display: block;
		color : #1E3C56}
	ul li a:hover {
		color : white;
		background-color : #ccc}

ul li.left_nav a{
	border-top:1px solid #ccc;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}
ul li.top_nav a{
	border-top:1px solid #ccc;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}
ul li.center_nav a{
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}

nav p{
	clear:both;
	padding-left:2%;
	margin:20px auto;
	margin-bottom:0px;
	padding-top:2%;
	}
nav p a{
	color:#009;
	}
#mainimg{
	width:100%;
	background:url(../images/kimonoshop.jpg) no-repeat scroll center top / 200% auto;
	background-position:center;
  clear: both;
  margin: 10px auto 10px;
	padding-top: 51.5%;
}
#about_kimono{

		margin-top:4%;
	}
	
#recieptin a:hover{
	opacity:0.5;
	}
	
#sub a:hover{
	opacity:0.5;
	}
/*768px*/
@media screen and (min-width : 768px){

html{ font-size :73%} /*レスポンシブタイプセッティングの指定*/

/* @group Nav */
header h1 { margin-bottom : 0.1em;
text-align:left;
}
header h2 { color : #50617F;
margin-left:1%;
padding-left:1%;
padding-right:2%;
text-align:left;
}
nav {
margin-bottom : 1.5em;
}

nav ul { width:95%; overflow : hidden; margin:0 auto;}
nav ul li {width:16.66%; margin:0 auto; float : left}
nav ul li a {
	padding:3px 0 3px;
　display : block;
　color : #ffffff;
　padding : 0.5em 0}


ul li.left_nav a{
		border-top:none;
	  border-left: 1px solid #ccc!important;
		border-right: 1px solid #ccc;
		border-bottom:none;
	}
ul li.top_nav a{
	border-top:none;
		border-right: 1px solid #ccc;
		border-bottom: none;}
		
ul li.center_nav a{
		border-right: 1px solid #ccc;
		border-bottom: none;
	}
nav ul li a:hover {
　color : white;
　background-color : #333}
nav p{
	padding-left:2%;
	margin:0 auto;
	margin-top:15px;
	margin-bottom:0px;
	padding-top:0px;
	}
nav p a{
	color:#0}
#contents {
	overflow:hidden;
	width:98%;
 clear:both;

}
#aside{
	clear:both;
	width:100%;
	}
#contents #main,
#contents #sub { 
	width:95%;
  clear:both;
  margin : 0 auto;

} 

#sub{
	padding-top:10px;

	}
#mainimg{
	  width:100%;
		background:url(../images/kimonoshop.jpg) no-repeat scroll 0 10px ;
		background-position:center;
    clear: both;
		height:400px;
    margin: 0px auto 10px;
		padding-top:0px;
	}

#news{
	clear:both;
	width:100%;
	height:150px;
	margin:0px auto;


	}
#newsin{
	width:100%;
  float:left;
	margin:0 auto;


	}
#enter{
	float:left;
　width:60%;
	margin:0 auto;
	padding-bottom:15px;

	}
#news h3{

	}
#news dl{
		float:left;
		}
#news dt{
	float:left;
	width:100px;
	}
	
#news dd{
width:400px;
padding-left:20px;
	}	

#reciept{
	clear:both;
	width:100%;

	margin:0 auto;
	position:relative;


}

#manufacture{
	width:23%;
	float:left;
	margin-left:1%;
	margin-bottom:2%;
	height:270px;

}


#garden{
	width:23%;
	margin-left:2%;
	float:left;
	margin-bottom:2%;
	height:270px;
}

#experience{
	width:23%;
	float:left;
	margin-left:2%;
  margin-bottom:2%;
	height:270px;
}

#shop{
	width:23%;
	float:left;
	margin-bottom:2%;
	margin-left:1%;
	height:270px;
}

#reciept img{
	width:100%;
}	

#sub{
	width:98%;
	padding-top:30px;


	}

aside{
	margin:0 auto;
	border-top:1px solid #ccc;	
	}
#aside img{

	margin:0 auto;
}
#about_kimono{
	width:23%;
	height:100px;
	float:left;
	margin-left:1%;
		margin-top:4%;
	}
	
#about_sightseen{
	width:23%;
	height:100px;
	float:left;
	margin-left:2%;
	margin-top:4%;
	}

#gallery{
	width:23%;
	height:100px;
	float:left;
	margin-left:2%;
	margin-top:4%;

	}
	footer {
	clear:both;
	width : 100%; /*940/1024*/
	margin : 0 auto}

.pagetop {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 20px;
}
.pagetop a {
	display: block;
	width: 50px;
	height: 50px;
	background-color: #333;
	text-align: center;
	color: #fff;
	font-size: 24px;
	text-decoration: none;
	line-height: 50px;
}
	}

/*1024px*/
@media screen and (min-width : 1024px) {

html{ font-size :73%} /*レスポンシブタイプセッティングの指定*/

header { 
width:100%;
padding-top : 1.5em;
/*background : #F2F2F2;*/
/*background : #F2F2F2;*/
}

#headercol h1 {
	width:950px;
float:left;
margin-bottom : 0.1em;
text-align:left;
}
header h2 { color : #4c4d49;
clear:both;
text-align:left;
 margin-bottom : 1.5em}
hgroup{
	width:1024px;
	margin:0 auto;
	}
#headercol p.headerp{
    padding: 0 0 0 15px;
    position: relative;
    right:5%;
    text-transform: uppercase;
    top: 0px;
}
#headercol p.headerp{
	background: url("../../assets/images/point.png") no-repeat scroll left center rgba(0, 0, 0, 0);
	width:40px;
	padding-top:0px;
	pading-left:2px;
  float:right;
	}
/* @group Nav */

nav {
margin-bottom : 1.5em;
}

nav ul { width:1024px; overflow : hidden; margin:0 auto;}
nav ul li { width : 170px; margin:0 auto; float : left}
nav ul li a {
　display : block;
　color : #ffffff;
　padding : 0.5em 0}
ul li.left_nav a{
		border-right: 1px solid #ccc;
		border-bottom:none;
	}
	
ul li.center_nav a{
		border-right: 1px solid #ccc;
		border-bottom: none;
	}
nav ul li a:hover {
　color : white;
　background-color : #333}
nav p{
	width:1024px;
	margin:0 auto;
	margin-top:15px;
	margin-bottom:0px;
	}
nav p a{

	color:#009;
	}
/* @end */

/* @group Contents */


#contents {
	overflow:hidden;
	width:100%;
  clear:both;


}

#contents p { 
　margin-bottom : 1.5em;
　text-align : left}


#contents #main,
#contents #sub { 
  clear:both;
	width:100%;
	margin:0 auto
} 

#mainimg{
	height:400px;
	background:url(../images/kimonoshop.jpg) no-repeat;
	background-position: center top;
  clear: both;
  margin: 0px auto 0px;


	}
#news{
	width:1024px;
　margin:10px auto 0;
	}

#enter{
	clear:both;
	float:left;
  width:100%;
	margin:0 auto;
	padding-left:20px;
	padding-bottom:15px;

	}

#enter p{
	width:1000px;
	}
#news h3{

	}
	
#news dt{
	float:left;
	}
	
#news dd{
	width:400px;
	margin-left:15%;
	}


#shimebata{

	width:185px;
	float:left;
	margin-left:1%;
	margin-bottom:2%;
	height:270px;

}


#treedying{
	width:185px;
	margin-left:2%;
	float:left;
	margin-bottom:2%;
	height:270px;
}

#maddying{
	width:185px;
	float:left;
	margin-bottom:2%;
	margin-left:2%;
	height:270px;
}
#coloron{
	width:185px;
	float:left;
	margin-left:1%;
	height:270px;
}

#weaving{

	width:185px;
	float:left;
	margin-left:1%;
	height:270px;
}

#reciept{
	width:1024px;
	margin:0 auto;
	position:relative;

}
#recieptin{
	width:1024px;
  padding:2%;
　border-color:#E5E5E5;
  backgrouond-size:contain;
	margin:1% auto 1%;
}

#reciept h4{
	}
#reciept p{
	padding:2%;
	}

#manufacture{
	width:232px;
	float:left;
	margin-left:1%;
	margin-bottom:2%;
	height:270px;

}


#garden{
	width:232px;
	margin-left:2%;
	float:left;
	margin-bottom:2%;
	height:270px;
}

#experience{
	width:232px;
	float:left;
	margin-left:2%;
  margin-bottom:2%;
	height:270px;
}

#shop{
	width:232px;
	float:left;
	margin-bottom:2%;
	margin-left:2%;
	height:270px;
}
#reciept img{
	width:100%;
	margin:0 auto;
}

#sub{
	padding-top:30px;
　width:100%;
  margin:0 auto;
	height:100px;

	}

aside{
	width:1024px;
	margin:0 auto;
		border-top:1px solid #ccc;

	
	}
#aside img{
	margin:0 auto;
}
#about_kimono{
	width:23%;
	float:left;
	margin-left:2%;
	margin-top:4%;


	}
	
#about_sightseen{
	width:23%;
	float:left;
	margin-left:2%;
	margin-bottom:2%;
	margin-top:4%;

	}

#gallery{
	width:23%;
	float:left;
	margin-left:2%;
	margin-bottom:2%;
	margin-top:4%;

	}
/* @end */


/* @group Footer */

footer {
		clear:both;
	padding-top:20px;
	width : 1024px; 
	margin : 0 auto}
div#footcol{
	width:1024px;
	}
ul#footerlist {
	width:1024px;
	margin:0 auto;
	}

ul#footerlist li{
	margin:0 auto 20px;
	padding-left:2%;
	width:14.6%;
	}
footer p{
	clear:both;
	}
/* @end */

}