/*
Theme Name: arianode
Theme URI: https://arianode.jp/
Author: arianode
Author URI: https://arianode.jp/
Description: AI と WEBサイトの融合をテーマにした arianode 公式サイトのテーマ。日英2言語（Polylang）対応。
Version: 0.55.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arianode
*/

/* ===== 欧文見出し用フォント =====
   Jost（SIL OFL / 可変フォント）。Futura 系の骨格で、ロゴの円い字形と揃う。
   unicode-range をラテンに限っているので、和文は下の font-family に落ちる。
   ライセンス全文は assets/fonts/Jost-OFL.txt。 */
@font-face{
  font-family:'Jost';
  font-style:normal;
  font-weight:200 400;          /* 可変。この範囲で任意の太さを取れる */
  font-display:swap;
  src:url('assets/fonts/jost-latin-var.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== デザイントークン =====
   ブランドカラーは docs/01-brand.md を参照。ロゴSVGは currentColor なので
   親の color を変えるだけで追従する。 */
:root{
  /* ブランドガイドライン（2026-09-05）のカラーパレット。
     コーポレートカラーはガイドライン記載値を正とする（2026-09-06 再決定）。 */
  --brand: #3D4E64;        /* Deep Blue-Gray（コーポレートカラー） */
  --brand-mid: #8BA5A7;    /* Mos Green Gray（中間色）※コントラスト 2.6:1。本文には使わない */
  --ink: #333333;          /* Typo Black（一般テキスト） */
  --ink-muted: #5B6672;    /* Ink Muted（サブタイトル） */
  --paper: #ffffff;
  --paper-tint: #ECF3FA;   /* Slight Blue（背景）。ヒーローの地の色でもある */
  --paper-gray: #E9E9E9;   /* Slight Gray（背景） */
  --line: #E9E9E9;         /* 罫線は Slight Gray から */
  --measure: 68ch;
  --header-h: 64px;
  /* 本文用。和文は Noto Sans JP を正とする（ブランドガイドライン） */
  --font-body: "Helvetica Neue",Helvetica,Arial,"Hiragino Sans","Noto Sans JP",sans-serif;
  /* 見出しの欧文だけ Jost。ラテン以外はそのまま本文用に落ちる */
  --font-display: 'Jost', var(--font-body);
  /* 管理バーの高さ。ログインしていなければ 0。
     --admin-bar-doc … 文書を押し下げている量（ヒーローの高さ計算に使う）
     --admin-bar-h   … 今この瞬間に画面上に残っている量（固定ヘッダーの位置に使う）
     JS が実測して body に上書きする。以下はその前／JS が動かない場合の既定値。 */
  --admin-bar-doc: 0px;
  --admin-bar-h: 0px;
  /* ヒーローのスクロールの舞台の高さ。hero.css と目印の長さの両方が参照する。 */
  --hero-stage: 195vh;
  --gap: clamp(16px, 3vw, 32px);
  --shell: min(1180px, 100% - var(--gap) * 2);
  /* ヘッダーは本文の段組みに揃えず、画面の端まで使う。
     幅広のブラウザで中央に寄って見えるのを避けるため。 */
  --header-pad: clamp(16px, 3vw, 48px);
}

/* ログイン中は WordPress が body.admin-bar を付ける。
   783px 未満で管理バーは 46px かつ position:absolute（スクロールで消える）。 */
body.admin-bar{--admin-bar-doc:32px;--admin-bar-h:32px}
@media screen and (max-width:782px){
  body.admin-bar{--admin-bar-doc:46px;--admin-bar-h:46px}
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto}
a{color:inherit}

/* キーボード操作時のフォーカスは必ず見せる */
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

.shell{width:var(--shell);margin-inline:auto}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ===== ヘッダー / フッター =====
   ヒーローのあるページでは、ヘッダーは画像の上に透過で重なる。
   スクロールして初めて白い地が出る（.is-stuck を JS が付ける）。 */
.site-header{
  position:fixed;top:var(--admin-bar-h);left:0;right:0;z-index:20;
  color:var(--brand);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
.site-header__inner{display:flex;align-items:center;gap:var(--gap);min-height:var(--header-h);padding-inline:var(--header-pad)}

/* 白い地が出た状態 */
.site-header.is-stuck,
body:not(.has-hero) .site-header{
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom-color:var(--line);
}

/* 透過状態は difference で合成する。ヒーローのコピーと同じ扱いにすることで、
   背景が明るくても暗くてもロゴが自動で反転して読める。
   ただしこれは currentColor が効くインライン SVG のときだけ。
   カスタマイザーで PNG/JPG のロゴが設定された場合は、色が壊れるので合成しない。 */
body.has-hero.logo-inline .site-header:not(.is-stuck){
  mix-blend-mode:difference;
  color:#fff;
}

/* ヒーローが無いページは、固定ヘッダーの分だけ本文を下げる */
body:not(.has-hero){padding-top:var(--header-h)}

/* スクロール量の検知に使うだけの目印。見た目には何も出さない。
   この目印がビューポートから抜けた瞬間に、ヘッダーへ白い地が出る。 */
#header-sentinel{position:absolute;top:0;left:0;width:1px;height:var(--header-h);pointer-events:none}

/* トップページだけは白くするのを遅らせる。
   ロゴが描き終わり、ヒーローが画面から動き出す直前まで透過のままにしたい。
   舞台のスクロール距離の 90% を目印の長さにすることで、そのタイミングで切り替わる。 */
body.has-hero #header-sentinel{
  height:calc((var(--hero-stage) - (100dvh - var(--admin-bar-doc, 0px))) * 0.9);
}

.site-logo{display:flex;align-items:center;color:inherit;text-decoration:none}
/* ロゴは高さで指定する（縦横比は固定なので、高さを変えれば幅も同じ比率で変わる）。
   26px → 32.5px で幅 1.25 倍。 */
/* 新しいロゴは viewBox の下に 33% の余白がある（右の業種表記と目線を揃えるため）。
   高さで指定すると余白ぶん字が縮むので、幅で指定する。
   125px は、余白が無かった頃の描画幅（124.6px）に合わせた値。 */
.site-logo svg,.site-logo img{width:125px;height:auto;max-width:none;display:block}
/* 社名の隣に業種を添える。新設で認知が無いぶん、常時見せておく。 */
.site-descriptor{
  margin:0;padding-left:.9em;
  border-left:1px solid currentColor;
  font-size:11px;line-height:1.4;letter-spacing:.16em;
  color:inherit;opacity:.72;
  white-space:nowrap;
}
/* 狭い画面でも消さない。第一画面で業種が分からないのが元々の問題だったため。
   実測で 375px でも収まる（余り 32px）。320px は ロゴも一段小さくして通す。 */
@media (max-width:560px){
  .site-descriptor{font-size:10px;letter-spacing:.08em;padding-left:.7em}
}
@media (max-width:360px){
  .site-logo svg,.site-logo img{width:100px}
  .site-descriptor{font-size:9.5px;letter-spacing:.04em;padding-left:.6em}
}

/* ナビは余白を吸って右端側へ寄せ、言語切替をその右に置く。
   auto マージンを言語切替ではなくナビに持たせているのは、
   ディスクリプタが空（カスタマイザーで消すと出力ごと無くなる）でも、
   Polylang が無くて言語切替が出なくても、並びが変わらないようにするため。 */
.site-nav{margin-inline-start:auto}
.site-nav ul{display:flex;gap:clamp(12px,2vw,28px);list-style:none;margin:0;padding:0}
.site-nav a{
  display:block;text-align:center;
  text-decoration:none;font-size:14px;line-height:1.25;letter-spacing:.04em;color:inherit;
}
.site-nav a:hover{opacity:.7}

/* メニュー項目の副題。文言は 外観 → メニュー → 各項目の「説明」。
   色は currentColor に不透明度で落とす。固定色にすると、
   ヒーローの上で difference 合成をしているときに壊れる。 */
/* 業種表記（11px / 不透明度 .72）と大きさが近いと、
   「会社の説明」と「ナビ」のどちらなのか視線が迷う。
   一段落として、副題であることをはっきりさせる。 */
.menu-sub{
  display:block;
  font-family:var(--font-body);
  font-size:9px;letter-spacing:.08em;line-height:1.5;
  margin-top:.5em;opacity:.5;
}
.header-lang{font-size:13px;white-space:nowrap}
.header-lang ul{display:flex;gap:12px;list-style:none;margin:0;padding:0}
.header-lang a{text-decoration:none;color:inherit}

/* 狭い画面では ロゴ＋業種＋ナビ＋言語切替 が1行に収まらない（実測 688px で限界）。
   ナビを自然に折り返させ、言語切替をその右に続けさせる。
   ＝ 1段目 ロゴ＋業種 / 2段目 ナビ｜言語切替 の2段になる。
   auto マージンは折り返した行ごとに効くので、2段目もそのまま右寄せになる。
   項目が4つなので2段で足りる。ハンバーガーは持たせない。 */
/* ハンバーガーを入れたので、ヘッダーは狭い画面でも1行で収まる（2026-09-09）。
   以前はナビを2段に折り返していたが、その必要が無くなった。 */

/* ===== フッター ─ 五線譜 =====
   コーポレートカラーを全幅の地に使う唯一の場所（docs/01-brand.md）。
   リンクは線の上の音符。左から右へ上がり、いちばん高い右端が Contact。

   ト音記号は --shell から左へ食み出す。渦の中心が下から2本目の線に乗るよう
   実測で合わせてある（ズレ 0px）。位置を変えるときは必ず測り直すこと。 */

.site-footer{
  --stave-gap:34px;
  position:relative;overflow:hidden;
  margin-top:0;
  background:var(--brand);color:#fff;
  padding-block:clamp(56px,8vw,92px) clamp(28px,4vw,40px);
  border-top:0;font-size:inherit;
}
.site-footer__inner{position:relative;z-index:1}

/* 背景の水面。canvas は前景の後ろに敷くだけで、五線にも音符にも触らない。
   描画は assets/js/footer-ripple.js。WebGL が無い／動きを減らす設定なら
   何も描かれず、地のベタ塗りがそのまま残る。 */
.site-footer__bg{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;pointer-events:none;z-index:0;
}

/* 上段 */
.site-footer__top{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--gap);margin-bottom:clamp(34px,5vw,54px);
}
.site-footer__logo{display:block;width:170px;color:#fff}
.site-footer__logo svg,
.site-footer__logo img{width:100%;height:auto;display:block}
.site-footer__say{
  max-width:22em;margin:0;text-align:right;
  font-size:12.5px;line-height:2;color:rgba(255,255,255,.62);
}

/* 譜面 */
.site-footer__score{
  position:relative;
  height:calc(var(--stave-gap)*4);
  margin-block:clamp(26px,4vw,40px) clamp(46px,6vw,68px);
}
.site-footer__stave{position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);top:0;height:calc(var(--stave-gap)*4);pointer-events:none}
.site-footer__stave i{position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.26)}
.site-footer__stave i:nth-child(1){top:0}
.site-footer__stave i:nth-child(2){top:var(--stave-gap)}
.site-footer__stave i:nth-child(3){top:calc(var(--stave-gap)*2)}
.site-footer__stave i:nth-child(4){top:calc(var(--stave-gap)*3)}
.site-footer__stave i:nth-child(5){top:calc(var(--stave-gap)*4)}

/* ト音記号。渦の中心＝下から2本目の線。+6px は実測で詰めた値。 */
.site-footer__clef{
  position:absolute;left:-72px;
  top:calc(var(--stave-gap)*-1.35 + 6px);
  height:calc(var(--stave-gap)*4 + var(--stave-gap)*2.6);
  color:rgba(255,255,255,.30);pointer-events:none;
}
.site-footer__clef svg{height:100%;width:auto;display:block}
@media (max-width:1100px){ .site-footer__clef{left:-64px} }

/* 音符 */
.site-footer__note{
  position:absolute;transform:translateY(-50%);
  left:var(--x);top:calc(var(--stave-gap) * var(--y));
  display:inline-flex;flex-direction:column;gap:.45em;
  text-decoration:none;color:#fff;
}
.site-footer__note::before{
  content:"";position:absolute;left:-19px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;
  background:var(--brand);box-shadow:inset 0 0 0 1px rgba(255,255,255,.75);
  transition:background-color .3s ease, box-shadow .3s ease;
}
.site-footer__note:hover::before{background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.14)}
.site-footer__en{
  font-family:var(--font-display);
  font-size:clamp(17px,2.1vw,23px);font-weight:300;letter-spacing:.07em;line-height:1;
}
.site-footer__ja{font-size:10px;letter-spacing:.1em;line-height:1;color:rgba(255,255,255,.55)}

