/**
 * サイト共通のスタイル
 *
 * 正はワイヤー。ここは写しではなく、ワイヤーの <style> をそのまま持ってきた実装。
 *   トップ　　　　　　：/Users/sirouhashimoto/projects/01degree/_data/design/wireframe_top_v2.html
 *   プライバシーポリシー：/Users/sirouhashimoto/projects/01degree/_data/design/wireframe_privacy_v1.html
 *
 * 上から順に、トップの <style>（両ワイヤーで共通）→ プライバシーの2つめの <style>（.doc）
 * → WordPress 側の調整、の3ブロック。ワイヤーの CSS を直したら、前2ブロックを丸ごと
 * 差し替える。ズレの確認は bin/wireframe-diff.py。
 *
 * data-acc="01" と data-theme="light" は functions.php の language_attributes で <html> に付けている。
 */

/* ==================================================================
 * 1. ワイヤー共通（wireframe_top_v2.html の <style> をそのまま）
 * ================================================================== */
  :root{
    --paper:#FBF8F6; --panel:#F3F3EE; --band:#16181B; --band-ink:#F4F4F0;
    --ink:#14161A; --ink-soft:#5C6268; --ink-faint:#8E9399;
    --rule:#D6D6CF; --rule-soft:#E8E8E2; --note:#8A7A3F; --note-bg:#F5F1E4;
    --acc:#E45D0D; --acc-ink:#14161A; --acc-soft:#FDE7D6;
    --shadow:0 1px 0 rgba(20,22,26,.05), 0 8px 20px -14px rgba(20,22,26,.35);
    --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
    --sans:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
    --mono:ui-monospace,"SF Mono",Menlo,monospace;
    --garamond:"EB Garamond","Adobe Garamond Pro","Times New Roman",serif;
    --kv-rise:150px; --kv-fade:160px;
    /* ◯の大きさと、サブコピーからの距離。ここだけ触れば位置が決まる */
    --kv-dot-size:16px; --kv-dot-gap:clamp(1.8rem,4vw,2.8rem);
    --gut:clamp(1.25rem,5vw,4.5rem);
    --hdr:7rem;
    --sec:clamp(5rem,11vw,9.5rem);
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --paper:#121316; --panel:#1B1D21; --band:#000; --band-ink:#E9E9E4;
      --ink:#E7E7E2; --ink-soft:#A3A8AE; --ink-faint:#787D83;
      --rule:#33363B; --rule-soft:#24272B; --note:#C3AE6B; --note-bg:#26241C;
      --acc:#E45D0D; --acc-ink:#14161A; --acc-soft:#3A2A1E;
      --shadow:0 1px 0 rgba(255,255,255,.06), 0 8px 22px -12px rgba(0,0,0,.75);
    }
  }
  :root[data-theme="dark"]{
    --paper:#121316; --panel:#1B1D21; --band:#000; --band-ink:#E9E9E4;
    --ink:#E7E7E2; --ink-soft:#A3A8AE; --ink-faint:#787D83;
    --rule:#33363B; --rule-soft:#24272B; --note:#C3AE6B; --note-bg:#26241C;
    --acc:#E45D0D; --acc-ink:#14161A; --acc-soft:#3A2A1E;
    --shadow:0 1px 0 rgba(255,255,255,.06), 0 8px 22px -12px rgba(0,0,0,.75);
  }

  html{scroll-behavior:smooth}
  *{box-sizing:border-box}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
       font-size:16px;line-height:1.95;font-feature-settings:"palt" 1;-webkit-text-size-adjust:100%}
  img{max-width:100%}
  .wrap{max-width:82rem;margin:0 auto;padding:0 var(--gut)}
  .narrow{max-width:38rem}
  .mid{max-width:52rem}

  /* 肩ラベル */
  .eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;
           color:var(--ink-faint);display:flex;align-items:baseline;gap:.5em}
  .eyebrow .deg{color:var(--ink);font-size:.8rem}

  h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:.02em;text-wrap:balance}
  h2.sec{font-size:clamp(1.5rem,3.6vw,2.15rem);line-height:1.55;margin-top:.9rem}
  /* 見出しの、スマホだけで効く改行。<br class="sp"> で書く（2026-09-11）。
     text-wrap:balance だと読点の位置で切れず、変なところで折り返すため */
  br.sp{display:none}
  @media (max-width:640px){ br.sp{display:inline} }
  h3{font-size:1.05rem;line-height:1.7}
  p{max-width:34em}

  /* ---- header ---- */
  header{position:sticky;top:0;background:#FFF;z-index:20}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) header{background:var(--paper)}
  }
  :root[data-theme="dark"] header{background:var(--paper)}
  /* 白いヘッダーから地の色へ溶かす。main_bk.png は「単色＋直線的なアルファ傾斜」
     そのものだったので、同じ傾斜をCSSで描く。画像だと下に白を敷く必要があり、
     その白の範囲を画像の高さに合わせられない（＝下端まで白が伸びる）。 */
  main{background:linear-gradient(to bottom,#FFF 0,var(--paper) 160px)}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) main{background:none}
  }
  :root[data-theme="dark"] main{background:none}
  /* padding は上下だけ指定する。padding:1.15rem 0 と書くと .wrap の左右余白
     （var(--gut)）まで 0 で上書きしてしまい、ロゴが画面端に貼りつく */
  .bar{display:flex;align-items:center;justify-content:space-between;gap:2rem;
       padding-block:1.15rem;flex-wrap:wrap}
    nav ul{display:flex;gap:clamp(1rem,2.6vw,2.4rem);list-style:none;margin:0;padding:0;flex-wrap:wrap}
  nav a{font-family:var(--garamond);font-size:1.02rem;letter-spacing:.05em;
        color:var(--ink-soft);text-decoration:none;padding:.2rem 0;
        border-bottom:1px solid transparent}
  nav a:hover,nav a:focus-visible{color:var(--ink);border-bottom-color:var(--ink)}
  /* 末尾の「無料で相談する」は黒地に白抜き。実装ではフォームのページ（/contact/）へ飛ばす（2026-09-11） */
  nav li:last-child a{background:var(--ink);color:var(--paper);
        padding:.42rem 1.2rem;border-bottom:0}
  nav li:last-child a:hover,nav li:last-child a:focus-visible{
        background:var(--ink-soft);color:var(--paper);border-bottom:0}


  /* ---- ロゴ（マーク＋ワードマーク） ---- */
  /* 実サイト 01degree.jp のヘッダー実寸に合わせる
     マーク142px / ワード198px / 間隔20px、834px以下で 90px / 120px / 10px */
  .logo{display:flex; flex-direction:column; align-items:flex-start;
        color:inherit; text-decoration:none;
        --mark-w:142px; --word-w:198px; gap:20px; transition:gap .25s ease}
  .logo svg{display:block; fill:currentColor; height:auto;
            transition:width .25s ease, opacity .18s ease}
  .logo .mark{width:var(--mark-w)}
  .logo .word{width:var(--word-w)}
  @media (max-width:834px){
    .logo{--mark-w:90px; --word-w:120px; gap:10px}
  }

  /* ---- モバイルのナビゲーション ---- */
  /* 834px は、ロゴが縮む既存のブレークポイントに合わせている */
  .navtoggle{display:none}

  @media (max-width:834px){
    /* 折り返しをやめ、ロゴとボタンを1行に収める。
       align-items / margin-top / is-scrolled の指定は、これより後ろに同じ
       詳細度の規則があって負けるので、下の「モバイルのヘッダー」にまとめてある */
    .bar{flex-wrap:nowrap;padding-block:1.4rem}

    /* 44px角はタップ領域の下限。見た目の線は22pxで、余白で稼ぐ */
    /* ボタンは上端に寄せる。スクロール前はロゴのほうが背が高いので上に上がり、
       スクロール後はワードマークが消えてボタンが一番背の高い要素になるため、
       結果として天地中央に収まる */
    .navtoggle{display:grid;place-items:center;width:44px;height:44px;
               align-self:flex-start;
               margin-top:-4px;              /* 気持ち上げる */
               margin-right:-10px;flex:0 0 auto;
               background:none;border:0;padding:0;cursor:pointer;color:var(--ink)}
    .navtoggle .bars{position:relative;display:block;width:22px;height:1px;
                     background:currentColor;transition:background .15s ease}
    .navtoggle .bars::before,.navtoggle .bars::after{
               content:"";position:absolute;left:0;width:22px;height:1px;
               background:currentColor;transition:transform .25s ease}
    .navtoggle .bars::before{top:-7px}
    .navtoggle .bars::after{top:7px}
    /* 開いたら×に */
    header.nav-open .navtoggle .bars{background:transparent}
    header.nav-open .navtoggle .bars::before{transform:translateY(7px) rotate(45deg)}
    header.nav-open .navtoggle .bars::after{transform:translateY(-7px) rotate(-45deg)}

    /* パネルはヘッダーの直下に落とす。header は sticky＝配置済みなので、
       absolute の基準はこの header になる */
    header nav{position:absolute;top:100%;left:0;right:0;padding-top:0;
               background:#FFF;border-top:1px solid var(--rule-soft);box-shadow:var(--shadow);
               visibility:hidden;opacity:0;transform:translateY(-.5rem)}
               /* transition は base の header nav にまとめてある（上書き対策） */
    header.nav-open nav{visibility:visible;opacity:1;transform:none}
    header nav ul{flex-direction:column;flex-wrap:nowrap;gap:0;
                  padding:.4rem var(--gut) 1.6rem}
    header nav li{border-bottom:1px solid var(--rule-soft)}
    header nav a{display:block;padding:1.05rem 0;font-size:1.15rem;border-bottom:0}
    header nav a:hover,header nav a:focus-visible{border-bottom:0;color:var(--ink)}
    /* Contact だけは黒地のボタンのまま、幅いっぱいに */
    header nav li:last-child{border-bottom:0;margin-top:1.2rem}
    header nav li:last-child a{text-align:center;padding:.95rem 1.2rem}
  }
  @media (prefers-reduced-motion:reduce){
    header nav,.navtoggle .bars,.navtoggle .bars::before,.navtoggle .bars::after{transition:none}
  }
  header .logo{margin-top:10px; transition:margin .25s ease, gap .25s ease}
  /* スクロール後：マークを縮め、ワードマークを消す */
  header{transition:box-shadow .25s ease}
  header .bar{transition:padding .25s ease}
  header.is-scrolled{box-shadow:var(--shadow)}
  /* ナビとロゴの上端は動かさない。縮むのはロゴの寸法だけ
     （align-items は補間できないため、切り替えると飛んで見える） */
  header.is-scrolled .bar{padding-block-end:calc(1.15rem + 10px)}
  header.is-scrolled .logo{--mark-w:90px; gap:0}
  header.is-scrolled .logo .word{width:0; opacity:0; overflow:hidden}
  .bar{align-items:flex-start}
  /* transition はここに一本化する。モバイル側（@media 内）で書いても、
     この規則のほうが後ろにあるため同じ詳細度で上書きされ、フェードが消える */
  header nav{padding-top:1.1rem;
             transition:padding .25s ease, opacity .24s ease,
                        transform .24s ease, visibility .24s}

  /* ---- モバイルのヘッダー ---- */
  /* 上の .bar / header .logo / header.is-scrolled …（152〜162行あたり）は
     ロゴのメディアクエリより後ろにあり、同じ詳細度なので勝ってしまう。
     モバイル向けの上書きは、必ずそれらより後ろに置く */
  @media (max-width:834px){
    .bar{align-items:center}          /* 上下中央に揃える */
    header .logo{margin-top:0}        /* デスクトップの 10px 下げは効かせない */
    header.is-scrolled .bar{padding-block-end:1.4rem}
    /* スクロール後はマークをさらに小さく。ロゴの高さが 44px のボタンより
       低くなるので、ハンバーガーがヘッダーの天地中央に収まる */
    header.is-scrolled .logo{--mark-w:72px}
  }

  /* ---- hero ---- */
  .hero{padding:0 0 clamp(3rem,7vw,5.5rem)}
  /* キービジュアル：イラストを --kv-rise だけ上へ引き上げ、はみ出した分は切る。
     切ると素材側の透過（上端の傾斜）も一緒に消えるので、同じ傾斜をCSSのマスクで
     描き直す。マスクは画像の座標系なので、切った分だけ開始位置をずらす。 */
  .kv{position:relative; overflow:hidden}
  .kv-bg{display:block; width:100%; height:auto;
         margin-top:calc(-1 * var(--kv-rise));
         -webkit-mask-image:linear-gradient(to bottom,transparent var(--kv-rise),
                            #000 calc(var(--kv-rise) + var(--kv-fade)));
         mask-image:linear-gradient(to bottom,transparent var(--kv-rise),
                    #000 calc(var(--kv-rise) + var(--kv-fade)));
         pointer-events:none}
  .kv-copy{position:absolute; top:clamp(2rem,5vw,4rem); left:0; right:0;
           margin-inline:auto; max-width:32rem; text-align:center;
           padding-inline:clamp(1.25rem,4vw,3rem)}
  /* 行末の 、。 は全角の枠に左寄せで入るため、右に約0.3emの空きがぶら下がる。
     letter-spacing の末尾1文字分と合わせて中心が左へずれるので、視覚的に補正する。
     実測：h1 −0.386/−0.380/−0.355em、サブ −0.383/−0.321em。 */
  .kv-copy h1{font-family:var(--serif); font-weight:500; color:#14161A;
              font-size:clamp(1.5rem,3.4vw,2.9rem); line-height:1.65; letter-spacing:.1em;
              transform:translateX(.37em)}
  .kv-bar{display:block; width:3.2rem; height:2px; background:var(--acc);
          margin:clamp(1.1rem,2.4vw,1.9rem) auto}
  .kv-sub{font-family:var(--serif); color:#5C6268; max-width:none;
          font-size:clamp(.78rem,1.35vw,1rem); line-height:2.1; letter-spacing:.08em;
          transform:translateX(.35em)}
  /* ◯：イラストに焼き込むと位置が動かせないので、HTMLの要素として持つ。
     コピーの流れの中に置いてあるので、画面幅が変わっても勝手についてくる。
     調整するのは下の2つの変数だけ（大きさと、サブコピーとの間隔）。 */
  .kv-dot{display:block; width:var(--kv-dot-size); aspect-ratio:1; border-radius:50%;
          border:3px solid var(--acc); box-sizing:border-box;
          margin:var(--kv-dot-gap) auto 0}

  @media (max-width:834px){
    /* 狭い画面ではコピーをイラストに重ねない。イラストの余白は上40%ぶんしかなく、
       コピーはそれより高い。重ねると overflow:hidden で必ず切れる。
       DOM順は img → copy なので、column-reverse でコピーが上に来る。 */
    /* .hero は padding:0 0 … で .wrap の左右余白を打ち消しているので、
       .kv はもともと画面いっぱい。ここで負のマージンを足すと、そのぶん
       横にはみ出して画面が左右に振れる */
    .kv{display:flex; flex-direction:column-reverse}
    /* イラストがコピーの上に乗るので、コピーを前面へ出す。
       ここで position:relative を使うと .kv-dot の基準がコピーになってしまう
       （◯がイラストではなく文字に付いてくる）。フレックスアイテムは
       position:static のままでも z-index が効くので、それだけを使う。 */
    .kv-copy{position:static; z-index:1; max-width:none;
             padding-inline:var(--gut); margin:0}
    /* イラストを引き上げて、コピーの下に潜り込ませる。重なるのはイラスト上部の
       余白（上から4割は何も描かれていない）なので、文字は読める。
       デスクトップで重ねているのと同じ理屈。
       上げ下げを決めるのは --kv-pull だけ。大きくするほど上がる。 */
    .kv-bg{margin-top:calc(-1 * (var(--kv-rise) + var(--kv-pull)));
           /* マスクの停止位置は画像の高さに対する％で書く。モバイルでは
              イラストの幅が「画面幅＋左右のgut」なので、--kv-rise（vw）と
              画像の高さの基準が一致しない。％なら画像そのものが基準になる。
              8%/22% は 6vw/16vw を画像の高さに換算した値 */
           -webkit-mask-image:linear-gradient(to bottom,transparent 8%,#000 22%);
           mask-image:linear-gradient(to bottom,transparent 8%,#000 22%)}
    /* スマホの◯はデスクトップより一回り小さく、線も細くする */
    :root{--kv-rise:6vw; --kv-fade:10vw; --kv-pull:23vw;
          --kv-dot-bottom:15vw; --kv-dot-size:13px}
    /* ◯はイラストの下端を基準に置く。イラストをいくら動かしても、
       ◯はイラストの上から77%＝二人の手とカップの高さに留まる。
       コピーの流れに戻すと、この関係が画面幅ごとに崩れる（コピーはrem、
       イラストはvwで伸びるため） */
    .kv-dot{position:absolute; left:50%;
            bottom:calc(var(--kv-dot-bottom) + 10px);   /* 10px 上げる */
            border-width:2px;
            transform:translateX(-50%); margin:0}
  }

  /* ---- process（9工程＋公開後。中央の縦罫を挟んで左右に振る） ---- */
  .proc-head{text-align:center}
  .proc-head .eyebrow,.proc-head .eyebrow .deg{color:var(--acc)}
  .proc-head .eyebrow{justify-content:center}

  .steps{list-style:none;margin:clamp(2.2rem,4.5vw,3.2rem) 0 0;padding:.2rem 0 0;position:relative}
  /* 中央の縦罫。「公開後」の地色で隠れるので、太罫のところでちょうど止まる */
  .steps::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
        background:var(--rule)}
  .steps li{position:relative;width:calc(50% - 3rem);padding:.6rem 0 .7rem}
  /* 左右に振り分けてあるので、上下を重ねてもぶつからない。縦を詰めつつ振れ幅を出す */
  .steps li + li{margin-top:-1.15rem}
  .steps li:nth-child(odd){margin-right:auto;text-align:right}
  .steps li:nth-child(even){margin-left:auto}
  .steps .n{display:block;position:relative;font-family:var(--mono);font-size:.72rem;
        letter-spacing:.16em;color:var(--acc);line-height:1.6}
  .steps .t{display:block;margin-top:.1rem;font-family:var(--serif);font-size:1.18rem;
        color:var(--ink);line-height:1.7}
  .steps .d{display:block;margin-top:.3rem;font-size:.85rem;color:var(--ink-soft);
        line-height:1.78}
  /* 縦罫の上に置く印。番号の行そのものに紐づけているので、行間や余白を変えても付いてくる。
     ° の字面は em ボックスの上寄り（上から .3315em）にある。上に .308em 足すと
     箱の中心＝字面の中心になり、罫の隠れ方が上下で揃い、位置合わせの補正も要らなくなる。
     .n の字間（.16em）は、その空きが字の右にぶら下がって中心を左へずらすので切る */
  .steps .n::after{content:"°";position:absolute;top:50%;font-family:var(--garamond);
        font-size:1.1rem;line-height:1;color:var(--acc);background:var(--paper);
        padding:.308em .3rem 0;letter-spacing:0}
  .steps li:nth-child(odd) .n::after{left:calc(100% + 3rem);
        transform:translate(-50%,-50%)}
  .steps li:nth-child(even) .n::after{right:calc(100% + 3rem);
        transform:translate(50%,-50%)}
  /* 公開後は終わりのあるプロジェクトの外。振るのをやめて中央で締める */
  .steps li.after{width:100%;text-align:center;margin:1.25rem 0 0;padding:1.4rem 0 0;
        border-top:2px solid var(--ink);background:var(--paper)}
  .steps li.after .n::after{display:none}

  @media (max-width:820px){
    /* 左に寄せて、縦罫は左端の1本にする。
       --rail は .steps の左端から罫までの距離、--indent は本文の字下げ。
       罫は .steps 基準、° は .n（＝字下げの内側）基準なので、
       同じ値を書くと --indent のぶんだけ ° が右へずれる。差を引いて乗せる。 */
    .steps{--rail:.4rem; --indent:2.4rem}
    .steps::before{left:var(--rail)}
    .steps li,.steps li:nth-child(odd),.steps li:nth-child(even){width:auto;margin:0;
          text-align:left;padding-left:var(--indent)}
    .steps li:nth-child(odd) .n::after,.steps li:nth-child(even) .n::after{
          left:calc(var(--rail) - var(--indent));right:auto;
          transform:translate(-50%,-50%)}
    .steps li,.steps li + li{margin-top:0}
    .steps li.after{padding-left:0;text-align:left;margin-top:1.25rem}
  }

  /* ---- section ---- */
  section{padding:var(--sec) 0;border-top:1px solid var(--rule-soft);
          scroll-margin-top:var(--hdr)}
  section:first-of-type{border-top:0}
  .lede{margin-top:2rem;color:var(--ink-soft)}

  /* ---- message ---- */
  .msg-head{font-family:var(--serif);font-size:clamp(1.3rem,3.2vw,1.9rem);line-height:1.75}
  .msg-body{margin-top:3rem;display:flex;flex-direction:column;gap:1.9rem;color:var(--ink-soft)}
  .msg-body p{margin:0}
  .msg-body .em{color:var(--ink)}


  /* ---- Message：イラストの地色に合わせた帯 ---- */
  #message{
    --paper:#FFF;
    background:#FFF; border-top:0;
  }
  #message .msg-grid{
    display:grid; align-items:start;
    grid-template-columns:minmax(0,1fr) minmax(0,clamp(22rem,45%,31.5rem));
    gap:clamp(2rem,5vw,4.5rem);
  }
  /* 右のガターぶんまで伸ばして、本文の幅を削らずに絵を大きく見せる。
     margin-top は本文（.msg-body の 3rem）より上げて、絵を先に立ち上げる */
  #message .msg-art{margin-top:10px;
                    margin-right:calc(-1 * var(--gut)); z-index:1; position:relative}
  /* 見出しがイラストに掛かるので、文字を前面に出す */
  #message .eyebrow, #message .mid, #message .msg-body{position:relative; z-index:2}
  /* Message の直後（Features）の上罫を消して、クリーム帯の下を線なしで終える */
  #message + section{border-top:0}
  /* Message と Features の肩ラベルは、° も文字もまるごと差し色に
     （Works 内の WEB/MEDIA/BOOKS を巻き込まないよう直下の子だけを狙う） */
  section > .wrap > .eyebrow,
  section > .wrap > .eyebrow .deg{color:var(--acc)}
  #message .msg-art img{display:block; width:100%; height:auto; opacity:.7}
  #message .msg-body{max-width:34rem}
  @media (max-width:1000px){
    #message .msg-grid{grid-template-columns:1fr}
    #message .msg-art{max-width:30rem; margin:1.5rem auto 0}
  }

  /* ---- features ---- */
  .feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
        gap:0 2.5rem;margin-top:3.5rem;border-top:1px solid var(--rule)}
  .feat > div{padding:2.6rem 0 2.8rem;border-bottom:1px solid var(--rule)}
  .feat .no{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--ink-faint)}
  .feat h3{margin:.9rem 0 1rem}
  .feat p{font-size:.9rem;color:var(--ink-soft);margin:0}


  /* 834px以下は1カラム。auto-fit のままだとタブレット幅で2カラムになり、
     3項目なので3つめだけが取り残される */
  @media (max-width:834px){
    .feat{grid-template-columns:minmax(0,1fr)}
  }

  /* Features のイラスト（3枚とも比率が違うので枠で正規化） */
  .feat .fig{margin:0 0 1.5rem; background:#FDFDFD; aspect-ratio:1.96; overflow:hidden}
  .feat .fig img{display:block; width:100%; height:100%; object-fit:contain}

  /* ---- problems ---- */
  /* ---- problems：社内の声として読ませる ---- */
  .probs{margin-top:clamp(2rem,5vw,3.5rem); display:grid; align-items:center;
         grid-template-columns:minmax(0,30rem) minmax(0,1fr); gap:clamp(1.5rem,4vw,3.5rem)}
  .probs .art{width:100%; height:auto; display:block; opacity:.78}
  .voices{margin:0; padding:0; list-style:none; border-top:1px solid var(--rule-soft)}
  .voices li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.6rem;
             padding:.95rem 0; align-items:baseline;
             border-bottom:1px solid var(--rule-soft)}
  .voices .qm{font-family:var(--garamond); font-size:1.6rem; line-height:1;
              color:var(--acc); transform:translateY(.18em)}
  .voices p{margin:0; max-width:none; font-size:.95rem; line-height:1.75; color:var(--ink-soft)}
  .voices b{font-weight:700; color:var(--ink); letter-spacing:.01em}
  @media (max-width:900px){
    .probs{grid-template-columns:1fr}
    .probs .art{order:2; max-width:32rem; margin:1.5rem auto 0}
  }


  /* ---- Problems：白の帯 ---- */
  /* Message と同じ作り。暗色テーマでも地は白のままなので、
     文字と罫の色もここで明色側に固定する（そうしないと白地に明色の文字が乗る） */
  #problems{
    --paper:#FFF; --ink:#14161A; --ink-soft:#5C6268; --ink-faint:#8E9399;
    --rule:#D6D6CF; --rule-soft:#E8E8E2;
    background:#FFF; color:var(--ink); border-top:0;
  }
  /* 白帯の下を線なしで終える */
  #problems + section{border-top:0}

  /* problems：締めの一文 */
  #problems .close{margin-top:clamp(2.5rem,6vw,4rem); padding-top:clamp(1.8rem,4vw,2.8rem);
                   border-top:1px solid var(--rule-soft); text-align:center}
  #problems .close p{margin:0; max-width:none; font-family:var(--serif); color:var(--ink);
                     font-size:clamp(1.02rem,2vw,1.4rem); line-height:2.5; letter-spacing:.04em}
  /* 線は inline-block の箱の底を基準に置く。箱の高さを固定しておかないと、
     親の line-height を変えるたびに線の位置がずれる */
  .uline{position:relative; display:inline-block; line-height:1.9}
  .uline svg{position:absolute; left:-1.5%; bottom:-.10em; width:100%; height:.34em}
  .uline path{fill:var(--acc); opacity:.9}

  /* ---- service ---- */
  #service{background:#FFF;border-top:0}
  #works{border-top:0}
  #faq{background:#FFF;border-top:0}
  #about{border-top:0}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) #service{background:var(--panel)}
  }
  :root[data-theme="dark"] #service{background:var(--panel)}
  .svc{margin-top:clamp(3.5rem,7vw,5.5rem);display:flex;flex-direction:column;
       gap:clamp(4rem,9vw,8rem)}
  .svc article{display:grid;align-items:start;
               grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
               gap:clamp(1.6rem,4vw,4rem)}
  .svc article .txt{grid-column:1;grid-row:1}
  .svc article .fig{grid-column:2;grid-row:1}
  .svc article.rev{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .svc article.rev .txt{grid-column:2;grid-row:1}
  .svc article.rev .fig{grid-column:1;grid-row:1}
  .svc .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;color:var(--ink-faint)}
  .svc h3{margin:.65rem 0 1.5rem;font-size:1.18rem}
  .svc p{font-size:.93rem;color:var(--ink-soft);margin:0 0 1.1rem;max-width:29em}
  .svc p:last-child{margin-bottom:0}
  .svc .fig{margin:0;background:var(--panel);aspect-ratio:3/2;overflow:hidden}
  .svc .fig img{display:block;width:100%;height:100%;object-fit:cover}
  .svc .fig.soft img{opacity:.8}

  /* 具体例の開閉。押せることが分かる形にし、中身は薄いグレーの面に置く */
  .svc details{margin-top:1.7rem}
  .svc summary{cursor:pointer;list-style:none;
               display:inline-flex;align-items:center;gap:.9em;
               border:1px solid var(--ink);padding:.8rem 1.5rem;
               font-size:.9rem;letter-spacing:.06em;color:var(--ink);
               transition:background .2s ease,color .2s ease}
  .svc summary::-webkit-details-marker{display:none}
  .svc summary::after{content:"＋";font-family:var(--mono);font-size:1.05em;line-height:1}
  .svc details[open] summary::after{content:"－"}
  .svc summary:hover,.svc summary:focus-visible{background:var(--ink);color:var(--paper)}
  .svc details[open] summary{background:var(--ink);color:var(--paper)}
  .svc details > ol,.svc details > ul{
      margin:0;background:var(--panel);
      padding:1.8rem 1.8rem 1.8rem 3.4rem;
      display:flex;flex-direction:column;gap:1.2rem}
  .svc details > ul{padding-left:1.8rem;list-style:none}
  .svc details li{font-size:.9rem;line-height:1.9;color:var(--ink-soft);max-width:32em}
  .svc details li b{display:block;font-family:var(--serif);font-weight:500;
                    font-size:1.02rem;color:var(--ink);margin-bottom:.3rem}
  /* service：締めの一文。PROBLEMS の締めと同じ扱いにする。
     p{max-width:34em} が効いて左に寄っていたので max-width を外す */
  .svc-note{margin:clamp(3.5rem,7vw,5.5rem) auto 0;max-width:none;text-align:center;
            font-family:var(--serif);color:var(--ink);
            font-size:clamp(.98rem,1.7vw,1.18rem);line-height:2.5;letter-spacing:.04em}
  @media (max-width:860px){
    .svc{gap:clamp(3rem,8vw,4.5rem)}
    .svc article,.svc article.rev{grid-template-columns:minmax(0,1fr);gap:1.6rem}
    .svc article .txt,.svc article.rev .txt{grid-column:1;grid-row:1}
    .svc article .fig,.svc article.rev .fig{grid-column:1;grid-row:2}
  }

  /* ---- works ---- */
  .wgroup{margin-top:clamp(3.5rem,7vw,5.5rem)}
  /* WEB / MEDIA / PUBLISH の肩ラベルを差し色に */
  .wgroup > .eyebrow,.wgroup > .eyebrow .deg{color:var(--acc)}
  .wgroup:first-of-type{margin-top:clamp(2.5rem,5vw,3.5rem)}
  .ghead{margin:.6rem 0 0;font-size:1.05rem}
  .wnote{margin:1.6rem 0 0;font-size:.88rem;color:var(--ink-soft);max-width:none}

  /* 小さめのリンクボタン（.btn を実績用に詰めたもの） */
  /* グリッドの中に置くと inline-flex がブロック化され、justify-self の初期値
     stretch で列いっぱいに伸びる。1カラムに落ちる幅で「記事を見る」だけが
     大きく見えていたのはこれ。文字ぶんの幅で止める */
  .lbtn{display:inline-flex;justify-self:start;align-items:center;gap:.55em;white-space:nowrap;
        border:1px solid var(--ink);padding:.5rem 1.1rem;
        font-size:.78rem;letter-spacing:.1em;text-decoration:none;color:var(--ink);
        transition:background .2s ease,color .2s ease}
  .lbtn:hover,.lbtn:focus-visible{background:var(--ink);color:var(--paper)}
  .lbtn svg{width:.7em;height:.7em;fill:none;stroke:currentColor;stroke-width:2}
  .lbtn.todo{border-color:var(--rule);color:var(--ink-faint);pointer-events:none}
  p.todo,.ttl.todo{color:var(--note);font-family:var(--mono);
                   font-size:.7rem;letter-spacing:.12em}

  /* WEB：キャプチャ＋説明＋ボタンのカード */
  .wcards{margin-top:2rem;display:grid;
          grid-template-columns:repeat(2,minmax(0,1fr));
          gap:clamp(2.5rem,4vw,3.5rem) clamp(1.5rem,3vw,2.5rem)}
  .card{display:flex;flex-direction:column}
  .card .fig{margin:0 0 1.1rem;aspect-ratio:16/10;background:var(--panel);
             overflow:hidden;display:grid;place-items:center;
             box-shadow:0 0 14px rgba(20,22,26,.10),
                        0 0 46px rgba(20,22,26,.10)}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .card .fig{
      box-shadow:0 0 14px rgba(0,0,0,.55), 0 0 46px rgba(0,0,0,.55)}
  }
  :root[data-theme="dark"] .card .fig{
    box-shadow:0 0 14px rgba(0,0,0,.55), 0 0 46px rgba(0,0,0,.55)}
  .card .fig img{display:block;width:100%;height:100%;object-fit:cover}
  /* キャプチャもサイトへのリンクにする（2026-09-11）。書影と同じく、ホバーで少し沈める */
  .card > a{display:block;color:inherit}
  .card > a:hover .fig img,.card > a:focus-visible .fig img{opacity:.82}
  .card .ph{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;line-height:2;
            color:var(--ink-faint);text-align:center;padding:.8rem}
  .card h4{margin:.7rem 0 0;font-family:var(--serif);font-weight:500;font-size:1.02rem;line-height:1.6}
  /* 説明文はカード幅いっぱいに流す。
     max-width を掛けると、実文が入ったとき右が余って途中で折り返す */
  .card p{margin:.7rem 0 1.3rem;font-size:.86rem;line-height:1.85;
          color:var(--ink-soft);max-width:none;text-align:justify}
  .card .lbtn{margin-top:auto;align-self:flex-start}

  /* MEDIA：テキストのみ。媒体名／説明＋ボタン */
  .wlist{margin:2rem 0 0;padding:0;list-style:none;border-top:1px solid var(--rule)}
  .wlist li{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr) auto;
            gap:1rem clamp(1.2rem,3vw,2.5rem);align-items:start;
            padding:1.5rem 0;border-bottom:1px solid var(--rule)}
  .wlist .nm{font-family:var(--serif);font-size:1rem;line-height:1.6}
  /* 本文だけ上揃え。媒体名とボタンは行の天地中央に置く */
  .wlist .nm,.wlist .lbtn{align-self:center}
  .wlist p{margin:0;font-size:.88rem;line-height:1.85;color:var(--ink-soft);max-width:none;text-align:justify}

  /* PUBLISH：役割ごとに段を分け、段の重さで書影の大きさを変える */
  /* PUBLISH：左に共著、右に上下2段 */
  .pub2{margin-top:1.8rem;display:grid;
        grid-template-columns:minmax(0,1fr) minmax(0,2fr);
        gap:clamp(2.5rem,6.5vw,6.5rem);align-items:start}
  /* 左右の書影の頭を揃えるため、ラベルの下の余白は .role だけが持つ。
     .pubcol に gap を入れると左だけ二重にかかってズレる */
  .pubcol{display:flex;flex-direction:column;align-items:flex-start;gap:0}
  .pubcol > .lbtn{margin-top:1.1rem}
  .pubrow2 + .pubrow2{margin-top:clamp(1.8rem,3vw,2.6rem);
                      padding-top:clamp(1.8rem,3vw,2.6rem);
                      border-top:1px solid var(--rule-soft)}
  .role{font-family:var(--serif);font-size:.95rem;line-height:1.7;
        color:var(--ink);letter-spacing:.02em;margin-bottom:1rem}
  .wlist .sub{display:inline-block;font-size:.8em;color:var(--ink-faint)}
  /* 列数と書影の高さは行ごとに指定する */
  .blist{display:grid;align-items:start;grid-template-columns:repeat(var(--n),minmax(0,1fr));
         gap:clamp(1.2rem,2vw,1.6rem) clamp(1rem,2vw,1.6rem)}
  .book{display:flex;flex-direction:column;gap:.7rem;color:inherit;text-decoration:none}
  /* 列が広がっても書影は大きくしない。余ったぶんは左右の余白に回す */
  .blist .book{max-width:var(--bw,none);margin-inline:auto}
  /* 書影は 1:1.418 に揃っている。幅で決めれば行内で高さも揃う */
  .cover{margin:0;aspect-ratio:1/1.418;display:grid;place-items:end center}
  .cover img{display:block;width:100%;height:auto;max-height:100%;
             object-fit:contain;transition:opacity .25s ease;
             box-shadow:0 0 10px rgba(20,22,26,.10), 0 0 30px rgba(20,22,26,.10)}
  .book .ttl{font-size:.78rem;line-height:1.7}
  .blist[style*="--n:4"] .ttl{font-size:.73rem;line-height:1.65}
  a.book:hover .ttl,a.book:focus-visible .ttl{text-decoration:underline;text-underline-offset:.25em}
  a.book:hover .cover img,a.book:focus-visible .cover img{opacity:.82}
  /* 共著だけ幅で決める。書影の下にタイトル */
  /* 余白は WORKS の WEB カード（.card）に合わせる。書影→タイトルは gap。
     タイトル→本文は .ttl の margin-bottom で決める
     （.pubcol p{margin:0} が後にあるので、p 側の margin-top は効かない） */
  .book.big{width:100%;max-width:18rem;gap:1.8rem}
  .book.big .ttl .sub{display:inline-block;font-size:.85em}
  .book.big .ttl{font-family:var(--serif);font-size:1.02rem;line-height:1.6;margin-bottom:.7em}
  .pubcol p{margin:0;font-size:.86rem;line-height:1.85;color:var(--ink-soft);max-width:none;text-align:justify}

  @media (max-width:760px){
    .wcards{grid-template-columns:minmax(0,1fr)}
  }
  @media (max-width:640px){
    .wlist li{grid-template-columns:minmax(0,1fr)}
    .pub2{grid-template-columns:minmax(0,1fr);gap:2.4rem}
    .blist{--n:3}
  }

  /* ---- faq / about / contact ---- */
  .faq{margin-top:3rem;border-top:1px solid var(--rule-soft)}
  .faq details{border-bottom:1px solid var(--rule-soft)}
  .faq summary{padding:1.5rem 0;display:flex;gap:1.2rem;align-items:baseline;
               color:var(--ink);font-size:.92rem;cursor:pointer;list-style:none;
               transition:color .2s ease}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"＋";margin-left:auto;font-family:var(--mono);
                      font-size:.9rem;color:var(--ink-faint)}
  .faq details[open] summary::after{content:"－"}
  .faq summary:hover,.faq summary:focus-visible{color:var(--ink-soft)}
  .faq .q{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em}
  /* 開閉のアニメーション（FAQ と SERVICE の details 共通）は、末尾のスクリプトで
     高さと透明度を同時に動かしている（2026-09-11。それまでは透明度だけで、高さは
     一瞬で変わっていた）。details は open を外した瞬間に中身が消えるので、
     CSS だけでは閉じる動きが出せない。動いているあいだだけ中身をはみ出させない */
  .faq details.is-animating .a,
  .svc details.is-animating > ul,.svc details.is-animating > ol{overflow:hidden}
  .faq .a{padding:0 3.4rem 1.9rem}
  .faq .a p{margin:0 0 1.1rem;font-size:.9rem;line-height:1.95;
            color:var(--ink-soft);max-width:none}
  .faq .a p:last-child{margin-bottom:0}
  /* 代表プロフィール：左に写真、右に本文 */
  .prof{margin-top:clamp(2.6rem,5vw,3.8rem);display:grid;align-items:start;
        grid-template-columns:minmax(0,17rem) minmax(0,1fr);
        gap:clamp(1.8rem,4vw,3.5rem)}
  /* 透過WebPを地に直接置く。面は敷かない（background は置かない）。
     下端のフェードは試して外した。人物の質量が抜けるため（2026-09-07） */
  .prof .pic{margin:0}
  .prof .pic img{display:block;width:100%;height:auto}
  .prof .role{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;color:var(--ink-faint)}
  .prof .name{margin:.5rem 0 0;font-family:var(--serif);font-weight:500;
              font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.5;letter-spacing:.04em}
  .prof .job{margin:.5rem 0 0;font-size:.86rem;color:var(--ink-soft)}
  .prof .bio{margin-top:1.8rem;display:flex;flex-direction:column;gap:1.3rem}
  .prof .bio p{margin:0;font-size:.9rem;line-height:1.95;color:var(--ink-soft);
               max-width:none;text-align:justify}

  /* 会社概要 */
  .about{margin-top:clamp(3.5rem,7vw,5rem);padding-top:clamp(2.2rem,4vw,3rem);
         border-top:1px solid var(--rule-soft);
         display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
         gap:2.2rem 3rem}
  .about dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;color:var(--ink-faint)}
  .about dd{margin:.6rem 0 0;font-size:.93rem;line-height:1.9;color:var(--ink-soft)}
  .about .wide{grid-column:1/-1}
  @media (max-width:760px){
    .prof{grid-template-columns:minmax(0,1fr)}
    .prof .pic{max-width:15rem}
  }
  .cta{margin-top:3rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
  .btn{display:inline-block;border:1px solid var(--ink);padding:1rem 2.4rem;
       font-size:.88rem;letter-spacing:.12em;text-decoration:none;color:var(--ink)}
  .btn:hover,.btn:focus-visible{background:var(--ink);color:var(--paper)}
  .cta .alt{font-size:.86rem;color:var(--ink-faint)}

  /* ---- contact ---- */
  /* 地は明るいグレー。文字は黒。橙はボタンの塗りだけに絞る */
  /* 差し色はページ共通の #E45D0D のまま。このセクションだけ濃くする案は
     一度入れて外した。°CONTACT は 2.97:1 でAA未達だが、11文字の装飾ラベルで
     読めなくても情報が失われないため、色の統一を優先した（2026-09-07） */
  #contact{background:#EAEAEA;color:var(--ink);border-top:0;
           padding:clamp(3.5rem,8vw,5.5rem) 0}
  #contact .wrap{text-align:center}
  #contact .eyebrow{justify-content:center;color:var(--acc);opacity:1}
  #contact .eyebrow .deg{color:var(--acc)}
  #contact h2.sec{color:var(--ink)}
  #contact .lede{margin-inline:auto;color:var(--ink);opacity:.78}
  #contact .cta{margin-top:clamp(2.6rem,5vw,3.4rem);flex-direction:column;
                justify-content:center;gap:clamp(2.2rem,4.5vw,3rem)}
  /* 主ボタン：黒の塗りに白。明るいグレーの地の上でいちばん強く出る */
  #contact .btn{background:var(--ink);border-color:var(--ink);color:#FFF;
                padding:1.15rem 3.2rem;font-size:1rem;letter-spacing:.04em}
  #contact .btn:hover,#contact .btn:focus-visible{background:var(--acc);border-color:var(--acc);color:#FFF}
  #contact .btn:focus-visible{outline-color:var(--ink)}
  /* 電話：ボタンの下の、もうひとつの入口。番号そのものを大きく組む */
  .tel{display:inline-flex;flex-direction:column;align-items:center;gap:.7rem;
       text-decoration:none;color:var(--ink)}
  /* 文であって肩ラベルではないので、mono の字送りをやめて本文の書体で組む */
  .tel .lab{font-size:.98rem;letter-spacing:.06em;opacity:.85}
  .tel .num{font-family:var(--garamond);font-size:clamp(1.9rem,4.6vw,2.7rem);line-height:1;
            letter-spacing:.03em;color:var(--ink);border-bottom:1px solid transparent;
            transition:border-color .2s ease}
  .tel:hover .num,.tel:focus-visible .num{border-bottom-color:var(--ink)}
  .tel .hours{font-size:.84rem;letter-spacing:.04em;opacity:.72}
  .tbd{font-weight:400;color:var(--note);font-family:var(--mono);font-size:.9em}

  /* ---- footer ---- */
  /* CONTACTの橙の帯から、そのまま黒地へ落とす。あいだに紙の余白を挟まない */
  footer{background:var(--band);color:var(--band-ink);padding:clamp(3.5rem,8vw,5.5rem) 0 3rem}
  /* 残すのはロゴとタグラインだけ。ヘッダーが sticky でナビが常に出ているので、
     フッターにメニューは置かない（2026-09-07） */
  footer .cols{display:block}
  footer a{color:var(--band-ink);text-decoration:none;font-size:.86rem;opacity:.8}
  footer a:hover,footer a:focus-visible{opacity:1;text-decoration:underline}
  footer ul{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 1.8rem}
  footer .lab{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;opacity:.55}
  /* 親に opacity をかけると中のリンクまで沈むので、色は要素ごとに指定する */
  footer .end{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.16);
              font-size:.74rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
  footer .end span{opacity:.55}
  footer .end a{font-size:inherit;opacity:.78;
                border-bottom:1px solid transparent;transition:border-color .2s ease, opacity .2s ease}
  footer .end a:hover,footer .end a:focus-visible{opacity:1;text-decoration:none;
                                                  border-bottom-color:var(--band-ink)}

  /* ---- 注記（ワイヤー用） ---- */
  .memo{background:var(--note-bg);border-left:2px solid var(--note);padding:.85rem 1.1rem;
        font-size:.8rem;line-height:1.75;color:var(--note);margin-top:1.6rem;max-width:44em}
  .memo b{font-weight:700}


  /* ============ 差し色 #FB9558 の効かせ方 4パターン ============ */
  /* 01 記号だけ ─ ° のみ。最小限 */
  :root[data-acc="01"] .eyebrow .deg,
  :root[data-acc="01"] .feat .no,
  :root[data-acc="01"] .probs li::before,
  :root[data-acc="01"] .svc .tag,
  :root[data-acc="01"] .faq .q{color:var(--acc)}

  /* 02 面で効かせる ─ 塗りブロック。文字は濃い色を載せる */
  :root[data-acc="02"] .eyebrow .deg,
  :root[data-acc="02"] .probs li::before{color:var(--acc)}
  :root[data-acc="02"] .btn{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
  :root[data-acc="02"] .btn:hover,:root[data-acc="02"] .btn:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--paper)}
  :root[data-acc="02"] .feat .no{background:var(--acc);color:var(--acc-ink);display:inline-block;padding:.15rem .6rem}

  /* 03 罫線と下線 ─ 太めの線で効かせる */
  :root[data-acc="03"] .eyebrow .deg{color:var(--acc)}
  :root[data-acc="03"] section{border-top:3px solid var(--acc)}
  :root[data-acc="03"] h2.sec{border-bottom:1px solid var(--rule);padding-bottom:1.1rem}
  :root[data-acc="03"] .svc article{border-top-width:1px}
  :root[data-acc="03"] nav a:hover,:root[data-acc="03"] nav a:focus-visible{border-bottom:2px solid var(--acc);color:var(--ink)}
  :root[data-acc="03"] .btn{border-width:2px;border-color:var(--acc)}
  :root[data-acc="03"] .btn:hover,:root[data-acc="03"] .btn:focus-visible{background:var(--acc);color:var(--acc-ink)}

  /* 04 黒地の中で ─ 黒帯を増やし、その上で文字色に使う */
  :root[data-acc="04"] .eyebrow .deg{color:var(--acc)}
  :root[data-acc="04"] #features{background:var(--band);color:var(--band-ink);border-top:0}
  :root[data-acc="04"] #features .eyebrow{color:rgba(244,244,240,.55)}
  :root[data-acc="04"] #features .feat,
  :root[data-acc="04"] #features .feat > div{border-color:rgba(244,244,240,.22)}
  :root[data-acc="04"] #features .feat .no{color:var(--acc)}
  :root[data-acc="04"] #features p{color:rgba(244,244,240,.72)}
  :root[data-acc="04"] footer .lab{color:var(--acc);opacity:1}
  :root[data-acc="04"] .btn{background:var(--ink);border-color:var(--ink);color:var(--paper)}
  :root[data-acc="04"] .btn:hover,:root[data-acc="04"] .btn:focus-visible{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}


  a:focus-visible,.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
    *{transition:none!important;animation:none!important}}

