@charset "UTF-8";
/* ==========================================================================
   後払い優良店調べの井口さん　サイト共通CSS

   このファイルを直せば、読み込んでいる全ページに反映される。
   読み込み方：<link rel="stylesheet" href="./style/site.css">

   もくじ
     1. 色と寸法（ここを変えるとサイト全体の色が変わる）
     2. 土台
     3. ヘッダー
     4. ページの枠とタイトル
     5. 部品（カード・表・吹き出し・広告表記・注意書き・ポリシー本文・ボタン）
     6. ランキングの部品（比較表・業者カード・評価・口コミ・申込ボタン）
     7. あそび（傾き・はみ出し・手描き）※きっちり感を崩すための飾り
     8. トップページの部品（大見出し・文章のカード・色の帯・3ステップ・選び方）
        ＋ ランキング根拠ページの部品（評価項目・更新履歴・仮の文章の目印）
     9. ブログ新着カード
    10. フッター
    11. 動き
    12. スマホ
   ========================================================================== */


/* 1. 色と寸法
   ========================================================================== */
:root {
  --ink: #3d2c4f;         /* 文字・ふちどり */
  --lemon: #fff1a8;       /* 背景 */
  --pink: #ff7fa9;        /* アクセント */
  --pink-soft: #ffd6e4;
  --pink-deep: #e0457b;   /* 白地に乗せる濃いピンク */
  --mint: #7fe0c8;        /* ボタン */
  --mint-soft: #d9f6ee;
  --mint-deep: #0b8a6b;   /* 白地に乗せる濃いミント */
  --lilac-soft: #ebe6f5;  /* うす紫（買取業者の帯） */
  --white: #ffffff;
  --gold: #ffc93c;        /* 1位 */
  --silver: #cdd5e3;      /* 2位 */
  --bronze: #e9a87b;      /* 3位 */
  --star: #e89a00;        /* ★ */
  --line: #06a850;        /* LINEボタン */
  --mascot-w: clamp(124px, 35vw, 230px);  /* 運営者情報のキャラの幅 */
}


/* 2. 土台
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-weight: 500;
  line-height: 1.8;
  color: var(--ink);
  background-color: var(--lemon);
  background-image: radial-gradient(var(--white) 4px, transparent 4.5px);
  background-size: 30px 30px;
}

img { max-width: 100%; height: auto; vertical-align: middle; }

a { color: inherit; }

a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
  border-radius: 6px;
}


/* 3. ヘッダー
   ========================================================================== */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 12px max(20px, calc(50% - 350px));   /* 中身を本文と同じ幅にそろえる */
  background: var(--white);
  border-bottom: 3px solid var(--ink);
}

/* サイト名（顔アイコン＋文字） */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-decoration: none;
}

.site-logo::before {
  content: "";
  flex: none;
  width: 44px;
  height: 44px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: var(--lemon) url(../images/iguchi2.webp) 46% 24% / 190% no-repeat;
}

/* メニュー（ランキング・ブログ） */
.site-nav {
  display: flex;
  gap: 10px;
}

.site-nav a {
  padding: 2px 16px;
  font-size: 0.9rem;
  font-weight: 900;
  text-decoration: none;
  background: var(--lemon);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform 0.12s, box-shadow 0.12s;
}

.site-nav a:hover { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.site-nav a[aria-current="page"] { background: var(--mint); }   /* 今いるページはミント色 */


/* 4. ページの枠とタイトル
   ========================================================================== */
.page {
  flex: 1;
  width: 100%;
  max-width: 740px;
  margin: 0 auto;
  padding: 56px 20px 80px;
}

.page-title {
  margin: 0 0 44px;
  text-align: center;
  white-space: nowrap;
  font-size: clamp(1.5rem, 6.4vw, 2.6rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.3;
}

/* タイトルが11文字以上のページ用（スマホではみ出さないよう少し小さく） */
.page-title--long { font-size: clamp(1.25rem, 5.8vw, 2.6rem); }

/* ピンクのマーカー */
.page-title span {
  display: inline-block;
  padding: 0 0.3em;
  background: linear-gradient(transparent 60%, var(--pink) 60%, var(--pink) 90%, transparent 90%);
}

/* タイトルとキャラを横に並べる（運営者情報） */
.hero {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: clamp(8px, 3vw, 24px);
  padding-right: 4%;
}

.hero .page-title {
  flex: 1;
  margin: 0 0 clamp(34px, 9vw, 64px);
  font-size: clamp(1.6rem, 7.6vw, 3rem);
}

/* カードの後ろからひょこっと顔を出す */
.mascot {
  flex: none;
  width: var(--mascot-w);
  height: auto;
  margin-bottom: -5%;
}


/* 5. 部品
   ========================================================================== */

/* ---------- 部品どうしの間隔 ---------- */
.card,
.pr,
.notice { margin-top: 34px; }

.page-title + .card { margin-top: 0; }   /* タイトル直下のカードは詰める */

/* ---------- カードと、項目名つきの表 ---------- */
.card {
  position: relative;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 30px;
  box-shadow: 9px 9px 0 var(--pink);
  padding: 10px 34px;
}

.info {
  width: 100%;
  border-collapse: collapse;
}

.info tr + tr { border-top: 3px dotted var(--pink-soft); }

.info th,
.info td {
  padding: 22px 0;
  text-align: left;
  vertical-align: top;
}

.info th {
  width: 11.5em;
  font-weight: 700;
}

.info th span {
  display: inline-block;
  min-width: 9em;
  padding: 1px 14px;
  text-align: center;
  font-size: 0.9rem;
  background: var(--pink-soft);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
}

.info td {
  font-size: 1.05rem;
  font-weight: 700;
}

.info td a {
  word-break: break-all;
  text-decoration: underline wavy var(--pink);
  text-underline-offset: 5px;
}

.info td a:hover { background: var(--lemon); }

/* ---------- 吹き出し（あいさつ） ---------- */
.bubble {
  position: relative;
  z-index: 1;
  padding: 24px 34px 28px;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 30px;
}

/* しっぽ：キャラのすぐ左から上に出す */
.bubble::before {
  content: "";
  position: absolute;
  top: -13px;
  right: calc(4% + var(--mascot-w) * 0.9);
  width: 22px;
  height: 22px;
  background: var(--white);
  border-top: 3px solid var(--ink);
  border-left: 3px solid var(--ink);
  border-top-left-radius: 5px;
  transform: skewX(-18deg) rotate(45deg);
}

.bubble p {
  margin: 0;
  font-weight: 700;
}

.bubble p + p { margin-top: 0.6em; }

/* ミント色の小さいラベル */
.label {
  display: inline-block;
  margin: 0 0 12px;
  padding: 1px 16px;
  font-size: 0.9rem;
  font-weight: 700;
  background: var(--mint);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
}

/* ---------- 広告について ---------- */
.pr {
  padding: 18px 26px 20px;
  background: var(--mint-soft);
  border: 3px solid var(--ink);
  border-radius: 22px;
}

.pr h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 900;
}

.pr-badge {
  flex: none;
  padding: 0 12px;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  line-height: 1.7;
  color: var(--white);
  background: var(--ink);
  border-radius: 999px;
}

.pr p {
  margin: 0;
  font-size: 0.95rem;
}

/* ---------- 注意書き ---------- */
.notice {
  padding: 22px 28px 26px;
  background: var(--white);
  border: 3px dashed var(--ink);
  border-radius: 26px;
}

.notice h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 1.1rem;
  font-weight: 900;
}

.notice h2::before {
  content: "!";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  line-height: 1;
  background: var(--pink);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
}

.notice ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}

.notice li {
  position: relative;
  padding-left: 1.4em;
}

.notice li + li { margin-top: 10px; }

.notice li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.62em;
  width: 9px;
  height: 9px;
  background: var(--pink);
  border-radius: 50%;
}

/* ---------- 最終更新日 ---------- */
.updated {
  margin: 20px 8px 0;
  text-align: right;
  font-size: 0.85rem;
  font-weight: 700;
}

/* ---------- 長い文章のカード（プライバシーポリシー） ---------- */
.policy {
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 30px;
  box-shadow: 9px 9px 0 var(--pink);
  padding: 30px 34px 10px;
}

.policy p { margin: 0; }
.policy p + p { margin-top: 0.7em; }

/* 前文 */
.policy-lead {
  padding-bottom: 28px;
  font-weight: 700;
}

/* 各条 */
.policy section {
  padding: 24px 0 26px;
  border-top: 3px dotted var(--pink-soft);
}

.policy h2 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.5;
}

.policy h2 span {
  padding: 0 0.15em;
  background: linear-gradient(transparent 62%, var(--pink-soft) 62%);
}

.policy ul {
  margin: 0 0 0.7em;
  padding: 0;
  list-style: none;
}

.policy li {
  position: relative;
  padding-left: 1.4em;
}

.policy li + li { margin-top: 8px; }

.policy li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.65em;
  width: 9px;
  height: 9px;
  background: var(--pink);
  border-radius: 50%;
}

.policy a {
  word-break: break-all;
  font-weight: 700;
  text-decoration: underline wavy var(--pink);
  text-underline-offset: 5px;
}

.policy a:hover { background: var(--lemon); }

/* ---------- ボタン ---------- */
.back {
  margin: 52px 0 0;
  text-align: center;
}

.btn {
  display: inline-block;
  padding: 12px 46px;
  font-size: 1.05rem;
  font-weight: 900;
  text-decoration: none;
  background: var(--mint);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 6px 0 var(--ink);
  transition: transform 0.12s, box-shadow 0.12s;
}

