/*
Theme Name: 楽天モバイル 従業員紹介キャンペーンナビ
Theme URI: https://shokainavi.com/
Author: Wonderwall
Description: 楽天モバイル従業員紹介キャンペーンの紹介メディア用テーマ。デザインカンプから起こした専用テーマです。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rmm
Tags: blog, two-columns, custom-logo, custom-menu, featured-images
*/

/* ============================================================
   楽天モバイル紹介メディア  デザインカンプ
   角丸: タグ/バッジ/ボタンは pill、カードと画像は 16px
   アクセントはマゼンタ1色。濃淡とグラデーションだけで強弱をつける
   ============================================================ */

:root {
  --bg:          #ffffff;
  --bg-sub:      #faf7f9;
  --bg-pink:     #fff2f8;
  --bg-pink2:    #ffe6f2;
  --fg:          #17171a;
  --fg-muted:    #5c5c64;
  --fg-faint:    #6f6f79;
  --line:        #e8e4e7;
  --line-pink:   #ffd0e6;
  --accent:      #e6007e;
  --accent-vivid:#ff008c;
  --accent-hover:#c4006b;
  --accent-ink:  #b00062;
  --accent-soft: #fff0f7;
  --on-accent:   #ffffff;
  --on-accent-dim:#ffffff;
  --head-bg:     #e6007e;
  --ink-bar:     #17171a;
  --radius:      16px;
  --radius-sm:   10px;
  --pill:        999px;
  --shell:       1120px;
  --shadow:      0 2px 4px rgba(93, 0, 51, .04), 0 12px 32px -14px rgba(93, 0, 51, .18);
  --shadow-lift: 0 6px 12px rgba(93, 0, 51, .07), 0 24px 48px -20px rgba(93, 0, 51, .28);
  --shadow-btn:  0 4px 0 var(--accent-hover), 0 12px 24px -8px rgba(230, 0, 126, .5);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:where(h2, h3)[id] { scroll-margin-top: 120px; }

body {
  margin: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(230, 0, 126, .14);
  background: var(--bg);
  color: var(--fg);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium",
               "Noto Sans JP", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.9;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 24px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--fg); color: var(--bg); padding: 10px 16px; z-index: 100;
}
.skip:focus { left: 0; }

:where(a, button, input, summary):focus-visible {
  outline: 3px solid var(--accent-vivid);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 見出しの先頭につける電波マーク。携帯の電波表示に見立てている */
.mark {
  width: 21px; height: 16px; flex: none; vertical-align: middle;
  fill: var(--accent-vivid);
}
.mark--white { fill: var(--on-accent); }

/* ---------------------------------------------------- ヘッダー */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--head-bg);
  box-shadow: 0 2px 12px rgba(93, 0, 51, .18);
}
.site-head__inner { height: 72px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; color: #fff; }

.nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.nav a {
  font-size: 13.5px; font-weight: 600; text-decoration: none; color: #fff;
  white-space: nowrap; padding-block: 4px; border-bottom: 2px solid transparent;
  transition: border-color .18s ease;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: #fff; }
.nav-toggle { display: none; }

.btn-head {
  flex: none; background: var(--bg); color: var(--accent-ink);
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  padding: 11px 20px; border-radius: var(--pill); white-space: nowrap;
  box-shadow: 0 2px 0 rgba(93, 0, 51, .25);
  transition: transform .12s ease;
}
.btn-head:hover { transform: translateY(-1px); }
.btn-head:active { transform: translateY(1px); box-shadow: none; }

/* ---------------------------------------------------- 告知バー */
.notice { background: var(--bg-pink); border-bottom: 1px solid var(--line-pink); }
.notice a {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 24px; font-size: 13.5px; color: var(--accent-ink);
  text-decoration: none; font-weight: 700;
}
.notice a:hover .notice__txt { text-decoration: underline; }
.notice .code {
  background: var(--accent); color: var(--on-accent); border-radius: var(--pill);
  padding: 3px 14px; font-size: 12.5px; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------- ボタン */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--pill); border: 0;
  font-size: 16px; font-weight: 700; line-height: 1.4;
  padding: 17px 36px; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn .arrow { font-size: 13px; }
.btn--block { width: 100%; }

.pr-note { font-size: 12px; color: var(--fg-muted); margin: 12px 0 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--accent); color: var(--on-accent); border-radius: var(--pill);
  padding: 7px 18px 7px 14px; font-size: 12.5px; font-weight: 700;
}
.eyebrow .mark { width: 16px; height: 12px; fill: var(--on-accent); }

/* ---------------------------------------------------- セクション共通 */
.section { padding-block: 72px; }
.section--sub { background: var(--bg-sub); }
.section__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.section__head h2 {
  margin: 0; font-size: 23px; font-weight: 700; text-wrap: pretty;
  display: flex; align-items: center; gap: 12px;
}
.section__head a {
  font-size: 13.5px; font-weight: 700; color: var(--accent-ink); text-decoration: none;
  border-bottom: 2px solid var(--line-pink); padding-bottom: 2px; white-space: nowrap;
}
.section__head a:hover { border-bottom-color: var(--accent); }

/* ---------------------------------------------------- 運営者 */
.author-band { padding-block: 64px; }
.author-card {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--bg-pink), var(--bg-pink2));
  border-radius: var(--radius); padding: 36px 40px;
  display: grid; grid-template-columns: 132px 1fr; gap: 32px; align-items: center;
}
.author-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(230, 0, 126, .14) 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(250deg, rgba(0,0,0,.65) 0 26%, transparent 52%);
          mask-image: linear-gradient(250deg, rgba(0,0,0,.65) 0 26%, transparent 52%);
}
.author-card > * { position: relative; z-index: 1; }
.author-card__photo {
  width: 132px; height: 132px; border-radius: var(--pill); object-fit: cover;
  border: 4px solid var(--bg); box-shadow: var(--shadow);
}
.author-card h2 { margin: 0; font-size: 21px; font-weight: 700; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.author-card .role { margin: 4px 0 0; font-size: 13px; color: var(--fg-muted); }
.facts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 7px; }
.facts li { font-size: 14px; display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; }
.facts li::before {
  content: "✓"; color: var(--on-accent); background: var(--accent); border-radius: var(--pill);
  width: 18px; height: 18px; display: grid; place-items: center; font-size: 12px;
  margin-top: 6px; font-weight: 700;
}

/* ---------------------------------------------------- 記事カード */
.cards { display: grid; gap: 28px; list-style: none; padding: 0; margin: 0; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }

.card { display: flex; }
.card__link {
  text-decoration: none; display: flex; flex-direction: column; width: 100%;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card__link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--line-pink); }
.card__media { position: relative; }
.card__thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tag {
  position: absolute; right: 12px; top: 12px;
  background: var(--accent); color: var(--on-accent); border-radius: var(--pill);
  padding: 4px 13px; font-size: 12px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(93,0,51,.3);
}
.card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.card h3 { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.65; text-wrap: pretty; }
.card__link:hover h3 { color: var(--accent-ink); }
.card p { margin: 9px 0 0; font-size: 13.5px; color: var(--fg-muted); line-height: 1.8; }
.card time { display: block; margin-top: auto; padding-top: 12px; font-size: 12px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------- ランキング */
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rank a {
  display: grid; grid-template-columns: 44px 168px 1fr; gap: 20px; align-items: center;
  padding: 14px 20px 14px 14px; text-decoration: none;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rank a:hover { transform: translateX(4px); box-shadow: var(--shadow); border-color: var(--line-pink); }
.rank .num {
  width: 36px; height: 36px; border-radius: var(--pill); display: grid; place-items: center;
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--bg-pink); color: var(--accent-ink);
}
.rank li:nth-child(-n+3) .num { background: var(--accent); color: var(--on-accent); }
.rank img { width: 168px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); }
.rank h3 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.7; }
.rank a:hover h3 { color: var(--accent-ink); }
.rank time { font-size: 12px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------- CTA 帯 */
.cta-band {
  position: relative; overflow: hidden; text-align: center; padding-block: 72px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--on-accent);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.3) 1.6px, transparent 1.6px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(115deg, rgba(0,0,0,.6) 0 22%, transparent 48%);
          mask-image: linear-gradient(115deg, rgba(0,0,0,.6) 0 22%, transparent 48%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band .mark { display: block; width: 30px; height: 23px; margin: 0 auto 14px; }
.cta-band h2 { margin: 0 0 12px; font-size: 27px; font-weight: 700; text-wrap: pretty; }
.cta-band p { margin: 0 0 30px; font-size: 15px; color: var(--on-accent-dim); opacity: .96; }
.cta-band .code { margin: 20px 0 0; font-size: 12.5px; color: var(--on-accent-dim); }

/* ---------------------------------------------------- 2カラム */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; padding-block: 48px; }
.aside { position: sticky; top: 100px; display: grid; gap: 22px; }
.widget { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: var(--bg); }
.widget h2 { margin: 0 0 14px; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.widget h2 .mark { width: 17px; height: 13px; }
.widget ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; counter-reset: w; }
.widget ol li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.widget ol li::before {
  counter-increment: w; content: counter(w);
  width: 20px; height: 20px; border-radius: var(--pill); margin-top: 3px;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--bg-pink); color: var(--accent-ink); font-variant-numeric: tabular-nums;
}
.widget ol a { font-size: 13px; text-decoration: none; line-height: 1.7; display: block; }
.widget ol a:hover { color: var(--accent-ink); }

