/* ===========================================================
   partner.skk-g.asia — sakuko.group のデザイン言語を継承
   出典：docs/partner-lp/sakuko-group-design-tokens.md
   変更点：金の和文サブタイトルのみ #d4b26f → #8d6b2a（可読性）
           CTAボタン地を #bd7194 → #a04e72（白文字 5.49:1。2026-09-18 に #8e556f から変更）
   =========================================================== */
:root{
  --navy:#222f63;
  --navy-deep:#1e234d;
  --mauve:#bd7194;
  --mauve-dark:#8e556f;
  --cta:#a04e72;          /* .btn--cta（ヘッダーの「相談を予約」）。白文字 5.49:1 */
  --cta-hover:#884261;    /* 白文字 7.00:1 */
  --gold:#8d6b2a;
  --bg:#f4f6fe;
  --bg-header:#ecf0fe;
  --surface:#ffffff;
  --muted:#666;
  --ring:#dcdcdc;
  --grad:linear-gradient(135deg,#222f63 0%,#bd7194 100%);
  --grad-rev:linear-gradient(45deg,#bd7194,#222f63);

  --font-en:"Outfit",sans-serif;
  --font-base:"Outfit","Yu Gothic",YuGothic,"Hiragino Kaku Gothic Pro",Meiryo,sans-serif;
  --ls:.15em;

  --container:1200px;
  --pad:48px;
  --article:900px;
  --py:96px;
  --py-c:64px;
  --header-h:74px;
  --card-pad:32px;
  --gap-l:36px;

  --r:10px;
  --r-xs:4px;
  --r-pill:40px;
  --r-cta:80px;

  --sh-card:0 4px 16px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.05);
  --sh-btn:0 2px 2px rgba(0,0,0,.1),0 4px 8px -4px rgba(0,0,0,.2);
  --sh-head:0 2px 4px rgba(0,0,0,.12);
  --t:.25s;
}
@media(max-width:600px){
  :root{--pad:4vw;--py:62.4px;--py-c:31.2px;--header-h:64px;--card-pad:23.4px;--gap-l:16px}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--navy);
  font-family:var(--font-base);font-weight:500;
  font-size:16px;line-height:1.8;
}
@media(max-width:600px){body{font-size:4vw}}
img{max-width:100%;display:block;border-radius:var(--r)}
a{color:var(--mauve-dark)}
h1,h2,h3{margin:0;line-height:1.4;font-weight:600}
p{margin:0 0 1.4em}
.wrap{max-width:calc(var(--container) + var(--pad)*2);margin:0 auto;padding-inline:var(--pad)}
.narrow{max-width:var(--article)}
:focus-visible{outline:2px solid var(--mauve-dark);outline-offset:3px}
/* 画面には出さず、読み上げにだけ渡す（図の矢印を aria-hidden にした分を補う）*/
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ── header ─────────────────────────── */
.topbar{
  background:var(--navy);color:#fff;font-family:var(--font-en);
  font-size:12px;letter-spacing:var(--ls);padding:6px 0;text-align:center;
}
.topbar span{font-family:var(--font-base);font-weight:500}
.head{position:sticky;top:0;z-index:50;background:var(--bg-header);box-shadow:var(--sh-head)}
.head__in{display:flex;align-items:center;gap:32px;min-height:var(--header-h)}
.brand{text-decoration:none;color:var(--navy);line-height:1.3}
.brand b{display:block;font-family:var(--font-en);font-size:19px;font-weight:600;letter-spacing:.08em}
.brand span{display:block;font-size:11px;letter-spacing:.1em;color:var(--muted);font-weight:500}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav a{font-family:var(--font-en);font-size:14px;letter-spacing:var(--ls);text-decoration:none;color:var(--navy)}
.nav a:hover{color:var(--mauve-dark)}
.nav a em{font-style:normal;font-family:var(--font-base);font-size:11px;display:block;letter-spacing:.06em;color:var(--muted)}
@media(max-width:960px){.nav{display:none}}
/* 961px（PC ナビが出る最初の幅）で 5 項目目が折り返すため、狭い側だけ間隔を詰める。
   実測: gap 26px は 961px で ABOUT が 2 行になる（余白 32px）。22px なら余白 52px */
@media(min-width:961px) and (max-width:1100px){.nav{gap:22px}}
/* SP (<=960px): the PC nav is hidden, so keep the CTA in the sticky header and
   add a hamburger menu built on <details> (no JavaScript). ".head .head__cta" outranks
   the later ".btn" rule, which would otherwise restore display and padding. It closes when the
   summary is tapped again or the page changes, not on an outside tap. */
.head .head__cta,.spmenu{display:none}
@media(max-width:960px){
  .head__in{gap:10px}
  .head .head__cta{display:inline-flex;margin-left:auto;padding:10px 16px;font-size:13px;letter-spacing:.08em;white-space:nowrap}
  .spmenu{display:block}
  .spmenu>summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:44px;height:44px;color:var(--navy)}
  .spmenu>summary::-webkit-details-marker{display:none}
  .spmenu__icon,.spmenu__icon::before,.spmenu__icon::after{display:block;width:22px;height:2px;border-radius:2px;background:currentColor;transition:transform var(--t),background-color var(--t)}
  .spmenu__icon{position:relative}
  .spmenu__icon::before,.spmenu__icon::after{content:"";position:absolute;left:0}
  .spmenu__icon::before{top:-7px}
  .spmenu__icon::after{top:7px}
  .spmenu[open] .spmenu__icon{background:transparent}
  .spmenu[open] .spmenu__icon::before{top:0;transform:rotate(45deg)}
  .spmenu[open] .spmenu__icon::after{top:0;transform:rotate(-45deg)}
  .spmenu__panel{position:absolute;left:0;right:0;top:100%;display:grid;padding:4px var(--pad) 16px;background:var(--bg-header);box-shadow:var(--sh-head)}
  .spmenu__panel a{display:block;padding:14px 2px;border-bottom:1px solid rgba(34,47,99,.1);font-family:var(--font-en);font-size:15px;letter-spacing:var(--ls);color:var(--navy);text-decoration:none}
  .spmenu__panel a:last-child{border-bottom:0}
  .spmenu__panel a em{display:block;font-style:normal;font-family:var(--font-base);font-size:12px;letter-spacing:.06em;color:var(--muted)}
}
/* <=360px: show only the English logotype (the Japanese line would wrap mid-word) */
@media(max-width:360px){.brand span{display:none}}

