/* 基準fontsize その他基本設定 */
html {
	width: 100%;
	font-size: 62.5%;
}
 
body {
	width: 100%;
	min-width: 860px;
	color: #333333;
}

*{
	font-size: 14px;
	font-size: 1.4rem;
}

/* リンク基本設定 */
a:link{ 
	color: #333333;
	text-decoration: none;
}
a:visited{ 
	color: #333333;
	text-decoration: none;
}
a:hover{ 
	color: #333333;
	text-decoration: none;
	
}
a:active{ 
	color: #333333;
	text-decoration: none;
}

/* ヘッダー */
#header{
	width: 860px;
	margin: 15px auto;
}

#header img{
	width: 258px;
	height: 24px;
	float: left;
}

#header input[type="checkbox"]{
	display: none;
}

#header img#sp_menu{
	display: none;
}

#header ul{
	float: right;
	width: 320px;
	text-align: left;
}

#header ul li{
	float: left;
	margin-left: 25px;
	border: none;
	width: auto;
	height: auto;
}

#header ul li a{
	font-size: 10px;
	font-size: 1.0rem;
	padding-top: 2px;
	padding-left: 12px;
	background: url(../img/arrow.gif) no-repeat;
	border: none;
}

#header ul li a:hover{
	background-position: 0 -18px;
}

#header ul li a:active{
	background-position: 0 -18px;
}



/* メイン画像 */
div#mainimg{
	clear: both;
	width: 100%;
	
	position:relative;
	overflow:hidden;
}

div#mainimg img{
	width: 100%;
	height: auto;
	border-bottom: 1px solid #FFFFFF;
}
#mainimg #mv{
	position:relative;
	width:100%;
	height:0;
	top:0;
	padding:0 0 34.2% 0;
	z-index:1000;
}
#mv li{
	display:block;
	position:absolute;
	width:100%;
	left:-360px;
	top:0;
}





/* メインコンテンツの枠設定 */
#content{
	width: 860px;
	margin: 25px auto 75px;
}

/* メニュー（nav） */
#nav{
	width: 220px;
	margin-right: 20px;
	float: left;
}

#nav h2{
	width: 200px;
	height: 20px;
	padding: 10px;
	display: block;
	font-size: 18px;
	font-size: 1.8rem;
	color: #FFFFFF;
	background: #FFBF00;
	border-bottom: 3px solid #FFFFFF;
}

#nav ul li a{
	width: 195px;
	height: 40px;
	padding: 20px 0 0 25px;
	display: block;
	font-size: 18px;
	font-size: 1.8rem;
	background: url(../img/nav_bg.gif) no-repeat #FFE599;
	border-bottom: 1px solid #FFFFFF;
}

#nav ul li a:hover{
	opacity: 0.7;
}

#nav ul li a:active{
	opacity: 0.7;
}


/* 店舗のご案内 */
#main{
	width: 620px;
	float:left;
}
#main a:hover{
	opacity: 0.7;
}

#main a{
	float:left;
}

#main h2{
	padding: 10px 0;
	color: #666666;
	font-size: 18px;
	border-bottom: 2px solid #CCCCCC;
}

#main div{
	width: 300px;
	margin-top: 18px;
}

#main div.left{
	margin-right: 18px;
}

#main div h3{
	text-align: center;
	font-size: 16px;
	font-size: 1.6rem;
	color: #FF6600;
	border: 1px solid #FF6600;
	padding: 5px;
	margin-bottom: 5px;
}

#main div h4{
	margin-top: 20px;
	color: #663300;
	font-weight: bold;
	line-height: 1.5;
}

#main div p{
	line-height: 1.5;
}

/* バナー */
#main > ul{
	clear: both;
}

#main > ul li{
	float: left;
	margin-right: 10px;
	margin-top: 40px;
}

#main > ul li img{
	width: 200px;
	height: 180px;
}

#main > ul li.end{
	margin-right: 0;
}

/* お知らせ */
#news{
	width: 620px;
	margin-left: 240px;
	padding-top: 45px;
	clear: both;
}

#news h2{
	width: 540px;
	padding: 10px 0;
	color: #666666;
	font-size: 18px;
	font-size: 1.8rem;
	border-bottom: 2px solid #CCCCCC;
	float: left;
}