/* ウィジェットの箇条書き（カテゴリーなど。WordPress標準ウィジェットも同じ見た目になる） */
.widget ul { list-style: none; margin: 0; padding: 0; display: grid; }
.widget ul li + li { border-top: 1px solid var(--line); }
.widget ul a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 2px; font-size: 13px; line-height: 1.6; text-decoration: none;
}
.widget ul a:hover { color: var(--accent-ink); }
.widget ul a span {
  flex: none; min-width: 22px; padding: 2px 7px; border-radius: var(--pill);
  background: var(--bg-pink); color: var(--accent-ink);
  font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
}
.widget ul ul { padding-left: 12px; border-top: 1px solid var(--line); }

/* ---------------------------------------------------- ページ見出し */
.page-head { padding-block: 44px 0; }
.page-head__inner {
  background: linear-gradient(135deg, var(--bg-pink), var(--bg-pink2));
  border-radius: var(--radius); padding: 32px 36px; position: relative; overflow: hidden;
}
.page-head__inner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(230, 0, 126, .13) 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(250deg, rgba(0,0,0,.6) 0 24%, transparent 50%);
          mask-image: linear-gradient(250deg, rgba(0,0,0,.6) 0 24%, transparent 50%);
}
.page-head__inner > * { position: relative; z-index: 1; }
.page-head h1 {
  margin: 0; font-size: 29px; font-weight: 700; text-wrap: pretty;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.page-head .count {
  font-size: 12.5px; font-weight: 700; color: var(--accent-ink); background: var(--bg);
  border-radius: var(--pill); padding: 4px 14px; font-variant-numeric: tabular-nums;
}
.page-head p { margin: 14px 0 0; color: var(--fg-muted); font-size: 14.5px; max-width: 48em; }

.crumbs { font-size: 12.5px; color: var(--fg-faint); padding-block: 16px 0; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; color: var(--accent-ink); }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--line); }

/* ---------------------------------------------------- ページ送り */
.pager { display: flex; gap: 10px; justify-content: center; padding-block: 44px 0; }
.pager a, .pager span {
  min-width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--pill); background: var(--bg);
  font-size: 14px; font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums;
}
.pager [aria-current="page"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.pager a:hover:not([aria-current]) { border-color: var(--accent); color: var(--accent-ink); }

/* ---------------------------------------------------- 記事詳細 */
.article__head { padding-block: 28px 0; }
.article__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.article__meta .tag { position: static; box-shadow: none; }
.badge-pr {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--fg-muted);
  border: 1px solid var(--line); border-radius: var(--pill); padding: 3px 11px;
}
.article__head h1 { margin: 0 0 18px; font-size: clamp(26px, 2.7vw, 34px); line-height: 1.55; font-weight: 700; text-wrap: pretty; }
.article__dates { display: flex; gap: 16px; align-items: center; font-size: 12.5px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.article__dates .updated {
  color: var(--accent-ink); font-weight: 700;
  background: var(--bg-pink); border-radius: var(--pill); padding: 3px 13px;
}
.article__byline { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 13px; color: var(--fg-muted); }
.article__byline img { width: 36px; height: 36px; border-radius: var(--pill); object-fit: cover; border: 2px solid var(--line-pink); }
.eyecatch { margin: 26px 0 0; border-radius: var(--radius); aspect-ratio: 16 / 9; object-fit: cover; width: 100%; box-shadow: var(--shadow); }

.lead { margin: 32px 0 0; font-size: 16.5px; line-height: 2; }

.inline-cta {
  margin: 36px 0 0; padding: 30px; text-align: center; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--bg-pink), var(--bg-pink2));
  border: 2px solid var(--line-pink);
}
.inline-cta p { margin: 0 0 18px; font-size: 16px; font-weight: 700; }

.toc { margin: 40px 0 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; background: var(--bg-sub); }
.toc h2 { margin: 0 0 14px; font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.toc h2 .mark { width: 17px; height: 13px; }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: t; display: grid; gap: 9px; }
.toc li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 14px; }
.toc li::before {
  counter-increment: t; content: counter(t);
  width: 22px; height: 22px; border-radius: var(--pill); margin-top: 4px;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--accent); color: var(--on-accent); font-variant-numeric: tabular-nums;
}
/* 見出し3のぶら下がり */
.toc .toc__sub { grid-column: 2; margin: 10px 0 2px; padding: 0; list-style: none; display: grid; gap: 7px; }
.toc .toc__sub li { grid-template-columns: 14px 1fr; gap: 8px; font-size: 13px; }
.toc .toc__sub li::before {
  counter-increment: none; content: ""; margin-top: 10px;
  width: 10px; height: 2px; border-radius: 2px; background: var(--line-pink);
}
.toc .toc__sub a { color: var(--fg-muted); }
.toc a { text-decoration: none; }
.toc a:hover { color: var(--accent-ink); text-decoration: underline; }

.prose { margin-top: 48px; }
.prose h2 {
  margin: 56px 0 20px; font-size: 22px; font-weight: 700; line-height: 1.6; text-wrap: pretty;
  padding: 0 0 14px 18px; border-left: 6px solid var(--accent); border-bottom: 1px solid var(--line);
}
.prose h3 {
  margin: 36px 0 14px; font-size: 17.5px; font-weight: 700;
  padding-left: 14px; border-left: 3px solid var(--line-pink);
}
.prose p { margin: 0 0 20px; }
.prose ul { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 8px; }
.prose ul li { display: grid; grid-template-columns: 20px 1fr; gap: 9px; }
.prose ul li::before {
  content: ""; width: 7px; height: 7px; border-radius: var(--pill);
  background: var(--accent); margin-top: 12px; margin-left: 5px;
}
.prose > :first-child { margin-top: 0; }

.article-foot { margin-top: 56px; }
.author-mini {
  display: grid; grid-template-columns: 84px 1fr; gap: 22px; align-items: start;
  background: var(--bg-sub); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px;
}
.author-mini img { width: 84px; height: 84px; border-radius: var(--pill); object-fit: cover; border: 3px solid var(--bg); box-shadow: var(--shadow); }
.author-mini h2 { margin: 0 0 2px; font-size: 16px; font-weight: 700; }
.author-mini .role { margin: 0 0 10px; font-size: 12.5px; color: var(--fg-muted); }
.author-mini p { margin: 0; font-size: 13.5px; color: var(--fg-muted); line-height: 1.8; }

