/* ===========================================================================
   M-create Web制作ページ v2（2026-07-27 全面改修）
   FV-08 透かし文字＋境界またぎ型（templates/fv-samples/fv08-watermark-crossing.html 由来）

   1行コンセプト「公開したあと、予約と問い合わせが実際に動くサイト」
     (A)すり替えテスト＝通過（予約システムを自社開発する制作会社でないと言い切れない）
     (B)受け手テスト  ＝通過（主語が顧客のサイト・結果が書かれている）
     禁止＝装飾のための装飾を置かない → 見栄えは構造の美（グリッド・罫・タイポ）と動きで出す
   自社SaaSはコンセプトでなく「根拠」。見出しでなくリードと maker セクションへ置く。

   モーションは実装標準 §6 の例外枠（制作会社の自社サイト）を適用。
   transform/opacity のみ・reduced-motion で完全停止・スクロールを乗っ取らない。
   =========================================================================== */

:root{
  /* 配色：palette_gate 通過済み（P5 旧配色アンカリングも回避＝旧 #1c402e/#c2360b から色相を離した）
     規約名（--color-primary / --color-accent / --color-bg）を正本として置き、
     以下の短い別名はそこから引く。**別名だけにすると palette_gate がブランド色を
     見つけられず、配色の使い回し検査が丸ごと素通りする**（2026-07-27 実測で [NG]）。 */
  --color-primary:#232733;
  --color-accent:#1f5fd0;
  --color-accent-strong:#1748a4;
  --color-bg:#ffffff;

  --ink:var(--color-primary);            /* 主色・濃色帯 */
  --accent:var(--color-accent);          /* 電青＝「動く・通電」 */
  --accent-strong:var(--color-accent-strong);  /* 白文字面用（AA） */
  --bg:var(--color-bg);
  --bg-alt:#f5f7fa;
  --fg:#232733;
  --fg-sub:#3c4250;
  --muted:#6a7180;
  --rule:#e2e5ea;
  --rule-dark:rgba(255,255,255,.16);

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;

  --text-sm:14px; --text-base:16px; --text-lg:18px;
  --radius:0px;             /* 角丸ゼロ＝「構造の美」の一貫（角丸と混在させない） */
  --wrap:1160px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
/* 書体（2026-07-27 実測にもとづき確定）
   和文＝**システムフォント**。webfont（Zen Kaku Gothic New）は採用しない。
     実測：見出し14文字58px が ヒラギノ+palt 690px に対し Zen Kaku 900 は 812px＝**17.7% 横に伸びる**。
     しかも Zen Kaku には約物詰め（palt）のテーブルが無く（palt 有無で 812px 同値）、
     `text-spacing-trim` も Chrome 未対応のため **あとから詰められない**。
     letter-spacing -0.06em まで追い込んでも 110.6% 止まりで、全文字が詰まって可読性が落ちる。
     このサイトの核は密度とジャンプ率 20.9x なので、17.7% の伸びは核を削る。
     加えて和文 webfont は CSS だけで 110.5KB（121サブセット定義）＝描画待ちの実費。
   欧文＝**Manrope を webfont で当てる**。透かし・ラベル・数字はこのデザインの顔で、
     latin サブセットなら 3〜25KB。**和文の密度には影響しない**ので、ここだけ端末差を消す。
   [WARN] 読み込まないフォント名を font-family の先頭に置かないこと。
     そのフォントが入っている端末でだけ突然 17.7% 伸びる（以前ここに Zen Kaku が残っていた）。 */
:root{
  --font-jp:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic",YuGothic,
            "Noto Sans JP",system-ui,sans-serif;
  --font-en:"Manrope","Helvetica Neue",Arial,sans-serif;
}
body{
  font-family:var(--font-jp);
  color:var(--fg);background:var(--bg);
  font-size:var(--text-base);line-height:1.8;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  line-break:strict;word-break:auto-phrase;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s-6)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* スキップリンク：left:-9999px の退避は使わない。
   Chrome 検証モード（touch エミュレーション）では**左外もパン可能**になり横ブレ源になる
   （sp_devmode_check で実測・NG）。clip で潰して常に viewport 内へ置く。 */
.skip{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;
      clip-path:inset(50%);white-space:nowrap;
      background:var(--accent);color:#fff;z-index:100;text-decoration:none}
.skip:focus{width:auto;height:auto;clip-path:none;padding:10px 16px}

/* ============================ ヘッダー ============================ */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
     backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--rule)}
