@charset "UTF-8";
/* =========================================================
   株式会社レベライズ コーポレートサイト
   青主体・誠実路線。余白を広く、罫線で区切り、影はほぼ使わない。
   ========================================================= */

/* ---------- 1. デザイントークン ---------- */
:root {
	/* Brand */
	--navy-900: #16294a;
	--navy-800: #1b3358;
	--navy-700: #24406b;
	--blue-600: #456db2; /* 現行サイトのブランド青 */
	--blue-500: #5a82c4; /* 白文字は不可（3.87:1）。面や罫線のみ */
	--blue-700: #2e5087;
	--blue-100: #e8eef8;
	--blue-050: #f2f6fc;
	--cyan-400: #29abe2; /* ロゴマークの色。ロゴ以外では使わない */

	/*
	 * ゴールド（ポイントカラー）。指定色は --gold-600 #A88000。
	 * 白の上では 3.65:1 しかないため、小さい文字には使えない。用途で使い分ける:
	 *   白・淡色の上の小さい文字 … --gold-700 (5.03:1)
	 *   白の上の罫線・大きな英字 … --gold-600 (3.65:1 ＝ 大文字/UI部品の基準は満たす)
	 *   濃紺の上の文字         … --gold-400 (7.42:1)
	 */
	--gold-700: #8c6a00;
	--gold-600: #a88000;
	--gold-500: #c29a1d;
	--gold-400: #d8b65a;
	--gold-100: #f3ebd6;
	--gold-line: rgb(168 128 0 / 34%);

	/* Neutral */
	--ink-900: #1a2233;
	--ink-700: #37415a;
	--ink-500: #5b6579;
	--ink-400: #666f82;
	--line: #dde3ec;
	--line-strong: #c3cddd;
	--bg-tint: #f5f7fa;
	--white: #fff;

	/* Layout */
	--container: 1120px;
	--container-wide: 1280px;
	--gutter: clamp(20px, 5vw, 40px);
	--section-y: clamp(64px, 9vw, 120px);
	--radius: 3px;
	/*
	 * ヘッダーの実測高さ。ヘッダーは position:fixed でヒーローの上に重ねるため、
	 * ヒーロー側はこの分だけ内側に余白を取って文字が隠れないようにする。
	 * ヘッダーの中身（ロゴの字送り・ナビ）を変えたときは実測して更新すること。
	 */
	--header-h: 73px;

	/* Type */
	--font: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
		"Yu Gothic", Meiryo, sans-serif;
	/* 英字の飾り見出し用。セリフ＋広いトラッキングで格を出す。 */
	--font-en: "Cormorant Garamond", "Times New Roman", "Yu Mincho", serif;
	--fs-h1: clamp(1.75rem, 1.15rem + 2.4vw, 2.75rem);
	--fs-h2: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
	--fs-h3: clamp(1.1875rem, 1rem + 0.8vw, 1.5rem);
	--fs-h4: clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);
	--fs-body: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
	--fs-sm: 0.875rem;
	--fs-xs: 0.8125rem;
	--lh-body: 1.9;
	/* 和文の字間。詰まって見えないよう全体に少し開ける。 */
	--tracking: 0.04em;
	--tracking-wide: 0.08em;
}

/*
 * 画面が狭いと、字間を広げた分だけ見出しの最後の1文字が次行に落ちる。
 * モバイルでは字間を詰めて折り返しを防ぐ。
 */
@media (max-width: 640px) {
	:root {
		--tracking: 0.02em;
		--tracking-wide: 0.04em;
	}
}

/* ---------- 2. リセットとベース ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: var(--lh-body);
	letter-spacing: var(--tracking);
	color: var(--ink-900);
	background: var(--white);
	/* anywhere は和文で1文字だけ next line に落ちやすい。長い英単語やURLだけ折る。 */
	overflow-wrap: break-word;
	word-break: normal;
	line-break: strict;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
p,
figure,
ul,
ol,
dl,
dd,
blockquote {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

img,
svg {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

a {
	color: var(--blue-600);
	text-underline-offset: 0.25em;
	transition: color 0.3s ease;
}

a:hover {
	color: var(--navy-800);
}

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

table {
	border-collapse: collapse;
	width: 100%;
}

:focus-visible {
	outline: 3px solid var(--gold-600);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 200;
	padding: 12px 20px;
	color: var(--white);
	background: var(--navy-900);
	transition: top 0.2s;
}

.skip-link:focus {
	top: 12px;
	color: var(--white);
}

/* ---------- 3. レイアウト ---------- */
.container {
	width: min(100%, var(--container));
	padding-inline: var(--gutter);
	margin-inline: auto;
}

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

.container--narrow {
	width: min(100%, 800px);
}

/*
 * 100vw はスクロールバーの幅を含むため、画面端まで伸ばす要素（.overlap__media）は
 * そのままだと数px はみ出して横スクロールが出る。ここで切り落とす。
 * overflow-x:clip はスクロールコンテナを作らず、position:fixed の包含ブロックにも
 * ならないので、ヘッダーとドロワー（いずれも .site-main の外）には影響しない。
 */
.site-main {
	overflow-x: clip;
}

.section {
	padding-block: var(--section-y);
}

.section--tint {
	background: var(--bg-tint);
}

.section--navy {
	color: var(--white);
	background: var(--navy-900);
}

.section--tight {
	padding-block: clamp(44px, 6vw, 72px);
}

.stack > * + * {
	margin-top: 1.25em;
}

.stack-lg > * + * {
	margin-top: clamp(32px, 4vw, 56px);
}

/* ---------- 4. 見出し ---------- */
.sec-head {
	margin-bottom: clamp(32px, 4vw, 56px);
}

.sec-head--center {
	text-align: center;
}

/*
 * 英字はセリフ体で大きく、日本語見出しはその下にゴシックで置く。
 * 見出しの意味を担うのは日本語（h2）のまま。英字は装飾。
 */
.sec-head__en {
	display: block;
	margin-bottom: 2px;
	font-family: var(--font-en);
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
	font-weight: 500;
	font-style: italic;
	line-height: 1.15;
	color: var(--gold-600);
	letter-spacing: 0.06em;
}

.sec-head__ja {
	position: relative;
	padding-bottom: 20px;
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.6;
	color: var(--navy-900);
	letter-spacing: var(--tracking-wide);
}

/* ゴールドの短い線＋淡いヘアラインで、細さのコントラストを作る。 */
.sec-head__ja::before {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	content: "";
	background: var(--line);
}

.sec-head__ja::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 56px;
	height: 2px;
	content: "";
	background: var(--gold-600);
}

.sec-head--center .sec-head__ja::after {
	left: 50%;
	transform: translateX(-50%);
}

.section--navy .sec-head__ja,
.page-hero .sec-head__ja {
	color: var(--white);
}

.section--navy .sec-head__en {
	color: var(--gold-400);
}

.section--navy .sec-head__ja::before {
	background: rgb(255 255 255 / 16%);
}

.section--navy .sec-head__ja::after {
	background: var(--gold-400);
}

.h3 {
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: 1.7;
	color: var(--navy-900);
	letter-spacing: var(--tracking-wide);
}

.h4 {
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: 1.7;
	color: var(--navy-800);
	letter-spacing: 0.05em;
}

.lead {
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	line-height: 2;
	color: var(--ink-700);
}

.note {
	font-size: var(--fs-sm);
	line-height: 1.85;
	color: var(--ink-500);
}

.text-center {
	text-align: center;
}

/* ---------- 5. ボタン ---------- */
.btn {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	/* 細く横長に。高さ 30px 前後、左右の余白を広く取る（デザインカンプのヘッダーに合わせた）。 */
	min-height: 30px;
	padding: 5px 44px;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 0;
	transition: color 0.35s ease, border-color 0.35s ease;
	/*
	 * ホバー色は ::before を左下から右上へ滑り込ませて塗り替える。
	 * z-index:0 で重ね合わせ文脈を作ると、z-index:-1 の ::before は
	 * ボタン自身の背景より前・文字より後ろに描かれる。
	 */
	position: relative;
	z-index: 0;
	overflow: hidden;
}

.btn::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	content: "";
	background: var(--btn-hover-bg, var(--navy-800));
	transform: translate3d(-101%, 101%, 0);
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.btn:hover::before,
.btn:focus-visible::before {
	transform: translate3d(0, 0, 0);
}

.btn::after {
	width: 5px;
	height: 5px;
	content: "";
	border-top: 1.5px solid currentcolor;
	border-right: 1.5px solid currentcolor;
	transform: rotate(45deg);
}

.btn--primary {
	--btn-hover-bg: var(--blue-700);
	color: var(--white);
	background: var(--navy-800);
}

.btn--primary:hover {
	color: var(--white);
}

.btn--ghost {
	color: var(--navy-800);
	background: transparent;
	border-color: var(--line-strong);
}

.btn--ghost:hover {
	color: var(--white);
	border-color: var(--navy-800);
}

.btn--white {
	--btn-hover-bg: var(--blue-100);
	color: var(--navy-900);
	background: var(--white);
}

.btn--white:hover {
	color: var(--navy-900);
}

/*
 * ゴールドのボタン。濃紺の面の上でのみ使う。
 * 文字色は navy-900 で 7.42:1（--gold-600 に白文字だと 3.65:1 で不足する）。
 */
.btn--gold {
	--btn-hover-bg: var(--gold-500);
	color: var(--navy-900);
	background: var(--gold-400);
}

.btn--gold:hover {
	color: var(--navy-900);
}

.btn--lg {
	min-height: 38px;
	padding: 8px 64px;
	font-size: var(--fs-xs);
}

.btn--block {
	width: 100%;
}

/* ---------- 6. ヘッダー ---------- */
@media (min-width: 1025px) {
	:root {
		--header-h: 77px;
	}
}

/* ヒーローの写真がヘッダーの下を通り抜けるよう、fixed で重ねる。 */
.site-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 100;
	background: transparent;
	transition: border-color 0.3s;
	border-bottom: 1px solid rgb(255 255 255 / 22%);
}

/*
 * すりガラスの層。
 *
 * backdrop-filter は position:fixed の子孫に対して包含ブロックを作る。
 * ドロワー（.gnav）は .site-header の中にあるので、ヘッダー自体に掛けると
 * inset:0 がヘッダーの矩形に解決され、ドロワーが全画面に広がらなくなる。
 * そこで擬似要素に逃がす。.gnav は ::before の子孫ではないため影響を受けず、
 * モバイルを含む全幅で透け感を出せる。
 */
.site-header::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	content: "";
	background: rgb(255 255 255 / 82%);
	backdrop-filter: blur(16px) saturate(1.5);
	transition: box-shadow 0.3s;
}

/* 少しでもスクロールしたら白を強めて締める。文字の可読性を優先する。 */
.site-header.is-scrolled {
	border-bottom-color: var(--gold-line);
}

.site-header.is-scrolled::before {
	box-shadow: 0 1px 16px rgb(22 41 74 / 7%);
}

/* backdrop-filter が使えない環境では、白を濃くして可読性を確保する。 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-header::before {
		background: rgb(255 255 255 / 88%);
	}

	.site-header.is-scrolled::before {
		background: rgb(255 255 255 / 96%);
	}
}

.site-header__inner {
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	width: min(100%, var(--container-wide));
	padding: 14px var(--gutter);
	margin-inline: auto;
}

.brand__link {
	display: flex;
	gap: 10px;
	align-items: center;
	text-decoration: none;
}

.brand__mark {
	width: clamp(26px, 2.4vw, 32px);
	height: auto;
	flex-shrink: 0;
}

.brand__name {
	display: block;
	font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
	font-weight: 700;
	line-height: 1.4;
	color: var(--navy-900);
	letter-spacing: 0.1em;
}

/*
 * ヘッダーは半透明なので、背後の写真の暗い部分が透ける。
 * 実測の最暗部（輝度0.013）にガラス55%を重ねた下地 rgb(154,154,154) の上で
 * 4.5:1 を満たすのは navy-900 だけ。ゴールドでは 1.6:1 しかなく読めないため、
 * ここは濃紺にしている。ヘッダーのゴールドは文字ではなく罫線で効かせる。
 */
.brand__tag {
	display: block;
	font-size: 0.625rem;
	font-weight: 700;
	color: var(--navy-900);
	letter-spacing: 0.22em;
}

/* ナビ（デスクトップ） */
.gnav__list {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.6vw, 26px);
}

.gnav__item {
	position: relative;
}

.gnav__link {
	display: block;
	padding: 8px 2px;
	font-size: var(--fs-sm);
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--navy-900);
	text-decoration: none;
	white-space: nowrap;
}

.gnav__link:hover {
	color: var(--blue-600);
}

.gnav__toggle {
	display: none;
}

.gnav__sub {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 10;
	/*
	 * 絶対配置の縮み幅は親（.gnav__item）の幅で頭打ちになるため、
	 * 長い事業名を入れると行が折れる。max-content で
	 * 一番長い項目に合わせて箱のほうを伸ばす。
	 */
	width: max-content;
	min-width: 232px;
	padding: 8px 0;
	visibility: hidden;
	background: var(--white);
	border: 1px solid var(--line);
	box-shadow: 0 12px 28px rgb(22 41 74 / 10%);
	opacity: 0;
	transform: translate(-50%, 6px);
	transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.gnav__item--has-child:hover .gnav__sub,
.gnav__item--has-child:focus-within .gnav__sub {
	visibility: visible;
	opacity: 1;
	transform: translate(-50%, 0);
}

.gnav__sub a {
	display: block;
	padding: 10px 20px;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink-900);
	text-decoration: none;
}

.gnav__sub a:hover {
	color: var(--navy-900);
	background: var(--blue-050);
}

