/*
 * slab.css — 新デザイン共通スタイルシート（1ファイルに統一）
 * 読み込み: 新デザインの standalone テンプレートすべて（front-page / service / about /
 *           news(parts/news-page) / recruit / sLab-college / contact / sendsuccess /
 *           privacy / security / divercity）。PHP 側は slab_css_url('slab')。
 *
 * 目次
 *   1. トークン・リセット
 *   2. 共通部品: ヘッダー/ナビ・モバイルメニュー・ボタン・CTA帯・フッター
 *   3. 下層ページ共通: pagehero / section / .section-head / .eyebrow / .pillars
 *   4. トップ（front-page.php）          … body.home でスコープする上書きあり
 *   5. サービス（service.php）
 *   6. 会社概要（about.php）
 *   7. ニュース一覧・カテゴリ（parts/news-page.php）
 *   8. 採用（recruit.php）
 *   9. sLab College（sLab-college.php）
 *  10. お問い合わせ・送信完了（contact.php / sendsuccess.php）
 *  11. ポリシー（privacy.php / security.php / divercity.php）
 *
 * ルール: ページ固有のクラスはそのページの節に、2ページ以上で使うものは 2〜3 節に置く。
 *        旧デザイン（header*.php 系）は css/legacy.css、混ぜない。
 */

/* =====================================================================
   1. トークン・リセット
   ===================================================================== */
:root{
  --ink:#122729;
  --ink-soft:#1D3B3E;
  --paper:#EEF6F6;
  --paper-soft:#F9FCFC;
  --gold:#1F7377;
  --gold-bright:#5FC4C7;
  --vermilion:#E2793D;
  --line:rgba(18,39,41,0.12);
  --line-on-dark:rgba(238,246,246,0.14);
  --font-display:"Shippori Mincho", serif;
  --font-body:"Zen Kaku Gothic New", sans-serif;
  --font-mono:"Roboto Mono", monospace;
}
/* ---- クリティカルフォント（自己ホスト・サブセット） ----
   ナビ/ヒーロー/h1/統計帯など初回描画で見える317グリフだけを theme の fonts/ に自己ホストし
   parts/site-head.php で preload → first paint 時点で書体が確定し、リロード/遷移毎の swap 再描画
   （「フォントサイズが変わって見える」「画面が微妙にずれる」）を解消する（2026-08-30 screencast 実測）。
   ここに無いグリフは従来どおり Google Fonts から streaming（後勝ちのためこの宣言は slab-fonts の後で読まれる slab.css に置く）。
   生成: fontTools.subset（元: google/fonts の OFL ライセンス TTF。SIL OFL 1.1 はサブセット再配布を許諾）。
   glyphs 追加時は scratchpad の collect-glyphs.js → fontTools.subset で再生成 */
@font-face{
  font-family:"Zen Kaku Gothic New";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/zen-kaku-400-critical.woff2") format("woff2");
  unicode-range:U+0025,U+002B-002E,U+0030-0039,U+0040-0041,U+0044-0046,U+0048-0049,U+004B-004F,U+0052-0056,U+0059,U+0061-0063,U+0066,U+0069-006A,U+006C,U+006E-0070,U+0072-0073,U+2015,U+2192,U+2713,U+3005,U+300C-300D,U+3042,U+3044,U+3046,U+3048,U+304A-304F,U+3051,U+3053-3057,U+3059,U+305B,U+305F-3061,U+3064,U+3066-3068,U+306A-306B,U+306E-3070,U+3078-3079,U+307E-307F,U+3081-3082,U+3084,U+3088-308C,U+308F,U+3092-3093,U+30A2-30A4,U+30A7-30A9,U+30AD,U+30AF-30B0,U+30B5,U+30B7-30B9,U+30BB,U+30C0-30C1,U+30C3,U+30C6,U+30C8,U+30CA-30CB,U+30CE,U+30D0,U+30D3,U+30D5,U+30D7,U+30DA-30DC,U+30DE,U+30E0-30E1,U+30E3,U+30E5,U+30E7,U+30E9-30EB,U+30ED,U+30F3,U+30FB-30FC,U+4E0A-4E0B,U+4E21,U+4E86,U+4E8B,U+4EBA,U+4ECA,U+4ED8,U+4EE5,U+4EF2,U+4F01,U+4F1A,U+4F34,U+4F9B,U+4FA1,U+4FC3,U+4FDD,U+4FE1,U+4FEE,U+500B,U+5024,U+5145,U+5168,U+5185,U+51FA,U+524A,U+529B,U+52D5,U+52DF,U+53D6-53D7,U+53EF,U+5408,U+5411,U+5468,U+54C1,U+54E1,U+554F,U+5668,U+571F,U+57FA,U+5831,U+5834,U+5883,U+591A,U+5922,U+5927,U+5973,U+5B8C,U+5B9A,U+5B9F,U+5BA2-5BA3,U+5BB9,U+5C02,U+5C0E,U+5DF1,U+5E73-5E74,U+5F0F,U+5F15,U+5F53,U+5F85,U+5FDC,U+6025,U+6027,U+60A9,U+60C5,U+616E,U+6210,U+623B,U+624D,U+6271,U+6298,U+62C5,U+6301,U+6307,U+63A1-63A2,U+63D0,U+652F,U+6570,U+65B9,U+6700,U+672A,U+672C,U+6750,U+682A,U+696D,U+6982,U+69D8,U+6B66,U+6BD4,U+6C7A,U+6CE8,U+6D3B,U+7279,U+72EC,U+732E,U+7387,U+73FE,U+74B0,U+7523,U+7528,U+767A,U+76EE,U+76F8,U+77E5,U+7814,U+78BA,U+793E,U+79C1,U+79FB,U+7A2E,U+7ACB,U+7B49,U+7BC9,U+7D44,U+7D4C,U+7D61,U+7DAD,U+7E3E,U+7E54,U+7F72,U+8003,U+8005,U+8077,U+80B2,U+80FD,U+81EA,U+826F,U+884C,U+88FD,U+8981,U+898B,U+89E3,U+8A00,U+8A2D,U+8A71,U+8A8D,U+8AA0,U+8AB2,U+8AC7,U+8B58,U+8B77,U+8CA1-8CA2,U+8CC7,U+8CEA,U+8D70,U+8E8D,U+8EE2,U+8F2A,U+8FD4,U+9001,U+9023,U+9032,U+9053,U+9055,U+9060,U+90E8,U+91DD,U+9577,U+9580,U+958B,U+9593,U+95A2,U+9650,U+9664,U+96C6,U+96FB,U+9762,U+9818,U+984C,U+98A8,U+9A13,U+FF08-FF09,U+FF0F;
}
@font-face{
  font-family:"Zen Kaku Gothic New";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/zen-kaku-700-critical.woff2") format("woff2");
  unicode-range:U+0025,U+002B-002E,U+0030-0039,U+0040-0041,U+0044-0046,U+0048-0049,U+004B-004F,U+0052-0056,U+0059,U+0061-0063,U+0066,U+0069-006A,U+006C,U+006E-0070,U+0072-0073,U+2015,U+2192,U+2713,U+3005,U+300C-300D,U+3042,U+3044,U+3046,U+3048,U+304A-304F,U+3051,U+3053-3057,U+3059,U+305B,U+305F-3061,U+3064,U+3066-3068,U+306A-306B,U+306E-3070,U+3078-3079,U+307E-307F,U+3081-3082,U+3084,U+3088-308C,U+308F,U+3092-3093,U+30A2-30A4,U+30A7-30A9,U+30AD,U+30AF-30B0,U+30B5,U+30B7-30B9,U+30BB,U+30C0-30C1,U+30C3,U+30C6,U+30C8,U+30CA-30CB,U+30CE,U+30D0,U+30D3,U+30D5,U+30D7,U+30DA-30DC,U+30DE,U+30E0-30E1,U+30E3,U+30E5,U+30E7,U+30E9-30EB,U+30ED,U+30F3,U+30FB-30FC,U+4E0A-4E0B,U+4E21,U+4E86,U+4E8B,U+4EBA,U+4ECA,U+4ED8,U+4EE5,U+4EF2,U+4F01,U+4F1A,U+4F34,U+4F9B,U+4FA1,U+4FC3,U+4FDD,U+4FE1,U+4FEE,U+500B,U+5024,U+5145,U+5168,U+5185,U+51FA,U+524A,U+529B,U+52D5,U+52DF,U+53D6-53D7,U+53EF,U+5408,U+5411,U+5468,U+54C1,U+54E1,U+554F,U+5668,U+571F,U+57FA,U+5831,U+5834,U+5883,U+591A,U+5922,U+5927,U+5973,U+5B8C,U+5B9A,U+5B9F,U+5BA2-5BA3,U+5BB9,U+5C02,U+5C0E,U+5DF1,U+5E73-5E74,U+5F0F,U+5F15,U+5F53,U+5F85,U+5FDC,U+6025,U+6027,U+60A9,U+60C5,U+616E,U+6210,U+623B,U+624D,U+6271,U+6298,U+62C5,U+6301,U+6307,U+63A1-63A2,U+63D0,U+652F,U+6570,U+65B9,U+6700,U+672A,U+672C,U+6750,U+682A,U+696D,U+6982,U+69D8,U+6B66,U+6BD4,U+6C7A,U+6CE8,U+6D3B,U+7279,U+72EC,U+732E,U+7387,U+73FE,U+74B0,U+7523,U+7528,U+767A,U+76EE,U+76F8,U+77E5,U+7814,U+78BA,U+793E,U+79C1,U+79FB,U+7A2E,U+7ACB,U+7B49,U+7BC9,U+7D44,U+7D4C,U+7D61,U+7DAD,U+7E3E,U+7E54,U+7F72,U+8003,U+8005,U+8077,U+80B2,U+80FD,U+81EA,U+826F,U+884C,U+88FD,U+8981,U+898B,U+89E3,U+8A00,U+8A2D,U+8A71,U+8A8D,U+8AA0,U+8AB2,U+8AC7,U+8B58,U+8B77,U+8CA1-8CA2,U+8CC7,U+8CEA,U+8D70,U+8E8D,U+8EE2,U+8F2A,U+8FD4,U+9001,U+9023,U+9032,U+9053,U+9055,U+9060,U+90E8,U+91DD,U+9577,U+9580,U+958B,U+9593,U+95A2,U+9650,U+9664,U+96C6,U+96FB,U+9762,U+9818,U+984C,U+98A8,U+9A13,U+FF08-FF09,U+FF0F;
}
@font-face{
  font-family:"Shippori Mincho";font-style:normal;font-weight:800;font-display:swap;
  src:url("../fonts/shippori-800-critical.woff2") format("woff2");
  unicode-range:U+0025,U+002B-002E,U+0030-0039,U+0040-0041,U+0044-0046,U+0048-0049,U+004B-004F,U+0052-0056,U+0059,U+0061-0063,U+0066,U+0069-006A,U+006C,U+006E-0070,U+0072-0073,U+2015,U+2192,U+2713,U+3005,U+300C-300D,U+3042,U+3044,U+3046,U+3048,U+304A-304F,U+3051,U+3053-3057,U+3059,U+305B,U+305F-3061,U+3064,U+3066-3068,U+306A-306B,U+306E-3070,U+3078-3079,U+307E-307F,U+3081-3082,U+3084,U+3088-308C,U+308F,U+3092-3093,U+30A2-30A4,U+30A7-30A9,U+30AD,U+30AF-30B0,U+30B5,U+30B7-30B9,U+30BB,U+30C0-30C1,U+30C3,U+30C6,U+30C8,U+30CA-30CB,U+30CE,U+30D0,U+30D3,U+30D5,U+30D7,U+30DA-30DC,U+30DE,U+30E0-30E1,U+30E3,U+30E5,U+30E7,U+30E9-30EB,U+30ED,U+30F3,U+30FB-30FC,U+4E0A-4E0B,U+4E21,U+4E86,U+4E8B,U+4EBA,U+4ECA,U+4ED8,U+4EE5,U+4EF2,U+4F01,U+4F1A,U+4F34,U+4F9B,U+4FA1,U+4FC3,U+4FDD,U+4FE1,U+4FEE,U+500B,U+5024,U+5145,U+5168,U+5185,U+51FA,U+524A,U+529B,U+52D5,U+52DF,U+53D6-53D7,U+53EF,U+5408,U+5411,U+5468,U+54C1,U+54E1,U+554F,U+5668,U+571F,U+57FA,U+5831,U+5834,U+5883,U+591A,U+5922,U+5927,U+5973,U+5B8C,U+5B9A,U+5B9F,U+5BA2-5BA3,U+5BB9,U+5C02,U+5C0E,U+5DF1,U+5E73-5E74,U+5F0F,U+5F15,U+5F53,U+5F85,U+5FDC,U+6025,U+6027,U+60A9,U+60C5,U+616E,U+6210,U+623B,U+624D,U+6271,U+6298,U+62C5,U+6301,U+6307,U+63A1-63A2,U+63D0,U+652F,U+6570,U+65B9,U+6700,U+672A,U+672C,U+6750,U+682A,U+696D,U+6982,U+69D8,U+6B66,U+6BD4,U+6C7A,U+6CE8,U+6D3B,U+7279,U+72EC,U+732E,U+7387,U+73FE,U+74B0,U+7523,U+7528,U+767A,U+76EE,U+76F8,U+77E5,U+7814,U+78BA,U+793E,U+79C1,U+79FB,U+7A2E,U+7ACB,U+7B49,U+7BC9,U+7D44,U+7D4C,U+7D61,U+7DAD,U+7E3E,U+7E54,U+7F72,U+8003,U+8005,U+8077,U+80B2,U+80FD,U+81EA,U+826F,U+884C,U+88FD,U+8981,U+898B,U+89E3,U+8A00,U+8A2D,U+8A71,U+8A8D,U+8AA0,U+8AB2,U+8AC7,U+8B58,U+8B77,U+8CA1-8CA2,U+8CC7,U+8CEA,U+8D70,U+8E8D,U+8EE2,U+8F2A,U+8FD4,U+9001,U+9023,U+9032,U+9053,U+9055,U+9060,U+90E8,U+91DD,U+9577,U+9580,U+958B,U+9593,U+95A2,U+9650,U+9664,U+96C6,U+96FB,U+9762,U+9818,U+984C,U+98A8,U+9A13,U+FF08-FF09,U+FF0F;
}
/* Roboto Mono（パンくず・眉ラベル・統計数字・スローガン英字などの mono 系）: Latin 全域を自己ホスト。
   weight 700 の指定（.eyebrow 等）は 600 に解決される。和文グリフは mono に無いので従来どおり system フォールバックで安定 */
