:root{
  --brand:#ef8200;
  /* 記事のH2の帯。面で使うと#ef8200は強いので、少しだけ淡く */
  --h2-band:#f0983a;
  --brand-deep:#c96f00;
  --brand-soft:#ffcb96;   /* 引用の帯の下半分 */
  --panel:#16304a;
  --panel-ink:#ffffff;
  --ground:#ffffff;
  --surface:#f6f6f6;
  --ink:#252525;
  --ink-soft:#6b6b6b;
  --ink-faint:#9a958f;
  --mk-o:#2f7a54;
  --mk-t:#9a6b00;
  --mk-x:#c0392b;
  --mk-o-bg:#e8f4ed;
  --mk-t-bg:#faf1dc;
  --mk-x-bg:#fbeae7;
  --hairline:#e3dfdb;
  --hairline-strong:#c9c3bc;
  /* 2つ目の導線に使う黄色。文字は黒のままのほうが読める */
  --accent-y:#ffc61a; --accent-y-deep:#f0b400;
  /* スマホ下部の帯とバーの高さ。2つは同じ太さにそろえる */
  --spbar-h:52px;
  /* 本文の文字サイズは3段だけにする。13/13.5/14/14.5/15/16/17 と
     7種類に散っていて、同じ役目の文が場所ごとに違う大きさで出ていた
     （2026-08-23 指摘）。
       --fz-lead 章のリード文
       --fz-body 説明文（カード・手順・お知らせ・帯）
       --fz-meta ラベル・日付・タグ */
  --fz-lead:17px; --fz-body:15px; --fz-meta:12px;
  --eg-bad:#c0392b;
  --eg-bad-bg:#fdf0ee;
  --eg-good:#2e8b57;
  --eg-good-bg:#eef8f2;
  --eg-check:#79c0f0;
  --eg-check-bg:#eff6fe;
  --foot:#16304a;
  --foot-ink:#eef1f4;
  --shade:#f6f6f6;
  --link:#1a6fd4;
  --link-hover:#0f4fa0;
  /* 記事の結論の箱。薄い地に破線の枠だけ */
  --ans-bg:#f6f6f6;
  --ans-line:#c9c9c9;
  --logo-filter:grayscale(1);
  --logo-filter-hover:none;
  --dot:rgba(51,49,45,.058);
  --dot2:rgba(51,49,45,.075);
  --dot-cell:26px;
  --map-dot:rgba(51,49,45,.22);

  --disp:"Futura","Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:Helvetica,Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",YuGothic,"Yu Gothic",メイリオ,Meiryo,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --hd-h:88px;
  --pad:8vw;
  --rhythm:90px;
  --ease-strong:cubic-bezier(.79,.17,.15,.96);
  --ease-soft:cubic-bezier(.08,.92,.35,1);

  --photo:url("img/photo.webp");
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --panel:#24405e;
    --ground:#12202e;
    --surface:#1a2b3b;
    --ink:#e6e9ec;
    --ink-soft:#a8b2bc;
    --ink-faint:#7d8894;
    --mk-o:#4f9a72;
    --mk-t:#c39a3a;
    --mk-x:#cf6a58;
    --mk-o-bg:#16261f;
    --mk-t-bg:#26200f;
    --mk-x-bg:#2a1a18;
    --hairline:#2b3f54;
    --hairline-strong:#3d5570;
  --eg-bad:#b8503f;
  --eg-bad-bg:#2a1f1d;
  --eg-good:#2f7a54;
  --eg-good-bg:#182421;
  --eg-check:#3f7fae;
  --eg-check-bg:#172026;
    --eg-bad:#b8503f;
    --eg-bad-bg:#2a1f1d;
    --eg-good:#2f7a54;
    --eg-good-bg:#182421;
    --eg-check:#3f7fae;
    --eg-check-bg:#172026;
    --foot:#0d1826;
    --foot-ink:#e6e9ec;
    --shade:rgba(255,255,255,.05);
  --link:#7fb0f0;
  --link-hover:#a9caf7;
    --link:#7fb0f0;
    --link-hover:#a9caf7;
    --ans-bg:#1a2b3b;
    --ans-line:#41546b;
    --logo-filter:grayscale(1) invert(1);
    --logo-filter-hover:invert(1);
    --dot:rgba(255,255,255,.062);
    --dot2:rgba(255,255,255,.078);
    --map-dot:rgba(255,255,255,.20);
  }
}
:root[data-theme="dark"]{
  --panel:#24405e;
  --ground:#12202e;
  --surface:#1a2b3b;
  --ink:#e6e9ec;
  --ink-soft:#a8b2bc;
  --ink-faint:#7d8894;
  --mk-o:#2f7a54;
  --mk-t:#9a6b00;
  --mk-x:#c0392b;
  --mk-o-bg:#e8f4ed;
  --mk-t-bg:#faf1dc;
  --mk-x-bg:#fbeae7;
  --hairline:#2b3f54;
  --hairline-strong:#3d5570;
  --foot:#0d1826;
  --foot-ink:#e6e9ec;
  --shade:rgba(255,255,255,.05);
  --link:#7fb0f0;
  --link-hover:#a9caf7;
  --ans-bg:#1a2b3b;
  --ans-line:#41546b;
  --logo-filter:grayscale(1) invert(1);
  --logo-filter-hover:invert(1);
  --dot:rgba(255,255,255,.062);
  --dot2:rgba(255,255,255,.078);
  --map-dot:rgba(255,255,255,.20);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* スマホでは背景を固定しない。固定したままだと、スクロールのたびに
   背景を貼り直すことになり、動きが引っかかる。小さい画面では
   固定されているかどうかは、ほぼ見て分からない */
@media(max-width:700px){
  body,.hd{background-attachment:scroll}
}
body{
  margin:0;color:var(--ink);
  background-color:var(--ground);
  background-image:radial-gradient(circle at 1px 1px,var(--dot) 1px,transparent 0);
  background-size:var(--dot-cell) var(--dot-cell);
  background-attachment:fixed;   /* keeps header and page in phase */
  font-family:var(--body);font-size:15px;line-height:2;
  letter-spacing:.05em;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
/* 記事のサムネイルは枠を元画像の縦横比（--ar）に合わせる。決め打ちの枠に
   cover で流し込むと左右が切れて、画像の中の文字が読めなくなる */
.ph{background:var(--photo) center/cover no-repeat,var(--surface)}
/* サムネイルがまだ用意できていない記事。写真の代わりに静かな地を敷く。
   仮の画像を出すより、無いことが分かるほうが誤解がない */
.ph.is-nopic{
  background:var(--surface);
  background-image:
    linear-gradient(to right,var(--hairline) 1px,transparent 1px),
    linear-gradient(to bottom,var(--hairline) 1px,transparent 1px);
  background-size:22px 22px;
}

/* ════ MOTION SYSTEM ════════════════════
   Cloned from leverages.jp: two easing curves carry everything,
   IntersectionObserver adds .is-in, CSS does the rest. */

/* reveal: fade + rise */
.js .rv{opacity:0;transform:translate3d(0,32px,0)}
.js .rv.is-in{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease-soft),transform 1.1s var(--ease-soft);
}
/* reveal: from the side */
.js .rv-l{opacity:0;transform:translate3d(-46px,0,0)}
.js .rv-r{opacity:0;transform:translate3d(46px,0,0)}
.js .rv-l.is-in,.js .rv-r.is-in{
  opacity:1;transform:none;
  transition:opacity .7s .1s var(--ease-soft),transform 1s .1s var(--ease-soft);
}
/* reveal: a rule drawing itself */
.js .rv-line{transform:scaleX(0);transform-origin:left center}
.js .rv-line.is-in{transform:scaleX(1);transition:transform .9s var(--ease-strong)}
/* reveal: image mask wipe.
   The clip lives on the CHILD — clipping the observed element itself
   zeroes its intersection rect and the observer never fires. */
.js .rv-img>*{clip-path:inset(0 100% 0 0)}
.js .rv-img.is-in>*{clip-path:inset(0 0 0 0);transition:clip-path 1.15s var(--ease-strong)}
/* stagger children */
.js .rv[data-d="1"].is-in{transition-delay:.09s}
.js .rv[data-d="2"].is-in{transition-delay:.18s}
.js .rv[data-d="3"].is-in{transition-delay:.27s}

/* split text: one span per character, 0.03s apart */
.split span{display:inline-block;white-space:pre}
.js .split span{
  opacity:0;transform:translate3d(0,.85em,0);
}
.js .is-in .split span,.js .split.is-in span{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease-soft),transform .85s var(--ease-strong);
  transition-delay:calc(var(--i) * .03s);
}

/* photo hover: the slow 5s creep */
.zoom{overflow:hidden}
.zoom>.ph{transition:transform 5s ease-out;will-change:transform}
a:hover>.zoom>.ph,.zoom:hover>.ph,article:hover .zoom>.ph{transform:scale(1.1)}

/* underline that draws from the right */
.ul{position:relative;display:inline-block}
.ul::after{
  content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right center;
  transition:transform .5s var(--ease-soft);
}
a:hover .ul::after,.ul:hover::after{transform:scaleX(1);transform-origin:left center}

/* .rv-l / .rv-r start 46px to the side and slide in. On a phone there is
   no room for that: the element still waiting below the fold widens the
   page and the whole thing can be nudged sideways. Clipping at the root
   does not help — root overflow propagates to the viewport — so drop the
   sideways travel instead and use the same rise as everything else. */
@media(max-width:700px){
  .js .rv-l,.js .rv-r{transform:translate3d(0,32px,0)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv,.js .rv-l,.js .rv-r,.js .split span{opacity:1!important;transform:none!important}
  .js .rv-line{transform:none!important}
  .js .rv-img{clip-path:none!important}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ════ LOADER ═══════════════════════════ */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--ground);
  display:none;align-items:center;justify-content:center;
}
.js .loader{display:flex}
.loader .mark{display:block;opacity:0;animation:logoIn 1s var(--ease-soft) forwards}
.loader .mark img{height:38px;width:auto;display:block}
.loader .bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--brand);transform:scaleX(0);transform-origin:left center;transition:transform .6s var(--ease-soft)}
@keyframes logoIn{to{opacity:1}}
body.loaded .loader{opacity:0;visibility:hidden;transition:opacity .5s .35s,visibility .5s .35s}
body.loaded .loader .bar{transform:scaleX(1)}
/* set by the language switcher: swapping language is not a new visit */
html.no-loader .loader{display:none!important}
@media (prefers-reduced-motion:reduce){.loader{display:none!important}}

/* ════ CURSOR ═══════════════════════════
   Only for a real mouse, and only when motion is welcome.
   difference blending keeps it visible on video, white and ink alike. */
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  body.cur-on,body.cur-on *{cursor:none}
  .cur-dot,.cur-ring{
    position:fixed;top:0;left:0;z-index:300;pointer-events:none;
    border-radius:50%;mix-blend-mode:difference;opacity:0;
    will-change:transform;
  }
  .cur-dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:#fff;transition:opacity .3s}
  .cur-ring{
    width:38px;height:38px;margin:-19px 0 0 -19px;
    border:1px solid rgba(255,255,255,.62);
    transition:width .38s var(--ease-strong),height .38s var(--ease-strong),
               margin .38s var(--ease-strong),border-color .3s,opacity .3s;
  }
  body.cur-on .cur-dot,body.cur-on .cur-ring{opacity:1}
  body.cur-hot .cur-ring{width:62px;height:62px;margin:-31px 0 0 -31px;border-color:#fff}
  body.cur-hot .cur-dot{opacity:0}
}

/* ════ HEADER ═══════════════════════════ */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:70;
  display:flex;align-items:center;gap:0 40px;
  padding:0 var(--pad);height:var(--hd-h);
  background-color:var(--ground);
  background-image:radial-gradient(circle at 1px 1px,var(--dot) 1px,transparent 0);
  background-size:var(--dot-cell) var(--dot-cell);
  background-attachment:fixed;
  border-bottom:1px solid var(--hairline);
  transition:height .5s var(--ease-soft),background .4s;
}
body.sub,body.mv-out{--hd-h:70px}
.logo{display:flex;align-items:center;margin-right:auto;position:relative}
.logo img{width:auto;display:block;transition:opacity .45s var(--ease-soft),filter .4s}
.logo__full{height:52px}
.logo__mark{height:24px;position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0}
body.sub .hd .logo__full,body.mv-out .hd .logo__full{opacity:0}
body.sub .hd .logo__mark,body.mv-out .hd .logo__mark{opacity:1}
/* the tall lockup has the Japanese tagline drawn into the artwork, so the
   English pages use the mark on its own rather than showing Japanese
   in the header of an English page */
html[lang="en"] .logo__full{display:none}
html[lang="en"] .logo__mark{position:static;transform:none;opacity:1;height:30px}
.logo:hover{opacity:.72}
/* white-out the mark wherever it sits on a dark ground */
.on-ink .logo img,body.nav-open .hd .logo img{filter:brightness(0) invert(1)}
.gnav{display:flex;gap:0 30px}
.gnav a{
  font-family:var(--disp);font-size:12px;font-weight:600;
  letter-spacing:.18em;position:relative;padding:8px 0;
  transition:transform .5s var(--ease-soft);
}
/* the dot above each item — always there, wakes up on hover */
.gnav a::before{
  content:"";position:absolute;top:-9px;left:50%;width:3px;height:3px;
  background:var(--hairline-strong);border-radius:50%;
  transform:translateX(-50%) scale(1);
  transition:transform .45s var(--ease-strong),background .3s;
}
.gnav a:hover::before{background:var(--brand);transform:translateX(-50%) scale(1.9)}
.gnav a::after{
  content:"";position:absolute;left:0;bottom:2px;width:100%;height:1px;
  background:var(--brand);transform:scaleX(0);transform-origin:right center;
  transition:transform .5s var(--ease-soft);
}
.gnav a:hover::after{transform:scaleX(1);transform-origin:left center}
.hd .cta{
  position:relative;overflow:hidden;
  background:var(--brand);color:#fff;
  font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.16em;
  padding:15px 26px;
}
.hd .cta span{position:relative;z-index:1}
.hd .cta::before{
  content:"";position:absolute;inset:-2px -30%;background:var(--panel);
  transform:translateX(-115%) skewX(-16deg);
  transition:transform .55s var(--ease-strong);
}
.hd .cta:hover::before{transform:translateX(0) skewX(-16deg)}

/* language switcher — hairline pair, same drawing language as the nav.
   It stays in the header at every width: an overseas visitor should not
   have to open a menu to find their own language. */
.langs{display:flex;align-items:center;flex:none}
.langs a{
  font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.16em;
  color:var(--ink-faint);padding:0 12px;position:relative;white-space:nowrap;
  transition:color .35s var(--ease-soft);
}
.langs a[lang="ja"]{font-family:var(--body);letter-spacing:.1em}
.langs a+a::before{
  content:"";position:absolute;left:0;top:50%;margin-top:-6px;
  width:1px;height:12px;background:var(--hairline-strong);
}
.langs a:hover{color:var(--ink)}
.langs a.is-current{color:var(--ink)}
.langs a.is-current::after{
  content:"";position:absolute;left:12px;right:12px;bottom:-7px;
  height:1px;background:var(--brand);
}
/* inside the overlay it sits on the dark panel instead */
.langs--sp{justify-content:center;margin:30px 0 0;border-bottom:0}
.spmenu .langs a{color:rgba(255,255,255,.55);font-size:13px;padding:0 16px;border-bottom:0}
.spmenu .langs a.is-current{color:var(--panel-ink)}
.spmenu .langs a+a::before{background:rgba(255,255,255,.28);height:14px;margin-top:-7px}
@media(min-width:901px){.langs--sp{display:none}}
@media(max-width:900px){
  .hd .langs{margin-left:auto;margin-right:4px}
  .langs a{padding:0 9px;font-size:10.5px}
}

/* hamburger + SP overlay */
.burger{display:none;width:44px;height:44px;padding:0;margin-right:-10px;background:none;border:0;cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;width:22px;height:1px;background:var(--ink);transition:transform .45s var(--ease-strong),background .3s}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:25px}
.spmenu{
  /* 重なり順は 下のバー(60) < このドロワー(65) < ヘッダー(70)。
     ヘッダーより上げると、閉じるための×ボタンがドロワーの下に潜って
     開いたら閉じられなくなる。ここは必ずヘッダーより下に置く */
  position:fixed;inset:0;z-index:65;background:var(--panel);color:var(--panel-ink);
  /* iOSはアドレスバーの出入りで画面の高さが変わる。100dvh なら
     いま見えている高さに追従するので、下が切れない */
  height:100dvh;
  display:flex;flex-direction:column;justify-content:flex-start;
  /* 上はヘッダーの高さぶんを空け、さらに余白を足す。中央寄せだと項目が
     増減するたびにロゴとの間隔が変わり、詰まって見えることがある */
  /* 下は、ホームバー（safe-area）のぶんも足しておく。ここが足りないと
     いちばん下の言語切り替えが画面の縁に貼りついて押しにくい */
  padding:calc(var(--hd-h) + 74px) var(--pad) calc(56px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease-soft),visibility .45s;
}
.spmenu a{
  font-family:var(--disp);font-size:19px;font-weight:600;letter-spacing:.22em;
  padding:18px 0;border-bottom:1px solid rgba(255,255,255,.16);
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease-soft),transform .6s var(--ease-strong);
}
.spmenu a small{display:block;font-family:var(--body);font-size:11.5px;letter-spacing:.14em;opacity:.6;margin-top:5px;font-weight:400}
body.nav-open{overflow:hidden}
body.nav-open .spmenu{opacity:1;visibility:visible}
body.nav-open .spmenu a{opacity:1;transform:none}
body.nav-open .spmenu a:nth-child(1){transition-delay:.08s}
body.nav-open .spmenu a:nth-child(2){transition-delay:.14s}
body.nav-open .spmenu a:nth-child(3){transition-delay:.2s}
body.nav-open .spmenu a:nth-child(4){transition-delay:.26s}
body.nav-open .spmenu a:nth-child(5){transition-delay:.32s}
body.nav-open .burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
body.nav-open .hd{background:transparent;border-bottom-color:transparent}
body.nav-open .logo b{color:var(--panel-ink)}
body.nav-open .burger span{background:var(--panel-ink)}
/* 開いているあいだ、ヘッダーの言語切替は紺地の上に乗る。
   既定の色（濃いインク）だと背景に沈んで読めない */