.drawer-toggle {
	display: none;
	position: relative;
	/* ドロワー（.gnav の z-index:90）より前に出さないと、開いた状態で
	   閉じるボタンがオーバーレイに覆われてタップできなくなる。 */
	z-index: 95;
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
}

.drawer-toggle__bar,
.drawer-toggle__bar::before,
.drawer-toggle__bar::after {
	position: absolute;
	left: 11px;
	width: 22px;
	height: 2px;
	background: var(--navy-900);
	transition: transform 0.25s, opacity 0.15s;
}

.drawer-toggle__bar {
	top: 21px;
}

.drawer-toggle__bar::before,
.drawer-toggle__bar::after {
	left: 0;
	content: "";
}

.drawer-toggle__bar::before {
	top: -7px;
}

.drawer-toggle__bar::after {
	top: 7px;
}

.drawer-toggle[aria-expanded="true"] .drawer-toggle__bar {
	background: transparent;
}

.drawer-toggle[aria-expanded="true"] .drawer-toggle__bar::before {
	top: 0;
	transform: rotate(45deg);
}

.drawer-toggle[aria-expanded="true"] .drawer-toggle__bar::after {
	top: 0;
	transform: rotate(-45deg);
}

/* ---------- 7. ページヒーロー ---------- */
.page-hero {
	position: relative;
	padding-block: calc(var(--header-h) + clamp(48px, 7vw, 96px)) clamp(48px, 7vw, 96px);
	overflow: hidden;
	color: var(--white);
	background: var(--navy-900);
	isolation: isolate;
}

/* CTA と同じ細い格子。文字の下に入る。 */
.page-hero::after {
	position: absolute;
	inset: 0;
	z-index: -1;
	content: "";
	background-image:
		repeating-linear-gradient(
			90deg,
			rgb(255 255 255 / 5%) 0 1px,
			transparent 1px 64px
		),
		repeating-linear-gradient(
			0deg,
			rgb(255 255 255 / 5%) 0 1px,
			transparent 1px 64px
		);
	mask-image: radial-gradient(120% 100% at 70% 50%, #000 30%, transparent 100%);
}

.page-hero .container {
	position: relative;
}

.page-hero__en {
	display: block;
	margin-bottom: 2px;
	font-family: var(--font-en);
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
	font-style: italic;
	font-weight: 500;
	line-height: 1.15;
	color: var(--gold-400);
	letter-spacing: 0.06em;
}

.page-hero__ja {
	position: relative;
	padding-bottom: 18px;
	font-size: var(--fs-h1);
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: var(--tracking-wide);
}

.page-hero__ja::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 56px;
	height: 2px;
	content: "";
	background: var(--gold-400);
}

/* 事業ページの副題。金の罫線の下に置き、見出しより一段弱くする。 */
.page-hero__sub {
	margin-top: 14px;
	font-size: clamp(0.9375rem, 0.9rem + 0.3vw, 1.0625rem);
	font-weight: 500;
	color: rgb(255 255 255 / 82%);
	letter-spacing: var(--tracking);
}

/* ---------- 8. パンくず ---------- */
.breadcrumb {
	background: var(--bg-tint);
	border-bottom: 1px solid var(--line);
}

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	padding-block: 12px;
	font-size: var(--fs-xs);
	color: var(--ink-500);
}

.breadcrumb__item + .breadcrumb__item::before {
	margin-right: 10px;
	color: var(--ink-400);
	content: "/";
}

.breadcrumb__item a {
	color: var(--ink-500);
}

/* ---------- 9. カード ---------- */
.cards {
	display: grid;
	gap: clamp(16px, 2vw, 24px);
}

.cards--2 {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.cards--3 {
	grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

.cards--4 {
	grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
}

.card {
	--card-pad: clamp(24px, 3vw, 36px);
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--card-pad);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.card--link {
	text-decoration: none;
	transition: border-color 0.2s, transform 0.2s;
}

.card--link:hover {
	border-color: var(--blue-600);
	transform: translateY(-2px);
}

.card__en {
	display: block;
	margin-bottom: 4px;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--gold-700);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.card__title {
	margin-bottom: 12px;
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: 1.7;
	color: var(--navy-900);
	letter-spacing: var(--tracking);
}

.card__text {
	flex: 1;
	font-size: var(--fs-sm);
	line-height: 1.9;
	color: var(--ink-700);
}

.card__more {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin-top: 20px;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--blue-600);
}

.card__more::after {
	width: 6px;
	height: 6px;
	content: "";
	border-top: 2px solid currentcolor;
	border-right: 2px solid currentcolor;
	transform: rotate(45deg);
}

.card__img {
	margin: calc(clamp(24px, 3vw, 36px) * -1) calc(clamp(24px, 3vw, 36px) * -1) 20px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: calc(100% + clamp(24px, 3vw, 36px) * 2);
	max-width: none;
}

.card--num {
	position: relative;
	padding-top: 44px;
}

.card__num {
	position: absolute;
	top: clamp(20px, 2.5vw, 28px);
	left: clamp(24px, 3vw, 36px);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--gold-700);
	letter-spacing: 0.14em;
}

/* ---------- 10. 定義リスト・テーブル ---------- */
.data-table {
	font-size: var(--fs-sm);
	border-top: 1px solid var(--line);
}

.data-table th,
.data-table td {
	padding: 18px 4px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--line);
}

.data-table th {
	width: 30%;
	min-width: 132px;
	font-weight: 700;
	color: var(--navy-800);
}

.data-table td {
	color: var(--ink-700);
}

/* ---------- 11. リスト ---------- */
.list-check li {
	position: relative;
	padding-left: 28px;
	font-size: var(--fs-sm);
	line-height: 1.9;
	color: var(--ink-700);
}

.list-check li + li {
	margin-top: 10px;
}

.list-check li::before {
	position: absolute;
	top: 0.68em;
	left: 4px;
	width: 10px;
	height: 5px;
	content: "";
	border-bottom: 2px solid var(--blue-600);
	border-left: 2px solid var(--blue-600);
	transform: rotate(-45deg);
}

.list-dot li {
	position: relative;
	padding-left: 18px;
	font-size: var(--fs-sm);
	line-height: 1.9;
	color: var(--ink-700);
}

.list-dot li + li {
	margin-top: 8px;
}

.list-dot li::before {
	position: absolute;
	top: 0.82em;
	left: 2px;
	width: 6px;
	height: 6px;
	content: "";
	background: var(--blue-600);
	border-radius: 50%;
}

.list-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
}

.list-inline li {
	padding: 6px 14px;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--navy-800);
	background: var(--blue-050);
	border: 1px solid var(--blue-100);
	border-radius: var(--radius);
}

/* ---------- 12. メディア（画像＋テキスト） ---------- */
.media {
	display: grid;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	grid-template-columns: 1fr;
}

.media__img img {
	width: 100%;
	border-radius: var(--radius);
}

@media (min-width: 860px) {
	.media {
		grid-template-columns: 1fr 1fr;
	}

	.media--reverse .media__img {
		order: 2;
	}
}

/* 画像と文章を左右に並べる導入ブロック。画像に枠は付けない。 */
.intro {
	display: grid;
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 860px) {
	.intro {
		grid-template-columns: 1fr 1fr;
	}
}

.intro__figure img {
	display: block;
	width: 100%;
}

/* ---------- 12b. 重なり（写真 × パネル） ---------- */
/*
 * 参考: 大きな写真を画面端までブリードさせ、その上に白いパネルを
 * ずらして重ねる構成。パネルは写真の下端に食い込み、境界に段差を作る。
 *
 * 構造:
 *   .overlap
 *     .overlap__media   … 画面端まで伸びる写真
 *     .overlap__panel   … 写真に重なる白（または濃紺）のパネル
 *
 * モバイルでは重なりを解除し、写真 → パネルの縦積みにする。
 */
.overlap {
	position: relative;
}

.overlap__media {
	position: relative;
	overflow: hidden;
}

.overlap__media img {
	width: 100%;
	/* 縦積みになるモバイルでは横長すぎると人物が切れるため、やや正方形寄りに。 */
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (min-width: 900px) {
	.overlap__media img {
		aspect-ratio: 16 / 7;
	}
}

/*
 * 被写体が上寄りの写真用。16:7 に切るとき中央揃えだと上が落ちてしまうので、
 * 切り出す窓を上に寄せる。使う写真を差し替えたら、被写体の位置に合わせて直すこと。
 */
.overlap--top-shift .overlap__media img {
	object-position: center 18%;
}

/* 写真に濃紺を薄く乗せ、青主体のトーンに揃える。 */
.overlap__media::after {
	position: absolute;
	inset: 0;
	content: "";
	background: linear-gradient(180deg, rgb(22 41 74 / 30%) 0%, rgb(22 41 74 / 12%) 100%);
}

.overlap__panel {
	position: relative;
	padding: clamp(28px, 5vw, 64px) clamp(24px, 4vw, 56px);
	background: var(--white);
}

.overlap__panel--navy {
	color: var(--white);
	background: var(--navy-900);
}

.overlap__panel--tint {
	background: var(--bg-tint);
}

/* パネル上辺のゴールドのヘアライン。重なりの縁を細く光らせる。 */
.overlap__panel::before {
	position: absolute;
	top: 0;
	left: 0;
	width: clamp(72px, 12%, 148px);
	height: 2px;
	content: "";
	background: var(--gold-600);
}

.overlap__panel--navy::before {
	background: var(--gold-400);
}

/*
 * 最小 24px。gold-600 は白の上で 3.65:1 しかなく、WCAG の「大きな文字」
 * 免除（24px以上）に入って初めて基準を満たすため、これ以上小さくしない。
 */
.overlap__en {
	display: block;
	margin-bottom: 6px;
	font-family: var(--font-en);
	font-size: clamp(1.5rem, 1.15rem + 1.2vw, 1.875rem);
	font-style: italic;
	font-weight: 500;
	line-height: 1.2;
	color: var(--gold-600);
	letter-spacing: 0.06em;
}

.overlap__panel--navy .overlap__en {
	color: var(--gold-400);
}

@media (min-width: 900px) {
	.overlap {
		/* 写真は container を越えて画面端まで伸ばす。 */
		--bleed: calc((100vw - min(100vw, var(--container))) / 2 + var(--gutter));
	}

	.overlap__media {
		width: calc(100% + var(--bleed));
	}

	/* 写真を右端まで、パネルを左下に重ねる（既定） */
	.overlap__media {
		margin-right: calc(var(--bleed) * -1);
	}

	.overlap__panel {
		width: min(72%, 760px);
		margin-top: clamp(-160px, -11vw, -72px);
		box-shadow: 0 -1px 0 rgb(22 41 74 / 6%);
	}

	/* 反転：写真を左端まで、パネルを右下に重ねる */
	.overlap--reverse .overlap__media {
		margin-right: 0;
		margin-left: calc(var(--bleed) * -1);
	}

	.overlap--reverse .overlap__panel {
		margin-left: auto;
	}

	.overlap--reverse .overlap__panel::before {
		right: 0;
		left: auto;
	}
}

/* 写真を背景に敷いたセクション（濃紺を重ねて文字を載せる） */
.section--photo {
	position: relative;
	color: var(--white);
	background: var(--navy-900);
	isolation: isolate;
}

.section--photo::before {
	position: absolute;
	inset: 0;
	z-index: -2;
	content: "";
	background-image: var(--photo);
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
}

.section--photo::after {
	position: absolute;
	inset: 0;
	z-index: -1;
	content: "";
	background: linear-gradient(180deg, rgb(22 41 74 / 87%) 0%, rgb(27 51 88 / 81%) 100%);
}

/* 背景固定はモバイルで描画が不安定なため、スクロール追従に戻す。 */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
	.section--photo::before {
		background-attachment: scroll;
	}
}

/* ゴールドの細い枠で囲んだ額装ブロック */
.frame {
	position: relative;
	padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 56px);
	border: 1px solid var(--gold-line);
}

.frame::before,
.frame::after {
	position: absolute;
	width: 18px;
	height: 18px;
	content: "";
	border: 1px solid var(--gold-400);
}

.frame::before {
	top: -1px;
	left: -1px;
	border-right: 0;
	border-bottom: 0;
}

.frame::after {
	right: -1px;
	bottom: -1px;
	border-top: 0;
	border-left: 0;
}

