:root{
    --bg:#ffffff;
    --text:#0b1220;
    --muted:#5b6475;
    --line:rgba(12, 24, 55, .12);
    --card:#f7f8fb;
    --blue:#0b2a6f;
    --blue2:#0a1f4f;
    --focus:rgba(11,42,111,.18);
    --radius:18px;
    --max: 920px;

    /* フォーム側で参照していた未定義変数を補完 */
    --stroke: rgba(12, 24, 55, .12);
    --ink: var(--text);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                "Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP", sans-serif;
    color:var(--text);
    background:var(--bg);
    line-height:1.65;
}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 18px}
.topbar{
    position:sticky; top:0; z-index:10;
    background:rgba(255,255,255,.86);
    backdrop-filter:saturate(180%) blur(10px);
    border-bottom:1px solid var(--line);
}
.topbar-inner{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:12px 0;
}
.brand{
    display:flex; align-items:center; gap:10px;
    min-width: 160px;
}
.logo-img{
    width:28px;
    height:28px;
    border-radius:9px;
    object-fit:contain;
    display:block;
    margin-left:14px;
}
.brand .name{font-weight:700; letter-spacing:.2px}
nav{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.navlink{
    padding:8px 10px;
    border-radius:12px;
    color:var(--muted);
    border:1px solid transparent;
}
.navlink:hover{color:var(--blue); background:rgba(11,42,111,.06)}
.navlink:focus-visible{
    outline:2px solid var(--focus);
    outline-offset:2px;
    border-color:rgba(11,42,111,.22);
}

header.hero{padding:32px 0 18px}
h1{
    margin:0px 0 10px;
    font-size: clamp(30px, 4vw, 44px);
    line-height:1.15;
    letter-spacing:-.02em;
}
.lead{
    margin:0;
    color:var(--muted);
    font-size: clamp(15px, 1.7vw, 18px);
    max-width: 80ch;
}

section{
    padding:44px 0;
    scroll-margin-top: 86px;
}
.sectionTitle{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:12px; flex-wrap:wrap;
    margin-bottom:14px;
}
h2{
    margin:0;
    font-size: clamp(20px, 2.2vw, 26px);
    letter-spacing:-.01em;
}

.grid1{display:grid; grid-template-columns: 1fr; gap:12px}
.step{
    display:flex; gap:12px; align-items:flex-start;
    padding:14px;
    border-radius:16px;
    border:1px solid rgba(11,42,111,.10);
    background:#fff;
}
.badge{
    flex:0 0 auto;
    width:28px; height:28px;
    border-radius:5px;
    background:rgb(117, 117, 117,0.5);
    color:var(--blue);
    display:flex; align-items:center; justify-content:center;
    font-weight:700;
}
.step h3{margin:0 0 4px; font-size:15px}
.step p{margin:0; color:var(--muted); font-size:14px}

.card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:18px;
}

/* フォーム */
form{display:grid; gap:12px; margin-top:10px}
label{font-size:13px; font-weight:800}
input, textarea, select{
    width:100%;
    padding:12px 12px;
    border:1px solid var(--stroke);
    border-radius:14px;
    background:#fff;
    font: inherit;
    outline:none;
}
textarea{min-height:140px; resize:vertical}
input:focus, textarea:focus, select:focus{
    border-color: rgba(11,42,111,.40);
    box-shadow: 0 0 0 4px rgba(11,42,111,.10);
}
.form-row{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
@media (max-width: 640px){ .form-row{grid-template-columns:1fr} }
.form-actions{
    display:flex; gap:10px; flex-wrap:wrap; align-items:center;
    margin-top:6px;
}
.btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap:8px;
    padding:10px 14px;
    border-radius:14px;
    border:1px solid rgba(11,42,111,.22);
    background:#fff;
    color:var(--blue);
    font-weight:600;
    cursor:pointer;
}
.btn.primary{
    background:linear-gradient(135deg, var(--blue), var(--blue2));
    border-color:transparent;
    color:#fff;
}
.btn:focus-visible{outline:2px solid var(--focus); outline-offset:3px}
.small{font-size:12px; color:var(--muted); margin:0}

