@charset "UTF-8";
/* ==========================================================
   リフォーム商品 詳細ページ専用CSS（single-reform_product.php のみで読み込み）
   元デザイン：01_統括/隆雅/トイレリフォームデザイン/toilet-product-detail.html
   既存テーマとぶつからないよう、すべて #reform-product の中に限定
   デザイン用の仮ヘッダー・フッター・パンくずのCSSは使わない（サイト本来のものを使う）
   ========================================================== */
#reform-product *{box-sizing:border-box;}
#reform-product{color:#0d2940;background:#fff;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;margin:0;}
#reform-product img{max-width:100%;height:auto;vertical-align:bottom;}
#reform-product a{color:inherit;text-decoration:none;transition:.25s;}
#reform-product a:hover{opacity:.75;}
#reform-product .product-main{background:linear-gradient(120deg,#f4fbfe 0%,#fff 57%);border-top:1px solid #eef4f6;border-bottom:1px solid #e7f0f4;padding:42px 0 52px;}
#reform-product .inner{width:min(1100px,calc(100% - 48px));margin:auto;}
#reform-product .product-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.92fr);align-items:center;gap:70px;}
#reform-product .product-image{background:#fff;border:1px solid #d8e9f1;border-radius:12px;box-shadow:0 16px 38px rgba(4,74,108,.10);padding:22px;position:relative;}
#reform-product .product-image .label{color:#fff;background:#00a3df;border-radius:3px;font-size:12px;font-weight:700;padding:7px 10px;position:absolute;top:20px;left:20px;z-index:1;}
#reform-product .product-image img{width:100%;aspect-ratio:1.18/1;object-fit:cover;border-radius:7px;}
#reform-product .kicker{color:#168dc2;font-size:12px;font-weight:800;letter-spacing:.14em;margin:0 0 14px;}
#reform-product .brand{width:max-content;color:#fff;background:#e60012;border-radius:3px;font-family:Arial,sans-serif;font-size:12px;font-weight:bold;letter-spacing:.06em;padding:5px 10px;margin:0 0 11px;}
#reform-product h1{font-size:34px;line-height:1.38;margin:0 0 12px;letter-spacing:.02em;}
#reform-product .lead{color:#4d6472;font-size:15px;line-height:1.85;margin:0 0 18px;}
#reform-product .tags{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 22px;padding:0;list-style:none;}
#reform-product .tags li{color:#2379a0;background:#effaff;border:1px solid #cbe7f3;border-radius:3px;font-size:12px;padding:6px 10px;}
#reform-product .price-box{background:#fff;border-top:4px solid #00a3df;box-shadow:0 8px 22px rgba(4,74,108,.09);padding:17px 20px 18px;margin-bottom:14px;}
#reform-product .price-box .caption{color:#168dc2;font-size:12px;font-weight:800;margin:0 0 4px;}
#reform-product .price{font-size:17px;font-weight:700;margin:0;}
#reform-product .price strong{font-family:Arial,sans-serif;font-size:39px;letter-spacing:-.04em;}
#reform-product .price small{color:#617784;font-size:11px;font-weight:400;}
#reform-product .includes{color:#516975;border-top:1px solid #e1edf2;font-size:12px;line-height:1.65;margin:12px 0 0;padding-top:11px;}
#reform-product .notice{color:#71838d;font-size:11px;line-height:1.65;margin:0 0 14px;}
#reform-product .line-btn{color:#fff;background:#06b85b;border-radius:5px;box-shadow:0 5px 12px rgba(6,184,91,.20);display:block;font-size:15px;font-weight:800;text-align:center;padding:15px 18px;}
#reform-product .line-btn:after{content:"›";font-size:22px;line-height:0;margin-left:15px;vertical-align:-2px;}
#reform-product .section{padding:82px 0;}
#reform-product .section.gray{background:#f6fafc;}
#reform-product .heading{text-align:center;margin:0 0 36px;}
#reform-product .heading .en{color:#00a3df;font-size:12px;font-weight:800;letter-spacing:.16em;margin:0 0 7px;}
#reform-product .heading h2{font-size:29px;line-height:1.45;margin:0;}
#reform-product .heading h2:after{content:"";width:40px;height:3px;background:#00a3df;border-radius:4px;display:block;margin:15px auto 0;}
#reform-product .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
#reform-product .feature-card{background:#fff;border:1px solid #dbeaf1;border-radius:8px;padding:25px 22px;}
#reform-product .feature-card .num{color:#00a3df;font-family:Arial,sans-serif;font-size:13px;font-weight:bold;letter-spacing:.09em;}
#reform-product .feature-card h3{font-size:19px;margin:10px 0 9px;}
#reform-product .feature-card p{color:#556d79;font-size:14px;line-height:1.8;margin:0;}
#reform-product .detail-table{border-top:1px solid #cfdee5;margin:0;}
#reform-product .detail-table div{border-bottom:1px solid #cfdee5;display:grid;grid-template-columns:210px 1fr;}
#reform-product .detail-table dt{background:#eef8fc;font-size:14px;font-weight:700;padding:17px 20px;}
#reform-product .detail-table dd{color:#526a76;font-size:14px;line-height:1.7;margin:0;padding:17px 22px;}
#reform-product .check-list{display:grid;grid-template-columns:repeat(2,1fr);gap:13px 35px;list-style:none;margin:0;padding:0;}
#reform-product .check-list li{border-bottom:1px solid #d9e8ef;color:#4d6673;font-size:15px;line-height:1.65;padding:0 0 12px 26px;position:relative;}
#reform-product .check-list li:before{content:"✓";color:#00a3df;font-weight:bold;left:0;position:absolute;}
#reform-product .faq{border-top:1px solid #d4e3e9;}
#reform-product .faq div{border-bottom:1px solid #d4e3e9;padding:20px 10px;}
#reform-product .faq dt{font-size:16px;font-weight:700;padding-left:30px;position:relative;}
#reform-product .faq dt:before{content:"Q";color:#00a3df;font-family:Arial,sans-serif;font-weight:bold;left:0;position:absolute;}
#reform-product .faq dd{color:#526a76;font-size:14px;line-height:1.8;margin:11px 0 0;padding-left:30px;}
#reform-product .pager{display:flex;gap:12px;justify-content:center;margin-top:35px;}
#reform-product .pager a{border:1px solid #bcd9e7;border-radius:4px;color:#2379a0;font-size:13px;font-weight:700;padding:12px 18px;}
#reform-product .back-links{display:flex;justify-content:center;gap:13px;margin-top:22px;}
#reform-product .back-links a{color:#fff;background:#168dc2;border-radius:4px;font-size:14px;font-weight:700;padding:15px 22px;}
#reform-product .back-links a:last-child{background:#4f839d;}
#reform-product .contact{background:#e9f8fd;padding:55px 0;}
#reform-product .contact-box{display:flex;align-items:center;justify-content:space-between;gap:30px;}
#reform-product .contact h2{font-size:27px;line-height:1.45;margin:0 0 8px;}
#reform-product .contact p{color:#526a76;font-size:14px;line-height:1.75;margin:0;}
#reform-product .contact .line-btn{min-width:255px;}

