/* ============================================================
   株式会社UNIT0 — トップ（斜めの帯）2026-10

   参照: 構成案の画像（手元のみ。公開するものではないのでリポジトリには入れていない）
   上は地のままで文字だけ、下は事業の写真を斜めに切って4枚並べる。
   文言とロゴは従来のまま。並べ方だけを変えてある。

   参照画像の実測（1672×941）に合わせた比率:
     帯の上辺は 右上 32% / 左上 48% の高さから始まる（右上がり 約5°）
     仕切りの傾きは 約10°
     見出しは1行で、ヘッダーのすぐ下に置く

   この形だけを別ファイルにしてある。採用しなければ index.html の
   読み込み1行を外せば元に戻せる（旧 .mv / .bcard の規則は site.css に残してある）。
   ============================================================ */

.home-stage {
  /* 仕切りの傾き。--unskew は写真と文字を元の形へ戻すための逆向き */
  --skew: -10deg;
  --unskew: 10deg;
  /* 帯の高さ。右上が画面の 35% から始まる = 高さの 65%（参照は 32% だが、低い画面で右の柱と重なるぶん下げた） */
  --band-h: clamp(360px, 65svh, 760px);
  /* 帯の左上を下げる量（帯の高さに対する割合）。左上が画面の 48% に来る */
  --band-dip: 24%;
  /* 傾けたときに左右の端が欠けないよう、画面の外まで伸ばす量 */
  --band-overhang: 140px;
  /* 写真どうしの隙間。奥は地の色が見える */
  --panel-gap: 14px;
  /* 写真を逆向きに傾け戻すとき、四隅が欠けないために要る左右のはみ出し。
     帯の高さの半分 × tan(傾き) が必要量。余分に広げると cover の倍率が
     上がって写真が寄るので、最小限にする */
  --photo-bleed: calc(var(--band-h) * 0.095);
  /* 傾けると下辺が左へずれる。その分の目安（帯の高さの半分 × tan10°） */
  --band-shift: 56px;

  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* 夕日の写真。車は右に置く（元のトップと同じ寄せ）。
     上に黒い幕を重ねて文字を読めるようにし、下へ向かって地のグレーへ溶かす */
  background-color: var(--bg);
  background-image:
    linear-gradient(180deg,
      rgba(17, 18, 19, 0.34) 0%,
      rgba(17, 18, 19, 0.46) 34%,
      rgba(17, 18, 19, 0.82) 60%,
      rgba(17, 18, 19, 1.00) 82%),
    var(--veil-left),
    url("/images/image-01.jpg");
  background-size: auto, auto, cover;
  background-position: center, center, 72% 38%;
  background-repeat: no-repeat;
  /* 画面の外まで伸ばした帯が横スクロールを出さないようにする */
  overflow: hidden;
}

/* ---------- 上：文字だけ ---------- */

.stage-hero {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  /* 帯を absolute で画面下に貼っているぶん、この箱は 100svh いっぱいに広がり、
     帯の上に重なる。素通しにしないと、事業の4枚が一切押せなくなる。
     文字と丸ボタンの所だけ下の .stage-lead / .stage-rail で受け取り直す */
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  min-height: 0;
  /* 固定ヘッダー（88px）のすぐ下に見出しを置く。参照も上寄せ */
  padding: calc(88px + clamp(16px, 5vh, 52px)) 0 0;
}

.stage-hero-inner {
  display: grid;
  /* 右の柱は幅の 26%。見出しは残り全部を使う（1行で収める） */
  grid-template-columns: minmax(0, 1fr) minmax(340px, 31%);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  width: 100%;
}

/* 素通しにした .stage-hero の中で、ここだけクリックと文字選択を受け取る */
.stage-lead,
.stage-rail { pointer-events: auto; }

.stage-title {
  font-family: var(--serif);
  /* 11文字を1行で。5.2vw は 1600px で 83px、1280px で 66px */
  font-size: clamp(36px, 5.2vw, 84px);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--fg);
}

/* 参照は1行。PCでは改行を効かせない（文言はそのまま） */
.stage-title br { display: none; }

.stage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(24px, 4vh, 44px);
}

/* 丸いボタン。白いほうが主役 */
.stage-btn {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 54px;
  padding: 0 30px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--fg);
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.stage-btn span { transition: transform 0.35s ease; }
.stage-btn:hover span,
.stage-btn:focus-visible span { transform: translateX(6px); }

.stage-btn-solid {
  background: var(--fg);
  border-color: var(--fg);
  color: #111213;
}
.stage-btn-solid:hover,
.stage-btn-solid:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
}
.stage-btn:not(.stage-btn-solid):hover,
.stage-btn:not(.stage-btn-solid):focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--fg);
}

