/*全体的な色決め*/
:root{
    --color-bg: #1e1530; /*背景、紫っぽい黒*/
    --color-surface: #241a35; /*カードとか、少し明るい紫*/
    --color-purple: #8a5cd1; /*メインの紫*/
    --color-red: #e0303a; /*差し色の赤*/
    --color-text: #f3eee6; /*文字、白*/
    --color-text-sub: #b8aec8; /*薄めの文字*/
}

/*クセ消し*/
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/*ページ全体*/
body{
    background: var(--color-bg);
    color: var(--color-text);
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
    line-height: 1.7;
}

a{
    color: inherit;
}

img{
    max-width: 100%;
    display: block;
}

/*ヘッダー*/
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-bg);
  z-index: 100;
}

.logo {
  font-weight: bold;
  text-decoration: none;
}

main {
  padding-top: 56px;
}

/*メニューボタン*/
.menu-button {
  position: relative;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
}

/* 3本の線 */
.menu-button span {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  transition: transform 0.3s, opacity 0.3s;
}

.menu-button span:nth-child(1) { top: 14px; }
.menu-button span:nth-child(2) { top: 21px; }
.menu-button span:nth-child(3) { top: 28px; }

/*開いているときは×にする*/
.menu-button.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-button.is-open span:nth-child(2) {
  opacity: 0;
}
.menu-button.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/*メニュー*/
.menu {
  position: fixed;
  top: 56px;
  left: 0;
  width: 100%;
  padding: 8px 16px 24px;
  background: var(--color-bg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}

.menu.is-open{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menu ul{
    list-style: none;
}

.menu a{
    display: block;
    padding: 12px 0;
    font-size: 1.1rem;
    text-decoration: none;
}

/* ※ ページ全体の scroll-behavior: smooth はやめた(Android で、一番下でブラウザが勝手に上下に動き続ける原因になるため)
   メニューで移動するときのなめらかなスクロールは、JS(main.js)でやっている */

section{
    scroll-margin-top: 56px;
}

/* =====================================================
   トップ:ポスター → 降臨(スクロールした分だけ1文字ずつ) → 占い
   画面は入れ替えず、上から下へ普通にスクロールしていく
   ===================================================== */

/* ----- ポスター:ヘッダーと予約バーを除いた画面いっぱい ----- */
.intro-poster-wrap {
  position: relative;
  /* --vh:ページを開いたときの画面の高さの 1%(JS が1回だけ測って入れる。ブラウザのバーが出入りしても変わらない) */
  height: calc(var(--vh, 1vh) * 100 - 112px);
  overflow: hidden;
}

.intro-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 下のほうを背景色にじわっと溶かす(SCROLL を読みやすく+次の降臨へ自然につなぐ) */
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 99%);
}

/* ----- SCROLL の案内(少しスクロールしたら消える) ----- */
.scroll-hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.875rem;
  font-weight: bold;
  letter-spacing: 0.25em;
  text-shadow: 0 0 8px var(--color-bg);
  transition: opacity 0.4s;
}
.scroll-hint.is-hidden {
  opacity: 0;
}

/* 矢印の入れ物:これごと上下に動かす */
.scroll-arrow {
  position: relative;
  width: 12px;
  height: 20px;
  margin-top: 6px;
  animation: scroll-bounce 2.4s ease-in-out infinite;
}

/* ∨ を2つ描く(四角の右と下の線だけ残して、45度回す) */
.scroll-arrow::before,
.scroll-arrow::after {
  content: "";
  position: absolute;
  left: 1px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-text);
  border-bottom: 2px solid var(--color-text);
  transform: rotate(45deg);
}
.scroll-arrow::before { top: 0; }
.scroll-arrow::after  { top: 7px; }

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* ----- 降臨 ----- */
.story {
  position: relative;
  /* 上:ポスターから「10」までの間を、画面の高さの半分くらいあける */
  padding: calc(var(--vh, 1vh) * 50) 16px 72px;
  /* overflow: hidden は付けない(付けると、竜の sticky が効かなくなる) */
}

/* 後ろの煙の竜:文字がスクロールしている間、画面の真ん中に貼り付いている
   (高さ 0 の箱を sticky にして、場所を取らずに文字の後ろに置く) */
.story-dragon {
  position: sticky;
  top: 50%;
  height: 0;
  margin-top: calc(var(--vh, 1vh) * 40);     /* ポスターにかぶらないように、少し下から出てくる */
  margin-bottom: calc(var(--vh, 1vh) * -40); /* その分、下の文字は上に戻す(文字の位置は変えない) */
  pointer-events: none;
}

