/* ==========================================
   公開画面（トップ・共通のヘッダー・フッター）のスタイル（指示文㉝）

   ⚠ このファイルは公開画面のレイアウト（templates/layout/base.php）だけが読み込む。
     利用者画面・管理画面には読み込まれないので、ここを変えても両画面の見た目は変わらない。
     逆に、app.css の共通の指定（button・.btn・h1 など）はこのファイルより先に効いている。
     公開画面の部品は pub- で始まるクラスだけで組み、要素セレクタで上書きしないこと。
   ⚠ デザインの基準は docs/design/public_site.md。色・余白・文字の大きさを足すときは先にそちらを直す。
   ⚠ 外部のフォント・CDN は使わない（CSP と表示の速さのため）。文字は app.css の OS 標準フォント。
   ⚠ 横スクロールを出さないこと。はみ出す装飾は overflow: hidden の親の中に置き、100vw は使わない。
   ========================================== */

:root {
  --pub-navy: var(--color-navy-900);
  --pub-navy-deep: #081A38;
  --pub-blue: var(--color-blue-500);
  --pub-blue-dark: var(--color-blue-600);
  --pub-blue-soft: var(--color-blue-50);
  --pub-blue-line: var(--color-blue-100);
  --pub-text: var(--color-text-primary);
  --pub-muted: var(--color-text-secondary);
  --pub-line: var(--color-border);
  --pub-bg-alt: #EDF2F9;       /* 灰色の区切り。白との差を、これまでの #F7F9FC より少しはっきりさせた */
  --pub-tint-from: #F2F7FE;    /* 淡い青の区切り（上 → 下）。白の区切りとの境目が見えるよう、上端も白にしない */
  --pub-tint-to: #E3EEFC;

  --pub-radius-sm: 10px;
  --pub-radius: 16px;
  --pub-radius-lg: 24px;

  /* 余白。区切りの上下は画面の幅に合わせて 48〜88px（白の区切りが続くと空白が二重に見えるため、以前の 56〜112px から詰めた） */
  --pub-section-y: clamp(48px, 4.6vw + 20px, 88px);
  --pub-gutter: 20px;
  --pub-header-h: 64px;

  --pub-shadow-card: 0 1px 2px rgba(12, 36, 76, 0.04), 0 10px 30px rgba(12, 36, 76, 0.08);
  --pub-shadow-float: 0 30px 70px rgba(12, 36, 76, 0.20), 0 8px 20px rgba(12, 36, 76, 0.10);
}
@media (min-width: 768px) { :root { --pub-gutter: 32px; } }
@media (min-width: 1024px) { :root { --pub-header-h: 72px; } }
@media (min-width: 1280px) { :root { --pub-gutter: 40px; } }

/* ページ内リンク（#flow など）で、固定したヘッダーの下に見出しが隠れないようにする */
html { scroll-padding-top: calc(var(--pub-header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body.pub { color: var(--pub-text); }
/* 日本語の見出し・説明を文節で折り返す（対応しているブラウザだけ。ほかは通常の折り返し） */
.pub-main h1, .pub-main h2, .pub-main h3, .pub-hero-lead, .pub-lead, .pub-bridge, .pub-figure-label, .pub-hero-tag, .pub-footer p { word-break: auto-phrase; }

/* 本文の最大幅（1200px）。背景は各区切りが全幅で持ち、中身だけをこの幅に収める */
.pub-container { max-width: calc(1200px + var(--pub-gutter) * 2); margin: 0 auto; padding: 0 var(--pub-gutter); }
.pub-container.narrow { max-width: calc(820px + var(--pub-gutter) * 2); }

/* キーボード操作の利用者向け。フォーカスしたときだけ出す */
.pub-skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--pub-navy); color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.pub-skip:focus { top: 12px; }

/* ---------- ボタン ---------- */
/* ⚠ button 要素にも付ける（料金のカードの「申し込む」はフォームの送信）。app.css の button の指定より
     クラスの方が詳細度が高いので、ここでの指定が勝つ */
.pub-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: var(--pub-radius-sm);
  border: 1.5px solid transparent; font: inherit; font-size: 16px; font-weight: 700; line-height: 1.3;
  text-decoration: none; text-align: center; cursor: pointer; white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.pub-btn:focus-visible, .pub-nav a:focus-visible, .pub-footer a:focus-visible, .pub-faq summary:focus-visible {
  outline: 3px solid var(--color-blue-300); outline-offset: 3px;
}
.pub-btn-primary { background: var(--pub-blue); color: #fff; box-shadow: 0 6px 18px rgba(8, 96, 224, 0.28); }
.pub-btn-primary:hover { background: var(--pub-blue-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(8, 96, 224, 0.34); }
.pub-btn-secondary { background: #fff; color: var(--pub-blue); border-color: var(--pub-blue); }
.pub-btn-secondary:hover { background: var(--pub-blue-soft); color: var(--pub-blue-dark); border-color: var(--pub-blue-dark); }
.pub-btn-ghost { background: transparent; color: var(--pub-navy); border-color: var(--color-border-input); font-weight: 600; }
.pub-btn-ghost:hover { background: transparent; color: var(--pub-blue); border-color: var(--pub-blue); }
.pub-btn-light { background: #fff; color: var(--pub-navy); box-shadow: 0 10px 28px rgba(3, 14, 32, 0.30); }
.pub-btn-light:hover { background: var(--pub-blue-soft); color: var(--pub-navy); transform: translateY(-1px); }
.pub-btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.pub-btn-outline-light:hover { background: rgba(255, 255, 255, 0.10); color: #fff; border-color: #fff; }
.pub-btn-lg { min-height: 56px; padding: 0 32px; font-size: 17px; }
.pub-btn-block { display: flex; width: 100%; }

/* ---------- ヘッダー ---------- */
.pub-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--color-border-hair);
}
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  .pub-header { background: rgba(255, 255, 255, 0.84); -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px); }
}
.pub-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--pub-header-h); }
.pub-brand { display: block; flex: 0 0 auto; }
.pub-brand img { display: block; height: 32px; width: auto; }
@media (min-width: 1024px) { .pub-brand img { height: 36px; } }

.pub-nav { display: flex; align-items: center; gap: 28px; }
.pub-nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.pub-nav-links a {
  display: block; padding: 8px 12px; border-radius: 8px;
  color: var(--pub-navy); font-size: 15px; font-weight: 600; text-decoration: none;
}
.pub-nav-links a:hover { color: var(--pub-blue); background: var(--pub-blue-soft); }
/* いま開いているページ。色だけでなく下線でも示す */
.pub-nav-links a[aria-current="page"] { color: var(--pub-blue); box-shadow: inset 0 -2px 0 var(--pub-blue); border-radius: 8px 8px 0 0; }
.pub-nav-actions { display: flex; align-items: center; gap: 10px; }
.pub-nav-actions .pub-btn { min-height: 42px; padding: 0 18px; font-size: 15px; }

/* ログイン中だが利用者画面を使えない状態のヘッダー（指示文㉙）。名前とログアウトだけ */
.pub-account { display: flex; align-items: center; gap: 14px; min-width: 0; font-size: 14px; }
.pub-account span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-account button { white-space: nowrap; }
.pub-account form { margin: 0; }

/* メニューの開閉（スマートフォン・タブレット）。開閉は /assets/js/lp.js が .is-open を付け外しする */
.pub-nav-toggle {
  display: none; position: relative; width: 44px; height: 44px; padding: 0; margin-right: -8px;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer;
}
.pub-nav-toggle:hover { background: var(--pub-blue-soft); }
.pub-nav-toggle-bar, .pub-nav-toggle-bar::before, .pub-nav-toggle-bar::after {
  position: absolute; left: 11px; width: 22px; height: 2px; border-radius: 2px; background: var(--pub-navy); content: "";
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.pub-nav-toggle-bar { top: 21px; }
.pub-nav-toggle-bar::before { left: 0; top: -7px; }
.pub-nav-toggle-bar::after { left: 0; top: 7px; }
.pub-nav-toggle[aria-expanded="true"] .pub-nav-toggle-bar { background: transparent; }
.pub-nav-toggle[aria-expanded="true"] .pub-nav-toggle-bar::before { transform: translateY(7px) rotate(45deg); }
.pub-nav-toggle[aria-expanded="true"] .pub-nav-toggle-bar::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 959px) {
  .pub-nav-toggle { display: block; }
  .pub-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 16px;
    padding: 12px var(--pub-gutter) 24px; background: #fff;
    border-bottom: 1px solid var(--pub-line); box-shadow: 0 16px 32px rgba(12, 36, 76, 0.10);
  }
  .pub-nav.is-open { display: flex; }
  .pub-nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .pub-nav-links a { padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--pub-line); font-size: 16px; }
  .pub-nav-links a:hover { background: transparent; }
  .pub-nav-links a[aria-current="page"] { box-shadow: none; }
  .pub-nav-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .pub-nav-actions .pub-btn { min-height: 48px; font-size: 16px; }
}

