/* =========================================================
   有限会社池田電機工事 コーポレートサイト（秋田市）
   Design system v2 — Light blue × Navy / Gothic only
   Multi-page / static HTML / no build tools
   ========================================================= */

/* =========================================================
   00. TOKENS
   ========================================================= */
:root{
  /* 背景系（明るい水色3段階） */
  --base:      #eef5fc;
  --base-2:    #ddeaf8;
  --base-3:    #cfe2f5;
  --white:     #ffffff;

  /* 文字系（ネイビー） */
  --ink:       #0a2647;
  --ink-2:     #27436e;
  --text:      #223a5e;
  --text-2:    #5a7096;

  /* アクセント（ブルー統一） */
  --blue:      #1f6fe5;
  --blue-d:    #1559c0;
  --cyan:      #35b6d9;
  --grad-entry: linear-gradient(120deg, var(--cyan) 0%, #1f6fe5 45%, #0a2647 100%);
  --grad-hero-scrim: linear-gradient(180deg, rgba(10,38,71,0) 40%, rgba(10,38,71,.45) 100%);

  /* 罫線・影 */
  --line:      #c3d6ec;
  --line-soft: #d9e6f4;
  --shadow:    0 18px 50px -20px rgba(10,38,71,.25);
  --shadow-sm: 0 10px 26px -14px rgba(10,38,71,.20);

  /* タイポ（全ゴシック） */
  --font:      "Noto Sans JP", sans-serif;
  --font-en:   "Jost", "Noto Sans JP", sans-serif;
  --font-head: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;

  --container: 1180px;
  --radius: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --header-h: 80px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* =========================================================
   01. RESET / BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 14px)}
body{
  margin:0;font-family:var(--font);font-weight:400;color:var(--text);
  background:linear-gradient(180deg, var(--base) 0%, var(--white) 55%, var(--base-2) 100%);
  line-height:2;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0}
h1,h2,h3,h4,p,dl,dd,figure{margin:0}
/* 見出しは Zen Kaku Gothic New。見出し相当だが h 要素でない3つも同じ扱いにする */
h1,h2,h3,h4,
.rtop__catch span,.person__catch,.modal__profile{font-family:var(--font-head)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

.skip-link{position:fixed;left:12px;top:-60px;z-index:400;background:var(--blue);color:#fff;
  font-weight:700;padding:10px 16px;border-radius:8px;transition:top .2s}
.skip-link:focus{top:12px}
.sp-only{display:none}
.pc-only{display:inline}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}

/* =========================================================
   02. LAYOUT / UTILITIES
   ========================================================= */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.container--narrow{max-width:1020px}