/* 下段 */
.site-footer__foot{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:1.2em var(--gap);padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
}
.site-footer__meta{margin:0;font-size:11px;letter-spacing:.04em;line-height:1.9;color:rgba(255,255,255,.5)}
.site-footer__meta b{font-weight:400;color:rgba(255,255,255,.72)}
.site-footer__en-name{color:rgba(255,255,255,.4)}
.site-footer__lang ul{display:flex;gap:1.1em;list-style:none;margin:0;padding:0}
.site-footer__lang{margin:0;font-size:11px;letter-spacing:.06em}
.site-footer__lang a{color:rgba(255,255,255,.5);text-decoration:none}
.site-footer__lang .current-lang a{color:#fff}

/* SP は五線とト音記号を畳み、音符の玉だけ残して縦に積む */
@media (max-width:760px){
  .site-footer{--stave-gap:30px}
  .site-footer__top{flex-direction:column;align-items:flex-start;gap:20px}
  .site-footer__say{text-align:left}
  .site-footer__stave,
  .site-footer__clef{display:none}
  .site-footer__score{position:static;height:auto;display:block}
  .site-footer__note{
    position:relative;left:auto;top:auto;transform:none;
    flex-direction:row;align-items:baseline;gap:.8em;
    padding:1.05em 0 1.05em 19px;border-bottom:1px solid rgba(255,255,255,.14);
  }
  .site-footer__note::before{left:0;top:50%}
  .site-footer__foot{flex-direction:column;align-items:flex-start;gap:.9em}
}

@media (prefers-reduced-motion: reduce){
  .site-footer__note::before{transition:none}
}


/* ===== SP のメニュー =====
   ドロワーで横から出さず、**全画面で覆う**。
   ロゴ・業種表記・ボタンだけが覆いの上に残るので、
   「どこにいたか」が消えない。

   メニューは DOM に1つだけ。デスクトップでは .site-menu が display:contents になり、
   中の nav と言語切替がこれまで通りヘッダーの1行に並ぶ。 */

.site-menu{display:contents}

.nav-toggle{
  display:none;
  width:44px;height:44px;   /* 触れる大きさを確保する */
  margin-inline-start:auto;
  padding:0;border:0;background:none;color:inherit;cursor:pointer;
  position:relative;z-index:2;
}
.nav-toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* 1px の線2本。サイト全体が細い罫でできているので、ボタンもそれに合わせる。 */
.nav-toggle__bars{
  position:relative;display:block;
  width:22px;height:1px;margin-inline:auto;
  background:currentColor;
  transition:background-color .25s ease;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  content:"";position:absolute;left:0;
  width:22px;height:1px;background:currentColor;
  transition:transform .45s cubic-bezier(.22,.9,.3,1);
}
.nav-toggle__bars::before{top:-6px}
.nav-toggle__bars::after{top:6px}

/* 開いたら真ん中の線を消して、上下を × に組む */
body.is-menu-open .nav-toggle__bars{background:transparent}
body.is-menu-open .nav-toggle__bars::before{transform:translateY(6px) rotate(45deg)}
body.is-menu-open .nav-toggle__bars::after{transform:translateY(-6px) rotate(-45deg)}

/* 開いている間は背面を止める。overflow:hidden だけだと iOS で背面が動く。 */
body.is-menu-open{position:fixed;left:0;right:0;width:100%}

@media (max-width:760px){
  .nav-toggle{display:grid;place-items:center}

  /* ロゴと業種表記は覆いの上に残す */
  .site-logo,
  .site-descriptor{position:relative;z-index:2}

  /* メニューが開いている間、ヘッダーは地を持たない。
     ヒーローのある頁では difference 合成をしているので、それも止める。 */
  body.is-menu-open .site-header,
  body.is-menu-open.has-hero.logo-inline .site-header:not(.is-stuck){
    background:transparent;border-bottom-color:transparent;
    mix-blend-mode:normal;color:#fff;backdrop-filter:none;
  }

  .site-menu{
    display:flex;flex-direction:column;justify-content:center;
    position:fixed;inset:0;z-index:1;
    padding:calc(var(--admin-bar-h) + var(--header-h) + 24px) var(--header-pad) 40px;
    /* 完全に塗り潰さない。背面がうっすら残るほうが、どこにいたかが分かる。 */
    background:color-mix(in srgb, var(--brand) 95%, transparent);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    color:#fff;
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;
    /* visibility に長さを持たせると、**開くときも終わりまで hidden のまま**になり、
       その間フォーカスを移せない。長さは 0 にして、遅延で切り替える。
       閉じるときだけ、消え終わってから hidden にする。 */
    transition:opacity .45s ease, visibility 0s linear .45s;
  }
  body.is-menu-open .site-menu{
    opacity:1;visibility:visible;
    transition:opacity .45s ease, visibility 0s linear 0s;
  }

  .site-menu .site-nav{margin-inline-start:0}
  .site-menu .site-nav ul{flex-direction:column;gap:0;align-items:stretch}
  .site-menu .site-nav li{border-top:1px solid rgba(255,255,255,.16)}
  .site-menu .site-nav li:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
  .site-menu .site-nav a{
    display:block;text-align:left;padding:.95em 0;
    font-family:var(--font-display);
    font-size:clamp(21px,6.4vw,30px);font-weight:300;line-height:1.4;
    letter-spacing:.08em;color:#fff;
  }
  .site-menu .site-nav a:hover{opacity:1}

  /* 副題は SP では少し大きく、左寄せ（基本の指定は .menu-sub 側） */
  .site-menu .menu-sub{font-size:12px;margin-top:.55em;letter-spacing:.06em}

  .site-menu .header-lang{margin-top:2.4em;font-size:13px}
  .site-menu .header-lang ul{gap:1.6em}
  .site-menu .header-lang a{color:rgba(255,255,255,.7)}

  /* 順に現れる。線と項目が下から起き上がる。 */
  .site-menu .site-nav li,
  .site-menu .header-lang{
    opacity:0;transform:translateY(14px);
    transition:opacity .55s ease, transform .55s cubic-bezier(.22,.9,.3,1);
  }
  body.is-menu-open .site-menu .site-nav li,
  body.is-menu-open .site-menu .header-lang{opacity:1;transform:none}
  body.is-menu-open .site-menu .site-nav li:nth-child(1){transition-delay:.12s}
  body.is-menu-open .site-menu .site-nav li:nth-child(2){transition-delay:.19s}
  body.is-menu-open .site-menu .site-nav li:nth-child(3){transition-delay:.26s}
  body.is-menu-open .site-menu .site-nav li:nth-child(4){transition-delay:.33s}
  body.is-menu-open .site-menu .site-nav li:nth-child(5){transition-delay:.40s}
  body.is-menu-open .site-menu .header-lang{transition-delay:.47s}
}

@media (prefers-reduced-motion: reduce){
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after,
  .site-menu,
  .site-menu .site-nav li,
  .site-menu .header-lang{transition:none}
}

/* ===== 本文 ===== */
.page-main{padding-block:clamp(40px,7vw,88px)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:400}
.entry-title{font-size:clamp(28px,4.5vw,44px);line-height:1.3;letter-spacing:.01em;margin:0 0 .6em}
.entry-content{max-width:var(--measure)}
/* 段落間は変数ごしに受ける。**既定値は現行のまま**で、読み物（.tpc）だけが差し替える。
   .tpc .entry-content のような specificity の高い上書きにすると、
   h2 / h3 / hr が持っている個別の margin まで巻き込んで壊す。 */
.entry-content > * + *{margin-block-start:var(--content-flow, 1.2em)}

/* ===== 「つながる」セクション =====
   散らばった技術の語が中心へ集まり、一文に収束する。
   JS は進捗（--p）と語ごとの進捗（--wp）を配るだけで、動きはここで作る。 */

.converge{
  /* スクロールの舞台。LEAD で前倒しした分だけ伸ばしておかないと、
     散らばりが画面に入る前に消化されてしまう。 */
  height:275vh;
  background:var(--paper);
  --p:0;   /* 収束の進捗 0→1 */
  --q:0;   /* 収束しきったあとの進捗 0→1。光が放たれる区間 */
  /* 画像の中で光っているアクセントの実測色 */
  --spark:#85CDD8;
  --spark-deep:#6DB3C1;
  /* 散らばりの倍率。--x / --y は vw / vh で入っているが、
     狭い画面では字幅に対して広がりすぎて語が見切れるので縮める。 */
  --scatter-x:1;
  --scatter-y:1;
}
@media (max-width:820px){ .converge{ --scatter-x:.82; --scatter-y:.96 } }
@media (max-width:560px){ .converge{ --scatter-x:.68; --scatter-y:.92 } }

.converge__pin{
  position:sticky;
  top:var(--admin-bar-h, 0px);
  height:calc(100dvh - var(--admin-bar-doc, 0px));
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:clamp(20px, 3.5vh, 48px);
  overflow:hidden;
}

/* ===== 二つの手が触れ合う画像 =====
   語が集まりきるのに少し先行して現れ、収束の受け皿になる。
   横長（2.63:1）なので、幅だけでなく高さでも上限をかけておく。 */
.converge__visual{
  position:relative;z-index:2;margin:0;
  width:min(1020px, 86vw, 104vh);
  opacity:clamp(0, calc((var(--p) - 0.40) / 0.30), 1);
  transform:scale(calc(1.05 - 0.05 * clamp(0, calc((var(--p) - 0.40) / 0.30), 1)));
  /* 光が放たれるあいだ、ごくわずかに明るくする */
  filter:brightness(calc(1 + 0.06 * var(--q))) saturate(calc(1 + 0.12 * var(--q)));
}
.converge__visual img{display:block;width:100%;height:auto}

/* 語と中心を結ぶ線。arianode の node ＝ 節点と辺のイメージ。
   線そのものは JS が引く（語が動くので座標が毎フレーム変わるため）。 */
.converge__web{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;
}
.converge__web line{
  stroke:var(--brand);
  stroke-width:.6;
  /* 線は主役ではないので、うっすらとしか出さない */
  vector-effect:non-scaling-stroke;
}

/* ===== 指先から放たれる光 =====
   収束が終わってから（--q）現れる。位置は接点（--focus-dx/dy）。 */
.converge__spark{
  position:absolute;left:50%;top:50%;
  width:min(52vmin, 460px);aspect-ratio:1;
  z-index:3;pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle closest-side,
    rgba(255,255,255,.95) 0%,
    color-mix(in srgb, var(--spark) 85%, #fff) 18%,
    color-mix(in srgb, var(--spark) 60%, transparent) 42%,
    transparent 72%);
  transform:
    translate(calc(-50% + var(--focus-dx, 0px)), calc(-50% + var(--focus-dy, 0px)))
    scale(calc(0.18 + 2.2 * var(--q)));
  /* 立ち上がりは速く、その後はゆるく減衰させて余韻を残す */
  opacity:calc(clamp(0, calc(var(--q) / 0.14), 1) * (1 - 0.55 * var(--q)));
  will-change:transform, opacity;
}

/* 放射する線。SVG 側に JS が引く。 */
.converge__web .ray{
  stroke:var(--spark-deep);
  stroke-width:1;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}

/* ===== 散らばる語 ===== */
.converge__words{
  position:absolute;inset:0;margin:0;padding:0;list-style:none;
  display:grid;place-items:center;   /* すべて中心に置いて、そこからずらす */
}

.converge__word{
  position:absolute;z-index:2;
  white-space:nowrap;
  font-family:var(--font-display);
  font-weight:300;
  /* 旧 clamp(13px,1.5vw,20px) から約30%増 */
  font-size:clamp(17px, 1.95vw, 26px);
  letter-spacing:.08em;
  color:var(--ink-muted);
  /* --x/--y は散らばり位置、--wp は 0（散らばり）→1（中心）。
     1 に近づくほど中心へ寄り、縮み、消える。 */
  /* 散らばり位置から、指が触れ合う点（--focus-dx/dy）へ向かう。
     JS が画像の実寸から接点を割り出して渡す。 */
  transform:
    translate(
      calc(var(--x) * var(--scatter-x, 1) * (1 - var(--wp, 0)) + var(--focus-dx, 0px) * var(--wp, 0)),
      calc(var(--y) * var(--scatter-y, 1) * (1 - var(--wp, 0)) + var(--focus-dy, 0px) * var(--wp, 0))
    )
    rotate(calc(var(--r) * (1 - var(--wp, 0))))
    scale(calc(var(--s, 1) * (1 - 0.45 * var(--wp, 0))));
  /* 中心に着く手前から消え始める。集まって「溶けて」いくように見せる。 */
  opacity:clamp(0, calc((1 - var(--wp, 0)) / 0.35), 1);
  will-change:transform, opacity;
}

/* 4語に1つは濃く出して、平板にならないようにする */
.converge__word.is-key{ color:var(--brand); font-weight:400; }

/* ===== 収束したあとに立ち上がる一文 ===== */
.converge__line{
  position:relative;z-index:4;
  text-align:center;padding-inline:var(--gap);
  /* 画像に少し遅れて現れる */
  opacity:clamp(0, calc((var(--p) - 0.58) / 0.32), 1);
  transform:translateY(calc(10px * (1 - clamp(0, calc((var(--p) - 0.58) / 0.32), 1))));
}

.converge__en{
  font-family:var(--font-display);
  font-size:clamp(26px,4.6vw,52px);font-weight:300;line-height:1.35;
  letter-spacing:.06em;color:var(--brand);margin:0 0 .5em;
}
.converge__ja{
  font-size:clamp(14px,1.9vw,19px);color:var(--ink-muted);margin:0;
  letter-spacing:.12em;
}
.converge__body{
  /* PC では3〜4行に収まる行長。狭い画面では親幅で頭打ちになる。 */
  max-width:min(68ch, 100%);margin:2.2em auto 0;
  font-size:clamp(13px,1.5vw,15px);line-height:2.1;
  color:var(--ink-muted);text-align:left;
  letter-spacing:.02em;
}

@media (prefers-reduced-motion: reduce){
  .converge{height:auto}
  .converge__pin{position:static;height:auto;padding-block:clamp(72px,14vh,160px)}
  .converge__visual{opacity:1;transform:none;filter:none}
  .converge__spark{display:none}
  .converge__words{position:static;display:flex;flex-wrap:wrap;gap:.6em 1.4em;justify-content:center;margin-bottom:2.5em}
  .converge__word{position:static;transform:none;opacity:.75}
  .converge__line{opacity:1;transform:none}
}

/* ===== 「AIを挟む」だけで終わらせない。 =====
   ヒーロー・収束と白が続いたあとに、コーポレートカラーの全幅で沈める。

   カードを横に並べるのはやめた。枠で囲うと途端にテンプレートに見える。
   代わりに縦へ1本線を通し、各項目をその上の「節点」として置く。
   arianode ＝ node。収束セクションで使った線と節点の語彙を、そのまま引き継ぐ。 */

/* 面の色は Slight Blue。コーポレートカラーを全幅の地に使うと、
   ページの途中でもフッターに見えてしまい、白い部分だけが本文に見える
   （ユーザー指摘・2026-09-09）。#3D4E64 はフッター専用に空けておく。 */
.approach{
  background:var(--paper-tint);
  color:var(--ink);
  padding-block:clamp(96px, 16vh, 190px);
  overflow:hidden;
  --accent:var(--brand);
  --spine:88px;   /* 背骨から本文までの距離 */
}

.approach__head{max-width:34em;margin:0 0 clamp(56px, 9vh, 110px)}
.approach__title{
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(27px, 4.4vw, 52px);font-weight:300;line-height:1.42;
  letter-spacing:.02em;margin:0 0 .9em;color:var(--ink);
}
/* 見出しの直下。主張を一行で言い換えた副題。 */
.approach__sub{
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(15px, 1.9vw, 21px);font-weight:300;line-height:1.75;
  letter-spacing:.02em;margin:-.3em 0 1.9em;
  color:var(--brand);
}

/* 専門知識のない読者に向けた説明。1段落だった頃より長いので、
   段落で切って読ませる。色も少し明るくして本文として読める濃さにする。 */
.approach__lead{margin:0}
.approach__lead p{
  font-size:clamp(14px, 1.6vw, 16px);line-height:2.05;margin:0;
  color:var(--ink);
}
.approach__lead p + p{margin-top:1.5em}

/* ===== 証拠：同じ質問に、返る答えを並べる =====
   ここが以前は抜けていた。主張と手段しか無かったので、読者が検証できなかった。

   枠で囲わない。カードにすると途端にテンプレートに見える（背骨と同じ判断）。
   代わりに左の罫だけで二つを分け、明度で強弱をつける。 */

.proofs{
  margin:0 0 clamp(72px, 11vh, 130px);
  display:grid;gap:clamp(56px, 8vh, 96px);
}

.proof__q{
  word-break:auto-phrase;
  position:relative;
  max-width:26em;margin:0 0 clamp(26px, 3.6vh, 40px);
  padding-left:1.1em;
  font-family:var(--font-display);
  font-size:clamp(19px, 2.6vw, 30px);font-weight:300;line-height:1.62;
  letter-spacing:.01em;color:var(--ink);
}
/* 引用符は文字として置かず、記号を絶対配置にして本文の行頭を揃える。
   フォントはここだけセリフにする。Jost の U+201C は二本の斜線に見え、
   記号として読めない（実機で確認・2026-09-08）。 */
.proof__q::before{
  content:"\201C";position:absolute;left:-.1em;top:-.16em;
  font-family:Georgia, "Times New Roman", serif;
  font-size:2.2em;line-height:1;color:var(--brand);opacity:.35;
}

.proof__pair{
  display:grid;gap:clamp(22px, 3vh, 34px);
  grid-template-columns:1fr;
}
@media (min-width:820px){
  .proof__pair{grid-template-columns:1fr 1fr;gap:clamp(28px, 3vw, 56px)}
}

.proof__a{
  padding-left:clamp(14px, 1.4vw, 20px);
  border-left:1px solid var(--line);
}
.proof__a p{
  margin:0;max-width:26em;
  font-size:clamp(13px, 1.45vw, 15px);line-height:2.05;
  color:var(--ink-muted);
}
.proof__label{
  display:block;margin-bottom:.95em;
  font-size:11px;letter-spacing:.2em;
  color:var(--ink-muted);
}

/* 差がつくのはこちら側。罫と文字を差し色で立てる。 */
.proof__a.is-live{border-left-color:var(--brand)}
.proof__a.is-live p{color:var(--ink)}
.proof__a.is-live .proof__label{color:var(--brand);opacity:1}

.proof__note{max-width:38em;margin:clamp(24px, 3.4vh, 38px) 0 0}
.proof__note p{
  margin:0;
  font-size:clamp(13px, 1.4vw, 14.5px);line-height:2.05;
  color:var(--ink-muted);
}
.proof__note p + p{margin-top:.9em}
.proof__note strong{color:var(--ink);font-weight:400}

/* ===== 理由 =====
   他社の腕の問題にしない。原因は発注の構造にある、と言い切る節。 */

.approach__why{
  max-width:34em;
  margin:0 0 clamp(72px, 11vh, 130px);
}
.approach__why-title{
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(19px, 2.4vw, 27px);font-weight:300;line-height:1.5;
  letter-spacing:.02em;margin:0 0 1.1em;color:var(--ink);
}
.approach__why p{
  margin:0;font-size:clamp(13px, 1.45vw, 15px);line-height:2.1;
  color:var(--ink-muted);
}
/* このセクションで一箇所だけ強く踏み込む文。全体を強くすると軽くなる。 */
.approach__why-punch{
  margin-top:1.5em !important;
  color:var(--ink) !important;
}

/* 撮影ページへの導線。素材はオプションなので、押し出さず一行で置く。 */
.approach__more{margin:1.5em 0 0;font-size:13px;letter-spacing:.04em}
.approach__more a{
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding-bottom:.2em;
}
.approach__more a:hover{border-bottom-color:var(--accent)}
.approach__more a::after{content:" \2192"}

/* ===== 背骨 ===== */
.approach__list{
  position:relative;list-style:none;margin:0;
  padding:0 0 0 var(--spine);
}
.approach__list::before{
  content:"";position:absolute;
  left:7px;top:.35em;bottom:.35em;width:1px;
  background:linear-gradient(to bottom,
    transparent 0,
    rgba(61,78,100,.26) 6%,
    rgba(61,78,100,.26) 94%,
    transparent 100%);
  transform:scaleY(0);transform-origin:top;
  transition:transform 1.5s cubic-bezier(.22,.8,.3,1);
}
[data-reveal].is-in .approach__list::before{transform:scaleY(1)}

/* ===== 各項目 ===== */
.approach__item{
  position:relative;
  padding-block:clamp(34px, 5.2vh, 62px);
}
.approach__item + .approach__item{border-top:1px solid var(--line)}

/* 節点 */
.approach__item::before{
  content:"";position:absolute;
  left:calc(-1 * var(--spine) + 3px);top:calc(clamp(34px, 5.2vh, 62px) + .55em);
  width:9px;height:9px;border-radius:50%;
  background:var(--paper-tint);
  box-shadow:inset 0 0 0 1px var(--accent);
  transform:scale(0);
  transition:transform .55s cubic-bezier(.34,1.5,.5,1);
}
[data-reveal].is-in .approach__item::before{transform:scale(1)}
[data-reveal].is-in .approach__item:nth-child(1)::before{transition-delay:.35s}
[data-reveal].is-in .approach__item:nth-child(2)::before{transition-delay:.65s}
[data-reveal].is-in .approach__item:nth-child(3)::before{transition-delay:.95s}

/* 主役の節点だけは塗りつぶし、少し大きく */
.approach__item.is-key::before{
  width:13px;height:13px;
  left:calc(-1 * var(--spine) + 1px);
  background:var(--accent);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent);
}

