@charset "UTF-8";
/* ==========================================================================
   音届 - Otodoke - 特設ページ専用スタイル
   --------------------------------------------------------------------------
   ・ミヤタコーヘイ「出張生演奏」LP。グローバルの style.css に追加で読み込まれる
     （app.blade.php / request()->is('otodoke') 時のみ）。
   ・既存 _variables.scss の設計（$color__/$font__/$radius__/tablet・desktop
     ブレイクポイント）を踏襲しつつ、本ページはサイトの青(#0092ca)ではなく
     写真に合わせたクリムゾン×ゴールドの独自パレットで構成する。
   ・グローバル utility（.ma-* 等）の二重出力を避けるため、トークンとブレイク
     ポイントは本ファイル内にローカル定義する（値は _variables.scss と整合）。
   ========================================================================== */
/* --- ローカルトークン（_variables.scss と整合させた本ページ専用） --------- */
/* --- ローカル・ブレイクポイント（_variables.scss と同値：768 / 960） ------ */
/* --- 共通：金箔グラデーション文字 ---------------------------------------- */
/* --- 共通：カード背景に写真を“うっすら”敷く（出演料金・シーン共通） --------
   ・--otd-card-img（各カードの修飾クラスで指定）を cover で敷き、その上に暗幕
     （スクリム）を重ねて文字の可読性を確保する。$top/$bottom でスクリム濃度を調整。
   ・カード側の overflow:hidden で角丸にクリップされる。z-index:0 で本文より背面。 */
/* ==========================================================================
   ルート
   ========================================================================== */
html {
  scroll-padding-top: 72px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
.otd {
  position: relative;
  color: #f3ece6;
  background: #100c0d;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  line-height: 1.8;
  letter-spacing: 0.02em;
  overflow: hidden;
  margin-bottom: -40px;
}
.otd *,
.otd *::before,
.otd *::after {
  box-sizing: border-box;
}
.otd a {
  text-decoration: none;
}
.otd .otd-inner {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
  z-index: 2;
}

/* 共通：英字アイブロウ ------------------------------------------------------ */
.otd-eyebrow {
  display: inline-block;
  font-family: "Cormorant Garamond", "Thasadith", serif;
  font-size: 0.95rem;
  font-style: italic;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #e7cf9c 0%, #c9a86a 52%, rgb(172.9280788177, 134.6285714286, 62.6719211823) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #c9a86a;
  margin-bottom: 14px;
}

/* 共通：セクション見出し ---------------------------------------------------- */
.otd-section-head {
  text-align: center;
  margin-bottom: 48px;
}
.otd-section-head__title {
  font-family: "Shippori Mincho B1", "Shippori Mincho", serif;
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: 0.14em;
  line-height: 1.5;
  color: #f3ece6;
}
@media screen and (min-width: 768px) {
  .otd-section-head__title {
    font-size: 2.1rem;
  }
}
.otd-section-head__note {
  margin-top: 14px;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  color: rgba(243, 236, 230, 0.62);
}
.otd-section-head__title::after {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, #c9a86a, transparent);
}

/* SP専用改行 */
@media screen and (min-width: 768px) {
  .otd-br-sp {
    display: none;
  }
}

/* ==========================================================================
   スクロールリビール（既存 jsInview 機構を利用：JS が is-inview を付与）
   --------------------------------------------------------------------------
   既定は下からのフェードアップ。要素に修飾クラス（.otd-rv-*）を足すことで
   方向・効果（左右／ズーム／ぼかし／ワイプ）を一貫した余韻で出し分ける。
   ========================================================================== */
.otd .jsInview {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.05s cubic-bezier(0.22, 1, 0.36, 1), filter 1.05s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.otd .jsInview.is-inview {
  opacity: 1;
  transform: none;
  filter: none;
}

/* --- リビールのバリエーション（既存トリガに相乗り） -----------------------
   開始状態は :not(.is-inview) に限定する。こうしないと変種側の transform/filter
   が is-inview のリセット（同特異度・ソース後勝ち）を上書きし、出現後も
   ぼけ・ズレが残ったまま固まってしまう。出現後は基底の is-inview が確実に効く。 */
.otd .jsInview.otd-rv-right:not(.is-inview) {
  transform: translateX(48px);
}
.otd .jsInview.otd-rv-left:not(.is-inview) {
  transform: translateX(-48px);
}
.otd .jsInview.otd-rv-zoom:not(.is-inview) {
  transform: scale(0.92);
}
.otd .jsInview.otd-rv-blur:not(.is-inview) {
  transform: translateY(22px);
  filter: blur(14px);
}
.otd .jsInview.otd-rv-rise:not(.is-inview) {
  transform: translateY(56px);
}
.otd .jsInview.otd-rv-slow {
  transition-duration: 1.4s;
}
.otd .jsInview.otd-rv-mask {
  opacity: 1;
  transform: none;
  clip-path: inset(110% 0 0 0);
  transition: clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.otd .jsInview.otd-rv-mask.is-inview {
  clip-path: inset(-10% 0 0 0);
}
.otd .otd-stagger.jsInview {
  opacity: 1;
  transform: none;
  transition: none;
}
.otd .otd-stagger.jsInview > * {
  opacity: 0;
}
.otd .otd-stagger.jsInview.is-inview > * {
  opacity: 1;
  animation: otd-rise-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--otd-d, 0s) backwards;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.otd-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 110px 24px 90px;
  overflow: hidden;
}
.otd-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.otd-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 34%;
  animation: otd-kenburns 24s ease-in-out infinite alternate;
}
.otd-hero__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 70% 30%, rgba(214, 41, 62, 0.2) 0%, transparent 55%), linear-gradient(180deg, rgba(16, 12, 13, 0.72) 0%, rgba(16, 12, 13, 0.3) 38%, rgba(16, 12, 13, 0.78) 100%);
}
.otd-hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events: none;
}
.otd-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
}
.otd-hero__eyebrow {
  font-family: "Cormorant Garamond", "Thasadith", serif;
  font-size: 1rem;
  letter-spacing: 0.62em;
  text-indent: 0.62em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #e7cf9c 0%, #c9a86a 52%, rgb(172.9280788177, 134.6285714286, 62.6719211823) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #c9a86a;
  margin-bottom: 22px;
  opacity: 0;
  animation: otd-fade-down 1.4s ease 0.2s both;
}
.otd-hero__logo {
  margin: 0 0 18px;
  line-height: 1;
  opacity: 0;
  animation: otd-logo-in 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}
