/* ============================================================
   AI Creative Prototype 01: 株式会社白鉄組(架空)
   トークンはブリーフ §5 から導出。参考サイト(test_05 / goldenrecord)由来の hex は使わない。
   地 = オフホワイト(白鉄の「白」= 素地)/ 墨 = 鉄の黒(文字と「正直に言うと」の 1 面のみ)
   アクセント = 安全オレンジ 1 色(番号・下線・CTA・FV の窓の縁。面では使わない)
   書体 = Archivo(英字小さめのラベル・数字)+ Noto Sans JP(日本語見出しが主役)
   動きの人格 = Corporate(cubic-bezier(.2,0,0,1) / オーバーシュート 0 / 鉄 = 硬い素材)
   ============================================================ */

:root {
  --bg: #F4F3F0;
  --bg-deep: #EBE9E4;
  --white: #FFFFFF;
  --ink: #1A1A1A;
  --ink-soft: #3A3A3A;
  --muted: #6B6B68;
  --line: #D9D7D2;
  --line-dark: #3A3A3A;
  --accent: #F26A1B;
  --accent-deep: #D95A10;
  --font-jp: "Noto Sans JP", "游ゴシック", "Yu Gothic", "Helvetica Neue", sans-serif;
  --font-en: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --container: 1200px;
  --pad: clamp(20px, 4vw, 48px);
  --radius: 4px;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ribbon-h: 37px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  font-family: var(--font-jp);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .02em;
  overflow-x: clip;
  font-feature-settings: "palt";
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
.en { font-family: var(--font-en); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }

/* ---------- デモ明記リボン ---------- */
.proto-ribbon {
  position: sticky; top: 0; z-index: 200;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  padding: 8px var(--pad);
  background: var(--ink); color: var(--white);
  font-size: 12px; line-height: 1.6; letter-spacing: .04em;
}
.proto-ribbon__mark { font-family: var(--font-en); color: var(--accent); font-weight: 700; }
.proto-ribbon a { margin-left: auto; border-bottom: 1px solid var(--accent); }

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky; top: var(--ribbon-h); z-index: 150;
  display: flex; align-items: center; gap: 28px;
  padding: 14px var(--pad);
  margin-bottom: calc(-1 * var(--header-h, 74px)); /* ヒーローの上に重ねる */
  background: transparent; color: var(--white);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-solid { background: rgba(244, 243, 240, .92); color: var(--ink); border-bottom-color: var(--line); backdrop-filter: blur(8px); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: .06em; }
.brand__mark { width: 16px; height: 16px; border: 2.5px solid currentColor; position: relative; }
.brand__mark::after { content: ""; position: absolute; right: -5px; bottom: -5px; width: 8px; height: 8px; background: var(--accent); }
.brand small { font-size: 11px; font-weight: 400; opacity: .7; margin-left: 4px; }
.site-nav { display: flex; gap: 22px; margin-left: auto; }
.site-nav a { font-size: 13px; font-weight: 500; letter-spacing: .06em; padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color .2s var(--ease); }
.site-nav a:hover { border-bottom-color: var(--accent); }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: var(--radius);
  font-weight: 700; font-size: 14px; letter-spacing: .06em; line-height: 1.4;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  min-height: 44px;
}
.btn--accent { background: var(--accent); color: var(--white); }
.btn--accent:hover { background: var(--accent-deep); transform: translateY(-2px); }
.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--white); }
.btn--sm { padding: 10px 18px; font-size: 13px; }
.btn--lg { padding: 18px 28px; font-size: 15px; flex-direction: column; gap: 2px; }
.btn--lg small { font-size: 11px; font-weight: 400; letter-spacing: .04em; opacity: .85; }

/* ---------- 見出し・ラベル ---------- */
.label {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--muted);
  margin-bottom: 26px;
}
.label__num { font-family: var(--font-en); color: var(--white); background: var(--accent); padding: 2px 8px; border-radius: 2px; letter-spacing: .08em; }
.label--light { color: rgba(244, 243, 240, .7); }
.h2 { font-size: clamp(30px, 4vw, 56px); font-weight: 900; line-height: 1.3; letter-spacing: .02em; }
.lead { margin-top: 22px; max-width: 720px; color: var(--ink-soft); }

