@charset "UTF-8";
/*
-----------------------------------------------
Honda Miso Honten Web Site ver.1 Navigation CSS
Author:   Hideyuki Koyama -MONTAGE lab.(http://www.montagelab.jp)
Version:  2013, Oct
----------------------------------------------- */

@import url("ie-fix.css");

/*-- common link
----------------------------------------------- */
a{ text-decoration:underline; color:#C6000C; outline:none;}
a:hover{ text-decoration:underline; color:#f00;}
a:active{ text-decoration:underline; color:#f66;}
a:visited{}



/*-- head navigation
----------------------------------------------- */
.home #headnavwrap { display:none;}
#headnavwrap { position:fixed; top:-100px; left:0; width:100%; height:51px; background:url(../img/common/bg_headnav.png) repeat-x 0 0; z-index:9000;}
#headnav { margin:0 auto; width:920px; font-size:13px; font-size:1.3rem;}
#headnav ul { padding:4px 0 0 0;}
#headnav ul li { float:left; margin-right:24px;}
#headnav ul li#hn_onlineshop { float:left; margin-right:0;}

#headnav ul li a{ display:block; padding:30px 0 0 0; height:0; text-decoration:none; overflow:hidden; opacity:0; filter:alpha(opacity=0);
transition:opacity 0.2s ease;
}
#headnav ul li#hn_home{ width:83px; background:url(../img/navigation/hn_home.png) no-repeat 0 -30px;}
#headnav ul li#hn_about{ width:160px; background:url(../img/navigation/hn_about.png) no-repeat 0 -30px;}
#headnav ul li#hn_kodawari{ width:170px; background:url(../img/navigation/hn_kodawari.png) no-repeat 0 -30px;}
#headnav ul li#hn_recipe{ width:170px; background:url(../img/navigation/hn_recipe.png) no-repeat 0 -30px;}
#headnav ul li#hn_items{ width:110px; background:url(../img/navigation/hn_items.png) no-repeat 0 -30px;}
#headnav ul li#hn_onlineshop{ width:100px; background:url(../img/navigation/hn_onlineshop.png) no-repeat 0 -30px;}

#headnav ul li#hn_home a{ width:83px; background:url(../img/navigation/hn_home.png) no-repeat 0 0;}
#headnav ul li#hn_about a{ width:160px; background:url(../img/navigation/hn_about.png) no-repeat 0 0;}
#headnav ul li#hn_kodawari a{ width:170px; background:url(../img/navigation/hn_kodawari.png) no-repeat 0 0;}
#headnav ul li#hn_recipe a{ width:170px; background:url(../img/navigation/hn_recipe.png) no-repeat 0 0;}
#headnav ul li#hn_items a{ width:110px; background:url(../img/navigation/hn_items.png) no-repeat 0 0;}
#headnav ul li#hn_onlineshop a{ width:100px; background:url(../img/navigation/hn_onlineshop.png) no-repeat 0 0;}

#headnav ul li#hn_home a:hover,
#headnav ul li#hn_about a:hover,
#headnav ul li#hn_kodawari a:hover,
#headnav ul li#hn_recipe a:hover,
#headnav ul li#hn_items a:hover,
#headnav ul li#hn_onlineshop a:hover { opacity:1; filter:alpha(opacity=100);}


#headnav ul li ul { display:none; position:relative; width:174px; font-size:13px; font-size:1.3rem; box-shadow:1px 1px 6px rgba(0,0,0,0.4); z-index:9999;}
#headnav ul li:hover ul {display:block;}
#headnav ul li ul li ul {display:none;}

#headnav ul li ul li { float:none; margin:0; padding:0; width:174px; height:auto; background:#000; background:rgba(0,0,0,0.8); border:solid #554E36; border-width:0 0 1px 0; opacity:1 !important;}
#headnav ul li ul li a { float:none; padding:8px 4px 6px 10px; width:160px !important; height:20px; text-indent:0; text-align:left; color:#AA9C6B; background:none !important; opacity:1 !important; filter:alpha(opacity=100) !important;}
#headnav ul li ul li a:hover { color:#D7CB9B;}



#un_greeting #headnav ul li#hn_about a,
#unchanged #headnav ul li#hn_about a,
#location #headnav ul li#hn_about a,
#un_profile #headnav ul li#hn_about a,
#saikyomiso #headnav ul li#hn_about a { opacity:1; filter:alpha(opacity=100);}


#aboutmiso #headnav ul li#hn_kodawari a,
#aesthetic #headnav ul li#hn_kodawari a { opacity:1; filter:alpha(opacity=100);}

#items #headnav ul li#hn_items a,
#item #headnav ul li#hn_items a { opacity:1; filter:alpha(opacity=100);}





/*-- foot navigation
----------------------------------------------- */
#footnav h3{
margin:1em 0 0.5em 0;
font:normal 14pt/1.8 "Times New Roman", Times, serif;
color:#973;
}
#footnav h3 a{
text-decoration:none;
color:#973;
}

