/*
Theme Name: freestudy
Theme URI: https://freestudy.style/
Template: arkhe
Version: 1.1.0
Description: Arkhe の子テーマ。freestudy.style 専用のカスタマイズをここに集約する。親テーマ(Arkhe)が更新されても、このディレクトリの変更は消えない。
Author: freestudy
Text Domain: freestudy
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ==========================================================================
   このファイルの使い方

   - 親テーマ(Arkhe)の CSS の「後」に読み込まれるので、同じ詳細度なら勝つ。
   - 色やフォントは Arkhe の CSS 変数を上書きするのが最も安全。
     直接 color を指定するより、変数を書き換えた方が全体の統一が崩れない。
   - 生の色コードは 1. のトークンにだけ書く。以降のルールは変数を参照する。

   【出力順について】
   外観 > カスタマイズ > 追加CSS は、この style.css より「後」に出力される。
   同じ詳細度では追加CSS が勝つので、追加CSS には何も置かない運用にしている
   （2026-08-17 に中身を全てこのファイルへ移設した）。追加CSS に書き足すと
   このファイルの指定が黙って効かなくなるため、調整は必ずここで行うこと。

   よく使う Arkhe の CSS 変数:
     --ark-font_size        本文の文字サイズ
     --ark-letter_spacing   字間
     --ark-width--article   記事カラムの横幅
     --ark-color--main      サイトのメインカラー
     --ark-color--text      本文の文字色
     --ark-color--border    罫線の色
   ========================================================================== */


/* ==========================================================================
   1. デザイントークン

   色・影・角丸をここで一元管理する。以降のルールは原則この変数を参照し、
   生の色コードを直接書かない。ブランドカラーを変えたくなったら、
   このブロックの1行を直すだけでサイト全体に反映される。
   ========================================================================== */

:root {
	/* --- ブランドカラー ---
	   かつては #013baa / rgb(46,76,178) / #2180c5 / #2F5EC3 / #4484ce の
	   5種類の青が同じサイトに混在していた。「素人っぽさ」の一因なので
	   1色に統一してある。変えるならここ1行を直す。

	   その1色は、鮮やかなロイヤルブルー(#013baa)から彩度を落とした
	   深い紺(#12305c)へ移した。彩度の高い青は「元気・親しみ・安さ」の側の
	   印象を持ち、面積を取るほど落ち着きが失われる。紺は同じ青の記憶色を
	   保ったまま、広い面に敷いても浮つかない。 */
	--fs-color--brand:        #12305c;
	--fs-color--brand--dark:  #0a1f3f;
	/* 暗い地の上（ドロワー・CTA帯など）で紺は沈むため、明るい側も持つ */
	--fs-color--brand--light: #3b5d92;
	/* 面の地に敷く淡い色。青を薄めた水色ではなく、わずかに黄を含む
	   アイボリーにする。紺とのあいだに色温度の差が生まれ、同じ明度でも
	   面と面が分かれて見える（紙の白と刷り色の関係）。
	   完全な無彩色グレー(#f7f7f7)は「とりあえず置いた色」に見える。 */
	--fs-color--brand--pale:  #f6f3ec;

	/* カードや目次の細い罫線。無彩色の灰色は面の中で浮いて見えるので、
	   ブランドの紺を薄く透かした線にする。 */
	--fs-color--brand--line:  rgb(18 48 92 / 14%);

	/* 見出し・フォーム見出しなどに使っている濃紺 */
	--fs-color--ink:          #101d38;
	/* 本文より一段落とす補助文字（リード文・注記） */
	--fs-color--muted:        #5a6274;

	/* --- ゴールド ---
	   面には塗らない。1px の罫線・見出し下のバー・小さなラベルだけに使う。
	   金は面積を取った瞬間に安く見える色で、線として置いたときだけ効く。 */
	--fs-color--gold:        #a98545;
	--fs-color--gold--light: #c8a869;
	--fs-color--gold--line:  rgb(169 133 69 / 55%);
	/* 金を「線」ではなく「文字」に使うとき用。#a98545 は白地に対して
	   コントラスト比 3.1 しかなく、小さい文字だと WCAG AA(4.5)に届かない。
	   文字に使うならこちらを使う（白地 5.0 / アイボリー地 4.6）。 */
	--fs-color--gold--dark:  #8a6a33;

	/* --- アクセント（申し込みボタン・必須ラベル） ---
	   オレンジ(#ffaa56)はセール札の色で、紺の落ち着きと噛み合わない。
	   ゴールドへ寄せ、強さは残したまま温度だけ下げる。 */
	--fs-color--accent:       var(--fs-color--gold);
	--fs-color--accent--dark: var(--fs-color--gold--dark);

	/* --- 影 ---
	   影は要素を浮かせる道具だが、浮かせるほど画面は騒がしくなる。
	   面の切り分けは 1px の罫線に任せ、影は輪郭をごく浅く締めるだけに使う。
	   落ち着いた見え方は、影の強さではなく余白と罫線の細さから出る。
	   無彩色の影は灰色が濁って見えるため、紺を含ませる。 */
	--fs-shadow--sm: 0 1px 2px rgb(16 29 56 / 7%);
	--fs-shadow--md: 0 1px 3px rgb(16 29 56 / 7%);
	--fs-shadow--card:
		0 1px 2px rgb(16 29 56 / 5%),
		0 18px 40px -32px rgb(16 29 56 / 40%);
	/* 同じ形のカードを何十枚も積む場所用。輪郭を締めるだけの浅い影。 */
	--fs-shadow--flat: 0 1px 2px rgb(16 29 56 / 5%);

	/* --- 角丸 ---
	   大きな角丸は「親しみやすさ」の記号で、そのぶん柔らかく軽く見える。
	   角を立てると紙面や箔押しの矩形に近づき、輪郭が硬く締まる。
	   ピル型（999px）は使わない。ボタンも矩形に寄せる。 */
	--fs-radius--sm: 2px;
	--fs-radius--md: 2px;
	--fs-radius--lg: 3px;

	/* --- 動き ---
	   時間はゆっくり取る。速い動きは機敏さを演出するが、落ち着きとは
	   相反する。ホバーで跳ねさせるのもやめ、色と線だけを変える。 */
	--fs-ease: cubic-bezier(.25, .46, .45, .94);
	--fs-dur:  .45s;

	/* --- 書体 ---
	   Arkhe の既定は "Helvetica Neue","Arial","Hiragino Kaku Gothic ProN",
	   "Hiragino Sans","Meiryo" で、Windows では最後まで落ちて【メイリオ】になる。
	   メイリオは字面が大きく字間も広いため、同じ文章でも一段安く見える。
	   ヒラギノ→BIZ UDP→游ゴシック→system-ui の順に拾い直す。

	   Web フォント（TypeSquare）は使わない。日本語 Web フォントは数百KB〜数MBあり、
	   表示速度を削ってまで得るほどの差ではないため。 */
	--fs-font--sans:
		"Hiragino Sans", "Hiragino Kaku Gothic ProN",
		"BIZ UDPGothic", "Noto Sans JP",
		"Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック",
		system-ui, -apple-system, "Segoe UI", sans-serif;

	/* 見出しの明朝。日本語で「格」を作る最短の手段が明朝で、
	   ゴシックの見出しは情報としては読みやすいが均質で、印象が残らない。
	   本文は読み速度を優先してゴシックのままにし、見出しだけ明朝にする
	   （全文を明朝にすると画面では細く読みづらい）。
	   ここも Web フォントは使わず、OS 標準の明朝を順に拾う。
	   Windows は游明朝→BIZ UDP明朝→MS P明朝の順で必ずどれかに当たる。 */
	--fs-font--serif:
		"Hiragino Mincho ProN", "Hiragino Mincho Pro",
		"Yu Mincho", "YuMincho", "游明朝",
		"BIZ UDPMincho", "Noto Serif JP",
		"MS PMincho", serif;

	/* 実績の数字。和文フォントの数字は字幅が広く3桁4桁が間延びするため
	   欧文に寄せる。見出しが明朝になったのに合わせ、数字もセリフ体にする
	   （サンセリフの数字だけが残ると、そこだけ別のサイトに見える）。 */
	--fs-font--num:
		"Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", serif;

	/* --- 余白 ---
	   移行前は clamp() が16種類バラバラに直書きされていた。値が揃っていない余白は
	   「行き当たりばったりに調整した跡」として読まれるので、4段階に集約している。

	   値は全体に一段広げた。余白は最も安上がりな高級感の作り方で、
	   同じ要素・同じ色でも、間を空けるほど一つひとつが重く扱われて見える。
	   逆に詰まったページは、情報を詰め込むことが目的に見えてしまう。
	   新しく余白を足すときは、この4つのどれかを使う。増やさない。 */
	--fs-space--section: clamp(4rem, 10vw, 7.5rem);     /* セクションの上下 */
	--fs-space--block:   clamp(3rem, 7vw, 5rem);        /* ブロックどうしの間 */
	--fs-space--item:    clamp(2rem, 4.5vw, 3.25rem);   /* 要素どうしの間・カードの内側 */
	--fs-space--card:    clamp(1.5rem, 3.2vw, 2.25rem); /* 小さい囲みの内側 */

	/* --- 文字サイズ ---
	   見出しも同様にバラバラだったので、役割ごとに5段へ固定する。

	   上限を一段下げてある。大きな文字は目を引くが「声が大きい」印象になり、
	   余白と字間で作った落ち着きを打ち消す。見出しは大きさではなく、
	   周りの余白と明朝の字面で見せる。 */
	/* セクションの大見出し。52px から 38px へ落とした。大手企業サイトの
	   節見出しはおおむね 32〜40px で、それ以上は見出しが主役になってしまう。
	   ページの中で最も大きい文字はヒーローの一文だけでよい。 */
	--fs-text--display:  clamp(1.6rem, 4vw, 2.4rem);     /* セクションの大見出し */
	--fs-text--headline: clamp(1.3rem, 3.8vw, 2rem);     /* CTA帯の一文 */
	--fs-text--lead:     clamp(1.1rem, 3vw, 1.6rem);     /* 見出し直後の一文 */
	--fs-text--h3:       clamp(1.15rem, 2.8vw, 1.5rem);  /* サービス名などの小見出し */
	--fs-text--small:    .875rem;                        /* 注記・キャプション */

	/* 本文の最大幅。1行が長すぎると読み手が行を見失い、
	   「レイアウトを考えていないページ」に見える。全角40字前後で折る。 */
	--fs-width--text: 42rem;
}


/* --------------------------------------------------------------------------
   1-1. Arkhe 側の変数の上書き

   カスタマイザーの「メインカラー」は #2180c5 のまま残っているが、
   ブランドカラーは上の --fs-color--brand が正とする。カスタマイザーを
   直接書き換えないのは、色の決定をこのファイル1か所に集めたいため。
   （カスタマイザーの色見本と実際の表示色が違う点だけ注意）
   -------------------------------------------------------------------------- */

:root {
	--ark-color--main: var(--fs-color--brand);
	--ark-color--link: var(--fs-color--brand);

	/* Arkhe は全要素の font-family を var(--ark-font_family) 経由で引いているので、
	   この1行だけでサイト全体の書体が入れ替わる。個別の font-family は書かない。 */
	--ark-font_family: var(--fs-font--sans);

	/* フッターは淡いブランド地 + 濃い文字。移行前は #2F5EC3 のベタ塗りを
	   !important で当てていたが、リンクもコピーライトも白抜きの細い帯で、
	   ロゴを置く余地が無かった。地を淡くして情報を置けるようにする。 */
	--ark-color--footer_bg:  var(--fs-color--brand--pale);
	--ark-color--footer_txt: #3a4253;
}


/* ==========================================================================
   2. 全体の基礎
   ========================================================================== */

/* 約物（、。「」（）・）のアキ詰め。
   日本語の約物は前後に半角ぶんの余白を持っているため、指定しないと
   「見出し、」のあとに不自然な穴が空く。palt を入れるかどうかが、
   プロが組んだ日本語ページかどうかの最も分かりやすい差になる。
   本文にも効くが、字が大きい見出しほど穴が目立つので効果が大きい。 */
body {
	font-feature-settings: "palt" 1;
}

/* 見出しは明朝で組む。日本語のページで「格」を最も安く作れるのが書体で、
   ゴシックの見出しは読みやすい代わりに均質で、読んだあとに何も残らない。
   本文はゴシックのまま（画面上の明朝は細く、長文だと読み速度が落ちる）。

   字間は palt で詰めたぶんを戻す指定も兼ねる。明朝は字面が細いぶん、
   ゴシックのときより広めに空けたほうが密度が釣り合う。

   line-height はここでは触らない。見出しの行間は各セクション側が
   1.15〜1.5 と役割ごとに決めており、一律の値で上書きすると
   検証済みのページ（Q&A・企業情報など）が黙って崩れるため。 */
h1, h2, h3 {
	font-family: var(--fs-font--serif);
	/* 明朝に 700 を当てると、字を持たないウェイトを OS が合成して
	   線が潰れる。600 までに留めて字形を保つ。 */
	font-weight: 600;
	letter-spacing: .08em;
}

/* 実績の数字を欧文フォント + 等幅数字で組む。
   tabular-nums は桁を縦に揃えるので、数字を並べたときに行が波打たない。 */
.fs-num {
	font-family: var(--fs-font--num);
	font-variant-numeric: tabular-nums;
	font-feature-settings: normal; /* 欧文に palt は不要 */
}

/* 記事の読みやすさ。本文コンテナは .c-postContent（Arkhe の記事本文ラッパー） */
.c-postContent {
	line-height: 2.05;
	letter-spacing: 0.04em;
}

/* 全幅セクションを縦に積むページ（トップ・サービス一覧・企業情報など）では、
   セクションどうしの間に余白を入れない。セクション自身が上下の余白を持つため。

   移行前の追加CSS は .c-postContent > * を一律 margin-top: 0 にしていた。
   そのため記事本文の段落と段落の間の余白まで消えており、投稿ページの本文が
   詰まって表示されていた。ここではセクションだけに絞る。 */
.c-postContent > .ark-block-section {
	margin-top: 0;
}

/* 淡い地のセクション（サイト共通の受け皿）。

   Arkhe Blocks のセクションブロックで #f7f7f7 を選んだ箇所は、本文側に
   インラインの background-color として焼き付いている。無彩色の灰は
   アイボリーの地（--fs-color--brand--pale）と並ぶと「汚れた白」に見えるので、
   ここで一律に敷き直す。本文側は background-image を持っていないため、
   こちらを重ねれば競合せずに勝てる（!important も詳細度の細工も要らない）。

   個別に別の地を当てている節（サービス一覧・事業詳細の帯）は、
   セレクタのクラスが1つ多いぶんそちらが勝つ。 */