body.nav-open .hd .langs a{color:rgba(255,255,255,.6)}
body.nav-open .hd .langs a.is-current{color:var(--panel-ink)}
body.nav-open .hd .langs a+a::before{background:rgba(255,255,255,.3)}
/* ── メニューの中のタグ ──────────────────
   記事に書いたタグから、同じ話題の一覧へ入れるようにする。
   .spmenu a は大きな項目のための指定なので、ここで打ち消す */
.spmenu__tags{margin:34px 0 0;padding:26px 0 0;border-top:1px solid rgba(255,255,255,.16)}
.spmenu__tags-t{
  font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.2em;
  margin:0 0 16px;color:rgba(255,255,255,.55);
}
.spmenu__tags-t small{
  display:block;font-family:var(--body);font-size:11px;letter-spacing:.14em;
  font-weight:400;margin-top:5px;
}
.spmenu .tagchips--sp a{
  font-family:var(--body);font-size:13px;font-weight:400;letter-spacing:.06em;
  padding:9px 14px;border:1px solid rgba(255,255,255,.28);border-bottom-width:1px;
  color:var(--panel-ink);background:transparent;
}
.spmenu .tagchips--sp a:hover,.spmenu .tagchips--sp a:active{
  background:var(--panel-ink);border-color:var(--panel-ink);color:var(--panel);
}
.spmenu .tagchips--sp .tagchips__n{color:rgba(255,255,255,.5)}
.spmenu .tagchips--sp a:hover .tagchips__n{color:var(--panel);opacity:.6}

@media(max-width:900px){.gnav,.hd .cta{display:none}.burger{display:block}}
@media(min-width:901px){.spmenu{display:none}}

/* ════ BUTTON — the leverages mechanism ══
   Outline = four 1px bars (so each edge can draw itself).
   Hover  = two 320x280 frames, rotated -45deg, sweep in from
            both ends and fill; arrows swap left-to-right. */
.btn{
  position:relative;display:block;width:264px;height:60px;
  overflow:hidden;text-align:center;cursor:pointer;
  transform:translate3d(0,0,0);
  /* このクラスは <a> と <button> の両方に付く。button のままだと
     ブラウザ標準のコントロールとして描かれ、iOSでは水色に、
     PCでは灰色の地に見えていた。素の見た目に戻す */
  -webkit-appearance:none;appearance:none;
  background:none;border:0;border-radius:0;padding:0;margin:0;
  color:var(--ink);font:inherit;
  -webkit-tap-highlight-color:transparent;
}
.btn__lines i{position:absolute;background:var(--ink);display:block;transition:transform .5s .1s ease-in-out,background .3s}
.btn__lines i:nth-child(1){top:0;left:0;width:100%;height:1px;transform-origin:left center}
.btn__lines i:nth-child(2){top:0;right:0;width:1px;height:100%;transform-origin:center top}
.btn__lines i:nth-child(3){bottom:0;left:0;width:100%;height:1px;transform-origin:right center}
.btn__lines i:nth-child(4){top:0;left:0;width:1px;height:100%;transform-origin:center bottom}
.js .btn__lines i:nth-child(1),.js .btn__lines i:nth-child(3){transform:scaleX(0)}
.js .btn__lines i:nth-child(2),.js .btn__lines i:nth-child(4){transform:scaleY(0)}
.js .btn.is-in .btn__lines i{transform:none}
/* the two rotated frames give the button its cut corners, and slide
   inward on hover — the same 320x280 / -45deg geometry as the original */
.btn__f{
  position:absolute;width:320px;height:280px;border:1px solid var(--ink);
  transition:transform .6s var(--ease-strong),border-color .3s,opacity .3s;
}
.btn__f1{top:0;left:calc(100% - 10px);transform-origin:0 0;transform:rotate(-45deg)}
.btn__f2{top:-220px;left:-310px;transform-origin:320px 280px;transform:rotate(-45deg)}
.btn:hover .btn__f1{transform:rotate(-45deg) translate3d(-46px,0,0)}
.btn:hover .btn__f2{transform:rotate(-45deg) translate3d(46px,0,0)}
/* the fill is its own diagonal wipe, so coverage is never in doubt */
.btn__fill{
  position:absolute;top:-1px;bottom:-1px;left:-26%;right:-26%;
  background:var(--ink);
  transform:translateX(-104%) skewX(-16deg);
  transition:transform .55s var(--ease-strong);
}
.btn:hover .btn__fill{transform:translateX(0) skewX(-16deg)}
.btn__t{
  position:relative;z-index:2;display:block;
  font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.16em;
  line-height:60px;color:var(--ink);transition:color .3s .15s;
}
.btn:hover .btn__t{color:var(--ground)}
.btn__a{
  position:absolute;z-index:2;top:50%;width:22px;height:1px;background:var(--ink);
  transition:transform .45s var(--ease-strong),opacity .3s,background .3s .15s;
}
.btn__a::after{
  content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.btn__a1{right:22px;color:var(--ink)}
.btn__a2{left:22px;color:var(--ground);opacity:0;transform:translateX(-16px)}
.btn:hover .btn__a1{transform:translateX(16px);opacity:0}
.btn:hover .btn__a2{opacity:1;transform:translateX(0);background:var(--ground)}
/* on dark grounds */

/* ════ SECTION FRAME ════════════════════ */
section{padding:var(--rhythm) var(--pad);scroll-margin-top:96px;position:relative}
.shead{margin:0 0 42px;position:relative}
.lbl{
  display:flex;align-items:center;gap:11px;
  font-size:12px;letter-spacing:.22em;color:var(--ink-soft);margin:0 0 16px;
}
.lbl::before{content:"";width:7px;height:7px;background:var(--brand);flex:none}
.shead h2{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(38px,5.6vw,62px);letter-spacing:.13em;
  margin:0;line-height:1.05;
}
.shead .rule{height:1px;background:var(--hairline-strong);margin:26px 0 0;max-width:100%}
/* `ch` is sized on the "0" glyph, so 60ch left the Japanese lead
   breaking at half the column. Measured in em — one em is one
   full-width character — the line runs most of the width instead.
   Scoped past .lbl, which this rule used to outrank and restyle. */
.shead>p:not(.lbl){
  margin:26px 0 0;color:var(--ink);font-size:17px;
  max-width:min(100%,66em);
}

/* ════ HERO ═════════════════════════════ */
.hero{position:relative;padding-top:88px}
.hero .zoom{height:clamp(430px,74vh,720px)}
.hero .zoom>.ph{height:100%}

/* ── hero video ──────────────────────────
   The poster still is what the browser paints first (and what LCP
   measures). The video file is only requested on wide screens, and
   fades in over the still once it can actually play. */
.hero-still{position:absolute;inset:0;background:url("img/hero-poster.webp") center/cover no-repeat}
.hero-v{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;
  transition:opacity 1s var(--ease-soft);
}
.hero-v.is-playing{opacity:1}

/* ── dark scrim ──────────────────────────
   Darkens the footage so the copy reads and the grid stops looking
   like graph paper. */
.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,rgba(5,10,16,.80) 0%,rgba(5,10,16,.46) 46%,rgba(5,10,16,.30) 100%),
    radial-gradient(130% 100% at 74% 22%,rgba(5,10,16,0) 30%,rgba(5,10,16,.52) 100%);
}

/* ── digital grid overlay ────────────────
   Fine mesh (26px) at very low contrast, with a brighter line every
   5th cell. Reads as texture, not as a notebook rule. */
.hero-grid{
  /* was 26px. 3px at 1x, 2px on retina — as fine as the panel can
     still resolve; below this the mesh collapses into flat film. */
  --g:3px;
  --gline:1px;
  --gink:rgba(255,255,255,.13);
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  background-image:
    linear-gradient(to right,var(--gink) var(--gline),transparent var(--gline)),
    linear-gradient(to bottom,var(--gink) var(--gline),transparent var(--gline));
  background-size:var(--g) var(--g);
  opacity:0;transition:opacity 1.4s .45s var(--ease-soft);
}
@media (min-resolution:2dppx){
  .hero-grid{--g:2px;--gline:.5px;--gink:rgba(255,255,255,.17)}
}
.rv-img.is-in .hero-grid,.js .hero-grid.is-in{opacity:1}
/* sparse structure lines keep the mesh from reading as flat film */
.hero-grid::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.09) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:120px 120px;
}
.hero-grid::after{
  content:"";position:absolute;left:0;right:0;top:0;height:30%;
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(255,255,255,.035) 44%,
    rgba(239,130,0,.085) 50%,
    rgba(255,255,255,.035) 56%,
    transparent 100%);
  animation:scan 7.5s var(--ease-soft) infinite;
}
@keyframes scan{0%{transform:translateY(-110%)}100%{transform:translateY(440%)}}
/* HUD corner brackets */
.hero-marks{position:absolute;inset:24px;pointer-events:none}
.hero-marks i{position:absolute;width:20px;height:20px;border:1px solid var(--brand);opacity:.9}
.hero-marks i:nth-child(1){top:0;left:0;border-width:1px 0 0 1px}
.hero-marks i:nth-child(2){top:0;right:0;border-width:1px 1px 0 0}
.hero-marks i:nth-child(3){bottom:0;left:0;border-width:0 0 1px 1px}
.hero-marks i:nth-child(4){bottom:0;right:0;border-width:0 1px 1px 0}
@media (prefers-reduced-motion:reduce){
  .hero-grid::after{animation:none;opacity:0}
  .hero-grid{opacity:1}
}
@media(max-width:700px){.hero-grid::before{background-size:80px 80px}.hero-marks{inset:14px}}
/* copy sits directly on the footage — no coloured block behind it */
.hero-copy{
  position:absolute;left:var(--pad);bottom:13%;z-index:3;
  color:#fff;max-width:min(780px,84vw);
}
.hero .en{
  font-family:var(--disp);font-size:11.5px;font-weight:600;
  letter-spacing:.34em;opacity:.82;margin:0 0 24px;
}
.hero h1{
  font-size:clamp(30px,4.5vw,58px);line-height:1.44;
  letter-spacing:.13em;font-weight:600;margin:0;
  text-shadow:0 2px 34px rgba(4,10,16,.5);
}
.hero .rule{width:56px;height:2px;background:var(--brand);margin:32px 0 0;transform-origin:left center}
.scroll-cue{
  position:absolute;right:var(--pad);bottom:34px;z-index:3;
  font-family:var(--disp);font-size:10px;letter-spacing:.28em;
  color:#fff;display:flex;align-items:center;gap:14px;
}
.scroll-cue s{display:block;width:56px;height:1px;background:currentColor;text-decoration:none;overflow:hidden;position:relative}
.scroll-cue s::after{content:"";position:absolute;inset:0;background:var(--brand);animation:cue 2.4s var(--ease-soft) infinite}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@media(max-width:700px){
  .hero-copy{bottom:9%;max-width:none;right:var(--pad)}
  .scroll-cue{display:none}
}

/* ════ ABOUT ════════════════════════════ */
.about{display:grid;grid-template-columns:1.05fr 1fr;gap:0 68px;align-items:center}
.about .zoom{aspect-ratio:4/3}
.about .zoom>.ph{height:100%}
.about .txt h3{
  font-size:clamp(20px,2.2vw,27px);line-height:1.85;
  letter-spacing:.13em;font-weight:600;margin:0 0 28px;
}
.about .txt p{color:var(--ink);font-size:var(--fz-lead);margin:0 0 18px;max-width:56ch}
@media(max-width:860px){.about{grid-template-columns:1fr;gap:36px}}

/* ════ SERVICE ══════════════════════════ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0 44px}
.card{position:relative;display:block;color:inherit}
.card .zoom{aspect-ratio:16/10;margin-bottom:26px}
.card .zoom>.ph{height:100%}
.card .idx{margin:0 0 22px}
.card .idx .rule{
  display:block;width:44px;height:2px;background:var(--brand);
  transform-origin:left center;transition:width .5s var(--ease-strong);
}
.card:hover .idx .rule{width:76px}
.card h3{font-size:16px;letter-spacing:.12em;font-weight:600;margin:0 0 14px;line-height:1.7}
.card p{margin:0;color:var(--ink);font-size:var(--fz-body);line-height:1.95}
@media(max-width:1000px){
  .cards{grid-template-columns:1fr;gap:0}
  /* 1列に落ちると3つの商品の切れ目が分からなくなるので、区切りを引く */
  .cards>.card{padding:44px 0}
  .cards>.card+.card{border-top:1px solid var(--hairline-strong)}
  .cards>.card:first-child{padding-top:0}
  .cards>.card:last-child{padding-bottom:0}
}


/* ════ FLOW ═════════════════════════════ */
.flow{background:var(--surface)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0 36px;position:relative}
.step{position:relative;padding-top:38px}
/* 番号の上の罫は、1列に折り返したときの区切りとしてだけ残す。
   横に4つ並ぶ幅では、写真と番号だけで十分に切れて見える */
.step::before{content:none}
@media(max-width:860px){
  .step::before{
    content:"";position:absolute;top:0;left:0;width:100%;height:1px;
    background:var(--hairline-strong);transform-origin:left center;
  }
}
.step b{
  font-family:var(--disp);font-size:62px;font-weight:700;line-height:1;
  letter-spacing:.02em;display:block;margin:0 0 22px;
  color:transparent;-webkit-text-stroke:1px var(--brand);
}
.step h3{font-size:16px;letter-spacing:.11em;font-weight:600;margin:0 0 12px}
.step p{margin:0;font-size:var(--fz-body);color:var(--ink);line-height:1.9}
@media(max-width:860px){.steps{grid-template-columns:1fr;gap:44px 0}.step b{font-size:48px}}

/* ════ PARTNERS MARQUEE ═════════════════
   One track, the logo set repeated so each half fills any viewport,
   translated -50% on a linear loop — the seam is invisible. */
#clients{padding-bottom:0}
/* top page only: four heads that sat too far from the block above.
   A ratio, not a fixed value, so it tightens with the mobile rhythm too */
body:not(.sub) #service,
body:not(.sub) #flow,
body:not(.sub) #news,
body:not(.sub) #guests{padding-top:calc(var(--rhythm)*.72)}

/* ── GUESTS の背景：ドットの世界地図 ─────────
   ここだけページ共通のドット格子をやめる。地の色で一度塗りつぶし、
   その上に地図を敷く。地図は1枚のSVGをマスクにしているので、
   色はテーマのトークンから来る（画像は色を持たない） */
