/* ─── Variables ───
   ENECON ブランドカラー：白ベース + 黒・赤の差し色
   --green系の変数名は既存コードとの互換のため維持しているが、
   実際の値はエネコン®カードのブランドレッド／ブラックに変更している。 */
:root {
  --green:       #c8102e;  /* ブランドレッド（メインアクセント） */
  --green-mid:   #a10d25;  /* レッド hover/濃色 */
  --green-light: #fbe9eb;  /* レッド系の薄い背景 */
  --orange:      #1a1a1a;  /* 黒系サブアクセント（旧オレンジ枠） */
  --success:     #1a7a45;  /* 「OK・信頼度高」等の意味付き状態表示専用（ブランド色とは独立） */
  --success-light: #e8f5ee;
  --bg:          #f7f7f7;
  --card:        #ffffff;
  --border:      #e5e5e5;
  --text:        #111111;
  --muted:       #6b7280;
  --muted-light: #9ca3af;
  /* UIリニューアル用トークン（グラデーション・強調色） */
  --blue:        #1d6fd8;
  --blue-light:  #eaf2fd;
  --amber:       #b45309;
  --amber-light: #fdf3e3;
  --shadow-card: 0 2px 10px rgba(17,17,17,0.06);
  --shadow-card-hover: 0 6px 20px rgba(17,17,17,0.10);
  --radius-lg: 16px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ══════════════════════════════════
   ネイティブアプリ的な質感（iOS/Android）
   ・タップ時に出るブラウザ標準の青いハイライト・グレー枠を消す
   ・ページ全体の「引っ張って伸びる」ゴムのようなバウンス挙動を抑制
   ・スマホでのピンチズームは許可しつつ、意図しないダブルタップズームは抑える
   これらは見た目・触感のみの調整で、既存のクリック/タップ操作の
   ロジックには一切影響しない。
══════════════════════════════════ */
html {
  /* 縦方向の「行き過ぎ」バウンスのみ抑制（横方向のスワイプ系UIは維持） */
  overscroll-behavior-y: none;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  /* iOSでタップ時に一瞬付くグレーのハイライト枠を消す */
  -webkit-tap-highlight-color: transparent;
}
a, button, .nav-item, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}
/* アニメーションを抑制したい設定（アクセシビリティ）を尊重 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ══════════════════════════════════
   オフライン通知バナー
   ・Service Workerによりキャッシュ済みの画面で動作している間（navigator.onLine
     がfalseの間）だけ画面上部に表示し、「圏外でも操作を続けられる」ことを
     営業マンに知らせる。オンライン復帰時は自動で非表示になる。
══════════════════════════════════ */
#offline-banner {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9998;
  background: #1a1a1a;
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
#offline-banner.active { display: block; }
body.offline-mode { padding-top: 32px; }

/* ══════════════════════════════════
   起動画面（スプラッシュスクリーン）
   ・サイトを開く（リロードする）たびに約3秒間表示するオープニング演出（漆黒の
     背景にブランドレッドの光でロゴが浮かび上がる、CSS/JSのみのアニメーション。
     画像は使用しない）
   ・クリック／タップ／キー入力で即スキップ可能（現場で毎回待たされないため）
══════════════════════════════════ */
#splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(circle at 50% 45%, #200308 0%, #070707 55%, #000000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.48s ease, transform 0.48s ease;
}
#splash-screen.splash-fade-out { opacity: 0; transform: scale(1.04); pointer-events: none; }

.splash-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 560px; height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,16,46,0.55) 0%, rgba(200,16,46,0.15) 45%, rgba(200,16,46,0) 70%);
  filter: blur(6px);
  animation: splashGlowPulse 2s ease-in-out infinite;
}
@keyframes splashGlowPulse {
  0%, 100% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.08); opacity: 1; }
}

.splash-scanline {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  top: -5%;
  background: linear-gradient(90deg, transparent, rgba(200,16,46,0.9), transparent);
  box-shadow: 0 0 14px 2px rgba(200,16,46,0.7);
  animation: splashScan 2.5s ease-in-out 0.1s 1;
}
@keyframes splashScan {
  0% { top: -5%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 105%; opacity: 0; }
}

.splash-particle {
  position: absolute;
  bottom: -10px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #ff3b57;
  box-shadow: 0 0 6px 2px rgba(200,16,46,0.8);
  opacity: 0;
  animation-name: splashParticleRise;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes splashParticleRise {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  15% { opacity: 1; }
  85% { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-620px) scale(1); }
}

.splash-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.splash-logo {
  position: relative;
  display: flex;
  align-items: baseline;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-size: 64px;
  letter-spacing: 1px;
}
.splash-ene {
  color: #fff;
  opacity: 0;
  transform: translateX(-46px);
  animation: splashEneIn 0.6s cubic-bezier(.2,.8,.2,1) 0.15s forwards;
}
.splash-con {
  color: var(--green);
  opacity: 0;
  transform: translateX(46px);
  text-shadow: 0 0 18px rgba(200,16,46,0.85), 0 0 40px rgba(200,16,46,0.4);
  animation: splashConIn 0.6s cubic-bezier(.2,.8,.2,1) 0.15s forwards;
}
@keyframes splashEneIn { to { opacity: 1; transform: translateX(0); } }
@keyframes splashConIn { to { opacity: 1; transform: translateX(0); } }

.splash-flash {
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  animation: splashFlash 0.5s ease-out 0.68s forwards;
}
@keyframes splashFlash {
  0% { opacity: 0.95; transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.9); }
  100% { opacity: 0; transform: scale(1); box-shadow: 0 0 0 90px rgba(255,255,255,0); }
}

.splash-tag {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #cfcfcf;
  opacity: 0;
  transform: translateY(10px);
  animation: splashTagIn 0.5s ease 0.85s forwards;
}
@keyframes splashTagIn { to { opacity: 1; transform: translateY(0); } }

.splash-progress {
  width: 180px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
  opacity: 0;
  animation: splashTagIn 0.4s ease 1.0s forwards;
}
.splash-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--green-mid), var(--green), #ff5468);
  animation: splashProgressFill 2.3s cubic-bezier(.3,.6,.3,1) 0.35s forwards;
}
@keyframes splashProgressFill { to { width: 100%; } }

.splash-hint {
  font-size: 10.5px;
  color: rgba(255,255,255,0.35);
  opacity: 0;
  animation: splashTagIn 0.4s ease 1.3s forwards;
}

@media (max-width: 560px) {
  .splash-logo { font-size: 42px; }
  .splash-glow { width: 380px; height: 380px; margin: -190px 0 0 -190px; }
}
@media (prefers-reduced-motion: reduce) {
  #splash-screen, #splash-screen * { animation: none !important; transition: none !important; }
  .splash-ene, .splash-con, .splash-tag, .splash-progress, .splash-hint { opacity: 1 !important; transform: none !important; }
}

/* ══════════════════════════════════
   使い方ヘルプモーダル（❓使い方）
   ・ヘッダー常設ボタンからいつでも開ける、FAQ形式のアコーディオン。
   ・「分電盤・明細の電灯用/動力用は両方必要か」「タブの違いは何か」等、
     営業マンから実際に質問が出やすい・分かりにくいポイントを中心にまとめる。
   ・冒頭に「使い方ツアーをもう一度見る」ボタンを置き、オンボーディング
     ツアー（画面をハイライトしながら案内するモード）を呼び出せる。
══════════════════════════════════ */
/* ─── 営業サポートツールバー（❓/🎵/🔔/📁/🎬 の5ボタンをグループ化する外枠） ───
   個別ボタンが背景に埋没して営業マンの目に留まりにくいという課題への対処。
   薄いグレーのパネル＋ラベルで「ひとかたまりの道具箱」として視認させ、
   各ボタンは白地の輪郭線ではなく色そのもので塗りつぶして識別性を上げる。 */