.c-postContent .ark-block-section__color[style*="#f7f7f7"] {
	background-image: linear-gradient(
		180deg,
		#ffffff 0%,
		var(--fs-color--brand--pale) 12%,
		var(--fs-color--brand--pale) 100%
	);
}

/* 固定ページのコンテンツ上端の余白を詰める（Arkhe の既定は 3rem）。
   全幅セクションが先頭に来るページばかりなので、余白があると
   ヘッダーとセクションの間に白い帯ができてしまう。
   トップページは Arkhe 側が既に 0 にしている。 */
.l-content__body {
	margin-top: 0;
}

/* フォーカス表示。
   キーボード操作時に「今どこにいるか」を必ず見えるようにする。
   :focus-visible なのでマウス操作では出ない。 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--fs-color--brand);
	outline-offset: 2px;
}


/* ==========================================================================
   3. ヘッダー
   ========================================================================== */

/* 半透明ヘッダー。背景をぼかすと、下の要素が透けたときの濁りが消えて
   輪郭がはっきりする。下端の細い線はスクロール時の境界を明確にするため。

   トップページは Arkhe の「ヘッダー透過」設定が入っているが、動画の上に
   文字を直接置くと可読性が読めないので、透過ではなく擦りガラスにしている。 */
.l-header {
	background-color: rgb(255 255 255 / 88%);
	color: black !important;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid rgb(18 48 92 / 9%);
	transition: box-shadow var(--fs-dur) var(--fs-ease);
}

/* スクロールしてから影を出す。最初から影があると、ページ先頭で
   ヘッダーだけが浮いて見える。html[data-scrolled] は Arkhe が付ける。 */
[data-scrolled="true"] .l-header {
	box-shadow: 0 10px 30px -26px rgb(16 29 56 / 55%);
}

/* ロゴの書体を固定する。

   親テーマはロゴの器を「トップページなら h1、それ以外は div」で出し分ける
   （arkhe_logo_tag）。2章で h1〜h3 を明朝にしたため、ロゴを画像ではなく
   サイト名のテキストで出す設定に戻した瞬間、トップだけ明朝・他はゴシックに
   割れる。現状は画像ロゴなので実害は出ていないが、切り替えたときに
   気付けない類のずれなので、ここで先に潰しておく。 */
.l-header__logo {
	font-family: var(--fs-font--serif);
	font-weight: 600;
	letter-spacing: .12em;
}


/* --------------------------------------------------------------------------
   3-1. グローバルナビ（PC）

   ホバーと現在ページに、左から伸びる下線を出す。currentColor を使うので
   現在ページではブランド色の線、それ以外ではホバー色の線になる。
   -------------------------------------------------------------------------- */

.c-gnav__li > .c-gnav__a::after {
	position: absolute;
	right: 12px;
	bottom: 14px;
	left: 12px;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--fs-dur) var(--fs-ease);
	content: "";
}

.c-gnav__li:hover > .c-gnav__a::after,
.c-gnav__li.current-menu-item > .c-gnav__a::after,
.c-gnav__li.current-menu-ancestor > .c-gnav__a::after {
	transform: scaleX(1);
}

/* 現在ページはホバーしていなくてもブランド色にする。
   Arkhe は .-current というクラスを想定しているが、実際に出力されるのは
   WordPress 標準の current-menu-item なので、そちらに当てる。 */
.c-gnav__li.current-menu-item,
.c-gnav__li.current-menu-ancestor {
	color: var(--fs-color--brand);
}

@media (prefers-reduced-motion: reduce) {

	.c-gnav__li > .c-gnav__a::after {
		transition: none;
	}
}


/* --------------------------------------------------------------------------
   3-2. ヘッダーの CTA（「お問い合わせ」をボタンとして見せる）

   -cta クラスは functions.php が「お問い合わせ」のメニュー項目に付ける。
   ヘッダーに独自のボタンを差し込むのではなくメニュー項目を装飾するのは、
   同じ導線が2つ並ぶのを避けるため（メニューを直せば行き先も追従する）。
   -------------------------------------------------------------------------- */

.c-gnav__li.-cta {
	display: flex;
	align-items: center;
	margin-left: .5rem;
}

.c-gnav__li.-cta > .c-gnav__a {
	height: auto;
	padding: .78em 1.7em;
	/* 塗り + グラデ + 影の3枚重ねはボタンを「押させる」ための強い作りで、
	   ヘッダーに置くと画面のなかで一番騒がしい要素になる。
	   ベタ塗りの紺に金の細枠だけを添えて、静かなまま存在させる。 */
	border: 1px solid var(--fs-color--gold--line);
	border-radius: var(--fs-radius--md);
	color: #fff;
	font-size: .92em;
	font-weight: 600;
	letter-spacing: .08em;
	background-color: var(--fs-color--brand);
	transition: background-color var(--fs-dur) var(--fs-ease), border-color var(--fs-dur) var(--fs-ease);
}

/* 親の :hover が色をブランド色に変えてしまうので、白抜きを維持する */
.c-gnav__li.-cta:hover {
	color: #fff;
}

.c-gnav__li.-cta > .c-gnav__a:hover {
	border-color: var(--fs-color--gold);
	background-color: var(--fs-color--brand--dark);
}

/* ボタンには下線インジケーターを出さない */
.c-gnav__li.-cta > .c-gnav__a::after {
	display: none;
}

@media (prefers-reduced-motion: reduce) {

	.c-gnav__li.-cta > .c-gnav__a,
	.c-gnav__li.-cta > .c-gnav__a:hover {
		transform: none;
		transition: none;
	}
}


/* ==========================================================================
   4. ドロワーメニュー（SP）

   地は Arkhe 既定の黒 92%。そのままだとサイトの色と無関係な真っ黒なので、
   ブランドの青を含んだ紺に寄せる。区切り線とタップ領域は Arkhe 既定を使う。
   ========================================================================== */

.p-drawer {
	background-image: linear-gradient(160deg, rgb(10 31 63 / 97%) 0%, rgb(5 17 36 / 97%) 100%);
}

.c-drawerNav__a {
	font-size: 1.05rem;
	font-weight: 500;
}

/* ドロワー内の CTA。暗い地の上では紺のベタ塗りが地に沈むので、
   面ではなく金の細枠で輪郭を作る。 */
.c-drawerNav__li.-cta {
	margin-top: 1.5rem;
	border: none;
}

.c-drawerNav__li.-cta > .c-drawerNav__a {
	padding: .95em 1.2em;
	/* 暗い地の上では、塗りより「金の細枠 + 白文字」のほうが強く出る。
	   面で塗ると紺との明度差で浮き、輪郭だけなら地に馴染んだまま目立つ。 */
	border: 1px solid var(--fs-color--gold);
	border-radius: var(--fs-radius--md);
	color: #fff;
	font-weight: 600;
	letter-spacing: .08em;
	text-align: center;
}

/* Arkhe の %menu_list__a_hover が灰色の地を敷くので打ち消す */
.c-drawerNav__li.-cta > .c-drawerNav__a:hover {
	background-color: rgb(169 133 69 / 18%);
	opacity: 1;
}


/* ==========================================================================
   5. フッター直前の CTA 帯

   マークアップは functions.php（arkhe_before_footer）が出力する。
   どのページを見ていても、最後に必ず問い合わせ導線に行き当たるようにする。
   行き先が解決できないときは帯そのものを出さない（押しても何も起きない
   ボタンを作らないため）。
   ========================================================================== */

.p-fsCta {
	position: relative;
	overflow: hidden;
	padding: var(--fs-space--section) 0;
	color: #fff;
	text-align: center;
	/* 上下に金の細線を1本ずつ通す。帯の高さが決まり、白地から色地へ
	   落ちる境目が「切り替わった」ではなく「区切った」に見える。 */
	border-top: 1px solid var(--fs-color--gold--line);
	border-bottom: 1px solid var(--fs-color--gold--line);
	background-color: var(--fs-color--brand--dark);
	background-image: linear-gradient(160deg, #16365f 0%, #0a1f3f 55%, #061529 100%);
}

/* 斜めの光。ベタ塗り1色だと帯が平たく見えるので、面に方向を与える。 */
.p-fsCta::before {
	position: absolute;
	top: -40%;
	right: -10%;
	width: 60%;
	height: 180%;
	background-image: linear-gradient(90deg, rgb(255 255 255 / 0%), rgb(255 255 255 / 5%));
	transform: skewX(-12deg);
	content: "";
	pointer-events: none;
}

.p-fsCta__inner {
	position: relative;
	z-index: 1;
}

.p-fsCta__lead {
	margin: 0;
	/* 見出し要素ではないが役割は見出しなので、書体を h1〜h3 と揃える */
	font-family: var(--fs-font--serif);
	font-size: var(--fs-text--headline);
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: 0.1em;
	text-wrap: balance;
}

.p-fsCta__text {
	margin: 1em auto 0;
	max-width: 34em;
	font-size: .95rem;
	line-height: 2.05;
	letter-spacing: 0.04em;
	color: rgb(255 255 255 / 72%);
}

.p-fsCta__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin-top: var(--fs-space--item);
}

.p-fsCta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 15em;
	padding: 1.05em 2.2em;
	border: 1px solid transparent;
	border-radius: var(--fs-radius--md);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-decoration: none;
	transition: background-color var(--fs-dur) var(--fs-ease), border-color var(--fs-dur) var(--fs-ease), color var(--fs-dur) var(--fs-ease);
}

/* ホバーで持ち上げない。跳ねる動きは元気さの表現で、
   ここで作りたい落ち着きと相反する。色と線だけを替える。 */
.p-fsCta__btn:hover {
	text-decoration: none;
}

/* 主導線。白抜きのボタンにして、青地の上で最も強く見せる。 */
.p-fsCta__btn.-primary {
	color: var(--fs-color--brand--dark);
	border-color: #fff;
	background-color: #fff;
}

.p-fsCta__btn.-primary:hover {
	color: var(--fs-color--brand--dark);
	border-color: var(--fs-color--gold--light);
	background-color: var(--fs-color--gold--light);
}

/* 副導線。枠線だけにして、主導線と強さの差をはっきりつける。 */
.p-fsCta__btn.-ghost {
	color: #fff;
	border-color: rgb(255 255 255 / 42%);
}

.p-fsCta__btn.-ghost:hover {
	border-color: var(--fs-color--gold--light);
	background-color: rgb(255 255 255 / 8%);
}

@media (prefers-reduced-motion: reduce) {

	.p-fsCta__btn,
	.p-fsCta__btn:hover {
		transition: none;
	}
}


/* ==========================================================================
   6. フッター本体

   上段（ロゴ・キャッチフレーズ・サイト内リンク）のマークアップは
   functions.php（arkhe_start_footer_inner）が出力する。
   下段（フッターメニュー・コピーライト）は Arkhe 既定のまま。
   ========================================================================== */

.p-fsFoot {
	padding: var(--fs-space--block) 0;
}

.p-fsFoot__inner {
	display: grid;
	gap: var(--fs-space--block);
}

@media (min-width: 800px) {

	.p-fsFoot__inner {
		/* 左に名乗り、右にリンク。リンク側は内容ぶんだけ取る。 */
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
	}
}

.p-fsFoot__logo {
	margin: 0;
}

/* the_custom_logo() が出す img。601x139 の横長ロゴなので高さで揃える。 */
.p-fsFoot__logo img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 44px;
}

.p-fsFoot__name {
	margin: 0;
	font-family: var(--fs-font--serif);
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--fs-color--brand);
}

.p-fsFoot__name a {
	text-decoration: none;
}

.p-fsFoot__tagline {
	margin: 1.3em 0 0;
	max-width: 26em;
	font-size: .875rem;
	line-height: 2.1;
	letter-spacing: 0.04em;
	color: var(--fs-color--muted);
}

/* 欧文の小ラベル。字を小さくして字間を大きく開けるほど「標識」に見え、
   本文と競合しない。金はここのような小さな面だけに使う。 */
.p-fsFoot__navTitle {
	margin: 0 0 1.4em;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	color: var(--fs-color--gold--dark);
}

.p-fsFoot__navList {
	display: grid;
	gap: .1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 800px) {

	.p-fsFoot__navList {
		/* 5項目を2列に割る。1列だとフッターが縦に伸びすぎる。 */
		grid-template-columns: repeat(2, minmax(9em, auto));
		column-gap: 2.5rem;
	}
}

.p-fsFoot__navList a {
	display: block;
	padding: .58em 0;
	font-size: .875rem;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: color var(--fs-dur) var(--fs-ease), padding-left var(--fs-dur) var(--fs-ease);
}

.p-fsFoot__navList a:hover {
	padding-left: .35em;
	color: var(--fs-color--brand);
	text-decoration: none;
}

/* 下位階層のメニューは畳んでおく（フッターに入れると縦に伸びるため） */
.p-fsFoot__navList .sub-menu {
	display: none;
}

/* 下段（フッターメニュー + コピーライト）。上段と地続きに見えないよう
   細い罫線で区切り、文字を一段落とす。 */
.l-footer__foot {
	padding-top: 1.5rem;
	padding-bottom: 1.75rem;
	border-top: 1px solid var(--fs-color--brand--line);
}

.l-footer__nav a:hover {
	color: var(--fs-color--brand);
}

.c-copyright {
	color: var(--fs-color--muted);
	font-size: .78rem;
	letter-spacing: 0.1em;
}


/* ==========================================================================
   7. トップページ

   本文は固定ページ「HOME」（ID 106）。Arkhe Blocks のセクションブロックを
   縦に積んだ構成で、スコープは .p-front__content。

   【詳細度について】
   セクションブロックの色や高さは、本文中の <style id="arkb-dynamic-styles">
   として この style.css より「後」に出力される。同じ詳細度では負けるので、
   .p-front__content を前置してある。セレクタを短くしたくなっても、
   この前置だけは外さないこと。
   ========================================================================== */


/* --------------------------------------------------------------------------
   7-1. ヒーロー（.arkp-scMV06 = 斜めに切った動画 + 左下に見出し）

   動画は右 80% を斜めに切って敷いてあり、見出しはその左下に重なる。
   白 29% のウォッシュだけでは動画の明暗によって文字が沈むので、
   見出しの背後にだけ白いグラデーションの土台を置いて確実に読ませる。
   -------------------------------------------------------------------------- */

.p-front__content .arkp-scMV06 .ark-block-section__bodyInner {
	position: relative;
}

.p-front__content .arkp-scMV06 .ark-block-section__bodyInner::before {
	position: absolute;
	/* 見出しより広く取る。境目が見えないよう外側へはみ出させる。 */
	inset: -2.5rem -4rem -3rem -6rem;
	background-image: radial-gradient(
		125% 150% at 0% 100%,
		rgb(255 255 255 / 95%) 0%,
		rgb(255 255 255 / 80%) 42%,
		rgb(255 255 255 / 0%) 76%
	);
	content: "";
	pointer-events: none;
}