.intro-glow,
.intro-crystal {
  position: absolute;
  top: 0;
  left: 50%;
}

/* 光:真ん中が紫で、外側に行くほど透明。鼓動のリズムで脈打つ */
.intro-glow {
  width: min(110vw, 560px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.intro-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(160, 110, 240, 0.85) 0%, rgba(138, 92, 209, 0) 65%);
  animation: heartbeat 2.4s ease-out infinite;
}

/* 煙の竜 */
.intro-crystal {
  width: min(105vw, 560px);
  transform: translate(-50%, -50%);
  animation: crystal-beat 2.4s ease-out infinite;
}

/* どくん(強)、どくん(弱)……間 */
@keyframes heartbeat {
  0%   { opacity: 0.25; transform: scale(0.95); }
  8%   { opacity: 1;    transform: scale(1.15); }
  16%  { opacity: 0.4;  transform: scale(1); }
  24%  { opacity: 0.85; transform: scale(1.08); }
  45%  { opacity: 0.25; transform: scale(0.95); }
  100% { opacity: 0.25; transform: scale(0.95); }
}

@keyframes crystal-beat {
  0%, 45%, 100% { transform: translate(-50%, -50%) scale(1); }
  8%            { transform: translate(-50%, -50%) scale(1.04); }
  16%           { transform: translate(-50%, -50%) scale(1); }
  24%           { transform: translate(-50%, -50%) scale(1.02); }
}

/* 文字:縦書き。右の列から左へ読む
   ※ 縦書きの機能(writing-mode)は使わず、1文字ずつの箱を縦に積んで縦書きに見せる。
     (縦書きの機能の中に数字を混ぜると、スマホによって数字が寝たり、重なったりするため) */
.story-text {
  --u: clamp(2.5rem, 12vw, 4rem); /* 文字1つ分の大きさの基準(大きめ) */
  position: relative;
  font-family: "Yuji Syuku", serif;
  font-size: var(--u);
}

/* 1段:列を右から左へ並べる */
.story-row {
  display: flex;
  flex-direction: row-reverse;   /* HTML で先に書いた列を右に */
  justify-content: center;
  align-items: flex-start;
}

/* 1段目:10月24日 / 大分高専に(列の間を広く) */
.row-1 {
  gap: calc(var(--u) * 1.6);
}

/* 2段目:伝説の / 龍神マッスルが。1段目を読み終わってから、少し間をあけて始まる */
.row-2 {
  margin-top: calc(var(--vh, 1vh) * 28);   /* 1段目と2段目の間をしっかりあける */
  gap: calc(var(--u) * 0.9);
}

/* 1列:文字の箱を上から下へ積む */
.story-col {
  position: relative;
  z-index: 0; /* 後ろの墨だまりを、この列の中だけで「文字の後ろ・竜の前」に置くため */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75em;            /* 文字と文字の間(広いほど、1文字出るまでのスクロールが長くなる) */
  line-height: 1;
  white-space: nowrap;
  /* 竜の上でも読めるように、文字の後ろに墨がにじんだような暗い影(濃いめ) */
  text-shadow:
    0 0 3px rgba(8, 4, 16, 1),
    0 0 10px rgba(8, 4, 16, 0.95),
    0 0 22px rgba(8, 4, 16, 0.9),
    0 0 40px rgba(8, 4, 16, 0.7);
}

.story-col .char {
  display: block;
}

/* 列ごとの大きさと、始まる高さ(つなぎの言葉は小さく、大事な言葉は大きく) */
.col-date   { font-size: 0.85em; }
/* 「大分高専に」の「大」を、「10月24日。」の5文字目「。」の横から始める
   (日付の列の1文字分の高さ = 0.85u ×(1 + 字間 0.75)= 1.4875u。その4文字分下げて、文字の大きさの差と、
    「。」を縦書きの位置(右上)に寄せている分だけ、少し上に戻す) */
.col-place  { font-size: 1.1em; margin-top: calc(var(--u) * 5.6); }
.col-densetsu { font-size: 0.85em; }
/* 「龍神マッスルが」は、「伝説の」を読み終わるあたりから始める */
.col-ryujin   { font-size: 1.15em; margin-top: calc(var(--u) * 4.3); }

/* 「龍神マッスルが」は文字が大きいぶん、字間を少し詰める(カタカナは漢字より小さく見えて、間が空いて見えるため) */
.col-ryujin {
  gap: 0.5em;
}

/* 小さい文字(ッ など):縦書きのときのように右上に寄せて、上下の間も詰める */
.story-col .char.small {
  left: 0.12em;
  margin: -0.18em 0;
}