.approach__num{
  display:block;
  font-family:var(--font-display);
  font-size:12px;letter-spacing:.28em;font-weight:400;
  color:var(--brand);margin-bottom:1.1em;
  opacity:.85;
}

/* 枠で差をつけない。大きさで差をつける。 */
.approach__name{
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(23px, 3.4vw, 40px);font-weight:300;line-height:1.45;
  margin:0 0 .7em;color:var(--ink);letter-spacing:.02em;
}
.approach__text{
  max-width:34em;
  font-size:clamp(13px, 1.45vw, 15px);line-height:2.1;margin:0;
  color:var(--ink-muted);
}

/* 決め手の一文。ここだけ本文より大きく、差し色で立てる。 */
.approach__punch{
  max-width:30em;margin:1.6em 0 0;padding-left:1.1em;
  border-left:2px solid var(--accent);
  font-size:clamp(15px, 1.85vw, 21px);line-height:1.85;
  color:var(--brand);letter-spacing:.01em;
}

/* ===== 現れ方 ===== */
[data-reveal] .approach__head,
[data-reveal] .proof,
[data-reveal] .approach__why,
[data-reveal] .approach__body{
  opacity:0;transform:translateY(16px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.22,.9,.3,1);
}
[data-reveal].is-in .approach__head,
[data-reveal].is-in .proof,
[data-reveal].is-in .approach__why,
[data-reveal].is-in .approach__body{opacity:1;transform:none}
[data-reveal].is-in .proof:nth-child(1){transition-delay:.20s}
[data-reveal].is-in .proof:nth-child(2){transition-delay:.36s}
[data-reveal].is-in .approach__why{transition-delay:.20s}
[data-reveal].is-in .approach__item:nth-child(1) .approach__body{transition-delay:.40s}
[data-reveal].is-in .approach__item:nth-child(2) .approach__body{transition-delay:.70s}
[data-reveal].is-in .approach__item:nth-child(3) .approach__body{transition-delay:1.00s}

@media (max-width:640px){
  .approach{--spine:52px}
  .approach__name{letter-spacing:0}
}

@media (prefers-reduced-motion: reduce){
  [data-reveal] .approach__head,
  [data-reveal] .proof,
  [data-reveal] .approach__why,
  [data-reveal] .approach__body{opacity:1;transform:none;transition:none}
  .approach__list::before{transform:scaleY(1);transition:none}
  .approach__item::before{transform:scale(1);transition:none}
}



/* ===== このような事業者様におすすめです =====
   セクション1（コーポレートカラーの面）の直後なので、白に戻して息を継ぐ。

   ここも枠で囲わない。3つを上の罫だけで分ける。
   割り方は業種ではなく段階。業種で割ると「入口は業種を問わない」を自分で崩す。 */

.fit{padding-block:clamp(80px,13vh,150px)}

.fit__head{max-width:34em;margin:0 0 clamp(48px,7vh,88px)}
.fit__title{
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(13px,1.5vw,15px);font-weight:400;
  letter-spacing:.16em;line-height:1.7;
  color:var(--ink-muted);margin:0 0 1.8em;
}
/* 診断の一行。この節でいちばん大きい文字にする。
   問いかけて自分の状況を思い出させるのが、この節の入口。 */
.fit__ask{
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(24px,3.8vw,44px);font-weight:300;line-height:1.5;
  letter-spacing:.02em;margin:0 0 .8em;color:var(--ink);
}
.fit__sub{
  margin:0;font-size:clamp(13px,1.5vw,15px);line-height:2.05;color:var(--ink-muted);
}

.fit__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;
  gap:clamp(40px,6vh,64px);
}
@media (min-width:900px){
  .fit__list{grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.2vw,52px)}
}

.fit__item{border-top:1px solid var(--ink);padding-top:clamp(20px,2.6vh,28px)}

.fit__num{
  display:block;
  font-family:var(--font-display);
  font-size:11px;letter-spacing:.28em;color:var(--ink-muted);
  margin-bottom:1.5em;
}
.fit__name{
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(19px,2.3vw,25px);font-weight:300;line-height:1.5;
  letter-spacing:.02em;margin:0 0 .5em;color:var(--ink);
}
.fit__for{
  margin:0 0 1.9em;
  font-size:12px;letter-spacing:.04em;line-height:1.7;color:var(--brand);
}

/* 思い当たること。短い行を並べる。ここで自分を見つけてもらう。 */
.fit__signs{list-style:none;margin:0 0 1.7em;padding:0;display:grid;gap:.7em}
.fit__signs li{
  position:relative;padding-left:1.35em;
  font-size:clamp(13px,1.4vw,14.5px);line-height:1.85;color:var(--ink);
}
.fit__signs li::before{
  content:"";position:absolute;left:.15em;top:.82em;
  width:7px;height:1px;background:var(--brand-mid);
}

/* 結びの一文。横罫にすると3列で高さが揃わず（実測 326/352/326px）、
   ずれた罫が3本並んで見える。縦罫なら列をまたいだ整列を期待されない。
   .approach__punch / .proof__a と同じ語彙でもある。 */
.fit__do{
  margin:1.9em 0 0;padding-left:1.1em;
  border-left:2px solid var(--brand-mid);
  font-size:clamp(13px,1.4vw,14.5px);line-height:2;color:var(--ink-muted);
}

.fit__more{margin:1.3em 0 0;font-size:12.5px;letter-spacing:.04em}
.fit__more a{
  color:var(--brand);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  padding-bottom:.2em;
}
.fit__more a:hover{border-bottom-color:var(--brand)}
.fit__more a::after{content:" \2192"}

/* 3つに当てはまらない読者を落とさない一節。 */
.fit__catch{
  max-width:38em;margin:clamp(48px,7vh,88px) 0 0;
  padding-top:clamp(24px,3.4vh,36px);border-top:1px solid var(--line);
  font-size:clamp(13px,1.45vw,15px);line-height:2.05;color:var(--ink-muted);
}

/* ===== 現れ方 ===== */
[data-reveal] .fit__head,
[data-reveal] .fit__item,
[data-reveal] .fit__catch{
  opacity:0;transform:translateY(16px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.22,.9,.3,1);
}
[data-reveal].is-in .fit__head,
[data-reveal].is-in .fit__item,
[data-reveal].is-in .fit__catch{opacity:1;transform:none}
[data-reveal].is-in .fit__item:nth-child(1){transition-delay:.22s}
[data-reveal].is-in .fit__item:nth-child(2){transition-delay:.36s}
[data-reveal].is-in .fit__item:nth-child(3){transition-delay:.50s}
[data-reveal].is-in .fit__catch{transition-delay:.62s}

@media (prefers-reduced-motion: reduce){
  [data-reveal] .fit__head,
  [data-reveal] .fit__item,
  [data-reveal] .fit__catch{opacity:1;transform:none;transition:none}
}


/* ===== お問い合わせ（セクション4） =====
   ページの終わり。コーポレートカラーで閉じる。
   セクション1（同じ面）との間に白のセクション3が挟まるので、交互になって間が持つ。

   ボタンは1つだけ。分岐はフォームの中（docs/00-business.md 6-4）。 */

/* 地は Slight Gray。#3D4E64 はフッター専用（2026-09-09）。 */
.cta{
  background:var(--paper-gray);color:var(--ink);
  padding-block:clamp(80px,13vh,150px);
  --accent:var(--brand);
}
.cta__inner{max-width:min(46em, var(--shell));text-align:center}

.cta__title{
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(23px,3.6vw,42px);font-weight:300;line-height:1.5;
  letter-spacing:.02em;margin:0 0 1em;color:var(--ink);
}
.cta__lead{
  max-width:34em;margin:0 auto clamp(36px,5vh,56px);
  font-size:clamp(13px,1.5vw,15.5px);line-height:2.1;
  color:var(--ink-muted);
}
.cta__lead strong{color:var(--brand);font-weight:400}

.cta__btn-wrap{margin:0}
/* 面が明るくなったので、ボタンはコーポレートカラーで塗って浮かせる。 */
.cta__btn{
  display:inline-block;padding:1.15em 3.4em;
  background:var(--brand);color:#fff;text-decoration:none;
  font-size:clamp(13px,1.5vw,15px);letter-spacing:.08em;
  transition:transform .25s cubic-bezier(.22,.9,.3,1), box-shadow .25s ease;
}
.cta__btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.cta__btn:focus-visible{outline:2px solid var(--brand);outline-offset:4px}

.cta__also{
  margin:clamp(22px,3vh,30px) 0 0;
  font-size:12.5px;line-height:1.95;letter-spacing:.02em;
  color:var(--ink-muted);
}

/* ===== 現れ方 ===== */
[data-reveal] .cta__title,
[data-reveal] .cta__lead,
[data-reveal] .cta__btn-wrap,
[data-reveal] .cta__also{
  opacity:0;transform:translateY(16px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.22,.9,.3,1);
}
[data-reveal].is-in .cta__title,
[data-reveal].is-in .cta__lead,
[data-reveal].is-in .cta__btn-wrap,
[data-reveal].is-in .cta__also{opacity:1;transform:none}
[data-reveal].is-in .cta__lead{transition-delay:.14s}
[data-reveal].is-in .cta__btn-wrap{transition-delay:.28s}
[data-reveal].is-in .cta__also{transition-delay:.40s}

@media (max-width:420px){
  .cta__btn{display:block;padding-inline:1.5em}
}

@media (prefers-reduced-motion: reduce){
  [data-reveal] .cta__title,
  [data-reveal] .cta__lead,
  [data-reveal] .cta__btn-wrap,
  [data-reveal] .cta__also{opacity:1;transform:none;transition:none}
  .cta__btn{transition:none}
  .cta__btn:hover{transform:none}
}





/* ===== 図表（内製 SVG） =====
   アテ画像の差し替え先。外部サービスは使わず、テンプレート内に直接書く。

   文字は SVG のユーザー単位なので、器が狭くなると一緒に縮んで読めなくなる。
   表と同じく **内側だけを横スクロール**させ、最小幅を確保する。 */

.dgm{margin:0 0 clamp(24px,3.4vh,40px)}

.dgm__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dgm__scroll:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.dgm__svg{
  display:block;width:100%;height:auto;
  min-width:620px;                 /* これ以下だと文字が 16px を切る */
  font-family:var(--font-body);
}

/* 箱。地の色が節ごとに違うので、塗りは白で固定する。 */
.dgm__box rect{fill:var(--paper);stroke:var(--brand);stroke-width:1.2}

.dgm__label text{
  fill:var(--ink);font-size:26px;letter-spacing:.04em;
  text-anchor:middle;dominant-baseline:central;
}
/* 箱が小さい図では、ラベルを一段落とす。 */
.dgm__label.is-sm text{font-size:20px}