/* 土台より前に出す */
.p-front__content .arkp-scMV06 .ark-block-section__bodyInner > * {
	position: relative;
	z-index: 1;
}

/* パターン付属の CSS は sub を min(32px, 3.4vw) にしている。3.4vw は
   スマホ幅(375px)で 12.75px しかなく、キャッチコピーが読めない。
   下限を持つ clamp に置き換える。 */
.p-front__content .arkp-scMV06 .ark-block-heading__sub {
	font-size: clamp(.95rem, 2.6vw, 1.8rem);
	line-height: 1.9;
	font-weight: 400;
	letter-spacing: 0.1em;
}

.p-front__content .arkp-scMV06 .ark-block-heading__main {
	/* ヒーローの一文はページの第一印象そのものなので、字間を最も大きく取る。
	   1文字ずつが独立して見えるくらい開けると、急がずに読ませる組みになる。

	   font-size は本文中の custom-code ブロックが min(70px, 12vw) を指定して
	   いる。70px は明朝で組むと画面を圧迫するので、ここで上書きする
	   （あちらは2クラス、こちらは3クラスなので出力順が後でも勝つ）。 */
	font-size: clamp(1.9rem, 5.6vw, 3.6rem);
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.55;
	text-wrap: balance;
}

/* ヒーローの CTA。
   ボタンブロックの既定は中央寄せだが、ヒーローの中身は左下に置いてあるので、
   そのままだと見出しだけ左・ボタンだけ中央というちぐはぐな並びになる。
   上マージンを足さないのは、見出しの sub 側が margin-bottom: 30px を
   持っているため。 */
.p-front__content .arkp-scMV06 .ark-block-buttons {
	justify-content: flex-start;
	margin-top: 0;
}

/* スクロール誘導。100vh のヒーローで「まだ下に続く」ことを示す。
   縦線が上から伸びて下へ抜ける。SP ではヒーローが低いので出さない。 */
@media (min-width: 1000px) {

	.p-front__content .arkp-scMV06::after {
		position: absolute;
		bottom: 1.5rem;
		left: 50%;
		z-index: 2;
		width: 1px;
		height: 3.5rem;
		background-image: linear-gradient(180deg, rgb(169 133 69 / 0%), var(--fs-color--gold));
		animation: fs-scrollCue 2.6s var(--fs-ease) infinite;
		content: "";
		pointer-events: none;
	}
}

@keyframes fs-scrollCue {

	0%   { transform: scaleY(0); transform-origin: top; }
	45%  { transform: scaleY(1); transform-origin: top; }
	55%  { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

@media (prefers-reduced-motion: reduce) {

	.p-front__content .arkp-scMV06::after {
		animation: none;
	}
}


/* --------------------------------------------------------------------------
   7-2. セクションの見出し（英字ラベル + 和文見出し）

   移行前は「英語の h2（Mission / Background / Main Services）+ 日本語の一文」
   という構成で、英語が主役・日本語が従だった。これを逆にする。

   規模の大きい企業サイトはどこも「小さな英字ラベル + 大きな和文見出し」で
   節を立てる。英語を主見出しにすると、読み手はまず英単語の意味を推測する手間を
   負い、そのぶん節の主題が入ってくるのが遅れる。英字は「ここから新しい節が
   始まる」という標識に徹させ、主題は和文で言い切るほうが速く、かつ落ち着く。

   ラベルは <p class="p-top__label">、見出しは <h2 class="p-top__h2">。
   要マークアップ（本文側でクラスを付ける）。
   -------------------------------------------------------------------------- */

/* 英字ラベル。字を小さく、字間を大きく開けるほど「標識」として読まれ、
   本文と競合しない。金は文字に使うと薄いので、濃い側を使う。 */
.p-front__content .p-top__label {
	margin-block: 0;
	color: var(--fs-color--gold--dark);
	/* 欧文なので、見出しのセリフ体（数字と同じ指定）に合わせる */
	font-family: var(--fs-font--num);
	font-size: .78rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.28em;
	/* letter-spacing は最後の1文字の「右」にも足されるため、中央寄せだと
	   その1文字ぶん左へ寄って見える。同じ幅を左に足して中心を戻す。 */
	text-indent: 0.28em;
	text-align: center;
}

.p-front__content .p-top__h2 {
	margin-block: 1.2em 0;
	padding-bottom: .75em;
	color: var(--fs-color--brand);
	font-size: var(--fs-text--display);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.14em;
	text-align: center;
	text-wrap: balance;

	/* 見出し下のバー。4px の青い棒から 1px の金の線へ落とす。
	   太い装飾は「飾った」ことのほうが先に伝わる。線は細いほど、
	   引いた手つきが目立たず、見出し自体が前に出る。
	   両端を透明へ抜くのは、切り落とした端が硬く見えるため。
	   8-3 の .title1/.title2_freestudy と同じ語彙で揃えてある。 */
	background-repeat: no-repeat;
	background-size: 4rem 1px;
	background-position: center bottom;
	background-image: linear-gradient(
		90deg,
		rgb(169 133 69 / 0%),
		var(--fs-color--gold) 30%,
		var(--fs-color--gold) 70%,
		rgb(169 133 69 / 0%)
	);
}

/* 見出しの直後に置く一文。節が何を言う場所なのかを1行で示す。 */
.p-front__content .p-top__lead {
	max-width: 38em;
	margin-block: 2em 0;
	margin-inline: auto;
	font-size: 1rem;
	line-height: 2.2;
	letter-spacing: 0.04em;
	color: var(--fs-color--muted);
	text-align: center;
	/* 中央寄せの日本語は文節の途中で改行されると読みにくい。
	   非対応ブラウザでは無視されるだけなので入れて損はない。 */
	word-break: auto-phrase;
}

/* セクション内の h3（サービス名・「パートナー特典」など）。
   移行前は #4484ce / #6e4d48 と px 指定がインラインで入っていた。 */
.p-front__content .ark-block-section h3.wp-block-heading {
	color: var(--fs-color--ink);
	font-size: var(--fs-text--h3);
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.08em;
}

/* 淡い地のセクション。パターンはインラインで background-color: #f7f7f7 を
   持つが background-image は指定していないので、こちらを重ねれば競合せずに
   勝てる（!important も詳細度の細工も要らない）。 */
.p-front__content .ark-block-section__color[style*="#f7f7f7"] {
	background-image: linear-gradient(
		180deg,
		#ffffff 0%,
		var(--fs-color--brand--pale) 12%,
		var(--fs-color--brand--pale) 100%
	);
}


/* --------------------------------------------------------------------------
   7-3. セクション本文（Mission / Background の読み物部分）

   移行前は Mission の本文だけ font-size:18px がインラインで入っていて、
   Background の本文（同じ役割）とサイズが揃っていなかった。
   -------------------------------------------------------------------------- */

.p-front__content .ark-block-section .wp-block-column p {
	font-size: 1rem;
	line-height: 2.15;
	letter-spacing: 0.04em;
	color: var(--fs-color--muted);
}

/* 2カラムの間隔。狭いと2つの文章が1つに見えてしまう。 */
.p-front__content .ark-block-section .wp-block-columns {
	gap: var(--fs-space--item);
}


/* --------------------------------------------------------------------------
   7-4. 事業紹介（BUSINESS）

   4事業を同じ寸法のカードで横に並べる。移行前は FreeStudy だけが写真と
   ロゴ付きの大きなカードで、残り3事業は見出しと一文だけのテキストだった。
   並べ方が揃っていないと、読み手は「差があるのは意図か、作りかけか」を
   判断できない。4つを等価に見せ、順位ではなく «4つある» ことを伝える。

   写真はサービス一覧ページ（ID 1527）と同じものを使う。同じ事業に別々の
   写真を当てると、2ページを続けて見たときに別の事業に見えるため。

   カードは wp:columns / wp:column で組んでいる。手書きの HTML にしないのは、
   wp:image を通したほうが srcset が出て、端末に合った寸法が配信されるため。

   要マークアップ: <div class="wp-block-columns p-top__biz"> の中に
   画像 → .p-top__bizCat → h3.p-top__bizName → .p-top__bizText
   → .p-top__bizMore の順で置く。番号(01〜04)は CSS カウンタが振るので、
   事業が増減してもマークアップ側の書き換えは要らない。
   -------------------------------------------------------------------------- */

.p-front__content .p-top__biz {
	gap: clamp(1.25rem, 2.5vw, 2rem);
	margin-top: var(--fs-space--item);
	counter-reset: topbiz;
}

.p-front__content .p-top__biz > .wp-block-column {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--fs-color--brand--line);
	border-radius: var(--fs-radius--lg);
	background-color: #fff;
	box-shadow: var(--fs-shadow--flat);
	counter-increment: topbiz;
}

/* 画像はカードの上辺いっぱいに置き、比率を 3:2 に切り揃える。
   元素材の縦横比はそろっていないので、揃えないと4枚の下端が波打つ。 */
.p-front__content .p-top__biz .wp-block-image {
	margin: 0;
}

.p-front__content .p-top__biz .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	/* ゆっくり寄る。1.2秒はホバーの演出としては遅い部類だが、
	   速い動きは «反応が良い» の表現であって、落ち着きとは相反する。 */
	transition: transform 1.2s var(--fs-ease);
}

.p-front__content .p-top__biz > .wp-block-column:hover .wp-block-image img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {

	.p-front__content .p-top__biz .wp-block-image img,
	.p-front__content .p-top__biz > .wp-block-column:hover .wp-block-image img {
		transform: none;
		transition: none;
	}
}

/* 文字側の余白。画像だけは端まで伸ばしたいので、カード自体には padding を
   持たせず、画像以外の子要素に左右の余白を配る。 */
.p-front__content .p-top__biz > .wp-block-column > :not(.wp-block-image) {
	padding-inline: 1.4rem;
}

.p-front__content .p-top__biz > .wp-block-column > :last-child {
	padding-bottom: 1.5rem;
}

/* 通し番号 + 事業カテゴリ。番号は順位ではなく索引なので小さく置く
   （サービス一覧の 11-3 と同じ考え方・同じ見た目）。 */
.p-front__content .p-top__biz .wp-block-column .p-top__bizCat {
	display: flex;
	align-items: baseline;
	gap: 0.7em;
	margin-block: 1.5rem 0;
	color: var(--fs-color--brand);
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.16em;
}

.p-front__content .p-top__biz .wp-block-column .p-top__bizCat::before {
	content: counter(topbiz, decimal-leading-zero);
	color: var(--fs-color--gold--dark);
	font-family: var(--fs-font--num);
	font-size: 0.9rem;
	letter-spacing: 0.06em;
	/* 桁揃え。01〜04 が横に並んだときに文字の頭がぶれない */
	font-variant-numeric: tabular-nums;
}

.p-front__content .p-top__biz .wp-block-column .p-top__bizName {
	margin-block: 0.5rem 0;
	color: var(--fs-color--ink);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.08em;
}

.p-front__content .p-top__biz .wp-block-column .p-top__bizText {
	margin-block: 0.9rem 0;
	font-size: 0.88rem;
	line-height: 1.95;
	letter-spacing: 0.03em;
	color: var(--fs-color--muted);
}

/* 詳細への導線。margin-top: auto でカードの下端へ寄せると、
   本文の長さが違っても4枚のリンクの高さが揃う。 */
.p-front__content .p-top__biz .wp-block-column .p-top__bizMore {
	margin-block: 1.6rem 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--fs-color--brand--line);
	margin-top: auto;
	font-size: 0.85rem;
}

.p-front__content .p-top__biz .p-top__bizMore a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--fs-color--brand);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-decoration: none;
}

/* 矢印は文字ではなく罫線で描く。フォント依存の字形ぶれを避けるため
   （サービス一覧の 11-7 と同じ作り）。 */
.p-front__content .p-top__biz .p-top__bizMore a::after {
	content: "";
	width: 0.42em;
	height: 0.42em;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--fs-dur) var(--fs-ease);
}

.p-front__content .p-top__biz .p-top__bizMore a:hover::after {
	transform: rotate(45deg) translate(2px, -2px);
}

/* 4列は 782px（コアブロックの折返し幅）で縦積みになる。その手前に
   2列を挟む。中間の幅で4列のままだと、カード1枚が 200px 前後まで
   痩せて写真も文章も読めなくなる。 */
@media screen and (max-width: 1100px) and (min-width: 783px) {

	.p-front__content .p-top__biz {
		flex-wrap: wrap;
	}

	.p-front__content .p-top__biz > .wp-block-column {
		flex-basis: calc(50% - clamp(1.25rem, 2.5vw, 2rem) / 2) !important;
	}
}


/* --------------------------------------------------------------------------
   7-4b. 原点（STORY）

   移行前はトップに約700字の物語がそのまま載っていた。トップページは
   «この会社が何をしているか» を掴む場所で、読ませる場所ではない。
   要点だけを置き、続きは企業情報ページ（代表挨拶）へ送る。
   -------------------------------------------------------------------------- */

.p-front__content .p-top__story {
	max-width: 40em;
	margin-inline: auto;
	margin-block: 2em 0;
	font-size: 1rem;
	line-height: 2.2;
	letter-spacing: 0.04em;
	color: #3c4655;
}

.p-front__content .p-top__story + .p-top__story {
	margin-top: 1.6em;
}

/* --------------------------------------------------------------------------
   7-4c. 2つの格差（MESSAGE の中）

   Mission の「教育格差・経験格差をなくす」は、言葉だけでは何を指すのか
   伝わらない。2つの語をその場で定義して、抽象論のまま終わらせない。
   定義は docs/site-facts.md の2節が正。
   -------------------------------------------------------------------------- */

.p-front__content .p-top__gap {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	max-width: 46em;
	margin: var(--fs-space--item) auto 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	/* 罫線は1pxの隙間を背景色で見せて作る。セルごとに border を引くと
	   角で二重になる（11-8・14-2 の数字グリッドと同じ作り）。 */
	background-color: var(--fs-color--brand--line);
	border: 1px solid var(--fs-color--brand--line);
	border-radius: var(--fs-radius--lg);
}

.p-front__content .p-top__gap li {
	margin: 0;
	padding: var(--fs-space--card);
	background-color: #fff;
	text-align: left;
}

.p-front__content .p-top__gap li strong {
	display: block;
	margin-bottom: .7em;
	padding-bottom: .7em;
	border-bottom: 1px solid var(--fs-color--gold--line);
	color: var(--fs-color--brand);
	font-family: var(--fs-font--serif);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: .1em;
}

.p-front__content .p-top__gap li span {
	display: block;
	font-size: .9rem;
	line-height: 2;
	letter-spacing: .03em;
	color: var(--fs-color--muted);
}


