/* =====================================================================
   うまれ星鑑定書 サイト共通CSS（ヒーロー改修 最終版）
   世界観: 青・白・金（コーラル色は使用しない）
   追加クラスは umarehoshi- 接頭辞（SWELL等との衝突回避）
   ===================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #f5f2ed;
  color: #4a4640;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

a { color: #7b9acc; }

/* ---- ユーティリティ ---- */
.umarehoshi-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-pc-only { display: block; }
.u-sp-only { display: none; }
.u-sp-inline { display: none; }
@media (max-width: 767px) {
  .u-pc-only { display: none; }
  .u-sp-only { display: block; }
  .u-sp-inline { display: inline; }
}

/* =====================================================================
   ヒーロー骨格（PC: 左画像約58% / 右コンテンツ約42%）
   ヒーロー全体・右側・カードは overflow: visible（タイトル見切れ防止）。
   overflow: hidden は画像エリア（__visual）だけに設定する。
   ===================================================================== */

.umarehoshi-hero {
  position: relative;
  /* ベースはスマホ想定の縦積み。PCの「画像全面＋右にカード」は @media (min-width:768px) で指定 */
  display: block;
  width: 100%;
  margin-inline: auto;
  overflow: visible;
  isolation: isolate;
  background:
    radial-gradient(circle at 20% 20%, rgba(214, 225, 247, 0.72), transparent 38%),
    radial-gradient(circle at 88% 78%, rgba(226, 216, 239, 0.6), transparent 42%),
    linear-gradient(135deg, #f4f1eb 0%, #f8f6f3 46%, #f0edf4 100%);
}

.umarehoshi-hero__visual {
  position: relative;
  min-width: 0;
  overflow: hidden; /* 光・シマー等はこの角丸内へクリップ */
}

.umarehoshi-hero__visual picture { display: contents; }

.umarehoshi-hero__content {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 48px 48px 48px 0;
  overflow: visible;
}

/* 鑑定カード（半透明・金縁・ぼかし。左端だけ画像側へ約48px重ねる） */
.umarehoshi-card {
  position: relative;
  width: min(100%, 540px);
  min-width: 0;
  margin-left: -36px; /* 浅めの重なり（-32〜-48pxの範囲。月・顔を隠さない） */
  padding: 48px 44px 44px;
  overflow: visible;
  border: 1px solid rgba(198, 175, 130, 0.28);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255, 253, 249, 0.84), rgba(248, 246, 250, 0.74));
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow:
  0 24px 64px rgba(76, 68, 105, 0.16),
  0 -10px 34px rgba(255, 255, 255, 0.20),
  inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

/* =====================================================================
   フォーム全体のSTEP遷移
   カード本体ごと静かにフェードアウト → 内容切替 → ゆっくりフェードイン。
   上下移動・拡大縮小・blurは使わず、opacityだけで柔らかく切り替える。
   ===================================================================== */

/* 旧カードフェードは使わない（古いJSクラスが残っても動かさない） */
.umarehoshi-card.u-fade {
  animation: none;
}

html.js .umarehoshi-card.is-leaving {
  animation: umarehoshi-form-leave 700ms cubic-bezier(0.37, 0, 0.63, 1) both;
  pointer-events: none;
}

html.js .umarehoshi-card.is-entering {
  animation: umarehoshi-form-enter 1200ms cubic-bezier(0.37, 0, 0.63, 1) both;
  pointer-events: none;
}

@keyframes umarehoshi-form-leave {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes umarehoshi-form-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* =====================================================================
   タイトル・見出し（見切れ防止: nowrap・ellipsis・固定height禁止）
   ===================================================================== */

.umarehoshi-eyebrow {
  margin: 0 0 4px;
  color: #a08a5f;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .42em;
  text-align: center;
}

.umarehoshi-hero__title {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0.12em 0 0.16em;
  color: #514568;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(2rem, 3.4vw, 3.7rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-align: center;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
  overflow: visible;
  text-overflow: clip;
}

.umarehoshi-hero__title-line { display: inline; }

.umarehoshi-subtitle {
  margin: 6px 0 10px;
  color: #7b9acc;
  font-size: 1.02rem;
  letter-spacing: .18em;
  text-align: center;
}

.umarehoshi-lead {
  margin: 0 0 22px;
  color: #6f6879;
  font-size: .92rem;
  line-height: 2;
  text-align: center;
}

.umarehoshi-step__heading {
  margin: 0 0 18px;
  color: #514568;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-align: center;
}

.umarehoshi-hint {
  margin: 8px 0 0;
  color: #948b7d;
  font-size: .8rem;
  text-align: center;
}

/* =====================================================================
   進行表示（星4個・現在=青白 / 完了=淡い金 / 未完了=薄いグレー）
   ===================================================================== */

/* PC: 一問一答中もタイトル下に短い説明を出す（設計図準拠。イントロ中とSPでは非表示） */
.umarehoshi-lead--steps { display: none; }
@media (min-width: 768px) {
  html.js .umarehoshi-hero:not([data-step="intro"]) .umarehoshi-lead--steps {
    display: block;
    margin-bottom: 14px;
  }
}

/* SP: 初期カード（STEP1から開始）の短い説明。JS有効かつスマホ幅の一問一答中のみ表示 */
.umarehoshi-lead--steps-sp { display: none; }
@media (max-width: 767px) {
  html.js .umarehoshi-hero:not([data-step="intro"]) .umarehoshi-lead--steps-sp {
    display: block;
    margin-bottom: 6px; /* 説明文とSTEPの間隔を詰める */
  }
  /* カード内の縦余白を少しだけ圧縮（窮屈にはしない） */
  .umarehoshi-progress { margin: 2px 0 12px; }
  .umarehoshi-step__heading { margin-bottom: 12px; }
  html.js .umarehoshi-form__actions { margin-top: 12px; }
  .umarehoshi-lead { line-height: 1.85; }
}

.umarehoshi-progress {
  display: none;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 18px;
}

html.js .umarehoshi-hero:not([data-step="intro"]) .umarehoshi-progress { display: flex; }

/* 星＋STEPラベルの1組（色は組ごとに状態管理し、星・ラベルへ継承させる） */
.umarehoshi-progress__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #b9b2a8; /* 未完了: 薄いグレー */
  transition: color .4s ease;
}

.umarehoshi-progress__star {
  font-size: 15px;
  font-style: normal;
  line-height: 1;
  transition: text-shadow .4s ease, transform .4s ease;
}
.umarehoshi-progress__star::before { content: "✦"; }

.umarehoshi-progress__label {
  font-size: 10px;
  letter-spacing: .08em;
  line-height: 1;
}

.umarehoshi-progress__bar {
  width: 30px;
  height: 1px;
  margin-top: 7px; /* 星の行の中心に合わせる */
  background: linear-gradient(to right, rgba(198, 175, 130, .45), rgba(160, 170, 205, .4));
}

/* 現在のSTEP: 青白く点灯 */
.umarehoshi-hero[data-step="1"] [data-progress="1"],
.umarehoshi-hero[data-step="2"] [data-progress="2"],
.umarehoshi-hero[data-step="3"] [data-progress="3"],
.umarehoshi-hero[data-step="4"] [data-progress="4"] {
  color: #6f93d6;
}
.umarehoshi-hero[data-step="1"] [data-progress="1"] .umarehoshi-progress__star,
.umarehoshi-hero[data-step="2"] [data-progress="2"] .umarehoshi-progress__star,
.umarehoshi-hero[data-step="3"] [data-progress="3"] .umarehoshi-progress__star,
.umarehoshi-hero[data-step="4"] [data-progress="4"] .umarehoshi-progress__star {
  text-shadow: 0 0 10px rgba(158, 190, 240, .85);
  transform: scale(1.25);
}

/* 完了済みSTEP: 淡い金 */
.umarehoshi-hero[data-step="2"] [data-progress="1"],
.umarehoshi-hero[data-step="3"] [data-progress="1"],
.umarehoshi-hero[data-step="3"] [data-progress="2"],
.umarehoshi-hero[data-step="4"] [data-progress="1"],
.umarehoshi-hero[data-step="4"] [data-progress="2"],
.umarehoshi-hero[data-step="4"] [data-progress="3"] {
  color: #cbb277;
}