.figure-full {
	padding: clamp(20px, 3vw, 32px);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.figure-full img {
	width: 100%;
}

.figure-full figcaption {
	margin-top: 14px;
	font-size: var(--fs-xs);
	color: var(--ink-500);
	text-align: center;
}

/* ---------- 13. ステップ・フロー ---------- */
/*
 * モデルケースの進行を示す縦の年表（page-works.php）。
 *
 * 以前は6枚のタイルを横に並べていたが、行末で視線が右端から左端へ飛び、
 * 順序が読み取りにくかった。縦に積めば上から下に1本の線として読める。
 * 丸の色は種別を表すが、色だけに意味を背負わせない（見出しに種別を書いている）。
 */
.case-flow__lead {
	margin-bottom: clamp(20px, 2.4vw, 28px);
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.8;
	color: var(--navy-800);
}

.case-flow {
	--case-dot: 40px;
	display: grid;
}

.case-flow__item {
	position: relative;
	display: grid;
	gap: clamp(14px, 2vw, 20px);
	grid-template-columns: var(--case-dot) 1fr;
	padding-bottom: clamp(30px, 4.5vw, 56px);
}

/* 丸と丸をつなぐ縦線。最後の1つの下には伸ばさない。 */
.case-flow__item::before {
	position: absolute;
	top: var(--case-dot);
	bottom: 0;
	left: calc(var(--case-dot) / 2 - 1px);
	width: 2px;
	content: "";
	background: var(--line-strong);
}

.case-flow__item:last-child {
	padding-bottom: 0;
}

.case-flow__item:last-child::before {
	content: none;
}

.case-flow__num {
	display: grid;
	place-items: center;
	width: var(--case-dot);
	height: var(--case-dot);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1;
	color: var(--white);
	letter-spacing: 0;
	background: var(--navy-800);
	border-radius: 50%;
}

/* 種別ごとの色。上から下へ交互に切り替わるのがこのケースの見せ場。 */
.case-flow__item--group .case-flow__num {
	background: var(--navy-800);
}

.case-flow__item--personal .case-flow__num {
	background: var(--blue-600);
}

.case-flow__item--report .case-flow__num {
	background: var(--gold-700);
}

/*
 * 幅が広いときは「種別＋時間」と「内容」を左右に並べる。
 * 縦に積むと内容が短いぶん右が大きく空くため。
 *
 * 左列を固定幅にしているのは、行をまたいで内容の頭を揃えるため。
 * 400px は一番長い 6 行目から逆算している:
 *   アイコン 28 ＋ 間隔 12 ＋ 「経営層フィードバック」10文字×22px ≒ 229
 *   ＋ 間隔 12 ＋ 「1.5時間」のバッジ 73 ≒ 354px。
 * アイコンや見出しの級数を変えたときは、ここも測り直すこと。
 *
 * 切り替えを 900px からにしているのは、これより狭いと左列を引いた残りで
 * 内容が 3 行に折れてしまうため。それ未満は見出しの下に内容を置く縦並び。
 */
@media (min-width: 900px) {
	.case-flow__body {
		display: grid;
		gap: clamp(16px, 2.4vw, 32px);
		grid-template-columns: minmax(0, 400px) 1fr;
		align-items: baseline;
	}
}

.case-flow__title {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	/* アイコンには文字のベースラインが無いので、中央で揃える。 */
	align-items: center;
	margin-bottom: 6px;
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	font-weight: 700;
	line-height: 1.5;
	color: var(--navy-900);
}

@media (min-width: 900px) {
	.case-flow__title {
		margin-bottom: 0;
	}
}

/*
 * 種別のアイコン。番号の丸と同じ色にして、
 * 「集合→個別→集合」の切り替わりを形と色の両方で見せる。
 * 絵は .strengths の「集合研修」「個別研修」と同じものを使っている。
 */
.case-flow__icon {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: clamp(24px, 2.4vw, 28px);
	height: clamp(24px, 2.4vw, 28px);
	color: var(--navy-800);
}

.case-flow__icon svg {
	width: 100%;
	height: 100%;
}

.case-flow__item--personal .case-flow__icon {
	color: var(--blue-600);
}

.case-flow__item--report .case-flow__icon {
	color: var(--gold-700);
}

.case-flow__time {
	padding: 3px 12px;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--blue-600);
	background: var(--blue-050);
	border-radius: 999px;
}

.case-flow__text {
	font-size: var(--fs-body);
	line-height: 1.85;
	color: var(--ink-700);
}

/*
 * Instagram の埋め込み。本体は 540px を上限に自分で幅を決めるので、
 * こちらは置き場所を整えるだけ。埋め込みの中身には手を出さない
 * （先方のスクリプトが blockquote を iframe に差し替えるため）。
 */
.ig-embed {
	display: flex;
	justify-content: center;
}

.ig-embed .instagram-media {
	margin: 0 auto !important;
}

/*
 * 実績の規模を一つだけ大きく見せるブロック。
 * 本文に埋めると埋もれる数字を、見出しと事例カードの間に抜き出す。
 * 直下の条件バー（.case__head）が濃紺なので、ここは薄い青で受ける。
 */
.scale {
	display: grid;
	gap: clamp(20px, 2.6vw, 36px);
	grid-template-columns: 1fr;
	align-items: center;
}

/* 左に数字のボックス、右にリード文。ボックスは中身なりの幅で良いので auto。 */
@media (min-width: 840px) {
	.scale {
		grid-template-columns: auto 1fr;
	}
}

/* 囲うのは数字だけ。リード文は囲わずに白地のまま置く。 */
.scale__box {
	min-width: 0;
	padding: clamp(20px, 2.6vw, 32px) clamp(22px, 3vw, 36px);
	background: var(--blue-050);
	border: 1px solid var(--blue-100);
	border-radius: var(--radius);
}

.scale__label {
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--ink-700);
	letter-spacing: var(--tracking);
}

.scale__num {
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
	align-items: baseline;
	margin: 2px 0 0;
	font-size: clamp(3rem, 2.2rem + 4vw, 5rem);
	font-weight: 700;
	line-height: 1.05;
	color: var(--blue-700);
	letter-spacing: 0.01em;
}

/* 単位と後ろの語句は数字よりずっと小さく。数字に対する相対指定で比率を保つ。 */
.scale__unit {
	font-size: 0.34em;
}

.scale__suffix {
	font-size: 0.26em;
	font-weight: 700;
	color: var(--navy-800);
}

/* セクションのリード文なので、.lead と同じ級数に揃える。 */
.scale__text {
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	line-height: 2;
	color: var(--ink-700);
}

/*
 * ケースの締め。6ステップの結論なので、添え書きの箱ではなく
 * カード下端の帯にして、上部の条件バー（.case__head）と上下で対にする。
 * 左右と下の負マージンは .case__body の余白を打ち消すため。
 */
.case-effect {
	display: grid;
	gap: clamp(12px, 1.8vw, 20px);
	grid-template-columns: 1fr;
	align-items: center;
	margin: clamp(28px, 3.5vw, 44px) calc(var(--case-pad) * -1) calc(var(--case-pad) * -1);
	padding: clamp(22px, 2.8vw, 30px) var(--case-pad);
	background: var(--blue-050);
	border-top: 1px solid var(--blue-100);
}

/* ラベルと項目を横に並べるのは、項目が1行に収まる幅から。 */
@media (min-width: 840px) {
	.case-effect {
		gap: clamp(20px, 3vw, 36px);
		grid-template-columns: auto 1fr;
	}
}

.case-effect__label {
	font-size: var(--fs-h4);
	font-weight: 700;
	color: var(--navy-900);
	letter-spacing: var(--tracking-wide);
}

.case-effect__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
}

/* 囲いを置かない分、.list-dot と同じ青い点で項目の切れ目を示す。 */
.case-effect__list li {
	position: relative;
	padding-left: 18px;
	font-size: var(--fs-body);
	font-weight: 700;
	color: var(--navy-800);
	letter-spacing: var(--tracking);
}

.case-effect__list li::before {
	position: absolute;
	top: 0.72em;
	left: 2px;
	width: 6px;
	height: 6px;
	content: "";
	background: var(--blue-600);
	border-radius: 50%;
}

/* PDCA 2×2 */
/*
 * PDCA は4項目。auto-fit だと3列＋1になって最終行が崩れ、
 * 1列あたりの幅も足りず見出しが2行に割れる。2×2 に固定する。
 */
.pdca {
	display: grid;
	gap: clamp(16px, 2vw, 24px);
	grid-template-columns: 1fr;
	counter-reset: pdca;
}

/* 2列にするのは、見出しが1行に収まる幅（実測で約900px）を超えてから。 */
@media (min-width: 900px) {
	.pdca {
		grid-template-columns: repeat(2, 1fr);
	}
}

.pdca__item {
	position: relative;
	padding: clamp(24px, 3vw, 32px);
	background: var(--white);
	border: 1px solid var(--line);
	border-top: 3px solid var(--blue-600);
}

.pdca__phase {
	display: inline-block;
	margin-bottom: 8px;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--gold-700);
	letter-spacing: 0.16em;
}

