@charset "UTF-8";
/* ============================================================
   瑞稀ツインレイ占い — 白ベース／天空の神域
   メニュー＝雲の中｜トップ＝天空｜神託＝地上｜フッター＝水
   ============================================================ */

:root {
  --c-base: #f7f4ee;
  --c-base-soft: #f4f2ec;
  --c-base-cool: #eef1f4;
  --c-ink: #2a3140;
  --c-ink-soft: rgba(42, 49, 64, 0.66);
  --c-gold: #b08a2e;
  --c-gold-light: #d9b25e;
  --c-verm: #b5301c;
  --c-verm-deep: #7d1b10;
  --font-mincho: "Shippori Mincho", "Zen Old Mincho", "Hiragino Mincho ProN", serif;
  --font-en: "Cormorant Garamond", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  font-size: 107%; /* サイト全体の文字を一回り大きく（約17px基準） */
}

body {
  font-family: var(--font-mincho);
  background: var(--c-base);
  color: var(--c-ink);
  letter-spacing: 0.08em;
  line-height: 1.9;
  overflow-x: hidden;
}

body.is-loading { overflow: hidden; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; }

/* ============================================================
   ローディング — 朱塗りの御扉
   ============================================================ */

.loading {
  position: fixed;
  inset: 0;
  z-index: 100;
  perspective: 1700px;
  visibility: visible;
}

.loading.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

/* 御扉（朱漆・金具・黒framed框） */
.loading__door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  background-color: #98220f;
  background-image:
    /* 金の門鋲（縦一列） */
    radial-gradient(circle, #f0dda6 0 2.4px, #8a5a1a 3px, rgba(0, 0, 0, 0.28) 4px, transparent 5.5px),
    /* 板の継ぎ目 */
    repeating-linear-gradient(90deg, rgba(70, 10, 3, 0.32) 0 2px, transparent 2px 25%),
    /* 漆の照り */
    linear-gradient(112deg, rgba(255, 235, 205, 0.16) 0%, rgba(255, 255, 255, 0.04) 28%, transparent 46%, rgba(0, 0, 0, 0.22) 100%),
    /* 朱の地 */
    linear-gradient(90deg, #8e2114 0%, #b5301c 46%, #7d1b10 100%);
  background-size: 52px 128px, auto, auto, auto;
  background-repeat: repeat-y, repeat, no-repeat, no-repeat;
  transition: transform 2.1s cubic-bezier(0.74, 0, 0.14, 1) 0.12s;
  will-change: transform;
}

.loading__door--left {
  left: 0;
  transform-origin: left center;
  background-position: calc(100% - 30px) 64px, 0 0, 0 0, 0 0;
  box-shadow: inset -26px 0 52px rgba(0, 0, 0, 0.42);
}

.loading__door--right {
  right: 0;
  transform-origin: right center;
  background-position: 30px 64px, 0 0, 0 0, 0 0;
  box-shadow: inset 26px 0 52px rgba(0, 0, 0, 0.42);
}

/* 黒漆の框（上下の帯）と金の縁 */
.loading__door::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    #171210 0%,
    #171210 7%,
    var(--c-gold-light) 7%,
    var(--c-gold-light) calc(7% + 2px),
    transparent calc(7% + 2px),
    transparent calc(93% - 2px),
    var(--c-gold-light) calc(93% - 2px),
    var(--c-gold-light) 93%,
    #171210 93%,
    #171210 100%
  );
}

/* 金の取手（環） */
.loading__door::after {
  content: "";
  position: absolute;
  top: 60%;
  width: 56px;
  height: 56px;
  margin-top: -28px;
  border: 3px solid var(--c-gold-light);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 244, 214, 0.55), transparent 62%);
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.4),
    0 0 22px rgba(217, 178, 94, 0.3),
    inset 0 0 10px rgba(0, 0, 0, 0.45);
}

.loading__door--left::after { right: 56px; }
.loading__door--right::after { left: 56px; }

body.doors-open .loading__door--left { transform: rotateY(-102deg); }
body.doors-open .loading__door--right { transform: rotateY(102deg); }