.toast{
    display:none;
    margin-top:10px;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid var(--stroke);
    background:rgba(11,42,111,.04);
    color:var(--ink);
    font-size:13px;
}
.toast.show{display:block}
footer{
    padding:34px 0 44px;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:13px;
}
@media (min-width: 980px){
    header.hero{padding:32px 0 22px}
    section{padding:54px 0}
}
    .supportRow{
    display:grid; grid-template-columns: 1fr;
    gap:12px;
}
.supportItem{
    background:#fff;
    border:1px solid rgba(11,42,111,.10);
    border-radius:16px;
    padding:14px;
}
.supportItem .label{
    font-size:12px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--blue);
    margin:0 0 6px;
}
.supportItem p{margin:0; color:var(--muted); font-size:14px}
.copyRow{
    display:flex; gap:10px; flex-wrap:wrap; align-items:center;
    margin-top:12px;
}



/* Screenshots: always one horizontal row */
.shots{
  margin-top: 18px;

  display: flex;
  gap: 12px;

  overflow-x: auto;
  padding-bottom: 6px;

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.shots img{
  flex: 0 0 auto;

  /* 表示サイズ（ここで横幅を制御） */
  width: 285px;                 /* ←好みで調整 */
  aspect-ratio: 1320 / 2868;    /* 元画像比率（縦長） */

  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fff;

  scroll-snap-align: start;
}


/* Step text readability */
.step-text p{
  margin: 0;
  margin-top: 6px;

  /* ぶら下がりインデント */
  padding-left: 1.4em;
  text-indent: -1.1em;

  line-height: 1.8;
  color: var(--muted);
}

/* 文頭にダッシュを付ける */
.step-text p::before{
  content: "— ";
  font-weight: 600;
  color: var(--blue);
}
.step-text2 p{
  margin: 0;
  margin-top: 6px;

  /* ぶら下がりインデント */
  padding-left: 2em;
  text-indent: -1.1em;

  line-height: 1.8;
  color: var(--muted);
}
.step-text3 p{
  margin: 0;
  margin-top: 6px;

  /* ぶら下がりインデント */
  padding-left: 1em;
  text-indent: 0em;

  line-height: 1.8;
  color: var(--muted);
}

.privacy-link{
  color: #8d8d27;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.privacy-link:hover{
  color: #f7f735;
}
.privacy-link::after{
  content: " ↗";
  font-size: 0.9em;
}
.terms-link{
  color: #8d8d27;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.terms-link:hover{
  color: #f7f735;
}
.terms-link::after{
  content: " ↗";
  font-size: 0.9em;
}
.link{
  color: #8d8d27;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link:hover{
  color: #f7f735;
}
.link::after{
  content: " ↗";
  font-size: 0.9em;
}

.hint{
  margin-left: auto;
  text-align: right;
  color: var(--muted);
}



/* レイアウト：ブランド左、ナビ右 */
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.topbar-right{
  margin-left:auto;
  display:flex;
  align-items:center;
}
.topbar-actions{
  display:flex;
  align-items:center;
}

/* ====== トグル（Bootstrap風の☰） ====== */
.nav-toggle{
  display:none;
  width:44px;
  border:none;
  background:transparent;
  cursor:pointer;
}


.nav-toggle-icon{
  display:block;
  width:20px;
  height:14px;
  margin:0 auto;
  position:relative;
}
.nav-toggle-icon::before,
.nav-toggle-icon::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:rgba(0,0,0,.65);
  border-radius:2px;
}
.nav-toggle-icon::before{ top:0; box-shadow:0 6px 0 rgba(0,0,0,.65), 0 12px 0 rgba(0,0,0,.65); }
.nav-toggle-icon::after{ display:none; } /* 予備 */

/* ====== 通常（広い画面） ====== */
/* nav（大画面は横並び） */
.nav-collapsible{
  display:flex;
  align-items:center;
  gap:16px;
}



