/*
Theme Name: 彩色2026
Theme URI: https://iroiro2008.net/
Author: 株式会社彩色
Description: 株式会社彩色（大阪・南大阪／外壁塗装・屋根雨漏り修理・エクステリア・外装クリーニング）のオリジナルテーマ。既存の投稿・カテゴリー・URLをそのまま引き継ぐ設計。施工事例のBefore/Afterは管理画面から追加できます。
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: 私的利用（株式会社彩色）
Text Domain: iroiro2026
Tags: business, custom-menu, responsive
*/

/* ==========================================================================
   彩色2026 — スタイルシート

   コンセプト：「白い余白に、色が差す」
     ・白基調・大きな余白・極小の英字ラベル・枠線と影を捨てる
     ・ブランドの薄紫を地に、赤は「押すボタン」だけに
     ・本文17px／行間2.0（シニアの可読性を最優先）

   ブランドカラー（ロゴ画像 logo03.png から実測した値）
     薄紫 #7778B7 ← イメージカラー
     濃紫 #666699
     赤   #E93E4B
     黄   #EFBB2E

   モーション（参考サイトから実測）
     イージング：cubic-bezier(.71,.01,.45,1.01) に統一
   ========================================================================== */

:root{
  --purple:#7778B7;
  --purple-d:#666699;
  --purple-pale:#F6F6FB;
  --purple-deep:#3D3D62;
  --red:#E93E4B;
  --red-d:#D02B3A;
  --yellow:#EFBB2E;
  --amber:#F3A536;

  --ink:#4A4A52;
  --ink-d:#33333A;
  --ink-2:#8E8E9A;
  --hair:#E8E8EC;

  --sans:"Noto Sans JP",sans-serif;
  --en:"Jost",sans-serif;
  --wm:"Inter","Helvetica Neue",Arial,sans-serif;
  --maxw:1240px;

  --ease:cubic-bezier(.71,.01,.45,1.01);
  --d-base:.6s;
  --d-slow:.9s;
}

/* ==========================================================================
   MOTION SYSTEM
   ※ .js-motion が付いているときだけ動きます（JSが壊れても消えない安全設計）
   ========================================================================== */
.js-motion .rv{opacity:0;transform:translateY(34px);
  transition:opacity var(--d-slow) var(--ease),transform var(--d-slow) var(--ease)}
.js-motion .rv.in{opacity:1;transform:none}
.js-motion .rv[data-d="1"]{transition-delay:.10s}
.js-motion .rv[data-d="2"]{transition-delay:.20s}
.js-motion .rv[data-d="3"]{transition-delay:.30s}
.js-motion .rv[data-d="4"]{transition-delay:.40s}
.js-motion .rv[data-d="5"]{transition-delay:.50s}

.js-motion .mask{display:block;overflow:hidden}
.js-motion .mask > span{display:block;transform:translateY(110%);
  transition:transform var(--d-slow) var(--ease)}
.js-motion .mask.in > span{transform:none}

/* 「動きを減らす」設定：移動だけやめ、穏やかなフェードは残す */
@media (prefers-reduced-motion: reduce){
  .js-motion .rv{transform:none;transition:opacity .4s linear}
  .js-motion .mask > span{transform:none}
  .js-motion .rv[data-d]{transition-delay:0s}
}

/* ==========================================================================
   BASE
   ========================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);font-size:17px;font-weight:400;line-height:2.0;
  color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.narrow{max-width:920px;margin-left:auto;margin-right:auto}
section{padding:140px 0}

/* キーボード操作用のスキップリンク */
.skip{position:absolute;left:-9999px;z-index:200;padding:14px 22px;background:var(--ink-d);color:#fff}
.skip:focus{left:16px;top:16px}
:focus-visible{outline:3px solid var(--purple);outline-offset:3px}

/* ==========================================================================
   共通パーツ
   ========================================================================== */
.lab{font-family:var(--en);font-size:11px;font-weight:500;letter-spacing:.34em;
  text-transform:uppercase;color:var(--purple-d);display:block;margin-bottom:22px}

.sig{display:flex;width:54px;height:3px;margin-bottom:26px}
.sig i{flex:1}
.sig i:nth-child(1){background:var(--purple)}
.sig i:nth-child(2){background:var(--red)}
.sig i:nth-child(3){background:var(--yellow)}
.sig.c{margin-left:auto;margin-right:auto}

h1.ttl,h2.ttl{font-size:clamp(26px,3vw,38px);font-weight:300;line-height:1.6;
  letter-spacing:.06em;color:var(--ink-d)}
h1.ttl b,h2.ttl b{font-weight:700}
.lead{margin-top:20px;color:var(--ink-2);font-size:16px;font-weight:300;line-height:2}
.note-s{margin-top:20px;font-size:13px;color:var(--ink-2);font-weight:300;line-height:1.9}

.sec-head{margin-bottom:70px}
.sec-head.c{text-align:center}
.sec-head.c .lab{text-align:center}
.center{text-align:center;margin-top:80px}

/* ボタン：塗りが左から満ちる */
.btn{position:relative;overflow:hidden;z-index:0;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:0 42px;height:64px;font-size:17px;font-weight:500;letter-spacing:.08em;
  border:1px solid transparent;
  transition:color var(--d-base) var(--ease),border-color var(--d-base) var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--d-base) var(--ease),opacity var(--d-base) var(--ease)}
.btn:hover::before{transform:scaleX(1);opacity:1}
.btn .ar{font-family:var(--en);font-size:13px;transition:transform var(--d-base) var(--ease)}
.btn:hover .ar{transform:translateX(5px)}

.btn-cta{background:var(--red);color:#fff}
.btn-cta::before{background:var(--red-d)}
.btn-line{background:#06C755;color:#fff}
.btn-line::before{background:#05a847}
.btn-out{border-color:var(--ink-d);color:var(--ink-d)}
.btn-out::before{background:var(--ink-d)}
.btn-out:hover{color:#fff}
.btn-w{border-color:rgba(255,255,255,.7);color:#fff}
.btn-w::before{background:#fff}
.btn-w:hover{color:var(--ink-d)}

/* 下線が左から伸びるリンク */
.ul{position:relative;display:inline-block}
.ul::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:right center;
  transition:transform var(--d-base) var(--ease)}
.ul:hover::after{transform:scaleX(1);transform-origin:left center}

/* ==========================================================================
   HEADER
   ------------------------------------------------------------------------
   ★2段階のヘッダー
     ① 最上部        … 高さ88px。ロゴ大・電話番号あり・背景は半透明
     ② スクロール後   … 高さ60px。ロゴ小・電話番号は消える・背景は不透明＋罫線
                       （80pxスクロールした時点で header に .small が付きます）

   ★社名（IROIRO INC.®）は、どの状態でも・どのページでも消えません。
     縮むだけです。
   ========================================================================== */
header{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  transition:background .45s var(--ease);
}
/* ② スクロール後：不透明の白のみ。★罫線は引かない（白い余白を切らない） */
header.small{background:#fff}

/* ★スクロール前は社名を大きく（100px＝通常の4倍）。ロゴが主役の状態。
     スクロールすると高さ60px・社名19pxまで一気に縮み、ミニマルなヘッダーに。
     狭い画面では clamp() が自動的に収まるサイズまで下げます。
     ※ .hd の height を変えたら、.hero の margin-top と .page-head/.single の
       padding-top も必ず同じ値に合わせてください（下部に定義） */
/* ★高さは固定しない。中身（社名＋電話＋ボタン）に合わせて自動で決まります。
     縮むときは中身が畳まれるので、高さも滑らかに追従します。
     実際の高さは JS が測って --hd-h に入れ、ヒーロー等の余白がそれに連動します。 */
/* ★padding は上下だけ指定する。padding:30px 0 と書くと .wrap の左右32pxまで
   打ち消してしまい、社名・TELが画面の左端に張り付いて「切れている」ように見えます。 */
.hd{display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-top:30px;padding-bottom:30px;min-height:60px;position:relative;
  transition:padding-top .5s var(--ease),padding-bottom .5s var(--ease)}
header.small .hd{padding-top:10px;padding-bottom:10px}

/* ★左側は3段構成：① 社名 ／ ② 電話番号 ／ ③ 無料見積もりボタン
   スクロールすると ②③ が畳まれ、① だけが残ります */
.hd-l{display:flex;flex-direction:column;align-items:flex-start;gap:16px;flex:none;
  transition:gap .5s var(--ease)}
/* ★縦並びのまま畳む（横並びに切り替えると、その瞬間 TEL が社名の右に回り込みます） */
header.small .hd-l{gap:0}

.logo{display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);flex:none;
  transition:gap .5s var(--ease)}
header.small .logo{gap:12px}

/* マーク：3つの図形を％指定にしたので、外枠を変えるだけで比率どおり拡縮します */
.mark{position:relative;flex:none;
  width:clamp(44px,10.3vw,128px);height:clamp(38px,9vw,112px);
  transition:width .5s var(--ease),height .5s var(--ease)}
header.small .mark{width:24px;height:21px}
.mark i{position:absolute;display:block;border-radius:50%}
.mark i:nth-child(1){width:50%;height:57%;background:var(--purple);left:0;top:32%}
.mark i:nth-child(2){width:37.5%;height:43%;background:var(--red);left:34%;top:0}
.mark i:nth-child(3){width:31%;height:36%;background:var(--yellow);left:62%;top:50%;border-radius:8%}

.logo .wm{font-family:var(--wm);font-size:clamp(34px,8.1vw,100px);font-weight:800;
  letter-spacing:-.035em;color:var(--ink-d);line-height:1;white-space:nowrap;
  transition:font-size .5s var(--ease),letter-spacing .5s var(--ease)}
header.small .logo .wm{font-size:19px;letter-spacing:-.025em}
.logo .wm sup{font-size:.24em;font-weight:500;vertical-align:super;margin-left:.12em;color:var(--purple)}

/* 右側は MENU のみ。
   ★スクロールでヘッダーが縮んでも「MENU」が上下に動かないよう、位置を固定します
     （中央揃えのままだと、ヘッダーの高さ変化に合わせて MENU がずれます） */
.hd-r{position:absolute;top:22px;right:0;display:flex;align-items:center;flex:none;z-index:2}

/* 電話番号：社名の下に左寄せ。スクロールすると消える */
.hd-tel{text-align:left;line-height:1.35;white-space:nowrap;overflow:hidden;
  max-width:400px;max-height:70px;
  transition:opacity .35s var(--ease),max-width .5s var(--ease),
             max-height .5s var(--ease),margin .5s var(--ease)}
header.small .hd-tel{opacity:0;max-width:0;max-height:0;margin:0;pointer-events:none}

/* 「TEL」は番号の左に横並び。番号と同じサイズに揃える */
.hd-tel .num{display:flex;align-items:baseline;justify-content:flex-start;gap:12px}
.hd-tel .l{font-family:var(--en);font-size:28px;font-weight:400;letter-spacing:.06em;color:var(--purple-d)}
.hd-tel a{font-family:var(--en);font-size:28px;font-weight:400;color:var(--ink-d)}
.hd-tel a:hover{color:var(--purple-d)}
.hd-tel .h{font-size:11px;color:var(--ink-2);margin-top:2px}

.hd-cta{background:var(--red);color:#fff;height:50px;padding:0 32px;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:500;letter-spacing:.06em;white-space:nowrap;
  overflow:hidden;max-width:220px;max-height:50px;
  transition:background var(--d-base) var(--ease),opacity .35s var(--ease),
             max-width .5s var(--ease),max-height .5s var(--ease),padding .5s var(--ease)}
.hd-cta:hover{background:var(--red-d)}
/* ★スクロール後は「無料見積もり」も消す → 社名＋MENU だけの完全ミニマル
   （問い合わせ導線はスマホの追従CTAと最下部の最終CTAが担保します） */
header.small .hd-cta{opacity:0;max-width:0;max-height:0;padding:0;pointer-events:none}

/* ④ SNS（無料見積もりの下） */
.hd-sns{overflow:hidden;max-height:140px;
  transition:opacity .35s var(--ease),max-height .5s var(--ease),margin .5s var(--ease)}
header.small .hd-sns{opacity:0;max-height:0;margin:0;pointer-events:none}
.hd-sns-l{display:block;font-family:var(--en);font-size:10px;font-weight:500;
  letter-spacing:.24em;color:var(--purple-d);margin-bottom:10px}
/* ★縦並び（INSTAGRAM → FACEBOOK → LINE の順） */
.hd-sns .row{display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  font-family:var(--en);font-size:12px;letter-spacing:.12em;color:var(--ink)}
.hd-sns .row a:hover{color:var(--purple)}

/* ==========================================================================
   FULLSCREEN MENU
   ========================================================================== */
.menu-btn{display:flex;align-items:center;gap:12px;background:none;border:0;cursor:pointer;
  padding:6px 0;z-index:130;position:relative;color:var(--ink-d)}
.menu-btn .mt{font-family:var(--en);font-size:13px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;overflow:hidden;display:block;height:1.5em;line-height:1.5em;position:relative}
.menu-btn .mt span,.menu-btn .mt::after{display:block;transition:transform var(--d-base) var(--ease)}
.menu-btn .mt::after{content:"MENU";position:absolute;left:0;top:100%;white-space:nowrap}
.menu-btn:hover .mt span,.menu-btn:hover .mt::after{transform:translateY(-100%)}
.on-menu .menu-btn .mt::after{content:"CLOSE"}
.on-menu .menu-btn .mt span,.on-menu .menu-btn .mt::after{transform:translateY(-100%)}

.burger{position:relative;width:34px;height:16px;flex:none}
.burger i{position:absolute;left:0;display:block;width:100%;height:2px;background:var(--ink-d);
  transform-origin:left center;transition:transform var(--d-base) var(--ease)}
.burger i:nth-child(1){top:0}
.burger i:nth-child(2){bottom:0}
.on-menu .burger i:nth-child(1){transform:translateY(7px) rotate(45deg) scaleX(.86)}
.on-menu .burger i:nth-child(2){transform:translateY(-7px) rotate(-45deg) scaleX(.86)}

.mpanel{position:fixed;inset:0;z-index:125;background:#fff;
  display:flex;flex-direction:column;
  justify-content:flex-start;   /* ★中央揃えだと中身が画面より高いとき上端がはみ出す */
  padding:80px 6vw 60px;
  clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease);
  pointer-events:none;overflow-y:auto}
.on-menu .mpanel{clip-path:inset(0 0 0 0);pointer-events:auto}
.on-menu{overflow:hidden}
/* メニューを開いている間はヘッダーを前面に（✕ボタンを押せるように） */
.on-menu header{background:transparent;backdrop-filter:none;z-index:130}
.on-menu .hd-tel,.on-menu .hd-cta{opacity:0;pointer-events:none;transition:opacity .3s}
/* ★ヘッダーの社名は隠す（パネル側の大ロゴと重なるため） */
.on-menu .logo{opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}

.mlogo{overflow:hidden;display:block;margin-bottom:clamp(28px,5vh,64px);flex:none}
.mlogo > span{display:flex;align-items:center;gap:clamp(12px,1.6vw,24px);
  transform:translateY(-180%);transition:transform .75s var(--ease) .15s}
.mlogo > span b{font-family:var(--wm);font-size:clamp(30px,6.4vw,92px);font-weight:800;
  letter-spacing:-.035em;color:var(--ink-d);line-height:1.1;white-space:nowrap}
.mlogo > span b sup{font-size:.24em;font-weight:500;vertical-align:super;margin-left:.1em;color:var(--purple)}
.on-menu .mlogo > span{transform:none}
.mlogo .mark{width:clamp(38px,6.4vw,88px);height:clamp(34px,5.6vw,78px)}
.mlogo .mark i:nth-child(1){width:52%;height:57%;left:0;top:30%}
.mlogo .mark i:nth-child(2){width:40%;height:44%;left:35%;top:0}
.mlogo .mark i:nth-child(3){width:33%;height:37%;left:62%;top:50%;border-radius:8%}

.mnav{list-style:none;margin-bottom:clamp(28px,5vh,56px);flex:none}
.mnav li{overflow:hidden}
.mnav li a{display:block;font-size:clamp(20px,2.8vw,36px);font-weight:300;letter-spacing:.08em;
  padding:.18em 0;color:var(--ink-d);
  transform:translateY(-125%);transition:transform .75s var(--ease),color .3s var(--ease)}
.on-menu .mnav li a{transform:none}
.mnav li a:hover{color:var(--purple)}
.mnav li a em{font-style:normal;font-family:var(--en);font-size:.32em;letter-spacing:.24em;
  color:var(--ink-2);margin-left:1em;vertical-align:middle}
.mnav li a .hl{color:var(--red)}
.on-menu .mnav li:nth-child(1) a{transition-delay:.30s}
.on-menu .mnav li:nth-child(2) a{transition-delay:.36s}
.on-menu .mnav li:nth-child(3) a{transition-delay:.42s}
.on-menu .mnav li:nth-child(4) a{transition-delay:.48s}
.on-menu .mnav li:nth-child(5) a{transition-delay:.54s}
.on-menu .mnav li:nth-child(6) a{transition-delay:.60s}
.on-menu .mnav li:nth-child(7) a{transition-delay:.66s}

/* ★横2列 → 縦積み（Follow Us の下に Inquire） */
.mfoot{display:grid;grid-template-columns:1fr;gap:36px;max-width:900px}
.mblk{overflow:hidden}
.mblk > div{transform:translateY(-125%);transition:transform .75s var(--ease)}
.on-menu .mblk > div{transform:none}
.on-menu .mblk:nth-child(1) > div{transition-delay:.72s}
.on-menu .mblk:nth-child(2) > div{transition-delay:.80s}
.mblk h4{font-family:var(--en);font-size:12px;letter-spacing:.24em;color:var(--purple-d);
  margin-bottom:14px;font-weight:500}
.mblk .row{display:flex;gap:26px;flex-wrap:wrap;font-size:14px;letter-spacing:.08em}
.mblk .row a:hover{color:var(--purple)}
.mblk .addr{font-size:14px;font-weight:300;line-height:1.9;color:var(--ink)}
.mblk .mtel{font-family:var(--en);font-size:30px;font-weight:400;color:var(--red);
  display:inline-block;margin-bottom:4px}

/* ==========================================================================
   HERO（白背景 × 薄紫の文字）
   ------------------------------------------------------------------------
   ★カスタマイザーで「ヒーロー背景写真」を設定すると、
     自動的に .has-img が付き、「写真＋白文字」に切り替わります。
     未設定のあいだは、この白背景×薄紫のミニマルなヒーローになります。
   ========================================================================== */
/* --- お知らせバー（ヒーローの上・さりげない1行） ------------------------- */
/* 罫線は引かない（ヘッダーの白い余白を切ってしまうため） */
.newsbar{margin-top:var(--hd-h,240px);background:#fff}
.newsbar + .hero{margin-top:0}
.newsbar .wrap{display:flex;align-items:center;gap:24px}
.newsbar > .wrap > a:first-child{flex:1;min-width:0}
.newsbar a{display:flex;align-items:center;gap:16px;padding:14px 0;
  font-size:13px;color:var(--ink-2);line-height:1.6}
.newsbar a.all{flex:none;font-family:var(--en);font-size:11px;letter-spacing:.14em;
  color:var(--ink-2);gap:8px}
.newsbar a.all:hover{color:var(--purple-d)}
.newsbar .lab{font-family:var(--en);font-size:10px;font-weight:500;letter-spacing:.22em;
  color:var(--purple-d);flex:none}
.newsbar time{font-family:var(--en);font-size:12px;letter-spacing:.06em;flex:none}
.newsbar .t{color:var(--ink-d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color .3s var(--ease)}
.newsbar .ar{margin-left:auto;flex:none;transition:transform .3s var(--ease)}
.newsbar a:hover .t{color:var(--purple-d)}
.newsbar a:hover .ar{transform:translateX(4px)}
@media(max-width:767px){
  .newsbar a{gap:10px;padding:12px 0;font-size:12px}
  .newsbar time{display:none}
}

.hero{
  /* ★ヘッダーの実際の高さ（JSが --hd-h に入れます）ぶん下げる */
  margin-top:var(--hd-h,240px);
  height:min(84vh,720px);min-height:520px;position:relative;
  display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;
  background:#fff;background-size:cover;background-position:center}
.hero-in{position:relative;z-index:2;padding:0 24px;max-width:var(--maxw)}
/* ★見出しの太さは統一する（★で囲んだ部分だけ太くすると不揃いに見えるため） */
.hero h1{font-size:clamp(28px,4.6vw,54px);font-weight:500;letter-spacing:.12em;line-height:1.7;
  color:var(--purple)}
.hero h1 b{font-weight:500;color:var(--purple-d)}
.hero p{margin-top:26px;font-size:17px;font-weight:300;letter-spacing:.08em;line-height:2;
  color:var(--ink-2)}
.hero-btns{display:flex;gap:14px;justify-content:center;margin-top:46px;flex-wrap:wrap}
/* 白背景では白フチのボタンが見えないので、薄紫のアウトラインに */
.hero .btn-w{border-color:var(--purple);color:var(--purple-d)}
.hero .btn-w::before{background:var(--purple)}
.hero .btn-w:hover{color:#fff}

/* --- 背景スライド（最大3枚・6秒ごとにゆっくりクロスフェード＋ズーム） --- */
.hero-slides{position:absolute;inset:0;z-index:0;overflow:hidden}
/* ★2枚が半透明で重なると「二重露光」になって濁るため、
   前の写真は不透明のまま下に残し、次の写真をその上にフェードインさせる */
/* ★ズーム（ケンバーンズ効果）は使わない。じわじわ動き続けると気が散るため、
   切り替えはフェードのみ。 */
/* ★ケンバーンズ効果：ズーム＋上下左右のパン。写真ごとに違う方向へゆっくり流します */
.hs{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;z-index:0;transform:scale(1.06);
  will-change:opacity,transform;
  transition:opacity 2s cubic-bezier(.4,0,.2,1)}
.hs.prev{opacity:1;z-index:1;transition:opacity 0s}
.hs.on{opacity:1;z-index:2}

.hs.on,.hs.prev{animation-duration:9s;animation-timing-function:linear;animation-fill-mode:forwards}
.hs:nth-child(4n+1).on,.hs:nth-child(4n+1).prev{animation-name:kb-a}
.hs:nth-child(4n+2).on,.hs:nth-child(4n+2).prev{animation-name:kb-b}
.hs:nth-child(4n+3).on,.hs:nth-child(4n+3).prev{animation-name:kb-c}
.hs:nth-child(4n).on,.hs:nth-child(4n).prev{animation-name:kb-d}

@keyframes kb-a{from{transform:scale(1.10) translate(-1.8%,-1.2%)}to{transform:scale(1.02) translate(1.8%,1.2%)}}
@keyframes kb-b{from{transform:scale(1.02) translate(1.6%,1.4%)}to{transform:scale(1.10) translate(-1.6%,-1.4%)}}
@keyframes kb-c{from{transform:scale(1.08) translate(2.2%,0)}to{transform:scale(1.03) translate(-2.2%,0)}}
@keyframes kb-d{from{transform:scale(1.03) translate(0,-1.8%)}to{transform:scale(1.10) translate(0,1.8%)}}

@media (prefers-reduced-motion: reduce){
  .hs.on,.hs.prev{animation:none;transform:scale(1)}
}

/* ★ドット（インジケーター）は非表示。写真は自動で切り替わります。
   もう一度出したい場合は、この display:none の1行を削除してください。 */
.dots{display:none}
.dots--show{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  display:flex;gap:10px;z-index:3}
.dots i{width:7px;height:7px;border-radius:50%;background:#DCDCE6;
  cursor:pointer;transition:background .3s var(--ease)}
.dots i.on{background:var(--purple)}
.hero.has-img .dots i{background:rgba(255,255,255,.45)}
.hero.has-img .dots i.on{background:#fff}

/* --- 写真を設定した場合：自動で「写真＋白文字」に --- */
.hero.has-img{background-color:var(--purple-deep)}
/* 見出しの帯を中央にも入れて、明るい写真でも白文字が確実に読めるようにする */
.hero.has-img::before{content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(120% 70% at 50% 52%,rgba(30,30,50,.52) 0%,rgba(30,30,50,.20) 60%,rgba(30,30,50,0) 100%),
    linear-gradient(180deg,rgba(35,35,58,.46) 0%,rgba(35,35,58,.34) 45%,rgba(35,35,58,.70) 100%)}
.hero.has-img h1,.hero.has-img h1 b{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.35)}
.hero.has-img p{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.65),0 1px 2px rgba(0,0,0,.4)}
.hero.has-img .btn-w{border-color:rgba(255,255,255,.7);color:#fff}
.hero.has-img .btn-w::before{background:#fff}
.hero.has-img .btn-w:hover{color:var(--ink-d)}

/* ==========================================================================
   雨漏り緊急バー
   ========================================================================== */
.urg{display:block;background:var(--red);color:#fff;transition:background var(--d-base) var(--ease)}
.urg:hover{background:var(--red-d)}
.urg-in{display:flex;align-items:center;gap:22px;padding:20px 32px;max-width:var(--maxw)}
.urg-l{flex:none;border:1px solid rgba(255,255,255,.7);font-size:11px;letter-spacing:.2em;
  padding:5px 12px;font-weight:500}
.urg-t{flex:1;font-size:15px;font-weight:300;line-height:1.7}
.urg-t b{font-weight:700;font-size:16px}
.urg-c{flex:none;font-size:14px;font-weight:500;display:flex;align-items:center;gap:10px}
.urg-c b{font-family:var(--en);font-size:22px;font-weight:400}
.urg-c i{font-family:var(--en);font-style:normal}

/* ==========================================================================
   信頼の帯
   ========================================================================== */
.trust{padding:0;background:var(--purple-pale)}
.trust ul{display:grid;list-style:none}
.trust li{text-align:center;padding:52px 10px;border-left:1px solid #E3E3EF}
.trust li:first-child{border-left:0}
/* ★1つ目（施工軒数）は主役。大きく・濃く */
.trust li:first-child .n{font-size:64px;color:var(--purple-d)}
.trust li:first-child .n span{font-size:22px;font-weight:500}
.trust li:first-child .c{font-size:15px;font-weight:500;color:var(--ink-d);letter-spacing:.06em}

.trust .n{font-family:var(--en);font-size:42px;font-weight:300;line-height:1;color:var(--purple)}
.trust .n span{font-family:var(--sans);font-size:15px;font-weight:400;margin-left:4px}
.trust .c{font-size:13px;letter-spacing:.1em;color:var(--ink-2);margin-top:12px;line-height:1.7}
.trust .cs{font-size:11px;color:#A9A9B6;margin-top:6px;font-weight:300}

/* ==========================================================================
   理念
   ========================================================================== */
.stm{text-align:center;padding:150px 0}
.stm .lab{text-align:center}
.stm h2{font-size:clamp(24px,3.2vw,40px);font-weight:300;line-height:2.1;letter-spacing:.12em;color:var(--ink-d)}
.stm h2 b{font-weight:700}
.stm p{margin-top:44px;color:var(--ink-2);font-weight:300;font-size:16px;line-height:2.3}

/* ==========================================================================
   SERVICE
   ========================================================================== */
.svc-main{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:32px}
.svc-b{position:relative;display:block;overflow:hidden}
.svc-b .ph{aspect-ratio:16/10;transition:transform 1.2s var(--ease)}
.svc-b:nth-child(1) .ph{background:linear-gradient(150deg,#5F60A4,#9FA0D0)}
.svc-b:nth-child(2) .ph{background:linear-gradient(150deg,#C93042,#EC7480)}
.svc-b:hover .ph{transform:scale(1.05)}
/* 写真の上でも白文字がはっきり読めるよう、下半分を暗く落とす */
.svc-b .cap{position:absolute;left:0;bottom:0;padding:36px;color:#fff;z-index:2;width:100%;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(20,20,32,.45) 35%,rgba(20,20,32,.82) 100%);
  text-shadow:0 1px 8px rgba(0,0,0,.5)}
.svc-b .k{font-family:var(--en);font-size:10px;letter-spacing:.3em;opacity:.85;margin-bottom:10px}
.svc-b h3{font-size:26px;font-weight:500;letter-spacing:.06em;margin-bottom:8px}
.svc-b p{font-size:14px;font-weight:300;line-height:1.8;opacity:.92}
.svc-b .ar{font-family:var(--en);font-size:12px;letter-spacing:.16em;margin-top:14px;display:block;
  transition:transform var(--d-base) var(--ease)}
.svc-b:hover .ar{transform:translateX(6px)}

.svc-sub{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.svc-s{background:#fff;padding:36px 26px;display:block;transition:background .3s var(--ease)}
.svc-s:hover{background:#FAFAFB}
.svc-s .sw{width:26px;height:3px;margin-bottom:16px;display:block}
.svc-s:nth-child(1) .sw{background:var(--yellow)}
.svc-s:nth-child(2) .sw{background:var(--amber)}
.svc-s:nth-child(3) .sw{background:var(--purple)}
.svc-s:nth-child(4) .sw{background:var(--purple-d)}
.svc-s h3{font-size:18px;font-weight:500;margin-bottom:10px;letter-spacing:.04em;color:var(--ink-d)}
.svc-s p{font-size:13px;font-weight:300;color:var(--ink-2);line-height:1.95}
.svc-s .ar{font-family:var(--en);font-size:11px;letter-spacing:.16em;color:var(--ink-2);margin-top:14px;display:block}
.svc-note{margin-top:36px;text-align:center;font-size:15px;font-weight:300;color:var(--ink-2)}

/* ==========================================================================
   雨漏り
   ========================================================================== */
.leak{background:#FAFAF9}
.leak-g{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center}
.leak-img{aspect-ratio:4/3;background:linear-gradient(150deg,#4a5568,#8b95a6)}
.sign{list-style:none;margin-top:32px}
.sign li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--hair);
  font-size:16px}
.sign li::before{content:"";flex:none;width:7px;height:7px;background:var(--red);border-radius:50%;margin-top:12px}
.sign li span{font-size:13px;color:var(--ink-2);font-weight:300;display:block;line-height:1.8}
.leak-cta{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap}

/* ==========================================================================
   WORKS（Before / After）
   ========================================================================== */
/* minmax(0,1fr) にしないと、中身の最小幅で列が押し広げられて崩れる */
.works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 32px}
.work{min-width:0}
.ba{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden;background:#eee}
.ba .b,.ba .a{position:absolute;inset:0;
  transition:transform 1.2s var(--ease),opacity var(--d-slow) var(--ease)}
.ba .b img,.ba .a img{width:100%;height:100%;object-fit:cover}
.ba .a{opacity:0}
.ba:hover .a{opacity:1}
.ba:hover .b,.ba:hover .a{transform:scale(1.05)}
.ba .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--en);font-size:13px;letter-spacing:.28em;color:#fff;background:#9a9aa4}
.ba .a .ph{background:var(--purple)}
.ba .tg{position:absolute;top:0;left:0;z-index:3;background:#fff;color:var(--purple-d);
  font-size:11px;letter-spacing:.14em;padding:8px 14px;font-weight:500}
.ba .hint{position:absolute;bottom:12px;right:14px;z-index:3;font-family:var(--en);
  font-size:11px;letter-spacing:.16em;color:#fff;opacity:.85;pointer-events:none}
.work h3{margin-top:20px;font-size:17px;font-weight:500;line-height:1.8;color:var(--ink-d)}
.work h3 a:hover{color:var(--purple-d)}
.work .meta{margin-top:8px;font-size:13px;color:var(--ink-2);line-height:1.9}
.iroiro-empty{background:#FFF8E5;border-left:4px solid var(--yellow);padding:20px 24px;font-size:15px}

/* 詳細ページの大きな Before/After */
.ba-big{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:56px 0}
.ba-big figure{position:relative;background:#f0f0f3;aspect-ratio:4/3;overflow:hidden}
.ba-big img{width:100%;height:100%;object-fit:cover}
.ba-big .bl{position:absolute;top:0;left:0;z-index:2;background:#9a9aa4;color:#fff;
  font-family:var(--en);font-size:11px;letter-spacing:.24em;padding:8px 16px}
.ba-big .bl.af{background:var(--purple)}
.ba-big .ph{display:flex;align-items:center;justify-content:center;height:100%;
  font-size:13px;color:var(--ink-2)}

/* ==========================================================================
   お悩み / 約束 / カラーシミュレーション
   ========================================================================== */
.tro{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.tro li{background:#fff;list-style:none;padding:44px 32px;transition:background .3s var(--ease)}
.tro li:hover{background:#FAFAFB}
.tro .n{font-family:var(--en);font-size:12px;letter-spacing:.2em;color:var(--red);margin-bottom:14px}
.tro h3{font-size:19px;font-weight:500;line-height:1.7;margin-bottom:10px;color:var(--ink-d)}
.tro p{font-size:14px;color:var(--ink-2);font-weight:300;line-height:1.95}
.tro p b{color:var(--red);font-weight:500}

.prm{display:grid;grid-template-columns:repeat(4,1fr);gap:44px}
.prm .no{font-family:var(--en);font-size:38px;font-weight:300;color:var(--hair);line-height:1}
.prm h3{font-size:20px;font-weight:500;margin:16px 0 14px;letter-spacing:.04em;color:var(--ink-d)}
.prm .rl{width:30px;height:2px;margin-bottom:16px}
.prm div:nth-child(1) .rl{background:var(--purple)}
.prm div:nth-child(2) .rl{background:var(--red)}
.prm div:nth-child(3) .rl{background:var(--yellow)}
.prm div:nth-child(4) .rl{background:var(--amber)}
.prm p{font-size:15px;font-weight:300;color:var(--ink-2);line-height:2}

.csim{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;align-items:center}
.csim-img{aspect-ratio:4/3;background:linear-gradient(120deg,#EFBB2E,#E93E4B 45%,#7778B7)}
.swatches{display:flex;gap:10px;margin-top:28px}
.swatches i{width:38px;height:38px;border-radius:50%;display:block}

/* ==========================================================================
   PRICE
   ========================================================================== */
.ptbl{width:100%;border-collapse:collapse;font-size:16px}
.ptbl th,.ptbl td{padding:28px 14px;border-bottom:1px solid var(--hair);text-align:center;font-weight:400}
.ptbl thead th{font-family:var(--en);font-size:11px;letter-spacing:.22em;color:var(--ink-2);
  padding-bottom:16px;border-bottom:1px solid var(--ink-d)}
.ptbl tbody th{text-align:left;font-weight:500;font-size:18px;color:var(--ink-d)}
.ptbl .y{font-family:var(--en);font-size:30px;font-weight:300;color:var(--purple-d)}
.ptbl .y small{font-family:var(--sans);font-size:14px;font-weight:400;margin-left:2px;color:var(--ink)}
.ptbl tbody tr:nth-child(2) .y{color:var(--red)}
.pnote{margin-top:26px;font-size:14px;color:var(--ink-2);font-weight:300;line-height:2}
.pnote strong{font-weight:500;color:var(--ink-d)}
.p2{margin-top:80px;padding-top:60px;border-top:1px solid var(--hair)}
.p2 ul{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0 60px}
.p2 li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:20px 0;border-bottom:1px solid var(--hair)}
.p2 li b{font-weight:500;font-size:16px;flex:none;color:var(--ink-d)}
.p2 li span{font-size:14px;font-weight:300;color:var(--ink-2);text-align:right}

/* ==========================================================================
   FLOW / NEWS / FAQ / ABOUT
   ========================================================================== */
.flow{display:grid;grid-template-columns:repeat(6,1fr);gap:24px}
.step{border-top:1px solid var(--ink-d);padding-top:22px}
.step .n{font-family:var(--en);font-size:12px;letter-spacing:.2em;color:var(--ink-2);margin-bottom:12px}
.step h3{font-size:16px;font-weight:500;margin-bottom:10px;color:var(--ink-d)}
.step p{font-size:13px;font-weight:300;color:var(--ink-2);line-height:1.9}
.fnote{margin-top:60px;text-align:center;font-size:16px;font-weight:300}
.fnote b{font-weight:700;border-bottom:2px solid var(--red)}

.two{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.bh{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:16px;
  border-bottom:1px solid var(--ink-d);margin-bottom:8px}
.bh .lab{margin:0}
.bh a{font-family:var(--en);font-size:11px;letter-spacing:.2em;color:var(--ink-2)}
.bh a:hover{color:var(--red)}
.news{list-style:none}
.news li{border-bottom:1px solid var(--hair)}
.news a{display:flex;gap:18px;align-items:center;padding:22px 0;flex-wrap:wrap;transition:opacity .25s var(--ease)}
.news a:hover{opacity:.55}
.news time{font-family:var(--en);font-size:13px;color:var(--ink-2);flex:none}
.news .c{font-size:10px;letter-spacing:.12em;border:1px solid var(--hair);padding:3px 10px;color:var(--ink-2);flex:none}
.news .t{font-size:15px}
.ig{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.ig div{aspect-ratio:1}
.ig div:nth-child(1){background:linear-gradient(135deg,#7778B7,#B4B5DA)}
.ig div:nth-child(2){background:linear-gradient(135deg,#E93E4B,#F49AA1)}
.ig div:nth-child(3){background:linear-gradient(135deg,#EFBB2E,#F7DE95)}
.ig div:nth-child(4){background:linear-gradient(135deg,#F3A536,#F9CE99)}
.ig div:nth-child(5){background:linear-gradient(135deg,#666699,#A8A8C9)}
.ig div:nth-child(6){background:linear-gradient(135deg,#8b7a68,#c9baa8)}
.ig-note{margin-top:16px;font-size:13px;color:var(--ink-2);font-weight:300}

.qa{border-bottom:1px solid var(--hair);background:transparent}
.qa summary{list-style:none;cursor:pointer;padding:30px 56px 30px 0;position:relative;
  font-size:18px;font-weight:400;line-height:1.7;color:var(--ink-d)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:8px;top:38px;width:14px;height:1px;background:var(--ink-d)}
.qa summary::before{content:"";position:absolute;right:14px;top:32px;width:1px;height:13px;
  background:var(--ink-d);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.qa[open] summary::before{transform:rotate(90deg);opacity:0}
.qa .a{padding:0 40px 34px 0;font-size:16px;font-weight:300;color:var(--ink-2);line-height:2.1}

.about{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.about-img{aspect-ratio:4/5;background:linear-gradient(160deg,#7778B7,#A3A4CE 50%,#EFBB2E)}
.cotbl{width:100%;border-collapse:collapse;font-size:15px;margin-top:36px}
.cotbl th,.cotbl td{border-bottom:1px solid var(--hair);padding:16px 0;text-align:left;
  vertical-align:top;font-weight:400}
.cotbl th{width:110px;color:var(--ink-2);font-size:13px;letter-spacing:.08em;
  white-space:nowrap;padding-right:20px}
.cotbl td{line-height:1.9}
.cotbl.spec{margin:0 0 48px}
.tel-link{color:var(--red);font-weight:500}
.areas{margin-top:100px;padding-top:60px;border-top:1px solid var(--hair)}
.areas .tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.areas .tags span{border:1px solid var(--hair);padding:8px 18px;font-size:14px;font-weight:300}

/* ==========================================================================
   下層ページ / 記事詳細
   ========================================================================== */
/* ★ヘッダーの実際の高さ（--hd-h）に連動 */
.page-head{padding-top:calc(var(--hd-h,240px) + 60px);padding-bottom:0}
.crumb{font-family:var(--en);font-size:12px;letter-spacing:.12em;color:var(--ink-2);margin-bottom:36px}
.crumb a:hover{color:var(--purple)}
.crumb span{margin:0 10px}
.crumb .now{color:var(--ink-d);margin:0}
.page-hero{margin-top:48px}
.single{padding-top:calc(var(--hd-h,240px) + 60px);padding-bottom:0}
.single-meta{display:flex;gap:14px;align-items:center;margin-top:24px;flex-wrap:wrap}
.single-meta time{font-family:var(--en);font-size:14px;color:var(--ink-2)}
.single-meta .c{font-size:11px;letter-spacing:.1em;border:1px solid var(--hair);padding:4px 12px;color:var(--ink-2)}
.single-meta .c:hover{border-color:var(--purple);color:var(--purple)}

.staff-comment{background:var(--purple-pale);padding:32px 36px;margin:0 0 48px;border-left:3px solid var(--purple)}
.staff-comment .lab{margin-bottom:12px}
.staff-comment p{font-size:16px;font-weight:300;line-height:2}

.entry{font-size:17px;line-height:2.1}
.entry > * + *{margin-top:1.6em}
.entry h2{font-size:26px;font-weight:500;color:var(--ink-d);padding-bottom:14px;
  border-bottom:1px solid var(--hair);margin-top:2.4em}
.entry h3{font-size:20px;font-weight:500;color:var(--ink-d);margin-top:2em;
  padding-left:14px;border-left:3px solid var(--purple)}
.entry ul,.entry ol{padding-left:1.4em}
.entry li{margin-bottom:.5em}
.entry a{color:var(--purple-d);text-decoration:underline}
.entry a:hover{color:var(--red)}
.entry img{margin:2em auto}
.entry blockquote{border-left:3px solid var(--hair);padding-left:24px;color:var(--ink-2);font-weight:300}
.entry table{width:100%;border-collapse:collapse}
.entry th,.entry td{border:1px solid var(--hair);padding:14px 16px;text-align:left}
.entry th{background:var(--purple-pale);font-weight:500}

.single-cta{margin-top:100px;padding:64px 32px;background:var(--purple-pale);text-align:center}
.single-cta .lead{margin-bottom:0}

.pager{margin-top:80px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pager .page-numbers{display:flex;align-items:center;justify-content:center;min-width:48px;height:48px;
  padding:0 14px;border:1px solid var(--hair);font-family:var(--en);font-size:14px;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.pager .page-numbers:hover{border-color:var(--ink-d)}
.pager .page-numbers.current{background:var(--purple-d);border-color:var(--purple-d);color:#fff}

/* ==========================================================================
   最終CTA / FOOTER / 追従CTA
   ========================================================================== */
.final{background:var(--purple-deep);color:#fff;text-align:center;padding:150px 0}
.final .sig{margin:0 auto 30px}
.final h2{font-size:clamp(26px,3.4vw,42px);font-weight:300;letter-spacing:.1em;line-height:1.8;color:#fff}
.final h2 b{font-weight:700}
.final .lead{color:rgba(255,255,255,.75)}
.f3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.18);
  margin:70px auto 0;max-width:960px}
.fc{background:var(--purple-deep);padding:48px 26px}
.fc .k{font-family:var(--en);font-size:11px;letter-spacing:.28em;color:rgba(255,255,255,.55);margin-bottom:18px}
.fc .big{font-family:var(--en);font-size:31px;font-weight:300;line-height:1.2;color:#fff;display:block}
.fc .jp{font-size:21px;letter-spacing:.08em;color:#fff}
.fc .sub{font-size:13px;color:rgba(255,255,255,.62);margin-top:10px;font-weight:300;line-height:1.8}
.fc .btn{width:100%;margin-top:24px;height:56px;padding:0;font-size:15px}

footer{padding:90px 0 34px;font-size:14px;font-weight:300}
.ft{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:60px;padding-bottom:60px;border-bottom:1px solid var(--hair)}
.ft .logo{margin-bottom:24px}
.ft p{line-height:2;color:var(--ink-2)}
.ft h4{font-family:var(--en);font-size:11px;letter-spacing:.24em;color:var(--purple-d);
  margin-bottom:20px;font-weight:500}
.ft ul{list-style:none}
.ft li{margin-bottom:12px}
.ft ul a:hover{color:var(--red)}
.ft-tel{font-family:var(--en);font-size:27px;color:var(--ink-d);display:block;margin:10px 0 6px}
.copy{padding-top:30px;font-family:var(--en);font-size:11px;letter-spacing:.16em;color:var(--ink-2);text-align:center}

.sticky{display:none;position:fixed;bottom:0;left:0;width:100%;z-index:120;
  grid-template-columns:1fr 1fr 1.25fr;background:#fff;border-top:1px solid var(--hair)}
.sticky a{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:11px 4px;font-size:11px;font-weight:500;line-height:1.5;min-height:62px}
.sticky b{font-size:15px;font-weight:500}
.s-tel{background:var(--purple-d);color:#fff}
.s-tel b{font-family:var(--en);font-size:15px}
.s-line{background:#06C755;color:#fff}
.s-cta{background:var(--red);color:#fff}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1080px){
  .hd-tel{display:none}
  .works{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prm,.tro,.svc-sub{grid-template-columns:repeat(2,1fr)}
  .csim,.about,.two,.leak-g{grid-template-columns:1fr;gap:48px}
  .flow{grid-template-columns:repeat(3,1fr);row-gap:40px}
  .urg-in{flex-wrap:wrap;gap:12px}
  .urg-t{flex:1 1 100%;order:3}
  .about-img{aspect-ratio:16/9}
}

@media(max-width:768px){
  body{font-size:16px;padding-bottom:62px}
  section{padding:80px 0}
  .stm,.final{padding:90px 0}
  .wrap{padding:0 20px}
  .sec-head{margin-bottom:44px}
  .center{margin-top:48px}
  /* スマホのヘッダー：社名のみ（電話・見積は画面下の追従CTAが担当） */
  .hd{padding:18px 0}
  header.small .hd{padding:0}
  .hd-r{top:16px}
  .hd-l{gap:0}
  .logo .wm{font-size:30px}
  header.small .logo .wm{font-size:16px}
  .hd-tel{display:none}
  .hd-cta{display:none}
  .hd-sns{display:none}
  .menu-btn .mt{display:none}

  .hero{height:auto;min-height:0;padding:80px 0 100px}
  .hero h1{font-size:27px;letter-spacing:.08em}
  .hero p{font-size:15px}
  .hero-btns{flex-direction:column}
  .hero-btns .btn{width:100%}

  .urg-in{padding:18px 20px;gap:10px}
  .urg-t{font-size:14px;order:2}
  .urg-c{flex:1 1 100%;order:3;justify-content:center;border-top:1px solid rgba(255,255,255,.35);padding-top:12px}

  .trust ul{grid-template-columns:repeat(2,1fr)!important}
  .trust li{padding:30px 8px;border-top:1px solid #E3E3EF}
  .trust li:nth-child(odd){border-left:0}
  .trust li:nth-child(-n+2){border-top:0}
  .trust .n{font-size:33px}

  .works,.tro,.prm,.svc-main,.svc-sub,.f3,.ft,.p2 ul,.ba-big{grid-template-columns:1fr}
  .works{gap:36px}
  .svc-main{gap:20px;margin-bottom:20px}
  .svc-b .cap{padding:24px}
  .svc-b h3{font-size:21px}
  .flow{grid-template-columns:repeat(2,1fr)}
  .leak-img{aspect-ratio:16/10}
  .leak-cta .btn{width:100%}

  .ptbl thead{display:none}
  .ptbl tbody th,.ptbl tbody td{display:block;text-align:left;border:0;padding:6px 0}
  .ptbl tbody tr{display:block;padding:26px 0;border-bottom:1px solid var(--hair)}
  .ptbl td::before{content:attr(data-l);display:block;font-size:11px;letter-spacing:.16em;
    color:var(--ink-2);font-family:var(--en)}
  .p2{margin-top:56px;padding-top:44px}
  .p2 li{flex-direction:column;gap:2px;align-items:flex-start}
  .p2 li span{text-align:left}

  .f3{background:transparent;gap:12px}
  .fc{border:1px solid rgba(255,255,255,.2)}
  .qa summary{font-size:16px;padding:24px 44px 24px 0}
  .qa .a{font-size:15px;padding-right:0}

  .page-head,.single{padding-top:calc(var(--hd-h,80px) + 48px)}
  .single-cta{padding:44px 20px;margin-top:64px}
  .entry h2{font-size:22px}

  .sticky{display:grid}

  .mpanel{padding:100px 22px;justify-content:flex-start}
  .mlogo{margin-bottom:36px}
  .mnav{margin-bottom:36px}
  .mnav li a{font-size:24px;padding:.3em 0}
  .mnav li a em{display:block;margin:2px 0 0;font-size:10px}
  .mfoot{grid-template-columns:1fr;gap:28px}
}

/* ==========================================================================
   印刷
   ========================================================================== */
@media print{
  header,.mpanel,.sticky,.urg,.final,.menu-btn{display:none!important}
  .js-motion .rv,.js-motion .mask > span{opacity:1!important;transform:none!important}
  body{padding:0}
}

/* --- 施工事例：拡大ボタン + ライトボックス ------------------------------ */
.work{position:relative}
.work .zoom{position:absolute;left:10px;top:calc(75% - 44px);z-index:4;
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--ink-d);border:0;
  padding:7px 11px;font-size:11px;letter-spacing:.08em;font-family:var(--sans);
  opacity:0;transform:translateY(4px);
  transition:opacity var(--d-base) var(--ease),transform var(--d-base) var(--ease),background .2s}
.work:hover .zoom,.work .zoom:focus-visible{opacity:1;transform:translateY(0)}
.work .zoom:hover{background:#fff;color:var(--purple-d)}
.work .zoom svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
@media (hover:none){ .work .zoom{opacity:1;transform:none} }

.lb{position:fixed;inset:0;z-index:200;display:none;background:rgba(26,26,32,.985);padding:40px 24px;overflow:auto}
.lb.on{display:block}
.lb-in{max-width:1200px;margin:0 auto}
.lb-ttl{color:#fff;font-size:15px;font-weight:500;letter-spacing:.04em;margin-bottom:20px;padding-right:60px;line-height:1.7}
.lb-imgs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.lb-imgs.one{grid-template-columns:1fr;max-width:820px;margin:0 auto}
.lb-fig{position:relative;margin:0}
.lb-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#222}
.lb-imgs.one .lb-fig img{aspect-ratio:auto;height:auto;object-fit:contain;max-height:calc(100vh - 160px)}
.lb-fig figcaption{position:absolute;top:0;left:0;background:#9a9aa4;color:#fff;
  font-family:var(--en);font-size:11px;letter-spacing:.16em;padding:7px 13px}
.lb-fig.af figcaption{background:var(--purple)}
.lb-x{position:fixed;top:18px;right:22px;z-index:2;width:44px;height:44px;background:none;border:0;cursor:pointer;color:#fff;font-size:0}
.lb-x::before,.lb-x::after{content:"";position:absolute;left:11px;top:21px;width:22px;height:1.5px;background:#fff;transition:background .2s}
.lb-x::before{transform:rotate(45deg)}
.lb-x::after{transform:rotate(-45deg)}
.lb-x:hover::before,.lb-x:hover::after{background:var(--red)}
body.lb-open{overflow:hidden}
@media(max-width:767px){
  .lb{padding:64px 16px 32px}
  .lb-imgs{grid-template-columns:1fr}
}

/* ★固定ページ本文（.entry）の中でショートコード [iroiro_works] を使ったときの
   スタイル干渉を打ち消す。これがないと事例タイトルに下線や縦棒が付いてしまいます */
.entry .works{margin-top:56px}
.entry .works h3{font-size:17px;font-weight:500;line-height:1.8;color:var(--ink-d);
  margin-top:20px;padding:0;border:0}
.entry .works h3 a{color:inherit;text-decoration:none}
.entry .works h3 a:hover{color:var(--purple-d);text-decoration:none}
.entry .works .meta{margin-top:8px}
.entry .works .work > * + *{margin-top:0}
.entry .works .ba{margin:0}
.entry .works .ba img{margin:0}


/* ★固定ページ本文の中に置いたボタンが、本文リンクの色（薄紫＋下線）に
   上書きされて読めなくなるのを防ぐ */
.entry a.btn{text-decoration:none}
.entry a.btn-cta,.entry a.btn-cta:hover{color:#fff}
.entry a.btn-line,.entry a.btn-line:hover{color:#fff}
.entry a.btn-out{color:var(--ink-d)}
.entry a.btn-out:hover{color:#fff}
.entry a.btn-w{color:var(--ink-d);border-color:var(--ink-d)}
.entry a.btn-w:hover{color:#fff}
.entry .center{margin-top:64px;text-align:center}


/* ★設定画面（トップページの写真）で写真を入れると、色の枠が写真に置き換わります */
.svc-b .ph.has-img{background-size:cover;background-position:center}
.leak-img.has-img{background-size:cover;background-position:center}

.csim-img.has-img{background-size:cover;background-position:center}


/* --- お知らせ一覧（バックナンバー） --- */
.entry .newslist{margin-top:8px}
.entry .nl-year{margin-top:56px;margin-bottom:8px;font-family:var(--en);font-size:22px;
  font-weight:500;letter-spacing:.06em;color:var(--purple-d);
  padding-bottom:10px;border-bottom:1px solid var(--hair)}
.entry .newslist > .nl-year:first-child{margin-top:0}
.entry ul.nl{list-style:none;margin-top:0;padding-left:0}
.entry ul.nl li{margin:0;border-bottom:1px solid var(--hair)}
.entry ul.nl li a{display:flex;align-items:baseline;gap:18px;padding:18px 2px;
  color:var(--ink-d);text-decoration:none;transition:color .3s var(--ease)}
.entry ul.nl li a:hover{color:var(--purple-d)}
.entry ul.nl time{font-family:var(--en);font-size:13px;letter-spacing:.06em;color:var(--ink-2);flex:none}
.entry ul.nl .c{font-size:11px;letter-spacing:.06em;color:var(--purple-d);
  border:1px solid var(--hair);padding:3px 10px;flex:none;line-height:1.6}
.entry ul.nl .t{font-size:16px;line-height:1.8}
@media(max-width:767px){
  .entry ul.nl li a{flex-wrap:wrap;gap:8px 12px;padding:16px 2px}
  .entry ul.nl .t{flex-basis:100%;font-size:15px}
  .entry .nl-year{margin-top:44px;font-size:19px}
  .newsbar a.all{display:none}
}


/* --- 本文の画像・ギャラリー（チラシなど複数枚を並べる） --- */
.entry .wp-block-image{margin:2em 0}
.entry .wp-block-image img{width:100%;height:auto;display:block;margin:0}
.entry figure figcaption{margin-top:10px;font-size:13px;color:var(--ink-2);text-align:center;line-height:1.8}
.entry .wp-block-gallery{display:grid;gap:14px;margin:2em 0;list-style:none;padding:0}
.entry .wp-block-gallery.columns-1{grid-template-columns:1fr}
.entry .wp-block-gallery.columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.entry .wp-block-gallery.columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.entry .wp-block-gallery.columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.entry .wp-block-gallery .wp-block-image{margin:0}
.entry .wp-block-gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transition:opacity .3s var(--ease)}
.entry .wp-block-gallery a:hover img{opacity:.85}
@media(max-width:767px){
  .entry .wp-block-gallery.columns-3,
  .entry .wp-block-gallery.columns-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* --- PC用 追従CTA（右下・スクロールすると現れる） --- */
.fab{position:fixed;right:24px;bottom:24px;z-index:118;
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s}
body.scrolled .fab{opacity:1;visibility:visible;transform:translateY(0)}
/* ★ページ下部の最終CTAが見えたら引っ込める（フッターと重ならない／導線の重複も防ぐ） */
body.at-cta .fab{opacity:0;visibility:hidden;transform:translateY(14px)}
.fab a{display:flex;flex-direction:column;justify-content:center;
  min-width:186px;padding:9px 16px;line-height:1.45;
  box-shadow:0 4px 18px rgba(30,30,50,.16);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.fab a:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(30,30,50,.24)}
.fab .k{font-size:14px;font-weight:500;letter-spacing:.03em}
.fab .s{font-size:10px;margin-top:1px;opacity:.82}
.fab-cta{background:var(--red);color:#fff}
.fab-cta:hover{background:var(--red-d);color:#fff}
.fab-tel{background:var(--purple-d);color:#fff}
.fab-tel .k{font-family:var(--en);font-size:19px;letter-spacing:.02em}
.fab-line{background:#06C755;color:#fff}
.fab-line:hover{background:#05a847;color:#fff}
@media(max-width:767px){ .fab{display:none} }
@media print{ .fab{display:none!important} }