@charset "utf-8";

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

 File Name  : layout.css
 Author     : 
 Style Info : 原酒の世界 第6章　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 h4 img{height: 54px; width: auto;}

#world p{font-size: 16px; line-height: 1.7; margin-bottom: 20px;}

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

#world .txtbox{width: 470px;}
#world figure{width: 400px;}
#world figure img{width: 100%;}

#world .cont01{margin-top: 40px;}
#world .cont01 .txtbox{float: left;}
#world .cont01 figure{float: right;}

#world .cont02 figure{float: left;}
#world .cont02 .txtbox{margin-top: 40px; float: right;}
#world .cont02 .txtbox p span{font-size: 20px; color: #cca244;}
#world .cont02 .wood p{text-align: center; padding: 20px; font-size: 20px; margin-top: 40px;}
#world .cont02 .wood p span{color: #cca244; font-size: 26px;}

#world .cont03 h3{margin-bottom: 20px;}
#world .cont03 ul{margin-top: 60px;}
#world .cont03 ul li{position: relative;}
#world .cont03 ul li:first-of-type{ height: 420px; margin-bottom: 40px;}
#world .cont03 ul li:nth-of-type(2){height: 330px;}
#world .cont03 ul li h5{z-index: 2; position: relative;}
#world .cont03 ul li div{z-index: 1; width: 750px; position: absolute; top:30px; right: 0; box-sizing: border-box; padding: 30px 20px 20px 190px;}
#world .cont03 ul li h6{margin: 0 0 20px 40px; font-size: 24px; }
#world .cont03 .skil{background: #f5f2ea url("../img/6_img04.jpg") no-repeat; padding: 185px 0 20px; margin-top: 60px;}
#world .cont03 .skil h5{color: #fff; font-size: 30px; background: linear-gradient(90deg, #000, rgba(000, 000, 000, .1)); padding: 20px 35px; }
#world .cont03 .skil p{margin: 40px;}

#world .cont04{margin-top: 60px;}
#world .cont04 .sugao{float: left; margin-bottom: 40px;}
#world .cont04 .txtbox{float: right; width: 440px; }
#world .cont04 h5{margin-bottom: 20px;}
#world .cont04 .gold p{text-align: center; font-size: 20px; color: #cca244; }

#world .next p{width: 150px; margin: 0 auto 30px;}
#world .next p span{padding: 0 20px;}
#world .next a:first-child{background: url(../img/arrow_l.png) no-repeat center left; padding-left: 40px;}
#world .next a:nth-child(3){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 .txtbox{width: 470px;}
	#world figure{width: 300px; margin: 20px auto;}
	
	#world section{width: 96%; margin: 0 auto;}
	#world section .ttl_1{text-align: center;  margin-bottom: 10px;}
	#world section .ttl_1{background: #171515; color: #fff; font-size: 18px; padding: 3px; box-shadow: 0 2px 0 #c90926;}
	
	
	#world .txtbox {width: 96%; margin: 20px auto;}
	
	#world .wood h4{margin-bottom: 20px;}
		
	#world .wood p{padding: 0;}
	#world .wood>p{width: 90%; margin: 0 auto;}
	#world .wood .last{padding-bottom: 10px;}
	
	#world .cont01 figure, #world .cont01 .txtbox, #world .cont02 figure, #world .cont02 .txtbox {float: none; margin: 0 auto;}
	
	#world .cont01{margin-top: 10px;}
	#world  h4 img{height: 40px; width: auto; margin-left: 20px;}

	#world .cont02 h3{margin: 30px 0 0;}
	#world .cont02 .txtbox{margin-top: 20px;}
	#world .cont02 .wood p{text-align: left; padding: 20px 0; box-sizing: border-box; font-size: 18px; margin: 30px auto 40px;}
	#world .cont02 .wood p span{color: #cca244; font-size: 20px;}
	
	#world .cont03 .imgbox{margin: 0; padding: 10px 5%;}
	#world .cont03 .txtbox{margin-top: 0;}
	#world .cont03 ul{margin-top: 30px;}
	#world .cont03 ul li:first-of-type{ height: auto;}
	#world .cont03 ul li:nth-of-type(2){height: auto; margin-top: 80px;}
	#world .cont03 ul li h5{text-align: center;}
	#world .cont03 ul li h5 img{width: 250px;}
	#world .cont03 ul li div{width: 96%; position: static; padding: 45px 0 20px; margin: -40px auto;}
	#world .cont03 ul li h6{font-size: 22px; margin-left: 5%; }
	#world .cont03 .skil{width: 96%; margin: 60px auto 40px; background-size: contain; padding-top: 80px;}
	#world .cont03 .skil h5{font-size: 22px;  padding: 10px; }
	#world .cont03 .skil p{width: 86%; margin: 0 auto;}
	
	#world .cont04{margin-top: 40px;}
	#world .cont04 .sugao{float: none; margin-bottom: 20px; text-align: center;}
	#world .cont04 .txtbox{float: none; width: 90%; }
	#world .cont04 .txtbox p{padding: 0;}
	#world .cont04 .gold p{text-align: left; font-size: 18px; color: #cca244; }
	
	#world .next p{width: 80%; text-align: center;}
	
	#world #gFooter .gFooterInner{width: 100%;}
		
}

@media screen and (max-width:375px) { 
/*　画面サイズが375pxまではここを読み込む　*/
	
	#world .cont01 h4 img{height: 32px; width: auto;}
}