/* ===== ゆるぴよ占い研究室 トップページ ===== */
:root{
  --cream:    #f7f3e3;  /* 背景クリーム */
  --green:    #aece82;  /* やわらか緑 */
  --green-dk: #8eaf5e;
  --gold:     #edc100;  /* ゴールド */
  --peach:    #f0c3ac;  /* ピーチ（ロゴのほっぺ系・結果カードの帯） */
  --butter:   #eac64a;  /* バターイエロー（少し濃いめ・ボタン用） */
  --brown:    #a37b35;  /* 茶系アクセント */
  --tan:      #bc9443;
  --ink:      #5a4a30;  /* 本文の文字色 */
  --white:    #ffffff;
  --radius:   16px;
  --shadow:   0 4px 14px rgba(120,100,50,.12);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Kiwi Maru", serif;
  font-weight:300;
  color:var(--ink);
  background:var(--cream);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---- ヒーローヘッダー（背景イラスト＋タイトルの2レイヤー）---- */
.hero-header{
  position:relative;
  width:100%;
  aspect-ratio:1719 / 531;          /* 背景イラストの比率を維持 */
  background:url("../assets/images/bg.png") center top / cover no-repeat;
  border-top:6px solid var(--green);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
}
.hero-title-link{ display:block; width:min(42%, 520px); }
.hero-title{
  width:100%;
  filter:drop-shadow(0 3px 6px rgba(120,100,50,.18));
  transition:transform .2s;
}
.hero-title-link:hover .hero-title{ transform:scale(1.03); }
.hero-tagline{
  margin:1.2vw 0 0;
  font-weight:500;
  color:var(--white);
  font-size:clamp(.7rem, 1.55vw, 1.15rem);
  text-shadow:0 1px 4px rgba(110,120,80,.55);
  letter-spacing:.04em;
}

/* ---- ナビゲーションバー ---- */
.navbar{
  background:var(--white);
  border-bottom:3px solid var(--green);
  position:sticky; top:0; z-index:100;
}
.navbar-inner{
  max-width:1080px; margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.global-nav{ display:flex; gap:10px; font-size:.88rem; flex-wrap:wrap; }
.global-nav a{
  padding:5px 16px; border-radius:10px;
  min-width:112px; text-align:center;
  background:var(--white); border:1.5px solid var(--green);
  color:var(--green-dk); font-weight:500;
  transition:transform .15s, background .2s;
}
.global-nav a:hover{ background:#eef5e0; transform:translateY(-2px); }
.sns{ display:flex; gap:8px; margin-left:auto; }
.sns a{
  font-size:.72rem; padding:5px 10px; border-radius:999px;
  background:var(--green); color:var(--white); transition:transform .15s, background .2s;
}
.sns a:hover{ background:var(--green-dk); transform:translateY(-2px); }

/* ---- SNS公式ロゴチップ（about／contact 共通の囲い・統一デザイン） ---- */
.sns-logos{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin:18px 0; }
.sns-logo{
  display:flex; align-items:center; justify-content:center;
  width:90px; height:38px; border-radius:10px; box-sizing:border-box;
  transition:transform .15s, box-shadow .25s;
}
.sns-logo img{ width:auto; height:auto; display:block; }
.sns-logo.x img{ max-width:62%; max-height:16px; }
.sns-logo.line img{ max-width:66%; max-height:24px; }
.sns-logo.note img{ max-width:64%; max-height:13px; }
.sns-logo.x, .sns-logo.line, .sns-logo.note{ background:#fff; border:1px solid #ece4d2; }
a.sns-logo{ box-shadow:var(--shadow); text-decoration:none !important; }
a.sns-logo:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,.14); }

/* ---- 共通セクション ---- */
main{ max-width:1080px; margin:0 auto; padding:0 20px; }
section{ padding:48px 0; }
.section-title{
  font-weight:500; font-size:1.5rem; text-align:center; color:var(--brown);
  margin:0 0 28px; position:relative;
}
.section-title::after{
  content:""; display:block; width:60px; height:4px; border-radius:2px;
  background:var(--gold); margin:12px auto 0;
}

/* ---- ヒーロー（左：画像／右：テキスト）---- */
.hero{ padding-top:40px; }
.hero-slide{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(20px, 5%, 64px); flex-wrap:wrap;
}
.hero-banner{ flex:1 1 460px; max-width:560px; }
.hero-banner img{
  width:100%; border-radius:var(--radius); box-shadow:var(--shadow);
  transition:transform .2s;
}
.hero-banner:hover img{ transform:scale(1.02); }
.hero-caption{
  flex:1 1 280px; max-width:380px; margin:0; text-align:center;
  color:var(--green-dk); font-weight:500;
  font-size:clamp(1.2rem, 2.4vw, 1.9rem); letter-spacing:.04em;
}

/* ---- 4カテゴリ（占い・グッズ・講座・鑑定）---- */
.category-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));  /* ボタン自体が伸び縮みして必ず4個並ぶ */
  gap:20px;
}
@media (max-width:710px){
  .category-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }  /* スマホ幅は2×2 */
}
.category{
  display:block; border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s;
}
.category img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.category:hover{ transform:translateY(-5px); box-shadow:0 10px 24px rgba(120,100,50,.2); }

/* ---- カテゴリ：背景フレーム＋文字オーバーレイ（背景画像はゆるぴ作・文字はCSSで重ねる）----
   背景画像を差し替えるだけで全ボタン一括変更OK。
   文字サイズは下の --cat-label-size / --cat-sub-size を変えるだけで調整できる。 */
:root{
  --cat-label-size: clamp(1rem, 2.4vw, 1.55rem);  /* メインの文字サイズ（ここを変える）*/
  --cat-sub-size:   .72rem;                        /* サブ文字サイズ */
}
.cat-btn{
  min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; aspect-ratio:16/9; padding:8% 12%; text-align:center;
  border-radius:14px; color:var(--ink) !important; text-decoration:none !important;
  background:url("../assets/images/btn-bg-menu.png?v=2") center/100% 100% no-repeat;
  transition:transform .2s, filter .2s;
}
.cat-btn.sub{ background-image:url("../assets/images/btn-bg-sub.png?v=2"); }
.cat-btn:hover{ transform:translateY(-5px); filter:brightness(1.03); }
.cat-btn .cat-emoji{ font-size:clamp(1.4rem, 3.2vw, 1.9rem); line-height:1; }
.cat-btn .cat-label{ font-weight:500; font-size:var(--cat-label-size); letter-spacing:.03em; }
.cat-btn .cat-sub{ font-size:var(--cat-sub-size); color:var(--brown); }

/* ---- イントロ ---- */
.intro{ text-align:center; }
.intro p{ margin:6px 0; }
.intro-quote{
  display:inline-block; margin:20px auto !important; padding:16px 26px;
  background:var(--cream); border:2px solid var(--peach); border-radius:var(--radius);
  font-size:1.08rem; line-height:1.8; color:var(--ink);
}

/* ---- カード ---- */
.card-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr));
  gap:24px;
}
.card{
  background:var(--white); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:transform .2s, box-shadow .2s;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 8px 22px rgba(120,100,50,.18); }
.card img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.card-title{ padding:12px 14px 2px; font-weight:500; color:var(--ink); }
.card-date{ padding:0 14px 14px; font-size:.76rem; color:var(--tan); }

/* ---- プロフィール ---- */
.profile-card{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:32px; display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap;
  border:2px dashed var(--green);
}
.profile-icon{ width:120px; height:120px; border-radius:50%; flex:0 0 auto; }
.profile-body{ flex:1 1 280px; }
.profile-name{ font-weight:500; font-size:1.3rem; margin:0; }
.profile-role{ color:var(--brown); margin:2px 0 14px; font-size:.9rem; }
.profile-master{ font-size:.82rem; color:var(--tan); margin-top:14px; }
.sns-inline{ margin-top:14px; }

/* ---- 書籍 ---- */
.books{ text-align:center; }