/* ---------------------------------------------------- フッター */
.site-foot { background: var(--bg-sub); border-top: 3px solid var(--accent); padding-block: 56px 32px; }
.site-foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.site-foot .brand { color: var(--fg); }
.site-foot h2 { font-size: 13px; font-weight: 700; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.site-foot h2 .mark { width: 16px; height: 12px; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-foot a { font-size: 13px; color: var(--fg-muted); text-decoration: none; }
.site-foot a:hover { color: var(--accent-ink); text-decoration: underline; }
.site-foot__desc { font-size: 13px; color: var(--fg-muted); margin: 16px 0 0; max-width: 26em; }
.site-foot__note {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--fg-faint); line-height: 1.9;
}

/* ---------------------------------------------------- スマホ固定バー */
.sticky-cta { display: none; }

/* ---------------------------------------------------- レスポンシブ */
@media (max-width: 1023px) {
  /* タブレット幅ではナビが1行に収まらないので、折りたたみに切り替える */
  .nav, .site-head .btn-head { display: none; }
  .nav-toggle {
    display: grid; place-items: center; width: 42px; height: 42px; margin-left: auto;
    border: 0; border-radius: 10px; background: var(--bg); color: var(--accent-ink); font-size: 17px;
  }
  .layout { grid-template-columns: 1fr; gap: 44px; }
  .aside { position: static; }
  .cards--3 { grid-template-columns: repeat(2, 1fr); }
  .site-foot__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .author-card { padding: 30px; gap: 26px; grid-template-columns: 112px 1fr; }
  .author-card__photo { width: 112px; height: 112px; }
}

@media (max-width: 767px) {
  body { font-size: 15.5px; padding-bottom: 86px; }
  .shell { padding-inline: 18px; }
  .site-head__inner { height: 62px; gap: 10px; }
  .nav, .site-head .btn-head { display: none; }
  .nav-toggle {
    display: grid; place-items: center; width: 42px; height: 42px; margin-left: auto;
    border: 0; border-radius: 10px; background: var(--bg); color: var(--accent-ink); font-size: 17px;
  }

  .section { padding-block: 48px; }
  .notice a { justify-content: flex-start; gap: 10px; padding: 10px 18px; font-size: 12.5px; }

  .cards--3, .cards--2 { grid-template-columns: 1fr; gap: 22px; }
  .author-card { grid-template-columns: 1fr; padding: 26px 22px; }
  .author-card__photo { width: 96px; height: 96px; }
  .rank a { grid-template-columns: 36px 92px 1fr; gap: 14px; padding: 12px 14px; }
  .rank .num { width: 30px; height: 30px; font-size: 13.5px; }
  .rank img { width: 92px; }
  .site-foot__cols { grid-template-columns: 1fr; gap: 26px; }
  .cta-band { padding-block: 52px; }
  .cta-band h2 { font-size: 21px; }
  .page-head__inner { padding: 24px 22px; }
  .page-head h1 { font-size: 24px; }
  .prose h2 { font-size: 19px; }
  .author-mini { grid-template-columns: 64px 1fr; gap: 16px; padding: 20px; }
  .author-mini img { width: 64px; height: 64px; }
  .inline-cta { padding: 24px 20px; }

  .sticky-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(12px); border-top: 1px solid var(--line-pink);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------------------------------------------------- FAQ */

@media (max-width: 1023px) {
  .steps { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 767px) {
  .faq summary { grid-template-columns: 26px 1fr 20px; gap: 11px; padding: 15px 16px; font-size: 14px; }
  .faq summary::before { width: 26px; height: 26px; font-size: 12px; }
}

/* ============================================================
   キービジュアル（全幅）
   ============================================================ */
.kv {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(118deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: #fff;
}
/* 斜めストライプ */
.kv::before {
  content: ""; position: absolute; inset: -20% -10%; z-index: -2; pointer-events: none;
  background: repeating-linear-gradient(-18deg, rgba(255,255,255,.075) 0 22px, transparent 22px 64px);
}
/* ドット */
.kv::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.3) 2px, transparent 2px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(120deg, rgba(0,0,0,.85) 0 20%, transparent 46%);
          mask-image: linear-gradient(120deg, rgba(0,0,0,.85) 0 20%, transparent 46%);
}
/* 右上の大きなスラッシュ */
.kv__deco {
  position: absolute; top: -70px; right: 3%; z-index: -1; display: flex; gap: 26px; pointer-events: none;
}
.kv__deco i { display: block; width: 76px; border-radius: 22px; transform: skewX(-18deg); }
.kv__deco i:nth-child(1) { height: 440px; background: rgba(255,255,255,.17); }
.kv__deco i:nth-child(2) { height: 330px; background: rgba(255,255,255,.1); }

.kv__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 36px; align-items: center;
  padding-block: 34px 40px;
}

.kv .eyebrow {
  background: rgba(23, 23, 26, .9); color: #fff;
  font-size: 13.5px; padding: 8px 20px 8px 15px;
}
.kv .eyebrow .mark { fill: var(--accent-vivid); }

.kv__title {
  margin: 12px 0 0; font-weight: 900; letter-spacing: .005em;
  font-size: clamp(34px, 4.2vw, 62px); line-height: 1.18;
  color: #fff; paint-order: stroke fill;
  -webkit-text-stroke: 9px rgba(135, 0, 70, .55);
}
.kv__title small { display: block; font-size: .55em; font-weight: 900; }

.kv__lead { margin: 14px 0 0; font-size: 15.5px; font-weight: 700; color: #fff; max-width: 34em; }
.kv__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.kv__note { margin: 11px 0 0; font-size: 12px; color: #fff; }

.btn--outline-white {
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.75);
  box-shadow: none;
}
.btn--outline-white:hover { background: rgba(255,255,255,.14); border-color: #fff; }

@media (max-width: 1023px) {
  .kv__inner { grid-template-columns: 1fr; gap: 28px; padding-block: 40px 48px; }
  .kv__deco i:nth-child(1) { height: 300px; width: 54px; }
  .kv__deco i:nth-child(2) { height: 220px; width: 54px; }
}

@media (max-width: 767px) {
  .kv__inner { padding-block: 30px 40px; }
  .kv__title { -webkit-text-stroke-width: 7px; }
  .kv__lead { font-size: 14px; }
  .kv__cta { flex-direction: column; align-items: stretch; }
  .kv__cta .btn { width: 100%; }
}

/* ============================================================
   CTA（参考サイトに合わせて立体・大型・別色）
   地がマゼンタの場面でも沈まないよう、CTAだけ朱系で分ける
   ============================================================ */
:root { --cta-a: #d93a00; --cta-b: #b02800; --cta-sh: #8a2000; }

.cta-wrap { display: inline-grid; justify-items: center; gap: 9px; }
.btn--cta {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--cta-a), var(--cta-b));
  color: #fff; border-radius: var(--pill); border: 0;
  font-size: 20px; font-weight: 700; line-height: 1.4;
  padding: 23px 54px; text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  box-shadow: 0 6px 0 var(--cta-sh), 0 16px 30px -10px rgba(138, 32, 0, .6);
  transition: transform .12s ease, box-shadow .18s ease;
}
.btn--cta::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46%;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
  pointer-events: none;
}
.btn--cta .arrow { font-size: 15px; flex: none; }
.btn--cta:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--cta-sh), 0 22px 36px -10px rgba(138,32,0,.62); }
.btn--cta:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--cta-sh); }
.btn--cta.btn--block { width: 100%; }
.cta-sub { font-size: 12.5px; color: var(--fg-muted); margin: 0; text-align: center; }
.kv .cta-sub { color: #fff; }
.cta-band .cta-sub { color: var(--on-accent); }
.inline-cta .cta-sub { color: var(--fg-muted); }
.btn--cta.btn--sm2 { font-size: 16px; padding: 16px 28px; }
/* スマホ下部の固定バーは補足を出さない（高さを抑えるため） */
.sticky-cta .cta-sub { display: none; }
.sticky-cta .cta-wrap { display: block; }
.sticky-cta .btn--cta { width: 100%; font-size: 17px; padding: 16px 20px; box-shadow: 0 4px 0 var(--cta-sh); }

/* 運営者カード：右の空きを埋め、余白を締める */
.author-band { padding-block: 44px 30px; }
.author-card {
  padding: 28px 34px; gap: 26px; align-items: center;
  grid-template-columns: 116px minmax(0, 1fr) auto;
}
.author-card__photo { width: 116px; height: 116px; }
.author-card h2 { font-size: 20px; }
.facts { grid-template-columns: 1fr; gap: 6px; margin-top: 12px; }
@media (max-width: 1023px) {
  .author-card { grid-template-columns: 100px minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .author-card { grid-template-columns: 1fr; }
}

/* セクション間の余白を揃える */
.section { padding-block: 56px; }
.section__head { margin-bottom: 24px; }

/* 「記事一覧をすべて見る」をボタンの形に */
.section__head a.more {
  border: 2px solid var(--line); border-bottom-color: var(--line);
  border-radius: var(--pill); padding: 9px 20px; background: var(--bg);
  transition: border-color .18s ease, color .18s ease;
}
.section__head a.more:hover { border-color: var(--accent); color: var(--accent-ink); }

/* ランキング：行の間延びを解消 */
.rank { gap: 8px; }
.rank a { padding: 10px 18px 10px 10px; grid-template-columns: 40px 150px 1fr; gap: 16px; }
.rank .num { width: 32px; height: 32px; font-size: 14px; }
.rank img { width: 150px; }
.rank h3 { font-size: 14.5px; }
.rank time { font-size: 12px; margin-top: 2px; display: block; }

/* ランキング行：右端に矢印を置いて行の終わりを示す */
.rank a { grid-template-columns: 40px 150px minmax(0, 1fr) 22px; }
.rank a::after {
  content: "›"; font-size: 20px; color: var(--fg-faint); text-align: center;
  transition: transform .18s ease, color .18s ease;
}
.rank a:hover::after { color: var(--accent-ink); transform: translateX(3px); }
@media (max-width: 767px) {
  .rank a { grid-template-columns: 32px 92px minmax(0, 1fr); }
  .rank a::after { display: none; }
}

/* ============================================================
   仕上げ：ボタンの対比を上げ、薄ピンクのベタ塗りを減らす
   ============================================================ */
:root { --deep: #8a0049; }

/* --- ボタン：地の明暗で2通りに割り切る --- */
.btn--cta {
  background: linear-gradient(180deg, var(--accent), var(--accent-hover));
  color: var(--on-accent);
  box-shadow: 0 6px 0 var(--deep), 0 16px 30px -10px rgba(138, 0, 73, .45);
}
.btn--cta:hover { box-shadow: 0 9px 0 var(--deep), 0 22px 36px -10px rgba(138, 0, 73, .5); }
.btn--cta:active { box-shadow: 0 1px 0 var(--deep); }
.kv .btn--cta, .cta-band .btn--cta, .inline-cta .btn--cta {
  background: var(--bg); color: var(--accent-ink);
  box-shadow: 0 6px 0 rgba(93, 0, 51, .38), 0 18px 34px -10px rgba(93, 0, 51, .45);
}
.kv .btn--cta:hover, .cta-band .btn--cta:hover, .inline-cta .btn--cta:hover {
  box-shadow: 0 9px 0 rgba(93, 0, 51, .38), 0 24px 40px -10px rgba(93, 0, 51, .5);
}
.kv .btn--cta:active, .cta-band .btn--cta:active, .inline-cta .btn--cta:active { box-shadow: 0 1px 0 rgba(93, 0, 51, .38); }
.btn--cta::after { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)); }
.kv .btn--cta::after, .cta-band .btn--cta::after, .inline-cta .btn--cta::after { display: none; }

/* --- 運営者カード：薄ピンクのベタをやめ、白地＋縦のアクセント --- */
.author-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 7px solid var(--accent);
  box-shadow: var(--shadow);
}
.author-card::after { display: none; }
.author-card__photo { border-color: var(--bg); box-shadow: 0 0 0 3px var(--line-pink), var(--shadow); }