/* --------------------------------------------------------------------------
   7-4d. 事業カードの要点タグ

   本文を読まなくても「誰向けか・いくらか・何があるか」が拾えるようにする。
   サービス一覧の 11-7（.p-svc__tag）と同じ見た目にしてあるが、あちらは
   .arkp-gnRichClmn10 の中に閉じたセレクタなのでトップからは参照できない。
   値の重複ではなく、スコープが違うだけの同型として持つ。
   -------------------------------------------------------------------------- */

.p-front__content .p-top__biz .wp-block-column .p-top__bizTags {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin-block: 1.1rem 0;
}

.p-front__content .p-top__biz .p-top__bizTag {
	padding: .3em .7em;
	border: 1px solid var(--fs-color--brand--line);
	border-radius: var(--fs-radius--md);
	color: var(--fs-color--brand);
	font-size: .68rem;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: .06em;
	white-space: nowrap;
}


/* --------------------------------------------------------------------------
   7-7. 沿革（HISTORY）

   年と出来事を1行ずつ。左に年、右に内容を置き、間を罫線でつなぐ。
   企業情報ページにも同じ年表があるが、あちらは表組み。ここは «積み重ねが
   ある» ことが伝われば十分なので、読み下せる縦並びにする。
   値は docs/site-facts.md の4節が正。
   -------------------------------------------------------------------------- */

.p-front__content .p-top__history {
	max-width: 44em;
	margin: var(--fs-space--item) auto 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--fs-color--brand--line);
}

.p-front__content .p-top__history li {
	display: grid;
	grid-template-columns: 7em minmax(0, 1fr);
	gap: 0 1.5em;
	margin: 0;
	padding: 1.15em .2em;
	border-bottom: 1px solid var(--fs-color--brand--line);
	font-size: .95rem;
	line-height: 1.95;
	letter-spacing: .03em;
}

/* 年は欧文のセリフ体 + 等幅数字。桁を揃えると縦のラインが1本通る。 */
.p-front__content .p-top__history li strong {
	color: var(--fs-color--brand);
	font-family: var(--fs-font--num);
	font-size: 1.05rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: .06em;
	white-space: nowrap;
}

.p-front__content .p-top__history li span {
	color: #3c4655;
}


/* --------------------------------------------------------------------------
   7-8. 企業概要（COMPANY）

   トップに置くのは「屋号・代表・開始・創業・所在」までの要点だけ。
   全項目は企業情報ページが持つ。同じ表を2枚置くと、片方を直したときに
   もう片方が古いまま残る。
   -------------------------------------------------------------------------- */

.p-front__content .p-top__company {
	max-width: 44em;
	margin: var(--fs-space--item) auto 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--fs-color--brand--line);
}

.p-front__content .p-top__company li {
	display: grid;
	grid-template-columns: 9em minmax(0, 1fr);
	gap: 0 1.5em;
	margin: 0;
	padding: 1.15em .2em;
	border-bottom: 1px solid var(--fs-color--brand--line);
	font-size: .95rem;
	line-height: 1.95;
	letter-spacing: .03em;
}

.p-front__content .p-top__company li strong {
	color: var(--fs-color--brand);
	font-weight: 600;
	letter-spacing: .06em;
}


/* --------------------------------------------------------------------------
   7-9. よくあるご質問（FAQ）

   Q&A ページ（ID 20・全25問）から4問だけを抜く。カードの体裁は 12-2 が
   .c-postContent スコープで持っており、トップページの本文ラッパーにも
   c-postContent が付くのでそのまま効く。ここで持つのは幅だけ。
   -------------------------------------------------------------------------- */

.p-front__content .ark-block-faq {
	max-width: 46em;
	margin-inline: auto;
	margin-top: var(--fs-space--item);
	text-align: left;
}


/* --------------------------------------------------------------------------
   7-10. 狭い画面
   -------------------------------------------------------------------------- */

@media screen and (max-width: 599px) {

	/* 2つの格差は横に並べると1列が10文字を切って読めなくなる */
	.p-front__content .p-top__gap {
		grid-template-columns: 1fr;
	}

	/* 年・項目名を上に、内容を下に積む。7em/9em の固定列のままだと
	   残り幅が足りず、内容が1文字ずつ折り返される。 */
	.p-front__content .p-top__history li,
	.p-front__content .p-top__company li {
		grid-template-columns: 1fr;
		gap: .35em 0;
	}
}


/* --------------------------------------------------------------------------
   7-5. FreeStudy パートナー
   -------------------------------------------------------------------------- */

/* チェックリストのアイコン色。本文中の custom-code ブロックが #4484ce を
   指定しているので、詳細度を上げてブランド色に寄せる。 */
.p-front__content .freestudy-partner_freestudy .is-style-ark-list-icon--check > li::before {
	color: var(--fs-color--brand);
}

.p-front__content .freestudy-partner_freestudy .is-style-ark-list-icon--check > li {
	padding-block: .35em;
	font-size: 1.0125rem;
	line-height: 1.8;
}

/* 特典リストを白いカードに載せて「もらえるもの」として囲う */
.p-front__content .freestudy-partner_freestudy .is-style-ark-list-icon--check {
	margin-top: 1.5rem;
	padding: var(--fs-space--card) var(--fs-space--card);
	border: 1px solid var(--fs-color--brand--line);
	border-radius: var(--fs-radius--lg);
	/* この節は淡い地の上に置く。囲みを白にすると「もらえるものの一覧」が
	   地から1段浮き、周りの文章と区別がつく。 */
	background-color: #fff;
	box-shadow: var(--fs-shadow--flat);
}


/* --------------------------------------------------------------------------
   7-6. ボタン（Arkhe Blocks のボタンブロック）

   押せる領域が小さめだったので、最低幅と余白を足して押しやすくする。
   -------------------------------------------------------------------------- */

.p-front__content .ark-block-button__link {
	min-width: 14em;
	padding-inline: 2em;
	border-radius: var(--fs-radius--md);
	font-weight: 600;
	letter-spacing: 0.1em;
	transition: background-color var(--fs-dur) var(--fs-ease), opacity var(--fs-dur) var(--fs-ease);
}

/* 塗りのボタンに影は付けない。影は「押せる」ことを伝えるための誇張で、
   紺のベタ塗りと余白だけで十分に押せると分かる。 */
.p-front__content .ark-block-button.is-btn-fill .ark-block-button__link:hover {
	opacity: .88;
}

@media (prefers-reduced-motion: reduce) {

	.p-front__content .ark-block-button__link,
	.p-front__content .ark-block-button__link:hover {
		transition: none;
	}
}


/* ==========================================================================
   8. 汎用ユーティリティ

   カスタマイザーの「追加CSS」から移設した分。
   ========================================================================== */

.m-0 {
	margin: 0 !important;
}

.p-0 {
	padding: 0 !important;
}

.text-shadow {
	text-shadow: 0px 0px 25px rgb(250 250 250);
}

.bg-white {
	background-color: white;
}

.beyction_flex {
	display: flex;
}

/* 本文から要素を隠すユーティリティ。移設前は本文中の custom-code ブロックで
   定義されていたため、そのブロックを含むセクションを消すと道連れで効かなく
   なる状態だった。現時点で使っている箇所は無い。 */
.d-none {
	display: none;
}

/* 画面幅による出し分け */
.sm-only {
	display: none;
}

@media screen and (max-width: 800px) {

	.pc-only {
		display: none !important;
	}

	.sm-only {
		display: flex;
	}
}


/* --------------------------------------------------------------------------
   8-1. サイトカラーのユーティリティ
   -------------------------------------------------------------------------- */

.main_color {
	color: var(--fs-color--brand);
}

.main_background_color {
	background-color: var(--fs-color--brand);
}


/* --------------------------------------------------------------------------
   8-2. コンテナ幅（Arkhe Blocks のセクションブロックを狭める）
   -------------------------------------------------------------------------- */

.container_sm_freestudy .ark-block-section__body {
	margin: 0 auto !important;
	max-width: 1100px !important;
}

.inner_container_freestudy .ark-block-section__body {
	margin: 0 auto;
	max-width: 800px !important;
}

.inner_container_900_freestudy .ark-block-section__body {
	margin: 0 auto !important;
	max-width: 900px !important;
}

.py-0 .ark-block-section__bodyInner {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}


/* --------------------------------------------------------------------------
   8-3. 見出し（下線グラデーション）

   企業情報ページとトップページのお問い合わせ見出しで使っている。
   もとは title1 が白地の上、title2 が淡い地の上と使い分けていたが、
   線の両端を透明へ抜いたことで地の色を選ばなくなり、区別が消えた。
   -------------------------------------------------------------------------- */

/* 350px × 5px の青い帯は、見出しより下線のほうが目立っていた。
   幅を詰めて 1px の金線にする。両端を透明へ抜いてあるので、
   下に敷かれた地の色（白でも淡い地でも）を選ばず置ける。
   title1 と title2 は地の色ごとの使い分けだったが、透明抜きにしたことで
   区別が不要になった。本文側のクラスを直さずに済むよう両方残してある。 */
.title1_freestudy,
.title2_freestudy {
	position: relative;
	padding-bottom: .7em;
	color: var(--fs-color--brand);
	font-weight: 600;
	letter-spacing: 0.12em;
	background-repeat: no-repeat;
	background-size: 5rem 1px;
	background-position: center bottom;
	background-image: linear-gradient(
		90deg,
		rgb(169 133 69 / 0%),
		var(--fs-color--gold) 30%,
		var(--fs-color--gold) 70%,
		rgb(169 133 69 / 0%)
	);
}


/* ==========================================================================
   9. 投稿一覧・投稿ページ・サイドバー
   ========================================================================== */

/* 一覧をカードにする（メディア一覧ページ） */
.p-postList__item a {
	overflow: hidden;
	border: 1px solid var(--fs-color--brand--line);
	border-radius: var(--fs-radius--lg);
	background-color: white;
	box-shadow: var(--fs-shadow--flat);
}

.p-postList__body {
	padding: 10px 20px;
}

/* 5px の黒帯を、2px の金の線にする。太い黒は面を押さえ込む力が強く、
   記事より枠のほうが先に目に入っていた。 */
.p-entry {
	padding: 32px 44px 56px;
	border: 1px solid var(--fs-color--brand--line);
	border-top: 2px solid var(--fs-color--gold);
	box-shadow: var(--fs-shadow--flat);
}

@media screen and (max-width: 800px) {

	.p-entry {
		padding: 0px;
		box-shadow: none;
		border-top: none;
	}
}

#sidebar .wp-image-112 {
	width: 150px;
	height: 150px;
	object-fit: cover;
}

.sidebar_group-freestudy {
	padding: 30px 22px;
	border: 1px solid var(--fs-color--brand--line);
	border-top: 2px solid var(--fs-color--gold);
	box-shadow: var(--fs-shadow--flat);
}


/* ==========================================================================
   10. お問い合わせフォーム（Contact Form 7）
   ========================================================================== */

.wpcf7-response-output {
	margin: 0 auto !important;
	margin-top: 25px !important;
	max-width: 800px !important;
	border-radius: var(--fs-radius--sm);
	color: #842029;
	background-color: #f8d7da;
	border: 2px solid #f5c2c7 !important;
	padding: 10px 15px !important;
}

.cf-table {
	margin: 0 auto;
	max-width: 800px !important;
	margin-bottom: 40px;
	color: rgb(90, 90, 90);
}

.cf-table th {
	background-color: var(--fs-color--ink) !important;
	color: white;
	vertical-align: middle;
	padding: 25px 18px;
	width: 250px;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.cf-table .required {
	font-size: .8em;
	padding: 3px 10px;
	background: var(--fs-color--accent--dark);
	color: white;
	border-radius: var(--fs-radius--sm);
	margin-left: 8px;
}

.cf-table td {
	padding: 15px 20px  !important;
	vertical-align: middle;
}

.wpcf7-text, .wpcf7-select, .wpcf7-date {
	width: 100%;
	height: 40px;
	padding: 5px 10px;
}

span.wpcf7-list-item {
	display: block;
}

/* 入力欄。地色だけで境目を作ると輪郭が曖昧になるので、
   地は紙に近い色まで薄め、代わりに 1px の枠で形を決める。 */
.cf-table td input, .cf-table td textarea, .cf-table td select {
	border: 1px solid var(--fs-color--brand--line);
	border-radius: var(--fs-radius--md);
	background-color: #fbf9f5;
}

.cf-table td input:focus, .cf-table td textarea:focus, .cf-table td select:focus {
	border-color: var(--fs-color--brand);
	background-color: #fff;
}

.cf-table td textarea {
	min-height: 140px;
	width: 100%;
	resize: vertical;
}

span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
	color: red;
	font-weight: 600;
}

.text_span {
	font-weight: 800;
}

.cf-table2 .time {
	width: calc(50% - 15px);
}

.cf-table2 .between {
	width: 30px !important;
	display: inline-block;
	text-align: center;
}

/* 送信ボタン。金のベタ塗りにすると面積が大きすぎて安く見えるので、
   地は紺のまま、金は 1px の枠として添えるに留める。 */
input.wpcf7-submit {
	margin: 0 auto;
	margin-bottom: 15px;
	display: block;
	padding: 1.05em 0;
	width: 100%;
	max-width: 400px;
	border: 1px solid var(--fs-color--gold--line);
	background: var(--fs-color--brand);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	border-radius: var(--fs-radius--md);
	transition: background-color var(--fs-dur) var(--fs-ease), border-color var(--fs-dur) var(--fs-ease);
}

input.wpcf7-submit:hover {
	border-color: var(--fs-color--gold);
	background: var(--fs-color--brand--dark);
}

@media screen and (max-width:800px) {

	.cf-table {
		width: 100% !important;
		border: none !important;
	}

	.cf-table th, .cf-table td {
		display: block;
		width: 100%;
		border: none;
		padding: 10px 15px;
	}

	.wpcf7-list-item {
		margin-left: 0px;
	}

	input.wpcf7-submit {
		font-size: .95rem;
	}
}

/* お問い合わせページの、フォーム下のメール/電話の案内枠 */
.contact_mail_freestudy {
	margin-top: 50px !important;
}

.contact_mail_freestudy .ark-block-section__bodyInner {
	margin-top: 50px;
	padding: 35px 0px;
	border: 1px solid var(--fs-color--brand--line);
	border-left: none;
	border-right: none;
}

.contact_text_freestudy {
	margin-top: 5px;
}


/* ==========================================================================
   11. サービス一覧ページ（/サービス一覧/）

   Arkhe Blocks の公式パターン gnRichClmn10（画像とテキストの左右交互）を
   5事業ぶん並べたページ。その見た目だけを調整する。

   【詳細度について】
   パターン付属の CSS は本文中の <style id="arkb-dynamic-styles"> として
   この style.css より「後」に出力される。同じ詳細度では負けるので、
   すべて .c-postContent を前置してある。セレクタを短くしたくなっても、
   この前置だけは外さないこと。

   【マークアップ側の対応】
   本文を変えなくても効くものと、本文にクラスを足して初めて効くものがある。
   後者には「要マークアップ」と注記した。
   ========================================================================== */