/* 線に添える注記（CSV・手入力 など） */
.dgm__edge-label{
  fill:var(--ink-muted);font-size:13px;letter-spacing:.06em;
  text-anchor:middle;dominant-baseline:central;
}

.dgm__sub text{
  fill:var(--ink-muted);font-size:13px;letter-spacing:.04em;
  text-anchor:middle;dominant-baseline:central;
}

/* 人が運んでいる線。破線にして「仕組みではない」ことを見せる。 */
.dgm__link line{stroke:var(--brand-mid);stroke-width:1.4;stroke-dasharray:5 4}
.dgm__link.is-live line{stroke:var(--brand);stroke-width:1.6;stroke-dasharray:none}
.dgm__arrow-head{fill:var(--brand-mid)}
.dgm__link.is-live .dgm__arrow-head{fill:var(--brand)}

/* 本来つながるべきなのに、つながっていない辺 */
.dgm__broken line{stroke:var(--brand-mid);stroke-width:1;stroke-dasharray:3 6;opacity:.5}
.dgm__cross path{stroke:var(--brand-mid);stroke-width:1.6;fill:none;stroke-linecap:round;opacity:.75}

/* 分断の図の中心。ここが主題なので塗って立てる。 */
.dgm__hub{fill:var(--brand-mid);stroke:none}
.dgm__hub-label{
  fill:var(--paper);font-size:26px;letter-spacing:.06em;font-weight:500;
  text-anchor:middle;dominant-baseline:central;
}

/* 連動の図の中心。arianode が作る面。 */
.dgm__hub-rect{fill:var(--brand);stroke:none}
.dgm__hub-sub{
  fill:color-mix(in srgb, var(--paper) 72%, var(--brand));
  font-size:14px;letter-spacing:.06em;
  text-anchor:middle;dominant-baseline:central;
}

/* 触らない範囲 */
.dgm__frame rect{fill:none;stroke:var(--brand-mid);stroke-width:1.2;stroke-dasharray:6 5}
.dgm__frame-label{
  fill:var(--ink-muted);font-size:15px;letter-spacing:.1em;
  text-anchor:middle;dominant-baseline:central;
}
.dgm__frame-note{
  fill:var(--brand-mid);font-size:14px;letter-spacing:.08em;
  text-anchor:middle;dominant-baseline:central;
}

.dgm__cap{
  margin:1.1em 0 0;
  font-size:clamp(12.5px,1.35vw,14px);line-height:1.95;color:var(--ink-muted);
}

/* ===== アテ画像（プレースホルダ） =====
   本番の画像・図表が入るまでの仮置き。**わざと未入稿に見せる**のが役割。
   きれいに見せると、差し替え忘れが分からなくなる。 */

.ph{margin:0 0 clamp(24px,3.4vh,40px)}
.ph__box{
  aspect-ratio:var(--ph-ratio, 16 / 9);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.7em;padding:clamp(16px,3vw,32px);text-align:center;
  border:1px dashed color-mix(in srgb, var(--brand) 45%, transparent);
  background:
    repeating-linear-gradient(45deg,
      transparent 0 11px,
      color-mix(in srgb, var(--brand) 4%, transparent) 11px 22px),
    var(--paper);
}
.ph__kind{
  font-size:10.5px;letter-spacing:.2em;line-height:1;
  color:#fff;background:var(--brand);padding:.5em 1.1em .45em;
}
.ph__label{
  font-family:var(--font-display);
  font-size:clamp(13px,1.6vw,16px);font-weight:400;line-height:1.6;
  letter-spacing:.02em;color:var(--ink);
}
.ph__note{
  max-width:36em;
  font-size:clamp(11.5px,1.25vw,13px);line-height:1.95;color:var(--ink-muted);
}
.ph__ratio{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10.5px;letter-spacing:.06em;color:var(--brand-mid);
}
/* 背景画像のアテは、面いっぱいに入ることを示すため全幅で置く。 */
.ph--bg{margin-inline:calc(50% - 50svw);width:100svw}
.ph--bg .ph__box{border-inline:0}

/* ===== /services/ のヒーロー =====
   アイキャッチを最上部に敷き、見出しを画像中央の球体に重ねる。

   球体は元画像（1672×941）の 横47% / 縦57% にある。
   PC と SP で画像は同じもの。**縦横比だけを変え**、object-position で
   球体を画面内に留める。PC は原寸比なので切り抜きが起きず、球体は 47%/57% のまま。
   SP は縦長に切るため上下が削られ、球体は器のほぼ中央に寄る。
   そのため見出しの位置は breakpoint ごとに持たせている。 */

.svc__hero{
  --svc-fx:47%;   /* 画像内の切り抜きの基準 */
  --svc-fy:25%;
  --svc-cx:47%;   /* 器の中での見出しの位置 */
  --svc-cy:62%;
  position:relative;
  /* aspect-ratio と max-height を併用しない。高さが頭打ちになると、
     その比率ぶん幅まで縮む（1600px の窓で 1215px になっていた）。
     PC は高さで決め、幅は器いっぱいに使う。 */
  width:100%;
  height:clamp(340px, 60svh, 620px);
  overflow:hidden;
  background:var(--paper-tint);
  isolation:isolate;   /* difference 合成をヒーロー内に閉じ込める */
}
.svc__hero-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:var(--svc-fx) var(--svc-fy);
  display:block;
}
/* 黒のスクリムは敷かない。画像の軽さが死ぬ（ユーザー指摘・2026-09-09）。
   文字はトップのヒーローと同じく difference で合成する。

   ただし difference は **地が中間調のときに文字が消える**。
   実測すると見出しの範囲の 10.8% が 3:1 未満、最悪 1.17:1 だった
   （球体の縁の rgb(91,127,161) が犯人）。

   そこで黒ではなく **白の光**で地を持ち上げる。
   中間調が白に寄れば difference の結果は濃くなり、文字が出る。
   画像そのものが発光しているので、白い滲みは絵の一部として馴染む。 */
.svc__hero-glow{
  position:absolute;inset:0;
  background:radial-gradient(ellipse var(--svc-gw, 44%) var(--svc-gh, 30%) at var(--svc-cx) var(--svc-cy),
    rgba(255,255,255,.66) 0%,
    rgba(255,255,255,.56) 42%,
    rgba(255,255,255,.24) 72%,
    rgba(255,255,255,0) 92%);
}
.svc__hero-copy{
  mix-blend-mode:difference;color:#fff;
  position:absolute;
  left:var(--svc-cx);top:var(--svc-cy);
  transform:translate(-50%,-50%);
  width:min(84%, 26em);
  text-align:center;
  pointer-events:none;user-select:none;
}
.svc__eyebrow{
  font-family:var(--font-display);
  font-size:clamp(11px,1.3vw,13px);font-weight:400;
  letter-spacing:.3em;line-height:1;
  margin:0 0 1.5em;color:inherit;opacity:.85;
  animation:svc-eyebrow-in .9s ease .12s backwards;
}
.svc__hero-title{
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(19px,3vw,38px);font-weight:300;line-height:1.55;
  letter-spacing:.06em;margin:0;color:inherit;
}

/* ===== 見出しの入り =====
   トップのフレーズと同じ動き。右から、左の字から順に。
   keyframes 名を hero.css と分けているのは、あちらが
   ヒーローのあるページでしか読み込まれないため（重複定義を避ける）。 */
.svc__hero-title .ch{
  display:inline-block;will-change:transform, opacity;
  animation:svc-char-in .62s cubic-bezier(.16,1.1,.3,1) backwards;
  animation-delay:calc(min(var(--i, 0), 20) * 30ms + .28s);
}
@keyframes svc-char-in{
  from{opacity:0;transform:translate3d(.85em, 0, 0)}
  to  {opacity:1;transform:none}
}
@keyframes svc-eyebrow-in{
  from{opacity:0;transform:translate3d(0, .6em, 0)}
  to  {opacity:.85;transform:none}
}
@media (prefers-reduced-motion: reduce){
  .svc__hero-title .ch,
  .svc__eyebrow{animation:none}
}

/* 高さを固定したまま幅が伸びると、そのぶん縦が削られて顔が見切れる。
   実測（高さ540px）：1200px で縦80%、1600px で60%、1920px では50%しか映らない。
   顔（元画像 y85〜330）と球体（y410〜670）の両方を入れるには縦62%が要るので、
   高さを固定できるのは 1550px あたりまで。

   そこから上は **高さを幅に連動させ、切り取る比率を一定に保つ**。
   縦62%が残る高さは 585 / 1672 ≒ 0.35vw だが、それだと顔の上端と球体の下端が
   ちょうど境界に乗って余白が 0 になる。37vw にして上下に 15px ほど逃がす。 */
@media (min-width:1400px){
  .svc__hero{
    height:clamp(500px, 37vw, 950px);
    --svc-fy:21%;
  }
}

@media (max-width:760px){
  .svc__hero{
    height:auto;
    aspect-ratio:3 / 4;
    --svc-fy:52%;
    --svc-cx:50%;
    --svc-cy:50%;
    --svc-gw:58%;
    --svc-gh:22%;
  }
  /* 1行で端まで届くと窮屈なので、2行に折る幅にする。 */
  .svc__hero-copy{width:min(76%, 15em)}
  .svc__eyebrow{margin-bottom:1.2em}
}

/* アイキャッチが未設定のときの代替 */
.svc__eyebrow--plain{color:var(--brand)}
.svc__head{padding-block:clamp(56px,9vw,116px) clamp(24px,4vw,40px)}

/* 下は空けない。直後の図はピンの中で上下中央に置かれ、そこで余白が生まれるため。 */
.svc__intro{padding-block:clamp(34px,5vw,62px) 0}

/* キャッチコピーの直下に置く1枚。中央に寄せ、幅は本文の段組みに合わせる。 */
.svc__feature{margin:clamp(28px,4.5vw,56px) auto clamp(32px,5vw,48px);width:var(--shell);text-align:center}
.svc__feature-img{display:block;width:100%;height:auto;margin-inline:auto}

/* ===== サービス（/services/） =====
   トップページ セクション1の受け皿。証拠の2つ目と工程の詳細をここが引き受ける。
   .proof / .cta はトップと共用（どちらもコーポレートカラーの面に置く前提の指定）。 */

.svc{--accent:var(--brand)}

.svc__title{
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(30px,5vw,54px);font-weight:300;line-height:1.35;
  letter-spacing:.02em;margin:0 0 .7em;color:var(--ink);
}
/* 説明文ではなくキャッチコピー。大きく、中央に置いて読ませる。
   max-width は置かない（ユーザー指示・2026-09-09）。
   .shell の 1180px いっぱいまで使い、1行目が折り返さずに収まるようにする。 */
.svc__lead{
  margin:0;text-align:center;
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(14px,1.95vw,22px);font-weight:300;line-height:1.95;
  letter-spacing:.02em;color:var(--ink);
}

/* ===== 主張（コーポレートカラーの面） ===== */
.svc__claim{
  background:var(--paper-tint);color:var(--ink);
  padding-block:clamp(64px,10vw,130px);
  margin-bottom:clamp(56px,9vw,110px);
}
.svc__claim-title{
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(24px,3.6vw,42px);font-weight:300;line-height:1.42;
  letter-spacing:.02em;margin:0 0 clamp(40px,6vh,72px);color:var(--ink);
}
.svc__why{max-width:34em;margin:clamp(44px,6vh,72px) 0 0}
.svc__why p{
  margin:0;font-size:clamp(13px,1.45vw,15px);line-height:2.1;
  color:var(--ink-muted);
}
.svc__why-punch{
  margin-top:1.5em !important;
  color:var(--ink) !important;
}

/* ===== お受けする案件 ===== */
.svc__terms{padding-block:0 clamp(56px,9vw,110px)}
.svc__terms > h2{
  font-size:12px;letter-spacing:.2em;font-weight:400;
  color:var(--ink-muted);margin:0 0 2em;
}
.svc__terms-grid{display:grid;grid-template-columns:1fr;gap:clamp(32px,4.5vh,48px)}
@media (min-width:820px){
  .svc__terms-grid{grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,72px)}
}
.svc__terms-grid h3{
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(16px,2vw,21px);font-weight:300;line-height:1.6;
  letter-spacing:.02em;margin:0 0 1.3em;color:var(--ink);
}
.svc__terms-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.7em}
.svc__terms-grid li{
  position:relative;padding-left:1.35em;
  font-size:clamp(13px,1.4vw,14.5px);line-height:1.9;color:var(--ink);
}
.svc__terms-grid li::before{
  content:"";position:absolute;left:.15em;top:.85em;
  width:7px;height:1px;background:var(--brand-mid);
}
.svc__terms-note{
  margin:1.5em 0 0;max-width:30em;
  font-size:clamp(12.5px,1.35vw,14px);line-height:2;color:var(--ink-muted);
}

/* ===== サービス3本 ===== */
.svc__h2{
  font-size:12px;letter-spacing:.2em;font-weight:400;
  color:var(--ink-muted);margin:0 0 2.4em;
}
.svc__list-wrap{padding-block:0 clamp(56px,9vw,110px)}
.svc__list{list-style:none;margin:0;padding:0}

.svc__item{
  display:grid;grid-template-columns:1fr;gap:.6em;
  padding-block:clamp(32px,4.6vh,54px);
  border-top:1px solid var(--line);
}
.svc__item:last-child{border-bottom:1px solid var(--line)}
@media (min-width:820px){
  .svc__item{grid-template-columns:6em 1fr;gap:clamp(20px,3vw,48px)}
}
/* 主役だけ罫を濃くする。枠では囲わない。 */
.svc__item.is-key{border-top-color:var(--brand)}

.svc__num{
  font-family:var(--font-display);
  font-size:13px;letter-spacing:.2em;color:var(--brand);padding-top:.35em;
}
.svc__item.is-key .svc__num{font-weight:400}

/* グリッド項目の既定は min-width:auto。中に最小幅を持つもの（図表）が入ると、
   その幅まで列が広がってページごと横に溢れる（実測 305px）。
   .dgm__scroll の overflow-x を効かせるには、ここを 0 にしておく必要がある。 */
.svc__body{min-width:0}

.svc__name{
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(20px,2.8vw,32px);font-weight:300;line-height:1.45;
  letter-spacing:.02em;margin:0 0 .7em;color:var(--ink);
}
.svc__what{
  max-width:36em;margin:0 0 2em;
  font-size:clamp(13.5px,1.5vw,15.5px);line-height:2.05;color:var(--ink);
}

.svc__scope{margin:0 0 1.6em;display:grid;gap:1em}
.svc__scope > div{display:grid;grid-template-columns:1fr;gap:.35em}
@media (min-width:600px){
  .svc__scope > div{grid-template-columns:7.5em 1fr;gap:1.2em}
}
.svc__scope dt{
  font-size:11.5px;letter-spacing:.1em;line-height:2;color:var(--ink-muted);
}
.svc__scope dd{
  margin:0;max-width:34em;
  font-size:clamp(12.5px,1.35vw,14px);line-height:2;color:var(--ink-muted);
}

