@charset "UTF-8";
/* =====================================================================
   Blue Academy Media
   ---------------------------------------------------------------------
   デザインルール（Notion 仕様）に厳密に従う。
   - 色は #0066FE / #FFFFFF / #000000 のみ（透明度違いは可）
   - 見出し英字は Open Sans、日本語はヒラギノ角ゴ ProN
   - 数字はすべて日本語フォント
   - 見出し 40px / 最小 16px（375px 以下は 24px / 10px）
   - 字間は最大 3px、斜体は使わない
   - 意味を持たないデザインは排除する
   - ウエイトは本文 500 / それ以外 700。本文の可読性と、見出しとの
     強弱をはっきり付けるため（当初は細め基調だったが、指示により変更）
   - 見出しの英字はロゴに寄せて少し縦伸び（Open Sans の幅軸 87.5%）
   - 左右にコンテンツを分けない。情報は必ず上下（縦）に積む
   ===================================================================== */

/* ---------------------------------------------------------------------
   数字を日本語フォントで表示するための定義。
   unicode-range を数字のみに限定した「合成フォント」を用意し、
   すべてのフォントスタックの先頭に置く。これにより Open Sans を
   指定した見出しでも、数字だけがヒラギノ角ゴに解決される。
   ------------------------------------------------------------------ */
/* local() は個別のフォント「面」を指すため、1 つにまとめるとウエイトが
   固定され、隣り合う日本語本文より数字だけ太く見えてしまう。
   本文で使うウエイトごとに面を分け、周囲の字面とそろえる。 */

/* 面の切り方は、実際に使うウエイト（本文 500 / それ以外 700）に合わせてある。
   ここがずれると、本文中の数字だけ太くなる・見出しの数字だけ細くなる、が起きる。 */

/* 標準（400） */
@font-face {
	font-family: "BA Numerals";
	font-style: normal;
	font-stretch: 50% 200%;
	font-weight: 400;
	font-display: swap;
	src:
		local("Hiragino Kaku Gothic ProN W3"),
		local("HiraKakuProN-W3"),
		local("ヒラギノ角ゴ ProN W3"),
		local("Hiragino Sans W3"),
		local("Yu Gothic Regular"),
		local("YuGothic-Regular"),
		local("Yu Gothic"),
		local("Meiryo");
	/* 半角数字 + 全角数字 */
	unicode-range: U+0030-0039, U+FF10-FF19;
}

/* 本文（500）。游ゴシックは 500 で Medium に解決される。 */
@font-face {
	font-family: "BA Numerals";
	font-style: normal;
	font-stretch: 50% 200%;
	font-weight: 500;
	font-display: swap;
	src:
		local("Hiragino Kaku Gothic ProN W3"),
		local("HiraKakuProN-W3"),
		local("Hiragino Sans W4"),
		local("Yu Gothic Medium"),
		local("YuGothic-Medium"),
		local("Yu Gothic"),
		local("Meiryo");
	unicode-range: U+0030-0039, U+FF10-FF19;
}

/* 見出し・ラベル・UI（600〜900） */
@font-face {
	font-family: "BA Numerals";
	font-style: normal;
	font-stretch: 50% 200%;
	font-weight: 600 900;
	font-display: swap;
	src:
		local("Hiragino Kaku Gothic ProN W6"),
		local("HiraKakuProN-W6"),
		local("Hiragino Sans W6"),
		local("Yu Gothic Bold"),
		local("YuGothic-Bold"),
		local("Meiryo Bold");
	unicode-range: U+0030-0039, U+FF10-FF19;
}

:root {
	/* ---- カラー（指定色のみ） ---- */
	--c-blue: #0066fe;
	--c-white: #ffffff;
	--c-black: #000000;

	/* 指定色に透明度を掛けたもの。新しい色は増やさない。 */
	--c-rule: rgba(0, 0, 0, 0.14);
	--c-rule-on-blue: rgba(255, 255, 255, 0.28);
	--c-muted: rgba(0, 0, 0, 0.6);
	--c-muted-on-blue: rgba(255, 255, 255, 0.72);
	--c-blue-wash: rgba(0, 102, 254, 0.06);

	/* ---- フォント ---- */
	--font-jp: "BA Numerals", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN",
		"Hiragino Sans", "Yu Gothic", "游ゴシック体", "Noto Sans JP", sans-serif;
	--font-heading: "BA Numerals", "Open Sans", "Hiragino Kaku Gothic ProN",
		"ヒラギノ角ゴ ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;

	/* ---- フォントサイズ ----
	   見出し: 375px で 24px、1024px 以上で 40px に到達する直線補間 */
	--fs-heading: clamp(24px, 14.76px + 2.465vw, 40px);
	/* About のステートメント。見出し(40px)と小見出し(24px)の中間に置く。 */
	--fs-statement: clamp(20px, 15.5px + 1.2vw, 32px);
	--fs-sub: clamp(18px, 14.53px + 0.925vw, 24px);
	--fs-lead: clamp(16px, 14.84px + 0.308vw, 18px);
	--fs-body: 16px;
	--fs-meta: 16px;

	/* ---- ウエイト ----
	   本文と、それ以外（見出し・ラベル・UI）で強弱をはっきり付ける。
	   本文が 500 なのは、游ゴシックが Windows で細く痩せて見え、
	   400 だと長文が読みづらいため（macOS のヒラギノ W3 相当にそろう）。 */
	--fw-body: 500;
	--fw-mid: 700; /* ラベル・ナビ・ボタン・カード見出し */
	--fw-head: 700; /* 見出し */

	/* ---- 字幅 ----
	   ロゴの英字がやや縦伸び（コンデンス）なので、見出しの英字も少し寄せる。
	   ロゴ実測では字幅がキャップハイトの 0.39〜0.84 倍（E で 0.48）と、
	   通常幅の書体より 15% ほど狭い。そこで Open Sans の可変幅軸を 87.5% に
	   置く（実効の字幅は通常比およそ 86%）。

	   scaleX で潰すのではなく、その幅のために設計された字形が使われるため、
	   線の太さが崩れず読みやすさを損なわない。
	   日本語書体には幅軸が無いので通常幅のまま（変形はさせない）。 */
	--fst-head: 87.5%;

	/* ---- 字間（最大 3px を超えない） ---- */
	--ls-heading: 0.01em; /* 縦伸びに合わせて少し詰める。40px 時 0.4px */
	--ls-label: 0.12em; /* 16px 時 1.92px */
	--ls-body: 0.02em; /* 16px 時 0.32px */

	/* ---- 余白（セクション間は統一する） ---- */
	--space-section: clamp(72px, 9vw, 128px);
	--space-block: clamp(32px, 4vw, 56px);
	--gap: clamp(20px, 2.2vw, 32px);

	/* ---- 版面 ----
	   いずれも max-width。狭い画面では余白（--pad-x）で自動的に収まるので、
	   広げても影響するのは PC などの広い画面だけ（スマホの見え方は変わらない）。 */
	--w-container: 1280px;
	--w-narrow: 880px; /* 記事の本文カラム。狭いという指摘を受けて 760→880 に広げた。 */
	--pad-x: clamp(20px, 5vw, 48px);

	--header-h: 72px;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* 角丸。ボタン・入力・チップは小さめ、CTA カードは少し大きめに。
	   ボタンに丸みを持たせて、素っ気ない直角より信頼感のある印象にする。 */
	--radius-s: 9px;
	--radius-m: 16px;
	--radius-pill: 999px;
}

@media (max-width: 375px) {
	:root {
		--fs-body: 14px;
		--fs-meta: 11px; /* 375px 以下の最小 10px を下回らない */
		--header-h: 60px;
	}
}

