/*
Theme Name: ways japan V4
Theme URI: https://ways-japan.co.jp
Author: BIND THREE
Description: 就労継続支援A型事業所 ways japan 公式サイト デザイン案V4（smilewith参照）ブロックテーマ
Version: 0.3.16
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: ways-japan-v4
*/

/* Hallmark · macrostructure: photographic editorial · genre: calm welfare service · tone: soft
 * theme: custom · vibe: "光のある仕事場・静かな一歩・清潔な深緑"
 * axes: low-chroma bands / sans + statement serif / full-bleed photographic hero
 * display: Zen Kaku Gothic New · statement: Noto Serif JP
 * reference principle: smilewith.co.jp（固有資産・文言・マスコットは非流用）
 *
 * rev 2026-09-02（土台は維持し4点のみ改訂）
 *   1. 主要枠の画像化 — 既存 assets/*.svg（均一な太線の幾何学線画）は流用せず、
 *      にじみ・揺れる輪郭・やわらかいグラデーションで描き直した15点に差し替え。
 *   2. 垂直リズム — 隣接セクションの padding 二重積みをやめ --sec-gap で総距離を管理。
 *   3. 図版と本文量の釣り合い — work-item を 1.3fr/0.7fr にし図版に上限幅。
 *      本文は client-input-20260830.md の範囲内で加筆（事実の創作なし）。
 *   4. ロゴ — 描き起こしをやめ実素材 logo-h.png を読み込む。
 *
 * rev2 2026-09-02（レビュー指摘の是正）
 *   1. ご利用の流れ — 先方確定原稿の6ステップへ戻した。分割・統合・改称をやめ、
 *      欠落していた「STEP05 利用契約・雇用契約」を復帰（A型は雇用契約の締結が制度上の核）。
 *   2. FV画像 — 実写風のイメージ画像（AI生成）を使う前提に注記を合わせた。
 *   3. モック注記の分離 — .mocknote / .dummy-band__label を本文と別体裁にし、
 *      公開文（サイトに載る文章）と確認用の注記が混ざらないようにした。
 *   4. 未開所の事実整合 — 現在形の断定を開所予定の表現へ。理念は先方確定の言葉に戻した。
 *      ※ この「開所予定の表現へ」は2026-09-13の佐伯決定で失効。開所日は
 *        2026年10月1日の言い切りに統一した（Version 0.3.12）。
 *   5. アクセシビリティ — 見出しレベルの飛び・タップ44px・コントラスト・SP固定CTAの重なりを是正。
 *   6. theme.json 整合 — フォント5段階/余白7段階/レイアウト幅へ寄せた（残りは報告に列挙）。
 *
 * rev3 2026-09-02（デザイン案 v4）
 *   1. FVを左右分割から大判写真＋オーバーレイへ変更し、入口の情報量を圧縮。
 *   2. 全面クリーム／丸ゴシック／カード反復をやめ、白・薄灰・薄緑の面差へ再設計。
 *   3. 通常見出しを中太ゴシック、理念文だけ明朝へ分離。
 *   4. 3つの入口を「1分でわかるWAYS」の一体型導線へ変更。
 *   5. 生成済みの実写風イメージ写真を施設・Instagramへ配置し、写真と図版の役割を明確化。
 * rev4 2026-09-27（橋本様9/27ご依頼・Version 0.3.16）
 *   FV写真が暗く見えるとのご指摘。0.3.13〜0.3.15の文字背景・グレー面の調整は佐伯判断で取り消し、
 *   0.3.12の構成に戻したうえで写真そのものの明るさだけを上げる（.fv__media img の filter）。
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 */

/* ============ tokens ============ */
:root{
  /* palette — theme.json の10色 ＋ 白 #FFFFFF と濃緑 #194B38 の2色。
     この2色は theme.json のパレット未収載のため、実装フェーズで12色に追加する前提。
     （追加の可否は先方ご確認事項。theme.json の実ファイルは本モックでは変更していない） */
  --c-brand:#21634A;
  --c-brand-deep:#194B38;
  --c-mint:#EAF4ED;
  --c-mint-chip:#DCEDE2;
  --c-cream:#F2F4F3;
  --c-apricot:#F1C95B;
  --c-apricot-chip:#FFF1CC;
  --c-paper:#FCFCFA;
  --c-ink:#34332F;
  --c-muted:#686761;
  --c-orange:#C87525;
  /* 派生（不透明度のみ・新色ではない） */
  --c-line:rgba(59,53,44,.12);
  --c-line-soft:rgba(59,53,44,.07);
  --c-shadow:rgba(59,53,44,.10);
  --c-shadow-soft:rgba(59,53,44,.05);
  --c-focus:#21634A;

  --font-body:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
  --font-display:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
  --font-statement:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;

  /* 本文17px／行間1.9 は据え置き（読み手＝ご家族50〜70代）。
     ●印は theme.json の fontSizes（13/17/21/34/52 の5段階）と一致する値。
     一致しない値はテーマCSS固定＝ブロックエディタからは選べない（一覧は報告書に記載）。 */
  --text-xs:13px;    /* ● Small   */
  --text-sm:15px;    /*   チップ・キャプション等のラベル専用。本文には使わない */
  --text-body:17px;  /* ● Body    */
  --text-lg:21px;    /* ● Medium  */
  --text-h3:var(--text-lg);
  --text-h2-quiet:clamp(24px,2.4vw,30px);
  --text-h2-loud:clamp(28px,3.2vw,38px);
  --text-statement:clamp(28px,3.4vw,42px);
  --text-h1:clamp(40px,3.5vw,50px);
  --text-numeral:clamp(30px,3.4vw,42px);    /* STEP番号の装飾数字（テーマCSS固定） */

  /* 余白 — theme.json の spacingSizes（8/12/16/24/40/64/96 の7段階）と同じ値 */
  --space-2xs:8px; --space-xs:12px; --space-s:16px; --space-m:24px;
  --space-l:40px; --space-xl:64px; --space-2xl:96px;

  /* 隣接セクション間の総距離。各セクションはこの半分を上下に持つ。
     7段階の合成で作り、段階外の数値を持ち込まない */
  --sec-gap:var(--space-2xl);

  --radius-s:6px; --radius-m:10px; --radius-l:16px; --radius-pill:999px;
  /* theme.json layout: contentSize 1240px / wideSize 1400px と一致させる */
  --wrap:1180px; --wrap-wide:1400px; --wrap-narrow:760px;

  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --dur-fast:160ms; --dur-mid:280ms; --dur-slow:520ms;
}

/* ============ base ============ */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--c-paper);
  color:var(--c-ink);
  font-family:var(--font-body);
  font-size:var(--text-body);
  line-height:1.82;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-align:left;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;font-style:normal;line-height:1.5;margin:0;overflow-wrap:anywhere;min-width:0}
p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-brand);text-underline-offset:.22em}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--c-focus);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--space-m)}
.wrap--wide{max-width:var(--wrap-wide)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--c-brand);color:#fff;padding:12px 20px;z-index:200;border-radius:0 0 var(--radius-s) 0}
.skip:focus{left:0}

/* ============ 見出しのリズム ============ */
/* 大セクション＝下線あり・大きい／小セクション＝下線なし・小さい。等価に並べない */
.h-loud{font-size:var(--text-h2-loud);letter-spacing:.035em}
.h-quiet{font-size:var(--text-h2-quiet);letter-spacing:.035em}
.h-loud::after{
  content:"";display:block;width:56px;height:3px;border-radius:2px;
  margin-top:var(--space-s);background:var(--c-apricot);
}
.lead{color:var(--c-muted);font-size:var(--text-body);margin-top:var(--space-xs);max-width:62ch}
.marker{
  background:linear-gradient(transparent 62%,var(--c-apricot-chip) 62%);
  padding-inline:.08em;
}

.note-sm{margin-top:var(--space-s);color:var(--c-muted);font-size:var(--text-sm)}
.mt-m{margin-top:var(--space-m)}
.mt-l{margin-top:var(--space-l)}
.cond__cell .dd--text{font-size:var(--text-body)}

/* ============ セクション余白 ============ */
/* 隣り合うセクションの padding が二重に積まれて間延びしていたため、
   総距離を --sec-gap で決め、各セクションはその半分だけを持つ */
