/* ==============================================
   株式会社居藤電機 | Common Styles
   ブランドカラー：青 #154199 / 金 #FCC929（ロゴガイドライン 2026.5 準拠）
   ============================================== */
:root{
  --side:236px;

  /* ブランド */
  --navy:#0B2350;      /* 最も濃い面（サイドバー・フッター・ヒーロー） */
  --navy2:#123163;
  --blue:#154199;      /* ロゴ本体色 CMYK 95,80,0,0 */
  --blue-l:#2E62C8;
  --blue-br:#2F6BD6;   /* 明るい青。英字ラベル・リンク・矢印・年号 */
  --blue-pale:#E7EEFA; /* ボタン地・チップ地 */
  --gold:#FCC929;      /* ロゴ差し色 CMYK 10,25,85,0 */
  --gold-d:#E0AC10;
  --orange:#F0701E;    /* ロゴのライン。ごく少量のみ */

  /* 文字・面 */
  --ink:#16233A;
  --muted:#5D6C86;
  --line:#E2EAF4;
  --soft:#F5F8FD;

  /* ウェイト・字送り。900 は使わず、700＋字送りで重厚さを出す */
  --w-head:700; --w-lead:500; --w-body:400;
  --ls-head:.06em;

  /* 角丸 */
  --r:10px; --r-img:6px; --r-panel:64px; --r-pill:999px;

  /* 影は外に落とさず、内側のグローと罫線で面を立てる */
  --glow-in:inset 0 0 0 1px rgba(21,65,153,.13), inset 0 0 14px rgba(21,65,153,.07);
  --glow-in-hover:inset 0 0 0 1px rgba(21,65,153,.28), inset 0 0 20px rgba(21,65,153,.13);
  --glow-gold:inset 0 0 0 1px rgba(252,201,41,.55), inset 0 0 14px rgba(252,201,41,.22);

  --max:1180px;
  --jp:'Noto Sans JP',-apple-system,'Yu Gothic Medium',Meiryo,sans-serif;
  --en:'Barlow Condensed','Noto Sans JP',sans-serif;
  --sc:.3s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* hidden 属性を確実に効かせる。
   .btn 等に display:inline-flex を当てているため、UA の [hidden]{display:none} が
   打ち消されて「さらに表示する」ボタンなどが消えなくなるのを防ぐ。 */
[hidden]{display:none !important;}
html{scroll-behavior:smooth}
body{font-family:var(--jp);color:var(--ink);background:#FBFCFE;font-weight:400;line-height:1.95;letter-spacing:.04em;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.wrap{width:min(var(--max),calc(100% - 64px));margin:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* スマホでは意図した改行を解除する（幅が足りず末尾が落ちるため） */
@media(max-width:768px){.pc-br{display:none;}}

/* ===== SIDEBAR ===== */
.side{position:fixed;left:0;top:0;bottom:0;width:var(--side);z-index:70;
  background:linear-gradient(180deg,var(--navy) 0%,#081B3E 100%);
  border-right:1px solid rgba(255,255,255,.08);box-shadow:4px 0 24px rgba(6,20,45,.28);
  display:flex;flex-direction:column;}
.side-logo{height:104px;display:flex;align-items:center;justify-content:center;padding:12px;
  border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0;background:#fff;}
.side-logo img{width:196px;height:auto;max-height:74px;object-fit:contain;}
.side-nav{flex:1;overflow-y:auto;padding:4px 0;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent;}
.side-nav::-webkit-scrollbar{width:5px;height:5px;}
.side-nav::-webkit-scrollbar-track{background:transparent;}
.side-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px;}
.side-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.34);}
.side-nav a{display:flex;align-items:center;min-height:52px;padding:0 20px;
  border-bottom:1px solid rgba(255,255,255,.06);font-size:15px;font-weight:700;letter-spacing:.05em;
  color:rgba(255,255,255,.8);transition:var(--sc);position:relative;}
.side-nav a::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);transform:scaleY(0);transition:transform .2s ease;}
.side-nav a:hover,.side-nav a.active{background:rgba(255,255,255,.07);color:#fff;}
.side-nav a:hover::before,.side-nav a.active::before{transform:scaleY(1);}
.side-nav .sub{font-size:12.5px;padding-left:32px;color:rgba(255,255,255,.5);min-height:42px;font-weight:500;}
.side-nav .sub::after{content:'';position:absolute;left:20px;width:6px;height:1px;background:rgba(255,255,255,.28);}
.side-bottom{padding:12px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0;}
.side-chat-slot{margin-bottom:10px;}
/* 枠なしでショウヘイをそのまま置き、「AIチャットで回答中」を強調する */
.side-chat-btn{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;
  padding:6px 4px 8px;border:none;background:none;color:#fff;
  font-family:var(--jp);font-weight:700;font-size:12.5px;letter-spacing:.01em;line-height:1.3;
  cursor:pointer;transition:var(--sc);}
.side-chat-btn:hover{transform:translateY(-2px);}
.side-chat-icon{width:102px;height:auto;flex-shrink:0;
  filter:drop-shadow(0 0 12px rgba(255,255,255,.45)) drop-shadow(0 8px 14px rgba(0,0,0,.35));}
/* 「チャットはここだよ！」を吹き出しにして、もぐらの上に乗せる */
.side-chat-bubble{position:relative;background:#fff;border:2px solid var(--blue);border-radius:12px;
  padding:5px 11px;margin-bottom:3px;font-size:11px;font-weight:700;color:var(--navy);
  box-shadow:0 6px 14px rgba(0,0,0,.22);white-space:nowrap;}
/* しっぽ：正方形を45度回転させ、下・右の辺だけ枠線を出す。
   二重三角形より枠の太さがずれにくく、丸角の中央にきれいに収まる。 */
.side-chat-bubble::after{content:'';position:absolute;left:50%;bottom:-7px;transform:translateX(-50%) rotate(45deg);
  width:12px;height:12px;background:#fff;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  border-radius:0 0 3px 0;}
/* セッション内で初めて表示されたときだけ、控えめに存在感を出す */
.side-chat-btn.intro .side-chat-icon{animation:sideChatPop 900ms cubic-bezier(.34,1.56,.64,1) 250ms both;}
.side-chat-btn.intro .side-chat-bubble{animation:sideChatFade 700ms ease 550ms both;}
@keyframes sideChatPop{0%{transform:scale(.82) translateY(6px);opacity:0;}
  55%{transform:scale(1.08) translateY(-3px);opacity:1;}
  75%{transform:scale(.97);}100%{transform:scale(1) translateY(0);}}
@keyframes sideChatFade{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){
  .side-chat-btn.intro .side-chat-icon,.side-chat-btn.intro .side-chat-bubble{animation:none;}
}
.side-cta{display:flex;align-items:center;justify-content:center;width:100%;padding:11px;
  border-radius:999px;background:var(--gold);color:#10254C;font-weight:700;font-size:13.5px;
  box-shadow:0 6px 16px rgba(252,201,41,.28);transition:var(--sc);}
.side-cta:hover{background:var(--gold-d);transform:translateY(-1px);}

/* サイドバーの「採用情報」の行だけ反転配色にして目立たせる（全ページ共通） */
.side-nav a[href="recruit.html"]{background:var(--gold);color:var(--navy);border-bottom-color:rgba(11,35,80,.15);}
.side-nav a[href="recruit.html"]::before{background:var(--navy);}
.side-nav a[href="recruit.html"]:hover,
.side-nav a[href="recruit.html"].active{background:var(--gold-d);color:var(--navy);}
.hamburger{display:none;position:fixed;right:13px;top:11px;z-index:97;width:44px;height:42px;
  border:1.5px solid rgba(255,255,255,.3);border-radius:10px;background:rgba(11,35,80,.86);color:#fff;
  font-size:20px;cursor:pointer;align-items:center;justify-content:center;backdrop-filter:blur(6px);}
.insta-banner{position:fixed;right:16px;top:16px;z-index:85;transition:var(--sc);}
.insta-banner:hover{transform:translateY(-2px);}
.insta-banner img{display:block;width:200px;height:auto;}

/* ===== PAGE ===== */
.page{margin-left:var(--side);}

/* ===== BLUEPRINT（図面）背景 ===== */
.bp{position:relative;overflow:hidden;background:var(--navy);}
.bp::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;}
.bp::after{content:'';position:absolute;left:-10%;top:-30%;width:60%;height:160%;
  background:radial-gradient(circle at 30% 40%,rgba(21,65,153,.55),transparent 62%);pointer-events:none;}
.bp>*{position:relative;z-index:1;}

/* ==============================================
   ファーストビュー（トップページ）
   ----------------------------------------------
   背景で映像を流し、その上にキャッチコピーとCTAを重ねる。
   映像が読めない環境（通信が遅い・自動再生が止められている等）では
   poster の静止画がそのまま残るので、文字が読めなくなることはない。
   本番映像に差し替えるときは <video> の src と poster を変えるだけ。
   ============================================== */
.fv{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:min(100svh,900px);background:var(--navy);}
.fv-media{position:absolute;inset:0;z-index:0;}
.fv-media video,.fv-media img{width:100%;height:100%;object-fit:cover;display:block;}
/* 覆いは「映像を見せながら文字を読ませる」ためのもの。
   面全体をごく薄い紺で締め、文字が乗る下側だけを濃くする。
   （以前は左40%をほぼ黒で塗りつぶしていて、映像がまったく見えなかった） */
/* 映像に文字が焼き込まれているため、覆いは最小限にする。
   下側だけ濃くして、CTAボタンとスクロール誘導の可読性を確保する。 */
.fv-media::after{content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(6,20,45,.18) 0%,transparent 24%,transparent 56%,rgba(6,20,45,.68) 100%);}
/* 図面グリッドは映像を汚すので停止（要素はHTMLに残したまま） */
.fv-grid{display:none;}
/* スマホ専用の映像直下ボタン。PCでは出さない（スマホ側の指定は末尾の「スマホ調整」ブロック） */
.fv-after{display:none;}

/* 仮映像であることを示すバッジ。本番映像に差し替えたら span ごと消す */
.fv-badge{position:absolute;right:0;top:0;z-index:2;background:rgba(200,40,30,.92);color:#fff;
  font-size:.64rem;font-weight:700;letter-spacing:.12em;padding:4px 11px;border-radius:0 0 0 9px;}

/* margin:auto にすると上下の auto マージンが align-items:flex-end を打ち消して
   中央寄せになってしまうので、左右だけ auto にする。 */
.fv-in{position:relative;z-index:2;width:min(var(--max),calc(100% - 64px));margin:0 auto;
  padding:0 0 clamp(64px,9vh,110px);}
/* 情報量を絞り、キャッチとCTAだけを左下に置く。
   消した要素はHTMLに残してあるので、必要になったら display を戻すだけでよい。 */
.fv-en{display:none;}
.fv-note{display:none;}
/* h1 は SEO・スクリーンリーダー向けに残し、見た目だけ隠す */
.fv h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
/* 映像そのものにキャッチコピーが焼き込まれているため、サイト側のキャッチと
   リードは表示しない（同じことを二重に言うのを避ける）。
   文言は HTML に残してあるので、文字なしの映像に差し替えたら
   この display:none を外すだけで元に戻せる。 */
