@charset "UTF-8";
/* Safariバージョン10.1~12.0対策 */
* {
  min-height: 0vw;
  min-height: 0;
}

/* ぜったい余白を出さない */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}


/* 画像リセット */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ボタンリンク調整 */
a {
  text-decoration: none;
}

/* 各セクションの見出し画像の間隔 */
section img + img {
  margin-top: 20px;
}

/* 固定フッターボタン */
.fixed-button img {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: block;
}

html, body {
  margin: 0;
  padding: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .wrapper__inner {
    width: 95%;
  }

  .car-buttons a {
    display: block;
    margin: 10px auto;
  }

  .fixed-button img {
    max-width: 100%;
  }
}
    body.hidden { visibility: hidden; }
    .loadingSpinner {
      position: fixed;
      top: 50%;
      left: 50%;
      font-size: 2em;
      transform: translate(-50%, -50%);
    }

    html body {
      overflow-x: hidden;
    }

.wrapper {
  position: relative;
  width: 560px;
  max-width: 100%;
  background-color: #fff;
  margin-inline: auto;
  box-sizing: border-box;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

    

/* ===== 共通変数 ===== */
:root{
  --rail: 750px;   /* 中央レール幅 */
  --pad: 16px;
  --pc-sep: 150px;    /* ← 中央750pxとの追加離隔（右側に余白を足す） */
  --pc-scale: 0.90;  /* ← 左パネルの縮小率（0.85〜0.95あたり） */
  --pc-gap-y: 30px;  /* ← 左パネル内の縦間隔 */
}

/* ===== ヘッダー：固定解除して中央750pxにだけ白帯 ===== */
.header{
  position: static;           
  top: auto; left: auto; right: auto;
  z-index: auto;
  background: transparent;
  transform: none !important;
}
.header-inner{
  width: min(100%, var(--rail));
  margin: 0 auto;
  padding: 10px var(--pad);
  height: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}
.header-inner img{ margin: 0 !important; }

/* ===== PC背景：.pc-headerは完全に背面、クリック不可 ===== */
.pc-header{
  position: fixed;
  inset: 0;
  z-index: -1;                 /* ← 背面へ */
  pointer-events: none;        /* ← クリック邪魔しない */
  background-image: url("https://area.nissan.co.jp/fair2/ni-nara/25/08/kessan_tokusen/common/img/background.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: auto;
}


@media (min-width: 1300px){
  .pc-header__container{ display:block; }
  .pc-content{
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: -1 !important;
    pointer-events: none !important;
    margin-top: 150px; 

    /* ガター幅 ＝（画面幅 - 750px）/2 から、任意の離隔をさらに引く */
    width: calc((100vw - var(--rail)) / 2 - var(--pc-sep));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--pc-gap-y);       /* ← バナー同士の縦の間隔 */
    padding-right: 0;           /* ここは距離調整を --pc-sep に一元化 */
    transform-origin: right top;
    transform: scale(var(--pc-scale));  /* ← サイズを小さく */
  }

  /* 念のための安全装置 */
  .pc-content img{
    max-width: 100%;
    height: auto;
  }
}

/* モバイルは背景ブロックを隠す */
@media (max-width: 1299.98px){
  .pc-header{ display:none; }
}

/* ===== 本文は常に前面 ===== */
main, .wrapper, .main-visual, .kei, .mini, .suv{
  position: relative;
  z-index: 1;
}

/* ===== 中身の実幅を統一（750px=パディング込み） ===== */
.main-content, .kei-content, .mini-content, .suv-content{
  width: min(100%, var(--rail));
  margin: 0 auto;
  padding-left: var(--pad); padding-right: var(--pad);
  box-sizing: border-box;
}


/* 横幅いっぱいの赤背景 */
.main-visual {
  background-color: #e11919;
  padding: 40px 0;
}

/* 中央寄せされたコンテンツ幅制限ボックス */
.main-content {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 各画像の間に余白 */
.main-content img {
  display: block;
  margin: 0 auto 30px;
}

/* 車種選択ボタンのスタイル */
.car-buttons {
  text-align: center;
  margin: 60px 0;
}

.car-buttons a {
  display: inline-block;
  margin: 4px auto;
}


/* 軽自動車セクション（ルークスとサクラ） */
.kei {
  background-color: #16a99d;
  padding: 40px 0;
  margin-top: 20px;
}

.kei-content {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px;
}

.kei-content  img {
  display: block;
  margin: 0 auto 40px;
}

/* ミニバンセクション（セレナ〜エルグランド） */
.mini {
  background-color: #4696cd;
  padding: 40px 0;
  margin-top: 20px;
}

.mini-content {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px;
}

.mini-content  img {
  display: block;
  margin: 0 auto 40px;
}

/* SUVセクション（エクストレイルとアリア） */
.suv {
  background-color: #b97db2;
  padding: 40px 0;
  margin-top: 20px;
}
.suv-content {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px;
}

.suv-content  img {
  display: block;
  margin: 0 auto 40px;
}


/* 📍 吹き出し画像を中央に */
.car-buttons img {
  display: block;
  margin: 0 auto 16px;
}

 .fixed-button {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      z-index: 999;
      transition: opacity 0.3s ease;
    }

.fixed-button img {
  width: 100%;
  max-width: 600px; /* ← 750pxより少し大きく */
  margin: 0 auto;
  display: block;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

.fixed-button::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: rgba(255,255,255,0);     /* 透明から */
  transition: background .18s ease;
  border-radius: 20px; /* 画像の角丸に合わせて調整 */
}
.fixed-button:hover::after{
  background: rgba(255,255,255,.12);   /* 薄い白ベール＝透けない */
}

/* 汎用ホバー：画像の余白は親に、白ベールは内側だけに */
.hover-dim{
  position: relative;
  display: block;
  width: max-content;      /* 画像実寸にフィット */
  max-width: 100%;         /* 親枠は超えない */
  margin: 0 auto 20px;     /* ← 画像の下余白は親で管理（調整OK） */
  line-height: 0;          /* 画像下のベースライン隙間を消す */
  overflow: hidden;        /* ベールはみ出し防止（BFCにもなる） */
  isolation: isolate;      /* stackingを安定させる（念のため） */
}

/* 画像には“余白を付けない”ことが超重要（既存の全体ルールを打ち消す） */
.hover-dim > img{
  display: block;
  width: 100%;
  height: auto;
  margin: 0 !important;    /* ← ここで確実に 0 にする */
}

/* 白ベール */
.hover-dim::after{
  content: "";
  position: absolute;
  inset: 0;                         /* 内側だけにフィット */
  background: rgba(255,255,255,0);  /* 初期は透明 */
  transition: background .25s ease;
  pointer-events: none;
  border-radius: inherit;           /* 角丸を親と一致させる */
}

.hover-dim:hover::after{
  background: rgba(255,255,255,.26); /* 濃さは 0.2〜0.35 で調整 */
}

/* 車種選択ボタン専用 */
.hover-dim-rounded {
  position: relative;
  display: block;
  width: max-content;      /* 画像実寸にフィット */
  max-width: 100%;         /* 親枠は超えない */
  margin: 0 auto 20px;     /* ← 画像の下余白は親で管理（調整OK） */
  line-height: 0;          /* 画像下のベースライン隙間を消す */
  border-radius: 50px;      /* ここで角丸の大きさ指定 */
  overflow: hidden;        /* ベールはみ出し防止（BFCにもなる） */
  isolation: isolate;      /* stackingを安定させる（念のため） */
}

/* 画像には“余白を付けない”ことが超重要（既存の全体ルールを打ち消す） */
.hover-dim-rounded > img{
  display: block;
  width: 100%;
  height: auto;
  margin: 0 !important;    /* ← ここで確実に 0 にする */
}

/* 白ベール */
.hover-dim-rounded::after{
  content: "";
  position: absolute;
  inset: 0;                         /* 内側だけにフィット */
  background: rgba(255,255,255,0);  /* 初期は透明 */
  transition: background .25s ease;
  pointer-events: none;
  border-radius: inherit;           /* 角丸を親と一致させる */
}

.hover-dim-rounded:hover::after{
  background: rgba(255,255,255,.26); /* 濃さは 0.2〜0.35 で調整 */
}

.suv { padding-bottom: 300px; } /* ボタンの高さ＋余白ぶん */

/* 車種画像を全てフルブリード化 */
.kei-content > img,
.mini-content > img,
.suv-content > img {
  display: block;
  width: calc(100% + var(--pad) * 2);  /* パディングぶん広げる */
  max-width: none;                     /* 750px制限を外す */
  margin-left: calc(var(--pad) * -1);  /* 左右にはみ出させる */
  margin-right: calc(var(--pad) * -1);
}

/* 全車種（軽・ミニバン・SUV）の線だけ内側に */
.kei-content img[alt="点線"],
.kei-content img[alt="実線"],
.mini-content img[alt="点線"],
.mini-content img[alt="実線"],
.suv-content img[alt="点線"],
.suv-content img[alt="実線"] {
  width: calc(100% - 32px); /* 両サイド16pxずつ内側に */
  margin: 0 auto 40px;      /* 中央寄せ＆下に余白 */
  display: block;
}
/* PCガターのバナーをクリック可能に */
@media (min-width: 1300px){
  .pc-content{
    z-index: 2 !important;        /* 本文(=z:1)より上に */
    pointer-events: auto !important; /* クリック復活 */
  }
  .pc-header{ z-index: 0; }       /* 背景は一番下でOK */
  .pc-content a{ display:block; }  /* 画像全体をリンクに */
  .pc-content a img{ pointer-events:none; } /* 画像上でもリンクに届くように */
}

/* 念のため：中央750pxエリアは常に前面（空間が被らない限りOK） */
main, .wrapper{ position:relative; z-index:1; }



/* 初回：ドーン */
@keyframes popIn1000 {
  0%   { transform: scale(.75) rotate(-2deg); filter: blur(8px); opacity: 0; } /* ← 小さく＆ぼかし強く */
  60%  { transform: scale(1.08) rotate(0);    filter: blur(0);   opacity: 1; }  /* ← 拡大率を上げる */
  80%  { transform: scale(.98); }
  100% { transform: scale(1); }
}


/* 常時：ほんのりバウンス */
@keyframes idleBounce {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-6px) scale(1.03); } /* ← 上下移動＆拡大を強める */
  100% { transform: translateY(0) scale(1); }
}


