/* ==========================================================================
   sections.css — トップページのセクション固有の配置（template-parts/front/*.php）。
   部品の見た目は components.css。ここは「どこに置くか」だけを書く。
   ========================================================================== */

/* ==========================================================================
   FV（front/hero.php）
   121型: 写真は左右100px・角丸15で切り抜き／中央にロゴ枠／左下にキャッチ 32px w600
         右の100px列にサイドボタン（アイコン34＋12px）・写真の下に高さ100のティッカー行
         ティッカーの下の中央に縦書きのリード（10/18 まで左の100px列にあった。原稿のリードは長く細い列にぶら下がって見えたため移動）
   ========================================================================== */
.ep-hero__stage {
	display: grid;
	grid-template-columns: var(--ep-frame-inset) minmax(0, 1fr) var(--ep-frame-inset);
	grid-template-areas: ". media side";
}

/* 導入（121 の「ゆったり時間が流れる小さな島。」のブロックに合わせる・10/18）
   121 実測: ティッカーの下に罫線1px → 上下 120px（1024: 100／390: 50）の中央に、縦の本文 18px / 50.4px / w500（390: 14px / 30.8px）。
   本文は1列＝1フレーズで、列の長さがそろった小さな塊にする（折り目は content-front.php の "\v"）。
   121 はスマホでも縦書きのままなので、全幅で縦書き */
.ep-hero__intro {
	display: flex;
	justify-content: center;
	padding-block: 88px; /* 1024〜1199: 72・スマホ: 50（121 は 120／100／50。見出しの無い3列だけなので上下を詰める・Sol 推奨） */
	border-top: 1px solid var(--ep-color-line);
}

.ep-hero__lead {
	writing-mode: vertical-rl;
	font-size: var(--ep-fs-md);
	font-weight: var(--ep-weight-medium);
	line-height: 42px; /* 列送り 2.35。3列の総幅を約126に締める（121 の本文 50.4 は見出しと組む前提の列間） */
}

@media (max-width: 1199px) {
	.ep-hero__intro {
		padding-block: 72px;
	}
}

@media (max-width: 767px) {
	.ep-hero__intro {
		padding-block: 50px;
	}
	.ep-hero__lead {
		font-size: var(--ep-fs-xs);
		line-height: 30.8px; /* 121 のスマホ本文 14px / 30.8px */
	}
}

.ep-hero__media {
	position: relative;
	grid-area: media;
	height: clamp(520px, calc(100svh - var(--ep-header-height) - 100px), 700px);
	overflow: hidden;
	border-radius: var(--ep-radius-xl);
	background: var(--ep-color-ink);
	color: var(--ep-color-on-dark);
}

.ep-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

.ep-hero__mark {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	transform: translate(-50%, -50%);
}

.ep-hero__logo {
	width: auto;
	height: 170px;
	color: var(--ep-color-on-dark);
}

.ep-hero__eyebrow {
	font-size: var(--ep-fs-md);
	font-weight: var(--ep-weight-medium);
	line-height: 1;
	letter-spacing: 0.3em;
}

.ep-hero__catch {
	position: absolute;
	left: var(--ep-space-l);
	right: var(--ep-space-l);
	bottom: 30px;
	font-size: var(--ep-fs-2xl);
	font-weight: var(--ep-weight-bold);
	line-height: 1.6;
}

/* PC の FV 右側の「EIPについて」は出さない（10/18 ヤヤ）。タブレット・スマホでは FV の下のボタンとして出す（下の max-width: 1023px） */
.ep-hero__side-link {
	display: none;
}

@media (max-width: 1023px) {
	.ep-hero__side-link {
		display: flex;
	}
}

.ep-hero__side-link {
	grid-area: side;
	align-self: start;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ep-space-xs);
	height: 100px;
	margin-top: 200px;
	padding-inline: var(--ep-space-2xs);
	transition: color var(--ep-duration-fast);
}

.ep-hero__side-icon {
	width: 34px;
	height: 34px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	transition: transform var(--ep-duration-base) var(--ep-ease);
}

.ep-hero__side-link:hover {
	color: var(--ep-color-accent);
}

.ep-hero__side-link:hover .ep-hero__side-icon {
	transform: translateX(3px);
}

.ep-hero__side-label {
	font-size: var(--ep-fs-2xs);
	line-height: 1;
	white-space: nowrap;
}