/* 中央の合わせ目から漏れる光 */
.loading__seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 246, 220, 0.9) 18%,
    rgba(255, 246, 220, 0.9) 82%,
    transparent
  );
  filter: blur(1px);
  opacity: 0.35;
  animation: seamPulse 2.4s ease-in-out infinite;
}

@keyframes seamPulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.75; }
}

body.doors-open .loading__seam {
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: none;
}

/* 中央の神紋と文言 */
.loading__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  transition: opacity 0.6s ease;
}

body.doors-open .loading__center { opacity: 0; }

.loading__crest {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  border: 2px solid var(--c-gold-light);
  border-radius: 50%;
  box-shadow:
    0 0 0 7px rgba(217, 178, 94, 0.18),
    0 0 0 8.5px rgba(217, 178, 94, 0.45),
    0 0 44px rgba(217, 178, 94, 0.35),
    inset 0 0 26px rgba(125, 27, 16, 0.55);
  background: radial-gradient(circle at 50% 42%, rgba(255, 244, 214, 0.14), rgba(125, 27, 16, 0.25) 70%);
  animation: crestIn 1.6s ease both;
}

.loading__crest i {
  font-style: normal;
  font-size: 2.6rem;
  font-weight: 600;
  color: #f6e7bf;
  text-shadow: 0 0 18px rgba(217, 178, 94, 0.6);
}

@keyframes crestIn {
  0% { opacity: 0; transform: scale(0.9); filter: blur(5px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

.loading__text {
  font-size: 0.88rem;
  letter-spacing: 0.52em;
  text-indent: 0.52em;
  color: rgba(255, 248, 236, 0.92);
  text-shadow: 0 1px 8px rgba(90, 15, 5, 0.6);
  animation: crestIn 1.6s ease 0.3s both;
}

/* ============================================================
   ヘッダー
   ============================================================ */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 34px 42px;
  background: linear-gradient(
    to bottom,
    rgba(250, 250, 248, 0.85) 0%,
    rgba(250, 250, 248, 0.4) 55%,
    transparent 100%
  );
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 1.6s ease 0.3s, transform 1.6s ease 0.3s;
}

body.is-ready .header {
  opacity: 1;
  transform: translateY(0);
}

.header__logo {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.header__logo-main {
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--c-ink);
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.8);
}

.header__logo-sub {
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  color: var(--c-verm);
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.8);
}

.header__menu-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 4px;
}

.header__menu-lines {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 34px;
}

.header__menu-lines i {
  display: block;
  height: 1.5px;
  background: var(--c-ink);
  transition: transform 0.5s ease, width 0.5s ease, background 0.5s ease;
}

.header__menu-lines i:last-child { width: 60%; align-self: flex-end; }

.header__menu-btn:hover .header__menu-lines i { background: var(--c-verm); }

body.nav-open .header__menu-lines i:first-child { transform: translateY(4px) rotate(18deg); }
body.nav-open .header__menu-lines i:last-child { width: 100%; transform: translateY(-4px) rotate(-18deg); }

.header__menu-label {
  font-family: var(--font-en);
  font-size: 0.78rem;
  letter-spacing: 0.36em;
  color: var(--c-ink);
}

/* ============================================================
   全画面メニュー — 雲の中
   ============================================================ */

.nav {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--c-base); /* 背面のページが透けないよう不透明の下地 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}

body.nav-open .nav {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease;
}

/* 背景写真（ホバーで切替）。切替の隙間には常に龍が見えるよう下地に敷く */
.nav__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../assets/img/dragon.jpg") center / cover no-repeat;
}

.nav__bg .bgslide,
.oracle__bg .bgslide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.1s ease, transform 6s ease;
  will-change: opacity;
}

.nav__bg .bgslide.is-active,
.oracle__bg .bgslide.is-active {
  opacity: 1;
  transform: scale(1);
}

/* 雲の中の白いヴェール */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(250, 250, 248, 0.32) 0%, rgba(248, 248, 246, 0.62) 100%),
    linear-gradient(to bottom, rgba(250, 250, 248, 0.72), rgba(246, 246, 244, 0.42) 45%, rgba(244, 246, 248, 0.66));
  pointer-events: none;
}

.nav__list {
  position: relative;
  z-index: 2;
  list-style: none;
  display: flex;
  flex-direction: row-reverse;
  gap: clamp(30px, 6.5vw, 72px);
}

