@charset "UTF-8";
/* =============================================================
 * components.css v0.5.9  (2026-04-19)
 *   [v0.5.9] 文字化け対策:
 *     - 先頭に @charset "UTF-8"; を追加
 *     - c-btn--arrow の content を "→" から "\2192" に変更
 *       （Content-Type に charset が無い環境での â†' 文字化けを解消）
 * -------------------------------------------------------------
 * components.css v0.5.8  (2026-04-18)
 *   [v0.5.8] 仕上げ:
 *     - セクション余白をテンプレートの --section-py に戻す
 *       （clamp(3rem, 7vw, 5.5rem) = 48〜88px）
 *     - 下層ページの背景交互（alt/white）を統一
 *
 *   [v0.5.7] breadcrumb 独立表示に復帰:
 *     - MV 外の独立した白帯に戻す
 *     - padding-block: var(--sp-4) (16px) で視認性確保
 *     - wpautop の空 <p> は display:none で既に処理済みなので
 *       白帯を復活させても余計な余白は出ない
 *
 *   [v0.5.6] 白帯の真犯人発見!
 *     - Gutenberg の wpautop が HTML コメントを
 *       <p><!-- --></p> に変換していて、その p のデフォルト
 *       margin が白帯の正体だった。
 *     - .l-main > p を display:none で完全非表示化。
 *
 *   [v0.5.5] 根本アプローチ変更:
 *     - breadcrumb を MV(l-page-header)内に統合。白帯を廃止。
 *     - breadcrumb CSS はオリジナル準拠（padding/margin なし）
 *     - セクション余白を clamp(2.5rem, 5vw, 4rem) に調整
 *
 *   [v0.5.4] PHP 側含む根本修正:
 *     - 矢印アイコンを Unicode "→" に置換（SVG マスクの環境依存を回避）
 *     - breadcrumb HTML を moneystep_breadcrumb() 側で圧縮出力に
 *     - page.php の breadcrumb 外側ラッパー削除
 *
 *   [v0.5.3] 微調整:
 *     - セクション余白を sp-5(24px) → sp-6(32px) に戻す
 *       （v0.5.1 で全部 24px にしたら詰まりすぎだった反省）
 *     - breadcrumb の padding 0 + line-height 1.2 でさらにタイトに
 *
 *   [v0.5.2] 3件修正:
 *     - 矢印アイコン ■ 化解消（SVG を stroke→fill ベースに変更、
 *       -webkit-mask / mask-size フォールバック追加）
 *     - contact SELECT を青→薄グレーに（--brand→--alt）
 *     - breadcrumb padding/margin を完全固定
 *
 *   [v0.5.1] ページ間の余白統一:
 *     - l-section / --alt / --brand すべて 24px に統一
 *     - メディア/コンタクトで余白差が出ていたのを解消
 *
 *   [v0.5] コンパクト化ラウンド:
 *     - breadcrumb padding を極限まで圧縮
 *     - section 垂直余白を大幅カット
 *     - l-section--brand（CTAセクション）の余白を固定24px に
 *     - l-section__header の下マージンを 16px に
 *     （View Source で cssのURLを開き /* v0.5 */ が見えていれば反映済み）
 *
 * 変更点: wp:button の二重ボーダー問題を修正。
 *   ラッパ（.wp-block-button）を明示的にリセットし、
 *   スタイルはすべて中の <a.wp-block-button__link> に当てる。
 * ========================================================== */

/* --------------------------------------------------------
 * Icon Data URIs — CSS mask で使うSVG
 * -------------------------------------------------------- */
:root {
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M13.22 4.47a.75.75 0 0 1 1.06 0l6.75 6.75a1.06 1.06 0 0 1 0 1.56l-6.75 6.75a.75.75 0 1 1-1.06-1.06l5.47-5.47H3.75a.75.75 0 0 1 0-1.5h14.94L13.22 5.53a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
  --icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9.22 5.47a.75.75 0 0 1 1.06 0l6 6a.75.75 0 0 1 0 1.06l-6 6a.75.75 0 1 1-1.06-1.06L14.69 12 9.22 6.53a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------
 * Icon — SVGスプライト用
 * -------------------------------------------------------- */
.c-icon {
  width: var(--icon-md);
  height: var(--icon-md);
  stroke: currentColor;
  fill: none;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  vertical-align: middle;
}
.c-icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.c-icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.c-icon--xl { width: var(--icon-xl); height: var(--icon-xl); }

/* =============================================================
 * Buttons
 *
 * 2つの使い方を同じクラスで両立:
 *   (1) 素のHTML:     <a class="c-btn c-btn--primary">...</a>
 *   (2) Gutenberg:    wp:button ブロックの「追加CSSクラス」に
 *                     c-btn c-btn--primary を指定
 *
 * 実装ポイント:
 *   - wp:button のラッパ(div.wp-block-button)はスタイルをリセット
 *   - スタイルはリンク要素(a.wp-block-button__link)のみに当てる
 *   - これにより「ラッパと中身の二重ボーダー」を防ぐ
 * ========================================================== */

/* --------------------------------------------------------
 * wp:button ラッパ（div）— 見た目関連をすべてリセット
 *   CSS変数を使わずゼロ値で確実にクリア。
 * -------------------------------------------------------- */
.wp-block-button.c-btn {
  display: inline-block;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  box-shadow: none;
  width: auto;
}

/* --------------------------------------------------------
 * 共通 — 素のHTMLボタン／wp:buttonのリンクに当てるベース
 *   a, button, span の全てに対応（span は c-card__link 内で
 *   「ボタン風の飾り」として使うケースを想定）
 * -------------------------------------------------------- */
a.c-btn,
button.c-btn,
span.c-btn,
.wp-block-button.c-btn > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 1em 1.75em;
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: var(--tr-body);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
a.c-btn:hover,
.wp-block-button.c-btn:hover > .wp-block-button__link {
  text-decoration: none;
}

/* アイコン（素のHTML版のみ・SVG埋め込み時） */
a.c-btn .c-icon,
button.c-btn .c-icon,
span.c-btn .c-icon {
  width: 1.125em;
  height: 1.125em;
  transition: transform var(--dur) var(--ease);
}
a.c-btn:hover .c-icon--arrow { transform: translateX(3px); }

/* --------------------------------------------------------
 * CSS疑似要素で矢印を自動付与（c-btn--arrow）
 *   素のHTML版とwp:button版の両方で動く。
 * -------------------------------------------------------- */
a.c-btn--arrow::after,
span.c-btn--arrow::after,
.wp-block-button.c-btn--arrow > .wp-block-button__link::after {
  content: "\2192";
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 1.125em;
  line-height: 1;
  margin-left: 0.4em;
  transition: transform var(--dur) var(--ease);
  mask-size: contain;
  -webkit-mask-image: var(--icon-arrow-right);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transition: transform var(--dur) var(--ease);
  flex-shrink: 0;
}
a.c-btn--arrow:hover::after,
.wp-block-button.c-btn--arrow:hover > .wp-block-button__link::after {
  transform: translateX(3px);
}

/* --------------------------------------------------------
 * Primary（塗り）
 * -------------------------------------------------------- */
a.c-btn--primary,
button.c-btn--primary,
span.c-btn--primary,
.wp-block-button.c-btn--primary > .wp-block-button__link {
  background: var(--c-brand-800);
  color: var(--c-text-invert);
}
a.c-btn--primary:hover,
button.c-btn--primary:hover,
.wp-block-button.c-btn--primary:hover > .wp-block-button__link {
  background: var(--c-brand-900);
  color: var(--c-text-invert);
}

/* --------------------------------------------------------
 * Secondary（線のみ）
 * -------------------------------------------------------- */
a.c-btn--secondary,
button.c-btn--secondary,
span.c-btn--secondary,
.wp-block-button.c-btn--secondary > .wp-block-button__link {
  background: transparent;
  border-color: var(--c-brand-800);
  color: var(--c-brand-800);
}
a.c-btn--secondary:hover,
button.c-btn--secondary:hover,
.wp-block-button.c-btn--secondary:hover > .wp-block-button__link {
  background: var(--c-brand-800);
  color: var(--c-text-invert);
}

/* --------------------------------------------------------
 * Text（矢印付きテキストリンク・下線）
 * -------------------------------------------------------- */
a.c-btn--text,
span.c-btn--text,
.wp-block-button.c-btn--text > .wp-block-button__link {
  background: transparent;
  padding: 0.5em 0;
  color: var(--c-brand-800);
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
}
a.c-btn--text:hover,
.wp-block-button.c-btn--text:hover > .wp-block-button__link {
  color: var(--c-brand-900);
}

/* --------------------------------------------------------
 * Wide（親幅いっぱい）
 * -------------------------------------------------------- */
.wp-block-button.c-btn--wide {
  width: 100%;
  max-width: 480px;
}
.wp-block-button.c-btn--wide > .wp-block-button__link {
  width: 100%;
  justify-content: space-between;
  padding-inline: 2em;
}

a.c-btn--wide,
span.c-btn--wide {
  width: 100%;
  max-width: 480px;
  justify-content: space-between;
  padding-inline: 2em;
}

/* Wide用の右端Bulletアイコン（素のHTML用） */
.c-btn__bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}
a.c-btn:hover .c-btn__bullet { transform: translateX(2px); }
.c-btn__bullet .c-icon { width: 1em; height: 1em; }

a.c-btn--primary .c-btn__bullet,
span.c-btn--primary .c-btn__bullet {
  background: var(--c-text-invert);
  color: var(--c-brand-800);
}
a.c-btn--secondary .c-btn__bullet,
span.c-btn--secondary .c-btn__bullet {
  background: var(--c-brand-800);
  color: var(--c-text-invert);
}
a.c-btn--secondary:hover .c-btn__bullet {
  background: var(--c-text-invert);
  color: var(--c-brand-800);
}

/* --------------------------------------------------------
 * Multiline（ボタン内で <br> による改行を許可）
 *   デフォルトの c-btn は white-space: nowrap 相当で1行だが、
 *   CTA ボタンなど長い文言で意図的に2行にしたいケース用。
 * -------------------------------------------------------- */
a.c-btn--multiline,
span.c-btn--multiline,
.wp-block-button.c-btn--multiline > .wp-block-button__link {
  white-space: normal;
  line-height: 1.5;
  padding-block: 0.85em;
  text-align: left;
}

/* --------------------------------------------------------
 * Invert（青背景の上で使う白ボタン）
 * -------------------------------------------------------- */
a.c-btn--invert,
span.c-btn--invert,
.wp-block-button.c-btn--invert > .wp-block-button__link {
  background: var(--c-bg);
  color: var(--c-brand-800);
}
a.c-btn--invert:hover,
.wp-block-button.c-btn--invert:hover > .wp-block-button__link {
  background: var(--c-bg-alt);
  color: var(--c-brand-900);
}
a.c-btn--invert .c-btn__bullet,
span.c-btn--invert .c-btn__bullet {
  background: var(--c-brand-800);
  color: var(--c-text-invert);
}

/* =============================================================
 * Card
 * ========================================================== */
.c-card {
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* .c-card:hover は末尾 Hover Enhancements でリンク付きカードのみに限定 */
.c-card__media {
  aspect-ratio: 16 / 10;
  background: var(--c-bg-alt);
  overflow: hidden;
}
.c-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-card__body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}

/* 見出しの前（=メタやカテゴリの直後）に少し余白を入れてグループ感を出す */
.c-card__body .c-card__title:not(:first-child) {
  margin-top: var(--sp-1);
}
/* Excerpt の前は少し離す（タイトルと本文の間） */
.c-card__body .c-card__excerpt {
  margin-top: var(--sp-1);
}
.c-card__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-caption);
  color: var(--c-text-subtle);
}
.c-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  color: var(--c-text);
}
.c-card__excerpt {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  line-height: var(--lh-body);
}
a.c-card { color: inherit; text-decoration: none; }
a.c-card:hover { text-decoration: none; }

/* -------------------------------------------------------------
 * Card modifier: --column (コラム系カード)
 * TOP・コラム一覧・関連記事などで共通利用。
 * タイトルは小さめ（fs-h4相当）・3行clampで統一。
 * ---------------------------------------------------------- */
.c-card--column .c-card__title {
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-card--column .c-card__meta {
  gap: var(--sp-3);
}

/* =============================================================
 * Tag / Stat / Table / Icon Badge / Social
 * ========================================================== */
.c-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.45em 0.9em;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  background: var(--c-brand-50);
  color: var(--c-brand-800);
  border-radius: var(--r-pill);
  line-height: 1.3;
}

.c-stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) 0;
  text-align: center;
}
.c-stat__value {
  font-family: var(--ff-num);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--c-brand-800);
  font-variant-numeric: tabular-nums;
}
.c-stat__unit {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--c-text-muted);
  margin-left: 0.25em;
}
.c-stat__label {
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
  letter-spacing: 0.02em;
}