/* ---------- フッター ---------- */
.pub-footer { margin-top: 72px; background: var(--pub-navy-deep); color: rgba(255, 255, 255, 0.78); font-size: 14px; }
/* トップは最後の呼びかけ（濃い色の帯）のすぐ下に続けるので、間を空けない */
.pub-main + .pub-footer { margin-top: 0; }
.pub-footer a { color: rgba(255, 255, 255, 0.86); text-decoration: none; }
.pub-footer a:hover { color: #fff; text-decoration: underline; }
.pub-footer-top {
  display: grid; gap: 32px 20px; padding: 48px 0 36px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* スマートフォンでは、ロゴの段の下に「サービス」「ご利用中の方」を横に並べ、「規約」をその下に置く */
.pub-footer-brand, .pub-footer-top > nav:last-child { grid-column: 1 / -1; }
@media (min-width: 768px) { .pub-footer-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: 56px 0 40px; } .pub-footer-brand, .pub-footer-top > nav:last-child { grid-column: auto; } }
.pub-footer-brand img { display: block; height: 34px; width: auto; margin-bottom: 14px; }
.pub-footer-brand p { margin: 0; line-height: 1.8; max-width: 22em; }
.pub-footer h2 { margin: 0 0 12px; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; }
.pub-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pub-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 24px 0 32px; }
.pub-footer-tm { margin: 0 0 10px; font-size: 12.5px; line-height: 1.8; color: rgba(255, 255, 255, 0.72); }
.pub-footer-copy { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.72); }

/* ==========================================
   トップページ（P-01）
   ========================================== */
.pub-main { padding: 0; }

.pub-section { position: relative; overflow: hidden; padding: var(--pub-section-y) 0; background: #fff; }
.pub-section.alt { background: var(--pub-bg-alt); }
.pub-section.tint { background: linear-gradient(180deg, var(--pub-tint-from) 0%, var(--pub-tint-to) 100%); }
.pub-section > .pub-container { position: relative; z-index: 1; }

/* 区切りの見出し。英字の小見出し → 見出し → 説明 の順 */
.pub-head { text-align: center; max-width: 760px; margin: 0 auto clamp(32px, 4vw, 56px); }
.pub-eyebrow {
  display: inline-block; margin: 0 0 12px; color: var(--pub-blue);
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.pub-h2 { margin: 0; font-size: clamp(24px, 1.2vw + 20px, 36px); line-height: 1.4; letter-spacing: 0.01em; }
.pub-lead { margin: 16px 0 0; color: var(--pub-muted); font-size: clamp(15px, 0.3vw + 14px, 17px); line-height: 1.9; }
.pub-note { margin: 0; color: var(--pub-muted); font-size: 13px; line-height: 1.8; }
.pub-more { margin: 32px 0 0; text-align: center; }
.pub-more a { font-weight: 700; text-decoration: none; }
.pub-more a:hover { text-decoration: underline; }

/* ---------- 1. ファーストビュー ---------- */
.pub-hero {
  position: relative; overflow: hidden;
  padding: clamp(36px, 5vw, 80px) 0 clamp(32px, 3.4vw, 52px);
  background: linear-gradient(180deg, #F6FAFF 0%, var(--pub-tint-to) 100%);
  border-bottom: 1px solid var(--pub-blue-line); /* 次の区切り（白）との境目を分かりやすくする */
}
/* 大きなぼかしの図形（ロゴの青系）を背景に重ねる。ぼかしは filter ではなくグラデーションで作る（描画が軽い）。
   ⚠ 濃い部分に文字が重なるので、ファーストビューの文字は濃い色にしている（下の .pub-hero-lead など。文字のコントラストは AA 以上を保つこと） */
.pub-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle 460px at 80% 20%, rgba(72, 152, 244, 0.58) 0%, rgba(72, 152, 244, 0.24) 50%, rgba(72, 152, 244, 0) 100%),
    radial-gradient(circle 380px at 100% 76%, rgba(8, 96, 224, 0.34) 0%, rgba(8, 96, 224, 0) 100%),
    radial-gradient(circle 360px at 2% 64%, rgba(72, 152, 244, 0.44) 0%, rgba(72, 152, 244, 0) 100%),
    radial-gradient(circle 240px at 38% 4%, rgba(8, 96, 224, 0.16) 0%, rgba(8, 96, 224, 0) 100%);
}
/* うっすらとした方眼。業務の画面らしさを出す。文字の読みやすさを優先して、ごく薄くする */
.pub-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(8, 96, 224, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 96, 224, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 85%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 85%);
}
.pub-hero-inner { position: relative; z-index: 1; display: grid; gap: 40px; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .pub-hero-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; } }

.pub-hero-tag {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 14px;
  border: 1px solid var(--pub-blue-line); border-radius: 999px; background: rgba(255, 255, 255, 0.8);
  color: var(--pub-navy); font-size: 13px; font-weight: 700;
}
.pub-hero-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pub-blue); }
.pub-hero h1 {
  margin: 0; font-size: clamp(28px, 1.6vw + 22px, 48px); line-height: 1.35; letter-spacing: 0.01em;
}
.pub-hero h1 .accent { color: var(--pub-blue); }
.pub-hero-lead { margin: 20px 0 0; max-width: 34em; color: var(--color-navy-800); font-size: clamp(15px, 0.35vw + 14px, 18px); line-height: 1.9; }
.pub-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.pub-hero-note { margin: 14px 0 0; color: var(--color-navy-800); font-size: 13px; }
@media (max-width: 559px) {
  .pub-hero-cta .pub-btn { flex: 1 1 100%; }
}

