/* APOLLO TOWN 白楽 — 共通 styles.css の上に載せる街ごとの差分。主色は小さい文字にも使うので、紙の上で 4.5:1 以上にする。 */
:root {
  --teal: #a5382e;
  --teal-deep: #6e1f18;
  --teal-pale: #f8e6e1;
  --sky: #dcebf2;
}
.about-section .section-index, .about-copy dt { color: #f2b8a8; }
.site-footer nav a:hover { color: #f2b8a8; }

/* ヒーロー: 妙蓮寺と同じ重ね方(空の上に俯瞰の街を multiply)。見出しが絵に重ならないよう、絵を下げてマスクで空に溶かす。 */
.hero--hakuraku { background: #dcebf2; }
.hero-sky--hakuraku { background-image: url("assets/hero-sky.webp"); }
.hero-art--hakuraku {
  inset: 31% 0 0;
  height: 69%;
  object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
}
.hero--hakuraku .hero-kicker, .hero--hakuraku h1 { color: #6e1f18; }
.hero--hakuraku .hero-copy { padding-top: 70px; }
.hero--hakuraku .hero-kicker { margin-bottom: 40px; }
@media (max-width: 820px) {
  .hero-art--hakuraku { inset: 38% -30% 0; width: 160%; height: 62%; object-position: 52% 100%; }
}
@media (max-width: 560px) {
  .hero-art--hakuraku { inset: 44% -50% 0; width: 200%; height: 56%; }
  .hero--hakuraku .hero-greeting { font-size: .84rem; }
}