#guests{background-color:var(--ground)}
#guests>*:not(.wmap){position:relative;z-index:1}
.wmap{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.wmap__dots,.wmap__lit{
  position:absolute;inset:0;display:block;
  -webkit-mask-image:url("img/world-dots.svg");mask-image:url("img/world-dots.svg");
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.wmap__dots{background:var(--map-dot)}
/* 光るほうは同じ地図をブランド色で塗ったもの。国の位置に円で切り抜くので、
   にじみではなく「その国のドットだけが点く」 */
.wmap__lit{
  background:var(--brand);opacity:0;
  -webkit-clip-path:circle(0 at 50% 50%);clip-path:circle(0 at 50% 50%);
  transition:clip-path 1.1s var(--ease-soft),-webkit-clip-path 1.1s var(--ease-soft),opacity .7s;
}
.wmap.is-lit .wmap__lit{opacity:1}
/* ドットだけだと点いたことに気づきにくいので、後ろに薄い光を置く */
.wmap__glow{
  position:absolute;display:block;
  width:300px;height:300px;margin:-150px 0 0 -150px;opacity:0;
  background:radial-gradient(circle closest-side,
    rgba(239,130,0,.16) 0%,rgba(239,130,0,.05) 52%,transparent 78%);
  transition:left 1.1s var(--ease-soft),top 1.1s var(--ease-soft),opacity .7s;
}
.wmap.is-lit .wmap__glow{opacity:1}
/* 幅の狭い画面では contain だと地図が小さくなりすぎて、地図に見えない。
   少しだけはみ出させる（この倍率は site.js の lightUp と揃えること） */
@media(max-width:700px){
  .wmap__dots,.wmap__lit{-webkit-mask-size:130% auto;mask-size:130% auto}
  /* 国の点灯はスマホでは出さない。1.1秒かけて clip-path を動かすあいだ、
     マスクを敷いた全面の板を塗り直し続けるので、GUESTS の前後が重くなる。
     実測でこの動きだけが処理時間の3割を占めていた。地図が小さく、
     点いた場所が画面の端に来ることも多いので、失うものも少ない */
  .wmap__lit,.wmap__glow{display:none}
}
@media(prefers-reduced-motion:reduce){
  .wmap__lit,.wmap__glow{transition:none}
}
.marquee{
  position:relative;overflow:hidden;
  margin:48px calc(var(--pad)*-1) 0;padding:36px 0;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
}
.marquee__track{
  display:flex;align-items:center;width:max-content;
  animation:marquee 40s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
/* 画面に入っていないあいだは止める。この帯はマスクを敷いた横長の板なので、
   回している限り描き直しが続き、下のGUESTSをスクロールしている最中の
   なめらかさを奪う。止めても見た目は変わらない */
.marquee.is-off .marquee__track{animation-play-state:paused}
.marquee__cell{
  flex:none;width:220px;height:66px;
  display:flex;align-items:center;justify-content:center;
}
.marquee__cell img{
  max-height:100%;max-width:86%;width:auto;height:auto;
  filter:var(--logo-filter);opacity:.55;
  transition:filter .45s var(--ease-soft),opacity .45s var(--ease-soft);
}
.marquee__cell:hover img{filter:var(--logo-filter-hover);opacity:1}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}
@media(max-width:700px){.marquee__cell{width:150px;height:48px}.marquee{padding:30px 0}}

/* ════ BLOG ═════════════════════════════ */
.blog{background:var(--ground)}
.posts{display:grid;grid-template-columns:repeat(2,1fr);gap:46px 46px}
/* 2列目の本文はサムネイル230pxを引いた残り。minmax(0,1fr) にしておかないと、
   折り返せない日付＋カテゴリ＋執筆者の行がカードを押し広げて横スクロールが出る */
.post{display:grid;grid-template-columns:230px minmax(0,1fr);gap:0 30px;align-items:start}
.post .zoom{aspect-ratio:auto}
.post .zoom>.ph{aspect-ratio:var(--ar,4/3);height:auto}
.post .meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 14px}
/* 執筆者。日付とカテゴリと同じ1行に入れて、カードの高さを増やさない */
.post .au{
  display:inline-flex;align-items:center;gap:5px;margin-left:auto;
  font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.1em;
  color:var(--ink-faint);white-space:nowrap;
}
.post .au svg{width:12px;height:12px;flex:none}
.post time{font-family:var(--mono);font-size:var(--fz-meta);color:var(--ink-faint);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.post .cat{
  font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.16em;
  color:var(--brand);border:1px solid var(--brand);padding:4px 10px;
}
.post h3{font-size:16px;line-height:1.85;letter-spacing:.1em;font-weight:600;margin:0 0 12px}
.post p{margin:0;font-size:var(--fz-body);color:var(--ink);line-height:1.9}
.more{display:flex;justify-content:center;margin-top:54px}
/* 2列にできるのは、本文側に日付＋カテゴリ＋執筆者が1行で入る幅があるとき。
   1300px を切ると1列に落として、カードの幅を確保する */
@media(max-width:1300px){.posts{grid-template-columns:1fr}}
@media(max-width:640px){.post{grid-template-columns:1fr;gap:20px 0}}

/* ════ NEWS ═════════════════════════════ */
.news{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.news li{border-bottom:1px solid var(--hairline);transition:background .3s}
/* 行そのものが1件のお知らせへの入口。矢印だけ出ていて押せない状態だった。
   罫線と背景は li が持ち、並びは a が持つ。行のどこを押しても開く */
.news li>a{
  display:grid;grid-template-columns:118px auto 1fr auto;
  gap:0 28px;align-items:center;
  padding:26px 0;color:inherit;text-decoration:none;
}
.news li:hover{background:var(--shade)}
.news li>a:focus-visible{outline:2px solid var(--brand);outline-offset:-3px}
.news time{font-family:var(--mono);font-size:var(--fz-meta);color:var(--ink-faint);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.news .tag{
  font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.14em;
  border:1px solid var(--hairline-strong);color:var(--ink-soft);
  padding:5px 11px;justify-self:start;
}
/* お知らせの件名。トップでは NEWS の h2 の下なので h3、
   お知らせ一覧ページでは h1 の次に来るので h2。見た目は同じ */
.news h2,.news h3{font-size:var(--fz-body);font-weight:500;letter-spacing:.08em;margin:0;line-height:1.8}
.news li:hover h2,.news li:hover h3{color:var(--brand)}
.news .arw{color:var(--ink-faint);transition:transform .45s var(--ease-strong)}
.news li:hover .arw{transform:translateX(7px);color:var(--brand)}
@media(max-width:700px){
  .news li>a{grid-template-columns:1fr auto;gap:8px 14px;padding:20px 0}
  .news .tag{grid-row:1;justify-self:end}
  .news h2,.news h3{grid-column:1/-1}
  .news .arw{display:none}
}

/* ════ CTA BAND ═════════════════════════ */
/* the band shares FLOW's tint and mesh — the background itself is set
   with the other meshed blocks further down, so they stay identical */
.band{color:var(--ink);display:grid;grid-template-columns:1fr auto;gap:44px;align-items:center}
/* on four sub pages the band lands straight after an equally tinted
   block and the two would read as one — a hairline keeps the seam */
section.alt+.band,.flow+.band{border-top:1px solid var(--hairline)}
/* on the tint these take the ordinary ink, the way every other
   label and lead on the site does — no dimming for a dark ground */
.band .lbl{display:flex;align-items:center;gap:11px;font-size:12px;letter-spacing:.22em;margin:0 0 18px;color:var(--ink-soft)}
.band .lbl::before{content:"";width:7px;height:7px;background:var(--brand);flex:none}
.band h2{font-size:clamp(22px,2.6vw,32px);letter-spacing:.14em;font-weight:600;margin:0 0 16px;line-height:1.6}
.band p{margin:0;font-size:var(--fz-body);color:var(--ink);max-width:min(100%,46em)}
@media(max-width:820px){.band{grid-template-columns:1fr}}

/* ════ FOOTER ═══════════════════════════ */
footer{background:var(--foot);color:var(--foot-ink);padding:60px var(--pad) 38px}
.fgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.14)}
.fgrid p{font-size:var(--fz-body);opacity:.72;margin:18px 0 0;line-height:2}
.fgrid h5{font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.24em;margin:0 0 16px;opacity:.6}
.fgrid ul{list-style:none;margin:0;padding:0;font-size:var(--fz-body);line-height:2.4}
.fgrid a:hover{color:var(--brand)}
footer small{display:block;margin-top:28px;font-size:11.5px;opacity:.5;letter-spacing:.08em}
@media(max-width:760px){.fgrid{grid-template-columns:1fr}}

/* ════ APPENDIX ═════════════════════════ */
.appx{background:var(--surface);border-top:1px solid var(--hairline)}
.appx .shead h2{font-size:clamp(28px,3.6vw,42px)}
.sw{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.sw>div{background:var(--ground)}
.sw .c{height:66px;display:block}
.sw .l{padding:14px 16px 18px;display:block}
.sw code{font-family:var(--mono);font-size:12px;display:block}
.sw em{font-style:normal;font-size:11.5px;color:var(--ink-faint);display:block;margin-top:5px;line-height:1.7}
/* 横に送る表。指で送っている途中でページごと動かない（戻る操作を誤爆しない）ように */
.tbl{overflow-x:auto;overscroll-behavior-x:contain;margin-top:36px}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:13px}
th,td{text-align:left;padding:12px 18px 12px 0;border-bottom:1px solid var(--hairline);vertical-align:top}
th{font-family:var(--disp);font-size:10.5px;letter-spacing:.18em;color:var(--ink-faint);font-weight:700;white-space:nowrap}
.tbl code{font-family:var(--mono);font-size:12px}

/* ════ SUB-PAGE HEADER ══════════════════ */
.crumb{
  display:flex;align-items:center;gap:10px;
  padding:22px 0 20px;
  font-size:12px;letter-spacing:.1em;color:var(--ink-faint);
  border-bottom:1px solid var(--hairline);
}
.crumb a:hover{color:var(--brand)}
.crumb b{font-weight:500;color:var(--ink);font-family:var(--disp);letter-spacing:.16em}
.pmv{padding:0 var(--pad)}
.pmv__in{
  display:grid;grid-template-columns:1fr minmax(0,44%);gap:0 60px;align-items:center;
  padding:56px 0 52px;
}
.pmv h1{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(38px,5.6vw,62px);letter-spacing:.13em;
  margin:0;line-height:1.05;
}
.pmv .rule{height:1px;background:var(--hairline-strong);margin:26px 0 0;transform-origin:left center}
.pmv__lead{margin:26px 0 0;color:var(--ink);font-size:14.5px;max-width:46ch}
.pmv .zoom{aspect-ratio:16/11}
.pmv .zoom>.ph{height:100%}
@media(max-width:860px){
  .pmv__in{grid-template-columns:1fr;gap:34px;padding:44px 0 52px}
  .pmv .zoom{aspect-ratio:16/9}
}

/* ════ SHARED PAGE PIECES ═══════════════ */
section.alt{background:var(--surface)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:0 62px;align-items:center}
.cols.is-flip>.zoom{order:2}
.cols .zoom{aspect-ratio:4/3}
.cols .zoom>.ph{height:100%}
@media(max-width:900px){.cols{grid-template-columns:1fr;gap:34px}.cols.is-flip>.zoom{order:0}}
.h-lead{
  font-size:clamp(20px,2.3vw,29px);line-height:1.8;letter-spacing:.12em;
  font-weight:600;margin:0 0 26px;
}
.svc-en{
  font-family:var(--disp);font-size:11.5px;font-weight:700;letter-spacing:.3em;
  color:var(--brand);margin:0 0 16px;padding-bottom:10px;
  border-bottom:1px solid var(--brand);display:inline-block;
}
.svc-block .prose p{margin:0 0 16px}
.prose{font-size:14.5px;color:var(--ink);max-width:62ch}
.prose.narrow{max-width:70ch}
/* .prose の 62ch は、写真と本文が左右に並ぶ .cols の中での寸法。
   全幅の段に置くと左半分だけで折り返し、下のスライダーと幅がそろわない。
   段いっぱいには広げない（14.5pxで全幅だと1行80字を超える） */
.prose.is-wide{max-width:min(100%,820px)}
/* 条文の見出し。h1 の次に来るページでは h2、節見出しの下では h3。見た目は同じ */
.prose h2,.prose h3{font-size:15.5px;color:var(--ink);letter-spacing:.12em;margin:38px 0 12px;font-weight:600}
.prose p{margin:0 0 16px}
.ticks{list-style:none;margin:22px 0 0;padding:0}
.ticks li{position:relative;padding:0 0 0 24px;margin:0 0 10px;font-size:13.5px}
.ticks li::before{
  content:"";position:absolute;left:0;top:.85em;width:11px;height:1px;background:var(--brand);
}
.lnk{color:var(--ink);font-weight:600}
.lnk:hover{color:var(--brand)}
.note-s{font-size:12.5px;color:var(--ink-faint);margin:18px 0 0}

/* profile table */
table.profile{border-collapse:collapse;width:100%;min-width:0;font-size:14px}
table.profile th,table.profile td{
  text-align:left;vertical-align:top;padding:16px 20px 16px 0;
  border-bottom:1px solid var(--hairline);letter-spacing:.04em;font-weight:400;
}
table.profile th{width:auto;color:var(--ink-faint);font-family:var(--body);font-size:13px;letter-spacing:.1em;white-space:normal}
table.profile th[scope="row"]{white-space:nowrap}
table.profile small{color:var(--ink-faint);font-size:11.5px;margin-left:6px}
@media(max-width:640px){table.profile th[scope="row"]{white-space:normal}}

/* 比較表（3列以上）。見出しの行は、項目名ではなく列の名前なので、
   幅を固定せず、読める濃さで太く出す */
table.profile.is-grid th{
  width:auto;white-space:normal;
  color:var(--ink);font-weight:700;font-size:13px;letter-spacing:.06em;
  border-bottom:1px solid var(--hairline-strong);
  padding-right:16px;
}
/* 比較表は列を潰さない。入らない幅のときは .tbl の中で横に送る。
   スマホで5列を無理に詰めると1文字ずつ折り返して読めなくなる */
table.profile.is-grid{min-width:680px}
/* 表が入りきらないときだけ「スクロールできます →」を下に薄く出す。
   画面幅ではなく、表の入る枠の実寸で出し分けたいのでコンテナクエリを使う。
   対応していないブラウザでは出ないだけで、表の動きは変わらない */
.tblw{container-type:inline-size}
.tbl-hint{display:none}
@container (max-width:679px){
  .tbl-hint{
    display:block;margin:9px 0 0;text-align:right;
    font-family:var(--body);font-size:11.5px;letter-spacing:.08em;
    color:var(--ink-faint);line-height:1.6;
  }
}
/* 1列目のサイト名は折り返さない。ただし幅は取りすぎない */
table.profile.is-grid td{padding-right:16px;font-size:13.5px;line-height:1.85}
table.profile.is-grid th:first-child,
table.profile.is-grid td:first-child{padding-right:24px}
table.profile.is-grid a{color:var(--brand)}
@media(max-width:640px){table.profile.is-grid th{width:auto}}

/* blog cards */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:46px 44px}
.pcard .zoom{margin-bottom:22px}
.pcard .zoom>.ph{aspect-ratio:var(--ar,16/10);height:auto}
.pcard .meta{display:flex;align-items:center;gap:14px;margin:0 0 13px}
.pcard time{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.pcard .cat{font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--brand);border:1px solid var(--brand);padding:4px 10px}
/* 記事名。一覧ページでは h2、サービスページの関連記事では h3。見た目は同じ */
.pcard h2,.pcard h3{font-size:16px;line-height:1.8;letter-spacing:.1em;font-weight:600;margin:0 0 12px}
.pcard p{margin:0;font-size:13px;color:var(--ink);line-height:1.9}
@media(max-width:980px){.pcards{grid-template-columns:repeat(2,1fr);gap:48px 34px}}
@media(max-width:620px){.pcards{grid-template-columns:1fr}}

/* pager */
.pager{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:58px;font-family:var(--disp);font-size:12px;letter-spacing:.14em}
.pager a,.pager span{
  min-width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--hairline-strong);transition:background .3s,color .3s,border-color .3s;
}
.pager span.is-current{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.pager a:hover{border-color:var(--brand);color:var(--brand)}
.pager__next{padding:0 18px}

/* contact form */
.cols.is-form{grid-template-columns:1fr minmax(0,320px);gap:0 64px;align-items:start}
@media(max-width:940px){.cols.is-form{grid-template-columns:1fr;gap:52px}}
.callout{border-left:2px solid var(--brand);padding:14px 0 14px 20px;margin:0 0 36px;font-size:13.5px;color:var(--ink)}
.callout b{color:var(--ink)}
.form label{display:block;margin:0 0 24px}
.form label>span{display:flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:.12em;margin:0 0 9px;color:var(--ink-soft)}
.form label>span i{font-style:normal;font-size:10px;letter-spacing:.1em;color:#fff;background:var(--brand);padding:3px 7px}
.form input,.form select,.form textarea{
  width:100%;font:inherit;font-size:14.5px;color:var(--ink);
  background:var(--ground);border:1px solid var(--hairline-strong);border-radius:0;
  padding:14px 16px;transition:border-color .3s,background .3s;
}
.form textarea{resize:vertical;line-height:1.9}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--brand)}
.form ::placeholder{color:var(--ink-faint)}
.agree{margin:6px 0 30px;font-size:13px}
.cbx{display:flex;align-items:flex-start;gap:11px;cursor:pointer}
.cbx input{width:17px;height:17px;flex:none;margin-top:5px;accent-color:var(--brand)}
.sent{margin:20px 0 0;font-size:13.5px;color:var(--brand);line-height:1.9}
/* 送信に失敗したときだけ出る。フォームの先頭に置いて気づけるようにする */
.form__err{
  margin:0 0 26px;padding:16px 20px;font-size:13.5px;line-height:1.9;
  background:var(--surface);border-left:4px solid var(--brand);
}
/* 迷惑メール対策の入力欄。人には見せないが、読み上げ以外の機械には見える */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.side{border-left:1px solid var(--hairline);padding-left:38px}
.side h2,.side h3{font-size:13px;letter-spacing:.16em;margin:0 0 14px;font-weight:600}
.side h2+*,.side h3+*{margin-top:0}
.side dl{margin:0 0 34px}
.side dt{font-size:11.5px;letter-spacing:.12em;color:var(--ink-faint);margin:14px 0 4px}
.side dd{margin:0;font-size:14px}
.side dd small{color:var(--ink-faint);font-size:11.5px;margin-left:6px}
.side p{font-size:13px;color:var(--ink);margin:0 0 34px;line-height:1.95}
@media(max-width:940px){.side{border-left:0;padding-left:0;border-top:1px solid var(--hairline);padding-top:38px}}

/* current nav item */
.gnav a.is-current::before{background:var(--brand);transform:translateX(-50%) scale(1.9)}

/* the footer mark is already white artwork — don't re-filter it */
.logo.is-white img{filter:none}
footer .logo img{height:38px}

/* carry the same texture across the tinted bands so it never stops mid-page.
   fixed attachment keeps every layer in phase, whatever the section height. */
section.alt,.flow,.appx,.band{
  background-color:var(--surface);
  background-image:
    linear-gradient(to right,var(--dot2) 1px,transparent 1px),
    linear-gradient(to bottom,var(--dot2) 1px,transparent 1px),
    radial-gradient(circle at 1px 1px,var(--dot) 1px,transparent 0);
  background-size:96px 96px,96px 96px,var(--dot-cell) var(--dot-cell);
  background-attachment:fixed;
}

/* fixed attachment is expensive on touch scrolling — drop it there */
@media(max-width:700px){
  body,section.alt,.flow,.appx,.band{background-attachment:scroll}
  .hd{background-image:none}
}
@media (prefers-reduced-motion:reduce){
  body,section.alt,.flow,.appx,.band{background-attachment:scroll}
}

