@charset "UTF-8";
/* ==========================================================
   商品カード（一覧用）の共通CSS（2026-10-04）
   HTML：inc/reform-product-helpers.php の takamasa_rp_card()
   使う場所：TOTO製品一覧（#reform-maker）／カテゴリー一覧（#reform-category）／トイレリフォームのトップ（#toilet-reform）
   見た目はTOTO製品一覧のカードと同じ。キャッチコピーはトップ・カテゴリー一覧だけ（最大2行）
   読み込み：inc/reform-product-banner.php（上の3ページだけ）
   ========================================================== */
#reform-maker .rp-card,
#reform-category .rp-card,
#toilet-reform .rp-card{ min-width:0; height:100%; background:#fff; border:1px solid #D9E9F1; border-radius:12px; overflow:hidden; box-shadow:0 6px 20px rgba(0,64,96,.07); display:flex; flex-direction:column; text-align:left;}
#reform-maker .rp-card a,
#reform-category .rp-card a,
#toilet-reform .rp-card a{ color:inherit; text-decoration:none;}
#reform-maker .rp-card p,
#reform-category .rp-card p,
#toilet-reform .rp-card p{ margin:0;}
#reform-maker .rp-card .img,
#reform-category .rp-card .img,
#toilet-reform .rp-card .img{ display:block; height:190px; position:relative; overflow:hidden; flex-shrink:0; background:#f5fafc;}
#reform-maker .rp-card .img img,
#reform-category .rp-card .img img,
#toilet-reform .rp-card .img img{ width:100%; height:100%; object-fit:cover; vertical-align:bottom; transition:transform .4s;}
/* ホバーは画像の少しのズームだけ（カードは動かさない） */
#reform-maker .rp-card:hover .img img,
#reform-category .rp-card:hover .img img,
#toilet-reform .rp-card:hover .img img{ transform:scale(1.04);}
#reform-maker .rp-card .body,
#reform-category .rp-card .body,
#toilet-reform .rp-card .body{ flex:1; display:flex; flex-direction:column; padding:14px 15px 16px;}
#reform-maker .rp-card .brand,
#reform-category .rp-card .brand,
#toilet-reform .rp-card .brand{ align-self:flex-start; width:auto; color:#fff; background:#E60012; border-radius:3px; font-family:Arial,sans-serif; font-size:10px; font-weight:bold; letter-spacing:.04em; line-height:1.5; padding:3px 7px; margin:0 0 7px;}
#reform-maker .rp-card .name,
#reform-category .rp-card .name,
#toilet-reform .rp-card .name{ min-height:0; color:#0D2940; font-size:16px; font-weight:bold; line-height:1.5; letter-spacing:.04em; overflow-wrap:anywhere; margin:0 0 12px; padding:0; border:0; background:none; text-align:left;}
#reform-maker .rp-card .name a:hover,
#reform-category .rp-card .name a:hover,
#toilet-reform .rp-card .name a:hover{ color:#087DB7;}
#reform-maker .rp-card .name:has(+ .catch),
#reform-category .rp-card .name:has(+ .catch),
#toilet-reform .rp-card .name:has(+ .catch){ margin-bottom:6px;}
#reform-maker .rp-card .catch,
#reform-category .rp-card .catch,
#toilet-reform .rp-card .catch{ color:#5a6d79; font-size:12px; line-height:1.65; margin:0 0 12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
#reform-maker .rp-card .price-label,
#reform-category .rp-card .price-label,
#toilet-reform .rp-card .price-label{ align-self:flex-start; width:auto; max-width:100%; color:#00A3DF; background:#F0FAFE; border:1px solid #CBE7F3; border-radius:3px; font-size:10px; font-weight:bold; line-height:1.5; padding:2px 7px; margin:auto 0 4px;}
#reform-maker .rp-card .price,
#reform-category .rp-card .price,
#toilet-reform .rp-card .price{ color:#D7263D; font-size:14px; font-weight:bold; line-height:1.4; margin:0 0 14px;}
#reform-maker .rp-card .price strong,
#reform-category .rp-card .price strong,
#toilet-reform .rp-card .price strong{ font-family:Arial,sans-serif; font-size:26px; letter-spacing:.01em; line-height:1.2;}
#reform-maker .rp-card .price small,
#reform-category .rp-card .price small,
#toilet-reform .rp-card .price small{ color:#607582; font-size:10px; font-weight:normal;}
#reform-maker .rp-card .price.pending strong,
#reform-category .rp-card .price.pending strong,
#toilet-reform .rp-card .price.pending strong{ color:#526775; font-size:20px;}
#reform-maker .rp-card .detail,
#reform-category .rp-card .detail,
#toilet-reform .rp-card .detail{ display:block; color:#fff; background:#00A3DF; border:2px solid #00A3DF; border-radius:999px; box-shadow:none; text-align:center; font-size:13px; font-weight:bold; line-height:1.5; padding:10px 12px; position:relative; transition:background .25s, border-color .25s;}
#reform-maker .rp-card .detail::after,
#reform-category .rp-card .detail::after,
#toilet-reform .rp-card .detail::after{ content:""; width:6px; height:6px; border-top:2px solid #fff; border-right:2px solid #fff; position:absolute; right:16px; top:50%; transform:translateY(-50%) rotate(45deg); margin:0;}
#reform-maker .rp-card .detail:hover,
#reform-category .rp-card .detail:hover,
#toilet-reform .rp-card .detail:hover{ color:#fff; background:#087DB7; border-color:#087DB7; opacity:1;}

/* ---------- スマホ ---------- */
@media (max-width:480px){
#reform-maker .rp-card .img,
#reform-category .rp-card .img,
#toilet-reform .rp-card .img{ height:128px;}
#reform-maker .rp-card .body,
#reform-category .rp-card .body,
#toilet-reform .rp-card .body{ padding:10px 10px 12px;}
#reform-maker .rp-card .name,
#reform-category .rp-card .name,
#toilet-reform .rp-card .name{ font-size:13px; margin-bottom:8px;}
#reform-maker .rp-card .name:has(+ .catch),
#reform-category .rp-card .name:has(+ .catch),
#toilet-reform .rp-card .name:has(+ .catch){ margin-bottom:5px;}
#reform-maker .rp-card .catch,
#reform-category .rp-card .catch,
#toilet-reform .rp-card .catch{ font-size:10.5px; margin-bottom:8px;}
#reform-maker .rp-card .price-label,
#reform-category .rp-card .price-label,
#toilet-reform .rp-card .price-label{ font-size:9px; padding:2px 5px;}
#reform-maker .rp-card .price,
#reform-category .rp-card .price,
#toilet-reform .rp-card .price{ font-size:12px; margin-bottom:10px;}
#reform-maker .rp-card .price strong,
#reform-category .rp-card .price strong,
#toilet-reform .rp-card .price strong{ font-size:20px;}
#reform-maker .rp-card .price small,
#reform-category .rp-card .price small,
#toilet-reform .rp-card .price small{ display:block; font-size:9px;}
#reform-maker .rp-card .detail,
#reform-category .rp-card .detail,
#toilet-reform .rp-card .detail{ font-size:12px; padding:8px 10px;}
#reform-maker .rp-card .detail::after,
#reform-category .rp-card .detail::after,
#toilet-reform .rp-card .detail::after{ right:10px; width:5px; height:5px;}
}

/* ---------- 「TOTO製品をすべて見る」の帯（トップ・カテゴリー一覧。HTMLは takamasa_rp_all_products_box()） ---------- */
#toilet-reform .all-products, #reform-category .all-products{ display:flex; align-items:center; justify-content:space-between; gap:24px; background:#eef8fc; border-radius:12px; padding:22px 28px; margin-top:24px;}
#toilet-reform .all-products .text, #reform-category .all-products .text{ color:#4E606D; font-size:13px; line-height:1.7; margin:0;}
#toilet-reform .all-products .text strong, #reform-category .all-products .text strong{ display:block; color:#0D2940; font-size:17px; margin-bottom:2px;}
#toilet-reform .all-products .btn, #reform-category .all-products .btn{ flex-shrink:0; color:#fff; background:#00A3DF; border:2px solid #00A3DF; border-radius:999px; font-size:15px; font-weight:bold; text-decoration:none; padding:14px 50px 14px 36px; position:relative; transition:background .25s, color .25s;}
#toilet-reform .all-products .btn::after, #reform-category .all-products .btn::after{ content:""; width:7px; height:7px; border-top:2px solid currentColor; border-right:2px solid currentColor; position:absolute; right:22px; top:50%; transform:translateY(-50%) rotate(45deg);}
#toilet-reform .all-products .btn:hover, #reform-category .all-products .btn:hover{ color:#00A3DF; background:#fff; opacity:1;}
@media screen and (max-width:760px){
#toilet-reform .all-products, #reform-category .all-products{ flex-direction:column; align-items:stretch; text-align:center; gap:14px; padding:20px 16px;}
#toilet-reform .all-products .text strong, #reform-category .all-products .text strong{ font-size:15px;}
#toilet-reform .all-products .text, #reform-category .all-products .text{ font-size:12px;}
#toilet-reform .all-products .btn, #reform-category .all-products .btn{ text-align:center; padding:13px 40px 13px 30px;}
}