/* ============================================================
   LQ Brand Base ／ 共通基盤【2026-08-28 確定】
   ------------------------------------------------------------
   ⚠ 試作。本番未反映。_proto の中だけで使う。
   ⚠ 実行される JavaScript 0件 ／ Webフォント0件 ／ 外部ライブラリ0件。

   このファイルの役割
     DELIVERY / RECRUIT / CONTACT の完成内容を受け取ったとき、
     Visual をゼロから設計し直さずに実装へ入るための土台。
     ⚠ ページ固有の本文・構成はここに書かない。

   共通化しているもの
     Color / Typography / Spacing / Glass UI / Button /
     Section heading / Image layout / CTA /
     Light Blue・White の面 / Curve・Gradient /
     Scroll reveal / Breakpoint / Header・Navigation
   ============================================================ */

/* ---- 1. Color ------------------------------------------------
   ⚠ 黒 / Smoke Black を地に戻さない。地は白と淡い青。
   ⚠ LQ RED はロゴなどブランド上必要な部分だけ。UIアクセントは Blue。 */
:root{
  --ink:       #12161c;   /* 見出し。黒ベタの面には使わない */
  --ink-soft:  #3d4650;   /* 本文 */
  --ink-mute:  #6b7480;   /* 補助 */

  --white:     #ffffff;
  --cold:      #f7fafd;   /* Cold White */
  --sky-1:     #eef4fb;   /* Light Blue／面 */
  --sky-2:     #dfeaf7;   /* Light Blue／濃いめ */

  --blue:      #1f5fa8;   /* 主アクセント */
  --blue-lit:  #2f7ad1;
  --blue-soft: #e4eefb;

  --line:      rgba(18,22,28,.10);
  --line-blue: rgba(31,95,168,.18);

  --red:       #c8102e;   /* ⚠ ロゴのみ */

  /* Glass */
  --glass:      rgba(255,255,255,.62);
  --glass-2:    rgba(255,255,255,.50);
  --glass-line: rgba(255,255,255,.74);
  --glass-hi:   rgba(255,255,255,.92);

  /* Soft Shadow ── ⚠ 濃い影を使わない。落とすのは下だけ */
  --sh-1: 0 10px 30px -22px rgba(18,22,28,.45);
  --sh-2: 0 18px 46px -30px rgba(18,22,28,.42);
  --sh-3: 0 30px 70px -44px rgba(18,22,28,.46);

  /* ---- 2. Typography ---------------------------------------- */
  --jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  --en:"Helvetica Neue","Arial",sans-serif;

  --t-hero:  clamp(28px,3.9vw,50px);   /* Hero の一行。⚠ 左カラム583px(1440時)に
                                             「景色は変わる。」7字が収まる上限 */
  --t-h2:    clamp(25px,3.4vw,40px);   /* セクション見出し */
  --t-h3:    clamp(16px,1.7vw,20px);
  --t-body:  clamp(13.5px,1.15vw,15.5px);
  --t-small: 12.5px;
  --t-label: 11px;                     /* EN のラベル */

  /* ---- 3. Spacing ------------------------------------------- */
  --pad:  clamp(20px,5vw,84px);        /* 画面の左右 */
  --max:  1240px;                      /* 読み幅 */
  --max-wide: 1560px;                  /* Hero など全幅寄り */
  --sec:  clamp(72px,10vw,140px);      /* セクションの上下 */
  --gap:  clamp(20px,2.6vw,34px);

  --h: 64px;                           /* ヘッダーの高さ */
  --r-1: 12px;  --r-2: 18px;  --r-3: 28px;   /* 角丸 */
  --ease: cubic-bezier(.16,.84,.44,1);
}
@media(min-width:900px){ :root{ --h:84px; } }

/* ---- 4. 素の要素 --------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; background:var(--white); color:var(--ink);
  font-family:var(--jp); line-height:2; letter-spacing:.03em;
  -webkit-font-smoothing:antialiased; }
img,video{ display:block; max-width:100%; }
h1,h2,h3,p,dl,dt,dd,figure,ul,li{ margin:0; padding:0; }
ul{ list-style:none; }
a{ color:inherit; text-decoration:none; }

/* ---- 5. Header / Navigation ---------------------------------
   ⚠ 面を持たない。映像の上に直接置く。文字は白＋影で読ませる。 */
