/* ==============================================================
   top.css — トップページ固有
   ヒーロー（雑誌の見開き）/ 写真グリッド / コアバリューの帯 /
   事業内容 / 導入事例・実績 / 数字 / 会社概要
   ============================================================== */

/* 写真は WebP で、しかも画面に合わせた大きさで配信する。
   image-set はブラウザが1つだけ選んで読み込む。選び方は2段階。
     ・形式  … WebP を読めなければ JPEG を取る（古い環境でも写真は出る）
     ・解像度… 高精細でない画面は -1x（半分の大きさ）を取る

   -1x を用意しているのは、ファイルの大きさだけでなく「読み込んだあとに
   画面用へ展開する時間」も画素数に比例するため。すぐ上でヒーローが動いて
   いるので、その時間を削ることに意味がある。

   ※ jpg と -1x.webp を消すと、それぞれ古い環境・等倍の画面で写真が出なく
      なる。3つそろえて置いておくこと。 */
:root {
  --img-portrait: image-set(url("/assets/img/top-portrait-1x.webp") type("image/webp") 1x, url("/assets/img/top-portrait.webp") type("image/webp") 2x, url("/assets/img/top-portrait.jpg") type("image/jpeg"));
  --img-work:     image-set(url("/assets/img/top-work-1x.webp")     type("image/webp") 1x, url("/assets/img/top-work.webp")     type("image/webp") 2x, url("/assets/img/top-work.jpg")     type("image/jpeg"));
  --img-meeting:  image-set(url("/assets/img/top-meeting-1x.webp")  type("image/webp") 1x, url("/assets/img/top-meeting.webp")  type("image/webp") 2x, url("/assets/img/top-meeting.jpg")  type("image/jpeg"));
  --img-team:     image-set(url("/assets/img/top-team-1x.webp")     type("image/webp") 1x, url("/assets/img/top-team.webp")     type("image/webp") 2x, url("/assets/img/top-team.jpg")     type("image/jpeg"));
}

/* ---------- hero : 案E（言葉で見せる） ----------
   最上部に写真は置かない。パーパスを画面いっぱいに見せ、写真はすぐ下の3枚に任せる。
   （2026-09-28 大﨑さん決定。A〜Dはパーパスが左半分に収まるが、案Eだけは画面を占める） */

/* 散らばったラベルが写真の上まで出ないよう、ヒーローの外は切る */
.hero { padding-block: clamp(28px, 4vw, 56px) clamp(34px, 5vw, 64px); overflow: hidden; overflow: clip; }

.spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3.4vw, 48px);
  align-items: center;
}

