/* =========================================================
   VISION / MISSION / VALUES（.gb-vmv）— [gb_vmv] / inc/gootbox-vmv.php
   ABOUT のメンバーと会社概要のあいだに置く、黒い帯のセクション。
   - 文言は inc/gootbox-vmv.php の gb_vmv_data()。値（色・サイズ・余白・動きの速さ）は tokens.css の --gb-vmv-*
   - 帯は画面の端から端まで（記事幅の中に置いても、負のマージンで画面幅に広げる）。中身は --gb-vmv-max-w まで
   - 動き（assets/js/gb-vmv.js）は <html>.gb-js のときだけ。JS 無効・動きを減らす設定では最初から全部見える
   - このファイルは [gb_vmv] があるページでだけ読み込む（inc/gootbox-vmv.php）
   ========================================================= */

.gb-vmv {
  /* 配色（既定は黒帯。theme="light" で白） */
  --ink:  var(--gb-vmv-ink);
  --sub:  var(--gb-vmv-sub);
  --line: var(--gb-vmv-line);
  --bg:   var(--gb-vmv-bg);
  /* 帯の左右の余白。--gb-vmv-gutter を基本に、記事側の余白（(画面幅 − 記事幅) / 2）より大きくはしない。
     大きいままだと中身が記事幅まで広がれず、タブレット・スマホで前後のセクションより内側にずれるため。
     JS が無い（--gb-vmv-parent-w が無い）ときは --gb-vmv-gutter のまま */
  --pad: min(var(--gb-vmv-gutter), max(0px, (var(--gb-vmv-vw, 100vw) - var(--gb-vmv-parent-w, 0px)) / 2));

  position: relative;
  box-sizing: border-box;
  width: var(--gb-vmv-vw, 100vw);              /* JS が実際の画面幅（スクロールバーを除く）を入れる */
  max-width: none;
  margin-inline: calc(50% - var(--gb-vmv-vw, 100vw) / 2);
  margin-block: var(--gb-vmv-my);
  padding: var(--gb-vmv-pad-y) var(--pad);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--gb-font-base);
  font-feature-settings: "palt";
  line-height: var(--gb-lh-heading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: clip;
  isolation: isolate;
}
.gb-vmv--light {
  --ink:  var(--gb-vmv-light-ink);
  --sub:  var(--gb-vmv-light-sub);
  --line: var(--gb-vmv-light-line);
  --bg:   var(--gb-vmv-light-bg);
}
.gb-vmv *, .gb-vmv *::before, .gb-vmv *::after { box-sizing: border-box; }

/* SWELL の本文スタイル（余白・行頭記号・見出しの帯や下線）を、この中には効かせない */
.gb-vmv :where(p, h2, h3, ol, li, div, span, b, i) { margin: 0; padding: 0; list-style: none; }
.post_content .gb-vmv :where(p, h2, h3, ol, li) { margin: 0; padding: 0; list-style: none; }
.post_content .gb-vmv li::before, .post_content .gb-vmv li::marker { content: none; }
.post_content .gb-vmv h2, body .post_content .gb-vmv h2,
.post_content .gb-vmv h3, body .post_content .gb-vmv h3 {
  border: 0; background: none; box-shadow: none; padding: 0; margin: 0; color: inherit;
}
.post_content .gb-vmv h2::before, .post_content .gb-vmv h2::after,
.post_content .gb-vmv h3::before, .post_content .gb-vmv h3::after { content: none; }

.gb-vmv__inner {
  /* 中身の幅 = 記事幅（このショートコードを置いた場所の幅。JS が --gb-vmv-parent-w に入れる）。--gb-vmv-max-w はその上限 */
  max-width: min(var(--gb-vmv-max-w), var(--gb-vmv-parent-w, var(--gb-vmv-max-w)));
  margin-inline: auto;
  container: gb-vmv / inline-size;   /* 文字サイズ・余白は画面幅ではなく、この中身の幅（cqi）に合わせる */
}