.ep-hero__ticker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--ep-space-2xs) 22px;
	min-height: 100px;
	padding-inline: var(--ep-gutter);
}

.ep-hero__ticker-name {
	color: var(--ep-color-ink-sub);
	font-size: var(--ep-fs-xs);
	font-weight: var(--ep-weight-medium);
}

.ep-hero__ticker-link {
	color: var(--ep-color-accent);
	font-weight: var(--ep-weight-medium);
}

.ep-hero__ticker-link::after {
	content: " →";
}

.ep-hero__ticker-link:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ==========================================================================
   オープニング（front/hero.php の .ep-opening）と FV の導入 — 121 デモの完全踏襲（10/18 ヤヤ決定・動きを減らす設定でも止めない）
   121 の modules/preloader（c-preloader--6 ＋ opening_animation ＋ index_slider_layout_type2）と同じ時間・イージング。
   時刻は main.js が付ける html のクラスで進む（0 秒＝読み込み開始）:
     0.0s  ロード画面（アクセント色）。ロゴは約1.2秒、キャッチは0.5秒から順に表示
     2.0s  .ep-opening-hide       ロゴとキャッチが0.5秒で消える
     2.5s  .ep-opening-end        角丸の窓が約1秒で開き、FVが見える
                                   ＋10ms .ep-opening-start  FVの中身の出現を始める
     3.0s  FVが全画面から通常の枠へ収まり始める
     3.8s  .ep-opening-done       ロード画面を消し、スクロールを戻す
   ========================================================================== */
.ep-opening {
	display: none;
}

.ep-js .ep-opening {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: block;
	color: var(--ep-color-on-dark);
	/* main.js が動かなかった時の保険: 4 秒で自分から消える（main.js が動けば .is-running で打ち消す） */
	animation: ep-opening-failsafe 0.5s ease 4s forwards;
}

.ep-js .ep-opening.is-running {
	animation: none;
}

/* ロード画面の色は「影」で塗り、窓（角丸の穴）を広げて FV を見せる（121: .c-preloader::before の box-shadow 100vmax） */
.ep-opening::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	border-radius: 0;
	background: var(--ep-color-accent);
	box-shadow: 0 0 0 100vmax var(--ep-color-accent);
}

.ep-opening-end .ep-opening {
	pointer-events: none; /* 窓が開き始めたら下の FV を触れるようにする（121: .c-preloader.is-end） */
}

.ep-opening-end .ep-opening::before {
	background: transparent;
	animation: ep-opening-reveal 1s ease forwards;
}

.ep-opening__content {
	position: fixed;
	inset: 0;
	z-index: 1;
	display: flex; /* ロゴとキャッチを重ねず、中央そろえで横並び（10/18 ヤヤ）。左にキャッチ・右にロゴ（ヤヤ指示で入れ替え） */
	flex-direction: row-reverse;
	align-items: center;
	justify-content: center;
	gap: 64px;
	transition: opacity 0.5s ease;
}

.ep-opening-hide .ep-opening__content {
	opacity: 0;
}

/* 121 の地図の線画にあたる部分＝EIP のロゴを線だけで描く */
.ep-opening__logo {
	flex: 0 0 auto;
	width: auto;
	height: 260px;
	transform: scale(0.5);
	transform-origin: center center;
	animation: ep-opening-logo 1.2s cubic-bezier(0.76, 0, 0.24, 1) 0s forwards;
}

.ep-opening__logo path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5px;
	vector-effect: non-scaling-stroke;
}

