/* ==========================================================================
   components.css — 部品（template-parts/parts/*.php と1対1）。
   並び: ボタン → 見出し（縦・横）→ カード → 縦見出しつきサムネ → 写真列 → お知らせ → CTA → 写真帯
        （下層ページ用は page-parts.css・一覧系は listing.css）
   ========================================================================== */

/* ---- ボタン（parts/button.php） ---- */
.ep-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	text-align: center;
	line-height: 1.5;
	transition: background-color var(--ep-duration-fast), color var(--ep-duration-fast), border-color var(--ep-duration-fast);
}

/* 主ボタン（121型: 300×70・角丸70・深緑の面に白文字 16px）。ホバーは同じ深緑を少し明るく（--ep-color-accent-hover・10/18 ヤヤ）。
   白い輪郭線を通常・ホバーとも付ける＝緑系の写真帯の上でもボタンの形が目立つ（10/18 ヤヤ） */
.ep-button--primary {
	width: 300px;
	max-width: 100%;
	min-height: 70px;
	padding: var(--ep-space-2xs) var(--ep-space-l);
	border: 1px solid var(--ep-color-on-dark);
	border-radius: var(--ep-radius-pill);
	background: var(--ep-color-accent);
	color: var(--ep-color-on-dark);
	font-size: var(--ep-fs-sm);
}

.ep-button--primary:hover {
	background: var(--ep-color-accent-hover);
}

/* 小ボタン（121型: 高さ35・枠線・角丸5・12px） */
.ep-button--outline,
.ep-button--light {
	min-height: 35px;
	padding: 4px var(--ep-space-xs);
	border: 1px solid var(--ep-color-accent);
	border-radius: var(--ep-radius-s);
	color: var(--ep-color-accent);
	font-size: var(--ep-fs-2xs);
}

.ep-button--outline:hover {
	background: var(--ep-color-accent);
	color: var(--ep-color-on-dark);
}

.ep-button--light {
	border-color: var(--ep-color-on-dark);
	color: var(--ep-color-on-dark);
}

.ep-button--light:hover {
	background: var(--ep-color-on-dark);
	color: var(--ep-color-accent);
}

/* 円ボタン（121型: 直径170・枠線） */
.ep-button--circle {
	width: 170px;
	height: 170px;
	border: 1px solid var(--ep-color-accent);
	border-radius: 50%;
	color: var(--ep-color-accent);
	font-size: var(--ep-fs-sm);
	font-weight: var(--ep-weight-bold);
	line-height: 1.6;
}

.ep-button--circle .ep-button__label {
	max-width: 6em;
}

.ep-button--circle:hover {
	background: var(--ep-color-accent);
	color: var(--ep-color-on-dark);
}

/* 文字リンク */
.ep-button--text {
	color: var(--ep-color-accent);
	font-weight: var(--ep-weight-medium);
}

.ep-button--text::after {
	content: "→";
	transition: transform var(--ep-duration-fast);
}

.ep-button--text:hover::after {
	transform: translateX(4px);
}

@media (max-width: 767px) {
	.ep-button--primary {
		min-height: 60px;
	}
	.ep-button--circle {
		width: 120px;
		height: 120px;
		font-size: var(--ep-fs-xs);
	}
}

/* ---- 縦書きの見出し（parts/vertical-head.php） ---- */
.ep-vhead {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	justify-content: center;
	gap: var(--ep-space-xs);
}

.ep-vhead--start {
	justify-content: flex-start;
}

.ep-vhead--md {
	gap: 24px;
}

.ep-vhead__display,
.ep-vhead__body {
	writing-mode: vertical-rl;
	text-orientation: mixed;
}

/* 日本語まじりの英字（ep_mark_latin が包む）。縦書きの要素では PHP で大文字の全角にしてあり、和文と同じ字の枠で
   既定の向きのまま立つので、向き・大きさ・字間は親のまま（半角を立てて 0.9em・字間 -0.12em に詰める作りは 10/21 にやめた）。
   「02｜SERVICE」など英字だけのラベルは包まないので横倒しのまま。横書きの文では字間だけ 0 */
