/* =========================================================
   LINE ポイント制度ページ 専用CSS（フル版・2025-10-20）
   - ヒーロー中央寄せ & 訴求強調（100ptごとに1回）
   - 右側の余白が出る問題を解消（container の上書き）
   - ルーレット当選イメージの見せ方（スマホ枠風）
   - クーポン（最大7%＞5%＞3%）カード表現
   - ポイント獲得条件：画像アイコンにも対応
   - 注意事項アコーディオン：＋／－表示
   - スマホ下部固定CTA／進捗バー／ページ内タブ
   ========================================================= */

/* ===== 基本設定 ===== */
:root {
  --brand: #00b900; /* LINEグリーン */
  --ink: #222;
  --subink: #666;
  --bg-soft: #f7faf7;
  --bd: #e6e6e6;
  --accent: #1e88e5;

  /* 種類別カラー（アイコン円背景に使用可） */
  --icon-user: #00b900;
  --icon-target: #7b4ce1;
  --icon-quiz: #e65100;
  --icon-calendar: #1e88e5;
  --icon-share: #0ea5e9;
  --icon-ticket: #ef4444;
  --icon-survey: #8b5cf6;
}
.lp-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}
.u-hide-sm {
  display: none;
}
@media (min-width: 768px) {
  .u-hide-sm {
    display: inline;
  }
}

/* ===== ヒーロー（TOP） ===== */
/* ★ 右側スペース対策：既存テーマの .container 指定を上から確実に上書き */
.cmp_header_wh .container.lp-hero {
  display: grid !important; /* 既存の flex 指定を打ち消し */
  grid-template-columns: 1fr !important;
  width: 100%;
  max-width: 1100px; /* ページ幅に合わせて中央 */
  margin: 0 auto;
  /* padding-left:16px; padding-right:16px; */
  gap: 16px;
  align-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #f2fff4, #e8f8ff);
}
.lp-hero {
  /* 念のための保険（通常時） */
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 24px 0;
  border-radius: 12px;
}
.lp-hero__art {
  display: none;
} /* 右側の飾りは非表示にして中央へ集中 */

.lp-hero__text {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1rem;
}
.lp-hero__title {
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.3;
  margin: 0.2em 0 0.4em;
  color: var(--ink);
}
.lp-hero__lead {
  margin: 0.2em 0 1em;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 700;
  font-size: 0.8em;
}
.lp-hero__note {
  font-size: 0.9rem;
  color: var(--subink);
  margin: 0 0 1rem;
  font-size: 0.8em;
}
.lp-hero__date {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--subink);
}

/* 100pt強調バッジ */
.lp-hero__badge {
  display: inline-block;
  margin: 0.4rem 0 1rem;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--brand);
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.lp-hero__badge span {
  display: inline-block;
  margin-right: 0.5em;
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
  padding: 8px 12px;
}

/* ===== 見出し ===== */
.lp-h3 {
  font-size: 1.35rem;
  margin: 2rem 0 1rem;
  padding-left: 0.8rem;
  border-left: 4px solid var(--brand);
  color: var(--ink);
}

/* ===== ボタン ===== */
.btn-line,
.btn-sub {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 700;
  border: 1px solid transparent;
  transition: 0.2s;
}
.btn-line {
  background: var(--brand);
  color: #fff;
}
.btn-line:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.btn-sub {
  background: #fff;
  border-color: var(--brand);
  color: var(--brand);
}
.btn-sub:hover {
  background: var(--bg-soft);
}

/* ===== ステップ ===== */
.lp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
@media (min-width: 720px) {
  .lp-steps {
    grid-template-columns: repeat(4, 1fr);
  }
}
.lp-step {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 12px 12px 14px;
}
.lp-step__head {
  margin-bottom: 6px;
}
.lp-step__no {
  display: inline-block;
  background: var(--bg-soft);
  color: var(--ink);
  border: 1px solid var(--bd);
  border-radius: 6px;
  padding: 2px 8px;
  font-weight: 700;
}
.lp-step__body p {
  margin: 0.2em 0;
}
.lp-step__cta {
  margin-top: 0.4rem;
}
.lp-small {
  font-size: 0.9rem;
  color: var(--subink);
}