.c-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.c-table th,
.c-table td {
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  border-bottom: 1px solid var(--c-line);
  line-height: 1.7;
}
.c-table th {
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  width: 10rem;
  background: var(--c-bg-alt);
  vertical-align: top;
}
/* 最下行の終端線：他の行と同じ濃さ（currentColor）で揃える
   WordPressデフォルトの .wp-block-table td が border: 1px solid (currentColor) で
   行間線を描画しているため、最下行だけ var(--c-line) 薄グレーにすると浮いてしまう。 */
.c-table:not(.c-table--data) table,
.c-table:not(.c-table--data) tbody tr:last-child th,
.c-table:not(.c-table--data) tbody tr:last-child td {
  border-bottom: 1px solid currentColor;
}

.c-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--c-brand-50);
  color: var(--c-brand-800);
  flex-shrink: 0;
}
.c-icon-badge .c-icon { width: 1.5rem; height: 1.5rem; }
.c-icon-badge--brand {
  background: var(--c-brand-800);
  color: var(--c-text-invert);
}

.c-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  color: var(--c-text-muted);
  text-decoration: none;
  transition: all var(--dur) var(--ease);
}
.c-social:hover {
  background: var(--c-brand-800);
  border-color: var(--c-brand-800);
  color: var(--c-text-invert);
  text-decoration: none;
}
.c-social .c-icon { width: 1.125rem; height: 1.125rem; }

/* =============================================================
 * Header & Global Navigation
 *
 *   使い方:
 *   <header class="l-header">
 *     <div class="l-container l-header__inner">
 *       <a class="l-header__logo">...</a>
 *       <nav class="l-nav">...</nav>
 *       <div class="l-header__utility">
 *         <a class="l-header__lang">EN</a>
 *         <a class="c-btn c-btn--primary c-btn--arrow">お問い合わせ</a>
 *       </div>
 *     </div>
 *   </header>
 *
 *   モバイル時は 900px未満でナビとユーティリティを非表示、
 *   ハンバーガートグルを表示。ドロワーは JS で .is-open を付与して開閉。
 * ========================================================== */

.l-header {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* ヘッダー高さ = ロゴ48px + padding上下22px = 70px */
  padding-block: 11px;
  padding-inline: var(--container-pad);
  gap: var(--sp-4);
  width: 100%;
  max-width: none;
}

/* ロゴラッパー：h1 でも div でも同じ挙動（h1 タグのデフォルト
   margin-bottom を打ち消して TOP と下層で高さを揃える） */
.l-header__logo-wrap {
  margin: 0;
  padding: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

/* ロゴ：上下センター配置を確実に */
.l-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 1;
}
.l-header__logo:hover {
  text-decoration: none;
  opacity: 0.85;
}
.l-header__logo-img {
  display: block;
  height: 48px;
  width: auto;
  vertical-align: middle;
}

/* グローバルナビ */
.l-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-left: auto;
}
.l-nav__item {
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  color: var(--c-text);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--dur) var(--ease);
  position: relative;
  padding-block: 0.5em;
  white-space: nowrap;
}
.l-nav__item:hover {
  color: var(--c-brand-800);
  text-decoration: none;
}
.l-nav__item.is-current {
  color: var(--c-brand-800);
}
.l-nav__item.is-current::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--c-brand-800);
}

/* ユーティリティ（CTA×2 + 言語切替） */
.l-header__utility {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.l-header__lang {
  position: relative;
  font-family: var(--ff-num);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  color: var(--c-text);
  text-decoration: none;
  padding: 0.35em 0.7em;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  margin-left: var(--sp-1);
}
.l-header__lang:hover {
  color: var(--c-brand-800);
  border-color: var(--c-brand-800);
  text-decoration: none;
}

/* ヘッダー内のボタンはコンパクトに（標準の ~108% 大きさ） */
.l-header .c-btn {
  padding: 0.6em 1.1em;
  font-size: 0.875rem;
  white-space: nowrap;
}
a.c-btn--sm,
.wp-block-button.c-btn--sm > .wp-block-button__link {
  padding: 0.6em 1.1em;
  font-size: 0.875rem;
}

/* モバイルメニュートグル */
.l-header__menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: var(--sp-2);
  cursor: pointer;
  color: var(--c-text);
  line-height: 1;
}
.l-header__menu-toggle:hover {
  color: var(--c-brand-800);
}
.l-header__menu-toggle .c-icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* モバイルドロワー（.is-openで表示） */
.l-nav-drawer {
  display: none;
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
}
.l-nav-drawer.is-open {
  display: block;
}
.l-nav-drawer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.l-nav-drawer__list li {
  border-bottom: 1px solid var(--c-line-soft);
}
.l-nav-drawer__list a {
  display: block;
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.l-nav-drawer__list a:hover {
  color: var(--c-brand-800);
  background: var(--c-bg-alt);
  text-decoration: none;
}
.l-nav-drawer__cta {
  padding: var(--sp-5);
}

/* レスポンシブ: 1250px未満でモバイル表示に切替
   （ボタン拡大＋nav項目数の関係で、デスクトップナビが収まる安全圏）*/
@media (max-width: 1250px) {
  .l-nav,
  .l-header__utility {
    display: none;
  }
  .l-header__menu-toggle {
    display: inline-flex;
  }
}

/* プレビュー用: ビューポートに依存せず強制的にモバイル表示 */
.l-header.is-mobile-demo .l-nav,
.l-header.is-mobile-demo .l-header__utility {
  display: none;
}
.l-header.is-mobile-demo .l-header__menu-toggle {
  display: inline-flex;
}

/* =============================================================
 * Footer
 *
 *   構造:
 *   <footer class="l-footer">
 *     <div class="l-container">
 *       <div class="l-footer__nav">     ← 4列リンクグループ
 *         <div class="l-footer__col">...</div> × 4
 *       </div>
 *       <div class="l-footer__bottom">  ← ロゴ + 会社情報
 *         ...
 *       </div>
 *     </div>
 *   </footer>
 * ========================================================== */

.l-footer {
  background: var(--c-bg);
  padding-block: var(--sp-7) var(--sp-5);
  border-top: 1px solid var(--c-line);
  color: var(--c-text);
}

/* 4列ナビグループ */
.l-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.l-footer__col-title {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--c-brand-800);
  margin: 0 0 var(--sp-4);
  letter-spacing: 0.02em;
}

.l-footer__col-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.l-footer__col-list a {
  font-size: var(--fs-small);
  color: var(--c-text);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
  line-height: 1.4;
}
.l-footer__col-list a:hover {
  color: var(--c-brand-800);
  text-decoration: none;
}

/* 下段（ロゴ＋会社情報） */
.l-footer__bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
}

.l-footer__brand {
  flex-shrink: 0;
}
.l-footer__brand-logo {
  display: block;
  height: 28px;
  width: auto;
  margin-bottom: var(--sp-3);
}
.l-footer__copyright {
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.l-footer__company {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  text-align: left;
}
.l-footer__company-name {
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  color: var(--c-text);
  white-space: nowrap;
  line-height: 1.5;
  padding-top: 0.1em;
}
.l-footer__company-address {
  padding-left: var(--sp-5);
  border-left: 1px solid var(--c-line);
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
  line-height: 1.7;
  font-style: normal;
}

/* レスポンシブ */
@media (max-width: 900px) {
  .l-footer {
    padding-block: var(--sp-6) var(--sp-4);
  }
  .l-footer__nav {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5) var(--sp-4);
    margin-bottom: var(--sp-5);
  }
  .l-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }
  .l-footer__company {
    flex-direction: column;
    gap: var(--sp-3);
    align-items: flex-start;
  }
  .l-footer__company-address {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 520px) {
  .l-footer__nav {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
}

/* プレビュー用: 強制的にモバイル表示 */
.l-footer.is-mobile-demo {
  padding-block: var(--sp-6) var(--sp-4);
}
.l-footer.is-mobile-demo .l-footer__nav {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5) var(--sp-4);
  margin-bottom: var(--sp-5);
}

/* =============================================================
 * Step Flow — プロセス / ステップ表示（3〜6ステップ対応）
 *
 *   使い方:
 *   <ol class="c-steps">
 *     <li class="c-steps__item">
 *       <span class="c-steps__circle">分析</span>
 *       <p class="c-steps__desc">...</p>
 *     </li>
 *     ... 最大6つ
 *   </ol>
 * ========================================================== */

.c-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  list-style: none;
  padding: 0;
  margin: 0;
}

.c-steps__item {
  flex: 1 1 0;
  min-width: 120px;
  text-align: center;
  position: relative;
}

/* ステップ間のchevron（最後以外） */
.c-steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 32px;
  right: calc((var(--sp-5) / -2) - 6px);
  width: 14px;
  height: 14px;
  background: var(--c-text-muted);
  opacity: 0.5;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") center/contain no-repeat;
}

.c-steps__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto var(--sp-3);
  border-radius: 50%;
  background: var(--c-brand-800);
  color: var(--c-text-invert);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  letter-spacing: 0.05em;
  line-height: 1;
  flex-shrink: 0;
}

.c-steps__desc {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  line-height: 1.7;
  margin: 0;
  text-align: left;
}

/* レスポンシブ */
@media (max-width: 720px) {
  .c-steps {
    gap: var(--sp-4);
  }
  .c-steps__item {
    flex: 1 1 calc(50% - var(--sp-4));
  }
  .c-steps__item:nth-child(2n)::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .c-steps__item {
    flex: 1 1 100%;
  }
  /* 1列になったら下向き矢印に */
  .c-steps__item:not(:last-child)::after {
    display: block;
    top: auto;
    bottom: calc((var(--sp-4) / -2) - 6px);
    right: 50%;
    transform: translateX(50%);
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center/contain no-repeat;
  }
  .c-steps__item:last-child::after {
    display: none;
  }
}

/* --- Step Flow 装飾バリエーション (c-steps--soft) ---
 *  円を大きく、淡いブランドカラー塗り、周囲にハロー効果。
 *  TOPページや事業内容ページなど「見せたい」セクション向け。
 */

.c-steps--soft .c-steps__circle {
  width: 110px;
  height: 110px;
  background: var(--c-brand-100);
  color: var(--c-brand-800);
  font-size: 1.0625rem;
  position: relative;
  z-index: 1;
}
.c-steps--soft .c-steps__circle::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: var(--c-brand-50);
  z-index: -1;
}
.c-steps--soft .c-steps__item:not(:last-child)::after {
  top: 47px;
}
@media (max-width: 480px) {
  .c-steps--soft .c-steps__item:not(:last-child)::after {
    top: auto;
  }
}

/* =============================================================
 * Stats — 円形バリエーション (c-stats-circles)
 *
 *   使い方:
 *   <div class="c-stats-circles">
 *     <div class="c-stats-circle">
 *       <div class="c-stats-circle__value">2<span class="c-stats-circle__unit">万部以上</span></div>
 *       <div class="c-stats-circle__label">執筆・監修書籍の発行部数</div>
 *     </div>
 *     ...
 *   </div>
 * ========================================================== */

.c-stats-circles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  align-items: center;
  margin-top: var(--sp-6);
}

.c-stats-circle {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-brand-50);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-3) var(--sp-4) var(--sp-5);
  position: relative;
}

.c-stats-circle__icon {
  width: 38px;
  height: 38px;
  color: var(--c-brand-800);
  stroke-width: 1.5;
  opacity: 0.5;
  margin-bottom: var(--sp-1);
}

.c-stats-circle__value {
  font-family: var(--ff-num);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1;
  color: var(--c-brand-800);
  margin-bottom: var(--sp-2);
  letter-spacing: -0.01em;
  white-space: nowrap;
  /* HTML改行による余白を殺すために font-size 0 の入れ子空間で切る */
  font-size: clamp(2.5rem, 5vw, 3.75rem);
}
.c-stats-circle__value > * {
  /* 子要素間の不要な半角スペースを吸収 */
  vertical-align: baseline;
}
.c-stats-circle__unit {
  font-size: 0.32em;
  font-weight: 600;
  margin-left: 0.1em;
  letter-spacing: 0.02em;
}
.c-stats-circle__label {
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
  line-height: 1.5;
  letter-spacing: 0.02em;
  padding-inline: var(--sp-2);
}