.c-postContent .arkp-gnRichClmn10__wrappper {
	/* セクション1のブランドカラーを参照する。以前は番号と見出しで別々の青を
	   持っていたが、サイト全体で青を1色に統一したため両方とも同じ値を指す。 */
	--fs-svc--color: var(--fs-color--brand);
	--fs-svc--color--heading: var(--fs-color--brand);

	/* 01, 02 … の自動採番。事業を増減しても番号を振り直さなくてよい */
	counter-reset: svc;
}

/* セクションの地。パターンはインラインで background-color: #f7f7f7 を持つが、
   background-image は指定していないので、こちらを重ねれば競合せずに勝てる
   （!important も詳細度の細工も要らない）。
   完全な無彩色グレーは「とりあえず置いた色」に見えるので、ブランドの青に
   ごくわずかに寄せた地にして、上端は白へ抜く。 */
.c-postContent .arkp-gnRichClmn10__wrappper .ark-block-section__color {
	background-image: linear-gradient(180deg, #ffffff 0%, var(--fs-color--brand--pale) 26%, var(--fs-color--brand--pale) 100%);
}

/* ページ全体のリード文
   要マークアップ: 各サービスより前に <p class="p-svc__lead">…</p> */
.c-postContent .p-svc__lead {
	/* 中央寄せの日本語は文節の途中で改行されると読みにくい
	   （「現在展開してい / る4つの事業を」のように割れていた）。
	   非対応ブラウザでは無視されるだけなので入れて損はない。 */
	word-break: auto-phrase;
	max-width: 40em;
	margin-inline: auto;
	margin-block: 0 var(--fs-space--block);
	text-align: center;
	font-size: 1rem;
	line-height: 2.2;
	letter-spacing: 0.04em;
	color: var(--fs-color--muted);
}


/* --------------------------------------------------------------------------
   11-1. 各サービス項目
   -------------------------------------------------------------------------- */

.c-postContent .arkp-gnRichClmn10 {
	/* パターン既定は 3rem。事業の切れ目が読み取りにくかったので広げる */
	--arkp--gap--y: 5rem;
	counter-increment: svc;
}

/* テキスト側の白カード。パターン側で背景白・角丸まで付いているので、
   輪郭だけ足す。以前は影を2枚重ねて浮かせていたが、事業ぶん縦に積むと
   画面全体がふわふわして落ち着かない。1px の罫線で面を確定させ、
   影は輪郭を締めるぶんだけ残す。 */
.c-postContent .arkp-gnRichClmn10 .ark-block-column:last-of-type {
	border: 1px solid var(--fs-color--brand--line);
	box-shadow: var(--fs-shadow--card);

	/* パターンは padding を --arkb-padding 経由で当てている。直接 padding を
	   書かず変数を上書きすることで、プラグイン側の仕組みに乗ったまま調整する。
	   （この宣言はパターンCSSより詳細度が高いので、出力順が後でも勝つ） */
	--arkb-padding: 2.25rem;
}


/* --------------------------------------------------------------------------
   11-2. 画像

   元画像の縦横比が揃っていない（1点だけ 640x420 の小さい素材が混ざる）。
   表示比率を 3:2 に固定して並びを揃える。
   ※ 小さい素材は拡大されるぶん粗く見えるので、素材自体の差し替えが望ましい。
   -------------------------------------------------------------------------- */

.c-postContent .arkp-gnRichClmn10 .ark-block-column:first-of-type .wp-block-image img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* カードだけが浮いて画像が板のように見えるのを防ぐ。
   カード側より弱い影にして、前後関係（カードが手前）は保つ。 */
.c-postContent .arkp-gnRichClmn10 .ark-block-column:first-of-type {
	box-shadow: 0 18px 36px -32px rgb(16 29 56 / 45%);
}


/* --------------------------------------------------------------------------
   11-2b. 横並び時に画像の下へ出る白い帯を消す

   カラムは flex アイテムなので、行の高さ（＝背の高いテキストカードの高さ）
   まで引き伸ばされる。一方 11-2 で画像の高さを 3:2 に固定しているため、
   カラムの下端との差が白い帯として残る。実測で 124〜185px あり、
   角丸と影が付いているぶんはっきり破綻して見える。

   横並びのときだけ比率の固定を解き、画像をカラムの高さいっぱいまで
   伸ばして解消する。縦積み時は伸びる先が無いので 3:2 のままにする。

   ※ この節は一度失われて隙間が再発している。11-2 を編集するときは
     セットで残すこと。
   -------------------------------------------------------------------------- */

@media (min-width: 1000px) {

	/* figure をカラムの高さまで伸ばすための flex */
	.c-postContent .arkp-gnRichClmn10 .ark-block-column:first-of-type {
		display: flex;
	}

	.c-postContent .arkp-gnRichClmn10 .ark-block-column:first-of-type .wp-block-image {
		width: 100%;
		margin: 0;
	}

	.c-postContent .arkp-gnRichClmn10 .ark-block-column:first-of-type .wp-block-image img {
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
	}
}


/* --------------------------------------------------------------------------
   11-3. 事業カテゴリの見出し行（通し番号 + カテゴリ + 罫線）

   要マークアップ: サービス名の「手前」に
   <p class="p-svc__cat">小中高生向け教育事業</p>

   番号は装飾として大きく置くのではなく、カテゴリと同じ行に索引として小さく
   置く。サービス一覧は本来「順序」を持たないので、大きな数字を主役にすると
   優先順位があるかのように読めてしまう。索引の粒度に留めるのが正しい。
   行末のフェードする罫線が、カード内の情報の始まりを示す。
   -------------------------------------------------------------------------- */

.c-postContent .arkp-gnRichClmn10 .p-svc__cat {
	display: flex;
	align-items: center;
	gap: 0.8em;
	margin-block: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.5;
	color: var(--fs-svc--color);
}

.c-postContent .arkp-gnRichClmn10 .p-svc__cat::before {
	content: counter(svc, decimal-leading-zero);
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	/* 桁揃え。01〜04 が縦に並んだときに幅がぶれない */
	font-variant-numeric: tabular-nums;
}

/* 余白を埋めるフェード罫線。flex の余りを全部もらう */
.c-postContent .arkp-gnRichClmn10 .p-svc__cat::after {
	content: "";
	flex: 1;
	height: 1px;
	background-image: linear-gradient(90deg, var(--fs-color--gold), transparent);
	opacity: 0.6;
}


/* --------------------------------------------------------------------------
   11-4. サービス名

   現状は <p class="arkp-gnRichClmn10__colHeading">。SEO とアクセシビリティの
   ため <h2 class="arkp-gnRichClmn10__colHeading"> に変えることを想定しており、
   どちらでも同じ見た目になるよう Arkhe の h2 装飾を打ち消してある。

   下の短いバーは、8-3 の .title2_freestudy（中央寄せの下線グラデーション）を
   左寄せの見出し用に縮めたもの。サイト既存の装飾を引き継いで統一感を出す。
   -------------------------------------------------------------------------- */

.c-postContent .arkp-gnRichClmn10 .arkp-gnRichClmn10__colHeading {
	margin-block: 0.7em 0;
	padding: 0 0 0.7rem;
	border: none;
	/* <p> なので h1〜h3 の明朝指定が届かない。見出しとして扱う以上、
	   書体はそちらに合わせる（h2 に変えても見た目が変わらないよう両方に効く）。 */
	font-family: var(--fs-font--serif);
	color: var(--fs-svc--color--heading);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-wrap: balance;

	background-repeat: no-repeat;
	background-size: 2.5rem 1px;
	background-position: left bottom;
	background-image: linear-gradient(
		90deg,
		var(--fs-color--gold),
		rgb(169 133 69 / 0%)
	);
}

/* キャッチコピー（1行）
   要マークアップ: 本文の前に <p class="p-svc__catch">…</p>
   左の縦罫で「ここが結論」と示し、本文より一段大きく組む。 */
.c-postContent .arkp-gnRichClmn10 .p-svc__catch {
	margin-block: 1.6em 0;
	padding-left: 1.05em;
	border-left: 2px solid var(--fs-color--gold);
	font-family: var(--fs-font--serif);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.9;
	letter-spacing: 0.06em;
	color: var(--fs-color--ink);
}


/* --------------------------------------------------------------------------
   11-5. 本文
   上記3つ以外の p を本文とみなす。
   -------------------------------------------------------------------------- */

.c-postContent .arkp-gnRichClmn10 .ark-block-column:last-of-type p:not(.arkp-gnRichClmn10__colHeading):not(.p-svc__cat):not(.p-svc__catch) {
	margin-block: 1.2em 0;
	line-height: 2.05;
	letter-spacing: 0.04em;
}


/* --------------------------------------------------------------------------
   11-6. レスポンシブ
   パターン側は 1000px 未満で画像とテキストが縦積みになる。
   -------------------------------------------------------------------------- */

@media not all and (min-width: 1000px) {

	.c-postContent .arkp-gnRichClmn10 {
		--arkp--gap--y: 3.5rem;
	}

	/* 【パターン側のバグの打ち消し。消さないこと】
	   パターンは横並び時、テキストカードを画像へ食い込ませるため
	   -rev 側に margin-right の負値を当てている。
	   縦積みへ切り替える指定は .-rev の付かないセレクタで書かれていて
	   詳細度が1つ低く、メディアクエリの中にあっても打ち消せない。
	   放置すると 1000px 未満で -rev の項目だけカードが右へ 64px ずれ、
	   親で切り取られて文章の右端が欠ける（実測 x 78..437 / 画面幅 390）。 */
	.c-postContent .arkp-gnRichClmn10 .ark-block-column:last-of-type,
	.c-postContent .arkp-gnRichClmn10.-rev .ark-block-column:last-of-type {
		width: 100%;
		/* パターンは inherit を指定しているが、親のマージンを引き継いで
		   挙動が不安定になる。0 で確定させる。 */
		margin-left: 0;
		margin-right: 0;
	}

	/* 縦積みでは画像とカードが連結して1枚に見える。両方に影があると
	   継ぎ目に線が出るので、画像側の影は消す。 */
	.c-postContent .arkp-gnRichClmn10 .ark-block-column:first-of-type {
		box-shadow: none;
	}
}

@media screen and (max-width: 599px) {

	.c-postContent .arkp-gnRichClmn10 .arkp-gnRichClmn10__colHeading {
		font-size: 1.35rem;
	}

	.c-postContent .arkp-gnRichClmn10 .p-svc__catch {
		font-size: 1.02rem;
	}

	/* 狭い画面ではカテゴリ名が折り返すので、罫線を出さず番号と横並びに保つ */
	.c-postContent .arkp-gnRichClmn10 .p-svc__cat {
		align-items: baseline;
		letter-spacing: 0.14em;
	}

	.c-postContent .arkp-gnRichClmn10 .p-svc__cat::after {
		display: none;
	}

	.c-postContent .arkp-gnRichClmn10 .ark-block-column:last-of-type {
		--arkb-padding: 1.6rem;
	}
}


/* ==========================================================================
   12. Q & A ページ（/q-a/）

   Arkhe Blocks の Q&A ブロック（dl / dt / dd）を6カテゴリ・26問並べたページ。
   アコーディオンではなく全問が開いた状態で出る上、このページの本文カラムは
   1200px あるため、素のままだと「1行の長い文字の壁」になり、どこに何が
   書いてあるのか、そもそも全部でどれだけあるのかが掴めない。

   そこで次の4点で全体像を掴めるようにする。

     1. 広い画面では目次を左に固定し、6カテゴリ・問数・現在地を常に見せる
     2. 本文カラムを読める幅（54rem）まで絞る
     3. 1問ごとをカードで囲み、問答を「塊」として認識できるようにする
     4. 質問に地色を敷いて回答と分け、視線が質問だけを追えるようにする

   【マークアップ側の対応】
   リード文と目次は本文側のクラス（.fs-qa-lead / .fs-qa-toc）に依存する。
   見出しの id（qa-about など）も本文側で付けている。
   カテゴリごとの問数と現在地（aria-current）は assets/js/qa-toc.js が付ける。
   JS が無効でも目次はページ内リンクとして機能し、体裁も崩れない。
   ========================================================================== */

/* --------------------------------------------------------------------------
   12-1. リード文と目次（既定の形はチップ）

   狭い画面ではこの形のまま使い、広い画面で 12-3 が左カラムへ組み替える。
   -------------------------------------------------------------------------- */

.c-postContent .fs-qa-lead {
	margin-bottom: 1.8em;
	color: var(--fs-color--muted);
}

/* カテゴリをチップ状に横並べる。縦のリストにすると目次だけで1画面を使い、
   肝心の中身が下に押し出されてしまう。 */
.c-postContent .fs-qa-toc {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	margin: 0 0 3.5em;
	padding: 0;
	list-style: none;
}

.c-postContent .fs-qa-toc li {
	margin: 0;
}

/* 枠線だけのチップは背景の白に溶けて「押せる物」に見えない。地色で面を作り、
   下向きの矢印を添えて「同じページの下へ飛ぶ」ことを示す。 */
.c-postContent .fs-qa-toc a {
	display: flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.55em 1.2em;
	color: var(--fs-color--brand);
	font-weight: 600;
	font-size: 0.88em;
	letter-spacing: 0.06em;
	line-height: 1.6;
	text-decoration: none;
	background-color: var(--fs-color--brand--pale);
	border: solid 1px var(--fs-color--brand--line);
	border-radius: var(--fs-radius--md);
	transition: color var(--fs-dur) var(--fs-ease), background-color var(--fs-dur) var(--fs-ease), border-color var(--fs-dur) var(--fs-ease);
}

/* 矢印は装飾なので、対応ブラウザでは読み上げ対象から外す（/ "" の部分）。
   未対応でも「↓」と読まれるだけで、意味は壊れない。 */
.c-postContent .fs-qa-toc a::after {
	font-size: 0.85em;
	line-height: 1;
	content: "↓" / "";
}

.c-postContent .fs-qa-toc a:hover,
.c-postContent .fs-qa-toc a:focus-visible {
	color: #fff;
	background-color: var(--fs-color--brand);
	border-color: var(--fs-color--brand);
}

/* 目次から飛んだとき、固定ヘッダーの裏に見出しが潜り込まないようにする */
.c-postContent .ark-block-heading[id] {
	scroll-margin-top: calc(var(--ark-header_height, 60px) + var(--ark-adminbar_height, 0px) + 1.5rem);
}


/* --------------------------------------------------------------------------
   12-2. Q&A ブロック本体（1問 = 1カード）
   -------------------------------------------------------------------------- */

/* Q/A バッジの色。Arkhe 既定の #333 は本文の文字色とほぼ同じで目印にならない。
   この変数ひとつで Q の地色と A の枠線の両方が変わる。 */
.c-postContent .ark-block-faq {
	--arkb-qa_color: var(--fs-color--brand);
}

/* 1問ごとをカードにする。罫線1本の区切りだと、回答が4〜5行あるページでは
   どこまでが1問なのか目で追えない。面で囲むと、余白を増やさずに区切りが立つ。
   overflow は、質問の地色をカードの角丸どおりに切り抜くため。 */
.c-postContent .ark-block-faq__item {
	overflow: hidden;
	background-color: #fff;
	border: solid 1px var(--fs-color--brand--line);
	border-radius: var(--fs-radius--lg);
	box-shadow: var(--fs-shadow--flat);
}

/* 親テーマは2問目以降に「上余白 + 上罫線」を付ける。カードでは枠線が区切りに
   なるので余白だけ残し、罫線の色はカードの枠と揃える（消すと角が欠ける）。 */
.c-postContent .ark-block-faq__item + .ark-block-faq__item {
	margin-top: 1.1em;
	padding-top: 0;
	border-top-color: var(--fs-color--brand--line);
}

/* 質問。カード内の見出しにあたる部分。地色を敷いて回答と切り分けると、
   ページを飛ばし読みするときに質問だけを拾える。 */
.c-postContent .ark-block-faq__q {
	padding: 1.2em 1.5em 1.2em 3.6rem;
	color: var(--fs-color--ink);
	/* 質問はカード内の見出しにあたるので、書体を h1〜h3 と揃える */
	font-family: var(--fs-font--serif);
	font-size: 1.05em;
	font-weight: 600;
	line-height: 1.85;
	letter-spacing: 0.06em;
	background-color: var(--fs-color--brand--pale);
	border-bottom: solid 1px var(--fs-color--brand--line);
}

/* 回答。3〜5行の説明が続くので、本文（1.9）と同じだけ行間を確保する */
.c-postContent .ark-block-faq__a {
	padding: 1.35em 1.5em 1.5em 3.6rem;
	line-height: 2.05;
}

/* Q/A バッジ。親テーマは em 基準なので、文字が大きい質問側だけバッジが育ち、
   質問と回答の文頭が数 px ずれる。rem に統一して同じ寸法・同じ位置に置く。 */
.c-postContent .ark-block-faq__q::before,
.c-postContent .ark-block-faq__a::before {
	top: 1.15rem;
	left: 1.15rem;
	width: 1.7rem;
	font-weight: 700;
	font-size: 0.8rem;
	line-height: 1.7rem;
	letter-spacing: 0;
	border-radius: var(--fs-radius--sm);
}

/* A バッジは枠線だけなので、地色が透けないように白で塗る */
.c-postContent .ark-block-faq__a::before {
	background-color: #fff;
}

/* 回答中の箇条書き。既定のままだと Q/A バッジの列と左端が揃わず、
   どこからが箇条書きなのか分かりにくい。 */
.c-postContent .ark-block-faq__a .wp-block-list {
	margin: 0.8em 0 0;
	padding-left: 1.3em;
}

.c-postContent .ark-block-faq__a .wp-block-list li + li {
	margin-top: 0.5em;
}

/* 行頭の記号もブランド色にして、箇条書きが本文から浮き上がるようにする */
.c-postContent .ark-block-faq__a .wp-block-list li::marker {
	color: var(--fs-color--brand);
}

/* セクションの切り替わり。カテゴリが6つあるので、見出しの手前を大きく空けて
   「章が変わった」ことを余白で示す。 */
.c-postContent .ark-block-faq + .ark-block-heading {
	margin-top: 4em;
}


/* --------------------------------------------------------------------------
   12-3. 左の固定目次（広い画面）

   本文を2カラムに組み替え、左に目次を貼り付けたまま追従させる。
   これで「何カテゴリあるか」「どのくらいの量か」「今どこを読んでいるか」が
   スクロール中も画面から消えない。

   ページIDではなく :has() で「目次を含む本文」を条件にしている。ID で縛ると
   ページを作り直したときに黙って効かなくなり、原因に気付きにくいため。
   -------------------------------------------------------------------------- */

@media screen and (min-width: 1000px) {

	.c-postContent:has(> .fs-qa-toc) {
		display: grid;
		grid-template-columns: 15rem minmax(0, 54rem);
		column-gap: var(--fs-space--block);
		align-items: start;
	}

	/* 目次以外はすべて右カラムへ。左カラムは目次専用にする */
	.c-postContent:has(> .fs-qa-toc) > * {
		grid-column: 2;
	}

	.c-postContent > .fs-qa-toc {
		position: sticky;
		top: calc(var(--ark-header_height, 60px) + var(--ark-adminbar_height, 0px) + 1.5rem);

		/* 全行にまたがらせた上で align-self: start で高さを内容分に留める。
		   これで本文の最後まで sticky が効く。span -1 は暗黙の行には届かない
		   ので、行数より十分大きい値を指定している。 */
		grid-row: 1 / span 99;
		grid-column: 1;
		align-self: start;

		flex-direction: column;
		gap: 0;
		margin: 0;
		padding: 0;

		/* 縦の細い罫線を1本通し、現在地だけ濃い線で上書きする */
		border-left: solid 1px var(--fs-color--brand--line);
	}

	/* チップの装飾（丸い地色・枠・矢印）を解いて、静かな一覧に戻す */
	.c-postContent > .fs-qa-toc a {
		position: relative;
		justify-content: flex-start;
		padding: 0.62rem 0 0.62rem 1rem;
		color: var(--fs-color--muted);
		font-weight: 500;
		font-size: 0.9375rem;
		background-color: transparent;
		border: none;
		border-radius: 0;
	}

	.c-postContent > .fs-qa-toc a::after {
		display: none;
	}

	/* 現在地の縦棒。ul の罫線にちょうど重ねる */
	.c-postContent > .fs-qa-toc a::before {
		position: absolute;
		top: 0.3rem;
		bottom: 0.3rem;
		left: -1px;
		width: 1px;
		background-color: var(--fs-color--gold);
		transform: scaleY(0);
		transform-origin: top center;
		transition: transform var(--fs-dur) var(--fs-ease);
		content: "";
	}

	.c-postContent > .fs-qa-toc a:hover,
	.c-postContent > .fs-qa-toc a:focus-visible {
		color: var(--fs-color--brand);
		background-color: transparent;
	}

	/* aria-current は qa-toc.js がスクロール位置に応じて付け替える */
	.c-postContent > .fs-qa-toc a[aria-current] {
		color: var(--fs-color--brand);
		font-weight: 700;
	}

	.c-postContent > .fs-qa-toc a[aria-current]::before {
		transform: scaleY(1);
	}

	/* カテゴリごとの問数。読む前に量を見積もれるようにするための数字なので、
	   本文より弱く、桁が変わっても縦に揃うようにする。 */
	.c-postContent .fs-qa-toc__count {
		margin-left: auto;
		padding-left: 0.6em;
		color: var(--fs-color--muted);
		font-weight: 400;
		font-size: 0.8125rem;
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
		opacity: 0.8;
	}
}

@media (prefers-reduced-motion: reduce) {

	.c-postContent > .fs-qa-toc a::before {
		transition: none;
	}
}


/* --------------------------------------------------------------------------
   12-4. 狭い画面
   -------------------------------------------------------------------------- */

/* サイドバーにならない幅では、チップが横に伸びるだけなので問数は出さない */
@media screen and (max-width: 999px) {

	.c-postContent .fs-qa-toc__count {
		display: none;
	}
}

@media screen and (max-width: 599px) {

	/* 画面幅いっぱいまでチップが伸びると押しにくいので、字間と余白を詰める */
	.c-postContent .fs-qa-toc {
		gap: 0.5em;
		margin-bottom: 2.5em;
	}

	.c-postContent .fs-qa-toc a {
		padding: 0.45em 0.95em;
		font-size: 0.85em;
	}

	/* Q/A バッジのぶんの左インデントが、狭い画面では本文を圧迫する */
	.c-postContent .ark-block-faq__q {
		padding: 0.9em 1.05em 0.9em 3rem;
		font-size: 1em;
	}

	.c-postContent .ark-block-faq__a {
		padding: 1em 1.05em 1.1em 3rem;
	}

	.c-postContent .ark-block-faq__q::before,
	.c-postContent .ark-block-faq__a::before {
		top: 1rem;
		left: 0.85rem;
		width: 1.5rem;
		font-size: 0.72rem;
		line-height: 1.5rem;
	}

	.c-postContent .ark-block-faq__item + .ark-block-faq__item {
		margin-top: 0.8em;
	}

	.c-postContent .ark-block-faq + .ark-block-heading {
		margin-top: 3em;
	}
}


/* ==========================================================================
   13. 各事業の詳細ページ（/freestudy/ ほか4ページ）

   1枚の文書ではなく、事業紹介ページとして組む。白地と色帯を交互に重ね、
   節の切れ目を「面」で見せる。読者は文章を読む前に、ページが何段構えなのかを
   面の切り替わりで把握できる。

   構成:
     導入（白）→ こんな方に（帯）→ 特徴（白）→ ストーリー（帯）
     → ご利用にあたって（白）→ お問い合わせ（ブランド色の帯）

   【マークアップ側の対応】
   帯は Arkhe Blocks のセクションブロック。カードは1つのリストで、
   並べ方は CSS の grid に任せている。ブロックを入れ子にして箱を作ると
   エディタ側の出力と食い違いやすいため。

   本文の先頭にヒーロー画像は置かない。Arkhe がアイキャッチをページ見出しの
   背景として既に描いており、置くと同じ画像が縦に2枚並ぶことになる。
   ========================================================================== */

/* --------------------------------------------------------------------------
   13-1. 導入
   ページを開いて最初に読む部分。結論を大きく、説明をその下に。
   -------------------------------------------------------------------------- */

.c-postContent .p-svcPage__catch {
	margin-block: 0.5em 0;
	/* ページの結論にあたる一文。見出しと同じ書体で組む */
	font-family: var(--fs-font--serif);
	font-size: clamp(1.3rem, 3.2vw, 1.75rem);
	font-weight: 600;
	line-height: 1.85;
	letter-spacing: 0.08em;
	color: var(--fs-color--ink);
	text-wrap: balance;
}

.c-postContent .p-svcPage__intro {
	margin-block: 1.8em 0;
	max-width: 44em;
	font-size: 1.03rem;
	line-height: 2.2;
	letter-spacing: 0.04em;
	color: var(--fs-color--muted);
}


/* --------------------------------------------------------------------------
   13-2. 節見出し
   サービス一覧のサービス名と同じ短い下線バーを使い、語彙を揃える。
   -------------------------------------------------------------------------- */

.c-postContent .p-svcPage__h2 {
	margin-block: 0 1.8em;
	padding: 0 0 0.7rem;
	border: none;
	background-image: linear-gradient(
		90deg,
		var(--fs-color--gold),
		rgb(169 133 69 / 0%)
	);
	background-repeat: no-repeat;
	background-size: 2.5rem 1px;
	background-position: left bottom;
	color: var(--fs-color--brand);
	font-size: clamp(1.3rem, 3vw, 1.6rem);
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.12em;
}

/* 白地の節は上に大きく余白を取る。帯は帯自身の padding で間を作る。 */
.c-postContent .p-svcPage__intro + .ark-block-section,
.c-postContent .ark-block-section + .p-svcPage__h2 {
	margin-top: clamp(3.5rem, 8vw, 5.5rem);
}


/* --------------------------------------------------------------------------
   13-3. 帯（Arkhe セクションブロック）
   -------------------------------------------------------------------------- */

/* 帯の内側の幅は、白地の本文と同じ 1200px に揃える。
   狭くすると帯だけ見出しの左端が内側へ入り、面が切り替わるたびに
   文字の頭がずれて落ち着かない。 */
.c-postContent .p-svcPage__band .ark-block-section__bodyInner,
.c-postContent .p-svcPage__cta .ark-block-section__bodyInner {
	max-width: 1200px;
	margin-inline: auto;
	padding-block: clamp(3.5rem, 8vw, 5.5rem);
}

/* 帯の地。単なるグレーではなくブランドの青へわずかに寄せる。 */
.c-postContent .p-svcPage__band .ark-block-section__color {
	background-image: linear-gradient(180deg, #faf8f2, #f4f0e6);
}

/* 帯の手前の余白。直前が白地の文章でも仕様リストでも同じだけ空ける。
   隣接セレクタで書き分けると、要素が増えるたびに抜けが出る。 */
.c-postContent .p-svcPage__band,
.c-postContent .p-svcPage__cta {
	margin-top: clamp(3.5rem, 8vw, 5.5rem);
}


/* --------------------------------------------------------------------------
   13-4. こんな方に向いています

   2列のカード。1行1項目の箇条書きだと「読む」対象になるが、
   カードにすると「自分に当てはまるか探す」対象になる。
   -------------------------------------------------------------------------- */

.c-postContent .p-svcPage__whom {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-postContent .p-svcPage__whom li {
	position: relative;
	margin: 0;
	padding: 1.5rem 1.6rem 1.5rem 3.3rem;
	border: 1px solid var(--fs-color--brand--line);
	border-radius: var(--fs-radius--lg);
	background-color: #fff;
	box-shadow: var(--fs-shadow--flat);
	font-size: 0.95rem;
	line-height: 1.95;
	letter-spacing: 0.03em;
}

/* チェック印は CSS だけで描く。画像もフォントも増やさない。 */
.c-postContent .p-svcPage__whom li::before {
	position: absolute;
	top: 1.75em;
	left: 1.4rem;
	width: 0.5em;
	height: 0.85em;
	border-right: 2px solid var(--fs-color--gold);
	border-bottom: 2px solid var(--fs-color--gold);
	transform: translateY(-70%) rotate(45deg);
	content: "";
}


/* --------------------------------------------------------------------------
   13-5. 特徴

   3列のカード。通し番号は装飾として大きく置く。ここは順序ではなく
   「3つある」という量を見せたい場所なので、数字が主役でも誤読にならない。
   -------------------------------------------------------------------------- */

.c-postContent .p-svcPage__features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: svcfeat;
}

.c-postContent .p-svcPage__features li {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	margin: 0;
	padding: 2.2rem 1.8rem 2.1rem;
	border: 1px solid var(--fs-color--brand--line);
	border-radius: var(--fs-radius--lg);
	background-color: #fff;
	box-shadow: var(--fs-shadow--flat);
	counter-increment: svcfeat;
}

/* 通し番号。薄く敷いた青は「消し忘れ」に見えていたので、
   セリフ体の金にして装飾だと分かる置き方にする。 */
.c-postContent .p-svcPage__features li::before {
	color: var(--fs-color--gold);
	font-family: var(--fs-font--num);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.1em;
	font-variant-numeric: tabular-nums;
	content: counter(svcfeat, decimal-leading-zero);
}

.c-postContent .p-svcPage__features li strong {
	color: var(--fs-color--ink);
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: 0.06em;
}

.c-postContent .p-svcPage__features li span {
	font-size: 0.9rem;
	line-height: 2;
	letter-spacing: 0.03em;
	color: var(--fs-color--muted);
}


/* --------------------------------------------------------------------------
   13-6. ストーリー
   原体験や実績。読ませる文章なので、1行を短くして中央に置く。
   -------------------------------------------------------------------------- */

/* 読ませる文章なので1行を短くする。ただし器ではなく段落側を絞る。
   器を狭めると見出しの左端が他の節とずれてしまう。 */
.c-postContent .p-svcPage__story {
	max-width: 44em;
	margin-block: 1.6em 0;
	font-size: 1rem;
	line-height: 2.2;
	letter-spacing: 0.04em;
	color: #3c4655;
}


/* --------------------------------------------------------------------------
   13-7. ご利用にあたって（仕様）

   罫線で区切った定義リスト。項目名を左に固定幅で置くと表らしくなるが、
   日本語のラベルは長さがまちまちなので、折り返しに強い縦積みにする。
   -------------------------------------------------------------------------- */

.c-postContent .p-svcPage__spec {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--fs-color--brand--line);
}

.c-postContent .p-svcPage__spec li {
	margin: 0;
	padding: 1.25em 0.2em;
	border-bottom: 1px solid var(--fs-color--brand--line);
	line-height: 2;
}

.c-postContent .p-svcPage__spec li strong {
	display: inline-block;
	min-width: 9em;
	color: var(--fs-color--brand);
	font-weight: 600;
	letter-spacing: 0.06em;
}


/* --------------------------------------------------------------------------
   13-5b. 帯のリード文と写真

   文字が続く区間に写真を1枚挟んで、読む速度を落とす。
   主役ではないので横長に切り、帯の仕切りとして働かせる。
   -------------------------------------------------------------------------- */

.c-postContent .p-svcPage__bandLead {
	max-width: 44em;
	margin-block: 0;
	font-size: 1rem;
	line-height: 2.2;
	letter-spacing: 0.04em;
	color: var(--fs-color--muted);
}

/* 写真は浮かせない。角を落として影で持ち上げると額装した写真に見えるが、
   紙面に直接刷った1枚として置いたほうが静かに収まる。 */
.c-postContent .p-svcPage__figure {
	margin: 3rem 0 0;
	border-radius: var(--fs-radius--lg);
	overflow: hidden;
	box-shadow: 0 18px 40px -34px rgb(16 29 56 / 50%);
}

.c-postContent .p-svcPage__figure img {
	display: block;
	width: 100%;
	aspect-ratio: 2.6 / 1;
	object-fit: cover;
}

/* 流れを書けるだけの情報がない事業は写真だけの帯になる。
   中身が1枚しかないので、上下の余白は詰める。 */
.c-postContent .p-svcPage__band--figure .ark-block-section__bodyInner {
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

.c-postContent .p-svcPage__band--figure .p-svcPage__figure {
	margin-top: 0;
}


/* --------------------------------------------------------------------------
   13-5c. 流れ（ステップ）

   番号の丸を縦線でつなぎ、順番があることを形で示す。
   ここは「特徴」と違って本当に順序があるので、番号が意味を持つ。

   ol ではなく ul で組み、番号は CSS カウンタで振っている。ol にすると
   ブラウザ既定のマーカーと自前の番号が二重に出るため。
   -------------------------------------------------------------------------- */

.c-postContent .p-svcPage__steps {
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: svcstep;
}

.c-postContent .p-svcPage__steps li {
	position: relative;
	margin: 0;
	padding: 0 0 2.2rem 4.2rem;
	counter-increment: svcstep;
}

.c-postContent .p-svcPage__steps li:last-child {
	padding-bottom: 0;
}

.c-postContent .p-svcPage__steps li::before {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border: 1px solid var(--fs-color--gold--line);
	border-radius: 50%;
	background-color: var(--fs-color--brand);
	color: #fff;
	font-family: var(--fs-font--num);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	content: counter(svcstep, decimal-leading-zero);
}

/* 丸と丸をつなぐ縦線。最後の項目からは伸ばさない。 */
.c-postContent .p-svcPage__steps li:not(:last-child)::after {
	position: absolute;
	top: 3rem;
	left: 1.3rem;
	width: 1px;
	height: calc(100% - 3.4rem);
	background-color: var(--fs-color--brand--line);
	content: "";
}

.c-postContent .p-svcPage__steps li strong {
	display: block;
	margin-bottom: 0.5em;
	padding-top: 0.35em;
	color: var(--fs-color--ink);
	font-size: 1.02rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.7;
}

.c-postContent .p-svcPage__steps li span {
	display: block;
	max-width: 44em;
	font-size: 0.92rem;
	line-height: 2.1;
	letter-spacing: 0.03em;
	color: var(--fs-color--muted);
}


/* --------------------------------------------------------------------------
   13-7b. ボタン（この4ページとサービス一覧で共通）

   節を整理したときにこの基本指定ごと消してしまい、CTA のボタンが
   左寄せ・枠線なしになった。CTA 帯側の指定（13-8）は色を塗り替える
   だけで、形と並びはここが持っている。片方だけ消さないこと。

   【詳細度の注意】
   Arkhe が .wp-block-button:not(.is-style-outline) .wp-block-button__link
   に地色を当てており詳細度が3。.c-postContent .wp-block-button__link の2では
   負けるので、.wp-block-button を挟んで3に揃えてある。

   並びと中央寄せもここで作る。ブロック側に layout 属性を付けると
   エディタが is-layout-flex などのクラスを出力し、手書きのマークアップと
   食い違ってブロック検証で壊れるため。
   -------------------------------------------------------------------------- */

.c-postContent .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.9rem;
	margin-top: 2em;
}

.c-postContent .wp-block-button .wp-block-button__link {
	padding: 1em 2.4em;
	border: 1px solid var(--fs-color--brand);
	border-radius: var(--fs-radius--md);
	background-color: var(--fs-color--brand);
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-decoration: none;
	transition: background-color var(--fs-dur) var(--fs-ease), color var(--fs-dur) var(--fs-ease), border-color var(--fs-dur) var(--fs-ease);
}

.c-postContent .wp-block-button .wp-block-button__link:hover,
.c-postContent .wp-block-button .wp-block-button__link:focus-visible {
	border-color: var(--fs-color--brand--dark);
	background-color: var(--fs-color--brand--dark);
}

/* 副ボタン。主役ではないので輪郭だけにする。 */
.c-postContent .wp-block-button.p-svcPage__btn--sub .wp-block-button__link {
	background-color: transparent;
	color: var(--fs-color--brand);
}

.c-postContent .wp-block-button.p-svcPage__btn--sub .wp-block-button__link:hover,
.c-postContent .wp-block-button.p-svcPage__btn--sub .wp-block-button__link:focus-visible {
	background-color: var(--fs-color--brand);
	color: #fff;
}


/* --------------------------------------------------------------------------
   13-8. お問い合わせの帯

   ページの結びをブランド色で塗る。ここだけ地が濃くなるので、
   中の文字とボタンは白側の配色に総取り替えする。
   -------------------------------------------------------------------------- */

/* 帯の地。本文側のセクションブロックは旧ブランドカラーを
   インラインの background-color で持っている。インラインは詳細度で
   勝てないが、background-image は指定されていないので、こちらを
   重ねれば競合せずに塗り替えられる（本文を触らずに済む）。 */
.c-postContent .p-svcPage__cta .ark-block-section__color {
	background-image: linear-gradient(160deg, #16365f 0%, #0a1f3f 55%, #061529 100%);
}

/* 上下に金の細線。5章の CTA 帯と同じ作りにして語彙を揃える。 */
.c-postContent .p-svcPage__cta {
	border-top: 1px solid var(--fs-color--gold--line);
	border-bottom: 1px solid var(--fs-color--gold--line);
}

.c-postContent .p-svcPage__ctaTitle {
	margin-block: 0 1em;
	padding: 0;
	border: none;
	background: none;
	color: #fff;
	font-size: clamp(1.25rem, 3vw, 1.6rem);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-align: center;
}

.c-postContent .p-svcPage__ctaLead {
	margin-block: 0;
	color: rgb(255 255 255 / 75%);
	font-size: 0.95rem;
	line-height: 2.1;
	letter-spacing: 0.04em;
	text-align: center;
}

.c-postContent .p-svcPage__cta .wp-block-buttons {
	margin-top: 2em;
}

/* 濃い地の上なので、主ボタンは白抜きにする。
   Arkhe の .wp-block-button:not(.is-style-outline) .wp-block-button__link は
   詳細度3なので、こちらも3以上で当てないと地色が戻る。 */
.c-postContent .p-svcPage__cta .wp-block-button .wp-block-button__link {
	border-color: #fff;
	background-color: #fff;
	color: var(--fs-color--brand);
}

.c-postContent .p-svcPage__cta .wp-block-button .wp-block-button__link:hover,
.c-postContent .p-svcPage__cta .wp-block-button .wp-block-button__link:focus-visible {
	border-color: var(--fs-color--gold--light);
	background-color: var(--fs-color--gold--light);
	color: var(--fs-color--brand--dark);
}

.c-postContent .p-svcPage__cta .wp-block-button.p-svcPage__btn--sub .wp-block-button__link {
	border-color: rgb(255 255 255 / 42%);
	background-color: transparent;
	color: #fff;
}

.c-postContent .p-svcPage__cta .wp-block-button.p-svcPage__btn--sub .wp-block-button__link:hover,
.c-postContent .p-svcPage__cta .wp-block-button.p-svcPage__btn--sub .wp-block-button__link:focus-visible {
	border-color: var(--fs-color--gold--light);
	background-color: rgb(255 255 255 / 8%);
	color: #fff;
}


/* --------------------------------------------------------------------------
   13-9. 狭い画面
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {

	.c-postContent .p-svcPage__whom,
	.c-postContent .p-svcPage__features {
		grid-template-columns: 1fr;
	}

	.c-postContent .p-svcPage__features li {
		padding: 1.5rem 1.3rem;
	}

	.c-postContent .p-svcPage__spec li strong {
		display: block;
		min-width: 0;
	}

	/* 番号の丸のぶん左が詰まるので、字下げを浅くする */
	.c-postContent .p-svcPage__steps li {
		padding-left: 3.4rem;
		padding-bottom: 1.8rem;
	}

	.c-postContent .p-svcPage__steps li::before {
		width: 2.2rem;
		height: 2.2rem;
		font-size: 0.82rem;
	}

	.c-postContent .p-svcPage__steps li:not(:last-child)::after {
		top: 2.6rem;
		left: 1.05rem;
		height: calc(100% - 3rem);
	}

	/* 横長のままだと帯状に潰れるので、縦を戻す */
	.c-postContent .p-svcPage__figure img {
		aspect-ratio: 16 / 10;
	}
}


/* --------------------------------------------------------------------------
   11-7. カード内の要点チップと詳細ページへの導線

   一覧に「条件がひと目で分かる情報」と「次の一歩」を足す。
   本文を読まなくても対象や価格が掴め、読んだ人はそのまま詳細へ進める。
   -------------------------------------------------------------------------- */

.c-postContent .arkp-gnRichClmn10 .p-svc__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-block: 1.5em 0;
}