/* ---------------------------------------------------------------------
   リセット
   ------------------------------------------------------------------ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

body {
	margin: 0;
	background: var(--c-white);
	color: var(--c-black);
	font-family: var(--font-jp);
	font-size: var(--fs-body);
	font-weight: var(--fw-body);
	line-height: 1.9; /* 行間は詰めすぎず、あけすぎない */
	letter-spacing: var(--ls-body);
	/* 文字間が均一に見えるよう、日本語の約物を詰める */
	font-feature-settings: "palt" 1;
	/* 禁則処理を厳密に適用する（行頭・行末に来てはいけない文字を送る） */
	line-break: strict;

	/* 改行位置を意味のまとまりで区切る。
	   日本語は既定（normal）だとほぼ任意の文字間で折り返せてしまい、
	   「磨き上げ／る」のように単語の途中で切れる。
	   auto-phrase は文節の境目で折り返す。
	   これは <html lang="ja"> が前提（ブラウザが日本語だと判断できないと働かない）。
	   未対応のブラウザは直前の normal に戻るだけで、崩れはしない。 */
	word-break: normal;
	word-break: auto-phrase;

	/* URL 等の長い文字列がはみ出すときだけ、やむを得ず途中で折る。 */
	overflow-wrap: anywhere;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* 斜体は使わない（ブラウザ既定の斜体化を打ち消す） */
i,
em,
cite,
dfn,
address,
var {
	font-style: normal;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

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

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
	margin: 0;
}

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

.is-blue :focus-visible {
	outline-color: var(--c-white);
}

/* PC だけの改行。スマホでは改行を消して、折り返しをブラウザに任せる。 */
@media (max-width: 767px) {
	.u-br-pc {
		display: none;
	}
}

/* スクリーンリーダー用 */
.u-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.u-skip {
	position: absolute;
	top: -100px;
	left: var(--pad-x);
	z-index: 100;
	background: var(--c-blue);
	color: var(--c-white);
	padding: 12px 20px;
	transition: top 0.2s var(--ease);
}

.u-skip:focus {
	top: 12px;
}

/* ---------------------------------------------------------------------
   ローディング演出（コップに水を注ぐ）

   画面をコップに見立て、下から上へブランドカラーの水が満ちる。
   水位（--p）は JS が 0→100 で更新し、水の高さと、数字を白く切り替える
   位置の両方がこの 1 つの値から決まる。

   既定は非表示。header.php のインラインスクリプトが <html> に is-loading を
   付けたときだけ出る（1 セッション 1 回 / 動きを減らす設定では出さない）。
   JS が動かない環境では最初から出ないので、ページを塞がない。
   ------------------------------------------------------------------ */
.c-loader {
	display: none;
}

.is-loading .c-loader {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	background: var(--c-white);
	overflow: hidden;
}

/* 演出中は背面をスクロールさせない。 */
.is-loading,
.is-loading body {
	overflow: hidden;
	height: 100%;
}

.c-loader__count {
	position: relative;
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-heading);
	font-weight: var(--fw-head);
	font-stretch: var(--fst-head);
	letter-spacing: var(--ls-heading);
	line-height: 1;
	color: var(--c-blue);
}

/* 水（下から満ちる）。高さがそのまま水位。 */
.c-loader__water {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(var(--p, 0) * 1%);
	overflow: hidden;
}

.c-loader__fill {
	position: absolute;
	inset: 0;
	background: var(--c-blue);
}

/* 水に沈んだぶんの数字。
   画面全体に重ねた白い複製を、水位のところで切り出して見せる。

   水の overflow で切る手もあるが、position: fixed の子は祖先の overflow で
   切られない仕様のため、ブラウザ任せになって危うい。
   水位（--p）から clip-path で直接切れば、仕様どおりに決まる。

   中央寄せはこの入れ物側で行う。数字の <p> に grid を掛けると、
   数字と % が別の行に分かれてしまう。 */
.c-loader__sunk {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	/* 下から var(--p)% ぶんだけを残す */
	clip-path: inset(calc(100% - var(--p, 0) * 1%) 0 0 0);
}

.c-loader__sunk .c-loader__count {
	color: var(--c-white);
}

/* 水面。水位の上に置き、横に流してうねらせる。
   幅 200% に 2 周期分を描いてあるので、-50% ずらすと継ぎ目なくつながる。 */
.c-loader__wave {
	position: absolute;
	left: 0;
	bottom: calc(var(--p, 0) * 1%);
	width: 200%;
	height: clamp(20px, 3.4vw, 44px);
	fill: var(--c-blue);
	animation: bam-wave-flow 3s linear infinite;
	/* 水位は小数になるため、水面と水の境に髪の毛ほどの隙間が出る。1px 重ねて塞ぐ。 */
	margin-bottom: -1px;
}

@keyframes bam-wave-flow {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* 満ちきったら、ページを現す。 */
.c-loader.is-done {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s var(--ease), visibility 0.6s;
}

/* ---------------------------------------------------------------------
   下からふわっと現れる（.is-reveal）

   JS が対象に付ける。JS が動かなければクラスが付かず、そのまま見える。
   ------------------------------------------------------------------ */
.is-reveal {
	opacity: 0;
	transform: translateY(24px);
}

.is-reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
	/* 同じ塊の中では少しずつ遅らせて、順に立ち上がって見せる。 */
	transition-delay: calc(var(--r, 0) * 80ms);
}

/* ---------------------------------------------------------------------
   レイアウト
   ------------------------------------------------------------------ */
.l-container {
	width: 100%;
	max-width: var(--w-container);
	margin-inline: auto;
	padding-inline: var(--pad-x);
}

.l-narrow {
	width: 100%;
	max-width: var(--w-narrow);
	margin-inline: auto;
	padding-inline: var(--pad-x);
}

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

.l-section--blue {
	background: var(--c-blue);
	color: var(--c-white);
}

.l-main {
	display: block;
}

/* ---------------------------------------------------------------------
   タイポグラフィ
   ------------------------------------------------------------------ */
.c-heading {
	font-family: var(--font-heading);
	font-size: var(--fs-heading);
	font-weight: var(--fw-head);
	line-height: 1.35;
	letter-spacing: var(--ls-heading);
	/* 見出しと本文でサイズ・間隔に差をつける */
	margin-block-end: var(--space-block);
	font-stretch: var(--fst-head);
}

.c-heading--tight {
	margin-block-end: clamp(16px, 2vw, 24px);
}

/* 英字の頭文字のみ大文字。装飾用の小見出しラベル。 */
.c-label {
	font-family: var(--font-heading);
	font-size: var(--fs-meta);
	font-weight: var(--fw-mid);
	letter-spacing: var(--ls-label);
	color: var(--c-blue);
	display: block;
	margin-block-end: 12px;
	font-stretch: var(--fst-head);
}

.is-blue .c-label,
.l-section--blue .c-label {
	color: var(--c-white);
}

.c-sub {
	font-family: var(--font-heading);
	font-size: var(--fs-sub);
	font-weight: var(--fw-mid);
	line-height: 1.5;
	letter-spacing: 0.04em;
	font-stretch: var(--fst-head);
}

.c-lead {
	font-size: var(--fs-lead);
	line-height: 2.05;
	max-width: 42em;
}

/* ---------------------------------------------------------------------
   ボタン / リンク
   ------------------------------------------------------------------ */
.c-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 16px 32px;
	font-family: var(--font-heading);
	font-size: var(--fs-meta);
	font-weight: var(--fw-mid);
	letter-spacing: 0.08em;
	border: 1px solid var(--c-blue);
	border-radius: var(--radius-pill);
	background: var(--c-blue);
	color: var(--c-white);
	box-shadow: 0 6px 18px rgba(0, 102, 254, 0.18);
	transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
		box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.c-btn:hover {
	box-shadow: 0 8px 22px rgba(0, 102, 254, 0.26);
	transform: translateY(-1px);
}

/* 白背景（青セクション）の上ではボタンの影を弱める（青地に青影は不自然）。 */
.is-blue .c-btn,
.l-section--blue .c-btn {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

.c-btn:hover {
	background: var(--c-white);
	color: var(--c-blue);
}

.c-btn--ghost {
	background: transparent;
	color: var(--c-blue);
}

.c-btn--ghost:hover {
	background: var(--c-blue);
	color: var(--c-white);
}

.is-blue .c-btn,
.l-section--blue .c-btn {
	background: var(--c-white);
	color: var(--c-blue);
	border-color: var(--c-white);
}

.is-blue .c-btn:hover,
.l-section--blue .c-btn:hover {
	background: transparent;
	color: var(--c-white);
}

/* More→ 形式のテキストリンク */
.c-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-heading);
	font-size: var(--fs-meta);
	font-weight: var(--fw-mid);
	letter-spacing: 0.06em;
	color: var(--c-blue);
	border-bottom: 1px solid currentColor;
	padding-block-end: 4px;
	transition: gap 0.3s var(--ease);
}