/* 完了直前（STEP4）: 星4個が静かにそろって明滅する集合演出 */
.umarehoshi-hero[data-step="4"] .umarehoshi-progress__star {
  animation: umarehoshiProgressGather 3.2s ease-in-out infinite;
}
.umarehoshi-hero[data-step="4"] [data-progress="2"] .umarehoshi-progress__star { animation-delay: .25s; }
.umarehoshi-hero[data-step="4"] [data-progress="3"] .umarehoshi-progress__star { animation-delay: .5s; }
.umarehoshi-hero[data-step="4"] [data-progress="4"] .umarehoshi-progress__star { animation-delay: .75s; }
@keyframes umarehoshiProgressGather {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* =====================================================================
   一問一答の表示制御
   既定（JS無効）: 通常の1ページフォーム（全STEP表示・切替ボタン非表示）
   JS有効: data-step で初期画面と各STEPを切り替える
   ===================================================================== */

.umarehoshi-button--start { display: none; }
.umarehoshi-form__actions { display: none; }

html.js .umarehoshi-button--start { display: block; }
html.js .umarehoshi-form__actions {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  margin-top: 16px;
}
html.js .umarehoshi-form__actions.u-back-only { grid-template-columns: 110px; justify-content: center; }

html.js .umarehoshi-hero[data-step="intro"] .umarehoshi-form { display: none; }
html.js .umarehoshi-hero:not([data-step="intro"]) .umarehoshi-intro { display: none; }

/* 一問一答開始後は、初期画面と同じ説明を繰り返さない（見出しはSTEP側にある） */
html.js .umarehoshi-step { display: none; margin: 0; padding: 0; border: 0; }
.umarehoshi-step { margin: 0; padding: 0; border: 0; }
html.js .umarehoshi-hero[data-step="1"] [data-step-panel="1"],
html.js .umarehoshi-hero[data-step="2"] [data-step-panel="2"],
html.js .umarehoshi-hero[data-step="3"] [data-step-panel="3"],
html.js .umarehoshi-hero[data-step="4"] [data-step-panel="4"] { display: block; }

/* =====================================================================
   フォーム部品（白＋薄アイボリー・グレージュ枠・金の気配。コーラル不使用）
   ===================================================================== */

.umarehoshi-field { margin-bottom: 4px; }

input[type="text"], select {
  font-family: inherit;
  font-size: 16px;
  color: #4a4640;
  background: #fffdf8;
  border: 1px solid #d8cfc0;
  border-radius: 12px;
  height: 54px;
  padding: 0 16px;
}

input[type="text"] { width: 100%; }

input[type="text"]:focus, select:focus,
input[type="text"]:focus-visible, select:focus-visible {
  outline: none;
  border-color: #8fa6d4;
  box-shadow: 0 0 0 3px rgba(143, 166, 212, .3);
}

input::placeholder { color: #b6ac9e; }

/* 性別カード（女性・男性のみ。radioは保持・キーボード/SR対応） */
.umarehoshi-sex-options { display: flex; gap: 12px; }

.umarehoshi-sex-card {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  background: #fffdf8;
  border: 1px solid #d8cfc0;
  border-radius: 12px;
  cursor: pointer;
  font-size: 16px;
  transition: background .15s ease, border-color .15s ease;
}

.umarehoshi-sex-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.umarehoshi-sex-card:has(input:checked) {
  background: #e9eef7;
  border-color: #8fa6d4;
  color: #46587a;
}

.umarehoshi-sex-card:has(input:focus-visible) {
  border-color: #8fa6d4;
  box-shadow: 0 0 0 3px rgba(143, 166, 212, .3);
}

/* 生年月日（年=広め / 月・日=狭め・選択式） */
.umarehoshi-birth-selects { display: flex; gap: 10px; align-items: center; }
.umarehoshi-birth-unit { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; }
.umarehoshi-birth-unit.u-year { flex: 1.7; }
.umarehoshi-birth-unit select { width: 100%; min-width: 0; padding-right: 8px; }
.umarehoshi-birth-unit .u-unit { color: #7a736a; font-size: .9rem; flex: none; }

/* 18歳以上の確認 */
.umarehoshi-agree-box {
  background: rgba(250, 246, 236, .85);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: .95rem;
}
.umarehoshi-agree-box label {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
}
.umarehoshi-agree-box input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #7b9acc;
  flex: none;
}
.umarehoshi-agree-box input:focus-visible {
  outline: 2px solid #8fa6d4;
  outline-offset: 2px;
}

/* =====================================================================
   ボタン（青紫グラデーション。コーラル色は完全に削除）
   ===================================================================== */

.umarehoshi-button--start,
.umarehoshi-button--next,
.umarehoshi-button--line {
  width: 100%;
  min-height: 58px;
  padding: 15px 28px;
  color: #fff;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #91aee0 0%, #7f9bd0 48%, #9d91c9 100%);
  box-shadow:
    0 13px 32px rgba(111, 130, 184, 0.25),
    0 0 0 1px rgba(217, 197, 147, 0.18);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: box-shadow 280ms ease, filter 280ms ease, opacity 180ms ease;
}

.umarehoshi-button--start:hover,
.umarehoshi-button--next:hover,
.umarehoshi-button--line:hover {
  transform: none;
  filter: saturate(1.04) brightness(1.02);
  box-shadow:
    0 17px 38px rgba(111, 130, 184, 0.32),
    0 0 18px rgba(218, 199, 151, 0.18);
}

.umarehoshi-button--start:focus-visible,
.umarehoshi-button--next:focus-visible,
.umarehoshi-button--line:focus-visible,
.umarehoshi-button--back:focus-visible {
  outline: 3px solid rgba(143, 166, 212, .55);
  outline-offset: 2px;
}

.umarehoshi-button--line { margin-top: 20px; }

/* 設計図準拠の矢印（文言は変更せず装飾として付加） */
.umarehoshi-button--start::after,
.umarehoshi-button--next::after {
  content: "→";
  margin-left: .6em;
  font-weight: 400;
}

.umarehoshi-button--back {
  min-height: 58px;
  padding: 12px 10px;
  font-family: inherit;
  font-size: .95rem;
  letter-spacing: .06em;
  color: #6f6879;
  background: rgba(255, 253, 249, .9);
  border: 1px solid #d8cfc0;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.umarehoshi-button--back:hover { background: #f4efe6; border-color: #c9bda9; }

/* 初期画面のボタン下 余白 */
.umarehoshi-intro .umarehoshi-button--start { margin-top: 4px; }

/* =====================================================================
   案内文（削除・省略・言い換え禁止の確定文言用）
   ===================================================================== */

.umarehoshi-delivery-main {
  margin: 16px 0 0;
  color: #625978;
  font-size: 0.9rem;
  line-height: 1.8;
  text-align: center;
}

.umarehoshi-delivery-note {
  margin: 6px 0 0;
  color: #746b80;
  font-size: clamp(0.78rem, 0.9vw, 0.88rem);
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-align: center;
  overflow-wrap: anywhere;
}

.umarehoshi-intro .umarehoshi-delivery-note { margin-top: 14px; }

/* =====================================================================
   その他
   ===================================================================== */

/* ハニーポット（画面外へ。display:noneは使わない） */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.umarehoshi-error {
  background: #f4ecf1;
  border: 1px solid #cfaebf;
  color: #7c4f66;
  border-radius: 10px;
  padding: .7rem 1rem;
  font-size: .92rem;
  margin: 0 0 14px;
}

.umarehoshi-mini-footer {
  text-align: center;
  font-size: .78rem;
  margin: 18px 0 0;
}
.umarehoshi-mini-footer a { color: #9a9184; }

/* =====================================================================
   PC（768px以上）: 画像を全面に敷き、右側にフォームカードを重ねる
   レイヤー順: 画像(1) → 右側補助グラデーション(2) → 光(2〜3) → カード(4)
   ===================================================================== */

@media (min-width: 768px) {
  /* PC用ヒーロー画像（2000x1126・約16:9）を全面に敷き、右側にカードを重ねる。
     1101px以上はブラウザ横幅いっぱいのフルブリード（下のブロックで上書き）、
     768〜1100pxはバナー表示。新画像は2:1ではないため 16/9 とし、上下を切りすぎない */
  .umarehoshi-hero {
    position: relative;
    aspect-ratio: 16 / 9;
    height: auto;
    width: min(calc(100vw - 40px), 1024px);
    margin-inline: auto;
    overflow: visible;
  }

  .umarehoshi-hero__visual {
    position: absolute;
    inset: 0;
    z-index: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 28px 34px 34px 28px;
    box-shadow: 0 30px 90px rgba(72, 66, 101, 0.13);
  }

  .umarehoshi-hero__image-layer,
  .umarehoshi-hero__visual picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* 全面表示（マウス等では一切動かさない） */
  .umarehoshi-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
    translate: none;
    rotate: none;
    scale: none;
    will-change: auto;
  }

  /* 右側だけの補助グラデーション（専用要素。擬似要素の競合を避ける）。
     新画像は右側が明るく余白も広いため、最大濃度を弱めて白く霞ませない
     （可読性はカード本体で確保する） */
  .umarehoshi-hero__readability {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 54%,
      rgba(250, 248, 253, 0.05) 66%,
      rgba(247, 244, 251, 0.12) 82%,
      rgba(244, 241, 249, 0.24) 100%
    );
  }

  /* フォームカードを画像の上へ重ねる。
     STEPごとに内容の高さが変わってもカード上端が動かないよう、上端で固定する
     （top:50% + translateY(-50%) だと高さ変化のたびに上端が上下してしまう） */
  .umarehoshi-hero__content {
    position: absolute;
    top: 50%;
    right: 38px;
    transform: translateY(-50%);
    z-index: 10;
    display: block;
    width: 430px;
    padding: 0;
    overflow: visible;
  }

  .umarehoshi-card {
    width: 100%;
    margin-left: 0;
    padding: 30px 34px 28px;
    border-radius: 28px;
    background: linear-gradient(145deg,
      rgba(255, 253, 249, 0.88),
      rgba(248, 246, 250, 0.82));
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(236, 218, 181, 0.62);
    box-shadow:
      0 28px 80px rgba(82, 72, 108, 0.14),
      inset 0 0 0 1px rgba(255, 255, 255, 0.46);
  }

  /* カード内の余白を詰める（内容は変えない・カード内スクロールも作らない）。
     STEP4でもヒーロー下端を超えないよう、特に下側の要素間を詰める */
  .umarehoshi-eyebrow { margin-bottom: 2px; }
  .umarehoshi-hero__title { font-size: clamp(1.6rem, 2.2vw, 2.4rem); padding: 0.04em 0 0.06em; }
  .umarehoshi-subtitle { margin: 3px 0 5px; font-size: .96rem; }
  .umarehoshi-lead { margin: 0 0 12px; line-height: 1.8; }
  .umarehoshi-lead--steps { margin-bottom: 10px; }
  .umarehoshi-progress { margin: 5px 0 10px; }
  .umarehoshi-step__heading { margin: 0 0 9px; }
  .umarehoshi-field { margin-bottom: 2px; }
  .umarehoshi-hint { margin-top: 5px; }
  html.js .umarehoshi-form__actions { margin-top: 11px; }
  .umarehoshi-agree-box { padding: 8px 13px; }
  .umarehoshi-button--line { margin-top: 8px; }
  .umarehoshi-delivery-main { margin-top: 7px; font-size: .84rem; line-height: 1.6; }
  .umarehoshi-delivery-note { margin-top: 3px; line-height: 1.6; }
  .umarehoshi-intro .umarehoshi-delivery-note { margin-top: 8px; }
  .umarehoshi-mini-footer { margin-top: 7px; }
  .umarehoshi-form__actions.u-back-only { margin-top: 6px; }

  /* STEP遷移はカード全体で行う。PC固有のパネル移動アニメーションは使わない。 */

  /* STEP表示の淡いクロスフェード */
  .umarehoshi-progress__item,
  .umarehoshi-progress__star,
  .umarehoshi-progress__label {
    transition:
      color 300ms ease,
      opacity 300ms ease,
      background-color 300ms ease,
      border-color 300ms ease;
  }

  /* ボタンの押下感は明るさ・透明度だけ。拡大縮小は使わない。 */
  .umarehoshi-button--start:active,
  .umarehoshi-button--next:active,
  .umarehoshi-button--line:active,
  .umarehoshi-button--back:active,
  .umarehoshi-button--start.is-pressed,
  .umarehoshi-button--next.is-pressed,
  .umarehoshi-button--back.is-pressed {
    transform: none;
    filter: brightness(1.02);
    opacity: .94;
  }

  /* 遷移中は進む/戻るの操作を受け付けない */
  html.js .umarehoshi-hero.is-transitioning .umarehoshi-button--start,
  html.js .umarehoshi-hero.is-transitioning .umarehoshi-button--next,
  html.js .umarehoshi-hero.is-transitioning .umarehoshi-button--back {
    pointer-events: none;
  }
}

/* タブレット〜小さめPC（768〜1100px）: カードを少し小さくして月と顔を隠しすぎない */
@media (min-width: 768px) and (max-width: 1100px) {
  .umarehoshi-hero {
    width: min(calc(100vw - 40px), 1024px);
  }

  .umarehoshi-hero__visual { border-radius: 28px 34px 34px 28px; }

  .umarehoshi-hero__content {
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    width: 370px;
  }

  /* ヒーローが2:1で高さが限られるため、この帯域はさらに詰める（内容は変えない） */
  .umarehoshi-card { padding: 18px 20px 16px; }
  .umarehoshi-hero__title { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
  .umarehoshi-eyebrow { font-size: .66rem; margin-bottom: 0; }
  .umarehoshi-subtitle { margin: 2px 0 4px; font-size: .9rem; }
  .umarehoshi-lead { margin: 0 0 8px; font-size: .84rem; line-height: 1.7; }
  .umarehoshi-progress { margin: 4px 0 8px; }
  .umarehoshi-progress__star { font-size: 13px; }
  .umarehoshi-step__heading { margin-bottom: 8px; font-size: .98rem; }
  .umarehoshi-agree-box { padding: 7px 11px; font-size: .86rem; }
  html.js .umarehoshi-form__actions { margin-top: 9px; }
  .umarehoshi-button--line { margin-top: 7px; }
  .umarehoshi-delivery-main { margin-top: 6px; font-size: .78rem; }
  .umarehoshi-delivery-note { font-size: .72rem; }
  .umarehoshi-mini-footer { margin-top: 5px; font-size: .7rem; }
  .umarehoshi-form__actions.u-back-only { margin-top: 5px; }
  .umarehoshi-hint { margin-top: 3px; font-size: .74rem; }
  .umarehoshi-card input[type="text"],
  .umarehoshi-card select,
  .umarehoshi-sex-card { height: 48px; }
  .umarehoshi-button--start,
  .umarehoshi-button--next,
  .umarehoshi-button--line { min-height: 52px; padding: 13px 22px; }
  .umarehoshi-button--back { min-height: 52px; }
}

/* =====================================================================
   PC（1101px以上）: 画像をブラウザ横幅いっぱいに敷くフルブリード構成
   （max-width:1440px の中央バナーにはしない）
   ===================================================================== */
@media (min-width: 1101px) {
  .umarehoshi-hero {
    /* 上部に固定ヘッダーがある場合はこの値へ実測値を入れる */
    --umarehoshi-pc-top-offset: 0px;
    /* 新画像（女性は左・頭が上端寄り）。頭を切らないため上寄りにトリミングする。
       水平48〜52% / 垂直はワイド画面で頭が切れない範囲。実画面確認で 30% に決定 */
    --umarehoshi-image-position-pc: 50% 30%;

    position: relative;
    width: 100vw;
    max-width: none;
    height: min(760px, calc(100svh - var(--umarehoshi-pc-top-offset)));
    aspect-ratio: auto;
    min-height: 0;
    margin-inline: calc(50% - 50vw);
    overflow: hidden;
    box-sizing: border-box;
  }

  /* 全面表示では角丸も外側の影も付けない */
  .umarehoshi-hero__visual {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
  }

  .umarehoshi-hero__image {
    object-position: var(--umarehoshi-image-position-pc);
  }

  .umarehoshi-card {
    padding: 42px 46px 38px;
    border-radius: 30px;
    background: linear-gradient(145deg,
      rgba(255, 253, 249, 0.94),
      rgba(248, 247, 252, 0.89));
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(236, 218, 181, 0.64);
    box-shadow:
      0 28px 82px rgba(69, 61, 96, 0.18),
      inset 0 0 0 1px rgba(255, 255, 255, 0.48);
    overflow: visible;
  }

  .umarehoshi-hero__title { font-size: clamp(1.9rem, 2.3vw, 2.6rem); }
  .umarehoshi-subtitle { margin: 5px 0 7px; font-size: 1rem; }
  .umarehoshi-lead { margin: 0 0 14px; }
  .umarehoshi-progress { margin: 10px 0 14px; }
  .umarehoshi-step__heading { margin: 0 0 12px; }
  html.js .umarehoshi-form__actions { margin-top: 12px; }
  .umarehoshi-agree-box { padding: 11px 16px; }
  .umarehoshi-button--line { margin-top: 10px; }
  .umarehoshi-delivery-main { margin-top: 9px; font-size: .88rem; }
  .umarehoshi-delivery-note { margin-top: 4px; }
  .umarehoshi-mini-footer { margin-top: 9px; }
}

/* 1101〜1279px: カードはやや控えめ */
@media (min-width: 1101px) and (max-width: 1279px) {
  .umarehoshi-hero__content {
    position: absolute;
    z-index: 10;
    top: 50%;
    right: clamp(34px, 4vw, 52px);
    width: clamp(460px, 40vw, 510px);
    transform: translateY(-50%);
    overflow: visible;
  }
}

/* 1280px以上: 背景に負けない大きめのカード（差し出した手の先の余白に置く） */
@media (min-width: 1280px) {
  .umarehoshi-hero__content {
    position: absolute;
    z-index: 10;
    top: 50%;
    right: clamp(54px, 5vw, 88px);
    width: clamp(520px, 34vw, 570px);
    transform: translateY(-50%);
    overflow: visible;
  }
}

/* =====================================================================
   スマホ（767px以下）: 画像 → 説明 → CTA → 一問一答 の縦並び
   画像内に「うまれ星鑑定書」があるためHTMLタイトルは重複表示しない
   ===================================================================== */

@media (max-width: 767px) {

  .umarehoshi-hero {
  display: block;
  width: 100%;
  min-height: auto;
  overflow: visible;
  background: linear-gradient(
    180deg,
    #e8eef9 0%,
    #eeedf6 45%,
    #f7f4ef 100%
  );
}

  /* 右側補助グラデーションはPC専用（スマホは画像をそのまま見せる） */
  .umarehoshi-hero__readability { display: none; }

  .umarehoshi-hero__visual {
    /* 画像全体を常に表示する（固定高さ+coverは縦長画像の下側＝手元・帯を切るため廃止）。
       高さは通常フローの画像自身が決める（読み込み失敗時も巨大な空白にならない） */
    aspect-ratio: auto;
    width: 100%;
    min-height: 0;
    height: auto;
    overflow: hidden;
    border-radius: 0;
  }

  .umarehoshi-hero__content {
    position: relative;
    z-index: 10; /* 星(z-index:5)より前面 */
    display: block;
    padding: 0 18px 16px;
    padding-inline: 18px;
    /* 画像下部（衣装下部・花の領域）へカードを重ねる（調整範囲 -205〜-220px。
       顔・両手・帯は隠さない） */
    margin-top: -210px;
    overflow: visible;
  }

  /* 初期画面でもSTEP表示を見せる（設計図準拠: 説明→星(1点灯)→CTAの順・ラベル非表示） */
  html.js .umarehoshi-hero[data-step="intro"] .umarehoshi-progress { display: flex; order: 3; margin: 2px 0 14px; }
  html.js .umarehoshi-hero[data-step="intro"] .umarehoshi-progress__label { display: none; }
  html.js .umarehoshi-hero[data-step="intro"] [data-progress="1"] { color: #6f93d6; }
  html.js .umarehoshi-hero[data-step="intro"] .umarehoshi-progress__bar { margin-top: 7px; }
  html.js .umarehoshi-hero[data-step="intro"] .umarehoshi-card { display: flex; flex-direction: column; }
  html.js .umarehoshi-hero[data-step="intro"] .umarehoshi-intro { display: contents; }
  html.js .umarehoshi-hero[data-step="intro"] .umarehoshi-subtitle { order: 1; }
  html.js .umarehoshi-hero[data-step="intro"] .umarehoshi-intro .umarehoshi-lead { order: 2; }
  html.js .umarehoshi-hero[data-step="intro"] .umarehoshi-button--start { order: 4; }
  html.js .umarehoshi-hero[data-step="intro"] .umarehoshi-intro .umarehoshi-delivery-note { order: 5; }
  html.js .umarehoshi-hero[data-step="intro"] .umarehoshi-mini-footer { order: 6; }

  .umarehoshi-card {
    width: 100%;
    max-width: none;
    margin: 0;
    margin-left: 0;
    padding: 18px 20px 22px; /* 上下を少し詰める（24/26→18/22） */
    border-radius: 24px;
    /* 半透明カード: 背景はわずかに感じる程度（花の輪郭が明確に透けない濃さ・文字可読） */
    background: linear-gradient(145deg,
      rgba(255, 253, 249, 0.86),
      rgba(248, 247, 252, 0.80));
    -webkit-backdrop-filter: blur(16px) saturate(1.03);
    backdrop-filter: blur(16px) saturate(1.03);
    border: 1px solid rgba(236, 218, 181, 0.78);
    box-shadow:
      0 22px 60px rgba(76, 68, 105, 0.14),
      inset 0 0 0 1px rgba(255, 255, 255, 0.42);
    overflow: visible;
  }

  /* 画像内タイトルがあるため、タイトルとeyebrowは表示しない（二重表示防止） */
  .umarehoshi-hero.has-mobile-image-title .umarehoshi-hero__title,
  .umarehoshi-hero.has-mobile-image-title .umarehoshi-eyebrow {
    display: none;
  }

  .umarehoshi-form__actions { grid-template-columns: 94px minmax(0, 1fr); gap: 12px; }
  html.js .umarehoshi-form__actions.u-back-only { grid-template-columns: 94px; }

  .umarehoshi-delivery-main,
  .umarehoshi-delivery-note { padding-inline: 4px; }

/* SP：画像下端そのものを背景へ溶かす */
.umarehoshi-hero__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 941 / 1672;

  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 72%,
    rgba(0, 0, 0, 0.88) 82%,
    rgba(0, 0, 0, 0.42) 94%,
    transparent 100%
  );

  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 72%,
    rgba(0, 0, 0, 0.88) 82%,
    rgba(0, 0, 0, 0.42) 94%,
    transparent 100%
  );

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

  /* =====================================================================
     STEP遷移演出（カード全体を静かにフェードさせる）
     ===================================================================== */

  /* STEP遷移はスマホもカード全体で行う。子要素単位の移動アニメーションは使わない。 */

  /* STEP表示（星＋ラベル）の淡いクロスフェード */
  .umarehoshi-progress__item,
  .umarehoshi-progress__star,
  .umarehoshi-progress__label {
    transition:
      color 320ms ease,
      opacity 320ms ease,
      background-color 320ms ease,
      border-color 320ms ease;
  }

  /* ボタンの押下感は明るさ・透明度だけ。位置は動かさない。 */
  .umarehoshi-button--start,
  .umarehoshi-button--next,
  .umarehoshi-button--line,
  .umarehoshi-button--back {
    transition:
      transform 140ms ease,
      filter 180ms ease,
      opacity 180ms ease;
  }
  /* hoverの浮き上がりはスマホでは使わない（タップ時に位置が動かないように）。
     タップ後にhover状態が残る端末でも押下感が消えないよう、押下ルールより前に置く */
  .umarehoshi-button--start:hover,
  .umarehoshi-button--next:hover,
  .umarehoshi-button--line:hover { transform: none; }

  .umarehoshi-button--start:active,
  .umarehoshi-button--next:active,
  .umarehoshi-button--line:active,
  .umarehoshi-button--back:active,
  .umarehoshi-button--start.is-pressed,
  .umarehoshi-button--next.is-pressed,
  .umarehoshi-button--back.is-pressed {
    transform: none;
    filter: brightness(1.02);
    opacity: .94;
  }

  /* 遷移中は進む/戻るの操作を受け付けない（二重遷移防止・フォーム値には触れない） */
  html.js .umarehoshi-hero.is-transitioning .umarehoshi-button--start,
  html.js .umarehoshi-hero.is-transitioning .umarehoshi-button--next,
  html.js .umarehoshi-hero.is-transitioning .umarehoshi-button--back {
    pointer-events: none;
  }
/* SP：ヒーロー画像の上下を背景になじませる */
.umarehoshi-hero__image-layer {
  position: relative;
}

.umarehoshi-hero__image-layer::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 2;
}

.umarehoshi-hero__image-layer::before {
  top: 0;
  height: 56px;
  background: linear-gradient(
    to bottom,
    rgba(245, 242, 237, 0.22) 0%,
    rgba(245, 242, 237, 0) 100%
  );
}
}


/* =====================================================================
   動きを減らす設定
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .umarehoshi-card.u-fade,
  .umarehoshi-card.is-entering,
  .umarehoshi-card.is-leaving { animation: none; }
  .umarehoshi-progress__item,
  .umarehoshi-progress__star,
  .umarehoshi-progress__label { transition: none; }
  .umarehoshi-hero[data-step="4"] .umarehoshi-progress__star { animation: none; }
  .umarehoshi-progress__star,
  .umarehoshi-sex-card,
  .umarehoshi-button--start,
  .umarehoshi-button--next,
  .umarehoshi-button--line,
  .umarehoshi-button--back { transition: none; }
}

/* =====================================================================
   案内・受付完了などのメッセージページ（result等）
   ===================================================================== */
.notice-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 0;
}
.notice-card {
  max-width: 560px;
  margin: 0 1.25rem;
  background: #fffdf8;
  border: 1px solid #e5dccb;
  border-radius: 12px;
  padding: 2.2rem 1.8rem;
  text-align: center;
}
.notice-card h1 {
  font-size: 1.2rem;
  color: #7b9acc;
  letter-spacing: .15em;
  margin: 0 0 1.2rem;
}
.notice-card p { font-size: .95rem; text-align: left; }
.notice-card p.centered { text-align: center; }
/* LINEへ送ってもらうキーワード（さいかんてい／こべつ／ふかぼり）の強調 */
.notice-card .keyword {
  display: inline-block;
  margin: 0 .15em;
  padding: .1em .55em;
  background: #f3efe6;
  border: 1px solid #e0d6c2;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #6b5f4a;
}