@media (max-width: 900px) {
  .c-stats-circles {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* スマホ狭幅でも2x2を維持（1列にはしない） */
@media (max-width: 420px) {
  .c-stats-circles {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
    max-width: 100%;
  }
}

/* =============================================================
 * Breadcrumb — パンくずリスト
 *
 *   使い方:
 *   <nav class="c-breadcrumb" aria-label="パンくずリスト">
 *     <ol class="c-breadcrumb__list">
 *       <li class="c-breadcrumb__item"><a class="c-breadcrumb__link" href="/">ホーム</a></li>
 *       <li class="c-breadcrumb__item"><a class="c-breadcrumb__link" href="/works/">実績ギャラリー</a></li>
 *       <li class="c-breadcrumb__item"><span class="c-breadcrumb__current" aria-current="page">記事名</span></li>
 *     </ol>
 *   </nav>
 * ========================================================== */

.c-breadcrumb {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  padding-block: var(--sp-4);
}

.c-breadcrumb__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.c-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

/* 区切りの chevron-right（最初の項目以外） */
.c-breadcrumb__item:not(:first-child)::before {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  background: currentColor;
  opacity: 0.4;
  flex-shrink: 0;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") center/contain no-repeat;
}

.c-breadcrumb__link {
  color: var(--c-text-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
  white-space: nowrap;
}
.c-breadcrumb__link:hover {
  color: var(--c-brand-800);
  text-decoration: none;
}

.c-breadcrumb__current {
  color: var(--c-text);
  font-weight: var(--fw-medium);
  /* 長いタイトルは省略表示 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 24em;
}

/* モバイルでは現在地を非表示にして「親階層」だけ見せるパターンも */
@media (max-width: 480px) {
  .c-breadcrumb__current {
    max-width: 12em;
  }
}

/* =============================================================
 * Card — Works variant（実績ギャラリー用）
 *
 *   写真がない実績（執筆・監修記事など）向け。
 *   アイキャッチ代わりにアイコンを中央表示。
 * ========================================================== */

.c-card__media--icon {
  aspect-ratio: auto;
  height: 120px;
  background: var(--c-brand-50);    /* 薄い青（TOPと統一） */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Works カード：おすすめバッジ（★マーク）*/
.c-card--works {
  position: relative;
}
.c-card--works .c-card__featured-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  background: var(--c-brand-900);   /* ネイビー */
  color: #fff;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
}
.c-card--works .c-card__featured-badge::before {
  content: "★";
  font-size: 0.75rem;
  line-height: 1;
}

.c-card__icon-stack {
  position: relative;
  color: var(--c-brand-800);
  display: inline-flex;
}
.c-card__icon-stack > .c-icon {
  width: 56px;
  height: 56px;
  stroke-width: 1.5;
}

/* Worksカード限定：アイコン小さめ（TOPと統一） */
.c-card--works .c-card__icon-stack > .c-icon {
  width: 40px;
  height: 40px;
  color: var(--c-brand-800);
}
.c-card__icon-badge {
  position: absolute;
  top: -4px;
  right: -8px;
  width: 22px;
  height: 22px;
  background: var(--c-brand-800);
  color: var(--c-text-invert);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.c-card__icon-badge > .c-icon {
  width: 12px;
  height: 12px;
}

/* カテゴリラベル（● 執筆・監修 形式） */
.c-card__category {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--c-brand-800);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  letter-spacing: 0.04em;
}
.c-card__category::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-brand-800);
  flex-shrink: 0;
}

/* 媒体名 / 年月のメタ */
.c-card__meta-info {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

/* Works カードの本体（要望：タイトル一回り小さく・黒文字） */
.c-card--works {
  display: flex;
  flex-direction: column;
  height: 100%;               /* カード高さ揃え */
}
.c-card--works .c-card__title {
  font-size: var(--fs-h4);       /* h3 1.25rem → h4 1.0625rem */
  font-weight: var(--fw-semibold);
  color: var(--c-text);          /* brand → 本文色（黒） */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  margin: 0;                     /* 上下マージン除去 */
}

/* Works カード用に .c-card__body の余白を半分に */
.c-card--works .c-card__body {
  padding: var(--sp-3);          /* sp-5 1.5rem → sp-3 0.75rem */
  gap: 0;                         /* flexのgapを止めて、個別に間隔管理 */
  display: flex;
  flex-direction: column;
  flex: 1;                        /* body伸縮でボタンを下端に固定 */
}
.c-card--works .c-card__body > * + * {
  margin-top: 0;
}

/* タイトルと出典（meta-info）の余白を半分に */
.c-card--works .c-card__category {
  font-size: 0.75rem;
  margin-bottom: 0.125rem;        /* カテゴリ→タイトル間 */
}
.c-card--works .c-card__title + .c-card__meta-info {
  margin-top: 0.25rem;            /* タイトル→出典間：既存の半分 */
}
.c-card--works .c-card__meta-info {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--c-text-muted);
  margin: 0;
}

/* 外部リンクボタン（URLがあるときだけ表示）をカード下端に固定 */
.c-card--works .c-card__action {
  margin-top: auto;               /* 下端へ押し出し */
  padding-top: var(--sp-3);       /* 上との余白 */
}

/* Works カードのボタン限定スタイル（他ボタンへの影響を遮断） */
.c-card--works .c-card__action .c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  line-height: 1.4;
}
.c-card--works .c-card__action .c-btn .c-icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* =============================================================
 * Pagination — ページ送り
 *
 *   使い方:
 *   <nav class="c-pagination" aria-label="ページ送り">
 *     <ul class="c-pagination__list">
 *       <li><a class="c-pagination__prev" href="#">前へ</a></li>
 *       <li><a class="c-pagination__link" href="#">1</a></li>
 *       <li><span class="c-pagination__current" aria-current="page">2</span></li>
 *       <li><a class="c-pagination__link" href="#">3</a></li>
 *       <li><span class="c-pagination__dots">…</span></li>
 *       <li><a class="c-pagination__link" href="#">10</a></li>
 *       <li><a class="c-pagination__next" href="#">次へ</a></li>
 *     </ul>
 *   </nav>
 *
 *   WordPress paginate_links() からの出力を
 *   上記クラスに合わせてフィルターすると使える。
 * ========================================================== */

.c-pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-7); /* カードグリッド等から離して配置 */
}

.c-pagination__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

/* 共通スタイル */
.c-pagination__link,
.c-pagination__current,
.c-pagination__dots,
.c-pagination__prev,
.c-pagination__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  border-radius: var(--r-sm);
  text-decoration: none;
  line-height: 1;
  font-family: var(--ff-num);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

/* 通常のリンク */
.c-pagination__link {
  color: var(--c-text);
  border: 1px solid var(--c-line);
  background: var(--c-bg);
}
.c-pagination__link:hover {
  color: var(--c-brand-800);
  border-color: var(--c-brand-800);
  text-decoration: none;
}

/* 現在ページ */
.c-pagination__current {
  color: var(--c-text-invert);
  background: var(--c-brand-800);
  border: 1px solid var(--c-brand-800);
}

/* 省略ドット */
.c-pagination__dots {
  color: var(--c-text-muted);
  border: 0;
  background: transparent;
  min-width: auto;
  padding: 0 var(--sp-2);
}

/* 前へ/次へ（テキスト含むので少し広め） */
.c-pagination__prev,
.c-pagination__next {
  color: var(--c-text);
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  font-family: var(--ff-base);
}
.c-pagination__prev:hover,
.c-pagination__next:hover {
  color: var(--c-brand-800);
  border-color: var(--c-brand-800);
  text-decoration: none;
}
.c-pagination__prev .c-icon,
.c-pagination__next .c-icon {
  width: 0.875em;
  height: 0.875em;
}
.c-pagination__prev .c-icon {
  transform: rotate(180deg);
}

/* 無効ステート（最初のページ・最後のページで前/次を無効化） */
.c-pagination__prev[aria-disabled="true"],
.c-pagination__next[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

/* モバイル: 最小サイズを維持しつつコンパクトに */
@media (max-width: 480px) {
  .c-pagination__list {
    gap: var(--sp-1);
  }
  .c-pagination__link,
  .c-pagination__current {
    min-width: 36px;
    height: 36px;
    padding: 0 var(--sp-2);
  }
  .c-pagination__prev,
  .c-pagination__next {
    padding: 0 var(--sp-3);
    height: 36px;
  }
}

/* =============================================================
 * CF7 Form — Contact Form 7 連携スタイル
 *
 *   構造（CF7側のマークアップに合わせる）:
 *   <div class="cf7-form-wrapper">
 *     <div class="cf7-form-row">
 *       <div class="cf7-form-label">
 *         <span class="cf7-form-label-text">ラベル</span>
 *         <span class="cf7-form-required">必須</span>  ← または cf7-form-optional
 *       </div>
 *       <div class="cf7-form-input">
 *         [CF7ショートコード ... ]
 *       </div>
 *     </div>
 *     ... 繰り返し ...
 *     <div class="cf7-form-row cf7-form-row--acceptance"> ... </div>
 *     <div class="cf7-form-row cf7-form-row--submit"> ... </div>
 *   </div>
 *
 *   CF7 自動付与クラス (.wpcf7-form-control 等) にも対応。
 * ========================================================== */

.cf7-form-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* 行の基本レイアウト（デスクトップ: ラベル左 / 入力右） */
.cf7-form-row {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: var(--sp-5);
  align-items: flex-start;
}

@media (max-width: 720px) {
  .cf7-form-row {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
  }
}

/* ラベル部分 */
.cf7-form-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .cf7-form-label {
    padding-top: 0;
  }
}

.cf7-form-label-text {
  font-weight: var(--fw-medium);
  color: var(--c-text);
  font-size: var(--fs-small);
  line-height: 1.4;
}

/* 必須・任意のバッジ */
.cf7-form-required,
.cf7-form-optional {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.6em;
  font-size: 11px;
  font-weight: var(--fw-bold);
  border-radius: var(--r-xs);
  letter-spacing: 0.05em;
  line-height: 1;
  font-family: var(--ff-base);
}
.cf7-form-required {
  background: #c0392b;
  color: #fff;
}
.cf7-form-optional {
  background: var(--c-bg-alt);
  color: var(--c-text-muted);
  border: 1px solid var(--c-line);
}

/* ========== 入力フィールドの共通スタイル ========== */
.cf7-form-input input[type="text"],
.cf7-form-input input[type="email"],
.cf7-form-input input[type="tel"],
.cf7-form-input input[type="date"],
.cf7-form-input input[type="number"],
.cf7-form-input input[type="url"],
.cf7-form-input textarea,
.cf7-form-input select {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
}

.cf7-form-input input:focus,
.cf7-form-input textarea:focus,
.cf7-form-input select:focus {
  outline: none;
  border-color: var(--c-brand-800);
  box-shadow: 0 0 0 3px var(--c-brand-50);
}

.cf7-form-input input::placeholder,
.cf7-form-input textarea::placeholder {
  color: var(--c-text-subtle);
}

.cf7-form-input textarea {
  min-height: 8em;
  line-height: 1.7;
  resize: vertical;
}

/* セレクトには chevron-down を右端に */
.cf7-form-input select {
  padding-right: var(--sp-8);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6473' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 16px;
  cursor: pointer;
}

/* ファイル input */
.cf7-form-input input[type="file"] {
  width: 100%;
  padding: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px dashed var(--c-line);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.cf7-form-input input[type="file"]:hover {
  border-color: var(--c-brand-800);
}

/* 注意書き */
.cf7-form-note {
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
  margin: 0 0 var(--sp-2);
  line-height: 1.6;
}

/* ========== 同意チェックボックス行 ========== */
.cf7-form-row--acceptance {
  grid-template-columns: 1fr;
  margin-top: var(--sp-3);
}
.cf7-form-row--acceptance .cf7-form-input > div {
  padding: var(--sp-5);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: var(--fs-small);
  line-height: 1.7;
}
.cf7-form-row--acceptance input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-right: var(--sp-2);
  accent-color: var(--c-brand-800);
  vertical-align: middle;
}
.cf7-form-row--acceptance a {
  color: var(--c-brand-800);
  text-decoration: underline;
}

/* ========== 送信ボタン行 ========== */
.cf7-form-row--submit {
  grid-template-columns: 1fr;
  margin-top: var(--sp-4);
  justify-items: center;
}
.cf7-form-row--submit input[type="submit"],
.cf7-form-row--submit button[type="submit"] {
  min-width: 280px;
  padding: 1em 2.5em;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--c-text-invert);
  background: var(--c-brand-800);
  border: 1px solid var(--c-brand-800);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  font-family: inherit;
  letter-spacing: 0.05em;
  -webkit-appearance: none;
  appearance: none;
}
.cf7-form-row--submit input[type="submit"]:hover,
.cf7-form-row--submit button[type="submit"]:hover {
  background: var(--c-brand-900);
  border-color: var(--c-brand-900);
}
.cf7-form-row--submit input[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========== CF7 自動生成クラスへの追従 ========== */
.wpcf7-form .wpcf7-not-valid-tip {
  display: block;
  color: #c0392b;
  font-size: var(--fs-caption);
  margin-top: var(--sp-2);
}
.wpcf7-form .wpcf7-response-output {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output {
  background: #fdecea;
  border: 1px solid #f5c6cb;
  color: #721c24;
}
.wpcf7-form.sent .wpcf7-response-output {
  background: #e8f5e9;
  border: 1px solid #c8e6c9;
  color: #2e7d32;
}
.wpcf7-spinner {
  display: inline-block;
  margin-left: var(--sp-3);
  vertical-align: middle;
}
.l-footer.is-mobile-demo .l-footer__bottom {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
}
.l-footer.is-mobile-demo .l-footer__company {
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
}
.l-footer.is-mobile-demo .l-footer__company-address {
  padding-left: 0;
  border-left: 0;
}


/* =============================================================
 * ページトップへ戻るボタン
 *   スクロール位置で出現/非表示を切り替え（.is-visible）
 * ========================================================== */
.c-scroll-top {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-brand-800);
  color: var(--c-text-invert);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--sh-md);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    background var(--dur) var(--ease);
  opacity: 0;
  pointer-events: none;
  z-index: 90;
}
.c-scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.c-scroll-top:hover {
  background: var(--c-brand-900);
  transform: translateY(-3px);
}
.c-scroll-top .c-icon {
  width: 1.25rem;
  height: 1.25rem;
  /* chevron-down を上向きに回転して流用 */
  transform: rotate(180deg);
}
@media (max-width: 768px) {
  .c-scroll-top {
    right: var(--sp-4);
    bottom: var(--sp-4);
    width: 44px;
    height: 44px;
  }
}


