/* ============================================================
   ankaa map LP 共有デザイントークン
   出典: tmp/user_redesign_design_system_v1.html
        （ankaa map — 統一デザインシステム ボード v1）
   SPOT LP / USER LP の両方がこのファイルを読む。
   ここを変えると両方に効く = 統一感の担保はこのファイルが持つ。
   ★ 正典に無い色・角丸・影を新造しないこと。
   ============================================================ */
:root{
  /* --- 正典トークン (v1 と 1:1) --- */
  --main:#407094; --main-deep:#2C4F6B; --main-light:#E8EFF4; --sub:#85BCFF;
  --accent:#56BF80; --accent-light:#E3F4EA; --success-ink:#2F8F5B;
  --danger:#DC3545; --danger-light:#FBEAEA;
  --warning:#F0A500; --premium:#7A5F1C; --premium-light:#FDF6E3;
  --ink:#1A2A36; --system-2:#4C4C4C; --system-3:#6B7785; --system-4:#9AA6B2;
  --system-5:#E6EBF0; --system-6:#F4F7FA;
  --info-bg:#EAF2FB; --info-line:#3E7CC0;
  --ai-soft:linear-gradient(120deg,#EEF3FC,#F3EEFD); --ai-line:#E2E0FA; --ai-ink:#6E74E8;
  --radius-card:16px; --radius-control:14px; --radius-pill:999px;
  --shadow-card:0 2px 9px rgba(20,35,48,.07);

  /* --- スペーシングスケール (8px 基調・LP はこの値以外を使わない) --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --sec-pad:96px;

  /* --- タイポスケール (見出しは正典どおり 800) --- */
  --fs-display:40px; --fs-h2:30px; --fs-h3:22px; --fs-h4:16px;
  --fs-body:15px; --fs-sm:13px; --fs-xs:11px;
  --lh-head:1.5; --lh-body:1.85;

  /* --- LP 内エイリアス (正典に無い値を新造しない) --- */
  --navy:var(--main); --navy-d:var(--main-deep); --navy-tint:var(--main-light);
  --bg:var(--system-6); --card:#fff; --line:var(--system-5); --line-d:var(--system-5);
  --ink2:var(--system-2); --ink3:var(--system-3);
  --amber-bg:var(--premium-light); --amber:var(--premium);
  --green-bg:var(--accent-light); --green:var(--success-ink);
  --red-bg:var(--danger-light); --red:var(--danger);
  --r:var(--radius-control); --r-lg:var(--radius-card);
  --sh:var(--shadow-card);
  --sh-lg:0 10px 30px rgba(44,79,107,.28);  /* 正典 .head と同値 */
  --device:#21303C;                          /* 端末フレーム (1値に統一) */
  --on-navy:rgba(255,255,255,.92);           /* navy 面の本文    (7.4:1) */
  --on-navy-2:rgba(255,255,255,.74);         /* navy 面の補足   (5.44:1) */
  --hero-b2b:linear-gradient(135deg,var(--main-deep) 0%,var(--main) 100%);
  --hero-b2c:linear-gradient(135deg,var(--main) 0%,var(--main-deep) 72%);
  --maxw:1120px;
}

/* --- base --- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter','Noto Sans JP',sans-serif;background:var(--bg);color:var(--ink);
  line-height:var(--lh-body);font-size:var(--fs-body);-webkit-font-smoothing:antialiased}
/* height:auto が無いと <img height="1150"> の presentational hint が生き残り、
   幅だけ縮んで高さが据え置かれ画像が縦に伸びる。 */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.num{font-family:Inter,'Noto Sans JP',sans-serif;font-feature-settings:"tnum"}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:var(--sec-pad) 0}
.eyebrow{font-size:var(--fs-xs);letter-spacing:.18em;color:var(--main);font-weight:700;margin-bottom:var(--s3)}
h2{font-size:var(--fs-h2);font-weight:800;line-height:1.42;letter-spacing:-.01em;margin-bottom:var(--s3)}
h3,h4{line-height:var(--lh-head);font-weight:800}
.sec-lead{font-size:var(--fs-body);color:var(--ink2);max-width:740px;margin-bottom:var(--s7)}
@media(max-width:760px){:root{--sec-pad:56px}h2{font-size:22px}}