.c-postContent .arkp-gnRichClmn10 .p-svc__tag {
	padding: 0.38em 0.9em;
	border: 1px solid var(--fs-color--brand--line);
	border-radius: var(--fs-radius--md);
	background-color: transparent;
	color: var(--fs-color--brand);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.c-postContent .arkp-gnRichClmn10 .p-svc__more {
	margin-block: 1.8em 0;
	padding-top: 1.5em;
	border-top: 1px solid var(--fs-color--brand--line);
}

.c-postContent .arkp-gnRichClmn10 .p-svc__more a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--fs-color--brand);
	font-weight: 600;
	font-size: 0.92rem;
	letter-spacing: 0.08em;
	text-decoration: none;
}

/* 矢印は文字ではなく罫線で描く。フォント依存の字形ぶれを避けるため。 */
.c-postContent .arkp-gnRichClmn10 .p-svc__more a::after {
	content: "";
	width: 0.42em;
	height: 0.42em;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s;
}

.c-postContent .arkp-gnRichClmn10 .p-svc__more a:hover,
.c-postContent .arkp-gnRichClmn10 .p-svc__more a:focus-visible {
	text-decoration: underline;
}

.c-postContent .arkp-gnRichClmn10 .p-svc__more a:hover::after {
	transform: rotate(45deg) translate(2px, -2px);
}