/* the wordmark is dark artwork — invert it wherever the header itself is dark */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hd .logo img,
  :root:not([data-theme="light"]) .loader .mark img{filter:brightness(0) invert(1)}
}
:root[data-theme="dark"] .hd .logo img,
:root[data-theme="dark"] .loader .mark img{filter:brightness(0) invert(1)}

@media(max-width:700px){:root{--rhythm:62px}}

/* ════ PLAY ═════════════════════════════
   Three deliberate bits of mischief against an otherwise strict grid:
   a spinning badge, a pop-in arrow, and a marker that snaps in. */

/* ── spinning badge, doubling as the scroll cue ── */
.badge{
  position:absolute;right:var(--pad);bottom:44px;z-index:4;
  width:124px;height:124px;display:grid;place-items:center;
  color:#fff;cursor:pointer;
}
.badge__ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 24s linear infinite}
.badge__ring text{
  font-family:var(--disp);font-size:8.6px;font-weight:700;
  letter-spacing:.26em;fill:currentColor;
}
.badge__core{
  width:54px;height:54px;border-radius:50%;background:var(--brand);
  display:grid;place-items:center;color:#fff;font-size:17px;line-height:1;
  transition:transform .55s var(--ease-strong);
}
.badge:hover .badge__core{transform:translateY(6px)}
.badge:hover .badge__ring{animation-duration:8s}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:820px){.badge{display:none}}

/* ── arrow that pops onto a card on hover ── */
.card .zoom,.pcard .zoom{position:relative}
.card .zoom::after,.pcard .zoom::after{
  content:"↗";position:absolute;right:14px;top:14px;
  width:42px;height:42px;border-radius:50%;
  background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:15px;line-height:1;
  transform:scale(0) rotate(-40deg);opacity:0;
  transition:transform .5s var(--ease-strong),opacity .3s;
}
.card:hover .zoom::after,.pcard:hover .zoom::after{transform:scale(1) rotate(0);opacity:1}

/* ── the section marker snaps into place ── */
.js .lbl.rv::before{transform:scale(0) rotate(-45deg)}
.js .lbl.rv.is-in::before{
  transform:scale(1) rotate(0);
  transition:transform .7s .12s var(--ease-strong);
}

@media (prefers-reduced-motion:reduce){
  .badge__ring{animation:none}
  .js .lbl.rv::before{transform:none}
}

/* ════ CLIENT CASES ═════════════════════
   Hovering a logo already pauses the belt, so the logo is standing
   still by the time the card appears — it can anchor straight to it.
   The card lives outside .marquee (which clips) and is positioned
   from the cell's live rect. */
/* `section>*` gives this z-index:1, which makes it a stacking context —
   so the card's own z-index:40 only ranks inside here, and the next
   section (also z-index:1, but later in the document) painted over it.
   Lifting the wrapper itself is what actually puts the card on top. */
.clients-wrap{position:relative;z-index:5}
.marquee__cell{cursor:pointer}
.marquee__cell:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.marquee__cell.is-active img{filter:var(--logo-filter-hover);opacity:1}

.cpop{
  position:absolute;z-index:40;left:0;top:0;
  width:min(430px,86vw);
  background:var(--ground);border:1px solid var(--hairline-strong);
  padding:26px 30px 30px;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .3s var(--ease-soft),transform .45s var(--ease-soft),visibility .3s;
  pointer-events:none;
}
.cpop.is-open{opacity:1;visibility:visible;transform:none}
.cpop__tip{
  position:absolute;top:-6px;left:50%;width:10px;height:10px;
  background:var(--ground);
  border-left:1px solid var(--hairline-strong);
  border-top:1px solid var(--hairline-strong);
  transform:translateX(-50%) rotate(45deg);
}
.cpop__no{
  font-family:var(--disp);font-size:10.5px;font-weight:700;letter-spacing:.3em;
  color:var(--brand);margin:0 0 12px;
}
.cpop__name{font-size:18px;letter-spacing:.1em;font-weight:600;margin:0 0 14px;line-height:1.5}
.cpop__scope{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 18px}
.cpop__scope span{
  font-size:11px;letter-spacing:.08em;color:var(--ink-soft);
  border:1px solid var(--hairline-strong);padding:4px 9px;
}
.cpop__text{margin:0;font-size:13.5px;color:var(--ink);line-height:1.95}
.cpop__result{
  margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--hairline);
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
}
.cpop__result>span{font-size:10.5px;letter-spacing:.2em;color:var(--ink-faint);flex:none}
.cpop__result>b{font-size:14.5px;letter-spacing:.06em;font-weight:600;line-height:1.5}
.cpop__result em{
  font-style:normal;font-family:var(--disp);font-weight:700;
  font-size:38px;letter-spacing:.02em;color:var(--brand);
  line-height:1;margin-right:3px;
}
@media(max-width:700px){
  .cpop{padding:22px 22px 24px}
  .cpop__result em{font-size:30px}
}
@media (prefers-reduced-motion:reduce){
  .cpop{transition:none}
}
.marquee.is-held .marquee__track{animation-play-state:paused}

/* ── corner patch ────────────────────────
   Sections on the open ground get a dense mesh in the top-right that
   fades out — the same "technical drawing" idea as the hero's HUD
   brackets, so the wallpaper has somewhere to build up. */
section:not(.alt):not(.flow):not(.band):not(.appx)::before{
  content:"";position:absolute;top:0;right:0;z-index:0;
  width:min(360px,42vw);height:min(260px,32vh);pointer-events:none;
  background-image:
    linear-gradient(to right,var(--dot2) 1px,transparent 1px),
    linear-gradient(to bottom,var(--dot2) 1px,transparent 1px);
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(125% 125% at 100% 0,#000 18%,transparent 74%);
  mask-image:radial-gradient(125% 125% at 100% 0,#000 18%,transparent 74%);
}
section>*{position:relative;z-index:1}
.pmv{position:relative}
.pmv::before{
  content:"";position:absolute;top:0;left:0;z-index:0;
  width:min(300px,38vw);height:210px;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--dot2) 1px,transparent 1px),
    linear-gradient(to bottom,var(--dot2) 1px,transparent 1px);
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(125% 125% at 0 0,#000 16%,transparent 72%);
  mask-image:radial-gradient(125% 125% at 0 0,#000 16%,transparent 72%);
}
.pmv>*{position:relative;z-index:1}
@media(max-width:700px){
  section:not(.alt):not(.flow):not(.band):not(.appx)::before{width:58vw;height:170px}
  .pmv::before{width:52vw;height:150px}
}

/* ── footer watermark ────────────────────
   A monochrome photo sunk into the indigo. luminosity blending lets
   the footer's own hue tint it, so it reads as one surface rather
   than a picture pasted on top. Masked away from the text. */
footer{position:relative;overflow:hidden}
footer::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("img/footer-photo.webp") center 60%/cover no-repeat;
  opacity:.17;
  mix-blend-mode:luminosity;
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.62) 46%,transparent 96%);
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.62) 46%,transparent 96%);
}
footer>*{position:relative;z-index:1}
@media(max-width:700px){
  footer::before{opacity:.13;background-position:center 55%}
}

/* ── service photos ─────────────────────── */
.ph.is-svc1{--photo:url("img/svc-1.webp")}
.ph.is-svc2{--photo:url("img/svc-2.webp")}
.ph.is-svc3{--photo:url("img/svc-3.webp")}
.ph.is-svc4{--photo:url("img/svc-4.webp")}
/* 4つ目の事業が入ったので、トップは横4つではなく2×2に組む。
   横4つだとカード1枚が240px前後になり、事業名が3行に折れる */
.cards.is-four{grid-template-columns:repeat(2,1fr);gap:64px 44px}
@media(max-width:1000px){.cards.is-four{grid-template-columns:1fr;gap:0}}

/* ── service card hover ──────────────────
   Four things move at once so the card visibly changes state:
   the indigo veil lifts, colour returns, the label's rule draws
   across, and the arrow lands. */
.card .zoom,.svc-block .zoom{position:relative}
.card .zoom::before,.svc-block .zoom::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--panel);opacity:.44;
  transition:opacity .75s var(--ease-soft);
}
.card:hover .zoom::before,.svc-block .zoom:hover::before{opacity:0}
.card .zoom>.ph,.svc-block .zoom>.ph{
  /* a foot of shade so the label reads over any photograph */
  background:
    linear-gradient(to top,rgba(4,10,16,.62) 0%,rgba(4,10,16,0) 44%) center/cover no-repeat,
    var(--photo) center/cover no-repeat,
    var(--surface);
  filter:grayscale(1);
  transition:transform 5s ease-out,filter .85s var(--ease-soft);
}
.card:hover .zoom>.ph,.svc-block .zoom:hover>.ph{filter:none}
.card .zoom::after{z-index:3}

@media (prefers-reduced-motion:reduce){
  .card .zoom>.ph,.svc-block .zoom>.ph{filter:none}
  .card .zoom::before,.svc-block .zoom::before{opacity:0}
}

/* ── service detail extras ──────────────── */
.svc-more{margin-top:30px}
.cards.is-others .card h3{margin-bottom:0}
.split .w{display:inline-block;white-space:nowrap}

/* ── page band ───────────────────────────
   Replaces the photo that used to sit beside the title: a full-bleed
   strip, so the title gets the whole width to itself. */
.pband{
  position:relative;width:100%;overflow:hidden;
  height:clamp(180px,26vh,300px);
  margin-top:var(--hd-h);   /* sits flush under the fixed header */
}
.pband>.ph{position:absolute;inset:0}
.pband__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,10,16,.5),rgba(5,10,16,.18));
}
.pband__grid{
  --g:3px;
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.10) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:var(--g) var(--g);
}
@media (min-resolution:2dppx){.pband__grid{--g:2px}}
.pmv__in.is-solo{grid-template-columns:1fr;padding-bottom:44px}
.pmv__in.is-solo .pmv__lead{max-width:1000px}

/* ── scope list ──────────────────────────
   Was a row of equal boxes, which fell apart at six items. A
   definition list holds any number and reads far better. */
.scope{margin:0;border-top:1px solid var(--hairline)}
.scope__row{
  display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);
  gap:0 48px;align-items:start;
  padding:26px 22px 28px 0;border-bottom:1px solid var(--hairline);
  transition:background .35s var(--ease-soft),padding-left .45s var(--ease-strong);
}
.scope__row:hover{background:var(--shade);padding-left:14px}
.scope dt{
  display:flex;align-items:baseline;gap:14px;
  font-size:16px;letter-spacing:.1em;font-weight:600;margin:0;line-height:1.7;
}
.scope dt::before{
  content:"";width:7px;height:7px;background:var(--brand);flex:none;
  transform:translateY(-1px);transition:transform .5s var(--ease-strong);
}
.scope__row:hover dt::before{transform:translateY(-1px) rotate(45deg) scale(1.15)}
.scope dd{margin:0;font-size:14px;color:var(--ink);line-height:2}
@media(max-width:820px){
  .scope__row{grid-template-columns:1fr;gap:10px;padding:22px 0 24px}
  .scope__row:hover{padding-left:10px}
}

/* ── faq accordion ───────────────────────
   A two-column table forced long answers into a narrow cell. Native
   <details> keeps it readable and needs no script. */

/* 読み飛ばしてよい詳細を畳む折りたたみ。FAQ と同じ <details> で、
   スクリプトなしで開閉する。記事の :::fold から作られる */
.fold{
  border:1px solid var(--hairline);border-radius:3px;
  background:var(--ground);margin:26px 0;
}
.fold + .fold{margin-top:-14px;border-top:0;border-radius:0}
.fold summary{
  list-style:none;cursor:pointer;position:relative;
  padding:15px 46px 15px 18px;
  font-family:var(--body);font-weight:700;font-size:15px;line-height:1.6;
  color:var(--ink);
}
.fold summary::-webkit-details-marker{display:none}
.fold summary:hover{color:var(--brand)}
.fold summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.fold__t::before{
  content:"詳しく";display:inline-block;margin-right:10px;padding:2px 8px;
  border-radius:2px;background:var(--shade);color:var(--ink-faint);
  font-size:11px;font-weight:700;letter-spacing:.08em;vertical-align:1px;
}
.fold__ico{position:absolute;right:18px;top:50%;margin-top:-7px;width:14px;height:14px}
.fold__ico::before,.fold__ico::after{
  content:"";position:absolute;background:var(--ink-faint);transition:transform .2s,opacity .2s;
}
.fold__ico::before{left:0;top:6px;width:14px;height:1px}
.fold__ico::after{left:6px;top:0;width:1px;height:14px}
.fold[open] .fold__ico::after{transform:scaleY(0);opacity:0}
.fold[open] summary{border-bottom:1px solid var(--hairline)}
.fold__b{padding:6px 18px 18px}
.fold__b > :first-child{margin-top:0}
.fold__b > :last-child{margin-bottom:0}
.fold__b h3{margin-top:24px;font-size:16px}
@media (prefers-reduced-motion:reduce){.fold__ico::before,.fold__ico::after{transition:none}}

.faq{border-top:1px solid var(--hairline);max-width:900px}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{
  list-style:none;cursor:pointer;position:relative;
  display:grid;grid-template-columns:auto 1fr;gap:0 18px;align-items:start;
  padding:24px 52px 24px 0;
  font-size:15.5px;letter-spacing:.08em;font-weight:600;line-height:1.75;
  transition:color .3s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brand)}
.faq .q{
  font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.12em;
  color:var(--brand);line-height:2.1;
}
.faq__ico{position:absolute;right:8px;top:33px;width:14px;height:14px}
.faq__ico::before,.faq__ico::after{
  content:"";position:absolute;background:var(--ink);
  transition:transform .45s var(--ease-strong),opacity .3s;
}
.faq__ico::before{left:0;top:6px;width:14px;height:1px}
.faq__ico::after{left:6px;top:0;width:1px;height:14px}
.faq details[open] .faq__ico::after{transform:scaleY(0);opacity:0}
.faq details[open] summary{color:var(--brand)}
.faq .a{
  display:grid;grid-template-columns:auto 1fr;gap:0 18px;
  padding:0 52px 28px 0;
}
.faq .a .q{color:var(--ink-faint)}
.faq .a p{margin:0;font-size:16px;color:var(--ink);line-height:2;max-width:62ch}
@media(max-width:700px){
  .faq summary{font-size:14.5px;padding-right:42px;gap:0 12px}
  .faq .a{gap:0 12px;padding-right:0}
}
.lead2{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:0 64px;align-items:start}
.lead2 .h-lead{margin-bottom:0}
.lead2 p{max-width:60ch}
@media(max-width:900px){.lead2{grid-template-columns:1fr;gap:24px}}

/* ── flow / about photos ────────────────── */
.ph.is-flow1{--photo:url("img/flow-1.webp")}
.ph.is-flow2{--photo:url("img/flow-2.webp")}
.ph.is-flow3{--photo:url("img/flow-3.webp")}
.ph.is-flow4{--photo:url("img/flow-4.webp")}
.ph.is-about1{--photo:url("img/about-1.webp")}
.step .zoom{aspect-ratio:4/3;margin:0 0 22px}
.step .zoom>.ph{height:100%;transition:transform 5s ease-out}
.step:hover .zoom>.ph{transform:scale(1.08)}
.step b{font-size:46px}
@media(max-width:860px){.step .zoom{margin-bottom:18px}.step b{font-size:40px}}
.ph.is-lead-tours{--photo:url("img/lead-tours.webp")}
.ph.is-lead-ops{--photo:url("img/lead-ops.webp")}
.ph.is-lead-inbound{--photo:url("img/lead-inbound.webp")}
.ph.is-lead-ai{--photo:url("img/lead-ai.webp")}
.ph.is-lead-about{--photo:url("img/lead-about.webp")}
.ph.is-message{--photo:url("img/message.webp")}
.ph.is-lead-service{--photo:url("img/lead-service.webp")}
.ph.is-lead-blog{--photo:url("img/lead-blog.webp")}
.ph.is-lead-news{--photo:url("img/lead-news.webp")}
.ph.is-lead-contact{--photo:url("img/lead-contact.webp")}
.ph.is-booking{--photo:url("img/booking.webp")}
.msg p{margin:0 0 20px;font-size:17px;line-height:1.95}
.msg .sign{margin-top:34px;font-size:13px;color:var(--ink-soft);line-height:2}
.msg .sign b{font-size:17px;color:var(--ink);letter-spacing:.12em}
.cols .zoom.is-square{aspect-ratio:1/1;position:sticky;top:calc(var(--hd-h) + 30px)}
@media(max-width:900px){.cols .zoom.is-square{position:static}}

/* ── message page ────────────────────────
   The portrait is this page's anchor, so it has to be in the first
   screen. No band here, and the header block is tightened. */
body.is-message .crumb{padding-top:calc(var(--hd-h) + 20px)}
body.is-message .pmv__in{padding:34px 0 30px}
.msg-top{padding-top:46px}
/* centring the row pushed the portrait 289px down and left sticky no
   room to travel — align to the top instead, on this page only */
.msg-top .cols{align-items:start}

/* ════ GUEST SLIDER ═════════════════════
   Centre-focused carousel: the active frame sits in the middle at
   full size and in colour, its neighbours shrink back in mono. The
   set is rendered three times so the loop never hits an end. */
.gallery{position:relative;margin:0 calc(var(--pad)*-1)}
.gallery__viewport{overflow:hidden;width:100%}
.gallery__track{
  display:flex;gap:22px;width:max-content;
  will-change:transform;
  transition:transform .85s var(--ease-strong);
}
.gallery__track.is-jump{transition:none}
.slide{flex:0 0 clamp(250px,30vw,470px)}
.slide .shot{
  position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--surface);
  transform:scale(.86);transform-origin:center;
  transition:transform .85s var(--ease-strong);
}
.slide.is-active .shot{transform:scale(1)}
.slide img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1);
  transition:filter .9s var(--ease-soft),transform 4s ease-out;
}
.slide.is-active img{filter:none}
.slide:hover img{filter:none;transform:scale(1.05)}

