/* ===== style.css ===== */
/* =========================================================
   MRフロア TOP  —  参考①ライト株式会社(light-sendai.com)に忠実
   白ベース／温黒#231815／黄#FFE200／全面ブリード写真／中央寄せ英字見出し
   ========================================================= */
:root{
  --ink:#231815; --yellow:#FFE200; --white:#FFFFFF;
  --paper:#F5F4F2; --line:#e4e2df; --muted:#6b6560; --gold:#EDCF61;
  --ease:cubic-bezier(0.19,1,0.22,1);
  --wrap:1200px; --header-h:60px; --gutter:32px;
  /* スマホ追従バー(.fixbar)の高さ。バー自身・body下余白・ヒーローのコピー位置がこの1値を参照する＝バーの中身を変えたらここだけ直す */
  --fixbar-h:68px;
  /* ヘッダーロゴはヘッダー天から下方向へはみ出す設計。下層のページヘッダーはこの高さぶん逃げる必要がある
     ★この値は「レイアウトが逃げる量」の正＝.pagehead の上余白などが参照する。**スクロールで縮めても動かさない**
       （動かすとページ全体の余白がスクロールに合わせて伸縮し、レイアウトが揺れる） */
  --header-logo-h:250px;
  /* ロゴの**描画**高さ。天端では --header-logo-h と同値、スクロール後は縮める（下の .scrolled）。
     ★2026-07-28 ユーザー承認: 大きなロゴがスクロール中も画面左上に居座り本文を覆っていた
       （実測 会社情報テーブルで PC182px / SP72px の重なり＝「社名／MRフロア」が黒地に潜って読めない）。
       天端の見た目（＝承認済みトップのファーストビュー）は変えず、スクロール後だけ縮める。 */
  --logo-now:var(--header-logo-h);
  --en:"Oswald",sans-serif; --display:"Anton",sans-serif;
}
*{box-sizing:border-box;}
/* 固定ヘッダーの下にアンカー先が隠れないようスクロール余白を確保 */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);}
body{margin:0;background:var(--white);color:var(--ink);
  font-family:"Noto Sans JP","Yu Gothic Medium",YuGothic,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:17px;line-height:1.9;font-weight:500;-webkit-font-smoothing:antialiased;letter-spacing:.03em;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
/* ---------- フォーカス可視化（キーボード操作の現在地／既定リングは白基調では弱いので明示） ---------- */
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}
/* 暗地・写真上・黄地の文脈は黄／インクを反転させて視認 */
.recruit-band :focus-visible,.cta-band :focus-visible,.fixbar :focus-visible,
.recruit-tab:focus-visible,footer.site .bar :focus-visible{outline-color:var(--yellow);}
footer.site .fmain :focus-visible{outline-color:var(--ink);}
/* スキップリンク：フォーカス時だけ出現（キーボード・SRユーザーが本文へ直行） */
.skip{position:fixed;left:16px;top:-120px;z-index:1200;background:var(--ink);color:#fff;
  padding:13px 22px;font-size:15px;font-weight:700;letter-spacing:.06em;transition:top .25s var(--ease);}
.skip:focus{top:12px;}
.skip:focus-visible{outline-color:var(--yellow);}
/* スキップ先の main は tabindex=-1 でフォーカスを受けるが、ページ全体を囲む巨大なリングは出さない */
main:focus,main:focus-visible{outline:none;}
/* 視覚的に隠して支援技術にだけ渡す */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
/* 写真トーン：①ライトは明るい・高彩度・抜けのあるトーン。暗転・減彩はかけない（人物写真を活かす） */
.biz .tile .ph img,.works .w .ph img{filter:saturate(.98) contrast(1.05) brightness(1.02);}
.hero .slides .slide,.recruit-band .bg,.mission-ph img{filter:saturate(1.03) contrast(1.02) brightness(1.03);}
/* ★ガターは --gutter に集約。padding のショートハンド（.pad / .inner 等）を後から当てると
   .wrap の左右ガターが 0 に潰れる（同詳細度で後勝ち）＝RECRUIT/MESSAGE/フッターが画面端に密着する事故の原因。
   ショートハンドで上下だけ指定したい場合は必ず左右に var(--gutter) を書くこと */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);}
.pad{padding:clamp(72px,11vw,140px) 0;}
.sec-ink{background:var(--ink);color:var(--white);}
.sec-paper{background:var(--paper);}

/* ---------- 中央寄せセクション見出し（①の型：大英字＋極小和文サブ） ---------- */
/* .lbl 自体が <h2>（セクション見出し）。h2既定のmargin/font-size/weightは打ち消し、見た目は従来の div+p 構成と同一に保つ */
.lbl{text-align:center;margin:0 0 clamp(40px,6vw,72px);font-size:inherit;font-weight:inherit;line-height:inherit;}
/* 見出しは横120%ストレッチ＝サイトの特徴（グリフを横に広げる）。inline-blockで語幅にし、はみ出しを防ぐ
   ★適用範囲の確定ルール（2026-07-27・ユーザー決定／下層ページも同じ）:
     適用する = ①英字見出し `.lbl .en`（＋装飾ゴースト英字）② h1（和文でも可）＝トップのヒーローh1と、**下層ページのページタイトル帯のh1**
     適用しない = h1以外の和文見出し（h2/h3/blockquote/RECRUITキャッチ等）。長文で歪み・折返しリスクが出るため等倍のまま。
   下層を作るときは「h1だけ横120%」を守ること（transform-originは寄せ方向に合わせる：中央寄せ=center／右寄せ=right／左寄せ=left） */
.lbl .en{font-family:var(--en);font-weight:700;line-height:1;margin:0;
  font-size:clamp(30px,5vw,50px);letter-spacing:.04em;color:var(--ink);
  display:inline-block;transform:scaleX(1.2);transform-origin:center;}
/* 左寄せ見出し（AREA）。h2自体を2カラムの左列に入れて h3「全国、どこへでも。」と一体にする（旧: グリッド外＝align-items:centerで間が230px空き間延びしていた） */
.lbl.area-lbl{text-align:left;margin-bottom:18px;}
.lbl.area-lbl .en{transform-origin:left;font-size:clamp(28px,4vw,44px);}
.lbl.area-lbl .jp{text-align:left;letter-spacing:.2em;}
.lbl .jp{display:block;margin:.7em 0 0;font-size:14px;font-weight:700;letter-spacing:.28em;color:var(--muted);}
.lbl.light .en{color:var(--white);}.lbl.light .jp{color:rgba(255,255,255,.6);}
.lbl .en.hl{background:var(--yellow);padding:.04em .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone;}

/* ---------- VIEW MORE ボタン（①：白抜きピル＋▶円） ---------- */
/* hover=左から右へ黄色が塗られる(wipe)。塗られたら文字はインクで可読。
   ★2026-07-28（ユーザー指示「円の左右センターに三角を」）: ▶グリフ描画をやめ **CSSの三角(::before)** に変更。
   理由=`display:grid;place-items:center` の中身がテキストのみだと**匿名グリッドアイテムが全幅にストレッチ**し、
   justify-items:center が効かず「左端＋padding-left」の位置に落ちていた（実測: 26px円で三角の重心が中心から約-4px＝目視で明確に左寄り）。
   さらに ▶(U+25B6) はフォント依存（Oswaldに無くOS記号フォントへフォールバック＝環境で字面が変わる）でセンター量が固定できない。
   ::before は **absolute で円の中心に置く**（フローに残る▶テキストノードと同居させると、grid/flexの行送りに
   引きずられて上下が中心からズレるため。実測: gridのままだと三角が上半分に寄り高さ方向で -6px 級）。
   視覚センター＝三角の**重心（底辺から1/3の位置）**を円心に合わせるため、bboxを `--tri-nudge`(= w/6) だけ右へ寄せる。 */
.more{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:16px;font-family:var(--en);font-weight:600;
  letter-spacing:.14em;font-size:14px;padding:16px 20px 16px 34px;border:1px solid var(--ink);border-radius:999px;
  transition:color .4s var(--ease),border-color .4s var(--ease);}
.more::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);}
.more:hover::before{transform:scaleX(1);}
.more:hover{color:var(--ink);}
.more .tri{position:relative;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--white);display:grid;place-items:center;font-size:0;letter-spacing:0;padding:0;transition:background .4s var(--ease),color .4s var(--ease);}
/* CSS三角の共通定義（.more と .news-more の両方。円サイズが違っても三角の実寸は同じ） */
.more .tri::before,.news-fv .news-more .tri::before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;
  --tri-w:7.2px;--tri-h:8.4px;--tri-nudge:calc(var(--tri-w)/6);
  border-style:solid;border-width:calc(var(--tri-h)/2) 0 calc(var(--tri-h)/2) var(--tri-w);
  border-color:transparent transparent transparent currentColor;
  transform:translate(calc(-50% + var(--tri-nudge)),-50%);}
.more:hover .tri{background:var(--ink);color:var(--yellow);}
.more.on-ink{border-color:rgba(255,255,255,.5);color:var(--white);}
.more.on-ink .tri{background:var(--yellow);color:var(--ink);}
.more.on-ink:hover{color:var(--ink);}
.more.on-ink:hover .tri{background:var(--ink);color:var(--yellow);}
.more.solid{background:var(--yellow);border-color:var(--yellow);color:var(--ink);}
.more.solid::before{background:var(--ink);}
.more.solid .tri{background:var(--ink);color:var(--yellow);}
.more.solid:hover{color:#fff;border-color:var(--ink);}
.more.solid:hover .tri{background:var(--yellow);color:var(--ink);}
.ctr{text-align:center;margin-top:clamp(34px,5vw,56px);}

/* ---------- ロゴ（円形エンブレム画像を直置き。旧SVGワードマーク .wm/.bars は画像化に伴い廃止＝CSS削除済） ---------- */
.logo{display:inline-flex;flex-direction:column;gap:7px;}
.logo-img{display:block;height:60px;width:auto;}
header.site .logo-img{height:60px;}
/* 幕の中では主役＝ヘッダー(60px)やフッター(120px)より大きく取る。1440で236px／390で132px */
#intro .logo-img{height:clamp(132px,17vw,236px);}
footer.site .logo-img{height:120px;}

/* ============ オープニング（②：ロゴ＋社名英字→幕を1枚で上へ抜く・分裂なし） ============
   ★2026-07-28 有効化（社長希望・v7で停止していたものを現行のサイトイメージに合わせて作り直し）。
   幕は**白**＝エンブレムが黒ブラシ＋金の意匠で明地でしか成立しない（暗地用の白抜きロゴは未整備）。
   演出の語彙はすべてサイト内から借りる＝新しい視覚体系を持ち込まない:
     ・黄5pxバー … 下層ヒーロー帯（.pagehead .bar）と同じ「視線の起点」
     ・社名英字 "MR FLOOR" … ヒーローのアイブロウ・採用のマーキーと同じ表記／Oswald・字間.34em
       （黄文字は白地に置かない規約があるのでインク色。幕の中で唯一の文字なので色で強めない）
     ・せり上がり … overflow:hidden + translateY のクリップ＝ヒーローH1/サブと同じ作り
     ・幕の下端の黄5px … 下層帯の締めと同じ罫。引き上げる瞬間に「黄の縁がついた1枚の紙」として抜ける
   タイムラインは site.js の HOLD と対応（バー.45s → 英字.62s+.8s が終わってから幕を抜く）。
   ★遅延を変えたら site.js の HOLD も見直すこと。 */
#intro{position:fixed;inset:0;z-index:1000;background:var(--white);display:grid;place-items:center;}
/* 幕の下端の黄罫（引き上げ中に見える／静止中は画面最下端に薄く1本入るだけ） */
#intro::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--yellow);}
#intro .box{text-align:center;}
#intro .logo{align-items:center;}
#intro .logo-img{opacity:0;transform:scale(.965);}
#intro .bar{display:block;width:56px;height:5px;margin:22px auto 0;background:var(--yellow);transform:scaleX(0);}
#intro .words{margin-top:15px;overflow:hidden;}
/* text-indent＝字間ぶんの右余りを打ち消して視覚的に中央へ（letter-spacingは最後の字の後ろにも入る） */
#intro .words span{display:block;font-family:var(--en);font-weight:700;font-size:14px;letter-spacing:.34em;
  text-indent:.34em;color:var(--ink);transform:translateY(115%);}
.intro-run #intro .logo-img{opacity:1;transform:none;transition:opacity .8s var(--ease),transform 1s var(--ease);}
.intro-run #intro .bar{transform:none;transition:transform .5s var(--ease) .45s;}
.intro-run #intro .words span{transform:none;transition:transform .8s var(--ease) .62s;}
.intro-done #intro{transform:translateY(-100%);transition:transform 1s var(--ease);pointer-events:none;}
.intro-done #intro .box{opacity:0;transition:opacity .35s ease;}

/* ============ ヘッダー（①：白・薄） ============ */
header.site{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);height:var(--header-h);display:flex;align-items:center;
  transform:translateY(-100%);transition:transform .7s var(--ease) .1s;}
.intro-done header.site{transform:none;}
/* .wrap をヘッダー高さに固定＝ロゴが縦中央寄せで上へはみ出すのを防ぐ（上には出さない・下のみ許容） */
header.site .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%;max-width:none;padding:0 30px;overflow:visible;}
/* ロゴ：背景なしの透過エンブレムを直接載せる（縁はディフリンジ済でチカチカしない）。上端はヘッダー天に固定＝上へはみ出さない・下のみはみ出す。軽い影で写真から浮かせる */
header.site .logo{align-self:flex-start;position:relative;z-index:3;margin-top:0;}
header.site .logo-img{height:var(--logo-now);width:auto;filter:drop-shadow(0 3px 10px rgba(0,0,0,.22));
  transition:height .35s var(--ease);}
/* スクロール後の縮小サイズ。★html.scrolled は site.js が scrollY>40 で付ける（レイアウト用の --header-logo-h は触らない）。
   値は幅ごとに段階化する。理由＝ロゴは左端30pxに固定なのに**コンテンツ列の左端は幅で動く**（`.wrap` は max1200＋ガター32
   ＝1440以上では x≧152 だが1280では72・1100では32まで寄る）。広い幅では大きくても文字に当たらないが、
   狭い幅ではロゴが本文の列そのものに乗る。→ **当たらない幅では大きく／当たる幅では小さく**（実測して決めた値）:
     ≥1400px … 140px（列はx≧152・食い込み0）／1024–1399px … 116px／769–1023px … 96px／≤768px … 80px（下の@media）
   ヘッダー下にはみ出す量＝この値−60px＝スクロール中に左上を覆う帯の高さ。 */
