/* ==========================================================================
   Pondom サイトCSS
   出典：Astra 本番デザイン（design/astra_v2/style.css）を整形して取り込み。
   受領物は design/astra_v2/ に参照専用で置いてある。編集するのはこちら。

   ・:root のトークンは variables.css に集約しているので、ここには持ってきていない
   ・ポン箱（.pon-stage）の見た目は ponbox.css が持つ。ここでは触らない
   ・デザインキット専用のルール（.kit-nav / .swatches / .ogp など）は取り込んでいない
   ========================================================================== */

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:500 16px/1.8 'Noto Sans JP',sans-serif;
}

a {
  color:inherit;
  text-decoration:none;
}

button,input,textarea {
  font:inherit;
}

a,button {
  touch-action:manipulation;
}

img {
  max-width:100%;
  display:block;
}

h1,h2,h3,p {
  margin:0;
}

h1,h2,h3,h4,h5,h6,.round {
  font-family:'Zen Maru Gothic',sans-serif;
  line-height:1.4;
}

h1,h2,h3,h4,h5,h6 {
  font-weight:700;
}

.round {
  font-weight:900;
}

h1 {
  font-size:36px;
  letter-spacing:-.04em;
}

h2 {
  font-size:26px;
}

h3 {
  font-size:20px;
}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:3px solid var(--brand-blue);
  outline-offset:5px;
}

.wrap {
  width:min(1100px,calc(100% - 40px));
  margin:auto;
}

.header {
  background:white;
  border-bottom:1px solid var(--line);
}

.header-inner {
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:16px 0;
}

.logo {
  width:176px;
  height:var(--h-logo);
  object-fit:contain;
}

.tagline {
  display:none;
}

.nav {
  display:flex;
  gap:24px;
  font-size:14px;
  font-weight:800;
}

.nav a:hover {
  color:var(--accent);
}

.hero {
  padding:48px 0 36px;
  position:relative;
  overflow:hidden;
}

.eyebrow {
  font-size:12px;
  letter-spacing:.13em;
  font-weight:900;
  color:var(--brand-blue);
  margin-bottom:12px;
}

.hero h1 {
  max-width:650px;
}

.hero h1 em {
  font-style:normal;
  color:var(--accent);
}

.hero-copy>p:last-child {
  margin-top:18px;
  color:var(--muted);
}

.hero-art {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:245px;
}

.hero-art:before {
  content:'';
  position:absolute;
  inset:20px 10%;
  border-radius:50%;
  background:var(--orange-light);
}

.hero-art .box {
  width:230px;
  transform:rotate(-9deg);
  z-index:1;
}

.sticker {
  position:absolute;
  background:var(--brand-blue);
  color:#fff;
  border:2px solid var(--ink);
  padding:4px 18px;
  border-radius:30px;
  right:0;
  bottom:12px;
  z-index:2;
  transform:rotate(-7deg);
  font-weight:900;
}

/* --------------------------------------------------------------------------
   トップのジャンル選択（丸アイコン）
   -------------------------------------------------------------------------- */
/* スマホ3列・PC6列。1つでも10個でも崩れないように列数を固定する */
.genre-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px 8px;
  justify-items:center;
  margin:0;
}

.genre-circle {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:var(--ink);
  min-width:0;
}

/* 円。他のカードと同じ太さの黒枠・同じ影 */
.genre-circle__ring {
  position:relative;
  width:26vw;              /* スマホは画面幅の約26%（3つ並べて余白が取れる大きさ） */
  max-width:120px;         /* PCは120px */
  aspect-ratio:1;
  border:2px solid var(--ink);
  border-radius:50%;
  background:#fff;
  box-shadow:4px 4px 0 var(--orange-light);
  display:grid;
  place-items:center;
  transition:transform .15s, box-shadow .15s;
}

/* 反応の出しかたも他のカードに合わせる */
.genre-circle:hover .genre-circle__ring {
  transform:translateY(-4px);
  box-shadow:5px 6px 0 var(--ink);
}
.genre-circle:active .genre-circle__ring {
  transform:translateY(2px);
  box-shadow:none;
}

.genre-circle .icon {
  width:42%;
  height:42%;
  color:var(--accent);
  stroke-width:1.8;
}

.genre-circle__name {
  font-family:var(--font-heading, inherit);
  font-weight:900;
  font-size:14px;
  text-align:center;
  line-height:1.4;
}

@media (min-width: 600px) {
  .genre-grid { grid-template-columns:repeat(6, 1fr); gap:22px 16px; }
  .genre-circle__ring { width:120px; }
  .genre-circle .icon { stroke-width:1.6; }
  .genre-circle__name { font-size:15px; }
}

.icon {
  width:30px;
  height:30px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  flex-shrink:0;
}

.small {
  font-size:13px;
  color:var(--muted);
}

.section {
  margin:0 0 52px;
}

.section-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:22px;
}

.section-head h2:before {
  content:'';
  display:inline-block;
  width:8px;
  height:24px;
  background:var(--accent);
  border-radius:6px;
  margin-right:10px;
  vertical-align:-2px;
}

.more {
  font-size:13px;
  color:var(--brand-blue);
  font-weight:800;
}

.cards {
  display:grid;
  gap:20px;
}

.pon-card {
  border:2px solid var(--ink);
  border-radius:var(--radius);
  overflow:hidden;
  background:white;
  transition:transform .15s,box-shadow .15s;
}

.pon-card:hover {
  transform:translateY(-4px);
  box-shadow:5px 6px 0 var(--ink);
}

.card-art {
  background:var(--blue-light);
  height:190px;
  display:flex;
  gap:10px;
  padding:26px 24px 0;
  justify-content:center;
  align-items:flex-end;
  overflow:hidden;
  position:relative;
  border-top:7px solid var(--brand-blue);
}

.card-art.orange {
  background:var(--orange-light);
  border-color:var(--accent);
}