/* ---------- セクション ---------- */
.section { padding: clamp(84px, 10vw, 150px) 0; }
.section--white { background: var(--white); }
.section--entry { background: var(--bg-deep); }

/* ---------- 01 FV(参考:fines-art.com の分割ヒーロー / 左 = 鉄黒パネル・右 = 写真) ---------- */
.fv { position: relative; z-index: 1; background: var(--ink); }
.fv__main { position: relative; display: flex; flex-direction: row-reverse; min-height: max(760px, calc(100vh - var(--ribbon-h))); }
/* PC:FV を sticky で固定し、走路(--fv-run)の分だけスクロールでワイプが進む。終わってから下へ流れる */
@media (min-width: 1081px) {
  .fv { --fv-run: 70vh; height: calc(100vh - var(--ribbon-h) + var(--fv-run)); }
  .fv__main { position: sticky; top: var(--ribbon-h); height: calc(100vh - var(--ribbon-h)); min-height: 0; }
  html.noanim .fv { height: auto; }
  html.noanim .fv__main { position: relative; top: auto; height: auto; min-height: max(760px, calc(100vh - var(--ribbon-h))); }
}
.fv__visual { position: relative; flex: 1 1 50%; overflow: hidden; }
.fv__visual img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.4s cubic-bezier(.39, .575, .565, 1); }
html.is-loaded .fv__visual img { transform: none; }
.fv__mask { position: absolute; inset: -5%; z-index: 2; background: var(--ink); clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.77, 0, .175, 1) .1s; }
html.is-loaded .fv__mask { clip-path: inset(0 0 0 100%); }
.fv__visual::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(26, 26, 26, .5) 0%, rgba(26, 26, 26, 0) 32%, rgba(26, 26, 26, 0) 70%, rgba(26, 26, 26, .55) 100%); } /* 上 = ヘッダー、下 = ティッカーの白文字を写真の上で読ませる */
.fv__band {
  position: absolute; right: var(--pad); top: 108px; z-index: 3;
  display: grid; justify-items: end; gap: 4px;
  font-size: 12px; letter-spacing: .08em; color: var(--white);
  opacity: 0; transition: opacity .8s var(--ease) 1.1s;
}
.fv__band span { background: rgba(26, 26, 26, .72); padding: 4px 10px; }
.fv__band span:first-child { font-weight: 700; font-size: 13px; }
html.is-loaded .fv__band { opacity: 1; }

.fv__panel { position: relative; flex: 1 1 50%; display: flex; align-items: center; justify-content: center; padding: 120px 0 140px; color: var(--white); overflow: hidden; }
.fv__panel-inner { display: flex; align-items: flex-start; gap: clamp(28px, 3.2vw, 56px); }
/* コピーは顔カードと右の写真の「間」に立てる(縦書きの白箱 2 本) */
.fv__copy {
  display: flex; flex-direction: row-reverse; align-items: flex-start; gap: .5em;
  padding-top: 46px; /* カードのタブ分だけ下げて、写真の上端に揃える */
  font-size: clamp(18px, 1.5vw, 24px); font-weight: 900; line-height: 1;
}
.fv__copy-line { display: block; background: var(--white); color: var(--ink); clip-path: inset(0 0 100% 0); transition: clip-path 1s cubic-bezier(.77, 0, .175, 1) .05s; }
.fv__copy-line.is-02 { transition-delay: .25s; }
html.is-loaded .fv__copy-line { clip-path: inset(0 0 0 0); }
.sp-br { display: none; }
.fv__copy-txt { display: block; writing-mode: vertical-rl; font-feature-settings: "pkna"; white-space: nowrap; letter-spacing: .08em; padding: .8em .42em; }