/* 右の柱。縦線 → 英字 → 日本語の順に置く。見出しの上端と揃える */
.stage-rail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 2vw, 32px);
  padding-left: clamp(18px, 2vw, 32px);
  margin-top: 0;
  border-left: 1px solid var(--rule);
}

.stage-rail-en {
  font-family: var(--latin);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  line-height: 2.5;
  color: var(--fg-sub);
  white-space: nowrap;
}

.stage-rail-lead {
  font-size: clamp(13px, 0.9vw, 14px);
  line-height: 2.0;
  letter-spacing: 0.04em;
  /* 改行は <br> の位置だけ。語の途中で折らない */
  white-space: nowrap;
  color: var(--fg-sub);
}

/* ---------- 下：斜めの帯 ---------- */

/* PC では画面の下に貼り付け、上辺の斜めを文字の下まで食い込ませる
   （参照では右の柱の下まで写真が上がってくる） */
.band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: var(--band-h);
}

/* 帯の上辺を右上がりに切る。写真そのものは傾けない */
.band-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: polygon(0 var(--band-dip), 100% 0, 100% 100%, 0 100%);
}

/* 仕切りだけを斜めにする。画面の外まで広げてから傾けるので、
   左右の端は画面の縁で垂直に見える */
.band-row {
  display: flex;
  /* 隙間のぶんだけ横に広げる。広げないと1枚あたりが細って見える */
  gap: var(--panel-gap);
  height: 100%;
  width: calc(100% + 2 * var(--band-overhang) + 3 * var(--panel-gap));
  margin-left: calc(-1 * var(--band-overhang));
  transform: skewX(var(--skew));
}

.panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

/* 隙間は .band-row の gap で空ける。奥は地の色。
   影の仕切り線は、隙間ができた今は不要 */

/* 写真は左右へはみ出させてから逆向きに傾け、元の形に戻す。
   はみ出し分があるので、戻しても四隅に欠けが出ない */
.panel-photo {
  position: absolute;
  inset: 0 calc(-1 * var(--photo-bleed));
  background-image: var(--panel-image);
  background-size: cover;
  background-position: var(--panel-pos, center);
  background-repeat: no-repeat;
  transform: skewX(var(--unskew));
  transition: transform 0.5s ease, filter 0.5s ease;
}

.panel:hover .panel-photo,
.panel:focus-visible .panel-photo {
  transform: skewX(var(--unskew)) scale(1.04);
  filter: brightness(1.14);
}

/* 文字を読めるようにする幕。下へ向かって濃くする */
.panel-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(17, 18, 19, 0.08) 0%,
      rgba(17, 18, 19, 0.36) 55%,
      rgba(17, 18, 19, 0.92) 100%);
}

/* 事業名は下にそろえる。帯ごと傾いているので、ここも元へ戻す */
.panel-meta {
  position: absolute;
  left: clamp(16px, 2.2vw, 40px);
  right: clamp(12px, 1.6vw, 28px);
  bottom: clamp(22px, 3.6vh, 44px);
  transform: skewX(var(--unskew));
  transform-origin: left bottom;
}

/* 両端のパネルは、画面の外へ出している分（--band-overhang）と、
   傾きで下辺が左へずれる分だけ、文字を内側へ寄せる。
   これをしないと 01 の事業名が画面の外で切れる */
.panel:first-child .panel-meta {
  left: calc(var(--band-overhang) + clamp(16px, 2.2vw, 40px) + var(--band-shift));
}
.panel:last-child .panel-meta {
  right: calc(var(--band-overhang) + clamp(12px, 1.6vw, 28px));
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(8px, 1.4vh, 16px);
}

.panel-no {
  font-family: var(--latin);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1;
  color: var(--accent);
}

.panel-rule {
  flex: 0 0 auto;
  width: clamp(22px, 2.4vw, 46px);
  height: 1px;
  background: var(--rule);
}

.panel-en {
  display: block;
  font-family: var(--latin);
  font-size: clamp(11px, 0.95vw, 15px);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.5;
  color: var(--fg-sub);
}

