@charset "UTF-8";

/* ============================================================
   事前登録LP CSS  ―  オズの原罪 (slug: sin-of-oz)
   全セレクタは #sin-of-oz 配下にスコープ（他LPと干渉しない）
   ブレイクポイント: SP = 〜768px / PC = 769px〜
   ============================================================ */


/* ============================================================
   ページレベルの最小上書き
   lp_common.css の html,body height:100% 対策 + 全面ダーク背景
   ============================================================ */
html,
body {
  height: auto;
  min-height: 100%;
}
/* このLPは全面ダーク。ページ地を黒にして白フラッシュを防ぐ */
body {
  background: #000;
}


/* ============================================================
   #sin-of-oz ベース
   ============================================================ */
#sin-of-oz *,
#sin-of-oz *::before,
#sin-of-oz *::after {
  box-sizing: border-box;
}

#sin-of-oz {
  scroll-behavior: smooth;
  overflow-x: hidden;
  min-width: 320px;
  font-family: 'Noto Sans JP', sans-serif;
  color: #fff;
  background: #000;
}

#sin-of-oz img {
  max-width: 100%;
  height: auto;
  display: block;
}

#sin-of-oz picture {
  display: block;
  font-size: 0;
  line-height: 0;
}

#sin-of-oz #lp_wrapper {
  background: transparent;
  box-shadow: none;
}

#sin-of-oz .lp_main,
#sin-of-oz main,
#sin-of-oz main > section {
  margin: 0;
  padding: 0;
  gap: 0;
}


/* ============================================================
   ヘッダ / フッタ（ローカル確認用ダミー / PHP化時に置換）
   ============================================================ */
#sin-of-oz #lp_header_area,
#sin-of-oz #lp_footer_area {
  position: relative;
  z-index: 5;
  background: #0a0a0a;
}

#sin-of-oz #lp_header_area {
  height: 45px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid rgba(240, 205, 134, 0.25);
}

#sin-of-oz #lp_header_area ul { list-style: none; margin: 0; padding: 0; }
#sin-of-oz #lp_header_area a { text-decoration: none; }
#sin-of-oz #lp_header_area #logo {
  color: #f0cd86;
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
}

#sin-of-oz #lp_footer_area {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(240, 205, 134, 0.25);
}
#sin-of-oz #lp_footer_area #copyright small {
  color: #9a948a;
  font-size: 12px;
  letter-spacing: 0.06em;
}


/* ============================================================
   レスポンシブ表示制御（PC/SP の出し分け）
   ============================================================ */
#sin-of-oz .pc-only-wrap,
#sin-of-oz .pc-only {
  display: none !important;
}
#sin-of-oz .sp-only-wrap {
  display: block !important;
  width: 100%;
}
#sin-of-oz .sp-only {
  display: block !important;
}


/* ============================================================
   背景/メイン画像の隙間防止
   ============================================================ */
#sin-of-oz .fv-bg picture,
#sin-of-oz .fv-bg > img,
#sin-of-oz .section-bg-img picture,
#sin-of-oz .section-bg-img > img {
  display: block;
  width: 100%;
  font-size: 0;
  line-height: 0;
  vertical-align: bottom;
}


/* ============================================================
   セクション共通タイトル（STORY / CHARACTER / GAME SYSTEM）
   金グラデの英字見出し + 左右の飾り + アンダー飾り + 和名
   ============================================================ */
#sin-of-oz .section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

#sin-of-oz .ttl-en {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 4vw, 50px);
  margin: 0;
}

#sin-of-oz .ttl-en .ttl-text {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: clamp(34px, 7vw, 96px);
  line-height: 1.1;
  white-space: nowrap;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #ffe1a4 0%, #ba903c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

#sin-of-oz .ttl-en .ttl-deco {
  flex-shrink: 0;
  width: clamp(28px, 5vw, 50px);
}
#sin-of-oz .ttl-en .ttl-deco img { width: 100%; height: auto; }

#sin-of-oz .ttl-under {
  width: 54px;
  margin-top: 2px;
}
#sin-of-oz .ttl-under img { width: 100%; height: auto; }

#sin-of-oz .ttl-jp {
  margin: 4px 0 0;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: clamp(15px, 3.4vw, 24px);
  letter-spacing: 0.18em;
  color: #fff;
}


