/* ============================================================
   CHIBA LOCAL MATCH — サブページ用スタイル
   （style.css の後に読み込むこと）
   ============================================================ */

/* ---------- ページヘッダー ---------- */
.page-hero{
  position:relative;overflow:hidden;background:#F4B8C8;color:#fff;
  padding:calc(var(--header-h) + 60px) 0 60px;
}
.page-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.55}
.page-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(240,98,146,.78),rgba(255,143,171,.55) 60%,rgba(201,160,220,.38));
}
.page-hero .wrap{position:relative;z-index:2}
.page-hero .sec-label{color:#BFE6FA}
.page-hero .sec-label::before{background:#BFE6FA}
.page-hero h1{font-family:var(--font-jp-head);font-weight:900;font-size:clamp(1.5rem,3.8vw,2.7rem);line-height:1.4}
.page-hero p{margin-top:14px;color:rgba(255,255,255,.86);max-width:720px;font-size:.96rem}

.breadcrumb{
  font-size:.76rem;color:var(--clm-ink-soft);padding:14px 0;
  border-bottom:1px solid var(--clm-line);
}
.breadcrumb ol{display:flex;gap:8px;flex-wrap:wrap}
.breadcrumb li::after{content:"›";margin-left:8px;opacity:.5}
.breadcrumb li:last-child::after{content:""}
.breadcrumb a{color:var(--clm-sea-deep)}

/* ---------- 本文（記事）タイポ ---------- */
.art{padding-block:clamp(46px,6vw,80px)}
.art h2{
  font-size:clamp(1.24rem,2.5vw,1.8rem);margin:2.2em 0 .9em;padding-left:14px;
  border-left:5px solid var(--clm-sea);line-height:1.45;
}
.art h2:first-child{margin-top:0}
.art h3{font-size:clamp(1.04rem,1.9vw,1.28rem);margin:1.9em 0 .6em;color:var(--clm-sea-deep)}
.art p{margin-bottom:1.2em;color:var(--clm-ink-soft)}
.art strong{color:var(--clm-ink)}
.art ul.dots,.art ol.nums{margin:0 0 1.4em;padding-left:1.4em;color:var(--clm-ink-soft)}
.art ul.dots li{list-style:disc;margin-bottom:.45em}
.art ol.nums li{list-style:decimal;margin-bottom:.45em}
.art .note{
  background:var(--clm-sea-soft);border-radius:var(--radius);padding:18px 22px;
  font-size:.9rem;color:var(--clm-sea-deep);font-weight:700;margin:1.6em 0;
}
.art .caution{
  background:var(--clm-coral-soft);border-radius:var(--radius);padding:18px 22px;
  font-size:.9rem;color:var(--clm-coral-deep);font-weight:700;margin:1.6em 0;
}

/* ---------- 情報テーブル ---------- */
.info-table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.92rem}
.info-table th,.info-table td{border-bottom:1px solid var(--clm-line);padding:14px 12px;text-align:left;vertical-align:top}
.info-table th{width:9.5em;color:var(--clm-sea-deep);font-weight:800;background:var(--clm-paper-2);white-space:nowrap}
.info-table td{color:var(--clm-ink-soft)}
@media (max-width:620px){
  .info-table th,.info-table td{display:block;width:auto;border-bottom:none;padding:6px 0}
  .info-table th{background:none;padding-top:14px}
  .info-table tr{display:block;border-bottom:1px solid var(--clm-line);padding-bottom:10px}
}

/* ---------- 縦STEPリスト ---------- */
.step-list{counter-reset:st;display:grid;gap:14px;margin:1.6em 0}
.step-list li{
  counter-increment:st;position:relative;background:#fff;border:1px solid var(--clm-line);
  border-radius:var(--radius);padding:20px 22px 20px 74px;box-shadow:var(--sh-1);
}
.step-list li::before{
  content:counter(st,decimal-leading-zero);position:absolute;left:22px;top:20px;
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#fff;
  background:linear-gradient(135deg,var(--clm-sea),var(--clm-sky));
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.82rem;
}
.step-list b{display:block;font-family:var(--font-jp-head);font-weight:900;margin-bottom:.3em}
.step-list span{font-size:.9rem;color:var(--clm-ink-soft)}

/* ---------- 協力店舗カード ---------- */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:34px}
.shop-card{
  background:#fff;border:1px solid var(--clm-line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--sh-1);transition:transform .25s,box-shadow .25s;
}
.shop-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.shop-card__img{width:100%;aspect-ratio:16/10;background-size:cover;background-position:center;background-color:var(--clm-paper-3)}
.shop-card__body{padding:18px 20px 22px}
.shop-card__cat{font-size:.72rem;font-weight:800;color:var(--clm-coral-deep);letter-spacing:.08em}
.shop-card__body h3{font-size:1rem;margin:.25em 0 .5em}
.shop-card__body p{font-size:.86rem;color:var(--clm-ink-soft)}
.shop-card__ex{
  margin-top:12px;font-size:.8rem;font-weight:800;color:var(--clm-sea-deep);
  background:var(--clm-sea-soft);border-radius:10px;padding:.5em .8em;display:inline-block;
}