/* ---- ブロック（VISION / MISSION / VALUES） ---- */
.gb-vmv__block + .gb-vmv__block { margin-top: var(--gb-vmv-block-gap); }

/* 見出しの行: ■ 01 VISION ———————— どんな会社か */
.gb-vmv .gb-vmv__head {
  display: flex; align-items: center; gap: var(--gb-vmv-head-gap);
  font-size: var(--gb-vmv-label-fs);   /* = 欧文コピー × --gb-vmv-label-ratio（tokens.css） */
  line-height: 1;
}
.gb-vmv .gb-vmv__mark { flex: none; width: var(--gb-vmv-mark-size); height: var(--gb-vmv-mark-size); background: var(--gb-vmv-accent); }
.gb-vmv .gb-vmv__no,
.gb-vmv .gb-vmv__label {
  flex: none;
  font-family: var(--gb-font-heading); font-weight: var(--gb-fw-bold);
  letter-spacing: var(--gb-vmv-label-ls); text-transform: uppercase;
  font-size: inherit; line-height: 1; color: var(--ink);
}
.gb-vmv .gb-vmv__no { font-size: var(--gb-vmv-label-sm-fs); font-weight: var(--gb-fw-regular); color: var(--sub); font-variant-numeric: tabular-nums; }
.gb-vmv .gb-vmv__rule { flex: 1 1 auto; height: 1px; background: var(--line); transform-origin: left center; }
.gb-vmv .gb-vmv__q { flex: none; font-size: var(--gb-vmv-label-sm-fs); font-weight: var(--gb-fw-medium); letter-spacing: .12em; color: var(--sub); line-height: 1; }

/* 和文コピー（小）: ラベル行のあと、欧文コピーの上。大きさは欧文コピー × --gb-vmv-jp-ratio */
.gb-vmv .gb-vmv__lead { margin-top: var(--gb-vmv-lead-mt); }
/* 欧文コピー（いちばん大きい）: 大きさは --gb-vmv-en-size（中身の幅に比例）。ほかの文字はこれを基準に比率で決まる */
.gb-vmv .gb-vmv__en,
.post_content .gb-vmv h2.gb-vmv__en {
  margin-top: var(--gb-vmv-en-mt);
  font-family: var(--gb-font-heading); font-weight: var(--gb-vmv-en-fw);
  font-size: var(--gb-vmv-en-size);
  line-height: var(--gb-vmv-en-lh);
  letter-spacing: var(--gb-vmv-en-ls);
  color: var(--ink);
  text-wrap: balance;
}
.gb-vmv .gb-vmv__ln { display: block; white-space: nowrap; }
/* 1 語ずつ下からせり上がる（外側が窓、内側が動く）。ディセンダー（g・p）が切れないよう下に少し余白 */
.gb-vmv .gb-vmv__w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.gb-vmv .gb-vmv__wi { display: inline-block; will-change: transform; }
.gb-vmv .gb-vmv__dot { color: var(--gb-vmv-accent); }

/* 説明文: 欧文コピーの下。最初は閉じていて（高さ 0）、ブロックにマウスを乗せる・中にフォーカスが入ると開く（2026-10-23）。
   タッチ端末（hover が無い）では最初から開いている。値は tokens.css の --gb-vmv-reveal-* */