.btn:hover  { transform: translateY(3px); box-shadow: 0 3px 0 var(--ink); }
.btn:active { transform: translateY(6px); box-shadow: 0 0 0 var(--ink); }


/* 6. ランキングの部品
   ========================================================================== */

/* 順位ごとの色。行やカードに rank-1 〜 rank-4 を付けると、バッジと影の色が変わる */
.rank-1 { --rank-color: var(--gold); }
.rank-2 { --rank-color: var(--silver); }
.rank-3 { --rank-color: var(--bronze); }
.rank-4 { --rank-color: var(--mint); }

/* ---------- 広告表記（ヘッダー直下の1行） ---------- */
.pr-note {
  width: 100%;
  max-width: 740px;
  margin: 12px auto 0;
  padding: 0 20px;
  text-align: right;
  font-size: 0.75rem;
  font-weight: 700;
}

.pr-note + .page { padding-top: 30px; }

/* ---------- 更新日のピル ---------- */
.update-date {
  width: fit-content;
  margin: 0 auto 18px;
  padding: 1px 20px;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.8;
  background: var(--mint);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
}

/* ---------- ランキングの大見出し（ピンクのパネル） ---------- */
.hero-rank {
  position: relative;
  overflow: hidden;
  min-height: 330px;
  padding: 34px 34px 30px;
  background: var(--pink);
  border: 3px solid var(--ink);
  border-radius: 34px;
  box-shadow: 10px 10px 0 var(--ink);
}

/* うしろの放射状の光 */
.hero-rank::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from 4deg at 74% 62%, rgba(255, 255, 255, 0.24) 0 9deg, transparent 9deg 18deg);
}

.hero-rank > * { position: relative; }

/* 「30社以上を徹底調査」のふせん */
.hero-rank__burst {
  width: fit-content;
  margin: 0 0 16px -6px;
  padding: 4px 18px 5px;
  font-size: clamp(0.85rem, 3.6vw, 1.15rem);
  font-weight: 900;
  line-height: 1.4;
  word-break: keep-all;     /* 折り返すのは <wbr> を入れた場所だけ */
  background: var(--lemon);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-4deg);
}

.hero-rank__burst b {
  font-size: 1.7em;
  line-height: 1;
  color: var(--pink-deep);
}

.hero-rank__title {
  margin: 0;
  font-weight: 900;
}

.hero-rank__sub {
  display: inline-block;
  padding: 1px 18px;
  font-size: clamp(1rem, 4.4vw, 1.5rem);
  letter-spacing: 0.06em;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 999px;
}

/* 白いふちどり文字 */
.hero-rank__main {
  display: block;
  margin-top: 12px;
  font-size: clamp(2.5rem, 12vw, 5.2rem);
  letter-spacing: 0.03em;
  line-height: 1.12;
  color: var(--white);
  -webkit-text-stroke: 0.15em var(--ink);
  stroke-linejoin: round;
  paint-order: stroke fill;
  filter: drop-shadow(4px 4px 0 var(--ink));
}

.hero-rank__main b {
  display: inline-block;
  margin-left: 0.04em;
  font-size: 2em;
  line-height: 0.82;
  color: var(--lemon);
  -webkit-text-stroke-width: 0.1em;
  transform: rotate(7deg);
}

.hero-rank__mascot {
  position: absolute;
  right: -3%;
  bottom: -5%;
  width: 46%;
  max-width: 330px;
  height: auto;
}

/* ---------- 表彰台 ---------- */
.podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  margin-top: 54px;
  padding: 0 14px;
}

.podium__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-weight: 900;
  text-decoration: none;
}

.podium__col.rank-1 { order: 2; }
.podium__col.rank-2 { order: 1; }
.podium__col.rank-3 { order: 3; }

.podium__name {
  font-size: clamp(0.8rem, 3.5vw, 1.2rem);
  line-height: 1.3;
  word-break: keep-all;     /* 折り返すのは <wbr> を入れた場所だけ */
}

.podium__stat {
  margin: 2px 0 8px;
  font-size: clamp(0.68rem, 2.8vw, 0.9rem);
  line-height: 1.3;
}

.podium__stat b {
  font-size: 1.6em;
  color: var(--pink-deep);
}

/* トロフィーを持った井口さん（台のうしろに立つ） */
.podium__mascot {
  width: 104%;
  max-width: none;
  height: auto;
  margin: 0 0 -15% -6%;
}

/* 3位は左右反転した絵（内側を向く）なので、寄せる向きも逆 */
.podium__col.rank-3 .podium__mascot { margin-left: 5%; }

.podium__block {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--h);
  font-size: 1rem;
  line-height: 1;
  background: var(--rank-color);
  border: 3px solid var(--ink);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  transform-origin: bottom;
}

.podium__block b { font-size: 2.8rem; }

.podium__col.rank-1 .podium__block { --h: 150px; }
.podium__col.rank-2 .podium__block { --h: 108px; }
.podium__col.rank-3 .podium__block { --h: 80px; }

.podium__col:hover .podium__name { background: var(--white); }

/* 王冠 */
.crown {
  display: block;
  width: 44px;
  height: auto;
  margin: 0 auto 2px;
}

/* 表彰台の土台（4位） */
.podium-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  padding: 10px 16px;
  font-weight: 900;
  line-height: 1.4;
  text-decoration: none;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--ink);
}

.podium-base small {
  font-size: 0.8rem;
  font-weight: 700;
}

.podium-base:hover { background: var(--lemon); }

/* ---------- ふちどりした画像 ---------- */
.frame-img {
  display: block;
  width: 100%;
  border: 3px solid var(--ink);
  border-radius: 26px;
  box-shadow: 9px 9px 0 var(--pink);
}

/* ---------- 区切りの見出し ---------- */
.section-title {
  margin: 72px 0 26px;
  text-align: center;
  font-size: clamp(1.3rem, 5.4vw, 1.9rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.5;
}

.section-title span {
  display: inline-block;
  padding: 0 0.2em 0.42em;
  /* 手描きの波線 */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 12'%3E%3Cpath d='M1 7 Q6 1 12 6 T23 6 T34 6 T43 5' fill='none' stroke='%23ff7fa9' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left bottom / 44px 12px;
  transform: rotate(-1.6deg);
}

/* ---------- 比較早見表 ---------- */
.compare-box {
  padding: 4px 14px 8px;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 26px;
}

/* 画像のすぐ下に置くとき */
.compare-box--gap { margin-top: 30px; }

.compare {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
}

.compare caption {
  padding: 12px 0 2px;
  font-size: 1.05rem;
  font-weight: 900;
}

.compare th,
.compare td {
  padding: 14px 5px;
  vertical-align: middle;
  white-space: nowrap;      /* 改行は <br> を入れた場所だけ */
}

.compare thead th {
  padding: 12px 4px;
  font-size: 0.82rem;
  border-bottom: 3px solid var(--ink);
}

.compare tbody tr + tr { border-top: 3px dotted var(--pink-soft); }

.compare tbody th {
  width: 36%;
  text-align: left;
  font-weight: 900;
  white-space: normal;      /* 店名だけは幅に合わせて折り返す */
}

.compare b {
  font-size: 1.35em;
  font-weight: 900;
  color: var(--pink-deep);
}

.compare .grade {
  display: block;
  font-size: 1.35em;
  font-weight: 900;
}

.compare .stars {
  display: block;
  font-size: 0.68rem;
  letter-spacing: -0.05em;
  color: var(--star);
}

/* 業者名（丸い順位つき） */
.compare-name {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

a.compare-name:hover .compare-name__text { background: var(--lemon); }

.rank-chip {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1;
  background: var(--rank-color, var(--white));
  border: 2.5px solid var(--ink);
  border-radius: 50%;
}

.compare-link {
  display: inline-block;
  margin: 6px 0 0 38px;
  padding: 0 12px;
  font-size: 0.75rem;
  text-decoration: none;
  background: var(--mint);
  border: 2px solid var(--ink);
  border-radius: 999px;
}

/* ---------- 業者カード ---------- */
.shop {
  position: relative;
  margin-top: 58px;
  padding: 30px 34px 36px;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 30px;
  box-shadow: 9px 9px 0 var(--rank-color, var(--pink));
  scroll-margin-top: 40px;
}

/* 1位だけ別格：金の二重枠・大きいバッジ・大きい数字 */
.shop--best {
  margin-top: 84px;
  padding-top: 40px;
  box-shadow: 0 0 0 7px var(--gold), 0 0 0 10px var(--ink), 13px 13px 0 10px var(--pink);
}

.shop--best .rank-badge {
  top: -46px;
  left: -22px;
  width: 98px;
  height: 98px;
  font-size: 1.1rem;
}

.shop--best .rank-badge b { font-size: 3rem; }

.shop--best .rank-badge .crown {
  position: absolute;
  top: -27px;
  left: 50%;
  width: 52px;
  margin: 0 0 0 -26px;
}

.shop--best .shop-head { padding-left: 76px; }
.shop--best .shop-name { font-size: clamp(1.8rem, 7.4vw, 2.5rem); }
.shop--best .rating-grade { font-size: 3.3rem; }
.shop--best .stats b { font-size: 2.5rem; }

/* 右上の「THE BEST」シール */
.best-seal {
  position: absolute;
  top: -22px;
  right: 22px;
  padding: 2px 18px;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: var(--gold);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(5deg);
}

/* 左上の順位バッジ */
.rank-badge {
  position: absolute;
  top: -26px;
  left: -14px;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1;
  background: var(--rank-color, var(--white));
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 4px 0 var(--ink);
  transform: rotate(-8deg);
}

.rank-badge b { font-size: 2.2rem; }

.shop-head {
  min-height: 46px;
  padding-left: 60px;
}

/* ひとことキャッチ */
.shop-catch {
  display: inline-block;
  margin: 0 0 6px;
  padding: 1px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--pink-soft);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
}

.shop-name {
  margin: 0;
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.35;
}

.shop-name a,
.shop-name span {
  text-decoration: none;
  background: linear-gradient(transparent 66%, var(--rank-color, var(--pink-soft)) 66%);
}

/* バナー画像と総合評価を横並び */
.shop-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 14px;
  margin-top: 20px;
}

