/* ============================================================
   No.60 松井電管 — v6（リニューアル：Reference Override 初実戦）
   参考：カノデンキ=写真の配置・縦書き帯・色面の使い方
        ブルーフロント芝浦=淡ブルーグレー #E7ECEF × ロイヤルブルー #003DA5
   文字・余白 = Corporate Standard（変更しない・オーナー指示）
   調整パネル（数値はすべてここから変える）
   ============================================================ */
:root{
  /* 色（DESIGN v2 §08：ロイヤルブルー系） */
  --ink:#1C2B4B;        /* 見出し・濃い文字（青みネイビー） */
  --ink-2:#333A47;      /* 本文 */
  --mut:#5A6373;        /* 補足 */
  --accent:#003DA5;     /* アクセント：ロイヤルブルー（文字・ボタン・強調） */
  --accent-d:#00307F;   /* ボタンの縁 */
  --accent-l:#8FB0E8;   /* 濃地の上のブルー */
  --blue-deep:#123E8F;  /* 🔴 面のブルー（大胆背景・カノデンキの赤ベタ相当） */
  --navy:#16294F;       /* Works/Contactの濃地（面のブルーより暗く） */
  --tint:#E1E7EF;       /* 淡ブルーグレー（2026-08-29 再調整：彩度20→32%へ。青みをはっきり出す・オーナー指示） */
  --line:#CDD6E5;       /* 同上・罫線側（彩度19→32%） */
  --th-bg:#E7EDF6;      /* 🔴 表の項目セル専用（2026-08-30 追加）。白い表カードの中で「白(内容)＜項目＜地色(tint)」の順に明るさを置くための4色目 */  --line-2:#B6C5DB;     /* 🔴 表の罫線専用・--line より一段濃い（2026-08-30 追加）。地色/項目セル/白が明るさの近い範囲に集まるため、"面"ではなく"線"で仕切る役目を持たせる */
  --foot:#123E8F;   /* Footer=Servicesと同じ面のブルー（2026-08-29 オーナー指示）*/
  /* 形（カノデンキ流：角丸を大きく） */
  --r:14px;             /* 写真・カード */
  --r-s:6px;            /* ボタン・小物 */
  /* 余白（Corporate Standard・変更なし） */
  --sec-pc:92px; --sec-sp:60px;
  --head-gap:56px; --eng-gap:6px; --el-gap:20px;
  --card-gap:24px; --card-gap-sp:16px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{
  font-family:"Noto Sans JP",sans-serif;
  font-size:16px; line-height:2.0; letter-spacing:0; font-weight:400;
  color:var(--ink-2); background:#fff;
}
img{ max-width:100%; display:block; }
.wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }
section{ padding:var(--sec-pc) 0; }

/* 🔴 改行の出し分け（2026-08-30 新設）
   HTMLはPC・スマホで共通のため、<br>を直接足すと必ず両方に出る。
   片方だけで改行したいときは <br class="br-sp"> / <br class="br-pc"> を使う。 */
.br-sp{ display:none; }                                  /* スマホでだけ改行 */
.br-pc{ display:inline; }                                /* PCでだけ改行 */
@media (max-width:900px){
  .br-sp{ display:inline; }
  .br-pc{ display:none; }
}

/* ---- 断り書き ---- */
.demo-notice{
  background:#1f2937; color:#fff;
  font-size:14px; line-height:1.7;
  padding:12px 20px; text-align:center;
}

/* ---- 見出しブロック（Corporate Standard） ---- */
.sechd{ margin-bottom:var(--head-gap); }
.sechd .eng{
  font-size:14px; font-weight:600; letter-spacing:.14em;
  color:var(--accent); margin-bottom:var(--eng-gap);
}
.sechd h2{
  font-size:40px; font-weight:600; line-height:1.4; letter-spacing:.05em;
  color:var(--ink);
}
.sechd .lead{ margin-top:var(--head-gap); font-size:16px; }
.em{ font-weight:700; color:var(--accent); font-style:normal; }
.em--w{ color:#fff; border-bottom:2px solid var(--accent-l); font-weight:700; }

/* ---- ボタン（型：影3枚・反転・沈み込み） ---- */
.btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-size:15px; font-weight:700; padding:15px 30px; border-radius:var(--r-s);
  background:var(--accent); color:#fff; border:1px solid var(--accent-d);
  cursor:pointer; font-family:inherit; white-space:nowrap; letter-spacing:.02em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -2px 0 rgba(0,0,0,.16),
    0 2px 4px rgba(22,41,79,.22);
  transition:background .2s ease, color .2s ease, border-color .2s ease,
             box-shadow .2s ease, transform .12s ease;
}
.btn:hover{
  background:#fff; color:var(--accent); border-color:var(--accent);
  transform:translateY(-1px);
  box-shadow:
    inset 0 -2px 0 rgba(0,61,165,.20),
    0 5px 10px rgba(22,41,79,.20);
}
.btn:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.24),
    0 1px 1px rgba(22,41,79,.16);
}