/* 共通クラス：初回→ループ（影は付けない） */
.pop1000,
.js-io.is-in {
  will-change: transform, filter;
  transform-origin: center;
  /* name | duration | easing | delay | iteration-count | fill-mode */
  animation:
    popIn1000 .72s cubic-bezier(.2,1,.3,1) 0s 1 both,
    idleBounce 2.6s ease-in-out .8s infinite both; /* ← ループ */
}

/* 低動作設定に配慮 */
@media (prefers-reduced-motion: reduce) {
  .pop1000, .js-io, .js-io.is-in { animation: none !important; transform: none !important; opacity: 1 !important; }
}

/* スクロール発火の初期状態（そのまま） */
.js-io { opacity: 0; transform: translateY(12px) scale(.98); }

/* アニメ後は必ず見える＆ループを維持（念のため可視を強制） */
.js-io.is-in{
  opacity: 1 !important;
  visibility: visible !important;
}

/* 右側パネルが本文の裏に行かないように */
@media (min-width: 1300px){
  .pc-content{
    z-index: 2 !important;
    pointer-events: auto !important;
  }
  .pc-header{ z-index: 0; }
}
/* === Mobile: 〜767px === */
@media (max-width: 767px){

  /* ヘッターのロゴもっと大きく */
  .header-inner {
    padding: 3px 12px; /* 上下paddingを少し減らすか調整 */
    height: auto;      /* 高さ制限を解除 */
  }

  .header-inner img {
    height: 60px !important; /* ← 好きなサイズに変更 */
    width: auto !important;
  }


  /* 各セクション見出し画像の間隔さらに詰める */
  section img + img { margin-top: 8px; } /* 12px → 8px */

  /* 各コンテンツ内の画像下マージンを詰める */
  .main-content img,
  .kei-content img,
  .mini-content img,
  .suv-content img {
    margin: 0 auto 16px; /* 20px → 12px */
  }

  /* フルブリード車種画像の下余白も詰める */
  .kei-content > img,
  .mini-content > img,
  .suv-content > img {
    margin-bottom: 20px;
  }

  /* 点線・実線の幅と余白もさらに詰める */
  .kei-content img[alt="点線"],
  .kei-content img[alt="実線"],
  .mini-content img[alt="点線"],
  .mini-content img[alt="実線"],
  .suv-content img[alt="点線"],
  .suv-content img[alt="実線"] {
    width: calc(100% - 20px); /* 両端10px内側 */
    margin: 0 auto 12px;
  }

  /* セクションの上下パディングも詰める */
  .kei,
  .mini,
  .suv,
  .main-visual {
    padding: 30px 0; 
  }

/* ── 車種を選ぶ：ボタン周りの余白を統一 ───────────────── */

/* 吹き出し（「車種を選ぶ」）の下だけ少し空ける */
.main-content .car-buttons > img {
  margin: 0 0 10px 0 !important;
  display: block;
}

/* 画像のマージンを完全リセット */
.main-content .car-buttons > a > img {
  margin: 0 !important;
  display: block;
}

/* a の並び方と余白を固定（既存の inline-block を潰す） */
.main-content .car-buttons > a {
  display: block !important;
  margin: 0 !important;
}

/* ボタン間の間隔はここだけで管理（数値で調整） */
.main-content .car-buttons > a + a {
  margin-top: 14px !important;   /* ← 好みで 10〜16px */
}

/* ブロック全体の上下余白 */
.main-content .car-buttons {
  margin: 24px 0 !important;     /* ← 好みで 16〜24px */
}

/* ── 車種画像（shasyu_*）だけを確実にフルブリード＆中央に ── */
.kei-content  > img[src*="shasyu_"],
.mini-content > img[src*="shasyu_"],
.suv-content  > img[src*="shasyu_"]{
  display: block;
  width: calc(100% + var(--pad) * 2);
  max-width: none;
  margin-left:  calc(var(--pad) * -1) !important;
  margin-right: calc(var(--pad) * -1) !important;
  margin-bottom: 20px; /* 好みで */
}

/* 点線・実線はこれまで通り内側に */
.kei-content  img[alt="点線"],
.kei-content  img[alt="実線"],
.mini-content img[alt="点線"],
.mini-content img[alt="実線"],
.suv-content  img[alt="点線"],
.suv-content  img[alt="実線"]{
  width: calc(100% - 24px);
  margin: 0 auto 20px;
  display: block;
}

}