.ep-latin {
	letter-spacing: 0;
}

.ep-vhead__display .ep-latin,
.ep-vhead__body .ep-latin,
.ep-feature__title .ep-latin,
.ep-hero__lead .ep-latin {
	letter-spacing: inherit;
}

/* 大見出し（121型: 62px / 99.2px / 600） */
.ep-vhead__display {
	font-size: var(--ep-fs-display);
	font-weight: var(--ep-weight-bold);
	line-height: 1.6;
	letter-spacing: 0.06em;
}

.ep-vhead--len-m .ep-vhead__display {
	font-size: var(--ep-fs-display-m);
}

.ep-vhead--len-l .ep-vhead__display {
	font-size: var(--ep-fs-display-l);
}

.ep-vhead--md .ep-vhead__display {
	font-size: var(--ep-fs-2xl);
}

/* 縦書きの本文（121型: 18px / 50.4px / 500）。max-height＝1行の長さ */
.ep-vhead__body {
	max-height: 460px;
	font-size: var(--ep-fs-md);
	font-weight: var(--ep-weight-medium);
	line-height: var(--ep-lh-vertical);
}

.ep-vhead__label {
	font-family: var(--ep-font-latin);
	font-size: var(--ep-fs-xs);
	letter-spacing: var(--ep-ls-wide);
}

.ep-vhead__title {
	font-size: inherit;
	line-height: inherit;
	font-weight: var(--ep-weight-bold);
}

.ep-vhead__sub {
	font-weight: var(--ep-weight-bold);
}

.ep-vhead__text {
	font-weight: var(--ep-weight-regular);
}

.ep-vhead--accent .ep-vhead__display {
	color: var(--ep-color-accent);
}

.ep-vhead--on-dark {
	color: var(--ep-color-on-dark);
}

/* 縦積み（大見出しの下に本文の列。トップ「事業内容」の右列） */
.ep-vhead--stack {
	flex-direction: column;
	align-items: center;
	gap: 84px;
}

@media (max-width: 767px) {
	.ep-vhead__body {
		max-height: 340px;
	}
	.ep-vhead--stack {
		gap: var(--ep-space-l);
	}
}

/* ---- 横書きのセクション見出し（parts/section-head.php） ---- */
.ep-section-head {
	margin-bottom: 60px;
}

.ep-section-head--center {
	text-align: center;
}

/* 直後にタブ・短い部品が続く見出し（一覧の「○○を探す」） */
.ep-section-head.ep-section-head--compact {
	margin-bottom: var(--ep-space-s);
}

/* 同じセクション内で2つ目以降の見出し（「○○を探す」→「○○一覧」） */
.ep-section-head.ep-section-head--spaced {
	margin-top: var(--ep-space-2xl);
}

.ep-section-head__label {
	color: var(--ep-color-accent);
	line-height: var(--ep-lh-base);
	font-family: var(--ep-font-latin);
	font-size: var(--ep-fs-xs);
	font-weight: var(--ep-weight-bold);
	letter-spacing: var(--ep-ls-wide);
}

.ep-section-head__title {
	margin-top: var(--ep-space-2xs);
	font-size: var(--ep-fs-2xl);
	line-height: 1.5;
}

.ep-section-head__lead {
	margin-top: var(--ep-space-s);
	line-height: var(--ep-lh-relaxed);
}

@media (max-width: 767px) {
	.ep-section-head {
		margin-bottom: var(--ep-space-l);
	}
}

/* ---- カード（parts/card.php / card-grid.php） ---- */
.ep-card-grid {
	--ep-grid-gap: 36px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ep-space-l) var(--ep-grid-gap);
}

.ep-card-grid--center {
	justify-content: center;
}

.ep-card-grid > .ep-card {
	flex: 0 0 calc((100% - var(--ep-grid-gap) * 2) / 3);
	min-width: 0;
}

