@charset "utf-8";
/* ===================================================

◇　Responsive Home CSS　◇

====================================================== */
@media screen and (max-width: 1000px) {
	#room #contents { width: 100%; margin: 0 auto;}
	
	#room #lead { width: 98%; margin: 0 auto;}
	
	#room #lead p:first-child { width: 40%;}
	#room #lead p:last-child { width: 49%;}

	#room #cnav { width: 98%; margin: 0 auto;}
	#room #cnav li { width: 32%;}
	#room #cnav li:not(:nth-child(3n)) { margin-right: 2%;}
	
	#room h3, #room .detail { width: 35%;}
	#room .flexslider_con, #room .photo { width: 62%;}
	
	#room #sec5 { width: 100%; padding: 134px 0 0 0;}
	#room #sec5>dl { width: 100%;}
	#room #sec5 dd { width: 78.5%; float: right; padding-left: 0;}
	#room #sec5 dd div { width: 65%;}
}
@media screen and (max-width: 768px) {
	#room #lead { padding: 25px 0 28px 0;}
	#room #lead p { width: 100% !important; float: none; padding: 25px 0 0 0 !important;}
	
	#room .flexslider_con,
	#room .photo,
	#room .detail { width: 100%; float: none;}
	
	#room h3 { display: table; width: auto; float: left; padding: 0 20px 30px 0; border: none; table-layout: fixed;}
	#room h3>img, #room h3 span { display: table-cell; padding: 0; vertical-align: middle;}
	#room h3 span { padding: 0 0 0 20px;}
	
	#room .flexslider_con,
	#room .photo { clear: both;}
	#room .slides img { width: 100%;}
	
	#room .detail p { padding: 20px 0;}
	
	#room #sec1 figure { padding-top: 20px;}
	#room #sec1 figure img { padding: 0 7.5% 0 2.8%;}
	
	#room #sec5 dt,
	#room #sec5 dd { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box;}
	#room #sec5 dl dt span{ display: inline-block; margin: 0;}
	#room #sec5>dl>dt,
	#room #sec5>dl>dd { width: 100%; float: none;}
	#room #sec5>dl>dd { max-width: 100%; padding: 10px 0 0 0;}
	#room #sec5 .ver_pc { display: none;}
	#room #sec5 .ver_sp { display: inline;}
}
@media screen and (max-width: 640px) {
	
	#room h3 { padding-bottom: 10px;}

	#room #cnav li { width: 49%;}
	#room #cnav li:nth-child(3n) { margin-right: 2%;}
	#room #cnav li:nth-child(2n) { margin-right: 0;}
	
	#room #sec1 figure img, #room #sec1 figcaption { display: block; float: none; padding: 0; margin: 0 auto;}
	#room #sec1 figcaption { padding-top: 10px;}
	#room #sec1 table { margin: 0 auto;}
	
	#room #sec5 h3 { padding-bottom: 30px;}
	#room #sec5 dd div { width: 100%; float: none;}
	#room #sec5 dd div { padding: 10px 0 0 0;}
	#room #sec5 dd dt,
	#room #sec5 dd dd { width: 100%; float: none;}
	#room #sec5 dd dd { padding-left: 10px;}
	#room #sec5 dd p { padding-top: 5px;}
	#room .detail a { width: 100%;}
}