@charset "utf-8";

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

 File Name  : layout.css
 Author     : 
 Style Info : 原酒の世界 第2章　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 .cont01{margin-top: 40px;}
#world .cont01 h4+p{font-size: 20px;}

#world .cont02{background: url(../img/2_img02.jpg) no-repeat top right;}

#world .cont03>div{background: url(../img/2_img03.jpg) no-repeat;}
#world .cont03>div p{width: 440px; margin-left: 460px;}

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

#world .cat_box{margin: 0 10px 20px 40px; height: 230px; background: url(../img/goldline.png) no-repeat bottom center; position: relative;}
#world .cat_box h5.pc{width: 250px;}
#world .cat_box p{width: 580px; position: absolute; bottom: 35px; left: 250px; padding: 0 10px;}
#world .cat_box.last{background: none;}

#world .cont04{padding-bottom: 5px;}
#world .cont04 h4+p{background: url(../img/2_img04.jpg) no-repeat bottom center; padding-bottom: 320px;}
#world .cont04 .bgimg2{height: 100px; background: url(../img/2_img05.png) no-repeat top right; bottom: 15px; padding: 80px 0 25px; background-size: 30%;}
#world .cont04 .bgimg3{background: url(../img/2_img06.png) no-repeat top right; bottom: 10px; background-size: contain; padding-bottom: 20px;}
#world .cat_box.js{height: 550px;}
#world .cat_box.js p{bottom: 370px;}
#world .cont04 .bgimg4{background: url(../img/2_img08.png) no-repeat top right; bottom: 10px; background-size: contain; padding-bottom: 20px;}

#world .cont05{margin-top: 40px;}
#world .cont05>div{margin-bottom: 30px;}
#world .cont05 p{font-size: 30px; text-align: center;}

#world .wood .last{margin-top: 20px; padding-bottom: 30px;}

#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 .cont01{margin-top: 10px;}
	#world .cont01 p+img{margin: -10px 0 -5px;}
	#world .cont01 h4+p{font-size: 18px; margin-bottom: 0;}
	
	#world .cont02{background:none;}
	
	#world .cont03{border-top: solid 1px #777; padding-top: 20px;}
	#world .cont03 h4.smp{background: none; box-shadow: none; }
	#world .cont03 h4.smp img{width: 95%;}
	#world .cont03>div{background:none;}
	#world .cont03>div p{width: 90%; margin:20px auto;}
	
	#world .cat_box{width: 90%; height: auto; padding: 5px 5%; background-size: 90%; margin-left: 0; margin-bottom: 10px;}
	
	#world .cat_box h5.smp{margin-bottom: 10px;}
	#world .cat_box h5.smp img{height: 40px;}
	#world .cat_box p{position: static; width: 100%; }
	
	#world .wood p{padding: 0;}
	#world .wood>p{width: 90%; margin: 0 auto;}
	#world .wood .last{padding-bottom: 10px;}
	
	#world .cont04 h4+p{background: url(../img/2_img04.jpg) no-repeat bottom center; background-size: 80%; padding-bottom: 50%; margin-bottom: 20px;}
	#world .cont04 .img80, #world .cont06 .img80{margin-top: 10px;}
	#world .cont04 .bgimg2{height: auto; padding: 0 0 85%; background-position: bottom center; background-size: 70%;}
	#world .cont04 .bgimg3{padding: 0 0 65%; background-position: bottom center; background-size: 80%;}
	#world .cat_box.js{height: auto;}
	#world .cont04 .bgimg4{padding: 0 0 60%; background-position: bottom center; background-size: 80%;}
	
	#world .cont05{margin-top: 25px;}
	#world .cont05>div{margin-bottom: 20px;}
	#world .cont05>div:nth-child(3){margin-bottom: 10px}
	#world .cont05 p{font-size: 18px; width: 90%; margin: 0 auto 10px; padding: 0;}
	
	#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%;}
		
}