/* =========================================================================
   算命学占い LP — テーマ層
   ※ デザイン参考画像の受領後は、原則この :root の変数だけ差し替えれば
     全体トーンを着せ替えできるよう設計しています。
   ========================================================================= */
:root{
  /* --- カラー（和モダン×明色：薄紅×金茶） --- */
  --c-bg:        #fbf9f4;   /* ベース背景（白めの生成り和紙） */
  --c-bg-2:      #f2e6e2;   /* セクション背景／入力面 */
  --c-surface:   #fffcfb;   /* カード面（淡い桜白） */
  --c-line:      #e9dad3;   /* 罫線（極細ヘアライン） */
  --c-hair:      #f0e4df;   /* さらに淡い区切り線 */
  --c-text:      #3a2e20;   /* 本文（濃い焦茶／高コントラスト） */
  --c-text-mute: #8a7657;   /* 補助テキスト */
  --c-gold:      #b4924f;   /* 装飾線（金箔ヘアライン） */
  --c-gold-soft: rgba(180,146,79,.34);
  --c-accent:    #a9762f;   /* 主アクセント（金茶） */
  --c-accent-2:  #9c3a32;   /* 副アクセント（朱） */
  --c-on-accent: #fffaf0;   /* アクセント上の文字 */
  --c-error:     #b5392f;

  /* --- タイポ --- */
  --f-serif: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --f-sans:  "Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif;

  /* --- レイアウト --- */
  --maxw: 680px;
  --radius: 18px;
  --shadow: 0 16px 44px -22px rgba(120,90,40,.38);
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--f-sans);
  color:var(--c-text);
  background-color:var(--c-bg);
  background-image:
    radial-gradient(ellipse 80% 60% at 18% 12%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(ellipse 75% 60% at 86% 88%, rgba(120,92,52,.038), transparent 56%),
    radial-gradient(rgba(120,92,52,.05) .5px, transparent .7px),
    radial-gradient(rgba(120,92,52,.03) .5px, transparent .7px);
  background-size:auto,auto,7px 7px,12px 10px;
  background-position:0 0,0 0,0 0,4px 6px;
  background-attachment:fixed;
  line-height:1.85;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
button{ font:inherit; cursor:pointer; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:22px; }
[hidden]{ display:none !important; }

/* ============ ボタン ============ */
.btn{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  width:100%; padding:19px 24px;
  border:none; border-radius:13px;
  font-family:var(--f-sans); font-weight:800; font-size:1.04rem;
  letter-spacing:.08em; text-decoration:none; text-align:center;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), opacity .2s;
}
.btn small{ font-size:.7rem; font-weight:500; opacity:.78; letter-spacing:.12em; margin-top:2px; }
.btn--primary{
  color:var(--c-on-accent);
  background:var(--c-accent);
  box-shadow:0 12px 26px -14px rgba(169,118,47,.5);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(169,118,47,.6); }
.btn--primary:active{ transform:translateY(0); }
.btn--ghost{
  color:var(--c-text); background:transparent;
  border:1px solid var(--c-line);
}
.btn--ghost:hover{ border-color:var(--c-accent); color:var(--c-accent); }

/* ============ ① ヒーロー ============ */
.hero{ position:relative; padding:clamp(56px,12vw,110px) 0 60px; overflow:hidden; }
.hero__bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%,  rgba(255,255,255,.7), transparent 60%),
    radial-gradient(ellipse 60% 50% at 84% 82%, rgba(150,120,70,.045), transparent 55%),
    var(--c-bg);
}
.hero__bg::after{                     /* 和紙の微粒子（白め・控えめ） */
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(125,100,60,.05) .5px, transparent .7px);
  background-size:7px 7px; opacity:.7;
}
.hero__bg::before{                    /* 天空をイメージした淡い同心円の紋様（控えめ） */
  content:""; position:absolute;
  top:-22vw; left:50%; width:min(140vw,860px); aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:50%;
  background:
    radial-gradient(circle, transparent 58%, rgba(180,146,79,.06) 58.4%, transparent 60%),
    radial-gradient(circle, transparent 72%, rgba(180,146,79,.045) 72.3%, transparent 74%);
  opacity:.8;
}
/* 罫線付き小見出し（ヒーロー／信頼形成で共用） */
.deco-eyebrow{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin-bottom:22px;
}
.deco-eyebrow i{
  width:clamp(20px,7vw,40px); height:1px; background:var(--c-line);
}
.deco-eyebrow span{
  font-family:var(--f-sans); color:var(--c-text-mute); font-weight:500;
  font-size:.75rem; letter-spacing:.22em; white-space:nowrap;
  max-width:calc(100vw - 120px); overflow:hidden; text-overflow:ellipsis;
}

.hero__title{
  font-family:var(--f-sans); font-weight:900;
  font-size:clamp(2rem,7.8vw,3.05rem); line-height:1.42;
  letter-spacing:.005em; text-align:center; margin-bottom:16px;
}
.hero__title .accent{
  position:relative; display:inline-block;
  color:var(--c-accent-2); font-weight:900;
}
.hero__title .accent::after{           /* 洗練された極太アンダーライン */
  content:""; position:absolute; left:-.02em; right:-.02em; bottom:.06em;
  height:.16em; border-radius:2px;
  background:var(--c-accent-2); opacity:.22;
}
.hero__sub{
  text-align:center; color:var(--c-text-mute);
  font-size:.66rem; letter-spacing:.2em; margin-bottom:22px;
  white-space:nowrap; overflow:hidden; text-overflow:clip;
}
.hero__lead{
  text-align:center; color:var(--c-text-mute);
  font-size:1rem; margin:0 auto 30px; max-width:30em;
}

