@charset "UTF-8";

:root{
  /* --- 余白 --- */
  --sec-pc: 92px; --sec-sp: 60px; --wrap:1120px;
  --gap-label: 6px; --gap-head: 24px;
  --bleed: clamp(20px,11vw,170px);
  --svc-ph-h: 372px; --svc-gap: 44px;
  --photo-w: clamp(20px,13vw,250px);   /* 強みの上の写真：右に残す余白 */
  --photo-h: clamp(230px,32vw,420px);
  --photo-dip: 72px;                    /* 暗い地に沈み込む深さ */

  /* --- 文字 --- */
  /* 大きい英字（見出しの装飾）— ここは「読ませる文字」ではなく図柄。太く大きく */
  --eng-size: clamp(56px, 8.6vw, 104px);   /* 大きい英字 */
  --eng-min:56px; --eng-max:104px; --eng-alpha:.17;
  --eng-weight:900;      /* ⚠️ この太さは Google Fonts の読み込みにも入れること */
  /* 和文を持ち上げる量。英字の大きさに比例させる（英字が縮めば持ち上げも縮む）
     🔴 「行の箱」ではなく「文字そのもの」で測ること。
        箱は上下に余白を含むので、箱が重なっていても文字は離れている（2026-08-21 に踏んだ）
     ⚠️ 数値より見た目で決めること。英字が淡いので、実測4割でも「まるごと乗っている」ように見える。
        比較用のページを作って並べて選ぶのが早い（2026-08-21 にそうした）
     目安：.52 まるごと乗る ／ .42 下寄り ／ **.32 上半分が重なる（採用）** ／ .22 先だけ触れる */
  --eng-lift: .32;
  --h-min:28px; --h-max:34px;
  --body:16px; --lh:1.9; --tracking:.04em;

  /* --- 色：3段階のトーン --- */
  --tone1:  #FFFFFF;   /* 明 */
  --tone2:  #E0EAF3;   /* 中：淡い水色。2026-08-23 に #EEF4F8 から一段濃くした
                          （白との差 1.11:1 → 1.22:1。スマホでのっぺり見えたため）*/
  --tone3a: #13306E;   /* 暗：紺（グラデの始点） */
  --tone3m: #0D4C66;   /* 暗：中間。⚠️ 始点と終点から自動では出ない手決めの値 */
  --tone3b: #076152;   /* 暗：深い青緑（グラデの終点） */
  --grad: linear-gradient(118deg, var(--tone3a) 0%, var(--tone3m) 55%, var(--tone3b) 100%);

  /* 斜めの帯（色が切り替わるスラッシュ）。左端＋幅＝切り替わる位置 */
  --slash-l: -18%;
  --slash-w:  38%;
  --slash-a: rgba(107,223,211,.10);   /* 帯の濃さ */

  --main:   #1F4C7A;   /* 見出し・明るい紺 */
  --ink:    #333333;
  --ink-soft:#5A666B;
  --teal:   #009C90;   /* ロゴの青緑 */
  --teal-l: #6BDFD3;   /* 暗い地の上。グラデの明るい端でも4.5を満たす明るさ */
  --teal-d: #00756C;   /* ボタンの縁 */
  --line:   #DDE7EF;

  /* --- ヘッダー --- */
  --hdr-h:      78px;   /* ヘッダーの高さ */
  --hdr-bg:     #FFFFFF;/* ヘッダーの地。⚠️ 透かすとロゴが読めなくなる（2026-08-20） */

  /* --- ヒーロー --- */
  --hero-h: clamp(580px,76vh,760px);  /* 写真の縦幅。ここを上げると写真が大きくなる */

  /* --- ヒーローの動き --- */
  --hero-n:      3;      /* 写真の枚数 */
  --hero-hold:   6s;     /* 1枚を見せている時間 */
  --hero-fade: 1.6s;     /* 切り替えにかかる時間 */
  --hero-zoom: 1.10;     /* ズームの終わり（1.00＝拡大なし） */
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 12px)}
body{margin:0;font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  font-size:var(--body);line-height:var(--lh);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;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.5;font-weight:700}
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}
.tone2{background:var(--tone2)}

.notice{background:var(--tone3a);color:#fff;font-size:12.5px;line-height:1.75;padding:10px 0}
.notice .wrap{max-width:1080px}

/* ---- ヘッダー ----
   ⚠️ 一度すりガラス（写真が透ける）にしたが、ロゴが読めなくなったので白地に戻した（2026-08-20 オーナー指示）。
      ロゴは青緑のグラデ＋グレーの細い文字で、背景に写真が透けると輪郭が消える。 */
/* 🔴 スクロールしても残す（2026-08-21 オーナー指示）。
   白の不透明なので、下の内容が透けて読みにくくなることはない。
   ⚠️ ページ内リンクの着地点がヘッダーの下に隠れるので scroll-padding-top で逃がす */
.hdr{
  position:sticky; top:0; z-index:60;
  height:var(--hdr-h);
  background:var(--hdr-bg);
  border-bottom:1px solid var(--line);
}
.hdr .in{width:min(100% - 40px,1280px);margin-inline:auto;height:100%;
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo img{width:190px}
.gnav{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:700;color:var(--main)}

/* ---- ボタン（影3枚・反転・沈み込み。グラデは使わない） ---- */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:700;
  padding:15px 30px;border-radius:6px;background:var(--teal);color:#fff;border:1px solid var(--teal-d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -2px 0 rgba(0,0,0,.16),0 2px 4px rgba(20,50,70,.22);
  transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .12s}
.btn::after{content:"→";transition:transform .3s}
.btn:hover{background:#fff;color:var(--teal);border-color:var(--teal);transform:translateY(-1px);
  box-shadow:inset 0 -2px 0 rgba(0,156,144,.20),0 5px 10px rgba(20,50,70,.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(20,50,70,.16)}
.btn--sm{padding:12px 22px;font-size:13px}
.btn--ghost{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.45);color:#fff;
  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)}
.btn--ghost:hover{background:#fff;color:var(--tone3a);border-color:#fff}

/* 🔴 文字サイズの考え方（2026-08-20）
   ⚠️ 一度「和文はすべて14px以上」に揃えたが、オーナー判断で取り消した。
      「均一すぎて、かえって読みづらい。強弱がなく、目線がどれを追っていいのかわからない」

   下限を守ることより、段階をつけることが先。この4段でできている：
     本文  16px … 読ませる文章
     補足  13px … キャプション・リンク・表の見出し・フッター
     細目  12px … パンくず・タグ・番号
     ラベル 10.5〜11px … NEWS / STEP 01 / STRENGTH 01（英字の記号）
   ⚠️ この段を潰さない。1段に寄せると、どこを読めばいいか分からなくなる */

/* ---- 見出し（石澤型：大きい薄い英字＋濃い和文） ---- */
.sechd{position:relative;margin-bottom:48px}
/* ⚠️ 下の「大きい英字＋和文の重ね」（ファイル末尾）で上書きしている。触るならそちら */
.sechd .eng{display:block;margin:0 0 calc(var(--gap-label) - .3em);
  color:var(--teal);opacity:var(--eng-alpha);
  font-size:clamp(var(--eng-min),6.4vw,var(--eng-max));font-weight:800;letter-spacing:.06em;line-height:1;user-select:none}
.sechd h2{position:relative;margin:0;padding-left:20px;
  font-size:clamp(var(--h-min),4vw,var(--h-max));line-height:1.45;font-weight:700;color:var(--main)}
/* ⚠️ 幅を制限しない。折り返す位置はこちらで決めない（2026-08-21 オーナー指示）*/
.sechd .lead{margin:var(--gap-head) 0 0;color:var(--ink-soft);font-size:16.5px;line-height:2}
.sechd--c{text-align:center}.sechd--c h2{padding-left:0}.sechd--c .lead{margin-inline:auto}
.on-dark .eng{color:var(--teal-l);opacity:.28}
.on-dark h2{color:#fff}
.on-dark .lead{color:rgba(255,255,255,.82)}

/* ---- ヒーロー ---- */
.hero{position:relative;min-height:var(--hero-h);display:flex;align-items:flex-end;overflow:hidden}
.hero__bg{position:absolute;inset:0;overflow:hidden}
.hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1);transform-origin:center center;
  animation:heroFade calc((var(--hero-hold) + var(--hero-fade)) * var(--hero-n)) linear infinite,
            heroZoom calc((var(--hero-hold) + var(--hero-fade)) * var(--hero-n)) linear infinite;
  will-change:opacity,transform}
.hero__bg img:nth-child(1){animation-delay:0s,0s}
.hero__bg img:nth-child(2){animation-delay:calc((var(--hero-hold) + var(--hero-fade)) * 1),calc((var(--hero-hold) + var(--hero-fade)) * 1)}
.hero__bg img:nth-child(3){animation-delay:calc((var(--hero-hold) + var(--hero-fade)) * 2),calc((var(--hero-hold) + var(--hero-fade)) * 2)}

/* 1枚あたり：フェードで現れ → 表示 → フェードで消える。3枚で1周（22.8秒）
   ⚠️ キーフレームの % に calc() は使えないので、下の数字は実数で書く。
      3枚・見せ6秒・切替1.6秒 → 1周 22.8秒
        1.6 / 22.8 =  7.0%   … 現れ終わる
        7.6 / 22.8 = 33.3%   … 消えはじめる
        9.2 / 22.8 = 40.4%   … 消え終わる
      秒数を変えたら、この4つの数字も計算し直す */