.section{padding-block:clamp(56px,8vw,116px);position:relative}
.section--white{background:var(--white)}
.section--tint{background:var(--base)}
.section--tint-2{background:var(--base-2)}
.section--ink{background:linear-gradient(120deg,var(--ink) 0%,#123564 100%);color:#fff}
.section--ink .sec-title{color:#fff}
.section--ink .sec-label__en{color:var(--cyan)}
.section--ink .sec-note,.section--ink .sec-label__jp{color:#b9cbe6}
/* 送信完了（/thanks/）：メッセージだけを、固定ヘッダーより下の範囲のほぼ中央に置く（上下の余白 24px／48px の差で 12px 上寄り。2026-09-19） */
.section--message{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding-top:calc(var(--header-h) + 24px);padding-bottom:48px}
.section--message .sec-head{margin-bottom:0}
/* フォームだけのセクション（/contact/。2026-10-07 ご指示で見出しを外して入力欄を上げた）。上の余白を通常の約半分に */
.section--form{padding-top:clamp(28px,4vw,52px)}

.u-center{text-align:center}
.u-mt-1{margin-top:12px}
.u-mt-2{margin-top:24px}
.u-mt-3{margin-top:40px}
/* セクションの中で、カードの後ろに続くブロックや小見出し付きのブロックを離す（2026-10-09 ご指示。2026-10-12 に「未だ近い」で 48〜64px → 64〜96px） */
.u-mt-4{margin-top:clamp(64px,7.5vw,96px)}
.u-ml-1{margin-left:8px}
.u-maxw-s{max-width:560px;margin-inline:auto}
.u-maxw-m{max-width:1180px;margin-inline:auto}
.u-maxw-l{max-width:1180px;margin-inline:auto}
.u-flex-0{flex:0}
.u-required{font-style:normal;color:#c0152f;font-weight:700}
.u-visually-strong{color:var(--ink);box-shadow:inset 0 -.5em 0 var(--base-2)}
.u-lh-loose{line-height:2;color:var(--text-2)}
.u-title-sm{font-size:1.08rem}
/* 語のまとまりを行の途中で割らない（「一｜貫」「中｜心。」のような折り返しを防ぐ）。1行に収まる短い句にだけ使う。
   2026-10-12 から本文では段落の末尾（7文字以上）だけに使う。文の途中を固めると行の右が空くため（ご指示「幅を使わない改行は NG」） */
.u-phrase{display:inline-block}

/* 本文の行揃え（2026-10-12 ご指示）：行末まで文字を詰め、末尾をまとめて1行短くなった行も右端までそろえる＝両端揃え。
   中央寄せの文は最終行だけ中央。行頭の小書き仮名・「ー」は日本語の禁則（line-break:strict）で防ぐ */
body {
  line-break: strict;
}

.u-lh-loose p,
.feature__body p,
.hero__lead,
.pagehero__lead,
.sec-note,
.tlv-item__text,
.checklist li,
.spec-table dd,
.qa__a p,
.job-index__desc,
.member__row dd,
.member__note,
.creed__list li,
.form__consent,
.form__note,
.cta__text,
.policy__intro p,
.policy__sec p:not(.policy__url),
.policy__list li {
  text-align: justify;
}

.sec-head--center .sec-note,
.u-center .sec-note,
.cta__text,
.form__note,
.commute__note {
  text-align: justify;
  text-align-last: center;
}

/* カードの中の文は左揃え（2026-10-12 ご指示）。幅の狭いカードで両端揃えにすると、末尾をまとめて短くなった行の字間が大きく開くため */
.lcard__text,
.scard__text,
.oval-card__text {
  text-align: left;
}

/* =========================================================
   03. BUTTONS (C20)
   ========================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-weight:700;letter-spacing:.03em;line-height:1;padding:14px 28px;border-radius:var(--radius-pill);
  transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s,border-color .25s;
  white-space:nowrap;font-size:.96rem}
.btn--lg{padding:18px 40px;font-size:1.04rem}
.btn--pill{background:var(--grad-entry);color:#fff;box-shadow:0 12px 28px -12px rgba(21,89,192,.65)}
.btn--pill:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(21,89,192,.75)}
.btn--ghost{border:1.5px solid var(--blue);color:var(--blue-d);background:rgba(255,255,255,.5)}
.btn--ghost:hover{background:var(--blue);color:#fff;transform:translateY(-2px)}
.btn--white{background:#fff;color:var(--blue-d)}
.btn--white:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.textlink{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--blue-d)}
.textlink::after{content:"→";font-family:var(--font-en);transition:transform .25s var(--ease)}
.textlink:hover::after{transform:translateX(6px)}
/* リンクのボタンの矢印（2026-10-09 ご指示：横線と、右端へ下りる斜線だけの「＿＼」）。mask で描き、色は文字色（ghost の hover では白）に追従する。
   送信ボタンは <button>／CF7 の <input> なので ::after が使えず、下の .form__submit .btn と テーマ CSS で background-image の白い矢印にしている */
a.btn::after {
  content: "";
  flex: 0 0 auto;
  width: 1.25em;
  height: .62em;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 11H23M15 1l8 10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 11H23M15 1l8 10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  transition: transform .25s var(--ease);
}

a.btn:hover::after {
  transform: translateX(4px);
}

/* =========================================================
   04. HEADER (C01) / ENTRY PILL (C02) / NAV OVERLAY (C03)
   ========================================================= */
.site-header{position:fixed;inset:0 0 auto 0;z-index:200;height:var(--header-h);
  display:flex;align-items:center;background:#fff;box-shadow:0 1px 0 var(--line-soft);
  transition:background .3s var(--ease),box-shadow .3s var(--ease)}
body.is-scrolled .site-header{background:rgba(255,255,255,.95);backdrop-filter:saturate(140%) blur(12px);
  box-shadow:0 1px 0 var(--line-soft),0 12px 30px -24px rgba(10,38,71,.4)}
.header-inner{width:100%;max-width:1320px;margin-inline:auto;
  padding-inline:clamp(16px,4vw,34px);display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;flex-shrink:0}
.brand__logo{width:64px;height:auto}
.brand__text{display:flex;flex-direction:column;line-height:1.15}
.brand__name{font-weight:900;font-size:1.4rem;letter-spacing:.03em;white-space:nowrap;color:var(--ink)}
/* 2026-09-16 クライアント指示でヘッダーにも「有限会社」を入れる。社名の上に小さく置き、ヘッダーの横幅は増やさない
   （1行に並べると PC の 1025〜1060px 幅とスマホでメニューボタンが切れるため） */
.brand__corp{font-size:.66rem;font-weight:700;letter-spacing:.12em;color:var(--text-2);white-space:nowrap}
.hero ~ .site-header .brand__name,
body:not(.is-scrolled) .hero + * .site-header .brand__name{color:var(--ink)}
.brand__sub{font-family:var(--font-en);font-size:.6rem;letter-spacing:.18em;color:var(--blue-d);font-weight:600}

/* ---- gnav: PC用グローバルナビ（日本語のみ・1024px以下はハンバーガーに委ねる） ---- */
.gnav{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px);margin-right:clamp(16px,2vw,28px)}
.gnav a{font-weight:700;font-size:.95rem;color:var(--ink);position:relative;padding:6px 2px;white-space:nowrap}
.gnav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);
  transform:scaleX(0);transition:transform .25s var(--ease)}
.gnav a:hover{color:var(--blue-d)}
.gnav a:hover::after{transform:scaleX(1)}

/* ---- entry-pill (C02): ENTRY + hamburger combined pill ---- */
.entry-pill{display:flex;align-items:stretch;border-radius:var(--radius-pill);overflow:hidden;
  background:var(--grad-entry);box-shadow:0 10px 26px -12px rgba(10,38,71,.5)}
/* 2026-09-15 上下2段の字面の隙間を約半分（16.75px→8px）に詰め、文字を少し大きく（上 14.72→16px・下 9.6→10.56px）。
   行の高さを詰めた分を上下の padding に回し、ボタンの高さはほぼ同じ（69.6→68.9px）。
   2026-10-07 ご指示で上下を入れ替え、上の大きい段を「採用情報」、下の小さい段を「RECRUIT」にした（リンク先は /recruit/）。
   720px以下は下の段を出さないので、下の @media で従来の寸法に戻す（スマホは「採用情報」だけ） */
.entry-pill__link{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:17px 22px;color:#fff}
.entry-pill__link .jp{font-size:1rem;font-weight:700;letter-spacing:.08em;line-height:1.2;white-space:nowrap}
.entry-pill__link .en{font-family:var(--font-en);font-size:.66rem;font-weight:600;letter-spacing:.14em;opacity:.9;line-height:1.2}
.entry-pill__nav{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  padding:0 18px;border-left:1px solid rgba(255,255,255,.3)}
.entry-pill__nav span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;
  transition:transform .3s var(--ease),opacity .3s}
.entry-pill__nav[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.entry-pill__nav[aria-expanded="true"] span:nth-child(2){opacity:0}
.entry-pill__nav[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- nav-overlay (C03): full-screen overlay nav, PC/SP common ---- */
.nav-overlay{position:fixed;inset:0;z-index:190;background:rgba(238,245,252,.97);backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
  overflow-y:auto;padding-top:calc(var(--header-h) + 20px)}
body.nav-open .nav-overlay{opacity:1;visibility:visible;transform:translateY(0)}
body.nav-open{overflow:hidden}
.nav-overlay__inner{max-width:var(--container);margin-inline:auto;padding:24px clamp(20px,5vw,40px) 60px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px)}
.nav-overlay__col-title{font-family:var(--font-en);font-size:.82rem;letter-spacing:.16em;color:var(--blue-d);
  font-weight:700;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.nav-overlay__list{display:flex;flex-direction:column;gap:4px}
.nav-overlay__list a{display:flex;flex-direction:column;gap:2px;padding:12px 6px;border-radius:10px;
  transition:background .2s,color .2s}
.nav-overlay__list a:hover,.nav-overlay__list a[aria-current="page"]{background:var(--base-2)}
.nav-overlay__list .jp{font-weight:700;font-size:1.05rem;color:var(--ink)}
.nav-overlay__list .en{font-family:var(--font-en);font-size:.7rem;letter-spacing:.08em;color:var(--text-2)}
.nav-overlay__list a[aria-current="page"] .jp{color:var(--blue-d)}
.nav-overlay__foot{max-width:var(--container);margin-inline:auto;padding:0 clamp(20px,5vw,40px) 40px;
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.nav-overlay__foot .btn{width:100%;max-width:320px}

/* =========================================================
   05. HERO (C04)
   ========================================================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%}
/* FV スライド：4秒ごとに切替、フェード1.333秒、写真は5.333秒かけて1.1倍→等倍
   （2026-09-13 に 6秒／2秒／8秒 から1.5倍速に。間隔＋フェード＝ズームの関係は維持。js/main.js の INTERVAL・FADE と対）。
   z-index は付けない（付けると .hero__scrim より上に出て文字の下の暗幕が消える） */
.hero__slide{opacity:0;transition:opacity 1333ms ease-in-out}
.hero__slide.is-active{opacity:1}
.hero__slide.is-active,.hero__slide.is-leaving{animation:heroZoom 5333ms linear forwards}
@keyframes heroZoom{from{transform:scale(1.1)}to{transform:scale(1)}}
/* 主題が右上・左上にある写真（縦長画面で横が切れる／横長画面で上が切れるのを抑える） */
.hero__media .hero__slide--top-right{object-position:66% 0%}
.hero__media .hero__slide--top-left{object-position:40% 0%}
/* 2026-09-16 主題が右寄りの写真（接地棒の打ち込み）。スマホの縦長画面で人物が切れないよう右に寄せる */
.hero__media .hero__slide--right{object-position:60% center}
.hero__scrim{position:absolute;inset:0;background:var(--grad-hero-scrim),
  linear-gradient(90deg,rgba(10,38,71,.55) 0%,rgba(10,38,71,.1) 55%)}
/* padding-top：2026-09-15 キャッチを大きくしたため、高さの低い画面（横向きのスマホ、1280×600 など）では中身が 100svh を超え、
   上端が固定ヘッダーの下に隠れていた。ヘッダーの高さ＋16px を空ける（中身が収まる画面は下揃えのままで、位置は変わらない） */
.hero__inner{position:relative;width:100%;max-width:var(--container);margin-inline:auto;
  padding-inline:clamp(20px,5vw,40px);padding-top:calc(var(--header-h) + 16px);padding-bottom:clamp(64px,9vw,104px)}
/* 2026-09-15 英語コピーを外し、日本語キャッチを主役に。読み込み時に1回だけ、2行が順に
   ぼかし→くっきり・字間が詰まりながら浮かび、灯りがともるように一瞬発光して落ち着く。
   続いてリードとボタンがふわっと出る。reduced-motion では下の * {animation:none} で最初から表示
   2026-09-16 文言が「電気工事で、／地域づくりに貢献します。」に変わり2行目が12文字になったため、
   721px 以上は 7vw（2行のまま収める）、720px 以下は 11.2vw のままで2行目を u-phrase の境目で折り返す（スマホは3行） */
.hero__catch{font-weight:900;line-height:1.25;letter-spacing:.04em;
  font-size:clamp(1.75rem,7vw,5.4rem);text-shadow:0 8px 40px rgba(0,0,0,.35)}
.hero__catch-line{display:block;white-space:nowrap;animation:heroCatchIn 1.8s cubic-bezier(.19,1,.22,1) both}
.hero__catch-line:nth-child(1){animation-delay:.2s}
.hero__catch-line:nth-child(2){animation-delay:.7s}
@keyframes heroCatchIn{
  0%{opacity:0;filter:blur(16px);letter-spacing:.18em;transform:translateY(24px)}
  50%{opacity:1;filter:blur(0);text-shadow:0 0 18px rgba(255,255,255,.9),0 0 48px rgba(53,182,217,.85),0 0 90px rgba(53,182,217,.5)}
  100%{opacity:1;filter:blur(0);letter-spacing:.04em;transform:none;text-shadow:0 8px 40px rgba(0,0,0,.35)}
}
/* max-width は付けない（2026-10-12 ご指示「幅を使わない改行は NG」。それまでの 64ch は 1100px の容器の 6 割で折り返していた。
   行末は両端揃え＋末尾の句（.u-phrase）で整える。2026-09-16 の 60ch→64ch の調整はこれで不要） */
.hero__lead{margin-top:20px;font-size:clamp(.96rem,1.6vw,1.08rem);font-weight:500;
  color:rgba(255,255,255,.94);line-height:1.9;animation:heroFadeUp 1s ease-out 1.5s both;
  /* 白い車体など明るい写真の上でも読めるように薄い影（2026-09-16。FV 2枚目のトラックで文字が沈んでいた） */
  text-shadow:0 1px 3px rgba(0,0,0,.45),0 2px 14px rgba(0,0,0,.4)}
.hero__actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px;animation:heroFadeUp 1s ease-out 1.7s both}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero__actions .btn{min-width:220px}
.hero__scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  font-family:var(--font-en);font-size:.72rem;letter-spacing:.24em;color:#fff;
  display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.85}
.hero__scroll span{display:block;width:1px;height:46px;background:linear-gradient(#fff,transparent);
  animation:scrollLine 2s ease-in-out infinite}
@keyframes scrollLine{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

/* =========================================================
   06. SECTION HEAD / LABEL (C05)
   ========================================================= */
.sec-head{margin-bottom:clamp(32px,5vw,56px)}
.sec-head--center{margin-inline:auto;text-align:center}
/* 英語見出し＋和訳ラベルは密着させて1ペアに見せる。ペアと見出しの間は明確に離す（等間隔にしない） */
.sec-label{display:flex;flex-direction:column;gap:2px;margin-bottom:22px}
.sec-label--center{align-items:center}
/* 見出し（sec-title）を置かないセクションは、ラベル自体を h2 にする。和訳ラベルの書体は p のときと同じ本文書体のまま */
h2.sec-label{font-family:inherit}
.sec-label__en{font-family:var(--font-en);font-weight:600;letter-spacing:.05em;
  font-size:clamp(1.4rem,3vw,2.2rem);color:var(--blue);line-height:1.15}
.sec-label__jp{font-size:.82rem;font-weight:700;color:var(--ink);letter-spacing:.1em;line-height:1.6}
.sec-title{font-weight:700;line-height:1.5;letter-spacing:.01em;font-size:clamp(1.3rem,2.6vw,1.9rem);color:var(--ink)}
/* 求人票の見出し「電気工事士／（未経験スタート）の募集要項」（2026-10-12）：360px 以下は 14 文字の 2 行目が 1 行に収まる大きさに */
@media (max-width:360px){
  .sec-title--job{font-size:1.1rem}
}
.sec-note{margin-top:16px;color:var(--text-2);font-size:.95rem;line-height:1.9}
/* ラベルの直後に注記を置くとき（TOP の社員紹介）。ラベルの下の 22px だけにする */
.sec-label + .sec-note{margin-top:0}

/* =========================================================
   07. DECORATION (C06)
   ========================================================= */
.deco-blob{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0}
.deco-blob--cyan{background:rgba(53,182,217,.22)}
.deco-blob--blue{background:rgba(31,111,229,.2)}
.deco-ring{position:absolute;border:1px solid var(--line);border-radius:50%;pointer-events:none;z-index:0}
.section{overflow:hidden}
.section > .container,.section > .hero__inner{position:relative;z-index:1}

/* deco position/size presets（インラインstyle禁止のためクラスで指定） */
.deco--tl-lg{width:320px;height:320px;left:-120px;top:-60px}
.deco--tr-lg{width:360px;height:360px;right:-140px;top:-100px}
.deco--br-lg{width:280px;height:280px;right:-100px;bottom:-80px}
.deco--l-mid{width:220px;height:220px;left:-60px;top:20%}
.deco--br-sm{width:180px;height:180px;right:6%;bottom:8%}
@media (max-width:720px){
  .deco-blob,.deco-ring{transform:scale(.7)}
}

/* =========================================================
   08. OVAL CARD (C07)
   ========================================================= */
.oval-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,30px)}.oval-card{background:#fff;border-radius:var(--radius-lg);padding:clamp(30px,3.4vw,40px) clamp(22px,2.6vw,30px);
  text-align:center;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s}
.oval-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.oval-card__no{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;
  border-radius:50%;border:1.5px solid var(--blue);font-family:var(--font-en);font-weight:700;
  font-size:1.3rem;color:var(--blue);margin-bottom:20px}
.oval-card__title{font-size:clamp(1rem,1.3vw,1.1rem);font-weight:700;color:var(--ink);margin-bottom:10px}
.oval-card__text{font-size:.92rem;color:var(--text-2);line-height:1.85}

/* =========================================================
   09. TIMELINE (C08)
   ========================================================= */
.timeline-v{position:relative;max-width:820px;margin-inline:auto;padding-left:36px}
.timeline-v::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tlv-item{position:relative;display:grid;grid-template-columns:120px 1fr;gap:22px;padding:18px 0}
.tlv-item::before{content:"";position:absolute;left:-36px;top:24px;width:14px;height:14px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 0 4px var(--base)}
.tlv-item__time{font-family:var(--font-en);font-weight:700;color:var(--blue-d);font-size:1.05rem;padding-top:2px}
.tlv-item__title{font-size:1.08rem;font-weight:700;color:var(--ink);margin-bottom:6px}
.tlv-item__text{color:var(--text-2);font-size:.92rem}
.timeline-v--day .tlv-item::before{background:var(--cyan)}
.timeline-v--roadmap .tlv-item::before{background:var(--blue-d)}
/* 白いセクションに置く時系列（採用情報の ROADMAP・働く環境の A DAY）。点の縁を背景と同じ白にする */
.section--white .tlv-item::before{box-shadow:0 0 0 4px #fff}

/* 企業理念：三つの信条 */
.creed{max-width:760px;margin-inline:auto}
.creed__list{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:22px}
.creed__list li{background:#fff;border:1px solid var(--line-soft);border-left:4px solid var(--blue);
  border-radius:var(--radius);padding:18px 24px;color:var(--text);font-weight:500;line-height:1.9;
  box-shadow:0 10px 30px -26px rgba(10,38,71,.5)}

/* =========================================================
   10. JOB INDEX (C09)
   ========================================================= */
.job-index{display:flex;flex-direction:column}
.job-index__row{display:block;padding:clamp(22px,3vw,32px) 4px;border-bottom:1px solid var(--line);
  transition:transform .3s var(--ease)}
.job-index__row:hover{transform:translateX(6px)}
.job-index__title{font-size:clamp(1.2rem,2.4vw,1.5rem);font-weight:700;color:var(--ink);margin:0 0 10px}
.job-index__desc{color:var(--text-2);font-size:.92rem;margin-bottom:14px}
.job-index__foot{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.job-index__arrow{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--blue);
  display:flex;align-items:center;justify-content:center;color:var(--blue);font-family:var(--font-en);
  transition:transform .3s var(--ease),background .3s,color .3s}
.job-index__row:hover .job-index__arrow{background:var(--blue);color:#fff;transform:translateX(4px)}

/* =========================================================
   11. LINK CARD (C10)
   ========================================================= */
.card-grid{display:grid;gap:clamp(16px,2.4vw,26px)}
.card-grid--3{grid-template-columns:repeat(3,1fr)}
.card-grid--2{grid-template-columns:repeat(2,1fr)}
/* 関連ページ（主要5ページに自分以外の4枚。2026-10-09 ご指示）。1200px 未満は2列（4列だと題が折れる）。4列のときは説明文を少し小さくして1行14文字を確保 */
.card-grid--4{grid-template-columns:repeat(4,1fr)}
.card-grid--4 .lcard__text{font-size:.86rem}
.lcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.lcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.lcard__media{position:relative;overflow:hidden}
.lcard__media img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .6s var(--ease)}
.lcard:hover .lcard__media img{transform:scale(1.05)}
.lcard__body{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:10px;flex:1}
.lcard__index{font-family:var(--font-en);font-size:.72rem;letter-spacing:.1em;color:var(--blue-d);font-weight:700}
.lcard__title{font-size:1.2rem;font-weight:700;color:var(--ink)}
.lcard__text{color:var(--text-2);font-size:.92rem;flex:1}
.lcard__link{font-weight:700;color:var(--blue-d);display:inline-flex;align-items:center;gap:8px;margin-top:4px}
.lcard__link::after{content:"→";transition:transform .25s var(--ease)}
.lcard:hover .lcard__link::after{transform:translateX(5px)}
/* リンクでないカード（TOP の事業内容。2026-10-08 ご指示でカードの遷移をカット）。浮き上がりと写真の拡大を止める */
.lcard--static:hover {
  transform: none;
  box-shadow: none;
}

.lcard--static:hover .lcard__media img {
  transform: none;
}

/* Feature (image+text) block reused across pages */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.feature--reverse .feature__media{order:2}
/* /work/ の事業領域ブロックのみ、写真の下端を「施工実績を見る」ボタンの下端に揃える */
#fields .feature{align-items:end}
.feature__media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);position:relative}
.feature__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* 正方形の写真（about の代表挨拶。2026-09-17 クライアント提供の写真を切らずに見せる）。
   列いっぱいだと本文に対して大きすぎるので、最大 440px で列の中央に置く */
.feature__media--square{width:100%;max-width:440px;justify-self:center}
.feature__media--square img{aspect-ratio:1/1}
/* 縦長 4:5 の写真（about の代表挨拶。2026-10-08 ご指示で、社員を知るの代表の写真 member-01.jpg に差し替え） */
.feature__media--portrait {
  width: 100%;
  max-width: 400px;
  justify-self: center;
}

.feature__media--portrait img {
  aspect-ratio: 4/5;
}
.feature__body h2,.feature__body h3{font-weight:700;line-height:1.5;color:var(--ink)}
.feature__title{font-size:clamp(1.3rem,2.6vw,1.8rem);margin-bottom:18px}
.feature__body p{margin-bottom:1.1em;color:var(--text-2)}
.feature__body strong{color:var(--ink);box-shadow:inset 0 -.5em 0 var(--base-2)}
.feature__sign{font-weight:700;color:var(--text);margin-top:1.2em;display:flex;flex-wrap:wrap;align-items:center;gap:10px}

/* Cards2 / scard (strength cards) */
.cards2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,24px)}
.scard{position:relative;background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:clamp(26px,3.4vw,40px);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.scard::before{content:"";position:absolute;left:0;top:0;width:4px;height:0;background:var(--blue);transition:height .35s var(--ease)}
.scard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.scard:hover::before{height:100%}
.scard__no{font-family:var(--font-en);font-weight:700;font-size:2.2rem;color:var(--blue);line-height:1}
.scard__title{margin:14px 0 12px;font-size:1.2rem;font-weight:700;color:var(--ink)}
.scard__text{color:var(--text-2);font-size:.94rem}
.scard--accent{background:var(--grad-entry);border-color:transparent;color:#fff}
.scard--accent .scard__no{color:rgba(255,255,255,.6)}
.scard--accent .scard__title{color:#fff}
.scard--accent .scard__text{color:rgba(255,255,255,.9)}
.scard--accent:hover::before{height:0}

/* 働く環境の OUR POLICY に置く経営理念の引用（2026-10-12 ご指示。考え方の理由として /about/ の経営理念の1つ目を引く） */
.policy-quote {
  max-width: 760px;
  margin: clamp(32px, 4vw, 48px) auto;
  padding: clamp(22px, 3vw, 32px) 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.policy-quote p {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--ink);
}

.policy-quote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--text-2);
}

/* 働く環境の WORK STYLE 冒頭の比べる図（2026-10-12 ご指示：移動の時間も勤務時間。よくある働き方と並べて違いを見せる） */
.commute {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(16px, 2.4vw, 28px);
  align-items: stretch;
}

.commute__card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px);
}

