@charset "UTF-8";

/* ===== ガイド（メイン） ===== */
.guide-main{
  display: flex;              /* ← gapが効く前提を保証 */
  flex-direction: column;
  gap: 12px;
}

.guide-title{
  font-size: 22px;
  font-weight: 900;
  text-align: center;
  margin: 6px 0 2px;
}

.guide-lead{
  margin: 0 0 6px;
  text-align: center;
  opacity: .75;
  font-size: 13px;
  line-height: 1.6;
}

.guide-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.guide-h2{
  margin: 8px 0 8px;
  font-size: 18px;
  font-weight: 900;
}

.guide-card p{
  margin: 8px 0;
  line-height: 1.9;
}

.guide-badges{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.guide-badge{
  font-weight: 900;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
}

/* ===== 画像付きガイドカード ===== */
.guide-card--with-image{
  position: relative;
  display: flex;
  gap: 14px;
  align-items: stretch;
}

.guide-card__content{
  flex: 1;
  min-width: 0;
}

/* 右端画像 */
.guide-card__image{
  flex: 0 0 92px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guide-card__image img{
  width: 88px;
  height: auto;
  opacity: .9;
}

/* ===== 占うリンク ===== */
.guide-start-link{
  position: absolute;
  top: 10px;
  right: 12px;

  font-weight: 900;
  font-size: 15px;
  text-decoration: none;
  color: rgba(106, 44, 255, .95);
}
.guide-start-link:active{ opacity: .7; }

/* ===== 右下ボタン（topicと共通化） ===== */
.pwa-fab{
  position: fixed;
  right: 14px;
  bottom: calc(var(--footer-h) + 14px); /* footer固定前提 */
  z-index: 10001;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 14px;
  border-radius: 999px;
  border: 0;

  background: rgba(106, 44, 255, .88);
  color: rgba(255,255,255,.96);

  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.pwa-fab:active{ transform: translateY(1px); }

/* ===== オーバーレイ＋シート ===== */
.pwa-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 10010;
}

.pwa-sheet{
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  transform: translateY(100%);
  transition: transform .22s ease;
  z-index: 10011;

  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -18px 40px rgba(0,0,0,.20);
  max-height: 72vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

body.pwa-sheet-open .pwa-overlay{
  opacity: 1;
  pointer-events: auto;
}
body.pwa-sheet-open .pwa-sheet{
  transform: translateY(0);
}

.pwa-sheet__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

.pwa-sheet__title{
  font-weight: 900;
  font-size: 15px;
}

.pwa-sheet__close{
  border: 0;
  background: rgba(0,0,0,.06);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
}

.pwa-sheet__body{
  padding: 14px;
}

.pwa-sheet__body h3{
  margin: 14px 0 6px;
  font-size: 16px;
  font-weight: 900;
}
.pwa-sheet__body p,
.pwa-sheet__body ul{
  margin: 8px 0;
  line-height: 1.9;
}
.pwa-sheet__body ul{ padding-left: 18px; }

/* ===== ガイド専用：戻るボタン（pwa_header.cssに手を入れずここで補完） ===== */
.pwa-header{
  position: sticky;
  top: 0;
  z-index: 2000;
}

/* ガイド画面の戻るアイコン */
.pwa-header__back{
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  text-decoration: none;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  padding: 10px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  color: #111;
}

/* タイトル中央寄せ崩れ防止 */
.pwa-header__title{
  text-align: center;
}

/* =========================
   Guide typography (accent)
   ========================= */

/* ガイド本文の基準（読み物として整える） */
.guide-main{
  font-size: 15px;
  line-height: 1.95;
  letter-spacing: .01em;
}

/* h1/h2/h3 を“見出し”として見えるようにする */
.guide-title{
  letter-spacing: .02em;
}

.guide-h2{
  position: relative;
  padding-left: 12px;
  margin: 10px 0 10px;
  line-height: 1.35;
}

/* 左にアクセントバー */
.guide-h2::before{
  content:"";
  position:absolute;
  left:0;
  top:.15em;
  bottom:.15em;
  width: 4px;
  border-radius: 999px;
  background: rgba(106, 44, 255, .85);
}

/* シート内の見出しも差を出す */
.pwa-sheet__body h3{
  position: relative;
  padding-left: 10px;
}

.pwa-sheet__body h3::before{
  content:"";
  position:absolute;
  left:0;
  top:.25em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(106, 44, 255, .85);
}

/* 箇条書き（li）が“全部同じ”問題の主犯になりやすいので強制的に整える */
.guide-card ul,
.pwa-sheet__body ul{
  padding-left: 18px;
  margin: 10px 0;
  list-style: disc;
}

.guide-card li,
.pwa-sheet__body li{
  margin: 6px 0;
}

/* 強調（強い言葉）を目立たせる */
.guide-card strong,
.pwa-sheet__body strong{
  font-weight: 900;
}

/* 文章の段落間に“呼吸”を作る（baseで潰されている前提で上書き） */
.guide-card p,
.pwa-sheet__body p{
  margin: 10px 0;
}

/* =========================
   Fix: weight + h3/li bullets
   ========================= */

/* 1) まず本文を“通常の太さ”へ戻す（strongとの差を作る） */
.guide-main,
.guide-card,
.guide-card p,
.guide-card li,
.pwa-sheet__body,
.pwa-sheet__body p,
.pwa-sheet__body li{
  font-weight: 400 !important;           /* ← ここが重要 */
}

/* strong だけ太くする（差を復活させる） */
.guide-card strong,
.pwa-sheet__body strong{
  font-weight: 900;
}

/* 2) h3 は “丸” を使わず、左アクセント線で見出しにする */
.pwa-sheet__body h3{
  position: relative;
  margin: 16px 0 8px;
  padding-left: 12px;
  font-weight: 900;
  color: rgba(106, 44, 255, .95); /* 見出しは紫寄り */
}

/* h3 の丸マーカーが既にある場合は消す */
.pwa-sheet__body h3::before{
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  bottom: .2em;
  width: 4px;
  border-radius: 999px;
  background: rgba(106, 44, 255, .85);
}

/* 3) 箇条書きは黒丸に固定（見出しと混同しない） */
.pwa-sheet__body ul{
  margin: 10px 0;
  padding-left: 20px;
  list-style: disc;
}
.pwa-sheet__body li::marker{
  color: rgba(0,0,0,.75);     /* 黒丸 */
}
.pwa-sheet__body li{
  margin: 6px 0;
}

.guide-title{ color: red !important; }

@media (max-width: 420px){
  .guide-title{ font-size: 20px; }
  .pwa-sheet{ max-height: 78vh; }
}