.nav__list a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 44px 8px;
  opacity: 0;
  transform: translateY(16px);
}

body.nav-open .nav__list a {
  animation: navIn 0.9s ease forwards;
}

body.nav-open .nav__list li:nth-child(1) a { animation-delay: 0.1s; }
body.nav-open .nav__list li:nth-child(2) a { animation-delay: 0.18s; }
body.nav-open .nav__list li:nth-child(3) a { animation-delay: 0.26s; }
body.nav-open .nav__list li:nth-child(4) a { animation-delay: 0.34s; }
body.nav-open .nav__list li:nth-child(5) a { animation-delay: 0.42s; }

@keyframes navIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ホバーで上下に伸びる線 */
.nav__list a::before,
.nav__list a::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 0;
  margin-left: -0.5px;
  background: linear-gradient(to bottom, var(--c-gold), var(--c-gold-light));
  transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav__list a::before { bottom: 100%; }
.nav__list a::after { top: 100%; }

.nav__list a:hover::before,
.nav__list a:hover::after,
.nav__list a:focus-visible::before,
.nav__list a:focus-visible::after {
  height: 38px;
}

.nav__jp {
  writing-mode: vertical-rl;
  font-size: 1.25rem;
  letter-spacing: 0.42em;
  min-height: 8.8em;
  color: var(--c-ink);
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.85);
  transition: color 0.4s ease;
}

/* 神託と同じく、日本語の下に英語表記 */
.nav__en {
  font-family: var(--font-en);
  font-size: 0.64rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--c-verm);
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.9);
}

.nav__list a:hover .nav__jp,
.nav__list a:focus-visible .nav__jp {
  color: var(--c-verm);
}

/* ============================================================
   トップ — 天空
   ============================================================ */

main { position: relative; z-index: 10; }

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: -3%;
  background: url("../assets/img/bg1.jpg") center / cover no-repeat;
  animation: skyDrift 46s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes skyDrift {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.07) translateY(-1.6%); }
}

/* 空の上の柔らかな白み（ヘッダー可読性） */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(250, 250, 248, 0.5) 0%,
    rgba(250, 250, 248, 0.08) 26%,
    transparent 50%
  );
  pointer-events: none;
}

.hero__copy {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 40px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 2s ease 0.6s, transform 2s ease 0.6s;
}


body.is-ready .hero__copy {
  opacity: 1;
  transform: translateY(0);
}

.hero__title {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: clamp(26px, 5vw, 52px);
  font-weight: 600;
}

.hero__title-line {
  writing-mode: vertical-rl;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  letter-spacing: 0.42em;
  color: #ffffff;
  text-shadow:
    0 1px 3px rgba(38, 58, 88, 0.7),
    0 2px 12px rgba(38, 58, 88, 0.55),
    0 6px 34px rgba(38, 58, 88, 0.4);
}

.hero__sub {
  margin-top: 40px;
  font-size: 0.82rem;
  letter-spacing: 0.5em;
  color: #fdf6e5;
  text-shadow: 0 1px 4px rgba(46, 66, 96, 0.6), 0 2px 18px rgba(46, 66, 96, 0.45);
}

/* --- 文字の下を隠す煙（雲） --- */
.hero__smoke {
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -14vh;
  height: 56vh;
  z-index: 3;
  pointer-events: none;
}

/* 下端は白へ溶ける */
.hero__smoke::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(253, 253, 252, 0.55) 46%,
    rgba(253, 253, 252, 0.96) 74%,
    #fdfdfc 100%
  );
}

.hero__smoke i {
  position: absolute;
  bottom: 18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.55) 55%, rgba(255, 255, 255, 0) 100%);
  animation: smokeDrift 12s ease-in-out infinite alternate;
  will-change: transform;
}

