/* ==========================================
   UMIMAP 共通CSS（v1.2）
   — テキストを僅かに小さく、余白を広めに調整
   — iOSダーク対応のポップアップ上書き/モバイルでスライド矢印を非表示
   ========================================== */

:root {
  color-scheme: light dark;
  /* Colors */
  --bg: #ffffff;
  --bg-soft: #f6f8fa;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --brand: #0ea5e9; /* sky-500 */
  --brand-weak: #e0f2fe;
  --accent: #0284c7; /* sky-600 */

  /* Layout tokens */
  --header-h: 66px;               /* +2px */
  --sidebar-w: 260px;
  --radius: 14px;
  --radius-lg: 18px;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --gap: 28px;                    /* +4px */
  --maxw: 1200px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0f13;
    --bg-soft: #0f141a;
    --text: #e5e7eb;
    --muted: #94a3b8;
    --border: #1f2937;
    --brand-weak: rgba(14,165,233,.12);
    --shadow: 0 8px 24px rgba(0,0,0,.45);
  }
}

/* ===== Base / Reset ===== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Yu Gothic", Meiryo, "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", sans-serif;
  font-size: 15px;              /* 16→15px（僅かに小さく） */
  line-height: 1.75;            /* 読みやすさ優先 */
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{max-width:100%; display:block}
svg{display:block}

a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3{line-height:1.35; margin: 0 0 .25em}
h1{font-size: clamp(21px, 3vw, 28px);}  /* 22-30 → 21-28 */
h2{font-size: clamp(18px, 2.2vw, 21px);} /* やや小さめ */
h3{font-size: clamp(16px, 2vw, 18px);}  

p, ul, ol {margin: .6em 0}
ul,ol {padding-inline-start: 1.25em}

.muted{color:var(--muted)}

/* ヒーロー内キャプションの自動ダーク化/非対応ブラウザのためのフォールバック */
.slide .caption { background: rgba(0,0,0,.40); }

/* ===== Accessibility ===== */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:var(--brand);color:#fff;padding:8px 12px;border-radius:8px;z-index:2000}

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:1000;
  height:var(--header-h);
  background:linear-gradient(to bottom, rgba(255,255,255,.9), rgba(255,255,255,.75));
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  padding:0 18px;                 /* +2px */
}
@media (prefers-color-scheme: dark){
  .site-header{background:linear-gradient(to bottom, rgba(11,15,19,.9), rgba(11,15,19,.7))}
}
.logo{display:flex; align-items:center; gap:10px; font-weight:901; letter-spacing:.5px; font-size:19px; color:var(--text)}
.logo img{height:26px; width:auto}

.top-menu ul{display:flex; gap:12px; list-style:none; margin:0; padding:0}
.top-menu a{display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border-radius:10px; color:var(--text)}
.top-menu a:hover{background:var(--brand-weak); text-decoration:none}

.hamburger{display:none; appearance:none; border:0; background:transparent; width:44px; height:44px; border-radius:10px}
.hamburger:focus-visible{outline:2px solid var(--brand)}
.hamburger svg{width:24px;height:24px}

/* ===== Layout ===== */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px} /* 16→20 */
.grid{display:grid; grid-template-columns: var(--sidebar-w) 1fr; gap:var(--gap); align-items:start; padding: 28px 0 56px}

/* ===== Sidebar ===== */
.sidebar{position:relative}
.sidebar-inner{
  position:sticky; top: calc(var(--header-h) + 18px);
  border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--bg-soft);
  box-shadow: var(--shadow);
  padding: 14px;                 /* 12→14 */
}
.side-title{font-size:12.5px; font-weight:700; color:var(--muted); letter-spacing:.08em; margin:2px 6px 10px}
.side-tabs{list-style:none; margin:0; padding:4px}
.side-tabs a{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px;              /* 10x12 → 11x14 */
  margin:6px 0;                   /* 4→6 */
  border-radius:12px; color:var(--text); text-decoration:none;
  border:1px solid transparent;
}
.side-tabs a:hover{background:var(--brand-weak); text-decoration:none}
.side-tabs a[aria-current="page"], .side-tabs .active{
  background:linear-gradient(90deg, var(--brand-weak), transparent 60%);
  border-color: var(--brand-weak);
  box-shadow: inset 3px 0 0 0 var(--brand);
  font-weight:700;
}

/* ===== Main / Card ===== */
main{min-height:60vh}
.card{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--bg-soft);
  box-shadow: var(--shadow);
  padding: clamp(22px, 3.2vw, 36px); /* 32→36の上限＋下限広げ */
}
.page-title{margin: 8px 0 20px; font-weight:900}

/* ===== Legal (Terms / Privacy) ===== */
.legal h2{margin: 30px 0 10px}
.legal p{margin: 8px 0}
.legal ul{margin: 8px 0 8px 1.25em}
.legal li{margin:.45em 0}
.legal .meta{display:grid; gap:6px; margin:14px 0 24px; color:var(--muted)}
.legal table{width:100%; border-collapse: collapse; margin: 8px 0 18px}
.legal th,.legal td{border:1px solid var(--border); padding:10px; text-align:left}
.legal thead th{background:var(--bg-soft)}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--border); padding:24px 20px; color:var(--muted)} /* 20→24 */