/* 対比（ダメな例／あるべき姿） */
.compare {
	display: grid;
	gap: clamp(16px, 2.4vw, 28px);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.compare__col {
	padding: clamp(24px, 3vw, 36px);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.compare__col--bad {
	background: #fbf6f6;
	border-color: #e6d3d3;
}

.compare__col--good {
	background: var(--blue-050);
	border-color: var(--blue-100);
}

.compare__head {
	margin-bottom: 16px;
	padding-bottom: 12px;
	font-size: var(--fs-h4);
	font-weight: 700;
	border-bottom: 1px solid currentcolor;
}

.compare__col--bad .compare__head {
	color: #a4534f;
}

.compare__col--good .compare__head {
	color: var(--navy-800);
}

/* ---------- 13b. 研修ページ固有 ---------- */
/*
 * 社員教育事業（page-training.php）専用の部品。
 * ワイヤーフレーム v2（2026-09-08）に対応。他ページで使い回す場合は
 * ここから「9. カード」などの共通セクションへ移すこと。
 */

/*
 * ページ内の目次。リード文の下にボタンだけを並べ、読みたいセクションへ直接飛ばす。
 * 下向きの矢印を付けて「ページの下へ移動する」ことを示す。
 * ジャンプ先が固定ヘッダーに隠れないよう、html 側の scroll-padding-top で逃がしている。
 */
.anchor-nav {
	margin-top: clamp(32px, 4vw, 48px);
}

/* ボタンは等幅に揃える。PC 4列×2行、狭い幅は2列 */
.anchor-nav__list {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
	.anchor-nav__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

.anchor-nav__link {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	padding: 10px 12px;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--navy-800);
	letter-spacing: 0.04em;
	text-decoration: none;
	background: var(--white);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	transition: color 0.2s, border-color 0.2s;
}

/* 下向きの矢印。同じページの下方向へ移動することを示す。 */
.anchor-nav__link::after {
	width: 6px;
	height: 6px;
	content: "";
	border-right: 2px solid var(--gold-600);
	border-bottom: 2px solid var(--gold-600);
	transform: translateY(-2px) rotate(45deg);
}

.anchor-nav__link:hover,
.anchor-nav__link:focus-visible {
	color: var(--navy-900);
	border-color: var(--gold-600);
}

/* 2列のときに「正しい研修の考え方」が折り返して高さが揃わなくなるので、文字を少し小さくする */
@media (max-width: 640px) {
	.anchor-nav__link {
		padding: 10px 6px;
		font-size: 0.75rem;
		letter-spacing: 0.02em;
	}
}

/*
 * 企業の悩み。雲形の吹き出しに悩みを書き、その下端に考え込む人物イラストを重ねる。
 * 雲は assets/img/legacy/fukidashi.svg（無ければ円を重ねた簡易の雲）を
 * 吹き出しの背景として敷く。文章量で高さが変わっても preserveAspectRatio="none" で追従する。
 * 3枚の吹き出しは同じ高さに揃える（.worry を縦2行のグリッドにし、上の行を 1fr で伸ばす）。
 * 人物画像は腰から上でトリミング済み（question_01〜03.webp、高さ 384px）。
 * aspect-ratio は使わない（グリッドの行の高さと循環して雲が巨大化する）。
 */
.worries {
	display: grid;
	gap: clamp(20px, 3vw, 40px);
	grid-template-columns: 1fr;
	align-items: stretch;
}

.worry {
	/* 人物が吹き出しに食い込む量。文字はこの分だけ下に余白を取って避ける */
	--worry-overlap: 76px;
	display: grid;
	grid-template-rows: 1fr auto;
	justify-items: center;
}

.worry__bubble {
	position: relative;
	width: 100%;
}

.worry__cloud {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* 雲の縁は丸く欠けるので、文字は内側に大きめの余白で収める。下は人物が重なる分を空ける */
.worry__inner {
	position: relative;
	padding: clamp(36px, 4.5vw, 48px) clamp(44px, 5vw, 56px) calc(var(--worry-overlap) + 28px);
	text-align: center;
}

.worry__title {
	margin-bottom: 10px;
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: 1.6;
	color: var(--navy-900);
}

.worry__text {
	font-size: var(--fs-xs);
	line-height: 1.9;
	color: var(--ink-700);
	text-align: left;
}

.worry__person {
	position: relative;
	z-index: 1;
	width: auto;
	height: clamp(190px, 22vw, 250px);
	margin-top: calc(var(--worry-overlap) * -1);
}

/*
 * タブレット幅では3列だと吹き出しの中で見出しが折れて窮屈になるため、
 * 1列のまま「吹き出し（左）＋人物（右）」の横並びにして高さを抑える。
 * 人物は吹き出しの右端に重ねる。
 */
@media (min-width: 640px) and (max-width: 899px) {
	.worry {
		--worry-overlap: 56px;
		grid-template-columns: minmax(0, 440px) auto;
		grid-template-rows: none;
		align-items: center;
		justify-content: center;
	}

	.worry__bubble {
		min-height: 280px;
	}

	.worry__inner {
		padding: clamp(36px, 4.5vw, 48px) calc(var(--worry-overlap) + 24px) clamp(36px, 4.5vw, 48px) 48px;
	}

	.worry__person {
		margin-top: 0;
		margin-left: calc(var(--worry-overlap) * -1);
	}
}

@media (min-width: 900px) {
	.worries {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* サービス概要（提案書 P10）。濃紺の帯のリード＋丸アイコンの3枚 */
.overview__lead {
	margin-bottom: clamp(24px, 3vw, 36px);
	padding: clamp(18px, 2.4vw, 26px) clamp(20px, 3vw, 36px);
	font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
	font-weight: 700;
	line-height: 1.9;
	color: var(--white);
	background: var(--navy-800);
}

.overview__card {
	align-items: center;
	text-align: center;
	border-top: 3px solid var(--navy-900);
}

.overview__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-bottom: 18px;
	color: var(--white);
	background: var(--navy-800);
	border-radius: 50%;
}

.overview__icon svg {
	width: 30px;
	height: 30px;
}

.overview__title {
	margin-bottom: 12px;
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: 1.6;
	color: var(--navy-900);
}

.overview__text {
	font-size: var(--fs-sm);
	line-height: 1.9;
	color: var(--ink-700);
}

/* 現状チェック → 放置した場合（左：チェックリスト／右：赤系トーン） */
.check-flow {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
	margin-top: clamp(28px, 4vw, 48px);
}

@media (min-width: 900px) {
	.check-flow {
		grid-template-columns: 1fr 48px 1fr;
		align-items: start;
	}
}

.check-flow__now,
.check-flow__later {
	padding: clamp(24px, 3vw, 36px);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.check-flow__later {
	background: #fbf6f6;
	border-color: #e6d3d3;
}

.check-flow__head {
	margin-bottom: 6px;
	font-size: var(--fs-h4);
	font-weight: 700;
	color: var(--navy-800);
}

.check-flow__head--alert {
	color: #a4534f;
}

.check-flow__sub {
	margin-bottom: 18px;
	font-size: var(--fs-xs);
	line-height: 1.8;
	color: var(--ink-500);
}

/* 矢印。PC は右向き、モバイルは下向き */
.check-flow__arrow {
	position: relative;
	height: 28px;
}

.check-flow__arrow::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	content: "";
	border-right: 2px solid var(--ink-400);
	border-bottom: 2px solid var(--ink-400);
	transform: translate(-50%, -70%) rotate(45deg);
}

@media (min-width: 900px) {
	.check-flow__arrow {
		height: auto;
		align-self: stretch;
	}

	.check-flow__arrow::before {
		transform: translate(-70%, -50%) rotate(-45deg);
	}
}

/*
 * 擬似チェック。実際の <input type="checkbox"> ではない（クリックさせない）。
 * すべてにチェックが入った状態で「当てはまる特徴」を見せる。
 */
.check-list li {
	position: relative;
	padding: 10px 0 10px 36px;
	font-size: var(--fs-sm);
	line-height: 1.8;
	color: var(--ink-700);
	border-bottom: 1px solid var(--line);
}

.check-list li:last-child {
	border-bottom: 0;
}

.check-list li::before {
	position: absolute;
	top: 12px;
	left: 0;
	width: 20px;
	height: 20px;
	content: "";
	background: var(--white);
	border: 1.5px solid var(--navy-800);
	border-radius: 2px;
}

.check-list li::after {
	position: absolute;
	top: 16px;
	left: 5px;
	width: 10px;
	height: 5px;
	content: "";
	border-bottom: 2px solid var(--navy-800);
	border-left: 2px solid var(--navy-800);
	transform: rotate(-45deg);
}

.risk-list li {
	padding: 14px 16px;
	background: var(--white);
	border-left: 3px solid #a4534f;
}

.risk-list li + li {
	margin-top: 10px;
}

.risk-list strong {
	display: block;
	margin-bottom: 4px;
	font-size: var(--fs-body);
	color: #a4534f;
}

.risk-list span {
	display: block;
	font-size: var(--fs-xs);
	line-height: 1.8;
	color: var(--ink-700);
}

/* 対比の ✕／○ マーク（見出しの前に大きめに置く） */
.compare__mark {
	position: relative;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	border-radius: 50%;
}

.compare__mark--bad {
	background: #f0dcdc;
}

.compare__mark--good {
	background: var(--blue-100);
}

.compare__mark--bad::before,
.compare__mark--bad::after {
	position: absolute;
	width: 26px;
	height: 3px;
	content: "";
	background: #a4534f;
	border-radius: 2px;
}

.compare__mark--bad::before {
	transform: rotate(45deg);
}

.compare__mark--bad::after {
	transform: rotate(-45deg);
}

.compare__mark--good::before {
	width: 22px;
	height: 22px;
	content: "";
	border: 3px solid var(--blue-600);
	border-radius: 50%;
}

.compare__mark + .compare__head {
	text-align: center;
}

/* カード上辺の色帯と「おすすめ」 */
.card--band {
	border-top: 3px solid var(--navy-900);
}

.card--band-navy {
	border-top-color: var(--navy-900);
}

.card--band-blue {
	border-top-color: var(--blue-600);
}

.card--band-gold {
	border-top-color: var(--gold-600);
}

/*
 * カード上部のタイトル背景。英字＋見出しを色面に載せ、カードの端まで伸ばす。
 * 色面の上の小さい文字は白か --gold-400。--gold-700 は白文字で 5.0:1、
 * --blue-600 は白文字で 4.6:1 を確保する。
 */
.card__head {
	margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 20px;
	padding: 16px var(--card-pad) 14px;
	color: var(--white);
	background: var(--navy-900);
}

.card__head--blue {
	background: var(--blue-600);
}

.card__head--gold {
	background: var(--gold-700);
}

.card__head .card__en {
	color: var(--gold-400);
}

.card__head--blue .card__en,
.card__head--gold .card__en {
	color: rgb(255 255 255 / 85%);
}

.card__head .card__title {
	margin-bottom: 0;
	color: var(--white);
}

.card__head .card__sub {
	color: rgb(255 255 255 / 85%);
}

.card__sub {
	display: inline-block;
	margin-top: 2px;
	font-size: var(--fs-xs);
	font-weight: 500;
	color: var(--ink-500);
	letter-spacing: 0.04em;
}

/* 見出し帯にアイコンを添える版。見出しの左に丸を置いて横並びにする。 */
.card__head--icon {
	display: flex;
	gap: 14px;
	align-items: center;
}

/*
 * 丸は帯（濃紺・青）の上に載るので、.overview__icon のような濃い塗りは使えない。
 * 塗らずに白い線だけで丸を描き、帯の色をそのまま地にする。
 * 線幅は中のアイコンの stroke-width と同じ 1.8px に揃えている。
 * アイコン側を変えたときは、こちらも合わせること。
 */
.card__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 46px;
	height: 46px;
	color: var(--white);
	border: 1.8px solid rgb(255 255 255 / 60%);
	border-radius: 50%;
}

.card__icon svg {
	width: 24px;
	height: 24px;
}

/* セクション末尾の締めの一文 */
.closing {
	margin-top: clamp(24px, 3vw, 36px);
	padding: 16px 20px;
	font-weight: 700;
	color: var(--navy-800);
	text-align: center;
	background: var(--blue-050);
	border-radius: var(--radius);
}

/*
 * 話の要になる一文を強める版。
 * 章のまとめではなく「だから何なのか」を言い切る行に使う。
 * 同じページに .closing が複数あるときは、全部には付けないこと
 * （全部強めると、どれが要なのか分からなくなる）。
 */
.closing--lg {
	padding: clamp(20px, 2.6vw, 28px) clamp(20px, 3vw, 32px);
	font-size: clamp(1.0625rem, 0.9rem + 0.7vw, 1.375rem);
	line-height: 1.8;
	color: var(--navy-900);
	letter-spacing: var(--tracking);
}

/*
 * 対象者別プログラム。4枚を矢羽根（シェブロン）型にして、新入→若手→リーダー→営業の
 * 流れを形で示す。clip-path で右端を尖らせ、左端を同じ形で欠く。隣と重ねて噛み合わせる。
 * PC は横並び、940px 未満は縦並びで下向きの矢羽根にする。
 *   --chev … 矢羽根の深さ
 */
.programs {
	--chev: 40px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.programs__item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	/* .card の height:100% を打ち消し、flex の stretch で全枚を同じ高さに揃える（短い枚の下に白が出ないように） */
	height: auto;
	align-self: stretch;
	padding: calc(var(--card-pad) + var(--chev) * 0.5) var(--card-pad) calc(var(--card-pad) + var(--chev));
	background: var(--white);
	border: 0;
	border-radius: 0;
	/* 縦並び：下を尖らせ、上を欠く */
	clip-path: polygon(0 0, 50% var(--chev), 100% 0, 100% calc(100% - var(--chev)), 50% 100%, 0 calc(100% - var(--chev)));
}

.programs__item:first-child {
	padding-top: var(--card-pad);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chev)), 50% 100%, 0 calc(100% - var(--chev)));
}

.programs__item + .programs__item {
	margin-top: calc(var(--chev) * -1);
}

/* 最後の1枚は尖らせず、枠の端まで埋める（尖らせると先端の両脇に白が残る） */
.programs__item:last-child {
	padding-bottom: var(--card-pad);
	clip-path: polygon(0 0, 50% var(--chev), 100% 0, 100% 100%, 0 100%);
}

.programs__item:nth-child(even) {
	background: #cfd9e3;
}

.programs__theme {
	margin-bottom: 14px;
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.7;
	color: var(--navy-800);
}

@media (min-width: 940px) {
	.programs {
		flex-direction: row;
	}

	.programs__item {
		padding: var(--card-pad) calc(var(--card-pad) + var(--chev) * 0.6) var(--card-pad) calc(var(--card-pad) + var(--chev));
		/* 横並び：右を尖らせ、左を欠く */
		clip-path: polygon(0 0, calc(100% - var(--chev)) 0, 100% 50%, calc(100% - var(--chev)) 100%, 0 100%, var(--chev) 50%);
	}

	.programs__item:first-child {
		padding-top: var(--card-pad);
		padding-left: var(--card-pad);
		clip-path: polygon(0 0, calc(100% - var(--chev)) 0, 100% 50%, calc(100% - var(--chev)) 100%, 0 100%);
	}

	.programs__item + .programs__item {
		margin-top: 0;
		margin-left: calc(var(--chev) * -1);
	}

	.programs__item:last-child {
		padding-right: var(--card-pad);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--chev) 50%);
	}
}

/* 1on1 個別研修（横長 1 ブロック。4枚グリッドとリズムを変える） */
.oneonone {
	display: grid;
	grid-template-columns: 1fr;
	margin-top: clamp(24px, 3vw, 36px);
	overflow: hidden;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

@media (min-width: 860px) {
	.oneonone {
		grid-template-columns: 1fr 1.6fr;
	}
}

/* 写真（AdobeStock_415957870 を 1600px に縮小）を敷き、下端に帯でキャプションを載せる */
.oneonone__visual {
	position: relative;
	min-height: 220px;
	overflow: hidden;
	background: var(--navy-800);
}

.oneonone__visual img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% center;
}

.oneonone__caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 10px 16px;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--white);
	text-align: center;
	letter-spacing: 0.08em;
	background: rgb(22 41 74 / 86%);
}

@media (min-width: 860px) {
	.oneonone__visual {
		min-height: 280px;
	}
}

.oneonone__body {
	padding: clamp(24px, 3vw, 40px);
}

.list-check--2col {
	display: grid;
	gap: 10px 24px;
}

@media (min-width: 600px) {
	.list-check--2col {
		grid-template-columns: 1fr 1fr;
	}
}

.list-check--2col li + li {
	margin-top: 0;
}

/*
 * 文字を一段大きくした版。写真と横に並べるときに使う。
 * 字が大きい分各項目が2行になり、列の高さが写真に近づいて
 * 上下の余白が残りにくくなる。
 */
.list-check--lg li {
	padding-left: 32px;
	font-size: var(--fs-h4);
	line-height: 1.9;
}

.list-check--lg li + li {
	margin-top: 14px;
}

.list-check--lg li::before {
	left: 6px;
	width: 12px;
	height: 6px;
	border-bottom-width: 2.4px;
	border-left-width: 2.4px;
}

/*
 * PDCA（中央に円環）。DOM 順は ①②③④ のまま、PC では
 *   ①左上 ②右上 / ④左下 ③右下 に配置して時計回りに読める形にする。
 * モバイルは円環を隠して ①〜④ の縦並び。
 */
.pdca__ring {
	display: none;
}

.pdca__item--plan { border-top-color: var(--navy-900); }
.pdca__item--do { border-top-color: var(--blue-600); }
.pdca__item--check { border-top-color: var(--gold-600); }
.pdca__item--action { border-top-color: var(--navy-700); }

@media (min-width: 900px) {
	.pdca--ring {
		grid-template-areas:
			"plan ring do"
			"action ring check";
		grid-template-columns: 1fr 184px 1fr;
		align-items: stretch;
	}

	.pdca__item--plan { grid-area: plan; }
	.pdca__item--do { grid-area: do; }
	.pdca__item--check { grid-area: check; }
	.pdca__item--action { grid-area: action; }

	.pdca__ring {
		display: grid;
		place-items: center;
		grid-area: ring;
		align-self: center;
	}

	.pdca__ring svg {
		width: 168px;
		height: 168px;
	}
}

/*
 * 6つの強み（単色ラインアイコン＋短文。PC 3×2／モバイル 2列）。
 * 6列に並べると1枚が約 157px しかなく、見出しも本文も折り返して小さく見える。
 * 3列までにして 1枚を 333px 確保し、そのぶんアイコンと文字を大きく取っている。
 */
.strengths {
	display: grid;
	gap: clamp(12px, 1.6vw, 20px);
	grid-template-columns: repeat(2, 1fr);
}

/* 3列にするのは、1枚の中で見出しが1行に収まる幅（実測で約 760px）から。 */
@media (min-width: 760px) {
	.strengths {
		grid-template-columns: repeat(3, 1fr);
	}
}