/* 動的にフッター高さを入れる用 */
:root { --footer-h: 0px; }

/* スマホ系で body 下余白は使わない */
@media (max-width:1023px){
  body{ padding-bottom: 0 !important; }
}

/* 横長(タブレット/PC)でフッターボタンの“高さ”を抑える */
@media (min-width: 1024px) and (max-height: 900px){
  .fixed-button img{
    /* いまの幅指定を上書き */
    width: auto !important;           /* 幅は自動にして比率維持 */
    max-width: 90vw;                  /* 画面からはみ出さない保険 */
    height: clamp(80px, 20vh, 140px) ; /* 高さを画面高の16%以内に収める */
    display: block;
    margin: 0 auto;
  }
}


/* ← style.css の一番下でOK */
.wrapper{
  border-top: 1px solid transparent;  /* ← これで上端の margin 相殺を強制停止 */
  margin-top: 0 !important;
}


:root{
  --rail: 560px;
  --pc-sep: 150px;
  --pc-left-width: 400px;  /* ← 左パネルの“固定幅(px)” 好みで調整 */
  --pc-left-safe: 16px;    /* ← ぶつかる前の安全マージン */
  --pc-left-offset: 50px; /* ← ここ！画面左からの余白 */
}

@media (min-width:1300px){
  .pc-content{
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: -1;                  /* 背面のまま */
    pointer-events: none;
    margin-top: 100px;
    left: var(--pc-left-offset); /* ← 追加 */
    width: var(--pc-left-width);  /* ← 固定幅にする */
    transform: none;              /* ← 縮小をやめる */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--pc-gap-y, 30px);
    padding-right: 0;
  }

  .pc-content img{
    max-width: 100%;
    height: auto;
  }
}

/* 隠す時のエフェクト */
body.hide-left .pc-content{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s linear, visibility .15s linear;
}