.hd{ position:absolute; top:0; left:0; right:0; z-index:20; height:var(--h); }
.hd__in{ height:100%; max-width:var(--max-wide); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:20px; }
.hd__logo{ display:flex; flex-direction:column; line-height:1; color:var(--white);
  text-shadow:0 1px 3px rgba(18,22,28,.34), 0 6px 22px rgba(18,22,28,.34); }
.hd__logo b{ font-family:var(--en); font-weight:800; font-size:clamp(24px,2.5vw,32px); letter-spacing:.04em; }
.hd__logo b i{ font-style:normal; color:var(--red); }   /* ⚠ 赤はここだけ */
.hd__logo span{ margin-top:5px; font-family:var(--en); font-size:9px; letter-spacing:.18em; opacity:.9; }

.hd__nav{ display:none; align-items:center; gap:clamp(16px,2vw,30px); }
@media(min-width:1000px){ .hd__nav{ display:flex; } }
.hd__nav a, .hd__nav span{ font-size:13px; color:var(--white);
  text-shadow:0 1px 8px rgba(18,22,28,.45); }
.hd__nav a:hover{ opacity:.75; }
/* ⚠ ページが未確定の項目は <span>。リンク切れを作らない */
.hd__nav span{ opacity:.62; cursor:default; }
.hd__cta{ display:inline-flex; align-items:center; gap:9px;
  padding:11px 20px; border-radius:99px;
  background:var(--glass); border:1px solid var(--glass-line);
  box-shadow:0 1px 0 var(--glass-hi) inset, var(--sh-1);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  font-size:13px; font-weight:700; color:var(--blue) !important; text-shadow:none !important; }
.hd__cta:hover{ background:var(--white); }

/* ---- 6. Glass UI -------------------------------------------- */
.glass{ background:var(--glass); border:1px solid var(--glass-line);
  box-shadow:0 1px 0 var(--glass-hi) inset, var(--sh-2);
  backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); }

/* ---- 7. Button ----------------------------------------------
   ⚠ 派手なベタ塗り禁止。主導線でも Blue の単色まで。 */
.btn{ display:inline-flex; align-items:center; gap:12px;
  padding:16px 28px; border-radius:var(--r-1);
  font-size:14px; font-weight:700; letter-spacing:.06em;
  transition:background .3s var(--ease), transform .3s var(--ease), color .3s var(--ease); }
.btn:hover{ transform:translateY(-2px); }
.btn--main{ background:var(--blue); color:var(--white); }
.btn--main:hover{ background:#16497f; }
.btn--glass{ background:var(--glass); border:1px solid var(--glass-line); color:var(--blue);
  box-shadow:0 1px 0 var(--glass-hi) inset, var(--sh-1);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); }
.btn--glass:hover{ background:var(--white); }
.btn i{ font-style:normal; position:relative; width:20px; height:1px; background:currentColor; }
.btn i::after{ content:""; position:absolute; right:0; top:-3px; width:6px; height:6px;
  border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); }

/* ---- 8. Section heading ------------------------------------- */
.sec{ padding:var(--sec) var(--pad); }
.sec--cold{ background:var(--cold); }
.sec--sky{ background:linear-gradient(180deg,var(--sky-1) 0%,var(--white) 60%); }
.in{ max-width:var(--max); margin-inline:auto; }

.lb{ display:flex; align-items:center; gap:11px; line-height:1;
  font-family:var(--en); font-size:var(--t-label); font-weight:700; letter-spacing:.26em; color:var(--blue); }
.lb::before{ content:""; width:26px; height:2px; background:var(--blue); }
.h2{ margin-top:18px; font-size:var(--t-h2); font-weight:700; line-height:1.42; letter-spacing:.01em; }
.h2 em{ font-style:normal; color:var(--blue); }
/* ⚠ 本文が薄くて読みにくかった。見出しはそのまま、本文だけ濃くする。 */
.tx{ margin-top:18px; font-size:var(--t-body); color:#26303c; line-height:2.05; }
.tx--mute{ color:var(--ink-mute); }

/* ---- 9. Image layout ----------------------------------------
   ⚠ 実写が来たら「ファイルを置き換えて --pos を直すだけ」で済む形にする。 */
.ph{ position:relative; overflow:hidden; border-radius:var(--r-2);
  background:var(--sky-2); box-shadow:var(--sh-2); }
.ph img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); }
@media(min-width:768px){ .ph img{ object-position:var(--pos-pc,var(--pos,50% 50%)); } }
.ph--r{ border-radius:50%; }
.ph--4x5{ aspect-ratio:4/5; }
.ph--3x2{ aspect-ratio:3/2; }
.ph--1x1{ aspect-ratio:1/1; }