#news > a{
	width: 80px;
	float: left;
	padding: 12px 0;
	color: #666666;
	font-size: 14px;
	font-size: 1.4rem;
	border-bottom: 2px solid #CCCCCC;
	display: block;
	color: #006699;
}

#news ul{
	clear: both;
	padding-top: 15px;
}

#news ul li{
	margin-top: 7px;
}

#news ul li p{
	display: inline;
}

#news ul li a{
	margin-left: 20px;
}

#news a{
	color: #006699;
}
.newsinc{
	float:none;
	clear:both;
	padding-top:15px;
}


/* メニュー一覧 */
#foot_nav{
	width: 100%;
	height: 240px;
	padding: 20px 0;
	border-top: 1px solid #CCCCCC;
	background: #F2F2F2;
}

#foot_nav > div{
	width: 840px;
	margin: 0 auto;
}

#foot_nav div div{
	width: auto;
	padding: 0 47px 0 0;
	float: left;
}

#foot_nav div div.end{
	padding: 0;
}

#foot_nav div div h3{
	font-size: 14px;
	font-size:1.4rem;
	font-weight: bold;
}

#foot_nav div div ul{
	margin-top: 7px;
	margin-bottom: 25px;
}

#foot_nav div div ul li{
	margin-top: 7px;
}

#foot_nav div div ul li a{
	padding-left: 12px;
	background: url(../img/arrow.gif) no-repeat;
}

#foot_nav div div ul li a:hover{
	background-position: 0 -18px;
}

#foot_nav div div ul li a:active{
	background-position: 0 -18px;
}

/* フッター */
#footer{
	width: 100%;
	height: 110px;
	margin-top: 15px;
	clear: both;
}

#footer p{
	width: 840px;
	margin: 0 auto;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.5;
}
#footer p#copy{
	font-size: 10px;
	font-size: 1.0rem;
	color: #666666;
	padding-bottom: 30px;
}

