/* ===== Best One / Tweaks (strong selectors) ===== */

/* 769–1023px：ヘッダー左右をきっちり整列（100vw禁止） */
@media (min-width:769px) and (max-width:1023.98px){
  html body #main_vis > header.g-nav,
  html body .g-nav{
    width:100% !important;
    left:auto !important;
    right:auto !important;
  }

  html body #main_vis > header.g-nav .header_inner{
    display:grid !important;                   /* ← FlexでもOK。Gridのままにしてます */
    grid-template-columns: 1fr auto !important;
    align-items:center !important;
    justify-content:stretch !important;

    width:100% !important; max-width:none !important;
    box-sizing:border-box !important;
    margin:0 !important; padding:16px 18px !important;

    position:relative !important;
    inset:auto !important;                     /* top/right/bottom/left を全解除 */
    transform:none !important;
  }

  /* 子は通常フローへ（座標/変形の“残り香”を排除） */
  html body #main_vis > header.g-nav .header_left,
  html body #main_vis > header.g-nav .header_right,
  html body #main_vis > header.g-nav .drawer-toggle,
  html body #main_vis > header.g-nav .drawer-hamburger{
    position:static !important;
    inset:auto !important;
    transform:none !important;
    margin:0 !important;
    flex:0 0 auto !important;
  }

  /* ロゴの上下ズレ予防 */
  html body #main_vis > header.g-nav .header_left h1{ margin:0 !important; line-height:1 !important; }
  html body #main_vis > header.g-nav .header_left img{ display:block !important; height:auto !important; max-width:100% !important; }
}

/* 1024–1279px：微調整（必要なら高さ/パディングやY位置だけ） */
@media (min-width:1024px) and (max-width:1279.98px){
  html body #main_vis > header.g-nav .header_inner{
    padding:20px !important;                   /* ←スクショに出てたルールを踏襲 */
  }
  html body #main_vis > header.g-nav .drawer-toggle,
  html body #main_vis > header.g-nav .drawer-hamburger{
    transform:translateY(1px) !important;
  }
}

/* ≤1023px：ドロワーは右から。閉時は完全退避（bodyは drawer--right が正） */
@media (max-width:1023.98px){
  html body nav.drawer-nav{
    position:fixed !important;
    top:0; right:0; bottom:0; left:auto !important;
    width:min(86vw,450px) !important;
    transform:translateX(100%) !important;   /* 初期は画面外 */
    visibility:hidden !important;
    pointer-events:none !important;
    z-index:9999;
    will-change:transform;
  }
  html body.drawer--right.drawer-open  nav.drawer-nav{
    transform:translateX(0) !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  html body.drawer--right.drawer-close nav.drawer-nav{
    transform:translateX(100%) !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /* ULに入るtransformを無効化（横ズレ保険） */
  html body nav.drawer-nav .drawer-menu{
    transform:none !important;
    transition:none !important;
  }
}
/* ====== 769–1279px のズレを根こそぎ無効化して左右をきっちり揃える ====== */

/* 1) ヘッダー本体はヒーローの上に“全幅で”重ねる（変形/オフセット禁止） */
@media (min-width:769px) and (max-width:1279.98px){
  #main_vis > header.g-nav{
    position:absolute; top:0; left:0; right:0;
    width:100% !important; margin:0 !important;
    background:transparent !important; transform:none !important;
    z-index:999;
  }

  /* 2) 行コンテナ：絶対配置や transform の“残り香”を全解除＋全幅行に */
  #main_vis > header.g-nav .header_inner{
    position:relative !important;
    display:flex !important; align-items:center !important; justify-content:space-between !important;
    width:100% !important; max-width:none !important; box-sizing:border-box !important;
    margin:0 !important; padding:20px !important;
    left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
    transform:none !important; overflow:visible !important;
  }

  /* 3) 子要素は通常フローに固定（座標/変形を一切使わない） */
  #main_vis > header.g-nav .header_left,
  #main_vis > header.g-nav .header_right,
  #main_vis > header.g-nav .drawer-toggle,
  #main_vis > header.g-nav .drawer-hamburger{
    position:static !important; margin:0 !important;
    transform:none !important; flex:0 0 auto !important;
  }
}

