/* ==========================================================================
   layout.css — ページの骨格: コンテナ・セクション・ヘッダー・ドロワー・フッター・出現モーション。
   ========================================================================== */

/* ---- コンテナ ---- */
.ep-container {
	width: min(100% - var(--ep-gutter) * 2, var(--ep-width-content));
	margin-inline: auto;
}

.ep-container--wide {
	width: min(100% - var(--ep-gutter) * 2, var(--ep-width-wide));
}

.ep-container--narrow {
	width: min(100% - var(--ep-gutter) * 2, var(--ep-width-narrow));
}

/* ---- セクション ---- */
.ep-section {
	padding-block: var(--ep-space-section);
}

.ep-section--tight {
	padding-block: var(--ep-space-xl);
}

.ep-section--ruled {
	border-top: 1px solid var(--ep-color-line);
}

.ep-section--surface {
	background: var(--ep-color-surface);
}

/* ボタンを並べる行（中央寄せ） */
.ep-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ep-space-s);
	margin-top: var(--ep-space-3xl);
}

.ep-actions--spaced {
	margin-block: var(--ep-space-xl) var(--ep-space-section);
}

/* ==========================================================================
   ヘッダー（121型: 高さ100・ロゴ左 x40 h34・右端に 110×100 のセル。1200px 以下は高さ60・ロゴ h23＝121 と同じ）
   ========================================================================== */
.ep-header {
	position: sticky;
	top: 0;
	z-index: var(--ep-z-header);
	height: var(--ep-header-height);
	background: var(--ep-color-bg);
	transition: box-shadow 0.25s ease; /* 121: background-color / box-shadow 0.25s ease */
}

/* スクロールを始めたら影を出す（121: body.start_scroll #header の box-shadow）。121 と同じく下へ進んでも隠さない（10/18） */
.ep-header.is-scrolled {
	box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
}

.ep-header__inner {
	display: flex;
	align-items: center;
	height: 100%;
	padding-left: var(--ep-gutter);
}

.ep-header__brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 34px;
	margin-right: auto;
}

.ep-header__brand-prefix {
	font-size: var(--ep-fs-sm);
	font-weight: var(--ep-weight-bold);
	line-height: 1;
	letter-spacing: 0.02em;
}

.ep-header__logo {
	width: auto;
	height: 34px;
	color: var(--ep-color-ink);
}

.ep-header__menu {
	display: flex;
	gap: 30px;
}

.ep-header__link {
	position: relative;
	display: block;
	padding-block: var(--ep-space-2xs);
	font-size: var(--ep-fs-sm);
	line-height: 1.4;
	white-space: nowrap;
}

.ep-header__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ep-duration-base) var(--ep-ease);
}

.ep-header__link:hover::after,
.ep-header__link.is-current::after {
	transform: scaleX(1);
}

.ep-header__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	/* 文字の左右の空きを同じにする（10/18）。左＝直前のナビとの間、右＝画面の端。
	   値はロゴ側の画面端の余白（--ep-gutter）と同じにして、ヘッダーの左右を対称にする。外側の margin は付けない */
	padding-inline: var(--ep-gutter);
	margin-left: var(--ep-space-s); /* ホバー時の面が直前のナビに接して見えないよう、面の外に少し空ける（10/18） */
	color: var(--ep-color-accent);
	font-weight: var(--ep-weight-bold);
	white-space: nowrap;
	transition: background-color var(--ep-duration-fast);
}

.ep-header__cta:hover {
	background: var(--ep-color-accent-soft);
}

.ep-header__toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: var(--ep-header-height);
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
}

.ep-header__toggle-bars {
	position: relative;
	display: block;
	width: 26px;
	height: 8px;
}

.ep-header__toggle-bars span {
	position: absolute;
	left: 0;
	right: 0;
	height: 1.5px;
	background: currentColor;
	transition: all 0.4s ease; /* 121: #drawer_menu_button span */
}

.ep-header__toggle-bars span:first-child { top: 0; }
.ep-header__toggle-bars span:last-child { top: 100%; }

.ep-header__toggle[aria-expanded="true"] .ep-header__toggle-bars span:first-child { top: 50%; transform: rotate(20deg); }
.ep-header__toggle[aria-expanded="true"] .ep-header__toggle-bars span:last-child { top: 50%; transform: rotate(-20deg); }

.ep-header__toggle-label {
	font-size: 10px;
	line-height: 1;
	letter-spacing: var(--ep-ls-wide);
}

@media (max-width: 1279px) and (min-width: 1024px) {
	.ep-header__menu { gap: 20px; }
	.ep-header__link { font-size: var(--ep-fs-xs); }
}

/* 1200px 以下: 121 と同じ高さ60・ロゴ23（121: --tcd-logo-image-size-sp 23px）。
   お問い合わせの面は高さ100%＝60、文字の左右 40・ナビとの間 20 はそのまま（ヤヤ確認済み 10/18） */
@media (max-width: 1200px) {
	.ep-header__brand,
	.ep-header__logo {
		height: 23px;
	}
	.ep-header__brand {
		gap: 10px;
	}
	.ep-header__brand-prefix {
		font-size: var(--ep-fs-xs);
	}
}

