/* ================================================================
   料金のお支払い（[hakuryu_payment]）
   2026.9.1 の /payment 改定案がもと。すべて #hp-pay（ID）でスコープ。テーマの #article h2 などID付きの指定にも勝つため／子セレクタ ">" 不使用
   ================================================================ */
/* ---- すべてのセレクタを #hp-pay でスコープ（テーマの .post_content に勝つため）
       子セレクタ ">" は TCD のカスタムCSS欄でエスケープされるので一切使わない ---- */
#hp-pay{
  --blue:#0e95d5;
  --blue-d:#0a76ab;
  --rose:#d76565;
  --ink:#2a2724;
  --sub:#6f6862;
  --line:#e2dcd4;
  --paper:#ffffff;
  --bg:#f8f5f1;
  --bank:#9a5a17;
  --bank-d:#7c4812;
  --num:"Helvetica Neue",Arial,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  max-width:640px;
  margin:0 auto;
  color:var(--ink);
  text-align:left;
  line-height:1.8;
  -webkit-text-size-adjust:100%;
}
#hp-pay *{box-sizing:border-box}

#hp-pay .hp-lead{
  font-size:15px;line-height:1.9;margin:0 0 28px;text-align:center;color:var(--sub);
}
#hp-pay .hp-lead b{color:var(--ink);font-weight:600}
#hp-pay a.hp-feelink{
  display:inline-block;margin-top:6px;font-size:14px;color:var(--blue);
  text-decoration:underline;text-underline-offset:3px;
}

/* ---- ステップ ---- */
#hp-pay .hp-step{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
  padding:22px 22px 24px;
  margin:0 0 16px;
}
#hp-pay h2.hp-h{
  display:flex;align-items:center;gap:10px;
  font-size:17px;font-weight:600;line-height:1.5;
  margin:0 0 16px;padding:0;border:none;background:none;color:var(--ink);
  letter-spacing:.02em;
}
#hp-pay h2.hp-h:before{
  content:attr(data-step);
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--blue);color:#fff;
  font-family:var(--num);font-size:13px;font-weight:700;line-height:1;
}
#hp-pay .hp-hint{font-size:13px;line-height:1.7;color:var(--sub);margin:10px 0 0}
#hp-pay .hp-fromfee{
  display:block;margin:0 0 14px;padding:10px 14px;border-radius:7px;
  background:#f4fafd;border:1px solid #cfe7f5;
  font-size:13px;line-height:1.7;color:var(--blue-d);
}
#hp-pay .hp-req{
  flex:0 0 auto;margin-left:auto;
  font-family:var(--num);font-size:11px;font-weight:700;letter-spacing:.06em;
  color:#fff;background:var(--rose);border-radius:3px;padding:3px 7px;line-height:1;
}

/* ---- 金額タイル ---- */
#hp-pay .hp-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:0;padding:0;list-style:none;
}
#hp-pay button.hp-amt{
  -webkit-appearance:none;appearance:none;
  display:block;width:100%;
  padding:14px 4px;
  border:1.5px solid var(--line);border-radius:8px;
  background:#fcfbf9;color:var(--ink);
  font-family:var(--num);font-size:18px;font-weight:600;line-height:1.2;
  letter-spacing:.01em;cursor:pointer;
  transition:border-color .12s,background-color .12s,color .12s;
}
#hp-pay button.hp-amt .hp-yen{font-size:13px;font-weight:500;margin-left:2px;letter-spacing:0}
#hp-pay button.hp-amt:hover{border-color:#b9d9ec;background:#f4fafd}
#hp-pay button.hp-amt.is-on{
  border-color:var(--blue);background:var(--blue);color:#fff;
  box-shadow:0 2px 10px rgba(14,149,213,.28);
}
#hp-pay button.hp-amt:focus-visible{outline:3px solid rgba(14,149,213,.35);outline-offset:2px}