.otd-hero__logo-img {
  display: block;
  width: clamp(240px, 56vw, 360px);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 8px 40px rgba(0, 0, 0, 0.55));
}
@media screen and (min-width: 768px) {
  .otd-hero__logo-img {
    width: clamp(360px, 38vw, 460px);
  }
}
.otd-hero__sub {
  font-family: "Cormorant Garamond", "Thasadith", serif;
  font-style: italic;
  font-size: 1.25rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: #d8bd86;
  margin-bottom: 40px;
  opacity: 0;
  animation: otd-fade-down 1.4s ease 0.55s both;
}
@media screen and (min-width: 768px) {
  .otd-hero__sub {
    font-size: 1.5rem;
  }
}
.otd-hero__tagline {
  font-family: "Shippori Mincho B1", "Shippori Mincho", serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 2;
  color: #f3ece6;
  opacity: 0;
  animation: otd-fade-down 1.6s ease 0.8s both;
}
@media screen and (min-width: 768px) {
  .otd-hero__tagline {
    font-size: 1.15rem;
  }
}
.otd-hero__tagline-en {
  display: inline-block;
  margin-top: 8px;
  font-family: "Cormorant Garamond", "Thasadith", serif;
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  color: rgba(243, 236, 230, 0.62);
}
.otd-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 0;
  opacity: 0;
  animation: otd-fade-in 2s ease 1.4s both;
}
.otd-hero__scroll-text {
  font-family: "Cormorant Garamond", "Thasadith", serif;
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: rgba(243, 236, 230, 0.4);
}
.otd-hero__scroll-line {
  position: relative;
  width: 1px;
  height: 56px;
  background: rgba(216, 189, 134, 0.25);
  overflow: hidden;
}
.otd-hero__scroll-line::after {
  content: "";
  position: absolute;
  top: -56px;
  left: 0;
  width: 100%;
  height: 56px;
  background: linear-gradient(180deg, transparent, #c9a86a);
  animation: otd-scroll-line 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* ==========================================================================
   MESSAGE
   ========================================================================== */
.otd-message {
  position: relative;
  padding: 130px 0 110px;
  text-align: center;
  background: radial-gradient(80% 60% at 50% 0%, rgba(179, 18, 42, 0.1) 0%, transparent 60%), #100c0d;
}
.otd-message__title {
  font-family: "Shippori Mincho B1", "Shippori Mincho", serif;
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 1.9;
  letter-spacing: 0.1em;
  color: #f3ece6;
}
@media screen and (min-width: 768px) {
  .otd-message__title {
    font-size: 2.4rem;
    line-height: 1.8;
  }
}
.otd-message__lead {
  margin-top: 32px;
  font-size: 0.9rem;
  line-height: 2.2;
  letter-spacing: 0.06em;
  color: rgba(243, 236, 230, 0.62);
  transition-delay: 0.12s;
}
@media screen and (min-width: 768px) {
  .otd-message__lead {
    font-size: 0.98rem;
  }
}

/* ==========================================================================
   CONCEPT
   ========================================================================== */
.otd-concept {
  position: relative;
  padding: 110px 0;
  background: linear-gradient(180deg, #100c0d 0%, #15100f 50%, #100c0d 100%);
}
.otd-concept__inner {
  max-width: 760px;
  text-align: center;
}
.otd-concept__head {
  margin-bottom: 36px;
}
.otd-concept__title {
  font-family: "Shippori Mincho B1", "Shippori Mincho", serif;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: #f3ece6;
}
@media screen and (min-width: 768px) {
  .otd-concept__title {
    font-size: 2.6rem;
  }
}
.otd-concept__body {
  transition-delay: 0.12s;
}
.otd-concept__body p {
  font-size: 0.95rem;
  line-height: 2.4;
  letter-spacing: 0.06em;
  color: rgba(243, 236, 230, 0.62);
  margin-bottom: 1.4em;
}
.otd-concept__body p:last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .otd-concept__body p {
    font-size: 1.02rem;
  }
}

/* ==========================================================================
   SCENES
   ========================================================================== */
.otd-scenes {
  padding: 110px 0;
  background: #100c0d;
}
.otd-scenes__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media screen and (min-width: 768px) {
  .otd-scenes__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}
@media screen and (min-width: 960px) {
  .otd-scenes__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.otd-scene {
  position: relative;
  padding: 38px 28px;
  border: 1px solid rgba(216, 189, 134, 0.22);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(216, 189, 134, 0.05) 0%, rgba(216, 189, 134, 0.01) 100%);
  text-align: center;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s ease, background 0.5s ease;
}
.otd-scene__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 18px;
  border-radius: 50%;
  border: 1px solid rgba(216, 189, 134, 0.3);
  font-size: 1.3rem;
  background: linear-gradient(180deg, #e7cf9c 0%, #c9a86a 52%, rgb(172.9280788177, 134.6285714286, 62.6719211823) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #c9a86a;
  color: #c9a86a;
  -webkit-text-fill-color: #c9a86a;
  background: radial-gradient(circle at center, rgba(179, 18, 42, 0.18), transparent 70%);
}
.otd-scene__title {
  font-family: "Shippori Mincho B1", "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: #f3ece6;
  margin-bottom: 12px;
}
.otd-scene__desc {
  font-size: 0.84rem;
  line-height: 1.9;
  color: rgba(243, 236, 230, 0.62);
}
.otd-scene:hover {
  transform: translateY(-6px);
  border-color: rgba(216, 189, 134, 0.5);
  background: linear-gradient(160deg, rgba(216, 189, 134, 0.1) 0%, rgba(179, 18, 42, 0.05) 100%);
}
.otd-scenes__grid.jsInview .otd-scene {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.otd-scenes__grid.jsInview.is-inview .otd-scene {
  opacity: 1;
  transform: none;
}

.otd-scenes__grid.is-inview .otd-scene:nth-child(2) {
  transition-delay: 0.07s;
}
.otd-scenes__grid.is-inview .otd-scene:nth-child(3) {
  transition-delay: 0.14s;
}
.otd-scenes__grid.is-inview .otd-scene:nth-child(4) {
  transition-delay: 0.21s;
}
.otd-scenes__grid.is-inview .otd-scene:nth-child(5) {
  transition-delay: 0.28s;
}
.otd-scenes__grid.is-inview .otd-scene:nth-child(6) {
  transition-delay: 0.35s;
}

/* シーン別の背景写真（public/img/otodoke/scene/*.webp）。実体の敷き込みは
   「SCENE カード」節の .otd-scene::after が担当する。 */
.otd-scene--wedding {
  --otd-card-img: url("/img/otodoke/scene/wedding.webp");
}
.otd-scene--proposal {
  --otd-card-img: url("/img/otodoke/scene/proposal.webp");
}
.otd-scene--homeparty {
  --otd-card-img: url("/img/otodoke/scene/homeparty.webp");
}
.otd-scene--ceremony {
  --otd-card-img: url("/img/otodoke/scene/ceremony.webp");
}
.otd-scene--store {
  --otd-card-img: url("/img/otodoke/scene/store.webp");
}
.otd-scene--school {
  --otd-card-img: url("/img/otodoke/scene/school.webp");
}

/* ==========================================================================
   PRICING
   ========================================================================== */
.otd-pricing {
  position: relative;
  padding: 110px 0;
  background: radial-gradient(90% 70% at 50% 0%, rgba(179, 18, 42, 0.12) 0%, transparent 55%), #15100f;
}

/* ブラック会員価格スイッチ */
.otd-price-switch {
  max-width: 720px;
  margin: 0 auto 22px;
  display: flex;
  justify-content: center;
}

.otd-switch {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  border: 1px solid rgba(216, 189, 134, 0.22);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(216, 189, 134, 0.06), rgba(216, 189, 134, 0.01));
  cursor: pointer;
  transition: border-color 0.4s ease, background 0.4s ease;
}
.otd-switch:hover {
  border-color: rgba(216, 189, 134, 0.4);
}
.otd-switch > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.otd-switch__track {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.otd-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #d8cfc4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease;
}
.otd-switch__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}
.otd-switch__title {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #f3ece6;
}
.otd-switch__title i {
  margin-right: 0.5em;
  color: #c9a86a;
}
.otd-switch__hint {
  font-size: 0.74rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: rgba(243, 236, 230, 0.62);
}

.otd-switch > input:checked + .otd-switch__track {
  background: linear-gradient(120deg, #d6293e, #b3122a);
  border-color: rgba(216, 189, 134, 0.5);
}

.otd-switch > input:checked + .otd-switch__track .otd-switch__thumb {
  transform: translateX(24px);
  background: #e7cf9c;
}

.otd-switch > input:focus-visible + .otd-switch__track {
  box-shadow: 0 0 0 3px rgba(216, 189, 134, 0.35);
}

/* 出演料金：2×2 タイル表示（カルテットまでの4編成） */
.otd-price-panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .otd-price-panel {
    gap: 18px;
  }
}

/* 編成別の背景写真（public/img/otodoke/ensemble/{item_key}.webp）。実体の
   敷き込みは「PRICE カード」節の .otd-price-row__bg が担当する。 */
.otd-price-row--solo {
  --otd-card-img: url("/img/otodoke/ensemble/solo.webp");
}
.otd-price-row--duo {
  --otd-card-img: url("/img/otodoke/ensemble/duo.webp");
}
.otd-price-row--trio {
  --otd-card-img: url("/img/otodoke/ensemble/trio.webp");
}
.otd-price-row--quartet {
  --otd-card-img: url("/img/otodoke/ensemble/quartet.webp");
}

.otd-price-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 18px 26px;
  border: 1px solid rgba(216, 189, 134, 0.22);
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(28, 21, 20, 0.85), rgba(21, 16, 15, 0.85));
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s ease;
}
@media screen and (min-width: 768px) {
  .otd-price-row {
    padding: 42px 28px 34px;
  }
}
.otd-price-row:hover {
  transform: translateY(-5px);
  border-color: rgba(216, 189, 134, 0.45);
}
.otd-price-row__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.otd-price-row__name {
  font-family: "Shippori Mincho B1", "Shippori Mincho", serif;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  color: #f3ece6;
}
@media screen and (min-width: 768px) {
  .otd-price-row__name {
    font-size: 1.6rem;
  }
}
.otd-price-row__en {
  font-family: "Cormorant Garamond", "Thasadith", serif;
  font-style: italic;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  color: #d8bd86;
}
@media screen and (min-width: 768px) {
  .otd-price-row__en {
    font-size: 0.78rem;
  }
}
.otd-price-row__meta {
  margin-top: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(243, 236, 230, 0.62);
}
@media screen and (min-width: 768px) {
  .otd-price-row__meta {
    font-size: 0.78rem;
  }
}
.otd-price-row__rec {
  display: none;
  margin-top: 10px;
  max-width: 18em;
  font-size: 0.72rem;
  line-height: 1.7;
  color: rgba(243, 236, 230, 0.4);
}
@media screen and (min-width: 768px) {
  .otd-price-row__rec {
    display: block;
  }
}
.otd-price-row__value {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.otd-price-row__price {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.otd-price-row__num {
  font-family: "Cormorant Garamond", "Thasadith", serif;
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1;
  background: linear-gradient(180deg, #e7cf9c 0%, #c9a86a 52%, rgb(172.9280788177, 134.6285714286, 62.6719211823) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #c9a86a;
}
@media screen and (min-width: 768px) {
  .otd-price-row__num {
    font-size: 3.2rem;
  }
}
.otd-price-row__cur {
  font-family: "Cormorant Garamond", "Thasadith", serif;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1;
  background: linear-gradient(180deg, #e7cf9c 0%, #c9a86a 52%, rgb(172.9280788177, 134.6285714286, 62.6719211823) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #c9a86a;
}
@media screen and (min-width: 768px) {
  .otd-price-row__cur {
    font-size: 1.7rem;
  }
}
.otd-price-row__num-sub {
  font-size: 0.58em;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.otd-price-row__price--black, .otd-price-row__off {
  display: none;
}
.otd-price-row__quote {
  font-family: "Shippori Mincho B1", "Shippori Mincho", serif;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: #d8bd86;
}
.otd-price-row--feature {
  border-color: rgba(216, 189, 134, 0.4);
  background: linear-gradient(165deg, rgba(179, 18, 42, 0.22) 0%, rgba(28, 21, 20, 0.9) 100%);
}
.otd-price-row--feature::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #e7cf9c, #d6293e);
}
.otd-price-row__badge {
  position: absolute;
  top: 13px;
  right: 13px;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  padding: 3px 11px;
  border-radius: 999px;
  color: #2a0f12;
  background: linear-gradient(120deg, #e7cf9c, #c9a86a);
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .otd-price-row__badge {
    top: 16px;
    right: 16px;
  }
}

/* ブラック会員価格 適用時（スイッチON）：通常価格→会員価格に切替え、割引を可視化 */
.otd-price-panel.is-black .otd-price-row__price--regular {
  order: 2;
}
.otd-price-panel.is-black .otd-price-row__price--regular::before {
  content: "通常 ";
  align-self: baseline;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: rgba(243, 236, 230, 0.4);
}
.otd-price-panel.is-black .otd-price-row__price--regular .otd-price-row__num {
  font-size: 1.05rem;
  background: none;
  -webkit-text-fill-color: rgba(243, 236, 230, 0.4);
  color: rgba(243, 236, 230, 0.4);
  text-decoration: line-through;
}
.otd-price-panel.is-black .otd-price-row__price--regular .otd-price-row__cur {
  font-size: 0.7rem;
  background: none;
  -webkit-text-fill-color: rgba(243, 236, 230, 0.4);
  color: rgba(243, 236, 230, 0.4);
  text-decoration: line-through;
}
.otd-price-panel.is-black .otd-price-row__price--black {
  order: 1;
  display: flex;
  animation: otd-price-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.otd-price-panel.is-black .otd-price-row__off {
  order: 3;
  display: inline-block;
  margin-top: 2px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #2a0f12;
  background: linear-gradient(120deg, #e7cf9c, #c9a86a);
}

@keyframes otd-price-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.otd-price-notes {
  max-width: 720px;
  margin: 26px auto 0;
  padding: 0 6px;
  list-style: none;
}
.otd-price-notes li {
  position: relative;
  padding-left: 1.4em;
  font-size: 0.78rem;
  line-height: 1.9;
  color: rgba(243, 236, 230, 0.62);
  margin-bottom: 0.3em;
}
.otd-price-notes li::before {
  content: "※";
  position: absolute;
  left: 0;
  color: #d8bd86;
}
.otd-price-notes a {
  color: #d8bd86;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.3s ease;
}
.otd-price-notes a:hover {
  color: #e7cf9c;
}

/* 月5公演限定 */
.otd-limited {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 720px;
  margin: 40px auto 0;
  padding: 24px 28px;
  border: 1px solid rgba(216, 189, 134, 0.3);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(216, 189, 134, 0.08), rgba(216, 189, 134, 0.02));
}
.otd-limited__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(216, 189, 134, 0.4);
  font-size: 1.25rem;
  color: #e7cf9c;
}
.otd-limited__text {
  font-size: 0.86rem;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: #f3ece6;
  margin: 0;
}
.otd-limited__text strong {
  color: #e7cf9c;
  font-weight: 700;
}
@media screen and (max-width: 520px) {
  .otd-limited {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }
}

/* ==========================================================================
   FLOW
   ========================================================================== */
/* ==========================================================================
   FLOW タイムライン
   --------------------------------------------------------------------------
   モバイル/タブレット（<960px）：縦タイムライン（左にライン・ノード、右にカード）
   デスクトップ（>=960px）：横タイムライン（上にノードの一本線、下にカード）
   出現は「ノードが点灯 → 連結線が伸びる → カードが浮上」を順送りに。
   ========================================================================== */
.otd-flow {
  padding: 110px 0;
  background: #100c0d;
}
.otd-flow__list {
  --otd-node: 64px;
  --otd-vgap: 46px;
  --otd-hgap: 24px;
  list-style: none;
  max-width: 600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media screen and (min-width: 960px) {
  .otd-flow__list {
    --otd-node: 60px;
    max-width: 100%;
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--otd-hgap);
  }
}
.otd-flow {
  /* 各ステップ：縦＝[ノード|カード] グリッド／横＝ブロック（ノードの下にカード） */
}
.otd-flow__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--otd-node) 1fr;
  column-gap: 22px;
  align-items: start;
  padding-bottom: var(--otd-vgap);
}
.otd-flow__step:last-child {
  padding-bottom: 0;
}
@media screen and (min-width: 960px) {
  .otd-flow__step {
    display: block;
    text-align: center;
    padding-bottom: 0;
  }
}
.otd-flow {
  /* 連結線（自ノード→次ノード）。出現時に伸びる */
}
.otd-flow__step::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: var(--otd-node);
  bottom: 0;
  left: calc(var(--otd-node) / 2 - 1px);
  width: 2px;
  background: linear-gradient(180deg, #c9a86a, rgba(216, 189, 134, 0.22));
  transform-origin: top center;
}
@media screen and (min-width: 960px) {
  .otd-flow__step::before {
    top: calc(var(--otd-node) / 2 - 1px);
    bottom: auto;
    left: 50%;
    width: calc(100% + var(--otd-hgap));
    height: 2px;
    background: linear-gradient(90deg, #c9a86a, rgba(216, 189, 134, 0.22));
    transform-origin: left center;
  }
}
.otd-flow__step:last-child::before {
  display: none;
}
.otd-flow {
  /* ノード（番号入りの円） */
  /* ノード（番号入りの円・塗りつぶしなし。背景色で連結線の交差だけ隠す） */
}
.otd-flow__node {
  position: relative;
  z-index: 2;
  width: var(--otd-node);
  height: var(--otd-node);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(216, 189, 134, 0.55);
  background: #100c0d;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease;
}
@media screen and (min-width: 960px) {
  .otd-flow__node {
    margin: 0 auto;
  }
}
.otd-flow__num {
  font-family: "Cormorant Garamond", "Thasadith", serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  background: linear-gradient(180deg, #e7cf9c 0%, #c9a86a 52%, rgb(172.9280788177, 134.6285714286, 62.6719211823) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #c9a86a;
}
.otd-flow {
  /* ステップ説明（枠なし・テキストのみ） */
}
.otd-flow__card {
  position: relative;
  padding-top: 14px;
  text-align: left;
}
@media screen and (min-width: 960px) {
  .otd-flow__card {
    margin-top: 20px;
    padding-top: 0;
    text-align: center;
  }
}
.otd-flow__title {
  font-family: "Shippori Mincho B1", "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: #f3ece6;
  margin-bottom: 8px;
}
.otd-flow__desc {
  font-size: 0.82rem;
  line-height: 1.9;
  color: rgba(243, 236, 230, 0.62);
}
.otd-flow {
  /* ホバー：ノードだけ控えめに反応 */
}
.otd-flow__step:hover .otd-flow__node {
  transform: scale(1.06);
  border-color: rgba(231, 207, 156, 0.9);
}
.otd-flow {
  /* ---- 出現アニメーション（順送り） ---- */
}
.otd-flow__step:nth-child(1) {
  --otd-fd: 0s;
}
.otd-flow__step:nth-child(2) {
  --otd-fd: 0.34s;
}
.otd-flow__step:nth-child(3) {
  --otd-fd: 0.68s;
}
.otd-flow__step:nth-child(4) {
  --otd-fd: 1.02s;
}
.otd-flow__list.jsInview .otd-flow__node,
.otd-flow__list.jsInview .otd-flow__card {
  opacity: 0;
}
.otd-flow__list.jsInview .otd-flow__step::before {
  transform: scaleY(0);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--otd-fd) + 0.15s);
}
@media screen and (min-width: 960px) {
  .otd-flow__list.jsInview .otd-flow__step::before {
    transform: scaleX(0);
  }
}
.otd-flow__list.jsInview.is-inview .otd-flow__node {
  opacity: 1;
  animation: otd-node-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) var(--otd-fd) backwards;
}
.otd-flow__list.jsInview.is-inview .otd-flow__card {
  opacity: 1;
  animation: otd-rise-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--otd-fd) + 0.1s) backwards;
}
.otd-flow__list.jsInview.is-inview .otd-flow__step::before {
  transform: scaleY(1);
}
@media screen and (min-width: 960px) {
  .otd-flow__list.jsInview.is-inview .otd-flow__step::before {
    transform: scaleX(1);
  }
}

