/* 17：会社情報を「項目＋内容」の対で揃える（2026-09-12）
   ・項目名を上、内容を下に置き、列で左端をそろえる
   ・幅は固定pxを使わず、画面幅に応じて列数が変わる（PC4列 → タブレット2列 → スマホ2列） */
.metaline.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:calc(1.6*var(--u)) calc(2.4*var(--u));align-items:start;}
.metaline.info .mi{display:flex;flex-direction:column;gap:calc(.5*var(--u));min-width:0;}
.metaline.info .mi-k{font-family:var(--jp);font-size:max(14px,calc(1.05*var(--u)));letter-spacing:.04em;color:var(--faint);}
.metaline.info .mi-v{font-family:var(--jp);font-size:max(15px,calc(1.35*var(--u)));letter-spacing:.02em;color:var(--ink);font-weight:700;overflow-wrap:anywhere;}
.metaline.info .mi-v a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;display:inline-block;min-height:0;line-height:1.5;}
@media (max-width:767px){
  .metaline.info{grid-template-columns:1fr 1fr;gap:14px 16px;}
  .metaline.info .mi:nth-child(4){grid-column:1 / -1;}
  .metaline.info .mi-k{font-size:14px;}
  .metaline.info .mi-v{font-size:15px;}
  .metaline.info .mi-v a{padding:9px 0;line-height:1.5;}
}

/* =====================================================================
   12枚目の料金表（2026-09-12）— 列幅を中身に合わせる
   原因：スマホ用に table-layout:fixed を掛けていたため、列幅が中身を無視して
        左右50%ずつに固定され、左の「ホームページ（5ページ）」だけ折り返していた
   対策：table-layout:auto に戻し、金額の列は中身の幅だけ（縮まない）、
        品名の列が残り全部を取る。固定pxは使わない
   ===================================================================== */
.slide table{table-layout:auto;width:100%;}
.slide td.n{width:1%;white-space:nowrap;text-align:right;padding-left:calc(1.2*var(--u));}
.slide table td:first-child{width:auto;word-break:keep-all;overflow-wrap:normal;}
@media (max-width:767px){
  .slide table td:first-child{overflow-wrap:anywhere;} /* 極端に狭い端末だけ、最後の手段として折る */
}
/* 17枚目の会社情報は新しい .mi-k/.mi-v で大きさを決めるので、旧 .metaline の縮小指定を効かせない */
@media (max-width:767px){
  .metaline.info span{font-size:inherit!important;}
}

/* =====================================================================
   12枚目：限定オファーカード（料金カード2枚の下・横幅いっぱい）
   ・このスライドは light クラスが付いているが、実測するとどの画面幅でもダーク配色で描画される
     （1023px以下・1024px以上のどちらのメディアクエリでもダークに揃えられているため）。
     したがって色はダーク前提で1本化する。白背景用の濃い色を足すと 768〜1023px で背景に溶けるので不可
   ・黄色（#FFC53D）はデッキ全体の青紫配色の中で唯一の孤立色にするための指定（フォン・レストルフ効果）。
     デッキ内の他の場所に黄色を増やすと孤立が崩れて効果が薄れるため、ここ以外では使わないこと
   ・黄色地に白文字はコントラストが取れないため、文字は必ず濃色（#1A1508）にする
   ・文字は 14px 以上、CTAボタンは高さ 48px 以上（.cta は 52px）
   ・幅は固定pxを使わず親に追従。スマホは1列に積み、バッジ→モック→本文の順にする
   ・td.n span{font-size:.8em!important} の巻き添えを避けるため、価格は span ではなく b で組む
   ・見出しと条件文は .slide p / .note として jp-wrap.js の改行制御に載せている
   ===================================================================== */