@font-face{
  font-family:"Roboto Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/roboto-mono-400-critical.woff2") format("woff2");
  unicode-range:U+0020-007E,U+2015,U+2192,U+2713,U+FF0F;
}
@font-face{
  font-family:"Roboto Mono";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/roboto-mono-600-critical.woff2") format("woff2");
  unicode-range:U+0020-007E,U+2015,U+2192,U+2713,U+FF0F;
}
/* 画面幅に比例して全体をスケールする（Mac の「デフォルト」解像度でも「スペースを拡大」時と同じ比率で見せる）。
   slab.css の寸法は rem 基準（1rem = 16px 換算で px から変換）。1783px 以上は 16px（従来どおり）、1025〜1783px は幅に比例して縮小、
   1024px 以下は 16px 固定（タブレット・スマホ用の指定がそのまま効く）。境界線・罫線（1〜2px）は px のまま */
html{font-size:16px;}
@media (min-width:921px){ html{font-size:clamp(12.8px,0.8974vw,16px);} } /* 比率スケールはハンバーガー境界(920px)から: サイズ切替がレイアウト切替と同時にだけ起きる。12.8px は可読性フロア、1783px で 16px */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;scrollbar-gutter:stable;} /* gutter: クラシックスクロールバー環境（マウス接続 Mac/Windows）で、読込中にバーが出現して全体が8px横ズレするのを防ぐ（overlay 環境では無効果） */
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:73.75rem;margin:0 auto;padding:0 2rem;}
.ph{display:inline-block;} /* 文節ラッパー: 和文を単語の途中で折り返させず、文節の境目でだけ改行させる */
/* 詳細段落（カード本文・箇条書き・定義リスト）は通常の折り返しにする: 狭い列で 1 文節 1 行にすると短い行が量産されるため。
   「1 文節 1 行」はヒーロー／ページヒーロー／セクション見出し直下のリード／CTA 帯／トップ 3 事業カードの短文だけに限定 */
p .ph, li .ph, dd .ph{display:inline;}
.hero p .ph, .pagehero p .ph, .section-head p .ph, .ctaband p .ph, .svc p .ph, .thanks > p .ph{display:inline-block;}
/* スマホ(〜30rem)の本文は 1 行 17〜19 字しかなく、文節ごとの改行だと「…会社を目／指す」のように行末 1〜2 字だけの孤立や
   大量の短い行が生じるため、p / li 内の文節は通常の折り返しに戻す（見出しの文節改行は維持） */
@media (max-width:480px){
  p .ph,li .ph,dd .ph,blockquote .ph{display:inline;}
  .hero p .ph,.pagehero p .ph,.ctaband p .ph,.thanks > p .ph{display:inline-block;} /* ヒーロー/CTA 帯・送信完了リードの短い文は 1 文節 1 行のデザインを維持（文字サイズは各定義側で 1.0875rem に落とす） */
}
h1,h2,h3{word-break:auto-phrase;overflow-wrap:anywhere;} /* Chrome 119+: 和文見出しを文節単位で折り返す（非対応ブラウザは通常の折り返し＝.ph で補う）。
   overflow-wrap:anywhere は「1文節が行幅より長い」場合の保険（flex 子の min-content が文節幅になって横はみ出しするのを防ぐ） */
@supports (overflow-x: clip){ html,body{overflow-x:clip;} }
@media (prefers-reduced-motion: reduce){ *{transition:none !important;} }

/* =====================================================================
   2. 共通部品
   ===================================================================== */
/* ---------- Header / Nav ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(237,238,242,0.9);-webkit-backdrop-filter:blur(0.5rem);backdrop-filter:blur(0.5rem);border-bottom:1px solid var(--line);transition:transform .38s cubic-bezier(.32,.72,.28,1), box-shadow .38s ease;}
/* スマートヘッダー: 下スクロールで隠し上スクロールで出す（class 付与は parts/site-header.php のインラインscript）。キーボード操作時は隠さない */
header.site.nav-hidden{transform:translateY(-102%);}
header.site:focus-within{transform:none;}
header.site.scrolled{box-shadow:0 0.375rem 1.25rem rgba(18,36,41,.07);}
@media (prefers-reduced-motion:reduce){ header.site{transition:none;} }
nav.main{display:flex;align-items:center;justify-content:space-between;gap:1.75rem;padding:1rem 2rem;}
/* ロゴは全ページ・全幅で同じ高さ（3.75rem）。footer も同じ値で揃える。 */
.logo{font-family:var(--font-display);font-weight:800;font-size:1.65rem;letter-spacing:.04em;display:flex;align-items:center;gap:0.5rem;flex-shrink:0;}
.logo a{display:block;}
.logo small{font-family:var(--font-mono);font-size:0.825rem;font-weight:400;color:var(--gold);letter-spacing:.1em;}
.logo img{height:4.5rem;width:auto;display:block;} /* ヘッダー120%拡大（2026-08-30）: 72px。≤920px は従来の 60px */
/* ナビ: ロゴと CTA の間を使って中央寄せ。間隔は画面幅に応じて 22〜2.5rem で伸縮、文字は 1rem/600 で揃える。 */
.navlinks{display:flex;flex:1 1 auto;justify-content:flex-end;align-items:center;gap:clamp(1.5rem,2.6vw,2.5rem);font-size:1.215rem;font-weight:600;letter-spacing:.04em;white-space:nowrap;}
.navlinks::after{content:"";flex:0 0 1px;height:1.375em;background:var(--line);} /* リンク群とCTAの間のヘアライン区切り */
.navlinks a{position:relative;padding:0.375rem 0;line-height:1;color:var(--ink-soft);transition:color .2s ease;}
.navlinks a:hover,.navlinks a:focus-visible,.navlinks a.active{color:var(--gold);}
.navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:-0.25rem;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;}
.navlinks a:hover::after,.navlinks a:focus-visible::after,.navlinks a.active::after{transform:scaleX(1);}
.navlinks a:focus-visible,.btn:focus-visible{outline:2px solid var(--gold);outline-offset:0.1875rem;}
.navcta{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:1.17rem;font-weight:700;letter-spacing:.03em;border:1px solid var(--ink);padding:calc(0.75rem - 0.05em) 1.5rem calc(0.75rem + 0.05em);border-radius:2px;transition:background .2s, color .2s;} /* 幾何学中央(flex+line-height:1+同値パディング)基準＋Zen Kaku のインク下沈み実測 +0.05em を padding 斜め補正で相殺（2026-08-30 ユーザー承認・Chrome canvas 実測基準。.btn 系/.nf-pill/.chat-chip も同様） */
.navcta:hover{background:var(--ink);color:var(--paper);}
/* ページ到着直後（html.nav-arrive、site-header の script が 400ms で外す）は hover の塗りを
   アニメさせず初回描画と同時に適用 — クリック遷移のたびにカーソル直下でボタンが「動く」のを防ぐ */
.nav-arrive .navcta, .nav-arrive .navlinks a, .nav-arrive .navlinks a::after{transition:none;}

/* ---------- ページローディング（全リソース読み込み完了まで本文を覆う） ----------
   html.is-loading は parts/site-head.php の冒頭 script が付与（JS 無効なら付かない＝オーバーレイ非表示）。
   解除は parts/site-footer.php の script（window load + document.fonts.ready、3s フェイルセーフ、
   250ms 未満の高速ロードはフェード無しで即時除去）。z-index はチャット(90)より上 */