.sec{padding-block:var(--sec-gap)}
.sec--tight{padding-block:calc(var(--sec-gap) * .68)}
.sec--tint{background:var(--c-cream);padding-block:calc(var(--sec-gap) * .78)}
.sec-head{margin-bottom:var(--space-l)}
.sec--tight .sec-head{margin-bottom:var(--space-m)}

/* ============ ボタン ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:13px 28px;border-radius:var(--radius-pill);
  font-family:var(--font-display);font-weight:500;font-size:var(--text-body);
  text-decoration:none;white-space:nowrap;border:2px solid transparent;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.btn--primary{background:var(--c-brand);color:#fff;box-shadow:0 9px 22px -12px var(--c-brand)}
.btn--primary:hover{background:var(--c-brand-deep);transform:translateY(-2px);box-shadow:0 12px 24px -10px var(--c-brand)}
.btn--primary:active{transform:translateY(0)}
.btn--outline{background:transparent;color:var(--c-brand);border-color:var(--c-brand)}
.btn--outline:hover{background:var(--c-mint);transform:translateY(-2px)}
.btn--outline:active{transform:translateY(0)}
.btn--onbrand{background:#fff;color:var(--c-brand)}
.btn--onbrand:hover{background:var(--c-mint);transform:translateY(-2px)}
.btn--ghost-onbrand{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--ghost-onbrand:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.btn .arw{transition:transform var(--dur-fast) var(--ease-out)}
.btn:hover .arw{transform:translateX(3px)}
.tlink{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-family:var(--font-display);font-weight:700;color:var(--c-brand);text-decoration:none;
  white-space:nowrap;
}
.tlink:hover{text-decoration:underline}
.tlink:hover .arw{transform:translateX(3px)}
.tlink .arw{transition:transform var(--dur-fast) var(--ease-out)}

/* ============ チップ ============ */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-block;padding:7px 16px;border-radius:var(--radius-pill);
  font-size:var(--text-sm);line-height:1.6;font-weight:500;color:var(--c-ink);
}
.chip--mint{background:var(--c-mint-chip)}
.chip--apricot{background:var(--c-apricot-chip)}
.chip--open{background:var(--c-brand);color:#fff;font-family:var(--font-display);font-weight:700}
.chip--line{background:transparent;border:1px solid var(--c-line);color:var(--c-muted)}

/* ============ カード（枠線ではなく淡い影で立てる） ============ */
.card{
  background:#fff;border-radius:var(--radius-m);padding:var(--space-l);
  border:1px solid var(--c-line-soft);box-shadow:none;
  transition:transform var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid) var(--ease-out);
}

/* ============ 画像枠 ============ */
/* 描き起こしたイラスト（.ph--art）と、実写画像の予定地（.ph--photo）を視覚的に分ける */
.ph{position:relative;border-radius:var(--radius-l);overflow:hidden;isolation:isolate}
/* 背景と同じ紙色なので、FVの写真と同じ影で「作品」として立たせる */
.ph--art{
  background:var(--c-paper);
  box-shadow:inset 0 0 0 1px rgba(59,53,44,.08),
             0 2px 4px var(--c-shadow-soft),
             0 18px 34px -26px var(--c-shadow);
}
.ph--art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* 実写風＝暖かいグレージュ＋光の当たり。無彩色にすると「画像が壊れている」ように見える。
   ここで使う #EDE7DC / #E3DCCF / #EAE3D6 は「まだ画像が入っていない枠」を示すための
   モック専用色。実装時は写真そのものに置き換わるため、テーマのパレットには入らない */
.ph--photo{
  background:
    radial-gradient(58% 62% at 30% 24%,rgba(255,251,243,.95) 0%,rgba(255,251,243,0) 66%),
    radial-gradient(48% 54% at 82% 78%,rgba(234,246,238,.7) 0%,rgba(234,246,238,0) 70%),
    linear-gradient(150deg,#EDE7DC 0%,#E3DCCF 52%,#EAE3D6 100%);
  box-shadow:inset 0 0 0 1px rgba(59,53,44,.14);
}
.ph--photo::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:repeating-linear-gradient(135deg,rgba(59,53,44,.045) 0 1px,transparent 1px 12px);
}

/* 実写画像の予定地：中央に理由を書いて「空き枠」に見せない */
.ph__note{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:var(--space-s);text-align:center;
  /* muted だと枠のグレージュ地に対して 4.10:1 で AA 未達だったため ink に上げる */
  color:var(--c-ink);font-size:var(--text-xs);line-height:1.75;
}
.ph__note b{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:var(--text-sm);color:var(--c-ink);line-height:1.5;
}
.ph__note-k{
  display:inline-block;padding:4px 12px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.9);color:var(--c-ink);
  font-size:var(--text-xs);font-weight:500;line-height:1.5;letter-spacing:.02em;
}
.ph__note-why{max-width:30em}
.ph--sm .ph__note-why{display:none}
.ph--sm .ph__note{gap:6px;padding:10px}
.ph--sm .ph__note-k{padding:3px 9px}
.ph--sm .ph__note b{font-size:var(--text-xs)}


.ph--r43{aspect-ratio:4/3}
.ph--r11{aspect-ratio:1/1}
.ph--r32{aspect-ratio:3/2}
.ph--r169{aspect-ratio:16/9}

/* ============ ヘッダー（N12：告知バー＋主ナビ） ============ */
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-top:4px solid var(--c-apricot);box-shadow:0 4px 18px rgba(52,51,47,.06)}
.util{background:#fff;font-size:var(--text-xs);line-height:1.7;color:var(--c-muted)}
.util__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-s);min-height:34px;flex-wrap:wrap}
.util__note{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--c-ink)}
/* オレンジ on ミントは 2.88:1 だったため brand へ。装飾だが 3:1 を確保する */
.util__dot{width:7px;height:7px;border-radius:50%;background:var(--c-orange);flex:none}
.util__meta{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap}
.util__meta>p{display:flex;align-items:center;min-height:44px}
.util__meta a{display:inline-flex;align-items:center;min-height:44px;color:var(--c-muted);text-decoration:none}
.util__meta a:hover{color:var(--c-brand);text-decoration:underline}