/* ---- お名前 ---- */
#hp-pay input.hp-name{
  -webkit-appearance:none;appearance:none;
  display:block;width:100%;padding:13px 14px;
  border:1.5px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);
  font-family:inherit;font-size:16px;line-height:1.5;
}
#hp-pay input.hp-name:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(14,149,213,.15)}

/* ---- 合計 ---- */
#hp-pay .hp-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:16px 18px;margin:0 0 18px;
  background:#f4fafd;border:1px solid #cfe7f5;border-radius:8px;
}
#hp-pay .hp-total-l{flex:0 0 auto;font-size:14.5px;color:var(--sub);letter-spacing:.04em}
#hp-pay .hp-total-v{
  flex:1 1 auto;text-align:right;
  font-family:var(--num);font-size:30px;font-weight:700;line-height:1.2;
  color:var(--blue-d);letter-spacing:.01em;
  overflow-wrap:anywhere;
}
#hp-pay .hp-total.is-empty .hp-total-v{color:#b9b1a8;font-size:20px;font-weight:600}

/* ---- 決済ボタン ---- */
#hp-pay .hp-btnwrap{position:relative}
#hp-pay .hp-btnwrap.is-locked .hp-btns{opacity:.22;pointer-events:none;filter:grayscale(1)}
#hp-pay .hp-lock{
  display:none;
  position:absolute;left:0;right:0;top:0;bottom:0;
  align-items:center;justify-content:center;
  z-index:2;text-align:center;
  background:rgba(255,255,255,.55);border-radius:8px;
}
#hp-pay .hp-lock span{
  display:inline-block;padding:11px 20px;border-radius:999px;
  background:#fff;border:1px solid var(--line);
  font-size:14px;line-height:1.6;color:var(--sub);
  box-shadow:0 2px 12px rgba(0,0,0,.05);
}
#hp-pay .hp-btnwrap.is-locked .hp-lock{display:flex}
#hp-pay .hp-btns{min-height:112px}
#hp-pay .hp-slot{margin:0 0 10px}
#hp-pay .hp-slot:last-child{margin-bottom:0}
#hp-pay .hp-pptag{margin:12px 0 0;text-align:center;font-size:11px;color:#a89f96;letter-spacing:.06em}

/* プレビュー用のダミーボタン（本番では出ません） */
#hp-pay button.hp-mock{
  -webkit-appearance:none;appearance:none;
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:48px;border:none;border-radius:6px;cursor:pointer;
  font-family:var(--num);font-size:16px;font-weight:700;letter-spacing:.01em;
}
#hp-pay button.hp-mock.is-card{background:#2c2e2f;color:#fff}
#hp-pay button.hp-mock.is-pp{background:#ffc439;color:#003087}

/* ---- 振込 ---- */
#hp-pay .hp-bank{
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:22px;margin:26px 0 0;
}
#hp-pay h2.hp-bankh{
  font-size:16px;font-weight:600;line-height:1.5;margin:0 0 4px;padding:0;
  border:none;background:none;color:var(--ink);
}
#hp-pay .hp-banknote{font-size:13px;line-height:1.7;color:var(--sub);margin:0 0 14px}
/* ---- 完了 ---- */
#hp-pay .hp-done{display:block;text-align:center;padding:40px 22px;background:var(--paper);border:1px solid #cfe7f5;border-radius:10px}
#hp-pay .hp-done .hp-check{
  width:56px;height:56px;margin:0 auto 18px;border-radius:50%;
  background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:28px;line-height:1;
}
#hp-pay .hp-done h2{font-size:20px;font-weight:600;line-height:1.6;margin:0 0 10px;padding:0;border:none;background:none;color:var(--ink)}
#hp-pay .hp-done p{font-size:14.5px;line-height:1.9;color:var(--sub);margin:0 0 6px}
#hp-pay .hp-done .hp-receipt{
  display:inline-block;margin:18px auto 0;padding:14px 22px;
  background:#f8f5f1;border-radius:8px;text-align:left;
}
#hp-pay .hp-done .hp-receipt span{display:block;font-size:12.5px;color:var(--sub);line-height:1.9}
#hp-pay .hp-done .hp-receipt b{font-family:var(--num);font-size:15px;color:var(--ink);font-weight:700;letter-spacing:.02em}