.is-loading{overflow:hidden;}
#slabLoading{display:none;position:fixed;inset:0;z-index:9999;background:var(--paper);align-items:center;justify-content:center;opacity:1;transition:opacity .35s ease;}
.is-loading #slabLoading{display:flex;}
#slabLoading.done{opacity:0;pointer-events:none;}
#slabLoading .ld-mark{position:relative;width:5.5rem;height:5.5rem;display:flex;align-items:center;justify-content:center;}
#slabLoading .ld-ring{position:absolute;inset:0;border-radius:50%;border:3px solid var(--line);border-top-color:var(--gold-bright);animation:slab-spin .9s linear infinite;}
#slabLoading img{width:2.875rem;height:2.875rem;}
@keyframes slab-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){ #slabLoading .ld-ring{animation:none;border-top-color:var(--gold-bright);} }
@media (max-width:920px){ .navlinks{display:none;} nav.main > .navcta{margin-left:auto;font-size:0.975rem;padding:0.625rem 1.25rem;} .logo img{height:3.75rem;} }

/* ---------- Mobile menu ---------- */
.menu-toggle{display:none;flex-direction:column;justify-content:center;gap:0.3125rem;width:2.25rem;height:2.25rem;border:none;background:none;cursor:pointer;padding:0;flex-shrink:0;}
.menu-toggle span{display:block;width:100%;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease, opacity .25s ease;}
.menu-toggle.open span:nth-child(1){transform:translateY(0.4375rem) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-0.4375rem) rotate(-45deg);}
.mobile-nav{display:none;flex-direction:column;background:var(--paper);border-bottom:1px solid var(--line);padding:0.375rem 2rem 1.375rem;max-height:calc(100vh - 5.75rem);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
/* モバイルブラウザの URL バーで 100vh が実表示より大きくなり、パネル下端（お問い合わせボタン）が
   画面外に切られるのを防ぐ: 実際に見えている高さ dvh を基準にする */
@supports (height:100dvh){ .mobile-nav{max-height:calc(100dvh - 5.75rem);} }
.mobile-nav a{padding:0.9375rem 0;border-bottom:1px solid var(--line);font-size:1.1625rem;font-weight:500;}
.mobile-nav a.active{color:var(--gold);}
.mobile-nav a:last-of-type{border-bottom:none;}
.mobile-nav .navcta{margin-top:1rem;text-align:center;display:block;}
/* 上の :last-of-type（区切り線消し）が最後の <a>＝お問い合わせボタンにも効いて
   枠の下辺が消えるため、CTA だけ明示的に下辺を戻す（詳細度と記述順で勝たせる） */
.mobile-nav a.navcta{border-bottom:1px solid var(--ink);}
/* 高さの低い画面では項目を詰めて「お問い合わせ」ボタンまで切らずに収める */
@media (max-height:600px){
  .mobile-nav a{padding:0.625rem 0;font-size:1.05rem;}
  .mobile-nav .navcta{margin-top:0.75rem;}
}
@media (max-width:920px){
  .menu-toggle{display:flex;}
  .mobile-nav.open{display:flex;}
}
@media (max-width:480px){
  /* 余白は固定値ではなく画面幅比例（5vw ≈ 390px で 19.5px、320px で 16px） */
  .wrap{padding:0 5vw;}
  nav.main{padding-left:5vw;padding-right:5vw;gap:0.875rem;}
  .mobile-nav{padding-left:5vw;padding-right:5vw;}
  nav.main > .navcta{padding:0.5rem 0.875rem;font-size:0.9rem;}
}
/* 〜22.5rem（iPhone SE 初代・小型 Android）: ロゴ 3.75rem + CTA + ハンバーガーが 20rem に収まらず横スクロールが出るため縮める */
@media (max-width:360px){
  /* 左右余白は 5vw のまま連続的に縮む。ここではロゴと CTA のサイズだけ調整 */
  nav.main{gap:0.625rem;}
  .logo img{height:3rem;}
  nav.main > .navcta{padding:0.4375rem 0.625rem;font-size:0.8438rem;}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;line-height:1;gap:0.625rem;font-size:1.1625rem;font-weight:700;padding:calc(0.9375rem - 0.05em) 1.625rem calc(0.9375rem + 0.05em);border-radius:2px;transition:transform .2s ease, background .2s ease, color .2s ease;}
.btn.primary{background:var(--gold-bright);color:var(--ink);}
.btn.primary:hover{transform:translateY(-2px);}
.btn.ghost{border:1px solid var(--line-on-dark);color:var(--paper);}
.btn.ghost:hover{border-color:var(--gold-bright);color:var(--gold-bright);}
.btn.outline{border:1px solid var(--ink);color:var(--ink);}
.btn.outline:hover{background:var(--ink);color:var(--paper);}

/* ---------- CTA band ---------- */
.ctaband{background:var(--ink);color:var(--paper);text-align:center;padding:4rem 0;}
.ctaband h2{font-family:var(--font-display);font-size:clamp(1.65rem,3.6vw,2.25rem);margin:0 0 1.125rem;}
.ctaband p{color:rgba(237,238,242,0.7);margin:0 0 2rem;font-size:1.2rem;}
.ctaband .btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}

/* ---------- Footer ---------- */
footer{background:var(--ink-soft);color:rgba(237,238,242,0.7);font-size:1.0875rem;}
footer .logo img{height:6.75rem;} /* フッターのロゴはヘッダーの150%（PC: 4.5rem×1.5） */
@media (max-width:920px){ footer .logo img{height:5.625rem;} } /* モバイルはヘッダー3.75rem×1.5 */
@media (max-width:360px){ footer .logo img{height:4.5rem;} } /* ヘッダーが48pxになる幅では150%の72px */
footer .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:2.5rem;padding:4.375rem 2rem 2.5rem;}
footer .footer-title{color:var(--paper);font-size:1.0875rem;letter-spacing:.06em;margin:0 0 1.125rem;font-weight:700;}
footer ul{list-style:none;margin:0;padding:0;line-height:2.4;}
footer ul a:hover{color:var(--gold-bright);}
footer ul a.active{color:var(--gold-bright);}
.footer-bottom{border-top:1px solid var(--line-on-dark);text-align:center;padding:1.25rem;font-family:var(--font-mono);font-size:0.975rem;opacity:.85;}
@media (max-width:820px){ footer .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} }
/* スマホ: 2列のままだと住所・「情報セキュリティ基本方針」等が語の途中で折り返すため、
   住所ブロック（先頭）とポリシー列（末尾）は全幅、会社／事業の短い列だけ2列で並べる */
@media (max-width:560px){
  footer{font-size:0.975rem;}
  footer .wrap{gap:1.25rem 1.5rem;padding:2.25rem 5vw 1.5rem;}
  footer .wrap > div:first-child,
  footer .wrap > div:last-child{grid-column:1 / -1;}
  footer ul{line-height:1.95;}
  .footer-bottom{font-size:0.8125rem;padding:0.875rem 1.25rem;}
  /* コンパクト化: 住所ブロック・見出し余白を詰める（ロゴはヘッダー150%ルールを維持） */
  footer .wrap > div:first-child p{margin:0.375rem 0 0;line-height:1.7;}
  footer .footer-title{margin:0 0 0.5rem;}
}

/* =====================================================================
   3. 下層ページ共通
   ===================================================================== */
/* ---------- Page hero (smaller than the top-page hero) ---------- */
.pagehero{background:var(--ink);color:var(--paper);position:relative;overflow:hidden;padding:3.5rem 0 4rem;}
.pagehero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 10%, rgba(85,185,189,0.16), transparent 45%);pointer-events:none;}
.pagehero .wrap{position:relative;z-index:1;}
.crumb{font-family:var(--font-mono);font-size:0.975rem;letter-spacing:.1em;color:var(--gold-bright);opacity:.85;}
.crumb a:hover{color:#fff;}
.pagehero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2.25rem,4.8vw,3.3rem);margin:0.875rem 0 0.75rem;}
@media (max-width:360px){ .pagehero h1{font-size:2rem;} } /* 「情報セキュリティ」(8字) が 20rem 幅でも1行に収まる大きさ */
.pagehero p{color:rgba(237,238,242,0.72);max-width:52ch;line-height:1.9;font-size:1.2rem;margin:0;}
@media (max-width:480px){ .pagehero p{font-size:1.0875rem;line-height:1.85;} } /* 最長文節「多様な人材が平等に活躍できる会社を目指す」(19字) が 21.875rem に収まる大きさ */
/* 英語スローガン（トップ hero / 下層 pagehero 共用） */
.slogan-en{
  font-family:var(--font-mono);font-size:clamp(1.125rem,1.8vw,1.5rem);letter-spacing:.14em;
  color:var(--gold-bright);opacity:.85;margin:0 0 1.625rem;
}
/* スマホでは折り返さず 1 行に収める（字間を少し詰め、画面幅に応じて縮小） */
@media (max-width:920px){
  .slogan-en{white-space:nowrap;letter-spacing:.1em;font-size:clamp(0.75rem,3.5vw,1.125rem);}
}

/* ---------- Section shell ---------- */
section{padding:3rem 0;} /* 全セクション共通の上下余白（見出し下の 3rem と同じ値に統一） */
.section-head{max-width:40rem;margin:0 0 3rem;}
.section-head h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.8rem,3.6vw,2.4rem);margin:0 0 0.875rem;line-height:1.5;}
.section-head p{color:var(--ink-soft);opacity:.75;line-height:1.9;font-size:1.2rem;}

/* ---------- Eyebrow ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:0.625rem;font-family:var(--font-mono);font-size:1.0125rem;letter-spacing:.16em;color:var(--gold);text-transform:uppercase;font-weight:700;margin:0 0 0.625rem;}
.eyebrow::before{content:"";width:1.625rem;height:2px;background:currentColor;flex-shrink:0;opacity:.85;}
.section-head .eyebrow, .split-media .eyebrow{display:flex;} /* 行ボックスの浮き（約6px）をなくし、セクション上余白＝見出し下余白が正確に揃うように */
@media (max-width:640px){ .eyebrow{font-size:clamp(0.8125rem,3.6vw,1.0125rem);letter-spacing:.12em;white-space:nowrap;} } /* 眉ラベルは折り返さず、幅に応じて縮む（最長 OUR BUSINESS & ORGANIZATION が 320px でも1行） */

/* ---------- Business pillars (3-up bordered grid; about / recruit) ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);}
.pillar{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:2.375rem 2rem;background:var(--paper-soft);}
.pillar .idx{font-family:var(--font-mono);font-size:1.0125rem;color:var(--gold);letter-spacing:.08em;}
.pillar h3{font-family:var(--font-display);font-size:1.5rem;font-weight:700;margin:0.75rem 0 0.75rem;}
.pillar p{font-size:1.125rem;line-height:1.9;color:var(--ink-soft);opacity:.8;margin:0;}
@media (max-width:920px){ .pillars{grid-template-columns:minmax(0,1fr);} }

/* =====================================================================
   4. トップ（front-page.php）  body.home
   ===================================================================== */
/* ---------- Hero ---------- */
.hero{
  background:var(--ink);
  color:var(--paper);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:4.5rem 0 4rem;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(circle at 82% 18%, rgba(85,185,189,0.18), transparent 45%),
    radial-gradient(circle at 8% 90%, rgba(85,185,189,0.10), transparent 40%);
  pointer-events:none;
}
.hero .wrap{max-width:85rem;}
/* ---------- Hero 背景写真（旧スライダー素材 3 枚のクロスフェード） ----------
   重ね順: 写真(.hero-photos) → 青緑の光(.hero::before) → ブロブ＋人財ネットワーク(.hero-bg) → 文字(.hero-grid)。
   写真はインク色のスクリムで沈め、左の文字帯は .hero-bg::after の左→右グラデーションでさらに暗くする。 */