.line-button {
  display: inline-block;
  margin-top: 1.4rem;
  padding: .9rem 2.4rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: #fff;
  background: #06c755;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(6, 199, 85, .3);
}
.line-button:hover { opacity: .9; }

.back-link { display: inline-block; margin-top: 1.2rem; font-size: .9rem; }

.site-footer {
  text-align: center;
  padding: 2rem 1rem 2.4rem;
  font-size: .8rem;
  color: #9a9184;
}
.site-footer a { color: #9a9184; }
.site-footer p { margin: .3rem 0; }
/* PC：鑑定フォームを少し左へ */
@media (min-width: 1101px) {
  .umarehoshi-hero__content {
    transform: translate(-55px, -50%);
  }
}
/* =====================================================================
   うまれ星鑑定書 ヒーローカード 神秘性強化パッチ
   使い方: 既存CSSの「いちばん最後」に追記する（HTMLの変更は不要）
   方針: 追加要素なし・レイアウト不変・可読性は落とさない
   ===================================================================== */

:root {
  --uh-gold:        #c9ae72;
  --uh-gold-line:   rgba(201, 174, 114, .55);
  --uh-gold-faint:  rgba(201, 174, 114, .26);
  --uh-blue:        #6f93d6;
  --uh-blue-glow:   rgba(150, 185, 245, .85);
  --uh-ink:         #4a4168;
}

/* ---------------------------------------------------------------------
   1. カード本体：ただの半透明長方形 → 光を含んだ「鑑定書」の紙
   --------------------------------------------------------------------- */

.umarehoshi-card {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(201, 174, 114, .46);
  background:
    radial-gradient(130% 80% at 50% -12%, rgba(212, 227, 255, .50) 0%, rgba(255,255,255,0) 58%),
    radial-gradient( 95% 60% at 50% 112%, rgba(228, 216, 246, .46) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(158deg,
      rgba(255, 253, 249, .82) 0%,
      rgba(251, 249, 253, .88) 52%,
      rgba(246, 244, 252, .92) 100%);
  box-shadow:
    0 30px 84px rgba(62, 54, 94, .22),
    0 0 46px rgba(158, 190, 245, .16),
    inset 0 1px 0 rgba(255, 255, 255, .78),
    inset 0 0 70px rgba(198, 214, 250, .16);
}

/* 内側の金の細枠＋上部の月光ハイライト */
.umarehoshi-card::before {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 0;
  border: 1px solid var(--uh-gold-faint);
  /* 親の角丸 − inset(9px)。親は 28px（既定/768〜1100） */
  border-radius: 19px;
  pointer-events: none;
  background:
    radial-gradient(70% 34% at 50% 0%, rgba(255, 255, 255, .42) 0%, rgba(255,255,255,0) 70%);
}

/* 親カードの角丸はブレークポイントで変わるので内枠も追従させる */
@media (min-width: 1101px) {          /* 親 30px */
  .umarehoshi-card::before { border-radius: 21px; }
}
@media (max-width: 767px) {           /* 親 24px */
  .umarehoshi-card::before { border-radius: 15px; }
}

/* 星屑（カードの中で静かに瞬く） */
.umarehoshi-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 11% 16%, rgba(126, 155, 211, .48), transparent 62%),
    radial-gradient(1.2px 1.2px at 27% 62%, rgba(201, 174, 114, .42), transparent 62%),
    radial-gradient(1.8px 1.8px at 48%  8%, rgba(255, 255, 255, .95), transparent 62%),
    radial-gradient(1.1px 1.1px at 68% 38%, rgba(135, 164, 218, .38), transparent 62%),
    radial-gradient(1.5px 1.5px at 86% 20%, rgba(201, 174, 114, .36), transparent 62%),
    radial-gradient(1.2px 1.2px at 91% 71%, rgba(255, 255, 255, .90), transparent 62%),
    radial-gradient(1.0px 1.0px at 18% 88%, rgba(135, 164, 218, .34), transparent 62%),
    radial-gradient(1.4px 1.4px at 60% 92%, rgba(201, 174, 114, .30), transparent 62%);
  opacity: 1;
  animation: uh-stardust 14s ease-in-out infinite;
}