.gb-vmv .gb-vmv__sub {
  display: grid; grid-template-rows: 0fr;
  margin-top: 0;
  transition: grid-template-rows var(--gb-vmv-reveal-dur) var(--gb-vmv-in-ease), margin-top var(--gb-vmv-reveal-dur) var(--gb-vmv-in-ease);
}
.gb-vmv .gb-vmv__sub > * { min-height: 0; overflow: hidden; }
.gb-vmv .gb-vmv__body { opacity: 0; transform: translate3d(0, var(--gb-vmv-reveal-dist), 0); transition: opacity var(--gb-vmv-reveal-dur) var(--gb-ease-out), transform var(--gb-vmv-reveal-dur) var(--gb-ease-out); }
.gb-vmv .gb-vmv__block.is-reveal .gb-vmv__sub { grid-template-rows: 1fr; margin-top: var(--gb-vmv-sub-mt); }
.gb-vmv .gb-vmv__block.is-reveal .gb-vmv__body { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .gb-vmv .gb-vmv__block:hover .gb-vmv__sub,
  .gb-vmv .gb-vmv__block:focus-within .gb-vmv__sub { grid-template-rows: 1fr; margin-top: var(--gb-vmv-sub-mt); }
  .gb-vmv .gb-vmv__block:hover .gb-vmv__body,
  .gb-vmv .gb-vmv__block:focus-within .gb-vmv__body { opacity: 1; transform: none; }
}
@media (hover: none), (pointer: coarse) {
  .gb-vmv .gb-vmv__sub { grid-template-rows: 1fr; margin-top: var(--gb-vmv-sub-mt); }
  .gb-vmv .gb-vmv__body { opacity: 1; transform: none; }
}
.gb-vmv .gb-vmv__jp {
  font-size: var(--gb-vmv-jp-fs); font-weight: var(--gb-vmv-jp-fw);
  letter-spacing: var(--gb-vmv-jp-ls); line-height: 1.4; color: var(--ink);
}
.gb-vmv .gb-vmv__body {
  font-size: var(--gb-vmv-body-fs); font-weight: var(--gb-fw-regular);
  line-height: var(--gb-vmv-body-lh); letter-spacing: var(--gb-vmv-body-ls); color: var(--sub);
}

/* ---- VALUES: 2×2 の「箱」。ホバーで箱の色が反転する ---- */
.gb-vmv .gb-vmv__values,
.post_content .gb-vmv ol.gb-vmv__values {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--gb-vmv-values-mt);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.gb-vmv .gb-vmv__value,
.post_content .gb-vmv li.gb-vmv__value {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  min-height: var(--gb-vmv-value-min-h);
  padding: var(--gb-vmv-value-pad);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  color: var(--ink);
  --v-sub: var(--sub);
  transition: color var(--gb-vmv-hover-dur) var(--gb-ease-out);
}
/* 反転用の面（下からせり上がる）。li の ::before は SWELL のリスト装飾と取り合うので専用の要素 */
.gb-vmv .gb-vmv__value-bg {
  position: absolute; inset: -1px 0 0 -1px; z-index: -1;
  background: var(--ink);
  transform: scaleY(0); transform-origin: center bottom;
  transition: transform var(--gb-vmv-hover-fill-dur) var(--gb-vmv-in-ease);
}
.gb-vmv .gb-vmv__value-top { display: flex; align-items: center; justify-content: flex-end; } /* 番号は出さないので、右上の四角だけ */
.gb-vmv .gb-vmv__value-no {
  font-family: var(--gb-font-heading); font-weight: var(--gb-fw-regular);
  font-size: var(--gb-vmv-label-fs); letter-spacing: var(--gb-vmv-label-ls);
  color: var(--v-sub); font-variant-numeric: tabular-nums; line-height: 1;
  transition: color var(--gb-vmv-hover-dur) var(--gb-ease-out);
}
/* 右上の小さな四角（ふだんは枠だけ。ホバーで黄色く塗られる） */
.gb-vmv .gb-vmv__value-mark {
  width: var(--gb-vmv-mark-size); height: var(--gb-vmv-mark-size);
  box-shadow: inset 0 0 0 1px var(--v-sub);
  transition: background-color var(--gb-vmv-hover-dur) var(--gb-ease-out), box-shadow var(--gb-vmv-hover-dur) var(--gb-ease-out), transform var(--gb-vmv-hover-fill-dur) var(--gb-vmv-in-ease);
}
.gb-vmv .gb-vmv__value-jp {
  margin-top: auto; padding-top: var(--gb-vmv-value-en-pt);   /* 和文が文字のまとまりの先頭（番号の行との間を空けて下に寄せる） */
  font-size: var(--gb-vmv-value-jp-fs); font-weight: var(--gb-vmv-jp-fw);
  letter-spacing: var(--gb-vmv-jp-ls); line-height: 1.4; color: inherit;
}
.gb-vmv .gb-vmv__value-en,
.post_content .gb-vmv h3.gb-vmv__value-en {
  margin-top: var(--gb-vmv-value-en-mt);
  font-family: var(--gb-font-heading); font-weight: var(--gb-vmv-value-en-fw);
  font-size: var(--gb-vmv-value-en-fs); line-height: var(--gb-vmv-en-lh); letter-spacing: var(--gb-vmv-en-ls);
  color: inherit;
}
.gb-vmv .gb-vmv__value-body {
  margin-top: var(--gb-vmv-value-body-mt);
  min-height: calc(var(--gb-vmv-value-body-fs) * var(--gb-vmv-body-lh) * 3);   /* 3 行ぶん確保して、4 つの箱で見出しの高さをそろえる */
  font-size: var(--gb-vmv-value-body-fs); line-height: var(--gb-vmv-body-lh); letter-spacing: var(--gb-vmv-body-ls); color: var(--v-sub); text-wrap: pretty;
  /* 最初は見えない（場所は min-height で確保してある）。箱にマウスを乗せると浮かぶ。タッチ端末では最初から見える（2026-10-23） */
  opacity: 0; transform: translate3d(0, var(--gb-vmv-reveal-dist), 0);
  transition: color var(--gb-vmv-hover-dur) var(--gb-ease-out), opacity var(--gb-vmv-reveal-dur) var(--gb-ease-out), transform var(--gb-vmv-reveal-dur) var(--gb-ease-out);
}
@media (hover: none), (pointer: coarse) {
  .gb-vmv .gb-vmv__value-body { opacity: 1; transform: none; }
}