/* --------------------------------------------------------------------------
   11-8. 一覧の下に置く節（数字・お問い合わせ）

   見出しは 4-3 の .title2_freestudy と同じ下線グラデーションを使い、
   サイト内の中央寄せ見出しの語彙に合わせる。
   -------------------------------------------------------------------------- */

.c-postContent .p-svc__sectionTitle {
	margin-block: clamp(4.5rem, 10vw, 7rem) 0;
	padding-bottom: 0.75em;
	border: none;
	color: var(--fs-color--brand);
	font-size: clamp(1.3rem, 3.2vw, 1.65rem);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-align: center;

	background-repeat: no-repeat;
	background-size: 5rem 1px;
	background-position: center bottom;
	background-image: linear-gradient(
		90deg,
		rgb(169 133 69 / 0%),
		var(--fs-color--gold) 30%,
		var(--fs-color--gold) 70%,
		rgb(169 133 69 / 0%)
	);
}

/* 見出しの直後に来るリード文は、上の余白を節側で持たせる */
.c-postContent .p-svc__sectionTitle + .p-svc__lead {
	margin-top: 2em;
}

/* --- 数字 --- */
.c-postContent .p-svc__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin: 3rem 0 0;
	padding: 0;
	list-style: none;
	/* 罫線は背景で作る。セルごとに border を引くと角で二重になる。 */
	background-color: var(--fs-color--brand--line);
	border: 1px solid var(--fs-color--brand--line);
	border-radius: var(--fs-radius--lg);
	overflow: hidden;
}

.c-postContent .p-svc__stats li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	margin: 0;
	padding: 1.9rem 1rem;
	background-color: #fff;
	text-align: center;
}