/* 星の実アルファを .30〜.48 まで落としたので、明滅の下限も上げて消滅を防ぐ */
@keyframes uh-stardust {
  0%, 100% { opacity: .62; }
  50%      { opacity: 1;   }
}

/* 文字・フォームは星屑より前面へ */
.umarehoshi-card > *,
.umarehoshi-card .umarehoshi-intro > * {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------
   2. タイトル周り：金の罫線とハーフトーンの発光
   --------------------------------------------------------------------- */

.umarehoshi-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9em;
  color: var(--uh-gold);
}
.umarehoshi-eyebrow::before,
.umarehoshi-eyebrow::after {
  content: "";
  flex: 0 0 auto;
  width: clamp(16px, 8%, 44px);
  height: 1px;
  background: linear-gradient(90deg, rgba(201,174,114,0), var(--uh-gold-line));
}
.umarehoshi-eyebrow::after { transform: scaleX(-1); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .umarehoshi-hero__title {
    background-image: linear-gradient(180deg, #5d5081 0%, #453b62 54%, #594b77 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter:
      drop-shadow(0 1px 0 rgba(255, 255, 255, .6))
      drop-shadow(0 0 20px rgba(168, 196, 246, .42));
  }
}

/* サブタイトル下に菱星の区切り */
.umarehoshi-subtitle {
  position: relative;
  padding-bottom: 16px;
  color: #6d8cc6;
}
.umarehoshi-subtitle::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: min(230px, 76%);
  height: 1px;
  background: linear-gradient(90deg,
    rgba(201,174,114,0)   0%,
    rgba(201,174,114,.55) 26%,
    rgba(201,174,114,0)   43%,
    rgba(201,174,114,0)   57%,
    rgba(201,174,114,.55) 74%,
    rgba(201,174,114,0)  100%);
}
.umarehoshi-subtitle::after {
  content: "✦";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  color: rgba(201, 174, 114, .9);
  font-size: 11px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(226, 205, 152, .7);
}