.hero-photos{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--ink);}
.hero-photo{
  position:absolute;inset:0;display:block;
  opacity:0;z-index:0;
  /* 次の写真は素材の斜め帯と同じ角度のワイプで“切り込む”（左上→右下、1.1 秒）。前の写真は .is-leaving で下に残し、終わったら消す */
  clip-path:polygon(-40% 0, -40% 0, -70% 100%, -70% 100%);
  transition:none;
}
.hero-photo.is-active{opacity:1;z-index:2;clip-path:polygon(-40% 0, 130% 0, 100% 100%, -70% 100%);transition:clip-path 1.1s cubic-bezier(.76,0,.18,1), opacity .01s linear;}
.hero-photo.is-leaving{opacity:1;z-index:1;clip-path:polygon(-40% 0, 130% 0, 100% 100%, -70% 100%);transition:none;}
.hero-photo img{
  width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block;
  filter:saturate(.9) contrast(1.02) brightness(1.08);
  transform:scale(1);transition:transform 8s linear;
}
.hero-photo.is-active img{transform:scale(1.07);}
/* スクリム: 左の文字帯は強く（輝度 ≈ インク〜+35）、右の写真・ネットワーク側は写真の質感が残る程度に。下端は次の帯（stats）へ溶かす */
.hero-photos::after{
  content:"";position:absolute;inset:0;z-index:3; /* ワイプ中の写真（z 1/2）より上に置く */
  background:
    linear-gradient(to top, var(--ink) 0%, rgba(18,39,41,0.15) 26%, rgba(18,39,41,0) 46%),
    linear-gradient(to right, rgba(18,39,41,0.62) 0%, rgba(18,39,41,0.5) 40%, rgba(18,39,41,0.3) 66%, rgba(18,39,41,0.22) 100%);
}
@media (max-width:920px){
  /* モバイルは文字が全幅に載るので、写真は一様に沈める */
  .hero-photos::after{
    background:
      linear-gradient(to top, var(--ink) 0%, rgba(18,39,41,0.22) 26%, rgba(18,39,41,0) 50%),
      rgba(18,39,41,0.5);
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-photo{transition:none;clip-path:none;}
  .hero-photo img,.hero-photo.is-active img{transform:none;transition:none;}
}
.hero-grid{
  position:relative;z-index:3;
  display:block;
  max-width:47.5rem;
}
/* 見出しブロックの左端を揃える：eyebrow は1行で独立させ、人財は次の行に左寄せで置く */
.home .hero .eyebrow{display:flex;margin:0 0 1.125rem;}
.kanji-morph{
  position:relative;
  font-family:var(--font-display);
  font-weight:700;
  line-height:1;
  font-size:clamp(4.5rem,11.5vw,9.75rem);
  display:flex;
  width:max-content;
  margin:0 0 1.125rem;
}
/* 「人」はアニメーションなしで常時点灯。2文字目（.k-swap）だけ 材⇄財 を重ねて切り替える */
.kanji-morph .k-hito{color:var(--gold-bright);}
.kanji-morph .k-swap{display:grid;}
.kanji-morph .k-swap span{grid-area:1/1;transition:opacity 1.1s ease, filter 1.1s ease;}
.kanji-morph .base{color:rgba(237,238,242,0.28);}
.kanji-morph .treasure{
  color:var(--gold-bright);
  opacity:0;
  animation:morphIn 5s ease-in-out 1 forwards;   /* 1回だけ 材→財 に変わり、以後は「財」のまま戻らない */
}
@keyframes morphIn{
  0%,38%{opacity:0;filter:blur(2px);}
  55%,100%{opacity:1;filter:blur(0);}
}
@media (prefers-reduced-motion: reduce){ .kanji-morph .treasure{animation:none;opacity:1;} }
/* JS が付ける .js-morph: キーフレームを止め、ネットワークのバーストと同じ瞬間に「人財」へ切り替える（鋭く入って、ゆっくり戻る） */
.kanji-morph.js-morph .treasure{
  animation:none;opacity:0;filter:blur(0.375rem);transform:scale(1.04);
  transition:opacity .9s ease, filter .9s ease, transform .9s ease;
}
.kanji-morph.js-morph.is-treasure .treasure{opacity:1;filter:blur(0);transform:scale(1);transition:opacity .28s cubic-bezier(.2,.8,.2,1), filter .38s ease, transform .45s cubic-bezier(.2,.9,.2,1);}
.kanji-morph.js-morph .base{transition:opacity .9s ease;}
.kanji-morph.js-morph.is-treasure .base{opacity:.45;transition:opacity .3s ease;}
.hero h1,.hero p.lead{text-shadow:0 2px 1.5rem rgba(18,39,41,.5);} /* スクリムを明るくした分の可読性担保 */
.hero h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.25rem,4.8vw,3.3rem);
  line-height:1.45;
  margin:0 0 1.375rem;
}
.hero p.lead{
  font-size:1.275rem;line-height:2;color:rgba(237,238,242,0.78);
  max-width:46ch;margin:0 0 2.125rem;
}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;}
.hero-bg{
  position:absolute;inset:0;z-index:2;
  overflow:hidden;
}
/* 右側のアニメーションは左のテキストブロック（上下 padding を除いた帯）と同じ高さに収め、
   右半分の中央に据える（ヒーローの天地からはみ出さない） */
.hero-bg svg{
  overflow:hidden;
  position:absolute;
  top:50%;right:2%;
  height:calc(100% - 3rem);   /* 描画本体は SVG の約7割なので、SVG 自体はテキスト帯よりやや大きく取る */
  max-height:57.5rem;
  width:auto;
  max-width:50vw;
  transform:translateY(-50%);          /* ヒーローの天地中央に正確に合わせる */
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right, var(--ink) 8%, rgba(18,39,41,0) 58%);
}
/* 人財ネットワークのスキルタグ（SVG 内 text）: サイトのユーティリティ書体。写真の上でも読めるよう白寄り・太め */
.hero-bg #talentLayer text{
  font-family:var(--font-mono), var(--font-body);font-size:0.5625rem;letter-spacing:.08em;font-weight:600;
  fill:#EEF6F6;pointer-events:none;user-select:none;
  paint-order:stroke;stroke:rgba(18,39,41,0.55);stroke-width:2px;stroke-linejoin:round;
}
.hero-bg #talentLayer text.tag-soft{fill:#A9E7E8;font-size:8.6px;letter-spacing:.06em;} /* ソフトスキル（和文）は少し青緑寄りで区別 */
.hero-bg #talentLayer line{stroke-linecap:round;}
@media (max-width:920px){
  /* スマホ/タブレット縦: 背景アニメ（光ブロブ＋ロゴネットワーク）は表示しない。
     .hero-bg 自体は残す — ::after の左→右の暗幕が文字の可読性を支えているため（svg だけ消す） */
  .hero-bg svg{display:none;}
}
@media (max-width:480px){
  .home .hero .eyebrow{font-size:0.875rem;letter-spacing:.12em;}
  .hero p.lead{font-size:1.0875rem;line-height:1.9;} /* 最長文節「エンジニアリングとキャリアの両面から」(18字) が 22.5rem 幅でも1行に収まり、「ら」だけ孤立しない */
}

/* ---------- Home-scale overrides of the shared section / eyebrow (body.home only) ---------- */
.home .eyebrow{color:var(--gold-bright);margin:1.375rem 0 0.625rem;}
.home .section-head{margin:0 0 3.5rem;}
/* トップも見出しブロックの上下余白を対称に（eyebrow の上マージンは加算しない）。
   hero/.voices/.ctaband 等の独自 padding を持つ帯は対象外にするため .section-head 始まりの section に限定 */
.home section:has(> .wrap:first-child > .section-head:first-child){padding-top:3.5rem;}
.home .section-head .eyebrow{margin-top:0;}
/* スマホの縦余白も固定値ではなく比率（8vw）。上限は PC の値（3rem / home 3.5rem） */
@media (max-width:640px){
  section{padding:clamp(1.5rem,8vw,3rem) 0;}
  .section-head{margin-bottom:clamp(1.5rem,8vw,3rem);}
  .home .section-head{margin-bottom:clamp(1.5rem,8vw,3.5rem);}
  .home section:has(> .wrap:first-child > .section-head:first-child){padding-top:clamp(1.5rem,8vw,3.5rem);}
}
.home .section-head .eyebrow{color:var(--gold);}
.home .section-head h2{font-size:clamp(1.95rem,3.6vw,2.7rem);margin:0 0 1rem;}

/* ---------- Stat strip ---------- */
.stats{
  background:var(--ink-soft);color:var(--paper);
  border-top:1px solid var(--line-on-dark);
}
.stats .wrap{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  padding:2.125rem 2rem;
}
.stat{text-align:center;border-left:1px solid var(--line-on-dark);padding:0 0.75rem;}
.stat:first-child{border-left:none;}
.stat .num{
  font-family:var(--font-mono);font-weight:600;
  font-size:clamp(1.95rem,3.6vw,2.85rem);color:var(--gold-bright);
}
.stat .label{font-size:1.0125rem;letter-spacing:.05em;color:rgba(237,238,242,0.65);margin-top:0.375rem;}
@media (max-width:760px){ .stats .wrap{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.5rem;} .stat:nth-child(3){border-left:none;} }
@media (max-width:360px){ .stat .num{font-size:1.6875rem;} .stat .label{font-size:0.9rem;} } /* 「2,000+」が 2 列セルからはみ出さない大きさ */

/* ---------- Services (3-up: SES事業 / 受注開発 / 自社製品 — about.php の .pillars と同じ3事業) ---------- */
.svc-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.svc{
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:2.5rem 1.875rem;background:var(--paper-soft);
  transition:background .25s ease;
}
.svc:hover{background:#fff;}
.svc .mark{
  width:2.375rem;height:2.375rem;border:1px solid var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);color:var(--gold);font-size:1.275rem;margin-bottom:1.375rem;
}
.svc h3{font-family:var(--font-display);font-size:1.425rem;font-weight:700;margin:0 0 0.75rem;}
.svc p{font-size:1.05rem;line-height:1.85;color:var(--ink-soft);opacity:.8;margin:0;}
@media (max-width:920px){ .svc-grid{grid-template-columns:minmax(0,1fr);} }

/* ---------- Voices (people) ---------- */
/* 余白は詰めめ: カード群は .wrap 内（見出しと左端を揃える）、区切りは 1px の縦罫のみ */
.voices{background:var(--ink);color:var(--paper);padding:4rem 0 4.25rem;}
.home .voices .section-head{margin:0 0 1.875rem;}
.home .voices .section-head .eyebrow{color:var(--gold-bright);margin-top:0;}
.voice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;}
.voice{position:relative;padding:0.375rem 3rem 0.25rem 0;}
.voice + .voice{padding-left:3rem;}
/* 区切りは中央の縦罫1本だけ。両端をフェードさせて軽く見せる */
.voice + .voice::before{
  content:"";position:absolute;left:0;top:6%;bottom:6%;width:1px;
  background:linear-gradient(to bottom, transparent, var(--line-on-dark) 18%, var(--line-on-dark) 82%, transparent);
}
/* 肖像の代わりに引用符「“」。塗りの円より軽く、“ことば”のセクションだと分かる */
.voice .portrait{
  width:auto;height:1.875rem;border-radius:0;background:none;margin:0 0 0.625rem;  /* 「“」は em 箱の上部に描かれるので箱の高さを詰めて本文に寄せる */
  font-family:var(--font-display);font-size:4rem;line-height:1;font-weight:500;
  color:var(--gold-bright);opacity:.6;
}
.voice .portrait::before{content:"\201C";}
.voice blockquote{
  font-family:var(--font-display);font-size:1.425rem;line-height:1.8;
  margin:0 0 0.875rem;font-weight:500;color:var(--paper);
}
.voice cite{font-style:normal;font-size:0.975rem;color:rgba(237,238,242,0.6);font-family:var(--font-mono);}
@media (max-width:920px){ .voice{padding:0.375rem 1.75rem 0.25rem 0;} .voice + .voice{padding-left:1.75rem;} .voice blockquote{font-size:1.275rem;} } /* タブレット縦(2列のまま)では列幅が狭いので余白と文字を少し詰める */
@media (max-width:760px){
  .voice-grid{grid-template-columns:minmax(0,1fr);}
  .voice{padding:0.375rem 0 1.25rem;}
  .voice + .voice{padding-left:0;padding-top:1.625rem;}
  .voice + .voice::before{top:0;bottom:auto;left:0;right:0;width:auto;height:1px;background:linear-gradient(to right, var(--line-on-dark) 0%, var(--line-on-dark) 60%, transparent);}
  .voice .portrait{font-size:3.25rem;}
}
@media (max-width:640px){ .voice blockquote{font-size:1.2375rem;line-height:1.8;} }