.svc__note{
  max-width:32em;margin:0 0 1.2em;padding-left:1.1em;
  border-left:2px solid var(--brand-mid);
  font-size:clamp(12.5px,1.35vw,14px);line-height:2;color:var(--ink-muted);
}
.svc__more{margin:0 0 1.6em;font-size:12.5px;letter-spacing:.04em}
.svc__more a{
  color:var(--brand);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  padding-bottom:.2em;
}
.svc__more a:hover{border-bottom-color:var(--brand)}
.svc__more a::after{content:" \2192"}

.svc__role{
  margin:0;font-size:clamp(12.5px,1.35vw,14px);line-height:2;color:var(--brand);
}

/* ===== 進め方 ===== */
.svc__flow{background:var(--paper-gray);padding-block:clamp(56px,9vw,110px)}
.svc__flow-title{
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(20px,2.8vw,32px);font-weight:300;line-height:1.5;
  letter-spacing:.02em;margin:0 0 .9em;color:var(--ink);
}
.svc__flow-lead{
  max-width:36em;margin:0 0 clamp(36px,5vh,56px);
  font-size:clamp(13px,1.45vw,15px);line-height:2.05;color:var(--ink-muted);
}

.flow{list-style:none;margin:0 0 clamp(32px,4.5vh,48px);padding:0}
.flow li{
  display:grid;grid-template-columns:2.6em 1fr;gap:.2em 1em;
  padding-block:clamp(14px,2vh,20px);
  border-top:1px solid rgba(61,78,100,.14);
}
.flow li:last-child{border-bottom:1px solid rgba(61,78,100,.14)}
@media (min-width:700px){
  .flow li{grid-template-columns:3em 7em 1fr;gap:clamp(12px,2vw,32px)}
}
.flow__n{
  font-family:var(--font-display);
  font-size:11.5px;letter-spacing:.16em;color:var(--brand-mid);padding-top:.45em;
}
.flow__k{
  font-family:var(--font-display);
  font-size:clamp(15px,1.7vw,18px);font-weight:400;line-height:1.7;
  letter-spacing:.04em;color:var(--brand);
}
.flow__d{
  max-width:34em;
  font-size:clamp(12.5px,1.35vw,14px);line-height:1.95;color:var(--ink-muted);
}
@media (max-width:699px){
  .flow__d{grid-column:2}
}

.svc__flow-note{
  max-width:36em;margin:0;
  font-size:clamp(12.5px,1.35vw,14px);line-height:2;color:var(--ink-muted);
}

/* ===== 撮影・キャスティング（/photo-shooting/） =====
   トップの差別化セクションから逃がした詳細を受ける。
   素材はオプションなので、押しの強い売り込みにはしない。
   このページは「仕様書」の顔をしているのが正しい。 */

.pshoot{--accent:var(--brand)}

.pshoot__head{padding-block:clamp(56px,9vw,116px) clamp(32px,5vw,56px)}
.pshoot__title{
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(30px,5vw,54px);font-weight:300;line-height:1.35;
  letter-spacing:.02em;margin:0 0 .7em;color:var(--ink);
}
.pshoot__lead{
  max-width:34em;margin:0;
  font-size:clamp(14px,1.6vw,16px);line-height:2.05;color:var(--ink-muted);
}

/* 条件を先に置く。「何でもやります」と読まれないための一節。 */
.pshoot__terms{
  padding-block:clamp(28px,4vw,44px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  max-width:none;
}
.pshoot__terms h2{
  font-size:12px;letter-spacing:.2em;font-weight:400;
  color:var(--ink-muted);margin:0 0 1.4em;
}
.pshoot__terms p{
  max-width:36em;margin:0;
  font-size:clamp(14px,1.5vw,16px);line-height:2;color:var(--ink);
}
.pshoot__because{
  margin-top:1.1em !important;
  color:var(--ink-muted) !important;
  font-size:clamp(13px,1.4vw,14.5px) !important;
}

/* ===== 中核：AI利用に特化した撮影とは =====
   ページで唯一、面で沈める場所。ここが具体でないとページが空になる。 */
.pshoot__core{
  background:var(--paper-tint);color:var(--ink);
  margin-block:clamp(56px,9vw,110px);
  padding-block:clamp(64px,10vw,130px);
}
.pshoot__core-title{
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(24px,3.6vw,42px);font-weight:300;line-height:1.4;
  letter-spacing:.02em;margin:0 0 .8em;color:var(--ink);
}
.pshoot__core-lead{
  max-width:32em;margin:0 0 clamp(40px,6vh,72px);
  font-size:clamp(13px,1.5vw,15px);line-height:2.05;color:var(--ink-muted);
}

/* 仕様書の顔。項目名と説明を2列で並べ、罫だけで区切る。 */
.pspec{margin:0}
.pspec__row{
  display:grid;grid-template-columns:1fr;gap:.7em;
  padding-block:clamp(20px,3vh,30px);
  border-top:1px solid var(--line);
}
.pspec__row:last-child{border-bottom:1px solid var(--line)}
@media (min-width:760px){
  .pspec__row{grid-template-columns:minmax(9em,15em) 1fr;gap:clamp(20px,3vw,48px)}
}
.pspec dt{
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(15px,1.8vw,19px);font-weight:400;line-height:1.6;
  letter-spacing:.03em;color:var(--brand);
}
.pspec dd{
  margin:0;max-width:34em;
  font-size:clamp(13px,1.45vw,15px);line-height:2.05;color:var(--ink-muted);
}

/* この面で一箇所だけ踏み込む文。 */
.pshoot__punch{
  max-width:30em;margin:clamp(40px,6vh,68px) 0 0;padding-left:1.1em;
  border-left:2px solid var(--accent);
  font-size:clamp(15px,1.85vw,21px);line-height:1.85;
  color:var(--brand);letter-spacing:.01em;
}

.pshoot__block{padding-block:clamp(40px,6vw,72px)}
.pshoot__block h2{
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(20px,2.8vw,32px);font-weight:300;line-height:1.5;
  letter-spacing:.02em;margin:0 0 1em;color:var(--ink);
}
.pshoot__block p{
  max-width:36em;margin:0 0 1.2em;
  font-size:clamp(14px,1.5vw,15.5px);line-height:2.05;color:var(--ink-muted);
}
.pshoot__block p:last-child{margin-bottom:0}

/* ===== 既存の取引先を否定しない一節 =====
   離脱を止める場所なので、地の色を変えて独立させる。 */
.pshoot__offer{
  background:var(--paper-gray);
  padding-block:clamp(56px,8vw,100px);
}
.pshoot__offer h2{
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(20px,3vw,34px);font-weight:300;line-height:1.55;
  letter-spacing:.02em;margin:0 0 .7em;color:var(--ink);max-width:22em;
}
.pshoot__offer-lead{
  margin:0 0 clamp(28px,4vh,44px);
  font-size:clamp(15px,1.8vw,19px);line-height:1.9;color:var(--brand);
}
.pshoot__list{
  list-style:none;margin:0 0 clamp(28px,4vh,44px);padding:0;
  display:grid;gap:.55em;max-width:34em;
}
.pshoot__list li{
  position:relative;padding-left:1.5em;
  font-size:clamp(13px,1.45vw,15px);line-height:1.95;color:var(--ink);
}
.pshoot__list li::before{
  content:"";position:absolute;left:.2em;top:.85em;
  width:6px;height:1px;background:var(--brand);
}
.pshoot__why-free{
  max-width:36em;margin:0;
  font-size:clamp(13px,1.4vw,14.5px);line-height:2.05;color:var(--ink-muted);
}
.pshoot__cond{
  margin:1.4em 0 0;font-size:12.5px;line-height:1.9;color:var(--ink-muted);opacity:.8;
}

.pshoot__cta{padding-block:clamp(56px,8vw,100px);text-align:center}
.pshoot__cta p{
  margin:0 0 1.6em;font-size:clamp(14px,1.6vw,16px);line-height:1.9;color:var(--ink-muted);
}
.pshoot__btn{
  display:inline-block;padding:1.05em 3em;
  background:var(--brand);color:#fff;text-decoration:none;
  font-size:14px;letter-spacing:.1em;
  transition:opacity .25s ease;
}
.pshoot__btn:hover{opacity:.82}

@media (prefers-reduced-motion: reduce){
  .pshoot__btn{transition:none}
}


/* ===== 撮影仕様書のサンプル =====
   無償で渡すものの実物を見せる図。画像ではなく本文の表にしてある
   （選択・検索・読み上げができ、翻訳もできる）。見た目だけ書類に寄せる。 */

.sheet{
  margin:0 0 clamp(28px,4vh,44px);
  background:var(--paper);
  border:1px solid var(--line);
}
.sheet__cap{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.35em 1em;
  padding:clamp(14px,2vw,20px) clamp(14px,2.4vw,24px);
  border-bottom:1px solid var(--line);
}
.sheet__cap-title{
  font-family:var(--font-display);
  font-size:13px;letter-spacing:.18em;color:var(--brand);
}
.sheet__cap-sub{font-size:11.5px;letter-spacing:.04em;color:var(--ink-muted)}
/* 表は 660px を切ると必ず横に溢れる。溢れる幅でだけ手掛かりを出す。 */
.sheet__cap-hint{display:none}
@media (max-width:760px){
  .sheet__cap-hint{
    display:inline;margin-inline-start:auto;
    font-size:11px;letter-spacing:.04em;color:var(--brand-mid);white-space:nowrap;
  }
  .sheet__cap-hint::after{content:" \2192"}
}

/* 横に長い表なので、内側だけをスクロールさせる。ページ本体は横に動かさない。 */
.sheet__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sheet__scroll:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

.sheet__table{
  border-collapse:collapse;
  width:100%;min-width:660px;
  font-size:12.5px;line-height:1.75;
}
.sheet__table th,
.sheet__table td{
  padding:.72em .9em;
  text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.sheet__table thead th{
  font-weight:400;font-size:11px;letter-spacing:.1em;
  color:var(--ink-muted);background:#FAFBFC;
  border-bottom:1px solid var(--line);
}
.sheet__table tbody tr:last-child td{border-bottom:0}
.sheet__table td{color:var(--ink)}

.sheet__no{
  font-family:var(--font-display);
  color:var(--ink-muted);font-size:11.5px;letter-spacing:.06em;
}
/* ファイル名は等幅で。規則があることが一目で分かる。 */
.sheet__file{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;color:var(--ink-muted);
}
/* この列がこの図の主役。通常の撮影指示書には無い。 */
.sheet__table .sheet__use{
  white-space:normal;min-width:15em;
  color:var(--brand);
}
.sheet__table thead .sheet__use{color:var(--brand);font-weight:400}

.sheet__note{
  margin:0;padding:clamp(14px,2vw,20px) clamp(14px,2.4vw,24px);
  border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.95;color:var(--ink-muted);
}

@media (max-width:520px){
  .sheet__table{font-size:12px}
}



/* ===== パンくず =====
   経路は arianode_breadcrumb_trail() が正。JSON-LD も同じものを読む。 */

.crumbs{margin:0 0 clamp(20px,3vw,32px)}
.crumbs__list{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5em;
  list-style:none;margin:0;padding:0;
  font-size:11.5px;letter-spacing:.04em;line-height:1.7;
}
.crumbs__item{display:flex;align-items:center;gap:.5em;color:var(--ink-muted)}
.crumbs__item + .crumbs__item::before{content:"/";opacity:.45}
.crumbs__item a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.crumbs__item a:hover{border-bottom-color:currentColor}
.crumbs__item [aria-current]{color:var(--ink)}

/* 画像に重ねるときは白抜きにする */
.arc__head.has-image .crumbs__item{color:rgba(255,255,255,.8)}
.arc__head.has-image .crumbs__item [aria-current]{color:#fff}

/* ===== 一覧のヘッダー ===== */

.arc__head{
  position:relative;isolation:isolate;
  background:var(--paper-tint);
  padding-block:clamp(48px,8vw,96px);
  overflow:hidden;
}
.arc__head.has-image{
  display:grid;align-items:center;
  min-height:clamp(280px,34vw,420px);
  padding-block:clamp(40px,6vw,72px);
}
.arc__head-img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:center;
}
/* 画像が明るいので、文字の下だけ淡く落として読ませる（01-brand.md の手順）。 */
.arc__head-glow{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,
    rgba(20,30,44,.62) 0%,
    rgba(20,30,44,.44) 42%,
    rgba(20,30,44,.08) 78%,
    rgba(20,30,44,0) 100%);
}
.arc__head.has-image .arc__head-copy{color:#fff}

.arc__eyebrow{
  font-family:var(--font-display);
  font-size:11px;letter-spacing:.3em;line-height:1;
  margin:0 0 1.6em;color:var(--brand);
}
.arc__head.has-image .arc__eyebrow{color:rgba(255,255,255,.85)}
.arc__title{
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(28px,4.6vw,48px);font-weight:300;line-height:1.35;
  letter-spacing:.02em;margin:0 0 .6em;color:var(--ink);
}
.arc__head.has-image .arc__title{color:#fff}
.arc__lead{
  max-width:34em;margin:0;
  font-size:clamp(13px,1.5vw,15px);line-height:2.05;color:var(--ink-muted);
}
.arc__head.has-image .arc__lead{color:rgba(255,255,255,.86)}

/* ===== カード ===== */

.arc__body{padding-block:clamp(48px,8vw,96px)}
.arc__grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:clamp(32px,4vw,52px);
}
@media (min-width:700px){ .arc__grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1040px){ .arc__grid{grid-template-columns:repeat(3,1fr)} }

.arc__card{min-width:0;display:flex;flex-direction:column;gap:.9em}
.arc__card-link{
  display:block;text-decoration:none;color:inherit;
  border-top:1px solid var(--line);padding-top:1.1em;
}
.arc__card-link:hover{border-top-color:var(--brand)}

.arc__thumb{
  display:block;overflow:hidden;background:var(--paper-tint);
  aspect-ratio:16 / 10;margin-bottom:1.2em;
}
.arc__thumb-img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.9,.3,1);
}
.arc__card-link:hover .arc__thumb-img{transform:scale(1.03)}
/* アイキャッチ未設定のとき。空白にせず、面として置く。 */
.arc__thumb-none{
  display:block;width:100%;height:100%;
  background:
    repeating-linear-gradient(45deg, transparent 0 11px,
      color-mix(in srgb, var(--brand) 5%, transparent) 11px 22px),
    var(--paper-tint);
}

.arc__card-body{display:block}
.arc__card-title{
  display:block;
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(16px,1.9vw,20px);font-weight:300;line-height:1.55;
  letter-spacing:.02em;color:var(--ink);margin-bottom:.7em;
}
.arc__card-text{
  display:block;
  font-size:12.5px;line-height:1.95;color:var(--ink-muted);
}
.arc__card-cta{
  display:inline-block;margin-top:1.1em;
  font-size:12px;letter-spacing:.06em;color:var(--brand);
}
.arc__card-cta::after{content:" \2192"}
.arc__card-link:hover .arc__card-cta::after{content:" \2192"}