.fv-catch{display:none;}
.fv-lead{display:none;}
.fv-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:0;}

/* 下部のスクロール誘導。右下隅に貼りつくカード型 */
.fv-scroll{position:absolute;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:14px;
  width:224px;height:68px;background:#fff;border-radius:10px 0 0 0;
  font-family:var(--en);font-size:.86rem;font-weight:600;letter-spacing:3px;color:var(--blue-br);}
.fv-scroll i{display:block;width:1px;height:44px;background:rgba(47,107,214,.28);position:relative;overflow:hidden;}
.fv-scroll i::after{content:'';position:absolute;left:0;top:-15px;width:1px;height:15px;
  background:var(--blue-br);animation:fvScroll 2.2s cubic-bezier(.6,0,.4,1) infinite;}
@keyframes fvScroll{0%{transform:translateY(0)}60%,100%{transform:translateY(59px)}}

/* 映像を止める設定の人には、動きのある要素を出さない */
@media(prefers-reduced-motion:reduce){.fv-scroll i::after{animation:none;}}
/* スクロール誘導カードは画面右下に貼りつくので、同じ場所に開くチャットパネルを
   トップページだけ上へ逃がす（フッター最下部で重ならないよう余白も足す）。 */
@media(min-width:769px){
  body:has(.fv) .tc-panel{bottom:92px;}
  body:has(.fv) .footer-copy{padding-bottom:152px;}
}

@media(max-width:768px){
  .fv{min-height:min(88svh,720px);}
  /* 下寄せにしたので、右下に浮くチャットボタンとCTAが重ならない余白を取る */
  .fv-in{padding:0 0 92px;}
  .fv-media::after{background:
    linear-gradient(180deg,transparent 0 40%,rgba(6,20,45,.72) 100%),
    rgba(11,35,80,.38);}
  .fv-cta{margin-top:24px;}
  .fv-scroll{display:none;}

  /* トップの映像はスマホでも背景いっぱいに敷き、PCと同じくCTAを重ねる。
     縦動画は js/common.js が画面幅で選ぶ（横動画しか無い環境でも中央が見えるだけで成立する）。
     高さは固定ヘッダー（64px）を除いた画面いっぱい。 */
  .fv:not(.rc-hero){min-height:calc(100svh - 64px);}
  .fv:not(.rc-hero) .fv-media video{object-position:center;}
}

/* ===== 採用ページ ファーストビュー（.fv を流用したスライド版） =====
   背景を複数枚の写真でクロスフェードさせる。切り替えは js/recruit.js。
   JSが動かない環境では1枚目が静止画として残るので、表示が壊れることはない。 */
.rc-slides{background:var(--navy);}
.rc-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.4s ease;}
.rc-slide.is-active{opacity:1;}
@media(prefers-reduced-motion:reduce){.rc-slide{transition:none;}}
/* パンくずは明るい地用の配色なので、写真の上では白系に読み替える */
.rc-crumb{margin-bottom:22px;}
.rc-crumb,.rc-crumb a{color:rgba(255,255,255,.66);}
.rc-crumb a:hover{color:#fff;}
.rc-crumb span{color:rgba(255,255,255,.34);}
/* 採用ヒーローの文字組み：小さな英字ラベル → 日本語の大見出し → 日本語のサブコピー。
   .fv-catch / .fv-lead はトップFV用に display:none にしてあるので、採用ページだけ表示に戻す。 */
.rc-en{display:block;font-family:var(--en);font-weight:600;letter-spacing:.18em;
  font-size:clamp(.95rem,1.6vw,1.2rem);line-height:1;color:var(--gold);margin-bottom:18px;}
.rc-hero .fv-catch{display:block;font-size:clamp(1.9rem,5vw,3.9rem);font-weight:700;line-height:1.3;
  letter-spacing:.05em;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.35);margin-bottom:18px;}
.rc-hero .fv-lead{display:block;font-size:clamp(.95rem,1.5vw,1.12rem);font-weight:500;line-height:1.9;
  color:rgba(255,255,255,.9);text-shadow:0 1px 12px rgba(0,0,0,.35);margin-bottom:32px;}
/* スライドの現在地を示すドット */
.rc-dots{position:absolute;left:50%;bottom:26px;z-index:3;display:flex;gap:9px;transform:translateX(-50%);}
.rc-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);transition:var(--sc);}
.rc-dots i.is-on{background:var(--gold);width:20px;border-radius:4px;}
@media(max-width:768px){
  .rc-dots{bottom:18px;}
}

/* ===== SUBPAGE HERO =====
   全ページ同じ濃紺の帯が続くと重いので、明るい地に反転して高さも圧縮する。
   .bp（図面背景）の指定より後に書いて、地と文字色を上書きしている。 */
.sp-hero{padding:64px 0 72px;}
.sp-hero.bp{background:linear-gradient(160deg,#F5F8FD 0%,#E3EDFB 100%);color:var(--ink);
  margin:0 16px;border-radius:0 0 var(--r-panel) var(--r-panel);}
.sp-hero.bp::before{background-image:linear-gradient(rgba(21,65,153,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(21,65,153,.045) 1px,transparent 1px);}
.sp-hero.bp::after{background:radial-gradient(circle at 30% 40%,rgba(47,107,214,.10),transparent 62%);}
/* 明るい地の上のパンくず。指定の .45 だとコントラスト比が 2.8 まで落ちるので、
   見た目の軽さは保ったまま 4.5 を超える .66 まで濃くしている。 */
.sp-breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:20px;font-size:.72rem;font-weight:700;color:rgba(22,35,58,.66);flex-wrap:wrap;}
.sp-breadcrumb a{color:rgba(22,35,58,.66);transition:color .2s;}
.sp-breadcrumb a:hover{color:var(--blue);}
.sp-breadcrumb span{color:rgba(22,35,58,.34);}
.sp-hero-en{font-family:var(--en);font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:500;letter-spacing:.04em;
  color:var(--blue-br);display:block;margin-bottom:6px;line-height:1;}
/* h1 の左に金の縦バー。旧・黄色いマーカーペン風の下線アニメの代わり */
/* 見出しは単語の途中で折り返さない。折り返してよい位置は HTML 側の <wbr> で指定する。
   （keep-all で文字ごとの改行を止め、それでも収まらない時だけ anywhere で折る） */
.sp-hero h1,.sp-hero-catch,.sec-title{word-break:keep-all;overflow-wrap:anywhere;}
/* 大見出しの2行目（「株式会社居藤電機」など）。必ず改行して2行にする */
.sp-hero h1 .h1-sub{display:block;}
.sp-hero h1{font-size:clamp(1.7rem,3.4vw,2.7rem);font-weight:var(--w-head);line-height:1.38;color:var(--ink);
  margin-bottom:18px;letter-spacing:var(--ls-head);text-wrap:balance;
  padding-left:16px;border-left:3px solid var(--gold);}
.sp-hero-catch{font-size:clamp(1.15rem,2.4vw,1.7rem);font-weight:var(--w-head);line-height:1.55;color:var(--navy);
  margin-bottom:14px;letter-spacing:var(--ls-head);text-wrap:balance;}
.sp-hero-catch em{font-style:normal;color:var(--blue);}
.sp-hero-lead{font-size:clamp(.9rem,1.4vw,1.04rem);font-weight:var(--w-lead);color:var(--muted);max-width:720px;line-height:1.95;}
.sp-hero-note{font-size:.86rem;color:var(--muted);max-width:720px;margin-top:14px;line-height:1.9;}
.sp-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}
/* 明るい地になったので、白抜きボタンは青の輪郭に読み替える */
.sp-hero.bp .btn.wh{background:rgba(21,65,153,.04);color:var(--blue);box-shadow:inset 0 0 0 1.5px rgba(21,65,153,.42);}
.sp-hero.bp .btn.wh:hover{background:rgba(21,65,153,.09);color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue);}
/* 明るい地の上のマスコット吹き出しは、金枠だと浮くので青枠に戻す */
.sp-hero.bp .mascot-bubble{border-color:var(--blue);box-shadow:var(--glow-in);}
.sp-hero.bp .mascot-bubble::before{border-right-color:var(--blue);}

/* ===== SECTION =====
   色の付いた面は左右16px内側に引き込み、上角を大きく丸めて
   「地の上に浮いたパネル」として重ねる。 */