.c-postContent .p-svc__stats li strong {
	color: var(--fs-color--brand);
	/* 14-2 の .fs-figures__num と同じ組み。同じ「数字の提示」が
	   ページごとに違う書体だと、寄せ集めに見える。 */
	font-family: var(--fs-font--num);
	font-size: clamp(1.5rem, 3.8vw, 2.1rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

.c-postContent .p-svc__stats li span {
	color: var(--fs-color--muted);
	font-size: 0.76rem;
	line-height: 1.6;
	letter-spacing: 0.12em;
}

@media screen and (max-width: 767px) {
	.c-postContent .p-svc__stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.c-postContent .p-svc__stats li {
		padding: 1.4rem 0.8rem;
	}
}


/* ==========================================================================
   14. 企業情報ページ（/会社概要/）

   「代表挨拶 → 数字 → 企業概要 → お問い合わせ」の4節。

   このページは元々、他ページより先に手を入れたため独自の見た目を持っていた。
   その後サイト全体の語彙（11-8 の数字、13-6 のボタン）が固まったので、
   ここでそちらに合わせ直す。具体的には次の3点。

     1. 数字は 11-8 と同じ「1pxの罫線で仕切ったグリッド」にする
        （バラバラのカードを並べる形をやめる）
     2. ボタンは 13-6 に任せる。ここで作り直すとこのページだけ角丸が変わる
     3. 生の値をやめ、間隔・角丸・影・色をトークンから取る

   【マークアップ側の対応】
   .fs-figures / .fs-company-table / .fs-cta__lead（いずれも要マークアップ）。
   代表挨拶は Arkhe のパターン由来のクラスにそのまま当てる。
   ========================================================================== */


/* --------------------------------------------------------------------------
   14-1. 代表挨拶

   元は「テキスト60% + 代表写真40%」の2カラムパターンで、画像側を削除した
   状態のまま公開されていた。PC で右に4割の空白が残るので、幅いっぱいに
   広げたうえで読みやすい行長に絞って中央に置く。

   パターン付属の CSS ブロックは本文から削除済みなので、見出しの積み方や
   署名の体裁もここで持つ。
   -------------------------------------------------------------------------- */

.c-postContent .arkp-scGreeting01 .ark-block-columns__inner {
	justify-content: center;
}

/* カラム幅はブロックが body 内の <style> で後出しするが、
   クラス3つぶんの詳細度でこちらが勝つので読み込み順を気にしなくてよい。 */
.c-postContent .arkp-scGreeting01 .arkb-columns__item {
	--arkb-clmn-w--pc: 100%;
	max-width: var(--fs-width--text);
}

.c-postContent .arkp-scGreeting01 .ark-block-heading {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: var(--fs-space--card);
}

/* 事業の対象を示す一文。読み飛ばされて困る情報なので、
   薄い文字で控えめに見せるのではなく、色で階層を作る。 */
.c-postContent .arkp-scGreeting01 .ark-block-heading__sub {
	color: var(--fs-color--brand);
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: 0.12em;
}

.c-postContent .arkp-scGreeting01 .ark-block-heading__main {
	font-size: var(--fs-text--lead);
	font-weight: 600;
	line-height: 1.8;
	letter-spacing: 0.1em;
}

/* 署名。手紙と同じく右に寄せると、本文の左揃えと区別がついて
   「ここで挨拶は終わり」が読み手に伝わる。 */
.c-postContent .arkp-scGreeting01__name {
	margin-top: var(--fs-space--card);
	/* 署名。手書きの署名に近い印象になるよう、本文より字間を開けた明朝で組む */
	font-family: var(--fs-font--serif);
	color: var(--fs-color--ink);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-align: right;
}


/* --------------------------------------------------------------------------
   14-2. 数字で見る FreeStudy

   サービス一覧の 11-8 と同じ形にする。同じ「数字の提示」が
   ページごとに違う見た目だと、サイト全体が寄せ集めに見えるため。

   罫線は 1px の隙間を背景色で見せて作る。セルごとに border を引くと
   角で二重になる。
   -------------------------------------------------------------------------- */

.c-postContent .fs-figures {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	overflow: hidden;
	background-color: var(--fs-color--brand--line);
	border: solid 1px var(--fs-color--brand--line);
	border-radius: var(--fs-radius--lg);
}

.c-postContent .fs-figures .wp-block-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	padding: var(--fs-space--card);
	background-color: #fff;
	text-align: center;
}

/* 数値。桁の揃った等幅数字にしないと、3枚並べたとき下端がわずかにずれる */
.c-postContent .fs-figures__num {
	margin: 0;
	color: var(--fs-color--brand);
	font-family: var(--fs-font--num);
	font-size: clamp(1.5rem, 3.8vw, 2.1rem);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	letter-spacing: 0.04em;
}

/* 説明は数値の意味づけなので、小さく・落ち着いた色で数値に従属させる */
.c-postContent .fs-figures__label {
	margin: 0;
	color: var(--fs-color--muted);
	font-size: 0.76rem;
	line-height: 1.6;
	letter-spacing: 0.12em;
}


/* --------------------------------------------------------------------------
   14-3. 企業概要・沿革の表

   WordPress 標準の表は td に border: 1px solid（＝本文と同じ濃さ）が当たり、
   格子のほうが中身より目立つ。縦罫を消し、横罫も存在が分かる程度に薄くして、
   行の区切りは余白で作る。

   沿革の表（.fs-history-table）は現在の本文では使っていないが、
   同じ体裁で戻せるよう指定は残してある。
   -------------------------------------------------------------------------- */

.c-postContent .fs-company-table,
.c-postContent .fs-history-table {
	max-width: 720px;
	margin-right: auto;
	margin-left: auto;
	overflow: hidden;
	background-color: #fff;
	border: solid 1px var(--fs-color--brand--line);
	border-radius: var(--fs-radius--lg);
	box-shadow: var(--fs-shadow--flat);
}

.c-postContent .fs-company-table td,
.c-postContent .fs-history-table td {
	padding: 1.3em 1.5em;
	line-height: 1.95;
	vertical-align: top;
	border: 0;
	border-bottom: solid 1px var(--fs-color--brand--line);
}

.c-postContent .fs-company-table tr:last-child td,
.c-postContent .fs-history-table tr:last-child td {
	border-bottom: 0;
}

/* 項目名の列。幅を決めないと「代表」と「サービス開始」で列幅が揺れ、
   値の開始位置が行ごとにずれて視線が引っかかる。 */
.c-postContent .fs-company-table td:first-child {
	width: 9.5em;
	background-color: var(--fs-color--brand--pale);
	color: var(--fs-color--ink);
	font-weight: 600;
	letter-spacing: 0.06em;
}

/* 事業内容は <br> 区切りで4事業ぶん入る。1事業ずつ拾えるよう行間を空ける */
.c-postContent .fs-company-table td:last-child {
	line-height: 2.1;
}

.c-postContent .fs-history-table td:first-child {
	width: 8em;
	color: var(--fs-color--brand);
	font-family: var(--fs-font--num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}


/* --------------------------------------------------------------------------
   14-4. お問い合わせ導線

   ボタンの形（ピル型・中央寄せ・間隔）は 13-6 が決めている。
   ここで作り直すとこのページだけ別のボタンになるので触らない。
   持たせるのはリード文の体裁と、輪郭だけの副ボタンの扱いだけ。
   -------------------------------------------------------------------------- */

.c-postContent .fs-cta__lead {
	margin-bottom: 0;
	color: var(--fs-color--muted);
}

/* 副ボタン（サービス一覧を見る）。13-6 の .p-svcPage__btn--sub と同じ考え方で、
   主役ではないので輪郭だけにする。Arkhe が詳細度3で地色を当てているため、
   こちらも .wp-block-button を挟んで3に揃える。 */
.c-postContent .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--fs-color--brand);
}

.c-postContent .wp-block-button.is-style-outline .wp-block-button__link:hover,
.c-postContent .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--fs-color--brand);
	color: #fff;
}


/* --------------------------------------------------------------------------
   14-5. 狭い画面
   -------------------------------------------------------------------------- */

@media screen and (max-width: 599px) {
	/* 数字は3枚。2列にすると3枚目だけ空きマスができるので、素直に縦に積む */
	.c-postContent .fs-figures {
		grid-template-columns: 1fr;
	}

	.c-postContent .fs-company-table td,
	.c-postContent .fs-history-table td {
		padding: 0.9em 1em;
	}

	.c-postContent .fs-company-table td:first-child {
		width: 6.2em;
		font-size: 0.92em;
	}

	.c-postContent .fs-history-table td:first-child {
		width: 5.5em;
		font-size: 0.92em;
	}
}


/* ==========================================================================
   14. 企業情報ページ（/会社概要/）の画像まわり

   節7（代表挨拶・企業概要の表・数字・沿革）は別途組んである。
   ここは後から足した「4つの事業のカード」と「節に添える写真」だけを扱う。
   節7を編集するときにこちらを巻き込まないよう、独立した節にしてある。

   【マークアップ側の対応】
   カードは core/columns + core/column。このページで既に動いている
   fs-figures と同じ書き方（レイアウトクラスなし）に合わせている。
   group で囲む案もあったが、レイアウト属性の出力がエディタとずれると
   ブロック検証で壊れるため、実績のある形を選んだ。
   ========================================================================== */

/* --------------------------------------------------------------------------
   14-1. 4つの事業のカード
   -------------------------------------------------------------------------- */

/* core/columns は theme.json の無いテーマだと flex にならないことがある。
   並べ方はこちらで確定させる。 */
.c-postContent .p-about__bizRow {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	margin-top: 2.5rem;
}

.c-postContent .p-about__bizRow + .p-about__bizRow {
	margin-top: 1.5rem;
}

.c-postContent .p-about__bizCard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin: 0;
	border: 1px solid var(--fs-color--brand--line);
	border-radius: 1rem;
	background-color: #fff;
	box-shadow: 0 16px 34px -22px rgb(18 48 92 / 30%);
}

.c-postContent .p-about__bizImg {
	margin: 0;
}

.c-postContent .p-about__bizImg img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.c-postContent .p-about__bizCat {
	margin: 0;
	padding: 1.5rem 1.6rem 0;
	color: var(--fs-color--brand);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.6;
}

.c-postContent .p-about__bizName {
	margin: 0.45em 0 0;
	padding: 0 1.6rem;
	border: none;
	background: none;
	color: var(--fs-color--ink);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.5;
}

.c-postContent .p-about__bizText {
	margin: 0.9em 0 0;
	padding: 0 1.6rem;
	font-size: 0.93rem;
	line-height: 1.9;
}

/* margin-top: auto でカードの高さが揃っても導線が下端に貼りつく */
.c-postContent .p-about__bizMore {
	margin: auto 0 0;
	padding: 1.4rem 1.6rem 1.6rem;
}

.c-postContent .p-about__bizMore a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--fs-color--brand);
	font-size: 0.92rem;
	font-weight: 700;
	text-decoration: none;
}

/* 矢印は文字ではなく罫線で描く。フォント依存の字形ぶれを避けるため。 */
.c-postContent .p-about__bizMore a::after {
	width: 0.4em;
	height: 0.4em;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s;
	content: "";
}

.c-postContent .p-about__bizMore a:hover,
.c-postContent .p-about__bizMore a:focus-visible {
	text-decoration: underline;
}

.c-postContent .p-about__bizMore a:hover::after {
	transform: rotate(45deg) translate(2px, -2px);
}


/* --------------------------------------------------------------------------
   14-2. 節に添える写真

   文章が続く区間を切るための一枚。主役ではないので横長に切る。
   -------------------------------------------------------------------------- */

.c-postContent .p-about__figure {
	margin: 2.5rem 0 0;
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 18px 40px -24px rgb(18 48 92 / 35%);
}

.c-postContent .p-about__figure img {
	display: block;
	width: 100%;
	aspect-ratio: 2.6 / 1;
	object-fit: cover;
}


/* --------------------------------------------------------------------------
   14-3. 狭い画面
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {

	.c-postContent .p-about__bizRow {
		grid-template-columns: 1fr;
		gap: 1.2rem;
	}

	.c-postContent .p-about__bizRow + .p-about__bizRow {
		margin-top: 1.2rem;
	}

	/* 横長のままだと帯状に潰れるので縦を戻す */
	.c-postContent .p-about__figure img {
		aspect-ratio: 16 / 10;
	}
}


/* --------------------------------------------------------------------------
   14-4. 後から足した節（課題・教え方・パートナー・学校向け）

   カードは画像なしの版。14-1 の事業カードは写真が主役だが、こちらは
   文章が主役なので、余白を広く取って読ませる作りにしている。
   -------------------------------------------------------------------------- */

/* 節のリード文。見出しの直下に置き、中央寄せで短くまとめる。 */
.c-postContent .p-about__lead {
	max-width: 42em;
	margin-inline: auto;
	margin-block: 0 2.5rem;
	text-align: center;
	font-size: 1.0125rem;
	line-height: 2;
	color: var(--fs-color--muted, #4a5260);
	/* 中央寄せの日本語は文節の途中で割れると読みにくい */
	word-break: auto-phrase;
}

.c-postContent .p-about__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
	margin-top: 0;
}

.c-postContent .p-about__card {
	margin: 0;
	padding: 2rem 1.8rem;
	border: 1px solid var(--fs-color--brand--line);
	border-radius: 1rem;
	background-color: #fff;
	box-shadow: 0 16px 34px -24px rgb(18 48 92 / 28%);
}

.c-postContent .p-about__cardTitle {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	color: var(--fs-color--brand);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.5;
}

.c-postContent .p-about__cardText {
	margin: 1em 0 0;
	font-size: 0.94rem;
	line-height: 1.95;
}


/* --- パートナーの特典 --- */

.c-postContent .p-about__benefits {
	margin: 1.2em 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--fs-color--brand--line);
}

.c-postContent .p-about__benefits li {
	position: relative;
	margin: 0;
	padding: 0.85em 0 0.85em 2em;
	border-bottom: 1px solid var(--fs-color--brand--line);
	line-height: 1.8;
}

/* チェック印は CSS だけで描く。画像もフォントも増やさない。 */
.c-postContent .p-about__benefits li::before {
	position: absolute;
	top: 1.55em;
	left: 0.35em;
	width: 0.45em;
	height: 0.8em;
	border-right: 2px solid var(--fs-color--brand);
	border-bottom: 2px solid var(--fs-color--brand);
	transform: translateY(-70%) rotate(45deg);
	content: "";
}


/* --- 代表プロフィール --- */

.c-postContent .p-about__profName {
	margin-block: 0 0.8em;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
}

.c-postContent .p-about__profName strong {
	color: var(--fs-color--ink);
	font-size: 1.2rem;
	font-weight: 700;
}


@media screen and (max-width: 767px) {

	.c-postContent .p-about__cards {
		grid-template-columns: 1fr;
		gap: 1.2rem;
	}

	.c-postContent .p-about__card {
		padding: 1.6rem 1.4rem;
	}
}