.arc__card-sub{
  align-self:flex-start;
  font-size:11.5px;letter-spacing:.04em;color:var(--ink-muted);text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:.15em;
}
.arc__card-sub:hover{color:var(--ink);border-bottom-color:var(--brand-mid)}

.arc__empty{font-size:14px;color:var(--ink-muted)}

@media (prefers-reduced-motion: reduce){
  .arc__thumb-img{transition:none}
  .arc__card-link:hover .arc__thumb-img{transform:none}
}

/* ===== システムサンプル 1件 ===== */

.smp__head{padding-block:clamp(56px,9vw,110px) clamp(24px,4vw,40px)}
.smp__eyebrow{
  font-family:var(--font-display);
  font-size:11px;letter-spacing:.3em;line-height:1;
  margin:0 0 1.8em;color:var(--brand);
}
.smp__title{
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(26px,4.4vw,46px);font-weight:300;line-height:1.4;
  letter-spacing:.02em;margin:0 0 .7em;color:var(--ink);
}
.smp__lead{
  max-width:36em;margin:0;
  font-size:clamp(14px,1.55vw,16px);line-height:2.05;color:var(--ink-muted);
}
.smp__tech{
  margin:1.8em 0 0;font-size:12px;letter-spacing:.04em;color:var(--ink-muted);
}
.smp__tech span{
  display:inline-block;margin-right:1em;
  font-size:10.5px;letter-spacing:.16em;color:var(--brand-mid);
}
.smp__tech a{color:var(--ink-muted)}

.smp__scene{padding-block:0 clamp(40px,6vw,72px)}
.smp__h2{
  font-size:12px;letter-spacing:.2em;font-weight:400;
  color:var(--ink-muted);margin:0 0 2em;
}

.smp__try{background:var(--paper-tint);padding-block:clamp(48px,8vw,96px)}

.smp__next{padding-block:clamp(48px,8vw,96px)}
.smp__next p{max-width:34em;margin:0;font-size:clamp(13px,1.45vw,15px);line-height:2.05;color:var(--ink-muted)}
.smp__links{margin-top:2em !important;display:flex;flex-wrap:wrap;gap:1.6em}
.smp__links a{
  font-size:13px;letter-spacing:.04em;color:var(--brand);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--brand) 35%, transparent);padding-bottom:.2em;
}
.smp__links a:hover{border-bottom-color:var(--brand)}
.smp__links a::after{content:" \2192"}

/* ===== デモ：同じ質問を、二つのサイトに ===== */

.demo__ask{margin:0 0 clamp(28px,4vw,44px)}
.demo__ask-label{
  margin:0 0 1.2em;font-size:11px;letter-spacing:.16em;color:var(--ink-muted);
}
.demo__chips{display:flex;flex-wrap:wrap;gap:.7em}
.demo__chip{
  padding:.85em 1.4em;border:1px solid var(--line);border-radius:999px;
  background:var(--paper);color:var(--ink-muted);cursor:pointer;
  font-size:clamp(12px,1.35vw,13.5px);line-height:1.5;letter-spacing:.02em;
  text-align:left;
  transition:border-color .25s ease, color .25s ease, background-color .25s ease;
}
.demo__chip:hover{border-color:var(--brand-mid);color:var(--ink)}
.demo__chip.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.demo__chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.demo__panes{display:grid;grid-template-columns:1fr;gap:clamp(24px,3.4vw,40px)}
@media (min-width:820px){ .demo__panes{grid-template-columns:1fr 1fr} }

.demo__pane{
  min-width:0;padding-top:1.2em;
  border-top:1px solid var(--line);
}
.demo__pane.is-live{border-top-color:var(--brand)}
.demo__pane-title{
  font-family:var(--font-display);
  font-size:clamp(15px,1.8vw,19px);font-weight:300;line-height:1.5;
  letter-spacing:.02em;margin:0 0 .5em;color:var(--ink);
}
.demo__pane.is-live .demo__pane-title{color:var(--brand);font-weight:400}
.demo__pane-note{margin:0 0 1.6em;font-size:11.5px;line-height:1.7;color:var(--ink-muted)}

/* 読み取った条件 */
.demo__read{
  margin:0 0 1.6em;padding:1em 1.2em;
  background:color-mix(in srgb, var(--brand) 5%, transparent);
}
.demo__read-label{margin:0 0 .7em;font-size:10.5px;letter-spacing:.14em;color:var(--brand)}
.demo__read-list{list-style:none;margin:0;padding:0;display:grid;gap:.35em}
.demo__read-list li{
  position:relative;padding-left:1.1em;
  font-size:12.5px;line-height:1.7;color:var(--ink);
}
.demo__read-list li::before{
  content:"";position:absolute;left:0;top:.75em;width:6px;height:1px;background:var(--brand);
}

.demo__count{margin:0 0 1em;font-size:11.5px;letter-spacing:.1em;color:var(--ink-muted)}
.demo__items{list-style:none;margin:0;padding:0}
.demo__item{padding-block:.9em;border-bottom:1px solid var(--line)}
.demo__item-head{display:flex;align-items:baseline;gap:1em;justify-content:space-between}
.demo__item-name{font-size:clamp(13px,1.45vw,15px);line-height:1.6;color:var(--ink)}
.demo__item-price{
  font-family:var(--font-display);
  font-size:12.5px;letter-spacing:.04em;color:var(--ink-muted);white-space:nowrap;
}
.demo__tags{list-style:none;margin:.7em 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4em}
.demo__tags li{
  padding:.3em .7em;border:1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  font-size:10.5px;letter-spacing:.04em;color:var(--brand);line-height:1.5;
}

.demo__caveat{
  margin:1.4em 0 0;font-size:11.5px;line-height:1.85;color:var(--ink-muted);
}

/* 出さなかったもの。**理由まで言えるのが属性側の証拠。** */
.demo__excluded{margin-top:1.8em;padding-top:1.2em;border-top:1px dashed var(--line)}
.demo__excluded-label{margin:0 0 .8em;font-size:10.5px;letter-spacing:.14em;color:var(--ink-muted)}
.demo__excluded-list{list-style:none;margin:0;padding:0;display:grid;gap:.5em}
.demo__excluded-list li{display:flex;gap:1em;justify-content:space-between;font-size:12px;line-height:1.6}
.demo__ex-name{color:var(--ink-muted)}
.demo__ex-why{color:var(--brand-mid);white-space:nowrap}

/* ===== 種明かし ===== */

.reveal{margin-top:clamp(48px,8vw,96px);padding-top:clamp(40px,6vw,72px);border-top:1px solid var(--line)}
.reveal__title{
  font-family:var(--font-display);
  font-size:clamp(20px,2.8vw,32px);font-weight:300;line-height:1.5;
  letter-spacing:.02em;margin:0 0 .8em;color:var(--ink);
}
.reveal__lead{
  max-width:34em;margin:0 0 clamp(32px,4.5vw,52px);
  font-size:clamp(13px,1.45vw,15px);line-height:2.05;color:var(--ink-muted);
}
.reveal__pair{display:grid;grid-template-columns:1fr;gap:clamp(28px,3.4vw,44px)}
@media (min-width:820px){ .reveal__pair{grid-template-columns:1fr 1fr} }
.reveal__col{min-width:0;padding-top:1.1em;border-top:1px solid var(--line)}
.reveal__col.is-live{border-top-color:var(--brand)}
.reveal__col-title{
  margin:0 0 1.4em;font-size:11.5px;letter-spacing:.14em;color:var(--ink-muted);
}
.reveal__col.is-live .reveal__col-title{color:var(--brand)}

.reveal__data{background:var(--paper);padding:1.2em 1.4em;border:1px solid var(--line)}
.reveal__k{margin:0 0 .3em;font-size:10.5px;letter-spacing:.12em;color:var(--brand-mid)}
.reveal__v{margin:0 0 1.1em;font-size:12.5px;line-height:1.9;color:var(--ink)}
.reveal__v:last-child{margin-bottom:0}

.reveal__attrs{margin:0;background:var(--paper);padding:1.2em 1.4em;border:1px solid var(--line)}
.reveal__attrs > div{
  display:grid;grid-template-columns:8.5em 1fr;gap:.8em;
  padding-block:.45em;border-bottom:1px solid var(--line);
}
.reveal__attrs > div:last-child{border-bottom:0}
.reveal__attrs dt{font-size:10.5px;letter-spacing:.08em;color:var(--brand-mid);line-height:1.9}
.reveal__attrs dd{
  margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;line-height:1.9;color:var(--ink);
}
.reveal__note{margin:1.2em 0 0;font-size:12px;line-height:1.9;color:var(--ink-muted)}

.reveal__punch{
  max-width:32em;margin:clamp(36px,5vw,60px) 0 0;padding-left:1.1em;
  border-left:2px solid var(--brand);
  font-size:clamp(14px,1.75vw,19px);line-height:1.9;color:var(--brand);
}

/* 誇張しないための断り */
.reveal__honest{
  margin-top:clamp(32px,4.5vw,52px);padding:1.3em 1.5em;
  background:var(--paper-gray);
}
.reveal__honest-title{margin:0 0 .7em;font-size:10.5px;letter-spacing:.14em;color:var(--ink-muted)}
.reveal__honest p{margin:0;max-width:44em;font-size:12px;line-height:1.95;color:var(--ink-muted)}

@media (prefers-reduced-motion: reduce){
  .demo__chip{transition:none}
}

/* ===== トピック記事 一覧（/topics/） =====
   **Samples の一覧と作りを変えている。** あちらは「触る」ための導線なので
   サムネイルが主役だが、記事は「読む」もの。日付・タイトル・要約が先に読める順にし、
   アイキャッチが無くても欠けて見えないようにしてある。

   カードを箱で囲わず、罫線で区切るだけにしているのは、
   囲うと1件ずつが「商品」に見え、読み物の列に見えなくなるため。 */

/* 一覧は読み物。1180px いっぱいに広げると1行が長くなりすぎる。 */
.topics{list-style:none;margin:0;padding:0;max-width:960px}
.topics__item{border-top:1px solid var(--line)}
.topics__item:last-child{border-bottom:1px solid var(--line)}

.topic-card__link{
  display:grid;grid-template-columns:1fr;gap:clamp(16px,2.4vw,32px);
  padding-block:clamp(24px,3.4vw,40px);
  text-decoration:none;color:inherit;
}
/* 画像があるときだけ2列。無いときは本文が全幅を使う（穴を残さない）。 */
@media (min-width:720px){
  .topic-card.has-thumb .topic-card__link{grid-template-columns:1fr minmax(0,232px)}
}

.topic-card__body{min-width:0}
.topic-card__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6em 1em;
  margin:0 0 .9em;line-height:1.6;
}
.topic-card__date{
  font-family:var(--font-display);
  font-size:12px;letter-spacing:.08em;color:var(--ink-muted);
}
.topic-card__cat{
  padding:.25em .8em;
  border:1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  font-size:10.5px;letter-spacing:.06em;line-height:1.6;color:var(--brand);
}
.topic-card__title{
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(17px,2.2vw,23px);font-weight:300;line-height:1.65;
  letter-spacing:.02em;margin:0 0 .6em;color:var(--ink);
  transition:color .25s ease;
}
.topic-card__link:hover .topic-card__title{color:var(--brand)}
/* 要約は3行で打ち切る。長さが揃わないと列としての見通しが悪くなる。 */
.topic-card__text{
  margin:0;font-size:13px;line-height:1.95;color:var(--ink-muted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.topic-card__cta{
  margin:1.1em 0 0;
  font-size:12px;letter-spacing:.06em;color:var(--brand);
}
.topic-card__cta::after{content:" \2192"}

.topic-card__thumb{
  overflow:hidden;background:var(--paper-tint);
  aspect-ratio:16 / 10;
}
.topic-card__thumb-img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.9,.3,1);
}
.topic-card__link:hover .topic-card__thumb-img{transform:scale(1.03)}