.sec{position:relative;padding:120px 0 140px;}
.sec.soft{background:var(--soft);}
.sec.navy{background:var(--navy);color:#fff;}
.sec.navy .sec-title{color:#fff;}
.sec.navy .sec-lead{color:rgba(255,255,255,.74);}
.sec.tight{padding:64px 0;}
.sec.soft,.sec.navy,.sec.bp,.footer{
  margin:0 16px;border-radius:var(--r-panel) var(--r-panel) 0 0;overflow:hidden;}
.sec.soft,.sec.navy,.sec.bp{padding:140px 0 160px;}
.sec.tight.soft,.sec.tight.navy,.sec.tight.bp{padding:84px 0 96px;}
/* 英字ラベル＋和文見出しの2段ユニット。
   英字は大きくするが、情報の本体は和文なので主役は譲らない。 */
.eyebrow{
  display:block;font-family:var(--en);
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  font-weight:500;line-height:1;letter-spacing:.04em;
  color:var(--blue-br);margin-bottom:4px;
  padding-left:1.7em;position:relative;}
/* ロゴマーク。em指定なので、eyebrowの文字サイズが画面幅で
   変化しても（clampのvw成分）、アイコンと文字の比率は常に一定になる。 */
.eyebrow::before{content:'';position:absolute;left:0;top:50%;
  width:1.3em;height:1.3em;transform:translateY(-50%);
  background:url('../img/logo-mark.png') center/contain no-repeat;}
.sec.navy .eyebrow{color:var(--gold);}
.sec-title{font-size:clamp(1.4rem,2.7vw,2.05rem);font-weight:var(--w-head);line-height:1.45;
  margin-bottom:14px;letter-spacing:var(--ls-head);padding-left:26px;text-wrap:balance;}
.sec-title.ctr,.sec-lead.ctr,.eyebrow.ctr{text-align:center;}
/* 中央寄せのときは、箱を文字幅に縮めてから中央に置く。
   display:block のままだとアイコンが左端に取り残される。 */
.eyebrow.ctr{display:table;margin-left:auto;margin-right:auto;}
.sec-title.ctr{padding-left:0;}
.sec-lead{font-size:clamp(.9rem,1.4vw,1.02rem);font-weight:500;line-height:1.95;color:var(--muted);margin-bottom:44px;max-width:820px;}
.sec-lead.ctr{margin-left:auto;margin-right:auto;}
.sec-lead p+p{margin-top:1em;}
.catch{font-size:clamp(1.3rem,2.8vw,2.1rem);font-weight:700;line-height:1.55;margin-bottom:18px;letter-spacing:.02em;text-wrap:balance;}
/* ページ末尾のCTAで、ファーストビューのコピーをもう一度大きく見せる（recruit.html） */
.rc-final-catch{font-size:clamp(1.7rem,3.6vw,2.8rem);font-weight:700;line-height:1.4;
  color:var(--navy);letter-spacing:var(--ls-head);text-wrap:balance;margin-bottom:28px;}
.catch .gold{color:var(--gold);}
.catch .blue{color:var(--blue);}
.h3{font-size:clamp(1.05rem,1.9vw,1.32rem);font-weight:700;line-height:1.5;margin-bottom:10px;}
.body-txt{font-size:.95rem;font-weight:500;line-height:1.95;color:var(--muted);}
.body-txt p+p{margin-top:1em;}
/* お知らせ本文（Markdown → HTML）の小見出し・箇条書き・画像 */
.body-txt h2{font-size:1.15rem;font-weight:700;line-height:1.5;color:var(--navy);margin:1.8em 0 .6em;padding-left:14px;border-left:4px solid var(--blue);}
.body-txt h3{font-size:1.02rem;font-weight:700;line-height:1.5;color:var(--navy);margin:1.4em 0 .5em;}
.body-txt ul{margin:.6em 0 1em;padding-left:1.4em;}
.body-txt li{margin:.25em 0;}
.body-txt img{max-width:100%;border-radius:14px;margin:.6em 0;}
.body-txt a{color:var(--blue);text-decoration:underline;}

/* ===== BUTTONS =====
   既定は「淡い青地＋青文字のピル」。金の塗り（.key）は1ページ1箇所だけに使う。
   影は外に落とさず内側のグローで、ホバーも色とグローの変化だけにする。 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7em;min-width:210px;min-height:52px;
  padding:11px 26px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--blue-pale),#fff 50%,var(--blue-pale));
  color:var(--blue);font-weight:700;font-size:.92rem;letter-spacing:.04em;
  border:none;box-shadow:inset 0 0 10px rgba(21,65,153,.30);transition:var(--sc);}
/* 右の「›」をやめ、左に小さな青ドットを置く */
.btn::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.btn:hover{color:var(--navy);box-shadow:inset 0 0 0 1px rgba(21,65,153,.34),inset 0 0 18px rgba(21,65,153,.20);}
/* 最重要CTA（1ページ1つ）＝金の塗り。外側の影は持たせない */
.btn.key{background:var(--gold);color:#10254C;box-shadow:var(--glow-gold);}
.btn.key:hover{background:var(--gold-d);color:#10254C;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),inset 0 0 18px rgba(255,255,255,.35);}
/* 角丸を落とした青のベタ塗り。フォーム送信など「進む」操作に使う */
.btn.solid{background:var(--blue);color:#fff;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);}
.btn.solid:hover{background:#0F317A;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 0 18px rgba(255,255,255,.14);}
.btn.ol{background:transparent;color:var(--blue);box-shadow:inset 0 0 0 1.5px rgba(21,65,153,.42);}
.btn.ol:hover{background:rgba(21,65,153,.06);color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue);}
.btn.wh{background:rgba(255,255,255,.10);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);}
.btn.wh:hover{background:rgba(255,255,255,.20);color:#fff;box-shadow:inset 0 0 0 1.5px #fff,inset 0 0 18px rgba(255,255,255,.22);}
/* ホームの採用CTAだけ、金は使わずに枠を太くして視認性を上げる */
.btn.wh.recruit{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);}
.btn.wh.recruit:hover{background:rgba(255,255,255,.26);box-shadow:inset 0 0 0 2px #fff,inset 0 0 18px rgba(255,255,255,.22);}
.btn.sm{min-width:0;min-height:42px;padding:8px 18px;font-size:.82rem;}
.sec-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:40px;}
.sec-cta.ctr{justify-content:center;}

/* ===== REVEAL =====
   .js が付いているとき（＝JSが動く環境）だけ隠してからフェードインさせる。
   JSが動かない環境では最初から表示されるため、内容が消えることはない。 */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,.84,.44,1);}
.js .rv.visible{opacity:1;transform:none;}
.js .rv.d1{transition-delay:.10s}.js .rv.d2{transition-delay:.20s}.js .rv.d3{transition-delay:.30s}.js .rv.d4{transition-delay:.40s}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none;}}

/* ==============================================
   写真プレースホルダー
   写真は後日差し替えるため、枠だけを先に置いている。
   data-label に入れた文字が枠内に表示される。
   差し替え時は <div class="ph"> を <img> に置き換える。
   ============================================== */
.ph{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  aspect-ratio:4/3;width:100%;border-radius:var(--r-img);overflow:hidden;text-align:center;padding:14px;
  background:repeating-linear-gradient(45deg,#EDF2F9 0 11px,#E5EBF5 11px 22px);
  border:2px dashed #BFCEE4;color:#7E90AE;}
.ph::before{content:'';width:26px;height:22px;border:2px solid currentColor;border-radius:3px;opacity:.6;
  background:radial-gradient(circle at 68% 34%,currentColor 2.6px,transparent 2.6px);}
.ph::after{content:attr(data-label);font-size:.74rem;font-weight:700;line-height:1.5;letter-spacing:.02em;}
.ph.wide{aspect-ratio:16/9;}
.ph.sq{aspect-ratio:1/1;}
.ph.tall{aspect-ratio:3/4;}
.ph.hero{aspect-ratio:21/9;border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.7);
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 11px,rgba(255,255,255,.02) 11px 22px);}
.ph.round{border-radius:50%;aspect-ratio:1/1;}

/* ===== GRID ===== */
.g2,.g3,.g4,.g5{display:grid;gap:26px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.g5{grid-template-columns:repeat(5,1fr);}
.split{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;}
.split.narrow{grid-template-columns:1fr 1.15fr;}
/* .split は「文章＋写真」用に上下中央揃えだが、カードを2枚並べる使い方
  （会社概要の Mission / Vision）だと文量差で天地がずれるので高さを揃える。 */
.split>.card,.split>.num-card,.split>.mvv-card,.split>.job,.split>.itv{align-self:stretch;}

/* ===== CARD =====
   影は外に落とさない。内側のグロー（＝薄い罫線＋内側のにじみ）で面を立てる。 */
.card{background:#fff;border:none;border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:var(--sc);box-shadow:var(--glow-in);}
.card:hover{box-shadow:var(--glow-in-hover);}
/* 本番写真に差し替えたカード（<figure class="tmp-img wide flat"> を <img> にしたもの） */
.card>img{width:100%;aspect-ratio:16/9;object-fit:cover;}
/* recruit.html PHILOSOPHY の縦長写真（仮画像の tall と同じ 3:4） */
img.rc-phi-img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-img);}
/* business.html のギャラリー（.g3）と index.html の事業紹介（.biz-split）に直接置いた本番写真。
   仮画像の <figure class="tmp-img"> を <img> にしたもので、枠の比率はそのまま */
.g2>img,.g3>img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-img);display:block;}
.g2>img{aspect-ratio:16/9;}

/* 事業内容：各分野の工事項目（business.html） */
.svc-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 16px;margin:26px 0 30px;max-width:860px;}
.svc-list li{position:relative;padding:12px 16px 12px 38px;background:#fff;border-radius:12px;box-shadow:var(--glow-in);font-size:.94rem;font-weight:700;line-height:1.6;color:var(--navy);}
.svc-list li::before{content:'';position:absolute;left:16px;top:50%;width:10px;height:10px;border-radius:50%;background:var(--gold);transform:translateY(-50%);}
/* 会社概要：認定・登録のロゴ並び。画像が来るまでは .ph の点線枠 */
.cert-grid>div{background:#fff;border-radius:var(--r);padding:18px;box-shadow:var(--glow-in);display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;}
.cert-grid>div img{max-width:100%;max-height:100%;object-fit:contain;}
.cert-grid>.ph{background:transparent;box-shadow:none;padding:0;}
.biz-split>img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-img);display:block;}
.card-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.card-body h3{font-size:1.05rem;font-weight:700;line-height:1.5;margin-bottom:8px;}
.card-body p{font-size:.88rem;font-weight:500;line-height:1.85;color:var(--muted);}
.card-body .btn{margin-top:auto;}
/* カード下部の「詳細はこちら」（トップの事業内容カード） */
.card-body .card-more{margin-top:auto;padding-top:14px;font-size:.84rem;font-weight:700;color:var(--blue);display:flex;align-items:center;gap:6px;}
.card-body .card-more::after{content:'';width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);}
.card-tag{display:inline-flex;align-items:center;align-self:flex-start;padding:3px 11px;border-radius:999px;
  background:rgba(21,65,153,.09);color:var(--blue);font-size:.7rem;font-weight:700;letter-spacing:.06em;margin-bottom:10px;}
.sec.navy .card{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 0 16px rgba(255,255,255,.05);}
.sec.navy .card:hover{box-shadow:inset 0 0 0 1px rgba(252,201,41,.5),inset 0 0 20px rgba(252,201,41,.14);}
.sec.navy .card-body p{color:rgba(255,255,255,.72);}
.sec.navy .card-tag{background:rgba(252,201,41,.16);color:var(--gold);}

/* 番号付きカード（強み・理由など） */
.num-card{display:block;background:#fff;border:none;border-radius:var(--r);padding:26px 24px;position:relative;
  transition:var(--sc);box-shadow:var(--glow-in);}
.num-card:hover{box-shadow:var(--glow-in-hover);}
a.num-card h3::after{content:'›';color:var(--blue-br);margin-left:.4em;font-size:1.1em;}
/* 01〜04 の数字は金。金は「ここを見て」の印として少量だけ使う */
.num-card .no{font-family:var(--en);font-size:2.5rem;font-weight:500;line-height:1;color:var(--gold-d);opacity:1;display:block;margin-bottom:6px;}
.num-card h3{font-size:1.02rem;font-weight:700;line-height:1.5;margin-bottom:8px;letter-spacing:.03em;}
.num-card p{font-size:.88rem;font-weight:400;line-height:1.9;color:var(--muted);}
/* REASON（recruit.html）は採用サイトの見せ場のひとつなので、数字をより主役級に。
   .num-card 自体は施工実績・企業理念など複数ページで共用のためスコープする。 */
.rc-reason .num-card{padding:34px 26px 30px;}
.rc-reason .num-card .no{font-size:clamp(3.2rem,5vw,4.4rem);font-weight:600;margin-bottom:10px;}
.rc-reason .num-card h3{font-size:1.08rem;}

/* アイコン付き価値観カード */
.mvv-card{background:#fff;border:none;border-radius:var(--r);padding:24px 18px;text-align:center;
  transition:var(--sc);box-shadow:var(--glow-in);}
.mvv-card:hover{box-shadow:var(--glow-gold);}
/* 丸い下地は外し、福利厚生・FOR YOU と同じ「白地に直置き」に揃えてある。
   丸があると視覚的な容器になり、同じ68pxでもアイコンが小さく見えるため。 */
.mvv-card .ic{width:68px;height:68px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;}
.mvv-card .ic img{width:68px;height:68px;object-fit:contain;}
.mvv-card strong{display:block;font-size:1rem;font-weight:700;}

/* SVGアイコン＋見出し＋補足文のカード（福利厚生・休日など） */
.icon-card{background:#fff;border:none;border-radius:var(--r);padding:32px 22px 26px;text-align:center;
  transition:var(--sc);box-shadow:var(--glow-in);}
.icon-card:hover{box-shadow:var(--glow-in-hover);}
.icon-card-ic{width:68px;height:68px;margin:0 auto 16px;display:block;object-fit:contain;}
/* FOR YOU（recruit.html）は説明文がなくアイコンとラベルだけなので、ここだけ大きくする。
   福利厚生も5列（.g5）になったため、.g5 ではなく専用クラスで指定している。 */
