/* ============================================================
 * style.css — 架空通販サイト「アスカル便」UI ＋ ホラー演出
 * 実在サービスを模倣しない独自配色（インク×ミント）
 * ========================================================== */

:root{
  --ink:#16211f;
  --ink-2:#33413e;
  --paper:#f4f6f5;
  --card:#ffffff;
  --line:#dfe4e2;
  --brand:#0f4c46;
  --brand-2:#12655c;
  --mint:#3fbfa8;
  --accent:#e0862f;
  --danger:#b03b34;
  --dim:#7b8683;
  --radius:10px;
  --shadow:0 1px 2px rgba(16,32,30,.06),0 6px 18px rgba(16,32,30,.06);
  --font: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
/* モバイルでタップ時に出る青いハイライトを全体で無効化（特にノベル全画面タップ） */
*{ -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  -webkit-text-size-adjust:100%;
}
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; cursor:pointer; }
a{ color:var(--brand-2); text-decoration:none; }
a:hover{ text-decoration:underline; }
[hidden]{ display:none !important; }

/* ===================== タイトル画面 ===================== */
.title-screen{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 50% 10%, #1c2a28 0%, #0d1413 60%, #070a0a 100%);
  color:#e8f1ee; overflow:hidden; padding:24px;
}
/* タイトル背景画像：実ファイルが読み込めたときだけフェードイン（無ければグラデーションのまま） */
.title-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1s ease;
}
.title-bg.has-img{ opacity:.5; }
/* 画像の上に暗いヴィネットを重ねて文字を読みやすく保つ */
.title-bg.has-img::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 20%, rgba(7,10,10,.25) 0%, rgba(7,10,10,.7) 100%);
}
.title-inner{ max-width:520px; width:100%; text-align:center; position:relative; z-index:2; }
.title-sub{ letter-spacing:.4em; font-size:12px; color:#7fa79c; margin:0 0 14px; }
.title-main{ font-size:clamp(26px,6vw,40px); margin:0 0 6px; line-height:1.35; letter-spacing:.04em; }
.title-main span{ color:#cfe6df; }
.title-lead{ color:#93a8a2; font-size:14px; margin:18px 0 30px; }
.title-menu{ display:grid; gap:10px; }
.title-note{ margin-top:26px; font-size:11px; color:#5f716c; line-height:1.8; }
.title-glitch{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
  animation: titleFlick 7s infinite;
}
@keyframes titleFlick{ 0%,96%{opacity:.35} 97%{opacity:.9} 98%{opacity:.2} 100%{opacity:.35} }

.tbtn{
  background:#1c2b28; color:#dff0ea; border:1px solid #33514a;
  padding:12px 16px; border-radius:8px; transition:.15s;
}
.tbtn:hover:not(:disabled){ background:#25403a; border-color:var(--mint); }
.tbtn:disabled{ opacity:.35; cursor:not-allowed; }
.tbtn-main{ background:var(--brand); border-color:var(--mint); color:#fff; font-weight:700; }
.tbtn-main:hover{ background:var(--brand-2); }
.tbtn-ghost{ background:transparent; }

/* ===================== サイト共通 ===================== */
.site{ min-height:100vh; display:flex; flex-direction:column; }
.site-header{ position:sticky; top:0; z-index:30; background:var(--brand); color:#fff; box-shadow:var(--shadow); }
.hdr-row{ display:flex; align-items:center; gap:10px; padding:8px 12px; max-width:1080px; margin:0 auto; width:100%; }
.hdr-menu{ background:transparent; border:0; color:#fff; font-size:20px; padding:4px 8px; }
.logo{ display:flex; align-items:center; gap:6px; color:#fff; }
.logo:hover{ text-decoration:none; }
.logo-mark{ color:var(--mint); font-size:20px; }
.logo-text{ font-weight:800; letter-spacing:.02em; line-height:1.1; display:flex; flex-direction:column; }
.logo-text small{ font-size:9px; font-weight:400; color:#a8d8ce; letter-spacing:.14em; }
.hdr-search{ flex:1; display:flex; min-width:0; }
.hdr-search input{
  flex:1; min-width:0; border:0; border-radius:6px 0 0 6px; padding:8px 10px; font-size:14px;
}
.hdr-search button{ border:0; background:var(--accent); color:#fff; border-radius:0 6px 6px 0; padding:0 12px; }
.hdr-icons{ display:flex; gap:2px; }
.icon-btn{ position:relative; background:transparent; border:0; color:#fff; font-size:18px; padding:6px 8px; }
.badge{
  position:absolute; top:0; right:0; background:var(--danger); color:#fff;
  font-size:10px; min-width:16px; height:16px; border-radius:9px; display:grid; place-items:center; padding:0 4px;
}
.badge-cart{ background:var(--accent); }
.hdr-nav{
  display:flex; gap:2px; overflow-x:auto; background:var(--brand-2);
  padding:0 12px; max-width:1080px; margin:0 auto; width:100%;
  scrollbar-width:none;
}
.hdr-nav::-webkit-scrollbar{ display:none; }
.nav-item{
  color:#cfe8e2; font-size:13px; padding:8px 12px; white-space:nowrap; border-bottom:2px solid transparent;
}
.nav-item:hover{ text-decoration:none; color:#fff; }
.nav-item.active{ color:#fff; border-bottom-color:var(--mint); font-weight:700; }
.nav-item.nav-alert{ color:#ffd9a0; }

/* ===== 目的バー（STEPガイド） ===== */
.objective-bar{
  position:sticky; top:0; z-index:25;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  max-width:1080px; margin:0 auto; width:100%;
  padding:10px 14px; background:#10312c; color:#dff0ea;
  border-bottom:1px solid #1f4b43; font-size:13px;
  overflow:hidden;   /* 進捗ラインを角に収める */
}
/* 上端の全体進捗ライン */
.obj-progress-line{
  position:absolute; left:0; top:0; height:3px;
  background:var(--mint); border-radius:0 3px 3px 0;
  box-shadow:0 0 6px rgba(63,191,168,.6); transition:width .45s ease;
}
.obj-label{
  flex:none; font-size:11px; font-weight:700; letter-spacing:.12em; color:#a9dccf;
  display:flex; align-items:center; gap:5px;
}
.obj-label::before{ content:"▶"; font-size:9px; color:var(--mint); }
.obj-step{
  flex:none; font-size:11px; font-weight:800; letter-spacing:.04em;
  color:#08201c; background:#8fd8c8; padding:2px 9px; border-radius:11px;
  font-variant-numeric:tabular-nums;
}
.obj-tag{
  background:var(--accent); color:#fff; font-weight:700; font-size:11px;
  padding:3px 9px; border-radius:10px; flex:none;
}
.obj-text{ flex:1; min-width:150px; font-size:14.5px; font-weight:600; color:#fff; }
.obj-go{
  flex:none; background:var(--mint); color:#08201c; border:0; font-weight:800;
  padding:7px 15px; border-radius:7px; font-size:13px;
  box-shadow:0 2px 8px rgba(63,191,168,.25);
}
.obj-go:hover{ filter:brightness(1.08); }

/* 目的が切り替わった瞬間だけ光らせて視線を誘導 */
.objective-bar.changed{ animation:objPulse 1.05s ease; }
@keyframes objPulse{
  0%{ filter:none; } 18%{ filter:brightness(1.5); }
  40%{ filter:brightness(1); } 62%{ filter:brightness(1.35); } 100%{ filter:none; }
}

@media(max-width:520px){
  .obj-text{ flex-basis:100%; order:5; }
  .obj-go{ order:6; }
}

.view{ flex:1; max-width:1080px; width:100%; margin:0 auto; padding:14px 12px 40px; }

.site-footer{ background:#0c1817; color:#8fa39e; padding:22px 12px 40px; text-align:center; font-size:12px; }
.foot-links{ display:flex; gap:16px; justify-content:center; margin-bottom:10px; flex-wrap:wrap; }
.foot-links a{ color:#a9c6bf; }
.foot-copy{ margin:4px 0; }
.foot-hidden a{ color:#c98a54; font-family:monospace; letter-spacing:.1em; }

/* ===================== パネル・共通パーツ ===================== */
.panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); margin:0 0 14px; box-shadow:var(--shadow); overflow:hidden; }
.panel-title{ margin:0; padding:12px 14px; font-size:15px; border-bottom:1px solid var(--line); background:#fbfcfc; }
.panel-body{ padding:14px; }
.panel-accent{ border-color:var(--mint); }
.panel-accent .panel-title{ background:#eaf6f3; }
.panel-strange{ border-color:#c9b79b; background:#fbf9f5; }
.panel-strange .panel-title{ background:#f2ece2; }
.panel-terminal{ background:#0f1614; color:#9ee6cf; border-color:#25382f; font-family:ui-monospace,Menlo,Consolas,monospace; }
.panel-terminal .panel-title{ background:#14211d; color:#c6f2e2; border-color:#25382f; }
.panel-terminal .hint{ color:#c1a26a; }

.crumb{ font-size:12px; color:var(--dim); margin:2px 0 12px; display:flex; gap:6px; flex-wrap:wrap; }
.crumb-sep{ color:#c3ccc9; }

.btn{
  background:#eef2f1; border:1px solid var(--line); border-radius:8px; padding:9px 14px; font-size:14px;
  transition:.15s; margin:4px 6px 4px 0;
}
.btn:hover{ background:#e2e9e7; }
.btn-primary{ background:var(--brand); color:#fff; border-color:var(--brand); font-weight:700; }
.btn-primary:hover{ background:var(--brand-2); }
.btn-cart{ background:var(--accent); color:#fff; border-color:var(--accent); font-weight:700; }
.btn-cart:hover{ filter:brightness(.94); }
.btn-danger{ background:var(--danger); color:#fff; border-color:var(--danger); font-weight:700; }
.btn-danger:hover{ filter:brightness(.94); }
.btn-choice{ display:block; width:100%; text-align:left; margin:6px 0; }
.btn-small{ padding:5px 10px; font-size:12px; }
.btn-save{ background:#2b2b2b; color:#ffe9b8; border-color:#000; }

.dim{ color:var(--dim); font-size:13px; }
.mono{ font-family:ui-monospace,Menlo,Consolas,monospace; }
.hint{ color:#8a6a2e; background:#fdf6e6; border-left:3px solid var(--accent); padding:8px 10px; font-size:13px; border-radius:0 6px 6px 0; margin:10px 0; }
.err{ color:var(--danger); }
.list{ margin:8px 0 0; padding-left:1.2em; font-size:14px; }
.list li{ margin:3px 0; }

.notice{ padding:12px 14px; border-radius:var(--radius); margin:10px 0; border:1px solid var(--line); background:#fafbfb; }
.notice-bad{ background:#fdf4ee; border-color:#e6c4a6; }
.notice-error{ background:#fdeceb; border-color:#e2b4b0; color:#7d2621; }
.notice .big{ font-size:20px; font-weight:800; margin:0 0 6px; }

.kv{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:0; font-size:14px; }
.kv dt{ color:var(--dim); }
.kv dd{ margin:0; }

.asset-img{ width:100%; height:auto; object-fit:cover; background:#e9edec; }

/* ===================== トップ ===================== */
.hero{ position:relative; border-radius:var(--radius); overflow:hidden; margin-bottom:14px; box-shadow:var(--shadow); }
.hero-img{ width:100%; aspect-ratio:16/6; object-fit:cover; }
/* ヒーロー画像にキャッチコピーを焼き込み済みのため、HTML側のコピーは非表示。
   文字なしバナーに差し替えた場合は display:none を外す。 */
.hero-copy{ display:none;
  position:absolute; inset:0; flex-direction:column; justify-content:center; padding:16px 22px;
  background:linear-gradient(90deg, rgba(10,30,27,.78) 0%, rgba(10,30,27,.35) 70%, transparent 100%); color:#fff; }
.hero-kicker{ margin:0; font-size:11px; letter-spacing:.28em; color:#9fded0; }
.hero-title{ margin:4px 0; font-size:clamp(18px,4.4vw,30px); }
.hero-sub{ margin:0; font-size:12px; color:#d5e7e2; }

.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; color:inherit; transition:.15s; }
.card:hover{ text-decoration:none; box-shadow:var(--shadow); transform:translateY(-2px); }
.card-img img{ aspect-ratio:1/1; object-fit:cover; }
.card-body{ padding:8px 10px 10px; }
.card-name{ margin:0 0 4px; font-size:13px; line-height:1.45; height:3.6em; overflow:hidden; }
.card-star{ margin:0; font-size:11px; color:var(--accent); }
.card-price{ margin:2px 0 0; font-weight:800; font-size:16px; }
.card-ship{ margin:0; font-size:11px; color:var(--brand-2); }
.card-strange{ border-color:#b9a179; background:#f7f3ec; }
.reco-strange{ margin:0; font-size:14px; }

/* ===================== 商品詳細 ===================== */
.pd{ display:grid; grid-template-columns:1fr; gap:14px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px; margin-bottom:14px; box-shadow:var(--shadow); }
.pd-img img{ aspect-ratio:1/1; object-fit:cover; border-radius:8px; cursor:zoom-in; }
.pd-name{ margin:0 0 6px; font-size:19px; line-height:1.5; }
.pd-star{ margin:0 0 8px; color:var(--accent); font-size:13px; }
.pd-desc{ margin:0 0 8px; font-size:14px; }
.pd-buy{ border:1px solid var(--line); border-radius:8px; padding:12px; background:#fbfcfc; align-self:start; }
.pd-price{ margin:0; font-size:24px; font-weight:800; color:var(--danger); }
.pd-ship{ margin:2px 0 10px; font-size:12px; color:var(--brand-2); }
.pd-seller{ margin:10px 0 0; font-size:11px; color:var(--dim); }
.pd-unavail{ color:var(--danger); font-size:13px; }
@media(min-width:760px){
  .pd{ grid-template-columns:1.1fr 1.4fr .9fr; }
}

/* ===================== レビュー ===================== */
.reviews{ display:flex; flex-direction:column; gap:12px; }
.review{ border-bottom:1px solid var(--line); padding-bottom:12px; }
.review:last-child{ border-bottom:0; }
.rv-star{ margin:0; color:var(--accent); font-size:13px; }
.rv-title{ margin:2px 0; font-weight:700; font-size:14px; }
.rv-name{ margin:0; font-size:11px; color:var(--dim); }
.rv-body{ margin:6px 0 0; font-size:14px; }
.rv-actions{ margin:6px 0 0; font-size:12px; color:var(--dim); }
.review-alert{
  margin:0 0 10px; padding:9px 12px; font-size:13px; font-weight:700;
  color:#8a2f28; background:#fdecea; border:1px solid #e4b4ae; border-radius:8px;
}
.review.flash{
  background:#fff4f1; border:2px solid var(--danger); border-radius:10px; padding:12px;
  box-shadow:0 0 0 4px rgba(176,59,52,.14);
  animation: flashIn .25s ease-out, flashPulse 1.1s ease-in-out infinite;
}
@keyframes flashPulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(176,59,52,.12); } 50%{ box-shadow:0 0 0 7px rgba(176,59,52,.22); } }
.flash-warn{ margin:0 0 8px; font-size:12px; font-weight:800; color:var(--danger); letter-spacing:.02em; }
.flash-timer{ height:6px; background:#f0d6d2; border-radius:3px; overflow:hidden; margin:0 0 10px; }
.flash-timer span{ display:block; height:100%; width:100%; background:var(--danger); }
.flash-save{ display:block; width:100%; margin:10px 0 0; background:var(--danger); color:#fff; border-color:var(--danger); font-weight:800; font-size:15px; padding:11px; }
.flash-save:hover{ filter:brightness(1.06); }
.saved-tag{ color:var(--brand-2); font-weight:700; font-size:13px; }
.hint-inline{ font-size:11px; }
@keyframes flashIn{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }
.review.vanishing{ animation: vanish .7s forwards; }
@keyframes vanish{ 0%{opacity:1} 60%{opacity:.35; filter:blur(1px)} 100%{opacity:0; transform:translateY(-4px)} }
.review.deleted{ color:var(--dim); border:1px dashed var(--line); border-radius:8px; padding:10px; }
.review.saved{ background:#f0f7f4; border:1px solid var(--mint); border-radius:8px; padding:10px; }

/* ===================== カート・注文 ===================== */
.cart-list{ display:flex; flex-direction:column; gap:10px; }
.cart-row{ display:flex; gap:12px; align-items:center; }
.cart-img{ width:72px; flex:none; }
.cart-img img{ aspect-ratio:1/1; object-fit:cover; border-radius:6px; }
.cart-name{ margin:0; font-size:14px; }
.cart-price{ margin:2px 0 0; font-size:13px; color:var(--dim); }
.cart-total{ border-top:1px solid var(--line); margin-top:12px; padding-top:10px; }
.cart-total p{ margin:0; font-size:18px; font-weight:800; }

.order-status{ margin:0 0 10px; font-weight:700; color:var(--brand-2); }
.order-items{ display:flex; flex-direction:column; gap:10px; }
.order-item{ display:flex; gap:12px; align-items:center; }
.oi-img{ width:64px; flex:none; }
.oi-img img{ aspect-ratio:1/1; object-fit:cover; border-radius:6px; }
.oi-name{ margin:0; font-size:14px; }
.oi-price{ margin:2px 0 0; font-size:13px; color:var(--dim); }
.oi-warn{ margin:2px 0 0; font-size:12px; color:var(--danger); }
.order-item-strange{ background:#f6f1e8; border:1px dashed #c9b79b; border-radius:8px; padding:8px; }
.order-actions{ margin-top:12px; }
.ghost-order{ text-align:center; opacity:.55; font-family:ui-monospace,monospace; }

.photo-thumb{ cursor:pointer; border-radius:8px; overflow:hidden; border:1px solid var(--line); position:relative; }
.photo-thumb img{ aspect-ratio:4/3; object-fit:cover; }
.thumb-cap{ margin:0; padding:8px 10px; background:#fbfcfc; font-size:13px; color:var(--brand-2); font-weight:700; }

.strange-box{ display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.strange-box img{ width:88px; flex:none; aspect-ratio:1/1; object-fit:cover; border-radius:6px; }
.sb-name{ margin:0; font-weight:700; }
.sb-note{ margin:2px 0 0; font-size:13px; color:#6d5f4c; }

/* ===================== 置き配写真 ===================== */
.photo-stage{ position:relative; border-radius:8px; overflow:hidden; border:1px solid var(--line); }
.photo-stage img{ aspect-ratio:4/3; object-fit:cover; }
.hotspot{
  position:absolute; border:2px dashed rgba(255,255,255,.75); background:rgba(0,0,0,.14);
  border-radius:6px; color:#fff; font-size:11px; padding:0; display:grid; place-items:center;
  transition:.15s; backdrop-filter:blur(1px);
}
.hotspot:hover{ background:rgba(0,0,0,.3); border-color:#fff; }
.hotspot span{ background:rgba(0,0,0,.55); padding:2px 6px; border-radius:4px; }
/* 座標は assets/images/delivery/old-box.webp の実際の箱の位置に合わせている */
.hs-normal{ left:47.5%; top:62%; width:15.5%; height:20.5%; }
.hs-old{ left:62%; top:60%; width:25%; height:26%; border-color:rgba(255,200,120,.9); }
.hs-old span{ font-size:16px; font-weight:800; }
/* 深夜の写真（3回目以降）は古い箱だけが写っており、位置も少し違う */
.photo-stage.night .hs-old{ left:56.5%; top:57%; width:19%; height:24%; }
.photo-cap{ margin:10px 0 2px; font-size:13px; }
.photo-note{ margin:0; font-size:12px; color:var(--dim); }

.zoom-wrap{ position:relative; }
/* 座標は old-box-zoom-footprint.webp の泥の足跡の位置に合わせている */
.zoom-spot{
  position:absolute; left:28%; top:41%; width:56px; height:56px; border-radius:50%;
  background:rgba(0,0,0,.45); color:#fff; border:2px solid #fff; font-size:20px;
}
.zoom-spot.found{ width:auto; height:auto; border-radius:6px; padding:6px 10px; font-size:12px; background:rgba(176,59,52,.9); }

/* ===================== 箱の中身 ===================== */
.box-open img{ aspect-ratio:4/3; object-fit:cover; border-radius:8px; margin-bottom:12px; }
.box-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
.box-item{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:8px; text-align:center; transition:.15s; }
.box-item:hover{ border-color:var(--accent); transform:translateY(-2px); }
.box-item img{ aspect-ratio:4/3; object-fit:cover; border-radius:6px; margin-bottom:6px; }
.bi-name{ margin:0; font-size:13px; font-weight:700; }
.bi-state{ margin:2px 0 0; font-size:11px; color:var(--dim); }
.box-item.got{ border-color:var(--mint); background:#f3faf8; }
.note-quote{
  margin:0; padding:14px 16px; background:#fffdf5; border:1px solid #e3dcc4;
  border-radius:8px; white-space:pre-line; font-size:15px; line-height:2;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
}
.inspect img{ max-height:70vh; width:auto; margin:0 auto; }

/* ===================== 配送追跡 ===================== */
.timeline{ list-style:none; margin:0; padding:0; }
.tl-item{ display:grid; grid-template-columns:110px 1fr; gap:4px 12px; padding:10px 0 10px 18px;
  border-left:2px solid var(--line); position:relative; font-size:14px; }
.tl-item::before{ content:""; position:absolute; left:-7px; top:16px; width:12px; height:12px; border-radius:50%;
  background:#fff; border:2px solid var(--line); }
.tl-item.done::before{ background:var(--mint); border-color:var(--mint); }
.tl-item.now::before{ background:var(--danger); border-color:var(--danger); }
.tl-time{ color:var(--dim); font-size:12px; }
.tl-place{ font-weight:700; }
.tl-text{ grid-column:2; }
.tl-note{ grid-column:2; font-size:12px; color:var(--danger); }
.timeline-old .tl-item{ border-left-color:#c9b79b; }
@media(max-width:520px){
  .tl-item{ grid-template-columns:1fr; }
  .tl-text,.tl-note{ grid-column:1; }
}

.track-form{ display:flex; gap:8px; }
.track-input,.faq-input,.wms-input,.rt-select,.rt-text{
  flex:1; border:1px solid var(--line); border-radius:8px; padding:9px 12px; font:inherit; background:#fff; width:100%;
}
.track-result{ margin-top:12px; }
.courier-name{ margin:0; font-size:12px; color:var(--dim); }
.courier-msg{ margin:4px 0 0; font-size:14px; background:#f3f6f5; border-radius:8px; padding:10px 12px; }

/* ===================== 返品 ===================== */
.rt-target{ display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.rt-target img{ width:64px; aspect-ratio:1/1; object-fit:cover; border-radius:6px; }
.rt-target p{ margin:0; }
.rt-label{ display:block; font-size:13px; color:var(--dim); margin:10px 0 4px; }
.rt-text{ margin-top:8px; resize:vertical; }
.rt-result{ margin-top:12px; }
.glitchy{ font-weight:700; }

/* ===================== FAQ ===================== */
.faq-list{ margin-top:12px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; text-align:left; background:transparent; border:0; padding:12px 0; font-size:14px; font-weight:700; }
.faq-q:hover{ color:var(--brand-2); }
.faq-a{ padding:0 0 12px; font-size:14px; }
.faq-a p{ margin:0 0 4px; }
.faq-hidden .faq-q{ color:var(--danger); }
.faq-hidden{ background:#fdf6f4; }

/* ===================== チャット ===================== */
.chat-head{ display:flex; gap:10px; align-items:center; border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:10px; }
.chat-avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; }
.chat-name{ margin:0; font-weight:700; font-size:14px; }
.chat-state{ margin:0; font-size:11px; color:var(--dim); }
.chat-log{ display:flex; flex-direction:column; gap:8px; max-height:44vh; overflow-y:auto; padding:4px 2px; }
.chat-msg{ max-width:80%; padding:9px 12px; border-radius:12px; font-size:14px; }
.chat-msg p{ margin:0; }
.chat-msg.bot{ background:#eef2f1; border-top-left-radius:2px; align-self:flex-start; }
.chat-msg.me{ background:var(--brand); color:#fff; border-top-right-radius:2px; align-self:flex-end; }
.chat-msg.meta{ background:#f7f2e6; font-family:ui-monospace,monospace; font-size:12px; }
.chat-msg.typing{ color:var(--dim); font-style:italic; }
.chat-system{ text-align:center; font-size:12px; color:var(--danger); margin:4px 0; }
.chat-options{ margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
.panel-strange .chat-msg.bot{ background:#efe7db; }

/* ===================== 通知 ===================== */
.notif-list{ display:flex; flex-direction:column; gap:8px; }
.notif{ border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:#fff; }
.notif.unread{ border-left:4px solid var(--mint); background:#f6fbfa; }
.notif.bad{ border-left:4px solid var(--danger); background:#fdf6f4; }
.nt-title{ margin:0; font-weight:700; font-size:14px; }
.nt-body{ margin:2px 0 0; font-size:13px; }
.nt-time{ margin:4px 0 0; font-size:11px; color:var(--dim); }

/* ===================== 倉庫端末 ===================== */
.wms-log{ background:#0a1110; border:1px solid #223029; border-radius:6px; padding:10px; font-size:12px; overflow-x:auto; }
.wms-line{ margin:0 0 3px; display:grid; grid-template-columns:70px 80px 1fr; gap:8px; white-space:nowrap; }
.wms-line.warn{ color:#e8a05a; }
.wms-t{ color:#5f8f7f; }
.wms-u{ color:#7fb5a2; }
.wms-cam{ margin-bottom:10px; cursor:zoom-in; }
.wms-cam img{ aspect-ratio:16/9; object-fit:cover; border-radius:6px; filter:grayscale(.5) contrast(1.1); }
.wms-cam .dim{ color:#6e8f84; margin:4px 0 0; }
.mail-head{ width:100%; text-align:left; background:#14211d; border:1px solid #25382f; border-radius:6px; padding:10px; color:#c6f2e2; }
.mail-sub{ margin:0; font-weight:700; font-size:13px; }
.mail-meta{ margin:2px 0 0; font-size:11px; color:#6e8f84; }
.mail-body{ padding:12px 4px 0; font-size:13px; line-height:1.9; }
.mail-body p{ margin:0; }
@media(max-width:520px){
  .wms-line{ grid-template-columns:1fr; white-space:normal; }
}

/* ===================== 調査メモ ===================== */
.core-list{ list-style:none; margin:6px 0 0; padding:0; font-size:13px; }
.core{ color:var(--dim); }
.core.has{ color:var(--brand-2); font-weight:700; }
.clue{ display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.clue:last-child{ border-bottom:0; }
.clue-img{ width:110px; flex:none; }
.clue-img img{ border-radius:6px; object-fit:cover; }
.clue-title{ margin:0; font-weight:700; font-size:14px; }
.clue-body{ margin:4px 0 0; font-size:13px; color:var(--ink-2); }

/* ===================== 決断 ===================== */
.decide-list{ display:grid; gap:10px; }
.decide{ text-align:left; background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px; transition:.15s; }
.decide:hover{ border-color:var(--ink); transform:translateY(-2px); box-shadow:var(--shadow); }
.dc-title{ margin:0; font-weight:800; font-size:15px; }
.dc-desc{ margin:4px 0 0; font-size:13px; color:var(--dim); }
.decide-missing{ margin:6px 0 0; font-size:13px; color:#8a2f28; }
.decide-missing-actions{ margin:8px 0 0; }

/* ===================== モーダル ===================== */
.modal{ position:fixed; inset:0; z-index:70; background:rgba(8,14,13,.72); display:grid; place-items:center; padding:18px; }
.modal-box{ background:#111b19; color:#e4efec; border:1px solid #2c423c; border-radius:12px; padding:20px;
  max-width:520px; width:100%; max-height:86vh; overflow-y:auto; }
.modal-title{ margin:0 0 12px; font-size:17px; }
.menu-grid{ display:grid; gap:8px; margin-top:14px; }
.menu-status{ margin:12px 0 0; font-size:12px; color:#7fa79c; text-align:center; }
.dialog-body p{ margin:0 0 6px; font-size:14px; }
.dialog-body .dim{ color:#8fa8a2; }
.cfg-row{ display:flex; align-items:center; gap:10px; margin:12px 0; font-size:14px; }
.cfg-row span{ flex:0 0 100px; }
.cfg-row input[type=range]{ flex:1; }
.cfg-row output{ width:44px; text-align:right; font-family:monospace; font-size:12px; }
.cfg-check{ align-items:flex-start; }
.cfg-check span{ flex:1; }

.gallery{ display:grid; gap:8px; }
.gal-item{ border:1px solid #2c423c; border-radius:8px; padding:10px; background:#0e1716; }
.gal-item.got{ border-color:var(--mint); }
.gal-no{ margin:0; font-size:10px; letter-spacing:.2em; color:#7fa79c; }
.gal-title{ margin:2px 0; font-weight:700; font-size:14px; }
.gal-epi{ margin:0; font-size:12px; color:#93a8a2; }

/* ===================== ライトボックス ===================== */
.lightbox{ position:fixed; inset:0; z-index:80; background:rgba(5,9,8,.92); display:flex;
  flex-direction:column; align-items:center; justify-content:center; padding:24px; }
.lb-stage{ max-width:900px; width:100%; position:relative; }
.lb-stage img{ width:100%; max-height:72vh; object-fit:contain; border-radius:6px; }
.lb-close{ position:absolute; top:14px; right:16px; background:transparent; border:0; color:#fff; font-size:24px; }
.lb-cap{ color:#d6e5e1; font-size:14px; max-width:760px; text-align:center; margin:14px 0 0; line-height:1.8; }

/* ===================== ローディング / スケルトン ===================== */
.skeleton{ display:grid; gap:8px; }
.skeleton span{ display:block; height:12px; border-radius:6px;
  background:linear-gradient(90deg,#e9edec 25%,#f5f7f6 37%,#e9edec 63%); background-size:400% 100%;
  animation: skel 1.2s ease infinite; }
.skeleton span:nth-child(2){ width:80%; }
.skeleton span:nth-child(3){ width:55%; }
@keyframes skel{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }

/* ===================== ホラー演出レイヤ ===================== */
.fx-noise{
  position:fixed; inset:0; z-index:90; pointer-events:none; opacity:0; transition:opacity .12s;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.fx-noise.on{ opacity:.5; animation: noiseShift .09s steps(2) infinite; }
.fx-noise.on[data-strength="weak"]{ opacity:.22; }
@keyframes noiseShift{ 0%{transform:translate(0,0)} 50%{transform:translate(-3px,2px)} 100%{transform:translate(2px,-2px)} }

.fx-black{ position:fixed; inset:0; z-index:95; background:#000; opacity:0; pointer-events:none; transition:opacity .28s; }
.fx-black.on{ opacity:1; pointer-events:all; }

.shaking{ animation: shake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake{
  10%,90%{ transform:translate(-1px,0) } 20%,80%{ transform:translate(2px,-1px) }
  30%,50%,70%{ transform:translate(-3px,1px) } 40%,60%{ transform:translate(3px,1px) }
}
.glitching{ animation: glitch .5s steps(3) ; position:relative; }
@keyframes glitch{
  0%{ filter:none; transform:none }
  30%{ filter:hue-rotate(35deg) contrast(1.4); transform:translateX(-2px) }
  60%{ filter:invert(.08); transform:translateX(2px) skewX(-.4deg) }
  100%{ filter:none; transform:none }
}

.fx-toast{ position:fixed; right:12px; top:64px; z-index:88; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast{
  background:#12201d; color:#e6f2ee; border:1px solid #2c433c; border-left:4px solid var(--mint);
  border-radius:8px; padding:10px 12px; max-width:290px; box-shadow:0 8px 24px rgba(0,0,0,.28);
  animation: toastIn .28s ease-out;
}
.toast strong{ display:block; font-size:13px; }
.toast p{ margin:2px 0 0; font-size:12px; color:#a9c6bf; }
.toast-bad{ border-left-color:var(--danger); }
.toast-clue{ border-left-color:var(--accent); }
.toast.out{ animation: toastOut .55s forwards; }
@keyframes toastIn{ from{ opacity:0; transform:translateX(20px) } to{ opacity:1; transform:none } }
@keyframes toastOut{ to{ opacity:0; transform:translateX(20px) } }
@media(max-width:520px){ .fx-toast{ left:12px; right:12px; } .toast{ max-width:none; } }

/* ===================== ノベル（ADV）レイヤ ===================== */
.adv{
  position:fixed; inset:0; z-index:93; overflow:hidden;
  background:#05100e; color:#e7f1ee; cursor:pointer;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.adv-bg{ position:absolute; inset:0; z-index:1; }
.adv-bg-img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.4) brightness(.65) contrast(1.05); }
.adv-scrim{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(5,16,14,.55) 0%, rgba(5,16,14,.2) 40%, rgba(5,16,14,.82) 100%);
}
.adv-box{
  position:relative; z-index:3;
  max-width:760px; width:calc(100% - 32px); margin:0 auto 6vh;
  background:rgba(9,18,16,.86); border:1px solid #2c433c; border-radius:12px;
  padding:20px 22px 26px; box-shadow:0 -8px 40px rgba(0,0,0,.5);
  backdrop-filter:blur(2px);
}
.adv-name{
  display:inline-block; margin-bottom:8px; padding:2px 12px;
  background:var(--brand); border:1px solid var(--mint); border-radius:6px;
  font-weight:700; font-size:14px; color:#eafaf5;
}
.adv-text{
  font-size:clamp(15px,2.6vw,18px); line-height:2; min-height:2em;
  letter-spacing:.02em;
}
.adv-text.yuu{ color:#dff3ec; }
.adv-text.narration{ color:#b9cec8; }
.adv-text.tanaka{ color:#e7c7d4; font-style:italic; }
.adv-text.center{
  text-align:center; font-size:clamp(20px,4vw,30px); letter-spacing:.14em;
  padding:24px 0; color:#f0e4e8;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
}
.adv-hint{ margin-top:14px; text-align:right; font-size:12px; color:#7fa79c; animation:advBlink 1.3s infinite; }
@keyframes advBlink{ 0%,100%{opacity:.4} 50%{opacity:1} }
.adv-skip{
  position:absolute; top:16px; right:16px; z-index:4;
  background:rgba(0,0,0,.45); color:#cfe6df; border:1px solid #3a544c;
  padding:6px 12px; border-radius:6px; font-size:12px;
}
.adv-skip:hover{ background:rgba(0,0,0,.7); }

/* ===================== エンディング ===================== */
.ending-screen{
  position:fixed; inset:0; z-index:92; overflow-y:auto;
  background:radial-gradient(120% 80% at 50% 0%, #17211f 0%, #090d0c 70%);
  color:#e2ecea; padding:40px 20px 60px;
}
.ending-screen[data-type="TRUE"]{ background:radial-gradient(120% 80% at 50% 0%, #10201d 0%, #05100e 70%); }
.end-inner{ max-width:640px; margin:0 auto; text-align:center; }
.end-type{ margin:0; font-size:11px; letter-spacing:.3em; color:#7fa79c; }
.end-title{ margin:6px 0 20px; font-size:clamp(20px,5vw,28px); }
.end-img img{ aspect-ratio:16/9; object-fit:cover; border-radius:8px; margin-bottom:24px; filter:grayscale(.35) contrast(1.05); }
.end-lines{ text-align:left; }
.end-line{ margin:0 0 12px; font-size:15px; line-height:2; min-height:1.4em; }
.end-epi{ margin:26px 0 0; font-size:15px; color:#a9d4c7; font-style:italic; min-height:1.4em; }
.end-menu{ margin-top:32px; display:grid; gap:10px; }
.end-hint{ font-size:12px; color:#7f918c; margin:6px 0 0; }

/* ============================================================
 * デバイス枠（“長谷川が操作しているブラウザ”） — body.frame-on のときだけ有効
 *   枠OFF時（既定の .browser / .browser-chrome / .device-bg）は完全に無効化し、
 *   従来のフルブリード表示と1pxも変えない。
 * ========================================================== */
.device-bg{ display:none; }
.browser-chrome{ display:none; }
/* .browser / .device は枠OFF時は素通しラッパー（スタイルなし） */

/* ---- 枠ON：共通 ---- */
body.frame-on{ background:#070b0a; }

/* 背景（暗い部屋／デスクトップ）。実画像不要のグラデーションで“崩れない” */
body.frame-on .device-bg{
  display:block; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(140% 100% at 50% -10%, #1a2422 0%, #0c110f 45%, #050807 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px);
}
/* 画面の“映り込み”のような淡い光。ホラー演出でここを触れる余地にもなる */
body.frame-on .device-bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 40% at 50% 120%, rgba(63,191,168,.05) 0%, transparent 70%);
}

/* ブラウザウィンドウ本体 */
body.frame-on .browser{
  position:relative; z-index:1;
  max-width:1200px;
  margin:14px auto 96px;              /* 下は固定の目的トレイぶんを空ける */
  background:var(--paper);
  border:1px solid #04211d;
  border-radius:12px;
  box-shadow:0 32px 90px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.03) inset;
}

/* ブラウザのchrome（信号機ドット＋タブ＋アドレスバー＋時計） */
body.frame-on .browser-chrome{
  display:flex; align-items:center; gap:12px;
  position:sticky; top:0; z-index:50;
  height:46px; padding:0 14px;
  background:linear-gradient(#edf1ef,#dfe5e2);
  border:1px solid #04211d; border-bottom-color:#c4cdc9;
  border-radius:12px 12px 0 0;
  font-size:13px; color:#3a4744;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
}
body.frame-on .bc-dots{ display:flex; gap:7px; flex:none; }
body.frame-on .bc-dots i{ width:12px; height:12px; border-radius:50%; background:#c9d0cd; display:block; }
body.frame-on .bc-dots i:nth-child(1){ background:#e06b5f; }
body.frame-on .bc-dots i:nth-child(2){ background:#e6c04a; }
body.frame-on .bc-dots i:nth-child(3){ background:#5fbf7a; }
body.frame-on .bc-tab{
  flex:none; display:flex; align-items:center; gap:6px;
  max-width:190px; padding:5px 12px; border-radius:8px 8px 0 0;
  background:#f6f8f7; border:1px solid #cdd5d1; border-bottom:0;
  font-weight:700; font-size:12px; color:var(--brand); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-bottom:-1px;
}
body.frame-on .bc-tab-mark{ color:var(--mint); }
body.frame-on .bc-address{
  flex:1; min-width:0; display:flex; align-items:center; gap:7px;
  height:28px; padding:0 12px; border-radius:14px;
  background:#f6f8f7; border:1px solid #cfd6d2; color:#4a5754;
  font-size:12px; letter-spacing:.02em; overflow:hidden; white-space:nowrap;
}
body.frame-on .bc-lock{ font-size:11px; flex:none; opacity:.75; }
body.frame-on .bc-url{ overflow:hidden; text-overflow:ellipsis; }
body.frame-on .bc-right{ flex:none; display:flex; align-items:center; gap:12px; color:#66736f; }
body.frame-on .bc-clock{ font-variant-numeric:tabular-nums; font-size:12px; letter-spacing:.06em; }
body.frame-on .bc-more{ font-size:16px; line-height:1; }

/* アドレスバーの点滅キャレット（“入力欄にいる＝彼が触っている”） */
.bc-caret{ display:none; }
body.frame-on .bc-caret{
  display:inline-block; width:1.5px; height:14px; margin-left:1px; flex:none;
  background:#3a4744; opacity:0;
}
body.frame-on .bc-address.typing .bc-caret{ opacity:1; animation:bcCaret 1s steps(1) infinite; }
@keyframes bcCaret{ 50%{ opacity:0; } }

/* ログイン中のアカウント（＝長谷川本人のセッション） */
.bc-user{ display:none; }
body.frame-on .bc-user{
  display:flex; align-items:center; gap:6px; flex:none;
  padding:3px 9px 3px 3px; border-radius:16px;
  background:#f2f5f4; border:1px solid #d3dbd7; color:#3a4744; font-size:12px;
}
body.frame-on .bc-avatar{
  width:20px; height:20px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:11px; font-weight:700;
  background:var(--brand); color:#dff0ea;
}
body.frame-on .bc-name{ font-weight:600; white-space:nowrap; }

/* ページ読み込みの進捗ライン（navigateしている手応え） */
.bc-progress{ display:none; }
body.frame-on .bc-progress{
  display:block; position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:var(--mint); box-shadow:0 0 8px rgba(63,191,168,.7); opacity:0;
}
body.frame-on .bc-progress.go{ animation:bcLoad .55s ease-out; }
@keyframes bcLoad{
  0%{ width:0; opacity:1; } 70%{ width:82%; opacity:1; }
  100%{ width:100%; opacity:0; }
}

/* モニターの映り込み（物理画面を見ている感）。reduce-fxで弱める／スマホでは出さない */
.fx-glare{ display:none; }
body.frame-on .fx-glare{
  display:block; position:fixed; inset:0; z-index:52; pointer-events:none;
  mix-blend-mode:screen; opacity:.5;
  background:
    linear-gradient(118deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 74%, rgba(255,255,255,.035) 100%),
    radial-gradient(150% 120% at 50% -20%, rgba(0,0,0,0) 55%, rgba(0,0,0,.28) 100%);
}
body.reduce-fx.frame-on .fx-glare{ opacity:.22; }

/* クリック位置に広がる波紋（彼のポインタ操作の可視化） */
.op-ripple{
  position:absolute; z-index:3; pointer-events:none;
  width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
  border:1.5px solid rgba(63,191,168,.8);
  animation:opRipple .5s ease-out forwards;
}
@keyframes opRipple{
  0%{ transform:scale(.4); opacity:.9; }
  100%{ transform:scale(2.6); opacity:0; }
}

/* サイトのヘッダーはchromeの下に潜り込ませる（stickyの二段重ね） */
body.frame-on .site-header{ top:46px; }
body.frame-on .site{ min-height:calc(100vh - 130px); }
body.frame-on #view{ padding-bottom:78px; }   /* 固定トレイに隠れないよう余白 */

/* ---- 目的バー＝ウィンドウ外の“別枠”（OS通知風・画面下に固定） ---- */
body.frame-on .objective-bar{
  position:fixed; left:50%; transform:translateX(-50%);
  top:auto; bottom:16px; height:auto; z-index:55;
  width:min(1200px, calc(100% - 28px));
  max-width:none; margin:0; padding:11px 16px;
  background:linear-gradient(#13241f,#0d1a17);
  border:1px solid #2c5c52; border-radius:12px;
  box-shadow:0 16px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(63,191,168,.06);
}

/* ============================================================
 * スマホ幅：枠は付けない（実機がすでにスマホ）。細いURLバーだけ残し全画面維持
 * ========================================================== */
@media (max-width:860px){
  body.frame-on{ background:var(--paper); }
  body.frame-on .device-bg{ display:none; }
  body.frame-on .browser{
    max-width:none; margin:0; border:0; border-radius:0; box-shadow:none;
  }
  body.frame-on .browser-chrome{
    top:0; height:34px; padding:0 12px; gap:8px;
    border-radius:0; border-left:0; border-right:0; border-top:0;
  }
  body.frame-on .bc-dots, body.frame-on .bc-tab, body.frame-on .bc-more,
  body.frame-on .bc-user{ display:none; }
  body.frame-on .fx-glare{ display:none; }
  body.frame-on .bc-address{ height:24px; }
  body.frame-on .site-header{ top:34px; }
  body.frame-on .site{ min-height:0; }
  body.frame-on #view{ padding-bottom:64px; }
  body.frame-on .objective-bar{
    left:0; right:0; bottom:0; transform:none;
    width:100%; border-radius:0; border-left:0; border-right:0; border-bottom:0;
  }
  body.frame-on .objective-bar::before{ display:none; }
}

/* ============================================================
 * ご意見・改善案フォーム（エンディング画面より前面）
 * ========================================================== */
.fb-overlay{
  position:fixed; inset:0; z-index:96;
  background:rgba(5,9,8,.82);
  display:flex; align-items:flex-start; justify-content:center;
  padding:24px 16px; overflow-y:auto;
}
.fb-box{
  position:relative; width:100%; max-width:560px; margin:auto;
  background:linear-gradient(#14231f,#101c19);
  border:1px solid #2c5c52; border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  color:#e2ecea; padding:26px 22px 22px;
}
.fb-close{
  position:absolute; top:12px; right:12px;
  background:transparent; border:0; color:#8fb2a9; font-size:18px; line-height:1; padding:6px;
}
.fb-close:hover{ color:#fff; }
.fb-kicker{ margin:0 0 4px; font-size:10px; letter-spacing:.24em; color:#5f9b8d; }
.fb-title{ margin:0 0 8px; font-size:19px; color:#eaf6f2; letter-spacing:.02em; }
.fb-lead{ margin:0 0 18px; font-size:13px; line-height:1.8; color:#9dbcb3; }

.fb-field{ margin:0 0 16px; }
.fb-label{ display:block; font-size:12px; font-weight:700; color:#bfe0d7; margin:0 0 8px; letter-spacing:.04em; }

.fb-stars{ display:flex; gap:4px; }
.fb-star{
  background:transparent; border:0; font-size:28px; line-height:1; color:#3c5751; padding:2px 3px; transition:.12s;
}
.fb-star:hover{ transform:scale(1.12); }
.fb-star.on{ color:#f0b449; text-shadow:0 0 10px rgba(240,180,73,.4); }

.fb-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.fb-chip{
  background:#0f1c19; border:1px solid #2f524a; color:#bcd6ce;
  padding:7px 13px; border-radius:20px; font-size:13px; transition:.12s;
}
.fb-chip:hover{ border-color:var(--mint); color:#fff; }
.fb-chip.on{ background:var(--mint); border-color:var(--mint); color:#06231e; font-weight:700; }

.fb-name, .fbq-name, .fb-email{
  width:100%; background:#0d1815; border:1px solid #2f524a; border-radius:8px;
  color:#eaf6f2; font:inherit; font-size:14px; padding:9px 12px;
}
.fb-name:focus, .fbq-name:focus, .fb-email:focus{ outline:none; border-color:var(--mint); }
.fb-name::placeholder, .fbq-name::placeholder, .fb-email::placeholder{ color:#5f7a73; }
.fbq-name{ margin:0 0 12px; }
.fb-note{ margin:6px 0 0; font-size:11px; color:#7f988f; line-height:1.7; }

.fb-textarea{
  width:100%; resize:vertical; min-height:92px;
  background:#0d1815; border:1px solid #2f524a; border-radius:8px;
  color:#eaf6f2; font:inherit; font-size:14px; line-height:1.7; padding:10px 12px;
}
.fb-textarea:focus{ outline:none; border-color:var(--mint); }
.fb-textarea::placeholder{ color:#5f7a73; }

.fb-status{ min-height:18px; margin:2px 0 12px; font-size:12.5px; color:#e0a06a; }
.fb-status.ok{ color:#8fe0cb; }

.fb-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.fb-actions .btn{ margin:0; }
.fb-actions .fb-send, .fb-actions .fb-copy{ flex:1; min-width:150px; }
.fb-actions .tbtn-ghost{ color:#bcd6ce; border:1px solid #2f524a; background:transparent; }
.fb-actions .tbtn-ghost:hover{ background:#16302a; }

.end-thanks{ font-size:13px; color:#a9d4c7; line-height:1.8; margin:0 0 6px; }

/* ============================================================
 * βテスト同意ポップアップ（開始前）
 * ========================================================== */
.consent{
  position:fixed; inset:0; z-index:97;
  background:radial-gradient(120% 90% at 50% 10%, rgba(20,32,30,.92), rgba(5,9,8,.95));
  display:flex; align-items:center; justify-content:center;
  padding:24px 16px; overflow-y:auto;
}
.consent-box{
  width:100%; max-width:560px; margin:auto;
  background:linear-gradient(#16241f,#101c19);
  border:1px solid #2c5c52; border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  color:#e2ecea; padding:26px 24px 22px;
}
.consent-kicker{ margin:0 0 4px; font-size:10px; letter-spacing:.28em; color:#6fbfae; }
.consent-title{ margin:0 0 10px; font-size:20px; color:#eaf6f2; }
.consent-lead{ margin:0 0 14px; font-size:13.5px; line-height:1.9; color:#a9c6bf; }
.consent-points{ margin:0 0 16px; padding-left:1.1em; font-size:13.5px; line-height:1.9; color:#cfe3dd; }
.consent-points li{ margin:0 0 6px; }
.consent-points b{ color:#eaf6f2; }
.consent-terms{
  margin:0 0 20px; padding:12px 14px; font-size:13px; line-height:1.9;
  background:#0f1c19; border:1px solid #2f524a; border-radius:8px; color:#bcd6ce;
}
.consent-terms b{ color:#ffe3b0; }
.consent-actions{ display:grid; gap:10px; }

/* ============================================================
 * その場フィードバック：FAB＋クイックメモ（下から出るシート）
 * ========================================================== */
.fb-fab{
  position:fixed; right:18px; bottom:80px; z-index:54;
  width:54px; height:54px; border-radius:50%;
  background:linear-gradient(#173a33,#0f2621); color:#ffe08a;
  border:1px solid #2f6b5d; font-size:24px; line-height:1;
  display:grid; place-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(63,191,168,.08);
  transition:transform .12s ease, box-shadow .2s ease;
}
.fb-fab:hover{ transform:translateY(-2px) scale(1.05); box-shadow:0 12px 30px rgba(0,0,0,.55); }
.fb-fab:active{ transform:scale(.95); }
.fb-fab-ic{ pointer-events:none; }
/* 存在に気づいてもらうための淡いパルス（演出軽減ONで停止） */
.fb-fab::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid rgba(63,191,168,.35); opacity:0;
  animation:fabPulse 4.5s ease-in-out infinite;
}
@keyframes fabPulse{ 0%,100%{ opacity:0; transform:scale(.9); } 50%{ opacity:.5; transform:scale(1.06); } }
body.reduce-fx .fb-fab::after{ display:none; }

.fb-quick{
  position:fixed; inset:0; z-index:95;
  background:rgba(5,9,8,.45);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; transition:opacity .2s ease;
}
.fb-quick.show{ opacity:1; }
.fbq-sheet{
  position:relative; width:100%; max-width:560px;
  background:linear-gradient(#14231f,#101c19);
  border:1px solid #2c5c52; border-bottom:0;
  border-radius:16px 16px 0 0;
  box-shadow:0 -14px 44px rgba(0,0,0,.5);
  color:#e2ecea; padding:18px 18px 22px;
  transform:translateY(100%); transition:transform .26s cubic-bezier(.2,.8,.2,1);
}
.fb-quick.show .fbq-sheet{ transform:translateY(0); }
.fbq-close{
  position:absolute; top:10px; right:12px;
  background:transparent; border:0; color:#8fb2a9; font-size:17px; padding:6px;
}
.fbq-close:hover{ color:#fff; }
.fbq-title{ margin:0 0 4px; font-size:16px; font-weight:700; color:#eaf6f2; }
.fbq-ctx{ margin:0 0 12px; font-size:12px; color:#7fb1a4; }
.fbq-ctx::before{ content:"📍 "; }
.fbq-types{ display:flex; gap:8px; margin:0 0 12px; }
.fbq-type{
  background:#0f1c19; border:1px solid #2f524a; color:#bcd6ce;
  padding:6px 14px; border-radius:18px; font-size:13px; transition:.12s;
}
.fbq-type:hover{ border-color:var(--mint); color:#fff; }
.fbq-type.on{ background:var(--mint); border-color:var(--mint); color:#06231e; font-weight:700; }
.fbq-textarea{
  width:100%; resize:vertical; min-height:74px;
  background:#0d1815; border:1px solid #2f524a; border-radius:8px;
  color:#eaf6f2; font:inherit; font-size:14px; line-height:1.7; padding:10px 12px;
}
.fbq-textarea:focus{ outline:none; border-color:var(--mint); }
.fbq-textarea::placeholder{ color:#5f7a73; }
.fbq-status{ min-height:17px; margin:8px 0 10px; font-size:12.5px; color:#e0a06a; }
.fbq-status.ok{ color:#8fe0cb; }
.fbq-actions{ display:flex; }
.fbq-actions .btn{ margin:0; flex:1; }

@media(max-width:520px){
  .fbq-sheet{ border-radius:14px 14px 0 0; padding:16px 14px 20px; }
}

/* ============================================================
 * エンディング後アンケート＋LINE誘導ポップアップ（endpop）
 * ========================================================== */
.endpop{
  display:none; position:fixed; inset:0; z-index:99998;
  background:rgba(3,7,6,.88);
  align-items:center; justify-content:center; padding:22px 16px; overflow-y:auto;
}
.endpop.show{ display:flex; }
.endpop-card{
  position:relative; width:100%; max-width:520px; margin:auto;
  background:linear-gradient(#16241f,#101c19);
  border:1px solid #2c5c52; border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  color:#e2ecea; padding:28px 24px 24px; text-align:center;
}
.endpop-x{
  position:absolute; top:10px; right:14px; cursor:pointer;
  font-size:24px; line-height:1; color:#8fb2a9;
}
.endpop-x:hover{ color:#fff; }
.endpop-head{ font-size:18px; font-weight:700; line-height:1.7; color:#eaf6f2; margin:2px 0 18px; }
.endpop-label{ font-size:12.5px; color:#a9c6bf; margin:14px 0 8px; }
.endpop-stars{ display:flex; justify-content:center; gap:12px; font-size:clamp(30px,9vw,42px); }
.endpop-star{ color:#3c5751; cursor:pointer; transition:color .15s, transform .1s; }
.endpop-star:hover{ transform:scale(1.1); }
.endpop-star.on{ color:#f0c34a; text-shadow:0 0 10px rgba(240,195,74,.35); }
.endpop-stars.shake{ animation:endShake .4s; }
@keyframes endShake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.endpop-text{
  width:100%; resize:vertical; min-height:78px; margin-top:2px;
  background:#0d1815; border:1px solid #2f524a; border-radius:8px;
  color:#eaf6f2; font:inherit; font-size:14px; line-height:1.7; padding:10px 12px;
}
.endpop-text:focus{ outline:none; border-color:var(--mint); }
.endpop-text::placeholder{ color:#5f7a73; }
.endpop-send{
  margin:16px auto 0; display:block;
  background:var(--brand); color:#fff; border:1px solid var(--mint);
  font-weight:700; letter-spacing:.15em; font-size:clamp(15px,4.2vw,17px);
  padding:11px 30px; border-radius:8px;
}
.endpop-send:hover:not(:disabled){ background:var(--brand-2); }
.endpop-send:disabled{ opacity:.5; cursor:not-allowed; }
.endpop-thanks{ display:none; padding:18px 0 6px; font-size:15px; color:#a9d4c7; }
.endpop-div{ height:1px; background:#28463f; margin:20px 0 16px; }
.endpop-pitch{ font-size:13px; line-height:1.9; color:#bcd6ce; margin:0 0 14px; }
.endpop-pitch b{ color:#eaf6f2; }
.endpop-line{
  display:block; width:100%; margin:0 auto;
  background:#06c755; color:#fff; border:0; border-radius:26px;
  font-weight:700; font-size:15px; padding:13px 24px;
  box-shadow:0 6px 18px rgba(6,199,85,.3);
}
.endpop-line:hover{ filter:brightness(1.05); }

/* 開始前LINEポップアップの「友だち追加」ボタン（.consent スタイルを流用） */
.line-add{ background:#06c755; color:#fff; border:0; font-weight:700; }
.line-add:hover{ filter:brightness(1.06); background:#06c755; }