/*
Theme Name: 黒岩税理士事務所
Theme URI: https://planart.co.jp/
Author: 株式会社プラナート
Description: 黒岩税理士事務所 コーポレートサイト用テーマ。詳細な実装ルールは同梱 CLAUDE.md（および ④実装仕様）を参照。
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: kuroiwa
*/

/* ===== Design Tokens（④実装仕様と一致）===== */
:root{
  --c-primary:#0b7fff; --c-primary-dark:#0768d6;
  --c-teal:#06abc6; --c-teal-dark:#04798d;
  --c-heading:#16181d; --c-body:#3d4148; --c-sub:#5f6772; --c-muted:#848b94;
  --c-bg:#fbfcfd; --c-card:#ffffff; --c-card-alt:#f5f8fb; --c-panel:#e8f3f7; --c-border:#e4e7ec;
  --c-notice-bg:#fdf8ee; --c-notice-border:#e0a93b; --c-freee:#29a645; --c-navy:#123a63;
  /* --c-error: 2026-07-27 ボス決裁で確定。Snow Monkey Forms が実際に描画している赤(#cc3033)を
     そのまま採用（新規の配色決定はしていない）。白地に対して約5.2:1で WCAG AA(4.5:1) 達成。
     参考: プラグイン既定の枠線色 #d98585 は約2.6:1で 1.4.11(非テキスト3:1) 未達のため不採用。
     エラーは色のみに依存させず、枠線2px＋左ボーダー＋太字テキストの3手段で伝える（CLAUDE.md §2 a11y）。 */
  --c-error:#cc3033;
  --grad-cta:linear-gradient(90deg,#0768d6,#04798d);
  --grad-hero-scrim:linear-gradient(90deg,rgba(11,13,17,.6),rgba(11,13,17,.3) 45%,rgba(11,13,17,.05));
  /* --- 2026-09-02 追加: ブランド色に紐づく rgba() のチャンネル化 -------------
     rgba() は var(--c-primary-dark) のような「色」を受け取れないため、
     R,G,B の数値だけを持つトークンを別に置く（rgba(var(--x),.5) と書ける）。
     値は置換前の実測値と完全一致させてあり、この変更で描画は1pxも変わらない。

     ■ なぜ必要か（2026-08-28 ②共通テンプレ方式の決定を受けて）
       本テーマがテンプレ本体になる。次の案件は :root の書き換えだけで
       配色を差し替えられる状態にしておく必要がある。従来は影・スクリムに
       ブランド色が rgba() で直書きされており、ここだけ旧配色が残っていた。

     ■ 変更時の注意
       --c-primary-dark-rgb / --c-teal-rgb / --c-navy-rgb は、上の
       --c-primary-dark / --c-teal / --c-navy と**同じ色の別表記**。
       片方だけ直すと不整合になるので必ず対で書き換えること。
       （rgb(from var(--c-x) r g b / a) は Firefox 128 未満で値ごと落ち、
         スクリムが消えて白文字が読めなくなるため採用しない。）

     ■ 下の派生色はブランドから独立した専用値。リブランド時は個別に調整する。
     ------------------------------------------------------------------------ */
  --c-primary-dark-rgb:7,104,214;    /* = --c-primary-dark #0768d6 */
  --c-teal-rgb:6,171,198;            /* = --c-teal         #06abc6 */
  --c-navy-rgb:18,58,99;             /* = --c-navy         #123a63 */
  --c-teal-pale:#9bdde8;             /* --c-teal を白と60%混ぜた蒼。FVと採用FVの英字 */
  --c-shadow-rgb:9,32,58;            /* カード影のネイビー。--c-navy より濃い専用値 */
  --c-shadow-path-rgb:6,40,60;       /* 採用キャリアパスカードの影（深ティール） */
  --c-scrim-recruit-rgb:14,52,48;    /* 採用ヒーローのスクリム（深緑） */
  --c-scrim-welcome-rgb:4,88,104;    /* 採用WELCOME上端のスクリム */
  --c-accent-ice-rgb:121,227,249;    /* 応募資格カード2枚目の淡いティール地 */
  --c-band-top-rgb:18,112,216;       /* 料金ティーザー帯のグラデ上端 */
  --c-band-bottom-rgb:10,120,180;    /* 料金ティーザー帯のグラデ下端 */
  --r-btn:6px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-pill:999px;
  --sp-page:50px; --sp-page-wide:100px; --sp-hero:100px; --sp-card:44px; --sp-gap:20px;
  --bp-tab:1024px; --bp-sp:767px;
  --w-container:1280px;
}
/* ===== Reset / Base ===== */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:"Noto Sans JP",sans-serif;color:var(--c-body);background:var(--c-bg);font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--c-heading);line-height:1.45;margin:0 0 .5em}
a{color:var(--c-primary-dark);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--w-container);margin-inline:auto;padding-inline:var(--sp-page-wide)}
.l-header .container,.l-footer .container,.c-newsbar .container{padding-inline:var(--sp-page)}
@media (max-width:1024px){.container{padding-inline:var(--sp-page)}}
.eyebrow{font-family:"Poppins",sans-serif;font-weight:700;letter-spacing:.18em;font-size:12px;color:var(--c-teal-dark)}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.4em;padding:12px 22px;border-radius:var(--r-btn);font-weight:700;font-size:14px;line-height:1}
.btn--primary{background:var(--c-primary-dark);color:#fff}
.btn--outline{border:2px solid var(--c-primary);color:var(--c-primary-dark)}
.btn--white{background:#fff;color:var(--c-primary-dark)}
.btn--white:hover{text-decoration:none;opacity:.9}
/* Utility */
/* .screen-reader-text は WordPress/プラグインが出力する視覚的非表示クラス（SMFの進捗トラッカーが使用）。
   現状は wp-block-library のインラインCSSに定義があるだけなので、それが外れた時に
   日本語の説明文が画面に露出する。テーマ側でも同義クラスとして押さえておく。 */
.u-sr-only,.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== Header ===== */
.l-header{position:sticky;top:0;z-index:100;height:80px;background:#fff;border-bottom:1px solid var(--c-border)}
.l-header__inner{display:flex;align-items:center;gap:24px;height:100%}
.l-header__logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--c-heading);font-size:16px;white-space:nowrap;text-decoration:none}
.l-header__logo-mark{height:40px;width:auto;display:block}
.l-header__logo-type{height:24px;width:auto;display:block}

/* Global nav */
.l-header__nav-area{display:flex;align-items:center;gap:32px;margin-inline-start:auto}
.c-gnav__list{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.c-gnav__item{position:relative}
.c-gnav__link{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;background:none;border:0;font:inherit;cursor:pointer;color:var(--c-heading);text-decoration:none}
.c-gnav__link:hover{text-decoration:none;color:var(--c-primary-dark)}
.c-gnav__label{font-family:"Poppins",sans-serif;font-weight:700;font-size:12px;letter-spacing:.05em}
.c-gnav__sub{font-size:11px;color:var(--c-sub)}
.c-gnav__link[aria-current="page"] .c-gnav__label,
.c-gnav__link[aria-current="page"] .c-gnav__sub{color:var(--c-primary-dark)}
.c-gnav__link[aria-current="page"]{position:relative}
.c-gnav__link[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:2px;background:var(--c-primary)}
.c-gnav__sub-row{display:flex;align-items:center;gap:4px}
.c-gnav__arrow{font-size:9px;color:var(--c-sub);transition:transform .15s ease}

/* Dropdown panel */
.c-gnav__dropdown{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);min-width:180px;margin:0;padding:8px;list-style:none;background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-md);box-shadow:0 12px 24px rgba(22,24,29,.12);opacity:0;visibility:hidden;transition:opacity .15s ease}
.c-gnav__dropdown-item a{display:block;padding:10px 12px;border-radius:var(--r-btn);color:var(--c-body);font-size:13px}
.c-gnav__dropdown-item a:hover{background:var(--c-card-alt);color:var(--c-primary-dark);text-decoration:none}
.c-gnav__item--dropdown:hover .c-gnav__dropdown,
.c-gnav__item--dropdown:focus-within .c-gnav__dropdown,
.c-gnav__item--dropdown.is-open .c-gnav__dropdown{opacity:1;visibility:visible}
.c-gnav__item--dropdown.is-open .c-gnav__arrow,
.c-gnav__item--dropdown:hover .c-gnav__arrow{transform:rotate(180deg)}

/* TEL / CTA */
.l-header__actions{display:flex;align-items:center;gap:20px}
.c-tel{display:flex;align-items:center;gap:6px;color:var(--c-heading);font-family:"Poppins",sans-serif;font-weight:700;font-size:16px}
.c-tel:hover{color:var(--c-primary-dark);text-decoration:none}
.c-tel__icon{color:var(--c-primary-dark)}
.c-header-cta{white-space:nowrap}

/* Hamburger (SP) */
.c-hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;margin-inline-start:auto;padding:0;background:none;border:0;cursor:pointer}
.c-hamburger__line{display:block;width:22px;height:2px;background:var(--c-heading);transition:transform .2s ease,opacity .2s ease}
.c-hamburger[aria-expanded="true"] .c-hamburger__line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.c-hamburger[aria-expanded="true"] .c-hamburger__line:nth-child(2){opacity:0}
.c-hamburger[aria-expanded="true"] .c-hamburger__line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1024px){
  .c-hamburger{display:flex}
  .l-header__nav-area{position:fixed;inset:80px 0 0 0;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;margin:0;padding:24px var(--sp-page) 32px;background:#fff;overflow-y:auto;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease}
  .l-header__nav-area.is-open{opacity:1;visibility:visible;transform:translateY(0)}
  .c-gnav__list{flex-direction:column;align-items:stretch;gap:0}
  .c-gnav__item{border-bottom:1px solid var(--c-border)}
  .c-gnav__link{flex-direction:row;justify-content:space-between;align-items:center;width:100%;padding:16px 4px}
  .c-gnav__label{font-size:13px}
  .c-gnav__sub{font-size:12px}
  .c-gnav__link[aria-current="page"]::after{display:none}
  .c-gnav__dropdown{position:static;transform:none;min-width:0;margin-top:0;padding:0 0 8px;border:0;box-shadow:none;opacity:1;visibility:visible;height:0;overflow:hidden}
  .c-gnav__item--dropdown.is-open .c-gnav__dropdown{height:auto}
  .l-header__actions{flex-direction:column;align-items:stretch;gap:12px;margin-top:24px}
  .c-tel{justify-content:center;padding:10px}
  .c-header-cta{justify-content:center}
}

/* ===== Footer ===== */
.l-footer{background:var(--c-primary-dark);color:#fff;padding:var(--sp-hero) 0 32px}
.l-footer a{color:#fff}
.l-footer a:hover{text-decoration:underline}

.c-footer-grid{display:flex;flex-wrap:wrap;gap:var(--sp-card) 56px;align-items:flex-start}
.c-footer-info{margin-right:auto;max-width:340px}

.c-footer-info__name{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-weight:700;font-size:16px}
.c-footer-info__mark{height:34px;width:auto;display:block}
.c-footer-info__type{height:22px;width:auto;display:block}
.c-footer-info__meta{margin:0;font-size:13px;line-height:1.9}
.c-footer-info__meta p{margin:0}
.c-footer-info__meta a{font-family:"Poppins",sans-serif;font-weight:700}
.c-footer-info__list{margin:0}
.c-footer-info__row{display:flex;gap:12px;padding:6px 0;font-size:13px;line-height:1.7}
.c-footer-info__row dt{flex:0 0 auto;width:68px;font-weight:700}
.c-footer-info__row dd{margin:0}
.c-footer-info__row a{font-family:"Poppins",sans-serif;font-weight:700}

.c-footer-nav__heading{margin:0 0 16px;font-size:13px;font-weight:700;letter-spacing:.05em}
.c-footer-nav__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.c-footer-nav__list a{font-size:13px}

.c-footer-bottom{margin-top:var(--sp-card);padding-top:24px;border-top:1px solid #fff}
.c-footer-copyright{margin:0;font-size:12px;text-align:center}

@media (max-width:1024px){
  .c-footer-info{margin-right:0;flex:0 0 100%;max-width:none}
}
@media (max-width:767px){
  .c-footer-grid{flex-direction:column}
}
/* ===== Utility: placeholder（素材待ち枠） ===== */
.c-placeholder{display:flex;align-items:center;justify-content:center;background:var(--c-card-alt);border:1px dashed var(--c-border);border-radius:var(--r-md);color:var(--c-muted)}
.c-placeholder__label{font-size:12px;letter-spacing:.05em}

/* ===== 01_TOP: ①fv（ヒーロー） ===== _docs/01_TOP_part1.jpg 準拠 */
.p-fv{position:relative;min-height:700px;display:flex;flex-direction:column;justify-content:center;padding-block:var(--sp-hero);overflow:hidden}
.p-fv > .container{width:100%}
.p-fv__bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--c-heading)}
.p-fv__bg img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.p-fv__bg::after{content:"";position:absolute;inset:0;background:var(--grad-hero-scrim)}
.p-fv__inner{position:relative;z-index:1;max-width:640px}
.p-fv__lead{margin:0 0 var(--sp-gap);font-size:14px;line-height:1.8;color:#fff;opacity:.85}
.p-fv__eyebrow{margin:0 0 16px;color:var(--c-teal)}
.p-fv__title{margin:0 0 20px;font-size:58px;line-height:1.3;color:#fff}
.p-fv__catch{margin:0 0 16px;font-size:22px;font-weight:500;line-height:1.6;color:#fff}
.p-fv__en{margin:0 0 var(--sp-card);font-family:"Poppins",sans-serif;font-weight:100;font-style:italic;font-size:14px;color:var(--c-teal)}
.p-fv__actions{display:flex;flex-wrap:wrap;gap:var(--sp-gap)}
.p-fv .btn--outline{border-color:#fff;color:#fff}

/* ===== 01_TOP: news_bar ===== */
.c-newsbar{background:var(--c-primary-dark);color:#fff}
.c-newsbar__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px var(--sp-gap);padding-block:14px}
.c-newsbar__latest{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;min-width:0}
.c-newsbar__label{display:flex;align-items:baseline;gap:6px;flex:0 0 auto}
.c-newsbar__label-en{font-family:"Poppins",sans-serif;font-weight:700;font-size:14px;letter-spacing:.05em}
.c-newsbar__label-ja{font-size:12px;font-weight:700}
.c-newsbar__date{flex:0 0 auto;font-family:"Poppins",sans-serif;font-weight:700;font-size:13px}
.c-newsbar__title{font-weight:700;font-size:15px;color:#fff}
.c-newsbar__title:hover{color:#fff;text-decoration:underline}
.c-newsbar__more{flex:0 0 auto;font-weight:700;font-size:13px;color:#fff;white-space:nowrap}
.c-newsbar__more:hover{color:#fff;text-decoration:underline}

/* ===== 01_TOP: ②認定（CERTIFICATIONS） ===== */
.p-cert{padding-block:var(--sp-hero)}
.p-cert__head{margin-bottom:var(--sp-card);text-align:center}
.p-cert__title{margin:8px 0 0;font-size:28px}
.p-cert__list{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-gap);margin:0;padding:0;list-style:none}
.c-cert-card{display:grid;grid-template-rows:112px auto;gap:16px;align-content:center;align-items:center;justify-items:center;min-height:180px;padding:var(--sp-card) var(--sp-gap);text-align:center;background:var(--c-card-alt);border-radius:var(--r-lg)}
.c-cert-card__badge{width:112px;height:112px;border-radius:var(--r-pill);overflow:hidden}
.c-cert-card__badge img{width:100%;height:100%;object-fit:contain;display:block}
.c-cert-card__label{margin:0;font-size:13px;font-weight:700;color:var(--c-heading)}
.c-cert-card__label--lg{font-size:34px;line-height:1.2;color:var(--c-heading)}
.c-cert-card__caption{margin:0;font-size:13px;font-weight:700;color:var(--c-heading)}
.c-cert-card__stat{margin:0;line-height:1;color:var(--c-primary)}
.c-cert-card__stat-num{font-family:"Poppins",sans-serif;font-weight:700;font-size:40px}
.c-cert-card__stat-unit{margin-left:2px;font-size:16px;font-weight:700}

@media (max-width:1024px){
  .p-cert__list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .p-cert__list{grid-template-columns:1fr}
}

/* ===== 01_TOP: ③お悩み（COMMON ISSUES） ===== */
.p-issues{padding-block:var(--sp-hero);background:var(--c-card-alt)}
.p-issues__head{margin-bottom:var(--sp-card);text-align:center}
.p-issues__title{margin:8px 0 0;font-size:28px}
.p-issues__list{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-gap);margin:0 0 var(--sp-card);padding:0;list-style:none}
.c-issue-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:var(--sp-gap);background:var(--c-card);border-radius:var(--r-lg);text-align:center}
.c-issue-card__icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:4px;border-radius:var(--r-pill);background:var(--c-panel);color:var(--c-primary-dark)}
.c-issue-card__icon svg{width:26px;height:26px}
.c-issue-card__num{font-family:"Poppins",sans-serif;font-weight:700;font-size:11px;letter-spacing:.05em;color:var(--c-teal-dark)}
.c-issue-card__title{margin:0;font-size:15px;font-weight:700;line-height:1.4;color:var(--c-heading);min-height:4em}
/* ↑ min-height は「見出し2行ぶん」の床。CASE05だけ見出しが1行で
   本文の開始位置が上にズレていた（2026-08-03 ボス指摘）。
   実際の行間は typo.css §2 の `.l-main :is(p,li,…){line-height:2}` が
   上書きして 2.0 になるため、この 4em(=15px*2行*2.0/15px) はその前提値。
   下の @supports が使える環境では行間の実測から算出するので、
   将来 typo.css 側の行間を変えてもこちらは追随する。 */
@supports (min-height:1lh){
  .c-issue-card__title{min-height:calc(2 * 1lh)}
}
.c-issue-card__text{margin:0;font-size:14px;line-height:1.7;color:var(--c-sub)}
.p-issues__lead{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;font-size:20px;font-weight:700;color:var(--c-primary-dark);text-align:center}
.p-issues__lead-arrow{color:var(--c-teal-dark)}

@media (max-width:1024px){
  .p-issues__list{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:767px){
  .p-issues__list{grid-template-columns:1fr}
}

/* ===== 01_TOP: ④FOR YOU ===== */
.p-forwho{padding-block:var(--sp-hero)}
.p-forwho__head{margin-bottom:var(--sp-card);text-align:center}
.p-forwho__title{margin:8px 0 0;font-size:28px}
.p-forwho__list{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:var(--sp-gap);margin:0;padding:0;list-style:none}
.p-forwho__list>li{display:flex}
.c-forwho-card{display:flex;align-items:center;gap:var(--sp-gap);width:100%;padding:var(--sp-gap);background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-lg);color:inherit}
.c-forwho-card:hover{border-color:var(--c-primary);text-decoration:none}
.c-forwho-card__icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:var(--r-pill);background:var(--c-panel);color:var(--c-primary-dark)}
.c-forwho-card__icon svg{width:26px;height:26px}
.c-forwho-card__body{flex:1 1 auto;display:flex;flex-direction:column;gap:4px}
.c-forwho-card__title{font-size:15px;font-weight:700;color:var(--c-heading)}
.c-forwho-card__text{font-size:14px;line-height:1.7;color:var(--c-sub)}
.c-forwho-card__arrow{flex:0 0 auto;font-size:18px;font-weight:700;color:var(--c-primary-dark)}

@media (max-width:1024px){
  .p-forwho__list{grid-template-columns:1fr}
}

/* ===== 01_TOP: ⑤ABOUT US（part1.jpg 下部） ===== */
.p-about{padding-block:var(--sp-hero)}
.p-about__inner{display:flex;align-items:center;gap:var(--sp-card)}
.p-about__media{flex:1 1 56%;aspect-ratio:60/29;border-radius:var(--r-lg);overflow:hidden}
.p-about__media img{width:100%;height:100%;object-fit:cover;display:block}
.p-about__body{flex:1 1 44%}
.p-about__title{margin:8px 0 var(--sp-gap);font-size:28px}
.p-about__text{margin:0 0 var(--sp-card);font-size:14px;line-height:1.9;color:var(--c-body)}

@media (max-width:1024px){
  .p-about__inner{flex-direction:column}
  .p-about__media{width:100%}
}

/* ===== 01_TOP: ⑥強み（OUR STRENGTHS） ===== */
.p-strengths{padding-block:var(--sp-hero)}
.p-strengths__head{margin-bottom:var(--sp-hero);text-align:center}
.p-strengths__title{margin:8px 0 0;font-size:28px}
.p-strengths__list{display:flex;flex-direction:column;gap:var(--sp-card);margin:0;padding:0;list-style:none}
.c-strength-row{display:flex;align-items:center;gap:var(--sp-card)}
.p-strengths__list li:nth-child(2){flex-direction:row-reverse}
.c-strength-row__body{flex:1 1 40%}
.c-strength-row__media{flex:1 1 60%;aspect-ratio:5/2;border-radius:var(--r-lg);overflow:hidden}
.c-strength-row__media img{width:100%;height:100%;object-fit:cover;display:block}
.c-strength-row__num{display:flex;align-items:baseline;gap:10px;margin:0 0 12px}
.c-strength-row__num-bar{align-self:center;width:28px;height:4px;border-radius:var(--r-pill);background:var(--c-primary)}
.c-strength-row__num-label{font-family:"Poppins",sans-serif;font-weight:700;font-size:11px;letter-spacing:.12em;color:var(--c-sub)}
.c-strength-row__num-figure{font-family:"Poppins",sans-serif;font-weight:300;font-size:40px;color:var(--c-muted)}
.c-strength-row__title{margin:0 0 10px;font-size:19px}
.c-strength-row__text{margin:0;font-size:14px;line-height:1.8;color:var(--c-sub)}

@media (max-width:1024px){
  .c-strength-row,
  .p-strengths__list li:nth-child(2){flex-direction:column}
  .c-strength-row__media{width:100%}
}

/* ===== 01_TOP: ⑦SERVICES ===== */
.p-services{padding-block:var(--sp-hero)}
.p-services__head{margin-bottom:var(--sp-card);text-align:center}
.p-services__title{margin:8px 0 0;font-size:26px}
.p-services__sublabel{margin:var(--sp-gap) 0;font-size:13px;letter-spacing:.05em;color:var(--c-sub);text-align:center}
.p-services__divider{margin:var(--sp-gap) 0;font-size:14px;color:var(--c-teal-dark);text-align:center}

.p-services__entry-list{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-gap);margin:0;padding:0;list-style:none}
.c-entry-card__media{aspect-ratio:223/138;border-radius:var(--r-sm);overflow:hidden}
.c-entry-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.c-entry-card__label{margin:11px 0 0;padding:9px 8px;font-size:13px;font-weight:700;color:#fff;text-align:center;border-radius:var(--r-btn)}
.c-entry-card__label--primary{background:var(--c-primary-dark)}
.c-entry-card__label--teal{background:var(--c-teal-dark)}
.c-entry-card__label--dark{background:var(--c-navy)}

.p-services__main-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-gap);margin:var(--sp-card) 0 0;padding:0;list-style:none}
.c-main-card{padding:var(--sp-card);background:var(--c-panel);border-radius:var(--r-sm)}
.c-main-card__title{margin:0 0 10px;font-size:18px;color:var(--c-primary-dark)}
.c-main-card__text{margin:0;font-size:14px;line-height:1.8;color:var(--c-body)}

.p-services__actions{margin-top:var(--sp-card);text-align:center}

@media (max-width:1024px){
  .p-services__entry-list{grid-template-columns:repeat(2,1fr)}
  .p-services__main-list{grid-template-columns:1fr}
}
@media (max-width:767px){
  .p-services__entry-list{grid-template-columns:1fr}
}

/* ===== 01_TOP: ⑧料金導線 ===== */
.p-pricing-teaser__inner{position:relative;z-index:1;text-align:center}
.p-pricing-teaser__title{margin:0 0 8px;font-size:26px;color:#fff}
.p-pricing-teaser__text{margin:0 0 var(--sp-card);font-size:14px;color:rgba(255,255,255,.88)}
.p-pricing-teaser__plans{display:flex;max-width:880px;margin:0 auto var(--sp-card);padding:0;list-style:none;background:var(--c-card);border-radius:var(--r-lg);box-shadow:0 10px 28px rgba(var(--c-shadow-rgb),.22);overflow:hidden}
.p-pricing-teaser__plans li{flex:1 1 0;display:flex;border-left:1px solid var(--c-border)}
.p-pricing-teaser__plans li:first-child{border-left:0}
.c-plan-chip{display:flex;flex-direction:column;align-items:center;width:100%;padding:34px 24px;color:inherit;text-decoration:none;text-align:center;transition:background .15s ease}
.c-plan-chip:hover{background:var(--c-card-alt);text-decoration:none}
.c-plan-chip__name{display:block;margin:0 0 10px;font-size:19px;font-weight:700;color:var(--c-primary-dark)}
.c-plan-chip__tag{display:inline-block;margin:0 0 14px;padding:5px 13px;border-radius:var(--r-pill);background:var(--c-panel);font-size:12px;font-weight:700;color:var(--c-teal-dark)}
.c-plan-chip__desc{display:block;margin:0;font-size:14px;line-height:1.75;color:var(--c-body)}
.c-plan-chip__more{display:inline-flex;align-items:center;gap:.35em;margin-top:auto;padding-top:16px;font-size:14px;font-weight:700;color:var(--c-primary-dark);opacity:.7;transition:opacity .15s ease,gap .15s ease}
.c-plan-chip:hover .c-plan-chip__more{opacity:1;gap:.6em}
/* 電卓の液晶 96 10 = クロイワ（9=ク/6=ロ/1=イ/0=ワ）。意図的な仕込みのため
   写真の差し替え・別画像への変更は禁止。price-bg.jpg と firsttime-calc.jpg は
   内容同一だが用途が別なので統合しないこと。 */
.p-pricing-teaser__band{position:relative;overflow:hidden;padding-block:var(--sp-hero);text-align:center;background-image:linear-gradient(180deg,rgba(var(--c-band-top-rgb),.74),rgba(var(--c-band-bottom-rgb),.80)),url(assets/img/price-bg.jpg);background-size:cover;background-position:center}
.p-pricing-teaser__band .btn{position:relative;z-index:1}

@media (max-width:767px){
  .p-pricing-teaser__plans{flex-direction:column}
  .p-pricing-teaser__plans li{border-left:0;border-top:1px solid var(--c-border)}
  .p-pricing-teaser__plans li:first-child{border-top:0}
}

/* ===== 01_TOP: ⑨CASE STUDIES（⑥強みと同一のジグザグ行コンポーネント c-strength-row を再利用） ===== */
.p-cases{padding-block:var(--sp-hero);background:var(--c-card-alt)}
.p-cases__head{margin-bottom:var(--sp-hero);text-align:center}
.p-cases__title{margin:8px 0 0;font-size:28px}
.p-cases__list{display:flex;flex-direction:column;gap:var(--sp-hero);margin:0;padding:0;list-style:none}
.p-cases__list li:nth-child(2){flex-direction:row-reverse}

@media (max-width:1024px){
  .p-cases__list li:nth-child(2){flex-direction:column}
}

/* ===== 01_TOP: ⑩初めてバナー（FIRST TIME） ===== */
.p-first-banner{padding-block:var(--sp-hero)}
.c-first-banner{display:flex;align-items:stretch;gap:0;max-width:960px;margin-inline:auto;overflow:hidden;background:var(--c-panel);border-radius:var(--r-lg);text-decoration:none;color:inherit;box-shadow:0 10px 26px rgba(var(--c-shadow-rgb),.08);transition:box-shadow .25s ease,transform .25s ease}
.c-first-banner:hover{text-decoration:none;box-shadow:0 18px 40px rgba(var(--c-shadow-rgb),.16);transform:translateY(-3px)}
.c-first-banner__body{flex:1 1 47%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;padding:44px 40px}
.c-first-banner__title{margin:0;font-size:24px;line-height:1.45;color:var(--c-heading)}
.c-first-banner__text{margin:0 0 4px;font-size:14px;line-height:1.9;color:var(--c-body)}
.c-first-banner__cta{display:inline-flex;align-items:center;gap:.4em;align-self:flex-start;margin-top:2px;padding:12px 26px;border:2px solid var(--c-primary);border-radius:var(--r-btn);font-weight:700;font-size:14px;line-height:1;color:var(--c-primary-dark);transition:background .25s ease,border-color .25s ease,color .25s ease}
.c-first-banner:hover .c-first-banner__cta{background:var(--c-primary-dark);border-color:var(--c-primary-dark);color:#fff}
.c-first-banner__media{flex:1 1 53%;position:relative;overflow:hidden}
.c-first-banner__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.c-first-banner:hover .c-first-banner__media img{transform:scale(1.06)}

@media (max-width:1024px){
  .c-first-banner{flex-direction:column}
  .c-first-banner__media{min-height:200px}
}

/* ===== 01_TOP: ⑪ご相談の流れ（Flow） ===== */
.p-flow{padding-block:var(--sp-hero)}
.p-flow__head{margin-bottom:var(--sp-hero);text-align:center}
.p-flow__title{margin:8px 0 0;font-size:28px}
.p-flow__list{position:relative;display:flex;margin:0;padding:0;list-style:none}
.p-flow__list::before{content:"";position:absolute;top:32px;left:12%;right:12%;height:2px;background:var(--c-primary);z-index:0}
.c-flow-step{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;gap:12px}
.c-flow-step__circle{display:flex;flex-direction:column;align-items:center;justify-content:center;width:70px;height:70px;border-radius:var(--r-pill);background:var(--c-primary-dark);color:#fff}
.c-flow-step--final .c-flow-step__circle{background:var(--c-teal-dark)}
.c-flow-step__step{font-family:"Poppins",sans-serif;font-weight:700;font-size:8px;letter-spacing:.1em;opacity:.85}
.c-flow-step__num{font-family:"Poppins",sans-serif;font-weight:700;font-size:19px;line-height:1.2}
.c-flow-step__icon{display:flex;color:var(--c-heading)}
.c-flow-step__icon svg{width:30px;height:30px}
.c-flow-step__label{font-size:14px;font-weight:700;color:var(--c-heading);text-align:center}
.c-flow-step__caption{display:block;font-size:11px;font-weight:400;color:var(--c-sub)}

@media (max-width:767px){
  .p-flow__list{flex-direction:column;gap:var(--sp-card)}
  .p-flow__list::before{top:0;bottom:0;left:32px;right:auto;width:2px;height:auto}
}

/* ===== 01_TOP: ⑫ACCESS ===== */
.p-access__banner{position:relative;overflow:hidden;height:380px;background:var(--c-primary-dark)}
.p-access__banner::before{content:"";position:absolute;inset:0;background-image:url(assets/img/access-bg.jpg);background-size:cover;background-position:center;background-attachment:fixed;opacity:.30}
.p-access{padding-bottom:var(--sp-hero)}
.p-access__head{padding-top:var(--sp-hero);margin-bottom:var(--sp-card);text-align:center}
.p-access__title{margin:8px 0 0;font-size:28px}
.p-access__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-card);margin-bottom:var(--sp-card)}
.p-access__map{aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden}
.p-access__map iframe{width:100%;height:100%;border:0;display:block}
.p-access__office-name{margin:0 0 var(--sp-gap);font-size:17px;font-weight:700;color:var(--c-heading)}
.p-access__list{margin:0}
.p-access__row{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--c-border);font-size:13px}
.p-access__row:first-of-type{border-top:1px solid var(--c-border)}
.p-access__row dt{flex:0 0 auto;width:80px;font-weight:700;color:var(--c-sub)}
.p-access__row dd{margin:0;color:var(--c-body)}
.p-access__parking-block{margin-top:var(--sp-card)}
.p-access__parking-title{margin:0 0 var(--sp-gap);font-size:18px;color:var(--c-heading);text-align:center}
.p-access__parking{min-height:220px;padding:var(--sp-card);text-align:center;border-color:var(--c-teal)}
.p-access__parking .c-placeholder__label{font-weight:700;color:var(--c-teal-dark)}
/* 2026-08-01 黒岩先生の赤入れ（PDF p.5＝赤5P）で新設。
   「フェンスに看板がある場所に駐車して下さい。」＝ 提携駐車場のどこに停めるかの指定。
   ■ 置き場所：<figure> の外・.container の中
     surface.css §11 が SP で .p-access__parking--map だけを左右24px食い破って
     全幅にしている。figure の中に入れるとこの注記も一緒に画面端まで広がって
     読みにくくなるため、意図的に figure の外へ出してある。
   ■ figcaption（12px / --c-sub）より強くしている理由
     figcaption は駐車場の説明、こちらは訪問者への指示。
     同じ弱さで並べると指示が説明に埋もれる。 */
.p-access__parking-note{margin:14px 0 0;font-size:14px;font-weight:700;line-height:1.8;color:var(--c-teal-dark);text-align:center}

@media (max-width:1024px){
  .p-access__grid{grid-template-columns:1fr}
}
@media (max-width:767px){
  .p-access__banner{height:220px}
  .p-access__banner::before{background-attachment:scroll}
}

/* ===== 01_TOP: ⑬お知らせ一覧 ===== */
.p-news{padding-block:var(--sp-hero)}
.p-news__head{margin-bottom:var(--sp-card);text-align:center}
.p-news__title{margin:8px 0 0;font-size:28px}
.p-news__list{max-width:820px;margin:0 auto;padding:0;list-style:none}
.c-news-row{display:flex;align-items:baseline;gap:24px;padding:16px 0;border-bottom:1px solid var(--c-border)}
.c-news-row__date{flex:0 0 auto;font-family:"Poppins",sans-serif;font-size:13px;color:var(--c-sub)}
.c-news-row__title{font-size:14px;color:var(--c-heading)}
a.c-news-row__title:hover{color:var(--c-primary-dark)}
.p-news__actions{margin-top:var(--sp-card);text-align:center}

/* ===== 03_サービス案内: 概要カードのリンク化 ＋ サービス詳細6項目 ===== */
/* SERVICES概要カード（TOP部品流用）を03では詳細アンカーへのリンクに */
.c-entry-card__link{display:block;color:inherit;text-decoration:none}
.c-entry-card__media{display:block;transition:transform .2s ease,box-shadow .2s ease}
.c-entry-card__label{display:block;transition:filter .2s ease}
.c-entry-card__link:hover .c-entry-card__media{transform:translateY(-3px);box-shadow:0 12px 24px rgba(var(--c-shadow-rgb),.16)}
.c-entry-card__link:hover .c-entry-card__label{filter:brightness(1.08)}
.c-main-card__link{display:block;color:inherit;text-decoration:none}
.c-main-card{transition:transform .2s ease,box-shadow .2s ease}
.c-main-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(var(--c-shadow-rgb),.10)}

/* タグchip（汎用pill） */
.c-chip{display:inline-flex;align-items:center;padding:5px 12px;font-size:12px;font-weight:700;line-height:1.3;color:var(--c-teal-dark);background:var(--c-panel);border-radius:var(--r-pill)}

/* サービス詳細6項目 */
.p-service-detail{padding-block:var(--sp-hero);background:var(--c-card-alt)}
.p-service-detail__head{margin-bottom:var(--sp-card);text-align:center}
.p-service-detail__title{margin:8px 0 0;font-size:28px}
.p-service-detail__list{max-width:1000px;margin:0 auto;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--sp-gap)}
.c-svc-row{display:flex;align-items:stretch;background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-sm);overflow:hidden;scroll-margin-top:96px}
/* Q2+: 画像枠は幅200px固定＋行高いっぱいにフィル(align-items:stretch)。★03(200×110・行高110px)に寄せ、本文も詰めて行高をタイトに。上下余白ゼロ */
.c-svc-row__media{position:relative;flex:0 0 200px;background:var(--c-card-alt)}
.c-svc-row__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.c-svc-row__body{flex:1 1 auto;min-width:0;padding:14px 40px}
.c-svc-row__title{margin:0 0 6px;font-size:19px;color:var(--c-heading)}
.c-svc-row__text{margin:0 0 8px;font-size:14px;line-height:1.65;color:var(--c-sub)}
.c-svc-row__chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
@media (max-width:767px){
  .c-svc-row{flex-direction:column;align-items:stretch}
  .c-svc-row__media{flex-basis:auto;width:100%;height:170px;aspect-ratio:auto}
}