/* 句読点(。):縦書きのときの位置(右上)に寄せる */
.story-col .char.punct {
  left: 0.3em;
  top: -0.35em;
}

/* 数字(10・24):2桁を1文字分の箱に収める */
.tcy {
  font-size: 0.8em;
  letter-spacing: -0.05em;
}

/* 判子は「が」の左下に、文字にかぶらないように少し離して押す */
.col-ryujin .seal {
  left: -2.2em;
  bottom: -0.6em;
}
/* 1文字ずつ:最初は見えない。スクロールして画面の 7 割の線を越えたら出る(JS が is-on を付ける) */
.char {
  display: inline-block;
  opacity: 0;
  transform: translateY(-0.25em);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}
.char.is-on {
  opacity: 1;
  transform: none;
}

/* 赤い判子(落款):竜神マッスルがの左下に押す */
.seal {
  position: absolute;
  left: -0.8em;
  bottom: -0.4em;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: horizontal-tb;
  font-size: 0.5em;
  line-height: 1;
  color: #f6e9d6;
  background: #b51f27;
  border: 2px solid #8e141b;
  border-radius: 3px;
  text-shadow: none;
  transform: rotate(-6deg);
  opacity: 0;
}
/* 「が」まで出たら、判子をポンッと押す */
.seal.is-on {
  animation: seal-stamp 0.35s ease-out 0.3s forwards;
}

@keyframes seal-stamp {
  0%   { opacity: 0; transform: rotate(-6deg) scale(1.8); }
  70%  { opacity: 1; transform: rotate(-6deg) scale(0.92); }
  100% { opacity: 1; transform: rotate(-6deg) scale(1); }
}

/* 降臨:横書き・赤・特大。1文字ずつ叩きつけるように出る */
.story-kourin {
  position: relative;
  width: fit-content;
  /* 上:龍神が → 降臨 の前に「間」をとる。下:降臨のあと、すぐ占いにならないように余韻をとる */
  margin: calc(var(--vh, 1vh) * 45) auto calc(var(--vh, 1vh) * 35);
  font-family: "Yuji Syuku", serif;
  font-size: min(30vw, 10rem);
  line-height: 1.2;
  color: var(--color-red);
  text-shadow: 0 0 18px rgba(8, 4, 16, 0.8);
}

.story-kourin span {
  display: inline-block;
  opacity: 0;
}

/* ド:大きいところから叩きつけられる */
.story-kourin span.is-on {
  animation: slam 0.4s ease-in both;
}

@keyframes slam {
  0%   { opacity: 0; transform: scale(2.4); }
  70%  { opacity: 1; transform: scale(0.94); }
  100% { opacity: 1; transform: scale(1); }
}

/* 下線(筆でひいたような赤い線):2文字とも出たら、シュッと伸びる */
.story-kourin::after {
  content: "";
  display: block;
  height: 0.12em;
  margin-top: 0.05em;
  border-radius: 4px;
  background: var(--color-red);
  opacity: 0.75;
  box-shadow: 0.1em 0.08em 0 rgba(224, 48, 58, 0.5);
  transform-origin: left center;
  transform: rotate(-2deg) scaleX(0);
  transition: transform 0.35s ease-out 0.3s;
}
.story-kourin.is-done::after {
  transform: rotate(-2deg) scaleX(1);
}

/* 「動きを減らす」設定の人には、動きをやめて普通に表示する */
@media (prefers-reduced-motion: reduce) {
  .scroll-arrow,
  .intro-glow::before,
  .intro-crystal {
    animation: none;
  }
  .char {
    transition: none;
  }
  .seal.is-on {
    animation: none;
    opacity: 1;
  }
  .story-kourin span.is-on {
    animation: none;
    opacity: 1;
  }
  .story-kourin::after {
    transition: none;
  }
}
/*セクション共通*/
.fortune,
.access {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 16px;
}

/*セクションの見出し*/
.fortune h2,
.access h2{
  margin-bottom: 24px;
  font-size: 1.5rem;
  text-align: center;
  letter-spacing: 0.2em;
}

/* ===== 占い紹介 ===== */

/* 占いを縦に並べる箱。占いと占いの間は広く */
.fortune ul {
  list-style: none;
  display: grid;
  gap: 16px;   /* 巻物の芯の軸先が上下にはみ出しているので、見た目の間隔はこれより広く見える */
}