/* 差し替え枠 ── 🛑 架空の人物を置かないための空枠
   ⚠ 実写が入ったら .ph__slot を消して <img> を入れるだけ。 */
.ph__slot{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; padding:20px; text-align:center;
  background:linear-gradient(160deg,var(--sky-1),var(--sky-2));
  border:1px dashed var(--line-blue); border-radius:inherit; }
.ph__slot b{ font-family:var(--en); font-size:10px; font-weight:700; letter-spacing:.2em; color:var(--blue); }
.ph__slot span{ font-size:12px; line-height:1.8; color:var(--ink-mute); }

/* 原稿待ちのスロット（文章）*/
.tx__slot{ margin-top:16px; padding:18px 20px; border-radius:var(--r-1);
  border:1px dashed var(--line-blue); background:var(--blue-soft);
  font-size:12.5px; line-height:1.9; color:var(--blue); }

/* ---- 10. Curve / Gradient -----------------------------------
   ⚠ Hero の直後に白い四角を貼らない。丸みと階調でつなぐ。 */
.joint{ position:relative; margin-top:calc(var(--r-3) * -2);
  border-radius:var(--r-3) var(--r-3) 0 0;
  background:linear-gradient(180deg,
    rgba(255,255,255,.86) 0%, var(--sky-1) 18%, var(--white) 62%, var(--cold) 100%);
  box-shadow:0 -20px 50px -30px rgba(18,22,28,.28); }
@media(min-width:768px){ .joint{ margin-top:calc(var(--r-3) * -2.2); border-radius:44px 44px 0 0; } }
/* 継ぎ目の上に置く細い光の線 */
.joint::before{ content:""; position:absolute; left:8%; right:8%; top:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent); }

/* ---- 11. Scroll reveal --------------------------------------
   ⚠ 控えめ。20〜60px の slide ＋ fade まで。Parallax・3D・回転・大Zoom は使わない。
   ⚠ 閉じた状態を素の指定に書かない。未対応環境では最初から見えている。
   ⚠ animation-range は cover だけで書く（entry と混ぜない）。 */