/* 画面の画像（パソコンとスマートフォンの枠は CSS で描く） */
.pub-hero-visual { margin: 0; }
.pub-hero-device { position: relative; padding: 0 9% 7% 3%; }
@media (min-width: 768px) and (max-width: 1023px) { .pub-hero-visual { max-width: 680px; margin: 0 auto; width: 100%; } }
/* ⚠ .pub-phone（position: relative）より後で効くよう、親を付けて詳細度を上げている */
.pub-hero-device .pub-hero-phone { position: absolute; right: 0; bottom: 0; width: 25%; }
.pub-hero-caption { margin: 12px 0 0; text-align: right; color: var(--pub-navy); font-size: 12px; }

.pub-laptop { position: relative; }
/* ⚠ 枠の太さは、実物に近い比率にしている（指示文㉝ v3）。左右・上は幅の1.6%、下は2.0%。
   padding の % は「親の幅」に対する割合なので、上下も同じ基準（幅）になり、四辺の太さがそろう */
.pub-laptop-screen {
  position: relative; padding: 1.6% 1.6% 2.0%; border-radius: 2% 2% 0.6% 0.6% / 3.4% 3.4% 1% 1%;
  background: #0F1B30; box-shadow: var(--pub-shadow-float);
}
.pub-laptop-screen::before {
  content: ""; position: absolute; top: 0.55%; left: 50%; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: #2A3B5C;
}
.pub-laptop-screen img { display: block; width: 100%; height: auto; border-radius: 2px; background: #fff; }
.pub-laptop-base {
  position: relative; height: clamp(10px, 1.3vw, 18px); margin: 0 -4%;
  border-radius: 2px 2px 16px 16px;
  background: linear-gradient(180deg, #E9EDF2 0%, #C4CBD6 100%);
  box-shadow: 0 14px 24px rgba(12, 36, 76, 0.14);
}
.pub-laptop-base::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 16%; height: 45%; margin-left: -8%;
  border-radius: 0 0 8px 8px; background: #B3BBC7;
}

.pub-phone {
  position: relative; display: flow-root; border-radius: 12% / 6.6%;
  background: #0F1B30; box-shadow: var(--pub-shadow-float);
}
/* ⚠ 枠の太さは、スマートフォンの幅の3.2%（375px 幅なら 12px）で、四辺同じ。
   枠を padding にすると、% が「親の幅」に対する割合になって（絶対配置の親は 25% 幅のため）、枠が太くなっていた。
   そのため、枠は .pub-phone の margin にして、% が .pub-phone 自身の幅になるようにしている（display: flow-root は上下の margin を親に突き抜けさせないため）。
   角の丸みは、実物のスマートフォンの比率（幅の約12%）。画像は 750×1400（幅:高さ = 1:1.87）で、カードの区切りで終わるように撮っている。
   画像の縦横比を変えたら、border-radius の縦（6.6%・5.0%）を計算し直すこと */
.pub-phone-screen { position: relative; overflow: hidden; margin: 3.2%; border-radius: 9.4% / 5%; background: #fff; }
.pub-phone-screen::before {
  content: ""; position: absolute; z-index: 1; top: 0.9%; left: 50%; width: 24%; height: 1.9%; margin-left: -12%;
  border-radius: 999px; background: #0F1B30;
}
.pub-phone-screen img { display: block; width: 100%; height: auto; }

/* ブラウザの枠（画面のご紹介・安心の仕組み） */
.pub-window {
  overflow: hidden; border-radius: 14px; background: #fff;
  border: 1px solid rgba(12, 36, 76, 0.08); box-shadow: var(--pub-shadow-float);
}
.pub-window-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #F1F4F8; border-bottom: 1px solid var(--pub-line); }
.pub-window-bar span { width: 11px; height: 11px; border-radius: 50%; background: #D3DAE3; }
.pub-window img { display: block; width: 100%; height: auto; }

/* ファーストビューの下の数字の帯（ファーストビューの区切りの中に置く） */
.pub-figures { position: relative; z-index: 1; margin-top: clamp(40px, 5vw, 64px); }
.pub-figures-inner {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  background: linear-gradient(135deg, var(--pub-navy) 0%, var(--color-navy-600) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--pub-radius);
  box-shadow: 0 24px 48px rgba(12, 36, 76, 0.28), 0 6px 14px rgba(12, 36, 76, 0.16);
}
@media (min-width: 768px) { .pub-figures-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pub-figure { padding: 22px 24px; text-align: center; }
.pub-figure + .pub-figure { border-top: 1px solid rgba(255, 255, 255, 0.18); }
@media (min-width: 768px) { .pub-figure + .pub-figure { border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.18); } }
.pub-figure-num { margin: 0; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.3; }
.pub-figure-num strong { margin: 0 4px; color: #fff; font-size: clamp(32px, 1.5vw + 24px, 44px); font-weight: 800; letter-spacing: -0.01em; }
.pub-figure-label { margin: 6px 0 0; color: rgba(255, 255, 255, 0.86); font-size: 14px; }
.pub-figures-note { margin: 14px 0 0; text-align: center; color: var(--pub-navy); }

/* ---------- 共通のカード ---------- */
.pub-card {
  position: relative; background: #fff; border: 1px solid var(--color-border-hair);
  border-radius: var(--pub-radius); box-shadow: var(--pub-shadow-card); padding: 28px;
}
.pub-card h3 { margin: 0 0 10px; font-size: 18px; line-height: 1.5; }
.pub-card p { margin: 0; color: var(--pub-muted); font-size: 15px; line-height: 1.85; }
.pub-card p + p { margin-top: 10px; }
.pub-card .pub-card-note { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--pub-line); font-size: 13px; color: var(--pub-navy); }

/* アイコン（SVG を自作。外部の素材は読み込まない） */
.pub-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, var(--pub-blue-soft), #DCEAFD); color: var(--pub-blue);
}
.pub-icon svg { width: 28px; height: 28px; }
.pub-icon.warm { background: linear-gradient(135deg, #FFF4E6, #FDE8CC); color: #A45A0A; }

/* ---------- 2. こんなお悩み ---------- */
.pub-problems { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.pub-problem { display: flex; gap: 18px; align-items: flex-start; }
@media (min-width: 1024px) {
  .pub-problems { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .pub-problem { flex-direction: column; }
}
.pub-bridge {
  margin: clamp(32px, 4vw, 48px) auto 0; max-width: 760px; text-align: center;
  font-size: clamp(17px, 0.6vw + 14px, 21px); font-weight: 700; line-height: 1.7;
}
.pub-bridge .accent { color: var(--pub-blue); }

/* ---------- 3. できること（流れ） ---------- */
/* スマートフォンは縦（左の線でつなぐ）、768px 以上は3列×2段（1280px 以上でも6列にしない。見出しが2行に折れて窮屈になるため） */
.pub-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); counter-reset: step; }
.pub-step { position: relative; padding: 0 0 28px 64px; }
.pub-step:last-child { padding-bottom: 0; }
.pub-step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--pub-blue); color: #fff; font-size: 18px; font-weight: 800;
  box-shadow: 0 0 0 6px rgba(8, 96, 224, 0.12);
}
.pub-step::after { content: ""; position: absolute; left: 21px; top: 50px; bottom: 6px; width: 2px; background: var(--pub-blue-line); }
.pub-step:last-child::after { display: none; }
.pub-step h3 { margin: 6px 0 6px; font-size: 18px; line-height: 1.5; }
.pub-step p { margin: 0; color: var(--pub-muted); font-size: 15px; line-height: 1.8; }
.pub-step .pub-step-tag { display: inline-block; margin-top: 8px; padding: 2px 10px; border-radius: 999px; background: var(--pub-blue-soft); color: var(--pub-navy); font-size: 12.5px; font-weight: 700; }
@media (min-width: 768px) {
  .pub-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
  .pub-step {
    padding: 28px 24px 26px; background: #fff; border: 1px solid var(--color-border-hair);
    border-radius: var(--pub-radius); box-shadow: var(--pub-shadow-card);
  }
  .pub-step:last-child { padding-bottom: 26px; }
  .pub-step::before { position: static; margin-bottom: 14px; }
  .pub-step::after { display: none; }
}
.pub-steps-note { margin: 24px 0 0; text-align: center; }

/* ---------- 4. 主な機能 ---------- */
.pub-features { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .pub-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1024px) { .pub-features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pub-feature .pub-icon { margin-bottom: 18px; }

/* ---------- 5. 安心の仕組み ---------- */
.pub-safety { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: start; }
/* 2列のときは、左（画像と説明）と右（5枚のカード）の高さをそろえる。右のカードは余った高さを均等に分け、文字は各カードの中で縦の中央に置く */
@media (min-width: 1024px) {
  .pub-safety { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: stretch; }
  .pub-safety-item { align-items: center; }
}
.pub-safety-main h3 { margin: 24px 0 10px; font-size: 20px; }
.pub-safety-main p { margin: 0; color: var(--pub-muted); font-size: 15px; line-height: 1.85; }
.pub-safety-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) and (max-width: 1023px) {
  .pub-safety-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 5つ目（返金）は1枚だけ余るので、横いっぱいに広げる */
  .pub-safety-item:last-child { grid-column: 1 / -1; }
}
.pub-safety-item { display: flex; gap: 16px; align-items: flex-start; padding: 22px; }
.pub-safety-item .pub-icon { width: 48px; height: 48px; border-radius: 14px; }
.pub-safety-item .pub-icon svg { width: 24px; height: 24px; }
.pub-safety-item h3 { margin: 0 0 6px; font-size: 16.5px; }
.pub-safety-item p { font-size: 14.5px; line-height: 1.8; }
.pub-ref { white-space: nowrap; }
/* 免責の枠だけを切り出した画像。枠の角は画像側で丸めて、影を付ける。
   ⚠ 画像は2倍の大きさで持っている（416px 幅の表示で文字が読める大きさ）。表示は 400px まで（パソコン幅で左の列が右の5枚のカードより高くならないように）（拡大して粗くならないように） */
.pub-shot { margin: 0; max-width: 400px; }
.pub-shot img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: var(--pub-shadow-float); }
.pub-shot picture { display: block; }
.pub-shot-caption { margin: 14px 0 0; color: var(--pub-muted); font-size: 12.5px; }
@media (min-width: 600px) and (max-width: 1023px) { .pub-shot { margin: 0 auto; } .pub-shot-caption { text-align: center; } }

/* ---------- 6. 画面のご紹介 ---------- */
.pub-screens { display: grid; gap: clamp(48px, 6vw, 88px); }
.pub-screen { display: grid; gap: 28px; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .pub-screen { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; }
  .pub-screen.reverse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .pub-screen.reverse .pub-screen-media { order: 2; }
}
.pub-screen-label { margin: 0 0 8px; color: var(--pub-blue); font-size: 14px; font-weight: 700; }
.pub-screen h3 { margin: 0 0 12px; font-size: clamp(20px, 0.6vw + 17px, 26px); line-height: 1.5; }
.pub-screen p { margin: 0; color: var(--pub-muted); font-size: 15.5px; line-height: 1.9; }
.pub-screen ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pub-screen li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.7; }
.pub-screen li::before {
  content: ""; position: absolute; left: 2px; top: 0.45em; width: 14px; height: 8px;
  border-left: 2.5px solid var(--pub-blue); border-bottom: 2.5px solid var(--pub-blue); transform: rotate(-45deg);
}
.pub-phones { display: flex; align-items: flex-start; justify-content: center; gap: clamp(16px, 3vw, 32px); padding: 8px 0; }
.pub-phones .pub-phone { width: min(44%, 240px); }
.pub-phones .pub-phone:nth-child(2) { margin-top: 36px; }
.pub-screens-note { margin: clamp(32px, 4vw, 48px) 0 0; text-align: center; }