.c-more:hover {
	gap: 14px;
}

.l-section--blue .c-more {
	color: var(--c-white);
}

.c-more__arrow {
	font-family: var(--font-heading);
	line-height: 1;
}

/* ---------------------------------------------------------------------
   ヘッダー
   ------------------------------------------------------------------ */
.c-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--c-white);
	border-bottom: 1px solid var(--c-rule);
}

.c-header__inner {
	max-width: var(--w-container);
	margin-inline: auto;
	padding-inline: var(--pad-x);
	min-height: var(--header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
}

.c-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

/* ロゴは 1980x270（約 7.3:1）。高さで指定し、幅は比率に任せる。 */
.c-logo__img,
.c-logo img {
	height: clamp(22px, 2.2vw, 30px);
	width: auto;
	max-width: 100%;
}

.c-footer__brand .c-logo__img {
	height: clamp(24px, 2.4vw, 32px);
}

/* --- グローバルナビ --- */
/* ナビと問い合わせを 1 つの塊にしておき、モバイルではこの塊ごと
   オーバーレイに変える。DOM を二重に持たないための構成。 */
.c-header__nav {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.4vw, 36px);
}

.c-nav {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2vw, 32px);
}

.c-nav__item {
	position: relative;
}

.c-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-heading);
	font-size: var(--fs-meta);
	font-weight: var(--fw-mid);
	letter-spacing: 0.06em;
	padding-block: 8px;
	color: var(--c-black);
	transition: color 0.25s var(--ease);
}

.c-nav__link:hover,
.c-nav__item.is-open > .c-nav__link {
	color: var(--c-blue);
}

.c-nav__link--external {
	gap: 6px;
}

.c-icon-external {
	width: 0.9em;
	height: 0.9em;
	flex-shrink: 0;
}

.c-nav__caret {
	width: 8px;
	height: 8px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.25s var(--ease);
}

.c-nav__item.is-open .c-nav__caret {
	transform: rotate(-135deg) translate(-2px, -2px);
}

/* ドロップダウン（Guides の子カテゴリー） */
.c-nav__sub {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 8px);
	min-width: 220px;
	background: var(--c-white);
	border: 1px solid var(--c-rule);
	padding: 12px 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s var(--ease), transform 0.25s var(--ease),
		visibility 0.25s;
}

.c-nav__item:hover .c-nav__sub,
.c-nav__item.is-open .c-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.c-nav__sub-link {
	display: block;
	padding: 10px 24px;
	font-size: var(--fs-meta);
	white-space: nowrap;
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.c-nav__sub-link:hover {
	background: var(--c-blue-wash);
	color: var(--c-blue);
}

/* --- ヘッダー右側の問い合わせ --- */
.c-header__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

.c-header__cta {
	padding: 10px 20px;
	font-size: var(--fs-meta);
	white-space: nowrap;
}

/* スマホメニュー内の「お問い合わせ」。既定は非表示（PC では出さない）。 */
.c-nav-contact {
	display: none;
}

.c-nav-contact .c-sec-head {
	margin-block-end: 20px;
}

.c-nav-contact__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 24px;
	margin-block-end: 12px;
	background: var(--c-blue);
	color: var(--c-white);
	font-family: var(--font-heading);
	font-size: var(--fs-meta);
	font-weight: var(--fw-mid);
	letter-spacing: 0.06em;
	transition: opacity 0.25s var(--ease);
}

.c-nav-contact__btn:hover {
	opacity: 0.9;
}

.c-nav-contact__btn--ghost {
	background: transparent;
	color: var(--c-blue);
	border: 1px solid var(--c-blue);
}

.c-nav-contact__arrow {
	font-family: var(--font-heading);
	line-height: 1;
}

.c-nav-contact__tel {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	margin-block-start: 8px;
	font-family: var(--font-jp);
	font-size: var(--fs-sub);
	letter-spacing: 0.04em;
	color: var(--c-blue);
}

.c-nav-contact__tel-label {
	font-size: var(--fs-meta);
	letter-spacing: var(--ls-label);
}

/* --- ハンバーガー --- */
.c-burger {
	display: none;
	width: 40px;
	height: 40px;
	position: relative;
	flex-shrink: 0;
}

.c-burger__line {
	position: absolute;
	left: 8px;
	width: 24px;
	height: 1px;
	background: var(--c-blue);
	transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.c-burger__line:nth-child(1) {
	top: 14px;
}
.c-burger__line:nth-child(2) {
	top: 20px;
}
.c-burger__line:nth-child(3) {
	top: 26px;
}

.c-burger[aria-expanded="true"] .c-burger__line:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}
.c-burger[aria-expanded="true"] .c-burger__line:nth-child(2) {
	opacity: 0;
}
.c-burger[aria-expanded="true"] .c-burger__line:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1024px) {
	.c-burger {
		display: block;
	}

	/* ハンバーガーを開いたときのオーバーレイ。白地・青文字。
	   PC 用の flex（横並び）を解除し、ナビとお問い合わせを縦に積む。 */
	.c-header__nav {
		display: block;
		position: fixed;
		inset: var(--header-h) 0 0 0;
		background: var(--c-white);
		padding: clamp(20px, 6vw, 32px) var(--pad-x) 48px;
		overflow-y: auto;
		transform: translateY(-12px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
			visibility 0.3s;
	}

	.c-header__nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.c-nav {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		border-top: 1px solid var(--c-rule);
	}

	/* 大きめの項目・青文字・区切り線（スクショ参考）。 */
	.c-nav__link {
		padding-block: 20px;
		border-bottom: 1px solid var(--c-rule);
		justify-content: space-between;
		font-family: var(--font-heading);
		font-size: var(--fs-sub);
		font-weight: var(--fw-head);
		font-stretch: var(--fst-head);
		letter-spacing: 0.04em;
		color: var(--c-blue);
	}

	.c-nav__link:hover,
	.c-nav__item.is-open > .c-nav__link {
		color: var(--c-blue);
		opacity: 0.7;
	}

	/* 展開の＋/− を右に出す（caret を流用）。 */
	.c-nav__caret {
		width: 10px;
		height: 10px;
		border-color: var(--c-blue);
	}

	.c-nav__sub {
		position: static;
		transform: none;
		min-width: 0;
		border: 0;
		padding: 0;
		opacity: 1;
		visibility: visible;
		display: none;
		background: var(--c-blue-wash);
	}

	.c-nav__item.is-open .c-nav__sub {
		display: block;
		transform: none;
	}

	/* サブ項目は字下げ＋右に「>」矢印。 */
	.c-nav__sub-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px 20px 16px 28px;
		border-bottom: 1px solid var(--c-rule);
		font-size: var(--fs-body);
		color: var(--c-black);
	}

	.c-nav__sub-link::after {
		content: "";
		width: 8px;
		height: 8px;
		border-top: 1px solid var(--c-blue);
		border-right: 1px solid var(--c-blue);
		transform: rotate(45deg);
		flex-shrink: 0;
	}

	/* PC 用の CTA はメニュー内では隠し、下の Contact ブロックを使う。 */
	.c-header__actions {
		display: none;
	}

	.c-nav-contact {
		display: block;
		margin-block-start: var(--space-block);
	}
}

/* ---------------------------------------------------------------------
   ヒーロー（波紋）
   ------------------------------------------------------------------ */
.c-hero {
	position: relative;
	min-height: min(88svh, 820px);
	display: flex;
	/* キービジュアルを画面の中心に置く */
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--c-blue);
	isolation: isolate;
}

.c-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.c-hero__media img,
.c-hero__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s var(--ease);
}