.shop-banner img {
  display: block;
  width: 100%;
  border: 2.5px solid var(--ink);
  border-radius: 16px;
}

.rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 8px;
  text-align: center;
  line-height: 1.2;
  border: 2.5px solid var(--ink);
  border-radius: 16px;
}

.rating-label {
  font-size: 0.8rem;
  font-weight: 700;
}

.rating-grade {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--pink-deep);
}

.rating-stars {
  font-size: 0.9rem;
  letter-spacing: -0.03em;
  color: var(--star);
}

/* 3つの数字 */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 0;
}

.stats div {
  display: flex;
  flex-direction: column;
  padding: 10px 6px 12px;
  text-align: center;
  background: var(--mint-soft);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
}

.stats dt {
  font-size: 0.78rem;
  font-weight: 700;
}

.stats dd {
  margin: auto 0;
  padding-top: 2px;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1.3;
}

.stats b {
  font-size: 1.9rem;
  color: var(--pink-deep);
}

/* カードの中の小見出し */
.shop h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.5;
}

.shop h4::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: var(--pink);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
}

.feature,
.scores,
.points,
.voices { margin-top: 30px; }

.feature p { margin: 0; }

/* 換金率の一覧画像 */
.rate-sheet {
  display: block;
  max-width: 440px;
  margin: 28px auto 0;
}

.rate-sheet img {
  display: block;
  width: 100%;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
}

/* 4項目の評価（棒グラフ） */
.scores ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scores li {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr) 5.4em;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 700;
}

.score-bar {
  height: 16px;
  overflow: hidden;
  background: var(--pink-soft);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
}

.score-bar i {
  display: block;
  width: var(--v);
  height: 100%;
  background: var(--pink);
}

.score-num {
  text-align: right;
  font-size: 0.8rem;
  white-space: nowrap;
}

.score-num b {
  font-size: 1.35rem;
  font-weight: 900;
}

/* チェックつきの箇条書き */
.check-list {
  margin: 0;
  padding: 14px 18px;
  list-style: none;
  font-weight: 700;
  background: var(--mint-soft);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
}

.check-list li {
  position: relative;
  padding-left: 1.9em;
}

.check-list li + li { margin-top: 6px; }

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 1.15em;
  height: 1.15em;
  background: var(--mint);
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.check-list li::after {
  content: "";
  position: absolute;
  left: 0.36em;
  top: 0.62em;
  width: 0.5em;
  height: 0.26em;
  border-left: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
  transform: rotate(-45deg);
}

/* 口コミ */
.voice {
  padding: 14px 18px 16px;
  font-size: 0.95rem;
  background: #fffbe6;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
}

.voice + .voice,
.voices details { margin-top: 12px; }

.voice p { margin: 0; }

.voice-who {
  display: inline-block;
  margin-bottom: 6px;
  padding: 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--mint);
  border: 2px solid var(--ink);
  border-radius: 999px;
}

.voice--f .voice-who { background: var(--pink-soft); }

.voice-title { font-weight: 900; }

/* 「口コミをもっと見る」 */
.voices summary {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 4px 24px;
  font-size: 0.9rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
  background: var(--white);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
}

.voices summary::-webkit-details-marker { display: none; }
.voices summary:hover { background: var(--lemon); }
.voices summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.voices details[open] summary { margin-bottom: 12px; }
.voices .when-open,
.voices details[open] .when-closed { display: none; }
.voices details[open] .when-open { display: inline; }

/* 準備中などのお知らせ */
.shop-note {
  margin: 30px 0 0;
  padding: 8px 16px;
  text-align: center;
  font-weight: 700;
  background: var(--lemon);
  border: 2.5px dashed var(--ink);
  border-radius: 16px;
}

/* ---------- 申込ボタン ---------- */
.cta {
  position: relative;
  display: block;
  margin-top: 36px;
  padding: 22px 16px 16px;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.4;
  text-decoration: none;
  word-break: keep-all;     /* 折り返すのは <wbr> を入れた場所だけ */
  overflow-wrap: anywhere;
  background: var(--pink);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 6px 0 var(--ink);
  transition: transform 0.12s, box-shadow 0.12s;
}

.cta:hover  { transform: translateY(3px); box-shadow: 0 3px 0 var(--ink); }
.cta:active { transform: translateY(6px); box-shadow: 0 0 0 var(--ink); }

/* ボタン左上の小さいふせん */
.cta small {
  position: absolute;
  top: -15px;
  left: 16px;
  padding: 1px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--lemon);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
}

/* ボタン下段の店名 */
.cta span {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  font-weight: 700;
}

/* LINE用（緑） */
.cta--line {
  color: var(--white);
  background: var(--line);
}

.cta--line small { background: var(--white); }

/* ---------- PRの囲み ---------- */
.pr-box {
  margin-top: 56px;
  padding: 22px 26px 26px;
  text-align: center;
  background: var(--mint-soft);
  border: 3px solid var(--ink);
  border-radius: 26px;
}

.pr-box h2 {
  margin: 0 0 16px;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.55;
}

.pr-box img {
  border: 2.5px solid var(--ink);
  border-radius: 16px;
}

.pr-box .label {
  margin: 18px 0 6px;
  background: var(--pink);
}

.pr-box p {
  margin: 4px 0 0;
  font-weight: 700;
}

/* ---------- LINE友達募集の囲み ---------- */
.line-box {
  margin-top: 56px;
  padding: 26px 28px 32px;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 30px;
  box-shadow: 9px 9px 0 var(--line);
}

.line-box h2 {
  margin: 0 0 10px;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 900;
}

.line-box p { margin: 0 0 12px; }

.line-box img {
  display: block;
  width: 100%;
  margin-top: 16px;
  border: 2.5px solid var(--ink);
  border-radius: 16px;
}


/* 7. あそび（傾き・はみ出し・手描き）
   本文・表・ボタンはまっすぐのまま、まわりの飾りだけを崩している。
   崩しすぎたと感じたら、この章の rotate( ) の数字を 0 に近づける。
   ========================================================================== */

body { overflow-x: clip; }   /* 傾けた飾りで横スクロールが出ないように */

/* ---------- 傾ける ---------- */
.update-date { transform: rotate(-1.5deg); }
.shop-catch { transform: rotate(-2deg); }
.cta small { transform: rotate(-3deg); }
.frame-img { transform: rotate(0.8deg); }
.pr-box img { transform: rotate(-1.5deg); }

/* ---------- 業者カード：うしろに色紙と特大の数字をのぞかせる ---------- */
.shop-wrap {
  position: relative;
  margin-top: 128px;        /* 上に特大の数字が立つぶん、間を広めに */
}

.shop-wrap > .shop { margin-top: 0; }

.shop-wrap--best { margin-top: 100px; }

/* カードの上からのぞく、斜めに重ねた色紙 */
.shop-wrap::before {
  content: "";
  position: absolute;
  top: -13px;
  left: -5px;
  right: -5px;
  height: 170px;
  background: var(--rank-color, var(--pink-soft));
  border: 3px solid var(--ink);
  border-radius: 30px;
  transform: rotate(-1.3deg);
}

.shop-wrap--alt::before { transform: rotate(1.3deg); }
.shop-wrap--best::before { content: none; }     /* 1位は金の二重枠があるので色紙なし */

/* カードの右上に立つ特大の順位（足もとだけカードのうしろに隠れる） */
.shop-ghost {
  position: absolute;
  top: -110px;
  right: 22px;
  font-size: 8.4rem;
  font-weight: 900;
  line-height: 1;
  color: var(--rank-color, var(--white));
  -webkit-text-stroke: 3px var(--ink);
  transform: rotate(9deg);
}

/* ---------- バナー：カードの左にはみ出して傾け、テープで留める ---------- */
.shop-banner {
  position: relative;
  display: block;
  margin-left: -48px;
  transform: rotate(-1.6deg);
}

.shop-wrap--alt .shop-banner { transform: rotate(1.4deg); }

.shop-banner img { box-shadow: 4px 4px 0 var(--ink); }

/* マスキングテープ */
.shop-banner::before,
.rate-sheet::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  z-index: 1;
  width: 92px;
  height: 26px;
  margin-left: -46px;
  background: rgba(127, 224, 200, 0.82);
  /* 両端のギザギザ */
  clip-path: polygon(0 0, 4% 18%, 0 36%, 4% 54%, 0 72%, 4% 100%, 96% 100%, 100% 82%, 96% 64%, 100% 46%, 96% 28%, 100% 0);
  transform: rotate(-4deg);
}

/* ---------- 総合評価：バナーに少し重なるハンコ ---------- */
.rating {
  position: relative;
  z-index: 1;
  margin-left: -26px;
  background: var(--white);
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(3deg);
}

/* ---------- 換金率の一覧：ピンで留めた紙 ---------- */
.rate-sheet {
  position: relative;
  transform: rotate(1.2deg);
}