.card-art.pink {
  background:#FFE6F0;
  border-color:var(--genre);
}

.cover {
  background:var(--brand-blue);
  color:white;
  aspect-ratio:3/4;
  width:105px;
  min-width:0;
  border-radius:5px 10px 10px 5px;
  border:1px solid #171717;
  box-shadow:4px 3px 0 #171717;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:12px;
  overflow:hidden;
}

.cover:before {
  content:'';
  position:absolute;
  left:7px;
  top:0;
  bottom:0;
  border-left:1px solid #ffffff60;
}

.cover b {
  font-family:'Zen Maru Gothic',sans-serif;
  font-size:16px;
  line-height:1.5;
  z-index:1;
}

.cover small {
  font-size:9px;
  letter-spacing:.1em;
}

.cover.c1 {
  background:#FF623D;
}

.cover.c2 {
  background:#FFD96D;
  color:var(--ink);
}

.cover.c3 {
  background:#343CFF;
}

.card-art .cover:nth-child(1) {
  transform:rotate(-9deg) translateY(14px);
}

.card-art .cover:nth-child(2) {
  transform:translateY(-6px);
  z-index:1;
}

.card-art .cover:nth-child(3) {
  transform:rotate(9deg) translateY(14px);
}

.card-body {
  padding:20px;
}

.label {
  display:inline-flex;
  font-size:12px;
  font-weight:900;
  background:var(--brand-blue);
  color:white;
  line-height:1.5;
  padding:3px 9px;
  border-radius:6px;
  margin-bottom:8px;
}

.card-body h3 {
  font-size:19px;
  margin-bottom:16px;
}

.card-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  color:var(--muted);
}

.circle-arrow {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  background:var(--accent);
  color:white;
  border-radius:50%;
}

.pick {
  background:var(--brand-blue);
  color:white;
  border-radius:var(--radius);
  border:2px solid var(--ink);
  padding:28px;
  display:flex;
  align-items:center;
  gap:28px;
  position:relative;
  overflow:hidden;
}

.pick .cover {
  width:105px;
  flex-shrink:0;
  transform:rotate(-7deg);
}

.pick .eyebrow {
  color:#FFE187;
}

.pick h3 {
  margin-bottom:12px;
}

.pick p {
  font-size:14px;
}

.chips {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.chip {
  font-size:14px;
  display:inline-flex;
  padding:9px 17px;
  border-radius:12px;
  background:white;
  border:1px solid var(--line);
  font-weight:700;
}

.chip:hover,.chip.selected {
  background:var(--accent);
  color:white;
  border-color:var(--accent);
}

.chip.theme {
  background:var(--orange-light);
  border-color:transparent;
}

.chip.theme:hover {
  background:var(--accent);
}

.chip.tag {
  background:transparent;
  border:1px solid #B9B2B3;
  border-radius:30px;
  padding:5px 12px;
  font-size:12px;
  font-weight:500;
}

.audience {
  background:var(--blue-light);
  color:var(--brand-blue);
  padding:3px 9px;
  border-radius:4px;
  font-size:12px;
  display:inline-block;
  font-weight:800;
}

.footer {
  background:white;
  border-top:1px solid var(--line);
  padding:36px 0;
}

.footer .logo {
  width:135px;
  height:34px;
}

.footer-links {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  font-size:12px;
  margin:20px 0;
}

.footer p {
  font-size:12px;
  color:var(--muted);
}

.crumb {
  font-size:12px;
  color:var(--muted);
  padding:24px 0;
}

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

.page-title h1 {
  font-size:30px;
  margin:10px 0;
}

.page-title p {
  color:var(--muted);
  max-width:760px;
}

.tabs {
  display:flex;
  gap:6px;
  border-bottom:2px solid var(--ink);
  margin-bottom:28px;
}

.tabs a {
  padding:12px 20px;
  font-size:14px;
  font-weight:800;
}

.tabs a.active {
  background:var(--ink);
  color:white;
  border-radius:12px 12px 0 0;
}

.pon-heading {
  text-align:center;
  /* h1 に横幅をしっかり取らせる。.wrap（min(1100px, 100%-40px)）いっぱいまで使う。
     スマホ幅では .wrap のほうが狭いので、この値は効かない。 */
  max-width:1100px;
  margin:auto;
}

.pon-heading h1 {
  font-size:28px;
  margin:12px 0;
}

.pon-heading .chips {
  justify-content:center;
  margin:18px 0;
}

.stage {
  background:var(--orange-light);
  border:2px solid var(--ink);
  border-radius:32px;
  text-align:center;
  padding:32px 20px;
  margin:28px auto 52px;
  max-width:840px;
  position:relative;
}

.stage .box {
  width:230px;
  display:block;
  margin:20px auto;
}

.box {
  overflow:visible;
}

.stage-title {
  font-family:'Zen Maru Gothic';
  font-weight:900;
  font-size:21px;
}

.stage-note {
  font-size:13px;
  margin:14px 0;
  color:var(--muted);
}

.btn {
  border:2px solid var(--ink);
  border-radius:16px;
  padding:15px 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:var(--accent);
  color:var(--on-accent);
  font-weight:900;
  box-shadow:0 5px 0 var(--ink);
  min-height:54px;
  cursor:pointer;
  line-height:1.5;
  text-align:center;
}

.btn:hover,.btn.is-hover {
  background:var(--accent-hover);
  color:var(--on-accent);
  transform:translateY(-2px);
  box-shadow:0 7px 0 var(--ink);
}

.btn:active,.btn.is-pressed {
  color:var(--on-accent);
  transform:translateY(4px);
  box-shadow:0 1px 0 var(--ink);
}

.btn:disabled,.btn.is-disabled {
  background:#E2DDDA;
  color:#777;
  box-shadow:none;
  border-color:#BBB;
  cursor:not-allowed;
  transform:none;
}

.btn.secondary {
  background:white;
  color:var(--ink);   /* 白地なので文字は黒のまま */
}
.btn.secondary:hover { background:var(--orange-light); color:var(--ink); }

.btn.blue {
  background:var(--brand-blue);
  color:var(--on-accent);
}

.spin {
  font-size:24px;
  width:min(100%,360px);
}

/* レアリティのバッジ。公開側では出していない（レア度は結果カードの枠色と
   ステージの見出し文言、OGPの帯色で表す）。部品として残してあるので、
   管理画面や将来の表示で使えるようにしている。 */
.badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 13px;
  border:1.5px solid var(--ink);
  border-radius:30px;
  font-weight:900;
  font-size:13px;
  background:var(--silver);
  color:var(--ink);
}