@supports (animation-timeline: view()){
  .rv{ animation:rv-up linear both; animation-timeline:view(); animation-range:cover 4% cover 26%; }
  .rv-l{ animation:rv-left linear both; animation-timeline:view(); animation-range:cover 4% cover 28%; }
  .rv-r{ animation:rv-right linear both; animation-timeline:view(); animation-range:cover 4% cover 28%; }
  /* 文章は写真より少し遅れて出す */
  .rv-late{ animation:rv-up linear both; animation-timeline:view(); animation-range:cover 10% cover 34%; }

  @keyframes rv-up   { from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
  @keyframes rv-left { from{ opacity:0; transform:translateX(-42px); } to{ opacity:1; transform:none; } }
  @keyframes rv-right{ from{ opacity:0; transform:translateX(42px); }  to{ opacity:1; transform:none; } }
}
@media (prefers-reduced-motion: reduce){
  .rv,.rv-l,.rv-r,.rv-late{ animation:none !important; opacity:1; transform:none; }
  .btn:hover{ transform:none; }
}

/* ---- 12. Hero（動画）---------------------------------------
   ⚠ 動画とUIは別レイヤー。動画が動いてもUIは1pxも動かない。
   ⚠ 膜を張らない。明るさ・色・景色をそのまま出す。 */
.hero{ position:relative; min-height:100svh; overflow:hidden; background:#dfe6ee; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__video{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,56% 44%); }
@media(min-width:768px){ .hero__video{ object-position:var(--pos-pc,66% 52%); } }

.hero__ui{ position:relative; z-index:10; min-height:100svh;
  max-width:var(--max-wide); margin-inline:auto;
  padding:calc(var(--h) + clamp(20px,4vh,44px)) var(--pad)
          calc(clamp(56px,10vh,96px) + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; justify-content:flex-end; }
.hero__col{ width:100%; }
/* ⚠ PC は左のコンテンツ領域だけを使う。右半分（車・道路・景色）へ出さない。
   ⚠ この2行は .hero__col{width:100%} より後ろに置く。
      前に置くと同じ詳細度で上書きされ、カラムが全幅になって
      ボタンが車に被る（実際にそれで被った）。 */
@media(min-width:768px){
  /* ⚠ 上下中央にしない。中央だと4ボタンが映像の途中に浮いて見えた。
     下端そろえにして、ボタンの下端を動画の終わりのラインへ寄せる。
     ⚠ .joint が Hero の下端へ 62px ほど重なって来る。
        その手前で止めるため、下余白は約80〜110px を確保する。 */
  /* ⚠ .joint が Hero 下端へ最大150px 食い込み、さらに曲線の左端は
     そこから約68px 下がる。ボタン列は左にあるので、
     曲線の一番高い所（中央）より上で止める必要がある。
     ⚠ 100px 台では被った（実測：ボタン下端810 / 曲線750）。 */
  .hero__ui{ justify-content:flex-end; align-items:flex-start;
             padding-bottom:calc(clamp(120px,17.5vh,186px) + env(safe-area-inset-bottom)); }
  .hero__col{ width:min(660px,45%); }
}

.hero__lead{ font-weight:700; font-size:var(--t-hero); line-height:1.3; letter-spacing:.01em;
  color:var(--white); text-shadow:0 1px 3px rgba(18,22,28,.42), 0 8px 34px rgba(18,22,28,.5); }
/* ⚠ 語の途中で折らない。句読点の位置で塊にする */
.hero__lead span{ display:inline-block; }
.hero__sub{ margin-top:14px; font-size:clamp(12.5px,1.15vw,15.5px); letter-spacing:.06em;
  color:var(--white); text-shadow:0 1px 3px rgba(18,22,28,.5), 0 6px 24px rgba(18,22,28,.55); }

/* ---- 13. Hero の4ボタン ------------------------------------
   ⚠ 2×2。PC も SP も同じ並び。読む順＝記述順。 */
.hero__nav{ margin-top:clamp(22px,3vw,34px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(9px,1vw,14px); }
.hb{ position:relative; display:flex; align-items:center; gap:clamp(10px,1.2vw,14px);
  padding:clamp(13px,1.5vw,18px) clamp(12px,1.3vw,18px);
  border-radius:var(--r-1);
  /* ⚠ 白いカードにしない。背景の映像がわずかに透ける濃さで止める。
     ⚠ 位置・大きさ・2×2 は変更していない。地の不透明度と blur だけ。 */
  background:rgba(255,255,255,.30); border:1px solid rgba(255,255,255,.62);
  box-shadow:0 1px 0 rgba(255,255,255,.72) inset, var(--sh-1);
  backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
  transition:background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
a.hb:hover{ background:rgba(255,255,255,.52); transform:translateY(-2px); box-shadow:0 1px 0 var(--glass-hi) inset, var(--sh-2); }
a.hb:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
.hb__ic{ flex:none; width:clamp(19px,1.8vw,23px); height:clamp(19px,1.8vw,23px);
  stroke:var(--blue); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.hb__en{ font-family:var(--en); font-weight:700; font-size:clamp(11.5px,1vw,13.5px);
  letter-spacing:.09em; line-height:1.2; color:var(--blue); white-space:nowrap; }
.hb__ja{ display:block; margin-top:4px; font-size:clamp(10.5px,.85vw,12px);
  letter-spacing:.02em; color:var(--ink-mute); line-height:1.4; white-space:nowrap; }
.hb__ar{ margin-left:auto; flex:none; width:7px; height:7px;
  border-top:1.5px solid var(--blue); border-right:1.5px solid var(--blue); transform:rotate(45deg); }
/* ⚠ ページ未確定のものは <div>。押せる見た目にしない */
div.hb{ opacity:.66; }
div.hb .hb__ar{ display:none; }

/* ---- 14. CTA ------------------------------------------------ */
.cta{ text-align:center; }
.cta .lb{ justify-content:center; }
.cta .lb::before{ display:none; }
.cta__h{ margin-top:18px; font-size:clamp(26px,4.2vw,52px); font-weight:700; line-height:1.36; }
.cta__row{ margin-top:clamp(26px,3.4vw,42px); display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* ---- 15. 一覧（PROFILE 等）--------------------------------- */
.dl{ border-top:1px solid var(--line); }
.dl>div{ display:grid; grid-template-columns:1fr; gap:6px;
  padding:clamp(16px,2vw,22px) 0; border-bottom:1px solid var(--line); }
@media(min-width:768px){ .dl>div{ grid-template-columns:190px minmax(0,1fr); gap:32px; align-items:baseline; } }
.dl dt{ display:flex; align-items:center; gap:10px;
  font-size:var(--t-small); font-weight:700; letter-spacing:.1em; color:var(--blue); }
.dl dd{ font-size:clamp(14px,1.3vw,16px); line-height:1.95; }
.dl dd small{ display:block; margin-top:5px; font-size:12px; color:var(--ink-mute); }

/* ---- 16. フッター ------------------------------------------ */
.ft{ padding:clamp(34px,5vw,60px) var(--pad); background:var(--white); border-top:1px solid var(--line); }
.ft__in{ max-width:var(--max); margin-inline:auto;
  display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; justify-content:space-between; }
.ft__logo{ font-family:var(--en); font-weight:800; font-size:20px; letter-spacing:.04em; }
.ft__logo i{ font-style:normal; color:var(--red); }
.ft__t{ font-size:12px; color:var(--ink-mute); }

/* ---- 17. 試作の表示（本番へ移すとき消す）-------------------- */
.proto{ position:fixed; z-index:15;   /* ⚠ ヘッダー(20)より下。SPメニューの裏に隠す */ left:10px; top:calc(var(--h) + 10px); pointer-events:none;
  font-family:var(--en); font-size:10px; letter-spacing:.18em; padding:6px 11px; border-radius:99px;
  background:rgba(255,255,255,.74); color:var(--ink-mute);
  border:1px solid var(--line); backdrop-filter:blur(10px); }


/* ============================================================
   12'. Hero → COMPANY の接続【2026-08-28 追記】
   ⚠ Hero の直後に白い四角を貼らない。映像の空気を下へ引き継ぐ。
      層は3つ。①映像の下端に白のかすみ ②曲線の面 ③淡い青の残光
   ============================================================ */

/* ① 映像の下端に、白がにじみ上がる層（映像の中に作る）*/
.hero__fade{ position:absolute; left:0; right:0; bottom:0; height:52%; z-index:5; pointer-events:none;
  /* ⚠ 下端でも白を締め切らない。道路の光と青を残したまま上へ薄く消す。 */
  background:linear-gradient(to top,
    rgba(255,255,255,.62) 0%, rgba(255,255,255,.38) 20%,
    rgba(233,242,251,.20) 46%, rgba(255,255,255,0) 100%); }

/* ② 曲線。⚠ 直線で切らない */
.joint{ position:relative; z-index:6; margin-top:clamp(-96px,-9vw,-64px);
  border-radius:50% 50% 0 0 / 68px 68px 0 0;
  /* ⚠ 上端をガラスにする。完全な白は下へ遅らせ、
     Hero の青と道路の光が COMPANY の上部まで薄く透けるようにする。 */
  background:linear-gradient(180deg,
    rgba(255,255,255,.40) 0%, rgba(255,255,255,.62) 12%,
    rgba(238,244,251,.86) 30%, rgba(255,255,255,.97) 56%,
    var(--white) 78%, var(--cold) 100%);
  backdrop-filter:blur(14px) saturate(115%); -webkit-backdrop-filter:blur(14px) saturate(115%);
  box-shadow:0 -26px 60px -34px rgba(31,95,168,.28); }
@media(min-width:768px){ .joint{ border-radius:50% 50% 0 0 / 120px 120px 0 0; margin-top:clamp(-150px,-11vw,-96px); } }

/* ③ 残光。COMPANY の面の中に、うっすら青い光を1つだけ置く */
.joint::after{ content:""; position:absolute; left:50%; top:0; transform:translate(-50%,-30%);
  width:min(1200px,120%); height:520px; pointer-events:none; z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%, rgba(148,190,236,.30) 0%, rgba(148,190,236,0) 72%); }
.joint > *{ position:relative; }

/* ── COMPANY の3ブロック ────────────────────────────────
   ⚠ 白いカードを並べない。ガラスの面として馴染ませる。 */
.cmp3{ margin-top:clamp(34px,4.6vw,58px); display:grid; gap:clamp(16px,1.8vw,24px); }
@media(min-width:960px){ .cmp3{ grid-template-columns:0.92fr 1.05fr 1.35fr; align-items:stretch; } }

.card{ border-radius:var(--r-2); padding:clamp(18px,2vw,26px);
  background:linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.66));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 20px 48px -34px rgba(31,95,168,.42);
  backdrop-filter:blur(18px) saturate(130%); -webkit-backdrop-filter:blur(18px) saturate(130%); }

/* 代表 */
.ceo{ display:flex; flex-direction:column; }
.ceo__ph{ border-radius:14px; overflow:hidden; aspect-ratio:3/4; background:var(--sky-2); position:relative; }
.ceo__ph img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 30%); }
.ceo__name{ margin-top:16px; }
.ceo__name b{ display:block; font-size:clamp(19px,2vw,23px); font-weight:700; letter-spacing:.02em; }
.ceo__name span{ display:block; margin-top:4px; font-family:var(--en); font-size:11px; letter-spacing:.14em; color:var(--ink-mute); }
.ceo__role{ font-size:12px; color:var(--ink-mute); }
.ceo__word{ margin-top:14px; font-size:13px; line-height:1.9; color:var(--blue); }

/* 代表メッセージ */
.msg__ttl{ font-size:var(--t-h3); font-weight:700; color:var(--blue); }
.msg__q{ margin-top:10px; font-family:var(--en); font-size:34px; line-height:1; color:rgba(31,95,168,.28); }
.msg__body{ margin-top:6px; font-size:clamp(13px,1.1vw,14.5px); line-height:2.05; color:var(--ink-soft); }
.msg__sign{ margin-top:20px; text-align:right; font-size:14px; font-weight:700; }

/* チーム */
.team__ph{ border-radius:14px; overflow:hidden; aspect-ratio:16/9; background:var(--sky-2); position:relative; }
.team__ph img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); }
.team__h{ margin-top:18px; font-size:clamp(17px,1.8vw,21px); font-weight:700; color:var(--blue); text-align:center; }
.team__t{ margin-top:12px; font-size:clamp(12.5px,1.05vw,14px); line-height:1.95; color:var(--ink-soft); }
.team__ic{ margin-top:20px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.team__ic div{ text-align:center; }
.team__ic svg{ width:26px; height:26px; margin-inline:auto; stroke:var(--blue); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.team__ic span{ display:block; margin-top:8px; font-size:11px; line-height:1.5; color:var(--ink-mute); }

/* ── 横長の写真エリア ─────────────────────────────────── */
/* ⚠ 常に横1段。⚠ 2列にすると3枚目が折り返して2段になり、見づらかった。 */
.strip{ margin-top:clamp(22px,2.6vw,34px); display:grid; gap:clamp(8px,1.4vw,18px);
  grid-template-columns:repeat(3,1fr); }
.strip figure{ border-radius:12px; overflow:hidden; position:relative; aspect-ratio:1/1;
  box-shadow:0 16px 40px -32px rgba(31,95,168,.5); }
@media(min-width:768px){ .strip figure{ border-radius:14px; aspect-ratio:3/2; } }
.strip img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); }
/* ⚠ SP は1枚あたり約110px。写真の上に文字を重ねると読めないので、下へ出す。 */
.strip > div{ position:relative; }
.strip figcaption{ position:absolute; left:0; right:0; bottom:0; padding:26px 14px 12px;
  font-size:11.5px; line-height:1.6; color:#fff;
  background:linear-gradient(to top, rgba(12,26,44,.72), rgba(12,26,44,0)); }
