@charset "utf-8";

#beer_contents .sp_none{display:none;}


/* #container .contents #main_contents #beer_contents
======================================================================= */
#beer_contents{
}


/* #beer_contents #beer_contents_hd
======================================================================= */
#beer_contents_hd{
background:url(../img/bg_sp.png) no-repeat 50% 0 #f9ca02;
background-size:100% auto;
}

#beer_contents_hd h2{
line-height:0;
padding: 20px 10px 0 10px;
}

#beer_contents_hd h2 img{
width:100%;
height:auto;
}

/* #beer_contents_hd .navi
==================================== */
#beer_contents_hd .navi{
text-align:left;
padding:30px 10px 0 10px;
}

#beer_contents_hd .navi dl{
width:100%;
background:url(../img/hd_navi/bg_sp.png) no-repeat 0 0;
background-size:100% auto;

}


#beer_contents_hd .navi dl dt{
display:block;text-indent:100%;white-space:nowrap;overflow:hidden;line-height:0;
padding:12% 0 0 0;
}

#beer_contents_hd .navi dl dd{
padding:0 5% 0 5%;
}

#beer_contents_hd .navi dl dd ul:after{content:""; clear:both; display:block;}

#beer_contents_hd .navi dl dd ul li{
line-height:0;
width:33%;
float:left;
text-align:center;
}

#beer_contents_hd .navi dl dd ul li.navi_04,
#beer_contents_hd .navi dl dd ul li.navi_05,
#beer_contents_hd .navi dl dd ul li.navi_06{
float:right;
}

#beer_contents_hd .navi dl dd ul li a{
display:block;
}

#beer_contents_hd .navi dl dd ul li img{
width:78%;
height:auto;
margin:0 auto 20% auto;
}

#beer_contents_hd .navi dl dd ul li a.hover img{
opacity:0.7;
filter:alpha(opacity=70);
-ms-filter:"alpha(opacity=70)";
}


/* #beer_contents #material
==================================== */
#material{
padding:25px 10px 40px 10px;
text-align:left;
}

/* #material #material_01
-------------------------------------------------- */
#material_01 dl dt{
text-align:center;
line-height:0;
}

#material_01 dl dt img{
width:30%;
height:auto;
}

#material_01 dl dd{
margin:10px 0 0 0;
font-size:14px;
line-height:160%;
color:#333;
}


/* #material #material_02
-------------------------------------------------- */
#material_02 dl{
margin:30px 0 0 0;
width:100%;
}

#material_02 dl:after{content:""; clear:both; display:block;}

#material_02 dl dt{
margin:0 0 10px 0;
}

#material_02 dl dt:after{content:""; clear:both; display:block;}

#material_02 dl dt em,
#material_02 dl dt i{
display:block;
float:left;
}

#material_02 dl dt em{
line-height:0;
}

#material_02 dl dt em img{
width:80%;
height:auto;
}

#material_02 dl dt i{
color:#9a5e00;
font-size:14px;
line-height:100%;
font-weight:bold;
padding:5px 0 0 0;
}

#material_02 dl dd.ph{
display:inline;
float:right;
width:35%;
line-height:0;
}

#material_02 dl dd.ph img{
width:100%;
height:auto;
margin:0 0 2px 2px;
}


#material_02 dl dd.txt{
display:inline;
font-size:14px;
line-height:160%;
color:#333;
}


/* #material #material_03
-------------------------------------------------- */
#material_03{
margin:40px 0 0 0;
}

#material_03 dl{
background-color:#317808;
padding:15px 20px 15px 20px;
}

#material_03 dl dd:before{
background:url(../img/material/03_sp.png) no-repeat 0 0;
background-size:50px 44px;
content:"";
float:left;
width:50px;
height:44px;
margin:-30px 0 0 -30px;
}

#material_03 dl dd{
font-size:14px;
line-height:160%;
color:#fff;
}

#material_03 dl dt{
text-align:center;
}

#material_03 dl dt img{
width:80%;
margin:20px auto 0 auto;
}

#material_03 dl dt a.hover img{
opacity:0.9;
filter:alpha(opacity=90);
-ms-filter:"alpha(opacity=90)";
}


/* #beer_contents #charge
==================================== */
#charge{
background:url(../img/charge/bg_sp.png) no-repeat 50% 30px #fff;
background-size:100% auto;
text-align:left;
padding:0 0 40px 0;
}

/* #charge #charge_01
-------------------------------------------------- */
#charge_01 dl dt{
line-height:0;
}

#charge_01 dl dt img{
width:30%;
height:auto;
margin:25px 0 0 65%;
}

#charge_01 dl dd{
padding:38% 10px 20px 10px;
font-size:14px;
line-height:160%;
color:#333;
}

/* #charge #charge_02
-------------------------------------------------- */
#charge_02{
padding:0 10px 0 10px;
}