/* ---------- 申込フォーム ---------- */
.progress{display:flex;gap:8px;justify-content:center;margin-bottom:34px;flex-wrap:wrap}
.progress li{
  display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:800;color:var(--clm-ink-soft);
  background:#fff;border:1px solid var(--clm-line);border-radius:999px;padding:.45em 1.1em;
}
.progress li.is-on{background:var(--clm-sea);color:#fff;border-color:var(--clm-sea)}
.progress li.is-done{background:var(--clm-sea-soft);color:var(--clm-sea-deep);border-color:transparent}

.form-card{
  background:#fff;border:1px solid var(--clm-line);border-radius:var(--radius-lg);
  padding:clamp(22px,3.4vw,38px);box-shadow:var(--sh-1);margin-bottom:22px;
}
.form-card > h2{
  font-family:var(--font-jp-head);font-weight:900;font-size:1.14rem;margin-bottom:20px;
  padding-bottom:12px;border-bottom:2px solid var(--clm-sea-soft);display:flex;align-items:center;gap:10px;
}
.form-card > h2 em{font-style:normal;font-family:var(--font-display);font-weight:700;color:var(--clm-sea);font-size:.86rem}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 18px}
.form-grid .f-row.full{grid-column:1/-1}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.f-hint{font-size:.74rem;color:var(--clm-ink-soft)}

.check-list{display:grid;gap:12px}
.check-item{
  display:flex;gap:12px;align-items:flex-start;background:var(--clm-paper-2);
  border:1.5px solid var(--clm-line);border-radius:var(--radius-sm);padding:14px 16px;cursor:pointer;
  transition:border-color .2s,background .2s;
}
.check-item:hover{border-color:var(--clm-sea)}
.check-item input{width:20px;height:20px;flex:0 0 20px;margin-top:2px;accent-color:var(--clm-sea)}
.check-item span{font-size:.92rem;font-weight:700}
.check-item.is-err{border-color:var(--clm-pink-deep);background:var(--clm-pink-soft)}
.check-item a{color:var(--clm-sea-deep);text-decoration:underline}

.pay-list{display:grid;gap:12px}
.pay-item{
  display:flex;gap:12px;align-items:flex-start;background:#fff;border:1.5px solid var(--clm-line);
  border-radius:var(--radius-sm);padding:16px 18px;cursor:pointer;transition:border-color .2s;
}
.pay-item:hover,.pay-item.is-on{border-color:var(--clm-sea);background:var(--clm-sea-soft)}
.pay-item input{width:20px;height:20px;flex:0 0 20px;margin-top:2px;accent-color:var(--clm-sea)}
.pay-item b{display:block}
.pay-item small{color:var(--clm-ink-soft);font-size:.82rem}

.photo-drop{
  border:2px dashed var(--clm-line);border-radius:var(--radius);padding:26px;text-align:center;
  background:var(--clm-paper-2);cursor:pointer;transition:border-color .2s;
}
.photo-drop:hover{border-color:var(--clm-sea)}
.photo-drop em{font-style:normal;font-size:1.8rem;display:block;margin-bottom:8px}
.photo-drop span{font-size:.86rem;color:var(--clm-ink-soft)}
.photo-prev{margin-top:14px;width:120px;height:120px;border-radius:16px;object-fit:cover;display:none}

.summary-table{width:100%;border-collapse:collapse;font-size:.9rem}
.summary-table th,.summary-table td{border-bottom:1px solid var(--clm-line);padding:12px 8px;text-align:left;vertical-align:top}
.summary-table th{width:10em;color:var(--clm-ink-soft);font-weight:700;white-space:nowrap}