/* --- buttons (DS .btn-primary / .btn-sec 準拠) --- */
.btn{display:inline-block;text-decoration:none;padding:14px 28px;border-radius:var(--radius-control);
  font-weight:800;font-size:15px;border:1.5px solid transparent;cursor:pointer;font-family:inherit;line-height:1.4;
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease}
.btn-w{background:#fff;color:var(--main);box-shadow:0 6px 16px rgba(44,79,107,.3)}
.btn-g{border-color:rgba(255,255,255,.5);color:#fff}
.btn-navy{background:linear-gradient(135deg,#467aa0,#2C4F6B);color:#fff;box-shadow:0 6px 16px rgba(44,79,107,.3)}
.btn-out{border-color:var(--system-5);color:var(--main);background:#fff;font-weight:700}
/* ヘッダの CTA。3ページ (corp / map / spot) が同じ定義を個別に持っていたのを 2026-08-18 に
   ここへ集約した。片方だけ触って乖離する事故を防ぐため、ページ側では再定義しないこと。
   背景は .btn-navy と同じグラデーション。レスポンシブの margin-left は下の @media 側。 */
.hd-cta{background:linear-gradient(135deg,#467aa0,#2C4F6B);color:#fff;text-decoration:none;padding:9px 18px;border-radius:var(--radius-control);font-size:13px;font-weight:800;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-w:hover,.btn-navy:hover{box-shadow:0 10px 24px rgba(44,79,107,.34)}
.btn-g:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.8)}
.btn-out:hover{border-color:var(--main);background:var(--main-light)}
.btn:focus-visible,.hd-cta:focus-visible{outline:2px solid var(--main);outline-offset:3px}
.btn-w:focus-visible,.btn-g:focus-visible{outline-color:#fff}

/* --- ストア導線 (Apple / Google とも「公式バッジ画像」をそのまま貼る) ---
   以前は自前の inline SVG + 自前テキストでバッジ風のボタンを描いていたが、両社とも
   ブランド規約が「配布されたアートワークを改変せず使う」ことを求めており、
   とくに Google は色の変更・モノクロ版の自作を明示的に禁じている。
   ("Do not modify the color, proportions, spacing or any other aspect of the badge image."
    — Google Play Brand Guidelines / Apple も Marketing Guidelines で同趣旨)
   よって assets/badge_*.{svg,png} の公式アートワークを無改変で表示する。 */
.store{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  transition:transform .15s ease}
.store:hover{transform:translateY(-1px)}
.store:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:8px}
.store img{display:block;width:auto}
/* ロゴ本体の高さを両社そろえる (Google は「他ストアのロゴと同等以上の大きさ」を要求)。
   Apple の SVG は余白ゼロ、Google の PNG は上下にクリアスペース (250:192) を含むので、
   Google 側だけ 250/192 倍の箱にして、はみ出す分を負マージンで戻す。 */
.store-apple img{height:56px}
.store-gp img{height:72.9px;margin:-8.45px 0}

@media(prefers-reduced-motion:reduce){
  .btn,.store{transition:none}
  .btn:hover,.store:hover{transform:none}
}

/* --- 端末フレーム --- */
.phone{max-width:290px;margin:0 auto;border:9px solid var(--device);border-radius:34px;overflow:hidden;
  box-shadow:var(--sh-lg);background:var(--device)}
.phones{display:flex;gap:var(--s5);justify-content:center;align-items:flex-start}
.phones .phone{max-width:236px}
.frame{border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--sh);background:#fff}
.cap{font-size:11.5px;color:var(--ink3);text-align:center;margin-top:var(--s3)}

/* grid/flex の子は既定 min-width:auto なので、中身(画像)の実寸に引きずられて
   コンテナごと広がりページが横に溢れる。0 を明示して器の幅を親に従わせる。 */
.frame,.hero-shot,.gal-item,.p-media,.act-media,
.sea-grid > *,.pillar > *,.act > *,.hero-grid > *,.en-grid > *{min-width:0}

/* PC 管理画面のスクショは幅 375px まで縮むと文字が読めない。
   スマホでは「画像コンテナの中だけ」横スクロールさせて実寸に近い倍率を保つ。
   ページ本体 (body) は横スクロールさせない。
   対象は .frame.wide のみ (スマホ画面のスクショは素直に縮めてよい)。 */
@media(max-width:680px){
  /* 狭い画面で横並びのままだと 1 台 150px 程度まで潰れて画面が読めなくなる */
  .phones{flex-direction:column;align-items:center;gap:var(--s5)}
  .phones .phone{max-width:262px;width:100%}
  .phone{max-width:280px}
  .frame.wide{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  /* min-width ではなく width を指定する。max-width:none と min-width の組では
     画像の自然幅(1600px)が勝ってしまう。 */
  .frame.wide > img{width:660px;max-width:none}
}

/* --- 「含まれる」を示すチェック (□ は未選択に見えるので使わない) --- */
.p-list li,.act-list li,.en-list li,.plan ul li{position:relative;padding-left:26px;margin-bottom:var(--s2)}
.p-list li::before,.act-list li::before,.en-list li::before,.plan ul li::before{
  content:"";position:absolute;left:4px;top:.5em;width:6px;height:11px;
  border:solid var(--main);border-width:0 2px 2px 0;transform:rotate(45deg)}
.en-list li::before{border-color:#fff}

/* --- 表示切替 --- */
.only-sp{display:none}
@media(max-width:680px){.only-sp{display:inline}}

/* --- pill / tag --- */
.tag{display:inline-block;font-family:Inter;font-size:11.5px;font-weight:700;letter-spacing:.03em;
  padding:5px 11px;border-radius:var(--radius-pill);background:var(--main-light);color:var(--main)}
.tag.free{background:var(--accent-light);color:var(--success-ink)}
.tag.prem{background:var(--premium-light);color:var(--premium)}
.tag.ai{background:var(--ai-soft);border:1px solid var(--ai-line);color:var(--ai-ink)}

/* --- footer (両LP共通) --- */
footer{background:var(--main-deep);color:var(--on-navy-2);padding:var(--s7) 0 var(--s5);font-size:12.5px}
.f-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s6);padding-bottom:var(--s6);
  border-bottom:1px solid rgba(255,255,255,.14)}
.f-top h5{color:#fff;font-size:13px;font-weight:700;margin-bottom:var(--s3)}
.f-top a{color:var(--on-navy-2);text-decoration:none;display:block;margin-bottom:var(--s2)}
.f-top a:hover{color:#fff}
.f-dl dt{color:var(--on-navy-2);font-size:11px;margin-top:var(--s2);font-weight:700}
.f-dl dd{color:var(--on-navy)}
.f-bot{padding-top:var(--s4);display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  font-size:11.5px;color:var(--on-navy-2)}
@media(max-width:820px){.f-top{grid-template-columns:1fr}}

/* --- 900px 以下でナビが消えると、タブレットでページ内リンクが完全に失われる。
       JS を使わずに横スクロールのタブ列にする (560px 未満は素直に隠す)。 --- */
@media(max-width:900px){
  .hd-in{flex-wrap:wrap;gap:var(--s4)}
  .hd-nav{display:flex;order:3;flex-basis:100%;margin-left:0;gap:var(--s4);font-size:12.5px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;padding-bottom:2px}
  .hd-nav::-webkit-scrollbar{display:none}
  .hd-cta{margin-left:auto}
}
@media(max-width:560px){
  .hd-nav{display:none}
  /* 主 CTA と副 CTA の幅がばらつくのでスマホでは全幅に揃える */
  .hero-btns{display:grid;gap:var(--s3)}
  .hero-btns .btn,.hero-btns .store,.dl-btns .btn,.dl-btns .store{width:100%;text-align:center;justify-content:center}
  /* ストアバッジは公式アートワークなので全幅に引き伸ばせない。ヒーローは本文が左揃えなので
     バッジも左に寄せる (ダウンロード節は中央揃えのセクションなので上の指定のまま中央)。 */
  .hero-btns .store{justify-content:flex-start}
  .hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4)}
}