.umarehoshi-lead { color: #6a6379; }

/* ---------------------------------------------------------------------
   3. STEP表示：星を「灯す」
   --------------------------------------------------------------------- */

.umarehoshi-progress__star { font-size: 16px; }

.umarehoshi-progress__bar {
  background: linear-gradient(90deg,
    rgba(201,174,114,.12),
    rgba(201,174,114,.58) 50%,
    rgba(160,178,222,.30));
}

.umarehoshi-progress__label {
  font-size: 9.5px;
  letter-spacing: .12em;
}

.umarehoshi-hero[data-step="1"] [data-progress="1"] .umarehoshi-progress__star,
.umarehoshi-hero[data-step="2"] [data-progress="2"] .umarehoshi-progress__star,
.umarehoshi-hero[data-step="3"] [data-progress="3"] .umarehoshi-progress__star,
.umarehoshi-hero[data-step="4"] [data-progress="4"] .umarehoshi-progress__star {
  text-shadow:
    0 0 5px  rgba(255, 255, 255, .95),
    0 0 14px var(--uh-blue-glow),
    0 0 30px rgba(120, 160, 235, .55);
  transform: scale(1.3);
  animation: uh-star-pulse 3.4s ease-in-out infinite;
}

@keyframes uh-star-pulse {
  0%, 100% { opacity: 1;   }
  50%      { opacity: .72; }
}

/* 完了済みの星も金の残光を持たせる */
.umarehoshi-hero[data-step="2"] [data-progress="1"] .umarehoshi-progress__star,
.umarehoshi-hero[data-step="3"] [data-progress="1"] .umarehoshi-progress__star,
.umarehoshi-hero[data-step="3"] [data-progress="2"] .umarehoshi-progress__star,
.umarehoshi-hero[data-step="4"] [data-progress="1"] .umarehoshi-progress__star,
.umarehoshi-hero[data-step="4"] [data-progress="2"] .umarehoshi-progress__star,
.umarehoshi-hero[data-step="4"] [data-progress="3"] .umarehoshi-progress__star {
  text-shadow: 0 0 9px rgba(226, 205, 152, .6);
}

/* ---------------------------------------------------------------------
   4. 入力欄：白い箱をやめる（ここが今いちばん世界観を壊している）
   --------------------------------------------------------------------- */

.umarehoshi-card input[type="text"],
.umarehoshi-card select {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .74),
    rgba(252, 250, 246, .54));
  border: 1px solid rgba(201, 174, 114, .44);
  border-radius: 10px;
  letter-spacing: .06em;
  box-shadow:
    inset 0 1px 3px rgba(90, 80, 120, .07),
    inset 0 0 0 1px rgba(255, 255, 255, .45);
}

.umarehoshi-card input[type="text"] { text-align: center; }

.umarehoshi-card input::placeholder {
  color: rgba(150, 142, 160, .72);
  letter-spacing: .1em;
}

.umarehoshi-card input[type="text"]:focus,
.umarehoshi-card select:focus,
.umarehoshi-card input[type="text"]:focus-visible,
.umarehoshi-card select:focus-visible {
  border-color: rgba(143, 166, 212, .95);
  box-shadow:
    0 0 0 3px rgba(143, 166, 212, .22),
    0 0 20px rgba(158, 190, 240, .40),
    inset 0 1px 3px rgba(90, 80, 120, .05);
}

/* 性別カード */
.umarehoshi-sex-card {
  background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(252,250,246,.50));
  border-color: rgba(201, 174, 114, .42);
  letter-spacing: .08em;
}
.umarehoshi-sex-card:has(input:checked) {
  background: linear-gradient(180deg, rgba(228, 236, 253, .92), rgba(213, 226, 250, .78));
  border-color: rgba(143, 166, 212, .9);
  color: #42537a;
  box-shadow:
    0 0 18px rgba(150, 185, 245, .38),
    inset 0 1px 0 rgba(255, 255, 255, .72);
}

/* 18歳確認 */
.umarehoshi-agree-box {
  background: linear-gradient(180deg, rgba(250, 246, 236, .60), rgba(246, 243, 251, .48));
  border: 1px solid rgba(201, 174, 114, .30);
}

/* ---------------------------------------------------------------------
   5. ボタン：澄んだ青〜ラベンダー。濁り・強い金影・暗い内側影を使わない
   --------------------------------------------------------------------- */