.bar{border-top:1px solid var(--c-line-soft);border-bottom:1px solid var(--c-line-soft);background:var(--c-cream)}
.bar__inner{display:flex;align-items:center;gap:var(--space-m);min-height:68px}
.brand{display:flex;align-items:center;text-decoration:none;flex:none;min-height:44px}
/* 実素材 logo-h.png を読み込む（マークを描き起こさない） */
.brand__logo{display:block;height:46px;width:auto}
.nav{margin-left:auto}
.nav__list{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px)}
.nav__list a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:14px;font-weight:500;color:var(--c-ink);text-decoration:none;white-space:nowrap;
  position:relative;
}
.nav__list a::after{
  content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;border-radius:2px;
  background:var(--c-apricot);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-fast) var(--ease-out);
}
.nav__list a:hover::after{transform:scaleX(1)}
.head-cta{display:flex;align-items:center;gap:var(--space-s);flex:none}
.head-tel{text-decoration:none;color:var(--c-ink);line-height:1.25;display:flex;flex-direction:column;justify-content:center;min-height:44px}
.head-tel small{display:block;font-size:var(--text-xs);color:var(--c-muted);letter-spacing:.03em}
.head-tel strong{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:.02em;white-space:nowrap}
.head-cta .btn{min-height:46px;padding:10px 20px;font-size:15px}
.burger{display:none;width:48px;height:48px;border:1px solid var(--c-line);border-radius:var(--radius-s);background:#fff;cursor:pointer;padding:0;align-items:center;justify-content:center;flex:none}
.burger span{display:block;width:20px;height:2px;background:var(--c-ink);border-radius:2px;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--c-ink);border-radius:2px}
.burger span::before{top:-6px}.burger span::after{top:6px}
.drawer{display:none;border-top:1px solid var(--c-line-soft);background:#fff;padding:var(--space-s) 0 var(--space-m)}
.drawer[data-open="true"]{display:block}
.drawer__list a{display:flex;align-items:center;min-height:52px;padding-inline:var(--space-m);font-weight:500;color:var(--c-ink);text-decoration:none;border-bottom:1px solid var(--c-line-soft)}
.drawer__cta{display:grid;gap:10px;padding:var(--space-s) var(--space-m) 0}

/* ============ FV（大判写真＋短いメッセージ） ============ */
.fv{position:relative;background:var(--c-paper);padding:0}
.fv__grid{position:relative;min-height:clamp(620px,67vh,740px);display:flex;align-items:center;overflow:hidden;isolation:isolate;padding-inline:0}
.fv>.fv__grid{max-width:var(--wrap-wide)}
.fv__grid::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(23,32,27,.79) 0%,rgba(23,32,27,.61) 39%,rgba(23,32,27,.16) 70%,rgba(23,32,27,.04) 100%)}
.fv__body{width:min(720px,62%);padding:clamp(48px,5vw,72px);color:#fff;position:relative;z-index:2}
.fv h1{font-size:var(--text-h1);font-weight:500;letter-spacing:.04em;line-height:1.38;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.2)}
.fv .marker{background:linear-gradient(transparent 72%,rgba(241,201,91,.72) 72%)}
.fv__lead{margin-top:var(--space-m);font-size:var(--text-lg);line-height:1.85;max-width:30em;color:rgba(255,255,255,.92)}
.fv__chips{margin-top:var(--space-m)}
.fv__chips .chip{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);color:#fff;backdrop-filter:blur(4px)}
.fv__chips .chip--open{background:var(--c-orange);border-color:var(--c-orange)}
.fv__actions{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-l)}
.fv__actions .btn--primary{background:var(--c-orange);box-shadow:0 12px 26px -14px rgba(0,0,0,.7)}
.fv__actions .btn--primary:hover{background:#A95D1F}
.fv__actions .btn--outline{color:#fff;border-color:rgba(255,255,255,.78);background:rgba(255,255,255,.06)}
.fv__actions .btn--outline:hover{background:rgba(255,255,255,.16)}
.fv__tel{margin-top:var(--space-s);font-size:var(--text-sm);color:rgba(255,255,255,.78)}
/* タップ領域44px（指摘12）。inline のままだと高さ27pxしかなかった */
.fv__tel a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-display);font-weight:500;font-size:var(--text-lg);color:#fff;text-decoration:none;letter-spacing:.04em}
.fv__tel a:hover{color:var(--c-apricot);text-decoration:underline}
.fv__media{position:absolute;inset:0;z-index:-2;border-radius:0;overflow:hidden;box-shadow:none}
.fv__media img{width:100%;height:100%;object-fit:cover;object-position:center 48%;filter:brightness(1.12)}
.fv__cap{
  position:absolute;right:14px;bottom:14px;background:rgba(255,255,255,.94);
  color:var(--c-ink);font-size:var(--text-xs);line-height:1.5;padding:6px 12px;border-radius:var(--radius-pill);
  max-width:calc(100% - 28px);
}
.fv-notes{padding-block:var(--space-s);display:grid;gap:8px}

/* ============ 1分でわかるWAYS ============ */
.quick-head{text-align:center;margin-bottom:var(--space-l)}
.quick-head .eyebrow{font-size:var(--text-xs);font-weight:500;letter-spacing:.14em;color:var(--c-orange);text-transform:uppercase}
.quick-head h2{margin-top:6px;font-size:var(--text-h2-quiet)}
.entrances{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;background:#fff;border-block:1px solid var(--c-line);border-radius:var(--radius-m);overflow:hidden}
.entrance{display:flex;flex-direction:column;gap:var(--space-s);padding:var(--space-l);border:0;border-radius:0;background:#fff}
.entrance+.entrance{border-left:1px solid var(--c-line)}
.entrance:hover{transform:none;background:var(--c-cream);box-shadow:none}
.entrance__head{display:flex;align-items:center;gap:14px}
.entrance__icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--c-brand)}
.entrance__icon--mint{background:var(--c-mint-chip)}
.entrance__icon--apricot{background:var(--c-apricot-chip);color:var(--c-orange)}
.entrance h3{font-size:var(--text-lg);font-weight:500}
.entrance p{font-size:var(--text-body);line-height:1.85;color:var(--c-muted)}
.entrance .tlink{margin-top:auto}

/* ============ 交互ダイプティック（DOM順＝視覚順。row-reverseは使わない） ============ */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.duo--wide-text{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
.duo--wide-media{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
.duo > .ph{width:100%;max-width:520px}
.duo--wide-text > .ph{margin-inline-start:auto}
.duo__body h2{font-family:var(--font-statement);font-weight:400;font-size:var(--text-statement);line-height:1.75;letter-spacing:.04em}
.duo__body p+p{margin-top:var(--space-s)}
.duo__body .btn{margin-top:var(--space-m)}
.ph--photo-real{background:#fff;box-shadow:none}
.ph--photo-real img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.philosophy{margin-top:var(--space-2xl);padding-block:var(--space-2xl);text-align:center;border-block:1px solid var(--c-line-soft);position:relative}
.philosophy__label{font-size:var(--text-xs);color:var(--c-orange);letter-spacing:.18em;font-weight:500}
.philosophy__statement{font-family:var(--font-statement);font-size:var(--text-statement);font-weight:400;line-height:1.8;letter-spacing:.05em;margin-top:var(--space-m)}
.philosophy__dots{display:block;color:var(--c-apricot);letter-spacing:.55em;margin-top:var(--space-m)}

/* ============ お仕事の内容 ============ */
#work{background:var(--c-cream)}
.work-list{display:grid;gap:0}
.work-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;padding-block:var(--space-xl)}
/* 本文が1〜3行の項目に約600pxの枠が並んで釣り合いを欠いていた。
   本文側を広く取り、図版側は本文量に見合う幅で止める */
.work-item:nth-of-type(even){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.work-item > .ph{width:100%;max-width:520px}
.work-item > .ph:last-child{margin-inline-start:auto}
.work-item:first-child{padding-top:0}
.work-item+.work-item{border-top:1px solid var(--c-line)}
.work-item__head{display:flex;align-items:center;gap:12px;margin-bottom:var(--space-s)}
.work-item__icon{width:38px;height:38px;border-radius:50%;background:var(--c-mint-chip);color:var(--c-brand);display:grid;place-items:center;flex:none}
.work-item h3{font-size:clamp(24px,2.4vw,30px);font-weight:500}
.work-item p{color:var(--c-muted)}
.work-item .chips{margin-top:var(--space-s)}

/* ============ 働く条件 ============ */
.cond{padding:var(--space-l) clamp(24px,3vw,48px);border-top:4px solid var(--c-apricot);background:#fff}
.cond__top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-xs);margin-bottom:var(--space-m)}
.cond h3{font-size:var(--text-h3)}
.cond__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--c-line-soft);border-radius:var(--radius-m);overflow:hidden}
.cond__cell{background:#fff;padding:var(--space-m)}
.cond__cell dt{font-size:var(--text-xs);color:var(--c-muted);letter-spacing:.04em;font-weight:500}
.cond__cell dd{margin:6px 0 0;font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);line-height:1.6}
.cond__cell dd small{display:block;font-family:var(--font-body);font-weight:400;font-size:var(--text-xs);color:var(--c-muted);line-height:1.7;margin-top:4px}
.cond__cell--hero dd{font-size:clamp(24px,2.6vw,30px);color:var(--c-brand)}

/* ============ 1日の流れ（細い縦レール＝ページ内で唯一の狭幅） ============ */
.rail{position:relative;padding-left:var(--space-l)}
.rail::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:2px;background:var(--c-mint-chip);border-radius:2px}
.rail__row{position:relative;display:grid;grid-template-columns:132px minmax(0,1fr);gap:var(--space-s);padding-block:11px;align-items:baseline}
.rail__row::before{
  content:"";position:absolute;left:calc(-1 * var(--space-l) + 5px);top:20px;
  width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--c-mint-chip);
}
.rail__row--now::before{background:var(--c-brand);box-shadow:0 0 0 3px var(--c-mint-chip)}
.rail__time{font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);letter-spacing:.02em;color:var(--c-ink);white-space:nowrap}
.rail__what{font-size:var(--text-body)}
.rail__row--rest .rail__time,.rail__row--rest .rail__what{color:var(--c-muted)}
.rail__row--rest::before{box-shadow:0 0 0 3px var(--c-apricot-chip)}