@media screen and (max-width:800px){
#reform-product .inner{width:min(100% - 32px,1100px);}
#reform-product .product-main{padding:25px 0 35px;}
#reform-product .product-grid{display:block;}
#reform-product .product-image{margin-bottom:28px;padding:13px;}
#reform-product .product-image .label{top:23px;left:23px;font-size:10px;}
#reform-product h1{font-size:26px;}
#reform-product .lead{font-size:14px;}
#reform-product .price strong{font-size:35px;}
#reform-product .section{padding:55px 0;}
#reform-product .heading{margin-bottom:28px;}
#reform-product .heading h2{font-size:23px;}
#reform-product .feature-grid{grid-template-columns:1fr;gap:10px;}
#reform-product .feature-card{padding:20px;}
#reform-product .detail-table div{display:block;}
#reform-product .detail-table dt{padding:12px 15px;}
#reform-product .detail-table dd{font-size:13px;padding:13px 15px;}
#reform-product .check-list{display:block;}
#reform-product .check-list li{font-size:14px;margin-bottom:13px;}
#reform-product .contact{padding:40px 0;}
#reform-product .contact-box{display:block;}
#reform-product .contact h2{font-size:23px;}
#reform-product .contact .line-btn{margin-top:20px;min-width:0;}
#reform-product .pager,#reform-product .back-links{display:block;margin-top:25px;}
#reform-product .pager a,#reform-product .back-links a{display:block;margin:9px 0;text-align:center;}
#reform-product .tags li{font-size:11px;}
}