/* ===== Mobile (≤900px): Drawer Sidebar ===== */
@media (max-width: 900px){
  .top-menu{display:none}
  .hamburger{display:inline-grid; place-items:center}
  .grid{grid-template-columns: 1fr}
  .sidebar{
    position:fixed; top:var(--header-h); left:0; bottom:0; z-index:1100; width:min(86vw, 320px);
    transform: translateX(-100%); transition: transform .24s ease-out;
  }
  .sidebar.open{transform: translateX(0)}
  .sidebar-inner{height: calc(100dvh - var(--header-h) - 18px); overflow:auto}
  .overlay{position:fixed; inset:0; background: rgba(0,0,0,.35); backdrop-filter: blur(2px); display:none; z-index:1000}
  .overlay.show{display:block}
  body.menu-open{overflow:hidden}
}

/* ===== Print ===== */
@media print{
  .site-header, .sidebar, .overlay, .site-footer{display:none !important}
  .wrap{max-width:none; padding:0}
  main{padding:0}
  .card{box-shadow:none; border:0; padding:0}
}

@media (max-width: 900px){
  .site-header.mobile-header-active{
    grid-template-columns:auto 1fr auto;
  }
  .site-header.mobile-header-active > .wrap{ display:none !important; }
  .site-header.mobile-header-active .header-actions{
    display:flex;
    align-items:center;
    gap:10px;
    grid-column:3;
    justify-self:end;
  }
  .site-header.mobile-header-active .hamburger{ display:inline-grid !important; }
}

/* ===== PC専用：トップメニューの「アプリへ戻る」をピル化（クラス直指定・強制） ===== */
@media (min-width: 901px){
  .top-menu a.btn-pill{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    padding: 0 14px !important;
    border-radius: 9999px !important;
    background: var(--accent) !important; /* 濃いめの青（サイトのメインカラー） */
    color: #fff !important;               /* 白文字 */
    border: 1px solid transparent !important;
    box-shadow: var(--shadow) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    gap: 0 !important; /* 既存 .top-menu a の gap 影響を打消し */
  }
  .top-menu a.btn-pill:hover{
    text-decoration: none !important;
    filter: brightness(.95) !important;
    background: var(--accent) !important; /* 既存 :hover 背景の上書き保険 */
    color: #fff !important;
  }
}

/* PCメニューの高さ合わせ */
@media (min-width: 901px){
  /* UL内の各項目を縦方向に中央寄せ（保険） */
  .top-menu ul { align-items: center; }

  /* ピルの縦寸を他リンクと同じに（上下9px） */
  .top-menu a.btn-pill{
    height: auto !important;
    padding: 9px 14px !important;   /* ← 既存リンクは 9px 12px。横だけ少し広め */
    line-height: 1 !important;      /* テキスト基線のズレ防止 */
  }
}

/* ===== About ページの調整 ===== */

/* カード画像（サンプル） */
.about .feature-img{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: #e5e7eb; /* 読み込み中の下地 */
}

/* 角丸の切り抜きが効くように（各カードにoverflowを付与） */
.about .feature{ overflow: hidden; }

/* 余白調整：次セクション（こういう方に）との間を拡げる */
.about .feature-grid{ margin-bottom: 26px; }

/* 余白調整：「機能をもっと見る」の下側もゆとりを確保 */
.about .feature-more{
  display: inline-flex;       /* 既存の見た目は維持 */
  margin-top: 10px;
  margin-bottom: 28px;        /* ← ここで下の余白を増量 */
}

/* 小さめ画面では画像比率を少し縦に（任意） */
@media (max-width: 560px){
  .about .feature-img{ aspect-ratio: 4 / 3; }
}

/* About：カード内画像を角丸に */
.about .feature-img{
  border-radius: var(--radius); /* 既存カードの角丸と揃える（=14px） */
}

/* 共通：デスクトップは 16:9 */
.embed-map{
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}
.embed-map iframe{
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* スマホは “ほぼ画面いっぱい” で背高に */
@media (max-width: 900px){
  .embed-map{
    /* 高さは：ヘッダーぶんと余白を引いた 1画面高を上限に */
    height: clamp(
      440px,
      calc(100svh - var(--header-h) - 24px - env(safe-area-inset-bottom, 0px)),
      860px
    );
    aspect-ratio: auto; /* 高さ指定を優先 */
  }
}

/* ===== Popups / Modals（ニュース・機能の詳細）ダーク対応の上書き ===== */
/* ページ内 <style> 側で #fff 固定されていても確実に上書きできるよう !important を使用 */
.modal-backdrop{
  background: color-mix(in oklab, #000 45%, transparent) !important;
}
@media (prefers-color-scheme: dark){
  .modal-backdrop{
    background: color-mix(in oklab, #000 65%, transparent) !important;
  }
}
.modal{
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow) !important;
}
.modal header{
  background: var(--bg-soft) !important;
  border-bottom: 1px solid var(--border) !important;
}
.modal .content{ color: var(--text) !important; }
.modal .close{ color: var(--text) !important; }

/* ニュースカードのボタンも背景固定白を上書きして配色追従 */
.news-card button{
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* ===== スマホはヒーロースライドの＜/＞ボタンを隠す ===== */
@media (max-width: 560px){
  .hero .ctrl { display: none !important; }  /* ＜ ＞ボタンを非表示＆フォーカス不可に */
}

/* iOSで背景だけ白く残るケースの念押し */
.modal,
.modal header,
.modal .content {
  color-scheme: light dark;
  background: var(--bg) !important;
  background-color: var(--bg) !important; /* 念押し */
  color: var(--text) !important;
  border-color: var(--border) !important;
}
/* 万が一クラス違いのダイアログにも適用 */
[role="dialog"] {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}
/* iOS Safari 検出の保険 */
@supports (-webkit-touch-callout: none) {
  .modal, .modal header, .modal .content, [role="dialog"] {
    background-color: var(--bg) !important;
  }
}