@charset "utf-8";
/* =========================================================
   有限会社エイト流通サービス — 共通スタイル
   文字：14 / 16 / 18 / 22 / 28 / 40 / 56 の7段階のみ
   余白：8の倍数（8 / 16 / 24 / 40 / 64 / 120）
   動き：ホバー／ページ遷移／初回フェード の3つだけ
   色  ：深い青1色 ＋ 錆色のアクセント
   ========================================================= */
:root{
  --ink:#1F2328; --sub:#67727E;
  --brand:#0B4F6C; --deep:#083A50; --accent:#C9531F;
  /* 映像の上に引く印の線の色。白地では2.1:1で読めないので、暗い地の線にだけ使う */
  --hot:#F0F7FE;
  /* 同じサーモンの明るい方。平らな紺より地が明るく揺れる「写真・映像の上」の小さい文字に使う。
     --hot だと実測4.0:1で基準（4.5:1）に届かない。こちらは5.6〜7.2:1 */
  --hot-hi:#FBDACA;
  --paper:#F7F4EF; --line:#DFD9D0; --white:#fff;
  --ease:cubic-bezier(.22,1,.36,1);
  --max:1240px; --head:76px;
  /* 矢印は線画で持つ（絵文字を使わない・色は currentColor が入る） */
  --arrow:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 12'><path d='M0 6h26.5M21.5 1.5 27 6l-5.5 4.5' fill='none' stroke='black' stroke-width='1.4'/></svg>");
  --check:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'><path d='M1 5.6 5 9.6 13 1.4' fill='none' stroke='black' stroke-width='2'/></svg>");
}
/* このサイトは紙の明るい配色1本で作っている。宣言しておかないと、端末の設定で
   ブラウザが勝手に暗く反転させることがある（フォーム部品と選択色が特に崩れる） */
:root{color-scheme:light}
*{margin:0;padding:0;box-sizing:border-box}
/* スマホの二度押し待ち（約300ms）を消し、押した時の灰色の四角も出さない。
   :active の見た目は自前で持っているので、端末側のハイライトは邪魔になる */
a,button,summary,label,input,select,textarea{touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(0,0,0,0)}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  /* ページ内リンクの着地が固定ヘッダー（--head 76px/64px＋線2px）の下に入らないための余白。
     実測：1440pxでヘッダー実高78px→着地10件が66〜78pxかぶっていた（2026-08-25） */
  scroll-padding-top:calc(var(--head) + 14px)}
body{background:var(--white);color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic Medium","游ゴシック Medium","Meiryo",sans-serif;
  font-size:18px;line-height:1.9;letter-spacing:.02em}
img{display:block;max-width:100%;height:auto}
/* 2026-09-09 押しても見た目が変わらなかった（採用ページだけ直っていて共通側が漏れていた） */
.logo:active{transform:scale(.98);opacity:.86}
a{color:inherit}
/* 2026-09-09 地図の iframe はキーボードで入れるのに輪郭が出ていなかった（about の2枚） */
iframe:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ========== ヘッダー（2段・ドロップダウン） ========== */
.head{position:fixed;top:0;left:0;right:0;z-index:90;background:var(--white);
  border-bottom:1px solid var(--line);
  transition:background-color .42s var(--ease),border-color .42s var(--ease)}
.head>*{position:relative;z-index:1}
/* ヒーローに重なっている間だけ、地を消して写真を透かす（上だけ濃くして文字を守る） */
.head::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(to bottom,rgba(4,28,40,.62) 0%,rgba(4,28,40,.28) 62%,rgba(4,28,40,.06) 100%);
  transition:opacity .42s var(--ease)}
