@charset "utf-8";

/* ===================================================================
CSS information

 File Name  : layout.css
 Author     : 
 Style Info : 原酒の世界 第5章　CSS
=================================================================== */
#world #container{padding-bottom: 5px;}

#world section{width: 900px; margin: 20px auto 40px; font-family:"Times New Roman", Times, "Hiragino Mincho ProN", "Hiragino Mincho Pro","HG明朝B","ＭＳ 明朝", serif;}
#world h4{margin-bottom: 20px;}
#world p{font-size: 16px; line-height: 1.7; margin-bottom: 20px;}

#world .txtbox p{width: 470px;}

#world .wood{background: url(../img/backimg01.jpg); }
#world .wood p{padding: 0 40px;}
#world .wood p span{color: #c90926;}

#world section>.cat_box:first-of-type{margin-top: 40px;}
#world .cat_box{margin: 0 10px 0 40px; height: 230px; position: relative; padding-top: 30px}
#world .cat_box h5.pc{width: 250px;}
#world .cat_box h6.pc{position: absolute; top:50px; left: 350px}
#world .cat_box p{width: 580px; position: absolute; top: 110px; left: 250px; padding: 0 10px;}
#world .cat_box p b{font-weight: bold; font-size: 20px;}
#world .cat_box.last{background: none;}

#world .cont01{margin-top: 40px; background: url(../img/5_img01.jpg) no-repeat top right; padding-bottom: 20px}

#world .cont02 .cat_box{height: 210px;}

#world .cont03 .txtbox{height: 265px; margin-top: 40px; background: url("../img/5_img02.jpg")no-repeat top right; }

#world .cont04 .cat_box{height: 215px; background: url(../img/goldline.png) no-repeat bottom center;}
#world .cont04>p{margin-top: 30px; padding-bottom: 30px;}

#world .cont05 .cat_box{height: 330px;}

#world .cont06{margin: 80px auto;}
#world .cont06 .seafood{margin: 60px 0 20px; position: relative; height: 280px;}
#world .cont06 .seafood h5{position: absolute; top:0; left: 0; z-index: 2;}
#world .cont06 .seafood div{width:480px; position: absolute; top:50px; right:0; padding: 30px 40px 20px 90px; z-index: 1;}
#world .cont06 .seafood div p{padding: 0; margin-top: 20px;}
#world .cont06 .mntnfood{position: relative; height: 280px;}
#world .cont06 .mntnfood h5{position: absolute; top:0; right: 0; z-index: 2;}
#world .cont06 .mntnfood div{width:480px; position: absolute; top:30px; left:0; padding: 30px 120px 20px 40px; z-index: 1;}
#world .cont06 .mntnfood div p{padding: 0; margin-top: 20px;}
#world .cont06>h5{margin: 60px 0 20px;}

#world .cont07 h4{margin-bottom: 40px;}
#world .cont07 .cat_box{background: url(../img/goldline.png) no-repeat top center; }
#world .cont07 .cat_box:nth-of-type(2) p{top:90px;}

#world .next p{width: 350px; margin: 0 auto 30px;}
#world .next p span{padding: 0 20px;}
#world .next a:first-of-type{background: url(../img/arrow_l.png) no-repeat center left; padding-left: 40px;}
#world .next a:nth-of-type(2){background: url(../img/arrow_r.png) no-repeat center right; padding-right: 40px;}

#world #gFooter .gFooterInner{width: 1040px;}
#world #gFooter .guide_ttl{margin-bottom: 0;}

@media screen and (max-width:480px) { 
/*　画面サイズが480pxまではここを読み込む　*/
	
	#world .img80{width: 80%; margin-bottom: 10px;}
	#world .img90{width: 90%; margin-bottom: 10px;}
	#world h2.smp{margin-top: 50px;}
	#world p{margin-bottom: 10px;}
	
	#world section{width: 96%; margin: 0 auto;}
	#world section h4{text-align: center;  margin-bottom: 10px;}
	#world section h4 img{width: 80%;}
	#world section h4.smp{background: #171515; color: #fff; font-size: 18px; padding: 3px; box-shadow: 0 2px 0 #c90926;}
	
	#world .txtbox p{width: 92%;}
	
	#world .wood h4{margin-bottom: 20px;}
	
	#world .cat_box{width: 90%; height: auto; padding: 5px 5%; background-size: 90%; margin-left: 0; margin-bottom: 10px;}
	#world section>.cat_box:first-of-type{margin-top: 20px;}
	#world .cat_box h5.smp{margin-bottom: 10px; margin-top: 10px;}
	#world .cat_box h5.smp img{height: 40px;}
	#world .cat_box h6.smp{text-align: center; padding-top: 20px;}
	#world .cat_box h6.smp img{height: 24px}
	#world .cat_box p{position: static; width: 100%; }
	#world .cat_box p b{font-size: 16px;}
	
	#world .wood p{padding: 0;}
	#world .wood>p{width: 90%; margin: 0 auto;}
	#world .wood .last{padding-bottom: 10px;}
	
	#world .cont01{margin-top: 10px; background: none;}
	#world .cont01 h4 img{height: 32px; width: auto;}
	#world .cont01 .txtbox{background: url(../img/5_img01.jpg) no-repeat bottom center; background-size: 80%; padding-bottom: 52%;}

	#world .cont02 .cat_box{height: auto; margin-bottom: 20px;}
	
	#world .cont03 h3.smp img{width: 95%;}
	#world .cont03 .glass{text-align: center; margin-top: 15px; padding-bottom: 0;}
	#world .cont03 .txtbox{background: none; height: auto; margin-top: 0;}
	
	#world .cont04{padding-bottom: 15px;}
	#world .cont04 p{margin-bottom: 10px;}
	#world .cont04 .cat_box{height: auto; background-size: 90%;}
	
	#world .cont05 .cat_box{height: auto;}
	
	#world .cont06{margin: 40px auto; }
	#world .cont06 h4.smp{margin-bottom: 10px;}
	#world .cont06 h4.smp+p{margin-bottom: 0; padding-bottom: 0;}
	#world .cont06 h5 img{width: 200px;}
	#world .cont06 h6 img{height: 20px; margin-left: 4%; }
	#world .cont06 .seafood{border-top: solid 1px #ddd; margin-top: 30px; padding-top: 30px; height: auto; }
	#world .cont06 .mntnfood{height: auto;}
	#world .cont06 .seafood h5, #world .cont06 .mntnfood h5 {position: static;}
	#world .cont06 .seafood div, #world .cont06 .mntnfood div{position: static; width: 100%; margin-top: -80px; padding: 100px 0 15px;}
	#world .cont06>h5 img{height: 32px; width: auto; }
	#world .cont06>h5+p{padding-top: 0;}
	
	#world .cont07 .cat_box{background-size: 90%}
	
	#world .next p{width: 80%; text-align: center;}
	#world .next a:first-of-type{background: url(../img/arrow_r.png) no-repeat center right; padding-right: 40px;}
	#world .next a:nth-of-type(2){background: url(../img/arrow_r.png) no-repeat center right; padding-right: 40px; padding-left: 40px;}
	
	#world #gFooter .gFooterInner{width: 100%;}
		
}