.hero__smoke i:nth-child(1) { left: -6%; width: 44vw; height: 22vh; animation-duration: 13s; }
.hero__smoke i:nth-child(2) { left: 16%; width: 38vw; height: 26vh; bottom: 10%; animation-duration: 17s; animation-delay: -4s; }
.hero__smoke i:nth-child(3) { left: 36%; width: 46vw; height: 24vh; animation-duration: 15s; animation-delay: -8s; }
.hero__smoke i:nth-child(4) { left: 58%; width: 40vw; height: 27vh; bottom: 8%; animation-duration: 19s; animation-delay: -2s; }
.hero__smoke i:nth-child(5) { left: 76%; width: 42vw; height: 22vh; animation-duration: 14s; animation-delay: -6s; }
.hero__smoke i:nth-child(6) { left: 8%; width: 52vw; height: 18vh; bottom: 32%; opacity: 0.75; animation-duration: 21s; animation-delay: -10s; }
.hero__smoke i:nth-child(7) { left: 48%; width: 56vw; height: 17vh; bottom: 30%; opacity: 0.65; animation-duration: 18s; animation-delay: -13s; }

@keyframes smokeDrift {
  from { transform: translateX(-3.5%) scale(1); }
  to { transform: translateX(3.5%) scale(1.06); }
}

.hero__scroll {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transition: opacity 2s ease 1.6s;
}

body.is-ready .hero__scroll { opacity: 1; }

.hero__scroll-text {
  writing-mode: vertical-rl;
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  color: var(--c-ink-soft);
}

.hero__scroll-line {
  width: 1px;
  height: 54px;
  background: rgba(176, 138, 46, 0.45);
  overflow: hidden;
  position: relative;
}

.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-gold);
  animation: scrollLine 2.2s ease-in-out infinite;
}

@keyframes scrollLine {
  0% { transform: translateY(-100%); }
  55% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ============================================================
   雲を潜る帯
   ============================================================ */

.dive {
  position: relative;
  height: 40vh;
  background: linear-gradient(to bottom, #fdfdfc 0%, #f9f8f4 55%, var(--c-base-soft) 100%);
  overflow: hidden;
}

.dive i {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(222, 228, 236, 0.55) 0%, rgba(228, 233, 240, 0.25) 55%, transparent 100%);
  will-change: transform;
}

.dive i:nth-child(1) { top: 4%; left: -8%; width: 52vw; height: 24vh; }
.dive i:nth-child(2) { top: 18%; left: 52%; width: 58vw; height: 28vh; }
.dive i:nth-child(3) { top: 44%; left: 8%; width: 48vw; height: 24vh; }
.dive i:nth-child(4) { top: 58%; left: 58%; width: 46vw; height: 22vh; }
.dive i:nth-child(5) { top: 74%; left: 22%; width: 56vw; height: 26vh; }

/* ============================================================
   神託を選ぶ — 地上
   ============================================================ */

.oracle {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10vh 24px 14vh;
  overflow: hidden;
}

.oracle__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* 白のヴェール（上は雲から、下は水へ） */
.oracle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    var(--c-base-soft) 0%,
    rgba(247, 244, 238, 0.66) 16%,
    rgba(247, 244, 238, 0.5) 52%,
    rgba(238, 241, 244, 0.86) 100%
  );
  pointer-events: none;
}

.oracle__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1080px;
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1.9s ease 0.15s, transform 1.9s ease 0.15s;
}

.oracle__inner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.oracle__heading {
  text-align: center;
  margin-bottom: clamp(56px, 9vh, 96px);
}

.oracle__title {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 600;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--c-ink);
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.9);
}

.oracle__en {
  margin-top: 14px;
  font-family: var(--font-en);
  font-size: 0.75rem;
  letter-spacing: 0.6em;
  text-indent: 0.6em;
  color: var(--c-verm);
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.9);
}

.oracle__lead {
  margin-top: 30px;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  color: var(--c-ink-soft);
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.9);
}

/* --- 横並びの神託 --- */
.oracle__list {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: clamp(14px, 5.5vw, 72px);
}

.oracle__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 46px 10px;
}

/* ホバーで上下に伸びる線（メニューと同じ作法） */
.oracle__item::before,
.oracle__item::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 0;
  margin-left: -0.5px;
  background: linear-gradient(to bottom, var(--c-gold), var(--c-gold-light));
  transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.oracle__item::before { bottom: 100%; }
.oracle__item::after { top: 100%; }

.oracle__item:hover::before,
.oracle__item:hover::after,
.oracle__item:focus-visible::before,
.oracle__item:focus-visible::after {
  height: 40px;
}