/* --- 記事内CTA：薄ピンク → 濃いマゼンタ --- */
.inline-cta {
  background: linear-gradient(140deg, var(--accent), var(--accent-hover));
  border: 0; color: var(--on-accent);
  box-shadow: var(--shadow-lift);
}
.inline-cta p { color: var(--on-accent); }
.inline-cta .pr-note, .inline-cta .cta-sub { color: var(--on-accent); }

/* --- ページ見出し：薄ピンクのベタ → 白地＋左のアクセント --- */
.page-head__inner {
  background: var(--bg); border: 1px solid var(--line);
  border-left: 7px solid var(--accent); box-shadow: var(--shadow);
}
.page-head__inner::after { display: none; }
.page-head .count { background: var(--bg-pink); }

/* --- 告知バーは細い帯のまま、下に1pxのアクセント --- */
.notice { border-bottom: 2px solid var(--accent); }

/* 運営者カードは幅を絞って余白をつくる */
.author-card { max-width: 880px; margin-inline: auto; }

/* FVの2つのボタンは同じ大きさに揃える（2列の等幅グリッド） */
.kv .btn--outline-white {
  font-size: 20px; padding: 21px 36px; border-width: 2px;
  border-color: rgba(255,255,255,.6);
}
.kv__cta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start; gap: 14px 20px; max-width: 700px;
}
.kv__cta .cta-wrap { display: grid; width: 100%; }
.kv__cta .btn { width: 100%; }

/* ============================================================
   主ボタンを黄色に統一（地の明暗を問わず同じ見え方にする）
   ============================================================ */
:root {
  --cta-y:      #ffd400;
  --cta-y-hi:   #ffe14d;
  --cta-y-edge: #bf8f00;
  --cta-y-ink:  #2b1a00;
}
.btn--cta, .kv .btn--cta, .cta-band .btn--cta, .inline-cta .btn--cta {
  background: linear-gradient(180deg, var(--cta-y-hi), var(--cta-y));
  color: var(--cta-y-ink);
  box-shadow: 0 6px 0 var(--cta-y-edge), 0 18px 32px -10px rgba(120, 90, 0, .5);
}
.btn--cta:hover, .kv .btn--cta:hover, .cta-band .btn--cta:hover, .inline-cta .btn--cta:hover {
  box-shadow: 0 9px 0 var(--cta-y-edge), 0 24px 40px -10px rgba(120, 90, 0, .55);
}
.btn--cta:active, .kv .btn--cta:active, .cta-band .btn--cta:active, .inline-cta .btn--cta:active {
  box-shadow: 0 1px 0 var(--cta-y-edge);
}
.btn--cta::after, .kv .btn--cta::after, .cta-band .btn--cta::after, .inline-cta .btn--cta::after {
  display: block;
  background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0));
}
.btn--cta .arrow { color: var(--cta-y-ink); }

/* ヘッダーの常設ボタンも黄色に揃える */
.btn-head {
  background: linear-gradient(180deg, var(--cta-y-hi), var(--cta-y));
  color: var(--cta-y-ink);
  box-shadow: 0 3px 0 var(--cta-y-edge);
}
.btn-head:hover { box-shadow: 0 5px 0 var(--cta-y-edge); }
.btn-head:active { box-shadow: 0 1px 0 var(--cta-y-edge); }

/* ============================================================
   ヘッダー刷新：ロゴを置くため白地に。ピンクは公式バナーと同じ値
   ============================================================ */
:root {
  --accent-vivid: #ff008c;   /* 公式バナーの地と同じ値 */
  --logo-pink:    #e4016e;   /* ロゴのピンク */
  --navy:         #1e1f23;   /* ロゴの文字色 */
  --head-bg:      #ffffff;
}

.site-head { background: var(--head-bg); border-bottom: 1px solid var(--line); box-shadow: 0 2px 10px rgba(23,23,26,.05); }
.site-head__inner { height: 92px; gap: 20px; }
.brand { color: inherit; }
.brand__logo { height: 92px; width: auto; }
.site-head .nav { margin-left: auto; gap: 22px; }
.site-head .nav a { color: var(--navy); font-size: 14px; font-weight: 700; border-bottom-width: 2px; }
.site-head .nav a:hover, .site-head .nav a[aria-current="page"] { border-bottom-color: var(--accent-vivid); }

/* 検索窓 */
.search { display: flex; align-items: stretch; flex: none; }
.search input {
  width: 168px; height: 42px; border: 2px solid var(--line); border-right: 0;
  border-radius: var(--pill) 0 0 var(--pill); padding: 0 16px;
  font-size: 13.5px; font-family: inherit; color: var(--fg); background: var(--bg);
}
.search input::placeholder { color: var(--fg-muted); }
.search input:focus { outline: none; border-color: var(--accent); }
.search button {
  width: 52px; height: 42px; border: 0; border-radius: 0 var(--pill) var(--pill) 0;
  background: var(--accent); cursor: pointer; display: grid; place-items: center;
}
.search button:hover { background: var(--accent-hover); }
.search .lens {
  display: block; width: 14px; height: 14px; border: 2.5px solid var(--on-accent);
  border-radius: var(--pill); position: relative;
}
.search .lens::after {
  content: ""; position: absolute; right: -6px; bottom: -4px; width: 9px; height: 2.5px;
  background: var(--on-accent); border-radius: 2px; transform: rotate(45deg);
}
.site-head .btn-head { font-size: 14px; padding: 13px 22px; }
.nav-toggle { background: var(--accent); color: var(--on-accent); }

/* フッターのロゴ */
.site-foot .brand__logo { height: 74px; }

@media (max-width: 1199px) {
    .search input { width: 118px; }
}
@media (max-width: 1023px) {
  .site-head__inner { height: 72px; gap: 12px; }
  .site-head .nav, .site-head .search { display: none; }
  .brand__logo { height: 72px; }
  .site-head .btn-head { margin-left: auto; font-size: 13px; padding: 11px 16px; }
}
@media (max-width: 767px) {
  .site-head__inner { height: 64px; }
  .brand__logo { height: 60px; }
  .site-head .btn-head { display: inline-flex; font-size: 12px; padding: 10px 13px; }
  .site-foot .brand__logo { height: 62px; }
}

/* ============================================================
   後ろの指定に打ち消されていたぶんを、最後にもう一度書く
   （スマホで公式バナーが128pxに潰れるのを防ぐ。PCには影響しない）
   ============================================================ */

@media (max-width: 767px) {
  .kv__cta { grid-template-columns: 1fr; max-width: none; }
}

/* ============================================================
   メリット訴求
   ============================================================ */