.shop-wrap--alt .rate-sheet { transform: rotate(-1.2deg); }

.rate-sheet::before {
  background: rgba(255, 127, 169, 0.8);
  transform: rotate(3deg);
}

.rate-sheet img { box-shadow: 4px 4px 0 var(--ink); }

/* ---------- 手描きの丸で囲む ---------- */
.circled {
  position: relative;
  display: inline-block;
}

.circled::after {
  content: "";
  position: absolute;
  inset: -0.2em -0.34em -0.16em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' preserveAspectRatio='none'%3E%3Cpath d='M14 36 C6 16 38 4 68 5 C99 6 115 19 112 33 C109 49 79 56 51 55 C22 54 5 43 13 25 C18 14 33 9 50 7' fill='none' stroke='%233d2c4f' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform: rotate(-3deg);
  pointer-events: none;
}

/* ---------- 落書き（キラキラ・矢印） ---------- */
.doodle {
  position: absolute;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.doodle--fill { fill: var(--lemon); }

/* 大見出しのまわり */
.hero-rank .doodle--a { top: 16%; right: 9%; width: 40px; height: 40px; transform: rotate(12deg); }
.hero-rank .doodle--b { top: 40%; right: 44%; width: 26px; height: 26px; transform: rotate(-10deg); }
.hero-rank .doodle--c { bottom: 9%; left: 5%; width: 22px; height: 22px; }

/* 1位の店名の横 */
.shop-name .doodle {
  position: static;
  width: 30px;
  height: 30px;
  margin-left: 6px;
  vertical-align: 0.1em;
  transform: rotate(14deg);
}

/* ボタンを指す矢印 */
.cta-wrap { position: relative; }

.cta-wrap .doodle--arrow {
  top: -6px;
  right: 6px;
  width: 58px;
  height: 58px;
  transform: rotate(8deg);
}

/* ---------- LINEの囲み：うしろから井口さんがのぞく ---------- */
.line-wrap {
  position: relative;
  margin-top: 124px;
}

.line-wrap > .line-box {
  position: relative;
  margin-top: 0;
}

.line-wrap__mascot {
  position: absolute;
  top: -104px;
  right: 6px;
  width: 168px;
  height: auto;
  transform: rotate(4deg);
}

@media (max-width: 560px) {
  .shop-wrap { margin-top: 106px; }
  .shop-wrap--best { margin-top: 86px; }

  .shop-wrap::before {
    top: -11px;
    left: -4px;
    right: -4px;
    height: 150px;
    border-radius: 24px;
  }

  .shop-ghost {
    top: -86px;
    right: 14px;
    font-size: 6.6rem;
  }

  .shop-name .doodle { display: none; }

  .shop-banner { margin-left: -28px; }

  /* 総合評価はバナーの右下に重ねる */
  .rating {
    width: fit-content;
    margin: -22px -6px 0 auto;
    padding: 4px 14px;
    transform: rotate(-2.5deg);
  }

  .shop-banner::before,
  .rate-sheet::before {
    width: 76px;
    height: 22px;
    margin-left: -38px;
  }

  .hero-rank .doodle--a { width: 30px; height: 30px; top: 12%; right: 6%; }
  .hero-rank .doodle--b { display: none; }

  .cta-wrap .doodle--arrow {
    top: -14px;
    right: -2px;
    width: 46px;
    height: 46px;
  }

  .line-wrap { margin-top: 104px; }

  .line-wrap__mascot {
    top: -92px;
    right: 0;
    width: 136px;
  }
}


/* 8. トップページの部品
   ========================================================================== */

/* ---------- ページの枠（トップは幅いっぱいの帯を挟むので .page とは別） ---------- */
.top {
  flex: 1;
  padding: 0;               /* 最後の帯がそのままフッターにつながる */
}

/* 上下に余白がいるページ（ランキング） */
.top--page { padding: 30px 0 80px; }

.wrap {
  width: 100%;
  max-width: 740px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- トップの大見出し（画面の幅いっぱいのピンク） ----------
   文字の形（白いふちどり文字など）はランキングの大見出し .hero-rank__〜 を流用している */
.hero-top {
  --fig: clamp(190px, 33vw, 370px);   /* 井口さんの幅（高さはこの約1.64倍） */
  position: relative;
  padding-bottom: 62px;
  background: var(--pink);
}

/* うしろの放射状の光（井口さんのあたりが中心） */
.hero-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from 4deg at 72% 58%, rgba(255, 255, 255, 0.24) 0 9deg, transparent 9deg 18deg);
}

/* 下のふちをモコモコにする */
.hero-top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -15px;
  height: 16px;
  background: radial-gradient(circle at 15px 0, var(--pink) 15px, transparent 15.5px) repeat-x;
  background-size: 30px 16px;
}

.hero-top > .pr-note,
.hero-top__inner { position: relative; }

.hero-top .pr-note {
  z-index: 3;               /* 広告表記は何にも隠れないように一番上 */
  max-width: 1040px;
  margin-top: 0;
  padding-top: 10px;
}

/* 中身の幅。右側は井口さんの場所としてあけておく */
.hero-top__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 4px calc(var(--fig) + 50px) 0 20px;
}

/* 井口さん：大きく置いて、足もとをピンクの下にはみ出させる */
.hero-top__mascot {
  position: absolute;
  right: 20px;
  bottom: -104px;
  z-index: 1;
  width: var(--fig);
  height: auto;
}

/* 井口さんの吹き出し（頭の左上に、髪に少し重ねて置く） */
.hero-top__bubble {
  position: absolute;
  right: calc(var(--fig) * 0.66 + 20px);
  bottom: calc(var(--fig) * 1.643 - 104px - 26px);
  z-index: 2;
  width: min-content;       /* <wbr> の場所で2行にする */
  margin: 0;
  padding: 8px 20px 9px;
  font-size: clamp(0.85rem, 3.6vw, 1.15rem);
  font-weight: 900;
  line-height: 1.4;
  word-break: keep-all;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 26px;
  box-shadow: 4px 4px 0 var(--ink);
  rotate: -4deg;
}

/* 吹き出しのしっぽ（井口さんのほうを向く） */
.hero-top__bubble::after {
  content: "";
  position: absolute;
  right: 26px;
  bottom: -10px;
  width: 15px;
  height: 15px;
  background: var(--white);
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: skewX(28deg) rotate(45deg);
}

.hero-top .hero-rank__title { padding-top: 6px; }
.hero-top .hero-rank__sub { white-space: nowrap; }

.hero-top .hero-rank__main {
  font-size: clamp(2.3rem, 8.4vw, 5.6rem);
  word-break: keep-all;     /* 折り返すのは <wbr> と <br> を入れた場所だけ */
}

/* ---------- 数字のシール ---------- */
.hero-top__nums {
  display: flex;
  align-items: center;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.num {
  --s: clamp(92px, 27.4vw, 126px);   /* シールの直径 */
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.34em;
  width: var(--s);
  height: var(--s);
  font-size: calc(var(--s) / 7.6);
  font-weight: 900;
  line-height: 1;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 4px 5px 0 var(--ink);
  rotate: -3deg;
}

/* 内側の点線の輪 */
.num::before {
  content: "";
  position: absolute;
  inset: 5%;
  border: 2px dashed var(--ink);
  border-radius: 50%;
  opacity: 0.35;
}

.num + .num { margin-left: -6px; }

/* いちばん見せたい数字は大きく */
.num--big {
  --s: clamp(110px, 33vw, 158px);
  z-index: 1;
  background: var(--lemon);
  rotate: -7deg;
}

.num--mint {
  margin-top: 22px;
  background: var(--mint);
  rotate: 5deg;
}

.num__label {
  padding: 0.3em 0.75em;
  font-size: 0.8em;
  color: var(--white);
  background: var(--ink);
  border-radius: 999px;
}

.num__main {
  display: flex;
  align-items: baseline;
}

.num__main b {
  font-size: 2.9em;
  letter-spacing: -0.02em;
  color: var(--pink-deep);
}

.num--big .num__main b { font-size: 2.4em; }
.num__main small { font-size: 0.8em; }

.hero-top__note {
  margin: 10px 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
}

/* ---------- ランキングへのボタン ---------- */
.hero-top__go { margin: 16px 0 0; }

.btn--big {
  padding: 15px 52px;
  font-size: 1.25rem;
}

/* 「井口が徹底比較」と4つの観点 */
.hero-top__points {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 24px;
}

.hero-top__points p {
  margin: 0;
  padding: 0 0.2em;
  font-size: clamp(1rem, 4.2vw, 1.2rem);
  font-weight: 900;
  line-height: 1.5;
  background: linear-gradient(transparent 58%, var(--lemon) 58%, var(--lemon) 92%, transparent 92%);
}

.hero-top__points ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(0.8rem, 3.4vw, 0.95rem);
  font-weight: 900;
  line-height: 1.6;
}

.hero-top__points li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-top__points li span {
  padding: 0 12px;
  background: var(--white);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
}

.hero-top__points li:not(:last-child)::after {
  content: "×";
  color: var(--white);
}

/* ピンクの下のふちに貼ったふせん */
.hero-top__tag {
  position: absolute;
  left: max(20px, calc(50% - 500px));
  bottom: -24px;
  z-index: 2;
  width: fit-content;
  margin: 0;
  padding: 5px 26px 6px;
  font-size: clamp(1rem, 4.6vw, 1.4rem);
  font-weight: 900;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 5px 5px 0 var(--mint);
  rotate: -2deg;
}

.hero-top__tag b { color: var(--pink-deep); }