.fy-grid .icon-card-ic{width:84px;height:84px;}
.icon-card h3{font-size:.96rem;font-weight:700;line-height:1.5;margin-bottom:6px;}
.icon-card p{font-size:.8rem;font-weight:400;line-height:1.8;color:var(--muted);}

/* 採用情報 NUMBERS：数字で見る居藤電機（値が未確定のものは .tbd で黄色表示） */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.stat{background:#fff;border:none;border-radius:var(--r);padding:26px 20px 22px;text-align:center;box-shadow:var(--glow-in);}
.stat-lb{display:block;font-size:.84rem;font-weight:700;color:var(--blue);letter-spacing:.06em;margin-bottom:10px;}
.stat-no{display:block;font-family:var(--en);font-size:2.8rem;font-weight:600;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums;}
.stat-no small{font-family:var(--jp);font-size:.9rem;font-weight:700;margin-left:3px;}
.stat-no .tbd{font-family:var(--jp);font-size:1.25rem;font-weight:700;}
/* 休日・休暇の見出しアイコン */
.holiday-ic{width:57px;height:57px;margin-bottom:6px;}

/* ===== 選考の流れ（requirements.html「応募から入社まで」） ===== */
.flow{display:flex;flex-direction:column;gap:0;}
.flow-step{display:grid;grid-template-columns:96px 1fr;gap:24px;padding:24px 0;border-top:1px solid var(--line);align-items:start;}
.flow-step:last-child{border-bottom:1px solid var(--line);}
.flow-no{font-family:var(--en);font-size:2.6rem;font-weight:600;line-height:1;color:var(--blue);}
.flow-no small{display:block;font-family:var(--jp);font-size:.62rem;font-weight:700;letter-spacing:.18em;color:var(--muted);margin-top:4px;}
/* 時刻が未確定（〇〇:〇〇）の場合、全角文字が 2.6rem のままだと 96px の
   カラムに収まらず3行に折り返してハイライトが崩れる。 */
.flow-no .tbd{display:inline-block;font-family:var(--jp);font-size:.95rem;font-weight:700;
  letter-spacing:0;line-height:1.6;white-space:nowrap;}
.flow-main h3{font-size:1.12rem;font-weight:700;margin-bottom:8px;}
.flow-main p{font-size:.92rem;font-weight:500;line-height:1.9;color:var(--muted);}

/* ===== 職種別の仕事内容（job.html JOB 01） =====
   写真1枚と作業の一覧を左右に置く。作業の内訳は FLOW 04 でも写真つきで見せるので、
   ここは一覧に留めて、同じ写真がページ内で二度出ないようにしている。 */
.job-split{margin-top:34px;}
.split>.job-photo{align-self:stretch;}
.job-photo{position:relative;margin:0;height:100%;min-height:300px;
  border-radius:var(--r);overflow:hidden;background:var(--soft);}
.job-photo img{width:100%;height:100%;object-fit:cover;}
.job-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--glow-in);pointer-events:none;}
.job-list{list-style:none;display:flex;flex-direction:column;}
.job-list>li{padding:15px 0;border-top:1px solid var(--line);}
.job-list>li:last-child{border-bottom:1px solid var(--line);}
.job-list h3{font-size:1.02rem;font-weight:var(--w-head);letter-spacing:.03em;line-height:1.5;margin-bottom:6px;}
.job-list p{font-size:.88rem;font-weight:var(--w-body);line-height:1.9;color:var(--muted);}
@media(max-width:900px){
  .job-split{margin-top:26px;}
  .job-photo{height:auto;min-height:0;}
  .job-photo img{height:auto;aspect-ratio:16/9;}
}

/* ===== 工程フロー（job.html「電気設備工事が完成するまで」） =====
   写真と本文を左右交互に置き、段と段のあいだを細い縦線でつないで順番を示す。
   左右の入れ替えは .rev を付けた段だけ。04 は枝分かれがあるので .wide で全幅にし、
   その前後で並びが単調にならないよう 02 / 05 / 07 に .rev を付けている。 */
/* 工程の目次。7つを横一列に並べ、背景色を交互にして工程の切り替わりを見せる。
   押すとその工程まで飛ぶ（飛び先は各段の id="proc-01"〜"proc-07"）。 */
.proc-nav{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:36px;}
.proc-nav a{display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;
  padding:14px 8px 16px;border-radius:var(--r);text-align:center;
  font-size:.78rem;font-weight:var(--w-head);line-height:1.5;letter-spacing:.02em;transition:var(--sc);}
.proc-nav-no{font-family:var(--en);font-size:1.5rem;font-weight:600;line-height:1;letter-spacing:.02em;}
.proc-nav li:nth-child(odd) a{background:var(--blue);color:#fff;}
.proc-nav li:nth-child(odd) .proc-nav-no{color:rgba(255,255,255,.66);}
.proc-nav li:nth-child(odd) a:hover{background:var(--navy2);}
.proc-nav li:nth-child(even) a{background:#D9E5F8;color:var(--blue);box-shadow:var(--glow-in);}
.proc-nav li:nth-child(even) .proc-nav-no{color:var(--blue-br);}
.proc-nav li:nth-child(even) a:hover{background:#C8D9F3;}

/* 01〜07 を全幅の帯にし、色を交互に変える。帯の下端から下向きの三角を垂らして
   次の帯に重ね、矢印で送られていくように見せる（参考：古川広吉鉄工所 /process）。
   中身は .wrap で本文幅に収めるので、色だけが全幅に広がる。 */
.flow-sec{overflow:hidden;}
.proc{list-style:none;margin-top:56px;}
.proc-step{position:relative;padding:84px 0 66px;background:var(--band);scroll-margin-top:96px;}
.proc-step::after{content:"";position:absolute;left:0;right:0;top:100%;height:60px;z-index:1;
  background:var(--band);clip-path:polygon(0 0,100% 0,50% 100%);}
.proc-step:last-child::after{display:none;}
/* 先の帯ほど手前に重ねる。順序どおりだと三角が次の帯に隠れてしまう */
.proc-step:nth-child(1){z-index:7;} .proc-step:nth-child(2){z-index:6;}
.proc-step:nth-child(3){z-index:5;} .proc-step:nth-child(4){z-index:4;}
.proc-step:nth-child(5){z-index:3;} .proc-step:nth-child(6){z-index:2;}
.proc-step:nth-child(7){z-index:1;}
/* 色分け。白と淡い青を交互にし、04（現場施工）だけ濃紺にして山場を示す */
.proc-step{--band:#fff;}
.proc-step:nth-child(2),.proc-step:nth-child(6){--band:#E3EBF8;}
.proc-step:nth-child(4){--band:var(--navy);}
/* 濃紺の帯だけ文字を白に反転する */
.proc-step:nth-child(4) .proc-num,.proc-step:nth-child(4) .proc-title,
.proc-step:nth-child(4) .proc-sub h4{color:#fff;}
.proc-step:nth-child(4) .proc-text,.proc-step:nth-child(4) .proc-sub p{color:rgba(255,255,255,.76);}
.proc-step:nth-child(4) .proc-label{color:rgba(255,255,255,.62);}
.proc-step:nth-child(4) .proc-no::after{background:rgba(255,255,255,.22);}
.proc-step:nth-child(4) .proc-sub{border-top-color:rgba(255,255,255,.22);}

.proc-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);align-items:center;}
/* 左右の入れ替え。DOM の並び（写真→本文）は変えずに配置だけ差し替える */
.proc-step.rev .proc-media{grid-column:2;grid-row:1;}
.proc-step.rev .proc-body{grid-column:1;grid-row:1;}
.proc-step.wide .proc-in{grid-template-columns:minmax(0,1fr);}

.proc-media{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--soft);}
.proc-media img{width:100%;aspect-ratio:3/2;object-fit:cover;}
.proc-media::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--glow-in);pointer-events:none;}

.proc-body{min-width:0;}
/* 番号＋STEP＋罫線。罫線が本文幅いっぱいまで伸びて、段の始まりを示す */
.proc-no{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.proc-num{font-family:var(--en);font-size:clamp(2.9rem,4.6vw,3.9rem);font-weight:600;
  line-height:.84;color:var(--blue);letter-spacing:.02em;}
.proc-label{font-size:.62rem;font-weight:700;letter-spacing:.24em;color:var(--blue-br);}
.proc-no::after{content:"";flex:1;height:1px;background:var(--line);}
.proc-title{font-size:clamp(1.16rem,1.6vw,1.42rem);font-weight:var(--w-head);
  letter-spacing:var(--ls-head);line-height:1.6;margin-bottom:12px;}
.proc-text{font-size:.94rem;font-weight:var(--w-body);line-height:2;color:var(--muted);}

/* 04 現場施工。枝分かれする3つの作業を全幅で見せる */
.proc-step.wide .proc-text{max-width:64ch;}
.proc-sub{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,28px);margin-top:28px;padding-top:28px;border-top:1px solid var(--line);}
.proc-sub>li{min-width:0;}
.proc-sub-media{position:relative;margin:0 0 14px;border-radius:var(--r);overflow:hidden;background:var(--soft);}
.proc-sub-media img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.proc-sub-media::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--glow-in);pointer-events:none;}
.proc-sub h4{font-size:1rem;font-weight:var(--w-head);letter-spacing:var(--ls-head);margin-bottom:8px;}
.proc-sub p{font-size:.86rem;font-weight:var(--w-body);line-height:1.9;color:var(--muted);}
@media(max-width:900px){
  .proc-nav{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:28px;}
  .proc-nav a{font-size:.76rem;padding:12px 6px 14px;}
  .proc{margin-top:32px;}
  .proc-step{padding:60px 0 46px;scroll-margin-top:80px;}
  /* 帯が細くなるぶん、矢印の切り込みも浅くする */
  .proc-step::after{height:34px;}
  .proc-in,.proc-step.wide .proc-in{grid-template-columns:minmax(0,1fr);gap:20px;}
  /* 1カラムでは写真が上、本文が下。.rev の入れ替えを打ち消す */
  .proc-step.rev .proc-media{grid-column:1;grid-row:1;}
  .proc-step.rev .proc-body{grid-column:1;grid-row:2;}
  .proc-media img{aspect-ratio:16/9;}
  .proc-sub{grid-template-columns:minmax(0,1fr);gap:26px;}
}
@media(max-width:560px){
  .proc-nav{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ===== 1日の流れ（縦一列タイムライン。recruit.html専用） =====
   丸・カードとも構成をシンプルにし、後から時刻や文言を直しやすくしてある。 */
.day-flow{display:flex;flex-direction:column;}
.day-step{position:relative;display:flex;align-items:flex-start;gap:22px;padding-bottom:52px;}
.day-step:last-child{padding-bottom:0;}
/* 時刻の玉。すべて同じ大きさ */
.day-marker{flex-shrink:0;width:92px;height:92px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.15;
  background:var(--blue);color:#fff;font-family:var(--en);font-size:1.05rem;font-weight:600;
  letter-spacing:.02em;}
.day-marker .tbd{display:block;background:none;border:none;padding:0;color:inherit;
  font-family:var(--jp);font-size:.64rem;font-weight:700;letter-spacing:0;}
/* 玉と玉の間はドットで結ぶ（実線より軽く、後から調整しやすい） */
.day-step:not(:last-child)::after{content:'';position:absolute;left:46px;top:100px;bottom:8px;
  width:0;border-left:3px dotted var(--navy);transform:translateX(-1.5px);}
.day-card{flex:1;background:#fff;border-radius:var(--r);padding:22px 24px;box-shadow:var(--glow-in);}
.day-card h3{font-size:1rem;font-weight:700;margin-bottom:8px;}
.day-card p{font-size:.86rem;font-weight:400;line-height:1.85;color:var(--muted);}
/* 写真つきのカード。右に写真、左に時刻ごとの説明 */
.day-card.has-img{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:center;}
.day-img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-img);}

/* ===== FAQ ===== */
.faq{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%;background:none;border:none;font:inherit;text-align:left;cursor:pointer;
  display:flex;align-items:flex-start;gap:14px;padding:20px 4px;color:inherit;transition:color .2s;}
.faq-q:hover{color:var(--blue);}
.faq-q .mark{font-family:var(--en);font-size:1.4rem;font-weight:600;line-height:1;color:var(--blue);flex-shrink:0;}
.faq-q .txt{flex:1;font-size:1rem;font-weight:700;line-height:1.6;}
.faq-q .car{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:rgba(21,65,153,.08);
  display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--blue);transition:transform .25s;}