@media (hover: hover) and (pointer: fine) {
  .gb-vmv .gb-vmv__value:hover,
  .post_content .gb-vmv li.gb-vmv__value:hover { color: var(--bg); --v-sub: color-mix(in srgb, var(--bg) 72%, transparent); }
  .gb-vmv .gb-vmv__value:hover .gb-vmv__value-bg { transform: scaleY(1); }
  .gb-vmv .gb-vmv__value:hover .gb-vmv__value-mark { background-color: var(--gb-vmv-accent); box-shadow: inset 0 0 0 1px var(--gb-vmv-accent); transform: rotate(90deg) scale(1.5); }
  .gb-vmv .gb-vmv__value:hover .gb-vmv__value-body,
  .gb-vmv .gb-vmv__value:focus-within .gb-vmv__value-body { opacity: 1; transform: none; transition-delay: 0s, var(--gb-vmv-reveal-delay), var(--gb-vmv-reveal-delay); } /* 箱が塗られてから文が浮かぶ */
}

/* ---- 登場の動き（<html>.gb-js のときだけ。.is-in は assets/js/gb-vmv.js が付ける） ---- */
.gb-js .gb-vmv [data-gb-vmv-in] .gb-vmv__wi {
  transition: transform var(--gb-vmv-in-dur) var(--gb-vmv-in-ease) calc(var(--gb-vmv-in-step) * var(--i, 0));
}
.gb-js .gb-vmv [data-gb-vmv-in]:not(.is-in) .gb-vmv__wi { transform: translate3d(0, 115%, 0); }

.gb-js .gb-vmv [data-gb-vmv-in] .gb-vmv__rule {
  transition: transform var(--gb-vmv-line-dur) var(--gb-vmv-in-ease);
}
.gb-js .gb-vmv [data-gb-vmv-in]:not(.is-in) .gb-vmv__rule { transform: scaleX(0); }
/* 箱の枠: 画面に入ると左から現れる。
   clip-path で幅 0 に絞ると、Chrome の IntersectionObserver が対象自身の clip-path も判定に使うため「見えていない」扱いになり、
   .is-in が永遠に付かない（= VALUES が出ない）。判定に影響しない mask で隠す（グラデーションの色は不透明なら何でもよいので --ink） */