/* ===== ルーレット（当選イメージ＋クーポンカード） ===== */
.lp-roulette {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
}
@media (min-width: 900px) {
  .lp-roulette {
    grid-template-columns: 1fr 1fr;
  }
}

/* 画像をスマホ枠風に見せる */
.lp-roulette__figure {
  margin: 0;
}
.device {
  position: relative;
  padding: 14px 10px 18px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), inset 0 0 0 1px #f4f4f4;
  max-width: 420px;
  margin: auto;
}
.device::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 6px;
  border-radius: 6px;
  background: #e9ecef;
}
.device img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}
.lp-roulette__cap {
  font-size: 0.85rem;
  color: var(--subink);
  text-align: center;
  margin-top: 0.4rem;
}

/* クーポン：カード強調（7%＞5%＞3%） */
.lp-roulette__prizes {
  display: grid;
  gap: 8px;
}
.prizes-cards {
  gap: 10px;
}
.lp-prize {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5em;
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  font-weight: 700;
}
.prize--7 {
  border-color: #f0d9ff;
  background: linear-gradient(180deg, #fff, #faf4ff);
}
.prize--5 {
  border-color: #dff6ff;
  background: linear-gradient(180deg, #fff, #f3fbff);
}
.prize--3 {
  border-color: #e8f8ef;
  background: linear-gradient(180deg, #fff, #f6fbf7);
}
.prizes-cards .lp-prize::before {
  content: "≫";
  color: var(--accent);
  font-weight: 900;
}
.lp-note {
  margin: 0.6rem 0 0;
  color: var(--subink);
}
.lp-em {
  font-weight: 700;
}

/* ===== ポイント獲得条件（カード＋画像アイコン対応） ===== */
.lp-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
@media (min-width: 760px) {
  .lp-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .lp-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
.lp-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 16px 14px 14px 78px; /* アイコン分の余白 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.lp-card__title {
  font-size: 1.05rem;
  margin: 0.1em 0 0.3em;
}
.lp-card__text {
  color: var(--ink);
}
.lp-badge {
  position: absolute;
  top: -10px;
  right: 12px;
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.lp-badge span {
  white-space: nowrap;
}

/* アイコン（円背景・SVG/IMGどちらもOK） */
.lp-icon {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f6ff;
  border: 1px solid #e8eef7; /* 画像アイコンの時に相性の良い淡背景 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  color: #fff; /* 旧：インラインSVGのstroke用（残しておく） */
}
.lp-icon svg {
  width: 28px;
  height: 28px;
}
.lp-icon svg *,
.lp-icon svg path,
.lp-icon svg circle,
.lp-icon svg rect {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
/* 画像アイコン */
.lp-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}
/* 必要に応じて反転（黒→白）させたい時だけ付与 */
.lp-icon--white img {
  filter: brightness(0) invert(1);
}
/* 種別ごとに背景色を少しだけ変える場合（任意） */
.lp-icon--user {
  background: linear-gradient(180deg, rgba(0, 185, 0, 0.12), rgba(0, 185, 0, 0.06));
}
.lp-icon--target {
  background: linear-gradient(180deg, rgba(123, 76, 225, 0.12), rgba(123, 76, 225, 0.06));
}
.lp-icon--quiz {
  background: linear-gradient(180deg, rgba(230, 81, 0, 0.12), rgba(230, 81, 0, 0.06));
}
.lp-icon--calendar {
  background: linear-gradient(180deg, rgba(30, 136, 229, 0.12), rgba(30, 136, 229, 0.06));
}
.lp-icon--share {
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.12), rgba(14, 165, 233, 0.06));
}
.lp-icon--ticket {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.06));
}
.lp-icon--survey {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.12), rgba(139, 92, 246, 0.06));
}

/* ===== 有効期限ボックス ===== */
.lp-kigen {
  margin: 18px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--bg-soft);
}