.strengths__item {
	padding: clamp(24px, 3vw, 36px) clamp(14px, 2vw, 24px);
	text-align: center;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.strengths__icon {
	display: grid;
	place-items: center;
	width: clamp(60px, 6vw, 72px);
	height: clamp(60px, 6vw, 72px);
	margin: 0 auto 16px;
	color: var(--white);
	background: var(--navy-800);
	border-radius: 50%;
}

.strengths__icon svg {
	width: clamp(30px, 3vw, 34px);
	height: clamp(30px, 3vw, 34px);
}

.strengths__num {
	display: block;
	font-family: var(--font-en);
	font-size: 1.25rem;
	font-style: italic;
	font-weight: 700;
	line-height: 1.2;
	color: var(--gold-700);
	letter-spacing: 0.08em;
}

.strengths__title {
	margin: 6px 0 10px;
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: 1.6;
	color: var(--navy-900);
	letter-spacing: 0.02em;
}

.strengths__text {
	font-size: var(--fs-sm);
	line-height: 1.85;
	color: var(--ink-700);
}

/* 効果（濃紺の帯。数字＋声1つ＋実績ページへのリンク） */
.effect {
	display: grid;
	gap: clamp(24px, 4vw, 56px);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 900px) {
	.effect {
		grid-template-columns: 1.1fr 1fr;
	}
}

.effect__en {
	display: block;
	margin-bottom: 6px;
	font-family: var(--font-en);
	font-size: clamp(1.5rem, 1.15rem + 1.2vw, 1.875rem);
	font-style: italic;
	font-weight: 500;
	line-height: 1.2;
	color: var(--gold-400);
	letter-spacing: 0.06em;
}

.effect__lead {
	font-size: var(--fs-body);
	font-weight: 500;
	color: rgb(255 255 255 / 88%);
}

.effect__num {
	margin: 4px 0;
	font-size: clamp(2.5rem, 2rem + 2.6vw, 4rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--gold-400);
	letter-spacing: 0.02em;
}

.effect__approx,
.effect__unit {
	margin: 0 4px;
	font-size: 0.45em;
	font-weight: 700;
}

.effect__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.effect__chips li {
	padding: 6px 14px;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--white);
	border: 1px solid rgb(255 255 255 / 40%);
	border-radius: 999px;
}

.effect__note {
	margin-top: 14px;
	font-size: var(--fs-sm);
	color: rgb(255 255 255 / 80%);
}

.effect__voice {
	padding: clamp(24px, 3vw, 36px);
	background: rgb(255 255 255 / 6%);
	border: 1px solid rgb(255 255 255 / 16%);
	border-left: 3px solid var(--gold-400);
}

.effect__voice-label {
	display: block;
	margin-bottom: 10px;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--gold-400);
	letter-spacing: 0.12em;
}

.effect__quote {
	margin: 0 0 20px;
}

.effect__quote p {
	font-size: var(--fs-body);
	line-height: 1.9;
	color: var(--white);
}

.effect__quote footer {
	margin-top: 8px;
	font-size: var(--fs-xs);
	color: rgb(255 255 255 / 72%);
}

.effect__disclaimer {
	margin-top: 14px;
	font-size: 0.75rem;
	line-height: 1.7;
	color: rgb(255 255 255 / 68%);
}

/* 事業支援のタグ列（少し大きめ） */
.list-inline--lg li {
	padding: 10px 18px;
	font-size: var(--fs-sm);
}

/* ---------- 13c. 福利厚生サービス『マナベル』 ページ固有 ---------- */
/*
 * 成長支援型福利厚生サービス『マナベル』の紹介ページ（page-manabel.php）専用の部品。
 * サービス提案資料（全13ページ）に対応。他ページでも使うようになったら
 * 「9. カード」などの共通セクションへ移すこと。
 */

/* 福利厚生の目的。2枚のカードの下に濃紺の帯で置き、章の結論として読ませる。 */
.purpose {
	display: grid;
	gap: clamp(16px, 2.4vw, 28px);
	grid-template-columns: 1fr;
	margin-top: clamp(16px, 2vw, 24px);
	padding: clamp(24px, 3vw, 32px) clamp(24px, 3vw, 40px);
	background: var(--navy-800);
}

@media (min-width: 820px) {
	.purpose {
		grid-template-columns: auto 1fr;
		align-items: center;
	}
}

.purpose__label {
	font-size: var(--fs-h3);
	font-weight: 700;
	color: var(--white);
	letter-spacing: var(--tracking-wide);
}

.purpose__list {
	display: grid;
	gap: 10px 28px;
	grid-template-columns: 1fr;
}

@media (min-width: 560px) {
	.purpose__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 目的の各項目。金色の点を頭に置いて、濃紺の上でも行頭を拾えるようにする。 */
.purpose__list li {
	position: relative;
	padding-left: 18px;
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1.8;
	color: var(--white);
}

.purpose__list li::before {
	position: absolute;
	top: 0.72em;
	left: 0;
	width: 6px;
	height: 6px;
	content: "";
	background: var(--gold-400);
	border-radius: 50%;
}

/* 調査データ。数字を大きく見せ、下に見出しと補足を置く。 */
.stats {
	display: grid;
	gap: clamp(16px, 2vw, 24px);
	grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

.stat {
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 3vw, 36px);
	background: var(--blue-050);
	border: 1px solid var(--blue-100);
	border-radius: var(--radius);
}

/* 数字と円グラフを1行に置き、グラフは行の右端に寄せる。 */
.stat__figure {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.stat__num {
	/* 数字は折り返させない。幅が足りないときは右のグラフ側を縮める。 */
	flex: none;
	font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--blue-700);
	letter-spacing: 0.01em;
}

/*
 * 数字に添えるドーナツ。数字の右隣に置く。
 * 3枚で大きさを揃えるため、flex では縮ませず固定幅にしている
 * （縮ませると数字の長いカードほど小さくなり、3枚がバラバラになる）。
 * 上限の 76px は一番長い「50-60%」が入るカードの残り幅から決めた値。
 * 数字の級数を変えたときは、ここも測り直すこと。
 * カードが画面に入ったら .is-drawn が付き、弧が 12 時から時計回りに伸びる。
 * 円周は pathLength="100" で 100 に正規化しているので、
 * 描く割合は --p（％）をそのまま stroke-dashoffset に使える。
 * 「動きを減らす」設定のときは 21 章でトランジションが無効になり、
 * クラスが付いた瞬間に最終形が出る（途中が見えないだけで欠けない）。
 */
.stat__chart {
	flex: none;
	width: clamp(64px, 6.2vw, 76px);
	height: auto;
}

.stat__chart-track,
.stat__chart-bar {
	fill: none;
	stroke-width: 10;
}

/* 下地の輪。弧を主役にしたいので、同じ金色をごく薄く敷くだけにする。 */
.stat__chart-track {
	stroke: rgb(168 128 0 / 16%);
}

.stat__chart-bar {
	stroke: var(--gold-600);
	stroke-dasharray: 100;
	/* 100 ＝ 何も描かれていない状態。ここから --p の分だけ減らして弧を出す。 */
	stroke-dashoffset: 100;
	stroke-linecap: round;
	transition: stroke-dashoffset 1.2s cubic-bezier(0.32, 0, 0.16, 1);
}

.stat.is-drawn .stat__chart-bar {
	stroke-dashoffset: calc(100 - var(--p, 0));
}

/* 3枚が一斉に動くとうるさいので、少しずつ遅らせて左から順に描く。 */
.stat:nth-child(2) .stat__chart-bar {
	transition-delay: 0.15s;
}

.stat:nth-child(3) .stat__chart-bar {
	transition-delay: 0.3s;
}

/* 単位（%・割超）は数字より小さく。数字に対する相対指定で比率を保つ。 */
.stat__unit {
	margin-left: 2px;
	font-size: 0.42em;
	font-weight: 700;
}

.stat__title {
	margin-bottom: 10px;
	padding-bottom: 12px;
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: 1.7;
	color: var(--navy-900);
	border-bottom: 1px solid var(--blue-100);
}

.stat__text {
	flex: 1;
	font-size: var(--fs-sm);
	line-height: 1.9;
	color: var(--ink-700);
}

/* 番号付きの手順リスト（カードの中に置く想定） */
.numlist {
	display: grid;
	gap: 2px;
}

.numlist__item {
	display: grid;
	gap: 8px;
	grid-template-columns: auto 1fr;
	/* 番号と本文は大きさが違うので、上揃えではなくベースラインで揃える。 */
	align-items: baseline;
	padding: 14px 18px;
	background: var(--blue-050);
}

/* 番号は本文と同じゴシックで、縦棒を添えて「01｜」の形にする。 */
.numlist__num {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.9;
	color: var(--blue-600);
	letter-spacing: 0.08em;
}

/* 縦棒は区切りなので、番号より一段弱くする。 */
.numlist__num::after {
	margin-left: 4px;
	font-weight: 400;
	color: var(--blue-500);
	content: "｜";
}

.numlist__text {
	font-size: var(--fs-body);
	line-height: 1.9;
	color: var(--ink-700);
}

/*
 * 塗りつぶしのカード。グリッドの中で1枚だけ強調したいときに使う。
 * .card の白背景・罫線を打ち消し、中の文字をまとめて白にする。
 */
.card--accent {
	color: var(--white);
	background: var(--navy-800);
	border-color: var(--navy-800);
}

.card--accent .card__title {
	color: var(--white);
}

.card--accent .card__text {
	color: rgb(255 255 255 / 86%);
}

.card--accent .card__num,
.card--accent .card__en {
	color: var(--gold-400);
}

/* ラインナップ冒頭の「はじめに」。4枚のカードの前に1本の帯として置く。 */
.lineup-intro {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	align-items: baseline;
	margin-bottom: clamp(16px, 2vw, 24px);
	padding: clamp(16px, 2vw, 20px) clamp(20px, 2.6vw, 28px);
	background: var(--white);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
}

.lineup-intro__label {
	font-size: var(--fs-h4);
	font-weight: 700;
	color: var(--navy-900);
	letter-spacing: var(--tracking-wide);
}

.lineup-intro__text {
	font-size: var(--fs-sm);
	line-height: 1.8;
	color: var(--ink-700);
}

/*
 * ラインナップ。4枚を2列×2行に並べ、カードの中は「左にイラスト／右に項目」。
 * 人物イラスト（manabel_*.svg）は幅 350 に対して高さ 984〜1070 と縦に細長く、
 * 4列だとカード幅が足りずイラストか本文のどちらかが潰れるため2列にしている。
 */
.lineup {
	display: grid;
	gap: clamp(16px, 2vw, 24px);
	grid-template-columns: 1fr;
}

@media (min-width: 760px) {
	.lineup {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*
 * カードの中身。上段はイラストと学習テーマを横並び、下段に項目を全幅で置く。
 *   [ イラスト ][ テーマ ]
 *   [ 項目リスト（全幅）  ]
 */
.lineup__body {
	display: grid;
	gap: clamp(14px, 1.8vw, 20px) clamp(16px, 2.4vw, 28px);
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"img theme"
		"list list";
	align-items: center;
}

/*
 * イラストは viewBox が 350 × 984〜1070 と縦に長いが、絵は上の 350 四方に
 * クリップされていて、下 6 割以上は透明な余白。そのまま置くとカードの下に
 * 大きな空きができるので、1:1 に切って絵のある範囲だけを見せる。
 * 元ファイルを差し替えたときは、この比率も合っているか確認すること。
 */
/*
 * 幅の上限 140px は、右のテーマ欄から決めている。これ以上大きくすると
 * テーマ欄が 12 文字を切り、<br> で指定した改行位置がさらに折り返す。
 */
.lineup__img {
	grid-area: img;
	width: clamp(96px, 10.5vw, 140px);
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: top center;
}

/* 学習テーマ。カードの中で一番読ませたい一文なので、項目より一段大きくする。 */
.lineup__theme {
	grid-area: theme;
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
	font-weight: 700;
	line-height: 1.7;
	color: var(--navy-900);
	letter-spacing: var(--tracking);
}

/*
 * 項目は横に2つずつ並べて縦の余白を詰める。auto-fill にしているので、
 * 1列あたり 190px を確保できない幅（スマホ）では自動的に1列へ戻る。
 * max() で「最低でも半分の幅」も課しており、3列以上には割れない。
 * これで「項目数が奇数なら最後の1つは必ず単独で余る」が常に成り立つ。
 * 式の中の 20px は下の column-gap と同じ値なので、変えるときは両方直すこと。
 * gap で行間を作るため、.list-dot の li + li のマージンは打ち消す。
 */
.lineup__list {
	grid-area: list;
	display: grid;
	gap: 6px 20px;
	grid-template-columns: repeat(auto-fill, minmax(max(190px, (100% - 20px) / 2), 1fr));
	align-content: start;
	min-width: 0;
}

.lineup__list li + li {
	margin-top: 0;
}

/*
 * 項目数が奇数なら、最後の1つは隣の列が空く。
 * そこだけ全幅に伸ばして、長い項目が半分の幅で折り返すのを防ぐ。
 * 短い項目に当たっても左寄せのままなので、見た目は変わらない。
 */
.lineup__list li:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/*
 * 導入ステップ。横長の行を縦に積み、行間に下向きの矢印を置く。
 *
 * PC でも横並びにしないのは、7手順だと必ず折り返しが起きるため。
 * 折り返した先（右端 → 次の行の左端）には矢印が引けず、そこで流れが切れる。
 * 縦に積めば矢印がすべて同じ向きに揃い、最後まで1本の線として読める。
 * 幅が余る分は「左に番号／右に内容」の2カラムにして使い切る。
 */
.flow {
	--flow-gap: clamp(20px, 2.4vw, 28px);
	display: grid;
	gap: var(--flow-gap);
}

.flow__item {
	/* 横長の行では上下の余白が効きすぎるので、通常のカードより詰める。 */
	--card-pad: clamp(20px, 2.4vw, 28px);
	position: relative;
	display: grid;
	gap: 4px;
	grid-template-columns: 1fr;
	align-items: center;
}

/* 番号を左の柱に立てられる幅から2カラムにする。 */
@media (min-width: 680px) {
	.flow__item {
		gap: clamp(20px, 3vw, 36px);
		grid-template-columns: minmax(0, 116px) 1fr;
	}
}

.flow__step {
	font-family: var(--font-en);
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	font-style: italic;
	font-weight: 700;
	line-height: 1.1;
	color: var(--gold-600);
	letter-spacing: 0.04em;
}

/* 「Step」は番号の添え物なので、上に小さく置く。 */
.flow__step-label {
	display: block;
	font-family: var(--font);
	font-size: var(--fs-xs);
	font-style: normal;
	color: var(--gold-700);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

@media (min-width: 680px) {
	.flow__step {
		padding-right: clamp(20px, 3vw, 36px);
		border-right: 1px solid var(--line);
	}
}

/* 横長になると .card の flex:1 が効かず間延びするので、本文側で高さを決めない。 */
.flow__item .card__title {
	margin-bottom: 6px;
}

.flow__item .card__text {
	flex: none;
}

/*
 * 矢印。カードの下のすき間の中央に置く。
 * すき間の中央に合わせるため、100% の位置から gap の半分だけ送って中央寄せする。
 */
.flow__item::after {
	position: absolute;
	top: 100%;
	left: 50%;
	width: clamp(9px, 1vw, 11px);
	height: clamp(9px, 1vw, 11px);
	margin-top: calc(var(--flow-gap) / 2);
	content: "";
	border-top: 2px solid var(--gold-600);
	border-right: 2px solid var(--gold-600);
	transform: translate(-50%, -50%) rotate(135deg);
}

/* 最後の手順の下は流れの終わりなので、矢印を出さない。 */
.flow__item:last-child::after {
	content: none;
}

/* 手順の外に置く補足。番号の柱がない分、左の余白を手順と揃えない。 */
.flow__note {
	margin-top: clamp(24px, 3vw, 36px);
}

/*
 * 料金。左に料金表、右に単価パネル。
 * 表は2列しかないので、横スクロールさせずに狭い幅まで縮む形にしている。
 */
.price-layout {
	display: grid;
	gap: clamp(20px, 3vw, 32px);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 900px) {
	.price-layout {
		grid-template-columns: 1.35fr 1fr;
	}
}

.fee-table {
	width: 100%;
	font-size: var(--fs-sm);
	background: var(--white);
	border: 1px solid var(--line);
}

.fee-table th,
.fee-table td {
	padding: 14px 16px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--line);
}

.fee-table thead th {
	font-weight: 700;
	color: var(--white);
	background: var(--navy-800);
	border-bottom: 0;
}

.fee-table tbody th {
	width: 42%;
	font-weight: 700;
	color: var(--navy-800);
	background: var(--blue-050);
}

.fee-table tbody td {
	font-weight: 700;
	color: var(--navy-900);
}

/* 「（最低料金・単価150円換算）」などの補足。金額より小さく、折り返して添える。 */
.fee-table small {
	display: inline-block;
	margin-left: 4px;
	font-size: var(--fs-xs);
	font-weight: 500;
	color: var(--ink-500);
}

.fee-table tbody tr:last-child th,
.fee-table tbody tr:last-child td {
	border-bottom: 0;
}

/* 表の下に添える注記（税抜き表記）。表の右端に揃える。 */
.fee-table__note {
	margin-top: 10px;
	font-size: var(--fs-xs);
	color: var(--ink-500);
	text-align: right;
}

/* 1名あたりの単価。ページ内で一番大きい数字にして、価格の手軽さを印象づける。 */
.price-panel {
	padding: clamp(24px, 3vw, 32px);
	color: var(--white);
	background: linear-gradient(135deg, var(--navy-900) 0%, var(--blue-700) 100%);
	border-radius: var(--radius);
}

.price-panel__label {
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--gold-400);
	letter-spacing: 0.1em;
}

.price-panel__num {
	margin: 4px 0 12px;
	font-size: clamp(2.75rem, 2.2rem + 2.4vw, 3.75rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--white);
}

.price-panel__unit {
	margin-left: 4px;
	font-size: 0.34em;
	font-weight: 700;
}

/*
 * 金額が数字ではなく「数十円〜数百円程度」のような文のとき。
 * 9文字がパネルの幅で1行に収まるよう、数字のときより一段小さくする。
 */
.price-panel__num--text {
	font-size: clamp(1.625rem, 1.2rem + 1.9vw, 2.375rem);
	letter-spacing: 0.02em;
}

/* 「円」は続けて読ませたいので、字を小さくするだけで間は空けない。 */
.price-panel__num--text .price-panel__unit {
	margin-left: 0;
	font-size: 0.55em;
}

.price-panel__text {
	font-size: var(--fs-sm);
	line-height: 1.9;
	color: rgb(255 255 255 / 86%);
}

/*
 * サービスの強み。説明文を持たない見出しだけの一覧（2026-09-24）。
 * 短い見出しを .card で囲うと中身より余白のほうが大きくなるので、高さを詰めた6枚を並べる。
 *
 * クラス名が .strengths だと研修ページの「選ばれる理由」（.strengths__item）と
 * ぶつかるため、こちらは .strength-list とする。
 */
.strength-list {
	display: grid;
	gap: clamp(12px, 1.6vw, 20px);
	grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
}

.strength {
	display: flex;
	gap: clamp(14px, 1.8vw, 20px);
	align-items: center;
	height: 100%;
	padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 28px);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

/*
 * 番号は英字見出しと同じセリフ体で大きく置く。
 * 白の上なので --gold-600（大きな文字は 3.65:1 で足りる）を使う。
 */
.strength__num {
	flex: none;
	font-family: var(--font-en);
	font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem);
	font-weight: 600;
	line-height: 1;
	color: var(--gold-600);
	letter-spacing: 0.04em;
}

/* 番号との間に金の細線を1本入れて、番号を柱として見せる。 */
.strength__title {
	padding-left: clamp(14px, 1.8vw, 20px);
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: 1.7;
	color: var(--navy-900);
	letter-spacing: var(--tracking);
	border-left: 1px solid var(--gold-line);
}

/*
 * 06「福利厚生としての位置づけ」は、この章の結論にあたるので1枚だけ色を変える。
 * 濃紺で塗ると浮いてしまうため、淡い金の面と金の罫線に留めている。
 */
.strength--accent {
	background: var(--gold-100);
	border-color: var(--gold-line);
}

/* 淡い金の上では --gold-600 が沈むので、数字は一段濃い --gold-700 にする。 */
.strength--accent .strength__num {
	color: var(--gold-700);
}

.strength--accent .strength__title {
	border-left-color: var(--gold-600);
}

/* ---------- 14. 引用・声 ---------- */
.voice {
	padding: clamp(20px, 2.6vw, 28px);
	font-size: var(--fs-sm);
	line-height: 1.9;
	color: var(--navy-800);
	background: var(--blue-050);
	border-left: 3px solid var(--blue-600);
}

.voice__label {
	display: block;
	margin-bottom: 8px;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--blue-600);
	letter-spacing: 0.1em;
}