/* 占いごとの色(名札の線と、吹き出しの枠に使う) */
.fortune-normal { --fortune-color: #b388ff; } /* 紫 */
.fortune-muscle { --fortune-color: #f2a03d; } /* オレンジ・金 */
.fortune-love   { --fortune-color: #f48fb1; } /* ピンク */

/* 占い1つ分:巻物の上に、カードと説明を横に並べる */
.fortune-item {
  position: relative;
  display: flex;
  align-items: center;  /* 説明をカードの縦の真ん中にそろえる */
  gap: 12px;
  padding: 40px 34px;   /* 巻物の紙の内側の余白(上下は縁取り、左右は芯の分も空ける) */
}

/* マッスルだけ、左右を入れ替える(カードが右) */
.fortune-item.is-reverse {
  flex-direction: row-reverse;
}

/* タロットカード:幅を決めて、縮まないようにする */
.tarot {
  position: relative;
  flex: 0 0 auto;
  width: min(31vw, 150px);
}

.tarot img {
  width: 100%;
  height: auto;
}

/* 名札:カードの下のほうに、古い紙のリボンを貼って、墨の文字で名前を書く */
.tarot h3 {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%) rotate(-2deg); /* 少しだけ傾けて「貼った」感じに */
  width: 90%;
  padding: 3px 0 5px;
  /* 古い紙:真ん中が明るく、端が少し焼けたような色 */
  background: radial-gradient(ellipse at center, #f4ead2 55%, #dcc9a0 100%);
  /* 両端をリボンのように切り込む */
  clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%);
  box-shadow: inset 0 0 0 1px rgba(90, 60, 30, 0.25);
  color: #3a2414; /* こげ茶の墨 */
  font-family: "Yuji Syuku", serif;
  font-weight: normal;
  font-size: 0.7rem;   /* 「占い」の大きさ */
  line-height: 1.15;
  text-align: center;
}

/* 名前(ノーマル・マッスル・恋愛)は大きく。下に占いごとの色の細い線 */
.tarot h3 span {
  display: block;
  margin: 0 auto 1px;
  width: fit-content;
  font-size: clamp(1rem, 4.6vw, 1.3rem);
  border-bottom: 2px solid var(--fortune-color);
}

/* 説明:巻物の上に、筆の文字で書く */
.fortune-desc {
  flex: 1;
  position: relative;
  color: #2e1c10; /* 墨 */
  font-family: "Yuji Syuku", serif;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* カードと説明は、巻物の紙より手前に出す */
.tarot,
.fortune-desc {
  z-index: 1;
}

/* ----- 巻物(JS が .makimono を各占いに足す) ----- */
.makimono {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 紙:Canva で作った巻物の画像の、真ん中の紙の部分(横に伸ばして使う)
   上下は、芯の画像の中で紙がある高さに合わせる */
.makimono-paper {
  position: absolute;
  top: 7.4%;
  bottom: 7.5%;
  left: 10px;
  right: 10px;
  background: url("../images/scroll-paper.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
}

/* 芯(紙が巻き付いた木の軸+軸先)。高さは占い1つ分いっぱい、幅は画像の縦横比で自動 */
.makimono-roller {
  position: absolute;
  top: 0;
  bottom: 0;
  aspect-ratio: 36 / 480;
  background: center / 100% 100% no-repeat;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5));
}

/* 左側にある芯は左用の画像、右側にある芯は右用の画像 */
.makimono-roller.is-moving { background-image: url("../images/scroll-roller-left.webp"); }
.makimono-roller.is-fixed  { background-image: url("../images/scroll-roller-right.webp"); }
.is-reverse .makimono-roller.is-moving { background-image: url("../images/scroll-roller-right.webp"); }
.is-reverse .makimono-roller.is-fixed  { background-image: url("../images/scroll-roller-left.webp"); }

/* 芯の位置:説明側に止まっている芯(fixed)と、カード側へ転がっていく芯(moving) */
.makimono-roller.is-fixed  { right: 0; }
.makimono-roller.is-moving { left: 0; }
.is-reverse .makimono-roller.is-fixed  { right: auto; left: 0; }
.is-reverse .makimono-roller.is-moving { left: auto; right: 0; }

/* ----- 巻物を広げる → カードが飛んでくる → 説明を筆で書く -----
   (html に js-deal が付いているときだけ。JS が動かなかったときは、最初から全部見える) */

/* 広げる前:紙は芯の位置まで巻かれていて見えない */
.js-deal .makimono-paper {
  clip-path: inset(0 0 0 100%);  /* 右から左へ広げる(ノーマル・恋愛) */
}
.js-deal .is-reverse .makimono-paper {
  clip-path: inset(0 100% 0 0);  /* 左から右へ広げる(マッスル) */
}
.js-deal .makimono-roller.is-moving {
  transform: translateX(var(--unroll));  /* JS が「芯が転がる距離」を入れる */
}
.js-deal .is-reverse .makimono-roller.is-moving {
  transform: translateX(calc(var(--unroll) * -1));
}
.js-deal .tarot {
  opacity: 0;
}

/* 広げる:紙を開きながら、芯がカード側へ転がっていく */
.js-deal .is-dealt .makimono-paper {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.7s ease-out;
}
.js-deal .is-dealt .makimono-roller.is-moving {
  transform: translateX(0);
  transition: transform 0.7s ease-out;
}

/* カードを配る:画面の中央上から、くるくる回りながら飛んできて、ピタッと止まる */
.js-deal .is-dealt .tarot {
  animation: deal-card 0.75s cubic-bezier(0.2, 0.7, 0.3, 1) 0.45s both;
}

@keyframes deal-card {
  0% {
    opacity: 0;
    /* --from-x, --from-y:定位置から見た「画面の中央上」の方向(JS が計算して入れる) */
    transform: translate(var(--from-x), var(--from-y)) rotate(-540deg) scale(0.5);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* 説明の筆の文字:カードが着いてから、1文字ずつ書いていく */
.fortune-desc {
  --base: 1.15s;
}

/* 「動きを減らす」設定の人には、全部すぐに表示する */
@media (prefers-reduced-motion: reduce) {
  .js-deal .makimono-paper,
  .js-deal .is-reverse .makimono-paper {
    clip-path: none;
  }
  .js-deal .makimono-roller.is-moving,
  .js-deal .is-reverse .makimono-roller.is-moving {
    transform: none;
  }
  .js-deal .tarot {
    opacity: 1;
  }
  .js-deal .is-dealt .tarot {
    animation: none;
  }
}

/* ===== ロゴ(画像) ===== */
.logo img {
  height: 52px;  /* ヘッダー(56px)をほぼいっぱいに使う高さ。横幅は自動(約 156px) */
  width: auto;
}

/* 占いの説明:1文字ずつ、筆で書いていくように出す(カードが着いてから) */
.fortune-item .char {
  transform: translateY(-0.25em);
}
.fortune-item.is-visible .char {
  opacity: 1;
  transform: none;
  /* --i:何文字目か、--base:書き始めるまでの待ち時間 */
  transition-delay: calc(var(--base, 0s) + var(--i) * 0.08s);
}

/* ===== アクセス ===== */
/* 名札・吹き出しと同じ「古い紙」の箱に、場所を書く */
.access-box {
  padding: 20px 16px;
  background: radial-gradient(ellipse at center, #f4ead2 50%, #e6d5ae 100%);
  border: 1.5px solid var(--color-purple);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  color: #3a2414;
  text-align: center;
}

/* 場所(教室名など):大きく */
.access-place {
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: 0.1em;
}

/* 補足:小さく */
.access-note {
  margin-top: 4px;
  font-size: 0.85rem;
  color: #6b5034;
}

/* ===== フッター ===== */
.site-footer {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 16px;
  /* 画面の下に固定する予約バー(56px)+ iPhone の下のバーの分、下を空けておく */
  padding-bottom: calc(32px + 56px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(138, 92, 209, 0.35); /* うっすら紫の区切り線 */
  text-align: center;
}

.footer-label {
  font-size: 0.8rem;
  color: var(--color-text-sub);
  letter-spacing: 0.15em;
}

.footer-mail {
  font-size: 0.9rem;
  color: var(--color-text-sub);
  overflow-wrap: anywhere; /* 狭いスマホでも、はみ出さずに折り返す */
}

/* ===== 予約バー(画面の下に固定) ===== */
.reserve-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(56px + env(safe-area-inset-bottom)); /* iPhone の下のバーの分も足す */
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  z-index: 90; /* メニュー(100)よりは後ろ */
  /* 開放前:灰色 */
  background: #3b3448;
  color: var(--color-text-sub);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  cursor: not-allowed;
}

/* 「受付前」「受付中」の札 */
.reserve-bar-status {
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.1em;
}

.reserve-bar-text {
  font-size: 0.95rem;
}

/* 開放中:赤くなって、ゆっくり脈打つように光る */
.reserve-bar.is-open {
  background: var(--color-red);
  color: #fff;
  cursor: pointer;
}

.reserve-bar.is-open .reserve-bar-text {
  font-weight: bold;
}

/* 光る層:透明度だけを動かす(軽い) */
.reserve-bar.is-open::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255, 210, 210, 0.45), rgba(255, 210, 210, 0) 70%);
  animation: reserve-glow 2.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes reserve-glow {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .reserve-bar.is-open::before {
    animation: none;
    opacity: 0.5;
  }
}

/* ===== 予約ページ ===== */

/* ヘッダー右の「トップへ」 */
.page-back {
  font-size: 0.9rem;
  color: var(--color-text-sub);
  text-decoration: none;
  padding: 8px 4px; /* 指で押しやすいように */
}

.reserve-main {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(56px + 40px) 16px 40px; /* ヘッダーの高さ分+余白 */
}

.reserve-title {
  margin-bottom: 24px;
  font-size: 1.5rem;
  text-align: center;
  letter-spacing: 0.2em;
}

/* 状態を知らせる箱:アクセスと同じ古い紙 */
.reserve-box {
  padding: 28px 16px;
  background: radial-gradient(ellipse at center, #f4ead2 50%, #e6d5ae 100%);
  border: 1.5px solid var(--color-purple);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  color: #3a2414;
  text-align: center;
}

.reserve-box-main {
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: 0.1em;
}

.reserve-box-note {
  margin-top: 8px;
  font-size: 0.85rem;
  color: #6b5034;
}

/* hidden が付いた箱は、必ず隠す(上の display より優先) */
.reserve-box[hidden] {
  display: none;
}


/* ===== 降臨をもっと派手に ===== */

/* 叩きつけたあと、赤く光りながら脈打つ(文字の影は、中の「降」「臨」にもそのまま効く) */
.story-kourin.is-done {
  animation: kourin-glow 2.4s ease-in-out 0.6s infinite;
}
@keyframes kourin-glow {
  0%, 100% { text-shadow: 0 0 18px rgba(8, 4, 16, 0.8), 0 0 0 rgba(255, 40, 60, 0); }
  50%      { text-shadow: 0 0 18px rgba(8, 4, 16, 0.8), 0 0 28px rgba(255, 40, 60, 0.9); }
}

/* 「臨」が落ちた瞬間、赤い光がパッと広がって消える */
.story-kourin::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 60, 70, 0.75) 0%, rgba(224, 48, 58, 0.35) 35%, rgba(224, 48, 58, 0) 70%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}
.story-kourin.is-done::before {
  animation: kourin-burst 0.9s ease-out;
}
@keyframes kourin-burst {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
}

/* 画面ごとドンッと揺れる(JS が is-shaking を一瞬だけ付ける) */
.story.is-shaking {
  animation: shake 0.6s;
}
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  15%      { transform: translate(-7px, 5px); }
  30%      { transform: translate(6px, -4px); }
  45%      { transform: translate(-4px, 3px); }
  60%      { transform: translate(3px, -2px); }
  80%      { transform: translate(-1px, 1px); }
}

@media (prefers-reduced-motion: reduce) {
  .story-kourin.is-done,
  .story-kourin.is-done::before,
  .story.is-shaking {
    animation: none;
  }
}
/* ===== 文字の後ろの「墨だまり」 =====
   ぼかしではなく、ふちがぼんやり消えていく暗いもやを、1文字ずつの後ろに置いて、竜の上でも読みやすくする
   (文字の中に置くので、文字が出ると一緒に出る) */
.story-col .char {
  position: relative;
}
.story-col .char::before {
  content: "";
  position: absolute;
  inset: -0.35em -0.45em;
  background: radial-gradient(ellipse at center, rgba(8, 4, 16, 0.75) 20%, rgba(8, 4, 16, 0.4) 48%, rgba(8, 4, 16, 0) 70%);
  z-index: -1;
  pointer-events: none;
}
/* ===== セクションの見出し(占い・アクセス):筆文字の題字+金の飾り線 =====
   ──◆ 占 い ◆── */
.fortune h2,
.access h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font-family: "Yuji Syuku", serif;
  font-weight: normal;
  font-size: min(10vw, 2.8rem);
  white-space: nowrap; /* 「アクセス」のような長めの見出しも折り返さない */
  letter-spacing: 0.3em;
  padding-left: 0.3em; /* 最後の文字のあとにも字間が入るので、その分を左にも足して真ん中にそろえる */
  color: #e3c06a;
  text-shadow: 0 0 18px rgba(227, 192, 106, 0.3);
}

/* 左右の飾り線:金の細い線の先に、小さいひし形 */
.fortune h2::before,
.fortune h2::after,
.access h2::before,
.access h2::after {
  content: "";
  flex: 0 1 90px;
  height: 10px;
}
.fortune h2::before,
.access h2::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M5 0L10 5 5 10 0 5z' fill='%23e3c06a'/%3E%3C/svg%3E") right center / 10px 10px no-repeat,
    linear-gradient(to right, rgba(227, 192, 106, 0), #e3c06a) left center / calc(100% - 14px) 1px no-repeat;
}
.fortune h2::after,
.access h2::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M5 0L10 5 5 10 0 5z' fill='%23e3c06a'/%3E%3C/svg%3E") left center / 10px 10px no-repeat,
    linear-gradient(to left, rgba(227, 192, 106, 0), #e3c06a) right center / calc(100% - 14px) 1px no-repeat;
}
/* 占いのセクションは、後ろの煙の竜より手前に描く
   (竜は sticky で位置を指定しているので、何もしないと普通の要素=「占い」の見出しより手前に出てしまう) */
.fortune {
  position: relative;
  z-index: 1;
}
/* ===== 「占い」の見出しを、ふわっとゆっくり出す =====
   (JS が、画面の下から 2 割の線を越えたら is-on を付ける) */
.js-deal .fortune h2 {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}
.js-deal .fortune h2.is-on {
  opacity: 1;
  transform: none;
}
/* 飾り線は、文字が出たあとに、真ん中から外へスッと伸びる */
.js-deal .fortune h2::before,
.js-deal .fortune h2::after {
  transform: scaleX(0);
  transition: transform 0.9s ease-out 0.6s;
}
.js-deal .fortune h2::before { transform-origin: right center; }
.js-deal .fortune h2::after  { transform-origin: left center; }
.js-deal .fortune h2.is-on::before,
.js-deal .fortune h2.is-on::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .js-deal .fortune h2,
  .js-deal .fortune h2::before,
  .js-deal .fortune h2::after {
    transition: none;
  }
}
/* ===== Android で、ページの端を越えてスワイプしたときの「伸びて跳ね返る」演出を止める =====
   (一番下で何度かスワイプすると、ページが上下にガクガク揺れて見えるため) */