.top__in{display:flex;align-items:center;gap:var(--s-6);height:62px}
.brand{font-weight:800;letter-spacing:.02em;font-size:18px;white-space:nowrap;text-decoration:none}
.brand span{font-weight:400;font-size:11px;color:var(--muted);margin-left:var(--s-2);letter-spacing:.06em}
.gnav{display:flex;gap:var(--s-6);margin-left:auto;font-size:var(--text-sm);font-weight:600}
.gnav a{text-decoration:none;position:relative;padding:5px 0}
.gnav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
               background:var(--accent);transition:right .2s ease}
@media(hover:hover){.gnav a:hover::after{right:0}.gnav a:hover{transform:translateY(-1px)}}
.gnav a{transition:transform .18s ease-out}
.head-cta{display:inline-flex;align-items:center;height:40px;padding:0 var(--s-4);
          background:var(--accent);color:#fff;font-size:13px;font-weight:700;
          text-decoration:none;transition:background .2s ease}
@media(hover:hover){.head-cta:hover{background:var(--accent-strong)}}
.hamb{display:none;width:42px;height:42px;margin-left:auto;border:1px solid var(--rule);
      background:none;cursor:pointer;font-size:18px;line-height:1;color:var(--fg)}
@media(max-width:1023px){.gnav,.head-cta{display:none}.hamb{display:block}}

/* ドロワー */
/* [WARN] ドロワーを translateX(100%) で画面外へ退避すると、fixed inset:0 の親に
   overflow:hidden があっても **タッチ環境で横パン（グラグラ）の源**になる（web_jp_gate SP2）。
   → 横スライドをやめ、**フェード＋わずかな縦rise** で常に viewport 内に収める。
   現行サイト（v1）も横スライドを使っていない＝同じ方式に揃える。 */
.drawer{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none;overflow:hidden}
.drawer[data-open="true"]{visibility:visible;pointer-events:auto}
.drawer__scrim{position:absolute;inset:0;background:rgba(35,39,51,.5);opacity:0;transition:opacity .2s ease}
.drawer[data-open="true"] .drawer__scrim{opacity:1}
.drawer__panel{position:absolute;right:0;top:0;bottom:0;width:min(84vw,340px);background:#fff;overscroll-behavior:contain;
               padding:var(--s-6);opacity:0;transform:translateY(-8px);
               transition:opacity .22s ease,transform .22s ease;
               display:flex;flex-direction:column;gap:var(--s-2);overflow-y:auto}
.drawer[data-open="true"] .drawer__panel{opacity:1;transform:none}
.drawer__close{align-self:flex-end;width:42px;height:42px;border:1px solid var(--rule);
               background:none;cursor:pointer;font-size:18px;line-height:1;color:var(--fg)}
.drawer__panel a{padding:14px 4px;border-bottom:1px solid var(--rule);text-decoration:none;font-weight:600}
.drawer__cta{margin-top:var(--s-4);background:var(--accent);color:#fff;text-align:center;
             padding:15px!important;border-bottom:0!important;font-weight:700}

.locale{font-size:12px;color:var(--muted);padding:9px 0;border-bottom:1px solid var(--rule)}

/* ============================ FV ============================ */
.fv{position:relative;overflow:hidden;padding:40px 0 0}
.fv__ghost{position:absolute;left:50%;top:4px;margin:0;pointer-events:none;user-select:none;
           font-size:clamp(104px,24vw,272px);line-height:.82;font-weight:800;letter-spacing:-.035em;
           color:rgba(35,39,51,.085);white-space:nowrap;
           transform:translate(-50%,var(--py,0px));will-change:transform;
           animation:flow 42s linear infinite}
@keyframes flow{from{transform:translate(-50%,var(--py,0px))}
                to{transform:translate(calc(-50% - 1180px),var(--py,0px))}}