/* ページ送り */
.pagination{margin-top:clamp(40px,6vw,72px)}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:.6em;align-items:center}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.6em;padding:.6em .8em;
  border:1px solid var(--line);text-decoration:none;
  font-family:var(--font-display);font-size:12.5px;letter-spacing:.06em;color:var(--ink-muted);
}
.pagination a.page-numbers:hover{border-color:var(--brand);color:var(--brand)}
.pagination .page-numbers.current{background:var(--brand);border-color:var(--brand);color:#fff}
.pagination .page-numbers.dots{border-color:transparent}

@media (prefers-reduced-motion: reduce){
  .topic-card__title,
  .topic-card__thumb-img{transition:none}
  .topic-card__link:hover .topic-card__thumb-img{transform:none}
}

/* ===== トピック記事 1件（/topics/{slug}/） ===== */

/* トピックだけ版面を変える。**--measure をグローバルに書き換えない。**
   --measure（68ch）は .entry-content 経由で固定ページとサンプル詳細にも効いていて、
   触ると全ページの版面が動く。ここでは .tpc の中だけに効く変数を新しく足す。

   WCAG 2.1 SC 1.4.8 は CJK の行長の上限を 40字としている。
   本文 18px × 40字 = 720px で、「本文幅は最低 720px ほしい」という要望とちょうど一致する。
   だから --measure-jp は em ではなく「本文の字送り × 40」で作る。
   em にすると、字の大きさが違うヘッダと本文で幅がずれて左端が揃わない。 */
.tpc{
  --content-size:clamp(16px, 0.37vw + 14.24px, 18px);  /* 480px で 16px ／ 1024px 以上で 18px */
  --content-flow:1.7em;                                 /* 段落が単位として見えること */
  --measure-jp:calc(40 * var(--content-size));          /* 1024px 以上でちょうど 720px */
}

/* **見出しと本文の左端を揃える。** .shell のままだと本文（--measure-jp で中央寄せ）と
   ずれて、題名だけが外に飛び出して見える。
   .tpc .entry-content と入れ子で書くのは、.tpc__body と .entry-content が
   同じクラス数で「後に書いたほうが勝つ」状態を作らないため。 */
.tpc__head,
.tpc__foot{max-width:min(var(--measure-jp), var(--shell))}
.tpc__thumb,
.tpc__toc,
.tpc .entry-content{max-width:min(var(--measure-jp), 100%);margin-inline:auto}
.tpc__head{padding-block:clamp(48px,8vw,96px) clamp(28px,4vw,44px)}

/* ヘッダの地。**全幅の面にする。** 背景が無いと本文と地続きで、
   「どこまでがタイトル部か」が視覚的に存在しない。
   /topics/ 一覧のヘッダ（.arc__head）と同じ色なので、遷移で面の色が繋がる。 */
.tpc__masthead{background:var(--paper-tint)}

/* アイキャッチ・目次・本文の器。狭い画面ではただの縦積み。 */
.tpc__main{width:var(--shell);margin-inline:auto}
.tpc__eyebrow{
  font-family:var(--font-display);
  font-size:11px;letter-spacing:.3em;line-height:1;
  margin:0 0 1.8em;color:var(--brand);
}
.tpc__title{
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(26px,4.2vw,42px);font-weight:300;line-height:1.5;
  letter-spacing:.02em;margin:0 0 .9em;color:var(--ink);
}
.tpc__meta{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em 1.6em;
  margin:0;font-size:13px;line-height:1.8;color:var(--ink-muted);
}
/* 「公開」「更新」「カテゴリー」の札。小さいが本文と同じ濃さを保つ（4.5:1 を割らない）。 */
.tpc__meta-k{
  margin-right:.7em;
  font-size:10.5px;letter-spacing:.14em;color:var(--ink-muted);
}
.tpc__date time{font-family:var(--font-display);letter-spacing:.06em}
.tpc__cats a{color:var(--brand);text-decoration:none;border-bottom:1px solid transparent}
.tpc__cats a:hover{border-bottom-color:currentColor}

/* リード（抜粋）。**ページの中で唯一「本文より大きい」テキスト。**
   色を薄くして区別するのをやめる。--ink-muted は「本文より弱いもの」専用に予約し、
   リード（本文より強い）と引用（他者の文）には使わない。
   地の色が違う面の中にあること＋本文より大きいこと、の2軸で本文と分かれる。 */
.tpc__lead{
  max-width:none;margin:1.6em 0 0;
  padding-top:1.5em;border-top:1px solid color-mix(in srgb, var(--brand) 20%, transparent);
  font-size:clamp(17px,1.6vw,22px);line-height:1.95;letter-spacing:.01em;
  color:var(--ink);
}

/* アイキャッチ。**比率を固定する。** width/height だけだと記事ごとに高さが変わり、
   読み始めの位置が毎回ずれる。max-height は併用しない（aspect-ratio と喧嘩する）。 */
.tpc__thumb{
  margin:clamp(28px,4vw,44px) auto 0;
  background:var(--paper-tint);
}
.tpc__thumb-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.tpc__thumb figcaption{
  margin-top:.9em;font-size:12.5px;line-height:1.85;color:var(--ink-muted);
}

/* 目次。h2 が3つ以上のときだけテンプレート側が出す。
   本文の前に1か所だけ置き、広い画面ではこれを左余白へ逃がす（下のメディアクエリ）。 */
.tpc__toc{
  margin-top:clamp(32px,5vw,52px);
  padding:1.4em 0 0;border-top:1px solid var(--line);
}
.tpc__toc-k{
  margin:0 0 1em;
  font-family:var(--font-display);
  font-size:11px;letter-spacing:.24em;line-height:1;color:var(--brand);
}
/* 番号は ::before ではなく ::marker で出す。
   ::before の生成テキストは読み上げに乗ってしまうが、リストの番号は
   <ol> であること自体が既に伝えている。**同じことを2回言わせない。**
   折り返した行が番号の下に潜らないよう、padding でぶら下げる。 */
.tpc__toc-list{
  margin:0;padding-left:2.4em;
  list-style:decimal-leading-zero;
}
.tpc__toc-item{
  margin-block:.55em;font-size:13.5px;line-height:1.8;
}
/* マーカーは装飾なのでコントラスト要件の対象外（リンク文字は --ink で 12.6:1）。 */
.tpc__toc-item::marker{
  font-family:var(--font-display);font-size:10.5px;
  color:var(--brand-mid);
}
.tpc__toc-item a{
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid transparent;
}
.tpc__toc-item a:hover{border-bottom-color:var(--brand-mid)}

.tpc__body{padding-block:clamp(32px,5vw,56px) clamp(32px,5vw,56px)}

.tpc__foot{padding-bottom:clamp(40px,6vw,72px)}
.tpc__tags{
  display:flex;flex-wrap:wrap;gap:.6em;margin:0;
  padding-top:1.4em;border-top:1px solid var(--line);
}
.tpc__tags a{
  padding:.35em .9em;border:1px solid var(--line);
  font-size:11.5px;letter-spacing:.04em;line-height:1.7;
  color:var(--ink-muted);text-decoration:none;
}
.tpc__tags a:hover{border-color:var(--brand-mid);color:var(--ink)}

/* 関連記事。0件のときはテンプレート側で節ごと出さない。 */
.tpc__rel{background:var(--paper-tint);padding-block:clamp(48px,8vw,88px)}
.tpc__rel-inner{max-width:720px}
.tpc__rel-title{
  margin:0 0 2em;
  font-size:12px;letter-spacing:.2em;font-weight:400;color:var(--ink-muted);
}
.tpc__rel .topics__item{border-top-color:color-mix(in srgb, var(--brand) 14%, transparent)}
.tpc__rel .topics__item:last-child{border-bottom-color:color-mix(in srgb, var(--brand) 14%, transparent)}

/* ===== 記事本文（エディタが吐く HTML） =====
   ここまでの節は PHP で組んだ固定のマークアップだが、記事だけは編集画面から来る。
   **何が来ても読める**ことが要件なので、見出し・表・引用・コードまで受けておく。 */

/* 字の大きさも変数ごしに受ける。**既定値は現行のまま。**読み物（.tpc）だけが 18px に上げる。
   ここを直接書き換えると固定ページとサンプル詳細の版面まで動く。 */
.entry-content{font-size:var(--content-size, clamp(14px,1.5vw,15.5px));line-height:2.05}
.entry-content h2{
  margin-block:2.4em .9em;padding-top:.9em;border-top:1px solid var(--line);
  font-size:clamp(19px,2.6vw,26px);font-weight:300;line-height:1.6;letter-spacing:.02em;
  word-break:auto-phrase;
}
.entry-content h3{
  margin-block:2em .7em;
  font-size:clamp(16px,2vw,20px);font-weight:400;line-height:1.7;
  word-break:auto-phrase;
}
.entry-content h4{margin-block:1.8em .6em;font-size:15px;font-weight:400;line-height:1.8}
.entry-content > *:first-child{margin-block-start:0}

.entry-content a{
  color:var(--brand);
  text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb, var(--brand) 40%, transparent);
}
.entry-content a:hover{text-decoration-color:currentColor}

.entry-content ul,.entry-content ol{padding-left:1.4em}
.entry-content li{margin-block:.4em}
.entry-content li::marker{color:var(--brand-mid)}

.entry-content blockquote{
  margin-inline:0;padding-left:1.2em;border-left:2px solid var(--line);
  color:var(--ink-muted);
}
.entry-content blockquote > * + *{margin-block-start:1em}

.entry-content figure{margin-inline:0}
.entry-content figcaption{margin-top:.8em;font-size:11.5px;line-height:1.85;color:var(--ink-muted)}
.entry-content img{display:block;height:auto}

.entry-content code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em;background:var(--paper-tint);padding:.15em .45em;
}
.entry-content pre{
  overflow-x:auto;padding:1.2em 1.4em;background:var(--paper-tint);
  font-size:12.5px;line-height:1.85;
}
.entry-content pre code{background:none;padding:0}

.entry-content hr{border:0;border-top:1px solid var(--line);margin-block:2.4em}

/* 判断表。inc/text.php が .entry-table で包む。
   **狭い画面では列を潰さず、表だけを横に送る。** 潰すと判断表として読めなくなる。 */
.entry-content .entry-table{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin-block:1.6em;
}
/* ブロックエディタの figure も同じ受け皿の中に入る。スクロールを二重に作らない。 */
.entry-table .wp-block-table{overflow-x:visible;margin:0}
.entry-table .wp-block-table figcaption{margin-top:.8em}

.entry-content table{
  width:100%;min-width:26em;border-collapse:collapse;
  font-size:13px;line-height:1.85;
}
.entry-content th,.entry-content td{
  padding:.85em 1em;border-bottom:1px solid var(--line);
  text-align:left;vertical-align:top;
}
.entry-content thead th{
  border-bottom:1px solid var(--brand);
  font-weight:400;font-size:11.5px;letter-spacing:.08em;color:var(--brand);
  white-space:nowrap;
}
.entry-content tbody th{font-weight:400;color:var(--ink)}
.entry-content table caption{
  caption-side:top;text-align:left;margin-bottom:.8em;
  font-size:11.5px;color:var(--ink-muted);
}

/* 分割された記事のページ送り（<!--nextpage-->） */
.page-links{margin-top:2.4em;display:flex;flex-wrap:wrap;gap:.6em;font-size:12.5px}

/* 見出しへのリンク。**常に出しておくと本文の視線を奪う**ので、
   見出しに触れたときとキーボードで到達したときだけ見せる。
   :focus-visible は消さない（このリンクは Tab で必ず通る）。 */
.entry-anchor{
  margin-left:.4em;
  color:var(--brand-mid);text-decoration:none;
  font-size:.7em;vertical-align:.12em;
  opacity:0;transition:opacity .2s ease;
}
.entry-content h2:hover .entry-anchor,
.entry-content h3:hover .entry-anchor,
.entry-anchor:focus-visible{opacity:1}
.entry-anchor:hover{color:var(--brand)}
/* 指で触る画面ではホバーが無い。常に薄く出しておく。 */
@media (hover:none){
  .entry-anchor{opacity:.45}
}
@media (prefers-reduced-motion: reduce){
  .entry-anchor{transition:none}
}

/* ===== 読み物としての本文（トピックだけ） =====
   **1つの要素は、他と2つ以上の軸で違うこと。**色だけで区別しない。
   リード ＝ 唯一「本文より大きい」／ h2 ＝ 唯一「上に罫線」／ blockquote ＝ 唯一「左に濃い罫」。 */

/* h2。罫線と見出しが近すぎると、罫が h2 のものではなく前の段落の区切りに見える。 */
.tpc .entry-content h2{
  padding-top:1.2em;
  color:var(--brand);
}

/* 引用。**--ink-muted をやめる。** 薄い字にするとリードや注記と見分けが付かない。
   他者の文であることは「左の濃い罫」だけで示し、字の濃さは本文と同じに戻す。
   罫が var(--line)（#E9E9E9）のままでは白地でほとんど見えず、何も示せていなかった。 */
.tpc .entry-content blockquote{
  padding-left:1.4em;
  border-left:2px solid var(--brand);
  color:var(--ink);
}
/* 出典。引用本文と同じ濃さだと、引用の続きとして読まれる。ここは「本文より弱いもの」。 */
.tpc .entry-content blockquote cite{
  display:block;margin-top:.8em;
  font-size:13px;font-style:normal;line-height:1.8;color:var(--ink-muted);
}
.tpc .entry-content blockquote cite::before{content:"— "}

/* 図の説明。本文が 18px になったぶん、11.5px では小さすぎる。 */
.tpc .entry-content figcaption{font-size:13px}

/* ===== 広い画面では目次を左余白へ逃がす =====
   **本文幅は一切圧迫しない。**中央の列は 720px のまま、左右に等しい余白を割る。
   行と列を明示するのは、自動配置だと目次がアイキャッチの行に入ってしまい、
   sticky が効く範囲がアイキャッチの高さで終わるため。 */
@media (min-width:1200px){
  .tpc__main{
    /* 目次のぶんだけ器を広げる。中央の列は左右 1fr が等しいので、本文は画面の中央に留まる。 */
    width:min(1320px, 100% - var(--gap) * 2);
    display:grid;
    grid-template-columns:minmax(0,1fr) min(var(--measure-jp), 100%) minmax(0,1fr);
    grid-template-rows:auto 1fr;
    column-gap:clamp(20px,2.4vw,40px);
    align-items:start;
  }
  .tpc__thumb{grid-column:2;grid-row:1}
  .tpc__body{grid-column:2;grid-row:2}
  .tpc__toc{
    grid-column:1;grid-row:2;
    justify-self:end;width:100%;
    margin-top:clamp(32px,5vw,56px);
    /* 固定ヘッダーの下に潜らせない。管理バーが出ているときはその分も足す。 */
    position:sticky;
    top:calc(var(--admin-bar-h, 0px) + var(--header-h) + 24px);
    max-height:calc(100dvh - var(--admin-bar-h, 0px) - var(--header-h) - 48px);
    overflow-y:auto;
    border-top:0;padding-top:0;
  }
  .tpc__toc-item{font-size:12.5px;line-height:1.7;margin-block:.7em}
}

/* ===== トピックカテゴリのハブ（/topics/{category}/） =====
   **単なる記事リストにしない**（docs/07-content.md 5-3）。
   導入文・まず読む1本・関連サービスが、このページの固有の中身になる。 */

/* 導入文の2段落目以降。1段落目より少し小さくして、定義とその補足の関係を見せる。 */
.arc__lead--sub{margin-top:1.2em;font-size:clamp(13px,1.4vw,14.5px)}

/* カテゴリの絞り込み。**カテゴリが1つのあいだはテンプレート側で出さない。** */
.topics-tax{margin-bottom:clamp(24px,3.4vw,40px)}
.topics-tax__list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.6em;
}
.topics-tax__list a{
  display:inline-block;padding:.5em 1.1em;
  border:1px solid var(--line);text-decoration:none;
  font-size:12.5px;letter-spacing:.04em;line-height:1.7;color:var(--ink-muted);
}
.topics-tax__list a:hover{border-color:var(--brand);color:var(--brand)}

/* まず読む1本。**一覧の中の1件に見えたら役目を果たさない**ので、
   罫線ではなく面で囲う。ここだけ作りを変えているのは意図。 */
.pillar{
  max-width:960px;margin:0 0 clamp(28px,4vw,44px);
  padding:clamp(20px,2.8vw,32px);
  background:var(--paper-tint);
  border-left:2px solid var(--brand);
}
.pillar__label{
  margin:0 0 .9em;
  font-size:11px;letter-spacing:.2em;line-height:1;color:var(--brand);
}
.pillar__link{display:block;text-decoration:none;color:inherit}
.pillar__title{
  display:block;word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(17px,2.2vw,22px);font-weight:300;line-height:1.65;letter-spacing:.02em;
  color:var(--ink);transition:color .25s ease;
}
.pillar__link:hover .pillar__title{color:var(--brand)}
.pillar__text{
  display:block;margin-top:.8em;
  font-size:13px;line-height:1.95;color:var(--ink-muted);
}
.tpc__pillar{padding-block:clamp(40px,6vw,72px) 0;max-width:720px}
@media (prefers-reduced-motion: reduce){
  .pillar__title{transition:none}
}

/* 関連サービス（回遊の層3）。**記事が0本でも出る節。**
   CTA の直前に来るので、ボタンは置かない。並ぶと両方弱くなる。 */
.tpc-next{padding-block:clamp(48px,7vw,80px) 0}
.tpc-next__inner{max-width:720px}
.tpc-next__title{
  margin:0 0 1.2em;
  font-size:12px;letter-spacing:.2em;font-weight:400;color:var(--ink-muted);
}
.tpc-next__text{margin:0;font-size:14px;line-height:2;color:var(--ink-muted)}
.tpc-next__link{margin:1.2em 0 0;font-size:14.5px}
.tpc-next__link a{
  color:var(--brand);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  padding-bottom:.15em;
}
.tpc-next__link a::after{content:" \2192"}
.tpc-next__link a:hover{border-bottom-color:currentColor}

/* 著者欄。**役職が空でも名前は出す**（ユーザー判断・2026-09-15）。
   顔写真は置かない。事実はテキストで書く（docs/04-seo.md LLMO）。 */