.scrolled{--logo-now:140px;}
/* 範囲指定にしているのは、`max-width` だけで書くと 390px にも一致して ≤768 の指定を打ち消し得るため（記述順に依存させない） */
@media(min-width:1024px) and (max-width:1399px){.scrolled{--logo-now:116px;}}
@media(min-width:769px) and (max-width:1023px){.scrolled{--logo-now:96px;}}
nav.gnav{display:flex;align-items:center;gap:0;}
/* ①ライト型：英字1行。hover=黄帯が左→右にワイプし、通過後に和文へ入れ替わる */
nav.gnav a{font-family:var(--en);font-weight:600;font-size:15px;letter-spacing:.14em;padding:0 13px;position:relative;color:var(--ink);}
/* 斜線は「隣り合う項目の境界＝語間の中央」にグリフ中心を合わせる（左右padが13/13で対称なので left:0 が語間中央、translateXでグリフ中心を一致） */
nav.gnav a+a::before{content:"/";position:absolute;left:0;top:50%;transform:translate(-50%,-52%);color:var(--yellow);font-weight:700;font-size:14px;line-height:1;pointer-events:none;}
nav.gnav a .txt{position:relative;display:inline-grid;overflow:hidden;padding:9px 13px;}
nav.gnav a .txt>span:not(.wipe){grid-area:1/1;display:block;text-align:center;white-space:nowrap;line-height:1;}
nav.gnav a .jp{opacity:0;font-family:"Noto Sans JP";font-weight:700;font-size:14px;letter-spacing:.14em;}
nav.gnav a .wipe{position:absolute;inset:0;background:var(--yellow);transform:scaleX(0);transform-origin:left;z-index:2;pointer-events:none;}
@keyframes navWipe{0%{transform:scaleX(0);transform-origin:left}46%{transform:scaleX(1);transform-origin:left}54%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
@keyframes navEn{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes navJp{0%,49%{opacity:0}50%,100%{opacity:1}}
nav.gnav a:hover .wipe{animation:navWipe .66s var(--ease) forwards;}
nav.gnav a:hover .en{animation:navEn .66s linear forwards;}
nav.gnav a:hover .jp{animation:navJp .66s linear forwards;}
nav.gnav a.hdr-ig{margin-left:14px;padding:0;width:38px;height:38px;flex:0 0 38px;border:1px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .3s var(--ease),color .3s var(--ease);color:var(--ink);}
.hdr-ig::before{display:none!important;}
nav.gnav a.hdr-ig:hover{background:var(--ink);color:#fff;}
.hdr-ig svg, .hdr-ig img{width:25px;height:25px;}
.burger{display:none;width:48px;height:48px;background:none;border:none;flex-direction:column;gap:6px;cursor:pointer;padding:0;align-items:center;justify-content:center;}
.burger span{width:26px;height:2px;background:var(--ink);transition:.3s var(--ease);}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* 縦組み「採用情報はこちら」タブ（①署名） */
.recruit-tab{position:fixed;left:0;top:44%;z-index:95;background:var(--ink);color:#fff;writing-mode:vertical-rl;
  padding:20px 11px;font-size:14px;font-weight:700;letter-spacing:.26em;border-radius:0;
  display:flex;align-items:center;gap:0;transform:translateX(-100%);
  transition:transform .6s var(--ease) .6s,background .3s var(--ease),color .3s var(--ease),padding .3s var(--ease),box-shadow .3s var(--ease);}
.intro-done .recruit-tab{transform:none;}
/* hover：ダーク→黄への色反転＋罫線がインク色で伸びる＋押し出し＋影で「押せる」を明確化 */
.recruit-tab:hover{background:var(--yellow);color:var(--ink);padding-left:17px;box-shadow:4px 6px 18px rgba(0,0,0,.28);}
.recruit-tab::after{content:"";width:2px;height:22px;background:var(--yellow);margin-top:-10px;transition:height .3s var(--ease),background .3s var(--ease);}
.recruit-tab:hover::after{background:var(--ink);height:46px;}

/* ============ ヒーロー（全面ブリード） ============ */
.hero{height:100svh;min-height:520px;position:relative;overflow:hidden;background:var(--ink);}
.hero .slides,.hero .slides .slide{position:absolute;inset:0;}
.hero .slides .slide{background-size:cover;background-position:center;opacity:0;transform:scale(1.08);
  transition:opacity 1.6s ease,transform 7s linear;}
.hero .slides .slide.on{opacity:1;transform:scale(1);}
/* スクリム（可読性の担保）：中段=写真の明るさを残し、コピーが載る下段だけ落とす。
   ユーザー指示で一段薄く（下端 .88→.60）。H1/サブ本文はAAを維持する範囲で最小限の濃度に留める＝実測 H1 3.7:1・サブ 5.8:1（要3/4.5） */
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,6,5,.48) 0%,rgba(10,6,5,.14) 26%,rgba(10,6,5,.24) 52%,
  rgba(10,6,5,.58) 68%,rgba(10,6,5,.76) 84%,rgba(10,6,5,.82) 100%);}
.hero .copy{position:absolute;left:clamp(20px,4vw,60px);right:clamp(20px,4vw,60px);bottom:clamp(40px,8vh,96px);z-index:3;color:#fff;text-align:right;}
.hero .copy:has(h1.hero-copy2){bottom:clamp(8px,1.6vh,24px);left:clamp(52px,5vw,72px);right:clamp(8px,1.2vw,20px);}
.hero:has(.copy h1.hero-copy2) .scroll{display:none;}
/* Tweaks: キャッチコピー切替 */
.tw-copy-orig{display:none;}
html[data-tw-copy="orig"] .hero .copy .tw-copy-new{display:none;}
html[data-tw-copy="orig"] .hero .copy .tw-copy-orig{display:block;}
html[data-tw-copy="orig"] .hero .copy{text-align:right;}
html[data-tw-copy="orig"] .hero .scroll{display:flex;}
/* Tweaks: 写真の見え方 */
html[data-tw-mood="dramatic"] .hero .slides .slide{filter:saturate(.85) contrast(1.12) brightness(.82);}
html[data-tw-mood="dramatic"] .hero::after{background:linear-gradient(180deg,rgba(10,6,5,.55) 0%,rgba(10,6,5,.18) 26%,rgba(10,6,5,.28) 52%,
  rgba(10,6,5,.62) 68%,rgba(10,6,5,.78) 84%,rgba(10,6,5,.84) 100%);}
/* Tweaks: 見出しの動き */
html[data-tw-motion="punch"] .hero .copy h1.hero-copy2{letter-spacing:.02em;transform:scale(1.03);transition:transform .4s ease;}
html[data-tw-motion="punch"] .intro-done .hero .copy h1 .line i{transition-duration:.65s;transition-timing-function:cubic-bezier(.2,1.4,.3,1);}
/* 黄アイブロウ「MR FLOOR」：社名の英字表記＝WCAG 1.4.3のロゴタイプ/ブランド名例外として扱う方針をユーザーが決定（2026-07-27）。
   例外扱いならコントラスト確保のための拡大は不要なので、v13で上げた19pxを元の14pxへ戻す。text-shadowは知覚的な可読の補強として維持 */
.hero .copy .ey{font-family:var(--en);font-weight:700;letter-spacing:.34em;font-size:14px;color:var(--yellow);display:block;margin-bottom:14px;overflow:hidden;text-shadow:0 2px 12px rgba(0,0,0,.6);}
.hero .copy .ey span{display:block;transform:translateY(110%);}
/* KEEP: ヒーローH1を左右ガター際にかっちり収める字幅依存の微調整値。font-size下限56px=390で溢れない上限／margin右 -.7em=句点「。」を右ガターへハング／scaleX1.2=シグネチャ。フォント・文言変更時のみ再調整。安易に単純化・数値丸め・削除しない
   ★2026-07-27（ユーザー承認のうえKEEP値を更新）: ハングを -.7em → -.76em。H1のインク右端がサブコピーより約10px内側だったのを揃えた。
   実測（1920/1440/1280/1024/900の5幅・サブとの差）: -.70em=-10/-11/-9/-6/-5 → **-.76em=-1/-2/-1/+1/+1**（-.77em以上は広い幅で行き過ぎる）。
   px固定オフセットでは幅ごとの必要量（10/11/9/6/5px）に追従できないため em で持つ。scratchpad sweep.mjs で再測定できる */
.hero .copy h1{margin:0 -.76em 0 0;font-weight:700;line-height:1.16;font-size:clamp(56px,10.4vw,152px);letter-spacing:.01em;text-shadow:0 2px 24px rgba(0,0,0,.42);
  display:inline-block;transform:scaleX(1.2);transform-origin:right;}
/* /KEEP */
.hero .copy h1.hero-copy2{margin:0;font-family:'Yuji Syuku',var(--display),serif;font-weight:400;line-height:1.04;font-size:clamp(28px,min(8.4vw,17svh,calc((100vw - 100px)/13)),210px);letter-spacing:.01em;text-shadow:0 2px 24px rgba(0,0,0,.42);
  display:block;transform:none;max-width:100%;}
.hero .copy h1.hero-copy2 .line{white-space:nowrap;}
.hero .copy h1.hero-copy2.sp-copy2{display:none;}
.sp-br{display:none;}
/* PC専用の改行（REASONの説明を2行に整える）。スマホでは行が短くなって「す。」等の孤立行を作るので消す */
.pc-br{display:inline;}
.hero .copy h1 .line{display:block;overflow:hidden;}
.hero .copy h1 .line i{display:block;font-style:normal;transform:translateY(115%);}
.hero .copy .sub{margin:18px -.5em 0 0;font-size:clamp(14px,1.7vw,17px);font-weight:600;overflow:hidden;text-shadow:0 2px 12px rgba(0,0,0,.5);}
.hero .copy .sub span{display:block;transform:translateY(110%);opacity:0;}
.intro-done .hero .copy .ey span{transform:none;transition:transform 1s var(--ease) .5s;}
.intro-done .hero .copy h1 .line i{transform:none;transition:transform 1.1s var(--ease);}
.intro-done .hero .copy h1 .line:nth-child(1) i{transition-delay:.65s;}
.intro-done .hero .copy h1 .line:nth-child(2) i{transition-delay:.8s;}
.intro-done .hero .copy .sub span{transform:none;opacity:1;transition:transform 1s var(--ease) 1s,opacity .8s ease 1s;}
.hero .scroll{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;z-index:3;color:#fff;
  font-family:var(--en);font-size:12px;letter-spacing:.3em;display:flex;flex-direction:column;align-items:center;gap:10px;}
/* 静的な白罫線(::after)は削除。動く黄色ラインのみ表示 */
.hero .scroll .track{position:relative;height:46px;}
.hero .scroll b{width:1px;height:46px;background:var(--yellow);position:absolute;bottom:0;left:50%;animation:sc 2.2s var(--ease) infinite;}
@keyframes sc{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}}

/* ============ ミッション導入（①：中央・大きな一文） ============ */
.intro-msg{text-align:center;}
.intro-msg h2{font-size:clamp(21px,3.4vw,36px);font-weight:700;line-height:1.85;margin:0 0 30px;letter-spacing:.04em;}
.intro-msg h2 em{font-style:normal;background:var(--yellow);padding:.04em .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.intro-msg p{max-width:46em;margin:0 auto;color:var(--muted);font-size:17px;}

/* ============ RECRUIT バナー ============ */
.recruit-band{position:relative;overflow:hidden;background:var(--ink);}
.recruit-band .bg{position:absolute;inset:0;background:url("https://cdn.cuezilla-cms.com/enjoyworks-test27.tech/images/1478/worker-recruit.webp") center/cover;opacity:.55;}
.recruit-band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(35,24,21,.62) 0%,rgba(35,24,21,.42) 100%);}
/* 左右は必ず var(--gutter)（旧: `padding:X 0` で .wrap のガターを潰し、文字が画面端に密着していた） */
.recruit-band .inner{position:relative;z-index:2;padding:clamp(80px,12vw,150px) var(--gutter);text-align:left;color:#fff;}
.recruit-band .ghost{font-family:var(--display);font-size:clamp(56px,13vw,150px);line-height:.9;color:rgba(255,255,255,.1);letter-spacing:.02em;}
.recruit-band .cp{font-size:clamp(20px,3vw,32px);font-weight:700;margin:.5em 0 10px;}
.recruit-band .cp em{font-style:normal;color:var(--yellow);}
.recruit-band p{max-width:32em;margin:14px 0 34px;opacity:.9;font-size:17px;}

/* ============ BUSINESS（①：大画像タイル＋黄角アクセント＋タグ） ============ */
.biz{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);}
.biz .tile{position:relative;}
.biz .tile .yellow{position:absolute;left:-14px;bottom:-14px;width:60%;height:62%;background:var(--yellow);z-index:0;}
.biz .tile .ph{position:relative;z-index:1;aspect-ratio:4/3;overflow:hidden;}
.biz .tile .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.biz .tile:hover .ph img{transform:scale(1.05);}
.biz .tile .tag{position:absolute;left:0;bottom:0;z-index:2;background:var(--ink);color:#fff;padding:12px 24px;font-weight:700;font-size:17px;transition:background .3s var(--ease),color .3s var(--ease);}
.biz .tile .tag small{display:block;font-family:var(--en);font-size:12px;letter-spacing:.16em;color:var(--yellow);font-weight:700;transition:color .3s var(--ease);}
.biz a.tilelink{display:block;}
.biz .tile:hover .tag{background:var(--yellow);color:var(--ink);}
.biz .tile:hover .tag small{color:var(--ink);}
.biz .meta{margin-top:24px;}
.biz .meta p{margin:0 0 14px;color:var(--muted);font-size:16px;}

/* ============ NUMBERS（実績：床写真ブリード＋明るいオーバーレイで白基調維持・巨大数字で掴む） ============ */
.numbers-sec{position:relative;overflow:hidden;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(64px,8vw,104px) 0;}
.numbers-sec .lbl{margin-bottom:44px;}
/* ★背景は白オーバーレイ越しに見えるため、明るい床だと白飛びして質感が消える。
   グレーの現場床（floor-numbers）＝白の下でもテクスチャが残る素材を選んでいる。差し替え時は明度に注意 */
.numbers-sec .bgph{position:absolute;inset:0;background:url("https://cdn.cuezilla-cms.com/enjoyworks-test27.tech/images/1478/floor-numbers.webp") center/cover;filter:saturate(.9) contrast(1.02) brightness(1.05);}
/* オーバーレイを薄めて「もう少しグレー」に（.93/.85 → .88/.77 → **.84/.72**・ユーザー指示で2段階）。
   ★ここを薄くすると文字背面が暗くなる。muted色(#6b6560)の小さいサブ見出しは元々4.6:1しか無く、
   薄めるとAA(4.5)を割るため、このセクションのサブ見出しだけインク色にしてある（下の .lbl .jp）。
   さらに暗くしたい場合も同じ順序で確認すること＝オーバーレイ→文字色の順。 */
.numbers-sec::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,255,255,.72));}
.numbers-sec .lbl .jp{color:var(--ink);}
.numbers-sec .wrap{position:relative;z-index:2;}
/* 3項目はコンテンツ幅(1200)より広げてはみ出す（wrap外・ビューポート基準で左右へ展開） */
.numbers{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);max-width:1640px;width:calc(100% - clamp(24px,4vw,72px));margin:0 auto;}
.numbers .n{text-align:center;padding:14px clamp(10px,2vw,44px);border-right:1px solid rgba(35,24,21,.14);}
.numbers .n:last-child{border-right:none;}
.numbers .n b{display:block;font-family:var(--display);color:var(--ink);font-size:clamp(52px,8.6vw,114px);line-height:.9;letter-spacing:.03em;white-space:nowrap;}
.numbers .n b small{font-size:.3em;color:var(--muted);font-family:"Noto Sans JP";font-weight:700;letter-spacing:.05em;margin-left:.26em;}
/* 「全国対応」は全字同サイズ（対応も全国と同じ大きさ）でセル幅に収める */
.numbers .n b.jpbig{font-family:"Noto Sans JP";font-weight:900;letter-spacing:.01em;font-size:clamp(44px,6.6vw,92px);}
.numbers .n b.jpbig small{font-size:1em;margin-left:.08em;color:var(--ink);font-weight:900;letter-spacing:.01em;}
.numbers .n span{display:block;margin-top:16px;font-size:clamp(15px,1.5vw,18px);letter-spacing:.12em;color:var(--ink);font-weight:700;}

/* ============ REASON（選ばれる理由：エディトリアル・大番号リスト＋縦写真） ============ */
.reason-wrap{display:grid;grid-template-columns:1fr .82fr;gap:clamp(36px,5vw,72px);align-items:center;}
/* 5つの理由は順序リスト（<ol>）。番号01〜05は装飾グリフで、順序情報はリスト構造が持つ */
.reason{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;}
.reason .r{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;padding:22px 0;border-top:1px solid var(--line);}
.reason .r:last-child{border-bottom:1px solid var(--line);}
/* 数字はベタ黄（縁取りなし＝野暮ったさ回避／可読性は不問の装飾数字） */
.reason .r .no{font-family:var(--display);font-size:clamp(58px,6.6vw,90px);line-height:1;color:var(--yellow);}
.reason .r .txt b{display:block;font-size:clamp(17px,2vw,21px);font-weight:900;line-height:1.4;}
/* text-wrap:pretty＝最終行が1〜2文字にならないようブラウザが行分割を調整する。
   PC用の <br class="pc-br"> を消したスマホでは、幅によって「す。」だけの行が残る（390pxで実測）。
   font-sizeを削るより文言・幅の変化に強いのでこちらを採る（未対応ブラウザは従来どおり折り返すだけ＝実害なし） */
.reason .r .txt em{display:block;margin-top:6px;font-style:normal;font-size:15px;color:var(--muted);line-height:1.75;font-weight:500;text-wrap:pretty;}
.reason-ph{position:relative;align-self:stretch;min-height:440px;}
.reason-ph .yellow{position:absolute;right:-16px;top:-16px;width:52%;height:38%;background:var(--yellow);z-index:0;}
.reason-ph .ph{position:relative;z-index:1;width:100%;height:100%;overflow:hidden;}
.reason-ph .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.98) contrast(1.05) brightness(1.02);}