.faq-item.open .faq-q .car{transform:rotate(180deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
/* 回答文が長くなっても切れないように余裕を持たせる */
.faq-item.open .faq-a{max-height:900px;}
.faq-a-in{display:flex;gap:14px;padding:0 4px 22px;}
/* A マークは白地に載るため、金（#E0AC10）ではコントラスト比 2.08 で不足。
   ロゴの金系を保ったまま濃くして 4.5 以上を確保する（Q＝青／A＝金の対比は維持）。 */
.faq-a-in .mark{font-family:var(--en);font-size:1.4rem;font-weight:600;line-height:1;color:#8A6300;flex-shrink:0;}
.faq-a-in p{flex:1;font-size:.92rem;font-weight:500;line-height:1.9;color:var(--muted);}

/* ===== 定義リスト（会社概要・募集要項） ===== */
.dl{border-top:1px solid var(--line);}
.dl-row{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:17px 4px;border-bottom:1px solid var(--line);}
.dl-row dt{font-size:.9rem;font-weight:700;color:var(--navy);}
.dl-row dd{font-size:.93rem;font-weight:500;line-height:1.85;color:var(--muted);}
.dl-row dd small{display:block;font-size:.8rem;font-weight:400;line-height:1.75;margin-top:3px;}
/* 「新潟県知事許可…＋業種リスト」が2組並ぶため、組の間に区切りの余白を入れる */
.dl-row dd ul:not(:last-child){margin-bottom:9px;}
.dl-row dd ul li{position:relative;padding-left:14px;}
.dl-row dd ul li::before{content:'';position:absolute;left:0;top:.78em;width:5px;height:5px;border-radius:50%;background:var(--gold);}

/* ===== 沿革 ===== */
.history{position:relative;padding-left:26px;}
.history::before{content:'';position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--blue),rgba(21,65,153,.15));}
.history-item{position:relative;padding-bottom:30px;}
.history-item::before{content:'';position:absolute;left:-26px;top:7px;width:12px;height:12px;border-radius:50%;
  background:#fff;border:3px solid var(--blue);}
.history-item .yr{font-size:.82rem;font-weight:700;letter-spacing:.08em;color:var(--blue-br);margin-bottom:4px;}
.history-item p{font-size:.93rem;font-weight:500;line-height:1.85;color:var(--muted);}
.history-media{margin-top:14px;max-width:340px;}

/* ===== 募集職種カード ===== */
.job{background:#fff;border:none;border-radius:var(--r);overflow:hidden;box-shadow:var(--glow-in);}
.job-head{background:var(--navy);color:#fff;padding:20px 24px;}
.job-head h3{font-size:1.2rem;font-weight:700;}
.job-head span{display:block;font-size:.78rem;font-weight:700;color:var(--gold);margin-top:2px;letter-spacing:.08em;}
.job-body{padding:8px 24px 24px;}
.job .dl-row{grid-template-columns:150px 1fr;}
.job-tags{display:flex;flex-wrap:wrap;gap:8px;padding:18px 24px 0;}
.job-tag{padding:5px 13px;border-radius:999px;background:var(--soft);border:1px solid var(--line);font-size:.78rem;font-weight:700;color:var(--navy);}
.job-foot{padding:20px 24px 24px;}

/* ===== 施工実績 ===== */
.filter{display:flex;flex-direction:column;gap:16px;margin-bottom:34px;}
.filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.filter-label{font-size:.78rem;font-weight:700;letter-spacing:.1em;color:var(--muted);margin-right:4px;min-width:64px;}
.chip{padding:8px 18px;border-radius:var(--r-pill);border:none;background:var(--blue-pale);
  font:inherit;font-size:.85rem;font-weight:700;color:var(--blue);cursor:pointer;transition:var(--sc);
  box-shadow:inset 0 0 0 1px rgba(21,65,153,.14);}
.chip:hover{color:var(--navy);box-shadow:inset 0 0 0 1px rgba(21,65,153,.34);}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff;}
.filter select{padding:9px 34px 9px 14px;border-radius:999px;border:1.5px solid var(--line);background:#fff;
  font:inherit;font-size:.85rem;font-weight:700;color:var(--navy);cursor:pointer;
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23154199' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:10px;}
.works-count{font-size:.84rem;font-weight:700;color:var(--muted);margin-bottom:18px;}
.works-count strong{color:var(--blue);font-size:1.15rem;font-family:var(--en);font-weight:600;margin:0 3px;}
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 30px;align-items:start;}
/* 施工実績は件数が多いので、箱で囲うと画面が窓だらけになる。
   左1pxの罫と段ずらしだけで区切り、写真そのものを主役にする。
   position:relative が無いと .work-cat（絶対配置）の基準が section.sec になり、
   159件分のカテゴリラベルがセクション左上に全部重なって表示される。 */
.work{position:relative;background:transparent;border:none;box-shadow:none;border-radius:0;
  padding-left:28px;border-left:1px solid rgba(21,65,153,.20);
  display:flex;flex-direction:column;transition:var(--sc);}
.work:hover{border-left-color:var(--blue-br);}
.work-img{position:relative;aspect-ratio:4/3;background:var(--soft);overflow:hidden;border-radius:var(--r-img);}
.work-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.work:hover .work-img img{transform:scale(1.05);}
/* .work に padding-left:28px（左罫のぶん）が入ったので、その内側に置く */
.work-cat{position:absolute;left:38px;top:10px;z-index:2;max-width:calc(100% - 48px);
  padding:4px 11px;border-radius:999px;background:rgba(11,35,80,.86);
  color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.05em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(4px);}
/* サブ写真は0〜3枚と枚数が一定しないため、常に表示すると枚数差でカードの
   高さがバラバラになり、行の整列が崩れる。ふだんは1枚目だけを見せ、
   詳しく見たいときにホバーで残りの写真を出す。 */
.work-sub{display:none;gap:4px;margin-top:4px;}
.work:hover .work-sub{display:flex;}
.work-sub img{flex:1 1 0;min-width:0;width:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-img);}
.work-body{padding:14px 0 4px;flex:1;display:flex;flex-direction:column;gap:6px;}
.work-body h3{font-size:.98rem;font-weight:700;line-height:1.55;}
.work-meta{font-size:.78rem;font-weight:500;color:var(--muted);line-height:1.75;margin-top:auto;}
.work-meta b{font-weight:700;color:var(--navy);}
.works-more{display:flex;justify-content:center;margin-top:36px;}
.works-empty{padding:60px 0;text-align:center;color:var(--muted);font-weight:700;}

/* ===== お知らせ ===== */
.news{border-top:1px solid var(--line);}
.news-item{display:grid;grid-template-columns:126px 118px 1fr;gap:18px;align-items:center;
  padding:18px 6px;border-bottom:1px solid var(--line);transition:var(--sc);}
.news-item:hover{background:var(--soft);}
.news-date{font-family:var(--en);font-size:1.05rem;font-weight:600;letter-spacing:.06em;color:var(--blue-br);}
.news-cat{justify-self:start;padding:3px 12px;border-radius:999px;background:rgba(21,65,153,.09);
  color:var(--blue);font-size:.7rem;font-weight:700;letter-spacing:.04em;white-space:nowrap;}
.news-title{font-size:.95rem;font-weight:700;line-height:1.7;}
.news-card{display:flex;flex-direction:column;}
.news-card .thumb{aspect-ratio:16/9;background:var(--soft);overflow:hidden;}
.news-card .thumb img{width:100%;height:100%;object-fit:cover;}

/* ===== インタビュー ===== */
.itv{background:#fff;border:none;border-radius:var(--r);overflow:hidden;transition:var(--sc);display:flex;flex-direction:column;
  box-shadow:var(--glow-in);}
.itv:hover{box-shadow:var(--glow-in-hover);}
.itv-body{padding:22px;display:flex;flex-direction:column;flex:1;}
.itv-role{font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--blue);margin-bottom:8px;}
.itv-quote{font-size:1.02rem;font-weight:700;line-height:1.7;margin-bottom:12px;}
/* INTERVIEW（recruit.html）は採用サイトの見せ場なので、一言をより大きく見せる。
   .itv 自体は index.html の社員の声セクションと共用のためスコープする。 */
.rc-itv .itv-quote{font-size:1.24rem;line-height:1.55;}
.rc-itv .tmp-img{aspect-ratio:4/3;}
.rc-itv .tmp-img img{transition:transform .6s ease;}
.rc-itv .itv:hover .tmp-img img{transform:scale(1.04);}
.itv-name{font-size:.8rem;font-weight:500;color:var(--muted);margin-top:auto;}

/* 本番写真に差し替えたカード（<figure class="tmp-img"> を <img> にしたもの）。
   仮画像のときと同じ 4:3 で切り抜き、recruit.html ではホバーで少し寄る。 */
.itv>img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.rc-itv .itv>img{transition:transform .6s ease;}
.rc-itv .itv:hover>img{transform:scale(1.04);}

/* ==============================================
   社員インタビュー記事（interview.html）
   ----------------------------------------------
   1人＝1セクション。冒頭に番号・氏名・一言・プロフィールと顔写真、
   続けて Q&A。写真は .iv-photos で本文の間に差し込む。
   ============================================== */
.iv-hero-img,.sp-hero-img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--r-img);margin-top:36px;}
.iv-head{display:grid;grid-template-columns:1.05fr 1fr;gap:46px;align-items:center;margin-bottom:56px;}
.iv-no{display:block;font-family:var(--en);font-size:clamp(3rem,5vw,4.4rem);font-weight:600;line-height:1;color:var(--gold-d);}
.iv-name{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:700;line-height:1.35;letter-spacing:.04em;margin-top:6px;}
.iv-name small{display:block;font-size:.86rem;font-weight:700;letter-spacing:.08em;color:var(--blue);margin-top:8px;}
.iv-catch{font-size:clamp(1.15rem,2.2vw,1.55rem);font-weight:700;line-height:1.6;color:var(--navy);
  margin-top:22px;padding-left:18px;border-left:4px solid var(--blue);}