/* ==========================================================
 *  Page Header（下層ページのMV）
 *    TOPの l-hero とは別物。画像なし・テキスト中央揃え。
 *    page.php が自動出力するため、Gutenberg本文にMVを書く必要なし。
 * ========================================================== */
.l-page-header {
  background: var(--c-bg-alt);
  padding-block: var(--sp-8) var(--sp-6);
  text-align: center;
  border-bottom: 1px solid var(--c-line);
}
.l-page-header__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--c-brand-900);
  margin: 0;
  letter-spacing: var(--tr-heading);
}
.l-page-header__lead {
  margin: var(--sp-4) auto 0;
  max-width: 44rem;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
}

@media (max-width: 768px) {
  .l-page-header {
    padding-block: var(--sp-6) var(--sp-5);
  }
}

/* ==========================================================
 *  c-card__link（カード丸ごとクリッカブル）
 *    旧 home.css からこちらに移動。contact/service/media など
 *    TOP以外でも使うため、components に置くのが正しい。
 * ========================================================== */
.c-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.c-card__link:hover {
  text-decoration: none;
}
.c-card__link:hover .c-card__title {
  color: var(--c-brand-800);
}
.c-card__link .c-btn {
  pointer-events: none; /* ラッパ<a>のクリックを阻害しないため */
}

/* ==========================================================
 *  c-card--select（contact / profile などの「種別を選んでね」カード）
 *    中央寄せ、タグを挟む構成
 * ========================================================== */
.c-card--select .c-card__body {
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  flex: 1;
}
.c-card--select .c-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--c-brand-900);
  margin: 0;
}
.c-card--select .c-card__tag {
  margin: 0;
}
.c-card--select .c-card__excerpt {
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--c-text-muted);
  margin: 0;
}
.c-card--select .c-card__action {
  width: 100%;
  margin-top: auto;
  padding-top: var(--sp-2);
}

/* ==========================================================
 *  c-notice-box（注記や規約を囲う箱）
 *    ボーダー＋内側余白。見出しと本文を縦に並べる想定。
 * ========================================================== */
.c-notice-box {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  background: var(--c-bg);
}
.c-notice-box > * + * {
  margin-top: var(--sp-4);
}
.c-notice-box > .l-divider {
  margin-block: var(--sp-5);
}
.c-notice-box p {
  font-size: var(--fs-small);
  line-height: 1.85;
  color: var(--c-text);
  margin: 0;
}
.c-notice-box h3,
.c-notice-box h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--c-brand-900);
  margin: 0;
  line-height: var(--lh-heading);
}

@media (max-width: 768px) {
  .c-notice-box {
    padding: var(--sp-5);
  }
}

/* ==========================================================
 *  c-scrollbox（規約・注意事項のスクロールボックス）
 *    長文コンテンツを固定高さで表示。
 * ========================================================== */
.c-scrollbox {
  max-height: 20em;
  overflow-y: auto;
  padding: var(--sp-5);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.c-scrollbox__title {
  font-family: var(--ff-num);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  text-align: center;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-4);
  line-height: 1.4;
}
.c-scrollbox__title-ja {
  display: block;
  font-family: var(--ff-base);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--c-text-muted);
  letter-spacing: 0;
  text-transform: none;
  margin-top: var(--sp-1);
}
.c-scrollbox__heading {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--c-brand-800);
  margin: var(--sp-4) 0 var(--sp-1);
  line-height: 1.5;
}
.c-scrollbox__heading:first-of-type,
.c-scrollbox > *:first-child.c-scrollbox__heading {
  margin-top: 0;
}
.c-scrollbox__text {
  font-size: var(--fs-caption);
  line-height: 1.75;
  color: var(--c-text);
  margin: 0;
}
.c-scrollbox__meta {
  font-size: var(--fs-eyebrow);
  color: var(--c-text-subtle);
  text-align: right;
  margin: var(--sp-4) 0 0;
}

/* ==========================================================
 *  c-form-tabs（フォーム上部の種別切替タブ）
 *    contact ⇔ media で使い回す前提。
 *    アクティブタブ＋本体パネルで1つの白いかたまりに見せる。
 * ========================================================== */
.c-form-tabs {
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.c-form-tabs__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--c-line); /* gap の 1px 線の色 */
  gap: 1px;
}
.c-form-tabs__tab {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-bg-alt);
  color: var(--c-text-muted);
  text-align: center;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.c-form-tabs__tab:hover {
  background: var(--c-brand-50);
  color: var(--c-brand-800);
  text-decoration: none;
}
.c-form-tabs__tab.is-current {
  background: var(--c-bg);
  color: var(--c-text);
  cursor: default;
}
.c-form-tabs__tab.is-current:hover {
  background: var(--c-bg);
  color: var(--c-text);
}
.c-form-tabs__label {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--sp-1);
  line-height: 1.4;
}
.c-form-tabs__note {
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: inherit;
  opacity: 0.8;
  margin: 0;
}
.c-form-tabs__panel {
  padding: var(--sp-7);
  background: var(--c-bg);
}
.c-form-tabs__intro {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  padding: var(--sp-5);
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--c-text);
}

@media (max-width: 768px) {
  .c-form-tabs__nav {
    grid-template-columns: 1fr;
    gap: 1px;
  }
  .c-form-tabs__panel {
    padding: var(--sp-5);
  }
}


/* ==========================================================
 *  c-steps__title（ステップの見出し）
 *    既存 c-steps__circle と c-steps__desc の間に差し込む。
 *    番号を circle に、タイトルを title に、説明を desc に、
 *    という 3 段構えの運用を想定。
 * ========================================================== */
.c-steps__title {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--c-brand-900);
  line-height: 1.5;
  margin: 0 0 var(--sp-1);
  text-align: center;
}

/* 青背景内では白系に */
.l-section--brand .c-steps__title {
  color: var(--c-text-invert);
}
.l-section--brand .c-steps__desc {
  color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================
 *  c-table--data（3列以上のデータ表）
 *    既存 .c-table は左1列を th として扱う2列のキーバリュー向け。
 *    本モディファイアは上ヘッダ行をもつ表データ向け。
 * ========================================================== */
.c-table--data th {
  width: auto;
  background: var(--c-brand-800);
  color: var(--c-text-invert);
  text-align: center;
  padding: var(--sp-3) var(--sp-4);
  font-weight: var(--fw-semibold);
  vertical-align: middle;
}
.c-table--data td {
  padding: var(--sp-3) var(--sp-4);
  vertical-align: middle;
}
.c-table--data tbody tr:nth-child(2n) td {
  background: var(--c-bg-alt);
}
/* 最下行に色の強い罫線を引いて終端を明示 */
.c-table--data tbody tr:last-child td {
  border-bottom: 2px solid var(--c-brand-800);
}

@media (max-width: 640px) {
  .c-table--data th,
  .c-table--data td {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-caption);
  }
}

/* ==========================================================
 *  c-tag--block（グリッド用フル幅タグ）
 *    対応テーマ等、均一サイズで並べたいときに使う。
 * ========================================================== */
.c-tag--block {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: var(--sp-3) var(--sp-4);
  text-align: center;
  line-height: 1.5;
}

/* ==========================================================
 *  c-form-panel（単独フォーム用の白パネル）
 *    c-form-tabs を使わないページ（media 等）で CF7 を包む白箱。
 * ========================================================== */
.c-form-panel {
  background: var(--c-bg);
  border-radius: var(--r-md);
  padding: var(--sp-7);
  box-shadow: var(--sh-sm);
}
.c-form-panel__intro {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  padding: var(--sp-5);
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--c-text);
}
@media (max-width: 768px) {
  .c-form-panel {
    padding: var(--sp-5);
  }
}

/* ==========================================================
 *  c-faq（wp:details ネイティブブロックベースの FAQ）
 *    編集者が Gutenberg の「詳細」ブロックを重ねるだけで
 *    整ったアコーディオンになる。
 * ========================================================== */
.c-faq {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.c-faq .wp-block-details {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
  transition: border-color var(--dur) var(--ease);
}
.c-faq .wp-block-details[open] {
  border-color: var(--c-brand-200);
}
.c-faq .wp-block-details > summary {
  padding: var(--sp-4) calc(var(--sp-5) + 1.5em) var(--sp-4) var(--sp-5);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--c-brand-900);
  cursor: pointer;
  list-style: none;
  position: relative;
  line-height: 1.5;
}
.c-faq .wp-block-details > summary::-webkit-details-marker {
  display: none;
}
.c-faq .wp-block-details > summary::after {
  content: "";
  position: absolute;
  right: var(--sp-5);
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--c-brand-800);
  border-bottom: 2px solid var(--c-brand-800);
  transform: translateY(-65%) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.c-faq .wp-block-details[open] > summary::after {
  transform: translateY(-30%) rotate(-135deg);
}
.c-faq .wp-block-details > summary + * {
  padding: 0 var(--sp-5);
}
.c-faq .wp-block-details > *:last-child {
  padding-bottom: var(--sp-4);
  margin-bottom: 0;
}
.c-faq .wp-block-details p {
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--c-text);
  margin: 0;
}


/* ==========================================================
 *  c-logo-grid（掲載メディアロゴの一覧グリッド）
 *    [media_logos_section] shortcode が出力。
 *    TOP/media 両方で使う共通コンポーネントのため components に配置。
 * ========================================================== */
.c-logo-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-6);
}

.c-logo-grid__item {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.c-logo-grid__item:hover {
  border-color: var(--c-brand-200);
  box-shadow: var(--sh-sm);
}
.c-logo-grid__item img {
  max-width: 100%;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 1100px) {
  .c-logo-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 768px) {
  .c-logo-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
  }
}
@media (max-width: 480px) {
  .c-logo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================
 *  c-media-list（掲載メディアのテキストリスト）
 *    [media_logos_section] shortcode の出力。
 *    著作権配慮でロゴ画像の代わりに媒体名をテキストで表示。
 *    四角のバナー風（元のロゴ枠と同じフォルム）。
 *    TOP・メディア関係者 両ページで使う共通コンポーネント。
 * ========================================================== */
.c-media-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-6) 0 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-3);
  align-items: stretch;
}
.c-media-list__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4) var(--sp-3);
  min-height: 80px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  line-height: 1.4;
  text-align: center;
  /* 意味単位での自然改行（「東洋経済オンライン」等を適切に折り返す） */
  word-break: auto-phrase;
  line-break: strict;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.c-media-list__item:hover {
  border-color: var(--c-brand-200);
  box-shadow: var(--sh-sm);
}

@media (max-width: 1100px) {
  .c-media-list {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 768px) {
  .c-media-list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
    margin-top: var(--sp-5);
  }
  .c-media-list__item {
    min-height: 64px;
    padding: var(--sp-3) var(--sp-2);
    font-size: var(--fs-caption);
  }
}
@media (max-width: 480px) {
  .c-media-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------
 *  c-stats-circle__prefix（数字の前に置く小さい記号）
 *    [achievement_section] shortcode が「約」「$」などの prefix を
 *    span で出力する用の小サイズ装飾。c-stats-circle は既に
 *    components に入っていたので、prefix も合わせる。
 * -------------------------------------------------------- */
.c-stats-circle__prefix {
  font-size: 0.45em;
  font-weight: var(--fw-medium);
  margin-right: 0.15em;
  vertical-align: 0.3em;
  color: var(--c-brand-800);
}


/* ==========================================================
 *  c-card--book（著書カード）
 *    c-card の白カード・枠線・hover シャドウをそのまま活かし、
 *    メディアエリアだけ書影用に調整：
 *      - 高さを固定して4冊の揃えを取る
 *      - 背景は白（c-card__media 既定の bg-alt を上書き）
 *      - object-fit: contain で書影全体を中央に表示
 *    c-card__link と組み合わせてカード丸ごとクリッカブル。
 * ========================================================== */
.c-card--book .c-card__media {
  aspect-ratio: auto;
  height: 220px;
  background: var(--c-bg);
  padding: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--c-line);
}
.c-card--book .c-card__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform var(--dur) var(--ease);
}
.c-card--book .c-card__link:hover .c-card__media img {
  transform: translateY(-2px);
}
.c-card--book .c-card__body {
  padding: var(--sp-4);
  text-align: center;
  gap: var(--sp-1);
}
.c-card--book .c-card__title {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--c-text);
  line-height: 1.5;
  margin: 0;
}
.c-card--book .c-card__meta {
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
  margin: 0;
  display: block;
}