/* ============================================================
   事前登録ボタン3点セット
   (A) 事前登録ボタン本体 / (B) 詳細ボタン / (C) 対応デバイスアイコン
   ============================================================ */

/* (共通) ボタンベース */
#sin-of-oz a.btn_reserve {
  display: block;
  width: 100%;
  font-size: 0;
  color: transparent;
  text-decoration: none;
  text-indent: -9999px;
  overflow: hidden;
  background: no-repeat center / 100% 100%;
  transition: opacity 0.15s ease, filter 0.15s ease;
}
#sin-of-oz a.reserved,
#sin-of-oz a.btn_reserve.reserved {
  pointer-events: none;
}

/* ----- (A) 事前登録ボタン本体（4状態） ----- */
#sin-of-oz .btns .btn a.btn_reserve {
  aspect-ratio: 489 / 100;
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sin-of-oz/preregistration.png);
}
.webp #sin-of-oz .btns .btn a.btn_reserve {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sin-of-oz/preregistration.webp);
}
#sin-of-oz .btns .btn a.btn_reserve:hover,
#sin-of-oz .btns .btn a.btn_reserve:active {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sin-of-oz/preregistration_hover.png);
}
.webp #sin-of-oz .btns .btn a.btn_reserve:hover,
.webp #sin-of-oz .btns .btn a.btn_reserve:active {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sin-of-oz/preregistration_hover.webp);
}
#sin-of-oz .btns .btn a.btn_reserve.reserved {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sin-of-oz/preregistration_disabled.png);
}
.webp #sin-of-oz .btns .btn a.btn_reserve.reserved {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sin-of-oz/preregistration_disabled.webp);
}
#sin-of-oz .btns .btn a.btn_reserve.end {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sin-of-oz/play_game.png);
}
.webp #sin-of-oz .btns .btn a.btn_reserve.end {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sin-of-oz/play_game.webp);
}
#sin-of-oz .btns .btn a.btn_reserve.end:hover,
#sin-of-oz .btns .btn a.btn_reserve.end:active {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sin-of-oz/play_game_hover.png);
}
.webp #sin-of-oz .btns .btn a.btn_reserve.end:hover,
.webp #sin-of-oz .btns .btn a.btn_reserve.end:active {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sin-of-oz/play_game_hover.webp);
}

/* ----- (B) 詳細ボタン（2状態） ----- */
/* 注: #sin-of-oz a.btn_reserve(=display:block/width:100%) と同等の詳細度にするため
       a.btn-detail-link で指定し、後勝ちで上書きする */
#sin-of-oz a.btn-detail-link {
  display: inline-block;
  width: 30vw;
  max-width: 150px;
  flex-shrink: 0;
  aspect-ratio: 3 / 2;
  font-size: 0;
  color: transparent;
  text-indent: 0;
  text-decoration: none;
  border: none;
  background: no-repeat center / 100% 100%
              url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sin-of-oz/preregistration_info.png);
}
.webp #sin-of-oz a.btn-detail-link {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sin-of-oz/preregistration_info.webp);
}
#sin-of-oz a.btn-detail-link:hover,
#sin-of-oz a.btn-detail-link:active {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sin-of-oz/preregistration_info_hover.png);
}
.webp #sin-of-oz a.btn-detail-link:hover,
.webp #sin-of-oz a.btn-detail-link:active {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/sin-of-oz/preregistration_info_hover.webp);
}

/* ----- (C) 対応デバイスアイコン（装飾） ----- */
#sin-of-oz .detail .device {
  width: 18vw;
  max-width: 84px;
  flex-shrink: 0;
}
#sin-of-oz .detail .device img { width: 100%; height: auto; }

/* ----- 3点セット レイアウト（FV） ----- */
#sin-of-oz .fv_btn.btns {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4vw;
  width: 100%;
  padding: 4vw 5vw 0;
}
#sin-of-oz .fv_btn .btn {
  width: 80%;
  max-width: 489px;
}
#sin-of-oz .fv_btn .detail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3vw;
}