.ep-card-grid--col2 > .ep-card {
	flex-basis: calc((100% - var(--ep-grid-gap)) / 2);
}

.ep-card-grid--col4 > .ep-card {
	flex-basis: calc((100% - var(--ep-grid-gap) * 3) / 4);
}

@media (max-width: 1023px) {
	.ep-card-grid {
		--ep-grid-gap: 24px;
	}
	.ep-card-grid > .ep-card,
	.ep-card-grid--col4 > .ep-card {
		flex-basis: calc((100% - var(--ep-grid-gap)) / 2);
	}
}

@media (max-width: 767px) {
	.ep-card-grid > .ep-card,
	.ep-card-grid--col2 > .ep-card,
	.ep-card-grid--col4 > .ep-card {
		flex-basis: 100%;
	}
}

.ep-card {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* 121型: 画像 338×229・角丸7・下に20 */
.ep-card__media {
	aspect-ratio: 338 / 229;
	margin-bottom: var(--ep-space-s);
	overflow: hidden;
	border-radius: var(--ep-radius-m);
	background: var(--ep-color-surface);
}

.ep-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease; /* 121: body.hover_zoom .c-thumbnail-image */
}

.ep-card:hover .ep-card__img {
	transform: scale(1.1);
}

/* 画像ホバーの白い縁（121「住まう」「知る」の記事カード: .blog_list .image { transition: box-shadow 0.25s ease }
   .image:hover { box-shadow: 0 0 0 2px #fff }・@media (hover: hover) の中だけ・10/18 ヤヤ「メディア等に踏襲」）。
   - 写真帯の上のカード（濃い地）: 121 と同じく画像の外側に 2px の白い縁
   - 白い地のカード（記事一覧・実績など）: 外側の白は地に溶けて見えないので、同じ 2px・白・0.25s を画像の内側に重ねる
   出すきっかけは画像の拡大（.ep-card:hover）と同じ＝カードに乗った時 */
.ep-card__media {
	position: relative;
	transition: box-shadow 0.25s ease;
}
.ep-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	pointer-events: none;
	transition: box-shadow 0.25s ease;
}
@media (hover: hover) {
	.ep-card--on-dark:hover .ep-card__media {
		box-shadow: 0 0 0 2px #fff;
	}
	.ep-card:not(.ep-card--on-dark):hover .ep-card__media::after {
		box-shadow: inset 0 0 0 2px #fff;
	}
}

.ep-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ep-space-s);
}

.ep-card__title {
	font-size: var(--ep-fs-md);
	line-height: 1.8;
}

.ep-card__text {
	font-size: var(--ep-fs-xs);
	line-height: 24px;
}

/* カード全体をリンクにする（見出しのリンクを広げる） */
.ep-card--linked .ep-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ep-card--plain,
.ep-card--number {
	padding: var(--ep-space-l) 30px;
	border: 1px solid var(--ep-color-line);
	border-radius: var(--ep-radius-l);
	background: var(--ep-color-bg);
}

.ep-card__num {
	color: var(--ep-color-accent);
	font-family: var(--ep-font-latin);
	font-size: var(--ep-fs-xs);
	font-weight: var(--ep-weight-bold);
	letter-spacing: var(--ep-ls-wide);
}

.ep-card--on-dark {
	color: var(--ep-color-on-dark);
}

/* ---- 縦見出しつきサムネの2列（parts/feature-grid.php） ---- */
/* 121型: 405 幅×2・間隔70／サムネ 305×427 角丸10／右に縦書き見出し 18px/36px（列幅100） */
.ep-feature-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 405px));
	gap: var(--ep-space-xl);
}

.ep-feature {
	position: relative;
}

/* 4枚の写真の大きさを揃える: 縦書きの項目名が写真より長くても、行の高さ（＝写真の高さ）を押し広げない */
.ep-feature__top {
	display: flex;
	align-items: flex-start;
}

