:root {
  --ink: #1f1c18;
  --sub: #6b635b;
  --brand: #caa95a;
  --bg: #fdfcf8;
  --scrim: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .45));
  --bubble: #fff;
  --ring: rgba(255, 255, 255, .6);
}

* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  font-family: system-ui, "Noto Sans JP", sans-serif;
  color: var(--ink);
  background: var(--bg)
}

.site-header {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 12px 16px;
  background: #fff8;
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid #eee
}

.logo {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 1.6rem
}

.tagline {
  margin: .25rem 0 0;
  color: #665
}

.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* 必要なら中央調整を変えてOK */
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim)
}

.hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  padding: 24px;
  max-width: 1000px;
  margin: auto;
}

.hero-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin: 0 0 .4rem
}

.hero-sub {
  margin: 0 0 1rem;
  color: #f1e9d2
}

.main-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 6px
}

.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #b9933f;
  transition: transform .06s ease, opacity .2s ease;
}

.btn:hover {
  transform: translateY(-1px)
}

.btn:active {
  transform: translateY(0)
}

.quip {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  z-index: 2;
  max-width: min(80vw, 520px)
}

.quip-avatar {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
  background: #fff9;
  border: 1px solid var(--ring);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25)
}

.quip-bubble {
  margin: 0;
  background: var(--bubble);
  color: var(--ink);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e9e2d2;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .16);
  line-height: 1.45
}

.quip-bubble:after {
  content: "";
  position: absolute;
  right: 110px;
  bottom: 16px;
  border: 8px solid transparent;
  border-right-color: var(--bubble);
}

@media (max-width:768px) {
  .site-header {
    padding: 10px 12px
  }

  .hero {
    min-height: 100svh
  }

  .quip {
    left: 12px;
    right: 12px;
    bottom: 12px
  }

  .quip-avatar {
    width: 56px;
    height: 56px
  }
}

/* アニメ控えめ（アクセシビリティ） */
@media (prefers-reduced-motion:reduce) {
  .btn {
    transition: none
  }
}

/* --- Parallax: PCはCSSで固定背景 --- */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;

  /* ここが“簡単パララックス”の肝 */
  background: url("images/central-crux.jpg") no-repeat center / cover;
  background-attachment: fixed;
}

/* スクリーンを暗くする薄い幕 */
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .45))
}

/* 代替用の<img>はデフォルト非表示（PCはCSS背景を使う） */
.hero-bg {
  display: none
}

/* --- iOS等：JSで代替する時だけ有効化 --- */
.hero.parallax-fallback {
  background: none;
  /* CSS背景は使わない */
}

.hero.parallax-fallback .hero-bg {
  display: block;
  position: fixed;
  /* 画面に固定して */
  inset: 0;
  width: 100%;
  height: 120vh;
  /* 少し余裕を持たせる */
  object-fit: cover;
  will-change: transform;
  transform: translate3d(0, var(--parallaxY, 0), 0);
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  padding: 24px;
}

/* スマホ細かな調整 */
@media (max-width:768px) {
  .hero {
    min-height: 100svh;
  }
}

/* 小説本文 */
.novel p {
  text-indent: 1em;   /* ← 通常は一字下げ */
  margin: 1.05rem 0;
  line-height: 1.95;
  font-size: 1.05rem;
  color: #1f1c18;
}

/* 会話文（JSで自動判定される） */
.novel p.dialogue {
  text-indent: 0;   /* ← 一字下げなし */
}

.novel .scene{
  text-align:center;
  letter-spacing:.4em;
  color:#6b635b;
  margin:1.6rem 0;
}

.switch-btn[aria-pressed="true"]{
  filter: brightness(1.05);
  box-shadow: 0 0 0 2px rgba(202,169,90,.25) inset;
}