.form-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.form-actions .btn{min-width:180px}

/* ---------- 完了画面 ---------- */
.done-card{
  text-align:center;background:#fff;border-radius:var(--radius-lg);padding:clamp(30px,5vw,58px);
  box-shadow:var(--sh-2);border:1px solid var(--clm-line);
}
.done-mark{
  width:76px;height:76px;border-radius:50%;margin:0 auto 20px;
  background:linear-gradient(135deg,var(--clm-green),#4FD1A5);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:2rem;
  box-shadow:0 12px 30px rgba(31,169,124,.35);
}
.done-card h2{font-size:clamp(1.3rem,3vw,2rem);margin-bottom:.6em}
.done-num{
  display:inline-block;margin-top:16px;background:var(--clm-sea-soft);color:var(--clm-sea-deep);
  border-radius:12px;padding:.6em 1.4em;font-family:var(--font-display);font-weight:700;letter-spacing:.1em;
}

/* ---------- マイページ ---------- */
.mp-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:start}
@media (max-width:900px){.mp-grid{grid-template-columns:1fr}}
.mp-card{
  background:#fff;border:1px solid var(--clm-line);border-radius:var(--radius-lg);
  padding:clamp(22px,3vw,30px);box-shadow:var(--sh-1);margin-bottom:22px;
}
.mp-card h2{font-size:1.08rem;margin-bottom:16px;display:flex;align-items:center;gap:9px}
.mp-event{
  background:linear-gradient(150deg,#0D5D95,#1B7FC4 60%,#3A9CC9);color:#fff;
  border-radius:var(--radius-lg);padding:clamp(24px,3.4vw,34px);box-shadow:var(--sh-sea);margin-bottom:22px;
}
.mp-event .ev-area{color:#BFE6FA}
.mp-event h2{font-size:clamp(1.14rem,2.4vw,1.5rem);margin:.2em 0 .8em}
.mp-event dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:.9rem}
.mp-event dt{color:rgba(255,255,255,.72);white-space:nowrap}
.mp-status{
  display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:.36em 1em;
  font-size:.8rem;font-weight:800;
}
.mp-status.is-paid{background:var(--clm-green-soft);color:var(--clm-green-deep)}
.mp-status.is-onsite{background:var(--clm-coral-soft);color:var(--clm-coral-deep)}
.mp-status.is-unpaid{background:#FFF1F4;color:var(--clm-pink-deep)}
.mp-list li{display:flex;gap:10px;padding:.45em 0;border-bottom:1px dashed var(--clm-line);font-size:.9rem}
.mp-list li:last-child{border-bottom:none}
.mp-empty{text-align:center;padding:40px 20px;color:var(--clm-ink-soft)}
.mp-empty em{font-style:normal;font-size:2.4rem;display:block;margin-bottom:12px}

/* ---------- イベント一覧のフィルタ ---------- */
.ev-filter{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.ev-filter button{
  border:1.5px solid var(--clm-line);border-radius:999px;padding:.5em 1.2em;
  font-size:.86rem;font-weight:700;background:#fff;transition:.2s;
}
.ev-filter button.is-on{background:var(--clm-sea);color:#fff;border-color:var(--clm-sea)}
.ev-card.is-hide{display:none}

/* ---------- 汎用CTA帯 ---------- */
.cta-band{
  background:linear-gradient(150deg,#F4B8C8,#FF8FAB 55%,#C9A0DC);color:#fff;text-align:center;
  padding:clamp(48px,6vw,80px) 0;
}
.cta-band h2{font-size:clamp(1.3rem,2.8vw,2rem);margin-bottom:.6em}
.cta-band p{color:rgba(255,255,255,.84);margin-bottom:26px}

/* ---------- .art 内のカード見出しは記事見出しスタイルを打ち消す ---------- */
.art .form-card > h2,
.art .mp-card h2,
.art .done-card h2{
  border-left:none;padding-left:0;margin-top:0;
}
.form-card > h2{flex-wrap:wrap}
.art .done-card h2{margin-bottom:.6em}
.art .mp-card h2{
  border-left:4px solid var(--clm-sea);padding-left:12px;
  margin:0 0 16px;font-size:1.05rem;
}
.art .mp-card .summary-table th{color:var(--clm-ink-soft)}