.umarehoshi-button--start,
.umarehoshi-button--next,
.umarehoshi-button--line {
  position: relative;
  overflow: hidden;
  color: rgba(255, 255, 255, .97);
  background: linear-gradient(135deg,
    #91b8f0 0%,
    #86aae6 46%,
    #9a95dc 100%);
  border: 1px solid rgba(255, 255, 255, .30);
  box-shadow:
    0 12px 30px rgba(103, 126, 180, .24),
    inset 0 1px 0 rgba(255, 255, 255, .26);
  text-shadow: 0 1px 2px rgba(72, 84, 132, .16);
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    filter .28s ease;
}

/* 7秒に1回だけ、白い月光が静かに通る */
.umarehoshi-button--start::before,
.umarehoshi-button--next::before,
.umarehoshi-button--line::before {
  content: "";
  position: absolute;
  inset: -20% -60%;
  pointer-events: none;
  background: linear-gradient(104deg,
    rgba(255,255,255,0)   40%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,0)   60%);
  transform: translateX(-100%);
  animation: uh-sheen 7s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes uh-sheen {
  0%, 64%  { transform: translateX(-100%); }
  88%,100% { transform: translateX(100%);  }
}

.umarehoshi-button--start:hover,
.umarehoshi-button--next:hover,
.umarehoshi-button--line:hover {
  transform: translateY(-2px);
  filter: brightness(1.035);
  box-shadow:
    0 16px 34px rgba(103, 126, 180, .30),
    inset 0 1px 0 rgba(255, 255, 255, .30);
}

.umarehoshi-button--start:active,
.umarehoshi-button--next:active,
.umarehoshi-button--line:active {
  transform: translateY(1px);
  filter: brightness(.995);
  box-shadow:
    0 8px 20px rgba(103, 126, 180, .21),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* 戻る：主ボタンより静かに、鑑定書の余白へ馴染ませる */
.umarehoshi-button--back {
  background: rgba(255, 253, 248, .58);
  border: 1px solid rgba(201, 174, 114, .38);
  color: #6a6088;
  letter-spacing: .1em;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .68),
    0 5px 16px rgba(74, 72, 94, .035);
}

.umarehoshi-button--back:hover {
  background: rgba(252, 249, 243, .82);
  border-color: rgba(201, 174, 114, .56);
}

/* ---------------------------------------------------------------------
   6. 補助テキスト
   --------------------------------------------------------------------- */

.umarehoshi-hint {
  color: #9a9081;
  letter-spacing: .06em;
}

.umarehoshi-mini-footer a {
  color: #9c9184;
  text-decoration-color: rgba(201, 174, 114, .5);
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------
   7. 動きを減らす設定
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .umarehoshi-card::after { animation: none; opacity: .85; }
  .umarehoshi-button--start::before,
  .umarehoshi-button--next::before,
  .umarehoshi-button--line::before { animation: none; opacity: 0; }
  .umarehoshi-hero[data-step="1"] [data-progress="1"] .umarehoshi-progress__star,
  .umarehoshi-hero[data-step="2"] [data-progress="2"] .umarehoshi-progress__star,
  .umarehoshi-hero[data-step="3"] [data-progress="3"] .umarehoshi-progress__star,
  .umarehoshi-hero[data-step="4"] [data-progress="4"] .umarehoshi-progress__star { animation: none; }
}
/* =========================================================
   スマホ：ファーストビュー簡略化
   ========================================================= */

@media (max-width: 767px) {

  .umarehoshi-hero,
  .umarehoshi-card {
    overflow-anchor: none;
  }

  /* STEP1〜4の高さを揃えて、切替時のカクつきを防ぐ */
  html.js .umarehoshi-hero:not([data-step="intro"]) .umarehoshi-card {
    min-height: 420px;
  }

  html.js .umarehoshi-hero[data-step="intro"] .umarehoshi-lead,
  html.js .umarehoshi-hero[data-step="intro"] .umarehoshi-progress,
  html.js .umarehoshi-hero[data-step="intro"] .umarehoshi-delivery-note {
    display: none;
  }

  html.js .umarehoshi-hero[data-step="intro"] .umarehoshi-card {
    padding: 14px 20px 10px;
  }

  html.js .umarehoshi-hero[data-step="intro"] .umarehoshi-subtitle {
    margin: 14px 0 10px;
    font-size: 1.05rem;
    line-height: 1.5;
  }

  html.js .umarehoshi-hero[data-step="intro"] .umarehoshi-mini-footer {
    margin: 6px 0 0;
  }
}
/* =====================================================================
   UMAREHOSHI / FINAL PC DESIGN
   2026-10
   - PCファーストビュー
   - STEP1〜4
   - 可読性
   - CTA
   - STEP表示
   - クロスフェード
   - 背景モーション
   ===================================================================== */


/* =====================================================================
   PC
   ===================================================================== */

@media (min-width: 768px) {

  /* -------------------------------------------------------------------
     共通：背景画像
     ------------------------------------------------------------------- */

  .umarehoshi-hero__image {
    transform: scale(1);
    transform-origin: 40% 48%;

    animation:
      umarehoshiHeroBreath
      16s
      cubic-bezier(.45, 0, .55, 1)
      infinite alternate;

    will-change: transform;
  }


  @keyframes umarehoshiHeroBreath {

    from {
      transform: scale(1);
    }

    to {
      transform: scale(1.06);
    }
  }


  /* =================================================================
     INTRO
     ================================================================= */

  .umarehoshi-hero[data-step="intro"] .umarehoshi-hero__readability {
    background: none;
  }


  /* 白いカードを撤去 */
  .umarehoshi-hero[data-step="intro"] .umarehoshi-card {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: 46px 26px 40px;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;

    -webkit-backdrop-filter: none;
    backdrop-filter: none;

    overflow: visible;
  }


  /* 月光ヴェール */
  .umarehoshi-hero[data-step="intro"] .umarehoshi-card::before {
    content: "";

    position: absolute;
    z-index: -2;

    inset: auto;
    left: 50%;
    top: 49%;

    width: 126%;
    height: 130%;

    transform: translate(-50%, -50%);

    border: 0;
    border-radius: 50%;

    background:
      radial-gradient(
        ellipse at center,
        rgba(250,252,255,.96) 0%,
        rgba(247,250,255,.88) 24%,
        rgba(238,245,255,.62) 44%,
        rgba(221,233,250,.28) 62%,
        rgba(221,233,250,.08) 73%,
        rgba(255,255,255,0) 86%
      );

    filter: blur(16px);

    pointer-events: none;
  }


  /* 月光の芯 */
  .umarehoshi-hero[data-step="intro"] .umarehoshi-card::after {
    content: "";

    position: absolute;
    z-index: -1;

    inset: auto;
    left: 50%;
    top: 48%;

    width: 72%;
    height: 72%;

    transform: translate(-50%, -50%);

    border: 0;
    border-radius: 50%;

    background:
      radial-gradient(
        ellipse at center,
        rgba(180,207,255,.10) 0%,
        rgba(180,207,255,.04) 44%,
        rgba(180,207,255,0) 76%
      );

    filter: blur(26px);

    animation: none;

    pointer-events: none;
  }


  .umarehoshi-hero[data-step="intro"] .umarehoshi-card > *,
  .umarehoshi-hero[data-step="intro"] .umarehoshi-intro > * {
    position: relative;
    z-index: 1;
  }


  /* 英字 */
  .umarehoshi-hero[data-step="intro"] .umarehoshi-eyebrow {
    margin: 0 0 9px;

    color: #87662f;

    font-size: .72rem;
    font-weight: 600;
    line-height: 1.4;

    letter-spacing: .40em;

    text-shadow:
      0 1px 1px rgba(255,255,255,.95),
      0 2px 8px rgba(55,71,105,.10);
  }


  .umarehoshi-hero[data-step="intro"] .umarehoshi-eyebrow::before,
  .umarehoshi-hero[data-step="intro"] .umarehoshi-eyebrow::after {
    width: clamp(18px, 7%, 38px);

    background:
      linear-gradient(
        90deg,
        rgba(183,145,80,0),
        rgba(183,145,80,.42)
      );
  }


  /* タイトル */
  .umarehoshi-hero[data-step="intro"] .umarehoshi-hero__title {
    margin: 0 0 14px;
    padding: 0;

    color: #383249;

    background: none;
    background-image: none;

    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;

    filter: none;

    font-size: clamp(2.35rem, 2.85vw, 3.35rem);
    font-weight: 600;

    line-height: 1.3;
    letter-spacing: .10em;

    text-shadow:
      0 1px 0 rgba(255,255,255,.90),
      0 3px 14px rgba(47,56,88,.12);
  }


  /* サブタイトル */
  .umarehoshi-hero[data-step="intro"] .umarehoshi-subtitle {
    margin: 0 0 18px;
    padding: 0;

    color: #4e6fa7;

    font-size: 1.04rem;
    font-weight: 500;
    line-height: 1.7;

    letter-spacing: .14em;

    text-shadow:
      0 1px 2px rgba(255,255,255,.95);
  }


  .umarehoshi-hero[data-step="intro"] .umarehoshi-subtitle::before,
  .umarehoshi-hero[data-step="intro"] .umarehoshi-subtitle::after {
    display: none;
  }


  /* 説明 */
  .umarehoshi-hero[data-step="intro"] .umarehoshi-lead {
    margin: 0 0 24px;

    color: #4f4a59;

    font-size: .98rem;
    font-weight: 500;
    line-height: 1.95;

    letter-spacing: .035em;

    text-shadow:
      0 1px 2px rgba(255,255,255,.92);
  }


  /* =================================================================
     STEP1〜4
     ================================================================= */

  /* STEPでは説明文を再表示しない */
  .umarehoshi-hero:not([data-step="intro"])
  .umarehoshi-lead--steps {
    display: none !important;
  }


  /* STEP中の背景可読性 */
  .umarehoshi-hero:not([data-step="intro"])
  .umarehoshi-hero__readability {
    display: block;

    background:
      linear-gradient(
        90deg,
        rgba(55,72,105,0) 38%,
        rgba(55,72,105,.02) 50%,
        rgba(55,72,105,.05) 63%,
        rgba(55,72,105,.09) 78%,
        rgba(55,72,105,.12) 100%
      );
  }


  /* STEPも外枠カードなし */
  .umarehoshi-hero:not([data-step="intro"]) .umarehoshi-card {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;

    padding: 46px 30px 42px;

    background: transparent;

    border: 0;
    border-radius: 0;

    box-shadow: none;

    -webkit-backdrop-filter: none;
    backdrop-filter: none;

    overflow: visible;
  }


  /* STEP側は弱い白光だけ */
  .umarehoshi-hero:not([data-step="intro"])
  .umarehoshi-card::before {
    content: "";

    position: absolute;
    z-index: -2;

    inset: auto;

    left: 50%;
    top: 50%;

    width: 126%;
    height: 145%;

    transform: translate(-50%, -50%);

    border: 0;
    border-radius: 50%;

    background:
      radial-gradient(
        ellipse at center,
        rgba(250,252,255,.46) 0%,
        rgba(245,249,255,.31) 32%,
        rgba(232,240,252,.14) 56%,
        rgba(221,233,250,.04) 72%,
        rgba(255,255,255,0) 86%
      );

    filter: blur(18px);

    -webkit-backdrop-filter: none;
    backdrop-filter: none;

    pointer-events: none;
  }


  /* 古い星屑・別レイヤーを停止 */
  .umarehoshi-hero:not([data-step="intro"])
  .umarehoshi-card::after {
    display: none;
  }


  /* トップタイトル類はSTEPで消す */
  .umarehoshi-hero:not([data-step="intro"]) .umarehoshi-eyebrow,
  .umarehoshi-hero:not([data-step="intro"]) .umarehoshi-hero__title {
    display: none;
  }


  /* STEP見出し */
  .umarehoshi-hero:not([data-step="intro"])
  .umarehoshi-step__heading {
    margin: 0 0 20px;

    color: #302b3c;

    font-size: 1.22rem;
    font-weight: 600;
    line-height: 1.6;

    letter-spacing: .12em;

    text-shadow:
      0 1px 0 rgba(255,255,255,.90),
      0 2px 9px rgba(37,46,67,.12);
  }


  /* =================================================================
     STEP PROGRESS
     ================================================================= */

  .umarehoshi-hero:not([data-step="intro"])
  .umarehoshi-progress {
    width: fit-content;

    margin: 0 auto 22px;

    padding: 9px 18px 8px;

    gap: 9px;

    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.58) 15%,
        rgba(255,255,255,.70) 50%,
        rgba(255,255,255,.58) 85%,
        rgba(255,255,255,0) 100%
      );

    border-radius: 999px;
  }


  .umarehoshi-hero:not([data-step="intro"])
  .umarehoshi-progress__item {
    color: #59524b;
  }


  .umarehoshi-hero:not([data-step="intro"])
  .umarehoshi-progress__star {
    font-size: 17px;

    animation: none;

    text-shadow:
      0 1px 0 #fff,
      0 0 5px rgba(255,255,255,.96);
  }


  .umarehoshi-hero:not([data-step="intro"])
  .umarehoshi-progress__label {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;

    letter-spacing: .08em;

    text-shadow:
      0 1px 0 #fff,
      0 0 5px rgba(255,255,255,.96),
      0 2px 7px rgba(35,43,62,.13);
  }


  /* 現在 */
  .umarehoshi-hero[data-step="1"] [data-progress="1"],
  .umarehoshi-hero[data-step="2"] [data-progress="2"],
  .umarehoshi-hero[data-step="3"] [data-progress="3"],
  .umarehoshi-hero[data-step="4"] [data-progress="4"] {
    color: #345d9f;
  }


  .umarehoshi-hero[data-step="1"]
  [data-progress="1"] .umarehoshi-progress__star,

  .umarehoshi-hero[data-step="2"]
  [data-progress="2"] .umarehoshi-progress__star,

  .umarehoshi-hero[data-step="3"]
  [data-progress="3"] .umarehoshi-progress__star,

  .umarehoshi-hero[data-step="4"]
  [data-progress="4"] .umarehoshi-progress__star {
    color: #416cb2;

    transform: scale(1.22);

    text-shadow:
      0 1px 0 #fff,
      0 0 7px rgba(255,255,255,1),
      0 0 12px rgba(76,116,184,.42);
  }


  /* 完了 */
  .umarehoshi-hero[data-step="2"] [data-progress="1"],

  .umarehoshi-hero[data-step="3"] [data-progress="1"],
  .umarehoshi-hero[data-step="3"] [data-progress="2"],

  .umarehoshi-hero[data-step="4"] [data-progress="1"],
  .umarehoshi-hero[data-step="4"] [data-progress="2"],
  .umarehoshi-hero[data-step="4"] [data-progress="3"] {
    color: #8d6425;
  }


  .umarehoshi-hero:not([data-step="intro"])
  .umarehoshi-progress__bar {
    width: 30px;
    height: 1px;

    margin-top: 8px;

    opacity: 1;

    background:
      linear-gradient(
        90deg,
        rgba(126,96,46,.34),
        rgba(126,96,46,.72) 50%,
        rgba(64,91,139,.46)
      );

    box-shadow:
      0 1px 0 rgba(255,255,255,.9);
  }


  /* =================================================================
     INPUT
     ================================================================= */

  .umarehoshi-hero:not([data-step="intro"])
  .umarehoshi-card input[type="text"],

  .umarehoshi-hero:not([data-step="intro"])
  .umarehoshi-card select {
    height: 62px;

    color: #38333f;

    font-size: 1rem;

    background:
      rgba(255,255,255,.93);

    border:
      1px solid rgba(147,132,104,.48);

    border-radius: 12px;

    box-shadow:
      0 8px 24px rgba(45,55,78,.08),
      inset 0 1px 0 rgba(255,255,255,.96);

    transition:
      border-color .28s ease,
      box-shadow .28s ease,
      background .28s ease;
  }


  .umarehoshi-hero:not([data-step="intro"])
  .umarehoshi-card input[type="text"]:focus,

  .umarehoshi-hero:not([data-step="intro"])
  .umarehoshi-card select:focus {
    outline: none;

    background:
      rgba(255,255,255,.98);

    border-color:
      rgba(91,122,180,.78);

    box-shadow:
      0 0 0 3px rgba(104,139,201,.13),
      0 9px 26px rgba(38,50,75,.10);
  }


  .umarehoshi-hero:not([data-step="intro"])
  .umarehoshi-hint {
    margin-top: 8px;

    color: #625b53;

    font-size: .8rem;

    letter-spacing: .06em;

    text-shadow:
      0 1px 2px rgba(255,255,255,.88);
  }


  /* 性別 */
  .umarehoshi-hero:not([data-step="intro"])
  .umarehoshi-sex-card {
    background:
      rgba(255,255,255,.84);

    border-color:
      rgba(157,138,103,.42);

    color: #554e56;
  }


  .umarehoshi-hero:not([data-step="intro"])
  .umarehoshi-sex-card:has(input:checked) {
    background:
      rgba(226,236,253,.90);

    border-color:
      rgba(88,124,187,.72);

    color: #3f5680;

    box-shadow:
      0 0 0 2px rgba(99,137,203,.08),
      0 9px 24px rgba(71,100,151,.08);
  }


  /* =================================================================
     BUTTONS
     ================================================================= */

  .umarehoshi-hero:not([data-step="intro"])
  .umarehoshi-form__actions {
    grid-template-columns:
      112px
      minmax(0, 1fr);

    gap: 16px;

    margin-top: 22px;
  }


  /* メインCTA統一 */
  .umarehoshi-hero[data-step="intro"]
  .umarehoshi-button--start,

  .umarehoshi-hero:not([data-step="intro"])
  .umarehoshi-button--next,

  .umarehoshi-hero:not([data-step="intro"])
  .umarehoshi-button--line {
    position: relative;

    min-height: 62px;

    color: #fff;

    border:
      1px solid rgba(255,255,255,.78);

    border-radius: 999px;

    background:
      linear-gradient(
        135deg,
        #e7cf98 0%,
        #d7b66c 34%,
        #bf9147 68%,
        #d9bb72 100%
      );

    box-shadow:
      0 12px 28px rgba(118,84,35,.16),
      inset 0 1px 0 rgba(255,255,255,.72);

    font-size: 1.02rem;
    font-weight: 600;

    letter-spacing: .07em;

    text-shadow:
      0 1px 2px rgba(95,65,24,.34),
      0 0 1px rgba(95,65,24,.18);

    transition:
      transform .4s cubic-bezier(.16,1,.3,1),
      box-shadow .4s cubic-bezier(.16,1,.3,1),
      filter .4s cubic-bezier(.16,1,.3,1);
  }


  .umarehoshi-hero[data-step="intro"]
  .umarehoshi-button--start {
    width: min(430px, 100%);

    margin-inline: auto;
  }


  .umarehoshi-hero:not([data-step="intro"])
  .umarehoshi-button--line {
    margin-top: 14px;
  }


  /* 古い自動シマー停止 */
  .umarehoshi-button--start::before,
  .umarehoshi-button--next::before,
  .umarehoshi-button--line::before {
    animation: none;
    opacity: 0;
  }


  @media (hover: hover) {

    .umarehoshi-hero[data-step="intro"]
    .umarehoshi-button--start:hover,

    .umarehoshi-hero:not([data-step="intro"])
    .umarehoshi-button--next:hover,

    .umarehoshi-hero:not([data-step="intro"])
    .umarehoshi-button--line:hover {
      transform: translateY(-2px);

      filter: brightness(1.025);

      box-shadow:
        0 17px 36px rgba(118,84,35,.19),
        0 0 22px rgba(255,226,165,.10),
        inset 0 1px 0 rgba(255,255,255,.84);
    }
  }


  /* 戻る */
  .umarehoshi-hero:not([data-step="intro"])
  .umarehoshi-button--back {
    min-height: 60px;

    color: #514b58;

    background:
      rgba(255,255,255,.76);

    border:
      1px solid rgba(161,139,99,.46);

    box-shadow:
      0 8px 20px rgba(37,49,72,.05),
      inset 0 1px 0 rgba(255,255,255,.90);
  }


  /* =================================================================
     STEP4
     ================================================================= */

  .umarehoshi-hero[data-step="4"]
  .umarehoshi-agree-box {
    padding: 16px 20px;

    color: #403b47;

    font-size: .98rem;

    background:
      rgba(255,255,255,.82);

    border:
      1px solid rgba(160,138,99,.42);

    box-shadow:
      0 8px 22px rgba(37,49,72,.05);
  }


  .umarehoshi-hero[data-step="4"]
  .umarehoshi-delivery-main {
    margin-top: 14px;

    color: #504a57;

    font-size: .9rem;

    text-shadow:
      0 1px 2px rgba(255,255,255,.86);
  }


  .umarehoshi-hero[data-step="4"]
  .umarehoshi-delivery-note {
    margin-top: 5px;

    color: #504a57;

    font-size: .82rem;

    text-shadow:
      0 1px 2px rgba(255,255,255,.86);
  }


  /* footer */
  .umarehoshi-hero:not([data-step="intro"])
  .umarehoshi-mini-footer {
    margin-top: 14px;
  }


  .umarehoshi-hero:not([data-step="intro"])
  .umarehoshi-mini-footer a {
    color: #514838;

    font-weight: 500;

    text-decoration-color:
      rgba(81,72,56,.42);

    text-underline-offset: 4px;

    text-shadow:
      0 1px 2px rgba(255,255,255,.82);
  }


  /* =================================================================
     CROSS FADE
     ================================================================= */

  html.js .umarehoshi-card.is-leaving,
  html.js .umarehoshi-card.is-entering {
    animation: none;
  }