/* ====== ドロワー（右出し）を“閉時は完全退避／開時だけ表示”に統一 ====== */
@media (max-width:1279.98px){
  #menu.drawer-nav, nav.drawer-nav{
    position:fixed !important; top:0; right:0; bottom:0; left:auto !important;
    width:min(86vw,450px) !important; z-index:10000; will-change:transform;
  }

  /* 初期＝閉じてる時は必ず画面外＆触れない（フェールセーフ込み） */
  body:not(.drawer-open):not(.drawer-active) #menu.drawer-nav,
  body:not(.drawer-open):not(.drawer-active) nav.drawer-nav,
  body.drawer-right.drawer-close         #menu.drawer-nav,
  body.drawer-right.drawer-close         nav.drawer-nav{
    transform:translateX(100%) !important;
    visibility:hidden !important; pointer-events:none !important;
    transition:none !important;
  }

  /* 開いた時だけ中へ入れる（open/active どちらでも反応） */
  body.drawer-open  #menu.drawer-nav,
  body.drawer-active#menu.drawer-nav,
  body.drawer-open  nav.drawer-nav,
  body.drawer-active nav.drawer-nav{
    transform:translateX(0) !important;
    visibility:visible !important; pointer-events:auto !important;
  }

  /* UL の transform を殺して“押し出し”を予防 */
  #menu.drawer-nav .drawer-menu,
  nav.drawer-nav  .drawer-menu{
    transform:none !important; transition:none !important;
  }
}
/* 理由セクションの見出し */
#reason h2 {
  text-align: center;
  font-weight: 700;
  line-height: 1.3;
  font-size: clamp(28px, 4vw, 40px); /* PC～スマホで可変 */
  color: #2A8BCB;
  margin: 0 0 8px;
}

/* 理由セクションのサブテキスト */
#reason .reason_sub {
  text-align: center;
  font-size: clamp(16px, 2.5vw, 22px); /* PCは大きめ、スマホは小さめ */
  color: #2A8BCB;
  margin-bottom: 24px;
}
/* ============================
   「ベストワンが選ばれる理由」だけに限定した上書き
   ============================ */

/* 見出し（h2）をこのセクションだけリセット */
#reason > h2{
  /* 全体の -100px を打ち消す */
  margin-top: 0 !important;
  /* アンカー余白は維持（FV直下でも食い込まない） */
  padding-top: clamp(60px, 6vw, 100px);
  /* PC/タブレット/スマホで自然に伸縮 */
  font-size: clamp(28px, 4.6vw, 56px);
  line-height: 1.25;
  position: relative;
  text-align: center;
}

/* 矢印は h2 の直下に来るよう “h2の下端基準” で配置し直す */
#reason > h2::after{
  z-index: 0;                 /* 背面に潜らないように  */
  width: clamp(24px, 3.2vw, 40px);
  height: clamp(24px, 3.2vw, 40px);
  top: calc(100% + 14px);     /* ← h2の下から14px下に置く */
  left: 50%;
  transform: translateX(-50%);
  background-image: url("img/h2_item.png"); /* 既存画像をそのまま使用 */
  background-size: contain;
}

/* サブテキスト（h2の直後に置く <p class="reason-sub">） */
#reason .reason-sub{
  margin: 8px auto 48px;      /* h2との間隔 / 下のカードとの間隔 */
  font-size: clamp(14px, 2.0vw, 18px);
  line-height: 1.7;
  color: #5b8ea8;             /* h2の青に合う落ち着いた色 */
  text-align: center;
}

