/* すべて .ax- 接頭辞でスコープ。既存CSSに影響しない */
.ax-page{
  --ax-red:#d0111b;            /* at OFFICE ブランドレッド */
  --ax-red2:#e8323d;           /* hover */
  --ax-gray:#8A9099;           /* 概念図の対比側ニュートラルグレー */
  --ax-bg0:#05070c;            /* 最深部 */
  --ax-bg1:#0a0e16;            /* 深部 */
  --ax-bg2:#10151f;            /* パネル */
  --ax-line:#1c2330;           /* 暗部罫線 */
  --ax-txt:#e9edf3;            /* 明るい本文 */
  --ax-dim:#a4adba;            /* 暗い本文 */
  --ax-mute:#65707f;           /* さらに暗い */
  --ax-paper:#f3f2ee;          /* 現実レイヤー（生成り） */
  --ax-ink:#1a1c20;            /* 現実レイヤーの文字 */
  --ax-pline:#dedbd2;          /* 明部罫線 */
  --ax-serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --ax-sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"Yu Gothic",sans-serif;
  --ax-anchor:96px;
  font-family:var(--ax-sans);
  color:var(--ax-txt);font-size:16px;line-height:2.0;letter-spacing:.02em;
  background:var(--ax-bg0);position:relative;
  /* stickyの罠対策: hiddenはスクロールコンテナを作るためclipで上書きする */
  overflow-x:hidden;overflow-x:clip}