/* ----- セクション内CTA（事前登録ボタンのみ） ----- */
#sin-of-oz .section-btn.btns {
  display: flex;
  justify-content: center;
  padding: 12vw 5vw;
  background: #000;
}
#sin-of-oz .section-btn .btn {
  width: 80%;
  max-width: 489px;
}


/* ============================================================
   FV（ファーストビュー）
   ============================================================ */
#sin-of-oz .section-fv {
  position: relative;
  overflow: hidden;
  padding: 24px 0 56px;
  background: #000;
}
/* SPは書斎背景(bg_fv)を使わず黒地。キービジュアル(chara_fv)が主役。
   ※PC(min-width:769px)でのみ書斎背景を表示する */
#sin-of-oz .fv-bg {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
}
#sin-of-oz .fv-bg picture,
#sin-of-oz .fv-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#sin-of-oz .fv-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.55) 100%);
}

#sin-of-oz .fv-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 10px 0 0;
}
#sin-of-oz .fv-logo {
  margin: 0;
  width: 84%;
  max-width: 560px;
}
/* SP: メイン画像を画面いっぱい、コピー画像を下部にabsoluteで下ぞろえ・重ねる */
#sin-of-oz .fv-kv {
  position: relative;
  width: 100%;
}
#sin-of-oz .fv-visual {
  width: 100%;
}
#sin-of-oz .fv-visual img { width: 100%; height: auto; display: block; }
#sin-of-oz .fv-catch {
  position: absolute;
  left: 9%;
  bottom: 2%;
  transform: translateX(-50%);
  width: 80%;
  margin: 0;
}
#sin-of-oz .fv-catch img { width: 100%; height: auto; display: block; }


/* ============================================================
   STORY
   ============================================================ */
#sin-of-oz .section-story {
  position: relative;
  overflow: hidden;
  padding: 64px 16px 80px;
  background: #050507;
}
#sin-of-oz .section-story .section-bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
}
#sin-of-oz .section-story .section-bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#sin-of-oz .story-illust {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.65;
  pointer-events: none;
}
#sin-of-oz .story-illust picture,
#sin-of-oz .story-illust img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#sin-of-oz .story-window {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
#sin-of-oz .story-main {
  font-family: 'Noto Serif JP', serif;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 10px rgba(0,0,0,0.85), 0 0 10px rgba(0,0,0,0.85);
}
#sin-of-oz .story-main p {
  margin: 0 0 1.8em;
  font-size: clamp(14px, 2.7vw, 24px);
  line-height: 2.1;
  font-weight: 500;
}
#sin-of-oz .story-main p:last-child { margin-bottom: 0; }
/* 文節をまとまりとして扱い、途中で折り返さないようにする */
#sin-of-oz .story-main .ph {
  display: inline-block;
}
#sin-of-oz .story-main .em {
  color: #f0cd86;
  font-size: 1.4em;
  font-weight: 600;
  letter-spacing: 0.02em;
}


/* ============================================================
   CHARACTER
   ============================================================ */
#sin-of-oz .section-character {
  position: relative;
  padding: 64px 16px 72px;
  background: #000;
}
#sin-of-oz .character-window {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
#sin-of-oz .character-main {
  /* SPはセクション左右padding(16px)を相殺して画像を画面幅いっぱいに */
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
  display: flex;
  justify-content: center;
}
/* 2枚（人間態／ぬいぐるみ態）を重ねて時間でクロスフェード切り替え */
#sin-of-oz .character-cross {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
#sin-of-oz .character-cross .char-frame {
  margin: 0;
}
/* 1枚目は通常フロー（高さの基準）＋フェード */
#sin-of-oz .character-cross .char-frame--1 {
  position: relative;
  animation: charCrossA 14s ease-in-out infinite;
}
/* 2枚目は1枚目に重ねてフェード */
#sin-of-oz .character-cross .char-frame--2 {
  position: absolute;
  inset: 0;
  animation: charCrossB 14s ease-in-out infinite;
}
#sin-of-oz .character-cross .char-frame picture {
  display: block;
  width: 100%;
  height: 100%;
}
#sin-of-oz .character-cross .char-frame--1 img {
  width: 100%;
  height: auto;
}
#sin-of-oz .character-cross .char-frame--2 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes charCrossA {
  0%, 42%  { opacity: 1; }
  50%, 92% { opacity: 0; }
  100%     { opacity: 1; }
}
@keyframes charCrossB {
  0%, 42%  { opacity: 0; }
  50%, 92% { opacity: 1; }
  100%     { opacity: 0; }
}