/* ==========================================================================
   CTA
   ========================================================================== */
.otd-cta {
  position: relative;
  padding: 130px 0;
  text-align: center;
  overflow: hidden;
}
.otd-cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.otd-cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.otd-cta__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(100% 78% at 50% 50%, rgba(16, 12, 13, 0.55) 0%, rgba(16, 12, 13, 0.18) 62%, transparent 100%), linear-gradient(180deg, rgba(16, 12, 13, 0.4) 0%, rgba(16, 12, 13, 0.26) 46%, rgba(16, 12, 13, 0.64) 100%);
}
.otd-cta__title {
  font-family: "Shippori Mincho B1", "Shippori Mincho", serif;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.7;
  letter-spacing: 0.12em;
  color: #f3ece6;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.6);
}
@media screen and (min-width: 768px) {
  .otd-cta__title {
    font-size: 2.5rem;
  }
}
.otd-cta__lead {
  margin-top: 24px;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: #d8bd86;
}
@media screen and (min-width: 768px) {
  .otd-cta__lead {
    font-size: 1.1rem;
  }
}
.otd-cta__actions {
  margin-top: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* ボタン */
.otd-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 38px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, background 0.4s ease, color 0.4s ease;
}
.otd-btn i {
  font-size: 0.9em;
}
.otd-btn--primary {
  color: #2a0f12;
  background: linear-gradient(120deg, #e7cf9c 0%, #c9a86a 100%);
  box-shadow: 0 10px 30px rgba(201, 168, 106, 0.22);
}
.otd-btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(201, 168, 106, 0.32);
}
.otd-btn--ghost {
  color: #f3ece6;
  border: 1px solid rgba(243, 236, 230, 0.35);
}
.otd-btn--ghost:hover {
  transform: translateY(-3px);
  border-color: #d8bd86;
  color: #e7cf9c;
}

