@charset "UTF-8";
/* ==========================================================
   商品・価格ページへの導線（inc/reform-product-banner.php のショートコード用）
   [reform_product_banner] … .rp-banner ／ [reform_product_link] … .rp-link
   ショートコードがあるページだけで読み込み
   ========================================================== */

/* 大きめのバナー */
.rp-banner{ width:1200px; max-width:calc(100% - 40px); margin:70px auto; box-sizing:border-box;} /* 「費用・工期について」（.box＝1200px）と同じ幅 */
.rp-banner *{ box-sizing:border-box;}
.rp-banner__inner{ background:linear-gradient(90deg,#EAF8FF 0%,#F4FBFF 100%); border:1px solid #D2ECF8; border-radius:30px; padding:40px 50px; display:flex; align-items:center; gap:34px;} /* 角丸30px・左右50px＝費用・工期の中身（1100px）に合わせる */
.rp-banner__art{ width:140px; height:140px; background:#fff; border:4px solid #fff; border-radius:50%; overflow:hidden; flex-shrink:0; box-shadow:0 5px 18px rgba(0,91,133,.12);}
.rp-banner__art img{ width:100%; height:100%; object-fit:cover; display:block;}
.rp-banner__text{ flex:1; min-width:0;}
.rp-banner__en{ color:#00A3DF; font-size:12px; font-weight:bold; letter-spacing:2px; margin:0 0 6px;}
.rp-banner__title{ color:#0D2940; font-size:24px; font-weight:bold; line-height:1.5; margin:0 0 8px;}
.rp-banner__lead{ color:#526675; font-size:14px; line-height:1.8; margin:0;}
.rp-banner__action{ width:280px; flex-shrink:0; text-align:center;}
.rp-banner__price{ color:#0D2940; font-size:15px; font-weight:bold; margin:0 0 10px;}
.rp-banner__price strong{ font-family:Arial,sans-serif; font-size:32px; letter-spacing:-.02em;}
.rp-banner__price small{ color:#607582; font-size:11px; font-weight:normal;}
.rp-banner__btn{ display:block; background:#00A3DF; border:2px solid #00A3DF; color:#fff !important; border-radius:50px; font-size:16px; font-weight:bold; padding:16px 20px; text-decoration:none; transition:.3s; box-shadow:0 4px 12px rgba(0,163,223,.2);}
.rp-banner__btn::after{ content:"›"; margin-left:12px; font-size:19px;}
.rp-banner__btn:hover{ background:#fff; color:#00A3DF !important; opacity:1;}

/* 小さいボタン（リフォームページのカード内） */
.rp-link{ text-align:center; margin:10px 0 0;}
.rp-link a{ display:inline-block; color:#00A3DF !important; background:#fff; border:2px solid #00A3DF; border-radius:50px; font-size:13px; font-weight:bold; padding:8px 20px; text-decoration:none; transition:.3s;}
.rp-link a::after{ content:"›"; margin-left:8px;}
.rp-link a:hover{ background:#00A3DF; color:#fff !important; opacity:1;}

@media screen and (max-width:760px){
.rp-banner{ max-width:calc(100% - 40px); margin:50px auto;} /* スマホの費用・工期と同じ左右20px */
.rp-banner__inner{ display:block; text-align:center; padding:30px 18px; border-radius:20px;}
.rp-banner__art{ width:110px; height:110px; margin:0 auto 14px;}
.rp-banner__title{ font-size:19px;}
.rp-banner__lead{ font-size:13px; margin-bottom:16px;}
.rp-banner__action{ width:100%;}
.rp-banner__price strong{ font-size:28px;}
.rp-banner__btn{ font-size:15px; padding:15px 16px;}
.rp-link a{ font-size:12px; padding:7px 14px;}
}