/* ---------- Mission band ---------- */
.mission{
  background:var(--paper-soft);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.mission .wrap{display:grid;grid-template-columns:minmax(0,0.7fr) minmax(0,1.3fr);gap:4rem;align-items:center;}
.mission .tag{
  font-family:var(--font-display);font-size:4.8rem;color:var(--gold);line-height:1;
}
.mission ul{list-style:none;margin:0;padding:0;font-size:1.2rem;line-height:2.3;}
.mission li{position:relative;padding-left:1.375rem;word-break:auto-phrase;} /* 「築／く」のような不自然な位置で折り返さず、文節の区切りで改行する（Chrome 119+） */
.mission li::before{content:"◆";position:absolute;left:0;color:var(--gold);}
@media (max-width:760px){ .mission .wrap{grid-template-columns:minmax(0,1fr);gap:1.25rem;} }
@media (max-width:640px){ .mission ul{line-height:1.9;font-size:1.05rem;} .mission li{margin-bottom:0.625rem;} } /* 折り返す項目が多いので文字と行間を詰め、項目間で区切る */

/* ---------- News cards ---------- */
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.75rem;}
.news-card{border:1px solid var(--line);background:var(--paper-soft);transition:transform .2s ease, box-shadow .2s ease;}
.news-card:hover{transform:translateY(-0.25rem);box-shadow:0 0.875rem 1.875rem rgba(18,23,43,0.08);}
.news-thumb{height:8.75rem;background:
    repeating-linear-gradient(135deg, rgba(85,185,189,0.14) 0 2px, transparent 2px 0.875rem), var(--ink);
}
.news-body{padding:1.375rem 1.5rem 1.625rem;}
.news-date{font-family:var(--font-mono);font-size:0.975rem;color:var(--gold);letter-spacing:.05em;}
.news-card h3{font-size:1.2375rem;line-height:1.7;margin:0.625rem 0 0;font-weight:700;}
@media (max-width:920px){ .news-grid{grid-template-columns:minmax(0,1fr);} }

/* =====================================================================
   5. サービス（service.php）
   ===================================================================== */
/* ---------- 人材育成・開発・派遣 (feature cards) ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.625rem;}
.feat-card{background:var(--paper-soft);border:1px solid var(--line);padding:1.875rem 1.75rem;}
.feat-card h3{font-family:var(--font-display);font-weight:700;font-size:1.2rem;margin:0 0 0.625rem;line-height:1.6;}
.feat-card p{font-size:0.975rem;line-height:1.9;color:var(--ink-soft);opacity:.85;margin:0;}
/* ---------- 受注開発 (development cards) ---------- */
.dev-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.625rem;}
.dev-card{background:var(--paper);border:1px solid var(--line);padding:2rem 1.875rem;}
.dev-head{display:flex;align-items:center;gap:0.75rem;margin:0 0 0.875rem;}
.dev-head .num{font-family:var(--font-mono);font-weight:600;font-size:1.05rem;color:var(--gold);}
.dev-tag{font-family:var(--font-mono);font-size:0.8438rem;letter-spacing:.08em;color:var(--ink-soft);border:1px solid var(--line);padding:calc(0.25rem + 0.045em) 0.75rem calc(0.25rem - 0.045em);} /* こちらはインクが 0.045em 浮く（phase-tag と逆）→下方向へ光学補正 */
.dev-card h3{font-family:var(--font-display);font-weight:700;font-size:1.275rem;margin:0 0 0.75rem;line-height:1.6;}
.dev-card p{font-size:0.975rem;line-height:1.95;color:var(--ink-soft);opacity:.85;margin:0;}
/* ---------- 自社製品 (product cards) ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.625rem;}
.prod-card{display:block;background:var(--ink);color:var(--paper);padding:2.25rem 2rem;border:1px solid var(--line);transition:transform .2s ease;}
.prod-card:hover{transform:translateY(-0.1875rem);}
.prod-name{font-family:var(--font-display);font-weight:800;font-size:1.65rem;margin:0 0 0.25rem;}
.prod-type{font-family:var(--font-mono);font-size:0.8438rem;letter-spacing:.06em;color:var(--gold-bright);margin:0 0 1rem;}
.prod-card p{font-size:0.975rem;line-height:1.9;color:rgba(237,238,242,0.78);margin:0 0 1.125rem;}
.prod-link{font-family:var(--font-mono);font-size:0.9062rem;color:var(--gold-bright);}
@media (max-width:1040px){ .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:760px){
  .feat-grid,.dev-grid,.prod-grid{grid-template-columns:minmax(0,1fr);}
}

/* =====================================================================
   6. 会社概要（about.php）
   ===================================================================== */
/* ---------- Philosophy cards ---------- */
.about-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.625rem;}
.about-card{background:var(--paper-soft);border:1px solid var(--line);padding:2.125rem 2rem;}
.about-card .idx{font-family:var(--font-mono);font-size:1.0125rem;color:var(--gold);letter-spacing:.08em;}
.about-card h3{font-family:var(--font-display);font-size:1.35rem;font-weight:700;margin:0.75rem 0 1rem;line-height:1.6;}
.about-card ul{list-style:none;margin:0;padding:0;}
.about-card li{position:relative;padding:0.3125rem 0 0.3125rem 1.375rem;font-size:1.05rem;line-height:1.9;color:var(--ink-soft);opacity:.85;}
.about-card li::before{content:"";position:absolute;left:0;top:1.1875rem;width:0.75rem;height:2px;background:var(--gold);}
@media (max-width:920px){ .about-grid{grid-template-columns:minmax(0,1fr);} }
/* ---------- Profile table ---------- */
.profile{display:grid;grid-template-columns:minmax(0,0.75fr) minmax(0,1.25fr);border-top:1px solid var(--line);}
.profile dt,.profile dd{padding:1.375rem 1.75rem;border-bottom:1px solid var(--line);margin:0;font-size:1.1625rem;line-height:1.9;}
.profile dt{font-family:var(--font-mono);font-size:1.0125rem;letter-spacing:.06em;color:var(--gold);background:var(--paper-soft);display:flex;align-items:center;}
.profile dd{background:#fff;}
.profile dd a{color:var(--gold);text-decoration:underline;text-underline-offset:0.1875rem;}
.profile dd a:hover{color:var(--ink);}
@media (max-width:640px){ .profile{grid-template-columns:minmax(0,1fr);} .profile dt{border-bottom:none;padding-bottom:0.375rem;} }
/* ---------- Access / map ---------- */
.access{background:var(--ink);color:var(--paper);}
.access-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;background:var(--line-on-dark);}
.access-panel{background:var(--ink);padding:3.125rem 2.75rem;}
.access-panel h3{font-family:var(--font-display);font-size:1.35rem;margin:0 0 1.125rem;}
.access-panel p{font-size:1.1625rem;line-height:2;color:rgba(237,238,242,0.75);margin:0;}
.mapbox{background:var(--ink);min-height:20rem;position:relative;}
/* 地図は遅延させず即ロード（iframe loading="eager"）。描画されるまでの間は枠内に案内を出す（iframe が上に重なるので表示後は隠れる） */
.mapbox::before{
  content:"Google マップを読み込み中…";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:0.8438rem;letter-spacing:.08em;color:rgba(237,238,242,.55);pointer-events:none;
}
/* Embed 形式の Google マップは色指定 API が使えないため、CSS フィルタでサイト配色（--ink 系の青緑ダーク）に着色している */
.mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:transparent;
  filter:grayscale(1) invert(.94) sepia(.65) hue-rotate(155deg) saturate(2.1) brightness(1.04) contrast(.98);}
@media (max-width:760px){ .access-grid{grid-template-columns:minmax(0,1fr);} .mapbox{min-height:17.5rem;} }
@media (max-width:480px){ .access-panel{padding:2.5rem 1.5rem;} }
/* CTA band sits directly under the dark access block — separate with a hairline (about only) */
.page-template-about .ctaband{border-top:1px solid var(--line-on-dark);}

/* =====================================================================
   7. ニュース一覧・カテゴリ（parts/news-page.php）
   ===================================================================== */
