@charset "UTF-8";

/*
======== table of content. ===============

summary:プランページ要素

==========================================
*/

.promo { background-image:url(../images/img_index_promo.jpg); }

@media screen and (max-width: 767px) {
.promo { background-position:center center; background-size:cover; }
}

/* gallery */
#gallery ul { position:relative; margin:0 -20px 0 0; overflow:hidden; }
	#gallery li { float:left; width:225px; margin:20px 20px 0 0; }
	#gallery li:nth-child(4n+1) { clear:both; float:left; }
		#gallery .trigger { outline:none; cursor:pointer; }
		#gallery .trigger:hover { opacity:0.8; }
			#gallery .trigger figcaption { display:block; position:relative; width:100%; margin-top:5px; padding:0 20px; text-align:center; }
			#gallery .trigger figcaption:before { content:"＋"; display:inline-block; position:absolute; left:0; top:2px; width:1em; height:1em; padding:1px; border-radius:50%; background-color:#d6bb6b; color:#fff; font-weight:bold; line-height:1; text-align:center; }
			#gallery .trigger .icon_star:after { content:"★"; display:inline-block; position:absolute; right:0; top:2px; color:#d6bb6b; }

/* gallery */
.sec_modal { position:relative; max-width:460px; margin:10px auto; padding:9px; border:1px solid #e4c772; background-color:#fff; }
	.sec_modal figure img { width:100%; }
		.sec_modal figcaption { display:table; table-layout:fixed; width:100%; margin-top:5px; }
			.sec_modal figcaption > span { display:table-cell; vertical-align:middle; }
			.sec_modal .icon_modal { width:100px; }
				.sec_modal .icon_modal span { padding:2px 5px; background-color:#d6bb6b; color:#fff; }
				.sec_modal .icon_modal .notcoverd { background-color:#aaa; font-size:85.7%; }
			.sec_modal .txt_price { width:160px; line-height:1; text-align:right; }
				.sec_modal .txt_price strong { color:#d6bb6b; font-size:150%; }

.sec_notes { margin-top:30px; }

@media screen and (max-width: 767px) {

#gallery ul { position:relative; width:100%; margin:0; text-align:center; }
	#gallery li { width:48%; margin:20px 2% 0 0; }
	#gallery li:nth-child(2n) { float:right; margin:20px 0 0 2%; }
	#gallery li:nth-child(2n+1) { clear:both; float:left; }

.sec_modal figcaption { display:block; width:100%; font-size:0; }
	.sec_modal figcaption > span { display:inline-block; font-size:0.875rem; }
		.sec_modal figcaption > .ttl_modal { display:block; text-align:center; }
		.sec_modal figcaption .icon_modal { width:40%; }
		.sec_modal figcaption .txt_price { width:100%; text-align:right; }
		.sec_modal figcaption .icon_modal + .txt_price { width:60%; }
}