@keyframes heroFade{
  0%     { opacity:0 }
  7.0%   { opacity:1 }
  33.3%  { opacity:1 }
  40.4%  { opacity:0 }
  100%   { opacity:0 }
}
/* 見えている間だけ、ゆっくり拡大する（消えたあとは次の出番まで止まったまま） */
@keyframes heroZoom{
  0%     { transform:scale(1) }
  40.4%  { transform:scale(var(--hero-zoom)) }
  100%   { transform:scale(var(--hero-zoom)) }
}
/* 動きを減らす設定にしている人には、動かさず1枚目だけ見せる */
@media (prefers-reduced-motion: reduce){
  .hero__bg img{animation:none;opacity:0;transform:none}
  .hero__bg img:nth-child(1){opacity:1}
}
.hero__veil{position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(15,45,72,.84) 0%,rgba(16,62,80,.60) 42%,rgba(14,90,86,.18) 74%,rgba(14,90,86,.05) 100%)}
.hero .wrap{position:relative;z-index:2;padding-bottom:60px;color:#fff}
.hero .eyebrow{display:block;font-size:13px;font-weight:700;letter-spacing:.22em;color:#8FE3D8;margin-bottom:16px}
.hero h1{font-size:clamp(27px,3.9vw,44px);font-weight:600;letter-spacing:.12em;line-height:1.35}
.hero p{margin-top:20px;font-size:15px;line-height:2.05;color:rgba(255,255,255,.9)}

/* ---- お知らせ1行（ヒーロー直下） ---- */
.newsbar{background:var(--tone2);border-bottom:1px solid var(--line)}
.newsbar .in{display:flex;align-items:center;gap:20px;padding:14px 0;font-size:14px}
.newsbar .lbl{flex:none;font-size:11px;font-weight:800;letter-spacing:.16em;color:#fff;background:var(--teal);
  padding:5px 12px;border-radius:3px}
.newsbar time{flex:none;color:var(--teal-d);font-weight:700;font-size:13px}
.newsbar .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.newsbar .more{flex:none;font-size:12.5px;font-weight:700;color:var(--main)}

/* ---- メッセージ ---- */
.msg{text-align:center;background:#fff}
.msg p{max-width:44em;margin:0 auto 26px}
.msg p:last-child{margin-bottom:0}
/* 短い3行の一節。ここだけ大きく、色を変えて息を入れる */
.msg .big{font-size:24px;line-height:2.0;letter-spacing:0;font-weight:500;color:var(--main);
  margin-top:34px;margin-bottom:34px}

/* ---- 事業内容（写真が左右交互に端まで抜ける） ---- */
.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;
  box-shadow:0 2px 14px rgba(20,50,70,.10)}
.svc__row--l{margin-right:var(--bleed)}
.svc__row--r{margin-left:var(--bleed)}
/* ⚠️ 高さを固定すると、文章が伸びたとき写真の下に空白ができる（2026-08-21 に発生）。
      最低の高さだけ決めて、あとは行の高さに合わせて伸ばす */
.svc__ph{min-height:var(--svc-ph-h);height:100%;background:#E7EEF2;overflow:hidden}
.svc__ph img{width:100%;height:100%;object-fit:cover}
.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;color:var(--ink-soft)}
.svc__tx h3{margin:0 0 8px;font-size:22px;letter-spacing:.06em;color:var(--teal-d)}
.svc__cap{margin:0 0 13px;font-size:16px;font-weight:700;color:var(--main);line-height:1.7}
.svc__tx p{margin:0 0 14px;font-size:15px;line-height:2;color:var(--ink-soft)}
.svc__tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.svc__tags span{font-size:12px;color:var(--teal-d);border:1px solid #CFE0EA;border-radius:4px;padding:4px 10px;background:#F5F9FC}
/* 事業内容の末尾に置く導線（カードごとのリンクは廃止・2026-08-21 オーナー指示）*/
.svc__more{display:flex;justify-content:flex-end;margin-top:clamp(28px,3.4vw,44px)}

/* ---- 強み（暗いトーン＋沈み込む写真＋斜めの帯） ----
   🔴 写真とセクションを1つの箱（.strwrap）に入れ、グラデーションをその箱に敷く。
      こうすると写真の右の帯とセクションが「同じ1枚のグラデーションの一部」になり、
      境目で色がズレない（2026-08-20。それまでは帯を --tone3a で塗っていて、
      下のセクションの緑寄りの色と食い違っていた）*/
.strwrap{background:var(--grad)}
.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(--tone2) 0,var(--tone2) 50%,transparent 50%,transparent 100%);
}
.str__photo img{width:100%;height:100%;object-fit:cover}
.str{position:relative;overflow:hidden;color:#fff;background:none;
  padding:calc(var(--sec-pc) + var(--photo-dip)) 0 calc(var(--sec-pc) + 8px)}
.str::before{content:"";position:absolute;left:var(--slash-l);top:-18%;width:var(--slash-w);height:150%;
  background:var(--slash-a);transform:skewX(-16deg);pointer-events:none}
.str .wrap{position:relative;z-index:1}
.str__lead{margin:0 0 44px;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:#C3D4DA}
.str__row{display:grid;grid-template-columns:250px 1fr;gap:44px;padding:44px 0;border-top:1px solid rgba(255,255,255,.20)}
.str__row:last-of-type{border-bottom:1px solid rgba(255,255,255,.20)}
/* 左の列：STRENGTH 01（飾り）＋ 総合力（見出し）*/
.str__row h3{margin:0;font-size:30px;line-height:1.5;letter-spacing:.05em;font-weight:500;color:#fff}
.str__row h3 small{display:block;font-size:12px;letter-spacing:.22em;color:var(--teal-l);font-weight:800;margin-bottom:12px}
/* 右の列：小見出し ＋ 説明文 */
.str__row h4{margin:0 0 16px;font-size:24px;line-height:1.5;letter-spacing:0;font-weight:500;color:var(--teal-l)}
.str__row p{font-size:15.5px;line-height:2.15;color:rgba(255,255,255,.88);margin-bottom:20px}
.str__row p:last-of-type{margin-bottom:0}
.str__row .em{color:var(--teal-l);font-weight:700}
/* 各行のリンクは廃止。セクション末尾に1つだけ置く（2026-08-21 オーナー指示・事業内容と同じ形）*/
.str__more{display:flex;justify-content:flex-end;margin-top:clamp(30px,3.6vw,46px)}

/* ---- 設計→製造→施工→保守（事業内容ページ・明るい地の上） ----
   ⚠️ 2026-08-20：強みから図表を外したときに、この定義ごと消してしまった。
      いまは business.html の淡い水色の地の上でだけ使う。暗い地用の色を書かない */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.flow div{background:#fff;border:1px solid var(--line);border-radius:8px;padding:22px 20px;position:relative}
.flow .n{font-size:10.5px;letter-spacing:.2em;color:var(--teal-d);font-weight:800}
.flow h4{margin:8px 0 8px;font-size:19px;color:var(--main)}
.flow p{font-size:13px;line-height:1.9;color:var(--ink-soft)}
.flow div::after{content:"";position:absolute;right:-12px;top:50%;width:8px;height:8px;
  border-top:2px solid var(--teal);border-right:2px solid var(--teal);
  transform:translateY(-50%) rotate(45deg)}
.flow div:last-child::after{display:none}

/* ---- 施工事例 ---- */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.works figure{margin:0}
.works img{width:100%;aspect-ratio:355/252;object-fit:cover;border-radius:6px}
.works figcaption{padding-top:11px;font-size:13px;color:var(--ink-soft);line-height:1.75}
.works figcaption b{display:block;color:var(--main);font-size:15px;margin-bottom:2px}
.more{display:inline-block;margin-top:20px;font-size:13px;font-weight:700;color:var(--main);border-bottom:1px solid var(--teal);padding-bottom:3px}

/* ---- 採用 ---- */
/* 白いカードのまま。写真だけ外した（2026-08-21 オーナー指示）
   ⚠️ 文字幅を制限しない。カードの幅いっぱいに流す（折り返しを増やさない）*/
.rec{background:#fff;border:1px solid var(--line);border-radius:8px;padding:clamp(30px,4vw,52px)}
.rec h3{font-size:30px;line-height:1.5;letter-spacing:.05em;font-weight:500;color:var(--main)}
.rec p{color:var(--ink-soft);margin:18px 0 0}
/* ボタンはカードの中の右下に置く（2026-08-21 オーナー指示）*/
.rec__more{display:flex;justify-content:flex-end;margin-top:clamp(26px,3vw,36px)}

/* ---- 会社概要 ---- */
.cmp{display:grid;grid-template-columns:1.05fr 1fr;gap:36px;align-items:start}
.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:14px 17px;font-size:14px;text-align:left;vertical-align:top;line-height:1.8}
.tbl th{width:8.6em;background:var(--tone2);font-weight:700;color:var(--main);font-size:13px}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
/* 本社の地図（Googleマップの埋め込み。APIキー不要の output=embed 形式）*/
.map{background:#DDE6EC;border:1px solid var(--line);border-radius:8px;height:280px;overflow:hidden}
.map iframe{width:100%;height:100%;display:block;border:0}
.sites{margin-top:14px;display:grid;gap:10px}
.sites div{background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px 17px;font-size:13px;line-height:1.8}
.sites b{display:block;font-size:14px;color:var(--main);margin-bottom:2px}

/* ---- お問い合わせ ---- */
/* 🔴 お問い合わせは紺一色。グラデーションも斜めの帯も入れない（2026-08-20 オーナー指示）。
   理由：グラデーションを「強み」だけの見せ場にするため。ここで繰り返すと強みが目立たなくなる */
.contact{background:var(--tone3a);color:#fff;position:relative;overflow:hidden}
.contact .in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
/* ⚠️ 幅を絞ると1文が2行に割れる（実測：45字＝約720px、44emでは704pxで足りない）。
      ここは1文を1行で見せたいので幅を制限しない。狭い画面では自然に折り返す
   ⚠️ 行間は本文の2.00より詰める（2026-08-21 オーナー指示）。短い案内文なので、
      間延びさせずにボタンへ視線を送る */
.contact p{color:rgba(255,255,255,.84);margin:0 0 12px;line-height:1.7}
.contact p:last-of-type{margin-bottom:26px}
.telbox{display:inline-flex;flex-direction:column;border-radius:6px;border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.07);padding:18px 34px;
  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)}
.telbox small{font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.72)}
.telbox b{font-size:31px;font-weight:800;line-height:1.2}
.form{background:#fff;border-radius:8px;padding:28px 30px}
.form label{display:block;font-size:13px;font-weight:700;color:var(--main);margin:0 0 6px}
.form input,.form textarea{width:100%;border:1px solid var(--line);border-radius:5px;padding:11px 13px;font-size:14px;font-family:inherit;margin-bottom:15px}
.form .btn{width:100%;justify-content:center}

footer{background:var(--tone2);color:var(--ink-soft);padding:36px 0 28px;font-size:13px;border-top:1px solid var(--line)}
footer .in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
footer .cp{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:12px}

@media(max-width:900px){
  .nums,.flow,.works,.cmp,.rec,.contact .in,.qual{grid-template-columns:1fr}
  .svc__row{grid-template-columns:1fr;margin:0}
  .svc__ph{order:-1;height:auto;aspect-ratio:4/3}
  .str__row{grid-template-columns:1fr;gap:16px}
  .gnav{display:none}
  .flow div::after{display:none}
  .newsbar .in{flex-wrap:wrap;gap:10px}
}


/* =========================================================================
   下層ページ
   ========================================================================= */
.phd{position:relative;overflow:hidden;background:var(--grad);color:#fff;padding:64px 0 60px}
.phd::before{content:"";position:absolute;left:var(--slash-l);top:-30%;width:var(--slash-w);height:180%;
  background:var(--slash-a);transform:skewX(-16deg);pointer-events:none}
.phd .wrap{position:relative;z-index:1}
.phd .eng{display:block;color:var(--teal-l);opacity:.28;
  font-size:clamp(var(--eng-min),6.4vw,var(--eng-max));font-weight:800;letter-spacing:.06em;line-height:1;
  margin:0 0 calc(var(--gap-label) - .3em);user-select:none}
.phd h1{margin:0;padding-left:20px;font-size:clamp(var(--h-min),4vw,var(--h-max));line-height:1.45;font-weight:700}
.phd .lead{margin:22px 0 0;padding-left:20px;font-size:15.5px;line-height:2;color:rgba(255,255,255,.84);max-width:46em}
.crumb{font-size:12px;color:var(--ink-soft);padding:12px 0}   /* 下線は引かない（区切らない）*/
/* パンくずの「ホーム」＝戻る導線。線で囲んで押せる形にする
   （2026-08-21 オーナー指示。ロゴは触らない／矢印は入れない）*/
.crumb a{display:inline-block;color:var(--main);font-weight:700;text-decoration:none;
  border:1px solid var(--line);border-radius:4px;padding:4px 14px;background:#fff;
  transition:color .2s ease, border-color .2s ease, background .2s ease}
.crumb a:hover{color:#fff;background:var(--teal);border-color:var(--teal-d)}
.crumb a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ---- 事業部ブロック（2026-08-21）----
   形：1行のタイトル → キャッチと本文 → 対応分野の羅列 → 写真4枚（すべて縦積み）
   🔴 写真とテキストを横に並べない（高さが合わず間延びする）
   🔴 対応分野はカードにしない（スマホで縦に長くなりすぎる）
   🔴 番号・事業部名・英字は1行に収める */
.dept{padding:clamp(54px,6.2vw,86px) 0}

/* タイトルの1行：番号を「大きく淡い図柄」として扱う（セクション見出しの英字と同じ考え方）。
   英字のうしろに細い罫を右端まで流して、行として締める */
.dept__h{display:flex;align-items:center;gap:20px;margin:0 0 clamp(34px,4vw,54px)}
.dept__no{flex:none;font-size:48px;line-height:1;font-weight:900;letter-spacing:.01em;
  color:var(--teal);opacity:.26;user-select:none}
.dept__name{flex:none;border-left:4px solid var(--teal);padding-left:20px;
  font-size:30px;line-height:1.35;letter-spacing:.06em;font-weight:500;color:var(--main)}
.dept__en{flex:none;font-size:14px;font-weight:700;letter-spacing:.14em;color:var(--teal-d)}
.dept__h::after{content:"";flex:1;min-width:24px;height:1px;background:var(--line)}

/* ⚠️ .dept__body p{margin:0} に負けるので、親を足して強くする（この案件で11回目の優先順位）
   小見出しなので、下の本文との間は空ける。段落どうしの間（0）とは役割が違う */
.dept__body .dept__cap{margin:0 0 26px;font-size:24px;line-height:1.5;font-weight:500;color:var(--main)}
.dept__body{margin-bottom:clamp(26px,3vw,36px)}
/* 🔴 段落の下余白を入れない。
   行間（32px）に余白が上乗せされて、段落の間だけ広く空いて見える
   （実測：余白16px → 段落間57px。行間より25px 余分だった。2026-08-21）
   短い段落が続く場所では、余白を足さず行間だけで送る */
.dept__body p{margin:0;font-size:16px;line-height:2;color:var(--ink-soft)}

/* 対応分野：羅列。横に3列並べて、縦に伸ばさない
   ⚠️ 上下に線を引かない。タイトル行にも罫があるので、線が何重にも見えて散らかる
      （2026-08-21 オーナー指摘）。区切りは余白で取る */
.dept__list{margin:0 0 clamp(30px,3.6vw,46px);padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px 24px}
.dept__list li{position:relative;padding-left:16px;font-size:15px;line-height:2;color:var(--ink-soft)}
.dept__list li::before{content:"・";position:absolute;left:0;color:var(--teal)}

/* 写真4枚を横一列 */
.dept__shots{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px)}
.dept__shots img{width:100%;aspect-ratio:355/252;object-fit:cover;display:block;border-radius:4px}

@media(max-width:900px){
  .dept__no{font-size:34px}
  .dept__name{font-size:22px;padding-left:14px}
  .dept__h{gap:12px;flex-wrap:wrap}
  .dept__h::after{display:none}
  .dept__list{grid-template-columns:1fr 1fr}
  .dept__shots{grid-template-columns:1fr 1fr}
}

/* 一覧表（資格） */
.qtable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.qtable caption{caption-side:top;text-align:left;font-size:17px;font-weight:700;color:var(--main);padding:0 0 12px}
.qtable th,.qtable td{border-bottom:1px solid var(--line);padding:11px 16px;font-size:14px;text-align:left}
.qtable td.n{text-align:right;white-space:nowrap;font-weight:800;color:var(--teal-d);width:5.5em}
.qtable tr:last-child th,.qtable tr:last-child td{border-bottom:0}
.qgroups{display:grid;grid-template-columns:1fr 1fr;gap:36px}

/* 表彰の年表 */
/* ⚠️ グリッドは「子要素を1つずつマス目に入れる」。
      年の <span> のあとを1つの <div> にまとめないと、3つ目の要素が次の行へ落ちる
      （2026-08-21：<span>年</span><b>…</b>テキスト の3要素で崩れていた）*/
.prize li{display:grid;grid-template-columns:8.5em 1fr;gap:20px;padding:15px 0;
  border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.9;align-items:baseline}
.prize li>div{min-width:0}
.prize li:first-child{border-top:1px solid var(--line)}
.prize li span{color:var(--teal-d);font-weight:700;font-size:13.5px}
.prize li b{font-weight:700;color:var(--main)}

@media(max-width:900px){
  .dept__top,.dept__grid,.qgroups{grid-template-columns:1fr}
  .prize li{grid-template-columns:1fr;gap:4px}
}


/* =========================================================================
   デモの停止装置（電話・送信・未作成ページ）
   正本＝ zuta-team/demo-templates/demo-notice-template.md
   ========================================================================= */
.demo-modal{position:fixed;inset:0;z-index:9999;background:rgba(10,26,48,.55);
  display:flex;align-items:center;justify-content:center;padding:20px}
.demo-modal[hidden]{display:none}
.demo-modal__box{background:#fff;border-radius:12px;padding:30px 26px;max-width:430px;width:100%;
  text-align:center;box-shadow:0 12px 40px rgba(10,26,48,.28)}
.demo-modal__box p{font-size:16px;line-height:1.85;white-space:pre-line;margin:0 0 22px;color:var(--ink)}
.demo-modal__box button{font-size:15px;font-weight:700;padding:13px 34px;border:1px solid var(--teal-d);
  border-radius:6px;background:var(--teal);color:#fff;cursor:pointer;font-family:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -2px 0 rgba(0,0,0,.16),0 2px 4px rgba(20,50,70,.22)}
.demo-modal__box button:hover{background:#fff;color:var(--teal)}

/* 電話番号（デモでは発信しない） */
a.telbox{text-decoration:none}


/* =========================================================================
   採用情報ページ
   ========================================================================= */
/* 冒頭のメッセージ（現行サイトの文章をそのまま活かす） */
.rc-msg{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,52px);align-items:center}
.rc-msg img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.rc-msg h2{font-size:clamp(22px,2.4vw,28px);color:var(--main);line-height:1.6;margin-bottom:18px}
.rc-msg p{font-size:15.5px;line-height:2.15;color:var(--ink-soft);margin-bottom:16px}
.rc-msg p:last-child{margin-bottom:0}

/* 仕事の内容（3つ） */
.job{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.job div{background:#fff;border:1px solid var(--line);border-radius:8px;padding:24px 24px 26px}
.job .n{font-size:11px;letter-spacing:.2em;font-weight:800;color:var(--teal-d)}
.job h3{margin:8px 0 12px;font-size:18px;color:var(--main);line-height:1.55}
.job li{font-size:13.5px;line-height:1.95;color:var(--ink-soft);padding-left:15px;position:relative}
.job li::before{content:"";position:absolute;left:0;top:.82em;width:6px;height:1.5px;background:var(--teal)}

/* 資格取得の支援（このページの見せ場） */
.support{background:var(--tone3a);color:#fff;border-radius:8px;padding:clamp(30px,3.6vw,44px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px);align-items:center}
.support h3{font-size:clamp(21px,2.2vw,26px);line-height:1.6}
.support h3 span{color:var(--teal-l)}
.support p{font-size:15px;line-height:2.1;color:rgba(255,255,255,.86);margin-top:16px}
.support ul{display:grid;gap:12px}
.support li{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:6px;
  padding:15px 18px;font-size:14.5px;line-height:1.75}
.support li b{color:var(--teal-l)}

/* 現場の規模 */
.scale{background:var(--tone2);border-radius:8px;padding:clamp(26px,3vw,38px);margin-top:34px}
.scale h3{font-size:20px;color:var(--main);margin-bottom:12px}
.scale p{font-size:15.5px;line-height:2.1;color:var(--ink-soft)}

@media(max-width:900px){
  .rc-msg,.job,.support{grid-template-columns:1fr}
}


/* =========================================================================
   B版：参考サイト（神明電機・shinmei-e.co.jp）の文字体系をそのまま移植
   2026-08-21。実測してきた値をそのまま当てている。A版との比較用。
   ---------------------------------------------------------------
   向こうの体系（実測）
     70px/1.00/.029em/500   特大の数字
     48px/1.50/.050em/500   ページ見出し
     40px/1.40/.050em/600   セクション見出し
     30px/1.00〜2.00/.050em/500  中見出し（向こうは行間が2種類あった→1.50を採用）
     24px/1.60/.050em/500   小見出し
     24px/1.50/.000em/500   強調文・リンク見出し
     20px/2.00/.000em/500   拠点名などの項目名
     18px/2.00/.000em/700   表の項目名
     16px/2.00/.000em/400   本文  ← 字間ゼロ
     14px/1.50〜2.00/.000em/400  補足・注記・パンくず
     12px/1.48/.000em/400   フッターの細目
   ========================================================================= */

body{
  font-family:"Noto Sans JP", YuGothic, "Yu Gothic", 游ゴシック,
              "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  font-size:16px; line-height:2.00; letter-spacing:0; font-weight:400;
}

/* ---- 見出し ---- */
.phd h1, .hero h1{ font-size:48px; line-height:1.50; letter-spacing:.05em; font-weight:500 }
.sechd h2       { font-size:40px; line-height:1.40; letter-spacing:.05em; font-weight:600 }
.dept h2        { font-size:30px; line-height:1.50; letter-spacing:.05em; font-weight:500 }
.rc-msg h2, .support h3, .rec .t h3, .scale h3, .msg .big{
                  font-size:30px; line-height:1.50; letter-spacing:.05em; font-weight:500 }
.box h3, .job h3, .dept__grid h3, .flow h4, .svc__tx h3, .qtable caption{
                  font-size:24px; line-height:1.60; letter-spacing:.05em; font-weight:500 }
/* ⚠️ 「場所」で書いたセレクタ（.svc__tx p / .dept__top p）が後ろにあるので、
      同じ強さだと本文の指定に負ける。ここだけ親を足して勝たせる。
      この案件で8回目の同じ型（CLAUDE運用メモ：場所セレクタ > 部品クラス）*/
.dept .dept__cap, .svc__tx .svc__cap, .str .str__lead{
                  font-size:24px; line-height:1.50; letter-spacing:0;    font-weight:500 }

/* ---- 本文 ---- */
.sechd .lead, .phd .lead, .msg p, .dept p, .dept__grid p, .svc__tx p, .str__row p,
.job li, .biz .c p, .rc-msg p, .support p, .support li, .scale p, .rec .t p,
.prize li, .news li, .tbl td, .qtable td, .qtable th{
                  font-size:16px; line-height:2.00; letter-spacing:0; font-weight:400 }

/* ---- 項目名・表 ---- */
.works figcaption b, .sites b{ font-size:20px; line-height:2.00; letter-spacing:0; font-weight:500 }
.tbl th        { font-size:18px; line-height:2.00; letter-spacing:0; font-weight:700 }
.prize li span { font-size:16px; line-height:2.00; letter-spacing:0; font-weight:500 }

/* ---- ナビ・リンク ---- */
.gnav          { font-size:16px; line-height:1.50; letter-spacing:0; font-weight:500 }
.btn           { font-size:16px; line-height:1.50; letter-spacing:0; font-weight:500 }
.btn--sm       { font-size:16px; padding:12px 24px }
.more, .svc__go{ font-size:16px; line-height:1.50; letter-spacing:0; font-weight:500 }

/* ---- 補足・注記 ---- */
.works figcaption, .sites div, .crumb, .newsbar .in, .newsbar time, .newsbar .more,
.box .cap, .svc__tags span, footer{
                  font-size:14px; line-height:2.00; letter-spacing:0; font-weight:400 }
.notice, footer .cp{ font-size:12px; line-height:1.48; letter-spacing:0; font-weight:400 }

/* ---- 数字（向こうの特大数字にならう） ---- */
.telbox b      { font-size:40px; line-height:1.00; letter-spacing:.029em; font-weight:500 }
.telbox small  { font-size:14px; line-height:1.50; letter-spacing:0; font-weight:400 }

/* ---- 大きい英字＋和文の重ね（No.155 石澤型を、この案件で発展させたもの）----
   🔴 2026-08-21 オーナー指示「ここだけはデザインとしての場所。元くらい太く大きく。
      日本語を半分くらい英字に重ねて上に乗せる」
   ⚠️ 英字は Latin だけなので、太さを増やしても日本語の字形は落ちてこない
      （Google Fonts は unicode-range で分割配信するため、増える転送量は Latin の1ファイルぶん）*/
.sechd .eng, .phd .eng{
  margin:0;
  font-size:var(--eng-size);
  font-weight:var(--eng-weight);
  letter-spacing:.02em;      /* 特大なので字間は詰め気味にする */
  line-height:1;
}
/* 和文を英字の文字の上に重ねる。負のマージンで持ち上げ、z-index で前に出す */
.sechd h2, .phd h1{
  position:relative; z-index:1;
  margin-top:calc(-1 * var(--eng-size) * var(--eng-lift));
}
/* 中央ぞろえの見出しでも同じように効かせる */
.sechd--c .eng{ text-align:center }


/* =========================================================================
   お問い合わせフォーム（ポップアップ）
   トップ等のセクションにはボタンだけを置き、押すとここが開く
   ========================================================================= */
.fmodal{position:fixed;inset:0;z-index:9998;background:rgba(10,26,48,.55);
  display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto}
.fmodal[hidden]{display:none}
.fmodal__box{background:#fff;border-radius:12px;width:100%;max-width:620px;
  padding:clamp(26px,3.4vw,40px);box-shadow:0 16px 48px rgba(10,26,48,.32);position:relative}
.fmodal__box h3{font-size:24px;line-height:1.6;letter-spacing:.05em;font-weight:500;color:var(--main);margin-bottom:6px}
.fmodal__box .cap{font-size:14px;line-height:1.7;color:var(--ink-soft);margin-bottom:24px}
.fmodal__close{position:absolute;top:14px;right:16px;width:40px;height:40px;border:none;background:none;
  cursor:pointer;font-size:26px;line-height:1;color:var(--ink-soft);font-family:inherit}
.fmodal__close:hover{color:var(--main)}
.fmodal .form{background:none;border-radius:0;padding:0}

/* お問い合わせセクション：ボタンだけの形 */
/* ⚠️ gap を入れると段落の間まで広がる（2026-08-21：26px 空いて「行間が広い」原因になった）。
      間隔は各要素の margin で持たせる */
.contact .in--btn{display:flex;flex-direction:column;align-items:flex-start;gap:0}
/* 🔴 電話とフォームの2つは「同じ大きさ」に見せる。
      grid で列幅をそろえ、align-items:stretch で高さもそろえる（2026-08-21 オーナー指示）*/
.contact .actions{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:32px;align-items:stretch;width:min(100%,700px)}
.contact .actions .btn{font-size:22px;padding:22px 26px;justify-content:center;text-align:center}
.contact .actions .telbox{align-items:center;justify-content:center;padding:16px 26px}
@media(max-width:700px){
  .contact .actions{grid-auto-flow:row;grid-auto-columns:auto;gap:16px}
}


/* ---- 強みの行：左＝飾り＋見出し、右＝小見出し＋説明文 ----
   ⚠️ 上の一括指定（24px）より後ろに置くこと。同じ強さだと後ろが勝つ */
/* 🔴 強さは「太さ」ではなく「大きさ」で出す（design-baseline の原則）。
      30px → 40px に1段上げた（2026-08-21 オーナー「もう少し目立たせたい」）。
      太さは500のまま。セクション見出し（40px/600）より軽いので、順位は崩れない */
.str__row h3{ font-size:40px; line-height:1.4; letter-spacing:.05em; font-weight:500; color:#fff }
.str__row h3 small{ display:block; font-size:12px; letter-spacing:.22em; color:var(--teal-l); font-weight:800; margin-bottom:12px }
.str__row h4{ font-size:24px; line-height:1.5; letter-spacing:0; font-weight:500; color:var(--teal-l); margin:0 0 16px }


/* ---- お問い合わせの本文 ----
   ⚠️ この案件で10回目のCSS優先順位のつまずき。
      本文の一括指定（line-height:2.00）が後ろにあると、前に書いた .contact p が負ける。
      一括指定から .contact p を外したうえで、ここで最終的に指定する

   🔴 段落の間を空けない（margin:0）。
      2行とも1行ずつの短い文なので、段落の余白を足すと「行間が広い」ように見える。
      実測：行間1.70＋余白12px＝39.2px 空いていた → 行間2.00＋余白0＝32px（他のセクションと同じ）*/
.contact p{ font-size:16px; line-height:2.00; letter-spacing:0; font-weight:400;
  color:rgba(255,255,255,.84); margin:0 }
.contact p:last-of-type{ margin-bottom:44px }


/* ---- 下層ページの導入：グラデーションの見出し帯の中に入れる ----
   （2026-08-21 オーナー指示「見出し帯の中に全部入るイメージ」）*/
.phd .intro-h{margin:26px 0 0;padding-left:20px;
  font-size:30px;line-height:1.5;letter-spacing:.05em;font-weight:500;color:#fff}
/* ⚠️ 幅を制限しない。折り返す位置はこちらで決めない */
.phd p{margin:18px 0 0;padding-left:20px;
  font-size:16px;line-height:2.00;letter-spacing:0;font-weight:400;color:rgba(255,255,255,.84)}


/* =========================================================================
   採用ページ（2026-08-21 オーナー原稿で全面差し替え）
   ========================================================================= */
/* 見出し帯の中の3行リード */
.phd .phd__lines{margin:24px 0 0;padding-left:20px;
  font-size:20px;line-height:1.90;letter-spacing:.05em;font-weight:500;color:var(--teal-l)}

/* 本文ブロック（段落間は空けない＝行間だけでリズムを作る）*/
.rtx{margin-bottom:clamp(34px,4vw,54px)}
.rtx:last-child{margin-bottom:0}   /* 後ろに何も無いときは余白を残さない */
.rtx p{margin:0;font-size:16px;line-height:2.00;letter-spacing:0;color:var(--ink-soft)}

/* 3つの仕事 */
.jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px);align-items:start}
.jobs img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;margin:0 0 22px}
.jobs h3{margin:0 0 14px;padding-left:16px;border-left:4px solid var(--teal);
  font-size:22px;line-height:1.5;font-weight:500;letter-spacing:.05em;color:var(--main)}
.jobs p{margin:0;font-size:15px;line-height:1.95;letter-spacing:0;color:var(--ink-soft)}

/* MESSAGE は薄いグレー地に（.msg の白を上書き）*/
.msg.tone2{background:var(--tone2)}
/* 段落間は空けない（行間でリズムを作る。gap/margin を足すと「行間が広い」になる）*/
.msg p{margin:0 auto}

@media(max-width:900px){
  .jobs{grid-template-columns:1fr;gap:34px}
  .phd .phd__lines{font-size:18px}
}


/* 下層ページの見出し帯：ページタイトル（h1）と、その次の文章とのすき間を広く取る
   （2026-08-21 オーナー指示。事業内容／技術と実績／採用情報の3ページ共通）
   ⚠️ .phd .intro-h / .phd .lead のほうが詳細度が高いので、同じ詳細度で後ろに置いて上書きする */
.phd h1 + .intro-h,
.phd h1 + .lead,
.phd h1 + p{ margin-top:clamp(44px,4.4vw,58px) }
/* 技術と実績だけは h1（48px）の次が小見出しではなく本文（16px）。
   文字の落差が大きいぶん、同じ 56px でも狭く見えるので、このページだけ広く取る */
.phd h1 + .lead{ margin-top:clamp(58px,6vw,78px) }

/* 見出し帯の本文：段落と段落の間は空けない（行間だけでリズムを作る）
   （2026-08-21 オーナー指示。margin を足すと「行間が広い」に見える）*/
.phd p + p{ margin-top:0 }
/* ただし、3行のリードと本文の間だけは空ける */
.phd .phd__lines + p{ margin-top:22px }


/* =========================================================================
   表の外枠（2026-08-21 オーナー指摘「上下と左右に線がない」）
   ========================================================================= */
/* 🔴 原因：border-collapse:collapse と border-radius は併用できない。
   角丸を付けた時点で、table 自身に書いた外枠（上下左右）が描かれなくなっていた。
   separate に変えると、外枠と角丸の両方が出る。会社概要の表にも同じく効く。*/
.tbl{ border-collapse:separate; border-spacing:0 }

/* ---- 募集要項：採用ページで一番目立たせる表 ---- */
/* 上辺も他の3辺と同じブルーの細線にそろえる（2026-08-21 オーナー指示：ティールの帯は入れない）*/
.tbl--main{ border:1px solid var(--main);
  box-shadow:0 12px 34px rgba(19,48,110,.13) }
.tbl--main th{ width:9.4em; padding:20px 22px;
  background:var(--tone3a); color:#fff; border-bottom:1px solid rgba(255,255,255,.22) }
.tbl--main td{ padding:20px 26px; border-bottom:1px solid var(--line) }
.tbl--main tr:last-child th,
.tbl--main tr:last-child td{ border-bottom:0 }
/* ⚠️ 年収例を大きく強調していたが解除（2026-08-22 オーナー指示）。
   現行サイトでもそこだけ強調していないため、表の中で他の項目と同じ扱いにする */


/* セクション見出しの構成（2026-08-21 オーナー指示）
   大きい英字＋和文＝タイトル ／ その下に一段おいて小見出し ／ さらに下が本文 */
/* 出だしは下の本文にそろえる（タイトルの 20px の字下げは付けない）*/
.sechd .sec-sub{ margin:clamp(30px,3vw,40px) 0 0; padding-left:0;
  font-size:30px; line-height:1.50; letter-spacing:.05em; font-weight:500; color:var(--main) }
.sechd.on-dark .sec-sub{ color:#fff }
/* 小見出しと本文の間は、ファーストビューの小見出しと同じ 18px にそろえる */
.sechd:has(.sec-sub){ margin-bottom:18px }


/* トップページの事業部見出しを、事業内容ページと同じ「番号＋縦線＋名称」にそろえる
   （2026-08-21 オーナー指示）
   ⚠️ .svc__tx h3 の margin/色より強くするため、親を足して書く（この案件で12回目）*/
.svc__tx .dept__h{ margin:0 0 34px }
/* 写真と並ぶぶん段が狭いので、英字と右へ流す罫は入れない */
.svc__tx .dept__h::after{ display:none }
@media(max-width:900px){
  .svc__tx .dept__no{ font-size:34px }
  .svc__tx .dept__name{ font-size:22px; padding-left:14px }
}


/* =========================================================================
   見出しの型をそろえる（2026-08-21 オーナー指示。採用情報のファーストビューが手本）
   ========================================================================= */
/* ① 和文見出し → その下の文字 までの距離を、どこも同じ 56px にする。
      これまで「リードがある節=24px／無い節=48px／小見出し=38px」とバラついていた */
.sechd{ margin-bottom:56px }
.sechd .lead{ margin-top:56px }
.sechd .sec-sub{ margin-top:56px }
/* 小見出しの下だけは、ファーストビューと同じ 18px（前回のご指示のまま）*/
.sechd:has(.sec-sub){ margin-bottom:18px }

/* ② 和文見出しの1文字目を、下の本文の出だしにそろえる。
      そのぶん大きい英字が 20px だけ左へ出る。
      （ファーストビューは「採」と本文が同じ位置、RECRUIT だけ左にずれている＝この形）
      ⚠️ 中央ぞろえの節（About us）は対象外 */
.sechd:not(.sechd--c) h2{ padding-left:0 }
.sechd:not(.sechd--c) .eng{ margin-left:calc(-1 * var(--eng-shift)) }
:root{ --eng-shift:20px }
@media(max-width:900px){ :root{ --eng-shift:0px } }

/* ③ 見出し帯（ファーストビュー）も同じ位置に寄せる。
      これまで帯だけ 20px 内側に入っていて、和文見出しの出だしが節と縦にそろっていなかった。
      「英字が20px左」という関係はそのままに、帯ごと 20px 左へ動かしてページ全体をそろえる */
.phd h1, .phd .intro-h, .phd p, .phd .lead, .phd .phd__lines{ padding-left:0 }
.phd .eng{ margin-left:calc(-1 * var(--eng-shift)) }


/* =========================================================================
   生成画像を入れる（2026-08-21）
   ========================================================================= */
/* ---- ヒーロー：固定1枚 ----
   スライドショーの切り替えは止める。1枚なので繰り返すと戻る瞬間に画が飛ぶため、
   ゆっくり寄る動きは「読み込み時に1回だけ」走らせて、その位置で止める */
.hero__bg picture{ display:contents }

/* ---- ABOUT：左が白くぼけた背景。文字はその白い側に置く ---- */
#about{ position:relative; overflow:hidden; background:#fff; text-align:left }
#about::before{ content:""; position:absolute; inset:0;
  background:url(img/about-pc.jpg) right center / cover no-repeat }
/* 🔴 右端固定にすると、画像に焼き込まれた「左の白いぼかし」が削れて幅が足りなくなる
   （1425px幅で白は約400pxまで縮む。文字は627px必要）。
   足りない分は CSS のグラデーションで作る。これで切れ方に関係なく文字は白の上に乗る */
#about::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to right, #fff 0%, #fff 30%, rgba(255,255,255,.90) 44%, rgba(255,255,255,0) 66%) }
#about .wrap{ position:relative; z-index:2 }
/* ⚠️ 幅は「白い側に収める」ための実寸。文章の折り返し位置を決める目的ではない */
#about .sechd, #about p{ width:min(100%,56%) }
#about p{ margin-left:0; margin-right:0; max-width:none }
#about .big{ margin-top:34px; margin-bottom:34px }

@media(max-width:820px){
  /* スマホ版は上が白く、下に写真。文字は白い側（上）に置き、写真には乗せない */
  #about::before{ background-image:url(img/about-sp.jpg);
    background-size:100% auto; background-position:center bottom;
    /* 🔴 画像の一番上の行が真っ白ではないため、白い背景との境目が線になって見えていた
       （2026-08-22 オーナー指摘）。上端の90pxを透明へ溶かして境目を消す。
       画像の高さ＝画面幅×1.625（984×1599 の比）。下から測って位置を決めている。 */
    -webkit-mask-image:linear-gradient(to top,#000 calc(100vw * 1.625 - 90px),transparent calc(100vw * 1.625));
    mask-image:linear-gradient(to top,#000 calc(100vw * 1.625 - 90px),transparent calc(100vw * 1.625)) }
  #about .sechd, #about p{ width:100% }
  /* 🔴 スマホ版の画像は上半分が白いぼかし。文字の下に確保する余白が大きすぎると、
     その白い部分だけが挟まって「無駄な空白」に見える（実測で145px あった）。
     写真本体（機械室）が文字のすぐ下から始まるよう、確保する高さを詰める。
     計算：文字と写真の間 ＝ この値 ＋ 92px − 0.731×画面幅 */
  #about .wrap{ padding-bottom:calc(100vw * 0.54) }
}

/* ---- ヒーローの見出し：スマホでの折り返し ----
   48px のままだと「制御ま／で。」のように文の途中で切れて1文字だけ落ちる。
   意味の切れ目（読点）で折るために、スマホだけ span を行にする */
@media(max-width:820px){
  .hero h1{ font-size:28px }
  .hero h1 span{ display:block }
  .hero h1 br{ display:none }
}


/* =========================================================================
   2026-08-21 オーナー指示（画像を入れたあとの調整）
   ========================================================================= */

/* ① ヒーロー：完全な静止画。右端と下端を固定し、はみ出す分は「上」から切る
      （2026-08-21 オーナー指示「微妙に動いていて、動いているのか分からない」）
      🔴 元の .hero__bg img は opacity:0（スライドショー用）なので、1 に戻さないと画が出ない */
.hero__bg img{ opacity:1; object-position:right bottom; animation:none; transform:none }

/* ② ヒーローのスモークを、文字のある左下だけに寄せる。
      朝日のある右上と空はできるだけ素のまま見せる */
/* 🔴 上下方向のグラデーションは「画面の全幅」にかかる。左だけ暗くしたつもりでも
   右下にも同じ濃さが乗っていた（2026-08-21 オーナー指摘）。
   ➡️ 左下を中心にした楕円ひとつに置き換える。右端は完全に素通し（透明）になる */
.hero__veil{ background:
  radial-gradient(86% 108% at -6% 104%,
    rgba(9,28,48,.84)  0%,
    rgba(9,28,48,.68) 26%,
    rgba(9,28,48,.40) 46%,
    rgba(9,28,48,.14) 64%,
    rgba(9,28,48,0)   80%) }
/* スモークを最小限にするぶん、文字側に薄い影を持たせて輪郭を守る */
.hero .wrap{ text-shadow:0 2px 16px rgba(4,18,34,.55) }

/* ③ ABOUT：写真が強すぎるので、全体にうすい白のもやをかけて一段下げる。
      （地が白のページなので、暗いスモークだと逆に目立つ。白でかすませる）*/
#about::after{ background:
  linear-gradient(to right, #fff 0%, #fff 30%, rgba(255,255,255,.90) 44%, rgba(255,255,255,0) 66%),
  linear-gradient(rgba(255,255,255,.46), rgba(255,255,255,.46)) }

/* ④ ABOUT の大きい英字は外した。
      ⚠️ 和文見出しは英字に重ねるため負の余白で上へ引いている。英字が無いと上に飛び出すので戻す */
.sechd--noeng h2{ margin-top:0 }

/* ⑤ ヘッダーのお問い合わせボタンだけ、矢印を出さない */
.gnav .btn::after{ content:none }

/* ⑥ お知らせ：ヒーローとABOUTの間から、会社情報の中へ移した（2026-08-21 オーナー指示）
      帯のまま置くと節と節の間で浮くので、会社概要の一部として枠付きの1行にする */
/* 中を水色で塗る（2026-08-21 オーナー指示「枠だけだと目立たなすぎる」）
   ⚠️ 2026-08-23：--tone2 自体を #E0EAF3 に濃くしたので、独自指定の #DFEBF6 とほぼ同色になった。
      オーナー判断で --tone2 に統一。枠線だけ一段濃い青を残して、行として見えるようにする。 */
section .newsbar{ background:var(--tone2); border:1px solid #B9D3E8; border-radius:6px;
  margin-top:clamp(34px,4vw,52px) }
section .newsbar .in{ display:flex; align-items:center; gap:20px; padding:16px 22px; font-size:14px }
@media(max-width:900px){ section .newsbar .in{ flex-wrap:wrap; gap:10px } }

/* ⑦ ABOUT の大きい文字を一段ずつ下げる（2026-08-21 オーナー指示「ごちゃごちゃして見える」）
      見出し 40px → 30px ／ 3行の強調 24px → 20px。文字の型の段はそのまま使う */
#about h2{ font-size:30px }
#about .big{ font-size:20px }

/* ⑧ フィールド事業部の写真のうち2枚を、通信の絵に差し替え（2026-08-21）
      4枚・4列のレイアウトはそのまま。差し替えたのは kouji-05 と kouji-03 の2枚 */


/* ⑨ ヘッダー：真っ白のベタをやめて「すりガラス」にする
      （2026-08-21 オーナー「真っ白が安っぽい。透けるスモークか濃い紺に」）
      🔴 濃い紺・暗いスモークは採れない。ロゴの「株式会社 神明電気」が濃紺〜黒の文字で、
         暗い地では消える。2026-08-20 に一度それで差し戻しになっている。
      ⚠️ そのときの失敗は「透かしすぎ」。写真のディテールがロゴの背後に出て輪郭が食われた。
         今回は白 82%＋強めのぼかしで、色だけ拾ってディテールは残さない。 */
.hdr{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(20px) saturate(145%);
  -webkit-backdrop-filter:blur(20px) saturate(145%);
  border-bottom:1px solid rgba(31,76,122,.12);
  box-shadow:0 1px 20px rgba(19,48,110,.07);
}
/* ぼかしに対応していないブラウザでは透かさない（ロゴが読めなくなるのを防ぐ）*/
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hdr{ background:#fff }
}


/* ⑩ ヘッダーの下にファーストビューを敷く（2026-08-21 オーナー指示）
      🔴 すりガラスにしても、ヘッダーの下に何も無ければ透ける相手がいない。
         ページを開いた瞬間は「真っ白の帯」のままだった。
      ➡️ ヒーロー（と下層ページの見出し帯）をヘッダーの高さぶん上へ引き上げ、
         ヘッダーの背後に潜り込ませる。ヘッダーは z-index:60 なので前に残る。
      ⚠️ 潜り込んだぶん見える高さが減るので、その分だけ高さを足して元の見え方に戻す */
.hero{
  margin-top:calc(-1 * var(--hdr-h));
  min-height:calc(var(--hero-h) + var(--hdr-h));
}
.phd{
  margin-top:calc(-1 * var(--hdr-h));
  padding-top:calc(64px + var(--hdr-h));
}




/* ⑫ 🔴 スマホでは backdrop-filter（ぼかし）を完全に外す
      （2026-08-22 オーナー報告：Pixel で「下にスクロールするときだけヘッダーが消える」）

      原因＝ぼかしそのもの。固定（sticky）は効いていた。
      Chrome はぼかしを別レイヤーで合成するため、**下方向の速いスクロール中は再描画が
      間に合わずレイヤーが一瞬落ちる**。上スクロールや停止時は描き直されるので戻る。
      「下に送るときだけ消える」という症状は、この合成の取りこぼしの典型。

      ➡️ 狭い画面ではぼかしを使わず、完全に不透明な地色にする。
         透ける演出はPCだけのものと割り切る（スマホでは効果もほぼ見えない）。
      ⚠️ 半端に blur を残すと同じ症状が出る。0 にすること。
      ⚠️ 紺のB案は元からぼかし無し・不透明なので、この症状は出ない
         （:not で除外しないと紺を白で塗り潰してしまう）*/
/* ⚠️ 2026-08-22 追記：ぼかしは無実だった。
   「下スクロールでヘッダーが消える」の真因は ⑬ の横はみ出し。
   ぼかしを切る理由が無くなったので、スマホでもPCと同じすりガラスに戻す。
   下線と影だけは、白っぽい地の上で帯が消えないよう強めに残す。 */
@media(max-width:900px){
  .hdr{
    border-bottom:1px solid rgba(31,76,122,.20);
    box-shadow:0 2px 14px rgba(19,48,110,.12);
  }
}


/* ⑬ 🔴 スマホで横にはみ出していたのを止める（2026-08-22）
      症状＝右側に白い余白が出る／下スクロールでヘッダーが画面外へずれる

      原因：.svc__ph に min-height（高さの下限）と aspect-ratio:4/3 が同時にかかっていた。
      高さが先に確定し、そこから幅が逆算されるため、375px の画面で 496px の箱になっていた。

      横にはみ出すと Chrome はページ全体を見せようと縮小するが、
      **固定要素の位置は縮小前の座標で計算される**ため、スクロール中にヘッダーがずれる。
      ➡️ A案でもB案でも同じように起きていたのはこのため。ヘッダーの色とは無関係だった。

      ⚠️ aspect-ratio と min-height/height を併用しない。どちらか一方だけにする。 */
@media(max-width:900px){
  .svc__ph{ min-height:0; height:auto; width:100%; aspect-ratio:4/3 }
}
/* 保険：万一どこかがはみ出しても、横スクロールは起こさせない */
html, body{ overflow-x:clip }

/* ⑭ 強みの一文（技術をつなぎ〜）を削除（2026-08-22 オーナー指示：総合力／一貫対応／技術力を目立たせるため）
      span が段落の先頭に来たので、見出しとの間に余分な16pxが乗らないようにする */
.str__lead span:first-child{ margin-top:0 }


/* =========================================================================
   ⑮ スマホのメニュー（2026-08-22）
   ヘッダーの中に入れて top:100% で吊るす。ヘッダーが sticky で動いても必ず真下に付く。
   （画面固定にすると、お断り帯があるぶん位置がズレるため）
   ========================================================================= */
.mnav__btn{ display:none; flex-direction:column; justify-content:center; gap:6px;
  width:44px; height:44px; padding:0 10px; border:0; background:transparent; cursor:pointer }
.mnav__btn span{ display:block; height:2px; background:var(--main); border-radius:2px;
  transition:transform .25s ease, opacity .2s ease }
.mnav__btn.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg) }
.mnav__btn.is-open span:nth-child(2){ opacity:0 }
.mnav__btn.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }

.mnav{ position:absolute; top:100%; left:0; right:0; z-index:59;
  background:#fff; border-top:1px solid var(--line);
  box-shadow:0 20px 44px rgba(19,48,110,.18);
  max-height:calc(100vh - var(--hdr-h)); overflow-y:auto }
.mnav a{ display:block; padding:17px 22px; font-size:17px; line-height:1.5; font-weight:500;
  letter-spacing:.05em; color:var(--main); border-bottom:1px solid var(--line) }
.mnav__tel{ padding:20px 22px 24px; background:var(--tone2) }
.mnav__tel small{ display:block; font-size:12px; letter-spacing:.08em; color:var(--ink-soft) }
.mnav__tel a{ display:inline-block; padding:0; border:0; font-size:24px; font-weight:700;
  letter-spacing:.02em; color:var(--teal-d) }

@media(max-width:900px){ .mnav__btn{ display:flex } }
@media(min-width:901px){ .mnav{ display:none } }

/* ⑯ 事業部カードの本文：文と文の間に段落の余白を作らない（2026-08-22 オーナー指示）
      「段落」ではなく「ただの改行」で続ける。行間だけでリズムを作る。
      ⚠️ 小見出し（svc__cap）の下の余白は残す。ここを潰すと見出しと本文がくっつく。
      ⚠️ 最後の段落の下（タグとの間）は空ける。 */
/* 🔴 .svc__tx p{margin-bottom:0} と書くと .svc__cap（0,1,0）より強く、
   小見出しの下の余白まで消える。:not で必ず除外する。この案件で13回目の同じ型 */
.svc__tx p:not(.svc__cap) + p{ margin-top:0 }
.svc__tx p:not(.svc__cap){ margin-bottom:0 }
.svc__tx p:not(.svc__cap):last-of-type{ margin-bottom:18px }

/* ⑰ 強みの本文：文と文の間に段落の余白を作らない（2026-08-22 オーナー指示）
      事業部カード（⑯）と同じ扱い。行間だけでリズムを作る。
      あわせて、小見出し（h4）と本文の間は 16px → 26px に広げる */
.str__row p{ margin-bottom:0 }
.str__row h4{ margin-bottom:26px }

/* ⑱ 強みの最後のボタン：上下の余白を詰める（2026-08-22 オーナー指示）
      上＝最後の区切り線からボタンまで 46px → 26px
      下＝ボタンからセクションの終わりまで 100px → 64px */
.str__more{ margin-top:26px }
.str{ padding-bottom:64px }

/* ⑲ 採用セクションの本文：文と文の間の段落余白をなくす（2026-08-22 オーナー指示）
      ⑯⑰と同じ扱い。見出しと本文の間だけは逆に広げる（18px → 30px）*/
.rec p{ margin:0 }
.rec h3 + p{ margin-top:30px }

/* ⑳ 対応分野の箇条書きを1列にする（2026-08-22 オーナー指示）
      3列だと項目の長さがばらばらで、途中で不自然に折り返す事業部が出ていた。
      1行1項目にすると読む順番も上から下で素直になる */
.dept__list{ grid-template-columns:1fr; gap:10px }

/* ㉑ スマホのメニューを、幅いっぱいから「ボタンの下に出る小さな箱」に変える
      （2026-08-22 オーナー指示）
      right:20px はヘッダーの中身（.hdr .in）の右端と同じ位置。ボタンの右端にそろう。
      width:max-content で中身の文字幅ぴったりに縮む。狭い機種では画面からはみ出さないよう上限を付ける */
.mnav{
  left:auto; right:0;
  width:max-content; min-width:200px; max-width:100vw;
  border:1px solid var(--line); border-top:0; border-right:0;
  border-radius:0 0 0 8px;   /* 右端は画面にくっつくので、丸めるのは左下だけ */
  overflow:hidden;
}

/* ㉒ スマホのヒーロー：文字を左下 → 左上へ（2026-08-22 オーナー指示・試し）
      写真の一番きれいな部分（朝日と街並み）に文字が重なっていたため。
      ⚠️ ヒーローはヘッダーの高さぶん上へ潜っているので、上に置くときは
         その分を padding で逃がさないとヘッダーに隠れる。
      ⚠️ スモークも一緒に上へ動かす。左下のままだと文字が明るい空の上に乗って消える。 */
@media(max-width:900px){
  .hero{ align-items:flex-start }
  .hero .wrap{ padding-top:calc(var(--hdr-h) + 62px); padding-bottom:0 }
  /* 🔴 スマホは文字が画面の幅いっぱいまで伸びるので、左下起点の楕円だと
     右端の小さい文字にスモークが届かない。上から下へのグラデーションに変えて、
     「文字のある帯」だけを暗くし、その下（朝日と街並み）は素のまま残す。 */
  /* ⚠️ 画面の半分から下にはスモークをかけない（2026-08-22 オーナー指示）。
     50%で完全に0になるよう、上半分の中だけで薄れきらせる。 */
  .hero__veil{ background:
    linear-gradient(to bottom,
      rgba(9,28,48,.60)  0%,
      rgba(9,28,48,.62) 36%,
      rgba(9,28,48,.54) 46%,
      rgba(9,28,48,.32) 52%,
      rgba(9,28,48,0)   58%) }
  /* 🔴 58%で終わらせるのは太陽を避けるため。
     hero-sp.jpg の一番明るい点（太陽）は画像の縦66%、表示でも縦は切れないので同じ66%。
     ここに8%の余裕を残している。画像を差し替えたら測り直すこと。 */
}

/* ㉓ 会社概要の所在地（2026-08-22 オーナー指摘で追加）
      🔴 現行サイトにある「所在地」の行が丸ごと抜けていた。その結果、
         群馬県高崎市がフッターにしか出ていなかった。地元企業として一番大事な情報。 */
.addr{ margin-bottom:18px }
.addr:last-child{ margin-bottom:0 }
.addr b{ display:block; font-weight:700; color:var(--main) }

/* 加入団体は登録欄の中の補足。行数が多いので一段落として見せる */
.assoc{ display:block; margin-top:10px }

/* ㉔ 会社概要の地図を3拠点ぶんに分ける（2026-08-22 オーナー指示）
      1つの地図＋拠点一覧だと左の表と高さが釣り合わなかった。
      住所・電話は左の表にあるので、地図側は「どの事業部か」だけ示す。 */
.maps{ display:grid; gap:20px }
.mapfig{ margin:0 }
.mapfig figcaption{ margin:0 0 8px; font-size:16px; font-weight:700; color:var(--main); letter-spacing:.05em }
.maps .map{ height:318px }  /* 左の表と高さがそろう値（実測で調整）*/

/* ㉕ 地図の「マップで開く」リンク（2026-08-22 オーナー指示）
      🔴 Google の iframe の中に出るボタンは、こちらから常時表示にできない
         （押すか触るかしないと現れない）。そこで自前のリンクを見出しの横に常に出す。 */
.mapfig figcaption{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.mapfig figcaption a{ display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--teal-d);
  border:1px solid var(--line); border-radius:4px; padding:5px 12px; background:#fff;
  transition:border-color .2s ease, color .2s ease }
.mapfig figcaption a:hover{ border-color:var(--teal); color:var(--teal) }
.mapfig figcaption svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round }

/* ㉖ 左の表と右の地図列の高さをそろえる（2026-08-22 オーナー指示）
      地図の高さを固定値で当てるとページを直すたびにズレる。
      グリッドの stretch で「表の高さ」に地図側を伸ばし、3枚で等分する。
      ⚠️ 表が短い場合に地図が潰れないよう、1枚あたりの下限を決めておく。
      ⚠️ スマホは1列に縦積みになるので、この指定は当てない。 */
@media(min-width:901px){
  .cmp{ align-items:stretch }
  .maps{ grid-template-rows:repeat(3,1fr) }
  .mapfig{ display:flex; flex-direction:column; min-height:0 }
  .maps .map{ height:auto; flex:1; min-height:150px }
}

/* ㉗ ヒーローの見出しをPCでも3行にする（2026-08-22 オーナー指示の原稿どおり）
      これまではPCだけ2行（span をインラインにして br で折っていた）。
      原稿が3行なので、どの画面幅でも span を行にする。 */
.hero h1 span{ display:block }

/* ㉘ ヒーローの英字「SHINMEI ELECTRIC」は出さない（2026-08-22 オーナー指示・PC/スマホとも）*/
.hero .eyebrow{ display:none }

/* ㉙ スマホの見出しサイズ（2026-08-22）
      412px幅で実測したところ、3行に折り返していたのは2種類だけだった。
      セクション見出し40px → 30px ／ ABOUT の見出し30px → 24px。
      どちらも文字の型の段（48/40/30/24/20/18/16/14/12）の中で1段落とすだけ。
      ⚠️ ページ見出し（h1 48px）は「事業内容」「採用情報」など短いので触らない。 */
@media(max-width:900px){
  /* セクション見出しは「大見出し」扱い＝32px（2026-08-22 オーナー判断）*/
  .sechd h2{ font-size:32px }
  /* ABOUT だけは24pxのまま（ID指定なので上の32pxより強い）*/
  #about h2{ font-size:24px }
  /* 原稿の改行（技術の幅を広げ、／あらゆる〜）に加えて2行目も折り返し、3行になっていた。
     狭い画面では改行を外して自然に2行で流す */
  #about h2 br{ display:none }
}

/* ㉚ 本文の文字色を #333333 にそろえる（2026-08-22 オーナー判断・B案）
      実測：ABOUT の本文 #333333 は 12.63:1、事業内容の本文 #5A666B は 5.92:1。
      同じサイトの中で本文の濃さが2倍以上ちがっていた。
      原因は「補助文用のグレー」を本文にも使っていたこと。
      ➡️ 本文＝#333333／補助文（フッター・パンくず・キャプション）＝グレーのまま、と役割を分ける。 */
.svc__tx p, .rec p, .rtx p, .dept__body p, .dept__list li, .jobs p,
.sechd .lead, .scale p, .job li, .rc-msg p, .flow p{ color:var(--ink) }

/* 🔴 .svc__cap は color:var(--main)（紺）を指定しているのに、後ろにある
   .svc__tx p（詳細度が上）がグレーで上書きしていた。小見出しが本文と同じ色になっていた。
   この案件で14回目の「場所セレクタが部品クラスに勝つ」型。 */
.svc__tx .svc__cap{ color:var(--main) }

/* ㉛ スマホで事業部名と小見出しの大小が逆転していたのを直す（2026-08-22 オーナー指摘）
      実測：スマホ 事業部名22px ＜ 小見出し24px（PCは 30px ＞ 24px で正しかった）。
      スマホ用に事業部名だけ縮めた指定が残り、小見出しを下回っていた。
      ➡️ 事業部名24px ／ 小見出し20px。文字の型の段どおりに1段差をつける。 */
@media(max-width:900px){
  .svc__tx .dept__name{ font-size:24px }
  .svc__tx .svc__cap{ font-size:20px }
}

/* ㉜ 強みの背景の斜め：スマホでは「線」ではなく「左右の色分け」にする（2026-08-22 オーナー指摘）
      🔴 原因＝skewX で斜めを作っていたこと。ズレ幅は「要素の高さ」に比例して増える。
         実測：スマホでは節の高さ2206px → 帯の高さ3309px → 斜めのズレ474px。
         帯の幅は157pxしかないので、ズレが幅の3倍になり、細い斜め線が画面を横切っていた。
         PCは節が横長なので同じ角度でも帯として成立していた。
      ➡️ スマホは傾きをグラデーションの角度で作る。高さが変わっても角度は一定。 */
@media(max-width:900px){
  /* 🔴 斜めを .str（強みのセクション）だけに掛けると、その上にある写真帯には掛からない。
     写真の右脇の隙間で「途中から斜めが始まる」段差が出ていた（2026-08-22 オーナー指摘）。
     ➡️ 写真帯を含む一番外側（.strwrap）に掛け直して、上から下まで1本で通す。 */
  .str::before{ display:none }
  .strwrap{ position:relative; overflow:hidden }
  .strwrap::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:linear-gradient(105deg, var(--slash-a) 0 35%, transparent 35%) }
  .str__photo{ z-index:2 }
  .str .wrap{ position:relative; z-index:2 }
}

/* ㉝ 強みのミントの小見出しを1段小さく（2026-08-22 オーナー指示）
      24px → 20px。⚠️ スマホだけ。PCの24pxはこのままで正しい。 */
@media(max-width:900px){
  .str__row h4{ font-size:20px }
}

/* ㉞ スマホの文字サイズを5段にそろえる（2026-08-22 オーナー判断）
      大見出し32 / 中見出し24 / 小見出し20 / テキスト16 / 注釈14
      ・ヒーローの説明文 15px → 16px（テキスト）
      ・強みの導入文 14.5px → 16px（テキスト）
      ⚠️ 事業部名24px はこのまま（小見出しとして正しい）
      ⚠️ 総合力・一貫対応・技術力の40px はデザインとして例外扱い、そのまま */
@media(max-width:900px){
  /* ⚠️ ヒーローの説明文は15pxのまま（2026-08-22 オーナー判断で16pxから戻した）*/
  .str__lead span{ font-size:16px }
}

/* ㉟ 強み：スマホで「総合力／一貫対応／技術力」と下の小見出しの間を広げる
      （2026-08-22 オーナー指示・この3語を目立たせるため）
      スマホは1列組みなので、段組みの gap がそのまま2つの間隔になる。16px → 30px。 */
@media(max-width:900px){
  .str__row{ gap:42px }
}

/* ㊱ 採用セクションのカード見出しを型に合わせる（2026-08-22 オーナー判断・スマホのみ）
      30px → 24px（小見出し）。セクション見出し32pxと近すぎて見出しが2つ並んで見えていた。
      ⚠️ PCの30pxはそのまま。 */
@media(max-width:900px){
  .rec h3{ font-size:24px }
}

/* ㊲ 会社概要の表：項目名の欄を文字幅に合わせて詰める（2026-08-22 オーナー指示・スマホのみ）
      実測：欄155px に対して一番長い文字（創立年月・従業員数）が72px。
      左右の余白34pxを足しても106pxで足り、49px余っていた。
      ⚠️ 募集要項の表（.tbl--main th）は別指定なので影響しない。 */
@media(max-width:900px){
  .cmp .tbl th{ width:5.9em }
}

/* ㊳ 会社概要の所在地：スマホでは1項目1行にする（2026-08-22 オーナー指示）
      郵便番号／住所／電話／FAX をそれぞれ改行。表の幅が狭く、詰まって読みづらかった。
      ⚠️ PCは2行のまま（span はインラインなので何も変わらない）。 */
@media(max-width:900px){
  .addr span{ display:block }
  .addr br{ display:none }
}
/* 🔴 span と span の間に全角スペース（　）を置いてはいけない。
   全角スペースは「文字」なので、span を block にしたとき
   それ自体が1行分の高さを持ち、行間が異常に開く（2026-08-22 実際に発生）。
   ➡️ HTMLからは外し、PCでの間隔は CSS の余白で作る。 */
@media(min-width:901px){
  .addr span + span{ margin-left:1em }
}

/* ㊴ スマホでは地図そのものを出さない（2026-08-22 オーナー指示）
      「マップで開く」のリンクだけ残す。縦に長くなるのを避けるためと、
      地図3つはそれぞれ Google のプログラムを読み込むのでスマホでは重いため。 */
@media(max-width:900px){
  .maps .map{ display:none }
  .maps{ gap:10px }
  .mapfig figcaption{ margin:0; padding:14px 0; border-bottom:1px solid var(--line) }
  .mapfig:first-child figcaption{ border-top:1px solid var(--line) }
}

/* ㊵ 施工事例：スマホでは1枚だけ見せて折りたたむ（2026-08-22 オーナー指示）
      スマホは1列組みなので、6枚だと縦に長すぎた。
      ⚠️ PCでは折りたたみもボタンも出さない（is-folded の指定はスマホ幅の中にだけ書く）。 */
.works__more{ display:none }
@media(max-width:900px){
  .works.is-folded figure:nth-child(n+2){ display:none }
  .works__more{ display:flex; justify-content:center; margin-top:22px }
  .works__more button{
    font-size:16px; font-weight:500; letter-spacing:.05em; color:var(--main);
    background:#fff; border:1px solid var(--line); border-radius:6px;
    padding:15px 26px; cursor:pointer; width:100%;
  }
}

/* ㊶ お問い合わせフォームのボタン：矢印を外して文字を1段大きく
      （2026-08-22 オーナー指示・スマホのみ。矢印が無いほうが締まって見えるため）
      ⚠️ 電話のボタン（.telbox）には元から矢印は無い。 */
/* 矢印はPC・スマホとも出さない（2026-08-22 オーナー指示で PC もそろえた）*/
.contact .actions .btn::after{ content:none }
@media(max-width:900px){
  .contact .actions .btn{ font-size:24px }
}

/* ㊷ お問い合わせフォームの中の文字を型に合わせる（2026-08-22 オーナー指示・スマホのみ）
      説明文14px／項目名13px／入力欄14px → すべて16px（テキストの段）。
      🔴 入力欄が16px未満だと、iPhoneのSafariはタップ時に画面を勝手に拡大する。
         16pxにしておけばそれが起きない。読みやすさと動作の両方の理由がある。 */
@media(max-width:900px){
  .fmodal__box .cap{ font-size:16px }
  .form label{ font-size:16px }
  .form input, .form textarea{ font-size:16px }
}

/* ㊸ 🔴 お問い合わせフォームが画面より高いとき、上が見切れて戻れなくなる不具合を修正
      （2026-08-22 オーナー報告。フォームの文字を16pxにして高さが増えたことで表面化）

      原因＝オーバーレイが align-items:center（上下中央ぞろえ）だったこと。
      中央ぞろえは、はみ出した分を上下へ均等に押し出す。上へ押し出された部分は
      スクロール範囲の外に出るため、二度と表示できなくなる。flexbox の有名な落とし穴。

      ➡️ 上ぞろえ＋箱に margin-block:auto。
         画面に余裕があるときは中央に来て、足りないときは上端で止まり、
         そこから下へスクロールできる。 */
.fmodal{ align-items:flex-start }
.fmodal__box{ margin-block:auto }
@media(max-width:900px){
  .fmodal{ padding:16px }
  .fmodal__box{ padding:24px 20px 26px }
  .fmodal__box .cap{ margin-bottom:18px }
}

/* ㊹ 下層ページを5段の型に合わせる（2026-08-22 オーナー指示・スマホのみ）
      大見出し32 / 中見出し24 / 小見出し20 / テキスト16 / 注釈14
      ・ページ見出し（h1）48px → 32px
      ・見出し帯のリード（.intro-h）30px → 20px
      ・事業部名 22px → 24px（トップページと同じ「小見出し」扱い）
      ・対応分野の箇条書き 15px → 16px
      ⚠️ 飾り（大きい薄い英字・事業部の番号）と、お問い合わせの電話番号は対象外。 */
@media(max-width:900px){
  .phd h1{ font-size:32px }
  .phd .intro-h{ font-size:20px }
  .dept .dept__name{ font-size:24px }
  /* 小見出しは事業部名より1段下げる。ホームと同じ差（24px と 20px）*/
  .dept .dept__cap{ font-size:20px }
  .dept__list li{ font-size:16px }
}

/* ㊺ 下層ページの見出し帯の斜めも、スマホではグラデーションで作る（2026-08-22 オーナー指示）
      🔴 強みのセクション（㉜）とまったく同じ原因。skewX の横ズレは要素の高さに比例するため、
         縦に長いスマホでは帯（157px）よりズレ（164〜223px）が大きくなり、細い斜め線に化けていた。
         実測：事業内容 105% ／ 技術と実績 105% ／ 採用情報 142%。
      ➡️ 角度をグラデーションで作れば、帯の高さが変わっても角度は一定。 */
@media(max-width:900px){
  .phd::before{
    left:0; top:0; width:100%; height:100%;
    transform:none;
    background:linear-gradient(105deg, var(--slash-a) 0 35%, transparent 35%);
  }
}

/* ㊻ 技術と実績・採用情報も5段の型に合わせる（2026-08-22 オーナー指示・スマホのみ）
      大見出し32 / 中見出し24 / 小見出し20 / テキスト16 / 注釈14

      技術と実績
      ・セクションの小見出し（.sec-sub）30px → 20px

      採用情報
      ・仕事名（.jobs h3：電気工事／フィールド／システム）22px → 20px
      ・見出し帯の3行（.phd__lines）18px → 20px（小見出し扱い。ここだけ上げる）
      ・募集要項の表の項目名（.tbl th）18px → 16px
      ・仕事の説明文（.jobs p）15px → 16px

      ⚠️ 対象外：大きい薄い英字56px／お問い合わせの電話番号40px／著作権表示12px。
         トップページでの判断に合わせている。 */
@media(max-width:900px){
  .sechd .sec-sub{ font-size:20px }
  .jobs h3{ font-size:20px }
  .phd .phd__lines{ font-size:20px }
  .tbl th{ font-size:16px }
  .jobs p{ font-size:16px }
}

/* ㊼ 募集要項の表：スマホで項目欄（紺のベタ）を左に詰める（2026-08-23 オーナー指示）
      実測：表357pxのうち項目欄150px＝42%が紺で塗られていた。左右の余白も22pxずつ。
      ➡️ 幅を約6.2em、左右の余白を12pxに。
         4文字までは1行、5〜6文字（歓迎する経験・給与・諸手当・休日・休暇）は2行で折り返す。
         行間を1.5に詰めて、2行になっても高さが膨らまないようにする。
      ⚠️ PCは9.4emのまま（横に余裕があるので折り返す必要がない）。 */
@media(max-width:900px){
  .tbl--main th{ width:6.2em; padding:16px 12px; line-height:1.5 }
  .tbl--main td{ padding:16px 14px }
}

/* ㊽ 募集要項の項目名：折り返す位置を固定する（2026-08-23 オーナー指示）
      「給与・／諸手当」「休日・／休暇」「歓迎する／経験」で切りたい。
      自動の折り返しに任せると画面幅しだいで「給与・諸／手当」のように切れる。
      ➡️ span を inline-block にすると、span の内側では折り返さず、span と span の間でだけ折れる。
      ⚠️ PCは横に余裕があるので、そのまま1行に並ぶ（改行を強制していないため）。 */
.tbl--main th span{ display:inline-block }

/* ㊾ 薄い水色を全体で一段濃くした（2026-08-23 オーナー判断）
      事業内容セクションだけで試したうえで、--tone2 の定義そのものを差し替え。
      反映先＝セクションの地／会社概要の表の項目欄／フッター／お知らせ行／
              強みの写真帯の上半分／スマホメニューの電話欄。 */