/* キラキラの位置 */
.hero-top .doodle--a { top: 12%; right: max(3%, calc(50% - 560px)); width: 46px; height: 46px; rotate: 12deg; }
.hero-top .doodle--b { top: 44%; left: max(2%, calc(50% - 620px)); width: 30px; height: 30px; rotate: -10deg; }
.hero-top .doodle--c { bottom: 16%; right: max(40%, calc(50% + 40px)); width: 24px; height: 24px; }

/* ヒーローのすぐ下の区切り（はみ出した足もとのぶん、間をあける） */
.hero-top + .wrap > .talk-head:first-child { margin-top: 112px; }

/* ---------- 折り返す場所を自分で決めたい見出しやボタンに付ける ----------
   これを付けると、<wbr> か <br> を入れた場所でしか折り返さなくなる */
.keep {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ---------- 見出しの上の小さいひとこと（＼ … ／） ---------- */
.section-lead {
  margin: 76px 0 0;
  text-align: center;
  font-size: clamp(0.9rem, 3.8vw, 1.1rem);
  font-weight: 900;
  line-height: 1.5;
}

.section-lead::before,
.section-lead::after { color: var(--pink-deep); }

.section-lead::before { content: "＼ "; }
.section-lead::after  { content: " ／"; }

.section-lead + .section-title { margin-top: 6px; }

/* 文章になっている長い見出し */
.section-title--long {
  font-size: clamp(1.1rem, 4.7vw, 1.55rem);
  letter-spacing: 0.03em;
  line-height: 1.7;
  word-break: keep-all;     /* 折り返すのは <wbr> を入れた場所だけ */
  overflow-wrap: anywhere;
}

.section-title mark {
  color: inherit;
  background: linear-gradient(transparent 58%, var(--pink) 58%, var(--pink) 92%, transparent 92%);
}

/* ---------- 見出し＋キャラ＋文章のカード ---------- */
.talk-head {
  display: flex;
  align-items: flex-end;
  gap: clamp(8px, 3vw, 24px);
  margin-top: 84px;
}

.talk-head--flip { flex-direction: row-reverse; }

.talk-head__text {
  flex: 1;
  min-width: 0;
  padding-bottom: clamp(20px, 5vw, 34px);
}

.talk-head .section-lead,
.talk-head .section-title { text-align: left; }

.talk-head .section-lead { margin-top: 0; }
.talk-head .section-title { margin-bottom: 0; }

/* カードの後ろからひょこっと顔を出す */
.talk-head__mascot {
  flex: none;
  width: clamp(112px, 31vw, 200px);
  height: auto;
  margin-bottom: -4.5%;
}

/* 全身の絵は細く。足もとをカードの後ろに隠す */
.talk-head__mascot--tall {
  width: clamp(92px, 24vw, 150px);
  margin-bottom: -13%;
}

.talk {
  position: relative;
  padding: 28px 34px 30px;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 30px;
  box-shadow: 9px 9px 0 var(--pink);
}

.talk--mint { box-shadow: 9px 9px 0 var(--mint); }

.talk p { margin: 0; }
.talk p + p { margin-top: 1em; }

/* 文中のマーカー */
.hl {
  font-weight: 700;
  background: linear-gradient(transparent 62%, var(--pink-soft) 62%);
}

.talk strong,
.memo strong {
  font-weight: 900;
  color: var(--pink-deep);
}

/* カードの下のボタン */
.next {
  margin: 34px 0 0;
  text-align: center;
}

/* ---------- テープで留めたメモ（現金化とは？） ---------- */
.memo {
  position: relative;
  margin-top: 96px;
  padding: 36px 34px 30px;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 10px 30px 30px 30px;
  box-shadow: 9px 9px 0 var(--mint);
  transform: rotate(-0.7deg);
}

.memo::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  width: 128px;
  height: 30px;
  margin-left: -64px;
  background: rgba(255, 127, 169, 0.8);
  clip-path: polygon(0 0, 3% 18%, 0 36%, 3% 54%, 0 72%, 3% 100%, 97% 100%, 100% 82%, 97% 64%, 100% 46%, 97% 28%, 100% 0);
  transform: rotate(-3deg);
}

.memo .section-lead { margin-top: 0; }
.memo .section-title { margin: 4px 0 18px; }
.memo p { margin: 0; }

/* ---------- LINEのバナー画像 ---------- */
.line-banner {
  display: block;
  margin-top: 54px;
}

.line-banner img {
  display: block;
  width: 100%;
  transform: rotate(-1deg);
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 7px 7px 0 var(--line);
}

/* ---------- 幅いっぱいの色の帯 ----------
   <section class="band"> … がミント（ランキング）。
   band--stripe / band--ink / band--grid を足すと、色とふちの形が変わる。 */
.band {
  --band: var(--mint-soft);   /* 帯の色（上下のモコモコも同じ色になる） */
  position: relative;
  margin-top: 104px;
  padding: 54px 0 74px;
  background-color: var(--band);
}

/* 上下のふちをモコモコにする */
.band::before,
.band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 16px;
  background-repeat: repeat-x;
  background-size: 30px 16px;
}

.band::before {
  top: -15px;
  background-image: radial-gradient(circle at 15px 16px, var(--band) 15px, transparent 15.5px);
}

.band::after {
  bottom: -15px;
  background-image: radial-gradient(circle at 15px 0, var(--band) 15px, transparent 15.5px);
}

/* ピンクのしま模様。上下のふちはギザギザ（3ステップ） */
.band--stripe {
  --z: 14px;                  /* ギザギザの大きさ */
  padding: 78px 0 94px;
  background: repeating-linear-gradient(135deg, var(--pink-soft) 0 24px, #ffe6ee 24px 48px);
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--z) * 2) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--z) * 2) 51% repeat-x;
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--z) * 2) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--z) * 2) 51% repeat-x;
}

.band--stripe::before,
.band--stripe::after { content: none; }

/* しま模様の上では、見出しの波線を濃いピンクに */
.band--stripe .section-title span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 12'%3E%3Cpath d='M1 7 Q6 1 12 6 T23 6 T34 6 T43 5' fill='none' stroke='%23e0457b' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 濃い色の帯。上下をななめに切る（ブログ） */
.band--ink {
  --slant: max(20px, 3.4vw);  /* ななめの大きさ */
  padding: calc(var(--slant) + 66px) 0 calc(var(--slant) + 74px);
  background: var(--ink) radial-gradient(rgba(255, 255, 255, 0.12) 3px, transparent 3.5px) 0 0 / 30px 30px;
  clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}

