@charset "utf-8";
/* ==================================================================
   オンラインパンフレット  [2026-09-15 新設]

   トップページのトーン（sky の地、白いカード、ブランドブルー、
   オレンジは押させたい1か所だけ）にそろえている。
   旧 pamph.css は画像ボタン前提だったので使っていない。
   ================================================================== */

.rd-pamph{
  --p-brand:#1583b8; --p-brand-deep:#0b5f8a; --p-tint:#e4f2f9;
  --p-accent:#ee8722;
  --p-ink:#0e2e44; --p-soft:#4d6d82; --p-faint:#86a0b0;
  --p-rule:#dce7ee; --p-sky:#eef7fc; --p-paper:#fff;
  background:#f7fbfd; padding:46px 0 70px;
  font-family:"Zen Kaku Gothic New","Noto Sans JP","ヒラギノ角ゴ ProN",sans-serif;
  color:var(--p-ink); -webkit-font-smoothing:antialiased;
}

/* ---- 見出し ---- */
.rd-pamph-head{ max-width:760px; margin:0 auto 38px; text-align:center; }
.rd-pamph-head .rd-h2{ margin:10px 0 14px; text-wrap:balance; }
.rd-pamph-head .rd-lead{ margin:0 auto; }

.rd-pamph-facts{
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px;
  list-style:none; margin:22px 0 0; padding:0;
}
.rd-pamph-facts li{
  display:inline-flex; align-items:baseline; gap:4px;
  padding:9px 20px; border-radius:999px;
  background:var(--p-paper); border:1px solid var(--p-rule);
  font-size:13.5px; font-weight:700; color:var(--p-soft);
}
.rd-pamph-facts b{
  font-size:19px; font-weight:900; color:var(--p-brand-deep);
  font-variant-numeric:tabular-nums;
}

/* ---- ひとかたまり ---- */
.rd-pamph-group{ margin:0 0 44px; }
.rd-pamph-gh{ margin:0 0 18px; padding-bottom:14px; border-bottom:2px solid var(--p-rule); }
.rd-pamph-gh h2{
  margin:6px 0 6px; font-size:23px; font-weight:900; line-height:1.5; color:var(--p-ink);
}
.rd-pamph-glead{ margin:0; font-size:14.5px; line-height:1.9; color:var(--p-soft); }

/* ---- 一覧 ---- */
.rd-pamph-list{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px;
  list-style:none; margin:0; padding:0;
}
.rd-pamph-card{
  display:flex; gap:16px; padding:16px;
  background:var(--p-paper); border:1px solid var(--p-rule); border-radius:16px;
  transition:border-color .16s, box-shadow .16s, transform .12s;
}
.rd-pamph-card:hover{
  border-color:#9fcde4; box-shadow:0 12px 30px -20px rgba(14,46,68,.8); transform:translateY(-2px);
}

/* 表紙。紙らしく、わずかに影を落とす */
.rd-pamph-thumb{
  position:relative; flex:none; width:96px; display:block;
  border-radius:7px; overflow:hidden; background:var(--p-sky);
  box-shadow:0 3px 10px rgba(14,46,68,.18);
}
.rd-pamph-thumb img{ display:block; width:100%; height:auto; }
.rd-pamph-kind{
  position:absolute; left:0; bottom:0;
  padding:3px 8px; border-radius:0 7px 0 0;
  background:rgba(11,95,138,.88); color:#fff;
  font-size:10.5px; font-weight:900; letter-spacing:.06em;
}

