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

◇　Responsive spend CSS　◇

====================================================== */
@media screen and (max-width: 1000px) {
	#spend #contents { width: 100%; margin: 0;}
	
	#spend h3 { width: 98%;}
	#spend h3 span { display: none;}
	#spend h3 img { width: 80%;}
	#spend .tit_col1 { width: 29%;}
	#spend .tit_col1 span { display: block !important;}
	#spend .tit_col2,
	#spend .tit_col2 h5,
	#spend .tit_col2 p { display: block; float: none;}
	#spend .tit_col2 { width: 100%;}
	#spend .tit_col2 h5 { padding: 0 0 20px 0;}
	#spend .tit_col2 span { display: block !important;}
	#spend .tit_col2 p { padding: 0; width: 100%;}
	#spend .photo2 { width: 100%;}
	#spend .photo2 li { width: 49%;}
	
	/* 家族
	------------------------------------------------------ */
	#spend .spend1 #sec2 .item,
	#spend .spend1 #sec4 .item,
	#spend .spend1 #sec5 .item,
	#spend .spend1 #sec7 .item,
	#spend .spend1 #sec11 .item { display: none;}
	
	/* カップル
	------------------------------------------------------ */
	#spend.spend2 #sec2 .item,
	#spend.spend2 #sec4 .item,
	#spend.spend2 #sec7 .item { display: none;}
	
	/* 記念日
	------------------------------------------------------ */
	#spend.spend3 #sec6 .item,
	#spend.spend3 #sec7 .item { display: none;}
	
	/* 友人と連泊
	------------------------------------------------------ */
	#spend.spend4 #sec2 .item,
	#spend.spend4 #sec7 .item,
	#spend.spend4 #sec11 .item { display: none;}

}
@media screen and (max-width: 768px) {
	#spend section { padding: 30px 2%;}
	
	/* type1 */
	#spend .tit_col1 { width: 100%; float: none; padding: 0 0 30px 0;}
	#spend .tit_col1 h5 { border: none; width: 100%; padding: 0 0 20px 0;}
	#spend .tit_col1 h5>img, #spend .tit_col span { display: table-cell; padding: 0; vertical-align: middle;}
	#spend .tit_col1 span { padding-top: 20px;}
	#spend .photo1 { width: 100%; float: none;}
	#spend .photo1 li { width: 50%;}
	#spend .photo1 li:first-child { width: 100%;}
	#spend .photo1 li img { width: 100%;}
	/* type2 */
	#spend .tit_col2 { width: 100%; float: none; padding-bottom: 30px;}
	#spend .tit_col2 h5 { border: none; width: 100%;}
	#spend .tit_col2 h5>img, #spend .tit_col span { display: table-cell; padding: 0; vertical-align: middle;}
	#spend .tit_col2 span { padding-top: 20px; margin: 0;}
	#spend .photo2 { width: 100%; float: none;}
	#spend .photo2 li { width: 100%;}
	#spend .photo2 li img { width: 100%;}
	
}
@media screen and (max-width: 640px) {
	/* type1 */
	#spend .tit_col1, #spend .tit_col1 h5, #spend .tit_col1 ul { padding-bottom: 10px;}
	#spend .tit_col1 h5 span { display: block; padding-top: 10px;}
	/* type2 */
	#spend .tit_col2, #spend .tit_col2 h5, #spend .tit_col2 ul { padding-bottom: 10px;}
	#spend .tit_col2 h5 span { display: block; padding-top: 10px;}
}