/* すみっこのキラキラ */
.band--ink::before,
.band--ink::after {
  width: 44px;
  height: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M17 3c1 8 3 11 13 14-10 2-12 6-13 14-1-8-4-12-13-14 9-2 12-6 13-14Z' fill='%23fff1a8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.band--ink::before {
  top: calc(var(--slant) + 14px);
  left: auto;
  right: max(4%, calc(50% - 450px));
  rotate: 12deg;
}

.band--ink::after {
  bottom: calc(var(--slant) + 20px);
  left: max(3%, calc(50% - 440px));
  right: auto;
  width: 28px;
  height: 28px;
  rotate: -10deg;
}

.band--ink .feed { margin-top: 0; }

/* 方眼紙の帯。下はそのままフッターにつながる（LINEとPR） */
.band--grid {
  --band: var(--white);
  margin-bottom: -16px;       /* フッターとのすき間をなくす */
  padding: 62px 0 96px;
  background-image:
    linear-gradient(var(--mint-soft) 2px, transparent 2px),
    linear-gradient(90deg, var(--mint-soft) 2px, transparent 2px);
  background-size: 28px 28px;
  background-position: center top;
}

.band--grid::after { content: none; }
.band--grid .wrap > :first-child { margin-top: 0; }

/* ----- ここからランキングページの帯（トップとは柄とふちの形を変えている） ----- */

.band .wrap > .section-title:first-child { margin-top: 0; }

/* ミントに白の水玉。上下のふちは波（比較早見表） */
.band--polka {
  background-image:
    radial-gradient(var(--white) 5px, transparent 5.5px),
    radial-gradient(var(--white) 5px, transparent 5.5px);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
}

/* 波の色は帯と同じミント（#d9f6ee）を直接書いている */
.band--polka::before,
.band--polka::after {
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 14'%3E%3Cpath d='M0 14V7Q14-5 28 7T56 7V14Z' fill='%23d9f6ee'/%3E%3C/svg%3E") repeat-x 0 0 / 56px 14px;
}

.band--polka::before { top: -13px; }

.band--polka::after {
  bottom: -13px;
  rotate: 180deg;
}

/* うしろから光が差す。上下は大きな弧（1位） */
.band--burst {
  padding: 88px 0 116px;
  background: repeating-conic-gradient(from -6deg at 50% 300px, var(--white) 0 12deg, #ffe6ee 12deg 24deg);
  border-radius: 50% / 64px;
}

.band--burst::before,
.band--burst::after { content: none; }

.band--burst .section-title span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 12'%3E%3Cpath d='M1 7 Q6 1 12 6 T23 6 T34 6 T43 5' fill='none' stroke='%23e0457b' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 黄色のギンガムチェック。上下にステッチ（3位） */
.band--gingham {
  padding: 40px 0 104px;
  background-color: #fffdf2;
  background-image:
    linear-gradient(90deg, rgba(255, 201, 60, 0.3) 50%, transparent 50%),
    linear-gradient(rgba(255, 201, 60, 0.3) 50%, transparent 50%);
  background-size: 44px 44px;
  background-position: center top;
}

.band--gingham::before,
.band--gingham::after {
  height: 0;
  background: none;
  border-top: 3px dashed var(--ink);
  opacity: 0.4;
}

.band--gingham::before { top: 11px; }
.band--gingham::after { bottom: 11px; }

/* うす紫に白のななめ格子。上下は切符のように丸く切り欠く（買取業者） */
.band--ticket {
  --r: 13px;                  /* 切り欠きの半径 */
  padding: 88px 0 104px;
  background-color: var(--lilac-soft);
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.65) 0 2px, transparent 2px 28px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.65) 0 2px, transparent 2px 28px);
  -webkit-mask:
    radial-gradient(circle var(--r) at 50% 0, #0000 96%, #000) top / calc(var(--r) * 3.2) 51% repeat-x,
    radial-gradient(circle var(--r) at 50% 100%, #0000 96%, #000) bottom / calc(var(--r) * 3.2) 51% repeat-x;
  mask:
    radial-gradient(circle var(--r) at 50% 0, #0000 96%, #000) top / calc(var(--r) * 3.2) 51% repeat-x,
    radial-gradient(circle var(--r) at 50% 100%, #0000 96%, #000) bottom / calc(var(--r) * 3.2) 51% repeat-x;
}

.band--ticket::before,
.band--ticket::after { content: none; }

.band .section-lead:first-child { margin-top: 0; }
.band .section-title { margin-bottom: 0; }
.band .compare-box { margin-top: 34px; }
.band .cta-wrap { margin-top: 52px; }

/* 帯の最後の、買取業者への案内 */
.band__more {
  margin: 30px 0 0;
  text-align: center;
  font-weight: 700;
}

.band__more a,
.pr-box p a:not(.btn) {
  text-decoration: underline wavy var(--pink);
  text-underline-offset: 5px;
}

.band__more a:hover,
.pr-box p a:not(.btn):hover { background: var(--white); }

.pr-box .next { margin-top: 20px; }

/* ---------- 現金化の流れ（3ステップ） ---------- */
.steps {
  display: grid;
  gap: 46px;
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  grid-template-areas: "img title" "img text";
  align-content: center;
  align-items: start;
  gap: 8px 26px;
  padding: 32px 30px 26px;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 28px;
  box-shadow: 8px 8px 0 var(--pink);
}

/* 2つ目はキャラを右に */
.step:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) 150px;
  grid-template-areas: "title img" "text img";
}

/* 次のステップへの矢印 */
.step + .step::before {
  content: "";
  position: absolute;
  top: -35px;
  left: 50%;
  width: 34px;
  height: 20px;
  margin-left: -17px;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.step__no {
  position: absolute;
  top: -21px;
  left: 22px;
  padding: 0 18px;
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 2.1;
  background: var(--pink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  transform: rotate(-3deg);
}

.step__no b,
.check__no b {
  margin-left: 0.25em;
  font-size: 1.5em;
  line-height: 1;
  vertical-align: -0.06em;
}

.step__img {
  grid-area: img;
  align-self: center;
  width: 100%;
  max-height: 200px;
  object-fit: contain;
}

.step h3,
.check h3 {
  grid-area: title;
  margin: 0;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.5;
}

.step__text { grid-area: text; }

.step__text p,
.check p { margin: 0; }

.step mark {
  font-weight: 700;
  color: var(--pink-deep);
  background: linear-gradient(transparent 62%, var(--lemon) 62%);
}

/* ※の注意書き */
.note {
  margin-top: 8px !important;
  padding-left: 1em;
  text-indent: -1em;
  font-size: 0.82rem;
  line-height: 1.6;
}

/* ---------- 優良業者の選び方（1枚のカードに3つ並べる） ---------- */
.checks {
  margin: 44px 0 0;
  padding: 8px 32px;
  list-style: none;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 28px;
  box-shadow: 8px 8px 0 var(--mint);
}

.check {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 124px;
  grid-template-areas: "title img" "text img";
  align-content: center;
  gap: 10px 26px;
  padding: 28px 0 26px;
}

.check + .check { border-top: 3px dotted var(--mint); }

/* まん中はキャラを左に */
.check:nth-child(even) {
  grid-template-columns: 124px minmax(0, 1fr);
  grid-template-areas: "img title" "img text";
}

.check h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.check__no {
  flex: none;
  padding: 0 14px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  line-height: 2;
  background: var(--mint);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  transform: rotate(-3deg);
}

.check__img {
  grid-area: img;
  align-self: center;
  width: 100%;
  max-height: 170px;
  object-fit: contain;
}

.check__text { grid-area: text; }

.check mark {
  font-weight: 700;
  color: var(--mint-deep);
  background: linear-gradient(transparent 62%, var(--lemon) 62%);
}

/* ---------- トップのLINEの囲み（画像なしで、箇条書きとボタンだけ） ---------- */
.line-box--text .check-list { margin-bottom: 14px; }
.line-box--text .check-list + p { text-align: center; font-weight: 700; }
.line-box--text .cta { margin-top: 30px; }


/* ---------- ランキング根拠ページの部品 ---------- */

/* タイトルの下のひとこと */
.page-lead {
  margin: 0 0 22px;
  font-weight: 700;
}

.page-lead a {
  text-decoration: underline wavy var(--pink);
  text-underline-offset: 5px;
}

.page-lead a:hover { background: var(--white); }

/* もくじ */
.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 54px;
  padding: 0;
  list-style: none;
}

.toc a {
  display: block;
  padding: 2px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--white);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
}

.toc a::before {
  content: "▼ ";
  font-size: 0.7em;
  color: var(--pink-deep);
}

.toc a:hover { background: var(--mint); }

.section-title--first { margin-top: 0; }

/* 帯の中の説明文 */
.band-text {
  margin: 20px 0 0;
  font-weight: 700;
}

.band-text--small {
  margin-top: 16px;
  font-size: 0.85rem;
}

/* 小さい見出し */
.sub-title {
  margin: 56px 0 0;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.5;
}

.sub-title--first { margin-top: 30px; }
.sub-title + .kari,
.sub-title + .check-list { margin-top: 20px; }

/* 評価項目のカード（2列） */
.crit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 24px;
  margin-top: 44px;
}

.crit-grid > .kari { display: grid; }   /* 仮の囲みが入っていても、カードの高さをそろえる */

.crit {
  position: relative;
  padding: 30px 22px 24px;
  font-size: 0.95rem;
  line-height: 1.75;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: 6px 6px 0 var(--pink);
}

.crit h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.5;
}

.crit p { margin: 0; }

.mini-label {
  width: fit-content;
  margin: 14px 0 6px !important;
  padding: 0 12px;
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1.8;
  background: var(--lemon);
  border: 2px solid var(--ink);
  border-radius: 999px;
}

/* ピンクの点の箇条書き */
.dots {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dots li {
  position: relative;
  padding-left: 1.3em;
}

.dots li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.68em;
  width: 8px;
  height: 8px;
  background: var(--pink);
  border-radius: 50%;
}

/* 3ステップのカードを、絵なし（文字だけ）で使う */
.steps > .step.step--plain {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "text";
}

/* まとめのひとこと */
.result-note {
  margin: 36px 0 0;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.7;
}

.result-note b {
  font-size: 1.4em;
  color: var(--pink-deep);
}

/* 「掲載しない」のリスト（チェックのかわりに×） */
.check-list--ng { background: var(--white); }
.check-list--ng li::before { background: var(--pink); }

.check-list--ng li::after {
  left: 0.2em;
  top: 0.52em;
  width: 0.75em;
  height: 0.75em;
  border: 0;
  background:
    linear-gradient(45deg, transparent 42%, var(--ink) 42% 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, var(--ink) 42% 58%, transparent 58%);
  transform: none;
}

/* 更新履歴 */
.history {
  margin: 0;
  padding: 0;
  list-style: none;
}

.history li {
  display: grid;
  grid-template-columns: 9.5em minmax(0, 1fr);
  gap: 4px 16px;
  padding: 18px 0;
}

.history li + li { border-top: 3px dotted var(--pink-soft); }
.history time { font-weight: 900; }

.cta-wrap--gap { margin-top: 70px; }

/* ---------- 仮の文章の目印 ----------
   class="kari" で囲んだ部分に、ピンクの点線と「仮の文章」のふだが付く。
   本当の内容に直したら、囲んでいるタグを消す（このCSSはそのままでいい）。 */
.kari {
  position: relative;
  border-radius: 10px;
  outline: 3px dashed var(--pink-deep);
  outline-offset: 7px;
}

.kari::before {
  content: "仮の文章";
  position: absolute;
  top: -20px;
  right: 6px;
  z-index: 3;
  padding: 0 10px;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.9;
  color: var(--white);
  background: var(--pink-deep);
  border-radius: 999px;
}

/* 文の途中に使うとき */
.kari--inline {
  outline: 0;
  border-bottom: 3px dashed var(--pink-deep);
  background: linear-gradient(transparent 50%, var(--pink-soft) 50%);
}

.kari--inline::before {
  content: "仮";
  position: static;
  margin-right: 4px;
  padding: 1px 7px;
  font-size: 0.7em;
  vertical-align: 0.15em;
}


/* 9. ブログ新着カード
   見た目の土台は /blog-feed/blog-feed.css。
   ここでは <div class="feed"> の中に置いたときの、色・並べ方・サイズだけ上書きしている。
   ========================================================================== */
.feed {
  margin-top: 44px;
  padding: 26px 28px 30px;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 30px;
  box-shadow: 9px 9px 0 var(--mint);
}