/* ---- ヘッダー ---- */
.hd{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); }
/* 上端の青い線（2026-09-01 オーナー決定・参考：derta.co.jp）。下線は無しにして線だけ残す */
.hd::before{ content:""; position:absolute; top:0; left:0; right:0; height:6px; background:#003DA5; }
.hd__in{ display:flex; align-items:center; gap:26px; padding-top:14px; padding-bottom:14px; }
.hd__logo{ display:block; text-decoration:none; color:inherit; }
.hd__name{ font-size:20px; font-weight:700; letter-spacing:.05em; color:var(--accent); line-height:1.4; }
.hd__sub{ font-size:13.5px; color:var(--mut); line-height:1.4; }
.hd__nav{ display:flex; gap:20px; margin-left:auto; }
.hd__nav a{
  font-size:15px; font-weight:500; color:var(--ink-2); text-decoration:none;
  letter-spacing:.02em; transition:color .2s ease;
}
.hd__nav a:hover{ color:var(--accent); }
.hd__cta{ display:flex; align-items:center; gap:16px; }
.hd__tel{
  display:none; align-items:center; gap:8px;
  font-size:19px; font-weight:700; color:var(--ink); text-decoration:none; letter-spacing:.02em;
  padding:10px 0;
}
.hd__tel svg{ color:var(--accent); }
.hd__btn-icon{ width:20px; height:20px; flex:0 0 20px; }
.hd__nav-contact{ display:none; }   /* PCは電話CTAが導線を担うため非表示。SPのみ表示（下記） */
.hd__burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; padding:0; border:0; background:none; cursor:pointer; flex-shrink:0;
}
.hd__burger span{ display:block; width:24px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.hd__burger.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hd__burger.is-active span:nth-child(2){ opacity:0; }
.hd__burger.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---- FV：左=正方形小写真+テキスト（バッジ下端=右写真下端）／右=大写真4:3（100px下げ）
        比率はカノデンキ実測（左:右 = 1:2.4・左は正方形） ---- */
.fv, .abt{ background:#fff; position:relative; overflow:hidden; }
.fv > .wrap, .abt > .wrap{ position:relative; z-index:1; }
.fv{ padding:48px 0 var(--sec-pc); }
.fv .wrap{ max-width:1320px; padding-inline:16px; }

/* 背景の呼吸（2026-09-01 オーナー決定・実験室⑤採用）
   理由＝「電気も、水も、空調も」＝明かりがつく暮らしのイメージ。
   2つの光を別方向・別周期でゆっくりすれ違わせ、「動いている」と気づける速さにする。 */
.fv::before, .abt::before, .fv::after, .abt::after{
  content:""; position:absolute; inset:-25%; pointer-events:none;
}
.fv::before, .abt::before{
  background-image:radial-gradient(46% 46% at 28% 30%, rgba(0,61,165,.4), transparent 70%);
  animation:breathe-a 13s ease-in-out infinite;
}
.fv::after, .abt::after{
  background-image:radial-gradient(42% 42% at 74% 66%, rgba(0,61,165,.4), transparent 70%);
  animation:breathe-b 17s ease-in-out infinite;
}
@keyframes breathe-a{
  0%,100% { transform:translate(-6%, -3%) scale(1);    opacity:.55; }
  50%     { transform:translate( 7%,  4%) scale(1.10); opacity:1; }
}
@keyframes breathe-b{
  0%,100% { transform:translate( 6%,  3%) scale(1.08); opacity:1; }
  50%     { transform:translate(-7%, -4%) scale(1);    opacity:.55; }
}
@media (prefers-reduced-motion:reduce){
  .fv::before, .abt::before, .fv::after, .abt::after{ animation:none !important; }
}
.fv__stage{
  position:relative;
  display:grid; grid-template-columns:1fr 2.4fr; gap:40px;
  align-items:stretch;                              /* 左カラムを右写真の高さまで伸ばす */
}
.fv__tate{
  position:absolute; top:0; right:6px; z-index:6;
  writing-mode:vertical-rl; width:max-content;      /* 縦書きは幅を自動計算に任せない（css-pitfalls #5） */
  font-size:clamp(28px,3vw,40px); font-weight:600;
  line-height:1.7; letter-spacing:.14em;
  color:var(--ink);
  text-shadow:0 0 14px rgba(255,255,255,.95), 0 0 5px rgba(255,255,255,.95), 0 0 2px rgba(255,255,255,.9);
}
.kw{ color:var(--accent); }
/* 左カラム：正方形写真（上）→ テキスト（下端に寄せる） */
.fv__left{ display:flex; flex-direction:column; }
.fv__img{ display:block; width:100%; height:auto; object-fit:cover; border-radius:var(--r); }
.fv__img--sub{
  aspect-ratio:1/1;
  box-shadow:0 14px 34px rgba(22,41,79,.15);
}
.fv__txt{ margin-top:auto; padding-top:32px; }      /* バッジの下端が右写真の下端と揃う */
.fv__kicker{ margin-bottom:12px; font-size:24px; line-height:1.5; font-weight:700; letter-spacing:.05em; color:var(--accent); }
.fv__sub2{ font-size:22px; line-height:1.65; font-weight:600; color:var(--ink); }
.fv__sub2 p + p{ margin-top:20px; }
.fv__badge{
  display:inline-block; margin-top:14px;
  font-size:13.5px; line-height:1.7; font-weight:500; letter-spacing:.03em; color:var(--ink);
  border:1px solid var(--line); background:var(--tint);
  padding:8px 14px; border-radius:var(--r-s);
}
/* 右カラム：大写真4:3。左写真より下から始まり、下端がグリッド行の底＝揃えの基準 */
.fv__right{ padding-top:100px; }
.fv__img--main{
  aspect-ratio:4/3;
  box-shadow:0 18px 44px rgba(22,41,79,.16);
}
.fv__townscape{ margin:0; overflow:hidden; }
.fv__townscape img{ display:block; width:100%; height:auto; }

/* PC版FV：写真は余計な装飾を加えず、文字と電話導線の格を上げる */
@media (min-width:901px){
  .hd__btn{ font-size:16px; padding:11px 26px; gap:8px; }
  .hd__btn-num{ font-size:19px; line-height:1.2; letter-spacing:.02em; }
  .fv__tate{ font-size:clamp(36px,3.8vw,50px); line-height:1.55; }
  .fv__img{ border-radius:0; }
  .fv__img--sub, .fv__img--main{ box-shadow:none; }
  /* 🔴 PCは .fv__photo2 の囲みをなかったことにする（display:contents）。
     囲みはスマホで「写真の左に見出しを置く」ためだけのもので、PCでは
     写真→(76px)→見出し→本文 という元の縦並びに戻す必要があるため。
     旧構成では76pxを .fv__txt が持っていたが、見出しが囲みの中へ移ったので見出し側へ移設した。 */
  .fv__photo2{ display:contents; }
  .fv__txt{ display:flex; flex:1; flex-direction:column; margin-top:0; padding-top:0; }
  .fv__kicker{ margin-top:76px; margin-bottom:20px; font-size:30px; }
  .fv__sub2{ font-size:18px; line-height:1.8; font-weight:500; }
  .fv__txt .fv__badge{ margin-top:auto; }
}

/* ---- About（白・中央に読ませる会社紹介） ---- */
/* .abt の地色は上の「.fv, .abt」でまとめて指定（方眼） */
.abt .sechd{ text-align:center; }
.abt__grid{ display:block; }
.abt__body{
  max-width:880px; margin:0 auto;
  text-align:center; font-size:18px; line-height:2;
}
.abt__body p + p{ margin-top:var(--el-gap); }
.abt__lead{ font-size:21px; font-weight:500; line-height:1.9; }
.abt__lead span{ color:var(--accent); font-size:1.15em; font-weight:700; }

/* ---- Services（🔴 面のブルー＋白角丸カード＝カノデンキの赤面の転写） ---- */
.svc{ background:var(--blue-deep); }
.svc .sechd .eng{ color:var(--accent-l); }
.svc .sechd h2{ color:#fff; }
.svc .sechd .lead{ color:#DCE4F5; }
.svc .sechd .lead .em{ color:#fff; border-bottom:2px solid var(--accent-l); }
.svc__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--card-gap); }
.svc__card{
  background:#fff; border-radius:var(--r); overflow:hidden;
  box-shadow:0 8px 24px rgba(9,24,58,.18);
  transition:transform .25s ease, box-shadow .25s ease;
  display:flex; flex-direction:column;
}
.svc__card:hover{ transform:translateY(-4px); box-shadow:0 14px 32px rgba(9,24,58,.26); }
.svc__img{ width:100%; height:auto; }
.svc__media{ display:block; text-decoration:none; cursor:pointer; }
.svc__body{ padding:22px 26px 26px; }
.svc__body h3{
  font-size:24px; font-weight:500; letter-spacing:.05em; line-height:1.6; color:var(--accent);
}
.svc__body p{ margin-top:8px; font-size:15px; line-height:1.9; }
.svc__body p.svc__examples{
  margin-top:16px; font-size:13px; line-height:1.8; letter-spacing:.02em; color:#6B7488;
}  /* 上の説明文と格を分ける：色とサイズのみ（罫線は不使用＝オーナー指示。線が増えると区切りが不明瞭になる） */
/* 生成待ちプレースホルダ（2枠のみ） */
.ph{
  aspect-ratio:3/2; display:flex; align-items:center; justify-content:center; text-align:center;
  background:repeating-linear-gradient(45deg, rgba(28,43,75,.05) 0 12px, rgba(28,43,75,.09) 12px 24px), var(--tint);
  color:var(--mut);
}
.ph span{ font-size:14px; line-height:1.7; padding:16px; }

/* メーカー帯（青面の中・白カードの外・静かに） */
.svc__makers{ margin-top:48px; text-align:left; }
.svc__makers-ttl{ font-size:14px; font-weight:700; letter-spacing:.06em; color:var(--accent-l); }
.svc__makers-list{ margin-top:6px; font-size:15px; color:#DCE4F5; line-height:1.9; }
.svc__makers-note{ margin-top:8px; font-size:14px; color:#9FB2D8; }
.svc__all{ margin-top:32px; text-align:center; }
.svc__all .btn{ background:#fff; color:var(--accent); border-color:#fff; }

/* PC：カノデンキの色面＋大きな白い一覧枠を、松井電管の青で展開 */
@media (min-width:901px){
  .svc .sechd{ text-align:center; }
  .svc__panel{
    background:#fff; border-radius:28px; padding:64px;
  }
  .svc__grid{ gap:72px 44px; }
  .svc__card{
    background:transparent; border-radius:0; overflow:visible;
    box-shadow:none; transition:none;
  }
  .svc__card:hover{ transform:none; box-shadow:none; }
  .svc__body{ padding:20px 0 0; }
  .svc__makers{
    margin-top:60px; padding-top:28px; border-top:1px solid var(--line);
    text-align:center;
  }
  .svc__makers-ttl{ color:var(--accent); }
  .svc__makers-list{ color:var(--ink-2); }
  .svc__makers-note{ color:var(--mut); }
  .svc__all .btn{ background:var(--accent); color:#fff; border-color:var(--accent-d); }
}

/* ---- Strengths（白・輪郭数字＝確定済みの型） ---- */
.str{ background:#fff; }
.str__rows{ display:grid; gap:72px; }
.str__row{ display:grid; grid-template-columns:150px 1fr; gap:32px; align-items:start; }
.str__num{
  font-size:80px; font-weight:700; letter-spacing:.02em; line-height:1;
  color:transparent; -webkit-text-stroke:2px var(--accent);
  padding-top:4px;
}
.str__row h3{
  font-size:24px; font-weight:500; letter-spacing:.05em; line-height:1.6; color:var(--ink);
}
.str__row h3 + p, .str__disp + p{ margin-top:var(--el-gap); }
.str__disp{
  margin-top:var(--el-gap);
  font-size:40px; font-weight:500; letter-spacing:.05em; line-height:1.3; color:var(--ink);
  display:flex; align-items:center; gap:18px;
}
.str__disp span:not(.x){ color:var(--accent); }
.str__disp .x{ font-size:22px; color:var(--ink); font-weight:400; }

/* PC：縦組みの節見出しを左に置き、3つの強みを右側へ展開 */
@media (min-width:901px){
  .str .wrap{ position:relative; padding-left:176px; padding-right:24px; }
  .str .sechd{ position:absolute; top:0; left:24px; width:112px; height:420px; margin:0; }
  .str .sechd .eng{
    position:absolute; top:0; left:16px; margin:0;
    writing-mode:vertical-rl; height:136px; white-space:nowrap;
    font-size:13px; letter-spacing:.16em;
  }
  .str .sechd h2{
    position:absolute; top:0; right:0;
    writing-mode:vertical-rl; height:420px; white-space:nowrap;
    font-size:clamp(36px,3.8vw,50px); letter-spacing:.08em;
  }
  .str__num{ justify-self:end; transform:translateY(-10px); }
}

/* ---- Works（Contactと同じ淡いグレー） ---- */
.wrk{ background:var(--tint); color:var(--ink-2); }
.wrk .sechd h2{ color:var(--ink); }
.wrk .sechd .eng{ color:var(--accent); }
.wrk .sechd .lead{ color:var(--mut); }
.wrk__groups{ display:grid; gap:44px; }
.wrk__group h3{
  font-size:20px; font-weight:500; letter-spacing:.06em; line-height:1.6;
  color:var(--accent); margin-bottom:10px;
}
.wrk__group p{ color:var(--ink-2); }
.wrk__wide{ display:flex; align-items:baseline; gap:28px; flex-wrap:wrap; }
.wrk__num{ font-size:16px; color:var(--mut); }
.wrk__num b{
  font-size:40px; font-weight:500; letter-spacing:.02em; color:var(--accent);
  margin:0 4px; line-height:1;
}

/* ---- Contact（街並み写真＋スモーク・高原地園芸と同じ導線型） ---- */
.con{
  position:relative; isolation:isolate; overflow:hidden;
  background:url('img/townscape.webp') center/cover no-repeat;
  color:#fff;
}
.con::before{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(15,30,60,.76); }
.con__box{
  background:rgba(255,255,255,.97); color:var(--ink-2); border-radius:var(--r);
  width:min(100%,960px); margin:0 auto; padding:clamp(32px,3.5vw,44px);
}
.con__boxhead .eng{ font-size:14px; font-weight:600; letter-spacing:.14em; color:var(--accent); margin-bottom:var(--eng-gap); }
.con__boxhead h2{ font-size:40px; font-weight:600; line-height:1.4; letter-spacing:.05em; color:var(--ink); }
.con__boxhead > p:last-child{ margin-top:14px; font-size:20px; font-weight:500; line-height:1.7; color:var(--ink-2); }
.con__methods{ margin-top:32px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:28px; }
.con__tel-label{ font-size:14px; font-weight:700; color:var(--mut); letter-spacing:.06em; margin-bottom:8px; }
.con__tel dd{ margin:0; }
.con__tel a{
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:12px;
  border-radius:var(--r-s); border:1px solid var(--accent-d); background:var(--accent);
  min-height:68px; padding:14px 24px; font-size:20px; font-weight:700; line-height:1.4; color:#fff;
  text-decoration:none; letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26), inset 0 -2px 0 rgba(0,0,0,.16), 0 2px 4px rgba(22,41,79,.22);
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.con__tel a:hover{
  background:#fff; color:var(--accent); border-color:var(--accent);
  transform:translateY(-1px);
  box-shadow:inset 0 -2px 0 rgba(0,61,165,.20), 0 5px 10px rgba(22,41,79,.20);
}
.con__tel a:active{ transform:translateY(1px); }
.con__form-open{ width:100%; min-height:68px; justify-content:center; padding:14px 24px; font-size:20px; line-height:1.4; }
.con__icon{ width:25px; height:25px; flex:0 0 25px; }
/* 数字は同サイズでも和文より小さく見えるため、電話番号だけ一段大きく（2026-08-29 オーナー指摘） */
.con__telnum{ font-size:24px; line-height:1.2; letter-spacing:.02em; }

.fmodal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(15,30,60,.62); overflow-y:auto; }
.fmodal[hidden]{ display:none; }
.fmodal__box{ width:min(100%,600px); max-height:calc(100vh - 40px); overflow-y:auto; background:#fff; padding:clamp(26px,4vw,42px); border-radius:var(--r); }
.fmodal__box h3{ font-size:24px; font-weight:600; letter-spacing:.05em; color:var(--ink); margin-bottom:26px; }
.form{ background:#fff; }
.form__row + .form__row{ margin-top:var(--el-gap); }
.form label{ display:block; font-size:14px; font-weight:700; color:var(--ink); margin-bottom:8px; letter-spacing:.02em; }
.form .req{
  font-size:11px; color:#fff; background:var(--accent);
  padding:2px 8px; margin-left:8px; letter-spacing:.06em; border-radius:2px;
}
.form input,.form textarea{
  width:100%; font-family:inherit; font-size:16px; color:var(--ink-2);
  line-height:1.8; padding:13px 14px;
  border:1px solid var(--line); background:#FAFBFC; border-radius:4px;
  transition:border-color .2s ease;
}
.form input:focus,.form textarea:focus{ outline:none; border-color:var(--accent); }
.form textarea{ min-height:130px; resize:vertical; }
.form__submit{
  margin-top:26px; width:100%;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:inherit; font-size:16px; font-weight:700;
  color:#fff; background:var(--accent); border:1px solid var(--accent-d);
  padding:17px; border-radius:var(--r-s); cursor:pointer; letter-spacing:.02em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -2px 0 rgba(0,0,0,.16),
    0 2px 4px rgba(22,41,79,.22);
  transition:background .2s ease, color .2s ease, border-color .2s ease,
             box-shadow .2s ease, transform .12s ease;
}
.form__submit:hover{
  background:#fff; color:var(--accent); border-color:var(--accent);
  transform:translateY(-1px);
  box-shadow:inset 0 -2px 0 rgba(0,61,165,.20), 0 5px 10px rgba(22,41,79,.20);
}
.form__submit:active{
  transform:translateY(1px);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.24), 0 1px 1px rgba(22,41,79,.16);
}
.fmodal__actions{ display:grid; gap:12px; margin-top:26px; }
.fmodal__actions .form__submit{ margin-top:0; }
.fmodal__close{ width:100%; border:1px solid var(--accent); border-radius:var(--r-s); background:#fff; color:var(--accent); font:inherit; font-weight:700; padding:14px; cursor:pointer; }
.fmodal__close:hover{ background:#F4F7FC; }

/* ---- フッター ---- */
.ft{ background:var(--foot); color:#fff; padding:44px 0; }
.ft__in{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.ft__name{ font-size:18px; font-weight:700; letter-spacing:.05em; line-height:1.6; }
/* 社名の「有限会社」は一段小さく（2026-08-29 オーナー指示）。「松井電管」との間は半角スペース */
.cname-prefix{ font-size:.78em; font-weight:500; letter-spacing:.04em; }
.ft__adr{ margin-top:8px; font-size:14px; color:#D3DCF0; line-height:1.9; }
.ft__c{ font-size:14px; color:#BCC9E6; letter-spacing:.04em; }

/* ---- デモ用モーダル ---- */
.demo-modal{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.demo-modal[hidden]{ display:none; }
.demo-modal__box{
  background:#fff; border-radius:12px; padding:28px 24px;
  max-width:420px; width:100%; text-align:center;
}
.demo-modal__box p{
  font-size:16px; line-height:1.8; white-space:pre-line; margin:0 0 20px; color:var(--ink-2);
}
.demo-modal__box button{
  font-size:16px; padding:12px 32px; border:none; border-radius:8px;
  background:#1f2937; color:#fff; cursor:pointer; font-family:inherit;
}

/* ============================================================
   スマホ（この中だけを触る）
   ============================================================ */
@media (max-width:900px){
  section{ padding:var(--sec-sp) 0; }
  .wrap{ padding:0 20px; }

  .sechd h2{ font-size:32px; }
  /* 🔴 2026-09-01 オーナー指示：Aboutの見出しはどの機種でも必ず1行に収める。
     固定サイズだと機種の画面幅次第で折り返す（Pixelは393〜412pxで収まるが、
     iPhone SE/miniや多くのAndroid機は360〜375pxしかなく折り返す恐れがある）。
     → 画面幅に応じて文字サイズが自動で縮む形にし、折り返し自体を禁止する。 */
  .abt .sechd h2{ font-size:clamp(24px, 8.3vw, 32px); white-space:nowrap; }
  /* 🔴 2026-09-01 オーナー指示：SPはAboutの見出しも他セクションと同じ左寄せに（PCは中央のまま） */
  .abt .sechd{ text-align:left; }
  .con__boxhead h2{ font-size:32px; }
  .con__boxhead > p:last-child{ font-size:18px; }
  .str__row h3{ font-size:24px; }
  .wrk__group h3{ font-size:20px; }

  /* 🔴 ハンバーガーメニュー（2026-08-30・規定値＝全案件共通）：電話CTAは非表示にし、メニューに集約。
     幅は文字に合わせて縮む（画面いっぱいに広げない）。右端は画面右端に密着・上辺はヘッダー下端に密着（隙間を作らない） */
  .hd__nav{
    display:none; position:absolute; top:100%; right:0; left:auto;
    width:max-content; min-width:180px; max-width:calc(100vw - 40px);
    flex-direction:column; gap:0; margin-left:0;
    background:#fff; border:1px solid var(--line); border-top:0; border-radius:0 0 0 var(--r-s);
    box-shadow:0 16px 28px rgba(22,41,79,.16);
    overflow:hidden;
  }
  .hd__nav.is-open{ display:flex; }
  .hd__nav a{ padding:14px 22px; border-bottom:1px solid var(--line); font-size:16px; white-space:nowrap; }
  .hd__nav a:last-child{ border-bottom:0; }
  .hd__nav-contact{ display:block; }
  .hd__btn{ display:none; }
  .hd__tel{ display:none; }
  .hd__sub{ display:block; font-size:14px; margin-top:1px; }
  .hd__burger{ display:flex; }
  .hd__in{ gap:12px; justify-content:space-between; padding-top:17px; padding-bottom:17px; }
  .hd__name{ font-size:19px; }

  .fv{ padding:14px 0 var(--sec-sp); }
  .fv .wrap{ padding-inline:20px; }
  .fv__stage{ grid-template-columns:1fr; gap:0; }
  .fv__tate{ font-size:28px; top:14px; right:12px; line-height:1.6; letter-spacing:.12em; }
  .fv__left{ display:contents; }
  /* 🔴 カノデンキSP参考（2026-08-30・オーナー指示で再調整）：2枚目の写真を小さくして右に寄せ、
     空いた左側の下寄りに見出し「あなたの身近な工事店」を入れる。写真とキャッチは1つの行として揃える */
  .fv__photo2{ display:flex; align-items:flex-end; gap:12px; margin-top:28px; margin-right:-20px; width:calc(100% + 20px); } /* 🔴 2枚目の写真を右へフルブリード */
  .fv__img--sub{ display:block; width:42%; flex-shrink:0; order:2; margin:0; }
  .fv__kicker{ order:1; flex:1; margin-bottom:4px; font-size:26px; line-height:1.35; }
  .fv__right{ order:-1; padding-top:64px; margin-left:-20px; width:calc(100% + 20px); } /* 🔴 1枚目の写真を左へフルブリード。PC版と同じ意図：写真を下げて縦書きキャッチを上にはみ出させる */
  .fv__img{ border-radius:0; }                  /* 🔴 角丸をやめてPCと同じ仕様に統一 */
  .fv__img--sub, .fv__img--main{ box-shadow:none; } /* 🔴 影も不要（PCと同じ） */
  .fv__txt{ margin-top:24px; padding-top:0; }
  .fv__sub2{ font-size:15px; line-height:1.9; font-weight:400; color:var(--ink-2); }
  .fv__sub2 p + p{ margin-top:0; }   /* 🔴 スマホは段落の空きなし＝改行だけで続ける（PCは20px空ける） */
  .fv__badge{ font-size:13.5px; }
  .abt__body{ font-size:16px; text-align:left; }   /* 🔴 SPは左揃え（PCは中央のまま）。2026-09-01：一度中央に統一したが、
     「。」だけで改行すると長い文がスマホでどうしても単語の途中で折れる（例：お手伝いす／る。）→ 左揃えに戻して解消 */
  .abt__lead{ font-size:18px; }

  /* 🔴 カノデンキSP参考（2026-08-30）：白い角丸パネルの中に2列グリッド。PCの「白パネル＋透明カード」と同じ考え方をSPにも適用 */
  .svc__panel{ background:#fff; border-radius:20px; padding:24px 16px; }
  .svc__grid{ grid-template-columns:repeat(2,1fr); gap:28px 14px; }
  .svc__card{ background:transparent; border-radius:0; overflow:visible; box-shadow:none; }
  .svc__card:hover{ transform:none; box-shadow:none; } /* 🔴 タップで浮き上がる誤動作を解消：写真以外はリンクではないため */
  .svc__body{ padding:12px 0 0; }
  .svc__body h3{ font-size:17px; }
  .svc__body p{ font-size:14px; line-height:1.7; margin-top:6px; }
  .svc__makers{ margin-top:32px; padding-top:20px; border-top:1px solid var(--line); text-align:left; }
  .svc__makers-ttl{ color:var(--accent); }
  .svc__makers-list{ color:var(--ink-2); }
  .svc__makers-note{ color:var(--mut); }
  .svc__all .btn{ background:var(--accent); color:#fff; border-color:var(--accent-d); } /* 🔴 白パネル化に伴いPCと同じ青ボタンへ（白のままだと白パネルに埋もれる） */

  .str__rows{ gap:52px; }
  .str__row{ grid-template-columns:1fr; gap:10px; }
  .str__num{ font-size:44px; padding-top:0; }
  .str__disp{ font-size:32px; gap:12px; flex-wrap:wrap; }
  .wrk__wide{ flex-direction:column; align-items:flex-start; gap:8px; } /* 🔴 「22」の数字が大きく、行間のflex-gapが広く見えていたのを解消 */
  .wrk__num b{ font-size:32px; }

  .con__methods{ grid-template-columns:1fr; gap:30px; }
  .con__form-open{ width:100%; }
}

/* ============================================================
   サブページ共通：ページ見出し（.pgh）
   既定＝淡地の静かな見出し。写真背景が要るページだけ .pgh--photo を足し、
   さらにページ固有の背景画像は .pgh--(ページ名) で指定する（画像の使い回しを防ぐ）
   ============================================================ */
.pgh{ background:var(--tint); padding:64px 0 var(--sec-pc); }
.pgh .eng{ font-size:14px; font-weight:600; letter-spacing:.14em; color:var(--accent); margin-bottom:var(--eng-gap); }
.pgh h1{ font-size:40px; font-weight:600; line-height:1.4; letter-spacing:.05em; color:var(--ink); }
.pgh__lead{ margin-top:var(--head-gap); font-size:16px; color:var(--ink-2); }

.pgh--photo{
  position:relative; isolation:isolate; overflow:hidden;
  padding:96px 0 var(--sec-pc);
  color:#fff;
}
.pgh--photo::before{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(15,30,60,.82); }
.pgh--photo .eng{ color:var(--accent-l); }
.pgh--photo h1{ color:#fff; }
.pgh--photo .pgh__lead{ color:#DCE4F5; }

.pgh--works{ background:url('img/pgh-works.webp?v=1') center/cover no-repeat; }

@media (max-width:900px){
  .pgh{ padding:44px 0 var(--sec-sp); }
  .pgh h1{ font-size:32px; }
}

/* ============================================================
   対応工事一覧ページ（works-list.html）
   ============================================================ */
.wlist{ background:#fff; padding:var(--sec-pc) 0; }
.wlist__group + .wlist__group{ margin-top:72px; }
.wlist__ttl{
  display:flex; align-items:center; gap:14px;
  font-size:24px; font-weight:500; letter-spacing:.05em; color:var(--ink);
  margin-bottom:var(--el-gap);
}
.wlist__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; flex-shrink:0;
  border-radius:var(--r-s); background:var(--tint);
  font-size:14px; font-weight:700; color:var(--accent); letter-spacing:.02em;
}
.wlist__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--card-gap); }
.wtile img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r); border:1px solid var(--line); background:var(--tint);
}
.wtile p{ margin-top:12px; font-size:15px; line-height:1.6; color:var(--ink-2); text-align:center; }

@media (max-width:900px){
  .wlist{ padding:var(--sec-sp) 0; }
  .wlist__group + .wlist__group{ margin-top:52px; }
  .wlist__grid{ grid-template-columns:repeat(2,1fr); gap:var(--card-gap-sp); }
}

/* ============================================================
   会社概要ページ（company.html）：表は白い箱にして淡地の上に置く
   ============================================================ */
/* 🔴 構成（2026-08-30 確定・色を1つ足して解決）：
   地色 tint（見出し帯と同じ＝ページ上下で地色が割れない）の上に「白い表カード」を置く。
   カードの中は 内容セル #fff ＜ 項目セル --th-bg ＜ 地色 --tint の順に明るさが並ぶので、
   項目セルが地色にも罫線にも溶けない。項目と内容の境目は縦罫（border-right）で確定させる。 */
.cmp{ background:var(--tint); padding:0 0 var(--sec-pc); }
.cmp__grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:44px; align-items:start; }
.cmp table{
  width:100%; border-collapse:collapse; background:#fff;
  border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden;
}
.cmp th,.cmp td{
  text-align:left; padding:15px 18px; border-bottom:1px solid var(--line-2);
  font-size:16px; line-height:1.85; vertical-align:top;
}
.cmp th{
  width:9em; font-weight:700; color:var(--ink-2); white-space:nowrap;   /* PCは1行のまま（折り返しはスマホだけ） */
  background:var(--th-bg); border-right:1px solid var(--line-2);        /* 縦罫＝項目と内容の境目 */
}
.cmp td a{ color:var(--accent); text-decoration:none; }
.cmp td a:hover{ text-decoration:underline; }
.cmp tr:last-child th,.cmp tr:last-child td{ border-bottom:0; }
.cmp__map{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--tint); min-height:400px; }
.cmp__map iframe{ display:block; width:100%; height:100%; min-height:400px; border:0; }

@media (max-width:860px){
  .cmp{ padding:0 0 var(--sec-sp); }
  .cmp__grid{ grid-template-columns:1fr; gap:26px; }
  .cmp th{ width:7em; white-space:normal; }   /* 🔴 スマホだけ：列を狭め、長い項目名を折り返す（PCは9em・1行） */
}

/* ---- スクロール演出：上から一行ずつ順番に現れる（2026-09-01 オーナー決定）
   🔴 改訂（オーナー「降りてくる動きは不自然。純粋に上から一行ずつ順番に」）
   → 移動はやめてフェードのみにし、単位を「段落」から「実際の行（<br>の区切り）」まで細かくした。
   HTML側は .reveal-src（複数行の文章）と .rv（すでに1行だけの見出し等）の2種類：
   末尾の<script>が .reveal-src を実際の<br>区切りで .rv に自動分割し、
   .reveal-group（見出しのまとまり／段落のまとまり／強みの1項目）が画面に入ったとき、
   その中の .rv を上から出現順に少しずつ遅らせて表示する。 */
.rv{ opacity:0; transition:opacity 1.1s ease; }
.rv.is-visible{ opacity:1; }
/* 「松井電管の強み」は1文字ずつ（2026-09-01）。単位は小さいが、遅すぎた分を戻して十分ゆっくりに */
.rv.rv--char{ transition:opacity .6s ease; }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transition:none; }
}