.panel-jp {
  display: block;
  margin-top: 6px;
  font-size: clamp(12px, 1.05vw, 17px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.6;
  color: var(--fg);
}

/* 帯の下。地のグレーから白へ落として、白いフッターへつなぐ */
.stage-fade {
  height: clamp(140px, 24vh, 240px);
  background: linear-gradient(180deg, var(--bg) 0%, #4a4f55 42%, #8e9399 72%, #b9bdc1 100%);
}

/* トップだけフッターを白にする（他のページは従来どおり暗いまま） */
body.home .site-footer {
  /* 上の .stage-fade の終わりの色から始めて、一番下だけほぼ白にする。真っ白な面を作らない */
  background: linear-gradient(180deg, #b9bdc1 0%, #d3d6d9 40%, #e9ebec 75%, #f6f7f8 100%);
  border-top: 0;
  color: #1c1e21;
}
body.home .footer-address,
body.home .footer-group a,
body.home .footer-nav { color: #353a40; }
body.home .footer-group a:hover { color: #1c1e21; }
body.home .footer-group h2 { color: #2d7fbd; }
body.home .footer-bottom { color: #5f656b; }
/* 白いロゴ画像は白地で消えるので反転する（透過PNG前提） */
body.home .footer-mark img { filter: invert(1); }

/* 画面が十分あるときは 1画面に収める */
@media (min-width: 1025px) and (min-height: 600px) {
  .home-stage { height: 100svh; }
}

/* ---------- タブレット ---------- */

@media (max-width: 1024px) {
  .home-stage {
    --skew: -8deg;
    --unskew: 8deg;
    --band-h: clamp(300px, 50svh, 520px);
    --band-dip: 20%;
    --band-overhang: 100px;
    --panel-gap: 12px;
    /* タブレットは 8°（tan/2 = 0.070）。余裕を見て 0.078 */
    --photo-bleed: calc(var(--band-h) * 0.078);
    --band-shift: 32px;
  }

  /* 帯は流れの中に戻す（重ねると右の柱と写真がぶつかる） */
  .band { position: relative; flex: 0 0 auto; }
  .stage-hero { padding-bottom: clamp(24px, 4vh, 48px); }

  /* 見出しは2行に戻す */
  .stage-title { white-space: normal; font-size: clamp(38px, 7.4vw, 72px); line-height: 1.34; }
  .stage-title br { display: inline; }

  /* 右の柱は下へ回す。縦線は横線にする */
  .stage-hero-inner {
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vh, 48px);
  }
  .stage-rail {
    padding-left: 0;
    padding-top: clamp(22px, 3.5vh, 32px);
    margin-top: 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
}

/* ---------- スマートフォン ---------- */

@media (max-width: 720px) {
  .home-stage {
    /* 縦に積むと、帯ごと傾ける作りでは横ずれが高さに比例して大きくなり、
       下の写真ほど左へ逃げて事業名が切れる。スマホでは傾けない */
    --skew: 0deg;
    --unskew: 0deg;
    /* 上辺の斜めは固定の浅さにする。割合（%）のままだと、縦に積んで帯が
       高くなるほど斜めが深くなり、1枚目の事業名を削ってしまう */
    --band-dip: 26px;
    --band-overhang: 0px;
    --panel-gap: 10px;
    --band-shift: 0px;
    min-height: 0;
  }

  /* 幅が足りないので 4枚を 2×2 にする */
  .band { height: auto; }
  .band-clip { position: relative; inset: auto; }
  .band-row {
    flex-wrap: wrap;
    width: 100%;
    margin-left: 0;
    transform: none;
  }
  /* 隙間のぶんを引かないと 2枚が収まらず、1列に落ちてしまう */
  .panel {
    flex: 0 0 calc(50% - var(--panel-gap) / 2);
    height: clamp(210px, 32svh, 290px);
  }

  .stage-hero {
    padding: calc(68px + 28px) 0 32px;
  }
  .stage-title { font-size: clamp(34px, 9.2vw, 44px); line-height: 1.42; }
  .stage-actions { gap: 10px; }
  .stage-btn {
    min-height: 50px;
    padding: 0 22px;
    font-size: 13px;
    gap: 12px;
  }
  .stage-rail { grid-template-columns: 1fr; gap: 16px; }
  .stage-rail-lead { white-space: normal; }
  .stage-rail-en { line-height: 2; }
  .panel-photo { inset: 0; transform: none; }
  .home-stage { background-position: center, center, 78% 30%; }
  .stage-fade { height: 130px; }

  /* 2列に折り返すと、2段目の左のパネルも画面の外へ出る。
     左の列すべてに端の逃げを効かせる（効かないと 03 の事業名が切れる） */
  /* 傾けないので端の逃げは不要。4枚とも同じ位置に置く */
  .panel .panel-meta {
    left: clamp(14px, 3vw, 22px);
    right: clamp(10px, 2vw, 18px);
    transform: none;
  }
}

@media (max-width: 420px) {
  /* ここまで狭いと 2列でも事業名が折り返す。1列に落とす */
  .panel { flex: 0 0 100%; height: clamp(190px, 28svh, 240px); }
}

/* 動きを減らす設定のときは拡大も移動もしない */
@media (prefers-reduced-motion: reduce) {
  .panel-photo,
  .stage-btn,
  .stage-btn span { transition: none; }
  .panel:hover .panel-photo,
  .panel:focus-visible .panel-photo { transform: skewX(var(--unskew)); }
  .stage-btn:hover span,
  .stage-btn:focus-visible span { transform: none; }
}