.feed .wpfeed {
  --accent: var(--pink-deep);
  --accent-soft: var(--pink-soft);
  --text: var(--ink);
  --muted: #6b5a7d;
  --line: var(--pink-soft);
  display: block;
  max-width: none;
  padding: 0;
  font-family: inherit;
}

.feed .wpfeed__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}

.feed .wpfeed__head h2 { font-size: 2.2rem; }
.feed .wpfeed__head p { margin: 0; }
.feed .wpfeed__more { margin-left: auto; }

/* 横スクロールをやめて、3枚を横に並べる */
.feed .wpfeed__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 20px;
  overflow: visible;
  padding: 26px 0 0;
  cursor: auto;
  scroll-snap-type: none;
}

.feed .wpcard:nth-child(n+4),   /* 4枚目以降が出力されても3枚だけ見せる */
.feed .wpfeed__tabs,
.feed .wpfeed__bar { display: none; }

/* トップページは6枚（3枚×2段）見せる */
.feed--six { margin-top: 84px; }
.feed--six .wpcard:nth-child(n+4) { display: block; }
.feed--six .wpcard:nth-child(n+7) { display: none; }

.feed .wpcard__imgwrap {
  border: 2.5px solid var(--ink);
  border-radius: 14px;
}

/* 日付は「月.日」だけの小さいバッジに */
.feed .wpcard__date {
  top: -12px;
  left: 8px;
  padding: 4px 10px 3px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: none;
}

.feed .wpcard__y,
.feed .wpcard__w { display: none; }

.feed .wpcard__md { font-size: 1rem; }

/* カテゴリ色はカード側に直接書かれているので !important で揃える */
.feed .wpcard__cat {
  margin-top: 12px;
  padding: 1px 12px;
  font-size: 0.7rem;
  background: var(--ink) !important;
}

.feed .wpcard__title {
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.feed .wpcard__title::before { margin-top: 0.5em; }

.feed .wpcard__title span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: normal;
}

.feed .wpcard__excerpt {
  margin-top: 8px;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}


/* 10. フッター
   ========================================================================== */
.site-footer {
  position: relative;
  margin-top: 16px;
  padding: 34px 20px 22px;
  text-align: center;
  background: var(--pink);
}

/* 上のふちをモコモコにする */
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -15px;
  height: 16px;
  background: radial-gradient(circle at 15px 16px, var(--pink) 15px, transparent 15.5px) repeat-x;
  background-size: 30px 16px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin-bottom: 18px;
}

.footer-nav a {
  padding: 4px 18px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--white);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
}

.footer-nav a:hover,
.footer-nav a[aria-current="page"] { background: var(--lemon); }   /* 今いるページはレモン色 */

/* 2段目：サイト情報（文字だけの小さいリンク） */
.footer-sub {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 24px;
  margin-bottom: 20px;
  font-size: 0.82rem;
  font-weight: 700;
}

.footer-sub a { text-underline-offset: 4px; }

.footer-sub a:hover,
.footer-sub a[aria-current="page"] { text-decoration: none; }

.footer-sub a[aria-current="page"]::before { content: "▸ "; }   /* 今いるページの目印 */

.copy {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
}