/* ===== アコーディオン（＋／－と背景） ===== */
.lp-accordion {
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: #fff;
  margin: 12px 0;
}
.lp-accordion[open] {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
.lp-accordion__summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 700;
  outline: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-accordion__summary::-webkit-details-marker {
  display: none;
}
.lp-accordion__summary::before {
  content: "＋";
  display: inline-grid;
  place-items: center;
  width: 1.4em;
  height: 1.4em;
  border: 1px solid var(--bd);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
}
.lp-accordion[open] .lp-accordion__summary::before {
  content: "－";
}
.lp-accordion[open] .lp-accordion__summary {
  background: var(--bg-soft);
}
.lp-accordion__summary:hover {
  background: var(--bg-soft);
}
.lp-accordion__label {
  font-weight: 700;
}
.lp-list {
  margin: 0;
  padding: 0 16px 14px 32px;
}
.lp-list li {
  margin: 0.5em 0;
}

/* ===== 情報ブロック ===== */
.lp-info {
  margin: 0.4rem 0 1rem;
}
.lp-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin: 0;
}
.lp-dl dt {
  font-weight: 700;
}
.lp-dl dd {
  margin: 0;
}

/* ===== CTA ===== */
.lp-cta {
  margin: 12px 0;
}
.lp-cta--bottom {
  margin-top: 16px;
  text-align: center;
}

/* スマホ下部固定CTA（SPのみ表示） */
.lp-sticky-cta {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  width: min(92%, 560px);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--bd);
  border-radius: 999px;
  padding: 8px;
  display: flex;
  justify-content: center;
  z-index: 10;
}
.lp-sticky-cta .btn-line {
  width: 100%;
}
@media (min-width: 960px) {
  .lp-sticky-cta {
    display: none;
  }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .lp-sticky-cta {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
}

/* ===== ページ内ナビ（横スクロールタブ） ===== */
.lp-tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) blur(6px);
  border-bottom: 1px solid var(--bd);
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  overflow: auto;
}
.lp-tabs a {
  white-space: nowrap;
  border: 1px solid var(--bd);
  border-radius: 999px;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  background: #fff;
  flex: 0 0 auto;
}
.lp-tabs a:hover {
  background: var(--bg-soft);
}

/* ===== 進捗バー（0→100pt） ===== */
.lp-progress {
  max-width: 420px;
  margin: 8px auto 14px;
  padding: 8px 10px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: #fff;
}
.lp-progress__bar {
  --w: 0%;
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: #eef3ef;
  overflow: hidden;
}
.lp-progress__bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  background: linear-gradient(90deg, var(--brand), #27c75a);
  border-radius: 999px;
  transition: width 0.5s;
}
@media (prefers-reduced-motion: reduce) {
  .lp-progress__bar::before {
    transition: none;
  }
}
.lp-progress__label {
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--subink);
  text-align: right;
}

/* ===== 細部 ===== */
.lp-section {
  margin-top: 28px;
}
/* ====== 追加・上書きCSS（このブロックを line-points.css の末尾に貼り付け）====== */