@media(max-width:767px){
  .strip figcaption{ position:static; padding:8px 2px 0; color:var(--ink-mute);
    background:none; font-size:10.5px; line-height:1.55; }
  .strip > div{ display:flex; flex-direction:column; }
}

/* ── 人物の差し替え枠（明るい世界に馴染ませる）───────────
   🛑 架空の人物を代表・社員として置かないための枠。
   ⚠ 実写が入ったら .slot を消して <img> を入れるだけ。 */
.slot{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; text-align:center; padding:18px;
  background:
    radial-gradient(70% 60% at 50% 34%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%),
    linear-gradient(165deg, var(--sky-1), var(--sky-2)); }
.slot svg{ width:42px; height:42px; stroke:rgba(31,95,168,.42); fill:none; stroke-width:1.2; }
.slot b{ font-family:var(--en); font-size:10px; letter-spacing:.2em; color:rgba(31,95,168,.7); }
.slot span{ font-size:11.5px; line-height:1.7; color:var(--ink-mute); }

/* ── 会社概要テーブル ────────────────────────────────── */
.prof{ margin-top:clamp(34px,4.4vw,58px); padding:clamp(22px,2.6vw,40px);
  border-radius:var(--r-2); background:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 20px 50px -36px rgba(31,95,168,.4);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.prof__ttl{ font-family:var(--en); font-size:13px; font-weight:700; letter-spacing:.2em; color:var(--blue); }
.prof__grid{ margin-top:22px; display:grid; gap:0 clamp(24px,3vw,52px); }
@media(min-width:900px){ .prof__grid{ grid-template-columns:1fr 1fr; } }
.prof__grid > div{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:16px;
  padding:15px 0; border-bottom:1px solid rgba(31,95,168,.14); align-items:baseline; }
@media(min-width:768px){ .prof__grid > div{ grid-template-columns:118px minmax(0,1fr); gap:22px; } }
.prof__grid dt{ font-size:12.5px; font-weight:700; color:var(--blue); }
.prof__grid dd{ font-size:clamp(13.5px,1.15vw,15px); line-height:1.85; }


/* ============================================================
   5'. ナビの現在地 ＋ スマートフォンのメニュー【2026-08-30 追記】
   ⚠ 3ページ（COMPANY / DELIVERY / RECRUIT）共通。
   🛑 JavaScript は使わない。開閉は <details> だけで作る。
   ⚠ 下線は currentColor。DELIVERY はヘッダー文字が濃紺、
      TOP と RECRUIT は白。どちらでも同じ指定で成立させるため。
   ============================================================ */
.hd__nav a{ position:relative; }
.hd__nav a[aria-current="page"]{ opacity:1; }
.hd__nav a[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:-8px;
  height:2px; border-radius:2px; background:currentColor; }

/* ── SP のメニュー ⚠ 1000px 未満はナビが入らないのでこちらを出す ── */
.mnu{ position:relative; }
@media(min-width:1000px){ .mnu{ display:none; } }
.mnu > summary{ list-style:none; cursor:pointer;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.36); border:1px solid rgba(255,255,255,.64);
  box-shadow:0 1px 0 rgba(255,255,255,.72) inset, var(--sh-1);
  backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); }