/* ==========================================================
 *  wp:embed の 16:9 強制（YouTube等）
 *    WP コアの aspect-ratio 指定が c-card 内で効かないケースへの
 *    保険。modern aspect-ratio + padding-top 両対応。
 * ========================================================== */
.c-card .wp-block-embed,
.c-card.wp-block-embed {
  margin: 0;
}
.c-card .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper,
.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
}
.c-card .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper > iframe,
.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ==========================================================
 *  c-card--video（動画カード）
 *    埋め込み＋タイトル。aspect-ratio は上記ルールが効く。
 * ========================================================== */
.c-card--video .c-card__body,
.c-card--video > .c-card__body {
  padding: var(--sp-4) var(--sp-5);
}


/* ==========================================================
 *  c-cta-card（お問い合わせ誘導カード）
 *    各ページ末尾や contact SELECT で使う、青背景セクション上の
 *    白カード。タグ → タイトル → 本文 → ワイドボタン の縦並び。
 *    --primary モディファイアでタイトルを青文字化＋ボタンを塗り。
 * ========================================================== */
.sec-cta-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 768px) {
  .sec-cta-cards {
    grid-template-columns: 1fr;
  }
}

.c-cta-card {
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  gap: var(--sp-4);
  box-shadow: var(--sh-sm);
}

.c-cta-card__tag {
  display: block;
  background: var(--c-brand-50);
  color: var(--c-brand-900);
  border-radius: 999px;
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-small);
  line-height: 1.5;
  text-align: left;
  margin: 0;
}

.c-cta-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  line-height: 1.5;
  margin: 0;
}
/* 青背景セクション内でも白カード内の見出しは通常の濃色に（layout.css の
   .l-section--brand h3 ルールより高い詳細度で確実に上書きする） */
.l-section--brand .c-cta-card .c-cta-card__title {
  color: var(--c-text);
}

.c-cta-card__excerpt {
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-text-muted);
  margin: 0;
}
.c-cta-card__excerpt strong {
  display: block;
  margin-top: var(--sp-2);
  color: var(--c-text);
  font-weight: var(--fw-bold);
}

.c-cta-card__action {
  margin-top: auto;
  padding-top: var(--sp-3);
}
.c-cta-card__action .c-btn,
.c-cta-card__action a.c-btn {
  width: 100%;
  justify-content: space-between;
  text-align: left;
  line-height: 1.5;
  padding-block: var(--sp-3);
  padding-inline: var(--sp-5);
}

/* ボタン内の <br> で改行した文言はインライン扱い（flex を崩さない） */
.c-cta-card__action .c-btn br {
  display: inline;
}


/* ==========================================================
 *  l-section__header 内の子要素マージン強制リセット（別アプローチ）
 *
 *  【背景】
 *   TOP と Gutenberg 下層で DOM 構造が違う。下層は全要素に
 *   wp-block-group / wp-block-heading クラスが付く。
 *   WP Core の is-layout-flow 系ルールが詳細度で margin を
 *   流し込んでくるため、一般的な詳細度では勝てなかった。
 *
 *  【方針】
 *   WP のクラスを名指しして最大詳細度 (0,3,1) で直接勝負。
 *   値経由の block-gap も併せて 0 に潰す二段構え。
 * ========================================================== */

/* 1. block-gap を値経由で潰す */
.l-section__header {
  --wp--style--block-gap: 0;
}

/* 2. WP-block クラスを名指ししてマージン強制リセット */
.l-section__header > p,
.l-section__header > p.t-eyebrow,
.l-section__header > p.t-lead,
.l-section__header > h1,
.l-section__header > h2,
.l-section__header > h3,
.l-section__header > h4,
.l-section__header > h1.wp-block-heading,
.l-section__header > h2.wp-block-heading,
.l-section__header > h3.wp-block-heading,
.l-section__header > h4.wp-block-heading,
.wp-block-group.l-section__header > *,
.wp-block-group.l-section__header.is-layout-flow > *,
.wp-block-group.l-section__header.is-layout-flow > * + * {
  margin-top: 0;
  margin-bottom: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}


/* ==========================================================
 *  l-section__header のレイアウト（components.css 単体で完結保証）
 *
 *  本来 layout.css / typography.css に分散しているルールを
 *  components.css にも冗長に書いて、万一 layout / typography が
 *  反映されていなくても components.css 1枚で動くようにする。
 *
 *  前提：Gutenberg 側は wp:html ブロックでベタ書きに変更済み。
 *        <header class="l-section__header">
 *          <span class="t-eyebrow">...</span>
 *          <h2 class="t-heading--centered">...</h2>
 *          <p class="t-lead">...</p>
 *        </header>
 * ========================================================== */
.l-section__header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
  max-width: 48rem;
}
.l-section__header--center {
  text-align: center;
  margin-inline: auto;
}
.l-section__header > *,
.l-section__header > span,
.l-section__header > p,
.l-section__header > h1,
.l-section__header > h2,
.l-section__header > h3,
.l-section__header > h4 {
  margin-top: 0;
  margin-bottom: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}


/* ==========================================================
 *  [v0.5.8] セクション余白はテンプレート準拠
 *
 *  layout.css の `.l-section { padding-block: var(--section-py); }`
 *  （tokens.css: clamp(3rem, 7vw, 5.5rem) = 48〜88px）を
 *  そのまま使う。ここでは上書きしない。
 * ========================================================== */


/* ==========================================================
 *  [v0.5.6] Gutenberg の wpautop が生成した空 <p> を完全に消す
 *
 *  Gutenberg ページのコメント `<!-- -->` が wpautop で
 *  `<p><!-- --></p>` に包まれてしまい、<p> のデフォルト 1em
 *  上下マージンが白帯の正体だった。
 *  main 直下の <p> は本来の段落ではなく wpautop の副産物なので
 *  display:none で完全に非表示化する。
 * ========================================================== */
.l-main > p,
main > p {
  display: none;
}


/* ==========================================================
 *  事業内容ページ：お悩みタグ & ワンストップ円のアイコン対応
 *    .sec-service-pains の .c-tag--block はアイコン＋テキストを
 *    左寄せで並べる（中央揃えだと読みづらいため scope で上書き）。
 *    .c-steps--soft の円はアイコン＋ラベルを 2 段で収める。
 * ========================================================== */

/* お悩みタグ：アイコン左 + テキスト（左寄せに上書き） */
.sec-service-pains .c-tag--block {
  justify-content: flex-start;
  gap: var(--sp-3);
  padding-left: var(--sp-5);
}
.sec-service-pains .c-tag--block .c-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--c-brand-800);
}

/* ワンストップ円：アイコン＋ラベルを縦に2段配置 */
.c-steps--soft .c-steps__circle {
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9375rem;
  line-height: 1.2;
}
.c-steps--soft .c-steps__circle .c-icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--c-brand-800);
}

/* スマホ：円が小さくなる場合のアイコンサイズ調整 */
@media (max-width: 480px) {
  .c-steps--soft .c-steps__circle .c-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* 強み3カード：アイコンサイズ（c-card__media--icon 内のSVG） */
.sec-service-strengths .c-card__media--icon .c-icon {
  width: 72px;
  height: 72px;
  color: var(--c-brand-800);
  stroke-width: 1.5;
}

/* 強み3カード：3アイコン横並び（trio） — 左右小・中央大 */
.c-card__icon-trio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  color: var(--c-brand-800);
}
.sec-service-strengths .c-card__media--icon .c-card__icon-trio .c-icon {
  width: 40px;
  height: 40px;
  color: var(--c-brand-700);
  opacity: 0.75;
}
.sec-service-strengths .c-card__media--icon .c-card__icon-trio__main {
  width: 60px !important;
  height: 60px !important;
  color: var(--c-brand-800) !important;
  opacity: 1 !important;
}

/* ==========================================================
 *  プロフィール 保有資格：画像/SVG混在、全体的にコンパクトに
 * ========================================================== */
.sec-profile-quals .c-card__media--icon {
  height: 130px;
  padding: var(--sp-3);
}
.sec-profile-quals .c-card__media--icon img {
  max-height: 100px;
  width: auto;
  object-fit: contain;
}
.sec-profile-quals .c-card__media--icon .c-icon {
  width: 70px;
  height: 70px;
  color: var(--c-brand-800);
  stroke-width: 1.5;
}

/* ==========================================================
 *  c-steps 通常版：円内にアイコン+番号を2段配置
 *    既存の「01」「02」は .c-steps__num に class 化、
 *    円の flex-direction を column にして SVG を上に。
 *    c-steps--soft は別途（アイコン+ラベル）なので影響なし。
 * ========================================================== */
.c-steps:not(.c-steps--soft) .c-steps__circle {
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}
.c-steps:not(.c-steps--soft) .c-steps__circle .c-icon {
  width: 28px;
  height: 28px;
  color: var(--c-text-invert);
  stroke-width: 1.5;
}
.c-steps__num {
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  opacity: 0.9;
}

/* ==========================================================
 *  c-cta-card：カード上部にアイコンを配置
 * ========================================================== */
.c-cta-card__icon {
  width: 40px;
  height: 40px;
  color: var(--c-brand-800);
  stroke-width: 1.5;
}
.c-cta-card--primary .c-cta-card__icon {
  color: var(--c-brand-800);
}

/* ==========================================================
 *  c-faq：summary の左に help-circle アイコン
 *    wp:details は HTML を改変できないため、background-image で
 *    Lucide help-circle を左アイコンとして表示する。
 * ========================================================== */
.c-faq .wp-block-details > summary {
  padding-left: calc(var(--sp-5) + 1.75em);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a5d8c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/><path d='M12 17h.01'/></svg>");
  background-repeat: no-repeat;
  background-position: var(--sp-5) center;
  background-size: 1.25em 1.25em;
}

/* =============================================================
 * Works 一覧用 サイドバーレイアウト（archive-works.php 補助）
 *   PHPテンプレート側のインラインスタイルで効くが、
 *   CSSキャッシュ対策として同じ定義をここに入れておく
 * ============================================================= */
.sec-layout-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 2.5rem;
  align-items: start;
}
.sec-layout-sidebar > * {
  min-width: 0;
}
.sec-layout-sidebar .sec-sidebar {
  position: sticky;
  top: 2rem;
}
.sec-works-subsection { margin-bottom: 3.5rem; }
.sec-works-subsection:last-child { margin-bottom: 0; }
.sec-works-subsection__header {
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--c-brand-800);
}
.sec-works-subsection__title {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--c-brand-900);
  margin: 0;
  line-height: 1.4;
}
.sec-works-subsection__lead {
  margin: 0.625rem 0 0;
  font-size: 0.9375rem;
  color: var(--c-text-muted);
  line-height: 1.7;
}
@media (max-width: 860px) {
  .sec-layout-sidebar {
    grid-template-columns: 1fr;
  }
  .sec-layout-sidebar .sec-sidebar {
    position: static;
  }
}

/* =============================================================
 * Section CTA（お問い合わせ誘導）— 青背景・白カード2枚
 *   footer.php から全ページ共通で出力される CTA セクション。
 *   sec-cta__card + c-card__ 系のマークアップに対するスタイル。
 *   以前は pages/home.css 側に置いていたが、TOP でしか読み込まれず
 *   下層ページでボタンが下端揃いにならない（margin-top:auto が効かない）
 *   不具合があったため、全ページで読まれる components.css に移動。
 * ========================================================== */
.sec-cta .sec-cta__cards {
  margin-top: var(--sp-6);
}

.sec-cta__card {
  box-shadow: var(--sh-lg);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sec-cta__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(20, 30, 50, 0.15);
}
.sec-cta__card .c-card__body {
  padding: var(--sp-6);
  gap: var(--sp-3);
}

/* アイコンとタグ・タイトルを上段に横並び（TOP 向けの派生用） */
.sec-cta__header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-2);
}

.sec-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--c-brand-50);
  color: var(--c-brand-800);
  flex-shrink: 0;
  margin: 0;
}
.sec-cta__icon .c-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.sec-cta__header-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}
.sec-cta__header-text .c-tag {
  align-self: flex-start;
}