/* ============ ご利用までの流れ ============ */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-m)}
.step{display:flex;flex-direction:column;gap:var(--space-s);padding:0}
.step__thumb{border-radius:var(--radius-s)}
/* .step p より詳細度を上げる（クラスのみだと要素セレクタ側に負ける） */
.step .step__no{
  display:flex;align-items:baseline;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:var(--text-numeral);
  line-height:1;color:var(--c-orange);letter-spacing:.02em;
}
.step .step__no span{
  font-family:var(--font-body);font-weight:500;font-size:var(--text-xs);
  color:var(--c-muted);letter-spacing:.14em;line-height:1;
}
.step h3{font-size:var(--text-h3);margin-top:-4px}
.step p{font-size:var(--text-body);line-height:1.85;color:var(--c-muted)}
.note-line{
  margin-top:var(--space-m);padding:var(--space-m) var(--space-m);border-radius:var(--radius-m);
  background:var(--c-mint);font-size:var(--text-sm);line-height:1.85;
}

/* ============ 施設の様子（サイズを揃えない＝リズム。ただし巨大な空白は作らない） ============ */
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-s)}
.gallery > *{border-radius:var(--radius-s)}
.g-a{grid-column:span 8}
.g-b{grid-column:span 4}
.g-c,.g-d,.g-e,.g-f{grid-column:span 3}

/* ============ Instagram ============ */
.ig{max-width:var(--wrap-narrow)}
.ig__feed{margin-top:var(--space-m)}
.ig__meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-m);margin-top:var(--space-m)}
.ig__meta .lead{margin-top:0}
.ig__meta .btn{white-space:nowrap}
.ig__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-xs)}
.ig__grid .ph{border-radius:var(--radius-m)}

/* ============ 利用者様の声 ============ */
.voice-notice{
  display:flex;gap:var(--space-s);align-items:flex-start;
  padding:var(--space-m);border-radius:var(--radius-s);background:var(--c-mint);
  font-size:var(--text-sm);line-height:1.85;
}
.voice-notice svg{flex:none;color:var(--c-brand);margin-top:3px}
.dummy-band{
  margin-top:var(--space-m);border:1px dashed var(--c-line);border-radius:var(--radius-m);
  padding:var(--space-m);
}
/* オレンジ on アプリコットは 2.58:1 だった。モック注記と同じ体裁（ink地＋白文字）に統一する */
.dummy-band__label{
  display:inline-block;font-size:var(--text-xs);font-weight:700;font-family:var(--font-display);
  color:#fff;background:var(--c-ink);
  padding:5px 12px;border-radius:var(--radius-pill);margin-bottom:var(--space-s);
}
.voices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-m)}
/* opacity:.62 で本文3.86:1・meta 2.59:1 だった。開所後に実際の声を入れても同じクラスで
   不足が残るため opacity をやめ、「未掲載」は破線の帯とラベルだけで示す */
.voice{padding:var(--space-m)}
.voice__q{font-family:var(--font-display);font-weight:700;font-size:var(--text-body);line-height:1.75}
.voice__meta{margin-top:var(--space-s);padding-top:var(--space-s);border-top:1px solid var(--c-line-soft);font-size:var(--text-xs);color:var(--c-muted)}
.voice__bar{height:11px;border-radius:6px;background:var(--c-line-soft);margin-top:10px}
.voice__bar--s{width:62%}

/* ============ FAQ（details＝JS不要） ============ */
.faq{border-top:1px solid var(--c-line)}
.faq details{border-bottom:1px solid var(--c-line)}
.faq summary{
  display:flex;align-items:flex-start;gap:14px;
  padding:var(--space-m) 44px var(--space-m) 0;position:relative;
  cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:700;font-size:var(--text-body);line-height:1.7;
  min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{
  width:30px;height:30px;border-radius:50%;background:var(--c-mint-chip);color:var(--c-brand);
  display:grid;place-items:center;flex:none;font-size:var(--text-sm);margin-top:2px;
}
.faq summary::after{
  content:"";position:absolute;right:8px;top:calc(var(--space-m) + 12px);
  width:13px;height:13px;border-right:2px solid var(--c-muted);border-bottom:2px solid var(--c-muted);
  transform:rotate(45deg);transition:transform var(--dur-fast) var(--ease-out);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--c-brand)}
.faq__a{padding:0 44px var(--space-m) 44px;color:var(--c-muted);font-size:var(--text-body);line-height:1.9}

/* ============ お知らせ ============ */
.news-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-s);flex-wrap:wrap;margin-bottom:var(--space-l)}
.news{border-top:1px solid var(--c-line)}
.news__row{display:grid;grid-template-columns:110px 108px minmax(0,1fr);gap:var(--space-s);align-items:center;padding-block:var(--space-s);border-bottom:1px solid var(--c-line-soft)}
.news__date{font-size:var(--text-sm);color:var(--c-muted);font-variant-numeric:tabular-nums}
.news__title{font-size:var(--text-sm);color:var(--c-muted)}
.news__empty{padding-block:var(--space-l);text-align:center;color:var(--c-muted);font-size:var(--text-sm);border-bottom:1px solid var(--c-line-soft)}

