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

* {margin:0; padding:0;}

body{ margin:0; padding:0; background: #fafafa; height:100%; }
img{ border:0; vertical-align:bottom; }


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


/*-- body background
----------------------------------------------- */
body#home {
}
body#unchanged #wrapper {
background:#fafafa url(../img/common/bg_bk2.gif) repeat-y center top;
}
/*
body#home #wrapper {
background:url(../img/common/bg_index.jpg) no-repeat center top;
}
*/

/*-- basic layout box
----------------------------------------------- */
#wrapper{
position:relative;
text-align:center;
}
#headerwrap{position:relative; margin:0 auto; text-align:left;}
#containerwrap{position:relative; margin:0 auto; text-align:left; z-index:20;}
#footerwrap{clear:both; text-align:left; border-top:1px solid #ddd; background:#fafafa;}
#slidewrap{display:none;text-align:left; }


/*-- #headerwrap
----------------------------------------------- */
#header{position:relative; margin:0 auto; width:960px;}
#branding{
position:absolute;
top:124px;
right:20px;
z-index:10;
}
#branding h1{
margin:0;
padding:0;
width:156px;
height:255px;
}

#header #images{
position:relative; top:0; left:0; height:390px;
}
#header #images .image{
position:absolute; top:0; left:-120px;
}

#aesthetic #headerwrap,
#saikyomiso #headerwrap,
#aboutmiso #headerwrap,
#healthy #headerwrap,
#recipetop #headerwrap{
background:#000;
}


/*-- #containerwrap
----------------------------------------------- */
#container{position:relative; margin:0 auto; width:960px;}
#maincol{
float:left;
position:relative; /* IE6 layout bug fix */
padding:40px 0;
width:960px;
}


/*-- #footerwrap
----------------------------------------------- */
#footer{
position:relative;
margin:0 auto;
padding:4px 0 16px 528px;
width:400px;
}



/*-- #home
----------------------------------------------- */
#headerwrap{overflow:hidden;}
#home #header #images{
position:relative; top:0; left:50%; height:auto;
}
#home #header #images .image{
position:relative; top:0; left:-60px;
background:#000;
}
#home #containerwrap #maincol{
margin-top:-840px;
width:420px;
}

/*-- #unchanged
----------------------------------------------- */
#unchanged #header #images{
position:relative; top:0; left:50%; height:auto;
}
#unchanged #header #images .image{
position:relative; top:0; left:150px;
}
#unchanged #containerwrap #maincol{
margin-top:-760px;
width:460px;
}
#unchanged #subcol{
float:right;
width:210px;
}

/*-- #un_profile
----------------------------------------------- */
#un_profile #header #images{
position:relative; top:0; left:50%; height:auto;
}
#un_profile #header #images .image{
position:relative; top:0; left:150px;
background:#000;
}
#un_profile #containerwrap #maincol{
margin-top:-760px;
width:460px;
}


/*-- #location
----------------------------------------------- */
#location #containerwrap{
border-top:1px solid #ddd;
}
#location #header #images{
position:relative; top:0; left:0; width:613px; height:auto; border-right:1px solid #ddd;
}
#location #header #images .image{
position:relative; top:0; left:-50px;
}


/*-- #history
----------------------------------------------- */
#history #containerwrap #maincol{
margin-top:-340px;
}


/*-- #type
----------------------------------------------- */
#type #containerwrap #maincol{
margin-top:-460px;
}
#type #header #images{
position:relative; top:0; left:0; height:660px;
}
#type #header #images .image{
position:absolute; top:40px; left:120px;
}


/*-- #wonder
----------------------------------------------- */
#wonder #containerwrap #maincol{
margin-top:-340px;
}
#power #containerwrap #maincol{
margin-top:-340px;
}


/*-- #processed
----------------------------------------------- */
#processed #containerwrap{
border-top:1px solid #ddd;
}


/*-- #recipe
----------------------------------------------- */
#recipe_top #containerwrap{
border-top:1px solid #ddd;
}
#recipe #containerwrap{
border-top:1px solid #ddd;
}
#recipe #maincol{
width:613px;
border-right:1px solid #ddd;
}
#recipe #header #images{
position:relative; top:0; left:0; width:613px; height:408px; border-right:1px solid #ddd;
}
#recipe #header #images .image{
position:absolute; top:0; left:-50px;
}


/*-- #gifts
----------------------------------------------- */
#gift #containerwrap{
border-top:1px solid #ddd;
}
#gift #maincol{
width:613px;
border-right:1px solid #ddd;
}
#gift #header #images{
position:relative; top:0; left:0; width:613px; height:408px; border-right:1px solid #ddd;
}
#gift #header #images .image{
position:absolute; top:0; left:-50px;
}



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


.cola, .colb, .colc, .cold{width:210px;}