.offer2{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"badge fig" "main fig";gap:calc(1*var(--u)) calc(2.6*var(--u));align-items:start;border:1px solid rgba(143,165,255,.45);background:rgba(143,165,255,.10);border-radius:16px;padding:calc(2.2*var(--u)) calc(2.6*var(--u));}
.o2-main{grid-area:main;min-width:0;position:relative;z-index:1;} /* スマホでモックの影が見出しに重なって暗くなるため、本文を手前に置く */
.o2-fig{grid-area:fig;align-self:center;}
.o2-b{grid-area:badge;justify-self:start;align-self:end;background:#FFC53D;color:#1A1508;font-weight:900;letter-spacing:.04em;line-height:1.5;border-radius:100px;padding:calc(.45*var(--u)) calc(1.3*var(--u));font-size:max(15px,calc(1.3*var(--u)));white-space:nowrap;}
.slide .o2-h,.slide.tight .o2-h,.slide.light .o2-h{margin-top:0;font-size:max(17px,calc(2.2*var(--u)));font-weight:900;line-height:1.5;letter-spacing:-.01em;color:var(--ink);}
.o2-p{display:flex;flex-wrap:wrap;align-items:baseline;gap:calc(.3*var(--u)) calc(.9*var(--u));margin-top:calc(.9*var(--u));}
.slide .o2-was,.slide.tight .o2-was{font-size:max(14px,calc(1.6*var(--u)));font-weight:600;text-decoration:line-through;color:var(--muted);}
.slide .o2-arw,.slide.tight .o2-arw{font-size:max(14px,calc(1.6*var(--u)));color:var(--muted);}
.slide .o2-now,.slide.tight .o2-now{font-size:max(28px,calc(4.2*var(--u)));font-weight:900;line-height:1.15;color:#FFC53D;letter-spacing:-.02em;}
.slide .o2-tax,.slide.tight .o2-tax{font-size:max(14px,calc(1.3*var(--u)));font-weight:600;color:var(--muted);}
.o2-now .o2-yen{font-size:.5em;font-weight:700;}
.o2-was .o2-yen{font-size:.72em;font-weight:600;}
.slide .o2-c,.slide.tight .o2-c,.slide.light .o2-c{margin-top:calc(.8*var(--u));font-size:max(14px,calc(1.3*var(--u)));line-height:1.65;color:var(--muted);word-break:keep-all;overflow-wrap:anywhere;}
/* 限定CTAの鼓動アニメーション（2026-09-12）
   ・2.4秒周期。1.07倍 → 戻る → 1.05倍 → 戻る、の2拍。心拍のようなリズムで常時動き続ける
   ・ボタン本体ではなくラッパーを動かしているのは、.cta:hover の translateY を潰さないため
     （transform は1要素に1つしか効かない）
   ・ラッパーは inline-block でボタン幅に一致させ、中央から拡大する
   ・.slide.in が付いてから動き出す（画面に入る前は動かさない）
   ・WCAG 2.2.2（一時停止・停止・非表示／レベルA）には適合していない。常時ループで停止手段がないため。
     依頼者が承知のうえで選択した仕様。アクセシビリティ要件のある案件へ流用する際は必ず作り直すこと
   ・prefers-reduced-motion が有効な環境では動かさない
   ・黄色と同じく、ここ以外のCTAには付けないこと（増やすと目立たなくなる）
   ・倍率を変えるときは、カード枠からのはみ出しと横スクロールの有無を必ず測り直すこと */
.o2-cta{display:inline-block;transform-origin:center;margin-top:calc(1.6*var(--u));will-change:transform;}
@keyframes o2beat{
  0%,100%{transform:scale(1);}
  18%{transform:scale(1.07);}
  32%{transform:scale(1);}
  48%{transform:scale(1.05);}
  64%{transform:scale(1);}
}
.slide.in .o2-cta{animation:o2beat 2.4s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){
  .slide.in .o2-cta{animation:none;}
}
.cta.gold{background:#FFC53D;color:#1A1508;box-shadow:0 8px 24px rgba(255,197,61,.28);}
.cta.gold:hover{box-shadow:0 10px 28px rgba(255,197,61,.4);}
.o2-fig .phone{width:clamp(120px,calc(11.5*var(--u)),200px);} /* タブレット幅で縮みすぎて画面が読めなくなるため下限を置く */
@media (max-width:767px){
  .offer2{grid-template-columns:minmax(0,1fr);grid-template-areas:"badge" "fig" "main";justify-items:stretch;text-align:left;gap:14px;padding:18px 16px;}
  .offer2 .o2-b{font-size:16px;padding:7px 16px;}
  .offer2 .o2-fig{justify-self:center;}
  .o2-fig .phone{width:min(32vw,130px);} /* 画面の1/3以上を占めてスクロール量が増えていたため縮小。これ以上小さくすると中身が判別できない */
  .o2-cta{display:block;width:100%;} /* スマホはボタンが全幅。拡大は中央基準のまま */
}

/* =====================================================================
   CTAボタンのアイコン（2026-09-12）
   ・目的はタップ率ではなく「押すと何が起きるか」を明示すること（予約画面が開く／メールが開く）
   ・装飾目的では増やさない。主要CTAだけに1つずつ
   ===================================================================== */
.cta .cta-i{width:1.15em;height:1.15em;margin-right:.5em;flex:none;}

/* =====================================================================
   12枚目の料金表を読みやすくする（2026-09-12）
   ・金額のジャンプ率：数字を項目名の約2.2倍にする。単位は数字の44%（ただし14px下限）
   ・単位に span を使わないこと。td.n span{font-size:.8em!important}（1023px以下）に
     潰されて10px台になる。必ず <b class="yen"> で組む
   ・行の上下余白は .slide.tight .g2 td の .72u（デッキ内で最も詰まった値）を 1.5u に戻す
   ・区切り線は --line（rgba(255,255,255,.09)）だと背景と同化するため .14 に上げる
   ・「万円」の #8C8C98 はコントラスト3.3:1で基準未達。--muted（6.9:1）に変える
   ・黄色は限定オファー専用の孤立色。おすすめピルには使わず既存の紫グラデを使う
   ===================================================================== */
.slide.tight .g2 .card{padding:calc(2.2*var(--u));}
.slide.tight .g2 table.price th,
.slide.tight .g2 table.price td{padding:calc(1.5*var(--u)) calc(.6*var(--u));border-bottom-color:rgba(255,255,255,.14);}
.slide.tight .g2 table.price tr:last-child td{border-bottom:none;padding-bottom:calc(.6*var(--u));}
.slide .g2 table.price td:first-child,
.slide.tight .g2 table.price td:first-child{font-size:max(15px,calc(1.5*var(--u)));line-height:1.5;color:var(--ink);}
.slide .g2 table.price td.n,
.slide.tight .g2 table.price td.n{vertical-align:baseline;}
.price .amt{display:inline-flex;align-items:baseline;gap:.14em;font-size:max(30px,calc(3.3*var(--u)));font-weight:900;line-height:1.05;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;}
.price .yen{font-size:max(14px,.44em);font-weight:600;letter-spacing:0;color:var(--muted);}
.reco{display:inline-block;margin-left:calc(1*var(--u));padding:calc(.2*var(--u)) calc(.9*var(--u));border-radius:100px;background:var(--grad);color:#0A0A10;font-size:max(14px,calc(1.14*var(--u)));font-weight:900;letter-spacing:.04em;vertical-align:middle;white-space:nowrap;}
@media (max-width:767px){
  .slide.tight .g2 .card{padding:18px 16px;}
  .slide.tight .g2 table.price th,
  .slide.tight .g2 table.price td{padding:14px 0;}
  .slide.tight .g2 table.price tr:last-child td{padding-bottom:6px;}
  .slide .g2 table.price td:first-child,
  .slide.tight .g2 table.price td:first-child{font-size:16px;}
  .price .amt{font-size:32px;}
  .reco{font-size:14px;margin-left:8px;}
}
/* 限定オファー：取り消し線を赤・2pxにし、特別価格をさらに大きくする
   文字色まで赤にすると警告色として読まれ、黄色の120万円と視線を奪い合うため、線だけ赤にする */
.slide .o2-was,.slide.tight .o2-was{text-decoration-color:#FF6B6B;text-decoration-thickness:2px;text-underline-offset:0;}
.slide .o2-now,.slide.tight .o2-now{font-size:max(40px,calc(5.4*var(--u)));font-variant-numeric:tabular-nums;}
/* 320px級の端末でCTAの文言が語中で割れるため、左右paddingだけ詰めて1行に収める
   （文字サイズは下げない。14px下限と可読性を優先） */
@media (max-width:360px){
  .o2-cta .cta{padding-left:14px;padding-right:14px;}
}

/* =====================================================================
   金額の数字フォント（2026-09-12）
   ・数字だけ Oswald（Google Fonts）、日本語は Noto Sans JP のまま
     → Oswald には日本語グリフが無いので「万円」「通常」「（税別）」は自動的に後ろのフォントに落ちる
   ・Oswald の実在ウェイトは 200〜700。元の指定は 900 でブラウザが疑似太字を合成していたため、
     700 と 500 に直している。ここを 900 に戻すと文字がにじむので不可
   ・この指定を外すときは、料金表と限定オファーの両方を同時に変えること
     （片方だけ変えると資料内で数字の字形が混在する）
   ===================================================================== */
.price .amt,.o2-p b{font-family:'Oswald',var(--jp);}
.price .amt,.slide .o2-now,.slide.tight .o2-now{font-weight:700;}
.price .yen,.slide .o2-was,.slide.tight .o2-was,.slide .o2-arw,.slide.tight .o2-arw,.slide .o2-tax,.slide.tight .o2-tax{font-weight:500;}

/* =====================================================================
   デザイン4原則にもとづく全体調整（2026-09-12）
   このブロックだけを削除すれば、変更前の状態に完全に戻せる（style.css は無変更）

   【なぜ必要だったか：実測で判明した問題】
   ・反復の破綻：.tight クラスの有無で、同じ階層の見出しが 44px と 50px の
     2サイズで描かれていた（tight 9枚／非tight 5枚）。リード文も 19px と 23px。
     読み手が「どれが重要か」を学習できず、全体が散らかって見える原因だった
   ・近接の欠如：見出し→リードが15px、リード→本体が18px。差が3pxしかなく、
     「見出し＋リードが1つの塊」であることが距離で表現できていなかった
   ・対比の不足：デッキ全体で文字サイズが17種類。とくに14〜20pxに7種類が密集し、
     階層として機能せず、ただのばらつきとして見えていた
   ・整列は問題なし：全スライドの左端が179pxで一致していたため、ここは触っていない
   ・書体が3つ（Noto Sans JP／Space Grotesk／Oswald）あり、しかも数字の書体が
     料金表だけ Oswald、他は Space Grotesk と混在していた
   ・余白の実測値が 10 / 17 / 23 / 26px など半端で、8の倍数のグリッドに乗っていなかった

   【方針】
   ・書体は2つだけにする。数字・英字＝Oswald、日本語＝Noto Sans JP。
     Space Grotesk は廃止し、読み込みも外した（＝ダウンロード量も減る）
   ・文字サイズは 見出し / 20 / 16 / 14 の4段。カード見出しのみ18〜20pxで中間に置く。
     金額・インパクト数字（58px等）は「強調」として別枠で残す
   ・余白は 8 / 16 / 24 / 32 の8の倍数だけを使う（Material Design の8dpグリッド）
   ・見出しとリードは近づけ（8px）、ブロック間は離す（PC 32px／スマホ 24px）
   ・見出しは大きい方（50px）ではなく小さい方（44px）に揃えた。すでに9枚が44pxで
     破綻なく動いており、逆に50pxへ揃えると情報量の多いスライドが溢れるため
   ・直書きの style="font-size:..." を上書きする必要がある箇所のみ !important を使う
   ・.card.ic（7枚目の5列カード）は列が狭く溢れるため、本文・見出しの拡大から除外
   ・SVG図版の中の「投下した広告費　0円」のように日本語と数字が1つの文字列に
     混在する箇所は、文中で書体を切り替えない原則から Noto Sans JP のままにしている
   ===================================================================== */
:root{
  /* 書体は2つだけ：数字・英字＝Oswald（--disp）、日本語＝Noto Sans JP（--jp）。
     Space Grotesk は廃止し、読み込みも index.html から外した */
  --disp:'Oswald','Noto Sans JP','Hiragino Kaku Gothic ProN','Noto Sans CJK JP','Yu Gothic',Meiryo,sans-serif;

  /* 文字サイズは4段だけ。画面幅で変わるのは見出しのみ */
  --fs-h2:max(26px,min(calc(4.1*var(--u)),5.2cqw));
  --fs-lead:20px;
  --fs-body:16px;
  --fs-cardh:18px;

  /* 余白は8の倍数のみ（Material Design の8dpグリッドに合わせる）。
     10px・17px・23px・26px のような半端な値は使わない */
  --sp-pair:8px;    /* 見出し→リード：近づける */
  --sp-sub:16px;    /* ブロック内の小さい区切り */
  --sp-block:24px;  /* ブロック間：離す */
}
@media (min-width:1024px){
  :root{--fs-cardh:20px;--sp-block:32px;}
}
.slide h2,.slide.tight h2,.hero2 h2{font-size:var(--fs-h2);margin-bottom:0;}
.slide p.lead,.slide.tight p.lead,.slide.tight .lead{font-size:var(--fs-lead);}
.slide>p:not(.lead){font-size:var(--fs-body)!important;}
.slide .card:not(.ic) p,.slide.tight .g2 .card:not(.ic) p,.slide.tight .g4 .card:not(.ic) p{font-size:var(--fs-body);} /* .slide.tight .g2 .card p が4クラスで勝つため、同じ強さの指定を並べている */
.slide .card:not(.ic) h4{font-size:var(--fs-cardh)!important;}
.slide .card.ic p{font-size:max(14px,calc(1.35*var(--u)))!important;} /* 5列カードは列が狭いので別枠。14px下限だけは必ず守る（既存の .slide.tight .g5 .card p が12pxまで下げるため !important が必要） */
.slide .mt1{margin-top:var(--sp-sub);}
.slide .mt2,.slide.tight .mt2{margin-top:var(--sp-block);}
.slide p.lead.mt2,.slide.tight p.lead.mt2{margin-top:var(--sp-pair);}
/* mt クラスが付いていないブロックも、同じ間隔トークンに揃える */
.slide>.fig,.slide>.sites,.slide>.gens,.slide>.demo2,.slide>.bignums,
.slide.light>.fig,.slide.tight>.fig,.slide .metaline.info{margin-top:var(--sp-block);} /* .slide.light .fig が3クラスで勝つため、同じ強さの指定を足している */
/* 12枚目の料金カード注記は span に font-size が直書きされており、
   PC幅で12px相当まで落ちて14px下限を割っていた。span側の指定を無効化して本文サイズに揃える
   （.g2 .card p.mt1 span は12枚目の2箇所だけに一致する） */
.slide .g2 .card p.mt1 span{font-size:inherit!important;}