/* =========================================================
   Mother.N タロット：四柱推命と同じ作り・テーマ色だけピンク
   ボタン・枠・下線・ひし形＝ピンク #ed9a92（TOPのタロットボタンと同じ）
   カードの地はピンクにせず白、小さな囲みはクリーム色
   ページ背景はサイト共通（#fdf8e9 ＋ 黄色に星の画像）
   ========================================================= */
:root{--paper:#fdf8e9;--theme:#fbf4e8;--accent:#ed9a92;--accent-hover:#e5857b;--ink:#4a3a38;--muted:#6f5c59;--deep:#9a4a42;--line:#f2cdc8;--soft:#f4e7dd;--panel:#fffdf9;--btn-ink:#fff;--star:#e07d72}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:"Kosugi Maru","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;font-size:18px;line-height:1.95;letter-spacing:.04em}
a{color:var(--deep);text-underline-offset:4px}
a:focus-visible,button:focus-visible,[role=button]:focus-visible,summary:focus-visible{outline:3px solid var(--deep);outline-offset:4px}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.6}
h1,h2{font-family:"Zen Antique Soft","Hiragino Mincho ProN","Yu Mincho",serif;font-weight:400}
h2{font-size:27px;letter-spacing:.06em}
h3{font-size:21px;font-weight:700}
p+p{margin-top:13px}
/* 見出しの改行：.phrase で囲んだまとまりの途中では折り返さない（スマホで文節ごとに改行） */
.phrase{display:inline-block}
h1,h2{word-break:auto-phrase}
section{scroll-margin-top:22px}
img{max-width:100%}
button,input,select{font-family:inherit}
.page{max-width:1100px;margin:auto;padding:24px 28px 36px}

/* タイトル：左右に犬（右は左右反転して向かい合わせ） */
.hero{display:grid;grid-template-columns:auto minmax(0,auto) auto;grid-template-areas:"left title right" "left lead right";justify-content:center;align-items:center;column-gap:34px;row-gap:6px;padding:26px 0 30px;text-align:center}
.hero-left{grid-area:left}
.hero-right{grid-area:right}
.hero-title{grid-area:title;align-self:end;min-width:0}
.hero h1{font-size:40px;letter-spacing:.12em}
.hero h1 .title-tail{display:inline}
.hero.is-long h1 .title-tail{display:block}
.hero .lead{grid-area:lead;align-self:start;margin-top:4px;font-size:17px}
.hero-art{display:block;width:190px;max-width:none;height:auto;flex-shrink:0}
.hero-art.is-mirrored{transform:scaleX(-1)}

