@charset "utf-8";
/* ものがたりコマース — 共通スタイル */

  :root {
    /* ---- ground：アイボリー ---- */
    --bg:            #F8F5EE;   /* あたたかい白 */
    --bg-sub:        #F2EEE4;   /* 面を分ける一段濃いアイボリー */
    --beige:         #E9E3D5;   /* さらに濃いサブ面 */
    --light-green:   #E8EEF4;   /* タグ・チップの淡いネイビー面（名称は互換のため維持） */
    --light-yellow:  #EEDCB0;   /* マーカー（ゴールド） */

    /* ---- ink ---- */
    --text:          #252525;
    --text-sub:      #5E6670;
    --text-faint:    #8E949C;
    --border:        #E1DBCD;
    --white:         #FFFFFF;

    /* ---- brand：朱赤 × チャコール ----
       変数名は既存実装との互換のため維持し、値だけを方向性Aへ差し替える。
       --green    … 主アクション（ボタン・リンク・アイコン）
       --green-deep … 大きな色面・締め色（チャコール）
       --orange   … 罫・矢印・強調のブランドアクセント */
    --green:         #19324A;   /* 主軸のネイビー：ボタン・リンク・アイコン */
    --green-deep:    #14293D;   /* 大きな色面・フッター */
    --green-tint:    #E8EEF4;
    --orange:        #D65A42;   /* アクセント2：矢印・強調 */
    --orange-br:     #BE4A34;
    --orange-tx:     #B3452F;   /* 小さな文字のコントラスト確保 */
    --gold:          #D89A42;   /* アクセント1：罫・番号・ネイビー上のラベル */
    --gold-dp:       #A9762C;   /* アイボリー上の小さな文字用 */

    /* ---- type ---- */
    --ja:  "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
    --sr:  "Noto Serif JP", "Hiragino Mincho ProN", serif;
    --en:  "Inter", "Helvetica Neue", Arial, sans-serif;

    /* ---- layout ---- */
    --pad:      max(24px, min(7.5vw, 108px));
    --wide:     1240px;
    --measure:  760px;
    --sec:      clamp(62px, 7.6vw, 116px);

    /* ---- motion ---- */
    --ease:  cubic-bezier(0.22, 1, 0.36, 1);
    --ease-s: cubic-bezier(0.4, 0, 0.2, 1);
    --dur:   0.9s;
    --dur-l: 1.15s;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body { margin: 0; background: var(--bg); color: var(--text);
         font-family: var(--ja); font-size: 16px; line-height: 1.9;
         font-feature-settings: "palt" 1; -webkit-font-smoothing: antialiased;
         overflow-x: hidden; }
  img { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  ::selection { background: var(--light-yellow); color: var(--text); }

  .en { font-family: var(--en); }
  .sr { font-family: var(--sr); }
  .wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 var(--pad); }
  .measure { max-width: var(--measure); }

  /* ================= typography ================= */
  .eyebrow { display: inline-flex; align-items: center; gap: 12px;
             font-family: var(--en); font-size: 11px; font-weight: 600;
             letter-spacing: 0.16em; color: var(--text-sub); }
  .eyebrow i { display: block; width: 20px; height: 1px; background: var(--gold); font-style: normal; }
  .cta .eyebrow i, .ft .eyebrow i { background: var(--gold); }

  h1, h2, h3 { margin: 0; font-weight: 700; }
  .d1 { font-size: clamp(32px, 6.4vw, 82px);  letter-spacing: -0.045em; line-height: 1.18; }
  .d2 { font-size: clamp(28px, 3.7vw, 50px);  letter-spacing: -0.028em; line-height: 1.24; }
  .d3 { font-size: clamp(21px, 2.1vw, 28px);  letter-spacing: -0.02em;  line-height: 1.42; font-weight: 600; }
  .lead { font-size: clamp(15px, 1.15vw, 17px); line-height: 2.0; color: var(--text-sub); }
  .note { font-size: 13px; line-height: 1.85; color: var(--text-sub); }
  .num  { font-family: var(--en); font-weight: 600; letter-spacing: -0.02em; font-feature-settings: "tnum" 1; }

  /* 傍点（日本語の誌面らしい強調） */
  .bt { font-weight: 500; color: var(--text);
        -webkit-text-emphasis: filled dot; text-emphasis: filled dot;
        -webkit-text-emphasis-position: over right; text-emphasis-position: over right;
        -webkit-text-emphasis-color: var(--orange); text-emphasis-color: var(--orange); }
  .bt-g { -webkit-text-emphasis-color: var(--green); text-emphasis-color: var(--green); }

  /* ================= motion : 基本 reveal ================= */
  [data-r] { opacity: 0; transform: translateY(24px);
             transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
             transition-delay: var(--d, 0ms); will-change: opacity, transform; }
  [data-r].in { opacity: 1; transform: none; }
  [data-r="fade"] { transform: none; }
  [data-r="right"] { transform: translateX(-20px); }

  /* ================= motion : 見出しのマスク ================= */
  .mask { display: block; overflow: hidden; }
  .mask > span { display: block; transform: translateY(110%);
                 transition: transform var(--dur-l) var(--ease);
                 transition-delay: var(--d, 0ms); will-change: transform; }
  .in .mask > span, .mask.in > span { transform: none; }

  /* ================= motion : 写真 ================= */
  .fig { position: relative; overflow: hidden; background: var(--beige); }
  .fig > img, .fig > .fig-in {
      width: 100%; height: 100%; object-fit: cover;
      transform: scale(1.06);
      transition: transform 1.2s var(--ease), clip-path 1.2s var(--ease);
      will-change: transform; }
  /* クリップは中の画像にかける（親を切ると IntersectionObserver が発火しない） */
  .fig.clip > img, .fig.clip > .fig-in {
      clip-path: inset(100% 0 0 0);
      transition: clip-path 1.15s var(--ease) var(--d, 0ms), transform 1.25s var(--ease) var(--d, 0ms); }
  .fig.clip.in > img, .fig.clip.in > .fig-in { clip-path: inset(0 0 0 0); }
  .fig.in > img, .fig.in > .fig-in { transform: scale(1); }
  .fig.pz > img { transition: transform 1.4s var(--ease); }
  .fig:hover > img { transform: scale(1.03); }

  /* パララックス（画像内部が 10〜20px 動く程度） */
  .para > img, .para > .fig-in { transform: scale(1.10) translate3d(0, var(--py, 0px), 0);
                                 transition: none; }
  .para.in > img, .para.in > .fig-in { transform: scale(1.06) translate3d(0, var(--py, 0px), 0); }

  /* ================= motion : 罫・ライン ================= */
  .rule { height: 1px; background: var(--border); transform: scaleX(0); transform-origin: left center;
          transition: transform 1.1s var(--ease); transition-delay: var(--d, 0ms); }
  .rule.in, .in > .rule { transform: scaleX(1); }

  /* ================= motion : 常時微動する背景オブジェクト ================= */
  @keyframes floatA { 0%,100% { transform: translate(0,0) rotate(0deg); }
                      50%     { transform: translate(7px,-13px) rotate(3deg); } }
  @keyframes floatB { 0%,100% { transform: translate(0,0) rotate(0deg); }
                      50%     { transform: translate(-9px,10px) rotate(-2.5deg); } }
  @keyframes floatC { 0%,100% { transform: translate(0,0) scale(1); }
                      50%     { transform: translate(5px,-8px) scale(1.03); } }
  .obj { position: absolute; pointer-events: none; user-select: none; z-index: 0; }
  .obj.a { animation: floatA 11s ease-in-out infinite; }
  .obj.b { animation: floatB  9s ease-in-out infinite; }
  .obj.c { animation: floatC 13s ease-in-out infinite; }
  .obj.d { animation: floatA 7.5s ease-in-out infinite reverse; }

  /* ================= header ================= */
  .hd { position: fixed; z-index: 60; inset: 0 0 auto 0; height: 78px;
        display: flex; align-items: center;
        background: transparent; border-bottom: 1px solid transparent;
        transition: background-color .45s var(--ease-s), border-color .45s var(--ease-s),
                    backdrop-filter .45s var(--ease-s), height .45s var(--ease-s); }
  .hd .wrap { display: flex; align-items: center; justify-content: space-between; gap: 36px; }
  .hd a, .hd .logo, .hd .navlink { color: var(--white); transition: color .45s var(--ease-s); }
  .hd.on { height: 66px; background: rgba(250,250,247,.88);
           -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
           border-bottom-color: rgba(33,38,45,.08); }
  .hd.on a, .hd.on .logo, .hd.on .navlink { color: var(--text); }
  .hd a.btn-w, .hd.on a.btn-w { color: var(--green); }
  .hd.on a.btn-w { background: var(--green); color: #fff; border-color: var(--green); }
  .hd.on a.btn-w:hover { border-color: var(--orange); color: #fff; }
  .navlink { position: relative; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
  .navlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
                    background: currentColor; transform: scaleX(0); transform-origin: right center;
                    transition: transform .4s var(--ease); }
  .navlink:hover::after { transform: scaleX(1); transform-origin: left center; }

  /* ================= buttons / links ================= */
  .btn { position: relative; isolation: isolate; overflow: hidden;
         display: inline-flex; align-items: center; justify-content: center; gap: 11px;
         height: 54px; padding: 0 28px; border-radius: 3px; font-size: 15px; font-weight: 600;
         letter-spacing: 0.01em; border: 1px solid transparent; white-space: nowrap;
         transition: background-color .4s var(--ease-s), color .35s var(--ease-s),
                     border-color .4s var(--ease-s), transform .3s var(--ease-s),
                     box-shadow .4s var(--ease-s); }
  /* ホバーで朱色が左から差してくる。押した瞬間もはっきりわかるように */
  .btn::before { content: ""; position: absolute; inset: 0; z-index: -1;
                 background: var(--orange); transform: scaleX(0); transform-origin: left center;
                 transition: transform .45s var(--ease); }
  .btn svg { transition: transform .45s var(--ease); }
  .btn:hover svg { transform: translateX(5px); }
  .btn:active { transform: translateY(1px); box-shadow: none; }
  .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .btn-p  { background: var(--green); color: #fff; border-color: var(--green); }
  .btn-p:hover  { color: #fff; border-color: var(--orange); transform: translateY(-1px);
                  box-shadow: 0 8px 20px rgba(25,50,74,.18); }
  .btn-p:hover::before { transform: scaleX(1); }
  .btn-s  { color: var(--green); border-color: rgba(25,50,74,.5); }
  .btn-s:hover  { color: #fff; border-color: var(--orange); transform: translateY(-1px); }
  .btn-s:hover::before { transform: scaleX(1); }
  .btn-l  { color: #fff; border-color: rgba(255,255,255,.5); }
  .btn-l:hover  { color: #fff; border-color: var(--orange); transform: translateY(-1px); }
  .btn-l:hover::before { transform: scaleX(1); }
  .btn-w  { background: #fff; color: var(--green); border-color: #fff; }
  .btn-w:hover  { color: #fff; border-color: var(--orange); transform: translateY(-1px);
                  box-shadow: 0 8px 20px rgba(25,50,74,.2); }
  .btn-w:hover::before { transform: scaleX(1); }
  .btn .sm { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .btn::before { transition: none; }
    .btn:hover { transform: none !important; }
  }

  /* テキストリンク：下線が引かれる */
  .tl { position: relative; display: inline-flex; align-items: center; gap: 9px;
        font-size: 14px; font-weight: 500; color: var(--green); padding-bottom: 5px; }
  .tl::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
                background: rgba(33,38,45,.18); }
  .tl::after  { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
                background: var(--green); transform: scaleX(0); transform-origin: right center;
                transition: transform .5s var(--ease); }
  .tl:hover::after { transform: scaleX(1); transform-origin: left center; }
  .tl svg { transition: transform .45s var(--ease); }
  .tl:hover svg { transform: translateX(5px); }

  /* ================= cards（影は使わない） ================= */
  .card { background: var(--white); border: 1px solid var(--border); border-radius: 3px;
          transition: transform .5s var(--ease), border-color .45s var(--ease-s); }
  .card:hover { transform: translateY(-4px); border-color: #D6D2C7; }

  /* ================= misc ================= */
  .hair { height: 1px; background: var(--border); }
  .chip { display: inline-flex; align-items: center; height: 30px; padding: 0 13px;
          border: 1px solid var(--border); border-radius: 3px; font-size: 12.5px;
          color: var(--text-sub); transition: border-color .35s, color .35s; }
  .chip:hover { border-color: #CFCABE; color: var(--text); }

  /* ---- SP：押せる要素のタップ領域と、小さすぎる文字の底上げ ---- */
  @media (max-width: 767px) {
    .fopts .chip, .mh-tags .chip { height: 40px; padding: 0 15px; font-size: 13px; }
    .tl { min-height: 40px; }
    .mono-wordmark small { font-size: 9.5px; letter-spacing: .12em; }
    .eyebrow, .eyebrow .en { font-size: 11px; }
  }

  /* ================= reduced motion ================= */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; scroll-behavior: auto !important; }
    [data-r] { opacity: 1 !important; transform: none !important; }
    .mask > span { transform: none !important; }
    .fig.clip > img, .fig.clip > .fig-in { clip-path: inset(0 0 0 0) !important; }
    .fig > img, .fig > .fig-in { transform: none !important; }
    .rule { transform: scaleX(1) !important; }
    .obj { animation: none !important; }
    /* ヒーローの背景は普段アニメーションで切り替えている。動きを減らす設定のときは
       切り替えを止めて1枚目を出す（止めるだけだと3枚とも opacity:0 のまま消える） */
    .fv-bg .cut { animation: none !important; opacity: 0 !important; }
    .fv-bg .cut:first-child { opacity: 1 !important; }
    .fv-bg .cut img { animation: none !important; transform: scale(1.02) !important; }
    /* 横に流れる写真の帯も、止めた位置で見えるようにしておく */
    .gtrack { animation-play-state: paused !important; }
    .cxg, .cxm, .cxh, .cxm-tx, .cxa-t, .cxa-c, .cxl-t, .cxh-c span {
        opacity: 1 !important; transform: none !important; }
    .cxp, .chr-fl { display: none !important; }
    .chr-sh, .chr-hd2 { stroke-dashoffset: 0 !important; }
  }

  /* ================= SP：パララックス/フロートを弱める ================= */
  @media (max-width: 767px) {
    .para > img, .para > .fig-in,
    .para.in > img, .para.in > .fig-in { transform: scale(1.02) !important; }
    .obj { animation-duration: 16s; opacity: .7; }
    .obj.sp-hide { display: none; }
    .btn { height: 50px; width: 100%; }

    /* ヘッダーはSPでも横並びのまま（.btn の width:100% を打ち消す） */
    .hd { height: 62px; }
    .hd.on { height: 58px; }
    .hd .logo { white-space: nowrap; }

  /* 下層ページ：最初から不透明。高さの変化（78→66）はTOPと共通 */
  .hd-solid { background: rgba(250,250,247,.88);
              -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
              border-bottom-color: rgba(33,38,45,.08); }
  .hd-solid a, .hd-solid .logo, .hd-solid .navlink { color: var(--text); }
  .hd-solid a.btn-w { background: var(--green); color: #fff; border-color: var(--green); }
  .hd-solid a.btn-w:hover { border-color: var(--orange); color: #fff; }
    .hd .mono-wordmark { font-size: 15px; }
    .hd .mono-wordmark small { font-size: 9.5px; letter-spacing: .12em; }
    .hd .btn { width: auto; height: 38px; padding: 0 14px; font-size: 12px; gap: 7px; }
    .hd .btn .lg { display: none; }
    .hd .btn .sm { display: inline; }
    .hd-nav { gap: 0; }
  }
  .hd .logo { white-space: nowrap; }

  /* 下層ページ：最初から不透明。高さの変化（78→66）はTOPと共通 */
  .hd-solid { background: rgba(250,250,247,.88);
              -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
              border-bottom-color: rgba(33,38,45,.08); }
  .hd-solid a, .hd-solid .logo, .hd-solid .navlink { color: var(--text); }
  .hd-solid a.btn-w { background: var(--green); color: #fff; border-color: var(--green); }
  .hd-solid a.btn-w:hover { border-color: var(--orange); color: #fff; }

  .fv { position: relative; min-height: 100svh; display: flex; align-items: center;
        padding: 132px 0 116px; overflow: hidden; background: #16263A; }
  .fv-bg { position: absolute; inset: 0; z-index: 0; }
  .fv-bg .cut { position: absolute; inset: 0; opacity: 0; animation: heroCut 19.8s linear infinite; }
  .fv-bg .cut img { width: 100%; height: 100%; object-fit: cover;
                    animation: heroDrift 19.8s ease-in-out infinite alternate; }
  @keyframes heroCut { 0%{opacity:0} 4%{opacity:1} 27%{opacity:1} 35%{opacity:0} 100%{opacity:0} }
  @keyframes heroDrift { from { transform: scale(1.08) translate3d(-1.1%,0,0); }
                         to   { transform: scale(1.08) translate3d(1.1%,0,0); } }
  .fv-veil { position: absolute; inset: 0; z-index: 1;
             background:
               linear-gradient(101deg, rgba(13,26,41,.80) 0%, rgba(13,26,41,.56) 44%, rgba(13,26,41,.20) 74%, rgba(13,26,41,.34) 100%),
               linear-gradient(180deg, rgba(13,26,41,.42) 0%, rgba(13,26,41,.10) 26%, rgba(13,26,41,.22) 62%, rgba(13,26,41,.48) 100%); }
  .fv-objs { position: absolute; inset: 0; z-index: 2; }
  .fv-in { position: relative; z-index: 3; color: #fff; }

  /* --- 読み込み時の stagger：ラベル → 1行目 → 2行目 → 本文 → CTA → メタ --- */
  .fv-label, .fv-tag, .fv-body, .fv-cta, .fv-price, .fv-meta, .fv-scroll {
      opacity: 0; transform: translateY(24px);
      transition: opacity 1s var(--ease), transform 1s var(--ease); }
  .fv-h .mask > span { transform: translateY(110%); transition: transform 1.15s var(--ease); }
  body.ready .fv-label { opacity: 1; transform: none; transition-delay: .10s; }
  body.ready .fv-h .mask:nth-child(1) > span { transform: none; transition-delay: .22s; }
  body.ready .fv-h .mask:nth-child(2) > span { transform: none; transition-delay: .34s; }
  body.ready .fv-tag   { opacity: 1; transform: none; transition-delay: .50s; }
  body.ready .fv-body  { opacity: 1; transform: none; transition-delay: .62s; }
  body.ready .fv-cta   { opacity: .999; transform: none; transition-delay: .76s; }
  body.ready .fv-price { opacity: 1; transform: none; transition-delay: .86s; }
  body.ready .fv-meta  { opacity: 1; transform: none; transition-delay: .88s; }
  body.ready .fv-scroll{ opacity: 1; transform: none; transition-delay: 1.0s; }
  body.ready .fv-objs .obj { opacity: 1; }
  .fv-objs .obj { opacity: 0; transition: opacity 1.6s var(--ease) .9s; }

  .fv-label { display: flex; align-items: center; gap: 13px; font-size: 11px; font-weight: 600;
              letter-spacing: .18em; color: rgba(255,255,255,.82); font-family: var(--en); }
  .fv-label i { display: block; width: 26px; height: 1px; background: rgba(255,255,255,.6); }
  .fv-h { margin: 30px 0 0; color: #fff; text-shadow: 0 2px 26px rgba(0,0,0,.30); max-width: 15em; }
  /* サービスコンセプト（H1より弱く、細い罫を添えて静かに） */
  .fv-tag { display: flex; align-items: center; gap: 13px; margin: 24px 0 0;
            font-family: var(--sr); font-size: clamp(15px,1.35vw,18px); font-weight: 500;
            letter-spacing: .06em; color: rgba(255,255,255,.94);
            text-shadow: 0 1px 14px rgba(0,0,0,.36); }
  .fv-tag::before { content: ""; display: block; width: 30px; height: 1px;
                    background: var(--light-yellow); flex-shrink: 0; }
  .fv-body { max-width: 650px; margin: 22px 0 0; color: rgba(255,255,255,.90);
             text-shadow: 0 1px 16px rgba(0,0,0,.34); }
  .fv-body .bt { color: #fff; -webkit-text-emphasis-color: var(--light-yellow); text-emphasis-color: var(--light-yellow); }
  .fv-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 42px; }
  .fv-price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px;
              margin: 24px 0 0; padding: 10px 18px; border-radius: 3px;
              background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
              color: rgba(255,255,255,.92); }
  .fv-price b { font-size: clamp(16px,1.5vw,20px); font-weight: 700; letter-spacing: .01em; color: #fff; }
  .fv-price span { font-size: 12px; color: rgba(255,255,255,.76); }
  .fv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 34px;
             font-size: 12.5px; color: rgba(255,255,255,.74); }
  .fv-meta em { display: block; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.45); }
  .fv-scroll { position: absolute; z-index: 3; left: var(--pad); bottom: 40px;
               display: flex; flex-direction: column; align-items: center; gap: 12px;
               font-size: 9.5px; font-weight: 600; letter-spacing: .2em; color: rgba(255,255,255,.72);
               writing-mode: vertical-rl; }
  .fv-scroll .track { position: relative; width: 1px; height: 58px; background: rgba(255,255,255,.26); overflow: hidden; }
  .fv-scroll .run { position: absolute; left: 0; top: 0; width: 1px; height: 20px; background: #fff;
                    animation: scrollRun 2.6s cubic-bezier(.5,0,.5,1) infinite; }
  @keyframes scrollRun { 0%{transform:translateY(-100%)} 55%,100%{transform:translateY(320%)} }
  @media (max-width: 767px) {
    .fv { min-height: 92svh; padding: 108px 0 92px; }
    .fv-scroll { display: none; }
    .fv-cta { flex-direction: column; }
  }
  /* ===== ヘッダー：ロゴ＋ピル型ナビ＋CTA。スクロールで浮いた島になる ===== */
  .hd .logo { display: inline-flex; align-items: center; gap: 10px; }
  /* ロゴマーク：見開き（左＝つくり手／右＝生活者、中央の綴じ目でつながる） */
  .logo-mk { display: inline-flex; align-items: center; flex-shrink: 0; }
  .logo-mk svg { display: block; width: 36px; height: auto; }
  .logo-mk .lf { transform-box: view-box; transform-origin: 50% 50%;
                 transition: transform .55s var(--ease); }
  .logo-mk .lf-l, .logo-mk .lf-s { fill: var(--green); }
  .logo-mk .lf-r { fill: var(--orange); }
  .logo-mk .lf-s { opacity: .34; }
  /* ヒーロー上（地色が透過しているあいだ）は左の面と綴じ目を白に */
  .hd:not(.on):not(.hd-solid) .logo-mk .lf-l,
  .hd:not(.on):not(.hd-solid) .logo-mk .lf-s { fill: #fff; }
  .hd:hover .logo-mk .lf-l { transform: rotate(-4deg); }
  .hd:hover .logo-mk .lf-r { transform: rotate(4deg); }
  .ft-logo { display: inline-flex; align-items: center; gap: 10px; }
  .ft-mk svg { width: 30px; }
  .ft-mk .lf-l, .ft-mk .lf-s { fill: #fff; }
  .ft-mk .lf-r { fill: var(--gold); }
  .mono-wordmark { font-family: var(--ja); font-size: clamp(15px,1.45vw,19px); font-weight: 700;
                   letter-spacing: .02em; line-height: 1.45; }
  .mono-wordmark small { display: block; margin-top: 3px; font-family: var(--en);
                         font-size: clamp(8px,.75vw,9px); font-weight: 600; letter-spacing: .18em;
                         opacity: .62; }

  .hd .wrap { max-width: 1520px; padding-left: clamp(24px,3vw,52px); padding-right: clamp(24px,3vw,52px); }
  .hd-nav { display: flex; align-items: center; gap: clamp(10px,1.2vw,18px); flex-shrink: 0; }
  .hd-links { display: flex; align-items: center; gap: 2px; flex-shrink: 0;
              padding: 4px; border-radius: 999px;
              background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16);
              transition: background-color .45s var(--ease-s), border-color .45s var(--ease-s); }
  .hd.on .hd-links, .hd-solid .hd-links { background: rgba(33,38,45,.035); border-color: rgba(33,38,45,.07); }
  .navlink { display: inline-flex; align-items: center; height: 30px; padding: 0 clamp(8px,.95vw,13px);
             border-radius: 999px; font-size: clamp(11.5px,1.02vw,13px); font-weight: 500;
             white-space: nowrap; transition: background-color .3s var(--ease-s), color .3s var(--ease-s); }
  .navlink::after { display: none; }
  .navlink:hover { background: rgba(255,255,255,.2); }
  .hd.on .navlink:hover, .hd-solid .navlink:hover { background: rgba(25,50,74,.07); color: var(--green-deep); }

  /* スクロール後は中央に浮く角丸バー */
  .hd.on { left: 50%; right: auto; top: 12px;
           width: min(1320px, calc(100% - 28px)); transform: translateX(-50%);
           height: 62px; border-radius: 999px; border: 1px solid rgba(33,38,45,.07);
           background: rgba(250,250,247,.9);
           box-shadow: 0 10px 34px rgba(33,38,45,.09); }
  .hd.on .wrap { max-width: none; padding-left: 22px; padding-right: 10px; }
  .hd.on .btn { height: 42px; }

  @media (max-width: 1400px) {
    .hd .wrap { padding-left: max(20px, 2vw); padding-right: max(20px, 2vw); gap: 14px; }
    .mono-wordmark { font-size: 15.5px; }
    .mono-wordmark small { font-size: 9.5px; letter-spacing: .12em; }
    .logo-mk svg { width: 31px; }
    .hd .logo { gap: 8px; }
  }

  /* ===== SPメニュー（ハンバーガー＋ドロワー） ===== */
  .burger { display: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
            width: 42px; height: 42px; padding: 0; border: 1px solid currentColor; border-radius: 50%;
            background: transparent; color: inherit; cursor: pointer; }
  .burger span { display: block; width: 16px; height: 1.4px; background: currentColor; border-radius: 1px;
                 transition: transform .4s var(--ease), opacity .3s var(--ease-s); }
  .hd.on .burger, .hd-solid .burger { border-color: rgba(33,38,45,.22); }
  body.nd-open .burger span:nth-child(1) { transform: translateY(6.4px) rotate(45deg); }
  body.nd-open .burger span:nth-child(2) { opacity: 0; }
  body.nd-open .burger span:nth-child(3) { transform: translateY(-6.4px) rotate(-45deg); }

  .nd { position: fixed; inset: 0; z-index: 55; background: rgba(33,38,45,.34);
        opacity: 0; transition: opacity .4s var(--ease-s); }
  .nd.is-open { opacity: 1; }
  .nd-panel { position: absolute; inset: 0 0 auto 0; padding: 86px var(--pad) 28px;
              max-height: 100svh; overflow-y: auto; background: var(--bg);
              border-bottom: 1px solid var(--border);
              transform: translateY(-14px); opacity: 0;
              transition: transform .5s var(--ease), opacity .4s var(--ease-s); }
  .nd.is-open .nd-panel { transform: none; opacity: 1; }
  .nd-links { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
  .nd-links a { display: flex; align-items: center; justify-content: space-between; gap: 14px;
                padding: 17px 2px; border-bottom: 1px solid var(--border);
                font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
  .nd-links a svg { flex: none; color: var(--green); }
  .nd-foot { margin-top: 24px; }
  .nd-cta { width: 100%; height: 54px; }
  .nd-sub { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
            font-size: 13px; font-weight: 500; color: var(--text-sub); }
  .nd-sub svg { color: var(--green); }
  @media (max-width: 1180px) { .burger { display: inline-flex; } }
  @media (min-width: 1181px) { .nd { display: none !important; } }
  body.nd-open { overflow: hidden; }
  /* SPのタップ領域確保（44px目安に近づける） */
  @media (max-width: 767px) {
    .hd .logo { padding: 9px 0; gap: 8px; }
    .pbs-lb b, .svc-foot-lb, .pr-lb .en { font-size: 10.5px; }
    .logo-mk svg { width: 29px; }
    .bc .wrap a, .bc .wrap span { display: inline-flex; align-items: center; min-height: 34px; }
    .fcol ul a { display: inline-flex; align-items: center; min-height: 32px; }
    .ft-btm .en { line-height: 2; }
  }
  /* ドロワーを開いている間はヘッダーを地色の上の配色に固定 */
  body.nd-open .hd { background: transparent; border-bottom-color: transparent; box-shadow: none; }
  body.nd-open .hd a, body.nd-open .hd .logo, body.nd-open .hd .burger { color: var(--text); }
  body.nd-open .hd .burger { border-color: rgba(33,38,45,.22); }
  body.nd-open .hd a.btn-w { background: var(--green); color: #fff; border-color: var(--green); }
  @media (max-width: 1180px) { .hd-links { display: none; }
                               .hd.on { top: 0; width: 100%; border-radius: 0; border-left: 0; border-right: 0;
                                        box-shadow: none; } }

  .gal { padding: clamp(58px,6.4vw,96px) 0 clamp(58px,6.4vw,96px); background: var(--bg); overflow: hidden; }
  .gal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
  .gtrack-wrap { overflow: hidden; }
  .gtrack { display: flex; gap: 22px; width: max-content; padding-left: var(--pad);
            animation: gscroll 105s linear infinite; }
  .gtrack-wrap:hover .gtrack { animation-play-state: paused; }
  @keyframes gscroll { from { transform: translateX(0); } to { transform: translateX(-3618px); } }
  .gcell { margin: 0; width: 380px; flex-shrink: 0; }
  .gcell .fig { width: 380px; height: 262px; border-radius: 3px; }
  @media (max-width: 767px) {
    .gcell, .gcell .fig { width: 268px; }
    .gcell .fig { height: 186px; }
    @keyframes gscroll { from { transform: translateX(0); } to { transform: translateX(-2610px); } }
  }

  .sec { position: relative; padding: var(--sec) 0; }
  .cpt { overflow: hidden; padding-bottom: clamp(72px,8vw,120px); }
  .cpt-objs { position: absolute; inset: 0; z-index: 0; }
  /* 見出し側を少し広く。「お客様の「買う理由」に。」を1行で収める */
  .cpt-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: clamp(32px,5vw,88px);
              margin-top: 34px; align-items: start; }
  .cpt-grid .d2 { font-size: clamp(28px, 3.4vw, 46px); }
  .cpt-body { padding-top: 8px; }
  .cpt-note { margin-top: 16px; letter-spacing: .02em; }

  /* ============ 図解①：写真メダル＋衛星アイコン＋循環の弧 ============ */
  .cx { margin-top: clamp(24px,2.8vw,42px); container-type: inline-size; }
  .cx-cap { display: flex; flex-direction: column; align-items: center; gap: 12px;
            margin: 0 0 clamp(6px,1vw,14px); text-align: center; font-family: var(--sr);
            font-size: clamp(14px,1.35vw,18px); font-weight: 500; letter-spacing: .04em;
            color: var(--text-sub); }
  .cx-cap i { display: block; width: 34px; height: 1px; background: var(--orange);
              transform: scaleX(0); transform-origin: center;
              transition: transform .9s var(--ease) .1s; }
  .cx-cap.in i { transform: scaleX(1); }
  .cx-cap span { display: inline-block; opacity: 0; transform: translateY(8px);
                 transition: opacity .8s var(--ease) .3s, transform .8s var(--ease) .3s; }
  .cx-cap.in span { opacity: 1; transform: none; }
  .cx-stage { position: relative; width: 100%; max-width: 1240px; margin: 0 auto;
              aspect-ratio: var(--w) / var(--h);
              font-size: calc(100cqw / var(--w) * 18.5); }
  .cx-ly { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
  .cx-stage > *:not(.cx-ly) { position: absolute; translate: -50% -50%; z-index: 2; }

  .cxa { stroke: var(--orange); stroke-width: 6; fill: none;
         stroke-dasharray: 1600; stroke-dashoffset: 1600;
         transition: stroke-dashoffset 1.1s var(--ease) var(--d, 0ms); }
  .cxa-l { stroke-width: 2.2; stroke-opacity: .75; }
  .cx-stage.in .cxa { stroke-dashoffset: 0; }
  .cxa-t { padding: .1em .5em; background: var(--bg); border-radius: 2px; white-space: nowrap;
           font-size: .8em; font-weight: 700; letter-spacing: -.01em; color: var(--orange-tx); }
  .cxa-c { text-align: center; font-size: .6em; line-height: 1.6; letter-spacing: .01em;
           color: var(--text-sub); }
  .cxa-c::before { content: ""; display: block; width: 1.4em; height: 1px; margin: 0 auto .7em;
                   background: rgba(214,90,66,.55); }
  .cxl-t { padding: .2em 1em; background: var(--bg); border-radius: 2px; white-space: nowrap;
           font-size: .84em; font-weight: 600; letter-spacing: .02em; color: var(--text-sub); }
  .cxl-r { display: flex; gap: .55em; white-space: nowrap; }
  .cxl-c { display: inline-flex; align-items: center; gap: .45em; height: 2.4em; padding: 0 1em;
           border: 1px solid var(--border); border-radius: 1.2em; background: var(--white);
           font-size: .72em; color: var(--text-sub);
           opacity: 0; transform: translateY(8px);
           transition: opacity .7s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms); }
  .cx-stage.in .cxl-c { opacity: 1; transform: none; }
  .cxl-c svg { flex: none; width: 1em; height: 1em; color: var(--orange); }

  /* ---- 出現シーケンス（ハロー→写真→衛星→矢印→ハブ→循環）---- */
  .cxg, .cxm, .cxh { opacity: 0; transform: scale(.9);
                     transition: opacity .9s var(--ease) var(--d,0ms), transform .9s var(--ease) var(--d,0ms); }
  .cx-stage.in .cxg, .cx-stage.in .cxm, .cx-stage.in .cxh { opacity: 1; transform: none; }
  .cxg-mk { --d: 0ms; } .cxg-cs { --d: 90ms; }
  .cxm-mk { --d: 220ms; } .cxm-cs { --d: 310ms; }
  .cxh { --d: 820ms; }
  .cxm-tx, .cxa-t, .cxa-c, .cxl-t {
      opacity: 0; transform: translateY(9px);
      transition: opacity .8s var(--ease) var(--d,0ms), transform .8s var(--ease) var(--d,0ms); }
  .cx-stage.in .cxm-tx, .cx-stage.in .cxa-t, .cx-stage.in .cxa-c, .cx-stage.in .cxl-t {
      opacity: 1; transform: none; }
  .cxm-mk .cxm-tx { --d: 480ms; } .cxm-cs .cxm-tx { --d: 570ms; }
  .cxh-c span { opacity: 0; transform: translateY(6px);
                transition: opacity .6s var(--ease) calc(1080ms + var(--i,0) * 80ms),
                            transform .6s var(--ease) calc(1080ms + var(--i,0) * 80ms); }
  .cx-stage.in .cxh-c span { opacity: 1; transform: none; }

  /* ---- 常時アニメーション（画面内にある間だけ .live で回す）---- */
  .cxp { stroke: var(--orange); stroke-width: 7; stroke-linecap: round; fill: none;
         stroke-dasharray: 13 100; stroke-dashoffset: 13; opacity: 0; }
  .cxp-l { stroke-width: 3.4; stroke-dasharray: 9 100; }
  .cx-stage.live .cxp { animation: cxflow 2.6s linear infinite var(--fd, 0s); }
  .cx-stage.live .cxp-l { animation: cxflowb 4.4s linear infinite 2.2s; }
  @keyframes cxflow  { 0% { stroke-dashoffset: 13; opacity: 0; } 18% { opacity: 1; }
                       72% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
  @keyframes cxflowb { 0% { stroke-dashoffset: -100; opacity: 0; } 14% { opacity: .85; }
                       78% { opacity: .85; } 100% { stroke-dashoffset: 13; opacity: 0; } }

  @keyframes cxbob     { 0%,100% { translate: -50% -50%; } 50% { translate: -50% -53.5%; } }
  @keyframes cxbreathe { 0%,100% { scale: 1; } 50% { scale: 1.016; } }
  @keyframes cxring    { 0% { transform: scale(1); opacity: .55; }
                         72%,100% { transform: scale(1.15); opacity: 0; } }
  @keyframes cxtag     { 0%,86%,100% { background: var(--light-green); color: #20394F; }
                         7%,17% { background: var(--green-deep); color: #fff; } }
  @keyframes cxpan     { 0%,100% { scale: 1; } 50% { scale: 1.05; } }
  .cx-stage.live .cxs { animation: cxbob 5.6s ease-in-out infinite var(--d, 0ms); }
  .cx-stage.live .cxg { animation: cxbreathe 7.4s ease-in-out infinite; }
  .cx-stage.live .cxg-cs { animation-delay: -3.7s; }
  .cx-stage.live .cxh::after { animation: cxring 3.9s ease-out infinite 1.6s; }
  .cx-stage.live .cxh-c span { animation: cxtag 9s ease-in-out infinite calc(2.2s + var(--i,0) * 1.2s); }
  .cx-stage.live .cxm img { animation: cxpan 22s ease-in-out infinite; }
  .cx-stage.live .cxm-cs img { animation-delay: -11s; }

  /* ハロー（大きな淡い円） */
  .cxg { display: block; aspect-ratio: 1; border-radius: 50%; z-index: 0 !important; }
  .cxg-mk { background: #F2E7D3; }
  .cxg-cs { background: #E5EBF2; }

  /* 写真円＋ラベル */
  .cxm { display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
         box-shadow: 0 16px 44px rgba(33,38,45,.18); }
  .cxm img { width: 100%; height: 100%; object-fit: cover; }
  .cxm-mk img { object-position: 50% 44%; }
  .cxm-cs img { object-position: 52% 34%; }
  .cxm-tx { position: absolute; inset: 0; display: flex; flex-direction: column;
            align-items: center; justify-content: center; gap: .34em;
            text-align: center; color: #fff; padding: 0 8%; }
  .cxm-mk .cxm-tx { background: radial-gradient(circle at 50% 52%, rgba(11,23,37,.58) 0%,
                                                rgba(11,23,37,.34) 62%, rgba(11,23,37,0) 84%); }
  .cxm-cs .cxm-tx { background: radial-gradient(circle at 50% 54%, rgba(16,30,46,.60) 0%,
                                                rgba(16,30,46,.42) 58%, rgba(16,30,46,.14) 88%); }
  .cxm-en { font-family: var(--sr); font-size: .72em; font-weight: 400; letter-spacing: .18em;
            color: rgba(255,255,255,.9); }
  .cxm-tx b { font-size: 1.28em; font-weight: 600; line-height: 1.42; letter-spacing: .01em;
              text-shadow: 0 2px 16px rgba(0,0,0,.35); }
  .cxm-tx em { font-style: normal; font-size: .66em; line-height: 1.7; letter-spacing: .01em;
               color: rgba(255,255,255,.92); text-shadow: 0 1px 10px rgba(0,0,0,.4); }

  /* 中央ハブ */
  .cxh { display: flex; flex-direction: column; align-items: center; justify-content: center;
         gap: .3em; aspect-ratio: 1; border-radius: 50%; text-align: center;
         background: var(--white); border: 1px solid rgba(33,38,45,.18);
         box-shadow: 0 0 0 8px rgba(232,238,244,.55), 0 16px 44px rgba(33,38,45,.07); }
  .cxh::after { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0;
                border: 1px solid rgba(25,50,74,.5); pointer-events: none; }
  .cxh svg { width: 1.75em; height: 1.75em; }
  .cxh b { font-size: 1.18em; font-weight: 700; letter-spacing: -.02em; color: var(--green-deep); }
  .cxh em { font-style: normal; font-size: .68em; line-height: 1.62; color: var(--text-sub); }
  .cxh-c { display: flex; flex-wrap: wrap; justify-content: center; gap: .28em;
           margin-top: .3em; max-width: 82%; }
  .cxh-c span { display: inline-flex; align-items: center; height: 1.85em; padding: 0 .7em;
                border-radius: 1em; background: var(--light-green); font-size: .6em;
                letter-spacing: .01em; color: #20394F; }

  /* 衛星 */
  .cxs { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .08em;
         aspect-ratio: 1; border-radius: 50%; background: var(--white); border: 1px solid var(--border);
         box-shadow: 0 4px 14px rgba(33,38,45,.06);
         text-align: center; opacity: 0; transform: scale(.86);
         transition: opacity .75s var(--ease) var(--d, 0ms), transform .75s var(--ease) var(--d, 0ms); }
  .cx-stage.in .cxs { opacity: 1; transform: none; }
  .cxs svg { width: 1em; height: 1em; margin-bottom: .1em; }
  .cxs em { font-style: normal; font-size: .58em; line-height: 1.42; font-weight: 600;
            letter-spacing: -.03em; color: var(--text); padding: 0 .18em; }
  .cxs i { font-style: normal; font-size: .48em; line-height: 1.3; color: var(--text-faint); }
  .cxs i::before { content: "（"; } .cxs i::after { content: "）"; }
  .cxs-mk { border-color: rgba(214,90,66,.3); }
  .cxs-mk svg { color: var(--orange); }
  .cxs-cs { border-color: rgba(25,50,74,.28); }
  .cxs-cs svg { color: #19324A; }

  /* ===== SP：図を縦に積んだ読みやすい版 ===== */
  .cx-sp { display: none; }
  @media (max-width: 900px) {
    .cx-scroll, .cx .sp-hint { display: none; }
    .cx-sp { display: block; }
    .cxsp-g { padding: 20px 18px; border-radius: 3px; }
    .cxsp-mk { background: #F2E7D3; }
    .cxsp-cs { background: #E5EBF2; }
    .cxsp-hub { background: #fff; border: 1px solid rgba(33,38,45,.2); }
    .cxsp-hd { display: flex; align-items: center; gap: 14px; }
    .cxsp-ph { flex: none; width: 68px; height: 68px; border-radius: 50%; overflow: hidden; }
    .cxsp-ph img { width: 100%; height: 100%; object-fit: cover; }
    .cxsp-mk .cxsp-ph img { object-position: 50% 44%; }
    .cxsp-cs .cxsp-ph img { object-position: 52% 34%; }
    .cxsp-ic { flex: none; display: inline-flex; align-items: center; justify-content: center;
               width: 44px; height: 44px; border-radius: 50%; background: var(--light-green); }
    .cxsp-en { display: block; font-family: var(--sr); font-size: 11px; letter-spacing: .16em;
               color: var(--orange-tx); }
    .cxsp-cs .cxsp-en { color: var(--green-deep); }
    .cxsp-hd b { display: block; margin-top: 3px; font-size: 15.5px; font-weight: 700;
                 letter-spacing: -.02em; line-height: 1.5; }
    .cxsp-hd em { display: block; margin-top: 6px; font-style: normal; font-size: 12px;
                  line-height: 1.75; color: var(--text-sub); }
    .cxsp-li { display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
               margin: 16px 0 0; padding: 0; list-style: none; }
    .cxsp-li li { display: flex; align-items: flex-start; gap: 7px; padding: 9px 10px;
                  background: rgba(255,255,255,.75); border-radius: 3px; }
    .cxsp-li svg { flex: none; margin-top: 1px; }
    .cxsp-li b { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.45;
                 letter-spacing: -.03em; }
    .cxsp-li em { display: block; margin-top: 3px; font-style: normal; font-size: 10.5px;
                  line-height: 1.45; color: var(--text-faint); }
    .cxsp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
    .cxsp-tags span { display: inline-flex; align-items: center; height: 26px; padding: 0 11px;
                      border-radius: 13px; background: var(--light-green); font-size: 11.5px;
                      color: #20394F; }
    .cxsp-ar { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 0; }
    .cxsp-ar i { display: block; width: 1px; height: 16px; background: rgba(214,90,66,.5); }
    .cxsp-ar span { font-size: 12px; font-weight: 700; color: var(--orange-tx); }
    .cxsp-ar em { font-style: normal; font-size: 11px; line-height: 1.6; color: var(--text-sub);
                  text-align: center; }
    .cxsp-loop { margin-top: 18px; padding: 16px 18px; border: 1px dashed rgba(214,90,66,.4);
                 border-radius: 3px; }
    .cxsp-loop-h { display: block; font-size: 12px; font-weight: 600; color: var(--text-sub); }
    .cxsp-loop-r { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
    .cxsp-loop-r span { display: inline-flex; align-items: center; gap: 6px; height: 28px;
                        padding: 0 11px; border-radius: 14px; border: 1px solid var(--border);
                        background: var(--white); font-size: 11.5px; color: var(--text-sub); }
    .cxsp-loop-r svg { flex: none; color: var(--orange); }
  }
  @media (max-width: 900px) {
    .cpt-grid { grid-template-columns: 1fr; gap: 30px; }
    /* SPは図が潰れるので、横スクロールで原寸のまま見せる */
    .cx-stage { min-width: 1240px; font-size: calc(1240px / var(--w) * 18.5); }
    .cx-scroll { margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1);
                 padding: 0 var(--pad) 8px; overflow-x: auto; overscroll-behavior-x: contain;
                 scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .cx-scroll::-webkit-scrollbar { display: none; }
  }

  /* SP：縦積みのカード列を横スワイプに畳む */
  .sp-hint { display: none; }
  @media (max-width: 900px) {
    .sp-scroll { display: grid !important; grid-auto-flow: column; grid-auto-columns: 82%;
                 grid-template-columns: none !important; gap: 13px;
                 margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1);
                 padding: 0 var(--pad) 8px; overflow-x: auto; overscroll-behavior-x: contain;
                 scroll-snap-type: x mandatory; scroll-padding-left: var(--pad);
                 scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .sp-scroll::-webkit-scrollbar { display: none; }
    .sp-scroll > * { scroll-snap-align: start; margin: 0 !important; }
    .sp-hint { display: flex; align-items: center; gap: 8px; margin-top: 12px;
               font-size: 11px; letter-spacing: .06em; color: var(--text-sub); }
    .sp-hint::before { content: ""; width: 22px; height: 1px; background: var(--orange); }
  }

  /* スクロール進捗バー */
  .pbar { position: fixed; left: 0; top: 0; z-index: 60; width: 100%; height: 2px;
          background: rgba(33,38,45,.07); opacity: 0; transition: opacity .5s var(--ease); }
  .pbar.on { opacity: 1; }
  .pbar span { display: block; width: 100%; height: 100%; background: var(--orange);
               transform: scaleX(0); transform-origin: left center; }

  /* 右端セクションインデックス */
  .ix { position: fixed; right: max(14px, 1.6vw); top: 50%; z-index: 55;
        translate: 0 -50%; opacity: 0; pointer-events: none;
        transition: opacity .55s var(--ease); }
  .ix.on { opacity: 1; pointer-events: auto; }
  .ix ol { margin: 0; padding: 0; list-style: none; }
  .ix a { position: relative; display: flex; align-items: center; justify-content: flex-end;
          gap: 9px; height: 26px; text-decoration: none; color: var(--text-sub); }
  .ix .ix-n { font-size: 9.5px; font-weight: 600; letter-spacing: .08em;
              opacity: 0; transform: translateX(6px); color: var(--orange-tx);
              transition: opacity .35s var(--ease), transform .35s var(--ease); }
  .ix .ix-d { display: block; width: 7px; height: 1px; background: rgba(33,38,45,.28);
              transition: width .4s var(--ease), background .4s var(--ease); }
  .ix a.cur .ix-d { width: 20px; background: var(--orange); }
  .ix a.cur .ix-n { opacity: 1; transform: none; }
  .ix a:hover .ix-d { width: 16px; background: var(--text); }
  .ix a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; }
  /* ラベルはホバー／フォーカス時だけ */
  .ix .ix-l { position: absolute; right: 30px; display: flex; align-items: baseline; gap: 8px;
              padding: 5px 11px; border-radius: 3px; white-space: nowrap;
              background: rgba(250,250,247,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
              box-shadow: 0 2px 14px rgba(33,38,45,.09);
              opacity: 0; transform: translateX(6px); pointer-events: none;
              transition: opacity .35s var(--ease), transform .35s var(--ease); }
  .ix a:hover .ix-l, .ix a:focus-visible .ix-l { opacity: 1; transform: none; }
  .ix .ix-l b { font-size: 9.5px; font-weight: 600; letter-spacing: .1em; color: var(--orange-tx); }
  .ix .ix-l em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--text); }
  @media (max-width: 1180px) { .ix { display: none; } }
  @media (prefers-reduced-motion: reduce) {
    .ix, .ix .ix-n, .ix .ix-d, .ix .ix-l, .pbar { transition: none; }
  }

  .mth { background: var(--bg-sub); overflow: hidden; }
  .mth-head { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
              gap: clamp(24px,4vw,72px); align-items: end; }
  .mth .d2 { font-size: clamp(24px,2.7vw,38px); }
  .mth-note { max-width: 440px; }

  /* ---- 全体像を1行で見せるレール ---- */
  .stg-rail { position: relative; margin-top: clamp(40px,4.6vw,64px);
              padding-top: 18px; }
  .stg-rail .pg { position: absolute; left: 0; right: 0; top: 4px; height: 1px;
                  background: rgba(33,38,45,.12); }
  .pg-bar { display: block; width: 100%; height: 100%; background: var(--orange);
            transform: scaleX(var(--p, 0)); transform-origin: left center;
            transition: transform .18s linear; }
  .stg-rail ol { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
                 margin: 0; padding: 0; list-style: none; }
  .rl-i { position: relative; display: flex; align-items: center; }
  .knot { position: absolute; left: 0; top: -18px; width: 9px; height: 9px; border-radius: 50%;
          background: var(--bg-sub); border: 1.5px solid rgba(33,38,45,.22);
          transform: translate(-1px,-4px);
          transition: border-color .45s var(--ease), background-color .45s var(--ease),
                      box-shadow .45s var(--ease); }
  .knot.lit { border-color: var(--orange); background: var(--orange); }
  .rl-i.is-on .knot { box-shadow: 0 0 0 5px rgba(214,90,66,.16); }
  .rl-t { display: flex; align-items: baseline; gap: 9px; font-size: 13px; font-weight: 600;
          letter-spacing: .02em; color: var(--text-faint);
          transition: color .45s var(--ease); }
  .rl-t b { font-size: 11px; font-weight: 700; letter-spacing: .1em; }
  .rl-i.is-on .rl-t { color: var(--orange-tx); }
  .stg-sep { position: absolute; right: clamp(14px,2vw,30px); top: 50%; translate: 0 -50%;
             display: block; width: 14px; height: 10px; color: rgba(33,38,45,.2); }
  .stg-sep svg { width: 100%; height: 100%; }

  /* ---- 各段階（横1行・読みやすい行長） ---- */
  .stg-list { margin: clamp(30px,3.4vw,44px) 0 0; padding: 0; list-style: none; }
  .stg { position: relative; display: grid;
         grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr);
         gap: clamp(22px,3.2vw,60px); align-items: start;
         padding: clamp(30px,3.6vw,50px) 0 clamp(30px,3.6vw,50px) clamp(20px,2.4vw,34px);
         border-top: 1px solid rgba(33,38,45,.12); }
  .stg:last-child { border-bottom: 1px solid rgba(33,38,45,.12); }
  .stg-bar { position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; border-radius: 1px;
             background: var(--orange); transform: scaleY(0); transform-origin: top center;
             transition: transform .8s var(--ease); }
  .stg.is-on .stg-bar { transform: scaleY(1); }

  .stg-l { position: relative; }
  .stg-ghost { position: absolute; left: -6px; top: -34px; z-index: 0;
               font-size: clamp(78px,8.6vw,124px); font-weight: 600; line-height: 1;
               letter-spacing: -.04em; color: rgba(214,90,66,.075);
               opacity: 0; transform: translateY(16px);
               transition: opacity 1s var(--ease), transform 1s var(--ease); }
  .stg.in .stg-ghost { opacity: 1; transform: none; }
  .stg-lb { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px;
            opacity: 0; transform: translateY(10px);
            transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .stg.in .stg-lb { opacity: 1; transform: none; }
  .stg-lb .num { font-size: 12.5px; letter-spacing: .1em; color: var(--orange-tx); }
  .stg-lb i { display: block; width: 20px; height: 1px; background: rgba(33,38,45,.22); }
  .stg-lb > span:nth-child(3) { font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
                                color: var(--text-sub); }
  .stg-ic { display: block; margin-left: auto; opacity: .9; }
  .stg-ttl { position: relative; z-index: 1; margin: 16px 0 0;
             font-size: clamp(19px,2.05vw,27px); font-weight: 700; line-height: 1.6;
             letter-spacing: -.025em; }

  .stg-body { margin: 0; font-size: clamp(14px,1.2vw,15.5px); line-height: 2.1; color: var(--text-sub); }
  .stg-do { margin-top: clamp(20px,2.2vw,28px); padding-top: clamp(16px,1.8vw,22px);
            border-top: 1px solid rgba(33,38,45,.1); }
  .stg-do-h { display: inline-flex; align-items: center; height: 25px; padding: 0 12px; border-radius: 13px;
              background: rgba(25,50,74,.07); font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
              color: var(--green-deep); }
  .stg-do ul { margin: 14px 0 0; padding: 0; list-style: none;
               display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px 22px; }
  .stg-do li { position: relative; padding: 8px 0 8px 20px; font-size: 13.5px; line-height: 1.75;
               color: var(--text);
               opacity: 0; transform: translateY(8px);
               transition: opacity .6s var(--ease) calc(320ms + var(--i,0) * 80ms),
                           transform .6s var(--ease) calc(320ms + var(--i,0) * 80ms); }
  .stg.in .stg-do li { opacity: 1; transform: none; }
  .stg-do li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 8px; height: 8px;
                       border-radius: 50%; border: 1.5px solid rgba(214,90,66,.55);
                       transform: scale(.4); opacity: 0;
                       transition: transform .5s var(--ease) calc(360ms + var(--i,0) * 80ms),
                                   opacity .5s var(--ease) calc(360ms + var(--i,0) * 80ms); }
  .stg.in .stg-do li::before { transform: none; opacity: 1; }

  @media (max-width: 900px) {
    .mth-head { grid-template-columns: 1fr; }
    /* SPはレールをチップ列にして、横スクロールを発生させない */
    .stg-rail { padding-top: 0; }
    .stg-rail .pg, .stg-rail .knot, .stg-sep { display: none; }
    .stg-rail ol { display: flex; flex-wrap: wrap; gap: 8px; }
    .rl-i { padding: 7px 13px; border: 1px solid rgba(33,38,45,.14); border-radius: 16px;
            background: rgba(255,255,255,.6); }
    .rl-i.is-on { border-color: rgba(214,90,66,.45); background: rgba(214,90,66,.08); }
    .rl-t { font-size: 12.5px; }
    .stg { grid-template-columns: 1fr; gap: 20px; padding-left: 20px; }
    .stg-ghost { font-size: 62px; top: -22px; left: -2px; }
    .stg-do ul { grid-template-columns: 1fr; }
  }
  @media (prefers-reduced-motion: reduce) {
    .stg-ghost, .stg-lb, .stg-do li, .stg-do li::before {
        opacity: 1 !important; transform: none !important; }
    .stg-bar { transform: scaleY(1) !important; }
  }

  .sol-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
  .sol-sec .sol-head { align-items: flex-start; }
  .svc-lead { max-width: 560px; }
  .svc-lead2 { margin: 16px 0 0; padding-left: 14px; border-left: 2px solid rgba(33,38,45,.2);
               font-size: 13.5px; line-height: 2; color: var(--text-sub); }

  .svc-list { display: flex; flex-direction: column; margin-top: clamp(44px,5vw,68px); }
  .svc { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
         gap: clamp(26px,3.6vw,64px); align-items: start;
         padding: clamp(34px,4vw,54px) 0; border-top: 1px solid var(--text); }
  .svc:last-child { border-bottom: 1px solid var(--text); }
  .svc-fig { position: sticky; top: 116px; }
  .svc-fig .fig { width: 100%; aspect-ratio: 16 / 10.5; border-radius: 3px; }
  .svc-dia .svc-fig .fig { background: #fff; border: 1px solid var(--border); }
  .svc-dia .svc-fig .fig img { object-fit: contain; }
  .svc-malls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
  .svc-malls span { display: inline-flex; align-items: center; justify-content: center; height: 40px;
                    padding: 0 12px; border: 1px solid var(--border); border-radius: 3px; background: #fff; }
  .svc-malls img { max-height: 20px; width: auto; object-fit: contain; }
  .svc-malls span:first-child img { max-height: 28px; }

  .svc-no { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600;
            color: var(--text-sub); }
  .svc-no .num { font-size: 15px; color: var(--orange-tx); }
  .svc-no i { display: block; width: 22px; height: 1px; background: var(--border); }
  .svc-ttl { margin: 14px 0 0; font-size: clamp(20px,2.1vw,28px); line-height: 1.55; }
  .svc-p { margin: 16px 0 0; font-size: clamp(13.5px,1.15vw,15px); line-height: 2.05; color: var(--text-sub); }
  .svc-do { margin-top: clamp(22px,2.4vw,30px); padding-top: clamp(18px,2vw,24px);
            border-top: 1px solid var(--border); }
  .svc-do-h { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 13px;
              background: var(--light-green); font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
              color: var(--green-deep); }
  .svc-do ul { margin: 14px 0 0; padding: 0; list-style: none;
               display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px 24px; }
  .svc-do li { position: relative; padding: 9px 0 9px 20px; font-size: 13.5px; line-height: 1.8;
               color: var(--text); }
  .svc-do li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 7px; height: 7px;
                       border-radius: 50%; background: rgba(33,38,45,.18); }

  /* セクション末のミニCTA：必要なところから相談できることを伝える */
  .svc-foot { position: relative; overflow: hidden;
              display: grid; grid-template-columns: minmax(0,1fr) minmax(0,320px);
              gap: clamp(24px,3vw,52px); align-items: center;
              margin-top: clamp(32px,3.6vw,48px);
              padding: clamp(26px,3vw,40px) clamp(24px,3vw,42px);
              background: var(--green-tint); border: 1px solid var(--border); border-radius: 3px; }
  /* 背景の風景は右側ほど見えるようにして、左の文章の読みやすさを保つ */
  .svc-foot-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
                 object-position: center 34%; opacity: .62; filter: saturate(.62); }
  .svc-foot::after { content: ""; position: absolute; inset: 0;
                     background: linear-gradient(96deg, rgba(240,242,238,.965) 0%,
                                 rgba(240,242,238,.93) 34%, rgba(240,242,238,.8) 64%,
                                 rgba(240,242,238,.72) 100%); }
  .svc-foot-l, .svc-foot-r { position: relative; z-index: 1; }
  .svc-foot-lb { display: block; font-size: 10px; font-weight: 700; letter-spacing: .18em;
                 color: var(--gold-dp); }
  .svc-foot-h { margin: 12px 0 0; font-size: clamp(19px,2.05vw,26px); font-weight: 700;
                letter-spacing: -.03em; line-height: 1.52; }
  .svc-foot-p { margin: 14px 0 0; max-width: 560px; font-size: 13px; line-height: 2;
                color: var(--text-sub); }
  .svc-foot-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; padding: 0;
                   list-style: none; }
  .svc-foot-tags li { font-size: 11.5px; font-weight: 600; color: var(--green);
                      background: #fff; border: 1px solid var(--border);
                      padding: 5px 11px; border-radius: 999px; }
  .svc-foot-r { text-align: right; }
  .svc-foot-pr { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px;
                 margin: 0 0 16px; color: var(--text); }
  .svc-foot-pr b { font-family: var(--sr); font-size: clamp(32px,3.4vw,44px); font-weight: 600;
                   letter-spacing: -.03em; line-height: 1; color: var(--green); }
  .svc-foot-pr .u { font-size: 12.5px; font-weight: 700; color: var(--text-sub); }
  .svc-foot-pr .u:last-child { color: var(--green); }
  .svc-foot-cta { width: 100%; justify-content: center; }
  .svc-foot-nt { margin: 12px 0 0; font-size: 11.5px; line-height: 1.85; color: var(--text-sub); }

  @media (max-width: 900px) {
    .svc { grid-template-columns: 1fr; gap: 22px; }
    .svc-fig { position: static; }
    .svc-do ul { grid-template-columns: 1fr; }
    .svc-foot { grid-template-columns: 1fr; gap: 24px; }
    .svc-foot-r { text-align: left; }
    .svc-foot-pr { justify-content: flex-start; }
    .svc-foot-nt { text-align: center; }
  }

  .case-sec { background: var(--bg-sub); }
  .case-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px;
               margin-top: clamp(44px,5vw,68px); }
  /* CMS運用前提：画像は16:10で自動トリミング、任意項目が空でも高さが揃うようにする */
  .ccard { display: flex; flex-direction: column; overflow: hidden; }
  .ccard .fig { width: 100%; aspect-ratio: 16 / 10; }
  .ccard .fig img { width: 100%; height: 100%; object-fit: cover; }
  .ccard-in { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 26px; }
  .ccard-tags { display: flex; flex-wrap: wrap; gap: 7px; }
  .ccard-tags .chip { height: 26px; padding: 0 10px; font-size: 11.5px; }
  .ccard-name { margin: 14px 0 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
  .ccard-meta { display: flex; align-items: center; gap: 9px; margin: 9px 0 0; font-size: 12.5px; color: var(--text-sub); }
  .ccard-meta em { display: block; width: 3px; height: 3px; border-radius: 50%; background: var(--border); }
  .ccard-body { margin: 14px 0 0; font-size: 13.5px; line-height: 1.85; color: var(--text-sub);
                padding-top: 14px; border-top: 1px solid var(--border);
                display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .ccard-url { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px;
               font-size: 12px; color: var(--green); }
  .case-more { display: flex; justify-content: flex-end; margin-top: clamp(24px,2.8vw,34px); }
  @media (max-width: 900px) { .case-grid { grid-template-columns: 1fr; } }

  .jn-sec { position: relative; overflow: hidden; }
  .jn-objs { position: absolute; inset: 0; z-index: 0; }
  .jn-two { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(14px,1.6vw,20px);
            margin-top: clamp(36px,4.2vw,54px); }
  .jnb { display: flex; flex-direction: column;
         padding: clamp(24px,2.6vw,34px) clamp(20px,2.4vw,32px) clamp(20px,2.2vw,28px);
         background: var(--bg-sub); border-radius: 3px; }
  .jnb-dl { background: var(--beige); }
  .jnb-hd { padding-bottom: clamp(16px,1.8vw,22px); border-bottom: 1px solid rgba(33,38,45,.12); }
  .jnb-en { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
            color: var(--orange-tx); }
  .jnb-hd b { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 9px;
              font-size: clamp(17px,1.7vw,21px); font-weight: 700; letter-spacing: -.025em; }
  .jnb-hd b i { display: inline-flex; align-items: center; height: 21px; padding: 0 9px; border-radius: 11px;
                background: var(--orange); color: #fff; font-style: normal; font-size: 10.5px;
                font-weight: 700; letter-spacing: .04em; }
  .jnb-hd p { margin: 11px 0 0; font-size: 12.5px; line-height: 1.9; color: var(--text-sub); }

  .jn-cols, .jn-docs { flex: 1; margin: 0; padding: 0; list-style: none; }
  .jn-cols a, .jn-docs a { display: flex; align-items: center; gap: 12px; padding: 15px 0;
                           border-bottom: 1px solid rgba(33,38,45,.1);
                           transition: padding-left .35s var(--ease); }
  .jn-cols a:hover, .jn-docs a:hover { padding-left: 8px; }
  .jn-cols .chip { flex: none; height: 24px; padding: 0 9px; font-size: 11px; background: #fff; }
  .jn-t { flex: 1; font-size: 13.5px; line-height: 1.7; font-weight: 500; letter-spacing: -.01em;
          transition: color .35s var(--ease-s); }
  .jn-cols a:hover .jn-t, .jn-docs a:hover .jn-t { color: var(--green-deep); }
  .jn-cols time { flex: none; font-size: 11.5px; color: var(--text-faint); letter-spacing: .04em; }
  .jn-cols svg, .jn-docs svg { flex: none; color: var(--green); }
  .jn-dfig { flex: none; width: 62px; aspect-ratio: 4 / 2.9; overflow: hidden; border-radius: 2px;
             background: #fff; }
  .jn-dfig img { width: 100%; height: 100%; object-fit: cover; }
  .jn-dtx { flex: 1; min-width: 0; }
  .jn-dtx em { display: block; margin-top: 5px; font-style: normal; font-size: 11.5px;
               color: var(--orange-tx); font-weight: 600; }
  .jnb-go { display: inline-flex; align-items: center; gap: 10px; min-height: 36px;
            margin-top: clamp(14px,1.6vw,20px);
            font-size: 13.5px; font-weight: 600; color: var(--green-deep); }
  .jnb-go svg { transition: transform .45s var(--ease); }
  .jnb-go:hover svg { transform: translateX(5px); }

  .jn-media { position: relative; display: flex; align-items: center; justify-content: space-between;
              gap: 20px 32px; flex-wrap: wrap; overflow: hidden; border-radius: 3px;
              margin-top: clamp(14px,1.6vw,20px);
              padding: clamp(26px,3vw,40px) clamp(24px,2.8vw,40px); background: var(--green-deep); }
  .jn-media-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
                 opacity: .3; transition: transform 1.4s var(--ease); }
  .jn-media:hover .jn-media-bg { transform: scale(1.05); }
  .jn-media-sc { position: absolute; inset: 0;
                 background: linear-gradient(90deg, rgba(16,30,46,.86) 0%, rgba(16,30,46,.62) 60%,
                                             rgba(16,30,46,.42) 100%); }
  .jn-media-tx { position: relative; z-index: 1; max-width: 640px; color: #fff; }
  .jn-media-tx .en { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
                     color: rgba(255,255,255,.6); }
  .jn-media-tx b { display: block; margin-top: 10px; font-size: clamp(16px,1.7vw,21px); font-weight: 700;
                   letter-spacing: -.025em; }
  .jn-media-tx em { display: block; margin-top: 10px; font-style: normal; font-size: 12.5px;
                    line-height: 1.9; color: rgba(255,255,255,.78); }
  .jn-media-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 11px;
                  flex: none; height: 52px; padding: 0 26px; border-radius: 3px;
                  border: 1px solid rgba(255,255,255,.55); color: #fff;
                  font-size: 14.5px; font-weight: 600;
                  transition: background-color .4s var(--ease-s), border-color .4s var(--ease-s); }
  .jn-media:hover .jn-media-btn { background: rgba(255,255,255,.14); border-color: #fff; }

  @media (max-width: 900px) {
    .jn-two { grid-template-columns: 1fr; }
    .jn-media-btn { width: 100%; justify-content: center; }
  }

  /* ===== REASON 09：選ばれる理由 ===== */
  .rsn-head { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr);
              gap: clamp(24px,4vw,72px); align-items: start; }
  .rsn-h { font-size: clamp(28px,3.7vw,50px); line-height: 1.42; letter-spacing: -.03em; }
  .rsn-ac { color: var(--orange-tx); }
  .nw { white-space: nowrap; }
  .rsn-lead { padding-top: clamp(4px,1vw,14px); }
  .rsn-lead p { margin: 0; font-size: clamp(14.5px,1.25vw,16.5px); line-height: 1.95; color: var(--text-sub); }
  .rsn-lead p + p { margin-top: 16px; }

  /* 3つの理由 */
  .rsn-list { margin: clamp(38px,4.4vw,60px) 0 0; padding: 0; list-style: none; }
  .rsn { display: grid; grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr);
         gap: clamp(20px,3vw,52px); align-items: start;
         padding: clamp(28px,3.4vw,46px) 0; border-top: 1px solid var(--border); }
  .rsn:last-child { border-bottom: 1px solid var(--border); }
  .rsn-hd { display: flex; gap: 14px; }
  .rsn-tx { margin-top: clamp(14px,1.6vw,20px); padding-left: 34px; }
  .rsn-no { flex: none; padding-top: .45em; font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
            color: var(--orange-tx); }
  .rsn-ttl { margin: 0; font-size: clamp(18px,1.95vw,25px); font-weight: 700; line-height: 1.6;
             letter-spacing: -.025em; }
  .rsn-tx p { margin: 0; font-size: clamp(13.5px,1.15vw,15px); line-height: 2.05; color: var(--text-sub);
             opacity: 0; transform: translateY(8px);
             transition: opacity .7s var(--ease) calc(140ms + var(--i,0) * 110ms),
                         transform .7s var(--ease) calc(140ms + var(--i,0) * 110ms); }
  .rsn.in .rsn-tx p { opacity: 1; transform: none; }
  .rsn-tx p + p { margin-top: 14px; }

  /* 右カラム：実際の制作物・売り場の写真 */
  .rsn-fig { margin: 0; }
  .rsn-fig .fig { width: 100%; aspect-ratio: 16 / 10.5; border-radius: 3px; }
  .rsn-fig figcaption { margin-top: 10px; font-size: 12px; line-height: 1.75; color: var(--text-faint); }
  /* メンバー紹介（素材がそろったときのみ描画される） */
  .rsn-mb { margin-top: clamp(44px,5vw,70px); }
  .rsn-sub { margin: 0; font-size: clamp(16px,1.6vw,20px); font-weight: 700; letter-spacing: -.02em; }
  .mb-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(20px,2.6vw,38px);
             margin: clamp(22px,2.6vw,32px) 0 0; padding: 0; list-style: none; }
  .mb-fig { width: 100%; aspect-ratio: 4 / 5; border-radius: 3px; }
  .mb-role { display: inline-flex; align-items: center; height: 24px; padding: 0 11px; margin-top: 16px;
             border-radius: 12px; background: rgba(25,50,74,.07); font-size: 11.5px; font-weight: 700;
             color: var(--green-deep); }
  .mb-name { margin: 10px 0 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
  .mb-bio { margin: 10px 0 0; font-size: 13px; line-height: 1.95; color: var(--text-sub); }

  @media (max-width: 900px) {
    .rsn-head { grid-template-columns: 1fr; gap: 22px; }
    .rsn { grid-template-columns: 1fr; gap: 18px; }
    .rsn-hd { gap: 12px; }
    .rsn-tx { padding-left: 0; }
    .mb-grid { grid-template-columns: 1fr; }
  }
  @media (prefers-reduced-motion: reduce) {
    .rsn-tx p { opacity: 1 !important; transform: none !important; }
  }

  .faq-sec { background: var(--bg-sub); }
  .faq-l .d2 { font-size: clamp(26px,2.7vw,38px); }
  .faq-wrap { display: grid; grid-template-columns: minmax(0,.62fr) minmax(0,1.38fr); gap: clamp(28px,4vw,72px); }
  .qa { border-top: 1px solid rgba(33,38,45,.10); }
  .qa:last-child { border-bottom: 1px solid rgba(33,38,45,.10); }
  .q { display: flex; align-items: center; gap: 16px; width: 100%; padding: 22px 0;
       background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
  .q-mark { font-size: 11.5px; font-weight: 600; color: var(--orange-tx); letter-spacing: .1em; }
  .q-txt { flex: 1; font-size: 15.5px; font-weight: 500; letter-spacing: -.01em;
           transition: color .3s var(--ease-s); }
  .q:hover .q-txt { color: var(--green); }
  .q-ic { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
  .q-ic i { position: absolute; left: 0; top: 6px; width: 14px; height: 1.5px; background: var(--text);
            transition: transform .45s var(--ease), opacity .3s; }
  .q-ic i:last-child { transform: rotate(90deg); }
  .qa.open .q-ic i:last-child { transform: rotate(0deg); opacity: 0; }
  .a { max-height: 0; overflow: hidden; transition: max-height .55s var(--ease); }
  .a p { margin: 0 0 24px; padding-left: 30px; font-size: 14.5px; line-height: 1.95; color: var(--text-sub); }
  @media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; } }

  .cta { position: relative; overflow: hidden; padding: clamp(92px,10vw,150px) 0;
         background: var(--green-deep); color: #fff; }
  .cta-bg { position: absolute; inset: 0; z-index: 0; opacity: .42;
            filter: saturate(.55) hue-rotate(172deg) brightness(.96) contrast(1.05); }
  .cta-bg img { width: 100%; height: 100%; object-fit: cover;
                animation: ctaDrift 26s ease-in-out infinite alternate; }
  @keyframes ctaDrift { from { transform: scale(1.06) translate3d(0,-8px,0); }
                        to   { transform: scale(1.06) translate3d(0,8px,0); } }
  .cta::after { content: ""; position: absolute; inset: 0; z-index: 1;
                background: linear-gradient(180deg, rgba(16,30,46,.62) 0%, rgba(16,30,46,.80) 58%, rgba(13,27,43,.92) 100%); }
  .cta-objs { position: absolute; inset: 0; z-index: 2; }
  .cta-in { position: relative; z-index: 3; }
  .cta .d2 { margin-top: 26px; }
  .cta-in > p { max-width: 560px; margin: 28px 0 0; font-size: 15px; line-height: 2.0; color: rgba(255,255,255,.84); }
  .cta-li { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px;
            margin: 24px 0 0; padding: 0; list-style: none; }
  .cta-li li { display: inline-flex; align-items: center; height: 32px; padding: 0 15px;
               border-radius: 16px; border: 1px solid rgba(255,255,255,.3);
               background: rgba(255,255,255,.1); font-size: 12.5px; color: rgba(255,255,255,.92); }
  .cta-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
  .cta-btns .btn-w { background: var(--gold); border-color: var(--gold); color: #14293D; }
  .cta-btns .btn-w:hover { background: #C88B34; border-color: #C88B34; }
  .cta-note { font-size: 12.5px !important; color: rgba(255,255,255,.62) !important; margin-top: 22px !important; }

  .ft { background: var(--green-deep); color: #fff; padding: clamp(56px,6vw,80px) 0 34px;
        border-top: 1px solid rgba(255,255,255,.14); }
  .ft-top { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: clamp(30px,4vw,72px); }
  .ft-brand .sr { display: block; font-size: 19px; font-weight: 600; letter-spacing: .07em; }
  .ft-brand .en { display: block; margin-top: 6px; font-size: 10px; font-weight: 500;
                  letter-spacing: .14em; color: rgba(255,255,255,.55); }
  .ft-brand p { margin: 20px 0 0; font-size: 13px; line-height: 1.95; color: rgba(255,255,255,.66); }
  .ft-cols { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
  .fcol h4 { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: rgba(255,255,255,.9); }
  .fcol ul { margin: 0; padding: 0; list-style: none; }
  .fcol li a { display: block; padding: 7px 0; font-size: 13px; color: rgba(255,255,255,.66);
               transition: color .3s var(--ease-s); }
  .fcol li a:hover { color: #fff; }
  .ft-btm { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
            margin-top: clamp(40px,5vw,60px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14);
            font-size: 11px; letter-spacing: .06em; color: rgba(255,255,255,.55); }
  @media (max-width: 900px) {
    .ft-top { grid-template-columns: 1fr; }
    .ft-cols { grid-template-columns: 1fr; }
    .fcol { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
  }

  /* ===== PROBLEM 03：EC事業における6つのつまずき ===== */
  .pb-sec { background: var(--bg); }
  .pb-h { line-height: 1.42; }
  .pb-note { padding-top: clamp(4px,1vw,12px); max-width: 560px; }
  .pb-note p { margin: 0; font-size: clamp(13.5px,1.2vw,15px); line-height: 2.05; color: var(--text-sub); }
  .pb-note p + p { margin-top: 14px; }

  /* --- 上部のフロー：01〜06 --- */
  .pbf { position: relative; margin: clamp(38px,4.4vw,62px) 0 clamp(16px,1.8vw,24px); }
  .pbf-track { position: absolute; left: 8.3333%; right: 8.3333%; top: 24px; height: 1px;
               background: var(--border); }
  .pbf-track i { display: block; height: 100%; background: var(--green);
                 transform: scaleX(0); transform-origin: left center;
                 transition: transform .85s var(--ease); }
  .pbf.in .pbf-track i { transform: scaleX(var(--p, 1)); }
  .pbf-nodes { display: grid; grid-template-columns: repeat(6, minmax(0,1fr));
               margin: 0; padding: 0; list-style: none; }
  .pbf-nodes a { display: flex; flex-direction: column; align-items: center; gap: 11px;
                 text-decoration: none; color: inherit; padding-bottom: 4px; cursor: pointer;
                 opacity: 0; transform: translateY(9px);
                 transition: opacity .6s var(--ease) calc(340ms + var(--i,0) * 130ms),
                             transform .6s var(--ease) calc(340ms + var(--i,0) * 130ms); }
  .pbf.in .pbf-nodes a { opacity: 1; transform: none; }
  .pbf-dot { display: flex; align-items: center; justify-content: center;
             width: 48px; height: 48px; border-radius: 50%;
             background: var(--bg); border: 1px solid var(--border);
             transition: border-color .4s var(--ease-s), background-color .4s var(--ease-s); }
  .pbf-dot .en { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--gold-dp);
                 transition: color .4s var(--ease-s); }
  .pbf-l { font-size: 12.5px; font-weight: 700; letter-spacing: .01em; text-align: center;
           color: var(--text-faint); transition: color .4s var(--ease-s); }
  .pbf-nodes a.is-done .pbf-dot { border-color: rgba(25,50,74,.45); }
  .pbf-nodes a.is-done .pbf-l { color: var(--text-sub); }
  .pbf-nodes a.is-cur .pbf-dot { background: var(--green); border-color: var(--green); }
  .pbf-nodes a.is-cur .pbf-dot .en { color: #fff; }
  .pbf-nodes a.is-cur .pbf-l { color: var(--text); }
  .pbf-nodes a:hover .pbf-dot { border-color: var(--orange); }
  .pbf-nodes a:hover .pbf-l { color: var(--orange-tx); }

  /* --- カルーセル --- */
  .pbc { outline: none; }
  .pbc-view { position: relative; }
  .pbs { position: relative; margin: 0; padding: 0; list-style: none; }
  .pbs-i { position: relative; overflow: hidden;
           padding: clamp(28px,3.2vw,42px) clamp(24px,2.8vw,40px) clamp(26px,3vw,38px);
           background: var(--bg-sub); border-radius: 3px; scroll-margin-top: 104px; }
  /* JSが効いている場合だけ1枚ずつ表示する（効かない場合は縦に並ぶ） */
  .pbc.is-carousel .pbs-i { position: absolute; left: 0; top: 0; width: 100%;
                            visibility: hidden; pointer-events: none;
                            opacity: 0; transform: translateX(16px);
                            transition: opacity .45s var(--ease), transform .5s var(--ease); }
  .pbc.is-carousel .pbs-i.is-on { position: relative; visibility: visible; pointer-events: auto;
                                  opacity: 1; transform: none; }
  .pbs-i + .pbs-i { margin-top: 14px; }
  .pbc.is-carousel .pbs-i + .pbs-i { margin-top: 0; }

  /* 背景の大きな番号 */
  .pbs-bg { position: absolute; right: clamp(-6px,0vw,6px); top: clamp(-26px,-2vw,-14px);
            font-size: clamp(120px,15vw,210px); font-weight: 600; letter-spacing: -.05em;
            line-height: 1; color: rgba(25,50,74,.045); pointer-events: none; user-select: none; }

  .pbs-hd { position: relative; display: flex; align-items: center; gap: 14px; }
  .pbs-no { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--gold-dp); }
  .pbs-hd i { display: block; width: 26px; height: 1px; background: rgba(25,50,74,.24); }
  .pbs-st { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
  .pbs-ic { margin-left: auto; display: flex; align-items: center; justify-content: center;
            width: 46px; height: 46px; border-radius: 50%;
            background: var(--bg); border: 1px solid var(--border); }
  .pbs-h { position: relative; margin: 16px 0 0; font-size: clamp(20px,2.15vw,29px); font-weight: 700;
           letter-spacing: -.03em; line-height: 1.52; }

  .pbs-2 { position: relative; display: grid;
           grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
           gap: clamp(14px,1.7vw,24px); align-items: stretch;
           margin-top: clamp(22px,2.4vw,32px); }

  /* 課題側：無彩色・点線で「未整理」を表す */
  .pbs-pr { position: relative; padding: clamp(20px,2.2vw,28px);
            background: rgba(40,42,46,.05); border: 1px dashed rgba(40,42,46,.22); border-radius: 3px;
            opacity: 0; transform: translateY(10px);
            transition: opacity .7s var(--ease) .12s, transform .7s var(--ease) .12s; }
  .pbs-i.in .pbs-pr { opacity: 1; transform: none; }
  .pbs-lb { display: flex; align-items: baseline; gap: 10px; margin: 0; }
  .pbs-lb b { font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--text-faint); }
  .pbs-lb em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--text-sub); }
  .pbs-lb.is-sol b { color: var(--orange-tx); }
  .pbs-lb.is-sol em { color: var(--text); }
  .pbs-sym { margin: 16px 0 0; padding: 0; list-style: none; }
  .pbs-sym li { position: relative; padding-left: 17px; font-size: 13px; line-height: 1.95;
                color: var(--text-sub); }
  .pbs-sym li + li { margin-top: 7px; }
  .pbs-sym li::before { content: ""; position: absolute; left: 0; top: .93em; width: 9px; height: 1px;
                        background: rgba(40,42,46,.34); }
  .pbs-cp { margin: 18px 0 0; padding-top: 16px; border-top: 1px dashed rgba(40,42,46,.22);
            font-size: clamp(13.5px,1.25vw,15px); font-weight: 700; line-height: 1.9;
            letter-spacing: -.01em; color: var(--text); }

  /* 矢印：課題 → 解決 */
  .pbs-ar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
            color: var(--orange);
            opacity: 0; transition: opacity .5s var(--ease) .52s; }
  .pbs-i.in .pbs-ar { opacity: 1; }
  .pbs-ar-l { display: block; width: 1px; flex: 1 1 auto; min-height: 14px;
              background: repeating-linear-gradient(to bottom, rgba(214,90,66,.5) 0 3px,
                          transparent 3px 7px); }
  .pbs-ar-c { display: flex; align-items: center; justify-content: center;
              width: 38px; height: 38px; border-radius: 50%;
              background: var(--bg); border: 1px solid rgba(214,90,66,.42); }
  .pbs-i.in .pbs-ar-c svg { animation: pbAr 2.6s ease-in-out infinite 1.1s; }
  @keyframes pbAr { 0%,100% { transform: translateX(0); } 50% { transform: translateX(3px); } }

  /* 解決側：ブランドカラーで「整理されていく」印象 */
  .pbs-so { position: relative; overflow: hidden;
            padding: clamp(20px,2.2vw,28px) clamp(20px,2.2vw,28px) clamp(18px,2vw,24px);
            background: #FFFDF8; border: 1px solid var(--border); border-radius: 3px;
            opacity: 0; transform: translateY(10px);
            transition: opacity .75s var(--ease) .64s, transform .75s var(--ease) .64s; }
  .pbs-so::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
                    background: var(--orange); transform: scaleX(0); transform-origin: left center;
                    transition: transform .9s var(--ease) .78s; }
  .pbs-i.in .pbs-so { opacity: 1; transform: none; }
  .pbs-i.in .pbs-so::before { transform: scaleX(1); }
  .pbs-sol p { margin: 16px 0 0; font-size: 13.5px; line-height: 2.05; color: var(--text-sub); }
  .pbs-kw { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; padding-top: 16px;
            border-top: 1px solid var(--border); }
  .pbs-kw span { font-size: 11.5px; font-weight: 600; letter-spacing: .01em; color: var(--green);
                 background: var(--green-tint); padding: 5px 11px; border-radius: 999px;
                 opacity: 0; transform: translateY(6px);
                 transition: opacity .5s var(--ease) calc(900ms + var(--k,0) * 55ms),
                             transform .5s var(--ease) calc(900ms + var(--k,0) * 55ms); }
  .pbs-i.in .pbs-kw span { opacity: 1; transform: none; }

  /* カルーセルの操作バー */
  .pbc-nav { position: relative; display: flex; align-items: center; gap: clamp(16px,2vw,28px);
             margin-top: clamp(16px,1.8vw,22px); padding-top: clamp(16px,1.8vw,22px); }
  .pbc-meter { position: absolute; left: 0; right: 0; top: 0; height: 2px;
               background: rgba(25,50,74,.1); }
  .pbc-meter i { display: block; height: 100%; background: var(--green);
                 width: calc((var(--p, 0) * 5 / 6 + 1 / 6) * 100%);
                 transition: width .6s var(--ease); }
  .pbc-count { display: flex; align-items: baseline; gap: 7px; margin: 0; flex-wrap: wrap; }
  .pbc-count b { font-size: clamp(18px,1.9vw,24px); font-weight: 600; letter-spacing: -.02em;
                 color: var(--text); line-height: 1; }
  .pbc-count > .en { font-size: 12px; font-weight: 600; color: var(--text-faint); }
  .pbc-count em { font-style: normal; margin-left: 8px; font-size: 12px; color: var(--text-sub); }
  .pbc-btns { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
  .pbc-b { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
           height: 44px; padding: 0; width: 44px; border-radius: 999px; cursor: pointer;
           background: transparent; border: 1px solid var(--border); color: var(--green);
           font-family: inherit; font-size: 13px; font-weight: 600;
           transition: background-color .35s var(--ease-s), border-color .35s var(--ease-s),
                       color .35s var(--ease-s), opacity .35s var(--ease-s); }
  .pbc-b:hover:not(:disabled) { background: var(--green-tint); border-color: var(--green); }
  .pbc-b:disabled { opacity: .3; cursor: default; }
  .pbc-next { position: relative; overflow: hidden; width: auto; padding: 0 20px;
              background: var(--green); border-color: var(--green); color: #fff; }
  .pbc-next:hover:not(:disabled) { background: var(--green-deep); border-color: var(--green-deep);
                                   color: #fff; }
  .pbc-next:hover:not(:disabled) svg { transform: translateX(3px); }
  .pbc-next svg { transition: transform .35s var(--ease-s); }
  /* 表示しきるまでは次へ進めない：進み具合を細い線で示す */
  .pbc-next::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
                     background: var(--gold); }
  .pbc.is-wait .pbc-next:disabled { opacity: .66; }
  .pbc.is-wait .pbc-next::after { animation: pbcWait 1.15s linear forwards; }
  @keyframes pbcWait { from { width: 0; } to { width: 100%; } }

  /* --- まとめ --- */
  .pbw { position: relative; overflow: hidden; margin-top: clamp(34px,4vw,54px);
         padding: clamp(26px,2.8vw,38px) clamp(24px,3vw,44px);
         background: var(--green-deep); color: #fff; border-radius: 3px; }
  .pbw-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
            opacity: .3; }
  .pbw::after { content: ""; position: absolute; inset: 0;
                background: linear-gradient(102deg, rgba(20,41,61,.95) 0%, rgba(20,41,61,.88) 52%,
                            rgba(20,41,61,.74) 100%); }
  .pbw-in { position: relative; z-index: 1; }
  .pbw-h { margin: 0; font-size: clamp(19px,2.1vw,28px); font-weight: 700;
           letter-spacing: -.03em; line-height: 1.6;
           opacity: 0; transform: translateY(10px);
           transition: opacity .8s var(--ease) .1s, transform .8s var(--ease) .1s; }
  .pbw.in .pbw-h { opacity: 1; transform: none; }
  .pbw-p { margin: 14px 0 0; max-width: 720px; font-size: 13.5px; line-height: 1.95;
           color: rgba(255,255,255,.72);
           opacity: 0; transition: opacity .8s var(--ease) .28s; }
  .pbw.in .pbw-p { opacity: 1; }
  .pbw-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 8px;
              margin-top: clamp(18px,2vw,24px); padding-top: clamp(16px,1.8vw,22px);
              border-top: 1px solid rgba(255,255,255,.18); }
  .pbw-flow span, .pbw-ar { opacity: 0;
              transition: opacity .55s var(--ease) calc(440ms + var(--i,0) * 110ms); }
  .pbw.in .pbw-flow span, .pbw.in .pbw-ar { opacity: 1; }
  .pbw-flow span { font-size: 12px; font-weight: 600; padding: 7px 14px;
                   border: 1px solid rgba(255,255,255,.24); border-radius: 999px; }
  .pbw-ar { display: block; color: var(--gold); }
  .pbw-btm { display: flex; align-items: center; justify-content: space-between; gap: 14px 28px;
              flex-wrap: wrap; margin-top: clamp(18px,2vw,24px); }
  .pbw-cta { margin: 0; font-size: clamp(15px,1.45vw,17.5px);
             font-weight: 700; letter-spacing: -.02em;
             opacity: 0; transition: opacity .7s var(--ease) 1.1s; }
  .pbw.in .pbw-cta { opacity: 1; }
  .pbw-link { display: inline-flex; align-items: center; gap: 8px; flex: none;
              font-size: 13.5px; font-weight: 600; color: var(--gold); text-decoration: none;
              border-bottom: 1px solid rgba(216,154,66,.42); padding-bottom: 3px;
              transition: color .4s var(--ease-s), border-color .4s var(--ease-s); }
  .pbw-link:hover { color: #fff; border-color: #fff; }

  /* --- タブレット --- */
  @media (max-width: 1024px) {
    .pbs-2 { grid-template-columns: 1fr; gap: 0; }
    .pbs-ar { flex-direction: row; padding: 12px 0; }
    .pbs-ar-l { width: auto; height: 1px; min-height: 0; min-width: 14px;
                background: repeating-linear-gradient(to right, rgba(214,90,66,.5) 0 3px,
                            transparent 3px 7px); }
    .pbs-ar-c svg { transform: rotate(90deg); }
    .pbs-i.in .pbs-ar-c svg { animation: pbArV 2.6s ease-in-out infinite 1.1s; }
    @keyframes pbArV { 0%,100% { transform: rotate(90deg) translateX(0); }
                       50% { transform: rotate(90deg) translateX(3px); } }
  }

  /* --- SP --- */
  @media (max-width: 767px) {
    .pbf { margin-top: 30px; }
    .pbf-track { display: none; }
    .pbf-nodes { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px 6px; }
    .pbf-dot { width: 40px; height: 40px; }
    .pbf-l { font-size: 11.5px; line-height: 1.5; }
    .pbs-i { padding: 24px 18px 26px; }
    .pbs-bg { font-size: 96px; top: -14px; right: 2px; }
    .pbs-ic { width: 38px; height: 38px; }
    .pbs-ic svg { width: 20px; height: 20px; }
    .pbs-h { font-size: 19px; line-height: 1.62; }
    .pbs-pr, .pbs-so { padding: 18px 17px; }
    .pbs-lb { flex-direction: column; align-items: flex-start; gap: 5px; }
    .pbs-kw span { font-size: 11px; padding: 5px 10px; }
    .pbc-nav { flex-wrap: wrap; gap: 14px; }
    .pbc-count em { flex: 1 0 100%; margin: 4px 0 0; }
    .pbc-btns { width: 100%; margin-left: 0; }
    .pbc-next { flex: 1; }
    .pbw { padding: 26px 20px 28px; }
    .pbw-flow span { font-size: 11.5px; padding: 6px 12px; }
  }

  /* --- 動きを減らす設定 --- */
  @media (prefers-reduced-motion: reduce) {
    .pbs-pr, .pbs-so, .pbs-ar, .pbs-kw span, .pbw-h, .pbw-p, .pbw-cta,
    .pbw-flow span, .pbw-ar, .pbf-nodes a { opacity: 1 !important; transform: none !important; }
    .pbf-track i, .pbs-so::before { transform: scaleX(1) !important; }
    .pbs-i.in .pbs-ar-c svg { animation: none !important; }
    .pbc.is-wait .pbc-next::after { animation: none !important; }
  }

  .ex-body { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
             gap: clamp(24px,3.4vw,56px); margin-top: clamp(38px,4.4vw,58px);
             padding-top: clamp(30px,3.4vw,44px); border-top: 1px solid var(--text); }
  .ex-fig .fig { width: 100%; aspect-ratio: 4 / 3.4; border-radius: 3px; }
  .ex-cap { margin: 12px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--text-sub); }
  .ex-flow { display: flex; flex-direction: column; gap: clamp(18px,2.2vw,26px); }
  .exs { position: relative; padding: clamp(18px,2vw,24px) clamp(18px,2.2vw,26px);
         background: #fff; border: 1px solid var(--border); border-radius: 3px; }
  .exs + .exs::before { content: ""; position: absolute; left: 34px; top: calc(clamp(18px,2.2vw,26px) * -1);
                        width: 1px; height: clamp(18px,2.2vw,26px); background: rgba(214,90,66,.5); }
  .exs-h { display: flex; align-items: center; gap: 11px; font-size: 13px; font-weight: 700;
           letter-spacing: -.01em; }
  .exs-h i { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
             border-radius: 50%; background: var(--orange); color: #fff; font-style: normal;
             font-family: var(--en); font-size: 10.5px; font-weight: 600; }
  .ex-q, .ex-mk { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
  .ex-q li { padding: 8px 14px; border-radius: 14px; background: var(--bg-sub);
             font-size: 13px; color: var(--text); }
  .ex-q li::before { content: "「"; } .ex-q li::after { content: "」"; }
  .ex-mk li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 3px;
              background: var(--light-green); font-size: 13px; color: #20394F; }
  .ex-mk li svg { flex: none; }
  .ex-p { margin: 13px 0 0; font-size: 13.5px; line-height: 1.95; color: var(--text-sub); }
  .ex-p2 { padding-top: 12px; border-top: 1px solid var(--border); }
  .ex-p b { color: var(--green-deep); font-weight: 700; }
  @media (max-width: 900px) { .ex-body { grid-template-columns: 1fr; } }

  .st-sec { background: var(--bg); }
  .st-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(14px,1.6vw,20px);
             margin-top: clamp(36px,4.2vw,54px); }
  .st { display: flex; flex-direction: column;
        padding: clamp(24px,2.6vw,34px) clamp(20px,2.4vw,30px) clamp(26px,2.8vw,34px);
        background: var(--bg-sub); border: 0; border-radius: 3px; }
  .st-hd { display: flex; align-items: center; gap: 12px; padding-bottom: 16px;
           border-bottom: 1px solid rgba(33,38,45,.12); }
  .st-k { flex: none; display: inline-flex; align-items: center; justify-content: center;
          width: 30px; height: 30px; border-radius: 50%; background: var(--green-deep); color: #fff;
          font-size: 12px; font-weight: 700; letter-spacing: .04em; }
  .st-hd b { font-size: clamp(16px,1.55vw,19px); font-weight: 700; line-height: 1.55;
             letter-spacing: -.025em; }
  .st-sub { margin: 16px 0 0; font-size: 13px; line-height: 1.95; color: var(--text-sub); }
  .st-lb { margin: 22px 0 0; font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
           color: var(--text-faint); }
  .st-fl { margin: 12px 0 0; padding: 0; list-style: none; }
  .st-fl li { position: relative; display: flex; align-items: center; gap: 12px;
              padding: 11px 14px; border-radius: 3px; background: #fff; font-size: 13.5px;
              font-weight: 500; letter-spacing: -.01em; }
  .st-fl li + li { margin-top: 20px; }
  /* 段階をつなぐ矢印 */
  .st-fl li + li::before { content: ""; position: absolute; left: 26px; top: -16px;
                           width: 1px; height: 12px; background: rgba(214,90,66,.45); }
  .st-fl li + li::after { content: ""; position: absolute; left: 23px; top: -7px;
                          width: 7px; height: 7px; border-right: 1.4px solid rgba(214,90,66,.8);
                          border-bottom: 1.4px solid rgba(214,90,66,.8); transform: rotate(45deg); }
  .st-n { flex: none; display: inline-flex; align-items: center; justify-content: center;
          width: 22px; height: 22px; border-radius: 50%; background: var(--light-green);
          font-size: 11px; font-weight: 700; color: var(--green-deep); }
  .st-fl li.is-goal { background: var(--green-deep); }
  .st-fl li.is-goal .st-s { color: #fff; font-weight: 600; }
  .st-fl li.is-goal .st-n { background: rgba(255,255,255,.22); color: #fff; }
  @media (max-width: 900px) { .st-grid { grid-template-columns: 1fr; } }

  /* ===== PRICE 07：品書きのように、罫線と余白だけで組む ===== */
  .pr-sec { background: var(--bg); }
  .pr-h { margin: 20px 0 0; font-size: clamp(28px,3.6vw,50px); line-height: 1.36; letter-spacing: -.04em; }

  /* 金額の行。上を太罫、下を細罫で挟んで「一番上の品」の格を持たせる */
  .pr-line { display: grid; grid-template-columns: clamp(96px,9vw,124px) minmax(0,auto) minmax(0,1fr);
             gap: 0 clamp(20px,3vw,52px); align-items: baseline;
             margin-top: clamp(34px,4vw,56px);
             padding: clamp(24px,2.8vw,36px) 0 clamp(22px,2.4vw,30px);
             border-top: 1.5px solid var(--text); border-bottom: 1px solid var(--border); }
  .pr-lb { margin: 0; }
  .pr-lb .en { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .16em;
               color: var(--gold-dp); }
  .pr-lb em { display: block; margin-top: 8px; font-style: normal; font-size: 12.5px;
              font-weight: 700; letter-spacing: .04em; color: var(--text-sub); }
  .pr-num { display: flex; align-items: baseline; gap: 5px; margin: 0; white-space: nowrap;
            opacity: 0; transform: translateY(12px);
            transition: opacity .8s var(--ease) .18s, transform .8s var(--ease) .18s; }
  .pr-line.in .pr-num { opacity: 1; transform: none; }
  .pr-pre { font-style: normal; font-size: clamp(13px,1.15vw,15px); font-weight: 700;
            letter-spacing: .04em; color: var(--text-sub); }
  /* 数字は明朝。安売りの数字ではなく、品目としての数字に見せる */
  .pr-num b { font-size: clamp(44px,5.6vw,78px); font-weight: 600; letter-spacing: -.035em;
              line-height: 1; color: var(--green); font-feature-settings: "palt" 0; }
  .pr-yen { font-style: normal; font-size: clamp(16px,1.6vw,22px); font-weight: 600;
            color: var(--green); }
  .pr-kara { font-style: normal; font-size: clamp(14px,1.3vw,18px); font-weight: 400;
             color: var(--text-faint); margin-left: 2px; }
  .pr-note { margin: 0; font-size: 13px; line-height: 2.05; color: var(--text-sub); }

  /* 金額の中に入りうる仕事の範囲。罫線で区切って並べる */
  .pr-scope { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0;
              margin: 0; padding: 0; list-style: none;
              border-bottom: 1px solid var(--border); }
  .pr-scope li { padding: clamp(14px,1.6vw,20px) clamp(10px,1.2vw,16px);
                 font-size: clamp(11.5px,1.05vw,13px); font-weight: 700; letter-spacing: -.01em;
                 text-align: center; color: var(--text);
                 opacity: 0; transform: translateY(8px);
                 transition: opacity .6s var(--ease) calc(420ms + var(--i,0) * 110ms),
                             transform .6s var(--ease) calc(420ms + var(--i,0) * 110ms); }
  .pr-scope.in li { opacity: 1; transform: none; }
  .pr-scope li + li { border-left: 1px solid var(--border); }

  .pr-exh { margin: clamp(22px,2.4vw,30px) 0 0; font-size: 11px; font-weight: 700;
            letter-spacing: .1em; color: var(--text-faint); }
  .pr-ex { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 10px 0 0; padding: 0; list-style: none; }
  .pr-ex li { position: relative; font-size: 12.5px; color: var(--text-sub); }
  .pr-ex li + li::before { content: ""; position: absolute; left: -12px; top: .34em;
                           width: 1px; height: .95em; background: var(--border); }

  /* 費用が決まるまでの3ステップ */
  .prs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0;
         margin: clamp(36px,4.2vw,56px) 0 0; padding: 0; list-style: none;
         border-top: 1px solid var(--border); }
  .prs li { position: relative; padding: clamp(20px,2.2vw,28px) clamp(18px,2vw,28px) clamp(24px,2.6vw,34px) 0;
            opacity: 0; transform: translateY(10px);
            transition: opacity .7s var(--ease) calc(200ms + var(--i,0) * 180ms),
                        transform .7s var(--ease) calc(200ms + var(--i,0) * 180ms); }
  .prs.in li { opacity: 1; transform: none; }
  .prs li + li { padding-left: clamp(18px,2vw,28px); border-left: 1px solid var(--border); }
  .prs li::after { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 1px;
                   background: var(--green);
                   transition: width .9s var(--ease) calc(140ms + var(--i,0) * 180ms); }
  .prs.in li::after { width: 100%; }
  .prs-n { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em;
           color: var(--orange-tx); }
  .prs b { display: block; margin-top: 12px; font-size: clamp(14.5px,1.4vw,17px); font-weight: 700;
           letter-spacing: -.025em; line-height: 1.6; }
  .prs p { margin: 10px 0 0; font-size: 12.5px; line-height: 1.95; color: var(--text-sub); }

  /* 安心コピー＋CTA */
  .pr-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px 40px;
             flex-wrap: wrap; padding-top: clamp(22px,2.4vw,30px); border-top: 1.5px solid var(--text); }
  .pr-ok { display: flex; align-items: flex-start; gap: 9px; margin: 0; max-width: 430px;
           font-size: clamp(13.5px,1.25vw,15px); font-weight: 700; line-height: 1.85;
           letter-spacing: -.01em; color: var(--text); }
  .pr-ok i { flex: none; display: block; color: var(--green); margin-top: .2em; }
  .pr-act { text-align: right; }
  .pr-cta { display: inline-flex; align-items: center; gap: 10px;
            font-size: clamp(14px,1.3vw,16.5px); font-weight: 700; letter-spacing: -.02em;
            color: var(--text); text-decoration: none;
            border-bottom: 2px solid var(--orange); padding-bottom: 8px;
            transition: color .35s var(--ease-s), border-color .35s var(--ease-s); }
  .pr-cta svg { color: var(--orange); transition: transform .35s var(--ease-s); }
  .pr-cta:hover { color: var(--orange-tx); }
  .pr-cta:hover svg { transform: translateX(4px); }
  .pr-nt { margin: 11px 0 0; font-size: 11.5px; line-height: 1.8; color: var(--text-sub); }

  @media (max-width: 900px) {
    .pr-line { grid-template-columns: 1fr; gap: 14px; }
    .pr-scope { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .pr-scope li { text-align: left; border-top: 1px solid var(--border); }
    .pr-scope li:nth-child(2n) { border-left: 1px solid var(--border); }
    .pr-scope li:nth-child(odd):last-child { grid-column: 1 / -1; }
    .prs { grid-template-columns: 1fr; }
    .prs li { padding-right: 0; padding-bottom: 20px; }
    .prs li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); }
    .prs li::after { display: none; }
    .pr-foot { flex-direction: column; align-items: stretch; }
    .pr-act { text-align: left; }
    .pr-nt { text-align: left; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pr-num, .pr-scope li, .prs li { opacity: 1 !important; transform: none !important; }
    .prs li::after { width: 100% !important; }
  }

  /* 5ステップ：矢印でつないだ流れ */
  .fs-list { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: clamp(12px,1.4vw,18px);
             margin: clamp(38px,4.4vw,58px) 0 0; padding: 0; list-style: none; }
  .fs { position: relative; padding: clamp(20px,2.2vw,26px) clamp(16px,1.8vw,22px);
        background: var(--bg-sub); border-radius: 3px; }
  .fs + .fs::before { content: ""; position: absolute; left: calc(clamp(12px,1.4vw,18px) / -2 - 4px);
                      top: 38px; width: 8px; height: 8px;
                      border-right: 1.5px solid rgba(214,90,66,.75);
                      border-top: 1.5px solid rgba(214,90,66,.75); transform: rotate(45deg); }
  .fs-no { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
           border-radius: 50%; background: var(--green-deep); color: #fff;
           font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }
  .fs b { display: block; margin-top: 14px; font-size: clamp(14px,1.35vw,16.5px); font-weight: 700;
          line-height: 1.6; letter-spacing: -.02em; }
  .fs p { margin: 10px 0 0; font-size: 12.5px; line-height: 1.9; color: var(--text-sub); }

  .fl-note { margin: clamp(34px,4vw,54px) 0 0; max-width: 780px; padding-left: 14px;
             border-left: 2px solid rgba(33,38,45,.18);
             font-size: 12.5px; line-height: 2; color: var(--text-sub); }
  @media (max-width: 900px) {
    .fs-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .fs + .fs::before { display: none; }
  }
  @media (max-width: 520px) { .fs-list { grid-template-columns: 1fr; } }

  /* ================= 下層ページの頭 ================= */
  body.sub { padding-top: 0; }

  .bc { padding: 104px 0 0; }
  .bc .wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
              font-size: 12px; color: var(--text-sub); }
  .bc a { color: var(--text-sub); transition: color .3s var(--ease-s); }
  .bc a:hover { color: var(--green); }
  .bc em { font-style: normal; color: var(--border); }
  .bc span:last-child { color: var(--text); }

  .phero { position: relative; overflow: hidden; padding: clamp(40px,5vw,64px) 0 clamp(52px,6vw,84px); }
  .phero-objs { position: absolute; inset: 0; z-index: 0; }
  .ph-h { margin-top: 22px; max-width: 20em; }
  .ph-lead { margin: 26px 0 0; max-width: 720px; }
  .ph-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 28px;
             font-size: 12.5px; color: var(--text-sub); }
  .ph-meta em { display: block; width: 3px; height: 3px; border-radius: 50%; background: var(--border); }

  /* ================= 記事カード ================= */
  .agrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px; }
  .acard { display: block; }
  .acard .fig { width: 100%; aspect-ratio: 16 / 10; border-radius: 3px; }
  .acard-in { padding-top: 16px; }
  .acard-meta { display: flex; align-items: center; gap: 10px; }
  .acard-meta .chip { height: 25px; padding: 0 10px; font-size: 11.5px; }
  .acard-meta time { font-size: 11.5px; color: var(--text-faint); letter-spacing: .04em; }
  .acard-ttl { margin: 12px 0 0; font-size: 16px; font-weight: 600; line-height: 1.7; letter-spacing: -.01em;
               transition: color .35s var(--ease-s); }
  .acard:hover .acard-ttl { color: var(--green); }
  .acard-go { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
              font-size: 12.5px; font-weight: 500; color: var(--green); }
  .acard-go svg { transition: transform .45s var(--ease); }
  .acard:hover .acard-go svg { transform: translateX(4px); }
  @media (max-width: 900px) { .agrid { grid-template-columns: 1fr; gap: 30px; } }

  /* ================= 事例カード ================= */
  .ccard-foot { display: flex; align-items: center; justify-content: flex-start; gap: 12px;
                margin-top: auto; padding-top: 16px; }
  .ccard-foot .ccard-url { margin-top: 0; }

  /* ================= 資料カード ================= */
  .dgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
  .dcard { display: flex; flex-direction: column; overflow: hidden; }
  .dcard-fig { padding: 24px 24px 0; background: var(--bg-sub); }
  .dcard-fig .fig { width: 100%; aspect-ratio: 3 / 2; border-radius: 2px 2px 0 0; background: var(--white); }
  .dcard-fig .fig img { object-fit: contain; object-position: center top; }
  .dcard-in { display: flex; flex-direction: column; flex: 1; padding: 20px 24px 26px; }
  .dcard-ttl { margin: 12px 0 8px; font-size: 16px; font-weight: 600; line-height: 1.65; letter-spacing: -.01em; }
  .dcard .acard-go { margin-top: auto; padding-top: 16px; }
  @media (max-width: 900px) { .dgrid { grid-template-columns: 1fr; } }

  /* ================= フィルター ================= */
  .filt { padding: 26px clamp(20px,3vw,34px); background: var(--bg-sub); border-radius: 3px; }
  .frow-f { display: grid; grid-template-columns: 108px 1fr; gap: 18px; align-items: start;
            padding: 14px 0; border-bottom: 1px solid rgba(33,38,45,.08); }
  .frow-f:last-of-type { border-bottom: 0; }
  .frow-f > span { padding-top: 6px; font-size: 12px; letter-spacing: .08em; color: var(--text-sub); }
  .fopts { display: flex; flex-wrap: wrap; gap: 8px; }
  .fopts .chip { cursor: pointer; background: var(--white); }
  .fopts .chip.on { background: var(--green); border-color: var(--green); color: #fff; }
  .filt-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px;
               flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(33,38,45,.10); }
  @media (max-width: 767px) { .frow-f { grid-template-columns: 1fr; gap: 8px; } }

  /* ================= ページネーション ================= */
  .pgn { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
         margin-top: clamp(44px,5vw,64px); }
  .pg-n { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px;
          padding: 0 12px; border: 1px solid var(--border); border-radius: 3px; background: var(--white);
          font-family: var(--en); font-size: 13.5px; font-weight: 500; color: var(--text-sub);
          transition: border-color .3s, color .3s, background-color .3s; }
  .pg-n:hover { border-color: var(--green); color: var(--green); }
  .pg-n.cur { background: var(--green); border-color: var(--green); color: #fff; }
  .pg-n.dis { opacity: .38; }
  @media (max-width: 767px) {
    .pgn { gap: 6px; }
    .pg-n { min-width: 40px; height: 40px; padding: 0 9px; font-size: 13px; }
  }

  /* ================= 記事本文 ================= */
  .art { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: clamp(32px,4vw,72px); }
  .art-body { max-width: 760px; }
  .art-body h2 { margin: clamp(44px,5vw,64px) 0 20px; font-size: clamp(21px,2vw,27px); font-weight: 700;
                 letter-spacing: -.02em; line-height: 1.5; padding-left: 18px; border-left: 3px solid var(--green); }
  .art-body h3 { margin: 36px 0 14px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
  .art-body p { margin: 0 0 22px; font-size: 15.5px; line-height: 2.05; color: #3A3A34; }
  .art-body ul { margin: 0 0 24px; padding: 0 0 0 2px; list-style: none; }
  .art-body ul li { position: relative; padding: 0 0 10px 22px; font-size: 15px; line-height: 1.95; color: #3A3A34; }
  .art-body ul li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 5px; height: 5px;
                            border-radius: 50%; background: var(--orange); }
  .art-body .figw { margin: 32px 0; }
  .art-body .figw .fig { width: 100%; aspect-ratio: 16 / 9; border-radius: 3px; }
  .art-body .figw figcaption { margin-top: 10px; font-size: 12px; color: var(--text-sub); }
  .art-quote { margin: 32px 0; padding: 26px 30px; background: var(--bg-sub);
               border-left: 2px solid var(--orange); border-radius: 2px; }
  .art-quote p { margin: 0; font-family: var(--sr); font-size: 16px; line-height: 1.95; font-weight: 500; color: var(--text); }

  .toc { padding: 26px 28px; background: var(--bg-sub); border-radius: 3px; }
  .toc h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 13px; font-weight: 600; }
  .toc h4 .en { font-size: 10px; letter-spacing: .16em; color: var(--text-faint); }
  .toc ol { margin: 0; padding: 0; list-style: none; counter-reset: t; }
  .toc li { counter-increment: t; }
  .toc a { display: flex; gap: 10px; padding: 11px 0; font-size: 13px; line-height: 1.7;
           color: var(--text-sub); border-bottom: 1px solid rgba(33,38,45,.08);
           transition: color .3s var(--ease-s); }
  .toc a::before { content: counter(t,decimal-leading-zero); font-family: var(--en); font-size: 11px;
                   font-weight: 600; color: var(--orange-tx); padding-top: 2px; }
  .toc a:hover { color: var(--green); }
  .toc li:last-child a { border-bottom: 0; }

  .side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 26px; }
  .side-box { padding: 24px 26px; background: var(--white); border: 1px solid var(--border); border-radius: 3px; }
  .side-box h4 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; font-size: 14px; font-weight: 600; }
  .side-box h4 .en { font-size: 10px; letter-spacing: .16em; color: var(--text-faint); }
  .rank { margin: 0; padding: 0; list-style: none; counter-reset: r; }
  .rank li { counter-increment: r; display: flex; gap: 13px; padding: 13px 0;
             border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.75; }
  .rank li:last-child { border-bottom: 0; }
  .rank li::before { content: counter(r); font-family: var(--en); font-size: 15px; font-weight: 600;
                     color: var(--orange-tx); flex-shrink: 0; width: 16px; }
  .rank li:nth-child(n+4)::before { color: var(--text-faint); }
  .side-dl { display: block; padding: 22px 24px; background: var(--green); color: #fff; border-radius: 3px; }
  .side-dl .en { font-size: 10px; font-weight: 600; letter-spacing: .16em; color: rgba(255,255,255,.6); }
  .side-dl b { display: block; margin: 10px 0 8px; font-size: 15px; font-weight: 600; line-height: 1.6; }
  .side-dl span.note2 { display: block; font-size: 12.5px; line-height: 1.8; color: rgba(255,255,255,.76); }
  .side-dl .go { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px;
                 border-top: 1px solid rgba(255,255,255,.22); font-size: 13px; font-weight: 500; }
  .side-dl:hover .go svg { transform: translateX(4px); }
  .side-dl .go svg { transition: transform .45s var(--ease); }
  @media (max-width: 1000px) {
    .art { grid-template-columns: 1fr; }
    .side { position: static; }
  }

  /* ================= 事例詳細 ================= */
  .cd-hero .fig { width: 100%; aspect-ratio: 21 / 9; border-radius: 3px; }
  .cd-facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0;
              margin-top: clamp(36px,4vw,52px); padding: 30px 0; border-top: 2px solid var(--text);
              border-bottom: 1px solid var(--border); }
  .cd-fact { padding: 0 clamp(16px,2.4vw,34px); }
  .cd-fact + .cd-fact { border-left: 1px solid var(--border); }
  .cd-fact:first-child { padding-left: 0; }
  .cd-fact .en { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; color: var(--text-faint); }
  .cd-fact b { display: block; margin-top: 10px; font-family: var(--en); font-size: clamp(28px,3vw,42px);
               font-weight: 600; letter-spacing: -.03em; color: var(--green); line-height: 1; }
  .cd-fact span { display: block; margin-top: 9px; font-size: 12.5px; color: var(--text-sub); }
  .cd-info { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 clamp(24px,4vw,60px); }
  .cd-info div { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 14px 0;
                 border-bottom: 1px solid var(--border); font-size: 13.5px; }
  .cd-info dt, .cd-info .k { color: var(--text-sub); }
  .cd-flow { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; }
  .cd-step { position: relative; padding: 30px clamp(18px,2.4vw,34px) 0; }
  .cd-step + .cd-step { border-left: 1px solid var(--border); }
  .cd-step:first-child { padding-left: 0; }
  .cd-step .en { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; color: var(--orange-tx); }
  .cd-step h3 { margin: 12px 0 10px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
  @media (max-width: 900px) {
    .cd-facts, .cd-flow, .cd-info { grid-template-columns: 1fr; }
    .cd-fact, .cd-step { padding: 22px 0; border-left: 0 !important; border-top: 1px solid var(--border); }
    .cd-fact:first-child, .cd-step:first-child { border-top: 0; }
  }

  /* ================= 資料詳細 ================= */
  .dd { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(30px,4vw,68px); align-items: start; }
  .dd-fig { padding: 30px; background: var(--bg-sub); border-radius: 3px; }
  .dd-fig .fig { width: 100%; aspect-ratio: 3 / 4; background: var(--white); border-radius: 2px; }
  .dd-fig .fig img { object-fit: contain; }
  .dd-list { margin: 24px 0 0; padding: 0; list-style: none; }
  .dd-list li { position: relative; padding: 12px 0 12px 28px; font-size: 14.5px; line-height: 1.8;
                border-bottom: 1px solid var(--border); }
  .dd-list li svg { position: absolute; left: 0; top: 15px; }
  @media (max-width: 900px) { .dd { grid-template-columns: 1fr; } }

  /* ================= フォーム ================= */
  .fsteps { display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(34px,4vw,50px); padding: 0;
            list-style: none; flex-wrap: wrap; }
  .fsteps li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-faint); }
  .fsteps li .en { font-size: 11px; font-weight: 600; letter-spacing: .06em; }
  .fsteps li.cur { color: var(--green); font-weight: 600; }
  .fsteps li.done { color: var(--text-sub); }
  .fsteps i { display: block; width: 26px; height: 1px; background: var(--border); }

  .form { max-width: 860px; }
  .frow { display: grid; grid-template-columns: 220px 1fr; gap: 22px; padding: 24px 0;
          border-top: 1px solid var(--border); align-items: start; }
  .frow:last-of-type { border-bottom: 1px solid var(--border); }
  .flabel { display: flex; align-items: center; gap: 10px; padding-top: 12px; font-size: 14px; font-weight: 500; }
  .req { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 2px;
         background: rgba(25,50,74,.09); color: var(--orange-tx); font-size: 10.5px; font-weight: 600; }
  .opt { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 2px;
         background: rgba(33,38,45,.06); color: var(--text-sub); font-size: 10.5px; font-weight: 600; }
  .inp { width: 100%; padding: 14px 16px; background: var(--white); border: 1px solid var(--border);
         border-radius: 3px; font: inherit; font-size: 15px; color: var(--text);
         transition: border-color .3s var(--ease-s), box-shadow .3s var(--ease-s); }
  .inp::placeholder { color: #B8B4A9; }
  .inp:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(25,50,74,.07); }
  textarea.inp { resize: vertical; line-height: 1.8; }
  .sel { position: relative; }
  .sel select { appearance: none; -webkit-appearance: none; padding-right: 44px; }
  .sel svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none;
             color: var(--text-sub); }
  .opts { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 10px; }
  .opt-i { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; cursor: pointer; }
  .opt-i input { position: absolute; opacity: 0; width: 0; height: 0; }
  .opt-i span { display: block; width: 19px; height: 19px; border: 1px solid #C9C4B8; border-radius: 50%;
                background: var(--white); transition: border-color .25s, box-shadow .25s; }
  .opt-i input[type=checkbox] + span { border-radius: 3px; }
  .opt-i input:checked + span { border-color: var(--green); box-shadow: inset 0 0 0 4px var(--green); }
  .opt-i input[type=checkbox]:checked + span { box-shadow: inset 0 0 0 3px var(--green); }
  .opt-i input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
  .fnote { margin: 9px 0 0; font-size: 12.5px; color: var(--text-sub); }
  .fsubmit { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: clamp(34px,4vw,48px); }
  .fsubmit .btn { min-width: 320px; }
  .fprivacy { display: flex; align-items: flex-start; gap: 10px; justify-content: center;
              font-size: 13px; color: var(--text-sub); }
  .fprivacy a { display: inline-flex; align-items: center; min-height: 32px; color: var(--green);
                text-decoration: underline; text-underline-offset: 3px; }
  @media (max-width: 767px) {
    .frow { grid-template-columns: 1fr; gap: 10px; }
    .flabel { padding-top: 0; }
    .fsubmit .btn { min-width: 0; width: 100%; }
  }

  /* ================= サンクス ================= */
  .thx { text-align: center; padding: clamp(70px,8vw,120px) 0 clamp(56px,6vw,84px); position: relative; overflow: hidden; }
  .thx-objs { position: absolute; inset: 0; z-index: 0; }
  .thx-mark { display: inline-flex; align-items: center; justify-content: center; width: 74px; height: 74px;
              border-radius: 50%; border: 1.5px solid var(--green); color: var(--green); }
  .thx .d2 { margin-top: 26px; }
  .thx-lead { max-width: 620px; margin: 24px auto 0; }
  .thx-card { max-width: 760px; margin: clamp(36px,4vw,52px) auto 0; padding: clamp(26px,3vw,38px);
              background: var(--white); border: 1px solid var(--border); border-radius: 3px; text-align: left; }
  .thx-card-in { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
  .thx-card .fig { width: 132px; aspect-ratio: 3 / 4; flex-shrink: 0; border-radius: 2px; background: var(--bg-sub); }
  .thx-card .fig img { object-fit: contain; }
  .thx-next { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px;
              max-width: 900px; margin: clamp(36px,4vw,52px) auto 0; text-align: left; }
  @media (max-width: 900px) { .thx-next { grid-template-columns: 1fr; } }

  /* ================= 汎用セクション見出し ================= */
  .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap;
              margin-bottom: clamp(30px,4vw,46px); }
  .sec-tight { padding: clamp(64px,7vw,104px) 0; }
  .bg-sub { background: var(--bg-sub); }

  /* ===== 事例一覧：件数が少なくても密度が出る横長レイアウト ===== */
  .cllist { display: flex; flex-direction: column; gap: clamp(16px,2vw,26px); }
  .clrow { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
           gap: clamp(20px,3vw,44px); align-items: center;
           padding: clamp(18px,2.2vw,26px); border: 1px solid var(--border); border-radius: 3px;
           background: rgba(255,255,255,.55);
           transition: background-color .4s var(--ease-s), border-color .4s var(--ease-s),
                       transform .5s var(--ease); }
  .clrow { color: inherit; text-decoration: none; }
  .clrow:hover { background: #fff; border-color: rgba(25,50,74,.3); transform: translateY(-2px); }
  .clrow:hover .cl-name { color: var(--orange-tx); }
  .clrow:hover .fig.clip > img { transform: scale(1.03); }
  .cl-fig { width: 100%; aspect-ratio: 16 / 10.5; border-radius: 2px; }
  .cl-fig img { width: 100%; height: 100%; object-fit: cover; }
  .cl-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
             font-size: 12px; color: var(--text-sub); }
  .cl-meta .en { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--orange-tx); }
  .cl-meta em { display: block; width: 10px; height: 1px; background: var(--border); }
  .cl-name { margin: 12px 0 0; font-size: clamp(18px,1.9vw,24px); font-weight: 700;
             letter-spacing: -.02em; line-height: 1.5;
             transition: color .35s var(--ease-s); }
  .cl-ttl { margin: 10px 0 0; font-size: 13.5px; line-height: 1.9; color: var(--text-sub); }
  .cl-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
  .cl-foot { display: flex; align-items: center; gap: 14px;
             flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
  .cl-foot:empty { display: none; }
  .cl-url { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px;
            letter-spacing: .02em; color: var(--text-faint); }

  /* 公開していない支援の一覧 */
  .cv-lead { margin-top: 22px; }
  .cvbox { margin-top: clamp(26px,3vw,38px); border-top: 1px solid var(--text); }
  .cvrow { display: grid; grid-template-columns: 118px minmax(0,1fr); gap: 18px;
           padding: clamp(16px,1.9vw,22px) 0; border-bottom: 1px solid var(--border); }
  .cvrow-h { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--text-sub); }
  .cvrow-c { display: flex; flex-wrap: wrap; gap: 8px; }
  .cvrow-c span { display: inline-flex; align-items: center; height: 30px; padding: 0 13px;
                  border-radius: 15px; background: rgba(255,255,255,.75);
                  border: 1px solid var(--border); font-size: 12.5px; color: var(--text); }
  .cv-note { margin: clamp(22px,2.6vw,30px) 0 0; max-width: 720px; font-size: 13px; line-height: 2;
             color: var(--text-sub); }
  @media (max-width: 900px) {
    .clrow { grid-template-columns: 1fr; gap: 18px; }
    .cvrow { grid-template-columns: 1fr; gap: 10px; }
  }

  .ct-pts { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap;
            margin-bottom: clamp(26px,3vw,38px); padding: clamp(18px,2vw,24px) clamp(20px,2.2vw,28px);
            background: var(--light-green); border-radius: 3px; }
  .ct-pts-h { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--green-deep); }
  .ct-pts ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .ct-pts li { position: relative; padding-left: 15px; font-size: 13px; line-height: 1.85; color: #20394F; }
  .ct-pts li::before { content: ""; position: absolute; left: 0; top: .85em; width: 7px; height: 1px;
                       background: var(--green); }

/* ===== メディアTOP（静的HTMLではページ内に置かれていたぶん） ===== */

  .mh { position: relative; overflow: hidden; padding: clamp(38px,4vw,58px) 0 clamp(56px,6vw,88px); }
  .mh-objs { position: absolute; inset: 0; z-index: 0; }
  .mh .d2 { font-size: clamp(26px,2.95vw,40px); }
  .mh-in { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.06fr);
           gap: clamp(26px,3.4vw,64px); align-items: start; }
  .mh-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
  .mh-for { margin: 16px 0 0; max-width: 520px; padding-left: 13px; position: relative;
            font-size: 12.5px; line-height: 1.95; color: var(--text-sub); }
  .mh-for::before { content: ""; position: absolute; left: 0; top: .45em; bottom: .45em; width: 2px;
                    border-radius: 1px; background: rgba(33,38,45,.18); }

  /* ===== PICK UP カルーセル（複数枚が覗くフルブリード） ===== */
  .mcar-sec { padding-bottom: clamp(30px,3.4vw,44px); }
  .mcar-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
               margin-bottom: clamp(16px,1.8vw,22px); }
  .mcar-ui { display: flex; align-items: center; gap: 10px; }
  .mcar-num { font-size: 12px; letter-spacing: .06em; color: var(--text-faint); }
  .mcar-num b { font-size: 15px; font-weight: 600; color: var(--text); }
  .mhs-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
               scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
               overscroll-behavior-x: contain; }
  .mhs-track::-webkit-scrollbar { display: none; }
  .mcar-track { gap: clamp(14px,1.6vw,22px); padding: 4px var(--pad) 6px;
                scroll-padding-left: var(--pad); }
  .mcc { flex: 0 0 clamp(258px, 25vw, 352px); scroll-snap-align: start; display: block; }
  .mcc-fig { display: block; width: 100%; aspect-ratio: 16 / 9.4; overflow: hidden; border-radius: 3px;
             background: var(--bg-sub); }
  .mcc-fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
  .mcc:hover .mcc-fig img { transform: scale(1.05); }
  .mcc-in { display: block; padding-top: 14px; }
  .mcc-cat { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 2px;
             background: var(--light-green); font-size: 11px; font-weight: 600; color: #20394F; }
  .mcc-t { display: block; margin-top: 10px; font-size: 14.5px; font-weight: 600; line-height: 1.72;
           letter-spacing: -.01em; transition: color .35s var(--ease-s); }
  .mcc:hover .mcc-t { color: var(--green); }
  .mcc time { display: block; margin-top: 8px; font-size: 11.5px; color: var(--text-faint);
              letter-spacing: .04em; }
  .mcar-bar { position: relative; height: 2px; margin-top: clamp(16px,1.8vw,22px);
              background: rgba(33,38,45,.10); border-radius: 1px; }
  .mcar-bar span { position: absolute; left: 0; top: 0; height: 100%; width: 22%; border-radius: 1px;
                   background: var(--orange); transition: transform .3s var(--ease-s); }
  .mhs-b { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
           padding: 0; border: 1px solid var(--border); border-radius: 50%; background: transparent;
           color: var(--text); cursor: pointer;
           transition: background-color .3s var(--ease-s), border-color .3s var(--ease-s), color .3s var(--ease-s); }
  .mhs-b:hover { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
  .mhs-b[data-prev] svg { transform: rotate(180deg); }

  /* 帯バナー */
  .mbn-sec { padding: 0 0 clamp(34px,4vw,56px); }
  .mbn { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
         padding: clamp(20px,2.4vw,30px) clamp(22px,2.8vw,38px); border-radius: 3px;
         background: var(--green-deep); color: #fff;
         transition: background-color .4s var(--ease-s); }
  .mbn:hover { background: #1E3A56; }
  .mbn-tx b { display: block; font-size: clamp(15px,1.6vw,20px); font-weight: 700; letter-spacing: -.02em; }
  .mbn-tx em { display: block; margin-top: 8px; font-style: normal; font-size: 12.5px; line-height: 1.8;
               color: rgba(255,255,255,.72); }
  .mbn-go { display: inline-flex; align-items: center; gap: 10px; flex: none;
            height: 46px; padding: 0 22px; border-radius: 3px; background: rgba(255,255,255,.12);
            border: 1px solid rgba(255,255,255,.3); font-size: 13.5px; font-weight: 600; }
  .mbn:hover .mbn-go svg { transform: translateX(4px); }
  .mbn-go svg { transition: transform .45s var(--ease); }

  .tp-lead { padding-bottom: 0; }
  .tp-lead + section { padding-top: clamp(26px,3vw,40px); }

  @media (max-width: 767px) {
    .mcar-track { gap: 12px; }
    .mcc { flex: 0 0 76%; }
    .mbn-go { width: 100%; justify-content: center; }
  }

  .nwlist { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
  .nwlist li { border-bottom: 1px solid var(--border); }
  .nwlist a { display: flex; align-items: center; gap: 18px; padding: 20px 4px;
              transition: background-color .3s var(--ease-s), padding .35s var(--ease); }
  .nwlist a:hover { background: rgba(33,38,45,.035); padding-left: 12px; }
  .nwlist .chip { flex-shrink: 0; height: 26px; font-size: 11.5px; }
  .nw-t { flex: 1; font-size: 15px; line-height: 1.7; }
  .nwlist time { flex-shrink: 0; font-size: 12px; color: var(--text-faint); letter-spacing: .04em; }
  .nwlist svg { flex-shrink: 0; color: var(--green); transition: transform .45s var(--ease); }
  .nwlist a:hover svg { transform: translateX(4px); }
  @media (max-width: 767px) {
    .nwlist a { flex-wrap: wrap; gap: 10px; }
    .nw-t { flex: 1 1 100%; order: 3; }
  }

  .rkgrid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 20px; }
  .rkc { display: block; }
  .rk-n { display: block; font-size: 22px; font-weight: 600; color: var(--orange); letter-spacing: -.02em;
          margin-bottom: 12px; }
  .rkc .fig { width: 100%; aspect-ratio: 4 / 3; border-radius: 3px; }
  .rk-in { padding-top: 14px; }
  .rk-in .chip { height: 24px; padding: 0 9px; font-size: 11px; }
  .rk-in p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.75; font-weight: 500;
             transition: color .35s var(--ease-s); }
  .rkc:hover .rk-in p { color: var(--green); }
  @media (max-width: 1000px) { .rkgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (max-width: 560px) { .rkgrid { grid-template-columns: 1fr; } }


/* ================= WordPress の出力に合わせた追加分 ================= */
/* 本文（the_content）のブロック。既存の .art-quote / .figw の値を移植したもの */
.art-body blockquote.wp-block-quote { margin: 26px 0; padding: 20px 22px;
  background: var(--bg-sub); border-left: 2px solid var(--orange); border-radius: 2px; }
.art-body blockquote.wp-block-quote p { margin: 0; font-family: var(--sr); font-size: 15px;
  line-height: 2.05; color: var(--text); }
.art-body blockquote.wp-block-quote cite { display: block; margin-top: 10px; font-style: normal;
  font-size: 12px; color: var(--text-sub); }
.art-body ol { margin: 18px 0 0; padding-left: 22px; }
.art-body ol li { font-size: 15px; line-height: 2.1; color: var(--text); }
.art-body ol li + li { margin-top: 7px; }
.art-body hr, .art-body .wp-block-separator { margin: 34px 0; border: 0;
  border-top: 1px solid var(--border); }
.art-body table, .art-body .wp-block-table table { width: 100%; border-collapse: collapse;
  margin: 24px 0; font-size: 14px; line-height: 1.9; }
.art-body th { text-align: left; padding: 11px 13px; background: var(--green);
  color: #fff; font-weight: 600; font-size: 13px; }
.art-body td { padding: 11px 13px; border-bottom: 1px solid var(--border); vertical-align: top; }
.art-body .wp-block-table { overflow-x: auto; }
.art-body figure.wp-block-image { margin: 30px 0; }
.art-body figure.wp-block-image img { width: 100%; height: auto; border-radius: 3px; }
.art-body figure.wp-block-image figcaption, .art-body .wp-element-caption {
  margin-top: 10px; font-size: 12px; line-height: 1.8; color: var(--text-faint); text-align: left; }

/* 一覧の件数が変わっても崩れないようにする */
.case-grid.is-1 { grid-template-columns: minmax(0,1fr); }
.case-grid.is-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.jn-two.is-one { grid-template-columns: 1fr; }

/* カードのタイトルは2行でトリムし、カードの高さを揃える */
.acard-ttl, .ccard-name, .nw-t {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.acard-ttl { min-height: calc(16px * 1.7 * 2); }

/* ページャーの省略記号 */
.pg-n.dots { border: 0; min-width: 20px; color: var(--text-faint); }

/* 本文へスキップ */
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 12px 18px;
  background: var(--green); color: #fff; font-size: 13px; font-weight: 600; }
.skip:focus { left: 0; }

/* フォーム：入力目的とエラー表示 */
.frow .err { display: block; margin-top: 7px; font-size: 12.5px; color: var(--orange-tx); }
.form-alert { margin: 0 0 20px; padding: 14px 16px; border-radius: 3px;
  background: rgba(214,90,66,.08); border: 1px solid rgba(214,90,66,.3);
  font-size: 13px; line-height: 1.9; color: var(--text); }

  /* ===== 準備中（記事や事例がまだ無いところ） ===== */
  .soon { display: flex; flex-direction: column; align-items: center; justify-content: center;
          gap: 10px; padding: clamp(44px,6vw,76px) clamp(20px,4vw,48px); text-align: center;
          border: 1px dashed var(--border); border-radius: 3px; background: var(--white); }
  .soon-sub { background: var(--bg-sub); }
  .soon-c { padding: clamp(26px,3.4vw,38px) 20px; }
  .soon-en { font-size: 10.5px; font-weight: 600; letter-spacing: .18em; color: var(--gold-dp); }
  .soon-t { margin: 0; font-size: clamp(15px,1.7vw,19px); font-weight: 600; letter-spacing: -.01em; }
  .soon-n { margin: 0; max-width: 34em; font-size: 13px; line-height: 1.95; color: var(--text-sub); }
  .soon-go { margin-top: 6px; }
  .soon::before { content: ""; width: 26px; height: 1px; background: var(--border); margin-bottom: 4px; }

  /* サイドバーのランキングはリンクになる */
  .rank li a { flex: 1; color: inherit; transition: color .3s var(--ease-s); }
  .rank li a:hover { color: var(--green); }

  /* 記事の「この記事でわかること」 */
  .art-sum { padding: 24px 26px; border: 1px solid var(--border); border-radius: 3px;
             background: var(--white); }
  .art-sum h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
                font-size: 13px; font-weight: 600; }
  .art-sum h4 .en { font-size: 10px; letter-spacing: .16em; color: var(--text-faint); }
  .art-sum ul { margin: 0; padding-left: 1.1em; }
  .art-sum li { font-size: 13.5px; line-height: 1.95; }

  .art-sum + .toc { margin-top: 16px; }
  .art-body > .toc:first-child, .art-body > .art-sum:first-child { margin-top: 0; }

  /* 資料詳細の「こんな方へ」 */
  .dd-for { margin-top: 26px; padding: 18px 20px; border-radius: 3px; background: var(--bg-sub); }
  .dd-for .en { font-size: 10px; font-weight: 600; letter-spacing: .16em; color: var(--text-faint); }
  .dd-for p { margin: 8px 0 0; font-size: 13px; line-height: 1.95; color: var(--text-sub); }

  /* 企業概要のリンク */
  .cd-info a { display: inline-flex; align-items: center; gap: 6px; color: var(--green); }

  /* ===== フォームの確認画面 ===== */
  /* .frow は grid 指定があるので、hidden を効かせるには明示が要る */
  .mc-form .frow[hidden], .mc-form .fsubmit[hidden], .fconf[hidden] { display: none !important; }

  /* フォーム未設定のときの案内 */
  .fnotice { padding: clamp(22px,2.6vw,32px); border: 1px dashed var(--border); border-radius: 3px;
             background: var(--white); }
  .fnotice p { margin: 0; font-size: 13.5px; line-height: 1.95; }

  .fconf { margin: 0 0 clamp(26px,3vw,38px); padding: clamp(22px,2.6vw,32px);
           border: 1px solid var(--border); border-radius: 3px; background: var(--white); }
  .fconf-l { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
             gap: 0; margin: 0; }
  .fconf-l dt, .fconf-l dd { margin: 0; padding: 15px 4px; border-top: 1px solid var(--border);
             font-size: 13.5px; line-height: 1.9; }
  .fconf-l dt { font-weight: 600; color: var(--text-sub); }
  .fconf-l dd { white-space: pre-wrap; word-break: break-word; }
  .fconf-l dd.is-empty { color: var(--text-faint); }
  .fconf-act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px,2.4vw,28px); }
  .fconf-act .btn { min-width: 200px; }
  @media (max-width: 640px) {
    .fconf-l { grid-template-columns: 1fr; }
    .fconf-l dt { padding-bottom: 0; border-top: 1px solid var(--border); }
    .fconf-l dd { padding-top: 6px; border-top: 0; }
    .fconf-act .btn { width: 100%; min-width: 0; }
  }

  /* Contact Form 7 のメッセージ */
  .wpcf7-not-valid-tip { display: block; margin-top: 7px; font-size: 12.5px; color: var(--orange-tx); }
  .wpcf7-response-output { margin: 20px 0 0 !important; padding: 14px 16px !important;
                           border: 1px solid var(--border) !important; border-radius: 3px;
                           font-size: 13px; line-height: 1.9; background: var(--bg-sub); }
  .wpcf7-form.invalid .wpcf7-response-output { border-color: rgba(214,90,66,.4) !important; }
  .wpcf7-spinner { display: none; }
  form.mc-form .wpcf7-list-item { margin: 0; }

  /* 資料フォームで、申し込む資料を確認できるようにする */
  .fdoc { display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
          margin: 0 0 clamp(30px,4vw,44px); padding: 18px; max-width: 860px;
          border: 1px solid var(--border); border-radius: 3px; background: var(--white); }
  .fdoc .fig { width: 108px; flex: none; aspect-ratio: 3/4; border-radius: 2px; overflow: hidden;
               background: var(--bg-sub); }
  .fdoc .fig img { width: 100%; height: 100%; object-fit: cover; }
  .fdoc-in { flex: 1; min-width: 220px; }
  .fdoc-in h2 { margin: 10px 0 6px; font-size: 17px; font-weight: 600; line-height: 1.6; }
  .fdoc-in p { margin: 0; }