@charset "utf-8";

/* ============================================================
 * イベント／ツアーページ ACFコンテンツビルダー用スタイル
 * 仕様書「2-3. 提供ブロック一覧」に対応
 * 配置先：/_assets/css/event-blocks.css
 *
 * 設計方針：
 * 既存サイトのデザイン体系に合わせる
 *   ・ブランドグリーン #54ac7e
 *   ・ボーダー色 #e6e6e6
 *   ・グレー文字 #666666
 *   ・SPブレークポイント 640px
 *   ・p の上下余白は既存の 40px(PC) / 10px(SP) を踏襲
 *   ・figure の上下余白は既存ルール（margin-bottom:40px）を尊重
 *
 * セレクタ方針：
 * 既存の `.single .article-body a { color:#666; text-decoration:underline; }`
 * を上書きするため、`.single .article-body` を頭につけて特異度を高めている。
 * ============================================================ */


/* ① 見出しブロック ----------------------------------------- */
.single .article-body .block-heading {
	margin: 40px 0 20px;
	font-weight: bold;
	line-height: 1.5;
}
.single .article-body .block-heading--h2 {
	padding-bottom: 8px;
	border-bottom: 2px solid #54ac7e;
	font-size: 20px;
	color: #333;
}
.single .article-body .block-heading--h3 {
	padding-bottom: 6px;
	border-bottom: 1px solid #e6e6e6;
	font-size: 17px;
	color: #54ac7e;
}
@media only screen and (max-width:640px){
	.single .article-body .block-heading {
		margin: 20px 0 10px;
	}
	.single .article-body .block-heading--h2 {
		font-size: 17px;
	}
	.single .article-body .block-heading--h3 {
		font-size: 15px;
	}
}


/* ② テキストブロック --------------------------------------- */
/* 内部の <p>, <ul>, <ol>, <a> は既存の .single .article-body 配下の指定を継承 */
.single .article-body .block-text {
	margin: 0 0 40px;
}
@media only screen and (max-width:640px){
	.single .article-body .block-text {
		margin: 0 0 10px;
	}
}


/* ③ 画像ブロック ------------------------------------------- */
/* figure 自体の text-align:center / margin-bottom:40px は既存ルールを継承 */
.single .article-body .block-image img {
	max-width: 100%;
	height: auto;
	display: inline-block;
}
.single .article-body .block-image--full img {
	width: 100%;
}
.single .article-body .block-image--center img {
	max-width: 600px;
}
.single .article-body .block-image figcaption {
	margin-top: 8px;
	font-size: 13px;
	color: #666666;
}


/* ④ 画像2列ブロック ---------------------------------------- */
.single .article-body .block-image-2col {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 40px;
}
.single .article-body .block-image-2col figure {
	flex: 1 1 calc(50% - 8px);
	margin: 0;       /* 既存figureのmargin-bottomを上書き */
	text-align: left;
}
.single .article-body .block-image-2col img {
	width: 100%;
	height: auto;
	display: block;
}
@media only screen and (max-width:640px){
	.single .article-body .block-image-2col {
		gap: 10px;
		margin-bottom: 10px;
		flex-direction: column;
	}
	.single .article-body .block-image-2col figure {
		flex: 1 1 100%;
	}
}


/* ⑤ 画像ギャラリーブロック --------------------------------- */
/* グリッド表示 */
.single .article-body .block-gallery--grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 40px;
}
.single .article-body .block-gallery--grid figure {
	margin: 0;
	text-align: left;
}
.single .article-body .block-gallery--grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	aspect-ratio: 4 / 3;
}
/* スライダー表示（横スクロール式） */
.single .article-body .block-gallery--slider {
	display: flex;
	overflow-x: auto;
	gap: 12px;
	margin-bottom: 40px;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
}
.single .article-body .block-gallery--slider figure {
	flex: 0 0 50%;
	margin: 0;
	scroll-snap-align: start;
	text-align: left;
}
.single .article-body .block-gallery--slider img {
	width: 100%;
	height: auto;
	display: block;
}
@media only screen and (max-width:640px){
	.single .article-body .block-gallery--grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
		margin-bottom: 10px;
	}
	.single .article-body .block-gallery--slider {
		gap: 8px;
		margin-bottom: 10px;
	}
	.single .article-body .block-gallery--slider figure {
		flex: 0 0 80%;
	}
}


/* ⑥ 画像＋テキストブロック --------------------------------- */
.single .article-body .block-image-text {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	margin-bottom: 40px;
}
.single .article-body .block-image-text--left {
	flex-direction: row;
}
.single .article-body .block-image-text--right {
	flex-direction: row-reverse;
}
.single .article-body .block-image-text__figure {
	flex: 0 0 45%;
	margin: 0;
	text-align: left;
}
.single .article-body .block-image-text__figure img {
	width: 100%;
	height: auto;
	display: block;
}
.single .article-body .block-image-text__body {
	flex: 1 1 auto;
}
/* 内部の <p> は既存ルールを継承する想定だが、margin-bottomは打ち消す */
.single .article-body .block-image-text__body p:last-child {
	margin-bottom: 0;
}
@media only screen and (max-width:640px){
	.single .article-body .block-image-text,
	.single .article-body .block-image-text--left,
	.single .article-body .block-image-text--right {
		flex-direction: column;
		gap: 10px;
		margin-bottom: 10px;
	}
	.single .article-body .block-image-text__figure {
		flex: 1 1 100%;
	}
}


/* ⑦ ボタンブロック ----------------------------------------- */
/* 既存の .single .article-body a 指定（color:#666、text-decoration:underline）を
   上書きするため、特異度を高めて記述。
   配色は既存の .globalNav_button a（ブランドグリーン #54ac7e + 白文字）と統一。 */
.single .article-body .block-button {
	margin: 40px 0;
}
.single .article-body .block-button--left   { text-align: left;   }
.single .article-body .block-button--center { text-align: center; }
.single .article-body .block-button--right  { text-align: right;  }

.single .article-body .block-button__link {
	display: inline-block;
	padding: 14px 32px;
	background-color: #54ac7e;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	border-radius: 2px;
	transition: opacity 0.2s;
}
.single .article-body .block-button__link:link,
.single .article-body .block-button__link:visited,
.single .article-body .block-button__link:hover,
.single .article-body .block-button__link:active {
	color: #fff;
	text-decoration: none;
}
.single .article-body .block-button__link:hover {
	opacity: 0.8;       /* 既存 .globalNav_button a:hover と統一 */
}
@media only screen and (max-width:640px){
	.single .article-body .block-button {
		margin: 20px 0;
	}
}


/* ⑧ 区切り線ブロック --------------------------------------- */
/* 既存サイトのボーダー色 #e6e6e6 を使用 */
.single .article-body .block-divider {
	border: 0;
	border-top: 1px solid #e6e6e6;
	margin: 40px 0;
}
@media only screen and (max-width:640px){
	.single .article-body .block-divider {
		margin: 20px 0;
	}
}