/* ── buttons ────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-base);font-size:14px;font-weight:600;letter-spacing:var(--ls);
  padding:16px 40px;text-decoration:none;border-radius:var(--r-cta);
  transition:var(--t);border:1px solid transparent;
}
.btn--cta{background:var(--cta);color:#fff;box-shadow:var(--sh-btn);font-weight:700}
.btn--cta:hover{background:var(--cta-hover);color:#fff}
/* ヘッダーのナビ内では ".nav a"（navy）と ".nav a:hover" の文字色が .btn--cta の白に勝っていた（2.22:1）。詳細度を上げて白に戻す */
.nav .btn--cta,.nav .btn--cta:hover{color:#fff}
.btn--line{background:transparent;color:var(--navy);border-color:var(--ring);border-radius:var(--r-pill);padding:14px 34px}
.btn--line:hover{background:#fff;color:var(--navy)}
.btn--onnavy{background:#fff;color:var(--navy)}
.btn--onnavy:hover{background:#eef1fb;color:var(--navy)}
.btns{display:flex;flex-wrap:wrap;gap:16px}

/* ── section heading（sakuko の型を継承）─ */
.sec{padding-block:var(--py)}
.sec--white{background:var(--surface)}
.sh{margin-bottom:56px}
.sh__en{display:block;font-family:var(--font-en);font-size:56px;font-weight:400;letter-spacing:var(--ls);line-height:1.2;color:var(--navy)}
.sh__ja{display:block;font-size:20px;font-weight:600;letter-spacing:var(--ls);color:var(--gold);margin-top:6px}
.sh__lead{max-width:var(--article);margin-top:24px;margin-bottom:0}
@media(max-width:600px){.sh__en{font-size:min(38px,8.6vw)}.sh__ja{font-size:15px}.sh{margin-bottom:36px}}

/* ── hero ───────────────────────────── */
.hero{background:var(--grad);color:#fff;overflow:hidden}
.hero__in{padding-block:clamp(56px,10vw,120px)}
.hero h1{font-size:clamp(28px,5.4vw,54px);font-weight:600;letter-spacing:.1em;line-height:1.5;margin-bottom:28px}
.hero__en{font-family:var(--font-en);font-size:14px;font-weight:400;letter-spacing:var(--ls);color:rgba(255,255,255,.72);display:block;margin-bottom:18px}
.hero__lead{max-width:640px;color:rgba(255,255,255,.92);margin-bottom:36px}
.hero .btn--line{color:#fff;border-color:rgba(255,255,255,.6)}
.hero .btn--line:hover{background:rgba(255,255,255,.12);color:#fff}

/* ── 相談の実例 ─────────────────────── */
.qa{display:grid;gap:20px}
@media(min-width:961px){.qa{grid-template-columns:1fr 1fr;gap:var(--gap-l)}}
.qa__i{background:var(--surface);border-radius:var(--r);padding:var(--card-pad);box-shadow:var(--sh-card)}
.qa__q{font-size:18px;font-weight:600;line-height:1.6;margin-bottom:14px;letter-spacing:.04em}
.qa__a{color:var(--navy-deep);font-size:15px;margin:0}

/* ── 役割図（トップの OUR ROLE）─────────
   3 つの箱を 5 列グリッドに並べ、2 行目に契約の破線を引く。破線は同じグリッドの
   1 列目と 5 列目に「幅 50%」の角を置いて作るので、箱の中央から正確に降りる
   （列幅を推定する calc() は使わない）。矢印と破線は装飾なので aria-hidden にし、
   意味は図の直後の .sr-only と下の .callout が持つ。 */
.rolemap{
  display:grid;align-items:stretch;
  /* 左右の箱は 2 列ぶん（.5fr + .5fr）を占める。こうすると列の境目がそのまま
     箱の中央になり、契約の線を「2 列目の始まりから 7 列目の始まりまで」置くだけで
     両端が箱の中央に一致する。幅を推定する計算は要らない */
  grid-template-columns:.5fr .5fr 150px 1.15fr 150px .5fr .5fr;
  /* 2 行目は線の高さに固定する。帯の高さで行が伸びると、帯の中心が線から下にずれる */
  grid-template-rows:auto 34px;
  row-gap:18px;margin-bottom:56px;
}
/* fr の既定は min-width:auto。中身の幅で列が広がると 2 行目の破線とずれるので 0 にする */
.rolemap>*{min-width:0}
.rolemap__node{
  grid-column:span 2;                /* 左右の箱。ハブだけ下で 1 列に戻す */
  background:var(--bg);border-radius:var(--r);padding:28px 20px;text-align:center;
  display:flex;flex-direction:column;justify-content:center;
}
.rolemap__en{font-family:var(--font-en);font-size:11px;letter-spacing:var(--ls);color:var(--muted);margin-bottom:6px}
.rolemap__t{font-size:18px;font-weight:600;letter-spacing:.06em;margin:0 0 8px}
.rolemap__d{font-size:13px;color:var(--muted);margin:0;line-height:1.7}
.rolemap__node--hub{grid-column:span 1;background:var(--grad);color:#fff;box-shadow:0 10px 26px rgba(34,47,99,.22)}
.rolemap__node--hub .rolemap__en,.rolemap__node--hub .rolemap__d{color:rgba(255,255,255,.82)}
.rolemap__node--hub .rolemap__t{font-size:20px}
.rolemap__badge{
  display:inline-block;margin:0 auto 12px;font-size:11px;font-weight:600;letter-spacing:.12em;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45);
  padding:3px 12px;border-radius:var(--r-pill);
}
/* 矢印（往復） */
.rolemap__link{display:flex;flex-direction:column;justify-content:center;gap:14px;padding-inline:6px}
.rolemap__arrow{
  position:relative;text-align:center;padding-bottom:12px;
  font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--navy);
}
.rolemap__arrow::before{content:"";position:absolute;left:4px;right:10px;bottom:4px;height:2px;background:var(--navy)}
.rolemap__arrow::after{
  content:"";position:absolute;right:4px;bottom:0;
  border-left:9px solid var(--navy);border-top:5px solid transparent;border-bottom:5px solid transparent;
}
.rolemap__arrow--back{color:var(--mauve-dark)}
.rolemap__arrow--back::before{left:10px;right:4px;background:var(--mauve-dark)}
.rolemap__arrow--back::after{right:auto;left:4px;border-left:0;border-right:9px solid var(--mauve-dark)}
/* 契約の線。左の縦線・横線・右の縦線を 1 つの要素の border で描く。
   部品を 3 つに分けると、点線の位相が要素ごとに切り替わり、継ぎ目で段差が出る */
.rolemap__contract{
  grid-row:2;grid-column:2 / 7;height:34px;
  border:2px dashed var(--gold);border-top:0;
  border-bottom-left-radius:10px;border-bottom-right-radius:10px;
}
.rolemap__tag{
  grid-row:2;grid-column:1 / -1;justify-self:center;align-self:end;
  transform:translateY(50%);position:relative;z-index:1;margin:0;
  background:var(--surface);border:1px solid var(--gold);color:var(--gold);
  font-size:13px;font-weight:600;letter-spacing:.06em;padding:6px 18px;border-radius:var(--r-pill);
}
.rolemap__tag b{color:var(--navy)}
/* SP：縦並び。矢印も縦向きにし、破線は出さない（下の帯で同じことを伝える）*/
@media(max-width:960px){
  .rolemap{grid-template-columns:1fr;grid-template-rows:none;row-gap:0;margin-bottom:40px}
  .rolemap__node,.rolemap__node--hub{grid-column:auto}
  .rolemap__link{flex-direction:row;justify-content:center;gap:28px;padding:14px 0}
  .rolemap__arrow{padding:0 0 0 18px;text-align:left}
  .rolemap__arrow::before{left:6px;right:auto;top:2px;bottom:2px;width:2px;height:auto}
  .rolemap__arrow::after{
    left:2px;right:auto;bottom:-3px;
    border-left:5px solid transparent;border-right:5px solid transparent;
    border-top:9px solid var(--navy);border-bottom:0;
  }
  .rolemap__arrow--back::before{left:6px;right:auto}
  .rolemap__arrow--back::after{
    left:2px;top:-3px;bottom:auto;
    border-top:0;border-bottom:9px solid var(--mauve-dark);
    border-left:5px solid transparent;border-right:5px solid transparent;
  }
  .rolemap__contract{display:none}
  .rolemap__tag{
    grid-row:auto;grid-column:auto;justify-self:stretch;transform:none;
    margin-top:22px;text-align:center;border-radius:var(--r);
  }
}
.callout{background:var(--surface);border-radius:var(--r);padding:var(--card-pad);box-shadow:var(--sh-card);max-width:var(--article);border-left:4px solid var(--mauve)}
.callout p{margin:0;font-size:15px}
.callout b{color:var(--mauve-dark)}

/* ── 現地基盤 ───────────────────────── */
.base{display:grid;gap:var(--gap-l);margin-bottom:32px}
@media(min-width:601px){.base{grid-template-columns:repeat(2,1fr)}}
@media(min-width:961px){.base{grid-template-columns:repeat(4,1fr)}}
.base__c{background:var(--surface);border-radius:var(--r);padding:28px 24px;box-shadow:var(--sh-card);text-align:center}
.base__en{font-family:var(--font-en);font-size:12px;letter-spacing:var(--ls);color:var(--gold);display:block;margin-bottom:12px}
.base__n{font-family:var(--font-en);font-size:40px;font-weight:600;line-height:1.1;margin:0 0 12px}
.base__n small{font-family:var(--font-base);font-size:14px;font-weight:600;margin-left:4px}
.base__n--word{font-family:var(--font-base);font-size:24px;padding-block:7px}
.base__t{font-size:15px;font-weight:600;letter-spacing:.06em;margin-bottom:6px}
.base__d{font-size:13px;color:var(--muted);margin:0}
.facts{background:var(--surface);border-radius:var(--r);padding:24px var(--card-pad);box-shadow:var(--sh-card);display:flex;flex-wrap:wrap;gap:10px 44px;align-items:baseline}
.facts dl{display:flex;gap:12px;align-items:baseline;margin:0}
.facts dt{font-size:12px;letter-spacing:.1em;color:var(--muted)}
.facts dd{margin:0;font-weight:600;font-size:16px}
.asof{font-size:12px;color:var(--muted);margin-top:14px;letter-spacing:.04em}

/* ── 支援領域 ───────────────────────── */
.svc{display:grid;gap:16px;margin-bottom:40px}
@media(min-width:601px){.svc{grid-template-columns:1fr 1fr}}
@media(min-width:961px){.svc{grid-template-columns:repeat(4,1fr)}}
.svc__i{background:var(--surface);border-radius:var(--r);padding:24px 22px;box-shadow:var(--sh-card)}
.svc__n{font-family:var(--font-en);font-size:13px;letter-spacing:.1em;color:var(--mauve-dark);display:block;margin-bottom:10px}
.svc__t{font-size:15px;font-weight:600;line-height:1.6;letter-spacing:.04em;margin:0 0 8px}
.svc__d{font-size:13px;color:var(--muted);margin:0;line-height:1.7}

/* ── 事例 ───────────────────────────── */
.cases{display:grid;gap:var(--gap-l)}
@media(min-width:961px){.cases{grid-template-columns:1fr 1fr}}
.case{background:var(--surface);border-radius:var(--r);padding:var(--card-pad);box-shadow:var(--sh-card)}
.case--wait{background:rgba(255,255,255,.55);box-shadow:none;border:1px dashed var(--ring)}
.case__lb{font-family:var(--font-en);font-size:11px;letter-spacing:var(--ls);color:var(--mauve-dark);margin-bottom:12px}
.case__t{font-size:18px;font-weight:600;letter-spacing:.04em;margin:0 0 12px;line-height:1.6}
.case__d{font-size:14px;color:var(--muted);margin:0}

/* ── 流れ ───────────────────────────── */
.flow{display:grid;gap:12px;margin-bottom:28px}
.flow__i{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh-card);padding:22px var(--card-pad);display:grid;gap:6px 24px;align-items:baseline;grid-template-columns:44px 1fr}
@media(min-width:961px){.flow__i{grid-template-columns:44px 1fr 150px 130px}}
.flow__n{font-family:var(--font-en);font-size:28px;font-weight:400;color:var(--mauve-dark);line-height:1}
.flow__t{font-size:16px;font-weight:600;letter-spacing:.04em}
.flow__t em{display:block;font-style:normal;font-weight:500;font-size:13px;color:var(--muted);margin-top:4px}
.flow__m{font-size:13px;color:var(--muted)}
@media(max-width:960px){.flow__m{grid-column:2}}

/* ── お受けできないこと ─────────────── */
.nope{list-style:none;padding:0;margin:0;display:grid;gap:12px;max-width:var(--article)}
.nope li{background:var(--surface);border-radius:var(--r-xs);padding:18px 24px 18px 52px;position:relative;font-size:15px;box-shadow:var(--sh-card)}
.nope li::before{content:"";position:absolute;left:24px;top:30px;width:14px;height:2px;background:var(--mauve)}

/* ── FAQ ────────────────────────────── */
.faq{max-width:var(--article)}
.faq details{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh-card);margin-bottom:12px}
.faq summary{cursor:pointer;list-style:none;padding:22px 56px 22px var(--card-pad);font-size:16px;font-weight:600;letter-spacing:.04em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:30px;top:28px;width:9px;height:9px;border-right:2px solid var(--mauve-dark);border-bottom:2px solid var(--mauve-dark);transform:rotate(45deg);transition:transform var(--t)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{padding:0 var(--card-pad) 24px;margin:0;font-size:14px;color:var(--navy-deep)}

/* ── CTA ────────────────────────────── */
.cta{background:var(--grad-rev);color:#fff;padding-block:var(--py)}
.cta .sh__en{color:#fff}
.cta .sh__ja{color:rgba(255,255,255,.88)}
.cta p{color:rgba(255,255,255,.92);max-width:var(--article)}
.cta .btn--line{color:#fff;border-color:rgba(255,255,255,.6)}
.cta .btn--line:hover{background:rgba(255,255,255,.12);color:#fff}

/* ── footer ─────────────────────────── */
.footband{height:6px;background:var(--grad-rev)}
.foot{background:var(--navy);color:rgba(255,255,255,.82);padding-block:56px 32px;font-size:13px}
.foot a{color:rgba(255,255,255,.82);text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot__nav{display:flex;flex-wrap:wrap;gap:10px 32px;margin-bottom:40px}
.foot__ext{border-top:1px solid rgba(255,255,255,.2);padding-top:28px;max-width:var(--article)}
.foot__ext p{margin:0}
.foot__c{margin-top:36px;font-size:11px;color:rgba(255,255,255,.55);letter-spacing:.06em}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ── スクロール時のフェードイン（assets/js/partner.js）──────────
   sakuko.group の .fadein（下から 30px・1.5 秒・ease）を 0.7 秒に短縮。
   隠すのは JS が html に js-fade を付けたときだけ。JS が無い環境では最初から見えている。
   対象は見出しブロック（.sh）とカード。ヘッダーとヒーローには付けない */
:root{--fade-y:30px;--fade-t:.7s}
/* transition は表示側だけ: 隠すのは一瞬（画面外で消えかけの途中が見えないように）、現れるときだけ動かす */
.js-fade .fade{opacity:0;transform:translateY(var(--fade-y))}
.js-fade .fade.is-in{opacity:1;transform:none;transition:opacity var(--fade-t) ease,transform var(--fade-t) ease}
/* 動きを減らす設定（JS も動かさない）と印刷では、常に表示 */
@media(prefers-reduced-motion:reduce){.js-fade .fade{opacity:1;transform:none}}
@media print{.js-fade .fade{opacity:1;transform:none;transition:none}}

/* ===========================================================
   下層ページ共通
   =========================================================== */
.phero{background:var(--grad);color:#fff;padding-block:clamp(44px,7vw,80px)}
.phero__crumb{font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.7);margin-bottom:18px}
.phero__crumb a{color:rgba(255,255,255,.7);text-decoration:none}
.phero__crumb a:hover{color:#fff}
.phero__en{display:block;font-family:var(--font-en);font-size:14px;font-weight:400;letter-spacing:var(--ls);color:rgba(255,255,255,.72);margin-bottom:12px}
.phero h1{font-size:clamp(26px,4.4vw,40px);font-weight:600;letter-spacing:.1em;line-height:1.5;margin-bottom:20px}
.phero__lead{max-width:640px;color:rgba(255,255,255,.92);margin:0}
.phero .btns{margin-top:32px}
.phero .btn--line{color:#fff;border-color:rgba(255,255,255,.6)}
.phero .btn--line:hover{background:rgba(255,255,255,.12);color:#fff}

/* 本文ブロック */
.prose{max-width:var(--article)}
.prose h2{font-size:24px;letter-spacing:.06em;margin:56px 0 18px;padding-left:16px;border-left:4px solid var(--mauve)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:18px;letter-spacing:.04em;margin:32px 0 12px}
.prose ul{padding-left:1.3em;margin:0 0 1.4em}
.prose li{margin-bottom:.5em}
.prose .lead{font-size:17px}

/* 詳細カード（支援領域の詳細など） */
.detail{display:grid;gap:20px}
.detail__i{background:var(--surface);border-radius:var(--r);padding:var(--card-pad);box-shadow:var(--sh-card)}
.detail__n{font-family:var(--font-en);font-size:13px;letter-spacing:.1em;color:var(--mauve-dark);display:block;margin-bottom:10px}
.detail__t{font-size:19px;font-weight:600;letter-spacing:.04em;margin:0 0 12px}
.detail__d{font-size:15px;margin:0 0 16px}
.detail__sub{font-size:12px;letter-spacing:.1em;color:var(--muted);margin:0 0 8px}
.detail ul{padding-left:1.2em;margin:0;font-size:14px;color:var(--navy-deep)}
.detail li{margin-bottom:.4em}
.detail__out{margin-top:16px;padding-top:16px;border-top:1px solid rgba(199,199,199,.5);font-size:14px}
.detail__out b{color:var(--mauve-dark)}

/* 定義テーブル（会社概要など） */
.dtable{width:100%;border-collapse:collapse;background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-card);font-size:15px}
.dtable th,.dtable td{text-align:left;padding:18px 24px;border-bottom:1px solid rgba(199,199,199,.4);vertical-align:top}
.dtable tr:last-child th,.dtable tr:last-child td{border-bottom:0}
.dtable th{width:180px;font-weight:600;font-size:14px;letter-spacing:.06em;color:var(--muted);background:rgba(244,246,254,.6)}
@media(max-width:600px){
  .dtable th,.dtable td{display:block;width:auto;padding:14px 20px}
  .dtable th{border-bottom:0;padding-bottom:4px}
}

/* ステップ（大きめ） */
.steps{display:grid;gap:20px}
.step{background:var(--surface);border-radius:var(--r);padding:var(--card-pad);box-shadow:var(--sh-card)}
.step__h{display:flex;gap:18px;align-items:baseline;margin-bottom:16px}
.step__n{font-family:var(--font-en);font-size:34px;font-weight:400;color:var(--mauve-dark);line-height:1}
.step__t{font-size:20px;font-weight:600;letter-spacing:.04em}
.step__t em{display:block;font-style:normal;font-weight:500;font-size:13px;color:var(--muted);margin-top:4px;letter-spacing:.06em}
.step__body{font-size:15px}
.step__body p:last-child{margin-bottom:0}
.step__note{margin-top:16px;padding:14px 18px;background:var(--bg);border-radius:var(--r-xs);font-size:14px}
.step__note b{color:var(--mauve-dark)}

/* 2カラム */
.cols{display:grid;gap:var(--gap-l)}
@media(min-width:961px){.cols{grid-template-columns:1fr 1fr}}

/* 注意書き */
.caution{background:var(--surface);border-radius:var(--r);padding:var(--card-pad);box-shadow:var(--sh-card);border-left:4px solid var(--gold);max-width:var(--article)}
.caution p:last-child{margin-bottom:0}

/* 未確定プレースホルダ（公開前に置換） */
.tbd{background:#fff6e5;border:1px dashed #d4a72c;border-radius:var(--r-xs);padding:2px 10px;font-size:13px;color:#8d6b2a}

/* ===========================================================
   お問い合わせフォーム — sakuko.group /contact/（WPForms Lite 2.0.1.1）の見た目を再現
   値は 2026-09-18 の計測（docs/contact-form.md）。変えたのは次の 3 点だけ:
   - 送信ボタンの地 #bd7194 → --mauve-dark（白文字 17px のコントラスト 3.53 → 5.71）
   - フォーカス色 #066aab（WPForms 既定の青）→ --navy
   - 送信ボタンのホバーで地を濃くする（sakuko は変化なし。.btn--cta と揃える）
   JavaScript は使わない。エラー表示は :user-invalid（入力後か送信を試みた後にだけ効く）
   =========================================================== */
:root{
  --cf-max:600px;                 /* フォームの幅 */
  --cf-field-py:15px;             /* 項目の上下の余白 */
  --cf-label-size:16px;
  --cf-label-color:rgba(0,0,0,.85);
  --cf-label-gap:15px;            /* ラベルと入力欄の間 */
  --cf-input-h:43px;
  --cf-input-px:14px;
  --cf-input-size:16px;           /* 16px 未満だと iOS が入力時に拡大する */
  --cf-input-color:rgba(0,0,0,.7);
  --cf-input-bg:#fff;
  --cf-border:rgba(0,0,0,.25);
  --cf-radius:3px;
  --cf-textarea-h:120px;
  --cf-col-gap:20px;              /* 姓・名の間 */
  --cf-focus:var(--navy);
  --cf-error:#d63637;             /* エラー文字・枠・必須の * */
  --cf-error-gap:15px;
  --cf-btn-bg:var(--mauve-dark);
  --cf-btn-bg-hover:#7a4760;
  --cf-btn-max:300px;
  --cf-btn-h:41px;
  --cf-btn-radius:30px;
  --cf-btn-size:17px;
  --cf-t:border-color .15s,box-shadow .15s;
}
.cform-wrap{max-width:var(--cf-max);margin-inline:auto}
.cform-intro{font-size:15px;margin:0 0 9px}
.cform{margin:0;font-size:16px}
.cform__field{border:0;margin:0;padding:var(--cf-field-py) 0;min-width:0}
.cform__label{display:block;padding:0;margin:0 0 var(--cf-label-gap);font-size:var(--cf-label-size);font-weight:700;line-height:1.2;color:var(--cf-label-color)}
/* legend は fieldset の上枠に置かれ、fieldset の上余白がその下に入る。float で通常の行に戻す */
.cform__field>legend{float:left;width:100%}
.cform__field>legend+*{clear:both}
.cform__req{color:var(--cf-error);font-weight:400;margin-left:.25em}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--cf-col-gap)}
.cform__input{
  display:block;width:100%;height:var(--cf-input-h);margin:0;padding:0 var(--cf-input-px);
  font:400 var(--cf-input-size)/1.2 var(--font-base);color:var(--cf-input-color);
  background:var(--cf-input-bg);border:1px solid var(--cf-border);border-radius:var(--cf-radius);
  box-shadow:none;transition:var(--cf-t);-webkit-appearance:none;appearance:none;
}
textarea.cform__input{height:var(--cf-textarea-h);padding:var(--cf-input-px);line-height:1.6;resize:vertical}
.cform__input::placeholder{color:var(--cf-input-color);opacity:.5}
.cform__input:focus{outline:none;border-color:var(--cf-focus);box-shadow:0 0 0 1px var(--cf-focus),0 1px 2px rgba(0,0,0,.15)}
.cform__input:user-invalid{border-color:var(--cf-error)}
.cform__input:user-invalid:hover{box-shadow:0 0 2px 0 var(--cf-error)}
.cform__input:user-invalid:focus{border-color:var(--cf-error);box-shadow:0 0 0 1px var(--cf-error)}
.cform__err{display:none;margin:var(--cf-error-gap) 0 0;font-size:.9em;font-weight:400;line-height:1.2;color:var(--cf-error)}
.cform__err::before{
  content:"";display:inline-block;width:16px;height:14px;margin-right:5px;vertical-align:-2px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath fill-rule='evenodd' d='M8 .6 15.5 13.4H.5ZM7.1 4.6h1.8v4.6H7.1ZM7 11.2a1 1 0 1 0 2 0 1 1 0 1 0-2 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath fill-rule='evenodd' d='M8 .6 15.5 13.4H.5ZM7.1 4.6h1.8v4.6H7.1ZM7 11.2a1 1 0 1 0 2 0 1 1 0 1 0-2 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cform__input:user-invalid~.cform__err{display:block}
/* メールアドレス: 空欄なら「必須」、何か入っていれば「形式」（placeholder=" " なので :placeholder-shown = 空欄） */
.cform__input:user-invalid:placeholder-shown~.cform__err--format,
.cform__input:user-invalid:not(:placeholder-shown)~.cform__err--empty{display:none}
/* honeypot: 画面外に置く（display:none だと読み飛ばすボットがいる） */
.cform__hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.cform__note{font-size:13px;color:var(--muted);margin:14px 0 0}
.cform__submit{margin-top:10px}
.cform__btn{
  position:relative;display:block;width:100%;max-width:var(--cf-btn-max);height:var(--cf-btn-h);margin:2em auto 0;padding:0 15px;
  font:500 var(--cf-btn-size)/1 var(--font-base);color:#fff;background:var(--cf-btn-bg);
  border:0;border-radius:var(--cf-btn-radius);cursor:pointer;transition:background-color var(--t);
}
.cform__btn:hover{background:var(--cf-btn-bg-hover)}
.cform__btn:focus{outline:none}
.cform__btn:focus-visible::after{content:"";position:absolute;inset:-4px;border:2px solid var(--cf-btn-bg);border-radius:calc(var(--cf-btn-radius) + 4px)}
/* 送信後のページ（完了・エラー） */
.cform-msg{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh-card);padding:var(--card-pad);font-size:15px}
.cform-msg p:last-child{margin-bottom:0}
.cform-msg__list{margin:0 0 1.4em;padding-left:1.2em;color:var(--cf-error)}
.cform-back{margin:32px 0 0;text-align:center}

/* ===========================================================
   /consultation/ 予約ウィジェット
   =========================================================== */
.spir{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh-card);padding:24px;max-width:var(--article)}
.spir .spir-widget{min-width:280px;height:650px}
@media(max-width:600px){
  .spir{padding:14px}
  .spir .spir-widget{height:760px}
}
.spir__fb{
  margin-top:18px;padding-top:18px;border-top:1px solid rgba(199,199,199,.5);
  font-size:13px;color:var(--muted);
}
.spir__fb a{font-weight:600}

/* 当日の流れ（時間つき） */
.agenda{display:grid;gap:14px;max-width:var(--article)}
.agenda__i{
  background:var(--surface);border-radius:var(--r);box-shadow:var(--sh-card);
  padding:24px var(--card-pad);display:grid;gap:4px 22px;grid-template-columns:70px 1fr;align-items:baseline;
}
.agenda__m{font-family:var(--font-en);font-size:14px;letter-spacing:.08em;color:var(--mauve-dark)}
.agenda__t{font-size:17px;font-weight:600;letter-spacing:.04em;margin:0 0 8px}
.agenda ul{margin:0;padding-left:1.2em;font-size:14px;color:var(--navy-deep)}
.agenda li{margin-bottom:.35em}
@media(max-width:600px){.agenda__i{grid-template-columns:1fr}.agenda__m{margin-bottom:6px}}

/* ===========================================================
   /privacy/ 規約テキスト
   =========================================================== */
.terms{max-width:var(--article)}
.terms__updated{font-size:13px;color:var(--muted);margin-bottom:36px;letter-spacing:.04em}
.terms h2{
  font-size:19px;letter-spacing:.06em;margin:44px 0 16px;
  padding-left:16px;border-left:4px solid var(--mauve);
}
.terms h2:first-of-type{margin-top:0}
.terms p{font-size:15px;margin-bottom:1.2em}
.terms ul{padding-left:1.3em;margin:0 0 1.4em;font-size:15px}
.terms li{margin-bottom:.5em}
.terms__box{
  background:var(--surface);border-radius:var(--r);box-shadow:var(--sh-card);
  padding:var(--card-pad);margin:28px 0;
}
.terms__box p:last-child{margin-bottom:0}
.terms__box b{color:var(--mauve-dark)}
.terms dl{margin:0}
.terms dt{font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--mauve-dark);margin-top:18px}
.terms dt:first-child{margin-top:0}
.terms dd{margin:4px 0 0;font-size:15px}

/* ===========================================================
   ヒーロー写真帯（3行・横スクロール）
   partner.css の末尾に追記する
   =========================================================== */
.hero__strip{
  margin-top:56px;
  aspect-ratio:16/6;
  border-radius:var(--r);
  overflow:hidden;
  display:grid;
  grid-template-rows:1fr 1fr 1fr;
  gap:8px;
  position:relative;
  background:rgba(255,255,255,.06);
}
/* 左右のフェード。文字が乗る側を少し濃くする */
.hero__strip::before,
.hero__strip::after{
  content:"";position:absolute;top:0;bottom:0;width:72px;z-index:2;pointer-events:none;
}
.hero__strip::before{left:0;background:linear-gradient(90deg,rgba(34,47,99,.5),transparent)}
.hero__strip::after{right:0;background:linear-gradient(270deg,rgba(189,113,148,.45),transparent)}

.hero__row{overflow:hidden;position:relative}
/* gap ではなく img の margin-right で間隔をとる。
   gap だと track 幅が 10*w+9*gap になり、translateX(-50%) が
   1セット分（5*w+5*gap）に 4px 足りず、ループのたびに継ぎ目が出る。 */
.hero__track{
  display:flex;height:100%;width:max-content;
  will-change:transform;
}
/* width:auto が要る。img の width="800" は presentational hint として
   width:800px に効き、幅と高さが両方決まると aspect-ratio が無視されるため。 */
.hero__track > img{
  flex:none;height:100%;width:auto;aspect-ratio:4/3;margin-right:8px;
  object-fit:cover;border-radius:5px;display:block;
  background:#1a2340;
}
.hero__row:nth-child(1) .hero__track{animation:heroL 46s linear infinite}
.hero__row:nth-child(2) .hero__track{animation:heroR 58s linear infinite}
.hero__row:nth-child(3) .hero__track{animation:heroL 40s linear infinite}

@keyframes heroL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes heroR{from{transform:translateX(-50%)}to{transform:translateX(0)}}

@media(max-width:600px){
  .hero__strip{margin-top:36px;aspect-ratio:16/9;gap:6px}
  .hero__track > img{margin-right:6px}
  .hero__strip::before,.hero__strip::after{width:40px}
}

/* 動きを減らす設定・印刷時は停止 */
@media(prefers-reduced-motion:reduce){
  .hero__row:nth-child(n) .hero__track{animation:none}
}
@media print{
  .hero__row:nth-child(n) .hero__track{animation:none}
}

/* ===========================================================
   /insights/ 記事一覧
   カードはトップの「連携の事例」（.cases / .case）をそのまま使う。
   ここで足すのは、1 カラム指定・タイトルのリンク・タグ・ページャだけ。
   =========================================================== */
.cases--1{max-width:var(--article)}
@media(min-width:961px){.cases--1{grid-template-columns:1fr}}
@media(min-width:961px){.cases--3{grid-template-columns:repeat(3,1fr)}}
.case__lb time{font-family:var(--font-en)}
.case__lb span{font-family:var(--font-base);letter-spacing:.04em}
.case__t a{color:inherit;text-decoration:none}
.case__t a:hover{color:var(--mauve-dark);text-decoration:underline}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.tag{font-size:12px;line-height:1.6;letter-spacing:.06em;color:var(--muted);background:var(--surface);border:1px solid var(--ring);border-radius:var(--r-pill);padding:3px 12px}
.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:var(--article);margin-top:48px}
.pager__n{font-family:var(--font-en);font-size:13px;letter-spacing:var(--ls);color:var(--muted)}
/* カード全体をリンクにする（トップの INSIGHTS と一覧の両方で使う）*/
.case--link{display:block;text-decoration:none;color:inherit;transition:transform var(--t),box-shadow var(--t)}
.case--link:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.12)}
.case--link:hover .case__t{color:var(--mauve-dark)}
/* トップの INSIGHTS：見出しと「記事一覧へ」を両端に置く */
.ins__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px}
.ins__head .sh{margin:0}
@media(max-width:600px){.ins__head{margin-bottom:28px}}

/* ===========================================================
   /insights/ 記事本文 — .prose の拡張（記事にだけ効かせる）
   既存 11 ページの .prose は p / b / h2 / h3 / ul / li しか使っておらず、
   そこには一切手を入れない。記事のために足した指定は全部この --art の下に置く。
   本文は <div class="prose prose--art"> で囲む。
   =========================================================== */
.prose--art>:first-child{margin-top:0}
.prose--art p{margin:0 0 1.5em}

/* 本文中のリンク（既存ページの .prose には <a> が無いので、ここが初出） */
.prose--art a{color:var(--mauve-dark);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.prose--art a:hover{color:var(--navy);text-decoration-thickness:2px}

/* 強調。<b> は既存ページと同じ見た目（太字のみ）に揃える。
   <em> は和文のイタリックが読みにくいので傍点にする（サイト全体で font-style:normal に倒している） */
.prose--art strong,.prose--art b{font-weight:700}
.prose--art em,.prose--art i{font-style:normal;-webkit-text-emphasis:filled dot currentColor;text-emphasis:filled dot currentColor}
/* 注記。サイト内の他の注記（.asof / figcaption / .terms__updated）と同じ灰色にする */
.prose--art small{color:var(--muted)}

/* 箇条書き。ul の余白は .prose から継ぐ。ol と行頭記号の色だけ足す */
.prose--art ol{padding-left:1.4em;margin:0 0 1.4em}
.prose--art ol>li{margin-bottom:.5em}
.prose--art ul>li::marker,.prose--art ol>li::marker{color:var(--mauve-dark)}

/* 画像。幅・角丸・display は全体の img 指定を使う */
.prose--art img{margin:32px 0}
.prose--art figure{margin:32px 0}
.prose--art figure img{margin:0}
.prose--art figcaption{margin-top:10px;font-size:13px;line-height:1.7;letter-spacing:.04em;color:var(--muted)}

/* 表。会社概要の .dtable と同じ見た目にする（.prose table にはしない。
   .prose table は .dtable より詳細度が高く、既存の表を上書きしてしまうため） */
.prose--art table{width:100%;margin:32px 0;border-collapse:collapse;background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-card);font-size:15px}
.prose--art th,.prose--art td{padding:14px 20px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(199,199,199,.4)}
.prose--art tr:last-child th,.prose--art tr:last-child td{border-bottom:0}
.prose--art thead th{font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--muted);background:rgba(244,246,254,.6)}
@media(max-width:600px){.prose--art th,.prose--art td{padding:12px 14px;font-size:14px}}
/* 列が多くて収まらない表は <div class="scroll-x"> で囲む */
.prose--art .scroll-x{margin:32px 0;overflow-x:auto}
.prose--art .scroll-x table{margin:0;min-width:520px}

/* 引用。左の線は灰色にする（マウヴの線は h2 の印なので競合させない） */
.prose--art blockquote{margin:32px 0;padding:4px 0 4px 20px;border-left:4px solid var(--ring);font-size:15px;color:var(--navy-deep)}
.prose--art blockquote p:last-child{margin-bottom:0}
.prose--art blockquote cite{display:block;margin-top:10px;font-style:normal;font-size:13px;color:var(--muted)}

.prose--art hr{margin:48px 0;border:0;border-top:1px solid var(--ring)}

/* コード。使う場面は少ない想定だが、出たときに崩れないように */
.prose--art code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Noto Sans Mono",monospace;font-size:.92em;padding:2px 6px;background:var(--bg);border:1px solid rgba(199,199,199,.5);border-radius:var(--r-xs)}
.prose--art pre{margin:32px 0;padding:20px 24px;background:var(--navy-deep);color:#e8ebf7;border-radius:var(--r);font-size:14px;line-height:1.7;overflow-x:auto}
.prose--art pre code{padding:0;background:none;border:0;color:inherit;font-size:inherit}

/* 記事の日付・タグ・一覧へ戻る導線 */
.art__meta{display:flex;flex-wrap:wrap;gap:4px 16px;max-width:var(--article);margin:0 0 28px;font-size:13px;letter-spacing:.04em;color:var(--muted)}
.art__meta time{font-family:var(--font-en);letter-spacing:var(--ls)}
.art__foot{max-width:var(--article);margin-top:48px;padding-top:28px;border-top:1px solid var(--ring)}
.art__foot .tags{margin:0}
.art__back{margin:24px 0 0}