/* ---------- Category filter ---------- */
.news-filter{display:flex;flex-wrap:wrap;gap:0.625rem;margin:0 0 2.5rem;}
.nf-pill{
  display:inline-flex;align-items:center;font-family:var(--font-body);font-size:0.9062rem;letter-spacing:.04em;line-height:1.4;cursor:pointer;
  border:1px solid var(--line);background:var(--paper-soft);color:var(--ink-soft);
  padding:calc(0.625rem - 0.05em) 1.25rem calc(0.625rem + 0.05em);transition:all .15s ease;
}
.nf-pill:hover{border-color:var(--gold);color:var(--gold);}
.nf-pill.active{background:var(--gold);border-color:var(--gold);color:#fff;}
.nf-pill:focus-visible,.news-row:focus-visible{outline:2px solid var(--gold);outline-offset:0.1875rem;}
/* ---------- News list ---------- */
.news-list{border-top:1px solid var(--line);margin:0 0 2.875rem;}
.news-row{
  display:flex;align-items:flex-start;gap:1.625rem;
  padding:1.75rem 0.375rem;border-bottom:1px solid var(--line);
  transition:background .15s ease;
}
.news-row:hover{background:var(--paper-soft);}
.nr-meta{display:flex;flex-direction:column;gap:0.5rem;flex-shrink:0;width:9.375rem;}
.nr-date{font-family:var(--font-mono);font-size:0.9062rem;color:var(--ink-soft);letter-spacing:.04em;line-height:1.5;}
.nr-cat{font-family:var(--font-mono);font-size:0.7812rem;letter-spacing:.06em;color:var(--gold);border:1px solid var(--gold);padding:0.1875rem 0.625rem;align-self:flex-start;line-height:1.5;white-space:nowrap;}
.nr-main{flex:1;min-width:0;}
.nr-main h3{font-family:var(--font-display);font-weight:700;font-size:1.2rem;margin:0 0 0.5rem;line-height:1.6;}
.nr-main p{font-size:0.9375rem;line-height:1.85;color:var(--ink-soft);opacity:.8;margin:0;}
.nr-arrow{font-size:1.2rem;color:var(--gold);flex-shrink:0;padding-top:2px;transition:transform .15s ease;}
.news-row:hover .nr-arrow{transform:translateX(0.25rem);}
.news-empty{padding:3rem 0.375rem;font-size:1.0312rem;color:var(--ink-soft);opacity:.8;border-bottom:1px solid var(--line);margin:0;}
/* ---------- Pagination ---------- */
.news-pagination{display:flex;align-items:center;flex-wrap:wrap;gap:0.625rem;padding-bottom:4.75rem;}
.np-page{
  width:2.625rem;height:2.625rem;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:0.9688rem;border:1px solid var(--line);color:var(--ink-soft);
  transition:border-color .15s ease, color .15s ease;
}
a.np-page:hover{border-color:var(--gold);color:var(--gold);}
.np-page.current{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.np-page.np-dots{border-color:transparent;}
.np-prev,.np-next{font-size:1.125rem;color:var(--gold);padding:0 0.375rem;}
@media (max-width:640px){
  .news-row{flex-direction:column;gap:0.75rem;}
  .nr-meta{flex-direction:row;align-items:center;width:auto;}
  .nr-arrow{display:none;}
}

/* =====================================================================
   8. 採用（recruit.php）
   ===================================================================== */
/* ---------- Recruit hero (写真背景: 旧トップ2枚目スライドのモザイク写真 img/recruit/hero-*.jpg/.webp) ----------
   .pagehero の上に載せる差分。背景は <picture class="pagehero-bg">（PC: 横長モザイク+斜め帯 / SP: 縦 2×3）、
   文字の可読性はインク色のスクリム（左→右・下→上）で確保し、右側に人物の顔が抜けて見えるようにする。 */
.recruit-hero{
  isolation:isolate;
  min-height:clamp(30rem,54vw,41.25rem);
  display:flex;align-items:flex-end;
  padding:7.5rem 0 4.5rem;
}
.recruit-hero .pagehero-bg{position:absolute;inset:0;z-index:0;margin:0;display:block;}
.recruit-hero .pagehero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block;}
.recruit-hero::before{
  z-index:1;
  background:
    linear-gradient(to top, rgba(18,39,41,.94) 0%, rgba(18,39,41,.55) 42%, rgba(18,39,41,.12) 100%),
    /* 左右方向は .wrap（max 73.75rem）基準で止める: 文字の帯は暗く、右側の顔は抜ける。広い画面でも同じ見え方 */
    linear-gradient(to right, rgba(18,39,41,.92) 0, rgba(18,39,41,.82) calc(50% - 35rem), rgba(18,39,41,.66) calc(50% - 2.5rem), rgba(18,39,41,.10) calc(50% + 25rem), rgba(18,39,41,0) 100%);
}
.recruit-hero .wrap{z-index:2;width:100%;}
.recruit-hero .crumb{opacity:1;}
.recruit-hero h1{text-shadow:0 2px 1.625rem rgba(18,39,41,.5);}
.recruit-hero p{color:rgba(237,238,242,.88);text-shadow:0 1px 0.875rem rgba(18,39,41,.6);}
.recruit-hero .hero-ctas{margin-top:2rem;}
.recruit-hero .btn.ghost{border-color:rgba(238,246,246,.38);}
.recruit-hero .btn.ghost:hover{border-color:var(--gold-bright);}
#jobs{scroll-margin-top:6rem;}
@media (max-width:640px){
  /* 上パディングは画面高さ連動（svh）: 低い端末でも CTA 2つ目までファーストビューに収める。photo の見せ幅は flex-end+min-height が担保 */
  .recruit-hero{min-height:37.5rem;padding:8.5rem 0 2.75rem;padding-top:clamp(5rem,14svh,8.5rem);}
  .recruit-hero .pagehero-bg img{object-position:center top;}
  .recruit-hero::before{
    /* スマホは上端まで緑（インク）を被せる。下半分も薄めにして背景の人物が透けて見えるように */
    background:linear-gradient(to top, rgba(18,39,41,.84) 0%, rgba(18,39,41,.76) 40%, rgba(18,39,41,.62) 62%, rgba(18,39,41,.50) 80%, rgba(18,39,41,.40) 100%);
  }
  .recruit-hero p{font-size:1.0125rem;line-height:1.8;}
  .recruit-hero .hero-ctas{margin-top:1.25rem;gap:0.625rem;}
  .recruit-hero .hero-ctas .btn{font-size:1.0125rem;padding:0.8125rem 1.25rem;}
}
/* ---------- Video block ---------- */
.video-copy{margin:0;}
.video-copy p{font-size:1.0875rem;line-height:1.9;color:var(--ink-soft);opacity:.8;}
.video-frame{position:relative;padding-top:56.25%;background:linear-gradient(135deg,#16393C 0%,#1D4A4E 100%);border:1px solid var(--line);overflow:hidden;}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.split-media{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:center;}
@media (max-width:820px){ .split-media{grid-template-columns:minmax(0,1fr);gap:1.5rem;} }
/* ---------- Video facade (always visible; click opens the modal player, href is the no-JS fallback) ---------- */
.video-thumb{position:absolute;inset:0;display:block;}
.video-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.video-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(18,39,41,.6), rgba(18,39,41,0) 45%);}
.vt-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:4.125rem;height:4.125rem;border-radius:50%;
  background:rgba(18,39,41,0.7);border:2px solid var(--gold-bright);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease, background .2s ease;
}
.vt-play::before{
  content:"";display:block;width:0;height:0;
  border-style:solid;border-width:0.75rem 0 0.75rem 1.1875rem;
  border-color:transparent transparent transparent var(--gold-bright);
  margin-left:0.3125rem;
}
.video-thumb:hover .vt-play{transform:translate(-50%,-50%) scale(1.08);background:rgba(18,39,41,0.9);}
.vt-label{
  position:absolute;left:1rem;bottom:0.8125rem;z-index:2;
  color:var(--paper);font-family:var(--font-mono);font-size:0.9062rem;letter-spacing:.06em;opacity:.92;
}
/* 右下の「＋」: 募集職種カードと同じ記号でクリックできることを示す（hover で 45° 回転） */
.vt-plus{
  position:absolute;right:1rem;bottom:0.625rem;z-index:2;
  font-family:var(--font-mono);font-size:1.75rem;line-height:1;color:var(--gold-bright);
  transition:transform .25s ease;
}
.video-thumb:hover .vt-plus{transform:rotate(45deg);}
/* ---------- Video modal (popup player; centred, max 60rem — not full-width) ---------- */
.video-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:1.5rem;}
.video-modal.open{display:flex;}
.vm-backdrop{position:absolute;inset:0;background:rgba(18,39,41,0.86);-webkit-backdrop-filter:blur(0.375rem);backdrop-filter:blur(0.375rem);}
.vm-dialog{position:relative;z-index:1;width:min(92vw,60rem,calc((100vh - 7.5rem) * 16 / 9));background:var(--ink);border:1px solid var(--line-on-dark);box-shadow:0 1.875rem 5rem rgba(0,0,0,.45);animation:vm-in .22s ease-out;}
@keyframes vm-in{from{opacity:0;transform:translateY(0.75rem) scale(.985);}to{opacity:1;transform:none;}}
.vm-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.75rem 0.875rem 0.75rem 1.125rem;border-bottom:1px solid var(--line-on-dark);}
.vm-title{font-family:var(--font-mono);font-size:0.875rem;letter-spacing:.1em;color:var(--gold-bright);}
.vm-close{flex-shrink:0;width:2.375rem;height:2.375rem;border-radius:50%;border:1px solid var(--line-on-dark);background:none;color:var(--paper);font-size:1.375rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s ease,color .2s ease;}
.vm-close:hover,.vm-close:focus-visible{border-color:var(--gold-bright);color:var(--gold-bright);outline:none;}
.vm-player{position:relative;padding-top:56.25%;background:#000;}
.vm-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
body.vm-lock{overflow:hidden;}
/* 横向きスマホ（高さ 24.375rem 前後）では 16:9 プレイヤーが画面高を超えるので、幅を「高さから逆算した上限」でも抑える */
@media (max-width:640px){ .video-modal{padding:0.75rem;} .vm-dialog{width:min(100%,calc((100vh - 5.625rem) * 16 / 9));} }
@media (prefers-reduced-motion: reduce){ .vm-dialog{animation:none;} }
/* ---------- Culture pillars (reuses .pillars but with bullet lists) ---------- */
.pillar-list{list-style:none;margin:0.875rem 0 0;padding:0;font-size:1.0125rem;line-height:2.1;color:var(--ink-soft);opacity:.82;}
.pillar-list li{position:relative;padding-left:1.125rem;}
.pillar-list li::before{content:"";position:absolute;left:0;top:0.6875rem;width:0.375rem;height:1px;background:var(--gold);}
/* ---------- Ideal candidate (dark quote band) ---------- */
.ideal{background:var(--ink);color:var(--paper);}
.ideal-grid{display:grid;grid-template-columns:12.5rem minmax(0,1fr);gap:2.5rem;align-items:center;}
.ideal .tag{font-family:var(--font-display);font-size:3rem;color:var(--gold-bright);line-height:1;}
.ideal ul{list-style:none;margin:0;padding:0;font-size:1.125rem;line-height:2.1;}
.ideal li{position:relative;padding-left:1.375rem;}
.ideal li::before{content:"―";position:absolute;left:0;color:var(--gold-bright);}
@media (max-width:760px){ .ideal-grid{grid-template-columns:minmax(0,1fr);gap:1rem;} }
/* ---------- Job cards (details/summary, no JS needed) ---------- */
.jobs{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);}
.job{background:var(--paper-soft);}
.job summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:0.875rem;   /* タグは職種名の直後、＋だけ margin-left:auto で右端へ */
  padding:1.125rem 1.5rem;font-family:var(--font-display);font-weight:700;font-size:1.1625rem;
}
.job summary::-webkit-details-marker{display:none;}
.job summary .tag{
  font-family:var(--font-mono);font-size:0.825rem;line-height:1;color:var(--gold);
  border:1px solid var(--gold);padding:0.3125rem 0.625rem;border-radius:1.25rem;white-space:nowrap;
}
.job summary .plus{margin-left:auto;font-family:var(--font-mono);font-size:1.5rem;color:var(--gold);transition:transform .25s ease;flex-shrink:0;}
.job[open] summary .plus{transform:rotate(45deg);}
.job-body{padding:0 1.5rem 1.375rem;font-size:1.0125rem;line-height:2;color:var(--ink-soft);opacity:.85;}
.job-body h3{font-size:0.975rem;font-family:var(--font-mono);color:var(--gold);margin:1rem 0 0.375rem;letter-spacing:.04em;}
.job-body h3:first-child{margin-top:0;}
.job-body p{margin:0;}
.job-body ul{margin:0;padding-left:1.125rem;}
.job-body ul li{margin-bottom:0.25rem;}
/* ---------- Benefit two-column list ---------- */
.benefit-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border-top:1px solid var(--line);}
.benefit-col{padding:1.625rem 1.875rem;}
.benefit-col:first-child{border-right:1px solid var(--line);}
.benefit-col h3{font-family:var(--font-display);font-size:1.35rem;margin:0 0 1.25rem;}
.benefit-col ul{list-style:none;margin:0;padding:0;font-size:1.0875rem;line-height:2.4;}
.benefit-col li{position:relative;padding-left:1.5rem;}
.benefit-col li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:700;}
@media (max-width:700px){ .benefit-grid{grid-template-columns:minmax(0,1fr);} .benefit-col:first-child{border-right:none;border-bottom:1px solid var(--line);} }

/* =====================================================================
   9. sLab College（sLab-college.php）
   ===================================================================== */
