/* =========================================================
   トイレ修理センター トイレ修理専門LP
   モノクロ・モバイルファースト・レスポンシブ(SP→TB→PC)
   画像は images/*.svg（差し替え可能なダミー）
   ========================================================= */
:root{
  --ink:#1d2733;       /* 見出し・強（濃紺寄り） */
  --ink-2:#4d5762;     /* 本文 */
  --ink-3:#828c97;     /* 補助 */
  --line:#dbe3ec;      /* 罫線（青みグレー） */
  --line-2:#b3bfcd;    /* 強め罫線 */
  --fill:#eef2f7;      /* 面 */
  --fill-2:#f4f8fc;    /* 薄面(zebra) */
  --fill-3:#e2eaf3;    /* 濃いめ面 */
  --blue:#1f57cf;      /* メイン青 */
  --blue-deep:#16397e; /* 濃紺（ロゴ/電話/フッター） */
  --blue-light:#4f93e8;/* 明るい青（波・装飾） */
  --blue-pale:#eaf3fd; /* 薄青（セクション背景） */
  --orange:#f7991c;    /* オレンジ（数字・強調） */
  --gold-1:#faf0a6;    /* ゴールド明 */
  --gold-2:#eccf57;    /* ゴールド濃 */
  --gold-line:#d6ad3c; /* ゴールド枠 */
  --line-green:#0DC755;/* LINE緑 */
  --cta:#1f57cf;       /* CTA＝メイン青（全体を駆動） */
  --cta-ink:#fff;
  --note:#9aa4af;
  --maxw:1080px;
  --sec-pad:90px;      /* SP セクション余白 */
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
  color:var(--ink-2);
  background:#fff;
  line-height:1.8;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
/* 改行コントロール（mobile-first：SP表示） */
.sp-br{display:inline;} .pc-br{display:none;}

/* アイコン */
.ic{width:1.05em;height:1.05em;fill:currentColor;flex:none;}

/* ---- 画像サムネ（差し替え用ダミー） ---- */
.thumb{width:100%;overflow:hidden;background:var(--fill);}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.r43{aspect-ratio:4/3;} .r169{aspect-ratio:16/9;} .r11{aspect-ratio:1/1;}

/* ---- セクション ---- */
.sec{padding:var(--sec-pad) 0;}
.sec.alt{background:var(--blue-pale);}
#flow,#case,#voice,#faq{position:relative;}
#flow::before,#flow::after,#case::before,#case::after,#voice::before,#faq::before,#faq::after{content:"";position:absolute;left:0;width:100%;height:24px;z-index:2;pointer-events:none;background:url(../images/wave-edge-white.svg) repeat-x left top;background-size:90px 24px;}
#flow::before,#case::before,#voice::before{top:-24px;transform:scaleY(-1);}
#flow::after,#case::after{bottom:-24px;}
#faq::before{top:0;}
#faq::after{bottom:0;transform:scaleY(-1);}
.sec-head{text-align:center;max-width:720px;margin:0 auto 48px;}
/* 透かし英語＋日本語オーバーラップ見出し */
.eyebrow{display:block;font-size:58px;font-weight:900;letter-spacing:.04em;line-height:1;
  color:#eaf3fd;margin:0;text-transform:uppercase;user-select:none;-webkit-user-select:none;white-space:nowrap;overflow:hidden;}
.eyebrow + .sec-title{margin-top:-44px;}
.sec.alt .eyebrow{color:rgba(255,255,255,.92);}
.sec-title{position:relative;z-index:1;font-size:24px;line-height:1.45;font-weight:800;color:var(--ink);margin:0 0 12px;letter-spacing:.01em;}
.sec-title .accent{background:linear-gradient(transparent 60%,#ffe08a 60%);padding:0 3px;}
.sec-sub{color:#333;font-size:16px;margin:0;font-weight:500;line-height:1.85;}

/* ---- ボタン ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--cta);color:var(--cta-ink);font-weight:700;
  padding:15px 24px;border-radius:8px;font-size:15px;border:none;cursor:pointer;line-height:1.3;
}
.btn.line{background:var(--line-green);color:#fff;border:none;}
.btn.full{width:100%;}

/* ===== ヘッダー ===== */
.header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);}
.header-inner{display:flex;align-items:center;justify-content:flex-end;gap:18px;height:62px;max-width:1400px;margin:0 auto;padding:0 24px;}
.logo{display:flex;align-items:center;gap:9px;}
.logo img{height:40px;width:auto;display:block;}
.header .logo{position:absolute;left:22px;top:0;z-index:2;height:62px;display:flex;align-items:center;}
.header .logo img{height:36px;}
.logo .mark{width:40px;height:40px;border:2px solid var(--gold-line);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--gold-2);background:var(--blue-deep);font-weight:900;flex:none;}
.logo .name{font-weight:800;font-size:15px;letter-spacing:.02em;color:var(--blue-deep);}
.logo .name small{display:block;font-size:9px;color:var(--ink-3);font-weight:600;letter-spacing:.03em;}
.header .logo .mark{background:var(--gold-2);color:var(--blue-deep);}
.header .logo .name{color:#fff;}
.header .logo .name small{color:#cdd8ee;}
.header-cta{display:none;align-items:stretch;gap:10px;}
.hcta{display:inline-flex;align-items:center;gap:8px;border-radius:8px;font-weight:800;line-height:1.15;white-space:nowrap;}
.hcta .ic{flex:none;}
.hcta-tel{background:var(--blue-deep);color:#fff;padding:7px 16px;}
.hcta-tel .ic{width:19px;height:19px;}
.hcta-tel .tx{display:flex;flex-direction:column;gap:1px;}
.hcta-tel .num{font-size:19px;letter-spacing:.02em;}
.hcta-tel .lbl{font-size:9.5px;font-weight:600;opacity:.9;letter-spacing:.01em;}
.hcta-line{background:var(--line-green);color:#fff;border:none;padding:0 24px;font-size:16px;}
.hcta-line .ic{width:21px;height:21px;}
.gnav{display:none;}
.hamb{display:flex;flex-direction:column;gap:4px;width:46px;height:46px;background:var(--blue-deep);border:none;border-radius:4px;cursor:pointer;padding:0 12px;justify-content:center;align-items:stretch;}
.hamb span{display:block;height:3px;background:#fff;border-radius:2px;}

/* ドロワー */
.drawer{position:fixed;inset:0;z-index:60;display:none;}
.drawer.open{display:block;}
.drawer-bg{position:absolute;inset:0;background:rgba(0,0,0,.45);}
.drawer-panel{position:absolute;top:0;right:0;width:80%;max-width:330px;height:100%;background:#fff;padding:22px 20px;overflow-y:auto;}
.drawer-close{position:absolute;top:14px;right:24px;width:38px;height:38px;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:20px;cursor:pointer;z-index:2;color:var(--ink);}
.drawer-panel nav a{display:block;padding:14px 4px;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink);}
.drawer-panel .btn{margin-top:18px;}

/* ===== FV（背景画像＋左テキスト／右メイン画像） ===== */
.fv{position:relative;overflow:hidden;padding:26px 0 0;background:#fff;}
.fv-wave{position:absolute;left:0;right:0;bottom:-2px;z-index:0;line-height:0;pointer-events:none;}
.fv-wave img{width:100%;height:auto;display:block;}
.fv-splash{display:block;position:absolute;left:-6%;bottom:40vw;width:54%;z-index:3;pointer-events:none;}
.fv .container{position:static;}
.fv-inner{position:static;z-index:1;}
/* SP/TB：メイン画像を全面に敷き、その上にテキストを重ねる */
.fv-figure{position:relative;z-index:1;width:calc(100% - 10px);margin:14px auto 0;border-radius:44px;overflow:hidden;aspect-ratio:1/1;}
.fv-figure img{width:100%;height:100%;object-fit:cover;object-position:58% 18%;display:block;}
.fv-mobile-visual{display:none;}
.fv-area{display:inline-flex;align-items:center;gap:6px;font-size:20px;font-weight:800;color:#fff;background:var(--blue-deep);border-radius:30px;padding:6px 16px 6px 13px;margin:0 0 16px;}
.fv-area .ic{width:30px;height:30px;color:#fff;flex:none;}
.fv-title{margin:0 0 16px;}
.fv-title img{width:100%;max-width:540px;height:auto;display:block;}
.fv-sub{font-size:13.5px;font-weight:500;color:var(--ink-2);margin:0 0 20px 30px;line-height:1.8;}
.fv-badges{display:flex;flex-wrap:nowrap;gap:2px;margin:0;position:absolute;left:0;right:0;bottom:92px;justify-content:center;align-items:flex-end;z-index:4;padding:0 4px;}
.fv-badge{width:32%;max-width:155px;height:auto;aspect-ratio:1/1;flex:none;}
.fv-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 18px;margin-bottom:18px;}
.fv-price .lbl{font-size:13px;color:var(--ink-2);font-weight:700;}
.fv-price .num{font-size:36px;font-weight:900;color:var(--ink);letter-spacing:.01em;line-height:1;}
.fv-price .yen{font-size:20px;font-weight:800;}
.fv-price .tax{font-size:11px;color:var(--ink-3);}
.fv-price .web{margin-left:auto;font-size:11px;color:#fff;background:var(--cta);padding:4px 10px;border-radius:4px;font-weight:700;}
.fv-hero{margin-bottom:20px;border-radius:12px;}

/* ===== 症状（イラスト） ===== */
/* お悩みパネル（参考TANOMU風：グレーパネル＋下部ブルー帯） */
.trouble-sec{padding:var(--sec-pad) 0 0;background:#1f57cf;}
.trouble-panel{position:relative;z-index:2;background:#e2e5ea;border-radius:22px;padding:30px 16px 28px;}
.trouble-faucet{position:absolute;top:-4px;left:14px;width:54px;height:auto;z-index:3;pointer-events:none;}
.trouble-title{position:relative;text-align:center;color:var(--ink);font-size:21px;font-weight:900;line-height:1.42;margin:0 0 22px;letter-spacing:.02em;}
.tw-accent{color:var(--blue);}
.flow-accent{color:var(--blue);}
.flow-num{font-size:1.6em;font-weight:900;line-height:1;}
.hl-blue{color:var(--blue);}
.tw-en{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:-1;font-size:60px;font-weight:900;color:rgba(255,255,255,.65);letter-spacing:.06em;white-space:nowrap;pointer-events:none;text-transform:uppercase;}
.trouble-solve{position:relative;z-index:1;background:#003cbc;margin-top:-64px;padding:104px 20px 54px;text-align:center;overflow:hidden;}
.ts-wave{position:absolute;top:0;left:0;width:100%;height:18px;z-index:0;pointer-events:none;background:url(../images/wave-edge.svg) repeat-x top left;background-size:64px 18px;}
.tb-chev{width:30px;height:28px;display:block;margin:0 auto 12px;animation:tbBounce 1.6s ease-in-out infinite;}
@keyframes tbBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}
.tb-line{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 6px;font-size:20px;font-weight:900;color:#fff;margin:0;letter-spacing:.01em;line-height:1.3;}
.tb-logo{height:1.55em;width:auto;flex:none;}
.solve-em{position:relative;color:#ffd633;font-weight:900;font-size:1.5em;line-height:1.05;padding-bottom:11px;}
.solve-em::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;border-top:2px solid #ffd84d;border-bottom:2px solid #ffd84d;}
.symptom-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 14px;}
.symptom{display:flex;flex-direction:column;}
.symptom-card{position:relative;border-radius:16px;aspect-ratio:4/3;}
.symptom-label{position:absolute;top:-18px;left:50%;transform:translateX(-50%);z-index:2;background:var(--blue);color:#fff;font-weight:900;font-size:13px;padding:9px 18px;border-radius:16px;white-space:nowrap;}
.symptom-label::after{content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid var(--blue);}
.symptom-card img{width:100%;height:100%;object-fit:cover;border-radius:16px;display:block;}
.symptom-desc{text-align:center;font-weight:900;color:var(--ink);font-size:14px;margin:14px 0 0;line-height:1.45;}

/* ===== 料金（見やすく・数字大きく） ===== */
/* 料金CTA帯（price-cardsの下） */
.price-cta{position:relative;margin:44px auto 0;background:var(--blue);color:#fff;border-radius:22px;padding:40px 44px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;}
.pct-man{display:none;position:absolute;top:-20px;right:24px;width:180px;height:auto;z-index:1;pointer-events:none;}
.pct-lead{display:flex;align-items:center;justify-content:center;gap:22px;margin:0;font-size:19px;font-weight:800;line-height:1.7;}
.pct-em{font-style:normal;-webkit-text-emphasis:filled dot #fff;text-emphasis:filled dot #fff;-webkit-text-emphasis-position:over;text-emphasis-position:over;}
.pct-lead::before,.pct-lead::after{content:"";flex:none;width:3px;height:1.4em;background:#fff;border-radius:2px;}
.pct-lead::before{transform:rotate(-20deg);}
.pct-lead::after{transform:rotate(20deg);}
.pct-price{margin:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 16px;}
.pct-lbl{font-size:21px;font-weight:800;color:#ffe14d;border:2px solid #ffe14d;border-radius:4px;padding:15px 20px;line-height:1;}
.pct-amount{color:#ffe14d;font-size:clamp(46px,7vw,66px);font-weight:900;line-height:1;letter-spacing:.01em;}
.pct-amount .yen{font-size:.5em;font-weight:800;}
.pct-amount .kara{font-size:.42em;font-weight:800;}
.pct-tax{font-size:20px;color:#ffe14d;font-weight:700;}
.pct-box{position:relative;z-index:2;width:100%;background:#fff;border-radius:16px;padding:22px 28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 48px;}
.pct-tel{display:inline-flex;align-items:center;gap:12px;background:transparent;color:var(--blue-deep);padding:0;font-weight:900;}
.pct-tel .ic{width:34px;height:34px;color:var(--blue-deep);}
.pct-tel .tx{display:flex;flex-direction:column;line-height:1.1;text-align:center;}
.pct-tel .num{font-size:34px;letter-spacing:.02em;}
.pct-tel .sub{font-size:12px;font-weight:600;opacity:.7;}
.pct-line{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--line-green);color:#fff;border-radius:12px;padding:16px 36px;font-weight:800;font-size:18px;}
.pct-line .ic{width:24px;height:24px;}
/* 料金カードグリッド（症状別・画像つき） */
.price-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:1000px;margin:0 auto;}
.price-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 4px 14px rgba(15,40,90,.08);display:flex;flex-direction:column;}
.pc-head{background:var(--blue);color:#fff;font-size:15px;font-weight:900;text-align:center;padding:10px;margin:0;letter-spacing:.02em;line-height:1.35;min-height:62px;display:flex;align-items:center;justify-content:center;}
.pc-desc{font-size:11.5px;color:var(--ink-2);text-align:center;font-weight:600;margin:0;padding:11px 9px 0;line-height:1.5;}
.pc-figure{position:relative;padding:10px;}
.pc-figure .thumb{aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:1px solid var(--line);}
.pc-time{position:absolute;left:12px;bottom:10px;width:80px;height:80px;border-radius:50%;background:var(--blue);color:#fff;border:3px solid #fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;}
.pc-time small{font-size:11px;font-weight:800;}
.pc-time strong{font-size:18px;font-weight:900;}
.pc-price{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:14px 10px 16px;border-top:1px dashed var(--line-2);}
.pc-plabel{display:inline-block;font-size:12px;color:#fff;background:var(--orange);border-radius:6px;padding:4px 10px;font-weight:800;white-space:nowrap;}
.pc-amount{display:inline-flex;align-items:baseline;justify-content:center;gap:1px;color:var(--orange);font-weight:900;white-space:nowrap;}
.pc-amount .big{font-size:30px;letter-spacing:0;line-height:1;}
.pc-amount .yen{font-size:15px;}
.pc-amount .kara{font-size:15px;}
.pc-amount .tax{font-size:10px;color:var(--orange);font-weight:700;margin-left:1px;}
.price-table{width:100%;max-width:760px;margin:0 auto;border-collapse:collapse;background:#fff;border:1px solid var(--line);}
.price-table thead th,.price-table thead td{background:var(--cta);color:#fff;font-size:13px;font-weight:700;padding:14px 22px;letter-spacing:.04em;}
.price-table thead th{text-align:left;}
.price-table thead td{text-align:right;}
.price-table tbody tr{border-top:1px solid var(--line);}
.price-table tbody tr:nth-child(even){background:var(--fill-2);}
.price-table tbody th{padding:14px 22px;text-align:left;font-weight:700;font-size:15px;color:var(--ink);width:58%;line-height:1.4;}
.price-table .pth{display:flex;align-items:center;gap:13px;}
.price-img{width:100px;height:80px;border-radius:8px;flex:none;object-fit:cover;border:1px solid var(--line);}
.price-table tbody th small{display:block;font-size:11px;color:var(--ink-3);font-weight:500;margin-top:2px;}
.price-table tbody td{padding:14px 22px;text-align:right;white-space:nowrap;}
.price-table .yen{font-size:16px;font-weight:800;color:var(--ink-2);}
.price-table .big{font-size:30px;font-weight:900;color:var(--ink);letter-spacing:.01em;}
.price-table .kara{font-size:13px;color:var(--ink-3);font-weight:700;}
.price-foot{font-size:12px;color:var(--note);margin-top:14px;text-align:center;}
.case-note{font-size:12px;color:var(--note);margin:22px auto 0;text-align:center;}
/* SP：画像・数字を小さく、作業名は改行させない */
@media (max-width:767px){
  .compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px;}
  .compare{min-width:660px;}
  .price-img{width:60px;height:46px;}
  .price-table .pth{gap:9px;}
  .price-table .pth>span{white-space:nowrap;}
  .price-table tbody th{padding:13px 12px;font-size:13px;}
  .price-table tbody th small{font-size:10px;white-space:normal;}
  .price-table tbody td{padding:11px 12px;}
  .price-table .yen{font-size:13px;}
  .price-table .big{font-size:21px;}
  .price-table .kara{font-size:12px;}
  .price-table thead th,.price-table thead td{padding:12px;}
}

/* ===== 流れ（縦フロー・参考デザイン） ===== */
.flow{display:flex;flex-direction:column;gap:30px;max-width:880px;margin:0 auto;}
.flow-step{position:relative;display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 20px 20px;box-shadow:0 5px 16px rgba(15,40,90,.08);}
.flow-step:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:15px solid #b3bfcd;z-index:1;}
.step-body{order:1;min-width:0;}
.step-no{position:absolute;top:-18px;left:-14px;z-index:3;width:78px;height:94px;background:url(../images/step-drop.svg) no-repeat center/contain;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;padding-top:24px;}
.step-no small{font-size:12px;font-weight:800;letter-spacing:.1em;margin-bottom:2px;}
.step-no b{font-size:24px;font-weight:900;letter-spacing:.02em;}
.step-ttl{margin:0 0 8px;font-size:17px;font-weight:900;color:var(--blue);line-height:1.35;padding-left:40px;min-height:40px;display:flex;align-items:center;}
.step-desc{margin:0;font-size:13px;color:var(--ink-2);line-height:1.85;}
.step-img{order:2;width:100%;height:170px;border-radius:12px;background:#eef5fe;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.step-img img{width:100%;height:100%;object-fit:cover;display:block;}

/* ===== スタッフ（円形写真＋ずらし青円＋重ねコメント） ===== */
.staff-grid{display:grid;grid-template-columns:1fr;gap:56px 26px;max-width:980px;margin:0 auto;justify-items:center;align-items:stretch;}
.staff{display:flex;flex-direction:column;align-items:center;width:100%;max-width:340px;}
.staff-photo{position:relative;width:230px;height:230px;margin-bottom:-18px;z-index:1;}
.staff-photo::before{content:"";position:absolute;left:-10px;top:-5px;width:100%;height:100%;border-radius:50%;background:var(--blue);transform:translate(18px,12px);}
.staff-photo img{position:relative;width:230px;height:230px;border-radius:50%;object-fit:cover;border:3px solid #fff;}
.staff-info{position:relative;z-index:2;flex:1;background:#fff;border-radius:16px;padding:25px;width:100%;text-align:center;}
.staff-tool{position:absolute;top:-30px;left:10px;width:80px;height:auto;z-index:3;pointer-events:none;}
.staff .role{display:inline-block;background:var(--blue);color:#fff;font-size:11.5px;font-weight:800;padding:4px 14px;border-radius:20px;letter-spacing:.02em;margin-bottom:10px;}
.staff h3{margin:0 0 14px;font-size:22px;color:var(--ink);font-weight:900;padding-bottom:14px;border-bottom:1px solid var(--line);letter-spacing:.05em;}
.staff-msg{font-size:13.5px;color:var(--ink-2);line-height:1.9;margin:0;text-align:left;}
.staff-msg b{color:var(--ink);}

/* ===== 施工事例（before/after 明確化・カルーセル） ===== */
.carousel{position:relative;}
.car-track{display:flex;align-items:stretch;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px 2px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.car-track::-webkit-scrollbar{display:none;}
.car-track .case{flex:0 0 80%;scroll-snap-align:center;}
.car-arrow{position:absolute;top:38%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-2);background:rgba(255,255,255,.95);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;z-index:3;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.12);}
.car-arrow.prev{left:-2px;} .car-arrow.next{right:-2px;}
.car-dots{display:flex;gap:8px;justify-content:center;margin-top:18px;}
.car-dots button{width:9px;height:9px;border-radius:50%;border:none;background:var(--line);cursor:pointer;padding:0;transition:width .2s,background .2s;}
.car-dots button.active{background:var(--ink);width:22px;border-radius:5px;}
.case{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;}
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;}
.ba-item{position:relative;border-radius:8px;overflow:hidden;}
.ba-item .thumb img{display:block;}
.ba-item.before .thumb img{filter:none;}
.ba-item.after  .thumb img{filter:none;}
.ba-tag{position:absolute;top:0;left:0;font-size:10px;font-weight:800;padding:3px 9px;border-radius:0 0 8px 0;letter-spacing:.04em;display:inline-flex;align-items:center;gap:5px;z-index:1;}
.ba-tag.before{background:#6b7682;color:#fff;}
.ba-tag.after{background:var(--blue);color:#fff;border:none;}
.ba .arrow{display:flex;align-items:center;justify-content:center;color:var(--blue);}
.ba .arrow svg{width:26px;height:26px;display:block;}
/* 施工事例スペック表 */
.case-spec{width:100%;border-collapse:collapse;margin-top:16px;font-size:13px;border:1px solid var(--line);}
.case-spec th{width:32%;text-align:center;background:var(--fill-2);font-weight:700;color:var(--ink);padding:12px 14px;border:1px solid var(--line);white-space:nowrap;}
.case-spec td{padding:12px 16px;border:1px solid var(--line);color:var(--ink-2);text-align:left;}
.case-spec td b{color:var(--ink);font-weight:800;}

/* ===== 強み・違い 比較表（角丸＋マルキン列が突き出る） ===== */
.compare-wrap{padding-top:42px;}
.compare{width:100%;border-collapse:separate;border-spacing:0;background:#fff;font-size:16px;border:1px solid var(--line);border-radius:15px;}
.compare th,.compare td{padding:16px 20px;text-align:center;vertical-align:middle;border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
.compare th:last-child,.compare td:last-child{border-right:none;}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:none;}
.compare thead th:first-child{border-top-left-radius:15px;}
.compare thead th:last-child{border-top-right-radius:15px;}
.compare tbody tr:last-child th:first-child{border-bottom-left-radius:15px;}
.compare tbody tr:last-child td:last-child{border-bottom-right-radius:15px;}
.compare thead th{background:var(--fill-3);font-size:18px;color:var(--ink);}
.compare thead th:last-child{color:var(--ink-3);background:#e7e7e7;}
.compare tbody th{font-size:16px;text-align:left;background:#f3f4f5;font-weight:700;width:32%;color:var(--ink);}
.compare tbody td:last-child{background:#fff;}
/* トイレ修理センター列：上だけ角丸＋上に突き出る青タブ */
.compare thead th.us{position:relative;z-index:2;background:var(--blue);color:#fff;font-size:20px;font-weight:800;
  padding:30px 12px 20px;border:3px solid var(--blue-deep);border-bottom:none;border-radius:15px 15px 0 0;transform:translateY(-14px);}
.compare thead th.us::after{content:"";position:absolute;left:-3px;right:-3px;top:100%;height:14px;background:#fff;border-left:3px solid var(--blue-deep);border-right:3px solid var(--blue-deep);}
.compare td.us{border-left:3px solid var(--blue-deep);border-right:3px solid var(--blue-deep);background:#fff;font-size:16px;}
.compare tbody tr:last-child td.us{border-bottom:3px solid var(--blue-deep);}
.compare td.us,.compare td.x{font-size:16px;vertical-align:middle;line-height:1.5;}
.compare .o{font-weight:800;color:var(--ink);}
.compare .o::before{content:"◎";display:block;font-size:25px;line-height:1;color:var(--blue);margin:0 0 5px;}
.compare .o .hl{background:linear-gradient(transparent 56%,#ffe08a 56%);font-weight:900;}
.compare .x{color:#9a9a9a;font-weight:600;}
.compare .x::before{content:"△";display:block;font-size:23px;line-height:1;color:#b3b3b3;margin:0 0 5px;}
/* 選ばれています：黄色い吹き出し */
.compare thead th.us .ribbon{position:absolute;left:50%;top:0;transform:translate(-50%,-86%);background:#ffe14d;color:var(--blue-deep);font-size:14px;font-weight:800;padding:5px 30px;border-radius:20px;white-space:nowrap;letter-spacing:.02em;box-shadow:0 3px 8px rgba(0,0,0,.14);}
.compare thead th.us .ribbon::after{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #ffd84d;}

/* ===== お客様の声（横4列・角はそのまま） ===== */
.voice-grid{display:grid;grid-template-columns:1fr;gap:16px;}
/* お客様の声：自動ループ（マーキー・全幅・ぼかしなし） */
.voice-marquee{overflow:hidden;position:relative;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
.voice-track{display:flex;width:max-content;padding:4px 0;animation:voiceScroll 55s linear infinite;}
.voice-marquee:hover .voice-track{animation-play-state:paused;}
.voice-track .voice{border-radius:15px;flex:0 0 300px;margin-right:16px;}
@keyframes voiceScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.voice-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;}}
/* 解決事例：症状別タブ＋横長カード（画像左・情報右） */
.case{position:relative;}
.case-cat{position:absolute;top:0;left:0;z-index:3;background:var(--cta);color:#fff;font-size:18px;font-weight:800;letter-spacing:.04em;padding:5px 20px;border-radius:12px 0 10px 0;}
.case-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:26px;}
.case-tab{border:1px solid var(--line-2);background:#fff;color:var(--ink-2);font-weight:700;font-size:14px;padding:10px 24px;border-radius:24px;cursor:pointer;line-height:1.2;}
.case-tab.active{background:var(--cta);color:#fff;border-color:var(--cta);}
.case-panel{display:none;}
.case-panel.active{display:flex;flex-direction:column;gap:16px;max-width:1000px;margin:0 auto;}
@media (min-width:600px){
  .case-panel .case{display:flex;gap:18px;align-items:center;}
  .case-panel .case>.thumb{flex:0 0 40%;}
  .case-panel .case>.ba{flex:0 0 40%;}
  .case-panel .case>.case-spec{flex:1;margin-top:0;}
}
.case-desc{font-size:13.5px;color:var(--ink-2);line-height:1.7;margin:14px 2px 4px;}
.case-desc .area{display:inline-block;font-size:11px;font-weight:700;color:#fff;background:var(--cta);border-radius:5px;padding:2px 9px;margin-right:9px;}
.voice{background:#fff;border:1px solid var(--line);padding:18px 16px;}
.voice-head{display:flex;align-items:center;gap:11px;margin-bottom:13px;}
.voice .avatar{width:46px;height:46px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;overflow:hidden;}
.voice .avatar .ic{width:32px;height:32px;}
.voice .stars{font-size:13px;color:#f6a623;letter-spacing:1px;font-weight:800;}
.voice .stars b{font-size:13px;}
.voice .meta{font-size:11px;color:var(--ink-3);margin-top:2px;}
.voice-text{font-size:13px;color:var(--ink-2);line-height:1.9;margin:0;}
.voice-text mark{background:linear-gradient(transparent 56%,#ffe08a 56%);color:inherit;padding:0 1px;}

/* ===== FAQ ===== */
.faq{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.faq summary{cursor:pointer;padding:16px 18px;font-weight:800;font-size:14px;color:var(--ink);list-style:none;display:flex;gap:11px;align-items:flex-start;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:"Q";flex:none;width:30px;height:30px;background:var(--cta);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;}
.faq summary .qmark{margin-left:auto;color:var(--note);font-size:18px;}
.faq details[open] summary .qmark{transform:rotate(45deg);}
.faq .a{padding:0 18px 18px 53px;color:var(--ink-2);font-size:13px;}

/* ===== 会社情報 ===== */
.company-wrap{display:grid;grid-template-columns:1fr;gap:20px;max-width:880px;margin:0 auto;}
.company-table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border:1px solid var(--line);}
.company-table th,.company-table td{border-bottom:1px solid var(--line);padding:13px 14px;text-align:left;}
.company-table th{background:var(--fill-2);width:34%;white-space:nowrap;color:var(--ink);font-weight:700;}
.company-table tr:last-child th,.company-table tr:last-child td{border-bottom:none;}
.company-maps{display:grid;grid-template-columns:1fr;gap:16px;max-width:880px;margin:22px auto 0;}
.cmap{margin:0;}
.cmap iframe{width:100%;height:220px;border:0;border-radius:12px;display:block;}
.cmap figcaption{font-size:13px;font-weight:700;color:var(--ink);margin-top:8px;text-align:center;}

/* ===== ラストCTA（CONTACT） ===== */
.lastcta{position:relative;background:linear-gradient(160deg,#2456cf,#16397e);text-align:center;overflow:hidden;}
.lastcta-wave{position:absolute;top:0;left:0;width:100%;height:26px;z-index:1;pointer-events:none;background:url(../images/wave-edge-white.svg) repeat-x top left;background-size:90px 26px;}
.lastcta>.container{position:relative;z-index:1;}
.lastcta .eyebrow{color:rgba(255,255,255,.16);}
.lastcta .sec-title{color:#fff;margin-bottom:10px;}
.lastcta .lead{color:#d3e1fb;font-size:15px;margin:0 auto 28px;}
.contact-card{background:#fff;border-radius:14px;max-width:680px;margin:0 auto;padding:32px 28px 28px;box-shadow:0 12px 32px rgba(0,0,0,.12);position:relative;}
.contact-tel{display:flex;align-items:center;justify-content:center;gap:12px;}
.contact-tel .ic{width:30px;height:30px;color:var(--blue);}
.contact-tel .num{font-size:30px;font-weight:900;color:var(--blue-deep);letter-spacing:.02em;line-height:1;}
.contact-stamp{position:absolute;top:-18px;right:16px;width:100px;height:100px;border-radius:50%;background:var(--orange);border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;color:#fff;}
.contact-stamp .s{font-size:24px;font-weight:700;}
.contact-stamp .b{font-size:24px;font-weight:900;}
.contact-hours{font-size:13px;color:var(--ink-2);margin-top:9px;}
.contact-hours b{color:var(--ink);font-weight:700;}
.contact-btns{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap;justify-content:center;}
.contact-btns .btn{flex:0 1 420px;min-width:0;justify-content:center;padding:17px 24px;font-size:22px;}
.contact-note{font-size:12.5px;color:var(--ink-2);text-align:center;margin-top:13px;line-height:1.6;}
.contact-btns .btn .lbl{display:inline-flex;align-items:center;gap:9px;}
.contact-btns .btn .chev{font-weight:700;font-size:17px;}

/* ===== フッター ===== */
.footer{background:var(--blue-deep);color:#c5d3ea;padding:36px 0 96px;font-size:12px;}
.footer .container{display:flex;flex-direction:column;gap:16px;}
.footer .logo img{height:40px;}
.footer-nav{display:flex;flex-wrap:wrap;gap:10px 20px;}
.footer-nav a{color:#c5d3ea;font-size:12px;}
.footer .copy{color:#8ea3c4;font-size:11px;border-top:1px solid rgba(255,255,255,.18);padding-top:16px;}

/* ===== SP固定CTAバー ===== */
.fixed-cta{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;gap:9px;padding:9px 11px;background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -2px 12px rgba(0,0,0,.07);}
.fixed-cta a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;border-radius:8px;font-weight:800;font-size:13px;line-height:1.25;}
.fixed-cta .fc-top{display:flex;align-items:center;gap:6px;}
.fixed-cta .ic{width:16px;height:16px;}
.fixed-cta small{font-size:9px;font-weight:500;opacity:.85;}
.fixed-cta .tel{background:var(--blue-deep);color:#fff;}
.fixed-cta .line{background:var(--line-green);color:#fff;border:none;}

/* ===== ホバー浮き上がり（マウス環境のみ） ===== */
@media (hover:hover){
  .price-card,.staff,.case-panel .case{transition:transform .22s ease,box-shadow .22s ease;}
  .price-card:hover,.case-panel .case:hover{transform:translateY(-6px);}
  .price-card:hover{box-shadow:0 16px 32px rgba(15,40,90,.17);}
  .case-panel .case:hover{box-shadow:0 16px 32px rgba(15,40,90,.14);}
  .staff:hover{transform:translateY(-6px);}
  .staff:hover .staff-info{box-shadow:0 16px 34px rgba(15,40,90,.20);}
}

/* =========================================================
   タブレット
   ========================================================= */
@media (min-width:768px){
  body{font-size:16px;}
  :root{--sec-pad:140px;}
  .container{padding:0 70px;}
  .sp-br{display:none;} .pc-br{display:inline;}
  .sec-title{font-size:30px;}
  .eyebrow{font-size:120px;}
  .eyebrow + .sec-title{margin-top:-82px;}
  .sec-sub{font-size:16px;}
  .fv-sub{font-size:20px;margin:0 0 20px 40px;}
  .fv-title img{max-width:880px;}
  .fv-badges{gap:0px;flex-wrap:nowrap;position:static;bottom:auto;margin:6px 0 0;padding:0;justify-content:flex-start;}
  .fv-splash{display:none;}
  .fv-badge{width:200px;height:200px;max-width:none;aspect-ratio:auto;}
  .symptom-grid{grid-template-columns:repeat(4,1fr);gap:18px;}
  .symptom-label{font-size:17px;padding:5px 25px;border-radius:50px;}
  .symptom-desc{font-size:15px;}
  .trouble-panel{border-radius:26px;padding:48px 40px 44px;}
  .trouble-faucet{width:100px;left:10%;top:-5%;}
  .trouble-title{font-size:30px;margin-bottom:60px;}
  .trouble-solve{margin-top:-200px;padding:240px 20px 64px;}
  .tb-chev{width:34px;height:30px;}
  .tb-line{font-size:25px;}
  .price-cards{grid-template-columns:repeat(3,1fr);gap:16px;}
  .pc-head{font-size:16px;min-height:70px;}
  .pc-desc{font-size:15px;}
  .pc-time{width:80px;height:80px;left:15px;bottom:15px;}
  .pc-time small{font-size:10px;}
  .pc-time strong{font-size:17px;}
  .pc-amount .big{font-size:38px;}
  .pc-amount .yen,.pc-amount .kara{font-size:18px;}
  .flow-step{flex-direction:row;align-items:center;gap:28px;padding:24px 30px;}
  .step-body{flex:1;}
  .step-img{width:230px;height:150px;flex:none;}
  .step-ttl{font-size:20px;}
  .step-desc{font-size:16px;}
  .symptom .body{padding:16px 12px;}
  .ba-tag{font-size:12px;padding:6px 15px;letter-spacing:.08em;border-radius:0 0 10px 0;}
  .staff-grid{grid-template-columns:repeat(3,1fr);gap:30px 22px;}
  .voice-grid{grid-template-columns:1fr 1fr;}
  .car-arrow.prev{left:-14px;} .car-arrow.next{right:-14px;}
  .company-maps{grid-template-columns:repeat(2,1fr);}
  .header-cta{display:flex;}
  .header .logo img{height:42px;}
}

/* =========================================================
   PC
   ========================================================= */
@media (min-width:1024px){
  .fv{padding:50px 0 90px;overflow:hidden;min-height:720px;}
  .fv .container{position:relative;z-index:3;display:block;max-width:1500px;}
  .fv-inner{max-width:880px;}
  .fv-figure{position:absolute;top:50%;right:-80px;transform:translateY(-50%);width:clamp(720px,50vw,1080px);height:860px;border-radius:55% 0 0 40%;aspect-ratio:auto;margin:0;}
  .fv-figure img{object-position:60% 22%;}
  .fv-splash{display:block;position:absolute;left:auto;right:-20px;bottom:0;width:760px;z-index:2;transform:none;}

  .fixed-cta{display:none;}
  .footer{padding-bottom:36px;}
  .contact-tel .num{font-size:40px;}
  .contact-tel .ic{width:36px;height:36px;}
  .voice-grid{grid-template-columns:repeat(4,1fr);}
}
@media (min-width:1280px){
  .header-inner{height:78px;}
  .header .logo{height:78px;}
  .header .logo img{height:46px;}
  .gnav{display:flex;gap:12px;margin-right:6px;}
  .gnav a{font-size:12px;color:#333;font-weight:700;white-space:nowrap;}
  .gnav a:hover{color:var(--ink);}
  .hamb{display:none;}
  .drawer{display:none !important;}
}
@media (max-width:767px){
  .pc-time{left:10px;bottom:-20px;width:60px;height:60px;}
  .pc-time small{font-size:8px;}
  .pc-time strong{font-size:14px;}
  .pct-price{display:block;}
  .pct-lbl{font-size:15px;padding:10px 10px;border-radius:4px;}
  .pct-amount{font-size:clamp(40px,7vw,66px);}
  .pct-amount .yen{font-size:30px;}
  .price-cta{padding:28px 16px;}
  .pct-lead{display:block;font-size:15px;line-height:1.65;}
  .pct-lead::before,.pct-lead::after{display:none;}
  .pct-box{margin-top:10px;padding:18px 14px;gap:14px;flex-direction:column;}
  .pct-tel{gap:8px;}
  .pct-tel .num{font-size:26px;}
  .pct-tel .ic{width:26px;height:26px;}
  .pct-line{padding:13px 26px;font-size:16px;}
  .pct-lbl{display:block;width:-moz-fit-content;width:fit-content;margin:0 auto;}
  .contact-stamp{top:-40px;width:70px;height:70px;}
  .contact-stamp .s{font-size:18px;}
  .contact-stamp .b{font-size:18px;}
  .step-ttl{padding-left:0;justify-content:center;text-align:center;}
  .fv-sub{font-size:16px;margin:0 0 20px;}
  .fv-area{font-size:16px;margin:0 0 10px;}
  .fv-area .ic{width:20px;height:20px;}
  .trouble-faucet{top:-15px;left:20px;width:54px;}
  .trouble-title{margin:0 0 40px;}
  .symptom-label{padding:5px 15px;border-radius:30px;}
}

/* STEP01 電話・LINEボタン */
.step-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.step-cta a{display:inline-flex;align-items:center;gap:9px;border-radius:10px;font-weight:800;text-decoration:none;padding:10px 18px;line-height:1.1;}
.step-cta .ic{width:22px;height:22px;flex:none;}
.step-cta-tel{background:var(--blue-deep);color:#fff;}
.step-cta-tel .tx{display:flex;flex-direction:column;text-align:left;}
.step-cta-tel .lbl{font-size:10px;font-weight:600;opacity:.85;}
.step-cta-tel .num{font-size:19px;letter-spacing:.02em;}
.step-cta-line{background:var(--line-green);color:#fff;font-size:15px;}
@media (min-width:768px){ .step-cta .ic{width:24px;height:24px;} .step-cta-tel .num{font-size:21px;} }

/* STEP05 お支払方法パネル */
.step-pay{display:flex;flex-wrap:wrap;align-items:center;gap:9px 10px;margin-top:14px;background:#e3f2fd;border-radius:12px;padding:14px 16px;}
.step-pay img{height:44px;width:auto;display:block;}

/* CTAボタン：同系暗色の影で立体ボタン化／hoverで持ち上がり・activeで沈む */
.btn,.hcta-tel,.hcta-line,.pct-line,.step-cta-tel,.step-cta-line{
  box-shadow:0 4px 0 var(--btn-shadow,#cfcfcf);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
.btn{--btn-shadow:#123e9e;}                                /* 青 */
.btn.line{--btn-shadow:#0a9c43;}                           /* 緑 */
.hcta-tel,.step-cta-tel{--btn-shadow:#0c2a5e;}             /* 濃紺 */
.hcta-line,.pct-line,.step-cta-line{--btn-shadow:#0a9c43;} /* 緑 */
@media (hover:hover){
  .btn:hover,.hcta-tel:hover,.hcta-line:hover,.pct-line:hover,.step-cta-tel:hover,.step-cta-line:hover{
    transform:translateY(-2px);box-shadow:0 6px 0 var(--btn-shadow,#cfcfcf);filter:brightness(1.05);
  }
}
.btn:active,.hcta-tel:active,.hcta-line:active,.pct-line:active,.step-cta-tel:active,.step-cta-line:active{
  transform:translateY(3px);box-shadow:0 1px 0 var(--btn-shadow,#cfcfcf);filter:brightness(.98);
}

/* ===== FV 登場アニメーション（ページ読込時に順次フェードイン） ===== */
@media (prefers-reduced-motion:no-preference){
  .fv-area,.fv-title,.fv-sub,.fv-badges{opacity:0;animation:fvUp .7s cubic-bezier(.22,.61,.36,1) both;}
  .fv-figure,.fv-mobile-visual{opacity:0;animation:fvFade .9s ease both;}  /* 写真はtransform競合回避でフェードのみ */
  .fv-area{animation-delay:.15s;}
  .fv-title{animation-delay:.30s;}
  .fv-sub{animation-delay:.45s;}
  .fv-badges{animation-delay:.60s;}
  .fv-figure,.fv-mobile-visual{animation-delay:.20s;}
}
@keyframes fvUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes fvFade{from{opacity:0;}to{opacity:1;}}

/* ===== FV レスポンシブ微調整 ===== */
/* 〜1023px：タブレット帯もSP合成画像(fv-sp.png)を表示（正方形の作業員写真は出さない） */
@media (max-width:1023px){
  .fv-mobile-visual{display:block;width:100%;height:auto;position:relative;z-index:1;margin-top:8px;}
  .fv-figure{display:none;}
  .fv-splash{display:none;}
  .fv-wave{display:none;}
}
/* 1024〜1239px：タイトル画像を幅に応じて縮小し、右の写真(顔)と被らせない（1240px以上は通常880px） */
@media (min-width:1024px) and (max-width:1239px){
  .fv-title img{max-width:clamp(420px, calc(100vw - 500px), 820px);}
}
/* 料金CTAの作業員画像(cta-man)：1240px以上のPCでのみ表示（SP・タブレットは被るため非表示） */
@media (min-width:1240px){
  .pct-man{display:block;}
}