@charset "UTF-8";

/* =========================================================================
   調整パネル：ここの数字を変えて保存 → ブラウザを再読み込みすれば見た目が変わります
   ========================================================================= */
:root{
  /* --- 余白 --- */
  --sec-pc:      92px;   /* セクションの上下の余白（PC） */
  --sec-sp:      60px;   /* セクションの上下の余白（スマホ） */
  --wrap:      1080px;   /* 本文の最大幅 */
  --gap-head:    22px;   /* 見出し → リード文 */
  --nav-gap:     38px;   /* ヘッダーのメニューどうしの間隔 */
  --logo-w:      42px;   /* ヘッダーのロゴの幅（ロゴを入れたときに効く） */
  --logo-gap:    11px;   /* ロゴ ⇔ 社名の間隔 */

  /* --- 文字 --- */
  --body-pc:     16px;   /* 本文（PC） */
  --body-sp:     16px;   /* 本文（スマホ） */
  --lh-body:     1.9;    /* 本文の行間 */
  --tracking:  .04em;    /* 文字と文字の間隔。広げたいときはここを上げる */
  --sechd-eng:   11px;   /* セクション見出しの縦書き英字の大きさ */
  --sechd-gap:   20px;   /* 縦罫 ⇔ 和文の間隔 */
  --sechd-gap-e: 11px;   /* 縦書き英字 ⇔ 縦罫の間隔（狭めにする） */
  --h-tracking:.14em;    /* セクション見出しの和文の文字間隔（強みを除く） */
  --h-min:       23px;   /* セクション見出し（最小） */
  --h-max:       30px;   /* セクション見出し（最大） */
  --hero-h1-weight:  600;    /* ヒーロー見出しの太さ。細くしたいときは下げる */
  --hero-h1-tracking:.12em;  /* ヒーロー見出しの文字間隔。広げたいときは上げる */

  /* --- 色（鉄と銅） --- */
  --ink:     #22272B;    /* チャコール：地色・見出し・暗いセクション */
  --ink-2:   #3A4046;    /* 少し明るい墨 */
  --gray:    #5A6068;    /* 本文の補足 */
  --copper:  #A9612F;    /* 銅：アクセント（英字ラベル・ボタン・罫） */
  --copper-l:#C98A5C;    /* 暗い地の上に置く銅 */
  --line:    #E2E3E6;    /* 罫線 */
  --steel:   #2F6E8F;    /* スチールブルー：採用情報だけのアクセント（銅の反対側の色） */
  --steel-d: #23536D;    /* 上の色の濃い版：ボタンの縁 */
  --tint:    #E8E9EB;    /* グレーの地色：事業内容・会社概要・採用情報で共通 */

  /* --- この案件の特徴的な数値 --- */
  --bleed:   clamp(20px,11vw,170px);  /* 事業内容：写真と反対側に残す余白 */
  --svc-ph-h:   389px;   /* 事業内容の写真の高さ（元432px → 10%減。全行この高さに揃う） */
  --svc-gap:     44px;   /* 事業内容の項目どうしの間隔 */
  --photo-w: clamp(20px,13vw,250px);  /* 強みの上の写真：右に残す余白（PC） */
  --photo-w-sp:  56px;   /* 同じくスマホ。上下のセクションの地色が半分ずつ入る */
  --photo-h: clamp(230px,32vw,430px); /* 強みの上の写真：高さ */
  --photo-dip:   72px;   /* 写真が強みの黒地に沈み込む深さ */
  --photo-side-split:50%; /* 写真の右の余白：ここまでが上のグレー、以降がチャコール */
  --hero-veil:   .72;    /* ヒーローの暗幕（0〜1。文字が読めなければ上げる） */
  --msg-veil:    .58;    /* ヒーロー下のメッセージの暗幕（0〜1） */
  --hero-pad-pc: 66px;   /* ヒーローの下の余白（PC）。文字は左下ぞろえ */
  --hero-min-pc:600px;   /* ヒーローの最低の高さ（PC） */
  --hero-pad-sp: 46px;   /* ヒーローの下の余白（スマホ）。文字は下ぞろえ */
  --hero-min-sp:560px;   /* ヒーローの最低の高さ（スマホ） */
}
/* ===================== 調整パネルここまで ===================== */