/* ============ WORKS（横スクロールカルーセル＋黄プログレス） ============ */
/* tabindex=0 でキーボードからも横スクロール可（axe: scrollable-region-focusable）。リングは内側に描いて overflow で切られないようにする */
.works-scroller{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px;cursor:grab;scroll-behavior:smooth;}
.works-scroller:focus-visible{outline:3px solid var(--ink);outline-offset:-3px;}
.works-scroller.dragging{cursor:grabbing;scroll-behavior:auto;}
.works-scroller.dragging .w{pointer-events:none;}
.works-scroller::-webkit-scrollbar{display:none;}
/* 1枚目の左端はコンテンツ左端に揃える（1920等の広い画面で見出し・コントロールと360px近くズレるのを解消）。右方向へは従来どおり画面外へ流す */
.works{display:flex;gap:20px;padding:0 var(--gutter);padding-left:max(var(--gutter),calc((100% - var(--wrap))/2 + var(--gutter)));width:max-content;}
.works .w{width:300px;flex:none;}
.works .w .wlink{display:block;}
.works .w .ph{aspect-ratio:4/3;overflow:hidden;background:#000;}
.works .w .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.works .w:hover .ph img{transform:scale(1.05);}
.works .w time{display:block;margin:14px 0 4px;font-family:var(--en);color:var(--muted);font-size:14px;letter-spacing:.06em;}
.works .w .tt{font-weight:700;font-size:16px;line-height:1.6;}
.works .w .tags{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;}
.works .w .tags span{font-size:13px;font-weight:700;letter-spacing:.04em;border:1px solid var(--line);padding:3px 12px;color:var(--muted);}
.works-controls{display:flex;align-items:center;gap:18px;max-width:var(--wrap);margin:30px auto 0;padding:0 var(--gutter);}
.progress{flex:1;}
.progress .bar{height:3px;background:var(--line);position:relative;}
.progress .bar i{position:absolute;left:0;top:0;height:100%;background:var(--yellow);width:30%;transition:left .1s linear,width .1s linear;}
.works-arrow{flex:0 0 auto;width:50px;height:50px;border-radius:50%;border:1px solid var(--ink);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),opacity .3s;}
.works-arrow svg{width:20px;height:20px;}
.works-arrow:hover{background:var(--ink);color:#fff;}
.works-arrow:disabled{opacity:.28;pointer-events:none;}

/* ============ MESSAGE（代表メッセージ：現場写真ブリード＋読みやすい明パネル｜黒地にしない＝白基調維持・締めの主役） ============ */
.message-band{position:relative;overflow:hidden;background:var(--paper);}
.message-band .bgph{position:absolute;inset:0;background:url("https://cdn.cuezilla-cms.com/enjoyworks-test27.tech/images/1478/worker-biz.webp") center/cover;filter:saturate(1) contrast(1.04) brightness(1.04);}
/* .pad と併用しているため左右ガターを明示（同上の潰れ対策） */
.message-band .inner{position:relative;z-index:2;display:flex;justify-content:flex-start;padding-left:var(--gutter);padding-right:var(--gutter);}
.message-band .card{background:rgba(255,255,255,.9);backdrop-filter:blur(3px);padding:clamp(40px,5vw,72px);max-width:700px;box-shadow:0 30px 80px rgba(35,24,21,.16);}
/* ゴースト"MESSAGE"だけカード内で左右センター（本文は左揃えのまま）。scaleXは中央基準で対称に伸ばす */
/* ゴースト英字"MESSAGE"＝カード内の他の行と同じ左端に揃える（左揃えで統一）。
   ★scaleX(1.2)は「見た目だけ」広げてレイアウト幅には効かないため、素のfont-sizeのままだと視覚幅が20%はみ出して右パディングを食い潰す
   （＝以前「左揃えなのに右の余白が狭い」と見えた原因。中央寄せは対症療法で、今度は左端が揃わずガタついた）。
   → font-sizeを1/1.2=0.833倍した値に補正し、**スケール後の視覚幅 ≒ 本文の行幅**にする。左端は本文と一致・右端はカード内に収まる。
   本文より短いぶん右に余白が出るのは仕様（他の行の方が長いため＝ユーザー承認済み） */
.message-band .ghost{display:block;text-align:left;font-family:var(--display);font-size:clamp(40px,6.7vw,86px);line-height:.9;color:rgba(35,24,21,.09);letter-spacing:.02em;transform:scaleX(1.2);transform-origin:left;margin-bottom:-.02em;}
/* 「代表メッセージ」＝このセクションの見出し(h2)。巨大ゴースト"MESSAGE"は装飾(aria-hidden)なので見出しにはしない */
.message-band .jp-sub{display:block;font-family:var(--en);letter-spacing:.3em;font-size:13px;color:var(--muted);font-weight:700;margin:0 0 26px;}
.message-band blockquote{margin:0;font-size:clamp(22px,3vw,36px);font-weight:700;line-height:1.55;letter-spacing:.02em;color:var(--ink);}
.message-band blockquote em{font-style:normal;background:var(--yellow);padding:.04em .14em;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.message-band .who{margin:24px 0 28px;font-size:15px;font-weight:600;color:var(--muted);}
.message-band .who b{color:var(--ink);font-size:19px;font-weight:700;letter-spacing:.06em;margin-left:.4em;}

/* ============ NEWS（FV直下・最新1件のスリム帯） ============
   ★内部classは CueZilla の「トップお知らせteaser」部品と同じ名前（.date/.cat/.title）にしてある＝
     部品に差し替えても同じ見え方になる。番号(partsNNN)には依存しない。 */
/* 罫線はコンテンツ幅ではなく**デバイス幅いっぱい**に引く＝セクション側に持たせる（.wrap内に置くとガター分だけ短くなる） */
.news-fv{border-bottom:1px solid var(--line);}
.news-fv .news-bar{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);
  padding-top:clamp(18px,2vw,24px);padding-bottom:clamp(18px,2vw,24px);}
.news-fv .news-lbl{flex:0 0 auto;margin:0;font-size:inherit;font-weight:inherit;line-height:1;}
.news-fv .news-lbl .en{font-family:var(--en);font-weight:700;font-size:15px;letter-spacing:.24em;color:var(--ink);}
.news-fv .news-item{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);}
.news-fv .date{flex:0 0 auto;font-family:var(--en);font-size:15px;letter-spacing:.04em;color:var(--muted);}
.news-fv .cat{flex:0 0 auto;font-size:13px;font-weight:700;letter-spacing:.06em;border:1px solid var(--ink);border-radius:999px;padding:3px 14px;}
/* 長いタイトルは1行で省略（帯の高さを固定＝FV直後のリズムを乱さない） */
.news-fv .title{min-width:0;font-weight:600;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.news-fv .news-item:hover .title{text-decoration:underline;text-underline-offset:4px;}
.news-fv .news-more{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;font-family:var(--en);
  font-size:14px;font-weight:700;letter-spacing:.14em;white-space:nowrap;}
.news-fv .news-more .tri{position:relative;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--ink);color:#fff;font-size:0;letter-spacing:0;padding:0;transition:background .3s var(--ease),color .3s var(--ease);}
.news-fv .news-more:hover .tri{background:var(--yellow);color:var(--ink);}

/* ============ BLOG（トップ下部・サムネカード3件） ============
   ★セレクタは番号非依存の接尾辞。CueZillaの top-blog-teaser 部品に差し替えてもそのまま当たる。 */
.blog-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,36px);}
.blog-sec .bcard{display:block;}
.blog-sec [class*="_blog_thumbnail"]{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--paper);}
.blog-sec [class*="_blog_thumbnail"] img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.98) contrast(1.05) brightness(1.02);transition:transform .6s var(--ease);}
.blog-sec .bcard:hover [class*="_blog_thumbnail"] img{transform:scale(1.05);}
.blog-sec [class*="_blog_title_wrap"]{padding-top:16px;}
.blog-sec .date{display:block;font-family:var(--en);font-size:14px;letter-spacing:.04em;color:var(--muted);}
.blog-sec .title{display:block;margin-top:8px;font-size:16px;font-weight:700;line-height:1.65;}
/* タイトルの hover 下線は付けない（ユーザー指示）。hoverの手応えはサムネの拡大で出す */

