@charset "UTF-8";
/* ==========================================================================
   upto-child 独自スタイル
   デザイン参照: ../../../upto-design/（HTML / assets/site.css）
   - 共通スタイル（site.css）+ 各ページ固有スタイル（各 HTML の <style>）を統合。
   - Google Fonts は functions.php の enqueue 済みのため、ここでは @import しない。
   ========================================================================== */

/* ==========================================================================
   1. 共通（site.css 由来）
   ========================================================================== */
:root{
  /* ===== palette — full-black editorial =====
     リデザイン方針: 旧ブルー基調 → 黒モノクロームのエディトリアル。
     既存クラスとの互換のためトークン名は維持し、値だけ反転/再定義する。
     旧: --ink=濃紺(文字) / --bg=白 / --blue=青(アクセント)
     新: --ink=オフホワイト(文字) / --bg=純黒 / --blue=白(エディトリアルなアクセント=手描きの白に同調)
     方針: 完全モノクローム。青系は1色も使わず、アクセントは白/グレーのみで構成する。 */
  --ink:        #f2f2f2;   /* primary text (offwhite) */
  --ink-soft:   #c4c4c4;   /* secondary text */
  --muted:      #8c8c8c;   /* muted / captions */
  --line:       #2a2a2a;   /* hairline on black */
  --line-soft:  #1b1b1b;   /* fainter hairline */
  --bg:         #000000;   /* page background (pure black) */
  --bg-soft:    #0a0a0a;   /* raised panel band */
  --bg-blue:    #050505;   /* dark feature band (旧 deep blue section) */

  --surface:    #0d0d0d;   /* card surface on black */
  --surface-2:  #151515;   /* hover / raised surface */
  --card-hover-border: rgba(255,255,255,.28); /* カードホバー時の枠線（全カード共通） */

  /* accent: 完全モノクローム。旧 --blue 系トークンは名称を維持しつつ全て白/グレー値へ。
     青は1色も使わない。 */
  --blue:       #f2f2f2;   /* editorial accent (white) — 旧プライマリ青の置換 */
  --blue-bright:#f2f2f2;   /* link accent (white・下線で区別) */
  --blue-deep:  #000000;   /* darkest */
  --blue-tint:  #161616;   /* subtle dark tint */

  /* modern/neo レイヤーが参照するトークン（モノクロ値） */
  --ink-navy:   #050505;
  --blue-vivid: #f2f2f2;

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);

  /* 角丸はシャープ寄り（エディトリアル） */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;

  --ease: cubic-bezier(.22,.61,.36,1);

  --jp: "Zen Kaku Gothic New", "Noto Sans JP", system-ui, sans-serif;
  --jp-body: "Noto Sans JP", system-ui, sans-serif;
  --en: "Hanken Grotesk", system-ui, sans-serif;
  --display: "Archivo", "Hanken Grotesk", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
/* scroll-padding: 固定ヘッダー(80px)分。Lenis 非稼働時（reduced-motion 等）の
   ネイティブアンカージャンプでもターゲットがヘッダーに隠れないようにする */