/* ---------- Hero lead / apply button ---------- */
/* リード文は「…プロフェッショナルに導く、」／「未経験から…研修プログラム」の2行に収める（52ch だと3行に折れる） */
.pagehero .hero-lead{max-width:58ch;}
.hero-apply{margin-top:1.625rem;}
.pagehero .btn.primary{background:var(--gold-bright);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:0.625rem;line-height:1;padding:calc(0.875rem - 0.05em) 2.125rem calc(0.875rem + 0.05em);font-weight:700;font-size:1.05rem;}
/* ---------- Schedule (phase cards) ---------- */
.phase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.625rem;}
.phase-card{background:var(--paper-soft);border:1px solid var(--line);border-top:0.1875rem solid var(--gold);padding:1.875rem 1.75rem;}
.phase-step{font-family:var(--font-mono);font-weight:600;font-size:0.9062rem;letter-spacing:.12em;color:var(--gold);margin:0 0 0.75rem;}
.phase-card h3{font-family:var(--font-display);font-weight:700;font-size:1.2rem;margin:0 0 0.625rem;line-height:1.6;}
.phase-tag{display:inline-block;font-family:var(--font-mono);font-size:0.8125rem;letter-spacing:.06em;color:var(--ink-soft);border:1px solid var(--line);padding:calc(0.25rem - 0.045em) 0.75rem calc(0.25rem + 0.045em);margin:0 0 1.125rem;} /* インク実測 +0.045em 沈み→上方向へ光学補正 */
.phase-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.phase-list li{position:relative;padding:0.625rem 0 0.625rem 1.375rem;font-size:0.9375rem;line-height:1.7;color:var(--ink-soft);border-bottom:1px solid var(--line);}
.phase-list li::before{content:"";position:absolute;left:0;top:1.1875rem;width:0.75rem;height:2px;background:var(--gold);}
@media (max-width:920px){ .phase-grid{grid-template-columns:minmax(0,1fr);} }
/* ---------- Curriculum ---------- */
.cur-item{display:flex;gap:1.625rem;border-top:1px solid var(--line);padding:2.125rem 0;max-width:56.25rem;}
.cur-item:last-of-type{border-bottom:1px solid var(--line);}
.cur-item .num{font-family:var(--font-mono);font-size:1.2rem;font-weight:600;color:var(--gold);flex-shrink:0;padding-top:2px;}
.cur-text h3{font-family:var(--font-display);font-weight:700;font-size:1.35rem;margin:0 0 0.75rem;line-height:1.6;}
.cur-text p{font-size:1.0125rem;line-height:2.0;color:var(--ink-soft);opacity:.85;margin:0;}
.cur-list{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.375rem 1.625rem;}
.cur-list li{position:relative;padding:0.25rem 0 0.25rem 1.375rem;font-size:0.975rem;line-height:1.8;color:var(--ink-soft);}
.cur-list li::before{content:"";position:absolute;left:0;top:0.9375rem;width:0.75rem;height:2px;background:var(--gold);}
@media (max-width:760px){ .cur-list{grid-template-columns:minmax(0,1fr);} }
@media (max-width:640px){ .cur-item{gap:1rem;padding:1.75rem 0;} }
/* ---------- Soft skills ---------- */
.soft-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.625rem;}
.soft-card{background:var(--paper-soft);border:1px solid var(--line);padding:2.125rem 2rem;}
.soft-card .mark{width:2.875rem;height:2.875rem;border-radius:50%;border:1px solid var(--gold);color:var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1.2rem;margin:0 0 1.125rem;}
.soft-card h3{font-family:var(--font-display);font-weight:700;font-size:1.275rem;margin:0 0 0.75rem;line-height:1.6;}
.soft-card p{font-size:0.975rem;line-height:1.95;color:var(--ink-soft);opacity:.85;margin:0;}
@media (max-width:760px){ .soft-grid{grid-template-columns:minmax(0,1fr);} }

/* =====================================================================
   10. お問い合わせ・送信完了（contact.php / sendsuccess.php）
   ===================================================================== */
/* ---------- Contact form ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,0.7fr);gap:3.25rem;align-items:start;} /* 下余白は section の 4.75rem のみ（二重にしない） */
.cform{display:block;}
.cfield{margin:0 0 1.625rem;}
.cfield-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;}
/* ラベル: flex にして「必須」バッジを文字の縦中央に揃える（全ラベル共通） */
.clabel{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;font-size:0.975rem;font-weight:700;line-height:1.4;margin:0 0 0.625rem;}
/* 必須バッジ: オレンジ塗りではなくサイト共通のタグ表現（モノスペース＋ティール枠線）で必須を明示 */
.req{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:0.7188rem;font-weight:600;line-height:1;color:var(--gold);background:transparent;border:1px solid var(--gold);border-radius:2px;padding:0.25rem 0.5rem;letter-spacing:.08em;} /* 上下パディングを同値にして枠内の文字も縦中央に */
.cinput{
  width:100%;box-sizing:border-box;
  background:var(--paper-soft);border:1px solid var(--line);
  padding:0.875rem 1rem;font-size:1.05rem;font-family:var(--font-body);color:var(--ink);
  border-radius:0;-webkit-appearance:none;appearance:none;
}
.cinput:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold);}
.cinput::placeholder{color:rgba(29,59,62,0.45);}
.ctext{resize:vertical;line-height:1.8;}
/* お問い合わせ種別: ボタン（ピル）方式。選択中はティール塗り＋白文字のみ（✓ やラジオ印は付けない） */
.cpills{display:flex;flex-wrap:wrap;gap:0.625rem;}
.cpill{position:relative;}
.cpill input{position:absolute;opacity:0;pointer-events:none;}
.cpill span{
  display:inline-flex;align-items:center;
  border:1px solid var(--line);background:var(--paper-soft);color:var(--ink);
  padding:0.875rem 1.25rem;font-size:0.9375rem;line-height:1;cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.cpill span:hover{border-color:var(--gold);color:var(--gold);}
.cpill input:checked + span{background:var(--gold);border-color:var(--gold);color:#fff;}
.cpill input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px;}
@media (max-width:560px){ .cpills{gap:0.5rem;} .cpill span{padding:0.625rem 1rem;font-size:0.9062rem;} }
.cagree{display:flex;align-items:center;gap:0.625rem;font-size:0.975rem;cursor:pointer;}
.cagree input{width:1.125rem;height:1.125rem;accent-color:var(--gold);margin:0;flex-shrink:0;position:relative;top:2px;} /* top:2px はフォント（Zen Kaku）のアセント過多で文字インクが行箱より上に出る分の光学補正 */
.cagree a{color:var(--gold);text-decoration:underline;}
.csubmit{
  display:inline-flex;align-items:center;justify-content:center;line-height:1;border:none;cursor:pointer;
  background:var(--ink);color:var(--paper);
  font-family:var(--font-body);font-weight:700;font-size:1.05rem;letter-spacing:.04em;
  padding:1rem 2.875rem;transition:background .2s ease;border-radius:0;
}
.csubmit:hover{background:var(--gold);}
.csubmit:focus-visible{outline:2px solid var(--gold);outline-offset:0.1875rem;}
.csubmit[disabled]{opacity:.6;cursor:default;}
/* ---------- Contact info card ---------- */
.cinfo{border:1px solid var(--line);background:var(--paper-soft);padding:1.875rem 1.75rem;}
.cinfo-block{padding:1.125rem 0;border-top:1px solid var(--line);}
.cinfo-block:first-child{border-top:none;padding-top:0;}
.cinfo-label{font-family:var(--font-mono);font-size:0.8125rem;letter-spacing:.1em;color:var(--gold);margin:0 0 0.5rem;}
.cinfo-tel{font-family:var(--font-mono);font-weight:600;font-size:1.65rem;color:var(--ink);}
.cinfo-tel a{color:inherit;}
.cinfo-val{font-size:1.0125rem;line-height:1.8;color:var(--ink-soft);}
/* ---------- Error alert / honeypot ---------- */
.calert{
  border:1px solid var(--gold);background:rgba(31,115,119,0.08);color:var(--ink);
  padding:0.875rem 1.125rem;margin:0 0 1.875rem;font-size:0.975rem;line-height:1.8;
}
.calert strong{color:var(--gold);}
.honeypot{position:absolute;left:-624.9375rem;width:1px;height:1px;overflow:hidden;}
@media (max-width:920px){
  .contact-grid{grid-template-columns:minmax(0,1fr);gap:2.5rem;}
}
@media (max-width:640px){
  .cfield-row{grid-template-columns:minmax(0,1fr);gap:0;}
}
/* ---------- Thanks (sendsuccess.php) ---------- */
.thanks{max-width:46rem;margin:0 auto;text-align:center;}
.thanks-mark{
  width:5rem;height:5rem;border-radius:50%;margin:0 auto 1.75rem;
  background:var(--gold-bright);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 0.625rem rgba(92,186,209,.16), 0 0 0 1.375rem rgba(92,186,209,.07);
  animation:thanks-pop .55s cubic-bezier(.2,.9,.3,1.2) both;
}
.thanks-mark svg{width:2.125rem;height:2.125rem;}
@keyframes thanks-pop{from{transform:scale(.55);opacity:0;}to{transform:scale(1);opacity:1;}}
@media (prefers-reduced-motion:reduce){ .thanks-mark{animation:none;} }
.thanks-eyebrow{font-family:var(--font-mono);font-weight:600;font-size:0.8438rem;letter-spacing:.22em;color:var(--gold);margin:0 0 0.875rem;}
.thanks h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.65rem,3.6vw,2.25rem);margin:0 0 1.125rem;line-height:1.5;}
.thanks > p{font-size:1.0875rem;line-height:2;color:var(--ink-soft);margin:0 0 0.875rem;}
/* この後の流れ: 3ステップ（罫線グリッド、01 は完了状態） */
.thanks-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:2.5rem 0 0;padding:0;text-align:left;}
.tstep{background:var(--paper-soft);padding:1.375rem 1.25rem 1.25rem;}
.tstep .num{font-family:var(--font-mono);font-weight:600;font-size:0.8438rem;letter-spacing:.12em;color:var(--gold);display:block;margin:0 0 0.5rem;}
.tstep.done .num{color:var(--gold-bright);}
.tstep h3{font-family:var(--font-body);font-weight:700;font-size:1.0125rem;margin:0 0 0.375rem;}
.tstep p{font-size:0.9rem;line-height:1.8;color:var(--ink-soft);opacity:.85;margin:0;}
@media (max-width:640px){ .thanks-steps{grid-template-columns:minmax(0,1fr);} }
.thanks-actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:2.25rem;}
.thanks-info{border-top:1px solid var(--line);margin-top:2.5rem;padding-top:1.5rem;font-size:0.975rem;line-height:1.9;color:var(--ink-soft);opacity:.85;}
.thanks-info a{color:var(--gold);}

/* =====================================================================
   11. ポリシー（privacy.php / security.php / divercity.php）
   ===================================================================== */