.merit { background: var(--bg-pink); padding-block: 48px 0; }
.merit__title {
  margin: 0 0 24px; text-align: center; font-size: 21px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 16px; text-wrap: pretty;
}
.merit__title .wing { width: 2px; height: 26px; background: var(--accent); transform: skewX(20deg); flex: none; }
.merit__title .wing--r { transform: skewX(-20deg); }
.merit__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.merit__list li {
  background: var(--bg); border-radius: var(--radius); padding: 22px 24px 24px;
  text-align: center; box-shadow: var(--shadow);
}
.merit__list li::before {
  content: "✓"; display: grid; place-items: center; margin: 0 auto 12px;
  width: 30px; height: 30px; border-radius: var(--pill);
  background: var(--accent); color: var(--on-accent); font-size: 16px; font-weight: 700;
}
.merit__list p { margin: 0; font-size: 14.5px; line-height: 1.85; }
.merit__list b { color: var(--accent-ink); font-weight: 700; }
.merit__foot { text-align: center; padding-block: 34px 44px; }
.merit__get {
  margin: 0 0 18px; font-size: 32px; font-weight: 900; color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.merit__get small { font-size: 19px; font-weight: 700; }
/* ポイントを表す黄色いコイン（中に白いP） */
.merit__get .coin {
  width: 30px; height: 30px; border-radius: var(--pill); flex: none;
  background: linear-gradient(160deg, var(--cta-y-hi), var(--cta-y));
  border: 2px solid var(--cta-y-edge);
  display: grid; place-items: center;
}
.merit__get .coin::before {
  content: "P";
  font-size: 17px; font-weight: 900; line-height: 1;
  /* 地が黄色固定なので、文字色は変数にしない */
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(170, 125, 0, .45);
}
.merit__note { margin: 18px 0 0; font-size: 12px; color: var(--fg-muted); line-height: 1.8; }

/* ============================================================
   開催中のキャンペーン（カセットで差し替える枠・横並び最大3件）
   1枠＝キャンペーン名＋期間＋バナー＋注釈。枠ごと差し替える想定
   ============================================================ */
.cassettes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cassette {
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 20px 22px; box-shadow: var(--shadow);
}
.cassette__head { display: grid; gap: 6px; text-align: center; margin-bottom: 14px; }
.cassette h3 { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.65; text-wrap: pretty; }
.cassette__term { margin: 0; font-size: 12px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.cassette__banner { display: block; border-radius: var(--radius-sm); overflow: hidden; }
.cassette__banner img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform .3s ease; }
.cassette__banner:hover img { transform: scale(1.03); }
.cassette__note { margin: 14px 0 0; font-size: 12px; color: var(--fg-muted); line-height: 1.8; }
.cassette h3 a { text-decoration: none; }
.cassette h3 a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ============================================================
   よくある質問
   ============================================================ */
.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px;
  gap: 14px; align-items: center; padding: 18px 22px;
  font-size: 15px; font-weight: 700; line-height: 1.7; text-wrap: pretty;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "Q"; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: var(--pill); background: var(--accent); color: var(--on-accent);
  font-size: 13px; font-weight: 700;
}
.faq summary::after { content: "＋"; color: var(--accent-ink); font-size: 15px; text-align: center; }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--accent-ink); }
.faq__a {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px;
  padding: 0 22px 20px; border-top: 1px solid var(--line); padding-top: 18px; margin-top: -1px;
}
.faq__a::before {
  content: "A"; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: var(--pill); background: var(--bg-pink); color: var(--accent-ink);
  font-size: 13px; font-weight: 700;
}
.faq__a p { margin: 0; font-size: 14.5px; line-height: 1.95; color: var(--fg-muted); }

@media (max-width: 767px) {
  .merit__title { font-size: 17px; gap: 10px; }
  .merit__list { grid-template-columns: 1fr; gap: 12px; }
  .merit__get { font-size: 25px; }
  .merit__get .coin { width: 25px; height: 25px; }
  .merit__get .coin::before { font-size: 14px; }
  .merit__get small { font-size: 15px; }
  .cassettes { grid-template-columns: 1fr; gap: 18px; }
  .faq summary { font-size: 14.5px; padding: 15px 16px; gap: 10px; grid-template-columns: 26px minmax(0, 1fr) 18px; }
  .faq__a { padding: 16px 16px 18px; gap: 10px; grid-template-columns: 26px minmax(0, 1fr); }
}

/* ============================================================
   プライバシーポリシー・免責事項などの単独ページ
   ============================================================ */
.doc { padding-block: 40px 64px; max-width: 820px; }
.doc .toc { margin-top: 0; }
.doc .prose h2 { font-size: 20px; }
.doc .prose p { font-size: 15px; line-height: 2; }
.doc__date {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--fg-faint);
}
/* フッター最下部のページ導線 */
.site-foot__links {
  list-style: none; margin: 36px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
}
.site-foot__links a { font-size: 13px; color: var(--fg-muted); text-decoration: none; }
.site-foot__links a:hover { color: var(--accent-ink); text-decoration: underline; }

/* ============================================================
   サイドバー：バナーと申し込みボタンをひとつの枠にまとめる
   ============================================================ */
.widget--offer { border: 2px solid var(--accent); box-shadow: var(--shadow); }
.widget--offer__banner { display: block; margin: 0 0 14px; border-radius: var(--radius-sm); overflow: hidden; }
.widget--offer__banner img { width: 100%; display: block; }
.widget--offer p { margin: 0 0 16px; font-size: 13px; color: var(--fg-muted); line-height: 1.8; }
.widget--offer .cta-sub { color: var(--fg-muted); }
.widget--offer .btn--cta {
  background: linear-gradient(180deg, var(--cta-y-hi), var(--cta-y));
  color: var(--cta-y-ink);
  box-shadow: 0 6px 0 var(--cta-y-edge), 0 18px 32px -10px rgba(120, 90, 0, .5);
}
.widget--offer .btn--cta:hover { box-shadow: 0 9px 0 var(--cta-y-edge), 0 22px 36px -10px rgba(120, 90, 0, .55); }
.widget--offer .btn--cta:active { box-shadow: 0 1px 0 var(--cta-y-edge); }
.widget--offer .btn--cta::after { display: none; }
.widget--offer .arrow { color: var(--cta-y-ink); }