/* ============================================================
   GAME SYSTEM（Swiperスライダー）
   ============================================================ */
#sin-of-oz .section-system {
  position: relative;
  overflow: hidden;
  padding: 64px 12px 72px;
  background: #000;
}
/* 装飾背景（花＋斧モチーフ） */
#sin-of-oz .system-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
#sin-of-oz .system-deco-img {
  display: block;
  position: absolute;
  width: 52vw;
  max-width: 260px;
  opacity: 0.16;
}
#sin-of-oz .system-deco-img img { width: 100%; height: auto; }
/* SPは左下寄りに1つ（右は非表示） */
#sin-of-oz .system-deco-l { left: -10%; top: 34%; }
#sin-of-oz .system-deco-r { display: none; }

#sin-of-oz .system-window {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
#sin-of-oz .system-main { width: 100%; }

#sin-of-oz .detail-slider-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 8px 0;
}
#sin-of-oz .detail-slider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
}
/* SP: 矢印はゲーム画面の左右に絶対配置 */
#sin-of-oz .slider-arrow {
  position: absolute;
  top: 58%;
  transform: translateY(-50%);
  z-index: 3;
  background: none;
  border: none;
  cursor: pointer;
  width: 12vw;
  max-width: 56px;
  flex-shrink: 0;
  padding: 0;
  opacity: 0.85;
  transition: opacity 0.2s, filter 0.2s;
}
#sin-of-oz .slider-prev { left: 0; }
#sin-of-oz .slider-next { right: 0; }
#sin-of-oz .slider-arrow img { width: 100%; height: auto; }
#sin-of-oz .slider-arrow:hover {
  opacity: 1;
  filter: brightness(1.25) drop-shadow(0 0 6px rgba(240,205,134,0.6));
}
#sin-of-oz .slider-viewport {
  flex: 1 1 auto;
  width: auto;
  max-width: 880px;
  overflow: hidden;
}
#sin-of-oz .slider-viewport .swiper-container { width: 100%; }

/* スライド内: 各スライドは見出し+ゲーム画面を1枚にした画像 */
#sin-of-oz .system-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 4px 16px;
}
#sin-of-oz .system-slide picture { display: block; width: 100%; }
#sin-of-oz .system-slide img {
  display: block;
  width: 100%;
  height: auto;
}
/* SP: 縦長1枚画像（見出し+枠付き画面） */
#sin-of-oz .system-slide--sp {
  padding: 4px 0 12px;
}

/* ページネーション（金ダイヤ） */
#sin-of-oz .slider-dots { width: auto; }
#sin-of-oz .slider-dots .swiper-pagination {
  position: static;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
#sin-of-oz .slider-dots .swiper-pagination-bullet {
  width: 14px;
  height: 14px;
  border-radius: 0;
  background: transparent;
  border: 2px solid #f0cd86;
  transform: rotate(45deg);
  opacity: 1;
  margin: 0;
  transition: background 0.2s;
}
#sin-of-oz .slider-dots .swiper-pagination-bullet-active {
  background: #f0cd86;
}


/* ============================================================
   セクション間の装飾
   ============================================================ */
#sin-of-oz .section-deco {
  width: 100%;
  max-width: 1620px;
  margin: 0 auto;
  padding: 0 24px;
  background: #000;
}
#sin-of-oz .section-deco img {
  width: clamp(72px, 12vw, 140px);
  height: auto;
  opacity: 0.5;
}
#sin-of-oz .section-deco.deco-right { text-align: right; }
#sin-of-oz .section-deco.deco-right img { margin-left: auto; }
#sin-of-oz .section-deco.deco-left { text-align: left; }


/* 詳細モーダル（#grobal_overlay）は共通の reserve_common.css に準拠させるため、
   案件CSS側では一切スタイルを当てない（他ページと同じ見た目で表示する） */


/* ============================================================
   PC (min-width: 769px) 上書き
   ============================================================ */