/* ============ INFORMATION（お知らせ一覧・下層/旧トップ用に残置） ============ */
.info-list{max-width:820px;margin:0 auto;}
.info-list a{display:grid;grid-template-columns:120px 92px 1fr;align-items:center;gap:22px;padding:22px 24px;border-bottom:1px solid var(--line);transition:background .3s var(--ease),color .3s var(--ease);}
.info-list a:first-child{border-top:1px solid var(--line);}
.info-list a:hover{background:#727171;color:#fff;}
.info-list a:hover time,.info-list a:hover .tt{color:#fff;}
.info-list a:hover .cat{border-color:#fff;color:#fff;}
.info-list time{font-family:var(--en);color:var(--muted);font-size:15px;letter-spacing:.04em;transition:color .3s;}
.info-list .cat{font-size:13px;font-weight:700;letter-spacing:.06em;border:1px solid var(--ink);border-radius:999px;padding:4px 0;text-align:center;transition:color .3s,border-color .3s;}
.info-list .tt{font-weight:600;font-size:16px;transition:color .3s;}

/* ============ AREA（対応エリア：巨大タイポで「全国対応」を強調＋写真・空箱を廃止） ============ */
.area{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,64px);align-items:center;}
.area>div{position:relative;}
.area>div:first-child{z-index:3;}
/* セクション見出し(h2=AREA/対応エリア)の下に来る大コピー＝h3（.area-h）。見た目は従来の h2 と同一 */
.area .area-h{font-size:clamp(30px,5vw,58px);font-weight:700;margin:0 0 20px;line-height:1.28;letter-spacing:.01em;}
.area .area-h em{font-style:normal;color:var(--ink);}
.area p{color:var(--muted);max-width:30em;}
.area .regions{margin:26px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px;}
.area .regions li{font-size:13px;font-weight:700;letter-spacing:.06em;border:1px solid var(--line);border-radius:999px;padding:6px 16px;color:var(--muted);background:#fff;}
.area-ph{position:relative;align-self:stretch;min-height:340px;z-index:1;}
.area-ph .yellow{position:absolute;left:-16px;bottom:-16px;width:50%;height:40%;background:var(--yellow);z-index:0;}
.area-ph .ph{position:relative;z-index:1;width:100%;height:100%;overflow:hidden;}
.area-ph .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.98) contrast(1.05) brightness(1.02);}
/* KEEP: 受領の日本地図SVGを黄マスク着色。座標(左下・写真左端に少し重なる)/サイズ(約2/3)は微調整済。position:absolute の詳細度が .area>div(0,1,1) に負けるため .area .area-map(0,2,0) で指定＝この詳細度を落とさない。スマホは@900pxで専用座標。安易に単純化しない */
.area .area-map{position:absolute;left:22%;bottom:-4%;width:min(400px,43%);aspect-ratio:776.8/765.35;z-index:2;pointer-events:none;
  background-color:var(--yellow);-webkit-mask:url("https://cdn.cuezilla-cms.com/enjoyworks-test27.tech/images/1478/map.svg") no-repeat center/contain;mask:url("https://cdn.cuezilla-cms.com/enjoyworks-test27.tech/images/1478/map.svg") no-repeat center/contain;}
/* /KEEP */

/* ============ CTA（黒地：黄フッターとバッティングさせない。ゴースト大英字＋黄アイブロウで締めを凝った印象に） ============ */
.cta-band{position:relative;overflow:hidden;background:var(--ink);color:#fff;text-align:center;}
/* hoverで背景画像がフェードイン。
   ★写真は grayscale(1) でモノクロ化する＝床の塗色（黄・緑・赤）に締めの黒帯が引きずられないようにするため。
   ★暗さは「黒の乗算」で作る（mix-blend-mode:multiply）。乗算なので元画像の明暗だけが残り、色は乗らない。
   ★CTA背景は帯が横長（1920で約3.9:1）＝何の写真か分からないトリミングになりやすい。
     被写体が大きく写り、ワイドに切っても内容が読めるカット（職人が研磨機で施工中）を選んでいる。差し替え時も同じ基準で。 */
.cta-band .cta-bg{position:absolute;inset:0;z-index:0;background:url("https://cdn.cuezilla-cms.com/enjoyworks-test27.tech/images/1478/cta-bg.webp") center/cover;filter:grayscale(1) contrast(1.04);opacity:0;transition:opacity .6s var(--ease);}
.cta-band .cta-bg::after{content:"";position:absolute;inset:0;background:#000;opacity:.62;mix-blend-mode:multiply;}
/* :focus-within も併記＝マウスhoverだけでなくキーボードでボタンに到達した時も同じ演出が起きる */
.cta-band:hover .cta-bg,.cta-band:focus-within .cta-bg{opacity:1;}
.cta-band .ghost{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scaleX(1.2);font-family:var(--display);font-size:clamp(88px,23vw,320px);line-height:.8;color:rgba(255,255,255,.05);white-space:nowrap;pointer-events:none;letter-spacing:.02em;z-index:1;}
.cta-band .inner{position:relative;z-index:2;}
.cta-band h2{font-size:clamp(28px,5vw,52px);font-weight:700;margin:0 0 14px;line-height:1.42;}
.cta-band h2 em{font-style:normal;color:var(--yellow);}
.cta-band p{margin:0 0 36px;font-weight:500;color:rgba(255,255,255,.85);}
/* CTA黄ボタンは既に黄なので、wipeはインクで（黄→インク塗り・文字白で可読） */
.cta-band .more{border-color:var(--yellow);background:var(--yellow);color:var(--ink);}
.cta-band .more::before{background:var(--ink);}
.cta-band .more .tri{background:var(--ink);color:var(--yellow);}
.cta-band .more:hover{color:#fff;border-color:var(--yellow);}
.cta-band .more:hover .tri{background:var(--yellow);color:var(--ink);}
/* footer黒ボタンは黄wipe（インク→黄塗り・文字インクで可読） */
.more.dark{background:var(--ink);border-color:var(--ink);color:#fff;}
.more.dark .tri{background:var(--yellow);color:var(--ink);}
.more.dark:hover{color:var(--ink);}
.more.dark:hover .tri{background:var(--ink);color:var(--yellow);}

/* ============ フッター（①：黄色地・インク文字・大TEL・最下部だけ白帯） ============ */
footer.site{background:var(--yellow);color:var(--ink);}
/* 黄色の面積を抑えるためコンパクト化＋メニュー統合。tel/contactバーはインク地に。
   ★2行グリッド＝1行目ロゴ／2行目に「大きな電話番号＋住所＋SNS」と「NAVI」を並べる＝NAVIの開始位置が電話番号と必ず同じ高さになる（従来はロゴ天と揃って高すぎた） */
footer.site .fmain{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;
  /* 左右32px＝.wrap と同じガター。ショートハンドで0にすると下のバー(.bar .wrap)や他セクションと32pxズレ、390pxでは文字が画面端に密着する */
  column-gap:clamp(30px,5vw,70px);row-gap:clamp(18px,2vw,26px);padding:clamp(44px,5vw,58px) var(--gutter) clamp(34px,4vw,42px);}
/* justify-self:start が必須＝グリッド項目は既定でstretchし、.logo(inline-flex/column)の中で画像が横に引き伸ばされて楕円化する */
footer.site .flogo{grid-column:1;grid-row:1;justify-self:start;}
footer.site .fbrand{grid-column:1;grid-row:2;max-width:440px;}
/* 電話番号＝ロゴの下で大きく（黄地×インクで高コントラスト） */
footer.site .ftel{display:block;font-family:var(--en);font-weight:700;font-size:clamp(30px,3.2vw,44px);
  line-height:1.05;letter-spacing:.03em;transition:opacity .3s var(--ease);}
footer.site .ftel:hover{opacity:.6;}
/* 番号の前の小さな「TEL」ラベル（ベースライン揃え・数字の1/3強のサイズ） */
footer.site .ftel .tel-lbl{font-size:.34em;letter-spacing:.18em;margin-right:.1em;}
footer.site .ftel small{display:block;font-family:"Noto Sans JP";font-size:14px;font-weight:500;
  letter-spacing:.1em;color:rgba(35,24,21,.75);margin-top:6px;}
footer.site .fadr{font-size:14px;color:rgba(35,24,21,.75);margin:18px 0 0;line-height:1.9;}
footer.site .socials{display:flex;gap:12px;margin-top:18px;}
/* hoverはヘッダーのIGアイコン（nav.gnav a.hdr-ig）と同じ＝インク塗り＋アイコン白。旧 opacity:.5 フェードは廃止 */
footer.site .socials a{width:44px;height:44px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:background .3s var(--ease),color .3s var(--ease);}
footer.site .socials a:hover{background:var(--ink);color:#fff;}
footer.site .socials svg, footer.site .socials img{width:25px;height:25px;}
footer.site .fnav{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:12px clamp(28px,4vw,56px);align-content:start;}
footer.site .fnav a{font-size:15px;font-weight:600;transition:opacity .3s var(--ease);}
footer.site .fnav a:hover{opacity:.5;}
footer.site .bar{background:var(--ink);color:#fff;}
/* 社名・一文・ボタンを1つのまとまりとして中央に寄せる（space-betweenだと広い画面で中央に大きな空白ができて散らばって見えた） */
footer.site .bar .wrap{display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,44px);padding-top:24px;padding-bottom:24px;flex-wrap:wrap;}
footer.site .co{display:flex;align-items:baseline;gap:clamp(12px,1.6vw,20px);flex-wrap:wrap;justify-content:center;}
footer.site .co .name{color:#fff;font-weight:700;font-size:17px;}
/* 電話番号は上（ロゴ下）へ移したので、このバーはCONTACTへの一言＋ボタンだけにする */
footer.site .co .barlead{color:rgba(255,255,255,.8);font-size:15px;letter-spacing:.06em;}
footer.site .btm{background:#fff;}
footer.site .btm .wrap{padding-top:18px;padding-bottom:18px;font-size:13px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
footer.site .btm a{transition:opacity .3s;}footer.site .btm a:hover{opacity:.5;}

/* ============ スマホ追従バー ============ */
/* 高さは --fixbar-h で確定させる（＝トークンと実寸を必ず一致させ、ヒーローや body 下余白の計算がズレないようにする） */
.fixbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;height:var(--fixbar-h);background:var(--ink);border-top:2px solid var(--yellow);}
.fixbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#fff;font-size:12px;font-weight:600;padding:9px 4px;min-height:58px;}
.fixbar a.cta{background:var(--yellow);color:var(--ink);font-weight:700;}
.fixbar svg{width:22px;height:22px;}

/* ============ リビール ============ */
.reveal{opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.in{opacity:1;transform:none;}

/* ============ レスポンシブ ============ */
@media(max-width:1200px){ nav.gnav a{padding:0 8px;} nav.gnav a .txt{padding:8px 10px;} nav.gnav a .en{font-size:14px;letter-spacing:.1em;} }
@media(max-width:1040px){ nav.gnav a{padding:0 5px;} nav.gnav a .txt{padding:7px 8px;} nav.gnav a .en{font-size:12.5px;letter-spacing:.05em;} nav.gnav a .jp{font-size:12px;} .hdr-ig{margin-left:10px;} }
@media(max-width:900px){
  .area{grid-template-columns:1fr;}
  /* 地図は「テキストと写真の境目・デバイス右寄せ」に置き、写真の上端へ70pxだけ重ねる。
     ★bottomの固定値は破綻する（写真高は元画像3:4がそのまま出て幅に比例＝390pxで435px）。
     そこで写真に aspect-ratio:3/4 を明示（見た目は従来と同一）し、地図のbottomを同じ式で追従させる */
  .area .area-map{top:auto;bottom:calc((100vw - var(--gutter) * 2) * 4 / 3 - 70px);left:auto;right:4%;width:min(160px,40%);}
  .reason-wrap{grid-template-columns:1fr;gap:36px;}
  .reason-ph{min-height:300px;}
  .area-ph{min-height:0;aspect-ratio:3/4;} /* 元画像3:4＝従来の実寸と同じ。地図のbottom計算の基準になるので勝手に変えない */
  .message-band .card{max-width:none;}
  .blog-cards{grid-template-columns:repeat(2,1fr);}
  /* 狭い画面は1カラム縦積み（ロゴ→電話+住所+SNS→NAVI） */
  footer.site .fmain{grid-template-columns:1fr;row-gap:30px;}
  footer.site .fnav{grid-column:1;grid-row:3;}
}
@media(max-width:768px){
  :root{--header-logo-h:140px;}
  .recruit-tab{display:none;}
  /* スマホはH1が2行＝コピー塊が画面の下40%を占めるため、スクリムのランプを早めに立ち上げる（濃度はPCと同じく一段薄く）。
     ★下から測る(0deg)＋各ストップに var(--fixbar-h) を足して、**コピーを追従バーぶん上げたのと同じだけランプも持ち上げる**。
     こうしないと文字が明るい側の帯に入り、360x640で H1 が 3.69→1.70（要3.0）まで落ちる（実測済み）。
     濃度・停止位置は v13追補の値と同じ（180degを0degに読み替えただけ）＝勝手に丸めない */
  .hero::after{background:linear-gradient(0deg,rgba(35,24,21,.66) 0,
    rgba(35,24,21,.62) calc(20% + var(--fixbar-h)),rgba(35,24,21,.48) calc(38% + var(--fixbar-h)),
    rgba(35,24,21,.12) calc(54% + var(--fixbar-h)),rgba(35,24,21,0) calc(78% + var(--fixbar-h)),
    rgba(35,24,21,.34) 100%);}
  /* スマホは「床の、／美容整形。」の2行。
     KEEP: margin右 -.5em は行末の読点「、」句点「。」の右アキを画面外へぶら下げて“字面で右揃え”に見せるための字幅依存値
     （和文の約物は全角枠の左下に寄るため、margin 0 では右端が揃って見えない）。PC側の -.7em と同じ趣旨＝丸め・削除しない */
  .sp-br{display:inline;}
  .pc-br{display:none;}
  .hero .copy h1{font-size:clamp(38px,14vw,72px);margin:0 -.8em 0 0;line-height:1.24;}
  .hero .copy h1.hero-copy2{font-size:clamp(20px,min(10.5vw,calc((100vw - 8px)/13.2),10.6svh),96px);margin:0;line-height:1.16;letter-spacing:0;}
  .hero .copy h1.hero-copy2 .line{white-space:nowrap;}
  .hero .copy h1.hero-copy2.pc-copy2{display:none;}
  .hero .copy h1.hero-copy2.sp-copy2{display:block;}
  .hero .copy:has(h1.hero-copy2){left:8px;right:8px;bottom:clamp(8px,1.6vh,20px);}
  /* /KEEP */
  /* 人物が主役に見える横方向の焦点（cover時はスマホ幅で元画像の約29%しか映らないため、スライドごとに顔の位置へ寄せる） */
  .hero .slides .slide:nth-child(1){background-position:56% center;}
  .hero .slides .slide:nth-child(2){background-position:70% center;}
  .hero .slides .slide:nth-child(3){background-position:65% center;}
  /* header の backdrop-filter が fixed の包含ブロックになるため bottom:0 では潰れる → vh基準の高さで指定 */
  /* 閉じている間は visibility:hidden＝画面外のリンクにキーボードでタブ移動できてしまう問題を解消（transitionで開閉演出は維持） */
  nav.gnav{position:fixed;top:var(--header-h);left:0;right:0;height:calc(100dvh - var(--header-h));background:#fff;flex-direction:column;justify-content:center;gap:26px;transform:translateX(100%);visibility:hidden;transition:transform .5s var(--ease),visibility .5s var(--ease);overflow-y:auto;}
  nav.gnav.open{transform:none;visibility:visible;}
  nav.gnav a{padding:0;} nav.gnav a+a::before{display:none;}
  /* タップ標的をドロワーで44px以上に（従来33px） */
  nav.gnav a .txt{display:block;overflow:visible;padding:11px 0;text-align:center;}
  /* 狭い列で「プライバシーポリシー」が2行に折れるため、列間を詰めて文字を14px（下限）に */
  footer.site .fnav{column-gap:20px;}
  footer.site .fnav a{padding:9px 0;font-size:14px;} /* 14px×lh1.9=26.6 + 上下9px = 44.6px＝タップ標的44px以上を維持 */
  nav.gnav a .en{font-size:20px;line-height:1.1;}
  nav.gnav a .jp{opacity:1;font-size:13px;color:var(--muted);margin-top:4px;font-weight:500;letter-spacing:.1em;}
  nav.gnav a .wipe{display:none;}
  header.site .logo-img{height:var(--logo-now);filter:drop-shadow(0 3px 8px rgba(0,0,0,.22));}
  /* スマホは本文が画面幅いっぱい＝横に逃げ場が無いので、縮小後はヘッダー下に20pxだけはみ出す高さまで落とす */
  .scrolled{--logo-now:80px;}
  header.site .logo{margin-top:0;}
  nav.gnav .hdr-ig{margin:16px 0 0;}
  .burger{display:flex;}
  .fixbar{display:flex;} body{padding-bottom:var(--fixbar-h);}
  /* ★追従バーはヒーロー下端に必ず重なる（バーは画面下に固定・ヒーローは100svh）。
     コピーの下オフセットにバー高さを足して、文字がバーに隠れない・くっつかないようにする。
     ヒーロー自体を縮めない理由＝写真の全面ブリードを保つため（バーは不透明なので写真が隠れても問題ない）。
     この式ならヒーローが画面より高い横向き端末でも、下端を画面下に合わせた時のクリアランスが保たれる */
  .hero .copy{bottom:calc(clamp(40px,8vh,96px) + var(--fixbar-h));}
  .biz{grid-template-columns:1fr;gap:44px;}
  .numbers{grid-template-columns:1fr;} .numbers .n{border-right:none;border-bottom:1px solid var(--line);padding:22px;}
  .numbers .n:last-child{border-bottom:none;}
  .works .w{width:250px;}
  /* ②「もう無理」と言われた床ほど、＝スマホでも1行に収める（21px×15字＋字間では326pxをわずかに超えて折れていた）。
     vw追従で360px級でも1行を維持 */
  .intro-msg h2{font-size:clamp(17px,5.1vw,21px);letter-spacing:.02em;}
  /* 孤立行の解消：本文をスマホのみ句点で4行に固定（HTML側の .sp-br）。
     17pxのままだと1行19字が326px枠を7px超えて再び折れるため、vw追従で1行に収まるサイズへ（14px床は維持）。
     360px級でも最長行「それがMRフロアの…です。」が収まる値＝4vw・字間.02em（実測 360px:271px/枠296px） */
  .intro-msg p{font-size:clamp(14px,4vw,17px);letter-spacing:.02em;}
  /* ④MESSAGE：カードが全幅を覆って写真が意味を成していなかった。上に写真の帯を見せ、焦点を職人の顔へ寄せる */
  /* スマホは職人の顔が白カードに隠れていたため、写真帯を230→340pxに広げ、焦点も下げて頭〜顎が全部見える位置に（実測で選定） */
  /* ★2026-07-28: worker-biz.jpg が 1200×900 → 1700×900（左を塗り足し）に差し替わり、
     従来の 62% だと頭が画面右へはみ出して顔が切れた（実測：390pxで頭 276〜567 / 画面0〜390）。
     360〜768px の全幅で頭が収まる範囲は X=0.78〜0.82 → **80%** に更新。 */
  .message-band .bgph{background-position:80% 22%;}
  .message-band .inner{padding-top:340px;}
  .message-band .card{padding:32px 22px;}
  .info-list a{grid-template-columns:96px 1fr;grid-template-rows:auto auto;gap:6px 14px;}
  .info-list .cat{grid-row:1;grid-column:2;justify-self:start;padding:4px 14px;}
  .info-list .tt{grid-column:1/3;}
  .hero .scroll{display:none;}
  /* NEWS帯: 1行に収まらないので「NEWS＋一覧を見る」／「日付・カテゴリ・タイトル」の2段に。
     タイトルは省略せず折り返す（スマホは省略記号だと何の記事か分からないため） */
  .news-fv .news-bar{flex-wrap:wrap;row-gap:10px;}
  .news-fv .news-lbl{order:1;}
  .news-fv .news-more{order:2;margin-left:auto;min-height:44px;}
  .news-fv .news-item{order:3;flex:1 1 100%;flex-wrap:wrap;row-gap:8px;min-height:44px;align-items:flex-start;}
  .news-fv .title{flex:1 1 100%;white-space:normal;overflow:visible;font-size:15px;line-height:1.7;}
  .blog-cards{grid-template-columns:1fr;}
}
/* iPhone SE/mini級（≤380px）では2列だと「お問い合わせ」「プライバシーポリシー」が折れるので1列に（文字は14px床を維持） */
@media(max-width:380px){
  footer.site .fnav{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
  /* スムーズスクロールも動きの一種＝OSの設定に従って即時移動にする */
  html,.works-scroller{scroll-behavior:auto!important;}
  .hero .copy .ey span,.hero .copy h1 .line i,.hero .copy .sub span{transform:none!important;opacity:1!important;}
  #intro{display:none;}
}

/* =========================================================
   ここから下は【下層ページ共通】（トップ index.html では未使用）
   契約: 2_Claude作業/design.md ／ 骨格: 1_ディレクション/5_サイトマップ・ワイヤー/セクション構成プラン.md
   ========================================================= */

/* ---------- 下層ヒーロー帯（パンくず＋黄バー＋h1＋英字／背面に巨大ゴースト英字）----------
   ヘッダーロゴがヘッダー天から下へ大きくはみ出す設計なので、上余白は --header-logo-h 基準で逃げる。
   その結果できる大きな余白を「意味のある空き」にするため、トップのMESSAGE/CTAと同じ**巨大ゴースト英字**を背面に置く＝署名の再利用。 */
.pagehead{position:relative;overflow:hidden;background:var(--paper);
  padding:calc(var(--header-logo-h) + clamp(16px,2.4vw,32px)) 0 clamp(44px,6vw,76px);
  border-bottom:5px solid var(--yellow);}
/* ★下寄せにするとh1の真後ろに来て可読性を落とす（実測）。ロゴ横に必ず空く上部の帯へ置き、テキストと縦にずらす */
/* ★2026-07-27 ユーザー指示: 小さい英字ラベルは廃止し、この巨大英字1つに絞る＝ページ名の主役はここ。
   色も薄インク → 黄（ブランド色）。主役に格上げしたのでゴーストより一段出す */
.pagehead .ghost{position:absolute;right:0;top:calc(var(--header-h) + clamp(4px,1vw,14px));z-index:0;
  font-family:var(--display);font-size:clamp(72px,15vw,240px);line-height:.78;
  color:var(--yellow);white-space:nowrap;pointer-events:none;
  transform:scaleX(1.2);transform-origin:right;}
.pagehead .wrap{position:relative;z-index:1;}
/* ---------- パンくず（2026-07-27 ユーザー指示で下層ヒーロー帯の「中」→「直下」へ移動）----------
   帯は巨大英字＋黄バー＋h1だけに絞り、パンくずは帯の下端（黄5px）の下に独立した細い白帯として置く。
   ★CueZilla の parts231 もこの .crumb-bar の中へ移植する（移植先が変わっただけで定石は同じ）。 */
.crumb-bar{background:var(--white);}
.crumb-bar .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:var(--en);
  font-size:13px;letter-spacing:.08em;color:var(--muted);
  /* ★ここは .wrap と同じ要素に乗る。padding ショートハンドで書くと .wrap の左右ガターを消してしまう */
  padding-top:16px;padding-bottom:16px;}
/* タップ標的44px以上を確保しつつ、負のマージンで見た目の行位置は動かさない */
.crumb-bar .crumb a{display:inline-block;padding:12px 6px;margin:-12px -6px;}
.crumb-bar .crumb a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px;}
.crumb-bar .crumb .sep{opacity:.6;}
.crumb-bar .crumb [aria-current]{color:var(--ink);font-weight:600;}
/* 黄の短いバー＝セクション見出しと同じ合図。h1の上に立てて視線の起点にする */
.pagehead .bar{display:block;width:clamp(40px,5vw,64px);height:5px;background:var(--yellow);margin-bottom:clamp(16px,2vw,24px);}
/* ★小さい英字ラベル（.pagehead .en）は 2026-07-27 に廃止＝巨大英字1つに絞る（ユーザー指示）。復活させない */
/* KEEP: h1のサイズは §3-2 の契約値 jump:3.0-4.0（下層h1÷本文16px）と対。計測幅1280で約58px÷16px≒3.6。
   横120%は「h1と英字見出しだけ」という確定ルール（design.md §2）。安易に変えない
   ★英字spanが inline-block なので、h1 も inline-block だと同じ行に並んで重なる（実測で発覚）。h1 は block にして必ず改行させる */
.pagehead h1{display:block;margin:.28em 0 0;font-size:clamp(38px,4.6vw,58px);font-weight:700;
  line-height:1.3;letter-spacing:.04em;transform:scaleX(1.2);transform-origin:left;}
/* /KEEP */

/* ---------- 会社情報などの定義テーブル ---------- */
.tbl{width:100%;border-collapse:collapse;}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:20px 4px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.9;}
.tbl tr:first-child th,.tbl tr:first-child td{border-top:1px solid var(--line);}
.tbl th{width:clamp(120px,18vw,220px);font-weight:700;letter-spacing:.06em;}
.tbl td{font-weight:500;color:var(--ink);}

/* ---------- 沿革（1件でも様になる大年号の型）---------- */
.history{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,44px);align-items:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(28px,4vw,48px) 0;}
.history .yr{font-family:var(--display);font-size:clamp(56px,8vw,110px);line-height:1;color:var(--yellow);}
.history .txt b{display:block;font-size:clamp(17px,2vw,21px);font-weight:700;line-height:1.5;}
.history .txt em{display:block;margin-top:8px;font-style:normal;font-size:15px;color:var(--muted);line-height:1.8;text-wrap:pretty;}

/* ---------- アクセス（地図＋住所）---------- */
.access{display:grid;grid-template-columns:1fr .92fr;gap:clamp(28px,4vw,56px);align-items:stretch;}
.access .map{position:relative;min-height:320px;overflow:hidden;background:var(--line);}
.access .map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.04);}
.access .info{align-self:center;}
.access .info dl{margin:0;}
.access .info dt{font-family:var(--en);font-size:13px;letter-spacing:.16em;color:var(--muted);font-weight:700;}
.access .info dd{margin:6px 0 22px;font-size:16px;line-height:1.9;font-weight:500;}
.access .info dd:last-child{margin-bottom:0;}

/* ---------- Instagram導線の帯 ---------- */
.ig-band{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3vw,36px);align-items:center;
  border:1px solid var(--ink);padding:clamp(24px,3.4vw,40px) clamp(22px,3vw,40px);}
.ig-band .ig-mark{width:56px;height:56px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;color:var(--ink);}
.ig-band .ig-mark svg{width:24px;height:24px;}
.ig-band b{display:block;font-family:var(--en);font-size:clamp(18px,2.2vw,24px);letter-spacing:.12em;font-weight:700;}
.ig-band em{display:block;margin-top:6px;font-style:normal;font-size:15px;color:var(--muted);}

@media(max-width:900px){
  .access{grid-template-columns:1fr;}
  /* ★aspect-ratio と min-height の併用は幅を巻き込む（min-height 260 × 4/3 = 347px の幅になり 360px 端末で横スクロール）。
     高さは aspect-ratio に一本化し、幅は 100% に固定する。AREAの地図でも踏んだ罠 */
  .access .map{min-height:0;aspect-ratio:4/3;width:100%;}
  .ig-band{grid-template-columns:auto 1fr;row-gap:20px;}
  .ig-band .more{grid-column:1/3;justify-self:start;}
}
@media(max-width:768px){
  .pagehead{padding-top:calc(var(--header-logo-h) + 20px);}
  /* スマホは幅が狭くゴーストを置く余地が無く、ロゴの黒地に薄グレーが重なって滲んで見える → 出さない。
     締まりは黄バーと下端の黄5px帯で担保する */
  .pagehead .ghost{display:none;}
  .history{grid-template-columns:1fr;gap:14px;align-items:start;}
  /* ★2026-07-28 ユーザー指摘「罫線が多い」: 1行に1本ずつ引くと、会社情報は値が短い項目が9つ並ぶため
     等間隔の線が梯子のように見えていた（実測 326px幅・884px高に10本）。→ **行ごとの罫線を廃止し、表全体を上下2本で囲む**。
     組（ラベル→値）は線ではなく**近接**で読ませる: ペア内2px／ペア間22px。ラベルは14px muted・値は16px ink の対比で支える。
     白基調・余白で見せるサイトのトーンにも合う（線を足すより情報が静かになる）。 */
  .tbl{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .tbl th,.tbl td{display:block;padding:0;border:none;}
  /* ★PC用の `.tbl tr:first-child th,td{border-top}` は詳細度(0,2,2)が上の `.tbl th,td{border:none}`(0,1,1)より高く消えない。
     ブロック化したSPでは th と td が縦に並ぶため、td 側の上罫が「ラベルと値の間の1本」として残る＝実測で発見。明示的に消す */
  .tbl tr:first-child th,.tbl tr:first-child td{border-top:none;}
  .tbl th{padding-top:22px;font-size:14px;letter-spacing:.1em;color:var(--muted);line-height:1.7;}
  .tbl td{padding-top:2px;}
  .tbl tr:last-child td{padding-bottom:22px;}
}

/* 下層の長文本文は行末孤立を作らない（機械判定NG）。数値を削るより文言変更に強い */
.message-band .card p,.tbl td,.access .info dd{text-wrap:pretty;}

/* =========================================================
   2026-07-27 ユーザー指示の反映（下層・会社概要レビュー）
   ========================================================= */

/* ---------- Instagram帯：帯そのものをhover/クリック対象にする ----------
   マークアップ側で <div> → <a> にした。中のボタンは span（.more の見た目のまま）で、
   hover は必ず親（帯）から駆動する＝どこにマウスを乗せても同じ反応になる。 */
.ig-band{color:var(--ink);text-decoration:none;
  transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);}
.ig-band .ig-mark{transition:background .3s var(--ease),color .3s var(--ease);}
.ig-band:hover{background:var(--paper);box-shadow:0 18px 44px rgba(35,24,21,.12);}
/* マークの反転＝ヘッダー／フッターのIGアイコンhoverと同じ語彙（インク塗り＋白アイコン） */
.ig-band:hover .ig-mark{background:var(--ink);color:var(--white);}
/* ボタンは共通の「左→右へ黄wipe」を親hoverで発火させる */
.ig-band:hover .more::before{transform:scaleX(1);}
.ig-band:hover .more{color:var(--ink);}
.ig-band:hover .more .tri{background:var(--ink);color:var(--yellow);}
.ig-band:focus-visible{outline:3px solid var(--ink);outline-offset:4px;}

/* ---------- 下層ヒーロー帯：巨大英字が黄になったのでスマホでも出す ----------
   非表示にしていた理由は「薄グレーがロゴの黒地に滲む」ことだった。黄なら滲まないので復活させる。
   ただしロゴと重ならないよう、スマホは一段小さく・下寄りに置く。 */
@media(max-width:768px){
  /* 絶対配置のままだと h1「会社概要」の真上に重なる（実測）。スマホは通常フローに戻し、
     ロゴの下・パンくずの上に置いて右端へ抜けさせる＝PCの「右端まで届く大英字」と同じ読み味にする */
  .pagehead .ghost{display:block;position:static;text-align:right;
    font-size:clamp(40px,12vw,58px);line-height:.9;margin-bottom:clamp(14px,3vw,20px);}
}

/* ---------- 代表メッセージ（下層版 .mb-lower）：人物を右に置き、顔を白カードに重ねない ----------
   ★構造上の限界（実測して確定）: 写真は 1200×900 の横位置で、頭は画像内 x=619〜883（幅264px）にある。
     section 全体に cover を掛けると、カードが縦に長い下層ページでは容器が縦長になり画像が大きく拡大される
     （900px幅では約1.7倍＝頭だけで450px幅）。**幅が約1080pxを下回ると「カードの右に顔を置く」余地が
     物理的に無くなる**（カード右端より右に出すと今度は頭が画面外へ抜ける）。カードを細くしても解決しない。
   → 1081px以上＝横並び（人物は右）／1080px以下＝写真を上部の帯にして人物を帯の中の右寄りに置く、で切り替える。 */

/* ★2026-07-28: ユーザーが worker-biz.jpg の左側を塗り足し（1200×900 → **1700×900**）。
   頭が画像内 x=1090〜1400（＝64%〜82%）に来たので、**人物は元から右寄り**になった。
   → 帯用に作った別切り出し（worker-biz-right.jpg）は不要になり、**1枚・1つの位置指定に統一**した。
   `background-position:62% 15%` が両モードを兼ねる（X＝狭い側で効く／Y＝広い側で効く。逆側では切り抜きが
   その軸に発生しないので無害）。 */
.mb-lower .bgph{background-position:62% 15%;}

/* 【1201px以上】横並び。人物はカード右端との間に余白を持って立つ（1440で頭 941〜1354 / カード右端852）。
   ★1200px を境にしたのは実測から: 横並びが成立する条件は「頭の実寸(310px×拡大率) ＋ 余白 ≤ 画面幅 − カード右端」。
     拡大率は容器が縦長になるほど上がるので、**約1175pxを下回ると物理的に成立しない**（境界に余裕を見て1200）。 */

/* 【1200px以下】写真は上部の帯。帯の高さを 40vw 基準にすると、
   ・広い側は cover が「幅基準」で効く＝横は切れず、人物は画像そのままの右寄り位置（64〜82%）に出る
   ・狭い側（〜460px級）は「高さ基準」に切り替わる＝縦は切れず、顔が必ず帯に収まる */
@media(max-width:1200px){
  .mb-lower{--mb-band:clamp(300px,40vw,440px);}
  .mb-lower .bgph{inset:0 0 auto;height:var(--mb-band);}
  /* カードは帯の下端に20pxだけ重ねる（層は残しつつ、ゴースト英字が写真の暗部に乗って濁るのを避ける） */
  .mb-lower .inner{padding-top:calc(var(--mb-band) - 20px);}
  /* 帯モードではカードは全幅（700px固定のままだと帯の下に細いカードが浮いて締まらない） */
  .mb-lower .card{max-width:none;}
}

/* ---------- 選ばれる理由 /reason ---------- */
/* 導入リード（左寄せ・ページの入口） */
/* 5理由と同じ section に入れている（別sectionだと .pad が二重に効いて280px級の空白になる）。
   間隔はここで持つ */
/* .page-lead は同型の下層共通版（/reason 以外はこちらを使う） */
/* ★2026-07-28 ユーザー指示「コンテンツ幅いっぱいまでテキスト領域を広げてほしい」: max-width:44em(=748px) を撤去。
   44em はコンテンツ幅1200pxの62%で、**左寄せのため右に450px近い空きが残り「途中で折り返した」ように見えていた**（実測）。
   見出し(h2)も同じ箱に入っているので、開放するとh2も1行に収まりやすくなる。
   ※和文の可読上限（40〜45文字/行）は超える（1200px・17pxで約68文字）＝ユーザー判断で幅を優先。
     読みづらさを戻したい場合は、この1行に max-width を戻す（60em=1020px 程度が中間） */
.reason-lead,.page-lead{margin-bottom:clamp(56px,7vw,96px);}
/* ★2026-07-28 ユーザー指摘（事業内容「MRフロアの対応」）: 白い囲み `.chk` の直後に来るリードが**隙間0pxで密着**していた
   （実測 1440/390とも0px＝囲みの下罫に文字がくっつく）。**見出し（h2/h3）の直後だけは密着が正しい**
   （見出しとリードは一組）ので、それ以外の要素の後ろに来たときだけ上余白を持たせる。
   ★詳細度の注意: `.page-lead:not(:first-child)` は (0,2,0)。打ち消す側も `:not(:first-child)` を残して (0,2,1) にしないと効かない。 */
.reason-lead:not(:first-child),.page-lead:not(:first-child){margin-top:clamp(36px,4.5vw,56px);}
h2+.reason-lead:not(:first-child),h3+.reason-lead:not(:first-child),
h2+.page-lead:not(:first-child),h3+.page-lead:not(:first-child){margin-top:0;}
.reason-lead h2,.page-lead h2{margin:0 0 20px;font-size:clamp(26px,3.6vw,42px);font-weight:700;line-height:1.45;letter-spacing:.02em;}
.reason-lead p,.page-lead p{margin:0;font-size:17px;line-height:1.95;font-weight:500;text-wrap:pretty;}
.page-lead p+p{margin-top:18px;}

/* 5つの理由＝1理由1ブロックのエディトリアル。トップREASONの「大番号＋黄角アクセント」を拡張したもの */
.reason-full{display:grid;gap:clamp(64px,8vw,112px);}
.reason-full .rf{display:grid;grid-template-columns:1fr .95fr;gap:clamp(28px,4.5vw,72px);align-items:center;}
.reason-full .rf .no{display:block;font-family:var(--display);font-size:clamp(64px,8vw,120px);line-height:.85;color:var(--yellow);margin-bottom:.08em;}
.reason-full .rf h3{margin:0 0 18px;font-size:clamp(24px,3.2vw,38px);font-weight:700;line-height:1.4;letter-spacing:.02em;}
.reason-full .rf p{margin:0;font-size:17px;line-height:1.95;font-weight:500;text-wrap:pretty;}
.reason-full .rf .ph{position:relative;}
.reason-full .rf .ph .yellow{position:absolute;right:-16px;top:-16px;width:52%;height:38%;background:var(--yellow);z-index:0;}
.reason-full .rf .ph .im{position:relative;z-index:1;width:100%;aspect-ratio:4/3;overflow:hidden;}
.reason-full .rf .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.98) contrast(1.05) brightness(1.02);transition:transform .6s var(--ease);}
.reason-full .rf:hover .ph img{transform:scale(1.05);}
/* 素材未回収の写真枠（仮置き）。写真ブロックと同じ骨格・同じ比率のまま「まだ入っていない」ことを明示する。
   ※一度 img/map.svg のシルエットを当てたが、受領の地図は角を落とした強いデフォルメで大きく出すと粗さが目立ち、
     ユーザー判断で「写真がよい／無ければプレースホルダー」に確定した（2026-07-28）。 */
.reason-full .ph-holder .im{background:var(--paper);display:grid;place-items:center;
  border:1px dashed rgba(35,24,21,.35);}
.reason-full .ph-holder .note{font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--muted);
  text-align:center;line-height:1.9;padding:0 24px;}
/* 偶数ブロックは写真を左・文を右に反転して単調さを避ける */
.reason-full .rf:nth-child(even) .body{order:2;}
.reason-full .rf:nth-child(even) .ph{order:1;}
.reason-full .rf:nth-child(even) .ph .yellow{right:auto;left:-16px;}

/* 施工事例ゲート */
.gate{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:center;}
.gate .ph{width:100%;aspect-ratio:4/3;overflow:hidden;}
.gate .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.98) contrast(1.05) brightness(1.02);}
.gate .body p{margin:0 0 28px;font-size:17px;line-height:1.95;font-weight:500;text-wrap:pretty;}
.gate .lbl.gate-lbl{text-align:left;margin-bottom:18px;}
.gate .lbl.gate-lbl .en{transform-origin:left;font-size:clamp(28px,4vw,44px);}
.gate .lbl.gate-lbl .jp{text-align:left;letter-spacing:.2em;}