.c-hero__media img.is-active,
.c-hero__media video {
	opacity: 1;
}

/* 波紋キャンバス。JS が有効になったときだけ前面に出す。 */
.c-hero__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	opacity: 0;
	transition: opacity 0.6s var(--ease);
	touch-action: pan-y;
}

.c-hero.is-rippling .c-hero__canvas {
	opacity: 1;
}

/* 波紋キャンバスが描き始めたら、元の写真・動画は二重描画になるので隠す。
   JS が動かない環境では is-rippling が付かず、写真がそのまま見える。 */
.c-hero.is-rippling .c-hero__media {
	opacity: 0;
}

/* 白文字の可読性を確保する陰。黒の透明度のみを使う。 */
.c-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.55) 0%,
		rgba(0, 0, 0, 0.2) 45%,
		rgba(0, 0, 0, 0) 100%
	);
	pointer-events: none;
}

.c-hero__inner {
	width: 100%;
	max-width: var(--w-container);
	margin-inline: auto;
	/* 左右は版面にそろえ、上下は Scroll 表示と干渉しない余白を確保する。 */
	padding: clamp(72px, 10vh, 120px) var(--pad-x);
	display: flex;
	justify-content: center;
	position: relative;
	/* ヒーローのどこを触っても波紋が立つよう、前面の要素はマウスを透かす。 */
	pointer-events: none;
}

/* 中央のキービジュアル（ページの h1）。
   縦長・横長どちらの画面でも収まるよう、幅と高さの両方に上限を置く。 */
.c-hero__logo {
	margin: 0;
	line-height: 0;
}

.c-hero__logo picture {
	display: contents;
}

.c-hero__logo img {
	width: auto;
	height: auto;
	max-width: min(78vw, 820px);
	max-height: min(58svh, 520px);
	object-fit: contain;
}

/* スマホでも PC と同じキービジュアルを使い、少し大きめに見せる。 */
@media (max-width: 599px) {
	.c-hero__logo img {
		max-width: 86vw;
		max-height: 62svh;
	}
}

.c-hero__scroll {
	position: absolute;
	right: var(--pad-x);
	bottom: clamp(56px, 8vw, 96px);
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-heading);
	font-size: var(--fs-meta);
	letter-spacing: 0.14em;
	color: var(--c-white);
	writing-mode: vertical-rl;
}

.c-hero__scroll::after {
	content: "";
	width: 1px;
	height: 56px;
	background: var(--c-white);
	transform-origin: top;
	animation: bam-scroll 2.4s var(--ease) infinite;
}

@keyframes bam-scroll {
	0% {
		transform: scaleY(0);
	}
	45% {
		transform: scaleY(1);
	}
	100% {
		transform: scaleY(0);
		transform-origin: bottom;
	}
}

@media (max-width: 767px) {
	.c-hero__scroll {
		display: none;
	}
}

/* ---------------------------------------------------------------------
   波（モチーフ）: セクション境界
   ------------------------------------------------------------------ */
/* 塗るのは常に青の側だけ。反対側は透過して地の白を見せる。
   隣接する青セクションとの間に髪の毛ほどの隙間が出ないよう 1px 重ねる。 */
.c-wave {
	display: block;
	width: 100%;
	height: clamp(40px, 5vw, 72px);
	fill: var(--c-blue);
}

.c-wave--to-blue {
	margin-block-end: -1px;
}

.c-wave--to-white {
	margin-block-start: -1px;
}

/* ---------------------------------------------------------------------
   セクション見出し（ラベル + 見出し + More）
   ------------------------------------------------------------------ */
/* 英字＋日本語の見出し（英字を大きく、日本語を小さく添える）。 */
.c-sec-head {
	display: block;
	margin-block-end: var(--space-block);
}

.c-sec-head__en {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--fs-heading);
	font-weight: var(--fw-head);
	font-stretch: var(--fst-head);
	letter-spacing: var(--ls-heading);
	line-height: 1.15;
	color: var(--c-blue);
}

.c-sec-head__jp {
	display: block;
	margin-block-start: 8px;
	font-size: var(--fs-meta);
	font-weight: var(--fw-mid);
	letter-spacing: var(--ls-label);
	color: var(--c-muted);
}

.is-blue .c-sec-head__en,
.l-section--blue .c-sec-head__en {
	color: var(--c-white);
}

.is-blue .c-sec-head__jp,
.l-section--blue .c-sec-head__jp {
	color: var(--c-muted-on-blue);
}

.c-section-head {
	margin-block-end: var(--space-block);
}

.c-section-head .c-heading {
	margin-block-end: 0;
}

/* More→ は見出しの横ではなく、一覧の下に置く。
   Notion の並び（見出し → 記事6件 → More→）どおり、上下に積む。 */
.c-section-foot {
	margin-block-start: var(--space-block);
}

/* ---------------------------------------------------------------------
   記事カード
   ------------------------------------------------------------------ */
.c-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap) var(--gap);
}

@media (max-width: 1024px) {
	.c-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.c-cards {
		grid-template-columns: 1fr;
	}
}

.c-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.c-card__thumb {
	position: relative;
	/* アイキャッチの多くが 16:9 のバナーなので、カードも 16:9 にそろえて
	   切り抜きで画像内の文字が欠けないようにする。 */
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--c-blue-wash);
	margin-block-end: 16px;
}

.c-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

.c-card:hover .c-card__thumb img {
	transform: scale(1.04);
}

/* 画像未設定時のプレースホルダ（波モチーフ） */
.c-card__thumb--empty {
	display: grid;
	place-items: center;
	background: var(--c-blue);
}

.c-card__thumb--empty svg {
	width: 56px;
	height: auto;
	fill: var(--c-white);
	opacity: 0.5;
}

.c-card__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: var(--fs-meta);
	color: var(--c-muted);
	letter-spacing: 0.04em;
	line-height: 1.4;
	margin-block-end: 10px;
}

.c-card__cat {
	color: var(--c-blue);
	border: 1px solid currentColor;
	padding: 3px 10px;
	line-height: 1.4;
}

.c-card__title {
	font-size: var(--fs-body);
	font-weight: var(--fw-mid);
	line-height: 1.75;
	transition: color 0.25s var(--ease);
	font-stretch: var(--fst-head);
}

.c-card:hover .c-card__title {
	color: var(--c-blue);
}

.c-card__excerpt {
	margin-block-start: 10px;
	font-size: var(--fs-meta);
	color: var(--c-muted);
	line-height: 1.8;
}

/* 青背景の上のカード */
.l-section--blue .c-card__meta,
.l-section--blue .c-card__excerpt {
	color: var(--c-muted-on-blue);
}

.l-section--blue .c-card__cat {
	color: var(--c-white);
}

.l-section--blue .c-card:hover .c-card__title {
	color: var(--c-white);
}

.l-section--blue .c-card__thumb--empty {
	background: rgba(255, 255, 255, 0.14);
}

/* ---------------------------------------------------------------------
   TOP: About セクション
   ------------------------------------------------------------------ */
/* 左右に分けず、必ず上下に積む。 */
.c-about__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-block);
	align-items: start;
}

.c-about__statement {
	font-family: var(--font-heading);
	font-size: var(--fs-statement);
	font-weight: var(--fw-head);
	line-height: 1.75;
	letter-spacing: 0.04em;
	font-stretch: var(--fst-head);
}

.c-about__text p + p {
	margin-block-start: 1.5em;
}

/* About・Three Principles の本文は幅制限を外し、横幅いっぱいに流す。
   幅制限（42em）があると指定外の位置で折り返してしまうため。
   対象は固定ページ系（About・原則）だけ。記事本文は c-content なので影響しない。 */
.c-about__body .c-lead,
#principles > .l-container > .c-lead {
	max-width: none;
}

.c-about__actions {
	display: flex;
	align-items: center;
	gap: var(--gap);
	flex-wrap: wrap;
	margin-block-start: var(--space-block);
}

/* ---------------------------------------------------------------------
   About ページ: Three Principles
   ------------------------------------------------------------------ */