/* 11. 動き（ページを開いたときに1回だけ）
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .bubble,
  .page-title + .card { animation: pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  .mascot { animation: peek 0.6s 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  .policy { animation: pop-soft 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

  /* トップの大見出し：題名 → 井口さん → 吹き出し → シール の順に出る */
  .hero-top__mascot { animation: rise 0.6s 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  .hero-top__bubble { animation: stick 0.45s 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  .num { animation: stick 0.5s 0.55s cubic-bezier(0.34, 1.7, 0.64, 1) both; }
  .num:nth-child(2) { animation-delay: 0.68s; }
  .num:nth-child(3) { animation-delay: 0.81s; }

  /* ページ内リンク（#〜）はするっと移動する */
  html { scroll-behavior: smooth; }
}

[id] { scroll-margin-top: 24px; }   /* ページ内リンクで移動したとき、上に少しすき間をあける */

@keyframes pop {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* ランキングの大見出し：ふせん → 文字 → 「4」 → キャラ の順に出る */
@media (prefers-reduced-motion: no-preference) {
  .hero-rank__burst { animation: sticker 0.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  .hero-rank__title { animation: pop 0.55s 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  .hero-rank__main b { animation: bounce-in 0.7s 0.6s cubic-bezier(0.34, 1.8, 0.64, 1) both; }
  .hero-rank__mascot { animation: peek 0.6s 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

  /* 画面に入ったときの動き（<html> に js が付いているときだけ。付けるのはページ内のスクリプト） */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
  }

  .js [data-reveal].is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.45s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* 評価の棒が伸びる */
  .js .score-bar i {
    width: 0;
    transition: width 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }

  .js .scores.is-in .score-bar i { width: var(--v); }

  /* 表彰台がせり上がる（3位 → 2位 → 1位） */
  .js .podium__block {
    transform: scaleY(0);
    transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1);
  }

  .js .podium.is-in .podium__block { transform: none; }
  .js .podium .rank-2 .podium__block { transition-delay: 0.18s; }
  .js .podium .rank-1 .podium__block { transition-delay: 0.36s; }

  /* 台が上がったあと、井口さんがぴょこっと出る */
  .js .podium__mascot {
    opacity: 0;
    transform: translateY(35%);
    transition: opacity 0.3s 0.5s, transform 0.5s 0.5s cubic-bezier(0.34, 1.7, 0.64, 1);
  }

  .js .podium.is-in .podium__mascot {
    opacity: 1;
    transform: none;
  }

  .js .podium .rank-2 .podium__mascot { transition-delay: 0.68s; }
  .js .podium .rank-1 .podium__mascot { transition-delay: 0.86s; }
}

/* ぺたっと貼る（傾きは rotate で付けているので、ここでは大きさだけ動かす） */
@keyframes stick {
  from { opacity: 0; scale: 0.3; }
  to   { opacity: 1; scale: 1; }
}

/* 下からせり上がる */
@keyframes rise {
  from { opacity: 0; translate: 0 12%; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes sticker {
  from { opacity: 0; transform: rotate(-14deg) scale(0.5); }
  to   { opacity: 1; transform: rotate(-4deg); }
}

@keyframes bounce-in {
  from { opacity: 0; transform: rotate(-20deg) scale(0.2); }
  to   { opacity: 1; transform: rotate(7deg); }
}

/* 縦に長いカード用（動きを控えめに） */
@keyframes pop-soft {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@keyframes peek {
  from { opacity: 0; transform: translateY(40%); }
  to   { opacity: 1; transform: none; }
}


/* 12. スマホ
   ========================================================================== */

/* ブログ新着カード：画像を左、文字を右にして縦に3つ並べる */
@media (max-width: 600px) {
  .feed {
    margin-top: 36px;
    padding: 20px 18px 24px;
    border-radius: 24px;
    box-shadow: 6px 6px 0 var(--mint);
  }

  .feed .wpfeed__head h2 { font-size: 1.8rem; }

  .feed .wpfeed__track {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .feed .wpcard__link {
    display: grid;
    grid-template-columns: 40% minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
  }

  .feed .wpcard__thumb { grid-row: 1 / span 2; }

  .feed .wpcard__cat {
    justify-self: start;
    margin-top: 0;
  }

  .feed .wpcard__title {
    margin-top: 6px;
    padding-bottom: 0;
    border-bottom: 0;
    font-size: 0.85rem;
  }

  .feed .wpcard__excerpt { display: none; }
}

@media (max-width: 560px) {
  /* ヘッダーは「サイト名」「メニュー」の2段にして中央にそろえる */
  .site-header {
    justify-content: center;
    padding: 10px 16px 12px;
  }

  .site-logo { font-size: 1rem; }
  .site-logo::before { width: 38px; height: 38px; }

  .site-nav a {
    padding: 1px 16px;
    font-size: 0.82rem;
  }

  .page { padding: 40px 16px 64px; }

  .page-title { margin-bottom: 34px; }

  .card,
  .pr,
  .notice { margin-top: 28px; }

  .card {
    padding: 6px 20px;
    border-radius: 24px;
    box-shadow: 6px 6px 0 var(--pink);
  }

  .bubble {
    padding: 18px 20px 22px;
    border-radius: 24px;
  }

  .pr { padding: 16px 18px 18px; }

  .notice { padding: 18px 18px 22px; }

  /* 表は「項目名の下に内容」の縦並びに */
  .info th,
  .info td { display: block; width: auto; }

  .info th { padding: 18px 0 6px; }
  .info td { padding: 0 0 18px; }

  .policy {
    padding: 22px 20px 4px;
    border-radius: 24px;
    box-shadow: 6px 6px 0 var(--pink);
  }

  .policy-lead { padding-bottom: 22px; }

  .policy section { padding: 20px 0 22px; }

  .policy h2 { font-size: 1.05rem; }

  /* ランキングの部品 */
  .pr-note { padding: 0 16px; }

  .hero-rank {
    min-height: 0;
    padding: 24px 18px 22px;
    border-radius: 26px;
    box-shadow: 6px 6px 0 var(--ink);
  }

  .hero-rank__burst { margin-bottom: 12px; }

  .hero-rank__main { filter: drop-shadow(3px 3px 0 var(--ink)); }

  .hero-rank__mascot {
    right: -6%;
    width: 50%;
  }

  .podium {
    gap: 6px;
    margin-top: 44px;
    padding: 0 8px;
  }

  .podium__block b { font-size: 2.2rem; }
  .podium__col.rank-1 .podium__block { --h: 120px; }
  .podium__col.rank-2 .podium__block { --h: 86px; }
  .podium__col.rank-3 .podium__block { --h: 62px; }

  .crown { width: 36px; }

  .podium-base { box-shadow: 5px 5px 0 var(--ink); }

  .frame-img {
    border-radius: 22px;
    box-shadow: 6px 6px 0 var(--pink);
  }

  .section-title { margin: 56px 0 22px; }

  .compare-box {
    padding: 2px 8px 6px;
    border-radius: 22px;
  }

  .compare { font-size: 0.78rem; }

  /* 比較表：店名を1行目に、4つの数字をその下に並べる */
  .compare,
  .compare thead,
  .compare tbody { display: block; }

  .compare caption { display: block; }

  .compare tr {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
  }

  .compare th,
  .compare td { padding: 4px 2px 14px; }

  .compare thead th {
    padding: 10px 2px;
    font-size: 0.7rem;
  }

  .compare thead th:first-child { display: none; }   /* 「業者名」の見出しは省く */

  .compare tbody th {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    width: auto;
    padding: 12px 4px 2px;
    font-size: 0.95rem;
  }

  .rank-chip {
    width: 26px;
    height: 26px;
    font-size: 0.85rem;
  }

  .compare-link { margin: 0; }

  .shop {
    margin-top: 50px;
    padding: 26px 18px 30px;
    border-radius: 24px;
    box-shadow: 6px 6px 0 var(--rank-color, var(--pink));
  }

  .rank-badge {
    top: -22px;
    left: -8px;
    width: 62px;
    height: 62px;
    font-size: 0.8rem;
  }

  .rank-badge b { font-size: 1.8rem; }

  .shop-head { padding-left: 50px; }

  .shop--best {
    margin-top: 72px;
    padding-top: 34px;
    box-shadow: 0 0 0 5px var(--gold), 0 0 0 8px var(--ink), 8px 8px 0 8px var(--pink);
  }

  .shop--best .rank-badge {
    top: -40px;
    left: -12px;
    width: 80px;
    height: 80px;
    font-size: 0.95rem;
  }

  .shop--best .rank-badge b { font-size: 2.4rem; }

  .shop--best .rank-badge .crown {
    top: -23px;
    width: 44px;
    margin-left: -22px;
  }

  .shop--best .shop-head { padding-left: 64px; }
  .shop--best .rating-grade { font-size: 2.3rem; }
  .shop--best .stats b { font-size: 1.8rem; }

  .best-seal {
    top: -18px;
    right: 14px;
    font-size: 0.8rem;
  }

  /* 総合評価はバナーの下に横長で */
  .shop-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .rating {
    flex-direction: row;
    gap: 12px;
    padding: 4px 12px;
  }

  .rating-grade { font-size: 1.9rem; }

  .stats { gap: 6px; }

  .stats div {
    padding: 8px 2px 10px;
    border-radius: 14px;
  }

  .stats dt { font-size: 0.68rem; }
  .stats dd { font-size: 0.8rem; }
  .stats b { font-size: 1.5rem; }

  .scores li {
    grid-template-columns: 6.3em minmax(0, 1fr) 5.9em;
    gap: 8px;
    font-size: 0.82rem;
  }

  .score-num { font-size: 0.72rem; }
  .score-num b { font-size: 1.2rem; }

  .check-list { padding: 12px 14px; }

  .voice { padding: 12px 14px 14px; }

  .cta {
    padding: 20px 10px 14px;
    font-size: 1rem;
  }

  .pr-box {
    margin-top: 48px;
    padding: 18px 16px 22px;
    border-radius: 22px;
  }

  .line-box {
    margin-top: 48px;
    padding: 22px 18px 28px;
    border-radius: 24px;
    box-shadow: 6px 6px 0 var(--line);
  }

  /* トップページの部品 */
  .wrap { padding: 0 16px; }

  /* 大見出し：吹き出し → 小見出し → 3行の題名。井口さんはその右に、同じ高さで立つ */
  .hero-top { padding-bottom: 52px; }
  .hero-top .pr-note { padding-top: 8px; }
  .hero-top__inner { padding: 12px 16px 0; }

  .hero-top__head { position: relative; }

  .hero-top__bubble {
    position: relative;
    right: 0;
    bottom: 0;
    width: fit-content;
    margin: 0 0 14px 2px;
    padding: 4px 14px 5px;
    white-space: nowrap;      /* スマホは1行 */
    border-radius: 999px;
    box-shadow: 3px 3px 0 var(--ink);
  }

  .hero-top__bubble::after {
    right: 18px;
    bottom: -9px;
    width: 13px;
    height: 13px;
  }

  .hero-top .hero-rank__title { padding-top: 0; }

  .hero-top .hero-rank__sub {
    padding: 1px 14px;
    font-size: clamp(0.8rem, 3.9vw, 1rem);
  }

  .hero-top .hero-rank__main {
    max-width: 58%;
    font-size: clamp(2.3rem, 11.4vw, 3.6rem);
  }

  .hero-top__mascot {
    right: -8px;
    bottom: -30px;
    width: auto;
    height: calc(100% + 30px);
  }

  .hero-top__nums { margin-top: 22px; }
  .num { box-shadow: 3px 4px 0 var(--ink); }
  .num--mint { margin-top: 14px; }

  .hero-top__note { font-size: 0.66rem; }

  .hero-top__go { margin-top: 18px; }

  .btn--big {
    display: block;
    padding: 14px 10px;
    text-align: center;
    font-size: 1.15rem;
  }

  .hero-top__points { margin-top: 22px; }
  .hero-top__points li span { padding: 0 10px; }

  .hero-top__tag {
    left: 50%;
    translate: -50% 0;
    box-shadow: 4px 4px 0 var(--mint);
  }

  .hero-top .doodle--a,
  .hero-top .doodle--b { display: none; }
  .hero-top .doodle--c { bottom: 5%; right: 6%; }

  .hero-top + .wrap > .talk-head:first-child { margin-top: 84px; }

  .section-lead { margin-top: 60px; }

  .talk-head { margin-top: 64px; }

  .talk {
    padding: 22px 20px 24px;
    border-radius: 24px;
    box-shadow: 6px 6px 0 var(--pink);
  }

  .talk--mint { box-shadow: 6px 6px 0 var(--mint); }

  .memo {
    margin-top: 80px;
    padding: 32px 20px 24px;
    border-radius: 8px 24px 24px 24px;
    box-shadow: 6px 6px 0 var(--mint);
  }

  .line-banner { margin-top: 46px; }

  .line-banner img {
    border-radius: 12px;
    box-shadow: 5px 5px 0 var(--line);
  }

  .band {
    margin-top: 84px;
    padding: 46px 0 62px;
  }

  .band--stripe {
    --z: 11px;
    padding: 62px 0 76px;
  }

  .band--ink { padding: calc(var(--slant) + 46px) 0 calc(var(--slant) + 54px); }
  .band--ink::before { width: 32px; height: 32px; top: calc(var(--slant) + 6px); }
  .band--ink::after { bottom: calc(var(--slant) + 12px); }

  .band--grid {
    padding: 50px 0 80px;
    background-size: 24px 24px;
  }

  .top--page { padding: 30px 0 64px; }

  /* ランキング根拠ページ */
  .toc { margin-bottom: 44px; }

  .crit-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    margin-top: 40px;
  }

  .crit { padding: 30px 18px 22px; }

  .history li {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px 0;
  }

  .kari { outline-offset: 5px; }

  .band--polka { background-size: 34px 34px; background-position: 0 0, 17px 17px; }

  .band--burst {
    padding: 66px 0 90px;
    background: repeating-conic-gradient(from -6deg at 50% 240px, var(--white) 0 12deg, #ffe6ee 12deg 24deg);
    border-radius: 50% / 38px;
  }

  .band--gingham {
    padding: 34px 0 84px;
    background-size: 36px 36px;
  }

  .band--ticket {
    --r: 10px;
    padding: 70px 0 84px;
  }

  /* 3ステップ：キャラと見出しを横に並べ、文章はその下に */
  .steps { margin-top: 42px; }

  .step,
  .step:nth-child(even) {
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-areas: "img title" "text text";
    align-items: center;
    gap: 10px 14px;
    padding: 30px 18px 20px;
    border-radius: 24px;
    box-shadow: 6px 6px 0 var(--pink);
  }

  .step:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) 88px;
    grid-template-areas: "title img" "text text";
  }

  .step h3 { font-size: 1.12rem; }

  .step__img { max-height: 112px; }

  /* 選び方：キャラは見出しの横に小さく、文章はその下に */
  .checks {
    margin-top: 38px;
    padding: 4px 18px;
    border-radius: 24px;
    box-shadow: 6px 6px 0 var(--mint);
  }

  .check,
  .check:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) 84px;
    grid-template-areas: "title img" "text text";
    align-items: center;
    gap: 8px 12px;
    padding: 22px 0 22px;
  }

  .check:nth-child(even) {
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-areas: "img title" "text text";
  }

  .check h3 { font-size: 1.12rem; }
  .check__img { max-height: 104px; }
}

/* 小さめのスマホ */
@media (max-width: 360px) {
  .next .btn { padding: 12px 28px; }

  /* ブログのカテゴリ名が2行にならないように */
  .feed .wpcard__cat {
    padding: 1px 9px;
    font-size: 0.62rem;
  }
  .card { padding: 6px 16px; }
  .info td { font-size: 0.95rem; }

  .hero-rank__mascot {
    right: -8%;
    width: 46%;
  }

  .stats dt { font-size: 0.6rem; }
}