.iv-prof{font-size:.9rem;font-weight:500;line-height:1.9;color:var(--muted);margin-top:18px;}
.iv-head-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-img);}
.iv-qa{max-width:820px;}
.iv-q{display:flex;gap:14px;align-items:flex-start;font-size:1.08rem;font-weight:700;line-height:1.6;margin:44px 0 14px;}
.iv-q::before{content:'Q';font-family:var(--en);font-size:1.5rem;font-weight:600;line-height:1;color:var(--blue);flex-shrink:0;margin-top:2px;}
.iv-a p{font-size:.96rem;font-weight:400;line-height:2.05;}
.iv-a p+p{margin-top:1em;}
.iv-a strong{font-weight:700;color:var(--navy);}
.iv-photos{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:40px 0 8px;max-width:820px;}
.iv-photos.one{grid-template-columns:1fr;}
.iv-photos figure{margin:0;}
.iv-photos img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-img);}
@media(max-width:900px){
  .iv-head{grid-template-columns:1fr;gap:26px;}
  .iv-head-img{order:-1;}
}
@media(max-width:768px){
  .iv-head{margin-bottom:36px;}
  .iv-q{margin:34px 0 12px;font-size:1rem;}
  .iv-photos{grid-template-columns:1fr;gap:14px;margin:30px 0 4px;}
}

/* ==============================================
   仮画像（_temp_images/）
   ----------------------------------------------
   撮影前のレイアウト確認用。フリー素材で、居藤電機の社員・現場ではない。
   実際の写真が来たら、この <figure class="tmp-img"> ごと
   <img src="img/…"> に置き換えること。左上の「仮画像」バッジも一緒に消える。
   ============================================== */
.tmp-img{position:relative;margin:0;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-img);background:var(--soft);}
.tmp-img.wide{aspect-ratio:16/9;}
.tmp-img.sq{aspect-ratio:1/1;}
.tmp-img.tall{aspect-ratio:3/4;}
.tmp-img.hero{aspect-ratio:21/9;}
.tmp-img.flat{border-radius:0;}
.tmp-img img{width:100%;height:100%;object-fit:cover;display:block;}
.tmp-img figcaption{position:absolute;left:0;top:0;z-index:2;
  background:rgba(200,40,30,.92);color:#fff;font-size:.64rem;font-weight:700;
  letter-spacing:.12em;padding:4px 11px;border-radius:0 0 9px 0;pointer-events:none;}

/* ==============================================
   マスコット（公式キャラクター）＋吹き出し
   ----------------------------------------------
   かたい印象になりがちな工事会社のページに、案内役として置く。
     <div class="mascot">
       <img class="mascot-img" src="img/mascot.png" alt="居藤電機のキャラクター">
       <div class="mascot-bubble"><p>ここにセリフ</p></div>
     </div>
   .right … キャラクターを右側に置く
   .sm    … 小さめ
   ============================================== */
.mascot{display:flex;align-items:center;gap:20px;margin:38px 0;}
.mascot-img{width:136px;height:auto;flex-shrink:0;
  filter:drop-shadow(0 10px 18px rgba(11,35,80,.22));
  animation:mascotFloat 6s ease-in-out infinite;}
/* ふわふわ浮きながら、1周に1回だけ首をかしげる（2026-09-07 の打ち合わせ：もぐらに動きが欲しい） */
@keyframes mascotFloat{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-7px) rotate(0)}
  50%{transform:translateY(0) rotate(0)}58%{transform:translateY(-3px) rotate(-5deg)}66%{transform:translateY(-3px) rotate(5deg)}74%{transform:translateY(0) rotate(0)}}