.c-principles {
	display: grid;
	gap: var(--space-block);
	counter-reset: principle;
}

/* 番号 → 見出し → 本文の順に、上下に積む（左右に分けない）。 */
.c-principle {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	align-items: start;
	padding-block-start: var(--space-block);
	border-top: 1px solid var(--c-rule);
}

.l-section--blue .c-principle {
	border-top-color: var(--c-rule-on-blue);
}

.c-principle__num {
	font-family: var(--font-heading); /* 数字は BA Numerals で日本語フォントに解決される */
	font-size: var(--fs-sub);
	font-weight: var(--fw-mid);
	letter-spacing: 0.06em;
	color: var(--c-blue);
	line-height: 1.2;
	font-stretch: var(--fst-head);
}

.l-section--blue .c-principle__num {
	color: var(--c-white);
}

.c-principle__title {
	font-size: var(--fs-sub);
	font-weight: var(--fw-mid);
	line-height: 1.6;
	letter-spacing: 0.03em;
	margin-block-end: 20px;
	font-stretch: var(--fst-head);
}

.c-principle__text {
	line-height: 2;
	/* 幅制限を外し、指定した改行位置だけで折り返すようにする
	   （42/44em の制限があると、指定外の位置でも折り返してしまう）。 */
	max-width: none;
}

/* ---------------------------------------------------------------------
   フィルター（カテゴリー絞り込み）
   ------------------------------------------------------------------ */
.c-filter {
	margin-block-end: var(--space-block);
}

.c-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* 2 段目（選んでいる大分類の下のカテゴリー）。1 段目より控えめに見せる。 */
.c-filter__list--sub {
	margin-block-start: 12px;
	padding-block-start: 12px;
	border-top: 1px dashed var(--c-rule);
}

.c-filter__link--sub {
	font-size: var(--fs-meta);
	padding: 7px 14px;
	color: var(--c-muted);
}

.c-filter__link--sub:hover,
.c-filter__link--sub.is-current {
	color: var(--c-blue);
}

.c-filter__link {
	display: inline-block;
	padding: 9px 18px;
	font-size: var(--fs-meta);
	letter-spacing: 0.04em;
	line-height: 1.5;
	border: 1px solid var(--c-rule);
	color: var(--c-black);
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
		border-color 0.25s var(--ease);
	font-weight: var(--fw-mid);
}

.c-filter__link:hover {
	border-color: var(--c-blue);
	color: var(--c-blue);
}

.c-filter__link.is-current {
	background: var(--c-blue);
	border-color: var(--c-blue);
	color: var(--c-white);
}

/* ---------------------------------------------------------------------
   ページ見出し（アーカイブ）
   ------------------------------------------------------------------ */
.c-page-head {
	padding-block: clamp(40px, 5vw, 72px) var(--space-block);
	border-bottom: 1px solid var(--c-rule);
	margin-block-end: var(--space-block);
}

/* 一覧ページの版面。セクション同士の余白は共通のトークンでそろえる。 */
.l-listing {
	padding-block-end: var(--space-section);
}

.c-page-head__desc {
	margin-block-start: 20px;
	color: var(--c-muted);
	max-width: 44em;
}

/* ---------------------------------------------------------------------
   パンくず
   ------------------------------------------------------------------ */
.c-breadcrumb {
	font-size: var(--fs-meta);
	color: var(--c-muted);
	padding-block: 20px;
	line-height: 1.6;
}

.c-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.c-breadcrumb li:not(:last-child)::after {
	content: "／";
	margin-inline-start: 8px;
	color: var(--c-rule);
}

.c-breadcrumb a:hover {
	color: var(--c-blue);
}

/* ---------------------------------------------------------------------
   記事詳細
   ------------------------------------------------------------------ */
.c-article__head {
	margin-block-end: var(--space-block);
}

.c-article__meta {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	font-size: var(--fs-meta);
	color: var(--c-muted);
	letter-spacing: 0.04em;
	line-height: 1.5;
	margin-block-end: 20px;
}

.c-article__date {
	font-family: var(--font-jp);
}

.c-article__cat {
	color: var(--c-blue);
	border: 1px solid currentColor;
	padding: 3px 10px;
}

.c-article__title {
	font-size: var(--fs-heading);
	font-weight: var(--fw-head);
	line-height: 1.5;
	letter-spacing: 0.03em;
	font-stretch: var(--fst-head);
}

.c-article__figure {
	margin-block: var(--space-block);
}

.c-article__figure img {
	width: 100%;
	height: auto;
}

.c-article__summary {
	font-size: var(--fs-lead);
	line-height: 2.05;
	padding: clamp(24px, 3vw, 36px);
	background: var(--c-blue-wash);
	border-left: 2px solid var(--c-blue);
	border-radius: var(--radius-m);
	margin-block-end: var(--space-block);
}

/* --- Index（目次） --- */
.c-toc {
	border: 1px solid var(--c-rule);
	border-radius: var(--radius-m);
	padding: clamp(24px, 3vw, 36px);
	margin-block-end: var(--space-block);
}

.c-toc__title {
	font-family: var(--font-heading);
	font-size: var(--fs-sub);
	font-weight: var(--fw-mid);
	letter-spacing: 0.06em;
	color: var(--c-blue);
	margin-block-end: 20px;
	font-stretch: var(--fst-head);
}

.c-toc__list {
	display: grid;
	gap: 12px;
}

.c-toc__list .c-toc__list {
	margin-block-start: 12px;
	padding-inline-start: 20px;
	border-left: 1px solid var(--c-rule);
}

.c-toc__link {
	display: block;
	line-height: 1.7;
	transition: color 0.25s var(--ease);
}

.c-toc__link:hover {
	color: var(--c-blue);
}

.c-toc__item--h3 > .c-toc__link {
	font-size: var(--fs-meta);
	color: var(--c-muted);
}

.c-toc__item--h3 > .c-toc__link:hover {
	color: var(--c-blue);
}

/* --- 本文 --- */
.c-content {
	font-size: var(--fs-body);
	line-height: 2.05;
	/* 箱組（両端揃え）。行末をそろえつつ禁則処理は守る。
	   auto-phrase だと文節で切れて右端が不揃いになるため、本文では通常の
	   折り返しに戻し、justify で両端をそろえる。 */
	text-align: justify;
	text-justify: inter-character;
	word-break: normal;
	line-break: strict;
}

/* 要約（導入）も同じく両端をそろえる。 */
.c-article__summary {
	text-align: justify;
	text-justify: inter-character;
	word-break: normal;
	line-break: strict;
}

.c-content > * + * {
	margin-block-start: 1.75em;
}

.c-content h1,
.c-content h2,
.c-content h3,
.c-content h4 {
	font-weight: var(--fw-head);
	font-stretch: var(--fst-head);
	line-height: 1.5;
	letter-spacing: 0.03em;
	scroll-margin-top: calc(var(--header-h) + 24px);
}

/* 大見出し（h1 / h2）は青背景＋白文字で統一する。
   見出しと本文でサイズ・間隔に差をつける。 */
.c-content h1,
.c-content h2 {
	font-size: var(--fs-heading);
	font-weight: var(--fw-head);
	color: var(--c-white);
	background: var(--c-blue);
	padding: 0.6em 0.8em;
	margin-block-start: 2.4em;
	margin-block-end: 1em;
	line-height: 1.5;
}

/* 中見出し（h3）は青文字＋左のアクセント罫。 */
.c-content h3 {
	font-size: var(--fs-sub);
	margin-block-start: 2em;
	margin-block-end: 0.8em;
	padding-inline-start: 0.6em;
	color: var(--c-blue);
	border-left: 4px solid var(--c-blue);
}

.c-content h4 {
	font-size: var(--fs-body);
	margin-block-start: 1.8em;
	margin-block-end: 0.6em;
}

.c-content a:not(.c-btn) {
	color: var(--c-blue);
	border-bottom: 1px solid currentColor;
	padding-block-end: 1px;
}


.c-content ul,
.c-content ol {
	padding-inline-start: 1.5em;
}