/* ===== 共通部品: 大型CTA帯（parts/cta.php／CLAUDE.md §4） ===== */
.c-cta{background:var(--grad-cta);padding-block:var(--sp-hero);text-align:center;color:#fff}
.c-cta__eyebrow{color:#fff}
.c-cta__title{margin:8px 0 var(--sp-gap);font-size:26px;color:#fff}
.c-cta__text{margin:0 0 var(--sp-card);font-size:14px;line-height:1.8;color:#fff;opacity:.9}
.c-cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-gap)}
.c-cta .btn--outline{border-color:#fff;color:#fff}

/* ===== 下層共通: ページKV（ブルー＋写真・左寄せ） ===== */
.p-page-kv{position:relative;overflow:hidden;min-height:180px;display:flex;align-items:center;background:var(--grad-cta)}
.p-page-kv__media{position:absolute;inset:0 0 0 38%}
.p-page-kv__media img{width:100%;height:100%;object-fit:cover}
.p-page-kv__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--c-primary-dark) 0%,rgba(var(--c-primary-dark-rgb),.55) 42%,rgba(var(--c-primary-dark-rgb),0) 100%)}
.p-page-kv__inner{position:relative;z-index:1;text-align:left}
.p-page-kv__en{display:block;margin-bottom:6px;color:#fff}
.p-page-kv__title{margin:0;font-size:30px;color:#fff}
.p-page-kv__sub{margin:8px 0 0;font-size:13px;color:rgba(255,255,255,.85)}

/* ===== 下層共通: パンくず ===== */
.c-breadcrumb{padding-block:14px;background:var(--c-bg)}
.c-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none;font-size:12px;color:var(--c-sub)}
.c-breadcrumb__item{display:flex;align-items:center;gap:8px}
.c-breadcrumb__item:not(:first-child)::before{content:"／";color:var(--c-muted)}
.c-breadcrumb__item a{color:var(--c-sub)}
.c-breadcrumb__item a:hover{color:var(--c-primary-dark)}
.c-breadcrumb__item[aria-current="page"]{color:var(--c-heading);font-weight:700}

/* ===== 下層共通: 定義リスト（プロフィール／概要／各種スペック表） ===== */
.c-deflist{max-width:820px;margin:0 auto;padding:0}
.c-deflist__row{display:flex;gap:24px;padding:18px 4px;border-bottom:1px solid var(--c-border)}
.c-deflist__row:first-child{border-top:1px solid var(--c-border)}
.c-deflist dt{flex:0 0 auto;width:120px;font-weight:700;font-size:14px;color:var(--c-sub)}
.c-deflist dd{margin:0;font-size:14px;line-height:1.8;color:var(--c-body)}

/* ===== 02_事務所案内: ①代表挨拶（写真左＋テキスト右） ===== */
.p-greeting{padding-block:var(--sp-hero)}
.p-greeting__head{text-align:center;margin-bottom:var(--sp-card)}
.p-greeting__title{margin:8px 0 0;font-size:28px;color:var(--c-heading)}
.p-greeting__row{display:flex;gap:var(--sp-card);align-items:flex-start;max-width:1000px;margin-inline:auto}
.p-greeting__media{flex:0 0 340px}
.p-greeting__media img{width:100%;height:auto;border-radius:var(--r-lg);display:block}
.p-greeting__body{flex:1 1 auto}
.p-greeting__lead{margin:0 0 20px;font-size:22px;font-weight:700;line-height:1.7;color:var(--c-primary-dark)}
.p-greeting__text{margin:0 0 1em;font-size:15px;line-height:2;color:var(--c-body)}
.p-greeting__text:last-of-type{margin-bottom:0}
.p-greeting__sign{display:flex;align-items:baseline;justify-content:flex-end;gap:14px;margin:28px 0 0}
.p-greeting__sign-en{font-family:"Poppins",sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--c-muted)}
.p-greeting__sign-name{font-size:16px;font-weight:700;color:var(--c-heading)}

/* ===== 02_事務所案内: ②MVV（OUR MISSION / OUR VISION） ===== */
.p-mvv{padding-block:var(--sp-hero);background:var(--c-card-alt)}
.p-mvv__list{display:flex;flex-direction:column;gap:var(--sp-card);margin:0;padding:0;list-style:none}
.c-mvv-row{display:flex;align-items:center;gap:var(--sp-card)}
.c-mvv-row--reverse{flex-direction:row-reverse}
.c-mvv-row__body{flex:1 1 auto}
.c-mvv-row__media{flex:0 0 57%;aspect-ratio:610/301;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 8px 20px rgba(var(--c-shadow-rgb),.07)}
.c-mvv-row__media img{width:100%;height:100%;object-fit:cover;display:block}
.c-mvv-row__en{margin:0 0 8px;font-family:"Poppins",sans-serif;font-weight:700;font-size:14px;letter-spacing:.1em;color:var(--c-teal-dark)}
.c-mvv-row__title{margin:0 0 16px;font-size:26px;color:var(--c-heading)}
.c-mvv-row__text{margin:0;font-size:15px;line-height:1.95;color:var(--c-body)}

/* ===== 02_事務所案内: ③OUR VALUES（4カラム・番号バッジ） ===== */
.p-values{padding-block:var(--sp-hero);background:var(--c-card-alt)}
.p-values__head{text-align:center;margin-bottom:var(--sp-card)}
.p-values__title{margin:8px 0 10px;font-size:28px;color:var(--c-heading)}
.p-values__sub{margin:0;font-size:14px;color:var(--c-sub)}
.p-values__list{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-gap);margin:0;padding:0;list-style:none}
.c-value-card{flex:0 0 calc((100% - var(--sp-gap) * 3) / 4);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:16px;background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-md);text-align:center}
.c-value-card__icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;color:var(--c-teal-dark)}
.c-value-card__icon svg{width:44px;height:44px}
.c-value-card__num{display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin-bottom:2px;border-radius:var(--r-pill);background:var(--c-primary-dark);font-family:"Poppins",sans-serif;font-weight:700;font-size:13px;line-height:1;color:#fff}
.c-value-card__title{margin:0;font-size:16px;color:var(--c-heading)}
.c-value-card__en{margin:0 0 4px;font-family:"Poppins",sans-serif;font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--c-teal-dark)}
.c-value-card__text{margin:0;font-size:12px;line-height:1.6;color:var(--c-body)}

/* ===== 02_事務所案内: ④プロフィール ／ ⑤事務所概要・アクセス ===== */
.p-profile{padding-block:var(--sp-hero)}
.p-overview{padding-block:var(--sp-hero);background:var(--c-card-alt)}
.p-profile__head,.p-overview__head{text-align:center;margin-bottom:var(--sp-card)}
.p-profile__title,.p-overview__title{margin:8px 0 0;font-size:28px;color:var(--c-heading)}

/* --- ⑤事務所概要とアクセスの統合（2026-08-04） -----------------------------
   旧「⑤事務所概要」と旧「⑥アクセス」を1セクションに畳んだぶんだけの追加。
   .p-access__* の定義には**一切触っていない**（TOP ⑫ が同じ部品を使っているため、
   触ると2ページ同時に壊れる）。ここは追加した左右2カラムの器だけ。

   ■ 列幅が 518px になるのは偶然ではない
     .container の中身は 1080px（--w-container − --sp-page-wide×2）。
     (1080 − 44) ÷ 2 = 518 で、motion.css §4 が Googleマップに与えている
     518×440 の設計値とちょうど一致する。gap を触るとここがズレる。

   ■ .p-access__map の aspect-ratio を殺している理由
     motion.css §4 は「Googleマップ(518×440)と駐車場マップ(1080×440)の高さを
     440px に揃える」ために .p-access__map へ aspect-ratio:518/440 を当てている。
     これはTOPの都合（2枚の地図が縦に並ぶ）。
     こちらは左に8項目の定義リストが来て約570pxになるため、地図だけ440pxだと
     右下に130pxの空白が残る。grid の stretch に任せてリストと同じ高さまで伸ばす。
     セレクタを2段（0,2,0）にしてあるので motion.css の1段（0,1,0）に必ず勝つ
     ＝将来CSSの読み込み順が変わっても壊れない。
     1024px以下は1カラムに落ちて「隣に高さを揃える相手」がいなくなるので、
     元の比率に戻す（767px以下は style.css 既定の 4/3 に合わせる）。

   ■ .c-deflist の max-width:820px を外す理由
     1カラムに落ちたとき、リストだけ820pxで中央寄せ・地図は器いっぱいになり、
     左端が揃わずガタつく。器の幅に任せる。 */
.p-overview__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-card);align-items:stretch;margin-bottom:var(--sp-card)}
.p-overview__body{min-width:0}
.p-overview__grid .c-deflist{max-width:none}
.p-overview__grid .p-access__map{aspect-ratio:auto;min-height:440px}

@media (max-width:1024px){
  .p-overview__grid{grid-template-columns:1fr}
  .p-overview__grid .p-access__map{aspect-ratio:518/440;min-height:0}
}
@media (max-width:767px){
  .p-overview__grid .p-access__map{aspect-ratio:4/3}
}

@media (max-width:1024px){
  .p-page-kv__media{inset:0 0 0 50%}
  .p-greeting__row{flex-direction:column;align-items:stretch;max-width:640px}
  .p-greeting__media{flex-basis:auto;max-width:320px}
  .c-mvv-row,.c-mvv-row--reverse{flex-direction:column;gap:var(--sp-card)}
  .c-mvv-row__media{width:100%}
  .c-value-card{flex-basis:calc((100% - var(--sp-gap)) / 2)}
}
@media (max-width:767px){
  .p-page-kv__media::after{background:linear-gradient(90deg,var(--c-primary-dark) 0%,rgba(var(--c-primary-dark-rgb),.7) 100%)}
  .c-value-card{flex-basis:100%}
  .c-deflist__row{flex-direction:column;gap:6px}
  .c-deflist dt{width:auto}
  .p-greeting__lead{font-size:18px}
  .p-page-kv__title{font-size:24px}
}

/* ===== 04_料金案内 ===== Figma ★04_料金案内(node 267:998)準拠。トークン使用・BEM・!important不使用 */
/* 共通: チェック付きリスト（--plan-c で色替え、既定ティール。マスクSVG＝フォント非依存） */
.c-check-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.c-check-list__item{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.7;color:var(--c-body)}
.c-check-list__item::before{content:"";flex:0 0 auto;width:17px;height:17px;margin-top:2px;background:var(--plan-c,var(--c-teal-dark));-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat}

/* ①料金の考え方（eyebrow無し・中央） */
.p-price-intro{padding-block:var(--sp-hero) var(--sp-card)}
.p-price-intro__title{margin:0 auto 14px;max-width:820px;text-align:center;font-size:26px;line-height:1.5;color:var(--c-heading)}
.p-price-intro__text{max-width:760px;margin:0 auto;text-align:center;font-size:14px;line-height:1.9;color:var(--c-sub)}

/* ②3プラン（プラン別カラー・ボタン無し・▶対象） */
.p-plans{padding-block:0 var(--sp-hero)}
.p-plans__list{display:flex;gap:var(--sp-gap);align-items:stretch;max-width:1106px;margin:0 auto;padding:0;list-style:none}
.c-plan{flex:1 1 0;display:flex;flex-direction:column;padding:0 0 26px;background:var(--c-card);border:1px solid var(--c-border);border-top:3px solid var(--plan-c,var(--c-primary));border-radius:var(--r-lg);overflow:hidden;scroll-margin-top:96px}
.c-plan--light{--plan-c:var(--c-teal-dark)}
.c-plan--active{--plan-c:var(--c-primary-dark)}
.c-plan--consult{--plan-c:var(--c-navy)}
.c-plan__head{padding:26px 24px 18px;text-align:center}
.c-plan__name{margin:0 0 6px;font-size:20px;color:var(--plan-c,var(--c-primary-dark))}
.c-plan__tag{margin:0;font-size:12px;font-weight:700;color:var(--c-sub)}
.c-plan__features{margin:0 24px 18px;padding-bottom:18px;border-bottom:1px solid var(--c-border)}
.c-plan__targets{margin:0 24px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.c-plan__targets li{position:relative;padding-left:18px;font-size:13px;line-height:1.6;color:var(--c-sub)}
.c-plan__targets li::before{content:"\25B6";position:absolute;left:0;top:2px;font-size:9px;color:var(--plan-c,var(--c-primary))}

/* ③月次確認サポート／毎月面談 */
.p-support{padding-block:var(--sp-hero);background:var(--c-card-alt)}
.p-support__lead{max-width:900px;margin:0 auto var(--sp-card);text-align:center;font-size:14px;line-height:1.8;color:var(--c-body)}
.p-support__list{display:flex;gap:var(--sp-gap);max-width:1092px;margin-inline:auto;padding:0;list-style:none;align-items:stretch}
.c-support-card{flex:1 1 0;display:flex;flex-direction:column;padding:var(--sp-card);background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-lg)}
.c-support-card--accent{background:var(--c-panel);border-color:var(--c-teal)}
.c-support-card__title{margin:0 0 4px;font-size:18px;color:var(--c-heading)}
.c-support-card__sub{margin:0 0 18px;font-size:12px;font-weight:700;color:var(--c-teal-dark)}

/* ④⑤顧問料テーブル（2カラム横並び・青ヘッダ / ユーザー指定で★の縦積みから変更） */
.p-fee{padding-block:var(--sp-hero)}
.p-fee__grid{display:flex;gap:var(--sp-gap);align-items:flex-start}
.p-fee__col{flex:1 1 0;min-width:0}
.c-price-table{width:100%;border-collapse:collapse;background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-md);overflow:hidden}
.c-price-table__caption{caption-side:top;margin-bottom:14px;font-size:18px;font-weight:700;color:var(--c-heading);text-align:center}
.c-price-table thead th{padding:13px 24px;font-size:13px;font-weight:700;color:#fff;background:var(--c-primary-dark);text-align:left}
.c-price-table thead th:last-child{text-align:right}
.c-price-table tbody tr{border-top:1px solid var(--c-border)}
.c-price-table tbody th{padding:15px 24px;font-size:14px;font-weight:500;color:var(--c-body);text-align:left;background:var(--c-card)}
.c-price-table tbody td{padding:15px 24px;font-size:15px;font-weight:700;color:var(--c-heading);text-align:right;white-space:nowrap}

/* --- 2026-08-01 黒岩先生の赤入れ（PDF p.9＝赤10P）で新設した2クラス ---
   .p-fee__title … 表の上に赤で大書きされた「ライトプラン」の指示。
                   この顧問料表がライトプランの料金であることを明示する h2。
                   文字サイズは 26px(.p-price-intro__title) と
                   18px(.c-price-table__caption) の中間＝22px にして、
                   「ページ見出し > セクション見出し > 表見出し」の3階層を作る。
   .p-fee__note  … 各表の直下の「※別途 決算報酬（個人）／計算報酬（法人）」。
                   表の左端に揃えたいので左寄せ。中央寄せにすると
                   直上の表ではなくセクション全体への注記に見えてしまう。 */
.p-fee__title{max-width:820px;margin:0 auto var(--sp-card);font-size:22px;line-height:1.5;color:var(--c-heading);text-align:center}
.p-fee__note{margin:10px 0 0;font-size:13px;line-height:1.8;color:var(--c-sub)}

/* ⑤-2 オプション（2026-08-01 赤入れで新設。Figma ★04 には無いセクション）
   ------------------------------------------------------------
   ■ なぜ箇条書きではなくタイルにしたか
     先生の赤入れには項目名8つだけがあり、料金の記載が無い（＝未確定）。
     CLAUDE.md §7 に従って金額は推測補完しないので、このセクションは
     いま「項目名だけ」しか持てない。素の <ul> にすると情報の薄さが
     そのまま貧相さに出るため、粒の揃ったタイルにして
     「取り扱いメニューの一覧」として成立させている。
   ■ 金額が確定したら
     ⑥その他の料金と同じ c-fee-list（項目｜料金の2列表）に切り替える。
     そのとき .p-option__list / __item は不要になる。
   ■ 上辺のラインを --c-teal-dark にしている理由
     .c-plan--light と同じ色。オプションはライトプランを起点に
     積み増していくものなので、色でその関係を示している。 */
.p-option{padding-block:0 var(--sp-hero)}
.p-option__title{margin:0 auto var(--sp-card);font-size:22px;line-height:1.5;color:var(--c-heading);text-align:center}
.p-option__list{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-gap);max-width:1092px;margin:0 auto;padding:0;list-style:none}
.p-option__item{display:flex;align-items:center;justify-content:center;min-height:64px;padding:14px 16px;font-size:14px;font-weight:700;line-height:1.6;color:var(--c-heading);text-align:center;background:var(--c-card);border:1px solid var(--c-border);border-top:3px solid var(--c-teal-dark);border-radius:var(--r-md)}
.p-option__note{max-width:1092px;margin:var(--sp-gap) auto 0;font-size:13px;line-height:1.9;color:var(--c-sub);text-align:center}