.ax-page *{box-sizing:border-box}
.ax-page img{max-width:100%;height:auto;display:block}
.ax-page a{color:inherit}
.ax-page ::selection{background:rgba(208,17,27,.8);color:#fff}

/* ---- 意味改行ユーティリティ ----
   .ax-nw   数字＋単位・固有名詞など、途中で折り返してはいけない塊
   .ax-brPc PCのみ有効な改行（768px以下では消える）
   .ax-brSp SPのみ有効な改行（769px以上では消えない→非表示） */
.ax-nw{white-space:nowrap}
.ax-brSp{display:none}
@media (max-width:768px){
  .ax-brPc{display:none}
  .ax-brSp{display:inline}
}

/* ---- フィルム的グレイン（静的SVGノイズ + mix-blend。背景映像の上にも薄く乗る） ---- */
.ax-grain{position:fixed;inset:0;z-index:7;pointer-events:none;opacity:.42;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='220'%20height='220'%20filter='url(%23n)'%20opacity='0.55'/%3E%3C/svg%3E");
  background-size:220px 220px}

/* ---- 進捗レール（章立てUI・PC左端固定） ---- */
.ax-rail{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:20;padding:0 0 0 18px}
.ax-rail ol{list-style:none;margin:0;padding:0;counter-reset:axr}
.ax-rail li{counter-increment:axr}
.ax-rail a{display:flex;align-items:baseline;gap:10px;text-decoration:none;padding:8px 12px 8px 0;
  font-size:13.5px;letter-spacing:.08em;color:var(--ax-mute);line-height:1.5;
  transition:color .25s}
.ax-rail a::before{content:counter(axr,decimal-leading-zero);
  font-family:"SF Mono",Menlo,Consolas,monospace;font-size:11px;color:#39424f;
  transition:color .25s}
.ax-rail a:hover{color:var(--ax-dim)}
.ax-rail a.is-cur{color:var(--ax-txt);font-weight:700}
.ax-rail a.is-cur::before{color:var(--ax-red)}
.ax-rail.is-onlight a{color:#8a8577}
.ax-rail.is-onlight a.is-cur{color:var(--ax-ink)}

/* ---- SP用 上端スクロール進捗バー ---- */
.ax-progress{display:none}

/* ============================================================
   余白のリズム — 全セクション同一パディングをやめ、章ごとに呼吸を変える
     ヒーロー: 全画面(100svh)で見せる
     01 なぜ承継会社か: 最大に空ける（論点2本＋概念図の章。前後200pxの深呼吸）
     02 7つの事業: 長い章。やや広め＋章内の小刻みなリズムで読ませる
     つなぎ: 写真帯CTA（余白ではなく写真で呼吸）
     03 代表: 大きく空ける（紙のレイヤー）
     04 記録: 標準
     05 相談: 大きく空けて着地
     06 事業者情報: 詰める
   ============================================================ */
.ax-sec{padding:var(--ax-pt,140px) 8vw var(--ax-pb,140px);
  scroll-margin-top:var(--ax-anchor);position:relative;overflow:hidden}
.ax-whysec{--ax-pt:200px;--ax-pb:200px}
.ax-svcsec{--ax-pt:170px;--ax-pb:150px}
.ax-ceo{--ax-pt:185px;--ax-pb:175px}
.ax-record{--ax-pt:120px;--ax-pb:135px}
.ax-consult{--ax-pt:215px;--ax-pb:180px}
.ax-about{--ax-pt:92px;--ax-pb:92px}
.ax-w{max-width:1020px;margin:0 auto;position:relative;z-index:2}

/* ============================================================
   フォント階層 — サイズ差だけでなく「書体 × 太さ × 字間」の三対比
     見出し(h2) = 明朝・中太・字間広め（声）
     小見出し(kick) = 角ゴ・細・字間 .32em（構造ラベル）
     カード見出し(h3) = 角ゴ・極太・字間詰め（即物）
     本文 = 角ゴ・標準
   ============================================================ */
.ax-kick{font-size:11px;letter-spacing:.32em;color:var(--ax-dim);font-weight:400;margin:0 0 30px}
.ax-kick::before{content:"";display:inline-block;width:26px;height:1px;background:var(--ax-red);
  vertical-align:middle;margin-right:14px}
.ax-h2{font-family:var(--ax-serif);font-size:54px;font-weight:600;line-height:1.62;margin:0 0 30px;
  color:var(--ax-txt);letter-spacing:.06em}
.ax-lead{font-size:17px;color:var(--ax-dim);margin:0 0 60px;max-width:680px;letter-spacing:.03em}
.ax-h3{font-size:19px;font-weight:700;margin:0 0 10px;line-height:1.7;color:var(--ax-txt)}
.ax-sec--paper{background:var(--ax-paper);color:var(--ax-ink)}
.ax-sec--paper .ax-h2,.ax-sec--paper .ax-h3{color:var(--ax-ink)}
.ax-sec--paper .ax-lead{color:#5c5a52}
.ax-sec--paper .ax-kick{color:#6d6a60}

/* ---- 見出しのリビール（JSが入って .is-anim が付いてから初めて隠す。
        CSS単体・JS無効・reduced-motionでは常に全文可視） ---- */
.ax-page.is-anim .ax-rv{opacity:0;transform:translateY(22px)}
.ax-page.is-anim .ax-rv.is-in{opacity:1;transform:none;
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.ax-page.is-anim .ax-rv--wipe{opacity:0;transform:none;clip-path:inset(0 100% 0 0)}
.ax-page.is-anim .ax-rv--wipe.is-in{opacity:1;clip-path:inset(0 -4% 0 0);
  transition:clip-path 1s cubic-bezier(.3,.6,.2,1),opacity .4s ease}
.ax-page.is-anim .ax-rv--up{opacity:0;transform:none;clip-path:inset(100% 0 0 0)}
.ax-page.is-anim .ax-rv--up.is-in{opacity:1;clip-path:inset(-6% 0 0 0);
  transition:clip-path .9s cubic-bezier(.25,.8,.25,1),opacity .3s ease}
/* ---- 蛍光ペン（.ax-mk） ----
   大事な一文に引く。画面に入ると左から右へ引かれる。
   文字の下側にだけ敷くので、白文字の章でも黒文字の紙の章でも可読性が落ちない。
   既定は「引かれた状態」にしてあり、JS無効時でもマーカーは見える（is-anim が付かないため）。 */
/* 地色に合わせて2種類を使い分ける。
   電脳空間（暗い章）= ブランド赤の下線。黄色は黒と混ざって金色にくすみ、蛍光ペンに見えないため。
   現実レイヤー（紙の章）= 黄色の蛍光ペン。紙の上でこそ本物のマーカーらしく出る。 */
.ax-mk{background-image:linear-gradient(transparent 84%,rgba(208,17,27,.92) 84%);
  background-repeat:no-repeat;background-size:100% 100%;padding:0 .08em}
/* 活動の記録(.ax-record)は --paper を持たない別の紙色なので、明示的に含める */
.ax-sec--paper .ax-mk,.ax-record .ax-mk{
  background-image:linear-gradient(transparent 56%,rgba(255,196,0,.58) 56%)}
/* 比較用の一括切り替え: .ax-page に付けると全章を片方に統一できる */
.ax-page.mk-yellow .ax-mk{background-image:linear-gradient(transparent 56%,rgba(255,206,0,.80) 56%)}
.ax-page.mk-yellow .ax-sec--paper .ax-mk{background-image:linear-gradient(transparent 56%,rgba(255,196,0,.58) 56%)}
.ax-page.is-anim .ax-mk{background-size:0 100%}
/* 見出しのマスクワイプ（.ax-rv--up）が終わってから引かれるよう、開始を遅らせる */
.ax-page.is-anim .ax-mk.is-in{background-size:100% 100%;
  transition:background-size 1s cubic-bezier(.22,.75,.3,1) .45s}
.ax-page.mk-red .ax-mk,
.ax-page.mk-red .ax-sec--paper .ax-mk{
  background-image:linear-gradient(transparent 84%,rgba(208,17,27,.92) 84%)}
.ax-page.is-anim .ax-rv-d1.is-in{transition-delay:.1s}
.ax-page.is-anim .ax-rv-d2.is-in{transition-delay:.2s}
.ax-page.is-anim .ax-rv-d3.is-in{transition-delay:.3s}

/* ============================================================
   CTAボタン — 二層構造（維持）
     本層: ブランドレッドの矩形（角は立てる）
     外層: 7px右下にずれた罫線フレーム（版ズレの意匠）→ hoverで本層に整列
     hover: 明るいレッドが左から走る（clip-pathワイプ）＋ 矢印が6px前進
     ネオングロー・点滅は使わない
   ============================================================ */
.ax-btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:18px;
  background:var(--ax-red);color:#fff !important;text-decoration:none;border:none;cursor:pointer;
  padding:20px 38px 20px 42px;font-size:15px;font-weight:700;letter-spacing:.1em;
  font-family:var(--ax-sans);line-height:1.6}
.ax-btn::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,var(--ax-red2) 0%,#b70d16 100%);
  clip-path:inset(0 100% 0 0);transition:clip-path .55s cubic-bezier(.65,.05,.2,1)}
.ax-btn::after{content:"";position:absolute;inset:0;border:1px solid rgba(233,237,243,.38);
  transform:translate(7px,7px);pointer-events:none;
  transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.ax-btn:hover::before,.ax-btn:focus-visible::before{clip-path:inset(0 0 0 0)}
.ax-btn:hover::after,.ax-btn:focus-visible::after{transform:translate(0,0)}
.ax-btn:focus-visible{outline:2px solid var(--ax-red2);outline-offset:4px}
.ax-btn-ar{display:inline-block;font-weight:400;transform:translateX(0);
  transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.ax-btn:hover .ax-btn-ar{transform:translateX(6px)}

/* ============================================================
   ライブ粒子ステージ — 録画mp4を廃止し、1枚のcanvasに全章の背景を担わせる
     .ax-punder  最下層の静止質感（地色＋薄い赤のグロー2つ。CSSのみなので
                 JS無効・粒子が消える章でも真っ黒で寂しくならない）
     .ax-pstage  粒子canvasの土台。position:sticky
                 （fixedだと既存ヘッダー/パンくずまで覆うため。C3と同じ理由）。
                 100svh + margin-bottom:-100svh で後続セクションが上に重なる
     z-index:1 = セクションの地の色（z-auto扱い）より上・本文（.ax-w z-index:2）より下。
                 これにより明るい紙の章（代表・活動の記録）の上にも
                 暗色反転の粒子を極薄で描ける
     可読性の設計: 粒子を覆う全面暗幕は敷かない（暗幕が濃すぎて動きが
                 見えなくなったのが前回の失敗）。代わりに本文カラムの背後にだけ
                 縦帯グラデの「地の面」（.ax-w::before / .ax-hero-in::before）を敷き、
                 カラムの外では粒子を素通しで見せる
   ============================================================ */
.ax-punder{position:sticky;top:0;height:100vh;height:100svh;
  margin-bottom:-100vh;margin-bottom:-100svh;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 640px at 16% 78%,rgba(208,17,27,.075),transparent 62%),
    radial-gradient(880px 560px at 84% 14%,rgba(208,17,27,.05),transparent 60%),
    var(--ax-bg0)}
.ax-pstage{position:sticky;top:0;height:100vh;height:100svh;
  margin-bottom:-100vh;margin-bottom:-100svh;z-index:1;pointer-events:none}
.ax-pcv{width:100%;height:100%;display:block}
/* 本文の地の面: 本文カラム背後の縦帯。左右端はゼロに抜いて粒子を見せる */
.ax-w::before{content:"";position:absolute;inset:-56px -72px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,7,12,0) 0%,rgba(5,7,12,.46) 13%,
    rgba(5,7,12,.46) 87%,rgba(5,7,12,0) 100%)}
/* 明るい紙の章は地の面も紙色で（暗色粒子の上に敷く） */
.ax-sec--paper .ax-w::before{
  background:linear-gradient(90deg,rgba(243,242,238,0) 0%,rgba(243,242,238,.62) 13%,
    rgba(243,242,238,.62) 87%,rgba(243,242,238,0) 100%)}
.ax-record .ax-w::before{
  background:linear-gradient(90deg,rgba(239,236,229,0) 0%,rgba(239,236,229,.62) 13%,
    rgba(239,236,229,.62) 87%,rgba(239,236,229,0) 100%)}
/* ヒーローの地の面: 文字が載る左側だけ濃く、右は粒子の「組織AX」を素通し */
.ax-hero-in::before{content:"";position:absolute;inset:-64px -80px;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(5,7,12,.52) 0%,rgba(5,7,12,.3) 52%,rgba(5,7,12,0) 84%)}

/* ============================================================
   ヒーロー
   ============================================================ */
.ax-hero{min-height:92vh;min-height:100svh;display:flex;align-items:center;
  padding:170px 8vw 130px;position:relative;overflow:hidden;
  scroll-margin-top:var(--ax-anchor)}
  /* 背景は固定ステージ（.ax-stage）が担うため、ここでは塗らない */
.ax-hero::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;z-index:3;
  background:linear-gradient(90deg,var(--ax-red) 0%,rgba(208,17,27,.25) 45%,transparent 80%)}