.gb-js .gb-vmv .gb-vmv__values {
  -webkit-mask: linear-gradient(var(--ink) 0 0) left top / 100% 100% no-repeat;
          mask: linear-gradient(var(--ink) 0 0) left top / 100% 100% no-repeat;
  transition: -webkit-mask-size var(--gb-vmv-line-dur) var(--gb-vmv-in-ease), mask-size var(--gb-vmv-line-dur) var(--gb-vmv-in-ease);
}
.gb-js .gb-vmv .gb-vmv__values:not(.is-in) { -webkit-mask-size: 0% 100%; mask-size: 0% 100%; }

.gb-js .gb-vmv [data-gb-vmv-in] .gb-vmv__f {
  transition:
    opacity   var(--gb-vmv-fade-dur) var(--gb-ease-out) calc(var(--gb-vmv-fade-step) * var(--d, 0)),
    transform var(--gb-vmv-fade-dur) var(--gb-ease-out) calc(var(--gb-vmv-fade-step) * var(--d, 0));
}
.gb-js .gb-vmv [data-gb-vmv-in]:not(.is-in) .gb-vmv__f { opacity: 0; transform: translate3d(0, var(--gb-vmv-fade-dist), 0); }

/* 帯そのもの: 画面に入ると、左右が少し内側に絞られた状態から端まで開く（箱が開くイメージ） */
.gb-js .gb-vmv { clip-path: inset(0 0 0 0); transition: clip-path var(--gb-vmv-open-dur) var(--gb-vmv-in-ease); }
.gb-js .gb-vmv:not(.is-open) { clip-path: inset(0 var(--gb-vmv-open-inset) 0 var(--gb-vmv-open-inset)); }

@media (prefers-reduced-motion: reduce) {
  .gb-vmv *, .gb-vmv *::before, .gb-vmv *::after { transition: none !important; }
  .gb-js .gb-vmv [data-gb-vmv-in]:not(.is-in) .gb-vmv__wi,
  .gb-js .gb-vmv [data-gb-vmv-in]:not(.is-in) .gb-vmv__f { opacity: 1; transform: none; }
  .gb-js .gb-vmv [data-gb-vmv-in]:not(.is-in) .gb-vmv__rule { transform: none; }
  .gb-js .gb-vmv .gb-vmv__values:not(.is-in) { -webkit-mask: none; mask: none; }
  .gb-js .gb-vmv:not(.is-open) { clip-path: none; }
}

/* ---- タブレット以下 ---- */
/* 中身の幅がごく狭いとき（記事幅が狭いレイアウト）は VALUES を 1 列に */
@container gb-vmv (max-width: 560px) {
  .gb-vmv .gb-vmv__values,
  .post_content .gb-vmv ol.gb-vmv__values { grid-template-columns: minmax(0, 1fr); }
  .gb-vmv .gb-vmv__value-body { min-height: 0; }
}
/* ---- スマホ ---- */
@media (max-width: 599px) {
  .gb-vmv .gb-vmv__ln { display: inline; white-space: normal; }          /* 行の指定をやめて、幅なりに折り返す */
  .gb-vmv .gb-vmv__en,
  .post_content .gb-vmv h2.gb-vmv__en { text-wrap: wrap; }   /* 大きさは PC と同じ式（--gb-vmv-en-size。下限あり）。比率もそのまま */
  .gb-vmv .gb-vmv__br { display: none; }            /* 説明文の改行も幅なりに */
  .gb-vmv .gb-vmv__values,
  .post_content .gb-vmv ol.gb-vmv__values { grid-template-columns: minmax(0, 1fr); }
  .gb-vmv .gb-vmv__value-body { min-height: 0; }
  .gb-vmv .gb-vmv__value,
  .post_content .gb-vmv li.gb-vmv__value { min-height: 0; }
}