.gallery__foot{
  display:flex;align-items:center;justify-content:center;gap:clamp(28px,7vw,110px);
  margin:34px var(--pad) 0;
}
.gallery__cap{
  display:flex;align-items:center;gap:14px;margin:0;
  min-width:clamp(150px,22vw,260px);justify-content:center;
}
.gallery__flag{
  width:30px;height:20px;display:block;flex:none;
  border:1px solid var(--hairline);
}
.gallery__cap span{font-size:16px;letter-spacing:.16em;font-weight:600;white-space:nowrap}

/* ════ YOUTUBE SLIDER ═══════════════════
   GUESTS の見せ方（真ん中が大きく色つき、両隣は縮んでモノクロ）を
   YouTube のサムネイルに移したもの。国旗と世界地図は要らないので、
   ギャラリー側の仕組みは持ち込まず、これだけで完結させている。
   サムネイルは 16:9。i.ytimg.com から直に読む（82本ぶんを手元に
   置くと、動画が増えるたびに取り直すことになるため） */
.ytsl{position:relative;margin:0 calc(var(--pad)*-1)}
.ytsl__vp{overflow:hidden;width:100%}
.ytsl__track{
  display:flex;gap:22px;width:max-content;
  will-change:transform;transition:transform .85s var(--ease-strong);
}
.ytsl__track.is-jump{transition:none}
.ytsl__s{flex:0 0 clamp(240px,28vw,420px)}
.ytsl__a{display:block;text-decoration:none;color:inherit}
.ytsl__shot{
  position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--surface);
  transform:scale(.88);transform-origin:center;
  transition:transform .85s var(--ease-strong);
}
.ytsl__s.is-active .ytsl__shot{transform:scale(1)}
.ytsl__shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1);
  transition:filter .9s var(--ease-soft),transform 4s ease-out;
}
.ytsl__s.is-active .ytsl__shot img{filter:none}
.ytsl__a:hover .ytsl__shot img{filter:none;transform:scale(1.05)}
/* 再生ボタン。真ん中の1枚だけ濃く出す */
.ytsl__play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:.55;transition:opacity .5s var(--ease-soft);
}
.ytsl__s.is-active .ytsl__play,.ytsl__a:hover .ytsl__play{opacity:1}
.ytsl__play i{
  width:54px;height:38px;border-radius:9px;background:rgba(20,20,20,.72);
  display:flex;align-items:center;justify-content:center;
  transition:background .35s var(--ease-soft);
}
.ytsl__a:hover .ytsl__play i{background:#ff0000}
.ytsl__play i::after{
  content:"";width:0;height:0;margin-left:3px;
  border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;
}
.ytsl__t{
  margin:14px 2px 0;font-size:13.5px;line-height:1.7;color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .5s var(--ease-soft);
}
.ytsl__s.is-active .ytsl__t{color:var(--ink)}
.ytsl__foot{
  display:flex;align-items:center;justify-content:center;gap:clamp(28px,7vw,110px);
  margin:30px var(--pad) 0;
}
.ytsl__count{
  font-family:var(--disp);font-size:13px;letter-spacing:.14em;color:var(--ink-faint);
  min-width:96px;text-align:center;
}
.ytsl__count b{color:var(--ink);font-weight:700}
.ytsl__more{margin:26px var(--pad) 0;text-align:center}
@media(max-width:700px){
  .ytsl__track{gap:14px}
  .ytsl__foot{margin-top:22px;gap:20px}
  .ytsl__t{font-size:12.5px}
  .ytsl__play i{width:44px;height:31px}
  .ytsl__play i::after{border-left-width:11px;border-top-width:7px;border-bottom-width:7px}
}
@media (prefers-reduced-motion:reduce){
  .ytsl__track{transition:none}
  .ytsl__shot{transform:none}
  .ytsl__shot img{filter:none}
}

/* the thin, understated arrow from the reference */
.gallery__arw{
  position:relative;width:clamp(52px,7vw,86px);height:26px;flex:none;
  background:none;border:0;padding:0;cursor:pointer;
  opacity:.55;transition:opacity .35s var(--ease-soft);
}
.gallery__arw:hover{opacity:1}
.gallery__arw::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink);
  transition:transform .5s var(--ease-strong);transform-origin:center;
}
.gallery__arw span{
  position:absolute;top:50%;width:11px;height:1px;background:var(--ink);
}
.gallery__arw.is-prev span{left:0;transform-origin:left center;transform:rotate(-32deg)}
.gallery__arw.is-next span{right:0;transform-origin:right center;transform:rotate(32deg)}
.gallery__arw.is-prev:hover::before{transform:scaleX(1.14) translateX(-4%)}
.gallery__arw.is-next:hover::before{transform:scaleX(1.14) translateX(4%)}
@media(max-width:700px){
  .gallery__track{gap:14px}
  .gallery__foot{margin-top:24px;gap:20px}
  .gallery__cap span{font-size:14px}
  .gallery__flag{width:26px;height:17px}
}
@media (prefers-reduced-motion:reduce){
  .gallery__track{transition:none}
  .slide .shot{transform:none}
  .slide img{filter:none}
}

/* ════ ENGLISH TYPOGRAPHY ═══════════════
   Every tracking value above is set for Japanese, where each glyph fills a
   square em and extra space is what makes a line readable. Latin letters
   carry their own sidebearings, so the same numbers read as gappy. These
   overrides retune the places that hold sentences.

   What is deliberately left alone: the all-caps display labels (section
   eyebrows, buttons, the rotating hero badge, dates). Wide tracking is
   correct on capitals, and those carry the look the design is built on. */

/* body copy — this one cascades to every paragraph, list and cell */
html[lang="en"] body{letter-spacing:0}

/* display headings that hold a sentence rather than a label */
html[lang="en"] .hero h1{letter-spacing:.015em}
html[lang="en"] .band h2{letter-spacing:.012em}
html[lang="en"] .h-lead{letter-spacing:.01em}
html[lang="en"] .about .txt h3{letter-spacing:.01em}

/* card and list headings */
html[lang="en"] .card h3,
html[lang="en"] .post h3,
html[lang="en"] .pcard h2,
html[lang="en"] .pcard h3,
html[lang="en"] .news h2,
html[lang="en"] .news h3,
html[lang="en"] .step h3,
html[lang="en"] .scope dt{letter-spacing:.012em}
html[lang="en"] .prose h2,
html[lang="en"] .prose h3{letter-spacing:.02em}
html[lang="en"] .post-rm__i h3,
html[lang="en"] .post-au__n{letter-spacing:.012em}

/* small labels: tightened, but still spaced enough to read as labels */
html[lang="en"] table.profile th{letter-spacing:.04em}
html[lang="en"] .side h2,
html[lang="en"] .side h3{letter-spacing:.06em}
html[lang="en"] .side dt{letter-spacing:.04em}
html[lang="en"] .gallery__cap span{letter-spacing:.05em}
html[lang="en"] .agree .lnk{letter-spacing:.02em}
html[lang="en"] .faq summary{letter-spacing:.012em}
html[lang="en"] .form label>span{letter-spacing:.04em}

/* the page eyebrow is a label in this design; in Japanese it reads as one
   because the wide tracking suits kana. Setting it in capitals gives the
   English the same job without changing the drawing. */
html[lang="en"] .lbl{text-transform:uppercase}

/* the switcher sits on both languages, so this is not scoped to lang */
.langs a[lang="en"]{letter-spacing:.07em}

/* ════ BLOG ARTICLE ═════════════════════
   One column, measured for reading. The section furniture (eyebrow, rule,
   split heading) is reused so an article does not look like a different
   site — it is the same drawing at a different scale. */
/* ── 記事のレイアウト ──────────────────────
   本文と追従サイドバーの2列。タイトル・目次・本文の左端は必ず揃える
   ─ 見出しだけ外へ出ていると、読み手は本文の始まりを毎回探すことになる */
.post-page{padding:0 var(--pad) var(--rhythm)}
/* 帯の写真がない記事は、上に何も無いのでパンくずが固定ヘッダーの裏に隠れる */
.post-page.is-noband{padding-top:calc(var(--hd-h) + 36px)}
.post-grid{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:0 clamp(40px,5vw,72px)}
.post-main{min-width:0}
.post-hd{margin:0 0 44px}
.post-hd .crumb{margin:0 0 34px}
/* 投稿日と最終更新日は同じ行に並ぶので、書体も大きさもそろえる。
   time は等幅13px、こちらは本文書体11.5pxで、見比べると揃っていなかった */
.post-upd{font-family:var(--mono);font-size:13px;color:var(--ink-faint);letter-spacing:.06em}
.post-hd .rule{height:1px;background:var(--hairline-strong);margin:28px 0 0}
.post-lead{margin:24px 0 0;color:var(--ink-soft);font-size:15px;max-width:min(100%,52em)}

/* 本文の一行の長さ。目次もこれに合わせて左右の端をそろえる。
   em で書くと箱ごとの文字サイズで値がずれるので、共通の寸法は px で持つ */
.post-main{--measure:768px}
.post-body{max-width:min(100%,var(--measure));font-size:17px;line-height:1.95}
/* H2 — meLev と同じ、左に太い縦棒を立てるだけの作り。
   採寸: 24px/700、行間38px、左に6pxの棒、左余白24px、上96px */
/* H2 — ブランド色のベタ帯に白抜き。帯の上下に、白い隙間をはさんで
   もう1本ずつ細い罫を引く（罫は帯より少し外まで伸ばす）。
   参照した記事と同じ二重の構え。節の切れ目が一目で分かる */
.post-body > h2{
  position:relative;
  font-size:clamp(19px,2.1vw,23px);font-weight:700;line-height:1.5;letter-spacing:.04em;
  color:#fff;background:var(--h2-band);
  margin:84px 0 0;padding:15px 20px;
}
/* 帯の上下に、白い隙間をはさんで細い罫をもう1本ずつ。幅は帯とそろえる */
.post-body > h2::before{
  content:"";position:absolute;box-sizing:border-box;
  left:0;right:0;top:-5px;bottom:-5px;
  border-top:2px solid var(--h2-band);border-bottom:2px solid var(--h2-band);
  pointer-events:none;
}
@media(max-width:640px){
  .post-body > h2{padding:13px 15px;margin-top:64px}
}
.post-body h2:first-child{margin-top:0}

/* H3 — 下に2pxの罫を敷き、左の3割だけブランド色。残りは薄いグレー。
   帯のH2に対して、細い線で一段下の見出しだと分かるようにする */
.post-body > h3{
  position:relative;font-size:clamp(17px,1.8vw,20px);font-weight:700;line-height:1.6;
  letter-spacing:.03em;color:var(--ink);margin:56px 0 24px;padding:0 0 13px;
}
.post-body > h3::before{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:linear-gradient(90deg,
    var(--brand) 0, var(--brand) 30%,
    color-mix(in srgb,var(--ink) 14%,transparent) 30%,
    color-mix(in srgb,var(--ink) 14%,transparent) 100%);
}

/* H4 — 本文中の小さな見出し。左にブランド色の棒を立てる。
   大きさは h3 と同じ clamp を1段だけ下げたもの（広い画面で 20px→19px、
   狭い画面で 17px→16px）。h3 と同じ幅で縮むので、どの画面幅でも
   「h3 のすこし下」の関係が保たれる。17px 固定だと広い画面で差が開きすぎた。
   ラベル形（11.5px・字送り .18em）だった頃は、節の見出しとして小さすぎた */
.post-body h4:not(.post-step){
  display:block;font-family:var(--body);font-size:clamp(16px,1.7vw,19px);font-weight:700;
  letter-spacing:.01em;line-height:1.6;color:var(--ink);
  margin:34px 0 12px;padding:2px 0 2px 14px;border-left:4px solid var(--brand);
}
.post-body h4:not(.post-step)::after{content:none}
.post-body .fold__b h4:not(.post-step){font-size:clamp(15px,1.6vw,18px)}

/* 手順の見出し（#### 手順N｜…）。番号を丸で立てて、本文と同じ大きさで読ませる。
   ラベル用の h4（11.5px・字送り .18em）のままだと、手順の一文には小さすぎた */
.post-body h4.post-step{
  /* 通常の h4 は左に棒を立てるブロックにしたので、丸を横に並べる flex は
     こちらで持つ。以前は共通の h4 が flex だったため書いていなかった */
  display:flex;font-family:inherit;font-size:19px;font-weight:700;letter-spacing:.01em;
  color:var(--ink);margin:40px 0 16px;align-items:flex-start;gap:14px;line-height:1.6;
  padding:0;border-left:0;
}
.post-body h4.post-step::after{content:none}
.post-body h4.post-step .post-step__n{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--brand);
  color:#fff;font-family:var(--disp);font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.post-body h4.post-step .post-step__t{flex:1}
/* 丸から次の丸へ、細い縦線でつなぐ。順を追う話だと一目で分かる。
   手順1つぶんを箱で囲って、その箱の高さぶん線を引く。
   最後の手順には引かないので、線は最後の丸で終わる */
.post-body .post-step__grp{position:relative}
.post-body .post-step__grp:not(:last-child)::before{
  /* 丸の下端から、次の箱の丸の上端まで届かせる。
     箱の下端で止めると、箱と箱の間（見出しの margin）で線が切れる */
  content:"";position:absolute;left:15px;top:34px;
  bottom:calc(var(--step-mt, 32px) * -1);
  width:1px;background:var(--hairline-strong);
}
.post-body h4.post-step .post-step__n{position:relative;z-index:1}
.post-body .post-step__grp{--step-mt:32px}
.post-body .post-step__grp > h4.post-step{margin-top:var(--step-mt)}
.post-body .post-step__grp:first-child > h4.post-step{margin-top:0}
/* 線と本文がぶつからないよう、手順の中身を丸のぶんだけ右へ寄せる */
.post-body .post-step__grp > :not(h4){margin-left:44px}
@media(max-width:640px){
  .post-body .post-step__grp{--step-mt:26px}
  .post-body .post-step__grp:not(:last-child)::before{
    left:13px;top:30px;bottom:calc(var(--step-mt) * -1);
  }
  .post-body .post-step__grp > :not(h4){margin-left:37px}
}
/* 番号つきの並び。手順と同じ丸で数字を立てるが、順を追う話ではないので
   縦線は引かない。線を引くのは、上から順にやる作業だけ */
.post-body ol.post-ol{list-style:none;margin:26px 0;padding:0;counter-reset:po}
.post-body ol.post-ol > li{
  position:relative;counter-increment:po;padding:0 0 0 44px;margin:0 0 18px;
}
.post-body ol.post-ol > li:last-child{margin-bottom:0}
.post-body ol.post-ol > li::before{
  content:counter(po);position:absolute;left:0;
  top:calc(var(--pt, 0px) + (1lh - 30px) / 2);
  width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;
  font-family:var(--disp);font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
@media(max-width:640px){
  .post-body ol.post-ol > li{padding-left:37px}
  .post-body ol.post-ol > li::before{width:26px;height:26px;font-size:13px;
    top:calc(var(--pt, 0px) + (1lh - 26px) / 2)}
}
@media(max-width:640px){
  .post-body h4.post-step{font-size:17px;gap:11px}
  .post-body h4.post-step .post-step__n{width:26px;height:26px;font-size:13px}
}
.post-body p{margin:0 0 22px}
/* 見出しの直後に来るものすべてに間隔を持たせる。以前は段落と写真だけを
   拾っていたので、見出しのすぐ下が箇条書きだと詰まって見えていた。
   小見出し（h3）は自前の間隔のほうが広いので、そのままにする */
.post-body h2 + *:not(h3){margin-top:26px}
/* 本文のリンクは、下線つきの青。リンクだと一目で分かる形にする。
   下線が後から伸びてくる動きは、本文では読みの邪魔になるので使わない */
.post-body a{
  color:var(--link);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
}
.post-body a:hover{color:var(--link-hover)}
.post-body a .ul{display:inline}
.post-body a .ul::after{display:none}
.post-ul,.post-ol{margin:0 0 24px;padding:0 0 0 2px;list-style:none;counter-reset:n}
.post-ul li,.post-ol li{position:relative;padding:0 0 0 24px;margin:0 0 10px}
/* 項目と項目の間に点線を入れて、どこまでが1項目かを見せる。
   最後の項目のあとには引かない。
   2つ目からは上に余白が付くので、丸や点もその余白ぶん下げないと点線に
   重なる（番号の丸が②③で点線に掛かっていた・2026-08-23 指摘）。
   余白の値は --pt に持たせ、印の位置は全部そこから測る */
.post-body .post-ul > li,
.post-body .post-ol > li{--pt:0px}
.post-body .post-ul > li + li,
.post-body .post-ol > li + li{
  border-top:1px dashed var(--hairline-strong);
  padding-top:12px;margin-top:12px;--pt:12px;
}
/* 囲みの中と、押さえどころの中でも同じにそろえる */
.post-eg__b .post-ul > li + li,
.post-point__b .post-ul > li + li{
  border-top:1px dashed var(--hairline-strong);
  padding-top:12px;margin-top:12px;
  --pt:12px;                 /* 印の位置もこの余白ぶん下げる */
}
.post-point__b .post-ul > li{--pt:7px}
.post-point__b .post-ul > li + li{--pt:12px}
/* 「見出しのような太字＋説明」の形の項目は、太字で行を切る。
   1行に続けると、どこまでが項目名なのか読み取れない */
.post-ul li>b:first-child,.post-ol li>b:first-child{display:block;margin-bottom:3px}
/* 点は1行目の中央に置く。em で置くと、点線を入れて padding が付いたぶんだけ
   下にずれた。行送りから測れば、余白が変わっても位置は動かない */
.post-ul li::before{content:"";position:absolute;left:2px;
  top:calc(var(--pt, 0px) + (1lh - 7px) / 2);width:7px;height:7px;background:var(--brand)}
@supports not (top: 1lh){
  .post-ul li::before{top:calc(var(--pt, 0px) + .92em)}
}
.post-ol li{counter-increment:n;padding-left:32px}
.post-ol li::before{
  content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.15em;
  font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--brand);
}
/* 代表の実体験。付箋ではなく、本人が話しているかたちで見せる。
   丸く抜いた顔写真を左に置き、右の吹き出しが本人の言葉 */