/* ============ CTA（やわらかい黄の面でページを切り替える） ============ */
.cta{background:var(--c-apricot);color:var(--c-ink);padding-block:calc(var(--sec-gap) * .78);position:relative;overflow:hidden}
.cta::before{
  content:"";position:absolute;inset:auto -8% -42% auto;width:min(560px,64vw);aspect-ratio:1;
  border-radius:50%;background:rgba(255,255,255,.22);
}
.cta__inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center}
.cta h2{font-family:var(--font-statement);font-weight:400;font-size:var(--text-h2-loud);color:var(--c-ink);line-height:1.65}
.cta p{margin-top:var(--space-s);color:var(--c-ink);font-size:var(--text-body)}
.cta__chips{margin-top:var(--space-m)}
.cta__chips .chip{background:rgba(255,255,255,.48);color:var(--c-ink)}
.cta__panel{background:rgba(255,255,255,.82);border-radius:var(--radius-l);padding:var(--space-l);box-shadow:0 20px 44px -28px rgba(52,51,47,.32)}
.cta__panel .btn{width:100%}
.cta__panel .btn+.btn{margin-top:var(--space-xs)}
.cta__panel .btn--onbrand{background:var(--c-brand);color:#fff}
.cta__panel .btn--ghost-onbrand{background:#fff;color:var(--c-brand);border-color:var(--c-brand)}
.cta__tel{display:block;text-align:center;margin-top:var(--space-s);color:var(--c-muted);font-size:var(--text-xs);line-height:1.8}

/* 事業所情報の行。もとは .cta の中（緑地）にあり、
   (a) .cta p に負けて指定どおりに描画されない
   (b) CTAの緑とフッターの濃緑が続いて1枚の長い緑に見える
   の2点があったため、緑の外の淡色バンドとして独立させた。
   これでページの面ベタは「CTAの緑」1回だけになり、転換の瞬間が際立つ */
.cta-info{background:var(--c-cream);border-top:1px solid var(--c-line-soft);padding-block:var(--space-m)}
.cta-info p{font-size:var(--text-sm);color:var(--c-muted);line-height:1.9}

/* ============ フッター（Ft5 statement） ============ */
.foot{background:var(--c-brand-deep);color:rgba(255,255,255,.82);padding-block:var(--space-xl) var(--space-l)}
.foot__statement{font-family:var(--font-statement);font-weight:400;color:#fff;font-size:clamp(24px,3vw,34px);line-height:1.7;letter-spacing:.04em}
.foot__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--space-l);margin-top:var(--space-l)}
.foot__addr{font-size:var(--text-sm);line-height:1.95}
.foot__addr strong{display:block;color:#fff;font-family:var(--font-display);font-size:var(--text-body);margin-bottom:6px}
.foot__sns{display:flex;gap:var(--space-xs);margin-top:var(--space-s);flex-wrap:wrap}
.foot__sns-link{
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.3);border-radius:50%;
  text-decoration:none;transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.foot__sns-icon{width:20px;height:20px;fill:currentColor}
.foot__sns-link:hover{color:var(--c-brand-deep);background:#fff;border-color:#fff;text-decoration:none}
.foot__links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px var(--space-s)}
.foot__links a{color:rgba(255,255,255,.82);font-size:var(--text-sm);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.foot__links a:hover{color:#fff;text-decoration:underline}
.foot__copy{margin-top:var(--space-l);padding-top:var(--space-s);border-top:1px solid rgba(255,255,255,.16);font-size:var(--text-xs)}

/* ============ SP固定CTA ============ */
/* 初期表示でFVの2つ目のボタンを覆っていた（390x844 実測で61pxのうち約56px）。
   body の padding-bottom はページ末尾にしか効かないため、
   FVのボタン群が画面から出るまでバーを出さない方式に変える。
   JSが動かない場合は従来どおり常時表示（html に .js が付かない＝退避しない） */
.sticky-cta{display:none}

/* ============ 注記バナー（モック用・実装時は削除） ============ */
.mockbar{background:var(--c-ink);color:rgba(255,255,255,.9);font-size:var(--text-xs);line-height:1.7;padding:10px 0}
.mockbar strong{color:#fff}

/* ============ モック注記（公開されるサイトには入らない） ============ */
/* もとは本文と同じ体裁で <main> の中に混ざっており、先方が「公開される文章」と
   読み違える形だった。地色・ラベル・縦罫の3つを本文と変えて視覚的に切り離す。
   地色 --c-apricot-chip は本文が一度も使わない面なので、ひと目で本文でないと分かる */
.mocknote{
  display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;
  margin-top:var(--space-s);padding:12px var(--space-s);
  border-radius:var(--radius-s);border-left:5px solid var(--c-ink);
  background:var(--c-apricot-chip);color:var(--c-ink);
  font-family:var(--font-body);font-weight:400;font-size:var(--text-sm);line-height:1.8;
}
.mocknote::before{
  content:"モック注記";flex:none;
  background:var(--c-ink);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:var(--text-xs);
  line-height:1.6;padding:2px 12px;border-radius:var(--radius-pill);white-space:nowrap;
}
.mocknote--confirm{border-left-color:var(--c-orange)}
.mocknote--confirm::before{content:"先方ご確認事項"}
.mocknote > span{flex:1 1 16em;min-width:0}
/* FAQ の見出し行に置くインライン版 */
.confirm-chip{
  display:inline-block;margin-left:10px;padding:2px 10px;border-radius:var(--radius-pill);
  background:var(--c-ink);color:#fff;
  font-family:var(--font-body);font-weight:500;font-size:var(--text-xs);line-height:1.6;
  vertical-align:middle;white-space:nowrap;
}

/* 下層ページが未作成でリンク先を決めていない箇所（href="#"）。
   先方が「リンク切れ」と読まないよう点線で示す。実装時にこのルールごと削除する */
main a[href="#"]:not(.btn),.foot a[href="#"]:not(.btn){
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:.3em;
}
main .btn[href="#"],.foot .btn[href="#"]{outline:2px dotted currentColor;outline-offset:-6px}

/* ============ 事業所概要／企業様向けの定義リスト ============ */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--c-line-soft);border-radius:var(--radius-m);overflow:hidden;margin-top:var(--space-m)}
.facts > div{background:#fff;padding:var(--space-s) var(--space-m)}
.facts dt{font-size:var(--text-xs);color:var(--c-muted);letter-spacing:.04em;font-weight:500}
.facts dd{margin:4px 0 0;font-size:var(--text-body);line-height:1.75}

/* ============ ご利用の対象となる方 ============ */
.target{padding:var(--space-m) clamp(24px,3vw,40px);margin-bottom:var(--space-l)}
.target h3{font-size:var(--text-h3);margin-bottom:var(--space-xs)}
.target ul{display:grid;gap:10px}
.target li{position:relative;padding-left:30px;font-size:var(--text-body);line-height:1.85}
.target li::before{content:"";position:absolute;left:6px;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--c-mint-chip);box-shadow:0 0 0 3px var(--c-mint)}

/* ============ 企業様へ ============ */
.biz__steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--space-m)}
.biz__steps li{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);color:var(--c-ink);background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-pill);padding:6px 14px;line-height:1.6}
.biz__steps li::before{content:counter(bizstep);counter-increment:bizstep;font-family:var(--font-display);font-weight:700;color:var(--c-orange);font-size:var(--text-xs)}
.biz__steps{counter-reset:bizstep}

/* フッターのスコア表：開所前でリンク先が存在しないため、リンクにしない */
.foot__soon{color:rgba(255,255,255,.82);font-size:var(--text-sm);min-height:44px;display:inline-flex;align-items:center;gap:8px}
.foot__soon small{font-size:var(--text-xs);color:rgba(255,255,255,.72)}

/* ============ レスポンシブ ============ */
/* Webフォント読込後はPCナビと右CTAが最大1173pxを必要とする。
   ブラウザ間の文字幅差も吸収するため1200pxまではドロワーへ切り替える。 */
@media (max-width:1200px){
  .nav,.head-cta .head-tel{display:none}
  .burger{display:flex}
  .head-cta{margin-left:auto}
}
/* 901〜970pxだけ本文幅62%ではCTAが2段になるため、タブレット構成を延長する。
   980px以上では2ボタンが1段に収まることを実測済み。 */
