/* ============================================================
   perks.css — 特典ページ（/perks/）。サイト本体に合わせフラット直角・影なし。
   ============================================================ */

/* 見出し帯（本体 .list-page-head と同じダークグレー） */
.perk-head { background: #191c22; border-bottom: 1.5px solid #252930; padding: 22px 0; }
.perk-head-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 28px;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.perk-head h1 {
  margin: 0; font-size: var(--fs-xl, 22px); font-weight: 900; letter-spacing: -.5px;
  color: #e4e6ed; display: flex; align-items: center; gap: 10px;
}
.perk-head h1 .bi { color: var(--accent, #c83333); }
.perk-head-sub { color: #aeb4c0; font-size: var(--fs-sm, 13px); font-weight: 600; }
/* パンくずリスト（トップ › 特典 › アクセス解析） */
.perk-crumb { font-size: var(--fs-sm, 13px); margin: 0 0 16px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.perk-crumb a { color: var(--text2, #4a525e); font-weight: 700; }
.perk-crumb a:hover { color: var(--accent, #c83333); }
.perk-crumb-sep { color: var(--text3, #8a929c); }
.perk-crumb-cur { color: var(--text, #1a1c24); font-weight: 800; }
@media (min-width: 901px) { .perk-head h1 { font-size: var(--fs-2xl, 28px); } }
@media (max-width: 640px) { .perk-head-inner { padding: 0 14px; } }
/* モバイル：カードは画像を上に縦積み（画像は全幅16:9） */
@media (max-width: 640px) {
  .perk-card { flex-direction: column; align-items: flex-start; gap: 12px; }
  .perk-card-ico { width: 138px; height: 78px; aspect-ratio: auto; font-size: 2rem; }   /* 115×65のさらに1.2倍 */
  .perk-card-go { display: none; }
}

.perk-wrap { max-width: 1200px; margin: 0 auto; padding: 24px 28px 90px; box-sizing: border-box; }
.perk-lead { font-size: var(--fs-base, 16px); color: var(--text2, #4a525e); line-height: 1.8; margin: 0 0 20px; }

/* 特典カード一覧 */
.perk-list { display: grid; grid-template-columns: 1fr; gap: 14px; }
/* 特典グループの区切り線（他ページの項目区切りと同じ濃い線＝1.5px var(--text)） */
.perk-divider { height: 0; border: 0; border-top: 1.5px solid var(--text, #1a1c24); margin: 6px 0; }
.perk-card {
  display: flex; align-items: center; gap: 16px;
  border: 1.5px solid var(--border2, #c8cdd9); background: var(--bg2, #fff);
  padding: 18px 20px; text-decoration: none; color: inherit;
  transition: border-color .15s, background .15s;
}
.perk-card:hover { border-color: var(--text, #1a1c24); background: var(--bg3, #edf0f7); }
/* 利用可能な特典は目立たせる（アクセントの太い左帯＋わずかな着色） */
.perk-card.is-available { border-color: var(--accent, #c83333); border-left-width: 5px; background: var(--accent-light, rgba(200,51,51,.08)); }
.perk-card.is-available:hover { background: var(--accent-light, rgba(200,51,51,.08)); border-color: var(--accent, #c83333); }
.perk-card.is-available .perk-card-go { color: var(--accent, #c83333); }
/* 未達成でもアイコン・画像は通常の色で表示する（カード全体は減光しない） */

/* タイトル行＋バッジ */
.perk-card-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.perk-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs, 11px); font-weight: 900; letter-spacing: .03em;
  padding: 3px 9px; line-height: 1.4; white-space: nowrap;
}
.perk-badge-on  { background: var(--accent, #c83333); color: #fff; }
.perk-badge-off { background: var(--bg3, #edf0f7); color: var(--text3, #8a929c); border: 1.5px solid var(--border2, #c8cdd9); }
.perk-card-ico {
  flex: 0 0 auto; width: 173px; height: 97px;   /* 16:9（PC：144×81のさらに1.2倍）*/
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 1.5px solid var(--text, #1a1c24); background: var(--bg, #f2f4f8);
  font-size: 1.7rem; color: var(--accent, #c83333);
}
/* マウスパッド／ステッカーを1秒ごとに切り替える重ね表示（perk-card-ico 内で使用） */
.perk-swap { position: relative; width: 100%; height: 100%; display: block; }
.perk-swap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.perk-swap img:nth-child(1) { opacity: 1; }
.perk-swap img:nth-child(2) { animation: perkImgFade 4s ease-in-out infinite; }
@keyframes perkImgFade { 0%, 37.5% { opacity: 0; } 50%, 87.5% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .perk-swap img { animation: none; } .perk-swap img:nth-child(2) { opacity: 0; } }
.perk-card-body { flex: 1 1 auto; min-width: 0; }
.perk-card-title { font-size: var(--fs-lg2, 20px); font-weight: 800; color: var(--text, #1a1c24); }
.perk-card-desc { font-size: var(--fs-base, 16px); color: var(--text2, #4a525e); line-height: 1.75; margin-top: 6px; }
.perk-card-status { font-size: var(--fs-sm, 13px); font-weight: 800; margin-top: 10px; }
.perk-card-status.is-on  { color: #15803d; }
.perk-card-status.is-off { color: var(--text3, #8a929c); }
.perk-card-go { flex: 0 0 auto; font-size: 1.6rem; font-weight: 700; color: var(--text3, #8a929c); }

/* 閲覧期間外の案内 */
.perk-notice {
  display: flex; gap: 16px; align-items: flex-start;
  border: 1.5px solid var(--border2, #c8cdd9); border-left: 5px solid var(--accent, #c83333);
  background: var(--bg2, #fff); padding: 22px 24px;
}
.perk-notice-ico { flex: 0 0 auto; font-size: 2rem; color: var(--accent, #c83333); line-height: 1; }
.perk-notice-title { margin: 0 0 8px; font-size: var(--fs-lg2, 20px); font-weight: 900; color: var(--text, #1a1c24); }
.perk-notice-body p { margin: 0; font-size: var(--fs-base, 16px); line-height: 1.9; color: var(--text2, #4a525e); }
.perk-notice-body b { color: var(--text, #1a1c24); }
.perk-notice-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

.perk-btn {
  display: inline-block; font-size: var(--fs-base, 16px); font-weight: 800;
  border: 1.5px solid var(--accent, #c83333); background: var(--accent, #c83333); color: #fff;
  padding: 10px 20px; text-decoration: none;
}
.perk-btn:hover { background: var(--accent-dark, #a82828); border-color: var(--accent-dark, #a82828); text-decoration: none; }
.perk-btn-sub { background: var(--bg2, #fff); color: var(--accent, #c83333); }
.perk-btn-sub:hover { background: var(--bg3, #edf0f7); border-color: var(--accent, #c83333); }

/* 閲覧中の注記 */
.perk-window-note {
  font-size: var(--fs-base, 16px); font-weight: 700; color: #15803d;
  background: var(--bg2, #fff); border: 1.5px solid var(--border2, #c8cdd9);
  padding: 10px 14px; margin: 0 0 18px;
  display: flex; align-items: center; gap: 8px;
}
.perk-window-note .bi { color: #15803d; }
.perk-foot { font-size: var(--fs-xs, 11px); color: var(--text3, #8a929c); line-height: 1.7; margin: 18px 0 0; }

/* バッジの条件（開閉式 details） */
.perk-acc { margin-top: 22px; border: 1.5px solid var(--border2, #c8cdd9); background: var(--bg2, #fff); }
.perk-acc-sum {
  cursor: pointer; padding: 14px 16px; list-style: none;
  font-size: var(--fs-base, 16px); font-weight: 800; color: var(--text, #1a1c24);
  display: flex; align-items: center; gap: 8px;
}
.perk-acc-sum::-webkit-details-marker { display: none; }
/* テキストは1要素にまとめて通常の行として折り返す（スマホで分断されないように）*/
.perk-acc-sum-txt { flex: 1 1 auto; min-width: 0; }
.perk-acc-sum::after { content: '＋'; flex: 0 0 auto; margin-left: 8px; color: var(--text3, #8a929c); font-weight: 700; }
.perk-acc[open] .perk-acc-sum::after { content: '−'; }
.perk-acc-sum .bi { color: var(--accent, #c83333); }
.perk-acc-sum strong { color: var(--accent, #c83333); }
.perk-acc[open] .perk-acc-sum { border-bottom: 1px solid var(--border, #dde1eb); }
.perk-acc-body { padding: 14px 16px; }
.perk-acc-body > p { font-size: var(--fs-sm, 13px); line-height: 1.8; color: var(--text2, #4a525e); margin: 0 0 12px; }
.perk-acc-body b { color: var(--text, #1a1c24); }
.perk-acc-note { color: var(--text3, #8a929c) !important; margin: 12px 0 0 !important; }
.perk-badge-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm, 13px); }
.perk-badge-tbl th, .perk-badge-tbl td { padding: 9px 10px; border-bottom: 1px solid var(--border, #dde1eb); text-align: left; }
.perk-badge-tbl th { background: var(--bg3, #edf0f7); color: var(--text2, #4a525e); font-weight: 800; }
.perk-badge-tbl td.r, .perk-badge-tbl th.r { text-align: right; font-variant-numeric: tabular-nums; }
.perk-badge-cell { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--text, #1a1c24); }
.perk-badge-ic { display: inline-flex; flex: 0 0 auto; }
.perk-badge-ic svg { width: 22px; height: 22px; display: block; }