/* --- SPのTOP緑（ヒーロー背景）を常に中央にする --- */
/* 既存の背景指定を無効化して、viewport 中央基準の擬似要素で敷く */
.cmp_header_wh .container.lp-hero {
  position: relative;
  overflow: hidden;
  background: transparent !important;
}
.cmp_header_wh .container.lp-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateZ(0); /* 中央基準 + iOSの微ズレ防止 */
  width: 100vw; /* 画面幅いっぱい */
  height: 100%;
  border-radius: inherit;
  background: radial-gradient(130% 160% at 50% 50%, #f2fff4 0 46%, #e8f8ff 100%);
  z-index: -1;
}
/* --- PCの“二重線”を解消＆タブを中央寄せ --- */
/* PCではタブ下線を消し、背景のフィルターも外す。中央配置にする */
@media (min-width: 960px) {
  .lp-tabs {
    border-bottom: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    justify-content: center; /* 中央寄せ */
    overflow: visible; /* 横スクロール解除 */
    padding: 12px 0; /* 余白を整える */
  }
}
/* SPではこれまで通りの見た目（下線あり・チップが並ぶ） */
@media (max-width: 959.98px) {
  .lp-tabs {
    border-bottom: 1px solid var(--bd);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: saturate(180%) blur(6px);
  }
}
/* ===== バス受付：設置場所ボックス ===== */
.lp-loc {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: #f8fbf8;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 4px;
}
.lp-loc__icon {
  width: 20px;
  height: 20px;
  align-self: start;
  border-radius: 4px;
  background: var(--brand);
  /* ピンの形（SVGマスク） */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>') no-repeat center/contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>') no-repeat center/contain;
}
.lp-loc__label {
  font-weight: 700;
  line-height: 1.2;
}
.lp-loc__text {
  margin: 0;
  line-height: 1.6;
}
/* ===== 設置場所ボックス（リンク化） ===== */
.lp-loc {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: #f8fbf8;
  display: grid;
  grid-template-columns: auto 1fr auto; /* 左:ピン 中:文章 右:外部アイコン */
  column-gap: 10px;
  row-gap: 4px;
}
.lp-loc--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.lp-loc--link:hover {
  border-color: var(--brand);
  background: #f5fff7;
}
.lp-loc__icon {
  width: 20px;
  height: 20px;
  align-self: start;
  border-radius: 4px;
  background: var(--brand);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>') no-repeat center/contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>') no-repeat center/contain;
}
.lp-loc__label {
  font-weight: 700;
  line-height: 1.2;
}
.lp-loc__text {
  margin: 0;
  line-height: 1.6;
}
.lp-loc__ext {
  align-self: start;
  width: 16px;
  height: 16px;
  background: #6b7280;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3zM5 5h6v2H7v10h10v-4h2v6H5V5z"/></svg>') no-repeat center/contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3zM5 5h6v2H7v10h10v-4h2v6H5V5z"/></svg>') no-repeat center/contain;
}

/* ===== PCで“縦に伸びて見える”のを避ける工夫 ===== */
/* カードは上揃え。バス受付カードは1行幅（横並びに影響しない） */
@media (min-width: 1024px) {
  .lp-cards {
    align-items: start;
  }
  .lp-card--bus {
    grid-column: 1 / -1;
  }
}
/* ====== バス受付カード：PCの幅・注釈・リンク見え方（追記） ====== */

/* グリッド内のカードは上揃え（縦にビヨンと伸びて見えにくくする） */
.lp-cards {
  align-items: start;
}

/* PC(>=1024px)：バス受付カードを通常幅（1カラム）に戻す */
@media (min-width: 1024px) {
  .lp-card--bus {
    grid-column: auto !important;
  }
}

/* タブレット(>=760px and <1024px)はフル幅のままが読みやすい場合 */
@media (min-width: 760px) and (max-width: 1023.98px) {
  .lp-card--bus {
    grid-column: 1 / -1;
  }
}

/* 注釈を他カードと同じ小ささに（上書き） */
.lp-card .lp-small {
  font-size: 0.85rem !important;
  color: var(--subink);
  line-height: 1.5;
}

/* 設置場所ボックスのリンク化：青色＆下線を消してボックス全体をリンクに */
.lp-loc--link,
.lp-loc--link:link,
.lp-loc--link:visited,
.lp-loc--link:hover,
.lp-loc--link:active,
.lp-loc--link * {
  color: inherit !important;
  text-decoration: none !important;
}

/* 設置場所ボックスの見え方（ホバー時の反応を少し強める） */
.lp-loc--link {
  transition: border-color 0.2s, background-color 0.2s;
}
.lp-loc--link:hover {
  border-color: var(--brand);
  background: #f5fff7;
}
.lp-loc--link:hover .lp-loc__ext {
  background: var(--brand);
}
/* =========================
   PC：ポイント獲得条件の並びを 3列×3行 に
   ・1段目：3枚
   ・2段目：3枚
   ・3段目：2枚（左から2枚、右は空き）
   ・「ポイント有効期限」はその下で1行
   ========================= */