/* 冒頭の要点（POINT） */
.point-box {
  margin-top: 26px; border: 2px solid var(--accent); border-radius: var(--radius); overflow: hidden;
}
.point-box h2 {
  margin: 0; background: var(--accent); color: var(--on-accent);
  font-size: 14px; font-weight: 700; letter-spacing: .08em; padding: 11px 22px;
}
.point-box ul { margin: 0; padding: 20px 24px 22px; list-style: none; display: grid; gap: 10px; }
.point-box li { font-size: 14.5px; line-height: 1.9; display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.point-box li::before {
  content: ""; width: 9px; height: 9px; border-radius: var(--pill);
  background: var(--accent); margin-top: 11px; margin-left: 4px;
}

/* 本文のハイライト（太字＋マーカー。strongタグは使わない） */
.prose .hl {
  font-weight: 700;
  background: linear-gradient(transparent 58%, #ffe9a3 58%);
  padding-bottom: 1px;
}

/* 吹き出し */
.balloon { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; margin: 0 0 24px; }
.balloon__who { margin: 0; display: grid; justify-items: center; gap: 5px; }
.balloon__who img { width: 64px; height: 64px; border-radius: var(--pill); object-fit: cover; border: 2px solid var(--line-pink); }
.balloon__who figcaption { font-size: 12px; color: var(--fg-faint); text-align: center; line-height: 1.5; }
.balloon__body {
  position: relative; background: var(--bg-sub); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 20px;
}
.balloon__body::before,
.balloon__body::after {
  content: ""; position: absolute; top: 22px; width: 0; height: 0;
  border: 9px solid transparent;
}
.balloon__body::before { left: -18px; border-right-color: var(--line); }
.balloon__body::after { left: -16px; border-right-color: var(--bg-sub); }
.balloon__body p { margin: 0; font-size: 14.5px; line-height: 1.9; }

/* 記事内の関連記事 */
.rel {
  display: block; margin: 0 0 24px; text-decoration: none;
  border: 1px solid var(--line-pink); border-radius: var(--radius); overflow: hidden; background: var(--bg);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.rel:hover { box-shadow: var(--shadow); border-color: var(--accent); }
.rel__label {
  display: block; background: var(--bg-pink); color: var(--accent-ink);
  font-size: 12.5px; font-weight: 700; padding: 8px 18px;
}
.rel__in { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 18px; }
.rel__in img { width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); }
.rel__title { font-size: 14.5px; font-weight: 700; line-height: 1.7; }
.rel:hover .rel__title { color: var(--accent-ink); }

/* キャンペーンの立体カード */
.promo { margin: 0 0 28px; }
.prose .promo__head {
  margin: 0 0 16px; padding: 0; border: 0; font-size: 17.5px; font-weight: 700;
  display: flex; align-items: center; gap: 10px;
}
.prose .promo__head::before { content: ""; width: 5px; height: 20px; border-radius: 2px; background: var(--accent); }
.promo__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.promo__card {
  position: relative; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-lift);
}
.prose .promo__card h4 { margin: 0 0 12px; font-size: 15px; font-weight: 700; line-height: 1.65; }
.promo__card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.promo__spec { margin: 14px 0 16px; display: grid; gap: 1px; background: var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.promo__spec > div { display: grid; grid-template-columns: 70px minmax(0, 1fr); background: var(--bg); }
.promo__spec dt { padding: 9px 12px; font-size: 12.5px; font-weight: 700; color: var(--fg-muted); background: var(--bg-sub); }
.promo__spec dd { margin: 0; padding: 9px 12px; font-size: 13.5px; }
.promo__spec b { font-size: 18px; font-weight: 900; color: var(--accent-ink); font-variant-numeric: tabular-nums; }

/* ステップ */
.steps { margin: 0 0 28px; }
.prose .steps__head {
  margin: 0 0 16px; padding: 0; border: 0; font-size: 17.5px; font-weight: 700; text-align: center;
}
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.steps__list > li {
  display: grid; gap: 12px; align-content: start;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0 18px 20px; box-shadow: var(--shadow);
}
.steps__list > li::before { content: none; }
.steps__no {
  margin: 0 -18px 4px; background: var(--ink-bar); color: #fff;
  border-radius: var(--radius) var(--radius) 0 0;
  text-align: center; padding: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
}
.steps__no b { font-size: 17px; margin-left: 4px; }
.steps__list p { margin: 0; font-size: 13.5px; line-height: 1.85; }
.steps__list img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.steps__note { font-size: 12px !important; color: var(--fg-muted); }
/* 幅の狭いカードの中でも折り返さない大きさにする */
.steps .btn--cta { font-size: 13.5px; padding: 12px 12px; gap: 8px; white-space: nowrap; }
.steps .btn--cta .arrow { font-size: 12px; }

/* 比較表 */
.cmp { margin: 0 0 28px; }
.prose .cmp__head { margin: 0 0 14px; padding: 0; border: 0; font-size: 17.5px; font-weight: 700; text-align: center; }
.cmp__wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.cmp__table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 13px; background: var(--bg); }
.cmp__table th, .cmp__table td { border: 1px solid var(--line); padding: 12px 14px; text-align: center; vertical-align: middle; }
.cmp__table thead th { background: var(--bg-sub); font-weight: 700; line-height: 1.6; }
.cmp__table tbody th { background: var(--bg-sub); font-weight: 700; text-align: left; white-space: nowrap; }
.cmp__table .is-pick { background: var(--bg-pink); }
.cmp__table thead .is-pick { background: var(--accent); color: var(--on-accent); }
.cmp__pick {
  display: block; margin: 0 auto 6px; width: fit-content;
  background: var(--cta-y); color: var(--cta-y-ink); border-radius: var(--pill);
  padding: 2px 12px; font-size: 12px; font-weight: 700;
}
.cmp__table b { font-size: 16px; font-weight: 900; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.cmp__table .is-pick b { color: var(--accent-ink); }
.cmp__table .ok { color: #0a7f62; font-weight: 700; }
.cmp__table .ng { color: var(--fg-muted); }
.cmp__btn {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  background: var(--accent); color: var(--on-accent); border-radius: var(--pill);
  padding: 8px 16px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.cmp__btn:hover { background: var(--accent-hover); }

@media (max-width: 767px) {
  .promo__grid { grid-template-columns: 1fr; }
  .steps__list { grid-template-columns: 1fr; }
  .balloon { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
  .balloon__who img { width: 52px; height: 52px; }
    .rel__in { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 12px 14px; }
  .rel__in img { width: 92px; }
  .point-box ul { padding: 16px 16px 18px; }
}

/* 比較表は枠の中で横スクロールさせる（ページ全体を横に伸ばさない） */
.layout > article, .layout > aside { min-width: 0; }

/* ヘッダーのボタン：狭い画面では短いラベルに差し替える */
.btn-head__short { display: none; }
@media (max-width: 767px) {
  .btn-head__long { display: none; }
  .btn-head__short { display: inline; }
  .brand__logo { height: 56px; }
  .site-head .btn-head { font-size: 12.5px; padding: 11px 14px; }
  .nav-toggle { width: 44px; flex: none; }
}

/* ============================================================
   ファーストビュー：薄ピンク＋横長バナー＋社員イラスト
   左＝見出し／バナー／ボタン、右＝イラスト（下に名前）
   ============================================================ */
.kv {
  background: linear-gradient(165deg, #fff6fa 0%, #ffe6f2 100%);
  color: var(--fg);
  border-bottom: 1px solid var(--line-pink);
}
.kv::before { background: repeating-linear-gradient(-18deg, rgba(230,0,126,.05) 0 22px, transparent 22px 64px); }
.kv::after { background-image: radial-gradient(rgba(230,0,126,.16) 2px, transparent 2px); }
.kv__deco i:nth-child(1) { background: rgba(230,0,126,.085); }
.kv__deco i:nth-child(2) { background: rgba(230,0,126,.05); }

.kv .eyebrow { background: #17171a; color: #fff; }
.kv .eyebrow .mark { fill: #ff008c; }
.kv__cta .cta-sub { color: #55555d; }
.kv .btn--outline-white { color: #b00062; border-color: #e6007e; background: #fff; }
.kv .btn--outline-white:hover { background: #fff0f7; border-color: #c4006b; }

/* FVが薄ピンクになったので、直下のブロックは地を変えて境目を出す */
.merit { background: var(--bg-sub); border-bottom: 1px solid var(--line); }

/* 運営者カード：写真 ／ 名前と紹介文 ／ 実績 の3段組 */
.author-card { grid-template-columns: 116px minmax(0, 1fr) auto; gap: 32px; max-width: none; }
.author-card__id { align-self: center; }
.author-card .bio { margin: 10px 0 0; font-size: 13.5px; color: var(--fg-muted); line-height: 1.85; max-width: 34em; }
.facts {
  margin: 0; padding: 0 0 0 30px; border-left: 1px solid var(--line);
  display: grid; gap: 9px; grid-template-columns: 1fr;
}
@media (max-width: 1023px) {
  .author-card { grid-template-columns: 100px minmax(0, 1fr); gap: 24px; }
  .author-card .facts { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 18px; }
}
@media (max-width: 767px) {
  .author-card { grid-template-columns: 1fr; }
  .author-card__photo { margin-inline: auto; }
  .author-card__id { text-align: center; }
  .author-card .bio { margin-inline: auto; }
  .author-card h2 { justify-content: center; }
}

/* ============================================================
   FVのボタン：横2つだと文字が余白を食い潰すため、主ボタンを1本に
   ============================================================ */
.kv__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
  margin-top: 16px;
  max-width: none;
}
.kv__cta .cta-wrap { display: grid; width: auto; }
.kv__cta .btn--cta { width: auto; padding-inline: 28px; }
.kv__cta .btn--outline-white {
  width: auto;
  font-size: 15px;
  padding: 14px 24px;
  margin-top: 0;
  align-self: center;
}

/* ボタンが2つ入りきらない幅では縦積みに戻す */
@media (max-width: 1100px) {
  .kv__cta,
  .kv--official .kv__cta { flex-direction: column; align-items: stretch; max-width: 480px; }
  .kv__cta .cta-wrap { width: 100%; }
  .kv__cta .btn--cta,
  .kv__cta .btn--outline-white { width: 100%; align-self: auto; }
}

/* サイドバーのボタンは枠が狭いので、文字が余白を食わない大きさにする */
.widget--offer .btn--cta { font-size: 15px; padding: 15px 14px; gap: 8px; }
.widget--offer .btn--cta .arrow { font-size: 12px; }

/* ============================================================
   ここから下は WordPress 用の調整
   デザインカンプには無い、WordPressが出力するマークアップへの対応
   ============================================================ */

/* ---- ロゴ（カスタムロゴを設定した場合） ---- */
.custom-logo-link {
  display: flex; align-items: center; text-decoration: none; flex: none; color: inherit;
}
.custom-logo { height: 92px; width: auto; display: block; }
.site-foot .custom-logo { height: 74px; }

/* ---- ヘッダーのメニュー（wp_nav_menu は ul/li を出す） ---- */
.site-head .nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 22px; }
.site-head .nav li { list-style: none; }

/* ---- ヘッダーの並び順と、スマホの開閉 ---- */
/* 開閉用チェックボックスは、ハンバーガー（label.nav-toggle）が見えている
   768px未満だけ有効にする。label が display:none の幅で入力だけ残すと
   「ラベルの無いチェックボックス」として読み上げ対象になってしまう */
.nav-check { position: absolute; display: none; }
.nav-toggle { display: none; }
.nav-panel { display: contents; }
.site-head .nav { order: 1; }
.site-head .search { order: 2; }
.site-head .btn-head { order: 3; }

/* ---- 固定ページ一覧・カテゴリー一覧（wp_list_categories） ---- */
.site-foot .cat-item { list-style: none; }
.site-foot ul li { list-style: none; }

/* ---- ページ送り（the_posts_pagination） ---- */
.pager { display: flex; justify-content: center; padding-block: 44px 0; }
.pager .nav-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pager .page-numbers {
  min-width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--pill); background: var(--bg);
  font-size: 14px; font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums;
  padding-inline: 12px;
}
.pager .page-numbers.current { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.pager a.page-numbers:hover { border-color: var(--accent); color: var(--accent-ink); }
.pager .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---- 記事本文（ブロックエディタの出力） ---- */
.prose img, .prose figure img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.prose figure { margin: 0 0 20px; }
.prose figcaption { font-size: 12.5px; color: var(--fg-muted); margin-top: 8px; text-align: center; }
.prose .alignleft { float: left; margin: 0 20px 16px 0; }
.prose .alignright { float: right; margin: 0 0 16px 20px; }
.prose .aligncenter { display: block; margin-inline: auto; }
.prose ol { margin: 0 0 20px; padding-left: 1.4em; display: grid; gap: 8px; }
.prose blockquote {
  margin: 0 0 20px; padding: 16px 20px; background: var(--bg-sub);
  border-left: 4px solid var(--line-pink); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 0 0 20px; }
.prose table th, .prose table td { border: 1px solid var(--line); padding: 10px 12px; }
.prose table th { background: var(--bg-sub); font-weight: 700; }
.prose a:not(.btn):not(.rel):not(.cmp__btn):not(.cassette__banner) { color: var(--accent-ink); }
.prose .wp-block-table { overflow-x: auto; }
.prose .wp-block-image { margin: 0 0 20px; }

/* ---- 比較表の中の表ブロック ---- */
.cmp__wrap .wp-block-table { overflow: visible; margin: 0; }
.cmp__wrap figure { margin: 0; }

/* ---- 検索結果・404 の本文幅 ---- */
.doc .search { max-width: 420px; }

/* ---- WordPress の読み上げ用テキスト ---- */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- 管理バーが出ているときにヘッダーが隠れないように ---- */
.admin-bar .site-head { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-head { top: 46px; }
}

/* ============================================================
   1023px 以下：メニューと検索を開閉式にする
   ============================================================ */
@media (max-width: 1023px) {
  .site-head__inner { position: relative; }
  .nav-check { display: block; }
  .nav-toggle {
    display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: 10px; background: var(--bg-pink); cursor: pointer; flex: none; order: 4;
  }
  .nav-toggle__bars { display: grid; gap: 4px; }
  .nav-toggle__bars i { display: block; width: 19px; height: 2.5px; border-radius: 2px; background: var(--accent-ink); }
  .nav-check:checked ~ .nav-toggle { background: var(--accent); }
  .nav-check:checked ~ .nav-toggle .nav-toggle__bars i { background: var(--on-accent); }
  .nav-check:focus-visible ~ .nav-toggle { outline: 3px solid var(--accent); outline-offset: 2px; }

  .nav-panel {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 5;
    gap: 14px; padding: 10px 18px 20px; background: var(--bg);
    border-top: 1px solid var(--line); box-shadow: var(--shadow-lift);
  }
  .nav-check:checked ~ .nav-panel { display: grid; }
  .site-head .nav { display: block; margin: 0; }
  .site-head .nav ul { display: grid; gap: 2px; }
  .site-head .nav a { font-size: 15px; padding: 10px 2px; border-bottom: 1px solid var(--line); display: block; }
  .site-head .search { display: flex; width: 100%; }
  .site-head .search input { width: 100%; height: 46px; }
  .site-head .search button { height: 46px; }
  .site-head .btn-head { display: inline-flex; margin-left: auto; }
}

/* ============================================================
   ブロックエディタ対応
   グループブロックの内側の入れ物を透過させ、
   パターンで組んだときも素のHTMLと同じ並びになるようにする
   ============================================================ */
.balloon > .wp-block-group__inner-container,
.point-box > .wp-block-group__inner-container,
.steps > .wp-block-group__inner-container,
.promo > .wp-block-group__inner-container,
.promo__grid > .wp-block-group__inner-container,
.promo__card > .wp-block-group__inner-container,
.cmp > .wp-block-group__inner-container,
.inline-cta > .wp-block-group__inner-container,
.balloon__body > .wp-block-group__inner-container {
  display: contents;
}

/* 表ブロックに比較表のクラスをつけた場合 */
figure.cmp__table { margin: 0; overflow-x: auto; width: auto; min-width: 0; }
figure.cmp__table > table,
table.cmp__table {
  border-collapse: collapse; width: 100%; min-width: 620px;
  font-size: 13px; background: var(--bg);
}
figure.cmp__table th, figure.cmp__table td,
table.cmp__table th, table.cmp__table td {
  border: 1px solid var(--line); padding: 12px 14px; text-align: center; vertical-align: middle;
}
figure.cmp__table thead th, table.cmp__table thead th { background: var(--bg-sub); font-weight: 700; line-height: 1.6; }
figure.cmp__table tbody th, table.cmp__table tbody th { background: var(--bg-sub); font-weight: 700; text-align: left; white-space: nowrap; }

/* 吹き出しの画像ブロック */
.balloon__who.wp-block-image { margin: 0; }
.balloon__who.wp-block-image img { width: 64px; height: 64px; border-radius: var(--pill); object-fit: cover; border: 2px solid var(--line-pink); }
.balloon__who.wp-block-image figcaption { font-size: 12px; color: var(--fg-faint); text-align: center; line-height: 1.5; margin: 5px 0 0; }

/* ステップの各カード */
.steps__list.wp-block-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.steps__list .wp-block-column {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0 18px 20px; box-shadow: var(--shadow); display: grid; gap: 12px; align-content: start;
}
@media (max-width: 767px) {
  .steps__list.wp-block-columns { grid-template-columns: 1fr; }
}

/* ============================================================
   ファーストビュー
   左＝見出し／バナー／ボタン、右＝運営者のアイコン
   ============================================================ */
.kv--official .kv__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  grid-template-areas:
    "head   head"
    "banner model"
    "act    act";
  align-items: start;
  column-gap: 40px; row-gap: 24px;
  padding-block: 40px 44px;
  text-align: left;
}
.kv__head   { grid-area: head; }
.kv__banner { grid-area: banner; margin: 0; align-self: center; }
.kv__model  { grid-area: model; align-self: center; margin: 0; }
.kv__act    { grid-area: act; }

/* 地が薄ピンクなので、文字は白ではなく濃色で置く */
.kv--official .kv__title {
  margin: 12px 0 0; line-height: 1.22;
  font-size: clamp(26px, 2.9vw, 38px);
  color: #c4006b; -webkit-text-stroke: 8px #ffffff;
  text-wrap: balance; word-break: auto-phrase;
}
.kv--official .kv__title small { display: block; font-size: .88em; }
.kv--official .kv__lead { margin: 12px 0 0; font-size: 15px; font-weight: 700; color: #2a2a30; max-width: 30em; }
/* ボタンは同じ大きさで中央に並べる */
.kv--official .kv__cta { justify-content: center; margin-top: 0; max-width: none; }
.kv--official .kv__cta .cta-wrap { justify-items: center; }
.kv--official .kv__cta .btn--cta,
.kv--official .kv__cta .btn--outline-white {
  box-sizing: border-box;
  width: 330px; min-height: 74px;
  padding-inline: 20px;
}
.kv--official .kv__cta .btn--outline-white { font-size: 16px; align-self: start; }
.kv--official .kv__note { margin: 16px 0 0; font-size: 12px; color: #55555d; line-height: 1.75; text-align: center; }

.kv__banner img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}

/* 右側＝運営者カード（アイコン＋名前＋ひとこと） */
.kv__model {
  display: grid; justify-items: center;
  background: #fff; border: 1px solid var(--line-pink); border-radius: var(--radius);
  padding: 24px 20px 22px; box-shadow: var(--shadow);
}
.kv__model img {
  width: 100%; max-width: 190px; aspect-ratio: 1; height: auto; display: block;
  border-radius: var(--pill); object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 6px 18px rgba(93, 0, 51, .2);
}
.kv__model figcaption { margin: 14px 0 0; display: grid; gap: 10px; }
.kv__model .who { font-size: 12.5px; color: #55555d; line-height: 1.6; text-align: center; display: block; }
.kv__model .who b { display: block; font-size: 17px; font-weight: 900; color: #17171a; margin-bottom: 3px; }
.kv__voice {
  margin: 0; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.85; color: #3a3a42; text-align: left;
}

@media (max-width: 1023px) {
  .kv--official .kv__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "banner" "model" "act";
    row-gap: 20px; padding-block: 28px 32px;
  }
  .kv--official .kv__cta { max-width: 480px; }
  /* 横並びにして高さを詰める（CTAを押し下げない） */
  .kv__model {
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: start; justify-items: start; gap: 16px;
    max-width: 560px; margin-inline: auto; width: 100%; padding: 16px 18px;
  }
  .kv__model img { max-width: 92px; }
  .kv__model figcaption { margin: 0; gap: 8px; }
  .kv__model .who { text-align: left; }
  .kv__voice { padding-top: 10px; }
  .kv__banner { max-width: 560px; margin-inline: auto; width: 100%; }
}
@media (max-width: 767px) {
  .kv--official .kv__inner { row-gap: 18px; padding-block: 22px 26px; }
  .kv--official .kv__cta { max-width: 480px; }
  .kv--official .kv__lead { font-size: 14.5px; }
  .kv__model { grid-template-columns: 76px minmax(0, 1fr); gap: 13px; padding: 14px 15px; }
  .kv__model img { max-width: 76px; border-width: 3px; }
  .kv__model .who { font-size: 12px; }
  .kv__model .who b { font-size: 15px; }
  .kv__voice { font-size: 12.5px; padding-top: 9px; }
}

/* ボタン2つが1行に収まらない幅では縦積み（この指定は .kv--official より後ろに置く） */
@media (max-width: 1100px) {
  .kv--official .kv__cta { flex-direction: column; align-items: stretch; max-width: 480px; }
  .kv--official .kv__cta .cta-wrap { width: 100%; }
  .kv--official .kv__cta .btn--cta,
  .kv--official .kv__cta .btn--outline-white { width: 100%; align-self: auto; }
}

/* Xアカウントへのリンク */
.x-link {
  color: var(--accent-ink); font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.x-link:hover { color: var(--accent); text-decoration-thickness: 2px; }

/* 実績リスト：中にリンクが入っても崩れないようにする */
.facts li > span { min-width: 0; }

/* ============================================================
   スマホのヘッダーと開閉メニュー
   ・下部に追従ボタンが出るので、ヘッダーのボタンは消す
   ・ハンバーガーの中にカテゴリーを入れる
   ============================================================ */
.nav-cats { display: none; }

@media (max-width: 1023px) {
  /* パネル内の並び順：メニュー → カテゴリー → 検索 */
  .nav-cats { display: block; order: 2; }
  .site-head .nav { order: 1; }
  .site-head .search { order: 3; }
  .nav-cats__head {
    margin: 4px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
    color: var(--fg-faint);
  }
  .nav-cats ul { list-style: none; margin: 0; padding: 0; display: grid; }
  .nav-cats li + li { border-top: 1px solid var(--line); }
  .nav-cats a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 2px; font-size: 15px; line-height: 1.6; text-decoration: none;
  }
  .nav-cats a span {
    flex: none; min-width: 22px; padding: 2px 7px; border-radius: var(--pill);
    background: var(--bg-pink); color: var(--accent-ink);
    font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
  }
}

@media (max-width: 767px) {
  .site-head .btn-head { display: none; }
}

/* ============================================================
   日本語の折り返し
   「サービス利用／開始等条件あり」のような文節の途中で切れたり、
   最終行に1文字だけ残るのを防ぐ
   ============================================================ */
h1, h2, h3, h4,
.kv__title, .cta-band h2, .merit__title, .page-head h1,
.card h3, .cassette__head h3, .author-card h2, .author-mini h2,
.faq__q, .steps__head, .cmp__head, .section__head h2 {
  /* 見出しも素直に左から詰める。auto-phrase と balance は文節ごと次の行へ送るため、
     幅の狭いスマホでは手で改行を入れたように見えて間延びする */
  word-break: normal;
  line-break: strict;
  text-wrap: wrap;
}

p, li, figcaption, dd, dt,
.lead, .kv__lead, .kv__voice, .kv__note, .pr-note,
.cassette__note, .bio, .faq__a, .notice__txt, .cta-sub {
  /* auto-phrase は文節を塊で次行へ送るため、長い文では行末が大きく余る。
     文章は素直に埋めて、禁則処理だけ効かせる */
  word-break: normal;
  line-break: strict;
  text-wrap: wrap;
}

/* 両端揃えをサイト全体の既定にする
   日本語は右端が揃っているほうが自然。body に置いて継承させることで、
   中央揃えを明示している箇所（CTA・メリット・注釈など）はそのまま残る。 */
body { text-align: justify; }

/* ただし見出しは両端揃えにしない。2行になったときに1行目だけ引き伸ばされて間延びする。
   要素セレクタ（詳細度 0,0,1）なので、クラスで中央揃えを指定している箇所
   （.merit__title / .cmp__head / .cmp__table th など）はそのまま残る */
h1, h2, h3, h4, h5, h6, summary, th, caption, dt {
  text-align: left;
}

/* 親から中央揃えを継承していた見出しは、上の指定に負けるので戻す */
.cta-band h2,
.cassette__head h3 {
  text-align: center;
}

/* 運営者カードの名前は、1カラムに畳まれるスマホのときだけ中央寄せ */
@media (max-width: 767px) {
  .author-card h2 { text-align: center; }
}

/* ボタンの中は折り返さない（既存の指定を崩さない） */
.btn, .btn-head, .btn--cta, .btn--outline-white { word-break: normal; text-wrap: nowrap; }

/* ============================================================
   スマホ下部の追従ボタン：地の色を敷かない
   ============================================================ */
@media (max-width: 767px) {
  .sticky-cta {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 0;
  }
}

/* スマホ：見出しと「一覧を見る」が1行に収まらないので縦に積む */
@media (max-width: 767px) {
  .section__head {
    display: grid; grid-template-columns: 1fr; justify-items: start;
    gap: 12px; margin-bottom: 22px;
  }
  .section__head h2 { text-wrap: pretty; }
}

/* ============================================================
   ヘッダーの折りたたみは「スマホだけ」にする
   768〜1023px（小さめのノートPC・タブレット横）は横並びのまま
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-head__inner { position: static; height: 72px; gap: 14px; }

  .nav-check { display: none; }
  .nav-toggle { display: none; }
  .nav-cats { display: none; }
  .nav-panel { display: contents; }

  .site-head .nav { display: flex; align-items: center; margin-left: auto; gap: 18px; order: 1; }
  .site-head .nav ul { display: flex; align-items: center; gap: 18px; margin: 0; padding: 0; list-style: none; }
  .site-head .nav a {
    display: inline; font-size: 13.5px; padding: 4px 0; border-bottom: 2px solid transparent;
  }
  .site-head .search { display: flex; width: auto; order: 2; }
  .site-head .search input { width: 164px; height: 40px; }
  .site-head .search button { height: 40px; }
  .site-head .btn-head { display: inline-flex; margin-left: 0; order: 3; font-size: 13px; padding: 11px 16px; }
  .btn-head__long { display: inline; }
  .btn-head__short { display: none; }
}

/* 900px未満は検索欄を置くと窮屈なので畳む（検索はフッターとサイドバーにある） */
@media (min-width: 768px) and (max-width: 899px) {
  .site-head .search { display: none; }
}

/* 1024〜1100px：検索欄が狭くプレースホルダが切れるので文字と余白を詰める */
@media (min-width: 1024px) and (max-width: 1100px) {
  .site-head .search input { width: 132px; padding-inline: 12px; font-size: 12.5px; }
}

/* タブレット：カセット3つ横並びは窮屈なので2列にする */
@media (min-width: 768px) and (max-width: 1023px) {
  .cassettes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

/* タブレット：FVは左揃えで統一（バナーとカードが中央寄りだと見出しとズレる） */
@media (min-width: 768px) and (max-width: 1023px) {
  .kv--official .kv__banner,
  .kv--official .kv__model { margin-inline: 0; }
  .kv--official .kv__note { text-align: left; }
  .kv--official .kv__cta { justify-content: flex-start; }
}

/* ============================================================
   スマホ：申し込みボタンが帯からはみ出すので幅いっぱいに収める
   （.btn--cta は本来の文字幅が383pxあり、画面幅より広くなる）
   ============================================================ */
@media (max-width: 767px) {
  .cta-band .cta-wrap,
  .inline-cta .cta-wrap,
  .merit__foot .cta-wrap { display: grid; width: 100%; justify-items: stretch; }
  .cta-band .btn--cta,
  .inline-cta .btn--cta,
  .merit__foot .btn--cta {
    width: 100%; max-width: 100%; box-sizing: border-box;
    font-size: 17px; padding: 17px 16px; gap: 10px;
  }
  .cta-band .btn--cta .arrow,
  .inline-cta .btn--cta .arrow,
  .merit__foot .btn--cta .arrow { font-size: 13px; }
}
@media (max-width: 374px) {
  .cta-band .btn--cta,
  .inline-cta .btn--cta,
  .merit__foot .btn--cta { font-size: 15.5px; padding-inline: 12px; }
}

/* ============================================================
   記事上部の立場表記とPR表記
   ============================================================ */
.stance {
  margin: 22px 0 0; padding: 16px 18px;
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm); background: var(--bg-sub);
}
.stance__who { margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--fg); font-weight: 700; }
.stance__pr { margin: 8px 0 0; font-size: 12px; line-height: 1.8; color: var(--fg-muted); }
@media (max-width: 767px) {
  .stance { padding: 14px 15px; }
  .stance__who { font-size: 13px; }
}

/* サイドバーのバナー下の注釈 */
.widget--offer__note {
  margin: 10px 0 0; font-size: 11.5px; line-height: 1.75; color: var(--fg-muted);
  /* 細い段に入るので、見栄えのための改行は入れず素直に折り返す */
  text-wrap: wrap;
}

/* メリット訴求の但し書き */
.merit__list small {
  display: block; margin-top: 6px;
  font-size: 12px; line-height: 1.7; color: var(--fg-muted); font-weight: 400;
}

/* ============================================================
   文の切れ目でだけ改行する
   1文が途中で折り返されないよう、PHP側で文ごとに span に包んである。
   幅の実測に頼らないので、フォントが変わっても文の途中では切れない。
   ============================================================ */
.kv__lead > span,
.stance__who > span { display: block; }

/* スマホは幅が足りず、文ごとの改行がかえって右に大きな余白を作る。
   素直に流して行を埋める（1文が1行に収まらない幅なので意味がない） */
@media (max-width: 767px) {
  .kv__lead > span,
  .stance__who > span { display: inline; }
}

/* 1文が1行に収まる幅。余裕を持たせてフォント差で崩れないようにする */
.kv--official .kv__lead { max-width: 640px; }