/* ---------- 土台 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; }
body{
  margin:0;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  font-size:var(--body-pc); line-height:var(--lh-body);
  letter-spacing:var(--tracking);
  color:var(--ink); background:#fff;
  -webkit-text-size-adjust:100%;
}
img{ max-width:100%; height:auto; vertical-align:bottom; }
a{ color:inherit; }
h1,h2,h3{ margin:0; line-height:1.55; font-weight:800; letter-spacing:.03em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }
section{ padding:var(--sec-pc) 0; }


/* ---------- セクション見出し（英字を縦書きで左に立て、和文の左に縦罫） ---------- */
/* 「鈴木電気工事の強み」の縦書きと呼応させている。横罫は使わない */
.sechd{ margin-bottom:40px; }
.sechd__ttl{ display:flex; gap:var(--sechd-gap-e); align-items:flex-start; }
.sechd .eng{
  margin:0; writing-mode:vertical-rl; text-orientation:sideways;
  font-size:var(--sechd-eng); font-weight:700; letter-spacing:.26em;
  line-height:1; color:var(--copper); padding-top:0; white-space:nowrap;
}
.sechd h2{
  margin:0; font-size:clamp(var(--h-min),2.6vw,var(--h-max));
  letter-spacing:var(--h-tracking);   /* 強みの縦書き見出しに合わせて広くとる */
  border-left:2px solid var(--copper); padding-left:var(--sechd-gap);
}
/* 画面に余白があるときは、見出しの塊ごと左へずらす。
   → 和文の書き出しが本文の左端にそろい、縦書きの英字だけが本文より左に飛び出す */
@media (min-width:1200px){
  .sechd__ttl,
  .str__head{ margin-left:calc(-1 * (var(--sechd-eng) + var(--sechd-gap-e) + var(--sechd-gap) + 2px)); }
}
.sechd .lead{
  margin:var(--gap-head) 0 0; font-size:16px; line-height:2;
  color:var(--gray); max-width:46em;
}
.sechd .lead b{ display:block; margin-bottom:14px; font-size:17px; color:var(--ink); font-weight:700; }


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


/* ---------- ヘッダー（追従） ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.97); border-bottom:1px solid var(--line);
}
/* 左右の幅が違ってもナビが真ん中に来るよう、3分割の格子にする */
.header-inner{
  width:min(100% - 32px,1240px); margin-inline:auto;
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:20px; padding:13px 0;
}
/* ロゴを左に置けるよう、横並びの器にしてある（ロゴなしでも成立する） */
.brand{ text-decoration:none; display:flex; align-items:center; gap:var(--logo-gap); }
.brand__logo{ width:var(--logo-w); height:auto; flex-shrink:0; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.25; }
/* 「株式会社」は小さく別行にする。スマホで社名が途中で折り返さないようにするため */
.brand-corp{ font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--ink-2); }
.brand-name{ font-size:19px; font-weight:800; letter-spacing:.04em; white-space:nowrap; }
.brand-sub{ font-size:9.5px; letter-spacing:.16em; color:var(--copper); font-weight:700; margin-top:1px; }
.header-nav{ display:flex; gap:var(--nav-gap); justify-self:center; }
.header-nav a{
  text-decoration:none; font-size:14.5px; font-weight:700; padding:4px 0;
  border-bottom:2px solid transparent; transition:border-color .2s ease;
}
.header-nav a:hover{ border-bottom-color:var(--copper); }
.header-actions{ display:flex; align-items:center; gap:12px; justify-self:end; }
.btn-contact{
  display:inline-block; text-decoration:none; color:#fff; white-space:nowrap;
  font-size:14px; font-weight:700; padding:12px 26px;
  border-radius:6px;                       /* 角を少しだけ丸める */
  background:var(--copper);   /* 単色。グラデーションだとホバーの色が滑らかに変わらない */
  border:1px solid #83491F;                /* 縁を1段濃くして面を締める */
  /* 立体感：上のふちに光、下のふちに厚み、その下に落ち影 */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -2px 0 rgba(0,0,0,.16),
    0 2px 4px rgba(34,39,43,.22);
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}
/* 採用情報のボタンと同じ「反転」にそろえる。合わせて1px浮かせる */
.btn-contact:hover{
  background:#fff; color:var(--copper); border-color:var(--copper);
  transform:translateY(-1px);
  box-shadow:
    inset 0 -2px 0 rgba(169,97,47,.20),
    0 5px 10px rgba(34,39,43,.20);
}
/* 押した瞬間は沈ませて、影を内側に入れる */
.btn-contact:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.24),
    0 1px 1px rgba(34,39,43,.16);
}
.nav-toggle{ display:none; }