/* 画面に入ったとき、小さい状態からポンと弾んで登場する */
.js .mascot.rv.visible{animation:mascotPop .75s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes mascotPop{from{opacity:0;transform:translateY(18px) scale(.72);}to{opacity:1;transform:none;}}

.mascot-bubble{position:relative;flex:1;max-width:640px;background:#fff;
  border:2px solid var(--blue);border-radius:20px;padding:19px 24px;
  font-size:.96rem;font-weight:700;line-height:1.85;color:var(--navy);
  box-shadow:0 8px 22px rgba(11,35,80,.09);}
.mascot-bubble p+p{margin-top:.6em;}
.mascot-bubble strong{color:var(--blue);}
/* 吹き出しのしっぽ：正方形を45度回転し、下・左の辺だけ枠線を出す（＝◀の形）。
   top:50%基準なので、文章の長さで吹き出しの高さが変わっても常にもぐらの口の高さに来る。 */
.mascot-bubble::after{content:'';position:absolute;left:-7px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:14px;height:14px;background:#fff;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);}

/* ショウヘイは制服に左右の意匠があり反転できないため、.right でも向き・吹き出しの
   向きは変えず、常に「ショウヘイ→吹き出し」の並びのまま表示する
   （.right クラスは既存ページに残っているが、見た目は無印の.mascotと同じになる）。 */

/* 小さめ */
.mascot.sm .mascot-img{width:96px;}
.mascot.sm .mascot-bubble{font-size:.9rem;padding:15px 19px;}

/* 濃紺の面の上に置くとき（枠を金にして沈まないようにする） */
.sec.navy .mascot-bubble,.bp .mascot-bubble{border-color:var(--gold);box-shadow:0 8px 26px rgba(0,0,0,.32);}
.sec.navy .mascot-bubble::before,.bp .mascot-bubble::before{border-right-color:var(--gold);}

@media(prefers-reduced-motion:reduce){
  .mascot-img,.js .mascot.rv.visible{animation:none;}
}
@media(max-width:768px){
  .mascot{gap:12px;margin:28px 0;}
  .mascot-img{width:88px;}
  .mascot.sm .mascot-img{width:72px;}
  .mascot-bubble{padding:15px 17px;font-size:.88rem;border-radius:16px;}
  .mascot-bubble::before{left:-13px;bottom:22px;border-width:8px 13px 8px 0;}
  .mascot-bubble::after{left:-10px;bottom:24px;border-width:6px 10px 6px 0;}
}

/* ===== 未確定テキスト（公開前に差し替える） =====
   色を明示しないと本文色を継承した箇所でコントラスト比 3.42 になり読みづらい。
   ハイライト背景はそのままに、文字色だけ濃くして 4.5 以上を確保する。 */
.tbd{background:rgba(252,201,41,.18);border-bottom:1px dashed var(--gold-d);padding:0 .2em;font-style:normal;color:#4A3A00;}

/* ===== 補足の小文字（※〜を確認後に掲載します など） =====
   以前は各HTMLに style="color:#8496B2" をインライン指定していたが、
   白地でコントラスト比 2.8 前後と不足するため --muted に統一した。 */
.note-sm{display:inline-block;color:var(--muted);font-size:.8rem;line-height:1.75;}

/* ===== フォーム ===== */
.form{max-width:760px;}
.f-group{margin-bottom:24px;}
.f-label{display:flex;align-items:center;gap:9px;font-size:.9rem;font-weight:700;margin-bottom:9px;color:var(--navy);}
.f-req{padding:2px 8px;border-radius:4px;background:#D8362A;color:#fff;font-size:.64rem;font-weight:700;letter-spacing:.06em;}
.f-any{padding:2px 8px;border-radius:4px;background:var(--soft);border:1px solid var(--line);color:var(--muted);font-size:.64rem;font-weight:700;letter-spacing:.06em;}
.f-input,.f-select,.f-textarea{width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:10px;
  font:inherit;font-size:.95rem;color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s;}
.f-textarea{min-height:150px;resize:vertical;line-height:1.85;}
.f-input:focus,.f-select:focus,.f-textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,65,153,.12);}
.f-input::placeholder,.f-textarea::placeholder{color:#A9B6C9;}
.f-help{font-size:.78rem;color:var(--muted);margin-top:6px;line-height:1.7;}
.f-error{font-size:.78rem;color:#D8362A;font-weight:700;margin-top:6px;display:none;}
.f-group.invalid .f-input,.f-group.invalid .f-select,.f-group.invalid .f-textarea{border-color:#D8362A;}
.f-group.invalid .f-error{display:block;}
.f-types{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.f-type{position:relative;}
.f-type input{position:absolute;opacity:0;width:0;height:0;}
.f-type span{display:flex;align-items:center;gap:10px;min-height:58px;padding:12px 16px;border:2px solid var(--line);
  border-radius:12px;background:#fff;font-size:.92rem;font-weight:700;cursor:pointer;transition:var(--sc);height:100%;}
.f-type span::before{content:'';width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;transition:var(--sc);}
.f-type input:checked+span{border-color:var(--blue);background:rgba(21,65,153,.05);color:var(--blue);}
.f-type input:checked+span::before{border-color:var(--blue);border-width:5px;}
.f-type input:focus-visible+span{box-shadow:0 0 0 3px rgba(21,65,153,.2);}
.f-note{background:var(--soft);border-left:4px solid var(--blue);border-radius:0 10px 10px 0;padding:16px 20px;
  font-size:.88rem;line-height:1.85;color:var(--muted);margin-bottom:26px;}
.f-note strong{color:var(--navy);}
.f-check{display:flex;align-items:flex-start;gap:11px;font-size:.9rem;font-weight:700;cursor:pointer;line-height:1.7;}
.f-check input{width:20px;height:20px;flex-shrink:0;margin-top:2px;accent-color:var(--blue);cursor:pointer;}
.f-check a{color:var(--blue);text-decoration:underline;}
.f-file{padding:11px;border:2px dashed var(--line);border-radius:10px;width:100%;font-size:.88rem;background:#fff;}
.f-submit{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px;}
.f-submit .btn{border:none;cursor:pointer;font-family:inherit;}
.f-submit .btn:disabled{opacity:.5;cursor:default;transform:none;}
.f-status{margin-top:18px;padding:16px 20px;border-radius:10px;font-size:.9rem;font-weight:700;line-height:1.8;display:none;}
.f-status.show{display:block;}
.f-status.ok{background:rgba(21,65,153,.08);color:var(--blue);border:1px solid rgba(21,65,153,.24);}
.f-status.ng{background:rgba(216,54,42,.07);color:#B32A20;border:1px solid rgba(216,54,42,.24);}
/* 種別で出し分ける項目 */
[data-when]{display:none;}
[data-when].show{display:block;}

/* ===== 電話・アクセス ===== */
.tel-box{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:22px 40px;
  border:none;border-radius:var(--r);background:#fff;box-shadow:var(--glow-in);}
.tel-box .lb{font-size:.74rem;font-weight:700;letter-spacing:.14em;color:var(--muted);}
.tel-box .no{font-family:var(--en);font-size:2.4rem;font-weight:600;letter-spacing:.02em;color:var(--navy);line-height:1.1;}
.tel-box .sub{font-size:.8rem;color:var(--muted);}
.map{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r);overflow:hidden;background:var(--soft);}

/* ===== FOOTER ===== */
.footer{background:var(--navy);color:#fff;}
.footer-cta{padding:96px 0 88px;text-align:center;border-bottom:1px solid rgba(255,255,255,.09);}
/* フッターも中央寄せの面なので、箱を文字幅に縮めてから中央に置く */
.footer-cta .eyebrow{color:var(--gold);display:table;margin-left:auto;margin-right:auto;}
.footer-cta h2{font-size:clamp(1.4rem,2.9vw,2.05rem);font-weight:var(--w-head);line-height:1.5;margin-bottom:14px;
  color:#fff;letter-spacing:var(--ls-head);text-wrap:balance;}
.footer-cta p{font-size:.92rem;color:rgba(255,255,255,.68);margin-bottom:28px;line-height:1.9;}
.footer-main{width:min(var(--max),calc(100% - 64px));margin:auto;padding:50px 0 38px;
  display:grid;grid-template-columns:1.1fr 1.4fr;gap:46px;}
.f-logo{width:230px;height:auto;background:#fff;border-radius:10px;padding:12px 14px;margin-bottom:18px;}
.f-info{font-size:.85rem;font-weight:500;color:rgba(255,255,255,.62);line-height:1.95;}
.f-info strong{display:block;color:#fff;font-size:.95rem;font-weight:700;margin-bottom:6px;}
.f-info a{color:rgba(255,255,255,.62);transition:var(--sc);}
.f-info a:hover{color:var(--gold);}
.f-nav-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 26px;align-content:start;}
.f-nav-col h4{font-family:var(--en);font-size:.78rem;font-weight:600;letter-spacing:3px;color:var(--gold);margin-bottom:12px;}
.f-nav-col ul{display:flex;flex-direction:column;gap:9px;}
.f-nav-col ul li a{font-size:.84rem;font-weight:500;color:rgba(255,255,255,.6);transition:var(--sc);display:flex;align-items:flex-start;gap:7px;line-height:1.6;}
.f-nav-col ul li a::before{content:'›';color:var(--gold);flex-shrink:0;}
.f-nav-col ul li a:hover{color:#fff;}
/* SNSシェア（フッター最下部） */
.f-share{border-top:1px solid rgba(255,255,255,.07);}
.f-share-in{display:flex;align-items:center;justify-content:center;padding:22px 0;
  width:min(var(--max),calc(100% - 64px));margin:auto;}
.f-share-btn{width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;transition:var(--sc);}
.f-share-btn:hover{filter:brightness(1.12);transform:translateY(-2px);}
/* Instagram公式のグラデーション */
.f-share-btn[data-share="instagram"]{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);}
/* 最下部までスクロールしたとき、右下のチャットボタン（高さ52px＋下24px）が
   コピーライト行に重ならないよう下側に余白を確保する。 */
.footer-copy{padding:16px 0 84px;border-top:1px solid rgba(255,255,255,.07);text-align:center;font-size:.72rem;color:rgba(255,255,255,.32);}
.footer-copy .wrap{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px 18px;}
.footer-copy a{color:rgba(255,255,255,.44);transition:var(--sc);}
.footer-copy a:hover{color:#fff;text-decoration:underline;}

/* ===== PAGE LOADER ===== */
/* JS が動かなくても 5秒で必ず消えるよう、CSS アニメーションを保険にしている */
.pl{position:fixed;inset:0;z-index:9999;background:var(--navy);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;animation:plHide .5s 5s forwards;}
.pl.done{animation:plHide .45s forwards;}
/* もぐらが円の下から飛び出し、周りの円ゲージが 1.8秒かけて満ちる。
   1.8秒は js/common.js のローダー最短表示時間（MIN_MS）と合わせてある。
   .pl-hole が丸く切り抜く枠で、その下からキャラが顔を出す。
   飛び出したあとは動かさない（読み込み中に視線が散らないように） */
.pl-gauge{position:relative;width:190px;height:190px;}
.pl-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);}
.pl-ring circle{fill:none;stroke-width:4;}
.pl-ring-bg{stroke:rgba(255,255,255,.14);}
/* stroke-dasharray は円周（2πr, r=54）。全部隠した状態から少しずつ見せていく */
.pl-ring-fg{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:339.3;
  animation:plFill 1.8s cubic-bezier(.4,0,.2,1) .1s forwards;}
.pl-hole{position:absolute;inset:11px;border-radius:50%;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;}
.pl-pop{display:block;transform:translateY(102%);animation:plPop .75s cubic-bezier(.34,1.56,.64,1) .1s forwards;}
.pl-mascot{display:block;width:134px;height:auto;}
@keyframes plFill{to{stroke-dashoffset:0;}}
@keyframes plPop{to{transform:translateY(4%);}}
@keyframes plHide{to{opacity:0;visibility:hidden;}}
@media(prefers-reduced-motion:reduce){
  .pl-pop{animation:none;transform:translateY(4%);}
  .pl-ring-fg{animation-duration:.01s;}
}

/* ===== チャットボット ===== */
.chat-fab{position:fixed;right:20px;bottom:24px;z-index:80;display:flex;align-items:center;gap:9px;
  height:52px;padding:0 22px 0 10px;border:none;border-radius:999px;background:var(--gold);color:#10254C;
  font-family:var(--jp);font-weight:700;font-size:.88rem;cursor:pointer;
  box-shadow:0 10px 26px rgba(11,35,80,.28);transition:var(--sc);}
.chat-fab:hover{background:var(--gold-d);transform:translateY(-2px);}
/* PCではサイドバー、スマホでは下部固定バーにボタンがあるので、
   右下に浮くこのボタン自体は常に非表示にする（要素はJSが作るが表示はしない）。 */
.chat-fab{display:none;}
.chat-fab-icon{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:top center;
  background:#fff;flex-shrink:0;}
.tc-panel{position:fixed;right:20px;bottom:24px;z-index:90;
  width:360px;max-width:calc(100vw - 32px);height:490px;max-height:calc(100vh - 48px);
  background:#0E2148;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 20px 50px rgba(6,20,45,.46);
  opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;transition:opacity .22s ease,transform .22s ease;}
.tc-panel.open{opacity:1;transform:none;pointer-events:auto;}
.tc-head{display:flex;align-items:center;gap:10px;padding:13px 14px;background:#081936;
  border-bottom:1px solid rgba(255,255,255,.09);flex-shrink:0;}
.tc-head-img{width:38px;height:38px;border-radius:50%;object-fit:contain;background:#fff;padding:3px;flex-shrink:0;}
.tc-head-text{flex:1;line-height:1.35;}
.tc-head-text strong{display:block;font-size:.86rem;color:#fff;}
.tc-head-text span{display:block;font-size:.66rem;color:rgba(255,255,255,.44);}
.tc-close{background:none;border:none;color:rgba(255,255,255,.55);font-size:1.3rem;cursor:pointer;line-height:1;padding:4px 6px;}
.tc-close:hover{color:#fff;}
.tc-body{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;}
.tc-msg{max-width:86%;padding:10px 13px;border-radius:14px;font-size:.82rem;font-weight:500;line-height:1.75;white-space:pre-wrap;word-break:break-word;}
.tc-msg.bot{align-self:flex-start;background:rgba(255,255,255,.09);color:rgba(255,255,255,.9);border-bottom-left-radius:4px;}
.tc-msg.user{align-self:flex-end;background:var(--gold);color:#10254C;font-weight:700;border-bottom-right-radius:4px;}
.tc-msg.typing{display:flex;gap:4px;align-items:center;}
.tc-msg.typing span{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55);animation:tcTyping 1.1s infinite ease-in-out;}
.tc-msg.typing span:nth-child(2){animation-delay:.15s;}
.tc-msg.typing span:nth-child(3){animation-delay:.3s;}
@keyframes tcTyping{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}
.tc-input-row{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(255,255,255,.09);flex-shrink:0;background:#0E2148;}
.tc-input{flex:1;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:999px;
  padding:10px 14px;font-size:.82rem;color:#fff;font-family:var(--jp);}
.tc-input::placeholder{color:rgba(255,255,255,.38);}
.tc-input:focus{outline:none;border-color:var(--gold);}
.tc-send{width:38px;height:38px;border-radius:50%;background:var(--gold);border:none;color:#10254C;
  font-size:1rem;font-weight:700;cursor:pointer;flex-shrink:0;transition:var(--sc);}
.tc-send:hover{background:var(--gold-d);}
.tc-send:disabled{opacity:.5;cursor:default;}

/* ===== MOBILE CTA ===== */
.mob-cta{display:none;}

/* ==============================================
   MEDIA QUERIES
   ============================================== */
@media(max-width:1080px){
  .g4{grid-template-columns:repeat(2,1fr);}
  .g5{grid-template-columns:repeat(3,1fr);}
  .works-grid{grid-template-columns:repeat(2,1fr);}
  .f-nav-cols{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:900px){
  .g3{grid-template-columns:repeat(2,1fr);}
  .split,.split.narrow{grid-template-columns:1fr;gap:28px;}
  .rc-phi-img{order:-1;}
}
@media(max-width:768px){
  .page{margin-left:0;padding-top:64px;}
  /* ハンバーガー（right:13px / 幅44px）はバーの上に浮いているので、その分の
     余白をバー側で確保する。確保しないと横スクロールナビの項目がボタンの下に
     潜り込んで読めなくなる。 */
  .side{flex-direction:row;width:100%;height:64px;bottom:auto;overflow:hidden;
    padding-right:64px;
    border-right:none;border-bottom:1px solid rgba(255,255,255,.1);}
  .side-logo{width:148px;height:64px;border-bottom:none;border-right:1px solid rgba(255,255,255,.1);flex-shrink:0;padding:8px 10px;}
  .side-logo img{width:128px;max-height:44px;}
  .side-nav{display:flex;overflow-x:auto;flex-direction:row;height:64px;flex:1;min-width:0;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .side-nav::-webkit-scrollbar{display:none;}
  .side-nav a{min-height:64px;min-width:max-content;padding:0 14px;font-size:13px;border-bottom:none;}
  .side-nav .sub{padding-left:14px;}
  .side-nav .sub::after{display:none;}
  .side-bottom{display:none;}
  .side.open{flex-direction:column;height:auto;max-height:92vh;overflow-y:auto;z-index:96;padding-right:0;}
  .side.open .side-logo{width:100%;border-right:none;border-bottom:1px solid rgba(255,255,255,.1);}
  .side.open .side-nav{flex-direction:column;overflow:visible;height:auto;padding:0;}
  .side.open .side-nav a{min-width:100%;border-bottom:1px solid rgba(255,255,255,.06);}
  .side.open .side-bottom{display:block;}
  .hamburger{display:flex;}
  /* メニューを開いている間は、下部固定CTAがメニューの
     「お問い合わせ」ボタンに重なるので隠す。 */
  body:has(.side.open) .mob-cta{display:none;}
  /* スマホでは上部に横並びナビ(高さ64px)があるため、その下に小さく表示する。 */
  .insta-banner{top:72px;right:8px;}
  .insta-banner img{width:116px;}
  body:has(.side.open) .insta-banner{display:none;}

  .sp-hero{padding:48px 0 52px;}
  .sp-hero.bp{margin:0 8px;border-radius:0 0 28px 28px;}
  .sec{padding:72px 0 80px;}
  .sec.tight{padding:48px 0;}
  .sec.soft,.sec.navy,.sec.bp,.footer{margin:0 8px;border-radius:28px 28px 0 0;}
  .sec.soft,.sec.navy,.sec.bp{padding:84px 0 92px;}
  .sec.tight.soft,.sec.tight.navy,.sec.tight.bp{padding:56px 0 62px;}
  .footer-cta{padding:64px 0 60px;}
  .g2,.g3,.g4,.g5{grid-template-columns:1fr;gap:20px;}
  .svc-list{grid-template-columns:1fr;}
  .cert-grid{grid-template-columns:repeat(2,1fr)!important;}
  .stats{grid-template-columns:repeat(2,1fr);gap:12px;}
  .works-grid{grid-template-columns:1fr;}
  .dl-row,.job .dl-row{grid-template-columns:1fr;gap:4px;padding:14px 4px;}
  .flow-step{grid-template-columns:66px 1fr;gap:16px;}
  .flow-no{font-size:2rem;}
  .day-step{gap:14px;padding-bottom:36px;}
  .day-marker{width:62px;height:62px;font-size:.74rem;}
  .day-marker .tbd{font-size:.5rem;}
  .day-step:not(:last-child)::after{left:31px;top:70px;}
  .day-card{padding:16px 18px;}
  .day-card.has-img{grid-template-columns:1fr;gap:14px;}
  .day-img{order:-1;}
  .news-item{grid-template-columns:1fr;gap:6px;}
  .f-types{grid-template-columns:1fr;}
  .footer-main{grid-template-columns:1fr;gap:32px;}
  .f-nav-cols{grid-template-columns:1fr 1fr;}
  /* 「プライバシーポリシー」が2列だと折り返すため、この項目だけ縮めて1行に収める */
  .f-nav-col a[href="privacy.html"]{font-size:.76rem;white-space:nowrap;}
  .tc-panel{right:12px;bottom:80px;height:min(480px,calc(100vh - 160px));}

  .mob-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:95;background:rgba(11,35,80,.95);
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:10px;backdrop-filter:blur(8px);}
  .mob-cta a,.mob-cta button{flex:1;min-height:46px;border-radius:999px;display:flex;align-items:center;justify-content:center;
    font-family:var(--jp);font-weight:700;font-size:.84rem;color:#fff;background:none;
    border:2px solid rgba(255,255,255,.5);cursor:pointer;}
  .mob-cta .m{background:var(--gold);color:#10254C;border-color:var(--gold);}
  body{padding-bottom:70px;}
  .footer-copy{padding-bottom:62px;}
}
@media(max-width:560px){
  .wrap{width:calc(100% - 36px);}
  .btn{width:100%;min-width:0;}
  .sec-cta .btn{width:100%;}
  .sp-hero h1{font-size:1.45rem;line-height:1.45;}
  .sp-hero-catch{font-size:1.2rem;}
  .sp-hero-lead{font-size:.88rem;}
  .sec-title{font-size:1.35rem;}
  .catch{font-size:1.25rem;}
  .tel-box{padding:18px 24px;width:100%;}
  .tel-box .no{font-size:2rem;}
  .filter-label{min-width:100%;}
}

/* ==============================================
   スマホ調整（2026-09-17）
   縦に長くなりすぎると「今どこを見ているか」が分からなくなるため、
   ・カード類は 1列ではなく 2列（4枚なら 2×2）にして全体像を先に見せる
   ・奇数枚の最後の1枚だけ横いっぱいに広げる（歯抜けを作らない）
   ・セクションの余白と、カード内の文字・余白を詰める
   このブロックは他の @media(max-width:768px) より後ろに置くこと（後勝ちで効かせている）。
   ============================================== */
@media(max-width:768px){
  /* 余白 */
  .sec{padding:52px 0 60px;}
  .sec.tight{padding:36px 0;}
  .sec.soft,.sec.navy,.sec.bp{padding:60px 0 66px;}
  .sec.tight.soft,.sec.tight.navy,.sec.tight.bp{padding:40px 0 46px;}
  .footer-cta{padding:48px 0 44px;}
  .footer-main{padding:36px 0 28px;}
  .sp-hero{padding:36px 0 40px;}
  .sp-hero-cta{margin-top:22px;}
  .sec-lead{margin-bottom:24px;}
  .sec-cta{margin-top:24px;gap:10px;}
  .btn{min-height:46px;}
  .mascot{margin:18px 0 22px;}
  .history-item{padding-bottom:18px;}
  .dl-row,.job .dl-row{padding:10px 4px;}

  /* カードは2列。奇数枚のときは最後の1枚を同じ大きさのまま中央に置く
     （横いっぱいに広げると1枚だけ大きくなって浮くため） */
  .g3,.g4,.g5{grid-template-columns:repeat(2,1fr);gap:12px 10px;}
  .g3>:last-child:nth-child(odd),.g4>:last-child:nth-child(odd),.g5>:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 5px);justify-self:center;}
  /* 2枚組でも横並びにしたい所（トップの募集職種）は .sp-2col を付ける */
  .g2.sp-2col{grid-template-columns:repeat(2,1fr);gap:12px 10px;}
  /* トップの社員の声・お知らせ：写真左・文章右の横長カードを縦に3段（1画面で3件見える） */
  .g3.sp-rows{grid-template-columns:1fr;gap:10px;}
  .g3.sp-rows>:last-child:nth-child(odd){width:100%;}
  .sp-rows .itv,.sp-rows .news-card{display:grid;grid-template-columns:124px minmax(0,1fr);align-items:stretch;}
  .sp-rows .itv>img,.sp-rows .news-card .thumb{width:100%;height:100%;min-height:104px;aspect-ratio:auto;}
  .sp-rows .news-card .thumb .ph{height:100%;aspect-ratio:auto;}
  .sp-rows .itv-body,.sp-rows .news-card .card-body{padding:10px 12px;justify-content:center;}
  .sp-rows .itv-role{margin-bottom:2px;}
  .sp-rows .itv-quote{font-size:.84rem;line-height:1.5;margin-bottom:4px;}
  .sp-rows .itv-name{margin-top:0;}
  .sp-rows .card-body h3{font-size:.84rem;}
  .sp-rows .news-date{font-size:.7rem;margin-top:4px!important;}

  /* 写真つきカード（事業内容・施工実績カテゴリ・お知らせ等） */
  .card-body{padding:12px 12px 14px;}
  .card-body h3{font-size:.9rem;line-height:1.45;margin-bottom:4px;}
  .card-body p{font-size:.74rem;line-height:1.7;}
  .card-body .card-more{font-size:.74rem;padding-top:8px;}
  .card-body .btn,.itv-body .btn{min-height:40px;font-size:.78rem;padding:0 12px;}

  /* 番号つきカード（SERVICE 01〜／REASON 01〜／仕事内容 01〜） */
  .num-card,.rc-reason .num-card{padding:16px 14px 14px;}
  .num-card .no,.rc-reason .num-card .no{font-size:1.8rem;margin-bottom:4px;}
  .num-card h3,.rc-reason .num-card h3{font-size:.9rem;line-height:1.45;margin-bottom:4px;}
  .num-card p{font-size:.74rem;line-height:1.7;}

  /* アイコンカード（こんな方に／福利厚生／Value） */
  .icon-card{padding:16px 10px 14px;}
  .icon-card-ic,.fy-grid .icon-card-ic{width:48px;height:48px;margin-bottom:8px;}
  .icon-card h3{font-size:.84rem;line-height:1.45;margin-bottom:4px;}
  .icon-card p{font-size:.7rem;line-height:1.65;}
  .mvv-card{padding:16px 10px 14px;}
  .mvv-card .ic,.mvv-card .ic img{width:48px;height:48px;}
  .mvv-card .ic{margin-bottom:8px;}
  .mvv-card strong{font-size:.86rem;}

  /* 社員インタビューのカード */
  .itv-body{padding:12px 12px 14px;}
  .itv-role{font-size:.64rem;margin-bottom:4px;}
  .itv-quote{font-size:.86rem;line-height:1.55;margin-bottom:8px;}
  .itv-name{font-size:.7rem;line-height:1.6;}

  /* 数字で見る */
  .stat{padding:16px 10px 14px;}
  .stat-lb{font-size:.74rem;margin-bottom:6px;}
  .stat-no{font-size:2rem;}
  .stat-no .tbd{font-size:1rem;}
  .stat-lb{word-break:keep-all;overflow-wrap:anywhere;}
  .stats>:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 6px);justify-self:center;}

  /* 施工実績の一覧も2列 */
  .works-grid{grid-template-columns:repeat(2,1fr);gap:16px 10px;}
  .work-cat{left:8px;top:8px;max-width:calc(100% - 16px);font-size:.62rem;padding:3px 8px;}
  .work-body{padding:8px 0 2px;gap:4px;}
  .work-body h3{font-size:.8rem;line-height:1.5;}
  .work-meta{font-size:.68rem;line-height:1.6;}

  /* 社員のとある一日：写真は上に小さく、丸印も小さく */
  .day-step{gap:10px;padding-bottom:22px;}
  .day-marker{width:48px;height:48px;font-size:.62rem;}
  .day-step:not(:last-child)::after{left:24px;top:54px;bottom:6px;}
  .day-card{padding:12px 14px 14px;}
  .day-card.has-img{gap:10px;}
  .day-img{aspect-ratio:16/9;}
  .day-card h3{font-size:.9rem;margin-bottom:4px;}
  .day-card p{font-size:.78rem;line-height:1.7;}

  /* 仕事内容ページの工程の帯 */
  .proc-step{padding:52px 0 44px;}
  .proc-step::after{height:36px;}
  /* 現場施工の3つの小項目：3列だと文字が潰れるので、写真を左・文章を右の1列に */
  .proc-sub{grid-template-columns:minmax(0,1fr);gap:10px;}
  .proc-sub>li{display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto auto;gap:2px 12px;align-items:start;}
  .proc-sub-media{margin:0;grid-column:1;grid-row:1/3;align-self:center;}
  .proc-sub h4,.proc-sub p{grid-column:2;}
  .proc-sub h4{font-size:.88rem;margin-bottom:3px;}
  .proc-sub p{font-size:.76rem;line-height:1.65;}

  /* トップの映像：スマホでは「映像だけ」を見せる。
     色の覆い（紺のグラデーション）を外し、映像内のボタンも出さない。
     ボタンは映像の直下 .fv-after に置き、下部の固定CTAとInstagramバナーは
     映像が画面に見えている間だけ隠す（body.fv-clear を js/common.js が付け外し）。 */
  .fv:not(.rc-hero) .fv-media::after{background:none;}
  .fv:not(.rc-hero) .fv-cta{display:none;}
  .fv:not(.rc-hero) .fv-in{padding:0;}
  body.fv-clear .mob-cta,body.fv-clear .insta-banner{display:none;}
  .fv-after{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:calc(100% - 36px);margin:14px auto 0;}
  .fv-after .btn{width:100%;min-width:0;min-height:46px;padding:0 8px;font-size:.84rem;}

  /* 募集職種のカード */
  .job-head{padding:14px 16px;}
  .job-head h3{font-size:1.05rem;}
  .job-body{padding:4px 16px 14px;}
  .job-tags{padding:12px 16px 0;gap:6px;}
  .job-tag{font-size:.7rem;padding:4px 10px;}
  .job-foot{padding:12px 16px 16px;}
}