.head.on-hero{background:transparent;border-bottom-color:rgba(255,255,255,.22)}
.head.on-hero::before{opacity:1}
.head.on-hero .logo{color:#fff}
.head.on-hero .logo span{color:rgba(255,255,255,.74)}
.head.on-hero .gnav>li>a{color:rgba(255,255,255,.9)}
/* 映像の上では文字は白のまま。印は下線だけ。線は暗い地で見えるサーモン */
.head.on-hero .gnav>li:hover>a,.head.on-hero .gnav>li[aria-current]>a,.head.on-hero .gnav>li:focus-within>a{color:#fff}
.head.on-hero .gnav>li>a::after{background:var(--hot)}
.head.on-hero .mtoggle{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
/* 1段だけの帯にする。電話番号は下（CTA・フッター・右の固定列）に置く。 */
.head .r1{max-width:var(--max);margin:0 auto;height:var(--head);padding:0 40px;
  display:flex;align-items:center;gap:40px}
/* 🚨 min-width:0 が無いとフレックスの子は中身より縮めない。
   文字を大きくされた時（最小フォント24px等）にロゴごと画面外へはみ出す。
   ふだんは全幅収まる。狭くて入らない時だけ…で切れる */
/* padding-block はここ（メディアクエリの外）に置く。スマホ側だけに入れると
   PC幅で押し所が43.2pxのまま残る（2026-08-26 実測・全7ページ） */
.logo{font-size:22px;font-weight:700;color:var(--brand);text-decoration:none;white-space:nowrap;line-height:1.2;
  min-width:0;overflow:hidden;text-overflow:ellipsis;padding-block:4px}
.logo span{display:block;font-size:14px;font-weight:400;color:var(--sub);letter-spacing:.1em;
  overflow:hidden;text-overflow:ellipsis}

.head .r2{margin-left:auto;align-self:stretch}
.head .r2 .in{display:flex;align-items:stretch;height:100%;position:relative}
.gnav{display:flex}
.gnav>li{list-style:none;position:static}
.gnav>li>a{position:relative;display:flex;align-items:center;height:100%;padding:0 20px;font-size:16px;font-weight:700;
  text-decoration:none;color:var(--ink);white-space:nowrap;
  transition:color .2s var(--ease)}
/* 白いヘッダーでは墨→紺。オレンジの文字は使わない（#F0F7FEは白地で2.1:1しかない） */
.gnav>li:hover>a,.gnav>li[aria-current]>a,.gnav>li:focus-within>a{color:var(--brand)}
/* 状態の印はこの線1本だけ。左から引かれ、離れると右へ抜ける。
   今いるページ（aria-current）にも同じ線が付く＝「今ここ」と「今指している」を同じ言葉で示す */
.gnav>li>a::after{content:"";position:absolute;left:20px;right:20px;bottom:0;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:right center;transition:transform .2s var(--ease)}
.gnav>li:hover>a::after,.gnav>li[aria-current]>a::after,.gnav>li:focus-within>a::after{
  transform:scaleX(1);transform-origin:left center;transition:transform .24s var(--ease)}
.gnav>li>a:focus-visible{outline:2px solid currentColor;outline-offset:-12px}

/* 引き出し：濃紺の一枚板。縁を光らせるのはやめ、上辺の白い細線と下への影だけで浮かせる。
   押した親項目の下線が帯の上辺に接するのが、唯一の「ここから開いた」の合図 */
.gnav .drop{position:absolute;top:100%;left:auto;right:0;z-index:60;
  width:min(860px,calc(100vw - 80px));padding:20px 24px;
  background:rgba(8,50,68,.96);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.16);
  box-shadow:0 32px 56px -28px rgba(4,22,32,.6);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility 0s .16s;
  display:flex;align-items:stretch}
/* 開くのは0.26秒、閉じるのは0.16秒。用が済んだ時ほど速く引く */
.gnav>li:hover .drop,.gnav>li:focus-within .drop{opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .26s var(--ease),transform .3s cubic-bezier(.16,1,.3,1),visibility 0s}

/* 中身はヒーローの見出しと同じ「下から上がって着地」。項目ごとに半歩ずつ遅らせる。
   隣の項目へ移った時はこの段差がもう一度走るので、「切り替わった」手応えが出る */
.gnav .drop li{list-style:none;flex:1 1 0;min-width:0;
  opacity:0;transform:translateY(14px);transition:opacity .1s ease-in,transform .1s ease-in}
.gnav>li:hover .drop li,.gnav>li:focus-within .drop li{opacity:1;transform:none;
  transition:opacity .3s ease-out,transform .42s cubic-bezier(.16,1,.3,1)}
.gnav>li:hover .drop li:nth-child(2),.gnav>li:focus-within .drop li:nth-child(2){
  transition-delay:.06s}
.gnav .drop li+li{margin-left:20px;padding-left:21px;border-left:1px solid rgba(255,255,255,.12)}

/* 項目：カーソルへの答えは「面が持ち上がる・矢印が一歩進む・写真がわずかに寄る」。文字には色を付けない */
.gnav .drop a{position:relative;display:flex;align-items:center;gap:16px;padding:12px 14px;
  text-decoration:none;color:#fff;
  transition:background-color .18s var(--ease)}
.gnav .drop a:hover,.gnav .drop a:focus-visible{background:rgba(255,255,255,.07)}
.gnav .drop a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.gnav .drop .im{flex:none;display:block;overflow:hidden;width:104px;aspect-ratio:4/3;background:#08202B;
  box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.gnav .drop .im img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gnav .drop a:hover .im img,.gnav .drop a:focus-visible .im img{transform:scale(1.04)}
.gnav .drop .tx{flex:1 1 auto;min-width:0}
.gnav .drop b{display:block;font-size:15px;font-weight:700;letter-spacing:.04em;line-height:1.5}
.gnav .drop .tx>span{display:block;margin-top:3px;font-size:12px;color:rgba(255,255,255,.62);
  letter-spacing:.02em;line-height:1.7}
/* 矢印はCTAと同じ線画。ふだんは白45%、当てると白100%で右へ6px */
.gnav .drop a::after{content:"";flex:none;width:22px;height:9px;background:rgba(255,255,255,.45);
  -webkit-mask:var(--arrow) no-repeat center/contain;mask:var(--arrow) no-repeat center/contain;
  transition:transform .24s var(--ease),background-color .24s var(--ease)}
.gnav .drop a:hover::after,.gnav .drop a:focus-visible::after{transform:translateX(6px);background:#fff}
@media (prefers-reduced-motion:reduce){
  .gnav .drop{transition:none;transform:none}
  .gnav .drop li,.gnav>li:hover .drop li,.gnav>li:focus-within .drop li{transition:none;transform:none;opacity:1}
  .gnav>li>a::after{transition:none}
}

/* お問い合わせ：ヘッダーで唯一の「塗り」ボタン。錆色が左から0.44秒で塗り替わる（本文の.btnと同じ速さ） */
.hbtn{align-self:stretch;position:relative;display:flex;align-items:center;gap:16px;padding:0 28px 0 32px;
  background:var(--brand);color:#fff;overflow:hidden;isolation:isolate;white-space:nowrap;
  font-size:16px;font-weight:700;text-decoration:none;letter-spacing:.04em}
.hbtn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);
  transform:scaleX(0);transform-origin:left center;transition:transform .44s var(--ease)}
.hbtn:hover::before,.hbtn:focus-visible::before{transform:scaleX(1)}
.hbtn::after{content:"";flex:none;width:26px;height:11px;background:currentColor;
  -webkit-mask:var(--arrow) no-repeat center/contain;mask:var(--arrow) no-repeat center/contain;
  transition:transform .34s var(--ease)}
.hbtn:hover::after,.hbtn:focus-visible::after{transform:translateX(6px)}
.hbtn:focus-visible{outline:2px solid #fff;outline-offset:-6px}
/* ヒーローの上ではガラスにする（写真を透かしたまま押せると分かる） */
.head.on-hero .hbtn{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* スマホ用のメニュー開閉 */
/* 48px固定に「メニュー」4文字を入れていたので2行に折れていた。中身に合わせて広げる。
   🚨 ただし広げっぱなしだと、文字を大きくされた時（最小フォント24px等）に画面外へはみ出す。
   flex:0 1 auto ＋ min-width:48px で「狭い時だけ 48px まで縮む」。あふれた文字は…で切る */
.mtoggle{display:none;margin-left:auto;flex:0 1 auto;width:auto;min-width:48px;height:48px;padding:0 14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid var(--line);background:var(--white);
  color:var(--brand);font-size:14px;font-weight:700;cursor:pointer;border-radius:4px;
  transition:border-color .2s var(--ease)}
.mtoggle:hover{border-color:var(--brand)}
.mtoggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* 画面が狭いとメニューの文字が2行に折れる。折らずに、間を詰めて収める */
@media(min-width:901px) and (max-width:1100px){
  .head .r1{padding:0 24px;gap:24px}
  .gnav>li>a{padding:0 12px;font-size:15px}
  .gnav>li>a::after{left:12px;right:12px}
  .hbtn{padding:0 20px 0 22px;gap:10px;font-size:15px}
  .hbtn::after{width:22px;height:9px}
}

/* ========== 右端の固定クイックアクセス ========== */
/* 2026-09-08 おでん指示：右端に貼り付いて見切れていたので、右に余白を取って浮かせる。
   🚨 right:0 だと角丸も影も画面の外で切れて「見切れている」ように見える */
.quick{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:80;
  display:flex;flex-direction:column;gap:10px}
.quick a{width:104px;min-height:78px;padding:14px 8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--deep);color:#fff;text-decoration:none;text-align:center;
  font-size:14px;font-weight:700;line-height:1.5;
  transition:background-color .16s var(--ease)}
/* 🚨 2026-09-08 .quick a:last-child{border-bottom:0} を削除した。
   1枚の板だった頃に「最後の仕切り線」を消すためのものだったが、
   4つの独立した角丸ボタンにしたので、最後のボタン（法人の電話相談）だけ下辺が消えていた（実測 枠下0px） */
.quick a:hover{background:var(--accent)}
.quick .ico{display:block;width:22px;height:22px;margin:0 auto 4px;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ========== 下層ページの見出し ========== */
.phead{margin-top:var(--head);background:var(--deep);color:#fff;position:relative;overflow:hidden}
.phead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}
.phead .in{position:relative;max-width:var(--max);margin:0 auto;padding:64px 40px}
.phead .en{font-size:14px;letter-spacing:.24em;color:#F0F7FE;font-weight:700}
.phead h1{font-size:40px;font-weight:700;margin-top:8px;letter-spacing:.04em}
.crumb{background:var(--paper);border-bottom:1px solid var(--line);font-size:14px;color:#5A6570}
.crumb .in{max-width:var(--max);margin:0 auto;padding:12px 40px}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--brand);text-decoration:underline}
.crumb span{margin:0 8px}

/* ========== 共通パーツ ========== */
.sec{padding:120px 0}
.sec-paper{background:var(--paper)}
.en{font-size:14px;letter-spacing:.24em;color:var(--accent);font-weight:700}
h2{font-size:40px;font-weight:700;line-height:1.4;letter-spacing:.04em;margin-top:8px}
h3{font-size:28px;font-weight:700;line-height:1.5}
.note{margin-top:24px;color:var(--sub);font-size:16px;max-width:42em}
.next{margin-top:40px}
.next a{display:inline-flex;align-items:center;gap:16px;font-size:18px;font-weight:700;text-decoration:none;
  color:var(--brand);border-bottom:2px solid var(--brand);padding-bottom:8px;
  transition:color .16s var(--ease),border-color .16s var(--ease)}
.next a:hover{color:var(--accent);border-color:var(--accent)}
.next a::after{content:"→"}
/* ボタン：地が左から塗り替わり、矢印が一歩進む。角丸2px・影なし */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:32px;
  min-width:300px;max-width:100%;padding:20px 28px 20px 32px;font-size:18px;font-weight:700;line-height:1.5;
  text-decoration:none;border-radius:2px;letter-spacing:.04em;overflow:hidden;isolation:isolate;
  transition:color .3s var(--ease),box-shadow .3s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;
  transform:scaleX(0);transform-origin:left center;transition:transform .44s var(--ease)}
.btn:hover::before{transform:scaleX(1)}
.btn::after{content:"";flex:none;width:30px;height:12px;background:currentColor;
  -webkit-mask:var(--arrow) no-repeat center/contain;mask:var(--arrow) no-repeat center/contain;
  transition:transform .34s var(--ease)}
.btn:hover::after{transform:translateX(8px)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn-main{background:var(--brand);color:#fff}
.btn-main::before{background:var(--accent)}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.btn-ghost::before{background:#fff}
.btn-ghost:hover{color:var(--brand)}

/* 表（会社概要・拠点） */
.tbl{width:100%;border-collapse:collapse;font-size:16px;margin-top:40px;border-top:1px solid var(--line)}
.tbl th,.tbl td{padding:16px 24px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{width:12em;color:var(--sub);font-weight:400;background:var(--paper)}

/* ========== フッター ========== */
footer{background:var(--deep);color:#fff;padding:64px 0 40px;margin-top:0}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.fgrid h3{font-size:22px;color:#fff}
.fgrid address{font-style:normal;font-size:16px;margin-top:16px;color:#C6D8E2;line-height:1.9}
.fgrid address a{color:#fff;text-decoration:none;font-weight:700;white-space:nowrap}
.fgrid address a:hover{color:#F0F7FE}
.fnav{list-style:none;font-size:16px}
.fnav .t{font-size:14px;letter-spacing:.14em;color:#9FC0CE;margin-bottom:8px}
.fnav li{padding:0}
.fnav a{display:inline-block;padding:13px 0}
.fnav a{text-decoration:none;color:#E4EEF3;border-bottom:1px solid transparent;transition:border-color .16s var(--ease)}
.fnav a:hover{border-bottom-color:#F0F7FE;color:#F0F7FE}
.copy{margin-top:64px;padding-top:24px;border-top:1px solid rgba(255,255,255,.2);font-size:14px;color:#9FC0CE;
  display:flex;gap:24px;flex-wrap:wrap}
.copy a{color:#9FC0CE;text-decoration:none;display:inline-block;padding:12px 2px;margin:-12px -2px}
.copy a:hover{color:#fff}

/* ========== スマホ下部バー ========== */
/* 🚨 2026-09-07におでんの指示で全ページ廃止（浮くUIは置かない）。HTMLからは消えているのに
   CSSだけ残っていて、`.pullback` の中にある同名の3px線（:709）に position:fixed・白地・
   1pxの上罫線・8pxのパディングが漏れて当たっていた。名前が同じなので気づきにくい。
   復活させる時は、この場所ではなく `.pullback .bar` と名前が衝突しない形で書き直すこと。 */

/* 🚨 押した瞬間の手応え。指の端末では :hover が発火しないので、
   :hover しか持たない部品は「押しても何も起きない」ように感じる（2026-08-29 UIチェックで指摘）。
   ホバーの戻り前提ではなく、単独で見て分かる量を書く → [[button-must-react-instantly]] */
.tabs button:active,.quick a:active,.ptop:active,
.backrow a:active,.crumb a:active,.fnav a:active,.next a:active,
.entries a:active,.ctel a:active,.pagenav a:active,.arealist a:active{
  transform:translate(1px,1px);opacity:.82}
/* ※ transition は足さない。既にある色の transition を丸ごと上書きしてしまうため。
   押した瞬間に「即」変わるほうが手応えとしては正しい */

/* ========== 初回フェード（一斉・1回だけ） ========== */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* スマホのメニューが開く動き（transform と opacity だけ）。
   動きを抑える設定の人向けの打ち消しは、ファイル末尾（900pxのブロックより後）にある */
@keyframes menuDrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes menuItem{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ========== スマホ ========== */
@media(max-width:900px){ .quick{display:none} }
@media(max-width:900px){
  :root{--head:64px}
  body{font-size:16px}
  .wrap{padding:0 24px}
  .head .r1{height:64px;padding:0 16px 0 24px;gap:16px}
  .mtoggle{display:block}
  /* 🚨 隠すのはJSが動いた時だけ。素の状態で隠すと、JSが落ちた人はメニューを開けない
     （2026-08-26 Codex指摘・実測で再現） */
  html.js-menu .head .r2{display:none}
  /* 🚨 ここは必ず html.js-menu を付ける。上の行（詳細度 0,3,1）に
     `.head .r2.open`（0,3,0）では負けて display:none のまま＝押しても開かない。
     2026-08-26 UIチェック君が全7ページ・全スマホ幅で再現 */
  html.js-menu .head .r2.open{display:block;position:absolute;top:64px;left:0;right:0;
    background:var(--white);border-top:1px solid var(--line);
    box-shadow:0 18px 40px -24px rgba(8,58,80,.5);
    max-height:calc(100dvh - 64px - 72px);overflow-y:auto;-webkit-overflow-scrolling:touch;
    /* 開く手応え。ヒーローと同じ expo-out 系で上から着地（display切替なので animation で） */
    animation:menuDrop .3s cubic-bezier(.16,1,.3,1)}
  .head .r2.open .in{flex-direction:column;height:auto;padding:0}
  /* 項目はヒーローの見出しと同じ「下から上がって着地」を半歩ずつ */
  .head .r2.open .gnav>li{animation:menuItem .38s cubic-bezier(.16,1,.3,1) backwards}
  .head .r2.open .gnav>li:nth-child(2){animation-delay:.04s}
  .head .r2.open .gnav>li:nth-child(3){animation-delay:.08s}
  .head .r2.open .gnav>li:nth-child(4){animation-delay:.12s}
  .head .r2.open .hbtn{animation:menuItem .38s cubic-bezier(.16,1,.3,1) .16s backwards}
  /* スマホでは大きい項目だけ出す。中の枝は各ページの上の帯から行ける */
  .head .r2.open .drop{display:none}
  .head .r2.open .gnav>li>a{min-height:60px;font-size:18px;display:flex;align-items:center}
  .head .r2.open .hbtn{min-height:64px;font-size:18px}
  .head.on-hero .r2.open .gnav>li>a{color:var(--ink)}
  /* 開いたメニューの地は白。サーモンの線は白地で薄いので錆色に戻す */
  .head.on-hero .r2.open .gnav>li>a::after{background:var(--accent)}
  .head.on-hero .r2.open .hbtn{background:var(--brand);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .head .r2.open .gnav{flex-direction:column;width:100%}
  .head .r2.open .gnav>li>a{height:auto;padding:16px 24px;border-bottom:1px solid var(--line)}
  .head .r2.open .hbtn{padding:16px 24px;justify-content:center}
  .sec{padding:64px 0}
  h2{font-size:28px}
  h3{font-size:22px}
  .phead .in{padding:40px 24px}
  .phead h1{font-size:28px}
  .crumb .in{padding:12px 24px}
  .tbl th,.tbl td{display:block;width:auto;padding:8px 16px}
  .tbl th{border-bottom:0}
  .fgrid{grid-template-columns:1fr;gap:24px}
  /* 🚨 下部固定バーは2026-09-07に全ページ廃止（浮くUIは置かない）。
     そのバーのための席（body 96px＋footer 104px＝188px＝画面の22%）だけが残り、
     スマホの全ページ末尾に白い空白として出ていた（2026-09-10 実測・8頁中7頁で188px）。
     実機のiPhoneの safe-area とブラウザの帯ぶんだけを、暗いフッタの内側に残す
     （bodyの下パディングだと紙色の帯が伸びて見える） */
  footer{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
  .btn{width:100%;text-align:center}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}
}

/* ========== 印刷 ========== */
@media print{
  /* .ptop は「出ている状態」で印刷すると紙に丸いボタンが載る（2026-08-26 実測）。
     .pullback / .env / .grain / .prog も画面用の装飾なので紙には出さない */
  .head,.bar,.quick,.next,.btn,.phead img,.ptop,.pullback,.env,.grain,.prog{display:none!important}
  body{font-size:13px;color:#000;background:#fff}
  .sec{padding:16px 0;animation:none}
  .phead,footer{background:#fff!important;color:#000!important;print-color-adjust:exact}
  .phead h1,.fgrid h3,.fgrid address,.fnav a{color:#000!important}
  *{border-color:#000!important}
}

/* =========================================================
   動き（transform と opacity だけ。他は動かさない）
   ========================================================= */
/* 既定は「見える」。JSが動いた時だけ隠して、スクロールで出す。
   こうしないと JS が止まった環境でページが真っ白になる */
[data-rise]{opacity:1;transform:none}
.js-rise [data-rise]{opacity:0;transform:translateY(16px);will-change:transform,opacity;
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js-rise [data-rise].is-in{opacity:1;transform:none}

/* ヒーローのゆっくりズーム */
@keyframes slowzoom{from{transform:scale(1)}to{transform:scale(1.06)}}
.hero>img{animation:slowzoom 20s ease-out both}
@media(prefers-reduced-motion:reduce){
  .hero>img{animation:none}
  .js-rise [data-rise]{opacity:1!important;transform:none!important}
}

/* =========================================================
   ここから：作り込みの共通パーツ
   （下層ページのボタン式ナビ／理念／運んだ先／共通CTA）
   ========================================================= */

/* ---- 下層の第2階層ナビ（パンくずの下に置く・今どこかが分かる） ---- */
.subnav{background:var(--white);border-bottom:1px solid var(--line)}
.subnav .in{max-width:var(--max);margin:0 auto;padding:0 40px;display:flex;flex-wrap:wrap}
.subnav a{position:relative;padding:20px 28px;font-size:16px;font-weight:700;text-decoration:none;
  color:var(--sub);border-bottom:3px solid transparent;
  transition:color .16s var(--ease),border-color .16s var(--ease)}
.subnav a:first-child{padding-left:0}
.subnav a:hover{color:var(--brand)}
.subnav a[aria-current]{color:var(--brand);border-bottom-color:var(--accent)}

/* ---- 理念（ページの山場。文字は増やさず、地と余白で見せる） ---- */
.vision{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vision .in{max-width:var(--max);margin:0 auto;padding:160px 40px}
.vision .en{text-align:center}
.vcopy{margin:48px auto 0;text-align:center;
  font-family:"Hiragino Mincho ProN","Yu Mincho","游明朝","YuMincho",serif;
  font-size:56px;font-weight:600;line-height:1.95;letter-spacing:.14em;color:var(--brand)}
/* 一番言いたい所だけ、下半分に色を敷く（線を引くより静かで、はっきり出る） */
.vcopy b{font-weight:600;white-space:nowrap;
  background:linear-gradient(transparent 48%,rgba(240,165,133,.34) 48%,rgba(240,165,133,.34) 84%,transparent 84%);
  padding:0 .08em}
/* 3分割：上の言葉から線が降りてくる */
.vparts{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:64px}
.vpart{position:relative;padding-top:64px;text-align:center}
.vpart::before{content:"";position:absolute;left:50%;top:0;width:1px;height:40px;background:var(--line)}
.vpart::after{content:"";position:absolute;left:50%;top:40px;width:9px;height:9px;margin-left:-4px;
  border-radius:50%;background:var(--accent)}
.vpart h3{font-family:"Hiragino Mincho ProN","Yu Mincho","游明朝",serif;
  font-size:28px;color:var(--brand);letter-spacing:.1em}
.vpart p{margin-top:16px;font-size:16px;color:var(--ink);text-align:left}
.vpart .f{margin-top:16px;font-size:14px;color:var(--sub);letter-spacing:.06em;text-align:left;
  border-top:1px solid var(--line);padding-top:16px}

/* ---- 運んだ先（写真＋その場面の一言。作業名を書かない） ---- */
.after{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:64px}

/* ---- フッター前の共通CTA（どのページでも同じ位置・同じ形） ---- */
.cta{background:var(--deep);color:#fff;position:relative;overflow:hidden}
.cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2}
.cta .in{position:relative;max-width:var(--max);margin:0 auto;padding:80px 40px;
  display:grid;grid-template-columns:1fr auto;gap:64px;align-items:center}
.cta .en{color:#F0F7FE}
.cta h2{font-size:40px}
.cta .lead{margin-top:16px;font-size:16px;color:#CBDDE6;max-width:38em}
.ctel{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}
.ctel a{display:block;text-decoration:none;border-top:1px solid rgba(255,255,255,.28);padding-top:12px}
.ctel .n{font-size:14px;letter-spacing:.14em;color:#9FC0CE}
.ctel .t{font-size:28px;font-weight:700;color:#fff;white-space:nowrap;letter-spacing:.02em;
  transition:color .16s var(--ease)}
.ctel a:hover .t{color:#F0F7FE}
.ctel .h{font-size:14px;color:#9FC0CE}
/* 🚨 min-width:320px（と中の .btn の300px）を素で持つと、901〜908pxの帯だけ
   入りきらず横に振れる（2026-08-26 実測 recruit で901px時 +5px）。
   解除を @media(max-width:900px) に置いていたので、その隙間が空いていた。
   min() は「100%＝格子の桁幅」なので効かない。桁が狭い時だけ自分から縮むよう、
   min-width を素で0にし、広い時の見た目は width で確保する */
.cta .side{display:grid;gap:16px;min-width:0;width:min(320px,100%)}
.cta .side .btn{min-width:0}

/* ---- 前後のページへ ---- */
.pagenav{border-top:1px solid var(--line);background:var(--white)}
.pagenav .in{max-width:var(--max);margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1fr 1fr}
.pagenav a{padding:40px 0;text-decoration:none;transition:color .16s var(--ease)}
.pagenav a:last-child{text-align:right;border-left:1px solid var(--line);padding-left:40px}
.pagenav a:first-child{padding-right:40px}
.pagenav .k{font-size:14px;letter-spacing:.14em;color:var(--sub)}
.pagenav .t{font-size:22px;font-weight:700;color:var(--brand);margin-top:4px}
.pagenav a:hover .t{color:var(--accent)}

/* ---- 数字（カウントアップ用。桁で幅が揺れないように） ---- */
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

@media(max-width:900px){
  /* 🚨 横スクロールにすると、合図が無いので隠れた項目に気づけない。
     about は8項目中3項目しか見えず、沿革・許認可・対応エリア・倉庫拠点に到達できなかった
     （2026-08-26 実測・中身878pxに対し見える幅390px）。折り返して全部見せる。
     文字の左端は本文と同じ24px（.in の16px ＋ a の8px）に揃える */
  .subnav .in{padding:8px 16px;flex-wrap:wrap;overflow-x:visible}
  .subnav a{padding:10px 8px;white-space:nowrap;font-size:16px}  /* 14px→16px（PCと同じ。2026-09-10） */
  .subnav a:first-child{padding-left:8px}
  .vision .in{padding:72px 24px}
  .vcopy{font-size:28px;line-height:2;margin-top:24px}
  .vparts{grid-template-columns:1fr;gap:32px;margin-top:40px}
  .vpart{padding-top:48px}
  .vpart::before{height:28px}
  .vpart::after{top:28px}
  .after{grid-template-columns:1fr;gap:4px;margin-top:40px}
  .cta .in{grid-template-columns:1fr;gap:32px;padding:56px 24px}
  .cta h2{font-size:28px}
  .ctel{grid-template-columns:1fr;gap:16px}
  .cta .side{min-width:0}
  .pagenav .in{grid-template-columns:1fr;padding:0 24px}
  .pagenav a:last-child{text-align:left;border-left:0;border-top:1px solid var(--line);padding-left:0}
  .pagenav a:first-child{padding-right:0}
}

/* ---- カーソルを当てた写真は、少しだけ浮き上がる ----
   影は最小限（黒ではなく紺を薄く）。transform と opacity だけを動かす。 */

/* ---- 320px級の狭い端末（iPhone SEなど）で横にはみ出さない ---- */
@media(max-width:360px){
  .btn{min-width:0;width:100%;gap:16px;padding:18px 20px 18px 22px;font-size:17px}
  /* 🚨 320pxでは社名が「エイト流通サー…」、釦が「メニ...」で切れていた（2026-08-26 実測）。
     会社名を読めることを最優先に、創業年の行を落として字を詰める（創業年はヒーローに出ている） */
  .head .r1{padding:0 12px 0 16px;gap:8px}
  .logo{font-size:19px;padding-block:11px}   /* 創業年の行を落とすと23pxになるので、押し所を45pxまで戻す */
  .logo span{display:none}
  .mtoggle{padding:0 8px;font-size:13px}
  /* 下部バーが2〜3行に折れて高さ114px（画面の16%）を占め、3つの釦の背丈も揃っていなかった。
     行の高さで中央に置くのをやめ、flexで縦中央にすると、折れても高さが揃う */
  .bar{padding:6px 6px calc(6px + env(safe-area-inset-bottom));gap:6px}
  .bar a{font-size:13px;line-height:1.2;letter-spacing:0;padding:0 2px;
    display:flex;align-items:center;justify-content:center}
}

/* ---- 採用の帯（下層ページの終わりに置く） ----
   この会社の一番の困りごとは採用。どのページを読み終えても採用に行けるようにする。
   色は採用ページの給与帯と同じテラコッタにして、行き先が同じだと分かるようにしてある */
.rband{background:var(--accent);color:#FFF7EA}
.rband .in{max-width:var(--max);margin:0 auto;padding:48px 40px;display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.rband .k{font-size:14px;letter-spacing:.2em;font-weight:700;color:#FFF7EA}
.rband h3{font-size:28px;margin-top:6px;color:#FFF7EA}
.rband p{font-size:16px;margin-top:10px;max-width:44em;color:#FFEADC;line-height:1.9}
.rband .go{margin-left:auto;flex:none}
@media(max-width:900px){
  .rband .in{padding:32px 24px;gap:20px}
  .rband h3{font-size:22px}
  .rband p{font-size:15px}
  .rband .go{margin-left:0;width:100%}
}

/* ---- 写真だけの帯（文字を置かない。仕事の空気だけ渡す） ---- */
/* 場面の切り替わり：横に長い1枚。高さは抑える。時刻と場所だけ小さく置く */
.band{position:relative;overflow:hidden;background:var(--deep);height:380px}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease)}
.band:hover img{transform:scale(1.03)}
/* 人が立っている写真は、横長に切ると頭が落ちる。上寄りで切る */
.band.up img{object-position:center 28%}
@media(max-width:900px){
  .band{height:220px}
}

/* ---- 本文の中に置く1枚（帯と違って切らない。人の向きが意味を持つ写真用） ---- */
.shot{margin:44px 0 8px}
.shot img{display:block;width:100%;height:auto;background:var(--deep)}
.shot figcaption{margin-top:14px;color:var(--sub);font-size:15px;letter-spacing:.02em}
@media(max-width:900px){
  .shot{margin:32px 0 4px}
  .shot figcaption{font-size:14px}
}

/* ---- 量販店 → 私たち → お客様宅（どこまで受け持つか） ---- */
.route{display:flex;align-items:stretch;margin-top:64px;flex-wrap:wrap;gap:32px}
.route .cell{flex:1;min-width:230px;background:var(--white);border:1px solid var(--line);padding:32px;position:relative}
.route .cell+.cell::before{content:"";position:absolute;left:-24px;top:50%;transform:translateY(-50%);
  width:0;height:0;border-left:12px solid var(--accent);
  border-top:9px solid transparent;border-bottom:9px solid transparent}
.route .mid{flex:1.6;background:var(--brand);color:#fff;border-color:var(--brand)}
.route .k{font-size:14px;letter-spacing:.16em;color:var(--sub)}
.route .mid .k{color:#A8C6D4}
.route h3{font-size:22px;margin-top:8px}
.route ul{list-style:none;margin-top:16px;font-size:16px}
.route li{padding:6px 0 6px 24px;position:relative}
.route li::before{content:"";position:absolute;left:0;top:17px;width:12px;height:1px;background:currentColor;opacity:.55}
.route .cell>p:last-child{margin-top:16px;font-size:14px;color:var(--sub)}
.route .mid>p:last-child{color:#A8C6D4}

/* ---- 書道の三文字 ---- */
.shodo{display:grid;grid-template-columns:repeat(3,1fr);gap:64px;margin-top:64px}
.shodo figure{display:flex;flex-direction:column}
.shodo img{width:100%;max-width:230px;height:auto;margin:0 auto}
.shodo figcaption{margin-top:32px;font-size:18px;line-height:1.9;border-top:1px solid var(--line);padding-top:24px}
.shodo .r{display:block;font-size:14px;color:var(--sub);letter-spacing:.14em;margin-bottom:8px}

/* ---- 事実を大きく並べる ---- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:64px}
.facts div{background:var(--white);padding:32px}
.facts dt{font-size:14px;letter-spacing:.14em;color:var(--sub)}
.facts dd{font-size:40px;font-weight:700;color:var(--brand);line-height:1.2;margin-top:8px;letter-spacing:.02em}
.facts dd small{font-size:16px;font-weight:400;color:var(--ink);margin-left:4px}
.facts .d{display:block;font-size:14px;color:var(--sub);margin-top:8px;line-height:1.7;font-weight:400;letter-spacing:0}

@media(max-width:900px){
  .route{gap:24px;margin-top:40px}
  .route .cell,.route .mid{flex:auto;width:100%;min-width:0;padding:24px}
  .route .cell+.cell::before{left:50%;top:-18px;transform:translateX(-50%);
    border-left:9px solid transparent;border-right:9px solid transparent;
    border-top:12px solid var(--accent);border-bottom:0}
  .shodo{grid-template-columns:1fr;gap:40px;margin-top:40px}
  .shodo img{max-width:180px}
  .shodo figcaption{margin-top:20px;padding-top:16px;font-size:16px}
  .facts{grid-template-columns:1fr 1fr;margin-top:40px}
  .facts div{padding:24px}
  .facts dd{font-size:28px}
}

/* ---- 帰りの道：ページ上部へ戻る（スクロールしたら出る） ---- */
.ptop{position:fixed;right:24px;bottom:24px;z-index:85;width:56px;height:56px;border-radius:2px;
  background:var(--deep);color:#fff;display:flex;align-items:center;justify-content:center;
  text-decoration:none;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s,background-color .16s var(--ease)}
.ptop.on{opacity:1;visibility:visible;transform:none}
.ptop:hover{background:var(--accent)}
.ptop::before{content:"";width:13px;height:13px;border-left:2px solid #fff;border-top:2px solid #fff;
  transform:rotate(45deg);margin-top:4px}
.ptop span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- 帰りの道：フッター直前の一本道 ---- */
.backrow{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.backrow .in{max-width:var(--max);margin:0 auto;padding:24px 40px;display:flex;align-items:center;
  gap:32px;flex-wrap:wrap;font-size:16px}
.backrow a{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-weight:700;
  color:var(--brand);transition:color .16s var(--ease)}
.backrow a:hover{color:var(--accent)}
.backrow a::before{content:"";width:26px;height:11px;background:currentColor;flex:none;
  -webkit-mask:var(--arrow) no-repeat center/contain;mask:var(--arrow) no-repeat center/contain;
  transform:scaleX(-1)}
.backrow .r{margin-left:auto;color:var(--sub);font-weight:400}

@media(max-width:900px){
  .ptop{right:16px;bottom:104px;width:44px;height:44px;background:rgba(8,58,80,.82);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  /* 🚨 2026-09-09 recruit だけリンクが2つあり、折り返すと当たり判定が8px重なっていた。
     .crumb a,.backrow a の `margin:-12px -4px`（縦24px）が gap:16px を食う（16−24=−8）。
     字は重ならないので見た目では分からず、下端を押すと別のリンクへ飛んでいた（幅320〜355で再現） */
  .backrow .in{padding:20px 24px;column-gap:16px;row-gap:36px}
  .backrow .r{margin-left:0;width:100%;font-size:14px}
  /* 下層はホームへ戻る口を下のバーにも出す */
  .bar .b0{flex:0 0 92px;background:var(--white);color:var(--brand);box-shadow:inset 0 0 0 1px var(--line)}
  /* トップは「ホーム」が要らないぶん3つを等分する。92px固定のままだと
     「お問い合わせ」が2行に折れて釦の背丈が揃わない（2026-08-29 実測） */
  .bar .b0.wide{flex:1 1 0}
}

/* ---- ヒーローの下で、はじめに2つに分ける ---- */
.entries{display:grid;grid-template-columns:1fr 1fr;background:var(--line);gap:1px}
.entries a{position:relative;display:block;background:var(--white);padding:40px 56px 40px 40px;
  text-decoration:none;overflow:hidden;isolation:isolate;transition:color .3s var(--ease)}
.entries a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--brand);
  transform:scaleX(0);transform-origin:left center;transition:transform .44s var(--ease)}
.entries a:hover::before{transform:scaleX(1)}
.entries a:hover{color:#fff}
.entries a::after{content:"";position:absolute;right:40px;top:50%;margin-top:-6px;width:30px;height:12px;
  background:currentColor;-webkit-mask:var(--arrow) no-repeat center/contain;mask:var(--arrow) no-repeat center/contain;
  transition:transform .34s var(--ease)}
.entries a:hover::after{transform:translateX(8px)}
.entries .k{font-size:14px;letter-spacing:.24em;color:var(--accent);font-weight:700}
.entries a:hover .k{color:#F0F7FE}
.entries b{display:block;font-size:28px;margin-top:8px;letter-spacing:.04em}
.entries .s{display:block;font-size:16px;margin-top:8px;color:var(--sub)}
.entries a:hover .s{color:#CBDDE6}
@media(max-width:900px){
  .entries{grid-template-columns:1fr}
  .entries a{padding:24px 48px 24px 24px}
  .entries b{font-size:22px}
  .entries a::after{right:24px}
}
/* 問い合わせページでは下部バーを出さない（フォームと二重になる） */
body.form-page .bar{display:none}
body.form-page{padding-bottom:0}

/* =========================================================
   現れ方に「向き」を持たせる
   上・下・左・右・奥（手前に出る）・180度反転 の6種類。
   動かすのは transform と opacity だけ。
   ========================================================= */
/* 🚨 隠すのは html.js-rise（JSが動いた印）が付いた時だけ。素の [data-in]{opacity:0} にすると
   JSが止まった環境で要素が消えたままになる（現在7ページで使用0件だが、将来使った時の事故を防ぐ）。
   隠す側と見せる側は必ず同じ html.js-rise 始まりで書く＝詳細度をそろえる */
html.js-rise [data-in]{opacity:0;will-change:transform,opacity;
  transition:opacity .72s var(--ease),transform .72s var(--ease)}
html.js-rise [data-in="up"]{transform:translate3d(0,28px,0)}
html.js-rise [data-in="down"]{transform:translate3d(0,-28px,0)}
html.js-rise [data-in="left"]{transform:translate3d(-48px,0,0)}
html.js-rise [data-in="right"]{transform:translate3d(48px,0,0)}
html.js-rise [data-in="depth"]{transform:scale(.93)}
html.js-rise [data-in="flip"]{transform:perspective(1000px) rotateY(-180deg);transition-duration:1.1s}
html.js-rise [data-in="flipx"]{transform:perspective(1000px) rotateX(-180deg);transition-duration:1.1s}
html.js-rise [data-in].is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  [data-in]{opacity:1!important;transform:none!important;transition:none!important}
}

/* =========================================================
   ページ全体を「一つの場所」にする
   後ろに1枚だけ環境の層を敷き、セクションごとに色をずらす。
   スクロールが「積み重なった箱を通り過ぎる」ではなく
   「一つの場所の中を進んでいる」感じになる。
   ========================================================= */
.env{position:fixed;inset:0;z-index:-2;pointer-events:none;background:var(--canvas,#F7F4EF);
  transition:background-color 1.2s var(--ease)}
.env::before{content:"";position:absolute;inset:-20%;
  background:radial-gradient(ellipse 60% 50% at 30% 30%,rgba(11,79,108,.07),rgba(11,79,108,0) 70%),
             radial-gradient(ellipse 55% 45% at 78% 68%,rgba(201,83,31,.05),rgba(201,83,31,0) 70%);
  animation:envdrift 90s ease-in-out infinite alternate;animation-delay:-24s}
@keyframes envdrift{from{transform:translate3d(-2%,-1.5%,0) scale(1)}to{transform:translate3d(2%,1.5%,0) scale(1.06)}}
/* ざらつき。紙の粒。ごく薄く */
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>")}
@media(prefers-reduced-motion:reduce){ .env::before{animation:none} }

/* 上端の細い進み具合の線 */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:99;pointer-events:none;
  transform-origin:left center;transform:scaleX(0);background:var(--accent);opacity:.9}

/* 下へ動かすとヘッダーが引っ込み、上へ動かすと戻る */
.head{transform:translateY(0);transition:background-color .42s var(--ease),border-color .42s var(--ease),transform .42s var(--ease)}
.head.tucked{transform:translateY(-104%)}

/* 一つだけ置く「自分でやってみる」場所：搬入経路をたしかめる */
@media(max-width:900px){
}

/* ---- 一番上でさらに上へ引くと、トップの映像に戻れる ---- */
.pullback{position:fixed;top:0;left:0;right:0;z-index:96;pointer-events:none;
  display:flex;align-items:center;justify-content:center;gap:16px;
  height:0;overflow:hidden;background:var(--deep);color:#fff;
  font-size:16px;font-weight:700;letter-spacing:.08em;
  transition:height .28s var(--ease)}
.pullback.on{height:72px}
.pullback::before{content:"";width:26px;height:11px;background:currentColor;
  -webkit-mask:var(--arrow) no-repeat center/contain;mask:var(--arrow) no-repeat center/contain;
  transform:rotate(-90deg)}
.pullback .pbline{position:absolute;left:0;bottom:0;height:3px;background:var(--accent);
  width:0}
@media(prefers-reduced-motion:reduce){ .pullback{display:none} }

/* ========== 対応エリアの地図（実地形。国土のGeoJSONから起こしたもの） ========== */
.jmap{width:100%;height:auto;display:block;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic Medium","游ゴシック Medium","Meiryo",sans-serif}
.mSea{fill:#E6EDF1}
.mNear{fill:#DCE3E5;stroke:#CFD9DD;stroke-width:1;stroke-linejoin:round}
.mCover{fill:#FBF8F3;stroke:var(--brand);stroke-width:1.5;stroke-linejoin:round}
.mCoverT{fill:var(--brand);font-size:33px;font-weight:700;letter-spacing:.16em;text-anchor:middle}
.mBay{fill:#8FA7B3;font-size:23px;letter-spacing:.24em;text-anchor:middle}
.mLead{stroke:var(--accent);stroke-width:1.1}
.mHalo{fill:var(--accent);opacity:.13}
.mRing{fill:none;stroke:var(--accent);stroke-width:1.4}
.mDot{fill:var(--accent)}
/* 文字は地の色で縁取ってから塗る。海にも陸にも乗せられる */
.mPinT{fill:var(--ink);font-size:29px;font-weight:700;letter-spacing:.06em;
  paint-order:stroke;stroke:#FBF8F3;stroke-width:6px;stroke-linejoin:round}
.mPinS{fill:var(--sub);font-size:21px;letter-spacing:.04em;
  paint-order:stroke;stroke:#FBF8F3;stroke-width:5px;stroke-linejoin:round}

/* 画面に入ったら、4県が順に灯る → 拠点が置かれる */
/* 🚨 隠すのは js-rise が付いた時だけ。付けずに隠すと、JSが落ちた時に
   1都3県の塗りも県名も拠点も東京湾も消えて、灰色の塊だけが残る（2026-08-25 検品で発見） */
html.js-rise [data-rise] .mCover{opacity:0;transition:opacity .8s var(--ease)}
html.js-rise [data-rise] .mCoverT{opacity:0;transition:opacity .7s var(--ease)}
html.js-rise [data-rise] .mPin{opacity:0;transition:opacity .7s var(--ease)}
html.js-rise [data-rise] .mBay{opacity:0;transition:opacity .7s var(--ease)}
/* 🚨 隠す側と見せる側は必ず同じ形で書く。片方だけ html.js-rise を足すと
   詳細度で隠す側が勝ち、JSが動いている全員に見えなくなる（2026-08-25 私がやらかした） */
html.js-rise [data-rise].is-in .mCover{opacity:1;transition-delay:calc(var(--i,0)*.11s)}
html.js-rise [data-rise].is-in .mCoverT{opacity:1;transition-delay:calc(.2s + var(--i,0)*.11s)}
html.js-rise [data-rise].is-in .mBay{opacity:1;transition-delay:.6s}
html.js-rise [data-rise].is-in .mPin{opacity:1;transition-delay:.72s}
html.js-rise [data-rise].is-in .mPin:last-of-type{transition-delay:.86s}
@media (prefers-reduced-motion:reduce){
  html.js-rise [data-rise] .mCover,html.js-rise [data-rise] .mCoverT,html.js-rise [data-rise] .mPin,html.js-rise [data-rise] .mBay{opacity:1;transition:none}
}
@media(max-width:900px){
  .mCoverT{font-size:40px}
  .mPinT{font-size:36px}
  .mPinS{font-size:26px}
  .mBay{font-size:28px}
}

/* ========== 押し所の大きさ（指で押せる 44px を下回らせない） ==========
   実測で 14〜31px の押し所が各ページにあった。特にスマホの電話番号が16px で押しにくかった。
   見た目は変えず、押せる範囲だけを広げる。 */

/* 本文の中の電話番号。文字の大きさは変えず、上下に押せる余白を足す */
/* 本文の中の電話番号だけ、押せる余白を足す。
   ボタン・カード・帯の中の電話は、それぞれの見た目が既にあるので触らない */
/* 🚨 下の打ち消し（.bar / .quick）は、この :not() の鎖より詳細度が低くて負ける。
   （こちら 0,5,3 ／ `.bar a[href^="tel:"]` は 0,2,1）。打ち消す側を強くするのではなく、
   最初から下部バーと右端ナビを除く。除かないと電話だけ24px背が高くなり、
   下部バーの3つの釦がガタガタになる（2026-08-26 実測 74px vs 50px） */
/* 🚨 2026-08-29 実測：下線を border-bottom で引くと、押し所の余白12pxぶん下にずれる。
   文が折り返す所（表のセル・注記）では、その線が次の行の文字を打ち消し線のように貫く。
   フッターだけ「border-bottom:0」で打ち消していたが、打ち消しでは他の場所が直らない。
   元の指定側を text-decoration に変えて、線が必ず文字の直下に来るようにする。
   → [[css-hide-rule-beats-show-rule]]（打ち消しで直さない） */
a[href^="tel:"]:not(.btn):not(.tel):not(.ctel a):not(.phones a):not(.bar a):not(.quick a){
  display:inline-block;padding:12px 2px;margin:-12px -2px;border-bottom:0;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* 余白は上の :not() で既に付かないので、ここで padding を書かない。
   書くと .bar a / .quick a 自身の余白まで消して、電話だけ背が低くなる（実測 47px vs 80px） */
/* 🚨 2026-09-08 ここから border-bottom:0 を外した。
   属性セレクタのぶん詳細度が高く、後ろで .quick a / .bar a に付けた枠線の「下辺だけ」を消してしまう。
   電話のボタンだけ下の線が無い状態になっていた（角丸ボタンにしたことで見えるようになった）。
   下線を消す目的は、上の :not(.bar a):not(.quick a) で既に果たしている */
.bar a[href^="tel:"],.quick a[href^="tel:"]{margin:0}
/* ボタンは .btn の見た目のまま。押し所も .btn の padding で44pxを満たす */
.btn[href^="tel:"]{margin:0;border-bottom:0}
/* フッターの番号は白い太字で既に押せると分かる。下線は負のマージンで次の行に重なり、
   隣の番号を打ち消し線のように貫く。押し所の余白は残したいので、下線だけ消す。
   🚨 2026-08-29 実測：:not が4つでは (0,5,5) で、上の (0,7,5) に負けていて効いていなかった。
   幅390pxで「FAX 048-423-2365」が打ち消し線で貫かれていた。上と同じ6つ並べて (0,7,7) にする。
   → [[css-hide-rule-beats-show-rule]] */
footer address a[href^="tel:"]:not(.btn):not(.tel):not(.ctel a):not(.phones a):not(.bar a):not(.quick a){border-bottom:0;text-decoration:none}
/* 番号の途中で折らない（048-229- / 7728 と割れて廃止番号に見える） */
.nw{white-space:nowrap}


/* パンくずと「トップページへ戻る」 */
.crumb a,.backrow a{display:inline-block;padding:12px 4px;margin:-12px -4px}
/* 2026-09-09 privacy の本文中のリンクだけ、この当たり判定の一覧から漏れていて 70×16px だった */
.wrap.pv p a,.pv p a{display:inline-block;padding:11px 3px;margin:-11px -3px}

/* 本文中の「◯◯を見る」の細いリンク */
.next a{display:inline-flex;align-items:center;min-height:44px}

/* ヒーローの中のボタン（スマホで31pxだった） */
@media(max-width:900px){
  .hband .go .btn{min-height:44px;padding:10px 16px 10px 0}
}

/* 答えの中・同意欄の中の細いリンクも押せる大きさにする */
.faq .a a,.agree a,.pcond a,.formprep a{display:inline-block;padding:11px 3px;margin:-11px -3px}

/* 箇条書きの中の細いリンク */
.pts a,.why a:not(.btn),.srv li a{display:inline-block;padding:11px 3px;margin:-11px -3px}

h1,h2,h3{text-wrap:balance}

/* CTAの電話。ひとかたまりずつ改行する。
   採用ページだけページ内CSSで block にしてあり、他のページで
   「浦安本社047-381-0142受付 8:00〜17:00」と3行に折り返して数字に食い込んでいた */
.ctel .n,.ctel .t,.ctel .h{display:block}
.ctel .t,.ctel .h{white-space:nowrap}
.ctel a{display:block}

/* =========================================================
   PXスキン — 案2ヒーロー（ドット絵・昼の光）に全ページの雰囲気を合わせる
   - 色：紙とインクとテラコッタ（ヒーローのパレットと同じ土色）
   - 格子：余白・線・影は4pxまたは8pxの倍数
   - 角丸を使わない。影は「右下へ1段ずらしたベタ」
   - 動きはコマ刻み（steps）。なめらかな曲線は使わない
   ========================================================= */
:root{
  --ink:#2A2430; --ink-deep:#1A141E; --sub:#6A5D4D;
  --brand:#35505C; --deep:#221D28;
  /* --accent はテラコッタを一段濃く。#C0603A だと紙（--paper #EFE6D2）の上の小さい
     ラベル字が実測3.40:1で基準（4.5:1）未満。#9C4A28 は最悪地でも4.94:1。
     ヒーローの装飾（ドットの粒・ボタン地 #C0603A/#93401D）はそのまま＝雰囲気は変えない */
  --accent:#9C4A28; --hot:#F2C594; --hot-hi:#F2C594;
  --paper:#EFE6D2; --line:#D9CDB4; --white:#FAF5E7;
  /* 🚨 2026-08-26 おでん指示「カクカクしすぎて重いのかなって思う／表示の仕方とかはいいけど滑らかにして」。
     見た目（紙色・2px墨線・角なし・ずらし影）はそのまま、動きだけ滑らかに戻す。
     実測では 120fps・コマ落ち0 で重くはなく、steps() のコマ刻みがそう見えていた */
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:rgba(26,20,30,.35); --shadow-soft:rgba(26,20,30,.16);
  --serif:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","Noto Serif JP",serif;
  /* 矢印もチェックもドットの階段で */
  --arrow:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 12'><path d='M0 5h22v2H0zM20 3h2v2h-2zM22 4h2v2h-2zM24 5h2v2h-2zM22 6h2v2h-2zM20 7h2v2h-2z' fill='black'/></svg>");
  --check:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'><path d='M1 5h2v2H1zM3 7h2v2H3zM5 5h2v2H5zM7 3h2v2H7zM9 1h2v2H9z' fill='black'/></svg>");
}
body{background:var(--white)}
h1,h2,h3,.logo,.phead h1,.entries b,.gate h3{font-family:var(--serif);font-weight:600}
h2{letter-spacing:.05em}

/* 小ラベル：テラコッタの粒3つ＋字間広め（ヒーローのラベルと同じ言葉） */
.en,.phead .en{display:flex;align-items:center;gap:12px}
.en::before,.phead .en::before{content:"";width:24px;height:6px;flex:none;background:
  linear-gradient(var(--accent),var(--accent)) 0 50%/6px 6px no-repeat,
  linear-gradient(var(--accent),var(--accent)) 9px 50%/6px 6px no-repeat,
  linear-gradient(var(--accent),var(--accent)) 18px 50%/6px 6px no-repeat}
.phead .en{color:var(--hot)}
.phead .en::before{background:
  linear-gradient(var(--hot),var(--hot)) 0 50%/6px 6px no-repeat,
  linear-gradient(var(--hot),var(--hot)) 9px 50%/6px 6px no-repeat,
  linear-gradient(var(--hot),var(--hot)) 18px 50%/6px 6px no-repeat}

/* ヘッダー：紙の帯＋インクの線（常に読める。ヒーローの上でも透かさない） */
.head,.head.on-hero{background:var(--white);border-bottom:2px solid var(--ink)}
.head::before,.head.on-hero::before{display:none}
.head.on-hero .logo,.logo{color:var(--ink)}
.head.on-hero .logo span,.logo span{color:var(--sub)}

/* 親項目：当てる・開く＝「押されたキー」。墨に反転し、ヘッダーの墨線を通って
   下の盆の縁につながる。どこから開いたかは、この墨のつながりで示す。
   「今ここ」（aria-current）は3pxテラコッタ下線＝別の言葉に分ける */
.head.on-hero .gnav>li>a,.gnav>li>a{color:var(--ink);
  transition:color .08s var(--ease),background-color .08s var(--ease)}
.head.on-hero .gnav>li[aria-current]>a,.gnav>li[aria-current]>a{color:var(--brand)}
.head.on-hero .gnav>li:hover>a,.head.on-hero .gnav>li:focus-within>a,
.gnav>li:hover>a,.gnav>li:focus-within>a{background:var(--ink);color:var(--white)}
/* 下線はホバーの印から外す（反転が印）。現在地の線だけ、ブロックと同じ全幅で常時 */
.head.on-hero .gnav>li>a::after,.gnav>li>a::after{background:var(--accent);height:3px;
  left:0;right:0;transition:none}
.gnav>li:hover>a::after,.gnav>li:focus-within>a::after{transform:scaleX(0)}
.gnav>li[aria-current]>a::after,.gnav>li[aria-current]:hover>a::after,
.gnav>li[aria-current]:focus-within>a::after{transform:scaleX(1)}
.gnav>li>a:focus-visible{outline:2px solid var(--brand);outline-offset:-8px}

/* 引き出し：ナビ全幅（「私たちのこと」左端〜「お問い合わせ」右端）の紙の盆。
   幅860px固定・right:0 をやめる＝帯が親より左へ余計に伸びない。
   親ごとに盆を動かすと右端の親（法人のお客様へ）が1440pxで画面からはみ出すので、
   盆は動かさず「押した親の墨の反転」で出どころを示す */
.gnav .drop{left:0;right:0;width:auto;padding:16px;
  background:var(--paper);border:2px solid var(--ink);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:8px 8px 0 var(--shadow-soft);
  transform:translateY(-8px);
  transition:opacity .12s var(--ease),transform .12s var(--ease),visibility 0s .12s}
.gnav>li:hover .drop,.gnav>li:focus-within .drop{
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s}
/* 中身：盆（--paper）の上の白い紙のカード。境界は最初から2pxの墨で見えている */
.gnav .drop li{display:flex;transform:translateY(12px);
  transition:opacity .08s var(--ease),transform .08s var(--ease)}
.gnav>li:hover .drop li,.gnav>li:focus-within .drop li{
  transition:opacity .18s var(--ease),transform .18s var(--ease)}
.gnav .drop li+li{margin-left:12px;padding-left:0;border-left:0}
/* 盆はナビ幅（1440pxで707px）しかないので、旧862px幅のままの余白だと
   説明文が「浦安・川／口」と中途半端に折り返す。余白と字間を詰めて1行に収める */
.gnav .drop a{flex:1 1 auto;padding:10px;gap:12px;color:var(--ink);
  background:var(--white);border:2px solid var(--ink);
  transition:transform .1s var(--ease),background-color .1s var(--ease),
    box-shadow .1s var(--ease)}
/* 当てた答え＝カードが左上へ2px浮く・右下に4pxのベタ影・地が--hotに点く（.btnと同じ文法） */
.gnav .drop a:hover,.gnav .drop a:focus-visible{background:var(--hot);
  transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--shadow-soft)}
.gnav .drop a:active{transform:translate(2px,2px);box-shadow:none}
.gnav .drop a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
/* keep-all＝句点や中黒で折る（「浦安・川／口」のような中途半端な切れ方を止める）。
   anywhere＝それでも入らない時だけ、はみ出させずにどこでも折る */
.gnav .drop .tx>span{color:var(--sub);font-size:13px;letter-spacing:0;line-height:1.6;
  word-break:keep-all;overflow-wrap:anywhere;text-wrap:pretty}
/* 最後の1文字だけ次の行に落ちるのを防ぐ（対応していないブラウザでは今までどおり） */
.gnav .drop b{text-wrap:pretty;word-break:keep-all;overflow-wrap:anywhere}
/* 🚨 text-wrap:pretty だけでは「へ」「と」が1文字で残った（2026-08-26 実測）。
   日本語は文節で折るのが正解。対応しているブラウザだけ切り替える
   （@supports で囲まないと、未対応ブラウザで keep-all が外れて
   「浦安・川／口」のような中途半端な切れ方に戻る） */
@supports (word-break:auto-phrase){
  .gnav .drop b,.gnav .drop .tx>span{word-break:auto-phrase;overflow-wrap:normal}
}
/* --hot の上の --sub は実測3.98:1で基準未満。当てている間は墨まで上げる（9.5:1） */
.gnav .drop a:hover .tx>span,.gnav .drop a:focus-visible .tx>span{color:var(--ink)}
.gnav .drop .im{border:2px solid var(--ink);box-shadow:none;background:var(--paper)}
/* 写真には手を加えない（band のズーム廃止と同じ作法）。動くのはカードと矢印 */
.gnav .drop .im img{transition:none}
.gnav .drop a:hover .im img,.gnav .drop a:focus-visible .im img{transform:none}
.gnav .drop a::after{background:var(--sub);
  transition:transform .16s var(--ease),background-color .16s var(--ease)}
.gnav .drop a:hover::after,.gnav .drop a:focus-visible::after{
  background:var(--ink);transform:translateX(8px)}

/* お問い合わせ：ヘッダー唯一の塗り。藍が左から4コマで塗り替わり、矢印が2コマで一歩進む */
.hbtn,.head.on-hero .hbtn{background:var(--accent);color:#FFF7EA;border-left:2px solid var(--ink);
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.hbtn::before{background:var(--brand);transition:transform .3s var(--ease)}
.hbtn::after{transition:transform .2s var(--ease)}
.hbtn:hover::after,.hbtn:focus-visible::after{transform:translateX(8px)}
.hbtn:focus-visible{outline:2px solid var(--hot);outline-offset:-8px}

/* スマホのメニュー釦：紙のカードと同じ「浮く・沈む」。開いている間は親項目と同じ墨の反転 */
.head.on-hero .mtoggle,.mtoggle{background:var(--white);border:2px solid var(--ink);
  color:var(--ink);border-radius:0;
  transition:transform .1s var(--ease),box-shadow .1s var(--ease)}
.mtoggle:hover{border-color:var(--ink);transform:translate(-2px,-2px);
  box-shadow:4px 4px 0 var(--shadow-soft)}
.mtoggle:active{transform:translate(2px,2px);box-shadow:none}
.mtoggle[aria-expanded="true"]{background:var(--ink);color:var(--white)}
.mtoggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 動きを抑える設定の人：コマ送りも移動も止め、出る・消えるだけにする */
@media (prefers-reduced-motion:reduce){
  .gnav .drop{transform:none;transition:opacity .01s var(--ease),visibility 0s .01s}
  .gnav>li:hover .drop,.gnav>li:focus-within .drop{
    transition:opacity .01s var(--ease),visibility 0s}
  .gnav .drop li,.gnav>li:hover .drop li,.gnav>li:focus-within .drop li{
    opacity:1;transform:none;transition:none}
  .gnav>li>a,.gnav .drop a,.gnav .drop a::after,.hbtn::before,.hbtn::after,.mtoggle{transition:none}
  .gnav .drop a:hover,.gnav .drop a:focus-visible,.mtoggle:hover{transform:none}
}

/* クイックアクセス（右端）：インクの箱＋紙文字。
   88pxだと内側72pxに「倉庫・拠点」（14px×5字＋字間≒71.5px）が入らず2行に割れていた。
   96px（8の倍数）で内側80px。indexの章目盛り .chap2（right:112px）との間は24→16pxに縮むが重ならない */
/* 2026-09-08 1枚の板を4つの独立したボタンに分けたので、板を繋いでいた罫（border-left / border-bottom）は消した。
   幅は下の層（角丸ボタン）で 104px に決めている */
.quick a:hover{background:var(--accent)}

/* ボタン：紙の板＋インクの縁＋右下ずらし影。押した瞬間に沈む */
.btn{border-radius:0;border:2px solid var(--ink-deep);box-shadow:4px 4px 0 var(--shadow);
  transition:transform .1s var(--ease),color .18s var(--ease)}
.btn::before{transition:transform .3s var(--ease)}
.btn:hover{transform:translate(-2px,-2px)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--shadow)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.btn-main{background:var(--accent);color:#FFF7EA}
.btn-main::before{background:var(--brand)}
.btn-ghost{background:transparent;color:#fff;box-shadow:4px 4px 0 rgba(26,20,30,.5);
  border-color:var(--ink-deep);background:rgba(42,36,48,.35)}
.btn-ghost::before{background:var(--paper-hi,#FBF6E9)}
.btn-ghost:hover{color:var(--ink)}
.next a{border-bottom-width:3px;transition:color .14s var(--ease),border-color .14s var(--ease)}
.next a::after{content:"";width:26px;height:11px;background:currentColor;
  -webkit-mask:var(--arrow) no-repeat center/contain;mask:var(--arrow) no-repeat center/contain}

/* 表・カード・枠：インクの縁＋ずらし影。角丸なし */
.tbl{border-top:2px solid var(--ink)}
.tbl th{background:var(--paper)}
.route .cell{border:2px solid var(--ink);box-shadow:6px 6px 0 var(--shadow-soft)}
.route .mid{border-color:var(--ink)}
.facts{border:2px solid var(--ink);background:var(--line)}
.subnav{border-bottom:2px solid var(--line)}
.subnav a[aria-current]{border-bottom-color:var(--accent)}
.vision{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.vcopy{color:var(--brand)}
.vcopy b{background:linear-gradient(transparent 48%,rgba(214,126,82,.36) 48%,rgba(214,126,82,.36) 84%,transparent 84%)}
.vpart::before{background:var(--ink);width:2px}
.vpart::after{border-radius:0;width:8px;height:8px;margin-left:-4px}

/* 写真の外側＝インクの縁と右下のずらし影。写真そのものには手を加えない */
.band{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.shot img{border:2px solid var(--ink);box-shadow:8px 8px 0 var(--shadow-soft)}
.shot{padding-right:8px}
.phead{border-bottom:2px solid var(--ink)}
.gate{border:2px solid var(--ink)}

/* 入口カード */
.entries{background:var(--ink);gap:2px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.entries a::before{background:var(--brand);transition:transform .3s var(--ease)}
.entries a::after{transition:transform .2s var(--ease)}
.entries .k{color:var(--accent)}
.entries a:hover .k{color:var(--hot)}
.entries a:hover .s{color:#F4F9FE}

/* CTA・フッター：インクの闇に紙の文字（ヒーローの暗幕と同じ色） */
.cta .lead{color:#F4F9FE}
.ctel .n,.ctel .h{color:#BFDCF9}
.ctel a{border-top:2px solid rgba(251,246,233,.3)}
.ctel a:hover .t{color:var(--hot)}
footer{border-top:2px solid var(--ink-deep)}
.fgrid address{color:#F4F9FE}
.fnav .t{color:#B9AE96}
.fnav a{color:#EFE8D8}
.fnav a:hover{border-bottom-color:var(--hot);color:var(--hot)}
.fgrid address a:hover{color:var(--hot)}
.copy{border-top:1px solid rgba(251,246,233,.25);color:#B9AE96}
.copy a{color:#B9AE96}

/* 下部バー（スマホ）：紙＋インクの縁 */
.bar{background:var(--white);border-top:2px solid var(--ink)}
.bar a{border-radius:0;border:2px solid var(--ink-deep)}
.bar .b1{background:var(--accent)}
.bar .b2{background:var(--brand)}
.bar .b0{box-shadow:inset 0 0 0 2px var(--line)}

/* ページ上部へ：インクの箱＋ドット矢印 */
.ptop{border-radius:0;border:2px solid var(--ink-deep);box-shadow:4px 4px 0 var(--shadow-soft)}

/* パンくず・戻りの道 */
.crumb{border-bottom:2px solid var(--line)}
.backrow{border-top:2px solid var(--line);border-bottom:2px solid var(--line)}

/* 現れ方＝コマ刻み（transitionは--ease=stepsが効く）。写真も文字も4コマで着地する */
.js-rise [data-rise]{transition:opacity .5s var(--ease),transform .5s var(--ease)}
/* [data-in] も隠す側と同じ html.js-rise 始まりでそろえる（素の [data-in] には何も掛けない） */
html.js-rise [data-in]{transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js-rise [data-in="flip"],html.js-rise [data-in="flipx"]{transition-duration:.9s}

/* 地図の色（土色の紙に合わせる） */
.mSea{fill:#E4E9E2}
.mNear{fill:#DDD8CA;stroke:#CFC8B6}
.mCover{fill:#FBF6E9}

/* 帯写真のゆっくりズームは使わない（写真に手を加えている感が出る） */
.band:hover img{transform:none}
.gate img{transition:filter .2s var(--ease)}
.gate:hover img{transform:none;filter:brightness(.74)}

/* スマホのメニュー開閉：コマ刻みで落ちて着地 */
@media(max-width:900px){
  .head .r2.open{border-top:2px solid var(--ink);box-shadow:0 12px 0 -4px var(--shadow-soft);
    animation:menuDrop .24s var(--ease)}
  .head .r2.open .gnav>li{animation:menuItem .3s var(--ease) backwards}
  .head .r2.open .gnav>li:nth-child(2){animation-delay:.05s}
  .head .r2.open .gnav>li:nth-child(3){animation-delay:.1s}
  .head .r2.open .gnav>li:nth-child(4){animation-delay:.15s}
  .head .r2.open .hbtn{animation:menuItem .3s var(--ease) .2s backwards}
  .head .r2.open .gnav>li>a{border-bottom:1px solid var(--line)}
  .head.on-hero .r2.open .gnav>li>a{color:var(--ink)}
  .head.on-hero .r2.open .hbtn{background:var(--accent);box-shadow:none}
}

/* =========================================================
   ページの切り替え — ドット・ディザのコマワイプ（12pxの粒が市松に4コマで埋める）
   幕はJSが作る（JSが落ちても固まらない）。reduced-motionでは出さない
   ========================================================= */
.pxwipe{position:fixed;inset:0;z-index:200;pointer-events:none;display:none}
.pxwipe i{position:absolute;inset:0;opacity:0}
.pxwipe .q1{background-image:conic-gradient(#221D28 0 90deg,rgba(0,0,0,0) 0);background-size:24px 24px}
.pxwipe .q2{background-image:conic-gradient(rgba(0,0,0,0) 0 180deg,#221D28 0 270deg,rgba(0,0,0,0) 0);background-size:24px 24px}
.pxwipe .q3{background-image:conic-gradient(rgba(0,0,0,0) 0 90deg,#221D28 0 180deg,rgba(0,0,0,0) 0);background-size:24px 24px}
.pxwipe .q4{background:#221D28}
.pxwipe .dots{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:10px;opacity:0}
.pxwipe .dots b{width:8px;height:8px;background:var(--accent)}
@keyframes pxoff{to{opacity:0}}
/* 🚨 出発側は「duration .01s ＋ 遅延」で点けない。遅延を待つだけのアニメは
   ブラウザがコマ更新を間引き、2枚目が飛んで3コマに見えた（2026-08-25 検品→実測で再現）。
   1本のアニメの中の「止め」で刻む＝0秒から動き続けるので飛ばない。
   点く時刻は設計のまま 0 / .09 / .18 / .27 /（粒 .29）秒 */
.pxwipe.leave{display:block;pointer-events:auto}
.pxwipe.leave i{animation-duration:.36s;animation-timing-function:linear;animation-fill-mode:forwards}
.pxwipe.leave .q1{animation-name:pxl1}
.pxwipe.leave .q2{animation-name:pxl2}
.pxwipe.leave .q3{animation-name:pxl3}
.pxwipe.leave .q4{animation-name:pxl4}
.pxwipe.leave .dots{animation:pxld .36s linear forwards}
@keyframes pxl1{0%,100%{opacity:1}}
@keyframes pxl2{0%,24.9%{opacity:0}25%,100%{opacity:1}}
@keyframes pxl3{0%,49.9%{opacity:0}50%,100%{opacity:1}}
@keyframes pxl4{0%,74.9%{opacity:0}75%,100%{opacity:1}}
@keyframes pxld{0%,80.4%{opacity:0}80.6%,100%{opacity:1}}
.pxwipe.enter{display:block}
.pxwipe.enter i{opacity:1;animation:pxoff .01s var(--ease) forwards}
.pxwipe.enter .q4{animation-delay:.12s}
.pxwipe.enter .q3{animation-delay:.21s}
.pxwipe.enter .q2{animation-delay:.30s}
.pxwipe.enter .q1{animation-delay:.39s}
.pxwipe.enter .dots{opacity:1;animation:pxoff .01s var(--ease) .1s forwards}
@media (prefers-reduced-motion:reduce){
  .pxwipe{display:none!important}
  [data-in],[data-in].is-in{opacity:1!important;transform:none!important;transition:none!important}
}

/* 実写の集合写真の帯。顔が上寄りなので、切り口を上へ（2026-08-27） */
/* 🚨 15%だと1920px幅でアゴが切れる（2026-09-04 実測）。21%は320〜1920の全幅で顔が丸ごと入る */
.band.face img{object-position:center 21%}

/* 2026-09-08 「丸ごと見せる帯」。全幅＋高さ380pxの切り取りだと、PCでは元画像の縦39.6%しか映らない。
   L4_台車 は2人の顔が縦4〜25%にあるので、21%起点の窓では頭が切れ、しかも人が大きく写りすぎる。
   → 切り取りをやめて写真を丸ごと出し、幅を760pxに抑えて人を小さくする。
   🚨 顔切れは構造的に起きない（画像を1画素も切らないため）。object-position の%調整は使わない
      （幅によって必要な値が変わり、解が無いことを2026-09-04に実測済み） */
.band.is-fit{height:auto;background:none;overflow:visible;padding:0 24px}
/* 🚨 !important は付けない。このセレクタは .band>img より詳細度が高いので、素の animation:none で勝てる
   （Codex指摘で確認）。!important にすると、将来この写真だけに動きを足したいときに効かなくなる */
.band.is-fit>img{position:static;display:block;width:min(760px,100%);height:auto;
  margin:0 auto;border-radius:16px;transform:none;animation:none}
.band.is-fit::before,.band.is-fit::after{display:none}
.band.is-fit:hover>img{transform:none}

/* === 見出しを文節で折り返す（2026-09-03）=========================
   日本語はブラウザが単語の区切りを知らないので、「協力会社を募／集しています」
   「お届けしたあとま／でが」のように語の真ん中で割れる。CSSだけでは直せない。
   見出しの中に Google の BudouX が出した文節の切れ目 <wbr> を入れてあるので、
   ふだんはそこでしか折らない（keep-all）。文節1つが入りきらない幅でだけ、
   どこでも折って溢れを防ぐ（anywhere）。
   🚨 見出しの文言を書き換えたら `node ~/.claude/tools/nihongo/budoux-wbr.cjs <file>` を
      もう一度かけること。手で <span class="nw"> を置いた見出しは対象外（機械は触らない）。
   🚨 検査は `node ~/.claude/tools/nihongo/budoux-break.cjs <URL>`（語の途中で割れた所を数える） */
h1,h2,h3,h4,dt,th,.nm,.fitlist .t,.welcome span,.btn,.jgo a,.go,.uses b,
/* 🚨 案Bの数字カードと説明文も対象に入れる。入れないと「週休2／日」「7時に始ま／り13時」と
   語の途中で割れる（2026-09-06 実測・360/390/414/768pxすべてで発生） */
.bnums dd b,.bnums .d,.bnums .d b,.bfv-fact dd b,.bfv-fact .d,.bmodel .v,.bmodel .k,.bmodel .d,
.bday b,.bday p,.breal li,.bfit li,.bjobs p,.bstaff .yr{word-break:auto-phrase}

/* =========================================================================
   公式LINEのボタン（assets/line.js が LINE_URL を持っている間だけ出る）
   🚨 LINEブランドの緑 #06C755 は、白文字だと明暗比2.4:1で基準（4.5:1）に届かない。
      地を一段濃い #046B31 にして白文字で5.5:1を確保する（緑であることは伝わる）。
      角丸を使わない・影は右下へずらしたベタ、というこのサイトの作法は守る。
   🚨 記号のマスクは使わない（潰れて「●」に見えた・2026-09-06 実測）。文字だけで通す。
   ========================================================================= */
.is-line{
  background:#046B31 !important; color:#fff !important; border-color:#046B31 !important;
  display:block !important; width:100% !important; margin:0 0 12px !important;
  text-align:center;
}
/* 電話は副に下げる（消さない。年齢層の高い応募者は電話が速い） */
.is-sub{
  background:transparent !important; color:var(--ink) !important;
  border:2px solid var(--line) !important; box-shadow:none !important;
}
/* スマホ下部の固定バーの中だけは、他のボタンと同じ形（横並び）に保つ */
.bar .is-line, .bbar .is-line, .s2bar .is-line{
  display:inline-flex !important; width:auto !important; margin:0 !important;
  align-items:center; justify-content:center;
  /* 🚨 404では18pxまで潰れていた。inline-flex にすると .bar a の line-height:46px が
     高さを作らなくなるため、min-height と padding の両方で押し所を確保する
     🚨 .s2bar を忘れると saiyo2 だけ margin 12px が生きて下端がズレる（2026-09-06 検品） */
  min-height:46px; padding:0 6px;
}
/* LINEボタンの影はオレンジのにじみを引き継がない（緑の地にオレンジ影が出ていた） */
.is-line{box-shadow:0 8px 20px rgba(4,107,49,.22) !important}
.bar .is-line,.bbar .is-line,.s2bar .is-line{box-shadow:none !important}
/* 固定バーに残す電話（短縮形）。主のLINEより一段引く */
.is-subbar{filter:saturate(.55);opacity:.92}
/* 🚨 320pxの横はみ出し（既存）：index の許認可の複合語と business の .nm が折れない */
.bnums .d,.uses .nm,span.nm,span.d{overflow-wrap:break-word}
/* 電話番号の箱の前に置く主ボタン。箱と同じ幅にそろえる */
.line-lead{
  display:block !important; width:100% !important; max-width:480px;
  margin:0 0 16px !important; padding:14px 20px; min-height:56px;
  font-weight:700; text-decoration:none; line-height:1.4;
  display:flex !important; align-items:center; justify-content:center;
  box-shadow:4px 4px 0 var(--shadow-soft);
}

/* =========================================================================
   BLUEスキン（2026-09-06）— チャッピー（ChatGPT）が作ったデザインの実装
   青×白・実写・丸み。上のPXスキン（ドット絵）を上書きする層。
   🚨 戻すときはこの層を消すだけ（PXスキンは残してある）。
   色は参考画像から実測：CTA #1671CE／空 #4EABFA→#A8D3F6／制服の紺 #0F2A4A系
   ========================================================================= */
:root{
  --ink:#16283C; --ink-deep:#0B1B2C; --sub:#51677E;
  --brand:#1671CE; --deep:#0E4F9E; --accent:#1671CE;
  --hot:#F0F7FE; --hot-hi:#F4F9FE;
  --paper:#EFF5FB; --line:#D6E4F2; --white:#FFFFFF;
  --shadow:rgba(13,54,105,.16); --shadow-soft:rgba(13,54,105,.10);
  /* 見出しも角ゴシック太字に（PXスキンが見出しに var(--serif) を当てているので、変数ごと差し替える） */
  --serif:"Hiragino Kaku Gothic ProN","Yu Gothic Medium","游ゴシック Medium",Meiryo,sans-serif;
  /* 矢印・チェックをなめらかな線画に戻す（ドットの階段をやめる） */
  --arrow:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 12'><path d='M0 6h26.5M21.5 1.5 27 6l-5.5 4.5' fill='none' stroke='black' stroke-width='1.4'/></svg>");
  --check:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'><path d='M1 5.6 5 9.6 13 1.4' fill='none' stroke='black' stroke-width='2'/></svg>");
}
h1,h2,h3,.logo,.phead h1,.entries b,.gate h3{font-weight:700;letter-spacing:.02em}

/* ---- ヘッダー：白い帯・紺のロゴ・青いピルのCTA ---- */
.head{background:var(--white);border-bottom:1px solid var(--line)}
.logo{color:var(--deep)}
.hbtn{border-radius:999px;background:var(--brand);border:0;color:#fff;
  box-shadow:0 8px 20px rgba(22,113,206,.28);padding:12px 22px}
.mtoggle{border-radius:999px;border:2px solid var(--line);box-shadow:none}
.mtoggle:hover{transform:none;box-shadow:0 6px 16px var(--shadow-soft)}
.gnav .drop{border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 44px rgba(13,54,105,.14)}
.gnav .drop a{border:1px solid var(--line);border-radius:12px}
.gnav .drop a:hover{transform:translateY(-2px);box-shadow:0 8px 18px var(--shadow-soft)}
.gnav .drop .im{border:1px solid var(--line);border-radius:10px}

/* ---- 部品の丸み：角丸＋やわらかい影に総取り替え ---- */
.btn{border-radius:999px;border:0;box-shadow:0 10px 26px rgba(22,113,206,.26)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(22,113,206,.32)}
.btn:active{transform:translateY(1px);box-shadow:0 4px 12px rgba(22,113,206,.2)}
.btn-ghost{border:2px solid rgba(255,255,255,.8);box-shadow:none;border-radius:999px}
.route .cell{border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 22px var(--shadow-soft)}
.facts{border:1px solid var(--line);border-radius:16px;background:var(--white)}
.shot img{border:0;border-radius:16px;box-shadow:0 16px 36px var(--shadow-soft)}
.gate{border:1px solid var(--line);border-radius:16px}
.bar a,.bbar a,.s2bar a{border-radius:12px;border:1px solid var(--line)}
.ptop{border-radius:999px;border:1px solid var(--line);box-shadow:0 10px 24px var(--shadow-soft)}
/* 2026-09-08 おでん指示で作り直し：
   ①「見切れてる」→ 板をやめて右に16px浮かせた（上の層）
   ②「ちょっと丸みを帯びた四角いボタン」→ 4つを独立した角丸ボタンに分けた
   ③「クリーム色っていうの、微妙だよ」→ 半透明の白(.94)をやめて不透明の白にした。
      半透明だと下のクリーム地（#FBF6E9 など）が透けて、ボタン自体がクリーム色に見えていた */
.quick{border-radius:0;overflow:visible;box-shadow:none;border:0;background:none}
.quick a{background:var(--white);color:var(--deep);
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 6px 18px rgba(13,54,105,.14)}
.quick a:hover{background:var(--paper)}
.quick a:first-child{background:var(--brand);color:#fff;border-color:var(--brand)}
.quick a:first-child:hover{background:var(--deep);border-color:var(--deep)}
.quick .ico{stroke:currentColor}
.tbl,.bnums>div,.bwel span,.bjobs article,.breal>div,.bfit>div,.bfaq details,
.bday>div,.bmodel>div,.bstaff article,.bint,.bsns>div,.bchips span,.bfv-fact,
.note,.card,.bsaid{border-radius:14px}
.bcta-btn,.is-line,.line-lead,.bbar-sub{border-radius:999px !important}
.news{border-radius:999px}
thead th{background:var(--deep);border-color:var(--deep)}

/* ---- 2つの入口：採用を主役に（採用特化） ---- */
.entries a{border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 28px var(--shadow-soft);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.entries a:hover{transform:translateY(-4px);box-shadow:0 18px 40px var(--shadow)}
.entries a[href="recruit.html"]{background:linear-gradient(135deg,#1671CE,#0E4F9E);border:0}
.entries a[href="recruit.html"] .k{color:#BFDCF9}
.entries a[href="recruit.html"] b{color:#fff}
.entries a[href="recruit.html"] .s{color:#F4F9FE}

/* =========================================================================
   ヒーロー（bluehero）— パターンB：CSSアニメーション
   ========================================================================= */
.bluehero{position:relative;min-height:min(92vh,860px);display:flex;align-items:center;
  overflow:hidden;padding-top:var(--head);
  background:linear-gradient(180deg,#2E8BE8 0%,#4EA6F5 34%,#8CC6F8 62%,#D8EDFC 84%,#FFFFFF 100%)}
.bh-sky{position:absolute;inset:0;pointer-events:none}
.bh-sun{position:absolute;left:34%;top:26%;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,246,220,.85),rgba(255,246,220,0) 62%);
  animation:bh-glow 9s ease-in-out infinite}
.bh-cloud{position:absolute;background:rgba(255,255,255,.92);border-radius:999px;filter:blur(1px)}
.bh-cloud::before,.bh-cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.bh-cloud.c1{width:170px;height:34px;left:8%;top:9%;opacity:.8;animation:bh-drift 96s linear infinite}
.bh-cloud.c1::before{width:66px;height:66px;left:28px;top:-34px}
.bh-cloud.c1::after{width:44px;height:44px;left:92px;top:-20px}
.bh-cloud.c2{width:150px;height:32px;left:44%;top:10%;opacity:.8;animation:bh-drift 140s linear infinite reverse}
.bh-cloud.c2::before{width:64px;height:64px;left:26px;top:-32px}
.bh-cloud.c3{width:180px;height:36px;left:70%;top:24%;opacity:.7;animation:bh-drift 120s linear infinite}
.bh-cloud.c3::before{width:70px;height:70px;left:40px;top:-36px}
.bh-cloud.c4{width:110px;height:24px;left:24%;top:6%;opacity:.5;animation:bh-drift 160s linear infinite reverse}
@keyframes bh-drift{from{transform:translateX(0)}50%{transform:translateX(120px)}to{transform:translateX(0)}}
@keyframes bh-glow{0%,100%{opacity:.75}50%{opacity:1}}
.bh-photo{position:absolute;right:0;bottom:0;width:min(60vw,980px);pointer-events:none}
.bh-photo img{width:100%;height:auto;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);
          mask-image:linear-gradient(90deg,transparent 0,#000 22%);
  animation:bh-photoin 1.5s var(--ease) both .25s}
@keyframes bh-photoin{from{opacity:0;transform:translateX(64px)}to{opacity:1;transform:none}}
.bh-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;
  padding:64px 40px 120px;width:100%}
.bh-en{display:flex;align-items:center;gap:16px;color:#F4F9FE;font-size:13.5px;font-weight:700;
  letter-spacing:.14em;margin-bottom:22px;animation:bh-rise .9s var(--ease) both .1s}
.bh-en::after{content:"";width:72px;height:2px;background:rgba(255,255,255,.7)}
.bluehero h1{font-size:clamp(40px,5.3vw,44px);line-height:1.3;color:#fff;letter-spacing:.02em;word-break:auto-phrase;
  /* 約物（、。）の前後を詰める。ベタ組みのままだと読点の空きが素人臭くなる */
  font-feature-settings:'palt';
  text-shadow:0 2px 28px rgba(16,74,150,.4);animation:bh-rise .9s var(--ease) both .24s}
.bh-lead{margin-top:26px;font-size:18px;line-height:2;color:#F2F9FF;word-break:auto-phrase;
  text-shadow:0 1px 18px rgba(16,74,150,.45);animation:bh-rise .9s var(--ease) both .42s}
.bh-acts{display:flex;gap:18px;margin-top:38px;flex-wrap:wrap;animation:bh-rise .9s var(--ease) both .58s}
.bh-btn{display:inline-flex;align-items:center;gap:12px;min-height:60px;padding:0 34px;
  border-radius:999px;font-size:16px;font-weight:700;text-decoration:none;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.bh-btn svg{width:15px;height:11px}
.bh-btn.main{background:#0E4F9E;color:#fff;box-shadow:0 14px 34px rgba(8,48,100,.4)}
.bh-btn.main:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(8,48,100,.5)}
.bh-btn.ghost{border:2px solid rgba(255,255,255,.78);color:#fff;background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.bh-btn.ghost:hover{background:rgba(255,255,255,.26);transform:translateY(-2px)}
.bh-chips{list-style:none;display:flex;gap:10px;flex-wrap:wrap;margin-top:34px;padding:0;
  animation:bh-rise .9s var(--ease) both .72s}
.bh-chips li{background:rgba(255,255,255,.9);color:var(--deep);font-size:13.5px;font-weight:700;
  padding:9px 18px;border-radius:999px;box-shadow:0 6px 16px rgba(13,54,105,.14)}
.bh-scroll{position:absolute;right:40px;bottom:96px;z-index:2;color:#fff;font-size:11px;
  letter-spacing:.3em;writing-mode:vertical-rl;opacity:.85}
.bh-scroll::after{content:"";display:block;width:1px;height:52px;margin:12px auto 0;
  background:rgba(255,255,255,.8);animation:bh-line 2.2s var(--ease) infinite}
@keyframes bh-line{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes bh-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* お知らせ：白いピルでヒーローの裾に浮かべる */
.news{position:relative;z-index:3;max-width:880px;margin:-46px auto 0;background:var(--white);
  box-shadow:0 16px 40px rgba(13,54,105,.14);border:1px solid var(--line)}

/* 声の3枚 */
/* 2026-09-08 おでん指示：上76px・下8px＝9.5倍の差があり、カードが節の下端に貼り付いていた。
   「もうちょっと上にずらして、上下の間隔を均等に」→ 上を減らし下を増やして同じ値にする */
.bluevoice{padding:56px 0 56px;background:var(--white)}
.bv-k{font-size:13px;letter-spacing:.22em;font-weight:700;color:var(--brand);margin-bottom:22px}
.bv-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bv-note{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px 24px 18px;position:relative}
/* 飾りの引用符はコンマのゴミに見えるので置かない（2026-09-07 おでん実機指摘） */
.bv-note .q{font-size:15px;line-height:1.9;color:var(--ink)}
.bv-note .who{margin-top:10px;font-size:12.5px;color:var(--sub)}

/* スマホ */
@media (max-width:720px){
  /* 🚨 100svhにすると写真が1画面目に入らない（2026-09-06 実測）。自然高さで詰める */
  .bluehero{min-height:auto;align-items:flex-start}
  .bh-in{padding:48px 24px 0}
  .bh-en{font-size:11px;letter-spacing:.22em}
  .bh-en::after{display:none}
  .bh-cloud.c1,.bh-cloud.c4{display:none}
  .bh-cloud.c2{top:5%}
  .bluehero h1{font-size:clamp(34px,9.6vw,44px)}
  .bh-lead{font-size:15px}
  .sponly{display:inline}
  /* absolute→通常フローへ。指定はこの1か所に統合（Codex指摘13） */
  .bh-photo{position:relative;width:118%;margin:26px 0 0 -9%;right:auto;bottom:auto;order:2;
    -webkit-mask-image:none;mask-image:none}
  .bh-photo img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%);
    mask-image:linear-gradient(180deg,transparent 0,#000 18%)}
  .bluehero{flex-direction:column}
  .bh-acts .bh-btn{width:100%;justify-content:center}
  .bh-scroll{display:none}
  .bv-notes{grid-template-columns:1fr}
  .news{margin:-24px 16px 0;border-radius:20px}
}
@media (min-width:721px) and (max-width:1000px){
  .bh-photo{width:74vw;opacity:.9}
  .bluehero h1{font-size:clamp(36px,6.4vw,56px)}
}
/* 視差や動きを減らす設定の端末では、全部止めて最初から見せる */
@media (prefers-reduced-motion:reduce){
  .bh-cloud,.bh-sun,.bh-scroll::after,.bh-photo img,
  .bh-en,.bluehero h1,.bh-lead,.bh-acts,.bh-chips{animation:none}
}
/* 青地の上のクリーム文字は白に（テラコッタ時代の名残。青×クリームは濁って見える） */
.bclose,.bclose h3,.bclose .btel a{color:#fff}
.bclose .note2{color:#F4F9FE}
.bfit .n{color:#fff}
.s2scenehead,.s2scenehead b{color:#fff}
/* 🚨 320px：「メーカー系サービス会社」を auto-phrase が1つの文節として扱い、
   246pxのまま折り返さない（overflow-wrap:break-word も負ける・2026-09-06 実測）。
   狭い幅では auto-phrase を外して普通に折る */
@media (max-width:374px){
  .clients .nm{word-break:normal}
}
/* 「こんな日。」のマーカー：サーモン（テラコッタ時代の色）→ 空色に。書体も角ゴへ */
.vcopy{font-family:var(--gothic,"Hiragino Kaku Gothic ProN","Yu Gothic Medium",sans-serif);letter-spacing:.08em}
.vcopy b{background:linear-gradient(transparent 48%,rgba(120,190,250,.38) 48%,rgba(120,190,250,.38) 84%,transparent 84%)}

/* ---- Codexレビュー反映（2026-09-06・指摘3〜12,20,22） ---- */
/* 3: ナビのhoverが墨ベタの四角のまま残っていた */
.gnav>li:hover>a,.gnav>li:focus-within>a,.gnav>li[aria-current]>a{
  background:transparent;color:var(--brand)}
/* 4: 2つの入口の親が黒背景＋2px墨線のままだった */
.entries{background:var(--white);gap:18px;border-top:0;border-bottom:0;padding:8px 40px 40px}
/* 5: 写真帯の上下の2px墨線 */
.band{border-top:0;border-bottom:0}
/* 6: 表の上罫線 */
.tbl{border-top:1px solid var(--line)}
/* 7: 理念の上下線 */
.vision{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* 8: 下層の見出し下線 */
.phead{border-bottom:1px solid var(--line)}
/* 9: スマホ下部バーの上線 */
.bar{border-top:1px solid var(--line)}
/* 10: on-hero付きのメニュー釦はPXが詳細度で勝つ（将来data-heroを戻した時の保険） */
.head.on-hero .mtoggle,.mtoggle{border-radius:999px;box-shadow:none}
.head.on-hero .mtoggle:hover,.mtoggle:hover{transform:none;box-shadow:0 6px 16px var(--shadow-soft)}
/* 22: 面部品の線と影をまとめて柔らかく（今後の部品追加でも既定で効く） */
.card,.note,.route .cell,.facts,.gate,.shot img{border-color:var(--line)}
/* 11: mask非対応ブラウザでは写真が硬い矩形で出る → グラデを被せる代替 */
@supports not (mask-image:linear-gradient(#000,#000)) {
  .bh-photo::before{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;
    background:linear-gradient(90deg,#4EA6F5,rgba(78,166,245,0));z-index:1;pointer-events:none}
}
/* 20: 明るい空の帯で白文字が沈まないよう、文字側に薄い青のスクリム */
.bluehero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,58,116,.34) 0%,rgba(10,58,116,.16) 40%,rgba(10,58,116,0) 66%)}
.bh-in{z-index:2}
/* 19: ページ遷移の幕をドット柄の墨→青の無地に（動きのJSはそのまま使う） */
.pxwipe .q1,.pxwipe .q2,.pxwipe .q3,.pxwipe .q4{background-image:none;background:#0E4F9E}
.pxwipe .dots b{background:#fff;border-radius:50%}

/* =========================================================================
   デザイン検品（2026-09-06・31件）の反映 第2弾
   ========================================================================= */
/* #1: 全ページの地がクリームのまま（.env とテラコッタのラジアル・紙の粒） */
.env{background:#fff}
.env::before{display:none}
/* 2026-09-08 粒を戻す。ブルー化でクリーム地を消すために切られていたが、
   いま暖色の地を意図的に置いたので粒も要る（平らな面の粒が0.0000%だった） */
.grain{display:block}
/* #3: フッター＋CTAのベージュ文字280か所 → 青系へ */
.cta .lead{color:#F4F9FE}
.ctel .n{color:#BFDCF9}
.ctel .h{color:#BFDCF9}
.ctel a{border-top-color:rgba(217,235,252,.32)}
.fgrid address{color:#F4F9FE}
.fnav .t{color:#BFDCF9}
.fnav a{color:#F4F9FE}
.copy,.copy span,.copy a{color:#BFDCF9}
/* #4: quickレールの2px墨枠を消す指定だったが、2026-09-08 にレールを
   「4つの独立した角丸ボタン」に作り替えたので用済み。
   🚨 残すと、後ろで付けた border:1px の**左辺だけ**を後勝ちで消してしまう（Codex指摘で実測）。
   ボタンの左だけ線が無い状態になっていた */
/* #5: recruitヒーローのボタン＝角0・墨枠・旧インクのベタ影 → ピル＋ぼかし影 */
.hact{border-radius:999px !important;border:0 !important;
  box-shadow:0 10px 26px rgba(8,48,100,.35) !important;color:#fff !important}
.hact:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(8,48,100,.45) !important}
.hact-main{background:#0047AB !important}
/* #7: saiyo（案B）の面部品＝2px墨枠＋4pxベタ影 → 1px淡枠＋ぼかし影 */
.bnums>div,.bfv-fact,.bstaff article,.bjobs article,.bmodel>div,.breal>div,
.bfit>div,.bday>div,.bint,.bsns>div,.bfaq details,.bwel span,.bchips span{
  border:1px solid var(--line) !important;box-shadow:0 8px 22px var(--shadow-soft) !important}
.bsaid{border:1px solid var(--line) !important;box-shadow:none !important}
/* #8: btn-ghost の地が旧インクの紫茶 */
.btn-ghost{background:rgba(14,79,158,.30) !important;color:#fff}
.btn-ghost::before{background:#fff}
/* #9: 四角い粒25か所 → 丸に */
.en::before,.en::after,.vpart::after,.breal li::before,.why li::before{border-radius:50%}
/* #10: SVG地図がクリーム＋カーキ → 青系の紙に */
.mSea{fill:#DCEBFA}
.mNear{fill:#C3DCF5}
.mCover{fill:#9CC5EE}
/* 検品の追加指摘: hover/focusのベタ影の残骸 */
.gnav .drop a:focus-visible{box-shadow:0 8px 18px var(--shadow-soft)}
/* #26/#27: 本文16px→17px・h2 40px→36px（8ページ） */
body{font-size:17px}
h2{font-size:36px}
/* #13: 主ボタンの青が鈍い → 手本のコバルトへ */
.bh-btn.main{background:#0047AB}
/* #12/#18: 副ボタンの内側が白すぎて文字が1.73:1 → 青い半透明パネルに */
.bh-btn.ghost{background:rgba(14,79,158,.34);border-color:rgba(255,255,255,.6)}
.bh-btn.ghost:hover{background:rgba(14,79,158,.5)}
/* #15-17: ヒーロー文字のコントラスト → スクリムを濃く・広く */
.bluehero::before{background:linear-gradient(90deg,rgba(8,44,92,.52) 0%,rgba(8,44,92,.3) 42%,rgba(8,44,92,0) 66%)}
.bh-lead{color:#FFFFFF;text-shadow:0 1px 20px rgba(8,44,92,.6)}
.bh-en{color:#F2F9FF}
/* #19: SCROLLが白い雲に重なって1.58:1 → 雲の無い右下へ・薄い下敷き */
.bh-scroll{right:44px;bottom:110px;color:#fff;text-shadow:0 1px 10px rgba(8,44,92,.65)}
/* #11/#29: 「描いた雲」に見える → 大きくぼかして奥の空気に落とす（形を主張させない） */
.bh-cloud{filter:blur(14px);opacity:.5}
.bh-cloud.c2{opacity:.4}
.bh-cloud.c3{opacity:.35}
/* #28: 写真が0.3秒時点で未到着 → 遅延なしで入れる */
.bh-photo img{animation-delay:0s}
.bh-sun{opacity:.6}
/* 検品の目視指摘: NEWSピルがトラックの前輪に被る → ヒーローに食い込ませない */
.news{margin:20px auto 0}
/* #31: SPで主役のトラックが1画面目に出ない → チップを1行の横スクロールに畳む */
@media (max-width:720px){
  .bh-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin-top:22px;padding-bottom:4px}
  .bh-chips::-webkit-scrollbar{display:none}
  .bh-chips li{white-space:nowrap;flex:none}
  .bh-photo{margin-top:18px}
  .bh-acts{margin-top:26px}
  .bluehero h1{font-size:clamp(30px,8.8vw,40px)}
}
/* ヒーロー動画（パターンA）。imgと同じマスク・同じ入場 */
.bh-photo video{width:100%;height:auto;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);
          mask-image:linear-gradient(90deg,transparent 0,#000 22%);
  animation:bh-photoin 1.5s var(--ease) both}
@media (max-width:720px){
  .bh-photo video{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%);
    mask-image:linear-gradient(180deg,transparent 0,#000 18%)}
}
@media (prefers-reduced-motion:reduce){.bh-photo video{animation:none}}

/* ヒーローの見出し：行ごとのマスクリビール（「ヒーローセッションが命」2026-09-06） */
.bluehero h1{animation:none}
.bluehero h1 .ln{display:block;overflow:hidden;
  /* 下端の「、」を噛まないよう下だけ余らせる。上に余らせると次の行の頭が覗く（実測） */
  margin-bottom:-0.1em;padding-bottom:0.1em}
.bluehero h1 .ln>span{display:inline-block;transform:translateY(112%);
  animation:bh-line-up .9s cubic-bezier(.19,1,.22,1) forwards}
.bluehero h1 .ln:nth-child(1)>span{animation-delay:.18s}
.bluehero h1 .ln:nth-child(2)>span{animation-delay:.30s}
.bluehero h1 .ln:nth-child(3)>span{animation-delay:.42s}
@keyframes bh-line-up{to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .bluehero h1 .ln>span{transform:none;animation:none}
}

/* =========================================================================
   磨き層（アートディレクター設計 2026-09-06）
   根拠：実測14件（余白1段・字間プラス・色相10度窓・角丸7種・影16種・写真の色相159度バラけ 等）
   ========================================================================= */

/* ---- B-8: 旧テラコッタ期の取り残し（実測90箇所超）と検索レールの当たり ---- */
.cta .en,.phead .en{color:#F0F7FE}
.gate p{color:#F4F9FE}
/* 入口カードの一言（2026-09-08 追加）：見出しと本文のあいだに、太く短く1行。
   🚨 色は #fff。この面は写真＋暗幕の上なので、淡い青は明暗比が届かない（2026-09-08 の実測） */
.gate .gsub{margin:12px 0 0;font-size:17px;font-weight:700;color:#fff;letter-spacing:.01em}
/* クイックレール：1440pxで採用ゲート本文に57px食い込んでいた。中間幅は下部バー・ヘッダーCTAで足りる。
   🚨 2026-09-08 おでん指示で「右下」から「右端の上下中央」へ戻した
   （「右下のメニュー見切れてるし、上下の幅が均等の中央の右端に、丸みを帯びた四角いボタンで」）。
   食い込みは幅を92pxに抑えて避ける（.wrap の右端との差を実測して決めた） */
@media (min-width:1401px){
  .quick{top:50%;bottom:auto;transform:translateY(-50%);right:14px;
    border-radius:0;overflow:visible}
  /* 🚨 幅100pxは「法人の電話相談」7字×12px＝84pxが1行に収まる最小値（内側86px）。
     これより狭いと、そこだけ2行になって4つの高さが揃わない（実測 74px vs 87px）。
     100+14=114px で、本文（.wrap 幅1160px）の右端との差120pxに6px残して収まる */
  .quick a{width:100px;min-height:74px;padding:12px 6px;font-size:12px}
}
@media (max-width:1400px){ .quick{display:none} }

/* ---- B-1: 写真の階調を1本に揃える（実測：色相ひらき159度→16度） ---- */
:root{ --ph-gray:.55; --ph-tint:.34; --ph-lift:.30; --ph-blue:#2168B4; --ph-warm:#2E7BD0; }
.band,.shot,.phead,.gate,.cta{position:relative;isolation:isolate}
.band>img,.shot img,.phead>img,.cta>img{
  filter:grayscale(var(--ph-gray)) contrast(1.12) brightness(.98)}
.band::after,.shot::after,.phead::after,.cta::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--ph-blue);mix-blend-mode:color;opacity:var(--ph-tint)}
.band::before,.shot::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--ph-warm);mix-blend-mode:soft-light;opacity:var(--ph-lift)}
.phead .in,.cta .in,.gate .g{position:relative;z-index:3}
.gate::after{background:linear-gradient(to top,
  rgba(6,32,66,.94) 0%,rgba(6,32,66,.86) 62%,rgba(6,32,66,.60) 78%,
  rgba(6,32,66,.18) 92%,rgba(6,32,66,0) 100%)}
.gate>img{filter:grayscale(var(--ph-gray)) contrast(1.12) brightness(.72) saturate(1.05)}
/* 人物が主役の帯は色を抜きすぎない */
.band.is-people>img{filter:grayscale(.34) contrast(1.08) saturate(1.05)}
.band.is-people::after{opacity:.20}
.band.is-people::before{opacity:.22}

/* ---- B-3: 字。正のトラッキング廃止・行間を役割で分ける・禁則（実測8件→0件） ---- */
h1,h2,h3,.logo,.phead h1,.entries b,.gate h3{letter-spacing:-.012em}
.bluehero h1{letter-spacing:-.02em;line-height:1.22}
h2{line-height:1.28;letter-spacing:-.015em}
.vcopy{line-height:1.32;letter-spacing:-.01em}
.sec h2{font-size:clamp(30px,3.0vw,42px)}
.note,p,li,dd{line-height:1.85}
.note{max-width:34em}
.tel,.ocard .tel,.facts dd{font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums lining-nums}
body{line-break:strict}
address,.fgrid address,.ocard address{word-break:auto-phrase}

/* ---- B-2: 余白のリズム 1段→4段（順序に意味がある。並べ替えない） ---- */
:root{ --s-sm:72px; --s-md:112px; --s-lg:168px; }
.sec{padding:var(--s-md) 0}
.band + .sec,.gates + .sec,.vision + .sec{padding-top:var(--s-sm)}
.sec:has(+ .band),.sec:has(+ .gates),.sec:has(+ .vision){padding-bottom:var(--s-sm)}
.sec.is-key,.sec.is-key:has(+ .band),.band + .sec.is-key{
  padding-top:var(--s-lg);padding-bottom:var(--s-lg)}
.sec.is-key h2{font-size:clamp(40px,4.4vw,62px);line-height:1.18}

/* ---- B-4: 面を2枚→5枚に ---- */
:root{ --field-2:#F2F7FC; --field-3:#DDE9F7; }
.sec-paper{background:var(--field-2)}
.vision,.sec.is-key{background:var(--field-3)}

/* ---- B-5: 角丸3種・影3段 ---- */
:root{
  --r-sm:4px; --r-md:16px; --r-pill:999px;
  --e1:0 1px 2px rgba(9,42,88,.06), 0 2px 6px rgba(9,42,88,.05);
  --e2:0 1px 2px rgba(9,42,88,.07), 0 6px 14px rgba(9,42,88,.07), 0 14px 34px rgba(9,42,88,.06);
  --e3:0 2px 4px rgba(9,42,88,.08), 0 12px 26px rgba(9,42,88,.10), 0 30px 64px rgba(9,42,88,.10);
}
.tbl,.bnums>div,.bwel span,.bjobs article,.breal>div,.bfit>div,.bfaq details,
.bday>div,.bmodel>div,.bstaff article,.bint,.bsns>div,.bfv-fact,
.note,.card,.bsaid,.route .cell,.facts,.gate,.shot img,.bv-note,.ocard,
.entries a,.gnav .drop,.gnav .drop a,.bar a,.bbar a,.s2bar a{border-radius:var(--r-md)}
.gnav .drop .im,.bchips span{border-radius:var(--r-sm)}
.route .cell,.bv-note,.ocard,.facts{box-shadow:var(--e1), inset 0 1px 0 rgba(255,255,255,.9)}
.entries a,.card,.news,.bnums>div,.bjobs article,.bstaff article{box-shadow:var(--e2)}
.entries a:hover{box-shadow:var(--e3)}
.gnav .drop{box-shadow:var(--e3)}

/* ---- B-6: 質感（粒は暗い面・中間の面の上だけ。白地に敷かない） ---- */
.cta,.vision,.sec.is-key,.phead{position:relative}
.cta::before,.sec.is-key::before,.phead::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.32;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.5'/></svg>")}

/* ---- B-7: 動きを1種→3段に（ライブラリなし） ---- */
.js-rise [data-rise]{transform:translateY(12px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js-rise :where(.sec h2,.vcopy)[data-rise]{transform:translateY(22px);
  /* 🚨 .8s だと、見出しが立ち上がる場面を誰も見ていない（2026-09-10 モーション検品・実測）。
     発火は top≈717〜737px（画面844の下端）、出終わるまで833〜855ms。実機の1フリック
     （1200px/s）では約1000px流れるので、終わる瞬間には top=-80〜-316＝画面の外。
     8ページで132個中17個が画面外で終了していた。.45s なら終了時 top≈180 で画面の中に収まる。 */
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.js-rise .route .cell:nth-child(2),.js-rise .bv-note:nth-child(2),
.js-rise .ocard:nth-child(2),.js-rise .entries a:nth-child(2){transition-delay:.07s}
.js-rise .route .cell:nth-child(3),.js-rise .bv-note:nth-child(3),
.js-rise .ocard:nth-child(3){transition-delay:.14s}
@supports (animation-timeline: view()){
  @keyframes ph-par{
    from{transform:translate3d(0,-7%,0) scale(1.16)}
    to  {transform:translate3d(0, 7%,0) scale(1.16)}}
  .band{view-timeline:--bandline block;overflow:hidden}
  .band>img{animation:ph-par linear both;animation-timeline:--bandline;
    animation-range:cover 0% cover 100%;transition:none;will-change:transform}
}
@media (prefers-reduced-motion:reduce){ .band>img{animation:none !important} }

/* ---- B-10: 章ラベル（粒3つ廃止→文字のあとに罫。手本の作法） ---- */
.en{display:flex;align-items:center;gap:14px;letter-spacing:.2em}
.en::before{display:none}
.en::after{content:"";height:1px;flex:1;max-width:120px;background:currentColor;opacity:.45}
/* ---- クリーム文字の残党（全ページ実測で特定した24種） ---- */
.news .lb{color:#fff}
.entries .s,.entries a .s{color:#5B7EA8}
.entries a[href="recruit.html"] .s{color:#F4F9FE}
.gate .k,.phead .k,.hero .k{color:#F0F7FE}
.phead .nw,.hero .nw{color:inherit}
.hact,.hact small,.hero .sub{color:#fff}
.bclose h3,.bclose p,.bclose .btel a{color:#fff}
.bclose .n{color:#F4F9FE}
.skip{color:#fff}
.s2subtitle,.s2scenehead b,.s2vtoggle{color:#fff}
.btn.btn-main,a.btn-main{color:#fff}
.pay dd small,.pay dt{color:#F4F9FE}
.vcopy b{color:inherit}
/* エラー文はエラーの赤のまま（意味色）。ただし青地で沈まない赤に */
.err{color:#C0361F}

/* ---- Codexレビュー2周目の反映（2026-09-06） ---- */
/* 指摘3: LINEが入った固定バーは3ボタン。2列のままだと2段に折れる → 3列に */
.bbar.has-line,.s2bar.has-line{grid-template-columns:1.2fr 1fr auto}
.bbar.has-line .bcta-btn,.s2bar.has-line .s2cta{font-size:15px;min-height:56px}
.bbar.has-line .bbar-sub,.s2bar.has-line .s2bar-sub{font-size:13px}
/* 指摘4: 写真の視差はPCだけ（スマホの合成負荷を抑える）。will-changeの常時指定をやめる */
@media (max-width:900px),(hover:none){
  .band>img{animation:none !important;will-change:auto}
}
.band>img{will-change:auto}
/* 指摘5: クイックレールを1200pxまで残す（タブレット横の導線） */
/* 🚨 2026-09-08 1201〜1400px でレールを出す指定を取り下げた（display:none に戻した）。
   理由＝おでん指示で「右下」から「右端の上下中央」に移したため、この幅では本文に重なる。
   実測：1201pxで本文（.wrap 幅1160px）に **52px** 食い込む。1300pxでも重なりが残る。
   下に置いていた頃は本文の切れ目に重なるので目立たなかったが、中央では文字の上に乗る。
   この幅の導線は、ヘッダーの「公式LINEで相談」とヘッダーナビが担う。
   🚨 1401px以上では食い込み0を実測済み（1401pxで6px余る）。おでんの画面はここに入る */
@media (min-width:1201px) and (max-width:1400px){
  .quick{display:none}
}

/* =========================================================================
   デザイン検品2周目の反映（2026-09-06）
   最重要：ヒーローを「青い板＋右下に写真」→「動画が全面・文字が上に乗る」へ
   （手本の構図。SPの1画面目にトラック0%問題も同時に解決）
   ========================================================================= */
.bh-photo{position:absolute;inset:0;width:auto;bottom:0;right:0;pointer-events:none;z-index:0}
.bh-photo video,.bh-photo img{width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:none;mask-image:none}
/* 文字を守るスクリム：左を濃く・全体に薄幕（明暗比218件の主因だった弱いスクリムを強化） */
.bluehero::before{z-index:1;
  background:linear-gradient(90deg,rgba(7,36,78,.72) 0%,rgba(7,36,78,.5) 34%,rgba(8,44,92,.24) 60%,rgba(8,44,92,.12) 100%)}
.bluehero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,36,78,.30) 0%,rgba(7,36,78,0) 30%,rgba(7,36,78,0) 72%,rgba(7,36,78,.34) 100%)}
.bh-sky,.bh-sun,.bh-cloud{display:none}   /* CSSの描いた空は役目を終えた。空は動画が持つ */
.bluehero{background:#0E4F9E}             /* 動画が来るまでの下地 */
.bh-lead{color:#fff;text-shadow:0 1px 14px rgba(7,36,78,.8)}
.bh-en{color:#fff}
.bh-btn.ghost{background:rgba(7,36,78,.55);border-color:rgba(255,255,255,.7)}
.bh-btn.ghost:hover{background:rgba(7,36,78,.75)}
/* 🚨 2026-09-08 クイックレールを「右下」から「右端の上下中央」へ移したので、
   下へ逃がす旧方式（bottom:180px）では被りが消えない。実測で縦30〜65px・横21px 重なっていた。
   レールが出る1401px以上だけ、横にずらして避ける（レールは右14px＋幅100px＝右端から114px） */
.bh-scroll{bottom:110px}
@media (min-width:1401px){ .bh-scroll{right:130px} }
@media (max-width:720px){
  .bluehero{min-height:100svh}
  .bh-photo{position:absolute;inset:0;width:auto;margin:0;order:0}
  .bh-in{padding:40px 24px 120px;display:flex;flex-direction:column;justify-content:flex-end;min-height:100svh}
  .bh-chips{margin-top:18px}
}
@media (min-width:721px) and (max-width:1000px){
  .bh-photo{width:auto;opacity:1}
}

/* ---- 写真トーン：効きすぎを緩め、未適用の10面にも同じ世界を ---- */
:root{ --ph-gray:.42; --ph-tint:.18; --ph-lift:.26; }
.rhero img,.bfv-photo img,.s2hero img,.s2scene .ph img,.bstaff .ph img,.bint .ph img{
  filter:grayscale(.3) contrast(1.08) saturate(1.02)}
/* 人物の顔が主役の面はさらに弱く（青washで顔が死んでいた） */
.bstaff .ph img,.bint .ph img,.band.is-people>img{filter:grayscale(.22) contrast(1.06) saturate(1.05)}

/* ---- 明暗比の残り ---- */
.phead .en{color:#F4F9FE;text-shadow:0 1px 10px rgba(7,36,78,.8)}
.route .cell.mid{color:#F4F9FE}
.pcond dt{color:#F4F9FE}
.ctel .n,.ctel .h,.entries .k{color:#F4F9FE}
/* 淡青の面の上の青文字が4.46:1 → 地を少し明るく */
:root{ --paper:#F3F8FD; }

/* ---- 明朝の島3件・中央揃え3件（青ゴシック統一の最後の残り） ---- */
.vpart h3{font-family:var(--gothic,"Hiragino Kaku Gothic ProN",sans-serif);text-align:left}
.vparts{text-align:left}
.vcopy{text-align:left}
/* indexの見せ場：伺う現場の節に息を（余白が全部72pxだった） */
.vision{padding:150px 0}

/* ---- is-key の見出しが62pxまで膨らむ → 48pxに ---- */
.sec.is-key h2{font-size:clamp(38px,4vw,48px)}

/* =========================================================================
   余白の詰め（2026-09-06 おでん実機指摘「ページとページのスペース広すぎ」）
   🚨 原因：磨き層の .sec{padding:112px} がSP用の64px指定（カスケードで先）を
   上書きして、スマホの余白が倍増していた。SPは変数ごと落とす
   ========================================================================= */
:root{ --s-sm:64px; --s-md:112px; --s-lg:140px; }
.vision{padding:120px 0}
@media (max-width:720px){
  :root{ --s-sm:40px; --s-md:56px; --s-lg:80px; }
  .sec{padding:var(--s-md) 0}
  .vision{padding:72px 0}
  .bluevoice{padding:40px 0 40px}
  .news{margin:16px 16px 0}
}
@media (min-width:721px) and (max-width:1000px){
  :root{ --s-sm:48px; --s-md:72px; --s-lg:104px; }
}

/* ===== 2026-09-07 実機指摘まとめ（おでん・深夜レビュー） ===== */
/* 見出しの語中改行を防ぐ（「つ／なぐ」切れ。対応外ブラウザでは無視される）
   2026-09-09：代表の挨拶の本文（.msg .body p）が対象から漏れていて、3幅すべてで
   「お引き／受け」と割れていた。このページで一番読まれる文なので足す */
h1,h2,h3,.bh-lead,.msg .body p{word-break:auto-phrase}

/* ヒーロー：白いチップ廃止→ひとことメッセージ */
.bh-msg{margin-top:28px;color:#fff;font-size:21px;font-weight:700;letter-spacing:.1em;
  text-shadow:0 1px 14px rgba(7,36,78,.5)}
@media(max-width:720px){.bh-msg{font-size:17px;margin-top:20px}}

/* どのページでも浮いて見える「先頭へ戻る」ボタンは出さない */
.ptop{display:none !important}

/* 固定バーは採用1本。端の見切れ感をなくす */
@media(max-width:720px){
  .bar{padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:8px}
  .bar a{border-radius:999px;min-height:52px;line-height:52px;font-size:16px}
}

/* メニュー（ドロワー）内の丸ボタン→面で揃える（四角の中の丸の違和感） */
.head .r2.open .hbtn{border-radius:14px;margin:8px 16px 16px}

/* 三原則の書は、携帯でもPCでも3枚横並び */
/* 🚨 1fr は minmax(auto,1fr)＝min-content より縮まない。キャプションの文字量で列幅が
   不揃いになり、スマホで書が 113/128/80px とバラバラだった（PCは3枚とも230px）。
   さらに幅361〜374pxでは文書幅が画面より最大16px広くなり、about が横に振れていた
   （逃げ道の1列化が :2169 の max-width:360px にあり、壊れる帯の1px手前で切れていた）。 */
.shodo{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){
  .shodo{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
  .shodo img{max-width:100%}
}

/* 地図：ラベルに紙色のフチ（線と重なっても読める） */
.mPinT,.mPinS{paint-order:stroke;stroke:#F3F8FD;stroke-width:6px;stroke-linejoin:round}

/* 2026-09-07 おでん指摘: LINEボタンの深緑(#046B31)がダサい → サイトの青に統一
   (LINEであることは文言で伝わる。明暗比: #1671CE on #fff文字=4.6:1) */
.is-line{background:var(--brand) !important;border-color:var(--brand) !important;color:#fff !important;
  box-shadow:0 10px 26px rgba(22,113,206,.26) !important}
.is-line:hover{background:var(--deep) !important;border-color:var(--deep) !important}

/* 応募前FAQ（2026-09-07 別案alt-realの#faqを参考に採用。色味は既存のまま） */
.rfaq{margin-top:40px;border-top:1px solid var(--line)}
.rfaq details{border-bottom:1px solid var(--line)}
.rfaq summary{list-style:none;cursor:pointer;padding:20px 36px 20px 42px;font-size:17px;font-weight:700;
  color:var(--brand);position:relative;transition:color .16s var(--ease)}
.rfaq summary:hover{color:var(--deep)}
.rfaq summary::-webkit-details-marker{display:none}
.rfaq summary::before{content:"Q";position:absolute;left:0;top:20px;width:26px;height:26px;background:var(--brand);
  color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px}
.rfaq summary::after{content:"";position:absolute;right:8px;top:26px;width:10px;height:10px;
  border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(45deg);
  transition:transform .28s var(--ease)}
.rfaq details[open] summary::after{transform:rotate(225deg)}
.rfaq details>p{padding:0 36px 20px 42px;font-size:16px;line-height:1.9}
@media(max-width:720px){
  .rfaq summary{padding:16px 28px 16px 38px;font-size:16px}
  .rfaq details>p{padding:0 4px 16px 38px}
}

/* 2026-09-07 改行の精度（文言変更に伴う泣き別れ対策）
   pretty/auto-phraseはChrome系、balanceはSafariにも効く。文節はHTML側の.nwで補強 */
p,li,dd,figcaption{text-wrap:pretty}
summary,.bv-note .q,.bh-msg,.rhero .sub{text-wrap:balance}

/* ヒーロー動画の顔切れ対策（2026-09-07 コマ抜き×顔検出で6シーン×主要6端末を検算）
   スマホは窓が横1/4しかない。30%に寄せると「積む」「玄関」の顔が丸ごと入り、
   「運転」の顔は丸ごと画面外＝構図になる（一部だけ見える状態を無くす） */
@media(max-width:720px){.bh-photo video,.bh-photo img{object-position:30% 50%}}


/* 2026-09-07 review: トップは採用入口を迷わせない。写真の青被りを弱め、人物とトラックを読ませる */
/* 左端 .78→.80（2026-09-08）。眉「正社員｜配送スタッフ ／ 浦安本社・埼玉営業所」が
   p5=4.49 で 0.01 足りなかった。.80 で 4.55。左30%の平均色の変化は ΔE=0.45＝
   並べても見分けがつかない領域（ΔE<1.0）。.83 は ΔE=1.18 で境目に乗るので採らない。
   ヒーローの見た目はおでんが決めた形のまま。数字だけ動かしている。 */
.bluehero::before{background:linear-gradient(90deg,rgba(6,28,58,.80) 0%,rgba(6,28,58,.54) 35%,rgba(8,44,92,.20) 62%,rgba(8,44,92,.08) 100%)}
.bluehero::after{background:linear-gradient(180deg,rgba(6,28,58,.18) 0%,rgba(6,28,58,0) 28%,rgba(6,28,58,0) 68%,rgba(6,28,58,.46) 100%)}
.bh-photo video,.bh-photo img{filter:saturate(.96) contrast(1.02) brightness(1.04)}
.bh-btn.main{background:#fff;color:#0047AB;box-shadow:0 14px 34px rgba(3,28,60,.32)}
.bh-btn.main:hover{box-shadow:0 18px 42px rgba(3,28,60,.42)}
.bh-btn.ghost{background:rgba(3,28,60,.46);border-color:rgba(255,255,255,.74)}
.entries a.entry-recruit{position:relative;overflow:hidden}
@media(max-width:720px){
  .bluehero{min-height:calc(100svh - 0px)}
  .bh-in{padding:40px 24px 104px;justify-content:flex-end}
  .bluehero h1{font-size:clamp(31px,8.7vw,39px);line-height:1.26}
  .bh-lead{font-size:15px;line-height:1.85}
  .bh-photo video,.bh-photo img{object-position:36% 50%}
  .bh-acts{gap:10px;margin-top:26px}
}


/* 2026-09-07 review pass2: 初画面の採用ボタンを写真から完全に浮かせる。PC/SPとも最重要CTAとして読む */
.bluehero .bh-acts{position:relative;z-index:3;margin-top:30px;opacity:1 !important;transform:none !important;animation:none !important}
.bluehero .bh-btn{min-height:62px;padding:0 34px;border-radius:999px;font-weight:800;letter-spacing:.02em;opacity:1 !important;filter:none !important;-webkit-backdrop-filter:none;backdrop-filter:none}
.bluehero .bh-btn.main{background:#fff !important;color:#0047AB !important;border:2px solid rgba(255,255,255,.96);box-shadow:0 14px 36px rgba(0,24,56,.46),0 0 0 1px rgba(0,71,171,.10) inset;text-shadow:none !important}
.bluehero .bh-btn.ghost{background:rgba(4,30,64,.76) !important;color:#fff !important;border:2px solid rgba(255,255,255,.82);box-shadow:0 10px 28px rgba(0,24,56,.28);text-shadow:none !important}
.bluehero .bh-msg{position:relative;z-index:3;display:inline-block;margin-top:20px;padding:9px 14px;border-radius:999px;background:rgba(4,30,64,.62);box-shadow:0 8px 24px rgba(0,24,56,.25);text-shadow:none;letter-spacing:.04em}
@media(max-width:720px){
  /* 🚨 ここは .84 のまま触らないこと。スマホの眉は元から p5=13.25（基準の2.9倍）で
     余裕がある。一度 .86 に上げたが p5 は 13.25 で1ミリも動かず、効果ゼロだったので戻した。
     PC(1764行)だけが 4.49 でギリギリだった＝直すのは向こうだけでよい。 */
  .bluehero::before{background:linear-gradient(90deg,rgba(5,24,52,.84) 0%,rgba(5,24,52,.62) 42%,rgba(5,24,52,.24) 100%)}
  .bluehero .bh-in{padding:34px 24px 76px;justify-content:flex-end;min-height:calc(100svh - var(--head))}
  .bluehero .bh-en{font-size:10px;letter-spacing:.16em;margin-bottom:13px;line-height:1.7}
  .bluehero h1{font-size:clamp(29px,8.2vw,36px);line-height:1.22;text-shadow:0 2px 18px rgba(0,24,56,.75)}
  .bluehero .bh-lead{margin-top:16px;font-size:14px;line-height:1.72;max-width:23em}
  .bluehero .bh-acts{display:grid;grid-template-columns:1fr;gap:9px;margin-top:18px}
  .bluehero .bh-btn{width:100%;justify-content:center;min-height:54px;padding:0 18px;font-size:15px}
  .bluehero .bh-msg{margin-top:12px;font-size:14px;line-height:1.55;letter-spacing:.03em}
}
@media(max-width:360px){
  .bluehero .bh-in{padding:28px 20px 66px}
  .bluehero h1{font-size:29px}
  .bluehero .bh-lead{font-size:13px;line-height:1.62}
  .bluehero .bh-btn{min-height:52px}
}

/* 2026-09-07 review pass3: トップH1の約物・下端がマスクで切れないようにする */
.bluehero h1 .ln{padding-bottom:.08em;margin-bottom:-.03em}

/* 2026-09-07 review pass4: H1 reveal用マスクで「もっといい未来。」の下が切れるため、表示優先で開放 */
.bluehero h1 .ln{overflow:visible !important;padding-bottom:0;margin-bottom:0}

/* 採用・法人の入口から、現場の信頼へ一続きに見せる */
.band-first{height:clamp(300px,42vw,560px);margin-top:0}
.band-first>img{object-position:center 30%}
.band.is-people>img{filter:saturate(.98) contrast(1.02) brightness(1.02)}
.band.is-people::after{opacity:.08}
.band.is-people::before{opacity:.06}
@media(max-width:720px){
  .band-first{height:62vw;min-height:230px;max-height:340px}
  .band-first>img{object-position:46% 28%}
}

.bh-vtoggle{position:absolute;right:28px;top:calc(var(--head) + 24px);z-index:4;min-height:44px;padding:0 18px;
  color:#fff;background:rgba(4,30,64,.64);border:1px solid rgba(255,255,255,.72);border-radius:999px;
  font:700 13px/1 var(--gothic);cursor:pointer;backdrop-filter:blur(6px)}
.bh-vtoggle:hover{background:rgba(4,30,64,.82)}
.bh-vtoggle:active{transform:scale(.96)}
.bh-vtoggle:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* 🚨 2026-09-08 実測で見つけた不具合：スマホ幅で top:14px にしていたため、
   映像の「一時停止」がヘッダーの「メニュー」に**縦42px・横88px 重なっていた**（幅320〜390で再現）。
   ボタンの中心を押せばメニューに当たるが、右寄りを押すと一時停止が取る。
   → PCと同じく、ヘッダーの下に置く。ヘッダーの高さぶん下げるだけで重なりは0になる。
   → [[tap-target-must-be-hit-tested]] */
@media(max-width:720px){.bh-vtoggle{right:14px;top:calc(var(--head) + 12px);padding:0 14px}}
/* 🚨 2026-09-09 画面が低い（高さ568〜585px）と .quick が上へ伸びて「一時停止」を覆い、
   ボタンの中心を押すと採用情報へ飛んでいた（実測で1,978px²の重なり）。
   .quick は6ページ共通なので触らず、.bh-scroll と同じ作法で映像の釦を左へ逃がす
   （.quick は right:16px＋幅104px＝右端から120px）。
   🚨 この1行は必ず .bh-vtoggle の素の定義（上の1889行）より後ろに置く。
      前に置くと詳細度が同じで負け、right:28px のまま1文字も動かない（2026-09-09に踏んだ） */
@media (min-width:1401px){ .bh-vtoggle{right:130px} }

/* ── 業務内容の3カード（別案「実写主義」から移植：SERVICE 01/02/03） 2026-09-07 ── */
.svc3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px}
.svc3i{background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:36px 32px 32px;
  box-shadow:0 1px 2px rgba(9,42,88,.06),0 2px 6px rgba(9,42,88,.05),inset 0 1px 0 rgba(255,255,255,.9)}
.svc3ic{width:48px;height:48px;display:flex;align-items:center;justify-content:center}
.svc3ic svg{width:100%;height:100%;fill:none;stroke:var(--brand);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.svc3n{margin-top:22px;font-size:13px;font-weight:700;letter-spacing:.24em;color:var(--accent)}
.svc3i h3{margin-top:10px;font-size:22px;line-height:1.5;word-break:auto-phrase}
/* 説明文だけを指す。`.svc3i p` にすると .svc3n（番号ラベル）まで拾って青が灰に負ける */
.svc3i h3+p{margin-top:12px;color:var(--sub);line-height:1.95;word-break:auto-phrase}
@media(max-width:980px){.svc3{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.svc3{grid-template-columns:1fr;gap:16px;margin-top:44px}
  .svc3i{padding:28px 24px 26px}.svc3i h3{font-size:20px}}

/* 42pxだと h2 と同格になって格が下がる。狭い幅の指定を上書きしないよう min-width で囲む */

/* ── 現場の3枚（別案「実写主義」の作法を移植：figure＋動詞のキャプション） 2026-09-07 ── */
.wphotos{padding:24px 0 8px}
.wphotos .wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.wph{margin:0;position:relative;isolation:isolate}
/* 元画像は3枚とも1800×1200。枠を3:2に揃えて切り落としを作らない（顔切れ対策） */
.wph img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  background:var(--paper);
  filter:grayscale(var(--ph-gray)) contrast(1.12) brightness(.98)}
/* 既存の写真帯と同じトーンに揃える。filterだけでは色相が動かないので覆いを2枚重ねる */
.wph::after{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:3/2;z-index:1;
  pointer-events:none;background:var(--ph-blue);mix-blend-mode:color;opacity:var(--ph-tint)}
.wph::before{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:3/2;z-index:2;
  pointer-events:none;background:var(--ph-warm);mix-blend-mode:soft-light;opacity:var(--ph-lift)}
.wph figcaption{position:relative;z-index:3}
.wph figcaption{margin-top:14px;font-size:15px;line-height:1.85;color:var(--sub);
  word-break:auto-phrase}
.wph figcaption>span:first-child{display:block;margin-bottom:4px;font-size:17px;font-weight:700;
  color:var(--ink);letter-spacing:.02em}
/* 隣の .svc3 と同じ 980px で折る（列数が食い違わないように）。
   3枚目を全幅にすると 641〜900px で1枚だけ4.3倍になるので等価のまま2列に置く */
@media(max-width:980px){.wphotos .wrap{grid-template-columns:1fr 1fr;gap:22px}}
@media(max-width:720px){.wphotos .wrap{grid-template-columns:1fr;gap:26px}
  .wph figcaption{font-size:14px}.wph figcaption>span:first-child{font-size:16px}}

/* ── 2026-09-07 デザイン再検品の差し戻し分 ── */
/* 版面：.entries だけ .wrap の外に出ていて左端が100pxずれる */
.entries{max-width:1240px;margin-inline:auto}
/* 2026-09-07 見出しが下がったままになる件は、原因側（:where() 化）で直したのでパッチは削除 */
/* wph1（積み込む）だけ青が乗り切らず白く浮くので、この1枚だけ露出を落とす */
.wph:first-child img{filter:grayscale(var(--ph-gray)) contrast(1.12) brightness(.90) saturate(.92)}
/* 2026-09-07 帯のキャプション。.band は height:380px + overflow:hidden + img が絶対配置なので、
   figcaption を .band の中に入れると画像の裏に回って1文字も見えない（フェイブル5.1が発見）。
   画像を .band に包み、キャプションはその外へ出す */
.bandcap{margin:0}
.bandcap>figcaption{max-width:1240px;margin:14px auto 0;padding:0 40px;
  font-size:15px;line-height:1.85;color:var(--sub);word-break:auto-phrase}
.bandcap>figcaption>span:first-child{display:block;margin-bottom:4px;font-size:17px;
  font-weight:700;color:var(--ink);letter-spacing:.02em}
@media(max-width:720px){.bandcap>figcaption{padding:0 20px;font-size:14px}
  .bandcap>figcaption>span:first-child{font-size:16px}}

/* 2026-09-08 三原則と「現場の決まりごと」を統合。原則名を書の下に見出しとして置く */
.shodo figcaption b{display:block;margin-bottom:8px;font-size:22px;font-weight:700;
  color:var(--ink);letter-spacing:.06em}
@media(max-width:720px){.shodo figcaption b{font-size:20px}}

/* =========================================================================
   ボタン作り直し（2026-09-08・案C「矢印チップ」）
   手本25サイトの実測値。リファレンス君の計測に基づく。
   🚨 直した根本：--brand と --accent が両方 #1671CE で、
      「brand→accent」で書かれた hover が色として何も起きていなかった。
      accent に頼らず、hover 色を明示する。
   ========================================================================= */
:root{
  --btn-hover:#125FB0;      /* 主ボタンの hover。手本の ΔL 5.7〜9.5 に収まる */
  --btn-tint:#EAF3FD;       /* 副ボタンの淡塗り（Salesforce式） */
  --btn-line:#CBDDF0;       /* 副ボタンの1px輪郭（Vercel式・ぼかし0） */
}

/* ---- 影を落とす（手本は Apple/Salesforce/東京海上/freee/SmartHR とも影ゼロ） ---- */
.bh-btn,.btn,.hbtn{box-shadow:none}
.bh-btn.main{box-shadow:none}

/* ---- 押した瞬間を hover と別の見た目にする（いまは同じ -2px で無反応に見える） ---- */
.bh-btn:active,.btn:active,.hbtn:active,.gate:active,.next a:active,.rnp-cta:active{
  transform:scale(.97)
}
/* ---- フォーカスは全部位で1本に揃える ---- */
.bh-btn:focus-visible,.btn:focus-visible,.hbtn:focus-visible,
.gate:focus-visible,.next a:focus-visible,.rnp-cta:focus-visible{
  outline:2px solid var(--brand);outline-offset:3px
}
/* ---- 動く物を名指しする（all をやめる。手本に all は皆無） ---- */
.hbtn,.btn,.bh-btn,.next a,.rnp-cta{
  /* transform は .08s。押してから見た目が変わるまで120ms→80ms（合格線100ms・2026-09-10 実測） */
  transition:background-color .16s ease,box-shadow .16s ease,color .16s ease,transform .08s ease
}

/* ---- hover：主は地を1段暗く、副は淡塗り ---- */
.hbtn:hover{background:var(--btn-hover);color:#fff}
.bh-btn.main:hover{background:var(--btn-tint);color:var(--btn-hover)}
.bh-btn.ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.next a:hover{color:var(--btn-hover)}

/* ---- 矢印を丸チップに（Pinterest 矢印入り10件中7件がチップ入り） ---- */
.next a::after{
  content:"";width:36px;height:36px;flex:none;border-radius:50%;
  background:var(--brand);
  -webkit-mask:var(--arrow) center/14px 14px no-repeat;mask:none;
  display:inline-flex;align-items:center;justify-content:center;
  background-image:var(--arrow);background-repeat:no-repeat;
  background-position:center;background-size:14px 14px;
  transition:transform .2s ease,background-color .16s ease
}
.next a:hover::after{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){
  .next a::after{transition:none}
  .next a:hover::after{transform:none}
}
/* ヒーローの主CTAは 1782行の !important に負けていた（hoverが何も起きていなかった）。
   写真の上に乗るので影は残すが、手本に寄せて弱める（不透明度 .46→.22） */
.bluehero .bh-btn.main{box-shadow:0 8px 22px rgba(0,24,56,.22),0 0 0 1px rgba(0,71,171,.10) inset!important}
.bluehero .bh-btn.main:hover{background:var(--btn-tint)!important;color:var(--btn-hover)!important}
.bluehero .bh-btn.ghost:hover{background:rgba(4,30,64,.9)!important}
.bluehero .bh-btn:active{transform:scale(.97)}
/* ══ 採用条件の板（案B・伝票）══ 旧 .rnum ブロックは丸ごと差し替える ══ */
.rnum{
  /* 人の形。24人ぶんと2人ぶんで色だけ違う同じ絵 */
  /* 2026-09-08 --fig-on / --fig-off（人型のマーク）は .rnp-bar でしか使っていなかったので、
     マークの削除（おでん指示）と一緒に消した。使う所が0の変数を残さない */
  --rnp-cream:#FBF6E9;
  background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:72px 0;
}

/* 板：サイトのカード作法（半径16／1pxの罫／3層の影）を、この節では1枚だけに集約する */
.rnp{
  background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(9,42,88,.06),0 2px 6px rgba(9,42,88,.05),
             0 14px 34px rgba(13,54,105,.10),inset 0 1px 0 rgba(255,255,255,.9);
}

/* 見出し帯：節に名前を与える＋彩度の高い面積をここで1つだけ作る */
.rnp-h{margin:0;display:flex;align-items:center;min-height:54px;padding:16px 32px;
  background:linear-gradient(135deg,#1671CE,#0E4F9E);color:#fff}
/* 2026-09-08 おでん指示で「眉ラベル」から「言い切る見出し」に格上げ（13px→20px・字間を詰める）。
   🚨 高さは固定54pxをやめて min-height に。幅320pxで2行になったとき、固定だと文字が帯からはみ出す */
.rnp-h .k{font-size:20px;font-weight:700;letter-spacing:.02em;line-height:1.45;word-break:auto-phrase}

/* 見せ場：地は暖色（ヒーローの陽の色と同じ系）。
   2026-09-08 人型のマークを外し、「未経験入社」と「昇給」の2つを等幅で並べる形にした。
   🚨 flex＋gap のままだと、マークが無くなったぶん右半分が空いて板が歪んで見える。
      2列のグリッドにして帯の幅を使い切る */
.rnp-lead{display:grid;grid-template-columns:repeat(2,1fr);align-items:center;gap:24px;
  padding:26px 32px 24px;
  background:var(--rnp-cream);border-bottom:1px solid var(--line)}
.rnp-leadtx{min-width:0}
.rnp-lab{margin:0;font-size:13px;font-weight:700;letter-spacing:.22em;color:#6B5F4C}
/* 🚨 2026-09-09 ここにも一律 `white-space:nowrap` を書いていた（.rnp-grid dd と同じ形）。
   同じ書き方で3回、別々の幅帯で字が欠けているので、爆発する前に .nw 方式へそろえた。
   折ってはいけないのは値そのものだけ。矢印の前後では折れてよい */
.rnp-val{margin:8px 0 0;font-size:22px;font-weight:700;line-height:1.15;color:var(--ink);
  font-variant-numeric:tabular-nums}
.rnp-val b{font-size:36px;font-weight:800;line-height:1;color:var(--brand)}
/* 2026-09-08 .rnp-bar（人型を24個＋2個並べる帯）は削除した（おでん「未経験入社の横の人、マークいらないな」）。
   同じことを左の数字（26人中24人）が言っているので、情報は減っていない */

/* 4つの待遇：ラベル1行＋値1行に形をそろえる（2段の項目を作らない） */
.rnp-grid{display:grid;grid-template-columns:repeat(4,auto);margin:0}
.rnp-grid>div{padding:26px 32px 28px;border-left:1px solid var(--line)}
.rnp-grid>div:first-child{border-left:0}
.rnp-grid dt{margin:0;font-size:13px;font-weight:700;letter-spacing:.22em;color:var(--sub)}
/* 🚨 2026-09-09 ここに一律 `white-space:nowrap` を書いていたのが、板の字が欠ける原因だった。
   幅で3回（361〜427px／521〜543px）別々の穴が開いたので、作りを変えた。
   折ってはいけないのは「月給34万円〜」のような値そのものだけなので、
   HTML側で `<span class="nw">` を掛け、CSSでは一切折らせない指定をしない。
   （サイトの他の場所と同じ作法。記憶 fix-the-cause-not-the-symptom） */
.rnp-grid dd{margin:12px 0 0;font-size:22px;font-weight:700;line-height:1.2;color:var(--ink);
  font-variant-numeric:tabular-nums}
.rnp-grid dd b{font-size:36px;font-weight:800;line-height:1;color:var(--brand)}

/* 数字の但し書き：46万円と年収500万円が「誰の・いつの額か」を、板の中で言い切る。
   🚨 別ページや小さい注記に逃がさない。金額だけ大きく出して条件を書かないのが一番危ない */
.rnp-note{margin:0;padding:18px 32px 20px;border-top:1px solid var(--line);
  background:var(--white);font-size:13px;line-height:1.8;color:var(--sub)}

/* 足元：空いていた行を「板の底の1行」にして、行ごと押せるようにする */
.rnp-foot{margin:0;border-top:1px solid var(--line);background:var(--white)}
.rnp-cta{display:flex;align-items:center;justify-content:flex-start;gap:14px;
  min-height:58px;padding:0 32px;color:var(--brand);font-size:16px;font-weight:700;
  text-decoration:none;letter-spacing:.02em;
  transition:background-color .2s var(--ease)}
.rnp-cta svg{width:20px;height:14px;flex:0 0 auto;transition:translate .2s var(--ease)}
.rnp-cta:hover{background:#E3EEFA;text-decoration:underline;text-underline-offset:4px}
.rnp-cta:hover svg{translate:4px 0}
.rnp-cta:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}
.rnp-cta:active{background:#D8E7F7}
@media(prefers-reduced-motion:reduce){.rnp-cta,.rnp-cta svg{transition:none}
  .rnp-cta:hover svg{translate:none}}

/* 左の入り（32→26→20px）は4つの帯すべてで同じ値にする。1つでもズレると板が歪む */
@media(max-width:900px){
  .rnum{padding:56px 0}
  .rnp-h{padding:14px 26px}
  .rnp-h .k{font-size:18px}
  .rnp-cta{padding:0 26px}
  .rnp-lead{grid-template-columns:1fr;align-items:flex-start;gap:18px;padding:24px 26px 22px}
  .rnp-note{padding:16px 26px 18px}
  /* 🚨 2026-09-09 `1fr` は `minmax(auto,1fr)` なので、セルの min-content（実測200px）より細くならない。
     361〜427px で板から最大48pxはみ出し、375pxでは「週休2日」の「日」が消えていた（実測）。
     下限を外して、収まらない語は折り返させる */
  .rnp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rnp-grid>div{padding:22px 26px 24px}
  .rnp-grid>div:nth-child(odd){border-left:0}
  .rnp-grid>div:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:520px){
  .rnum{padding:40px 0}
  .rnp-h{min-height:46px;padding:12px 20px}
  .rnp-h .k{font-size:16px;letter-spacing:.02em}
  .rnp-lead{padding:20px 20px 18px;gap:14px}
  .rnp-note{padding:14px 20px 16px;font-size:12px}
  .rnp-val{font-size:17px}.rnp-val b{font-size:28px}
  .rnp-grid>div{padding:18px 20px 20px}
  .rnp-grid dt{font-size:12px;letter-spacing:.12em}
  .rnp-grid dd{font-size:17px;margin-top:8px}.rnp-grid dd b{font-size:28px}
  .rnp-cta{min-height:56px;padding:0 20px;font-size:15px}
}
@media(max-width:400px){
  .rnp-grid dd{font-size:16px}.rnp-grid dd b{font-size:26px}
  .rnp-val{font-size:16px}.rnp-val b{font-size:26px}
}
/* 320〜430px：2列のまま入れるため、値を1段落とし、左の入りも16pxで4帯そろえる
   🚨 2026-09-09 上限を360→430pxに広げた。361〜427pxがこの字下げから漏れていて、
      その帯だけ板から字がはみ出していた（375pxで「日」が完全に消えていた） */
@media(max-width:430px){
  .rnp-h{padding:12px 16px}
  .rnp-h .k{font-size:15px}
  .rnp-lead{padding:18px 16px 16px}
  .rnp-grid>div{padding:16px 16px 18px}
  .rnp-cta{padding:0 16px}
  .rnp-grid dd{font-size:15px}.rnp-grid dd b{font-size:24px}
  .rnp-val{font-size:15px}.rnp-val b{font-size:24px}
}

/* 2026-09-08 待遇の枠を3つ→4つ（離職率を追加）にしたので、3列用の .three は使わなくなった。
   🚨 定義ごと削除する。HTMLから class だけ外して CSS を残すと、到達しない指定が積み上がる */
.rnp-grid .sl{margin:0 10px;font-size:17px;font-weight:400;color:#B9CADC;vertical-align:2px}
@media(max-width:520px){.rnp-grid .sl{margin:0 6px;font-size:14px}}

/* 2026-09-08 改行の全体対応。見出しだけでなく本文・表・リストにも文節での改行を効かせる
   （320〜390pxで「壁も床も傷ひとつな／し」「冷蔵庫の設置から使い方の説明ま／で」等が出ていた） */
@supports (word-break:auto-phrase){
  p,li,dd,dt,figcaption,summary,blockquote,
  .note,.note2,.bv-note .q,.bv-note .who,.lead,.q,
  .gate .g p,.entries .s,.ocard p,.rule p,.shodo figcaption{
    word-break:auto-phrase
  }
}

/* 2026-09-08 320px の溢れ。三原則の書が3列のまま、採用条件の表が2列のままで
   画面幅を超えていた（about で57px・トップで11px）。狭い幅では1列に畳む */
/* 🚨 2026-09-10：3列を保つ幅（361〜600px）で説明文が1行6字・9行になり、
   320/360の1列（1行17〜19字）より読みにくいという逆転が起きていた。
   1列に畳む境目を 360px → 600px へ。書の大きさは列幅でなく max-width で決める。 */
@media(max-width:600px){
  .shodo{grid-template-columns:1fr!important;gap:28px}
  .shodo img{max-width:150px}
  .rnp-grid{grid-template-columns:1fr!important}
  .rnp-grid>div{border-left:0!important}
  .rnp-grid>div+div{border-top:1px solid var(--line)}
}
/* 表組みだけは例外。列幅が中身で決まるので、文節を1語として扱うと列が広がって枠を超える
   （320pxで .facts が 134.5+134.5 → 140.8+188 になり35px溢れた） */
.facts dt,.facts dd,.tbl th,.tbl td,.ocard dt,.ocard dd,.rnp-grid dt,.rnp-grid dd{
  word-break:normal
}

/* =========================================================================
   スマホメニュー 案A「現場の窓」（2026-09-08 差し替え版）

   ★置き場所：assets/style.css の【一番最後】に足す。
     同時に、いま入っている旧ブロック
       「スマホメニュー作り直し（2026-09-08）— 紙の盆＋白いカード（案A）」
     から、その @media(max-width:900px){ …… } を閉じる } までを【丸ごと消す】。
     🚨 行番号で消さない（style.css は毎日伸びている）。上の見出し文字で探して消す。
     🚨 末尾に置くこと。途中に置くと、後ろの `.hbtn{box-shadow:none}` などに
        順番で負ける可能性がある（詳細度では勝っているが、末尾なら二重に安全）。

   ・全ルールを @media(max-width:900px) に閉じてある。PC幅には1行も効かない
     （901/1024/1280/1440/1920 × 7ページ = 全要素10,496個を比べて違い0件で確認）
   ・HTMLは1文字も変えない。JSも変えない
   ・先頭に html.js-menu を付けて、既存のどの層にも詳細度で勝つ
   ========================================================================= */
@media(max-width:900px){

  /* ---- 1. 盆：ヘッダー下いっぱいを紙色で覆う（背面の透けをなくす） ---- */
  html.js-menu .head .r2.open{
    top:64px; height:calc(100dvh - 64px); max-height:none;
    background:var(--paper);
    border-top:1px solid var(--line);
    box-shadow:none;
    padding:18px 16px calc(18px + env(safe-area-inset-bottom));
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    display:flex; flex-direction:column;
  }
  /* 盆＝縦のflex。窓（採用）が「余った高さ」を全部吸うので、
     画面の高さが変わっても下に死んだ空白ができない（390x844 も 320x568 も同じ絵になる） */
  html.js-menu .head .r2.open .in{padding:0; gap:0; flex:1 1 auto; min-height:0}
  html.js-menu .head .r2.open .drop{display:none}

  /* ---- 2. 行き先（1〜3）＝白い板1枚。浮かせない・罫だけで区切る ---- */
  html.js-menu .head .r2.open .gnav{gap:0; flex:1 1 auto; min-height:0}
  html.js-menu .head .r2.open .gnav>li{
    background:var(--white); border:1px solid var(--line);
    border-radius:0; box-shadow:none; overflow:hidden;
  }
  html.js-menu .head .r2.open .gnav>li:nth-child(1){border-radius:16px 16px 0 0}
  html.js-menu .head .r2.open .gnav>li:nth-child(2){border-top:0}
  html.js-menu .head .r2.open .gnav>li:nth-child(3){border-top:0;border-radius:0 0 16px 16px}
  html.js-menu .head .r2.open .gnav>li:nth-child(-n+3)>a{
    min-height:60px; padding:16px 46px 16px 20px; border-bottom:0;
    font-size:16px; font-weight:700; letter-spacing:.02em; line-height:1.5;
    color:var(--ink); background:transparent; position:relative;
  }

  /* PC用の hover/focus/墨反転が漏れて色が不揃いになるのを止める
     （開いた直後にフォーカスが乗った項目だけ青くなっていた実測の直し） */
  html.js-menu .head .r2.open .gnav>li:hover>a,
  html.js-menu .head .r2.open .gnav>li:focus-within>a{
    color:var(--ink); background:transparent;
  }
  html.js-menu .head .r2.open .gnav>li:nth-child(-n+3)>a:active{background:var(--paper)}
  html.js-menu .head .r2.open .gnav>li>a:focus-visible{
    outline:2px solid var(--brand); outline-offset:-4px; border-radius:12px;
  }

  /* 3pxのアクセント下線(::after)は矢印(シェブロン)に転用する */
  html.js-menu .head .r2.open .gnav>li:nth-child(-n+3)>a::after{
    content:""; left:auto; right:20px; top:50%; bottom:auto;
    width:8px; height:8px; background:transparent;
    border-top:2px solid var(--sub); border-right:2px solid var(--sub);
    border-radius:1px;
    transform:translateY(-60%) rotate(45deg); transition:none;
  }
  html.js-menu .head .r2.open .gnav>li:nth-child(-n+3):hover>a::after,
  html.js-menu .head .r2.open .gnav>li:nth-child(-n+3):focus-within>a::after{
    transform:translateY(-60%) rotate(45deg);
  }

  /* いま居るページ（1〜3）：左に青の柱を1本立てるだけ */
  html.js-menu .head .r2.open .gnav>li:nth-child(-n+3)[aria-current]>a{
    color:var(--brand); box-shadow:inset 4px 0 0 var(--brand);
  }
  html.js-menu .head .r2.open .gnav>li:nth-child(-n+3)[aria-current]>a::after{
    border-color:var(--brand);
  }

  /* ---- 3. 見せ場：採用情報だけ「現場の窓」にする（この会社の一番の仕事） ----
     ・面積は他の1項目の 7.6倍（390x844実測）。主従を面積で言う（文字は1つも足していない）
     ・上限を付けない＝余った高さを全部ここが吸うので、どの画面高でも下に死んだ空白が出ない
     ・浮く（影が付く）のはこの1枚だけ。他は板に伏せる
     ・写真は R1_仲間（配送の合間に笑い合う2人）。顔は縦37〜66%＝下の文字帯と重ならない */
  html.js-menu .head .r2.open .gnav>li:nth-child(4){
    flex:1 1 auto; min-height:190px;
    margin-top:16px; border:0; border-radius:16px; overflow:hidden;
    background:
      linear-gradient(180deg,
        rgba(6,30,66,0) 0%, rgba(6,30,66,0) 42%,
        rgba(6,30,66,.34) 64%, rgba(5,24,56,.72) 84%, rgba(4,20,48,.92) 100%),
      url("../img/R1_仲間.webp") 60% 50%/cover no-repeat,
      var(--deep);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),
      0 14px 30px -12px rgba(9,42,88,.46), 0 2px 6px rgba(9,42,88,.10);
  }
  html.js-menu .head .r2.open .gnav>li:nth-child(4)>a{
    min-height:0; height:100%;
    align-items:flex-end; justify-content:flex-start;
    padding:0 55px 22px 21px; border-bottom:0;   /* 左21px＝上の板（罫1px+20px）と文字の左端を揃える */
    font-size:24px; font-weight:800; letter-spacing:.04em; line-height:1.3;
    color:#fff; background:transparent; position:relative;
    text-shadow:0 1px 14px rgba(3,16,40,.72);
  }
  html.js-menu .head .r2.open .gnav>li:nth-child(4):hover>a,
  html.js-menu .head .r2.open .gnav>li:nth-child(4):focus-within>a{
    color:#fff; background:transparent;
  }
  html.js-menu .head .r2.open .gnav>li:nth-child(4)>a::after{
    content:""; left:auto; right:21px; top:auto; bottom:30px;   /* 右端も上の板の矢印と1本の線に載せる */
    width:10px; height:10px; background:transparent;
    border-top:2px solid #fff; border-right:2px solid #fff; border-radius:1px;
    transform:rotate(45deg); transition:none;
  }
  html.js-menu .head .r2.open .gnav>li:nth-child(4):hover>a::after,
  html.js-menu .head .r2.open .gnav>li:nth-child(4):focus-within>a::after{
    transform:rotate(45deg);
  }
  html.js-menu .head .r2.open .gnav>li:nth-child(4)>a:active{
    box-shadow:inset 0 0 0 999px rgba(7,36,78,.22);
  }
  /* いま居るページが採用情報のとき：窓のふちを青で締める */
  html.js-menu .head .r2.open .gnav>li:nth-child(4)[aria-current]{
    box-shadow:inset 0 0 0 3px var(--brand),
      0 14px 30px -12px rgba(9,42,88,.46), 0 2px 6px rgba(9,42,88,.10);
  }

  /* ---- 4. お問い合わせ：サイト共通の青いピル1本 ---- */
  html.js-menu .head .r2.open .hbtn{
    margin:16px 0 0; min-height:58px; padding:14px 24px;
    border-radius:999px; justify-content:center;
    background:var(--brand); color:#fff; font-size:17px; letter-spacing:.04em;
    box-shadow:0 10px 22px -8px rgba(22,113,206,.55);
  }
  html.js-menu .head .r2.open .hbtn:active{background:var(--deep)}

  /* ---- 5. 「閉じる」：墨の丸をやめて、サイトの青に ---- */
  .mtoggle[aria-expanded="true"]{
    background:var(--brand); border-color:var(--brand); color:#fff;
  }
}

/* 2026-09-08 スキップリンク。定義が saiyo2.css（採用ページ専用）にしか無く、
   他ページでは白地に白文字（明暗比1:1）で見えていなかった。共通側に置き直す */
.skip{position:absolute;left:8px;top:-64px;z-index:200;display:inline-flex;align-items:center;
  padding:12px 20px;min-height:44px;border-radius:10px;
  background:var(--brand);color:#fff;font-weight:700;text-decoration:none}
.skip:focus{top:8px}
.skip:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* =========================================================================
   2026-09-08 色相を「面積」で分離する（Codexの設計）
   彩度のツマミではなく面積で解く。青は主役のまま、暖色を第二の地にする。
   末尾固定：既存の上書き層より後に置く
   ========================================================================= */
:root{
  /* 死に帯 C*.04〜.08 を本文系から外す */
  --ink:#1D2A36;          /* L27.9 C.029 H246.9 */
  --ink-deep:#111E2B;     /* L23.0 C.031 H249.3 */
  --sub:#586877;          /* L51.0 C.031 H246.7 */

  /* 青は主役のまま。橙は「行動」だけ */
  --accent:#B85027;       /* L55.9 C.145 H40.6 */

  /* 面積を持つ暖色。梱包紙・現場の温度 */
  --paper-warm:#FDF6E3;   /* L97.3 C.018 H89.4 */
  --paper-sand:#F4E8D1;   /* L93.4 C.033 H83.7 */
  --warm-ink:#5F4737;     /* L41.9 C.042 H55.0 */

  /* 旧淡青の死に帯を、無彩色寄りの補助文字へ */
  --hot:#F0F7FE;          /* L87.5 C.020 H240.8 */
  --hot-hi:#F4F9FE;       /* L92.4 C.030 */
}

/* 全ページで暖色面を判定面積まで広げる */
.sec-paper{background:var(--paper-warm)}

/* トップの採用条件板：カード外も暖色にして面積で主役化 */
.rnum{background:var(--paper-sand)}
.rnp{background:var(--white)}
.rnp-lead{background:var(--paper-warm)}
.rnp-lab{color:var(--warm-ink)}

/* 旧ハードコードの死に帯を残さない */
.cta .en,.phead .en,.gate .k,.phead .k,.hero .k,
.fgrid address a:hover,.fnav a:hover,.ctel a:hover .t,
.entries a:hover .k{
  color:var(--hot);
}
.entries .s,.entries a .s{color:#647789} /* L56.0 C.036 H247.0 */
.entries a[href="recruit.html"] .s{color:var(--hot-hi)}
.entries a[href="recruit.html"] .k,
.ctel .n,.ctel .h,.fnav .t,.copy,.copy span,.copy a{
  color:var(--hot-hi);
}
.mNear{fill:#D6E1EA}  /* L90.4 C.017 H242.4 */
.mCover{fill:#C7D8E6} /* L87.4 C.027 H242.8 */

/* =========================================================================
   ヒーローの大見出し（2026-09-08 に「映像へ同期して4本切り替え」を廃止し、1本固定にした）
   ========================================================================= */
.bh-h1{position:relative}
/* 2026-09-08 見出しの4本切り替えを廃止（おでん指示で1本固定）。
   🚨 .hl の表示切替（display:none / is-on）と min-height:calc(1.3em*3) はここで削除した。
      切り替えが無くなった以上、この2つは「当たらないCSS」になる。
      残しておくと、後から .hl を書いた人が意図せず消える／高さが1行ぶん余る。
   🚨 高さの確保も不要になった：中身が常に2行で固定なので、h1 自身の高さで決まる */

/* =========================================================================
   2026-09-08 明暗比の是正（Web検品35件・デザイン検品39件。原因は共通）
   青地 #1671CE / #2579D0 の上では、淡い青は上限L*96でも4.43で4.5に届かない。
   実測して「青地の上は白しか解が無い」と分かったので、青地の上だけ白にする。
   ========================================================================= */
.cta .en,.phead .en,.hero .k,.phead .k,
.s2scene .n,.s2film .s2scenehead,.s2subtitle,
.partner .pnote,.pband .in p,.pband h3,
.cta .lead,.cta p,.gate .k{color:#fff}
.partner .pnote,.pband .in p{color:#EDF4FB}
/* 橙は白地で4.98だが、砂色(#F4E8D1)の上では4.11で不足。砂色の上だけ濃くする */
.rnum .en,.rnum .rnp-lab,.sec-paper .en{color:#9C4219}


/* 青地の上の淡い色は、白でようやく4.44〜4.90。淡い青（#F4F9FE=4.02 等）では届かない。
   実測して落ちた要素だけを白へ。地が薄い青の節は地を1段濃くして白を通す */
.s2scene .n,.s2scene h3,.s2scene p,
.s2film .s2scenehead,.s2film .s2subtitle,
.pband .in p,.pband .in h3,.partner .pnote,
.cta .lead,.cta p,.cta .en,
.bfilm dt,.bfilm dd,.s2career dt,.s2career dd{color:#fff}
.s2career,.s2scene{--scene-bg:#0E4F9E}

/* 2026-09-08 明暗比：地の側から直す（文字の色をいじるより確実だった）
   🚨 .s2scene に暖色の地が当たって、白文字が比1.08＝ほぼ読めない状態になっていた。
   これは今日の色替えで壊した箇所。元の濃い青に戻す */
.s2scene,article.s2scene{background:var(--deep)}
/* 青地・橙地の上の淡い文字は、白でようやく基準を超える（淡い青は上限でも4.43で届かない） */
.partner,.partner *{--on-solid:#fff}
.partner .pnote,.partner p,.partner strong,.partner .en,.partner dt,.partner dd{color:#fff}
.rband,.rband *,.s2close .note2,.s2close p{color:#fff}
/* 橙は白地なら4.98で通るが、薄青の地(#DDE9F7)の上では4.05。その場合だけ濃くする */
.sec .en,.sec .lb{color:#9C4219}
.sec-paper .en,.sec-paper .lb{color:#9C4219}

/* 淡い青(--hot #F0F7FE / --hot-hi #F4F9FE)を残したまま基準を通すには、地を濃くするのが解。
   #1671CE の上では 3.37/4.02 だが、#0E4F9E の上なら 5.50/6.55 で通る（実測） */
.partner,.pband,.cta,.s2close,.bfilm{background:var(--deep)}
/* 橙の帯の上は白で通す（淡い橙は4.28〜4.44で届かない） */
.rband{background:#9C4219}

/* 2026-09-08 最終：地の指定が既存の強い規則に負けるので、変数側を基準を通る値にする。
   淡い青は #1671CE の上で 4.5 を超える最小値まで明るくした（実測 #F0F7FE=4.53） */
:root{
  --hot:#F0F7FE;
  --hot-hi:#F4F9FE;
  --accent:#8F3C16;   /* 薄青の地(#DDE9F7)でも 4.5 を超える。白地では7.43 */
}
/* 区切りの「／」。opacity:.7 だと白地で 3.05 にしかならない（実測）。
   透過をやめて色そのもので決める（#586877＝白地で 5.74）。
   🚨 aria-hidden を付けてはいけない。付けると読み上げが「残業なし週休2日」と
   1本に繋がり、2つの条件の境目が消える（2026-09-08 支援技術の読み上げを実測）。
   色で 5.74 を確保したので、読み上げには残す。 */
.rnp-grid dd .sl,.bh-en .sl{color:#586877}
/* 新設したフッターリンクが高さ17px（44px必要）だった */
.ftel-link{margin-top:14px}
/* 濃紺のフッター地(#0E4F9E)の上。--brand(#1671CE)だと比1.63で読めない。
   同じフッターの他9本と同じ淡色にそろえる（実測 比 7.54／このリンクがあるのは
   contact.html を除く7ページ） */
.ftel-link a{display:inline-flex;align-items:center;min-height:44px;
  color:var(--hot-hi);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.ftel-link a:active{translate:1px 1px;opacity:.82}

/* =========================================================================
   2026-09-08 写真ヘッダーの白い英字ラベル（.phead .en）の読みにくさ
   実測：service@390 3.47 ／ about@390 3.68・@1440 4.29 ／ business@390 3.77・@1440 4.35
   ＝8測定中5つが 4.5 割れ。原因は写真の明るい所。
   写真を薄くする案（opacity .34→.20）は検品の実測で合格するが、写真がほぼ消える。
   写真の濃さ（opacity .34）は変えず、明るさだけ .98→.72 に落とす＝ディテールは残る。
   🚨 数字は検品の実測（手計算の見込み 4.94 は外れ。::after の青かぶりを
   計算に入れていなかった）。実測 4.62〜7.88 で 10測定すべて合格、
   一番きついのが service@390 の 4.62＝余裕は 0.12 しかない。
   ここで写真を明るく戻すと割れる。
   🚨 ラベルの色で余裕を足そうとしても無駄。.phead .en は 2301行ですでに #fff で、
     1486行の #F0F7FE は負けて効いていない（上書きを足しても変化0を実証済み）。
     余裕を足す手は「写真をさらに暗くする」か「文字の後ろにスクリムを敷く」の2つだけ。
   ※ .gate>img も brightness を持つが、index.html の inline style に
     上書きされて実際は .6。ここの .72 と揃っているわけではない。
   ※ 影 text-shadow(1661行) を地に数えると service@390 は 5.31。0.12 は最悪の見積もり。
   ========================================================================= */
.phead>img{filter:grayscale(var(--ph-gray)) contrast(1.12) brightness(.72)}

/* 2026-09-09 おでん指示「ここ、かぎかっこつけるとか、ずっとを主張するような形に」。
   🚨 最初 #F2C594（既存の橙）にしたが、青地 rgb(18,96,182) で明暗比 3.94:1 と基準割れだった
      （style.css:15 に「この色は4.0:1で足りない」と自分で書いてある）。
      色ではなく、字の大きさと太さで主張させる（白のままなら 6.36:1 で基準内） */
.rnp-h .em-zutto,.em-zutto{font-weight:800;font-size:1.12em;letter-spacing:.02em}

/* =========================================================================
   2026-09-10 おでん「携帯のUIを完璧にして／パソコンで見るのと同じようなクオリティで見やすい形に」
   ヒーローをスマホでだけ「全面カバー」→「16:10の帯＋文字は下」へ。

   🚨 なぜ変えるか（実測）：元動画は 1280x720。スマホの器は 390x844（縦長）なので
      object-fit:cover は横を大きく切る。見えている横幅は PC 1440 で 97.8%、SP 390 で 24.4%。
      車体の社名ロゴ「8 Ryūtsū Service」は元画の x820〜1250（430px幅）にあり、
      SPの窓（横312px相当）には物理的に入らない。object-position では直らない。
      高さを 560px にしても 39%、470px でも 47%（「8」しか入らない）。
      16:10 の帯にすると 90% が見え、ロゴ・トラック・空・2人が全部入る＝PCと同じ絵になる。
   🚨 同じ手を採用ページで先に採っている（saiyo2.css:988〜1002「スマホは全面をやめ、
      映像を横長のまま上に置いて、文字はその下に置く」）。トップもそこに揃える。
   🚨 文字は写真の上でなく無地の青地に乗るので、左の濃いスクリム（::before）は不要。
      白 on #0E4F9E ＝ 7.98:1（基準4.5の1.8倍）。明暗比0件を落とさない。
   ========================================================================= */
@media(max-width:720px){
  .bluehero{min-height:0;display:block;padding-bottom:0;background:#0E4F9E}
  /* 帯。inset:0 の全面指定（1691行）と 100svh（1711行・1849行）をここで解除する */
  .bh-photo{position:relative;inset:auto;width:100%;aspect-ratio:16/10;
    margin:0;order:0;overflow:hidden;z-index:0}
  .bh-photo video,.bh-photo img{width:100%;height:100%;object-fit:cover;
    object-position:center center}
  /* 写真の上に文字が乗らなくなったので、幕は両方とも外す */
  .bluehero::before,.bluehero::after{display:none}
  .bluehero .bh-in{position:relative;z-index:2;display:block;min-height:0;
    padding:30px 24px 40px}
  .bluehero h1{text-shadow:none}
  .bh-lead,.bh-en{text-shadow:none}
  .bh-scroll{display:none}
}
@media(max-width:360px){
  .bluehero .bh-in{padding:26px 20px 34px}
}

/* ---- スマホで字が小さすぎた所（PCとの比を戻す。2026-09-10 実測） ---- */
@media(max-width:720px){
  /* 眉 10px→12px（PC 13.5px）。求人の肩書き行が10pxだった */
  .bluehero .bh-en{font-size:12px;letter-spacing:.14em}
  /* 導入 14px→16px（PC 18px）。本文が読める最小に戻す */
  .bluehero .bh-lead{font-size:16px;line-height:1.75;max-width:26em}
}
@media(max-width:360px){
  .bluehero .bh-lead{font-size:15px;line-height:1.7}
}

/* =========================================================================
   2026-09-10 スマホUI再検品の差し戻し
   ========================================================================= */
/* 🚨 私が壊した件：眉を10→12pxに上げたら、幅320〜338pxで
   「浦安本社・埼玉営業所」が右へ19px出て「所」が切れた（実測・器280pxに対し必要319px）。
   .bh-en は display:flex なので既定で1行に固定され、どこでも折り返せなかったのが本当の原因。
   字を小さく戻すのではなく、部品の間（「／」の所）で折り返せるようにする。 */
.bluehero .bh-en{flex-wrap:wrap;row-gap:4px}

/* 🚨 狭い端末の逃げ道が 360px で切れているのに、壊れる帯は 383px まで続いていた
   （2026-09-10 実測）。iPhone SE3・SE2・12mini・13mini はちょうど 375px。
   ・ヘッダーの副題が「創業1986年 ／ 家電の配送・…」と三点リーダで切れる（362〜382）
   ・メニュー釦が「メニ...」になる（362〜380）
   ・.btn の min-width:300px が .formprep の最小幅を342pxに固定し、
     contact の相談カードの右枠が画面外に出る（361〜365）／右余白が24→9pxに潰れる（366〜379）
   360pxの塊ごと広げると、いちばん台数の多い390pxまで字が小さくなるので、
   ここは「切れる3つ」だけを 383px まで延ばす。 */
@media(min-width:361px) and (max-width:383px){
  .logo span{display:none}
  .mtoggle{padding:0 8px;font-size:13px}
  .btn{min-width:0}
}

/* 🚨 動きを減らす設定のとき、transition が消えるので motion.js の transitionend が
   永久に発火せず、will-change が付きっぱなしになる（実測 index15／about30／business21／service13）。
   一度この打ち消しを 349行のブロックに書いたが、**同じ詳細度で後ろにある 369行・657行に負けて
   実測が1個も減らなかった**（メディアクエリは詳細度を上げない）。だから末尾に置く。
   saiyo2.css:500-502 が効いているのも、saiyo2.css が style.css の後に読まれるから。 */
@media(prefers-reduced-motion:reduce){
  .js-rise [data-rise],html.js-rise [data-in]{will-change:auto}
}

/* PC のヒーロー「SCROLL」が動画の明るい所に乗って明暗比 2.40（基準4.5）だった。
   位置を動かすとクイックレールと当たるので、字の後ろに薄い足場を敷く。 */
.bh-scroll{padding:8px 10px;border-radius:999px;background:rgba(5,24,52,.42);
  text-shadow:0 1px 10px rgba(3,20,44,.9)}