@media(max-width:900px){
  .reason-full .rf{grid-template-columns:1fr;gap:24px;}
  /* スマホは「番号＋見出し＋本文 → 写真」の一列に統一（反転すると読み順が崩れる） */
  .reason-full .rf:nth-child(even) .body{order:0;}
  .reason-full .rf:nth-child(even) .ph{order:0;}
  .reason-full .rf .ph .yellow{width:44%;height:30%;}
  .gate{grid-template-columns:1fr;gap:24px;}
}

/* =========================================================
   下層共通パーツ（2026-07-28・全下層展開で追加）
   事業内容 /business・お問い合わせ・一覧系・プライバシーポリシーで共有する
   ========================================================= */

/* 固定ヘッダーがあるので、ページ内アンカーで飛んだ先が隠れないようにする */
main [id]{scroll-margin-top:calc(var(--header-h) + 24px);}

/* ---------- 節見出し（h3相当）＝黄の縦バー付き。.lbl（巨大英字）より一段下の階層 ---------- */
.sub-h{margin:clamp(48px,6vw,76px) 0 22px;font-size:clamp(20px,2.6vw,28px);font-weight:700;
  line-height:1.5;letter-spacing:.02em;padding-left:18px;border-left:5px solid var(--yellow);}
.sub-h:first-child{margin-top:0;}

/* ---------- 箇条書きの囲み（こんな現場／対応／取扱塗料／できること）---------- */
.chk{border:1px solid var(--line);background:var(--white);padding:clamp(26px,3.4vw,40px);}
.chk+.chk{margin-top:20px;}
.chk ul{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
.chk li{position:relative;padding-left:30px;font-size:17px;line-height:1.9;font-weight:500;text-wrap:pretty;}
/* 黄の短いバー＝サイトの共通合図（•や✓は使わない） */
.chk li::before{content:"";position:absolute;left:0;top:.66em;width:15px;height:4px;background:var(--yellow);}
.chk li b{font-weight:700;}
.chk>p{margin:0;font-size:17px;line-height:1.9;font-weight:500;text-wrap:pretty;}

/* ---------- 3枚カード（対応場所）---------- */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,32px);}
.tri .c .ph{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--paper);
  display:grid;place-items:center;}
.tri .c .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.98) contrast(1.05) brightness(1.02);}
.tri .c p{margin:14px 0 0;font-size:16px;font-weight:700;line-height:1.7;}

/* ---------- 素材未回収の写真枠（汎用）----------
   受領素材に該当カットが無い箇所は、無理に別の写真を当てず「何が要るか」を書いた枠で仮置きする。
   回収リストがそのまま画面に出ている状態にするのが狙い。 */
.imgholder{width:100%;aspect-ratio:16/9;background:var(--paper);
  border:1px dashed rgba(35,24,21,.35);display:grid;place-items:center;}
.imgholder .note,.tri .c .ph .note{font-size:14px;font-weight:700;color:var(--muted);
  text-align:center;line-height:1.9;padding:0 24px;}
.tri .c .ph.is-holder{border:1px dashed rgba(35,24,21,.35);}

/* ---------- 比較表（罫線のみ・角丸なし）---------- */
/* ★狭い幅では表だけを自前でスクロールさせる（ページ全体に横スクロールを出さない） */
.cmp-wrap{overflow-x:auto;}
.cmp{width:100%;min-width:520px;border-collapse:collapse;}
.cmp th,.cmp td{border:1px solid var(--line);padding:clamp(14px,2vw,22px);
  font-size:16px;line-height:1.9;text-align:left;vertical-align:top;font-weight:500;}