.sec-cta__card .c-card__title {
  font-size: var(--fs-h3);
  color: var(--c-brand-900);
  margin: 0;
}

.sec-cta__card .c-card__excerpt {
  margin: 0;
  color: var(--c-text-muted);
  line-height: 1.8;
}

/* ★ これが main fix: カード高さ内でボタンを下端に張り付かせる */
.sec-cta__card .c-card__action {
  margin-top: auto;
  padding-top: var(--sp-3);
}
.sec-cta__card .c-btn {
  width: 100%;
  justify-content: space-between;
}

@media (max-width: 600px) {
  .sec-cta__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }
  .sec-cta__card .c-card__body {
    padding: var(--sp-5);
  }
}


/* =============================================================
 * Hover Enhancements（全体リッチ化）
 *   既存のホバーは色変化のみで控えめだったため、下線アニメーション・
 *   浮き上がり・影の強化などを統一感を持って追加する。
 *   duration / easing は tokens.css の --dur / --ease を共通利用。
 * ========================================================== */

/* --- 1. ヘッダー グローバルナビ: 下線が左→右にスッと伸びる ---
 *   is-current は既存の ::after で常時下線が出ているので、
 *   それ以外の項目に対して hover 時の下線を与える。 */
.l-nav__item:not(.is-current)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--c-brand-800);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
  pointer-events: none;
}
.l-nav__item:not(.is-current):hover::after {
  transform: scaleX(1);
}

/* --- 2. フッターナビ: 下線フェードイン ---
 *   text-decoration だと間隔が詰まって野暮ったいので
 *   background-gradient を 0→100% に伸ばす手法を使用。 */
.l-footer__col-list a {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  padding-bottom: 2px;
  transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}
.l-footer__col-list a:hover {
  background-size: 100% 1px;
}

/* --- 3. パンくずリンク: 控えめな下線スライドイン --- */
.c-breadcrumb__link {
  position: relative;
}
.c-breadcrumb__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.c-breadcrumb__link:hover::after {
  transform: scaleX(1);
}

/* --- 4. カード全体がリンクの時のみ: 浮き上がり + 影強化 ---
 *   リンクじゃないカード（TOP事業内容の .c-card.sec-services__card 等）
 *   には hover を効かせないよう、以下のいずれかに該当する場合だけ適用：
 *     - <a class="c-card"> のようにカード自身が a（例: c-card--book）
 *     - 子孫に .c-card__link を持つ（例: sec-cta__card > a.c-card__link）
 *     - 子に直接 a を持つ（フォールバック） */
a.c-card:hover,
.c-card:has(.c-card__link):hover,
.c-card:has(> a):hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lg);
}

/* --- 4.1 カードリンク hover の追加演出 ---
 *   既存の「translateY + shadow + c-card__title 色変化」に加え、
 *   以下を追加して、もう一段リッチな反応にする：
 *     - eyebrow も brand-800 に色変化
 *     - action 内のボタン（primary / secondary）の色が深まる
 *     - media がアイコン表示 (.c-card__media--icon) の時、背景色が
 *       brand-50 → brand-100 に深まって反応感を出す */
.c-card__link .t-eyebrow,
.c-card__link .c-btn,
.c-card__media--icon {
  transition: color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.c-card__link:hover .t-eyebrow {
  color: var(--c-brand-800);
}
.c-card__link:hover .c-btn--primary {
  background: var(--c-brand-900);
}
.c-card__link:hover .c-btn--secondary {
  background: var(--c-brand-50);
  border-color: var(--c-brand-800);
  color: var(--c-brand-900);
}
.c-card:has(.c-card__link):hover .c-card__media--icon,
a.c-card:hover .c-card__media--icon {
  background: var(--c-brand-100);
}

/* --- 5. c-cta-card: hover 効果が無かったため新規追加 ---
 *   お問い合わせページ SELECT カード、 Gutenberg の
 *   c-cta-card クラスが付く箇所すべてに効く。 */
.c-cta-card {
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.c-cta-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: var(--c-brand-200);
}
.c-cta-card:hover .c-cta-card__title {
  color: var(--c-brand-800);
}

/* --- 6. ロゴグリッド: 既存の枠色変化に軽いスケールを足す ---
 *   既存 transition に transform を追加して jump を防ぐ。 */
.c-logo-grid__item {
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.c-logo-grid__item:hover {
  transform: translateY(-2px);
}

/* --- 7. サイドバーのリンクリスト（コラムのカテゴリ / works のテーマ） ---
 *   sec-sidebar 配下の <ul><li><a> に対して、hover時に色変化 + 左側
 *   ラベル（1つ目の span）に下線スライドイン。右側の件数 (n) には
 *   下線を付けず、色変化だけ控えめに追従する。 */
.sec-sidebar ul li a {
  transition: color var(--dur) var(--ease);
}
.sec-sidebar ul li a:hover {
  color: var(--c-brand-800);
}
.sec-sidebar ul li a > span:first-child {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  padding-bottom: 2px;
  transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sec-sidebar ul li a:hover > span:first-child {
  background-size: 100% 1px;
}


/* =============================================================
 * === 2026-04-19 追加：service.html 各種ブラッシュアップ ===
 * ========================================================== */


/* ==========================================================
 *  sec-strength-box（事業内容ページ：「マネーステップオフィスの強み」枠）
 *    SERVICE 02 内の「強み」〜「一気通貫で対応」までを
 *    白背景のカードで囲み、グレー背景セクション内で区切りを明瞭に。
 * ========================================================== */
.sec-strength-box {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--sp-7) var(--sp-6);
  margin-top: var(--sp-8);
  box-shadow: var(--sh-sm);
}
@media (max-width: 768px) {
  .sec-strength-box {
    padding: var(--sp-5) var(--sp-4);
    margin-top: var(--sp-7);
  }
}


/* ==========================================================
 *  sec-service-index（3つのサービス概要カード）
 *    「詳しく見る」ボタンを右寄せに（MVカードと同じ挙動）。
 *    加えて、3カードの高さを揃えボタンを下固定に（画像1の指摘対応）。
 * ========================================================== */
.sec-service-index {
  align-items: stretch; /* l-grid のグリッドセル高さを揃える */
}
.sec-service-index .c-card {
  height: 100%;
}
.sec-service-index .c-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.sec-service-index .c-card__media {
  flex-shrink: 0;
}
.sec-service-index .c-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sec-service-index .c-card__title {
  margin: 0 0 var(--sp-4);
  /* 2行ぶんの高さを確保して 1行 / 2行 タイトルでボタンの位置を揃える
     fs-h3 1.25rem × line-height 1.5 × 2行 = 3em */
  min-height: 3em;
}
.sec-service-index .c-card__action {
  margin-top: auto; /* タイトルが短いカードでもボタンを下に */
  display: flex;
  justify-content: flex-end;
}


/* ==========================================================
 *  sec-works-themes-grid（対応可能なテーマ：共通）
 *    [works_themes_grid] ショートコード出力のタグを
 *    ひと回り大きく見せる。事業内容ページ・メディアページ
 *    両方で同じサイズになるよう共通セレクタで定義。
 * ========================================================== */
.sec-works-themes-grid .c-tag--block {
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  min-height: 3.5em;
}
@media (max-width: 768px) {
  .sec-works-themes-grid .c-tag--block {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-small);
    min-height: 3em;
  }
}


/* ==========================================================
 *  sec-service-pains（こんなお悩みありませんか？）
 *    タグが折り返されないよう font-size をやや小さめに調整。
 *    （画像2「専門用語をかみ砕くのが大変」が2行に折り返し → 1行に）
 * ========================================================== */
.sec-service-pains .c-tag--block {
  padding: var(--sp-4) var(--sp-4);
  font-size: 0.9375rem; /* 15px */
  font-weight: var(--fw-semibold);
  min-height: 3.2em;
  letter-spacing: 0;
  line-break: strict;
}
.sec-service-pains .c-tag--block .c-icon {
  width: 1.5rem;
  height: 1.5rem;
}
@media (max-width: 768px) {
  .sec-service-pains .c-tag--block {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-small);
    min-height: 3em;
  }
  .sec-service-pains .c-tag--block .c-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}


/* ==========================================================
 *  c-steps chevron 拡大
 *    取材・執筆の流れ / ご依頼の流れ / 一気通貫 の「＞」を
 *    2まわり大きく（14px → 26px）。視線誘導を強める。
 *    c-steps__circle の中心線に揃えて top を再調整。
 *    通常版の円は 72px なので top: 32px → top: 23px（円中心36px - 矢印13px）。
 *    soft版の円は 110px なので top: 47px → top: 42px（円中心55px - 矢印13px）。
 * ========================================================== */
.c-steps__item:not(:last-child)::after {
  width: 26px;
  height: 26px;
  top: 23px; /* 72pxの円の中心(36px)から13px上に */
  right: calc((var(--sp-5) / -2) - 13px);
  opacity: 0.55;
}

.c-steps--soft .c-steps__item:not(:last-child)::after {
  top: 42px; /* 110pxの円の中心(55px)から13px上に */
}

/* スマホ：下向き矢印に切り替わったときも大きく維持 */
@media (max-width: 480px) {
  .c-steps__item:not(:last-child)::after {
    width: 26px;
    height: 26px;
    bottom: calc((var(--sp-4) / -2) - 13px);
  }
}


/* ==========================================================
 *  c-faq：各FAQ項目間のマージン拡大＋開閉アニメーション
 *    - gap を sp-3 → sp-4 に広げて項目の独立感を出す
 *    - ::details-content 擬似要素への block-size アニメーションで
 *      中身がスムーズに開閉する（モダンブラウザのみ・
 *      interpolate-size: allow-keywords が必要）
 *    - 非対応ブラウザはネイティブの瞬時開閉にフォールバック
 * ========================================================== */
.c-faq {
  gap: var(--sp-5);
  interpolate-size: allow-keywords;
}

@supports (interpolate-size: allow-keywords) {
  .c-faq .wp-block-details::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transition:
      block-size 0.3s cubic-bezier(.4, 0, .2, 1),
      opacity 0.25s ease,
      content-visibility 0.3s allow-discrete;
  }
  .c-faq .wp-block-details[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

/* 開閉時の枠線ハイライトを滑らかに（既存と統合） */
.c-faq .wp-block-details {
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.c-faq .wp-block-details[open] {
  box-shadow: var(--sh-sm);
}


/* =============================================================
 * === 2026-04-19 追加(2nd)：ハンバーガーCTA大型化・
 *     サイドバー刷新・works grid・works__more ===
 * ========================================================== */


/* ==========================================================
 *  c-btn--xl（特大ボタン）
 *    ハンバーガーメニューのお問い合わせCTA 等、
 *    スマホでタップしやすくしたい箇所に付与する大型バリエーション。
 * ========================================================== */
.c-btn--xl {
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--fs-h4, 1.125rem);
  font-weight: var(--fw-semibold);
  min-height: 64px;
  letter-spacing: 0.02em;
}
.c-btn--xl.c-btn--wide {
  width: 100%;
}

/* ドロワー内CTAまわりにも余白を確保 */
.l-nav-drawer__cta {
  margin-top: var(--sp-4);
  padding: var(--sp-5) 0 var(--sp-2);
}


/* ==========================================================
 *  sec-sidebar（実績ギャラリー 右サイドバー）
 *    2026-04-19 クラス化：archive-works.php / inc/sidebar-works.php
 *    のインラインstyleを全てここに集約。スマホのレイアウト崩れも解消。
 * ========================================================== */
.sec-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.sec-sidebar__unit {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.sec-sidebar__unit--accent {
  background: var(--c-brand-50);
  border-color: var(--c-brand-200);
}

.sec-sidebar__unit-title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-eyebrow);
}

.sec-sidebar__unit-body {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--c-text);
}
.sec-sidebar__unit-note {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-caption);
  line-height: 1.7;
  color: var(--c-text-muted);
}
.sec-sidebar__unit-cta {
  display: flex;
  justify-content: center;
  margin: var(--sp-3) 0;
}

/* 検索フォーム */
.sec-sidebar__search {
  display: flex;
  gap: var(--sp-2);
}
.sec-sidebar__search-input {
  flex: 1;
  min-width: 0;
  padding: var(--sp-3) var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  background: var(--c-bg);
  outline: none;
  transition: border-color var(--dur) var(--ease);
}
.sec-sidebar__search-input:focus {
  border-color: var(--c-brand-800);
}
.sec-sidebar__search-submit {
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-brand-800);
  color: var(--c-text-invert);
  border: 0;
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease);
}
.sec-sidebar__search-submit:hover {
  background: var(--c-brand-900);
}

/* テーマ一覧 */
.sec-sidebar__term-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sec-sidebar__term-list li {
  border-bottom: 1px solid var(--c-line);
}
.sec-sidebar__term-list li:last-child {
  border-bottom: 0;
}
.sec-sidebar__term-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-3) 0;
  color: inherit;
  text-decoration: none;
  font-size: var(--fs-small);
}
.sec-sidebar__term-count {
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
  flex-shrink: 0;
  margin-left: var(--sp-2);
}
.sec-sidebar__empty {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
}