html.js .umarehoshi-card.is-leaving > .umarehoshi-eyebrow,
html.js .umarehoshi-card.is-leaving > .umarehoshi-hero__title,
html.js .umarehoshi-card.is-leaving > .umarehoshi-progress,
html.js .umarehoshi-card.is-leaving > .umarehoshi-intro,
html.js .umarehoshi-card.is-leaving > .umarehoshi-form,
html.js .umarehoshi-card.is-leaving > .umarehoshi-mini-footer {
  animation:
    umarehoshiContentLeave
    700ms
    cubic-bezier(.4, 0, .6, 1)
    both;
}


html.js .umarehoshi-card.is-entering > .umarehoshi-eyebrow,
html.js .umarehoshi-card.is-entering > .umarehoshi-hero__title,
html.js .umarehoshi-card.is-entering > .umarehoshi-progress,
html.js .umarehoshi-card.is-entering > .umarehoshi-intro,
html.js .umarehoshi-card.is-entering > .umarehoshi-form,
html.js .umarehoshi-card.is-entering > .umarehoshi-mini-footer {
  animation:
    umarehoshiContentEnter
    1100ms
    cubic-bezier(.22, 1, .36, 1)
    both;
}


  @keyframes umarehoshiContentLeave {

    from {
      opacity: 1;
      translate: 0 0;
    }

    to {
      opacity: 0;
      translate: 0 -4px;
    }
  }


  @keyframes umarehoshiContentEnter {

    from {
      opacity: 0;
      translate: 0 7px;
    }

    to {
      opacity: 1;
      translate: 0 0;
    }
  }


  /* =================================================================
     INTRO REVEAL
     ================================================================= */

  .umarehoshi-hero[data-step="intro"]
  .umarehoshi-eyebrow {
    animation:
      umarehoshiIntroReveal
      .8s
      cubic-bezier(.22,1,.36,1)
      .10s
      both;
  }


  .umarehoshi-hero[data-step="intro"]
  .umarehoshi-hero__title {
    animation:
      umarehoshiTitleReveal
      1.05s
      cubic-bezier(.16,1,.3,1)
      .20s
      both;
  }


  .umarehoshi-hero[data-step="intro"]
  .umarehoshi-subtitle {
    animation:
      umarehoshiIntroReveal
      .85s
      cubic-bezier(.22,1,.36,1)
      .34s
      both;
  }


  .umarehoshi-hero[data-step="intro"]
  .umarehoshi-lead {
    animation:
      umarehoshiIntroReveal
      .85s
      cubic-bezier(.22,1,.36,1)
      .46s
      both;
  }


  .umarehoshi-hero[data-step="intro"]
  .umarehoshi-button--start {
    animation:
      umarehoshiIntroReveal
      .9s
      cubic-bezier(.22,1,.36,1)
      .60s
      both;
  }


  .umarehoshi-hero[data-step="intro"]
  .umarehoshi-delivery-note {
    animation:
      umarehoshiIntroReveal
      .8s
      cubic-bezier(.22,1,.36,1)
      .72s
      both;
  }


  .umarehoshi-hero[data-step="intro"]
  .umarehoshi-mini-footer {
    animation:
      umarehoshiIntroReveal
      .8s
      cubic-bezier(.22,1,.36,1)
      .80s
      both;
  }


  @keyframes umarehoshiIntroReveal {

    from {
      opacity: 0;
      translate: 0 7px;
    }

    to {
      opacity: 1;
      translate: 0 0;
    }
  }


  @keyframes umarehoshiTitleReveal {

    from {
      opacity: 0;
      translate: 0 10px;
      clip-path: inset(0 0 100% 0);
    }

    to {
      opacity: 1;
      translate: 0 0;
      clip-path: inset(0 0 0 0);
    }
  }
}


