: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:56px 0 18px}
h1{
    margin:14px 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:10px;
    background:rgba(11,42,111,.08);
    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:72px 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: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.privacy-link:hover{
  color: var(--blue2);
}
.privacy-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:#fff;
    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;
}