.callout {
	padding: clamp(20px, 2.6vw, 28px);
	font-size: var(--fs-sm);
	line-height: 1.9;
	color: var(--ink-700);
	background: var(--bg-tint);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

/* ---------- 15. CTA ---------- */
/*
 * CTA。単調な面にならないよう、ヒーローと同じ「四角」の語彙で
 * うっすら幾何学模様を敷く。文字が乗るので、線はごく薄く保つこと。
 *   ::before … 細い格子（repeating-linear-gradient を縦横に）
 *   ::after  … 大きめの四角を2枚、右側に重ねる
 */
.cta {
	position: relative;
	padding-block: clamp(48px, 6vw, 80px);
	overflow: hidden;
	color: var(--white);
	background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%);
	isolation: isolate;
}

.cta::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	content: "";
	background-image:
		repeating-linear-gradient(
			90deg,
			rgb(255 255 255 / 5%) 0 1px,
			transparent 1px 64px
		),
		repeating-linear-gradient(
			0deg,
			rgb(255 255 255 / 5%) 0 1px,
			transparent 1px 64px
		);
	/* 端で線が切れて見えないよう、中心から外側へ薄く消す。 */
	mask-image: radial-gradient(120% 100% at 70% 50%, #000 30%, transparent 100%);
}

.cta__inner {
	display: grid;
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.cta__inner {
		grid-template-columns: 1.35fr 1fr;
	}
}

.cta__en {
	display: block;
	margin-bottom: 2px;
	font-family: var(--font-en);
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	font-style: italic;
	font-weight: 500;
	line-height: 1.15;
	color: var(--gold-400);
	letter-spacing: 0.06em;
}

.cta__title {
	margin-bottom: 14px;
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.65;
	letter-spacing: var(--tracking-wide);
}

.cta__text {
	font-size: var(--fs-sm);
	line-height: 1.95;
	color: rgb(255 255 255 / 82%);
}

.cta__actions {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
}

.cta__tel {
	color: var(--white);
	text-decoration: none;
}

.cta__tel-label,
.cta__tel-note {
	display: block;
	font-size: var(--fs-xs);
	color: rgb(255 255 255 / 78%);
}

.cta__tel-num {
	display: block;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
}

/* ---------- 16. お知らせ ---------- */
.news {
	border-top: 1px solid var(--line);
}

.news__item {
	border-bottom: 1px solid var(--line);
}

.news__link {
	display: grid;
	gap: 4px 16px;
	align-items: baseline;
	padding: 20px 4px;
	text-decoration: none;
	grid-template-columns: 1fr;
}

.news__link:hover .news__title {
	color: var(--blue-600);
	text-decoration: underline;
}

.news__date {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--ink-400);
	letter-spacing: 0.06em;
}

.news__cat {
	justify-self: start;
	padding: 2px 12px;
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--blue-600);
	background: var(--blue-050);
	border: 1px solid var(--blue-100);
}

.news__title {
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.8;
	color: var(--ink-900);
}

@media (min-width: 720px) {
	.news__link {
		grid-template-columns: 104px 116px 1fr;
	}
}

.news__more {
	margin-top: 32px;
	text-align: center;
}

.news__empty {
	padding: 32px 0;
	font-size: var(--fs-sm);
	color: var(--ink-500);
	text-align: center;
}

/* 記事本文 */
.entry-body {
	font-size: var(--fs-body);
	line-height: 2;
	color: var(--ink-700);
}

.entry-body > * + * {
	margin-top: 1.5em;
}

.entry-body h2 {
	margin-top: 2em;
	padding-bottom: 10px;
	font-size: var(--fs-h3);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--navy-900);
	border-bottom: 2px solid var(--blue-600);
}

.entry-body h3 {
	margin-top: 1.8em;
	font-size: var(--fs-h4);
	font-weight: 700;
	color: var(--navy-800);
}

.entry-body ul,
.entry-body ol {
	padding-left: 1.4em;
	list-style: revert;
}

.entry-body li + li {
	margin-top: 0.5em;
}

.entry-body img {
	border-radius: var(--radius);
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-bottom: 20px;
}

.pager {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 48px;
}

.pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--navy-800);
	text-decoration: none;
	border: 1px solid var(--line);
}

.pager .page-numbers.current,
.pager .page-numbers:hover {
	color: var(--white);
	background: var(--navy-800);
	border-color: var(--navy-800);
}

/* ---------- 16b. トップへ戻る ---------- */
/*
 * 右下に固定。ある程度スクロールしてから現れる（表示制御は main.js）。
 * hidden 属性で初期状態を隠しているので、JS が動かない環境では出ない。
 */
.to-top {
	position: fixed;
	right: clamp(16px, 2.5vw, 32px);
	bottom: clamp(16px, 2.5vw, 32px);
	z-index: 80;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	color: var(--white);
	background: rgb(22 41 74 / 88%);
	border: 1px solid rgb(216 182 90 / 45%);
	border-radius: var(--radius);
	backdrop-filter: blur(6px);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

.to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.to-top:hover {
	background: var(--navy-800);
	border-color: var(--gold-400);
}

/* 上向きの矢羽根。 */
.to-top__arrow {
	width: 9px;
	height: 9px;
	margin-top: 3px;
	border-top: 2px solid currentcolor;
	border-right: 2px solid currentcolor;
	transform: rotate(-45deg);
}

@media (max-width: 640px) {
	.to-top {
		width: 46px;
		height: 46px;
	}
}

/* ---------- 16c. 『マナベル』会員ページ ---------- */
/*
 * 会員限定の記事まわり。お知らせ（16）と違い、PC では本文＋サイドバーの2カラム。
 * サイドバーは「最新記事」「おすすめ記事」「対象者から探す」の3ブロック。
 */

/* 2カラム。サイドバーを置けるのは 1024px から。それ未満では本文の下に回り込む。 */
.two-col {
	display: grid;
	gap: clamp(40px, 5vw, 64px);
}

/* grid の子は既定で min-width:auto のため、長い URL などで列がはみ出す。0 にして防ぐ。 */
.two-col__main {
	min-width: 0;
}

@media (min-width: 1024px) {
	.two-col {
		grid-template-columns: minmax(0, 1fr) 296px;
	}

	/* 本文が長いので、読み進めてもサイドバーが付いてくるようにする。 */
	.side {
		position: sticky;
		top: calc(var(--header-h) + 24px);
		align-self: start;
	}
}

.side__block + .side__block {
	margin-top: clamp(28px, 3vw, 40px);
}

.side__title {
	padding-bottom: 10px;
	margin-bottom: 16px;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--navy-900);
	letter-spacing: var(--tracking-wide);
	border-bottom: 1px solid var(--line);
	position: relative;
}

/* 見出しの頭だけ金の線を重ねて、章の始まりを示す。 */
.side__title::after {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 40px;
	height: 1px;
	content: "";
	background: var(--gold-600);
}

.side-list__item + .side-list__item {
	margin-top: 4px;
	border-top: 1px solid var(--line);
}

.side-list__link {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 0;
	text-decoration: none;
}

.side-list__thumb {
	flex: none;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: var(--radius);
}

.side-list__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.side-list__body {
	display: block;
	min-width: 0;
}