.post-say{
  display:grid;grid-template-columns:64px 1fr;gap:0 24px;
  margin:34px 0;align-items:start;
}
.post-say__ph{
  display:block;width:64px;height:64px;border-radius:50%;
  overflow:hidden;background:var(--surface);
}
/* author-avatar.webp は message.webp から顔まわりだけを正方形に抜いたもの。
   全身の写真を丸く抜くと顔が小さすぎて誰か分からない */
.post-say__ph img{width:100%;height:100%;object-fit:cover;display:block}
.post-say__b{
  position:relative;margin:0;padding:22px 28px;
  background:var(--surface);
}
/* 吹き出しの尻尾。写真の中心の高さに合わせる */
.post-say__b::before{
  content:"";position:absolute;left:-9px;top:24px;width:0;height:0;
  border-top:8px solid transparent;border-bottom:8px solid transparent;
  border-right:9px solid var(--surface);
}
.post-say__b::after{
  content:"";position:absolute;right:0;top:0;width:56px;height:56px;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--dot2) 1px,transparent 1px),
    linear-gradient(to bottom,var(--dot2) 1px,transparent 1px);
  background-size:8px 8px;
  -webkit-mask-image:radial-gradient(120% 120% at 100% 0,#000 20%,transparent 72%);
  mask-image:radial-gradient(120% 120% at 100% 0,#000 20%,transparent 72%);
}
/* 吹き出しの中も本文と同じ大きさにする。16px 固定だったので、
   PC（17px）でもスマホ（15px）でも本文とずれていた */
.post-say__b p{margin:0;font-size:inherit;color:var(--ink)}
.post-body code{font-family:var(--mono);font-size:13px;background:var(--shade);padding:2px 6px}
.post-body .tbl{margin:0 0 26px}
.post-body .tblw{margin:0 0 26px}
.post-body .tblw>.tbl{margin:0}

.post-src{margin:64px 0 0;padding:30px 0 0;border-top:1px solid var(--hairline-strong)}
/* 参考資料は本文の節ではないので、連番も罫線も付けない */
.post-src h2{
  counter-increment:none;font-size:12px;letter-spacing:.18em;color:var(--ink-soft);
  font-family:var(--disp);font-weight:700;margin:0 0 18px;border:0;padding:0;
}
.post-src h2::before,.post-src h2::after{display:none}
.post-src li{font-size:13.5px;word-break:break-all}

.post-rel{margin:70px 0 0;border-top:1px solid var(--hairline);padding:34px 0 0}
.post-rel .lbl{margin:0 0 18px}
.post-rel__i{
  display:grid;grid-template-columns:auto 1fr;gap:0 16px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--hairline);font-size:14.5px;
}
.post-rel__i .cat{
  font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--ink-faint);
}
.post-nav{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin:52px 0 0;padding:22px 0 0;border-top:1px solid var(--hairline);
  font-family:var(--disp);font-size:11.5px;font-weight:700;letter-spacing:.14em;
}
.post-nav a{color:var(--ink-soft);transition:color .3s}
.post-nav a:hover{color:var(--brand)}
@media(max-width:700px){
  .post-body{font-size:15px;line-height:1.95}
  .post-body h2{margin-top:46px}
  .post-rel__i{grid-template-columns:1fr;gap:6px}
  .post-nav{font-size:10.5px;letter-spacing:.1em}
}

/* 記事本文の写真。カード類と同じ 4:3・同じゆっくりした寄りに揃える */
.post-fig{margin:34px 0 30px}
/* 画像の下の出典表記。本文より小さく薄く出す。
   長いURLがそのまま入るので、折り返しは anywhere にしておく */
.post-fig__cap{
  margin:9px 2px 0;font-size:12px;line-height:1.75;
  color:var(--ink-faint);letter-spacing:.02em;overflow-wrap:anywhere;
}
.post-fig__cap a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.post-fig__cap a:hover{color:var(--link)}
@media(max-width:640px){.post-fig__cap{font-size:11px}}
.post-fig .zoom{aspect-ratio:auto}
.post-fig img{width:100%;height:auto;object-fit:contain;transition:transform 5s ease-out}
.post-fig:hover img{transform:scale(1.05)}
.post-fig figcaption{
  margin:12px 0 0;font-size:12.5px;line-height:1.9;color:var(--ink-faint);
  padding-left:14px;border-left:1px solid var(--hairline-strong);
}
/* 見出しの高さは記事用に落とす。62px の表示サイズは英字1語のためのもの */
.pmv h1.post-h1{
  font-family:var(--body);font-size:clamp(23px,3.2vw,38px);line-height:1.6;
  letter-spacing:.05em;font-weight:600;margin:0;
}
.lbl .post-date{
  display:inline-flex;align-items:center;gap:12px;margin-left:14px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-faint);
}
/* 帯の写真を置かないページ。帯（.pband）が margin-top でヘッダー分の
   逃げを作っていたので、帯がないと見出しとパンくずが header の下に潜る */
.pmv.is-noband{padding-top:calc(var(--hd-h) + 36px)}
/* お知らせの詳細。記事ほど長くないので目次も帯も置かないが、
   本文の一行の長さと組みは記事と同じものを使う */
/* ニュースの投稿は、ブログ記事と違って右に目次が立たない。
   713px のままだと右側が丸ごと空くので、記事の本文（768px）より広く取る。
   全幅まで伸ばさないのは、17pxで全幅だと1行80字を超えて読みにくいため */
.news-post{--measure:940px;padding-top:56px}
.news-post .post-body{margin:0}
.news-post__back{margin:52px 0 0;padding-top:30px;border-top:1px solid var(--hairline)}
/* トップに出しきれないお知らせがあるときだけ出る、一覧への入口 */
.news-all{margin:32px 0 0;font-size:13.5px;letter-spacing:.06em}
.tagsec .tagchips{margin-top:4px}
.news-post .lbl .tag{
  font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.14em;
  border:1px solid var(--hairline-strong);color:var(--ink-soft);padding:4px 9px;
}
body.is-post .pband{margin-bottom:0}
/* 記事の帯には、文字の入ったサムネイルが来ることがある。
   下層ページと同じ濃さの暗幕をかけると、その文字が沈んで読めなくなる。
   帯の上に site 側の文字は載らないので、ここは薄くてかまわない */
body.is-post .pband__scrim{
  background:linear-gradient(to top,rgba(5,10,16,.18),rgba(5,10,16,.04));
}


/* 記事本文の見せ場をもう2つ ─────────────────
   同じ見た目が延々と続くと、長い記事は読み手が現在地を見失う */

/* 2026-08-22: 相談ポップを畳めるようにした。?v= のハッシュが同じまま
   中身だけ変わった瞬間があり、そのURLで古いCSSがキャッシュに焼き付いた。
   デプロイが通る前に ?v= 付きのURLを叩かないこと */
/* 悪い例・良い例・チェックの囲み。
   参照: makuring の「◯◯におすすめのVPN」ブロック。
   帯を全幅に敷いて中央に印と見出し、中身は帯と同系のごく薄い地。
   実測した色 … 帯 rgb(121,192,240) / 地 rgb(239,246,254) */
.post-eg{
  margin:30px 0;border-radius:2px;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.06),0 6px 16px -8px rgba(0,0,0,.12);
}
.post-eg + .post-eg{margin-top:16px}
.post-eg .post-eg__t{
  margin:0;padding:13px 18px;text-align:center;color:#fff;
  font-family:var(--body);font-size:inherit;font-weight:700;
  letter-spacing:.04em;line-height:1.6;
}
.post-eg__i{
  flex:0 0 auto;width:1.15em;height:1.15em;margin-right:.5em;
  fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;
}
.post-eg .post-eg__t{display:flex;align-items:center;justify-content:center}
.post-eg__b{padding:20px 22px}
.post-eg__b > :first-child{margin-top:0}
.post-eg__b p{margin:0 0 12px}
.post-eg__b p:last-child{margin:0}
.post-eg__b .post-ul,.post-eg__b .post-ol{margin:0}
/* 囲みの中の点は、帯の色と競わないよう本文と同じ色にする */
.post-eg__b .post-ul li::before{background:var(--ink)}

.post-eg.is-bad   .post-eg__t{background:var(--eg-bad)}
.post-eg.is-bad   .post-eg__b{background:var(--eg-bad-bg)}
.post-eg.is-good  .post-eg__t{background:var(--eg-good)}
.post-eg.is-good  .post-eg__b{background:var(--eg-good-bg)}
.post-eg.is-check .post-eg__t{background:var(--eg-check)}
.post-eg.is-check .post-eg__b{background:var(--eg-check-bg)}

/* 例の箱（良い例・悪い例・チェック）の中に置いた番号付きリスト。
   丸の色は既定でブランドのオレンジだが、青い「チェック」の箱の中では
   色が合わない。箱の色に揃える。すぐ上の post-ul の印は var(--ink) に
   直してあるのに、post-ol だけ直し漏れていた */
.post-eg.is-check .post-ol > li::before{background:var(--eg-check)}
.post-eg.is-good  .post-ol > li::before{background:var(--eg-good)}
.post-eg.is-bad   .post-ol > li::before{background:var(--eg-bad)}

/* 比較表の ◎ ○ △ × 。印は線で描き、セルの背景に薄く色を敷く。
   丸い座布団に印を載せるより、表を離れて見たときに濃淡で読める。
   印だけのセルを posts.py が見つけて .mkc を付ける */
.tbl td.mkc,.tbl th.mkc{
  text-align:center;vertical-align:middle;white-space:nowrap;
  /* 印の列は中身が小さいのに幅を取り、項目名の列を潰していた。
     1% を指定すると、その列は中身に必要な幅まで縮む */
  width:1%;
}
/* 列幅は中身の文字幅に合わせる。
   width:100% の表は、余った幅を全部の列に等しく配る。そのため番号だけの列や
   ○×の列が、文章の列と同じ幅まで広がってしまう。
   中身が短い列に width:1% を指定すると、その列は文字が入るぶんだけに縮み、
   余りは長い列に回る。どの列が短いかは posts.py が測って .hug を付ける。
   ここを固定値（min-width:12em など）で押さえないこと。何度も崩れた原因である */
.tbl td.hug,.tbl th.hug,
table.profile td.hug,table.profile th.hug{width:1%;white-space:nowrap}
/* 全部の列が短い表。width:100% で引き伸ばすと1列の幅が足りず、
   どのセルも1文字ずつ折り返す。中身の幅まで表ごと縮める */
/* {{数字|ラベル}} の見た目。数字の下に、何の数字かを小さく出す。
   計算式の中に語を混ぜると式が追えなくなるので、下の行へ逃がしている */
.post-body .tt{display:inline-block;text-align:center;vertical-align:baseline;
  line-height:1.35;margin:0 1px}
.post-body .tt__v{display:block;border-bottom:1px dotted var(--ink-faint);padding-bottom:1px}
.post-body .tt__k{display:block;font-size:10.5px;color:var(--ink-faint);
  white-space:nowrap;font-weight:400;letter-spacing:0}
.post-body p:has(.tt){line-height:2.9}
table.profile.is-fit{width:auto;min-width:0}
table.profile.is-fit th,table.profile.is-fit td{white-space:nowrap;padding-right:20px}
.mkc .mk-i{
  width:19px;height:19px;display:inline-block;vertical-align:-.3em;
  fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
}
.mkc.is-o{background:var(--mk-o-bg)}
.mkc.is-t{background:var(--mk-t-bg)}
.mkc.is-x{background:var(--mk-x-bg)}
.mkc.is-o .mk-i{stroke:var(--mk-o)}
.mkc.is-t .mk-i{stroke:var(--mk-t)}
.mkc.is-x .mk-i{stroke:var(--mk-x)}
.mkc.is-n .mk-i{stroke:var(--ink-faint)}

@media(max-width:700px){
  .post-eg__t{padding:11px 14px}
  .post-eg__b{padding:16px 16px}
}

/* 押さえどころ。参照: makuring の rich-list。
   左上に小さなタブを出し、本体は同じ色の2pxの枠で囲む。
   実測した色 … rgb(239,193,85) */
.post-point{
  margin:30px 0;padding:0;background:transparent;border:0;position:static;
}
.post-point .post-point__t{
  display:block;width:fit-content;margin:0;padding:3px 12px;
  background:var(--brand);color:#fff;
  font-family:var(--body);font-size:14px;font-weight:700;letter-spacing:.06em;
  line-height:1.8;border-radius:7px 7px 0 0;
}
.post-point__b{
  border:2px solid var(--brand);background:var(--ground);
  padding:14px 18px 16px;border-radius:0 4px 4px 4px;
}
.post-point__b > :first-child{margin-top:0}
.post-point__b p{margin:0 0 12px}
.post-point__b p:last-child{margin:0}
/* 箇条書きは、点ではなく丸に収めたチェックで出す */
.post-point__b .post-ul{margin:0;padding:0;list-style:none}
.post-point__b .post-ul li{
  position:relative;padding:7px 0 7px 36px;margin:0;
}
.post-point__b .post-ul li::before{
  content:"";position:absolute;left:0;top:calc(var(--pt, 7px) + 3px);
  width:24px;height:24px;border-radius:50%;background:var(--brand);
}
/* 1行目の中央に置く。lh は「その要素の行送り」なので、
   文字の大きさが変わっても付いてくる */
@supports (top: 1lh){
  .post-point__b .post-ul li::before{top:calc(var(--pt, 7px) + (1lh - 24px) / 2)}
  .post-point__b .post-ul li::after{top:calc(var(--pt, 7px) + (1lh - 8px) / 2)}
}
.post-point__b .post-ul li::after{
  content:"";position:absolute;left:8px;top:calc(var(--pt, 7px) + 13px);
  width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}
@media(max-width:700px){
  .post-point__b{padding:12px 15px 14px}
  .post-point__t{font-size:13px}
}

/* 記事末尾のFAQはサービスページと同じアコーディオンに寄せる */
.post-body .faq{margin:26px 0 0}
.post-body .faq summary{font-size:15px;padding:20px 46px 20px 0}
.post-body .faq .a p{font-size:inherit}
@media(max-width:700px){
  .post-body > h2{margin-top:56px}
  .post-say{grid-template-columns:48px 1fr;gap:0 14px}
  .post-say__ph{width:48px;height:48px}
  .post-say__b{padding:18px 20px}
  .post-say__b::before{top:16px}
}

/* ── 目次 ─────────────────────────────────
   meLev の Contents を採寸して合わせたもの。箱・行の高さ・シェブロン・
   「すべて表示」の開閉まで同じ作り。色だけはTABICOのトークンを使う
   （固有の灰色を焼き込むと、ダークテーマで浮くため） */
.toc__t{
  font-size:18px;font-weight:700;letter-spacing:.04em;color:var(--ink);
  margin:0 0 5px;line-height:1.45;
}
.post-toc{
  background:var(--surface);padding:40px 56px 44px;margin:0 0 56px;
  max-width:min(100%,var(--measure));position:relative;
}
.post-toc ul{list-style:none;margin:0;padding:0}
.post-toc>ul>li{
  position:relative;padding:16px 0 16px 34px;
  font-size:15px;line-height:1.7;font-weight:700;
  border-bottom:1px solid var(--hairline-strong);
}
.post-toc>ul>li:last-child{border-bottom:0}
.post-toc a{display:block;transition:color .3s}
.post-toc a:hover{color:var(--brand)}

/* 章の開閉。＞が閉じている合図、開くと下を向く。
   三角そのものを押させるので、見た目と動きが食い違わない */
.toc__sub{position:absolute;opacity:0;pointer-events:none}
.toc__sw{
  position:absolute;left:-4px;top:9px;width:34px;height:34px;
  cursor:pointer;z-index:1;
}
.toc__sw::before{
  content:"";position:absolute;left:11px;top:12px;width:8px;height:8px;
  border-top:2px solid var(--ink);border-right:2px solid var(--ink);
  transform:rotate(45deg);
  transition:transform .35s var(--ease-strong),border-color .3s;
}
.toc__sw:hover::before{border-color:var(--brand)}
.toc__sub:checked~.toc__sw::before{transform:rotate(135deg)}
.toc__sw:focus-visible{outline:2px solid var(--brand);outline-offset:-4px}
/* 章に節が付かないときは押せないので、静かな四角にする */
.post-toc>ul>li.lv2:not(.has-sub)::before{
  content:"";position:absolute;left:11px;top:24px;width:7px;height:7px;
  background:var(--brand);
}

/* 節は開いたときだけ出る。三角は使わず箇条書きにして、
   これ以上は開かないことを形で示す */
.toc__subs{display:none;margin:14px 0 2px;padding:0}
.toc__sub:checked~.toc__subs{display:block}
.post-toc .toc__subs li.lv3{
  position:relative;padding:0 0 0 16px;margin:0 0 9px;
  font-size:14px;font-weight:500;line-height:1.75;border-bottom:0;
}
.post-toc .toc__subs li.lv3:last-child{margin-bottom:0}
.post-toc .toc__subs li.lv3::before{
  content:"";position:absolute;left:0;top:.68em;width:5px;height:5px;
  background:var(--ink-faint);
}

