/* ==========================================================================
   page-price.css
   料金ページ – Mobile-first responsive layout
   Breakpoints: 640 (sm) | 768 (md) | 1024 (lg)
   ========================================================================== */

/* ---------- Base (structural / shared only – no sizing) ---------- */

/* 外壁塗装・屋根塗装プラン */
.price-inner { margin: 0 auto; }
.price-subtitle { text-align: center; color: var(--theme-color-blue); font-weight: 900; position: relative; font-family: "A-OTF Shin Go Pro", "Noto Sans JP", sans-serif; }
.price-subtitle::before { content: ""; position: absolute; left: 0; right: 0; top: 0; background: var(--theme-color-blue); opacity: .9; border-radius: 2px; }
.price-subtitle::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; background: var(--theme-color-blue); opacity: .9; border-radius: 2px; }
.price-coating { margin: 0 auto; }
.price-coating-inner { margin: 0 auto; }
.price-coating-lead { position: relative; text-align: center; font-weight: 900; letter-spacing: .02em; color: var(--theme-color-blue); }
.price-coating-lead span { }
.price-coating-lead strong { position: relative; font-weight: 900; }
.price-coating-burst { position: absolute; height: auto; transform: rotate(35deg); }
.price-coating-burst line { stroke: var(--theme-color-orange); stroke-width: 8; stroke-linecap: round; }
.price-coating-banner { position: relative; margin: 0 auto; }
.price-coating-can { position: absolute; height: auto; transform: translateY(-50%); z-index: 2; }
.price-coating-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); margin: 0; text-align: center; color: var(--theme-color-yellow); font-weight: 900; z-index: 3; }
.price-coating-note { text-align: right; color: rgba(0,0,0,.75); }
.price-grid { display: grid; }
.plan-card { background: #fff; border-radius: 10px; position: relative; border: 1px solid var(--theme-color-grey); }
.plan-badge { position: absolute; height: auto; z-index: 3; }
.plan-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10px 10px 0 0; }
.plan-body { }
.plan-catch { position: relative; text-align: center; }
.plan-catch-text { display: inline; font-weight: 900; border-bottom: 6px solid var(--theme-color-yellow); padding-bottom: 2px; line-height: 1.7; }
.plan-catch::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); background: url("../img/material_pentan_suggest.png") center/contain no-repeat; }
.plan-spec { margin: 0; border-top: 1px solid rgba(0,0,0,.15); border-bottom: 1px solid rgba(0,0,0,.15); }
.plan-row { display: flex; align-items: baseline; justify-content: center; }
.plan-row + .plan-row { border-top: 1px solid rgba(0,0,0,.1); }
.plan-row dt { font-weight: 900; color: #000; }
.plan-row dd { margin: 0; color: #000; font-weight: 800; }
.yen { font-weight: 900; color: var(--theme-color-blue); line-height: 1; }
.year { font-weight: 900; color: var(--theme-color-blue); line-height: 1; }
.unit { font-weight: 900; color: var(--theme-color-blue); }
.plan-row--price { flex-wrap: wrap; }
.plan-process li { position: relative; }
.plan-process li::before { content: ""; position: absolute; left: 0; background: #000; border-radius: 50%; }
.note { display: block; width: 100%; text-align: center; font-weight: 700; color: rgba(0,0,0,.65); }
.plan-cta { display: block; background-color: var(--theme-color-orange); color: #fff; text-align: center; font-weight: 900; border-radius: 8px; text-decoration: none; }
.plan-cta:hover { filter: brightness(1.05); }
.plan-brush { position: absolute; height: auto; pointer-events: none; z-index: 3; }
.plan-attention { margin: 0 auto; }
.plan-attention-spray img { position: relative; z-index: 3; }
.plan-attention-inner { display: flex; }
.plan-attention-text { position: relative; }
.plan-attention-text p { position: relative; margin: 0; font-weight: 900; color: var(--theme-color-blue); z-index: 2; }
.plan-attention-text img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: auto; z-index: 1; pointer-events: none; }

/* その他のプラン */
.price-etc-subtitle { text-align: center; color: var(--theme-color-blue); font-weight: 900; position: relative; font-family: "A-OTF Shin Go Pro", "Noto Sans JP", sans-serif; }
.price-etc-subtitle::before { content: ""; position: absolute; left: 0; right: 0; top: 0; background: var(--theme-color-blue); opacity: .9; border-radius: 2px; }
.price-etc-subtitle::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; background: var(--theme-color-blue); opacity: .9; border-radius: 2px; }
.price-etc-banner { position: relative; margin: 0 auto; }
.price-etc-label { display: block; width: 100%; }
.price-etc-can { position: absolute; height: auto; transform: translateY(-50%); z-index: 2; }
.price-etc-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); margin: 0; text-align: left; font-weight: 900; color: #ffffff; }
.price-etc-text span { border-bottom: 6px solid var(--theme-color-yellow); }
.price-etc-cta { display: flex; justify-content: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 900; border-radius: 6px; }
.btn-orange { background: var(--theme-color-orange); color: #ffffff; }
.btn-orange:hover { opacity: 0.92; }

/* こんな業者に注意 */
.price-warn { padding: 0; background: transparent; border-radius: 0; }
.price-warn .price-inner { position: relative; background: #ffef3a; border-radius: 18px; overflow: visible; }
.warn-head { position: relative; display: flex; align-items: center; justify-content: center; }
.warn-corner-left { position: absolute; z-index: 2; transform: rotate(-12deg); }
.warn-corner-left img { height: auto; }
.warn-card { position: relative; background: #ffffff; border-style: solid; border-color: #d81b60; border-radius: 12px; }
.warn-lead { color: #111111; font-weight: 700; }
.warn-list { list-style: none; padding: 0; display: grid; justify-content: center; font-weight: 900; }
.warn-list li { position: relative; }
.warn-list li::before { content: ""; position: absolute; left: 0; background-image: url(../img/material_alert.png); background-size: contain; background-repeat: no-repeat; background-position: center; }
.warn-note { margin: 0; color: #111111; font-weight: 700; }
.warn-mascot { position: absolute; z-index: 2; }
.warn-mascot img { width: 100%; height: auto; display: block; }

/* 重視して欲しいポイント */
.price-point { border-radius: 0; overflow: visible; }
.price-point .price-inner { position: relative; border-radius: 18px; overflow: hidden; }
.price-point .point-hero { position: relative; display: flex; align-items: center; justify-content: center; background: #ffffff; border-style: solid; border-color: var(--theme-color-blue); border-bottom: none; border-top-left-radius: 18px; border-top-right-radius: 18px; }
.price-point .point-hero img { max-height: 100%; width: auto; display: block; }
.price-point .point-body { position: relative; background: var(--theme-color-blue); border-style: solid; border-color: var(--theme-color-blue); border-top: none; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; }
.price-point .point-copy { margin: 0 auto; }
.price-point .point-title { text-align: center; font-weight: 900; color: var(--theme-color-yellow); }
.price-point .point-text { font-weight: 800; color: #ffffff; }
.price-point .point-text:last-of-type { margin: 0; }
.price-point .point-hl { border-bottom: 6px solid var(--theme-color-yellow); }

/* ---------- Phone (< 640px) ---------- */
@media (width < 640px) {
  .price-inner { margin-bottom: 72px; }
  .price-subtitle { margin: 64px auto 22px; font-size: 22px; padding: 14px 0; }
  .price-subtitle::before,
  .price-subtitle::after { height: 4px; }

  .price-coating { margin-top: 22px; margin-bottom: 22px; }
  .price-coating-inner { padding: 0 12px; }
  .price-coating-lead { margin: 0 0 10px; }
  .price-coating-lead span { font-size: 15px; }
  .price-coating-lead strong { font-size: 18px; }
  .price-coating-label-blue { display: block; width: 100%; height: 80px; }
  .price-coating-burst { right: -14px; top: -18px; width: 34px; }
  .price-coating-can { left: -12px; width: 72px; top: 16%; }
  .price-coating-text { width: calc(100% - 120px); font-size: 18px; line-height: 1.2; }
  .price-coating-note { margin: 3px 0 0; font-size: 8px; line-height: 1.4; }

  .price-grid { grid-template-columns: 1fr; gap: 20px; }
  .plan-badge { left: -18px; top: -28px; width: 120px; }
  .plan-body { padding: 18px 18px; }
  .plan-catch { margin: 0 0 18px 0; padding-right: 0; }
  .plan-catch::after { display: none; }
  .plan-catch-text { border-bottom-width: 5px; }
  .plan-row { padding: 18px 0; flex-direction: column; align-items: center; gap: 8px; grid-template-columns: 86px 1fr; }
  .plan-row dt { text-align: center; }
  .plan-row dd { text-align: center; }
  .yen { font-size: 44px; }
  .year { font-size: 38px; }
  .unit { font-size: 14px; margin-left: 4px; }
  .plan-process li { padding-left: 22px; margin: 8px 0; }
  .plan-process li::before { top: 0.55em; width: 6px; height: 6px; }
  .note { font-size: 11px; }
  .plan-cta { margin: 14px 0px; padding: 14px; }
  .plan-brush { right: -18px; bottom: -18px; width: 84px; }

  .plan-attention { margin-top: 48px; margin-bottom: 48px; }
  .plan-attention-inner { flex-direction: column; }
  .plan-attention-spray img { display: none; }
  .plan-attention-text p { padding: 22px 18px; font-size: 16px; line-height: 1.7; }

  .price-etc-subtitle { margin: 64px auto 40px; font-size: 22px; padding: 14px 0; }
  .price-etc-subtitle::before,
  .price-etc-subtitle::after { height: 4px; }
  .price-etc-banner { padding: 0 12px; }
  .price-etc-can { left: -6px; width: 72px; top: 18%; }
  .price-etc-label { height: 196px; }
  .price-etc-text { width: calc(100% - 120px); font-size: 14px; line-height: 1.6; }
  .price-etc-cta { margin: 16px 0 0; }
  .btn { min-width: 100%; font-size: 16px; padding: 14px 18px; }

  .price-warn .price-inner { padding: 28px 14px; }
  .warn-head { padding: 0; }
  .warn-corner-left { left: -24px; top: -72px; }
  .warn-corner-left img { width: 24%; }
  .warn-card { padding: 20px 18px; border-width: 3px; margin: 18px auto 0; }
  .warn-lead { margin: 0 0 22px; font-size: 14px; line-height: 1.8; }
  .warn-list { font-size: 16px; gap: 12px; margin: 10px 0 22px; }
  .warn-list li { padding-left: 34px; }
  .warn-list li::before { width: 20px; height: 20px; top: 0.3em; }
  .warn-note { font-size: 14px; line-height: 1.8; }
  .warn-mascot { right: -10px; bottom: -18px; width: 80px; }

  .price-point .point-hero { height: 240px; border-width: 6px; }
  .price-point .point-body { padding: 26px 18px 40px; border-width: 6px; }
  .price-point .point-title { font-size: 26px; margin: 0 0 16px; }
  .price-point .point-text { font-size: 15px; margin: 0 0 16px; line-height: 1.7; }
  .price-point .point-hl { border-bottom-width: 5px; }
}

/* ---------- sm / Small tablet (>= 640px) ---------- */
@media (width >= 640px) {
  .price-inner { margin-bottom: 72px; }
  .price-subtitle { margin: 64px auto 22px; font-size: 24px; padding: 14px 0; }
  .price-subtitle::before,
  .price-subtitle::after { height: 4px; }

  .price-coating { margin-top: 24px; margin-bottom: 24px; }
  .price-coating-inner { padding: 0 16px; }
  .price-coating-lead { margin: 0 0 10px; }
  .price-coating-lead span { font-size: 16px; }
  .price-coating-lead strong { font-size: 19px; }
  .price-coating-burst { right: -16px; top: -18px; width: 36px; }
  .price-coating-can { left: -14px; width: 84px; top: 16%; }
  .price-coating-text { width: calc(100% - 130px); font-size: 19px; line-height: 1.2; }
  .price-coating-note { margin: 3px 0 0; font-size: 9px; line-height: 1.4; }

  .price-grid { grid-template-columns: 1fr; gap: 22px; }
  .plan-badge { left: -20px; top: -30px; width: 130px; }
  .plan-body { padding: 20px 22px; }
  .plan-catch { margin: 0 0 20px 0; padding-right: 60px; }
  .plan-catch::after { display: block; width: 60px; height: 60px; right: -16px; }
  .plan-catch-text { border-bottom-width: 6px; }
  .plan-row { padding: 18px 0; gap: 10px; grid-template-columns: 86px 1fr; }
  .plan-row dt { text-align: left; }
  .plan-row dd { text-align: left; }
  .yen { font-size: 46px; }
  .year { font-size: 40px; }
  .unit { font-size: 14px; margin-left: 5px; }
  .plan-process li { padding-left: 24px; margin: 8px 0; }
  .plan-process li::before { top: 0.55em; width: 6px; height: 6px; }
  .note { font-size: 11px; }
  .plan-cta { margin: 14px 0x; padding: 14px; }
  .plan-brush { right: -20px; bottom: -20px; width: 90px; }

  .plan-attention { margin-top: 52px; margin-bottom: 52px; }
  .plan-attention-inner { flex-direction: column; }
  .plan-attention-spray img { display: none; }
  .plan-attention-text p { padding: 24px 20px; font-size: 17px; line-height: 1.7; }

  .price-etc-subtitle { margin: 64px auto 42px; font-size: 24px; padding: 14px 0; }
  .price-etc-subtitle::before,
  .price-etc-subtitle::after { height: 4px; }
  .price-etc-banner { padding: 0 16px; }
  .price-etc-can { left: -6px; width: 84px; top: 18%; }
  .price-etc-label { height: 196px; }
  .price-etc-text { width: calc(100% - 140px); font-size: 15px; line-height: 1.6; }
  .price-etc-cta { margin: 18px 0 0; }
  .btn { min-width: 100%; font-size: 16px; padding: 14px 18px; }

  .price-warn .price-inner { padding: 30px 16px; }
  .warn-head { padding: 4px 8px; }
  .warn-corner-left { left: -24px; top: -68px; }
  .warn-corner-left img { width: 28%; }
  .warn-card { padding: 22px 22px; border-width: 3px; margin: 18px auto 0; }
  .warn-lead { margin: 0 0 22px; font-size: 15px; line-height: 1.8; }
  .warn-list { font-size: 17px; gap: 14px; margin: 10px 0 22px; }
  .warn-list li { padding-left: 36px; }
  .warn-list li::before { width: 22px; height: 22px; top: 0.32em; }
  .warn-note { font-size: 15px; line-height: 1.8; }
  .warn-mascot { right: -10px; bottom: -18px; width: 96px; }

  .price-point .point-hero { height: 260px; border-width: 6px; }
  .price-point .point-body { padding: 28px 22px 46px; border-width: 6px; }
  .price-point .point-title { font-size: 28px; margin: 0 0 18px; }
  .price-point .point-text { font-size: 16px; margin: 0 0 18px; line-height: 1.7; }
  .price-point .point-hl { border-bottom-width: 5px; }
}

/* ---------- md / Tablet (>= 768px) ---------- */
@media (width >= 768px) {
  .price-inner { max-width: calc(100% - 48px); margin-bottom: 96px; }
  .price-subtitle { margin: 72px auto 24px; font-size: 26px; padding: 16px 0; }

  .price-coating { margin-top: 28px; margin-bottom: 28px; }
  .price-coating-inner { padding: 0 24px; }
  .price-coating-lead span { font-size: 16px; }
  .price-coating-lead strong { font-size: 20px; }
  .price-coating-burst { right: -20px; top: -20px; width: 36px; }
  .price-coating-can { left: -18px; width: 110px; top: 18%; }
  .price-coating-text { width: calc(100% - 150px); font-size: 22px; line-height: 1.2; }
  .price-coating-note { font-size: 11px; }

  .price-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .plan-badge { left: -44px; top: -40px; width: 150px; }
  .plan-body { padding: 22px 28px; }
  .plan-catch { margin: 0 0 22px; padding-right: 56px; }
  .plan-catch::after { display: block; width: 56px; height: 56px; right: -12px; }
  .plan-row { padding: 24px 0; flex-direction: row; align-items: baseline; gap: 10px; grid-template-columns: 86px 1fr; }
  .plan-row dt { text-align: left; }
  .plan-row dd { text-align: left; }
  .yen { font-size: 50px; }
  .year { font-size: 40px; }
  .unit { font-size: 15px; margin-left: 6px; }
  .plan-process li { padding-left: 28px; }
  .note { font-size: 12px; }
  .plan-cta { margin: 16px 0px; padding: 16px; }
  .plan-brush { right: -22px; bottom: -22px; width: 96px; }

  .plan-attention { margin-top: 64px; margin-bottom: 64px; }
  .plan-attention-inner { flex-direction: row; gap: 24px; }
  .plan-attention-spray img { display: block; left: 40px; bottom: -24px; width: 160px; }
  .plan-attention-text p { padding: 32px; font-size: 18px; }

  .price-etc-subtitle { margin: 72px auto 48px; font-size: 26px; padding: 16px 0; }
  .price-etc-banner { max-width: calc(100% - 48px); padding: 0; }
  .price-etc-can { left: -6px; width: 120px; top: 22%; }
  .price-etc-label { height: 144px; }
  .price-etc-text { width: calc(100% - 220px); font-size: 16px; line-height: 1.7; }
  .price-etc-cta { margin: 22px 0 0; }
  .btn { min-width: 260px; }

  .price-warn .price-inner { padding: 36px 20px; }
  .warn-head { padding: 18px 16px 26px; }
  .warn-corner-left { left: -24px; top: -64px; }
  .warn-corner-left img { width: 36%; }
  .warn-card { padding: 28px 32px; border-width: 4px; margin: 18px auto 0; max-width: 820px; }
  .warn-lead { margin: 0 0 22px; font-size: 16px; line-height: 1.9; }
  .warn-list { font-size: 18px; gap: 16px; margin: 10px 0 22px; }
  .warn-list li { padding-left: 40px; }
  .warn-list li::before { width: 24px; height: 24px; top: 0.35em; }
  .warn-note { font-size: 16px; line-height: 1.9; }
  .warn-mascot { width: 120px; right: -24px; bottom: -48px; }

  .price-point .point-hero { height: 300px; border-width: 8px; }
  .price-point .point-body { padding: 36px 32px 56px; border-width: 8px; }
  .price-point .point-copy { max-width: 768px; }
  .price-point .point-title { font-size: 34px; margin: 0 0 22px; }
  .price-point .point-text { font-size: 18px; margin: 0 0 22px; line-height: 1.7; }
  .price-point .point-hl { border-bottom-width: 6px; }
}

/* ---------- lg / Desktop (>= 1024px) ---------- */
@media (width >= 1024px) {
  .price-inner { max-width: 896px; margin-bottom: 120px; }
  .price-subtitle { margin: 96px auto 28px; font-size: 32px; padding: 18px 0; }

  .price-coating { margin-top: 32px; margin-bottom: 32px; }
  .price-coating-inner { max-width: 1017px; padding: 0 16px; }
  .price-coating-lead span { font-size: 18px; }
  .price-coating-lead strong { font-size: 24px; }
  .price-coating-burst { right: -28px; top: -28px; width: 42px; }
  .price-coating-can { left: -26px; top: 12%; width: 150px; }
  .price-coating-banner { max-width: 896px; }
  .price-coating-text { width: calc(100% - 190px); font-size: 26px; line-height: 1.2; }
  .price-coating-note { font-size: 12px; }

  .price-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .plan-badge { left: -80px; top: -48px; width: 176px; }
  .plan-body { padding: 24px 48px; }
  .plan-catch { margin: 0 24px 24px 0; padding-right: 72px; }
  .plan-catch::after { width: 72px; height: 72px; right: -24px; }
  .plan-row { padding: 24px 0; gap: 10px; }
  .yen { font-size: 56px; }
  .year { font-size: 46px; }
  .unit { font-size: 16px; margin-left: 6px; }
  .plan-process li { padding-left: 28px; }
  .note { font-size: 12px; }
  .plan-cta { margin: 16px 0px; padding: 16px; }
  .plan-brush { right: -32px; bottom: -32px; width: 112px; }

  .plan-attention { margin-top: 80px; margin-bottom: 80px; }
  .plan-attention-spray img { left: 80px; bottom: -32px; }
  .plan-attention-text p { padding: 42px; font-size: 22px; }

  .price-etc-subtitle { margin: 96px auto 64px; font-size: 32px; padding: 18px 0; }
  .price-etc-banner { max-width: 896px; }
  .price-etc-can { left: -10px; width: 160px; top: 24%; }
  .price-etc-text { width: calc(100% - 300px); font-size: 18px; line-height: 1.7; }

  .price-warn .price-inner { padding: 48px 28px; }
  .warn-corner-left { left: -32px; top: -80px; }
  .warn-corner-left img { width: 50%; }
  .warn-card { padding: 34px 44px; }
  .warn-list { font-size: 20px; }
  .warn-mascot { width: 156px; right: -30px; bottom: -27px; }

  .price-point .point-hero { height: 360px; }
  .price-point .point-body { padding: 44px 60px 74px; }
  .price-point .point-title { font-size: 44px; }
  .price-point .point-text { font-size: 20px; }
}