/* 追加：WordPress化で増えた表示（デザインにないもの） */
#reform-product .product-image .label{ z-index:2;}
#reform-product .detail-lead{ color:#4d6472; font-size:15px; line-height:1.9; margin:0 auto 34px; max-width:860px;}
#reform-product .detail-table dd small{ display:block; color:#7a8d97; font-size:12px;}
/* よくある質問を外したため、前後リンク・戻るリンクだけの帯として余白を詰める */
#reform-product .nav-section{ padding:40px 0;}
#reform-product .nav-section .pager{ margin-top:0;}
@media screen and (max-width:800px){ #reform-product .nav-section{ padding:28px 0;} }

/* 品番（2026-09-30 追加）：商品名の下 */
#reform-product .hinban{ color:#4d6472; font-size:13px; font-weight:700; line-height:1.7; margin:-4px 0 14px;}
#reform-product .hinban span{ display:inline-block; margin-right:14px;}

/* 主な特徴（2026-09-30 変更）：参考サイトの POINT1〜4 のレイアウト（2列×2段・画像付き） */
#reform-product .feature-grid{ grid-template-columns:repeat(2,1fr); gap:26px;}
#reform-product .feature-card{ padding:0 0 24px; overflow:hidden;}
#reform-product .feature-img{ aspect-ratio:16/10; background:#eef6fa; display:flex; align-items:center; justify-content:center; overflow:hidden; margin:0 0 18px;}
#reform-product .feature-img img{ width:100%; height:100%; object-fit:cover;}
#reform-product .feature-img .no-image{ color:#9fb3be; font-size:13px; font-weight:700; letter-spacing:.1em;}
#reform-product .feature-card .num{ width:max-content; color:#0d2940; background:#ffd84d; border-radius:30px; font-size:11px; letter-spacing:.08em; padding:4px 12px; margin:0 22px;}
#reform-product .feature-card h3{ font-size:20px; margin:10px 22px 4px;}
#reform-product .feature-card .feature-name{ color:#168dc2; font-size:15px; font-weight:700; margin:0 22px 8px;}
#reform-product .feature-card p:last-child{ margin:0 22px;}
@media screen and (max-width:800px){
#reform-product .feature-grid{ grid-template-columns:1fr; gap:14px;}
#reform-product .feature-card h3{ font-size:17px;}
#reform-product .hinban{ font-size:12px;}
}

/* ==========================================================
   2026-09-30 レイアウト変更（機能ライブラリ対応）
   ========================================================== */
/* 主な特長：3つなら3列、2つなら2列、1つなら1列 */
#reform-product .feature-grid.count-3{ grid-template-columns:repeat(3,1fr); gap:22px;}
#reform-product .feature-grid.count-2{ grid-template-columns:repeat(2,1fr);}
#reform-product .feature-grid.count-1{ grid-template-columns:1fr; max-width:520px; margin:0 auto;}
#reform-product .feature-grid.count-3 .feature-card h3{ font-size:18px;}

/* おすすめ機能：PC 4列（最大8つ＝4列×2段） */
#reform-product .recommend-section{ padding-top:10px;}
#reform-product .recommend-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 18px;}
#reform-product .recommend-card{ min-width:0;}
#reform-product .recommend-img{ aspect-ratio:4/3; background:#eef6fa; border-radius:4px; display:flex; align-items:center; justify-content:center; overflow:hidden; margin:0 0 12px;}
#reform-product .recommend-img img{ width:100%; height:100%; object-fit:cover;}
#reform-product .recommend-img .no-image{ color:#9fb3be; font-size:12px; font-weight:700; letter-spacing:.1em;}
#reform-product .recommend-card h3{ color:#0d2940; font-size:15px; line-height:1.5; margin:0 0 6px;}
#reform-product .recommend-card p{ color:#556d79; font-size:13px; line-height:1.75; margin:0;}

/* 商品・工事内容：PCは左右2カラム（48%ずつ）。長い値はマスの中で折り返す */
#reform-product .detail-table.two-col{ display:flex; flex-wrap:wrap; justify-content:space-between; border-top:0;}
#reform-product .detail-table.two-col div{ width:48%; grid-template-columns:130px 1fr; border-top:1px solid #cfdee5; border-bottom:0;}
#reform-product .detail-table.two-col div:nth-last-child(-n+2){ border-bottom:1px solid #cfdee5;}
#reform-product .detail-table.two-col div:nth-last-child(2):nth-child(even){ border-bottom:0;} /* 奇数件のとき、最後の行の左だけに下線 */
#reform-product .detail-table.two-col dt{ padding:14px 16px;}
#reform-product .detail-table.two-col dd{ padding:14px 18px; overflow-wrap:anywhere;}

/* 前後の商品：画像＋商品名＋価格 */
#reform-product .product-pager{ display:grid; grid-template-columns:1fr 1fr; gap:18px;}
#reform-product .pager-card{ background:#fff; border:1px solid #d8e9f1; border-radius:8px; display:flex; align-items:center; gap:16px; padding:14px; text-decoration:none;}
#reform-product .pager-card.next{ flex-direction:row-reverse; text-align:right;}
#reform-product .pager-card.empty{ border:0; background:none;}
#reform-product .pager-img{ width:110px; height:82px; border-radius:5px; overflow:hidden; flex-shrink:0; background:#eef6fa;}
#reform-product .pager-img img{ width:100%; height:100%; object-fit:cover;}
#reform-product .pager-text{ min-width:0; display:flex; flex-direction:column; gap:3px;}
#reform-product .pager-label{ color:#168dc2; font-size:12px; font-weight:700;}
#reform-product .pager-name{ color:#0d2940; font-size:15px; font-weight:700; line-height:1.45; overflow-wrap:anywhere;}
#reform-product .pager-price{ color:#526a76; font-size:12px;}
#reform-product .pager-price strong{ color:#0d2940; font-family:Arial,sans-serif; font-size:18px;}
#reform-product .nav-section .back-links{ margin-top:24px;}

@media screen and (max-width:800px){
#reform-product .feature-grid.count-3,#reform-product .feature-grid.count-2{ grid-template-columns:1fr;}
#reform-product .recommend-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px;}
#reform-product .recommend-card h3{ font-size:14px;}
#reform-product .recommend-card p{ font-size:12px;}
#reform-product .detail-table.two-col{ display:block;}
#reform-product .detail-table.two-col div{ width:100%; display:block; border-bottom:0;}
#reform-product .detail-table.two-col div:nth-last-child(2){ border-bottom:0;}
#reform-product .detail-table.two-col div:last-child{ border-bottom:1px solid #cfdee5;}
#reform-product .product-pager{ grid-template-columns:1fr; gap:10px;}
#reform-product .pager-card.empty{ display:none;}
#reform-product .pager-img{ width:86px; height:64px;}
#reform-product .pager-name{ font-size:14px;}
}

/* 商品・工事内容：値（dd）を白背景にして見やすく（2026-09-30） */
#reform-product .detail-table dd{ background:#fff;}

/* LINE相談：サービスページ「費用・工期について」（.service #box-03）と同じ見た目（2026-09-30） */
#reform-product .consult-section{ padding:0 0 70px;}
#reform-product .consult-box{ width:min(1100px,calc(100% - 48px)); margin:auto; background:#eef8fc; border-radius:30px; padding:60px 50px; display:flex; align-items:center; justify-content:space-between; gap:40px;}
#reform-product .consult-box .left{ width:52%;}
#reform-product .consult-box .right{ width:44%;}
#reform-product .consult-box .en{ color:#00A3DF; font-size:12px; font-weight:bold; letter-spacing:2px;}
#reform-product .consult-box h2{ color:#333; font-size:30px; font-weight:bold; line-height:1.6; margin:10px 0 16px;}
#reform-product .consult-box .left>p{ color:#333; font-size:15px; line-height:1.9em; margin:0;}
#reform-product .consult-box .note{ color:#666; font-size:13px; margin-top:14px !important;}
#reform-product .consult-box .note a{ color:#00A3DF; text-decoration:underline;}
#reform-product .consult-box .right .inner{ background:#fff; border:1px solid #d9e9e1; border-radius:12px; padding:25px;}
#reform-product .consult-box .right .p-01{ color:#00A3DF; font-size:17px; font-weight:bold; margin:0 0 8px;}
#reform-product .consult-box .right .inner>p:not(.more):not(.p-01){ color:#333; font-size:14px; line-height:1.8em; margin:0;}
#reform-product .consult-box .more{ width:auto; margin:18px 0 0; text-align:center;} /* style-sp.css の .more{width:280px} を打ち消す（スマホで見切れていた） */
#reform-product .consult-box .more a{ display:block; background:#00CE4C; border:2px solid #00CE4C; color:#fff; border-radius:50px; font-size:15px; font-weight:bold; padding:15px 18px; text-decoration:none;}
#reform-product .consult-box .more a:hover{ background:#fff; color:#00CE4C; opacity:1;}
@media screen and (max-width:800px){
#reform-product .consult-section{ padding:0 0 45px;}
#reform-product .consult-box{ width:calc(100% - 32px); display:block; padding:40px 18px; border-radius:20px;}
#reform-product .consult-box .left,#reform-product .consult-box .right{ width:100%;}
#reform-product .consult-box .left{ margin:0 0 25px;}
#reform-product .consult-box h2{ font-size:22px; line-height:1.5;}
#reform-product .consult-box .left>p{ font-size:14px;}
#reform-product .consult-box .right .inner{ padding:20px 16px; border-radius:14px;}
#reform-product .consult-box .right .p-01{ font-size:16px;}
#reform-product .consult-box .more a{ font-size:14px; padding:16px 0;} /* 横幅いっぱい（display:block）・横の余白は0 */
}

/* 2026-09-30 調整：LINE相談は表の項目名と同じ薄い青。前後の商品は白無地で、上下の余白を広げる */
#reform-product .nav-section{ background:#fff; padding:30px 0 90px;}
#reform-product .consult-section{ padding-bottom:40px;}
@media screen and (max-width:800px){ #reform-product .nav-section{ padding:20px 0 60px;} }