@media (min-width:901px) and (max-width:979px){
  .fv__body{width:100%;padding:var(--space-l)}
  .fv__grid::after{background:linear-gradient(180deg,rgba(23,32,27,.14) 0%,rgba(23,32,27,.18) 34%,rgba(23,32,27,.78) 100%)}
  .fv__media img{object-position:center}
}
@media (max-width:900px){
  /* 段階外の数値（72/48/92px）を持ち込まず、7段階の合成で縮める */
  :root{--sec-gap:calc(var(--space-xl) + var(--space-m))}
  .facts{grid-template-columns:minmax(0,1fr)}
  .fv__grid{min-height:650px}
  .fv__body{width:100%;padding:var(--space-l)}
  .fv__grid::after{background:linear-gradient(180deg,rgba(23,32,27,.14) 0%,rgba(23,32,27,.18) 34%,rgba(23,32,27,.78) 100%)}
  .fv__media img{object-position:center}
  .duo,.duo--wide-text,.duo--wide-media{grid-template-columns:minmax(0,1fr);gap:var(--space-m)}
  .work-item{grid-template-columns:minmax(0,1fr);gap:var(--space-m);padding-block:var(--space-l)}
  .work-item > .ph{order:-1}
  .work-item > .ph,.duo > .ph{max-width:none;margin-inline-start:0}
  .entrances{grid-template-columns:minmax(0,1fr);border:0;background:transparent;gap:12px;overflow:visible}
  .entrance{border:1px solid var(--c-line);border-radius:var(--radius-pill);padding:var(--space-s) var(--space-m);box-shadow:0 7px 18px -14px rgba(52,51,47,.35)}
  .entrance+.entrance{border-left:1px solid var(--c-line)}
  .entrance>p{display:none}
  .entrance .tlink{margin-top:0;padding-left:56px}
  .cond__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ig__meta{align-items:flex-start;flex-direction:column;gap:var(--space-s)}
  .voices{grid-template-columns:minmax(0,1fr)}
  .cta__inner{grid-template-columns:minmax(0,1fr)}
  .foot__grid{grid-template-columns:minmax(0,1fr)}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-a{grid-column:span 2}
  .g-b,.g-c,.g-d,.g-e,.g-f{grid-column:span 1}
  body{padding-bottom:76px}
  .sticky-cta{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:120;
    padding:10px var(--space-s) calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,251,243,.96);border-top:1px solid var(--c-line);
    backdrop-filter:blur(8px);
    transition:transform var(--dur-mid) var(--ease-out);
  }
  .js .sticky-cta{transform:translateY(115%);visibility:hidden}
  .js .sticky-cta.is-on{transform:none;visibility:visible}
  .sticky-cta .btn{min-height:50px;font-size:var(--text-sm);padding-inline:12px;width:100%}
}
@media (max-width:600px){
  :root{--sec-gap:calc(var(--space-xl) + var(--space-xs));--text-h1:34px}
  .bar__inner{min-height:64px;gap:var(--space-s)}
  .brand__logo{height:40px}
  .head-cta .btn{display:none}
  .util__meta{display:none}
  .fv__grid{min-height:670px;align-items:flex-end}
  .fv__body{padding:var(--space-l) var(--space-s) calc(var(--space-xl) + var(--space-m))}
  .fv__lead{font-size:var(--text-body);line-height:1.75}
  .fv__chips{gap:7px}
  .fv__chips .chip{font-size:12px;padding:5px 10px}
  .fv__actions{display:grid;grid-template-columns:1fr 1fr;position:absolute;left:0;right:0;bottom:0;padding:10px;background:rgba(255,255,255,.96);gap:8px}
  .fv__actions .btn{min-width:0;min-height:52px;padding:10px 8px;font-size:14px}
  .fv__actions .btn--outline{color:var(--c-brand);border-color:var(--c-brand);background:#fff}
  .fv__tel{display:none}
  /* 下端では案内チップと重なるため、写真上部の空きへ移す。 */
  .fv__cap{font-size:11px;top:10px;bottom:auto;right:10px}
  .quick-head{text-align:left;margin-bottom:var(--space-m)}
  .entrance{gap:10px}
  .entrance__head{gap:10px}
  .entrance__icon{width:38px;height:38px}
  .entrance h3{font-size:16px}
  .entrance .tlink{padding-left:48px;font-size:14px;min-height:36px}
  .philosophy{margin-top:var(--space-xl);padding-block:var(--space-xl)}
  .cond__grid{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .step__thumb{aspect-ratio:16/9}
  .ig__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rail{padding-left:var(--space-m)}
  .rail::before{left:5px}
  .rail__row{grid-template-columns:minmax(0,1fr);gap:2px;padding-block:10px}
  .rail__row::before{left:calc(-1 * var(--space-m) + 0px);top:16px;width:12px;height:12px}
  .news__row{grid-template-columns:minmax(0,1fr);gap:4px}
  .foot__links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq summary{padding-right:36px}
  .faq__a{padding-left:0;padding-right:0}
}

/* ============ モーション（3プリミティブのみ） ============ */
.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .reveal.is-in{opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .btn:hover,.card:hover,.entrance:hover{transform:none!important}
}

/* ============================================================
 * WordPress ブロック既定値の打ち消し（最小限・上記モックCSSは無改変）
 * ============================================================ */
.wp-site-blocks{padding:0}
.wp-site-blocks>*{margin-block-start:0}
.facts__row>*,.cond__cell>*{margin-block-start:0}
.wp-block-group,
.wp-block-columns,
.wp-block-column,
.wp-block-image,
.wp-block-buttons,
.wp-block-button{box-sizing:border-box}
.wp-block-columns{margin-bottom:0}
.wp-block-column{min-width:0}
.wp-block-image{margin:0}
.wp-block-image img{vertical-align:middle}
.wp-block-button .wp-block-button__link{box-sizing:border-box}

/* 注意（パターン作成者向け）: ボタンは wp:button ブロックを使わない。
   wp:button は className がラッパー div (.wp-block-button) に付き、実リンク
   (.wp-block-button__link) には付かないため、モックの `.btn .btn--primary` 等
   （両方とも同じ <a> に付く前提のクラス）が分割されてしまい、`.sticky-cta .btn`
   `.head-cta .btn` `.cta__panel .btn` のような子孫セレクタが効かなくなる。
   代わりに `<a class="btn btn--primary" href="...">` を直書きし、mockの構造どおり
   1つの要素に両クラスを載せること。

   そのうえで、文言をサイトエディタで直せるようにするため <a> は段落ブロックで包む。
   ラッパーは2種類あり、親のレイアウトで使い分ける:

     .inline-wrap ... display:contents でラッパーの箱を消す。<a> がそのまま親の
                      flex/grid 項目になるので、既存の子孫セレクタが効き続ける。
                      .fv__actions / .entrance / .head-cta / .news-head / .duo__body /
                      .foot__links 用。
     .btn-wrap    ... display:flex。親が縦積みで、ボタンを横幅いっぱいに伸ばしたいとき。
                      幅はコンテナ側の `<コンテナ> .btn{width:100%}` で担保する
                      （.btn 自体は inline-flex で幅指定を持たない）。
                      .drawer__cta / .cta__panel / .sticky-cta 用。

   実例: patterns/header.php（.head-cta = inline-wrap / .drawer__cta = btn-wrap）、
         patterns/footer.php（.foot__links = inline-wrap / .sticky-cta = btn-wrap）。
   なお .inline-wrap はエディタのキャンバスでは箱を持たないと選択枠が潰れるため、
   editor.css で display:block に戻している（フロントには読み込まれない）。

   なお「矢印 <span class="arw"> は段落に入れると無効判定になる」は誤り。
   templates/404.html が段落内に arw を持ち isValid:true であることを実機確認済み。
   段落化を妨げるのはレイアウトだけで、上の2ラッパーで解消できる。 */

/* wp:image は figure > a > img の3階層で出力され、コア側の
   `.wp-block-image img{height:auto;max-width:100%}`（要素セレクタを含むため
   `.brand__logo` より詳細度が高い）がロゴの高さ指定を打ち消して
   原寸 800x260 で描画される。同じ詳細度の階層で打ち消す。
   併せて、モックでは `.brand` 自体が <a>（min-height:44px のタップ領域）
   だったが、ブロック化で <a> が figure の子になるため子側に付け直す。 */
.site-header figure.brand img{height:54px;width:auto;max-width:none}
.brand>a{display:flex;align-items:center;min-height:44px;text-decoration:none}
@media (max-width:600px){
  .site-header figure.brand img{height:40px}
}

/* お知らせ行はモック本文に投稿が入った状態の実例が無く、CSS の
   `.news__row{grid-template-columns:110px 108px minmax(0,1fr)}` から
   日付・カテゴリー・タイトルの3列として組んでいる。
   タイトルは記事への主要導線なので、モックが掲げるタップ領域44pxを満たす。 */
.news__title{margin:0}
.news__title a{display:flex;align-items:center;min-height:44px;color:inherit;text-decoration:none}
.news__title a:hover{text-decoration:underline}

/* dl/dt/dd をやめた理由: core に dt/dd を出すブロックが無く、開所日・空き状況・
   スタッフ人数・時給・電話番号は開所前後に必ず動くため、テーマ改修なしに
   サイトエディタで直せる必要がある。dt/dd 向けだったモックCSSの値を、
   div ベースの新クラス（facts__k/facts__v・cond__k/cond__v/cond__note）へ
   同じ値のまま移す。 */
.facts .facts__k{font-size:var(--text-xs);color:var(--c-muted);letter-spacing:.04em;font-weight:500}
.facts .facts__v{margin:4px 0 0;font-size:var(--text-body);line-height:1.75}
.cond__cell .cond__k{font-size:var(--text-xs);color:var(--c-muted);letter-spacing:.04em;font-weight:500}
.cond__cell .cond__v{margin:6px 0 0;font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);line-height:1.6}
.cond__cell .cond__note{font-family:var(--font-body);font-weight:400;font-size:var(--text-xs);color:var(--c-muted);line-height:1.7;margin-top:4px}
.cond__cell--hero .cond__v{font-size:clamp(24px,2.6vw,30px);color:var(--c-brand)}
.cond__cell .cond__v.dd--text{font-size:var(--text-body)}

/* モックの `.facts` / `.cond__grid` は <dl> で、UA既定の `margin-block-end:1em`（17px）が
   付いたまま設計されていた。div 化でその余白が消え、直後との間隔が承認済みPDFより
   17px詰まるため、同じ値を明示する。 */
.facts{margin-bottom:1em}
.cond__grid{margin-bottom:1em}

/* ============================================================
 * 電話番号を編集可能にするための構造変更ぶんの当て直し（2026-09-07 佐伯指示）
 * ------------------------------------------------------------
 * モックでは `.head-tel` `.btn` が単体の <a> で、CSS も <a> に直接当たる前提だった。
 * サイトエディタから電話番号を直せるようにするため、これらを段落ブロックへ移した
 * （`<p class="btn-wrap"><a class="btn ...">…</a></p>` / `.head-tel` は div ＋ 2段落）。
 * 見た目はモックのまま保つ。
 * ============================================================ */

/* head-tel: <a>（flex column）→ div ＋ ラベル段落 ＋ 番号段落 */
.head-tel>*{margin-block-start:0}
.head-tel__label{font-size:var(--text-xs);color:var(--c-muted);letter-spacing:.03em}
/* モックは <strong>（UA既定 font-weight:700）。段落化で 400 に落ちるので明示する。 */
.head-tel__num{font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);letter-spacing:.02em;white-space:nowrap}
.head-tel__num a{color:var(--c-ink);text-decoration:none}
/* モックでは `.head-tel` 全体が <a>（min-height:44px）でタップ領域だった。
   ラベルを編集可能にするため <a> を番号だけに縮めたので、行の高さ（26px＝21px×1.25）を
   変えないまま当たり判定を44pxへ広げる（上下 -9px の相殺マージン）。 */
