@charset "utf-8";
/* =========================================================================
   layout.css  ―  レイアウト骨格 (l-*)
   12カラムグリッド前提 / コンテナ最大幅 1200px
   ========================================================================= */

/* -------------------------------------------------------------------------
   コンテナ
   ------------------------------------------------------------------------- */
.l-container {
  width: 100%;
  max-width: calc(var(--container) + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* 全幅（背景画像セクション等）の内側だけ 1200 に絞る */
.l-container--narrow {
  max-width: calc(1040px + var(--container-pad) * 2);
}

/* -------------------------------------------------------------------------
   12カラムグリッド
   ------------------------------------------------------------------------- */
.l-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-5);
}
.l-grid--gap-lg { gap: var(--space-7); }

/* 列スパン（PC） */
.l-col-2  { grid-column: span 2; }
.l-col-3  { grid-column: span 3; }
.l-col-4  { grid-column: span 4; }
.l-col-5  { grid-column: span 5; }
.l-col-6  { grid-column: span 6; }
.l-col-7  { grid-column: span 7; }
.l-col-8  { grid-column: span 8; }
.l-col-9  { grid-column: span 9; }
.l-col-12 { grid-column: span 12; }

/* -------------------------------------------------------------------------
   セクション共通の縦余白
   ------------------------------------------------------------------------- */
.l-section {
  padding-block: var(--space-10);
}
.l-section--sm { padding-block: var(--space-9); }

/* -------------------------------------------------------------------------
   ヘッダー（固定・全幅）  Figma: Header 1440x68 / bg rgba(255,255,255,.9)
   ------------------------------------------------------------------------- */
.l-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 13px 32px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);
}
.l-header__logo { width: 122px; flex-shrink: 0; }
/* ナビは余白を広げて画面幅いっぱいに展開 */
.l-header__nav  { flex: 1; display: flex; align-items: center; gap: var(--space-5); margin-left: var(--space-10); }
.l-header__nav .c-gnav { flex: 1; justify-content: flex-end; }
.l-header__nav .c-btn { flex-shrink: 0; }

/* ハンバーガーは components.css の c-hamburger（独自実装）で管理 */

/* body 側でヘッダー分のスペースは KV が全画面のため確保しない（KV以外のページ用に余白クラスを用意） */
.l-has-fixed-header { padding-top: var(--header-h); }

/* 色変化をなめらかに */
.l-header,
.l-header .c-gnav__item,
.l-header .c-btn,
.l-header__logo img,
.l-header .hamburger-inner,
.l-header .hamburger-inner::before,
.l-header .hamburger-inner::after {
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, filter 0.35s ease;
}

/* -------------------------------------------------------------------------
   TOP：FV上は「背景なし＋白文字」、スクロール（FV通過＝コンセプト辺り）で
        「白背景＋黒文字」へ切替。is-scrolled は JS で付与。
   ※ 下層ページ(body.is-sub)は常に白背景のまま。
   ------------------------------------------------------------------------- */
body.is-home .l-header {
  background: transparent;
  backdrop-filter: none;
}
body.is-home .l-header .c-gnav__item,
body.is-home .l-header .c-btn { color: var(--c-white); }
body.is-home .l-header .c-gnav__sub,
body.is-home .l-header .c-gnav__sub-link { color: var(--c-black); }
body.is-home .l-header .c-btn { border-color: var(--c-white); }
/* ロゴは白塗りせず、元のロゴをそのまま使う */
body.is-home .l-header .hamburger-inner,
body.is-home .l-header .hamburger-inner::before,
body.is-home .l-header .hamburger-inner::after { background-color: var(--c-white); }

/* FV最上部は暗くする処理がなく、明るいスライド画像だと白文字が埋もれる。
   ヘッダー背後だけに上→下の薄い黒スクリムを敷き、どのスライドでも可読性を確保。
   z-index:-1＝メニュー文字より後ろ／FV(z1)より前。スクロールで白背景になったら消す。 */
body.is-home .l-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 130px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.40) 0%,
    rgba(0, 0, 0, 0.20) 45%,
    rgba(0, 0, 0, 0) 100%
  );
  opacity: 1;
  transition: opacity 0.35s ease;
}
body.is-home .l-header.is-scrolled::before { opacity: 0; }

/* スクロール後（FVを過ぎたら） */
body.is-home .l-header.is-scrolled {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(2px);
}
body.is-home .l-header.is-scrolled .c-gnav__item,
body.is-home .l-header.is-scrolled .c-btn { color: var(--c-black); }
body.is-home .l-header.is-scrolled .c-btn { border-color: var(--c-black); }
body.is-home .l-header.is-scrolled .hamburger-inner,
body.is-home .l-header.is-scrolled .hamburger-inner::before,
body.is-home .l-header.is-scrolled .hamburger-inner::after { background-color: var(--c-black); }

/* -------------------------------------------------------------------------
   SPドロワー（ハンバーガー内メニュー）
   ------------------------------------------------------------------------- */
.l-drawer {
  position: fixed;
  inset: 0;                        /* 画面いっぱい・最上部から（余白なし） */
  z-index: 999;                    /* ヘッダー(1000)より下＝ロゴ/×は常に上に出る */
  padding: 80px var(--container-pad) var(--space-8);  /* 上はロゴ/×の分だけ空ける */
  background: url("../img/top/footer-info-bg.jpg") center / cover no-repeat;  /* ヘッダーと同じ背景で全面統一 */
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s ease;
}
.l-drawer.is-open { transform: translateX(0); }
.l-drawer__list a {
  display: block;
  padding: 16px 4px;
  border-bottom: 1px solid #eee;
  font-family: var(--f-mincho);
  font-size: 16px;
  letter-spacing: var(--ls-text);
}
.l-drawer__btns { display: flex; flex-direction: column; gap: 12px; margin-top: var(--space-6); }
.l-drawer__btns .c-btn { width: 100%; padding-block: 14px; }
/* ドロワーを開いている間は背面スクロール抑制 */
body.is-drawer-open { overflow: hidden; }

/* -------------------------------------------------------------------------
   フッター（全幅・2段：CTA / インフォ）
   ------------------------------------------------------------------------- */
.l-footer { width: 100%; overflow: clip; }
.l-footer__cta,
.l-footer__info { position: relative; width: 100%; }

/* -------------------------------------------------------------------------
   レスポンシブ
   ------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  :root { 
    --container-pad: 24px;  
    --fs-title:    24px; 
    --fs-lg:       22px;
    --fs-text:     14px;
  }
  

  /* SPはヘッダー内ナビ(c-gnav)を隠し、ハンバーガー内ドロワーに集約 */
  .l-header__nav { display: none !important; }
  /* ヘッダーはPCと同じ挙動：FV上は背景なし、スクロール(コンセプト辺り)で白背景。
     背景・色は body.is-home / .is-scrolled の共通ルールに任せる（SP専用の上書きはしない） */
  body.is-home .l-header__logo img { filter: none; }

  .l-grid { gap: var(--space-4); }

  /* SPは基本1カラムへ */
  .l-col-2, .l-col-3, .l-col-4, .l-col-5, .l-col-6,
  .l-col-7, .l-col-8, .l-col-9 { grid-column: span 12; }

  .l-section    { padding-block: var(--space-9); }
  .l-section--sm{ padding-block: var(--space-9); }
}