/* ---------- 7. 料金 ---------- */
.pub-plans { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 640px) { .pub-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pub-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pub-plan { display: flex; flex-direction: column; padding: 30px 24px 24px; }
.pub-plan-badge {
  position: absolute; top: -13px; left: 24px; padding: 4px 12px; border-radius: 999px;
  background: var(--pub-blue); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
}
.pub-plan-badge.deep { background: var(--pub-navy); }
.pub-plan h3 { margin: 0; font-size: 19px; }
.pub-card .pub-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px; margin: 14px 0 0; color: var(--pub-navy); line-height: 1.2; }
.pub-price-label { margin-right: 6px; padding: 2px 8px; border-radius: 6px; background: var(--pub-blue-soft); color: var(--pub-blue); font-size: 13px; font-weight: 700; align-self: center; }
.pub-price-num { font-size: clamp(34px, 1vw + 28px, 42px); font-weight: 800; letter-spacing: -0.01em; }
.pub-price-unit { font-size: 15px; font-weight: 700; }
.pub-card .pub-price-after { margin: 8px 0 0; color: var(--pub-muted); font-size: 14px; }
.pub-plan-features { list-style: none; margin: 20px 0 24px; padding: 18px 0 0; border-top: 1px solid var(--pub-line); display: grid; gap: 10px; flex: 1 1 auto; }
.pub-plan-features li { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; line-height: 1.5; }
.pub-plan-features li span:first-child { color: var(--pub-muted); }
.pub-plan-features li strong { color: var(--pub-navy); text-align: right; white-space: nowrap; }
/* ⚠ 「在庫の自動同期 なし」は色だけでなく太字・記号でも示す（景品表示法・指示文⑲ 作業4.5） */
.pub-plan-features li.ng strong { color: var(--color-danger); }
.pub-plan-action { margin-top: auto; }
.pub-plan-action form { margin: 0; }