.cmp thead th{background:var(--ink);color:var(--white);font-weight:700;letter-spacing:.06em;}
.cmp tbody th{background:var(--paper);width:clamp(110px,15vw,180px);font-weight:700;}
/* ★2026-07-28（ユーザー指示）: SPは横スクロールをやめて**縦組み**へ。1行＝1カード、列見出しは各セルの
   `data-label`（HTML側で付与）を ::before で出す。thead は視覚的に不要なので隠す（見出しは data-label が担う）。
   ブレークポイントは表の min-width(520px)＋左右ガター(32px×2)を下回る 640px 未満とする。 */
@media (max-width:639px){
  .cmp-wrap{overflow-x:visible;}
  .cmp{min-width:0;display:block;}
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
  .cmp tbody,.cmp tr,.cmp tbody th,.cmp td{display:block;width:auto;}
  .cmp tbody tr{border:1px solid var(--line);}
  .cmp tbody tr + tr{margin-top:18px;}
  .cmp tbody th{border:0;background:var(--ink);color:var(--white);padding:14px 18px;letter-spacing:.06em;}
  .cmp td{border:0;border-top:1px solid var(--line);padding:14px 18px 18px;}
  .cmp td::before{content:attr(data-label);display:block;margin-bottom:6px;
    font-family:var(--en);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--muted);}
}

/* ---------- FAQ（★<details> は使わない＝常時展開の dl）---------- */
.faq{margin:0;border-top:1px solid var(--line);}
.faq dt{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  margin:0;padding:26px 0 12px;font-size:clamp(17px,2vw,20px);font-weight:700;line-height:1.6;}
.faq dd{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  margin:0;padding:0 0 26px;border-bottom:1px solid var(--line);
  font-size:16px;line-height:1.95;font-weight:500;text-wrap:pretty;}
/* Q＝黄地にインク（白地に黄文字はコントラストが取れないため面で使う）／A＝インクの枠線 */
.faq dt::before,.faq dd::before{display:grid;place-items:center;width:34px;height:34px;flex:none;
  font-family:var(--en);font-size:16px;font-weight:700;line-height:1;}
.faq dt::before{content:"Q";background:var(--yellow);color:var(--ink);}
.faq dd::before{content:"A";border:1px solid var(--ink);color:var(--ink);}

/* ---------- 施工の流れ（5ステップ／縦タイムライン）---------- */
.flow{position:relative;display:flex;flex-direction:column;gap:clamp(36px,5vw,56px);padding:8px 0;}
.flow::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--line);transform:translateX(-50%);}
.flow .s{position:relative;display:grid;grid-template-columns:1fr 56px 1fr;align-items:center;gap:0 clamp(20px,3vw,40px);}
.flow .s .no{grid-column:2;grid-row:1;justify-self:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--yellow);
  font-family:var(--display);font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:1;}
.flow .s .card{grid-column:1;grid-row:1;justify-self:end;background:var(--white);border-radius:14px;padding:20px 24px;max-width:420px;
  box-shadow:0 6px 20px rgba(35,24,21,.08);position:relative;}
.flow .s .card::after{content:"";position:absolute;top:20px;right:-9px;width:18px;height:18px;background:var(--white);
  clip-path:polygon(0 0,0 100%,100% 50%);}
.flow .s:nth-child(even) .card{grid-column:3;grid-row:1;justify-self:start;}
.flow .s:nth-child(even) .card::after{right:auto;left:-9px;clip-path:polygon(100% 0,100% 100%,0 50%);}
.flow .s b{display:block;font-size:clamp(16px,1.9vw,19px);font-weight:700;line-height:1.5;}
.flow .s p{margin:8px 0 0;font-size:16px;color:var(--muted);line-height:1.85;text-wrap:pretty;}

/* ---------- 無料現地調査（黄地の強調ブロック／★黄地は1ページ1箇所まで）---------- */
.survey{background:var(--yellow);display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:clamp(24px,3vw,48px);padding:clamp(40px,5.5vw,72px) clamp(24px,4vw,64px);}
.survey h2{margin:0 0 12px;font-size:clamp(22px,3vw,34px);font-weight:700;line-height:1.5;letter-spacing:.02em;}
.survey p{margin:0;font-size:16px;line-height:1.9;font-weight:500;text-wrap:pretty;}
/* 黄地の上では既定の「黄wipe」が見えないので、インク塗り→白wipeに反転させる */
.survey .more{background:var(--ink);border-color:var(--ink);color:var(--white);}
.survey .more::before{background:var(--white);}
.survey .more:hover{color:var(--ink);}
.survey .more .tri{background:var(--yellow);color:var(--ink);}
.survey .more:hover .tri{background:var(--ink);color:var(--yellow);}

/* ---------- ビフォーアフター（写真は要回収＝当面プレースホルダー）---------- */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,28px);}
.ba .c{position:relative;}
.ba .c .im{width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--paper);
  display:grid;place-items:center;border:1px dashed rgba(35,24,21,.35);}
.ba .c .im img{width:100%;height:100%;object-fit:cover;filter:saturate(.98) contrast(1.05) brightness(1.02);}
.ba .c .lb{position:absolute;left:0;top:0;z-index:2;background:var(--ink);color:var(--white);
  font-family:var(--en);font-size:13px;letter-spacing:.16em;font-weight:700;padding:8px 16px;}
.ba .c .note{font-size:14px;font-weight:700;color:var(--muted);text-align:center;line-height:1.9;padding:0 20px;}

/* ---------- 動的パーツ隔離セクション（R-29）----------
   ★ブログ・施工事例・お知らせ・お問い合わせフォームの本体は **生成しない**。
     CueZilla が実行時に描画するので、案件側は「周囲の装飾」と「落とし込む枠」だけを用意する。
     この .dyn-slot がその枠＝投入時はこの中身をパーツに差し替える（枠のCSSはそのまま効かせてよい）。 */
.dyn-slot{border:1px dashed rgba(35,24,21,.35);background:var(--paper);text-align:center;
  padding:clamp(44px,6.5vw,80px) clamp(20px,3vw,40px);}
.dyn-slot .en{display:block;font-family:var(--en);font-size:13px;letter-spacing:.24em;
  color:var(--muted);font-weight:700;}
.dyn-slot b{display:block;margin:14px 0 10px;font-size:clamp(18px,2.2vw,22px);font-weight:700;line-height:1.5;}
/* ★16px を割ると「本文相当のサイズ宣言(16px)未満」に引っかかるうえ、
   このページは本文量が少ないので 14px が最頻サイズになり jump（h1÷本文）が 4.14 に跳ねる。16px を死守する */
.dyn-slot p{margin:0 auto;max-width:36em;font-size:16px;color:var(--muted);line-height:1.9;text-wrap:pretty;}

/* ---------- 法務系の本文（プライバシーポリシー）---------- */
/* ★2026-07-28（ユーザー確認指示）: 56em の可読カラムは維持しつつ**コンテンツ幅の中央**に置く。
   従来は margin 指定が無く左寄せ＝1440幅で右に184pxだけ余白が残り「センターに見えない」状態だった。 */
.legal{max-width:56em;margin-inline:auto;}
.legal h2{margin:clamp(40px,5vw,64px) 0 16px;font-size:clamp(19px,2.3vw,24px);font-weight:700;
  line-height:1.6;padding-left:16px;border-left:5px solid var(--yellow);}
.legal h2:first-child{margin-top:0;}
.legal p{margin:0 0 18px;font-size:16px;line-height:1.95;font-weight:500;text-wrap:pretty;}
.legal ul,.legal ol{margin:0 0 18px;padding-left:1.5em;}
.legal li{margin-bottom:8px;font-size:16px;line-height:1.95;font-weight:500;text-wrap:pretty;}
.legal .rev{margin-top:44px;font-size:14px;color:var(--muted);}

/* ---------- 日本語組版（#14 対策）----------
   ★`line-break:strict` を入れないと、長音「ー」や小書き仮名が行頭に来る（実測でDD/P/LIに計4件）。
     承認済みのトップに影響を出さないため、**下層で追加したクラスにだけ**当てる。 */
.legal p,.legal li,.faq dt,.faq dd,.chk li,.chk>p,.sub-h,
.page-lead p,.page-lead h2,.reason-lead p,.reason-lead h2,
.flow .s p,.flow .s b,.dyn-slot p,.dyn-slot b,.tri .c p,
.survey h2,.survey p,.cmp th,.cmp td,.ba .c .note,.imgholder .note,
.gate .body p,.reason-full .rf p,.reason-full .rf h3,.reason-full .ph-holder .note{line-break:strict;}

@media(max-width:768px){
  /* スマホ幅は行が短く「最終行2文字」の孤立が出やすい。pretty では消えなかったので balance で行長を揃える */
  .sub-h,.faq dt,.chk li,.legal li,.dyn-slot b,.tri .c p{text-wrap:balance;}
}

@media(max-width:900px){
  .flow{grid-template-columns:1fr 1fr;}
  .survey{grid-template-columns:1fr;}
  .survey .more{justify-self:start;}
  .ba{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .tri{grid-template-columns:1fr;}
  .flow{gap:28px;}
  .flow::before{left:22px;}
  .flow .s{grid-template-columns:44px 1fr;gap:0 16px;}
  .flow .s .no{grid-column:1;justify-self:start;}
  .flow .s .card,.flow .s:nth-child(even) .card{grid-column:2;justify-self:stretch;max-width:none;}
  .flow .s .card::after,.flow .s:nth-child(even) .card::after{display:none;}
  .faq dt::before,.faq dd::before{width:28px;height:28px;font-size:14px;}
  .faq dt,.faq dd{gap:12px;}
}

/* =========================================================
   CueZilla動的パーツの見た目（parts228=施工事例一覧／parts222=ブログ一覧／parts213=フォーム）
   ★2026-07-28 ユーザー指示「施工実績・ブログ・お問い合わせはサンプルを表示してイメージがつかめるように。
     ※CueZilla用パーツを活用のうえ」により追加。
   方針:
   - **HTMLは書き起こさない。CueZillaが実際に出力する構造（verify/local-sandbox の実DOM）をそのまま置く。**
     プレビューのサンプルは `<!-- ▼CueZillaパーツ ... 投入時はこのブロックごと削除 -->` で囲ってある（R-29の二重化事故を防ぐ）。
   - **このCSSは本番でもそのまま効く**（実セレクタに当てているため）。投入後は add.css / skin 側へ同じ内容が乗る。
   - 本番の theme_default.css は詳細度が高い箇所がある。投入後に効かない宣言が出たら、その宣言にだけ
     `!important` を足す（先回りで全部に付けない＝R-27の安全契約）。
   ========================================================= */
/* 共通：パーツ側のコンテナ幅をサイトの .wrap に合わせる（本番は container-fluid 直下に出るため） */
.parts222_wrap,.parts228_wrap,.parts213_form_wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);}
/* ★プレビューでは案件側の `.wrap` の中にサンプルを置いているため、そのままだとガターとmax-widthが二重になり
   導入リード（.page-lead）より 32px 内側にズレる。ネストされている時だけ打ち消す（本番は .wrap の外＝上の指定が効く）。 */
.wrap .parts222_wrap,.wrap .parts228_wrap{max-width:none;padding:0;}
.wrap .parts213_form_wrap{padding:0;}
/* パーツが吐く見出し（例: h2「ブログ」）は下層ヒーロー帯のh1と重複するので出さない */
.parts222_section > h2,.parts228_section > h2{display:none;}

/* ---------- 施工事例一覧（parts228） ---------- */
.parts228_post_list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px);}
.parts228_post_wrap{min-width:0;}
.parts228_post_img{position:relative;overflow:hidden;aspect-ratio:4/3;}
.parts228_post_img img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.98) contrast(1.05) brightness(1.02);transition:transform .6s var(--ease);}
.parts228_post_wrap:hover .parts228_post_img img{transform:scale(1.05);}
.parts228_post_status{padding-top:16px;}
.parts228_post_date{display:block;font-family:var(--en);font-size:14px;letter-spacing:.04em;color:var(--muted);}
.parts228_post_title{margin:8px 0 0;font-size:16px;font-weight:700;line-height:1.65;}
.parts-blog-ex-tag_wrap{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.parts-blog-ex_tag{display:inline-block;border:1px solid var(--ink);border-radius:999px;
  padding:3px 14px;font-size:12px;font-weight:700;letter-spacing:.06em;line-height:1.7;
  transition:background .3s var(--ease),color .3s var(--ease);}
/*.parts-blog-ex-tag_wrap a:hover .parts-blog-ex_tag{background:var(--ink);color:var(--white);}*/

/* ---------- ブログ一覧（parts222・本文＋サイドバー） ---------- */
.parts222_wrap{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(32px,4vw,64px);align-items:start;}
.parts222_main{min-width:0;}
.parts222_post_list{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,40px);}
.parts222_post_wrap{min-width:0;}
.parts222_post_img{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--paper);}
.parts222_post_img img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.98) contrast(1.05) brightness(1.02);transition:transform .6s var(--ease);}
.parts222_post_wrap:hover .parts222_post_img img{transform:scale(1.05);}
.parts222_post_status{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:16px;}
.parts222_post_date{font-family:var(--en);font-size:14px;letter-spacing:.04em;color:var(--muted);}
/* カテゴリは黄の面＋インク文字（白地に黄文字はコントラストが取れないため面で使う＝既存ルールと同じ） */
.parts222_post_category{background:var(--yellow);color:var(--ink);
  font-size:12px;font-weight:700;letter-spacing:.06em;padding:3px 12px;border-radius:999px;line-height:1.7;}
.parts222_post_title{margin:8px 0 0;font-size:16px;font-weight:700;line-height:1.65;}
/* サイドバー */
.parts222_sidebar{display:grid;gap:clamp(28px,3vw,40px);}
.parts222_sidebar_wrap h3{margin:0 0 14px;font-size:17px;font-weight:700;line-height:1.5;
  padding-left:14px;border-left:5px solid var(--yellow);}