/* ============ 入力フォーム ============ */
.diagnose-form{
  position:relative;
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(30px,6vw,42px) clamp(22px,5vw,36px) clamp(26px,5vw,36px);
}
.form-title{
  text-align:center; font-family:var(--f-sans); font-weight:800;
  color:var(--c-text); font-size:1.04rem; letter-spacing:.14em;
  margin-bottom:28px; padding-bottom:0;
}
.form-title span{
  display:block; margin-top:6px;
  font-family:var(--f-sans); font-weight:500; color:var(--c-text-mute);
  font-size:.58rem; letter-spacing:.3em; text-transform:uppercase;
}
.field{ margin-bottom:22px; }
.field > label{
  display:block; font-weight:700; font-size:.95rem; margin-bottom:10px;
}
.field .req{
  font-size:.7rem; font-weight:700; color:var(--c-on-accent);
  background:var(--c-accent-2); color:#fff;
  padding:2px 8px; border-radius:6px; margin-left:8px; letter-spacing:.06em;
}
.field .opt{ font-size:.78rem; font-weight:500; color:var(--c-text-mute); margin-left:6px; }

input[type=text]{
  width:100%; padding:14px 16px;
  background:var(--c-bg-2); color:var(--c-text);
  border:1px solid var(--c-line); border-radius:12px;
  font-size:1rem;
}
input[type=text]:focus{ outline:2px solid var(--c-accent); outline-offset:1px; }

.dob{ display:flex; gap:10px; }
.select-wrap{ position:relative; flex:1; display:flex; align-items:center; }
.select-wrap select{
  appearance:none; -webkit-appearance:none;
  width:100%; padding:14px 30px 14px 14px;
  background:var(--c-bg-2); color:var(--c-text);
  border:1px solid var(--c-line); border-radius:12px;
  font-size:1rem;
}
.select-wrap select:focus{ outline:2px solid var(--c-accent); outline-offset:1px; }
.select-wrap i{
  position:absolute; right:12px; font-style:normal;
  color:var(--c-text-mute); font-size:.85rem; pointer-events:none;
}

.seg{ display:flex; gap:8px; }
.seg__item{ flex:1; position:relative; }
.seg__item input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.seg__item span{
  display:block; text-align:center; padding:12px 6px;
  background:var(--c-bg-2); border:1px solid var(--c-line);
  border-radius:12px; font-size:.9rem; transition:.2s;
}
.seg__item input:checked + span{
  border-color:var(--c-accent); color:var(--c-accent);
  background:rgba(169,118,47,.12);
}
.seg__item input:focus-visible + span{ outline:2px solid var(--c-accent); }

.form-error{ color:var(--c-error); font-size:.88rem; margin-bottom:14px; text-align:center; }
.diagnose-form .btn{ margin-top:4px; }
.form-note{
  text-align:center; color:var(--c-text-mute);
  font-size:.76rem; margin-top:14px;
}

/* ============ 信頼形成 ============ */
.trust{ margin-top:40px; }
.trust__eyebrow{ margin-bottom:18px; }
.trust__eyebrow span{ font-size:.78rem; color:var(--c-text-mute); }
.trust__eyebrow i{ background:linear-gradient(90deg,transparent,var(--c-line)); }
.trust__list{
  list-style:none; display:flex; justify-content:center; gap:10px;
}
.trust__list li{
  position:relative; flex:1; max-width:170px; text-align:center;
  padding:18px 8px; border:1px solid var(--c-line); border-radius:14px;
  background:var(--c-surface); box-shadow:0 10px 26px -22px rgba(120,90,40,.4);
}
.trust__list strong{
  display:block; font-size:.72rem; color:var(--c-text-mute); font-weight:500;
  letter-spacing:.08em;
}
.trust__list span{
  display:block; font-family:var(--f-serif); color:var(--c-accent);
  font-size:1.12rem; margin-top:7px;
}

