/**
 * BELAUN トップ - 地色のリズム
 *
 * 正は mockup/front-top-compare.html の 3a と 3j。
 * モックの .v-new を、本番の body クラス .belaun-front-page に置き換えている。
 * これで詳細度がモックと同じ (0,2,0) になり、front-page.css の単一クラス指定に
 * 順番ではなく詳細度で勝てる。!important は使わない。
 *
 * 中身（Elementor・文言・写真）には触れない。地色と余白と影だけ。
 */

/* ===== 3a. 地色を交互に。写真を境目にする ===== */

/* ショップ・アクセス・ご予約をベージュに */
.belaun-front-page .belaun-shop,
.belaun-front-page .belaun-access,
.belaun-front-page .belaun-reservation {
  background: var(--belaun-beige);
}

/* 各セクションが自分で上下の余白を持つ。今までは前のセクションの下余白に乗っていた */
.belaun-front-page .belaun-shop,
.belaun-front-page .belaun-spots,
.belaun-front-page .belaun-access,
.belaun-front-page .belaun-qa,
.belaun-front-page .belaun-reservation,
.belaun-front-page .belaun-contact {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

@media (min-width: 768px) {
  .belaun-front-page .belaun-shop,
  .belaun-front-page .belaun-spots,
  .belaun-front-page .belaun-access,
  .belaun-front-page .belaun-qa,
  .belaun-front-page .belaun-reservation,
  .belaun-front-page .belaun-contact {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}

/* 内側で持っていた余白と罫線は外す。境目はセクションの地色が受け持つ */
.belaun-front-page .belaun-shop__header,
.belaun-front-page .belaun-spots__header,
.belaun-front-page .belaun-access__header-left,
.belaun-front-page .belaun-qa__container,
.belaun-front-page .belaun-qa__left,
.belaun-front-page .belaun-qa__right,
.belaun-front-page .belaun-reservation__container,
.belaun-front-page .belaun-reservation__header,
.belaun-front-page .belaun-contact__container {
  padding-top: 0;
  border-top: none;
}

/* コンセプトと Room の上下余白 */
.belaun-front-page .belaun-concept {
  padding: 6rem 1rem;
}

@media (min-width: 768px) {
  .belaun-front-page .belaun-concept {
    padding: 8rem 2.5rem;
  }
}

@media (min-width: 1024px) {
  .belaun-front-page .belaun-concept {
    padding: 9rem 4rem;
  }
}

.belaun-front-page .belaun-features {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

@media (min-width: 768px) {
  .belaun-front-page .belaun-features {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

/* ベージュ地の上では写真の影を弱く。スポットは白地なので影なし */
.belaun-front-page .belaun-shop__image-wrap,
.belaun-front-page .belaun-spots__image-wrap,
.belaun-front-page .belaun-access__map-wrap {
  box-shadow: none;
}

.belaun-front-page .belaun-shop__image-wrap,
.belaun-front-page .belaun-access__map-wrap {
  box-shadow: 0 12px 32px rgba(var(--belaun-primary-rgb), 0.08);
}

/* ===== 3j. 罫線は白地だけに残す。見出しとの間を空ける ===== */

.belaun-front-page .belaun-qa__container,
.belaun-front-page .belaun-contact__container {
  padding-top: 3.5rem;
}

/* 動きを減らす設定のとき、Q&A とお問い合わせの区切り線を戻す。
   その設定では reveal.js が動かず html.js-reveal が付かないため、
   線を描く [data-reveal="line"]::before が出ない。上の border-top: none だけが残り
   線が消える。同じ詳細度でこの指定が後にあるので、順番で勝つ。 */
@media (prefers-reduced-motion: reduce) {
  .belaun-front-page .belaun-qa__container,
  .belaun-front-page .belaun-contact__container {
    border-top: 1px solid rgba(var(--belaun-primary-rgb), 0.1);
  }
}

/* ===== お問い合わせの節は出さない =====
   問い合わせは電話に一本化したため。中身（Elementor）は消していない。
   ご予約の節（電話番号を載せている）がその役目を持つ。 */
.belaun-front-page #belaunContact {
  display: none;
}