.ep-feature__thumb {
	flex: 0 0 auto;
	width: calc(100% - var(--ep-feature-title-w, 44px)); /* 項目名の列を1列ぶんに詰め、そのぶん写真を広げる（写真と項目名の間が空きすぎ・10/18 ヤヤ）。説明文の幅はカード幅のまま */
	aspect-ratio: 3 / 2; /* 121 の横長カード（3:2・実測 338×229／ギャラリー 450×300）に合わせる。「働く」の 305×427 の縦長は人物写真用で、事業の写真（オフィス・街並み・PC）には合わない（ヤヤ 10/18） */
	overflow: hidden;
	border-radius: var(--ep-radius-l);
}

.ep-feature__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease; /* 121: body.hover_zoom .c-thumbnail-image */
}

.ep-feature:hover .ep-feature__img {
	transform: scale(1.1);
}

.ep-feature__title {
	display: flex;
	justify-content: flex-end;
	align-self: stretch;
	contain: size; /* 項目名の長さを行の高さの計算に入れない（高さは写真に合わせて伸びる） */
	width: var(--ep-feature-title-w, 44px); /* 縦書き1列（行の高さ36）＋すき間8。2列に折る長い項目名を使う時は、この変数を 80px 程度に上げる */
	writing-mode: vertical-rl;
	font-size: var(--ep-fs-md);
	line-height: 36px;
	letter-spacing: 0.08em;
}

.ep-feature__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ep-feature__text {
	margin-top: var(--ep-space-m);
	line-height: 24px;
}

@media (max-width: 1023px) {
	.ep-feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ep-space-l) var(--ep-space-m);
	}
	.ep-feature-grid {
		--ep-feature-title-w: 38px; /* 行の高さ30＋すき間8 */
	}
	.ep-feature__title {
		font-size: var(--ep-fs-sm);
		line-height: 30px;
	}
}

@media (max-width: 767px) {
	.ep-feature-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.ep-feature__text {
		margin-top: var(--ep-space-xs);
		font-size: var(--ep-fs-xs);
	}
}

/* ---- 写真列（parts/gallery-strip.php）121型: 450×300・角丸15・間隔20・左端から ---- */
.ep-gallery {
	overflow: hidden;
}