/* ============ ② ローディング ============ */
.screen{ min-height:100svh; display:flex; align-items:center; }
.loading__inner{ text-align:center; }
.loading__ring{
  width:74px; height:74px; margin:0 auto 26px;
  border-radius:50%;
  border:3px solid var(--c-line);
  border-top-color:var(--c-accent);
  animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.loading__text{ font-family:var(--f-serif); color:var(--c-text-mute); letter-spacing:.1em; }

/* ============ ③ 結果 ============ */
.result{ padding:clamp(46px,10vw,86px) 0; align-items:flex-start; }

/* --- 命式カード --- */
.rcard{
  position:relative; text-align:center; overflow:hidden;
  background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:clamp(38px,8vw,60px) clamp(22px,5vw,46px) clamp(32px,6vw,44px);
  margin-bottom:30px;
}
.rcard__corner{                       /* 四隅のL字（極細・控えめ） */
  position:absolute; width:14px; height:14px; pointer-events:none;
  border:0 solid var(--c-line);
}
.rcard__corner--tl{ top:14px; left:14px;  border-top-width:1px; border-left-width:1px;  }
.rcard__corner--tr{ top:14px; right:14px; border-top-width:1px; border-right-width:1px; }
.rcard__corner--bl{ bottom:14px; left:14px;  border-bottom-width:1px; border-left-width:1px;  }
.rcard__corner--br{ bottom:14px; right:14px; border-bottom-width:1px; border-right-width:1px; }

.rhead__eyebrow{ color:var(--c-text-mute); letter-spacing:.2em; font-size:.8rem; margin-bottom:14px; }
.rhead__group{
  font-family:var(--f-serif); color:var(--c-accent-2); font-weight:700;
  letter-spacing:.34em; font-size:.76rem; margin-bottom:8px;
}
.result__type{
  font-family:var(--f-serif); font-weight:800; line-height:1.4;
  font-size:clamp(1.7rem,6.4vw,2.5rem); color:var(--c-text); margin-bottom:12px;
}
.rhead__ganshi{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
.rhead__kanshi{
  font-family:var(--f-serif); font-size:1.02rem; color:var(--c-accent);
  border:1px solid var(--c-line); border-radius:999px;
  padding:3px 16px; letter-spacing:.18em;
}
.rhead__no{ color:var(--c-text-mute); font-size:.74rem; letter-spacing:.06em; }
.rhead__no i{ font-style:normal; color:var(--c-accent); font-weight:700; }

.flourish{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:26px auto 4px; max-width:180px;
}
.flourish span{ flex:1; height:1px; background:var(--c-line); }
.flourish b{
  width:5px; height:5px; transform:rotate(45deg);
  border:1px solid var(--c-accent); font-size:0;
}

.result__char{ margin:14px auto 2px; max-width:280px; }
.result__char img{
  border-radius:18px; margin-inline:auto;
  background:var(--c-bg-2); border:1px solid var(--c-line);
}
.result__catch{
  font-family:var(--f-serif); font-weight:700;
  font-size:clamp(1.08rem,4.4vw,1.36rem); line-height:1.8;
  color:var(--c-text); margin:22px auto 0; max-width:22em;
}

.tagchips{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center;
  gap:8px; margin-top:22px;
}
.tagchips__item{
  font-size:.8rem; color:var(--c-accent);
  background:rgba(169,118,47,.08);
  border:1px solid var(--c-line); border-radius:999px;
  padding:5px 13px; letter-spacing:.02em;
}

/* --- セクションカード --- */
.result__body{ display:grid; gap:16px; align-items:start; }
.card{
  background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:var(--radius); padding:24px clamp(20px,5vw,28px);
}
.card__head{
  display:flex; align-items:center; gap:14px;
  padding-bottom:14px; margin-bottom:16px;
  border-bottom:1px solid var(--c-line);
}
.card__no{
  flex:none; width:38px; height:38px; display:grid; place-items:center;
  font-family:var(--f-serif); font-size:1.06rem; color:var(--c-accent);
  border:1px solid var(--c-accent); border-radius:50%;
}
.card__head h3{ font-family:var(--f-serif); color:var(--c-text); font-size:1.12rem; line-height:1.3; }
.card__en{
  color:var(--c-text-mute); font-size:.64rem;
  letter-spacing:.22em; text-transform:uppercase; margin-top:3px;
}
.card p{ color:var(--c-text); font-size:.97rem; white-space:pre-line; }

.result__actions{ display:grid; gap:12px; margin-top:34px; }
.result__disclaimer{
  text-align:center; color:var(--c-text-mute);
  font-size:.76rem; margin-top:26px;
}

/* ============ ③ 結果：簡易版 分析レポート ============ */
/* キャラ別カラーは app.js が #report に --rc-* を注入。未設定時は金茶。 */
.result{ padding:clamp(40px,9vw,80px) 0; align-items:flex-start; }

.report{
  --rc-accent: var(--c-accent);
  --rc-soft:   #f5ecdd;
  --rc-line:   #e9dad3;
  position:relative;
  /* 和紙：地色 + 雲斑（むら・強め）+ 微粒子（濃いめ／繊維スジなしでフラット） */
  background-color:var(--rc-soft);
  background-image:
    radial-gradient(ellipse 60% 50% at 15% 18%, rgba(255,255,255,.62), transparent 60%),
    radial-gradient(ellipse 55% 48% at 86% 24%, rgba(120,92,52,.085), transparent 56%),
    radial-gradient(ellipse 70% 55% at 78% 82%, rgba(255,255,255,.5),  transparent 60%),
    radial-gradient(ellipse 52% 58% at 28% 92%, rgba(120,92,52,.075), transparent 56%),
    radial-gradient(rgba(120,92,52,.11) .5px, transparent .7px),
    radial-gradient(rgba(120,92,52,.07) .5px, transparent .7px);
  background-size:auto,auto,auto,auto,6px 6px,11px 9px;
  background-position:0 0,0 0,0 0,0 0,0 0,3px 5px;
  border:1px solid var(--rc-line);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:clamp(22px,5vw,36px) clamp(15px,4vw,28px) clamp(26px,5vw,34px);
  transition:background-color .5s var(--ease);
}

.report__head{ text-align:center; padding:4px 4px 2px; }
.report__kicker{
  font-family:var(--f-sans); font-weight:700;
  letter-spacing:.22em; font-size:.74rem; color:var(--rc-accent);
}
.report__group{
  display:inline-block; margin-top:14px;
  background:var(--rc-accent); color:#fff;
  font-family:var(--f-serif); font-weight:700;
  letter-spacing:.16em; font-size:.74rem;
  padding:5px 18px; border-radius:999px;
}
.report__type{
  display:flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--f-serif); font-weight:800; line-height:1.4;
  font-size:clamp(1.5rem,6.2vw,2.3rem); color:var(--c-text);
  margin:16px 0 10px;
}
.report__type .spark{ color:var(--rc-accent); font-size:.62em; }
.report__ganshi{
  display:flex; align-items:center; justify-content:center;
  gap:10px; flex-wrap:wrap; color:var(--c-text-mute); font-size:.78rem;
}
.report__ganshi span{
  font-family:var(--f-serif); color:var(--rc-accent);
  background:#fff; border:1px solid var(--rc-line);
  border-radius:999px; padding:2px 15px; letter-spacing:.16em;
}
.report__ganshi i{ font-style:normal; }
.report__ganshi b{ color:var(--rc-accent); font-weight:700; }

.report__char{ width:min(66vw,260px); margin:14px auto 0; }
.report__char img{
  width:100%; height:auto;
  background:transparent; border:none; border-radius:0;
  filter:drop-shadow(0 8px 16px rgba(90,62,24,.20));
}
.report__catch{
  font-family:var(--f-serif); font-weight:700;
  font-size:clamp(1.04rem,4.4vw,1.3rem); line-height:1.78;
  color:var(--c-text); margin:18px auto 0; max-width:22em;
}

.rsec{
  background:#fffdfb; border:1px solid var(--rc-line);
  border-radius:18px; margin-top:16px;
  padding:22px clamp(18px,4.5vw,26px);
}
.rsec:first-of-type{ margin-top:24px; }
.rsec__head{
  display:flex; align-items:center; gap:13px;
  padding-bottom:13px; margin-bottom:15px;
  border-bottom:1px dashed var(--rc-line);
}
.rsec__no{
  flex:none; width:34px; height:34px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--rc-accent); color:#fff;
  font-family:var(--f-serif); font-size:1rem;
}
.rsec__head h3{ font-family:var(--f-serif); color:var(--c-text); font-size:1.1rem; line-height:1.3; }
.rsec__en{
  color:var(--rc-accent); font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase; margin-top:3px;
}
.rsec p{ color:var(--c-text); font-size:.96rem; white-space:pre-line; }