.fv__in{position:relative}
.fv__eyebrow{font-size:13px;letter-spacing:.14em;color:var(--muted);margin:0 0 var(--s-3)}
.fv__h{font-size:clamp(27px,5.2vw,66px);line-height:1.2;letter-spacing:-.015em;font-weight:800;
       position:relative;z-index:2}
.fv__h em{font-style:normal;color:var(--accent)}
.fv__lead{max-width:40em;margin:var(--s-4) 0 0;font-size:var(--text-base);color:var(--fg-sub)}

.cta{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-6)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;
     font-weight:700;font-size:15px;text-decoration:none;border:2px solid transparent;
     transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
@media(hover:hover){.btn:hover{transform:translateY(-2px)}}
.btn--primary{background:var(--accent);color:#fff}
@media(hover:hover){.btn--primary:hover{background:var(--accent-strong)}}
.btn--ghost{border-color:currentColor}
@media(hover:hover){.btn--ghost:hover{background:var(--ink);color:#fff}}
.btn--sm{min-height:42px;padding:0 18px;font-size:13px}
.note{font-size:13px;color:var(--muted);margin-top:var(--s-3)}
@media(max-width:599px){.cta .btn{width:100%}}

/* 境界またぎ（この型の中核）
   [WARN] 帯に transform を付けると配置済み要素と同じ描画層へ移り、DOM 順で後ろの帯が
   白文字の上に被さって**またぎが消える**（2026-07-27 実測）。z-index を明示して固定する。 */
.cross{position:relative;margin-top:58px;isolation:isolate}
.cross__band{background:var(--ink);color:#fff;padding:40px 0 22px;position:relative;z-index:1;
             transform-origin:top;transform:scaleY(var(--sy,1))}
.cross__band>*{transform:scaleY(calc(1 / var(--sy,1)));transform-origin:top}
.cross__over{position:absolute;left:0;right:0;top:-40px;pointer-events:none;z-index:2}
.cross__over .wrap{position:relative}
.cross__line{font-size:clamp(24px,4.6vw,58px);line-height:1.18;letter-spacing:-.015em;
             font-weight:800;white-space:nowrap}
.cross__line--dark{color:var(--ink)}
.cross__line--light{position:absolute;left:var(--s-6);top:0;color:#fff;clip-path:inset(40px 0 0 0)}
.band__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
.band__grid section{border-left:3px solid var(--accent);padding-left:var(--s-3)}
.cross .band__k{margin:0 0 2px;font-size:11px;letter-spacing:.08em;color:#aeb6c4;font-weight:600}
.cross .price{font-size:20px;font-weight:800;letter-spacing:-.01em}
.cross .price small{font-size:12px;font-weight:400;color:#c8cedb;margin-left:4px}
.cross .note{color:#c8cedb}
.cross .note strong{color:#fff}

/* ============================ セクション共通 ============================ */
.sec{padding:var(--s-16) 0}
.sec--alt{background:var(--bg-alt)}
.sec--dark{background:var(--ink);color:#fff}
.sec--dark .lead{color:#c8cedb}
.sec--dark .card{background:rgba(255,255,255,.05);border-color:var(--rule-dark)}
.eyebrow{font-size:12px;letter-spacing:.14em;color:var(--muted);margin:0 0 var(--s-2)}
.sec--dark .eyebrow{color:#aeb6c4}
.h2{font-size:clamp(23px,3.5vw,40px);line-height:1.35;letter-spacing:-.015em;font-weight:800;margin:0}
.h2 em{font-style:normal;color:var(--accent)}
.sec--dark .h2 em{color:#7fb0ff}
.lead{margin:var(--s-4) 0 0;max-width:46em;color:var(--fg-sub)}
.sec__head{margin-bottom:var(--s-10)}

/* カード：土台が形状を持ち、派生は色・装飾のみ足す（実装標準 §4） */
.cards{display:grid;gap:var(--s-6);grid-template-columns:repeat(3,1fr);align-items:stretch}
.cards--2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--rule);padding:var(--s-6);
      display:grid;grid-template-rows:subgrid;grid-row:span 3;
      transition:transform .2s ease,border-color .2s ease}
@media(hover:hover){.card:hover{transform:translateY(-3px);border-color:var(--accent)}}
.cards{grid-auto-rows:auto}
.card__label{font-size:11px;letter-spacing:.1em;color:var(--accent);font-weight:700;margin:0 0 var(--s-2)}
.card__title{font-size:var(--text-lg);font-weight:800;line-height:1.5;margin:0 0 var(--s-3)}
.card__body{font-size:var(--text-sm);color:var(--fg-sub);margin:0}
.card__foot{margin-top:var(--s-4);font-size:12px;color:var(--muted);
            border-top:1px solid var(--rule);padding-top:var(--s-3)}
.sec--dark .card__foot{border-color:var(--rule-dark);color:#aeb6c4}

/* 番号付き（reasons） */
.num{font-size:12px;letter-spacing:.12em;color:var(--accent);font-weight:700;margin:0 0 var(--s-2)}

/* 制作イメージ */
.works{display:grid;gap:var(--s-6);grid-template-columns:repeat(3,1fr)}
.work{border:1px solid var(--rule);background:#fff;overflow:hidden;
      display:grid;grid-template-rows:subgrid;grid-row:span 3}
.work img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.work__in{padding:var(--s-5)}
.work__type{font-size:11px;letter-spacing:.09em;color:var(--accent);font-weight:700;margin:0 0 var(--s-1)}
.work__title{font-size:var(--text-base);font-weight:800;margin:0 0 var(--s-2)}
.work__body{font-size:13px;color:var(--fg-sub);margin:0}

/* 進め方 */
.flow{display:grid;gap:var(--s-6);grid-template-columns:repeat(4,1fr);counter-reset:step}
.step{border-top:3px solid var(--ink);padding-top:var(--s-4)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);
              display:block;font-size:12px;font-weight:800;color:var(--accent);letter-spacing:.1em;
              margin-bottom:var(--s-2)}
.step h3{font-size:var(--text-base);font-weight:800;margin:0 0 var(--s-2)}
.step p{font-size:13px;color:var(--fg-sub);margin:0}

/* 約束（hanging indent） */
.promises{margin-top:var(--s-8);display:grid;gap:var(--s-3)}
.promises li{position:relative;padding-left:1.6em;font-size:var(--text-sm)}
.promises li::before{content:"／";position:absolute;left:0;top:0;color:var(--accent);font-weight:700}

/* できること／対応業種 */
.two{display:grid;gap:var(--s-10);grid-template-columns:1fr 1fr;align-items:start}
.scope-list li{position:relative;padding-left:1.6em;padding-block:7px;border-bottom:1px solid var(--rule);font-size:var(--text-sm)}
.scope-list li::before{content:"—";position:absolute;left:0;top:7px;color:var(--accent)}
.tags{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.tags li{border:1px solid var(--rule);padding:6px 12px;font-size:13px}

/* 料金 */
.plans{display:grid;gap:var(--s-6);grid-template-columns:repeat(3,1fr)}
.plan{border:1px solid var(--rule);padding:var(--s-6);background:#fff;position:relative;
      display:grid;grid-template-rows:subgrid;grid-row:span 4}
.plan--rec{border-color:var(--accent);border-width:2px}
.plan__badge{position:absolute;top:-1px;right:-1px;background:var(--accent);color:#fff;
             font-size:11px;font-weight:700;padding:5px 10px;letter-spacing:.06em}
.plan__label{font-size:11px;letter-spacing:.1em;color:var(--muted);font-weight:700;margin:0}
.plan__name{font-size:var(--text-lg);font-weight:800;margin:var(--s-1) 0 var(--s-3)}
.plan__price{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.plan__price small{font-size:13px;font-weight:400;color:var(--muted);margin-left:4px}
.plan__body{font-size:13px;color:var(--fg-sub);margin:var(--s-3) 0 0}
.plan__for{margin-top:var(--s-4);border-top:1px solid var(--rule);padding-top:var(--s-3);
           font-size:12px;color:var(--muted)}
/* カウントアップ：最終値の幅を先に確保（社長ルール 2026-07-16・CLS禁止） */
.cup{position:relative;display:inline-block;font-variant-numeric:tabular-nums}
.cup-fix{visibility:hidden}
.cup-n{position:absolute;left:0;top:0;white-space:nowrap}

.maint{margin-top:var(--s-8);display:flex;flex-wrap:wrap;gap:var(--s-6);align-items:baseline;
       border-top:1px solid var(--rule);padding-top:var(--s-4)}
.maint b{font-size:var(--text-lg);font-weight:800}

/* 自社サービス */
.svc{display:grid;gap:var(--s-4);grid-template-columns:repeat(3,1fr);margin-top:var(--s-8)}
.svc div{border:1px solid var(--rule-dark);padding:var(--s-5)}
.svc h3{font-size:var(--text-base);font-weight:800;margin:0 0 var(--s-1);color:#7fb0ff}
.svc p{font-size:13px;color:#c8cedb;margin:0}

/* 会社概要 */
.info{border-top:1px solid var(--rule)}
.info div{display:grid;grid-template-columns:11em 1fr;gap:var(--s-4);
          padding:14px 0;border-bottom:1px solid var(--rule)}
.info dt{font-size:13px;color:var(--muted);margin:0}
.info dd{margin:0;font-size:var(--text-sm)}

/* CTA帯 */
.contact{background:var(--ink);color:#fff;padding:var(--s-16) 0}
.contact .h2{color:#fff}
.contact .lead{color:#c8cedb}
.contact .note{color:#aeb6c4}

/* フッター */
.foot{background:#171b25;color:#c8cedb;padding:var(--s-12) 0 var(--s-6);font-size:13px}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-8)}
.foot h3{font-size:12px;letter-spacing:.08em;color:#8790a3;font-weight:600;margin:0 0 var(--s-3)}
.foot a{text-decoration:none}
@media(hover:hover){.foot a:hover{text-decoration:underline}}
.foot li{padding:5px 0}
.foot__brand{font-size:17px;font-weight:800;color:#fff;margin:0 0 var(--s-2)}
.foot__copy{margin-top:var(--s-8);padding-top:var(--s-4);border-top:1px solid var(--rule-dark);
            font-size:12px;color:#8790a3}

/* SP追従CTA */
.spbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;
       background:rgba(255,255,255,.96);border-top:1px solid var(--rule);padding:10px 12px;
       backdrop-filter:blur(8px)}
.spbar a{display:block;text-align:center;background:var(--accent);color:#fff;font-weight:700;
         padding:14px;text-decoration:none;font-size:15px}
@media(max-width:767px){.spbar{display:block}body{padding-bottom:76px}}

/* ============================ 動き ============================ */
@keyframes reveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rv{animation:reveal .5s cubic-bezier(.22,.61,.36,1) both}
.rv--1{animation-delay:.10s}.rv--2{animation-delay:.34s}
.rv--3{animation-delay:.44s}.rv--4{animation-delay:.54s}
.mask{display:block;overflow:hidden}
.mask>span{display:block}
.mask>span>i{display:inline-block;font-style:normal;
             animation:up .48s cubic-bezier(.22,.61,.36,1) both}
@keyframes up{from{transform:translateY(105%)}to{transform:none}}
/* スクロール到達で現れる（IntersectionObserver が付与） */
.io{opacity:0;transform:translateY(18px);transition:opacity .45s ease-out,transform .45s ease-out}
.io.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.mask>span>i,.fv__ghost{animation:none!important}
  .fv__ghost{transform:translate(-50%,0)!important}
  .cross__band,.cross__band>*{transform:none!important}
  .io{opacity:1!important;transform:none!important;transition:none!important}
  .btn:hover,.gnav a:hover,.card:hover{transform:none}
}

/* ============================ レスポンシブ ============================ */
@media(max-width:1023px){
  .fv{padding:26px 0 0}
  .cross{margin-top:30px}
  /* SP/タブレットでは「またぎ」を成立させられない（帯の高さより文字が大きく、
     切り替え位置が端末幅で動く）。ただし **display:none で消すとこのサイトで
     一番言いたい一文が SP から丸ごと消える**ので、通常の見出しとして帯の上に置く。
     白コピーは装飾なので落とす（aria-hidden 済み）。 */
  .cross__over{position:static;padding:0 0 var(--s-4)}
  .cross__over .wrap{position:static}
  .cross__line{font-size:clamp(21px,5.4vw,32px);white-space:normal}
  .cross__line--light{display:none}
  .cross__band{padding:22px 0}
  .band__grid{grid-template-columns:1fr;gap:var(--s-3)}
  .cards,.works,.plans{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(2,1fr)}
  .svc{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:767px){
  .sec{padding:var(--s-12) 0}
  .cards,.works,.plans,.cards--2,.two{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .card,.work,.plan{grid-row:auto;display:block}
  .info div{grid-template-columns:1fr;gap:2px}
  .foot__grid{grid-template-columns:1fr}
}

/* ============================ 問い合わせフォーム（Tally 全画面オーバーレイ） ============================
   CTA を押した時点でフォームが開く。別サイト（/contact/）へ飛ばすと、
   「押す → 遷移 → もう一度押す」の二段構えになって離脱する（社長指摘 2026-07-27）。

   構成＝固定ヘッダーの中に閉じるボタン（見出しと干渉させない）＋ dynamicHeight で
   全高化した iframe ＋ 親（.tally-fs-scroll）のネイティブスクロール。
   iframe 内スクロールは使わない（iOS で二重スクロールになるため）。
   背景クリックでは閉じない（入力途中の誤消失を防ぐ）。閉じるのは × と ESC のみ。 */
.tally-fs{position:fixed;inset:0;z-index:100000;display:none}
.tally-fs.on{display:block}
.tally-fs-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
                 -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
                 background:rgba(35,39,51,.62)}
.tally-fs-card{background:#fff;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.tally-fs-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:var(--s-3);
               min-height:56px;border-bottom:1px solid var(--rule);background:#fff;
               padding:env(safe-area-inset-top) calc(var(--s-4) + env(safe-area-inset-right)) 0
                       calc(var(--s-4) + env(safe-area-inset-left))}
.tally-fs-title{font-weight:800;font-size:16px;letter-spacing:.02em}
.tally-fs-close{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
                min-width:44px;height:44px;padding:0 10px;border:1px solid var(--rule);
                background:none;color:var(--fg);cursor:pointer;font-family:inherit}
@media(hover:hover){.tally-fs-close:hover{background:var(--bg-alt);border-color:var(--accent)}}
.tally-fs-x{font-size:20px;line-height:1}
.tally-fs-closelabel{font-size:13px;color:var(--muted)}
.tally-fs-body{flex:1 0 auto;
               padding:0 calc(var(--s-4) + env(safe-area-inset-right))
                       calc(var(--s-8) + env(safe-area-inset-bottom))
                       calc(var(--s-4) + env(safe-area-inset-left))}
.tally-fs-body iframe{width:100%;border:0;display:block}
.tally-fs-loading{padding:var(--s-16) 0;text-align:center;font-size:14px;color:var(--muted)}
@media(min-width:768px){
  .tally-fs-card{min-height:0;max-width:640px;margin:var(--s-12) auto;
                 box-shadow:0 12px 40px rgba(35,39,51,.28)}
}


/* ============================ 欧文（Manrope） ============================
   透かし・小ラベル・屋号・金額の数字だけ。和文の行はここに入れない
   （和文を Manrope 指定にしてもグリフ単位で和文フォントへ落ちるだけだが、
    ラベル内の「｜」など約物の見え方が揺れるため、対象を明示して絞る）。 */
.fv__ghost,
.brand,
.eyebrow,.fv__eyebrow,.phero__eyebrow,
.card__label,.plan__label,.work__type,.num,.kind__k,.stepbadge,
.cross .band__k,
.plan__price,.kind__amt,.cross .price,
.tablewrap .num{
  font-family:var(--font-en),var(--font-jp);
}
/* 金額の脇の小書き（「〜（税別）」「／制作プラン3タイプ」）は和文へ戻す。
   Manrope は 600/700/800 だけ読み込んでいるため、weight 400 の指定が最寄りの
   600 に丸められて**小書きだけ不自然に太くなる**（2026-07-27 実測）。 */
.plan__price small,.kind__amt small,.cross .price small,.plan__price .permo{
  font-family:var(--font-jp);
}