/* ====== 小画面：Bootstrapのcollapse風 ====== */
@media (max-width: 850px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }

  /* ナビは右上からドロップダウン */
  .nav-collapsible{
    position:absolute;
    top: calc(100% + 6px);  /* ★ ここを追加（4〜12pxで調整） */
    right:12px;
    left:12px;

    display:block;
    background:#151515;
    border:1px solid rgba(0,0,0,.12);
    border-radius:14px;
    padding:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.10);

    max-height:0;
    overflow:hidden;
    opacity:0;
    transform: scaleY(.98);
    transform-origin: top;
    transition: max-height .22s ease, opacity .18s ease, transform .18s ease;

    z-index:20;
  }

  .nav-collapsible .navlink{
    display:block;
    padding:10px 10px;
    border-radius:10px;
  }
  .nav-collapsible .navlink:hover{
    background: rgba(0,0,0,.04);
  }

  /* 開き状態（JSで .is-open を付与） */
  .nav-collapsible.is-open{
    max-height:70vh;
    opacity:1;
    transform: scaleY(1);
  }

  /* 背景（外側クリックで閉じる） */
  .nav-backdrop{
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.18);
    z-index: 10;
  }

  /* navを前面に */
  .nav-collapsible{
    z-index: 20;
  }

  /* topbar-innerがabsolute基準になるように */
  .topbar-inner{ position:relative; }
}

/* ENリンクは常時右側に */
.nav-lang-fixed{
  margin-left: 8px;
}

/* 小画面でも表示を維持 */
@media (max-width: 850px){
  .nav-lang-fixed{
    display: inline-block;
  }
}
/* =========================
   JP/ENで右上の幅が揺れて ☰ が動く問題の固定
   ========================= */

/* 右上（☰ + 言語）を“固定幅の並び”にする */
.topbar-actions{
  display:flex;
  align-items:center;
  gap:6px;          /* ☰ と EN/JP の間隔を固定 */
  flex:0 0 auto;
}

/* ☰ のタップ領域と描画領域を固定（高さが未指定で揺れるのを防ぐ） */
.nav-toggle{
  width:44px;
  height:36px;
  padding:6px;

  border:none;
  background:transparent;
}

/* 言語リンクを“固定サイズのボタン”として扱い、EN/JPで幅が変わらないようにする */
.nav-lang-fixed{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;

  height:36px;       /* ☰ と揃える */
  min-width:44px;    /* ★ここが肝：EN/JPで当たり判定（枠）が一致する */
  padding:0 10px;    /* 既存 navlink の雰囲気を保つ */
  line-height:1;
  margin-left:0;     /* gapで管理するのでmarginは無効化 */
}

/* 念のため：トップバー内の nav は折り返さない（行折返しによる幅の揺れ対策） */
.topbar nav{
  flex-wrap:nowrap;
}



/* =========================================================
   KeyBindControl Dark Theme (always-on)
   Light/Dark 切替は使わず、常にダーク配色にする
   ========================================================= */
:root{
  /* 背景・文字 */
  --bg:#0f0f0f;          /* iOS ダーク相当 */
  --text:#e6e6e6;
  --muted:#a6a6a6;

  /* サーフェス */
  --card:#1a1a1a;
  --line:rgba(255,255,255,.10);
  --stroke:rgba(255,255,255,.14);

  /* アクセント（既存設計を壊さないため青は保持） */
--blue: #8f8f8f;
--blue2:#6f6f6f;

  /* フォーカス */
  --focus:rgba(90,162,255,.25);

  /* 既存互換 */
  --ink: var(--text);
}
/* 白固定の最小補正（色のみ） */
body{ background: var(--bg); }

.step,
.supportItem,
input, textarea, select,
.shots img{
  background: var(--card);
  border-color: var(--line);
  color: var(--text);
}

/* topbar の白ガラス */
.topbar{
  background: rgba(15,15,15,.86);
  border-bottom: 1px solid var(--line);
}

/* ☰ が黒固定なので文字色に追従させる */
.nav-toggle-icon::before,
.nav-toggle-icon::after{
  background: rgba(230,230,230,.65);
}
.nav-toggle-icon::before{
  box-shadow:
    0 6px 0 rgba(230,230,230,.65),
    0 12px 0 rgba(230,230,230,.65);
}
/* ===== ドロップダウン ===== */
.nav-dropdown{
  position: relative;
}

/* トグル（How to Use） */
/* dropdown toggle を通常の navlink と完全に揃える */
.nav-dropdown-toggle{
  appearance: none;
  -webkit-appearance: none;

  font: inherit;
  line-height: inherit;

  color: var(--muted);        /* ★ navlink と同じ色 */
  background: transparent;   /* ★ 白くなる原因を除去 */

  padding: 8px 10px;
  margin: 0;

  border: 0;
  text-align: left;

  display: inline-flex;
  align-items: center;
}



/* メニュー本体 */
.nav-dropdown-menu{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;

  min-width: 200px;
  padding: 8px;

  background: var(--card);

  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);

  display: none;
  z-index: 30;
}