.badge.gold {
  background:var(--gold);
}

.badge.rainbow {
  background:var(--brand-blue);
  color:white;
  border-color:var(--ink);
  box-shadow:-3px 3px 0 #FF4B20,3px -3px 0 #FFD86B;
}

.result-stage {
  background:var(--blue-light);
  padding-top:18px;
}

.result-stage>.box {
  width:90px;
  margin:0 auto 8px;
}

.result-card {
  background:white;
  border:2px solid var(--ink);
  border-top:9px solid #91A3BA;
  border-radius:24px;
  max-width:660px;
  margin:20px auto 0;
  padding:26px;
  text-align:left;
  box-shadow:0 7px 0 #C6CFDC;
}

.result-card.rainbow {
  border-top-color:var(--brand-blue);
  box-shadow:4px 7px 0 var(--accent),-4px -4px 0 #FFCE4A;
}

.result-card .cover {
  width:130px;
  margin:24px auto;
}

.result-card h2 {
  margin:14px 0;
}

.result-card p {
  font-size:14px;
  margin:14px 0;
}

.actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:22px 0;
}

.actions .btn {
  /* 2本までは横に並び、3本以上になったら折り返す */
  flex: 1 1 220px;
  font-size:15px;
}

/* スマホでは結果カードと同じ縦1列・幅いっぱい */
@media (max-width: 599px) {
  .actions { flex-direction: column; gap: 10px; }
  .actions .btn { flex: 0 0 auto; width: 100%; }
}

.share {
  display:flex;
  gap:12px;
  align-items:center;
}

.work-list {
  display:grid;
  gap:16px;
}

.work-card {
  padding:20px;
  background:white;
  border:1px solid var(--line);
  border-radius:20px;
  display:grid;
  grid-template-columns:32px 75px 1fr;
  gap:15px;
  align-items:start;
}

.rank {
  font-size:26px;
  color:var(--brand-blue);
  font-family:'Zen Maru Gothic';
  font-weight:900;
  line-height:1.2;
}

.work-card.top .rank {
  font-size:34px;
  color:var(--accent);
}

.work-card .cover {
  width:75px;
}

.work-card .cover b {
  font-size:12px;
}

.work-card .cover small {
  font-size:8px;
}

.work-card h3 {
  font-size:17px;
}

.work-card .chips {
  gap:6px;
  margin:10px 0;
}

.work-card .chip {
  padding:3px 8px;
  font-size:12px;
}

.work-card .btn {
  box-shadow:none;
  padding:8px 18px;
  min-height:40px;
  font-size:13px;
}

.intro {
  background:white;
  border-left:5px solid var(--accent);
  padding:24px;
  border-radius:0 20px 20px 0;
  margin:20px 0 32px;
}

.intro p {
  font-size:15px;
  line-height:2;
}

.detail {
  display:grid;
  gap:28px;
  padding:28px;
  background:white;
  border:2px solid var(--ink);
  border-radius:28px;
  margin-bottom:40px;
}

.detail>.cover,
.detail>.cover-amazon>.cover {
  width:170px;
  margin:auto;
}

.detail h1 {
  font-size:30px;
  margin:16px 0;
}

.detail .chips {
  margin:18px 0;
}

.detail p {
  font-size:15px;
}

.prose {
  max-width:760px;
  margin:0 auto 60px;
}

.prose h2 {
  margin:30px 0 16px;
}

.prose p {
  margin:16px 0;
}

.field {
  display:grid;
  gap:8px;
  margin:20px 0;
  font-weight:700;
}

.field input,.field textarea {
  width:100%;
  border:1px solid #8D8583;
  border-radius:12px;
  background:white;
  padding:12px;
}

.field textarea {
  min-height:160px;
}

.notice {
  background:var(--blue-light);
  padding:16px;
  border-radius:12px;
  font-size:14px;
}

table {
  border-collapse:collapse;
  width:100%;
  font-size:14px;
  background:white;
}

th,td {
  text-align:left;
  padding:13px;
  border-bottom:1px solid var(--line);
}

th {
  background:var(--blue-light);
}

.skip {
  position:absolute;
  left:-9999px;
}

.skip:focus {
  left:20px;
  z-index:20;
  background:white;
}