/* ==========================================================================
   SIGNATURE
   ========================================================================== */
.otd-signature {
  padding: 80px 0 90px;
  text-align: center;
  background: #100c0d;
  border-top: 1px solid rgba(216, 189, 134, 0.12);
}
.otd-signature__name {
  font-family: "Shippori Mincho B1", "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: #d8bd86;
  margin-bottom: 12px;
}
@media screen and (min-width: 768px) {
  .otd-signature__name {
    font-size: 1.5rem;
  }
}
.otd-signature__tagline {
  font-family: "Shippori Mincho B1", "Shippori Mincho", serif;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: rgba(243, 236, 230, 0.62);
  margin-bottom: 26px;
}
@media screen and (min-width: 768px) {
  .otd-signature__tagline {
    font-size: 0.95rem;
  }
}
.otd-signature__bio {
  position: relative;
  max-width: 620px;
  margin: 0 auto 34px;
  font-size: 0.86rem;
  line-height: 2.05;
  letter-spacing: 0.04em;
  color: rgba(243, 236, 230, 0.62);
  text-align: center;
}
@media screen and (min-width: 768px) {
  .otd-signature__bio {
    font-size: 0.92rem;
    line-height: 2.15;
  }
}
.otd-signature__bio p {
  margin: 0;
}
.otd-signature__bio p + p {
  margin-top: 1.5em;
}
.otd-signature__bio::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin: 0 auto 26px;
  background: linear-gradient(90deg, transparent, #c9a86a, transparent);
}
.otd-signature__socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
}
.otd-signature__socials a {
  font-size: 1.4rem;
  color: rgba(243, 236, 230, 0.4);
  transition: color 0.4s ease, transform 0.4s ease;
}
.otd-signature__socials a:hover {
  color: #e7cf9c;
  transform: translateY(-3px);
}