/* 「すべて表示」— チェックボックスだけで開閉。JSに依存させない */
.toc__cb{position:absolute;opacity:0;pointer-events:none}
/* 数えるのは章だけ。節まで数えると、章を開いた拍子に畳まれてしまう */
.post-toc.is-folded>ul>li:nth-child(n+6){display:none}
/* 畳む側の指定より詳細度を上げないと開かない */
.post-toc .toc__cb:checked~ul>li{display:list-item}
/* 読み上げにだけ渡す文字 */
.u-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.toc__more{
  display:table;margin:0 auto;padding:26px 10px 0;cursor:pointer;
  font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--ink);
  transition:color .3s;
}
.toc__more::before{content:"すべて表示"}
.toc__more::after{
  content:"";display:inline-block;width:7px;height:7px;margin:0 0 3px 10px;
  border-bottom:2px solid var(--brand);border-right:2px solid var(--brand);
  transform:rotate(45deg);transition:transform .3s;
}
.toc__more:hover{color:var(--brand)}
.toc__cb:checked ~ .toc__more::before{content:"閉じる"}
.toc__cb:checked ~ .toc__more::after{transform:rotate(-135deg);margin-bottom:0}
@media(max-width:700px){
  .post-toc{padding:28px 24px 30px}
  .post-toc li{padding:14px 0 14px 20px;font-size:14.5px}
}

/* ── 記事の入り口 ───────────────────────
   悩み → 結論 → わかること。本題の前に、読み手が自分向けか判断できるように */
/* ── この記事の結論 ───────────────────────
   目次のすぐ下に置く、ここだけ読んで帰る人のための塊。
   以前は目次の上にも「お悩み」「わかること」の箱を置いていたが、
   本文1本目の章が同じことを書いていたのでやめた。
   囲みは、ごく薄い地に破線の枠だけ。中に模様は持たせない。 */
.post-intro{margin:0 0 52px;max-width:min(100%,var(--measure))}
.post-intro__b{padding:30px 34px 32px}
.post-intro__t{
  font-family:var(--disp);font-size:14px;font-weight:700;letter-spacing:.16em;
  color:var(--brand);margin:0 0 16px;
  display:flex;align-items:center;gap:12px;
}
.post-intro__a{margin:0;font-size:17px;line-height:1.95}
/* ステッチの枠。border:1px dashed は使わない ─ Safari は箱の座標が
   小数のとき辺をまるごと落とすことがあり、実機で左の破線だけ消えていた。
   4辺を背景で描けば、どのエンジンでも同じ間隔で同じ本数が出る */
.post-intro--ans{
  border:0;
  --st:repeating-linear-gradient(var(--ans-line) 0 6px,transparent 6px 10px);
  --sw:repeating-linear-gradient(90deg,var(--ans-line) 0 6px,transparent 6px 10px);
  background:
    var(--sw) left top/100% 1px no-repeat,
    var(--sw) left bottom/100% 1px no-repeat,
    var(--st) left top/1px 100% no-repeat,
    var(--st) right top/1px 100% no-repeat,
    var(--ans-bg);
}
/* 見出しの左に短い横罫。英字ラベルの扱いをこの箱でも使う */
.post-intro--ans .post-intro__t::before{
  content:"";width:22px;height:1px;background:var(--brand);flex:none;
}
/* 太字が効くように、地の文は太らせない。全部 600 だと
   いちばん言いたい一文が沈む */
.post-intro--ans .post-intro__a{font-size:15.5px;line-height:1.95;font-weight:400}
.post-intro--ans .post-intro__a b{font-weight:700}

@media(max-width:700px){
  .post-intro__b{padding:26px 22px 28px}
  .post-intro{margin-bottom:40px}
}

/* ── 記事末尾の相談導線 ─────────────────
   本文を読み終えた位置に置く。フッター手前の共通帯とは別物 */