.fv__card-wrap { position: relative; width: min(24.5vw, 340px); }
.fv__card { position: relative; z-index: 2; opacity: 0; transform: translateY(-20px); transition: opacity .7s var(--ease) .45s, transform .7s var(--ease) .45s; }
html.is-loaded .fv__card { opacity: 1; transform: none; }
.fv__card-tabs { display: flex; justify-content: flex-end; gap: 18px; margin-bottom: 14px; }
.fv__tab { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: rgba(244, 243, 240, .55); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .1em; cursor: pointer; padding: 6px 0; min-height: 32px; transition: color .25s var(--ease); }
.fv__tab i { width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; transition: background .25s var(--ease); }
.fv__tab.is-on { color: var(--white); }
.fv__tab.is-on i { background: var(--accent); border-color: var(--accent); }
.fv__card-face { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius); background: #2A2A2A; margin: 0; }
.face { position: absolute; inset: 0; }
.face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.face--y3 { clip-path: inset(0 100% 0 0); }
html.noanim .face--y3 { clip-path: inset(0 0 0 0); }
.face__tag { position: absolute; left: 0; bottom: 0; z-index: 2; font-family: var(--font-en); font-size: 12px; font-weight: 700; letter-spacing: .1em; line-height: 1; padding: 7px 10px; background: var(--accent); color: var(--white); white-space: nowrap; }
.fv__card-cap { margin-top: 16px; }
.fv__card-name { display: flex; align-items: baseline; gap: 10px; font-size: 20px; font-weight: 900; line-height: 1.3; }
.fv__card-name small { font-size: 11px; font-weight: 400; color: rgba(244, 243, 240, .6); }
.fv__card-name .en { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--accent); }
.fv__card-note { margin-top: 6px; font-size: 13px; line-height: 1.7; color: rgba(244, 243, 240, .75); }
/* 画面下を横に流れる英字 */
.fv__ticker {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  overflow: hidden; white-space: nowrap; pointer-events: none;
  font-family: var(--font-en); font-weight: 900; font-size: clamp(64px, 7.2vw, 108px); line-height: 1; letter-spacing: -.02em; color: var(--white);
  padding-top: .1em; margin-bottom: -.14em; /* 下端をわずかに切って抜けを作る */
  opacity: 0; transition: opacity .8s var(--ease) .7s;
}
html.is-loaded .fv__ticker { opacity: 1; }
.fv__ticker-track { display: inline-flex; animation: fv-ticker 36s linear infinite; will-change: transform; }
.fv__ticker-group { display: inline-flex; flex: none; }
.fv__ticker-item { display: inline-flex; align-items: center; flex: none; padding-right: .45em; }
.fv__ticker-item i { display: inline-block; width: .32em; height: .32em; margin-left: .45em; background: var(--accent); }
@keyframes fv-ticker { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
html.noanim .fv__ticker-track { animation: none; }

.fv__arrow {
  position: absolute; left: 50%; bottom: 128px; z-index: 5; transform: translateX(-50%);
  width: 48px; height: 48px; border-radius: 50%; background: var(--white); color: var(--ink); border: 3px solid var(--ink);
  display: grid; place-items: center;
  opacity: 0; transition: opacity .6s var(--ease) 1s, transform .3s var(--ease);
}
html.is-loaded .fv__arrow { opacity: 1; }
.fv__arrow:hover { transform: translateX(-50%) translateY(3px); }
.fv__arrow svg { animation: arrow-bob 1.8s var(--ease) infinite; }
@keyframes arrow-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
html.noanim .fv__arrow svg { animation: none; }
.fv__news { background: var(--bg); color: var(--ink); text-align: center; padding: 18px var(--pad); font-size: 14px; letter-spacing: .06em; border-bottom: 1px solid var(--line); }
.fv__news-label { font-weight: 700; margin-right: 1em; }
.fv__news-label::after { content: ":"; }

/* ---------- 02 社長の言葉 ---------- */
.message { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.message__photo figcaption, .person__photo figcaption { display: grid; gap: 2px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.message__photo figcaption .en, .person__photo figcaption .en { font-weight: 700; color: var(--ink); font-size: 12px; letter-spacing: .12em; }
.message__text { margin-top: 30px; font-size: 17px; }
.message__text p + p { margin-top: 18px; }
.message__text p:first-child { font-size: 20px; font-weight: 700; }

/* ---------- 写真プレースホルダー(生成前) ---------- */
.ph { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--bg-deep); }
.ph--portrait { aspect-ratio: 1 / 1; }
.ph--wide { aspect-ratio: 3 / 2; margin-top: 18px; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }

/* ---------- 03 数字 ---------- */
.numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 56px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.numbers__item { padding: 30px 28px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.numbers__item dt { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
.numbers__item dd { margin-top: 8px; font-family: var(--font-en); font-size: clamp(44px, 5vw, 72px); font-weight: 900; line-height: 1; letter-spacing: -.01em; display: flex; align-items: baseline; gap: 6px; }
.numbers__item dd small { font-family: var(--font-jp); font-size: 15px; font-weight: 500; color: var(--muted); }
.numbers__text { font-family: var(--font-jp); font-size: clamp(22px, 2.2vw, 30px); font-weight: 900; line-height: 1.3; padding-top: .3em; }
.numbers__item--text dd { position: relative; padding-left: 14px; }
.numbers__item--text dd::before { content: ""; position: absolute; left: 0; top: .35em; bottom: .1em; width: 3px; background: var(--accent); }
.numbers__note { margin-top: 28px; max-width: 720px; color: var(--ink-soft); }

/* ---------- 04 仕事内容 ---------- */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
.split__body { margin-top: 30px; }
.split__body p + p { margin-top: 18px; }
.work__fig { padding-top: 20px; }
.rebar { width: 100%; max-width: 420px; height: auto; color: var(--ink); }
.rebar path, .rebar circle { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.rebar__tie circle { stroke: var(--accent); stroke-width: 3.5; }
.work__cap { margin-top: 14px; font-size: 12px; letter-spacing: .08em; color: var(--muted); display: flex; gap: 12px; align-items: center; }
.work__cap .en { font-weight: 700; color: var(--ink); }
.work__kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--line); }
.work__kinds li { display: grid; gap: 6px; font-size: 14px; color: var(--ink-soft); }
.work__kinds .en { font-size: 12px; font-weight: 700; color: var(--accent); }
.work__kinds strong { font-size: 17px; color: var(--ink); }

/* ---------- 05 育ち方(sticky 積層カード / motion-kit cardStack) ---------- */
.section--growth { background: var(--bg-deep); }
.stack { position: relative; margin-top: 56px; display: grid; gap: var(--stack-gap, 46vh); }
.stack-card {
  position: sticky; top: var(--top, 120px);
  background: var(--white); border-radius: 8px; border: 1px solid var(--line);
  padding: clamp(28px, 4vw, 48px);
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px 40px; align-items: start;
  box-shadow: 0 18px 40px rgba(26, 26, 26, .06);
  transform-origin: 50% 0;
  will-change: transform;
}
.stack-card__head { display: grid; gap: 2px; grid-row: 1 / span 3; }
.stack-card__num { font-size: clamp(56px, 7vw, 96px); font-weight: 900; line-height: .95; letter-spacing: -.02em; color: var(--accent); }
.stack-card__when { font-size: 14px; font-weight: 700; letter-spacing: .1em; color: var(--muted); margin-top: 8px; }
.stack-card__title { font-size: clamp(24px, 2.6vw, 36px); font-weight: 900; line-height: 1.35; }
.stack-card > p { color: var(--ink-soft); }
.stack-card__decide { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 14px; font-weight: 500; color: var(--ink); padding-top: 14px; border-top: 1px solid var(--line); }
.stack-card__decide .en { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--white); background: var(--ink); padding: 3px 8px; }
.stack-card--last { background: var(--ink); color: var(--white); border-color: var(--ink); }
.stack-card--last p { color: rgba(244, 243, 240, .8); }
.stack-card--last .stack-card__when { color: rgba(244, 243, 240, .6); }
.stack-card--last .stack-card__decide { color: var(--white); border-top-color: var(--line-dark); }
.stack-card--last .stack-card__decide .en { background: var(--accent); }
/* 本文の出現(半分見えたら -in)。noanim / is-static では即表示 */
.stack-card__title, .stack-card > p { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.stack-card > p { transition-delay: .08s; }
.stack-card__decide { transition-delay: .16s; }
.stack-card.-in .stack-card__title, .stack-card.-in > p, .stack.is-static .stack-card__title, .stack.is-static .stack-card > p { opacity: 1; transform: none; }
.stack.is-static { gap: 20px; }
.stack.is-static .stack-card { position: relative; top: auto; }
.stack-tail { pointer-events: none; }
.stack.is-static .stack-tail { display: none; }

/* ---------- 06 社員紹介 ---------- */
.person { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
.person__photo { order: 2; }
.person__body { order: 1; }
.person__text { margin-top: 30px; }
.person__text p + p { margin-top: 18px; }
.person__quote { font-size: 20px; font-weight: 700; line-height: 1.7; padding-left: 18px; border-left: 3px solid var(--accent); }
.person__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.person__facts dt { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
.person__facts dd { margin-top: 4px; font-weight: 500; }

/* ---------- 07 一日の流れ ---------- */
.day-wrap { margin-top: 56px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding: 0 var(--pad) 12px; cursor: grab; }
.day-wrap.is-dragging { cursor: grabbing; user-select: none; }
.day { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 0; width: max(100%, 1200px); max-width: var(--container); margin: 0 auto; border-top: 2px solid var(--ink); }
.day__item { position: relative; padding: 26px 20px 0 0; }
.day__item::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; background: var(--accent); border-radius: 50%; }
.day__time { display: block; font-size: 32px; font-weight: 900; line-height: 1; }
.day__item h3 { margin-top: 10px; font-size: 17px; font-weight: 700; }
.day__item p { margin-top: 6px; font-size: 14px; color: var(--ink-soft); }
.day__item .ph--wide { margin-right: 4px; }

/* ---------- 08 正直に言うと(黒面で反転 / ブロックが埋まって暗転) ---------- */
.honest { position: relative; overflow: clip; color: var(--white); padding: clamp(100px, 12vw, 180px) 0; background: var(--bg); }
.honest__blocks { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(3, 1fr); }
.honest__blocks i { display: block; background: var(--ink); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 45ms); }
.honest.is-view .honest__blocks i, html.noanim .honest__blocks i { transform: none; }
.honest__inner { position: relative; z-index: 1; opacity: 0; transition: opacity .6s var(--ease) 1s; }
.honest.is-view .honest__inner, html.noanim .honest__inner { opacity: 1; }
.honest__title { color: var(--white); }
.honest__body { margin-top: 30px; max-width: 720px; color: rgba(244, 243, 240, .85); font-size: 17px; }
.honest__body p + p { margin-top: 18px; }
.honest__keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; max-width: 820px; }
.honest__keys li { display: grid; gap: 6px; padding: 28px; border: 1px solid var(--line-dark); border-radius: 8px; }
.honest__keys .en { font-size: 12px; font-weight: 700; color: var(--accent); }
.honest__keys strong { font-size: clamp(30px, 3.4vw, 44px); font-weight: 900; line-height: 1.2; }
.honest__keys span:last-child { font-size: 14px; color: rgba(244, 243, 240, .75); }
.honest__foot { margin-top: 36px; font-size: 18px; font-weight: 500; }

/* ---------- 09 募集要項 ---------- */
.recruit { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; margin-top: 56px; align-items: start; }
.spec > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.spec > div:last-child { border-bottom: 1px solid var(--line); }
.spec dt { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--muted); padding-top: 3px; }
.spec dd { font-weight: 500; }
.spec dd small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.spec__tbd { font-family: var(--font-en); font-weight: 700; border-bottom: 2px solid var(--accent); }
.benefits { background: var(--bg); border-radius: 8px; padding: clamp(24px, 3vw, 36px); }
.benefits__title { font-size: 15px; font-weight: 700; letter-spacing: .1em; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.benefits__list li { display: grid; gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.benefits__list li:last-child { border-bottom: 0; }
.benefits__list strong { font-size: 16px; }
.benefits__list span { font-size: 13px; color: var(--ink-soft); }

/* ---------- 10 エントリー + FAQ ---------- */
.entry { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; align-items: start; }
.entry__actions { display: grid; gap: 12px; margin-top: 36px; max-width: 420px; }
.faq { padding-top: 6px; }
.faq__title { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--muted); margin-bottom: 8px; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary { cursor: pointer; list-style: none; position: relative; padding: 18px 40px 18px 0; font-weight: 700; font-size: 16px; min-height: 44px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before, .faq__item summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 2px; background: var(--accent); transition: transform .2s var(--ease); }
.faq__item summary::after { transform: rotate(90deg); }
.faq__item[open] summary::after { transform: rotate(0); }
.faq__item p { padding: 0 0 20px; font-size: 15px; color: var(--ink-soft); }

/* ---------- フッター ---------- */
.site-footer { padding: 56px 0 40px; background: var(--ink); color: rgba(244, 243, 240, .8); font-size: 13px; }
.site-footer__brand { color: var(--white); font-weight: 700; font-size: 16px; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.site-footer__brand span { font-size: 12px; font-weight: 400; color: rgba(244, 243, 240, .6); }
.site-footer__note { margin-top: 18px; max-width: 760px; line-height: 1.8; }
.site-footer__credit { margin-top: 28px; font-size: 12px; letter-spacing: .08em; }
.site-footer__credit a { border-bottom: 1px solid var(--accent); }

/* ---------- レスポンシブ ---------- */
@media (max-width: 1080px) {
  .site-nav { display: none; }
  .site-header { margin-bottom: 0; background: rgba(244, 243, 240, .92); color: var(--ink); border-bottom-color: var(--line); backdrop-filter: blur(8px); }
  .fv__main { flex-direction: column; min-height: 0; }
  .fv__visual { flex: none; aspect-ratio: 375 / 534; max-height: 78vh; }
  .fv__panel-inner { flex-direction: column; align-items: stretch; gap: 36px; width: 100%; }
  .fv__copy { order: -1; padding: 0; flex-direction: column; gap: .35em; font-size: clamp(30px, 9.2vw, 56px); color: var(--white); }
  .fv__copy-line { background: transparent; color: var(--white); clip-path: inset(0 0 0 0); overflow: hidden; }
  .fv__copy-txt { writing-mode: horizontal-tb; white-space: normal; padding: 0; line-height: 1.2; letter-spacing: .02em; transform: translateY(105%); transition: transform .9s cubic-bezier(.23, 1, .32, 1) .2s; }
  .sp-br { display: inline; }
  .fv__copy-line.is-02 .fv__copy-txt { font-size: .46em; line-height: 1.45; letter-spacing: .02em; transition-delay: .4s; }
  html.is-loaded .fv__copy-txt { transform: none; }
  .fv__band { top: auto; bottom: 20px; right: var(--pad); }
  .fv__panel { padding: 44px var(--pad) 96px; justify-content: flex-start; }
  .fv__card-wrap { width: min(60%, 340px); }
  .fv__ticker { font-size: clamp(44px, 12vw, 64px); }
  .fv__arrow { display: none; }
  .message, .split, .person, .recruit, .entry { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .person__photo { order: 1; max-width: 420px; }
  .person__body { order: 2; }
  .message__photo { max-width: 420px; }
  .work__kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stack-card { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .stack-card__head { grid-row: auto; display: flex; align-items: baseline; gap: 14px; }
  .stack-card__num { font-size: 44px; }
}
@media (max-width: 640px) {
  :root { --ribbon-h: 56px; }
  .proto-ribbon { font-size: 11px; }
  .proto-ribbon a { margin-left: 0; }
  .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numbers__item { padding: 22px 18px 20px; }
  .numbers__item dd { font-size: 40px; }
  .work__kinds { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .honest__keys { grid-template-columns: minmax(0, 1fr); }
  .spec > div { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .day { grid-auto-columns: 230px; width: max-content; }
  .btn--lg { width: 100%; }
}