@charset "utf-8";

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

 File Name  : rcm.css
 Author     : 
 Style Info : 片山酒造のおすすめ
=================================================================== */
#rcm p{font-size: 16px;}
#rcm .cnt01 h2{text-align: center; font-size: 24px; margin: 20px 0; line-height: 1.7;}
#rcm .cnt01 p{width: 730px; margin: 20px auto;}
#rcm .cnt01 p span{color: #9c1c2b; }
#rcm .cnt01 p:last-child{text-align: right; }
#rcm .cnt01 p:last-child a{color: #009ce6; font-weight: bold; }

#rcm .cnt02, #rcm .cnt03{width: 880px; margin: 60px auto 0;}
#rcm h3{background: url(../img/mark.png) no-repeat; font-size: 22px; padding: 0 0 3px 25px; margin-bottom: 25px; border-bottom: solid 1px #000;}
#rcm .cnt02>p:first-of-type{width: 280px; float: left; margin-right: 40px; text-align: center;}
#rcm .cnt02 .detail{width: 560px; float: left; background: url(../../teiki/img/t_img02.jpg) no-repeat bottom right;}
#rcm .cnt02 .detail h5{font-size: 20px; font-weight: bold; color: #00c7f1; margin-top: 20px;}
#rcm .cnt02 .detail h5+p{font-weight: bold; color: #00c7f1; margin: 10px 0; font-size: 16px;}
#rcm .cnt02 .detail dl dt{width:6.5em; float: left;}
#rcm .cnt02 .detail ul{margin: 20px 0;}
#rcm .cnt02 .detail a{width: 250px; display: block; font-size: 20px; line-height: 40px; color: #fff; font-weight: bold; background: #009ce6; border-radius: 10px; text-decoration: none; margin-top: 10px; text-align: center;}
#rcm .cnt02 .detail a:hover{background: #00c7f1;}

#rcm .cnt03{padding-top: 60px;}
#rcm .cnt03 ul{margin: 40px 0 0 40px;}
#rcm .cnt03 ul li{clear: both;}
#rcm .cnt03 ul li figure{float: left; margin-right: 30px;}
#rcm .cnt03 ul li div{float: left; width: 450px;}
#rcm .cnt03 ul li h5{font-size: 24px; margin-bottom: 10px;}
#rcm .cnt03 ul li p{margin-bottom: 15px;}
#rcm .cnt03 ul li a{width: 205px; display: inline-block; text-align: center; }
#rcm .cnt03 ul li a.Ppage{border: solid 2px #009ce6; color: #009ce6; margin-right: 10px;}
#rcm .cnt03 ul li a.cart_in{border: solid 2px #9c1c2b; color: #9c1c2b; margin-bottom: 60px;}
#rcm .cnt03 ul li a:hover{text-decoration: none; border: solid 2px #a9a9a9; color: #a9a9a9;}

@media screen and (max-width:480px) { 
/*　画面サイズが480pxまではここを読み込む　*/
	
	#rcm h1{width: 100%; margin-top: 17%;}
	#rcm h1 img{width: 100%; height: auto;}
	#rcm .cnt01 h2{width: 96%; margin: 10px auto; font-size: 17px; text-align: left; line-height: 1.5;}
	#rcm .cnt01 h2+div img{width: 100%; margin-bottom: 2px;}
	#rcm .cnt01 p{width: 90%;}
	#rcm .cnt01 p:last-child{text-align: center; font-size: 15px; margin-top: -20px;}
	
	#rcm .cnt02, #rcm .cnt03{width: 90%; margin: 30px auto 0;}
	#rcm h3{background-position: left bottom 5px; font-size: 17px; line-height: 1.4;}
	
	#rcm .cnt02 .detail{width: 100%; background: none;}
	#rcm .cnt02>p:first-of-type{width: 90%; float: none; margin-right: 0;}
	#rcm .cnt02>p:first-of-type img{width: 180px;}
	#rcm .cnt02 .detail h5{font-size: 16px; text-align: center; margin-top: 0; }
	#rcm .cnt02 .detail h5+p{text-align: center; margin-top: 0; padding-top: 0;}
	#rcm .cnt02 .detail dl{border: solid 1px #777; padding: 5px;}
	#rcm .cnt02 .detail ul{margin: 10px;}
	#rcm .cnt02 .detail a{margin: 0 auto;}
	
	#rcm .cnt03{padding-top: 40px;}
	#rcm .cnt03 ul{margin: 0;}
	#rcm .cnt03 ul li{clear: both;}
	#rcm .cnt03 ul li figure{width: 96%; float: none; margin: 0 auto 20px; text-align: center;}
	#rcm .cnt03 ul li figure img{width: 100%; max-width: 300px;}
	#rcm .cnt03 ul li div{float: none; width: 100%;}
	#rcm .cnt03 ul li h5{font-size: 18px; margin-bottom: 5px; text-align: center;}
	#rcm .cnt03 ul li p{margin-bottom: 15px;}
	#rcm .cnt03 ul li a{width: 85%; display: block; margin: 0 auto;}
	#rcm .cnt03 ul li a.Ppage{margin: 0 auto 20px;}
	#rcm .cnt03 ul li a.cart_in{margin-bottom: 40px;}
	#rcm .cnt03 ul li:last-child{padding-bottom: 20px;}
}