.rsec--tags .tagchips{ margin:0; }
.report .tagchips__item{
  color:var(--rc-accent);
  background:#fff;
  border:1px solid var(--rc-line);
}

/* ---- 金箔ヘアライン装飾（角飾り＋二重枠） ---- */
.report, .supervisor{ position:relative; }
.report::before, .supervisor::before{
  content:""; position:absolute; inset:9px;
  border:1px solid var(--c-gold-soft); border-radius:16px;
  pointer-events:none;
}
.orn{
  position:absolute; width:30px; height:30px;
  color:var(--c-gold); pointer-events:none; z-index:1;
}
.orn::before{                       /* 角のL字（細線） */
  content:""; position:absolute; inset:0;
  border:0 solid currentColor;
}
.orn::after{                        /* 角の小ひし形 */
  content:""; position:absolute; width:5px; height:5px;
  background:currentColor; transform:rotate(45deg);
}
.orn--tl{ top:5px; left:5px; }
.orn--tl::before{ border-top-width:1px; border-left-width:1px; border-top-left-radius:13px; }
.orn--tl::after{ top:9px; left:9px; }
.orn--tr{ top:5px; right:5px; }
.orn--tr::before{ border-top-width:1px; border-right-width:1px; border-top-right-radius:13px; }
.orn--tr::after{ top:9px; right:9px; }
.orn--bl{ bottom:5px; left:5px; }
.orn--bl::before{ border-bottom-width:1px; border-left-width:1px; border-bottom-left-radius:13px; }
.orn--bl::after{ bottom:9px; left:9px; }
.orn--br{ bottom:5px; right:5px; }
.orn--br::before{ border-bottom-width:1px; border-right-width:1px; border-bottom-right-radius:13px; }
.orn--br::after{ bottom:9px; right:9px; }

/* タイプ名下のひし形フローリッシュ */
.report .flourish{ margin:14px auto 16px; max-width:170px; }
.report .flourish span{ background:var(--c-gold-soft); }
.report .flourish b{
  width:7px; height:7px; transform:rotate(45deg);
  background:var(--rc-accent); border:none;
}