#footnav.nav ul li a{
color:#777;
text-decoration:none;
}
#footnav.nav ul li ul li a{
color:#AEAAA4;
text-decoration:underline;
background:url(../img/navigation/fn_li.gif) no-repeat 0 0.6em;
}
#footnav.nav a:hover{
color:#f33;
}


/*-- contact navigation
----------------------------------------------- */
p#b_contact {
	position:absolute;
	left:312px;
	width:100px;
	height:20px;
	background:url(../img/navigation/b_contact.png) no-repeat 0 -20px;
	background-size:100px 40px;
	padding:0;
	margin:0;
}
#b_contact a {
	display:block;
	width:100px;
	height:20px;
	text-indent:-9000px;
	overflow:hidden;
	outline:none;
	background:url(../img/navigation/b_contact.png) no-repeat 0 0;
	background-size:100px 40px;
	opacity:0;
	filter:alpha(opacity=0);
	transition:opacity 0.2s ease;
}
#b_contact a:hover {
	opacity:1;
	filter:alpha(opacity=100);
}

/*-- privacy-policy navigation
----------------------------------------------- */
p#b_privacy-policy {
	position:absolute;
	left:420px;
	width:100px;
	height:20px;
	background:url(../img/navigation/b_privacy-policy.png) no-repeat 0 -20px;
	background-size:100px 40px;
	padding:0;
	margin:0;
}
#b_privacy-policy a {
	display:block;
	width:100px;
	height:20px;
	text-indent:-9000px;
	overflow:hidden;
	outline:none;
	background:url(../img/navigation/b_privacy-policy.png) no-repeat 0 0;
	background-size:100px 40px;
	opacity:0;
	filter:alpha(opacity=0);
	transition:opacity 0.2s ease;
}
#b_privacy-policy a:hover {
	opacity:1;
	filter:alpha(opacity=100);
}

/*-- jp site navigation
----------------------------------------------- */
p#b_jp{
position:absolute;
margin:0; padding:0;
width:86px; height:20px;
border-right:1px solid #ccc;
background:url(../img/navigation/b_jp.gif) no-repeat 0 -20px;
}
#b_jp a{display:block; width:64px; height:20px; text-indent:-9000px; overflow:hidden; outline:none; background:url(../img/navigation/b_jp.gif) no-repeat 0 0;
opacity:0; filter:alpha(opacity=0);
transition:opacity 0.2s ease;
}
#b_jp a:hover{opacity:1; filter:alpha(opacity=100);}

/*-- en site navigation
----------------------------------------------- */
p#b_en{
float:left;
margin:0; padding:0;
width:86px; height:20px;
border-right:1px solid #ccc;
background:url(../img/navigation/b_en.gif) no-repeat 0 0;
}
#b_en a{ display:block; width:64px; height:20px; text-indent:-9000px; overflow:hidden; outline:none; background:url(../img/navigation/b_en.gif) no-repeat 0 -20px;
opacity:0; filter:alpha(opacity=0);
transition:opacity 0.2s ease;
}
#b_en a:hover{ opacity:1; filter:alpha(opacity=100);}



/*-- index navigation
----------------------------------------------- */
#mokuji { padding:124px 0 0 10px;}

h3#h_index_hondamiso,
h3#h_index_aboutmiso,
h3#h_index_recipe a,
h3#h_index_items a,
h3#h_index_onlineshop a{
margin:0;
padding:0;
width:220px;
height:45px;
text-indent:-9000px;
overflow:hidden;
}
h3#h_index_hondamiso{ height:26px; background:url(../img/navigation/h_index_hondamiso.png) no-repeat 0 0;}
h3#h_index_aboutmiso{ height:26px; background:url(../img/navigation/h_index_aboutmiso.png) no-repeat 0 0;}
h3#h_index_recipe a{ display:block; background:url(../img/navigation/h_index_recipe.png) no-repeat 0 0;}
h3#h_index_items a{ display:block; background:url(../img/navigation/h_index_items.png) no-repeat 0 0;}
h3#h_index_onlineshop a{ display:block; background:url(../img/navigation/h_index_onlineshop.png) no-repeat 0 0;}

h3#h_index_recipe a:hover,
h3#h_index_items a:hover,
h3#h_index_onlineshop a:hover { opacity:0.7; filter:alpha(opacity=70);}


/*-- index navigation
----------------------------------------------- */
#mokuji ul { margin:0; padding:5px 0 22px 0;}
#mokuji li { float:left; margin:0; width:auto; padding-right:12px; background:url(../img/navigation/diagonal.gif) no-repeat right top;}

#in_greeting a,
#in_yomoyama a,
#in_history a,
#in_profile a,
#in_location a,
#in_saikyomiso a,
#in_wonder a,
#in_aesthetic a,
#in_miso a { display:block; height:21px; text-indent:-9000px; overflow:hidden;}