.ep-gallery__track {
	display: flex;
	gap: var(--ep-space-s);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.ep-gallery__track::-webkit-scrollbar {
	display: none;
}

.ep-gallery__item {
	flex: 0 0 450px;
	height: 300px;
	overflow: hidden;
	border-radius: var(--ep-radius-xl);
	scroll-snap-align: start;
}

/* 枚数が少なく画面幅に収まる時は中央に寄せる（見出し・ボタンと同じ中心線に。実績2件で左に寄っていた・10/18）。
   はみ出す枚数なら余白の auto は 0 になり、121 と同じ左端からの列のまま */
.ep-gallery__item:first-child {
	margin-left: auto;
}

.ep-gallery__item:last-child {
	margin-right: auto;
}

.ep-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 説明付き（トップ「これまでの取り組み」）: 写真 450×300 の下に「実績名＋分類」。121 のギャラリーは説明なしだが、
   EIP は一件ずつ違う実績を見せる場所なので説明を付ける（ラベリング表 10/18）。文字の領域は 72px（64〜80）、写真の間は 20 のまま */
.ep-gallery__item--captioned {
	height: auto;
	overflow: visible;
	border-radius: 0;
}

.ep-gallery__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ep-gallery__frame {
	display: block;
	height: 300px;
	overflow: hidden;
	border-radius: var(--ep-radius-xl);
	background: var(--ep-color-surface);
}

.ep-gallery__caption {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 4px;
	min-height: 72px;
	padding-top: 14px;
}

.ep-gallery__title {
	font-size: var(--ep-fs-sm);
	font-weight: var(--ep-weight-bold);
	line-height: 1.5;
}

.ep-gallery__type {
	color: var(--ep-color-accent);
	font-size: var(--ep-fs-2xs);
	font-weight: var(--ep-weight-medium);
	letter-spacing: var(--ep-ls-wide);
}

@media (max-width: 767px) {
	.ep-gallery__track {
		padding-inline: var(--ep-gutter);
		scroll-padding-inline: var(--ep-gutter);
	}
	.ep-gallery__item {
		flex-basis: 78%;
		height: auto;
		aspect-ratio: 3 / 2;
	}
	.ep-gallery__item--captioned {
		aspect-ratio: auto;
	}
	.ep-gallery__frame {
		height: auto;
		aspect-ratio: 3 / 2;
	}
}

/* ---- お知らせリスト（parts/news-list.php） ---- */
.ep-news-list__item {
	display: grid;
	grid-template-columns: 110px auto 1fr;
	align-items: baseline;
	gap: var(--ep-space-s);
	padding-block: var(--ep-space-m);
	border-bottom: 1px solid var(--ep-color-line);
}

.ep-news-list--default {
	border-top: 1px solid var(--ep-color-line);
}

.ep-news-list__date {
	color: var(--ep-color-ink-sub);
	font-family: var(--ep-font-latin);
	font-size: var(--ep-fs-xs);
	font-weight: var(--ep-weight-medium);
}

.ep-news-list__category {
	justify-self: start; /* 列の幅いっぱいに伸ばさない＝枠は文字の幅＋左右同じ余白で左揃え（スマホで右だけ空いていた・10/18 ヤヤ） */
	padding: 2px var(--ep-space-2xs);
	border: 1px solid var(--ep-color-line-strong);
	border-radius: var(--ep-radius-s);
	font-size: var(--ep-fs-2xs);
	line-height: 1.6;
}

.ep-news-list__title {
	grid-column: -2;
}

a.ep-news-list__title:hover {
	color: var(--ep-color-accent);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* トップ用: 中央寄せの1行（121型のティッカー行 高さ100） */
.ep-news-list--compact {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ep-news-list--compact .ep-news-list__item {
	display: flex;
	align-items: center;
	gap: 22px;
	min-height: 100px;
	padding: 0;
	border: 0;
}

.ep-news-list__empty {
	color: var(--ep-color-ink-sub);
	text-align: center;
}

@media (max-width: 767px) {
	.ep-news-list__item {
		grid-template-columns: auto 1fr;
		gap: var(--ep-space-2xs) var(--ep-space-xs);
	}
	.ep-news-list__title {
		grid-column: 1 / -1;
	}
	.ep-news-list--compact .ep-news-list__item {
		flex-wrap: wrap;
		gap: var(--ep-space-2xs) var(--ep-space-xs);
		min-height: 72px;
	}
}

/* ---- CTA（parts/cta.php） ---- */
.ep-cta--band {
	padding-block: var(--ep-space-section);
	background: var(--ep-color-surface);
	text-align: center;
}

.ep-cta__label {
	color: var(--ep-color-accent);
	font-family: var(--ep-font-latin);
	font-size: var(--ep-fs-xs);
	font-weight: var(--ep-weight-bold);
	letter-spacing: var(--ep-ls-wide);
}

.ep-cta--band .ep-cta__title {
	margin-top: var(--ep-space-2xs);
	font-size: var(--ep-fs-2xl);
	line-height: 1.5;
}

.ep-cta--band .ep-cta__text {
	margin-top: var(--ep-space-s);
	line-height: var(--ep-lh-relaxed);
}

.ep-cta__action {
	display: flex;
	justify-content: center;
	margin-top: var(--ep-space-l);
}

/* カード型（121型のフッターバナー: 390×200・角丸10・下を暗くするグラデーション）。
   121 はバナー3枚（390×200・間40）で幅1250の列を埋めて帯を締めている。EIP はお問い合わせ1枚なので、
   1枚のまま列と同じ幅1250の横長バナーにする（1枚390だと広い帯の中でぽつんと浮く・10/18） */
.ep-cta--card {
	display: flex;
	justify-content: center;
	padding: var(--ep-space-l) var(--ep-gutter);
	background: var(--ep-color-surface);
}

.ep-cta__card {
	position: relative;
	display: block;
	width: 1250px;
	max-width: 100%;
	height: 240px; /* 横長1枚なので 121 の 200 より少し高く（1024〜1199: 220・スマホ: 200） */
	overflow: hidden;
	border-radius: var(--ep-radius-l);
	background: var(--ep-color-accent);
	color: var(--ep-color-on-dark);
	text-align: left;
}

.ep-cta__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 62%; /* 写真（3:2）の被写体（右1/3の机上）が横長バナーの中に入る高さ */
	transition: transform 0.5s ease; /* 121: body.hover_zoom .c-thumbnail-image */
}

.ep-cta__card:hover .ep-cta__img {
	transform: scale(1.1);
}

.ep-cta__shade {
	position: absolute;
	inset: 0;
	/* 121 のバナー構成（文字は左下）: 左下から暗くして白文字を読ませ、右1/3の被写体は明るいまま残す（10/18 写真差し替え） */
	background:
		linear-gradient(to right, rgba(17, 28, 38, 0.62) 0%, rgba(17, 28, 38, 0.32) 45%, rgba(17, 28, 38, 0) 70%),
		linear-gradient(to top, rgba(17, 28, 38, 0.38), rgba(17, 28, 38, 0) 60%);
}

.ep-cta__body {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end; /* 121 のバナーと同じく文字は左下（内側40・下32） */
	align-items: flex-start;
	gap: var(--ep-space-2xs);
	padding: 0 40px 32px;
	text-align: left;
}

.ep-cta--card .ep-cta__label {
	color: inherit;
	font-size: var(--ep-fs-2xs);
	font-weight: var(--ep-weight-medium);
}

.ep-cta--card .ep-cta__text {
	font-size: var(--ep-fs-xs);
	font-weight: var(--ep-weight-medium);
	line-height: 1.5;
}

.ep-cta--card .ep-cta__title {
	font-size: var(--ep-fs-lg);
	line-height: 1.5;
}

@media (max-width: 1199px) {
	.ep-cta__card {
		height: 220px;
	}
}

@media (max-width: 767px) {
	.ep-cta__card {
		height: 200px;
	}
	.ep-cta__body {
		padding: 0 24px 24px;
	}
	.ep-cta__img {
		object-position: 72% 62%; /* 狭い幅では被写体側に寄せる */
	}
}

/* ---- 写真帯（parts/photo-band.php） ---- */
/* JS が無い時: FV と同じ左右余白・角丸の切り抜きで止まり、中身は最初から見える。
   JS が動く時の「切り抜きが広がる＋中身が順に出る」は下の「写真帯の展開」（121 踏襲）。 */
.ep-band {
	position: relative;
	color: var(--ep-color-on-dark);
	isolation: isolate;
}

.ep-band__frame {
	position: relative;
}

.ep-band__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	clip-path: inset(0 var(--ep-frame-inset) round var(--ep-radius-xl));
	background: var(--ep-color-accent);
}

.ep-band__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ep-band__overlay {
	position: absolute;
	inset: 0;
	background: var(--ep-overlay-accent);
}

.ep-band--ink .ep-band__bg {
	background: var(--ep-color-ink);
}

.ep-band--ink .ep-band__overlay {
	background: var(--ep-overlay-ink);
}

.ep-band__inner {
	width: min(100% - (var(--ep-frame-inset) + var(--ep-gutter)) * 2, var(--ep-width-content));
	margin-inline: auto;
	padding-block: var(--ep-space-3xl);
}

.ep-band--tall .ep-band__inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: min(900px, 100svh);
	padding-bottom: 150px;
}