/* 見出しの下に置く3本。事実だけを並べる */
.hero-rule {
  display: grid; gap: 10px;
  margin: clamp(20px, 2.6vw, 30px) 0 0;
  padding-top: clamp(16px, 2.2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  position: relative;
}
.hero-rule > div { font-size: 13px; color: var(--ink-2); }
.hero-rule b {
  display: block; font-family: var(--en); font-size: 11px;
  letter-spacing: .16em; color: var(--cta); margin-bottom: 4px;
}
/* 「事業領域」だけは日本語ラベル。英字にすると英字ラベルが3箇所になり、
   ブランドルール（最大2箇所）を超えるため */
.hero-rule b.ja { font-family: inherit; letter-spacing: .08em; font-weight: 700; color: var(--ink-3); }

.lede { display: flex; flex-direction: column; justify-content: center; position: relative; }

.issue { font-family: var(--en); font-size: 11px; font-weight: 700; letter-spacing: .26em; color: var(--cta); margin: 0 0 clamp(14px, 2vw, 22px); }

.lede h1 {
  font-size: clamp(18px, 2.3vw, 26px); font-weight: 700; line-height: 1.65;
  margin: 0 0 14px; padding-top: clamp(14px, 2vw, 22px); border-top: 2px solid var(--ink);
  word-break: auto-phrase; text-wrap: balance;
}
.lede .display-jp {
  margin-top: clamp(4px, 1vw, 12px);
  font-size: clamp(28px, 5.2vw, 62px); font-weight: 900; line-height: 1.32;
  letter-spacing: .01em; margin: 0 0 clamp(14px, 2vw, 22px); text-wrap: balance;
  word-break: auto-phrase;
}
.lede .sub-purpose {
  font-size: clamp(15px, 1.9vw, 20px); font-weight: 700; margin: 0 0 14px;
  padding-top: clamp(14px, 2vw, 20px); border-top: 2px solid var(--ink);
}
.lede p { margin: 0 0 24px; color: var(--ink-2); max-width: 46ch; font-size: 14.5px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* 縦に伸びた枠へ横位置の写真を cover で入れると被写体が切れるため、
   枠の比率を写真に寄せ、人物が中心に来る位置で止める */
.cover { position: relative; align-self: start; aspect-ratio: 4 / 3.4; background: var(--img-portrait) 58% 18% / cover no-repeat; }

/* ---------- 写真グリッド（あしらい: 細罫で3枚を区切る） ---------- */

.plates {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line); border-block: 1px solid var(--line);
}
/* 画面に入るまで中身の描画を後回しにする。ヒーローが動いている最中に
   すぐ下の写真のデコードが走ると、その負荷で動きがかくつくため。
   高さを先に伝えておかないと、描画される瞬間にレイアウトが飛ぶ。
   contain-intrinsic-size は 4:3 の1枚ぶんのおおよその高さ。 */
.plates figure {
  margin: 0; position: relative; background: var(--paper); overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}
.plates .img { aspect-ratio: 4 / 3; background-position: center; background-size: cover; will-change: transform; }
/* 3枚それぞれ違う動きにする（01はゆっくり寄る／02は横に流れる／03は縦に流れる）
   ・動かすのは transform だけ。background-position を動かすと毎フレーム描き直しになり、
     すぐ上のヒーローの動きがかくつくため（9/30 大﨑さん指摘を受けて見直し）
   ・流す2枚は少し拡大しておき、端が見えないようにする
   ・ヒーローが終わる 2.0 秒までは止めておく（both で最初の状態を保つ） */
.plates .a .img { background-image: var(--img-work); background-position: center 45%; animation: wsZoom 30s ease-in-out 2s infinite alternate both; }
.plates .b .img { background-image: var(--img-meeting); animation: wsDrift 34s ease-in-out 2s infinite alternate both; }
.plates .c .img { background-image: var(--img-team); animation: wsFloat 26s ease-in-out 2s infinite alternate both; }

@keyframes wsZoom  { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes wsDrift { from { transform: scale(1.1) translateX(-3.5%); } to { transform: scale(1.1) translateX(3.5%); } }
@keyframes wsFloat { from { transform: scale(1.1) translateY(-3%); } to { transform: scale(1.1) translateY(3%); } }

/* ---------- コアバリューを流す反転バンド（見出しは付けない） ---------- */

.ws-value-band {
  display: flex; overflow: hidden; user-select: none;
  background: var(--ink); color: var(--paper);
  padding-block: clamp(13px, 1.8vw, 20px);
  border-block: 1px solid var(--ink);
}
.ws-value-band div {
  display: flex; flex: none; gap: 40px; padding-right: 40px; white-space: nowrap;
  font-size: clamp(17px, 2.2vw, 25px); font-weight: 900; letter-spacing: .02em;
  animation: wsSlide 30s linear infinite;
}
.ws-value-band span:nth-child(even) { color: var(--cta-soft); font-family: var(--en); font-weight: 800; }

/* ---------- sections ---------- */

section { padding-block: clamp(48px, 6.5vw, 96px); }
section.band { background: var(--band); }

.head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(14px, 3vw, 44px); align-items: end; margin-bottom: clamp(26px, 4vw, 44px); padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.head h2 { font-family: var(--en); font-size: clamp(28px, 4.6vw, 56px); font-weight: 900; line-height: .95; letter-spacing: -.03em; margin: 0; text-transform: uppercase; }
.head .desc { color: var(--ink-2); margin: 0; font-size: 14.5px; }

/* ---------- 事業：番号付き罫線 ＋ タグ ---------- */

.rows { border-top: 1px solid var(--ink); }
.row {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(12px, 2.6vw, 36px); align-items: start;
  padding-block: clamp(20px, 2.8vw, 32px); border-bottom: 1px solid var(--line);
  transition: background .25s, padding-left .25s;
}
.row:hover { background: rgba(194,68,15,.05); padding-left: 12px; }
.row .n { font-family: var(--en); font-size: clamp(24px, 3vw, 38px); font-weight: 900; line-height: 1; letter-spacing: -.03em; color: var(--cta); }
.row h3 { font-size: clamp(17px, 2vw, 22px); font-weight: 700; margin: 0; line-height: 1.5; }
.row p { margin: 0 0 10px; color: var(--ink-2); font-size: 14.5px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { font-size: 11.5px; color: var(--ink-2); border: 1px solid var(--line); padding: 3px 10px; background: var(--paper); }

a.row { text-decoration: none; color: inherit; }
a.row .more {
  margin: 10px 0 0; font-family: var(--en); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; color: var(--cta); display: inline-flex; gap: 8px;
}
a.row .more::after { content: "→"; transition: transform .2s; }
a.row:hover .more::after { transform: translateX(5px); }

/* ---------- 導入事例・実績 ---------- */

.case-tally { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.case-tally li { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ink); background: var(--paper); border: 1px solid var(--line); padding: 3px 12px; }
.case-tally b { font-family: var(--en); color: var(--cta); margin-left: 4px; }

.case-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.case-cards > li { display: flex; }

.case-card {
  flex: 1; display: flex; flex-direction: column; gap: 16px;
  background: var(--paper); color: inherit; text-decoration: none;
  padding: clamp(22px, 2.6vw, 32px);
  transition: background .25s;
}
.case-card:hover { background: #fffdf8; }

.case-card .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.case-card h3 { font-size: clamp(16px, 1.7vw, 19px); font-weight: 700; line-height: 1.6; margin: 0; padding-bottom: 14px; border-bottom: 2px solid var(--ink); text-wrap: pretty; }
.case-card h3 .no { font-family: var(--en); font-weight: 900; color: var(--cta); letter-spacing: .02em; }

.case-card dl { margin: 0; display: grid; grid-template-columns: 3.2em minmax(0, 1fr); gap: 10px 12px; }
.case-card dt { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: var(--ink-3); padding-top: 2px; }
.case-card dd { margin: 0; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.case-card dd.result { color: var(--ink); font-weight: 700; }

.case-card .more {
  margin: auto 0 0; padding-top: 6px;
  font-family: var(--en); font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--cta);
  display: inline-flex; gap: 8px;
}
.case-card .more::after { content: "→"; transition: transform .2s; }
.case-card:hover .more::after { transform: translateX(5px); }

/* ---------- 数字 ---------- */

.figures { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.figures li { background: var(--paper); padding: clamp(20px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 3px; }
.figures .k { font-family: var(--en); font-size: 10px; font-weight: 700; letter-spacing: .2em; color: var(--ink-3); }
.figures .v { font-family: var(--en); font-size: clamp(32px, 4.2vw, 52px); font-weight: 900; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.figures .u { font-size: 13px; color: var(--ink-2); }

/* ---------- 会社概要 ---------- */

.company { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.company li { display: grid; grid-template-columns: minmax(130px, 200px) 1fr; gap: 8px 28px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.company .key { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; color: var(--ink-3); }
.company .val { font-size: 14.5px; color: var(--ink-2); }
.company .val span { display: block; }

.exec-link { font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--cta); padding-bottom: 1px; }
.exec-link:hover { color: var(--cta); }

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  /* 幅が狭いときは見出しを上に置き、本文の幅を確保する（語の途中で折り返さないように） */
  .case-card dl { grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
  .case-card dt { padding-top: 6px; }
  .spread { grid-template-columns: minmax(0, 1fr); }
  .cover { aspect-ratio: 16 / 10; }
  .plates { grid-template-columns: 1fr; }
  .head { grid-template-columns: 1fr; align-items: start; }
  .row { grid-template-columns: 52px minmax(0, 1fr); }
  .row > div:last-child { grid-column: 2; }
  .company li { grid-template-columns: 1fr; }
  .case-cards { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .spread { grid-template-columns: 1fr; }
}

/* ---------- ヒーローの立ち上がり（案①の改） ----------

   案Eは最初の画面が文字だけになるため、パーパスの登場そのものを見せ場にする。
   **散らばった事実が一列に揃い、席を譲って、パーパスが立ち上がる**。
   要件を整理して形にする、という仕事そのものと意味を重ねる。
   （2026-09-28 指示 → 9/30 大﨑さん「ばらけて収束する演出」を受けて案①の改に）

   守っていること
   ・パーパスの文字は散らさない。1字ずつ集めるとテンプレ感が出るため、
     マスクから行ごとに立ち上げる（opacity は使わない＝半透明の段階を持たせない）
   ・散らすのは会社の事実（拠点・設立・事業）7つだけ。意味のない記号は入れない
   ・ラベルは出したまま残さない。整列したら必ず消える（残すとゴミに見える）
   ・「心躍る」だけ色やサイズを変えない。一語だけ飾ると作り物に見える
   ・全体で 2.0 秒以内（9/30 大﨑さん「1.8〜2.0秒まで使ってよい」）
   ・フォントが揃うまで開始しない（site.js 3-1c）。差し替えの瞬間のかくつきを避ける
   ・動かすのは transform と opacity だけ

   時間の割り当て
     0.00s        見出しの上の罫線（0.45s）
     0.00〜0.28s  ラベル7つが散らばった位置に現れる
     0.28〜0.92s  パーパス1行目の位置へ一列に整列する
     0.92〜1.04s  揃ったまま一拍おく
     1.04〜1.40s  上へ抜けて消える（席を譲る）
     1.00s〜      入れ替わりに見出し1行目がマスクから立ち上がる（0.85s）
     1.12s〜      見出し2行目（〜1.97s）
     1.25 / 1.35 / 1.45s  サブコピー／本文／ボタン（0.45s）
     1.45s〜      3本の上の罫線、3本（0.07s刻み、〜1.99s）                */

@keyframes wsRiseHero { from { transform: translateY(100%); } to { transform: none; } }
@keyframes wsRuleIn   { from { transform: scaleX(0); }        to { transform: none; } }

/* 開始の合図（.go）までは止めて、見せない。JSが止まっても3秒後には必ず見せる */
@keyframes wsShowLate { to { visibility: visible; } }
html.js-on .hero:not(.go) .lede { visibility: hidden; animation: wsShowLate 0s 3s forwards; }
html.js-on .hero:not(.go) .lede *,
html.js-on .hero:not(.go) .lede *::before { animation-play-state: paused !important; }

.hero .ws-line > span { animation: wsRiseHero .85s cubic-bezier(.16,1,.3,1) both; }
/* はみ出しを隠すと「。」や「ゃ」の下端が切れるため、余白を足して相殺する */
.hero .ws-line { padding-bottom: .14em; margin-bottom: -.14em; }

/* ラベル。並んだ位置がふつうの配置で、散らばった位置は site.js が差分（--x/--y）で渡す */
.hero-scatter {
  position: absolute; left: 0; right: 0; top: 0; z-index: 1;
  transform: translateY(-50%);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px;
  pointer-events: none;
}
.hero-scatter span {
  --x: 0px; --y: 0px; --r: 0deg; --d: 0s;
  font-family: var(--en); font-size: clamp(11px, 1.25vw, 16px); font-weight: 700;
  letter-spacing: .16em; line-height: 1.4; color: var(--ink-2); white-space: nowrap;
  animation: wsBit 1.4s linear both;
  animation-delay: var(--d);
}
@keyframes wsBit {
  0%   { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1.15); animation-timing-function: cubic-bezier(.2,.8,.3,1); }
  20%  { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)); animation-timing-function: cubic-bezier(.7,0,.2,1); }
  66%  { opacity: 1; transform: none; }
  74%  { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.5,0,.75,0); }
  100% { opacity: 0; transform: translateY(-120%); }
}

/* 見出しの上と、3本の上の罫線。左から引かれる */
.hero .display-jp, .hero .hero-rule { position: relative; }
.hero .display-jp::before, .hero .hero-rule::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--line); transform-origin: left;
  animation: wsRuleIn .45s cubic-bezier(.16,1,.3,1) both;
}
.hero .display-jp::before { height: 2px; background: var(--ink); }
.hero .hero-rule::before { animation-delay: 1.45s; }
/* 罫線は ::before で引くので、元の border-top は外す（二重線になるため） */
.hero .display-jp {
  border-top: 0; padding-top: clamp(14px, 2vw, 22px);
  /* 案Eはパーパスが主役。画面を占める大きさにする */
  font-size: clamp(34px, 7vw, 86px);
}

/* ヒーローの中は少し短めにして、全体を2.0秒に収める（ボタンが 1.45 + 0.45 = 1.90s） */
.hero .ws-in { animation-duration: .45s; }

/* 3本は最後に 0.07s 刻みで（3本目が 1.59 + 0.40 = 1.99s） */
.hero .hero-rule > div { animation: wsRise .4s cubic-bezier(.2,.75,.25,1) both; }
.hero .hero-rule > div:nth-child(1) { animation-delay: 1.45s; }
.hero .hero-rule > div:nth-child(2) { animation-delay: 1.52s; }
.hero .hero-rule > div:nth-child(3) { animation-delay: 1.59s; }

/* JSが動かない環境では、動かさずそのまま見せる（ラベルはJSが作るので、そもそも出ない） */
html:not(.js-on) .hero .display-jp::before,
html:not(.js-on) .hero .hero-rule::before,
html:not(.js-on) .hero .hero-rule > div { animation: none; transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ws-value-band div { animation: none; }
  .plates .img { animation: none !important; transform: none !important; }
  .hero .display-jp::before,
  .hero .hero-rule::before,
  .hero .hero-rule > div { animation: none !important; transform: none !important; opacity: 1 !important; }
  /* ラベルは出さない。散らかったまま止まって見えるため */
  .hero-scatter { display: none !important; }
}

/* ---------- お知らせ（トップ） ---------- */

.news-sec { padding-block: clamp(34px, 4.6vw, 64px); }
.news-sec .news-list { margin-top: clamp(6px, 1vw, 12px); }
.news-more { margin: clamp(18px, 2.4vw, 26px) 0 0; }