.commute__card--ours {
  background: var(--grad-entry);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 18px 40px -24px rgba(21, 89, 192, .7);
}

.commute__label {
  margin-bottom: 18px;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .06em;
  color: var(--text-2);
}

.commute__card--ours .commute__label {
  font-size: 1.05rem;
  color: #fff;
}

.commute__steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.commute__steps li {
  display: grid;
  grid-template-columns: 3.6em minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}

.commute__time {
  font-family: var(--font-en);
  font-weight: 700;
  color: var(--blue-d);
}

.commute__card--ours .commute__steps {
  padding-left: 16px;
  border-left: 2px solid rgba(255, 255, 255, .6);
}

.commute__card--ours .commute__steps li,
.commute__card--ours .commute__time {
  color: #fff;
}

/* 休憩の行は控えめに（2026-10-12） */
.commute__steps .commute__break {
  font-weight: 500;
  font-size: .9em;
  opacity: .8;
}

.commute__band {
  display: inline-block;
  margin-top: 20px;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  background: #fff;
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--blue-d);
}

.commute__note {
  margin-top: 16px;
  font-size: .92rem;
  color: var(--text-2);
}

/* =========================================================
   12. PEOPLE (C11) — MEMBER プロフィールカード
   ========================================================= */
.member-list{display:flex;flex-direction:column;gap:clamp(20px,3vw,34px)}
.member{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);gap:clamp(20px,3.2vw,46px);
  align-items:center;background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:clamp(18px,2.4vw,32px);box-shadow:var(--shadow-sm)}