@media (min-width: 769px) {
  #sin-of-oz .pc-only-wrap,
  #sin-of-oz .pc-only {
    display: block !important;
  }
  #sin-of-oz .pc-only-wrap { width: 100%; }
  #sin-of-oz .sp-only-wrap,
  #sin-of-oz .sp-only {
    display: none !important;
  }

  /* FV: 左にロゴ＋キャッチ、右にキービジュアル */
  #sin-of-oz .section-fv { padding: 40px 0 64px; }
  /* PCのみ書斎背景(bg_fv)を表示 */
  #sin-of-oz .fv-bg { display: block; }
  #sin-of-oz .fv-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "logo   visual"
      "catch  visual";
    align-items: center;
    column-gap: 24px;
    row-gap: 8px;
    padding: 20px 40px 0;
  }
  /* PCはfv-kvを解除し、visual/catchを直接グリッド配置 */
  #sin-of-oz .fv-kv { display: contents; }
  #sin-of-oz .fv-logo {
    grid-area: logo;
    justify-self: center;
    width: 100%;
    max-width: 560px;
  }
  #sin-of-oz .fv-catch {
    position: static;
    transform: none;
    left: auto;
    bottom: auto;
    grid-area: catch;
    justify-self: center;
    width: 100%;
    max-width: 600px;
  }
  #sin-of-oz .fv-visual {
    grid-area: visual;
    justify-self: center;
    width: 100%;
    max-width: 640px;
  }

  /* 3点セット: 事前登録ボタン + (詳細ボタン + アイコン) を横並び */
  #sin-of-oz .fv_btn.btns {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-top: 28px;
  }
  #sin-of-oz .fv_btn .btn { width: 489px; max-width: 489px; }
  #sin-of-oz .fv_btn .detail { gap: 16px; }
  #sin-of-oz a.btn-detail-link { width: 130px; }
  #sin-of-oz .detail .device { width: 76px; }

  #sin-of-oz .section-btn.btns { padding: 64px 5vw; }

  /* STORY: 余白拡大 */
  #sin-of-oz .section-story { padding: 90px 24px 110px; }
  #sin-of-oz .story-window { gap: 40px; }

  /* GAME SYSTEM: 横長1枚画像（見出し+ゲーム画面） */
  #sin-of-oz .system-slide {
    padding: 24px 12px 32px;
  }

  /* PC: 矢印はビューポート左右にインライン配置へ戻す */
  #sin-of-oz .slider-arrow {
    position: static;
    transform: none;
    top: auto;
    max-width: 70px;
  }
  #sin-of-oz .slider-prev,
  #sin-of-oz .slider-next { left: auto; right: auto; }
  #sin-of-oz .slider-viewport { max-width: 900px; }

  /* ゲームシステム装飾背景: PCはスライド画像に装飾が内包されるため非表示 */
  #sin-of-oz .system-deco { display: none; }

  /* キャラ集合: PCはpadding相殺を解除し中央・最大幅制限 */
  #sin-of-oz .character-main {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  #sin-of-oz .character-cross { max-width: 1000px; }
}


/* ============================================================
   prefers-reduced-motion: アニメーション抑制
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  #sin-of-oz *,
  #sin-of-oz *::before,
  #sin-of-oz *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================
   ✦ 追加エフェクト（取り外し可能ブロック / ここから） ✦
   ------------------------------------------------------------
   ・スクロールで「今見えている位置」を発火点に演出が起動
   ・ファンタジー感: 金の光の粉(パーティクル)・タイトル発光・浮遊
   ・index.html の <body> 末尾「追加エフェクト用JS」ブロックが
     #sin-of-oz に .anim-on を付与したときのみ作動する
   ・この CSS ブロックと、対になる JS ブロックを削除すれば原状復帰
   ============================================================ */

/* ---- 1) スクロール・イン表示（JS有効時のみ初期状態を隠す） ---- */
#sin-of-oz.anim-on .reveal-up,
#sin-of-oz.anim-on .reveal-fade,
#sin-of-oz.anim-on .reveal-zoom {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.9s ease;
  transition-delay: var(--reveal-delay, 0s);
}
#sin-of-oz.anim-on .reveal-up   { transform: translateY(48px); }
#sin-of-oz.anim-on .reveal-zoom { transform: scale(0.92); filter: blur(6px); }