/* --- プロフィール（経歴文）の高速タイプライター演出 ----------------------
   器のフェード／せり上がりは無効化し、文字の打鍵だけで魅せる（くっきり高速）。
   文字は JS が span 分割→先頭から順に opacity:1 で“打鍵”。動きを抑える設定では無効。 */
.otd .otd-signature__bio.otd-tw {
  transform: none;
  transition: none;
}
.otd .otd-signature__bio.otd-tw.is-inview {
  opacity: 1;
}
.otd .otd-signature__bio.otd-tw.is-tw-ready .otd-tw__c {
  opacity: 0;
}

.otd .otd-tw-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin: 0 1px -0.18em;
  background: #e7cf9c;
  box-shadow: 0 0 8px rgba(231, 207, 156, 0.6);
  vertical-align: baseline;
}

/* ==========================================================================
   リッチアニメーション強化（既存デザインに上質な動きを重ねる）
   --------------------------------------------------------------------------
   ・連続演出は控えめ・低速・低彩度で「品」を保つ。
   ・ホバー演出は素早く（0.3〜0.5s）反応を返す。
   ・すべて prefers-reduced-motion で無効化（本ファイル末尾）。
   ========================================================================== */
/* --- アイブロウの金箔シマー（横方向にゆっくり輝きが流れる） --------------- */
.otd .otd-eyebrow {
  background: linear-gradient(100deg, #c9a86a 0%, #c9a86a 32%, #e7cf9c 46%, #fff4dc 50%, #e7cf9c 54%, #c9a86a 68%, #c9a86a 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: otd-shimmer 7s ease-in-out infinite;
}

/* --- セクション見出しの下線をリビールで“描く” --------------------------- */
.otd .otd-section-head__title::after {
  width: 0;
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

.otd .otd-section-head.is-inview .otd-section-head__title::after {
  width: 46px;
}

/* --- ボタン：ホバーで光沢が一閃する（箔押しのきらめき） ------------------ */
.otd .otd-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.otd .otd-btn > * {
  position: relative;
  z-index: 1;
}
.otd .otd-btn::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  transition: left 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}
.otd .otd-btn:hover::before {
  left: 130%;
}

/* --- SCENE カード：光沢スイープ＋アイコンの躍動＋リングのパルス --------- */
.otd .otd-scene > * {
  position: relative;
  z-index: 2;
}
.otd .otd-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(168deg, rgba(16, 12, 13, 0.5) 0%, rgba(16, 12, 13, 0.85) 100%), var(--otd-card-img, none) center/cover no-repeat;
  pointer-events: none;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.otd .otd-scene:hover::after {
  transform: scale(1.06);
}
.otd .otd-scene::before {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 80%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(216, 189, 134, 0.14), transparent);
  transform: skewX(-18deg);
  transition: left 0.85s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}
.otd .otd-scene:hover::before {
  left: 130%;
}
.otd .otd-scene__icon {
  position: relative;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}
.otd .otd-scene__icon::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(216, 189, 134, 0.5);
  opacity: 0;
  pointer-events: none;
}
.otd .otd-scene:hover .otd-scene__icon {
  transform: translateY(-5px) rotate(-7deg) scale(1.08);
  border-color: rgba(216, 189, 134, 0.6);
  box-shadow: 0 10px 26px rgba(179, 18, 42, 0.32);
}
.otd .otd-scene:hover .otd-scene__icon::after {
  animation: otd-ring 1.4s ease-out infinite;
}

/* --- PRICE カード：光沢スイープ＋人気プランの常時グロー ------------------ */
.otd .otd-price-row__label, .otd .otd-price-row__value {
  position: relative;
  z-index: 2;
}
.otd .otd-price-row__bg {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(168deg, rgba(16, 12, 13, 0.4) 0%, rgba(16, 12, 13, 0.8) 100%), var(--otd-card-img, none) center/cover no-repeat;
  pointer-events: none;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.otd .otd-price-row:hover .otd-price-row__bg {
  transform: scale(1.05);
}
.otd .otd-price-row--feature .otd-price-row__bg {
  background: linear-gradient(168deg, rgba(150, 20, 38, 0.4) 0%, rgba(18, 10, 11, 0.8) 100%), var(--otd-card-img, none) center/cover no-repeat;
}
.otd .otd-price-row::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 75%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(216, 189, 134, 0.13), transparent);
  transform: skewX(-18deg);
  transition: left 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}
.otd .otd-price-row:hover::after {
  left: 135%;
}
.otd .otd-price-row--feature::before {
  z-index: 3;
  animation: otd-bar-glow 3.6s ease-in-out infinite;
}
.otd .otd-price-row__badge {
  z-index: 2;
  animation: otd-badge-pulse 3.6s ease-in-out infinite;
}

/* FLOW タイムラインの演出は「FLOW タイムライン」節に統合済み */
/* --- HERO：ゴールドの光の粒子がゆっくり立ちのぼる --------------------- */
.otd-hero__motes {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.otd-hero__motes span {
  position: absolute;
  bottom: -8%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231, 207, 156, 0.9), rgba(231, 207, 156, 0) 70%);
  opacity: 0;
  animation: otd-mote linear infinite;
}
.otd-hero__motes span:nth-child(1) {
  left: 12%;
  width: 4px;
  height: 4px;
  animation-duration: 17s;
  animation-delay: 0s;
}
.otd-hero__motes span:nth-child(2) {
  left: 28%;
  width: 6px;
  height: 6px;
  animation-duration: 22s;
  animation-delay: 3s;
}
.otd-hero__motes span:nth-child(3) {
  left: 46%;
  width: 3px;
  height: 3px;
  animation-duration: 15s;
  animation-delay: 6s;
}
.otd-hero__motes span:nth-child(4) {
  left: 63%;
  width: 5px;
  height: 5px;
  animation-duration: 20s;
  animation-delay: 1.5s;
}
.otd-hero__motes span:nth-child(5) {
  left: 78%;
  width: 4px;
  height: 4px;
  animation-duration: 24s;
  animation-delay: 8s;
}
.otd-hero__motes span:nth-child(6) {
  left: 90%;
  width: 6px;
  height: 6px;
  animation-duration: 18s;
  animation-delay: 4.5s;
}

