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


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



/*-- slide navigation
----------------------------------------------- */
#b_open{
cursor:pointer;
position:relative;
top:0;
left:0;
}
#slidewrap h3{
margin:2em 0 0.5em 0;
font:normal 14pt/1.8 "Times New Roman", Times, serif;
color:#fff;
}
#slidewrap h3 a{
text-decoration:none;
color:#fff;
}

#slidewrap{
position:absolute;
width:100%;
background:#12100E url(../img/common/bg_slidewrap.png) repeat-x left bottom;
z-index:999;
opacity:0.8;
filter:alpha(opacity=80);
}
.nav{
margin:0 auto;
padding:0 0 40px 0;
width:960px;
}
.nav .cola{
float:left;
padding:0 20px 0 0;
width:340px;
}
.nav .colb{
float:left;
width:270px;
}
.nav .colc{
float:right;
padding:0 0;
width:290px;
}

.nav ul li{
font-size:10.5pt;
padding:0 0 12px 0;
line-height:1.4;
}
.nav ul li a{
color:#ccc;
text-decoration:none;
}
.nav ul li ul li{
float:left;
padding:0 0;
}
.nav ul li ul{
padding:0 0 0 5px;
}
.nav ul li ul li a{
margin:0 21px 0 0;
padding:0 0 0 5px;
font-size:10pt;
color:#AEAAA4;
white-space: nowrap;
text-decoration:underline;
background:url(../img/navigation/sn_li.gif) no-repeat 0 0.6em;
}
.nav a:hover{
color:#fff;
}



/*-- 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;
}
/*-- 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);}



/*-- index navigation
----------------------------------------------- */
#nav{
padding:114px 0 0 10px;
}

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


/*-- index navigation
----------------------------------------------- */
#nav ul{
padding:0 0 16px 0;
}
#nav li{
margin:0 0 20px 0;
}
#in_unchanged a,
#in_saikyo a,
#in_aesthetic a,
#in_location a,
#in_aboutmiso a,
#in_healthy a,
#in_process a,
#in_recipe a{
display:block;
width:220px;
height:30px;
text-indent:-9000px;
overflow:hidden;
}

#in_unchanged a{
background:url(../img/navigation/in_unchanged.png) no-repeat 0 0;
}
#in_saikyo a{
background:url(../img/navigation/in_saikyo.png) no-repeat 0 0;
}
#in_aesthetic a{
width:280px;
background:url(../img/navigation/in_aesthetic.png) no-repeat 0 0;
}
#in_location a{
background:url(../img/navigation/in_location.png) no-repeat 0 0;
}
#in_aboutmiso a{
width:230px;
background:url(../img/navigation/in_aboutmiso.png) no-repeat 0 0;
}
#in_healthy a{
width:230px;
background:url(../img/navigation/in_healthy.png) no-repeat 0 0;
}
#in_process a{
background:url(../img/navigation/in_process.png) no-repeat 0 0;
}
#in_recipe a{
background:url(../img/navigation/in_recipe.png) no-repeat 0 0;
}


#in_unchanged a:hover,
#in_saikyo a:hover,
#in_aesthetic a:hover,
#in_location a:hover,
#in_aboutmiso a:hover,
#in_healthy a:hover,
#in_process a:hover,
#in_recipe a:hover,
h3#h_index_gifts a:hover{
opacity:0.7;
filter:alpha(opacity=70);
}


/*-- giftlist navigation
----------------------------------------------- */
#giftlist{
margin:10px 0 0 0;
}
#giftlist a{
text-decoration:none;
}
#giftlist li{
float:left;
padding: 0 0 8px 0;
width:152px;
border:solid #ddd;
border-width:0 1px 1px 0;
font-size:86%;
line-height:1.25;
}
#giftlist li.left{
border-left:1px solid #ddd;
}
#giftlist li.selected{
background:#eee;
}
#giftlist li .name{
padding:4px 8px 0 8px;
height:2.5em;
overflow:hidden;
display:block;
}
#giftlist li .price{
padding:0 8px;
display:block;
}
#giftlist li a:hover{
opacity:0.7;
filter:alpha(opacity=70);
}


/*-- xtra navigation
----------------------------------------------- */
#extranav{
position:absolute;
top:0;
left:0;
width:100%;
z-index:1000;
}
#extranav ul{
margin:0 auto;
width:960px;
}
#extranav li{
float:right;
margin:0 1px 0 0;
}
#extranav li#b_menu a{
display:block;
width:80px;
height:40px;
text-indent:-9000px;
overflow:hidden;
background:url(../img/navigation/b_menu.png) no-repeat 0 0;
opacity:0.7;
filter:alpha(opacity=70);
}
#extranav li#b_menu.close a{
background:url(../img/navigation/b_menu.png) no-repeat 0 -40px;
}
#extranav li#b_menu a:hover{
opacity:1;
filter:alpha(opacity=100);
}
#extranav li#b_home a{
display:block;
width:80px;
height:40px;
text-indent:-9000px;
overflow:hidden;
background:url(../img/navigation/b_home.png) no-repeat 0 0;
opacity:0.7;
filter:alpha(opacity=70);
}
#extranav li#b_home a:hover{
opacity:1;
filter:alpha(opacity=100);
}
#home #extranav li#b_home{
display:none;
}
#extranav li#b_menu{
display:none;
}


/*-- 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;
}