.member:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,270px)}
.member:nth-child(even) .member__photo{order:2}
.member__photo{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--base-2)}
.member__photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.member__spec{display:flex;flex-direction:column;gap:clamp(8px,1vw,12px)}
.member__row{display:grid;grid-template-columns:minmax(0,178px) minmax(0,1fr);gap:clamp(14px,1.8vw,26px);
  align-items:center}
.member__row dt{background:var(--ink);color:#fff;font-weight:700;font-size:.82rem;letter-spacing:.02em;
  text-align:center;padding:7px 6px;transform:skewX(-14deg)}
.member__row dt span{display:block;transform:skewX(14deg)}
.member__row dd{margin:0;font-size:.94rem;line-height:1.8;color:var(--ink)}
.member__tool{display:block;font-weight:700}
.member__note{display:block;margin-top:2px;font-size:.84rem;line-height:1.75;color:var(--text-2)}
/* about の代表挨拶の下に置く代表のプロフィール（2026-10-08 に社員を知るから移動。行の見た目は .member__row をそのまま使う） */
/* 代表のプロフィール（/about/）。2026-10-09 ご指示で6行を2列に（左に上から3行、右に残り3行）。/people/ の .member__row は共有なので、ここだけに限定する */
.message__profile {
  max-width: none;
}