.post-cta{
  position:relative;margin:60px 0 46px;padding:36px 40px 38px;
  max-width:min(100%,var(--measure));background:var(--surface);
  display:flex;align-items:center;justify-content:space-between;
  gap:26px 40px;flex-wrap:wrap;
}
.post-cta::after{
  content:"";position:absolute;right:0;top:0;width:64px;height:64px;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--dot2) 1px,transparent 1px),
    linear-gradient(to bottom,var(--dot2) 1px,transparent 1px);
  background-size:8px 8px;
  -webkit-mask-image:radial-gradient(120% 120% at 100% 0,#000 20%,transparent 72%);
  mask-image:radial-gradient(120% 120% at 100% 0,#000 20%,transparent 72%);
}
.post-cta__x{flex:1 1 22em;min-width:0}
.post-cta__l{
  font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.2em;
  color:var(--brand);margin:0 0 14px;
}
.post-cta__t{font-size:clamp(17px,1.9vw,20px);font-weight:700;line-height:1.65;margin:0 0 12px}
.post-cta__d{font-size:14px;line-height:1.95;color:var(--ink-soft);margin:0}
.post-cta .btn{flex:none;width:212px;height:56px}
@media(max-width:700px){
  .post-cta{padding:28px 22px 30px;margin:44px 0 36px}
  .post-cta .btn{width:100%}
}

/* ── 追従サイドバー ───────────────────── */
.post-side{position:relative}
/* 追従するのはバナーと目次だけ。最近の投稿は流れに置いたままにする
   （一緒に追従させるとバナーが画面外に押し出されて見えなくなる）。
   追従する塊は必ず画面に収める。バナーは縮まないので、
   目次のリストだけが余った高さを引き受けて内部スクロールする */
.post-side__in{
  position:sticky;top:calc(var(--hd-h) + 28px);
  display:flex;flex-direction:column;
  max-height:calc(100vh - var(--hd-h) - 56px);
  overflow-y:auto;
}
.post-side__bn,.post-side__b{flex:none}
.post-side__toc{display:flex;flex-direction:column;min-height:0}
.post-side__toc ul{overflow-y:auto;min-height:0}
/* サイドバーのバナー */
.post-side__bn{display:block;margin:0 0 30px;overflow:hidden}
.post-side__bn img{width:100%;height:auto;display:block;transition:transform 4s ease-out}
.post-side__bn:hover img{transform:scale(1.04)}

/* 目次は本文内のものと同じ作り。幅が狭いぶんだけ寸法を落とす。
   6本で畳み、開いたあとは内部スクロールで画面に収める */
.post-side__toc{
  background:var(--surface);padding:24px 22px 26px;position:relative;
  display:flex;flex-direction:column;min-height:0;
}
.post-side__toc .toc__t{font-size:16px;font-weight:700;margin:0 0 4px;color:var(--ink)}
.post-side__toc ul{list-style:none;margin:0;padding:0;overflow-y:auto;min-height:0}
.post-side__toc>ul>li{
  position:relative;padding:11px 0 11px 26px;
  font-size:13px;line-height:1.7;font-weight:700;
  border-bottom:1px solid var(--hairline-strong);
}
.post-side__toc>ul>li:last-child{border-bottom:0}
.post-side__toc a{display:block;color:var(--ink);transition:color .3s}
.post-side__toc a:hover{color:var(--brand)}
.post-side__toc a.is-here{color:var(--brand)}
/* 幅が狭いので、三角と余白を本文の目次より一段小さく取る */
.post-side__toc .toc__sw{left:-6px;top:4px;width:28px;height:28px}
.post-side__toc .toc__sw::before{left:9px;top:10px;width:7px;height:7px}
.post-side__toc>ul>li.lv2:not(.has-sub)::before{left:9px;top:18px;width:6px;height:6px}
.post-side__toc .toc__subs{margin:10px 0 2px}
.post-side__toc .toc__subs li.lv3{
  position:relative;padding:0 0 0 14px;margin:0 0 8px;
  font-size:12.5px;font-weight:500;line-height:1.7;border-bottom:0;
}
.post-side__toc .toc__subs li.lv3:last-child{margin-bottom:0}
.post-side__toc .toc__subs li.lv3::before{
  content:"";position:absolute;left:0;top:.66em;width:4px;height:4px;
  background:var(--ink-faint);
}
.post-side__toc.is-folded>ul>li:nth-child(n+5){display:none}
.post-side .toc__cb:checked~ul>li{display:list-item}
.post-side__toc .toc__more{
  margin:0 auto;padding:18px 10px 0;font-size:13px;color:var(--ink);
  display:table;text-align:center;
}
.post-side__toc .toc__more::after{width:6px;height:6px;margin-left:8px}

/* ── 最近の投稿 ─────────────────────────
   sigyou-school の同名ウィジェットの作り。見出しは中央、その下に短い縦罫。
   各行はサムネ左・タイトルと日付が右 */
/* section は共通で padding:90px 8vw を持つ。サイドバーの中では
   その左右余白が幅をほぼ食い潰すので、明示的に打ち消す */
.post-rc{flex:none;margin:0 0 34px;padding:0}
.post-rc__h{
  font-size:17px;font-weight:700;color:var(--ink);text-align:center;
  margin:0 0 26px;padding:0 0 18px;position:relative;letter-spacing:.04em;
}
.post-rc__h::after{
  content:"";position:absolute;left:50%;bottom:0;width:1px;height:14px;
  background:var(--hairline-strong);
}
.post-rc ul{list-style:none;margin:0;padding:0}
.post-rc li{border-bottom:1px solid var(--hairline)}
.post-rc li:last-child{border-bottom:0}
.post-rc li a{
  display:grid;grid-template-columns:96px 1fr;gap:0 14px;align-items:start;
  padding:14px 0;
}
.post-rc__th{display:block;overflow:hidden}
.post-rc__th img{width:100%;height:auto;display:block;transition:transform 3s ease-out}
.post-rc li a:hover .post-rc__th img{transform:scale(1.06)}
.post-rc__x{display:block;min-width:0}
.post-rc__t{
  display:block;font-size:12.5px;font-weight:700;line-height:1.65;color:var(--ink);
  transition:color .3s;
}
.post-rc li a:hover .post-rc__t{color:var(--brand)}
.post-rc__x time{
  display:block;margin:7px 0 0;font-family:var(--mono);font-size:10.5px;
  color:var(--ink-faint);letter-spacing:.06em;
}
.post-rc__more{
  display:table;margin:20px 0 0 auto;padding:9px 18px;
  border:1px solid var(--hairline-strong);font-size:12px;letter-spacing:.08em;
  color:var(--ink-soft);transition:background .3s,color .3s,border-color .3s;
}
.post-rc__more:hover{background:var(--ink);border-color:var(--ink);color:var(--ground)}

@media(max-width:1000px){
  .post-grid{grid-template-columns:1fr}
  .post-side{display:none}
}

/* ── 執筆者 ─────────────────────────────
   記事の頭に置く。誰が書いたかは読み進めるかの判断材料になる */
/* 幅は紹介文が2行で収まるところに合わせてある。狭めると3行に折り返す */
/* 執筆者は記事の最後。すぐ上のシェアが下向きの罫を持たないので、
   こちらは上の罫だけにする。両方が引くと線が二重に見える */
.post-au{margin:44px 0 0;padding:26px 0 0;
  border-top:1px solid var(--hairline);
  max-width:min(100%,45em)}
.post-au__t{
  font-family:var(--disp);font-size:14px;font-weight:700;letter-spacing:.2em;
  color:var(--brand);margin:0 0 20px;
}
/* 名前・肩書・紹介文は同じ列にまとめる。別のグリッド行に置くと、
   写真の高さぶんの隙間が肩書と紹介文の間に入ってしまう */
.post-au__b{display:grid;grid-template-columns:96px 1fr;gap:0 32px;align-items:start}
.post-au__b img{width:96px;height:96px;object-fit:cover}
.post-au__n{font-size:16px;font-weight:600;letter-spacing:.04em;margin:0 0 3px;line-height:1.5}
.post-au__n small{
  font-family:var(--disp);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  color:var(--ink-faint);margin-left:12px;
}
.post-au__r{font-size:13px;color:var(--ink-soft);margin:0 0 8px;letter-spacing:.04em;line-height:1.5}
.post-au__d{font-size:13px;line-height:1.8;color:var(--ink);margin:0}
@media(max-width:640px){
  .post-au__b{grid-template-columns:72px 1fr;gap:0 18px}
  .post-au__b img{width:72px;height:72px}
}

/* ── シェア ───────────────────────────── */
.post-share{margin:56px 0 0;padding:30px 0 8px;border-top:1px solid var(--hairline);
  display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.post-share__t{
  font-family:var(--disp);font-size:11.5px;font-weight:700;letter-spacing:.18em;
  color:var(--ink-soft);margin:0;
}
.post-share__i{display:flex;align-items:center;gap:10px}
.post-share__i a{
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--hairline-strong);transition:background .3s,border-color .3s;
}
.post-share__i svg{width:17px;height:17px;fill:var(--ink);transition:fill .3s}
.post-share__i a:hover{background:var(--ink);border-color:var(--ink)}
.post-share__i a:hover svg{fill:var(--ground)}
.post-share__copy{
  font-family:var(--body);font-size:12px;letter-spacing:.08em;color:var(--ink-soft);
  background:none;border:1px solid var(--hairline-strong);padding:0 16px;height:42px;
  cursor:pointer;transition:background .3s,color .3s,border-color .3s;
}
.post-share__copy:hover{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.post-share__copy.is-done{border-color:var(--brand);color:var(--brand)}

/* ── 前後の記事 ─────────────────────────
   meLev と同じく、両端に置いた濃色の実体ボタン */
.post-pg{
  margin:56px 0 0;padding:24px 0 0;border-top:1px solid var(--hairline-strong);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.post-pg__a{
  position:relative;display:block;min-width:140px;height:52px;line-height:52px;
  background:var(--panel);color:var(--panel-ink);
  font-size:14px;font-weight:700;letter-spacing:.08em;
  transition:background .35s var(--ease-soft);
}
.post-pg__a.-prev{padding:0 24px 0 48px}
.post-pg__a.-next{padding:0 48px 0 24px;text-align:right}
.post-pg__a::before{
  content:"";position:absolute;top:50%;width:8px;height:8px;
  border-top:2px solid var(--panel-ink);border-right:2px solid var(--panel-ink);
}
.post-pg__a.-prev::before{left:24px;transform:translateY(-50%) rotate(-135deg)}
.post-pg__a.-next::before{right:24px;transform:translateY(-50%) rotate(45deg)}
.post-pg__a:hover{background:var(--brand)}
@media(max-width:640px){
  .post-pg__a{min-width:118px;font-size:13px}
  .post-pg__a.-prev{padding:0 16px 0 40px}
  .post-pg__a.-next{padding:0 40px 0 16px}
  .post-pg__a.-prev::before{left:18px}
  .post-pg__a.-next::before{right:18px}
}

/* ── Read More ────────────────────────── */
.post-rm{margin:var(--rhythm) 0 0;padding:56px 0 0;border-top:1px solid var(--hairline-strong)}
.post-rm__t{margin:0 0 34px}
.post-rm__t b{
  display:block;font-family:var(--disp);font-size:clamp(24px,3vw,32px);font-weight:700;
  letter-spacing:.06em;color:var(--ink);
}
.post-rm__t span{display:block;font-size:13px;color:var(--ink-soft);letter-spacing:.1em;margin:8px 0 0}
.post-rm__g{display:grid;grid-template-columns:repeat(3,1fr);gap:38px 30px}
.post-rm__i .zoom{margin:0 0 16px}
.post-rm__i .ph{aspect-ratio:var(--ar,16/10);height:auto}
.post-rm__i .meta{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.post-rm__i time{font-family:var(--mono);font-size:11px;color:var(--ink-faint);letter-spacing:.06em}
.post-rm__i .cat{
  font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.14em;
  color:var(--brand);border:1px solid var(--brand);padding:3px 8px;
}
.post-rm__i h3{font-size:var(--fz-body);font-weight:600;line-height:1.8;margin:0;letter-spacing:.04em}

/* カードの下に一覧への入口を置く。3本しか出していないので、
   ここで行き止まりにしない（2026-08-24 指摘） */
/* 「すべての記事を見る」は CONTACT と同じ .btn を使う。
   ここだけ別の見た目のボタンを置くと、サイトの中でボタンが2種類になる */
.post-rm__all{margin:44px 0 0;display:flex;justify-content:center}
@media(max-width:900px){.post-rm__g{grid-template-columns:1fr;gap:34px}}
@media(max-width:700px){
  .post-rm__all{margin:34px 0 0}
}

/* ── 記事タイトル脇のタグ ───────────────
   meLev と同じ、角のない枠だけのラベル。分類は言葉で示すもので、
   色を増やす場所ではない */
.post-tags{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.post-tags span,.post-tags a{
  font-size:12.5px;letter-spacing:.06em;color:var(--ink);
  border:1px solid var(--ink);padding:6px 14px;line-height:1.5;
  display:inline-block;transition:background .3s,color .3s,border-color .3s;
}
/* タグは同じ話題の一覧への入口。押せることを反転で示す */
.post-tags a:hover{background:var(--ink);color:var(--panel-ink);}

/* ── タグの並び（一覧ページ・メニュー・タグページ）───── */
.tagchips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.tagchips a{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;letter-spacing:.06em;color:var(--ink);
  border:1px solid var(--hairline-strong);padding:8px 15px;line-height:1.5;
  transition:background .3s,color .3s,border-color .3s;
}
.tagchips a:hover{background:var(--ink);border-color:var(--ink);color:var(--panel-ink)}
.tagchips a.is-current{background:var(--brand);border-color:var(--brand);color:#fff}
.tagchips__n{
  font-family:var(--mono);font-size:11px;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.tagchips a:hover .tagchips__n,.tagchips a.is-current .tagchips__n{color:inherit;opacity:.75}
.post-meta{display:flex;align-items:center;gap:14px;margin:20px 0 0;flex-wrap:wrap}
.post-meta time{font-family:var(--mono);font-size:13px;color:var(--ink-faint);letter-spacing:.06em}

/* ── PCでの記事全体の位置と、サイドバーの上の余白 ── */
@media(min-width:1001px){
  /* 本文の塊をもう少し内側へ。左右で余白が違いすぎないところに置く */
  .post-page{padding-left:calc(var(--pad) + 5vw)}
  /* 上端で帯写真に近すぎたので、サイドバーだけ下げる */
  .post-side{padding-top:72px}
}


/* ════ 記事の中の表とカード ════════════════
   参照: SWELL系の記事レイアウト。項目名の列を左に立て、
   セルは枠で囲む。行が長くなっても、どこまでが1項目か分かる */
.post-body table.profile{font-size:inherit;line-height:2.0}
.post-body table.profile th,
.post-body table.profile td{
  border:1px solid var(--hairline-strong);padding:15px 17px;vertical-align:top;
  font-size:inherit;line-height:1.95;letter-spacing:.02em;
}
.post-body table.profile th{
  background:var(--shade);color:var(--ink);font-weight:700;text-align:left;
}
/* 項目名の列だけを、中身が入る最低限の幅まで縮める。
   見出し行の th にまで width を効かせると、2列で幅を取り合って
   項目名の列が半分まで広がってしまうので、行見出しだけに限定する。

   white-space:nowrap は使わない。列がいちばん長いラベルの幅まで広がるうえ、
   表が入りきらない幅になると width:1% が効いて、今度は1文字ぶんまで潰れる。
   日本語は1文字で折り返せてしまうので、潰れ方が極端になる。
   実際、iPadの縦（768px）と、右に目次が立つ1000〜1250pxの両方で起きていた。
   画面幅で切り分けても、目次の有無で本文の幅が変わるので取りこぼす。
   だから幅に関係なく、折り返しを許したうえで下限を7文字ぶん置く。 */
/* 比較表（.is-grid）は列の名前が並ぶ表なので、1列目も他の列と同じように
   内容に合わせて配分させる。ここで width:1% を効かせると、1列目だけ
   下限まで潰れて「1. 地図（MEO）」が3行に折り返していた */
.post-body table.profile:not(.is-grid) th[scope="row"],
.post-body table.profile:not(.is-grid) tr:first-child th:first-child{
  width:1%;white-space:normal;min-width:7em;word-break:normal;
}
/* 比較表の1列目は項目名が入る列。内容に合わせて配分させるが、下限は置く。
   下限が無いとブラウザが1列目を最小まで潰し、「4. 予約サイト（OTA）」が
   3行に折り返していた。nowrap は使わない（1列目にリンク名が入る表があり、
   その表だけ横スクロールが出てしまう） */
.post-body table.profile.is-grid td:first-child,
.post-body table.profile.is-grid th:first-child{min-width:10em}
/* 表の中の「無料／有料」。行数のある表では、料金の別が地の文と同じ黒だと
   読み取れない。例の箱で使っている良い／悪いの色をそのまま借りる */
.post-body table .tag-free{color:var(--eg-good);font-weight:700}
.post-body table .tag-paid{color:var(--eg-bad);font-weight:700}

/* 表のタイトル。表が何を並べたものかを、表の上に一行で出す */
.post-body .tbl-t{
  margin:0 0 10px;font-family:var(--disp);font-size:12.5px;font-weight:700;
  letter-spacing:.08em;color:var(--ink-soft);
}
/* 表のタイトルの直後に来る表は、段落ぶんの余白を詰める */
.post-body .tbl-t + .tbl,.post-body .tbl-t + .tblw{margin-top:0}

/* 表の中のリンクも本文と同じ見た目にする */
.post-body table.profile a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
/* URLのような区切りの無い長い文字列は、そのままだと折り返されず
   画面の右へ突き抜ける。本文・表・箇条書きのどこに出ても収まるようにする */
.post-body p,.post-body li,.post-body td,.post-body th,.post-body figcaption{
  overflow-wrap:anywhere;word-break:normal;
}
.post-body table.profile a:hover{color:var(--link-hover)}
/* 比較表（3列以上）も同じ調子で。見出し行だけ薄く敷いて区別する */
/* 比較表も本文と同じ大きさ（継承）。列幅は決め打ちせず、本文の幅に収まるよう
   自動で配分させる。入りきらない幅（スマホ等）でだけ横に送る */
.post-body table.profile.is-grid{font-size:inherit;line-height:1.9;min-width:0}
.post-body table.profile.is-grid th,
.post-body table.profile.is-grid td{padding:13px 14px;font-size:inherit;line-height:1.9}
@media(max-width:820px){
  .post-body table.profile.is-grid{min-width:700px}
}
.post-body table.profile.is-grid th{
  background:var(--shade);color:var(--ink);width:auto;white-space:normal;
  letter-spacing:.04em;
}
@media(max-width:640px){
  .post-body table.profile th{padding:11px}
  .post-body table.profile td{padding:11px}
}

/* あわせて読みたい — 本文の途中に置く内部リンクのカード。
   「あわせて読みたい」は枠線をまたぐ小さなラベルとして、左上に載せる */
.post-rl{
  position:relative;
  border:1px solid var(--hairline-strong);background:transparent;
  padding:22px 16px 16px;margin:38px 0;
  transition:box-shadow .3s,border-color .3s;
}
.post-rl:hover{box-shadow:0 4px 16px rgba(0,0,0,.06),0 12px 28px -12px rgba(0,0,0,.05);border-color:var(--brand)}
/* リンクになるのはカードの中身だけ。本文のリンクの下線は引き継がない */
.post-rl__a{
  display:flex;align-items:center;gap:0 18px;
  text-decoration:none;color:inherit;
}
.post-body .post-rl__a,
.post-body .post-rl__a:hover{text-decoration:none}
.post-rl__cap{
  position:absolute;top:-10px;left:16px;
  background:var(--ground);padding:0 7px;
  font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.14em;
  color:var(--brand);line-height:20px;
}
.post-rl__th{display:block;flex:none;width:172px;overflow:hidden;background:var(--shade)}
.post-rl__th img{width:100%;height:auto;display:block}
.post-rl__b{display:block;min-width:0}
.post-rl__t{display:block;font-size:14.5px;font-weight:700;line-height:1.7;color:var(--ink)}
.post-rl:hover .post-rl__t{color:var(--brand)}
.post-rl__x{
  display:-webkit-box;margin:8px 0 0;font-size:12.5px;line-height:1.8;color:var(--ink-soft);
  overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
@media(max-width:640px){
  .post-rl{padding:20px 13px 13px}
  .post-rl__a{gap:0 14px}
  .post-rl__th{width:104px}
  .post-rl__t{font-size:13.5px}
  .post-rl__x{display:none}
}

/* ════ SP BOTTOM BAR ════════════════════
   スマホだけ、画面の下に「オンライン無料相談」と「メニュー」を出す。
   参照: craco.co.jp。あちらはPCでは右端の縦タブ、スマホでは下の帯になる。
   ここはスマホのみ（PCはヘッダーのCONTACTボタンがあるので要らない）。

   画面の下に居座るので、footer の最後がバーの下に隠れないよう
   body の下に同じ高さの余白を足している。 */
.spbar{display:none}
@media(max-width:700px){
  .spbar{
    display:grid;grid-template-columns:1fr auto;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    height:calc(var(--spbar-h) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -1px 0 rgba(0,0,0,.06), 0 -8px 24px rgba(0,0,0,.06);
    transform:translateY(0);transition:transform .35s var(--ease-soft);
  }
  /* ドロワーが開いているあいだ、バーは完全に消す。
     transform で下げるだけだと、端末や描画の間合いによって
     残って見えることがあった（実機でメニューの下が隠れていた）。
     見えなくする・触れなくするところまでやる */
  body.nav-open .spbar{
    transform:translateY(110%);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .3s var(--ease-soft),opacity .2s,visibility .3s;
  }
  /* 開いているあいだは、バーのために空けていた余白も要らない */
  body.nav-open{padding-bottom:0}

  .spbar__cta,.spbar__menu{
    display:flex;align-items:center;justify-content:center;gap:9px;
    height:var(--spbar-h);border:0;margin:0;padding:0 14px;cursor:pointer;
    font-family:var(--body);font-size:14px;font-weight:700;letter-spacing:.04em;
    text-decoration:none;line-height:1.25;
  }
  .spbar__cta{background:var(--brand);color:#fff}
  .spbar__cta svg{
    width:22px;height:22px;flex:none;fill:none;stroke:currentColor;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  }
  .spbar__cta:active{background:var(--brand-deep)}

  /* 開いたときに出るドロワーと同じ紺（--panel）。押す前と押したあとで
     色が変わらないほうが、同じものだと分かる */
  .spbar__menu{background:var(--panel);color:var(--panel-ink);min-width:96px;flex-direction:column;gap:5px}
  .spbar__menu:active{background:#0f2438}
  .spbar__t{font-size:11px;letter-spacing:.12em}
  .spbar__ico{display:block;width:20px;height:13px;position:relative}
  .spbar__ico i{
    position:absolute;left:0;right:0;height:1.6px;background:currentColor;border-radius:2px;
    transition:transform .3s var(--ease-strong),opacity .2s;
  }
  .spbar__ico i:nth-child(1){top:0}
  .spbar__ico i:nth-child(2){top:50%;margin-top:-.8px}
  .spbar__ico i:nth-child(3){bottom:0}

  /* バーのぶんだけ、ページの下に余白を作る */
  body{padding-bottom:calc(var(--spbar-h) + env(safe-area-inset-bottom))}
  /* 上へ戻るボタンなど、下に置いているものはバーの上へ逃がす */
  .totop,.pagetop{bottom:calc(72px + env(safe-area-inset-bottom))}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
  .spbar{transition:none}
}

/* ── PCの右端に出す相談への導線 ──────────────────────────
   スマホは画面下の .spbar が同じ役目をするので、そちらとは排他にする。
   読んでいる邪魔になることがあるので、左上の × で消せる。消した状態は
   localStorage に覚えて、次に来たときも出さない。
   JSが動くまで出さない（hidden を外すのは site.js）ので、消したはずの
   ものが一瞬ちらつくことがない。 */
.sidecta{display:none}
@media(min-width:701px){
  .sidecta{
    display:flex;flex-direction:column;align-items:flex-end;gap:12px;
    position:fixed;right:0;top:50%;transform:translateY(-50%);
    z-index:55;
  }
  /* 枠は2つ。それぞれが自分の×と取っ手を持ち、別々に畳める（2026-08-24 指摘） */
  .sidecta__u{position:relative}
  .sidecta__a{
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:170px;min-height:88px;padding:14px 10px;
    background:var(--brand);color:#fff;text-decoration:none;
    border:3px solid #fff;border-right:0;border-radius:10px 0 0 10px;
    box-shadow:0 0 10px rgba(0,0,0,.2);
  }
  .sidecta__a:hover{background:var(--brand-deep);transform:translateX(-3px)}
  .sidecta__ico{
    flex:0 0 auto;width:28px;height:26px;fill:none;stroke:currentColor;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  }
  /* 日本語は「オンライン／無料相談」の2行で折り返させたいので幅で決める。
     字送りを付けているので、5文字ぶんは 5×1.15em = 5.75em になる */
  .sidecta__t{
    width:6.2em;font-size:16px;font-weight:700;line-height:1.4;
    letter-spacing:.15em;text-align:center;
  }
  html[lang="en"] .sidecta__t{width:auto;max-width:104px;letter-spacing:.02em;font-size:14px}

  /* × はその枠の左上に、少しはみ出させて置く */
  .sidecta__x{
    position:absolute;left:-11px;top:-11px;z-index:1;
    width:26px;height:26px;padding:0;border:2px solid #fff;border-radius:50%;
    background:var(--panel);color:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 1px 5px rgba(0,0,0,.25);
    transition:background .2s var(--ease-soft);
  }
  .sidecta__x:hover{background:#0f2438}
  .sidecta__x svg{
    width:12px;height:12px;fill:none;stroke:currentColor;
    stroke-width:2.4;stroke-linecap:round;
  }
  /* 畳んだ状態。本体だけ右へ滑らせて画面の外へ出し、取っ手を残す。
     消してしまうと二度と戻せないので、DOM からは外さない */
  .sidecta__a,.sidecta__x{
    transition:transform .38s var(--ease-strong),opacity .22s var(--ease-soft),
               background .2s var(--ease-soft);
  }
  .sidecta__u.is-min .sidecta__a{transform:translateX(105%)}
  .sidecta__u.is-min .sidecta__a:hover{transform:translateX(105%)}
  .sidecta__u.is-min .sidecta__x{opacity:0;pointer-events:none;transform:scale(.6)}

  /* 取っ手。畳んでいないあいだは本体の下に隠しておく */
  .sidecta__re{
    position:absolute;right:0;top:50%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    width:38px;min-height:76px;padding:10px 0;
    background:var(--brand);color:#fff;border:2px solid #fff;border-right:0;
    border-radius:8px 0 0 8px;box-shadow:0 0 10px rgba(0,0,0,.2);
    cursor:pointer;
    transform:translate(105%,-50%);opacity:0;pointer-events:none;
    transition:transform .38s var(--ease-strong),opacity .22s var(--ease-soft),
               background .2s var(--ease-soft);
  }
  .sidecta__u.is-min .sidecta__re{
    transform:translate(0,-50%);opacity:1;pointer-events:auto;
  }
  .sidecta__u.is-min .sidecta__re:hover{transform:translate(-3px,-50%)}
  .sidecta__re svg{
    width:14px;height:14px;fill:none;stroke:currentColor;
    stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  }
  .sidecta__ret{font-size:12px;font-weight:700;letter-spacing:.1em;
    writing-mode:vertical-rl;line-height:1}

  html[lang="en"] .sidecta__ret{display:none}
  html[lang="en"] .sidecta__re{min-height:52px}
  /* 読み込んだ時点で畳んでいる場合は、動かさずにその形で出す */
  .sidecta__u.no-anim .sidecta__a,
  .sidecta__u.no-anim .sidecta__x,
  .sidecta__u.no-anim .sidecta__re{transition:none}
}
@media(prefers-reduced-motion:reduce){
  .sidecta__a,.sidecta__x,.sidecta__re{transition:none}
}

/* ── 手順の画像を原寸で開く ──────────────────────────────
   手順に入れているのは操作画面の写しで、赤枠で囲んだ場所が本文の幅では
   読めない。左上に＋を出し、押したら画面いっぱいに開く（2026-08-23 指摘） */
.post-body .post-fig.is-step > .zoom{position:relative}
.post-fig__zoom{
  position:absolute;top:10px;left:10px;z-index:2;
  width:34px;height:34px;padding:0;border:0;border-radius:50%;
  background:rgba(37,37,37,.72);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  transition:background .18s ease,transform .18s ease;
}
.post-fig__zoom svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round}
.post-fig__zoom:hover{background:var(--brand);transform:scale(1.06)}
.post-fig__zoom:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.lbox{
  position:fixed;inset:0;z-index:120;display:flex;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(20,20,20,.88);
  opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;
}
.lbox.is-open{opacity:1;visibility:visible}
.lbox__img{
  max-width:min(1200px,100%);max-height:100%;
  object-fit:contain;border-radius:4px;background:#fff;
  transform:scale(.97);transition:transform .2s ease;
}
.lbox.is-open .lbox__img{transform:scale(1)}
.lbox__x{
  position:absolute;top:16px;right:16px;width:44px;height:44px;padding:0;
  border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.lbox__x svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round}
.lbox__x:hover{background:rgba(255,255,255,.26)}
.lbox__cap{
  position:absolute;left:0;right:0;bottom:0;margin:0;padding:14px 24px;
  color:rgba(255,255,255,.86);font-size:13px;line-height:1.7;text-align:center;
}
@media(max-width:700px){
  .post-fig__zoom{top:8px;left:8px;width:30px;height:30px}
  .post-fig__zoom svg{width:16px;height:16px}
  .lbox{padding:12px}
  .lbox__x{top:8px;right:8px;width:38px;height:38px}
}
@media(prefers-reduced-motion:reduce){
  .post-fig__zoom,.lbox,.lbox__img{transition:none}
}

/* スマホの画面を写した縦長の画像。本文の幅いっぱいに出すと1枚で画面が
   2つぶん埋まり、読み進められない。幅を絞って中央に置く（2026-08-23） */
.post-body .post-fig.is-portrait{max-width:320px;margin-left:auto;margin-right:auto}
/* 本文の画像は 16:9 に切り抜いている。縦長は切らずに全部見せる */
.post-body .post-fig.is-portrait .zoom{aspect-ratio:auto}
.post-body .post-fig.is-portrait img{height:auto;object-fit:contain}
.post-body .post-step__grp > .post-fig.is-portrait{margin-left:44px}
@media(max-width:640px){
  .post-body .post-fig.is-portrait{max-width:230px}
  .post-body .post-step__grp > .post-fig.is-portrait{margin-left:37px}
}

/* タグのページの前置き。そのタグが何の話かを1段落で示す（2026-08-24） */
.tag-lead{
  margin:22px 0 0;max-width:min(100%,56ch);
  font-size:var(--fz-lead);line-height:1.95;color:var(--ink);
}
@media(max-width:700px){.tag-lead{font-size:var(--fz-body)}}