/* ---- タイプ診断ページ ---- */
.diagnose{ max-width:560px; margin:0 auto; position:relative; }
/* 診断ページの見出し（モック再現：黄色マーカー＋詰まった字・下線は出さない） */
.section-title.diag-title{ font-size:clamp(1.5rem, 7.2vw, 2.3rem); margin:0 0 4px; }
.section-title.diag-title::after{ display:none; }
.diag-hl{ background:linear-gradient(transparent 62%, #f3d98a 62%); padding:0 8px; border-radius:3px; }
.diagnose-lead{ text-align:center; color:#7a9a48; font-size:1.25rem; margin:6px 0 30px; }
/* ミニ十干を散らす装飾（背景になじませる：薄く＋入力より後ろの階層） */
.diag-chibi{ position:absolute; z-index:0; opacity:.5; pointer-events:none; height:auto; filter:drop-shadow(2px 3px 4px rgba(141,128,96,.18)); }
/* 見出し・リード文・入力フォームはキャラより前面に */
.diagnose .section-title, .diagnose-lead, .type-form{ position:relative; z-index:1; }
@media (max-width:600px){
  .diag-chibi{ transform:scale(.62); }
  .diag-chibi.c1{ top:6px !important; left:-6px !important; }
  .diag-chibi.c2{ top:-4px !important; left:auto !important; right:-6px !important; }
  .diag-chibi.c3{ top:120px !important; left:auto !important; right:-8px !important; }
}
.type-form{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:32px; border:2px dashed var(--green);
}
.field{ margin-bottom:22px; }
.field > label{ display:block; font-weight:500; color:var(--brown); margin-bottom:8px; }
/* 出生地＝常に表示。最初は薄く、出生時刻を入れ始めたら濃くなって「入力できる」と分かる（実利用フィードバック反映） */
.cond-field{ opacity:.4; transition:opacity .3s ease; }
.cond-field.active{ opacity:1; }
/* 出生地の日本/海外タブ */
.place-tabs{ display:flex; gap:8px; margin-bottom:10px; }
.place-tab{ flex:1; font-family:inherit; font-size:.95rem; padding:8px 4px; color:var(--brown); background:var(--cream); border:2px solid var(--green); border-radius:999px; cursor:pointer; transition:background .2s, color .2s; }
.place-tab.active{ background:var(--green); color:var(--white); }
.place-tab:disabled{ cursor:not-allowed; }
/* サマータイム（夏時間）チェック＝海外のDST国を選んだ時だけ表示 */
.summer-check{ display:flex; align-items:center; gap:6px; cursor:pointer; font-size:.85rem; color:var(--brown); margin:8px 2px 0; }
.summer-check[hidden]{ display:none; }  /* displayがhidden属性を上書きするのを防ぐ＝隠す指定をちゃんと効かせる */
/* 出生地まわりの注意書き */
.pref-note{ font-size:.78rem; color:var(--tan); line-height:1.65; margin:6px 2px 0; }
.type-form input[type="date"],
.type-form input[type="time"],
.type-form select{
  font-family:inherit; font-size:1rem; color:var(--ink);
  padding:10px 12px; border:2px solid var(--green); border-radius:10px;
  background:var(--cream); width:100%;
}
.type-form input:focus, .type-form select:focus{
  outline:none; border-color:var(--green-dk); background:var(--white);
}
.date-row, .time-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dp{ display:inline-flex; align-items:center; gap:4px; }
.dp .unit{ color:var(--brown); font-size:.9rem; }
/* 横並びのプルダウンは内容幅に */
.date-row select, .time-row select{ width:auto; min-width:64px; padding:9px 8px; }
#gengo{ min-width:78px; }
.checkbox{ font-size:calc(.88rem + 2pt); display:flex; align-items:center; gap:6px; cursor:pointer; margin-left:4px; }
.time-unknown-check{ margin-top:10px; }  /* 時刻入力の真下に独立配置 */
.type-form input:disabled{ opacity:.4; }
.submit-btn{
  display:block; width:100%; margin-top:8px; padding:14px;
  font-family:inherit; font-size:1.1rem; font-weight:500; color:var(--white);
  background:var(--green); border:none; border-radius:999px; cursor:pointer;
  box-shadow:var(--shadow); transition:transform .15s, background .2s;
}
.submit-btn:hover{ background:var(--green-dk); transform:translateY(-2px); }
/* 入力が揃うまでは押せない見た目（グレー）。揃うと緑にもどって押せる */
.submit-btn:disabled{ background:#cfccc3; color:var(--white); cursor:not-allowed; box-shadow:none; }
.submit-btn:disabled:hover{ background:#cfccc3; transform:none; }

/* 結果 */
.result{
  margin-top:32px; padding:32px; text-align:center;
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  border:3px solid var(--gold);
}

/* 結果へスクロールするとき、固定ナビに隠れないよう余白を確保 */
#result{ scroll-margin-top: 72px; }

/* シェアボタン */
.share-actions{ text-align:center; margin:22px auto 0; max-width:440px; }
.share-btn{
  display:inline-block; padding:14px 28px; font-family:inherit; font-size:1.05rem; font-weight:500;
  color:var(--white); background:var(--green); border:none; border-radius:999px; cursor:pointer;
  box-shadow:var(--shadow); transition:transform .15s, background .2s;
}
.share-btn:hover{ background:var(--green-dk); transform:translateY(-2px); }
.share-btn:disabled{ opacity:.6; cursor:default; transform:none; }
.share-hint{ font-size:.76rem; color:var(--tan); margin:8px 0 0; }

/* 縦長シェアカード（ゆるぴ作「結果の完成イメージ」準拠・2026-06） */
.share-card{
  max-width:480px; margin:32px auto 0; padding:0;
  background:#e5dec5;            /* 上下の帯色（実物サンプリング） */
  border:none; border-radius:0;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.share-head{ padding:26px 22px 22px; }
.share-title-img{ display:block; width:88%; margin:0 auto; height:auto; }
.share-mid{ background:#fdfbec; padding:24px 14px; }

/* ===== 結果の各行（キャラ＋見出し＋吹き出し）===== */
#result-sections{ display:grid; grid-template-columns:1fr 1fr; gap:16px; transform:scale(.95); transform-origin:center; }
.rx-row{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:4px; padding:12px 8px 14px;
  background:#ffffff; border:none; border-radius:22px;
  box-shadow:5px 6px 10px rgba(141,128,96,.25);
}
/* カード上部の占い名タイトル帯（カードの左右いっぱい＝paddingを打ち消す） */
.rx-title{
  align-self:stretch; margin:-12px -8px 8px;
  background:var(--peach); color:#8a5240;
  font-size:1rem; font-weight:500; letter-spacing:.06em;
  padding:9px 4px; border-radius:22px 22px 0 0; text-align:center;
}

/* キャラ（台座つき） */
.rx-illust{
  position:relative; flex:0 0 auto;
  width:100%; min-height:104px;
  display:flex; align-items:flex-end; justify-content:center;
}
.rx-illust::after{                 /* 台座（ふんわりした床）*/
  content:""; position:absolute; bottom:2px; left:24%; right:24%; height:18px;
  background:#efe3c4; border-radius:50%; z-index:0;
}
/* 高さ基準でサイズを揃える（足元は align-items:flex-end で台座に接地）*/
.rx-big{ height:var(--big-h, 104px); width:auto; position:relative; z-index:1; }
.rx-small{
  height:var(--small-h, 64px); width:auto; position:relative; z-index:2;
  align-self:flex-end; margin-left:var(--pair-overlap, -20px);
}

/* 右側：見出し＋吹き出し */
.rx-body{ width:100%; min-width:0; }
.rx-head{ font-weight:500; color:var(--brown); font-size:1.02rem; margin:2px 0 6px; }
.rx-headsub{ font-size:.78rem; color:var(--tan); margin-left:4px; }
.rx-bubble{
  position:relative; background:var(--white);
  border:2px solid var(--green); border-radius:18px;
  padding:10px 10px; color:var(--ink); font-size:.78rem; line-height:1.55;
}
.rx-bubble::before{   /* しっぽ（枠・上向きでキャラを指す）*/
  content:""; position:absolute; left:50%; top:-16px; margin-left:-8px;
  border:8px solid transparent; border-bottom-color:var(--green);
}
.rx-bubble::after{    /* しっぽ（中）*/
  content:""; position:absolute; left:50%; top:-12px; margin-left:-6px;
  border:6px solid transparent; border-bottom-color:var(--white);
}
.rx-note{ display:block; margin-top:4px; font-size:.66rem; color:var(--tan); }
.rx-lbl{
  display:inline-block; font-size:.72rem; color:#fff; background:var(--brown);
  border-radius:6px; padding:1px 8px; margin-right:6px;
}
.rx-bubble .rx-lbl + br + .rx-lbl, .rx-bubble br{ line-height:2; }
.rx-link{
  display:inline-block; margin:8px 0 0 4px; font-size:.78rem;
  padding:5px 14px; border-radius:999px; background:#f3d98a; color:var(--brown); font-weight:500;
}
.rx-link:hover{ background:#eccb6a; }

/* ===== おまもりルーレット（omamori.html・プロトタイプ）===== */
.omamori-wrap{ max-width:480px; margin:0 auto; text-align:center; padding:8px 16px 44px; }
.draw-btn{
  display:inline-block; margin:8px 0 4px; padding:14px 34px;
  font-family:inherit; font-size:1.15rem; font-weight:500; color:var(--brown);
  background:#f3d98a; border:none; border-radius:999px; cursor:pointer;   /* 文字色＝見出し「おまもりルーレット」と同じbrown／背景＝見出しマーカーの山吹色 */
  box-shadow:5px 6px 10px rgba(141,128,96,.22); transition:transform .15s, background .2s;
}
.draw-btn:hover{ background:#eccb6a; transform:translateY(-2px); }
.draw-btn:disabled{ background:#cfccc3; cursor:not-allowed; box-shadow:none; }
.draw-btn:disabled:hover{ background:#cfccc3; transform:none; }
/* おまもりのカテゴリ選択（全体/時間・方角/才能/おまかせ）*/
.om-cats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:330px; margin:8px auto 14px; }
.om-cat{ width:100%; font-family:inherit; font-size:1.05rem; font-weight:500; padding:11px 8px; color:var(--brown); background:var(--cream); border:2px solid var(--peach); border-radius:999px; cursor:pointer; transition:background .2s, color .2s; }
.om-cat.active{ background:var(--peach); color:#8a5240; }
#omamori-card{ width:260px; margin:26px auto 0; }
.om-loop{ width:26px; height:26px; border:4px solid var(--peach); border-radius:50%; margin:0 auto -10px; }
.om-body{
  position:relative; background:var(--white); border:5px solid var(--peach);
  border-radius:22px; padding:14px 16px 16px; box-shadow:5px 7px 14px rgba(141,128,96,.22);
}
.om-band{
  background:var(--peach); color:#8a5240; font-weight:500; letter-spacing:.12em;
  border-radius:999px; padding:6px 0; font-size:.95rem;
}
.om-char{ margin:14px auto 4px; min-height:120px; display:flex; align-items:flex-end; justify-content:center; }
.om-char img{ height:120px; width:auto; }
.om-name{ font-size:1.2rem; font-weight:500; color:var(--brown); }
.om-word{ margin:8px auto 0; font-size:1rem; color:var(--ink); background:#fbf3df; border-radius:14px; padding:9px 12px; line-height:1.5; }
.om-copy{ margin-top:12px; font-size:.6rem; color:var(--tan); }
@keyframes omPop{ from{ opacity:0; transform:scale(.92) translateY(8px); } to{ opacity:1; transform:none; } }
.om-pop{ animation:omPop .35s ease both; }
#omamori-dl{ margin-top:22px; }


.share-foot{
  padding:26px 16px 10px; text-align:center;
}
.share-foot-logo{ height:69px; width:auto; display:inline-block; }
.share-copy{ display:block; height:20px; width:auto; margin:14px 6px 0 auto; }
.result-label{ color:var(--brown); margin:0 0 18px; font-weight:500; }

/* セクション（モード）見出し */
.dx-section{ margin-bottom:26px; }
.dx-title{
  text-align:center; color:var(--brown); font-weight:500; font-size:1.1rem;
  margin:0 0 16px;
}
.dx-title::before, .dx-title::after{
  content:""; display:inline-block; width:26px; height:3px; border-radius:2px;
  background:var(--gold); vertical-align:middle; margin:0 12px;
}

/* 占い結果：1占い＝1行 */
.dx-row{
  display:flex; align-items:center; gap:16px;
  background:var(--cream); border:2px solid var(--green); border-radius:16px;
  padding:14px 18px; margin-bottom:12px; text-align:left;
}
.dx-row.placeholder{ opacity:.78; border-style:dashed; }
.dx-illust{ flex:0 0 auto; display:flex; gap:4px; }
.dx-ic{ width:var(--char-size, 92px); height:var(--char-size, 92px); object-fit:contain; }
.dx-eg{
  width:var(--char-size, 92px); height:var(--char-size, 92px); border-radius:50%;
  background:var(--white); border:2px dashed var(--green);
  display:flex; align-items:center; justify-content:center; font-size:2.2rem;
}
.dx-body{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; }
.dx-name{ font-size:.76rem; color:var(--tan); }
.dx-main{ font-size:1.45rem; font-weight:500; color:var(--green-dk); line-height:1.25; }
.dx-sub{ font-size:.84rem; color:var(--brown); }
.dx-desc{ font-size:.8rem; color:var(--tan); }
.dx-link{
  align-self:flex-start; margin-top:5px; font-size:.78rem; padding:6px 16px;
  border-radius:999px; background:#f3d98a; color:var(--brown); font-weight:500;
  transition:transform .15s, filter .2s;
}
.dx-link:hover{ transform:translateY(-2px); filter:brightness(1.05); }

/* 時刻不明のとき出生地フィールドを無効表示 */
.field.is-disabled{ opacity:.45; }
.calc-detail{
  margin-top:24px; text-align:left; background:var(--cream);
  border-radius:12px; padding:8px 16px;
}
.calc-detail summary{ cursor:pointer; font-weight:500; color:var(--brown); padding:8px 0; }
#calc-list{ list-style:none; margin:0 0 8px; padding:0; }
#calc-list li{
  display:flex; justify-content:space-between; gap:12px;
  padding:7px 0; border-top:1px dashed var(--green); font-size:.9rem;
}
#calc-list li span{ color:var(--tan); }
#calc-list li b{ font-weight:500; text-align:right; }

.maya-note{ font-size:.66rem; color:var(--tan); line-height:1.3; }

/* ---- スリムヘッダーのロゴ ---- */
.nav-logo{ display:flex; align-items:center; }
.nav-logo img{ height:40px; width:auto; }

/* ---- コンテンツページ（運営者情報・プライバシー・お問い合わせ）---- */
.page{ max-width:720px; margin:0 auto; padding:8px 4px 24px; line-height:1.95; }
.kiyaku-list{ margin:8px 0 16px; padding-left:1.4em; }
.kiyaku-list li{ margin:6px 0; }
.page-title{
  text-align:center; font-weight:500; font-size:1.6rem; color:var(--brown); margin:8px 0 28px;
}
.page-title::after{
  content:""; display:block; width:60px; height:4px; border-radius:2px;
  background:var(--gold); margin:12px auto 0;
}
.page-h2{
  font-weight:500; font-size:1.15rem; color:var(--green-dk); margin:28px 0 8px;
  padding-left:12px; border-left:5px solid var(--green);
}
/* ジャンル別カラーの見出し帯（占いジャンルごとに色分け・丸太字フォントは共通） */
body.genre-shichu .page-h2,
body.genre-sei .page-h2,
body.genre-num .page-h2,
body.genre-maya .page-h2{
  border-left:none;
  font-family:'Zen Maru Gothic',sans-serif;
  font-weight:700;
  font-size:1.2rem;
  letter-spacing:.02em;
  border-radius:12px;
  padding:12px 18px;
  margin:48px 0 16px;
  box-shadow:0 2px 6px rgba(120,100,60,.06);
}
body.genre-shichu .page-h2:first-of-type,
body.genre-sei .page-h2:first-of-type,
body.genre-num .page-h2:first-of-type,
body.genre-maya .page-h2:first-of-type{ margin-top:24px; }
body.genre-shichu .page-h2{ background:#deebcd; color:#5e8146; }
body.genre-sei .page-h2{ background:#dcedf0; color:#4a7f8c; }
body.genre-num .page-h2{ background:#f6e6c6; color:#a9762b; }
body.genre-maya .page-h2{ background:#e8dff3; color:#7c6299; }
/* ジャンル別カラー：本文中の緑基調パーツ（.kan-entry/.kan-more/.point-box/.sign-grp）も各ジャンル色に統一（四柱=既定の緑のままでOKなので上書き不要） */
body.genre-sei .kan-entry{ border-color:#6fb0bf; }
body.genre-sei .kan-name{ color:#4a7f8c; }
body.genre-sei .kan-more{ background:#6fb0bf; }
body.genre-sei .point-box{ border-color:#6fb0bf; }
body.genre-sei .point-box .point-no{ color:#4a7f8c; }
body.genre-sei .sign-grp .glabel b{ color:#4a7f8c; }
body.genre-sei .inyou-item{ border-color:#6fb0bf; }
body.genre-sei .inyou-item .ii-head{ color:#4a7f8c; }
body.genre-sei .inyou-item .ii-term{ color:#6fa3ac; }
body.genre-sei .sign-grp .glabel span{ color:#6fa3ac; }
body.genre-num .kan-entry{ border-color:#e0a458; }
body.genre-num .kan-name{ color:#a9762b; }
body.genre-num .kan-more{ background:#e0a458; }
body.genre-num .point-box:not(.core-rule){ border-color:#e0a458; }
body.genre-num .point-box:not(.core-rule) .point-no{ color:#a9762b; }
body.genre-num .core-group{ color:#a9762b; }
body.genre-num .inyou-item{ border-color:#e0a458; }
body.genre-num .inyou-item .ii-head{ color:#a9762b; }
body.genre-num .inyou-item .ii-term{ color:#c99552; }
body.genre-num .sign-grp .glabel b{ color:#a9762b; }
body.genre-num .sign-grp .glabel span{ color:#c99552; }
body.genre-maya .kan-entry{ border-color:#b59ed4; }
body.genre-maya .kan-name{ color:#7c6299; }
body.genre-maya .kan-more{ background:#b59ed4; }
body.genre-maya .inyou-item{ border-color:#b59ed4; }
body.genre-maya .inyou-item .ii-head{ color:#7c6299; }
body.genre-maya .inyou-item .ii-term{ color:#9a85b3; }
body.genre-maya .sign-grp .glabel b{ color:#7c6299; }
body.genre-maya .sign-grp .glabel span{ color:#9a85b3; }
.page p{ margin:0 0 12px; }
.page-list{ margin:0 0 12px 1.4em; }
.page-list li{ margin:4px 0; }
.page-note{ font-size:.85rem; color:var(--tan); margin-top:20px; }
.page a{ color:var(--green-dk); text-decoration:underline; }

/* お問い合わせカード */
.contact-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:14px; margin:20px 0;
}
.contact-card{
  background:var(--white); border:2px solid #ece4d2; border-radius:18px;
  padding:20px 16px; text-align:center; text-decoration:none !important;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  transition:transform .15s, box-shadow .2s;
}
.contact-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.contact-card .sns-logo{ box-shadow:none; background:transparent; border:none; }
.contact-desc{ font-size:.84rem; color:var(--tan); }

/* ---- 解説記事 ---- */
.article{ max-width:760px; margin:0 auto; padding:8px 4px 24px; line-height:1.95; }
.article-lead{ font-size:1rem; margin-bottom:18px; }
.zukai-slot{
  background:var(--cream); border:2px dashed var(--green); border-radius:14px;
  padding:36px 16px; text-align:center; color:var(--tan); font-size:.9rem; margin:18px 0;
}
.kan-entry{
  display:flex; gap:16px; align-items:center;
  background:var(--white); border:2px solid var(--green); border-radius:16px;
  padding:14px 18px; margin-bottom:12px;
}
.kan-img{ width:96px; height:96px; object-fit:contain; flex:0 0 auto; }
.kan-text{ flex:1 1 auto; min-width:0; }
.kan-name{ font-size:1.12rem; font-weight:500; color:var(--green-dk); margin:0 0 4px; }
.kan-gogyo{ font-size:.92rem; color:var(--tan); background:#f3e2c4; border-radius:6px; padding:2px 10px; margin-left:8px; }
.kan-text p{ margin:0; font-size:.93rem; }
.kan-more{
  display:inline-block; margin-top:10px; padding:8px 22px;
  background:var(--green); color:var(--white) !important;
  border-radius:999px; font-size:.88rem; font-weight:500;
  text-decoration:none !important; box-shadow:var(--shadow);
  transition:transform .15s, filter .2s;
}
.kan-more:hover{ transform:translateY(-2px); filter:brightness(1.05); }
/* 記事内の大きな図解＋ギャラリー＋ライトボックス */
.zukai-main{ display:block; width:100%; border-radius:14px; box-shadow:var(--shadow); margin:18px 0; cursor:zoom-in; }
/* タイプページのカバー（穏やかサイズ・中央寄せ） */
.zukai-cover{ display:block; width:min(560px, 100%); margin:14px auto 10px; border-radius:14px; box-shadow:var(--shadow); cursor:zoom-in; }
/* おもな特徴（すっきり版・カバー幅に揃える） */
.tokucho{ width:min(560px, 100%); margin:0 auto 10px; }
.tokucho .status-title{ font-weight:500; color:var(--green-dk); margin:0 0 6px; }
.tokucho .status-list{ margin:0 0 0 1.6em; }
.tokucho .status-list li{ margin:4px 0; }
/* カバー＋おもな特徴を1枚のカードに（タイプページの顔） */
.type-card{
  width:min(620px, 100%); margin:16px auto 12px;
  background:var(--white); border:2.5px solid var(--green); border-radius:18px;
  padding:16px 16px 6px; box-shadow:var(--shadow);
}
.type-card .zukai-cover{ width:100%; margin:0 0 12px; box-shadow:none; }
.type-card .tokucho{ width:auto; margin:0; padding:2px 14px 14px; }
.gallery-title{ font-weight:500; color:var(--brown); margin:24px 0 10px; }
.ts-star{ font-weight:500; font-size:1.05rem; color:var(--green-dk); margin:18px 0 4px; }
.zukai-gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:10px; margin:12px 0; }
.zukai-gallery img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px;
  box-shadow:0 1px 4px rgba(0,0,0,.12); cursor:zoom-in; transition:transform .15s;
}
.zukai-gallery img:hover{ transform:scale(1.05); }
/* ▼ 図解ギャラリー：サイト全体で一旦非表示（公開なし・2026-06）。再公開時はこの2行を消す ▼ */
.zukai-gallery, .gallery-title{ display:none !important; }
.lb{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:200; justify-content:center; align-items:center; }
.lb.on{ display:flex; }
.lb img{ max-width:92vw; max-height:90vh; border-radius:8px; box-shadow:0 4px 30px rgba(0,0,0,.5); }
.lb-close{ position:fixed; top:14px; right:22px; color:#fff; font-size:36px; cursor:pointer; line-height:1; }

.article-cta{
  background:#fffdf3; border:2px solid var(--gold); border-radius:16px;
  padding:18px 20px; margin-top:22px; text-align:center;
}
.article-cta a{
  display:inline-block; margin:6px 6px 0; padding:9px 22px; border-radius:999px;
  background:var(--green); color:var(--white) !important; font-weight:500; text-decoration:none !important;
}
.article-cta a.gold{ background:#f3d98a; color:var(--brown) !important; }
.article-cta a:hover{ filter:brightness(1.05); }

/* ---- ヒーロー診断CTA（index）---- */
.hero-cta-box{ flex:1 1 280px; max-width:380px; text-align:center; }
.hero-cta-lead{
  color:var(--green-dk); font-weight:500; line-height:1.6; margin:0 0 16px;
  font-size:clamp(1.15rem, 2.2vw, 1.55rem);
}
.hero-cta-lead span{ font-size:.78em; color:var(--brown); }
.hero-cta{
  display:inline-block; padding:14px 34px; border-radius:16px;
  background:#fbf3d8; border:3px solid #e8c0a8;  /* ゆるぴボタンと同じクリーム×ピーチ */
  color:var(--brown) !important; font-weight:500;
  font-size:1.1rem; text-decoration:none !important; box-shadow:var(--shadow);
  transition:transform .15s, filter .2s;
}
.hero-cta:hover{ transform:translateY(-2px); filter:brightness(1.05); }

/* ---- 図解解説ライブラリ（index）---- */
.lib-section{ margin-bottom:28px; }
.lib-h2{
  font-weight:500; font-size:1.2rem; color:var(--brown); margin:0 0 12px;
  padding-left:12px; border-left:5px solid var(--gold);
}
.lib-h3{
  font-weight:500; font-size:1.02rem; color:var(--green-dk); margin:20px 0 10px;
  padding-left:10px; border-left:4px solid var(--green);
}
.lib-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:12px; grid-auto-rows:1fr; }
.lib-card{
  display:flex; flex-direction:column; gap:4px; padding:10px 14px;
  background:var(--white); border:2px solid var(--green); border-radius:14px;
  text-decoration:none !important; transition:transform .15s, box-shadow .2s;
}
.lib-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.lib-card .lib-title{ font-weight:500; color:var(--ink); }
.lib-card .lib-desc{ font-size:.78rem; color:var(--tan); }
.lib-card.soon{ opacity:.6; border-style:dashed; pointer-events:none; }

/* ジャンル別カラー（図解ライブラリ／ .lib-section に付けたクラスで見出し・カード枠・説明文の色が変わる） */
.lib-section.genre-shichu .lib-h2{ color:#5e8146; border-left-color:#5e8146; }
.lib-section.genre-shichu .lib-card{ border-color:#8eaf5e; }
.lib-section.genre-shichu .lib-card .lib-desc{ color:#8eaf5e; }
.lib-section.genre-sei .lib-h2{ color:#4a7f8c; border-left-color:#4a7f8c; }
.lib-section.genre-sei .lib-card{ border-color:#6fb0bf; }
.lib-section.genre-sei .lib-card .lib-desc{ color:#4a7f8c; }
.lib-section.genre-num .lib-h2{ color:#a9762b; border-left-color:#a9762b; }
.lib-section.genre-num .lib-card{ border-color:#e0a458; }
.lib-section.genre-num .lib-card .lib-desc{ color:#a9762b; }
.lib-section.genre-maya .lib-h2{ color:#7c6299; border-left-color:#7c6299; }
.lib-section.genre-maya .lib-card{ border-color:#b59ed4; }
.lib-section.genre-maya .lib-card .lib-desc{ color:#7c6299; }
.sitemap-sub{ font-size:.9rem; color:var(--ink); margin:10px 0 4px; line-height:1.9; }

/* ===== 図解で学ぶ：五術カテゴリ（命術／卜術／相術）===== */
.lib-cat{ margin:36px 0 6px; scroll-margin-top:84px; }
.lib-cat-thumb{ display:block; width:min(560px,100%); margin:0 auto 10px; border-radius:var(--radius); box-shadow:var(--shadow); }
.lib-cat-soon{
  display:block; width:min(560px,100%); margin:36px auto 6px; padding:30px 18px;
  text-align:center; background:var(--cream); border:2px dashed var(--tan);
  border-radius:var(--radius); scroll-margin-top:84px;
}
.lib-cat-soon .cat-name{ font-size:1.7rem; font-weight:500; color:var(--tan); letter-spacing:.12em; }
.lib-cat-soon .cat-sub{ display:block; margin-top:8px; font-size:.84rem; color:var(--tan); line-height:1.7; }
.sitemap-sub a{ color:var(--green-dk); }

/* ---- 占い図鑑：命術／卜術／相術 タブ＋アコーディオン ---- */
.lib-tabs{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:min(560px,100%); margin:14px auto 20px; }
.lib-tab{ padding:0; border:none; background:none; cursor:pointer; border-radius:14px; transition:transform .2s ease, opacity .2s ease, filter .2s ease; }
.lib-tab img{ display:block; width:100%; height:auto; border-radius:14px; box-shadow:var(--shadow); }
.lib-tab[aria-expanded="false"]{ opacity:.55; filter:saturate(.85); }
.lib-tab:hover{ transform:translateY(-3px); opacity:1; }
.lib-tab.is-open{ opacity:1; }
.lib-tab.is-open img{ box-shadow:0 0 0 3px var(--green), var(--shadow); }

.lib-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .38s cubic-bezier(.4,0,.2,1); }
.lib-panel.is-open{ grid-template-rows:1fr; }
.lib-panel-inner{ overflow:hidden; min-height:0; padding:2px; }
.lib-panel-lead{ text-align:center; color:var(--brown); font-size:.95rem; line-height:1.8; margin:6px 0 22px; }
@media (prefers-reduced-motion:reduce){ .lib-panel{ transition:none; } }

/* ---- タイプページのステータスカード（図解の中身をテキスト化）---- */
.status-card{
  background:var(--white); border:2.5px solid var(--green); border-radius:16px;
  padding:18px 22px; margin:16px 0 8px;
}
.status-card .status-waza{
  font-weight:500; color:var(--ink); margin:0 0 10px;
  padding-bottom:10px; border-bottom:2px dashed var(--green);
}
.status-card .status-title{ font-weight:500; color:var(--green-dk); margin:0 0 6px; }
.status-card .status-list{ margin:0 0 12px 1.4em; }
.status-card .status-list li{ margin:3px 0; }
.status-card .status-key{
  margin:0; padding:8px 14px; background:#fdf5d6; border-radius:999px;
  display:inline-block; font-weight:500; color:var(--ink);
}

/* ---- 六十干支ぜんなび（キャラ2ショットの60セル）---- */
.kanshi-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; }
.kanshi-cell{
  background:var(--white); border:2px solid var(--green); border-radius:12px;
  padding:10px 6px 8px; text-align:center;
  display:block; text-decoration:none; color:var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
a.kanshi-cell:hover{ transform:translateY(-2px); box-shadow:3px 4px 8px rgba(141,128,96,.22); }
.kanshi-cell .kc-num{ font-size:.7rem; color:var(--tan); margin:0; }
.kanshi-cell .kc-chars{ display:flex; justify-content:center; align-items:flex-end; gap:4px; min-height:52px; }
.kanshi-cell .kc-chars img{ height:48px; width:auto; }
.kanshi-cell .kc-name{ font-weight:500; margin:4px 0 0; }
.kanshi-cell .kc-yomi{ font-size:.75rem; color:var(--tan); margin:0; }
.kanshi-cell .kc-links{ font-size:.72rem; margin:4px 0 0; }
.kanshi-cell .kc-links a{ color:var(--green-dk); }
.lib-card.soon .lib-desc{ color:var(--green-dk); }

/* ---- 次の章：不思議研究室ティザー ---- */
.next-lab{
  text-align:center; max-width:680px; margin:8px auto 0; padding:34px 24px;
  background:linear-gradient(135deg, #e9e4f5, #e0f0f3);
  border:2px dashed #b7a9d9; border-radius:24px;
}
.next-lab-label{ letter-spacing:.3em; font-size:.72rem; color:#8a7bb0; margin:0 0 6px; }
.next-lab h2{ font-size:1.5rem; font-weight:500; color:#6a5a9a; margin:0 0 10px; }
.next-lab p{ color:var(--ink); margin:0 0 16px; line-height:1.8; }
.next-lab-btn{
  display:inline-block; padding:12px 26px; border-radius:999px;
  background:#8a7bb0; color:#fff !important; font-weight:500;
  box-shadow:var(--shadow); transition:transform .15s, filter .2s;
}
.next-lab-btn:hover{ transform:translateY(-2px); filter:brightness(1.05); }

/* ---- フッター ---- */
.site-footer{
  background:var(--white); border-top:3px solid var(--green);
  margin-top:32px; padding:28px 20px; text-align:center;
}
.footer-nav{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; font-size:.9rem; margin-bottom:12px; }
.footer-nav a:hover{ color:var(--green-dk); }
.copyright{ font-size:.8rem; color:var(--tan); margin:0; }

/* ---- レスポンシブ ---- */
@media (max-width:640px){
  .navbar-inner{ gap:10px; justify-content:center; }
  .global-nav{ width:100%; justify-content:center; font-size:.82rem; gap:14px; }
  .sns{ margin-left:0; justify-content:center; }
  .hero-title-link{ width:min(58%, 360px); }   /* スマホはタイトルを少し大きく */
  .category-grid{ grid-template-columns:repeat(2, 1fr); gap:14px; }
  .section-title{ font-size:1.25rem; }
  .profile-card{ padding:22px; }
}

/* 十二支一覧のサブ情報（蔵干） */
.kan-sub{ font-size:.78rem; color:var(--tan); margin:2px 0 0 !important; }

/* ---- 図解で学ぶ：親トピック＋関係性チップ（学習順ツリー）---- */
.lib-tree{ display:flex; flex-direction:column; gap:10px; }
.lib-tree-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.lib-tree-row .lib-card{ flex:0 0 210px; }
.lib-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.lib-chip{
  font-size:.8rem; padding:4px 14px; border-radius:8px;
  border:1.5px solid var(--green); background:var(--white); color:var(--green-dk) !important;
  text-decoration:none !important; transition:transform .15s, background .2s;
}
.lib-chip:hover{ background:#eef5e0; transform:translateY(-2px); }
.lib-chip.soon{ border-style:dashed; color:var(--tan) !important; pointer-events:none; opacity:.7; }
.page-h2{ scroll-margin-top:80px; }

/* ---- 図解で学ぶ：カードにアイコン（既存キャラ・モチーフの仮置き）---- */
.lib-card.has-icon{ flex-direction:row; align-items:center; gap:12px; }
.lib-icon{ width:52px; height:52px; object-fit:contain; flex:0 0 auto; }
.lib-card-text{ display:flex; flex-direction:column; gap:4px; min-width:0; }

/* ---- 図解で学ぶ：ホバーで関係性がぶわっと出るアコーディオン ---- */
.lib-grid-acc{ align-items:start; }
.lib-acc{ min-width:0; }
.lib-acc .lib-card{ width:100%; }
.lib-acc-panel{
  display:flex; flex-wrap:wrap; gap:8px;
  max-height:0; opacity:0; overflow:hidden; margin-top:0;
  transition:max-height .35s ease, opacity .3s ease, margin-top .35s ease;
}
.lib-acc:hover .lib-acc-panel,
.lib-acc:focus-within .lib-acc-panel{ max-height:180px; opacity:1; margin-top:8px; }
@media (hover:none){
  .lib-acc-panel{ max-height:none; opacity:1; margin-top:8px; }
}

/* ---- 図解で学ぶ：ボタンの大きさを統一（イラストなし版）---- */
.lib-card{ min-height:116px; justify-content:center; }

/* ---- トップのボタン：絵文字のかわりにワンポイントイラスト ----
   絵文字行とイラスト行を同じ高さの箱にして、上下のボタンの高さを揃える */
.cat-btn .cat-emoji, .cat-btn .cat-icon{
  height:clamp(26px, 4vw, 40px);
  display:flex; align-items:center; justify-content:center;
}
.cat-btn .cat-emoji{ font-size:clamp(1.2rem, 2.8vw, 1.6rem); line-height:1; }
.cat-btn .cat-icon{ width:auto; max-width:70%; object-fit:contain; }

/* ---- ボタン：説明はカーソルを合わせるとふわっと出る ---- */
.cat-btn .cat-sub{ opacity:0; transition:opacity .25s ease; }
.cat-btn:hover .cat-sub{ opacity:1; }
@media (hover:none){ .cat-btn .cat-sub{ opacity:1; } }

.cat-btn .cat-label{ white-space:nowrap; }

/* ---- 完成画像ボタン（ゆるぴ作・文字焼き込み版）---- */
.img-btn{ display:block; transition:transform .2s, filter .2s; }
.img-btn:hover{ transform:translateY(-5px); filter:brightness(1.04); }
.img-btn img{ width:100%; height:auto; display:block; border-radius:14px; }

/* ---- 画像ボタン：ホバーでフキダシ説明がぴょこん ---- */
.img-btn{ position:relative; }
.btn-tip{
  position:absolute; left:50%; bottom:calc(100% + 12px);
  transform:translateX(-50%) translateY(6px);
  background:var(--white); border:2px solid var(--green); border-radius:12px;
  padding:5px 16px; font-size:.85rem; font-weight:500; color:var(--brown);
  white-space:nowrap; box-shadow:var(--shadow); z-index:5;
  opacity:0; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.btn-tip::after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:7px solid transparent; border-top-color:var(--green);
}
.img-btn:hover .btn-tip{ opacity:1; transform:translateX(-50%) translateY(0); }
@media (hover:none){ .btn-tip{ display:none; } } /* スマホはフキダシなし（誤タップ防止） */

/* ---- ヒーロー：入り口はバナー1枚に（ホバーでフキダシ）---- */
.hero-stack{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.hero-stack .hero-banner{ flex:none; width:min(560px, 100%); }
.hero-cap{ margin:0; text-align:center; color:var(--brown); font-size:.95rem; }
.hero-cap .cap-main{ color:var(--green-dk); font-weight:500; font-size:1.15rem; }

/* ---- ヒーローのフキダシはバナーに合わせて大きめ ---- */
.hero-banner .btn-tip{
  font-size:1.25rem; padding:12px 32px; border-radius:18px;
  border-width:3px; bottom:calc(100% + 16px);
}
.hero-banner .btn-tip::after{ border-width:11px; }

/* ---- 公開準備中の一時非表示（準備ができたらHTML側の pre-launch クラスを外すだけで復活）---- */
.pre-launch{ display:none !important; }

/* ---- 結果カード：一言＋その場で開く「くわしく見る」---- */
.rx-toggle{
  margin:8px 0 0; padding:5px 16px; border-radius:999px;
  border:1.5px solid var(--green); background:var(--white);
  color:var(--green-dk); font-family:inherit; font-size:.78rem; font-weight:500; cursor:pointer;
  transition:background .2s;
}
.rx-toggle:hover{ background:#eef5e0; }
.rx-detail{
  margin-top:8px; padding:12px 14px; background:var(--cream);
  border-radius:12px; font-size:.8rem; line-height:1.7; text-align:left;
}
.rx-detail p{ margin:0; }
.rx-detail-links{ margin-top:8px !important; }
.rx-detail-links a{ color:var(--green-dk); font-weight:500; }

/* ---- マヤ相性図：タイトルバー＋本体を継ぎ目なしで連結 ---- */
.aisho-stack{ width:min(560px, 100%); margin:14px auto 10px; }
.aisho-stack img{ display:block; width:100%; margin:0; }

/* ---- マヤ相性図：太陽の紋章版とWS版を並列（スマホは縦積み）---- */
.aisho-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:14px 0 10px; }
.aisho-grid .aisho-stack{ width:100%; margin:0; }
@media (max-width:640px){
  .aisho-grid{ grid-template-columns:1fr; }
}

/* ---- 数秘 LP×B カルテ（正方形ミニカード2枚を横並び・立体感の影つき）---- */
.lpb-num{ font-size:1.6rem; font-weight:700; color:#8d8060; letter-spacing:.04em;
  text-align:center; margin:6px 0 14px; }
.lpb-duo{ display:grid; grid-template-columns:1fr 1fr; gap:18px;
  max-width:560px; margin:0 auto 24px; }
.lpb-mini{ background:#fffdf4; border:6px solid #d4c5a0; border-radius:22px;
  box-shadow:5px 6px 0 rgba(141,128,96,.28); aspect-ratio:1/1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:16px 12px 12px; }
.lpb-bubble{ position:relative; background:var(--bb, #fdeee2); border:3px solid #b9a98a; border-radius:18px;
  padding:7px 10px; line-height:1.4; width:100%; box-sizing:border-box;
  display:flex; align-items:center; gap:9px; text-align:left; }
.lpb-bubble::after{ content:""; position:absolute; left:50%; bottom:-9px; width:13px; height:13px;
  background:var(--bb, #fdeee2); border-right:3px solid #b9a98a; border-bottom:3px solid #b9a98a;
  transform:translateX(-50%) rotate(45deg); }
.lpb-icon{ flex-shrink:0; width:46px; height:46px; border-radius:50%; background:#f0b3a0;
  color:#fff; font-size:.86rem; font-weight:700; letter-spacing:.04em;
  display:flex; align-items:center; justify-content:center;
  text-shadow:0 1px 2px rgba(90,74,48,.35); }
.lpb-bubble .lpb-catch{ flex:1; font-size:.97rem; color:var(--ink, #5a4a30); font-weight:500; }
.lpb-mini .lpb-chara{ height:120px; width:auto; display:block; }
@media (max-width:480px){
  .lpb-duo{ gap:12px; }
  .lpb-mini{ gap:12px; padding:12px 8px 10px; }
  .lpb-mini .lpb-chara{ height:88px; }
  .lpb-bubble .lpb-catch{ font-size:.84rem; }
  .lpb-icon{ width:38px; height:38px; font-size:.74rem; }
}

/* 六十干支ヒーローバナー（イラスト主役・タイトルは画像が担当） */
.sr-h1{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.kanshi-hero{ display:block; width:100%; max-width:680px; margin:6px auto 14px; height:auto; }

/* 図解（陰陽など・横長の解説図） */
.zukai-fig{ display:block; width:min(700px,100%); margin:10px auto 6px; height:auto; border-radius:14px; box-shadow:var(--shadow); }
.zukai-cap{ text-align:center; font-size:.84rem; color:var(--tan); margin:4px auto 20px; max-width:560px; line-height:1.55; }
/* 「どうやって決まる」＝すごろく風の1本道（くねっと点線の道＋丸い駅） */
.ts-flow-lead{ text-align:center; font-size:.86rem; color:var(--brown); margin:14px 0 12px; }
.ts-road{ position:relative; max-width:520px; margin:16px auto 8px; }
/* くねっと点線の道（縦にリピート・駅のうしろを通る／まる大きめ・見やすい色） */
.ts-road::before{
  content:""; position:absolute; left:38px; transform:translateX(-50%); top:28px; bottom:40px; width:30px; z-index:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='120'%3E%3Cpath d='M15 0 C30 22 30 38 15 60 C0 82 0 98 15 120' fill='none' stroke='%23cba05a' stroke-width='6.5' stroke-linecap='round' stroke-dasharray='0.5 13'/%3E%3C/svg%3E") repeat-y center;
}
.ts-start{ display:inline-flex; align-items:center; gap:5px; margin:0 0 2px 8px; font-family:'Zen Maru Gothic',sans-serif; font-weight:700; font-size:.82rem; color:#fff; background:var(--green); padding:4px 16px; border-radius:999px; box-shadow:0 2px 5px rgba(120,100,60,.14); }
.ts-stop{ position:relative; z-index:1; display:grid; grid-template-columns:76px 1fr; gap:16px; align-items:center; margin:22px 0; }
.ts-stop-badge{ position:relative; width:76px; height:76px; border-radius:50%; background:#fff; border:3px solid #e7dcc0; box-shadow:0 3px 8px rgba(120,100,60,.14); display:flex; align-items:center; justify-content:center; text-align:center; }
.ts-stop-badge img{ width:56px; height:56px; object-fit:contain; }
.ts-badge-word{ font-family:'Zen Maru Gothic',sans-serif; font-weight:700; font-size:1rem; line-height:1.1; }
.ts-stop-no{ position:absolute; top:-6px; left:-6px; width:26px; height:26px; border-radius:50%; background:var(--green); color:#fff; font-family:'Zen Maru Gothic',sans-serif; font-weight:700; font-size:.82rem; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 4px rgba(120,100,60,.2); }
.ts-stop-body{ font-size:.94rem; line-height:1.65; }
.ts-stop-body p{ margin:0; }
.ts-stop-cap{ font-size:.72rem; color:var(--tan); font-weight:500; margin:0 0 1px; }
.ts-stop-body b{ font-weight:700; color:var(--green-dk); }
.ts-chip{ display:inline-block; font-size:.86rem; font-weight:700; border-radius:999px; padding:2px 12px; }
.ts-goal{ position:relative; z-index:1; text-align:center; margin-top:14px; background:#fdf3ee; border:2px solid #f0a58b; border-radius:22px; padding:2px 16px 16px; }
.ts-goal-flag{ display:inline-block; font-family:'Zen Maru Gothic',sans-serif; font-weight:700; font-size:.82rem; color:#fff; background:#e88b6b; padding:4px 18px; border-radius:999px; transform:translateY(-50%); box-shadow:0 2px 5px rgba(150,90,60,.2); }
.ts-goal-name{ font-family:'Zen Maru Gothic',sans-serif; font-weight:700; font-size:1.24rem; color:#9a5b44; margin:0 0 4px; }
.ts-goal-name b{ color:#d0694a; }
.ts-goal-sub{ font-size:.78rem; color:var(--tan); margin:0; }
@media (max-width:430px){
  .ts-road::before{ left:34px; }
  .ts-stop{ grid-template-columns:68px 1fr; gap:12px; }
  .ts-stop-badge{ width:68px; height:68px; }
  .ts-stop-badge img{ width:50px; height:50px; }
  .ts-stop-body{ font-size:.88rem; }
}

/* 通変星の「なり方」＝干→干の丁寧ルール（各セクション用・再利用可） */
.ts-rule{ background:#fbf7ec; border:2px dashed #e2d3a6; border-radius:16px; padding:12px 14px 14px; max-width:520px; margin:12px auto; }
.ts-rule-line{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:5px 6px; font-family:'Zen Maru Gothic',sans-serif; font-weight:700; font-size:1.02rem; color:var(--ink); margin:5px 0; }
.ts-kan{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; font-size:1.05rem; border:2px solid; }
.ts-kan.k-wood{ background:#e6f0d7; border-color:#accb82; color:#4e7a2e; }
.ts-kan.k-fire{ background:#fbe0d5; border-color:#e9a68d; color:#c05a3e; }
.ts-kan.k-earth{ background:#f3ead0; border-color:#d9c589; color:#957527; }
.ts-kan.k-metal{ background:#f7f0d3; border-color:#e3d086; color:#a4842a; }
.ts-kan.k-water{ background:#dcebf2; border-color:#95bed6; color:#3f7a99; }
.ts-kanw{ display:inline-flex; flex-direction:column; align-items:center; gap:1px; }
.ts-kanw .ts-kan-yomi{ font-size:.56rem; font-weight:400; color:var(--tan); line-height:1; }
.ts-rule-arw{ color:var(--tan); font-size:.95rem; }
.ts-rule-eq{ color:var(--tan); font-size:.86rem; }
.ts-rule-rel{ font-size:.82rem; font-weight:700; border-radius:999px; padding:2px 11px; background:#eef3e2; color:#5e7a2e; }
.ts-rule-star{ font-size:1.08rem; }
.ts-rule-sum{ text-align:center; margin:9px 0 0; font-size:.92rem; color:var(--ink); line-height:1.6; }
.ts-rule-sum b{ font-weight:700; }
.ts-rule-note{ text-align:center; margin:6px 0 0; font-size:.76rem; color:var(--tan); line-height:1.6; }

/* 通変ごとの組み合わせカード（タイトル＋条件／表／こんなイメージ、の3段） */
.tsc-card{ max-width:560px; margin:20px auto; display:flex; flex-direction:column; gap:10px; }
.tsc-head{ display:flex; align-items:center; justify-content:center; gap:16px; background:#eef3e2; border:2px solid #b9cf9a; border-radius:20px; padding:10px 18px; }
.tsc-head img{ width:132px; height:auto; flex:0 0 auto; }
.tsc-cond{ font-family:'Zen Maru Gothic',sans-serif; font-weight:700; font-size:1.2rem; color:#5e7a2e; line-height:1.6; text-align:center; }
.tsc-table{ background:#f6f9f0; border:2px solid #d7e3c4; border-radius:20px; padding:14px 14px 10px; text-align:center; }
.tsc-table-label{ font-family:'Zen Maru Gothic',sans-serif; font-weight:700; font-size:1.02rem; color:#5e7a2e; margin:0 0 8px; }
.tsc-table img{ display:inline-block; max-width:100%; height:auto; }
.tsc-desc{ background:#eef3e2; border-radius:20px; padding:14px 20px 16px; text-align:center; }
.tsc-desc-label{ font-family:'Zen Maru Gothic',sans-serif; font-weight:700; font-size:1rem; color:#5e7a2e; margin:0 0 6px; }
.tsc-desc-text{ color:var(--ink); font-size:.92rem; line-height:1.75; margin:0; }
@media(max-width:430px){ .tsc-head{ gap:10px; padding:8px 12px; } .tsc-head img{ width:104px; } .tsc-cond{ font-size:1.02rem; } }

/* 通変星の解説図（背景透過・影なし・中央） */
.ts-fig{ display:block; max-width:100%; height:auto; margin:14px auto; }
/* 図解の差し込み枠（あとでゆるぴ図解＝背景透過を入れる目印） */
.ts-figslot{ max-width:520px; margin:12px auto; border:2px dashed #cdbb8f; border-radius:16px; background:#fdfaf0; padding:20px 16px; text-align:center; color:var(--tan); font-size:.86rem; line-height:1.8; }
.ts-figslot b{ color:var(--brown); }
.ts-figslot .fs-tag{ display:inline-block; background:#efe3c4; color:var(--brown); font-weight:700; border-radius:999px; padding:2px 12px; font-size:.76rem; margin-bottom:4px; }
/* 5つの関係＝5つの星（位置→名前→ひとこと） */
.ts-rel5{ max-width:540px; margin:14px auto; display:flex; flex-direction:column; gap:8px; }
.ts-rel5 .rel{ display:grid; grid-template-columns:120px 22px 1fr; align-items:center; gap:8px; background:#fff; border-radius:14px; padding:9px 13px; box-shadow:0 2px 6px rgba(120,100,60,.08); }
.ts-rel5 .rel-cond{ font-size:.86rem; color:var(--ink); font-weight:500; text-align:center; }
.ts-rel5 .rel-arw{ color:var(--tan); text-align:center; }
.ts-rel5 .rel-right{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.ts-rel5 .rel-star{ font-family:'Zen Maru Gothic',sans-serif; font-weight:700; font-size:1.06rem; color:#5b5036; border-radius:8px; padding:2px 11px; }
.ts-rel5 .rel-mean{ font-size:.8rem; color:var(--tan); }
@media(max-width:430px){ .ts-rel5 .rel{ grid-template-columns:92px 16px 1fr; padding:8px 10px; } .ts-rel5 .rel-cond{ font-size:.76rem; } }

/* 通変星：5つの組み合わせ早見（横長カードを縦に5枚・サンリオ調） */
.tsuhen-pairs{ display:flex; flex-direction:column; gap:12px; max-width:540px; margin:22px auto; }
.tp-card{
  display:grid; grid-template-columns:92px 1fr 30px 134px; align-items:center; gap:10px;
  border-radius:24px; padding:12px 16px;
  box-shadow:0 4px 11px rgba(120,100,60,.14), inset 0 0 0 3px rgba(255,255,255,.55);
}
/* キャラクター（同じ枠(62×62)にそろえてcontain＝縦横比がちがっても見た目の大きさをそろえる） */
.tp-card-imgs{ justify-self:center; display:flex; align-items:center; gap:0; }
.tp-card-imgs img{ height:62px; width:62px; object-fit:contain; filter:drop-shadow(0 2px 2px rgba(120,100,60,.14)); }
.tp-card-imgs img:last-child{ margin-left:-8px; }
/* もとの2つ（ふりがなルビ＋やわらかい＋／やさしい色味・ひとまわり小さめ／列の中でそろえる） */
.tp-card-src{
  justify-self:center; margin:0; display:flex; align-items:flex-end; gap:5px;
  font-family:'Zen Maru Gothic',sans-serif; font-weight:700; font-size:1.3rem; color:#8d8060;
}
.tp-card-src .tp-word{ display:flex; align-items:flex-end; }
.tp-card-src ruby{ ruby-align:center; }
.tp-card-src ruby rt{ font-size:.58em; font-weight:400; color:#8d8060; opacity:.85; text-align:center; }
.tp-card-src .tp-plus{ color:#8d8060; font-size:1rem; padding-bottom:3px; }
/* つながる矢印＝白まる（右向き） */
.tp-card-eq{ justify-self:center; margin:0; }
.tp-card-eq span{
  display:inline-block; width:24px; height:24px; line-height:23px; text-align:center; border-radius:50%;
  background:rgba(255,255,255,.75); color:var(--tan); font-size:.7rem;
  box-shadow:0 1px 3px rgba(120,100,60,.10);
}
/* できあがりの名まえ＝白いネームプレート（ひとまわり大きく／列の中で常に中央そろえ） */
.tp-card-name{
  justify-self:center; margin:0; background:#fff; border-radius:16px; padding:9px 16px 10px; width:100%; text-align:center; box-sizing:border-box;
  box-shadow:0 2px 6px rgba(120,100,60,.10), inset 0 0 0 1.5px rgba(120,100,60,.05);
  font-family:'Zen Maru Gothic',sans-serif; font-weight:700; font-size:1.58rem; color:var(--ink);
}
.tp-card-name ruby rt{ font-size:.46em; font-weight:400; color:var(--tan); letter-spacing:.06em; }
@media (max-width:430px){
  .tp-card{ grid-template-columns:52px 1fr 20px 92px; gap:6px; padding:11px 8px; }
  .tp-card-imgs img{ height:46px; width:46px; }
  .tp-card-src{ font-size:1.02rem; gap:3px; }
  .tp-card-src ruby rt{ font-size:.6em; }
  .tp-card-name{ font-size:1.1rem; padding:7px 8px 8px; }
  .tp-card-name ruby rt{ font-size:.44em; }
}

/* 陰陽：2つのポイント枠 */
.point-box{ background:#fffdf4; border:2px solid var(--green); border-radius:14px; padding:12px 18px; max-width:560px; margin:14px auto; }
.point-box p{ margin:7px 0; font-weight:500; }
.point-box .point-no{ color:var(--green-dk); font-weight:700; margin-right:6px; }

/* 数秘：コアナンバーズの出し方リスト（オレンジ系） */
.core-list{ max-width:620px; margin:6px auto 0; }
.core-group{ font-size:1.08rem; color:var(--green-dk); font-weight:600; margin:22px 0 8px; }
.core-num{ background:#fffdf4; border:1.5px solid #f0d9a8; border-radius:12px; padding:12px 16px; margin:9px 0; }
.core-num .cn-head{ margin:0; font-size:1.06rem; font-weight:600; color:var(--ink); display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.cn-tag{ display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:27px; padding:0 8px; border-radius:8px; background:#e79038; color:#fff; font-weight:700; font-size:.98rem; }
.cn-mean{ font-size:.86rem; color:var(--tan); font-weight:500; }
.core-num .cn-calc{ margin:7px 0 0; font-size:.96rem; line-height:1.75; color:var(--ink); }
.core-list .point-box.core-rule{ border-color:#e79038; background:#fff8ec; max-width:none; margin:16px 0 0; }
.point-box.core-rule .point-no{ color:#cf7a25; }
.core-note{ font-size:.86rem; color:var(--tan); margin:12px 0 0; }

/* 陰陽：5つの関係リスト */
.inyou-item{ background:#fffdf4; border:1.5px solid #e7dcb8; border-radius:12px; padding:11px 16px; margin:10px auto; max-width:600px; }
.inyou-item .ii-head{ font-weight:500; color:var(--green-dk); margin:0; }
.inyou-item .ii-term{ font-size:.72rem; color:var(--tan); margin-left:6px; font-weight:400; }
.inyou-item p+p{ margin:3px 0 0; }
.inyou-item .zukai-fig{ margin:8px auto; }

/* 12サインの分け方：キャラをグループ分けして色ラインに並べる（陰陽バナー風） */
.sign-split{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:14px 24px; margin:12px auto 4px; }
.sign-grp{ display:flex; flex-direction:column; align-items:center; }
.sign-grp .chars{ display:flex; align-items:flex-end; justify-content:center; gap:1px; min-height:52px; }
.sign-grp .chars img{ height:52px; width:auto; display:block; }
.sign-grp .gline{ align-self:stretch; height:7px; border-radius:4px; margin:5px 0; min-width:56px; }
.sign-grp .glabel{ margin:0; font-size:.82rem; line-height:1.4; color:var(--ink); text-align:center; }
.sign-grp .glabel b{ color:var(--green-dk); }
.sign-grp .glabel span{ display:block; font-size:.72rem; color:var(--tan); }
@media (max-width:480px){
  .sign-grp .chars img{ height:44px; }
  .sign-grp .glabel{ font-size:.78rem; }
}

/* 12サイン：キャラ＋星座名の一覧（凡例） */
.sign-legend{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px 6px; max-width:540px; margin:16px auto 10px; }
.sign-legend figure{ margin:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.sign-legend img{ height:92px; width:auto; display:block; }
.sign-legend figcaption{ font-size:.84rem; color:var(--ink); line-height:1.3; margin-top:4px; }
.sign-legend figcaption .lg-sym{ color:var(--tan); margin-left:1px; }
@media (max-width:480px){
  .sign-legend{ gap:24px 2px; }
  .sign-legend img{ height:68px; }
  .sign-legend figcaption{ font-size:.76rem; }
}

/* 十干：なりたち＝五行ごとに1行ずつ横長で囲う */
.naritachi-row{ background:var(--white); border:2px solid var(--green); border-radius:14px; padding:10px 14px 12px; margin:12px auto; max-width:600px; }
.naritachi-row .nr-head{ margin:0 0 4px; text-align:center; font-weight:600; color:var(--green-dk); }
.naritachi-row .nr-head .nr-vibe{ font-weight:400; color:var(--ink); font-size:.9rem; }
.naritachi-row img{ display:block; width:100%; max-width:460px; height:auto; margin:0 auto; }
@media (max-width:480px){
  .naritachi-row .nr-head .nr-vibe{ display:block; font-size:.84rem; }
}

/* 十干：エネルギー＝1干ごとに横長カード（自然物名を大きく・読みやすく） */
.kan-energy{ display:flex; flex-direction:column; gap:12px; max-width:600px; margin:14px auto 8px; }
.kan-energy .ke-cell{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; background:var(--white); border:2px solid var(--green); border-radius:14px; padding:12px 16px; text-decoration:none; color:var(--ink); transition:transform .12s ease, box-shadow .12s ease; }
.kan-energy a.ke-cell:hover{ transform:translateY(-2px); box-shadow:3px 4px 8px rgba(141,128,96,.22); }
.kan-energy .ke-img{ flex:0 0 auto; width:88px; height:88px; display:flex; align-items:center; justify-content:center; }
.kan-energy .ke-img img{ max-width:88px; max-height:88px; width:auto; height:auto; display:block; }
.kan-energy .ke-body{ flex:1 1 150px; min-width:0; }
.kan-energy .ke-top{ margin:0; font-size:.82rem; color:var(--tan); }
.kan-energy .ke-top b{ color:var(--green-dk); font-size:1.05rem; margin-right:5px; }
.kan-energy .ke-obj{ margin:3px 0 0; line-height:1.2; }
.kan-energy .ke-obj b{ font-size:1.55rem; color:var(--green-dk); font-weight:700; }
.kan-energy .ke-obj span{ font-size:.92rem; color:var(--ink); margin-left:5px; }
.kan-energy .ke-desc{ margin:5px 0 0; font-size:.92rem; color:var(--ink); }
.kan-energy .ke-nikkan{ flex:0 0 auto; width:104px; text-align:center; border-left:1.5px dashed #e7dcb8; padding-left:10px; }
.kan-energy .ke-nikkan img{ width:58px; height:58px; object-fit:contain; display:block; margin:0 auto; }
.kan-energy .ke-more{ margin:3px 0 0; font-size:.72rem; color:var(--green-dk); font-weight:500; line-height:1.25; }
@media (max-width:480px){
  .kan-energy .ke-cell{ gap:8px 12px; padding:11px 13px; }
  .kan-energy .ke-img{ width:72px; height:72px; }
  .kan-energy .ke-img img{ max-width:72px; max-height:72px; }
  .kan-energy .ke-obj b{ font-size:1.35rem; }
  .kan-energy .ke-desc{ font-size:.88rem; }
  .kan-energy .ke-nikkan{ flex:1 1 100%; min-width:100%; width:auto; display:flex; align-items:center; justify-content:center; gap:8px; border-left:none; border-top:1.5px dashed #e7dcb8; padding-left:0; padding-top:8px; margin-top:2px; }
  .kan-energy .ke-nikkan .ke-more{ margin:0; }
  .kan-energy .ke-nikkan img{ width:54px; height:54px; }
  .kan-energy .ke-more{ font-size:.76rem; }
}

/* 陰陽：向きの説明（1行1図＋解説） */
.muki-row{ display:flex; align-items:center; gap:16px; max-width:520px; margin:10px auto; }
.muki-row img{ width:88px; flex:none; }
.muki-row p{ margin:0; }
.muki-row b{ color:var(--green-dk); }

/* ゆるぴの見方（個人の視点ノート） */
.yurupi-note{ background:#fffdf4; border:2px solid var(--green); border-radius:14px; padding:12px 18px; max-width:560px; margin:16px auto; }
.yurupi-note .yn-label{ display:block; font-size:.78rem; color:var(--green-dk); font-weight:700; margin-bottom:3px; }
.yurupi-note p{ margin:0; }


/* ===== ヒーロー カルーセル（自動横スライダー）===== */
.hero-carousel{width:100%;max-width:416px;margin:0 auto}   /* 520の80%＝カルーセルだけ少し小さく（ゆるぴ指定） */
.hc-viewport{overflow:hidden;border-radius:18px}
.hc-track{display:flex}
.hc-slide{flex:0 0 100%;display:block}
.hc-slide img{width:100%;height:auto;display:block;border-radius:18px}
.hc-dots{display:flex;gap:8px;justify-content:center;margin:12px 0 2px}
.hc-dot{width:10px;height:10px;border-radius:50%;background:#f0e6c8;border:1px solid var(--tan);cursor:pointer;padding:0}
.hc-dot.is-active{background:var(--butter)}
.hc-cta{text-decoration:none;margin-top:6px}

/* ===== おまもりルーレット入口カード（結果の下など）===== */
.omamori-entry-link{display:block;text-decoration:none}
.omamori-entry{position:relative;max-width:420px;margin:24px auto;padding:22px 18px 18px;background:var(--cream);border:3px solid var(--peach);border-radius:22px;text-align:center;box-shadow:5px 6px 12px rgba(141,128,96,.18)}
.omamori-entry .oe-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--butter);color:var(--ink);font-size:.8rem;font-weight:500;padding:3px 16px;border-radius:999px;letter-spacing:.1em}
.omamori-entry .oe-emoji{font-size:2rem;line-height:1}
.omamori-entry .oe-title{display:inline-block;font-size:1.4rem;font-weight:500;color:var(--brown);margin:4px 0;background:linear-gradient(transparent 62%,#f3d98a 62%);padding:0 10px}
.omamori-entry .oe-sub{font-size:.95rem;color:#7a6a48;margin:6px 0 14px}
.omamori-entry .oe-btn{display:inline-block;font-size:1.05rem;font-weight:500;color:var(--brown);background:#f3d98a;padding:10px 30px;border-radius:999px}


/* ===== おまもりルーレット入口（バナー版・結果ページ用）===== */
.omamori-banner-entry{max-width:480px;margin:30px auto 0;text-align:center}
.omamori-banner-entry .obe-lead{font-size:1rem;color:var(--green-dk);font-weight:500;margin:0 0 10px}
.omamori-banner-entry .obe-banner{display:block}
.omamori-banner-entry .obe-banner img{width:100%;height:auto;display:block;border-radius:18px;box-shadow:5px 6px 12px rgba(141,128,96,.18);transition:transform .15s}
.omamori-banner-entry .obe-banner:hover img{transform:scale(1.02)}
.omamori-banner-entry .obe-cta{margin-top:10px;text-decoration:none}


/* ===== タイトルヒーロー（live-text）背景プレート=CSS／文字=Zen Maru Gothic／系統色=modifier ===== */
.title-hero{ max-width:680px; margin:6px auto 20px; background:#fdf9ec; border:6px solid #cdbb8f; border-radius:30px; padding:7px; box-sizing:border-box; box-shadow:0 3px 10px rgba(120,100,60,.12); }
.title-hero .th-inner{ border:2px solid #e7d8a8; border-radius:22px; padding:clamp(14px,3.5vw,30px) clamp(10px,3vw,26px) clamp(16px,3.5vw,28px); box-sizing:border-box; text-align:center; }
.title-hero.th-sei{ border-color:#6fb0bf; } .title-hero.th-sei .th-inner{ border-color:#cfe8ec; }
.title-hero.th-num{ border-color:#e0a458; } .title-hero.th-num .th-inner{ border-color:#f7e2a8; }
.title-hero.th-maya{ border-color:#b59ed4; } .title-hero.th-maya .th-inner{ border-color:#e7dff4; }
.title-hero.th-shichu{ border-color:var(--green-dk); } .title-hero.th-shichu .th-inner{ border-color:#dcebc7; }
.th-kanmuri{ font-family:'Zen Maru Gothic',sans-serif; font-weight:500; font-size:clamp(11px,2.6vw,18px); color:#8eaf5e; margin:0 0 -.15em; }
.th-furi{ font-family:'Zen Maru Gothic',sans-serif; font-weight:500; font-size:clamp(13px,3.2vw,22px); letter-spacing:.45em; color:#8eaf5e; margin:0 0 -.1em; padding-left:.45em; }
.th-title{ font-family:'Zen Maru Gothic',sans-serif; font-weight:700; font-size:clamp(46px,11.5vw,104px); line-height:1.05; letter-spacing:.08em; color:#8d8060; margin:.05em 0 .14em; padding-left:.08em; }
/* 研究ノート記事の帯＝案A（記事名が主役・かんむりに「◯◯の研究ノート」）用のタイトルサイズ */
.th-title.th-article{ font-size:clamp(23px,5.8vw,38px); line-height:1.35; letter-spacing:.04em; margin:.4em 0 .3em; padding:0 6px; overflow-wrap:anywhere; word-break:break-word; }
/* 記事タイトルの2行目（〜サブタイトル〜）＝やや小さく */
.th-title.th-article .th-t-sub{ display:block; font-size:.62em; letter-spacing:.06em; margin-top:.18em; }
.th-sub{ font-family:'Zen Maru Gothic',sans-serif; font-weight:500; font-size:clamp(11px,2.9vw,24px); color:#a37b35; margin:0 0 clamp(14px,3vw,22px); padding:0 6px; overflow-wrap:anywhere; word-break:break-word; }
.th-chars{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; gap:clamp(3px,1.2vw,10px); margin:0 auto clamp(8px,1.6vw,12px); }
.th-chars img{ height:clamp(24px,6vw,58px); width:auto; display:block; }
.th-chars.th-many img{ height:clamp(20px,5vw,46px); }
.th-underline{ height:7px; border-radius:6px; background:linear-gradient(90deg,#efe3bf,#d4c5a0,#efe3bf); width:64%; max-width:560px; margin:0 auto; }
.title-hero.th-sei .th-underline{ background:linear-gradient(90deg,#dbeef1,#a8d3da,#dbeef1); }
.title-hero.th-num .th-underline{ background:linear-gradient(90deg,#f6e6bd,#efcd84,#f6e6bd); }
.title-hero.th-maya .th-underline{ background:linear-gradient(90deg,#e9e1f6,#cdb9e6,#e9e1f6); }
.title-hero.th-shichu .th-underline{ background:linear-gradient(90deg,#e8f1da,#bddb92,#e8f1da); }
.th-groups{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; gap:clamp(8px,2.6vw,26px); margin:2px auto 4px; }
.th-grp{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.th-grp-imgs{ display:flex; align-items:flex-end; justify-content:center; gap:clamp(1px,0.8vw,5px); }
.th-grp-imgs img{ height:clamp(24px,6vw,56px); width:auto; display:block; }
.th-grp-ul{ height:6px; border-radius:5px; width:100%; min-width:24px; }
/* 数秘=12個が四角めなので1行に収める */
.title-hero.th-num .th-chars{ gap:clamp(2px,0.9vw,7px); }
.title-hero.th-num .th-chars img{ height:clamp(16px,4vw,38px); }
/* 干支60=十干+十二支の組合せ5つを1行に収める（コンパクト） */
.th-groups.th-combo{ gap:clamp(5px,1.3vw,12px); }
.th-groups.th-combo .th-grp-imgs img{ height:clamp(20px,4.6vw,42px); }
/* 幅広ブロブ系（十二支など）の12個フラットを1行に収める */
.th-chars.th-wide{ gap:clamp(2px,0.9vw,7px); }
.th-chars.th-wide img{ height:clamp(16px,4vw,40px); }