.message__profile .member__spec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  column-gap: clamp(24px, 4vw, 56px);
  row-gap: clamp(8px, 1vw, 12px);
}

.message__profile .member__row {
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
}

/* INTERVIEW MOVIE（代表インタビュー動画の埋め込み） */
.video-embed{max-width:840px;margin-inline:auto;aspect-ratio:16/9;border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow);background:#000}
.video-embed iframe{width:100%;height:100%;border:0;display:block}

/* NEW MEMBER（新人インタビュー枠） */
.newcomer{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:clamp(20px,3vw,44px);
  align-items:center;background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:clamp(20px,2.6vw,36px);box-shadow:var(--shadow-sm)}
.newcomer__photo{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--base-2)}
.newcomer__photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.newcomer__meta{font-size:.82rem;font-weight:700;color:var(--blue-d);margin-bottom:14px}
.newcomer__qa+.newcomer__qa{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft)}
.newcomer__q{font-weight:700;color:var(--ink);margin-bottom:8px;padding-left:28px;position:relative}
.newcomer__q::before{content:"Q";position:absolute;left:0;font-family:var(--font-en);font-weight:700;color:var(--blue)}
.newcomer__a{color:var(--text-2);font-size:.96rem;line-height:1.95;padding-left:28px}

/* TOP の社員2人並び（クリックで下記モーダルが開く）。全幅・写真4:3でカードをほぼ正方形に */
.people-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,26px)}
.people-duo .person__media img{aspect-ratio:4/3}

/* --- MODAL（TOP の社員カードで使用） --- */
.person{display:flex;flex-direction:column;text-align:left;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s;width:100%}
.person:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.person__media{position:relative;overflow:hidden}
.person__media img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .6s var(--ease)}
.person:hover .person__media img{transform:scale(1.05)}
.person__body{padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;gap:8px;flex:1}
.person__role{font-size:.8rem;font-weight:700;color:var(--blue-d)}
.person__catch{font-size:1.1rem;font-weight:700;line-height:1.6;color:var(--ink)}
.person__name{color:var(--text-2);font-size:.86rem}
.person__more{margin-top:auto;font-weight:700;color:var(--blue-d);display:inline-flex;align-items:center;gap:8px;padding-top:8px}
.person__more::after{content:"＋";font-weight:700}

.modal{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:18px}
.modal.is-open{display:flex}
.modal__overlay{position:absolute;inset:0;background:rgba(10,38,71,.55);backdrop-filter:blur(3px)}
.modal__panel{position:relative;background:#fff;border-radius:20px;max-width:780px;width:100%;
  max-height:90vh;overflow-y:auto;box-shadow:0 30px 80px -20px rgba(10,38,71,.5);
  -webkit-overflow-scrolling:touch}
.modal__close{position:sticky;top:0;margin-left:auto;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;font-size:1.3rem;
  float:right;margin:14px 14px 0 0;z-index:2}
.modal__close:hover{background:var(--blue-d)}
/* 2026-09-14 写真・入社年・名前・タグの見出しを廃止し、プロフィール1行を先頭に置く（右上の閉じるボタンは float で横に並ぶ）。
   span は「30代・」と「ほぼ未経験からの中途入社」の区切り。狭い画面ではその間で改行し、1文字だけ次の行に落ちるのを防ぐ */