/* 1) PCのカードグリッドを3列に。縦に伸びて見えないように上揃え */
@media (min-width: 1024px) {
  #points .lp-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px; /* 既存が14pxなら好みで 14 に */
    align-items: start; /* カードの上揃え */
  }

  /* 2) バス受付カードは“通常の1枠”で並べる（過去のフル幅指定を打消し） */
  #points .lp-card--bus {
    grid-column: auto !important;
  }
}

/* 3) 「ポイント有効期限」ボックスはグリッドの外＝下に1行で置く
   （HTMLでは <ul class="lp-cards"> の直後にあるので、そのままでOK）
   見た目だけカード風に整える */
#points .lp-kigen {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: var(--bg-soft);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
@media (min-width: 1024px) {
  #points .lp-kigen {
    grid-area: 4 / 1 / 4 / 4;
  }
}
/* 4) 注釈のサイズを他カードと統一（小さめ） */
#points .lp-card .lp-small {
  font-size: 0.85rem !important;
  color: var(--subink);
  line-height: 1.5;
  display: block;
  margin-top: 6px;
}

/* 5) 設置場所リンクはボックス全体をリンクに見せる（下線や青色を抑制） */
#points .lp-loc--link,
#points .lp-loc--link:link,
#points .lp-loc--link:visited,
#points .lp-loc--link:hover,
#points .lp-loc--link:active,
#points .lp-loc--link * {
  color: inherit !important;
  text-decoration: none !important;
}
#points .lp-loc--link {
  transition: border-color 0.2s, background-color 0.2s;
}
#points .lp-loc--link:hover {
  border-color: var(--brand);
  background: #f5fff7;
}
#points .lp-loc--link:hover .lp-loc__ext {
  background: var(--brand);
}
/* =========================
   PC：ポイント獲得条件の並びを 3列×3行 に
   ・1段目：3枚
   ・2段目：3枚
   ・3段目：2枚（左から2枚、右は空き）
   ・「ポイント有効期限」はその下で1行
   ========================= */

/* 1) PCのカードグリッドを3列に。縦に伸びて見えないように上揃え */
@media (min-width: 1024px) {
  #points .lp-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px; /* 既存が14pxなら好みで 14 に */
    align-items: stretch; /* カードの上揃え */
  }

  /* 2) バス受付カードは“通常の1枠”で並べる（過去のフル幅指定を打消し） */
  #points .lp-card--bus {
    grid-column: auto !important;
  }
}

/* 3) 「ポイント有効期限」ボックスはグリッドの外＝下に1行で置く
   （HTMLでは <ul class="lp-cards"> の直後にあるので、そのままでOK）
   見た目だけカード風に整える */
#points .lp-kigen {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: var(--bg-soft);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

/* 4) 注釈のサイズを他カードと統一（小さめ） */
#points .lp-card .lp-small {
  font-size: 1.2rem !important;
  color: var(--subink);
  line-height: 1.5;
  display: block;
  margin-top: 6px;
}

/* 5) 設置場所リンクはボックス全体をリンクに見せる（下線や青色を抑制） */
#points .lp-loc--link,
#points .lp-loc--link:link,
#points .lp-loc--link:visited,
#points .lp-loc--link:hover,
#points .lp-loc--link:active,
#points .lp-loc--link * {
  color: inherit !important;
  text-decoration: none !important;
}
#points .lp-loc--link {
  transition: border-color 0.2s, background-color 0.2s;
}
#points .lp-loc--link:hover {
  border-color: var(--brand);
  background: #f5fff7;
}
#points .lp-loc--link:hover .lp-loc__ext {
  background: var(--brand);
}

/* あかいし　追加CSS */

.br-sp {
  display: block;
}
.br-pc {
  display: none;
}

#content p + p {
  padding: 0;
}

#how-to .lp-small {
  font-size: 0.9rem;
  margin: 6px 0;
}

@media screen and (min-width: 768px) {
  .br-sp {
    display: none;
  }
  .br-pc {
    display: block;
  }
}