.parts222_sidebar_wrap ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.parts222_sidebar_wrap li{border-bottom:1px solid var(--line);}
.parts222_sidebar_wrap li > a{display:block;padding:14px 0;transition:opacity .3s var(--ease);}
.parts222_sidebar_wrap li > a:hover{opacity:.62;}
.parts222_sidebar_date{display:block;font-family:var(--en);font-size:13px;letter-spacing:.04em;color:var(--muted);}
.parts222_sidebar_post_title{margin:4px 0 0;font-size:15px;font-weight:700;line-height:1.65;}
.parts222_sidebar_wrap.category_post_count li > a{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.parts222_sidebar_post_category{margin:0;font-size:15px;font-weight:700;}
.parts222_sidebar_post_category_count{font-family:var(--en);font-size:13px;color:var(--muted);}

/* ---------- ページャー（parts222/228 共通） ---------- */
.parts222_pagenation,.parts228_pagenation{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin-top:clamp(40px,5vw,64px);}
.parts222_pagenation a,.parts222_pagenation span,
/*.parts228_pagenation a,.parts228_pagenation span{display:grid;place-items:center;min-width:44px;height:44px;
  padding:0 12px;border:1px solid var(--line);font-family:var(--en);font-size:15px;font-weight:600;letter-spacing:.04em;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);}*/
/*.parts222_pagenation .current,.parts228_pagenation .current{background:var(--ink);border-color:var(--ink);color:var(--white);}*/
/*.parts222_pagenation a:hover,.parts228_pagenation a:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink);}*/

/* ---------- お問い合わせフォーム（parts213） ---------- */
/* ★フォームのHTMLはCueZilla（Blade）が描画する領域＝案件側は色・余白・タイポだけを当てる。
     ラベルの関連付け等の構造はプラットフォーム側の管轄（教訓: cuezilla-parts213-form-label-a11y-is-platform-side）。 */
.parts213_form_wrap{max-width:920px;}
.parts213_section_form dl{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px clamp(20px,3vw,36px);
  margin:0;padding:26px 0;border-bottom:1px solid var(--line);align-items:start;}
.parts213_section_form dl:first-of-type{border-top:1px solid var(--line);}
.parts213_section_form dt{margin:0;padding-top:10px;font-size:16px;font-weight:700;line-height:1.7;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.parts213_section_form dd{margin:0;}
.parts213_section_form .required{flex:0 0 auto;background:var(--yellow);color:var(--ink);
  font-size:12px;font-weight:700;letter-spacing:.06em;padding:3px 12px;border-radius:999px;line-height:1.7;}
.parts213_section_form input[type="text"],.parts213_section_form input[type="email"],
.parts213_section_form input[type="tel"],.parts213_section_form textarea{width:100%;max-width:100%;
  background:var(--white);border:1px solid var(--line);border-radius:0;
  padding:13px 16px;font-family:inherit;font-size:16px;font-weight:500;line-height:1.8;color:var(--ink);
  transition:border-color .3s var(--ease);}
.parts213_section_form input:hover,.parts213_section_form textarea:hover{border-color:var(--ink);}
.parts213_section_form textarea{min-height:190px;resize:vertical;}
.parts213_section_form dd label{display:inline-flex;align-items:center;gap:8px;margin:0 20px 10px 0;
  font-size:16px;font-weight:500;cursor:pointer;}
.parts213_section_form dd input[type="checkbox"]{width:20px;height:20px;accent-color:var(--ink);cursor:pointer;}
.parts213_section_form .attention,.parts213_section_form .des{display:block;margin:6px 0 0;
  font-size:13px;font-weight:500;line-height:1.8;color:var(--muted);}
/* ★注意書き(.attention)は項目名と横並びにすると項目名が潰れる（実測: 「ファイル添付1」が1文字ずつ4行に折返した）。
   wrap を許可して .attention だけ次の行いっぱいに落とす（必須バッジは項目名と同じ行に残る）。 */
.parts213_section_form .form_text_dt{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:6px 12px;}
.parts213_section_form .form_text_dt > .attention{flex:1 0 100%;}
.parts213_section_form .error{margin:8px 0 0;font-size:14px;font-weight:700;color:#c0392b;}
.parts213_section_form .label_file_upload{display:inline-flex;align-items:center;gap:12px;cursor:pointer;}
.parts213_section_form .label_file_upload button{height:44px;padding:0 20px;background:var(--paper);
  border:1px solid var(--line);font-family:var(--en);font-size:14px;font-weight:600;letter-spacing:.08em;
  color:var(--ink);pointer-events:none;}
/* 送信ボタン＝サイト共通の「黒ピル→黄ワイプ」と同じ質感（inputなので::beforeが使えず、色遷移で表現） */
.parts213_section_form .contact_submit{margin-top:clamp(36px,4.5vw,52px);text-align:center;}
.parts213_section_form .contact_submit input[type="submit"]{min-width:300px;background:var(--ink);color:var(--white);
  border:1px solid var(--ink);border-radius:999px;padding:18px 40px;cursor:pointer;
  font-family:var(--en);font-size:15px;font-weight:600;letter-spacing:.14em;
  transition:background .4s var(--ease),color .4s var(--ease);}
.parts213_section_form .contact_submit input[type="submit"]:hover{background:var(--yellow);color:var(--ink);}

@media(max-width:1000px){
  .parts222_wrap{grid-template-columns:1fr;}
  .parts222_post_list{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:860px){
  .parts228_post_list{grid-template-columns:repeat(2,1fr);}
  /* フォームは項目名を入力欄の上へ（横並びを保つと入力欄が狭くなりすぎる） */
  .parts213_section_form dl{grid-template-columns:1fr;gap:12px;padding:22px 0;}
  .parts213_section_form dt{padding-top:0;}
}
@media(max-width:600px){
  .parts228_post_list,.parts222_post_list{grid-template-columns:1fr;gap:28px;}
  .parts213_section_form .contact_submit input[type="submit"]{min-width:0;width:100%;}
}

/* =========================================================
   採用情報 /recruit（★ミニトップ度4＝独自AD・横展開の型を使わない）
   採用7：受注3の主軸ページ。①ページ構成の掲載順をそのまま骨格にする。
   AD方針: ①ライトのスキン（白地・温黒・黄）は共有したまま、**黄の使用量を1段上げる**。
     - 主役は「お金と休みの話」＝インク地の帯に黄の数字（白地に黄文字は不可＝面で使う既存ルールどおり）。
     - H1でコンセプトワード「床を、あきらめない。」を**サイト内で1回だけ**直接使用（①指定）。
   ========================================================= */
/* ---------- ヒーロー（写真＋インク・下層共通の .pagehead ではなく採用専用） ---------- */
.rec-hero{position:relative;overflow:hidden;background:var(--ink);color:var(--white);
  border-bottom:5px solid var(--yellow);}
.rec-hero .bg{position:absolute;inset:0;background:url("https://cdn.cuezilla-cms.com/enjoyworks-test27.tech/images/1478/worker-recruit.webp") center 38%/cover;opacity:.42;}
/* 左に文字が乗るので左を濃く。右は写真を見せる */
.rec-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(35,24,21,.86) 0%,rgba(35,24,21,.66) 46%,rgba(35,24,21,.34) 100%);}
.rec-hero .ghost{position:absolute;right:0;top:calc(var(--header-h) + clamp(4px,1vw,14px));z-index:1;
  font-family:var(--display);font-size:clamp(72px,15vw,240px);line-height:.78;
  color:rgba(255,226,0,.16);white-space:nowrap;pointer-events:none;transform:scaleX(1.2);transform-origin:right;}
.rec-hero .inner{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;
  padding:calc(var(--header-logo-h) + clamp(16px,2.4vw,32px)) var(--gutter) clamp(56px,7vw,96px);}
.rec-hero .bar{display:block;width:56px;height:5px;background:var(--yellow);margin-bottom:22px;}
.rec-hero h1{margin:0;font-size:clamp(30px,5.4vw,64px);font-weight:900;line-height:1.22;letter-spacing:.02em;}
.rec-hero h1 .sub{display:block;margin-top:14px;font-size:clamp(16px,2.2vw,24px);font-weight:700;
  letter-spacing:.04em;color:var(--yellow);}
.rec-hero p{max-width:34em;margin:26px 0 0;font-size:17px;line-height:2;font-weight:500;color:rgba(255,255,255,.92);text-wrap:pretty;}
.rec-hero .btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:clamp(30px,4vw,44px);}

/* ---------- 年収モデル（★一発目の主役。インク地＋黄の数字） ---------- */
.salary-sec{background:var(--ink);color:var(--white);}
/* ★英字見出し `.lbl .en` の既定色はインク＝インク地では見えない（実測: SALARYが消えて上部が空白に見えた）。
   `.lbl.light` を付け忘れても成立するよう、この帯の中では白に上書きする。 */
.salary-sec .lbl .en{color:var(--white);}
.salary-sec .lbl .jp{color:rgba(255,255,255,.6);}
.salary-sec .sub-h{color:var(--white);margin-top:0;}
.salary{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px);margin-top:26px;}
.salary .s{border:1px solid rgba(255,255,255,.22);padding:clamp(24px,3vw,38px) clamp(18px,2.2vw,28px);text-align:center;}
.salary .s .yr{display:block;font-size:16px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.78);}
.salary .s b{display:block;margin-top:12px;font-family:var(--display);color:var(--yellow);
  font-size:clamp(38px,5.6vw,68px);line-height:1;letter-spacing:.02em;white-space:nowrap;}
.salary .s b small{font-family:"Noto Sans JP",sans-serif;font-size:.34em;font-weight:900;margin-left:.2em;letter-spacing:.02em;}
.salary .s .note{display:block;margin-top:12px;font-size:13px;color:rgba(255,255,255,.7);line-height:1.7;}
.salary-sec .foot{margin:26px 0 0;font-size:14px;color:rgba(255,255,255,.66);}
/* 待遇・休日・正直に伝えること（インク地の中の3枚） */
.terms{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px);margin-top:clamp(30px,4vw,44px);}
.terms .t{background:rgba(255,255,255,.06);border-top:4px solid var(--yellow);padding:clamp(22px,2.6vw,30px);}
.terms .t b{display:block;font-size:17px;font-weight:700;letter-spacing:.04em;}
.terms .t p{margin:10px 0 0;font-size:16px;line-height:1.95;font-weight:500;color:rgba(255,255,255,.88);text-wrap:pretty;}
/* 白地でも同じ3枚組を使う（人物像「こんな方に来てほしい」） */
.terms.on-white .t{background:var(--white);border:1px solid var(--line);border-top:4px solid var(--yellow);}
.terms.on-white .t p{color:var(--ink);}

/* ---------- 2枚組（未経験／経験者・やりがい／大変さ） ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.8vw,36px);}
.duo .d{border:1px solid var(--line);background:var(--white);padding:clamp(26px,3.4vw,42px);}
.duo .d.accent{background:var(--paper);border-color:var(--ink);}
/* ★見出しは全幅で balance（PC幅でも「順番があります」の最終行が「す」1文字で落ちる＝行末孤立が出た） */
.duo .d h3{margin:0 0 14px;font-size:clamp(18px,2.2vw,22px);font-weight:700;line-height:1.6;
  padding-left:14px;border-left:5px solid var(--yellow);text-wrap:balance;}
.duo .d p{margin:0;font-size:16px;line-height:1.95;font-weight:500;text-wrap:pretty;}
.duo .d p+p{margin-top:16px;}
/* 未経験の育成ステップ（3段） */
.steps{display:grid;gap:10px;margin:20px 0 0;padding:0;list-style:none;}
.steps li{position:relative;background:var(--white);border:1px solid var(--line);padding:14px 18px 14px 46px;
  font-size:16px;font-weight:700;line-height:1.7;}
.steps li::before{content:counter(step);counter-increment:step;position:absolute;left:14px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--yellow);
  font-family:var(--en);font-size:12px;font-weight:700;color:var(--ink);}
.steps{counter-reset:step;}
/* ★2026-07-28 ユーザー指示「CAREERのカードの体裁を揃える」:
   2枚のカードの骨格を **写真 → 見出し → 本文 → 箇条**に統一する。順序のある育成ステップは `.steps`（連番）、
   順序の無い要点は `.points`（黄のダッシュ）＝意味を取り違えずに見た目だけ揃う。 */
.points{display:grid;gap:10px;margin:20px 0 0;padding:0;list-style:none;}
.points li{position:relative;background:var(--white);border:1px solid var(--line);padding:14px 18px 14px 46px;
  font-size:16px;font-weight:700;line-height:1.7;}
.points li::before{content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:18px;height:4px;background:var(--yellow);}
/* 2カラムのときだけ見出しの高さを2行ぶん確保＝本文の開始位置が左右で揃う（1カラムでは余白が浮くので当てない）。
   あわせて**箇条をカードの下端に固定**（本文の長さが左右で違っても、写真・見出し・箇条の3点が揃う。
   これをやらないと本文が短い側のカードだけ下に250px級の空白が残る＝実測）。 */
@media(min-width:901px){
  .duo .d h3{min-height:calc(1.6em * 2);}
  .duo .d.with-ph{display:flex;flex-direction:column;}
  .duo .d.with-ph .tx{flex:1;display:flex;flex-direction:column;}
  .duo .d.with-ph .tx .steps,.duo .d.with-ph .tx .points{margin-top:auto;padding-top:24px;}
}

/* ---------- 一日の流れ（★2026-07-28 ユーザー指示で「印象に残る」形へ作り替え）----------
   旧: 細い罫線＋小さな時刻が6つ並ぶだけ＝情報は正しいが記憶に残らない（実測でも版面が薄い）。
   新: **時刻を Anton の巨大数字**（年収モデルと同じ「数字で語る」語彙）にし、**太い黒レールの上下に
       ジグザグで振り分ける**。休憩は白ドット＋グレー、稼働は黄ドット＝一目で「働く/休む」のリズムが読める。
   ※HTMLは変更なし（`.h > .tm + b` のまま）。並びだけ nth-child で上下に振る。 */
/* ★行を「上段／レール(24px)／下段」の3段に切り、奇数を上段・偶数を下段へ置く＝ジグザグ。
     レール自体も ::before を**グリッドアイテム**として2段目に流し込む（absoluteで位置を推測しない＝ズレない）。 */
.day{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:auto 24px auto;
  column-gap:clamp(8px,1.2vw,16px);}
.day::before{content:"";grid-column:1/-1;grid-row:2;align-self:center;height:3px;background:var(--ink);}
.day .h{position:relative;text-align:center;}
.day .h:nth-child(odd){grid-row:1;align-self:end;padding-bottom:6px;}
.day .h:nth-child(even){grid-row:3;align-self:start;padding-top:6px;}
/* ★列は明示する。grid-row だけ指定すると自動配置が1〜3列目に詰めてしまい、6項目が3列に重なる（実測） */
.day .h:nth-child(1){grid-column:1;}
.day .h:nth-child(2){grid-column:2;}
.day .h:nth-child(3){grid-column:3;}
.day .h:nth-child(4){grid-column:4;}
.day .h:nth-child(5){grid-column:5;}
.day .h:nth-child(6){grid-column:6;}
/* レール上のドット（列の中央・レールの中心に重ねる。24pxの帯の中心＝アイテム端から12px） */
.day .h::after{content:"";position:absolute;left:50%;width:18px;height:18px;border-radius:50%;
  background:var(--yellow);border:3px solid var(--ink);transform:translateX(-50%);z-index:1;}
.day .h:nth-child(odd)::after{bottom:-21px;}
.day .h:nth-child(even)::after{top:-21px;}
.day .h .tm{display:block;font-family:var(--display);font-size:clamp(26px,3.6vw,50px);line-height:1;
  letter-spacing:.02em;}
.day .h b{display:block;margin-top:8px;font-size:clamp(14px,1.6vw,16px);font-weight:700;line-height:1.6;}
/* 休憩は一段引く（白ドット＋グレー文字）＝働く時間との対比を作る */
.day .h.rest .tm{color:var(--muted);font-size:clamp(20px,2.6vw,34px);}
.day .h.rest b{color:var(--muted);}
.day .h.rest::after{background:var(--white);width:14px;height:14px;}
.day .h:nth-child(odd).rest::after{bottom:-19px;}
.day .h:nth-child(even).rest::after{top:-19px;}
.day-note{margin:26px 0 0;font-size:14px;color:var(--muted);line-height:1.9;}

/* ---------- 募集要項（.tbl を採用ページ用に3ブロック並べる） ---------- */
.req+.req{margin-top:clamp(36px,4.4vw,56px);}
.req h3{margin:0 0 16px;font-size:clamp(18px,2.2vw,22px);font-weight:700;line-height:1.6;
  padding-left:14px;border-left:5px solid var(--yellow);}

/* ---------- 採用CTA（サイト共通CTAとは別に、応募導線を電話つきで置く） ----------
   ★2026-07-28 ユーザー指示で**黄地→インク地に変更**。理由＝直後のフッター上段が黄ベタで、
   黄→黄が連続して面の切れ目が消えていたため。黄はCTAボタンと電話番号だけに絞る（アクセントとして効かせる）。 */
.rec-cta{background:var(--ink);color:var(--white);}
.rec-cta .inner{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,56px);align-items:center;}
.rec-cta h2{margin:0;font-size:clamp(22px,3.4vw,38px);font-weight:900;line-height:1.45;letter-spacing:.02em;}
.rec-cta h2 em{font-style:normal;color:var(--yellow);}
.rec-cta p{margin:14px 0 0;font-size:16px;line-height:1.95;font-weight:500;color:rgba(255,255,255,.88);}
.rec-cta .tel{display:inline-flex;align-items:baseline;gap:10px;margin-top:14px;color:var(--yellow);
  font-family:var(--en);font-size:clamp(24px,3.4vw,34px);font-weight:700;letter-spacing:.02em;}
.rec-cta .tel .lbl{font-size:14px;font-weight:700;letter-spacing:.16em;}
.rec-cta .tel small{font-family:"Noto Sans JP",sans-serif;font-size:13px;font-weight:700;letter-spacing:.02em;
  color:rgba(255,255,255,.8);}
/* インク地なので白抜きピル→hoverで黄が塗られる（.more.on-ink と同じ挙動をこの節の中で作る） */
.rec-cta .more{border-color:rgba(255,255,255,.55);color:var(--white);}
.rec-cta .more::before{background:var(--yellow);}
.rec-cta .more:hover{color:var(--ink);border-color:var(--yellow);}
.rec-cta .more .tri{background:var(--yellow);color:var(--ink);}
.rec-cta .more:hover .tri{background:var(--ink);color:var(--yellow);}

/* ---------- 写真の見せ方（★2026-07-28 ユーザー指示「画像を積極的に使って飽きさせない」）----------
   採用ページは文章量が多い＝同じ組み方が続くと読み疲れる。**版面のパターンを切り替えて**緩急を作る:
   ①全幅ストリップ（隙間なし4枚）②工程カット3枚（番号＋キャプション）③カード上部の写真
   ④全幅バンド（1枚を大きく）⑤モザイクギャラリー（大小混在）。
   写真は**受領の実写**（0_受領素材の高解像度PNG→JPEG化）。AdobeStockの人物はヒーローの仮置きのみ。 */
/* ① 全幅ストリップ＝手元・道具のクローズアップを並べて「仕事の中身」を一瞬で伝える */
.strip{display:grid;grid-template-columns:repeat(4,1fr);}
.strip figure{position:relative;margin:0;aspect-ratio:1/1;overflow:hidden;background:var(--paper);}
.strip img{width:100%;height:100%;object-fit:cover;filter:saturate(.98) contrast(1.05) brightness(1.02);
  transition:transform .8s var(--ease);}
.strip figure:hover img{transform:scale(1.06);}
/* ② 工程カット（下地→塗り→仕上げ） */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,36px);}
.shots figure{margin:0;}
.shots .im{aspect-ratio:4/3;overflow:hidden;background:var(--paper);}
.shots .im img{width:100%;height:100%;object-fit:cover;filter:saturate(.98) contrast(1.05) brightness(1.02);
  transition:transform .6s var(--ease);}