/* スマホで少しだけコンパクトにする場合（任意） */
@media (max-width: 768px){
  #reason > h2{
    font-size: clamp(24px, 6vw, 32px);
    padding-top: 60px;
  }
  #reason > h2::after{
    top: calc(100% + 10px);
    width: 28px; height: 28px;
  }
  #reason .reason-sub{ margin-bottom: 36px; }
}
/* ▼ 理由セクション：見出しとサブテキストの共通調整 */
#reason h2 {
  color:#2491CC;
  font-weight:700;
  font-size:clamp(28px, 5.2vw, 46px);
  text-align:center;
  margin:0 auto 18px;
  line-height:1.2;
  position:relative;
}

/* 既存の矢印を全帯で非表示（間延び回避） */
#reason h2::after { display:none !important; }

/* サブテキスト */
#reason .reason-sub {
  text-align:center;
  color:#2a91cc;
  opacity:.95;
  font-size:clamp(14px, 1.6vw, 18px);
  line-height:1.7;
  margin:6px auto 24px;
}

/* 320px 帯だけさらに微調整（折返し・行間を詰める） */
@media (max-width: 360px) {
  #reason h2 { font-size:26px; margin-bottom:12px; }
  #reason .reason-sub {
    font-size:13px;
    line-height:1.55;
    margin:4px auto 18px;
    word-break:keep-all;
  }
}
/* ----------------------------------------
   Reason セクション（#reason）だけの h2 とサブ見出しを上書き
   style.css のグローバル h2 をこの範囲だけ無効化/上書きする
----------------------------------------- */

/* PC/タブ共通のベース（まず position や余白をリセット気味に） */
#reason h2 {
  position: relative;   /* グローバル h2 の position を引き継ぐ想定 */
  margin-top: 0 !important;      /* グローバルの -100px を打ち消し */
  padding-top: 60px;              /* アンカー用の余白だけ残す（必要量） */
  text-align: center;
  font-weight: 700;
  color: #2491CC;
  /* PCでは従来と同等の見え方に */
  font-size: clamp(34px, 3.4vw, 56px);
}

#reason .reason_sub {
  text-align: center;
  line-height: 1.7;
  color: #2491CC;
  /* PCでは従来と同等の見え方に */
  font-size: clamp(16px, 1.6vw, 20px);
  margin: 0 auto 24px;
}

/* 矢印アイコン（h2:after）を Reason では消す  */
#reason h2::after { content: none !important; }

/* -------------------------
   SP（幅が狭い時を強めに調整）
   320帯の実測に合わせる
-------------------------- */
@media (max-width: 360px) {
  #reason h2 {
    /* 実測ベース：25px がジャスト */
    font-size: 25px !important;
    /* 余白が空きすぎるので −24px で微調整 */
    margin-top: -24px !important;
    /* アンカー余白は 60px で維持（必要なければ 0 に） */
    padding-top: 60px !important;
  }

  #reason .reason_sub {
    /* 実測ベース：14px がジャスト */
    font-size: 14px !important;
    line-height: 1.6;
    margin-bottom: 16px;
  }
}

/* 必要なら 375〜414px 帯もなめらかに（任意） */
@media (min-width: 361px) and (max-width: 414px) {
  #reason h2 { font-size: 26px; margin-top: -16px; }
  #reason .reason_sub { font-size: 15px; }
}
/* ============ REASON 見出し ============ */

/* 基本（全帯）— 既存値を上書きするためセレクタを強めに */
#reason h2 {
  font-size: clamp(25px, 3.2vw, 56px) !important;  /* 25px 〜 PC56px */
  text-align: center;
}

/* 320px帯（iPhone SE等）— 改行・余白の最適化 */
@media (max-width: 374.98px) {
  #reason h2 { font-size: 25px !important; margin-top: -24px; } /* 画面上の余白を詰める */
  #reason .reason_sub { font-size: 14px !important; line-height: 1.7; }
}

/* 375–479px帯（iPhone mini/8等）— ほんの少しだけ詰める */
@media (min-width: 375px) and (max-width: 479.98px) {
  #reason h2 { margin-top: -12px; }
}