html {
  overscroll-behavior-y: none;
}

/* ===== お問い合わせ:押しやすいボタンの形にする ===== */
.site-footer {
  /* 予約バー(56px)+ iPhone の下のバー+さらに余白。予約バーとボタンを離す */
  padding-bottom: calc(56px + 56px + env(safe-area-inset-bottom));
}

.footer-mail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;          /* 指で押しやすい高さ(目安は 44px 以上) */
  margin-top: 10px;
  padding: 10px 20px;
  border: 1px solid rgba(184, 174, 200, 0.45);
  border-radius: 999px;
  color: var(--color-text);
  font-size: 0.9rem;
  text-decoration: none;
}
.footer-mail:active {
  background: rgba(184, 174, 200, 0.15); /* 押したとき、少し明るくして「押せた」とわかるように */
}
/* ===== 竜や光が画面の横からはみ出しても、横にスクロールしないようにする =====
   body に overflow-x: hidden を付けると、Android でアドレスバーの出し入れと相性が悪く、
   一番下でブラウザが勝手に上下に動き続ける原因になるので、ページの中身(main)だけを clip で隠す。
   (clip は、ブラウザのスクロールの動きや、竜の sticky には影響しない) */
@supports (overflow-x: clip) {
  main {
    overflow-x: clip;
  }
}
/* clip を知らない古いブラウザ(iOS 15 など)だけ、今までどおり body で隠す */
@supports not (overflow-x: clip) {
  body {
    overflow-x: hidden;
  }
}
/* ===== 文字の出し方:単語が来たら、1文字ずつ自動で次々に流れて出る(だらららら) =====
   (JS が、単語の1文字目が線を越えたら、その単語の文字を全部 is-on にする。ここで1文字ずつ 0.12 秒ずつ遅らせる) */