.shots figure:hover .im img{transform:scale(1.05);}
.shots .no{display:inline-block;margin-bottom:10px;background:var(--yellow);color:var(--ink);
  font-family:var(--en);font-size:13px;font-weight:700;letter-spacing:.14em;padding:2px 12px;}
.shots figcaption{margin-top:16px;}
.shots figcaption b{display:block;font-size:17px;font-weight:700;line-height:1.6;}
.shots figcaption p{margin:8px 0 0;font-size:15px;font-weight:500;color:var(--muted);line-height:1.9;text-wrap:pretty;}
/* ③ カード上部の写真（.duo の中で使う。写真を入れる時はカードの padding を殺して全面に出す） */
.duo .d.with-ph{padding:0;overflow:hidden;}
.duo .d .ph{aspect-ratio:16/10;overflow:hidden;background:var(--paper);}
.duo .d .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.98) contrast(1.05) brightness(1.02);
  transition:transform .6s var(--ease);}
.duo .d.with-ph:hover .ph img{transform:scale(1.04);}
.duo .d .tx{padding:clamp(26px,3.4vw,42px);}
/* ④ マーキー（社名が流れる黄の帯）
   ★2026-07-28（1回目）説明キャプション「工場の塗床（光沢仕上げ）」→ マーキーに置換。
   ★2026-07-28（2回目・ユーザー指示）**社名のみ・背景写真なし・文字は大きめ**に変更。
     ＝写真の上に重ねるのをやめ、**帯だけで1セクション**にした（`.band` は使わない＝このページからは外した）。
   ※`.band`（写真1枚を全幅で見せる型）のCSSは他ページで使えるよう残置。 */
.band{position:relative;overflow:hidden;height:clamp(200px,30vw,400px);background:var(--paper);}
.band img{width:100%;height:100%;object-fit:cover;object-position:center 58%;}
.marquee{display:flex;overflow:hidden;background:var(--yellow);color:var(--ink);
  padding:clamp(14px,2vw,22px) 0;border-block:3px solid var(--ink);}
/* ★2026-07-28 ユーザー指示: 区切りは**スペースのみ**（菱形の記号は廃止）。
   記号を消したぶん語間が詰まって見えるので、gap を約2倍にして「間（ま）」で区切る。 */
.marquee ul{display:flex;flex:0 0 auto;gap:clamp(48px,6vw,110px);margin:0;padding:0 clamp(48px,6vw,110px) 0 0;
  list-style:none;animation:marquee-run 26s linear infinite;}
/* 社名だけを大きく流す。
   ★2026-07-28 ユーザー指示で**英字表記「MR FLOOR」**に変更（トップのヒーロー・アイブロウと同じ社名英字）。
     和文900ではなく Anton（--display）＝巨大英字の語彙で統一する。 */
.marquee li{flex:0 0 auto;font-family:var(--display);font-size:clamp(26px,4vw,52px);font-weight:400;
  letter-spacing:.08em;line-height:1.1;white-space:nowrap;}
@keyframes marquee-run{from{transform:translateX(0);}to{transform:translateX(-100%);}}
/* 動きを減らす設定の人には流さない（内容は静止したまま読める） */
@media(prefers-reduced-motion:reduce){.marquee ul{animation:none;}}
/* ⑤ モザイクギャラリー＝仕上がりの色の幅（黄・緑・赤・ツートン）を一望させる */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(110px,13vw,180px);
  gap:clamp(10px,1.4vw,18px);}
.mosaic figure{margin:0;overflow:hidden;background:var(--paper);}
.mosaic img{width:100%;height:100%;object-fit:cover;filter:saturate(.98) contrast(1.05) brightness(1.02);
  transition:transform .8s var(--ease);}
.mosaic figure:hover img{transform:scale(1.05);}
.mosaic .big{grid-column:span 2;grid-row:span 2;}
/* ★2026-07-28 ユーザー指摘「TEAMの文章が途中で折り返る」:
   日本語は行内のどこでも改行できるため「ギスギス／しない」のように語の途中で割れる。
   `word-break:auto-phrase` で**文節の切れ目で改行**させる（対応しないブラウザは従来どおりの折返し＝害はない）。 */
.team-lead p{word-break:auto-phrase;text-wrap:pretty;}
/* スタッフ・職場（実写2枚＋集合写真の仮置き1枚） */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,28px);}
.team .c{aspect-ratio:3/4;overflow:hidden;background:var(--paper);}
.team .c img{width:100%;height:100%;object-fit:cover;filter:saturate(.98) contrast(1.05) brightness(1.02);}
.team .holder{display:grid;place-items:center;text-align:center;padding:20px;
  border:1px dashed rgba(35,24,21,.35);}
.team .holder .note{font-size:14px;font-weight:700;color:var(--muted);line-height:1.9;}

.rec-hero h1,.rec-hero p,.salary-sec .sub-h,.terms .t p,.duo .d p,.duo .d h3,
.steps li,.day .h b,.rec-cta h2,.rec-cta p,.req h3,
.shots figcaption b,.shots figcaption p,.team .holder .note{line-break:strict;}

@media(max-width:900px){
  .salary{grid-template-columns:1fr;}
  .terms{grid-template-columns:1fr;}
  .duo{grid-template-columns:1fr;}
  .rec-cta .inner{grid-template-columns:1fr;}
  .shots{grid-template-columns:1fr;}
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(120px,20vw,180px);}
  /* 一日の流れ：狭い幅はジグザグを畳んで**縦のタイムライン**にする（横6列だと1マスが極小になる）。
     ★グリッド指定（行・列・align-self）と ::after の上下位置は、PC側が nth-child で書いてあるぶん
       詳細度が高い。**同じ詳細度（:nth-child(n)）で上書き**しないと効かない（実測でドットが二重に見えた）。 */
  .day{display:block;position:relative;padding-left:30px;}
  /* ★縦レールは height を実値で与える（top/bottom だけだと height:auto が 0 に解決されて線が消えた＝実測） */
  .day::before{position:absolute;left:9px;top:12px;bottom:auto;width:3px;height:calc(100% - 24px);}
  .day .h:nth-child(n){display:flex;align-items:baseline;gap:14px;text-align:left;padding:13px 0;}
  .day .h:nth-child(n)::after{left:-30px;top:16px;bottom:auto;transform:none;}
  .day .h.rest:nth-child(n)::after{left:-28px;top:18px;}
  .day .h .tm{min-width:3.6em;}
  .day .h .tm{font-size:clamp(24px,6vw,34px);}
  .day .h.rest .tm{font-size:clamp(20px,5vw,28px);}
}
@media(max-width:600px){
  .rec-hero .btns .more{width:100%;justify-content:center;}
  .salary .s b{font-size:clamp(40px,12vw,56px);}
  /* ストリップは2枚×2段（4枚横並びだと1枚が的に小さく、何の写真か読めない） */
  .strip{grid-template-columns:repeat(2,1fr);}
  .team{grid-template-columns:1fr;}
  .team .c{aspect-ratio:4/3;}
}
@media(max-width:768px){
  .rec-hero h1,.duo .d h3,.steps li,.points li,.rec-cta h2{text-wrap:balance;}
  /* 短い箇条は balance だけだと最終行に1文字残ることがある（実測:「…大きい」の「い」）→ 文節で折る */
  .steps li,.points li{word-break:auto-phrase;}
}

/* =========================================================
   ブログ署名（CueZilla「サイト情報 > ブログ署名」欄に入れるHTML用）
   ★2026-07-28 新規。プレビューの10ページでは未使用＝ここを触っても既存ページに影響しない。
   ・記事本文の末尾に毎回出るブロックなので、**記事の邪魔をしない濃さ**でインク地の面を1つだけ置く。
   ・クラスは `mrf-` 接頭辞でスコープする。**CueZillaパーツの `.more` は絶対に使わない**
     （parts222/228の「もっと見る」が同じ `.more` を使うため、記事ページで衝突して両方壊れる）。
   ・タップ標的は44px以上・インク地のコントラストは黄13.4:1／白16.8:1（既存の実測値と同じ配色）。
   ・計測は site.js のデリゲート1本（`data-cv`）＝HTML側に onclick を書かない（二重計上と属性除去の両方を避ける）。
   ========================================================= */
.mrf-cv{background:var(--ink,#231815);color:#fff;margin:clamp(48px,7vw,80px) 0 0;
  padding:clamp(30px,4.4vw,52px) clamp(22px,4vw,48px);
  font-family:"Noto Sans JP","Yu Gothic Medium",YuGothic,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  line-height:1.9;letter-spacing:.03em;}
.mrf-cv .mrf-ey{display:block;font-family:"Oswald",sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.28em;color:var(--yellow,#FFE200);margin:0 0 12px;}
.mrf-cv h2,.mrf-cv .mrf-h{margin:0;font-size:clamp(20px,2.6vw,28px);font-weight:700;line-height:1.5;
  letter-spacing:.02em;color:#fff;text-wrap:balance;}
.mrf-cv .mrf-lead{margin:14px 0 0;font-size:15px;font-weight:500;color:rgba(255,255,255,.86);text-wrap:pretty;}
/* 導線＝電話（大きく・最優先）／フォーム（黄ベタ）／採用（白抜き） */
.mrf-cv .mrf-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(22px,3vw,30px);}
.mrf-cv .mrf-tel{display:inline-flex;align-items:baseline;gap:10px;min-height:44px;align-content:center;
  color:var(--yellow,#FFE200);font-family:"Oswald",sans-serif;font-weight:700;font-size:clamp(24px,3.2vw,32px);
  letter-spacing:.02em;text-decoration:none;}
.mrf-cv .mrf-tel .mrf-lbl{font-family:inherit;font-size:13px;letter-spacing:.16em;}
.mrf-cv .mrf-tel:hover{text-decoration:underline;text-underline-offset:5px;}
.mrf-cv .mrf-b{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:12px 26px;
  border-radius:999px;font-size:15px;font-weight:700;letter-spacing:.06em;text-decoration:none;
  transition:background .3s cubic-bezier(0.19,1,0.22,1),color .3s cubic-bezier(0.19,1,0.22,1),border-color .3s;}
.mrf-cv .mrf-b::after{content:"";width:0;height:0;border-style:solid;border-width:4px 0 4px 7px;
  border-color:transparent transparent transparent currentColor;}
.mrf-cv .mrf-b1{background:var(--yellow,#FFE200);color:var(--ink,#231815);border:1px solid var(--yellow,#FFE200);}
.mrf-cv .mrf-b1:hover{background:#fff;border-color:#fff;}
.mrf-cv .mrf-b2{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);}
.mrf-cv .mrf-b2:hover{background:#fff;color:var(--ink,#231815);border-color:#fff;}
.mrf-cv .mrf-b:focus-visible,.mrf-cv .mrf-tel:focus-visible{outline:3px solid var(--yellow,#FFE200);outline-offset:3px;}
/* 署名（社名・所在地）＝記事の締め */
.mrf-cv .mrf-sig{margin:clamp(24px,3vw,32px) 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.22);
  font-size:13px;line-height:1.95;color:rgba(255,255,255,.72);}
.mrf-cv .mrf-sig b{color:#fff;font-weight:700;letter-spacing:.06em;}
@media(max-width:600px){
  .mrf-cv .mrf-acts{flex-direction:column;align-items:stretch;gap:12px;}
  .mrf-cv .mrf-b{justify-content:center;}
  .mrf-cv .mrf-tel{justify-content:center;padding:6px 0;}
}


/* ===== override.css ===== */
/* 案件の上書き専用（R-30）。style.css を直接触らずに調整したい時はここへ書く。
   読み込み順は style.css → override.css＝ここが最後に勝つ。 */

/* ヘッダーロゴに変倍（縦横比の崩れ）がかからないようにする。
   .logo は inline-flex/column＝子は既定で cross軸（横）にstretchするため、
   幅が親に引き伸ばされて楕円化する可能性がある。align-self と aspect-ratio で正円比を固定。 */
header.site .logo{align-items:flex-start;}
header.site .logo-img{width:auto;max-width:none;aspect-ratio:1/1;object-fit:contain;flex:none;align-self:flex-start;}


/* ===== 追補-cuezilla.css ===== */
/* ===== CueZilla 投入時の追補（案件HTMLに合わせた最小上書き）=====
   ・skin(cuezilla-skin.css)は不採用：style.css が parts213(フォーム)/parts222(ブログ一覧+サイドバー)/
     parts228(施工事例一覧) を実セレクタで自前フルスタイルしているため（cz-judgment §3 の自前完結型）。
   ・本ファイルは結合順が最後（追補=prio3）＝ここが最終的に勝つ。 */

/* CueZilla自動パンくず(parts231)は常に非表示。
   下層ページは本文先頭に独自の .crumb-bar を持つため、自動パンくずと二重表示になる（R-10a）。
   ＋ユーザー標準ルール：CueZilla自動パンくずは全ページ非表示（memory: hide-cuezilla-breadcrumb）。 */
.parts231_breadcrumb{display:none !important;}

/* JS不動フォールバック（§4）: CueZillaの本文フラグメントは受領の<noscript>保険を持てないため、
   html.js 方式で代替する。BODY内JS（サイト情報「トラッキングID(BODY内)」）が先頭で
   document.documentElement.classList.add('js') を実行する＝JSが動く時だけ .js が付く。
   .js が付かない（＝JS無効）ときだけ、JS前提で初期非表示の要素を可視化する（真っ白/幕残り防止）。
   ※BODY内JSは<body>直後で走り .reveal 等が描画される前に .js を付けるため、JS有効時にちらつきは出ない。 */
html:not(.js) #intro{display:none !important;}
html:not(.js) .reveal{opacity:1 !important; transform:none !important;}
html:not(.js) header.site,
html:not(.js) .recruit-tab{transform:none !important;}
html:not(.js) .hero .copy .ey span,
html:not(.js) .hero .copy h1 .line i,
html:not(.js) .hero .copy .sub span{transform:none !important; opacity:1 !important;}

/* 追記 */
/* 施工実績*/
.parts228_post_wrap {
    max-width: none !important;
}
.parts228_post_wrap:nth-last-child(-n+3) {
    margin-bottom: 45px !important;
}
.parts-blog-ex-single-wrap .parts-blog-ex_gallery-slider .gallery-blog-ex {
    background: #FFFFFF !important;
}
.parts228_post_wrap .parts228_post_img {
    height: auto !important;
    margin-bottom: 0 !important;
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
.parts228_post_wrap .parts228_post_img img {
    max-height: unset !important;
    height: 200px !important;
}
}

/* ブログ */
.parts222_sidebar {
    max-width: none !important;
}
.parts222_sidebar h3
 {
    background-color: unset !important;
    color: #231815 !important;
    padding: 0 0 0 14px !important;
}
.category_post_count ul li {
    border-left: none !important;
    border-right: none !important;
}
.parts222_sidebar_post_category_count {
    background: #ffffff !important;
}
.parts222_post_category {
    border: none !important;
}
.parts-blog-ex-single-wrap h2 {
    color: #231815 !important;
}
.recent_posts_wrap .recent_post_title {
    color: #231815 !important;
}

/* 施工事例カルーセルの進捗バー（プラットフォーム既定の .progress = 太いグレー丸バーを打ち消し、細く＋黄色に） */
.works-controls .progress {
    height: 6px !important;
    background: var(--line) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    padding: 0 !important;
}
.works-controls .progress .bar {
    height: 6px !important;
    background: transparent !important;
    border-radius: 999px !important;
}
.works-controls .progress .bar i {
    background: var(--yellow) !important;
}
.design-parts-52_T0wbCCpprd .container .content h4.banner-area{
        background-color: #ffffff!important;
    color: #000000!important;
}
.design-parts-52_T0wbCCpprd.bg-color{
        border-bottom: 1px solid var(--line)!important;
}
.design-parts-11_Zgftsw0ICS .container .content ul li .categorytag{
        background-color: #ffffff!important;
    border: 1px solid #c5c5c5!important;
    color: #000000!important;
}
.design-parts-11_Zgftsw0ICS .container .content ul li a{
        border: none!important;
}
.design-parts-11_Zgftsw0ICS.bg-color{
    padding-top: 1px!important;
    padding-bottom: 1px!important;
}
.design-parts-11_Zgftsw0ICS .container .content .image_area{
        border-radius: 0!important;
}
.ig-band:hover,.parts-blog-ex_tag{
        color: #000!important;
}
@media screen and (max-width: 959px){
	.parts222_post_wrap .parts222_post_img{
	        height: auto!important;
	}
	.parts213_section_form .required{
	        padding: 0px 12px!important;
	                width: 60px!important;
	                    line-height: 1.5!important;
	}
}
.parts222_post_wrap{
        max-width: 100%!important;
}
.parts131415_blog_jmqhxY1Cgc.bg-color{
        padding-top: 1px!important;
    padding-bottom: 1px!important;
}