.ep-opening__catch {
	flex: 0 0 auto;
	writing-mode: vertical-rl;
	text-orientation: upright;
	font-size: 34px;
	font-weight: var(--ep-weight-bold);
	line-height: 2;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.ep-opening__catch span {
	display: block;
	opacity: 0;
}

.ep-opening__catch span.is-shown {
	opacity: 1;
	transition: opacity 0.7s ease;
}

.ep-opening-done .ep-opening {
	display: none;
}

/* オープニング中はスクロールさせない（121: body:has(.opening_animation):not(.end-opening-animation)） */
.ep-opening-active body {
	height: 100vh;
	overflow: hidden;
}

/* FV: オープニング中は写真を全画面（ヘッダーより手前）に出しておき、窓が開ききった後に枠へ収める。
   --ep-open-* は main.js が測った「本来の位置と大きさ」（121: opening_type2_frame_animation 0.8s ease 1.5s） */
.ep-opening-active .ep-hero__media {
	position: fixed;
	top: -15px;
	left: -15px;
	z-index: 999;
	width: calc(100vw + 30px);
	height: calc(100vh + 30px);
	border-radius: var(--ep-radius-xl);
}

.ep-opening-active.ep-opening-end .ep-hero__media {
	animation: ep-opening-frame 0.7s ease 0.5s both;
}

.ep-hero__media-space {
	grid-area: media;
}

@keyframes ep-opening-logo {
	from { transform: scale(0.5); }
	to { transform: scale(1); }
}

@keyframes ep-opening-reveal {
	0% {
		inset: 50%;
		border-radius: 15px;
		animation-timing-function: ease-out;
	}
	60% {
		inset: 20%;
		border-radius: 15px;
	}
	70% {
		inset: 20%;
		border-radius: 15px;
	}
	100% {
		inset: -15px; /* 角丸の外周を画面外へ出し、四隅にロード画面の色を残さない（121 と同じ） */
		border-radius: 15px;
	}
}

@keyframes ep-opening-frame {
	from {
		top: -15px;
		left: -15px;
		width: calc(100vw + 30px);
		height: calc(100vh + 30px);
	}
	to {
		top: var(--ep-open-top);
		left: var(--ep-open-left);
		width: var(--ep-open-width);
		height: var(--ep-open-height);
	}
}

@keyframes ep-opening-failsafe {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

/* FV の中身: ロゴ（＋社名）→ 左下のキャッチの順に 1.0s でフェードイン（121: オープニングあり type2 の
   .content 2.0s／.catch_bottom 2.6s・.ep-opening-start＝121 の start_first_animation から数える）。
   写真は 1.1倍→等倍に 3s で寄る（121 は動画。静止画なのでゆっくり寄せて代える）。
   隠すのは main.js が動いた時（html.ep-motion）だけ＝JS が失敗しても中身は見える。 */
.ep-motion .ep-hero__mark,
.ep-motion .ep-hero__catch {
	opacity: 0;
}
.ep-motion .ep-hero__img {
	transform: scale(1.1);
}
.ep-opening-start .ep-hero__mark {
	opacity: 1;
	transition: opacity 1s ease 2s;
}
.ep-opening-start .ep-hero__catch {
	opacity: 1;
	transition: opacity 1s ease 2.6s;
}
.ep-opening-start .ep-hero__img {
	transform: none;
	transition: transform 3s var(--ep-ease);
}

@media (max-width: 767px) {
	.ep-opening__content {
		gap: 28px;
	}
	.ep-opening__logo {
		height: 110px; /* 121: --tcd-preloader-image-size-sp 200px（縦長の地図）に面積を合わせる */
	}
	.ep-opening__catch {
		font-size: 22px;
	}
}

@media (max-width: 1023px) {
	.ep-hero__stage {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "media" "side";
		padding-inline: var(--ep-frame-inset);
	}
	.ep-hero__media {
		height: clamp(420px, 64svh, 620px);
	}
	.ep-hero__logo {
		height: 110px;
	}
	.ep-hero__side-link {
		flex-direction: row;
		justify-self: center;
		height: auto;
		margin-top: var(--ep-space-s);
		padding: var(--ep-space-2xs) var(--ep-space-s);
		border: 1px solid var(--ep-color-line-strong);
		border-radius: var(--ep-radius-pill);
	}
	.ep-hero__side-icon {
		width: 22px;
		height: 22px;
	}
	.ep-hero__side-label {
		font-size: var(--ep-fs-xs);
	}
}

@media (max-width: 767px) {
	.ep-hero__media {
		height: clamp(400px, 62svh, 540px);
	}
	.ep-hero__logo {
		height: 72px;
	}
	.ep-hero__mark {
		gap: var(--ep-space-xs);
	}
	.ep-hero__eyebrow {
		font-size: var(--ep-fs-xs);
	}
	.ep-hero__catch {
		left: var(--ep-space-s);
		right: var(--ep-space-s);
		bottom: var(--ep-space-s);
		font-size: 22px;
	}
	.ep-hero__ticker {
		min-height: 80px;
	}
}

/* ==========================================================================
   02｜事業内容（front/service.php）
   121型: 左に 880 幅の 2×2、右に 360 幅の見出し列（大見出し→縦の本文→円ボタン）
   ========================================================================== */
.ep-front-service__inner {
	display: flex;
	width: min(100% - var(--ep-frame-inset) * 2, var(--ep-width-wide));
	margin-inline: auto;
}

.ep-front-service__list {
	flex: 0 1 880px;
	align-content: start; /* 見出し列のほうが高くても行を引き伸ばさない（写真が 3:2 になって行が低くなったため） */
}

.ep-front-service__head {
	display: flex;
	flex: 1 0 290px;
	flex-direction: column;
	align-items: center;
	gap: 56px; /* 本文→円ボタン（Sol 推奨・10/18） */
	padding-left: var(--ep-space-xl);
}

/* 見出し列は 620〜650px 以内に収める（大見出し→本文 48・本文→ボタン 56・円ボタン 145）。
   121 は見出し列と 2×2 の高さがほぼ同じ。こちらは写真が 3:2 で 2×2 が低いので、見出し列を詰めて差を小さくする */
.ep-front-service .ep-vhead--stack {
	gap: 48px;
}

/* 本文の列はメディアと同じ 16px・字間なし（18px のままだと見出し列が 730px になり 2×2 より 100px 以上高くなる） */
.ep-front-service .ep-vhead__text {
	font-size: var(--ep-fs-sm);
	letter-spacing: 0;
}

/* 見出し列との高さの差が 80px 以内になったので、2×2 だけ 35px 下げて上下の釣り合いを取る（Sol 推奨） */
.ep-front-service__list {
	margin-top: 35px;
}

.ep-front-service__button {
	width: 145px;
	height: 145px;
}

/* 1199px 以下は 121 の 1024 幅と同じ並び＝見出し群（大見出し＋本文）を上・中央、2×2、円ボタンを一覧の下・中央。
   横並びのままだと写真が 132〜220px まで縮み、縦書きの項目名が写真の高さに収まらない。
   円ボタンは HTML では見出し列の中にあるので、見出し列を display: contents にして order で並べ替える（読み上げ順は見出し→ボタン→一覧のまま） */
@media (max-width: 1199px) {
	.ep-front-service__inner {
		flex-direction: column;
		align-items: center;
		gap: 60px;
		width: min(100% - var(--ep-gutter) * 2, var(--ep-width-wide));
	}
	.ep-front-service__head {
		display: contents;
	}
	.ep-front-service .ep-vhead--stack {
		order: 1;
		flex-direction: row-reverse;
		align-items: flex-start;
		gap: var(--ep-space-l);
	}
	.ep-front-service__list {
		order: 2;
		flex-basis: auto;
		justify-content: center;
		align-self: stretch;
		margin-top: 0;
	}
	.ep-front-service__button {
		order: 3;
		width: 140px;
		height: 140px;
	}
}

@media (max-width: 767px) {
	.ep-front-service__inner {
		gap: var(--ep-space-xl);
	}
	.ep-front-service .ep-vhead--stack {
		flex-direction: column;
		align-items: center;
	}
	.ep-front-service__button {
		width: 120px;
		height: 120px;
	}
}

/* ==========================================================================
   03｜実績（front/works.php）・05｜お知らせ（front/news.php）
   121型: 縦見出しの下 120 → 写真列 → ボタンの上 120（お知らせは 60）
   ========================================================================== */
.ep-front-works .ep-vhead {
	margin-bottom: var(--ep-space-3xl);
}

.ep-front-news .ep-vhead {
	margin-bottom: 60px;
}

.ep-front-news .ep-actions {
	margin-top: 60px;
}

@media (max-width: 767px) {
	.ep-front-news .ep-vhead {
		margin-bottom: var(--ep-space-l);
	}
	.ep-front-news .ep-actions {
		margin-top: var(--ep-space-l);
	}
}

/* ==========================================================================
   01｜メディア（front/media.php）— 写真帯の中の縦書きの役割ごとの寸法（Sol 推奨・10/18）
   見出し 18/600・サブ 16/600・本文 16/400（列送り 39）。見出し・サブと本文の間だけ 14 空ける。カードは 25 上げる
   ========================================================================== */
.ep-front-media .ep-vhead__title {
	font-size: var(--ep-fs-md);
}

.ep-front-media .ep-vhead__sub,
.ep-front-media .ep-vhead__text {
	font-size: var(--ep-fs-sm);
}

.ep-front-media .ep-vhead__text {
	margin-block-start: 14px;
	line-height: 39px;
}

.ep-front-media .ep-band__cards {
	margin-top: 45px;
}

/* 帯の中身の寸法（10/18 に貼り付き中の見切れを抑えるため詰めた値。貼り付きをやめた後も、帯が1画面に収まる詰まり具合としてそのまま使う）。
   カードは 3:2 のまま幅 300（121 は 338）・見出し→カード 32・カード→ボタン 40・上下 56 */
.ep-front-media .ep-band__inner {
	padding-block: 56px;
}

.ep-front-media .ep-card--media {
	overflow: hidden;
	border-radius: var(--ep-radius-l);
	background: var(--ep-color-bg);
	color: var(--ep-color-ink);
}

.ep-front-media .ep-card__media {
	margin-bottom: 0;
	border-radius: 0;
}

.ep-front-media .ep-card__body {
	padding: 18px 20px 20px;
}

.ep-front-media .ep-card__action .ep-button--outline {
	background: var(--ep-color-accent);
	border-color: var(--ep-color-accent);
	color: var(--ep-color-on-dark);
	transition: background-color var(--ep-duration-fast), color var(--ep-duration-fast), border-color var(--ep-duration-fast), transform var(--ep-duration-fast);
}

.ep-front-media .ep-card__action .ep-button--outline:hover,
.ep-front-media .ep-card__action .ep-button--outline:focus-visible {
	transform: translateY(-2px);
	background: var(--ep-color-accent-hover);
	border-color: var(--ep-color-accent-hover);
	color: var(--ep-color-on-dark);
}

@media (min-width: 768px) {
	.ep-front-media .ep-band__cards {
		margin-top: 32px;
	}
	.ep-front-media .ep-band__cards > .ep-card {
		flex: 0 0 300px; /* 290 だと2枚目の説明文が3行になる */
	}
	.ep-front-media .ep-card__media {
		margin-bottom: 0;
	}
	.ep-front-media .ep-card__body {
		gap: 12px;
	}
	.ep-front-media .ep-band__actions {
		margin-top: 40px;
	}
}

@media (max-width: 767px) {
	.ep-front-media .ep-vhead__title {
		font-size: var(--ep-fs-sm);
	}
	.ep-front-media .ep-vhead__sub,
	.ep-front-media .ep-vhead__text {
		font-size: var(--ep-fs-xs);
	}
	.ep-front-media .ep-vhead__text {
		line-height: 30.8px;
	}
	.ep-front-media .ep-band__cards {
		row-gap: 48px; /* スマホのカード間 */
	}
	.ep-front-media .ep-band__inner {
		padding-block: var(--ep-space-3xl); /* 帯の上下 56 */
	}
}

/* ==========================================================================
   04｜EIPについて（front/about.php）— カードの無い写真帯
   見出し群の中心を帯の高さの約35%、ボタンの中心を約78%に置く（121「知る」の重心・Sol 推奨・10/18）。
   帯の最小の高さ PC 780／1024〜1199 670、上 80・下 96
   ========================================================================== */
.ep-front-about .ep-band__inner {
	--ep-about-head-offset: 15px;   /* 見出し群の中心 ≈ 34.5% */
	--ep-about-button-offset: 28px; /* ボタンの中心 ≈ 79.5% */
	justify-content: flex-start;
	min-height: 780px;
	padding-block: 80px 96px;
}

.ep-front-about .ep-vhead {
	margin-top: var(--ep-about-head-offset, 0px);
}

.ep-front-about .ep-band__actions {
	margin-top: auto;
	margin-bottom: var(--ep-about-button-offset, 0px);
}

@media (max-width: 1199px) {
	.ep-front-about .ep-band__inner {
		--ep-about-head-offset: 0px;
		--ep-about-button-offset: 6px;
		min-height: 670px;
	}
}

@media (max-width: 767px) {
	.ep-front-about .ep-band__inner {
		--ep-about-button-offset: 0px;
		min-height: 0;
		padding-block: var(--ep-space-3xl);
	}
	.ep-front-about .ep-band__actions {
		margin-top: var(--ep-space-xl);
	}
}

@media (max-width: 767px) {
	.ep-front-works .ep-vhead {
		margin-bottom: 56px;
	}
}