#charge_02 dl{
border:1px solid #b80;
padding:12px;
}

#charge_02 dl dt{
font-size:16px;
line-height:110%;
color:#b80;
text-align:center;
margin:0 0 10px 0;
}

#charge_02 dl dd{
font-size:14px;
line-height:160%;
color:#b80;
}

/* #charge #charge_03
-------------------------------------------------- */
#charge_03{
padding:5px 10px 0 10px;
}

#charge_03 ul li{
background:url(../img/charge/03_bg.png) repeat-x 0 0 #fffad2;
padding:0 0 25px 0;
margin:15px 0 0 0;
}

#charge_03 ul li dl dt,
#charge_03 ul li dl dd.ph{
line-height:0;
}

#charge_03 ul li dl dt img,
#charge_03 ul li dl dd.ph img{
width:100%;
height:auto;
}

#charge_03 ul li dl dt img{
margin:5px 0 0 0;
}

#charge_03 dl dd.txt{
font-size:14px;
line-height:150%;
color:#7a3300;
padding:3px 15px 20px 15px;
}


/* #beer_contents #ferment
==================================== */
#ferment{
background:url(../img/ferment/bg_sp.png) no-repeat 50% 0 #000;
background-size:100% auto;
text-align:left;
padding:0 0 40px 0;
}

/* #ferment #ferment_01
-------------------------------------------------- */
#ferment_01 dl dt{
line-height:0;
}

#ferment_01 dl dt img{
width:30%;
height:auto;
margin:25px 0 0 5%;
}

#ferment_01 dl dd{
padding:38% 10px 20px 10px;
font-size:14px;
line-height:160%;
color:#fff;
}

/* #ferment #ferment_02
-------------------------------------------------- */
#ferment_02{
padding:0 10px 0 10px;
}

#ferment_02 dl{
border:1px solid #fff;
padding:12px;
}

#ferment_02 dl dt{
font-size:16px;
line-height:110%;
color:#fff;
text-align:center;
margin:0 0 10px 0;
}

#ferment_02 dl dd{
font-size:14px;
line-height:160%;
color:#fff;
}


/* #beer_contents #storage
==================================== */
#storage{
background:url(../img/storage/bg_sp.png) no-repeat 50% 0 #2a1804;
background-size:100% auto;
text-align:left;
padding:0 0 40px 0;
}

/* #storage #storage_01
-------------------------------------------------- */
#storage_01 dl dt{
line-height:0;
}

#storage_01 dl dt img{
width:30%;
height:auto;
margin:25px 0 0 65%;
}

#storage_01 dl dd{
padding:40% 10px 20px 10px;
font-size:14px;
line-height:160%;
color:#fff;
}


/* #beer_contents #filtration
==================================== */
#filtration{
background:#ececec;
padding:0 0 40px 0;
text-align:left;
}

#filtration_01:before{
background:url(../img/filtration/bg.png) no-repeat 0 0;
background-size:160px 160px;
content:"";
float:left;
width:160px;
height:160px;
margin:-35px 0 -120px 55%;
}

/* #filtration #filtration_01
-------------------------------------------------- */
#filtration_01{
}

#filtration_01 dl dt{
line-height:0;
}

#filtration_01 dl dt img{
width:30%;
height:auto;
margin:25px 0 0 5%;
}

#filtration_01 dl dd{
padding:10% 10px 20px 10px;
font-size:14px;
line-height:160%;
color:#333;
}

/* #filtration #filtration_02
-------------------------------------------------- */
#filtration_02{
padding:0 10px 0 10px;
}

#filtration_02 dl{
border:1px solid #b80;
padding:12px;
}

#filtration_02 dl dt{
font-size:16px;
line-height:110%;
color:#b80;
text-align:center;
margin:0 0 10px 0;
}

#filtration_02 dl dd{
font-size:14px;
line-height:160%;
color:#b80;
}


/* #beer_contents #packaging
==================================== */
#packaging{
background:url(../img/packaging/bg_sp.png) no-repeat 50% 0 #fef3a6;
background-size:100% auto;
text-align:left;
padding:0 0 30px 0;
}

/* #packaging #packaging_01
-------------------------------------------------- */
#packaging_01 dl dt{
line-height:0;
}

#packaging_01 dl dt img{
width:70%;
height:auto;
margin:25px 0 0 5%;
}

#packaging_01 dl dd{
padding:77% 10px 20px 10px;
font-size:14px;
line-height:160%;
color:#333;
}

/* #packaging #packaging_02
-------------------------------------------------- */
#packaging_02{
padding:0 10px 0 10px;
}

#packaging_02 dl{
border:1px solid #b80;
padding:12px;
}

#packaging_02 dl dt{
font-size:16px;
line-height:110%;
color:#b80;
text-align:center;
margin:0 0 10px 0;
}

#packaging_02 dl dd{
font-size:14px;
line-height:160%;
color:#b80;
}