@media(min-width:600px) {
  h1 {
    font-size:60px;
  }

  .header-inner {
    flex-wrap:nowrap;
  }

  .header-brand {
    display:flex;
    align-items:center;
    gap:20px;
  }

  .tagline {
    display:block;
    font-size:12px;
    font-weight:700;
  }

  .logo {
    width:190px;
  }

  .hero {
    display:grid;
    grid-template-columns:1.5fr 1fr;
    align-items:center;
    padding:54px 0 40px;
  }

  .hero-art {
    min-height:310px;
  }

  .hero-art .box {
    width:280px;
  }

  .hero-art:before {
    inset:10px 0;
  }

  .sticker {
    right:10px;
    bottom:10px;
  }

  .cards {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .section {
    margin-bottom:64px;
  }

  .section-head h2 {
    font-size:30px;
  }

  .pick {
    padding:34px 52px;
  }

  .pick .cover {
    width:125px;
  }

  .pick h3 {
    font-size:26px;
  }

  .pick p {
    font-size:15px;
  }

  .theme-section {
    background:#FFECDD;
    padding:32px;
    border-radius:24px;
  }

  .theme-section .chip {
    background:white;
  }

  .pon-heading h1 {
    font-size:38px;
  }

  .stage {
    padding:40px;
  }

  .stage .box {
    width:260px;
  }

  .result-stage>.box {
    width:90px;
    margin:0 auto;
  }

  .result-card {
    padding:32px;
  }

  .result-layout {
    display:grid;
    grid-template-columns:150px 1fr;
    gap:28px;
    align-items:center;
  }

  .result-card .cover {
    width:150px;
  }

  .result-card h2 {
    font-size:26px;
  }

  .work-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .work-list.ranking {
    grid-template-columns:1fr;
  }

  .work-card {
    grid-template-columns:38px 88px 1fr;
    padding:24px;
  }

  .work-card .cover {
    width:88px;
  }

  .detail {
    /* 書影(240px)が入る幅にする */
    grid-template-columns:240px 1fr;
    padding:40px;
  }

  .detail>.cover,
  .detail>.cover-amazon>.cover {
    width:200px;
  }

  .detail h1 {
    font-size:36px;
  }

  .page-title h1 {
    font-size:40px;
  }

  .prose {
    padding-top:12px;
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

.card-art.pink {
  background:#FFE6D8;
  border-color:var(--accent);
}

.chip:active,.audience:active,.tabs a:active,.pon-card:active,.pick:active {
  transform:translateY(2px);
}

.audience:hover {
  background:var(--blue-light);
  border-color:var(--brand-blue);
}

.tabs a:not(.active):hover {
  background:var(--orange-light);
}

.pick:hover {
  background:#272FD9;
}

.footer a:hover,.crumb a:hover {
  color:var(--brand-blue);
}

.is-disabled[aria-disabled=true] {
  pointer-events:none;
  opacity:.45;
}


/* ==========================================================================
   実装調整
   Astra のサンプルは短いタイトル前提。実データは長いので、その分だけ足す。
   ここに書くのは「実データで必要になった最小限」に限る。
   ========================================================================== */

/* 書影なしタイルの作品名。長いタイトルが枠からはみ出さないよう行数で止める */
.cover b {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.work-card .cover b   { -webkit-line-clamp: 3; }
.result-card .cover b { -webkit-line-clamp: 5; }
.pick .cover b        { -webkit-line-clamp: 4; }

/* 書影あり（アップロード画像・Amazonの画像）。
   「PONDOM SELECT」タイルとは別物として扱う。タイルの枠（太い線・大きな角丸・
   3:4の固定比）に押し込むと画像が小さくなり上下が余るので、
   ここでは比率を固定せず、画像そのものの形で出す。 */
.cover-image {
  display: block;
  width: 120px;          /* 一覧の既定。PCは600px以上で140px */
  height: auto;          /* 画像の縦横比に従う（漫画の書影はおよそ2:3） */
  object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(23, 23, 23, .16);
}

/* 作品詳細・結果カードは中央寄せで大きく */
.detail .cover-image      { width: 200px; margin-left: auto; margin-right: auto; }
.result-card .cover-image { width: 200px; margin: 24px auto; }

@media (min-width: 600px) {
  .cover-image              { width: 140px; }
  .detail .cover-image      { width: 240px; }
  .result-card .cover-image { width: 220px; }
}

/* 引いたあとは待機ステージ（箱・ボタン・ヒント）を片付け、結果ステージだけにする。
   「もう1回」で is-drawn が外れて戻る。 */
.pon-play-area.is-drawn [data-pon-play] { display: none; }

/* 結果ステージの地は結果用の淡い青（Astra result.html） */
.result-stage { background: var(--blue-light); }


/* ヘッダーのテキストナビはハンバーガーに置き換えたため、.nav は使っていない。
   （Astra 版の .nav ルールは残してあるが、公開側では出力しない） */

/* 順位を出さない一覧（似た作品・テーマページなど）は、順位ぶんの列を詰める。
   Astra のサンプルは常に順位ありなので、その場合の指定が無い。 */
.work-card--norank { grid-template-columns: 75px 1fr; }
@media (min-width: 600px) {
  .work-card--norank { grid-template-columns: 88px 1fr; }
}

/* 本文中のリンク。Astra の .prose は本文だけを想定していて
   リンクの指定が無く、地の文と見分けがつかないため足す。 */
.prose a:not(.btn):not(.more) {
  color: var(--brand-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   600px未満の囲みの整理
   Astra 版はカードの中にカードが入る形で、スマホだと枠が二重になり
   本文の幅が削られる。600px未満だけ外側の枠を外して、内側の1段に任せる。
   PC幅（600px以上）は Astra のまま。
   ========================================================================== */
@media (max-width: 599px) {

  /* --- ポン本体の結果表示 ------------------------------------------- */
  /* 外側は枠線・角丸・左右パディングを外して、薄い地色の帯だけにする。
     .wrap の外まで広げて画面いっぱいの帯に見せる。 */
  .result-stage {
    border: 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
  }

  /* 内側のカードは画面幅いっぱい（左右16px）。
     レアリティの枠線はこの1段だけで表す。 */
  .result-stage .result-card {
    max-width: none;
    margin: 20px 16px 0;
    padding: 20px;
  }

  /* --- 作品詳細 ------------------------------------------------------ */
  /* 外側のカードを外して、ページの地色の上に直接置く */
  .detail {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    gap: 20px;
  }
  /* 本文と同じく画面幅−32pxに揃える（.wrap の左右20pxぶん外へ広げる） */
  .detail {
    margin-left: calc(50% - 50vw + 16px);
    margin-right: calc(50% - 50vw + 16px);
  }

  /* 代替タイルは中央のまま、高さを8割ほどに（170px × 0.8）。
     実画像は .cover-image 側の指定（SP 200px）を使う */
  .detail > .cover,
  .detail > .cover-amazon > .cover { width: 136px; }

  /* 見出しが長いと「すべて見る ↗」まで折り返してしまうので、そこだけ折らない */
  .section-head .more { white-space: nowrap; }

  /* --- 本文の幅 ------------------------------------------------------ */
  /* .wrap は左右20pxずつ取るので、本文は画面幅−40pxになる。
     読みやすさを優先して、本文だけ画面幅−32pxまで広げる。 */
  .prose {
    max-width: none;
    margin-left: calc(50% - 50vw + 16px);
    margin-right: calc(50% - 50vw + 16px);
  }
}

/* ==========================================================================
   実機確認後の調整
   ========================================================================== */

/* --- 収録作品カード（上段2カラム／中段／下段の縦積み） ------------------- */
.work-card {
  display: block;          /* Astra の3列グリッドをやめる */
  padding: 20px;
}
.work-card__head {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  align-items: start;
}
/* 代替タイルは従来の幅のまま（タイル側の見た目は変えない） */
.work-card__head .cover { width: 76px; }
.work-card__head .cover-image { width: 120px; }
.work-card__title h3 { font-size: 17px; margin-top: 6px; }
/* 書影が広がったぶんタイトル側が狭くなるので、3行で止める */
.work-card__title h3 a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.work-card__body { margin-top: 14px; }
.work-card__body .chips { gap: 6px; margin: 10px 0; }
.work-card__body .chip { padding: 3px 8px; font-size: 12px; }

/* あらすじは3行で止める */
.work-card__synopsis {
  font-size: 13px;
  color: var(--muted);
  margin: 10px 0 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* 下段のボタンは幅いっぱい */
.work-card__more {
  display: flex;
  width: 100%;
  margin-top: 16px;
  box-shadow: none;
  min-height: 44px;
  padding: 10px 18px;
  font-size: 14px;
}

@media (min-width: 600px) {
  .work-card { padding: 24px; }
  .work-card__head { grid-template-columns: 140px 1fr; gap: 18px; }
  .work-card__head .cover { width: 96px; }
  .work-card__head .cover-image { width: 140px; }
}

/* --- 収録一覧の折りたたみ ------------------------------------------------ */
/* HTMLは全件出力済み。JSが動いているときだけ高さを切る。
   display:none を使わないので、クローラからは常に全件見える。
   PCは2列なので2行（4作品）＋次の行の頭が少し覗く高さで切る。 */
.js .collapsible.is-collapsed {
  max-height: 880px;
  overflow: hidden;
  position: relative;
}
/* 続きがあることが分かるように、境界に地色のフェードをかける */
.js .collapsible.is-collapsed::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}
.collapsible__toggle {
  display: flex;
  width: 100%;
  max-width: 420px;
  margin: 20px auto 0;
}

@media (max-width: 599px) {
  /* スマホは1列。3作品ぶん＋4作品目の頭が少し覗く高さで切る */
  .js .collapsible.is-collapsed { max-height: 1300px; }
}

/* --- ポンのテーマ・タグ（箱の下に移動した分） ---------------------------- */
.pon-taxonomy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 40px;
}
.pon-taxonomy .chips { justify-content: center; }

/* --- ポン本体の見出し（ファーストビューに箱を入れるため少し詰める） ------ */
@media (max-width: 599px) {
  .pon-heading h1 { font-size: 24px; }
  .pon-heading { margin-bottom: 4px; }
  .stage { margin: 18px auto 36px; padding: 22px 16px; }
  .crumb { padding: 14px 0; }

  /* パンくずが2行になると箱が押し下がるので、現在ページは1行に省略する */
  .crumb { display: flex; gap: 6px; white-space: nowrap; overflow: hidden; }
  .crumb > span[aria-current] {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
}

/* --- フッターのロゴ（カラー版。ヘッダーより一回り小さく） ---------------- */
.footer .logo { width: auto; height: 32px; }

/* --- 375×667 で箱と開けるボタンをファーストビューに収める ---------------- */
/* 指示の優先順（h1 → リード文 → 箱の大きさ）で詰めている。
   箱の縮小は ponbox.css（v2）の @media(max-width:600px) が受け持つ。
   v2 はステージ自体を 240px にして中の箱だけを scale(.78) するので、
   ここで重ねて scale すると 0.78×0.78 になってしまう。触らない。 */
@media (max-width: 599px) {
  .pon-heading h1 { font-size: 22px; }
  .stage .eyebrow { display: none; }          /* 装飾のみ。読む情報は減らない */
  .stage .stage-title { font-size: 18px; }
  .stage .btn.spin { font-size: 20px; min-height: 52px; }
  .stage-note { margin: 10px 0 6px; }
}

/* ==========================================================================
   結果カードの読む導線（縦積み）
   アフィリンクは全件をプライマリで、最後に「もう1回開ける」をセカンダリで。
   ========================================================================== */
.result-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 22px 0;
}
.result-actions__item {
  width: 100%;
  font-size: 15px;
}
.result-actions .btn__logo {
  height: 18px;
  width: auto;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   600px未満：結果カードの外側16px／内側16px（本文の実効幅 343 − 32 = 311px）
   このブロックはファイルの最後に置く。前に書いた .stage の padding 指定が
   .result-stage にも効いてしまうため、ここで打ち消す。
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
  .result-stage {
    border: 0;
    border-radius: 0;
    padding: 18px 0 24px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
  }
  .result-stage .result-card {
    max-width: none;
    margin: 20px 16px 0;
    padding: 16px;
  }
  /* 書影だけは中央。読者層・タイトル・あらすじ・チップ・ボタンは左揃えのまま */
  .result-stage .result-card .cover,
  .result-stage .result-card .cover-image { margin: 4px auto 16px; }
  .result-actions { margin: 18px 0; }
}

/* ==========================================================================
   ヘッダーのアイコンとドロワー
   ナビはテキストを並べず、検索とハンバーガーの2つだけ。
   ジャンル・テーマが増えても収まるよう、行き先はドロワーにまとめる。
   ========================================================================== */
.header-actions { display: flex; align-items: center; gap: var(--s2); }

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--h-tap);
  height: var(--h-tap);
  border: 0;
  background: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  color: var(--ink);
}
.icon-button:hover { background: var(--orange-light); }
.icon-button .icon { width: 24px; height: 24px; }

/* ハンバーガーは開くと×に変わる */
.icon-button .icon--close { display: none; }
.drawer-open .icon-button .icon--bars  { display: none; }
.drawer-open .icon-button .icon--close { display: block; }

/* --- 暗幕 --- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(23, 23, 23, .45);
  opacity: 0;
  transition: opacity .2s;
  z-index: 40;
}
.drawer-open .drawer-backdrop { opacity: 1; }

/* --- 本体（右からスライドイン） --- */
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 85%;
  max-width: 420px;
  background: var(--bg);
  border-left: var(--border-card);
  z-index: 41;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.2, .7, .2, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer-open .drawer { transform: translateX(0); }

/* 開いている間は背面を動かさない */
.drawer-open, .drawer-open body { overflow: hidden; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky;
  top: 0;
}
.drawer__title { font-family: var(--font-heading); font-weight: 900; }
.drawer__body { padding: var(--s5) var(--s5) var(--s12); }
.drawer__section + .drawer__section { margin-top: var(--s7); }

.drawer__heading {
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--brand-blue);
  margin-bottom: var(--s3);
}
.drawer__heading::before {
  content: '';
  display: inline-block;
  width: 6px; height: 16px;
  background: var(--accent);
  border-radius: 4px;
  margin-right: 8px;
  vertical-align: -3px;
}

.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__list li + li { margin-top: var(--s2); }
.drawer__list a {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 12px 14px;
  min-height: var(--h-tap);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  font-weight: 700;
}
.drawer__list a:hover { background: var(--orange-light); border-color: var(--accent); }
.drawer__list .icon { width: 22px; height: 22px; color: var(--accent); flex: 0 0 auto; }

@media (min-width: 600px) {
  .drawer { width: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer-backdrop { transition: none; }
}

/* ==========================================================================
   オレンジ地のボタンは白文字（--on-accent）。
   #FF4B20 に白は 3.34:1 で、WCAG の「大きい文字」（18px以上の太字）の
   基準 3:1 を満たす。そのため地がオレンジのボタンは 18px を下限にする。
   白地のセカンダリ（.secondary）は黒文字のままなので対象外。
   ========================================================================== */
.btn:not(.secondary):not(.blue):not(:disabled):not(.is-disabled) {
  color: var(--on-accent);
  font-size: 18px;
}
/* 箱を開けるボタンだけは従来どおり大きく出す
   （上の :not() 連鎖より詳細度を上げるため、同じ条件を書いて .spin を足す） */
.btn.spin:not(.secondary):not(.blue):not(:disabled):not(.is-disabled) { font-size: 24px; }
@media (max-width: 599px) {
  .stage .btn.spin:not(.secondary):not(.blue):not(:disabled):not(.is-disabled) { font-size: 20px; }
}

/* テーマチップはホバー・選択でオレンジ地になる。
   .chip.theme（地が --orange-light）が後ろにあるぶん詳細度を上げておかないと、
   薄いオレンジに白文字（1.20:1）になってしまう。 */
.chip.theme:hover,
.chip.theme.selected {
  background: var(--accent);
  color: var(--on-accent);
}

/* 自由タグのチップも同じ理由。.chip.tag は地を透明にしているので、
   ホバー時に白文字だけが残って読めなくなっていた。 */
.chip.tag:hover,
.chip.tag.selected {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

/* タブは文字を折り返さない。狭い幅では余白を詰め、
   それでも入りきらないとき（読者層が増えたとき）は横スクロールにする。 */
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { white-space: nowrap; flex: 0 0 auto; }

@media (max-width: 599px) {
  .tabs a { padding: 12px 12px; }
}

/* --------------------------------------------------------------------------
   検索フォーム（/search/ の見出し直下）
   -------------------------------------------------------------------------- */
.search-form {
  display: flex;
  gap: var(--s3);
  margin: 0 0 var(--s10);
  max-width: 640px;
}
.search-form input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 54px;
  padding: 12px 18px;
  border: var(--border-card);
  border-radius: var(--radius-button);
  background: var(--surface);
  font-weight: 700;
}
.search-form input::placeholder { color: var(--muted); font-weight: 500; }
.search-form .btn { flex: 0 0 auto; }

@media (max-width: 599px) {
  .search-form { flex-direction: column; }
  .search-form .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   本文（.prose）の幅
   Astra 版は 760px の中央寄せだったが、見出しや一覧グリッドより狭く、
   左端も揃わないため、左寄せにして 960px（全角60字相当）までに広げる。
   ポン本体の「このポンについて」、運営ページ、テーマページの本文すべて共通。
   600px未満の指定（画面幅−32px）はこの後に来る方が勝つので、そちらは据え置き。
   -------------------------------------------------------------------------- */
.prose,
.page-title p,
.intro p {
  max-width: 960px;
}
.prose {
  margin-left: 0;
  margin-right: auto;
}

@media (max-width: 599px) {
  .prose {
    max-width: none;
    margin-left: calc(50% - 50vw + 16px);
    margin-right: calc(50% - 50vw + 16px);
  }
}

/* 結果カードの書影は、スマホ・PCとも card の中央に置く。
   Astra 版はPCで「書影｜本文」の2カラムだが、それだと書影がカード中央に来ないため、
   縦積みにして書影だけ中央、文章は左揃えにする。 */
.result-layout {
  display: block;
}
.result-card .cover,
.result-card .cover-image {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   作品カードのチップ
   結果カード・収録一覧・作品詳細・テーマ/検索の作品一覧で共通。
   読者層ラベルとテーマチップは同じ行に並べ、縦幅は読者層に揃える。
   トップの「テーマからさがす」「今話題のタグ」とドロワーは別スコープなので
   ここの指定は効かない（従来のサイズのまま）。
   ========================================================================== */
.result-card .chips,
.work-card .chips,
.detail .chips {
  gap: 8px;
  margin: 12px 0;
}

/* 読者層ラベルとテーマチップを同じ見た目の高さに揃える */
.result-card .audience, .result-card .chip.theme,
.work-card .audience,   .work-card .chip.theme,
.detail .audience,      .detail .chip.theme {
  /* .chip は1pxの枠を持つので、読者層にも透明の枠を入れて高さを合わせる */
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
  padding: 6px 12px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
}

/* 自由タグは別行のまま。丸みと枠線はそのままで字だけ大きくする */
.result-card .chip.tag,
.work-card .chip.tag,
.detail .chip.tag {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  padding: 5px 14px;
  border-radius: 30px;
}


/* ----------------------------------------------------------------
   共有ボタン（アイコンのみ・44pxの円形）
   X と LINE は各社が配布している公式マークの単色版をそのまま使い、
   リンクコピーだけ自作のアイコン（角丸の四角が2枚）。
   ---------------------------------------------------------------- */
.share-btn {
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: background-color .15s, border-color .15s;
}

.share-btn__icon {
  width: 26px;
  height: 26px;
  display: block;
  pointer-events: none;
}

/* X のマークは線が細いぶん、他の2つと見た目の大きさを揃える */
.share-btn[data-share-medium="x"] .share-btn__icon {
  width: 24px;
  height: 24px;
}

.share-btn:hover {
  background: var(--blue-light);
  border-color: var(--brand-blue);
}

.share-btn:active {
  transform: translateY(2px);
}

/* コピー完了：アイコンだけチェックに入れ替える（ボタンの大きさは変えない） */
.share-btn__icon--check {
  display: none;
  color: var(--brand-blue);
}

.share-btn.is-copied {
  border-color: var(--brand-blue);
  background: var(--blue-light);
}

.share-btn.is-copied .share-btn__icon--copy {
  display: none;
}

.share-btn.is-copied .share-btn__icon--check {
  display: block;
}

/* トースト（コピーしました） */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 60;
  max-width: calc(100% - 32px);
  padding: 10px 18px;
  border-radius: 30px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  box-shadow: 0 6px 20px rgba(23,23,23,.25);
  pointer-events: none;
}


/* ==========================================================================
   結果ステージの小さな箱
   待機ステージと同じ PonBox（v3）を、演出なしで「開いた状態」のまま置く。
   独立したSVGを持たないので、箱のデザインが変わればここも一緒に変わる。
   ========================================================================== */
.result-stage > .result-box {
  width: 90px;
  height: 98px;          /* 箱の viewBox 240×260 と同じ比率 */
  margin: 14px auto 8px; /* 開いたふたが上にはみ出すぶんの余白 */
  background: transparent;
}

/* ステージの地とオーラは大きい箱だけのもの。ここでは出さない */
.result-stage > .result-box .pb-backdrop,
.result-stage > .result-box .pb-aura {
  display: none;
}

/* 箱の下に敷かれる角丸の地（ponbox.css の .pb-backdrop）は出さない。
   .stage 自体が地を持っているので二重に見えるため。
   虹のオーラ（.pb-aura）は残す。 */
.stage .pb-backdrop {
  display: none;
}

/* ponbox.css の 240px／scale(.78) より強い指定にして、スマホ幅でも同じ大きさにする */
.result-stage > .result-box .pb-position {
  width: 90px;
  height: 98px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


/* ==========================================================================
   右向きの矢印アイコン（arrow_icon()）
   「↗」を文字で置くとスマホで絵文字になることがあるのでSVGで描く。
   形は「ボックスを開ける」CTAの矢印と同じ。
   ========================================================================== */
.arrow {
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  vertical-align: -0.25em;
  margin-left: 6px;
}

/* ポンカードの丸い矢印の中では、余白なしで中央に置く */
.circle-arrow .arrow {
  width: 17px;
  height: 17px;
  margin: 0;
  vertical-align: 0;
}


/* ==========================================================================
   ヘッダーの出し入れ
   下へスクロールしている間は画面外へ、上へスクロールした瞬間に戻す。
   切り替えは app.js の initStickyHeader() が html に .header-hidden を付け外しする。
   動きを減らす設定では、上の `* { transition: none !important }` が効いて即時切り替わる。
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 30;                 /* 本文より上、ドロワーの暗幕（40）より下 */
  background: #fff;
  /* 浮いていることが分かる細い境界線＋薄い影 */
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(23, 23, 23, .06);
  transition: transform .2s ease;
}

.header-hidden .header {
  transform: translateY(-100%);
}

/* ページ内リンクや ?r= で飛んだとき、見出しがヘッダーの下に潜らないようにする。
   --header-h は app.js が実際の高さを測って入れる（未計測のときは 84px）。 */
html {
  scroll-padding-top: calc(var(--header-h, 84px) + 12px);
}

/* ==========================================================================
   ポンカード（書影の帯をやめた版）
   上端のジャンルカラーのライン → NEW → 呼び名 → リード文（2行）→ メタ＋矢印。
   3列に並べたときに高さが揃うよう、本文を縦フレックスにしてメタを下端に寄せる。
   ========================================================================== */
.pon-card {
  display: flex;
  flex-direction: column;
  border-top: 7px solid var(--card-line, var(--brand-blue));
}

.pon-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 20px 20px;
}

/* 縦フレックスの中では inline-flex でも横に伸びてしまうので、左寄せに留める */
.pon-card .label {
  align-self: flex-start;
}

.pon-card .card-body h3 {
  margin-bottom: 10px;
}

/* リード文は2行まで。3列で高さを揃えるため、行数を固定する */
.pon-card__lead {
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* メタと矢印はカードの下端に揃える */
.pon-card .card-meta {
  margin-top: auto;
}

/* ==========================================================================
   トップのピックアップスライダー
   全スライドをサーバー側で出し、JSは「いま何枚目か」を切り替えるだけ。
   JSが動かないときは横スクロールで全部読める。
   ========================================================================== */
.pickup-slider {
  position: relative;
  margin: 24px 0 40px;
}

.pickup-slider__viewport {
  overflow: hidden;
  border-radius: var(--radius);
}

/* JSが無いあいだは横スクロールで読めるようにしておく */
html:not(.js) .pickup-slider__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.pickup-slider__track {
  display: flex;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}

.pickup-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  display: grid;
  gap: 8px;
  padding: 28px 24px 32px;
  background: var(--orange-light);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
}

.pickup-slide__comment {
  font-size: 12px;
  letter-spacing: .08em;
  font-weight: 900;
  color: var(--brand-blue);
  margin-bottom: 4px;
}

.pickup-slide h2 {
  font-size: 28px;
  margin-bottom: 8px;
}

.pickup-slide__lead {
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 20px;
}

.pickup-slide .btn {
  width: 100%;
}

/* ビジュアル。画像があればそれ、無ければ箱の色を薄くした地に箱を置く */
.pickup-slide__art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 180px;
  border-radius: 20px;
  overflow: hidden;
  /* 箱の色を薄くした地。color-mix が無い環境では淡いオレンジに落ちる */
  background: var(--orange-light);
  background: color-mix(in srgb, var(--slide-tint, var(--accent)) 16%, #fff);
}

.pickup-slide__art .box {
  width: 150px;
  transform: rotate(-7deg);
}

.pickup-slide__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}

/* --- 矢印 --- */
.pickup-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 3px 0 var(--ink);
}

.pickup-slider__arrow:hover { background: var(--orange-light); }
.pickup-slider__arrow:active { transform: translateY(calc(-50% + 2px)); box-shadow: none; }
.pickup-slider__arrow--prev { left: 8px; }
.pickup-slider__arrow--next { right: 8px; }
.pickup-slider__arrow .arrow { width: 20px; height: 20px; margin: 0; vertical-align: 0; }

/* --- ドット --- */
.pickup-slider__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.pickup-slider__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.pickup-slider__dot[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
}

/* 1本しかないときはスライダーのUIを出さない */
.pickup-slider.is-single .pickup-slider__arrow,
.pickup-slider.is-single .pickup-slider__dots { display: none; }

@media (min-width: 600px) {
  .pickup-slide {
    grid-template-columns: 1fr 44%;
    align-items: center;
    gap: 32px;
    padding: 40px;
    min-height: 340px;
  }
  .pickup-slide h2 { font-size: 34px; }
  .pickup-slide .btn { width: auto; }
  .pickup-slide__art { min-height: 260px; height: 100%; }
  .pickup-slide__art .box { width: 190px; }
  .pickup-slider__arrow--prev { left: -10px; }
  .pickup-slider__arrow--next { right: -10px; }
}

/* --- スマホ幅 ------------------------------------------------------------ */
@media (max-width: 599px) {
  /* 箱のイラストだけのスライドは、SPでは箱を出さずテキスト＋ボタンにする。
     スライド用画像（pickup_image）があるスライドは、SPでも画像を出す。 */
  .pickup-slide__art--box { display: none; }

  /* 箱がなくなったぶん、上下を詰める */
  .pickup-slide { padding: 24px 20px 24px; gap: 0; }
  .pickup-slide__lead { margin-bottom: 16px; }

  /* 画像ありのスライドは従来どおり出す。
     縦長の画像を入れられてもスライドが伸びすぎないよう、高さに上限を付ける */
  .pickup-slide:has(.pickup-slide__art--image) { gap: 8px; }
  .pickup-slide__art--image { min-height: 0; max-height: 220px; margin-top: 4px; }

  /* 箱が無くなると、中ほどに矢印を置くと本文に重なる。
     ドットと同じ行（スライドの下）へ移す。 */
  .pickup-slider__arrow {
    top: auto;
    bottom: 0;
    transform: none;
    width: 36px;
    height: 36px;
  }
  .pickup-slider__arrow:active { transform: translateY(2px); box-shadow: none; }
  .pickup-slider__arrow .arrow { width: 18px; height: 18px; }
  .pickup-slider__dots { margin-top: 12px; min-height: 36px; align-items: center; }

  /* 矢印はスライドの中身に関係なく下の行に置く（画像ありのスライドでも同じ）。
     スライドごとに位置を変えると、送るたびに矢印が動いてしまうため。 */
}

/* 動きを減らす設定では、送りのアニメーションもしない */
@media (prefers-reduced-motion: reduce) {
  .pickup-slider__track { transition: none; }
}

/* ==========================================================================
   ヘッダーのロゴ。トップだけ h1、下層は div。見た目は同じにする
   ========================================================================== */
.header-brand .brand {
  margin: 0;
  font-size: 0;
  line-height: 0;
  letter-spacing: normal;
  display: flex;
  align-items: center;
}

/* --------------------------------------------------------------
   Amazon の書影（外部画像＋商品ページへのリンク）
   -------------------------------------------------------------- */
/* ラッパーとリンクはレイアウトに影響させない（中の画像を親の子として扱う） */
.cover-amazon,
.cover-amazon__link { display: contents; }

/* 読み込みに失敗したら、代替タイルに差し替える */
.cover-amazon .cover--fallback { display: none; }
.cover-amazon.is-failed .cover-amazon__link { display: none; }
.cover-amazon.is-failed .cover--fallback { display: flex; }