/* ---- TOP：監修者カード ---- */
.supervisor{
  --rc-accent: var(--c-accent);
  --rc-line:   var(--c-gold-soft);
  margin-top:46px;
  background-color:#fbf4ea;
  background-image:
    radial-gradient(ellipse 62% 52% at 16% 18%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(ellipse 56% 50% at 86% 80%, rgba(120,92,52,.06), transparent 56%),
    radial-gradient(rgba(120,92,52,.08) .5px, transparent .7px);
  background-size:auto,auto,7px 7px;
  border:1px solid var(--c-gold-soft);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:clamp(26px,5vw,38px) clamp(18px,4vw,30px) clamp(28px,5vw,36px);
}
.supervisor .deco-eyebrow{ margin-bottom:24px; }
.supervisor .deco-eyebrow i{ background:var(--c-gold-soft); }
.supervisor .deco-eyebrow span{ color:var(--c-accent); letter-spacing:.28em; }

/* 監修者プロフィール */
.profile__body{ display:flex; flex-wrap:wrap; gap:18px 22px; align-items:flex-start; }
.profile__photo{
  flex:none; width:clamp(128px,38%,176px); margin-inline:auto;
}
.profile__photo img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  border-radius:16px; border:1px solid var(--rc-line);
  background:#fff;
}
.profile__text{ flex:1; min-width:min(100%,230px); }
.profile__name{
  font-family:var(--f-serif); font-weight:800;
  font-size:clamp(1.3rem,5vw,1.62rem); color:var(--c-text); line-height:1.3;
}
.profile__name span{ font-size:.62em; margin-left:.3em; color:var(--c-text-mute); }
.profile__role{
  display:inline-block; margin:10px 0 14px;
  background:var(--rc-accent); color:#fff;
  font-size:.74rem; font-weight:700; letter-spacing:.06em;
  padding:4px 14px; border-radius:999px;
}
.profile__text p:not(.profile__name):not(.profile__role){
  color:var(--c-text); font-size:.92rem; line-height:1.85; margin-top:10px;
}
.profile__text b{ color:var(--rc-accent); font-weight:700; }

.report .result__disclaimer{ margin-top:22px; }

/* ---- ロック（ブラー）＋ LINE 解放ゲート ---- */
.locked{ position:relative; margin-top:16px; }
.locked__inner{
  filter:blur(8px);
  pointer-events:none; user-select:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 22%,rgba(0,0,0,.25) 60%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 22%,rgba(0,0,0,.25) 60%,transparent 100%);
}
.locked__gate{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:13px;
  padding:clamp(26px,6vw,46px) clamp(18px,5vw,34px);
  border-radius:18px;
  background:linear-gradient(180deg,
    rgba(255,253,251,.30) 0%,
    rgba(255,253,251,.74) 26%,
    rgba(255,253,251,.90) 60%);
}
.locked__seal{
  width:42px; height:42px; display:grid; place-items:center;
  color:var(--c-gold); font-size:1.05rem;
  border:1px solid var(--c-gold-soft); border-radius:50%;
  margin-bottom:2px;
}
.locked__lead{
  font-family:var(--f-serif); font-weight:800;
  font-size:clamp(1.32rem,5.4vw,1.74rem); color:var(--c-text); line-height:1.4;
}
.locked__lead b{ color:var(--rc-accent,var(--c-accent)); }
.locked__desc{
  color:var(--c-text); font-size:.92rem; line-height:1.8;
  max-width:24em; margin:0 auto;
}
.locked__desc b{ font-weight:700; }
.btn--line{
  max-width:380px; margin-top:6px;
  color:#fff; background:#06C755;
  box-shadow:0 14px 26px -12px rgba(6,199,85,.55);
}
.btn--line small{ color:#eafff3; opacity:.95; }
.btn--line:hover{ transform:translateY(-2px); box-shadow:0 18px 32px -12px rgba(6,199,85,.62); }
.btn--line:active{ transform:translateY(0); }
.locked__note{ color:var(--c-text-mute); font-size:.74rem; margin-top:2px; }

/* ============ 下層ページ（運営者情報 / プライバシーポリシー） ============ */
.subhead{
  border-bottom:1px solid var(--c-gold-soft);
  background:var(--c-bg);
}
.subhead__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:18px 0;
}
.subhead__brand{
  font-family:var(--f-serif); color:var(--c-accent);
  font-size:1.04rem; letter-spacing:.04em; text-decoration:none;
}
.subhead__back{
  color:var(--c-text-mute); font-size:.84rem; text-decoration:none;
  border:1px solid var(--c-line); border-radius:999px; padding:7px 16px;
  transition:.2s;
}
.subhead__back:hover{ color:var(--c-accent); border-color:var(--c-accent); }