.story-col .char.is-on {
  transition-delay: calc(var(--i) * 0.12s);
}
/* 判子は、「龍神マッスルが」が流れ終わってから押す(7文字 × 0.12秒 ほど待つ) */
.seal.is-on {
  animation-delay: 1.1s;
}
/* ===== メニューの中:筆文字+金の飾り(「占い」「アクセス」の見出しとそろえる) ===== */
.menu ul {
  max-width: 320px;
  margin: 0 auto;
}

.menu li + li {
  /* 項目の間に、外側に消えていく金の細い線 */
  background: linear-gradient(to right, rgba(227, 192, 106, 0), rgba(227, 192, 106, 0.7) 50%, rgba(227, 192, 106, 0)) top / 100% 1px no-repeat;
}

.menu a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 56px;          /* 指で押しやすい高さ */
  padding: 8px 0;
  font-family: "Yuji Syuku", serif;
  font-size: 1.35rem;
  letter-spacing: 0.3em;
  color: #e3c06a;
  text-shadow: 0 0 14px rgba(227, 192, 106, 0.3);
}

/* 項目の前の、小さい金のひし形 */
.menu a::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #e3c06a;
  transform: rotate(45deg);
}

/* 押したとき、少し明るくして「押せた」とわかるように */
.menu a:active {
  color: #f6dc94;
}