.ax-shut{position:absolute;inset:0;background:#f0f1ef;opacity:0;pointer-events:none;z-index:8}
.ax-page.is-anim .ax-shut{animation:axShut 1.6s cubic-bezier(.16,1,.3,1) both}
@keyframes axShut{0%{opacity:1}100%{opacity:0}}
.ax-hero-in{position:relative;z-index:2;max-width:1020px;margin:0 auto;width:100%}
/* ヒーロー文字の入場: animation both のみで隠す（animation:noneなら即・全文可視） */
.ax-page.is-anim .ax-hero-in > *{animation:axHeroIn 1s cubic-bezier(.2,.7,.25,1) both}
.ax-page.is-anim .ax-hero-in > *:nth-child(2){animation-delay:.08s}
.ax-page.is-anim .ax-hero-in > *:nth-child(3){animation-delay:.16s}
.ax-page.is-anim .ax-hero-in > *:nth-child(4){animation-delay:.3s}
.ax-page.is-anim .ax-hero-in > *:nth-child(5){animation-delay:.42s}
.ax-page.is-anim .ax-hero-in > *:nth-child(6){animation-delay:.54s}
@keyframes axHeroIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.ax-hero-brand{font-size:13px;letter-spacing:.34em;font-weight:600;color:var(--ax-txt);margin:0 0 8px}
.ax-hero-corp{font-size:11.5px;letter-spacing:.16em;color:var(--ax-mute);margin:0 0 64px}
.ax-hero h1{margin:0 0 44px;line-height:1.2}
/* 上段=明朝の静、下段=角ゴ極太の動。書体対比で階層を作る */
.ax-h1a{display:block;font-family:var(--ax-serif);font-size:30px;font-weight:600;
  letter-spacing:.22em;color:var(--ax-dim);margin-bottom:20px}
.ax-h1b{display:block;font-size:118px;font-weight:800;letter-spacing:.015em;color:#fff;line-height:1.1;
  font-family:var(--ax-sans)}
.ax-h1b em{font-style:normal;color:var(--ax-red2)}
.ax-hero-copy{font-size:23px;font-weight:600;color:var(--ax-txt);margin:0 0 16px;line-height:2.05;
  font-family:var(--ax-serif);letter-spacing:.06em}
.ax-hero-t{font-size:14.5px;color:var(--ax-dim);margin:0 0 56px;max-width:620px;letter-spacing:.03em}
.ax-hero-cta{display:flex;gap:30px;align-items:center;flex-wrap:wrap}
.ax-hero-cue{font-size:10.5px;letter-spacing:.26em;color:var(--ax-mute)}
.ax-hero-cue::after{content:"▼";display:inline-block;margin-left:10px;color:var(--ax-red2);
  animation:axCue 2.4s ease-in-out infinite}
@keyframes axCue{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(6px);opacity:.3}}

/* ============================================================
   01 なぜ承継会社か — 論点2本（A=母体の大きさ×改善率 / B=成熟市場の新しい打ち手）
     論点1本 = 番号 → 明朝の見出し → 谷の肉声（引用） →
               概念図（canvas）＋図の要約文（JS無効でも内容が伝わる）
     承継会社が有利な理由（オーナーシップ）は2論点を支える材料として後置
   ============================================================ */
/* .ax-whysec の背景は固定ステージ（aurora）が担うため塗らない */
.ax-point{margin:0 0 130px}
.ax-point-no{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:10px;letter-spacing:.24em;
  color:var(--ax-red2);margin:0 0 16px}
.ax-point-h{font-family:var(--ax-serif);font-size:37px;font-weight:600;line-height:1.8;
  color:#fff;margin:0 0 28px;letter-spacing:.05em}
/* 名言風の引用をやめ、本文と同じ調子で置くための段落（谷さん指示 2026-08-10） */
.ax-say{margin:0 0 42px;font-size:17px;line-height:2.05;color:var(--ax-txt);max-width:860px}
.ax-say--close{margin:56px 0 0;padding-top:34px;border-top:1px solid var(--ax-line)}
.ax-pq{margin:0 0 46px;font-family:var(--ax-serif);font-size:24px;font-weight:600;line-height:2.1;
  color:#f2efe8;letter-spacing:.05em;position:relative;padding-left:26px;max-width:840px}
.ax-pq::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;
  background:var(--ax-red)}
.ax-pq small{display:block;font-family:var(--ax-sans);font-size:11px;font-weight:400;
  letter-spacing:.14em;color:var(--ax-mute);margin-top:10px}
.ax-point-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:44px;
  align-items:start}
/* 概念図パネル。canvasはJSが描く。JS無効時は隣の要約文が内容を担保する */
.ax-fig{background:rgba(8,11,17,.8);border:1px solid var(--ax-line);padding:26px 28px 20px;
  backdrop-filter:blur(2px);margin:0}
.ax-fig-title{font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--ax-txt);margin:0}
.ax-fig-badge{display:inline-block;font-size:10px;font-weight:400;letter-spacing:.16em;
  color:var(--ax-mute);border:1px solid var(--ax-line);padding:1px 9px;margin-left:12px;
  vertical-align:2px}