.mnu > summary::-webkit-details-marker{ display:none; }
.mnu > summary::marker{ content:""; }
.mnu summary i{ position:relative; display:block; width:17px; height:2px; border-radius:2px;
  background:var(--blue); }
.mnu summary i::before,
.mnu summary i::after{ content:""; position:absolute; left:0; width:17px; height:2px;
  border-radius:2px; background:var(--blue); }
.mnu summary i::before{ top:-6px; }
.mnu summary i::after { top:6px; }
.mnu[open] summary i{ background:transparent; }
.mnu[open] summary i::before{ top:0; transform:rotate(45deg); }
.mnu[open] summary i::after { top:0; transform:rotate(-45deg); }

.mnu__p{ position:absolute; right:0; top:calc(100% + 10px); z-index:30;
  min-width:min(72vw,250px); padding:10px; border-radius:var(--r-2);
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.86); border:1px solid rgba(255,255,255,.92);
  box-shadow:0 1px 0 var(--glass-hi) inset, var(--sh-3);
  backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%); }
/* ⚠ ページ側でヘッダー文字色を変えていても、ここは白いガラスの上なので濃い色で固定 */
.mnu__p a{ padding:13px 14px; border-radius:10px; font-size:14px; font-weight:700;
  color:var(--ink) !important; text-shadow:none !important; line-height:1.4; }
.mnu__p a + a{ margin-top:2px; }
.mnu__p a[aria-current="page"]{ color:var(--blue) !important; background:var(--blue-soft); }

/* 2026-09-17: contain decorative glow and reveal offsets within the page. */
.joint { overflow-x: clip; }

/* 2026-09-21: consistent text metrics in action buttons. */
.btn, .hd__cta, .fin__b, .rec__b, .recruit-start__actions a {
  font-family:var(--jp); line-height:1.5; align-items:center;
}
button.btn { appearance:none; -webkit-appearance:none; border:0; cursor:pointer; }
.hb > span:has(.hb__en) { display:grid; gap:4px; line-height:1; }
.hb__en { display:block; }
.hb__ja { margin-top:0; }