/* ---------- ヒーロー ---------- */
.hero{
  position:relative; background:var(--ink); color:#fff; overflow:hidden; padding:0;
  min-height:var(--hero-min-pc); display:flex; align-items:flex-end;  /* 文字は左下に寄せる */
}
/* 上辺を固定して、はみ出す分は下側だけが切れるようにする */
.hero__photo{
  position:absolute; inset:0;
  background:url("images/hero-pc.webp?v=5") no-repeat center top / cover, #22272B;
}
/* 幕は2枚重ね。縦＝文字が乗る下側だけ濃く、横＝文字がある左側だけ濃く。
   右上は素通しになり、写真がそのまま見える */
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(34,39,43,.04) 0%,
      rgba(34,39,43,.08) 30%,
      rgba(34,39,43,.50) 40%,
      rgba(34,39,43,.62) 47%,
      rgba(34,39,43,.64) 100%),
    linear-gradient(90deg,
      rgba(34,39,43,.34) 0%,
      rgba(34,39,43,.22) 40%,
      rgba(34,39,43,.06) 62%,
      rgba(34,39,43,0)   78%);
}
.hero__inner{ position:relative; z-index:2; width:100%; padding:0 0 var(--hero-pad-pc); }
/* ヘッダーの社名とまったく同じ器に入れて、書き出しの位置をそろえる */
.hero__inner .wrap{ width:min(100% - 32px,1240px); max-width:none; margin-inline:auto; padding:0; }
.hero__eng{ margin:0 0 14px; font-size:11.5px; font-weight:700; letter-spacing:.24em; color:var(--copper-l); }
.hero h1{
  margin:0 0 16px; font-size:clamp(27px,3.9vw,44px); line-height:1.35;
  font-weight:var(--hero-h1-weight); letter-spacing:var(--hero-h1-tracking);
}
.hero__sub{ margin:0 0 26px; font-size:15px; color:#C6CAD0; }
.hero__types{ display:flex; flex-wrap:wrap; gap:10px; }
.hero__types span{
  border:1px solid rgba(255,255,255,.42); padding:9px 17px;
  font-size:16px; font-weight:600; letter-spacing:.06em; white-space:nowrap;
}


/* ---------- メッセージ（夜明けの街を背景に敷く） ---------- */
.msg{ position:relative; text-align:center; background:var(--ink); color:#fff; overflow:hidden; }
.msg__photo{
  position:absolute; inset:0;
  background:url("images/about-dawn.webp") no-repeat center center / cover;
}
/* 文字を読ませるための暗幕。薄くすると写真は映えるが文字が沈む */
.msg__veil{ position:absolute; inset:0; background:rgba(34,39,43,var(--msg-veil)); }
.msg .wrap{ position:relative; z-index:2; }
.msg p{ margin:0 0 26px; font-size:clamp(17px,1.8vw,19px); line-height:2.1; font-weight:500;
  text-shadow:0 1px 3px rgba(0,0,0,.35); }
.msg p:last-child{ margin-bottom:0; }


/* ---------- 事業内容（写真が左右交互に端まで抜ける） ---------- */
.svc{ background:var(--tint); }
.svc__list{ display:flex; flex-direction:column; gap:var(--svc-gap); }
.svc__row{ display:grid; grid-template-columns:1.05fr 1fr; background:#fff; align-items:stretch; }
.svc__row--l{ margin-right:var(--bleed); }   /* 写真が左端まで／右に余白 */
.svc__row--r{ margin-left:var(--bleed); }    /* 写真が右端まで／左に余白 */
.svc__ph{ height:var(--svc-ph-h); background:#E7E8EA; }
.svc__ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.svc__tx{ padding:34px clamp(26px,4vw,52px); display:flex; flex-direction:column; justify-content:center; }
/* 番号はあえて色を指定せず、本文と同じ色にしている（オーナー意図・変更しないこと） */
.svc__no{ margin:0 0 7px; font-size:12px; font-weight:800; letter-spacing:.16em; }
.svc__tx h3{ margin:0 0 7px; font-size:22px; letter-spacing:.06em; color:var(--copper); }
/* 見出しを銅にしたので、キャッチは墨色に落として色が続かないようにする */
.svc__cap{ margin:0 0 13px; font-size:16px; font-weight:700; color:var(--ink); line-height:1.7; }
.svc__tx p{ margin:0; font-size:16px; line-height:2; color:#4A5058; }


/* ---------- 強みの上の写真（黒地に沈み込む） ---------- */
/* 右の余白は padding で作る。その部分を上半分＝上のセクションのグレー、
   下半分＝チャコールに分けて、上下のセクションを地色でつなぐ */
.str__photo{
  position:relative; z-index:2;
  height:var(--photo-h); padding-right:var(--photo-w);
  margin-bottom:calc(-1 * var(--photo-dip));
  overflow:hidden;
  background:linear-gradient(
    to bottom,
    var(--tint) 0,
    var(--tint) var(--photo-side-split),
    var(--ink)  var(--photo-side-split),
    var(--ink)  100%
  );
}
.str__photo img{ width:100%; height:100%; object-fit:cover; display:block; }


/* ---------- 強み（縦書き見出し＋横並びの行） ---------- */
.str{
  background:var(--ink); color:#fff; position:relative; overflow:hidden;
  padding:calc(var(--sec-pc) + var(--photo-dip)) 0 calc(var(--sec-pc) + 8px);
}
.str::before{
  content:""; position:absolute; left:-14%; top:-18%; width:52%; height:150%;
  background:rgba(169,97,47,.10); transform:skewX(-16deg); pointer-events:none;
}
.str__inner{ position:relative; z-index:1; display:grid; grid-template-columns:auto 1fr; gap:clamp(32px,6vw,86px); }
.str__head{ display:flex; gap:var(--sechd-gap-e); align-items:flex-start; }
.str__head h2{
  margin:0; writing-mode:vertical-rl;
  font-size:clamp(var(--h-min),2.6vw,var(--h-max));   /* 他のセクションの見出しと同じ */
  letter-spacing:.26em; line-height:1;
  position:relative; padding-left:var(--sechd-gap);
}
/* 縦書きなので罫を border にすると文字の長さぶん伸びてしまう。
   他のセクションの見出しと同じ長さ（文字サイズ×1.55）で止める */
.str__head h2::before{
  content:""; position:absolute; left:0; top:0;
  width:2px; height:1.55em; background:var(--copper-l);
}
.str__head .eng{
  margin:0; writing-mode:vertical-rl; text-orientation:sideways;
  font-size:12px; font-weight:700; letter-spacing:.22em; color:var(--copper-l); line-height:1;
}
.str__lead{ margin:0 0 40px; font-size:clamp(17px,1.8vw,20px); font-weight:700; line-height:1.9; }
.str__lead span{ display:block; margin-top:16px; font-size:14.5px; font-weight:400; line-height:2.05; color:#C6CAD0; }
.str__row{
  display:grid; grid-template-columns:210px 1fr; gap:36px;
  padding:34px 0; border-top:1px solid rgba(255,255,255,.20);
}
.str__row:last-child{ border-bottom:1px solid rgba(255,255,255,.20); }
/* 番号は削除。項目名を大きく・銅色にして、この列の主役にする */
.str__row h3{
  margin:0; font-size:clamp(23px,2.5vw,29px); line-height:1.6;
  color:var(--copper-l); letter-spacing:.16em;
}
.str__row p{ margin:0; font-size:16px; line-height:2.05; color:#CFD3D8; letter-spacing:var(--tracking); }
.str__row p + p{ margin-top:18px; }


/* ---------- 施工実績 ---------- */
/* 件数が多いので、区切り線を入れずに羅列する */
/* 箱をやめて、左に分類・右に実績を並べる横並びの行にする。
   枠と内側の余白がなくなる分、縦が縮む */
.ach__list{
  display:grid; grid-template-columns:1fr 1fr; gap:0 76px;
}
.ach__row{ padding:22px 0 20px; border-bottom:1px solid var(--line); }
.ach__cat h3{ margin:0 0 12px; font-size:17px; }
.ach__row li{ font-size:14.5px; line-height:1.65; }


/* ---------- 会社概要 ---------- */
.cmp{ background:var(--tint); }
/* 表と地図を見出しに寄せる。縦書き英字が和文より下まで伸びるぶん、
   ここは他のセクションより余白を詰めたほうが締まる */
.cmp .sechd{ margin-bottom:22px; }
.cmp__grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:44px; align-items:start; }
.cmp table{ width:100%; border-collapse:collapse; background:#fff; }
.cmp th,.cmp td{
  text-align:left; padding:15px 18px; border-bottom:1px solid var(--line);
  font-size:16px; line-height:1.85; vertical-align:top;
}
.cmp th{ width:8.5em; font-weight:700; color:var(--ink-2); background:#FAFAFB; white-space:nowrap; }
.cmp tr:last-child th,.cmp tr:last-child td{ border-bottom:0; }
.cmp__map{ border:1px solid var(--line); background:#E7E8EA; }
.cmp__map iframe{ display:block; width:100%; height:100%; min-height:400px; border:0; }


/* ---------- 採用情報 ---------- */
/* 左に見出しと文章、右にボタン。横並びで置く */
.rec{ background:var(--tint); }
/* 採用情報だけアクセントを青にする。英字・縦罫・ボタンの3つをまとめて差し替える */
.rec .sechd .eng{ color:var(--steel); }
.rec .sechd h2{ border-left-color:var(--steel); }
.rec .btn{ background:var(--steel); border-color:var(--steel-d); }
.rec .btn:hover{
  background:#fff; color:var(--steel); border-color:var(--steel);
  box-shadow:
    inset 0 -2px 0 rgba(47,110,143,.20),
    0 5px 10px rgba(34,39,43,.20);
}
.rec__inner{ display:flex; align-items:center; justify-content:space-between; gap:48px; }
.rec__inner .sechd{ margin-bottom:24px; }
.rec__word{
  /* 見出しの縦罫と左端をそろえて、縦の線が一本通って見えるようにする */
  max-width:700px; margin:0; padding:0;
  color:#4A5058; font-size:16px; line-height:1.95;
}
.btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-size:15px; font-weight:700; padding:15px 30px; border-radius:6px;
  background:var(--copper); color:#fff; border:1px solid #83491F;
  cursor:pointer; font-family:inherit; white-space:nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -2px 0 rgba(0,0,0,.16),
    0 2px 4px rgba(34,39,43,.22);
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.btn::after{ content:"→"; font-size:15px; line-height:1; transition:transform .3s ease; }
.btn:hover{
  background:#fff; color:var(--copper); border-color:var(--copper);
  transform:translateY(-1px);
  box-shadow:
    inset 0 -2px 0 rgba(169,97,47,.20),
    0 5px 10px rgba(34,39,43,.20);
}
.btn:hover::after{ transform:translateX(4px); }
.btn:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.24),
    0 1px 1px rgba(34,39,43,.16);
}
/* 採用セクションの大きいボタン */
.btn--lg{ padding:22px 36px; font-size:17px; gap:14px; }


/* ---------- お問い合わせ ---------- */
.con{ background:var(--ink); color:#fff; }
.con .sechd .eng{ color:var(--copper-l); }
.con .sechd h2{ border-left-color:var(--copper-l); }
.con .sechd .lead{ color:#C6CAD0; }
/* 見出しを左列に入れているので、フォームの上端が見出しの上端と揃う */
.con__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:start; }
.con__grid .sechd{ margin-bottom:30px; }
/* 電話は枠で囲って大きく見せる（押せる箱にする） */
.con__tel{ margin:0; }
.con__tel dt{ font-size:11.5px; letter-spacing:.18em; font-weight:700; color:var(--copper-l); margin-bottom:12px; }
.con__tel dd{ margin:0; }
/* ボタンの型に合わせる。暗い地の上なので、面は白のごく薄い膜で作る */
.con__tel a{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:22px 24px; border-radius:6px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.06);
  font-size:clamp(24px,2.6vw,31px); font-weight:800; color:#fff;
  text-decoration:none; letter-spacing:.02em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 0 rgba(0,0,0,.22),
    0 2px 4px rgba(0,0,0,.28);
  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(--ink); border-color:#fff;
  transform:translateY(-1px);
  box-shadow:
    inset 0 -2px 0 rgba(34,39,43,.16),
    0 5px 12px rgba(0,0,0,.34);
}
.con__tel a:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.30),
    0 1px 1px rgba(0,0,0,.24);
}
.con__tel small{ display:block; margin-top:12px; font-size:13px; line-height:1.85; color:#AEB4BB; }

.form{ background:#fff; padding:36px clamp(22px,3vw,38px); }
.form__row + .form__row{ margin-top:20px; }
.form label{ display:block; font-size:13.5px; font-weight:700; color:var(--ink-2); margin-bottom:8px; }
.form .req{ font-size:11px; color:#fff; background:var(--copper); padding:2px 8px; margin-left:8px; letter-spacing:.06em; }
.form input,.form textarea{
  width:100%; font-family:inherit; font-size:16px; color:var(--ink);
  letter-spacing:var(--tracking); line-height:1.8;
  padding:13px 14px; border:1px solid var(--line); background:#FAFAFB; border-radius:2px;
  transition:border-color .2s ease;
}
.form input:focus,.form textarea:focus{ outline:none; border-color:var(--copper); }
.form textarea{ min-height:130px; resize:vertical; }
.form__submit{
  margin-top:26px; width:100%; font-family:inherit; font-size:16px; font-weight:700;
  color:#fff; background:var(--copper); border:1px solid #83491F;
  padding:17px; border-radius:6px; cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -2px 0 rgba(0,0,0,.16),
    0 2px 4px rgba(34,39,43,.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(--copper); border-color:var(--copper);
  transform:translateY(-1px);
  box-shadow:
    inset 0 -2px 0 rgba(169,97,47,.20),
    0 5px 10px rgba(34,39,43,.20);
}
.form__submit:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.24),
    0 1px 1px rgba(34,39,43,.16);
}


/* ---------- フッター ---------- */
.site-footer{ background:#1A1E22; color:#B9BEC4; padding:44px 0 28px; }
.footer-inner{ display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:flex-end; }
.footer-name{ font-size:18px; color:#fff; font-weight:800; }
.footer-addr{ font-size:13.5px; margin-top:8px; line-height:1.85; }
.copyright{ margin-top:28px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); font-size:12.5px; color:#8A9097; }


/* ---------- デモ用ポップアップ ---------- */
.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:2px; 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); }
.demo-modal__box button{
  font-family:inherit; font-size:16px; padding:12px 32px; border:none; border-radius:2px;
  background:var(--ink); color:#fff; cursor:pointer;
}


/* =========================================================================
   タブレット
   ========================================================================= */
@media (max-width:1024px){
  .header-nav{ gap:24px; }
  .header-nav a{ font-size:13.5px; }
  .cmp__grid,.con__grid{ grid-template-columns:1fr; gap:26px; }
}

/* =========================================================================
   とても狭い画面（iPhone SE など 360px以下）
   ヘッダーの3つ（社名・ボタン・MENU）が1行に収まらなくなるので、ボタンを詰める
   ========================================================================= */
@media (max-width:380px){
  .header-inner{ gap:8px; }
  .btn-contact{ font-size:12px; padding:10px 10px; }
  .brand-name{ font-size:17px; }
  .nav-toggle{ padding:6px 8px; }
}

/* =========================================================================
   スマホ
   ========================================================================= */
@media (max-width:820px){
  body{ font-size:var(--body-sp); }
  section{ padding:var(--sec-sp) 0; }
  .wrap{ width:calc(100% - 36px); }
  .demo-notice{ font-size:13px; padding:10px 14px; text-align:left; }

  /* ヘッダー：3分割の格子をやめて横並びに戻し、ナビは開閉式に */
  /* 左右の余白は本文（18px）にそろえる */
  .header-inner{ display:flex; width:calc(100% - 36px); }
  .hero__inner .wrap{ width:calc(100% - 36px); }
  .header-nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    /* 幅は中身ぶんに縮んだまま、右端（MENUボタンの下）にそろえる */
    justify-self:end;
    min-width:170px;
    border-bottom-left-radius:6px;
    flex-direction:column; gap:0; background:#fff;
    border-top:1px solid var(--line); box-shadow:0 8px 18px rgba(0,0,0,.08); padding:6px 0;
  }
  .header-nav.is-open{ display:flex; }
  .header-nav a{ padding:14px 20px; border-bottom:1px solid var(--line); }
  .header-nav a:last-child{ border-bottom:0; }
  /* 狭い画面では英字を出さない。ロゴが入る余地を残し、ヘッダーを低く保つため */
  .brand-sub{ display:none; }
  .brand{ min-height:44px; }   /* 指で押せる高さを確保 */
  .brand-name{ font-size:18px; }
  .header-actions{ margin-left:auto; gap:8px; }
  .btn-contact{ font-size:13px; padding:11px 14px; }
  .nav-toggle{
    display:flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:1px solid var(--line); border-radius:2px;
    padding:7px 9px; cursor:pointer; font-family:inherit;
  }
  .nav-toggle__bars span{ display:block; width:20px; height:1.5px; background:var(--ink); margin:3px 0; }
  .nav-toggle__label{ font-size:8px; letter-spacing:.1em; color:var(--copper); font-weight:700; }

  /* スマホは縦長のヒーロー画像に差し替える */
  .hero__photo{ background-image:url("images/hero-sp.webp?v=3"); }
  /* 上は薄く（写真を見せる）、文字が乗る下half分だけ濃くする。
     各段の濃さは、写真の明るさから逆算して決めた実測値 */
  .hero__veil{
    background:linear-gradient(180deg,
      rgba(34,39,43,.05) 0%,
      rgba(34,39,43,.11) 26%,
      rgba(34,39,43,.38) 36%,
      rgba(34,39,43,.68) 43%,
      rgba(34,39,43,.68) 72%,
      rgba(34,39,43,.76) 100%);
  }
  /* 文字は中央ぞろえをやめて下ぞろえにする。上の写真を大きく見せるため */
  .hero{ min-height:var(--hero-min-sp); align-items:flex-end; }
  .hero__inner{ padding:0 0 var(--hero-pad-sp); }
  .hero__eng{ margin-bottom:13px; }
  .hero h1{ line-height:1.35; margin-bottom:13px; }
  .hero__sub{ margin-bottom:24px; }
  /* 「3つ＋1つ」に折れると不格好なので、2つずつ2行に揃える */
  .hero__types{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  .hero__types span{ font-size:15px; letter-spacing:.06em; padding:10px 6px; text-align:center; white-space:nowrap; }

  /* 事業内容：寄せをやめて縦積み。写真を必ず先に */
  .svc__list{ gap:34px; }
  .svc__row{ grid-template-columns:1fr; margin:0; }
  .svc__ph{ order:-1; height:auto; aspect-ratio:4/3; }
  .svc__tx{ padding:26px 22px 30px; }

  /* 強み：縦書きをやめる */
  /* PCと同じく右に空間を残す。その部分は上半分がグレー・下半分がチャコール */
  .str__photo{ padding-right:var(--photo-w-sp); height:210px; }
  /* 強みだけ上下の余白を詰める。写真が沈み込む分だけ上に足している */
  .str{ padding:calc(var(--sec-sp) + var(--photo-dip)) 0 var(--sec-sp); }
  .str::before{ display:none; }
  .str__inner{ grid-template-columns:1fr; gap:26px; }
  /* 他のセクション見出しと同じ形にそろえる：英字は縦書きで左、和文は横書き、間に縦罫 */
  .str__head{ flex-direction:row; align-items:flex-start; gap:var(--sechd-gap-e); }
  .str__head .eng{
    writing-mode:vertical-rl; text-orientation:sideways;
    font-size:var(--sechd-eng); letter-spacing:.26em; line-height:1;
    padding-top:0; white-space:nowrap;
  }
  .str__head h2{
    writing-mode:horizontal-tb; text-orientation:mixed;
    letter-spacing:var(--h-tracking);
    padding-left:var(--sechd-gap);
  }
  .str__lead{ margin-bottom:26px; }
  /* 項目名を縦書きにして、説明文の左に立てる */
  .str__row{ grid-template-columns:auto 1fr; gap:20px; padding:26px 0; align-items:start; }
  .str__row h3{
    writing-mode:vertical-rl; text-orientation:mixed;
    font-size:30px; letter-spacing:.26em; line-height:1;
    padding:2px 0 0;
  }

  .ach__list{ grid-template-columns:1fr; gap:0; }
  .ach__row{ padding:20px 0 18px; }

  .cmp th{ width:7em; font-size:14.5px; }
  .cmp td{ font-size:14px; }
  .cmp__map iframe{ min-height:280px; }
  .rec__inner{ display:block; }
  .rec__inner .btn--lg{ display:flex; justify-content:center; margin-top:30px; }
  .con__tel a{ font-size:24px; }

  /* 指で押せる大きさを確保する */
  .cmp td a{ display:inline-block; padding:10px 0; font-weight:700; }
  .footer-inner{ flex-direction:column; align-items:flex-start; gap:18px; }
}

@media (max-width:380px){
  .hero h1{ font-size:25px; }
  .con__tel a{ font-size:22px; }
}

@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }