@charset "UTF-8";
/* ==========================================================
   TOTO製品一覧専用CSS（page-toto.php のみで読み込み。2026-10-02）
   構成は参考サイト（カードを並べるだけ）、色・形はサイトに合わせて自社のデザイン
   既存テーマとぶつからないよう、すべて #reform-maker の中に限定
   ========================================================== */
#reform-maker *{ box-sizing:border-box;}
#reform-maker{ margin:0; color:#334a5b; font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; background:#fff;}
#reform-maker a{ color:inherit; text-decoration:none;}
#reform-maker p{ margin:0;}
#reform-maker .inner{ width:min(1100px,calc(100% - 40px)); margin:0 auto;}

/* ---------- 見出しの帯 ---------- */
#reform-maker .maker-intro{ background:#eef8fc; border-top:1px solid #d7eef6; border-bottom:1px solid #d7eef6; padding:36px 0 34px; text-align:center;}
#reform-maker .maker-intro .en{ color:#00A3DF; font-family:Arial,sans-serif; font-size:12px; font-weight:bold; letter-spacing:.16em;}
#reform-maker .maker-intro h1{ color:#0D2940; font-size:30px; letter-spacing:.06em; line-height:1.4; margin:4px 0 10px;}
#reform-maker .maker-intro .lead{ color:#4E606D; font-size:14px; line-height:1.9;}

/* ---------- 商品一覧 ---------- */
#reform-maker .maker-products{ padding:30px 0 70px;}
#reform-maker .count{ color:#6A7F8C; font-size:13px; text-align:right; margin-bottom:12px;}
#reform-maker .product-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; align-items:stretch;}

/* カード */
#reform-maker .product-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;}
/* ホバー時はカードを動かさず、画像の少しのズームだけにする（2026-10-02 こじさん指示：動きが多いとガチャガチャするため） */
#reform-maker .product-card .img{ display:block; height:190px; position:relative; overflow:hidden; flex-shrink:0; background:#f5fafc;}
#reform-maker .product-card .img img{ width:100%; height:100%; object-fit:cover; vertical-align:bottom; transition:transform .4s;}
#reform-maker .product-card:hover .img img{ transform:scale(1.04);}
#reform-maker .card-body{ flex:1; display:flex; flex-direction:column; padding:14px 15px 16px;}
#reform-maker .brand{ align-self:flex-start; color:#fff; background:#E60012; border-radius:3px; font-family:Arial,sans-serif; font-size:10px; font-weight:bold; letter-spacing:.04em; padding:3px 7px; margin-bottom:7px;}
#reform-maker .card-body h2{ color:#0D2940; font-size:16px; line-height:1.5; overflow-wrap:anywhere; margin:0 0 12px;}
#reform-maker .card-body h2 a:hover{ color:#087DB7;}
#reform-maker .price-label{ align-self:flex-start; 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 .price{ color:#D7263D; font-size:14px; font-weight:bold; margin-bottom:14px;}
#reform-maker .price strong{ font-family:Arial,sans-serif; font-size:26px; letter-spacing:.01em;}
#reform-maker .price small{ color:#607582; font-size:10px; font-weight:normal;}
#reform-maker .price.pending strong{ color:#526775; font-size:20px;}
#reform-maker .detail{ display:block; color:#fff; background:#00A3DF; border:2px solid #00A3DF; border-radius:999px; text-align:center; font-size:13px; font-weight:bold; padding:10px 12px; position:relative; transition:background .25s, border-color .25s;}
#reform-maker .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);}
#reform-maker .detail:hover{ background:#087DB7; border-color:#087DB7; opacity:1;}

#reform-maker .price-note{ color:#6A7F8C; font-size:12px; line-height:1.8; margin-top:20px;}
#reform-maker .empty-note{ color:#5d6f7b; background:#f8fbfd; border:1px dashed #cbe7f3; border-radius:8px; font-size:14px; line-height:1.8; text-align:center; padding:28px 20px;}

/* ---------- タブレット：2列 ---------- */
@media (max-width:820px){
#reform-maker .product-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
}

/* ---------- スマホ ---------- */
@media (max-width:480px){
#reform-maker .inner{ width:calc(100% - 28px);}
#reform-maker .maker-intro{ padding:24px 0 22px;}
#reform-maker .maker-intro h1{ font-size:23px;}
#reform-maker .maker-intro .lead{ font-size:12px; text-align:left;}
#reform-maker .maker-intro .lead br{ display:none;}
#reform-maker .maker-products{ padding:20px 0 50px;}
#reform-maker .product-grid{ gap:9px;}
#reform-maker .product-card .img{ height:128px;}
#reform-maker .card-body{ padding:10px 10px 12px;}
#reform-maker .card-body h2{ font-size:13px; margin-bottom:8px;}
#reform-maker .price-label{ font-size:9px; padding:2px 5px;}
#reform-maker .price{ font-size:12px; margin-bottom:10px;}
#reform-maker .price strong{ font-size:20px;}
#reform-maker .price small{ display:block; font-size:9px;}
#reform-maker .detail{ font-size:12px; padding:8px 10px;}
#reform-maker .detail::after{ right:10px; width:5px; height:5px;}
}

/* ---------- タイプから選ぶ（/toilet/reform/ へのリンク。2026-10-02） ---------- */
#reform-maker .type-link{ text-align:center; margin-top:36px;}
#reform-maker .type-link a{ display:inline-block; color:#087DB7; background:#fff; border:2px solid #00A3DF; border-radius:999px; font-size:14px; font-weight:bold; line-height:1.6; padding:12px 44px 12px 32px; position:relative; transition:background .25s;}
#reform-maker .type-link a::after{ content:""; width:6px; height:6px; border-top:2px solid #00A3DF; border-right:2px solid #00A3DF; position:absolute; right:22px; top:50%; transform:translateY(-50%) rotate(45deg);}
#reform-maker .type-link a:hover{ background:#effaff; opacity:1;}
#reform-maker .type-link br.sp{ display:none;}
@media (max-width:480px){
#reform-maker .type-link a{ font-size:13px; padding:10px 40px 10px 24px;}
#reform-maker .type-link br.sp{ display:inline;}
}