/* ==========================================================================
   pages-about.css — 「EIPについて」配下（原稿02〜06: /about/ /about/company/ /about/message/ /about/vision/ /about/history/）。
   template-parts/pages/about*.php と parts/about-nav.php 専用。共通部品の見た目は変えず、配置の微調整と専用ブロックだけを書く。
   ========================================================================== */

/* ---- ページ切り替え（parts/about-nav.php）。見た目は ep-tabs、位置だけここで決める ---- */
.ep-about-nav {
	padding-top: var(--ep-space-l);
}

@media (max-width: 767px) {
	.ep-about-nav {
		padding-top: var(--ep-space-m);
	}
	.ep-about-nav .ep-tabs__link {
		padding-inline: var(--ep-space-xs);
		font-size: var(--ep-fs-2xs);
	}
}

/* ナビの直後のセクションは上の余白を少し詰める（ナビとヒーローの間で間延びさせない） */
.ep-about-nav + .ep-section {
	padding-top: var(--ep-space-2xl);
}

/* ---- 見出しのすぐ下にボタンを置く行（ep-actions の上 120 を詰める） ---- */
.ep-about-actions {
	margin-top: 0;
}

.ep-about-related__head,
.ep-about-current__head {
	margin-bottom: var(--ep-space-l);
}

/* ---- 04 代表メッセージ: 承認前の仮原稿の注記 ---- */
.ep-about-draft {
	display: flex;
	align-items: flex-start;
	gap: var(--ep-space-xs);
	margin-bottom: var(--ep-space-xl);
	padding: var(--ep-space-s) var(--ep-space-m);
	border: 1px dashed var(--ep-color-accent);
	border-radius: var(--ep-radius-l);
	background: var(--ep-color-accent-soft);
	color: var(--ep-color-ink);
	font-size: var(--ep-fs-xs);
	line-height: var(--ep-lh-base);
}

.ep-about-draft__badge {
	flex: 0 0 auto;
	padding: 0 var(--ep-space-2xs);
	border-radius: var(--ep-radius-s);
	background: var(--ep-color-accent);
	color: var(--ep-color-on-dark);
	font-size: var(--ep-fs-2xs);
	font-weight: var(--ep-weight-bold);
	line-height: 2;
	white-space: nowrap;
}

/* ---- 04 代表メッセージ: 本文＋署名（記事本文と同じ幅・行の高さで手紙のように読ませる） ---- */
.ep-about-message {
	max-width: var(--ep-width-prose);
	margin-inline: auto;
}

.ep-about-message__text {
	line-height: var(--ep-lh-relaxed);
}

.ep-about-message__text + .ep-about-message__text {
	margin-top: var(--ep-space-m);
}

.ep-about-message__sign {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--ep-space-3xs);
	margin-top: var(--ep-space-xl);
	padding-top: var(--ep-space-m);
	border-top: 1px solid var(--ep-color-line);
	line-height: 1.6;
}

.ep-about-message__company {
	color: var(--ep-color-ink-sub);
	font-size: var(--ep-fs-xs);
}

.ep-about-message__name {
	font-size: var(--ep-fs-lg);
	font-weight: var(--ep-weight-bold);
	letter-spacing: var(--ep-ls-base);
}

@media (max-width: 767px) {
	.ep-about-draft {
		flex-direction: column;
		gap: var(--ep-space-2xs);
		margin-bottom: var(--ep-space-l);
		padding: var(--ep-space-xs) var(--ep-space-s);
	}
}