/* パンくず：タイトルの下・最初のカードの上 */
.crumb{margin:0 0 17px;font-size:14px;color:var(--muted)}
.crumb ol{display:flex;flex-wrap:wrap;gap:4px 0;list-style:none;margin:0;padding:0}
.crumb li{display:flex;align-items:center}
.crumb li+li::before{content:"›";margin:0 10px;color:var(--accent)}
.crumb a{color:var(--deep);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.crumb a:hover{text-decoration-color:var(--deep)}
.crumb [aria-current]{color:var(--ink)}

/* タロット内のページ移動 */
.tarot-nav{margin:0 0 24px}
.tarot-nav ul{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;list-style:none;margin:0;padding:0}
.tarot-nav a{display:inline-block;text-decoration:none;color:var(--deep);border:1px solid var(--accent);background:#fffffd;border-radius:50px;padding:7px 18px;font-size:16px;line-height:1.6}
.tarot-nav a:hover{background:var(--accent);color:var(--btn-ink)}
.tarot-nav a.is-current{background:var(--theme);color:var(--ink);border-color:var(--line);pointer-events:none}

/* カード：主役＝TOPと同じ淡いピンク、そのほか＝白地＋ピンクの枠 */
.panel{border:1px solid var(--line);border-radius:24px;padding:30px;background:var(--panel);box-shadow:0 5px 22px #b5605414;min-width:0}
/* 見出しの囲み・カードを引く場所は、枠も地もなし（ページの星の背景をそのまま見せる） */
.panel.is-main{background:none;border-color:transparent;box-shadow:none;padding-left:0;padding-right:0}
.page>.panel+.panel,.page>.panel+.guide-grid,.page>.guide-grid+.panel,.page>.panel+.card-grid{margin-top:24px}
.kicker{font-family:"Libre Baskerville",Georgia,serif;font-size:14px;letter-spacing:.08em;color:var(--deep);font-weight:400;margin-bottom:5px}
.kicker::before{content:"";display:inline-block;width:7px;height:7px;background:var(--accent);transform:rotate(45deg);margin-right:9px;vertical-align:1px}
.panel-head{text-align:center}
.panel-head h2{font-size:27px}
.panel-head .section-lead{margin-top:8px}
.section-lead{color:var(--muted);font-size:17px}
.section-note{max-width:640px;margin:10px auto 0;color:var(--muted);font-size:14px;line-height:1.8}
.br-pc{display:inline}
@media(max-width:700px){.theme-list .section-lead{font-size:15px;line-height:1.8;letter-spacing:0}.section-note{font-size:13px;text-align:left}.br-pc{display:none}}

/* ボタン：TOPと同じ #ed9a92・白文字（TOPと同じ）。読みやすいよう文字にうっすら影 */
.primary,.scenario-card .start,.step-number,.to-top,.tarot-nav a:hover{text-shadow:0 1px 2px #9a4a4266}
.primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--accent);color:var(--btn-ink);border:0;border-radius:50px;padding:12px 30px;font:inherit;font-size:18px;font-weight:700;cursor:pointer;text-align:center;text-decoration:none;line-height:1.6;letter-spacing:.08em}
.primary:hover{background:var(--accent-hover)}
.primary:disabled{opacity:.55;cursor:wait}
.primary .arrow{font-size:1.2em;line-height:1}

/* 締めの文（フッターはサイト共通） */
.closing{max-width:760px;margin:34px auto 0;text-align:center}
.closing p{font-size:17px}
.closing .small{font-size:15px;color:var(--muted);margin-top:16px;line-height:1.9}

/* TOPへ戻るボタン：右下に固定。600pxスクロールすると表示 */
.to-top{position:fixed;right:24px;bottom:24px;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:64px;height:64px;border-radius:50%;background:var(--accent);color:var(--btn-ink);text-decoration:none;box-shadow:0 6px 18px #9a4a423a;transition:opacity .25s ease,transform .25s ease,background .2s ease}
.to-top:hover{background:var(--accent-hover)}
.to-top-arrow{width:11px;height:11px;border-top:2.5px solid currentColor;border-left:2.5px solid currentColor;transform:rotate(45deg);margin-top:6px}
.to-top-label{font-family:"Libre Baskerville",Georgia,serif;font-size:12px;letter-spacing:.08em;line-height:1}
.to-top.is-hidden{opacity:0;transform:translateY(12px);pointer-events:none}

/* =========================================================
   カードを引く場所（今日のタロット・シチュエーション別 共通）
   ========================================================= */
.draw{text-align:center}
.shuffle-stage{display:flex;min-height:335px;margin-top:18px;flex-direction:column;align-items:center;justify-content:center;opacity:1;transform:scale(1);transition:opacity .45s ease,transform .45s ease}
.shuffle-stage.finishing{opacity:0;transform:scale(.96)}
.shuffle-stage[hidden]{display:none}
.shuffle-deck{position:relative;width:clamp(112px,19vw,138px);aspect-ratio:2/3}
.shuffle-card{position:absolute;inset:0;z-index:var(--i);border-radius:9px;transform-origin:center;animation:deck-shuffle 1.3s ease-in-out infinite;animation-delay:calc(var(--i) * -55ms);will-change:transform}
.shuffle-card img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;box-shadow:0 9px 22px #5a2e2929}
.shuffle-message{margin-top:34px;color:var(--muted);font-size:15px;letter-spacing:.08em}
.shuffle-dots::after{content:'';animation:shuffle-dots 1.2s steps(4,end) infinite}
.choice-area.waiting{display:none}
.choice-area.revealed{animation:choice-reveal .75s ease both}
@keyframes deck-shuffle{0%,100%{transform:translate(var(--rest-x),var(--rest-y)) rotate(var(--rest-r))}28%{transform:translate(var(--move-x),-11px) rotate(var(--move-r))}58%{transform:translate(var(--back-x),4px) rotate(var(--back-r))}80%{transform:translate(var(--rest-x),var(--rest-y)) rotate(var(--rest-r))}}
@keyframes shuffle-dots{0%{content:''}25%{content:'・'}50%{content:'・・'}75%,100%{content:'・・・'}}
@keyframes choice-reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.instruction{margin-top:18px;font-size:17px;line-height:1.9}
.cards{display:flex;justify-content:center;gap:clamp(12px,4vw,45px);margin:40px 0 14px}
.card-scene{width:clamp(100px,20vw,185px);aspect-ratio:2/3;perspective:1200px;cursor:pointer;transition:transform .35s,opacity .35s;border-radius:11px}
.card-scene:not(.disabled):hover{transform:translateY(-12px)}
.tarot-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.2,.75,.25,1)}
.tarot-card.flipped{transform:rotateY(180deg)}
.card-face{position:absolute;inset:0;overflow:hidden;border-radius:11px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 15px 35px #5a2e2938}
.card-face img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:center}
.card-face img.reversed{transform:rotate(180deg)}
.card-front{background:#fff;transform:rotateY(180deg)}
.card-scene.selected{z-index:10;transform:translateY(-12px) scale(1.04)}
.card-scene.not-selected{opacity:.3;filter:grayscale(.7)}
.card-scene.disabled{cursor:default}

/* =========================================================
   結果（今日のタロット・シチュエーション別 共通）
   ========================================================= */
.result{margin-top:24px;text-align:center;background:var(--panel);border-color:var(--accent);padding:40px 34px;opacity:0;transform:translateY(25px);pointer-events:none;transition:opacity .7s,transform .7s}
.result[hidden]{display:none}
.result.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.result-card-image{display:block;width:300px;max-width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;margin:20px auto 24px;border-radius:12px;box-shadow:0 16px 38px #5a2e2933;transform-origin:center}
.result-card-image.reversed{transform:rotate(180deg)}
.result h2{font-size:34px;letter-spacing:.12em}
.position-badge{display:inline-block;margin-top:10px;padding:3px 16px;border:1px solid var(--accent);border-radius:50px;color:var(--deep);background:#fffffd;font-size:15px}
.keyword{margin-top:10px;color:var(--muted);font-size:16px}
.fortune-score{width:min(440px,100%);margin:28px auto 0;padding:20px 28px 23px;border:1px solid var(--line);border-radius:18px;background:#fffffd}
.score-label{color:var(--deep);font-size:15px;letter-spacing:.12em}
.score-value{margin-top:2px;color:var(--deep);font-family:"Zen Antique Soft",serif;font-size:clamp(46px,8vw,62px);line-height:1.15}
.score-value strong{font-weight:400}
.score-value span{margin-left:4px;color:var(--muted);font-family:"Kosugi Maru",sans-serif;font-size:16px}
.score-meter{height:8px;margin-top:13px;overflow:hidden;border-radius:50px;background:var(--soft)}
.score-meter-fill{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f0aba3,var(--star));transition:width .9s ease .35s}
.fortune-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:30px;text-align:left}
.fortune-box{padding:22px 24px;border:1px solid var(--line);border-radius:18px;background:#fffffd}
.fortune-box h3{font-size:19px;color:var(--deep)}
.fortune-box h3::before{content:"";display:inline-block;width:7px;height:7px;background:var(--accent);transform:rotate(45deg);margin-right:10px;vertical-align:3px}
.fortune-stars,.answer-level{min-height:22px;margin-top:6px;color:var(--star);font-size:21px;line-height:1;letter-spacing:.14em;white-space:nowrap}
.fortune-box p{margin-top:12px;font-size:16px;line-height:1.9}
.tomorrow{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:15px;line-height:1.8}
.countdown{margin-top:6px;color:var(--deep);font-size:19px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.small-note{margin:22px auto 0;padding:14px 17px;background:var(--theme);border-left:3px solid var(--accent);border-radius:12px;color:var(--muted);font-size:14px;line-height:1.85;text-align:left}

/* もっと占う（今日のタロットの下） */
.more-cta{margin-top:20px;text-align:center}

/* シチュエーション別：カードからの答え */
.answer-summary{width:min(560px,100%);margin:28px auto 0;padding:20px 24px 22px;border:1px solid var(--line);border-radius:18px;background:#fffffd}
.answer-caption{color:var(--deep);font-size:15px;letter-spacing:.12em}
.answer-headline{margin-top:6px;color:var(--ink);font-family:"Zen Antique Soft",serif;font-size:clamp(25px,5vw,34px);line-height:1.45}
.answer-level{margin-top:10px}
.answer-text{margin:24px auto 0;padding:26px 28px;border:1px solid var(--line);border-radius:18px;background:#fffffd;font-size:17px;line-height:2;text-align:left;white-space:pre-line}

/* 天使の特別メッセージ（色だけピンク寄りに） */
.result .angel-result-note{border-color:#e9c27a;color:#7d5422;background:linear-gradient(135deg,#fffcef,#fbe6c9);font-size:16px}

/* =========================================================
   シチュエーション別占い 一覧（situations.php）
   ========================================================= */
.theme-list{margin-top:8px}
.scenario-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px}
.scenario-card{position:relative;display:grid;grid-template-columns:84px minmax(0,1fr);gap:22px;align-items:start;padding:26px 28px;color:inherit;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.scenario-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px #b5605424}
.scenario-thumb{display:block;width:84px;aspect-ratio:2/3;object-fit:cover;border-radius:7px;box-shadow:0 8px 18px #5a2e2930}
.scenario-card .kicker{font-size:12px}
.scenario-card h2{font-size:22px;line-height:1.55}
.scenario-card p:not(.kicker){margin-top:8px;color:var(--muted);font-size:16px;line-height:1.85}
.scenario-card .start{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:5px 18px;border-radius:50px;background:var(--accent);color:var(--btn-ink);font-size:15px;font-weight:700;letter-spacing:.06em}
.scenario-card:hover .start{background:var(--accent-hover)}

/* =========================================================
   大アルカナ22枚（cards.php）
   ========================================================= */
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.card-item{text-align:center;padding:26px 24px}
.card-image{display:block;width:min(210px,100%);height:auto;aspect-ratio:2/3;object-fit:cover;margin:0 auto;border-radius:10px;box-shadow:0 12px 28px #5a2e292e}
.card-number{margin-top:20px;font-family:"Libre Baskerville",Georgia,serif;font-size:13px;letter-spacing:.14em;color:var(--deep)}
.card-number::before{content:"";display:inline-block;width:7px;height:7px;background:var(--accent);transform:rotate(45deg);margin-right:9px;vertical-align:1px}
.card-item h2{margin-top:2px;font-size:27px;letter-spacing:.12em}
.card-intro{margin-top:12px;color:var(--ink);font-size:16px;line-height:1.9;text-align:left}
.meaning-list{display:grid;gap:10px;margin-top:18px}
.meaning{padding:12px 16px;border-radius:14px;background:var(--theme);text-align:left}
.meaning.reverse{background:#f4efea}
.meaning-label{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--deep);font-size:14px;letter-spacing:.08em}
.meaning.reverse .meaning-label{color:#6f5659}
.meaning-score{font-size:16px;letter-spacing:.02em}
.meaning-keyword{margin-top:4px;font-size:15px;line-height:1.7}

/* =========================================================
   天使降臨演出テスト（angel-test.php）
   ========================================================= */
.test-description small{color:var(--muted);font-size:15px}
.replay-row{margin-top:20px}
.test-cards{display:flex;justify-content:center;gap:clamp(10px,4vw,34px);margin:36px 0 14px}
.test-card-scene{width:clamp(90px,19vw,150px);aspect-ratio:2/3;perspective:1200px;transition:opacity .4s,transform .4s,filter .4s}
.test-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.2,.75,.25,1)}
.test-card.flipped{transform:rotateY(180deg)}
.test-face{position:absolute;inset:0;overflow:hidden;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 14px 34px #5a2e2933}
.test-face img{display:block;width:100%;height:100%;object-fit:cover}
.test-front{transform:rotateY(180deg);background:#fff}
.test-card-scene.selected{transform:translateY(-10px) scale(1.04)}
.test-card-scene.not-selected{opacity:.28;filter:grayscale(.8)}


/* =========================================================
   画面幅ごとの調整
   ========================================================= */
@media(max-width:980px){
  .hero{column-gap:22px}
  .hero-art{width:150px}
  .hero h1{font-size:34px}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  .scenario-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
  body{font-size:17px}
  .page{padding:20px 14px 30px}
  .hero{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"left title right" "lead lead lead";column-gap:8px;row-gap:14px;padding:22px 0 28px}
  .hero-title{align-self:center}
  .hero-art{width:84px}
  .hero h1{font-size:26px;letter-spacing:.06em;line-height:1.45}
  .hero h1 .title-tail{display:block}
  .hero .lead{margin-top:0;font-size:16px;line-height:1.8}
  .hero.is-long{column-gap:6px}
  .hero.is-long .hero-art{width:62px}
  .hero.is-long h1{font-size:20px;letter-spacing:.02em}
  .crumb{font-size:13px;margin-bottom:14px}
  .crumb li+li::before{margin:0 7px}
  .tarot-nav{margin-bottom:20px}
  .tarot-nav ul{gap:7px}
  .tarot-nav a{font-size:14px;padding:6px 13px}
  .panel{padding:25px 20px;border-radius:20px}
  h2,.panel-head h2{font-size:24px}
  .shuffle-stage{min-height:300px}
  .shuffle-message{margin-top:28px;font-size:14px}
  .cards{gap:8px;margin-top:32px}
  .card-scene{width:calc((100vw - 80px) / 3)}
  .result{padding:30px 18px}
  .result h2{font-size:30px}
  .fortune-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .fortune-box{padding:20px}
  .answer-summary{padding:18px 16px}
  .answer-text{padding:22px 18px;font-size:16px}
  .scenario-card{grid-template-columns:54px minmax(0,1fr);gap:14px;padding:22px 18px}
  .scenario-thumb{width:54px}
  .scenario-card h2{font-size:20px}
  .card-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .test-card-scene{width:calc((100vw - 80px) / 3)}
  .to-top{right:14px;bottom:14px;width:54px;height:54px}
  .to-top-label{font-size:11px}
}
@media(max-width:360px){
  .page{padding-left:11px;padding-right:11px}
  .hero.is-long .hero-art{width:52px}
  .hero.is-long h1{font-size:18px;letter-spacing:0}
  .panel{padding:23px 15px}
  .hero-art{width:68px}
  .hero h1{font-size:22px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .shuffle-card,.shuffle-dots::after,.choice-area.revealed{animation:none}
  .shuffle-stage,.to-top,.scenario-card{transition:none}
}
@media print{
  body{background:#fff}
  .crumb,.tarot-nav,.to-top,.hero-art{display:none}
  .panel{box-shadow:none;break-inside:avoid}
}