.modal__profile{padding:clamp(24px,3.4vw,34px) clamp(20px,3vw,32px) 20px;font-size:1.25rem;font-weight:700;line-height:1.6;color:var(--ink)}
.modal__profile span{display:inline-block}
.modal__qa{padding:0 clamp(20px,3vw,32px) clamp(24px,3vw,36px)}
.modal__qa .qa-item{padding:18px 0;border-top:1px solid var(--line-soft)}
.modal__q{font-weight:700;color:var(--ink);margin-bottom:8px;padding-left:30px;position:relative}
.modal__q::before{content:"Q";position:absolute;left:0;font-family:var(--font-en);font-weight:700;color:var(--blue)}
.modal__a{color:var(--text-2);font-size:.96rem;padding-left:30px;position:relative}
.modal__a::before{content:"A";position:absolute;left:0;font-family:var(--font-en);font-weight:700;color:var(--text-2)}
body.modal-open{overflow:hidden}

/* =========================================================
   13. FAQ (C12)
   ========================================================= */
.faq__list{border-top:1px solid var(--line-soft)}
.qa{border-bottom:1px solid var(--line-soft)}
.qa__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left;
  padding:24px 6px;font-size:1.02rem;font-weight:700;color:var(--text)}
.qa__q span:first-child{position:relative;padding-left:30px}
.qa__q span:first-child::before{content:"Q";position:absolute;left:0;font-family:var(--font-en);font-weight:700;color:var(--blue-d)}
.qa__icon{position:relative;flex:0 0 22px;width:22px;height:22px}
.qa__icon::before,.qa__icon::after{content:"";position:absolute;background:var(--blue-d);border-radius:2px;transition:transform .3s var(--ease)}
.qa__icon::before{inset:50% 0 auto 0;height:2px;transform:translateY(-50%)}
.qa__icon::after{inset:0 auto 0 50%;width:2px;transform:translateX(-50%)}
.qa__q[aria-expanded="true"] .qa__icon::after{transform:translateX(-50%) scaleY(0)}
.qa__a{overflow:hidden;max-height:0;transition:max-height .4s var(--ease)}
.qa__a p{padding:0 6px 24px 30px;color:var(--text-2)}

/* =========================================================
   14. PHOTO MARQUEE (C13)
   ========================================================= */
.pmq{padding:clamp(40px,6vw,72px) 0 clamp(64px,9vw,110px);background:#fff;overflow:hidden}
/* セクションの中に入れる帯（TOP の社員紹介。2026-10-08 ご指示で「私たちの考え」の下から移動）。背景はセクションに任せ、上の余白は見出しの余白に任せる */
.pmq--inset {
  padding: 0 0 clamp(44px, 6vw, 72px);
  background: transparent;
}
.pmq__track{display:flex;width:max-content;animation:pmq-flow 45s linear infinite}
.pmq__list{display:flex;list-style:none;margin:0;padding:0}
.pmq__item{margin-right:clamp(14px,2vw,24px)}
.pmq__item img{display:block;height:clamp(180px,24vw,300px);width:auto;border-radius:var(--radius);
  box-shadow:0 16px 36px -24px rgba(10,38,71,.5)}
.pmq__list .pmq__item:nth-child(even){transform:translateY(clamp(16px,2.6vw,36px))}
@keyframes pmq-flow{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .pmq{overflow-x:auto}
  .pmq__track{animation:none;width:auto}
  .pmq__list[aria-hidden="true"]{display:none}
}

/* =========================================================
   14b. RECRUIT TOP TEASER (TOP採用情報ブロック)
   ========================================================= */
.rtop{position:relative}
.rtop__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4.5vw,60px);align-items:center}
.rtop__catch{display:flex;flex-direction:column;gap:6px;align-items:flex-start;margin-top:20px}
.rtop__catch span{display:inline-block;background:var(--grad-entry);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  font-size:clamp(2.25rem,4.65vw,3.375rem);font-weight:900;line-height:1.3;padding-right:.1em}
.rtop__text{margin-top:18px;color:var(--text-2);line-height:2}
.rtop__media{position:relative;min-height:clamp(340px,34vw,520px)}
.rtop__img{position:absolute;height:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow);object-fit:cover}
.rtop__img:first-child{left:0;top:0;width:78%;aspect-ratio:4/3;z-index:1}
.rtop__img--2{right:0;bottom:0;width:66%;aspect-ratio:4/3;z-index:2;transform:none}
.rtop__script{font-family:"Caveat","Jost",cursive;font-size:clamp(2.8rem,6.5vw,5.2rem);line-height:1;
  color:var(--blue);opacity:.18;font-weight:700;text-align:center;margin-top:clamp(14px,2.6vw,30px);
  pointer-events:none;user-select:none}

/* =========================================================
   15. SPEC TABLE (C14)
   ========================================================= */
.spec-table{width:100%;background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm)}
.spec-table .row{display:grid;grid-template-columns:200px 1fr;border-top:1px solid var(--line-soft)}
.spec-table .row:first-child{border-top:0}
.spec-table dt,.spec-table th{background:var(--ink);color:#fff;font-weight:700;padding:18px 24px;
  display:flex;align-items:center;text-align:left}
.spec-table dd,.spec-table td{padding:18px 24px;color:var(--text);margin:0}
.spec-table ul{list-style:disc;padding-left:1.2em;display:flex;flex-direction:column;gap:4px}
/* 求人票の「仕事内容」「求める人材」の先頭の一文（2026-10-09 ご指示で太字にし、箇条書きの前で改行） */
.spec-table__lead {
  display: block;
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--ink);
}

.spec-table dd ul + p {
  margin-top: 12px;
}

/* =========================================================
   16. GALLERY (C15)
   ========================================================= */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery--2{grid-template-columns:repeat(2,1fr)}
.gallery figure{position:relative;border-radius:var(--radius);overflow:hidden;margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s var(--ease)}
.gallery figure:hover img{transform:scale(1.06)}
.gallery figcaption{position:absolute;inset:auto 0 0 0;padding:24px 14px 12px;font-size:.82rem;font-weight:700;color:#fff;
  background:linear-gradient(0deg,rgba(10,38,71,.9),rgba(10,38,71,0))}

/* =========================================================
   17. CTA BAND (C16)
   ========================================================= */