/* ==========================================================
 *  sec-works-grid / sec-works-subsection__more
 *    archive-works.php のインラインstyle除去に合わせてクラス化。
 * ========================================================== */
.sec-works-grid {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sec-works-subsection__more {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-6);
}


/* =============================================================
 * === 2026-04-19 追加(4th)：profile / media / FAQ 細調整 ===
 * ========================================================== */


/* ==========================================================
 *  sec-profile-hero（代表プロフィール：写真 + 紹介）
 *    センター寄せ。スマホでは縦積み、写真は中央に。
 * ========================================================== */
.sec-profile-hero {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-7);
  align-items: flex-start;
  justify-content: center;
  max-width: 56rem;
  margin-inline: auto;
}
.sec-profile-hero__photo {
  flex: 0 0 200px;
  max-width: 100%;
  margin: 0;
}
.sec-profile-hero__photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-md);
}
.sec-profile-hero__body {
  flex: 0 1 30rem;
  min-width: 0;
}
.sec-profile-hero__eyebrow {
  margin: 0;
}
.sec-profile-hero__title {
  margin: var(--sp-2) 0 0;
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: var(--fw-semibold);
}
.sec-profile-hero__name {
  margin: var(--sp-5) 0 0;
  font-size: 1.125rem;
  font-weight: var(--fw-semibold);
}
.sec-profile-hero__meta {
  margin: var(--sp-2) 0 0;
  line-height: 1.8;
}

@media (max-width: 600px) {
  .sec-profile-hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .sec-profile-hero__photo {
    flex: 0 0 auto;
    width: 180px;
  }
  .sec-profile-hero__body {
    flex: 1 1 100%;
  }
}


/* ==========================================================
 *  sec-profile-quals（保有資格）
 *    c-card__meta（「日本FP協会認定」等）をセンター寄せ。
 *    カード本体のテキストも中央揃えに。
 * ========================================================== */
.sec-profile-quals .c-card__meta {
  display: block;
  text-align: center;
  margin: 0 0 var(--sp-2);
  color: var(--c-text-muted);
  font-size: var(--fs-caption);
}
.sec-profile-quals .c-card__title {
  text-align: center;
}
.sec-profile-quals .c-card__body {
  text-align: center;
}


/* ==========================================================
 *  sec-profile-career（経歴テーブル）
 *    年数列（th）が「2010年〜2015\n年」のように改行されないように
 *    white-space: nowrap で1行維持。
 * ========================================================== */
.sec-profile-career th {
  white-space: nowrap;
  width: 1%; /* tableで最小幅にしつつnowrapを効かせるテクニック */
  padding-right: var(--sp-5);
}

@media (max-width: 600px) {
  .sec-profile-career th {
    padding-right: var(--sp-3);
    font-size: var(--fs-caption);
  }
}


/* ==========================================================
 *  sec-profile-awards（受賞歴）
 *    旧インラインstyleを完全クラス化。
 *    スマホで画像をセンター寄せ（画像5の指摘対応）。
 * ========================================================== */
.sec-profile-awards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.sec-profile-awards__item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  align-items: flex-start;
  padding: var(--sp-5);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.sec-profile-awards__figure {
  flex: 0 0 140px;
  max-width: 100%;
  margin: 0;
}
.sec-profile-awards__figure img {
  width: 100%;
  height: auto;
  display: block;
}
.sec-profile-awards__icon-box {
  width: 100%;
  aspect-ratio: 1;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.sec-profile-awards__icon {
  width: 84px;
  height: 84px;
  color: var(--c-brand-800);
}
.sec-profile-awards__sparkle {
  position: absolute;
  color: #c9a85b;
}
.sec-profile-awards__sparkle--tr {
  width: 20px;
  height: 20px;
  top: 14%;
  right: 16%;
}
.sec-profile-awards__sparkle--bl {
  width: 14px;
  height: 14px;
  bottom: 20%;
  left: 18%;
}
.sec-profile-awards__body {
  flex: 1 1 20rem;
  min-width: 0;
}
.sec-profile-awards__title {
  margin: 0 0 var(--sp-3);
  font-size: 1.125rem;
  font-weight: var(--fw-semibold);
  line-height: 1.5;
}
.sec-profile-awards__body p {
  margin: 0 0 var(--sp-3);
}
.sec-profile-awards__body p:last-child {
  margin-bottom: 0;
}
.sec-profile-awards__link {
  font-size: var(--fs-small);
}

@media (max-width: 600px) {
  .sec-profile-awards__item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .sec-profile-awards__figure {
    flex: 0 0 auto;
    width: 140px;
    margin: 0 auto; /* 画像をセンター寄せ */
  }
  .sec-profile-awards__body {
    flex: 1 1 100%;
  }
}


/* ==========================================================
 *  sec-profile-related（関連ページ 2カード）
 *    旧インラインstyleをクラス化。
 * ========================================================== */
.sec-profile-related {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 56rem;
  margin-inline: auto;
}
.sec-profile-related__body {
  text-align: center;
  padding: var(--sp-7) var(--sp-6);
}


/* ==========================================================
 *  sec-media-movies（メディア関係者ページ 動画グリッド）
 *    HTML側で layout:"grid" columnCount:4 を指定しているため、
 *    Gutenbergが自動で .wp-container-{id} インラインCSSで
 *    grid-template-columns: repeat(4, minmax(0, 1fr)) を出力する。
 *    SPでは以下のメディアクエリで 2x2 に上書き。
 *
 *    ※ Gutenbergインラインスタイルを確実に上書きするため
 *      詳細度を高くした複合セレクタを使用。
 * ========================================================== */
.sec-media-movies,
.wp-block-group.sec-media-movies {
  gap: var(--sp-5);
}
.sec-media-movies > *,
.wp-block-group.sec-media-movies > * {
  /* Gutenbergのflow/constrainedレイアウトが付与する縦マージンを解除 */
  margin-top: 0;
  margin-bottom: 0;
  max-width: none;
  min-width: 0;
}
@media (max-width: 900px) {
  /* SPは 2x2 レイアウト。Gutenbergのインラインスタイル(columnCount:4)
     を上書きするため、複合セレクタで詳細度を確保。 */
  .sec-media-movies,
  .wp-block-group.sec-media-movies,
  section .wp-block-group.sec-media-movies,
  .l-section .wp-block-group.sec-media-movies {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
  }
}
@media (max-width: 420px) {
  .sec-media-movies,
  .wp-block-group.sec-media-movies,
  section .wp-block-group.sec-media-movies,
  .l-section .wp-block-group.sec-media-movies {
    gap: var(--sp-3);
  }
}


/* ==========================================================
 *  c-steps__desc のスマホ時センター寄せ
 *    既存は text-align: left だが、スマホで縦並び（1列）に
 *    なったときは c-steps__title と揃えてセンター寄せ。
 *    （media.html FLOW 画像9の指摘対応）
 * ========================================================== */
@media (max-width: 720px) {
  .c-steps__desc {
    text-align: center;
  }
}


/* ==========================================================
 *  Contact Form 7（CF7）：必須 / 任意ラベルの前の半角スペース
 *    CF7フォームのテンプレ側で
 *      <span class="cf7-form-label-text">...</span> <span class="cf7-form-required">必須</span>
 *    のように半角スペースを挟んだ上で、視覚的にも余白を確保。
 *    加えて必須/任意バッジの基本色を再定義。
 * ========================================================== */
.cf7-form-required,
.cf7-form-optional {
  display: inline-block;
  margin-left: 0.5em; /* 半角スペースに加えて少し余白を追加 */
  padding: 0.15em 0.55em;
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  border-radius: var(--r-sm);
  vertical-align: middle;
}
.cf7-form-required {
  background: #dc2626; /* 明確な赤（エラー／必須の慣習色） */
  color: #fff;
}
.cf7-form-optional {
  background: var(--c-bg-alt);
  color: var(--c-text-muted);
  border: 1px solid var(--c-line);
}




/* =============================================================
 * === 2026-04-19 追加(5th)：枠線強化・動画グリッド補強 ===
 * ========================================================== */

/* ==========================================================
 *  実績ギャラリー / マネーコラム カードの枠線を濃く
 *    TOP と各アーカイブページ、両方に対応。
 *    既存の var(--c-line) は薄いグレーだが、
 *    ここでは明示的に濃いめのグレーで枠線を強調する。
 * ========================================================== */
.c-card--works,
.c-card--column,
.c-card--news,
.sec-works-grid .c-card,
.sec-column-grid .c-card {
  border-color: #b8c0cc; /* 従来より一段濃いグレー */
}
.c-card--works:hover,
.c-card--column:hover,
.c-card--news:hover,
.sec-works-grid .c-card:hover,
.sec-column-grid .c-card:hover {
  border-color: var(--c-brand-200);
}


/* =============================================================
 * === 2026-04-19 追加(7th)：philosophy VALUES / POLICY カード刷新 ===
 * ========================================================== */

/* ==========================================================
 *  sec-philosophy-card
 *    VALUES（バリュー）/ POLICY（制作方針）の3カード共通。
 *    従来の小さな円バッジ + 01数字 から、アイコンバッジ + 
 *    ナンバーラベル + アクセント線のデザインに刷新。
 *    カード自体もパディング増・上辺アクセント・hover浮き上がり。
 * ========================================================== */

/* リストの素の装飾を除去（従来インラインstyleで指定していた分） */
.sec-philosophy-values,
.sec-philosophy-policies {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sec-philosophy-card {
  position: relative;
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  text-align: center;
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

/* 上辺の装飾ライン（ブランドカラーのアクセント） */
.sec-philosophy-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--c-brand-600) 0%,
    var(--c-brand-800) 100%
  );
  opacity: 0.85;
  transition: opacity var(--dur) var(--ease);
}

.sec-philosophy-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -12px rgba(18, 38, 63, 0.18);
  border-color: var(--c-brand-200);
}
.sec-philosophy-card:hover::before {
  opacity: 1;
}

/* ---- ヘッド（アイコンバッジ + ナンバーラベル） ---- */
.sec-philosophy-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.sec-philosophy-card__icon-wrap {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--c-brand-50);
  border: 1px solid var(--c-brand-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sec-philosophy-card:hover .sec-philosophy-card__icon-wrap {
  background: var(--c-brand-100);
  border-color: var(--c-brand-200);
}

.sec-philosophy-card__icon {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--c-brand-800);
  stroke-width: 1.5;
}

.sec-philosophy-card__number {
  display: inline-block;
  font-family: var(--ff-num, var(--ff-body));
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.15em;
  color: var(--c-brand-700);
  text-transform: uppercase;
}

/* ---- ボディ（タイトル + 説明文） ---- */
.sec-philosophy-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sec-philosophy-card__title {
  position: relative;
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-4);
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  color: var(--c-brand-900);
}

/* タイトル下のアクセント線（40px幅） */
.sec-philosophy-card__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: var(--c-brand-800);
  border-radius: 999px;
}

.sec-philosophy-card__desc {
  margin: 0;
  line-height: 1.8;
  color: var(--c-text);
  text-align: left; /* 本文は読みやすさのため左寄せ */
}

/* ---- POLICYバリアント（背景上アクセントの色調をブランドメインに） ---- */
.sec-philosophy-card--policy .sec-philosophy-card__icon-wrap {
  background: var(--c-brand-100);
  border-color: var(--c-brand-200);
}
.sec-philosophy-card--policy:hover .sec-philosophy-card__icon-wrap {
  background: var(--c-brand-200);
}

/* ---- レスポンシブ ---- */
@media (max-width: 900px) {
  .sec-philosophy-card {
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
  }
  .sec-philosophy-card__icon-wrap {
    width: 4.5rem;
    height: 4.5rem;
  }
  .sec-philosophy-card__icon {
    width: 2rem;
    height: 2rem;
  }
  .sec-philosophy-card__title {
    font-size: 1.125rem;
  }
}

@media (max-width: 600px) {
  .sec-philosophy-card__desc {
    text-align: center; /* スマホ1列時は中央寄せで見栄え統一 */
  }
}


/* =============================================================
 * === 2026-04-19 追加(8th)：philosophy MISSION/VISION/QUALITY 刷新 ===
 * ========================================================== */

/* ==========================================================
 *  sec-philosophy-principle
 *    MISSION / VISION / QUALITY の大ボックス共通スタイル。
 *    VALUES/POLICY（アイコン付き3カード・ゴシック体）と格の違いを
 *    出すため、こちらは「経営の3大柱」として明朝体の見出し＋
 *    上品な装飾で差別化している。
 *    - 上辺グラデーションアクセント
 *    - ヘッドラインは明朝体（serif）で権威性を演出
 *    - 見出しの下にアクセント線
 *    - padding 拡大 + 角丸強化 + soft shadow
 * ========================================================== */

