:root{
  --brand:#DF8D30;      /* くすみオレンジ */
  --base:#f5f3ec;       /* 生成り（ヒーローテキスト色） */
  --ink:#1f2937;        /* 本文 */
  --navy:#162e66;       /* 英字見出し */
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{  background:var(--base);  color:var(--ink);  font-family:"Montserrat","Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;  letter-spacing:.02em;}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.mt-10{margin-top:2.5rem}
.mt-12{margin-top:3rem}
.pb-16{padding-bottom:4rem}
.pb-24{padding-bottom:6rem}
.br-md{display:none}
@media (min-width:768px){.br-md{display:inline}}


/* ===== Header（固定＋ハンバーガー） ===== */
.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.93);backdrop-filter:blur(8px);border-bottom:1px solid #e5e7eb}
.header-inner{max-width:1200px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
.logo{width:120px;height:auto;border-radius:14px;}
@media (max-width:768px){.logo{width:90px}}

.gnav{display:flex;gap:24px}
.gnav a{margin:0;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#111;text-decoration:none}
.gnav a:hover{color:var(--brand)}
/* ヘッダー（英・日）を明示的に固定 */
.gnav .en{
  font-family: "Montserrat", "Noto Sans JP", system-ui, sans-serif;
  font-weight: 600;           /* ← 英字の太さを固定 */
}

.gnav .ja{
  font-family: "Noto Sans JP", "Montserrat", system-ui, sans-serif;
  font-weight: 400;           /* ← 日本語は読みやすい標準太さに */
}

/* 念のためロゴ画像以外のテキストも揃えたい場合 */
.site-header{
  font-family: "Montserrat", "Noto Sans JP", system-ui, sans-serif;
}



/* ハンバーガー */
.menu-toggle{display:none;position:relative;width:40px;height:32px;border:0;background:transparent;cursor:pointer}
.menu-toggle span{position:absolute;left:6px;right:6px;height:2px;background:#111;transition:transform .25s,opacity .25s,top .25s}
.menu-toggle span:nth-child(1){top:8px}
.menu-toggle span:nth-child(2){top:15px}
.menu-toggle span:nth-child(3){top:22px}
.menu-toggle.is-open span:nth-child(1){top:15px;transform:rotate(45deg)}
.menu-toggle.is-open span:nth-child(2){opacity:0}
.menu-toggle.is-open span:nth-child(3){top:15px;transform:rotate(-45deg)}
.nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:998}

@media (max-width:768px){  .menu-toggle{display:block}  .header-inner{height:60px}  .gnav{
    position:fixed; z-index:999; inset:0 0 0 auto;
    top:60px; width:min(80vw,320px); height:calc(100vh - 60px);
    display:flex; flex-direction:column; gap:0;
    padding:20px; background:#fff; border-left:1px solid #e5e7eb;
    transform:translateX(100%); transition:transform .25s ease;
  }
  .gnav a{padding:14px 4px; font-size:15px; border-bottom:1px solid #f1f1f1}
  .gnav.is-open{transform:translateX(0)}
}

/* ===== GNAV（英語＋日本語を縦積み）共通 ===== */
.gnav > ul{
  display:flex;
  gap:32px;                 /* メニュー間の余白 */
  align-items:center;
  margin:0;
  padding:0;
  list-style:none;
}

.gnav li{ display:block; }

.gnav a{
  display:flex;
  flex-direction:column;    /* 上：英語 / 下：日本語 */
  align-items:center;
  text-decoration:none;
  line-height:1;
}

/* 英語(上) */
.gnav .en{
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#111;
}

/* 日本語(下) */
.gnav .ja{
  margin-top:6px;
  font-size:11px;
  letter-spacing:0;
  color:#9f9f9f;
}

/* ホバーで両方同色に */
.gnav a:hover .en,
.gnav a:hover .ja{
  color:var(--brand);
}

/* ===== ドロワー（モバイル） ===== */
@media (max-width:768px){
  .gnav > ul{
    flex-direction:column;
    gap:0;
  }
  .gnav a{
    align-items:flex-start;
    padding:14px 4px;
    width:100%;
    border-bottom:1px solid #f1f1f1;
  }
  .gnav .en{ font-size:15px; }
  .gnav .ja{ font-size:12px; margin-top:2px; }
}

/* メニュー開時は画面スクロールを止める */
body.no-scroll { overflow: hidden; }


/* ===== Footer（リッチ版） ===== */
.bg-dark{background:#0b162f;color:#fff}
.footer-grid{
  max-width:1200px;margin:0 auto;padding:48px 16px;
  display:grid;gap:28px;grid-template-columns:1fr;
}
@media (min-width:900px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr}}

.footer-brand .brand-row{display:flex;gap:12px;align-items:center}
.footer-logo{width:48px;height:auto;border-radius:10px;background:#fff}
.brand-name{font-weight:700}
.brand-copy{font-size:12px;color:#cbd5e1}

.footer-info{list-style:none;margin:14px 0 0;padding:0;font-size:14px;color:#e5e7eb}
.footer-info a{color:#fff;text-decoration:underline}

.footer-title{font-weight:700;margin-bottom:10px}
.footer-nav{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px}
.footer-nav a{color:#fff;text-decoration:none}
.footer-nav a:hover{text-decoration:underline}

.footer-sns{display:flex;gap:12px;margin-top:6px}
.footer-cta{margin-top:12px;display:flex;gap:8px}
.btn-light{background:#fff;color:#111;padding:.6rem 1rem;border-radius:12px;text-decoration:none;font-size:14px}
.btn-ghost{border:1px solid rgba(255,255,255,.45);color:#fff;padding:.6rem 1rem;border-radius:12px;text-decoration:none;font-size:14px}

.footer-copyline{border-top:1px solid #2a2a2a;text-align:center;padding:14px 0;font-size:12px;color:#cbd5e1}

/* メニュー開時はスクロール抑止 */
.body-lock{overflow:hidden}

@media (max-width:768px){
  .gnav{
    position:fixed; z-index:999; inset:0 0 0 auto;
    top:60px; width:min(80vw,320px); height:calc(100vh - 60px);
    transform:translateX(100%); transition:transform .25s ease;
    /* ほか padding/background/border-left などはあなたのままでOK */
  }
  .gnav.is-open{ transform:translateX(0) }
}
/* === SPドロワーメニューを左揃え（見た目は今の中心近く） === */
@media (max-width:768px){
  /* ドロワー自体の左余白を広げて“中央寄り左揃え”に見せる */
  nav#global-nav.gnav{
    padding-left: clamp(28px, 10vw, 72px) !important;
  }
  /* ←これが決め手：PCで付いた align-items:center を打ち消す */
  nav#global-nav.gnav > ul{
    align-items: flex-start !important;  /* 中央寄せ → 左寄せ */
    width: 100%;
  }
  /* Safari対策：liの幅も広げて左ラインを揃える */
  nav#global-nav.gnav li{ width: 100%; }

  /* 文字と下の日本語も左揃え＋タップ面を横幅いっぱいに */
  nav#global-nav.gnav a{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
  }
  nav#global-nav.gnav .en,
  nav#global-nav.gnav .ja{
    text-align: left !important;
  }
}

/* アプリ全体のスクロールはここだけに集約 */
#app {
  position: fixed;
  inset: 0;                    /* 画面いっぱい */
  overflow: auto;              /* ← スクロールはここでだけ発生 */
  overscroll-behavior: contain;/* ← 端で“伸びない” */
  -webkit-overflow-scrolling: touch; /* iOSでの慣性スクロール */
  background: #fff;            /* 念のため */
}

/* 画面の横は絶対にスクロールさせない */
html, body, #app { overflow-x: hidden; }
html, body, #app { overscroll-behavior-x: none; touch-action: pan-y; } /* 横パン無効(対応端末) */