.tpc__author{padding-top:1.6em;border-top:1px solid var(--line)}
.tpc__author-k{
  margin:0 0 .8em;
  font-size:10.5px;letter-spacing:.14em;color:var(--ink-muted);
}
.tpc__author-id{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4em 1em;margin:0}
.tpc__author-n{font-size:15px;line-height:1.8;color:var(--ink)}
.tpc__author-a{font-size:12.5px;line-height:1.8;color:var(--ink-muted)}
.tpc__author-bio{margin:.9em 0 0;font-size:13px;line-height:1.95;color:var(--ink-muted)}

/* 記事上部のメタ行に並ぶ著者名。日付と同じ扱いにする。 */
.tpc__author-name{color:var(--ink-muted)}

/* カテゴリ名の冠はリンクになる。下線は出さず、色で示す。 */
.tpc__eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.tpc__eyebrow a:hover{border-bottom-color:currentColor}

/* ===== 一覧カード（制作実績・システムサンプル） ===== */
.card-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));list-style:none;margin:0;padding:0}
.card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper);transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(18,22,28,.08)}
.card a{text-decoration:none;display:block}
.card__body{padding:18px 20px 22px}
.card__title{font-family:var(--font-display);font-size:17px;font-weight:400;margin:0 0 .4em;line-height:1.5}
.card__summary{font-size:14px;color:var(--ink-muted);margin:0}

/* ===== ページ遷移 =====
   Chrome 126+ / Safari 18.2+ で有効。Firefox は未対応だが、
   その場合は従来どおりの遷移になるだけで壊れない。 */
/* ------------------------------------------------------------------
   プライバシーポリシー（page-privacy.php）

   法務の文章はふつう読まれない。読ませようとして飾るのではなく、
   **探している一節にすぐ着く**ことだけを狙う。見出しに番号を振り、
   行間を広く取り、幅を詰める。サイトの他の場所と同じ細い罫で組む。

   越境移転の節（--mark）だけ、地色を敷いて浮かせる。
   ここだけは読み飛ばされると困る。
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   お問い合わせ（page-contact.php）

   フォームは JetFormBuilder の出力に CSS を被せる（ADR-011）。
   掴むクラスは実物から採った `.jet-form-builder__*`。
   **プラグイン側の見た目は使わない。**サイトの罫と余白に合わせ直す。

   要は「ご用件」のラジオ。ここが3つの分岐の入口なので、
   小さな丸ではなく**押せる面**として組む。
   ------------------------------------------------------------------ */
.ct{padding-block:clamp(32px,5vw,56px) clamp(64px,9vw,120px)}

.ct__head{margin:0 0 clamp(30px,4vw,44px)}
.ct__title{
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(28px,4.4vw,46px);font-weight:300;line-height:1.35;
  letter-spacing:.02em;margin:0 0 .7em;color:var(--ink);
}
.ct__lead{
  max-width:34em;margin:0;
  font-size:clamp(14px,1.6vw,16px);line-height:2.05;color:var(--ink-muted);
}

/* 診断の案内 */
.ct__pitch{
  max-width:min(48em,100%);
  padding:clamp(24px,3.4vw,34px) clamp(20px,3vw,32px);
  background:var(--paper-tint);border-radius:2px;
  margin-bottom:clamp(36px,5vw,56px);
}
.ct__pitch-eyebrow{
  margin:0 0 .8em;font-family:var(--font-display);
  font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand);
}
.ct__pitch-title{
  word-break:auto-phrase;
  font-size:clamp(16px,2vw,20px);font-weight:600;line-height:1.7;
  letter-spacing:.02em;margin:0 0 1em;color:var(--ink);
}
.ct__pitch p{
  word-break:auto-phrase;
  font-size:14px;line-height:2.05;margin:0 0 1.1em;color:var(--ink);
}
.ct__pitch p:last-child{margin-bottom:0}

.ct__form{max-width:min(48em,100%)}
.ct__missing{
  padding:1em 1.2em;border-left:3px solid #b23;background:#fff6f6;
  font-size:13px;line-height:1.9;color:#a22;
}

/* ── JetFormBuilder の出力を site の組みに合わせる ───────────── */
.ct__form .jet-form-builder__field-wrap{display:block}
.ct__form fieldset{margin:0;padding:0;border:0;min-width:0}

.ct__form .jet-form-builder__label,
.ct__form .jet-form-builder__field-label,
.ct__form legend.jet-form-builder__label{
  display:block;margin:0 0 .7em;
  font-size:13px;font-weight:600;line-height:1.7;letter-spacing:.03em;
  color:var(--ink);word-break:auto-phrase;
}
/* 必須の印。文字列そのものは _jf_args の required_mark（「必須」）から来る。
   色だけに頼らず、語で示す */
.ct__form .jet-form-builder__required{
  display:inline-block;
  margin-left:.6em;padding:.25em .6em;border-radius:2px;
  background:var(--brand);color:#fff;
  font-size:9.5px;font-weight:500;letter-spacing:.08em;line-height:1;
  vertical-align:.18em;
}

.ct__form .jet-form-builder__desc{margin:.6em 0 0}
.ct__form .jet-form-builder__desc small{
  font-size:12px;line-height:1.9;color:var(--ink-muted);word-break:auto-phrase;
}
.ct__form .jet-form-builder__desc a{color:var(--brand)}

/* 入力欄 */
.ct__form input[type=text],
.ct__form input[type=email],
.ct__form input[type=url],
.ct__form input[type=tel],
.ct__form select,
.ct__form textarea{
  width:100%;box-sizing:border-box;
  padding:.85em 1em;
  border:1px solid var(--line);border-radius:2px;background:#fff;
  font-family:inherit;font-size:15px;line-height:1.8;color:var(--ink);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.ct__form textarea{min-height:8.5em;resize:vertical}
.ct__form input:focus,
.ct__form select:focus,
.ct__form textarea:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(61,78,100,.12);
}
.ct__form ::placeholder{color:#aab1b9}

/* 各項目の間隔。プラグインの既定より広く取る */
.ct__form .jet-form-builder-row,
.ct__form > form > *,
.ct__form .jet-form-builder__conditional > *{margin-block:0 clamp(24px,3vw,30px)}

/* ラジオ・チェックの並び */
.ct__form .jet-form-builder__fields-group{
  display:flex;flex-direction:column;gap:.55em;
}
.ct__form .jet-form-builder__fields-group .jet-form-builder__field-label{
  display:flex;gap:.7em;align-items:flex-start;
  font-size:14px;line-height:1.85;color:var(--ink);cursor:pointer;
  word-break:auto-phrase;
}
.ct__form .jet-form-builder__fields-group input{
  flex:none;margin:.42em 0 0;accent-color:var(--brand);
}
/* 行ラベル（.jet-form-builder__field-label）は見出しラベルと別物。
   見出し側の 13px/600 を継がせない */
.ct__form .jet-form-builder__fields-group .jet-form-builder__field-label{
  font-size:14px;font-weight:400;
}

/* 「ご用件」だけは押せる面にする。ここが分岐の入口。
   class_name / className はラッパーではなく input に付く（実測）ので、
   :has() で行そのものを掴む */
.ct__form .jet-form-builder-row:has(.ct-intent) .jet-form-builder__fields-group{gap:.6em}
.ct__form .jet-form-builder-row:has(.ct-intent) .jet-form-builder__field-label{
  padding:1.05em 1.2em;
  border:1px solid var(--line);border-radius:2px;background:#fff;
  transition:border-color .18s ease,background-color .18s ease;
}
.ct__form .jet-form-builder-row:has(.ct-intent) .jet-form-builder__field-label:hover{border-color:var(--brand-mid)}
.ct__form .jet-form-builder-row:has(.ct-intent) .jet-form-builder__field-label:has(input:checked){
  border-color:var(--brand);background:var(--paper-tint);
}
.ct__form .jet-form-builder-row:has(.ct-intent) .jet-form-builder__field-label:has(input:focus-visible){
  box-shadow:0 0 0 3px rgba(61,78,100,.12);
}

/* 同意欄 */
.ct__form .jet-form-builder-row:has(.ct-consent) .jet-form-builder__desc{margin-top:.6em}

/* 条件で出入りする塊。切り替わったことが分かるよう、左に細い罫を引く */
.ct__form .jet-form-builder__conditional{
  padding-left:clamp(14px,2vw,20px);
  border-left:2px solid var(--paper-gray);
}
.ct__form .ct-form__note{
  margin:0 0 clamp(22px,2.6vw,26px);
  font-size:13px;line-height:2;color:var(--ink-muted);word-break:auto-phrase;
}
.ct__form .ct-form__note strong{color:var(--ink);font-weight:600}

/* 送信 */
.ct__form .jet-form-builder__action-button,
.ct__form button[type=submit],
.ct__form input[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:14em;padding:1.05em 2.4em;
  border:1px solid var(--brand);border-radius:2px;
  background:var(--brand);color:#fff;cursor:pointer;
  font-family:var(--font-display);font-size:14px;font-weight:500;letter-spacing:.08em;
  transition:background-color .18s ease,color .18s ease;
}
.ct__form .jet-form-builder__action-button:hover,
.ct__form button[type=submit]:hover{background:#314053;border-color:#314053}
.ct__form button[type=submit]:disabled{opacity:.5;cursor:default}

/* 送信後・エラーの文言 */
.ct__form .jet-form-builder__submit-message,
.ct__form .jet-form-builder-message{
  padding:1.1em 1.3em;border-radius:2px;
  font-size:14px;line-height:1.95;word-break:auto-phrase;
}
.ct__form .jet-form-builder-message--success{background:var(--paper-tint);color:var(--ink)}
.ct__form .jet-form-builder-message--error{background:#fff6f6;color:#a22}

/* 送信後の案内 */
.ct__after{
  max-width:min(48em,100%);
  margin-top:clamp(40px,5.5vw,64px);padding-top:clamp(22px,3vw,30px);
  border-top:1px solid var(--line);
}
.ct__after-dl{margin:0;font-size:13px;line-height:2.05}
.ct__after-dl dt{font-weight:600;color:var(--ink-muted);font-size:12px;letter-spacing:.04em}
.ct__after-dl dd{margin:0 0 1.1em;color:var(--ink);word-break:auto-phrase}
.ct__after-dl dd:last-child{margin-bottom:0}
.ct__after-dl a{color:var(--brand)}

@media (min-width:721px){
  .ct__after-dl{display:grid;grid-template-columns:8em 1fr;column-gap:2em}
  .ct__after-dl dd{margin-bottom:.9em}
}

/* フッターのプライバシーポリシー。音符ではないので、控えめに置く */
.site-footer__legal{margin:0;margin-inline-end:auto;font-size:11.5px;letter-spacing:.04em;line-height:1.9}
.site-footer__legal a{color:rgba(255,255,255,.62);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.26);padding-bottom:1px}
.site-footer__legal a:hover,.site-footer__legal a:focus-visible{color:#fff;border-bottom-color:rgba(255,255,255,.7)}

.legal{padding-block:clamp(32px,5vw,56px) clamp(64px,9vw,120px)}

.legal__head{margin:0 0 clamp(36px,5vw,60px)}
.legal__title{
  word-break:auto-phrase;
  font-family:var(--font-display);
  font-size:clamp(28px,4.4vw,46px);font-weight:300;line-height:1.35;
  letter-spacing:.02em;margin:0 0 .7em;color:var(--ink);
}
.legal__lead{
  max-width:34em;margin:0;
  font-size:clamp(14px,1.6vw,16px);line-height:2.05;color:var(--ink-muted);
}

.legal__body{counter-reset:legal;max-width:min(48em, 100%)}

.legal__sec{
  counter-increment:legal;
  padding-block:clamp(26px,3.6vw,38px);
  border-top:1px solid var(--line);
}
.legal__sec:first-child{border-top:0;padding-top:0}

.legal__h{
  display:flex;gap:.7em;align-items:baseline;
  word-break:auto-phrase;
  font-size:clamp(17px,2.1vw,21px);font-weight:600;line-height:1.55;
  letter-spacing:.02em;margin:0 0 1.1em;color:var(--ink);
}
/* 番号は欧文の数字で。見出しの語より一段小さく、色を落とす */
.legal__h::before{
  content:counter(legal,decimal-leading-zero);
  flex:none;
  font-family:var(--font-display);font-size:.72em;font-weight:400;
  letter-spacing:.08em;color:var(--brand);opacity:.7;
}

.legal__h3{
  word-break:auto-phrase;
  font-size:14px;font-weight:600;line-height:1.7;letter-spacing:.02em;
  margin:2em 0 .7em;color:var(--ink);
}
.legal__h3:first-of-type{margin-top:0}

.legal__body p{
  word-break:auto-phrase;
  font-size:14px;line-height:2.1;margin:0 0 1.4em;color:var(--ink);
}
.legal__body p:last-child{margin-bottom:0}

.legal__ul{margin:0 0 1.4em;padding-left:1.25em}
.legal__ul li{
  word-break:auto-phrase;
  font-size:14px;line-height:2.1;color:var(--ink);margin-bottom:.35em;
}
.legal__ul li::marker{color:var(--brand);opacity:.6}

/* 定義リストは PC で2段。項目名が短いので左に寄せて読み分けさせる */
.legal__dl{margin:0;font-size:14px;line-height:2.1}
.legal__dl dt{
  font-weight:600;color:var(--ink-muted);
  font-size:12.5px;letter-spacing:.04em;
}
.legal__dl dd{margin:0 0 1.2em;color:var(--ink);word-break:auto-phrase}
.legal__dl dd:last-child{margin-bottom:0}
.legal__en{color:var(--ink-muted);font-size:.92em}

@media (min-width:721px){
  .legal__dl{display:grid;grid-template-columns:8.5em 1fr;column-gap:2em;row-gap:0}
  .legal__dl dt{padding-top:.05em}
  .legal__dl dd{margin-bottom:1em}
}

/* 越境移転。ここだけ地色を敷く */
.legal__sec--mark{
  position:relative;
  margin-block:clamp(10px,1.6vw,16px);
  padding:clamp(26px,3.6vw,38px) clamp(20px,3vw,34px);
  background:var(--paper-tint);border-top:0;border-radius:2px;
}
.legal__sec--mark + .legal__sec{border-top:0}
.legal__sec--mark .legal__h::before{opacity:1}

.legal__note{
  padding-left:1em;border-left:2px solid var(--brand);
}
.legal__note strong{font-weight:600}

.legal__date{
  margin:clamp(36px,5vw,56px) 0 0;padding-top:clamp(18px,2.4vw,24px);
  border-top:1px solid var(--line);
  font-size:12px;line-height:2;letter-spacing:.04em;color:var(--ink-muted);
}

/* エディタで足した分は、ここまでと同じ組みに揃える */
.legal__sec--extra h2{
  font-size:clamp(17px,2.1vw,21px);font-weight:600;line-height:1.55;
  letter-spacing:.02em;margin:0 0 1.1em;word-break:auto-phrase;
}

@view-transition{ navigation: auto; }
@media (prefers-reduced-motion: reduce){
  @view-transition{ navigation: none; }
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}