@charset "utf-8";
/* 2026-09-23 / Recruitment design
 * top.css または style.css の後に読み込む共通のデザイン層。
 * 読み込み画面・カード・掲載内容は既存ファイルが引き続き受け持つ。
 * ★トップのヒーローは 2026-09-23 に css/hero.css へ移した（ここには無い）。
 *
 * ★背景は 2026-09-23 夜に、ヒーロー（Create #Future with us.）と同じテーマにそろえた。
 *   白地に淡い多角形（template-parts/recruit-theme-bg.php）を画面に固定して敷き、
 *   その上の面（節・ページ見出し・フッター）は透けさせている。カードと文字は変えていない。
 *   以前の «節ごとのパステルのもや» «ページ見出しの輪と五角形» はここで消している。
 */
html body[data-page]{ background:transparent; }        /* 地色は html に。下の .fbg（z-index:-1）が地色の上、本文の下に入る */
html:has(body[data-page]){ background:#FEFEFE; }
body[data-page]{
  --rd-ink:#25354d;
  --rd-text:#526075;
  --rd-paper:#FEFEFE;                 /* ヒーローと同じ白 */
  --rd-sky:#b9ecfa;
  --rd-rose:#ffc8dd;
  --rd-mint:#c3f1de;
  --rd-lilac:#dcd3fb;
  --rd-lemon:#ffedba;
  --rd-peach:#ffd6ba;
  --rd-line:rgba(37,53,77,.12);
}
body[data-page] #site{ background:transparent; }

/* ---- 全ページ共通の背景（ヒーローと同じ淡い多角形。template-parts/recruit-theme-bg.php） ----
   画面に固定した層。本文はこの上を流れます。z-index:-1 なので、本文の面が透けていれば見えます。
   ★読み込み画面（.boot）の中にも同じものを置いています（そちらは absolute）。 */
.fbg{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.fbg__svg{ position:absolute; inset:-3%; width:106%; height:106%; display:block;
  animation:fhDrift 16s ease-in-out infinite alternate;      /* 絵全体もゆっくり流す（下の @keyframes fhDrift） */
  /* ★style.css（下層ページ）は svg 全部に «stroke:currentColor» を掛けるので、ここで外す。
     線（<line>）は自分の stroke 属性を持っているので、そのまま残る */
  fill:none; stroke:none; stroke-width:0; }
.fbg__svg--sp{ display:none; }
@media (max-width:760px){
  .fbg__svg--pc{ display:none; }
  .fbg__svg--sp{ display:block; }
}
/* 図形ひとつひとつがゆっくり漂う（ヒーロー・読み込み画面・全ページ共通）。
   図形側に class="fh-f" と、動く量の変数（--dx/--dy：何px、--r：何度、--t：一往復の秒数、
   --dl：始める位相）が付いています。px は SVG の viewBox の単位です。 */
.fh-f{
  transform-box:fill-box; transform-origin:center;
  animation:fhFloat var(--t,12s) ease-in-out var(--dl,0s) infinite;
}
/* 水の中でゆらゆら泳ぐように、行って・沈んで・戻る、ひとまわりの道筋（2026-09-23 に動きを大きくした） */
@keyframes fhFloat{
  0%  { transform:translate(0,0) rotate(0deg); }
  25% { transform:translate(calc(var(--dx,30px) * .9),calc(var(--dy,30px) * .25)) rotate(var(--r,3deg)); }
  50% { transform:translate(calc(var(--dx,30px) * .35),var(--dy,30px)) rotate(calc(var(--r,3deg) * -.35)); }
  75% { transform:translate(calc(var(--dx,30px) * -.45),calc(var(--dy,30px) * .55)) rotate(calc(var(--r,3deg) * -1)); }
  100%{ transform:translate(0,0) rotate(0deg); }
}
/* 絵全体のゆっくりした流れ。SVG を 106% にしてあるので ±1.2% 動いてもふちに隙間は出ない */
@keyframes fhDrift{
  from{ transform:translate(-1.2%,-1%); }
  to  { transform:translate(1.2%,1%); }
}
@media (prefers-reduced-motion:reduce){ .fh-f,.fbg__svg,.fh__svg{ animation:none; } }

/* 以前の背景（トップの .bg のもや、粒、回転する多角形）は出さない。 */
body[data-page] .bg,
body[data-page] .bg::before,
body[data-page] .bg::after,
body[data-page] .grain,
body[data-page] .spark,
body[data-page] .topblob,
body[data-page] .hero-white,
body[data-page] .hero > .poly,
body[data-page] .hero > .ld__orbs,
body[data-page] .phero__blob{ display:none; }

/* ヘッダーは常に読める白い面。細い線はヒーローの6色（空色→桃）で読み込み画面とつなぐ。 */
body[data-page] .nav,
body[data-page] .header{
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--rd-line);
  box-shadow:none;
}
body[data-page] .nav.stuck,
body[data-page] .header.is-solid{
  background:rgba(255,255,255,.97);
  box-shadow:0 4px 24px rgba(37,53,77,.04);
}
body[data-page] .nav::after,
body[data-page] .header::after{
  height:3px; opacity:1;
  background:linear-gradient(90deg,#5EC6FD,#67A9FC 20%,#9CA8F8 40%,#B99CEC 60%,#EDA8E0 80%,#FDA0B3);
}
/* メニューの英字は、#Future のグラデーションと同じ並び（空色→青→藤→紫→桃→珊瑚）を鮮やかにした色。
   7つ目の「募集要項」（下層ページだけにある）は橙。2026-09-23「もっと明るい系の色に」のご指示。
   ★以前はここで灰色（#657189）と、現在ページの茶色（#865675）にしていた。top.css／style.css のパステルより優先させるため
     body[data-page] を付けている。 */
body[data-page] .gnav a:nth-child(1){ --uc:#2FC1FF; }   /* TOP     空色 */
body[data-page] .gnav a:nth-child(2){ --uc:#4A9BFF; }   /* DATA    青 */
body[data-page] .gnav a:nth-child(3){ --uc:#7C86FF; }   /* WORK    藤 */
body[data-page] .gnav a:nth-child(4){ --uc:#AA7BF5; }   /* PEOPLE  紫 */
body[data-page] .gnav a:nth-child(5){ --uc:#F27ACB; }   /* CAREER  桃 */
body[data-page] .gnav a:nth-child(6){ --uc:#FF7F9B; }   /* STUDY   珊瑚 */
body[data-page] .gnav a:nth-child(7){ --uc:#FF9A62; }   /* RECRUIT 橙 */
body[data-page] .gnav a .en{ color:var(--uc,#657189); }
body[data-page] .gnav a.is-current .en{ color:var(--uc,#865675); }

/* 本文の面は透けさせて、下の背景（.fbg）を見せる。節の境目の線も引かない（シームレスに）。 */
body[data-page] main > .sec,
body[data-page] #site > .sec,
body[data-page] main > .sec:nth-of-type(2n),
body[data-page] #site > .sec:nth-of-type(2n),
body[data-page="index"] #about,
body[data-page="index"] #housing,
body[data-page="index"] #contents{
  background:transparent;
  border-bottom:0;
}
body[data-page] .sec--haze::before,
body[data-page] .sec--haze::after{ display:none; }
/* ページごとの色 … メニューの英字と同じ色を、そのページの英字ラベル（WORK など）と節の英字に使う（2026-09-23 のご指示）。
   トップは各節に元の色があるので決めない。 */
body[data-page="data"]{    --pg-uc:#4A9BFF; }
body[data-page="work"]{    --pg-uc:#7C86FF; }
body[data-page="people"]{  --pg-uc:#AA7BF5; }
body[data-page="career"]{  --pg-uc:#F27ACB; }
body[data-page="study"]{   --pg-uc:#FF7F9B; }
body[data-page="recruit"]{ --pg-uc:#FF9A62; }   /* 募集要項（entry） */
body[data-page] .sec__en{
  color:var(--pg-uc,#596583); font-weight:700; letter-spacing:.2em;
}
body[data-page] .sec__en::before{ background:var(--pg-uc,var(--cyan)); }
/* 見出しの太さ … 洗練した印象にするため、大きな日本語の見出し・キャッチは 600（2026-09-23 のご指示。
   以前は 900／700）。inc/recruit.php で Noto Sans JP の 900 を読み込まず 600 を足しているので、
   top.css／style.css に残る 900 の指定も自動的に 700 で描かれる。 */
body[data-page] .sec__ttl,
body[data-page] .contact__ttl{ color:var(--rd-ink); font-weight:600; line-height:1.28; letter-spacing:.015em; }
/* 行間 … 大きな見出しは 1.28（以前は 1.45〜1.5。「行間詰めて」のご指示。2026-09-23） */
body[data-page] :is(.job__big,.pj__ttl,.itv__ttl,.work__ttl,.edu__ttl,.sntai__ttl,.gate__ja,.pillar__ttl,.entry__ttl,.footer__cta-ttl,
  .vid__ttl,.house__ttl,.vids__head,.env__box h3,.env__honest h3,.env__local-txt h3,.step__body h3,.req__parent h3,.itv__minicard h3){
  font-weight:600; line-height:1.28;
}
body[data-page] .sec__lead{ color:var(--rd-text); line-height:2.1; }

/* ICT（土木は、デジタルでもっと面白くなる。）… ここだけ背景のパステルの図形（.fbg）を見せない（2026-09-23 のご指示）。
   以前は «透けた淡い水色（不透明度 .7）» で図形が透けていた。いまは同じ色（#FEFEFE に水色 .7 を重ねた色 #F3F8FD）を不透明で敷き、
   上下のふち 120px だけぼかして、図形が直線で切れて見えないようにしている。
   ★セレクタは #site > #ict.sec まで書く。上の «本文の面は透けさせて» の body[data-page] #site > .sec:nth-of-type(2n)
     （id を含む）のほうが強く、#ict だけでは色が付かなかった（以前の淡い水色も実は効いていなかった）。 */
body[data-page="index"] #site > #ict.sec{
  background:linear-gradient(180deg,rgba(243,248,253,0) 0,#F3F8FD 120px,#F3F8FD calc(100% - 120px),rgba(243,248,253,0) 100%);
}

/* 下層ページ / 同じ余白とパステル。ページタイトルを主役にする。 */
body[data-page] .phero{
  isolation:isolate;
  padding-top:calc(var(--rc-header-h) + clamp(64px,7vw,104px));
  padding-bottom:clamp(48px,6vw,80px); min-height:0;
  border-bottom:0;
  background:transparent;               /* 背景は .fbg（全ページ共通）に任せる */
}
/* 以前の飾り（ミントの輪、桃色の五角形）は出さない */
body[data-page] .phero::before,
body[data-page] .phero::after{ display:none; }
body[data-page] .phero__en{
  color:var(--pg-uc,#687394); font-size:clamp(18px,2.7vw,36px); font-weight:500;
  letter-spacing:.16em; line-height:1.2;
  display:flex; align-items:center; gap:16px;
}
body[data-page] .phero__en::before{
  content:""; width:32px; height:6px; border-radius:3px;
  background:var(--pg-uc,#9edbcc); flex:none;
}
body[data-page] .phero__ttl{
  color:var(--rd-ink); font-size:clamp(30px,4vw,56px); font-weight:600;
  margin-top:22px; line-height:1.28; letter-spacing:.035em;
}
body[data-page] .phero__lead{
  color:var(--rd-text); max-width:46em; font-size:16px; line-height:2.1;
}
body[data-page] .phero__nav{ gap:10px; margin-top:30px; }
/* 見出しの下の «各節へのリンク» … ページの色（--pg-uc）の枠線だけ。カーソルを乗せると同じ色で薄く塗る（2026-09-23 のご指示） */
body[data-page] .phero__nav a{
  background:transparent; border:1.5px solid var(--pg-uc,#d7dce7);
  color:var(--rd-ink); border-radius:8px; min-height:44px;
  display:inline-flex; align-items:center; font-weight:500;
  transition:background .25s,border-color .25s,transform .2s;
}
body[data-page] .phero__nav a:hover{
  background:color-mix(in srgb, var(--pg-uc,#ac9ccc) 14%, #fff); border-color:var(--pg-uc,#ac9ccc); transform:translateY(-2px);
}

/* 応募エリアも透けさせる。フッターは薄く白を敷いて落ち着かせる（背景はうっすら透ける）。 */
body[data-page="index"] #entry,
body[data-page] .entry{ background:transparent; }
body[data-page] .foot,
body[data-page] .footer{
  background:rgba(255,255,255,.62); border-top:1px solid rgba(37,53,77,.08);
}
body[data-page] :focus-visible{ outline:3px solid #65569a; outline-offset:5px; }

@media(max-width:680px){
  body[data-page] .phero{ padding-top:calc(var(--rc-header-h) + 44px); padding-bottom:40px; }
  body[data-page] .phero__ttl{ font-size:clamp(27px,7vw,38px); margin-top:18px; line-height:1.3; }
  body[data-page] .phero__lead{ font-size:15px; line-height:2; }
  body[data-page] .phero__nav{ gap:8px; }
  body[data-page] .phero__nav a{ padding:9px 12px; font-size:12px; }
}
@media(prefers-reduced-motion:reduce){
  body[data-page] .phero__nav a{ transition:none; }
}

/* 社員インタビューの «Q.» の下のマーカー（style.css 4152 行、色はカードごとの --itv-w）を全体的に薄く（2026-09-23 のご指示）。
   色に白を 6 割混ぜ、線の太さも 62%→68% で細めに。 */
body[data-page="people"] .itv__card[id^="itv0"] .itv__qa dt{
  background:linear-gradient(transparent 68%, color-mix(in srgb, var(--itv-w) 40%, #fff) 68%);
}

/* 募集要項ページの «新卒採用／中途採用» を選ぶ2枚（.rtabs、style.css 3082 行〜）… 正方形をやめて、
   他のページの2枚（.rtabs--link。style.css 4892 行〜）と同じ横長の面にそろえる（2026-09-23 のご指示）。
   style.css には «正方形のまま» と書いてあるが、ここで上書きしている。
   ★大きさも同じに（同日「募集要項だけ小さい」のご指示）。#requirements の中身は 1080px までなので（style.css 3042 行）、
     #entry だけ 1320px まで広げ、2枚の下の募集要項の表などは 1080px のままにしている。
   ★文字の太さは変えない（«新卒採用／中途採用» は 500 のまま。「この細さがちょうどいい」とのご指示）。 */
body[data-page="recruit"] #requirements > #entry{ max-width:min(1320px,100%); }
body[data-page="recruit"] #requirements > #entry > :not(.rtabs){ max-width:1080px; margin-inline:auto; }
body[data-page="recruit"] .rtabs:not(.rtabs--link){
  grid-template-columns:repeat(2,minmax(0,1fr)); max-width:min(1320px,100%); margin-inline:auto;
  gap:clamp(20px,2.6vw,34px); text-align:left;
}
body[data-page="recruit"] .rtabs:not(.rtabs--link) .rtab{
  aspect-ratio:auto; min-height:clamp(280px,26vw,348px);
  align-items:flex-start; justify-content:flex-start; gap:0; text-align:left;
  padding:clamp(32px,3.6vw,50px); border-radius:8px;
  border:1px solid rgba(37,53,77,.14); box-shadow:0 10px 30px -24px rgba(6,38,63,.5);
}
body[data-page="recruit"] .rtabs:not(.rtabs--link) .rtab b{ margin-top:14px; }
body[data-page="recruit"] .rtabs:not(.rtabs--link) .rtab > span:not(.rtab__blob){ margin-top:16px; }
body[data-page="recruit"] .rtabs:not(.rtabs--link) .rtab .rtab__blob{ width:56%; height:auto; aspect-ratio:1; right:-17%; bottom:-52%; }
@media (max-width:768px){
  body[data-page="recruit"] .rtabs:not(.rtabs--link){ grid-template-columns:1fr; gap:14px; }
  body[data-page="recruit"] .rtabs:not(.rtabs--link) .rtab{ min-height:181px; padding:24px; }   /* 181px … 他のページの2枚（矢印の行があるぶん高い）と同じ高さ */
  body[data-page="recruit"] .rtabs:not(.rtabs--link) .rtab b{ margin-top:8px; }
  body[data-page="recruit"] .rtabs:not(.rtabs--link) .rtab > span:not(.rtab__blob){ margin-top:10px; }
}
@media (max-width:560px){
  body[data-page="recruit"] .rtabs:not(.rtabs--link) .rtab{ padding:20px 18px; }
}

/* «新卒採用／中途採用» の2枚の文字を細く（2026-09-23 のご指示）。
   他のページ・トップの2枚（.rtabs--link）の «新卒採用／中途採用» を 700 → 500 に（募集要項ページの 500 と同じ。字間も同じ .08em）。
   英字（NEW GRADUATE／CAREER）と ENTRY は 800／700 → 500。Inter は 600 を読み込んでいないので 500。
   募集要項ページの英字（800）も同じ 500 にそろえた（全社共通の約束で 800 は使わない）。
   ★style.css の «.rtabs--link .rtab b» より強くするため、body[data-page] を頭に付けている。 */
body[data-page] .rtabs--link .rtab b{ font-weight:500; letter-spacing:.08em; }
body[data-page] .rtabs .rtab i,
body[data-page] .rtabs--link .rtab__go{ font-weight:500; }

/* 仕事を知る «施工管理って、何をする仕事？» のカード（.mag__item、style.css 1610 行〜）の色 … 濃い色（#DD6A45 など）を、
   メニューの英字と同じ明るい系の並びにそろえる（2026-09-23 のご指示） */
body[data-page="work"] .mag__item--a{ --mc:#2FC1FF; }   /* 安全管理 */
body[data-page="work"] .mag__item--b{ --mc:#4A9BFF; }   /* 品質管理 */
body[data-page="work"] .mag__item--c{ --mc:#7C86FF; }   /* 工程管理 */
body[data-page="work"] .mag__item--d{ --mc:#AA7BF5; }   /* 原価管理 */
body[data-page="work"] .mag__item--e{ --mc:#F27ACB; }   /* 発注者との打ち合わせ */
body[data-page="work"] .mag__item--f{ --mc:#FF7F9B; }   /* 書類・写真管理 */
body[data-page="work"] .mag__item--g{ --mc:#FF9A62; }   /* ICT施工 */

/* トップの «MOVIE 会社紹介動画» のカード（.vid--feature、top.css 1096 行〜）… 背景色を消す（2026-09-23 のご指示）。
   文字側の水色のもや（.vid__body の radial-gradient）と、カードの白い面の両方。枠線はそのまま。 */
body[data-page="index"] .vid--feature{ background:transparent; }
body[data-page="index"] .vid--feature .vid__body{ background:none; }

/* トップの工事カテゴリ名（.work__cat、top.css 1247 行〜）… 色で塗らず、枠線だけ（2026-09-23 のご指示）。
   枠の色はメニューの英字と同じ明るい並び。★top.css の nth-child の塗り（詳細度 0,4,0）に勝つため :nth-child(n) を付けている。 */
body[data-page="index"] .works .work:nth-child(n) .work__cat{
  background:transparent; border:1.5px solid var(--wc,#2FC1FF); color:var(--rd-ink); padding:7px 18px;
}
body[data-page="index"] .works .work:nth-child(1){ --wc:#2FC1FF; }
body[data-page="index"] .works .work:nth-child(2){ --wc:#4A9BFF; }
body[data-page="index"] .works .work:nth-child(3){ --wc:#7C86FF; }
body[data-page="index"] .works .work:nth-child(4){ --wc:#AA7BF5; }
body[data-page="index"] .works .work:nth-child(5){ --wc:#F27ACB; }
body[data-page="index"] .works .work:nth-child(n) .work__cat--accent{ background:transparent; border-color:#FF9A62; }

/* トップの動画カード … ラベル（MOVIE 会社紹介動画）を大きく・上に置く。「仕事のこと」のマーカー（top.css 1162 行）を薄く（2026-09-23 のご指示） */
body[data-page="index"] .vid--feature .vid__body{ align-self:start; }
body[data-page="index"] .vid--feature .vid__badge{ font-size:16px; padding:9px 19px; }
body[data-page="index"] .vid--feature .vid__badge::before{ width:9px; height:9px; }
body[data-page="index"] .vid--feature .vid__ttl{ font-size:22px; }
body[data-page="index"] .vid--feature .vid__catch{ margin-top:30px; }
body[data-page="index"] .vid__catch em{ background:linear-gradient(transparent 70%, color-mix(in srgb, var(--cyan-p) 40%, #fff) 70%); }
/* 同日のご指示 … MOVIE のラベルは塗らずに枠だけ（工事カテゴリ名 .work__cat と同じ扱い。点は水色のまま）、
   «このページで再生できます（YouTube）» は 12.5px → 16px にして、カードの右側の中央に */
body[data-page="index"] .vid--feature .vid__badge{ background:transparent; border:1.5px solid var(--cyan); color:var(--rd-ink,var(--navy)); }
body[data-page="index"] .vid--feature .vid__badge::before{ background:var(--cyan); }
body[data-page="index"] .vid--feature .vid__cta{ display:flex; justify-content:center; gap:12px; font-size:16px; }
body[data-page="index"] .vid--feature .vid__ctaico{ width:32px; height:32px; }
@media (max-width:620px){
  body[data-page="index"] .vid--feature .vid__cta{ font-size:15px; }
}
/* 同日のご指示 … キャッチ（若手社員2名への／会社紹介インタビュー）をもう少し下へ（30px → 44〜64px）。MOVIE のラベルは動かさない */
body[data-page="index"] .vid--feature .vid__catch{ margin-top:clamp(44px,4.4vw,64px); }
/* 同日のご指示 … 社員寮の地名のバッジ（宮崎市／日向市。top.css の .house__area）は塗らずに、枠と文字だけに色 */
body[data-page="index"] .house__area{ background:transparent; border:1.5px solid var(--blue); color:var(--blue); padding:4px 13px; }

/* «新卒採用／中途採用» の2枚の右下の七角形（.rtab__blob）… 回っているのが分かるように（2026-09-23 のご指示）。
   以前は 18 秒で ±14° 揺れるだけ（style.css／top.css の blobDrift）で、止まって見えた。
   いまは 16 秒で 1 回転し続ける。新卒は右回り、中途は左回り。ホバーの «38° 回して 1.3 倍»（rotate／scale）はそのまま重なる。 */
body[data-page] .rtab__blob{ animation:rtabSpin 16s linear infinite; }
body[data-page] .rtabs .rtab:nth-child(2) .rtab__blob{ animation-direction:reverse; }
@keyframes rtabSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
  body[data-page] .rtab__blob{ animation:none; }
}

/* トップの動画カードの案内 … PC は «左の動画をクリック»、動画が上に来る 760px 以下（top.css）は «上の動画をクリック»（2026-09-23） */
.vid__cta-sp{ display:none; }
@media (max-width:760px){
  .vid__cta-pc{ display:none; }
  .vid__cta-sp{ display:inline; }
}

/* ==========================================================================
   色の見直し（2026-09-23 のご指示 «各ページのカード・文字の色を、ヒーローや背景と親和性の高い色合いに。形は変えず色だけ»）
   ヒーローの色 … 空色 #2FC1FF → 青 #4A9BFF → 藤 #7C86FF → 紫 #AA7BF5 → 桃 #F27ACB → 珊瑚 #FF7F9B → 橙 #FF9A62、紺 #0A2246。
   以前の色は «水色・青緑・黄・オレンジ・若草» 寄り。ここで top.css／style.css の色の変数を置き換えている
   （recruit-design.css はその後に読むので、同じ :root でも後ろが勝つ）。
   ★文字に使う «濃いほう»（-d）は、白地で 3.8 以上のコントラストを取っている（小さなラベルにも使うため）。
   ★元に戻すときは、このまとまり（ここからファイルの末尾まで）を消せば元の色に戻る。
   ========================================================================== */
:root{
  /* --- 共通（top.css と style.css の両方にある名前） --- */
  --navy:#1C2A4A;  --ink:#25354D;                     /* 文字の紺（以前 #06263F の青緑がかった紺） */
  --blue:#3565D2;  --blue-d:#2D55B8;                  /* 見出しの青（以前 #0B6FC4）。藤に少し寄せた青。白地 5.3 */
  --cyan:#2FB8F6;  --cyan-l:#8FD0FB;  --cyan-p:#C9E6FD;   /* アクセントの空色（以前 #00C0F0） */
  --gray:#5E6882;  --gray-l:#A2A9C0;                  /* 本文の灰（以前 #5B7385 の青緑がかった灰） */
  --line:rgba(28,42,74,.13);
  --sky-l:#F3F7FE;

  /* --- style.css（下層ページ） --- */
  --sky:#E6F1FE;  --sky-d:#CFE2FB;
  --deep:#3A63D0; --deep-2:#3154B8;
  --c-aqua:#9ED6FF;  --c-mint:#B3EBE3;  --c-lemon:#FFD9A8;  --c-peach:#FFC2C6;  --c-pink:#F8B8E4;  --c-lilac:#C6C3FF;
  --c-aqua-d:#2F7FD6; --c-mint-d:#1A8C82; --c-lemon-d:#C8691F; --c-peach-d:#D44C70; --c-pink-d:#C94BA8; --c-lilac-d:#6A5FDB;
  --t-1:#F4F7FE;  --t-2:#EDF2FD;  --t-3:#E8EFFD;
  --w-aqua:#BFE2FF; --w-mint:#C8F0EA; --w-lemon:#FFE3C4; --w-peach:#FFD3D6; --w-pink:#FBCDEC; --w-lilac:#D6D4FF;

  /* --- top.css（トップページ） --- */
  --ice:#F4F7FE; --aqua:#9ED6FF; --aqua-d:#3B8FE0; --ink-s:#7684A6;
  --alert:#C8284F; --alert-l:#F9D6E0; --alert-bg:#FFF5F8;   /* 注意書きの赤は赤のまま、少しだけ桃に寄せた */
  --rose:#FBCDEC;  --rose-d:#C94BA8;
  --peach:#FFD3D6; --peach-d:#D44C70;
  --lemon:#FFE3C4; --lemon-d:#C8691F;
  --mint:#C8F0EA;  --mint-d:#1A8C82;
  --lilac:#D6D4FF; --lilac-d:#6A5FDB;
  --sky-base:#E6F1FE;
  --rose-s:#D062B4; --peach-s:#E0647F; --leaf-s:#8A6BE0; --mint-s:#3F8FC8; --lilac-s:#6A70E6; --sky-s:#2E9FD8;
  --happy:#E68ABF;
  --happy-grad:linear-gradient(100deg,#E68ABF 0%,#EE92B8 52%,#F5A0AE 100%);
}
/* トップの --sky は «淡い水色の面»（style.css の --sky とは別の意味）。top.css だけにあるので、トップに限って置き換える */
body[data-page="index"]{ --sky:#C9E6FD; --sky-d:#3B8FE0; }

/* ページごとの小さなアクセント（style.css 110 行〜）… メニューの英字の色の並びにそろえる */
body[data-page="work"]   { --accent:var(--c-lilac); }
body[data-page="people"] { --accent:var(--c-lilac); }
body[data-page="career"] { --accent:var(--c-pink); }
body[data-page="recruit"]{ --accent:var(--c-lemon); }

/* グラフ（style.css の .dash）… 明るさの順番は元のまま守り、色相を 空色→青→藤→紫 に。
   男女構成の2色は «青と橙»（色覚特性があっても見分けられる組み合わせ）のまま、ヒーローの青と橙に */
body[data-page] .dash{
  --bar-track:#EDF2FD; --bar-flat:#6FB2F4;
  --bar-1:#CDEBF7; --bar-2:#A9DCFB; --bar-3:#82C6FA; --bar-4:#62AEF4; --bar-5:#5193EA; --bar-6:#5079DC; --bar-7:#5661C9;
  --seg-a:#4F86E8; --seg-b:#F59A6A;
  --flat-1:#8FCFFB; --flat-2:#A3E3DA; --flat-3:#FFC9A0; --flat-4:#F9A9B6; --flat-5:#EFA8D8; --flat-6:#B9B4F6;
  --pie-1:#5078DC; --pie-2:#5A95EE; --pie-3:#6DB1F6; --pie-4:#8CC9FA; --pie-5:#AEDCFB; --pie-6:#CFEBFD;
}

/* フッター（style.css の .footer／top.css の .foot。会社サイトの色）… 紺と空色〜青に */
body[data-page] .footer,
body[data-page] .foot{
  --f-ink:#34435F; --f-accent:#6FAFF5; --f-accent-d:#4A8BE6; --f-accent-deep:#3A6FD0; --f-line:rgba(52,67,95,.14);
}
/* ドロワー（スマホのメニュー）の見出しとボタン（style.css 788 行〜／top.css 752 行〜。色が直書き） */
body[data-page] .drawer__list a{ color:#34435F; }
body[data-page] .drawer__list a.is-current .drawer__ja{ color:#3A6FD0; }
body[data-page] .drawer__cta{ background:#4A8BE6; }
@media (hover:hover){ body[data-page] .drawer__cta:hover{ background:#3A6FD0; } }

/* «新卒採用／中途採用» の2枚 … 新卒は空色〜青、中途は珊瑚（以前は水色とオレンジ）。文字の色は --c-aqua-d／--c-peach-d から */
body[data-page] .rtabs .rtab:nth-child(1){ --dl:var(--c-aqua);  --dc:var(--c-aqua-d); }
body[data-page] .rtabs .rtab:nth-child(2){ --dl:var(--c-peach); --dc:var(--c-peach-d); }
body[data-page] .rtabs .rtab:nth-child(1) .rtab__blob{ --b0:#F5F9FF; --b1:#E0EDFF; --b2:#B9D6FC; }
body[data-page] .rtabs .rtab:nth-child(2) .rtab__blob{ --b0:#FFF6F8; --b1:#FFE3EA; --b2:#FFC4D1; }

/* トップ CONTENTS の6枚（top.css 1535 行〜）… メニューの英字と同じ並び（DATA 青／WORK 藤／PEOPLE 紫／CAREER 桃／RECRUIT 橙／ENTRY 空色）。
   文字に使うので、メニューの色より一段濃くしてある */
body[data-page="index"] .gate__card:nth-child(1){ --gc:#3F84EA; }
body[data-page="index"] .gate__card:nth-child(2){ --gc:#636CEB; }
body[data-page="index"] .gate__card:nth-child(3){ --gc:#9161E4; }
body[data-page="index"] .gate__card:nth-child(4){ --gc:#D457AE; }
body[data-page="index"] .gate__card:nth-child(5){ --gc:#E6763F; }
body[data-page="index"] .gate__card:nth-child(6){ --gc:#1F9DDB; }
body[data-page="index"] .gate__card:nth-child(1) .gate__blob{ --b0:#F5F9FF; --b1:#E3EEFF; --b2:#C2DAFD; }
body[data-page="index"] .gate__card:nth-child(2) .gate__blob{ --b0:#F7F7FF; --b1:#E6E8FF; --b2:#CACFFD; }
body[data-page="index"] .gate__card:nth-child(3) .gate__blob{ --b0:#FAF6FF; --b1:#EEE5FD; --b2:#D9C8F8; }
body[data-page="index"] .gate__card:nth-child(4) .gate__blob{ --b0:#FFF5FB; --b1:#FCE3F3; --b2:#F6C5E6; }
body[data-page="index"] .gate__card:nth-child(5) .gate__blob{ --b0:#FFF8F3; --b1:#FFE8DA; --b2:#FFCDB0; }
body[data-page="index"] .gate__card:nth-child(6) .gate__blob{ --b0:#F4FBFF; --b1:#DDF1FE; --b2:#B6E1FB; }

/* トップ ICT の6枚のアイコン（top.css 1390 行〜）… ヒーローの7色の並びから */
body[data-page="index"] .ict__card:nth-child(1) .ict__icon::after{ background:#2FB8F6; }
body[data-page="index"] .ict__card:nth-child(2) .ict__icon::after{ background:#4A8BE6; }
body[data-page="index"] .ict__card:nth-child(3) .ict__icon::after{ background:#6A70E6; }
body[data-page="index"] .ict__card:nth-child(4) .ict__icon::after{ background:#F07E6E; }
body[data-page="index"] .ict__card:nth-child(5) .ict__icon::after{ background:#E062B8; }
body[data-page="index"] .ict__card:nth-child(6) .ict__icon::after{ background:#9A68EA; }

/* 人を知る … 4人の色（style.css 4145 行〜）。オレンジ→空色、ミントは青みに、ピンクは桃に寄せた（ラベンダーはそのまま） */
body[data-page="people"] #itv01{ --itv-c:#8CC4F5; --itv-w:#B7DBFF; }
body[data-page="people"] #itv02{ --itv-c:#B2A6EE; --itv-w:#C9BEFF; }
body[data-page="people"] #itv03{ --itv-c:#7ED0C8; --itv-w:#A6E6DF; }
body[data-page="people"] #itv04{ --itv-c:#F2A2D2; --itv-w:#FBC0E4; }
/* 5人目（2026-09-25 追加）… 杏（ヒーローの図形の杏色の並び） */
body[data-page="people"] #itv05{ --itv-c:#F5B07E; --itv-w:#FFD2AE; }

/* 成長を知る «キャリアステップ» の4本の帯（style.css 4106 行〜）… 以前は 水色→ミント→黄→オレンジ→藤。
   ヒーローの並び（空色→藤→紫→桃→珊瑚）で、年数が進むほど暖かい色に */
body[data-page="career"] .step__item[data-step="1"] .step__bar{ background:linear-gradient(135deg,#A9DCFF,#BFC8FF); }
body[data-page="career"] .step__item[data-step="2"] .step__bar{ background:linear-gradient(135deg,#BFC8FF,#D6C4FB); }
body[data-page="career"] .step__item[data-step="3"] .step__bar{ background:linear-gradient(135deg,#D6C4FB,#F7C3E6); }
body[data-page="career"] .step__item[data-step="4"] .step__bar{ background:linear-gradient(135deg,#F7C3E6,#FFC8C4); }

/* 建設業のきほん «道路の断面»（style.css 4658 行〜）… 以前は青緑がかった灰と砂色。濃い順（上＝表層が一番濃い）は元のまま、紺〜藤の並びに。
   路床（もとの地盤）だけは «土» と分かるよう、淡い杏色にしている */
body[data-page="study"] .st-pave__layer--s1{ background:#2F3B63; }
body[data-page="study"] .st-pave__layer--s2{ background:#3F4D7C; }
body[data-page="study"] .st-pave__layer--s3{ background:#56669A; }
body[data-page="study"] .st-pave__layer--s4{ background:#AEBBE4; }
body[data-page="study"] .st-pave__layer--s5{ background:#D3DCF4; }
body[data-page="study"] .st-pave__layer--s6{ background:#F3DCCB; color:#5A4234; }

/* 建設業のきほん «置く技術者は、この表で決まる» の監理技術者の行（style.css 4508 行。以前はレモンの地とオレンジの文字で «例外» を示していた）…
   ほかの行と同じ色にそろえる（2026-09-23 のご指示「監理技術者の行も表の色を他と合わせて」）。
   1列目は --sky-l、2列目は白、3列目（答え）は --t-1 の地に青の文字 */
body[data-page="study"] .st-tbl__row--hi th{ background:var(--sky-l); }
body[data-page="study"] .st-tbl__row--hi td{ background:transparent; }
body[data-page="study"] .st-tbl__row--hi td.st-tbl__ans{ background:var(--t-1); }
body[data-page="study"] .st-tbl__row--hi .st-tbl__ans b{ color:var(--blue); }
/* 同じく «現場に置く技術者» の3枚のうち、監理技術者（2枚目。style.css 4452 行）… オレンジ → 藤色（1枚目は空色、3枚目はミント） */
body[data-page="study"] .st-eng__card:nth-child(2){ --c:var(--c-lilac); --cd:var(--c-lilac-d); }
/* インタビューの小さなカードの番号（style.css 4124 行。以前は桃・黄土・紫）… 桃・珊瑚・紫に */
body[data-page] .itv__minicard:nth-child(1) .itv__no{ color:#D062B4; }
body[data-page] .itv__minicard:nth-child(2) .itv__no{ color:#E0647F; }
body[data-page] .itv__minicard:nth-child(3) .itv__no{ color:#7A68E0; }
/* «未入力» の札（style.css 3550 行。いまは使っている所なし）… 念のため杏色に */
body[data-page] .req__todo{ background:#FFF4EC; border-color:#E8A57C; color:#7A4A2A; }

/* 成長を知る «宮崎県産業開発青年隊» の2列（style.css 2080 行〜）… 2026-09-23 のご指示。
   ・左の写真カードの上端を «どんなところか» の見出しにそろえる（右の列の上の余白 24〜40px をなくす）
   ・左のカードの下の空白を減らす … 左のカードは «見出し＋5枚のカード» の高さまでにし、注記（※）はその下の行へ。
     以前は右の列（注記まで）と同じ高さに伸び、さらに5枚のカードの行も余りを受け取って、下が空いていた
   ★右の列の入れ物（.sntai__facts）を display:contents にして、見出し・5枚・注記を .sntai のグリッドに直接並べている。
     左のカードは 1〜2 行目、見出しは 1 行目、5枚は 2 行目、注記は 3 行目。
     （最初は注記を absolute ではみ出させたが、960px 前後で注記が折り返して下の «派遣中の費用と給与» に重なったのでやめた）
   ★横並び（901px 以上）のときだけ。1列になる 900px 以下は元のまま */
@media (min-width:901px){
  body[data-page="career"] .sntai{ grid-template-rows:auto 1fr auto; row-gap:0; }
  body[data-page="career"] .sntai__site{ grid-column:1; grid-row:1 / 4; }   /* 下端は右の注記（※）の下端まで（同日「注意書きのところまで伸ばして」のご指示。以前は 1 / 3 で5枚のカードの下端まで） */
  body[data-page="career"] .sntai__facts{ display:contents; }
  body[data-page="career"] .sntai__head{ grid-column:2; grid-row:1; margin:0 clamp(24px,3vw,40px) 6px; align-self:start; }
  body[data-page="career"] .fact{ grid-column:2; grid-row:2; margin:12px clamp(24px,3vw,40px) 0; flex:none; grid-auto-rows:auto; align-content:start; }
  body[data-page="career"] .sntai__note{ grid-column:2; grid-row:3; margin:18px clamp(24px,3vw,40px) 0; }
}
/* 見出し «どんなところか» を大きく（14px → 18〜22px）。下線の色は新しい青に */
body[data-page="career"] .sntai__head{ font-size:clamp(18px,1.6vw,22px); letter-spacing:.1em; line-height:1.4; border-bottom-color:rgba(53,101,210,.24); }
/* 番号 … 01〜05 → 1〜5（HTML）、丸は塗らずに枠と数字だけ。色はカードごとの «濃いほう»。
   成長を知る（青年隊）と建設業のきほん（建設業という産業の4枚）の両方（同日のご指示で全ページに） */
body[data-page] .fact__card:nth-child(1){ --cd:var(--c-aqua-d); }
body[data-page] .fact__card:nth-child(2){ --cd:var(--c-mint-d); }
body[data-page] .fact__card:nth-child(3){ --cd:var(--c-lemon-d); }
body[data-page] .fact__card:nth-child(4){ --cd:var(--c-peach-d); }
body[data-page] .fact__card:nth-child(5){ --cd:var(--c-lilac-d); }
body[data-page] .fact__no{ background:transparent; border:1.5px solid var(--cd); color:var(--cd); font-size:14px; font-weight:700; }

/* 建設業のきほん «公告から引渡しまで» の日数の札（10日 など。style.css 4581 行。以前は淡い黄の塗り）… 塗らずに枠と文字だけ（2026-09-23 のご指示） */
body[data-page="study"] .st-rail li[data-gap]::before{ background:transparent; border:1.5px solid var(--c-lemon-d); color:var(--c-lemon-d); padding:2px 9px; }
/* 建設業のきほん «ハインリッヒの法則» のカード … 上端はそのまま、下端を右の «熱中症対策» のカードの下端にそろえる（同日のご指示）。
   右の列（見出し＋4枚）の高さまで伸ばす。2列のとき（861px 以上）だけ */
@media (min-width:861px){
  body[data-page="study"] .st-two > .st-fig{ align-self:stretch; }
}

/* 建設業のきほん «土木工事の流れ。» の下の札 «道路舗装工事の例»（2026-09-23 のご指示「道路工事の例だともっと大きく、目立つように」）。
   ほかの札と同じく塗らずに、青の枠と文字だけ。本文（16px）より大きく */
body[data-page="study"] .st-ex{
  display:inline-flex; align-items:center; gap:10px; margin:22px 0 4px;
  padding:9px 22px 9px 18px; border:2px solid var(--blue); border-radius:999px;
  font-size:clamp(18px,1.7vw,22px); font-weight:600; letter-spacing:.06em; line-height:1.3; color:var(--blue);
}
body[data-page="study"] .st-ex::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--blue); flex:none; }

/* 人を知る 甲斐さんの «書類に記入» の写真（kai-desk）… スマホの横長の枠で頭が切れないよう、上寄りで切る（2026-09-23。何枚目に置いても効くよう、画像名で指定） */
body[data-page="people"] #itv02 .itv__ph[style*="kai-desk"]{ background-position:50% 20%; }

/* 人を知る T.さん（#itv01）… 2026-09-25 帯を4本に（写真4枚）。
   スマホ（1列）では写真を各帯の文章の後ろに置き、写真が2枚続かないようにする（文章→写真→文章→写真…）。 */
/* 正面の写真（portrait-v3）は、頭の上が切れないよう上端から見せる（2026-09-25。元の写真は頭の上の空きが無いので、
   壁を 12.5% 足した版にした。版元 tsukasa/background_blur/…_v3_headroom.png、道具 tools/photo/extend_top.py） */
body[data-page="people"] #itv01 .itv__ph[style*="itv01-portrait-v3"]{ background-position:50% 0%; }
/* ノートPCの写真（itv01-desk-v2。帯4・正方形に近い枠）も、頭が切れないよう上端から */
body[data-page="people"] #itv01 .itv__ph[style*="itv01-desk"]{ background-position:50% 0%; }
@media (max-width:900px){
  body[data-page="people"] #itv01 .itv__band > .itv__ph{ order:1; }
  body[data-page="people"] #itv01 .itv__ph[style*="itv01-portrait-v3"]{ background-position:50% 8%; }
  /* 帯3のノートPCの写真（itv01-desk）は、横長の枠で顔と手元が両方入る高さに */
  body[data-page="people"] #itv01 .itv__ph[style*="itv01-desk"]{ background-position:50% 8%; }
}

/* 人を知る INTERVIEW 05（#itv05）… 2026-09-25 追加。写真がまだ無いので «写真準備中» の仮の枠（.itv__ph--wait）。
   写真が届いたら HTML 側で普通の .itv__ph（background-image）に差し替えれば、ここは使われなくなる。 */
body[data-page="people"] .itv__ph--wait{
  display:grid; place-items:center;
  background:linear-gradient(150deg, color-mix(in srgb, var(--itv-w) 38%, #fff), color-mix(in srgb, var(--itv-w) 70%, #fff));
  border:2px dashed color-mix(in srgb, var(--itv-c) 70%, #fff);
}
body[data-page="people"] .itv__ph--wait span{ font-size:15px; font-weight:500; letter-spacing:.14em; color:#5E6882; }
@media (max-width:900px){
  /* スマホでは T.さんと同じく、写真を各帯の文章の後ろに */
  body[data-page="people"] #itv05 .itv__band > .itv__ph{ order:1; }
}

/* 人を知る スマホでの写真の寄せ位置（2026-09-28 ご指示「スマホの写真の位置は直していい」）
   ------------------------------------------------------------------------------------
   スマホ（900px 以下）は写真枠が 4:3 の横長、元の写真は 3:4 の縦長なので、
   cover で切ると写真の高さの約 44% が上下どちらかに捨てられる。
   既定は style.css の «.itv__ph{background-position:center 22%}» と
   «#itv03 .itv__ph,#itv04 .itv__ph{center 6%}»。そこから外れる5枚だけをここで指定する
   （何枚目に置いても効くよう画像名で指定。kai-desk・itv01-* と同じ書き方）。
   ★表彰状（.itv__ph--award）は詳細度の問題だったので style.css 側で直してある（#itv04 を足して 30%）。
   ★すべて 900px 以下。PC の見え方は変えていない。 */
@media (max-width:900px){
  /* --- 2026-09-28（夕2）ユーザーが tools/photo-tune で目で決めた値（9枚を変更） --- */
  /* INTERVIEW 01　土木部・田牧さん */
  body[data-page="people"] #itv01 .itv__ph[style*="itv01-portrait-v3"]{ background-position:0% 24.5%; background-size:106.5% auto; }
  body[data-page="people"] #itv01 .itv__ph[style*="itv03-main"]{ background-position:50% 10%; }
  body[data-page="people"] #itv01 .itv__ph[style*="itv01-survey"]{ background-position:50% 40.5%; }
  /* INTERVIEW 02　土木部 課長補佐・甲斐さん */
  body[data-page="people"] #itv02 .itv__ph[style*="kai-main-remastered"]{ background-position:50% 14%; }
  body[data-page="people"] #itv02 .itv__ph[style*="kai-desk"]{ background-position:50% 36.5%; }
  body[data-page="people"] #itv02 .itv__ph[style*="kai-sub1"]{ background-position:0% 11%; background-size:103.5% auto; }
  /* INTERVIEW 03　AX推進事業部 部長・チュチュさん */
  body[data-page="people"] #itv03 .itv__ph[style*="chuchu-main"]{ background-position:50% 20%; }
  body[data-page="people"] #itv03 .itv__ph[style*="chuchu-sub3"]{ background-position:50% 47.5%; }
  /* INTERVIEW 04　総務部・吉田さん */
  body[data-page="people"] #itv04 .itv__ph[style*="yoshida-sub2"]{ background-position:45.5% 8%; }
  body[data-page="people"] #itv04 .itv__ph[style*="yoshida-main"]{ background-position:50% 31%; }
  body[data-page="people"] #itv04 .itv__ph[style*="yoshida-sub1"]{ background-position:50% 33%; }
  /* ★横（1つ目の%）は、拡大（background-size）を100%超にした写真でだけ効く。
     田牧さん portrait-v3（106.5%）と甲斐さん kai-sub1（103.5%）の2枚がそれ。
     拡大していない写真の横の指定は、いまは見た目に出ない。 */
}