.subpage{ padding:clamp(40px,9vw,76px) 0; }
.subpage__card{
  position:relative;
  background-color:#fbf6ec;
  background-image:
    radial-gradient(ellipse 60% 50% at 16% 16%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(ellipse 56% 50% at 86% 84%, rgba(120,92,52,.05), transparent 56%),
    radial-gradient(rgba(120,92,52,.055) .5px, transparent .7px);
  background-size:auto,auto,7px 7px;
  border:1px solid var(--c-gold-soft);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:clamp(28px,6vw,52px) clamp(20px,5vw,46px);
}
.subpage__kicker{
  text-align:center; color:var(--c-accent);
  font-size:.72rem; letter-spacing:.26em; font-weight:700;
}
.subpage__title{
  text-align:center; font-family:var(--f-serif); font-weight:800;
  font-size:clamp(1.5rem,6vw,2.1rem); color:var(--c-text);
  margin:12px 0 6px;
}
.subpage .flourish{ margin:14px auto 30px; max-width:160px; }
.subpage .flourish span{ background:var(--c-gold-soft); }
.subpage .flourish b{ width:7px; height:7px; transform:rotate(45deg); background:var(--c-accent); border:none; }

.subpage h2{
  font-family:var(--f-serif); font-size:1.16rem; color:var(--c-text);
  margin:34px 0 12px; padding-left:14px;
  border-left:3px solid var(--c-accent);
}
.subpage h2:first-of-type{ margin-top:8px; }
.subpage p, .subpage li{ color:var(--c-text); font-size:.95rem; line-height:1.95; }
.subpage p + p{ margin-top:12px; }
.subpage ul, .subpage ol{ margin:10px 0 10px 1.3em; }
.subpage li{ margin:6px 0; }
.subpage a{ color:var(--c-accent); }

.subpage dl{
  display:grid; grid-template-columns:max-content 1fr; gap:0;
  border:1px solid var(--c-line); border-radius:14px; overflow:hidden;
  margin-top:8px; background:#fffdfb;
}
.subpage dt, .subpage dd{
  padding:14px 16px; border-bottom:1px solid var(--c-hair); font-size:.93rem;
}
.subpage dt{
  background:rgba(180,146,79,.07); font-weight:700; color:var(--c-text);
  white-space:nowrap;
}
.subpage dd{ color:var(--c-text); }
.subpage dl > :nth-last-child(1), .subpage dl > :nth-last-child(2){ border-bottom:none; }
.subpage__note{
  margin-top:30px; color:var(--c-text-mute);
  font-size:.82rem; text-align:right;
}
@media (max-width:560px){
  .subpage dl{ grid-template-columns:1fr; }
  .subpage dt{ border-bottom:none; }
}

/* ============ トップナビ（タブ） ============ */
.topnav{
  position:sticky; top:0; z-index:50;
  background:rgba(251,249,244,.86);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--c-gold-soft);
}
.topnav__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:13px 0;
}
.topnav__brand{
  font-family:var(--f-serif); color:var(--c-accent);
  font-size:1.02rem; letter-spacing:.05em; text-decoration:none; white-space:nowrap;
}
.topnav__links{ display:flex; gap:8px; }
.topnav__links a{
  color:var(--c-text-mute); font-size:.86rem; font-weight:700;
  text-decoration:none; padding:8px 15px; border-radius:999px;
  border:1px solid transparent; transition:.2s; white-space:nowrap;
}
.topnav__links a:hover{ color:var(--c-accent); }
.topnav__links a.is-active{
  color:var(--c-accent);
  border-color:var(--c-gold-soft); background:rgba(180,146,79,.08);
}

/* ============ 星が流れる背景（canvas） ============ */
.stars{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero > .container{ position:relative; z-index:1; }

/* ============ ヒーロー：特長チップ ============ */
.hero__chips{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center;
  gap:8px; margin:0 auto 4px; max-width:30em;
}
.hero__chips li{
  font-size:.76rem; font-weight:700; color:var(--c-accent);
  background:rgba(180,146,79,.08);
  border:1px solid var(--c-gold-soft); border-radius:999px;
  padding:5px 14px;
}

/* ============ 結果サンプル（やりたい欲UP） ============ */
.samples{ margin:6px 0 4px; text-align:center; }
.samples__eyebrow{
  color:var(--c-accent); font-weight:700;
  font-size:.82rem; letter-spacing:.16em; margin-bottom:6px;
}
.samples__lead{
  color:var(--c-text-mute); font-size:.9rem; margin:0 0 14px;
}
.samples__lead b{ color:var(--c-accent); font-weight:800; font-size:1.15em; }
.samples__track{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 2px 14px; margin:0 -22px; padding-inline:22px;
  -webkit-overflow-scrolling:touch;
}
.samples__track::-webkit-scrollbar{ height:6px; }
.samples__track::-webkit-scrollbar-thumb{ background:var(--c-gold-soft); border-radius:99px; }
.samples__track img{
  flex:0 0 auto; width:min(82vw,440px); height:auto;
  border-radius:16px; border:1px solid var(--c-gold-soft);
  box-shadow:var(--shadow); scroll-snap-align:center;
}
.samples__more{
  display:inline-block; margin-top:8px;
  color:var(--c-accent); font-weight:700; font-size:.92rem;
  text-decoration:none; border-bottom:1px solid var(--c-gold-soft);
  padding-bottom:3px;
}

/* ============ 宿命タイプ一覧（types.html） ============ */
.typehero{
  text-align:center; padding:clamp(40px,9vw,80px) 0 clamp(30px,6vw,52px);
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255,255,255,.6), transparent 60%),
    var(--c-bg);
  border-bottom:1px solid var(--c-gold-soft);
}
.typehero__title{
  font-family:var(--f-serif); font-weight:800;
  font-size:clamp(2.1rem,9vw,3.4rem); color:var(--c-text);
  letter-spacing:.04em; margin:10px 0 14px;
}
.typehero__lead{ color:var(--c-text-mute); font-size:1rem; margin-bottom:26px; }
.typehero__cta{ max-width:340px; margin:0 auto; }