/* ---------- Policy article (privacy / security) ---------- */
.policy{max-width:52.5rem;padding-bottom:4.75rem;}
.policy-lead{font-size:1.125rem;line-height:2.0;color:var(--ink-soft);margin:0 0 2.875rem;}
.policy-item{display:flex;gap:1.625rem;border-top:1px solid var(--line);padding:2.125rem 0;}
.policy-item .num{font-family:var(--font-mono);font-size:1.2rem;font-weight:600;color:var(--gold);flex-shrink:0;padding-top:2px;}
.policy-text h2{font-family:var(--font-display);font-weight:700;font-size:1.35rem;margin:0 0 0.75rem;line-height:1.6;}
.policy-text p{font-size:1.05rem;line-height:2.0;color:var(--ink-soft);opacity:.85;margin:0;}
.policy-sign{border-top:1px solid var(--line);padding-top:1.875rem;text-align:right;}
.policy-sign p{font-size:1.05rem;line-height:1.9;margin:0;color:var(--ink-soft);}
.policy-list{list-style:none;margin:0;padding:0;}
.policy-list li{position:relative;padding:0.375rem 0 0.375rem 1.5rem;font-size:1.05rem;line-height:1.9;color:var(--ink-soft);opacity:.85;}
.policy-list li::before{content:"";position:absolute;left:0;top:1.1875rem;width:0.75rem;height:2px;background:var(--gold);}
@media (max-width:640px){
  .policy-item{gap:1rem;padding:1.75rem 0;}
}
/* ---------- Diversity declaration (divercity.php) ---------- */
.div-intro{max-width:52.5rem;margin:0 0 3.5rem;}
.div-intro h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.65rem,3.6vw,2.4rem);margin:0 0 1.375rem;line-height:1.6;}
.div-intro p{font-size:1.05rem;line-height:2.05;color:var(--ink-soft);opacity:.85;margin:0 0 1.125rem;}
.div-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.625rem;margin:0 0 3.75rem;}
.div-card{background:var(--paper-soft);border:1px solid var(--line);padding:2.125rem 2rem;}
.div-card .mark{
  width:2.875rem;height:2.875rem;border-radius:50%;
  border:1px solid var(--gold);color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:1.2rem;
  margin:0 0 1.125rem;
}
.div-card h3{font-family:var(--font-display);font-weight:700;font-size:1.275rem;margin:0 0 0.75rem;line-height:1.6;}
.div-card p{font-size:0.975rem;line-height:1.95;color:var(--ink-soft);opacity:.85;margin:0;}
.div-close{border-top:1px solid var(--line);padding:2.5rem 0 4.75rem;}
.div-close p{font-family:var(--font-display);font-weight:700;font-size:1.2rem;line-height:2.0;color:var(--ink);max-width:52.5rem;margin:0;}
@media (max-width:760px){ .div-grid{grid-template-columns:minmax(0,1fr);} }

/* =====================================================================
   12. 404（404.php）
   ===================================================================== */
.notfound-actions{display:flex;gap:1rem;flex-wrap:wrap;padding-bottom:2.5rem;}

/* =====================================================================
   13. チャットボット（parts/chatbot.php / js/slab-chat.js / inc/chatbot.php）
   右下のランチャー + パネル。配色はサイトのトークンのみ（ink / paper / gold）
   ===================================================================== */
.chat-root{position:fixed;right:1.5rem;bottom:1.5rem;z-index:90;font-family:var(--font-body);}
/* 本番はプラグインが右下に reCAPTCHA バッジ（inline style で bottom:14px・高さ60px）を出し
   チャットランチャーと重なるため、バッジ側をランチャーの上（bottom:90px）へ移動する（ユーザー指示:
   チャットは元位置のまま・バッジが上・パネル展開時の重なりは許容）。inline style より優先させるため !important。
   ランチャー上端は最大 bottom24px+高さ56px=80px なので 90px で全スケールをクリア。px なのはバッジが px 固定物のため */
.grecaptcha-badge{bottom:90px !important;}
.chat-launch{
  display:inline-flex;align-items:center;gap:0.625rem;height:3.5rem;padding:0 1.15rem 0 1.1rem;border-radius:1.75rem; /* 左右パディングはアイコンSVGの内側余白込みで実測し、コンテンツが視覚中央に来る値（2026-08-30 ピクセル実測: 旧 1rem/1.25rem では左に2.7px寄り） */
  background:var(--ink);color:var(--paper);border:1px solid var(--line-on-dark);cursor:pointer;
  box-shadow:0 0.875rem 2.25rem rgba(18,39,41,.28);font-family:var(--font-body);font-size:0.9375rem;font-weight:700;letter-spacing:.04em;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.chat-launch:hover{transform:translateY(-2px);background:var(--ink-soft);box-shadow:0 1.125rem 2.5rem rgba(18,39,41,.34);}
.chat-launch .chat-ico,.chat-launch .chat-ico-close{flex:none;color:var(--gold-bright);}
.chat-launch .chat-ico{transform:translateY(-1px);} /* 吹き出しのしっぽ分インクが下に1.8px垂れるため半量を光学補正（本体とインク全体の中間を取る） */
.chat-launch-label{position:relative;top:-0.035em;} /* ラベルのインク下沈み実測分の光学補正（アイコンは幾何学中央で実測ズレ0のため据え置き） */
.chat-launch .chat-ico-close{display:none;}
.chat-root.is-open .chat-launch .chat-ico{display:none;}
.chat-root.is-open .chat-launch .chat-ico-close{display:block;}
.chat-root.is-open .chat-launch-label{display:none;}
.chat-root.is-open .chat-launch{padding:0;width:3.5rem;justify-content:center;}

.chat-panel{
  position:absolute;right:0;bottom:4.5rem;width:min(23.75rem,calc(100vw - 1.5rem));height:min(37.5rem,calc(100vh - 7.5rem));
  display:flex;flex-direction:column;background:var(--paper-soft);border:1px solid var(--line);border-radius:0.25rem;
  box-shadow:0 1.875rem 5rem rgba(18,39,41,.28);overflow:hidden;
  opacity:0;transform:translateY(0.75rem) scale(.98);transform-origin:bottom right;transition:opacity .2s ease, transform .2s ease;
}
.chat-panel[hidden]{display:none;}
.chat-panel.open{opacity:1;transform:none;}
.chat-head{display:flex;align-items:center;gap:0.75rem;padding:0.875rem 0.875rem 0.875rem 1.125rem;background:var(--ink);color:var(--paper);border-bottom:1px solid var(--line-on-dark);}
.chat-head-mark{
  flex:none;width:2.25rem;height:2.25rem;border-radius:50%;border:1px solid var(--gold-bright);color:var(--gold-bright);
  display:flex;align-items:center;justify-content:center;
}
.chat-head-mark img{width:1rem;height:1rem;display:block;} /* ロゴ（sLab ワードマーク）の「s」を切り出した画像（丸と同じ #5FC4C7 に着色済み）。丸の中心に置く */
@supports (mask-image: url("")) or (-webkit-mask-image: url("")){
  /* 字の色は丸の線色（currentColor）と常に同じにする: 画像をマスクとして currentColor で塗る */
  .chat-head-mark{position:relative;}
  .chat-head-mark img{opacity:0;}
  .chat-head-mark::before{content:"";position:absolute;left:50%;top:50%;width:1rem;height:1rem;transform:translate(-50%,-50%);background:currentColor;
    -webkit-mask:url(../img/chat-mark-s.png) center / 1rem 1rem no-repeat;mask:url(../img/chat-mark-s.png) center / 1rem 1rem no-repeat;}
}
.chat-head-text{flex:1;min-width:0;}
.chat-title{font-family:var(--font-body);font-weight:700;font-size:0.9688rem;line-height:1.3;letter-spacing:.02em;}
.chat-sub{font-family:var(--font-body);font-size:0.7188rem;font-weight:400;opacity:.7;margin-top:0.1875rem;letter-spacing:.02em;}
.chat-close{flex:none;width:2.125rem;height:2.125rem;border:0;background:transparent;color:var(--paper);font-size:1.625rem;line-height:1;cursor:pointer;opacity:.75;border-radius:50%;}
.chat-close:hover{opacity:1;background:rgba(238,246,246,.08);}

.chat-log{flex:1;overflow-y:auto;padding:1.125rem 1rem 0.375rem;display:flex;flex-direction:column;gap:0.625rem;scroll-behavior:smooth;}
.chat-row{display:flex;}
.chat-row.user{justify-content:flex-end;}
.chat-bubble{max-width:86%;padding:0.625rem 0.875rem;border-radius:0.875rem;font-size:0.9rem;line-height:1.75;word-break:break-word;overflow-wrap:anywhere;}
.chat-row.model .chat-bubble{background:var(--paper);border:1px solid var(--line);color:var(--ink);border-top-left-radius:0.25rem;}
.chat-row.user .chat-bubble{background:var(--gold);color:var(--paper);border-top-right-radius:0.25rem;}
.chat-row.error .chat-bubble{border-color:var(--gold);color:var(--gold);background:rgba(31,115,119,.06);}
.chat-bubble a{color:var(--gold);text-decoration:underline;text-underline-offset:2px;}
.chat-row.user .chat-bubble a{color:var(--paper);}
.chat-bullet{display:inline-block;width:1.1em;color:var(--gold);}
.chat-dots{display:inline-flex;gap:0.3125rem;align-items:center;height:1.125rem;}
.chat-dots i{width:0.375rem;height:0.375rem;border-radius:50%;background:var(--gold);opacity:.35;animation:chat-dot 1.1s infinite ease-in-out;}
.chat-dots i:nth-child(2){animation-delay:.18s;}
.chat-dots i:nth-child(3){animation-delay:.36s;}
@keyframes chat-dot{0%,80%,100%{opacity:.3;transform:translateY(0);}40%{opacity:1;transform:translateY(-0.1875rem);}}

.chat-suggest{display:flex;flex-wrap:wrap;gap:0.5rem;padding:0.375rem 1rem 0.625rem;}
.chat-suggest[hidden]{display:none;}
.chat-chip{
  border:1px solid var(--gold);color:var(--gold);background:transparent;border-radius:1rem;padding:calc(0.375rem - 0.035em) 0.75rem calc(0.375rem + 0.035em);
  font-family:var(--font-body);font-size:0.7812rem;font-weight:500;cursor:pointer;transition:background .15s ease,color .15s ease;
}
.chat-chip:hover{background:var(--gold);color:var(--paper);}

.chat-form{display:flex;align-items:flex-end;gap:0.5rem;padding:0.625rem 0.75rem 0.5rem 1rem;border-top:1px solid var(--line);background:var(--paper-soft);}
.chat-input{
  flex:1;min-height:2.5rem;max-height:7.5rem;resize:none;border:1px solid var(--line);border-radius:0.25rem;background:#fff;
  padding:0.5625rem 0.75rem;font-family:var(--font-body);font-size:0.9rem;line-height:1.5;color:var(--ink);outline:none;
}
.chat-input:focus{border-color:var(--gold);box-shadow:0 0 0 0.1875rem rgba(31,115,119,.12);}
.chat-input:disabled{opacity:.6;}
.chat-send{
  flex:none;width:2.5rem;height:2.5rem;border-radius:0.25rem;border:0;background:var(--gold);color:var(--paper);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s ease,transform .15s ease;
}
.chat-send:hover{background:var(--ink);}
.chat-send:disabled{opacity:.5;cursor:default;transform:none;}
.chat-note{padding:0 1rem 0.625rem;font-size:0.6875rem;line-height:1.6;color:var(--ink-soft);opacity:.7;text-align:center;}
.chat-note a{text-decoration:underline;text-underline-offset:2px;}

@media (max-width:600px){
  .chat-root{right:0.875rem;bottom:0.875rem;}
  .chat-launch{height:3.25rem;font-size:0.875rem;}
  .chat-panel{right:-2px;bottom:4rem;width:calc(100vw - 1.5rem);height:min(35rem,calc(100dvh - 5.625rem));}
}
@media (hover:none) and (pointer:coarse){ .chat-input{font-size:1rem;} } /* タッチ端末: iOS Safari は 1rem 未満の入力欄にフォーカスするとページ全体をズームするため（横向きも含む） */
/* 横向きスマホなど高さ 30rem 以下: パネルがランチャーの上に乗ると会話ログが数十 px しか残らないので、
   ランチャーを隠してパネルを下端まで使う（閉じるはパネル右上の ×） */
@media (max-height:480px){
  .chat-panel{bottom:0;height:calc(100vh - 3rem);height:calc(100dvh - 3rem);}
  .chat-root.is-open .chat-launch{display:none;}
  .chat-log{padding-top:0.75rem;}
}
@media (prefers-reduced-motion: reduce){
  .chat-dots i{animation:none;opacity:.7;}
}