.c-content ul {
	list-style: disc;
}

.c-content ol {
	list-style: decimal;
}

.c-content li {
	margin-block-start: 0.6em;
}

.c-content li::marker {
	color: var(--c-blue);
}

.c-content blockquote {
	padding-inline-start: 1.5em;
	border-left: 2px solid var(--c-blue);
	color: var(--c-muted);
}

.c-content figure {
	margin-inline: 0;
}

/* 本文内のメディアは列幅を超えない（スマホの横はみ出し防止）。
   取り込み記事のフルサイズ画像や、WordPress 埋め込み（他記事カード）の
   iframe（既定 500px）が画面幅を超えて、ページごと横にずれるのを防ぐ。 */
.c-content img,
.c-content video,
.c-content iframe,
.c-content embed,
.c-content object {
	max-width: 100%;
}

.c-content img {
	height: auto;
}

/* WordPress 埋め込み（他記事カード）。iframe は wp-embed.js が幅を動的に
   決めるため列幅を無視して少しはみ出すことがある。枠で刈り取って収める
   （埋め込みは表と違いスクロール不要なので hidden で問題ない）。 */
.c-content .wp-block-embed,
.c-content .wp-block-embed__wrapper {
	max-width: 100%;
	/* position:relative にして、中の絶対配置 iframe（非表示のフォールバック）を
	   この枠の中に閉じ込め、overflow で刈り取る。これをしないと絶対配置の
	   iframe が画面右にはみ出し、ページごと横スクロールしてしまう。 */
	position: relative;
	overflow: hidden;
}

.c-content .wp-block-embed iframe,
.c-content .wp-embedded-content {
	width: 100% !important;
	max-width: 100% !important;
}

.c-content figcaption {
	margin-block-start: 12px;
	font-size: var(--fs-meta);
	color: var(--c-muted);
	line-height: 1.7;
}

.c-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-meta);
}

.c-content th,
.c-content td {
	border: 1px solid var(--c-rule);
	padding: 12px 16px;
	text-align: left;
}

.c-content th {
	background: var(--c-blue-wash);
	font-weight: var(--fw-mid);
}

.c-content code {
	font-family: var(--font-jp);
	background: var(--c-blue-wash);
	padding: 2px 6px;
}

/* 幅の広い要素は自身の中でスクロールさせる */
.c-content .wp-block-table,
.c-content .c-tablewrap,
.c-content pre {
	overflow-x: auto;
	/* スクロールできることが分かるよう、はみ出す側に薄い影を出す。 */
	background:
		linear-gradient(90deg, var(--c-white) 30%, rgba(255, 255, 255, 0)) left / 24px 100% no-repeat,
		linear-gradient(270deg, var(--c-white) 30%, rgba(255, 255, 255, 0)) right / 24px 100% no-repeat,
		radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.12), transparent) left / 12px 100% no-repeat,
		radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.12), transparent) right / 12px 100% no-repeat;
	background-attachment: local, local, scroll, scroll;
}

/* スマホでは表を折り返さず、文字を小さくして横並びを保つ。
   はみ出したぶんは表ごと横スクロールする（各セルが多行に折り返して
   縦に間延びするのを防ぐ）。 */
@media (max-width: 767px) {
	.c-content table {
		font-size: 12px;
		width: auto;
	}

	.c-content th,
	.c-content td {
		white-space: nowrap;
		padding: 8px 12px;
		/* セル内は禁則だけ守り、両端揃えは解除（短いセルで間延びしないため）。 */
		text-align: left;
	}
}

/* 記事内バナー */
.c-banner {
	display: block;
	border-bottom: 0;
	transition: opacity 0.25s var(--ease);
}

.c-banner:hover {
	opacity: 0.9;
}

.c-banner img {
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------
   記事内 CTA（集客導線）
   ------------------------------------------------------------------ */
.c-cta {
	margin-block: var(--space-block);
}

/* 本命：無料相談（青ベタのカード） */
.c-cta--soudan {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--gap);
	padding: clamp(24px, 4vw, 40px);
	background: var(--c-blue);
	color: var(--c-white);
	border-radius: var(--radius-m);
	box-shadow: 0 12px 30px rgba(0, 102, 254, 0.18);
}

/* 背景画像あり。写真を敷き、上にブランド色の半透明を重ねて文字を読みやすく保つ。 */
.c-cta--soudan.has-bg {
	position: relative;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.c-cta--soudan.has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 45, 120, 0.55), rgba(0, 45, 120, 0.78));
}

.c-cta--soudan.has-bg > * {
	position: relative;
	z-index: 1;
}

.c-cta__eyebrow {
	font-family: var(--font-heading);
	font-size: var(--fs-meta);
	font-weight: var(--fw-mid);
	letter-spacing: var(--ls-label);
	color: var(--c-muted-on-blue);
	margin-block-end: 10px;
}

.c-cta__lead {
	font-family: var(--font-heading);
	font-size: var(--fs-sub);
	font-weight: var(--fw-head);
	line-height: 1.5;
	letter-spacing: 0.03em;
	font-stretch: var(--fst-head);
}

.c-cta__foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	flex-shrink: 0;
}

.c-cta__btn {
	white-space: nowrap;
}

.c-cta__urgency {
	font-family: var(--font-heading);
	font-size: var(--fs-meta);
	font-weight: var(--fw-mid);
	letter-spacing: 0.04em;
}

.c-cta--soudan .c-cta__urgency::before {
	content: "\1F4CC";
	margin-inline-end: 6px;
}

/* 低摩擦：公式 LINE（白地・枠線の軽いカード） */
.c-cta--line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
	padding: clamp(18px, 3vw, 28px);
	border: 1px solid var(--c-rule);
	border-radius: var(--radius-m);
	background: var(--c-blue-wash);
}

/* LINE バッジも角丸に。 */
.c-cta__line-badge,
.c-ctabar__badge {
	border-radius: var(--radius-s);
}

/* 記事内バナー画像も角丸で枠に収める。 */
.c-banner {
	border-radius: var(--radius-m);
	overflow: hidden;
}

.c-cta__line-head {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.c-cta__line-badge,
.c-ctabar__badge {
	display: inline-grid;
	place-items: center;
	padding: 6px 10px;
	background: #06c755; /* LINE ブランドカラー */
	color: var(--c-white);
	font-family: var(--font-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	flex-shrink: 0;
}

.c-cta--line .c-cta__lead {
	font-size: var(--fs-lead);
	font-weight: var(--fw-mid);
	color: var(--c-black);
}

/* ボタンだけの軽い CTA（手動挿入用） */
.c-cta--btnonly {
	display: flex;
	justify-content: center;
}

/* ブロックエディター内ではリンク色がボタンの文字色を上書きして「青地に青文字」に
   なってしまう。詳細度を上げて、どの文脈でも読める配色を保証する。 */
.c-cta--btnonly a.c-btn {
	color: var(--c-white);
}

.c-cta--btnonly a.c-btn:hover {
	color: var(--c-blue);
}

.c-cta--btnonly a.c-btn--ghost {
	color: var(--c-blue);
}

.c-cta--btnonly a.c-btn--ghost:hover {
	color: var(--c-white);
}

/* ---------------------------------------------------------------------
   入試フロー：ステップ（縦の流れ）パターン
   ------------------------------------------------------------------ */
.c-content .c-flow {
	list-style: none;
	margin-inline: 0;
	padding-inline: 0;
	counter-reset: bam-flow;
}

.c-content .c-flow > li {
	position: relative;
	margin-inline: 0;
	margin-block: 0;
	padding: 20px 20px 20px 64px;
	border: 1px solid var(--c-rule);
	background: var(--c-white);
}

.c-content .c-flow > li + li {
	margin-block-start: 28px;
}

/* 番号バッジ */
.c-content .c-flow > li::before {
	counter-increment: bam-flow;
	content: counter(bam-flow);
	position: absolute;
	inset-block-start: 18px;
	inset-inline-start: 18px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	background: var(--c-blue);
	color: var(--c-white);
	font-family: var(--font-heading);
	font-weight: var(--fw-head);
	font-size: 15px;
}

/* 下向きの矢印（次のステップへの流れ） */
.c-content .c-flow > li:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-block-end: -22px;
	inset-inline-start: 34px;
	width: 2px;
	height: 22px;
	background: var(--c-blue);
}

/* ---------------------------------------------------------------------
   追従 CTA バー（画面下に固定）
   ------------------------------------------------------------------ */
.c-ctabar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 40;
	display: flex;
	gap: 1px;
	background: var(--c-rule);
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
}