.ep-band__cards {
	margin-top: var(--ep-space-xl);
}

.ep-band__actions {
	margin-top: var(--ep-space-xl);
}

/* 写真帯の展開（121 デモ cb_post_list の切り抜き展開を踏襲・動きを減らす設定でも止めない）
   - 切り抜き: main.js の GSAP ScrollTrigger が .ep-band__frame の clip-path を inset(200px round 15px)→inset(0px round 0px)
     （スマホ 100px）に、帯の上端が画面の 80%→20% の間でスクロール連動（scrub 0.3）させる
   - 中身: 進み 0.9 以上で .is-expanded → 下から 50px・不透明度 0.7s／移動 1.0s で 0.3s・0.6s・1.0s 遅れて出す。
     0.9 未満に戻ると .is-back → 0.5s で消える（121 の end_animation / back_animation と同じ）
   - 貼り付き（pin）はしない（10/18 ヤヤ「メディアのスクロールがやっぱり止まる」）。121 は帯を約1画面ぶん画面に貼り付けたまま進め、
     EIP も一度 30vh に縮めて背景の視差で補ったが、貼り付いている間は見出し・カードが画面上で動かない（1440×900 で 270px 分）ので
     「止まった」と感じる原因そのものだった。帯は普通に流れ、切り抜きが広がる動きだけをスクロールに合わせる（スマホは元から貼り付かない＝121 と同じ） */