/* =====================================================================
   768〜1100
   ===================================================================== */

@media (min-width: 768px) and (max-width: 1100px) {

  .umarehoshi-hero__content {
    right: 24px;

    width: min(390px, 43vw);

    transform:
      translateY(-50%);
  }


  .umarehoshi-hero[data-step="intro"]
  .umarehoshi-card {
    padding:
      30px
      18px;
  }


  .umarehoshi-hero[data-step="intro"]
  .umarehoshi-hero__title {
    font-size:
      clamp(1.5rem, 2.7vw, 2rem);
  }


  .umarehoshi-hero[data-step="intro"]
  .umarehoshi-subtitle {
    font-size: .88rem;
  }


  .umarehoshi-hero[data-step="intro"]
  .umarehoshi-lead {
    margin-bottom: 18px;

    font-size: .82rem;
    line-height: 1.75;
  }
}


/* =====================================================================
   1101〜1279
   ===================================================================== */

@media (min-width: 1101px) and (max-width: 1279px) {

  .umarehoshi-hero__content {
    right: clamp(48px, 5vw, 68px);

    width: clamp(500px, 43vw, 540px);

    transform:
      translateY(-50%);
  }
}


/* =====================================================================
   1280〜1439
   ===================================================================== */

@media (min-width: 1280px) and (max-width: 1439px) {

  .umarehoshi-hero__content {
    right: clamp(70px, 6vw, 100px);

    width: clamp(540px, 40vw, 590px);

    transform:
      translateY(-50%);
  }
}


/* =====================================================================
   1440+
   ===================================================================== */

@media (min-width: 1440px) {

  .umarehoshi-hero__content {
    right: clamp(110px, 8vw, 150px);

    width: clamp(590px, 36vw, 640px);

    transform:
      translateY(-50%);
  }
}


/* =====================================================================
   SP
   STEP中は「生年月日から〜」を繰り返さない
   ===================================================================== */

@media (max-width: 767px) {

  .umarehoshi-hero:not([data-step="intro"])
  .umarehoshi-lead--steps-sp {
    display: none !important;
  }
}


/* =====================================================================
   REDUCED MOTION
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {

  .umarehoshi-hero__image {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }


  .umarehoshi-hero[data-step="intro"] .umarehoshi-eyebrow,
  .umarehoshi-hero[data-step="intro"] .umarehoshi-hero__title,
  .umarehoshi-hero[data-step="intro"] .umarehoshi-subtitle,
  .umarehoshi-hero[data-step="intro"] .umarehoshi-lead,
  .umarehoshi-hero[data-step="intro"] .umarehoshi-button--start,
  .umarehoshi-hero[data-step="intro"] .umarehoshi-delivery-note,
  .umarehoshi-hero[data-step="intro"] .umarehoshi-mini-footer,
  html.js .umarehoshi-card.is-leaving > *,
  html.js .umarehoshi-card.is-entering > * {
    animation: none !important;

    opacity: 1;

    translate: none;
    clip-path: none;
  }
}