#hp-pay .hp-fail{display:block;margin:14px 0 0;padding:14px 16px;border-radius:8px;background:#fdf1f1;color:#a33;font-size:14px;line-height:1.8}

#hp-pay .hp-fine{margin:22px 0 0;font-size:12.5px;line-height:1.9;color:#8d857d;text-align:center}
#hp-pay .hp-fine a{color:#8d857d;text-decoration:underline;text-underline-offset:2px}

#hp-pay .hp-hide{display:none}

/* ---- スマホ ---- */
@media screen and (max-width:600px){
  #hp-pay .hp-step{padding:18px 15px 20px;border-radius:9px}
  #hp-pay .hp-bank{padding:18px 15px}
  #hp-pay h2.hp-h{font-size:16px;margin-bottom:14px}
  #hp-pay .hp-grid{gap:7px}
  #hp-pay button.hp-amt{padding:13px 1px;font-size:15.5px}
  #hp-pay button.hp-amt .hp-yen{font-size:11px;margin-left:1px}
  #hp-pay .hp-total{padding:14px 15px;flex-wrap:wrap}
  #hp-pay .hp-total-v{font-size:26px}
}
@media screen and (max-width:360px){
  #hp-pay .hp-grid{grid-template-columns:repeat(3,1fr)}
  #hp-pay button.hp-amt{font-size:15.5px;padding:13px 1px}
}

/* ---- 1.2.0 で追加 ---- */
#hp-pay [hidden]{display:none!important}
#hp-pay p{margin-left:0;margin-right:0}
#hp-pay ul.hp-rules{margin:14px 0 0;padding:0;list-style:none}
#hp-pay ul.hp-rules li{
  position:relative;margin:0 0 4px;padding:0 0 0 1.1em;
  font-size:13px;line-height:1.75;color:var(--sub);list-style:none;background:none;border:none;
}
#hp-pay ul.hp-rules li:before{content:"※";position:absolute;left:0;top:0}
#hp-pay ul.hp-rules li b{color:var(--ink);font-weight:600}
#hp-pay ul.hp-rules a,
#hp-pay .hp-hint a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
#hp-pay a.hp-btn{
  display:block;max-width:360px;margin:14px auto 0;padding:13px 16px;
  border-radius:8px;background:var(--bank);color:#fff;
  font-size:15px;font-weight:600;line-height:1.4;text-align:center;text-decoration:none;
  transition:background-color .12s;
}
#hp-pay a.hp-btn:hover,#hp-pay a.hp-btn:focus{background:var(--bank-d);color:#fff;text-decoration:none}
#hp-pay a.hp-btn.is-sub{background:#fff;color:var(--bank);border:1.5px solid var(--bank)}
#hp-pay a.hp-btn.is-sub:hover,#hp-pay a.hp-btn.is-sub:focus{background:var(--bank);color:#fff}
#hp-pay .hp-over{
  margin:0 0 16px;padding:18px 18px 20px;border-radius:10px;
  background:#fff8e6;border:1px solid #e0a43a;
}
#hp-pay .hp-over-t{margin:0 0 6px;font-size:15px;font-weight:700;line-height:1.7;color:#6e4400}
#hp-pay .hp-over-t b{font-family:var(--num);font-size:17px}
#hp-pay .hp-over-d{margin:0;font-size:13.5px;line-height:1.8;color:#6e4400}
#hp-pay .hp-receipt-sep{margin-top:8px}
#hp-pay .hp-done-back{margin-top:22px}
#hp-pay .hp-done-back a{color:var(--blue);text-decoration:underline}