.ep-js .ep-band {
	overflow: clip;
}
.ep-js .ep-band__frame {
	display: flex;
	align-items: center;
	min-height: calc(100vh - var(--ep-header-height));
	clip-path: inset(var(--ep-band-inset-start) round var(--ep-radius-xl));
	contain: layout paint;
}
.ep-js .ep-band__frame.is-animating {
	will-change: clip-path;
}
.ep-js .ep-band__bg {
	clip-path: none;
}
/* 背景の写真の視差（main.js が GSAP で yPercent −6→6 を帯の通過に合わせて動かす）。上下に余白を持たせるため 1.15 倍 */
.ep-js .ep-band__img {
	will-change: transform;
}
.ep-js .ep-band__inner {
	transition: opacity 0.5s ease;
}
.ep-js .ep-band__inner > * {
	position: relative;
	top: var(--ep-reveal-distance);
	opacity: 0;
	transition: opacity var(--ep-reveal-fade) ease 0.15s, top var(--ep-reveal-move) ease 0.15s; /* 遅れ 0.15/0.3/0.45s（121 は 0.3/0.6/1.0s。貼り付きをやめたので短く・10/18） */
}
.ep-js .ep-band__inner > :nth-child(2) {
	transition-delay: 0.3s;
}
.ep-js .ep-band__inner > :nth-child(n + 3) {
	transition-delay: 0.45s;
}
.ep-js .ep-band.is-expanded .ep-band__inner > * {
	top: 0;
	opacity: 1;
}
.ep-js .ep-band.is-back .ep-band__inner {
	opacity: 0;
}
/* 帯の中の部品に付いた個別の出現は使わない（帯の展開でまとめて出す）。
   - 直下の部品（縦書き見出し）: 個別の出現の translateY(50px) だけ消し、不透明度と top は上の帯の展開に従わせる。
     10/18 まで直下も opacity:1・transition:none にしていたため、見出しが最初から見えたまま、展開の瞬間に top 50px→0 が
     アニメーション無しで一気に動いていた（＝貼り付く直前に見出しが跳ねる。ヤヤ「モーションが干渉して止まる」の一因）
   - 孫以下（カード）: 帯の展開でまとめて出るので、個別の出現は全部消す */
.ep-js .ep-band__inner > [data-ep-reveal] {
	transform: none;
}
.ep-js .ep-band__inner > * [data-ep-reveal] {
	opacity: 1;
	transform: none;
	transition: none;
}

@media (max-width: 767px) {
	.ep-band--tall .ep-band__inner {
		min-height: 560px;
		padding-bottom: var(--ep-space-3xl);
	}
}

/* ---- その他 ---- */
.ep-empty {
	padding-block: var(--ep-space-2xl);
	color: var(--ep-color-ink-sub);
	text-align: center;
}

.ep-dev-note {
	padding: var(--ep-space-s);
	border: 1px dashed var(--ep-color-line-strong);
	border-radius: var(--ep-radius-s);
	color: var(--ep-color-ink-sub);
	font-size: var(--ep-fs-xs);
}