.head-tel__num a{display:inline-flex;align-items:center;min-height:44px;margin-block:-9px}

/* ボタンの段落ラッパー。<p> の既定余白を消し、レイアウトは元どおり <a> に効かせる。
   display:flex にするのは、inline-flex の <a> を行ボックスに置くとベースライン分の
   余白が段落の高さに乗ってモックより数px高くなるため。 */
.btn-wrap{margin:0;display:flex}
.drawer__cta>*{margin-block-start:0}
.drawer__cta .btn{width:100%}
.cta__panel>*{margin-block-start:0}
/* CTA帯には `.cta p{margin-top;color;font-size}`（要素セレクタを含むため詳細度が高い）がある。
   モックでは `.cta__tel` が <span>、ボタンが <a> でこの規則に当たらなかったが、
   段落ブロック化で当たるようになる。同じ見た目に戻すため詳細度を1段上げて打ち直す。 */
.cta__panel .cta__tel{margin-top:var(--space-s);color:var(--c-muted);font-size:var(--text-xs);line-height:1.8}
.cta__panel>:first-child{margin-top:0}
/* モックの `.cta__panel .btn+.btn` は <p> ラッパーを挟んで隣接しなくなるため、
   パネル直下の要素間隔として当て直す（先頭要素には付かない）。 */
.cta__panel>*+*{margin-top:var(--space-xs)}
/* `.cta p{margin-top:var(--space-s)}` は要素セレクタぶん詳細度が高く、上の指定に勝つ。
   ボタン段落だけクラス2つで打ち直してモックの12pxに戻す。 */
.cta__panel>*+.btn-wrap{margin-top:var(--space-xs)}
@media (max-width:900px){
  .sticky-cta>*{margin-block-start:0}
}

/* ============================================================
 * 残りのボタン・テキストリンクの段落化（2026-09-08 佐伯指示）
 * ------------------------------------------------------------
 * 電話番号と同じ理由で、ボタン文言をサイトエディタから直せるようにした。
 * flex/grid の直下項目である必要がある <a> は `<p class="inline-wrap">` で包み、
 * ラッパーは display:contents にして箱を消す（<a> がそのまま親の項目になる）。
 * これにより `.entrance .tlink{margin-top:auto}` `.duo__body .btn{margin-top}` のような
 * 既存の子孫セレクタも効き続ける。
 * ============================================================ */
.inline-wrap{display:contents}
/* 900px以下の `.entrance>p{display:none}`（説明文を隠す指定・要素セレクタぶん
   詳細度が高い）にラッパーまで巻き込まれ、リンクごと消えるので打ち直す。 */
.entrance>p.inline-wrap{display:contents}

/* `.cta p{margin-top;color;font-size}` は要素セレクタぶん詳細度が高く、段落化した
   チップに当たる。クラス2つで打ち直してモックの見た目に戻す。 */
.cta__chips .chip{margin-top:0;font-size:var(--text-sm);line-height:1.6}

/* ============================================================
 * 下層ページ（2026-09-08 佐伯指示）
 * ------------------------------------------------------------
 * mock-v4.html はTOP1枚のみのため、下層で必要な部品はモックに無い。
 * V3の下層CSSは流用しない（106クラス中103がV4に無く、丸くて厚い
 * V3の意匠がV4の低彩度・平面の設計とぶつかるため）。
 * TOPで使っている語彙（--c-* / --space-* / --text-* / --radius-*）だけで
 * 最小限の部品を足し、本文の組みはTOPの .sec .wrap .card .facts .step
 * .work-item .chips .btn .tlink をそのまま再利用する。
 * ============================================================ */

/* --- ページ見出し帯 --- */
.page-head{background:var(--c-mint);border-bottom:1px solid var(--c-line-soft);padding-block:var(--space-xl)}
.page-head h1{font-family:var(--font-display);font-weight:500;font-size:var(--text-h2-loud);line-height:1.5;margin:0}
.page-head__lead{margin-top:var(--space-s);font-size:var(--text-body);line-height:1.9;color:var(--c-muted);max-width:62ch}
.breadcrumb{font-size:var(--text-xs);line-height:1.8;color:var(--c-muted);margin-bottom:var(--space-xs)}
.breadcrumb p{margin:0}
.breadcrumb a{color:var(--c-muted);text-decoration:none;border-bottom:1px solid var(--c-line)}
.breadcrumb a:hover{color:var(--c-brand);border-bottom-color:var(--c-brand)}
.breadcrumb__sep{margin-inline:8px;color:var(--c-muted);opacity:.55}

/* --- 下層の本文セクション。TOPの .sec より縦を詰める --- */
.page-sec{padding-block:calc(var(--sec-gap) * .42)}
.page-sec--tint{background:var(--c-cream)}
.page-sec>.wrap>h2{font-family:var(--font-display);font-weight:500;font-size:var(--text-h2-quiet);line-height:1.55;margin-bottom:var(--space-m)}
.page-sec>.wrap>h2+.lead{margin-top:calc(var(--space-m) * -1 + var(--space-xs))}

/* --- 長文（個人情報保護方針・スコア表など） --- */
.prose{max-width:74ch}
.prose h2{font-family:var(--font-display);font-weight:500;font-size:var(--text-lg);line-height:1.6;margin-top:var(--space-l)}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--font-display);font-weight:500;font-size:var(--text-body);line-height:1.7;margin-top:var(--space-m)}
.prose p{margin-top:var(--space-s);line-height:1.95}
.prose ul,.prose ol{margin-top:var(--space-s);padding-left:1.4em;list-style:disc}
.prose ol{list-style:decimal}
.prose li{line-height:1.95;margin-top:6px}
.prose a{color:var(--c-brand);text-underline-offset:3px}

/* --- 定義表（事業所概要・募集要項など） --- */
.def-table{margin:0;border-radius:var(--radius-s);overflow:hidden}
/* 罫線は「外周=tableの1px枠」「行間=セルのborder-bottom」の2系統だけで引く。
   上端を太線にしない・最終行のborder-bottomは0にして外周の下辺と二重にしない。
   tableにも同じ角丸を付け、figureの角丸クリップで外周線の角が欠けないようにする。 */
.def-table table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--c-line);border-radius:var(--radius-s);background:#fff}
/* core/table の保存形は <caption> ではなく </table> の後の <figcaption>。
   V3は caption を可視の見出しとして表示しているが（ways-japan/style.css の
   `.def-table caption{padding:0 0 14px;font-weight:700}`）、V4では直上の h2 と
   文言が重複するため、視覚的には隠して支援技術にだけ渡す。
   → V3にあった可視の表見出しはV4では画面に出ない（意図した差分）。 */
.def-table caption,.def-table figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* core/table の `.wp-block-table td,.wp-block-table th{border:1px solid}`
   （wp-includes/blocks/table/style.css）が全セル4辺に文字色の1px線を付けるため、
   先に border:0 で全辺を戻してから必要な辺だけ引く。これを欠くと行間が二重・上端が3px・
   薄い下端だけが見えない状態になる（2026-09-12 佐伯指摘）。 */