.cta{background:var(--grad-entry);color:#fff;text-align:center;position:relative;overflow:hidden}
.cta__inner{position:relative;max-width:1180px;margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.cta__en{font-family:var(--font-en);font-weight:700;letter-spacing:.18em;color:#dceeff;margin-bottom:12px}
.cta__title{font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:700;line-height:1.6;margin-bottom:14px}
.cta__text{color:rgba(255,255,255,.92);margin-bottom:30px}

/* =========================================================
   18. FOOTER (C17)
   ========================================================= */
.site-footer{background:var(--base-3);color:var(--text);padding-top:clamp(48px,7vw,84px)}
.footer__grid{display:grid;grid-template-columns:1.3fr 1.2fr .8fr;gap:clamp(28px,4vw,56px)}
.brand--footer{gap:16px}
.brand--footer .brand__logo{width:96px}
.brand--footer .brand__name{font-size:1.5rem;color:var(--ink)}
.brand--footer .brand__sub{color:var(--blue-d);font-size:.72rem}
.footer__h{font-family:var(--font-en);font-size:.86rem;letter-spacing:.14em;color:var(--blue-d);font-weight:700;margin-bottom:18px}
.footer__dl > div{display:grid;grid-template-columns:88px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.88rem}
.footer__dl dt{color:var(--text-2);font-weight:700}
.footer__nav ul{display:flex;flex-direction:column;gap:6px}
.footer__nav a{display:inline-block;padding:4px 0;font-size:.9rem;color:var(--text-2);transition:color .2s}
.footer__nav a:hover,.footer__nav a[aria-current="page"]{color:var(--blue-d)}
.footer__bottom{margin-top:clamp(36px,5vw,60px);border-top:1px solid var(--line);
  padding:22px clamp(20px,5vw,40px);max-width:var(--container);margin-inline:auto;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.footer__copy{font-size:.78rem;color:var(--text-2)}
.footer__pagetop{font-family:var(--font-en);font-size:.78rem;letter-spacing:.12em;color:var(--text-2);transition:color .2s}
.footer__pagetop:hover{color:var(--blue-d)}

/* =========================================================
   20. PAGE HERO (C19) / BREADCRUMB
   ========================================================= */
.pagehero{position:relative;background:linear-gradient(135deg,var(--base) 0%,var(--base-3) 100%);
  color:var(--ink);padding-top:calc(var(--header-h) + clamp(34px,6vw,72px));padding-bottom:clamp(34px,6vw,72px);
  overflow:hidden}
.pagehero__inner{position:relative;z-index:1;max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.pagehero__en{font-family:var(--font-en);font-weight:600;letter-spacing:.1em;color:var(--blue);
  font-size:clamp(1.3rem,2.6vw,1.9rem);margin-bottom:8px}
.pagehero__title{font-size:clamp(1.5rem,3.2vw,2.1rem);font-weight:700;line-height:1.5;color:var(--ink)}
/* リードに max-width を付けない（2026-10-12 ご指示。80ch だと容器 1100px の 6 割で折り返し、右側が空いていた） */
.pagehero__lead{margin-top:16px;color:var(--text-2);font-size:.98rem;line-height:1.9}

.pagehero--photo{color:#fff;background:var(--ink)}
.pagehero--photo .pagehero__media{position:absolute;inset:0;z-index:0}
.pagehero--photo .pagehero__media img{width:100%;height:100%;object-fit:cover;opacity:.55}
.pagehero--photo .pagehero__media::after{content:"";position:absolute;inset:0;background:var(--grad-hero-scrim)}
.pagehero--photo .pagehero__en{color:var(--cyan)}
.pagehero--photo .pagehero__title{color:#fff}
.pagehero--photo .pagehero__lead{color:#dce8f7}

.breadcrumb{padding:0 0 18px}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;font-size:.8rem;color:var(--text-2)}
.breadcrumb li{display:flex;gap:8px;align-items:center}
.breadcrumb li:not(:last-child)::after{content:"›";color:var(--text-2)}
.breadcrumb a:hover{color:var(--blue-d);text-decoration:underline}
.breadcrumb [aria-current="page"]{color:var(--ink);font-weight:700}
.pagehero--photo .breadcrumb,
.pagehero--photo .breadcrumb li:not(:last-child)::after{color:#cfe0f5}
.pagehero--photo .breadcrumb [aria-current="page"]{color:#fff}

/* =========================================================
   21. TODO BADGE (C21)
   ========================================================= */
.todo-badge{display:inline-block;font-size:.72rem;font-weight:700;color:#6b5300;background:#fff4cc;
  border:1px dashed #caa200;padding:1px 9px;border-radius:6px}
.todo-badge--dark{color:#fff3c4;background:rgba(255,255,255,.14);border-color:rgba(255,227,122,.6)}

/* =========================================================
   22. FORM (C22)
   ========================================================= */
.form{background:#fff;color:var(--text);border-radius:var(--radius-lg);
  padding:clamp(26px,4vw,52px);box-shadow:var(--shadow);border:1px solid var(--line-soft)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form__field{display:block;margin-bottom:18px}
.form__label{display:block;font-weight:700;font-size:.9rem;margin-bottom:8px;color:var(--ink)}
.form__label em{font-style:normal;font-size:.72rem;color:#fff;background:#c0152f;padding:2px 8px;border-radius:5px;margin-left:8px;vertical-align:middle}
.form input,.form select,.form textarea{width:100%;font-family:inherit;font-size:1rem;color:var(--text);
  background:var(--base);border:1.5px solid var(--line);border-radius:10px;padding:13px 15px;transition:border-color .2s,box-shadow .2s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--base-2);background:#fff}
.form textarea{resize:vertical}
.form__consent{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--text-2);margin:6px 0 20px}
.form__consent input{width:18px;height:18px;margin-top:3px;flex:0 0 auto}
.form__submit{margin-top:6px;text-align:center}
/* 送信ボタンの矢印（白い「＿＼」を右端に。リンクのボタンの a.btn::after と同じ形。CF7 の <input> と同じ描き方に揃える） */
.form__submit .btn {
  width: 100%;
  max-width: 360px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 11H23M15 1l8 10' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 32px center / 1.25em auto, var(--grad-entry);
}
.form__note{margin-top:14px;font-size:.8rem;color:var(--text-2)}

/* 同意文の中のリンク（個人情報保護方針。2026-10-06）。リンクだと分かる色と下線にし、途中で折り返さない */
.form__consent a {
  color: var(--blue-d);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
/* CTA 内に置く応募フォーム。CTA は中央寄せなのでフォームだけ左寄せに戻し、幅を抑える */
.form-block{margin-top:8px}
.cta .form-block{max-width:760px;margin-inline:auto;text-align:left}

/* =========================================================
   23. APPLY BAR (C23)
   ========================================================= */
.applybar{position:fixed;inset:auto 0 0 0;z-index:150;background:rgba(10,38,71,.97);
  backdrop-filter:blur(8px);color:#fff;transform:translateY(100%);transition:transform .35s var(--ease)}
.applybar.is-shown{transform:translateY(0)}
.applybar__inner{max-width:var(--container);margin-inline:auto;padding:12px clamp(16px,4vw,30px);
  display:flex;align-items:center;gap:16px}
.applybar__label{font-weight:700;line-height:1.3}
.applybar .btn{margin-left:auto}

/* =========================================================
   24. CHIPS / CHECKLIST (C24)
   ========================================================= */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips li{font-size:.84rem;font-weight:700;color:var(--ink-2);background:var(--base-2);
  border:1px solid var(--line-soft);padding:7px 14px;border-radius:var(--radius-pill)}
.checklist{display:flex;flex-direction:column;gap:10px}
.checklist li{position:relative;padding-left:32px;color:var(--text)}
.checklist li::before{content:"✓";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;
  background:var(--base-2);color:var(--blue-d);font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center}
/* 行は左揃えのまま、リスト全体を中央に置く（/entry/。2026-09-19） */
.checklist--center{width:fit-content;max-width:100%;margin-inline:auto}

/* =========================================================
   25. JOB ROW LIST (recruit index / related jobs)
   ========================================================= */
.joblist{display:flex;flex-direction:column;gap:16px}
.jobrow{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;background:#fff;
  border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:clamp(20px,2.6vw,30px);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.jobrow:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--blue)}
.jobrow__tag{display:inline-block;font-size:.75rem;font-weight:700;padding:4px 12px;border-radius:var(--radius-pill);margin-bottom:10px}
.jobrow__tag--beginner{background:var(--base-2);color:var(--blue-d)}
.jobrow__tag--career{background:#e7f7ec;color:#1c7a43}
.jobrow__tag--mgmt{background:#fff0df;color:#a85d12}
.jobrow__title{font-size:1.24rem;font-weight:700;margin-bottom:12px;color:var(--ink)}
.jobrow__meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.88rem;font-weight:600;color:var(--text-2)}
.jobrow__cta{white-space:nowrap}

/* =========================================================
   25b. PRIVACY POLICY（/privacy/。2026-10-06 新設）
   ========================================================= */
.policy p,
.policy li {
  line-height: 2;
  color: var(--text-2);
}

.policy__intro p + p,
.policy__sec p + p {
  margin-top: .9em;
}

.policy__sec {
  margin-top: clamp(40px, 6vw, 56px);
}

.policy__h2 {
  padding-bottom: 10px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--line-soft);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ink);
}

.policy__list {
  margin-top: 8px;
}

.policy__list li {
  padding-left: 1em;
  text-indent: -1em;
}

.policy__list li::before {
  content: "・";
}

/* URL は語の途中でも折り返す（狭い画面ではみ出さないように） */
.policy__url a {
  overflow-wrap: anywhere;
  color: var(--blue-d);
  text-underline-offset: 3px;
}

.policy .spec-table {
  margin-top: 8px;
}

/* =========================================================
   26. REVEAL ANIMATION
   ========================================================= */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.06s}
.reveal:nth-child(3){transition-delay:.12s}
.reveal:nth-child(4){transition-delay:.18s}

/* =========================================================
   27. RESPONSIVE
   ========================================================= */
@media (max-width:1199px){
  .card-grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1024px){
  :root{--header-h:68px}
  .gnav{display:none}
  .nav-overlay__inner{grid-template-columns:1fr;gap:8px}
  .feature,.field,.message__grid{grid-template-columns:1fr;gap:22px}
  .feature--reverse .feature__media{order:0}
  .card-grid--3{grid-template-columns:repeat(2,1fr)}
  .people__grid{grid-template-columns:repeat(2,1fr)}
  .member,.member:nth-child(even){grid-template-columns:minmax(0,220px) minmax(0,1fr)}
  .member:nth-child(even) .member__photo{order:0}
  /* 写真が 220px になると答えの欄が 13 文字ほどしか入らないので、項目名の列を 720px 以下と同じ 132px に（2026-10-09） */
  .member__row{grid-template-columns:minmax(0,132px) minmax(0,1fr);gap:12px}
  .newcomer{grid-template-columns:minmax(0,220px) minmax(0,1fr)}
  .oval-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .rtop__grid{grid-template-columns:1fr}
  .cards2{grid-template-columns:1fr}
  .commute{grid-template-columns:1fr}
  .message__profile .member__spec{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none}
  .spec-table .row{grid-template-columns:150px 1fr}
}
@media (max-width:720px){
  .sp-only{display:inline}
  .pc-only{display:none}
  .card-grid--3,.card-grid--2,.card-grid--4,.people__grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .member,.member:nth-child(even),.newcomer{grid-template-columns:1fr;gap:18px}
  .member__photo{max-width:260px;margin-inline:auto}
  .newcomer__photo{max-width:260px;margin-inline:auto}
  .member__row{grid-template-columns:minmax(0,132px) minmax(0,1fr);gap:12px;align-items:start}
  .member__row dt{font-size:.74rem;padding:6px 4px}
  .member__row dd{font-size:.9rem}
  .people-duo{grid-template-columns:1fr;max-width:460px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .form__row{grid-template-columns:1fr;gap:0}
  .spec-table .row{grid-template-columns:1fr}
  .spec-table dt,.spec-table th{padding:14px 18px}
  .spec-table dd,.spec-table td{padding:16px 18px}
  .jobrow{grid-template-columns:1fr}
  .modal__profile{font-size:1.1rem}
  .tlv-item{grid-template-columns:88px 1fr;gap:12px}
  .footer__grid{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;align-items:flex-start}
  .hero__lead br{display:none}
  .hero__catch{font-size:11.2vw}
  .hero__catch-line{white-space:normal}
  /* スマホで SCROLL の線（高さ 46px＋文字、下端から 22px）が縦に積んだボタンに重なっていた（2026-10-14 ご指摘）。
     中身の下の余白を、SCROLL の高さ＋間隔の分だけ広げ、ボタンの下に SCROLL が入る */
  .hero__inner{padding-bottom:128px}
  .entry-pill__link{padding:10px 22px}
  .entry-pill__link .jp{font-size:.92rem;line-height:2}
  .entry-pill__link .en{display:none}
}
@media (max-width:480px){
  .brand__logo{width:52px}
  .brand__name{font-size:1.15rem}
  .brand--footer .brand__logo{width:80px}
  .brand--footer .brand__name{font-size:1.25rem}
  .gallery{grid-template-columns:1fr 1fr;gap:10px}
  /* 時系列（A DAY・ROADMAP）は時刻の列をやめて縦に積む。480px 以下では見出しが「作業終了・現場確／認」のように折れるため（2026-10-09） */
  .tlv-item{grid-template-columns:1fr;gap:4px}
  /* 比べる図（働く環境）は時刻の列を詰めて、手順の文を1行に収める（2026-10-12） */
  .commute__steps li{grid-template-columns:3em minmax(0,1fr);gap:8px;font-size:.92rem}
  /* プロフィール（/about/ の代表・/people/ の社員）も項目名を上に積む。2列のままだと答えの幅が8文字ほどになり、数文字だけの行ができるため（2026-10-09） */
  .member__row,.message__profile .member__row{grid-template-columns:1fr;gap:6px}
  .member__row dt{justify-self:start;min-width:132px;padding-inline:18px}
  /* 2026-10-07 スマホ幅でヘッダーに収まらず、右上のボタンの枠が縮んで三本線（メニュー）が切れていた（2026-09-15 から記録していた既存の不具合）。
     間隔とボタンの内側の余白を詰めて、357px 以上で収める */
  .header-inner{gap:8px}
  .entry-pill__link{padding:10px 14px}
  .entry-pill__nav{padding:0 13px}
}
@media (max-width:356px){
  /* 求人票などの表は 1 行に 15 文字入らないと句（u-phrase）が割れるので、欄の左右の余白と箇条書きの文字を少し詰める（2026-10-09） */
  .spec-table dd,.spec-table td{padding-inline:12px}
  .spec-table ul{font-size:.94rem}
  /* 357px 未満は余白を詰めるだけでは収まらないので、ヘッダーのロゴと社名も少し小さくする（フッターは変えない） */
  .site-header .brand{gap:8px}
  .site-header .brand__logo{width:40px}
  .site-header .brand__name{font-size:1rem}
  .entry-pill__link{padding:10px 12px}
  .entry-pill__nav{padding:0 11px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none;transition:none}
  .lcard__media img,.person__media img,.gallery img{transition:none}
}