/* --- SIGNATURE：SNSアイコンのホバーを華やかに ------------------------- */
.otd .otd-signature__socials a {
  transition: color 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), text-shadow 0.4s ease;
}
.otd .otd-signature__socials a:hover {
  transform: translateY(-4px) scale(1.12);
  text-shadow: 0 6px 20px rgba(216, 189, 134, 0.5);
}

/* ==========================================================================
   キーフレーム
   ========================================================================== */
@keyframes otd-kenburns {
  0% {
    transform: scale(1.04) translate(0, 0);
  }
  100% {
    transform: scale(1.14) translate(-1.5%, -1.5%);
  }
}
/* 金箔シマー（横方向に輝きの帯が流れる） */
@keyframes otd-shimmer {
  0% {
    background-position: 180% 0;
  }
  100% {
    background-position: -80% 0;
  }
}
/* アイコンの拡散リング */
@keyframes otd-ring {
  0% {
    transform: scale(0.85);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
/* 人気プラン上辺バーの呼吸 */
@keyframes otd-bar-glow {
  0%, 100% {
    opacity: 0.65;
    box-shadow: 0 0 8px rgba(216, 189, 134, 0.3);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 18px rgba(231, 207, 156, 0.6);
  }
}
/* 「人気」バッジの微鼓動 */
@keyframes otd-badge-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}
/* ヒーローの光の粒子（立ちのぼって消える） */
@keyframes otd-mote {
  0% {
    transform: translateY(0) translateX(0) scale(0.6);
    opacity: 0;
  }
  12% {
    opacity: 0.8;
  }
  50% {
    transform: translateY(-55vh) translateX(14px) scale(1);
    opacity: 0.5;
  }
  88% {
    opacity: 0.35;
  }
  100% {
    transform: translateY(-108vh) translateX(-10px) scale(0.7);
    opacity: 0;
  }
}
/* スタッガー子要素のせり上がり（完了後に transform を残さない＝ホバー両立） */
@keyframes otd-rise-in {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* タイムラインのノードが弾んで点灯する（完了後に transform を残さない） */
@keyframes otd-node-pop {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes otd-fade-down {
  0% {
    opacity: 0;
    transform: translateY(-14px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes otd-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes otd-logo-in {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
    filter: blur(8px);
    letter-spacing: 0.4em;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@keyframes otd-scroll-line {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(112px);
  }
}
/* ==========================================================================
   動きを抑える設定への配慮（演出を無効化し、確実に表示）
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .otd .jsInview,
  .otd .otd-stagger.jsInview > *,
  .otd .otd-hero__eyebrow,
  .otd .otd-hero__logo,
  .otd .otd-hero__sub,
  .otd .otd-hero__tagline,
  .otd .otd-hero__scroll,
  .otd .otd-scenes__grid.jsInview .otd-scene,
  .otd .otd-flow__list.jsInview .otd-flow__node,
  .otd .otd-flow__list.jsInview .otd-flow__card {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
  .otd .jsInview.otd-rv-mask {
    clip-path: none !important;
  }
  .otd .otd-flow__step::before {
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .otd .otd-eyebrow,
  .otd .otd-price-row--feature::before,
  .otd .otd-price-row__badge,
  .otd .otd-scene__icon::after {
    animation: none !important;
  }
  .otd .otd-hero__motes {
    display: none;
  }
  .otd .otd-scene::after,
  .otd .otd-price-row__bg {
    transition: none !important;
  }
  .otd .otd-scene:hover::after,
  .otd .otd-price-row:hover .otd-price-row__bg {
    transform: none !important;
  }
  .otd .otd-hero__bg img,
  .otd .otd-hero__scroll-line::after {
    animation: none !important;
  }
}
/* ==========================================================================
   音届 AIお見積りコンシェルジュ（/otodoke/estimate）
   --------------------------------------------------------------------------
   「やりたいこと」入力 → 5ステップの4択 → 概算レンジ → 依頼。
   LPと同じクリムゾン×ゴールドのパレットで構成する。
   ========================================================================== */
.otd-est {
  min-height: 100vh;
}
.otd-est button {
  cursor: pointer;
  font-family: inherit;
  background: none;
  border: none;
  color: inherit;
}

/* --- コンパクトヒーロー ---------------------------------------------------- */
.otd-est-hero {
  position: relative;
  padding: 116px 22px 120px;
  text-align: center;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .otd-est-hero {
    padding: 150px 22px 150px;
  }
}
.otd-est-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.otd-est-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.otd-est-hero__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 0%, rgba(16, 12, 13, 0.35) 0%, rgba(16, 12, 13, 0.78) 60%, #100c0d 100%), linear-gradient(180deg, rgba(16, 12, 13, 0.2) 0%, #100c0d 100%);
}
.otd-est-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}
.otd-est-hero__eyebrow {
  display: inline-block;
  font-family: "Cormorant Garamond", "Thasadith", serif;
  font-size: 0.84rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: #d8bd86;
  margin-bottom: 18px;
}
.otd-est-hero__title {
  font-family: "Shippori Mincho B1", "Shippori Mincho", serif;
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
  background: linear-gradient(180deg, #e7cf9c 0%, #c9a86a 52%, rgb(172.9280788177, 134.6285714286, 62.6719211823) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #c9a86a;
  margin-bottom: 18px;
}
@media screen and (min-width: 768px) {
  .otd-est-hero__title {
    font-size: 2.6rem;
  }
}
.otd-est-hero__lead {
  font-size: 0.94rem;
  line-height: 2;
  color: rgba(243, 236, 230, 0.62);
}
@media screen and (min-width: 768px) {
  .otd-est-hero__lead {
    font-size: 1.02rem;
  }
}

/* --- ウィザード外枠 -------------------------------------------------------- */
.otd-est-shell {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: -78px auto 0;
  padding: 0 18px 96px;
}
@media screen and (min-width: 768px) {
  .otd-est-shell {
    margin-top: -90px;
  }
}

.otd-est-card {
  position: relative;
  background: linear-gradient(180deg, #1c1514 0%, #15100f 100%);
  border: 1px solid rgba(216, 189, 134, 0.22);
  border-radius: 14px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
  padding: 30px 22px 34px;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .otd-est-card {
    padding: 46px 48px 48px;
  }
}
.otd-est-card {
  /* 上辺の金箔ライン */
}
.otd-est-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c9a86a 25%, #e7cf9c 50%, #c9a86a 75%, transparent);
  opacity: 0.7;
}

/* --- 進行バー -------------------------------------------------------------- */
.otd-est-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 30px;
}
.otd-est-progress__track {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(216, 189, 134, 0.16);
  overflow: hidden;
}
.otd-est-progress__fill {
  display: block;
  height: 100%;
  width: 20%;
  border-radius: 999px;
  background: linear-gradient(90deg, #c9a86a 0%, #e7cf9c 100%);
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.otd-est-progress__label {
  flex-shrink: 0;
  font-family: "Cormorant Garamond", "Thasadith", serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: #d8bd86;
}
.otd-est-progress__total {
  color: rgba(243, 236, 230, 0.4);
  margin-left: 2px;
}

/* --- 画面の切替（フェード） ------------------------------------------------ */
.otd-est-screen {
  display: none;
}
.otd-est-screen.is-active {
  display: block;
  animation: otd-est-fade 0.5s ease both;
}
.otd-est-screen__title {
  font-family: "Shippori Mincho B1", "Shippori Mincho", serif;
  font-weight: 700;
  font-size: 1.34rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: #f3ece6;
  margin-bottom: 12px;
}
@media screen and (min-width: 768px) {
  .otd-est-screen__title {
    font-size: 1.62rem;
  }
}
.otd-est-screen__desc {
  font-size: 0.92rem;
  line-height: 1.9;
  color: rgba(243, 236, 230, 0.62);
  margin-bottom: 22px;
}

@keyframes otd-est-fade {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.otd-est-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: #d8bd86;
  margin-bottom: 16px;
}
.otd-est-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, #c9a86a, transparent);
}

/* --- ① 自由入力 ----------------------------------------------------------- */
.otd-est-input {
  position: relative;
  margin-bottom: 20px;
}
.otd-est-input textarea {
  width: 100%;
  resize: vertical;
  min-height: 120px;
  padding: 16px 18px;
  font-size: 1rem;
  line-height: 1.8;
  color: #f3ece6;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(216, 189, 134, 0.28);
  border-radius: 12px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.otd-est-input textarea::placeholder {
  color: rgba(243, 236, 230, 0.4);
}
.otd-est-input textarea:focus {
  outline: none;
  border-color: #d8bd86;
  box-shadow: 0 0 0 3px rgba(201, 168, 106, 0.16);
}
.otd-est-input__count {
  text-align: right;
  margin-top: 6px;
  font-size: 0.74rem;
  color: rgba(243, 236, 230, 0.4);
}

.otd-est-examples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}
.otd-est-examples__label {
  font-size: 0.8rem;
  color: rgba(243, 236, 230, 0.62);
  margin-right: 2px;
}

.otd-est-chip {
  padding: 8px 16px;
  font-size: 0.82rem;
  color: #d8bd86;
  border: 1px solid rgba(216, 189, 134, 0.28);
  border-radius: 999px;
  transition: all 0.3s ease;
}
.otd-est-chip:hover {
  border-color: #d8bd86;
  color: #e7cf9c;
  background: rgba(201, 168, 106, 0.1);
  transform: translateY(-2px);
}

/* --- アクション ------------------------------------------------------------ */
.otd-est-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
}
.otd-est-actions--split {
  justify-content: flex-start;
}

.otd-btn--primary.otd-est-start {
  color: #2a0f12;
  background: linear-gradient(120deg, #e7cf9c 0%, #c9a86a 52%, rgb(187.4334975369, 146.1428571429, 68.5665024631) 100%);
  border: 1px solid transparent;
  box-shadow: 0 12px 32px rgba(201, 168, 106, 0.42);
}
.otd-btn--primary.otd-est-start:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 46px rgba(231, 207, 156, 0.52);
}
.otd-btn--primary.otd-est-start:active {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(201, 168, 106, 0.44);
}

.otd-est-start[disabled] {
  color: rgba(243, 236, 230, 0.4);
  background: rgba(243, 236, 230, 0.07);
  border: 1px solid rgba(216, 189, 134, 0.22);
  box-shadow: none;
  opacity: 1;
  pointer-events: none;
}

/* 最終CTA「この内容で正式に依頼する」＝金色アクセントで主役化。
   既定の .otd-btn--primary は“控えめな箔押し”なので、ここははっきり輝く
   ゴールドに引き上げ、ページの主要アクションとして際立たせる。 */
.otd-est-inquiry.otd-btn--primary {
  color: #2a0f12;
  background: linear-gradient(120deg, #e7cf9c 0%, #c9a86a 50%, rgb(190.1467980296, 150.5142857143, 76.0532019704) 100%);
  border: 1px solid rgba(231, 207, 156, 0.7);
  box-shadow: 0 12px 32px rgba(201, 168, 106, 0.42);
}
.otd-est-inquiry.otd-btn--primary:hover {
  transform: translateY(-3px);
  background: linear-gradient(120deg, #f3e3bf 0%, #e7cf9c 50%, #c9a86a 100%);
  box-shadow: 0 18px 46px rgba(231, 207, 156, 0.55);
}
.otd-est-inquiry.otd-btn--primary:active {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(201, 168, 106, 0.44);
}

.otd-est-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 22px;
  font-size: 0.76rem;
  line-height: 1.7;
  color: rgba(243, 236, 230, 0.4);
}
.otd-est-disclaimer i {
  margin-top: 3px;
  color: #d8bd86;
}

/* --- ② 4択 ---------------------------------------------------------------- */
.otd-est-plannote {
  display: inline-block;
  font-family: "Shippori Mincho B1", "Shippori Mincho", serif;
  font-size: 0.86rem;
  line-height: 1.7;
  color: #d8bd86;
  background: rgba(201, 168, 106, 0.08);
  border-left: 2px solid #c9a86a;
  padding: 8px 14px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 18px;
}

.otd-est-choices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 26px;
}
@media screen and (min-width: 768px) {
  .otd-est-choices {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}

.otd-est-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 16px 16px;
  border: 1px solid rgba(216, 189, 134, 0.24);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.otd-est-choice:hover {
  transform: translateY(-3px);
  border-color: #d8bd86;
  background: rgba(201, 168, 106, 0.08);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
}
.otd-est-choice__key {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-family: "Cormorant Garamond", "Thasadith", serif;
  font-size: 0.96rem;
  font-weight: 600;
  color: #e7cf9c;
  border: 1px solid rgba(216, 189, 134, 0.4);
  border-radius: 50%;
  transition: all 0.3s ease;
}
.otd-est-choice__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.otd-est-choice__label {
  font-size: 0.98rem;
  font-weight: 600;
  color: #f3ece6;
  line-height: 1.4;
}
.otd-est-choice__desc {
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(243, 236, 230, 0.62);
}
.otd-est-choice__arrow {
  flex-shrink: 0;
  color: rgba(243, 236, 230, 0.4);
  font-size: 0.82rem;
  transition: transform 0.3s ease, color 0.3s ease;
}
.otd-est-choice:hover .otd-est-choice__arrow {
  color: #e7cf9c;
  transform: translateX(4px);
}
.otd-est-choice.is-selected {
  border-color: #c9a86a;
  background: linear-gradient(120deg, rgba(231, 207, 156, 0.16), rgba(201, 168, 106, 0.08));
}
.otd-est-choice.is-selected .otd-est-choice__key {
  color: #2a0f12;
  background: linear-gradient(120deg, #e7cf9c, #c9a86a);
  border-color: transparent;
}

/* --- ③ 準備中（控えめな金箔の走査線。チャットボット然とした3点ドットは用いない） --- */
.otd-est-loading {
  text-align: center;
  padding: 72px 0 64px;
}
.otd-est-loading__mark {
  display: block;
  position: relative;
  width: 140px;
  height: 1px;
  margin: 0 auto 28px;
  background: rgba(216, 189, 134, 0.18);
  overflow: hidden;
}
.otd-est-loading__mark::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, #e7cf9c, transparent);
  animation: otd-est-sweep 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.otd-est-loading__text {
  font-family: "Shippori Mincho B1", "Shippori Mincho", serif;
  font-size: 0.96rem;
  letter-spacing: 0.08em;
  color: #d8bd86;
}

@keyframes otd-est-sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(250%);
  }
}
/* --- ④ 結果 --------------------------------------------------------------- */
.otd-est-range {
  text-align: center;
  padding: 30px 18px;
  margin-bottom: 26px;
  border: 1px solid rgba(216, 189, 134, 0.22);
  border-radius: 14px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(201, 168, 106, 0.12) 0%, transparent 70%), rgba(0, 0, 0, 0.24);
}
.otd-est-range__caption {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: #d8bd86;
  margin-bottom: 14px;
}
.otd-est-range__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  font-family: "Cormorant Garamond", "Thasadith", serif;
  line-height: 1.1;
}
.otd-est-range__low, .otd-est-range__high {
  font-size: 2.5rem;
  font-weight: 600;
  background: linear-gradient(180deg, #e7cf9c 0%, #c9a86a 52%, rgb(172.9280788177, 134.6285714286, 62.6719211823) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #c9a86a;
}
@media screen and (min-width: 768px) {
  .otd-est-range__low, .otd-est-range__high {
    font-size: 3.4rem;
  }
}
.otd-est-range__cur {
  font-family: "Cormorant Garamond", "Thasadith", serif;
  font-size: 1.3rem;
  font-weight: 600;
  background: linear-gradient(180deg, #e7cf9c 0%, #c9a86a 52%, rgb(172.9280788177, 134.6285714286, 62.6719211823) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #c9a86a;
}
@media screen and (min-width: 768px) {
  .otd-est-range__cur {
    font-size: 1.8rem;
  }
}
.otd-est-range__sub {
  font-size: 0.6em;
  font-weight: 600;
}
.otd-est-range__tilde {
  font-size: 1.6rem;
  color: rgba(243, 236, 230, 0.62);
  margin: 0 6px;
  align-self: center;
}
@media screen and (min-width: 768px) {
  .otd-est-range__tilde {
    font-size: 2rem;
  }
}
.otd-est-range__quote {
  font-family: "Shippori Mincho B1", "Shippori Mincho", serif;
  font-size: 1.6rem;
  font-weight: 700;
  background: linear-gradient(180deg, #e7cf9c 0%, #c9a86a 52%, rgb(172.9280788177, 134.6285714286, 62.6719211823) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #c9a86a;
}

.otd-est-summary {
  font-size: 0.94rem;
  line-height: 1.95;
  color: #f3ece6;
  margin-bottom: 24px;
}

.otd-est-plan {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 24px;
}
@media screen and (min-width: 768px) {
  .otd-est-plan {
    grid-template-columns: 1fr 1fr;
  }
}
.otd-est-plan__chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(216, 189, 134, 0.18);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}
.otd-est-plan__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(201, 168, 106, 0.12);
  color: #e7cf9c;
  font-size: 0.9rem;
}
.otd-est-plan__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.otd-est-plan__label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(243, 236, 230, 0.4);
}
.otd-est-plan__value {
  font-size: 0.92rem;
  font-weight: 600;
  color: #f3ece6;
  line-height: 1.45;
}

.otd-est-breakdown {
  margin-bottom: 22px;
  border: 1px solid rgba(216, 189, 134, 0.16);
  border-radius: 10px;
  overflow: hidden;
}
.otd-est-breakdown summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #d8bd86;
  background: rgba(201, 168, 106, 0.06);
  transition: background 0.3s ease;
}
.otd-est-breakdown summary::-webkit-details-marker {
  display: none;
}
.otd-est-breakdown summary::after {
  content: "＋";
  float: right;
  color: rgba(243, 236, 230, 0.4);
  font-weight: 400;
}
.otd-est-breakdown summary:hover {
  background: rgba(201, 168, 106, 0.12);
}
.otd-est-breakdown[open] summary::after {
  content: "−";
}
.otd-est-breakdown__list {
  padding: 6px 16px 4px;
}
.otd-est-breakdown__list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(216, 189, 134, 0.14);
  font-size: 0.86rem;
}
.otd-est-breakdown__list li:last-child {
  border-bottom: none;
}
.otd-est-breakdown__label {
  color: rgba(243, 236, 230, 0.62);
  line-height: 1.5;
}
.otd-est-breakdown__amount {
  flex-shrink: 0;
  font-family: "Cormorant Garamond", "Thasadith", serif;
  font-size: 0.96rem;
  font-weight: 600;
  color: #f3ece6;
}
.otd-est-breakdown__pay {
  padding: 0 16px 16px;
  font-size: 0.8rem;
  color: rgba(243, 236, 230, 0.4);
}