html{ scroll-behavior:smooth; scroll-padding-top:80px; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--jp-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.85;
  font-size:16px;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:#f2f2f2; color:#000; }

/* 親テーマ Emanon のインラインCSS（body{background:#fff;color:#333} や a{color:青}）が
   子テーマCSSより後に出力されるため、全コンテンツのラッパー #upto-wrapper（ID指定）で
   フル黒エディトリアルの背景・文字色を確実に上書きする */
#upto-wrapper{ background:var(--bg); color:var(--ink); }
/* リンク色: 親テーマの a{color:#004e8e} / a:hover{color:#828990}（要素・擬似クラスのみ）には
   勝ち、.btn 等のクラス指定（ボタン文字色）には負ける最小限の特異度で継承に戻す。
   ※ ID（#upto-wrapper a）で書くとボタンの黒文字指定まで上書きして白ボタン×白文字になるため不可 */
html a{ color:inherit; }
html a:hover,
html a:active{ color:inherit; }

/* 親テーマ(Emanon)フォールバックページ（404 / 検索結果 / アーカイブ等）の可読性。
   これらは Emanon の本文ラッパ #contents を使うため、親テーマ既定の濃色テキストが
   フル黒背景に埋もれて読めない。#contents（ID特異度）で本文・見出し・ウィジェットを
   オフホワイトに上書きする。リンクは上の html a{color:inherit} で親要素の色を継承する
   ため自動で追従する。ボタン/入力は別ルールで処理済みのため色指定の対象にしない。 */
#contents,
#contents p,
#contents li,
#contents dt,
#contents dd,
#contents address,
#contents blockquote,
#contents figcaption,
#contents .article,
#contents .breadcrumb__item,
#contents .widget,
#contents label{ color:var(--ink); }
#contents h1,
#contents h2,
#contents h3,
#contents h4,
#contents h5,
#contents h6,
#contents .wp-block-heading,
#contents .widgettitle{ color:#fff; }
/* サイドバー・本文内のリンク（ボタンを除く）も明色で可読にする。
   Emanon のクラス指定リンク色（最近の投稿/コメント/カテゴリ等）に ID 特異度で勝つ。 */
#contents a:not(.wp-element-button):not(.wp-block-button__link):not(.btn){ color:var(--ink); }
#contents a:not(.wp-element-button):not(.wp-block-button__link):not(.btn):hover{ color:#fff; }

/* サイドバーなし（全幅）テンプレート template-no-sidebar.php の文書整形 */
.upto-doc{ max-width:880px; margin-inline:auto; }
.upto-doc > :first-child{ margin-top:0; }
.upto-doc h2{ font-family:var(--jp); font-weight:800; font-size:clamp(20px,2.4vw,26px); color:#fff; line-height:1.5; margin:52px 0 16px; }
.upto-doc h3{ font-family:var(--jp); font-weight:700; font-size:clamp(17px,2vw,20px); color:#fff; margin:34px 0 12px; }
.upto-doc p{ color:var(--ink-soft); line-height:2.05; margin:0 0 18px; }
.upto-doc ul,.upto-doc ol{ color:var(--ink-soft); line-height:2; margin:0 0 22px; padding-left:1.4em; }
.upto-doc li{ margin:0 0 8px; }
.upto-doc a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.upto-doc a:hover{ color:#fff; }

/* 個人情報保護方針 PDF ダウンロードのコールアウト（プライバシーポリシー冒頭） */
.upto-doc-pdf{ margin:0 0 40px; }
.upto-doc-pdf a{
  display:flex; flex-direction:column; gap:4px;
  padding:18px 22px; border:1px solid var(--line);
  text-decoration:none; transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.upto-doc-pdf a:hover{ border-color:#f2f2f2; background:rgba(255,255,255,.04); }
.upto-doc-pdf__label{
  font-family:var(--jp); font-weight:700; font-size:16px; color:#fff;
  text-decoration:underline; text-underline-offset:3px;
}
.upto-doc-pdf a:hover .upto-doc-pdf__label{ color:#fff; }
.upto-doc-pdf__meta{ font-size:12px; letter-spacing:.04em; color:var(--ink-soft); }

/* ---------- layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(72px,11vw,150px); }
.section--soft{ background:var(--bg-soft); }
.section--blue{ background:var(--bg-blue); color:#fff; }

/* ---------- english/japanese eyebrow label ---------- */
.eyebrow{
  font-family:var(--en);
  font-weight:700;
  font-size:13px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blue);
  display:inline-flex;
  align-items:center;
  gap:.7em;
  margin:0 0 22px;
}
.eyebrow::before{
  content:"";
  width:26px; height:1.5px;
  background:var(--blue);
  display:inline-block;
}
.section--blue .eyebrow{ color:var(--ink); }
.section--blue .eyebrow::before{ background:var(--ink); }
/* ユーティリティ（テンプレートのインラインstyle置換用） */
.eyebrow--center{ justify-content:center; }
.h-sec--invert{ color:#fff; }
.u-center{ text-align:center; }
/* 取引先グリッド内の注記セル（敬称略 等） */
.client .client-note{ color:var(--muted); font-family:var(--en); font-size:13px; letter-spacing:.06em; }
/* 中央寄せCTAのボタン列（about / recruit 末尾の誘導ボタン） */
.cta-actions{ display:flex; gap:16px; justify-content:center; margin-top:40px; flex-wrap:wrap; }

/* ---------- headings ---------- */
.h-sec{
  font-family:var(--jp);
  font-weight:900;
  font-size:clamp(28px,4.6vw,46px);
  line-height:1.32;
  letter-spacing:.01em;
  margin:0;
}
.h-sec .en{
  display:block;
  font-family:var(--en);
  font-weight:800;
  font-size:clamp(13px,1.4vw,15px);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:14px;
}
.lead{
  font-size:clamp(15px,1.7vw,17px);
  line-height:2.1;
  color:var(--ink-soft);
}

/* ---------- buttons ---------- */
/* エディトリアル・モノクロームボタン: 白塗り×黒文字 ⇄ ホバーで反転 */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--en);
  font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  font-size:13px;
  padding:16px 28px;
  border-radius:var(--r-sm);
  border:1px solid #f2f2f2;
  background:#f2f2f2; color:#000;
  transition:all .4s var(--ease);
  cursor:pointer;
}
.btn .arw{ transition:transform .4s var(--ease); }
.btn:hover{ background:transparent; color:#f2f2f2; border-color:#f2f2f2; }
.btn:hover .arw{ transform:translateX(5px); }
.btn--ghost{ background:transparent; color:#f2f2f2; border-color:rgba(255,255,255,.32); }
.btn--ghost:hover{ background:#f2f2f2; color:#000; border-color:#f2f2f2; }
.btn--light{ background:#f2f2f2; color:#000; border-color:#f2f2f2; }
.btn--light:hover{ background:transparent; color:#f2f2f2; border-color:#f2f2f2; }

/* ---------- header / nav ---------- */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter);
  height:80px;
  background:rgba(0,0,0,.72);
  backdrop-filter:saturate(120%) blur(14px);
  border-bottom:1px solid transparent;
  transition:height .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.site-head.scrolled{ height:64px; background:rgba(0,0,0,.92); border-color:var(--line); }
.brand{
  display:flex; align-items:center; gap:12px;
  color:var(--ink);
}
/* 手描きスクリブルの非透過JPG → mix-blend-mode:screen で黒背景を消す。
   ヘッダー背景は必ず暗色（上の .site-head 参照）。 */
.brand-logo{
  height:60px; width:auto; display:block;
  mix-blend-mode:screen;
  transition:height .35s var(--ease);
}
.site-head.scrolled .brand-logo{ height:50px; }
.brand .brand-name{
  font-family:var(--en);
  font-weight:700; font-size:18px; letter-spacing:.18em;
  color:white;
  border-left:1px solid var(--line);
  padding-left:12px;
  line-height:1.25;
  white-space:nowrap;
}
.nav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,40px); }
.nav a{
  font-size:14px; font-weight:500; color:var(--ink-soft);
  position:relative; padding:6px 0;
  transition:color .3s var(--ease);
}
.nav a .en{ display:block; font-family:var(--en); font-size:10px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; font-weight:700; }
.nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:var(--blue); transition:width .35s var(--ease);
}
.nav a:hover{ color:var(--blue); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ width:100%; }
/* ヘッダーのコンタクトボタン: 白塗りボタンのため通常時は黒文字、
   ホバー時（.btn:hover で背景が透明になる）は白文字にして可読性を確保。 */
.site-head .nav a.nav-contact{ color:#000; }
.site-head .nav a.nav-contact:hover{ color:#f2f2f2; }
.nav a[aria-current="page"]{ color:var(--blue); }
.nav .btn{ padding:12px 22px; }
.nav .btn::after{ display:none; }
.nav-toggle{ display:none; }

/* mobile nav */
@media (max-width:880px){
  .nav{
    /* 注意: inset:0 は使えない。親 .site-head の backdrop-filter により
       ヘッダーが fixed の包含ブロックになり、メニューが高さ80pxの帯にしか
       ならない（背後が透けるバグの原因）。viewport 基準の width/height で全画面化する */
    position:fixed; top:0; left:0;
    width:100vw; height:100vh; height:100dvh;
    flex-direction:column; justify-content:center; align-items:center; gap:clamp(22px,4.5vh,34px);
    padding:max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
    /* ヒーローと同じ細グリッドテクスチャの黒（トンマナ統一） */
    background-color:#000;
    background-image:
      linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size:72px 72px;
    transform:translateX(100%);
    transition:transform .45s var(--ease); z-index:90;
  }
  .nav.open{ transform:none; }
  .nav a{ font-size:24px; font-weight:700; color:var(--ink); text-align:center; padding:4px 0; }
  .nav a .en{ font-size:11px; text-align:center; margin-top:6px; }
  /* 下線ホバー演出はタッチでは不要・中央寄せ大文字では崩れるため無効化 */
  .nav a::after{ display:none; }
  .nav .btn{ margin-top:14px; padding:16px 36px; font-size:14px; }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; z-index:95;
    width:40px; height:40px; align-items:center; justify-content:center;
    cursor:pointer;
    /* 親テーマの button{-webkit-appearance:button} で iOS ネイティブの白ボタン描画に
       なるのを打ち消す（白い四角＋白い線でハンバーガーが見えなくなる） */
    -webkit-appearance:none; appearance:none;
    border:0; border-radius:0; padding:0; box-shadow:none;
  }
  /* 親テーマの button{background:#3f5973} / button:hover{background:#8ba0b6} を打ち消す。
     タップ後に hover 状態が残留し青灰色の四角になるため :hover/:active も明示 */
  .site-head .nav-toggle,
  .site-head .nav-toggle:hover,
  .site-head .nav-toggle:active{ background:transparent; }
  .nav-toggle span{ width:26px; height:2px; background:var(--ink); transition:.35s var(--ease); }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* ---------- page hero (sub pages) ---------- */
.page-hero{
  padding-top:170px; padding-bottom:64px;
  background:var(--bg-soft);
  border-bottom:1px solid var(--line);
  position:relative; overflow:hidden;
}
.page-hero .en-big{
  font-family:var(--display); font-weight:900;
  font-size:clamp(58px,13vw,150px);
  letter-spacing:-.03em; line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.10);
  position:absolute; right:var(--gutter); bottom:-12px;
  pointer-events:none; user-select:none;
}
.page-hero h1{
  font-family:var(--jp); font-weight:900;
  font-size:clamp(30px,5vw,52px); margin:0; letter-spacing:.02em;
}
.page-hero .crumb{
  font-family:var(--en); font-size:12px; letter-spacing:.1em; color:var(--muted);
  margin-bottom:18px; display:flex; gap:10px; align-items:center;
}
.page-hero .crumb a:hover{ color:var(--blue); }

/* ---------- footer（フル黒エディトリアル）---------- */
.site-foot{ background:#000; color:var(--ink-soft); border-top:1px solid var(--line); }
.site-foot .wrap{ padding-block:clamp(56px,8vw,90px); }
.foot-top{ display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap; padding-bottom:46px; border-bottom:1px solid var(--line); }
.foot-brand .brand{ display:inline-flex; align-items:center; gap:14px; }
/* フッターの手描きロゴも screen 合成（背景は黒） */
.foot-brand .brand-logo{ height:42px; width:auto; display:block; mix-blend-mode:screen; }
.foot-brand .brand-name{
  font-family:var(--en); font-weight:700; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
  border-left:1px solid var(--line); padding-left:12px; line-height:1.3; white-space:nowrap;
}
.foot-brand p{ color:var(--muted); font-size:13.5px; max-width:28ch; margin:24px 0 0; line-height:2; }
.foot-nav{ display:flex; gap:clamp(40px,7vw,96px); flex-wrap:wrap; }
.foot-nav h4{ font-family:var(--en); font-size:11px; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; margin:0 0 18px; font-weight:700; }
.foot-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.foot-nav a{ font-size:14px; color:var(--ink-soft); transition:color .3s; }
.foot-nav a:hover{ color:#fff; }
.foot-bottom{ padding-top:26px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.foot-bottom small{ font-family:var(--en); font-size:11.5px; letter-spacing:.08em; color:var(--muted); }
.foot-pmark{ display:inline-flex; background:#fff; padding:8px; border-radius:var(--r-sm); line-height:0; transition:opacity .3s; }
.foot-pmark:hover{ opacity:.85; }
.foot-pmark img{ display:block; width:108px; height:auto; }

/* フッターの電話（click-to-call） */
.foot-tel{ margin:16px 0 0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.foot-tel__lab{ font-family:var(--en); font-size:11px; letter-spacing:.16em; color:var(--muted); font-weight:700; }
.foot-tel__num{ font-family:var(--en); font-weight:700; font-size:20px; letter-spacing:.02em; color:var(--ink); }
.foot-tel__num:hover{ color:#fff; }
.foot-tel__sub{ font-size:12px; color:var(--muted); }

/* お問い合わせ aside の電話リンク */
.info-row .tel-link:hover{ color:#fff; text-decoration:underline; text-underline-offset:2px; }

/* モバイル固定CTAバー（SPのみ表示） */
.mobile-cta{ display:none; }
@media (max-width:760px){
  .mobile-cta{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:grid; grid-template-columns:1fr 1fr;
    background:rgba(0,0,0,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border-top:1px solid var(--line);
  }
  .mobile-cta__btn{ display:flex; align-items:center; justify-content:center; padding:15px 8px; font-family:var(--en); font-weight:700; font-size:14px; letter-spacing:.04em; }
  .mobile-cta__tel{ color:var(--ink); border-right:1px solid var(--line); }
  .mobile-cta__contact{ color:#000; background:#f2f2f2; }
  .mobile-cta__contact:hover{ color:#000; }
  body{ padding-bottom:54px; }
  /* モバイルナビ展開中はバーを隠す */
  body:has(.nav.open) .mobile-cta{ display:none; }
}

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- スクロール連動パララックス（Lenis 駆動）---------- */
[data-parallax]{ will-change:transform; }
@media (prefers-reduced-motion:reduce){
  [data-parallax]{ transform:none !important; }
}


/* ---------- misc shared ---------- */
.tag-line{ font-family:var(--en); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--blue); font-weight:700; }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* 画像プレースホルダ（image-slot 代替）。テンプレートで .upto-img-slot を使用 */
.upto-img-slot{
  display:block; width:100%; min-height:380px;
  background:
    repeating-linear-gradient(45deg,#0c0c0c,#0c0c0c 14px,#141414 14px,#141414 28px);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
.upto-img-slot--rounded{ border-radius:14px; }
/* 実画像が設定された場合（カスタマイザー upto_hero_image）。縞プレースホルダを上書き */
.upto-img-slot.is-filled{ background-size:cover; background-position:center; background-repeat:no-repeat; }

/* ==========================================================================
   2. HOME（index.html 由来）
   ========================================================================== */
.hero{ position:relative; padding-top:80px; overflow:hidden; background:#000; }
/* 黒地に細グリッドのテクスチャ（エディトリアル） */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask:linear-gradient(180deg,#000,transparent 80%);
  mask:linear-gradient(180deg,#000,transparent 80%);
}
/* ヒーロー右側の装飾レイヤー: 縦長スクリブル(logo-1.png)を screen 合成＋低opacityで
   背景に溶け込ませる。はみ出しトリミング＋左方向フェードで本文タイポに干渉させない。
   主役はあくまでキャッチコピー。z-index は背景(0)と本文(.hero-inner=2)の中間=1。 */
.hero-scribble{
  position:absolute; right:-4%; top:50%; transform:translateY(-50%); z-index:1;
  width:auto; height:min(88%,760px); max-width:46vw;
  mix-blend-mode:screen; opacity:.2; filter:grayscale(1) contrast(1.05);
  -webkit-mask:linear-gradient(90deg, transparent 0%, #000 40%);
  mask:linear-gradient(90deg, transparent 0%, #000 40%);
  pointer-events:none; user-select:none;
}
/* モバイル: 右寄せ縦長配置をやめ、ファーストビュー上部の背景として
   右上に大きく置き、下方向へフェードさせて見出しと干渉させない */
@media (max-width:880px){
  .hero-scribble{
    right:-18vw; top:-6vw; transform:none;
    height:auto; width:88vw; max-width:none;
    opacity:.17;
    -webkit-mask:linear-gradient(200deg, #000 22%, transparent 58%);
    mask:linear-gradient(200deg, #000 22%, transparent 58%);
  }
}
/* タイポグラフィ主役: 1カラムで大胆に見出しを置くエディトリアル構成 */
.hero-inner{
  position:relative; z-index:2;
  display:flex; align-items:center;
  min-height:min(94vh,940px);
}
.hero-copy{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(48px,9vw,128px) var(--gutter) clamp(48px,8vw,112px);
  position:relative; z-index:3; width:100%; max-width:1100px;
}
.hero-eyebrow{
  font-family:var(--en); font-weight:700; font-size:12px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--ink);
  display:flex; align-items:center; gap:14px; margin-bottom:clamp(26px,3vw,40px);
}
.hero-eyebrow::before{ content:""; width:46px; height:1px; background:var(--ink); }
/* ヒーローの主役タイポ: 画面いっぱいに大胆に */
.hero-title{
  font-family:var(--jp); font-weight:900; margin:0;
  font-size:clamp(52px,12vw,100px); line-height:.98; letter-spacing:-.02em;
  color:var(--ink);
}
.hero-title b{ color:var(--ink); font-weight:900; }
.hero-title .yell{ position:relative; display:inline-block; }
.hero-title .yell::after{ content:"！"; color:var(--ink); }
.hero .sub{
  margin:clamp(30px,4vw,46px) 0 0; max-width:46ch; font-size:clamp(15px,1.7vw,17px);
  line-height:2.1; color:var(--ink-soft);
}
.hero .en-line{
  font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.24em;
  color:var(--muted); margin-top:28px; text-transform:uppercase;
}
.hero-cta{ display:flex; gap:16px; margin-top:clamp(34px,4vw,52px); flex-wrap:wrap; }
/* 背景の巨大ワードマークは細いアウトラインで（黒地に白の輪郭） */
.hero-watermark{
  position:absolute; left:var(--gutter); bottom:-3vw; z-index:1;
  font-family:var(--display); font-weight:900; font-size:clamp(120px,24vw,300px);
  letter-spacing:-.05em; line-height:.8;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.06);
  pointer-events:none; user-select:none;
}
@media (max-width:880px){
  .hero-inner{ min-height:auto; }
  .hero-copy{ padding:128px var(--gutter) 72px; }
  .hero-title{ font-size:clamp(46px,15vw,96px); }
}

/* intro statement */
.intro{ position:relative; }
.intro-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px,7vw,90px); align-items:center; }
.intro h2{ font-family:var(--jp); font-weight:900; font-size:clamp(26px,3.4vw,40px); line-height:1.45; margin:0; }
.intro h2 mark{ background:#f2f2f2; color:#000; padding:.02em .18em; }
.intro p{ margin:0 0 22px; }
.intro p:last-child{ margin-bottom:0; }

/* strengths */
.str-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,30px); margin-top:60px; }
.str-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(28px,3vw,40px); position:relative; overflow:hidden;
  transition:transform .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease);
}
.str-card:hover{ transform:translateY(-6px); background:var(--surface-2); border-color:var(--card-hover-border); }
.str-card .no{ font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:.16em; color:var(--muted); }
.str-card .ic{ width:54px; height:54px; margin:18px 0 26px; color:var(--ink); }
.str-card h3{ font-family:var(--jp); font-weight:700; font-size:21px; margin:0 0 14px; letter-spacing:.02em; color:var(--ink); }
.str-card h3 .en{ display:block; font-family:var(--display); font-size:11px; letter-spacing:.16em; color:var(--muted); text-transform:uppercase; font-weight:700; margin-top:6px; }
.str-card p{ font-size:14.5px; color:var(--ink-soft); margin:0; line-height:2; }
.str-card .big-no{ position:absolute; right:-10px; top:-30px; font-family:var(--display); font-weight:900; font-size:130px; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.05); z-index:0; line-height:1; }
.str-card>*{ position:relative; z-index:1; }
@media (max-width:880px){ .intro-grid{ grid-template-columns:1fr; } .str-grid{ grid-template-columns:1fr; } }

/* philosophy band */
.phil{ position:relative; overflow:hidden; }
.phil .bgword{ position:absolute; right:-2%; top:50%; transform:translateY(-50%); font-family:var(--display); font-weight:900; font-size:clamp(140px,22vw,320px); color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.05); letter-spacing:-.04em; line-height:1; pointer-events:none; }
/* 区切りモチーフ: 縦長スクリブル(logo-1.png)を screen 合成・極薄で背景に溶かす。
   縦長比率に合わせ高さ基準でサイズ指定し、左端に上品に添える。 */
.phil-scribble{
  position:absolute; left:-2%; top:50%; transform:translateY(-50%) rotate(-4deg); z-index:1;
  width:auto; height:min(82%,560px); max-width:40vw;
  mix-blend-mode:screen; opacity:.1;
  pointer-events:none; user-select:none;
}
@media (max-width:760px){ .phil-scribble{ display:none; } }
.phil-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(28px,4vw,56px); margin-top:56px; position:relative; z-index:2; }
.phil-card{ border:1px solid rgba(255,255,255,.16); border-radius:var(--r-lg); padding:clamp(32px,3.6vw,48px); background:rgba(255,255,255,.03); }
.phil-card .k{ font-family:var(--en); font-weight:800; font-size:13px; letter-spacing:.2em; color:#cfcfcf; }
.phil-card h3{ font-family:var(--jp); font-weight:900; font-size:clamp(23px,2.7vw,32px); margin:16px 0 20px; color:#fff; line-height:1.4; }
.phil-card p{ color:#b8b8b8; font-size:15px; line-height:2.05; margin:0; }
@media (max-width:760px){ .phil-grid{ grid-template-columns:1fr; } }

/* clients */
.clients-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; margin-top:54px; }
.client{ background:var(--surface); padding:34px 24px; display:flex; align-items:center; justify-content:center; min-height:118px; text-align:center; transition:background .4s var(--ease); }
.client:hover{ background:var(--surface-2); }
.client span{ font-family:var(--jp); font-weight:700; font-size:15px; color:var(--ink-soft); letter-spacing:.02em; line-height:1.6; }
@media (max-width:880px){ .clients-grid{ grid-template-columns:repeat(2,1fr); } }

/* CTA */
.cta{ background:var(--bg-soft); }
.cta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.cta-card{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  padding:clamp(36px,4vw,56px); color:#fff; min-height:240px;
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:transform .5s var(--ease);
}
.cta-card{ border:1px solid var(--line); }
.cta-card:hover{ transform:translateY(-5px); border-color:var(--card-hover-border); }
.cta-card.recruit{ background:linear-gradient(135deg,#101010,#000); }
.cta-card.contact{ background:#080808; }
.cta-card .k{ font-family:var(--en); font-weight:800; font-size:12px; letter-spacing:.2em; color:rgba(255,255,255,.7); text-transform:uppercase; }
.cta-card h3{ font-family:var(--jp); font-weight:900; font-size:clamp(24px,3vw,34px); margin:10px 0 8px; }
.cta-card p{ color:rgba(255,255,255,.78); font-size:14px; margin:0 0 26px; }
.cta-card .go{ font-family:var(--en); font-weight:700; letter-spacing:.06em; font-size:14px; display:inline-flex; gap:12px; align-items:center; }
.cta-card .arw{ transition:transform .4s var(--ease); }
.cta-card:hover .arw{ transform:translateX(6px); }
.cta-card .bgno{ position:absolute; right:18px; top:-26px; font-family:var(--en); font-weight:800; font-size:150px; color:rgba(255,255,255,.06); line-height:1; }
@media (max-width:760px){ .cta-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   3. ABOUT（about.html 由来）
   ========================================================================== */
/* 代表挨拶 */
/* 代表挨拶: 顔写真なし・本文のみの単一カラム（全幅） */
.message-grid{ width:100%; }
.message-body{ width:100%; }
.message-body h2{ font-family:var(--jp); font-weight:900; font-size:clamp(26px,3.6vw,42px); line-height:1.45; margin:0 0 34px; letter-spacing:.01em; }
.message-body h2 b{ color:var(--blue); }
.message-body p{ margin:0 0 24px; color:var(--ink-soft); font-size:16px; line-height:2.15; }
.message-body p:last-child{ margin-bottom:0; }
.message-body .sign{ margin-top:40px; display:flex; align-items:baseline; gap:16px; padding-top:28px; border-top:1px solid var(--line); }
.message-body .sign .lab{ font-size:13px; color:var(--muted); }
.message-body .sign .who{ font-family:var(--jp); font-weight:700; font-size:20px; }

/* 企業理念 */
.mv-block{ display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,5vw,70px); align-items:start; padding:clamp(40px,5vw,64px) 0; }
.mv-block + .mv-block{ border-top:1px solid var(--line); }
.mv-key{ font-family:var(--en); font-weight:800; font-size:clamp(15px,1.6vw,17px); letter-spacing:.16em; color:var(--blue); writing-mode:horizontal-tb; }
.mv-key .num{ display:block; font-size:clamp(40px,6vw,72px); line-height:1; color:white; margin-bottom:14px; }
.mv-content h3{ font-family:var(--jp); font-weight:900; font-size:clamp(24px,3.2vw,38px); line-height:1.4; margin:0 0 24px; }
.mv-content p{ margin:0 0 20px; color:var(--ink-soft); font-size:15.5px; line-height:2.1; }
.mv-content p:last-child{ margin:0; }
.mv-content .hi{ background:linear-gradient(transparent 60%, var(--blue-tint) 60%); }
@media (max-width:680px){ .mv-block{ grid-template-columns:1fr; gap:18px; } }

/* 取引先 */
.cl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.cl-grid .client{ background:var(--surface); padding:38px 24px; min-height:128px; display:flex; align-items:center; justify-content:center; text-align:center; transition:background .4s var(--ease); }
.cl-grid .client:hover{ background:var(--surface-2); }
.cl-grid .client span{ font-family:var(--jp); font-weight:700; font-size:15.5px; color:var(--ink-soft); line-height:1.6; }
@media (max-width:760px){ .cl-grid{ grid-template-columns:repeat(2,1fr); } }

/* 会社概要 */
/* 会社概要: 白の角丸カード＋ブルーENラベル＋行ホバー（サイトのカード調に統一） */
.company-table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
}
.company-table tr{ transition:background .3s var(--ease); }
.company-table tbody tr:hover{ background:var(--surface-2); }
.company-table th,.company-table td{
  text-align:left; padding:22px clamp(20px,3vw,34px);
  /* 親テーマの table th{background:#fafafa; border:1px solid #b8bcc0} を打ち消す */
  background:transparent; border:0;
  border-bottom:1px solid var(--line-soft); vertical-align:top; font-size:15.5px;
}
.company-table tbody tr:last-child th,
.company-table tbody tr:last-child td{ border-bottom:0; }
.company-table th{
  width:240px; font-family:var(--jp); font-weight:700; color:var(--ink);
  white-space:nowrap;
}
.company-table th::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:2px;
  background:var(--blue); margin-right:11px; vertical-align:middle;
}
.company-table th .en{ display:block; font-family:var(--en); font-size:10px; letter-spacing:.14em; color:var(--blue); text-transform:uppercase; font-weight:700; margin:5px 0 0 17px; }
.company-table td{ color:var(--ink-soft); line-height:1.95; }
.company-table td .ph{ color:var(--blue); background:var(--blue-tint); padding:2px 10px; border-radius:5px; font-size:13px; font-weight:600; }
@media (max-width:680px){
  .company-table th,.company-table td{ display:block; width:auto; }
  .company-table th{ border-bottom:0; padding-bottom:4px; white-space:normal; }
  .company-table td{ padding-top:6px; padding-bottom:22px; }
  .company-table th .en{ margin-left:17px; }
}

/* ==========================================================================
   4. RECRUIT（recruit.html 由来）
   ========================================================================== */
/* 画像スロット廃止に伴いテキスト1カラム・全幅 */
.rec-lead h2{ font-family:var(--jp); font-weight:900; font-size:clamp(28px,4.4vw,48px); line-height:1.42; margin:0 0 26px; }
.rec-lead h2 b{ color:var(--blue); }
.rec-lead p{ color:var(--ink-soft); font-size:16px; line-height:2.1; margin:0 0 20px; }
.rec-lead p:last-child{ margin:0; }

/* 求める人物像 */
.persona{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,26px); margin-top:54px; }
.persona-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(28px,3vw,40px); transition:transform .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease); }
.persona-card:hover{ transform:translateY(-6px); background:var(--surface-2); border-color:var(--card-hover-border); }
.persona-card .q{ font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:.16em; color:var(--muted); }
.persona-card h3{ font-family:var(--jp); font-weight:700; font-size:20px; line-height:1.55; margin:16px 0 12px; color:var(--ink); }
.persona-card p{ font-size:14.5px; color:var(--ink-soft); line-height:2; margin:0; }
@media (max-width:760px){ .persona{ grid-template-columns:1fr; } }

/* 研修ステップ */
.steps{ counter-reset:s; margin-top:54px; display:grid; gap:0; }
.step{ display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,56px); padding:clamp(28px,3.4vw,44px) 0; align-items:start; position:relative; }
.step + .step{ border-top:1px solid rgba(255,255,255,.14); }
.step .no{ font-family:var(--en); font-weight:800; font-size:clamp(34px,5vw,64px); color:#fff; line-height:1; }
.step h3{ font-family:var(--jp); font-weight:700; font-size:clamp(19px,2.2vw,25px); margin:0 0 12px; color:#fff; }
.step p{ margin:0; color:#b8b8b8; font-size:15px; line-height:2; max-width:62ch; }

/* entry */
.entry{ text-align:center; }
.entry .big{ font-family:var(--jp); font-weight:900; font-size:clamp(30px,5vw,56px); line-height:1.35; margin:24px 0 0; }
.entry .big b{ color:var(--blue); }

/* ==========================================================================
   5. CONTACT（contact.html 由来）
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(40px,6vw,90px); align-items:start; }
.contact-aside h2{ font-family:var(--jp); font-weight:900; font-size:clamp(24px,3.2vw,36px); line-height:1.45; margin:0 0 22px; }
.contact-aside p{ color:var(--ink-soft); font-size:15.5px; line-height:2.1; margin:0 0 30px; }
.info-row{ display:flex; flex-direction:column; gap:6px; padding:22px 0; border-top:1px solid var(--line); }
.info-row:last-child{ border-bottom:1px solid var(--line); }
.info-row .lab{ font-family:var(--en); font-size:11px; letter-spacing:.16em; color:var(--blue); text-transform:uppercase; font-weight:700; }
.info-row .val{ font-family:var(--jp); font-weight:700; font-size:18px; }
.info-row .val .ph{ color:var(--blue); background:var(--blue-tint); padding:2px 10px; border-radius:5px; font-size:14px; }
.info-row .sub{ font-size:13px; color:var(--muted); }

/* form */
.form{ background:transparent; }
.field{ margin-bottom:26px; }
.field > label{ display:flex; align-items:center; gap:10px; font-family:var(--jp); font-weight:700; font-size:14px; margin-bottom:10px; }
.field .req{ font-family:var(--en); font-size:10px; letter-spacing:.08em; color:#000; background:#f2f2f2; padding:3px 8px; border-radius:var(--r-sm); font-weight:700; }
.field .opt{ font-family:var(--en); font-size:10px; letter-spacing:.08em; color:var(--muted); background:var(--surface-2); padding:3px 8px; border-radius:var(--r-sm); font-weight:700; }
/* セレクタに .form を前置して特異度を上げる:
   親テーマの input[type="text"]{background:#fff;...}（同特異度・後勝ち）に負けると
   白背景×オフホワイト文字で入力内容が見えなくなるため */
/* チェックボックス/ラジオは除外（width:100% 等が当たると巨大化する） */
.form .field input:not([type="checkbox"]):not([type="radio"]),.form .field textarea,.form .field select{
  width:100%; font-family:var(--jp-body); font-size:15px; color:var(--ink);
  padding:15px 16px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface); transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.form .privacy input[type="checkbox"]{ width:18px; height:18px; flex:0 0 auto; margin-top:4px; accent-color:#f2f2f2; }
.form .field textarea{ resize:vertical; min-height:150px; line-height:1.8; }
.form .field input:focus,.form .field textarea:focus,.form .field select:focus{
  outline:none; border-color:var(--ink); background:var(--surface-2); box-shadow:0 0 0 3px rgba(255,255,255,.08);
}
.form .field.invalid input,.form .field.invalid textarea,.form .field.invalid select{ border-color:#e0524d; background:#1a0f0f; }
.field .err{ color:#d33; font-size:12.5px; margin-top:7px; display:none; }
.field.invalid .err{ display:block; }
.seg{ display:flex; gap:10px; flex-wrap:wrap; }
.seg label{ flex:1; min-width:140px; cursor:pointer; }
.seg input{ position:absolute; opacity:0; width:0; height:0; }
.seg .chip{ display:block; text-align:center; padding:14px 12px; border:1px solid var(--line); border-radius:var(--r-md); font-weight:700; font-size:14px; background:var(--surface); color:var(--ink-soft); transition:all .3s var(--ease); }
.seg input:checked + .chip{ border-color:#f2f2f2; background:#f2f2f2; color:#000; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.privacy{ display:flex; gap:12px; align-items:flex-start; background:var(--bg-soft); padding:18px 20px; border-radius:var(--r-md); font-size:13.5px; color:var(--ink-soft); line-height:1.8; }
.privacy input{ margin-top:5px; width:18px; height:18px; accent-color:var(--blue); flex:none; }
.privacy .privacy-link{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.privacy .privacy-link:hover{ color:#fff; }
.form .btn{ width:100%; justify-content:center; font-size:15px; padding:19px; margin-top:8px; }
.form .btn:disabled{ opacity:.5; cursor:not-allowed; }
/* フォールバックフォーム送信時の「準備中」案内（main.js が生成） */
.form-pending{ margin-top:18px; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg-soft); color:var(--ink-soft); font-size:13.5px; line-height:1.9; }
/* フォールバックフォーム下部の注記 */
.form-note{ font-size:12px; color:var(--muted); margin-top:16px; text-align:center; }
.form-success{ display:none; text-align:center; padding:60px 20px; }
.form-success.show{ display:block; }
.form-success .ic{ width:72px; height:72px; margin:0 auto 26px; color:var(--blue); }
.form-success h3{ font-family:var(--jp); font-weight:900; font-size:28px; margin:0 0 14px; }
.form-success p{ color:var(--ink-soft); font-size:15px; line-height:2; margin:0; }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; } .row2{ grid-template-columns:1fr; } }

/* ==========================================================================
   6. NEWS（お知らせ：一覧 home.php / 個別 single.php / TOP 抜粋）
   ========================================================================== */
/* 一覧リスト */
.news-list{ border-top:1px solid var(--line); margin-top:54px; } /* clients-grid と揃える */
.news-item{
  display:grid; grid-template-columns:auto auto 1fr auto; gap:clamp(16px,2.4vw,32px);
  align-items:center; padding:24px clamp(8px,1.4vw,18px);
  border-bottom:1px solid var(--line);
  transition:background .4s var(--ease);
}
.news-item:hover{ background:var(--bg-soft); }
.news-date{ font-family:var(--en); font-weight:700; font-size:14px; letter-spacing:.04em; color:var(--muted); white-space:nowrap; }
.news-cat{
  font-family:var(--jp); font-weight:700; font-size:12px; letter-spacing:.04em;
  color:var(--blue); background:var(--blue-tint);
  padding:4px 12px; border-radius:999px; white-space:nowrap;
}
.news-title{ font-family:var(--jp); font-weight:700; font-size:16px; line-height:1.7; color:var(--ink); transition:color .3s var(--ease); }
.news-item:hover .news-title{ color:var(--blue); }
.news-arw{ font-family:var(--en); color:var(--blue); transition:transform .4s var(--ease); }
.news-item:hover .news-arw{ transform:translateX(5px); }
@media (max-width:680px){
  .news-item{ grid-template-columns:1fr auto; gap:8px 14px; align-items:start; }
  .news-date{ grid-row:1; }
  .news-cat{ grid-row:1; grid-column:2; justify-self:end; }
  .news-title{ grid-row:2; grid-column:1 / -1; }
  .news-arw{ display:none; }
}

/* 空状態 */
.news-empty{ padding:56px 8px; text-align:center; color:var(--muted); font-size:15px; border-bottom:1px solid var(--line); }

/* ページネーション */
.news-pagination{ margin-top:44px; }
.news-pagination .nav-links{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; align-items:center; }
.news-pagination .page-numbers{
  font-family:var(--en); font-weight:700; font-size:14px;
  min-width:44px; height:44px; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--line); border-radius:999px; color:var(--ink-soft);
  transition:all .3s var(--ease);
}
.news-pagination .page-numbers:hover{ border-color:var(--blue); color:var(--blue); }
.news-pagination .page-numbers.current{ background:#f2f2f2; border-color:#f2f2f2; color:#000; }
.news-pagination .page-numbers.dots{ border:0; min-width:auto; }

/* 個別記事 */
.news-single .news-meta{ display:flex; gap:14px; align-items:center; margin-bottom:18px; }
.news-single .news-meta .news-date{ font-size:14px; }
.news-single .news-thumb{ margin:0 0 40px; border-radius:var(--r-lg); overflow:hidden; }
.news-single .news-thumb img{ width:100%; height:auto; }
.news-body{ max-width:820px; font-size:16px; line-height:2.05; color:var(--ink-soft); }
.news-body > *:first-child{ margin-top:0; }
.news-body h2{ font-family:var(--jp); font-weight:900; font-size:clamp(22px,3vw,30px); line-height:1.4; color:var(--ink); margin:48px 0 20px; }
.news-body h3{ font-family:var(--jp); font-weight:700; font-size:clamp(19px,2.4vw,23px); line-height:1.5; color:var(--ink); margin:40px 0 16px; }
.news-body p{ margin:0 0 24px; }
.news-body a{ color:var(--blue-bright); text-decoration:underline; }
.news-body a:hover{ color:var(--blue); }
.news-body ul,.news-body ol{ margin:0 0 24px; padding-left:1.4em; }
.news-body li{ margin:0 0 10px; }
.news-body img{ max-width:100%; height:auto; border-radius:var(--r-md); margin:10px 0; }
.news-body blockquote{ margin:0 0 24px; padding:16px 24px; border-left:3px solid var(--blue); background:var(--bg-soft); border-radius:0 var(--r-md) var(--r-md) 0; color:var(--ink-soft); }

/* 個別: 前後ナビ・戻る導線 */
.news-foot{ max-width:820px; margin-top:56px; padding-top:36px; border-top:1px solid var(--line); }
.news-postnav{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:32px; }
.news-postnav a{ font-family:var(--jp); font-weight:700; font-size:14px; color:var(--ink-soft); max-width:46%; transition:color .3s var(--ease); }
.news-postnav a:hover{ color:var(--blue); }
.news-postnav .news-postnav__k{ display:block; font-family:var(--en); font-size:11px; letter-spacing:.12em; color:var(--muted); text-transform:uppercase; margin-bottom:6px; }

/* TOP の最新お知らせセクション */
.home-news .home-news__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }
@media (max-width:680px){ .home-news .home-news__head{ align-items:flex-start; } }


/* ============================================================
   MODERN TOP PAGE（neo）
   参照: upto-design/index-neo.html
   すべて body.upto-front-neo 配下にスコープし、他ページ・他TOPに影響させない。
   body クラスの付与は functions.php upto_body_class() が担当。
   ============================================================ */
.upto-front-neo{ --display:"Archivo","Hanken Grotesk",system-ui,sans-serif; }
body.upto-front-neo{ background:#000000; }

/* ヘッダーを暗転（neo のみ） */
.upto-front-neo .site-head{ background:rgba(0,0,0,.55); }
.upto-front-neo .site-head .brand,
.upto-front-neo .site-head .nav a{ color:#fff; }
.upto-front-neo .site-head .nav a{ color:rgba(255,255,255,.82); }
.upto-front-neo .site-head .nav a .en{ color:rgba(255,255,255,.5); }
.upto-front-neo .site-head .brand small{ color:rgba(255,255,255,.6); border-color:rgba(255,255,255,.22); }
.upto-front-neo .site-head.scrolled{ background:rgba(0,0,0,.9); border-color:rgba(255,255,255,.1); }
.upto-front-neo .nav-toggle span{ background:#fff; }

/* ---- HERO ---- */
.upto-front-neo .xhero{
  position:relative; min-height:100svh; display:grid;
  grid-template-columns:1.35fr .65fr; align-items:stretch;
  background:
    radial-gradient(120% 90% at 12% 18%, #1a1a1a 0%, transparent 55%),
    linear-gradient(160deg,#000000 0%, #000000 40%, #0a0a0a 100%);
  overflow:hidden;
}
.upto-front-neo .xhero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px; -webkit-mask:linear-gradient(180deg, #000, transparent 75%); mask:linear-gradient(180deg, #000, transparent 75%);
}
.upto-front-neo .xhero-copy{
  position:relative; z-index:3; align-self:center;
  padding:128px var(--gutter) 96px; max-width:980px;
}
.upto-front-neo .xhero-eyebrow{
  font-family:var(--en); font-weight:700; font-size:13px; letter-spacing:.26em;
  text-transform:uppercase; color:#cfcfcf; display:flex; align-items:center; gap:14px;
  margin-bottom:30px;
}
.upto-front-neo .xhero-eyebrow::before{ content:""; width:42px; height:1.5px; background:#cfcfcf; }
.upto-front-neo .xhero-jp{
  font-family:var(--jp); font-weight:700; color:#fff;
  font-size:clamp(17px,2.2vw,26px); letter-spacing:.06em; margin:0 0 22px; line-height:1.6;
}
.upto-front-neo .xhero-jp b{ color:#cfcfcf; }
.upto-front-neo .xhero-big{
  font-family:var(--display); font-weight:900; color:#fff;
  font-size:clamp(54px,10.5vw,150px); line-height:.9; letter-spacing:-.025em;
  margin:0; text-transform:uppercase;
}
.upto-front-neo .xhero-big .ln{ display:block; overflow:hidden; }
.upto-front-neo .xhero-big .ln > span{ display:block; transform:translateY(110%); transition:transform 1s var(--ease); }
.upto-front-neo .xhero.ready .xhero-big .ln > span{ transform:none; }
.upto-front-neo .xhero-big .ln:nth-child(2) > span{ transition-delay:.08s; }
.upto-front-neo .xhero-big .ln:nth-child(3) > span{ transition-delay:.16s; }
.upto-front-neo .xhero-big .hollow{
  color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.55);
}
.upto-front-neo .xhero-big .accent{ color:#f2f2f2; }
.upto-front-neo .xhero-sub{
  margin:38px 0 0; max-width:46ch; color:#b8b8b8; font-size:clamp(14px,1.5vw,16px); line-height:2.05;
  opacity:0; transform:translateY(16px); transition:.9s var(--ease) .5s;
}
.upto-front-neo .xhero.ready .xhero-sub{ opacity:1; transform:none; }
.upto-front-neo .xhero-cta{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; opacity:0; transform:translateY(16px); transition:.9s var(--ease) .62s; }
.upto-front-neo .xhero.ready .xhero-cta{ opacity:1; transform:none; }
.upto-front-neo .xhero-cta .btn{ background:#f2f2f2; border-color:#f2f2f2; }
.upto-front-neo .xhero-cta .btn:hover{ background:#fff; border-color:#fff; color:#000000; }
.upto-front-neo .xhero-cta .btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.upto-front-neo .xhero-cta .btn--ghost:hover{ background:#fff; color:#000000; border-color:#fff; }

.upto-front-neo .xhero-media{ position:relative; z-index:2; }
.upto-front-neo .xhero-media .upto-img-slot{ position:absolute; inset:0; width:100%; height:100%; min-height:0; border-radius:0; }
.upto-front-neo .xhero-media::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg,#000000 0%, transparent 22%, transparent 100%);
}
.upto-front-neo .xhero-scroll{
  position:absolute; left:var(--gutter); bottom:30px; z-index:4;
  font-family:var(--en); font-size:11px; letter-spacing:.2em; color:rgba(255,255,255,.6);
  display:flex; align-items:center; gap:12px; text-transform:uppercase;
}
.upto-front-neo .xhero-scroll i{ width:46px; height:1px; background:rgba(255,255,255,.4); position:relative; overflow:hidden; }
.upto-front-neo .xhero-scroll i::after{ content:""; position:absolute; inset:0; background:#f2f2f2; animation:upto-scrollline 2.2s var(--ease) infinite; }
@keyframes upto-scrollline{ 0%{ transform:translateX(-100%) } 60%,100%{ transform:translateX(100%) } }
.upto-front-neo .xhero-vert{
  position:absolute; right:26px; top:50%; transform:translateY(-50%); z-index:4;
  writing-mode:vertical-rl; font-family:var(--en); font-size:11px; letter-spacing:.3em;
  color:rgba(255,255,255,.45); text-transform:uppercase;
}
@media (max-width:980px){
  .upto-front-neo .xhero{ grid-template-columns:1fr; }
  .upto-front-neo .xhero-media{ position:absolute; inset:0; opacity:.28; }
  .upto-front-neo .xhero-media::after{ background:linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,.9)); }
  .upto-front-neo .xhero-copy{ padding:140px var(--gutter) 110px; }
  .upto-front-neo .xhero-vert{ display:none; }
}

/* ---- MARQUEE ---- */
.upto-front-neo .marquee{ background:#f2f2f2; color:#000; padding:22px 0; overflow:hidden; display:flex; gap:0; }
.upto-front-neo .marquee-track{ display:flex; gap:48px; white-space:nowrap; animation:upto-marq 26s linear infinite; padding-right:48px; }
.upto-front-neo .marquee:hover .marquee-track{ animation-play-state:paused; }
.upto-front-neo .marquee span{ font-family:var(--display); font-weight:800; font-size:clamp(20px,3vw,34px); letter-spacing:.02em; text-transform:uppercase; display:inline-flex; align-items:center; gap:48px; }
.upto-front-neo .marquee span::after{ content:"\271A"; color:rgba(0,0,0,.4); font-size:.7em; }
@keyframes upto-marq{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){
  .upto-front-neo .marquee-track,
  .upto-front-neo .cl-track{ animation:none }
  .upto-front-neo .xhero-big .ln > span{ transform:none }
  .upto-front-neo .xhero-sub,
  .upto-front-neo .xhero-cta{ opacity:1; transform:none }
}

/* ---- STATS ---- */
.upto-front-neo .stats{ background:#fff; }
.upto-front-neo .stats-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:60px; }
.upto-front-neo .stats-head h2{ font-family:var(--jp); font-weight:900; font-size:clamp(24px,3vw,36px); margin:0; line-height:1.4; }
.upto-front-neo .stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.upto-front-neo .stat{ padding:48px 36px 48px 0; border-bottom:1px solid var(--line); }
.upto-front-neo .stat + .stat{ border-left:1px solid var(--line); padding-left:36px; }
.upto-front-neo .stat .lab{ font-family:var(--en); font-weight:700; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); }
.upto-front-neo .stat .num{ font-family:var(--display); font-weight:900; font-size:clamp(58px,8vw,104px); line-height:1; color:var(--ink); letter-spacing:-.03em; margin:18px 0 12px; display:flex; align-items:baseline; gap:6px; }
.upto-front-neo .stat .num em{ font-style:normal; font-size:.34em; color:var(--blue); }
.upto-front-neo .stat .jp{ font-family:var(--jp); font-weight:700; font-size:15px; color:var(--ink-soft); }
@media (max-width:760px){ .upto-front-neo .stats-grid{ grid-template-columns:1fr; } .upto-front-neo .stat{ padding:34px 0; } .upto-front-neo .stat + .stat{ border-left:0; padding-left:0; } }

/* ---- ABOUT (editorial) ---- */
.upto-front-neo .xabout{ background:#fff; position:relative; overflow:hidden; }
.upto-front-neo .xabout .wordmark{ position:absolute; right:-3%; top:8%; font-family:var(--display); font-weight:900; font-size:clamp(120px,22vw,340px); color:#f3f3f3; line-height:1; letter-spacing:-.04em; pointer-events:none; }
.upto-front-neo .xabout-grid{ display:grid; grid-template-columns:.42fr .58fr; gap:clamp(36px,5vw,80px); position:relative; z-index:2; }
.upto-front-neo .xabout-grid h2{ font-family:var(--jp); font-weight:900; font-size:clamp(30px,4.6vw,56px); line-height:1.35; margin:18px 0 0; }
.upto-front-neo .xabout-grid h2 .accent{ color:var(--blue); }
.upto-front-neo .xabout-grid p{ color:var(--ink-soft); font-size:16px; line-height:2.15; margin:0 0 22px; }
.upto-front-neo .xabout-grid p:last-of-type{ margin-bottom:34px; }
@media (max-width:880px){ .upto-front-neo .xabout-grid{ grid-template-columns:1fr; } }

/* ---- STRENGTHS (big rows) ---- */
.upto-front-neo .xstr{ background:#000000; color:#fff; }
.upto-front-neo .xstr .h-sec{ color:#fff; }
.upto-front-neo .xstr .eyebrow{ color:#cfcfcf; }
.upto-front-neo .xstr .eyebrow::before{ background:#cfcfcf; }
.upto-front-neo .xstr-list{ margin-top:64px; border-top:1px solid rgba(255,255,255,.14); }
.upto-front-neo .xstr-row{
  display:grid; grid-template-columns:120px 1fr auto; gap:clamp(20px,4vw,56px); align-items:center;
  padding:clamp(30px,4vw,52px) 0; border-bottom:1px solid rgba(255,255,255,.14);
  position:relative; transition:padding-left .5s var(--ease); text-decoration:none;
}
.upto-front-neo .xstr-row:hover{ padding-left:18px; }
.upto-front-neo .xstr-row .no{ font-family:var(--display); font-weight:900; font-size:clamp(40px,5vw,72px); color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.4); line-height:1; }
.upto-front-neo .xstr-row:hover .no{ color:#f2f2f2; -webkit-text-stroke:1.5px #f2f2f2; }
.upto-front-neo .xstr-row .main h3{ font-family:var(--jp); font-weight:800; font-size:clamp(22px,2.8vw,34px); margin:0 0 6px; color:#fff; }
.upto-front-neo .xstr-row .main .en{ font-family:var(--en); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#cfcfcf; font-weight:700; }
.upto-front-neo .xstr-row .desc{ color:#b8b8b8; font-size:15px; line-height:2; max-width:42ch; }
.upto-front-neo .xstr-row .arw{ font-family:var(--en); font-size:24px; color:rgba(255,255,255,.3); transition:.4s var(--ease); }
.upto-front-neo .xstr-row:hover .arw{ color:#f2f2f2; transform:translateX(8px); }
@media (max-width:880px){ .upto-front-neo .xstr-row{ grid-template-columns:64px 1fr; } .upto-front-neo .xstr-row .no{ font-size:36px; } .upto-front-neo .xstr-row .desc{ grid-column:1/-1; } .upto-front-neo .xstr-row .arw{ display:none; } }

/* ---- PHILOSOPHY ---- */
.upto-front-neo .xphil{ background:var(--bg-blue); color:#fff; position:relative; overflow:hidden; }
.upto-front-neo .xphil .eyebrow{ color:#cfcfcf; }
.upto-front-neo .xphil .eyebrow::before{ background:#cfcfcf; }
.upto-front-neo .xphil .bgword{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); font-family:var(--display); font-weight:900; font-size:clamp(160px,28vw,420px); color:rgba(255,255,255,.035); letter-spacing:-.05em; pointer-events:none; }
.upto-front-neo .xphil-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,40px); margin-top:56px; position:relative; z-index:2; }
.upto-front-neo .xphil-card{ border:1px solid rgba(255,255,255,.16); border-radius:var(--r-lg); padding:clamp(34px,3.8vw,52px); background:rgba(255,255,255,.03); transition:.5s var(--ease); }
.upto-front-neo .xphil-card:hover{ background:rgba(255,255,255,.12); border-color:var(--card-hover-border); transform:translateY(-6px); }
.upto-front-neo .xphil-card .k{ font-family:var(--display); font-weight:900; font-size:clamp(28px,3.2vw,40px); color:#f2f2f2; letter-spacing:.02em; }
.upto-front-neo .xphil-card h3{ font-family:var(--jp); font-weight:900; font-size:clamp(22px,2.6vw,30px); margin:16px 0 20px; color:#fff; line-height:1.4; }
.upto-front-neo .xphil-card p{ color:#b8b8b8; font-size:15px; line-height:2.05; margin:0; }
@media (max-width:760px){ .upto-front-neo .xphil-grid{ grid-template-columns:1fr; } }

/* ---- NEWS（neo では白背景セクションとして表示）---- */
.upto-front-neo .home-news{ background:#fff; }

/* ---- CLIENTS ---- */
.upto-front-neo .xclients{ background:#fff; }
.upto-front-neo .cl-marquee{ overflow:hidden; margin-top:50px; border-block:1px solid var(--line); padding:30px 0; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.upto-front-neo .cl-track{ display:flex; gap:64px; white-space:nowrap; animation:upto-marq 32s linear infinite; padding-right:64px; }
.upto-front-neo .cl-track span{ font-family:var(--jp); font-weight:700; font-size:clamp(18px,2.2vw,26px); color:var(--ink); display:inline-flex; align-items:center; gap:64px; }
.upto-front-neo .cl-track span::after{ content:"\FF0F"; color:var(--line); }
.upto-front-neo .xclients .note{ text-align:center; margin-top:28px; font-size:13px; color:var(--muted); }

/* ---- CTA ---- */
.upto-modern .xcta{ background:#000000; }
.upto-modern .xcta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.upto-modern .xcta-card{ position:relative; overflow:hidden; border-radius:var(--r-lg); padding:clamp(38px,4vw,60px); color:#fff; min-height:260px; display:flex; flex-direction:column; justify-content:flex-end; border:1px solid rgba(255,255,255,.12); transition:.5s var(--ease); text-decoration:none; }
.upto-modern .xcta-card:hover{ transform:translateY(-6px); border-color:transparent; }
.upto-modern .xcta-card.recruit{ background:linear-gradient(135deg,#1a1a1a,#000); }
.upto-modern .xcta-card.contact{ background:#0a0a0a; }
.upto-modern .xcta-card .k{ font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:.18em; color:rgba(255,255,255,.7); text-transform:uppercase; }
.upto-modern .xcta-card h3{ font-family:var(--jp); font-weight:900; font-size:clamp(24px,3vw,36px); margin:12px 0 8px; color:#fff; }
.upto-modern .xcta-card p{ color:rgba(255,255,255,.78); font-size:14px; margin:0 0 26px; }
.upto-modern .xcta-card .go{ font-family:var(--en); font-weight:700; letter-spacing:.06em; font-size:14px; display:inline-flex; gap:12px; align-items:center; }
.upto-modern .xcta-card .arw{ transition:transform .4s var(--ease); }
.upto-modern .xcta-card:hover .arw{ transform:translateX(8px); }
.upto-modern .xcta-card .bgno{ position:absolute; right:14px; top:-30px; font-family:var(--display); font-weight:900; font-size:170px; color:rgba(255,255,255,.06); line-height:1; }
@media (max-width:760px){ .upto-modern .xcta-grid{ grid-template-columns:1fr; } }


/* ============================================================
   MODERN LAYER（サイト全体モダン: about / recruit / contact 共通）
   参照: upto-design/modern/
   body.upto-modern / body.dark-head 配下にスコープし classic に非影響。
   ベース（トークン/ヘッダー/フッター/ボタン/eyebrow/h-sec/フォーム/persona/
   step/entry/contact-grid/company-table）は classic と共通のため流用し、
   ここではモダン固有の差分のみ定義する。
   ============================================================ */

/* ---- 暗ヘッダー（暗ヒーローを持つページ: front/about/recruit/contact）---- */
.dark-head .site-head{ background:rgba(0,0,0,.5); }
.dark-head .site-head .brand{ color:#fff; }
.dark-head .site-head .brand small{ color:rgba(255,255,255,.6); border-color:rgba(255,255,255,.22); }
.dark-head .site-head .nav a{ color:rgba(255,255,255,.82); }
.dark-head .site-head .nav a .en{ color:rgba(255,255,255,.5); }
.dark-head .site-head .nav a:hover{ color:#fff; }
.dark-head .site-head.scrolled{ background:rgba(0,0,0,.92); border-color:rgba(255,255,255,.1); }
.dark-head .nav-toggle span{ background:#fff; }

/* ---- modern サブページ・ヒーロー（mhero）---- */
.upto-modern .mhero{
  position:relative; min-height:62svh; display:flex; align-items:flex-end;
  padding:150px 0 64px; overflow:hidden;
  background:
    radial-gradient(120% 90% at 12% 18%, #1a1a1a 0%, transparent 55%),
    linear-gradient(160deg,#000000 0%, #000000 45%, #0a0a0a 100%);
  color:#fff;
}
.upto-modern .mhero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px; -webkit-mask:linear-gradient(180deg,#000,transparent 80%); mask:linear-gradient(180deg,#000,transparent 80%);
}
.upto-modern .mhero .wrap{ position:relative; z-index:2; width:100%; }
.upto-modern .mhero .crumb{ font-family:var(--en); font-size:12px; letter-spacing:.14em; color:rgba(255,255,255,.55); margin-bottom:22px; display:flex; gap:10px; align-items:center; text-transform:uppercase; }
.upto-modern .mhero .crumb a:hover{ color:#fff; }
.upto-modern .mhero .jp{ font-family:var(--jp); font-weight:700; font-size:clamp(15px,1.8vw,20px); color:#cfcfcf; letter-spacing:.08em; margin:0 0 10px; }
.upto-modern .mhero .en-title{ font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(56px,12vw,150px); line-height:.92; letter-spacing:-.03em; margin:0; overflow:hidden; }
.upto-modern .mhero .en-title > span{ display:block; transform:translateY(110%); transition:transform 1s var(--ease); }
.upto-modern .mhero.ready .en-title > span{ transform:none; }
.upto-modern .mhero .ghost{ position:absolute; right:-1%; bottom:-6%; z-index:1; pointer-events:none; user-select:none; font-family:var(--display); font-weight:900; font-size:clamp(160px,30vw,460px); color:rgba(255,255,255,.04); letter-spacing:-.05em; line-height:.8; }

/* ---- 再利用マーキー（mq）---- */
.upto-modern .mq{ overflow:hidden; display:flex; }
.upto-modern .mq--accent{ background:var(--blue-vivid); color:#000; padding:22px 0; }
.upto-modern .mq-track{ display:flex; gap:48px; white-space:nowrap; animation:upto-mq-move 28s linear infinite; padding-right:48px; }
.upto-modern .mq:hover .mq-track{ animation-play-state:paused; }
.upto-modern .mq--accent .mq-track span{ font-family:var(--display); font-weight:800; font-size:clamp(20px,3vw,34px); letter-spacing:.02em; text-transform:uppercase; display:inline-flex; align-items:center; gap:48px; }
.upto-modern .mq--accent .mq-track span::after{ content:"\271A"; color:rgba(0,0,0,.4); font-size:.7em; }
@keyframes upto-mq-move{ to{ transform:translateX(-50%); } }

/* ---- modern 見出しヘルパー（m-head）---- */
.upto-modern .m-head .eyebrow{ margin-bottom:18px; }
.upto-modern .m-head h2{ font-family:var(--jp); font-weight:900; font-size:clamp(28px,4.4vw,48px); line-height:1.34; margin:0; }
.upto-modern .m-head h2 .en{ display:block; font-family:var(--display); font-weight:800; font-size:clamp(13px,1.4vw,15px); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:14px; }

/* ---- 企業理念（about: phil2 dark）---- */
.upto-modern .phil2{ background:var(--ink-navy); color:#fff; position:relative; overflow:hidden; }
.upto-modern .phil2 .ghost{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-family:var(--display); font-weight:900; font-size:clamp(150px,26vw,400px); color:rgba(255,255,255,.035); letter-spacing:-.05em; line-height:.8; pointer-events:none; }
.upto-modern .phil2 .h-sec{ color:#fff; }
.upto-modern .phil2 .eyebrow{ color:#cfcfcf; }
.upto-modern .phil2 .eyebrow::before{ background:#cfcfcf; }
.upto-modern .mv{ margin-top:64px; position:relative; z-index:2; }
.upto-modern .mv-row{ display:grid; grid-template-columns:.36fr .64fr; gap:clamp(28px,5vw,72px); padding:clamp(34px,4.4vw,60px) 0; align-items:start; }
.upto-modern .mv-row + .mv-row{ border-top:1px solid rgba(255,255,255,.14); }
.upto-modern .mv-row .key .num{ font-family:var(--display); font-weight:900; font-size:clamp(56px,8vw,118px); color:transparent; -webkit-text-stroke:1.6px rgba(255,255,255,.6); line-height:.9; display:block; }
.upto-modern .mv-row .key .lbl{ font-family:var(--display); font-weight:900; font-size:clamp(22px,2.6vw,32px); letter-spacing:.04em; color:#f2f2f2; margin-top:12px; }
.upto-modern .mv-row h3{ font-family:var(--jp); font-weight:900; font-size:clamp(24px,3.2vw,40px); line-height:1.4; margin:0 0 24px; color:#fff; }
.upto-modern .mv-row p{ margin:0 0 20px; color:#b8b8b8; font-size:15.5px; line-height:2.1; }
.upto-modern .mv-row p:last-child{ margin:0; }
.upto-modern .mv-row .hi{ color:#fff; border-bottom:2px solid #f2f2f2; padding-bottom:1px; }
@media (max-width:760px){ .upto-modern .mv-row{ grid-template-columns:1fr; gap:20px; } }

/* ---- 取引先（about: clients2 note）---- */
.upto-modern .clients2 .note{ text-align:center; margin-top:26px; font-size:13px; color:var(--muted); }

/* ---- recruit リード（rlead）---- */
.upto-modern .rlead{ background:#fff; position:relative; overflow:hidden; }
.upto-modern .rlead .wordmark{ position:absolute; left:-3%; bottom:-6%; font-family:var(--display); font-weight:900; font-size:clamp(120px,22vw,320px); color:#f3f3f3; line-height:.8; letter-spacing:-.04em; pointer-events:none; }
/* 画像スロット廃止に伴いテキスト1カラム・全幅 */
.upto-modern .rlead-grid{ position:relative; z-index:2; }
.upto-modern .rlead h2{ font-family:var(--jp); font-weight:900; font-size:clamp(28px,4.6vw,52px); line-height:1.4; margin:18px 0 28px; }
.upto-modern .rlead h2 b{ color:var(--blue); }
.upto-modern .rlead p{ color:var(--ink-soft); font-size:16px; line-height:2.15; margin:0 0 20px; }
.upto-modern .rlead p:last-child{ margin:0; }

/* ---- 求める人物像（recruit: modern 大きいストローク番号）---- */
.upto-modern .persona{ margin-top:58px; }
.upto-modern .persona-card{ transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.upto-modern .persona-card:hover{ transform:translateY(-6px); box-shadow:0 26px 50px rgba(16,24,38,.1); border-color:transparent; }
.upto-modern .persona-card .q{ font-family:var(--display); font-weight:900; font-size:clamp(34px,4vw,56px); color:transparent; -webkit-text-stroke:1.4px var(--blue); line-height:1; letter-spacing:0; }
.upto-modern .persona-card h3{ font-family:var(--jp); font-weight:800; font-size:21px; line-height:1.55; margin:22px 0 12px; }

/* ---- 研修（recruit: train dark steps）---- */
.upto-modern .train{ background:var(--ink-navy); color:#fff; position:relative; overflow:hidden; }
.upto-modern .train .ghost{ position:absolute; right:-2%; top:8%; font-family:var(--display); font-weight:900; font-size:clamp(120px,22vw,320px); color:rgba(255,255,255,.035); letter-spacing:-.05em; line-height:.8; pointer-events:none; }
.upto-modern .train .h-sec{ color:#fff; }
.upto-modern .train .eyebrow{ color:#cfcfcf; }
.upto-modern .train .eyebrow::before{ background:#cfcfcf; }
.upto-modern .train .lead{ color:#b8b8b8; max-width:62ch; margin-top:22px; }
.upto-modern .train .steps{ margin-top:60px; border-top:1px solid rgba(255,255,255,.14); position:relative; z-index:2; display:block; }
.upto-modern .train .step{ display:grid; grid-template-columns:120px 1fr; gap:clamp(24px,4vw,56px); padding:clamp(28px,3.6vw,48px) 0; border-bottom:1px solid rgba(255,255,255,.14); align-items:baseline; transition:padding-left .5s var(--ease); }
.upto-modern .train .step + .step{ border-top:0; }
.upto-modern .train .step:hover{ padding-left:16px; }
.upto-modern .train .step .no{ font-family:var(--display); font-weight:900; font-size:clamp(40px,5vw,72px); color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.35); line-height:1; }
.upto-modern .train .step:hover .no{ color:#f2f2f2; -webkit-text-stroke:1.5px #f2f2f2; }
.upto-modern .train .step h3{ font-family:var(--jp); font-weight:800; font-size:clamp(20px,2.4vw,28px); margin:0 0 12px; }
.upto-modern .train .step p{ color:#b8b8b8; }
@media (max-width:680px){ .upto-modern .train .step{ grid-template-columns:64px 1fr; gap:20px; } .upto-modern .train .step .no{ font-size:36px; } }

/* ---- エントリー（recruit: entry）---- */
.upto-modern .entry{ background:#fff; position:relative; overflow:hidden; }
.upto-modern .entry .big{ font-family:var(--jp); font-weight:900; font-size:clamp(30px,5.4vw,60px); line-height:1.35; margin:24px 0 0; }
.upto-modern .entry .big b{ color:var(--blue); }

/* ---- contact: modern はラベルを display フォントに ---- */
.upto-modern .info-row .lab{ font-family:var(--display); }
.upto-modern .field .req,
.upto-modern .field .opt{ font-family:var(--display); }

/* reduced-motion: mhero 入場・マーキー停止 */
@media (prefers-reduced-motion:reduce){
  .upto-modern .mhero .en-title > span{ transform:none !important; }
  .upto-modern .mq-track{ animation:none !important; }
}

/* ============================================================
   LIGHT SECTION READABILITY（白背景セクションは黒文字で可読性確保）
   neo / modern の白背景セクション（stats / xabout / xclients / home-news /
   rlead / entry）のみ対象。黒背景セクションは従来通り白文字のまま。
   ============================================================ */
.upto-front-neo .stats,
.upto-front-neo .xabout,
.upto-front-neo .xclients,
.upto-front-neo .home-news,
.upto-modern .rlead,
.upto-modern .entry{ color:#1a1a1a; }

/* 見出し・主要テキストは濃い黒 */
.upto-front-neo .stats h2,
.upto-front-neo .stats .stat .num,
.upto-front-neo .xabout-grid h2,
.upto-front-neo .xabout-grid h2 .accent,
.upto-front-neo .xclients .h-sec,
.upto-front-neo .xclients .cl-track span,
.upto-front-neo .home-news .h-sec,
.upto-front-neo .home-news .news-title,
.upto-modern .rlead h2,
.upto-modern .rlead h2 b,
.upto-modern .rlead .m-head h2,
.upto-modern .entry .big,
.upto-modern .entry .big b,
.upto-modern .entry .m-head h2{ color:#111; }

/* 補助テキスト（ラベル・本文・キャプション）はミッドグレー */
.upto-front-neo .stats .stat .lab,
.upto-front-neo .stats .stat .num em,
.upto-front-neo .stats .stat .jp,
.upto-front-neo .xabout-grid p,
.upto-front-neo .xclients .h-sec .en,
.upto-front-neo .xclients .note,
.upto-front-neo .home-news .h-sec .en,
.upto-front-neo .home-news .news-date,
.upto-modern .rlead p,
.upto-modern .rlead .m-head h2 .en,
.upto-modern .entry .m-head h2 .en{ color:#555; }

/* eyebrow（白背景内）は黒系に */
.upto-front-neo .stats .eyebrow,
.upto-front-neo .xabout .eyebrow,
.upto-front-neo .xclients .eyebrow,
.upto-front-neo .home-news .eyebrow,
.upto-modern .rlead .eyebrow,
.upto-modern .entry .eyebrow{ color:#111; }
.upto-front-neo .stats .eyebrow::before,
.upto-front-neo .xabout .eyebrow::before,
.upto-front-neo .xclients .eyebrow::before,
.upto-front-neo .home-news .eyebrow::before,
.upto-modern .rlead .eyebrow::before,
.upto-modern .entry .eyebrow::before{ background:#111; }

/* 罫線・ホバーを白背景向けの明色に */
.upto-front-neo .stats .stats-grid,
.upto-front-neo .stats .stat,
.upto-front-neo .stats .stat + .stat,
.upto-front-neo .home-news .news-list,
.upto-front-neo .home-news .news-item,
.upto-front-neo .xclients .cl-marquee{ border-color:#e6e6e6; }
.upto-front-neo .home-news .news-item:hover{ background:#f6f6f6; }
.upto-front-neo .home-news .news-item:hover .news-title{ color:#000; }
.upto-front-neo .home-news .news-arw{ color:#111; }

/* 白背景内のボタンを可読化（ghost=黒文字/黒枠, solid=黒塗り） */
.upto-front-neo .stats .btn--ghost,
.upto-front-neo .home-news .btn--ghost,
.upto-modern .rlead .btn--ghost,
.upto-modern .entry .btn--ghost{ color:#111; border-color:rgba(0,0,0,.28); }
.upto-front-neo .stats .btn--ghost:hover,
.upto-front-neo .home-news .btn--ghost:hover,
.upto-modern .rlead .btn--ghost:hover,
.upto-modern .entry .btn--ghost:hover{ background:#111; color:#fff; border-color:#111; }
.upto-front-neo .xabout .btn,
.upto-modern .rlead .btn,
.upto-modern .entry .btn{ background:#111; color:#fff; border-color:#111; }
.upto-front-neo .xabout .btn:hover,
.upto-modern .rlead .btn:hover,
.upto-modern .entry .btn:hover{ background:transparent; color:#111; border-color:#111; }

/* ==========================================================================
   オープニングアニメーション（TOP）
   ロゴ（assets/logo-1.png）を背景に「upto」が下から1文字ずつ出現。
   マークアップ・表示判定は functions.php の upto_opening_markup()。
   タイムライン: bg 0.1-1.3s フェードイン / 文字 0.35s から 0.14s 刻みで出現
                / 2.2s からオーバーレイをフェードアウト（計 3.0s で DOM 除去）
   ========================================================================== */
html.upto-opening-lock{ overflow:hidden; }

.upto-opening{
  position:fixed; inset:0; z-index:9999;
  display:none;
  align-items:center; justify-content:center;
  background:var(--bg);
  /* 表示中は背後への透過クリックを防ぐ（pointer-events は既定の auto のまま）。
     フェードアウト後は keyframe の visibility:hidden ＋ JS の DOM 除去で解放される */
}
.upto-opening.is-active{
  display:flex;
  animation:upto-opening-fade .6s var(--ease) 2.2s forwards;
}

.upto-opening-bg{
  position:absolute; inset:0;
  /* ロゴは左端にぴったり寄せて大きく（縦長素材を高さ基準で拡大） */
  background-position:left center;
  background-repeat:no-repeat;
  background-size:auto min(96vh, 900px);
  opacity:0;
  transform:scale(1.04);
  transform-origin:left center; /* スケール時も左端に固定 */
}
.upto-opening.is-active .upto-opening-bg{
  animation:upto-opening-bg-in 1.2s var(--ease) .1s forwards;
}

.upto-opening-word{
  position:relative;
  display:flex;
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(64px, 14vw, 160px);
  line-height:1;
  letter-spacing:.03em;
  color:var(--ink);
}
.upto-opening-char{
  display:inline-block;
  overflow:hidden;
  padding-bottom:.06em; /* ディセンダ（p の脚）がクリップされないよう余白 */
}
.upto-opening-char-inner{
  display:inline-block;
  transform:translateY(110%);
  /* animation-delay は 1 文字ずつインラインで時差指定（functions.php） */
  animation:upto-opening-char-in .7s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes upto-opening-char-in{
  to{ transform:translateY(0); }
}
@keyframes upto-opening-bg-in{
  to{ opacity:.18; transform:scale(1); }
}
@keyframes upto-opening-fade{
  to{ opacity:0; visibility:hidden; }
}