@charset "UTF-8";
/*
 * サイト全体の縦方向の余白（2026-09-15）
 *
 * 本番の18ページを PC 1280px / スマホ 375px で実測して見つかったばらつきを、
 * 個別の値を足していくのでなく「セクション同士のつながり方」のルールで揃える。
 *
 *  1. 余白の段階を決める（8pxの倍数）
 *  2. 同じ背景色のセクションが続くときは、上の余白を詰める（余白が二重になり 190〜240px 空いていた）
 *  3. パンくずの直後は詰める（ページ名から本文まで 約180px 空いていた）
 *  4. 見出し→中身の間隔を1つの値に（スマホで 24 / 32 / 40px とばらついていた）
 *  5. 帯（出店のご案内・エントリー等）の上下を段階に合わせる
 *  6. フッターの上の白い帯をなくす（最後がグレー・濃色のページで白い帯が挟まっていた）
 *
 * style.css は静的サイトのSCSSから生成しているため、ここには追記せず別ファイルにしている。
 * 読み込みは最後（ほかのCSSの後）。
 */

/* ---------- 1. 余白の段階 ---------- */
:root {
  --haz-space-section: 6rem;          /* セクションの上下 96px */
  --haz-space-section-joined: 2rem;   /* 同じ背景が続くときの上 32px（前の下96pxと合わせて 128px） */
  --haz-space-after-crumb: 3.5rem;    /* パンくずの直後 56px */
  --haz-space-heading: 2.5rem;        /* 見出し→中身 40px */
  --haz-space-band: 4.5rem;           /* 帯の上下 72px */
}
@media (max-width: 768px) {
  :root {
    --haz-space-section: 4rem;        /* 64px */
    --haz-space-section-joined: 1.5rem;
    --haz-space-after-crumb: 2.5rem;  /* 40px */
    --haz-space-heading: 2rem;        /* 32px */
    --haz-space-band: 3rem;           /* 48px */
  }
}
@media (max-width: 480px) {
  :root {
    --haz-space-section: 3.5rem;      /* 56px */
    --haz-space-section-joined: 1rem;
    --haz-space-after-crumb: 2rem;    /* 32px */
    --haz-space-heading: 1.75rem;     /* 28px */
    --haz-space-band: 2.75rem;        /* 44px */
  }
}

.section {
  padding-top: var(--haz-space-section);
  padding-bottom: var(--haz-space-section);
}

/* ---------- 2. 同じ背景色のセクションが続くとき ---------- */
.section:not(.section--bg) + .section:not(.section--bg),
.section--bg + .section--bg {
  padding-top: var(--haz-space-section-joined);
}

/* ---------- 3. パンくずの直後（ページ冒頭の写真・タイトル → パンくず → 最初のセクション） ---------- */
main > .container + .section {
  padding-top: var(--haz-space-after-crumb);
}

/* ---------- 4. 見出し→中身 ---------- */
.section-heading {
  margin-bottom: var(--haz-space-heading);
}
/* 見出しのすぐ後に来る部品が持っている上余白は消して、見出し側の値だけにする */
.section-heading + .values-grid,
.section-heading + .feature-cards,
.section-heading + .def-list,
.section-heading + .archive-grid,
.section-heading + .dept-grid,
.section-heading + .access-stores,
.section-heading + .recruit-cards,
.section-heading + .store-access,
.section-heading + .approach-grid,
.section-heading + .news-list,
.section-heading + .program-cards,
.section-heading + .position-grid,
.section-heading + .business-cards {
  margin-top: 0;
}

/* ---------- 5. 帯 ---------- */
.cta-strip,
.cta-banner {
  padding-top: var(--haz-space-band);
  padding-bottom: var(--haz-space-band);
}

/* ---------- 6. フッターの上 ---------- */
.v2-footer {
  margin-top: 0;
}