.sec-philosophy-principle {
  position: relative;
  padding: var(--sp-8) var(--sp-7) var(--sp-7);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 24px -16px rgba(18, 38, 63, 0.12);
  overflow: hidden;
}

/* VISION は alt 背景に載るため、カード本体は白で浮かせる */
.sec-philosophy-principle--vision {
  background: var(--c-bg);
}

/* 上辺アクセントライン（VALUES/POLICY カードと同じトーン） */
.sec-philosophy-principle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--c-brand-600) 0%,
    var(--c-brand-800) 100%
  );
}

/* 見出し（キーメッセージ）
   VALUES/POLICY（ゴシック）との差別化のため明朝体にする。
   フォントウェイトを軽めにして明朝の線の美しさを活かす。 */
.sec-philosophy-principle__headline {
  position: relative;
  margin: 0 0 var(--sp-6);
  padding-bottom: var(--sp-5);
  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "游明朝",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Sawarabi Mincho",
    serif;
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: var(--c-brand-900);
  text-align: center;
}
/* 見出し下のアクセント線（60px幅、中央配置） */
.sec-philosophy-principle__headline::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--c-brand-800);
  border-radius: 999px;
}

/* 本文
   ミッション・ビジョンの長文は左寄せで読みやすさを優先。
   QUALITYも同じく左寄せ（--quality バリアントで max-width だけ広げる）。 */
.sec-philosophy-principle__body {
  max-width: 40rem;
  margin: 0 auto;
  text-align: left;
}
.sec-philosophy-principle__body > p {
  margin: 0 0 var(--sp-4);
  line-height: 1.8;
}
.sec-philosophy-principle__body > p:last-child {
  margin-bottom: 0;
}

/* QUALITY は見出しなし＋本文が長いので max-width を広げる */
.sec-philosophy-principle__body--quality {
  max-width: 44rem;
}

/* QUALITY 内の本文間の余白（リストの前後） */
.sec-philosophy-principle--quality .sec-philosophy-principle__body--quality {
  margin-bottom: var(--sp-6);
}
.sec-philosophy-principle--quality .sec-philosophy-quality-list + .sec-philosophy-principle__body--quality {
  margin-top: var(--sp-6);
  margin-bottom: 0;
}

/* ---- レスポンシブ ---- */
@media (max-width: 768px) {
  .sec-philosophy-principle {
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
  }
  .sec-philosophy-principle__headline {
    font-size: 1.25rem;
    line-height: 1.7;
  }
  .sec-philosophy-principle__body--quality {
    text-align: left;
  }
}


/* ==========================================================
 *  sec-philosophy-quality-list
 *    QUALITY 内の「良質な情報の3条件」リスト。
 *    従来の薄グレー長方形＋左上に小さな番号 から、
 *    左に大きな番号バッジ、右にテキスト（縦中央）、
 *    左サイドにブランドカラーの縦アクセント線を入れた
 *    デザインへ刷新。
 * ========================================================== */

.sec-philosophy-quality-list {
  list-style: none;
  counter-reset: philo-num;
  padding: 0;
  margin: var(--sp-6) auto;
  max-width: 44rem;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.sec-philosophy-quality-list__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-5);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* 左の縦アクセントバー */
.sec-philosophy-quality-list__item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: linear-gradient(
    180deg,
    var(--c-brand-600) 0%,
    var(--c-brand-800) 100%
  );
}
.sec-philosophy-quality-list__item:hover {
  transform: translateX(2px);
  border-color: var(--c-brand-200);
  box-shadow: 0 6px 18px -12px rgba(18, 38, 63, 0.18);
}

/* 番号バッジ */
.sec-philosophy-quality-list__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--c-bg);
  border: 1.5px solid var(--c-brand-800);
  color: var(--c-brand-800);
  font-family: var(--ff-num, var(--ff-body));
  font-size: 0.9375rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}

/* テキスト */
.sec-philosophy-quality-list__text {
  flex: 1;
  line-height: 1.7;
  color: var(--c-text);
  font-weight: var(--fw-medium);
}

/* ---- レスポンシブ ---- */
@media (max-width: 600px) {
  .sec-philosophy-quality-list__item {
    padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-4);
    gap: var(--sp-3);
  }
  .sec-philosophy-quality-list__num {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.875rem;
  }
  .sec-philosophy-quality-list__text {
    font-size: var(--fs-small);
    line-height: 1.6;
  }
}


/* =============================================================
 * === 2026-04-19 追加(9th)：グラデーション＆デザイン仕掛け ===
 *    薄いブルーのグラデ背景を全体に適用し、控えめな装飾を重ねて
 *    サイト全体の格を一段引き上げる。
 * ========================================================== */

/* ==========================================================
 *  [1] l-section--alt をフラットグレー → 薄いブルーグラデに
 *      全ページの「alt セクション」が対象。
 *      「上は白からスタート → 下はしっかり目のブルーに沈む」で
 *      視認性を確保しつつグラデーション感を強く出す。
 * ========================================================== */
.l-section--alt {
  background: linear-gradient(
    180deg,
    #ffffff 0%,       /* 上部：純白スタート（テキスト視認性◎） */
    #f2f7fc 25%,      /* 25%付近：ごく薄い水色 */
    #c6d9ec 100%      /* 下部：しっかり目のブルーグレー */
  );
  position: relative;
}

/* 右上に控えめなブランドカラーの光（スポットライト風） */
.l-section--alt::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  max-width: 680px;
  height: 90%;
  background: radial-gradient(
    ellipse at top right,
    rgba(74, 138, 181, 0.18) 0%,
    rgba(74, 138, 181, 0.06) 40%,
    transparent 75%
  );
  pointer-events: none;
  z-index: 0;
}
/* 左下に白い光を強めに（下部が濃くなる分、左下は明るさで抜け感を作る） */
.l-section--alt::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 45%;
  max-width: 560px;
  height: 75%;
  background: radial-gradient(
    ellipse at bottom left,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0.25) 40%,
    transparent 75%
  );
  pointer-events: none;
  z-index: 0;
}
/* alt内のコンテナは radial の上に重ねる */
.l-section--alt > * {
  position: relative;
  z-index: 1;
}


/* ==========================================================
 *  [2] sec-philosophy-principle（MISSION/VISION/QUALITY）
 *      大ボックス背景は白単色に。
 *      l-section--alt 側がグラデ背景になったため、カードまで
 *      グラデにするとグラデonグラデで視覚がぼやける。
 *      ここは白でしっかり浮き立たせ、shadowを強めて存在感を出す。
 * ========================================================== */
.sec-philosophy-principle {
  background: #ffffff;
  box-shadow:
    0 2px 4px rgba(18, 38, 63, 0.04),
    0 16px 36px -18px rgba(18, 38, 63, 0.22);
}


/* ==========================================================
 *  [3] h2 センター見出し下のアクセント線をグラデに
 *      全セクションの統一感を出すための差し色。
 *      typography.css の定義を components.css 末尾で上書き。
 * ========================================================== */
.t-heading--centered::after {
  height: 3px;
  width: 3em;
  background: linear-gradient(
    90deg,
    var(--c-brand-600) 0%,
    var(--c-brand-900) 100%
  );
  border-radius: 999px;
}


/* ==========================================================
 *  [4] sec-media-books（著書カード）スマホ時 2x2 対応
 *      従来 l-grid--4 のままだったのでスマホで1列になっていた。
 *      768px以下で 2列 / 420px以下でも 2列維持（gap縮小のみ）。
 * ========================================================== */
.sec-media-books {
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 900px) {
  .sec-media-books,
  .wp-block-group.sec-media-books {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
  }
}
@media (max-width: 420px) {
  .sec-media-books,
  .wp-block-group.sec-media-books {
    gap: var(--sp-3);
  }
}


/* ==========================================================
 *  [5] VALUES / POLICY アイコンバッジに subtle グラデ
 *      従来のフラット brand-50 → 上から薄く光が差す感じに。
 * ========================================================== */
.sec-philosophy-card__icon-wrap {
  background: linear-gradient(
    145deg,
    #ffffff 0%,
    var(--c-brand-50) 60%,
    var(--c-brand-100) 100%
  );
}
.sec-philosophy-card--policy .sec-philosophy-card__icon-wrap {
  background: linear-gradient(
    145deg,
    #ffffff 0%,
    var(--c-brand-100) 60%,
    var(--c-brand-200, #b9cfdd) 100%
  );
}
.sec-philosophy-card:hover .sec-philosophy-card__icon-wrap {
  background: linear-gradient(
    145deg,
    var(--c-brand-50) 0%,
    var(--c-brand-100) 60%,
    var(--c-brand-200, #b9cfdd) 100%
  );
}


/* ==========================================================
 *  [6] works/column/news カード：左上にほのかな光アクセント
 *      hover 時により活性化。
 * ========================================================== */
.c-card--works,
.c-card--column,
.c-card--news {
  position: relative;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #fafcfd 100%
  );
}


/* ==========================================================
 *  [7] sec-media-books カード枠線も少し濃く（TOPとギャラリー
 *      統一感のため。前回 works/column を濃くした流れで）
 * ========================================================== */
.c-card--book {
  border-color: #dbe3ec;
  transition:
    transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.c-card--book:hover {
  border-color: var(--c-brand-200, #b9cfdd);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -14px rgba(18, 38, 63, 0.18);
}


/* =============================================================
 * === 2026-04-19 追加(10th)：対応可能なテーマ（works themes grid） ===
 *    media.html / service.html の「対応可能なテーマ」を
 *    functions.php の [works_themes_grid] ショートコードで
 *    動的出力するように変更。各タグから works テーマ別
 *    アーカイブへリンクする。
 * ========================================================== */

/* ==========================================================
 *  sec-works-themes-grid（ショートコード出力のベースクラス）
 *    l-grid--4 を継承しつつ、sec-media-themes / sec-service-themes
 *    の追加クラスも受ける想定。
 *    l-grid--4 の 768px以下で 1列 にレイアウトされるデフォルトを
 *    このセクションでは「2列」で上書き。
 * ========================================================== */
.sec-works-themes-grid {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* スマホ（768px以下）で 2列に。layout.css の .l-grid--4 { 1fr } より
   詳細度を上げるためクラスを重ねて指定。 */
@media (max-width: 768px) {
  .l-grid.sec-works-themes-grid,
  .l-grid.sec-media-themes,
  .l-grid.sec-service-themes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
  }
}


/* ==========================================================
 *  c-tag--link（リンク版の c-tag--block）
 *    works テーマアーカイブへのリンクとして振る舞う a 要素の
 *    スタイル。ベースは c-tag--block と同じ見た目で、
 *    hover でブランドカラーが載るように。
 * ========================================================== */
a.c-tag--block,
.c-tag--link {
  text-decoration: none;
  color: var(--c-text);
  cursor: pointer;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

a.c-tag--block:hover,
.c-tag--link:hover {
  background: var(--c-brand-50);
  border-color: var(--c-brand-600);
  color: var(--c-brand-900);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -10px rgba(18, 38, 63, 0.25);
}

a.c-tag--block:focus-visible,
.c-tag--link:focus-visible {
  outline: 2px solid var(--c-brand-600);
  outline-offset: 2px;
}


/* =============================================================
 * === 2026-04-19 追加(11th)：グラデ背景上での透過対策 ===
 *    l-section--alt に薄ブルーのグラデを入れたことで、
 *    テーブルの行やアウトラインボタンがグラデ背景を透かして
 *    見栄えが悪くなっていたのを白で埋めて是正。
 * ========================================================== */

/* テーブル行：td に白背景を明示して透過させない
   （th 側は既に --c-bg-alt で塗られている） */
.c-table td {
  background: #ffffff;
}
/* th の背景も念のため明示（変数が別の場所で上書きされる可能性対策）
   ただし c-table--data は上ヘッダ行にブランドカラー塗りがあるため除外 */
.c-table:not(.c-table--data) th {
  background: var(--c-bg-alt, #f7f8fa);
}
/* c-table--data のヘッダ行は白背景上書きを除外し、tbody の td のみ白に */
.c-table--data thead th {
  background: var(--c-brand-800);
  color: var(--c-text-invert);
}
.c-table--data tbody td {
  background: #ffffff;
}
/* c-table--data の偶数行ゼブラは既存スタイルを維持（bg-alt で塗る） */
.c-table--data tbody tr:nth-child(2n) td {
  background: var(--c-bg-alt);
}

/* アウトラインボタン（c-btn--secondary）：白で透過させない
   従来 background: transparent で青グラデ背景を透かしていた。
   hover時は既存の brand-800 塗りに上書きされるので挙動OK。 */
a.c-btn--secondary,
button.c-btn--secondary,
span.c-btn--secondary,
.wp-block-button.c-btn--secondary > .wp-block-button__link {
  background: #ffffff;
}