.rd-pamph-body{ min-width:0; display:flex; flex-direction:column; }
.rd-pamph-body h3{
  margin:2px 0 7px; font-size:15.5px; font-weight:900; line-height:1.55;
  /* 日本語が「ワ／ーキング」のように途中で切れていたので、
     overflow-wrap:anywhere をやめて、禁則を効かせる */
  text-wrap:balance; word-break:normal; overflow-wrap:break-word; line-break:strict;
}
.rd-pamph-body h3 a{ color:var(--p-ink); text-decoration:none; }
.rd-pamph-body h3 a:hover{ color:var(--p-brand-deep); }
.rd-pamph-body p{
  margin:0 0 12px; font-size:13px; line-height:1.85; color:var(--p-soft);
}
.rd-pamph-open{
  display:inline-flex; align-items:center; gap:6px; margin-top:auto; align-self:flex-start;
  padding:9px 18px; border-radius:999px;
  background:var(--p-sky); border:1.5px solid var(--p-rule); color:var(--p-brand-deep);
  font-size:13.5px; font-weight:900; text-decoration:none;
  transition:background-color .16s, border-color .16s;
}
.rd-pamph-open:hover{ background:var(--p-tint); border-color:var(--p-brand); color:var(--p-brand-deep); }

/* ---- 注記 ---- */
.rd-pamph-note{
  max-width:820px; margin:0 auto 30px; padding:16px 20px;
  background:#fff8f0; border:1px solid #f6d3ae; border-radius:14px;
  font-size:13.5px; line-height:1.95; color:#8a5a20;
}

/* ---- 最後の相談導線 ---- */
.rd-pamph-cta{
  max-width:820px; margin:0 auto; padding:30px 26px;
  background:var(--p-paper); border:1px solid var(--p-rule); border-radius:20px; text-align:center;
}
.rd-pamph-cta-h{ margin:0 0 6px; font-size:21px; font-weight:900; line-height:1.6; }
.rd-pamph-cta-note{ margin:0 0 20px; font-size:14px; color:var(--p-soft); }
.rd-pamph-cta-btns{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }

@media only screen and (max-width:900px){
  .rd-pamph{ padding:32px 0 52px; }
  .rd-pamph-head{ margin-bottom:28px; }
  .rd-pamph-facts{ gap:7px; }
  .rd-pamph-facts li{ padding:7px 15px; font-size:12.5px; }
  .rd-pamph-facts b{ font-size:17px; }
  .rd-pamph-group{ margin-bottom:34px; }
  .rd-pamph-gh h2{ font-size:19px; }
  .rd-pamph-glead{ font-size:13.5px; }
  .rd-pamph-list{ grid-template-columns:1fr; gap:10px; }
  .rd-pamph-card{ gap:13px; padding:13px; border-radius:14px; }
  .rd-pamph-thumb{ width:86px; }
  .rd-pamph-body h3{ font-size:15px; }
  .rd-pamph-body p{ font-size:12.5px; margin-bottom:10px; }
  .rd-pamph-note{ margin:0 12px 22px; font-size:13px; }
  .rd-pamph-cta{ margin:0 12px; padding:22px 17px; border-radius:17px; }
  .rd-pamph-cta-h{ font-size:18px; }
  .rd-pamph-cta-btns{ flex-direction:column; }
  .rd-pamph-cta-btns .rd-btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .rd-pamph-card, .rd-pamph-open{ transition:none; }
}

/* ---- 条件の表示  [2026-09-15] ----
   特典は続いているが、当てはまる方は多くない。
   開いてから気づくより、開く前に分かるほうがいい。
   目立たせるのではなく、読み飛ばせない程度に置く。 */
.rd-pamph-cond{
  display:block;                     /* flex だと文字が細切れに折り返していた */
  margin:0 0 12px; padding:9px 11px; border-radius:9px;
  background:#fff8f0; border:1px solid #f6d3ae;
  font-size:12px; line-height:1.8; color:#8a5a20;
  word-break:normal; overflow-wrap:break-word; line-break:strict;
}
.rd-pamph-cond b{
  display:inline-block; margin-right:7px; padding:1px 7px; border-radius:5px;
  background:#e8a75a; color:#fff; vertical-align:1px;
  font-size:10.5px; font-weight:900; letter-spacing:.06em; line-height:1.6;
}
/* 条件つきの群は、ほかと同じ強さで出さない */
.rd-pamph-group:last-of-type .rd-pamph-card{ background:#fbfcfd; }
@media only screen and (max-width:900px){
  .rd-pamph-cond{ font-size:11.5px; padding:8px 10px; }
}