.c-ctabar__btn {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 56px;
	padding: 10px 12px;
	white-space: nowrap;
	font-family: var(--font-heading);
	font-size: var(--fs-meta);
	font-weight: var(--fw-mid);
	letter-spacing: 0.04em;
	transition: opacity 0.25s var(--ease);
}

.c-ctabar__btn:hover {
	opacity: 0.92;
}

.c-ctabar__btn--soudan {
	background: var(--c-blue);
	color: var(--c-white);
}

.c-ctabar__btn--line {
	background: var(--c-white);
	color: var(--c-black);
	flex-grow: 0.6;
}

.c-ctabar__badge {
	padding: 4px 8px;
}

/* PC では控えめに右下へ寄せ、本文の邪魔をしない */
@media (min-width: 768px) {
	.c-ctabar {
		inset-inline: auto 24px;
		inset-block-end: 24px;
		gap: 12px;
		background: transparent;
		box-shadow: none;
	}

	.c-ctabar__btn {
		min-height: 52px;
		padding-inline: 24px;
		border-radius: var(--radius-pill);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	}

	.c-ctabar__btn--line {
		border: 1px solid var(--c-rule);
	}
}

/* スマホでは追従バーのぶん、下に余白を足して重なりを防ぐ */
@media (max-width: 767px) {
	body {
		padding-block-end: 56px;
	}
}

/* ---------------------------------------------------------------------
   お問い合わせ
   ------------------------------------------------------------------ */
.c-contact__rate {
	font-family: var(--font-heading);
	font-size: var(--fs-sub);
	font-weight: var(--fw-mid);
	letter-spacing: 0.04em;
	margin-block-end: 24px;
	font-stretch: var(--fst-head);
}

.c-contact__statement {
	font-size: var(--fs-lead);
	line-height: 2;
	max-width: 40em;
	margin-block-end: var(--space-block);
}

.c-contact__actions {
	display: flex;
	align-items: center;
	gap: var(--gap);
	flex-wrap: wrap;
}

.c-contact__tel {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	font-family: var(--font-jp);
	font-size: var(--fs-sub);
	letter-spacing: 0.04em;
}

.c-contact__tel-label {
	font-size: var(--fs-meta);
	letter-spacing: var(--ls-label);
}

/* ---------------------------------------------------------------------
   ページネーション
   ------------------------------------------------------------------ */
.c-pagination {
	margin-block-start: var(--space-section);
}

.c-pagination .nav-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

.c-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 12px;
	border: 1px solid var(--c-rule);
	font-family: var(--font-jp);
	font-size: var(--fs-meta);
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
		border-color 0.25s var(--ease);
}

.c-pagination a.page-numbers:hover {
	border-color: var(--c-blue);
	color: var(--c-blue);
}

.c-pagination .page-numbers.current {
	background: var(--c-blue);
	border-color: var(--c-blue);
	color: var(--c-white);
}

.c-pagination .page-numbers.dots {
	border-color: transparent;
}

/* ---------------------------------------------------------------------
   記事なしの表示
   ------------------------------------------------------------------ */
.c-empty {
	padding-block: var(--space-block);
	color: var(--c-muted);
}

/* ---------------------------------------------------------------------
   フッター
   ------------------------------------------------------------------ */
.c-footer {
	background: var(--c-blue);
	color: var(--c-white);
	padding-block: var(--space-section) var(--space-block);
}

.c-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
	gap: var(--space-block) var(--gap);
}

@media (max-width: 900px) {
	.c-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.c-footer__grid {
		grid-template-columns: 1fr;
	}
}


.c-footer__title {
	font-family: var(--font-heading);
	font-size: var(--fs-meta);
	font-weight: var(--fw-mid);
	letter-spacing: var(--ls-label);
	margin-block-end: 20px;
	font-stretch: var(--fst-head);
}

.c-footer__list {
	display: grid;
	gap: 12px;
}

.c-footer__link {
	font-size: var(--fs-meta);
	color: var(--c-muted-on-blue);
	line-height: 1.6;
	transition: color 0.25s var(--ease);
}

.c-footer__link:hover {
	color: var(--c-white);
}

.c-footer__sns {
	display: flex;
	gap: 16px;
	margin-block-start: var(--space-block);
}

.c-footer__sns a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--c-rule-on-blue);
	border-radius: 50%;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.c-footer__sns a:hover {
	background: var(--c-white);
	color: var(--c-blue);
}

.c-footer__sns svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.c-footer__bottom {
	margin-block-start: var(--space-block);
	padding-block-start: 24px;
	border-top: 1px solid var(--c-rule-on-blue);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--gap);
	flex-wrap: wrap;
	font-size: var(--fs-meta);
	color: var(--c-muted-on-blue);
}

.c-footer__official {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-heading);
	letter-spacing: 0.06em;
	color: var(--c-white);
	border-bottom: 1px solid currentColor;
	padding-block-end: 3px;
}

/* =====================================================================
   検索（ヘッダーの虫めがね / TOP / 結果ページ）
   ================================================================== */
.c-search-toggle {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: var(--radius-pill);
	color: var(--c-blue);
	background: transparent;
	border: 1px solid transparent;
	flex-shrink: 0;
	transition: background-color 0.25s var(--ease);
}

/* スマホのメニュー内では、検索アイコンの右に「検索」ラベルを添える（横並び）。 */
@media (max-width: 1024px) {
	.c-search-toggle {
		display: flex;
		align-items: center;
		width: auto;
		justify-content: flex-start;
		gap: 10px;
		padding-block: 20px;
		border-radius: 0;
		border-top: 1px solid var(--c-rule);
	}
	.c-search-toggle::after {
		content: "検索";
		font-family: var(--font-heading);
		font-weight: var(--fw-mid);
		font-size: var(--fs-sub);
		color: var(--c-blue);
	}
}

.c-search-toggle:hover {
	background: var(--c-blue-wash);
}

.c-icon-search {
	width: 20px;
	height: 20px;
	display: block;
}

.c-search-panel {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	background: var(--c-white);
	border-bottom: 1px solid var(--c-rule);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
	padding-block: 18px;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.c-search-panel.is-open {
	opacity: 1;
	transform: translateY(0);
}

.c-search-panel[hidden] {
	display: none;
}

/* 検索フォーム */
.c-search {
	display: flex;
	gap: 8px;
}

.c-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 14px 18px;
	font-size: var(--fs-body);
	border: 1px solid var(--c-rule);
	border-radius: var(--radius-pill);
	background: var(--c-white);
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.c-search__input:focus {
	outline: none;
	border-color: var(--c-blue);
	box-shadow: 0 0 0 3px rgba(0, 102, 254, 0.14);
}

.c-search__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	font-family: var(--font-heading);
	font-weight: var(--fw-mid);
	letter-spacing: 0.06em;
	background: var(--c-blue);
	color: var(--c-white);
	border: 1px solid var(--c-blue);
	border-radius: var(--radius-pill);
	white-space: nowrap;
	flex-shrink: 0;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.c-search__btn:hover {
	background: var(--c-white);
	color: var(--c-blue);
}

.c-search__btn .c-icon-search {
	width: 18px;
	height: 18px;
}

/* 狭い画面では検索ボタンの文字を省いてアイコンだけに */
@media (max-width: 520px) {
	.c-search__btn-label {
		display: none;
	}
	.c-search__btn {
		padding: 12px 16px;
	}
}

/* TOP の検索ブロック */
.l-section--search {
	padding-block: clamp(40px, 6vw, 72px);
}

.c-searchbox {
	max-width: 720px;
	margin-inline: auto;
}

.c-search--hero .c-search__input {
	padding: 18px 24px;
	font-size: var(--fs-lead);
}

.c-searchbox--results {
	max-width: 640px;
	margin-block-end: var(--space-block);
}

/* キーワードチップ（旧サイトのタグ雲にあたる） */
.c-keywords {
	margin-block-start: clamp(28px, 4vw, 44px);
	text-align: center;
}

.c-keywords__label {
	display: block;
	font-family: var(--font-heading);
	font-weight: var(--fw-mid);
	letter-spacing: 0.1em;
	color: var(--c-blue);
	margin-block-end: 16px;
}

.c-keywords__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	list-style: none;
	padding: 0;
}