#sin-of-oz.anim-on .reveal-up.is-visible,
#sin-of-oz.anim-on .reveal-fade.is-visible,
#sin-of-oz.anim-on .reveal-zoom.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* 二重スクロールバー防止:
   overflow-x:hidden は overflow-y を auto 化し、reveal の transform 分で
   #sin-of-oz 自身に縦スクロールバーが出る。clip なら overflow-y は visible のまま。 */
#sin-of-oz.anim-on {
  overflow-x: clip;
}

/* ---- 1-b) catch コピーの登場（フェード＋ほのかな黄金の発光） ---- */
#sin-of-oz.anim-on .reveal-catch {
  opacity: 0;
  will-change: opacity, transform;
}
#sin-of-oz.anim-on .reveal-catch.is-visible {
  animation: ozCatchIn 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: var(--reveal-delay, 0s);
}
@keyframes ozCatchIn {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.96);
    filter: drop-shadow(0 0 0 rgba(240, 205, 134, 0));
  }
  55% { opacity: 1; }
  100% {
    opacity: 1;
    transform: none;
    filter: drop-shadow(0 0 12px rgba(240, 205, 134, 0.45));
  }
}

/* ---- 1-c) STORY: ランダム・タイプライター演出（短め） ---- */
#sin-of-oz.anim-on .story-main.tw-ready .tw-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  transition-delay: var(--tw-delay, 0s);
  will-change: opacity, transform;
}
#sin-of-oz.anim-on .story-main.tw-go .tw-char {
  opacity: 1;
  transform: none;
}

/* ---- 2) セクションタイトルの黄金グロー（点灯演出） ---- */
#sin-of-oz.anim-on .ttl-en .ttl-text {
  animation: ozTitleGlow 4.5s ease-in-out infinite;
}
@keyframes ozTitleGlow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(240, 205, 134, 0.15)); }
  50%      { filter: drop-shadow(0 0 16px rgba(240, 205, 134, 0.6)); }
}

/* タイトル左右の飾り・和名: ふわりと浮遊 */
#sin-of-oz.anim-on .ttl-deco img {
  animation: ozFloat 5s ease-in-out infinite;
}
#sin-of-oz.anim-on .ttl-deco-r img { animation-delay: -2.5s; }

/* ---- 3) キービジュアル/セクション装飾の浮遊 ---- */
#sin-of-oz.anim-on .fv-visual img {
  animation: ozFloatSoft 6.5s ease-in-out infinite;
}
#sin-of-oz.anim-on .section-deco img {
  animation: ozDecoFloat 7s ease-in-out infinite;
}

@keyframes ozFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes ozFloatSoft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes ozDecoFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(2deg); }
}

/* ---- 4) 事前登録ボタンの誘目パルス（黄金の鼓動） ---- */
#sin-of-oz.anim-on .btns .btn a.btn_reserve {
  animation: ozBtnPulse 2.8s ease-in-out infinite;
}
#sin-of-oz.anim-on .btns .btn a.btn_reserve:hover,
#sin-of-oz.anim-on .btns .btn a.btn_reserve:active {
  animation: none;
}
@keyframes ozBtnPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(240, 205, 134, 0));
  }
  50% {
    transform: scale(1.02);
    filter: drop-shadow(0 0 18px rgba(240, 205, 134, 0.55));
  }
}

/* ---- 5) ファンタジーな浮遊パーティクル（金の光の粉） ---- */
#sin-of-oz .oz-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
#sin-of-oz .oz-particles .p {
  position: absolute;
  bottom: -24px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 231, 164, 0.95) 0%, rgba(240, 205, 134, 0) 70%);
  opacity: 0;
  animation-name: ozDrift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes ozDrift {
  0%   { transform: translateY(0) translateX(0) scale(0.5); opacity: 0; }
  12%  { opacity: 0.9; }
  50%  { transform: translateY(-50vh) translateX(14px) scale(1); }
  88%  { opacity: 0.7; }
  100% { transform: translateY(-100vh) translateX(-10px) scale(1.1); opacity: 0; }
}
/* ============================================================
   ✦ 追加エフェクト（取り外し可能ブロック / ここまで） ✦
   ============================================================ */