@media (max-width: 1023px) {
	.ep-header__nav,
	.ep-header__cta {
		display: none;
	}
	.ep-header__toggle {
		display: flex;
	}
}

/* ---- ドロワー（タブレット以下のメニュー） ---- */
.ep-drawer {
	position: fixed;
	inset: var(--ep-header-height) 0 0;
	z-index: var(--ep-z-drawer);
	overflow-y: auto;
	padding: var(--ep-space-l) var(--ep-gutter) var(--ep-space-2xl);
	background: var(--ep-color-bg);
	border-top: 1px solid var(--ep-color-line);
}

.ep-drawer[hidden] {
	display: none;
}

/* 開閉は 0.5s のフェード（121: #drawer_menu opacity 0.5s ease）。main.js が hidden を外した次の描画で .is-open を付ける */
.ep-js .ep-drawer {
	opacity: 0;
	transition: opacity 0.5s ease;
}
.ep-js .ep-drawer.is-open {
	opacity: 1;
}

.ep-drawer__link {
	display: block;
	padding-block: var(--ep-space-s);
	border-bottom: 1px solid var(--ep-color-line);
	font-size: var(--ep-fs-md);
}

.ep-drawer__cta {
	margin: var(--ep-space-l) auto 0;
}

.ep-drawer-open {
	overflow: hidden;
}

/* ==========================================================================
   フッター（121型: 上段452・写真＋重ね色／ロゴ高さ110／メニュー／コピーライト。文字は 121 より1段小さい 14px・コピーライト 12px＝10/18）
   ========================================================================== */
.ep-footer__top {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 452px;
	padding: 80px var(--ep-frame-inset);
	color: var(--ep-color-on-dark);
	text-align: center;
	isolation: isolate;
}

.ep-footer__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.ep-footer__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ep-overlay-footer);
}

.ep-footer__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 70%;
}

.ep-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ep-footer__logo {
	width: auto;
	height: 110px;
	margin-bottom: var(--ep-space-l);
	color: var(--ep-color-on-dark);
}

.ep-footer__name,
.ep-footer__desc {
	font-size: var(--ep-fs-xs); /* 121 は 16px／行の高さ 40。EIP はメニューが 121 の約2倍（11項目）で圧迫感があるので1段下げる（10/18 ヤヤ）。行の高さは 121 と同じ比（2.5倍）*/
	line-height: 2.5;
}

.ep-footer__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 17px var(--ep-frame-inset);
}

.ep-footer__group:nth-child(3) {
	flex-basis: 100%;
}

.ep-footer__menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.ep-footer__link {
	display: block;
	padding: var(--ep-space-2xs) var(--ep-space-s);
	font-size: var(--ep-fs-xs); /* 121 は 16px。1段下げる（10/18）。左右の間も 25→20 に比例して詰める */
	line-height: 1;
	transition: color var(--ep-duration-fast);
}

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

.ep-footer__copyright {
	padding: var(--ep-space-m) var(--ep-frame-inset);
	border-top: 1px solid var(--ep-color-line);
	font-size: var(--ep-fs-2xs); /* 121 は 14px。1段下げる（10/18） */
	line-height: 1.4;
	text-align: center;
}

.ep-footer__copyright small {
	font-size: inherit;
}

@media (max-width: 767px) {
	.ep-footer__top {
		min-height: 360px;
		padding-block: var(--ep-space-2xl);
	}
	.ep-footer__logo {
		height: 72px;
		margin-bottom: var(--ep-space-s);
	}
	.ep-footer__name,
	.ep-footer__desc {
		font-size: var(--ep-fs-2xs); /* 121 のスマホは 14px。1段下げる（10/18） */
		line-height: var(--ep-lh-relaxed);
	}
	/* スマホは分類ごとに縦並び（2列のリンク） */
	.ep-footer__nav {
		display: grid;
		gap: var(--ep-space-s);
		padding-block: var(--ep-space-l);
	}
	.ep-footer__menu {
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-content: stretch;
	}
	.ep-footer__item--wide {
		grid-column: 1 / -1; /* 長い名前（東京・多摩地域の企業と暮らし）は2列にまたがって1行で（10/18 ヤヤ「SPで1行に」・名前は変えない） */
	}
	.ep-footer__link {
		padding: 12px 0; /* 押せる高さ 約43px（Sol レビュー 10/18） */
		font-size: var(--ep-fs-2xs); /* 121 のスマホは 14px。1段下げる（10/18） */
		line-height: 1.6;
	}
}

/* ==========================================================================
   出現モーション（main.js が [data-ep-reveal] に .is-revealed を付ける）
   JS が動く時（html.ep-js）だけ初期状態を隠す＝JS が無くても中身は必ず見える
   ========================================================================== */
.ep-js [data-ep-reveal] {
	opacity: 0;
	transform: translateY(var(--ep-reveal-distance));
	transition: opacity var(--ep-reveal-fade) ease, transform var(--ep-reveal-move) ease;
}
.ep-js [data-ep-reveal].is-revealed {
	opacity: 1;
	transform: none;
}