/* ⑥その他の料金（青ヘッダ無しの素の項目｜料金） */
.p-other-fee{padding-block:0 var(--sp-hero)}
.c-fee-list{width:100%;border-collapse:collapse;max-width:1092px;margin-inline:auto}
.c-fee-list__caption{caption-side:top;margin-bottom:14px;font-size:18px;font-weight:700;color:var(--c-heading);text-align:center}
.c-fee-list tbody tr{border-bottom:1px solid var(--c-border)}
.c-fee-list tbody tr:first-child{border-top:1px solid var(--c-border)}
.c-fee-list th{padding:15px 8px;font-size:14px;font-weight:700;color:var(--c-heading);text-align:left}
.c-fee-list td{padding:15px 8px;font-size:14px;color:var(--c-body);text-align:right}

/* ⑦ご注意事項（素の箇条書き・アンバーボックスにしない） */
.p-price-notes{padding-block:0 var(--sp-hero)}
.p-price-notes__list{max-width:900px;margin:0 auto;padding:20px 24px;list-style:none;background:var(--c-card-alt);border:1px solid var(--c-border);border-radius:var(--r-md)}
.p-price-notes__list li{position:relative;padding-left:18px;font-size:13px;line-height:1.9;color:var(--c-sub)}
.p-price-notes__list li::before{content:"\30FB";position:absolute;left:0;top:0;color:var(--c-muted)}

/* 04 レスポンシブ */
@media (max-width:1024px){
  .p-plans__list{flex-wrap:wrap}
  .c-plan{flex-basis:calc((100% - var(--sp-gap)) / 2)}
  /* オプション8項目：4列 → 2列（タブレット幅で4列だと1枚約155pxになり、
     「事業計画・資金計画作成」が3行に折り返してタイルの高さが揃わない） */
  .p-option__list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .p-plans__list,.p-support__list,.p-fee__grid{flex-direction:column}
  .c-plan{flex-basis:auto}
  .c-price-table thead th,.c-price-table tbody th,.c-price-table tbody td{padding-inline:16px}
  /* 縦積みになると「個人事業主」表の note と「法人」表の caption が
     --sp-gap(20px) しか離れず、note がどちらの表のものか読めなくなる。 */
  .p-fee__grid{gap:var(--sp-card)}
  /* オプションはSPでも2列を維持する。1列にすると8項目で縦に約600px伸び、
     ⑥その他の料金まで到達しなくなる。最長の「事業計画・資金計画作成」も
     375px幅の2列（1枚約155px）で2行に収まることを確認済み。 */
  .p-option__list{gap:12px}
  .p-option__item{min-height:56px;padding:12px;font-size:13px}
}

/* ===== 05_初めての方へ ===== Figma ★05(node 275:4)準拠。お悩み/①〜③はTOP・04部品を流用 */
/* Flow: 説明付き（TOP c-flow-step に __desc を追加。TOP側は desc 無しのため無影響） */
.c-flow-step__desc{margin:8px 0 0;max-width:230px;font-size:12.5px;line-height:1.7;color:var(--c-sub);text-align:center}
/* FAQ */
.p-faq{padding-block:var(--sp-hero);background:var(--c-card-alt)}
.p-faq__head{margin-bottom:var(--sp-card);text-align:center}
.p-faq__title{margin:8px 0 0;font-size:28px;color:var(--c-heading)}
.p-faq__list{max-width:900px;margin:0 auto;padding:0;list-style:none}
.c-faq{padding:22px 4px;border-top:1px solid var(--c-border)}
.c-faq:first-child{border-top:0}
.c-faq__q{display:flex;gap:10px;margin:0 0 10px;font-size:15px;font-weight:700;color:var(--c-heading)}
.c-faq__a{display:flex;gap:10px;margin:0;font-size:13.5px;line-height:1.85;color:var(--c-body)}
.c-faq__mark{flex:0 0 auto;font-family:"Poppins",sans-serif;font-weight:700}
.c-faq__q .c-faq__mark{color:var(--c-primary-dark)}
.c-faq__a .c-faq__mark{color:var(--c-teal-dark)}
@media (max-width:767px){
  .c-flow-step__desc{max-width:none}
}

/* 段差防止: パンくずは直下セクションの背景に合わせる（お悩み=card-alt が直下の /first/ 等で段差を消す。他ページは直下が page-bg のため無影響） */
.c-breadcrumb:has(+ .p-issues){background:var(--c-card-alt)}