/* ===== メニューボタン(≡ → ×):筆で引いた三本線+円相 =====
   図形(SVG)で描いているので、どの画面でもくっきり表示される。前の「両端をぼかした線」は置き換える */
.menu-button {
  /* まわりの円相(禅の、ひと筆で描いた円) */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M25.73 4.26 L27.22 4.70 L28.63 5.35 L29.97 6.15 L31.23 7.08 L32.41 8.12 L33.48 9.28 L34.43 10.54 L35.27 11.88 L35.98 13.30 L36.55 14.78 L36.99 16.31 L37.28 17.88 L37.42 19.47 L37.42 21.07 L37.27 22.66 L36.97 24.23 L36.52 25.77 L35.94 27.26 L35.21 28.69 L34.36 30.06 L33.39 31.33 L32.30 32.51 L31.10 33.59 L29.81 34.55 L28.44 35.39 L27.00 36.09 L25.50 36.66 L23.95 37.09 L22.36 37.38 L20.76 37.51 L19.16 37.50 L17.56 37.34 L15.99 37.04 L14.45 36.59 L12.96 36.00 L11.53 35.27 L10.18 34.42 L8.91 33.45 L7.74 32.37 L6.67 31.18 L5.72 29.90 L4.90 28.55 L4.20 27.12 L3.64 25.63 L3.21 24.11 L2.93 22.55 L2.80 20.98 L2.81 19.40 L2.96 17.83 L3.26 16.29 L3.70 14.78 L4.28 13.33 L4.98 11.93 L5.82 10.61 L6.76 9.38 L7.82 8.24 L8.98 7.21 L10.22 6.29 L11.55 5.51 L12.96 4.90 L13.10 5.19 L11.83 5.98 L10.61 6.84 L9.48 7.79 L8.44 8.84 L7.50 9.97 L6.67 11.17 L5.95 12.45 L5.35 13.78 L4.87 15.16 L4.52 16.57 L4.30 18.00 L4.21 19.45 L4.26 20.89 L4.43 22.33 L4.73 23.74 L5.16 25.11 L5.71 26.44 L6.38 27.70 L7.16 28.91 L8.05 30.03 L9.03 31.07 L10.10 32.01 L11.25 32.85 L12.47 33.59 L13.75 34.21 L15.08 34.71 L16.45 35.08 L17.84 35.34 L19.26 35.46 L20.67 35.45 L22.09 35.32 L23.48 35.06 L24.84 34.68 L26.16 34.17 L27.43 33.55 L28.64 32.81 L29.78 31.97 L30.83 31.02 L31.80 29.99 L32.67 28.87 L33.44 27.68 L34.09 26.42 L34.63 25.11 L35.05 23.75 L35.35 22.36 L35.52 20.95 L35.56 19.52 L35.48 18.10 L35.26 16.69 L34.92 15.30 L34.45 13.94 L33.87 12.63 L33.16 11.37 L32.35 10.18 L31.43 9.06 L30.42 8.02 L29.31 7.07 L28.12 6.22 L26.86 5.45 L25.56 4.73 Z' fill='%23e3c06a' fill-opacity='0.85'/%3E%3C/svg%3E") center / 40px 40px no-repeat;
}

.menu-button span {
  height: 6px;
  border-radius: 0;
  box-shadow: none;
  /* 筆で引いた線:入りが太く、右へ細くかすれる */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 12'%3E%3Cpath d='M2.2 6.2 C3.4 2.6 9 2.9 17 3.5 C27 4.2 37 4.1 45.6 5.3 C47.2 5.6 47.3 6.7 45.7 6.9 C38 7.9 28 8.3 18 8.6 C10 8.9 5 9.8 2.7 8.6 C1.5 8 1.3 7 2.2 6.2 Z' fill='%23e3c06a'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* 線の太さが 6px になったので、3本の位置を上に 2px ずらす(線の中心の間隔 7px は今までどおり) */
.menu-button span:nth-child(1) { top: 12px; }
.menu-button span:nth-child(2) { top: 19px; left: 14px; width: 16px; }
.menu-button span:nth-child(3) { top: 26px; }