/* ==================================================================
 * 2. プライバシーポリシー（wireframe_privacy_v1.html の2つめの <style> をそのまま）
 * ================================================================== */
  /* ---- プライバシーポリシー（下層ページ） ---- */
  /* トップと同じトークンと書体を使う。ここで足すのは本文の組みだけ */
  .doc{padding:clamp(3rem,7vw,5rem) 0 clamp(4rem,9vw,7rem)}
  .doc .wrap{max-width:46rem}
  .doc h1{font-family:var(--serif);font-weight:500;letter-spacing:.02em;
          font-size:clamp(1.6rem,4vw,2.3rem);line-height:1.5;margin:.9rem 0 0}
  .doc .lead{margin-top:1.8rem;font-size:.95rem;line-height:2;color:var(--ink-soft);max-width:none}
  .doc h2{font-family:var(--serif);font-weight:500;font-size:1.08rem;line-height:1.7;
          margin:clamp(2.8rem,5vw,3.6rem) 0 0;padding-top:1.4rem;
          border-top:1px solid var(--rule-soft)}
  .doc h2 .no{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
              color:var(--acc);display:block;margin-bottom:.5rem}
  .doc p{margin:1.1rem 0 0;font-size:.92rem;line-height:2;color:var(--ink-soft);max-width:none}
  .doc strong{color:var(--ink);font-weight:500}
  .doc ul,.doc ol{margin:1.1rem 0 0;padding-left:1.4em;
                  font-size:.92rem;line-height:2;color:var(--ink-soft)}
  .doc li{margin-top:.4rem}
  .doc li strong{color:var(--ink)}
  /* 事業者情報と窓口。罫線の箱ではなく、字下げと細い縦罫で示す */
  .doc .block{margin-top:1.3rem;padding-left:1.2rem;border-left:1px solid var(--rule);
              font-size:.92rem;line-height:2.1;color:var(--ink)}
  .doc .date{margin-top:clamp(3rem,6vw,4rem);padding-top:1.4rem;
             border-top:1px solid var(--rule-soft);
             font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;color:var(--ink-faint)}
  .doc .back{margin-top:2.6rem;font-size:.88rem}
  /* フッターのリンクと同じ扱い。線は伏せておき、ホバーで出す */
  .doc .back a{color:var(--ink);text-decoration:none;
               border-bottom:1px solid transparent;transition:border-color .2s ease}
  .doc .back a:hover,.doc .back a:focus-visible{border-bottom-color:var(--ink)}

/* ==================================================================
 * 3. WordPress 側の調整（ワイヤーにはない）
 * ================================================================== */

/* WordPress は theme.json の blockGap（1.2rem）を、ページ直下（.wp-site-blocks > *）と
   グループブロック（is-layout-flow）の直下の子に margin として入れてくる。
   ワイヤーは header / main / section の padding だけで組んでいるので、その margin を
   打ち消す。core 側は :where() で詳細度ゼロなので、これで勝つ。
   header と footer をテンプレートパーツではなくパターンで直接置いているのは、
   パーツにすると <header class="wp-block-template-part"> で二重に包まれるため */
.wp-site-blocks > *,
main.wp-block-group > *{margin-block:0}

/* ログイン中は管理バー（fixed, 32px／782px以下で46px）のぶんだけ sticky の基準を下げる */
body.admin-bar header{top:32px}
@media (max-width:782px){
  body.admin-bar header{top:46px}
}