.otd-est-notes {
  margin-bottom: 28px;
}
.otd-est-notes li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: 0.8rem;
  line-height: 1.75;
  color: rgba(243, 236, 230, 0.62);
}
.otd-est-notes li::before {
  content: "※";
  position: absolute;
  left: 0;
  color: rgba(243, 236, 230, 0.4);
}
.otd-est-notes li.is-assumption {
  color: #d8bd86;
}
.otd-est-notes li.is-assumption::before {
  content: "✓";
  color: #c9a86a;
}

.otd-est-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media screen and (min-width: 768px) {
  .otd-est-cta {
    flex-direction: row;
    justify-content: center;
  }
}
.otd-est-cta .otd-btn {
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .otd-est-cta .otd-btn {
    min-width: 240px;
  }
}

/* --- ⑤ エラー ------------------------------------------------------------- */
.otd-est-error {
  text-align: center;
  padding: 40px 10px;
}
.otd-est-error__icon {
  display: inline-flex;
  font-size: 2.2rem;
  color: #e0533a;
  margin-bottom: 16px;
}
.otd-est-error__text {
  font-size: 0.96rem;
  line-height: 1.8;
  color: #f3ece6;
  margin-bottom: 24px;
}

/* --- 補助リンク ----------------------------------------------------------- */
.otd-est-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding: 0 4px;
}
.otd-est-sub__link {
  font-size: 0.84rem;
  color: rgba(243, 236, 230, 0.62);
  transition: color 0.3s ease;
}
.otd-est-sub__link:hover {
  color: #e7cf9c;
}
.otd-est-sub__link i {
  font-size: 0.82em;
}