.c-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 8px 16px;
	border: 1px solid var(--c-rule);
	border-radius: var(--radius-pill);
	font-size: var(--fs-meta);
	color: var(--c-black);
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.c-chip:hover {
	border-color: var(--c-blue);
	color: var(--c-blue);
	background: var(--c-blue-wash);
}

.c-chip__name {
	font-weight: var(--fw-mid);
}

.c-chip__count {
	font-size: 12px;
	color: var(--c-muted);
}

.c-chip:hover .c-chip__count {
	color: var(--c-blue);
}

/* 大学「基本データ」表：1 列目をラベル列にする */
.c-content .bam-datatable th {
	width: 34%;
	white-space: nowrap;
	vertical-align: top;
	text-align: left;
}

@media (max-width: 520px) {
	.c-content .bam-datatable th {
		width: 42%;
	}
}

/* モバイルメニュー内のお問い合わせボタンも角丸に */
.c-nav-contact__btn {
	border-radius: var(--radius-s);
}

/* 旧サイト埋め込みから変換した「関連記事」内部リンク */
.c-content .bam-related-link {
	margin-block: 1em;
	padding: 14px 18px;
	border: 1px solid var(--c-rule);
	border-radius: var(--radius-s);
	background: var(--c-blue-wash);
	font-weight: var(--fw-mid);
}

.c-content .bam-related-link a {
	border-bottom: 0;
}

/* =====================================================================
   対談・合格体験記の吹き出し（アイコン付き）
   ================================================================== */
.c-speech {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-block: 1.6em;
}

.c-speech__avatar {
	flex-shrink: 0;
	margin: 0;
}

.c-speech__avatar img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--c-blue-wash);
	background: var(--c-blue-wash);
}

.c-speech__body {
	flex: 1 1 auto;
	min-width: 0;
}

.c-speech__name {
	margin: 0 0 6px;
	font-family: var(--font-heading);
	font-size: var(--fs-meta);
	font-weight: var(--fw-mid);
	letter-spacing: 0.04em;
	color: var(--c-muted);
}

.c-speech__bubble {
	position: relative;
	margin: 0;
	padding: 14px 18px;
	background: var(--c-blue-wash);
	border-radius: 14px;
	line-height: 1.9;
}

/* しっぽ（左向き） */
.c-speech__bubble::before {
	content: "";
	position: absolute;
	inset-block-start: 16px;
	inset-inline-start: -7px;
	border-width: 6px 8px 6px 0;
	border-style: solid;
	border-color: transparent var(--c-blue-wash) transparent transparent;
}

/* 右（話し手・合格者）は左右反転し、青の吹き出しにする */
.c-speech--right {
	flex-direction: row-reverse;
}

.c-speech--right .c-speech__name {
	text-align: right;
}

.c-speech--right .c-speech__bubble {
	background: var(--c-blue-wash);
	color: inherit;
}

.c-speech--right .c-speech__bubble::before {
	inset-inline-start: auto;
	inset-inline-end: -7px;
	border-width: 6px 0 6px 8px;
	border-color: transparent transparent transparent var(--c-blue-wash);
}

/* CTA ブロックのリンク先未設定時の目印（編集画面用） */
.bam-cta-empty {
	padding: 16px 20px;
	border: 1px dashed var(--c-rule);
	border-radius: var(--radius-s);
	color: var(--c-muted);
	font-size: var(--fs-meta);
	text-align: center;
}

/* =====================================================================
   取り込み記事の会話吹き出し（旧 DigiPress balloon）
   旧サイトの dp_block_balloon マークアップに、テーマ側で吹き出しの見た目を与える。
   これが無いと、アバター画像が原寸で大きく出て吹き出しにならない。
   ================================================================== */
.dp_block_balloon {
	margin-block: 1.4em;
}

.dp_block_balloon .deb-speech-balloon__inner {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.dp_block_balloon .bl_avatar {
	flex-shrink: 0;
	width: 68px;
	text-align: center;
}

.dp_block_balloon .bl_avatar figure {
	margin: 0;
}

.dp_block_balloon .bl_avatar .avatar_img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--c-blue-wash);
	display: block;
	margin-inline: auto;
}

.dp_block_balloon.is-avatar-shadow .bl_avatar .avatar_img {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.dp_block_balloon .bl_avatar .bl_name {
	margin-block-start: 5px;
	font-family: var(--font-heading);
	font-size: 11px;
	line-height: 1.35;
	font-weight: var(--fw-mid);
	color: var(--c-muted);
	word-break: auto-phrase;
}

.dp_block_balloon .bl_area {
	flex: 1 1 auto;
	min-width: 0;
}

.dp_block_balloon .bl_area_content {
	position: relative;
	padding: 14px 18px;
	background: var(--c-blue-wash);
	border-radius: 14px;
	line-height: 1.9;
}

/* しっぽ（アバター側へ向ける） */
.dp_block_balloon .bl_area_content::before {
	content: "";
	position: absolute;
	inset-block-start: 18px;
	inset-inline-start: -7px;
	border-width: 6px 8px 6px 0;
	border-style: solid;
	border-color: transparent var(--c-blue-wash) transparent transparent;
}

.dp_block_balloon .bl_area_content > *:first-child {
	margin-block-start: 0;
}

.dp_block_balloon .bl_area_content > *:last-child {
	margin-block-end: 0;
}

/* 右寄せ（pos-r）は左右反転し青の吹き出しに（現状の取り込みは全て左だが将来用） */
.dp_block_balloon.pos-r .deb-speech-balloon__inner {
	flex-direction: row-reverse;
}

/* 右（生徒）も薄い吹き出しにする（青ベタは眩しいという指摘のため）。
   左右の違いは位置としっぽの向きで示す。 */
.dp_block_balloon.pos-r .bl_area_content {
	background: var(--c-blue-wash);
	color: inherit;
}

.dp_block_balloon.pos-r .bl_area_content::before {
	inset-inline-start: auto;
	inset-inline-end: -7px;
	border-width: 6px 0 6px 8px;
	border-color: transparent transparent transparent var(--c-blue-wash);
}

/* =====================================================================
   FAQ（よくある質問）
   ================================================================== */
.c-faq {
	margin-block-start: var(--space-block);
	padding-block-start: var(--space-block);
	border-top: 1px solid var(--c-rule);
}

.c-faq__list {
	margin-block-start: var(--gap);
	display: grid;
	gap: 16px;
}

.c-faq__item {
	border: 1px solid var(--c-rule);
	border-radius: var(--radius-m);
	padding: clamp(18px, 3vw, 26px);
}

.c-faq__q {
	position: relative;
	padding-inline-start: 32px;
	font-family: var(--font-heading);
	font-size: var(--fs-sub);
	font-weight: var(--fw-mid);
	line-height: 1.6;
	color: var(--c-blue);
}

.c-faq__q::before {
	content: "Q";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: -2px;
	font-weight: var(--fw-head);
}

.c-faq__a {
	margin: 12px 0 0;
	padding-inline-start: 32px;
	position: relative;
	line-height: 2;
}

.c-faq__a::before {
	content: "A";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	font-family: var(--font-heading);
	font-weight: var(--fw-head);
	color: var(--c-muted);
}

.c-faq__a > *:first-child {
	margin-block-start: 0;
}

/* =====================================================================
   関連記事
   ================================================================== */
.l-related {
	background: var(--c-blue-wash);
}