/* 768px帯（タブレット）— 見出しが大きすぎるケースの保険 */
@media (min-width: 768px) and (max-width: 1023.98px) {
  #reason h2 { font-size: clamp(34px, 3.4vw, 56px) !important; }
}
/* ============ 料金テーブル（contents3_inner） ============ */

.contents3_inner table {
  width: 100%;
  table-layout: fixed;     /* 幅を安定させる */
}

.contents3_inner th,
.contents3_inner td {
  vertical-align: middle;
}

/* バッジの体裁（既存があれば上書き） */
.contents3_inner td .muryo,
.contents3_inner td .yuryo {
  display: inline-block;
  padding: .28em .6em;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;     /* 2行化を防ぐ */
}

/* 320px帯：文字とパディングを小さめに */
@media (max-width: 374.98px) {
  .contents3_inner th,
  .contents3_inner td { padding: 8px 6px; font-size: 13px; }
  .contents3_inner td .muryo,
  .contents3_inner td .yuryo { font-size: 12px; padding: .22em .5em; }
}

/* 375–479px帯：少し余裕を持たせる */
@media (min-width: 375px) and (max-width: 479.98px) {
  .contents3_inner th,
  .contents3_inner td { padding: 10px 8px; font-size: 14px; }
  .contents3_inner td .muryo,
  .contents3_inner td .yuryo { font-size: 12.5px; }
}
#reason .reason_sub {
  font-size: clamp(14px, 1.6vw, 23px);
  line-height: 1.6;
  text-align: center;
  margin-top: -4px; /* 必要に応じて調整 */
}
/* 固定ページ用ロゴ調整 */
.page-logo-bar .site-logo {
  display: inline-block;
  font-size: 0;       /* テキストを消す */
  line-height: 0;
}

.page-logo-bar .site-logo img {
  max-width: 160px;   /* 少し小さめでスマートに */
  height: auto;
}
/* プライバシーポリシー（例: page-id-3）だけテキストロゴを隠す */
.page-id-3 .header_left { display: none; }

/* シンプルロゴ（page-logo-bar）を左上に小さく配置 */
.page-id-3 .page-logo-bar {
  position: absolute;     /* ヘッダー内の左上に固定 */
  left: 16px;
  top: 12px;
  z-index: 10;
}
.page-id-3 .page-logo-bar img {
  height: 40px;           /* PCのFVくらいのサイズ感 */
  width: auto;
}

/* SPはもう少し小さく */
@media (max-width: 768px) {
  .page-id-3 .page-logo-bar img {
    height: 28px;
  }
}
/* 画像ロゴのバーを左上に配置。上にくっつくのを防ぐための余白も付与 */
body.page .page-logo-bar{
  max-width: 1200px;
  margin: 16px auto 0;   /* ← 上に8pxのマージン。足りなければ 12～16px に調整 */
  padding: 8px 16px;
  text-align: left;
}

body.page .page-logo-bar .site-logo{
  display: inline-block;
  line-height: 1;
}
body.page .page-logo-bar .site-logo img{
  height: 44px;         /* PC時 “小さめ” */
  width: auto;
}

/* スマホはさらにコンパクトに */
@media (max-width: 768px){
  body.page .page-logo-bar{ margin-top: 8px; padding: 0px 12px; }
  body.page .page-logo-bar .site-logo img{ height: 36px; }
}
/* ── SP：フッターの「プライバシーポリシー」ボタンが
   固定LINEバナーに隠れないように下余白を確保 ───────── */
@media (max-width: 768px) {
  /* ボタンブロックの下に、バナーの高さぶん+安全領域を確保 */
  .bestone-legal-wrap {
    margin: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 96px) !important;
    position: relative;
    z-index: 3; /* 念のため重なり順も上に */
  }
  /* ボタン自体の重なり順も上げておく（保険） */
  .bestone-legal-button {
    position: relative;
    z-index: 3;
  }
  /* もしフッター側で下詰めになっている場合に備えて */
  footer {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
  }
}