.col2{width:450px;}
.col2 .cola{float:left;}
.col2 .colb{float:right;}
.col2:after {  
visibility: hidden;  
display: block;  
font-size: 0;  
content: " ";  
clear: both;  
height: 0;  
}  
* html .col2             { zoom: 1; } /* IE6 */  
*:first-child+html .col2 { zoom: 1; } /* IE7 */


.col3{width:690px;}
.col3 .cola{float:left;padding:0 34px 0 0;}
.col3 .colb{float:left;}
.col3 .colc{float:right;}


.col4{width:940px;}
.col4 .cola{float:left;padding:0 33px 0 0;}
.col4 .colb{float:left;padding:0 33px 0 0;}
.col4 .colc{float:left;}
.col4 .cold{float:right;}


.cel2{
width:440px !important;
}
.cel3{
width:696px !important;
}

/* layout check 
#header{border:1px solid #0ff;}
#container{border:1px solid #00f;}
#footer{border:1px solid #0f0;}
#maincol{border:1px solid #f00;}
.cola, .colb, .colc, .cold{
border:1px solid #f00;
}
*/

/* -- SLIDESHOW (#recipe #gifts) -- */
div#BG{position:relative; height:408px; }
div#BG div.IMAGES{ clear:both; position:absolute; top:0; left:-50px; display:inline; float:left; width:663px; height:408px; margin:0 0; padding:0 0; border-right:1px solid #ddd; background:#fff; }
div#BG div.IMAGES div.IMAGE{ position:absolute; top:0; left:0; display:inline; float:left; width:663px; height:408px; margin:0 0 1px 0; padding:0; background:#fff no-repeat 0 0 scroll; filter:alpha(opacity=1); }
div#BG div.IMAGES div.IMAGE img{ clear:both; display:inline; float:none; border:none; margin:0; padding:0; }
/* -- SLIDESHOW (THUMBNAILS) -- */
ol#SLIDE_BUTTON{ display:none;}


/* ------------------------------ @media print{ ------------------------------ */
@media print{
body div#BG{ height:auto; background-image:none !important; text-align:left; }
body div#BG ul.SUB{ display:none !important; }

/* -- IMAGE (SLIDESHOW) -- */
body div#BG div.IMAGES{ position:static; top:0px; display:inline; float:none !important; margin:0px; padding:0px; width:640px; height:auto !important; border:none; }
body div#BG div.IMAGES div.IMAGE{ position:static; display:inline !important; float:none !important; margin:0px; border:none; filter:alpha(opacity=100) !important; KhtmlOpacity:1 !important; MozOpacity:1 !important; opacity:1 !important; }
body div#BG div.IMAGES div.IMAGE img{ clear:none; float:none; width:49%; height:auto; border:none; margin:1px 1px 0px 0px; padding:0px; }
body ol#SLIDE_BUTTON{ display:none !important; }

body div.SHEET div.DOWNLOAD ol li a em{ color:#d21 !important; }
body div.SHEET div.RELATED{ display:none !important; }
}


/* -- SLIDESHOW (recipe_top) -- */
/* -- SLIDESHOW (gifts_top) -- */
div#BG {
	position:relative;
	height:390px;
}
div#BG div.IMAGES {
	clear:both;
	position:absolute;
	top:0;
	left:-120px;
	display:inline;
	float:left;
	width:1200px;
	height:390px;
	margin:0 0 0 0;
	padding:0 0;
	border:none;
}
div#BG div.IMAGES div.IMAGE {
	position:absolute;
	top:0;
	left:0;
	display:inline;
	float:left;
	width:1200px;
	height:390px;
	margin:0 0 1px 0;
	padding:0;
	filter:alpha(opacity=1);
}
div#BG div.IMAGES div.IMAGE img {
	clear:both;
	display:inline;
	float:none;
	border:none;
	margin:0;
	padding:0;
}

/* -- SLIDESHOW (recipe_top) -- */
#recipe_top div#BG div.IMAGES {
	background:#fff;
}
#recipe_top div#BG div.IMAGES div.IMAGE {
	background:#fff no-repeat 0 0 scroll;
}
/* -- SLIDESHOW (gifts_top) -- */
#aboutmiso div#BG div.IMAGES {
	background:#000;
}
#aboutmiso div#BG div.IMAGES div.IMAGE {
	background:#000 no-repeat 0 0 scroll;
}

/* -- SLIDESHOW (recipe) -- */
#recipe div#BG div.IMAGES {
	left:-50px;
	background-color:transparent;
}
#recipe div#BG div.IMAGES div.IMAGE {
	background-color:transparent;
}
/* -- SLIDESHOW (gifts) -- */
#gift div#BG div.IMAGES {
	left:-50px;
	background-color:transparent;
}
#gift div#BG div.IMAGES div.IMAGE {
	background-color:transparent;
}