.sales-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #fbfbfb, #f2f2f2);
  border: 1px solid #e2e2e2;
  border-radius: 14px;
  padding: 5px 10px 5px 12px;
  margin-right: 10px;
  order: 2;
}
.sales-toolbar-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.sales-toolbar-btns {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-help {
  display: inline-flex; align-items: center; gap: 5px;
  background: #ea580c; border: 1.5px solid #ea580c; color: #fff;
  border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
.btn-help span:first-child { font-size: 15px; }
.btn-help:hover { background: #c2410c; border-color: #c2410c; }

.help-modal-box { max-width: 560px; max-height: 86vh; overflow-y: auto; }

/* ─── 実績・メディア掲載モーダル（公式サイト・出演動画へのリンクカード集） ─── */
.media-modal-box { max-width: 480px; max-height: 86vh; overflow-y: auto; }
.media-modal-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.media-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.media-card {
  display: flex; align-items: stretch; gap: 10px;
  background: #fafafa; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; text-decoration: none; color: inherit;
}
.media-card-thumb { position: relative; width: 120px; flex-shrink: 0; }
.media-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-card-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.25);
}
.media-card-play span {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,0,0,0.9);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px;
  padding-left: 2px;
}
.media-card-body { flex: 1; min-width: 0; padding: 10px 14px 10px 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.media-card-tag { font-size: 10.5px; font-weight: 700; color: var(--orange); }
.media-card-title { font-size: 14px; font-weight: 700; line-height: 1.4; }
.media-card-text { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.media-card-official .media-card-thumb { width: 80px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 8px; box-sizing: border-box; }
.media-card-official .media-card-thumb span { display: none; }
.media-card-official .media-card-thumb img { display: block; object-fit: contain; }
.help-tour-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; background: linear-gradient(90deg, var(--green-mid), var(--green));
  color: #fff; border: none; border-radius: 10px; padding: 12px 16px;
  font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
  margin-bottom: 18px; box-shadow: 0 3px 10px rgba(200,16,46,0.25);
}
.help-tour-btn:hover { background: linear-gradient(90deg, var(--green), #ff5468); }

.help-section-label {
  font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.5px;
  margin: 18px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.help-section-label:first-of-type { margin-top: 0; }

.help-faq-item { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.help-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fafafa; border: none; padding: 12px 14px; text-align: left;
  font-size: 13px; font-weight: 700; color: var(--text); font-family: inherit; cursor: pointer;
}
.help-faq-q:hover { background: var(--green-light); }
.help-faq-arrow { flex-shrink: 0; font-size: 10px; color: var(--muted); transition: transform 0.25s ease; }
.help-faq-item.open .help-faq-arrow { transform: rotate(180deg); color: var(--green); }
.help-faq-a {
  max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
  font-size: 12.5px; line-height: 1.75; color: var(--muted);
}
.help-faq-item.open .help-faq-a { max-height: 900px; }
.help-faq-a-inner { padding: 2px 14px 14px; }
.help-faq-a-inner b { color: var(--text); }

/* ── AIにその場で質問する（QAチャットボット） ──
   ・ヘルプモーダル最下部に設置。FAQ内容の範囲でのみ回答するAIチャット。
   ・範囲外の質問には「お問い合わせください」の案内メールを返す。 */
.help-ai-qa-box {
  background: var(--green-light); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px 14px; margin-bottom: 4px;
}
.help-ai-qa-desc { font-size: 11.5px; color: var(--muted); line-height: 1.6; margin-bottom: 10px; }
.help-ai-qa-log {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 260px; overflow-y: auto; margin-bottom: 10px;
}
.help-ai-qa-log:empty { display: none; }
.help-ai-qa-msg {
  font-size: 12.5px; line-height: 1.7; padding: 9px 12px; border-radius: 10px;
  max-width: 92%; white-space: pre-wrap; word-break: break-word;
}
.help-ai-qa-msg-user {
  align-self: flex-end; background: var(--green); color: #fff; font-weight: 600;
}
.help-ai-qa-msg-ai {
  align-self: flex-start; background: #fff; border: 1px solid var(--border); color: var(--text);
}
.help-ai-qa-msg-ai a { color: var(--green); font-weight: 700; }
.help-ai-qa-msg-loading { align-self: flex-start; background: #fff; border: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.help-ai-qa-input-row { display: flex; gap: 8px; }
.help-ai-qa-input {
  flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 999px;
  padding: 9px 14px; font-size: 12.5px; font-family: inherit; background: #fff;
}
.help-ai-qa-input:focus { outline: none; border-color: var(--green); }
.help-ai-qa-send {
  flex-shrink: 0; background: var(--green); color: #fff; border: none;
  border-radius: 999px; padding: 9px 18px; font-size: 12.5px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.help-ai-qa-send:hover { background: #ff5468; }
.help-ai-qa-send:disabled { opacity: 0.6; cursor: default; }


/* ══════════════════════════════════
   使い方ツアー（オンボーディング）
   ・初回訪問時に自動再生。画面上の実際の要素をスポットライト演出で
     ハイライトし、近くに吹き出し（ツアーカード）で説明を表示する。
   ・対象要素が別タブにある場合は、ステップ表示前に自動でタブを切替える。
   ・ヘルプモーダルの「使い方ツアーをもう一度見る」から何度でも再生可能。
══════════════════════════════════ */
#tour-overlay {
  position: fixed; inset: 0; z-index: 6000; display: none;
  background: rgba(10,10,10,0.0); /* スポットライト対象はbox-shadowで個別に暗転させるため背景は透明 */
  pointer-events: none;
}
#tour-overlay.active { display: block; }
#tour-overlay.tour-no-target {
  background: rgba(10,10,10,0.62); pointer-events: auto;
}

/* 注意：スポットライト対象は position:relative + z-index で前面に持ち上げるため
   独自のスタッキングコンテキストを作る。#tour-overlay（z-index:6000）が
   対象の z-index（5001）より必ず大きい値になるようにし、
   #tour-overlay内の.tour-cardが対象の後ろに埋もれてクリックを奪われる
   スタッキング不整合を防いでいる。 */
.tour-spotlight {
  position: relative !important;
  z-index: 5001 !important;
  box-shadow: 0 0 0 6px rgba(255,255,255,0.95), 0 0 0 9999px rgba(10,10,10,0.62), 0 0 26px 4px rgba(200,16,46,0.55) !important;
  border-radius: 10px;
  transition: box-shadow 0.25s ease;
  pointer-events: auto !important;
}

.tour-card {
  position: fixed; z-index: 6002; pointer-events: auto;
  width: 300px; max-width: calc(100vw - 32px);
  background: #fff; border-radius: 14px; padding: 18px 18px 16px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.28);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.tour-card.show { opacity: 1; transform: translateY(0); }
.tour-card-step { font-size: 11px; font-weight: 700; color: var(--green); letter-spacing: 0.5px; margin-bottom: 6px; }
.tour-card-title { font-size: 14.5px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.tour-card-desc { font-size: 12.5px; line-height: 1.7; color: var(--muted); margin-bottom: 14px; }
.tour-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tour-card-skip {
  background: none; border: none; color: var(--muted-light); font-size: 11.5px;
  font-family: inherit; cursor: pointer; padding: 6px 2px; text-decoration: underline;
}
.tour-card-nav { display: flex; gap: 8px; }
.tour-card-prev, .tour-card-next {
  border-radius: 999px; padding: 7px 16px; font-size: 12.5px; font-weight: 700;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
.tour-card-prev { background: #fff; border: 1.5px solid var(--border); color: var(--muted); }
.tour-card-next { background: var(--green); border: 1.5px solid var(--green); color: #fff; }
.tour-card-next:hover { background: var(--green-mid); }
.tour-card-dots { display: flex; gap: 5px; justify-content: center; margin-top: 12px; }
.tour-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--border); }
.tour-dot.active { background: var(--green); width: 14px; border-radius: 3px; }

@media (max-width: 560px) {
  .tour-card { width: calc(100vw - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .tour-card, .tour-spotlight { transition: none !important; }
}

/* ─── Header ─── */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 10px 32px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 4px;
  position: sticky;
  top: 0;
  z-index: 10;
  /* ─── 常時2段ヘッダー構成 ───
     1段目：ロゴ＋各種ボタン群＋ログイン状態＋PDF出力
     2段目：ナビゲーションタブ（幅いっぱい＝画面幅に関わらず横スクロール無しで
     「履歴」「送信履歴」「備考」等の全タブが常に見える状態にする）
     PC画面でもナビが右側ボタン群と幅を競合して横スクロール化し、
     後半タブが見えなくなる問題を解消するための変更。 */
}
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; order: 1; }
.logo-mark {
  display: flex;
  flex-direction: column;
  line-height: 1;
  flex-shrink: 0;
}
.logo-mark-main {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.5px;
  font-family: Arial, Helvetica, sans-serif;
}
.logo-mark-main .ene { color: var(--text); }
.logo-mark-main .con { color: var(--green); }
.logo-mark-tag {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--muted);
  margin-top: 1px;
}
.logo-sub {
  font-size: 11px; color: var(--muted);
  white-space: nowrap; flex-shrink: 0;
  /* .logoはdisplay:flexのため直接の子要素は自動的にflexアイテム化され、
     デフォルトのmin-width:autoにより横幅不足時に文字の途中で折り返され
     縦書きのように見えてしまう不具合があった。white-space:nowrap +
     flex-shrink:0で「絶対に折り返さない・縮めない」ことを明示して防止する。 */
}
/* ─── システムバージョンバッジ（ロゴ横） ───
   ENECON® SYSTEM の正式名称とバージョン番号を、ロゴ周りに控えめかつ
   洗練された英語調のバッジとして表示する。 */
.logo-version-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.logo-version-num {
  color: var(--green);
  font-weight: 800;
}
@media (max-width: 1024px) {
  .logo-version-badge { display: none; }
}

/* ─── フッター（コピーライト・商標表記） ───
   株式会社CONNECTのシステムであること、およびENECON®カードが
   商標登録済みであることを、洗練された英語調のコピーライト表記で示す。 */
.site-footer {
  text-align: center;
  padding: 32px 20px 40px;
  margin-top: 24px;
  border-top: 1px solid var(--border);
  color: var(--muted);
}
.site-footer-brand {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--text);
  margin-bottom: 8px;
}
.site-footer-reg {
  font-size: 10px;
  vertical-align: super;
  font-weight: 700;
}
.site-footer-version {
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.5px;
  margin-left: 2px;
}
.site-footer-copy {
  font-size: 11.5px;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.site-footer-trademark {
  font-size: 10.5px;
  color: var(--muted-light);
  letter-spacing: 0.2px;
}

/* ─── ナビタブの横スクロール領域（ラッパー） ───
   タブ数がログイン権限（代理店/管理者）に応じて増減し、画面幅に収まらない
   場合は.nav自体が横スクロールする。その際にスクロール可能であることが
   見た目上まったく分からず、後半のタブ（送信履歴（管理者）等）に気づけない
   という問題があったため、左右に「まだ続きがある」ことを示すフェード＋矢印
   ボタンを追加する。 */
.nav-scroll-wrap {
  position: relative;
  order: 4;
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  border-top: 1px solid var(--border);
}
.nav {
  display: flex; align-items: center; height: 44px;
  /* 常時2段ヘッダー構成のため、ナビは常にヘッダー内で「幅いっぱいの専用の行」に
     折り返す。flex-basis:100%を強制することで、ロゴ・右側ボタン群と同じ行で
     幅を競合して横スクロール化し後半タブ（履歴・送信履歴・備考等）が見えなくなる
     問題を解消。ナビ自体は8タブがまだ画面に収まらない極小幅の場合のみ
     横スクロール可能（min-width:0 + overflow-x:auto）にして情報を欠落させない。 */
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.nav::-webkit-scrollbar { display: none; }
/* スクロール可能な状態のときだけJSで.nav-scroll-wrapに付与するクラス。
   左右に隠れているタブがある方向にだけフェード（グラデーション）を出す。 */
.nav-scroll-wrap.has-scroll-left::before,
.nav-scroll-wrap.has-scroll-right::after {
  content: '';
  position: absolute;
  top: 1px; bottom: 0;
  width: 32px;
  pointer-events: none;
  z-index: 2;
}
.nav-scroll-wrap.has-scroll-left::before {
  left: 0;
  background: linear-gradient(90deg, #fff 20%, rgba(255,255,255,0));
}
.nav-scroll-wrap.has-scroll-right::after {
  right: 0;
  background: linear-gradient(270deg, #fff 20%, rgba(255,255,255,0));
}
.nav-scroll-btn {
  display: flex; align-items: center; justify-content: center;
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  color: var(--text);
  font-size: 15px; font-weight: 900; line-height: 1;
  cursor: pointer;
  z-index: 3;
  padding: 0;
}
.nav-scroll-btn:hover { background: #f5f5f5; }
.nav-scroll-btn-left { left: 2px; }
.nav-scroll-btn-right { right: 2px; }
.nav-item {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 22px;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  user-select: none;
  transition: color 0.15s, border-bottom-color 0.2s ease, transform 0.12s ease;
}
.nav-item:hover { color: var(--text); }
.nav-item.active { color: var(--text); font-weight: 700; border-bottom-color: var(--orange); }
/* タブをタップした瞬間、軽く縮んで「押した感」を出す（ネイティブアプリのタブ挙動に近づける） */
.nav-item:active { transform: scale(0.95); }

/* ─── 「簡単入力」タブの強調表示（基本の入力方法として推奨） ─── */
.nav-item-highlight {
  position: relative;
  color: var(--green) !important;
  font-weight: 700;
  background: var(--green-light);
  border-radius: 8px 8px 0 0;
}
.nav-item-highlight:hover { color: var(--green) !important; }
.nav-item-highlight.active {
  border-bottom-color: var(--green);
  background: #f8d7dc;
}
.nav-item-highlight-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--green);
  border-radius: 999px;
  line-height: 1.6;
  white-space: nowrap;
  animation: navHighlightPulse 1.8s ease-in-out infinite;
}
@keyframes navHighlightPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,16,46,0.5); }
  50% { box-shadow: 0 0 0 5px rgba(200,16,46,0); }
}

.btn-pdf {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.04em;
  order: 3;
}
.btn-pdf:hover { background: var(--green-mid); }

/* ─── ログイン状態表示（ヘッダー右側） ───
   ログイン中は「代理店コード／代理店名／営業マンコード／氏名」の4行を
   わかりやすく表示する（営業マンコード・氏名は未設定なら該当行を表示しない）。 */
.auth-status { display: flex; align-items: center; gap: 10px; margin-right: 16px; order: 2; }
.auth-status-text { font-size: 12px; color: var(--muted); white-space: nowrap; }
.auth-status-text.logged-in { color: var(--green); font-weight: 700; }
.auth-user-panel {
  display: none;
  flex-direction: column;
  gap: 1px;
  padding: 6px 12px;
  background: var(--green-light);
  border: 1px solid rgba(24,120,62,0.18);
  border-radius: 8px;
  line-height: 1.35;
}
.auth-user-panel.active { display: flex; }
.auth-user-panel-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}
.auth-user-panel-label { font-size: 10px; color: var(--muted); flex-shrink: 0; }
.auth-user-panel-value { font-size: 12.5px; color: var(--text); font-weight: 700; }
.auth-user-panel-value.agency-name-value,
.auth-user-panel-value.display-name-value { color: var(--green); }
.auth-user-panel-edit-btn {
  align-self: flex-end;
  margin-top: 2px;
  background: none; border: none; padding: 0;
  font-size: 10.5px; color: var(--muted); text-decoration: underline;
  cursor: pointer; font-family: inherit;
}
.auth-user-panel-edit-btn:hover { color: var(--green); }
.btn-auth-action {
  background: #fff; border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 6px 14px; font-size: 12.5px; font-weight: 700;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
.btn-auth-action:hover { background: #f4f6f4; }

/* ─── ホーム画面に追加ボタン（ヘッダー） ─── */
.btn-install {
  display: none; /* JSで対応環境と判定した場合のみ表示 */
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1.5px solid var(--green);
  color: var(--green);
  border-radius: 20px;
  padding: 7px 15px 7px 12px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  margin-right: 14px;
  transition: background 0.15s, color 0.15s;
  order: 2;
}
.btn-install:hover { background: var(--green); color: #fff; }
.btn-install-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  flex-shrink: 0;
  line-height: 1;
}
.btn-install:hover .btn-install-icon { background: #fff; color: var(--green); }

/* ─── 営業資料ボタン（ヘッダー） ─── */
.btn-materials {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #1d6fd8;
  border: 1.5px solid #1d6fd8;
  color: #fff;
  border-radius: 20px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.btn-materials span:first-child { font-size: 14.5px; }
.btn-materials:hover { background: #0f4fa8; border-color: #0f4fa8; }

/* ─── Web営業資料ボタン（.btn-materialsの色違い。対面商談でタブレット/PCから
     すぐ開けるダイジェスト版・フル版・PDF出力対応のWeb営業資料への導線） ─── */
.btn-sales-deck { background: var(--green); border-color: var(--green); }
.btn-sales-deck:hover { background: #a30d24; border-color: #a30d24; }

/* ─── 実績・メディア掲載ボタン（ヘッダー常設。公式サイト・出演動画へワンタップでアクセス） ─── */
.btn-media {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #dc2626;
  border: 1.5px solid #dc2626;
  color: #fff;
  border-radius: 20px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  animation: mediaBtnPulse 2.4s ease-in-out infinite;
}
.btn-media span:first-child { font-size: 14.5px; }
.btn-media:hover { background: #b91c1c; border-color: #b91c1c; transform: scale(1.05); }
@keyframes mediaBtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.5); }
  50% { box-shadow: 0 0 0 5px rgba(220,38,38,0); }
}

/* ─── お知らせ再表示ボタン（ヘッダー常設。閉じたお知らせモーダルをいつでも再度開ける） ─── */
.btn-announce {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #0d9488;
  border: 1.5px solid #0d9488;
  color: #fff;
  border-radius: 20px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  animation: announceBtnPulse 2.4s ease-in-out infinite;
  animation-delay: 1.2s;
}
.btn-announce span:first-child { font-size: 14.5px; }
.btn-announce:hover { background: #0f766e; border-color: #0f766e; transform: scale(1.05); }
@keyframes announceBtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(13,148,136,0.5); }
  50% { box-shadow: 0 0 0 5px rgba(13,148,136,0); }
}

/* ─── 応援ソングボタン（ヘッダー常設。営業マンのテーマソングをいつでも再生できる） ─── */
.btn-song {
  display: flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%);
  border: 1.5px solid #1a1a1a;
  color: #fff;
  border-radius: 20px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s;
  animation: songBtnPulse 2.4s ease-in-out infinite;
  animation-delay: 0.6s;
}
.btn-song span:first-child { font-size: 14.5px; }
.btn-song:hover { transform: scale(1.05); box-shadow: 0 3px 10px rgba(200,16,46,0.35); }
@keyframes songBtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,16,46,0.45); }
  50% { box-shadow: 0 0 0 5px rgba(200,16,46,0); }
}

/* ─── ホーム画面追加 案内モーダル ─── */
#install-guide-overlay .modal-box {
  max-height: 88vh;
  overflow-y: auto;
}
.install-modal-icon {
  display: block;
  width: 56px; height: 56px;
  border-radius: 14px;
  margin: 0 auto 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.install-steps { list-style: none; margin: 0 0 4px; padding: 0; }
.install-step {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  font-size: 13px; line-height: 1.5;
}
.install-step:last-child { border-bottom: none; }
.install-step-num {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--green); color: #fff; font-size: 12px; font-weight: 700;
}
.install-step-text b { color: var(--green); }
.install-step-img {
  display: block;
  width: 100%;
  max-width: 220px;
  margin: 8px 0 2px;
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.install-step-body { flex: 1; min-width: 0; }

/* ══════════════════════════════════
   アプリ内ブラウザ（LINE/Instagram/X等）検出時の誘導モーダル
   ・ホーム画面追加はSafari/Chrome等の「本物のブラウザ」でしか実行できないため、
     アプリ内ブラウザで開かれている場合は先にこのモーダルで
     「外部ブラウザで開く」導線を提示する。
══════════════════════════════════ */
@keyframes inappBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
#inapp-guide-overlay .modal-box {
  max-width: 380px;
  text-align: center;
}
.inapp-guide-icon {
  width: 54px; height: 54px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-mid), var(--green));
  color: #fff; font-size: 26px;
  box-shadow: 0 6px 16px rgba(200,16,46,0.35);
  animation: inappBounce 1.6s ease-in-out infinite;
}
.inapp-guide-title { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.inapp-guide-desc { font-size: 12.5px; line-height: 1.7; color: var(--muted); margin-bottom: 18px; }
.inapp-guide-open-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 20px; margin-bottom: 10px;
  background: linear-gradient(90deg, var(--green-mid), var(--green));
  color: #fff; border: none; border-radius: 10px;
  font-size: 14.5px; font-weight: 800; font-family: inherit; cursor: pointer;
  box-shadow: 0 5px 14px rgba(200,16,46,0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}
.inapp-guide-open-btn:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(200,16,46,0.4); }
.inapp-guide-copy-row {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 8px 8px 8px 14px; margin-bottom: 14px; background: #fafafa;
}
.inapp-guide-copy-url {
  flex: 1; min-width: 0; text-align: left; font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inapp-guide-copy-btn {
  flex-shrink: 0; padding: 7px 12px; border-radius: 7px;
  background: #fff; border: 1.5px solid var(--border); color: var(--text);
  font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.inapp-guide-copy-btn:hover { background: var(--green-light); border-color: var(--green); color: var(--green); }
.inapp-guide-copy-btn.copied { background: var(--success-light); border-color: var(--success); color: var(--success); }
.inapp-guide-hint { font-size: 11.5px; color: var(--muted-light); line-height: 1.6; margin-bottom: 4px; }
.inapp-guide-close-link {
  display: block; width: 100%; margin-top: 10px;
  background: none; border: none; color: var(--muted-light);
  font-size: 11.5px; font-family: inherit; cursor: pointer; text-align: center;
  padding: 4px 0; text-decoration: underline;
}
.inapp-guide-close-link:hover { color: var(--muted); }

/* ─── Page top strip ─── */
.page-top {
  padding: 24px 32px 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--bg);
}
.page-title-block { flex: 1; min-width: 240px; }
.page-eyebrow { font-size: 13px; color: var(--green); font-weight: 700; margin-bottom: 4px; }
.page-h1 { font-size: 34px; font-weight: 900; letter-spacing: -0.01em; line-height: 1.15; margin-bottom: 6px; }
.page-subtitle { font-size: 12px; color: var(--muted); }
.page-tags { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.tag { padding: 5px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 500; }
.tag-outline { border: 1.5px solid var(--border); color: var(--text); background: #fff; }
.tag-filled  { background: var(--green-light); color: var(--green); font-weight: 700; }

/* ─── Client card ─── */
.client-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 22px;
  min-width: 240px;
  max-width: 300px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.client-card-label { font-size: 11.5px; color: var(--muted); margin-bottom: 5px; }
.client-name {
  font-size: 20px;
  font-weight: 700;
  padding-bottom: 8px;
  margin-bottom: 6px;
  color: var(--text);
}
.client-name-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 4px 0;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--muted);
  background: transparent;
  outline: none;
  margin-bottom: 0;
}
.client-name-input:focus {
  border-bottom-color: var(--green);
  color: var(--text);
}
.client-meta { display: flex; gap: 16px; font-size: 12.5px; color: var(--muted); }
.client-meta span strong { color: var(--text); font-weight: 700; }
.client-meta input {
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  width: 80px;
  background: transparent;
}
.client-meta input:focus { color: var(--green); border-bottom: 1px solid var(--green); }

/* ─── Tab content wrapper ─── */
.tab-content { display: none; }
.tab-content.active {
  display: block;
  /* タブ切り替え時、パッと一瞬で表示するのではなく、ふわっとフェード＋
     わずかに下から浮き上がる演出でネイティブアプリらしい滑らかさを出す。
     display:none→block切り替えと同時でも@keyframesは発火するため、
     transitionではなくanimationを使用している。 */
  animation: tabFadeIn 0.28s ease-out;
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════
   TAB: 入力
══════════════════════════════════ */
.input-wrap {
  padding: 0 32px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.input-col { display: flex; flex-direction: column; gap: 16px; }
/* 左列の単独パネルを列の高さいっぱいに伸ばす */
.input-col > .input-panel:only-child { flex: 1; }
/* 注意書き */
.field-note { font-size: 11px; color: var(--muted); margin: -2px 0 5px; }
.input-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 4px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 24px 18px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s ease;
}
/* セクションごとのアクセントカラー：一目で「今どの入力ブロックか」が分かるように上端に色帯を付ける */
.input-panel-accent-red  { border-top-color: var(--green); }
.input-panel-accent-blue { border-top-color: var(--blue); }
.input-panel-accent-dark { border-top-color: #1a1a1a; }
.panel-heading {
  font-size: 17px; font-weight: 800; margin-bottom: 3px;
  display: flex; align-items: center; gap: 8px;
}
.panel-heading-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; font-size: 15px;
  background: var(--green-light); flex-shrink: 0;
}
.input-panel-accent-blue .panel-heading-icon { background: var(--blue-light); }
.input-panel-accent-dark .panel-heading-icon { background: #eef0f2; }
.panel-desc    { font-size: 12px; color: var(--muted); margin-bottom: 20px; }

.field { margin-bottom: 16px; }
.field-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.field-label > span:last-child:not(:only-child) { font-weight: 500; color: var(--muted); font-size: 11.5px; }
.auto-badge {
  background: var(--green-light);
  color: var(--green);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}
.field input[type="number"],
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  /* iOS Safariは入力欄のfont-sizeが16px未満だとタップ時に画面全体を
     自動ズームしてしまう。ネイティブアプリではまず起きない挙動なので
     16pxに固定して防止する（見た目のサイズはpaddingで従来通り調整）。 */
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(200,16,46,0.1);
}
/* Auto-filled but editable */
.field input.auto-filled {
  background: var(--green-light);
  color: var(--green);
  font-weight: 700;
}
.field input.auto-filled:focus {
  background: #fff;
  color: var(--text);
  font-weight: 400;
}
/* 編集不可（固定値）フィールド */
.field input.readonly-field,
.field input.readonly-field:focus {
  background: #f3f4f6;
  color: var(--muted);
  font-weight: 700;
  border-color: var(--border);
  box-shadow: none;
  cursor: not-allowed;
}
.lock-badge {
  background: #eef2f6;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rate-row { display: flex; align-items: center; gap: 12px; }
.rate-row input[type="range"] { flex: 1; accent-color: var(--green); cursor: pointer; }
.rate-row input[type="range"]:disabled { accent-color: var(--muted-light); cursor: not-allowed; opacity: 0.6; }
.rate-val { font-size: 14px; font-weight: 700; color: var(--text); min-width: 52px; text-align: right; }

/* ─── アンペア数から導入枚数を自動計算パネル ─── */
.amp-panel {
  background: var(--green-light);
  border: 1.5px solid #f0c4cb;
  border-radius: var(--radius-lg);
  padding: 18px 18px 16px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-card);
}
.amp-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.amp-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--green);
}
.amp-panel-icon {
  font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: #fff;
  flex-shrink: 0;
}
.amp-auto-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.amp-auto-toggle input[type="checkbox"] { accent-color: var(--green); cursor: pointer; width: 14px; height: 14px; }
.amp-panel-desc { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }
.amp-panel-desc b { color: var(--text); }

/* ─── 「必ずしも2枠あるわけではない」ことを強調する注意ボックス（低圧・電灯/動力の分岐案内） ─── */
.split-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fff7ed;
  border: 1.3px solid #fbd38d;
  border-radius: 9px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 12.5px;
  line-height: 1.7;
  color: #7c4a12;
}
.split-note-icon { font-size: 15px; flex-shrink: 0; line-height: 1.7; }
.split-note b { color: #92400e; }

.amp-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.amp-row {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
}
/* amp-row-top: 名前入力を常に単独の行として全幅表示し（order:1）、
   AI読取信頼度バッジ・「該当箇所を確認」ボタン・削除ボタンはその下の行に回す
   （order:2/3）ことで、バッジの文言が長い場合（例：「AI読取:低・要確認」）や
   「🔍 該当箇所を確認」ボタンが加わった場合でも名前入力欄が圧迫されて
   レイアウトが崩れることがないようにする（お客様画面 apply.html と同じ方式）。 */
.amp-row-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 6px; }
.amp-row-top input[type="text"] { flex: 1 1 100%; min-width: 0; order: 1; }
.amp-row-bottom {
  display: grid;
  grid-template-columns: 92px 1fr 68px;
  gap: 6px;
  align-items: center;
}
.amp-row input[type="text"],
.amp-row input[type="number"] {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
}
.amp-row input[type="text"]:focus,
.amp-row input[type="number"]:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(200,16,46,0.1);
}
.amp-row select {
  width: 100%;
  padding: 7px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  padding-right: 18px;
}
.amp-row select.amp-type-power { color: #b45309; font-weight: 700; }
.amp-row select.amp-type-lighting { color: var(--green); font-weight: 700; }
.amp-row-result {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
  background: var(--green-light);
  border-radius: 6px;
  padding: 7px 4px;
}
/* キュービクル（高圧）契約で49A以下のため対象外（0枚）になった行の強調表示。
   誤って未入力かと見落とさないよう、理由付きの文言と控えめな警告色で明示する。 */
.amp-row-result-excluded {
  background: #fff7ed;
  color: #b45309;
  white-space: normal;
  line-height: 1.3;
}
.amp-row-del {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  border-radius: 50%;
  line-height: 1;
  order: 3;
  margin-left: auto;
}
.amp-row-del:hover { background: #fef2f2; color: #dc2626; }

/* 「🔍 該当箇所を確認」ボタン（AIのcrop-check機能。お客様画面 apply.html と同じ見た目） */
.amp-row-crop-check {
  order: 2; flex-shrink: 0; white-space: nowrap; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 10px; border: 1px solid #93c5fd;
  background: #eff6ff; color: #2563eb; cursor: pointer; font-family: inherit;
  transition: background-color 0.15s ease;
}
.amp-row-crop-check:hover { background: #dbeafe; }

/* 分電盤・キュービクル：手入力で行を追加するボタン（写真ボタンと対になる青系塗りつぶし） */
.amp-add-row {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 46px; padding: 10px; border: none; border-radius: 10px;
  background: linear-gradient(135deg, #2563eb, #1741a6);
  color: #fff; font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: opacity 0.15s, transform 0.1s;
  box-shadow: 0 3px 10px rgba(37,99,235,0.25);
  margin-bottom: 10px;
}
.amp-add-row:hover { opacity: 0.92; }
.amp-add-row:active { transform: scale(0.98); }

.amp-summary {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.amp-summary-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.amp-summary-label { font-size: 10.5px; color: var(--muted); }
.amp-summary-val { font-size: 15px; font-weight: 900; color: var(--text); }
.amp-summary-total { background: var(--green); }
.amp-summary-total .amp-summary-label { color: rgba(255,255,255,0.8); }
.amp-summary-total .amp-summary-val { color: #fff; }

/* ─── 写真からAI読み取り（アンペア数） ─── */
.amp-photo-row { margin-bottom: 6px; }
.amp-photo-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.amp-photo-slots.single-slot { grid-template-columns: 1fr; }
.amp-photo-slot { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.amp-photo-slot-label { font-size: 12px; font-weight: 700; color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 6px; }
/* ─── 撮影例（お手本写真）ボタン・モーダル ─── */
.photo-example-btn {
  display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
  background: #fff; border: 1.3px solid var(--green); color: var(--green);
  border-radius: 999px; padding: 2px 9px; font-size: 10.5px; font-weight: 700;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
.photo-example-btn:hover { background: var(--green-light); }
/* ── 読み取り失敗時の「撮り直し」導線 ── */
.amp-retake-hint {
  background: #fff7ed; border: 1px solid #fdba74; color: #9a3412;
  border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.6;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px;
}
.amp-retake-hint button {
  background: #fff; border: 1.3px solid #ea580c; color: #ea580c;
  border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
.amp-retake-hint button:hover { background: #fff1e6; }
#photo-example-overlay .modal-box { max-width: 380px; max-height: 88vh; overflow-y: auto; padding: 18px 18px 16px; }
.photo-example-img { display: block; width: 100%; border-radius: 10px; border: 1px solid var(--border); margin-top: 4px; }
.photo-example-caption { font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 10px; }
.amp-photo-slot-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.amp-photo-slot-thumbs:empty { display: none; }
.amp-photo-slot-thumb { position: relative; width: 44px; height: 44px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
.amp-photo-slot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* サムネイル右上の削除×ボタン。常時薄く表示しつつhoverで強調し、
   アップロード済み写真をその場で1枚だけ取り消せるようにする。 */
.amp-photo-thumb-del, .bill-photo-thumb-del {
  position: absolute; top: 1px; right: 1px; width: 16px; height: 16px; line-height: 14px;
  border: none; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff;
  font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; text-align: center;
}
.amp-photo-thumb-del:hover, .bill-photo-thumb-del:hover { background: #dc2626; }
/* ─── AI解析／手入力：どちらも対等な「入り口」として見た目の重みを揃える ───
   写真解析＝レッド系、手入力＝ブルー系の塗りつぶしで色分けし、
   サイズ・フォント・角丸・影の付き方は完全に統一することで優劣が出ないようにする。 */
.amp-photo-btn, .bill-photo-btn,
.amp-manual-btn, .bill-manual-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 46px; padding: 10px; border: none; border-radius: 10px;
  color: #fff; font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: opacity 0.15s, transform 0.1s;
}
.amp-photo-btn, .bill-photo-btn {
  background: linear-gradient(135deg, var(--green), #8a0c22);
  box-shadow: 0 3px 10px rgba(200,16,46,0.25);
}
.amp-manual-btn, .bill-manual-btn {
  background: linear-gradient(135deg, #2563eb, #1741a6);
  box-shadow: 0 3px 10px rgba(37,99,235,0.25);
  margin: 0;
}
.amp-photo-btn:hover, .bill-photo-btn:hover,
.amp-manual-btn:hover, .bill-manual-btn:hover { opacity: 0.92; }
.amp-photo-btn:active, .bill-photo-btn:active,
.amp-manual-btn:active, .bill-manual-btn:active { transform: scale(0.98); }
.amp-photo-btn:disabled, .bill-photo-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.amp-photo-btn-icon { font-size: 15px; }
.bill-manual-btn.active { display: none; }

/* 写真解析ボタンと手入力ボタンを横並びで対等に配置する行 */
.amp-photo-choice-row, .bill-photo-choice-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
/* 写真解析が成功し手入力ボタンが隠れた場合、写真ボタン側を全幅に広げて隙間を作らない */
.bill-photo-choice-row:has(.bill-manual-btn.active) .bill-photo-btn { grid-column: 1 / -1; }
.amp-photo-hint { font-size: 10px; color: var(--muted); margin-bottom: 10px; line-height: 1.4; }
.manufacturer-request-hint {
  font-size: 11px; color: var(--muted); line-height: 1.5; margin-bottom: 10px;
  background: #fff8e6; border: 1px solid #f0d999; border-radius: 6px; padding: 8px 10px;
}
.manufacturer-request-hint a { color: #b45309; font-weight: 700; text-decoration: underline; word-break: break-all; }
.amp-photo-status, .bill-slot-status {
  font-size: 11.5px; padding: 8px 10px; border-radius: 6px; margin-bottom: 8px;
  line-height: 1.5;
}
.amp-photo-status:empty, .bill-slot-status:empty { display: none; padding: 0; margin: 0; }
.amp-photo-status.status-loading, .bill-slot-status.status-loading { background: #eef4ff; color: #1d4ed8; }
.amp-photo-status.status-ok, .bill-slot-status.status-ok { background: var(--success-light); color: var(--success); }
.amp-photo-status.status-warn, .bill-slot-status.status-warn { background: #fff7ed; color: #b45309; }
.amp-photo-status.status-error, .bill-slot-status.status-error { background: #fef2f2; color: #dc2626; }
.amp-row.amp-row-ai { border-color: #93c5fd; box-shadow: 0 0 0 1px rgba(59,130,246,0.15); }
.amp-row-confidence {
  display: inline-block; font-size: 9.5px; font-weight: 700; padding: 1px 6px;
  border-radius: 10px; vertical-align: middle;
  order: 2;
}
.amp-row-confidence.conf-high { background: var(--success-light); color: var(--success); }
.amp-row-confidence.conf-medium { background: #fff7ed; color: #b45309; }
.amp-row-confidence.conf-low { background: #fef2f2; color: #dc2626; }

/* ─── 電気明細で確認パネル ─── */
.bill-panel {
  background: #fdf8ec;
  border: 1.5px solid #ecdfb8;
  border-radius: var(--radius-lg);
  padding: 18px 18px 16px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-card);
}
.bill-panel-head { margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bill-panel .amp-panel-title { color: #9a6b00; }
.bill-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.bill-slots.single-slot { grid-template-columns: 1fr; }
.bill-slot { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.bill-slot-head { display: flex; align-items: center; justify-content: space-between; }
.bill-slot-title { font-size: 12px; font-weight: 700; color: var(--text); }

/* ─── 複数月の明細エントリ（実測平均方式） ─── */
.bill-entries { display: flex; flex-direction: column; gap: 8px; }
.bill-entries:empty { display: none; }
.bill-entry {
  display: flex; flex-direction: column; gap: 6px; padding: 8px; margin-top: 2px;
  background: #fbfbf8; border: 1px dashed var(--border); border-radius: 8px;
}
.bill-entry-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.bill-entry-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.bill-entry-thumb { position: relative; width: 40px; height: 40px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); flex-shrink: 0; }
.bill-entry-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bill-entry-del {
  border: none; background: transparent; color: var(--muted); font-size: 10.5px; cursor: pointer; padding: 2px 6px;
  margin-left: auto; border-radius: 4px;
}
.bill-entry-del:hover { color: #dc2626; background: #fef2f2; }

/* ─── 実測平均サマリー表示 ─── */
.bill-avg-summary {
  margin-top: 4px; padding: 8px 10px; border-radius: 8px; font-size: 11.5px; font-weight: 700;
  color: #1d4ed8; background: #eef4ff; border: 1px solid #d6e4ff;
}
.bill-avg-summary.bill-avg-warn {
  color: #92400e; background: #fff7ed; border: 1.3px solid #fbd38d;
}
.bill-multi-hint {
  grid-column: 1 / -1; margin: 2px 0 4px; padding: 8px 10px; border-radius: 8px;
  font-size: 11.5px; color: #9a6b00; background: #fff8e6; border: 1px solid #ecdfb8;
}

.bill-field { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.bill-field span:first-child { flex-shrink: 0; width: 48px; }
.bill-field input {
  flex: 1; min-width: 0; padding: 6px 7px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 12px; font-family: inherit; color: var(--text);
}
.bill-field input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 2px rgba(200,16,46,0.1); }
.bill-field select.bill-month {
  flex: 1; min-width: 0; padding: 6px 7px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 12px; font-family: inherit; color: var(--text); background: #fff;
}
.bill-field select.bill-month:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 2px rgba(200,16,46,0.1); }
.bill-unit { flex-shrink: 0; font-size: 10.5px; }
.bill-field-readonly .bill-unitprice { font-weight: 800; color: var(--green); font-size: 12.5px; }
.bill-check-btn {
  width: 100%; padding: 10px; border: none; border-radius: 8px; margin-top: 6px;
  background: #1a1a1a; color: #fff; font-size: 12.5px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: opacity 0.15s;
}
.bill-check-btn:hover { opacity: 0.9; }
.bill-check-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.bill-check-result { margin-top: 10px; padding: 12px; border-radius: 8px; font-size: 12px; line-height: 1.6; }
.bill-check-result.severity-ok { background: var(--success-light); border: 1px solid #cfe4d9; }
.bill-check-result.severity-caution { background: #fff7ed; border: 1px solid #fbd38d; }
.bill-check-result.severity-warning { background: #fef2f2; border: 1px solid #fca5a5; }
.bill-check-result .bcr-title { font-weight: 800; font-size: 13px; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.bill-check-result.severity-ok .bcr-title { color: var(--success); }
.bill-check-result.severity-caution .bcr-title { color: #b45309; }
.bill-check-result.severity-warning .bcr-title { color: #dc2626; }
.bill-check-result .bcr-reasoning { color: var(--muted); font-size: 11.5px; }

/* ══════════════════════════════════
   TAB: 試算結果
══════════════════════════════════ */
.results-wrap {
  padding: 0 32px 40px;
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 16px;
  align-items: start;
}
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.section-heading { font-size: 16px; font-weight: 700; margin-bottom: 3px; }
.section-desc    { font-size: 11.5px; color: var(--muted); margin-bottom: 12px; }
.results-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 0;
}
.results-heading-row .btn-print { flex-shrink: 0; margin-top: 2px; }
.results-heading-actions { display: flex; gap: 8px; flex-shrink: 0; margin-top: 2px; flex-wrap: wrap; }
.results-heading-actions .btn-print,
.results-heading-actions .btn-secondary { flex-shrink: 0; margin-top: 0; white-space: nowrap; }

.kpi-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.kpi-card.wide { grid-column: 1 / -1; }
.kpi-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; font-size: 16px;
  margin-bottom: 10px;
}
.kpi-icon-blue  { background: var(--blue-light); }
.kpi-icon-green { background: var(--success-light); }
.kpi-icon-amber { background: var(--amber-light); }
.kpi-label    { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.kpi-sublabel { font-size: 10.5px; color: var(--muted-light); margin-top: 4px; }
.kpi-value { font-size: 26px; font-weight: 900; color: var(--text); line-height: 1.1; letter-spacing: -0.01em; }
.kpi-value.big { font-size: 34px; color: #fff; }

/* ─── 一番訴求したい「累計削減額」を目立たせるヒーローカード ─── */
.kpi-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(120deg, var(--green-mid) 0%, var(--green) 55%, #ff5468 100%);
  border: none;
  box-shadow: 0 8px 22px rgba(200,16,46,0.28);
  padding: 22px 24px;
}
.kpi-hero-icon {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 16px;
  background: rgba(255,255,255,0.18);
  font-size: 28px;
}
.kpi-hero-body { flex: 1; min-width: 0; }
.kpi-hero .kpi-label { color: rgba(255,255,255,0.85); }
.kpi-hero .kpi-sublabel { color: rgba(255,255,255,0.7); }

.compare-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-card); }
.compare-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 14px; }
.compare-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 12px; }
.compare-row:last-child { margin-bottom: 0; }
.compare-row .clabel { width: 48px; color: var(--muted); flex-shrink: 0; font-size: 11.5px; font-weight: 700; }
.bar-track { flex: 1; background: #f3f4f6; border-radius: 8px; height: 20px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 8px; transition: width 0.4s ease; }
.bar-fill.before { background: linear-gradient(90deg, #4b5563, #1a1a1a); }
.bar-fill.after  { background: linear-gradient(90deg, var(--green-mid), var(--green)); }
.compare-row .cval { font-size: 13px; font-weight: 800; width: 86px; text-align: right; flex-shrink: 0; }

/* right mini-summary */
.mini-summary {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.mini-hero {
  background: linear-gradient(120deg, var(--green-mid) 0%, var(--green) 60%, #ff5468 100%);
  color: #fff;
  padding: 18px 20px;
}
.mini-hero .m-label { font-size: 11.5px; font-weight: 700; opacity: 0.85; margin-bottom: 6px; }
.mini-hero .m-val   { font-size: 26px; font-weight: 900; }
.mini-hero .m-note  { font-size: 9.5px; opacity: 0.7; margin-top: 8px; line-height: 1.5; }
.mini-hero .m-note-warn { opacity: 1; color: #b45309; font-weight: 700; margin-top: 4px; }
#btn-apply-form-results {
  display: flex;
  margin: 14px 16px 16px;
  /* 右サイドバー（固定幅260px）に収まるよう、ベースのnowrapを解除して
     テキストを折り返す（＝ボタンが右にはみ出す不具合の修正）。 */
  white-space: normal;
  text-align: center;
  line-height: 1.4;
  height: auto;
}
.mini-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.mini-row:last-child { border-bottom: none; }
.mini-row .ml { color: var(--muted); }
.mini-row .mv { font-weight: 800; font-size: 13.5px; }

/* ══════════════════════════════════
   TAB: 提案書出力
══════════════════════════════════ */
.proposal-wrap {
  padding: 0 32px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.proposal-actions {
  width: 100%;
  max-width: 720px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.btn-print {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.btn-print:hover { background: var(--green-mid); }

/* A4文書のスケール表示ラッパー ── モバイル/タブレットでは実寸(210mm)のまま
   transform:scale で視覚的に縮小するため、PDF生成が参照する offsetWidth /
   scrollHeight は常に本来のA4サイズを保つ（PDF出力サイズに影響しない） */
.a4-scale-outer {
  width: 100%;
  overflow: hidden;
}
/* A4 document */
.a4-doc {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto; /* 縮小されず余白がある時は中央寄せ／縮小時はauto margin=0で左端起点になり
                      transform-origin:top left でのスケール計算と一致する */
  background: #fff;
  box-shadow: 0 2px 16px rgba(0,0,0,0.12);
  padding: 16mm 18mm 14mm;
  display: flex;
  flex-direction: column;
  transform-origin: top left;
}
.a4-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid var(--green);
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.a4-logo-block .a4-badge {
  background: var(--green);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 16px;
  display: inline-block;
  margin-bottom: 4px;
}
.a4-logo-block .a4-doc-title {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.2;
}
.a4-company-block { text-align: right; font-size: 10px; color: var(--muted); line-height: 1.75; }
.a4-company-block [contenteditable] {
  outline: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s;
  display: inline-block;
}
.a4-company-block [contenteditable]:hover  { border-bottom-color: var(--border); }
.a4-company-block [contenteditable]:focus  { border-bottom-color: var(--green); color: var(--text); }
.a4-company-block .co-name { font-size: 12px; font-weight: 700; color: var(--text); display: block; }

.a4-client-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 12px;
}
.a4-client-name { font-size: 18px; font-weight: 700; }
.a4-meta { font-size: 11px; color: var(--muted); text-align: right; line-height: 1.8; }
.a4-meta span { margin-left: 12px; }
.a4-meta strong { color: var(--text); }

/* Hero section */
.a4-hero {
  background: var(--green);
  border-radius: 10px;
  padding: 14px 20px;
  color: #fff;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.a4-hero-left .h-label { font-size: 11px; opacity: 0.8; margin-bottom: 4px; }
.a4-hero-left .h-val   { font-size: 36px; font-weight: 900; line-height: 1; }
.a4-hero-left .h-note  { font-size: 9px; opacity: 0.6; margin-top: 6px; }
.a4-hero-left .h-note-warn { opacity: 1; color: #b45309; font-weight: 700; }
.a4-hero-right { text-align: right; font-size: 11px; opacity: 0.85; line-height: 2; }
.a4-hero-right .h-sub-val { font-size: 15px; font-weight: 700; margin-left: 6px; }

/* KPI grid */
.a4-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.a4-kpi-box {
  background: var(--green-light);
  border-radius: 8px;
  padding: 10px 12px;
}
.a4-kpi-box .bk-label { font-size: 10px; color: var(--green); margin-bottom: 4px; }
.a4-kpi-box .bk-val   { font-size: 16px; font-weight: 900; color: var(--green); }
.a4-kpi-box .bk-sub   { font-size: 9px; color: var(--muted); margin-top: 2px; }

/* Detail table */
.a4-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  border-left: 3px solid var(--green);
  padding-left: 7px;
  margin-bottom: 6px;
}
.a4-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  font-size: 11.5px;
}
.a4-table th {
  background: var(--green);
  color: #fff;
  padding: 6px 10px;
  text-align: left;
  font-weight: 700;
  font-size: 10.5px;
}
.a4-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.a4-table tr:last-child td { border-bottom: none; }
.a4-table td:last-child { text-align: right; font-weight: 700; }
.a4-table tr:nth-child(even) td { background: #fafafa; }

/* Comparison bars */
.a4-compare { margin-bottom: 12px; }
.a4-compare-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 10.5px; }
.a4-compare-row .cl  { width: 56px; color: var(--muted); flex-shrink: 0; }
.a4-compare-row .bt  { flex: 1; background: #f0f0f0; border-radius: 3px; height: 14px; overflow: hidden; }
.a4-compare-row .bf  { height: 100%; border-radius: 3px; }
.a4-compare-row .bf.before { background: var(--orange); }
.a4-compare-row .bf.after  { background: var(--green); }
.a4-compare-row .cv  { font-size: 10.5px; font-weight: 700; width: 90px; text-align: right; flex-shrink: 0; }

/* Input conditions — single horizontal row */
.a4-cond-row {
  display: flex;
  flex-wrap: nowrap;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
}
.a4-cond-item {
  flex: 1;
  padding: 5px 7px;
  border-right: 1px solid var(--border);
  min-width: 0;
}
.a4-cond-item:last-child { border-right: none; }
.ct-label { display: block; font-size: 8px; color: var(--muted); margin-bottom: 2px; line-height: 1.3; word-break: keep-all; }
.ct-val   { display: block; font-size: 9.5px; font-weight: 700; word-break: break-all; line-height: 1.3; }

/* Footer */
.a4-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 9px;
  color: var(--muted);
  line-height: 1.7;
}

/* ══ 提案書プレビュー ページ2（選ばれる理由・クロージング＋NISA） ══ */
.a4-page2 {
  border-top: 4px double var(--border);
  margin-top: 20px;
  padding-top: 20px;
}
.a4-page2-title {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  border-bottom: 2px solid var(--green);
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.a4-stats2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.a4-stats2-box { border: 1px solid var(--border); border-radius: 10px; padding: 12px; text-align: center; }
.a4-stats2-val { font-size: 20px; font-weight: 900; color: var(--green); }
.a4-stats2-label { font-size: 9px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.a4-page2-data { font-size: 10px; color: var(--muted); line-height: 1.6; margin-bottom: 12px; }
.a4-cases2-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.a4-case2-chip {
  font-size: 9.5px; font-weight: 700; border: 1px solid var(--border); border-radius: 9px; padding: 3px 9px; color: var(--text);
  /* お客様への説明中、その場でタップして実データの証跡画像を見せられるようにする
     （apply.html側の導入事例チップと同じ考え方）。印刷/PDF出力は既存のCanvas直接描画方式で
     DOM状態に依存しないため、ここをクリック可能にしても出力結果には影響しない。 */
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.a4-case2-chip:hover { background: var(--green-light); border-color: var(--green); }
.a4-case2-chip::after { content: '🔍'; font-size: 8px; margin-left: 3px; opacity: 0.55; }

/* ── 導入事例モーダル（実データの証跡画像を表示・営業マンPC画面用） ── */
.case-modal-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.6);
  align-items: center; justify-content: center;
  padding: 16px;
}
.case-modal-overlay.active { display: flex; animation: modalOverlayFadeIn 0.22s ease-out; }
.case-modal-box {
  background: #fff; border-radius: 14px; max-width: 720px; width: 100%;
  max-height: 90vh; overflow-y: auto; position: relative;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.case-modal-overlay.active .case-modal-box { animation: modalBoxPopIn 0.26s cubic-bezier(0.22, 1, 0.36, 1); }
.case-modal-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: #fff; border: none;
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.case-modal-close:hover { background: rgba(0,0,0,0.75); }
.case-modal-img { width: 100%; display: block; border-radius: 14px 14px 0 0; }
.case-modal-body { padding: 14px 18px 18px; }
.case-modal-note { font-size: 11px; color: var(--muted); line-height: 1.6; }
.a4-imagine2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.a4-imagine2-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: #fafafa; }
.a4-imagine2-card-title { font-size: 10.5px; font-weight: 700; margin-bottom: 4px; color: var(--text); }
.a4-imagine2-card-text { font-size: 9px; color: var(--muted); line-height: 1.55; }
.a4-nisa2-section { display: none; margin-bottom: 8px; }
.a4-nisa2-box { background: #0f2942; border-radius: 12px; padding: 16px; text-align: center; color: #fff; margin-bottom: 14px; }
.a4-nisa2-sub { font-size: 10px; color: rgba(255,255,255,0.75); margin-bottom: 6px; }
.a4-nisa2-val { font-size: 26px; font-weight: 900; color: #38b26a; }
.a4-nisa2-detail { font-size: 9px; color: rgba(255,255,255,0.6); margin-top: 8px; }
.a4-nisa2-rows { margin-bottom: 4px; }
.a4-nisa2-row { display: flex; justify-content: space-between; font-size: 10.5px; padding: 7px 4px; border-bottom: 1px solid var(--border); }
.a4-nisa2-row-label { color: var(--muted); }
.a4-nisa2-row-val { font-weight: 700; color: var(--text); }
.a4-page2-footer {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 8.5px;
  color: var(--muted);
  line-height: 1.7;
}

/* ══════════════════════════════════
   TAB: 備考
══════════════════════════════════ */
.notes-wrap { padding: 0 32px 40px; max-width: 600px; }
.notes-wrap label { font-size: 13px; font-weight: 700; display: block; margin-bottom: 8px; }
.notes-wrap textarea {
  width: 100%;
  height: 200px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  resize: vertical;
}
.notes-wrap textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(200,16,46,0.1); }

/* ─── A4 備考セクション ─── */
.a4-notes-section { margin-bottom: 10px; }
.a4-notes-text {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 10px;
  color: var(--text);
  line-height: 1.7;
  min-height: 28px;
  white-space: pre-wrap;
}

/* ══════════════════════════════════
   シナリオ比較 & 年次推移グラフ
══════════════════════════════════ */
.results-extra { padding: 0 32px 40px; display: flex; flex-direction: column; gap: 16px; }
.chart-card, .scenario-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.chart-wrap { position: relative; height: 260px; margin-top: 8px; }
.scenario-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 8px; }
.scenario-table th, .scenario-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: center; }
.scenario-table th:first-child, .scenario-table td:first-child { text-align: left; color: var(--muted); font-size: 11.5px; }
.scenario-table thead th { background: var(--green-light); color: var(--green); font-weight: 700; }
.scenario-table thead th.current-col { background: var(--green); color: #fff; }
.scenario-table tbody td.current-col { background: #f4faf7; font-weight: 700; color: var(--green); }

/* ══════════════════════════════════
   TAB: 自分の実績ダッシュボード
══════════════════════════════════ */
.dash-cards-row { display: flex; flex-wrap: wrap; gap: 14px; }
.dash-card {
  flex: 1; min-width: 150px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.dash-card-accent { background: var(--green-light); border-color: var(--green); }
.dash-card-label { font-size: 11.5px; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.dash-card-value { font-size: 28px; font-weight: 900; color: var(--text); line-height: 1.1; }
.dash-card-accent .dash-card-value { color: var(--green); }
.dash-card-unit { font-size: 11px; color: var(--muted); margin-top: 2px; }
@media (max-width: 640px) {
  .dash-cards-row { gap: 10px; }
  .dash-card { min-width: calc(50% - 5px); flex: none; padding: 12px 14px; }
  .dash-card-value { font-size: 22px; }
}

/* ══════════════════════════════════
   TAB: 履歴
══════════════════════════════════ */
.history-toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.history-list { display: flex; flex-direction: column; gap: 10px; }
.history-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.history-item .hi-main { flex: 1; min-width: 180px; }
.history-item .hi-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.history-item .hi-meta { font-size: 11.5px; color: var(--muted); }
.history-item .hi-actions { display: flex; gap: 8px; flex-shrink: 0; }
.history-empty { text-align: center; color: var(--muted); padding: 40px 0; font-size: 13px; }

/* ══════════════════════════════════
   TAB: 送信履歴（管理者用）
══════════════════════════════════ */
.admin-history-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.admin-history-table th, .admin-history-table td {
  padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top;
}
.admin-history-table th {
  background: var(--green-light); color: var(--green); font-weight: 700; font-size: 11.5px;
  position: sticky; top: 0;
}
.admin-history-table tbody tr:hover { background: #f9fafb; }
.admin-history-table .ah-staff { font-weight: 700; white-space: nowrap; }
.admin-history-table .ah-to { color: var(--muted); word-break: break-all; }
.admin-history-table .ah-date { white-space: nowrap; color: var(--muted); font-size: 11.5px; }
.admin-history-table .ah-detail-btn {
  background: #fff; border: 1.5px solid var(--green); color: var(--green);
  border-radius: 6px; padding: 4px 10px; font-size: 11.5px; font-weight: 700;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
.admin-history-table .ah-detail-btn:hover { background: var(--green-light); }
.admin-history-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.admin-detail-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.admin-detail-row:last-child { border-bottom: none; }
.admin-detail-row .adl { color: var(--muted); flex-shrink: 0; }
.admin-detail-row .adv { font-weight: 700; text-align: right; word-break: break-all; }

/* メール送信ログ・誤読傾向レポート用の統計カード */
.stat-card {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 18px; min-width: 140px; flex: 1;
}
.stat-card .sc-label { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.stat-card .sc-val { font-size: 22px; font-weight: 900; color: var(--text); }
.stat-card .sc-val.sc-success { color: var(--success); }
.stat-card .sc-val.sc-failed { color: #d9534f; }
.stat-card .sc-sub { font-size: 10.5px; color: var(--muted); margin-top: 4px; }
.status-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.status-badge.status-success { background: #e6f6ec; color: #1e8e4a; }
.status-badge.status-failed { background: #fdecea; color: #d9534f; }
.report-section { margin-top: 24px; }
.report-section .section-heading { margin-bottom: 4px; }
.report-section .section-desc { margin-bottom: 12px; }
.confidence-bar-wrap { display: flex; height: 22px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
.confidence-bar-seg { display: flex; align-items: center; justify-content: center; font-size: 10.5px; color: #fff; font-weight: 700; }
.confidence-bar-seg.high { background: #2e9e5b; }
.confidence-bar-seg.medium { background: #e0a52c; }
.confidence-bar-seg.low { background: #d9534f; }
.confidence-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.confidence-legend span::before { content: '●'; margin-right: 4px; }
.confidence-legend .lg-high::before { color: #2e9e5b; }
.confidence-legend .lg-medium::before { color: #e0a52c; }
.confidence-legend .lg-low::before { color: #d9534f; }
.accuracy-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 8px; }
.accuracy-table th, .accuracy-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.accuracy-table th { background: var(--green-light); color: var(--text); font-weight: 700; }
.report-chart-wrap { position: relative; height: 220px; margin-top: 8px; }
.report-note { font-size: 11px; color: var(--muted); margin-top: 10px; line-height: 1.7; }

/* ══════════════════════════════════
   TAB: 代理店管理職設定（管理者用） - 一覧テーブル＋操作ボタン群
══════════════════════════════════ */
.aam-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card); }
.aam-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
.aam-table thead th {
  background: linear-gradient(180deg, var(--green-light), #ffffff);
  color: var(--green-mid); font-weight: 800; font-size: 11.5px;
  letter-spacing: 0.02em; text-align: left; padding: 12px 12px;
  border-bottom: 2px solid var(--green-light); position: sticky; top: 0; white-space: nowrap;
}
.aam-table tbody tr { transition: background 0.12s; }
.aam-table tbody tr:nth-child(even) { background: #fbfbfb; }
.aam-table tbody tr:hover { background: var(--green-light); }
.aam-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.aam-table tbody tr:last-child td { border-bottom: none; }
.aam-input {
  width: 100%; min-width: 90px; box-sizing: border-box;
  border: 1.5px solid var(--border); border-radius: 7px; padding: 6px 9px;
  font-size: 12.5px; font-family: inherit; color: var(--text);
  background: #fff; transition: border-color 0.15s, box-shadow 0.15s;
}
.aam-input:hover { border-color: var(--muted-light); }
.aam-input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-light); }
.aam-email-cell { color: var(--muted); word-break: break-all; font-size: 12px; }
.aam-status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800;
  white-space: nowrap;
}
.aam-status-pill.is-manager { background: var(--success-light); color: var(--success); }
.aam-status-pill.is-general { background: #eef0f3; color: var(--muted); }
.aam-status-pill::before { content: '●'; font-size: 8px; }
.aam-actions { display: flex; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }
.aam-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border-radius: 7px; padding: 7px 12px; font-size: 12px; font-weight: 700;
  font-family: inherit; cursor: pointer; border: 1.5px solid transparent;
  transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.aam-btn:active { transform: scale(0.96); }
.aam-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.aam-btn-save {
  background: var(--green); border-color: var(--green); color: #fff;
}
.aam-btn-save:hover:not(:disabled) { background: var(--green-mid); box-shadow: 0 3px 10px rgba(200,16,46,0.25); }
.aam-btn-toggle {
  background: #fff; border-color: var(--blue); color: var(--blue);
}
.aam-btn-toggle:hover:not(:disabled) { background: var(--blue-light); }
.aam-btn-toggle.is-active {
  background: #fff; border-color: var(--muted-light); color: var(--muted);
}
.aam-btn-toggle.is-active:hover:not(:disabled) { background: #f2f2f2; }
.aam-btn-delete {
  background: #fff; border-color: #dc2626; color: #dc2626;
}
.aam-btn-delete:hover:not(:disabled) { background: #fef2f2; box-shadow: 0 3px 10px rgba(220,38,38,0.15); }
.aam-toast {
  display: flex; align-items: center; gap: 8px;
  background: #e8f5ee; color: var(--success); border: 1px solid #bfe6cf;
  border-radius: 8px; padding: 8px 14px; font-size: 12.5px; font-weight: 700;
  margin: 6px 0 4px; animation: aamToastIn 0.2s ease-out;
}
@keyframes aamToastIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) {
  .aam-actions { flex-wrap: wrap; }
  .aam-btn { flex: 1 1 auto; }
}
.btn-secondary {
  background: #fff; border: 1.5px solid var(--green); color: var(--green);
  border-radius: 7px; padding: 7px 14px; font-size: 12.5px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.btn-secondary:hover { background: var(--green-light); }
.btn-danger {
  background: #fff; border: 1.5px solid #dc2626; color: #dc2626;
  border-radius: 7px; padding: 7px 14px; font-size: 12.5px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.btn-danger:hover { background: #fef2f2; }
.btn-primary-wide {
  display: block; width: 100%;
  background: var(--green); border: none; color: #fff;
  border-radius: 8px; padding: 12px 20px; font-size: 15px; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: opacity 0.15s;
}
.btn-primary-wide:hover { opacity: 0.9; }
.btn-primary-wide:disabled { opacity: 0.5; cursor: default; }
.btn-apply-form {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: #fff8e6; border: 1.5px solid #e0b23c; color: #7a5a10;
  border-radius: 7px; padding: 9px 16px; font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background 0.15s;
}
.btn-apply-form:hover { background: #fdeeb8; }

/* ══════════════════════════════════
   その場でお申し込みモーダル（営業マン画面で完結する直接申込フォーム）
══════════════════════════════════ */
.apply-modal-box { max-width: 480px; max-height: 88vh; overflow-y: auto; }
.apply-modal-box .consent-box { background: #f7f7f7; border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 16px; }
.apply-modal-box .consent-check { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.6; cursor: pointer; }
.apply-modal-box .consent-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--green); flex-shrink: 0; }
.apply-modal-box .consent-text { max-height: 110px; overflow-y: auto; font-size: 10.5px; color: var(--muted); line-height: 1.7; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 10px; }
.apply-modal-box .status-msg { font-size: 12px; margin: 10px 0; min-height: 16px; display: none; }
.apply-modal-box .status-msg.status-error { display: block; color: #dc2626; }
.apply-modal-box .status-msg.status-ok { display: block; color: var(--success); }
.apply-modal-box .status-msg.status-loading { display: block; color: #1d4ed8; }
.apply-modal-section-title { font-size: 13px; font-weight: 700; color: var(--muted); margin: 18px 0 8px; padding-top: 12px; border-top: 1px dashed var(--border); }
.apply-modal-section-title:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.apply-fallback-link { display: block; text-align: center; font-size: 11.5px; color: #999; margin-top: 14px; text-decoration: underline; }
.apply-fallback-link:hover { color: #777; }

/* ══════════════════════════════════
   メール送信モーダル
══════════════════════════════════ */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.modal-overlay.active {
  display: flex;
  /* 背景の暗幕を「パッ」ではなくふわっとフェードイン */
  animation: modalOverlayFadeIn 0.22s ease-out;
}
.modal-box { background: #fff; border-radius: 14px; padding: 24px 26px; width: 100%; max-width: 420px; box-shadow: 0 8px 30px rgba(0,0,0,0.2); }
/* モーダル本体は、背景より少し遅れて「下から軽く浮き上がりながら拡大」して
   出現させる。ネイティブアプリのシートやダイアログの出方に近い演出。 */
.modal-overlay.active .modal-box {
  animation: modalBoxPopIn 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes modalOverlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modalBoxPopIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.modal-desc { font-size: 12px; color: var(--muted); margin-bottom: 18px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.btn-ghost {
  background: #fff; border: 1px solid var(--border); color: var(--muted);
  border-radius: 7px; padding: 9px 18px; font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.btn-ghost:hover { background: #f4f6f4; }
.modal-status { font-size: 12px; margin-top: 10px; min-height: 16px; }
.modal-status.error { color: #dc2626; }
.modal-status.success { color: var(--success); }

/* ══════════════════════════════════
   ログイン / 新規登録モーダル（専用デザイン）
   ・単調だったフォームに、アイコン付き入力欄・フォーカス時のグロー演出・
     登場アニメーション・目立つグラデーションの送信ボタンを追加して、
     「何をすればいいか」が一目でわかるUIに強化する。
══════════════════════════════════ */
@keyframes authModalPopIn {
  0%   { opacity: 0; transform: translateY(14px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes authModalOverlayFadeIn {
  0% { background: rgba(0,0,0,0); }
  100% { background: rgba(10,10,20,0.55); }
}
@keyframes authIconPop {
  0%   { transform: scale(0.6) rotate(-8deg); opacity: 0; }
  60%  { transform: scale(1.08) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes authShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

.auth-modal-overlay {
  background: rgba(10,10,20,0.55);
  backdrop-filter: blur(3px);
}
.auth-modal-overlay.active { animation: authModalOverlayFadeIn 0.25s ease; }

.auth-modal-box {
  position: relative;
  max-width: 380px;
  padding: 30px 28px 26px;
  overflow: visible;
  animation: authModalPopIn 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  background: linear-gradient(180deg, #fff 0%, #fff 62%, var(--green-light) 140%);
}
.auth-modal-close-x {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #f4f4f4; border: none; color: var(--muted);
  font-size: 17px; line-height: 1; cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.auth-modal-close-x:hover { background: #ececec; color: var(--text); transform: rotate(90deg); }

.auth-modal-icon {
  width: 54px; height: 54px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-mid), var(--green));
  color: #fff;
  box-shadow: 0 6px 16px rgba(200,16,46,0.35);
  animation: authIconPop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) 0.05s both;
}

.auth-modal-title {
  text-align: center; font-size: 19px; font-weight: 800; margin-bottom: 6px;
}
.auth-modal-desc {
  text-align: center; font-size: 12.5px; line-height: 1.7; margin-bottom: 22px;
}

.auth-field { margin-bottom: 15px; }
.auth-field-label {
  display: block; font-size: 12px; font-weight: 700; color: var(--muted);
  margin-bottom: 6px;
}
.auth-input-wrap {
  position: relative;
  display: flex; align-items: center;
  border: 1.5px solid var(--border); border-radius: 10px;
  background: #fafafa;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.auth-input-wrap:focus-within {
  border-color: var(--green);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(200,16,46,0.12);
}
.auth-input-icon {
  flex-shrink: 0; margin: 0 4px 0 12px; color: var(--muted-light);
  transition: color 0.18s;
}
.auth-input-wrap:focus-within .auth-input-icon { color: var(--green); }
.auth-input-wrap input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  padding: 12px 12px 12px 6px; font-size: 14.5px; font-family: inherit; color: var(--text);
}
.auth-pw-toggle {
  flex-shrink: 0; margin-right: 8px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--muted-light); cursor: pointer;
  border-radius: 50%; transition: color 0.15s, background 0.15s;
}
.auth-pw-toggle:hover { color: var(--green); background: var(--green-light); }

.auth-modal-status { text-align: center; font-weight: 700; }
.auth-modal-box.auth-shake { animation: authShake 0.4s ease; }

.auth-submit-btn {
  position: relative;
  width: 100%; margin-top: 6px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(90deg, var(--green-mid), var(--green));
  color: #fff; border: none; border-radius: 10px;
  padding: 13px 20px; font-size: 14.5px; font-weight: 800;
  font-family: inherit; cursor: pointer; letter-spacing: 0.03em;
  box-shadow: 0 5px 14px rgba(200,16,46,0.3);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.auth-submit-btn:hover { background: linear-gradient(90deg, var(--green), #ff5468); transform: translateY(-1px); box-shadow: 0 7px 18px rgba(200,16,46,0.4); }
.auth-submit-btn:active { transform: translateY(0); }
.auth-submit-btn:disabled { opacity: 0.75; cursor: default; transform: none; }
.auth-submit-spinner {
  display: none;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  animation: authSpin 0.7s linear infinite;
}
.auth-submit-btn.loading .auth-submit-spinner { display: inline-block; }
@keyframes authSpin { to { transform: rotate(360deg); } }

.auth-modal-switch-row {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 16px; font-size: 12.5px; color: var(--muted);
}
.auth-modal-switch-link {
  position: relative;
  background: none; border: none; color: var(--green); font-weight: 800;
  font-size: 12.5px; font-family: inherit; cursor: pointer; padding: 2px 1px;
}
.auth-modal-switch-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--green);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.2s ease;
}
.auth-modal-switch-link:hover::after { transform: scaleX(1); }

.auth-modal-cancel-link {
  display: block; width: 100%; margin-top: 10px;
  background: none; border: none; color: var(--muted-light);
  font-size: 11.5px; font-family: inherit; cursor: pointer; text-align: center;
  padding: 4px 0; text-decoration: underline;
}
.auth-modal-cancel-link:hover { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .auth-modal-box, .auth-modal-icon, .auth-modal-overlay.active { animation: none !important; }
}

/* ══════════════════════════════════
   メール送信モーダル（専用デザイン）
   ・ログイン/新規登録モーダルと同じデザイン言語（アイコン付き入力欄・
     グラデーションボタン・登場アニメーション）に統一し、
     「送信するファイル」が一目でわかるプレビューチップと、
     送信完了時のチェックマーク演出を追加して安心感を高める。
══════════════════════════════════ */
.email-modal-overlay { background: rgba(10,10,20,0.55); backdrop-filter: blur(3px); }
.email-modal-overlay.active { animation: authModalOverlayFadeIn 0.25s ease; }

.email-modal-box {
  position: relative;
  max-width: 400px;
  padding: 30px 28px 26px;
  overflow: visible;
  animation: authModalPopIn 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  background: linear-gradient(180deg, #fff 0%, #fff 62%, var(--green-light) 140%);
}
.email-modal-close-x {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #f4f4f4; border: none; color: var(--muted);
  font-size: 17px; line-height: 1; cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.email-modal-close-x:hover { background: #ececec; color: var(--text); transform: rotate(90deg); }

.email-modal-icon {
  width: 54px; height: 54px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-mid), var(--green));
  color: #fff;
  box-shadow: 0 6px 16px rgba(200,16,46,0.35);
  animation: authIconPop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) 0.05s both;
}
.email-modal-title { text-align: center; font-size: 19px; font-weight: 800; margin-bottom: 6px; }
.email-modal-desc  { text-align: center; font-size: 12.5px; line-height: 1.7; color: var(--muted); margin-bottom: 18px; }

/* 送信対象PDFのプレビューチップ：ファイル名・宛先が視覚的にひと目で分かるようにする */
.email-file-chip {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--border); border-radius: 12px;
  background: #fafafa; padding: 10px 14px; margin-bottom: 16px;
}
.email-file-chip-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-light); color: var(--green); font-size: 16px;
}
.email-file-chip-body { flex: 1; min-width: 0; }
.email-file-chip-name {
  font-size: 12.5px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.email-file-chip-hint { font-size: 10.5px; color: var(--muted-light); margin-top: 1px; }

.email-field { margin-bottom: 8px; }
.email-field-label {
  display: block; font-size: 12px; font-weight: 700; color: var(--muted);
  margin-bottom: 6px;
}
.email-input-wrap {
  position: relative;
  display: flex; align-items: center;
  border: 1.5px solid var(--border); border-radius: 10px;
  background: #fafafa;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.email-input-wrap:focus-within {
  border-color: var(--green);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(200,16,46,0.12);
}
.email-input-icon {
  flex-shrink: 0; margin: 0 4px 0 12px; color: var(--muted-light);
  transition: color 0.18s;
}
.email-input-wrap:focus-within .email-input-icon { color: var(--green); }
.email-input-wrap input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  padding: 12px 12px 12px 6px; font-size: 14.5px; font-family: inherit; color: var(--text);
}

.email-modal-box.email-shake { animation: authShake 0.4s ease; }
.email-modal-status { text-align: center; font-weight: 700; min-height: 16px; margin-top: 12px; font-size: 12px; }
.email-modal-status.error { color: #dc2626; }
.email-modal-status.success { color: var(--success); }

.email-submit-btn {
  position: relative;
  width: 100%; margin-top: 18px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(90deg, var(--green-mid), var(--green));
  color: #fff; border: none; border-radius: 10px;
  padding: 13px 20px; font-size: 14.5px; font-weight: 800;
  font-family: inherit; cursor: pointer; letter-spacing: 0.03em;
  box-shadow: 0 5px 14px rgba(200,16,46,0.3);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.email-submit-btn:hover { background: linear-gradient(90deg, var(--green), #ff5468); transform: translateY(-1px); box-shadow: 0 7px 18px rgba(200,16,46,0.4); }
.email-submit-btn:active { transform: translateY(0); }
.email-submit-btn:disabled { opacity: 0.75; cursor: default; transform: none; }
.email-submit-spinner {
  display: none;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  animation: authSpin 0.7s linear infinite;
}
.email-submit-btn.loading .email-submit-spinner { display: inline-block; }

.email-modal-cancel-link {
  display: block; width: 100%; margin-top: 10px;
  background: none; border: none; color: var(--muted-light);
  font-size: 11.5px; font-family: inherit; cursor: pointer; text-align: center;
  padding: 4px 0; text-decoration: underline;
}
.email-modal-cancel-link:hover { color: var(--muted); }

/* 送信完了時：フォームからチェックマーク演出に切り替える */
@keyframes emailSuccessPop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes emailCheckDraw {
  to { stroke-dashoffset: 0; }
}
.email-modal-box.email-sent .email-modal-form { display: none; }
.email-success-view { display: none; text-align: center; padding: 6px 0 4px; }
.email-modal-box.email-sent .email-success-view { display: block; }
.email-success-icon {
  width: 62px; height: 62px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--success), #2fa968);
  color: #fff;
  box-shadow: 0 6px 18px rgba(26,122,69,0.35);
  animation: emailSuccessPop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.email-success-icon svg path {
  stroke-dasharray: 24; stroke-dashoffset: 24;
  animation: emailCheckDraw 0.4s ease-out 0.25s forwards;
}
.email-success-title { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.email-success-desc { font-size: 12.5px; line-height: 1.7; color: var(--muted); margin-bottom: 20px; }
.email-success-close-btn {
  width: 100%;
  background: linear-gradient(90deg, var(--green-mid), var(--green));
  color: #fff; border: none; border-radius: 10px;
  padding: 12px 20px; font-size: 14px; font-weight: 800;
  font-family: inherit; cursor: pointer;
  box-shadow: 0 5px 14px rgba(200,16,46,0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}
.email-success-close-btn:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(200,16,46,0.4); }

@media (prefers-reduced-motion: reduce) {
  .email-modal-box, .email-modal-icon, .email-modal-overlay.active, .email-success-icon, .email-success-icon svg path { animation: none !important; }
}

/* ══════════════════════════════════
   応援ソングモーダル（営業マンのテーマソングをいつでも再生できる）
══════════════════════════════════ */
#song-overlay .modal-box {
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 0;
  border-radius: 16px;
}
.song-cover-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}
.song-cover-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.song-close-x {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.song-body { padding: 18px 20px 20px; text-align: center; }
.song-caption {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 14px;
}
.song-caption b { color: var(--text); }
.song-player-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1a1a1a;
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
.song-play-btn {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  border: none;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.1s;
}
.song-play-btn:hover { background: var(--green-mid); }
.song-play-btn:active { transform: scale(0.94); }
.song-progress-wrap { flex: 1; min-width: 0; }
.song-track-name { color: #fff; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-progress-bar {
  width: 100%;
  height: 5px;
  border-radius: 3px;
  cursor: pointer;
  accent-color: var(--green);
}
.song-time { color: #bbb; font-size: 11px; margin-top: 4px; display: flex; justify-content: space-between; }
.song-lyrics-hook {
  background: var(--green-light);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--green-mid);
  font-weight: 700;
  line-height: 1.8;
  margin-bottom: 14px;
}
.song-actions { display: flex; gap: 10px; }
.song-actions .btn-ghost { flex: 1; text-align: center; justify-content: center; }
.song-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.song-nav-btn:hover { background: rgba(0,0,0,0.75); }
.song-nav-prev { left: 10px; }
.song-nav-next { right: 10px; }
.song-track-index {
  position: absolute;
  bottom: 10px;
  right: 12px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.song-playlist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  text-align: left;
}
.song-playlist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text);
  transition: background 0.15s, border-color 0.15s;
}
.song-playlist-item:hover { background: var(--green-light); }
.song-playlist-item.active {
  background: var(--green-light);
  border-color: var(--green);
  font-weight: 700;
  color: var(--green-mid);
}
.song-playlist-item-icon { flex-shrink: 0; font-size: 13px; }

/* ══════════════════════════════════
   お知らせモーダル（サイトを開くたびに新サービス・勉強会等を告知）
══════════════════════════════════ */
#announce-overlay .modal-box {
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 0;
}
.announce-head {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-mid) 100%);
  color: #fff;
  padding: 18px 22px 16px;
  border-radius: 14px 14px 0 0;
  position: relative;
}
.announce-badge {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}
.announce-head-title {
  font-size: 17px;
  font-weight: 900;
  line-height: 1.5;
}
.announce-close-x {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
  opacity: 0.85; padding: 4px; font-family: inherit;
}
.announce-close-x:hover { opacity: 1; }
.announce-body { padding: 18px 22px 6px; }
.announce-lead {
  font-size: 13px; line-height: 1.8; color: var(--text);
  margin-bottom: 14px; white-space: pre-line;
}
.announce-section-label {
  font-size: 12px; font-weight: 700; color: var(--green);
  border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border);
  padding: 8px 0; margin-bottom: 10px;
}
.announce-target-list {
  list-style: none; margin: 0 0 16px; padding: 0;
  font-size: 12.5px; line-height: 1.9; color: var(--text);
}
.announce-target-list li::before { content: '・'; color: var(--green); font-weight: 700; }
.announce-schedule {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px;
}
.announce-schedule-item {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--green-light); border-radius: 9px; padding: 10px 12px;
}
.announce-schedule-day { font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; }
.announce-schedule-time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.announce-schedule-btns {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.announce-schedule-link {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--green); color: #fff; text-decoration: none;
  border-radius: 999px; padding: 5px 12px; font-size: 11.5px; font-weight: 700;
  white-space: nowrap;
}
.announce-schedule-link:hover { background: var(--green-mid); }
.announce-schedule-copy {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff; color: var(--green); border: 1.5px solid var(--green);
  border-radius: 999px; padding: 4.5px 11px; font-size: 11.5px; font-weight: 700;
  white-space: nowrap; cursor: pointer;
}
.announce-schedule-copy:hover { background: var(--green-light); }
.announce-schedule-copy.copied { background: var(--green); color: #fff; border-color: var(--green); }
.announce-note {
  font-size: 11.5px; color: var(--muted); line-height: 1.8;
  background: #fafafa; border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 6px; white-space: pre-line;
}
.announce-actions {
  display: flex; gap: 10px; padding: 14px 22px 20px;
  border-top: 1px solid var(--border); margin-top: 8px;
}
.announce-actions .btn-print,
.announce-actions .btn-ghost { flex: 1; text-align: center; justify-content: center; }

/* ══════════════════════════════════
   完了通知トースト
══════════════════════════════════ */
.toast-container {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 10px;
  pointer-events: none; width: 100%; max-width: 420px; padding: 0 16px;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--success); color: #fff; border-radius: 10px;
  padding: 14px 18px; font-size: 14px; font-weight: 700;
  box-shadow: 0 8px 24px rgba(26,122,69,0.35);
  opacity: 0; transform: translateY(-12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: auto;
}
.toast.toast-show { opacity: 1; transform: translateY(0); }
.toast.toast-error { background: #dc2626; box-shadow: 0 8px 24px rgba(220,38,38,0.35); }
.toast-icon { font-size: 16px; flex-shrink: 0; line-height: 1; }

/* ══════════════════════════════════════════════════
   Responsive ── タブレット(≤1024px) / スマートフォン(≤600px)
══════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   タブレット（〜1024px）：ヘッダー内側パディングを縮小
   （ナビ自体は常時2段目の専用行にあるため、この幅では
   タブが画面に収まらない場合のみナビ内で横スクロールする）
───────────────────────────────────────── */
@media (max-width: 1024px) {
  .site-header { padding: 8px 20px 0; }
  .page-h1 { font-size: 28px; }
  .input-wrap { grid-template-columns: 1fr; }
  .results-wrap { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────
   〜900px：ヘッダー右側ボタン群の省スペース化
   （ナビ・ロゴ・ログイン状態・PDF出力の2段構成自体はデスクトップと共通のため
   ここでは各ボタンのパディング・フォントサイズのみ縮小する） */
@media (max-width: 900px) {
  .site-header { padding: 8px 14px 0; gap: 6px; }
  .logo-sub { display: none; }
  .auth-status { margin-right: 0; margin-left: auto; }
  .auth-status-text { display: none; }
  .auth-user-panel { padding: 5px 9px; }
  .auth-user-panel-label { font-size: 9px; }
  .auth-user-panel-value { font-size: 11.5px; }
  .btn-install { margin-right: 8px; padding: 6px 12px 6px 10px; font-size: 12px; }
  .sales-toolbar { margin-right: 8px; padding: 4px 8px 4px 10px; gap: 6px; }
  .sales-toolbar-label { display: none; } /* 幅が厳しくなるため中スマホ以下ではラベルを省略 */
  .btn-help { padding: 6px 12px; font-size: 12px; }
  .btn-materials { padding: 6px 12px; font-size: 12px; }
  .btn-sales-deck { padding: 6px 12px; font-size: 12px; }
  .btn-media { padding: 6px 12px; font-size: 12px; }
  .btn-announce { padding: 6px 12px; font-size: 12px; }
  .btn-song { padding: 6px 12px; font-size: 12px; }
  .btn-pdf { padding: 8px 14px; font-size: 12.5px; }
  .nav-item { font-size: 12.5px; padding: 0 14px; }
}

/* ─────────────────────────────────────────
   〜760px：主要タブ2段構成のモバイル最適化
───────────────────────────────────────── */
@media (max-width: 760px) {
  body { font-size: 13.5px; }

  /* ヘッダー／ナビ */
  .site-header { padding: 0 12px; gap: 8px; }
  .logo-badge { font-size: 11.5px; padding: 3px 11px; }
  .nav-item { padding: 0 12px; font-size: 12px; }
  .btn-auth-action { padding: 6px 11px; font-size: 12px; }
  .btn-install span:not(.btn-install-icon) { display: none; } /* 極小画面はアイコンのみ表示して省スペース化 */
  .btn-install { padding: 6px; width: 30px; height: 30px; justify-content: center; border-radius: 50%; margin-right: 6px; }
  .sales-toolbar { padding: 4px 6px; gap: 5px; margin-right: 6px; border-radius: 20px; }
  .btn-help { padding: 7px; width: 32px; height: 32px; justify-content: center; border-radius: 50%; }
  .btn-help span:last-child { display: none; } /* 極小画面はアイコンのみ表示して省スペース化 */
  .btn-materials { padding: 7px; width: 32px; height: 32px; justify-content: center; border-radius: 50%; }
  .btn-materials span:last-child { display: none; } /* 極小画面はアイコンのみ表示して省スペース化 */
  .btn-sales-deck { padding: 7px; width: 32px; height: 32px; justify-content: center; border-radius: 50%; }
  .btn-sales-deck span:last-child { display: none; } /* 極小画面はアイコンのみ表示して省スペース化 */
  .btn-media { padding: 7px; width: 32px; height: 32px; justify-content: center; border-radius: 50%; }
  .btn-media span:last-child { display: none; } /* 極小画面はアイコンのみ表示して省スペース化 */
  .btn-announce { padding: 7px; width: 32px; height: 32px; justify-content: center; border-radius: 50%; }
  .btn-announce span:last-child { display: none; } /* 極小画面はアイコンのみ表示して省スペース化 */
  .btn-song { padding: 7px; width: 32px; height: 32px; justify-content: center; border-radius: 50%; }
  .btn-song span:last-child { display: none; } /* 極小画面はアイコンのみ表示して省スペース化 */

  /* ページ上部 */
  .page-top { padding: 18px 16px 14px; flex-direction: column; gap: 16px; }
  .page-h1 { font-size: 24px; }
  .page-subtitle { font-size: 11.5px; }
  .client-card { max-width: 100%; width: 100%; padding: 16px 18px; }

  /* タブ入力 */
  .input-wrap { padding: 0 16px 32px; grid-template-columns: 1fr; gap: 16px; }
  .input-panel { padding: 20px 18px 16px; }
  .field-row { grid-template-columns: 1fr; gap: 14px; }
  /* タップしやすいよう入力欄を拡大 */
  .field input[type="number"],
  .field input[type="text"],
  .field select {
    padding: 12px 14px;
    font-size: 16px;
  }
  /* タップしやすいようスライダーのつまみを拡大 */
  .rate-row input[type="range"] { height: 32px; }
  .rate-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--green); cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  }
  .rate-row input[type="range"]::-moz-range-thumb {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--green); cursor: pointer; border: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  }

  /* アンペア数から導入枚数を自動計算パネル（狭幅） */
  .amp-panel { padding: 14px 12px 12px; }
  .amp-row-bottom { grid-template-columns: 84px 1fr 56px; }
  .amp-row select { min-height: 44px; }
  .amp-summary { gap: 6px; }
  .amp-summary-item { padding: 7px 8px; }
  .amp-summary-val { font-size: 13.5px; }
  .amp-add-row, .amp-photo-btn, .bill-photo-btn, .bill-check-btn, .bill-manual-btn, .amp-manual-btn { min-height: 44px; }
  .bill-photo-choice-row { grid-template-columns: 1fr; }
  .amp-photo-btn span:last-child, .bill-photo-btn span:last-child,
  .amp-add-row span:last-child, .bill-manual-btn span:last-child { font-size: 12px; }
  .amp-photo-slots { grid-template-columns: 1fr; gap: 8px; }
  .bill-panel { padding: 14px 12px 12px; }
  .bill-slots { grid-template-columns: 1fr; gap: 8px; }
  .bill-field span:first-child { width: 44px; }

  /* タブ試算結果 */
  .results-wrap { padding: 0 16px 32px; grid-template-columns: 1fr; gap: 14px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi-card { padding: 14px 15px; }
  .kpi-value { font-size: 21px; }
  .kpi-value.big { font-size: 26px; }
  .kpi-hero { grid-column: 1 / -1; padding: 18px; gap: 14px; }
  .kpi-hero-icon { width: 46px; height: 46px; font-size: 22px; border-radius: 12px; }
  .compare-row .clabel { width: 40px; }
  .compare-row .cval { width: 68px; font-size: 11px; }
  .results-heading-row { flex-wrap: wrap; }
  .results-extra { padding: 0 16px 32px; }
  .chart-wrap { height: 220px; }
  /* シナリオ比較テーブルは横スクロール可能に */
  .scenario-card { padding: 14px 12px; overflow-x: auto; }
  .scenario-table { min-width: 560px; }

  /* タブ提案書出力：A4文書は自動スケール縮小（JSでtransform適用）
     コンテナは中身の実寸に応じて縦横比を保ったまま縮小されるため
     内部のgrid/flex構成は変更不要（縮小後も相対比率は保たれる） */
  .proposal-wrap { padding: 0 16px 32px; gap: 12px; }
  .proposal-actions { flex-wrap: wrap; justify-content: stretch; }
  .proposal-actions button { flex: 1; }
  .a4-scale-outer { margin: 0 -16px; width: calc(100% + 32px); }

  /* タブ備考・履歴・送信履歴 */
  .notes-wrap { padding: 0 16px 32px; max-width: 100%; }
  .history-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .history-toolbar .btn-pdf { width: 100%; }
  .history-item { flex-direction: column; align-items: stretch; }
  .history-item .hi-actions { width: 100%; }
  .history-item .hi-actions button { flex: 1; }

  /* モーダル */
  .modal-box { padding: 20px 18px; max-width: 100%; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions button { flex: 1; min-width: 100px; }
}

/* ─────────────────────────────────────────
   〜480px：小型スマートフォン
───────────────────────────────────────── */
@media (max-width: 480px) {
  .logo-sub { display: none; }
  .page-tags { gap: 6px; }
  .tag { padding: 4px 10px; font-size: 11px; }
  .kpi-grid { grid-template-columns: 1fr; }
  .client-meta { flex-wrap: wrap; gap: 10px; }
  .a4-scale-outer { margin: 0 -12px; width: calc(100% + 24px); }
  .proposal-wrap { padding: 0 12px 28px; }
  .input-wrap, .results-wrap, .notes-wrap, .results-extra { padding-left: 12px; padding-right: 12px; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions button { width: 100%; }
  .amp-photo-btn span:last-child, .bill-photo-btn span:last-child,
  .amp-add-row span:last-child, .bill-manual-btn span:last-child { font-size: 11.5px; }
}

/* ══════════════════════════════════
   TAB: 簡単入力（ウィザード形式）
══════════════════════════════════ */
.wizard-wrap {
  padding: 24px 32px 40px;
  max-width: 720px;
  margin: 0 auto;
}
.wizard-progress {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 22px;
}
.wizard-progress-step {
  flex: 1;
  height: 6px;
  border-radius: 4px;
  background: var(--border);
  transition: background 0.2s;
}
.wizard-progress-step.done { background: var(--green); }
.wizard-progress-step.current { background: var(--orange); }
.wizard-progress-label {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 18px;
}
.wizard-progress-label b { color: var(--text); }

/* ─── リッチな円形ステップ進捗表示（アイコン＋ラベル＋接続線） ─── */
.wizard-progress-rich {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 24px;
  padding: 4px 0 0;
}
.wizard-progress-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  width: 62px;
}
.wizard-progress-circle {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  font-size: 16px;
  background: #fff;
  border: 2px solid var(--border);
  color: var(--muted-light);
  transition: all 0.25s ease;
}
.wizard-progress-node-current .wizard-progress-circle {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
  box-shadow: 0 0 0 5px var(--green-light);
  transform: scale(1.08);
}
.wizard-progress-node-done .wizard-progress-circle {
  border-color: var(--green);
  background: var(--green-light);
  color: var(--green);
  font-weight: 900;
}
.wizard-progress-node-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted-light);
  text-align: center;
  white-space: nowrap;
}
.wizard-progress-node-current .wizard-progress-node-label { color: var(--green); }
.wizard-progress-node-done .wizard-progress-node-label { color: var(--text); }
.wizard-progress-line {
  flex: 0 0 auto;
  width: 20px;
  height: 2px;
  background: var(--border);
  margin: 19px -2px 0;
  transition: background 0.25s ease;
}
.wizard-progress-line.done { background: var(--green); }

.wizard-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 26px 22px;
  box-shadow: var(--shadow-card);
  min-height: 320px;
}
.wizard-step-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wizard-step-title .wizard-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.wizard-step-desc { font-size: 12px; color: var(--muted); margin-bottom: 20px; }
.wizard-step-body .field,
.wizard-step-body .field-row { margin-bottom: 14px; }
.wizard-step-body .field:last-child { margin-bottom: 0; }
.wizard-step-body .amp-panel,
.wizard-step-body .bill-panel { margin-bottom: 0; }
.wizard-complete-box { text-align: center; padding: 20px 0; }
.wizard-complete-icon { font-size: 44px; margin-bottom: 12px; }
.wizard-complete-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.wizard-complete-desc { font-size: 13px; color: var(--muted); margin-bottom: 24px; line-height: 1.7; }
.wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.wizard-nav-right { display: flex; gap: 10px; }
.btn-wizard-prev {
  background: #fff; border: 1.5px solid var(--border); color: var(--muted);
  border-radius: 10px; padding: 12px 22px; min-height: 46px; font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.btn-wizard-prev:hover { background: #f4f6f4; }
.btn-wizard-prev:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-wizard-next {
  background: var(--green); border: none; color: #fff;
  border-radius: 10px; padding: 12px 28px; min-height: 46px; font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer;
  box-shadow: 0 3px 10px rgba(200,16,46,0.28);
}
.btn-wizard-next:hover { background: var(--green-mid); }
.btn-wizard-suspend {
  background: none; border: none; color: var(--muted);
  font-size: 12px; text-decoration: underline; cursor: pointer; font-family: inherit;
}
.btn-wizard-suspend:hover { color: var(--text); }
.wizard-resume-banner {
  background: #fff8e6; border: 1px solid #f0d999; border-radius: 10px;
  padding: 12px 16px; margin-bottom: 18px; font-size: 12.5px; color: #7a5a10;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.wizard-resume-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }
.wizard-resume-banner button {
  border: none; border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.wizard-resume-yes { background: var(--green); color: #fff; }
.wizard-resume-no { background: #fff; border: 1px solid #d4b45a !important; color: #7a5a10; }
.wizard-entry-hint {
  background: var(--green-light); border: 1px solid #f2c9cd; border-radius: 10px;
  padding: 10px 14px; font-size: 12px; color: var(--muted);
}
.wizard-entry-hint-top { margin: 16px 32px 0; }
@media (max-width: 640px) {
  .wizard-wrap { padding: 16px 14px 96px; } /* 下部スティッキーナビ分の余白を確保 */
  .wizard-panel { padding: 22px 16px 18px; min-height: 0; }
  .wizard-entry-hint-top { margin: 14px 14px 0; }

  /* リッチ進捗表示：狭幅では丸を少し小さく、ラベルの折返しを許可 */
  .wizard-progress-rich { margin-bottom: 18px; }
  .wizard-progress-node { width: 48px; gap: 4px; }
  .wizard-progress-circle { width: 34px; height: 34px; font-size: 14px; }
  .wizard-progress-node-label { font-size: 9.5px; white-space: normal; line-height: 1.2; }
  .wizard-progress-line { width: 10px; margin-top: 16px; }

  /* 「次へ／前へ」ボタンを画面下部に固定（スクロールせず押せるように） */
  .wizard-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: #fff; border-top: 1px solid var(--border);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    margin-top: 0;
    box-shadow: 0 -4px 14px rgba(0,0,0,0.08);
  }
  .wizard-nav-right { flex: 1; }
  .btn-wizard-next { flex: 1; }
  .btn-wizard-prev { flex-shrink: 0; }
}

/* ══════════════════════════════════
   ボタン全般の「押した感」統一（ネイティブアプリ的なタップフィードバック）
   個々のボタンクラスの色・サイズ等は変更せず、押下時のみ共通で
   軽く縮む＋少し暗くする演出を追加する。transitionは「押す→戻る」の
   両方向を滑らかにするため、hover定義とは独立して指定している。
══════════════════════════════════ */
.btn-help, .btn-pdf, .btn-print, .btn-secondary, .btn-danger, .btn-primary-wide,
.btn-apply-form, .btn-ghost, .btn-install, .btn-materials, .btn-media, .btn-announce,
.btn-auth-action, .btn-wizard-next, .btn-wizard-prev, .btn-wizard-suspend,
.nav-scroll-btn, .amp-photo-btn, .bill-photo-btn, .amp-row-crop-check,
.case-modal-close, .media-card {
  transition: transform 0.12s ease, opacity 0.12s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.btn-help:active, .btn-pdf:active, .btn-print:active, .btn-secondary:active,
.btn-danger:active, .btn-primary-wide:not(:disabled):active, .btn-apply-form:active,
.btn-ghost:active, .btn-install:active, .btn-materials:active, .btn-media:active, .btn-announce:active,
.btn-auth-action:active, .btn-wizard-next:not(:disabled):active, .btn-wizard-prev:not(:disabled):active,
.btn-wizard-suspend:active, .nav-scroll-btn:active, .amp-row-crop-check:active,
.case-modal-close:active, .media-card:active {
  transform: scale(0.96);
  opacity: 0.85;
}