.def-table th,.def-table td{text-align:left;vertical-align:top;padding:18px 20px;border:0;border-bottom:1px solid var(--c-line);line-height:1.85}
.def-table tr:last-child th,.def-table tr:last-child td{border-bottom:0}
.def-table th{width:11em;font-size:var(--text-sm);font-weight:500;color:var(--c-ink);background:var(--c-mint);border-right:1px solid var(--c-line)}
.def-table td{font-size:var(--text-body)}
@media (max-width:600px){
  .def-table th,.def-table td{display:block;width:auto;border-right:0}
  .def-table th{padding:14px 16px 6px;border-bottom:0}
  .def-table td{padding:6px 16px 14px;border-bottom:1px solid var(--c-line)}
  .def-table tr:last-child td{border-bottom:0}
}

/* --- お知らせ一覧のページ送り --- */
.pagination{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:var(--space-l)}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding-inline:12px;
  border:1px solid var(--c-line);border-radius:var(--radius-s);
  font-size:var(--text-sm);color:var(--c-ink);text-decoration:none;background:#fff;
}
.pagination .page-numbers:hover{border-color:var(--c-brand);color:var(--c-brand)}
.pagination .page-numbers.current{background:var(--c-brand);border-color:var(--c-brand);color:#fff}
.pagination .page-numbers.dots{border:0;background:transparent;min-width:auto;padding-inline:4px}

/* --- 記事詳細 --- */
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-s);font-size:var(--text-sm);color:var(--c-muted);margin-bottom:var(--space-m)}
.post-body{max-width:74ch}
.post-body h2{font-family:var(--font-display);font-weight:500;font-size:var(--text-lg);margin-top:var(--space-l);line-height:1.6}
.post-body h3{font-family:var(--font-display);font-weight:500;font-size:var(--text-body);margin-top:var(--space-m);line-height:1.7}
.post-body p{margin-top:var(--space-s);line-height:1.95}
.post-body ul,.post-body ol{margin-top:var(--space-s);padding-left:1.4em;list-style:disc}
.post-body ol{list-style:decimal}
.post-body li{margin-top:6px;line-height:1.95}
.post-body img{border-radius:var(--radius-m)}
.post-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-s);margin-top:var(--space-xl);padding-top:var(--space-m);border-top:1px solid var(--c-line-soft)}

/* --- 地図 --- */
.map-embed{border:1px solid var(--c-line);border-radius:var(--radius-m);overflow:hidden;background:var(--c-cream)}
.map-embed iframe{display:block;width:100%;aspect-ratio:16/9;border:0}

/* --- お問い合わせフォーム（Contact Form 7） --- */
.form-note{font-size:var(--text-sm);color:var(--c-muted);line-height:1.9}
.wpcf7 p{margin-top:var(--space-m)}
.wpcf7 label{display:block;font-size:var(--text-sm);font-weight:500;color:var(--c-ink);margin-bottom:6px}
.wpcf7 .form-req{color:#8A342F;font-weight:700}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],
.wpcf7 input[type=date],.wpcf7 input[type=number],.wpcf7 input[type=url],
.wpcf7 textarea,.wpcf7 select{
  width:100%;min-height:52px;padding:12px 14px;
  border:1px solid var(--c-line);border-radius:var(--radius-s);background:#fff;
  font-family:inherit;font-size:var(--text-body);line-height:1.7;color:var(--c-ink);
}
.wpcf7 textarea{min-height:180px;resize:vertical}
.wpcf7 input:focus-visible,.wpcf7 textarea:focus-visible,.wpcf7 select:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}
.wpcf7 input[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:54px;padding:13px 32px;border:2px solid transparent;border-radius:var(--radius-pill);
  background:var(--c-brand);color:#fff;cursor:pointer;
  font-family:var(--font-display);font-weight:500;font-size:var(--text-body);
}
.wpcf7 input[type=submit]:hover{background:var(--c-brand-deep)}
/* ハニーポット欄（functions.php の wpcf7_spam で判定）。人には見せず、スクリーンリーダーからも外す */
.wpcf7 .ways-hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);border:0;white-space:nowrap}

/* --- タップ領域の底上げ（実測で44px未満だった箇所） --- */
/* リンクになっているチップ（FAQのページ内ナビ、お知らせのカテゴリーフィルター）は
   ボタン扱いなので44pxにする。お知らせ行の post-terms チップは非リンクなので対象外。 */
.chips a.chip{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.chips a.chip:hover{color:var(--c-brand)}
/* CF7 のラジオ・チェックボックスは入力欄そのものが13pxしかないため、
   ラベル全体を当たり判定にする。 */
.wpcf7 .wpcf7-list-item{margin:0 var(--space-s) 0 0}
.wpcf7 .wpcf7-list-item label{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;font-weight:400}
.wpcf7 input[type=radio],.wpcf7 input[type=checkbox]{width:20px;height:20px;flex:none;accent-color:var(--c-brand)}
/* パンくずは文中のリンクだが、20pxは小さいので24px（WCAG 2.2 AAの下限）まで広げる。
   上下の相殺マージンで行の高さは変えない。 */
.breadcrumb a{display:inline-flex;align-items:center;min-height:24px;margin-block:-2px}

/* スコア表は /score/ ができたのでリンクにした（モックでは開所前で飛び先が無いため
   非リンクの <span> だった）。見た目はフッターの他のリンクに揃える。 */
a.foot__soon{text-decoration:none}
a.foot__soon:hover{color:#fff;text-decoration:underline}

/* お仕事ページの図版＋キャプション。
   `.work-item` は2カラムグリッドで直下の子が左右のセルになるため、
   キャプションを `.ph` の兄弟にすると3つ目の項目になって交互レイアウトが崩れる。
   図版とキャプションを1つの項目にまとめ、`.work-item>.ph` が担っていた
   幅と右寄せの役割をこちらへ移す。 */
.work-item>.work-item__fig{width:100%;max-width:520px}
.work-item>.work-item__fig:last-child{margin-inline-start:auto}
.work-item>.work-item__fig>.ph{max-width:none}
.work-item__fig .note-sm{margin-top:var(--space-xs)}
@media (max-width:900px){
  .work-item>.work-item__fig{order:-1;max-width:none;margin-inline-start:0}
}

/* モックの不具合の是正（2026-09-08 実測で発見）。
   `.work-item:nth-of-type(even){grid-template-columns:2列}`（mock-v4.html 374行）は
   詳細度(0,2,0)が `@media (max-width:900px)` 内の `.work-item`(0,1,0) に勝つため、
   **900px以下で2番目の項目だけ2カラムのまま**になる。375pxでは152px幅の2列に
   潰れ、1・3番目（1カラム）と揃わない。TOPの「お仕事・支援の内容」でも同じ。
   モックCSS本体は凍結しているので、ここで同じ詳細度で打ち直す。 */
@media (max-width:900px){
  .work-item:nth-of-type(even){grid-template-columns:minmax(0,1fr)}
}

/* 2026-09-10 橋本様ご指摘分。QUICK GUIDEは文字だけ下線、矢印は移動のみ。 */
.entrance .tlink:hover{text-decoration:none}
.entrance .tlink:hover .tlink__label{text-decoration:underline}

/* 2行の意味単位をPCで保つ。タブレット以下は自然改行へ戻す。 */
@media (min-width:901px){
  #about .duo--wide-text{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)}
  #about .duo__body h2{font-size:clamp(28px,3vw,40px)}
  #about .statement-line{display:block;white-space:nowrap}
}

/* Smash Balloonはフィード側でヘッダー・ボタンを非表示にし、ここでは余白だけをV4へ合わせる。 */
.ig__feed{min-width:0}
.ig__feed #sb_instagram{height:auto!important;overflow:visible!important;padding:0!important}
.ig__feed #sb_instagram .sb_instagram_header,.ig__feed #sb_instagram #sbi_load{display:none!important}
.ig__feed #sb_instagram #sbi_images{display:flex!important;flex-wrap:wrap;gap:10px;padding:0!important}
.ig__feed #sb_instagram #sbi_images .sbi_item{flex:0 0 calc((100% - 10px)/2)!important;float:none!important;width:calc((100% - 10px)/2)!important}
.ig__feed #sb_instagram #sbi_images .sbi_item:nth-child(n+9){display:none!important}
@media (min-width:901px){
  .ig .h-quiet br{display:none}
  .ig__feed #sb_instagram #sbi_images .sbi_item{flex-basis:calc((100% - 30px)/4)!important;width:calc((100% - 30px)/4)!important}
}