.typelist{ padding:0; }
.tg{ position:relative; overflow:hidden; padding:clamp(40px,7vw,68px) 0; }
.tg:nth-child(even){ background:rgba(180,146,79,.035); }
.tg__bg{
  position:absolute; left:50%; top:42%; transform:translate(-50%,-50%);
  font-family:var(--f-serif); font-weight:800; white-space:nowrap;
  font-size:clamp(5rem,22vw,13rem); line-height:1;
  color:var(--g); opacity:.07; pointer-events:none; user-select:none;
}
.tg__head{ position:relative; text-align:center; margin-bottom:30px; }
.tg__name{
  font-family:var(--f-serif); font-weight:800;
  font-size:clamp(1.5rem,5.5vw,2.1rem); color:var(--g);
}
.tg__sub{ color:var(--c-text-mute); font-size:.82rem; letter-spacing:.1em; margin-top:6px; }
.tg__grid{
  position:relative;
  display:grid; gap:14px;
  grid-template-columns:repeat(2,1fr);
}
.tcard{
  background:#fffdfb; border:1px solid var(--c-line);
  border-radius:18px; padding:20px 16px 18px; text-align:center;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.tcard__pic{
  width:clamp(96px,30vw,148px); aspect-ratio:1; margin:0 auto 12px;
  display:grid; place-items:center; border-radius:50%;
  background:
    radial-gradient(circle at 50% 45%,
      color-mix(in srgb, var(--g) 16%, #fff), #fff 72%);
}
.tcard__pic img{ width:86%; height:86%; object-fit:contain;
  filter:drop-shadow(0 5px 9px rgba(90,62,24,.18)); }
.tcard__name{
  font-family:var(--f-serif); font-weight:800;
  font-size:clamp(.98rem,3.4vw,1.16rem); color:var(--c-text); line-height:1.4;
  line-break:strict; word-break:normal; overflow-wrap:normal;
  text-wrap:balance;
}
.tcard__ganshi{
  display:inline-block; margin:8px 0 8px;
  font-size:.7rem; letter-spacing:.06em; color:#fff;
  background:var(--g); border-radius:999px; padding:3px 11px;
}
.tcard__catch{
  color:var(--c-text-mute); font-size:.84rem; line-height:1.65;
  line-break:strict; word-break:normal; text-wrap:pretty;
}

/* 日本語の禁則：見出しで「ー」や小書き文字が行頭に来る崩れを防ぐ */
.hero__title, .report__type, .tg__name, .typehero__title,
.locked__lead, .samples__lead, .profile__name, .rsec__head h3,
.report__group, .typecta__copy, .form-title{
  line-break:strict; word-break:normal; overflow-wrap:normal;
}
.hero__title, .report__type, .typehero__title, .locked__lead{
  text-wrap:balance;
}

.typecta{
  text-align:center; padding:clamp(44px,8vw,72px) 0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 100%, rgba(180,146,79,.08), transparent 60%),
    var(--c-bg);
  border-top:1px solid var(--c-gold-soft);
}
.typecta__copy{
  font-family:var(--f-serif); font-weight:700;
  font-size:clamp(1.2rem,5vw,1.7rem); color:var(--c-text); margin-bottom:20px;
}
.typecta .btn{ max-width:340px; margin:0 auto; }

/* ============ 天命の扉：ローディング演出 ============ */
.gate{
  position:fixed; inset:0; z-index:100;
  display:block; min-height:0; overflow:hidden;
  background:
    radial-gradient(circle at 50% 45%, #fff7e6, #f3e7cf 70%);
}
.gate__panel{
  position:absolute; top:0; height:100%; width:50.6%;
  background-color:#fbf3e4;
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 30%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(rgba(120,92,52,.07) .5px, transparent .7px);
  background-size:auto,7px 7px;
  transition:transform .9s cubic-bezier(.7,0,.2,1);
  will-change:transform;
}
.gate__panel--l{ left:0;  border-right:1px solid var(--c-gold); }
.gate__panel--r{ right:0; border-left:1px solid var(--c-gold); }
.gate__orn{
  position:absolute; width:34px; height:34px; color:var(--c-gold);
}
.gate__orn::before{ content:""; position:absolute; inset:0; border:0 solid currentColor; }
.gate__orn--tl{ top:20px; left:20px; }
.gate__orn--tl::before{ border-top-width:1px; border-left-width:1px; }
.gate__orn--bl{ bottom:20px; left:20px; }
.gate__orn--bl::before{ border-bottom-width:1px; border-left-width:1px; }
.gate__orn--tr{ top:20px; right:20px; }
.gate__orn--tr::before{ border-top-width:1px; border-right-width:1px; }
.gate__orn--br{ bottom:20px; right:20px; }
.gate__orn--br::before{ border-bottom-width:1px; border-right-width:1px; }
.gate__seam{
  position:absolute; left:50%; top:0; width:2px; height:100%;
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,var(--c-gold),transparent);
  opacity:.8; transition:opacity .4s;
}
.gate__core{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:20px; text-align:center; padding:24px;
  transition:opacity .45s ease, transform .45s ease;
}
.gate__ring{
  width:84px; height:84px; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--c-gold-soft);
  box-shadow:0 0 0 6px rgba(180,146,79,.06), inset 0 0 22px rgba(180,146,79,.14);
  animation:gateSpin 7s linear infinite;
}
.gate__ring b{ color:var(--c-gold); font-size:1.5rem; animation:gatePulse 1.6s ease-in-out infinite; }
@keyframes gateSpin{ to{ transform:rotate(360deg); } }
@keyframes gatePulse{ 0%,100%{ opacity:.55; transform:scale(.9);} 50%{ opacity:1; transform:scale(1.12);} }
.gate__text{
  font-family:var(--f-serif); color:var(--c-text);
  font-size:clamp(1.02rem,4vw,1.22rem); letter-spacing:.12em;
}
.gate__bar{
  width:min(62vw,260px); height:3px; border-radius:99px;
  background:rgba(120,92,52,.16); overflow:hidden;
}
.gate__bar i{ display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--c-accent),var(--c-gold)); }
.gate__flash{
  position:absolute; inset:0; z-index:1; opacity:0; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, #fff7e6, transparent 60%);
}
.gate.is-open .gate__panel--l{ transform:translateX(-100%); }
.gate.is-open .gate__panel--r{ transform:translateX(100%); }
.gate.is-open .gate__core{ opacity:0; transform:scale(.92); }
.gate.is-open .gate__seam{ opacity:0; }
.gate.is-open .gate__flash{ animation:gateFlash .9s ease-out; }
@keyframes gateFlash{ 0%{opacity:0;} 30%{opacity:.85;} 100%{opacity:0;} }