/* 在庫同期のないプラン（出品のみ）は4プランと同じ並びに入れない（指示文⑲ 作業4.5） */
.pub-plans-aside { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--pub-line); }
.pub-plans-aside-title { margin: 0 0 16px; color: var(--pub-muted); font-size: 16px; font-weight: 700; }
.pub-plan.wide { display: grid; gap: 20px 32px; grid-template-columns: minmax(0, 1fr); padding: 28px; }
@media (min-width: 900px) { .pub-plan.wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; } }
.pub-plan.wide .pub-plan-features { margin: 0; padding: 0; border-top: 0; }
.pub-plan.wide .pub-plan-warn { grid-column: 1 / -1; margin: 0; }
.pub-plan-warn { padding: 12px 16px; border-radius: 10px; background: var(--color-warn-bg); border: 1px solid var(--color-warn-line); color: #7A4E0F; font-size: 14px; line-height: 1.7; }
.pub-plans-notes { margin: 28px 0 0; padding: 18px 22px; border-radius: 12px; background: rgba(255, 255, 255, 0.8); border: 1px solid var(--pub-line); }
.pub-plans-notes p { margin: 0; color: var(--pub-navy); font-size: 14px; line-height: 1.9; }

/* ---------- 8. ご利用開始までの流れ ---------- */
.pub-start { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); counter-reset: start; }
.pub-start li { position: relative; padding: 0 0 26px 64px; }
.pub-start li:last-child { padding-bottom: 0; }
.pub-start li::before {
  counter-increment: start; content: counter(start);
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid var(--pub-blue); color: var(--pub-blue); font-size: 18px; font-weight: 800;
}
.pub-start li::after { content: ""; position: absolute; left: 21px; top: 50px; bottom: 6px; width: 2px; background: var(--pub-blue-line); }
.pub-start li:last-child::after { display: none; }
.pub-start h3 { margin: 8px 0 6px; font-size: 18px; }
.pub-start p { margin: 0; color: var(--pub-muted); font-size: 15px; line-height: 1.8; }
@media (min-width: 1024px) {
  .pub-start { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
  .pub-start li { padding: 0; text-align: center; }
  .pub-start li::before { position: relative; margin: 0 auto 16px; width: 56px; height: 56px; font-size: 22px; z-index: 1; }
  .pub-start li::after { left: calc(50% + 34px); right: calc(-50% + 14px); top: 27px; bottom: auto; width: auto; height: 2px; }
  .pub-start li:last-child::after { display: none; }
  .pub-start p { font-size: 14.5px; }
}
.pub-prepare { margin-top: clamp(36px, 4vw, 56px); display: grid; gap: 20px 32px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 768px) { .pub-prepare { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.pub-prepare h3 { margin: 0; font-size: 18px; }
.pub-prepare ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pub-prepare li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.7; }
.pub-prepare li::before {
  content: ""; position: absolute; left: 2px; top: 0.45em; width: 14px; height: 8px;
  border-left: 2.5px solid var(--pub-blue); border-bottom: 2.5px solid var(--pub-blue); transform: rotate(-45deg);
}
.pub-prepare li small { display: block; color: var(--pub-muted); font-size: 13px; }

/* ---------- 9. よくある質問（抜粋） ---------- */
/* 開閉は <details>。スクリプトは使わない */
.pub-faq { display: grid; gap: 12px; }
.pub-faq details { background: #fff; border: 1px solid var(--color-border-hair); border-radius: 14px; box-shadow: 0 1px 2px rgba(12, 36, 76, 0.04); }
.pub-faq summary {
  position: relative; display: block; padding: 20px 56px 20px 60px; cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 700; line-height: 1.6; border-radius: 14px;
}
.pub-faq summary::-webkit-details-marker { display: none; }
.pub-faq summary::before {
  content: "Q"; position: absolute; left: 20px; top: 18px; width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; background: var(--pub-blue); color: #fff; font-size: 15px;
}
.pub-faq summary::after {
  content: ""; position: absolute; right: 24px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--pub-navy); border-bottom: 2px solid var(--pub-navy); transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.pub-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.pub-faq-answer { position: relative; padding: 0 24px 22px 60px; color: var(--pub-muted); font-size: 15px; line-height: 1.9; }
.pub-faq-answer::before {
  content: "A"; position: absolute; left: 20px; top: 0; width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; background: var(--pub-blue-soft); color: var(--pub-blue); font-size: 15px; font-weight: 700;
}
.pub-faq-answer strong { color: var(--pub-navy); }

/* ---------- 10. 最後の呼びかけ ---------- */
.pub-cta {
  position: relative; overflow: hidden; padding: clamp(64px, 7vw, 104px) 0; text-align: center; color: #fff;
  background:
    radial-gradient(ellipse 800px 500px at 85% 0%, rgba(72, 152, 244, 0.35) 0%, rgba(72, 152, 244, 0) 60%),
    radial-gradient(ellipse 600px 400px at 0% 100%, rgba(8, 96, 224, 0.35) 0%, rgba(8, 96, 224, 0) 60%),
    linear-gradient(135deg, var(--pub-navy) 0%, var(--color-navy-600) 100%);
}
.pub-cta .pub-container { position: relative; z-index: 1; }
.pub-cta h2 { margin: 0; font-size: clamp(24px, 1.2vw + 20px, 36px); line-height: 1.45; }
.pub-cta p { margin: 16px auto 0; max-width: 40em; color: rgba(255, 255, 255, 0.82); font-size: 15.5px; line-height: 1.85; }
.pub-cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; }
@media (max-width: 559px) { .pub-cta-buttons .pub-btn { flex: 1 1 100%; } }

/* ---------- 動き ---------- */
/* スマートフォンの画像だけ、ごくゆっくり上下させる。
   ⚠ 動きを減らす設定の利用者には止める（app.css の prefers-reduced-motion でも時間を潰しているが、ここでも止める） */
@keyframes pub-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.pub-hero-phone { animation: pub-float 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .pub-hero-phone { animation: none; }
  .pub-btn:hover { transform: none; }
}
.pub-card .pub-plan-desc { margin-top: 12px; font-size: 13.5px; }

/* ---------- スマートフォン（〜599px）では余白を詰めて、縦に長くなりすぎないようにする ---------- */
@media (max-width: 599px) {
  .pub-card { padding: 22px 20px; }
  .pub-icon { width: 46px; height: 46px; border-radius: 13px; }
  .pub-icon svg { width: 24px; height: 24px; }
  .pub-problem { flex-direction: column; gap: 12px; }
  .pub-feature .pub-icon { margin-bottom: 12px; }
  .pub-safety-item { padding: 18px 16px; gap: 14px; }
  .pub-safety-item .pub-icon { width: 40px; height: 40px; }
  /* 数字の帯は3つを横に並べる */
  .pub-figures-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pub-figure { padding: 16px 6px; }
  .pub-figure + .pub-figure { border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.18); }
  .pub-figure-num { font-size: 12px; }
  .pub-figure-num strong { margin: 0 2px; font-size: 26px; }
  .pub-figure-label { font-size: 11.5px; line-height: 1.5; }
  .pub-screen p, .pub-screen li { font-size: 15px; }
  .pub-phones .pub-phone:nth-child(2) { margin-top: 24px; }
}
.pub-window picture { display: block; }

/* ==========================================
   トップ以外の公開画面（指示文㉝ 第2段階）
   機能・料金・FAQ は「見出しの帯 + 区切り」（.pub-pagehead）で組む。
   申込・ログイン・お問い合わせ・規約などは、背景つきのページ（.pub-page）に、幅の決まった中身を置く。
   ⚠ .pub-page の中の app.css のクラス（.card・.field・.notice・button など）は、ここで見た目を上書きしている。
     利用者画面・管理画面には .pub-page は無いので、そちらは変わらない。
   ========================================== */

/* ---------- 見出しの帯（機能・料金・FAQ） ---------- */
.pub-pagehead {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(40px, 5vw, 72px) 0 clamp(36px, 4.4vw, 60px);
  border-bottom: 1px solid var(--pub-blue-line);
  background:
    radial-gradient(circle 380px at 92% 0%, rgba(72, 152, 244, 0.24) 0%, rgba(72, 152, 244, 0) 100%),
    radial-gradient(circle 320px at 4% 100%, rgba(72, 152, 244, 0.20) 0%, rgba(72, 152, 244, 0) 100%),
    linear-gradient(180deg, #F6FAFF 0%, var(--pub-tint-to) 100%);
}
.pub-pagehead .pub-container { position: relative; z-index: 1; }
.pub-pagehead .pub-eyebrow { color: var(--pub-blue-dark); }
.pub-pagehead h1 { margin: 0; font-size: clamp(28px, 1.6vw + 22px, 44px); line-height: 1.35; letter-spacing: 0.01em; word-break: auto-phrase; }
.pub-pagehead .pub-lead { max-width: 40em; margin: 16px auto 0; color: var(--color-navy-800); }

/* ---------- 背景つきのページ（申込・ログイン・お問い合わせ・規約など） ---------- */
.pub-page {
  min-height: 60vh; padding: clamp(32px, 4.5vw, 64px) 0 clamp(56px, 7vw, 104px);
  background: linear-gradient(180deg, var(--pub-tint-from) 0, #fff 460px);
}
.pub-container.pub-w-narrow { max-width: calc(820px + var(--pub-gutter) * 2); }
.pub-container.pub-w-form { max-width: calc(640px + var(--pub-gutter) * 2); }
.pub-page h1 { margin: 0 0 18px; font-size: clamp(25px, 1.2vw + 20px, 34px); line-height: 1.4; letter-spacing: 0.01em; word-break: auto-phrase; }
.pub-page h2 { font-size: 19px; line-height: 1.5; }
.pub-page .page-title { margin: 0 0 12px; }
.pub-page .lead, .pub-page .lead-left { margin: 0 0 28px; color: var(--pub-muted); font-size: 16px; line-height: 1.85; }
.pub-page p.hint { color: var(--pub-muted); font-size: 14px; line-height: 1.8; }
.pub-page a:focus-visible, .pub-page summary:focus-visible { outline: 3px solid var(--color-blue-300); outline-offset: 2px; border-radius: 4px; }

.pub-page .card {
  margin: 0 0 20px; padding: clamp(20px, 3vw, 32px);
  background: #fff; border: 1px solid var(--color-border-hair); border-radius: var(--pub-radius); box-shadow: var(--pub-shadow-card);
}
.pub-page .card h2 { margin: 0 0 16px; }
.pub-page .card > h1:first-child { margin-top: 0; }

.pub-page .notice { margin: 0 0 20px; padding: 14px 18px; border-radius: 12px; font-size: 15px; line-height: 1.85; }

/* ---------- お申込みの進み具合 ---------- */
.pub-progress { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 32px; padding: 0; }
.pub-progress li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--pub-muted); font-size: 13.5px; line-height: 1.4; }
.pub-progress .num {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 2px solid var(--pub-blue-line); color: var(--pub-muted); font-weight: 800; font-size: 15px;
}
.pub-progress li + li::before { content: ""; position: absolute; top: 16px; right: 50%; left: -50%; height: 2px; background: var(--pub-blue-line); }
.pub-progress li.done + li::before, .pub-progress li.current::before { background: var(--pub-blue); }
.pub-progress li.done .num { background: var(--pub-blue-soft); border-color: var(--pub-blue); color: var(--pub-blue-dark); }
.pub-progress li.current .num { background: var(--pub-blue); border-color: var(--pub-blue); color: #fff; box-shadow: 0 0 0 5px rgba(8, 96, 224, 0.14); }
.pub-progress li.current .label { color: var(--pub-navy); font-weight: 700; }
.pub-progress li:first-child::before { display: none; }

/* ---------- フォーム ---------- */
.pub-page .field { margin: 0 0 22px; }
.pub-page .field label { display: block; margin: 0 0 8px; color: var(--pub-navy); font-size: 15px; font-weight: 700; line-height: 1.5; }
.pub-page .field .req {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 6px; vertical-align: 1px;
  background: var(--color-danger-bg); color: var(--color-danger); font-size: 12px; font-weight: 700;
}
.pub-page .field input[type=text], .pub-page .field input[type=email], .pub-page .field input[type=password],
.pub-page .field input[type=tel], .pub-page .field select, .pub-page .field textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid #7F8FA6; border-radius: var(--pub-radius-sm);
  background: #fff; color: var(--pub-navy); font: inherit; font-size: 16px; line-height: 1.6;
  box-shadow: inset 0 1px 2px rgba(12, 36, 76, 0.05);
}
.pub-page .field textarea { min-height: 176px; line-height: 1.75; resize: vertical; }
.pub-page .field input:focus, .pub-page .field select:focus, .pub-page .field textarea:focus,
.pub-page .stripe-input.StripeElement--focus {
  outline: 3px solid rgba(8, 96, 224, 0.28); outline-offset: 0; border-color: var(--pub-blue);
}
.pub-page .field .hint { margin: 8px 0 0; color: var(--pub-muted); font-size: 13.5px; line-height: 1.7; }
.pub-page .field .error { margin: 8px 0 0; color: var(--color-danger); font-size: 14px; font-weight: 600; line-height: 1.6; }
.pub-page .field.has-error input, .pub-page .field.has-error select, .pub-page .field.has-error textarea { border-color: var(--color-danger); border-width: 2px; }
.pub-page .field label.checkbox { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-weight: 400; font-size: 15px; line-height: 1.7; }
.pub-page .field label.checkbox input { flex: 0 0 auto; width: 22px; height: 22px; margin: 2px 0 0; }

/* ボタン。トップの .pub-btn と同じ見た目（申込・お問い合わせなどの既存のマークアップを変えずに揃える） */
.pub-page button:not(.link):not(.secondary), .pub-page .btn:not(.secondary) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 28px;
  border: 1.5px solid transparent; border-radius: var(--pub-radius-sm);
  background: var(--pub-blue); color: #fff; font: inherit; font-size: 16px; font-weight: 700; line-height: 1.3; text-decoration: none; cursor: pointer;
  box-shadow: 0 6px 18px rgba(8, 96, 224, 0.28); transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.pub-page button:not(.link):not(.secondary):hover, .pub-page .btn:not(.secondary):hover { background: var(--pub-blue-dark); transform: translateY(-1px); }
.pub-page button:disabled { background: var(--color-disabled); box-shadow: none; transform: none; cursor: not-allowed; }
.pub-page button.secondary, .pub-page .btn.secondary {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px;
  border: 1.5px solid var(--pub-blue); border-radius: var(--pub-radius-sm); background: #fff; color: var(--pub-blue);
  font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.pub-page button.secondary:hover, .pub-page .btn.secondary:hover { background: var(--pub-blue-soft); color: var(--pub-blue-dark); }
.pub-page button:focus-visible, .pub-page .btn:focus-visible { outline: 3px solid var(--color-blue-300); outline-offset: 3px; }
.pub-page .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 559px) {
  .pub-page .actions > button, .pub-page .actions > .btn { flex: 1 1 100%; }
}

/* ---------- 申込（プラン選択・最終確認・完了） ---------- */
.pub-page .summary { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 0; margin: 0; }
.pub-page .summary dt, .pub-page .summary dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--pub-line); line-height: 1.7; }
.pub-page .summary dt { padding-right: 16px; color: var(--pub-muted); font-size: 14px; font-weight: 600; }
.pub-page .summary dd { min-width: 0; overflow-wrap: anywhere; }
.pub-page .summary dt:last-of-type, .pub-page .summary dd:last-of-type { border-bottom: 0; }
@media (max-width: 559px) {
  .pub-page .summary { grid-template-columns: minmax(0, 1fr); }
  .pub-page .summary dt { padding: 12px 0 0; border-bottom: 0; }
  .pub-page .summary dd { padding: 4px 0 12px; }
}
/* ⚠ 特定商取引法の最終確認の表示事項（A-03）。表示の内容は変えず、見た目だけ整える */
.pub-page .legal-box { margin: 0 0 20px; overflow: hidden; border: 2px solid var(--pub-blue); border-radius: var(--pub-radius); background: #fff; box-shadow: var(--pub-shadow-card); }
.pub-page .legal-box h2 { margin: 0; padding: 14px 24px; background: var(--pub-blue); color: #fff; font-size: 17px; }
.pub-page .legal-item { padding: 16px 24px; border-bottom: 1px solid var(--pub-line); }
.pub-page .legal-item:last-child { border-bottom: 0; }
.pub-page .legal-item .label { margin-bottom: 6px; color: var(--pub-navy); font-size: 14.5px; font-weight: 700; }
.pub-page .legal-item .value { font-size: 15px; line-height: 1.85; }
.pub-page .agree { margin: 0 0 8px; padding: 18px 22px; border: 1px solid var(--color-border-hair); border-radius: var(--pub-radius); background: #fff; box-shadow: var(--pub-shadow-card); }
.pub-page .agree label { margin-bottom: 12px; font-size: 15.5px; line-height: 1.7; }
.pub-page .agree label:last-child { margin-bottom: 0; }
.pub-page .agree input[type=checkbox] { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; }
.pub-page .card-label { margin-bottom: 8px; color: var(--pub-navy); font-size: 15px; font-weight: 700; }
.pub-page .stripe-input { padding: 14px; border: 1px solid #7F8FA6; border-radius: var(--pub-radius-sm); background: #fff; }
.pub-page .card-field .error { margin: 8px 0 0; color: var(--color-danger); font-size: 14px; font-weight: 600; }
.pub-page #card-error { margin: 12px 0 0; color: var(--color-danger); font-size: 14px; font-weight: 600; }
.pub-page .mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: 0.02em; }

/* プラン選択（A-01）は、料金ページと同じカード */
.pub-page .pub-plans { margin-top: 8px; }
.pub-page .pub-plans-notes { margin-top: 24px; }

/* ---------- ログイン・パスワード再設定・案内・エラー ---------- */
.pub-page .auth-box {
  max-width: 480px; margin: 0 auto; padding: clamp(24px, 4vw, 40px);
  background: #fff; border: 1px solid var(--color-border-hair); border-radius: var(--pub-radius-lg); box-shadow: var(--pub-shadow-card);
}
.pub-page .auth-box h1 { margin: 0 0 20px; font-size: clamp(23px, 1vw + 19px, 28px); text-align: center; }
.pub-page .auth-box .lead { margin: 0 0 22px; font-size: 15px; line-height: 1.85; }
.pub-page .auth-box .actions { margin-top: 24px; }
.pub-page .auth-box .actions button { width: 100%; }
.pub-page .auth-links { margin: 22px 0 0; justify-content: center; font-size: 15px; }

/* ---------- お問い合わせ ---------- */
.pub-page .contact-done { text-align: center; }
.pub-page .contact-done h1 { margin: 0 0 16px; }
.pub-page .contact-done .actions { justify-content: center; }

/* ---------- 規約・プライバシーポリシー・特商法（読みやすさだけ。本文は変えない） ---------- */
.pub-doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 0 0 20px; color: var(--pub-muted); font-size: 14.5px; }
.pub-doc-meta dl { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; }
.pub-doc-meta dt { display: inline; font-weight: 700; }
.pub-doc-meta dt::after { content: "："; }
.pub-doc-meta dd { display: inline; margin: 0; }
.pub-toc { margin: 0 0 20px; border: 1px solid var(--color-border-hair); border-radius: var(--pub-radius); background: #fff; box-shadow: var(--pub-shadow-card); }
.pub-toc summary { padding: 16px 22px; cursor: pointer; font-weight: 700; color: var(--pub-navy); }
.pub-toc ol { display: grid; gap: 2px 24px; margin: 0; padding: 0 22px 18px 44px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); font-size: 14.5px; line-height: 1.8; }
.pub-toc li::marker { color: var(--pub-muted); }
.pub-page .card.markdown { padding: clamp(22px, 4vw, 48px); font-size: 15.5px; line-height: 1.95; word-break: auto-phrase; overflow-wrap: anywhere; }
.pub-page .markdown h2 { margin: 0 0 24px; padding-bottom: 12px; border-bottom: 1px solid var(--pub-line); color: var(--pub-muted); font-size: 16px; font-weight: 600; }
.pub-page .markdown h3 { position: relative; margin: 48px 0 16px; padding-left: 14px; font-size: 19px; line-height: 1.5; scroll-margin-top: calc(var(--pub-header-h) + 16px); }
.pub-page .markdown h3::before { content: ""; position: absolute; left: 0; top: 0.15em; bottom: 0.15em; width: 4px; border-radius: 2px; background: var(--pub-blue); }
.pub-page .markdown h4 { margin: 28px 0 10px; font-size: 16.5px; }
.pub-page .markdown p { margin: 0 0 14px; }
.pub-page .markdown ol, .pub-page .markdown ul { margin: 0 0 14px; padding-left: 1.6em; }
.pub-page .markdown li { margin: 0 0 8px; scroll-margin-top: calc(var(--pub-header-h) + 16px); }
.pub-page .markdown li:target, .pub-page .markdown h3:target { background: #FFF8E1; border-radius: 6px; }
.pub-page .markdown table { display: block; width: 100%; max-width: 100%; margin: 0 0 18px; overflow-x: auto; border-collapse: collapse; font-size: 14.5px; line-height: 1.7; }
.pub-page .markdown table th, .pub-page .markdown table td { min-width: 6em; padding: 10px 14px; border: 1px solid var(--pub-line); text-align: left; vertical-align: top; }
.pub-page .markdown table th { background: var(--pub-bg-alt); color: var(--pub-navy); white-space: nowrap; }
.pub-page .markdown hr { margin: 32px 0; border: 0; border-top: 1px solid var(--pub-line); }
.pub-page .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.pub-page .tabs a { padding: 9px 18px; border: 1px solid var(--color-border-input); border-radius: 999px; background: #fff; color: var(--pub-navy); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.pub-page .tabs a:hover { border-color: var(--pub-blue); color: var(--pub-blue); }
.pub-page .tabs a.active { background: var(--pub-blue); border-color: var(--pub-blue); color: #fff; }
.pub-table-wrap { margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pub-page table.data { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; line-height: 1.7; }
.pub-page table.data th, .pub-page table.data td { padding: 12px 14px; border-bottom: 1px solid var(--pub-line); text-align: left; vertical-align: top; }
.pub-page table.data th { background: var(--pub-bg-alt); color: var(--pub-navy); white-space: nowrap; }
.pub-page .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--color-bg-muted); color: var(--pub-navy); font-size: 12.5px; font-weight: 700; }
.pub-page .badge.ok { background: var(--color-ok-bg); color: var(--color-ok); }

/* ---------- 機能紹介・料金・FAQ の区切り ---------- */
.pub-features-page { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .pub-features-page { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1024px) { .pub-features-page { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pub-feature .pub-card-num { display: block; margin: 0 0 4px; color: var(--pub-blue-dark); font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em; }

.pub-faq-groups { display: grid; gap: clamp(36px, 4vw, 56px); }
.pub-faq-group h2 { margin: 0 0 16px; padding-left: 14px; border-left: 4px solid var(--pub-blue); font-size: clamp(19px, 0.5vw + 17px, 23px); line-height: 1.5; }
.pub-faq-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.pub-faq-toc a { display: inline-block; padding: 8px 16px; border: 1px solid var(--pub-blue-line); border-radius: 999px; background: rgba(255, 255, 255, 0.86); color: var(--pub-navy); font-size: 14.5px; font-weight: 700; text-decoration: none; }
.pub-faq-toc a:hover { border-color: var(--pub-blue); color: var(--pub-blue); }
.pub-qa-list { display: grid; gap: 12px; }
.pub-qa { padding: 20px 24px 22px; border: 1px solid var(--color-border-hair); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(12, 36, 76, 0.04), 0 8px 24px rgba(12, 36, 76, 0.06); scroll-margin-top: calc(var(--pub-header-h) + 16px); }
.pub-qa:target { border-color: var(--pub-blue); box-shadow: 0 0 0 3px rgba(8, 96, 224, 0.16); }
.pub-qa-row { display: flex; align-items: flex-start; gap: 14px; }
.pub-qa-row + .pub-qa-row { margin-top: 12px; }
.pub-qa-badge { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; font-size: 15px; font-weight: 700; }
.pub-qa-badge.q { background: var(--pub-blue); color: #fff; }
.pub-qa-badge.a { background: var(--pub-blue-soft); color: var(--pub-blue-dark); }
.pub-qa h3 { margin: 0; font-size: 16.5px; line-height: 1.7; }
.pub-qa-a { min-width: 0; color: var(--pub-muted); font-size: 15px; line-height: 1.95; }
.pub-qa-a strong { color: var(--pub-navy); }
.pub-qa-a a { font-weight: 600; }
.pub-qa-a code { padding: 1px 6px; border-radius: 4px; background: var(--pub-bg-alt); font-size: 0.92em; word-break: break-all; }
.pub-note-box { margin: 24px 0 0; padding: 18px 22px; border: 1px solid var(--pub-blue-line); border-radius: 12px; background: var(--pub-blue-soft); color: var(--pub-navy); font-size: 15px; line-height: 1.9; }
.pub-note-box.warn { border-color: var(--color-warn-line); background: var(--color-warn-bg); color: #7A4E0F; }
.pub-note-box a { font-weight: 600; }
.pub-plans-notes p + p { margin-top: 6px; }
.pub-common { margin: 32px 0 0; padding: 20px 24px; }
.pub-common .pub-common-note { margin-top: 6px; }
.pub-common p { margin: 0; color: var(--pub-navy); font-size: 15px; line-height: 1.9; }

/* ---------- メンテナンス・エラー（単独のページ） ---------- */
.pub-standalone-head { padding: 18px 0; border-bottom: 1px solid var(--color-border-hair); background: #fff; }
.pub-standalone-head img { display: block; height: 34px; width: auto; }
.pub-standalone-foot { margin: 0; padding: 28px 0 36px; background: var(--pub-navy-deep); color: rgba(255, 255, 255, 0.78); font-size: 13.5px; line-height: 1.8; }
.pub-standalone-foot a { color: rgba(255, 255, 255, 0.9); }
.pub-status-card { max-width: 640px; margin: 0 auto; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--color-border-hair); border-radius: var(--pub-radius-lg); background: #fff; box-shadow: var(--pub-shadow-card); }
.pub-status-card h1 { margin: 0 0 16px; font-size: clamp(23px, 1vw + 19px, 30px); line-height: 1.45; }
.pub-status-card h2 { margin: 28px 0 10px; font-size: 17px; }
.pub-status-card p { margin: 0 0 14px; line-height: 1.9; }
.pub-status-card ul { margin: 0 0 14px; padding-left: 1.4em; line-height: 1.9; }
.pub-status-card .notice { margin: 0 0 20px; padding: 14px 18px; border-radius: 12px; font-size: 15px; line-height: 1.85; }
.pub-status-mark { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 0 16px; border-radius: 16px; background: linear-gradient(135deg, #FFF4E6, #FDE8CC); color: #A45A0A; }
.pub-status-mark svg { width: 28px; height: 28px; }
body.pub-bare { background: #fff; }
.pub-bare-main { min-height: 56vh; padding: clamp(32px, 6vw, 72px) 0; background: linear-gradient(180deg, var(--pub-tint-from) 0, #fff 460px); }

/* ---------- 申込の補足（プラン選択・情報入力・最終確認・完了） ---------- */
.pub-page .pub-inline-link { margin-left: 8px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.pub-page .card h2 .pub-inline-link { font-weight: 600; }
.pub-page .pub-notice-after { margin: 16px 0 0; }
.pub-page .card > .notice:last-child { margin-bottom: 0; }
.pub-page .pub-after-summary { margin: 20px 0; line-height: 1.9; }
.pub-page .pub-after-steps { counter-reset: after; margin: 0 0 8px; padding: 0; list-style: none; }
.pub-page .pub-after-steps li { position: relative; display: grid; gap: 4px; margin: 0; padding: 0 0 20px 52px; }
.pub-page .pub-after-steps li:last-child { padding-bottom: 0; }
.pub-page .pub-after-steps li::before {
  counter-increment: after; content: counter(after); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--pub-blue); color: #fff; font-weight: 800;
}
.pub-page .pub-after-steps li::after { content: ""; position: absolute; left: 17px; top: 42px; bottom: 6px; width: 2px; background: var(--pub-blue-line); }
.pub-page .pub-after-steps li:last-child::after { display: none; }
.pub-page .pub-after-steps strong { color: var(--pub-navy); font-size: 16px; line-height: 1.6; }
.pub-page .pub-after-steps span { color: var(--pub-muted); font-size: 15px; line-height: 1.85; }
.pub-page .pub-prepare-title { margin: 28px 0 12px; }
.pub-page .pub-prepare-list { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 10px; }
.pub-page .pub-prepare-list li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.7; }
.pub-page .pub-prepare-list li::before {
  content: ""; position: absolute; left: 2px; top: 0.45em; width: 14px; height: 8px;
  border-left: 2.5px solid var(--pub-blue); border-bottom: 2.5px solid var(--pub-blue); transform: rotate(-45deg);
}
.pub-page .pub-prepare-list small { display: block; color: var(--pub-muted); font-size: 13.5px; }

/* 通知の文字色。app.css の色（warn #B7791F・ok #1E7F4F）は薄い背景の上で 4.5:1 に届かないので、公開画面では濃くする（AA） */
.pub-page .notice.warn, .pub-status-card .notice.warn { color: #7A4E0F; }
.pub-page .notice.ok, .pub-status-card .notice.ok { color: #175F3B; }
.pub-page .notice.error, .pub-status-card .notice.error { color: #A93226; }
.pub-page .badge.ok { color: #175F3B; }