.side-list__date {
	display: block;
	margin-bottom: 4px;
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--ink-400);
	letter-spacing: 0.06em;
}

.side-list__title {
	display: block;
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: 1.7;
	color: var(--ink-900);
}

.side-list__link:hover .side-list__title {
	color: var(--blue-600);
	text-decoration: underline;
}

/* 対象者。数が少ないので、リストではなくタグを並べる。 */
.side-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.side-tags__link {
	display: inline-block;
	padding: 6px 14px;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--navy-800);
	text-decoration: none;
	background: var(--white);
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

.side-tags__link:hover,
.side-tags__link.is-current {
	color: var(--white);
	background: var(--navy-800);
	border-color: var(--navy-800);
}

/* 記事一覧。本文カラムの幅で2列に割れる。 */
.mn-list {
	display: grid;
	gap: clamp(16px, 2vw, 24px);
	grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}

.mn-item__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	text-decoration: none;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color 0.2s, transform 0.2s;
}

.mn-item__link:hover {
	border-color: var(--blue-600);
	transform: translateY(-2px);
}

.mn-item__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--blue-050);
}

.mn-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* アイキャッチ未設定のときの代替。英字見出しと同じセリフ体で service 名を置く。 */
.mn-item__thumb-alt {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-family: var(--font-en);
	font-size: 1.5rem;
	font-style: italic;
	color: var(--gold-600);
	letter-spacing: 0.08em;
	background: var(--blue-050);
}

.mn-item__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: clamp(16px, 2vw, 20px);
}

.mn-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--ink-400);
	letter-spacing: 0.06em;
}

.mn-item__cat {
	padding: 2px 10px;
	color: var(--blue-600);
	background: var(--blue-050);
	border: 1px solid var(--blue-100);
}

.mn-item__title {
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.8;
	color: var(--navy-900);
}

.mn-item__link:hover .mn-item__title {
	color: var(--blue-600);
}

.mn-item__excerpt {
	font-size: var(--fs-xs);
	line-height: 1.9;
	color: var(--ink-500);
}

/*
 * 会員であることを示す帯。パンくずのすぐ下に置く。
 * 「いま会員ページを見ている」「ログアウトはここ」の2点だけを持たせる。
 */
.memberbar {
	color: var(--white);
	background: var(--navy-800);
}

.memberbar .container {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
	justify-content: space-between;
	padding-block: 10px;
}

.memberbar__text {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	font-size: var(--fs-xs);
	color: rgb(255 255 255 / 86%);
}

.memberbar__badge {
	padding: 2px 10px;
	font-weight: 700;
	color: var(--navy-900);
	background: var(--gold-400);
	letter-spacing: 0.06em;
}

.memberbar__logout {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--gold-400);
}

/* ログイン画面（未ログインで会員ページを開いたときに出る） */
.gate__lead {
	margin-bottom: 28px;
	font-size: var(--fs-sm);
	line-height: 1.9;
	color: var(--ink-700);
	text-align: center;
}

.gate__error {
	padding: 12px 16px;
	margin-bottom: 24px;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: #93302b;
	background: #fdf2f1;
	border: 1px solid #e6c5c2;
	border-radius: var(--radius);
}

/*
 * セキュリティ系プラグインが do_action('login_form') で差し込む項目。
 * 現状は CloudSecure WP Security の画像認証（.cloudsecure-wp-captcha-block）。
 * プラグイン側は素のままの HTML を出すので、ここでフォームの体裁に揃える。
 */
.gate__form .cloudsecure-wp-captcha-block {
	margin-top: 24px;
}

.gate__form .cloudsecure-wp-captcha-block label:first-child {
	display: block;
	margin-bottom: 8px;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--navy-900);
	letter-spacing: 0.04em;
}

.gate__form .cloudsecure-wp-captcha-block img {
	display: block;
	margin-bottom: 10px;
}

.gate__form .cloudsecure-wp-captcha-block input[type="text"] {
	width: 100%;
}

.gate__remember {
	margin-top: 16px;
	font-size: var(--fs-xs);
	color: var(--ink-500);
}

.gate__remember label {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	cursor: pointer;
}

.gate__note {
	padding-top: 24px;
	margin-top: 32px;
	font-size: var(--fs-xs);
	line-height: 1.9;
	color: var(--ink-500);
	text-align: center;
	border-top: 1px solid var(--line);
}

/*
 * 福利厚生ページに置く会員ページの入口。
 * 問い合わせ導線とは役割が違うので、ボタンではなく1本の帯にしている。
 */
.member-entry {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
	padding: clamp(14px, 1.8vw, 18px) clamp(18px, 2.4vw, 26px);
	background: var(--white);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
}

.member-entry__label {
	padding: 3px 12px;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--navy-900);
	background: var(--bg-tint);
	border: 1px solid var(--line);
}

.member-entry__link {
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--blue-600);
}

/* ---------- 17. フッター ---------- */
.site-footer {
	padding-block: clamp(48px, 6vw, 72px) 32px;
	font-size: var(--fs-sm);
	color: rgb(255 255 255 / 78%);
	background: var(--navy-900);
}

.site-footer__top {
	display: grid;
	gap: clamp(32px, 4vw, 56px);
	grid-template-columns: 1fr;
}

@media (min-width: 860px) {
	.site-footer__top {
		grid-template-columns: 1fr 1.5fr;
	}
}

.site-footer__name {
	margin-bottom: 14px;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--white);
	letter-spacing: 0.04em;
}

.site-footer__addr,
.site-footer__tel {
	font-size: var(--fs-xs);
	line-height: 1.9;
}

.site-footer__tel {
	margin-top: 14px;
}

.site-footer__tel a {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--white);
	text-decoration: none;
	letter-spacing: 0.04em;
}

.site-footer__hours {
	color: rgb(255 255 255 / 62%);
}

.site-footer__nav {
	display: grid;
	gap: clamp(24px, 3vw, 40px);
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.site-footer__heading {
	margin-bottom: 14px;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--gold-400);
	letter-spacing: 0.14em;
}

.site-footer__col li + li {
	margin-top: 10px;
}

.site-footer__col a {
	font-size: var(--fs-xs);
	color: rgb(255 255 255 / 78%);
	text-decoration: none;
}

.site-footer__col a:hover {
	color: var(--white);
	text-decoration: underline;
}

.pdf-mark {
	margin-left: 6px;
	padding: 1px 5px;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	white-space: nowrap;
	color: var(--navy-900);
	background: #e3e8ef;
	border-radius: 2px;
}

/* 白背景のカード上で使うバッジ */
.pdf-mark--dark {
	color: var(--white);
	background: var(--navy-800);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-top: clamp(36px, 4vw, 56px);
	padding-top: 24px;
	border-top: 1px solid rgb(255 255 255 / 14%);
}

.site-footer__copy {
	font-size: 0.6875rem;
	color: rgb(255 255 255 / 55%);
}

/*
 * お問い合わせページの電話番号。このページで一番大きい文字にする。
 *
 * 以前はインラインの style で指定していたが、clamp の中の「1.4rem+1.4vw」に
 * 空白が無く、CSS の演算式として不正だったため宣言ごと無視され、
 * 番号が本文サイズのまま表示されていた。
 * clamp / calc の + と - は前後に空白が必須。
 */
.tel-lg {
	font-size: clamp(2rem, 1.5rem + 2vw, 2.875rem);
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: 0.02em;
}

.tel-lg a {
	color: var(--navy-900);
	text-decoration: none;
}

/* ---------- 18. Contact Form 7 ---------- */
.form-wrap {
	padding: clamp(24px, 4vw, 48px);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.form-row + .form-row {
	margin-top: 28px;
}

.form-label {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-bottom: 10px;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--navy-900);
}

.req,
.any {
	padding: 2px 9px;
	font-size: 0.6875rem;
	font-weight: 700;
	border-radius: 2px;
}

.req {
	color: var(--white);
	background: #c0453f;
}

.any {
	color: var(--ink-500);
	background: var(--bg-tint);
	border: 1px solid var(--line);
}

.form-hint {
	margin-top: 8px;
	font-size: var(--fs-xs);
	color: var(--ink-500);
}

.form-wrap input[type="text"],
.form-wrap input[type="email"],
.form-wrap input[type="tel"],
.form-wrap input[type="password"],
.form-wrap select,
.form-wrap textarea {
	width: 100%;
	padding: 13px 14px;
	font-family: inherit;
	font-size: 1rem; /* iOS の自動ズームを防ぐ */
	line-height: 1.7;
	color: var(--ink-900);
	background: var(--white);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	transition: border-color 0.2s;
}

.form-wrap textarea {
	min-height: 200px;
	resize: vertical;
}

.form-wrap select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--navy-800) 50%),
		linear-gradient(135deg, var(--navy-800) 50%, transparent 50%);
	background-position: calc(100% - 20px) center, calc(100% - 14px) center;
	background-repeat: no-repeat;
	background-size: 6px 6px, 6px 6px;
	padding-right: 44px;
}

.form-wrap input:focus,
.form-wrap select:focus,
.form-wrap textarea:focus {
	border-color: var(--blue-600);
	outline: 2px solid var(--blue-100);
	outline-offset: 0;
}

.form-consent {
	padding: 20px 24px;
	margin-top: 32px;
	font-size: var(--fs-sm);
	background: var(--bg-tint);
	border: 1px solid var(--line);
}

.form-consent .wpcf7-list-item {
	margin: 0;
}

.form-submit {
	margin-top: 32px;
	text-align: center;
}

.form-submit .wpcf7-submit {
	min-width: 280px;
	min-height: 38px;
	padding: 8px 64px;
	font-size: var(--fs-xs);
	font-weight: 500;
	color: var(--white);
	letter-spacing: 0.16em;
	background: var(--navy-800);
	border: 0;
	border-radius: 0;
	transition: background-color 0.2s;
}

.form-submit .wpcf7-submit:hover {
	background: var(--blue-700);
}

.form-submit .wpcf7-submit:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.wpcf7-not-valid-tip {
	margin-top: 8px;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: #c0453f;
}

.wpcf7-response-output {
	padding: 16px 20px !important;
	margin: 28px 0 0 !important;
	font-size: var(--fs-sm);
	border-width: 1px !important;
	border-radius: var(--radius);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	border-color: #c0453f !important;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--blue-600) !important;
}

.wpcf7-spinner {
	display: block;
	margin: 16px auto 0;
}

/* ---------- 19. TOP 固有 ---------- */
/*
 * メインビジュアル。写真をビューポートに固定し、その上を文章が乗り上げて
 * スクロールしていく。
 *
 * 仕組み: .hero__media を position:fixed で画面に貼り付け、.hero 側の
 * clip-path で「ヒーローの矩形の外は見せない」ようにしている。
 * clip-path は fixed の子孫も切り抜くが、包含ブロックは作らないため、
 * 写真は画面に固定されたまま .hero の中だけに現れる。
 * background-attachment:fixed は iOS で効かないので、この方式にしている。
 */
.hero {
	position: relative;
	display: grid;
	/*
	 * 列は必ず .hero の幅に収める。既定の auto だと列幅が中身の最大幅に
	 * 引きずられ、width:max-content の子（説明文）があると狭い画面でも
	 * 列が広がり、.hero__inner の min(100%, --container) が効かなくなる。
	 */
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	/* PC は画面の高さの 9 割。低い窓でも見出しが詰まらないよう 560px を下限にする。スマホは下の @media で 100svh。 */
	min-height: max(560px, 90vh);
	clip-path: inset(0);
	color: var(--white);
	background: var(--navy-900);
}

.hero__media {
	position: fixed;
	inset: 0;
}

.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 72% center;
}

/*
 * 写真（top-hero_gra.webp）には左側にグラデーションが焼き込んであるため、
 * PC では CSS 側の覆いを重ねない（以前の濃紺のグラデーションは廃止）。
 * スマホだけ、文章が乗る下側に薄い覆いを残す（下の @media 内）。
 * 縦長では写真の焼き込みが効かず、白文字が人物や明るい背景に直接乗るため。
 */

/*
 * 文章側。写真は position:fixed（＝positioned）なので、こちらも positioned に
 * しないと写真の下に潜り込んで見えなくなる。position:relative は必須。
 */
.hero__inner {
	position: relative;
	width: min(100%, var(--container));
	/* ヘッダーが重なる分を足して、見出しが隠れないようにする。 */
	padding: calc(var(--header-h) + clamp(56px, 8vw, 88px)) var(--gutter) clamp(56px, 8vw, 88px);
	margin-inline: auto;
}

/*
 * スマホ。写真の固定は同じで、文章の置き場所だけ変える。
 * 画面が縦長なので、写真の上半分に代表の顔が出るようにし、
 * 文章は下半分に寄せる。スクロールすると文章が写真に乗り上げていく。
 */
@media (max-width: 640px) {
	.hero {
		align-items: end;
		min-height: 100svh;
	}

	.hero__media img {
		object-position: 72% 20%;
	}

	/* 上は素のまま、文章の乗る下側だけ濃紺を薄く重ねる。白文字の下限（4.5:1）を切らない濃さ */
	.hero__media::after {
		position: absolute;
		inset: 0;
		content: "";
		background: linear-gradient(
			180deg,
			rgb(22 41 74 / 0%) 0%,
			rgb(22 41 74 / 18%) 34%,
			rgb(22 41 74 / 76%) 62%,
			rgb(22 41 74 / 86%) 100%
		);
	}

	.hero__inner {
		padding-top: clamp(24px, 6vw, 40px);
		padding-bottom: clamp(40px, 10vw, 64px);
	}

	/* 狭い幅では傾きと歪みを弱め、4行が収まるようにする。 */
	.hero .hero__title {
		--hero-rotate: -4deg;
		--hero-skew: -6deg;
	
}
}