/* ===== 06_採用情報 ===== Figma ★06(node 275:644)準拠。代表/MVV/VALUES11は02の共通クラス流用 */
/* ダーク背景用アウトラインボタン */
.btn--outline-white{border:2px solid rgba(255,255,255,.85);color:#fff}
.btn--outline-white:hover{text-decoration:none;background:rgba(255,255,255,.12)}
/* 素材待ちプレースホルダの補助 */
.c-placeholder--band{height:280px;margin:0;border-radius:0}
.c-note-pending{font-size:12px;color:var(--c-muted)}

/* ①Hero（★: 写真フルブリード・左テキスト/右人物・透過ヘッダーが写真の上に重なる） */
.p-recruit-hero{position:relative;display:flex;align-items:center;width:100%;aspect-ratio:2560/1400;min-height:480px;color:#fff;overflow:hidden;background:url(assets/img/recruit-hero.jpg) center/cover no-repeat}
.p-recruit-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(var(--c-scrim-recruit-rgb),.46) 0%,rgba(var(--c-scrim-recruit-rgb),.24) 34%,rgba(var(--c-scrim-recruit-rgb),0) 58%)}
.p-recruit-hero__inner{position:relative;z-index:1;text-align:left;max-width:none;margin:0;padding:110px 32px 110px clamp(24px,6vw,110px)}
.p-recruit-hero__en{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.p-recruit-hero__title{margin:14px 0 0;font-size:clamp(36px,4.9vw,70px);line-height:1.3;letter-spacing:.03em;font-weight:700;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.44)}
.p-recruit-hero__catch{margin:18px 0 0;font-family:"Poppins",sans-serif;font-style:italic;font-weight:300;font-size:16px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.p-recruit-hero__lead{margin:20px 0 0;max-width:440px;font-size:15px;line-height:1.9;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.p-recruit-hero__actions{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:16px;margin-top:34px}

/* 06: 透過ヘッダー（写真FV上）→スクロールで白背景。page-recruit 限定・他ページは既定の白stickyのまま */
.l-header__logo-mark--white,.l-header__logo-type--white{display:none}
body.is-recruit-hero .l-header{position:fixed;left:0;right:0;top:0;background:transparent;border-bottom-color:transparent;box-shadow:none;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
body.is-recruit-hero .l-header:not(.is-scrolled) .l-header__logo-mark,
body.is-recruit-hero .l-header:not(.is-scrolled) .l-header__logo-type{display:none}
body.is-recruit-hero .l-header:not(.is-scrolled) .l-header__logo-mark--white,
body.is-recruit-hero .l-header:not(.is-scrolled) .l-header__logo-type--white{display:inline-block}
body.is-recruit-hero .l-header:not(.is-scrolled) .c-gnav__label,
body.is-recruit-hero .l-header:not(.is-scrolled) .c-gnav__sub,
body.is-recruit-hero .l-header:not(.is-scrolled) .c-tel,
body.is-recruit-hero .l-header:not(.is-scrolled) .c-tel__number{color:#fff}
body.is-recruit-hero .l-header:not(.is-scrolled) .c-gnav__link[aria-current="page"]::after{background:#fff}
body.is-recruit-hero .l-header:not(.is-scrolled) .c-hamburger__line{background:#fff}
body.is-recruit-hero .l-header.is-scrolled{background:#fff;border-bottom-color:var(--c-border);box-shadow:0 2px 12px rgba(22,24,29,.06)}

/* ⑤写真帯（TOP p-access__banner と同じ: 青地に画像 opacity.30 の青透過パララックス） */
.p-recruit-band{position:relative;overflow:hidden;height:340px;background:var(--c-primary-dark)}
.p-recruit-band::before{content:"";position:absolute;inset:0;background-image:url(assets/img/recruit-band.jpg);background-size:cover;background-position:center;background-attachment:fixed;opacity:.30}

/* ⑥WHY US（★: ジグザグ階段配置＋写真カード） */
.p-whyus{padding-block:var(--sp-hero);background:var(--c-card-alt)}
.p-whyus__head{text-align:center;margin-bottom:var(--sp-card)}
.p-whyus__title{margin:8px 0 0;font-size:28px;color:var(--c-heading)}
.p-whyus__stage{position:relative;max-width:944px;height:800px;margin:0 auto}
.c-whyus-card{position:absolute;width:260px}
.c-whyus-card--01{left:0;top:0}
.c-whyus-card--02{left:342px;top:60px}
.c-whyus-card--03{left:684px;top:120px}
.c-whyus-card--04{left:171px;top:428px}
.c-whyus-card--05{left:513px;top:488px}
.c-whyus-card__media{aspect-ratio:260/180;border-radius:var(--r-md);overflow:hidden;box-shadow:0 8px 20px rgba(var(--c-shadow-rgb),.08)}
.c-whyus-card__media img{width:100%;height:100%;object-fit:cover}
.c-whyus-card__meta{display:flex;align-items:center;gap:10px;margin:16px 0 0}
.c-whyus-card__num{font-family:"Poppins",sans-serif;font-style:italic;font-weight:700;font-size:32px;line-height:1;color:var(--c-teal);opacity:.5}
.c-whyus-card__en{font-family:"Poppins",sans-serif;font-weight:700;font-size:11px;letter-spacing:.08em;color:var(--c-teal-dark)}
.c-whyus-card__line{flex:0 0 30px;height:3px;background:var(--c-teal)}
.c-whyus-card__title{margin:8px 0 6px;font-size:16px;color:var(--c-heading)}
.c-whyus-card__text{margin:0;font-size:13px;line-height:1.75;color:var(--c-body)}

/* ⑦仕事内容（JOB DESCRIPTION＋キャリアパス） */
.p-jobdesc{padding-block:var(--sp-hero);background:var(--c-teal)}
.p-jobdesc__top{display:flex;align-items:center;gap:clamp(28px,5vw,72px);margin-bottom:64px}
.p-jobdesc__head{flex:0 0 auto;text-align:center;margin:0}
.p-jobdesc__head .eyebrow{color:#fff}
.p-jobdesc__title{margin:6px 0 0;font-size:32px;color:#fff}
.p-jobdesc__duties{flex:1 1 auto}
.p-jobdesc__intro{margin:0 0 18px;font-size:15px;font-weight:700;color:#fff}
.p-jobdesc__list{display:grid;grid-template-columns:1fr 1fr;gap:14px 36px}
.p-jobdesc__list .c-check-list__item{color:#fff}
.p-jobdesc__list .c-check-list__item::before{background:#fff}
.p-jobdesc__list .c-check-list__item:last-child{grid-column:1/-1}
.p-jobdesc__path-wrap{position:relative;width:min(1050px,100%);height:430px;margin:0 auto}
.p-jobdesc__connector{position:absolute;left:0;top:28px;width:75.7%;height:auto;z-index:0;pointer-events:none}
.p-jobdesc__path{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.c-path-step{position:absolute;width:22.857%;display:flex;flex-direction:column;padding:20px;background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-lg);box-shadow:0 16px 34px rgba(var(--c-shadow-path-rgb),.18);z-index:1}
.c-path-step--01{left:0;top:180px}
.c-path-step--02{left:25.714%;top:120px}
.c-path-step--03{left:51.428%;top:60px}
.c-path-step--04{left:77.143%;top:0}
.c-path-step__head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px}
.c-path-step__accent{flex:0 0 30px;height:6px;margin-top:16px;border-radius:2px;background:var(--c-teal)}
.c-path-step__no{display:flex;align-items:baseline;gap:6px;font-family:"Poppins",sans-serif;font-style:italic;color:var(--c-teal)}
.c-path-step__step{font-weight:400;font-size:13px}
.c-path-step__num{font-weight:700;font-size:42px;line-height:1;opacity:.38}
.c-path-step__title{margin:0 0 8px;font-size:15px;color:var(--c-heading)}
.c-path-step__text{margin:0;font-size:13px;line-height:1.75;color:var(--c-body)}

/* ⑧WELCOME（★: 背景に薄いオフィス写真＋塗り円） */
.p-welcome{position:relative;padding-block:130px;background:linear-gradient(180deg,rgba(var(--c-scrim-welcome-rgb),.72) 0%,rgba(var(--c-scrim-welcome-rgb),0) 30%),linear-gradient(rgba(var(--c-teal-rgb),.66),rgba(var(--c-teal-rgb),.66)),url(assets/img/recruit-welcome.jpg) center/cover no-repeat}
.p-welcome__head{text-align:center;margin-bottom:var(--sp-card)}
.p-welcome__head .eyebrow{color:#fff}
.p-welcome__title{margin:8px 0 0;font-size:26px;color:#fff}
.p-welcome__list{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,2.5vw,30px);margin:0;padding:0;list-style:none}
.c-welcome-item{flex:0 0 auto}
.c-welcome-item__circle{display:flex;align-items:center;justify-content:center;width:160px;height:160px;padding:16px;border-radius:var(--r-pill);background:rgba(255,255,255,.94);text-align:center}
.c-welcome-item__text{margin:0;font-size:13px;font-weight:500;line-height:1.6;color:var(--c-teal)}
.p-welcome__note{margin:var(--sp-card) 0 0;text-align:center}

/* ⑨職場環境 ⑩募集要項 ⑪応募資格 見出し */
.p-workenv{padding-block:var(--sp-hero)}
.p-require{padding-block:var(--sp-hero);background:var(--c-card-alt)}
.p-qualify{padding-block:var(--sp-hero)}
.p-workenv__head,.p-require__head,.p-qualify__head{text-align:center;margin-bottom:var(--sp-card)}
.p-workenv__title,.p-require__title,.p-qualify__title{margin:8px 0 0;font-size:28px;color:var(--c-heading)}

/* ⑪応募資格カード */
.p-qualify__list{display:flex;gap:var(--sp-gap);max-width:1000px;margin-inline:auto;padding:0;list-style:none;align-items:stretch}
.c-qualify-card{flex:1 1 0;display:flex;flex-direction:column;gap:12px;padding:28px;background:var(--c-panel);border-radius:var(--r-md)}
.c-qualify-card__title{margin:0;font-size:16px;color:var(--c-heading)}
.c-qualify-card__items{margin:0}
.c-qualify-card__items .c-check-list__item{font-size:13px}
.c-qualify-card__items .c-check-list__item::before{background:var(--c-teal)}
.c-qualify-card__note{margin:0;font-size:12px;line-height:1.75;color:var(--c-teal-dark)}
.c-qualify-card:nth-child(2){background:rgba(var(--c-accent-ice-rgb),.42)}
.c-qualify-card:nth-child(2) .c-qualify-card__note{color:var(--c-body)}

/* ⑫選考の流れ（5ステップ・アイコン無し。線を5等分に合わせる） */
.p-flow--select .p-flow__list::before{left:10%;right:10%}
.p-flow--select .c-flow-step__circle{background:var(--c-primary)}
.p-flow--select .c-flow-step--final .c-flow-step__circle{background:var(--c-teal)}

/* ⑭採用CTA（グラデ） */
.p-recruit-cta{padding-block:var(--sp-hero);text-align:center;color:#fff;background:var(--grad-cta)}
.p-recruit-cta__en{color:#fff}
.p-recruit-cta__title{margin:12px 0 0;font-size:28px;color:#fff}
.p-recruit-cta__text{margin:14px 0 0;font-size:14px;line-height:1.8;color:rgba(255,255,255,.9)}
.p-recruit-cta__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin-top:28px}

/* ②代表メッセージ：02流用クラスの06上書き（写真を大きく＋小見出しに装飾線＝★06 Vector43） */
body.is-recruit-hero .p-greeting__media{flex-basis:440px}
body.is-recruit-hero .p-greeting__lead{position:relative;padding-bottom:18px;margin-bottom:24px}
body.is-recruit-hero .p-greeting__lead::after{content:"";position:absolute;bottom:0;left:0;width:40px;height:3px;background:var(--c-primary)}

/* 06 レスポンシブ */
@media (max-width:1024px){
  .p-whyus__stage{max-width:600px;height:auto;display:flex;flex-direction:column;gap:var(--sp-card)}
  .c-whyus-card{position:static;left:auto;top:auto;width:100%}
  .p-qualify__list{flex-wrap:wrap}
  .p-jobdesc__top{flex-direction:column;align-items:stretch;gap:28px}
  .p-jobdesc__path-wrap{width:100%;height:auto}
  .p-jobdesc__connector{display:none}
  .p-jobdesc__path{position:static}
  .p-jobdesc__path .c-path-step{position:static;width:100%;max-width:400px;left:auto;top:auto;margin:0 auto 16px}
}
@media (max-width:767px){
  .p-recruit-hero{aspect-ratio:auto;min-height:76vh;max-height:none}
  .p-recruit-hero::before{background:linear-gradient(180deg,rgba(var(--c-scrim-recruit-rgb),.42) 0%,rgba(var(--c-scrim-recruit-rgb),.26) 46%,rgba(var(--c-scrim-recruit-rgb),.4) 100%)}
  .p-recruit-hero__inner{padding:104px 24px 40px;max-width:none}
  .p-recruit-hero__title{font-size:30px}
  .c-qualify-card{flex-basis:100%}
  .p-jobdesc__list{grid-template-columns:1fr}
  .p-recruit-band{height:220px}
  .p-recruit-band::before{background-attachment:scroll}
}

/* ===== 07_お知らせ ===== WF v9 PAGE07（Google Drive 正本PDF）準拠。一覧の行は TOP ⑬ の c-news-row を流用 */
/* 一覧（archive-news.php） */
/* 一覧はセクション見出しを持たない（WFに指定なし）ため、上余白のみ --sp-page に詰める。
   下余白と個別記事側は他下層ページと同じ --sp-hero を維持＝house標準から外れない */
.p-news-archive{padding-block:var(--sp-page) var(--sp-hero)}
.p-news-archive__list{max-width:820px;margin:0 auto;padding:0;list-style:none}
.p-news-archive__empty{max-width:820px;margin:0 auto;padding:40px 0;text-align:center;font-size:14px;color:var(--c-sub)}
/* 一覧側のみ行を広く・上辺を閉じる（TOP ⑬ の c-news-row 本体は変更しない＝スコープ限定） */
.p-news-archive__list .c-news-row{padding:20px 0}
.p-news-archive__list .c-news-row:first-child{border-top:1px solid var(--c-border)}
.p-news-archive__list .c-news-row__title{font-size:15px}

/* カテゴリ絞り込み（2026-07-27 決裁「お知らせ/コラム統合＋カテゴリ分け」）。
   現在地の見た目は c-pagination の .current と意図的に揃える（同じ「今ここ」の意味に別の記号を作らない）。
   現在地は <span>＋aria-current で出力するため、a: 疑似クラスはリンク側だけに当てる。 */
.c-news-filter{max-width:820px;margin:0 auto 28px}
.c-news-filter__list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.c-news-filter__item{display:flex}
.c-news-filter__link{display:flex;align-items:center;height:34px;padding:0 16px;border:1px solid var(--c-border);border-radius:var(--r-pill);background:var(--c-card);font-size:13px;line-height:1;color:var(--c-sub)}
a.c-news-filter__link:hover{border-color:var(--c-primary);color:var(--c-primary-dark);text-decoration:none}
.c-news-filter__link--current{border-color:var(--c-primary-dark);background:var(--c-primary-dark);color:#fff;font-weight:700}

/* 行のカテゴリラベル（一覧＋個別記事ヘッダで共用）。
   c-chip を流用しなかった理由: c-chip は --c-teal-dark / --c-panel で約3.4:1＝AA未達
   （CLAUDE.md §3「chip 文字コントラスト注意」）。ここは --c-sub / --c-card-alt で約5.4:1。
   hover の --c-primary-dark / --c-panel も約4.7:1で AA を満たす。 */
.c-news-row__cat{flex:0 0 auto;padding:3px 10px;border-radius:var(--r-pill);background:var(--c-card-alt);font-size:12px;line-height:1.4;color:var(--c-sub)}
a.c-news-row__cat:hover{background:var(--c-panel);color:var(--c-primary-dark);text-decoration:none}

/* ページネーション（WF「1 2 3 次へ →」）。BEMラッパー＋WPコアの .page-numbers を併用するため
   ここだけ命名が混在する。現在ページは aria-current(コア出力)＋塗り＋太字で、色のみに依存しない */
.c-pagination{margin-top:var(--sp-card)}
.c-pagination__list{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.c-pagination__item{display:flex}
.c-pagination .page-numbers{display:flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border:1px solid var(--c-border);border-radius:var(--r-btn);background:var(--c-card);font-family:"Poppins",sans-serif;font-size:13px;line-height:1;color:var(--c-sub)}
.c-pagination a.page-numbers:hover{border-color:var(--c-primary);color:var(--c-primary-dark);text-decoration:none}
.c-pagination .page-numbers.current{border-color:var(--c-primary-dark);background:var(--c-primary-dark);color:#fff;font-weight:700}
.c-pagination .page-numbers.dots{border-color:transparent;background:none;color:var(--c-muted)}
.c-pagination .prev.page-numbers,.c-pagination .next.page-numbers{gap:.4em;font-family:"Noto Sans JP",sans-serif;font-weight:700;color:var(--c-primary-dark)}

/* 個別記事（single-news.php） */
.p-news-single{padding-block:var(--sp-hero)}
.p-news-single__inner{max-width:820px;margin:0 auto}
.p-news-single__head{padding-bottom:20px;margin-bottom:28px;border-bottom:1px solid var(--c-border)}
/* 日付＋カテゴリの1行。カテゴリが無い記事では時刻だけが残る（空要素は出力しない） */
.p-news-single__meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0}
.p-news-single__date{display:block;font-family:"Poppins",sans-serif;font-size:13px;color:var(--c-sub)}
.p-news-single__title{margin:10px 0 0;font-size:26px;line-height:1.5}
.p-news-single__thumb{margin:0 0 32px}
.p-news-single__thumb img{width:100%;border-radius:var(--r-md)}
/* 個別記事のKV見出しは h1 を記事タイトルへ譲り <p> になるため、太さのみ補う */
.p-page-kv__title--plain{font-weight:700}

/* 記事本文（ブロックエディタ出力＝WF「WordPress標準のブロックエディタで編集可能」） */
.c-post-body{font-size:15px;line-height:1.9;color:var(--c-body)}
.c-post-body>*:first-child{margin-top:0}
.c-post-body p{margin:0 0 1.6em}
.c-post-body h2{margin:2.2em 0 .8em;padding-left:14px;border-left:4px solid var(--c-primary);font-size:21px;line-height:1.5}
.c-post-body h3{margin:2em 0 .7em;font-size:17px}
.c-post-body h4{margin:1.8em 0 .6em;font-size:15px}
.c-post-body a{text-decoration:underline}
.c-post-body a:hover{color:var(--c-teal-dark)}
.c-post-body ul,.c-post-body ol{margin:0 0 1.6em;padding-left:1.6em}
.c-post-body li{margin-bottom:.5em}
.c-post-body img{border-radius:var(--r-sm)}
.c-post-body figure,.c-post-body .wp-block-image{margin:0 0 1.6em}
.c-post-body figcaption{margin-top:8px;font-size:12.5px;color:var(--c-sub);text-align:center}
.c-post-body blockquote{margin:0 0 1.6em;padding:18px 22px;background:var(--c-card-alt);border-left:4px solid var(--c-border);border-radius:0 var(--r-sm) var(--r-sm) 0}
.c-post-body blockquote p:last-child{margin-bottom:0}
.c-post-body table{width:100%;margin:0 0 1.6em;border-collapse:collapse;font-size:14px}
.c-post-body th,.c-post-body td{padding:12px 14px;border:1px solid var(--c-border);text-align:left;vertical-align:top}
.c-post-body th{background:var(--c-card-alt);color:var(--c-heading);font-weight:700}
.c-post-body hr{margin:2.4em 0;border:0;border-top:1px solid var(--c-border)}
.c-post-body strong{font-weight:700;color:var(--c-heading)}

/* 記事送り（WF「← 前の記事  次の記事 →  一覧へ戻る」の並び順を踏襲） */
.c-post-nav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;max-width:820px;margin:var(--sp-card) auto 0;padding-top:24px;border-top:1px solid var(--c-border)}
.c-post-nav__adjacent{display:flex;flex-wrap:wrap;gap:24px}
.c-post-nav__link{display:inline-flex;align-items:center;gap:.4em;font-size:14px;font-weight:700;color:var(--c-primary-dark)}
.c-post-nav__link:hover{color:var(--c-teal-dark)}
.c-post-nav__arrow{font-family:"Poppins",sans-serif}
.c-post-nav__back{flex:0 0 auto}

/* 07 レスポンシブ（一覧行の変更は .p-news-archive__list 配下に限定＝TOP ⑬ に影響させない） */
@media (max-width:767px){
  /* 日付＋カテゴリは横に残し、タイトルだけ次の行へ落とす（column にすると3行になって行が間延びする） */
  .p-news-archive__list .c-news-row{flex-wrap:wrap;align-items:center;gap:4px 12px}
  .p-news-archive__list .c-news-row__title{flex:0 0 100%}
  .p-news-single__title{font-size:22px}
  .c-post-body h2{font-size:19px}
  .c-post-nav{flex-direction:column;align-items:stretch}
  .c-post-nav__adjacent{justify-content:space-between;gap:16px}
  .c-post-nav__back{align-self:center}
}

/* ===== 09_プライバシーポリシー ===== WF v9 PAGE09（Google Drive 正本PDF）準拠。目次アンカー＋条文14条（CLAUDE.md §6-6）
   下層共通部品（p-page-kv / c-breadcrumb / c-deflist / c-note-pending）を流用し、09固有は p-privacy 系のみ定義 */
.p-privacy{padding-block:var(--sp-page) var(--sp-hero)}
/* 目次カード。番号は文字（第1条）で持たせ、色のみに依存させない（CLAUDE.md §2 a11y） */
.p-privacy__toc{max-width:900px;margin:0 auto var(--sp-page);padding:var(--sp-card) 40px;background:var(--c-card-alt);border:1px solid var(--c-border);border-radius:var(--r-md)}
.p-privacy__toc-title{margin:0 0 20px;font-size:18px;font-weight:700;color:var(--c-heading);text-align:center}
.p-privacy__toc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 32px;margin:0;padding:0;list-style:none}
.p-privacy__toc-link{display:flex;gap:10px;align-items:baseline;font-size:14px;line-height:1.7}
.p-privacy__toc-link:hover{color:var(--c-teal-dark)}
.p-privacy__toc-no{flex:0 0 auto;min-width:3.8em;font-weight:700}
.p-privacy__toc-label{flex:1 1 auto;color:var(--c-body)}
.p-privacy__toc-link:hover .p-privacy__toc-label{color:var(--c-teal-dark)}
/* 条文。h1はKVのみのため見出しは h2。sticky header(80px) 回避に scroll-margin-top（04/03と同値） */
.p-privacy__body{max-width:900px;margin:0 auto}
.p-privacy__article{scroll-margin-top:96px;margin-bottom:var(--sp-card);padding-bottom:var(--sp-card);border-bottom:1px solid var(--c-border)}
.p-privacy__article:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.p-privacy__article-title{display:flex;gap:14px;align-items:baseline;margin:0 0 16px;font-size:19px;line-height:1.5}
.p-privacy__article-no{flex:0 0 auto;font-size:14px;font-weight:700;color:var(--c-primary-dark)}
.p-privacy__article-label{flex:1 1 auto}
.p-privacy__text{margin:0 0 1.2em;font-size:14px;line-height:1.95;color:var(--c-body)}
.p-privacy__text:last-child{margin-bottom:0}
.p-privacy__list{margin:0 0 1.2em;padding:0;list-style:none}
.p-privacy__list-item{position:relative;margin-bottom:.5em;padding-left:18px;font-size:14px;line-height:1.9;color:var(--c-body)}
.p-privacy__list-item::before{content:"\30FB";position:absolute;left:0;top:0;color:var(--c-teal-dark)}
.p-privacy__list-item:last-child{margin-bottom:0}
.p-privacy__list:last-child{margin-bottom:0}
/* 注記（第5条の手数料など）。※記号＋左罫＋地色の3重で伝え、色のみに依存させない */
.p-privacy__note{display:flex;gap:8px;margin:18px 0 0;padding:14px 18px;background:var(--c-notice-bg);border-left:3px solid var(--c-notice-border);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:13.5px;line-height:1.8;color:var(--c-body)}
.p-privacy__note-mark{flex:0 0 auto}
.p-privacy__note-text{flex:1 1 auto}
/* 第8条（税理士法上の守秘義務）の強調。WFの「（重要）」指示を見出し文字ではなく面で表現（page-privacy.php 冒頭コメント参照） */
.p-privacy__article--emphasis{padding:26px 28px;background:var(--c-panel);border-bottom:0;border-radius:var(--r-md)}
/* 第14条 お問い合わせ窓口 */
.p-privacy__office{margin:20px 0 12px;font-size:15px;font-weight:700;color:var(--c-heading)}
.p-privacy__contact{max-width:none;margin:0}
.p-privacy__contact dt{width:72px}
/* 署名（制定日／改定日／署名者）。改定日は c-note-pending で未確定と分かる見た目にしている */
.p-privacy__sign{max-width:900px;margin:var(--sp-hero) auto 0;padding-top:var(--sp-card);border-top:1px solid var(--c-border);text-align:right}
.p-privacy__dates{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin:0 0 20px;padding:0}
.p-privacy__date-row{display:flex;gap:12px;font-size:13.5px;color:var(--c-sub)}
.p-privacy__date-label{margin:0;font-weight:700}
.p-privacy__date-value{margin:0}
.p-privacy__signer{display:flex;flex-direction:column;gap:4px;margin:0;color:var(--c-heading)}
.p-privacy__signer-office{font-size:14px;font-weight:700}
.p-privacy__signer-name{font-size:16px;font-weight:700}
/* 09 レスポンシブ（SPカンプ未確定のため崩れ防止の最小対応／CLAUDE.md §1） */
@media (max-width:767px){
  .p-privacy__toc{padding:24px 20px}
  .p-privacy__toc-list{grid-template-columns:1fr}
  .p-privacy__article-title{flex-direction:column;gap:4px;font-size:17px}
  .p-privacy__article--emphasis{padding:20px}
  .p-privacy__contact dt{width:auto}
  .p-privacy__sign{text-align:left}
  .p-privacy__dates{align-items:flex-start}
}

/* ===== 08_お問い合わせ（page-contact.php／WF PAGE08） ===== */
/* 設計原本: Drive「黒岩税理士事務所_構造WF」PDF PAGE08（線画のみ）。
   07/08/09はデザインカンプ未支給のため、配色・余白・タイポは01〜06の実装済みページに準拠。
   フォーム本体は Snow Monkey Forms が出力するため .smf-* を上書きするが、
   すべて .p-contact-form 配下にスコープする（プラグイン側は 0,2,0 ／こちらは 0,3,0）。
   → enqueue順が将来変わっても勝ち続けるため、!important を使わずに済む（§2 !important 禁止）。 */

/* --- 窓口（新規のご相談はこちら） --- */
.p-contact-desk{padding-block:var(--sp-page) var(--sp-hero)}
.p-contact-desk__title{margin:0 0 var(--sp-card);font-size:26px;text-align:center}
/* grid の既定 stretch で2枚を等高にする（§4 card「同一行は等高」） */
.p-contact-desk__list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-gap);max-width:900px;margin:0 auto;padding:0;list-style:none}
/* justify-content:center — 電話カードとフォームカードの行数差を上下振り分けで吸収する */
.c-desk-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:var(--sp-card) 28px;background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-md);text-align:center}
.c-desk-card__icon{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:var(--r-pill);background:var(--c-panel);color:var(--c-primary-dark)}
.c-desk-card__icon svg{width:34px;height:34px}
.c-desk-card__title{margin:0;font-size:16px;color:var(--c-sub)}
.c-desk-card__tel{margin:0}
.c-desk-card__tel a{font-family:"Poppins",sans-serif;font-size:30px;font-weight:700;line-height:1.2;letter-spacing:.02em;color:var(--c-primary-dark)}
.c-desk-card__points{margin:0;padding:0;list-style:none}
.c-desk-card__point{font-size:14px;line-height:1.9;color:var(--c-sub)}
/* .btn--primary と同一の見え方を明示指定（テンプレートの class は変更しない） */
.c-desk-card__jump{display:inline-flex;align-items:center;gap:.4em;margin-top:6px;padding:12px 22px;background:var(--c-primary-dark);border-radius:var(--r-btn);font-size:14px;font-weight:700;line-height:1;color:#fff}
.c-desk-card__jump:hover{text-decoration:none;opacity:.9}

/* --- 既存顧問先さまへ（補助パネル。--c-panel は09の強調記事と同じ役割で使用） --- */
.p-contact-desk__existing{max-width:900px;margin:var(--sp-card) auto 0;padding:26px 28px;background:var(--c-panel);border-radius:var(--r-md)}
.p-contact-desk__existing-title{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:17px}
.p-contact-desk__existing-icon{display:inline-flex;flex:0 0 auto;color:var(--c-teal-dark)}
.p-contact-desk__existing-icon svg{width:24px;height:24px}
.p-contact-desk__existing-text{margin:0;font-size:14px;line-height:1.8;color:var(--c-body)}

/* --- フォームセクション --- */
/* scroll-margin-top:96px — sticky header 80px 分のアンカー逃げ（#contact-form／既存の p-privacy__article と同値） */
.p-contact-form{padding-block:var(--sp-hero);background:var(--c-card-alt);scroll-margin-top:96px}
.p-contact-form__title{margin:0 0 var(--sp-gap);font-size:26px;text-align:center}
.p-contact-form__lead{max-width:900px;margin:0 auto var(--sp-card);font-size:15px;line-height:1.9;text-align:center;color:var(--c-body)}
.p-contact-form__required-note{display:block;margin-top:6px;font-size:13.5px;color:var(--c-sub)}
.p-contact-form__body{max-width:900px;margin:0 auto}
.p-contact-form__note{margin:var(--sp-gap) 0 0;font-size:13.5px;line-height:1.8;color:var(--c-sub);text-align:center}
/* フォーム未検出時のフォールバック（09の注記と同じ「※記号＋左罫＋地色」で色依存を避ける） */
.p-contact-form__error{margin:0;padding:22px 26px;background:var(--c-notice-bg);border-left:3px solid var(--c-notice-border);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:14px;line-height:1.8;color:var(--c-body)}
.p-contact-form__error code{padding:2px 6px;background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-sm);font-size:13px}

/* --- 必須／任意バッジ --- */
/* 必須／任意バッジ（2026-08-07 実測・仕様確定）
   Snow Monkey Forms は required 属性もバッジも出力しないため、
   :has([data-validations~="required"]) で SMF の設定と連動させている。
   → 設定を変えればバッジも自動で追随する（手書きラベルにしない理由）
   ::after は <label> 内の span に付くため、アクセシブルネームにも含まれる
   （JS不要でスクリーンリーダーにも「必須」が伝わる）。

   ■ 既知の制約（ボス確認済み・フォールバックは追加しない方針）
   :has() 依存のため、以下より古いブラウザではバッジが表示されない。
     Chrome/Edge 105+ / Safari 15.4+ / Firefox 121+
   ただし送信時のバリデーションは効くため、必須項目が空なら送信は止まる。
   「バッジが1つも出ない」という報告があれば、まずブラウザ版数を確認すること。

   ■ 検証記録（2026-08-07・実機Chrome）
   6項目すべてで getComputedStyle(label, '::after').content を取得し
   「必須」「任意」が仕様どおり出ることを確認済み。
   プライバシー同意欄は .smf-item__label__text を持たないため対象外（別UIで代替）。 */
.c-req,.p-contact-form .smf-item__label__text::after{display:inline-block;padding:2px 8px;border:1px solid transparent;border-radius:var(--r-sm);font-size:11px;font-weight:700;line-height:1.6;letter-spacing:.04em;vertical-align:2px}
.c-req{background:var(--c-primary-dark);color:#fff}
.p-contact-form .smf-item__label__text::after{content:"任意";margin-left:8px;background:var(--c-card);border-color:var(--c-border);color:var(--c-sub)}
.p-contact-form .smf-item:has([data-validations~="required"]) .smf-item__label__text::after{content:"必須";background:var(--c-primary-dark);border-color:transparent;color:#fff}

/* --- 行レイアウト（SMF は素の .smf-form に2カラムCSSを持たないのでテーマ側で組む） --- */
.p-contact-form .smf-item{display:flex;gap:var(--sp-gap);padding-block:22px;border-bottom:1px solid var(--c-border)}
.p-contact-form .smf-item:first-child{padding-top:0}
.p-contact-form .smf-item:last-child{border-bottom:0}
/* padding-top:12px — ラベル文字のベースラインを入力欄の文字位置に合わせる */
.p-contact-form .smf-item__col--label{flex:0 0 220px;max-width:220px;padding-top:12px}
/* min-width:0 — textarea(width:100%)が flex アイテムを押し広げるのを防ぐ */
.p-contact-form .smf-item__col--controls{flex:1 1 auto;min-width:0}
.p-contact-form .smf-item__label__text{font-size:15px;font-weight:700;color:var(--c-heading)}

/* --- コントロール共通 --- */
/* border-color は --c-border(#e4e7ec ≈1.24:1) では WCAG 1.4.11(3:1) に届かないため --c-sub(#5f6772 ≈5.4:1)を使う。
   CLAUDE.md §3「フォーム枠線も同様に要調整」／§4「枠線は視認できる濃さに」への対応。
   カード枠線より濃いのは意図的（カードは装飾、入力欄は操作対象）。 */
.p-contact-form .smf-form .smf-text-control__control,.p-contact-form .smf-form .smf-textarea-control__control,.p-contact-form .smf-form .smf-select-control__control{width:100%;padding:12px 16px;background:var(--c-card);border:1px solid var(--c-sub);border-radius:var(--r-btn);box-shadow:none;font-family:inherit;font-size:15px;line-height:1.7;color:var(--c-body)}
/* 項目ごとの適正幅。SMF が出す data-name をフックにする（テンプレート側の変更不要） */
.p-contact-form .smf-placeholder[data-name="fullname"]{max-width:380px}
.p-contact-form .smf-placeholder[data-name="company"]{max-width:460px}
.p-contact-form .smf-placeholder[data-name="tel"]{max-width:300px}
.p-contact-form .smf-placeholder[data-name="email"]{max-width:460px}
/* select は「ラッパー」を絞る。__toggle が inset:0 の絶対配置なので、
   select 自体を細くすると矢印だけ右端に取り残される。 */
.p-contact-form .smf-form .smf-select-control{display:block;max-width:340px}
.p-contact-form .smf-form .smf-select-control__control{padding-right:44px}
/* 矢印はプラグインが ::before で描いている。色とサイズだけ寄せる（新規に作らない） */
.p-contact-form .smf-form .smf-select-control__toggle::before{right:18px;top:calc(50% - 5px);width:8px;height:8px;border-width:0 2px 2px 0;border-style:solid;border-color:var(--c-sub)}
.p-contact-form .smf-form .smf-textarea-control__control{display:block;resize:vertical}
/* プレースホルダは入力例の補助のみ。ラベル代替にしない（§2 label for 必須） */
.p-contact-form .smf-form ::placeholder{color:var(--c-muted);opacity:1}

/* --- 状態表現 --- */
.p-contact-form .smf-form .smf-text-control__control:hover,.p-contact-form .smf-form .smf-textarea-control__control:hover,.p-contact-form .smf-form .smf-select-control__control:hover{border-color:var(--c-primary)}
/* SMF は :focus で outline-width:0 にし、枠線色(#85b7d9)だけで状態を示す。
   §2「状態表現は色のみに依存しない」に反するため、テーマ側でフォーカスリングを復活させる。
   （テーマ全体でフォーカス指標を定義するのは08が最初。他ページにも横展開したい） */
.p-contact-form .smf-form .smf-text-control__control:focus-visible,.p-contact-form .smf-form .smf-textarea-control__control:focus-visible,.p-contact-form .smf-form .smf-select-control__control:focus-visible{outline:2px solid var(--c-primary-dark);outline-offset:2px;border-color:var(--c-primary-dark)}
/* エラー枠線。実機検証(2026-07-27)で判明した要修正点：
   プラグイン側の .smf-form [data-invalid="1"]{border-color:#d98585} は 0,2,0 しかないため、
   上の「コントロール共通」ルール(0,3,0)の border ショートハンドに負け、
   枠が太くなるだけで色が変わらなかった（＝エラーが枠色で伝わらない）。
   そこでコントロールのクラスを併記して 0,4,0 にし、色と太さを自前で確定させる。
   なお #d98585 は白地で約2.6:1でWCAG 1.4.11(3:1)未達。--c-error(約5.2:1)を使う。 */
.p-contact-form .smf-form [data-invalid="1"].smf-text-control__control,.p-contact-form .smf-form [data-invalid="1"].smf-textarea-control__control,.p-contact-form .smf-form [data-invalid="1"].smf-select-control__control,.p-contact-form .smf-form [data-invalid="1"].smf-checkbox-control__control{border-color:var(--c-error);border-width:2px}
/* エラー文は 赤＋太字＋左罫＋▲記号 の4重で伝える。::before は content:"" なので読み上げに影響しない。
   color を --c-error に固定すると、border-left と ▲(どちらも currentColor) が自動で追従する */
.p-contact-form .smf-error-messages{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding-left:10px;border-left:3px solid currentColor;font-size:13.5px;font-weight:700;line-height:1.7;color:var(--c-error)}
.p-contact-form .smf-error-messages::before{content:"";flex:0 0 auto;width:0;height:0;margin-top:5px;border-right:6px solid transparent;border-bottom:11px solid currentColor;border-left:6px solid transparent}

/* --- チェックボックス --- */
.p-contact-form .smf-form .smf-checkbox-control{gap:10px}
.p-contact-form .smf-form .smf-checkbox-control__control{width:20px;height:20px;margin-top:2px;background:var(--c-card);border:1px solid var(--c-sub);border-radius:var(--r-btn);box-shadow:none}
.p-contact-form .smf-form .smf-checkbox-control__control:checked{background-color:var(--c-primary-dark);border-color:var(--c-primary-dark)}
/* 上の :checked(0,4,0) と 1026行の invalid(0,4,0) は同点で、後に書いた :checked が border-color を取る。
   結果「チェック済み × エラー」の同居時だけ枠が青のまま＝エラーが枠色で伝わらない。
   現状の同意チェック1個では未チェック時しかエラーにならないので到達しないが、
   複数選択の必須化を後から入れた時に効くよう 0,5,0 で明示しておく。 */
.p-contact-form .smf-form .smf-checkbox-control__control[data-invalid="1"]:checked{border-color:var(--c-error)}
/* プラグイン既定はチェックマークが currentColor（＝本文色）で、塗り潰し後は暗色×暗色になる。白に上書きする */
.p-contact-form .smf-form .smf-checkbox-control__control::before{width:7px;height:11px;left:calc(50% - 4px);top:calc(50% - 7px);border-width:0 2px 2px 0;border-style:solid;border-color:#fff}
.p-contact-form .smf-form .smf-checkbox-control__control:focus-visible{outline:2px solid var(--c-primary-dark);outline-offset:2px}
.p-contact-form .smf-form .smf-checkbox-control__label{font-size:15px;line-height:1.7;color:var(--c-body)}

/* --- プライバシー同意行 --- */
/* SMF は同意行に smf-item--divider を付け、ラベル列を出力しない。
   上の .smf-item{display:flex} を打ち消してパネル化する（同specなので後勝ちで上書き）。 */
.p-contact-form .smf-item--divider{display:block;margin-top:var(--sp-card);padding:26px 28px;background:var(--c-panel);border-bottom:0;border-radius:var(--r-md)}
.p-contact-form .smf-item--divider .smf-checkboxes-control__control{display:flex;justify-content:center}
.p-contact-form .smf-item--divider .smf-control-description{text-align:center}

/* --- 補助説明文 --- */
.p-contact-form .smf-control-description,.p-contact-form .smf-item__description{margin-top:10px;font-size:13.5px;line-height:1.8;color:var(--c-sub)}
.p-contact-form .smf-control-description a{color:var(--c-primary-dark);text-decoration:underline}

/* --- 進捗トラッカー（入力→確認→完了） --- */
.p-contact-form .smf-progress-tracker{max-width:560px;margin:0 auto var(--sp-card)}
/* 番号丸を32pxにしたので、連結線も中心(top:15px)へ合わせる */
.p-contact-form .smf-progress-tracker__item::before,.p-contact-form .smf-progress-tracker__item::after{top:15px;height:2px;background-color:var(--c-border)}
/* プラグイン既定の #ccc 地×白文字は約1.6:1。--c-sub なら約5.8:1 で AA を満たす */
.p-contact-form .smf-progress-tracker__item__number{width:32px;height:32px;background-color:var(--c-sub);font-family:"Poppins",sans-serif;font-size:14px;font-weight:700;color:#fff}
.p-contact-form .smf-progress-tracker__item__text{margin-top:.7em;font-size:13px;color:var(--c-sub)}
/* 現在地は「塗り色＋リング＋太字」の3つで示す（色のみに依存させない／§2） */
.p-contact-form .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__number{background-color:var(--c-primary-dark);box-shadow:0 0 0 4px var(--c-panel)}
.p-contact-form .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__text{color:var(--c-primary-dark);font-weight:700}

/* --- 送信・確認ボタン --- */
.p-contact-form .smf-action{margin-top:var(--sp-card);text-align:center}
.p-contact-form .smf-action .smf-button-control+.smf-button-control{margin-left:var(--sp-gap)}
/* background ショートハンドでプラグインの background-color と linear-gradient の両方を打ち消す */
.p-contact-form .smf-action .smf-button-control__control{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-width:280px;padding:18px 32px;background:var(--grad-cta);border:0;border-radius:var(--r-btn);font-family:inherit;font-size:16px;font-weight:700;line-height:1;color:#fff;cursor:pointer;transition:opacity .2s ease-out}
/* hover で明るい青に振ると白文字が 4.5:1 を割るため、既存 .btn--white:hover と同じ opacity 方式にする */
.p-contact-form .smf-action .smf-button-control__control:hover{opacity:.9}
.p-contact-form .smf-action .smf-button-control__control:focus-visible{outline:2px solid var(--c-primary-dark);outline-offset:3px}
/* 実機検証(2026-07-27)で確定：confirm 画面の「入力内容を修正する」は data-action="back" を出力する。
   complete 画面は data-screen を一時的に complete へ書き換えて計測し、下の完了画面ルールの適用を確認済み。 */
.p-contact-form .smf-action .smf-button-control__control[data-action="back"]{padding:16px 30px;background:var(--c-card);border:2px solid var(--c-primary);color:var(--c-primary-dark)}
/* --- disabled 状態（2026-09-03 追加） ------------------------------------
   Turnstile が解決するまで、プラグインが .smf-action 内の [type="submit"] を
   disabled にする（App/Service/Turnstile/Turnstile.php の toggleSubmittersDisabled）。
   Button.php は戻るボタンも <button type="submit"> で出力するため、
   「入力内容を修正する」も同時に無効化される。

   ■ なぜ必要か（2026-09-03 実機計測）
     既定では disabled でも opacity:1 / cursor:pointer / CTAグラデのままで、
     見た目が完全に有効だった。押せるのに反応しないボタンになり、
     ユーザーには理由が分からない。

   ■ なぜ opacity で薄くしないか
     ボタン全体を透過させると白文字が下地(--c-bg #fbfcfd)に溶けて
     4.5:1 を割る。進捗トラッカーの番号と同じ発想で --c-sub の平坦色に置く。
     実測: 白文字 on --c-sub(#5f6772) = 5.72:1（AA合格）。
     --c-muted(#848b94) は 3.44:1 で本文AA未達のため使わない。
   ------------------------------------------------------------------------ */
.p-contact-form .smf-action .smf-button-control__control:disabled{background:var(--c-sub);cursor:not-allowed}
.p-contact-form .smf-action .smf-button-control__control[data-action="back"]:disabled{background:var(--c-card);border-color:var(--c-sub);color:var(--c-sub)}
/* :hover{opacity:.9} を打ち消す。無効なボタンが hover で反応すると押せると誤解させる */
.p-contact-form .smf-action .smf-button-control__control:disabled:hover{opacity:1}
/* 送信中スピナーはプラグイン既定が半透明の黒でCTAグラデ上に見えない。白系に置き換える */
.p-contact-form .smf-action .smf-button-control__control:not([data-action="back"]) .smf-sending::before{border-color:rgba(255,255,255,.55);border-top-color:transparent}

/* --- Turnstileウィジェットを送信ボタンの上に表示（2026-08-07・§検証記録あり） ---
   プラグインの position 設定は before/after の2択のみ。before はフォーム全体の先頭
   （入力欄より上）になるため不適（トークンの有効期限中に入力が終わらない懸念もある）。
   そのため CSS の order で表示順のみ入れ替える。DOM順・プラグイン設定は変更しない。

   .smf-form / .smf-action は画面遷移で innerHTML だけ差し替わる「箱」であり、
   Turnstile はその外側の兄弟（<form class="snow-monkey-form"> の直接の子で全員同じ親）。
   入力・確認・完了のどの画面でも構造は変わらない
   （2026-08-07 実機DOM＋プラグインJS snow-monkey-forms/src/js/module/submit.js で確認）。

   order を指定するのは Turnstile と .smf-action の2つだけ。
   他の子要素（進捗トラッカー・hidden・ハニーポット）は既定値0のまま触らない。 */
.p-contact-form .snow-monkey-form{display:flex;flex-direction:column}
/* ウィジェット本体（iframe込み）は固定幅約300pxのため、text-align:center ではなく
   親を flex + justify-content:center で中央寄せする（同意チェックボックス・送信ボタンと視線を揃える）。

   max-width:100%/overflow-x:auto は SP幅の見切れ対策。
   .p-contact-form__body は max-width:900px なので、SP幅（375px想定）ではコンテナ実質幅が
   約327pxになる。ウィジェット固定幅約300pxに対して余白が27pxしかなく、Cloudflare側の
   レンダリング幅が想定より大きい場合（320px以下の端末で発生しうる）に見切れる可能性がある。
   はみ出しを許容せず、この要素の中だけで横スクロールに逃がす（WCAG 1.4.10 Reflow の
   観点でも、ページ全体の横スクロールを発生させないことが重要）。 */
.p-contact-form .snow-monkey-forms-turnstile{order:1;display:flex;justify-content:center;max-width:100%;overflow-x:auto}
.p-contact-form .smf-action{order:2}

/* --- 確認画面・完了画面 --- */
.p-contact-form .snow-monkey-form[data-screen="confirm"] .smf-item__col--controls{font-size:15px;line-height:1.9;color:var(--c-heading)}
/* 確認画面は入力済み内容の確認だけを見せたいのでバッジは消す */
.p-contact-form .snow-monkey-form[data-screen="confirm"] .smf-item__label__text::after{content:none}
/* 入力欄が無くなり値がプレーンテキストになるので、入力欄の文字位置に合わせた padding-top:12px は逆にズレになる */
.p-contact-form .snow-monkey-form[data-screen="confirm"] .smf-item__col--label{padding-top:0}
/* 同意行は入力画面で中央寄せにしている。確認画面では .smf-checkboxes-control__control が出力されないため、
   値を包む .smf-placeholder 側で中央を維持する（入力→確認で位置が飛ばないように） */
.p-contact-form .snow-monkey-form[data-screen="confirm"] .smf-item--divider .smf-placeholder{text-align:center}
/* 確認画面はバッジを消しているので「必須 は…」の凡例が指す対象を失う。完了画面は入力を促すリード文ごと不要
   （凡例は .p-contact-form__lead の内側にあるので一緒に消える）。 */
.p-contact-form:has(.snow-monkey-form[data-screen="confirm"]) .p-contact-form__required-note,
.p-contact-form:has(.snow-monkey-form[data-screen="complete"]) .p-contact-form__lead{display:none}
.p-contact-form .snow-monkey-form[data-screen="complete"] .smf-form{max-width:640px;margin:0 auto;padding:var(--sp-card) 32px;background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-md);text-align:center}
.p-contact-form .snow-monkey-form[data-screen="complete"] .smf-form p{margin:0 0 14px;font-size:15px;line-height:1.9;color:var(--c-body)}
.p-contact-form .snow-monkey-form[data-screen="complete"] .smf-form p:last-child{margin-bottom:0}

/* 08 レスポンシブ（SPカンプ未確定のため崩れ防止の最小対応／CLAUDE.md §1） */
@media (max-width:767px){
  .p-contact-desk__list{grid-template-columns:1fr}
  .c-desk-card__tel a{font-size:26px}
  .p-contact-desk__existing{padding:20px}
  .p-contact-desk__existing-title{align-items:flex-start;font-size:16px}
  .p-contact-form .smf-item{display:block;padding-block:18px}
  .p-contact-form .smf-item__col--label{max-width:none;padding-top:0;padding-bottom:8px}
  .p-contact-form .smf-placeholder[data-name="fullname"],.p-contact-form .smf-placeholder[data-name="company"],.p-contact-form .smf-placeholder[data-name="tel"],.p-contact-form .smf-placeholder[data-name="email"]{max-width:none}
  .p-contact-form .smf-form .smf-select-control{max-width:none}
  .p-contact-form .smf-item--divider{padding:20px}
  .p-contact-form .smf-item--divider .smf-checkboxes-control__control{justify-content:flex-start}
  .p-contact-form .smf-item--divider .smf-control-description{text-align:left}
  .p-contact-form .smf-action .smf-button-control{display:block}
  .p-contact-form .smf-action .smf-button-control__control{width:100%;min-width:0}
  .p-contact-form .smf-action .smf-button-control+.smf-button-control{margin-top:12px;margin-left:0}
  .p-contact-form .smf-progress-tracker__item__text{font-size:12px}
}

/* ============================================================
   汎用フォールバック（page / single / archive / search / 404）
   ------------------------------------------------------------
   2026-07-27 追加。本番は既存WordPressの「テーマ入れ替え」なので、
   このテーマが想定していない既存ページ・既存投稿・カテゴリ archive・検索・404 が
   そのまま表示される。専用テンプレを持たないそれらの受け皿。
   新規クラスは c-guide-links / c-searchbox の2つだけに抑え、
   それ以外は既存の p-page-kv / c-breadcrumb / c-news-row / c-post-body を流用している。
   ============================================================ */

/* 行き止まり（404・検索0件）の導線ボタン列 */
.c-guide-links{margin-top:var(--sp-gap)}
.c-guide-links__list{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0;padding:0;list-style:none}
.c-guide-links__item{display:flex}

/* 検索フォーム（get_search_form() のコア出力を包む。ラベルは .screen-reader-text で視覚的に隠れる） */
.c-searchbox{max-width:820px;margin:0 auto var(--sp-gap)}
.c-searchbox .search-form{display:flex;gap:8px;flex-wrap:wrap}
.c-searchbox .search-field{flex:1 1 240px;min-width:0;padding:11px 14px;border:1px solid var(--c-border);border-radius:var(--r-btn);background:var(--c-card);font-family:inherit;font-size:15px;color:var(--c-body)}
.c-searchbox .search-field:focus-visible{outline:2px solid var(--c-primary);outline-offset:1px}
.c-searchbox .search-submit{padding:12px 22px;border:0;border-radius:var(--r-btn);background:var(--c-primary-dark);color:#fff;font-family:inherit;font-weight:700;font-size:14px;line-height:1;cursor:pointer}
.c-searchbox .search-submit:hover{opacity:.9}

/* 汎用テンプレは h1 をKVに出すので、本文側の先頭マージンを詰める */
.p-news-single__inner .c-post-body>*:first-child{margin-top:0}

/* ============================================================
   タップターゲット（WCAG 2.5.8 Target Size (Minimum) / レベルAA = 24x24）
   ------------------------------------------------------------
   2026-07-27 追加。375px の実機実測で 24x24 を割っていた3種を是正する。
   44x44 は 2.5.5 のレベルAAA なので、AA適合の要件ではない（＝ここでは追わない）。

   ■ なぜ padding ではなく透明な ::after で広げているか
     3種とも既存レイアウトの高さに直結する（ニュースバーの行高・パンくずの帯・
     目次カードの行間）。padding を足すと見た目が動き、Figma照合のたびに
     「これは意図した差分か」を判断し直すコストが毎回発生する。
     ::after を position:absolute で敷けばクリック領域だけが広がり、レイアウトは1pxも動かない。
     2.5.8 が測るのは「ポインタ操作を受け付ける領域」なので、これで基準を満たす。

   ■ position:absolute にしている理由（消さないこと）
     .p-privacy__toc-link と .c-breadcrumb__item a は flex 文脈にある。
     absolute を外すと ::after がフレックスアイテムに昇格し、既存レイアウトが崩れる。

   ■ 広げ幅の決め方
     いずれも「隣接要素とのギャップの半分未満」に収めてあり、隣のリンクの
     当たり判定と重ならない。横幅は3種とも24px以上あるため、縦のみ広げている。

   ■ 対象外にしたもの（実測して基準を満たすと判断）
     ・文章内のインラインリンク（各ページ12〜13件）… 2.5.8 の「インライン」例外に該当
     ・同意チェックボックス 20x20 … label が input を内包しており
       （label.control === input を実測で確認）、ラベル文字全体が有効なタップ領域。
       視覚サイズの変更はデザイン差分になるため行わない。
   ============================================================ */

/* TOP ニュースバー「VIEW MORE →」 23px → 31px（上下ギャップ12px・広げ幅4px） */
.c-newsbar__more{position:relative}
.c-newsbar__more::after{content:"";position:absolute;inset:-4px 0}

/* 下層共通 パンくずのリンク 22px → 26px（ギャップ8px・広げ幅2px） */
.c-breadcrumb__item a{position:relative}
.c-breadcrumb__item a::after{content:"";position:absolute;inset:-2px 0}

/* 09 プライバシーポリシー 目次アンカー 24px → 30px（行間ギャップ10px・広げ幅3px） */
.p-privacy__toc-link{position:relative}
.p-privacy__toc-link::after{content:"";position:absolute;inset:-3px 0}

/* ============================================================
   ヒーローの白文字に影（2026-07-27 ボス指示）
   ------------------------------------------------------------
   .p-fv__bg::after のスクリム --grad-hero-scrim は
   rgba(11,13,17,.6) → .3(45%) → .05 と右にいくほど薄くなる設計。
   左端は十分だが、テキスト塊（.p-fv__inner は max-width:640px）の右側では
   写真の明るい部分と重なった時に白文字の輪郭が溶ける。
   スクリム自体を濃くすると写真が沈むので、文字側に影を置いて輪郭だけ確保する。
   2段構成: 1px の近影で輪郭、14px のぼかしで背景との分離。
   ============================================================ */
.p-fv__title,
.p-fv__catch,
.p-fv__lead{text-shadow:0 1px 2px rgba(11,13,17,.45), 0 2px 14px rgba(11,13,17,.35)}

/* ============================================================
   コントラスト二次是正（WCAG 1.4.3 AA） 2026-07-27
   ------------------------------------------------------------
   一次是正（--c-teal-dark / --c-muted / --grad-cta の3トークン）で 184件 → 49件。
   残りの主因は --c-teal(#06abc6) が「暗い面のアクセント」と
   「明るい面の文字・白文字を乗せる面」の両方に使われていたこと。
   同じトークンが正反対のコントラスト要求を抱えているので、用途で使い分ける。

     --c-teal      … 暗い面の上の文字、および線・アイコン・ボーダー等の非テキスト
     --c-teal-dark … 明るい面の上の文字、および白文字を乗せる面

   ■ 意図的に触っていないもの（消さないこと）
     .p-fv__eyebrow / .p-fv__en
       暗いヒーローの上にある。暗くすると逆に読めなくなるため --c-teal のまま。
     .c-whyus-card__line / .c-path-step__accent / .c-qualify-card__items .c-check-list__item::before
     .p-access__parking のボーダー / .c-support-card--accent のボーダー
       線・アイコン・ボーダー＝非テキスト。基準は 1.4.11 の 3:1 であって、
       テキストの 4.5:1 は要求されない。ここを暗くするとデザインが痩せるだけ。

   ■ opacity について
     コントラストは「最終的に描画された色」で決まる。opacity を下げたままでは
     どんな色を指定しても基準に届かない（実測: --c-teal-dark を opacity:.5 で 2.01）。
     該当2箇所は基準を満たす最小値まで引き上げるに留めた。
   ============================================================ */

/* --- 明るい面の上のテキスト --- */
.c-welcome-item__text{color:var(--c-teal-dark)}                 /* 13px  2.75 → 4.51 */
.c-path-step__no{color:var(--c-teal-dark)}                      /* 13px  2.75 → 4.51 */
.c-whyus-card__num{color:var(--c-teal-dark);opacity:.8}         /* 32px  opacity .5→.8 で 3.24（要3.0） */
.c-path-step__num{opacity:.8}                                   /* 42px  opacity .38→.8 で 3.24（要3.0） */

/* --- 白文字を乗せる面 --- */
.p-jobdesc{background:var(--c-teal-dark)}                       /* 白文字 2.75 → 5.09 */
.p-flow--select .c-flow-step__circle{background:var(--c-primary-dark)}  /* 白文字 3.82 → 5.30 */
.p-flow--select .c-flow-step--final .c-flow-step__circle{background:var(--c-teal-dark)} /* 白文字 2.75 → 5.09 */

/* --- 二次是正の詰め：opacity が原因で落ちていた3種 --- */
/* いずれも「色は妥当だが opacity で薄めすぎて基準を割っていた」ケース。
   実測でしか出てこない（要素のopacityを計算に入れないと見逃す）ため、
   検証スクリプト側にも opacity の反映を入れてある（_docs/12 §6-5）。 */

/* 円内の "STEP" ラベル。白文字 8px。地は --c-primary-dark と --c-teal-dark の2種。
   .85 では 4.27 / 4.14 と、どちらも 4.5 にわずかに届いていなかった。 */
.c-flow-step__step{opacity:.92}                 /* → 4.73 / 4.57 */

/* 「詳しく見る」相当のリンク。地は白。.7 で 3.10 だった。
   hover 側の opacity:1 と gap 拡大はそのままなので、ホバーの手応えは残る。 */
.c-plan-chip__more{opacity:.92}                 /* → 約4.6 */

/* 11px の小さな英字・日付。--c-muted(#848b94) は 3.35 で、
   大きい文字なら足りるが 11px では 4.5 が要る。--c-sub(#5f6772) へ。 */
.p-greeting__sign-en{color:var(--c-sub)}        /* 3.35 → 5.57 */
.p-privacy__date-value{color:var(--c-sub)}      /* 3.35 → 5.57 */

/* ============================================================
   SPメニュー展開中の背景スクロールを止める（2026-07-27 実測で発覚）
   ------------------------------------------------------------
   header.js は展開時に body へ .is-nav-open を付けているが、
   CSS側にこのクラスのルールが1つも無かった（grep 0件）。
   フックだけ用意されて実装が落ちている状態で、実測すると
   メニュー展開中に背景が普通にスクロールしてしまう（600 → 1200 を確認）。

   .l-header__nav-area は position:fixed の全画面オーバーレイなので、
   背景が動くと「閉じたら別の位置にいる」という迷子が起きる。

   overscroll-behavior:contain は、メニュー内を端までスクロールした後に
   背景へスクロールが連鎖するのを止める（iOS Safari 対策）。
   ============================================================ */
/* 【2026-07-28 訂正】767px → 1024px に拡張。
   ハンバーガーと全画面オーバーレイは `@media (max-width:1024px)` で有効なのに、
   スクロールロックだけ 767px 止まりだった。
   **768〜1024px（iPad縦 768/820/834px）では、メニューを開いたまま背景が普通にスクロールしていた。**
   ブレークポイントは「UIが切り替わる幅」に揃えること。
   関連：④のヘッダー position:fixed も 1024px、nav-a11y.js の解除も 1025px に揃えた。 */
@media (max-width:1024px){
  html:has(body.is-nav-open),
  body.is-nav-open{overflow:hidden}
  .l-header__nav-area{overscroll-behavior:contain}
}

/* ============================================================
   SPの見出し：日本語の泣き別れを止める（2026-07-27 実測で発覚）
   ------------------------------------------------------------
   375px で全9ページの見出しを走査したところ、14箇所で
   「最終行が1〜2文字だけ」になっていた。例:

     あなたはどちらですか？   → 「あなたはどちらですか」＋「？」
     黒岩税理士事務所の強み   → 「黒岩税理士事務所の」＋「強み」
     経理バックオフィスのDX化支援 → 最終行1文字

   直接の原因は、SPの本文幅が 260px しかないこと
   （--sp-page:50px にSP用の上書きが無く、375px画面の27%が左右余白）。
   ただし余白を24pxに詰めても、今度は別の見出しが割れるだけだった
   （12件 → 5件、内訳がそっくり入れ替わる）。折り返し幅の調整では解決しない。

   text-wrap:balance は行長を均等に配分するので、
   「最後の1文字だけ落ちる」が構造的に起きなくなる。実測 14件 → 0件。

   ■ レイアウトへの影響はゼロ
     全9ページの総高さが適用前後で完全一致することを実測で確認済み
     （TOP 18654→18654 / 採用 18601→18601 など、9ページすべて同値）。

   ■ 対応していないブラウザでは現状の折り返しに戻るだけ（デグレードしない）。
     Chrome 114+ / Safari 17.5+ / Firefox 121+ で有効。

   ■ word-break:auto-phrase は採用しなかった
     文節単位で折るので日本語には筋が良いが、実測では3件残った
     （「黒岩税理士事務所の強み」等）。balance のほうが確実だった。
   ============================================================ */
@media (max-width:767px){
  h1,h2,h3,h4{text-wrap:balance}
}

/* ============================================================
   SPのページ端余白（2026-07-27 ボス決定「デスクトップ用の値がそのまま効いていただけ」）
   ------------------------------------------------------------
   --sp-page:50px は :root にしか無く、SP用の上書きが存在しなかった。
   結果、375px の画面で左右50pxずつ取られ、本文幅が 260px しか無かった
   （画面の 27% が余白）。一般的なSPの端余白は 16〜24px。

   実測（9ページ × 375px）:
     本文幅          260px → 312px（+52px / +20%）
     横はみ出し      0件 → 0件
     見出しの泣き別れ 0件 → 0件
     タップターゲット 0件
     ページ総高さ    すべて短くなる（-1.2% 〜 -8.8%）
                     行数が減るぶんスクロール量も減る。/privacy/ で -892px

   ■ --sp-page はここでも使われている（縦方向・意図して一緒に詰めている）
     .p-news-archive / .p-privacy / .p-contact-desk の上余白 50→24
     .p-privacy__toc の下余白 50→24
     .l-header__nav-area（SPメニュー）の左右余白 50→24 ＝ 本文と端がそろう
     いずれもSPでは50pxが過剰なので、まとめて詰めるのが正しい。

   ■ タブレット(768〜1024px)は 50px のまま
     @media (max-width:1024px) の .container 側で --sp-page を参照しているが、
     この上書きは 767px 以下にしか効かないため、タブレットの見た目は変わらない。
   ============================================================ */
@media (max-width:767px){
  :root{--sp-page:24px}
}

/* ============================================================
   iOS Safari の入力欄オートズーム抑止（2026-07-27 実測で発覚）
   ------------------------------------------------------------
   iOS Safari は font-size が 16px 未満のテキスト入力欄にフォーカスすると、
   ページ全体を自動でズームする。しかも入力を終えても元の倍率に戻らない。
   利用者は「勝手に拡大されて、自分で戻さないといけない」状態になる。

   実測（375px・/contact/）: text / tel / email / select / textarea すべて 15px。
   あと 1px 足りないだけで踏んでいた。

   ■ user-scalable=no で抑える方法は採らない
     ズーム自体を禁止すると WCAG 1.4.4 Resize Text（レベルAA）違反になる。
     現在の viewport は「width=device-width, initial-scale=1」で拡大可能。正しい状態なので触らない。

   ■ SPだけに当てる理由
     オートズームはモバイルSafari固有の挙動で、PCでは起きない。
     PC側のデザイン（15px）を変える必要がない。
   ============================================================ */
@media (max-width:767px){
  .p-contact-form .smf-form .smf-text-control__control,
  .p-contact-form .smf-form .smf-textarea-control__control,
  .p-contact-form .smf-form .smf-select-control__control,
  .c-searchbox .search-field{font-size:16px}
}

/* ============================================================
   SPのヒーロー（2026-07-27 ボス指示「iPhone 16 Pro Max で新着お知らせが見えるくらいに」）
   ------------------------------------------------------------
   .p-fv には SP用の上書きが1つも無く、すべてデスクトップ値のままだった。
     min-height:700px / padding-block:100px×2 / h1 58px
   結果、440px幅でヒーローが 777px になり、ニュースバーの上端が 903px。
   iPhone 16 Pro Max の可視領域（440×806 想定）では画面外だった。

   高さを決めていたのは min-height ではなく「中身＋上下余白」だったため、
   min-height を触っても効かない。実際に効いたのは次の3つ:

     padding-block  100px → 56px   （-88px）
     h1             58px  → 40px   （3行→2行になり -122px）
     catch          22px  → 19px

   実測（可視領域を端末ごとに固定して計測）:
     16 Pro Max 777px → 527px  ニュースバー 124/124px ✅ 全部見える
     16 Plus    777px → 527px  ニュースバー 124/124px ✅
     16 標準     887px → 527px  ニュースバー  67/151px △ 44%
     SE/mini    945px → 637px  ニュースバー   0/151px ❌（可視領域635pxでは物理的に無理）

   ■ h1 を 58px から下げた理由
     8文字を58pxで置くと 375px幅では1行に収まらず3行になっていた。
     電話の画面で58pxは大きすぎて、逆に「文字のかたまり」として読みにくい。
   ============================================================ */
@media (max-width:767px){
  .p-fv{min-height:0;padding-block:56px}
  .p-fv__lead{margin-bottom:16px}
  .p-fv__title{font-size:40px;margin-bottom:16px}
  .p-fv__catch{font-size:19px;margin-bottom:14px}
  .p-fv__en{margin-bottom:24px}
}
/* 幅の狭い端末（iPhone SE / mini 等）では 40px でも h1 が3行になるため、もう一段下げる */
@media (max-width:390px){
  .p-fv__title{font-size:36px}
}

/* ============================================================
   ヒーローのスクロール促進（2026-07-27 ボス指示 → 2026-08-04 全幅へ拡張）
   ------------------------------------------------------------
   SP：ヒーローを圧縮してニュースバーが覗くようにしたが、
       端末によっては覗き量が少ないため、下向き矢印で「まだ下がある」を明示する。
   PC：2026-08-04 ボス判断（判断待ち5件の #3）で全幅表示に変更。
       min-height:700px のヒーローでも「下に続く」サインを出す。
       bottom は PC=56px / SP=16px。実測（2026-08-04・1920x959）:
         header 80px ／ FV 795px ／ CTAボタン下端からFV下端まで 139px
         bottom:16px だと viewport高さ 860px 以上でしか見えない
         bottom:56px で 820px 以上に改善（ノートPCの 660〜760px は
         矢印移動だけでは解決不能。FV自体が795pxあるのが原因）

   ■ テキストは入れない
     Figma原本には「SCROLL DOWN ↓」があるが、
     (1) 該当ノードは WF注釈フレーム 1:41 の子 1:44 で実装対象か判別できない
     (2) 英字ラベルは情報量ゼロで士業サイトでは主張が強い
     (3) span は aria-hidden なので、テキストを足すと読み上げから隠れた
         文字列が生まれ a11y 的に不整合になる
     以上より矢印のみ。テキストノードを足さないこと。
   ■ 装飾に徹している
     aria-hidden="true" ＋ pointer-events:none。
     読み上げにも入らず、タップターゲットにもならない（AA判定に影響しない）。
   ■ prefers-reduced-motion を尊重
     動きが苦手な利用者には静止した矢印を出す。
   ============================================================ */
.p-fv__scroll{
  display:block;position:absolute;left:50%;bottom:56px;z-index:2;
  width:22px;height:22px;margin-left:-11px;pointer-events:none;
}
.p-fv__scroll::before{
  content:"";position:absolute;left:4px;top:2px;width:12px;height:12px;
  border-right:2px solid rgba(255,255,255,.92);
  border-bottom:2px solid rgba(255,255,255,.92);
  filter:drop-shadow(0 1px 3px rgba(11,13,17,.55));
  animation:kuroiwa-scroll-hint 1.9s ease-in-out infinite;
}
/* SPは16pxに戻す。SPのヒーローは padding-block:80px まで圧縮されており、
   56pxだと本文ブロックに寄りすぎてニュースバーとの間が空きすぎるため。 */
@media (max-width:767px){
  .p-fv__scroll{bottom:16px}
}
@keyframes kuroiwa-scroll-hint{
  0%,100%{transform:translateY(-3px) rotate(45deg);opacity:.5}
  50%    {transform:translateY(3px) rotate(45deg);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .p-fv__scroll::before{animation:none;transform:rotate(45deg);opacity:.9}
}

/* ============================================================
   SPヒーローのトリミング位置（2026-07-27 ボス決定「④ 42%」）
   ------------------------------------------------------------
   既定は object-position:right center。PCの横長枠では問題ないが、
   SPの縦長枠では右端＝外部サッシの暗部だけが切り出され、
   女性のシルエットもロゴも1つも映っていなかった。

   画像を200列に分割して列ごとの平均輝度を測ったところ:
     _hero.jpg  明るい領域（被写体側）= 左9% 〜 右76%  → 右24%がサッシ
   42% は、ロゴの円と「黒岩税理士事務所」の文字、女性のシルエットが
   すべて枠内に入る位置（候補32/42/52/65%を並べてボスが選定）。

   ■ PCに当てない理由
     _hero.jpg 2000x1332（比1.502）を PCヒーロー枠 1440x700（比2.057）に
     object-fit:cover で入れると、横幅を基準に拡大して上下を切る動きになる。
     つまり横方向は必ず全部映るので、object-position を変えても効かない。
     PCのサッシ除去は画像そのものをトリミングするしかない（front-page.php のTODO参照）。
   ============================================================ */
@media (max-width:767px){
  .p-fv__bg img{object-position:42% center}
}

/* ============================================================
   SPのニュースバーを2行に（2026-07-27 ボス指示）
   ------------------------------------------------------------
   SPでは3行になっていた。
     1行目 NEWS お知らせ / 日付
     2行目 記事タイトル
     3行目 VIEW MORE →
   .c-newsbar__inner は flex-wrap なので、.c-newsbar__latest（ラベル・日付・
   タイトルの入れ物）が丸ごと1行を占め、VIEW MORE が押し出されていた。

   .c-newsbar__latest を display:contents にして入れ物を透明化し、
   中の3要素を .c-newsbar__inner 直下のフレックスアイテムに昇格させる。
   order でラベル→日付→VIEW MORE を1行目に、タイトルを2行目に置く。

     124px（3行）→ 92px（2行）  ※4端末幅すべてで同じ結果

   ■ タイトルは1行に省略する
     幅の狭い端末ではタイトルが2行になり、結局3行に戻ってしまう。
     省略記号で1行に固定して、2行を保証する。全文はリンク先にある。
     min-width:0 が無いとフレックスアイテムは内容幅より縮まないので必須。

   ■ display:contents の安全性
     対象は <div class="c-newsbar__latest">。リストや表ではないので、
     かつて問題になったアクセシビリティツリーの欠落は起きない。
   ============================================================ */
@media (max-width:767px){
  .c-newsbar__latest{display:contents}
  .c-newsbar__label{order:1}
  .c-newsbar__date{order:2}
  .c-newsbar__more{order:3}
  .c-newsbar__title{
    order:4;flex:1 0 100%;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
}

/* ------------------------------------------------------------
   SPヒーローの高さ 再調整（2026-07-27 ボス実機確認「白の半分くらい足していい」）
   ニュースバーが2行になって下の白が 75px → 107px に増えたため、
   その約半分を padding-block に戻す。56px → 80px（上下で +48px）。

   実測（可視806px・iPhone 16 Pro Max 想定）:
     ヒーロー 527px → 575px
     ヘッダー80 + ヒーロー575 + ニュースバー92 = 747px
     → 下の白 59px を残す（ニュースバーは全部見える）
   ------------------------------------------------------------ */
@media (max-width:767px){
  .p-fv{padding-block:80px}
}

/* ============================================================
   SPの認定セクションを2×2に（2026-07-27 ボス指示）
   ------------------------------------------------------------
   .p-cert__list は 1024px以下で2列、767px以下で1列になっていた。
   1列だとカードが縦に4枚積まれ、セクションだけで 1,348px（440px幅）。
   バッジは112px固定なので、カードを横に広げても情報量は増えず、
   ただ縦に長くなるだけだった。

   実測（セクション高）:
     440px  1,348px → 764px（-44%）
     375px  1,388px → 828px（-40%）
     はみ出し0件 / 横スクロール0件

   ■ カード内の余白を詰めている理由
     375px幅では2列にすると1枚 146px。既定の padding（上下44px・左右20px）だと
     中身の枠が 106px になり、112pxのバッジが入らない。
     左右12pxにして中身の枠を122pxまで広げている。

   ■ .c-cert-card__label--lg を 26px に下げる理由
     「事業承継」を34pxで置くと文字幅122px。375px幅の中身の枠がちょうど122pxで、
     1pxの余裕も無く2行に割れていた（393pxでも同じ）。
     26pxなら104pxで確実に1行に収まる。440pxでは34pxでも1行に入るが、
     端末によって行数が変わるほうが事故なので、SPでは一律26pxにする。
   ============================================================ */
@media (max-width:767px){
  .p-cert__list{grid-template-columns:repeat(2,1fr)}
  .c-cert-card{padding:24px 12px;gap:12px;min-height:0}
  .c-cert-card__label--lg{font-size:26px}
}


/* ============================================================
   お悩みセクション（.p-issues）のSP表示 — 2026-07-28
   ------------------------------------------------------------
   ■ 何を変えたか
     767px以下だけ、カードを「アイコン上・中央寄せ」から
     「アイコン左・本文左寄せ」の横並びに組み替えた。
     768px以上（PC・タブレット）は一切変えていない。

   ■ なぜ変えるか
     デスクトップは5列。カードが縦長・中央寄せなのは
     幅177pxの5列に収めるための形であって、
     SPの1列ではその形がそのまま残っていた。
     結果、1枚 312×212px のカードが5枚縦に積まれ、
     セクションだけで 1,629px（375px幅）＝画面2.5枚ぶん。
     iPhone 16 Pro Max でも一度に2.5枚しか見えない。

   ■ 実測（セクション高 ／ はみ出し0件・横スクロール0件）
       375px   1,629px → 1,222px（-25%）
       440px   1,629px → 1,177px（-28%）
     見出しは1行・本文は2行のまま。文字を詰めて縮めてはいない。

   ■ 他案を採らなかった理由（375px時のセクション高）
       A 2列（2+2+1）      1,346px  5枚目が左に余る
       B 2列＋5枚目を全幅   1,277px  最後の1枚だけ形が違う
       C 横並びコンパクト    1,222px  行数そのまま・最短        ← 採用
     A・Bは2列にすると1枚 146px まで縮み、
     見出しが2行・本文が4行に折れる。
     セクション高は縮んでもカード1枚あたりは読みづらくなる。

   ■ 中央寄せをやめる理由
     日本語の本文が2行以上あるとき中央寄せは行頭が揃わず、
     視線の戻り先が毎行ずれる。
     カード幅が312pxまで広がるSPではこのコストが効く。
     PCの5列（幅177px・本文が短い）では目立たないので残す。

   ■ grid-row:1/4 について
     アイコンを1列目に固定し、CASE番号／見出し／本文の
     3行ぶんをまたがせている。
     将来カード内の行が増えたら 1/-1 に変えること。
   ============================================================ */
@media (max-width:767px){
  .p-issues__list{grid-template-columns:1fr;gap:12px}
  .c-issue-card{
    display:grid;
    grid-template-columns:56px 1fr;
    column-gap:14px;
    row-gap:4px;
    align-items:start;
    text-align:left;
    padding:16px;
  }
  .c-issue-card__icon{grid-row:1/4;grid-column:1;margin-bottom:0}
  /* SPは1カード1行の横並びなので、見出しの高さ揃えは不要（空白になるだけ） */
  .c-issue-card__title{min-height:0}
  .c-issue-card__num,
  .c-issue-card__title,
  .c-issue-card__text{grid-column:2}
}

/* ------------------------------------------------------------
   お悩みカード：狭い端末（392px以下）だけアイコンを詰める
   ------------------------------------------------------------
   ■ 何が起きていたか
     見出しの実測幅（15px・1行に必要な幅）
       CASE01 経理業務に時間がかかる        165px
       CASE02 数字がタイムリーに見えない     195px
       CASE03 税理士からの提案がない        165px
       CASE04 クラウド会計を活用しきれない   210px
       CASE05 創業期で何から始めるべきか不安 225px  ← 最長

     アイコン56px＋隙間14px＋左右padding16pxだと本文欄は
       375px端末 → 210px（CASE04がちょうど210pxで余裕ゼロ、CASE05は2行）
       390px端末 → 225px（CASE05がちょうど225pxで余裕ゼロ）
       393px端末 → 228px（全部1行に入る）
     つまり iPhone SE / 13 mini 世代（375px）だけが折り返していた。

   ■ 対処
     アイコン48px・隙間12px・左右padding12pxにして本文欄を228pxに戻す。
     393px端末と同じ幅になるので、狭い端末でも行数が揃う。
       375px → 228px（CASE05に3pxの余裕）
       390px → 243px

   ■ 392pxで区切る理由
     393px（iPhone 14/15/16 標準）以上は既定のままで全部1行に収まる。
     ボスの実機 iPhone 16 Pro Max（440px）にも影響しない。
     不要な端末までアイコンを小さくしないため、上限を392pxにしている。

   ■ 残る想定リスク
     iOS Safari の実フォントがChromeより数px広い場合、
     CASE05（余裕3px）が2行に折れる可能性がある。
     折れても text-wrap:balance が効いて8字/7字に割れるだけで、
     はみ出しや重なりは起きない。実機で見て気になれば
     アイコンを44pxにすれば本文欄は232pxまで広がる。
   ------------------------------------------------------------ */
@media (max-width:392px){
  .c-issue-card{grid-template-columns:48px 1fr;column-gap:12px;padding:14px 12px}
  .c-issue-card__icon{width:48px;height:48px}
}

/* ------------------------------------------------------------
   認定カード：320px端末では2列にしない（2026-07-28 追記）
   ------------------------------------------------------------
   ■ 訂正
     直前に入れた「SPで2×2」は、320px幅で横スクロールを起こしていた。
     こちらの確認漏れ。実測して見つけたので直す。

   ■ 原因
     .c-cert-card の中の資格バッジが112px固定。
     カード左右padding 12px×2 と足すと、カードは136pxより細くならない。
       320px端末 … 左右余白24px×2を引いて中身は272px
                    136px×2＝272px ＋ カード間の隙間 → 約16pxはみ出す
     グリッドの子は min-width:auto（＝中身より細くならない）なので、
     列を2つ指定しても潰れずにあふれる。

   ■ 対処
     359px以下は1列に戻す。2列が成立する下限はおよそ336pxなので、
     360pxに区切りを置いて余裕を持たせる。
     360px以上（iPhone 12 mini以降のほぼ全機種）は2×2のまま。

   ■ なぜバッジを縮めないか
     112pxは「事業承継」等の文字が1行で収まる最小幅。
     ここを縮めると資格名が2行に割れてカードの高さが揃わなくなる。
     320pxは iPhone SE(第1世代)/5s 相当で、2列を諦めるほうが安い。

   ■ 関連
     WCAG 2.2 の 1.4.10 Reflow（レベルAA）は
     「320px幅で横スクロールを発生させないこと」を求めている。
     この修正で320pxの横スクロールは0件になる。
   ------------------------------------------------------------ */
@media (max-width:359px){
  .p-cert__list{grid-template-columns:1fr}
}

/* ============================================================
   FAQ：アコーディオン化（2026-07-28）
   ------------------------------------------------------------
   ■ 何を変えたか
     Q&Aを全部開いた状態で並べていたのを、
     <details>/<summary> の開閉式にした。1問目だけ open で出す。

   ■ なぜ details/summary なのか（JSを書かない理由）
     ・キーボード操作（Tab→Enter/Space）が標準で効く
     ・スクリーンリーダーに「折りたたみ・展開済み/折りたたみ済み」が伝わる
     ・JSが落ちても中身が読める（open属性が無いだけで文字は存在する）
     ・検索エンジンはdetails内のテキストもDOMにあるものとして読む
     自前のJSアコーディオンだと、上の4つを全部自分で書く必要がある。

   ■ 実測（375px幅・4問）※適用後に測り直した実数
       FAQセクション  全展開1,011px → 初期表示782px（-23%）
       ページ全長     /first/    8,195px → 7,966px
                      /recruit/ 19,127px → 18,898px
       全部開いた状態は1,073px。項目ごとの余白が増えるぶん、
       もとの全展開より62px高くなる。

     つまり「高さが劇的に減る」変更ではない。
     本体は、4つの質問が1画面に並ぶので
     読み手が自分の知りたい質問を探せるようになること。
     PC（1440px）は初期636px、summaryの当たり判定は900x64px。

   ■ 1問目を open にする理由
     全部閉じていると「開くもの」だと気づかれないことがある。
     1問だけ開けておくと、+/−の矢印が何を意味するかが一目で伝わる。

   ■ 排他アコーディオン（details name="..."）を使わない理由
     name属性を付けると1つ開くと他が閉じる。
     FAQは2つを見比べたい場面があるので、複数開けるままにする。
     （name属性は Chrome 120+/Safari 17.2+ と対応も新しめ）

   ■ タップ領域
     summaryは上下padding 20px＋行高24px＝約64px、横は幅いっぱい。
     WCAG 2.5.5（AAA・44px）も満たす。

   ■ 開閉アニメーション
     高さのアニメーションは付けていない。
     details の高さ遷移は ::details-content / interpolate-size 頼みで
     Safari の対応が浅く、環境によって「一瞬全開してから縮む」事故が出る。
     矢印の回転（.18s）だけにして、確実に動くほうを取る。
     prefers-reduced-motion:reduce ではその回転も止める。

   ■ 今後
     AIOSEO導入後、FAQPage 構造化データを入れるか検討する。
     ただしGoogleのFAQリッチリザルトは2023年8月に表示対象が
     大幅縮小されているため、導入前に最新の扱いを確認すること。
   ============================================================ */
.c-faq{padding:0;border-top:1px solid var(--c-border)}
.c-faq:first-child{border-top:0}

.c-faq__q{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:0;
  padding:20px 44px 20px 4px;
  position:relative;
  cursor:pointer;
  font-size:15px;
  font-weight:700;
  line-height:1.6;
  color:var(--c-heading);
  list-style:none;
  -webkit-tap-highlight-color:transparent;
  transition:color .15s ease;
}
.c-faq__q::-webkit-details-marker{display:none}
.c-faq__q:hover{color:var(--c-primary-dark)}
.c-faq__q:focus-visible{outline:2px solid var(--c-primary-dark);outline-offset:-2px;border-radius:4px}

/* 開閉の矢印。閉＝下向き（45deg）／開＝上向き（-135deg） */
.c-faq__q::after{
  content:"";
  position:absolute;
  right:13px;
  top:25px;
  width:9px;
  height:9px;
  border-right:2px solid var(--c-teal-dark);
  border-bottom:2px solid var(--c-teal-dark);
  transform:rotate(45deg);
  transition:transform .18s ease;
}
.c-faq__box[open] > .c-faq__q::after{transform:rotate(-135deg)}

.c-faq__a{display:flex;gap:10px;margin:0;padding:0 4px 22px;font-size:13.5px}
.c-faq__a-text{margin:0;font-size:13.5px;line-height:1.85;color:var(--c-body)}

@media (prefers-reduced-motion:reduce){
  .c-faq__q,
  .c-faq__q::after{transition:none}
}

/* ============================================================
   SPのセクション余白（--sp-hero / --sp-card）— 2026-07-28
   ------------------------------------------------------------
   ■ 何を変えたか
     767px以下でだけ
       --sp-hero  100px → 56px （セクションの上下padding）
       --sp-card   44px → 28px （見出し〜中身、カード間の間隔）
     768px以上（PC・タブレット）は100px/44pxのまま。Figma準拠を崩さない。

   ■ なぜ変えるか
     この2つは :root にしか無く、SP用の上書きが無かった。
     100pxという値は1440px幅・画面高900pxの環境で決めたもので、
     そこでは画面の約11%。同じ100pxを375px幅の端末に出すと、
     画面高700〜900pxに対して上下で200px＝画面の1/4が余白になる。
     ホワイトスペースの「率」が端末で揃っていなかった。

   ■ 実測（375px幅・ページ全長）
       /          16,988px → 14,937px（-12%）
       /about/    12,071px → 10,927px（-9%）
       /recruit/  18,898px → 17,442px（-8%）
       /service/   9,240px →  8,475px（-8%）
       /first/     7,966px →  7,017px（-12%）
     TOPは15セクションあるので、1セクションあたり88pxの削減が積み上がる。

   ■ 56px/28pxにした理由（44px/24pxを採らなかった理由）
     44pxまで詰めるとTOPは-15%まで行くが、
     セクションの切れ目が弱くなり「どこで話題が変わったか」が読めなくなる。
     56pxは本文行高（14px×1.85≒26px）の約2行ぶんで、
     見出しの前に一拍置ける最小ラインとして選んだ。

   ■ 影響範囲の注意
     --sp-hero は .l-footer の上padding にも使われている（100→56px）。
     .p-fv は別途 padding-block:80px で上書き済みなので影響しない。
   ============================================================ */
@media (max-width:767px){
  :root{
    --sp-hero:56px;
    --sp-card:28px;
  }
}

/* ------------------------------------------------------------
   写真帯（パララックス跡）を SP・タブレットでは出さない
   2026-07-28 SP対応 → 2026-07-29 タブレットまで拡張（ボス指示）
   ------------------------------------------------------------
   ■ 対象
     .p-access__banner   TOP ⑫ACCESSの上（PC 380px）
     .p-recruit-band     採用 ⑤（PC 340px）

   ■ 理由
     PCではパララックス（background-attachment:fixed）付きの
     全幅バンドとして「章の切り替わり」を演出している。
     幅が狭くなると、残るのは文脈の途中に挟まる単体の写真だけで、
     章の区切りとして読まれず「なぜここに写真があるのか」が伝わらない。

   ■【2026-07-29】767px → 1024px へ広げた理由（2つある）

     ① ボス判断
        「TBもパララックスは不要」。SPと同じ理屈がタブレットにも当てはまる。

     ② より厄介な技術的理由 — **タブレットではパララックスが動いていない可能性が高い**
        background-attachment:fixed を scroll に落としているのは
        **767px以下だけ**だった（L410 / L799）。
        つまり 768〜1024px では fixed が生きたままだが、
        **iOS Safari は background-attachment:fixed をまともに実装していない**。
        iPad では「動かないか、スクロール時に描画が乱れるか」のどちらかになる。
        演出として成立していない帯が、380px / 340px の高さだけ占めていた。

   ■ 情報の欠落は無い
     どちらも CSS の背景画像（::before）で、alt も本文も持たない純粋な装飾。
     display:none にすればアクセシビリティツリーからも消えるので、
     読み上げ環境でもノイズが減る。

   ■ 削減
     SP（≤767px）      TOP -220px ／ recruit -220px
     タブレット（768〜1024px） TOP -380px ／ recruit -340px

   ■ 戻したくなったら
     この @media ブロックを消すだけでよい。
     タブレットだけ戻すなら (max-width:767px) に書き戻す。
     ただしその場合は L410 / L799 の background-attachment:scroll も
     1024px まで広げること（iPadでfixedを効かせないため）。
     高さだけ抑えたいなら display:none を消して
     .p-access__banner{height:120px} のように書き換える。
   ------------------------------------------------------------ */
@media (max-width:1024px){
  .p-access__banner,
  .p-recruit-band{display:none}
}

/* ============================================================
   「大切にする11の姿勢」（.p-values）のSP表示 — 2026-07-28
   ------------------------------------------------------------
   ■ 何を変えたか
     767px以下だけ、枠付きの縦カード11枚を
     ヘアライン区切りのリストに組み替えた。
     PC（768px以上）の4列グリッドは無変更。

   ■ なぜ変えるか
     PCは4列なのでカードの枠が「区画」として機能する。
     SPで1列に落ちると、同じ枠が縦に11個積み上がり、
     枠線・角丸・内側の余白だけで1枚あたり約100px使っていた。
     11枚ぶんで1,100px以上が「枠のための高さ」だった。

   ■ 実測（375px幅・セクション高）
       現状  1列カード              3,042px
       A案   横並びカード           2,455px（-19%）
       B案   ヘアラインリスト ←採用  約1,900px（-37%）
     ページ全長 /about/ 10,927px → 約9,800px

   ■ アイコンをSPで隠す理由
     PCの4列グリッドでは1枚ずつ視線が止まるのでアイコンが効く。
     SPの縦一列では左端に同系色のアイコンが11個並ぶだけになり、
     見出しの読み取りをむしろ邪魔する。
     番号バッジ（01〜11）が既にリズムを作っているので、
     視覚的な目印としては重複している。
     aria-hidden="true" が付いた装飾要素なので、
     display:none にしても読み上げ内容は変わらない。

   ■ 本文を12px→13pxに上げる理由
     枠を外して横幅が広がったぶんを可読性に回す。
     12pxの日本語本文はSPでは小さい。

   ■ 1枚目の padding-top を0にする理由
     区切り線が無い1枚目だけ、上の余白が二重になるため。
   ============================================================ */
@media (max-width:767px){
  .p-values__list{gap:0}
  .c-value-card{
    flex-basis:100%;
    display:block;
    padding:14px 2px;
    border:0;
    border-top:1px solid var(--c-border);
    border-radius:0;
    background:transparent;
    text-align:left;
  }
  .c-value-card:first-child{border-top:0;padding-top:0}
  .c-value-card__icon{display:none}
  .c-value-card__num{display:inline-flex;vertical-align:middle;margin:0 10px 0 0}
  .c-value-card__title{display:inline;font-size:16px;line-height:1.5}
  .c-value-card__en{display:block;margin:3px 0 0 38px}
  .c-value-card__text{display:block;margin:6px 0 0 38px;font-size:13px}
}

/* ============================================================
   サービス詳細6項目（.c-svc-row）のSP表示 — 2026-07-28
   ------------------------------------------------------------
   ■ 何を変えたか
     767px以下で「写真を上に全幅・高さ170px」だったのを、
     116×64pxのサムネイルを左上に置く横並びに変えた。
     PC（768px以上）の写真200px＋本文の横並びは無変更。

   ■ 高さの話
       現状          2,703px
       A3（採用）    1,866px（-31%）
     ページ全長 /service/ 8,475px → 7,638px

   ■ 画質の話（こちらが本題）
     元画像は 200×110px しかない。
     現状のSPはこれを幅310pxに引き伸ばしていた＝1.55倍の拡大。
     高解像度端末（DPR3のiPhone）では実質4.6倍になり、
     輪郭がにじむ。
     116×64pxで置けば0.58倍表示になり、DPR3でも1.74倍相当。
     つまり今回の変更は「短くなる」だけでなく「くっきりする」。

   ■ 116×64 という数字
     200÷110＝1.818。116÷64＝1.8125 でほぼ一致させてある。
     object-fit:cover でも切り落とされる部分がほぼ無い。

     ※ここを詰めて 96px 幅にすると1,667pxまで縮むが、
       写真が縦長の枠に入って横幅の78%が切り落とされる。
       31%と38%の差のために写真を壊す取引はしない。

   ■ align-items:flex-start にする理由
     既定の stretch のままだとサムネイルが行の高さいっぱいに
     伸びて、また縦長クロップに戻ってしまう。

   ■ アンカーについて
     各行には #svc-startup などのIDが付いており、
     サービス概要から飛んでくる導線がある。
     .c-svc-row の scroll-margin-top:96px は
     SPヘッダー80pxより大きいので、そのままで隠れない。
   ============================================================ */
@media (max-width:767px){
  .c-svc-row{flex-direction:row;align-items:flex-start}
  .c-svc-row__media{
    /* 110px は元画像 200×110 の短辺。ここを超えると object-fit:cover が
       画像を拡大する（116pxにすると1.05倍。実測して110pxに戻した）。 */
    flex:0 0 110px;
    width:auto;
    height:64px;
    margin:12px 0 0 12px;
    border-radius:6px;
    overflow:hidden;
  }
  .c-svc-row__body{padding:12px 14px 14px 12px}
  .c-svc-row__title{font-size:16px;margin-bottom:4px}
  .c-svc-row__text{font-size:13px;line-height:1.6;margin-bottom:8px}
  .c-svc-row__chips{gap:5px}
}

/* ============================================================
   「私たちと働く5つの魅力」（.p-whyus）のSP表示 — 2026-07-28
   ------------------------------------------------------------
   ■【不具合】カードが画面の左右いっぱいまで届いていた
     .p-whyus__stage は .container の外にあり、
     左右のpaddingを持っていなかった。
     1024px以下で max-width:600px の縦積みに切り替わるが、
     600pxより狭い端末では画面幅そのままになる。

       実測（カードの左端 / 幅）
         320px … 左0 / 305px
         375px … 左0 / 360px
         440px … 左0 / 425px

     他のセクションはすべて左右24px（--sp-page）の余白があるので、
     ここだけ写真が画面の端に貼り付いて見えていた。
     stage に padding-inline:var(--sp-page) を足して揃える。

   ■ 写真の比率を16:9に変える理由
     .c-whyus-card__media は aspect-ratio:260/180（＝1.44）。
     幅いっぱいに広がるSPでは、画面が広い端末ほど写真が高くなる。

       セクション高の実測
         320px … 2,088px
         375px … 2,238px
         440px … 2,463px   ← 画面が大きいほど長くなる

     カード5枚ぶん積み上がるので、端末による差が400px近く出ていた。
     16:9に寄せると写真が抑えられ、端末間の差も縮む。

   ■ 実測（375px幅・セクション高）
       現状               2,238px
       余白を足すだけ      2,072px
       余白＋16:9 ←採用    1,829px（-18%）
       余白＋2:1          1,732px（写真が帯状になりすぎるので不採用）
     ページ全長 /recruit/ 16,165px → 15,757px

   ■ 切り取りについて
     元画像は 560×388（＝1.44）。16:9で表示すると
     object-fit:cover で上下が約19%切られる。
     人物が写っている04・05でも頭が切れないことを目視で確認済み。
     気になる場合は object-position で寄せる。

   ■ 適用範囲を767px以下にしている理由
     768px以上では stage（max-width:600px）が中央寄せになり、
     左右にもともと余白ができる。そこにpaddingを足すと
     カードが600px→500pxに細くなるだけなので、SPだけに限定した。

   ■ PC・タブレットへの影響
     768px以上は無変更（絶対配置のジグザグは1025px以上）。
   ============================================================ */
@media (max-width:767px){
  .p-whyus__stage{padding-inline:var(--sp-page)}
  .c-whyus-card__media{aspect-ratio:16/9}
  .c-whyus-card__meta{margin-top:12px}
  .c-whyus-card__title{margin:6px 0 4px}
}

/* ============================================================
   SERVICES概要（.p-services__entry-list）のSP表示 — 2026-07-28
   ------------------------------------------------------------
   ■ 何を変えたか
     入口となるサービス4件を、767px以下でも2列（2×2）のままにした。
     これまでは 1024px以下で2列 → 767px以下で1列 と、
     SPだけ1列に落としていた。

   ■ なぜ2列に戻すか
     このカードは「写真＋色付きラベル（＝詳細へのリンク）」で、
     本文を持たない“サービスの入口メニュー”。
     4つを見比べて選ぶための並びなので、
     4つが一度に見えることに価値がある。
     1列だと1件ずつスクロールして探すことになり、
     メニューとして機能しなくなっていた。

   ■ 実測（375px幅・セクション高）
       現状 1列                    1,856px
       2列                         1,163px
       2列＋ラベル12px ←採用        1,110px（-40%）
       1列のまま写真を21:9に        1,598px（人物写真が帯状に切れるので不採用）
     ページ全長 /service/ 7,638px → 6,892px
     TOP ⑦も同じ部品なので同時に効く。

   ■ ラベルを13px→12pxにする理由
     2列だとカード幅150px（375px端末）。
     13pxのままだと「経理DX化・クラウド会計導入」等が
     3行に割れてカードの高さが揃わない。
     12px・行高1.4なら最大2行に収まる。

   ■ タップ領域
     リンクはカード全体（150×150px）。
     WCAG 2.5.5（AAA・44px）を大きく超えている。

   ■ 写真について
     150×93pxまで小さくなるが、元画像は900×600なので拡大は起きない。
     写真は選択の補助で、主役は色付きラベル。
   ============================================================ */
@media (max-width:767px){
  .p-services__entry-list{grid-template-columns:repeat(2,1fr);gap:12px}
  .c-entry-card__label{font-size:12px;padding:8px 6px;margin-top:8px;line-height:1.4}
}

/* ============================================================
   強み／CASE STUDIES（.c-strength-row）のSP表示 — 2026-07-28
   ------------------------------------------------------------
   ■ 内訳を測ってから決めている
     375px幅で1行あたり325px。その内訳が
         写真          125px
         写真↔本文の間  28px
         番号ブロック   72px  ← ここが大きい
         見出し＋本文  100px
     「01」を font-size:40px・weight:300 で置いている装飾ブロックが、
     本文（見出し＋説明文）の7割の高さを占めていた。
     1440px幅では40pxは相対的に小さいが、375pxでは大きすぎる。

   ■ 変更点
     1. 番号の数字 40px → 26px、番号ブロックの下余白 12px → 8px
        （番号ブロック 72px → 47px）
     2. 写真と本文の間 28px → 16px
     3. CASE同士の間 56px（--sp-hero） → 32px
        セクションを分ける余白と同じ値が行間に入っていた
     4. 見出しブロックの下余白 --sp-hero → --sp-card
        他のセクションは全部 --sp-card なので、ここだけ2倍あった

   ■ 実測（375px幅）
       .p-cases      1,340px → 1,141px（-15%）
       .p-strengths  1,360px → 1,208px（-11%）
       TOP全長       13,955px → 13,604px
     .p-strengths は /about/ にもあるので同時に効く。

   ■ 本文サイズは下げていない
     見出し19px→18px・本文14px→13.5pxまで詰める案も測ったが、
     さらに縮むのは56pxだけ。可読性を落とす取引にならない。

   ■ PCへの影響
     768px以上は無変更。
   ============================================================ */
@media (max-width:767px){
  .p-cases__head,
  .p-strengths__head{margin-bottom:var(--sp-card)}
  .p-cases__list{gap:32px}
  .c-strength-row{gap:16px}
  .c-strength-row__num{margin-bottom:8px;align-items:center}
  .c-strength-row__num-figure{font-size:26px}
}

/* ============================================================
   ご相談の流れ（.p-flow）のSP表示 — 2026-07-28
   ------------------------------------------------------------
   ■【不具合】つなぎ線が丸とつながっていなかった
     767px以下では
       .p-flow__list::before{left:32px}       ← 線は左から32px
       .c-flow-step{align-items:center}        ← 丸は中央寄せのまま
     になっており、実測すると
       線のX座標 56px ／ 丸の中心X座標 180px
     線が画面の左端を単独で縦に走っているだけの状態だった。
     PC（横並び）用の align-items:center が残ったまま、
     線だけ縦組み用に書き換えられたのが原因。

   ■ 直し方の選択
     A 線を中央（left:50%）に寄せる      955px → 927px
     B 丸を左に寄せて縦タイムラインにする 955px → 575px（-40%）← 採用
     線を left:32px に置いた元の意図は明らかにBなので、
     未完成だった意図を完成させる形にした。

   ■ 実測
       TOP    .p-flow  955px → 575px（-40%）／全長 13,604px → 13,224px
       first  .p-flow（説明文つき）1,385px → 771px

   ■ アイコンは残す
     アイコンを省くと566pxで、残した場合との差は9pxしかない。
     9pxのために意味のある絵を捨てない。

   ■ 線の始点・終点
     top:0/bottom:0 だと最初の丸の上と最後の丸の下に線がはみ出す。
     丸の半径ぶん（35px）だけ内側に入れて、01の中心から
     04の中心までを結ぶ。

   ■ grid-row:1/span 3 について
     TOPには __desc が無く、firstにはある。
     3行ぶん確保しておけば、__desc の有無どちらでも
     丸が本文全体の高さをまたげる。
   ============================================================ */
@media (max-width:767px){
  .p-flow__head{margin-bottom:var(--sp-card)}
  .p-flow__list{gap:20px}
  .p-flow__list::before{left:35px;top:35px;bottom:35px}
  .c-flow-step{
    display:grid;
    grid-template-columns:70px 1fr;
    column-gap:16px;
    row-gap:2px;
    align-items:start;
    text-align:left;
  }
  .c-flow-step__circle{grid-column:1;grid-row:1/span 3}
  .c-flow-step__icon{grid-column:2;grid-row:1}
  .c-flow-step__label{grid-column:2;grid-row:2;text-align:left}
  .c-flow-step__caption{text-align:left}
  .c-flow-step__desc{grid-column:2;grid-row:3;text-align:left;max-width:none;margin-top:4px}
}

/* ============================================================
   採用「こんな方と、一緒に働きたい」（.p-welcome）のSP表示
   ------------------------------------------------------------
   ■ 円が1列に1つしか並んでいなかった
     .c-welcome-item__circle は 160px 固定。
     375px端末の内側は327pxで、円2つ＋隙間16px＝336px。
     9pxだけ足りずに折り返し、5つの円が縦一列になっていた。
       → リスト部分だけで864px

   ■ 対処
     767px以下で円を148pxにする。148×2＋16＝312px ≤ 327px。
     2列（2+2+1）に収まり、リストは482pxになる。
     359px以下（iPhone SE第1世代相当）は内側が272pxしかないので
     128pxまで落とす（128×2＋16＝272px）。

   ■ padding-block:130px の直書きを直す
     このセクションだけトークンを使わず130px直書きだった。
     SPの余白（--sp-hero＝56px）に揃える。上下で148pxの削減。

   ■ 実測
       .p-welcome  1,273px → 737px（-42%）
       /recruit/ 全長 15,909px → 15,373px

   ■ 文字の収まり
     円の内側は148-28＝120px。最長の
     「新しいツールや仕組みに前向きな方」（16字・13px）でも
     2行で収まることを実測で確認。
   ============================================================ */
@media (max-width:767px){
  .p-welcome{padding-block:var(--sp-hero)}
  .c-welcome-item__circle{width:148px;height:148px;padding:14px}
}
@media (max-width:359px){
  .c-welcome-item__circle{width:128px;height:128px;padding:12px}
}

/* ------------------------------------------------------------
   FOR YOU（.c-forwho-card）のSP余白 — 2026-07-28
   ------------------------------------------------------------
   カードの内側余白20px・アイコン52px・カード間20pxは
   2列で置くPC向けの値。SPで1列になると本文の横幅が
   160pxしか残らず、説明文が4行に折れて縦に伸びていた。

   余白16px・アイコン46px・カード間12pxにすると
   本文の横幅が広がり、4枚とも3行で揃う。

   実測（375px幅）
     セクション  1,067px → 916px（-14%）
     カード高    195px → 163px（4枚とも同じ）
   ------------------------------------------------------------ */
@media (max-width:767px){
  .p-forwho__list{gap:12px}
  .c-forwho-card{padding:16px;gap:14px}
  .c-forwho-card__icon{width:46px;height:46px}
  .c-forwho-card__icon svg{width:24px;height:24px}
}

/* ------------------------------------------------------------
   採用ヒーローの高さ（.p-recruit-hero）— 2026-07-28
   ------------------------------------------------------------
   ■ まず計測ミスの訂正
     1024px以下は min-height:76vh。
     検証用iframeの高さを2,400pxにしていたため 76vh が 1,824px に解決され、
     「採用ヒーローが1,824px」「/recruit/ の全長が15,127px」と誤って記録していた。
     iframeの高さを実機の画面高に合わせ直したところ、

       iPhone SE(3)      375x667 … ヒーロー 565px ／ 全長 13,716px
       iPhone 15/16      393x852 … ヒーロー 648px ／ 全長 13,715px
       iPhone 16 Pro Max 440x956 … ヒーロー 727px ／ 全長 13,756px

     vh を使っているのは style.css 全体でここ1か所だけなので、
     他ページの計測値に影響はない。

   ■ 変更内容
     min-height を min(70svh, 640px) にする。

   ■ svh を使う理由
     iOS Safari の vh は「URLバーが隠れた状態（large viewport）」が基準。
     URLバーが見えている実際の初期表示では、76vh は画面の76%より
     大きい割合を占める（iPhone 16 Pro Max なら実質88%前後）。
     svh は「URLバーが見えている状態（small viewport）」が基準なので、
     初期表示で必ず指定した割合に収まる。
     dvh はスクロール中に値が変わってレイアウトが動くため使わない。

   ■ 640px の上限を足す理由
     画面が縦に長い端末ほどヒーローだけが伸びて、
     下のコンテンツが1画面目から押し出される。
     中身（本文ブロック）は最大565pxなので、640pxあれば足りる。

   ■ 実測（1画面目に見える「ヒーローより下」の高さ）
       iPhone SE(3)       102px → 102px（中身565pxで決まるため変化なし）
       iPhone 15/16       204px → 256px
       iPhone 16 Pro Max  229px → 316px
     ※ この数値はiframe計測なのでURLバーぶんは考慮されていない。
       実機ではURLバーが見えるぶん、改善幅はこれより大きくなる。

   ■ フォールバック
     svh 非対応のブラウザは min() ごと無効になり、
     上の行の min-height:76vh がそのまま残る。壊れない。
     （svh: Safari 15.4+ / Chrome 108+ / Firefox 101+）
   ------------------------------------------------------------ */
@media (max-width:1024px){
  .p-recruit-hero{min-height:min(70svh,640px)}
}

/* ------------------------------------------------------------
   募集要項の入社後ステップ（.c-path-step）のSP余白 — 2026-07-28
   ------------------------------------------------------------
   §「強み／CASE STUDIES」と同じ型の調整。
   装飾用の大きな番号が、SPでは本文に対して大きすぎた。

     現状の1枚（375px幅）190px の内訳
       番号ブロック  42px  ← 42px・italic の数字
       見出し        22px
       本文          68px
       内側余白      40px（20px×2）

   ■ 変更点
     番号 42px → 28px ／ カード内側余白 20px → 16px ／
     カード間 16px → 12px ／ .p-jobdesc__top の下余白 64px（直書き） → --sp-card

   ■ 実測（375px幅）
     .p-jobdesc  1,400px → 1,284px（-8%）
     /recruit/ 全長 13,716px → 13,600px

   ■ PCへの影響
     768px以上は無変更（1025px以上は絶対配置の階段レイアウト）。
   ------------------------------------------------------------ */
@media (max-width:767px){
  .p-jobdesc__top{margin-bottom:var(--sp-card)}
  .c-path-step{padding:16px;margin-bottom:12px}
  .c-path-step__num{font-size:28px}
  .c-path-step__accent{margin-top:10px}
}

/* ============================================================
   SPメニューの不具合2件と、TOPリンク追加 — 2026-07-28
   ============================================================ */

/* ------------------------------------------------------------
   ④【不具合・自分で入れたもの】スクロール後に閉じるボタンが消える
   ------------------------------------------------------------
   ■ 症状
     TOPで2000pxスクロールしてからハンバーガーを押すと、
     メニューは開くが×ボタンが画面外に行き、閉じられなくなる。

   ■ 原因
     .l-header は position:sticky。
     2026-07-27 に入れたSPのスクロールロック
       html:has(body.is-nav-open), body.is-nav-open{overflow:hidden}
     によって html がスクロールコンテナでなくなり、
     sticky が効かなくなって静的位置（文書先頭）へ戻る。

     実測（375px・2000pxスクロール後にメニューを開いた状態）
       header の top     0px → **-2000px**
       ハンバーガー top  20px → **-1980px**（画面外）

     採用ページだけ発生しなかったのは、
     body.is-recruit-hero .l-header が position:fixed だったため。
     つまり「たまたま1ページだけ助かっていた」状態。

   ■ 対処
     メニューを開いている間だけヘッダーを position:fixed にする。
     スクロールロック中は背景が動かないので、fixed と実際の見た目は一致する。
   ------------------------------------------------------------ */
@media (max-width:1024px){
  body.is-nav-open .l-header{position:fixed;left:0;right:0;top:0}
}

/* ------------------------------------------------------------
   ⑨【不具合】採用ページでメニューを開くと真っ白になる
   ------------------------------------------------------------
   ■ 原因
     採用ページはFV写真の上に透過ヘッダーを重ねるため、
     スクロール前は
       body.is-recruit-hero .l-header:not(.is-scrolled) .c-gnav__label 等 { color:#fff }
       同 .c-hamburger__line { background:#fff }
     となっている。
     ところがメニューの下地 .l-header__nav-area は background:#fff。
     **白背景に白文字・白い×ボタン**になり、開いても何も見えない。

     実測：メニュー展開後の .c-gnav__label の色 = rgb(255,255,255)

   ■ 対処
     メニューを開いている間は「写真の上」ではなくなるので、
     透過ヘッダー用の白指定を全部取り消して通常配色へ戻す。
     ロゴも白版→黒版に戻し、ヘッダー背景も白にしてメニューと地続きにする。
   ------------------------------------------------------------ */
body.is-recruit-hero.is-nav-open .l-header{background:#fff;border-bottom-color:var(--c-border)}
body.is-recruit-hero.is-nav-open .l-header:not(.is-scrolled) .c-gnav__label,
body.is-recruit-hero.is-nav-open .l-header:not(.is-scrolled) .c-gnav__sub,
body.is-recruit-hero.is-nav-open .l-header:not(.is-scrolled) .c-tel,
body.is-recruit-hero.is-nav-open .l-header:not(.is-scrolled) .c-tel__number{color:var(--c-heading)}
body.is-recruit-hero.is-nav-open .l-header:not(.is-scrolled) .c-hamburger__line{background:var(--c-heading)}
body.is-recruit-hero.is-nav-open .l-header:not(.is-scrolled) .l-header__logo-mark,
body.is-recruit-hero.is-nav-open .l-header:not(.is-scrolled) .l-header__logo-type{display:block}
body.is-recruit-hero.is-nav-open .l-header:not(.is-scrolled) .l-header__logo-mark--white,
body.is-recruit-hero.is-nav-open .l-header:not(.is-scrolled) .l-header__logo-type--white{display:none}

/* ------------------------------------------------------------
   ⑤ ハンバーガーメニューにTOPを追加
   ------------------------------------------------------------
   header.php の $kuroiwa_gnav に HOME を追加し、
   1025px以上（＝ハンバーガーが出ない幅）では隠す。
   PCはヘッダー左のロゴがTOPリンクなので重複するため。
   ------------------------------------------------------------ */
@media (min-width:1025px){
  .c-gnav__item--sp-only{display:none}
}

/* ------------------------------------------------------------
   ③ SPのフッターはコピーライトだけにする
   ------------------------------------------------------------
   ■ ボス判断（2026-07-28）
     「ハンバーガーメニューがあるのだから、フッターのリンク群は重複」。

   ■ 実測（375px幅）
     **949px → 68px（-881px）**  ← 2026-07-28 夜に測り直した確定値
     9ページすべてに同じ額が効く。

     ※ 初稿では「1,013px → 約90px」と書いていた。これは #29 で
       --sp-hero を 100→56px、--sp-card を 44→28px にする**前**の値。
       フッターは padding-top に --sp-hero、.c-footer-bottom の margin-top と
       .c-footer-grid の gap に --sp-card を使っているので、
       トークンを変えた時点で古い数値になっていた。
       **共通トークンを変えたら、そのトークンを使う箇所の実測値は全部古くなる。**

   ■ 判断の補足（残るリスクと、それを受容できる理由）
     Googleはモバイル版を索引する（モバイルファーストインデックス）ため、
     display:none にした住所・電話番号はSEO上の店舗情報シグナルとしては
     弱くなる。ただし、
       ・住所と電話は TOP ⑫ACCESS ／ 事務所案内 ／ お問い合わせ の
         各ページ本文に出ている（フッターだけの情報ではない）
       ・AIOSEO導入後に LocalBusiness の構造化データを入れる予定
     の2点があるので、フッターを畳んでも情報の欠落にはならない。

     ※ 4カラムのリンクだけ隠して事務所情報は残す、という中間案もある。
       戻したい場合は .c-footer-nav だけを display:none にすればよい。
   ------------------------------------------------------------ */
@media (max-width:767px){
  .l-footer{padding:24px 0}
  .l-footer .c-footer-grid{display:none}
  .c-footer-bottom{margin:0;padding:0;border:0}
  .c-footer-copyright{margin:0;text-align:center;font-size:11px}
}

/* ------------------------------------------------------------
   ⑥⑪⑧【不具合】SPで中身が左に寄って右が余る 3箇所 — 2026-07-28
   ------------------------------------------------------------
   ボス指摘「代表写真の左寄せは意図的？」「料金表の個人／法人が左寄せ」。
   **意図的ではなく、どちらも指定漏れ。** 実測で確定した。

   ■ 幅によって見え方が変わるので気づきにくかった
     440px（iPhone 16 Pro Max）で顕在化する。375pxではほぼ分からない。

   ┌ ⑥⑪ .p-greeting__media（事務所案内・採用の代表写真）
   │   max-width:320px は付いているが margin-inline:auto が無い。
   │     375px端末 … 中身の枠327px − 320px ＝ 右に7px（ほぼ気づかない）
   │     440px端末 … 中身の枠377px − 320px ＝ **右に57px** ← ボスが見たもの
   │   → margin-inline:auto を足して中央に置く。
   │
   └ ⑧ .p-fee__col（料金表「個人事業主のお客さま」「法人のお客さま」）
       .p-fee__grid は align-items:flex-start。
       767px以下で flex-direction:column に切り替わると、
       この flex-start が**交差軸＝横方向**の指定に変わり、
       子が内容幅（297px）まで縮んで左に寄る。
         440px端末 … 親377px に対して表297px ＝ **右に80px**
       → SPでは align-items:stretch にして横いっぱいに戻す。
         （PCの2カラムでは flex-start が正しいので上書きしない）

   ■ なぜ自動チェックで拾えなかったか
     これまでの機械チェックは「はみ出し」と「画面端への貼り付き」しか
     見ていなかった。**中身が親より狭くて片側に寄る**のは別の症状。
     §6の検証項目に「親に対して左右の余りが16px以上非対称な要素」を追加した。
   ------------------------------------------------------------ */
@media (max-width:767px){
  /* width:100% を必ず添えること。
     margin-inline:auto だけだと flex の stretch が解除され、
     中の <img loading="lazy"> が読み込まれるまで幅0に潰れる。
     （2026-07-28 に一度これで枠を0pxにしてしまい、実測で気づいて修正） */
  .p-greeting__media{width:100%;max-width:320px;margin-inline:auto}
  .p-fee__grid{align-items:stretch}
}

/* ------------------------------------------------------------
   ① SPの新着バー：2行・日付を右上（E案）— 2026-07-28
   ------------------------------------------------------------
   ■ ボス指摘（2回）
     1回目「NEWS お知らせ｜日付｜VIEW MORE が1行目に集中していて
            ごちゃついて見づらい」→ 2行に分割した
     2回目「2行にしたが、まだ模索中」

   ■ 2回目の原因分析
     行数ではなく **行の役割が混ざっていた** のが原因。
       1行目 … ラベルだけ
       2行目 … 日付 ＋ タイトル（メタ情報と本文が同居）
     さらに2行目を日付と分け合うため、タイトル枠が 288px しかなく
     440px幅でも19文字で切れていた。

   ■ 採用した形（E案）
       1行目 … NEWS お知らせ ────────── 2026.07.22（右端）
       2行目 … 記事タイトル（全幅・末尾は…）
     1行目＝メタ情報、2行目＝本文、と役割で分ける。

   ■ 実測（6案をブラウザで描画して比較）
     案                       バー高   タイトル枠   375 / 393 / 440px で入る字数
     現状（2行・日付が2行目）  96px    288px        14 / 16 / 19
     E 2行・日付を右上 ★採用   93px    377px        20 / 22 / 25
     B 2行・日付なし           96px    377px        20 / 22 / 25
     C 1行・NEWSバッジ         46px    243px        13 / 14 / 18
     D 1行・ラベルなし         51px    221px        10 / 11 / 14
     A 1行・フル               51px    190px         8 /  9 / 12
     → タイトル枠 288→377px（+31%）、高さは 96→93px でほぼ同じ。

   ■ 1行案（A・C・D）を採らなかった理由
     iPhone 15/16（393px）で 9〜14文字しか出ない。
     「年末調整の電子化に対応しま…」で切れ、
     帯の役割（何のお知らせか一目で分かる）を果たせない。
     46px と 93px の差 47px は FV直下の一度きりのコストで、
     可読性と引き換えにする価値が薄い。

   ■ B（日付なし）を次点にした理由
     税制改正・期限まわりのお知らせは「いつの情報か」が信頼に直結する。
     日付は帯に残す。

   ■ 3記事の自動回転を採らなかった理由
     WCAG 2.2 §2.2.2 Pause/Stop/Hide は Level A（最低基準）。
     5秒以上自動で動くものには一時停止操作が必須になり、
     そのボタンで帯がまたごちゃつく。
     3本見せる役割はページ下部の⑬お知らせセクションが既に持っている。

   ■ VIEW MORE を外してよい理由（1回目から継続）
     「一覧へ行く」導線はSPで3か所に重複している。
       ① この帯の VIEW MORE
       ② ページ下部の⑬お知らせセクションの「お知らせ一覧へ」ボタン
       ③ ハンバーガーメニューの NEWS
     PC（768px以上）は横幅に余裕があるのでそのまま残す。
   ------------------------------------------------------------ */
@media (max-width:767px){
  .c-newsbar__inner{padding-block:12px}
  .c-newsbar__more{display:none}
  /* .c-newsbar__latest を透明化して、中の3要素を
     .c-newsbar__inner 直下のフレックスアイテムに昇格させる。
     対象は <div>（リストでも表でもない）ので
     display:contents のアクセシビリティツリー欠落問題は起きない。 */
  .c-newsbar__latest{display:contents}
  .c-newsbar__label{order:1;flex:0 0 auto;margin:0}
  /* 日付は flex:1 0 auto で1行目の残り幅を占め、text-align:right で右端へ。
     ※ 0 0 auto にすると .c-newsbar__inner の justify-content:space-between が
       効いて似た見た目にはなるが、ラベル側の内部 gap の影響を受けて
       端末幅ごとに位置がぶれる。残り幅を持たせて右寄せするほうが安定する。
     メタ情報なので 13px→12px・opacity .8 で本文より一段落とす。 */
  .c-newsbar__date{order:2;flex:1 0 auto;margin:0;text-align:right;font-size:12px;opacity:.8}
  /* flex:1 0 100% で必ず2行目を占有し、全幅を使う。
     min-width:0 が無いとフレックスアイテムは内容幅より縮まないので
     ellipsis が効かない（必須）。
     white-space:nowrap を外すと長いタイトルで3行目に増える（実測 93→120px）。
     高さを固定したいので nowrap のまま残すこと。 */
  .c-newsbar__title{order:3;flex:1 0 100%;min-width:0;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ------------------------------------------------------------
   ② TOPのプラン3枚をSPで横スワイプにする（試験運用）— 2026-07-28
   ------------------------------------------------------------
   ■ ボス判断
     「トップのみ横スワイプにして様子見」。
     サービス案内・料金案内のプランは縦のまま。

   ■ TOPだけ横にしてよい理由
     TOPの3枚は「詳しくみる」への入口チップであって、
     ここで比較検討を完結させる場所ではない（本体は料金案内ページ）。
     取りこぼしのリスクが料金案内より小さい。

   ■ 横スワイプで必ず起きる問題と、その対策
     1. スワイプできると気づかれない
        → 1枚の幅を82%にして**次のカードの端を必ず見せる**（peek）。
          「まだ右に続いている」ことを見た目で伝える。
     2. キーボード・スクリーンリーダーで到達できない
        → スクロールコンテナに tabindex は付けず、中のリンクは
          もともとフォーカス可能なので順に辿れる。
          overflow:auto のコンテナはブラウザが自動でスクロールしてくれる。
     3. ページ全体が横に揺れる
        → overscroll-behavior-x:contain で内側に閉じ込める。

   ■ 元に戻す場合
     このブロックを消せば縦積みに戻る（767px以下の既存指定が生きる）。
   ------------------------------------------------------------ */
@media (max-width:767px){
  .p-pricing-teaser__plans{
    flex-direction:row;
    gap:12px;
    padding:0 var(--sp-page) 4px;
    margin-inline:calc(var(--sp-page) * -1);
    background:transparent;
    box-shadow:none;
    border-radius:0;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .p-pricing-teaser__plans::-webkit-scrollbar{display:none}
  .p-pricing-teaser__plans li{
    flex:0 0 82%;
    border:0;
    border-radius:var(--r-lg);
    background:var(--c-card);
    box-shadow:0 10px 28px rgba(var(--c-shadow-rgb),.22);
    overflow:hidden;
    scroll-snap-align:center;
  }
  .p-pricing-teaser__plans li:first-child{border-top:0}
  .c-plan-chip{padding:24px 18px}
}

/* ------------------------------------------------------------
   ⑩ 採用FVをSP専用の切り出しに差し替える — 2026-07-28
   ------------------------------------------------------------
   ■ 何が起きていたか（実測）
     PC用 recruit-hero.jpg は 2000×1093（比1.830）。
     SPのヒーローは 440×640（比0.664）なので、cover で
       0.664 ÷ 1.830 ＝ **横方向の36%しか映らない**
     結果、4人のうち左2人しか画面に入っていなかった。

   ■ 素材の制約（ボス提供の原本 2696×1796 で実測）
     4人が並ぶ範囲   x 612〜1925（1313px）
     頭頂〜足元      y 298〜1561
     縦長に切ると横が足りない。比0.664で切り出すと幅は
     1796×0.664＝1193px しか取れず、**1313pxの人物列が入らない**。
     → 原本の縦が足りないので、素直に切るだけでは全員入らない。

   ■ 対処
     1. 4人が全部入る最小の切り出し x600〜1920 / 全高（1320×1796・比0.735）
     2. 一番下の「芝だけ」の帯を上下反転しながら継ぎ足して
        比0.58（1320×2275）まで縦に伸ばす
        → どのSP幅でも画像のほうが枠より縦長になるので、
          cover が削るのは**下の芝だけ**。人物は必ず全員残る。
     3. 幅980px・JPEG quality72 で書き出し（249KB）
        440px端末・DPR3でも2.2倍相当なので実用上問題ない。

   ■ background-position を top にする理由
     人物は画像の上側79%にいる。center や bottom にすると
     画面が縦に長い端末で頭が切れる。

   ■ 継ぎ足した芝について
     靴の下端（原本 y1561）より下の、人物が写っていない帯だけを使い、
     反転して積んでいる。芝は方向性が無いので継ぎ目が出ない。
     最初、靴が写り込む320pxの帯を使ってしまい
     「芝の中に靴が並ぶ」画像になった。プレビューを見て修正済み。
   ------------------------------------------------------------ */
@media (max-width:767px){
  .p-recruit-hero{
    background-image:url(assets/img/recruit-hero-sp.jpg);
    background-position:center top;
  }
}

/* ============================================================
   2026-07-28 ボス指示 3件（横スワイプ全面展開／サムネ正方形／余白）
   ============================================================ */

/* ------------------------------------------------------------
   ① 料金プランは載っている場所すべてを横スワイプにする
   ------------------------------------------------------------
   TOPの試験運用（.p-pricing-teaser__plans）を採用と判断。
   料金案内・初めての方へ の .p-plans__list にも同じ挙動を広げる。

   ■ 対象
     .p-pricing-teaser__plans … TOP ／ サービス案内
     .p-plans__list          … 料金案内 ／ 初めての方へ

   ■ .c-plan は flex:1 1 0 なので、そのままだと横並びで潰れる。
     flex:0 0 82% に上書きして1枚ずつスナップさせる。

   ■ scroll-margin-top:96px を殺さない
     .c-plan には #light / #active / #consult のアンカーが付いており、
     他ページから飛んでくる導線がある。横スクロールコンテナの中でも
     ブラウザは対象を可視位置まで運んでくれる。
   ------------------------------------------------------------ */
@media (max-width:767px){
  .p-plans__list{
    flex-direction:row;
    /* 1024px以下で flex-wrap:wrap が入っているため必ず打ち消す。
       これが残っていると1枚82%のカードが1行ずつ折り返し、
       flex-direction:row なのに縦積みに見える（実測で判明）。 */
    flex-wrap:nowrap;
    gap:12px;
    padding:4px var(--sp-page);
    margin-inline:calc(var(--sp-page) * -1);
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .p-plans__list::-webkit-scrollbar{display:none}
  .c-plan{
    flex:0 0 82%;
    scroll-snap-align:center;
  }
}

/* ------------------------------------------------------------
   ② サービス詳細のサムネイルを正方形に近づける
   ------------------------------------------------------------
   ■ ボス指摘「画像が小さいので、極力正方形にして縦幅を確保」

   ■ 縦を伸ばしてもセクションは長くならない（実測）
     440px幅での1行の内訳
       行1 全体182px ＝ 本文180px ／ 画像110x64
       行3 全体212px ＝ 本文210px ／ 画像110x64
     **行の高さを決めているのは本文側**で、画像は余っている。
     画像を110x110にしても本文（180〜210px）を超えないので、
     セクション高は変わらない。空いている縦を使うだけ。

   ■ なぜ 116px ではなく 110px なのか（2026-07-28 訂正）
     元画像は 200×110。正方形の枠を 116px にすると
     object-fit:cover の実効倍率が max(116/200, 116/110) = **1.05倍**になり、
     「拡大率1.0倍以下」という自分で決めた基準（_docs/12 §6-13）を破る。
     一度116pxで実装し、全画像を走査して6枚とも1.05倍になっているのを
     実測して110pxに直した。
     **110px は元画像の短辺**なので倍率はちょうど1.00倍。
     切り取り範囲は116pxのときと同じ（横の45%を落として中央110×110を使う）で、
     枠が6px小さくなるだけ。
   ------------------------------------------------------------ */
@media (max-width:767px){
  .c-svc-row__media{height:110px}
}

/* ------------------------------------------------------------
   ③ 代表挨拶：写真と本文の間を詰める
   ------------------------------------------------------------
   ■ 実測（440px）
     写真の下端と本文の間 ＝ 28px（.p-greeting__row の row-gap＝--sp-card）

   ■ なぜ「空きすぎ」に見えるか（仮説）
     写真は max-width:320px で中央寄せ、本文は横いっぱい（377px）。
     左右の始点が揃っていないぶん、縦の28pxが実際より広く見える。
     縦を16pxに詰めて、写真と本文をひとまとまりに見せる。
   ------------------------------------------------------------ */
@media (max-width:767px){
  .p-greeting__row{gap:16px}
}

/* ------------------------------------------------------------
   ③【不具合】採用ページの代表写真の下に157pxの空白 — 2026-07-28
   ------------------------------------------------------------
   ■ ボス指摘「全然余白ありまくりじゃん」→ そのとおりでした。
     前回16pxに詰めたのは **事務所案内のほう**。採用ページは別の原因で
     空いていたので、あの修正では効いていなかった。測る対象を間違えた。

   ■ 原因（440px実測）
       .p-greeting__media の枠   高さ440px
       中の <img>                高さ283px
       → 画像の下に **157pxの空白**。リード文との実距離は173px。

     犯人は 776行目の
       body.is-recruit-hero .p-greeting__media{flex-basis:440px}
     PCの横並び（flex-direction:row）では flex-basis＝**幅**440px。
     SPで縦並び（column）に変わると、同じ指定が **高さ**440px になる。
     767px以下用の .p-greeting__media{flex-basis:auto} は書いてあるが、
     body.is-recruit-hero が付くこちらのほうが詳細度が高く、
     しかもメディアクエリの外なので全幅で勝ってしまう。

   ■ これは⑧（料金表の左寄せ）と同じ型
     「PC用に書いた flex の指定が、方向が変わった瞬間に別の意味になる」。
     §6の検証項目に「flex-direction が切り替わるコンテナの
     flex-basis / align-items を全部洗う」を足すこと。

   ■ 事務所案内（/about/）は枠415px＝画像415pxで元から正常。
   ------------------------------------------------------------ */
@media (max-width:767px){
  body.is-recruit-hero .p-greeting__media{flex-basis:auto}
}

/* ------------------------------------------------------------
   ② サービス詳細のサムネイルを縦中央にそろえる
   ------------------------------------------------------------
   行の高さは本文が決めていて、サムネイル（110×110）は上に貼り付いていた。
   本文が3〜4行になる行では、サムネの下に空きができて重心がずれる。
   align-self:center で行の中央に置く。
   ------------------------------------------------------------ */
@media (max-width:767px){
  .c-svc-row__media{align-self:center;margin:12px 0 12px 12px}
}

/* ------------------------------------------------------------
   ① 採用FV：顔にテキストを重ねない
   ------------------------------------------------------------
   ■ ボス指摘「全員の顔が見えるくらいのほうがいい」

   ■ まず事実：横幅が同じなら、人物の大きさは変えられない
     写真は cover で幅に合わせて拡大される。
     切り出し幅1320px → 440px端末では常に0.333倍。
     人物を大きくするには切り出しを狭める＝誰かが画面から消える。
     **440px幅で「4人全員」と「顔が大きい」は両立しない。**

   ■ できるのは「顔にテキストを重ねないこと」
     現状（440×640・テキストは上下中央）
       人物 … 上から99px（頭）〜520px（足元）
       文字 … 上から52px〜589px
       → **顔の位置にちょうど文字が乗っていた。**

     ヒーローを760pxまで伸ばし、テキストを下寄せ（align-items:flex-end）に
     すると、上の約200pxが写真だけの領域になり顔が抜ける。

   ■ 高さについて
     TOPのFVは575px、採用は640px。実は採用のほうが元から高い。
     ボスが「トップと同じでいい＝もっと高くていい」という趣旨と受け取り、
     min(80svh,760px) にした。440×956端末で760px＝画面の80%。
     戻す場合はこのブロックを消せば640pxに戻る。
   ------------------------------------------------------------ */
@media (max-width:767px){
  .p-recruit-hero{min-height:min(80svh,760px);align-items:flex-end}
  .p-recruit-hero__inner{padding:96px 24px 44px}
}

/* ------------------------------------------------------------
   【監査で発見】初めての方バナー（.c-first-banner）の空白 — 2026-07-28
   ------------------------------------------------------------
   flex方向が切り替わるコンテナを全ページ機械監査して見つけた1件。

   ■ 症状（440px実測）
     .c-first-banner__body  実高373px ／ 中身273px → **100pxの余り**
     justify-content:center なので、上下に約50pxずつ空白が入っていた。

   ■ 原因
     .c-first-banner__body{flex:1 1 47%}
     .c-first-banner__media{flex:1 1 53%}
     PCの横並びでは 47%:53% の**幅**配分。
     SPで縦並びになると同じ指定が**高さ**の配分になり、
     flex-grow:1 が中身より大きい高さを配ってしまう。

   ■ 対処
     SPでは伸縮させず、中身なりの高さにする（flex:0 0 auto）。
     写真は高さを直接指定する（min-height:200px が既にあるので揃える）。
     内側の余白 44px/40px もPC用の値なので、SPは 28px/24px に。

   ■ これで「PC用のflex指定がSPで別の意味になる」型は
     ⑧料金表 ／ ③採用の代表写真 ／ プランのflex-wrap ／ 本件 の4件。
     いずれも横スクロールを起こさないので、既存の自動チェックでは
     素通りしていた。検証手順に監査スクリプトを追加する（§6-16）。
   ------------------------------------------------------------ */
@media (max-width:767px){
  .c-first-banner__body{flex:0 0 auto;padding:28px 24px;gap:10px}
  .c-first-banner__media{flex:0 0 200px}
}

/* ============================================================
   タブレット帯（768〜1024px）— 2026-07-29
   ------------------------------------------------------------
   ■ なぜこのブロックが必要になったか

     このテーマのブレークポイントは2つある。
       767/768px … レイアウトの切替点（1カラム ⇔ 複数カラム）
       1024/1025px … UIの切替点（ハンバーガー ⇔ グローバルナビ）

     ところが「1カラムに落とす」指定の多くが
     **@media (max-width:1024px) に書かれていた**。
     スマホを想定して書いた値が、タブレットにもそのまま効いていたということ。

     結果、768〜1024px は
       ・SPの詰め（max-width:767px）は効かない
       ・PCの多カラム（min-width:1025px）も効かない
     という**素通しの帯**になっていた。

   ■ 実測（8ページ合計・scrollHeight）
       SP 375px       57,702px
       タブレット 768px  64,533px  ← 3つの中で一番長い
       PC 1440px      50,243px
     幅が広いのに一番縦に長い、という倒錯した状態だった。
     トップページは 375pxで11,610px に対し 768pxで14,878px。

   ■ このブロックの方針
     **新しいレイアウトを発明しない。**
     ベース（PC）の指定がもともと横並び・多カラムなので、
     max-width:1024px が上書きしていたものを**戻す**だけにしている。
     比率だけは 768px 幅に合わせて調整した（PCの56〜60%は本文が狭くなりすぎるため46%に）。

   ■ SPとPCへの影響
     min-width:768px なので **375px以下には一切届かない**。
     max-width:1024px なので **1025px以上にも届かない**。
     ソース順に関係なく安全。

   ■ 注意（次に触る人へ）
     ここに書いた値を変えるときは、必ず 768 / 834 / 1024px の3幅で確認すること。
     834px（iPad Pro 11インチ縦）は 768px と 1024px の中間で、
     **2列の折り返しが変わる境目に当たりやすい**。
   ============================================================ */
@media (min-width:768px) and (max-width:1024px){

  /* --- A. 写真＋本文の横並びを復活 -------------------------
     いずれもベースは横並び。max-width:1024px が column にしていた。
     メディア側の比率は PC の 56〜60% では本文が 260px 前後まで痩せるため、
     46%（＝約300px）に落として本文に 353px を確保している。 */
  .p-about__inner{flex-direction:row}
  .p-about__media{width:auto;flex:0 0 46%}

  .c-strength-row{flex-direction:row}
  .p-strengths__list li:nth-child(2),
  .p-cases__list li:nth-child(2){flex-direction:row-reverse}
  .c-strength-row__media{width:auto;flex:0 0 46%}

  .c-mvv-row{flex-direction:row}
  .c-mvv-row--reverse{flex-direction:row-reverse}
  .c-mvv-row__media{width:auto;flex:0 0 46%}

  /* 代表挨拶。PCの 340px だと本文が 285px になるので 280px に。
     body.is-recruit-hero の 440px 指定はメディアクエリの外にあり、
     ここで打ち消さないと採用ページだけ本文が 185px まで潰れる（§3-19 #1 と同じ地雷）。 */
  .p-greeting__row{flex-direction:row;align-items:flex-start;max-width:none}
  .p-greeting__media{flex:0 0 280px;max-width:280px}
  body.is-recruit-hero .p-greeting__media{flex:0 0 280px}

  .c-first-banner{flex-direction:row}
  .c-first-banner__media{min-height:0;flex:0 0 42%}

  /* --- B. 1カラムに落ちていたグリッドを2列へ ---------------
     いずれもベースが2列。653px あれば1枚 313px 確保できる。 */
  .p-forwho__list{grid-template-columns:repeat(2,1fr)}
  .p-services__main-list{grid-template-columns:repeat(2,1fr)}
  .p-access__grid{grid-template-columns:1fr 1fr}

  /* --- C. 幅を捨てていた固定値を解除 -----------------------
     .p-whyus__stage は PC では 944×800 の絶対配置ステージ。
     1024px以下では縦積みにするフォールバックが入っているが、
     そこに max-width:600px が付いていたため、768px幅で 153px を捨てていた。
     解除したうえで2列に。5枚なので 2+2+1 になる。
     .container の外にある要素なので padding-inline を自分で持たせること（§3-17）。 */
  /* ⚠ gap を明示している理由（2026-07-29 実測で判明）
     1024px以下のフォールバックは gap:var(--sp-card)（＝44px）だが、
     カード幅の計算に --sp-gap（＝20px）を使ってしまい、
     316.5px × 2 + 44px = 677px > 653px となって**2列指定なのに1枚ずつ折り返していた**。
     見た目は「幅を空けたまま縦積み」で、横スクロールも出ないので気づきにくい。
     **calc で列幅を出すときは、その要素の gap と必ず同じ変数を使うこと。** */
  .p-whyus__stage{max-width:none;padding-inline:var(--sp-page);flex-direction:row;flex-wrap:wrap;gap:var(--sp-gap)}
  .c-whyus-card{width:calc((100% - var(--sp-gap)) / 2)}

  /* 募集要項のステップも max-width:400px で幅を捨てていた */
  .p-jobdesc__path .c-path-step{max-width:none}

  /* --- D. カードの列数 -------------------------------------
     11の姿勢: 2列(317px) → 3列(204px)。見出しは1行のままであることを実測確認済み。 */
  .c-value-card{flex-basis:calc((100% - var(--sp-gap) * 2) / 3)}

  /* 料金プラン: 2＋1 → 3列。
     ■ なぜ縦に長くなる方を選ばなかったか
       2列だと3枚目（コンサルプラン）だけが次の行に単独で残り、
       **3プランを見比べるという料金表の目的が果たせない**。
       3列にすると1枚204pxで文字の折り返しは増えるが、
       セクション高は 796 → 542px（-32%）で、かつ横に並んで比較できる。
     ■ min-width:0 が必須
       flex アイテムは既定で内容幅より縮まないため、
       これが無いと3列指定でもはみ出す。 */
  .p-plans__list,.p-support__list,.p-fee__grid{flex-direction:row}
  .p-plans__list{flex-wrap:nowrap}
  .c-plan{flex:1 1 0;min-width:0}
}

/* ------------------------------------------------------------
   採用「選考の流れ」（.p-flow--select）はSPで中央寄せ — 2026-07-29
   ------------------------------------------------------------
   ■ ボス指摘
     「選考の流れの01-05が左寄せになっているので中央寄せにしたほうがいい」

   ■ なぜ左寄せだったか
     2026-07-28 に .p-flow を「左タイムライン」に作り替えた（§3-18）。
     あれは **TOP と /first/ の「ご相談の流れ」** に最適化した形で、
     1ステップが アイコン＋見出し＋補足＋説明文 の4要素あるため、
     丸を左に寄せて右側を本文に使うのが正しかった。

     ところが採用の「選考の流れ」（.p-flow--select）は
     **丸とラベルの2要素しか無い**（実測: .c-flow-step の子は circle と label のみ）。
     同じ左タイムラインを当てると、375px幅で
       丸 24..94px ／ ラベル 110..336px
     となり、ラベルの右に 200px 以上の空白が残る。
     **同じコンポーネントでも、中身の量が違えば最適な形は変わる。**

   ■ 直し方の検討（3案を実物に当てて比較・2026-07-29）

     ① ラベルを丸の真下に置いて中央寄せ         788px
        → **不採用。**ラベルが自分の丸と次の丸のちょうど中間に来るため、
          どちらに属するテキストか読み取れない（近接の原則が崩れる）。
          ボス指摘「今のままでは見づらい」はこれ。
     ② 丸を88pxに拡大してラベルを直下           919px
        → **不採用。**①よりマシだがラベルの帰属は依然あいまいで、
          しかも3案で一番縦に長い。
     ③ **丸＋ラベルの横並びを1かたまりとして中央に置く  648px** ← 採用
        → ラベルが必ず自分の丸の真横に来るので帰属が一意。
          3案で一番短く、一番読みやすい。

   ■ ③の実装のポイント
     リストに width:max-content を与えて、**中身の最大幅にリストを縮める**。
     そのうえで margin-inline:auto で中央に置く。
     こうすると
       ・各ステップの丸は全部同じX座標に揃う（線が丸を貫ける）
       ・かたまり全体は画面中央に来る
     という両立ができる。
     ステップごとに個別で中央寄せすると、ラベルの文字数で丸のX座標がずれて
     **線が丸から外れる**（§3-18 で直したのと同じ壊れ方に戻る）ので、
     必ずリスト単位で中央に寄せること。

     max-width:100% は保険。ラベルが長くなって
     max-content が画面幅を超えたときに横スクロールさせないため。
     実測: リスト幅203px（最長ラベル「面接（1〜2回）」）、320px端末でも収まる。

   ■ TOP・/first/ の「ご相談の流れ」は変えていない
     セレクタを .p-flow--select に限定している。
     あちらは アイコン＋見出し＋補足＋説明文 の4要素があるので、
     左タイムラインのまま右側を本文に使うのが正しい。
   ------------------------------------------------------------ */
@media (max-width:767px){
  .p-flow--select .p-flow__list{
    width:max-content;
    max-width:100%;
    margin-inline:auto;
    gap:18px;
  }
  /* 線は丸の中心（左から35px）。丸の半径ぶん上下を詰めて 01 と 05 の中心を結ぶ */
  .p-flow--select .p-flow__list::before{left:35px;top:35px;bottom:35px}
  .p-flow--select .c-flow-step{
    display:grid;
    grid-template-columns:70px auto;
    row-gap:0;
    column-gap:18px;
    align-items:center;
    text-align:left;
  }
  .p-flow--select .c-flow-step__circle{grid-column:1}
  .p-flow--select .c-flow-step__label{grid-column:2;text-align:left;font-size:16px}
}

/* ------------------------------------------------------------
   お問い合わせ 窓口カード（.p-contact-desk）をSPで横2列に — 2026-07-29
   ------------------------------------------------------------
   ■ ボス指摘
     「新規のご相談はこちら の下のカードは横2列のほうがいいかも」

   ■ 何が変わるか
     「お電話」と「お問い合わせフォーム」の2枚。
     縦積み（837px）→ 横2列（529px）。**-308px**。
     2つの窓口を**並べて比較できる**ようになるのが本題で、
     高さが縮むのは副産物。

   ■ いちばん難しかったところ: 電話番号
     このページで最も重要なCTAは電話番号。
     2列にするとカード内側が 375px幅で 138px しか無く、
     現状の 26px（実測 195px）では**「099-800-」「9189」と2行に折れる**。
     電話番号が途中で改行されるのは、税理士事務所のサイトとして最悪の壊れ方。

     実測した必要幅（Poppins Bold・letter-spacing .02em）
       17px→127px  18px→135  19px→142  20px→150  21px→157  22px→165  26px→195
     カード内側幅
       320px→内側111  375px→138  393px→147  430px→165  440px→170  767px→334

     固定値だと 375px に合わせて全端末が小さくなるので、
     **clamp(17px, 4.7vw, 26px)** で幅に追従させた。
       375px → 17.6px（131px）  393px → 18.5px（138px）
       430px → 20.2px（151px）  553px以上 → 26px で頭打ち
     いずれもカード内側に収まる。white-space:nowrap を添えて、
     万一はみ出したら**折り返さずに検出できる**ようにしてある。

   ■ タップターゲット
     文字を小さくすると電話リンクの高さが 22px 前後まで落ち、
     WCAG 2.5.8（AA・24×24）を割る。
     min-height:44px（2.5.5 AAA）を与えて、
     **最重要CTAだけは最高基準を満たす**ようにした。

   ■ 320px について
     内側111pxで、17pxでも127px必要。**収まらない。**
     359px以下は1列のまま（認定カードと同じ考え方・§3-15）。
   ------------------------------------------------------------ */
@media (min-width:360px) and (max-width:767px){
  .p-contact-desk__list{grid-template-columns:repeat(2,1fr);gap:12px}
  .c-desk-card{padding:18px 10px;gap:8px}
  .c-desk-card__icon{width:56px;height:56px}
  .c-desk-card__icon svg{width:26px;height:26px}
  .c-desk-card__title{font-size:13px}
  .c-desk-card__tel a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    font-size:clamp(17px, 4.7vw, 26px);
    letter-spacing:0;
    white-space:nowrap;
  }
  .c-desk-card__point{font-size:12px;line-height:1.7}
  .c-desk-card__jump{margin-top:2px;padding:10px 12px;font-size:12px}
}

/* ============================================================
   採用FV：背景画像だけを固定してテキストは流す（パララックス）
   2026-07-29 ボス指示
   ------------------------------------------------------------
   ■ 要件
     「FVの文字はスクロール／スワイプとともに上がっていく。背景固定は画像のみ」

   ■ なぜ background-attachment:fixed を使わないのか（2つ）

     ① **iOS Safari が実装していない。**
        7/29 にパララックス帯をタブレットでも切ったのと同じ理由。
        しかも単に効かないだけでなく、fixed にすると背景の基準が
        「要素」から「ビューポート」に変わるため、
        iPhone では `recruit-hero-sp.jpg`（4人が入るように作った画像）が
        別の比率で切り直されて構図が壊れる。
     ② **描画コスト。** fixed 背景は GPU 合成できず、スクロールのたびに再描画が走る。
        このページの LCP 要素で、ページ全長は10,264px（PC）。一番やってはいけない場所。

   ■ 採った方法：背景を独立要素にして position:sticky
     .p-recruit-hero-wrap（sticky が効く区間）
       └ .p-recruit-hero__bg   position:sticky; top:0; height:100svh
       └ .p-recruit-hero       通常フロー（テキストはこの中）
     背景はビューポート上端に貼り付いたまま、テキストだけが上へ流れる。
     GPU 合成なので軽く、iOS でも動く。

     margin-bottom:-100svh は「高さを持たせつつレイアウトには影響させない」ため。
     これが無いと背景の100svhぶんだけヒーローが下にずれる。

     clip-path:inset(0) は背景をラッパーの範囲に切り取るため。
     **overflow:hidden ではダメ。**祖先に overflow:hidden があると
     position:sticky が効かなくなる（§3-21 でヘッダーが消えたのと同じ原理）。
     clip-path はスクロールコンテナを作らないので sticky を殺さない。

   ■ 実測（1000×800 のビューポート）
       scroll   背景の位置   見出しの位置
         0px      top 0        top  94px
       250px      top 0        top -156px   ← 背景は動かず、文字だけ上へ
       500px      top 0        top -406px
       750px      top -190     top -656px   ← ヒーローを抜けたので背景も流れ始める

   ■ SP（767px以下）では使わない — これは妥協ではなく計算の結果
     現在:  ヒーロー 440×760、SP画像 980×1689（比0.580）
            → 440/760 = 0.579 でぴったり一致。**cover で幅100%・高さ100%が表示される。**
            7/28 に「4人全員の顔が入るように」と比率を合わせて作ったのがこれ。
     パララックスにすると背景の高さが 100svh（440×956・比0.460）になり、
            → **幅の21%が切り落とされ、両端の2人が画面外に出る。**
     元写真（2696×1796）から比0.46の画像は作れない。
       ・下に1,074px継ぎ足す → 芝生だらけになる
       ・両端を削る → 人が欠ける
     **「4人全員が入ること」のほうがパララックスより価値が高い**（7/28のボス判断）。
     加えてSPはヒーローがほぼ全画面なので、そもそも視差の可動域がほとんど無い。

     → SPでパララックスもやりたい場合は、SP画像を比0.46で作り直すのが先。
        そのときは下に芝生を継ぎ足す形になる（テキストは下寄せなので、
        文字が芝生に乗るぶんには成立する）。

   ■ prefers-reduced-motion
     パララックスは動きに敏感な人のトリガーになりうるので、
     reduce では従来どおり（背景は要素に固定＝視差なし）に戻す。
   ============================================================ */
.p-recruit-hero-wrap{position:relative}
.p-recruit-hero__bg{display:none}   /* 既定は無効。SPはここで止まる */

@media (min-width:768px){
  .p-recruit-hero-wrap{clip-path:inset(0)}
  .p-recruit-hero__bg{
    display:block;
    position:sticky;
    top:0;
    height:100svh;
    margin-bottom:-100svh;
    z-index:0;
    background:url(assets/img/recruit-hero.jpg) center/cover no-repeat;
  }
  /* 文字の可読性を守るグラデーション。ヒーロー側の ::before から移設した
     （背景と一緒に止まらないと、スクロール中に濃度がずれて見えるため） */
  .p-recruit-hero__bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(100deg,rgba(var(--c-scrim-recruit-rgb),.46) 0%,rgba(var(--c-scrim-recruit-rgb),.24) 34%,rgba(var(--c-scrim-recruit-rgb),0) 58%);
  }
  .p-recruit-hero{position:relative;z-index:1;background-image:none;background-color:transparent}
  .p-recruit-hero::before{display:none}
}

@media (min-width:768px) and (prefers-reduced-motion:reduce){
  .p-recruit-hero-wrap{clip-path:none}
  .p-recruit-hero__bg{display:none}
  .p-recruit-hero{background-image:url(assets/img/recruit-hero.jpg)}
  .p-recruit-hero::before{display:block}
}