#in_greeting a{ width:41px; background:url(../img/navigation/in_greeting.gif) no-repeat 0 0;}
#in_yomoyama a{ width:88px; background:url(../img/navigation/in_yomoyama.gif) no-repeat 0 0;}
#in_history a{ width:127px; background:url(../img/navigation/in_history.gif) no-repeat 0 0;}
#in_profile a{ width:60px; background:url(../img/navigation/in_profile.gif) no-repeat 0 0;}
#in_location a{ width:46px; background:url(../img/navigation/in_location.gif) no-repeat 0 0;}
#in_saikyomiso a{ width:121px; background:url(../img/navigation/in_saikyomiso.gif) no-repeat 0 0;}

#in_wonder a{ width:72px; background:url(../img/navigation/in_wonder.gif) no-repeat 0 0;}
#in_aesthetic a{ width:124px; background:url(../img/navigation/in_aesthetic.gif) no-repeat 0 0;}
#in_miso a{ width:128px; background:url(../img/navigation/in_miso.gif) no-repeat 0 0;}


#in_greeting a:hover,
#in_yomoyama a:hover,
#in_history a:hover,
#in_profile a:hover,
#in_location a:hover,
#in_saikyomiso a:hover,
#in_wonder a:hover,
#in_aesthetic a:hover,
#in_miso a:hover { opacity:0.7; filter:alpha(opacity=70);}




/*-- home banner
----------------------------------------------- */
/*#banners {margin-top:60px;}
#banners ul {}
#banners ul li { float:left; margin-right:10px; margin-bottom:10px;}
#banners ul li a:hover { opacity:0.7; filter:alpha(opacity=70);}*/



/*-- aesthetic nav
----------------------------------------------- */
.n_aesthetic ul li 	{font-size:12px; font-size:1.2rem;}
.n_aesthetic ul li em { font-size:14px; font-size:1.4rem}
.n_aesthetic ul li a { display:block; margin:0 0 4px; padding:6px 16px 4px 16px; text-decoration:none; color:#666; background:url(../img/navigation/arrow_aesthetic.png) no-repeat right center; border:1px solid #ccc; border-radius:4px;}
.n_aesthetic ul li a:hover { color:#C6000C; background:#f0f0f0 url(../img/navigation/arrow_aesthetic.png) no-repeat right center;}

.col_aa { padding:0 0 80px 240px;}
.col_aa ul li { float:left; margin-right:10px; width:350px; font-size:11px; font-size:1.1rem;}
.col_aa ul li em { font-size:13px; font-size:1.3rem}
.col_aa ul li a { display:block; margin:0 0 4px; padding:6px 16px 4px 10px; text-decoration:none; color:#666; background:url(../img/navigation/arrow_aesthetic.png) no-repeat right center; border:1px solid #ccc; border-radius:4px;}
.col_aa ul li a:hover { color:#C6000C; background:#f0f0f0 url(../img/navigation/arrow_aesthetic.png) no-repeat right center;}
.col_aa ul li.selected a { color:#AA9C6B; background:#f3f3f3 url(../img/navigation/arrow_aesthetic.png) no-repeat right center;}


/*-- itemlist navigation
----------------------------------------------- */
/*.itemlist{
margin:10px 0 40px 0;
}
.itemlist:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; }  
* html .itemlist             { zoom: 1; }  IE6 
*:first-child+html .itemlist { zoom: 1; }  IE7 

.itemlist a{
text-decoration:none; transition:opacity 0.2s ease;
}
.itemlist li{
float:left;
padding: 0 0 18px 0;
width:198px;
border:solid #ddd;
border-width:0 1px 1px 0;
font-size:12px; font-size:1.3rem;
line-height:1.25;
}
.itemlist li.left{
border-left:1px solid #ddd;
}
.itemlist li.selected{
background:#eee;
}
.itemlist li .name{
padding:4px 8px 0 8px;
height:2.5em;
overflow:hidden;
display:block;
}
.itemlist li .price{
padding:0 8px 4px;
display:block;
}
.itemlist li a{ color:#6B5F33;}
.itemlist li a:hover{ color:#C6000C; opacity:0.7; filter:alpha(opacity=70);}*/



/*-- button navigation
----------------------------------------------- */
.column p.button{
margin:0 0 5px 0;
padding:0;
}
p.button a{
display:block;
padding:0.5em 0.5em;
text-decoration:none;
border:1px solid #ccc;
border-radius: 6px; 
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
p.button a:hover{
background:#E8DFCB;
}

#subcol p.button{
margin:0 0 5px 0;
padding:0;
}
#subcol p.button a{
border:1px solid #555;
color:#ccc;
background:#111;
}
#subcol p.button a:hover{
color:#fff;
background:#333;
}


.btn a { padding:12px 24px 11px 18px; text-align:center; text-decoration:none; color:#222;
font-family:"ヒラギノ明朝 Pro W3","ＭＳ Ｐ明朝", "細明朝体", serif;
background:#AA9C6B; transition:background-color 0.2s ease;
}
.btn a:hover { background:#D4B03F;}


.b_onlineshop { display:block; padding:9px 0 7px; text-align:center; text-decoration:none; font-size:12px; font-size:1.2rem; color:#574303;
background:#AA9C6B;
}
a:hover .b_onlineshop { background:#D4B03F;}