/*
 * メインビジュアルの見出し。
 * ブロック全体を右上がりに回転させ、字面を斜めに歪ませる（skewX）。
 * 回転の軸は左下。左下を固定して右側を持ち上げるため、左端が余白の外へ
 * はみ出しにくい。角度はカスタムプロパティで持ち、モバイルで弱める。
 * 行ごとに大きさを変えるのは .hero__line--s / --m / --l。
 */
.hero__title {
	--hero-rotate: -5deg;
	--hero-skew: -10deg;
	/*
	 * block にすること。inline-block だと、直後の .hero__text（同じく幅を内容に
	 * 合わせる要素）が横に入る余地があるときに同じ行へ回り込み、説明文の座布団が
	 * 見出しに重なる。回転の基点は左下なので、幅が変わっても見た目は同じ。
	 */
	display: block;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.2em;
	transform: rotate(var(--hero-rotate)) skewX(var(--hero-skew));
	transform-origin: 0 100%;
	/* 文字の影。X0 / Y4 / ぼかし25。色は黒40%（濃さはここで調整） */
	text-shadow: 0 4px 25px rgb(0 0 0 / 40%);
}

.hero__line {
	display: block;
	width: max-content;
	max-width: 100%;
}

/*
 * 文字の大きさは画面幅に比例させる。基準はデザインカンプ（1440px 幅で最大 75px）。
 *   大 5.2vw ＝ 75px / 中 3.95vw ＝ 57px / 小 3.125vw ＝ 45px（いずれも 1440px のとき）
 * 下限はスマホで4行が収まる値、上限はワイド画面で大きくなりすぎない値。
 */
.hero__line--s {
	font-size: clamp(1.375rem, 3.125vw, 2.85rem);
	letter-spacing: 0.3em;
}

.hero__line--m {
	font-size: clamp(1.75rem, 3.95vw, 3.6rem);
}

.hero__line--l {
	font-size: clamp(2.25rem, 5.2vw, 4.75rem);
}

/* 助詞など、周りより小さく見せる文字 */
.hero__sm {
	font-size: 0.8em;
}

/*
 * キャッチコピー下の説明文。濃紺の座布団に白文字。
 * 座布団は画面の左端から文の終わりまで伸ばす。--bleed はコンテナの左端から
 * 画面の左端までの距離（.overlap と同じ計算）。その分だけ左に食み出させ、
 * 同じ分を左の余白に足して文字の位置は変えない。
 */
.hero__text {
	--bleed: calc((100vw - min(100vw, var(--container))) / 2 + var(--gutter));
	display: block;
	/*
	 * 幅は文章の自然な幅（max-content）に合わせる。
	 * 上限に 100% を使わないこと。座布団は左に --bleed だけ食み出しており、
	 * 100% だとその食み出し分がそのまま文字の入る幅から引かれ、
	 * 画面が広いほど文章が細く潰れる。食み出し分を足した値を上限にする。
	 */
	width: max-content;
	max-width: calc(100% + var(--bleed));
	margin-top: clamp(20px, 3vw, 32px);
	margin-left: calc(var(--bleed) * -1);
	padding: clamp(16px, 2vw, 24px) clamp(20px, 2.6vw, 32px) clamp(16px, 2vw, 24px) calc(var(--bleed) + clamp(20px, 2.6vw, 32px));
	font-size: var(--fs-sm);
	line-height: 1.9;
	color: var(--white);
	letter-spacing: 0.06em;
	background: var(--navy-900);
}

/* 狭い幅では改行を解除して自然に折り返す */
@media (max-width: 640px) {
	.hero__text {
		display: block;
	}

	.hero__text br {
		display: none;
	}
}

/* 事業一覧。白いカードを横に並べ、写真は上に置く。 */
.biz-list {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
	background: var(--line);
	border: 1px solid var(--line);
}

.biz {
	display: flex;
	flex-direction: column;
	padding: 0;
	text-decoration: none;
	background: var(--white);
	transition: background-color 0.2s;
}

.biz:hover {
	background: var(--blue-050);
}

.biz__img {
	aspect-ratio: 16 / 10;
	width: 100%;
	object-fit: cover;
}

.biz__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: clamp(24px, 3vw, 32px);
}

.biz__en {
	display: block;
	margin-bottom: 4px;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--gold-700);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.biz__title {
	margin-bottom: 12px;
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: 1.7;
	color: var(--navy-900);
	letter-spacing: var(--tracking);
}

.biz__text {
	flex: 1;
	font-size: var(--fs-sm);
	line-height: 1.9;
	color: var(--ink-700);
}

/*
 * 説明文の代わりに置く副題。事業名と一組で読ませたいので、
 * .biz__title の下余白（12px）を詰めて見出しに寄せる。
 * 「詳しく見る」をカード下端に残すため、余りはここで吸収する（.biz__text と同じ役割）。
 */
.biz__sub {
	flex: 1;
	margin-top: -6px;
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1.8;
	color: var(--ink-500);
	letter-spacing: 0.02em;
}

.biz__more {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin-top: 20px;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--blue-600);
}

.biz__more::after {
	width: 6px;
	height: 6px;
	content: "";
	border-top: 2px solid currentcolor;
	border-right: 2px solid currentcolor;
	transform: rotate(45deg);
}

/* 私たちからのメッセージ。行数が多いので見出しより一段小さく、行間は広めに取る。 */
.message {
	text-align: center;
}

/*
 * 文字サイズの上限は「最長行が折り返さない」ことから逆算している。
 * .container--narrow(800px) から --gutter と .frame の左右 padding を引くと、
 * ワイド画面での文字領域は 608px。全角は 1 文字 = 1em なので、
 * 23 文字 × 1.1em(字間込み) ≤ 608px → 22px が上限。
 * 本文を長い行に差し替えるときはここも見直すこと。
 */
.message__text {
	font-size: clamp(1.0625rem, 0.9rem + 0.8vw, 1.375rem);
	font-weight: 500;
	line-height: 2.4;
	color: var(--navy-900);
	letter-spacing: 0.1em;
}

.section--navy .message__text {
	color: var(--white);
}

/* 理念（MISSION / VISION / VALUES） */
.philosophy {
	display: grid;
	gap: 2px;
	background: var(--line);
	border: 1px solid var(--line);
}

.philosophy__row {
	display: grid;
	gap: 0;
	background: var(--white);
	grid-template-columns: 1fr;
}

@media (min-width: 780px) {
	.philosophy__row {
		grid-template-columns: 264px 1fr;
	}
}

.philosophy__key {
	padding: clamp(20px, 2.6vw, 32px);
	color: var(--white);
	background: var(--navy-800);
}

/* 英字と日本語のジャンプ率を約2.6倍に取り、ラベルとして立たせる。 */
.philosophy__en {
	display: block;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.16em;
	/* 折り返すと「MISSIO / N」のように割れるため、必ず1行に収める。 */
	white-space: nowrap;
}

.philosophy__ja {
	display: block;
	margin-top: 10px;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.52em;
	/* 字間は文字の右側に付くため、最後の1字分だけ右に寄る。同量を左に足して中和する。 */
	text-indent: 0.52em;
	color: var(--gold-400);
}

.philosophy__body {
	padding: clamp(20px, 2.6vw, 32px);
}

.philosophy__lead {
	margin-bottom: 10px;
	font-size: var(--fs-h4);
	font-weight: 700;
	color: var(--navy-900);
}

.philosophy__text {
	font-size: var(--fs-sm);
	line-height: 1.95;
	color: var(--ink-700);
}

/*
 * VALUES の3項目。箱と左ボーダーはやめ、細い縦罫線だけで区切る。
 * サイト全体で使っているヘアラインの語彙（見出し下の細線、.frame の枠）と揃え、
 * 装飾を足さずに整理する。
 */
.values {
	display: grid;
	gap: 0;
	margin-top: clamp(24px, 3vw, 36px);
	grid-template-columns: 1fr;
}

.values__item {
	padding: 22px 0;
	border-top: 1px solid var(--line);
}

.values__item:last-child {
	border-bottom: 1px solid var(--line);
}

/* 英字。和文とのジャンプ率を約2.4倍取る。 */
.values__label {
	position: relative;
	display: block;
	padding-bottom: 12px;
	font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--navy-900);
	letter-spacing: 0.08em;
}

/* 英字の下に短い金の線を1本だけ引く。 */
.values__label::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 28px;
	height: 2px;
	content: "";
	background: var(--gold-600);
}

.values__ja {
	display: block;
	margin-top: 14px;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--navy-800);
	letter-spacing: 0.1em;
}

.values__note {
	display: block;
	margin-top: 2px;
	font-size: 0.75rem;
	color: var(--ink-500);
	letter-spacing: 0.1em;
}

/* 横並びに切り替わったら、区切りは縦罫線に変わる。 */
@media (min-width: 680px) {
	.values {
		grid-template-columns: repeat(3, 1fr);
	}

	/* 左右に同じ余白を取り、3列の内側の geometry を揃える。 */
	.values__item {
		padding: 4px clamp(20px, 2.6vw, 32px);
		border-top: 0;
		border-left: 1px solid var(--line);
	}

	.values__item:first-child {
		border-left: 0;
	}

	.values__item:last-child {
		border-bottom: 0;
	}
}

/* 代表挨拶 */
.greeting__sign {
	margin-top: 28px;
	font-size: var(--fs-sm);
	color: var(--ink-700);
	text-align: right;
}

.greeting__sign strong {
	display: block;
	margin-top: 4px;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--navy-900);
	letter-spacing: 0.08em;
}

/* 地図。iframe は自前で比率を持たないため、入れ物側で高さを決める。 */
.map {
	margin-top: clamp(24px, 3vw, 36px);
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	aspect-ratio: 16 / 9;
}

.map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	/* Google マップの彩度を少し落とし、青主体の面に馴染ませる。 */
	filter: saturate(0.85);
}

@media (max-width: 640px) {
	.map {
		aspect-ratio: 4 / 3;
	}
}

/* パートナー一覧 */
.partners {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}

.partners li {
	padding: 12px 16px;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--navy-800);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

/* 実績サマリ */
.case {
	padding: 0;
	overflow: hidden;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.case__head {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
	padding: 20px clamp(20px, 3vw, 32px);
	color: var(--white);
	background: var(--navy-800);
}

.case__label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--gold-400);
	letter-spacing: 0.12em;
}

.case__value {
	display: block;
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: 1.4;
}

.case__body {
	/* 下の .case-effect がこの分を負のマージンで打ち消して端まで伸びる。 */
	--case-pad: clamp(24px, 3vw, 36px);
	padding: var(--case-pad);
}

/* ---------- 20. レスポンシブ（ドロワー） ---------- */
@media (max-width: 1024px) {
	.drawer-toggle {
		display: block;
	}

	.gnav {
		position: fixed;
		inset: 0;
		z-index: 90;
		display: flex;
		padding: calc(var(--header-h) + 20px) var(--gutter) 48px;
		overflow-y: auto;
		visibility: hidden;
		background: rgb(255 255 255 / 88%);
		backdrop-filter: blur(18px) saturate(1.4);
		opacity: 0;
		transition: opacity 0.25s, visibility 0.25s;
	}

	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		.gnav {
			background: var(--white);
		}
	}

	.gnav.is-open {
		visibility: visible;
		opacity: 1;
	}

	.gnav__list {
		flex-direction: column;
		gap: 0;
		align-items: stretch;
		width: 100%;
	}

	.gnav__item {
		border-bottom: 1px solid var(--line);
	}

	.gnav__link {
		padding: 18px 4px;
		font-size: 1rem;
	}

	.gnav__item--has-child {
		display: grid;
		grid-template-columns: 1fr 56px;
	}

	.gnav__toggle {
		display: block;
		position: relative;
		background: none;
		border: 0;
	}

	.gnav__toggle::before,
	.gnav__toggle::after {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 14px;
		height: 2px;
		content: "";
		background: var(--navy-900);
		transform: translate(-50%, -50%);
		transition: transform 0.2s;
	}

	.gnav__toggle::after {
		transform: translate(-50%, -50%) rotate(90deg);
	}

	.gnav__toggle[aria-expanded="true"]::after {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	/*
	 * デスクトップ用のドロップダウン指定（left:50% + translate(-50%)）を打ち消す。
	 * :hover / :focus-within の規則は詳細度が高いので、同じセレクタで上書きすること。
	 * これを怠るとタップ後にサブメニューが画面左外へずれる。
	 */
	.gnav__sub,
	.gnav__item--has-child:hover .gnav__sub,
	.gnav__item--has-child:focus-within .gnav__sub {
		position: static;
		grid-column: 1 / -1;
		display: none;
		/* ドロワーの中は縦に積むので、PC 用の max-content を打ち消す。 */
		width: auto;
		min-width: 0;
		padding: 0 0 12px;
		visibility: visible;
		border: 0;
		box-shadow: none;
		opacity: 1;
		transform: none;
	}

	.gnav__sub.is-open,
	.gnav__item--has-child:hover .gnav__sub.is-open,
	.gnav__item--has-child:focus-within .gnav__sub.is-open {
		display: block;
	}

	.gnav__sub.is-open {
		display: block;
	}

	.gnav__sub a {
		padding: 12px 16px;
		background: var(--blue-050);
	}

	.gnav__sub li + li a {
		margin-top: 2px;
	}

	.gnav__item--cta {
		padding-top: 24px;
		border-bottom: 0;
	}

	.gnav__item--cta .btn {
		width: 100%;
	}

	body.is-drawer-open {
		overflow: hidden;
	}
}

/* ---------- 21. モーション設定の尊重 ---------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ---------- 22. 印刷 ---------- */
@media print {
	.site-header,
	.site-footer,
	.cta,
	.breadcrumb {
		display: none;
	}

	body {
		color: #000;
	}
}