/* --- LP料金セクション内：AI見積もりへの導線 ------------------------------- */
.otd-price-estimate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  max-width: 760px;
  margin: 40px auto 0;
  padding: 30px 24px;
  border: 1px solid rgba(216, 189, 134, 0.22);
  border-radius: 14px;
  background: radial-gradient(120% 130% at 50% 0%, rgba(201, 168, 106, 0.14) 0%, transparent 65%), rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 768px) {
  .otd-price-estimate {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    padding: 30px 38px;
  }
}
.otd-price-estimate__copy {
  flex: 1;
}
.otd-price-estimate__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Cormorant Garamond", "Thasadith", serif;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: #d8bd86;
  margin-bottom: 10px;
}
.otd-price-estimate__text {
  font-size: 0.98rem;
  line-height: 1.8;
  color: #f3ece6;
}
.otd-price-estimate__text strong {
  color: #e7cf9c;
  font-weight: 700;
}
.otd-price-estimate .otd-btn {
  flex-shrink: 0;
}

/* --- 動きを抑える設定 ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .otd-est-screen.is-active {
    animation: none !important;
  }
  .otd-est-loading__mark::after {
    animation: none !important;
    opacity: 0.7 !important;
    transform: none !important;
  }
  .otd-est-progress__fill {
    transition: none !important;
  }
}
/* --- キーボードフォーカスの可視化（アクセシビリティ） --------------------- */
.otd-est .otd-btn:focus-visible,
.otd-est .otd-est-chip:focus-visible,
.otd-est .otd-est-choice:focus-visible,
.otd-est .otd-est-sub__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(216, 189, 134, 0.4);
}
.otd-est .otd-est-breakdown summary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(216, 189, 134, 0.4);
}