.ax-fig canvas{width:100%;height:330px;display:block;margin:14px 0 10px}
.ax-fig-note{font-size:11px;color:var(--ax-mute);line-height:1.9;margin:0}
.ax-point-body p{font-size:14.5px;color:var(--ax-dim);margin:0 0 18px}
.ax-point-body p:last-child{margin-bottom:0}
.ax-point-body strong{color:#fff}
/* 支える材料（オーナーシップ）: 論点の後ろに小さめのカード2枚 */
.ax-support-label{font-size:11px;letter-spacing:.28em;color:var(--ax-dim);margin:0 0 30px;
  padding-top:64px;border-top:1px solid rgba(28,35,48,.9)}
.ax-support-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ax-support-card{background:rgba(11,15,23,.82);border:1px solid var(--ax-line);
  padding:32px 34px 28px;backdrop-filter:blur(2px)}
.ax-support-card blockquote{margin:0 0 16px;font-family:var(--ax-serif);font-size:18px;
  font-weight:600;line-height:2.0;color:#f2efe8;letter-spacing:.04em;position:relative;
  padding-left:20px}
.ax-support-card blockquote::before{content:"";position:absolute;left:0;top:8px;bottom:8px;
  width:2px;background:var(--ax-red)}
.ax-support-card p{font-size:13.5px;color:var(--ax-dim);margin:0}
.ax-support-card p strong{color:#fff}
/* 章締めの一言（大きな引用） */
.ax-q{padding:64px 0}
.ax-q blockquote{margin:0;font-family:var(--ax-serif);font-size:26px;font-weight:600;
  line-height:2.1;color:#f2efe8;letter-spacing:.05em;position:relative;padding-left:26px}
.ax-q blockquote::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;
  background:var(--ax-red)}
.ax-q .ax-qc{font-size:14px;color:var(--ax-dim);padding-top:12px}
.ax-q--big{display:block;text-align:center;padding:110px 0 0}
.ax-q--big blockquote{font-size:36px;padding-left:0;display:inline-block;text-align:center;
  letter-spacing:.08em}
.ax-q--big blockquote::before{display:none}
.ax-q--big .ax-qc{margin-top:26px;color:var(--ax-mute);font-size:12px;letter-spacing:.14em}

/* ============================================================
   02 7つの事業 — 本ページの最厚の章
     前提3点（環境・文脈・伴走）→ 引用の帯 → 群見出し2本＋事業7本の縦積み
     → 進め方5歩 → 料金の考え方
     事業1本 = 左（番号・名前・ひとこと） / 右（何をするのか・どう進むのか・誰に向くのか）
   ============================================================ */
/* いちばん効くのはトップのコミット（谷さん指示 2026-08-10）。3枚のカードより上に立てる */
.ax-topcommit{border:1px solid var(--ax-line);border-left:3px solid var(--ax-red);
  background:rgba(11,15,23,.55);padding:34px 38px;margin:0 0 40px;max-width:900px}
.ax-topcommit .l{font-size:11.5px;letter-spacing:.2em;color:var(--ax-red);font-weight:700;margin:0 0 12px}
.ax-topcommit .h{font-family:var(--ax-serif);font-size:28px;font-weight:600;line-height:1.7;
  color:#fff;margin:0 0 18px}
.ax-topcommit p:last-child{font-size:15.5px;line-height:2.05;color:var(--ax-txt);margin:0}
.ax-reqs-lead{font-size:15.5px;color:var(--ax-dim);margin:0 0 22px}
@media (max-width:900px){
  .ax-topcommit{padding:26px 24px}
  .ax-topcommit .h{font-size:21px}
}
.ax-reqs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 96px}
.ax-req{background:rgba(11,15,23,.82);border:1px solid var(--ax-line);padding:30px 30px 26px;
  backdrop-filter:blur(2px)}
.ax-req .n{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:10px;letter-spacing:.2em;
  color:var(--ax-red2);margin:0 0 12px}
.ax-req h3{font-size:17px;font-weight:700;color:#fff;margin:0 0 10px;line-height:1.7}
.ax-req p{font-size:13px;color:var(--ax-dim);margin:0}
.ax-svcband{margin:0 0 96px;text-align:center}
.ax-svcband p{font-family:var(--ax-serif);font-size:28px;font-weight:600;line-height:2.15;
  color:#fff;margin:0;letter-spacing:.07em}
.ax-svcband p em{font-style:normal;color:var(--ax-red2)}
.ax-svcband small{display:block;margin-top:20px;font-size:13px;color:var(--ax-mute);letter-spacing:.06em}
.ax-svcs{border-top:1px solid rgba(28,35,48,.9)}
/* 事業は2つの群に分かれる（2026-08-14／個人向け・組織向けの2枚構成に合わせた） */
.ax-svcgrp{padding:54px 0 34px;border-bottom:1px solid rgba(28,35,48,.9)}
.ax-svcgrp:first-child{padding-top:38px}
.ax-svcgrp .g{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:11px;letter-spacing:.22em;
  color:var(--ax-red);margin:0 0 16px}
.ax-svcgrp h3{font-family:var(--ax-serif);font-size:27px;font-weight:600;color:#fff;
  margin:0 0 14px;line-height:1.7;letter-spacing:.04em}
.ax-svcgrp .d{font-size:14.5px;line-height:2;color:var(--ax-dim);margin:0;max-width:740px}
@media (max-width:900px){
  .ax-svcgrp{padding:38px 0 26px}
  .ax-svcgrp h3{font-size:20px}
}
.ax-svc{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:48px;
  padding:58px 0 54px;border-bottom:1px solid rgba(28,35,48,.9)}
.ax-svc-no{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:11px;letter-spacing:.22em;
  color:var(--ax-red2);margin:0 0 16px}
.ax-svc h3{font-size:27px;font-weight:800;color:#fff;margin:0 0 16px;line-height:1.5;letter-spacing:.01em}
.ax-svc-sum{font-size:14.5px;color:var(--ax-dim);margin:0 0 22px}
.ax-svc-core{display:inline-block;margin-left:14px;vertical-align:middle;font-family:var(--ax-sans);
  font-size:11px;font-weight:700;letter-spacing:.12em;color:#fff;background:var(--ax-red);
  padding:4px 10px}
.ax-svc-tag{display:inline-block;font-size:11px;letter-spacing:.1em;color:var(--ax-dim);
  border:1px solid var(--ax-line);padding:6px 14px;background:rgba(11,15,23,.6)}
.ax-svc-facets{display:grid;gap:0}
.ax-facet{padding:20px 0 18px;border-top:1px solid rgba(28,35,48,.7)}
.ax-facet:first-child{border-top:none;padding-top:6px}
.ax-facet .k{font-size:11px;font-weight:700;letter-spacing:.24em;color:var(--ax-dim);margin:0 0 8px}
.ax-facet .k::before{content:"";display:inline-block;width:7px;height:7px;background:var(--ax-red);
  margin-right:10px;vertical-align:baseline}
.ax-facet p{font-size:14px;color:#c3cad4;margin:0}
.ax-facet p strong{color:#fff}
/* 進め方 — 順番の5歩。線でつなぐ */
.ax-flowh{margin:110px 0 0}
.ax-flowh .ax-h3{font-size:22px;margin-bottom:8px}
.ax-flowh > p{font-size:14.5px;color:var(--ax-dim);margin:0 0 44px;max-width:640px}
.ax-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:axf}
.ax-fnode{position:relative;padding:26px 22px 0 0;counter-increment:axf;
  border-top:1px solid var(--ax-line)}
.ax-fnode::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;
  background:var(--ax-red);border-radius:50%}
.ax-fnode .n{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:10px;letter-spacing:.2em;
  color:var(--ax-mute);margin:0 0 10px}
.ax-fnode .n::before{content:counter(axf,decimal-leading-zero) " ";color:var(--ax-red2)}
.ax-fnode h4{font-size:15px;font-weight:700;color:#fff;margin:0 0 8px;line-height:1.7}
.ax-fnode p{font-size:12.5px;color:var(--ax-dim);margin:0}
/* 料金の考え方 */
.ax-priceh{margin:110px 0 0}
.ax-priceh .ax-h3{font-size:22px;margin-bottom:8px}
.ax-priceh > p{font-size:14.5px;color:var(--ax-dim);margin:0 0 36px;max-width:680px}
.ax-transp{border:1px solid rgba(208,17,27,.4);background:rgba(12,16,24,.85);padding:38px 40px;
  backdrop-filter:blur(2px)}
.ax-transp h4{font-size:16px;font-weight:700;letter-spacing:.05em;color:#fff;margin:0 0 14px}
.ax-transp h4::before{content:"";display:inline-block;width:8px;height:8px;background:var(--ax-red);
  margin-right:12px;vertical-align:baseline}
.ax-transp p{font-size:14px;color:var(--ax-dim);margin:0}
.ax-transp strong{color:#fff}

/* ============================================================
   つなぎ — 写真帯CTA（tani_wide: 右に人物・左に余白 → 左に文字を置く）
   ============================================================ */
.ax-midcta{position:relative;overflow:hidden;padding:150px 8vw;scroll-margin-top:var(--ax-anchor);
  background:#0a0c11 url("assets/tani_wide.jpg") right center/cover no-repeat}
.ax-midcta::before{content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,rgba(5,7,12,.94) 0%,rgba(5,7,12,.78) 42%,rgba(5,7,12,.28) 78%,rgba(5,7,12,.1) 100%)}
.ax-midcta-in{position:relative;z-index:2;max-width:1020px;margin:0 auto}
.ax-midcta h2{font-family:var(--ax-serif);font-size:34px;font-weight:600;line-height:1.9;
  color:#fff;margin:0 0 18px;letter-spacing:.06em;max-width:640px}
.ax-midcta p{font-size:14.5px;color:var(--ax-dim);margin:0 0 40px;max-width:520px}

/* ============================================================
   03 代表 — 現実レイヤー（生成りの紙）。写真が主役。語りは一人称
   ============================================================ */
.ax-ceo{background:var(--ax-paper)}
.ax-ceo-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start}
.ax-ceo-photo{position:relative}
.ax-ceo-photo img{width:100%;filter:contrast(1.03) saturate(.94)}
.ax-ceo-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 60px rgba(26,28,32,.14)}
.ax-ceo-name{margin:26px 0 0;font-size:13px;color:#5c5a52;line-height:1.9}
.ax-ceo-name b{display:block;font-family:var(--ax-serif);font-size:21px;color:var(--ax-ink);
  letter-spacing:.18em;margin-top:2px}
.ax-ceo-talk p{font-size:15px;color:#3c3a34;margin:0 0 20px}
.ax-ceo-talk strong{color:var(--ax-ink)}
.ax-ceo-q{font-family:var(--ax-serif);font-size:24px;font-weight:600;line-height:2.05;
  color:var(--ax-ink);margin:0 0 30px;letter-spacing:.04em}
.ax-ceo-q em{font-style:normal;border-bottom:2px solid var(--ax-red);padding-bottom:2px}

/* ============================================================
   04 活動の記録 — 育つ器。実物写真＋発信チャネル＋声の予約席
   ============================================================ */
.ax-record{background:#efece5;color:var(--ax-ink);border-top:1px solid #e4e0d5}
.ax-record .ax-h2,.ax-record .ax-h3{color:var(--ax-ink)}
.ax-record .ax-kick{color:#6d6a60}
.ax-record .ax-lead{color:#5c5a52}
.ax-rec-block{margin:0 0 72px}
.ax-rec-block:last-child{margin-bottom:0}

/* ---- 04 社内でどう根づかせたか（現実レイヤー・代表章と同じ生成りの紙） ----
   主張（渡して終わりでは使われない）の証拠として、自社でやってきた2段階を置く章。
   .ax-cul-step = 段階1/2の見出しブロック、.ax-cul-4 = 責任4つ、.ax-cul-shot = 実物の画面 */
/* 地色・見出し色・本文背後の紙の下敷きは .ax-sec--paper が持つ（代表章と同じ扱い）。
   ここは代表章との境目の罫線と、上下の余白だけを足す */
.ax-culture{border-top:1px solid #e2ded1;--ax-pt:130px;--ax-pb:140px}
.ax-cul-step{margin:0 0 76px}
.ax-cul-step:last-child{margin-bottom:0}
.ax-cul-n{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:10px;letter-spacing:.22em;
  color:var(--ax-red);margin:0 0 12px;font-weight:700}
.ax-cul-step h3{font-size:26px;font-weight:800;margin:0 0 8px;line-height:1.55;letter-spacing:.01em}
.ax-cul-when{font-size:12px;letter-spacing:.06em;color:#8a8577;margin:0 0 18px}
.ax-cul-step>p{font-size:15px;line-height:2.0;color:#4a4840;margin:0 0 20px;max-width:760px}
.ax-cul-step>p strong{color:var(--ax-ink);font-weight:700}
.ax-cul-photo{margin:26px 0 0}
.ax-cul-photo img{width:100%;display:block;filter:contrast(1.02) saturate(.9) brightness(.99)}
.ax-cul-cap{font-size:11.5px;color:#8a8577;margin:10px 0 0;line-height:1.8}
.ax-cul-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:26px 0 0}
.ax-cul-4 div{background:rgba(255,255,255,.62);border:1px solid #e2ded1;padding:22px 20px 20px}
.ax-cul-4 .n{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:10px;letter-spacing:.2em;
  color:var(--ax-red);margin:0 0 9px}
.ax-cul-4 h4{font-size:15px;font-weight:700;margin:0 0 7px;line-height:1.6;color:var(--ax-ink)}
.ax-cul-4 p{font-size:12.5px;line-height:1.85;color:#5c5a52;margin:0}
.ax-cul-shot{margin:26px 0 0;border:1px solid #ddd8ca;background:rgba(255,255,255,.5);padding:14px}
.ax-cul-shot img{width:100%;display:block}
.ax-cul-close{font-size:16px;line-height:2.05;color:var(--ax-ink);margin:64px 0 0;
  padding-top:34px;border-top:1px solid #e2ded1;max-width:820px}
.ax-cul-close strong{font-weight:700}
@media (max-width:900px){
  .ax-cul-step{margin-bottom:56px}
  .ax-cul-step h3{font-size:21px}
  .ax-cul-4{grid-template-columns:1fr;gap:10px}
  .ax-cul-close{margin-top:48px;font-size:15px}
}
.ax-rec-label{font-size:11px;letter-spacing:.28em;font-weight:600;color:#8a8577;margin:0 0 22px;
  padding-bottom:12px;border-bottom:1px solid var(--ax-pline)}
.ax-event{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:start}
.ax-event-photos{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto;gap:10px}
.ax-event-photos img{width:100%;height:100%;object-fit:cover;
  filter:contrast(1.02) saturate(.9) brightness(.97)}
.ax-event-photos .ph-main{grid-row:span 2;min-height:300px}
.ax-event-photos .ph-sub{height:145px}
.ax-event-cap{grid-column:span 2;font-size:11.5px;color:#8a8577;margin:4px 0 0;letter-spacing:.04em}
.ax-event-body h3{font-size:20px;margin:0 0 12px;color:var(--ax-ink)}
.ax-event-date{font-size:12px;letter-spacing:.18em;color:var(--ax-red);font-weight:700;margin:0 0 10px}
.ax-event-body p{font-size:14px;color:#5c5a52;margin:0}
.ax-rec-band{margin:26px 0 0;display:grid;grid-template-columns:1.15fr .85fr;gap:10px}
.ax-rec-band img{width:100%;height:150px;object-fit:cover;
  filter:contrast(1.02) saturate(.88) brightness(.99)}
.ax-media{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ax-media-item{background:#fff;border:1px solid var(--ax-pline);padding:26px 28px}
.ax-media-item .t{font-size:16px;font-weight:700;color:var(--ax-ink);margin:0 0 6px}
.ax-media-item p{font-size:13px;color:#5c5a52;margin:0}
.ax-voice{border:1px dashed #c9c4b6;padding:48px 40px;text-align:center;background:rgba(255,255,255,.5)}
.ax-voice p{font-size:15px;color:#5c5a52;margin:0;max-width:560px;margin-inline:auto}
.ax-voice .t{font-family:var(--ax-serif);font-size:21px;font-weight:600;color:var(--ax-ink);
  margin:0 0 14px;line-height:1.95;letter-spacing:.05em}

/* ============================================================
   05 無料相談フォーム — 電脳側で完結。大きく空けて着地
   ============================================================ */
/* .ax-consult の背景は固定ステージ（irid）が担うため塗らない */
.ax-consult .ax-h2{text-align:center}
.ax-consult .ax-kick{text-align:center}
.ax-consult .ax-kick::before{display:none}
.ax-consult .ax-lead{text-align:center;margin-inline:auto}
.ax-form{max-width:640px;margin:0 auto;background:rgba(11,15,23,.92);border:1px solid var(--ax-line);
  padding:56px 58px;position:relative;z-index:2;backdrop-filter:blur(3px)}
.ax-form::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--ax-red),transparent 70%)}
.ax-field{margin:0 0 26px}
/* 既存サイトの common.css が `label{width:260px}` を全ラベルに当てているため、
   幅を明示して打ち消す（指定しないと選択肢のボックスが260pxで頭打ちになる） */
.ax-field label{display:block;width:100%;font-size:13px;font-weight:700;color:var(--ax-txt);
  margin:0 0 8px;letter-spacing:.05em}
/* 既存サイトの common.css が `label::before{content:"必須"}` を全ラベルに当てているため、
   このページでは打ち消す（任意項目にまで「必須」と出てしまうのを防ぐ）。
   必須・任意の別は、下の small で項目ごとに明示する */
.ax-field label::before{content:none;display:none}
.ax-field label small{font-weight:400;color:var(--ax-mute);margin-left:10px;font-size:11px;
  letter-spacing:.04em}
.ax-field label small.req{color:#e8323d;border:1px solid rgba(232,50,61,.55);
  padding:2px 8px;font-size:10px;font-weight:700}

/* ---- ご相談内容（ラジオ5択） ----
   ドロップダウンにしないのは、5択なら開かずに全部見えるほうが選ばれやすいため
   （Baymard: 選択肢が5未満ならラジオ。ドロップダウンは中身を見るためだけに開いて
   選ばず閉じる人が半数いる）。見出しは label ではなく p にしている（既存サイトの
   common.css が label::before に「必須」バッジを当てているため） */
.ax-flabel{display:block;font-size:13px;font-weight:700;color:var(--ax-txt);margin:0 0 10px;
  letter-spacing:.05em}
.ax-flabel small{font-weight:400;color:var(--ax-mute);margin-left:10px;font-size:11px;
  letter-spacing:.04em}
.ax-flabel small.req{color:#e8323d;border:1px solid rgba(232,50,61,.55);padding:2px 8px;
  font-size:10px;font-weight:700}
.ax-choices{display:grid;gap:8px}
.ax-field label.ax-choice{display:flex;align-items:flex-start;gap:12px;margin:0;
  font-size:14px;font-weight:400;line-height:1.6;color:#c3cad4;cursor:pointer;letter-spacing:.02em;
  background:rgba(20,26,37,.9);border:1px solid var(--ax-line);padding:14px 16px;
  transition:border-color .22s,color .22s,background .22s}
.ax-field label.ax-choice:hover{border-color:#39445a;color:var(--ax-txt)}
/* .ax-field input{width:100%} が後に定義されているため、詳細度を上げて打ち消す */
.ax-field label.ax-choice input{flex:none;width:16px;height:16px;min-width:16px;
  margin:3px 0 0;padding:0;accent-color:var(--ax-red);background:none;border:none}
.ax-field label.ax-choice span{flex:1 1 auto;min-width:0}
.ax-choice input:focus-visible{outline:2px solid var(--ax-red2);outline-offset:3px}
.ax-choice:has(input:checked){border-color:var(--ax-red);background:rgba(208,17,27,.10);color:#fff}
.ax-field input,.ax-field textarea{width:100%;background:rgba(20,26,37,.9);border:1px solid var(--ax-line);
  color:var(--ax-txt);font-size:15px;padding:13px 16px;font-family:inherit;line-height:1.7;
  transition:border-color .25s}
.ax-field input:focus,.ax-field textarea:focus{outline:none;border-color:rgba(208,17,27,.65)}
.ax-field textarea{min-height:120px;resize:vertical}
.ax-form .ax-btn{width:100%;justify-content:center;margin-top:6px}
.ax-form-note{margin:18px 0 0;font-size:11.5px;color:var(--ax-mute);line-height:1.9}
/* NDA前に機密を送らせないための注意。フォーム送信はmailto暫定のため必須 */
.ax-form-caution{max-width:640px;margin:0 auto 18px;position:relative;z-index:2;
  border-left:2px solid var(--ax-red);padding:10px 0 10px 16px;
  font-size:12.5px;line-height:1.95;color:#b9c0ca}
.ax-form-note a{color:var(--ax-dim)}

/* ---- 事業者情報・注記 ---- */
.ax-about{background:var(--ax-bg0);border-top:1px solid var(--ax-line)}
.ax-about dl{display:flex;flex-wrap:wrap;margin:0;border-top:1px solid var(--ax-line)}
.ax-about dt{width:220px;padding:15px 0;font-size:14px;font-weight:700;
  border-bottom:1px solid var(--ax-line);color:var(--ax-txt)}
.ax-about dd{width:calc(100% - 220px);padding:15px 0;margin:0;font-size:14px;color:var(--ax-dim);
  border-bottom:1px solid var(--ax-line)}
.ax-about dd a{color:var(--ax-txt)}
/* position:relativeは必須（固定背景ステージより上に描画するため。他セクションは.ax-sec等で指定済み） */
.ax-notes{padding:44px 8vw 80px;background:var(--ax-bg0);position:relative}
.ax-notes ul{margin:0 auto;padding:0;list-style:none;max-width:1020px}
.ax-notes li{font-size:12px;color:var(--ax-mute);line-height:2.0}

/* 背景レイヤー(.ax-punder)は main の中で sticky に貼り付く。main を抜ければ止まるが、
   position付き要素なので static な後続要素より前面に描画される。
   フッター情報ブロックとコピーライトを覆わないよう、こちらを前面に固定しておく */
.ax-page ~ .Info,.ax-page ~ footer{position:relative;z-index:1}

/* ---- 無料相談への固定導線 ----
   PC = 画面右端の縦書きCTA（左の目次レールと左右で対になる）
   SP = 画面下端のバー。スマホには目次レールが出ないため、目次と相談導線を
        この1本にまとめている（下端に固定物を2つ置くと本文が読めなくなるため）
   .ax-page の外に置くので、ページ側のCSS変数は届かない。ここで自前に定義する */
.ax-ctarail,.ax-tabbar,.ax-sheet{
  --ax-red:#d0111b;--ax-red2:#e8323d;--ax-txt:#e9edf3;--ax-line:#1c2330;
  --ax-sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"Yu Gothic",sans-serif;
  font-family:var(--ax-sans)}
.ax-ctarail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:22}
.ax-ctarail a{display:block;writing-mode:vertical-rl;background:var(--ax-red);color:#fff;
  text-decoration:none;padding:26px 15px;font-size:14px;font-weight:700;
  letter-spacing:.2em;line-height:1;box-shadow:-4px 4px 20px rgba(0,0,0,.45);
  transition:padding-right .25s,background .25s}
.ax-ctarail a:hover{background:var(--ax-red2);padding-right:21px}
.ax-ctarail a:focus-visible{outline:2px solid #fff;outline-offset:-5px}
.ax-tabbar{display:none}
.ax-sheet{display:none}
.ax-sheet[hidden]{display:none !important}

@media (max-width:900px){
  .ax-ctarail{display:none}
  .ax-tabbar{display:grid;grid-template-columns:auto 1fr;position:fixed;left:0;right:0;bottom:0;
    z-index:34;background:rgba(10,14,22,.96);border-top:1px solid rgba(233,237,243,.18);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .ax-tab-toc{display:flex;align-items:center;gap:9px;background:none;border:none;
    border-right:1px solid rgba(233,237,243,.18);color:var(--ax-txt);font-size:12.5px;
    font-weight:700;font-family:inherit;padding:0 18px;cursor:pointer;letter-spacing:.08em}
  .ax-tab-toc .ic{position:relative;display:block;width:15px;height:2px;background:currentColor}
  .ax-tab-toc .ic::before,.ax-tab-toc .ic::after{content:"";position:absolute;left:0;
    width:15px;height:2px;background:currentColor}
  .ax-tab-toc .ic::before{top:-5px}
  .ax-tab-toc .ic::after{top:5px}
  .ax-tab-cta{display:flex;align-items:center;justify-content:center;gap:10px;
    background:var(--ax-red);color:#fff;text-decoration:none;padding:17px 12px;
    font-size:13.5px;font-weight:700;letter-spacing:.06em}
  /* 目次シート */
  .ax-sheet{display:block;position:fixed;inset:0;z-index:36;background:rgba(5,7,12,.74)}
  .ax-sheet-in{position:absolute;left:0;right:0;bottom:0;background:#0d1119;
    border-top:1px solid rgba(233,237,243,.2);padding:6px 0 84px;max-height:78vh;overflow:auto}
  .ax-sheet-t{display:flex;align-items:center;justify-content:space-between;margin:0;
    padding:16px 20px 12px;font-size:11px;letter-spacing:.24em;color:#9aa4b2;font-weight:700}
  .ax-sheet-x{background:none;border:none;color:var(--ax-txt);font-size:22px;line-height:1;
    padding:0 4px;cursor:pointer;font-family:inherit}
  .ax-sheet ol{list-style:none;margin:0;padding:0;counter-reset:axs}
  .ax-sheet li{counter-increment:axs;border-top:1px solid rgba(233,237,243,.10)}
  .ax-sheet a{display:flex;align-items:baseline;gap:12px;padding:15px 20px;
    color:var(--ax-txt);text-decoration:none;font-size:14.5px;font-weight:600}
  .ax-sheet a::before{content:counter(axs,decimal-leading-zero);
    font-family:"SF Mono",Menlo,Consolas,monospace;font-size:10px;color:var(--ax-red2)}
}

/* ---- 事業の詳細（アコーディオン） ----
   スマホだけ折りたたむ。PCは横に余裕があり、閉じると逆に探しにくくなるため常時展開。
   既定を open にしてあるのは、JSが動かない環境でも中身が読めるようにするため */
.ax-svc-det{margin:0}
.ax-svc-det>summary{display:none}
@media (max-width:900px){
  .ax-svc-det>summary{display:flex;align-items:center;justify-content:space-between;
    cursor:pointer;list-style:none;margin:14px 0 0;padding:13px 16px;
    background:rgba(20,26,37,.9);border:1px solid var(--ax-line);color:var(--ax-txt);
    font-size:13px;font-weight:700;letter-spacing:.06em}
  .ax-svc-det>summary::-webkit-details-marker{display:none}
  .ax-svc-det>summary::after{content:"＋";font-weight:400;font-size:16px;color:var(--ax-red2)}
  .ax-svc-det[open]>summary::after{content:"−"}
  .ax-svc-det>summary:focus-visible{outline:2px solid var(--ax-red2);outline-offset:2px}
}

/* ---- 「お使いのAIに聞く」フローティング（右下） ----
   .ax-rail は左端固定なので干渉しない。z-indexは rail(20) より上、SPの進捗バー(40) より下。
   明るい紙の章でも沈まないよう、地色は墨で固定する。
   JS無効時は何も起きないボタンになるので、既定で非表示にしてJSで出す。 */
/* ★この要素は .ax-page の外（footerの後）に置いているため、ページ側で定義している
   CSS変数（--ax-txt 等）が届かない。ここで自前に定義する。値は .ax-page の定義と同じ。 */
.ax-askai{position:fixed;right:18px;bottom:18px;z-index:35;display:none;
  --ax-txt:#e9edf3; --ax-red:#d0111b; --ax-red2:#e8323d;
  --ax-sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"Yu Gothic",sans-serif;
  font-family:var(--ax-sans)}
.ax-askai-btn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  background:#141a24;color:var(--ax-txt);padding:14px 19px;font-size:12.5px;font-weight:700;
  letter-spacing:.08em;line-height:1;box-shadow:0 8px 30px rgba(0,0,0,.6);
  border:1px solid rgba(233,237,243,.38);font-family:inherit}
.ax-askai-btn::before{content:"";width:7px;height:7px;background:var(--ax-red);flex:none}
.ax-askai-btn:hover{background:#151b26}
.ax-askai-btn:focus-visible{outline:2px solid var(--ax-red2);outline-offset:3px}
.ax-askai-menu{position:absolute;right:0;bottom:calc(100% + 10px);width:278px;
  background:#0d1119;border:1px solid rgba(233,237,243,.22);
  box-shadow:0 10px 40px rgba(0,0,0,.5);padding:8px;display:none}
.ax-askai.is-open .ax-askai-menu{display:block}
.ax-askai-menu .h{margin:0;padding:10px 12px 10px;font-size:11px;color:#9aa4b2;
  line-height:1.75;letter-spacing:.03em;border-bottom:1px solid rgba(233,237,243,.12)}
.ax-askai-menu a,.ax-askai-menu button{display:flex;flex-wrap:wrap;align-items:center;
  gap:0 10px;width:100%;text-align:left;
  background:none;border:none;cursor:pointer;text-decoration:none;color:var(--ax-txt);
  font-size:13px;font-weight:600;padding:11px 12px;line-height:1.5;
  font-family:inherit;letter-spacing:.02em}
/* 各AIのアイコン。Geminiは星単体で地色が無いため、白の座布団を敷いて他と高さを揃える */
.ax-askai-menu img{flex:none;width:18px;height:18px;border-radius:4px;object-fit:contain}
.ax-askai-menu img.pad{background:#fff;padding:2px;box-sizing:border-box}
.ax-askai-menu .ic{flex:none;width:18px;height:18px;display:inline-flex;
  align-items:center;justify-content:center;font-size:11px;color:#9aa4b2;
  border:1px solid rgba(233,237,243,.24);border-radius:4px}
.ax-askai-menu a:hover,.ax-askai-menu button:hover,
.ax-askai-menu a:focus-visible,.ax-askai-menu button:focus-visible{
  background:rgba(233,237,243,.08);color:#fff;outline:none}
.ax-askai-menu small{flex-basis:100%;margin-left:28px;font-size:10.5px;font-weight:400;
  color:#9aa4b2;margin-top:4px;letter-spacing:0;line-height:1.5}
@media (max-width:900px){
  /* 下端の固定バーに重ならないよう、スマホでは上へ逃がす */
  .ax-askai{right:12px;bottom:70px}
  .ax-askai-btn{padding:11px 14px;font-size:11.5px}
  .ax-askai-menu{width:min(80vw,278px)}
}

/* ============================================================
   マウスカーソル演出（PC・hover対応環境のみ。JSが要素を生成する）
     本体の点(即応) + 遅れて追う輪(慣性)。リンク上で輪が拡大。
     標準カーソルは消さずに重ねる（cursor:noneは使わない）
   ============================================================ */
.ax-cur-dot,.ax-cur-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:70;
  opacity:0;transition:opacity .3s ease;will-change:transform}
.ax-cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--ax-red)}
.ax-cur-ring{width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;
  border:1px solid rgba(233,237,243,.65);mix-blend-mode:difference}
.ax-cur-dot.is-on,.ax-cur-ring.is-on{opacity:1}
.ax-cur-dot.is-hide,.ax-cur-ring.is-hide{opacity:0}
/* ClickSpark用キャンバス（全画面・クリック透過） */
.ax-spark{position:fixed;inset:0;z-index:65;pointer-events:none}

/* ============================================================
   狭い画面での組み替え（レール ↔ 上端進捗バー / 余白の圧縮）
   ============================================================ */
/* 章立てレールの表示条件（2026-08-25 修正）
   レールは左端固定で幅157px、本文は1020px中央寄せ。
   本文の左端は (画面幅-1020)/2 なので、1365px以下では本文と重なる（実測）。
     1100px→117px / 1200px→67px / 1280px→27px 食い込む
   Windowsはスクロールバーが常時17px出るぶん更に狭く、1366pxのノートPCで接触していた。
   よってレールは 1400px 以上でのみ出す。
   レールが出ない幅では、代わりに上端の進捗バーで章の進行を示す（下の .ax-progress）。
   ※ この下の 1080px のブロックはレイアウトのSP寄せなので、閾値を動かさないこと */
@media (max-width:1400px){
  .ax-rail{display:none}
  .ax-progress{display:block;position:fixed;left:0;top:0;width:100%;height:3px;z-index:40;
    background:rgba(20,26,37,.6)}
  .ax-progress i{display:block;height:100%;width:0;background:var(--ax-red)}
}
@media (max-width:1080px){
  .ax-sec{padding:calc(var(--ax-pt,140px)*.55) 6vw calc(var(--ax-pb,140px)*.55)}
  .ax-hero{padding:110px 6vw 80px;min-height:0}
  .ax-h1a{font-size:19px;letter-spacing:.16em}
  .ax-h1b{font-size:56px}
  .ax-hero-copy{font-size:18px}
  .ax-h2{font-size:28px}
  .ax-lead{margin-bottom:40px}
  .ax-btn::after{transform:translate(5px,5px)}
  .ax-point{margin-bottom:84px}
  .ax-point-h{font-size:22px}
  .ax-pq{font-size:19px}
  .ax-point-grid{grid-template-columns:1fr;gap:26px}
  .ax-fig{padding:20px 16px 16px}
  .ax-fig canvas{height:262px}
  .ax-support-label{padding-top:44px;margin-bottom:22px}
  .ax-support-grid{grid-template-columns:1fr;gap:12px}
  .ax-support-card{padding:26px 24px 22px}
  .ax-q--big{padding:64px 0 0}
  .ax-q--big blockquote{font-size:23px}
  .ax-reqs{grid-template-columns:1fr;gap:12px;margin-bottom:56px}
  .ax-svcband{margin-bottom:56px}
  .ax-svcband p{font-size:20px}
  .ax-svc{grid-template-columns:1fr;gap:24px;padding:40px 0 38px}
  .ax-svc h3{font-size:21px}
  .ax-flowh,.ax-priceh{margin-top:64px}
  .ax-flow{grid-template-columns:1fr}
  .ax-fnode{border-top:none;border-left:1px solid var(--ax-line);padding:0 0 26px 22px}
  .ax-fnode::before{left:-4px;top:6px}
  .ax-transp{padding:28px 24px}
  .ax-midcta{padding:96px 6vw 110px;background-position:78% center}
  .ax-midcta::before{background:linear-gradient(180deg,rgba(5,7,12,.9) 0%,rgba(5,7,12,.72) 55%,rgba(5,7,12,.5) 100%)}
  .ax-midcta h2{font-size:23px}
  .ax-ceo-grid,.ax-event{grid-template-columns:1fr;gap:32px}
  .ax-ceo-q{font-size:20px}
  .ax-media{grid-template-columns:1fr}
  .ax-event-photos .ph-main{min-height:230px}
  .ax-event-photos .ph-sub{height:120px}
  .ax-rec-band img{height:96px}
  .ax-rec-block{margin-bottom:52px}
  .ax-form{padding:34px 24px}
  .ax-about dt,.ax-about dd{width:100%;padding:10px 0}
  .ax-about dt{border-bottom:none;padding-bottom:0}
  .ax-notes{padding:32px 6vw 60px}
}
/* SP（768px以下）とタッチ主体の端末では、粒子数の大幅削減とカーソル追従の
   無効化をJS側で行う（バッテリー配慮の本体は粒子数。canvas自体は表示のまま） */
@media (max-width:480px){
  .ax-h1b{font-size:44px}
  .ax-fig canvas{height:240px}
  .ax-event-photos{grid-template-columns:1fr}
  .ax-event-photos .ph-main{grid-row:auto;min-height:0;height:210px}
  .ax-event-photos .ph-sub{height:150px}
  .ax-event-cap{grid-column:span 1}
  .ax-rec-band{grid-template-columns:1fr}
  .ax-rec-band img{height:120px}
}

/* ---- 動きを減らす設定: 全アニメ停止・videoはポスターに・全文そのまま読める ----
     reduced-motion時に内容が隠れないよう、隠し得る初期状態をすべて強制解除する。
     概念図canvasはJS側が「最初から完成状態」で静止描画する */
@media (prefers-reduced-motion:reduce){
  .ax-page.is-anim .ax-rv,.ax-page.is-anim .ax-rv--wipe,.ax-page.is-anim .ax-rv--up{
    opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important}
  .ax-page .ax-hero-in > *{opacity:1 !important;transform:none !important;animation:none !important}
  .ax-page .ax-pre{opacity:1 !important;transform:none !important}
  .ax-page.is-anim .ax-mk{background-size:100% 100% !important}
  .ax-page *,.ax-page *::before,.ax-page *::after{transition:none !important;animation:none !important}
  /* 粒子canvasは消さない: JS側が各章の最終形を静止画として1回だけ描く */
  .ax-cur-dot,.ax-cur-ring,.ax-spark{display:none !important}
}
/* タッチデバイス（hover無し）ではカーソル演出を出さない（JS側でも生成しない） */
@media (hover:none){
  .ax-cur-dot,.ax-cur-ring,.ax-spark{display:none !important}
}
@media print{
  .ax-grain,.ax-rail,.ax-progress,.ax-punder,.ax-pstage,
  .ax-cur-dot,.ax-cur-ring,.ax-spark{display:none !important}
  .ax-page.is-anim .ax-rv,.ax-page.is-anim .ax-rv--wipe,.ax-page.is-anim .ax-rv--up{
    opacity:1 !important;transform:none !important;clip-path:none !important}
  .ax-page .ax-hero-in > *{opacity:1 !important;animation:none !important}
}