@media screen and (max-width: 640px) {
	/* 基準fontsize その他基本設定 */
	html {
		width: 100%;
		font-size: 62.5%;
	}
	 
	body {
		width: 100%;
		min-width: 100px;
		color: #333333;
	}
	
	*{
		font-size: 18px;
		font-size: 1.8rem;
	}
	
	/* リンク基本設定 */
	a:link{ 
		color: #333333;
		text-decoration: none;
	}
	a:visited{ 
		color: #333333;
		text-decoration: none;
	}
	a:hover{ 
		color: #333333;
		text-decoration: none;
		
	}
	a:active{ 
		color: #333333;
		text-decoration: none;
	}
	
	/* ヘッダー */
	#header{
		width: 100%;
		margin: 15px auto 0;
	}
	
	#header img{
		width: 70%;
		height: auto;
		margin-bottom: 20px;
		float: left;
	}
	
	
	#header img#sp_menu{
		width: 8%;
		height: auto;
		margin-right: 10px;
		float: right;
		display: block;
	}
	#header label {
    display: block;
	}
	
	#header input[type="checkbox"].on-off{
		display: none;
	}
	
	#header ul{
		width: 100%;
		clear: both;
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-ms-transition: all 0.5s;
		-o-transition: all 0.5s;
		transition: all 0.5s;
	}
	
	#header ul li{
		width: 100%;
		margin: 0;
		overflow: hidden;
	}
	
	#header ul li a{
		width: 100%;
		font-size: 18px;
		font-size: 1.8rem;
		padding: 15px 0;
		background: #EFEFEF;
		padding-left: 10px;
		border-bottom: 1px solid #CCCCCC;
		display: block;
	}
	
	#header ul li a:hover{
		opacity: 0.7;
	}
	
	#header ul li a:active{
		opacity: 0.7;
	}
	
	input[type="checkbox"].on-off + ul{
    height: 0;
    overflow: hidden;
	}
	
	input[type="checkbox"].on-off:checked + ul{
		height: 146px;
	}
	
	/* メイン画像 */
	div#mainimg{
		clear: both;
		width: 100%;
		border-bottom: 4px solid #FF6600;
	}
	
	div#mainimg img{
		width: 100%;
		height: auto;
		border-bottom: 1px solid #FFFFFF;
	}
	
	/* メインコンテンツの枠設定 */
	#content{
		width: 100%;
		margin: 0;
		overflow: hidden;
	}
	
	/* メニュー（nav） */
	#nav{
		width: 100%;
	}
	
	#nav h2{
		width: 100%;
		height: auto;
		padding: 10px 20px;
		display: block;
		font-size: 20px;
		font-size: 2.0rem;
		color: #FFFFFF;
		background: #FFBF00;
		border-bottom: 3px solid #FFFFFF;
	}
	
	#nav ul li a{
		width: 100%;
		height: auto;
		padding: 20px 0 20px 25px;
		display: block;
		font-size: 20px;
		font-size: 2.0rem;
		background: url(../img/nav_bg.gif) no-repeat #FFE599;
		border-bottom: 1px solid #FFFFFF;
	}
	
	#nav ul li a:hover{
		opacity: 0.7;
	}
	
	#nav ul li a:active{
		opacity: 0.7;
	}
	
	/* 店舗のご案内 */
	#main{
		width: 100%;
		margin-top: 20px;
	}
	
	#main h2{
		width: 95%;
		margin: 0 auto;
		padding: 10px 0;
		color: #666666;
		font-size: 18px;
		border-bottom: 2px solid #CCCCCC;
	}
	
	#main a{
		width: 95%;
		margin: 0 auto;
		padding: 0;
		clear: both;
		float: none;
	}
	
	#main div{
		width: 100%;
		margin: 18px auto 0;
	}
	
	#main div h3{
		text-align: center;
		font-size: 18px;
		font-size: 1.8rem;
		color: #FF6600;
		border: 1px solid #FF6600;
		padding: 5px;
		margin-bottom: 15px;
	}
	
	#main div img{
		width: 50%;
		float: left;
	}
	
	#main div h4{
		width: 45%;
		margin: 0;
		color: #663300;
		font-weight: bold;
		line-height: 1.5;
		float: right;
	}
	
	#main div p{
		display: none;
	}
	
	/* バナー */
	#main > ul{
		width: 95%;
		margin: 30px auto 0;
		clear: both;
	}
	
	#main > ul li{
		width: 50%;
		margin-top: 15px;
		float: left;
		margin-right: 0;
	}
	
	#main > ul li a img{
		width: 97%;
		height: auto;
	}
	
	
	/* お知らせ */
	#news{
		width: 95%;
		padding-top: 45px;
		margin: 0 auto;
		clear: both;
	}
	
	#news h2{
		width: 100%;
		padding: 10px 0;
		color: #666666;
		font-size: 18px;
		font-size: 1.8rem;
		border-bottom: 2px solid #CCCCCC;
		float: left;
	}
	
	#news > a{
		width: 120px;
		margin-left: -120px;
		float: left;
		text-align: right;
		padding: 10px 0;
		color: #666666;
		font-size: 18px;
		font-size: 1.8rem;
		border-bottom: 2px solid #CCCCCC;
		display: block;
		color: #006699;
	}
	
	#news ul{
		clear: both;
		padding-top: 15px;
	}
	
	#news ul li{
		margin-top: 15px;
	}
	
	#news ul li p.day{
		width: 80px;
		display: block;
		float: left;
	}
	
	#news ul li p.text{
		width: 100%;
		margin-left: -80px;
		display: block;
		float: left;
	}
	
	#news ul li a{
		margin-left: 100px;
		display: block;
	}
	
	#news a{
		color: #006699;
	}
	
	/* メニュー一覧 */
	#foot_nav{
		display: none;
	}
	
	/* フッター */
	#footer{
		width: 100%;
		height: 110px;
		margin-top: 60px;
		clear: both;
		border-top: 1px solid #CACACA;
	}
	
	#footer p{
		width: 95%;
		margin: 10px auto;
		font-size: 16px;
		font-size: 1.6rem;
		line-height: 1.5;
	}
	#footer p#copy{
		font-size: 16px;
		font-size: 1.6rem;
		color: #666666;
		padding-bottom: 30px;
		text-align: center;
	}
}