/* ============ フッター ============ */
.site-footer{
  background:var(--c-bg-2); border-top:1px solid var(--c-line);
  padding:40px 0; text-align:center;
}
.site-footer__brand{ font-family:var(--f-serif); color:var(--c-accent); font-size:1.1rem; margin-bottom:14px; }
.site-footer__nav{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px 22px; margin-bottom:16px; }
.site-footer__nav a{ color:var(--c-text-mute); font-size:.84rem; text-decoration:none; }
.site-footer__nav a:hover{ color:var(--c-accent); }
.site-footer__copy{ color:var(--c-text-mute); font-size:.76rem; }

/* ============ アニメーション ============ */
.fade-in{ animation:fadeIn .6s var(--ease) both; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  /* 天命の扉だけは演出として残す（ユーザー操作起点・短時間） */
  .gate__panel{ transition:transform .9s cubic-bezier(.7,0,.2,1) !important; }
  .gate__core{ transition:opacity .45s ease, transform .45s ease !important; }
  .gate__seam{ transition:opacity .4s !important; }
  .gate.is-open .gate__flash{ animation:gateFlash .9s ease-out !important; }
}

/* ============ レスポンシブ（PC） ============ */
@media (min-width:760px){
  :root{ --maxw:760px; }
  /* 結果本文は文章量の差が大きいため1カラムで読み物として表示 */
  .result__actions{ grid-template-columns:1fr 1fr; }
  .tg__grid{ grid-template-columns:repeat(3,1fr); gap:18px; max-width:880px; margin-inline:auto; }
  .samples__track img{ width:460px; }
}

/* ============ スマホ最適化 ============ */
@media (max-width:560px){
  /* 固定背景はモバイルで重いのでスクロール追従に */
  body{ background-attachment:scroll; }
  .container{ padding-inline:16px; }

  .topnav__inner{ padding:11px 0; }
  .topnav__brand{ font-size:.96rem; }
  .topnav__links a{ font-size:.8rem; padding:7px 12px; }

  .hero{ padding-top:clamp(36px,14vw,56px); }
  .hero__title{ font-size:clamp(1.72rem,7.6vw,2.3rem); line-height:1.42; letter-spacing:0; }
  .hero__sub{ font-size:.56rem; letter-spacing:.12em; margin-bottom:18px; }
  .hero__lead{ font-size:.92rem; margin-bottom:20px; }
  .hero__chips{ gap:6px; }
  .hero__chips li{ font-size:.7rem; padding:5px 10px; }
  .deco-eyebrow{ gap:10px; }
  .deco-eyebrow i{ width:clamp(14px,5vw,28px); }
  .deco-eyebrow span{ font-size:.66rem; letter-spacing:.14em; max-width:calc(100vw - 80px); }
  .samples__lead{ font-size:.84rem; }
  .samples__eyebrow{ font-size:.76rem; }

  /* 生年月日セレクトを詰めて3つ並びを破綻させない */
  .dob{ gap:7px; }
  .select-wrap select{ padding:13px 24px 13px 10px; font-size:16px; }
  .select-wrap i{ right:8px; font-size:.78rem; }

  .samples__track{ margin-inline:-16px; padding-inline:16px; }
  .samples__track img{ width:84vw; }

  /* 結果レポート：余白を締めて読みやすく */
  .report{ padding:20px 14px 26px; }
  .rsec{ padding:18px 16px; }
  .report__type{ font-size:clamp(1.4rem,7vw,1.9rem); }

  .profile__photo{ width:clamp(140px,52%,190px); }

  /* タイプ一覧：詰めつつ2カラム維持 */
  .tg{ padding:38px 0; }
  .tg__grid{ gap:11px; }
  .tcard{ padding:16px 10px 15px; }
  .tcard__catch{ font-size:.8rem; }

  /* タップ領域を確保 */
  .site-footer__nav{ gap:6px 14px; }
  .site-footer__nav a{ padding:8px 10px; display:inline-block; }

  .gate__ring{ width:72px; height:72px; }
}

@media (max-width:360px){
  .topnav__links a{ padding:6px 9px; font-size:.76rem; }
  .hero__chips li:nth-child(4){ display:none; }
  .tcard__name{ font-size:.92rem; }
}