/* サブリンク */
.nav-sub{
  display: block;
  padding: 4px 4px;
  font-size: 12px;
  color: var(--muted);
  border-radius: 10px;
}
.nav-sub:hover{
  background: rgba(255,255,255,.06);
  color: var(--text);
}

/* 開いた状態 */
.nav-dropdown.is-open .nav-dropdown-menu{
  display: block;
}
.nav-dropdown-menu .navlink.nav-sub{
  padding: 6px 10px;   /* ←ここを詰める */
  line-height: 1.25;   /* ←行間も詰める */
}

@media (max-width: 850px){
  .nav-collapsible.is-open{
    overflow: visible;
    max-height: none;
    transform: none;
  }
  .topbar, .topbar-inner{
    overflow: visible;
  }
}

/* 既存style.cssを前提に、downloadページでのみ足りない分を補う最小CSS */
    .download-hero { padding: 36px 0 10px; }
    .download-hero h1 { margin: 0 0 8px; }
    .download-hero .lead { max-width: 70ch; }

    .download-grid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 18px;
      margin-top: 18px;
    }
    @media (max-width: 900px){
      .download-grid{ grid-template-columns: 1fr; }
    }

    .download-card{
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 16px;
      padding: 16px;
      background: rgba(255,255,255,.03);
    }
    .download-card h3{ margin-top: 0; }

    .meta{
      display:grid;
      grid-template-columns: 160px 1fr;
      gap: 8px 12px;
      margin: 12px 0 14px;
      font-size: 14px;
      opacity: .95;
    }
    .meta dt{ opacity: .75; }
    .meta dd{ margin:0; word-break: break-word; }

    .btnrow{
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
      align-items:center;
      margin-top: 8px;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-decoration:none;
      border-radius: 12px;
      padding: 0px 14px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: inherit;
      font-weight: 650;
      min-height: 34px;
    }
    .btn.primary{
      border-color: rgba(255,255,255,.18);
      background: rgba(90,130,255,.25); /* 既存テーマに合わせて必要なら削除/変更 */
    }
    .btn.secondary{
      background: rgba(255,255,255,.04);
    }

    .note{
      font-size: 13px;
      opacity: .8;
      margin-top: 10px;
      line-height: 1.6;
    }

    .steps ol{ margin: 0; padding-left: 18px; }
    .steps li{ margin: 8px 0; }

    .callout{
      font-size: 14px;
      border-left: 3px solid rgba(90,130,255,.6);
      padding: 10px 12px;
      background: rgba(90,130,255,.10);
      border-radius: 12px;
      margin-top: 12px;
    }

    .smalllinks a{ text-decoration: none; }
    .smalllinks a:hover{ text-decoration: underline; }

    .history{
      margin-top: 12px;
      border-top: 1px solid rgba(255,255,255,.08);
      padding-top: 12px;
    }
    .history ul{ margin: 0; padding-left: 18px; }
    .history li{ margin: 6px 0; }
    code.kbd{
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
      padding: 1px 6px;
      border-radius: 8px;
      font-size: .95em;
    }
    .history ul {
      line-height: 1.6;
      max-height: calc(1.6em * 4);
      overflow-y: auto;
      padding-right: 8px;
    }


  .btn-download-mac {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 2px 18px;
  border-radius: 10px;
  background: #d6d6d6;
  color: #313131;
  font-weight: 600;
  text-decoration: none;
}

.icon-download {
  width: 35px;        /* 大きくしてOK */
  height: 40px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-link {
  width: 28px;
  height: 18px;
  display: inline-block;

  stroke: currentColor;
  stroke-width: 2;
  fill: none;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.download-buttons {
  display: flex;
  gap: 24px;           /* 横並び時の余白 */
  margin-top: 24px;
}

@media (max-width: 640px) {
  .download-buttons {
    flex-direction: column;
    gap: 16px;         /* 縦並び時の行間 */
  }
}
/* ===== Tokusho table (minimal) ===== */
.tokusho-table{
  width:100%;
  border-collapse: collapse;
}
.tokusho-table th,
.tokusho-table td{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  vertical-align: top;
}
.tokusho-table th{
  width: 260px;
  text-align:left;
  color: var(--muted);
  font-weight: 700;
}
@media (max-width: 640px){
  .tokusho-table th{ width: 40%; }
}