.oracle__jp {
  writing-mode: vertical-rl;
  font-size: clamp(1.15rem, 2.3vw, 1.65rem);
  font-weight: 600;
  letter-spacing: 0.38em;
  color: var(--c-ink);
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.9);
  transition: color 0.4s ease;
  min-height: 7.5em;
}

.oracle__item-en {
  font-family: var(--font-en);
  font-size: 0.64rem;
  letter-spacing: 0.3em;
  color: var(--c-verm);
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.9);
}

.oracle__item:hover .oracle__jp,
.oracle__item:focus-visible .oracle__jp {
  color: var(--c-verm);
}

/* ============================================================
   フッター — 水
   ============================================================ */

.footer {
  position: relative;
  z-index: 10;
  overflow: hidden;
  text-align: center;
  padding: 150px 24px 56px;
  background: linear-gradient(to bottom, var(--c-base-cool) 0%, #e2e9ee 60%, #d8e2e8 100%);
}

.footer__inner {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.8s ease 0.1s, transform 1.8s ease 0.1s;
}

.footer__inner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.footer__logo {
  font-size: 1.05rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--c-ink);
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.9);
}

/* フッターのページリンク */
.footer__nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 30px;
  margin-top: 28px;
}

.footer__nav a {
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  color: var(--c-ink);
  border-bottom: 1px solid rgba(176, 138, 46, 0.5);
  padding-bottom: 3px;
  transition: color 0.3s ease;
}

.footer__nav a:hover { color: var(--c-verm); }

/* LINE・SNSアイコン */
.footer__social {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
}

.footer__social a {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(42, 49, 64, 0.35);
  border-radius: 50%;
  color: var(--c-ink);
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.footer__social a:hover {
  color: #fff8ec;
  background: var(--c-verm);
  border-color: var(--c-verm);
  transform: translateY(-3px);
}

.footer__social svg { width: 21px; height: 21px; }

/* 演出なしページ用（フッターを常時表示） */
.footer--static .footer__inner {
  opacity: 1;
  transform: none;
}

.footer__note {
  margin-top: 26px;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--c-ink-soft);
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.85);
}

.footer__copy {
  margin-top: 42px;
  font-family: var(--font-en);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  color: rgba(42, 49, 64, 0.55);
}

/* ============================================================
   レスポンシブ
   ============================================================ */

@media (max-width: 768px) {
  .header { padding: 20px 20px 34px; }
  .header__logo-main { font-size: 1.3rem; }
  .header__logo-sub { font-size: 0.62rem; }

  .nav__list { gap: 14px; }
  .nav__list a { padding: 34px 4px; }
  .nav__jp { font-size: 1.02rem; letter-spacing: 0.32em; min-height: 8.2em; }
  .nav__en { font-size: 0.55rem; letter-spacing: 0.2em; text-indent: 0.2em; }

  .hero__title { gap: 22px; }
  .hero__title-line { font-size: 1.3rem; letter-spacing: 0.34em; }
  .hero__sub { margin-top: 26px; font-size: 0.68rem; letter-spacing: 0.34em; }
  .hero__copy { padding: 0 22px 90px; }
  .hero__scroll { bottom: 20px; }

  .dive { height: 26vh; }

  .oracle { padding: 8vh 14px 11vh; }
  .oracle__list { gap: 8px; }
  .oracle__item { padding: 34px 6px; }
  .oracle__jp { font-size: 1.05rem; letter-spacing: 0.3em; min-height: 6.8em; }
  .oracle__item-en { font-size: 0.55rem; }

  .loading__door::after { width: 42px; height: 42px; margin-top: -21px; }
  .loading__door--left::after { right: 34px; }
  .loading__door--right::after { left: 34px; }
  .loading__crest { width: 92px; height: 92px; }
  .loading__crest i { font-size: 2.1rem; }
}

/* ============================================================
   モーション低減設定
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__bg,
  .hero__smoke i,
  .hero__scroll-line::after,
  .loading__seam { animation: none; }
  .loading__door { transition-duration: 0.4s; }
  .oracle__inner,
  .footer__inner { transition-duration: 0.6s; }
}