/*
 * gootbox 子テーマ共通CSS
 * 値は tokens.css の変数のみ使用。クラスは gb- プレフィックス。
 */

/* =========================================================
   ヘッダーの固定（全ページ）
   下層: 黒帯のまま画面上部に貼り付く（position: sticky。JS 不要）。
   トップ: 背景なし（ライト）で固定し、KV を過ぎたら黒（下層と同じ）に切り替える。
     <html> の gb-header-fixed は functions.php（wp_head）がトップでだけ付け、
     gb-past-kv（KV を通過）は assets/js/gb-header.js が付ける。JS 無効なら下層と同じ黒帯の固定になる。
     KV は本文の最初の .gb-kv / [data-gb-kv] / .p-mainVisual / .swell-block-fullWide / .wp-block-cover（無ければ画面高）。
   SWELL の追従ヘッダー（.l-fixHeader）は使わない（二重に出るのを防ぐ）。
   ※ SWELL は body ではなく #body_wrap にページのクラス（home / top など）を付ける。
   ========================================================= */
#header.l-header {
  position: sticky;
  top: var(--gb-header-top);
  z-index: var(--gb-header-z);
}
.l-fixHeader { display: none !important; }
html.gb-header-fixed #header.l-header {
  position: fixed;
  left: 0;
  right: 0;
  background-color: transparent;
  box-shadow: none;
  transition: background-color var(--gb-header-transition), color var(--gb-header-transition);
}
/* トップはヘッダーが浮いている（場所を取らない）ので、FV を画面の高さいっぱいにする（下のロゴの帯が最初の画面に入らない） */
html.gb-header-fixed .p-mainVisual.-height-full,
html.gb-header-fixed .p-mainVisual.-height-full .p-mainVisual__inner { min-height: var(--gb-kv-min-h); }
html.gb-header-fixed .l-header,
html.gb-header-fixed .l-header .c-gnav > .menu-item > a,
html.gb-header-fixed .l-header .c-gnav > .menu-item > a .ttl { color: var(--gb-header-light-fg); }
html.gb-header-fixed .l-header .c-headLogo img { filter: var(--gb-header-light-logo-filter); transition: filter var(--gb-header-transition); }
/* KV の上にいる間（まだ黒帯になっていない）だけ、KV 用のロゴ（背景が透過の PNG）に差し替える。
   KV を過ぎて .gb-past-kv が付いたら、カスタマイザーで設定した元のロゴ（白）に戻る。
   画像は --gb-kv-logo（assets/img/logo-kv.png）。カスタマイザーのロゴ設定は変更しない。下層ページはそのまま。
   PC だけでなくタブレット・SP も同じ（959px 以下で brightness(0) がかかり、キューブまで真っ黒になっていたため全幅に適用） */
html.gb-header-fixed:not(.gb-past-kv) .l-header .c-headLogo img {
  content: var(--gb-kv-logo);
  filter: none;
}
/* KV を過ぎたら黒（下層と同じ見た目） */
html.gb-header-fixed.gb-past-kv #header.l-header {
  background-color: var(--gb-header-dark-bg);
}
html.gb-header-fixed.gb-past-kv .l-header,
html.gb-header-fixed.gb-past-kv .l-header .c-gnav > .menu-item > a,
html.gb-header-fixed.gb-past-kv .l-header .c-gnav > .menu-item > a .ttl { color: var(--gb-header-dark-fg); }
html.gb-header-fixed.gb-past-kv .l-header .c-headLogo img { filter: none; }
@media (prefers-reduced-motion: reduce) { html.gb-header-fixed #header.l-header, html.gb-header-fixed .l-header .c-headLogo img { transition: none; } }

/* =========================================================
   見出しの共通ルール（下層ページ）: TOP のセクション見出しと同じ細さ・大きさ
   h1 = 記事タイトル（SWELL .c-postTitle__ttl）/ 固定ページ・一覧タイトル（.c-pageTitle）、h2 = 本文中の h2（SWELL の装飾はそのまま）
   ========================================================= */
.c-postTitle__ttl,
.c-pageTitle,
.l-mainContent .c-postTitle__ttl,
.l-mainContent .c-pageTitle {
  font-size: var(--gb-h1-fs);
  font-weight: var(--gb-h1-fw);
  line-height: var(--gb-lh-heading);
}
/* :not([class*="gb-"]) は、独自の書体を持つ gb- 系の見出し（gb-title-box__title / gb-works-section__title 等）を除外するため。
   gb-interview__h2（インタビュー記事の h2。余白を足すだけのクラス）は除外せず同じ細さにする */
.post_content h2:not([class*="gb-"]),
body .post_content h2:not([class*="gb-"]),
.post_content h2.gb-interview__h2,
body .post_content h2.gb-interview__h2 {
  font-size: var(--gb-h2-fs);
  font-weight: var(--gb-h2-fw);
}

/* =========================================================
   ヘッダー（SWELL上書き）— Figma 2127:1206
   背景色は SWELL カスタマイザー（ヘッダー → 背景色 #333333）で管理。ここでは書体と寸法のみ。
   ========================================================= */
.l-header .l-header__inner {
  height: var(--gb-header-h);
  min-height: 0;
  padding-top: var(--gb-header-pad-y);
  padding-bottom: var(--gb-header-pad-y);
  box-sizing: border-box;
}
.l-header .l-header__inner > .l-inner,
.l-header .l-header__bar {
  height: var(--gb-header-row-h);
  min-height: 0;
  display: flex;
  align-items: center;
}
/* ロゴ */
.l-header .l-header__logo,
.l-header .c-headLogo,
.l-header .c-headLogo__link {
  height: var(--gb-header-logo-h);
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}
.l-header .c-headLogo__img,
.l-header .c-headLogo img {
  height: var(--gb-header-logo-h);
  width: auto;
  max-height: none;
}
.l-header .c-gnav > .menu-item,
.l-header .c-gnav > .menu-item > a {
  height: var(--gb-header-row-h);
  display: flex;
  align-items: center;
}
/* グローバルナビ（PC） */
.l-header .c-gnav {
  gap: var(--gb-nav-gap);
}
.l-header .c-gnav > .menu-item > a {
  padding-left: 0;
  padding-right: 0;
  font-family: var(--gb-font-heading);
  font-size: var(--gb-nav-fs);
  font-weight: var(--gb-nav-fw);
  letter-spacing: var(--gb-tracking-nav);
  text-transform: uppercase;
  line-height: var(--gb-lh-none);
}
.l-header .c-gnav > .menu-item > a .ttl {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}
/* SWELLの「サブテキスト」は使わない */
.l-header .c-gnav .sub { display: none; }

/* メニュー項目の CSS クラス footer-nav: フッターナビだけに出す（ヘッダーのグローバルナビでは非表示。例: FAQ） */
.l-header .c-gnav > .menu-item.footer-nav { display: none; }
/* スマホも同じ: ハンバーガーメニュー（.p-spMenu）とヘッダー下のメニュー帯（.p-spHeadMenu）でも出さない（2026-10-27） */
.p-spMenu .menu-item.footer-nav,
.p-spHeadMenu .menu-item.footer-nav { display: none; }

/* CONTACT（メニュー項目の CSS クラス nav-btn-contact、または gb-nav-cta）
   hover は他の項目と同じ（SWELL の下線）。加えて右側に「Let's talk!」のフキダシがぽんと出る。
   フキダシは [gb_gbox] と同じ形（左右反転してシッポを左下 = 文字側に）。形は mask、色・大きさは tokens.css の --gb-header-talk-*。
   文字は content（装飾）。ヘッダー右端からはみ出しても横スクロールが出ないよう、ヘッダーは overflow-x: clip。 */
#header.l-header { overflow-x: clip; }
.l-header .c-gnav > .menu-item.nav-btn-contact > a,
.l-header .c-gnav > .menu-item.gb-nav-cta > a { position: relative; }
.l-header .c-gnav > .menu-item.nav-btn-contact > a::before,
.l-header .c-gnav > .menu-item.gb-nav-cta > a::before {
  content: var(--gb-header-talk-text);
  position: absolute;
  top: 50%;
  left: calc(100% + var(--gb-header-talk-gap));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--gb-header-talk-size);
  aspect-ratio: 54.8 / 50.4;
  padding: 0 0 6% 8%; /* 丸の中心はシッポのぶん右上に寄っている */
  background-color: var(--gb-header-talk-bg);
  color: var(--gb-header-talk-fg);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54.8 50.4'><g transform='translate(54.8 0) scale(-1 1)'><path d='M0,25.175A25.175,25.175,0,1,1,47.949,35.919l6.766,10.269-12.47-2.51A25.175,25.175,0,0,1,0,25.175Z'/></g></svg>") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54.8 50.4'><g transform='translate(54.8 0) scale(-1 1)'><path d='M0,25.175A25.175,25.175,0,1,1,47.949,35.919l6.766,10.269-12.47-2.51A25.175,25.175,0,0,1,0,25.175Z'/></g></svg>") no-repeat center / 100% 100%;
  font-family: var(--gb-gbox-talk-font);
  font-size: var(--gb-header-talk-fs);
  font-weight: var(--gb-fw-bold);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: none;
  white-space: pre;
  pointer-events: none;
  opacity: 0;
  transform-origin: 0 100%; /* 左下 = シッポの先 */
  transform: translateY(var(--gb-header-talk-y)) scale(0);
  transition: transform 0.35s var(--gb-ease-pop), opacity 0.15s var(--gb-ease-out);
}
.l-header .c-gnav > .menu-item.nav-btn-contact > a:hover::before,
.l-header .c-gnav > .menu-item.nav-btn-contact > a:focus-visible::before,
.l-header .c-gnav > .menu-item.gb-nav-cta > a:hover::before,
.l-header .c-gnav > .menu-item.gb-nav-cta > a:focus-visible::before {
  opacity: 1;
  transform: translateY(var(--gb-header-talk-y)) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .l-header .c-gnav > .menu-item.nav-btn-contact > a::before,
  .l-header .c-gnav > .menu-item.gb-nav-cta > a::before { transition: none; }
}

/* スマホ用メニュー（ドロワー/SPナビ）も同じ書体に */
.c-spnav .c-spnav__link,
.l-fixSpMenu .menu-item a,
.c-drawer .c-listMenu a,
.c-drawer__menu a {
  font-family: var(--gb-font-heading);
  font-weight: var(--gb-fw-semibold);
  letter-spacing: var(--gb-tracking-nav);
  text-transform: uppercase;
}

/* =========================================================
   ページラッパー（SWELLの2カラム幅計算を受けない自前レイアウト）
   ========================================================= */
.gb-page {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.gb-page > main {
  display: block;
  width: 100%;
  max-width: none;
  flex: none;
  margin: 0;
}

/* =========================================================
   WORKS 詳細（single-works.php）
   ========================================================= */
.gb-works {
  padding-block: var(--gb-space-7) var(--gb-space-9);
  color: var(--gb-color-text);
  font-family: var(--gb-font-base);
}

.gb-works__head {
  max-width: var(--gb-container);
  margin-inline: auto;
  padding-inline: var(--gb-gutter);
}
.gb-works__label {
  margin: 0 0 var(--gb-space-6);
  font-family: var(--gb-font-en);
  font-size: var(--gb-fs-sm);
  font-weight: var(--gb-fw-bold);
  letter-spacing: var(--gb-tracking-en);
}

.gb-works__inner {
  max-width: var(--gb-container-narrow);
  margin-inline: auto;
  padding-inline: var(--gb-gutter);
}

/* ---- ヘッダー（タイトル・カテゴリ・タグ） ---- */
.gb-works__title {
  margin: 0 0 var(--gb-space-4);
  font-size: var(--gb-fs-xl);
  font-weight: var(--gb-fw-bold);
  line-height: var(--gb-lh-heading);
}
.gb-works__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gb-space-2);
  margin-bottom: var(--gb-space-6);
}
.gb-works__cat {
  margin-right: var(--gb-space-2);
  font-size: var(--gb-fs-sm);
  font-weight: var(--gb-fw-bold);
}
.gb-works__cat::before { content: "#"; }

.gb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gb-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gb-tag a {
  display: inline-block;
  padding: var(--gb-space-2) var(--gb-space-3);
  border: var(--gb-border) solid var(--gb-color-line);
  border-radius: var(--gb-radius-pill);
  color: var(--gb-color-text);
  font-size: var(--gb-fs-xs);
  line-height: var(--gb-lh-none);
  text-decoration: none;
  transition: background-color var(--gb-transition), color var(--gb-transition), border-color var(--gb-transition);
}
.gb-tag a:hover {
  background-color: var(--gb-color-accent);
  border-color: var(--gb-color-accent);
  color: var(--gb-color-text-inverse);
}

/* ---- 本文ブロック（ACF flexible） ---- */
.gb-works__body > * + * { margin-top: var(--gb-space-6); }

.gb-block-heading > h2,
.gb-block-heading > h3 {
  margin: 0;
  line-height: var(--gb-lh-heading);
  font-weight: var(--gb-fw-bold);
}
.gb-block-heading > h2 { font-size: var(--gb-fs-lg); }
.gb-block-heading > h3 { font-size: var(--gb-fs-md); }
.gb-works__body > .gb-block-heading { margin-top: var(--gb-space-7); }
.gb-works__body > .gb-block-heading + * { margin-top: var(--gb-space-4); }

.gb-block-text p {
  margin: 0;
  font-size: var(--gb-fs-base);
  line-height: var(--gb-lh-body);
}
.gb-block-text p + p { margin-top: var(--gb-space-3); }
/* NEWS（お知らせ）の本文: 旧サイトの ACF（field-contents）を inc/gootbox-news.php が差し込む。並びは WORKS の本文と同じ */
.gb-news__body > * + * { margin-top: var(--gb-space-6); }
.gb-news__body > .gb-block-heading { margin-top: var(--gb-space-7); }
.gb-news__body > .gb-block-heading + * { margin-top: var(--gb-space-4); }
.gb-news__body > :first-child { margin-top: 0; }
.gb-block-text a {
  color: var(--gb-color-text);
  text-decoration: underline;
}

.gb-block-image img,
.gb-block-gallery img {
  display: block;
  width: 100%;
  height: auto;
}

.gb-block-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--gb-color-bg-alt);
}
.gb-block-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gb-block-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gb-space-4);
}

/* ---- クレジット ---- */
.gb-credit { margin-top: var(--gb-space-7); }
.gb-credit__group + .gb-credit__group { margin-top: var(--gb-space-6); }
.gb-credit__title {
  margin: 0 0 var(--gb-space-3);
  font-family: var(--gb-font-en);
  font-size: var(--gb-fs-sm);
  font-weight: var(--gb-fw-regular);
  color: var(--gb-color-text-muted);
}
.gb-credit__title::before { content: "\30FB"; } /* ・ */
/* 2026-10-23: 職種の列の幅を固定（140px）だと Cinematographer などが折れ、職種だけの行（Clients の社名など）も狭い列で折れていた。
   リスト全体を 1 つの grid にし、職種の列は「いちばん長い職種の幅」（auto）、名前の列は残り。行（li）は display: contents で列をそろえる。
   名前が無い行（職種の欄に社名などが入っている行）は 2 列ぶん使う */
.gb-credit__list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--gb-credit-col-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--gb-fs-sm);
  line-height: var(--gb-lh-relaxed);
}
.gb-credit__row { display: contents; }
.gb-credit__row > * { padding-block: var(--gb-space-1); }
.gb-credit__row--nojob .gb-credit__names { grid-column: 1 / -1; }
.gb-credit__row:has(.gb-credit__names:empty) .gb-credit__job { grid-column: 1 / -1; }
.gb-credit__names:empty { display: none; }
.gb-credit__job {
  font-family: var(--gb-font-en);
  color: var(--gb-color-text-muted);
}
.gb-credit__person + .gb-credit__person { margin-top: var(--gb-space-1); }
.gb-credit__link {
  margin-left: var(--gb-space-2);
  font-size: var(--gb-fs-xs);
  color: var(--gb-color-text);
  text-decoration: underline;
}

/* ---- RELATED CONTENTS ---- */
.gb-related {
  max-width: var(--gb-container-narrow);
  margin: var(--gb-space-8) auto 0;
  padding: var(--gb-space-7) var(--gb-gutter) 0;
  border-top: var(--gb-border) solid var(--gb-color-line);
}
.gb-related__title {
  margin: 0 0 var(--gb-space-5);
  font-family: var(--gb-font-en);
  font-size: var(--gb-fs-sm);
  font-weight: var(--gb-fw-bold);
  letter-spacing: var(--gb-tracking-en);
  color: var(--gb-color-text-muted);
}
.gb-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gb-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gb-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.gb-card__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--gb-color-bg-alt);
}
.gb-card__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--gb-transition);
}
.gb-card a:hover .gb-card__figure img { transform: scale(1.04); }
.gb-card__badge {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: var(--gb-space-1) var(--gb-space-2);
  background-color: var(--gb-color-accent);
  color: var(--gb-color-text-inverse);
  font-size: var(--gb-fs-xs);
  line-height: var(--gb-lh-none);
}
.gb-card__badge::before { content: "#"; }
.gb-card__title {
  margin: var(--gb-space-2) 0 0;
  font-size: var(--gb-fs-sm);
  font-weight: var(--gb-fw-regular);
  line-height: var(--gb-lh-relaxed);
}

.gb-related__back {
  margin-top: var(--gb-space-7);
  text-align: center;
}

/* =========================================================
   WORKS 一覧（archive-works.php / taxonomy-works_cat.php）暫定
   ========================================================= */
.gb-archive__inner {
  max-width: var(--gb-container);
  margin-inline: auto;
  padding-inline: var(--gb-gutter);
}
.gb-archive__title {
  margin: 0 0 var(--gb-space-6);
  font-size: var(--gb-fs-xl);
  font-weight: var(--gb-fw-bold);
  line-height: var(--gb-lh-heading);
}
.gb-archive__empty {
  margin: 0;
  font-size: var(--gb-archive-empty-fs);
  line-height: var(--gb-lh-heading);
  color: var(--gb-color-text);
}
/* カテゴリ名を丸いタグで（旧サイトの .filter-result .tag 踏襲） */
.gb-archive__title--tag { margin: 0 0 var(--gb-archive-tag-mb); font-size: inherit; line-height: var(--gb-lh-none); }
.gb-archive__title--tag > span {
  display: inline-block;
  padding: var(--gb-archive-tag-pad);
  border: var(--gb-border) solid var(--gb-color-line);
  border-radius: var(--gb-radius-pill);
  font-size: var(--gb-archive-tag-fs);
  font-weight: var(--gb-fw-regular);
  color: var(--gb-color-text);
}
.gb-archive__cta { margin: var(--gb-archive-cta-mt) 0 0; }
.gb-archive__empty-box > :first-child { margin-top: 0; }
.gb-archive__empty--search { margin-bottom: var(--gb-space-5); }

/* ---- WORKS のタグ・キーワード検索（inc/gootbox-works-search.php） ---- */
.gb-works-search { margin: var(--gb-works-search-mt) 0 0; }  /* ページ送りの下 */
.gb-archive__lead { margin: 0 0 var(--gb-archive-lead-mb); }  /* WORKS トップ: works-top の本文 */
.gb-works-search__label { display: block; margin: 0 0 var(--gb-space-2); font-size: var(--gb-works-search-label-fs); color: var(--gb-color-text-muted); }
.gb-works-search__row { display: flex; max-width: var(--gb-works-search-max-w); }
.gb-works-search__input {
  flex: 1 1 auto; min-width: 0; height: var(--gb-works-search-h);
  padding: 0 var(--gb-space-4);
  border: var(--gb-border) solid var(--gb-color-line); border-right: 0;
  border-radius: var(--gb-radius-pill) 0 0 var(--gb-radius-pill);
  background: var(--gb-color-bg); color: var(--gb-color-text);
  font: inherit; font-size: var(--gb-works-search-fs);
}
.gb-works-search__input:focus-visible { outline: 2px solid var(--gb-color-text); outline-offset: 2px; }
.gb-works-search__btn {
  flex: 0 0 auto; height: var(--gb-works-search-h);
  padding: 0 var(--gb-space-5);
  border: var(--gb-border) solid var(--gb-color-text);
  border-radius: 0 var(--gb-radius-pill) var(--gb-radius-pill) 0;
  background: var(--gb-color-text); color: var(--gb-color-text-inverse);
  font: inherit; font-size: var(--gb-works-search-fs); cursor: pointer;
  transition: background-color var(--gb-transition), color var(--gb-transition);
}
.gb-works-search__btn:hover, .gb-works-search__btn:focus-visible { background: var(--gb-color-bg); color: var(--gb-color-text); }
.gb-works-search__tags { margin-top: var(--gb-works-search-tags-mt); }
.gb-works-search__tags.gb-works-tags--top { margin: 0 0 var(--gb-works-tags-top-mb); } /* 一覧の上に置いたとき */
.gb-works-search__tags a.is-current { background-color: var(--gb-color-accent); border-color: var(--gb-color-accent); color: var(--gb-color-text-inverse); }
.gb-works-search__result { margin: 0 0 var(--gb-space-5); font-size: var(--gb-works-search-fs); }  /* 検索中: 一覧の上 */
.gb-works-search__clear { margin-left: var(--gb-space-3); font-size: var(--gb-works-search-label-fs); color: var(--gb-color-text-muted); }
.gb-archive .gb-cards { gap: var(--gb-space-6) var(--gb-space-5); }

.gb-pagination {
  margin-top: var(--gb-space-7);
  text-align: center;
}
.gb-pagination .nav-links {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gb-space-2);
}
/* SWELL側の .page-numbers（円形・影・固定高さ）を打ち消して、自前の丸ボタンに揃える */
.gb-pagination .nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--gb-pagination-size);
  height: var(--gb-pagination-size);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: var(--gb-border) solid var(--gb-color-line);
  border-radius: var(--gb-radius-pill);
  background-color: var(--gb-color-bg);
  box-shadow: none;
  color: var(--gb-color-text);
  font-family: var(--gb-font-en);
  font-size: var(--gb-fs-sm);
  font-weight: var(--gb-fw-semibold);
  line-height: var(--gb-lh-none);
  text-decoration: none;
  transition: background-color var(--gb-transition), color var(--gb-transition), border-color var(--gb-transition);
}
.gb-pagination .nav-links .page-numbers.current,
.gb-pagination .nav-links a.page-numbers:hover,
.gb-pagination .nav-links a.page-numbers:focus-visible {
  background-color: var(--gb-color-accent);
  border-color: var(--gb-color-accent);
  color: var(--gb-color-text-inverse);
}
.gb-pagination .nav-links .page-numbers.dots {
  border-color: transparent;
  background-color: transparent;
}
.gb-pagination .nav-links .page-numbers.prev,
.gb-pagination .nav-links .page-numbers.next {
  font-family: var(--gb-font-base);
}

/* =========================================================
   TOP CTA（中途採用 / お問い合わせ）— patterns/top-cta.php
   core/cover(.gb-cta) > columns(.gb-cta__cards) > column(.gb-cta__card)
   ========================================================= */
.wp-block-cover.gb-cta {
  padding: var(--gb-space-8) var(--gb-gutter);
  background-color: var(--gb-color-overlay); /* 画像未設定時のベース */
  color: var(--gb-color-text);
}
.gb-cta .wp-block-cover__image-background {
  mix-blend-mode: multiply;
  opacity: var(--gb-cta-image-opacity);
}
/* Figma は「グレー下地 × 写真(乗算)」なので、カバーブロックの半透明オーバーレイは使わない */
.wp-block-cover.gb-cta .wp-block-cover__background.has-background-dim { opacity: 0; }
.gb-cta .wp-block-cover__inner-container {
  width: 100%;
  max-width: var(--gb-container);
  margin-inline: auto;
}
/* layout:constrained が子要素を記事幅に絞るので、CTA内はコンテナ幅まで広げる */
.gb-cta .wp-block-cover__inner-container > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.gb-cta .gb-cta__cards.wp-block-columns {
  gap: var(--gb-space-5);
  margin: 0;
}
.gb-cta .gb-cta__card.wp-block-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gb-space-6);          /* 見出し→本文 32px（Figma≈35） */
  min-height: var(--gb-card-min-h);
  padding: var(--gb-card-pad) var(--gb-gutter);
  background-color: var(--gb-color-surface);
  text-align: center;
}
.gb-cta .gb-cta__title,
.post_content .gb-cta h3.gb-cta__title {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-family: var(--gb-font-heading);
  font-size: var(--gb-fs-xl);
  font-weight: var(--gb-fw-bold);
  letter-spacing: var(--gb-tracking-heading);
  line-height: var(--gb-lh-heading);
  color: var(--gb-color-text);
  text-align: center;
}
/* SWELLの見出し装飾（下線・アイコン等）を打ち消す */
.post_content .gb-cta h3.gb-cta__title::before,
.post_content .gb-cta h3.gb-cta__title::after {
  content: none;
  display: none;
}
/* Figma body-noto: Noto Sans JP Regular / 20px / 行間160% / 字間5% / #333 */
.gb-cta .gb-cta__text,
.post_content .gb-cta p.gb-cta__text {
  width: 100%;
  max-width: var(--gb-card-text-width);
  margin: 0;
  font-family: var(--gb-font-base);
  font-size: var(--gb-cta-text-fs);
  font-weight: var(--gb-fw-regular);
  letter-spacing: var(--gb-tracking-body);
  line-height: var(--gb-lh-loose);
  color: var(--gb-color-text-sub);
  text-align: left;
}
.gb-cta .gb-cta__buttons.wp-block-buttons {
  margin: calc(-1 * var(--gb-space-1)) 0 0;  /* 本文→ボタン 28px（Figma） */
  justify-content: center;
}
/* CTA上部のリード見出し（例: Let's Talk）。カバー直下の見出し、または .gb-cta__lead */
.gb-cta .gb-cta__lead,
.gb-cta > .wp-block-cover__inner-container > h2,
.post_content .gb-cta > .wp-block-cover__inner-container > h2 {
  margin: 0 0 var(--gb-space-6);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-family: var(--gb-cta-lead-font);   /* 2026-10-23: EVENT / INTERVIEW の h2 と同じ書体・大きさ・細さ */
  font-size: var(--gb-cta-lead-fs);
  font-weight: var(--gb-cta-lead-fw);
  letter-spacing: var(--gb-tracking-heading);
  line-height: var(--gb-lh-heading);
  color: var(--gb-color-text-inverse);
  text-align: center;
}
.post_content .gb-cta > .wp-block-cover__inner-container > h2::before,
.post_content .gb-cta > .wp-block-cover__inner-container > h2::after {
  content: none;
  display: none;
}

/* CTAのボタンは共通ボタン（下記）の大サイズ版 */
.gb-cta .gb-cta__btn .wp-block-button__link.wp-element-button {
  width: var(--gb-cta-button-width);
  max-width: 100%;
  height: var(--gb-cta-button-height);
  padding-left: var(--gb-cta-button-pad);
  padding-right: calc(var(--gb-cta-button-pad) + var(--gb-btn-circle) + var(--gb-btn-gap));
}
.gb-cta .gb-cta__btn .wp-block-button__link.wp-element-button::before,
.gb-cta .gb-cta__btn .wp-block-button__link.wp-element-button::after {
  right: var(--gb-cta-button-pad);
}
.gb-cta .gb-cta__btn .wp-block-button__link.wp-element-button:hover,
.gb-cta .gb-cta__btn .wp-block-button__link.wp-element-button:focus-visible {
  padding-left: calc(var(--gb-cta-button-pad) + var(--gb-btn-shift));
  padding-right: calc(var(--gb-cta-button-pad) + var(--gb-btn-circle) + var(--gb-btn-gap) - var(--gb-btn-shift));
}

/* スマホ（599px 以下）: CONTACT の VIEW MORE も、ほかのボタン（ABOUTを見る など）と同じ標準サイズに（2026-10-27） */
@media (max-width: 599px) {
  .gb-cta .gb-cta__btn.wp-block-button { width: auto; }
  .gb-cta .gb-cta__btn .wp-block-button__link.wp-element-button {
    width: auto; min-width: var(--gb-btn-min-width); height: var(--gb-btn-height);
    padding-left: var(--gb-btn-pad-x); padding-right: calc(var(--gb-btn-pad-x) + var(--gb-btn-circle) + var(--gb-btn-gap));
  }
  .gb-cta .gb-cta__btn .wp-block-button__link.wp-element-button::before,
  .gb-cta .gb-cta__btn .wp-block-button__link.wp-element-button::after { right: var(--gb-btn-pad-x); }
  .gb-cta .gb-cta__btn .wp-block-button__link.wp-element-button:hover,
  .gb-cta .gb-cta__btn .wp-block-button__link.wp-element-button:focus-visible {
    padding-left: calc(var(--gb-btn-pad-x) + var(--gb-btn-shift));
    padding-right: calc(var(--gb-btn-pad-x) + var(--gb-btn-circle) + var(--gb-btn-gap) - var(--gb-btn-shift));
  }
}
@media (max-width: 781px) {
  .wp-block-cover.gb-cta { padding-block: var(--gb-space-7); }
  .gb-cta .gb-cta__card.wp-block-column { padding: var(--gb-space-6) var(--gb-gutter); }
  .gb-cta .gb-cta__title { font-size: var(--gb-fs-lg); }
  .gb-cta .gb-cta__text { font-size: var(--gb-fs-sm); }
  .gb-cta .gb-cta__lead,
  .gb-cta > .wp-block-cover__inner-container > h2,
  .post_content .gb-cta > .wp-block-cover__inner-container > h2 { font-size: var(--gb-cta-lead-fs-sp); }
}

/* =========================================================
   Aurora 背景（.gb-aurora）
   使い方: フルワイド/カバー/グループ等のブロックの「追加CSSクラス」に gb-aurora
   構造: 要素本体=下地 / ::before=ぼかした塊＋左下の光（ゆっくり漂う） / ::after=グレイン
   色・速度・粒は tokens.css の --gb-aurora-* / --gb-grain-* で調整
   ========================================================= */
/* セレクタの頭の :root は、古い定義（固定ページの「カスタムCSS」欄などに残った .gb-aurora）に負けないため */
:root .gb-aurora {
  position: relative;
  isolation: isolate;
  overflow: clip; /* hidden だと中の position: sticky が効かない */
  background-color: var(--gb-aurora-base);
}
:root .gb-aurora > * {
  position: relative;
  z-index: 2;
}
/* ぼかした塊（3つ）＋ 左下の光。inset を広めに取り、blur の端が見えないようにする */
:root .gb-aurora::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -25%;
  pointer-events: none;
  background:
    radial-gradient(40% 48% at 10% 94%, var(--gb-aurora-glow)  0%, transparent 62%),
    radial-gradient(45% 40% at 28% 22%, var(--gb-aurora-light) 0%, transparent 70%),
    radial-gradient(40% 45% at 74% 36%, var(--gb-aurora-dark)  0%, transparent 70%),
    radial-gradient(35% 35% at 62% 90%, var(--gb-aurora-light) 0%, transparent 70%),
    var(--gb-aurora-base);
  filter: blur(var(--gb-aurora-blur));
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1.02);
  animation: gb-aurora-drift var(--gb-aurora-drift) ease-in-out infinite alternate;
}
/* グレイン（SVGノイズ） */
:root .gb-aurora::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: var(--gb-grain-opacity);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: var(--gb-grain-size) var(--gb-grain-size);
}
@keyframes gb-aurora-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1.02); }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1.07); }
  100% { transform: translate3d(2%, -3%, 0) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  :root .gb-aurora::before { animation: none; }
}

/* =========================================================
   マーキー（.gb-marquee）— patterns/top-marquee.php
   段落ブロック1つ（追加CSSクラス gb-marquee）。JS(assets/js/gb-marquee.js)が
   文言を複製して .gb-marquee__track を組み、継ぎ目なく流す。JS無効時は静止表示。
   ========================================================= */
.gb-marquee,
.post_content p.gb-marquee,
.post_content figure.gb-marquee {
  position: relative;
  display: block;
  width: 100vw;
  max-width: none;
  margin: var(--gb-marquee-mt) 0 0 calc(50% - 50vw);
  padding: var(--gb-marquee-pad-y) 0 var(--gb-marquee-pad-b);
  overflow: hidden;
  background-color: transparent;
  color: var(--gb-marquee-color);
  font-family: var(--gb-font-heading);
  font-size: var(--gb-marquee-fs);
  font-weight: var(--gb-marquee-fw);
  letter-spacing: var(--gb-marquee-tracking);
  line-height: var(--gb-lh-none);
  white-space: nowrap;
  text-align: left;
  user-select: none;
}
.gb-marquee__track {
  display: flex;
  align-items: flex-end;
  width: max-content;
  will-change: transform;
  animation: gb-marquee var(--gb-marquee-duration, 30s) linear infinite;
}
.gb-marquee__item {
  display: inline-block;
  padding-right: var(--gb-marquee-gap);
}
/* 画像(SVG)版: 高さで揃え、横幅は比率のまま（SWELLの画像ルールより強く） */
.gb-marquee img,
.gb-marquee img.gb-marquee__item,
.post_content figure.gb-marquee img {
  display: block;
  height: var(--gb-marquee-h);
  width: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  flex: none;
}
figure.gb-marquee,
.post_content figure.gb-marquee {
  margin-top: var(--gb-marquee-mt-img);
  padding-bottom: var(--gb-marquee-pad-y);
  line-height: normal;
}
.gb-marquee figcaption { display: none; }
/* 元テキスト（1回分）: 視覚的には隠すが、読み上げ・テキスト抽出には残す */
.gb-marquee__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@keyframes gb-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); } /* track は同じ並びが 2 組 = ちょうど半分で 1 周（幅の実測に頼らない） */
}
@media (prefers-reduced-motion: reduce) {
  .gb-marquee__track { animation: none; }
}

/* =========================================================
   画像マーキー（.gb-marquee-images）— inc/gootbox-marquee-images.php
   ギャラリーブロック（追加CSSクラス gb-marquee-images）をフロントで組み替えた帯。
   1周分（ul.gb-marquee-images__group）が2組以上並び、帯全体が 1 組ぶん動いてループ（JS 無効でも動く）。
   高さ・隙間・速度はクラス名の数字（gb-marquee-h-40 など）→ インライン変数 → ここで px / 秒に。
   ========================================================= */
.gb-marquee-images,
.post_content .gb-marquee-images {
  --gb-mqi-h-px:   calc(var(--gb-mqi-h) * 1px);
  --gb-mqi-gap-px: calc(var(--gb-mqi-gap) * 1px);
  /* JS 無効時の周期（JS が実測して上書き） */
  --gb-mqi-duration: calc(var(--gb-mqi-count, 10) * (var(--gb-mqi-h) * var(--gb-mqi-item-w-est) + var(--gb-mqi-gap)) / var(--gb-mqi-speed) * 1s);
  position: relative;
  display: block;
  width: 100vw;
  max-width: none;
  margin: var(--gb-mqi-my) 0 var(--gb-mqi-my) calc(50% - 50vw);
  padding: 0;
  overflow: hidden;
  user-select: none;
}
/* カラムの中に置いたときは画面幅に広げず、そのカラムの幅に収める（TOP の企業ロゴ: 左の列の g キューブに潜り込んでいた。2026-10-23） */
.wp-block-column .gb-marquee-images,
.post_content .wp-block-column .gb-marquee-images { width: 100%; margin-left: 0; margin-right: 0; }
/* スマホ: 企業ロゴの帯と g キューブ（Let's talk）を 1 行に（ロゴが左で流れ、g キューブは右端に小さく。2026-10-23 モック）。
   core はスマホで列を縦に積む（flex-basis: 100% !important）ので、ロゴの帯を含むカラムだけ上書き。空の列（基準 0）は消す */
@media (max-width: 781px) {
  .wp-block-columns:has(> .wp-block-column > .gb-marquee-images) {
    display: flex; flex-wrap: nowrap !important; flex-direction: row-reverse; align-items: center;
    gap: var(--gb-logos-sp-gap) !important;
  }
  .wp-block-columns:has(> .wp-block-column > .gb-marquee-images) > .wp-block-column { flex-basis: auto !important; min-width: 0; margin: 0 !important; }
  .wp-block-columns:has(> .wp-block-column > .gb-marquee-images) > .wp-block-column:has(> .gb-marquee-images) { flex: 1 1 auto !important; }
  .wp-block-columns:has(> .wp-block-column > .gb-marquee-images) > .wp-block-column:has(.gb-gbox) { flex: 0 0 var(--gb-logos-sp-cube-w) !important; --gb-gbox-size: var(--gb-logos-sp-cube-w); }
  .wp-block-columns:has(> .wp-block-column > .gb-marquee-images) > .wp-block-column:empty,
  .wp-block-columns:has(> .wp-block-column > .gb-marquee-images) > .wp-block-column:not(:has(*)) { display: none; }
}
.gb-marquee-images__track {
  display: flex;
  width: max-content;
  will-change: transform;
  /* 帯（track）を 1 本まるごと動かす。組ごとに動かすと、JS が後から足した組だけ開始時刻がずれて重なる */
  animation: gb-marquee-images var(--gb-mqi-duration) linear infinite;
}
.gb-marquee-images__group,
.post_content ul.gb-marquee-images__group {
  display: flex;
  flex: none;
  align-items: center;
  column-gap: var(--gb-mqi-gap-px);
  margin: 0;
  padding: 0 var(--gb-mqi-gap-px) 0 0; /* 組と組の隙間は右の余白で持つ（全組が同じ幅 = track の 1/n がちょうど 1 周） */
  list-style: none;
}
.gb-marquee-images__item,
.post_content ul.gb-marquee-images__group li.gb-marquee-images__item {
  flex: none;
  margin: 0;
  padding: 0;
}
.post_content ul.gb-marquee-images__group li::before { content: none; }
.gb-marquee-images__item a { display: block; }
.gb-marquee-images__item img,
.post_content .gb-marquee-images img {
  display: block;
  height: var(--gb-mqi-h-px);
  width: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
}
/* --gb-mqi-n = 並んでいる組の数（既定 2。JS が組を足したら更新）。1 組ぶん動いたら最初に戻る */
@keyframes gb-marquee-images {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-100% / var(--gb-mqi-n, 2)), 0, 0); }
}
/* オプション（ギャラリーの追加CSSクラス） */
.gb-marquee-images.gb-marquee-reverse .gb-marquee-images__track { animation-direction: reverse; }
.gb-marquee-images.gb-marquee-pause:hover .gb-marquee-images__track { animation-play-state: paused; }
.gb-marquee-images.gb-marquee-gray img {
  filter: grayscale(1);
  opacity: var(--gb-mqi-gray-opacity);
  transition: filter 0.3s, opacity 0.3s;
}
.gb-marquee-images.gb-marquee-gray .gb-marquee-images__item:hover img { filter: none; opacity: 1; }
@media (max-width: 781px) {
  .gb-marquee-images,
  .post_content .gb-marquee-images { --gb-mqi-h-px: calc(var(--gb-mqi-h) * var(--gb-mqi-sp-scale) * 1px); }
}
@media (prefers-reduced-motion: reduce) {
  .gb-marquee-images__track { animation: none; }
}

/* =========================================================
   ボタン共通（サイト全体）
   対象: ブロックエディタの「ボタン」(core/button) / テンプレート内の .gb-button / SWELL メインビジュアルのボタン（#main_visual .c-mvBtn__btn）
   挙動: ホバーでラベルが少し右へ・右端のドットが円に拡大・矢印が浮かぶ
   ========================================================= */
.wp-block-button__link.wp-element-button,
#main_visual .c-mvBtn__btn,
.gb-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-width: var(--gb-btn-min-width);
  height: var(--gb-btn-height);
  padding: 0 calc(var(--gb-btn-pad-x) + var(--gb-btn-circle) + var(--gb-btn-gap)) 0 var(--gb-btn-pad-x);
  border: var(--gb-border) solid var(--gb-color-accent);
  border-radius: var(--gb-radius-pill);
  background-color: var(--gb-color-bg);
  color: var(--gb-color-text);
  font-family: var(--gb-font-en);
  font-size: var(--gb-fs-sm);
  font-weight: var(--gb-fw-semibold);
  letter-spacing: var(--gb-tracking-button);
  line-height: var(--gb-lh-none);
  text-align: left;
  text-decoration: none;
  box-shadow: none;
  transition: padding var(--gb-duration) var(--gb-ease-out);
}
/* ドット → 円 */
.wp-block-button__link.wp-element-button::after,
#main_visual .c-mvBtn__btn::after,
.gb-button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--gb-btn-pad-x);
  width: var(--gb-btn-circle);
  height: var(--gb-btn-circle);
  transform: translateY(-50%);
  border-radius: var(--gb-radius-pill);
  background-color: currentColor;
  clip-path: circle(calc(var(--gb-btn-dot) / 2) at center);
  transition: clip-path var(--gb-duration) var(--gb-ease-out);
}
/* 矢印（円の上に重ねる） */
.wp-block-button__link.wp-element-button::before,
#main_visual .c-mvBtn__btn::before,
.gb-button::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: var(--gb-btn-pad-x);
  width: var(--gb-btn-circle);
  height: var(--gb-btn-circle);
  transform: translateY(-50%);
  background-color: var(--gb-color-text-inverse);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 10' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'><path d='M0.6 5H10M6 1l4 4-4 4'/></svg>") no-repeat center / var(--gb-btn-arrow-w) var(--gb-btn-arrow-h);
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 10' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'><path d='M0.6 5H10M6 1l4 4-4 4'/></svg>") no-repeat center / var(--gb-btn-arrow-w) var(--gb-btn-arrow-h);
  opacity: 0;
  transition: opacity var(--gb-duration) var(--gb-ease-out);
}
/* ホバー */
.wp-block-button__link.wp-element-button:hover,
.wp-block-button__link.wp-element-button:focus-visible,
#main_visual .c-mvBtn__btn:hover,
.gb-button:hover,
#main_visual .c-mvBtn__btn:focus-visible,
.gb-button:focus-visible {
  padding-left: calc(var(--gb-btn-pad-x) + var(--gb-btn-shift));
  padding-right: calc(var(--gb-btn-pad-x) + var(--gb-btn-circle) + var(--gb-btn-gap) - var(--gb-btn-shift));
  background-color: var(--gb-color-bg);
  color: var(--gb-color-text);
}
.wp-block-button__link.wp-element-button:hover::after,
.wp-block-button__link.wp-element-button:focus-visible::after,
#main_visual .c-mvBtn__btn:hover::after,
.gb-button:hover::after,
#main_visual .c-mvBtn__btn:focus-visible::after,
.gb-button:focus-visible::after {
  clip-path: circle(50% at center);
}
.wp-block-button__link.wp-element-button:hover::before,
.wp-block-button__link.wp-element-button:focus-visible::before,
#main_visual .c-mvBtn__btn:hover::before,
.gb-button:hover::before,
#main_visual .c-mvBtn__btn:focus-visible::before,
.gb-button:focus-visible::before {
  opacity: 1;
}
/* タッチ端末はホバーが無いので、最初から円＋矢印を出しておく */
@media (hover: none) {
  .wp-block-button__link.wp-element-button::after,
  #main_visual .c-mvBtn__btn::after,
  .gb-button::after { clip-path: circle(50% at center); }
  .wp-block-button__link.wp-element-button::before,
  #main_visual .c-mvBtn__btn::before,
  .gb-button::before { opacity: 1; }
}
/* SWELL メインビジュアルのボタン: SWELL 側の影・動き・文字の影を外して共通ボタンにそろえる */
#main_visual .c-mvBtn__btn { width: auto; text-shadow: none; transform: none; opacity: 1; border-color: var(--gb-kv-btn-border); } /* KV のボタンの枠線色（tokens.css。いまはほかのボタンと同じ） */
#main_visual .c-mvBtn { text-shadow: none; }
/* SWELL 側がボタンの ::before / ::after に持っている指定（left・bottom・角丸・影・動きなど）を打ち消す。
   これが残ると、矢印（::before）が right ではなく left 基準で置かれて、白地の上の白い矢印になり見えない */
#main_visual .c-mvBtn__btn::before,
#main_visual .c-mvBtn__btn::after {
  display: block;
  left: auto;
  bottom: auto;
  margin: 0;
  border: 0;
  box-shadow: none;
  animation: none;
  font-size: 0; /* SWELL がアイコンフォントの文字を入れている場合に備える */
  /* SWELL は ::before に background: linear-gradient(…,#fff) を掛けている（ボタンの光沢）。
     shorthand なので background-color だけ上書きしても画像が残り、矢印の色が --gb-color-text-inverse ではなく白のグラデーションになる */
  background-image: none;
}
#main_visual .c-mvBtn__btn::before { z-index: 1; border-radius: 0; }
/* 日本語ラベルのボタンは字間を詰め、本文フォントにする */
.gb-button--ja,
.wp-block-button__link.wp-element-button.gb-btn--ja {
  font-family: var(--gb-font-base);
  font-weight: var(--gb-fw-bold);
  letter-spacing: var(--gb-tracking-body);
}
/* 幅いっぱいボタン（ブロックの「幅」設定）でも崩れないように */
.wp-block-button.has-custom-width .wp-block-button__link.wp-element-button { width: 100%; }

/* ---- SP ---- */
@media (max-width: 781px) {
  .gb-works { padding-block: var(--gb-space-6) var(--gb-space-8); }
  .gb-works__title { font-size: var(--gb-fs-lg); }
  .gb-credit__list { grid-template-columns: minmax(0, 1fr); }
  .gb-credit__row > .gb-credit__job { padding-bottom: 0; }
  .gb-credit__row > .gb-credit__names { padding-top: 0; margin-bottom: var(--gb-space-2); }
  .gb-cards { grid-template-columns: 1fr; }
  .gb-block-gallery { gap: var(--gb-space-3); }
}

/* =========================================================
   TOP WORKS セクション（.gb-works-section）— patterns/top-works.php
   グループ（黒背景・全幅） > 見出し / ショートコード [gb_top_works] / ボタン(VIEW MORE)
   マーキー本体は inc/gootbox-top-works.php + assets/js/gb-works-marquee.js
   ========================================================= */
.wp-block-group.gb-works-section,
.post_content .wp-block-group.gb-works-section {
  width: 100vw;
  max-width: none;
  margin: 0 0 0 calc(50% - 50vw);
  padding: var(--gb-section-pad-y) 0;
  overflow: hidden;
  background-color: var(--gb-color-bg-dark);
  color: var(--gb-color-text-inverse);
}
/* layout:constrained の子要素幅をコンテナ幅に揃える */
.wp-block-group.gb-works-section > * {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--gb-container);
  margin-inline: auto;
  padding-inline: var(--gb-gutter);
}
.gb-works-section .gb-works-section__title,
.post_content .gb-works-section h2.gb-works-section__title {
  margin: 0 auto;
  padding: 0 var(--gb-gutter);
  border: 0;
  background: none;
  box-shadow: none;
  font-family: var(--gb-font-heading);
  font-size: var(--gb-fs-2xl);
  font-weight: var(--gb-fw-bold);
  letter-spacing: var(--gb-tracking-heading);
  line-height: var(--gb-lh-heading);
  color: var(--gb-color-text-inverse);
  text-align: center;
}
/* SWELLの見出し装飾（下線・アイコン等）を打ち消す */
.post_content .gb-works-section h2.gb-works-section__title::before,
.post_content .gb-works-section h2.gb-works-section__title::after {
  content: none;
  display: none;
}
/* ボタンの左右位置はエディタの「配置」設定に任せる（パターン既定は中央） */
.gb-works-section .gb-works-section__more.wp-block-buttons {
  display: flex;
  margin: var(--gb-wm-more-gap) auto 0;
}

/* 黒背景用ボタン: 透明地 × 白枠 × 白文字（矢印は黒） */
.wp-block-button.gb-btn--inverse .wp-block-button__link.wp-element-button,
.wp-block-button.gb-btn--inverse .wp-block-button__link.wp-element-button:hover,
.wp-block-button.gb-btn--inverse .wp-block-button__link.wp-element-button:focus-visible,
.gb-button--inverse,
.gb-button--inverse:hover,
.gb-button--inverse:focus-visible {
  border-color: var(--gb-color-text-inverse);
  background-color: transparent;
  color: var(--gb-color-text-inverse);
}
.wp-block-button.gb-btn--inverse .wp-block-button__link.wp-element-button::before,
.gb-button--inverse::before {
  background-color: var(--gb-color-text);
}
/* 大サイズボタン（CTAと同じ寸法） */
.wp-block-button.gb-btn--lg .wp-block-button__link.wp-element-button {
  width: var(--gb-cta-button-width);   /* SP（599px 以下）は tokens.css で 100% */
  max-width: 100%;
  height: var(--gb-cta-button-height);
  padding-left: var(--gb-cta-button-pad);
  padding-right: calc(var(--gb-cta-button-pad) + var(--gb-btn-circle) + var(--gb-btn-gap));
}
.wp-block-button.gb-btn--lg .wp-block-button__link.wp-element-button::before,
.wp-block-button.gb-btn--lg .wp-block-button__link.wp-element-button::after {
  right: var(--gb-cta-button-pad);
}
.wp-block-button.gb-btn--lg .wp-block-button__link.wp-element-button:hover,
.wp-block-button.gb-btn--lg .wp-block-button__link.wp-element-button:focus-visible {
  padding-left: calc(var(--gb-cta-button-pad) + var(--gb-btn-shift));
  padding-right: calc(var(--gb-cta-button-pad) + var(--gb-btn-circle) + var(--gb-btn-gap) - var(--gb-btn-shift));
}
@media (max-width: 599px) {
  /* SP: ボタンブロック自体も幅いっぱいにして、リンクの width:100% が効くようにする */
  .wp-block-button.gb-btn--lg { width: 100%; }
  /* TOP の本文の大サイズボタン（WORKS の VIEW MORE など）は、スマホではほかのボタン（ABOUTを見る など）と同じ標準サイズに（2026-10-27） */
  #body_wrap.top .l-mainContent .wp-block-button.gb-btn--lg { width: auto; }
  #body_wrap.top .l-mainContent .wp-block-button.gb-btn--lg .wp-block-button__link.wp-element-button {
    width: auto; min-width: var(--gb-btn-min-width); height: var(--gb-btn-height);
    padding-left: var(--gb-btn-pad-x); padding-right: calc(var(--gb-btn-pad-x) + var(--gb-btn-circle) + var(--gb-btn-gap));
  }
  #body_wrap.top .l-mainContent .wp-block-button.gb-btn--lg .wp-block-button__link.wp-element-button::before,
  #body_wrap.top .l-mainContent .wp-block-button.gb-btn--lg .wp-block-button__link.wp-element-button::after { right: var(--gb-btn-pad-x); }
}
/* 準備中のボタン（クラス comingsoon、またはリンク先の記事が「準備中」。inc/gootbox-buttons.php がリンクを外し文言を COMING SOON に）: 薄く、カーソル・ホバーの動きなし */
.comingsoon .wp-block-button__link,
.wp-block-button.comingsoon .wp-block-button__link {
  opacity: var(--gb-comingsoon-opacity);
  cursor: default;
  pointer-events: none;
}
/* 準備中の記事の一覧カード（inc/gootbox-comingsoon.php が li に gb-is-comingsoon、リンクを span に）: カード全体は薄くしない（エラーに見える）。
   押せないだけにして、ボタン／ラベルだけグレーアウト */
.p-postList__item.gb-is-comingsoon .p-postList__link { cursor: default; pointer-events: none; }
.p-postList__item.gb-is-comingsoon .p-postList__link:hover .p-postList__thumb img { transform: none; }
.p-postList__item.gb-is-comingsoon .gb-postlist__more,
.p-postList__item.gb-is-comingsoon .gb-comingsoon__badge { opacity: var(--gb-comingsoon-opacity); }
.gb-comingsoon__badge {
  display: inline-block; margin-top: var(--gb-comingsoon-badge-mt); padding: 2px 10px;
  border: 1px solid currentColor; border-radius: 999px;
  font-family: var(--gb-font-heading); font-size: var(--gb-comingsoon-badge-fs); font-weight: var(--gb-fw-bold); letter-spacing: var(--gb-tracking-nav); line-height: 1.6;
}
/* スマホだけ短い文言のボタン（inc/gootbox-buttons.php の gb_button_sp_labels。例: INTERVIEW 続きを読む → VIEW MORE） */
.gb-btn__sp { display: none; }
@media (max-width: 599px) {
  .gb-btn__pc { display: none; }
  .gb-btn__sp { display: inline; }
}

/* ---- 2段マーキー（.gb-wm）: 上段は左へ、下段は右へ ---- */
.gb-works-section .gb-wm,
.post_content .gb-works-section .gb-wm {
  width: 100vw;
  max-width: none;
  margin: var(--gb-wm-head-gap) 0 0 calc(50% - 50vw);
  padding: 0;
  overflow: hidden;
}
.gb-wm__row {
  overflow: hidden;
}
.gb-wm__row + .gb-wm__row {
  margin-top: var(--gb-wm-row-gap);
}
.gb-wm__track,
.post_content ul.gb-wm__track {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  animation: gb-wm var(--gb-wm-duration, 40s) linear infinite var(--gb-wm-direction, normal);
}
.gb-wm__row--right {
  --gb-wm-direction: reverse;
}
/* JSが複製を足す前（JS無効時も）は静止表示 */
.gb-wm__row:not(.is-ready) .gb-wm__track {
  animation: none;
}
/* 旧サイトに合わせ、ホバー中も流し続ける（止めたい場合は .gb-wm__row:hover .gb-wm__track { animation-play-state: paused; }） */
.gb-wm__item,
.post_content ul.gb-wm__track > li.gb-wm__item {
  flex: none;
  width: var(--gb-wm-item-w);
  aspect-ratio: var(--gb-wm-ratio);
  margin: 0 var(--gb-wm-gap) 0 0;
  padding: 0;
  list-style: none;
}
.gb-wm__item--sm,
.post_content ul.gb-wm__track > li.gb-wm__item--sm {
  width: var(--gb-wm-item-w-sm);
}
.gb-wm__link,
.post_content .gb-wm__link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: var(--gb-color-text-inverse);
  text-decoration: none;
}
.gb-wm__media {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--gb-color-dim); /* 画像未設定時 */
}
.gb-wm__media img,
.post_content .gb-wm__media img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center;
}
/* ホバー: 写真を暗く（乗算）→ 白い内枠とタイトルが浮かぶ */
.gb-wm__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: transparent;
  mix-blend-mode: multiply;
  transition: background-color var(--gb-duration) var(--gb-ease-out);
}
.gb-wm__text {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 var(--gb-wm-title-pad);
  border: var(--gb-wm-title-border) solid var(--gb-color-text-inverse);
  opacity: 0;
  transition: opacity var(--gb-duration) var(--gb-ease-out);
}
.gb-wm__title {
  font-family: var(--gb-font-base);
  font-size: var(--gb-wm-title-fs);
  font-weight: var(--gb-fw-bold);
  letter-spacing: var(--gb-tracking-body);
  line-height: var(--gb-lh-loose);
  text-align: center;
}
/* 左下のカテゴリ（#映像制作 など） */
.gb-wm__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--gb-wm-tag-pad);
  background-color: var(--gb-color-bg-dark);
  color: var(--gb-color-text-inverse);
  font-family: var(--gb-font-base);
  font-size: var(--gb-wm-tag-fs);
  font-weight: var(--gb-fw-bold);
  letter-spacing: var(--gb-tracking-body);
  line-height: var(--gb-lh-none);
  transition: background-color var(--gb-duration) var(--gb-ease-out), color var(--gb-duration) var(--gb-ease-out);
}
.gb-wm__tag::before { content: "#"; }
.gb-wm__link:hover::after,
.gb-wm__link:focus-visible::after {
  background-color: var(--gb-color-dim);
}
.gb-wm__link:hover .gb-wm__text,
.gb-wm__link:focus-visible .gb-wm__text {
  opacity: 1;
}
.gb-wm__link:hover .gb-wm__tag,
.gb-wm__link:focus-visible .gb-wm__tag {
  background-color: var(--gb-color-text-inverse);
  color: var(--gb-color-bg-dark);
}
@keyframes gb-wm {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--gb-wm-shift, -50%), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .gb-wm .gb-wm__row .gb-wm__track { animation: none; }
}
@media (max-width: 781px) {
  .gb-wm {
    --gb-wm-item-w:    var(--gb-wm-item-w-sp);
    --gb-wm-item-w-sm: var(--gb-wm-item-w-sm-sp);
    --gb-wm-gap:       var(--gb-wm-gap-sp);
    --gb-wm-row-gap:   var(--gb-wm-row-gap-sp);
    --gb-wm-title-fs:  var(--gb-wm-title-fs-sp);
    --gb-wm-tag-fs:    var(--gb-wm-tag-fs-sp);
    --gb-wm-tag-pad:   var(--gb-wm-tag-pad-sp);
  }
  .gb-works-section .gb-works-section__title,
  .post_content .gb-works-section h2.gb-works-section__title { font-size: var(--gb-fs-xl); }
}

/* =========================================================
   キューブアイコン（.gb-cube）— Figma 85:611 を CSS だけで描く
   [gb_cube color="y"] / <span class="gb-cube gb-cube--y" aria-hidden="true"></span>
   ::before = 左面(濃)＋右面(淡) を1つの六角形の下半分として描き、色は縦に2分割
   ::after  = 蓋（右奥へ1辺ぶんスライドした菱形）
   座標は 幅=3w / 高さ=5r（w: 面の横幅, r: 30°の立ち上がり = 蓋の高さの半分）
   ========================================================= */
.gb-cube {
  --gb-cube-color: var(--gb-color-text);
  position: relative;
  display: inline-block;
  width: var(--gb-cube-size);
  aspect-ratio: var(--gb-cube-ratio);
  vertical-align: middle;
  pointer-events: none;
}
.gb-cube::before,
.gb-cube::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* 面の色（左面 / 右面・蓋）: キューブ色 × 濃さ を tint-base（白 or transparent）と混ぜる */
.gb-cube {
  --gb-cube-face-l: color-mix(in srgb, var(--gb-cube-color) var(--gb-cube-l), var(--gb-cube-tint-base));
  --gb-cube-face-r: color-mix(in srgb, var(--gb-cube-color) var(--gb-cube-r), var(--gb-cube-tint-base));
}
/* 側面: 左面は濃色、右面は淡色 */
.gb-cube::before {
  background: linear-gradient(90deg, var(--gb-cube-face-l) 0 33.333%, var(--gb-cube-face-r) 33.333%);
  clip-path: polygon(0 40%, 33.333% 60%, 66.667% 40%, 66.667% 80%, 33.333% 100%, 0 80%);
}
/* 蓋: 淡色の菱形（箱の上面から右奥へ1辺ぶんずれている＝開いた箱） */
.gb-cube::after {
  background-color: var(--gb-cube-face-r);
  clip-path: polygon(33.333% 20%, 66.667% 0, 100% 20%, 66.667% 40%);
}
/* 色違い（CMY） */
.gb-cube--c { --gb-cube-color: var(--gb-color-cyan); }
.gb-cube--m { --gb-cube-color: var(--gb-color-magenta); }
.gb-cube--y { --gb-cube-color: var(--gb-color-yellow); }
/* 白いキューブ（黒背景用）。淡い面は黒背景の上で白50%/20%になるよう混ぜ先を黒にする */
.gb-cube--inverse {
  --gb-cube-color: var(--gb-color-text-inverse);
  --gb-cube-tint-base: var(--gb-color-bg-dark);
}
/* 同色の背景に置くとき（ブランドガイド: 50% / 20%） */
.gb-cube--on-color {
  --gb-cube-l: var(--gb-cube-on-color-l);
  --gb-cube-r: var(--gb-cube-on-color-r);
}
/* 透過版（Figma の y-50% 等と同じ。下地が透ける） */
.gb-cube--alpha { --gb-cube-tint-base: transparent; }
/* 段落や見出しの中に置いたときの余白 */
.post_content .gb-cube { margin: 0; }

/* =========================================================
   スクロール登場演出（.gb-reveal）— assets/js/gb-reveal.js
   JS が <html> に .gb-js を付け、画面に入った要素に .is-inview を付ける。
   .gb-js が無い（JS無効 / IntersectionObserver 非対応 / reduce motion）ときは最初から表示。
   使い方: ブロックの追加CSSクラスに gb-reveal（＋ gb-reveal--up / --left / --right / --fade、gb-reveal-delay-1〜4）
   ========================================================= */
.gb-js .gb-reveal {
  transition:
    opacity   var(--gb-reveal-duration) var(--gb-reveal-ease) var(--gb-reveal-delay, 0s),
    transform var(--gb-reveal-duration) var(--gb-reveal-ease) var(--gb-reveal-delay, 0s);
}
.gb-js .gb-reveal:not(.is-inview) {
  opacity: 0;
  transform: translate3d(0, var(--gb-reveal-distance), 0);   /* 既定: 下から */
}
.gb-js .gb-reveal--fade:not(.is-inview)  { transform: none; }
/* ---- EVENT 記事の雛形（patterns/event-webinar.php ほか）: 標準ブロックの組み合わせに最低限の見た目を足す ---- */
.gb-event .gb-event__lead,
.post_content .gb-event p.gb-event__lead {
  font-size: var(--gb-event-lead-fs);
  line-height: var(--gb-lh-relaxed);
}
/* 開催概要・プログラムの表: 左列を項目名として固定幅＋薄い背景（表はセルを td で統一。エディタは本文に th を作らないため） */
.gb-event .gb-event__meta td:first-child,
.gb-event .gb-event__timetable td:first-child,
.post_content .gb-event .wp-block-table.gb-event__meta td:first-child,
.post_content .gb-event .wp-block-table.gb-event__timetable td:first-child {
  width: var(--gb-event-label-w);
  font-weight: var(--gb-fw-bold);
  background-color: var(--gb-event-label-bg);
  white-space: nowrap;
}
.gb-event .gb-event__timetable td:first-child,
.post_content .gb-event .wp-block-table.gb-event__timetable td:first-child {
  width: var(--gb-event-time-w);
  font-variant-numeric: tabular-nums;
}
.gb-event .gb-event__note,
.post_content .gb-event p.gb-event__note {
  font-size: var(--gb-fs-sm);
  color: var(--gb-color-text-muted);
}
.gb-event .gb-event__notes,
.post_content .gb-event ul.gb-event__notes { font-size: var(--gb-fs-sm); }
@media (max-width: 781px) {
  .gb-event .gb-event__meta td:first-child,
  .post_content .gb-event .wp-block-table.gb-event__meta td:first-child { width: 6em; white-space: normal; }
}

/* ---- イベント記事の開催日ブロック（inc/gootbox-event.php が本文先頭に差し込む / [gb_event_date]）----
   投稿日より目立たせる: ラベル「開催日」＋大きな日付＋受付状況、下に時間・形式、受付中なら申込ボタン */
.gb-event-head {
  margin: 0 0 var(--gb-space-7);
  padding: var(--gb-space-5) 0;
  border-top: 1px solid var(--gb-color-line);
  border-bottom: 1px solid var(--gb-color-line);
}
.gb-event-head__main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--gb-space-2) var(--gb-space-4);
}
.gb-event-head__label {
  font-size: var(--gb-fs-xs);
  font-weight: var(--gb-fw-bold);
  letter-spacing: 0.12em;
  color: var(--gb-color-text-muted);
}
.gb-event-head__date {
  font-family: var(--gb-font-en);
  font-size: var(--gb-event-head-date-fs);
  font-weight: var(--gb-fw-bold);
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.gb-event-head__sep { margin: 0 0.08em; }
.gb-event-head__dow {
  margin-left: 0.35em;
  font-family: var(--gb-font-base);
  font-size: 0.4em;
  font-weight: var(--gb-fw-bold);
  vertical-align: baseline;
}
.gb-event-head__dow::before { content: "("; }
.gb-event-head__dow::after  { content: ")"; }
.gb-event-head__status {
  display: inline-block;
  padding: 0.3em 0.9em;
  border-radius: var(--gb-radius-pill);
  font-size: var(--gb-fs-xs);
  font-weight: var(--gb-fw-bold);
  letter-spacing: 0.08em;
  color: var(--gb-event-status-fg);
  background-color: var(--gb-event-status-bg);
  align-self: center;
}
.gb-event-head--open   { --gb-event-status-bg: var(--gb-event-status-open-bg);   --gb-event-status-fg: var(--gb-event-status-open-fg); }
.gb-event-head--full,
.gb-event-head--closed { --gb-event-status-bg: var(--gb-event-status-closed-bg); --gb-event-status-fg: var(--gb-event-status-closed-fg); }
.gb-event-head--ended  { --gb-event-status-bg: var(--gb-event-status-ended-bg);  --gb-event-status-fg: var(--gb-event-status-ended-fg); }
.gb-event-head__info,
.post_content .gb-event-head p.gb-event-head__info {
  margin: var(--gb-space-3) 0 0;
  font-size: var(--gb-fs-md);
  font-weight: var(--gb-fw-bold);
}
.gb-event-head__cta,
.post_content .gb-event-head .gb-event-head__cta { margin: var(--gb-space-4) 0 0; }
/* イベント記事では SWELL の投稿日・更新日を出さない（開催日と紛らわしいため） */
.gb-is-event .c-postTimes,
.gb-is-event .p-articleMetas .c-postTimes { display: none; }
/* INTERVIEW 記事: タイトル横の日付（SWELL .c-postTitle__date。右の縦線・余白ごと）を出さず、タイトルを左端から。タイトル下のメタ（カテゴリ・公開日・更新日）はそのまま。
   body クラス gb-cat-interview は inc/gootbox-single.php（SWELL は #body_wrap に付ける） */
.gb-cat-interview .c-postTitle__date { display: none; }
/* INTERVIEW 記事の見出しボックス（キューブ＋INTERVIEW）: 縦・斜めのラインとそのアニメーションは出さない（2026-10-27） */
.gb-cat-interview .gb-title-box::before,
.gb-cat-interview .gb-title-box::after { content: none; }

/* ---- プロフィール（.gb-profile）: [gb_profile]（inc/gootbox-member.php）とパターン「プロフィール（外部ゲスト）」で共通 ----
   card: 写真 | 名前・肩書・本文（PCは横並び、SPは縦）/ inline: 小さい写真＋名前・肩書の1行（記事末尾の話し手など） */
.gb-profile,
.post_content .wp-block-columns.gb-profile {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--gb-profile-gap);
  margin: var(--gb-profile-my) 0;
}
.gb-profile .gb-profile__photo,
.post_content .gb-profile .wp-block-column.gb-profile__photo {
  flex: 0 0 var(--gb-profile-photo-w);
  margin: 0;
}
.gb-profile .gb-profile__photo img,
.post_content .gb-profile .gb-profile__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--gb-profile-photo-ratio);
  object-fit: cover;
  border-radius: var(--gb-profile-photo-radius);
}
.gb-profile .gb-profile__photo-empty {
  display: block;
  width: 100%;
  aspect-ratio: var(--gb-profile-photo-ratio);
  background-color: var(--gb-color-bg-alt);
  border-radius: var(--gb-profile-photo-radius);
}
.gb-profile .gb-profile__body,
.post_content .gb-profile .wp-block-column.gb-profile__body { flex: 1 1 auto; min-width: 0; }
.gb-profile .gb-profile__name,
.post_content .gb-profile .gb-profile__name,
.post_content .gb-profile h2.gb-profile__name,
.post_content .gb-profile h3.gb-profile__name,
.post_content .gb-profile h4.gb-profile__name {
  margin: 0 0 var(--gb-space-1);
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--gb-profile-name-fs);
  font-weight: var(--gb-fw-bold); /* [gb_profile] の既定が p になったので（目次に拾わせない）、h3 のときと同じ太さを明示 */
  line-height: var(--gb-lh-heading);
}
.post_content .gb-profile .gb-profile__name::before,
.post_content .gb-profile .gb-profile__name::after { content: none; } /* SWELL の見出し装飾（下線など）を外す */
.gb-profile .gb-profile__name-en,
.post_content .gb-profile .gb-profile__name-en {
  margin: 0 0 var(--gb-space-2);
  font-family: var(--gb-font-en);
  font-size: var(--gb-fs-sm);
  font-weight: var(--gb-fw-regular);
  color: var(--gb-color-text-muted);
  letter-spacing: 0.04em;
}
.gb-profile .gb-profile__name .gb-profile__name-en { display: inline; margin: 0 0 0 var(--gb-space-2); }
.gb-profile .gb-profile__title,
.post_content .gb-profile p.gb-profile__title {
  margin: 0 0 var(--gb-space-4);
  font-size: var(--gb-fs-sm);
  color: var(--gb-color-text-muted);
}
.gb-profile .gb-profile__text,
.post_content .gb-profile .gb-profile__text { font-size: var(--gb-fs-base); line-height: var(--gb-lh-relaxed); }
.gb-profile .gb-profile__text > :last-child { margin-bottom: 0; }
.gb-profile .gb-profile__links,
.post_content .gb-profile ul.gb-profile__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gb-space-2);
  margin: var(--gb-space-3) 0 0;
  padding: 0;
  list-style: none;
}
.post_content .gb-profile ul.gb-profile__links li { margin: 0; padding: 0; }
.post_content .gb-profile ul.gb-profile__links li::before { content: none; }
.gb-profile .gb-profile__links a,
.post_content .gb-profile ul.gb-profile__links a {
  display: inline-block;
  padding: 0.25em 0.9em;
  border: 1px solid var(--gb-color-line);
  border-radius: var(--gb-radius-pill);
  font-family: var(--gb-font-en);
  font-size: var(--gb-fs-xs);
  letter-spacing: 0.04em;
  color: var(--gb-color-text);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.gb-profile .gb-profile__links a:hover,
.post_content .gb-profile ul.gb-profile__links a:hover { border-color: var(--gb-color-text); }
.gb-profile--inline { align-items: center; gap: var(--gb-space-4); }
.gb-profile--inline .gb-profile__photo { flex-basis: var(--gb-profile-photo-w-inline); }
.gb-profile--inline .gb-profile__photo img,
.gb-profile--inline .gb-profile__photo-empty { aspect-ratio: 1; border-radius: 50%; }
.gb-profile--inline .gb-profile__name { font-size: var(--gb-fs-md); }
.gb-profile--inline .gb-profile__title { margin-bottom: 0; }
.gb-profile__missing { padding: var(--gb-space-3); border: 1px dashed var(--gb-color-magenta); color: var(--gb-color-magenta); font-size: var(--gb-fs-sm); }
@media (max-width: 599px) {
  .gb-profile--card,
  .post_content .wp-block-columns.gb-profile--card { flex-wrap: wrap; }
  .gb-profile--card .gb-profile__photo,
  .post_content .gb-profile--card .wp-block-column.gb-profile__photo { flex-basis: var(--gb-profile-photo-w-sp); }
}

/* ---- メンバー紹介タイル（.gb-profile--tile）: [gb_profile layout="tile"] / [gb_profile_list]（inc/gootbox-member.php）----
   斜めの色面（平行四辺形）＋背景なし写真、色面の斜辺に沿った職種の英字 / 氏名（左に短いバー）・英字・肩書・本文・リンク / 下罫線
   色面とバーの色: gb-profile--y / --c / --m（なしはグレー）。写真は ACF「背景なし写真」（.gb-profile--cutout）が理想。
   通常の写真しかない場合は写真自体を色面の形に切り抜く。タイル同士は上端そろえ・行ごとに下罫線もそろえる（写真は同じ正方形なので色面の位置もそろう） */
/* 一覧: flex で折り返し。列数ぶんの幅を各タイルに与え、最後の行が埋まらないときは中央寄せ。行ごとに高さをそろえる（stretch）ので下罫線もそろう */
.gb-profile-list,
.post_content .gb-profile-list {
  --gb-profile-list-cols-eff: var(--gb-profile-list-cols, 3);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--gb-profile-list-gap-y) var(--gb-profile-list-gap-x);
  margin: var(--gb-profile-my) 0;
}
.gb-profile-list > .gb-profile--tile,
.post_content .gb-profile-list > .gb-profile.gb-profile--tile {
  flex: 0 0 calc((100% - var(--gb-profile-list-gap-x) * (var(--gb-profile-list-cols-eff) - 1)) / var(--gb-profile-list-cols-eff));
  max-width: calc((100% - var(--gb-profile-list-gap-x) * (var(--gb-profile-list-cols-eff) - 1)) / var(--gb-profile-list-cols-eff));
}
.gb-profile.gb-profile--tile,
.post_content .gb-profile.gb-profile--tile {
  --gb-profile-tile-accent: var(--gb-color-text);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gb-profile-tile-body-gap);
  margin: var(--gb-profile-my) 0;
  padding-bottom: var(--gb-space-5);
  border-bottom: 1px solid var(--gb-color-line);
}
.gb-profile-list > .gb-profile--tile,
.post_content .gb-profile-list > .gb-profile.gb-profile--tile { margin: 0; }
.gb-profile--tile.gb-profile--y { --gb-profile-tile-color: var(--gb-color-yellow);  --gb-profile-tile-accent: var(--gb-color-yellow); }
.gb-profile--tile.gb-profile--c { --gb-profile-tile-color: var(--gb-color-cyan);    --gb-profile-tile-accent: var(--gb-color-cyan); }
.gb-profile--tile.gb-profile--m { --gb-profile-tile-color: var(--gb-color-magenta); --gb-profile-tile-accent: var(--gb-color-magenta); }
/* 写真: 正方形。後ろに斜めの色面（::before）、その上に背景なし写真 */
.gb-profile--tile .gb-profile__photo,
.post_content .gb-profile--tile figure.gb-profile__photo {
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 1;
  margin: 0;
}
.gb-profile--tile .gb-profile__photo::before {
  content: "";
  position: absolute;
  inset: 0 0 0 var(--gb-profile-tile-photo-pl);  /* 左の余白ぶん右へ（英字の場所） */
  background-color: var(--gb-profile-tile-color);
  opacity: var(--gb-profile-tile-opacity);         /* 色面の濃さ（2026-10-23: 試しに 50%） */
  clip-path: var(--gb-profile-tile-shape);
}
.gb-profile--tile .gb-profile__photo img,
.post_content .gb-profile--tile .gb-profile__photo img,
.gb-profile--tile .gb-profile__photo-empty {
  position: absolute;
  inset: 0 0 0 var(--gb-profile-tile-photo-pl);
  width: auto;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center bottom;
  border-radius: 0;
  clip-path: var(--gb-profile-tile-shape);  /* 通常の写真: 色面の形に切り抜く */
}
.gb-profile--tile.gb-profile--cutout .gb-profile__photo img,
.post_content .gb-profile--tile.gb-profile--cutout .gb-profile__photo img {
  object-fit: contain;
  clip-path: none;  /* 背景なし写真: 人物が色面からはみ出す */
}
.gb-profile--tile .gb-profile__photo-empty { background-color: transparent; }
/* 職種の英字: 写真枠の左下を支点に、下から上へ（横書きを -90° 回転）。--gb-profile-tile-angle を色面の斜辺の角度にすると斜辺に沿う */
.gb-profile--tile .gb-profile__role-en {
  position: absolute;
  left: var(--gb-profile-tile-role-x);
  bottom: 0;
  z-index: 2;  /* 写真（人物のはみ出し）より手前 */
  transform-origin: 0 100%;
  transform: rotate(calc(-90deg + var(--gb-profile-tile-angle)));
  margin: 0;
  font-family: var(--gb-font-en);
  font-size: var(--gb-profile-tile-role-en-fs);
  font-weight: var(--gb-fw-bold);
  line-height: var(--gb-lh-none);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gb-color-text);
}
/* 本文: 左に余白（タイル幅に対する %）、右は余白なし。氏名（英字を含む）と肩書は、本文よりもう少し字下げして左端をそろえる。
   値は tokens.css の --gb-profile-tile-body-pl / -pr / -head-indent。氏名の左の短いバーは廃止 */
.gb-profile--tile .gb-profile__body,
.post_content .gb-profile.gb-profile--tile .gb-profile__body {
  position: relative;
  padding-left: var(--gb-profile-tile-body-pl);
  padding-right: var(--gb-profile-tile-body-pr);
}
.gb-profile--tile .gb-profile__name,
.post_content .gb-profile--tile .gb-profile__name {
  position: relative;
  font-size: var(--gb-profile-tile-name-fs);
  font-weight: var(--gb-fw-bold);
}
.gb-profile--tile .gb-profile__name,
.post_content .gb-profile.gb-profile--tile .gb-profile__name,
.gb-profile--tile .gb-profile__title,
.post_content .gb-profile.gb-profile--tile p.gb-profile__title {
  padding-left: var(--gb-profile-tile-head-indent);
}
.gb-profile--tile .gb-profile__name::before,
.post_content .gb-profile.gb-profile--tile .gb-profile__name::before { content: none; }
.gb-profile--tile .gb-profile__name .gb-profile__name-en { display: block; margin: var(--gb-space-1) 0 0; }
@media (max-width: 1023px) {
  .gb-profile-list,
  .post_content .gb-profile-list { --gb-profile-list-cols-eff: min(2, var(--gb-profile-list-cols, 3)); }
}
@media (max-width: 599px) {
  .gb-profile-list,
  .post_content .gb-profile-list { --gb-profile-list-cols-eff: 1; }
  /* スマホ: 1 人ずつのタイルを画面いっぱいにせず、幅 --gb-profile-tile-max-w-sp（260〜320px）で中央に（2026-10-23。両側に余白） */
  .gb-profile-list > .gb-profile--tile,
  .post_content .gb-profile-list > .gb-profile.gb-profile--tile { flex-basis: 100%; max-width: var(--gb-profile-tile-max-w-sp); margin-inline: auto; }
  /* ボードメンバー以外（gb-profile-list--sm。4 人以上の一覧は自動で付く）: 1 列のまま幅いっぱい、写真だけ幅 --gb-profile-photo-w-sp-sm（50%）に（2026-10-27。2 列はやめた。文字は幅いっぱい） */
  .gb-profile-list.gb-profile-list--sm > .gb-profile--tile,
  .post_content .gb-profile-list.gb-profile-list--sm > .gb-profile.gb-profile--tile { max-width: none; margin-inline: 0; }
  .gb-profile-list--sm .gb-profile--tile figure.gb-profile__photo,
  .post_content .gb-profile-list--sm .gb-profile--tile figure.gb-profile__photo { width: var(--gb-profile-photo-w-sp-sm); margin-inline: auto; } /* 写真はタイルの中央に（2026-10-27）。既存の .post_content .gb-profile--tile figure.gb-profile__photo { width: 100% } より強く */
  /* 名前・英字・肩書も写真と同じくタイルの中央に（2026-10-27）。本文の位置は今までどおり:
     本文の箱の左の余白（--gb-profile-tile-body-pl。タイル幅に対する %）を、名前・肩書以外の中身の左マージンに移す */
  .gb-profile-list--sm .gb-profile--tile .gb-profile__body,
  .post_content .gb-profile-list--sm .gb-profile.gb-profile--tile .gb-profile__body { padding-left: 0; }
  .gb-profile-list--sm .gb-profile--tile .gb-profile__body > :not(.gb-profile__name):not(.gb-profile__title),
  .post_content .gb-profile-list--sm .gb-profile.gb-profile--tile .gb-profile__body > :not(.gb-profile__name):not(.gb-profile__title) { margin-left: var(--gb-profile-tile-body-pl); margin-right: var(--gb-profile-tile-body-pl); } /* 本文の左右の余白を同じに（2026-10-27） */
  .gb-profile-list--sm .gb-profile--tile .gb-profile__name,
  .post_content .gb-profile-list--sm .gb-profile.gb-profile--tile .gb-profile__name,
  .gb-profile-list--sm .gb-profile--tile .gb-profile__title,
  .post_content .gb-profile-list--sm .gb-profile.gb-profile--tile p.gb-profile__title { padding-left: 0; text-align: center; }
}

/* ---- INTERVIEW 記事（patterns/interview.php の .gb-interview）---- */
.gb-interview .gb-interview__lead,
.post_content .gb-interview p.gb-interview__lead {
  font-size: var(--gb-event-lead-fs);
  line-height: var(--gb-lh-relaxed);
}
/* 質問: 見出し(h3)または段落に gb-interview__q。記事幅いっぱい、先頭に「――」、SWELL の見出し装飾は外す。回答との間は詰める */
.gb-interview .gb-interview__q,
.post_content .gb-interview h3.gb-interview__q,
.post_content .gb-interview p.gb-interview__q {
  position: relative;
  margin: var(--gb-interview-q-mt) 0 var(--gb-space-4);
  padding: 0 0 0 var(--gb-interview-q-indent);
  border: 0;
  background: none;
  font-size: var(--gb-interview-q-fs);
  font-weight: var(--gb-fw-bold);
  line-height: var(--gb-lh-heading);
  color: var(--gb-interview-q-color);
}
.post_content .gb-interview h3.gb-interview__q::after { content: none; } /* SWELL の見出しスタイルの下線などを消す */
.gb-interview .gb-interview__q::before,
.post_content .gb-interview h3.gb-interview__q::before,
.post_content .gb-interview p.gb-interview__q::before {
  content: var(--gb-interview-q-marker);
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  border: 0;
  background: none;
}
.gb-interview .gb-interview__qa,
.post_content .gb-interview .wp-block-group.gb-interview__qa { margin: 0; padding: 0; }
.wp-block-group.gb-interview__qa > *,
.wp-block-group.gb-interview__qa > .wp-block-group__inner-container > * { max-width: none; margin-inline: 0; }
/* 画像つき Q&A: 質問（全幅）の下に 画像 | 回答 の2カラム。--reverse で左右入れ替え（ブロックの並びは変えない） */
.gb-interview .gb-interview__qa-cols,
.post_content .gb-interview .wp-block-columns.gb-interview__qa-cols {
  gap: var(--gb-interview-qa-gap);
  margin: 0 0 var(--gb-space-4);
  align-items: flex-start;
}
.gb-interview .gb-interview__qa--reverse .gb-interview__qa-cols,
.post_content .gb-interview .gb-interview__qa--reverse .wp-block-columns.gb-interview__qa-cols { flex-direction: row-reverse; }
.gb-interview .gb-interview__qa-image img,
.post_content .gb-interview .gb-interview__qa-image img { display: block; width: 100%; height: auto; border-radius: var(--gb-profile-photo-radius); }
.gb-interview .gb-interview__qa-text > :last-child { margin-bottom: 0; }
@media (max-width: 781px) {
  .gb-interview .gb-interview__qa--reverse .gb-interview__qa-cols,
  .post_content .gb-interview .gb-interview__qa--reverse .wp-block-columns.gb-interview__qa-cols { flex-direction: column; } /* SPは常に 画像 → 文章 */
  .gb-interview .gb-interview__qa-cols .wp-block-column { flex-basis: auto !important; }
}
.gb-interview .gb-interview__a,
.post_content .gb-interview p.gb-interview__a { margin: 0 0 var(--gb-space-4); }
/* 回答に話し手名を出す（対談など）: 追加CSSクラス gb-interview__a--named と、段落の先頭に「石井：」のように書く */
.gb-interview .gb-interview__h2,
.post_content .gb-interview h2.gb-interview__h2 { margin-top: var(--gb-space-8); }
.gb-interview .gb-interview__photo,
.post_content .gb-interview figure.gb-interview__photo { margin: var(--gb-space-7) 0; width: 100%; max-width: none; }
.gb-interview .gb-interview__photo img,
.post_content .gb-interview figure.gb-interview__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--gb-interview-photo-ratio);
  object-fit: cover;
}
.gb-interview .gb-interview__quote,
.post_content .gb-interview .wp-block-pullquote.gb-interview__quote {
  margin: var(--gb-space-7) 0;
  padding: var(--gb-space-6) 0;
  border-top: 1px solid var(--gb-color-line);
  border-bottom: 1px solid var(--gb-color-line);
  text-align: center; /* エディタと同じ中央揃え */
}
.post_content .gb-interview .wp-block-pullquote.gb-interview__quote blockquote { margin: 0; padding: 0; border: 0; background: none; }
.post_content .gb-interview .wp-block-pullquote.gb-interview__quote p {
  margin: 0 0 var(--gb-space-3);
  font-size: var(--gb-interview-quote-fs);
  font-weight: var(--gb-fw-bold);
  line-height: var(--gb-lh-heading);
}
.post_content .gb-interview .wp-block-pullquote.gb-interview__quote cite {
  font-style: normal;
  font-size: var(--gb-fs-sm);
  color: var(--gb-color-text-muted);
}
.post_content .gb-interview .wp-block-pullquote.gb-interview__quote cite::before { content: "— "; }
.gb-interview .gb-interview__closing,
.post_content .gb-interview p.gb-interview__closing { margin-top: var(--gb-space-7); font-weight: var(--gb-fw-bold); }
.gb-interview .gb-interview__sep { margin: var(--gb-space-7) 0 var(--gb-space-4); }
.gb-interview .gb-interview__meta,
.post_content .gb-interview p.gb-interview__meta { font-size: var(--gb-fs-xs); color: var(--gb-color-text-muted); }
/* 記事末尾の「この記事の話し手」: [gb_profile slug="..." layout="inline"] を置けば小さく出る */

/* ---- g＋箱＋フキダシ アイコン（[gb_gbox] / inc/gootbox-gbox.php）----
   重なり順は SVG 側（蓋 → g → 前面2枚 → フキダシ）。g は前面の後ろにあるので、下から上がると箱から出てくる。
   JSあり: 画面に入るまで g は箱の中（translateY）、フキダシは右下のシッポを支点に scale(0)。
   .is-inview（gb-reveal.js）が付いたら transition で出る。JS無効・reduce motion では最初から完成形 */
.gb-gbox {
  display: inline-block;
  width: var(--gb-gbox-size);
  height: auto;
  overflow: visible;
  vertical-align: middle;
  pointer-events: none;
}
.gb-gbox__lid     { fill: var(--gb-gbox-lid); }
.gb-gbox__face--r { fill: var(--gb-gbox-face-r); }
.gb-gbox__face--l { fill: var(--gb-gbox-face-l); }
.gb-gbox__g       { fill: var(--gb-gbox-g); }
.gb-gbox__bubble  { fill: var(--gb-gbox-bubble); }
.gb-gbox--dark .gb-gbox__lid     { fill: var(--gb-gbox-dark-lid); }
.gb-gbox--dark .gb-gbox__face--r { fill: var(--gb-gbox-dark-face-r); }
.gb-gbox--dark .gb-gbox__face--l { fill: var(--gb-gbox-dark-face-l); }
.gb-gbox--dark .gb-gbox__g       { fill: var(--gb-gbox-dark-g); }
.gb-gbox--dark .gb-gbox__bubble  { fill: var(--gb-gbox-dark-bubble); }
/* フキダシの色を CMY から選ぶ（[gb_gbox bubble="c|m|y"]。light / dark どちらにも効く） */
.gb-gbox--bubble-c .gb-gbox__bubble { fill: var(--gb-gbox-bubble-c); }
.gb-gbox--bubble-m .gb-gbox__bubble { fill: var(--gb-gbox-bubble-m); }
.gb-gbox--bubble-y .gb-gbox__bubble { fill: var(--gb-gbox-bubble-y); }
.gb-gbox__g {
  transform-box: fill-box;
  transition: transform var(--gb-gbox-g-duration) var(--gb-ease-pop) var(--gb-gbox-g-delay);
}
.gb-gbox__bubble {
  transform-box: fill-box;
  transform-origin: 100% 100%; /* 右下 = シッポの先 */
  transition: transform var(--gb-gbox-bubble-duration) var(--gb-ease-pop) var(--gb-gbox-bubble-delay);
}
.gb-js .gb-gbox:not(.is-inview) .gb-gbox__g      { transform: translateY(var(--gb-gbox-g-drop)); }
.gb-js .gb-gbox:not(.is-inview) .gb-gbox__bubble { transform: scale(0); }
/* 親のリンク/ボタン（[gb_gbox] は既定で /contact/ へのリンク .gb-gbox-link に包まれる）を hover → g が跳ね、フキダシがぷるっと膨らむ */
@keyframes gb-gbox-hop {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(var(--gb-gbox-hop)); }
  100% { transform: translateY(0); }
}
@keyframes gb-gbox-bubble-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(var(--gb-gbox-bubble-pop)) rotate(-6deg); }
  100% { transform: scale(1); }
}
.gb-gbox-link {
  --gb-gbox-talk-bg: var(--gb-gbox-bubble);
  position: relative;
  display: inline-block;
  line-height: 0;
  text-decoration: none;
}
.gb-gbox-link .gb-gbox { pointer-events: auto; }
/* hover の「Let's talk!」（[gb_gbox talk="…"]）— 2 種類
   round（既定 .gb-gbox-link--talk-round）: 丸いフキダシがシッポを支点に --gb-gbox-talk-scale 倍になり、中の文字（SVG text）が浮かぶ
   pill（talk_style="pill" .gb-gbox-link--talk-pill）: 丸がシッポへ縮み、同じ位置から横長の小さな吹き出し（span）が開く */
/* round */
.gb-gbox__talk {
  fill: var(--gb-gbox-talk-color);
  font-family: var(--gb-gbox-talk-font);
  font-size: calc(var(--gb-gbox-talk-fs) * 1px);  /* SVG 内なので px = ユーザー座標 */
  font-weight: var(--gb-fw-bold);
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 0.15s var(--gb-ease-out);
  pointer-events: none;
}
/* ※ 後ろにある a:hover のぷるっ（animation）より優先させるため .gb-gbox-link を重ねて詳細度を上げる */
.gb-gbox-link.gb-gbox-link--talk-round:hover .gb-gbox .gb-gbox__bubble,
.gb-gbox-link.gb-gbox-link--talk-round:focus-visible .gb-gbox .gb-gbox__bubble {
  animation: none;                               /* ぷるっの代わりに大きくなって止まる */
  transform: scale(var(--gb-gbox-talk-scale));
  transition: transform var(--gb-gbox-talk-grow) var(--gb-ease-pop);
}
/* 文字は丸が大きくなり終わってからフェードイン（hover を外すと文字が先に消え、丸が戻る） */
.gb-gbox-link--talk-round:hover .gb-gbox__talk,
.gb-gbox-link--talk-round:focus-visible .gb-gbox__talk {
  opacity: 1;
  transition: opacity var(--gb-gbox-talk-text-fade) var(--gb-ease-out) var(--gb-gbox-talk-text-delay);
}
/* pill（吹き出しの色はフキダシの色に合わせる） */
.gb-gbox-link.gb-gbox--dark     { --gb-gbox-talk-bg: var(--gb-gbox-dark-bubble); }
.gb-gbox-link.gb-gbox--bubble-c { --gb-gbox-talk-bg: var(--gb-gbox-bubble-c); }
.gb-gbox-link.gb-gbox--bubble-m { --gb-gbox-talk-bg: var(--gb-gbox-bubble-m); }
.gb-gbox-link.gb-gbox--bubble-y { --gb-gbox-talk-bg: var(--gb-gbox-bubble-y); }
.gb-gbox__talk-pill {
  position: absolute;
  right: calc(100% - var(--gb-gbox-talk-x));
  bottom: calc(100% - var(--gb-gbox-talk-y));
  z-index: 1;
  padding: var(--gb-gbox-talk-pad);
  border-radius: var(--gb-radius-pill);
  background-color: var(--gb-gbox-talk-bg);
  color: var(--gb-gbox-talk-color);
  font-family: var(--gb-gbox-talk-font);
  font-size: var(--gb-gbox-talk-pill-fs);
  font-weight: var(--gb-fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  transform-origin: 100% 100%;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.35s var(--gb-ease-pop), opacity 0.15s var(--gb-ease-out);
}
.gb-gbox__talk-pill::after { /* シッポ（右下） */
  content: "";
  position: absolute;
  right: 0.35em;
  bottom: -0.45em;
  width: 0.8em;
  height: 0.8em;
  background-color: var(--gb-gbox-talk-bg);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.gb-gbox-link--talk-pill:hover .gb-gbox__talk-pill,
.gb-gbox-link--talk-pill:focus-visible .gb-gbox__talk-pill { transform: scale(1); opacity: 1; }
/* ※ 後ろにある a:hover のぷるっ（animation）より優先させるため .gb-gbox-link を重ねて詳細度を上げる */
.gb-gbox-link.gb-gbox-link--talk-pill:hover .gb-gbox .gb-gbox__bubble,
.gb-gbox-link.gb-gbox-link--talk-pill:focus-visible .gb-gbox .gb-gbox__bubble {
  animation: none;                       /* ぷるっの代わりに、シッポへ縮んで吹き出しに置き換わる */
  transform: scale(0);
  transition: transform 0.25s var(--gb-ease-out);
}
a:hover .gb-gbox.is-inview .gb-gbox__g,
button:hover .gb-gbox.is-inview .gb-gbox__g,
.gb-gbox-hover:hover .gb-gbox.is-inview .gb-gbox__g {
  animation: gb-gbox-hop 0.45s var(--gb-ease-pop);
}
a:hover .gb-gbox.is-inview .gb-gbox__bubble,
button:hover .gb-gbox.is-inview .gb-gbox__bubble,
.gb-gbox-hover:hover .gb-gbox.is-inview .gb-gbox__bubble {
  animation: gb-gbox-bubble-pop 0.5s var(--gb-ease-pop) 0.05s;
}
/* ふだんも上下にふわふわ浮く（リンク版の [gb_gbox]、または class="gb-gbox--float"）。登場のアニメーションが終わってから始まる */
@keyframes gb-gbox-float {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-1 * var(--gb-gbox-float-y))); }
}
.gb-js .gb-gbox-link .gb-gbox.is-inview,
.gb-js .gb-gbox.gb-gbox--float.is-inview {
  animation: gb-gbox-float var(--gb-gbox-float-dur) ease-in-out var(--gb-gbox-float-delay) infinite alternate;
}
a:hover .gb-gbox.is-inview,
.gb-gbox-link:hover .gb-gbox { transform: translateY(-2px); transition: transform 0.3s var(--gb-ease-out); }
.gb-gbox { transition: transform 0.3s var(--gb-ease-out); }
@media (prefers-reduced-motion: reduce) {
  .gb-gbox__g, .gb-gbox__bubble { transition: none; }
  .gb-js .gb-gbox:not(.is-inview) .gb-gbox__g      { transform: none; }
  .gb-js .gb-gbox:not(.is-inview) .gb-gbox__bubble { transform: none; }
  a:hover .gb-gbox .gb-gbox__g, button:hover .gb-gbox .gb-gbox__g, .gb-gbox-hover:hover .gb-gbox .gb-gbox__g,
  a:hover .gb-gbox .gb-gbox__bubble, button:hover .gb-gbox .gb-gbox__bubble, .gb-gbox-hover:hover .gb-gbox .gb-gbox__bubble { animation: none; }
  a:hover .gb-gbox, .gb-gbox-link:hover .gb-gbox { transform: none; }
  .gb-gbox__talk, .gb-gbox__talk-pill { transition: none; }
}

/* スクロール連動で下から生えてくる（ブロックの追加CSSクラス gb-scrub-up）。assets/js/gb-about-scrub.js が
   要素ごとに --gb-scrub-p(0→1) と is-scrub を付ける。戻せば逆再生。JS無効時はそのまま表示 */
.gb-js .gb-scrub-up.is-scrub {
  opacity: var(--gb-scrub-p, 1);
  transform: translate3d(0, calc((1 - var(--gb-scrub-p, 1)) * var(--gb-scrub-up-distance)), 0);
  transition: opacity var(--gb-scrub-smooth) linear, transform var(--gb-scrub-smooth) linear;
}
.gb-js .gb-reveal--left:not(.is-inview)  { transform: translate3d(calc(-1 * var(--gb-reveal-distance)), 0, 0); }
.gb-js .gb-reveal--right:not(.is-inview) { transform: translate3d(var(--gb-reveal-distance), 0, 0); }
.gb-reveal-delay-1 { --gb-reveal-delay: calc(var(--gb-reveal-step) * 1); }
.gb-reveal-delay-2 { --gb-reveal-delay: calc(var(--gb-reveal-step) * 2); }
.gb-reveal-delay-3 { --gb-reveal-delay: calc(var(--gb-reveal-step) * 3); }
.gb-reveal-delay-4 { --gb-reveal-delay: calc(var(--gb-reveal-step) * 4); }
@media (prefers-reduced-motion: reduce) {
  .gb-js .gb-reveal { transition: none; }
  .gb-js .gb-reveal:not(.is-inview) { opacity: 1; transform: none; }
}

/* =========================================================
   セクション見出しボックス（.gb-title-box）— Figma 85:612
   グループ(.gb-title-box) > [gb_cube] / 見出し(.gb-title-box__title) / 段落(.gb-title-box__sub)
   ::before = 縦ライン（上から下へ伸びる）、::after = 斜めライン（右上から左下へ伸びる。キューブ左下の角を通る 30°）
   ========================================================= */
.gb-title-box,
.post_content .wp-block-group.gb-title-box {
  font-size: var(--gb-title-size); /* アイコン・間隔・下げ幅（em）の基準 */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gb-tb-gap);
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.wp-block-group.gb-title-box > * {
  position: relative;
  z-index: 1;
  max-width: none;
  margin: 0;
  line-height: 0; /* [gb_cube] を包む p の高さをキューブぴったりに */
}
.gb-title-box .gb-cube {
  --gb-cube-size: var(--gb-title-icon-w);
  display: block;
}
/* 見出しのキューブ: assets/img/icon_title_bullet.svg の 3 本のパスをそのまま inline SVG で出す（inc/gootbox-cube.php の gb_cube_title_svg()。
   [gb_cube] の class に gb-title-box__cube があるときだけ .gb-cube--svg が付く）。面を疑似要素で作らない・transform を掛けない。
   大きさは高さだけ指定し、幅は viewBox（125:97）から自動で決まる。色: 扉と上の面 = 明るい方、左の面 = 濃い方（各見出しの配色のまま） */
.gb-cube.gb-cube--svg { width: auto; aspect-ratio: auto; }
.gb-cube.gb-cube--svg::before,
.gb-cube.gb-cube--svg::after { content: none; }
.gb-cube--svg .gb-cube__svg { display: block; width: auto; height: var(--gb-title-icon-h); position: relative; top: var(--gb-title-icon-drop); } /* 下端をベースラインより少し下げる（transform ではなく相対位置） */
.gb-cube--svg .gb-cube__light { fill: var(--gb-cube-face-r); }
.gb-cube--svg .gb-cube__dark  { fill: var(--gb-cube-face-l); }
.gb-title-box .gb-title-box__title,
.post_content .gb-title-box h2.gb-title-box__title,
.post_content .gb-title-box p.gb-title-box__title {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-family: var(--gb-font-heading);
  font-style: var(--gb-title-style);   /* 正体（イタリックなし） */
  font-weight: var(--gb-title-weight); /* 600 = Gibson SemiBold */
  font-size: 1em;                       /* = --gb-title-size（.gb-title-box で指定） */
  letter-spacing: var(--gb-tb-title-tracking);
  line-height: var(--gb-tb-title-lh);
  color: var(--gb-color-text);
  text-align: left;
}
.post_content .gb-title-box h2.gb-title-box__title::before,
.post_content .gb-title-box h2.gb-title-box__title::after {
  content: none;
  display: none;
}
.gb-title-box .gb-title-box__sub,
.post_content .gb-title-box p.gb-title-box__sub {
  display: var(--gb-title-sub-display); /* tokens.css。none にすると消える（余白はこの要素の margin-top で持つので、消えると余白も一緒に消える） */
  margin: 0;
  font-family: var(--gb-font-sub);
  font-style: italic;              /* Jost Light Italic */
  font-weight: var(--gb-fw-light);
  font-size: var(--gb-tb-sub-fs);
  letter-spacing: var(--gb-tb-sub-tracking);
  line-height: var(--gb-lh-tight);
  color: var(--gb-color-text);
  white-space: nowrap;
}
/* TOP の ABOUT / SERVICE / WORKS: キューブを見出しの左に置く（キューブ｜見出し、その下にサブ見出し）。
   グループの中身が .wp-block-group__inner-container に包まれている場合・いない場合の両方に対応 */
.gb-about .gb-title-box > .wp-block-group__inner-container,
.gb-about .gb-title-box:not(:has(> .wp-block-group__inner-container)) {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: var(--gb-title-gap); /* アイコンの右端 → 文字の左端 */
  row-gap: 0;
  align-items: baseline; /* アイコン（ベースラインなし＝下端）と文字のベースラインをそろえ、アイコンは --gb-title-icon-drop だけ下げる */
  justify-content: start;
  width: max-content;
  max-width: 100%;
}
.gb-about .gb-title-box > .wp-block-group__inner-container > *,
.gb-about .gb-title-box:not(:has(> .wp-block-group__inner-container)) > * { margin: 0; }
.gb-about .gb-title-box > .wp-block-group__inner-container > :first-child,
.gb-about .gb-title-box:not(:has(> .wp-block-group__inner-container)) > :first-child { grid-column: 1; grid-row: 1; line-height: 0; } /* キューブ */
.gb-about .gb-title-box .gb-title-box__title { grid-column: 2; grid-row: 1; line-height: 1; margin-bottom: 0; }
.gb-about .gb-title-box .gb-title-box__sub   { grid-column: 2; grid-row: 2; margin-top: var(--gb-tb-sub-mt); }

/* 縦ライン */
.gb-title-box::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: var(--gb-tb-vline-x);
  top: var(--gb-tb-vline-top);
  bottom: var(--gb-tb-vline-bottom);
  width: var(--gb-tb-line-w);
  background-color: var(--gb-tb-line-color);
  transform-origin: 50% 0;
  transition: transform var(--gb-tb-line-duration) var(--gb-ease-out);
  pointer-events: none;
}
/* 斜めライン: キューブ左下の角を軸に回転。左右へ長く伸ばし、セクション側の overflow: clip で画面外を切る */
.gb-title-box::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: calc(-1 * var(--gb-tb-dline-len) / 3);
  top: calc(var(--gb-title-icon-h) + var(--gb-title-icon-drop)); /* アイコンの下端（ベースラインより下げたぶんを含む） */
  width: var(--gb-tb-dline-len);
  height: var(--gb-tb-line-w);
  background-color: var(--gb-tb-line-color);
  transform-origin: calc(var(--gb-tb-dline-len) / 3) 50%;
  transform: rotate(var(--gb-tb-dline-angle));
  clip-path: inset(0);
  transition: clip-path var(--gb-tb-dline-duration) var(--gb-ease-out) var(--gb-tb-line-delay);
  pointer-events: none;
}
/* 画面に入る前（JSあり）: 縦は長さ0、斜めは右端側を隠す → 入ったら「上から下へ」「左下から右上へ」伸びる
   （::after は回転前の横長バー。左端が左下・右端が右上になるので、右側を inset で隠すと左下から伸びて見える） */
.gb-js .gb-title-box:not(.is-inview)::before { transform: scaleY(0); }
.gb-js .gb-title-box:not(.is-inview)::after  { clip-path: inset(0 100% 0 0); }
.gb-title-box--no-line::before,
.gb-title-box--no-line::after { content: none; }
@media (prefers-reduced-motion: reduce) {
  .gb-title-box::before, .gb-title-box::after { transition: none; }
  .gb-js .gb-title-box:not(.is-inview)::before { transform: none; }
  .gb-js .gb-title-box:not(.is-inview)::after  { clip-path: inset(0); }
}

/* =========================================================
   TOP ABOUT セクション（.gb-about）— patterns/top-about.php
   グループ(.gb-about) > [gb_about_shapes] / カラム(.gb-about__cols) > 左(.gb-about__side: 見出し sticky) / 右(.gb-about__main)
   背景色は付けない（フルワイド側で指定）。
   ========================================================= */
.wp-block-group.gb-about,
.post_content .wp-block-group.gb-about {
  position: relative;
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  margin: 0 0 0 calc(50% - 50vw);
  padding: var(--gb-about-pad-top) var(--gb-gutter) var(--gb-about-pad-bottom);
  overflow: clip; /* hidden だと sticky が効かなくなるので clip */
  isolation: isolate; /* 重なり順（z-index）をこのセクション内で完結させる */
}
.wp-block-group.gb-about > * {
  width: 100%;
  max-width: var(--gb-container);
  margin-inline: auto;
}
.gb-about .gb-about__cols.wp-block-columns {
  position: relative;
  gap: var(--gb-about-col-gap);
  align-items: stretch;
  margin: 0 auto;
}
/* 左カラム: 見出しボックスが sticky。下の padding ぶん（CEO写真の高さ）手前で止まる */
.gb-about .gb-about__side.wp-block-column {
  box-sizing: border-box;
  padding-bottom: var(--gb-about-ceo-h);
}
.gb-about .gb-about__side .gb-title-box {
  position: sticky;
  z-index: 3;
  top: var(--gb-sticky-top);
  margin-left: calc(-1 * var(--gb-tb-vline-x)); /* 縦ラインがカラムからはみ出ないぶん内側へ */
}
/* 右カラム: 中身は背景の◢より上に。リード〜MORE（.gb-about__intro）は見出しと同じく sticky */
.gb-about .gb-about__main > * {
  position: relative;
  z-index: 2;
}
.gb-about .gb-about__intro,
.post_content .gb-about .wp-block-group.gb-about__intro {
  position: sticky;
  top: var(--gb-sticky-top);
  margin: 0;
  padding: 0;
}
.wp-block-group.gb-about__intro > *,
.wp-block-group.gb-about__intro > .wp-block-group__inner-container > * { max-width: none; margin-inline: 0; }
.gb-about .gb-about__lead,
.post_content .gb-about h3.gb-about__lead,
.post_content .gb-about p.gb-about__lead {
  margin: 0 0 var(--gb-space-5);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-family: var(--gb-font-base);
  font-size: var(--gb-about-lead-fs);
  font-weight: var(--gb-about-lead-fw);
  letter-spacing: var(--gb-tracking-body);
  line-height: var(--gb-about-lead-lh);
  color: var(--gb-color-text);
  transition: color var(--gb-about-hover-duration);
}
.post_content .gb-about h3.gb-about__lead::before,
.post_content .gb-about h3.gb-about__lead::after {
  content: none;
  display: none;
}
.gb-about .gb-about__text,
.post_content .gb-about p.gb-about__text {
  margin: 0 0 var(--gb-space-6);
  font-family: var(--gb-font-base);
  font-size: var(--gb-text-fs);
  font-weight: var(--gb-fw-regular);
  letter-spacing: var(--gb-tracking-body);
  line-height: var(--gb-lh-loose);
  color: var(--gb-color-text-sub);
  transition: color var(--gb-about-hover-duration);
}
.gb-about .gb-about__more.wp-block-buttons {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}
/* ---- リード文（見出し＋本文）をまるごとクリッカブルに: ボタンブロック(.gb-about__intro-link)を透明にして intro 全体に重ねる。
        hover でセクションの色（gb-about--y / --c / --m → --gb-about-hover）に文字色が変わる。下線なし ---- */
.gb-about .gb-about__intro-link.wp-block-buttons,
.post_content .gb-about .wp-block-buttons.gb-about__intro-link {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 1;
}
.gb-about .gb-about__intro-link .wp-block-button,
.gb-about .gb-about__intro-link .wp-block-button__link,
.post_content .gb-about .gb-about__intro-link .wp-block-button__link.wp-element-button {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  line-height: 0;
  box-shadow: none;
  overflow: hidden;
  text-indent: -9999px; /* 文言は読み上げ用に残す */
}
.post_content .gb-about .gb-about__intro-link .wp-block-button__link::before,
.post_content .gb-about .gb-about__intro-link .wp-block-button__link::after { content: none; display: none; }
.gb-about.gb-about--y { --gb-about-hover: var(--gb-color-yellow); }
.gb-about.gb-about--c { --gb-about-hover: var(--gb-color-cyan); }
.gb-about.gb-about--m { --gb-about-hover: var(--gb-color-magenta); }
.gb-about .gb-about__intro:has(.gb-about__intro-link a:hover) .gb-about__lead,
.gb-about .gb-about__intro:has(.gb-about__intro-link a:hover) .gb-about__text,
.gb-about .gb-about__intro:has(.gb-about__intro-link a:focus-visible) .gb-about__lead,
.gb-about .gb-about__intro:has(.gb-about__intro-link a:focus-visible) .gb-about__text {
  color: var(--gb-about-hover);
}

/* ---- インタビューカード: 白い枠とボタンは固定、中のパネルだけがスクロール量に応じて右からスライドインして切り替わる ----
   JS（assets/js/gb-about-cards.js）が .gb-about__cards に is-ready を付け、パネルに is-active / is-passed を付ける。
   JS無効・縦積み幅ではパネルが縦に並んだ普通のカード。 */
.gb-about .gb-about__cards,
.post_content .gb-about .wp-block-group.gb-about__cards {
  margin: var(--gb-about-cards-mt) 0 0;
  padding: 0;
  /* カードの固定範囲ぶん箱が縦に長く、スクロールで上のリード（intro・ABOUTを見るボタン）の上に重なる。
     箱の空いている部分がクリックを奪わないよう、箱自体は素通しにしてカードだけ受ける */
  pointer-events: none;
  /* カードの影: カードは clip-path で角を切っているので box-shadow だと切り取られる → 親に drop-shadow を掛け、切った形のまま影を落とす */
  filter: var(--gb-about-card-shadow);
}
.gb-about .gb-about__card,
.post_content .gb-about .wp-block-group.gb-about__card {
  box-sizing: border-box;
  pointer-events: auto;
  margin: 0;
  padding: var(--gb-about-card-pad);
  background-color: var(--gb-about-card-bg);
  /* 左上の角を斜めに切る */
  clip-path: polygon(var(--gb-about-card-notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--gb-about-card-notch));
}
/* 実サイトのグループは中に .wp-block-group__inner-container が1段入るので、その下も対象にする */
.wp-block-group.gb-about__card > *,
.wp-block-group.gb-about__card > .wp-block-group__inner-container > *,
.wp-block-group.gb-about__card-panels > *,
.wp-block-group.gb-about__card-panels > .wp-block-group__inner-container > *,
.wp-block-group.gb-about__card-panel > *,
.wp-block-group.gb-about__card-panel > .wp-block-group__inner-container > * { max-width: none; margin-inline: 0; }
.gb-about .gb-about__card-panels,
.post_content .gb-about .wp-block-group.gb-about__card-panels {
  margin: 0 0 var(--gb-about-card-more-mt); /* 本文 → ボタン（ボタンの下に名前が入るぶん詰めてある） */
  padding: 0;
}
.gb-about .gb-about__card-panel + .gb-about__card-panel { margin-top: var(--gb-space-7); } /* JS無効時の並び */
.gb-about .gb-about__card-title,
.post_content .gb-about h3.gb-about__card-title {
  margin: 0 0 var(--gb-space-5);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-family: var(--gb-font-base);
  font-size: var(--gb-about-card-title-fs);
  font-weight: var(--gb-about-card-title-fw);
  letter-spacing: var(--gb-tracking-body);
  line-height: var(--gb-lh-loose);
  color: var(--gb-color-text);
}
.post_content .gb-about h3.gb-about__card-title::before,
.post_content .gb-about h3.gb-about__card-title::after {
  content: none;
  display: none;
}
.gb-about .gb-about__card-text,
.post_content .gb-about p.gb-about__card-text {
  margin: 0;
  font-family: var(--gb-font-base);
  font-size: var(--gb-text-fs);
  letter-spacing: var(--gb-tracking-body);
  line-height: var(--gb-lh-loose);
  color: var(--gb-color-text-sub);
}
.gb-about .gb-about__card-more.wp-block-buttons {
  display: flex;
  justify-content: flex-start; /* 左揃え（「ABOUTを見る」と同じ側） */
  margin: 0;
}
/* カードのボタンは「ABOUTを見る」と同じ寸法にする（パターンでは大サイズ gb-btn--lg だが、ここでは標準サイズに戻す） */
.gb-about .gb-about__card-more .wp-block-button.gb-btn--lg { width: auto; }
.gb-about .gb-about__card-more .wp-block-button.gb-btn--lg .wp-block-button__link.wp-element-button {
  width: auto;
  height: var(--gb-btn-height);
  padding-left: var(--gb-btn-pad-x);
  padding-right: calc(var(--gb-btn-pad-x) + var(--gb-btn-circle) + var(--gb-btn-gap));
}
.gb-about .gb-about__card-more .wp-block-button.gb-btn--lg .wp-block-button__link.wp-element-button::before,
.gb-about .gb-about__card-more .wp-block-button.gb-btn--lg .wp-block-button__link.wp-element-button::after { right: var(--gb-btn-pad-x); }
.gb-about .gb-about__card-more .wp-block-button.gb-btn--lg .wp-block-button__link.wp-element-button:hover,
.gb-about .gb-about__card-more .wp-block-button.gb-btn--lg .wp-block-button__link.wp-element-button:focus-visible {
  padding-left: calc(var(--gb-btn-pad-x) + var(--gb-btn-shift));
  padding-right: calc(var(--gb-btn-pad-x) + var(--gb-btn-circle) + var(--gb-btn-gap) - var(--gb-btn-shift));
}
/* 写真のキャプション（CEO｜石井宏幸 など）をカードの右下に出す（inc/gootbox-about.php が写真の figcaption から移す）。
   PC・タブレット: ボタンと同じ行の右端（ボタンの上下中央）。SP: ボタンの下に右寄せ */
.gb-about .gb-about__card,
.post_content .gb-about .wp-block-group.gb-about__card { position: relative; }
.gb-about .gb-about__card-name,
.post_content .gb-about p.gb-about__card-name {
  position: absolute;
  right: var(--gb-about-card-pad);
  bottom: calc(var(--gb-about-card-pad) + (var(--gb-btn-height) - 1em) / 2);
  margin: 0;
  text-align: right;
  white-space: nowrap;
  font-family: var(--gb-font-base);
  font-size: var(--gb-about-card-name-fs);
  font-weight: var(--gb-fw-regular);
  letter-spacing: var(--gb-tracking-body);
  line-height: var(--gb-lh-none);
  color: var(--gb-about-card-name-color);
}
@media (max-width: 599px) {
  .gb-about .gb-about__card-name,
  .post_content .gb-about p.gb-about__card-name { position: static; margin: var(--gb-about-card-name-mt) 0 0; }
}
/* JSあり: 枠を sticky にし、パネルを重ねて切り替える */
.gb-js .gb-about__cards.is-ready .gb-about__card {
  position: sticky;
  top: var(--gb-about-card-top, var(--gb-sticky-top)); /* JS が「見出し位置 + intro の高さ」を入れる */
}
.gb-js .gb-about__cards.is-ready .gb-about__card-panels {
  position: relative;
  height: var(--gb-about-panels-h, auto);
  overflow: hidden;
}
.gb-js .gb-about__cards.is-ready .gb-about__card-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  opacity: 0;
  transform: translate3d(var(--gb-about-panel-shift), 0, 0); /* 待機: 右 */
  transition:
    transform var(--gb-about-panel-duration) var(--gb-ease-out),
    opacity   var(--gb-about-panel-duration) var(--gb-ease-out);
}
.gb-js .gb-about__cards.is-ready .gb-about__card-panel.is-active {
  opacity: 1;
  transform: none;
}
/* 済んだパネルは左へ出て消える（枠の背景は半透明なのでパネル自体に背景は付けず、重なりは opacity で解消） */
.gb-js .gb-about__cards.is-ready .gb-about__card-panel.is-passed {
  opacity: 0;
  transform: translate3d(calc(-1 * var(--gb-about-panel-shift)), 0, 0);
  transition:
    transform var(--gb-about-panel-duration) var(--gb-ease-out),
    opacity   var(--gb-about-panel-out-duration) var(--gb-ease-out);
}

/* ---- インタビューカードが 1 枚のとき（スライダーなし。2026-10 TOP をカード 1 枚に変更）----
   gb-about-cards.js はパネルが 2 枚未満だと何もしない（固定・切り替えなし）。そのままだとリード（intro）だけが固定され、
   その上をカードが流れて重なるので、リードも固定せず普通に流し、カードはボタンの下に並べる。2 枚以上（例: 固定ページ 3157）は今までどおり */
.post_content .gb-about:not(:has(.gb-about__card-panel ~ .gb-about__card-panel)) .wp-block-group.gb-about__intro,
.gb-about:not(:has(.gb-about__card-panel ~ .gb-about__card-panel)) .gb-about__main > .gb-about__intro { position: relative; top: auto; }
/* TOP: 右の大見出しの上に余白をとり、文字の上端を左の箱アイコン見出しの文字の上端にそろえる（3 セクション共通。値は tokens.css の --gb-top-head-gap） */
#body_wrap.top .post_content .gb-about .wp-block-group.gb-about__intro,
#body_wrap.top .gb-about .gb-about__main > .gb-about__intro { padding-top: var(--gb-top-head-gap); } /* margin だと SWELL の「最初の子の margin-top: 0 !important」で消えるので padding */
/* TOP: 箱アイコンまわりの線（縦・斜め）の色 = tokens.css の --gb-top-title-line-color（transparent で消える。黒に戻すなら var(--gb-tb-line-color)） */
#body_wrap.top .gb-about .gb-title-box::before,
#body_wrap.top .gb-about .gb-title-box::after { background-color: var(--gb-top-title-line-color); }

/* ---- TOP（カード 1 枚）: 左の箱アイコン見出しと右側（大見出し〜ボタン＋カード）を、同じ top で左右そろって固定する（2026-10）----
   assets/js/gb-about-cards.js（setupPin）が右側を .gb-about__pin に包み、収まる高さ・861px 以上なら .gb-about に is-pin を付け、
   左カラムの下の余白（= 右側の高さ − 見出しの高さ）をインラインで入れる → 左右が同じスクロール位置で外れて、写真・◢ と一緒に動き出す。
   is-pin が無いとき（右側が画面に収まらない高さ・860px 以下・JS なし）は左右とも固定せず普通にスクロール */
#body_wrap.top .gb-about:not(.is-pin) .gb-about__side .gb-title-box { position: relative; top: auto; }
/* 見出しボックスの上端を右カラムの見出しの上端にそろえる（2026-10-23）。SWELL の「.post_content div > :first-child { margin-top: 0 !important }」より強い指定で margin-top を通す。
   差は画面幅に比例していた（1440 で 49px、1280 で 43.5px = 3.4vw）ので vw で持つ。スマホは別レイアウトなので 0 */
#body_wrap.top .post_content .gb-about .gb-about__side > .gb-title-box:first-child,
#body_wrap.top .post_content .gb-about .gb-about__side > .gb-title-box { margin-top: var(--gb-tb-top-offset) !important; }
#body_wrap.top .gb-about:not(.is-pin) .gb-about__side.wp-block-column { padding-bottom: 0; }
#body_wrap.top .gb-about.is-pin .gb-about__main > .gb-about__pin { position: sticky; top: var(--gb-about-pin-top, var(--gb-sticky-top)); z-index: 2; }
#body_wrap.top .gb-about.is-pin .gb-about__side .gb-title-box { top: var(--gb-about-pin-top-side, var(--gb-sticky-top)); }
/* ---- INTERVIEW 記事の冒頭（.gb-about--interview）: 見出し・右側が止まる → 写真がフェードイン → 右側だけスクロール → 3 つそろって流れる（2026-10-19）----
   assets/js/gb-about-cards.js（setupInterview）が右側を .gb-about__pin-track > .gb-about__pin に包み、861px 以上で is-pin と高さ・余白（インライン）を入れる。
   写真は今まで通り（画面の下から --gb-about-interview-ceo-bottom の位置に下揃えの sticky）。is-pin が無いとき（860px 以下・JS なし・動きを減らす設定）は全部今まで通り */
.post_content .gb-about.gb-about--interview :is(.gb-about__pin-track, .gb-about__pin, .gb-about__pin-spacer) { margin: 0; } /* SWELL の本文の div の下マージン（17px）を入れない（JS の計算がずれるため） */
.gb-about.gb-about--interview .gb-about__main > .gb-about__pin-spacer { z-index: 0; pointer-events: none; } /* 中身のない余白。右側（目次の「もっと見る」）の上に重なってクリックを奪わないように */
.gb-about.gb-about--interview.is-pin .gb-about__pin-track > .gb-about__pin { position: sticky; top: var(--gb-about-pin-top, var(--gb-sticky-top)); z-index: 2; }
.gb-about.gb-about--interview.is-pin .gb-about__side .gb-title-box { top: var(--gb-about-pin-top-side, var(--gb-sticky-top)); }
/* 右側が画面に収まらない高さのとき（JS が .is-tight を付ける）: 右側の余白を詰めて収める。値は tokens.css の --gb-about-tight-* */
#body_wrap.top .gb-about.is-tight {
  --gb-top-head-gap:       var(--gb-about-tight-head-gap);
  --gb-about-cards-mt:     var(--gb-about-tight-cards-mt);
  --gb-about-card-pad:     var(--gb-about-tight-card-pad);
  --gb-about-card-more-mt: var(--gb-about-tight-more-mt);
} /* 左右で同じ止まる位置（JS が画面の高さに合わせて入れる） */

/* ---- TOP のインタビューカード（2026-10 意匠変更）: 左上の斜めカットなし・見出し太字・右上に INTERVIEW・右下に「役職｜氏名」を大きく太く。値は tokens.css の --gb-top-card-* ---- */
#body_wrap.top .gb-about .gb-about__card,
#body_wrap.top .post_content .gb-about .wp-block-group.gb-about__card { clip-path: none; }
#body_wrap.top .gb-about .gb-about__card-title,
#body_wrap.top .post_content .gb-about h3.gb-about__card-title { font-size: var(--gb-ivcard-title-size); font-weight: var(--gb-ivcard-title-weight); }
/* 右上の INTERVIEW（カードの中に 段落 + 追加クラス gb-about__card-label） */
.gb-about .gb-about__card-label,
.post_content .gb-about p.gb-about__card-label {
  position: absolute; z-index: 1; top: var(--gb-top-card-label-inset); right: var(--gb-top-card-label-inset); margin: 0;
  font-family: var(--gb-font-heading); font-weight: var(--gb-fw-bold); font-size: var(--gb-top-card-label-fs); letter-spacing: var(--gb-top-card-label-ls); line-height: var(--gb-lh-none);
  color: var(--gb-top-card-label-color);
}
.gb-about .gb-about__card:has(.gb-about__card-label) .gb-about__card-title,
.post_content .gb-about .gb-about__card:has(.gb-about__card-label) h3.gb-about__card-title { padding-right: var(--gb-top-card-label-space); }
/* 右下の 役職｜氏名（inc/gootbox-about.php が写真のキャプションから作る） */
#body_wrap.top .gb-about .gb-about__card-name,
#body_wrap.top .post_content .gb-about p.gb-about__card-name { font-size: var(--gb-ivcard-name-size); font-weight: var(--gb-ivcard-name-weight); color: var(--gb-color-text); }
#body_wrap.top .gb-about .gb-about__card-role { font-family: var(--gb-font-heading); font-weight: var(--gb-ivcard-name-weight); }
#body_wrap.top .gb-about .gb-about__card-sep { margin: 0; font-weight: var(--gb-fw-extralight); } /* 全角の｜は左右に余白を持っているので margin なし */
#body_wrap.top .gb-about .gb-about__card-person { font-weight: var(--gb-ivcard-name-weight); }
@media (max-width: 599px) {
  .gb-about .gb-about__card:has(.gb-about__card-label) .gb-about__card-title,
  .post_content .gb-about .gb-about__card:has(.gb-about__card-label) h3.gb-about__card-title { padding-right: 0; padding-top: calc(var(--gb-top-card-label-fs) * 1.5); } /* スマホはラベルの下から見出し */
}

/* ---- CEO写真: 右カラムの最後に置き、PCでは左カラムの位置へずらして sticky（下揃え）。見出しのライン描画後に登場 ---- */
.gb-about .gb-about__main > .gb-about__ceo,
.post_content .gb-about figure.gb-about__ceo {
  position: sticky;
  bottom: 0;
  z-index: 0; /* ◢（z-index:1）より下、本文（2）より下 */
  width: var(--gb-about-ceo-w-eff);
  margin: 0 0 0 calc(-1 * (50% + var(--gb-about-col-gap))); /* 右カラム(66.66%)の 50% = 左カラム幅 */
  pointer-events: none; /* SWELL の「クリックして拡大」を効かせない（装飾扱い） */
}
.gb-about .gb-about__ceo img,
.post_content .gb-about figure.gb-about__ceo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--gb-about-ceo-ratio);
  object-fit: cover;                              /* 画像がスクエアでなくても伸び縮みさせず、枠に合わせて切り抜く */
  object-position: var(--gb-about-ceo-pos);       /* 切り抜くときの基準（既定: 下中央。人物の胸元で切れるように） */
  margin: 0;
  /* 斜めカットはしない（元の画像のまま出す）。戻すなら:
     clip-path: polygon(0 0, 100% 0, 100% 100%, var(--gb-about-ceo-cut-x) 100%, 0 var(--gb-about-ceo-cut-y)); */
  clip-path: none;
}
.gb-about .gb-about__ceo figcaption,
.post_content .gb-about figure.gb-about__ceo figcaption {
  position: absolute;
  left: var(--gb-about-ceo-caption-x);                 /* 写真の左端にそろえて写真の上に乗せる（写真の左側の余白部分） */
  top: var(--gb-about-ceo-caption-y);                  /* 写真の上下中央（tokens: 50%） */
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  font-family: var(--gb-font-base);
  font-size: var(--gb-fs-sm);
  letter-spacing: var(--gb-tracking-body);
  line-height: var(--gb-lh-none);
  color: var(--gb-color-text);
  text-align: left;
  white-space: nowrap;
}
/* スクロール連動（assets/js/gb-about-scrub.js が .gb-about に is-scrub と --gb-ceo-p(0→1) を付ける）:
   見出しの下に隙間ができたところで、少し左から（--gb-about-ceo-shift）フェードインする。戻せば逆再生 */
.gb-js .gb-about.is-scrub .gb-about__main > .gb-about__ceo {
  opacity: var(--gb-ceo-p, 1);
  transform: translate3d(calc((1 - var(--gb-ceo-p, 1)) * -1 * var(--gb-about-ceo-shift)), 0, 0);
  transition: opacity var(--gb-scrub-smooth) linear, transform var(--gb-scrub-smooth) linear;
}

/* ---- 背景の◢（[gb_about_shapes]）: .gb-about の最後に置いた高さ0の sticky（下揃え）から上へ描く。
        濃いグレーの斜辺は CEO写真の斜めカット（30°）の延長線に揃う。薄いグレーは同じ角度で右下 ---- */
.gb-about .gb-about__shapes {
  position: sticky;
  bottom: 0;
  z-index: 1; /* CEO写真より上、本文・カードより下 */
  height: 0;
  margin: 0 auto;
  pointer-events: none;
}
.gb-about .gb-about__shape {
  position: absolute;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  display: block;
}
.gb-about .gb-about__shape--dark {
  height: var(--gb-about-shape-dark-h);
  background-color: var(--gb-about-shape-dark);
  clip-path: polygon(0 0, var(--gb-about-shape-dark-w) 100%, 0 100%);
}
.gb-about .gb-about__shape--light {
  height: var(--gb-about-shape-light-h);
  background-color: var(--gb-about-shape-light);
  clip-path: polygon(100% 0, 100% 100%, var(--gb-about-shape-light-x) 100%);
}
/* スクロール連動（--gb-shape-*-p: 0→1）: 画面の下から生えてくる（自分の高さぶん下に隠れた位置 → 定位置） */
.gb-js .gb-about.is-scrub .gb-about__shape--dark {
  transform: translate3d(0, calc((1 - var(--gb-shape-dark-p, 1)) * 100%), 0);
  transition: transform var(--gb-scrub-smooth) linear;
}
.gb-js .gb-about.is-scrub .gb-about__shape--light {
  transform: translate3d(0, calc((1 - var(--gb-shape-light-p, 1)) * 100%), 0);
  transition: transform var(--gb-scrub-smooth) linear;
}
/* リード文（intro）: 上へ流れてきたカードに重なった分だけ薄くなる（--gb-intro-out-p: 0→1。カード背景が半透明のため） */
.gb-js .gb-about.is-scrub .gb-about__main > .gb-about__intro {
  opacity: calc(1 - var(--gb-intro-out-p, 0));
  transition: opacity var(--gb-scrub-smooth) linear;
}
/* 見出しのラインもスクロール連動（縦: 上→下 --gb-tb-v-p、斜め: 左下→右上 --gb-tb-d-p）。IntersectionObserver の is-inview より優先 */
.gb-js .gb-about.is-scrub .gb-title-box::before {
  transform: scaleY(var(--gb-tb-v-p, 1));
  transition: transform var(--gb-scrub-smooth) linear;
}
.gb-js .gb-about.is-scrub .gb-title-box::after {
  clip-path: inset(0 calc((1 - var(--gb-tb-d-p, 1)) * 100%) 0 0);
  transition: clip-path var(--gb-scrub-smooth) linear;
}

/* ---- 末尾の CTA ボタン（[gb_about_shapes cta="…"] が .gb-about__cta を出力）: ◢ の手前・カード（右カラム）幅の中央に置き、
        インタビューカードのスライダーを見終える（--gb-about-cards-p → 1）につれ下からフェードイン。さらにスクロールすると
        下端に貼り付かず上へ流れて退場する。JS 無効・スマホでは最初から表示 ---- */
.gb-about .gb-about__cta {
  position: sticky;
  bottom: var(--gb-about-cta-bottom);
  z-index: 5;                 /* 本文・カード・◢・写真より前 */
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  padding-left: var(--gb-about-cta-col-inset);   /* 右カラム（カード幅）に中央を合わせる */
  margin: 0 auto;
  pointer-events: none;       /* クリックは中のボタンだけ受ける */
}
.gb-about.gb-about--mirror .gb-about__cta {       /* 反転版はカードが左 → 右インセット */
  padding-left: 0;
  padding-right: var(--gb-about-cta-col-inset);
}
.gb-about .gb-about__cta .wp-block-button { margin: 0; pointer-events: auto; }
/* JS あり: カードの進行度でフェード＋退場（戻せば逆再生）。出きるまではクリック不可 */
.gb-js .gb-about.is-scrub .gb-about__cta {
  opacity: calc((var(--gb-about-cards-p, 1) - var(--gb-about-cta-start)) / var(--gb-about-cta-span));
  transform: translate3d(0, calc(
      (1 - clamp(0, (var(--gb-about-cards-p, 1) - var(--gb-about-cta-start)) / var(--gb-about-cta-span), 1)) * var(--gb-about-cta-rise)
      - max(0px, (var(--gb-about-cards-p, 1) - var(--gb-about-cta-exit)) * var(--gb-about-cta-exit-k))
    ), 0);
  transition: opacity var(--gb-scrub-smooth) linear, transform var(--gb-scrub-smooth) linear;
}
.gb-js .gb-about.is-scrub .gb-about__cta .wp-block-button { pointer-events: none; }
.gb-js .gb-about.is-scrub.is-cta-in .gb-about__cta .wp-block-button { pointer-events: auto; }
@media (max-width: 781px) {
  /* スマホ: 浮かせず、セクション末尾に普通に置く */
  .gb-about .gb-about__cta { position: static; padding-left: 0; padding-right: 0; margin-top: var(--gb-space-6); }
  .gb-about.gb-about--mirror .gb-about__cta { padding-right: 0; }
}

/* INTERVIEW 記事の冒頭（patterns/interview-hero.php）: TOP ABOUT と同じ部品。ボタンが無いので intro の下端に少し余白 */
.gb-about.gb-about--interview .gb-about__intro > :last-child,
.post_content .gb-about.gb-about--interview .gb-about__intro > .wp-block-group__inner-container > :last-child { margin-bottom: var(--gb-space-5); }
/* INTERVIEW 冒頭は背景の◢が無いので、写真を画面下端から少し持ち上げてスライダー下の空白を詰める（tokens: --gb-about-interview-ceo-bottom）。
   カード1枚あたりのスクロール量も冒頭だけ変えられる（--gb-about-interview-step-h。JS はこの値を読む） */
.gb-about.gb-about--interview { --gb-about-step-h: var(--gb-about-interview-step-h); }
.gb-about.gb-about--interview .gb-about__main > .gb-about__ceo,
.post_content .gb-about.gb-about--interview figure.gb-about__ceo { bottom: var(--gb-about-interview-ceo-bottom); }

/* ---- 左右反転（.gb-about--mirror / patterns/top-works-story.php）: 見出し左上・リード右上はそのまま、
        カードを左下（左カラムの位置から、幅は通常版と同じ右カラム幅）、写真はカードの右隣、◢は左右反転、キューブ＋ラインの飾りは右上 ---- */
.gb-about.gb-about--mirror .gb-about__main > .gb-about__ceo,
.post_content .gb-about.gb-about--mirror figure.gb-about__ceo {
  /* カードの右端（右カラム基準で 50% − カラム間隔）から --gb-about-mirror-card-gap だけ右。
     ただし写真の右端が画面右端（右カラム右端 + --gb-about-cols-x）を超えるときはそこで止める */
  margin-left: min(
    calc(50% - var(--gb-about-col-gap) + var(--gb-about-mirror-card-gap)),
    calc(100% + var(--gb-about-cols-x) - var(--gb-about-ceo-w-eff))
  );
  margin-right: 0;
}
.gb-about.gb-about--mirror .gb-about__ceo img,
.post_content .gb-about.gb-about--mirror figure.gb-about__ceo img { clip-path: none; } /* 斜めカットなし */
.gb-about.gb-about--mirror .gb-about__cards,
.post_content .gb-about.gb-about--mirror .wp-block-group.gb-about__cards {
  margin-left: calc(-1 * (50% + var(--gb-about-col-gap)));  /* 左カラムの位置へ移動（右カラム 66.66% の 50% = 左カラム幅） */
  width: 100%;                                               /* 幅は通常版と同じ（右カラム幅）。写真はこの右端 + --gb-about-mirror-card-gap に置く */
}
/* 写真はリード文（右上）の下に収める: 見出し用の予約高さを大きくして写真を小さめに（--gb-about-mirror-reserve で調整） */
.gb-about.gb-about--mirror { --gb-about-title-reserve: var(--gb-about-mirror-reserve); }
.gb-about.gb-about--mirror .gb-about__shapes { transform: scaleX(-1); }   /* ◢を左右反転 */
/* ライン（縦・斜め）: コンテナの右端へ水平移動（sticky の見出しと一緒に固定される）。キューブは見出しの左のまま。
   移動量 = コンテナ幅（100vw − 左右の余白×2）− キューブ幅。ラインは疑似要素の left をずらす（回転の基準はそのまま） */
.gb-about.gb-about--mirror .gb-title-box { --gb-mirror-shift: calc(100vw - 2 * var(--gb-about-cols-x) - var(--gb-title-icon-w)); --gb-tb-dline-len: var(--gb-about-deco-dline-len); }
.gb-about.gb-about--mirror .gb-title-box .gb-title-box__cube,
.post_content .gb-about.gb-about--mirror .gb-title-box .gb-cube.gb-title-box__cube {
  /* キューブは見出しの文字の左に置く（ABOUT / SERVICE と同じ並び）。右端へ動かすのはラインだけ。
     以前はキューブもラインと一緒に右端へ置いていた: position: absolute; top: 0; left: var(--gb-mirror-shift); */
  position: relative;
  top: auto;
  left: auto;
  margin: 0;
}
.gb-about.gb-about--mirror .gb-title-box::before {
  left: calc(var(--gb-tb-vline-x) + var(--gb-mirror-shift));
  top: var(--gb-about-deco-vline-top);
  bottom: var(--gb-about-deco-vline-bottom);
}
.gb-about.gb-about--mirror .gb-title-box::after {
  left: calc(-1 * var(--gb-tb-dline-len) / 3 + var(--gb-mirror-shift));
}
/* リード文（右上）はやや狭く */
.gb-about.gb-about--mirror .gb-about__intro,
.post_content .gb-about.gb-about--mirror .wp-block-group.gb-about__intro { max-width: var(--gb-about-mirror-intro-w); }
@media (max-width: 781px) {
  .gb-about.gb-about--mirror .gb-about__main > .gb-about__ceo,
  .post_content .gb-about.gb-about--mirror figure.gb-about__ceo { margin: 0 0 0 auto; }
  .gb-about.gb-about--mirror .gb-about__cards,
  .post_content .gb-about.gb-about--mirror .wp-block-group.gb-about__cards { margin-left: 0; width: auto; }
  .gb-about.gb-about--mirror .gb-title-box { --gb-mirror-shift: 0px; } /* SPは通常位置 */
  /* キューブを absolute から通常の流れに戻す（そのままだと「WORKS」の文字に重なる）。縦ラインの上下も通常版の長さに */
  .gb-about.gb-about--mirror .gb-title-box .gb-title-box__cube,
  .post_content .gb-about.gb-about--mirror .gb-title-box .gb-cube.gb-title-box__cube { position: relative; top: auto; left: auto; }
  .gb-about.gb-about--mirror .gb-title-box::before { left: var(--gb-tb-vline-x); top: var(--gb-tb-vline-top); bottom: var(--gb-tb-vline-bottom); }
}

/* 写真の大きさ違い（セクションのグループに追加CSSクラス）: 顔の大きさが揃うように、画像の寄りに応じて選ぶ
   gb-about--photo-sm: 寄りの写真（顔が大きい）向けに小さめ / gb-about--photo-lg: 引きの写真向けに大きめ */
.gb-about.gb-about--photo-sm {
  --gb-about-ceo-w: clamp(220px, 24vw, 460px);
  --gb-about-title-reserve: 300px;
}
.gb-about.gb-about--photo-lg {
  --gb-about-ceo-w: clamp(300px, 33vw, 640px);
  --gb-about-title-reserve: 200px;
}

/* ---- 縦積み（782px未満）: sticky を解除、写真は最後に通常配置 ---- */
@media (max-width: 781px) {
  .gb-about .gb-about__side.wp-block-column { padding-bottom: 0; }
  .gb-about .gb-about__side .gb-title-box { position: relative; top: auto; } /* static だとラインの基準がカラムになる */
  .gb-title-box::after { content: none; } /* 斜めラインは省略 */
  .gb-about .gb-about__intro,
  .post_content .gb-about .wp-block-group.gb-about__intro { position: relative; top: auto; }
  .gb-about .gb-about__main > .gb-about__ceo,
  .post_content .gb-about figure.gb-about__ceo {
    position: relative;
    z-index: 2;
    width: var(--gb-about-ceo-w-sp);
    margin: var(--gb-space-8) auto 0;
  }
  .gb-about .gb-about__ceo figcaption,
  .post_content .gb-about figure.gb-about__ceo figcaption {
    position: static;
    transform: none;
    margin-top: var(--gb-space-3);
    text-align: center;
  }
  /* ◢ は写真・キャプションの下に、自分の高さぶんの帯として置く（高さ 0 のままだと上に伸びてキャプションに重なる） */
  .gb-about .gb-about__shapes { position: relative; height: var(--gb-about-shape-dark-h); margin-top: var(--gb-space-5); }
}
/* 画面がかなり低いとき（600px未満）だけ intro を固定しない（カードが収まらないため）。
   ※ 800px 未満で切っていたが、ノートPC＋ブラウザUIで 740px 程度になり固定されない → 600px に引き下げ */
@media (min-width: 782px) and (max-height: 599px) {
  .gb-about .gb-about__intro,
  .post_content .gb-about .wp-block-group.gb-about__intro { position: relative; top: auto; }
}

/* =========================================================
   KV 背景のアイソメトリック・キューブ（.gb-kv-cubes）— [gb_kv_cubes] / inc/gootbox-kv-cubes.php / assets/js/gb-kv-cubes.js
   KV のブロック（追加CSSクラス gb-kv）の中に置くと、背景として絶対配置される（中身より後ろ）。
   JS あり: 中央のキューブ → 左右の面が開く → 中心からパターンが折り込まれて広がる。JS なしは完成形のまま。
   ========================================================= */
.gb-kv,
.post_content .gb-kv,
.gb-kv > .wp-block-group__inner-container,
.gb-kv > .wp-block-cover__inner-container { position: relative; }
.gb-kv > *:not(.gb-kv-cubes),
.gb-kv > .wp-block-group__inner-container > *:not(.gb-kv-cubes),
.gb-kv > .wp-block-cover__inner-container > *:not(.gb-kv-cubes) { position: relative; z-index: 1; }
.gb-kv-cubes,
.post_content .gb-kv-cubes {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
/* SWELL のメインビジュアル（.p-mainVisual）に JS が差し込んだとき: 画像レイヤーの上・文字と Scroll ボタンの下。
   JS ありでは MV の画像を隠す（キューブが同じ模様を描く。JS なしは画像のまま） */
.p-mainVisual .gb-kv-cubes { z-index: 1; }
.p-mainVisual.has-gb-kv-cubes .p-mainVisual__textLayer { position: relative; z-index: 2; }
.p-mainVisual.has-gb-kv-cubes .p-mainVisual__scroll { z-index: 2; }
.gb-js .p-mainVisual.has-gb-kv-cubes .p-mainVisual__imgLayer img,
.gb-js .p-mainVisual.has-gb-kv-cubes .p-mainVisual__imgLayer picture { visibility: hidden; }
.gb-js .p-mainVisual.has-gb-kv-cubes .p-mainVisual__imgLayer { background: transparent; } /* Aurora（.gb-aurora）を透かす */
.gb-js .p-mainVisual.has-gb-kv-cubes .p-mainVisual__inner,
.gb-js .p-mainVisual.has-gb-kv-cubes .p-mainVisual__slide { background: transparent; }
/* .gb-aurora > * の position: relative が Scroll ボタン（SWELL では絶対配置）を行内に落とさないように戻す */
:root .p-mainVisual.gb-aurora > .p-mainVisual__scroll { position: absolute; }
/* PC: 「Scroll」を画面の下端から離し、右下の質問ボックス（.gb-ask--mv）の下端と同じ高さにそろえる（SP は質問ボックスが横いっぱいなので今までどおり） */
@media (min-width: 960px) {
  :root #body_wrap .p-mainVisual .p-mainVisual__scroll { bottom: var(--gb-kv-scroll-bottom); }
  /* PC: FV の文字のかたまりを、ヘッダーのロゴと同じ基準にそろえる。
     SWELL は .l-container（margin-left: auto）を left: 50% + translateX(-50%) で置くため、
     画面が広いほど文字が右（中央寄り）へ流れていた。ずれ幅は --gb-kv-text-indent で固定する
     （1440px 以下では今までと同じ位置。上下の位置はカスタマイザーの「追加CSS」の top: 25% のまま） */
  :root #body_wrap .p-mainVisual .p-mainVisual__textLayer {
    /* 左右: 左端をヘッダーのロゴの左端に（gb-ask.js の alignEdges() が .p-mainVisual に --gb-kv-edge-left を入れる。
       JS が無いときは、ロゴの左端の見込み = max(--gb-kv-text-indent, (画面幅 − 記事幅) / 2）。
       SWELL の left: 50% + translateX(-50%) + width: 90% はやめて、左端基準にする */
    position: absolute;
    left: var(--gb-kv-edge-left, max(var(--gb-kv-text-indent), (100vw - (var(--container_size, 1200px) + var(--swl-pad_container, 48px) * 2)) / 2));
    width: auto;
    max-width: calc(100% - var(--gb-kv-edge-left, var(--gb-kv-text-indent)) * 2);
    /* 上下: 画面の下から --gb-kv-text-bottom に下揃え（2026-10-23 モック。CONTACT US ボタンの下端 = Scroll の下端 = 右下の丸の下端）。
       カスタマイザーの top: 25% は効かない */
    top: auto;
    bottom: var(--gb-kv-text-bottom);
    height: auto;
    padding: 0;        /* SWELL の .l-container の左右 48px を外す（層の左端 = 文字の左端 = ロゴの左端） */
    transform: none;
  }
}
/* FV の見出し（真摯に「つくる」会社。）の前に黄色いドット。生き物の呼吸のように、大きさがわずかにゆらぐ（<html>.gb-js のときだけ動く）。
   SP は見出しの行頭に並べ、PC は文字の左外にぶら下げる（文字の左端は動かさない）。値は tokens.css の --gb-kv-dot-* */
:root #body_wrap .p-mainVisual .p-mainVisual__slideTitle { position: relative; }
:root #body_wrap .p-mainVisual .p-mainVisual__slideTitle::before {
  content: "";
  display: inline-block;
  width: var(--gb-kv-dot-size);
  height: var(--gb-kv-dot-size);
  margin-right: var(--gb-kv-dot-gap);
  border-radius: 50%;
  background-color: var(--gb-kv-dot-color);
  vertical-align: 0.12em;
}
.gb-js #body_wrap .p-mainVisual .p-mainVisual__slideTitle::before {
  animation: gb-kv-dot-breathe var(--gb-kv-dot-dur) ease-in-out infinite;
}
@media (min-width: 960px) {
  :root #body_wrap .p-mainVisual .p-mainVisual__slideTitle::before {
    position: absolute;
    left: var(--gb-kv-band-pad-x);   /* 帯の内側（2026-10-23。以前は right: 100% で文字の左外） */
    top: 50%;
    margin: calc(var(--gb-kv-dot-size) / -2) 0 0 0;
  }
}
/* 一定のリズムにしない（ふくらむ → 少ししぼむ → もう一度小さくふくらむ） */
@keyframes gb-kv-dot-breathe {
  0%   { transform: scale(1); }
  28%  { transform: scale(calc(1 + var(--gb-kv-dot-amp))); }
  47%  { transform: scale(calc(1 - var(--gb-kv-dot-amp) * 0.35)); }
  68%  { transform: scale(calc(1 + var(--gb-kv-dot-amp) * 0.6)); }
  86%  { transform: scale(calc(1 - var(--gb-kv-dot-amp) * 0.15)); }
  100% { transform: scale(1); }
}
/* 同じ理由で、しずく（.gb-kv-drop）も絶対配置に戻す（relative のままだと位置がずれて、落ちる処理が毎回中止されていた） */
:root .p-mainVisual.gb-aurora > .gb-kv-drop { position: absolute; }
.gb-kv-cubes__svg { display: block; width: 100%; height: 100%; }
/* しずく（点＋線）: ループの直前に、中央あたりから「Scroll」へ落ちて視線を下へ誘う（assets/js/gb-kv-cubes.js の drop()）。
   色は Scroll の文字色（JS が入れる）。値は tokens.css の --gb-kvc-drop-*。外すときは --gb-kvc-drop: 0 */
.gb-kv-drop {
  position: absolute;
  left: 50%;
  top: var(--gb-kvc-drop-from);
  z-index: 2;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.gb-kv-drop::before { /* 線（しずくの尾。上へ向かって薄くなる） */
  content: "";
  position: absolute;
  left: calc(var(--gb-kvc-drop-line-w) / -2);
  bottom: 0;
  width: var(--gb-kvc-drop-line-w);
  height: var(--gb-kvc-drop-tail);
  background: linear-gradient(to top, currentColor, transparent);
  transform-origin: 50% 100%;
}
.gb-kv-drop::after { /* 点 */
  content: "";
  position: absolute;
  left: calc(var(--gb-kvc-drop-dot) / -2);
  top: calc(var(--gb-kvc-drop-dot) / -2);
  width: var(--gb-kvc-drop-dot);
  height: var(--gb-kvc-drop-dot);
  border-radius: 50%;
  background: currentColor;
}
.gb-js .gb-kv-drop.is-fall { animation: gb-kv-drop var(--gb-kvc-drop-dur) cubic-bezier(0.55, 0, 0.85, 0.45) both; }
.gb-js .gb-kv-drop.is-fall::before { animation: gb-kv-drop-tail var(--gb-kvc-drop-dur) ease-in both; }
@keyframes gb-kv-drop {
  0%   { opacity: 0; transform: translateY(0); }
  18%  { opacity: var(--gb-kvc-drop-opacity); }
  88%  { opacity: var(--gb-kvc-drop-opacity); }
  100% { opacity: 0; transform: translateY(var(--gb-kv-drop-dist, 200px)); }
}
@keyframes gb-kv-drop-tail {
  0%   { transform: scaleY(0.15); }
  70%  { transform: scaleY(1); }
  100% { transform: scaleY(0.3); }
}
/* しずくが着いたとき、Scroll が小さく弾む（translate を使う: SWELL の位置決め用 transform を壊さない） */
.gb-js .p-mainVisual__scroll.is-gb-drop-hit { animation: gb-kv-drop-hit 0.7s var(--gb-ease-out) both; }
@keyframes gb-kv-drop-hit {
  0%   { translate: 0 0; }
  35%  { translate: 0 var(--gb-kvc-drop-hit); }
  100% { translate: 0 0; }
}
.gb-kv-cubes__pattern { opacity: var(--gb-kvc-opacity, 0.233); }
.gb-kvc__tone-1 { fill: var(--gb-kvc-tone-1); }
.gb-kvc__tone-2 { fill: var(--gb-kvc-tone-2); }
.gb-kvc__tone-3 { fill: var(--gb-kvc-tone-3); }
.gb-kvc__tone-4 { fill: var(--gb-kvc-tone-4); }
/* 最初のキューブは JS で出すまで隠す（JS なしでは出ない = 完成形だけ） */
.gb-kv-cubes__hero { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.gb-js .gb-kv-cubes.is-hero .gb-kv-cubes__hero {
  opacity: 1;
  transition: opacity 0.25s var(--gb-ease-out);
  animation: gb-kvc-hero-in var(--gb-kvc-hero-in) var(--gb-ease-pop) both;  /* 大きさだけ（不透明度は transition で扱う） */
}
/* 展開図になったところでゆっくり消える（不透明度は animation で持たず、常に transition で動かす＝途中から急に消えない） */
.gb-js .gb-kv-cubes.is-hero-out .gb-kv-cubes__hero { opacity: 0; transition: opacity var(--gb-kvc-hero-fade) var(--gb-ease-out); }
/* 「g」: フタが開くと箱からひょこっと出て（.is-lid）、左右の面が開き始めたら少し上へ動きながら消える（.is-unfold）。
   px は g のパス座標（[gb_gbox] と同じ。箱に合わせて拡大される）。値は tokens.css の --gb-kvc-g-* */
.gb-kvc__g {
  fill: var(--gb-kvc-g-fill);
  opacity: 0;
  transform-origin: 62px 87px; /* g の足元（パス座標）。ここを基準に --gb-kvc-g-scale で縮める */
  transform: translateY(var(--gb-kvc-g-drop)) scale(var(--gb-kvc-g-scale));
}
.gb-js .gb-kv-cubes.is-lid .gb-kvc__g {
  opacity: 1;
  transform: scale(var(--gb-kvc-g-scale));
  transition: transform var(--gb-kvc-g-in) var(--gb-ease-pop) var(--gb-kvc-g-delay), opacity 0.15s linear var(--gb-kvc-g-delay);
}
.gb-js .gb-kv-cubes.is-unfold .gb-kvc__g {
  opacity: 0;
  transform: translateY(calc(-1 * var(--gb-kvc-g-rise))) scale(var(--gb-kvc-g-scale));
  transition: transform var(--gb-kvc-g-out) var(--gb-ease-out), opacity var(--gb-kvc-g-out) var(--gb-ease-out);
}
/* 最初のキューブの薄さは面ごとに掛ける（グループに掛けると g まで薄くなって黒にならない）。
   g は面の後ろにあるので、面が半透明でも透けて見えないよう SVG 側で箱の口より上だけに切り抜いてある（clipPath） */
.gb-kvc__hero-face { opacity: var(--gb-kvc-hero-opacity); }
/* 上フタが開くと裏面（明るい色）が見える */
.gb-kvc__hero-face--top { transition: fill 0.45s var(--gb-ease-out); }
.gb-kv-cubes.is-lid .gb-kvc__hero-face--top { fill: var(--gb-kvc-tone-3); }
@keyframes gb-kvc-hero-in {
  from { transform: scale(0.4); }
  to   { transform: scale(1); }
}
/* パターンの面: JS ありでは折りたたんだ状態（面の向きごとに折り目側を支点に潰す）から、順番に開いて現れる */
.gb-js .gb-kv-cubes .gb-kvc__face {
  opacity: 0;
  transform-box: fill-box;
}
.gb-js .gb-kv-cubes .gb-kvc__face--top   { transform-origin: 50% 0;   transform: scaleY(0.05); }  /* 蓋が閉じるように上の頂点から */
.gb-js .gb-kv-cubes .gb-kvc__face--left  { transform-origin: 100% 50%; transform: scaleX(0.05); } /* 右の辺（折り目）から */
.gb-js .gb-kv-cubes .gb-kvc__face--right { transform-origin: 0 50%;   transform: scaleX(0.05); } /* 左の辺（折り目）から */
.gb-js .gb-kv-cubes.is-expand .gb-kvc__face {
  animation: gb-kvc-face-in var(--gb-kvc-face-dur) var(--gb-ease-out) both;
  animation-delay: calc(var(--gb-kvc-i, 0) * var(--gb-kvc-step));
}
@keyframes gb-kvc-face-in {
  from { opacity: 0; }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
.gb-js .gb-kv-cubes.is-done .gb-kvc__face { animation: none; opacity: 1; transform: none; }
/* ループ: 完成形を見せたあと、パターン全体をフェードアウトして最初へ（JS が is-out → クラスを外して再生） */
.gb-js .gb-kv-cubes.is-out .gb-kvc__face { opacity: 0; transition: opacity var(--gb-kvc-loop-fade) var(--gb-ease-out); }
@media (prefers-reduced-motion: reduce) {
  .gb-kv-cubes__hero { display: none; }
  .gb-js .gb-kv-cubes .gb-kvc__face { opacity: 1; transform: none; animation: none; }
}

/* =========================================================
   動画ブロックの上端トリミング（.gb-video-trim）
   動画の上端に出る細い線（1px程度）を隠す。動画ブロックの「追加CSSクラス」に gb-video-trim を足す。
   枠で切り取り（overflow:hidden）、動画を上へ --gb-video-trim-top（既定4px）ぶんずらす。下に隙間はできない（枠がそのぶん短くなるだけ）。
   線が消えないときは数値を上げる（custom.css でこの変数を大きく、または動画ブロックのインラインstyleに --gb-video-trim-top:3px）。
   ========================================================= */
.gb-video-trim { overflow: hidden; }
.gb-video-trim video,
.gb-video-trim img {
  display: block;
  width: 100%;
  margin-top: calc(-1 * var(--gb-video-trim-top, 4px));
}

/* =========================================================
   スムーススクロール（Lenis）— assets/js/vendor/lenis.min.js + assets/js/gb-smooth-scroll.js
   .lenis / .lenis-smooth / .lenis-scrolling / .lenis-stopped は Lenis が <html> に付ける。
   下の4ブロックは Lenis 公式 lenis.css（v1.3.26）と同じ内容（テーマに同梱、別ファイルは読まない）
   ========================================================= */
html.lenis,
html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }  /* 中で独立してスクロールさせたい要素に付ける */
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }
/* 公式は iframe を常に pointer-events:none にする（iframe がホイールを奪うため）が、それだと YouTube の再生ボタン等が
   押せなくなるので、スクロール中（.lenis-scrolling）だけ透過させる */
.lenis.lenis-scrolling iframe { pointer-events: none; }
/* テーマ側の scroll-behavior: smooth と二重に補間してカクつかないように（Lenis が動いているときだけ） */
html.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* =========================================================
   SWELL フルワイドブロック（コンテンツ幅 = フル幅）の中の「幅広」ブロック
   SWELL は、内側（.swell-block-fullWide__inner）に l-container / l-article が付かない「フル幅」設定のフルワイドの中に
   幅広（alignwide）ブロックを置くと、PC で左右 100px ずつ画面の外へはみ出させる
   （TOP の黒帯「We are STRATEGY / and EXECUTION partner.」の右側が切れていた）。内側がすでにフル幅なので、幅広は内側と同じ幅にする。
   縦積み（781px 以下）では、文字だけのカラムに左右の余白を付ける（動画・画像のカラムは画面の端まで）
   ========================================================= */
.swell-block-fullWide__inner:not(.l-container):not(.l-article) > .alignwide { left: 0; width: 100%; }
@media (max-width: 781px) {
  .swell-block-fullWide__inner:not(.l-container):not(.l-article) > .wp-block-columns > .wp-block-column:has(> p, > h2, > h3, > ul, > .wp-block-buttons) {
    box-sizing: border-box;
    padding-left: var(--gb-gutter);
    padding-right: var(--gb-gutter);
  }
}

/* =========================================================
   お問い合わせフォーム（Contact Form 7）— /contact/ と確認ページ
   旧サイトから持ってきた table 形式のフォーム HTML（th = 項目名 / td = 入力欄）を、HTML はそのままで整える。
   旧サイトのクラス（.required .forPC .forSP .margin-l60 .pb-0 .pt-8-pc .pt-10-sp .cmn-button）もここで面倒を見る。
   PC: 項目名 | 入力欄 の2列。SP（599px 以下）: 項目名の下に入力欄（縦積み）。寸法は tokens.css の --gb-form-*
   ========================================================= */
.post_content .wpcf7-form table {
  width: 100%;
  margin: 0 0 var(--gb-space-6);
  border: 0;
  border-collapse: collapse;
  table-layout: auto;
}
.post_content .wpcf7-form tr { border-bottom: var(--gb-border) solid var(--gb-color-line); }
.post_content .wpcf7-form th,
.post_content .wpcf7-form td {
  padding: var(--gb-form-row-pad-y) var(--gb-space-3);
  border: 0;
  background: none;
  vertical-align: top;
  text-align: left;
  font-size: var(--gb-fs-base);
  line-height: var(--gb-lh-relaxed);
}
.post_content .wpcf7-form th {
  width: var(--gb-form-label-w);
  padding-left: 0;
  font-weight: var(--gb-fw-medium);
  white-space: nowrap;
}
.post_content .wpcf7-form td { padding-right: 0; }
.post_content .wpcf7-form th p,
.post_content .wpcf7-form td p { margin: 0; }
.post_content .wpcf7-form td p + p {              /* 入力欄の下の補足（文字数カウンタなど） */
  margin-top: var(--gb-space-2);
  font-size: var(--gb-fs-sm);
  color: var(--gb-color-text-muted);
}
/* 「問合わせ内容」（ラジオ）と、その下の自由記入欄は1つの項目として見せる（.pb-0 の行 → .pt-8-pc の行） */
.post_content .wpcf7-form tr.pb-0 { border-bottom: 0; }
.post_content .wpcf7-form th.pb-0,
.post_content .wpcf7-form td.pb-0 { padding-bottom: 0; }
.post_content .wpcf7-form th.pt-8-pc,
.post_content .wpcf7-form td.pt-8-pc { padding-top: var(--gb-space-3); }
.wpcf7-form .your-message > br { display: none; }  /* textarea の前に入っている <br>（空行になる） */

/* 「必須」バッジ。旧サイトと同じく PC は項目名の前（.forPC）、SP は後ろ（.forSP）に出す */
.wpcf7-form .required {
  display: inline-block;
  box-sizing: border-box;
  min-width: var(--gb-form-badge-w);
  margin-right: var(--gb-space-2);
  padding: 0.1em 0.5em;
  border-radius: var(--gb-radius-sm);
  background: var(--gb-color-text);
  color: var(--gb-color-text-inverse);
  font-size: var(--gb-fs-xs);
  font-weight: var(--gb-fw-medium);
  line-height: var(--gb-lh-loose);
  letter-spacing: 0;
  text-align: center;
  vertical-align: middle;
}
.wpcf7-form .forSP { display: none; }
.wpcf7-form .margin-l60 { margin-left: calc(var(--gb-form-badge-w) + var(--gb-space-2)); } /* 任意項目は「必須」の幅ぶん下げて頭を揃える */

/* 入力欄 */
.wpcf7-form .wpcf7-form-control-wrap { display: block; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea,
.wpcf7-form select {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--gb-form-field-max-w);
  margin: 0;
  padding: var(--gb-form-field-pad);
  border: var(--gb-border) solid var(--gb-color-line);
  border-radius: var(--gb-radius-sm);
  background: var(--gb-form-field-bg);
  color: var(--gb-color-text);
  font-family: inherit;
  font-size: var(--gb-form-field-fs);
  line-height: var(--gb-lh-loose);
  box-shadow: none;
  -webkit-appearance: none;
          appearance: none;
}
.wpcf7-form textarea {
  max-width: none;
  min-height: var(--gb-form-textarea-h);
  resize: vertical;
}
.wpcf7-form input:focus-visible,
.wpcf7-form textarea:focus-visible,
.wpcf7-form select:focus-visible {
  border-color: var(--gb-color-accent);
  outline: var(--gb-border) solid var(--gb-color-accent);
  outline-offset: 0;
}
.wpcf7-form .wpcf7-not-valid-tip {                  /* 未入力などのエラー文（色は CF7 のまま） */
  margin-top: var(--gb-space-1);
  font-size: var(--gb-fs-sm);
}

/* ラジオ・チェックボックス */
.wpcf7-form .wpcf7-list-item {
  display: inline-block;
  margin: 0 var(--gb-space-5) var(--gb-space-2) 0;
}
.wpcf7-form .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: var(--gb-space-2);
  cursor: pointer;
}
.wpcf7-form input[type="radio"],
.wpcf7-form input[type="checkbox"] {
  flex: none;
  width: var(--gb-form-check-size);
  height: var(--gb-form-check-size);
  margin: 0;
  accent-color: var(--gb-color-accent);
}

/* 同意・送信ボタン */
.post_content .wpcf7-form .privacy { margin: var(--gb-space-5) 0 0; text-align: center; }
.post_content .wpcf7-form .privacy p { margin: 0; }
.post_content .wpcf7-form .privacy .wpcf7-list-item { margin: 0; }
.post_content .wpcf7-form .privacy a { text-decoration: underline; }
.post_content .wpcf7-form .buttons { margin: var(--gb-space-5) 0 0; text-align: center; }
.post_content .wpcf7-form .buttons p {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.post_content .wpcf7-form .buttons p { position: relative; }
.post_content .wpcf7-form .buttons .wpcf7-spinner {   /* CF7 の送信中スピナー（margin 0 24px で横に並ぶ）がボタンを左へずらしていたので、ボタンの右端の内側に重ねる */
  position: absolute;
  top: 50%;
  right: var(--gb-btn-pad-x);
  margin: 0;
  transform: translateY(-50%);
  background-color: var(--gb-color-text-inverse);
}
.wpcf7-form .wpcf7-submit {
  display: inline-block;
  box-sizing: border-box;
  min-width: var(--gb-form-submit-w);
  height: var(--gb-form-submit-h);
  margin: 0;
  padding: 0 var(--gb-btn-pad-x);
  border: var(--gb-border) solid var(--gb-color-accent);
  border-radius: var(--gb-radius-pill);
  background: var(--gb-color-accent);
  color: var(--gb-color-text-inverse);
  font-family: var(--gb-font-base);
  font-size: var(--gb-fs-sm);
  font-weight: var(--gb-fw-bold);
  letter-spacing: var(--gb-tracking-body);
  line-height: var(--gb-lh-none);
  cursor: pointer;
  box-shadow: none;
  -webkit-appearance: none;
          appearance: none;
  transition: background-color var(--gb-duration) var(--gb-ease-out), color var(--gb-duration) var(--gb-ease-out), opacity var(--gb-duration) var(--gb-ease-out);
}
.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form .wpcf7-submit:focus-visible {
  background: var(--gb-color-bg);
  color: var(--gb-color-text);
}
.wpcf7-form .wpcf7-submit:disabled {                /* プライバシーポリシーに同意するまで CF7 が disabled にする */
  opacity: 0.35;
  cursor: not-allowed;
}
.wpcf7-form .wpcf7-submit:disabled:hover {
  background: var(--gb-color-accent);
  color: var(--gb-color-text-inverse);
}

/* SP: 項目名の下に入力欄 */
@media (max-width: 599px) {
  .post_content .wpcf7-form table,
  .post_content .wpcf7-form tbody,
  .post_content .wpcf7-form tr,
  .post_content .wpcf7-form th,
  .post_content .wpcf7-form td {
    display: block;
    box-sizing: border-box;
    width: 100%;
  }
  .post_content .wpcf7-form tr { padding: var(--gb-form-row-pad-y) 0; }
  .post_content .wpcf7-form th { padding: 0 0 var(--gb-space-2); white-space: normal; }
  .post_content .wpcf7-form td { padding: 0; }
  .post_content .wpcf7-form tr.pb-0 { padding-bottom: 0; }
  .post_content .wpcf7-form th.pb-0,
  .post_content .wpcf7-form td.pb-0,
  .post_content .wpcf7-form td.pt-8-pc { padding-top: 0; padding-bottom: 0; }
  .post_content .wpcf7-form tr.pt-8-pc { padding-top: var(--gb-space-3); }
  .post_content .wpcf7-form th.pt-8-pc { display: none; }   /* 自由記入欄の行の空の項目名 */
  .wpcf7-form .forPC { display: none; }
  .wpcf7-form .forSP { display: inline-block; margin: 0 0 0 var(--gb-space-2); }
  .wpcf7-form .margin-l60 { margin-left: 0; }
  .wpcf7-form input[type="text"],
  .wpcf7-form input[type="email"],
  .wpcf7-form input[type="tel"],
  .wpcf7-form input[type="url"],
  .wpcf7-form input[type="number"],
  .wpcf7-form select { max-width: none; }
  .wpcf7-form .wpcf7-list-item { display: block; margin: 0 0 var(--gb-space-2); }
  .post_content .wpcf7-form .privacy .wpcf7-list-item { display: inline-block; }
  .post_content .wpcf7-form .buttons p { display: flex; }
}

/* =========================================================
   フッターの Contact スライダー（Smart Slider 3 のウィジェット）の SP 調整
   文字が折り返す幅（およそ 500px 以下）では、下中央のロゴ画像がボタンに重なるので、SP ではロゴのレイヤーを出さない。
   ※ 恒久対応は Smart Slider 3 の編集画面（スマホ表示でロゴの位置を変える／スマホでは非表示にする）。それをしたらこの塊は消してよい
   ========================================================= */
@media (max-width: 599px) {
  .l-footer .n2-ss-slider .n2-ss-layer:has(> .n2-ss-item-image-content > img[src*="logo"]) { display: none !important; }
}


/* =========================================================
   SERVICE 概念図（.gb-svc）— [gb_service_diagram] / inc/gootbox-service-diagram.php / patterns/top-service-diagram.php
   TOP の SERVICE と WORKS の間。INPUT → STRATEGY × EXECUTION（＋CREATIVE）→ OUTPUT を EXPERIENCE / With AI が支える bento。
   動き（assets/js/gb-service-diagram.js）は <html>.gb-js のときだけ。初期状態の透明化も .gb-js 配下だけに書く（JS 無効なら最初から全部見える）。
   値は tokens.css の --gb-svc-*。
   ========================================================= */
.post_content .wp-block-group.gb-svc-section { padding-block: var(--gb-svc-my); }
/* 幅: alignfull グループの中は SWELL/WP の「記事幅（content-size）」に絞られるので、親の幅に関係なく --gb-svc-max-w（既定: サイト幅 --gb-container）で描く。
   親（記事幅）より広くなるぶんは負のマージンで左右にはみ出させて中央に置く（親は画面中央にあるので図も中央に来る）。左右は --gb-gutter を残す */
.post_content .wp-block-group.gb-svc-section > .gb-svc,
.gb-svc {
  --gb-svc-w: min(var(--gb-svc-max-w), 100vw - var(--gb-gutter) * 2);
  position: relative;
  margin-top: var(--gb-svc-mt);   /* 上の要素（企業ロゴの帯）とロゴのフキダシが重ならないように下げる（2026-10-23） */
  width: var(--gb-svc-w);
  max-width: none;
  margin-inline: calc(50% - var(--gb-svc-w) / 2);
  padding-top: calc(var(--gb-svc-logo-h) * (1 - var(--gb-svc-logo-overlap)));
  font-family: var(--gb-font-base);
  color: var(--gb-svc-ink);
  line-height: var(--gb-lh-tight);
}
.gb-svc *, .gb-svc *::before, .gb-svc *::after { box-sizing: border-box; }
.gb-svc ul, .gb-svc li, .gb-svc p, .gb-svc h3 { margin: 0; padding: 0; list-style: none; }
/* SWELL の本文 h3 装飾（下線・左の帯・背景）を図の見出しには効かせない */
.post_content .gb-svc h3.gb-svc__h,
body .post_content .gb-svc h3.gb-svc__h { border: 0; background: none; box-shadow: none; padding-inline: 0; margin: 0; font-weight: var(--gb-fw-bold); }
.post_content .gb-svc h3.gb-svc__h::before, .post_content .gb-svc h3.gb-svc__h::after { content: none; }
.post_content .gb-svc .gb-svc__step h3.gb-svc__h::after { content: none; }

/* ---- grid ---- */
.gb-svc__grid {
  display: grid;
  gap: var(--gb-svc-gap);
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2.1fr) minmax(220px, 1fr);
  grid-template-areas: "in flow out" "in cre out" "base base base";
}
.gb-svc__in   { grid-area: in; }
.gb-svc__out  { grid-area: out; }
.gb-svc__flow { grid-area: flow; }
.gb-svc__cre  { grid-area: cre; }
.gb-svc__base { grid-area: base; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gb-svc-gap); }

/* ---- tiles ---- */
.gb-svc__box { position: relative; border: var(--gb-svc-bw) solid var(--gb-svc-ink); background: var(--gb-svc-paper); }
.gb-svc__box--yellow { background: var(--gb-svc-yellow); }
.gb-svc__box--ink    { background: var(--gb-svc-ink); color: var(--gb-color-text-inverse); }
.gb-svc__box--grey   { background: var(--gb-svc-grey); }

.gb-svc__h { font-family: var(--gb-font-heading); font-weight: var(--gb-fw-bold); letter-spacing: 0.02em; line-height: var(--gb-lh-none); }
.gb-svc__in .gb-svc__h, .gb-svc__out .gb-svc__h { font-size: var(--gb-svc-h-fs); text-align: center; padding-top: var(--gb-svc-pad); }
.gb-svc__sub { font-family: var(--gb-font-heading); font-weight: var(--gb-fw-bold); font-size: var(--gb-svc-sub-fs); text-align: center; line-height: 1.25; margin-top: var(--gb-space-2); }
.gb-svc__sub b { display: block; }
.gb-svc__in, .gb-svc__out { display: flex; flex-direction: column; }
/* 見出しから少し間を空け、残りの高さの中で上下中央。項目は左揃えのまま、かたまりを左右中央に */
.gb-svc .gb-svc__list { width: max-content; max-width: 100%; margin: var(--gb-space-7) auto auto; padding: 0 var(--gb-svc-pad) var(--gb-svc-pad); display: grid; gap: var(--gb-svc-list-gap); } /* .gb-svc ul のリセットより詳細度を上げる */
.gb-svc__list li { font-size: var(--gb-svc-list-fs); line-height: 1.35; }
.gb-svc__list li.gb-svc__li--s { font-size: var(--gb-svc-list-fs-s); }

/* 中央: STRATEGY × EXECUTION（上にロゴが半分乗る） */
.gb-svc__flow { padding: calc(var(--gb-svc-logo-h) * var(--gb-svc-logo-overlap) + var(--gb-space-3)) var(--gb-svc-pad) var(--gb-svc-pad); display: grid; gap: var(--gb-space-3); min-height: var(--gb-svc-flow-minh); align-content: end; }
/* 「戦略も、」「実装も。」は、下の STRATEGY / EXECUTION とそれぞれ中央をそろえる（下の行と同じ列の組み方にする） */
.gb-svc__sides { display: grid; grid-template-columns: var(--gb-svc-arrow) 1fr var(--gb-svc-x-w) 1fr var(--gb-svc-arrow); gap: var(--gb-space-2); font-size: var(--gb-svc-side-fs); color: var(--gb-svc-muted-on-dark); text-align: center; }
.gb-svc__sides > .gb-svc__side:nth-child(1) { grid-column: 2; }
.gb-svc__sides > .gb-svc__side:nth-child(2) { grid-column: 4; }
.gb-svc__steps { display: grid; grid-template-columns: var(--gb-svc-arrow) 1fr var(--gb-svc-x-w) 1fr var(--gb-svc-arrow); align-items: center; gap: var(--gb-space-2); }
.gb-svc__steps > .gb-svc__x { text-align: center; }
.gb-svc__arrow { width: var(--gb-svc-arrow); height: var(--gb-svc-arrow); }
.gb-svc__arrow svg { width: 100%; height: 100%; display: block; }
.gb-svc__arrow--in  { color: var(--gb-svc-blue); }
.gb-svc__arrow--out { color: var(--gb-svc-magenta); }
.gb-svc__step { text-align: center; }
.gb-svc__step .gb-svc__h { font-size: var(--gb-svc-step-fs); color: var(--gb-color-text-inverse); display: inline-block; padding-bottom: var(--gb-space-2); position: relative; }
.gb-svc__ul { position: absolute; left: 0; right: 0; bottom: var(--gb-space-1); height: var(--gb-svc-ul-h); background: var(--gb-svc-blue); transform-origin: left; }
.gb-svc__step--exe .gb-svc__ul { background: var(--gb-svc-magenta); }
.gb-svc__step small { display: block; font-size: var(--gb-svc-note-fs); color: var(--gb-color-text-inverse); margin-top: var(--gb-space-1); }
.gb-svc__x { font-family: var(--gb-font-heading); font-weight: var(--gb-fw-bold); font-size: var(--gb-svc-x-fs); color: var(--gb-color-text-inverse); }

/* CREATIVE / 土台 */
.gb-svc__cre { padding: var(--gb-svc-pad); text-align: center; }
.gb-svc__cre .gb-svc__h { font-size: var(--gb-svc-cre-fs); }
.gb-svc__cre p { font-size: var(--gb-svc-list-fs); font-weight: var(--gb-fw-bold); margin-top: var(--gb-space-2); }
.gb-svc__base .gb-svc__box { padding: var(--gb-space-7) var(--gb-svc-pad); text-align: center; min-height: var(--gb-svc-base-minh); display: grid; place-content: center; gap: var(--gb-space-3); }
.gb-svc__base .gb-svc__h { font-size: var(--gb-svc-h-fs); }
.gb-svc__base p { font-size: var(--gb-text-fs); }

/* ---- ロゴ（専用 SVG gb_svc_logo_svg()）: 絶対配置。JS が中央 → 黒パネルの上端へ動かす。JS 無効時は最初から上端に置く ---- */
.gb-svc__logo {
  position: absolute; left: 50%; top: 0; z-index: 3;
  width: var(--gb-svc-logo-w); height: var(--gb-svc-logo-h);
  margin-left: calc(var(--gb-svc-logo-w) / -2);   /* JS はここを原点に translate で動かす */
  pointer-events: none;
}
.gb-svc__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.gb-svc__lid     { fill: var(--gb-gbox-lid); }
.gb-svc__face--r { fill: var(--gb-gbox-face-r); }
.gb-svc__face--l { fill: var(--gb-gbox-face-l); }
.gb-svc__g       { fill: var(--gb-svc-g); }
.gb-svc__lid, .gb-svc__face--r, .gb-svc__face--l, .gb-svc__g { transition: fill var(--gb-duration) var(--gb-ease-out); }
.gb-svc__bubble-shape { fill: var(--gb-svc-yellow); stroke: var(--gb-svc-ink); stroke-width: var(--gb-svc-bub-stroke); stroke-linejoin: round; }
.gb-svc__bt {
  fill: var(--gb-svc-ink);
  font-family: var(--gb-font-heading); font-weight: var(--gb-fw-bold);
  font-size: calc(var(--gb-svc-bub-fs) * 1px);   /* SVG 内なので px = ユーザー座標 */
  letter-spacing: var(--gb-svc-bub-tracking);
}
.gb-svc__bt--a { display: none; }                 /* We're は JS のときだけ（左右のパネルに文字が出るまで） */
.gb-svc__line { position: absolute; left: 50%; top: 100%; width: var(--gb-svc-line-w); margin-left: calc(var(--gb-svc-line-w) / -2); height: var(--gb-svc-line-h, 0px); background: var(--gb-svc-ink); transform-origin: top; transform: scaleY(0); }
/* 黒パネルがせり上がって g を覆ったあと（JS が .is-on-dark を付ける）: g を白、箱を濃い背景用の色に */
.gb-svc__logo.is-on-dark .gb-svc__g       { fill: var(--gb-svc-g-on-dark); }
.gb-svc__logo.is-on-dark .gb-svc__lid     { fill: var(--gb-gbox-dark-lid); }
.gb-svc__logo.is-on-dark .gb-svc__face--r { fill: var(--gb-gbox-dark-face-r); }
.gb-svc__logo.is-on-dark .gb-svc__face--l { fill: var(--gb-gbox-dark-face-l); }

/* 中央から左右へ分かれる小箱（JS が生成。INPUT / OUTPUT の大きさに育ったら本物と入れ替わる） */
.gb-svc__seed { position: absolute; z-index: 2; border: var(--gb-svc-bw) solid var(--gb-svc-ink); background: var(--gb-svc-paper); opacity: 0; pointer-events: none; }
.gb-svc__seed--yellow { background: var(--gb-svc-yellow); }

/* ---- 初期状態（JS あり = <html>.gb-js のときだけ透明にする。CLAUDE.md: JS 無効なら最初から見える） ---- */
.gb-js .gb-svc:not(.is-done) .gb-svc__in,
.gb-js .gb-svc:not(.is-done) .gb-svc__out,
.gb-js .gb-svc:not(.is-done) .gb-svc__flow,
.gb-js .gb-svc:not(.is-done) .gb-svc__cre,
.gb-js .gb-svc:not(.is-done) .gb-svc__base .gb-svc__box,
.gb-js .gb-svc:not(.is-done) .gb-svc__logo,
.gb-js .gb-svc:not(.is-done) .gb-svc__t { opacity: 0; }
.gb-js .gb-svc:not(.is-done) .gb-svc__ul { transform: scaleX(0); }
.gb-js .gb-svc:not(.is-done) .gb-svc__bt--a { display: block; }
.gb-js .gb-svc:not(.is-done) .gb-svc__bt--b { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .gb-js .gb-svc:not(.is-done) .gb-svc__in, .gb-js .gb-svc:not(.is-done) .gb-svc__out, .gb-js .gb-svc:not(.is-done) .gb-svc__flow, .gb-js .gb-svc:not(.is-done) .gb-svc__cre,
  .gb-js .gb-svc:not(.is-done) .gb-svc__base .gb-svc__box, .gb-js .gb-svc:not(.is-done) .gb-svc__logo, .gb-js .gb-svc:not(.is-done) .gb-svc__t, .gb-js .gb-svc:not(.is-done) .gb-svc__bt--b { opacity: 1; }
  .gb-js .gb-svc:not(.is-done) .gb-svc__ul { transform: none; }
  .gb-js .gb-svc:not(.is-done) .gb-svc__bt--a { display: none; }
  .gb-svc__seed { display: none; }
}

/* ---- SP / タブレット（781px 以下: 構造の切り替え）: 1カラム。左右に分かれる演出は JS 側で簡略版に ---- */
@media (max-width: 781px) {
  .gb-svc { --gb-svc-logo-w: var(--gb-svc-logo-w-sp); --gb-svc-pad: var(--gb-svc-pad-sp); padding-top: 0; }
  /* 1カラムでは黒パネルが先頭でないので、ロゴは JS が黒パネルの上に置く（JS 無効時は出さない＝図は完成形のまま） */
  .gb-svc__logo { display: none; }
  .gb-js .gb-svc__logo { display: block; }
  .gb-svc__flow { margin-top: calc(var(--gb-svc-logo-h) * (1 - var(--gb-svc-logo-overlap))); }
  .gb-svc__grid { grid-template-columns: 1fr; grid-template-areas: "in" "flow" "cre" "out" "base"; }
  .gb-svc__base { grid-template-columns: 1fr; }
  .gb-svc .gb-svc__list { width: auto; grid-template-columns: 1fr 1fr; gap: var(--gb-space-1) var(--gb-space-3); margin-top: var(--gb-space-4); }
  .gb-svc__flow { min-height: 0; }
  .gb-svc__sides { display: none; }
  .gb-svc__steps { grid-template-columns: 1fr; gap: var(--gb-space-2); justify-items: center; }
  .gb-svc__steps .gb-svc__arrow { transform: rotate(90deg); }
  .gb-svc__steps .gb-svc__arrow--in { display: none; }
  .gb-svc__x { font-size: var(--gb-fs-lg); }
  .gb-svc__base .gb-svc__box { padding: var(--gb-space-6) var(--gb-svc-pad); min-height: 0; }
}

/* =========================================================
   ABOUT 箱の展開図アニメーション（.gb-ac）— [gb_about_cube] / inc/gootbox-about-cube.php / assets/js/gb-about-cube.js
   CSS 3D の本物の立方体。面 = div（文字は実テキスト）、面の折りたたみ = 蝶番 .gb-ac__hinge の rotateX/rotateY。
   展開図は「床に寝た」状態（Figma: 底面 = CREATIVE、横一列に STRATEGY / CREATIVE / EXECUTION / With AI、奥に EXPERIENCE、手前に ARTISAN）。
   アイソメで見ると横一列は左下→右上、正面図（真上から）では普通の展開図になる。
   色（2026-10 面のキューブに変更。TOP の KV と同じ塗りの面・輪郭線なし）: 箱 = 左 --gb-ac-face-l / 右 --gb-ac-face-r / フタ（開）--gb-ac-lid・（閉）--gb-ac-lid-closed、
   展開図 = 横一列 --gb-ac-net-dark / ほか --gb-ac-net-light。フタが開いている間は右・奥・底を消すので、箱の内側は背景の白に抜ける（ロゴと同じ見せ方）。
   状態クラス（JS が付ける）: is-in（見える）/ is-net（開く）/ is-front（真上から）/ is-colored（展開図の配色）/ is-white（旧: 白いキューブ。今は色の違いなし、フタの開閉の速さにだけ効く）
                          / is-words（面の文字）/ is-hush（白マスの文字を消す）/ is-hit-1〜3（黒マスの文字を順に拡大）/ is-slidein（白マスの文字が左からスライドイン）
                          / is-cap-issue / is-cap-strategy / is-cap-execution / is-cap-solved（キャプション 4 つ）/ is-conf（紙吹雪）/ is-g（フタから顔を出す g）/ is-prep（消えた白マスの文字をスライド開始位置へ）/ is-snap（色を一瞬で切替）/ is-spin / is-bob / is-open（上面がフタとして奥右の辺から外側へ開く）
   <html>.gb-js が無いとき = 最初から「展開図を真上から・配色あり・文字あり」で静止。
   値は tokens.css の --gb-ac-*。
   ========================================================= */
.gb-ac { position: relative; --gb-ac-h: calc(var(--gb-ac-size) / 2); max-width: var(--gb-ac-max-w); margin-inline: auto; text-align: center; }
.gb-ac__stage { position: relative; height: var(--gb-ac-stage-h); overflow-x: clip; }  /* 狭い画面でアイソメの展開図がはみ出しても横スクロールを出さない */
.gb-ac__scene, .gb-ac__cube, .gb-ac__sheet, .gb-ac__hinge { transform-style: preserve-3d; }
.gb-ac__scene {
  position: absolute; left: 50%; top: var(--gb-ac-scene-top); width: 0; height: 0;
  transform: rotateX(-90deg) rotateY(0deg);                     /* 既定 = 真上から見た展開図 */
  transition: transform var(--gb-ac-view-dur) var(--gb-ease-out);
}
.gb-ac__cube { position: absolute; left: 0; top: 0; width: 0; height: 0; transform: translateX(calc(var(--gb-ac-size) * -0.5)); } /* 展開図（横4面）が中央に来るように半面ぶん左へ */
/* 底面（CREATIVE）: 中心が立方体の中心に来る正方形を、床（xz 平面）に寝かせて底の高さへ */
.gb-ac__sheet { position: absolute; left: calc(var(--gb-ac-h) * -1); top: calc(var(--gb-ac-h) * -1); width: var(--gb-ac-size); height: var(--gb-ac-size); transform: translateY(var(--gb-ac-h)) rotateX(90deg); }
.gb-ac__hinge { position: absolute; width: var(--gb-ac-size); height: var(--gb-ac-size); transition: transform var(--gb-ac-hinge-dur) var(--gb-ease-out); }
.gb-ac__hinge--left   { left: calc(var(--gb-ac-size) * -1); top: 0; transform-origin: 100% 50%; }  /* STRATEGY: 左の壁 */
.gb-ac__hinge--right  { left: var(--gb-ac-size);            top: 0; transform-origin: 0 50%; }    /* EXECUTION: 右の壁 */
.gb-ac__hinge--end    { left: var(--gb-ac-size);            top: 0; transform-origin: 0 50%; }    /* With AI: 右の壁の先 = 折ると上面 = SOLVED で開くフタ（奥右の辺が蝶番） */
.gb-ac__hinge--back   { left: 0; top: calc(var(--gb-ac-size) * -1); transform-origin: 50% 100%; } /* EXPERIENCE: 奥の壁 */
.gb-ac__hinge--front  { left: 0; top: var(--gb-ac-size);            transform-origin: 50% 0; }    /* ARTISAN: 手前の壁 */

.gb-ac__face {
  position: absolute; inset: var(--gb-ac-gap);                 /* 面と面の間の隙間（Figma の展開図） */
  display: grid; place-items: center;
  background: var(--gb-ac-net-light);
  backface-visibility: visible;
  transition: background var(--gb-ac-color-dur) var(--gb-ease-out), inset var(--gb-ac-hinge-dur) var(--gb-ease-out), opacity 0s linear var(--gb-ac-lid-dur);
}
.gb-ac__word {
  font-family: var(--gb-font-heading); font-weight: var(--gb-fw-bold);
  font-size: var(--gb-ac-word-fs); letter-spacing: 0.01em; line-height: 1; white-space: nowrap;
  color: var(--gb-ac-line);
  transition: opacity var(--gb-ac-fade) var(--gb-ease-out), color var(--gb-ac-color-dur) var(--gb-ease-out);
}
/* 展開図の配色: 横一列（STRATEGY / CREATIVE / EXECUTION）は濃いグレー、With AI・奥・手前は明るいグレー（JS 無効・動きを減らす設定の静止画もこれ） */
.gb-ac__face--left, .gb-ac__face--center, .gb-ac__face--right { background: var(--gb-ac-net-dark); }
.gb-ac__face--left .gb-ac__word, .gb-ac__face--center .gb-ac__word, .gb-ac__face--right .gb-ac__word { color: var(--gb-ac-white); }
.gb-ac__shadow {
  position: absolute; left: calc(var(--gb-ac-h) * -1); top: calc(var(--gb-ac-h) * -1); width: var(--gb-ac-size); height: var(--gb-ac-size);
  background: var(--gb-ac-shadow);
  transform: rotateX(90deg) translateZ(calc(var(--gb-ac-h) * -1 - var(--gb-ac-size) * 0.16));
  opacity: 0; transition: opacity var(--gb-ac-fade) var(--gb-ease-out);
}

/* フタから顔を出す g（3D の外の 2D レイヤー。立方体の上端あたりに置く） */
.gb-ac__pop { position: absolute; left: 50%; bottom: calc(100% - var(--gb-ac-scene-top) + var(--gb-ac-pop-bottom)); width: var(--gb-ac-pop-size); height: var(--gb-ac-pop-size); margin-left: calc(var(--gb-ac-pop-size) / -2); z-index: 2; pointer-events: none; opacity: 0; transform: translateY(var(--gb-ac-pop-rise)); transition: opacity var(--gb-ac-fade) var(--gb-ease-out), transform var(--gb-ac-fade) var(--gb-ease-pop); }
.gb-ac__pop svg { display: block; width: 100%; height: 100%; fill: var(--gb-ac-line); overflow: visible; }
html:not(.gb-js) .gb-ac__pop { display: none; } /* JS 無しでは出さない */
.gb-ac__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; padding: 0; list-style: none; }

/* ---------- JS あり: 折りたたまれた黒いキューブから始める ---------- */
.gb-js .gb-ac .gb-ac__scene { transform: rotateX(var(--gb-ac-iso-x)) rotateY(var(--gb-ac-iso-y)); }
.gb-js .gb-ac.is-front .gb-ac__scene { transform: rotateX(-90deg) rotateY(0deg); }
/* 登場のフェードは 2D の舞台（.gb-ac__stage）にかける。3D の要素に opacity < 1 を付けると
   ブラウザが立体を平らにしてしまい、フェード中に面が 1 枚だけ見える「ノイズ」になるため */
.gb-js .gb-ac .gb-ac__stage { opacity: 0; transition: opacity var(--gb-ac-fade) var(--gb-ease-out); }
.gb-js .gb-ac.is-in .gb-ac__stage { opacity: 1; }
.gb-js .gb-ac .gb-ac__cube { transform: scale(0.6); transition: transform var(--gb-ac-fade) var(--gb-ease-pop); }
.gb-js .gb-ac.is-in .gb-ac__cube { transform: none; transition-duration: var(--gb-ac-hinge-dur); transition-timing-function: var(--gb-ease-out); }
.gb-js .gb-ac.is-in.is-net .gb-ac__cube { transform: translateX(calc(var(--gb-ac-size) * -0.5)); }
.gb-js .gb-ac.is-in .gb-ac__shadow { opacity: 1; }
.gb-js .gb-ac.is-front .gb-ac__shadow { opacity: 0; }
/* 折りたたみ（閉じた立方体）: 壁は床から立ち上がる */
.gb-js .gb-ac .gb-ac__hinge--left  { transform: rotateY(90deg); }
.gb-js .gb-ac .gb-ac__hinge--right { transform: rotateY(-90deg); }
.gb-js .gb-ac .gb-ac__hinge--end   { transform: rotateY(-90deg); }
.gb-js .gb-ac .gb-ac__hinge--back  { transform: rotateX(-90deg); }
.gb-js .gb-ac .gb-ac__hinge--front { transform: rotateX(90deg); }
.gb-js .gb-ac .gb-ac__face { inset: 0; }
/* 閉じる順: 上面 → 奥・手前 → 左右（開く順の逆） */
.gb-js .gb-ac .gb-ac__hinge--end   { transition-delay: 0s; }
.gb-js .gb-ac .gb-ac__hinge--back, .gb-js .gb-ac .gb-ac__hinge--front { transition-delay: var(--gb-ac-hinge-step); }
.gb-js .gb-ac .gb-ac__hinge--left, .gb-js .gb-ac .gb-ac__hinge--right { transition-delay: calc(var(--gb-ac-hinge-step) * 2); }
/* 開く: 左右 → 奥・手前 → 上面 */
.gb-js .gb-ac.is-net .gb-ac__hinge { transform: none; }
.gb-js .gb-ac.is-net .gb-ac__face { inset: var(--gb-ac-gap); }
.gb-js .gb-ac.is-net .gb-ac__hinge--left, .gb-js .gb-ac.is-net .gb-ac__hinge--right { transition-delay: 0s; }
.gb-js .gb-ac.is-net .gb-ac__hinge--back, .gb-js .gb-ac.is-net .gb-ac__hinge--front { transition-delay: var(--gb-ac-hinge-step); }
.gb-js .gb-ac.is-net .gb-ac__hinge--end { transition-delay: calc(var(--gb-ac-hinge-step) * 2); }
/* 配色: 既定 = 面のキューブ。色は面に固定（アイソメで見える左 = left、右 = front、上 = end）。回転で 180 度のとき画面の左に right・右に back が来るので、
   right = 濃い・back = 中間 にして、180 度でも同じ見え方にする（90・270 度の瞬間は左右の濃淡が入れ替わる）。
   transition の並びは background / inset / opacity。is-snap の間は色の切り替えを一瞬に */
.gb-js .gb-ac.is-snap .gb-ac__face { transition-duration: 0s, var(--gb-ac-hinge-dur), 0s; }
.gb-js .gb-ac .gb-ac__face--left, .gb-js .gb-ac .gb-ac__face--right, .gb-js .gb-ac .gb-ac__face--center { background: var(--gb-ac-face-l); }
.gb-js .gb-ac .gb-ac__face--front, .gb-js .gb-ac .gb-ac__face--back { background: var(--gb-ac-face-r); }
/* フタ（上面）: 閉じているときは明るいグレー。開くと同時に右の面と同じグレー、閉じるときは閉じきる少し手前（--gb-ac-lid-tint-at）でパッと明るいグレーに戻る */
.gb-js .gb-ac .gb-ac__face--end { background: var(--gb-ac-lid-closed); transition-duration: 0s, var(--gb-ac-hinge-dur), 0s; transition-delay: var(--gb-ac-lid-tint-at), 0s, var(--gb-ac-lid-dur); }
.gb-js .gb-ac.is-open .gb-ac__face--end { background: var(--gb-ac-lid); transition-delay: 0s, 0s, var(--gb-ac-lid-dur); }
/* 展開図の配色（箱から開くときは --gb-ac-color-dur かけて変わる） */
.gb-js .gb-ac.is-colored .gb-ac__face--left, .gb-js .gb-ac.is-colored .gb-ac__face--center, .gb-js .gb-ac.is-colored .gb-ac__face--right { background: var(--gb-ac-net-dark); }
.gb-js .gb-ac.is-colored .gb-ac__face--end, .gb-js .gb-ac.is-colored .gb-ac__face--back, .gb-js .gb-ac.is-colored .gb-ac__face--front { background: var(--gb-ac-net-light); }
.gb-js .gb-ac.is-colored .gb-ac__face--end { transition-duration: var(--gb-ac-color-dur), var(--gb-ac-hinge-dur), 0s; transition-delay: 0s, 0s, var(--gb-ac-lid-dur); }
/* 文字 */
.gb-js .gb-ac .gb-ac__word { opacity: 0; transition: opacity var(--gb-ac-fade) var(--gb-ease-out), transform var(--gb-ac-hit-dur) var(--gb-ease-out), color var(--gb-ac-color-dur) var(--gb-ease-out); }
.gb-js .gb-ac.is-words .gb-ac__word { opacity: 1; }
/* 正面図: 白マスの文字をいったん消し、黒マスの 3 ワードを順番に大きく（アテンション） */
.gb-js .gb-ac.is-hush .gb-ac__face--end .gb-ac__word, .gb-js .gb-ac.is-hush .gb-ac__face--back .gb-ac__word, .gb-js .gb-ac.is-hush .gb-ac__face--front .gb-ac__word { opacity: 0; }  /* まずフェードアウト */
.gb-js .gb-ac.is-hush.is-prep .gb-ac__face--end .gb-ac__word, .gb-js .gb-ac.is-hush.is-prep .gb-ac__face--back .gb-ac__word, .gb-js .gb-ac.is-hush.is-prep .gb-ac__face--front .gb-ac__word { transform: translateX(var(--gb-ac-slide-x)); transition-duration: var(--gb-ac-fade), 0s; } /* 消えたあと、スライドインの開始位置へ（見えないうちに） */
.gb-js .gb-ac.is-hit-1 .gb-ac__face--left .gb-ac__word, .gb-js .gb-ac.is-hit-2 .gb-ac__face--center .gb-ac__word, .gb-js .gb-ac.is-hit-3 .gb-ac__face--right .gb-ac__word { transform: scale(var(--gb-ac-hit-scale)); }
/* 一拍おいて白マスの文字が左からスライドイン（奥 → 手前 → With AI の順） */
.gb-js .gb-ac.is-slidein .gb-ac__face--back .gb-ac__word  { transition-delay: 0s; }
.gb-js .gb-ac.is-slidein .gb-ac__face--front .gb-ac__word { transition-delay: var(--gb-ac-slide-step); }
.gb-js .gb-ac.is-slidein .gb-ac__face--end .gb-ac__word   { transition-delay: calc(var(--gb-ac-slide-step) * 2); }
/* フタ: 上面（右の壁の先 = With AI）が奥右の辺を蝶番にして、-90（閉）→ 0（垂直に立つ）→ 90（外側に寝る）と開く */
.gb-js .gb-ac.is-open .gb-ac__hinge--end { transform: rotateY(var(--gb-ac-lid-open)); transition-duration: var(--gb-ac-lid-dur); transition-delay: 0s; }
.gb-js .gb-ac.is-white:not(.is-net) .gb-ac__hinge--end { transition-duration: var(--gb-ac-lid-dur); transition-delay: 0s; } /* 閉じるときも同じ速さ */
/* フタが開いている間は、見えない側の壁（右・奥）と底を消して「手前の2面＋フタ」だけにする（箱の内側は背景の白に抜ける。デザインどおり） */
.gb-js .gb-ac.is-open .gb-ac__face--right, .gb-js .gb-ac.is-open .gb-ac__face--back, .gb-js .gb-ac.is-open .gb-ac__face--center { opacity: 0; transition-delay: 0s, 0s, 0s; }
/* フタから顔を出す g */
.gb-js .gb-ac.is-g .gb-ac__pop--g { opacity: 1; transform: none; }
/* ふわふわ / くるくる＋弾み（キューブ自身の縦軸で回る） */
.gb-js .gb-ac.is-bob .gb-ac__cube { animation: gb-ac-bob var(--gb-ac-bob-dur) ease-in-out infinite; }
.gb-js .gb-ac.is-spin .gb-ac__cube { animation: gb-ac-spin var(--gb-ac-spin-dur) cubic-bezier(.5,0,.3,1) both; }
@keyframes gb-ac-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--gb-ac-bob)); } }
@keyframes gb-ac-spin { /* 止め → くるっと一回転 → 止め */
  0%   { transform: translateY(0) rotateY(0deg); }
  45%  { transform: translateY(var(--gb-ac-spin-hop)) rotateY(180deg); }
  100% { transform: translateY(0) rotateY(360deg); }
}
/* =========================================================
   ABOUT 箱アニメーション — 文字パート（2026-10-16 差し替え。原本: _reference/about-caption/gb-ac-caption.css・mock.html）
   旧の Issue? / Success! / good ideas… のラベル、握手、キラキラは廃止。
   値は tokens.css の --gb-ac-cap-* / --gb-ac-lead-* / --gb-ac-sq / --gb-ac-conf*（追加トークン）。
   状態クラス（JS）: is-cap-issue / is-cap-strategy / is-cap-execution / is-cap-solved（キャプション）/ is-conf（紙吹雪）
   ========================================================= */

/* キャプション: 箱の真上・中央。英字（小・字間広）＋日本語（太）＋ 箱へ向かう引き出し線。
   出方は「箱の中から外へ」: 色の四角が線の下端（箱の上）から上へ昇り、線がそれを追って下から伸び、最後に文字が出る。消えるときは全部同時にフェード */
.gb-ac__cap {
  position: absolute; left: 0; right: 0;
  bottom: calc(100% - var(--gb-ac-scene-top) + var(--gb-ac-cap-bottom));  /* = 線の下端の高さ（箱の上端の少し上） */
  margin: 0; text-align: center; pointer-events: none; z-index: 3;
}
.gb-ac__cap-en, .gb-ac__cap-jp { display: block; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity var(--gb-ac-fade) var(--gb-ease-out), transform var(--gb-ac-fade) var(--gb-ease-out); }
.gb-ac__cap-en { font-family: var(--gb-font-heading); font-weight: var(--gb-fw-regular); font-size: var(--gb-ac-cap-en-fs); letter-spacing: var(--gb-ac-cap-en-ls); text-indent: var(--gb-ac-cap-en-ls); line-height: 1.4; color: var(--gb-color-text); }
.gb-ac__cap-jp .gb-ac__punct { margin-right: -0.5em; }  /* 末尾の「、」「。」をぶら下げて、文字の見た目の中心を線にそろえる（PHP が末尾の句読点を span で包む） */
.gb-ac__cap-jp { font-weight: var(--gb-fw-bold); font-size: var(--gb-ac-cap-jp-fs); letter-spacing: var(--gb-ac-cap-jp-ls); text-indent: var(--gb-ac-cap-jp-ls); line-height: 1.6; margin-top: 0.2em; color: var(--gb-color-text); }
/* 引き出し線: 下端（箱側）を基点に上へ伸びる。消えるときは縮めずにフェード */
.gb-ac__lead {
  position: relative; display: block; width: 1px; height: var(--gb-ac-lead-h); margin: var(--gb-ac-cap-gap) auto 0;
  background: var(--gb-color-text);
  transform-origin: 50% 100%; transform: scaleY(0); opacity: 0;
  transition: transform 0s linear var(--gb-ac-fade), opacity var(--gb-ac-fade) linear;
}
/* 色の四角: 線の下端から上端へ昇る（線の scaleY の影響を受けないよう線の外・.gb-ac__cap 直下に置く） */
.gb-ac__sq {
  position: absolute; left: 50%; bottom: 0; translate: -50% 50%;
  width: var(--gb-ac-sq); height: var(--gb-ac-sq);
  background: var(--gb-ac-sq-color, transparent); opacity: 0;
  transition: bottom 0s linear var(--gb-ac-fade), opacity var(--gb-ac-fade) linear;
}
.gb-ac__cap--strategy  { --gb-ac-sq-color: var(--gb-svc-blue); }
.gb-ac__cap--execution { --gb-ac-sq-color: var(--gb-svc-magenta); }

/* 表示: JS が .gb-ac に is-cap-* を付ける → 四角が昇る → 線が伸びる（少し遅れて）→ 文字 */
.gb-js .gb-ac.is-cap-issue     .gb-ac__cap--issue,
.gb-js .gb-ac.is-cap-strategy  .gb-ac__cap--strategy,
.gb-js .gb-ac.is-cap-execution .gb-ac__cap--execution,
.gb-js .gb-ac.is-cap-solved    .gb-ac__cap--solved { --on: 1; }
.gb-ac__cap { --on: 0; }
.gb-ac__cap .gb-ac__lead   { transform: scaleY(var(--on)); opacity: var(--on); }
.gb-ac__cap .gb-ac__sq     { bottom: calc(var(--on) * var(--gb-ac-lead-h)); opacity: var(--on); }
.gb-ac__cap--execution .gb-ac__sq { bottom: auto; top: calc(var(--on) * var(--gb-ac-lead-h)); }
.gb-ac__cap .gb-ac__cap-en, .gb-ac__cap .gb-ac__cap-jp { opacity: var(--on); transform: translateY(calc((1 - var(--on)) * 4px)); }
/* 入りだけ遅延・時間を変える（--on が 1 のとき） */
.gb-js .gb-ac.is-cap-issue .gb-ac__cap--issue .gb-ac__lead, .gb-js .gb-ac.is-cap-strategy .gb-ac__cap--strategy .gb-ac__lead,
.gb-js .gb-ac.is-cap-execution .gb-ac__cap--execution .gb-ac__lead, .gb-js .gb-ac.is-cap-solved .gb-ac__cap--solved .gb-ac__lead
  { transition: transform var(--gb-ac-lead-dur) var(--gb-ease-out) 0.12s, opacity 0.15s linear; }
.gb-js .gb-ac.is-cap-strategy .gb-ac__cap--strategy .gb-ac__sq, .gb-js .gb-ac.is-cap-execution .gb-ac__cap--execution .gb-ac__sq
  { transition: bottom var(--gb-ac-lead-dur) var(--gb-ease-out), opacity 0.15s linear; }
.gb-js .gb-ac.is-cap-issue .gb-ac__cap--issue :is(.gb-ac__cap-en, .gb-ac__cap-jp), .gb-js .gb-ac.is-cap-strategy .gb-ac__cap--strategy :is(.gb-ac__cap-en, .gb-ac__cap-jp),
.gb-js .gb-ac.is-cap-execution .gb-ac__cap--execution :is(.gb-ac__cap-en, .gb-ac__cap-jp), .gb-js .gb-ac.is-cap-solved .gb-ac__cap--solved :is(.gb-ac__cap-en, .gb-ac__cap-jp)
  { transition-delay: var(--gb-ac-cap-text-delay); }

/* ---- STRATEGY / EXECUTION は真上から見た展開図の中で、面の近くに出す（2026-10-16 位置変更） ----
   STRATEGY: 左の面（STRATEGY）の上。線は面の中心から上へ伸び、青の四角が昇る。文字は面の中心に中央揃え
   EXECUTION: 右の面（EXECUTION）の下。線は面から下へ伸び、赤の四角が降りる。日本語 → 英字の順（面から遠い側が英字） */
.gb-ac__cap--strategy {
  left: calc(50% - var(--gb-ac-size) * 1.5); right: auto; width: max-content; translate: -50% 0; text-align: center;  /* 左の面の中心に中央揃え。幅は文字なり（狭い画面でも折り返さない） */
  bottom: calc(100% - var(--gb-ac-scene-top) + var(--gb-ac-size) * 0.5 + var(--gb-ac-cap-face-gap));  /* 線の下端 = 左の面の上端の少し上（真上から見た展開図） */
}
.gb-ac__cap--execution {
  left: calc(50% + var(--gb-ac-size) * 0.5); right: auto; width: max-content; translate: -50% 0; text-align: center;  /* 右の面の中心に中央揃え。幅は文字なり */
  bottom: auto; top: calc(var(--gb-ac-scene-top) + var(--gb-ac-size) * 0.5 + var(--gb-ac-cap-face-gap));  /* 線の上端 = 右の面の下端の少し下 */
  display: flex; flex-direction: column-reverse; align-items: center;
}
.gb-ac__cap--execution .gb-ac__lead { margin: 0 auto var(--gb-ac-cap-gap); transform-origin: 50% 0; }
.gb-ac__cap--execution .gb-ac__cap-jp { margin-top: 0; margin-bottom: 0.2em; }
.gb-ac__cap--execution .gb-ac__sq { bottom: auto; top: 0; translate: -50% -50%; transition-property: top, opacity; }
.gb-js .gb-ac.is-cap-execution .gb-ac__cap--execution .gb-ac__sq { top: var(--gb-ac-lead-h); transition: top var(--gb-ac-lead-dur) var(--gb-ease-out), opacity 0.15s linear; }
.gb-ac__cap--execution .gb-ac__sq { transition: top 0s linear var(--gb-ac-fade), opacity var(--gb-ac-fade) linear; }
.gb-js .gb-ac.is-cap-execution .gb-ac__cap--execution .gb-ac__sq { transition: top var(--gb-ac-lead-dur) var(--gb-ease-out), opacity 0.15s linear; }

/* 紙吹雪: 3 色の小さな四角（塗り）と丸（線）。最後の「with gootbox」で 3 段階の時間差で現れ、消えるときは同時にフェード */
.gb-ac__conf { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.gb-ac__conf i { position: absolute; display: block; width: var(--gb-ac-conf); height: var(--gb-ac-conf); opacity: 0; scale: 0.4; transition: opacity var(--gb-ac-fade) var(--gb-ease-out), scale var(--gb-ac-conf-dur) var(--gb-ease-pop); }
.gb-ac__conf i.sq { background: var(--c); }
.gb-ac__conf i.ci { width: calc(var(--gb-ac-conf) * 1.3); height: calc(var(--gb-ac-conf) * 1.3); border: 1.5px solid var(--c); border-radius: 50%; }
.gb-ac__conf .c { --c: var(--gb-svc-blue); } .gb-ac__conf .m { --c: var(--gb-svc-magenta); } .gb-ac__conf .y { --c: var(--gb-svc-yellow); }
.gb-js .gb-ac.is-conf .gb-ac__conf i { opacity: 1; scale: 1; }
.gb-js .gb-ac.is-conf .gb-ac__conf i:nth-child(3n)   { transition-delay: 0.15s; }
.gb-js .gb-ac.is-conf .gb-ac__conf i:nth-child(3n+1) { transition-delay: 0.35s; }
.gb-js .gb-ac.is-conf .gb-ac__conf i:nth-child(3n+2) { transition-delay: 0.55s; }
html:not(.gb-js) .gb-ac__cap, html:not(.gb-js) .gb-ac__conf { display: none; }  /* JS 無し・動きを減らす = 展開図の静止画のみ */

@media (max-width: 860px) {
  .gb-ac__cap-en { letter-spacing: var(--gb-ac-cap-en-ls-sp); text-indent: var(--gb-ac-cap-en-ls-sp); }
  .gb-ac__cap-jp { letter-spacing: var(--gb-ac-cap-jp-ls-sp); text-indent: var(--gb-ac-cap-jp-ls-sp); }
}
@media (prefers-reduced-motion: reduce) {
  .gb-js .gb-ac .gb-ac__scene { transform: rotateX(-90deg) rotateY(0deg); }
  .gb-js .gb-ac .gb-ac__stage { opacity: 1; }
  .gb-js .gb-ac .gb-ac__cube { transform: translateX(calc(var(--gb-ac-size) * -0.5)); animation: none !important; }
  .gb-js .gb-ac .gb-ac__hinge { transform: none; transition: none; }
  .gb-js .gb-ac .gb-ac__face { inset: var(--gb-ac-gap); }
  .gb-js .gb-ac .gb-ac__word { opacity: 1; }
  .gb-js .gb-ac }

/* セクション（patterns/about-cube.php: alignfull グループ .gb-ac-section > [gb_about_cube]） */
.post_content .wp-block-group.gb-ac-section { padding-block: var(--gb-ac-my); }

/* =========================================================
   トップページ: 本文の上の余白（SWELL の既定 4em）を詰める。最初のブロック（ロゴのマーキー）の上マージンだけにする
   ========================================================= */
#body_wrap.top #content { padding-top: var(--gb-top-content-pt); }

/* =========================================================
   共通 CTA（[gb_cta] = 同期パターンの CTA を「フッター直前」ウィジェットから全ページに出す）— inc/gootbox-cta.php
   SWELL のウィジェット枠（.w-beforeFooter > .l-container）の余白と幅の制限を外し、CTA を画面幅いっぱい・フッターに密着させる。
   ========================================================= */
.w-beforeFooter:has(.gb-cta) {
  margin: var(--gb-cta-widget-mt) 0 0;
  padding: 0;
}
.w-beforeFooter:has(.gb-cta) > .l-container {
  max-width: none;
  padding: 0;
}
.w-beforeFooter:has(.gb-cta) .c-widget,
.w-beforeFooter:has(.gb-cta) .textwidget,
.w-beforeFooter .gb-pattern.post_content { margin: 0; padding: 0; max-width: none; }
.w-beforeFooter .gb-pattern.post_content > * { margin-top: 0; margin-bottom: 0; }
.w-beforeFooter .gb-pattern > .wp-block-cover.gb-cta {
  left: 0 !important;
  width: 100% !important;
  max-width: none;
  margin: 0 !important;
}
/* 本文の最後 → CTA の間（SWELL の .l-content の下マージン）。CTA がウィジェットにあるページだけ */
#body_wrap:has(.w-beforeFooter .gb-cta) #content { margin-bottom: var(--gb-cta-content-gap); }

/* =========================================================
   記事一覧（SWELL の投稿リスト・カード型 = INTERVIEW / EVENT など。TOP のセクションも一覧ページも共通）
   記事どうしの隙間とタイトルの太さ。値は tokens.css の --gb-postlist-*
   ========================================================= */
.p-postList.-type-card {
  margin-left: calc(-1 * var(--gb-postlist-gap-x) / 2);
  margin-right: calc(-1 * var(--gb-postlist-gap-x) / 2);
}
.p-postList.-type-card .p-postList__item {
  margin-bottom: var(--gb-postlist-gap-y);
  padding-left: calc(var(--gb-postlist-gap-x) / 2);
  padding-right: calc(var(--gb-postlist-gap-x) / 2);
}
.p-postList.-type-card .p-postList__body { padding-top: var(--gb-postlist-body-pt); }
.p-postList.-type-card .p-postList__title {
  font-weight: var(--gb-postlist-title-fw);
  line-height: var(--gb-postlist-title-lh);
}
/* 投稿リストに gb-postlist--more を付けたとき（inc/gootbox-postlist-more.php）: 抜粋の下の「VIEW MORE」ボタン（span.gb-button = サイト共通ボタンの見た目）。
   カード全体が a なので、ボタン単体ではなく「カードにマウスを乗せた／キーボードでフォーカスした」ときに、共通ボタンのホバーと同じ動きをさせる */
.gb-postlist--more .gb-postlist__more { margin-top: var(--gb-postlist-more-mt); }
/* 投稿リストが 0 件のとき（EVENT: inc/gootbox-event.php）: 中央揃え・上下に余白。COMING SOON ＋ 文言 */
.gb-postlist__empty,
.post_content .gb-postlist__empty { margin: 0; padding: var(--gb-postlist-empty-py) 0; text-align: center; font-size: var(--gb-postlist-empty-fs); }
.gb-postlist__empty .gb-postlist__empty-title,
.post_content .gb-postlist__empty p.gb-postlist__empty-title {
  margin: 0; font-family: var(--gb-font-heading); font-size: var(--gb-postlist-empty-title-fs); font-weight: var(--gb-postlist-empty-title-fw);
  letter-spacing: var(--gb-tracking-heading); line-height: var(--gb-lh-heading);
}
.gb-postlist__empty .gb-postlist__empty-text,
.post_content .gb-postlist__empty p.gb-postlist__empty-text { margin: var(--gb-postlist-empty-gap) 0 0; }
.gb-postlist--more .p-postList__link:hover .gb-postlist__more,
.gb-postlist--more .p-postList__link:focus-visible .gb-postlist__more {
  padding-left: calc(var(--gb-btn-pad-x) + var(--gb-btn-shift));
  padding-right: calc(var(--gb-btn-pad-x) + var(--gb-btn-circle) + var(--gb-btn-gap) - var(--gb-btn-shift));
}
.gb-postlist--more .p-postList__link:hover .gb-postlist__more::after,
.gb-postlist--more .p-postList__link:focus-visible .gb-postlist__more::after { clip-path: circle(50% at center); }
.gb-postlist--more .p-postList__link:hover .gb-postlist__more::before,
.gb-postlist--more .p-postList__link:focus-visible .gb-postlist__more::before { opacity: 1; }

/* INTERVIEW の一覧（投稿リストに gb-postlist--more。エディターではリスト型）
   - スマホ（781px 以下）: サムネを横いっぱい → その下に見出し・抜粋・ボタン の縦並び・1 列（2026-10-23）
   - PC: SWELL のリスト型のまま（サムネ左・1 列。2026-10-23 に戻した）。記事と記事の間だけ広げる（--gb-iv-list-gap-pc） */
@media (min-width: 782px) {
  .gb-postlist--more .p-postList.-type-list .p-postList__item { margin-bottom: var(--gb-iv-list-gap-pc); }
  .gb-postlist--more .p-postList.-type-list .p-postList__item:last-child { margin-bottom: 0; }
}
@media (max-width: 781px) {
  .gb-postlist--more.p-postList.-type-list,
  .gb-postlist--more .p-postList.-type-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gb-postlist-gap-y-sp) 0;
    margin: 0;
  }
  .gb-postlist--more.p-postList.-type-list .p-postList__item,
  .gb-postlist--more .p-postList.-type-list .p-postList__item { margin: 0; padding: 0; border: 0; }
  .gb-postlist--more.p-postList.-type-list .p-postList__link,
  .gb-postlist--more .p-postList.-type-list .p-postList__link { display: block; padding: 0; }
  .gb-postlist--more.p-postList.-type-list .p-postList__thumb,
  .gb-postlist--more .p-postList.-type-list .p-postList__thumb { width: 100%; max-width: none; flex: none; margin: 0; }
  .gb-postlist--more.p-postList.-type-list .p-postList__body,
  .gb-postlist--more .p-postList.-type-list .p-postList__body { width: 100%; padding: var(--gb-postlist-body-pt) 0 0; }
  .gb-postlist--more.p-postList.-type-list .p-postList__title,
  .gb-postlist--more .p-postList.-type-list .p-postList__title { font-weight: var(--gb-postlist-title-fw); line-height: var(--gb-postlist-title-lh); }
}

/* NEWS の一覧: サムネなし。日付 ＋ タイトルの 1 行を罫線で区切る（2026-10-23）。
   対象は ①投稿リストに gb-postlist--news ②/news/（= カテゴリー お知らせ news-info のアーカイブ。inc/gootbox-news.php）の一覧。カード型でも 1 列にする */
:is(.gb-postlist--news, body.category-news-info .l-mainContent) .p-postList__thumb { display: none !important; }
:is(.gb-postlist--news, body.category-news-info .l-mainContent).p-postList,
:is(.gb-postlist--news, body.category-news-info .l-mainContent) .p-postList { display: block; margin: 0; border-top: 1px solid var(--gb-color-line); }
:is(.gb-postlist--news, body.category-news-info .l-mainContent) .p-postList__body::before,
:is(.gb-postlist--news, body.category-news-info .l-mainContent) .p-postList__link::before { content: none; }
:is(.gb-postlist--news, body.category-news-info .l-mainContent) .p-postList__item { width: 100%; margin: 0; padding: 0; border-bottom: 1px solid var(--gb-color-line); }
:is(.gb-postlist--news, body.category-news-info .l-mainContent) .p-postList__link { display: flex; align-items: baseline; gap: var(--gb-news-list-gap); padding: var(--gb-news-list-py) 0; }
:is(.gb-postlist--news, body.category-news-info .l-mainContent) .p-postList__body { width: 100%; padding: 0; display: flex; align-items: baseline; gap: var(--gb-news-list-gap); flex-wrap: wrap; }
:is(.gb-postlist--news, body.category-news-info .l-mainContent) .p-postList__times,
:is(.gb-postlist--news, body.category-news-info .l-mainContent) .p-postList__meta { flex: none; order: -1; margin: 0; font-family: var(--gb-font-heading); font-size: var(--gb-news-list-date-fs); letter-spacing: var(--gb-tracking-en); color: var(--gb-color-text-muted); }
:is(.gb-postlist--news, body.category-news-info .l-mainContent) .p-postList__title { flex: 1 1 16em; min-width: 0; margin: 0; font-size: var(--gb-news-list-title-fs); font-weight: var(--gb-postlist-title-fw); line-height: var(--gb-postlist-title-lh); }
:is(.gb-postlist--news, body.category-news-info .l-mainContent) .p-postList__excerpt,
:is(.gb-postlist--news, body.category-news-info .l-mainContent) .p-postList__cat { display: none; }
@media (max-width: 781px) {
  :is(.gb-postlist--news, body.category-news-info .l-mainContent) .p-postList__body { flex-direction: column; gap: 4px; }
}

/* =========================================================
   会社概要（.gb-company = patterns/about-company.php。見出し＋テーブルブロック）
   左列 = 項目名、右列 = 内容。横線だけのシンプルな表。値は tokens.css の --gb-company-*
   ========================================================= */
.gb-company .wp-block-table,
.post_content .gb-company .wp-block-table { margin: 0; }
.gb-company .wp-block-table table,
.post_content .gb-company .wp-block-table table {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--gb-color-line);
  border-collapse: collapse;
}
.gb-company .wp-block-table td,
.post_content .gb-company .wp-block-table td {
  padding: var(--gb-company-pad-y) var(--gb-space-4);
  border: 0;
  border-bottom: 1px solid var(--gb-color-line);
  background: none;
  vertical-align: top;
  line-height: var(--gb-company-lh);
}
.gb-company .wp-block-table td:first-child,
.post_content .gb-company .wp-block-table td:first-child {
  width: var(--gb-company-label-w);
  font-weight: var(--gb-fw-bold);
  white-space: nowrap;
}
@media (max-width: 599px) {
  .gb-company .wp-block-table td,
  .post_content .gb-company .wp-block-table td { display: block; width: auto; padding: var(--gb-space-3) 0; }
  .gb-company .wp-block-table td:first-child,
  .post_content .gb-company .wp-block-table td:first-child { width: auto; padding-bottom: 0; border-bottom: 0; }
}

/* =========================================================
   WORKS のタグクラウド（[gb_works_tags] = inc/gootbox-works-search.php）— フッターのウィジェット用
   形は一覧ページのタグ（.gb-tags / .gb-tag）と同じ。フッター（黒背景）の中では白系の枠・文字にし、hover で白黒が反転（白地に黒文字）。
   値は tokens.css の --gb-works-tags-*
   ========================================================= */
.gb-works-tags { gap: var(--gb-works-tags-gap); }
.gb-works-tags .gb-tag,
.c-widget .gb-works-tags .gb-tag { margin: 0; padding: 0; border: 0; }
.c-widget .gb-works-tags .gb-tag::before { content: none; }
.gb-works-tags .gb-tag a { font-size: var(--gb-works-tags-fs); }
.gb-works-tags__count { margin-left: 0.3em; opacity: 0.6; }
.gb-works-tags .gb-tag a.is-current { background-color: var(--gb-color-accent); border-color: var(--gb-color-accent); color: var(--gb-color-text-inverse); }
.l-footer .gb-works-tags .gb-tag a {
  display: inline-block;
  padding: var(--gb-space-2) var(--gb-space-3);
  border: var(--gb-border) solid var(--gb-works-tags-dark-line);
  color: var(--gb-works-tags-dark-fg);
  background: none;
}
.l-footer .gb-works-tags .gb-tag a::before { content: none; }
.l-footer .gb-works-tags .gb-tag a:hover,
.l-footer .gb-works-tags .gb-tag a:focus-visible,
.l-footer .gb-works-tags .gb-tag a.is-current {
  background-color: var(--gb-works-tags-dark-hover-bg);
  border-color: var(--gb-works-tags-dark-hover-bg);
  color: var(--gb-works-tags-dark-hover-fg);
}

/* =========================================================
   聞いてみる（.gb-ask = inc/gootbox-ask.php / assets/js/gb-ask.js）— トップ FV 右下の質問ボックス
   下から: 入力欄（丸い枠＋送信）/ 候補ボタン / 回答（フキダシ＋ g キューブ。質問すると入力欄の上に出る）
   .gb-ask--mv = FV（.p-mainVisual）に差し込まれたとき（右下に絶対配置）。[gb_ask] で本文に置いたときはその場に出る。
   値は tokens.css の --gb-ask-*
   ========================================================= */
.gb-ask {
  position: relative;
  width: 100%;
  max-width: var(--gb-ask-w);
  color: var(--gb-color-text);
  font-family: var(--gb-font-base);
  font-size: var(--gb-ask-fs);
  line-height: 1.6;
  text-align: left;
  text-shadow: none;
}
.p-mainVisual > .gb-ask.gb-ask--mv,
.gb-kv > .gb-ask.gb-ask--mv {
  position: absolute;
  z-index: 3; /* キューブ・文字より前 */
  right: var(--gb-ask-right);
  bottom: var(--gb-ask-bottom);
  width: calc(100% - var(--gb-ask-right) * 2);
}
/* 候補ボタン */
.gb-ask__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--gb-space-2);
  margin: 0 0 var(--gb-space-3);
  padding: 0;
  list-style: none;
}
.gb-ask__chips li { margin: 0; padding: 0; }
.gb-ask__chip {
  display: inline-block;
  margin: 0;
  padding: var(--gb-ask-chip-pad);
  border: 0;
  border-radius: var(--gb-radius-pill);
  background-color: var(--gb-ask-chip-bg);
  color: var(--gb-ask-chip-fg);
  font: inherit;
  font-size: var(--gb-ask-chip-fs);
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--gb-header-transition), color var(--gb-header-transition);
}
.gb-ask__chip:hover,
.gb-ask__chip:focus-visible { background-color: var(--gb-ask-chip-hover-bg); color: var(--gb-ask-chip-hover-fg); }
/* 入力欄 */
.gb-ask__form {
  display: flex;
  align-items: center;
  gap: var(--gb-space-2);
  margin: 0;
  padding: var(--gb-ask-form-pad);
  border: 1px solid var(--gb-color-line);
  border-radius: var(--gb-radius-pill);
  background-color: var(--gb-color-bg);
  box-shadow: var(--gb-ask-shadow);
}
.gb-ask__form:focus-within { border-color: var(--gb-color-text); }
.gb-ask__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.gb-ask .gb-ask__input {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--gb-ask-input-h);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-size: var(--gb-ask-input-fs); /* 16px 未満だと iPhone で入力時に画面が拡大される */
  outline: none;
}
.gb-ask .gb-ask__submit {
  flex: none;
  height: var(--gb-ask-input-h);
  margin: 0;
  padding: 0 var(--gb-space-5);
  border: 0;
  border-radius: var(--gb-radius-pill);
  background-color: var(--gb-ask-chip-bg);
  color: var(--gb-ask-chip-fg);
  font: inherit;
  font-size: var(--gb-ask-chip-fs);
  font-weight: var(--gb-fw-bold);
  cursor: pointer;
  transition: background-color var(--gb-header-transition), color var(--gb-header-transition), opacity var(--gb-header-transition);
}
.gb-ask .gb-ask__submit:disabled { opacity: var(--gb-ask-submit-off-opacity); cursor: default; }
.gb-ask .gb-ask__submit:not(:disabled):hover,
.gb-ask .gb-ask__submit:not(:disabled):focus-visible { background-color: var(--gb-ask-chip-hover-bg); color: var(--gb-ask-chip-hover-fg); }
/* 回答（入力欄の上に出る） */
.gb-ask__answer {
  display: flex;
  align-items: flex-end;
  gap: var(--gb-space-2);
  margin: 0 0 var(--gb-space-4);
}
.gb-ask__answer[hidden] { display: none; }
.gb-ask--mv .gb-ask__answer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
}
.gb-ask__bubble {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-height: var(--gb-ask-answer-max-h);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--gb-ask-bubble-pad);
  border-radius: var(--gb-ask-bubble-radius) var(--gb-ask-bubble-radius) var(--gb-radius-sm) var(--gb-ask-bubble-radius); /* 右下 = g キューブ側だけ角を立てる */
  background-color: var(--gb-color-bg);
  box-shadow: var(--gb-ask-shadow);
}
.gb-js .gb-ask.is-open .gb-ask__bubble { animation: gb-ask-in 0.35s var(--gb-ease-pop) both; transform-origin: 100% 100%; }
@keyframes gb-ask-in {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.gb-ask__asked {
  margin: 0 var(--gb-space-6) var(--gb-space-2) 0;
  color: var(--gb-color-text-muted);
  font-size: var(--gb-fs-xs);
  line-height: 1.4;
}
.gb-ask__asked:empty { display: none; }
.gb-ask__text { margin: 0; overflow-wrap: anywhere; }
.gb-ask.is-loading .gb-ask__text { color: var(--gb-color-text-muted); }
.gb-ask__sources {
  display: flex;
  flex-direction: column;
  gap: var(--gb-space-1);
  margin: var(--gb-space-3) 0 0;
  padding: var(--gb-space-3) 0 0;
  border-top: 1px solid var(--gb-color-line);
  list-style: none;
  font-size: var(--gb-fs-sm);
}
.gb-ask__sources:empty { display: none; }
.gb-ask__sources li { margin: 0; padding: 0; }
.gb-ask__sources a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.gb-ask__sources a::before { content: "→ "; text-decoration: none; display: inline-block; }
.gb-ask__sources a:hover,
.gb-ask__sources a:focus-visible { text-decoration: none; }
/* AI の回答の注記（小さく・薄く） */
.gb-ask__note {
  margin: var(--gb-space-3) 0 0;
  color: var(--gb-color-text-muted);
  font-size: var(--gb-ask-note-fs);
  line-height: 1.5;
}
.gb-ask__note[hidden] { display: none; }
.gb-ask .gb-ask__close {
  position: absolute;
  top: var(--gb-space-2);
  right: var(--gb-space-2);
  width: var(--gb-space-6);
  height: var(--gb-space-6);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--gb-radius-pill);
  background: none;
  color: var(--gb-color-text-muted);
  cursor: pointer;
}
.gb-ask__close::before,
.gb-ask__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 45%;
  height: 1px;
  background-color: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.gb-ask__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.gb-ask__close:hover,
.gb-ask__close:focus-visible { color: var(--gb-color-text); }
/* g キューブ（Let's talk → お問い合わせ） */
.gb-ask__talk { flex: none; --gb-gbox-size: var(--gb-ask-gbox-size); line-height: 0; }
.gb-ask.is-loading .gb-ask__talk { visibility: hidden; }
@media (max-width: 599px) {
  .gb-ask__chips { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .gb-js .gb-ask.is-open .gb-ask__bubble { animation: none; }
}

/* =========================================================
   TOP KV（SWELL メインビジュアル）スマホ版の組み直し（2026-10-20）＋ トップのヘッダー（SP）の文字色
   KV（.p-mainVisual / .gb-kv-cubes）と聞いてみる（.gb-ask--mv）の SP ルールより後ろに置く（同じ詳細度で勝つため）。原本 _claude/diagrams/kv-sp-final.css をそのまま。値は tokens.css の --gb-kv-sp-* / --gb-ask-*
   方針: SP（781px 以下）は上から「ヘッダー → キューブ → 見出し＋リード → 候補ボタン（横スクロール 1 行）→ 入力欄 → Scroll」の 1 本の縦の流れ。
         文字・質問ボックス・Scroll は FV の下端からの距離で積む（高さが変わる候補ボタンを 1 行に固定して、重なりをなくす）。
         PC（782px 以上）は変更なし
   ========================================================= */

@media (max-width: 781px) {
  /* ---- トップのヘッダー（KV の上にいる間）: ハンバーガー・検索・ヘッダー下のメニュー帯も黒（PC の .c-gnav と同じ扱い）---- */
  html.gb-header-fixed:not(.gb-past-kv) .l-header .c-iconBtn,
  html.gb-header-fixed:not(.gb-past-kv) .l-header .c-iconBtn__icon,
  html.gb-header-fixed:not(.gb-past-kv) .l-header .p-spHeadMenu a { color: var(--gb-header-light-fg); }
  html.gb-header-fixed:not(.gb-past-kv) .l-header .p-spHeadMenu a { opacity: var(--gb-header-sp-menu-opacity); }
  /* KV を過ぎたら白（黒帯） */
  html.gb-header-fixed.gb-past-kv .l-header .c-iconBtn,
  html.gb-header-fixed.gb-past-kv .l-header .c-iconBtn__icon,
  html.gb-header-fixed.gb-past-kv .l-header .p-spHeadMenu a { color: var(--gb-header-dark-fg); opacity: 1; }
  .p-spHeadMenu { scrollbar-width: none; } /* 横スクロールのバーを出さない（iOS は元々出ない） */

  /* ---- FV の高さ: SP は画面の高さちょうど（SWELL の SP 用の高さ設定〔幅の約 1.95 倍〕を使わない。背の低い端末で入力欄・Scroll が画面の外に出ていた）---- */
  :root .p-mainVisual.-height-full,
  :root .p-mainVisual.-height-full .p-mainVisual__inner,
  :root .p-mainVisual.-height-full .p-mainVisual__slide { height: auto; min-height: var(--gb-kv-min-h); }

  /* ---- 見出し＋リード: FV の下端から積む（追加CSS の top: 25% をやめる）---- */
  :root #body_wrap .p-mainVisual .p-mainVisual__textLayer {
    position: absolute;
    top: auto;
    bottom: var(--gb-kv-sp-text-bottom);
    left: 50%;
    height: auto;
    transform: translateX(-50%);
    padding: 0 var(--gb-kv-sp-pad);
  }
  :root #body_wrap .p-mainVisual:not(.has-gb-ask) .p-mainVisual__textLayer { bottom: var(--gb-kv-sp-text-bottom-noask); } /* JS なし（質問ボックスが差し込まれない） */
  :root #body_wrap .p-mainVisual .p-mainVisual__slideTitle {
    margin: 0;
    font-size: var(--gb-kv-sp-title-fs);
    line-height: var(--gb-kv-sp-title-lh);
    letter-spacing: var(--gb-kv-sp-title-ls);
    white-space: nowrap; /* 「真摯に「向き合う」会社。」を 1 行に */
  }
  /* 黄色いドットは行頭の左外に（PC と同じ扱い。行内に置くと 375px で見出しが折り返す） */
  :root #body_wrap .p-mainVisual .p-mainVisual__slideTitle::before {
    position: absolute;
    left: var(--gb-kv-sp-dot-left);
    top: 0.58em;
    width: var(--gb-kv-sp-dot-size);
    height: var(--gb-kv-sp-dot-size);
    margin: 0;
  }
  :root #body_wrap .p-mainVisual .p-mainVisual__slideText {
    margin-top: var(--gb-kv-sp-lead-mt);
    font-size: var(--gb-kv-sp-lead-fs);
    line-height: var(--gb-kv-sp-lead-lh);
    letter-spacing: 0.02em;
  }
  /* CONTACT US ボタン: SP では出さない（候補ボタン「相談したい」とフッター直前の CTA が同じ役目。重ねると入力欄とぶつかる） */
  :root #body_wrap .p-mainVisual .p-mainVisual__slideBtn { display: none; }
  /* 回答のフキダシが開いているあいだは見出し＋リードを消す（フキダシの下から文字が透けない） */
  .p-mainVisual:has(.gb-ask.is-open) .p-mainVisual__textLayer { opacity: 0; transition: opacity var(--gb-header-transition); }

  /* ---- 質問ボックス: 左右いっぱい、Scroll の上 ---- */
  .p-mainVisual > .gb-ask.gb-ask--mv {
    right: var(--gb-kv-sp-pad);
    left: var(--gb-kv-sp-pad);
    bottom: var(--gb-kv-sp-ask-bottom);
    width: auto;
  }
  /* 候補ボタン: 折り返さず横スクロール 1 行（高さを固定して見出しとの重なりをなくす）。右端をフェードして続きがあることを見せる */
  .gb-ask--mv .gb-ask__chips {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--gb-kv-sp-pad)) var(--gb-ask-sp-chips-gap);
    padding: 0 var(--gb-kv-sp-pad);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--gb-ask-sp-chips-fade)), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - var(--gb-ask-sp-chips-fade)), transparent);
  }
  .gb-ask--mv .gb-ask__chips::-webkit-scrollbar { display: none; }
  .gb-ask--mv .gb-ask__chips li { flex: none; }
  .gb-ask--mv .gb-ask__chip { padding: var(--gb-ask-sp-chip-pad); font-size: var(--gb-ask-sp-chip-fs); white-space: nowrap; }
  .gb-ask--mv .gb-ask__talk { --gb-gbox-size: var(--gb-ask-sp-gbox-size); }

  /* ---- キューブ: 文字の上の空いた場所へ（SVG は高さ基準で slice されるので、縦に伸ばして上へずらす = 中心が上がる）---- */
  .p-mainVisual .gb-kv-cubes svg {
    position: absolute;
    left: 0;
    top: var(--gb-kv-sp-cube-top);
    width: 100%;
    height: var(--gb-kv-sp-cube-h);
  }
  .p-mainVisual .gb-kv-cubes__pattern { opacity: var(--gb-kv-sp-pattern-opacity); }
  .p-mainVisual .gb-kv-drop { z-index: 1; --gb-kvc-drop-from: var(--gb-kv-sp-drop-from); } /* しずくは文字・質問ボックスの後ろを落ちる */

  /* ---- Scroll ---- */
  :root #body_wrap .p-mainVisual .p-mainVisual__scroll { bottom: var(--gb-kv-sp-scroll-bottom); }
}

/* ---- FV のキャッチの視認性: 見出し・リードの「行ごと」に半透明の白い帯（PC・SP 共通。模様の上でも読める）----
   リードは <br> 区切りの 1 要素なので display:inline + box-decoration-break:clone で行ごとに帯が切れる。
   末尾の <br>（カスタマイザーの文末改行）は空の帯になるので消す。値は tokens.css の --gb-kv-band-* */
:root #body_wrap .p-mainVisual .p-mainVisual__textLayer { display: block; }
:root #body_wrap .p-mainVisual .p-mainVisual__slideTitle {
  display: table; /* 文字幅ぶんだけの帯（block だと横いっぱいになる） */
  padding: var(--gb-kv-band-pad-y) var(--gb-kv-band-pad-x);
  margin-bottom: var(--gb-kv-band-title-mb);
  background: var(--gb-kv-band-bg);
}
:root #body_wrap .p-mainVisual .p-mainVisual__slideText {
  display: inline;
  margin: 0;
  padding: var(--gb-kv-band-pad-y) var(--gb-kv-band-pad-x);
  background: var(--gb-kv-band-bg);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
:root #body_wrap .p-mainVisual .p-mainVisual__slideText br:last-child { display: none; }
/* PC: 上の display:block で、SWELL の「flex で上下中央」が外れて文字が上に寄るので、align-content で同じ上下中央に戻す。
   CONTACT US は block のままだと横いっぱいになって中のボタンが中央へ動くので、中身の幅（左寄せ）に。→ PC の位置は変更前と同じ（帯のぶん数 px だけ） */
@media (min-width: 782px) {
  :root #body_wrap .p-mainVisual .p-mainVisual__textLayer { align-content: center; }
  :root #body_wrap .p-mainVisual .p-mainVisual__slideBtn { display: table; }
}
/* PC: 見出しの黄色いドットは白い帯の内側（スマホと同じ）。上の「帯」の padding より後ろに置く（同じ詳細度なので後ろが勝つ） */
@media (min-width: 960px) {
  :root #body_wrap .p-mainVisual .p-mainVisual__slideTitle { padding-left: calc(var(--gb-kv-band-pad-x) + var(--gb-kv-dot-size) + var(--gb-kv-dot-gap)); }
}
@media (max-width: 781px) {
  :root #body_wrap .p-mainVisual .p-mainVisual__slideTitle::before { left: calc(-1 * (var(--gb-kv-sp-dot-size) + 8px)); } /* ドットは帯の左外（余白の中） */
}

/* =========================================================
   ボックスアニメーション（.gb-box = [gb_box]。inc/gootbox-box.php / assets/js/gb-box.js）
   190px 四方の絵（.gbb-in）を --gbb-size に合わせて拡大縮小する。中の px は 190px の絵の中の寸法（箱の形そのもの）。
   箱 = CSS の立方体（1 辺 --gb-box-edge。影 --gb-box-shadow-w より箱の幅〔1 辺 × 1.41〕を小さくして、箱の下に影がのぞくようにしてある）を等角投影の角度（rotateX -35.264deg ＋ rotateY 45deg）で見たもの。
        縦の辺と斜めの辺が同じ長さに見える（以前は rotateX -28deg ＋ 縦 0.8 倍で、つぶれて見えていた）。
   面: f1 = 手前右 / f4 = 手前左 / f2 = 奥左 / f3 = 奥右 / f5 = 箱の口（中を隠す面）/ lid = フタ（奥右の辺が蝶番）。
   フタが開いたとき奥左の辺を描かない: f2 の上辺と f5 の奥左の辺の線を消してある（閉じているときはフタの線が同じ場所にある）。
   動きは <html>.gb-js のときだけ（無ければ閉じた箱が静止）。色・線・時間は tokens.css の --gb-box-*
   ※ クラス名・@keyframes の頭は gbb（もとの Smart Slider 用 HTML は gbx。同じページに残っていても上書きされないように変えてある）
   ========================================================= */
.gb-box {
  --gbb-size: var(--gb-box-size);
  --gbb-bg:   var(--gb-box-dark-bg);
  --gbb-line: var(--gb-box-dark-line);
  --gbb-shadow: var(--gb-box-dark-shadow);
  --gbb-dur:  var(--gb-box-dur);
  position: relative;
  width: calc(var(--gbb-size) * 1px);
  height: calc(var(--gbb-size) * 1px);
  pointer-events: none;
  user-select: none;
}
.gb-box--light {
  --gbb-bg:   var(--gb-box-light-bg);
  --gbb-line: var(--gb-box-light-line);
  --gbb-shadow: var(--gb-box-light-shadow);
}
.gb-box--center { margin-left: auto; margin-right: auto; }
.gb-box--right  { margin-left: auto; }
.gbb-in {
  position: absolute;
  top: 0;
  left: 0;
  width: 190px;
  height: 190px;
  transform-origin: top left;
  transform: scale(calc(var(--gbb-size) / 190));
}
.gbb-sh {
  position: absolute;
  left: calc(50% - var(--gb-box-shadow-w) / 2);
  bottom: var(--gb-box-shadow-bottom);
  width: var(--gb-box-shadow-w);
  height: 16px;
  margin: 0 !important;
  border-radius: 50%;
  background: var(--gbb-shadow);
}
.gbb-sq { position: absolute; inset: 0; transform-origin: 50% 84%; }
.gbb-cube {
  position: absolute;
  /* 位置は left / top だけで決める（margin は使わない: SWELL の「先頭の要素は margin-top: 0」に消されて、箱が下にずれて影に重なっていた） */
  left: calc(50% - var(--gb-box-edge) / 2);
  top: calc(var(--gb-box-top) - var(--gb-box-edge) / 2);
  width: var(--gb-box-edge);
  height: var(--gb-box-edge);
  margin: 0 !important;
  transform: rotateX(-35.264deg);
  transform-style: preserve-3d;
}
.gbb-spin { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(45deg); }
.gbb-f,
.gbb-lid {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: var(--gb-box-line-w) solid var(--gbb-line);
  background: var(--gbb-bg);
}
.gbb-f1 { transform: rotateY(0deg) translateZ(calc(var(--gb-box-edge) / 2)); }
.gbb-f2 { transform: rotateY(180deg) translateZ(calc(var(--gb-box-edge) / 2)); border-top-color: transparent; }
.gbb-f3 { transform: rotateY(90deg) translateZ(calc(var(--gb-box-edge) / 2)); }
.gbb-f4 { transform: rotateY(-90deg) translateZ(calc(var(--gb-box-edge) / 2)); }
.gbb-f5 { transform: rotateX(90deg) translateZ(calc(var(--gb-box-edge) / 2)); border-top-color: transparent; }
.gbb-lidw { position: absolute; inset: 0; transform: rotateX(90deg) translateZ(calc(var(--gb-box-edge) / 2)); transform-style: preserve-3d; }
.gbb-lid { transform-origin: 100% 50%; }
.gbb-svg { position: absolute; inset: 0; overflow: visible; }
.gbb-svg feFlood { flood-color: var(--gbb-bg); }
.gbb-svg [stroke] { stroke: var(--gbb-line); }
.gbb-bgf { fill: var(--gbb-bg); }
.gbb-lnf { fill: var(--gbb-line); }
/* ？！Why? の文字: SWELL の「* { font-family: inherit; font-size: inherit }」に負けないよう !important で固定（大きさは gb-box.js の --fs） */
.gb-box .gbb-svg text {
  font-family: var(--gb-box-text-font) !important;
  font-weight: var(--gb-box-text-fw) !important;
  font-size: var(--fs, 50px) !important;
  line-height: 1;
  letter-spacing: 0;
}
/* gb-box.js が中身を足した直後に、箱と中身の動きを同時に始め直すための一瞬の停止 */
.gb-box.gbb-reset,
.gb-box.gbb-reset * { animation: none !important; }
.gb-js .gbb-sh   { animation: gbbShadow var(--gbb-dur) cubic-bezier(.4,0,.2,1) infinite; }
.gb-js .gbb-sq   { animation: gbbSquash var(--gbb-dur) cubic-bezier(.4,0,.2,1) infinite; }
.gb-js .gbb-spin { animation: gbbSpin var(--gbb-dur) cubic-bezier(.4,0,.2,1) infinite; }
.gb-js .gbb-lid  { animation: gbbLid var(--gbb-dur) cubic-bezier(.35,.8,.35,1) infinite; }
@keyframes gbbSpin   { 0%,4% { transform: rotateY(45deg); } 32%,100% { transform: rotateY(-315deg); } }
@keyframes gbbSquash { 0%,32% { transform: translateY(0) scale(1,1); } 38% { transform: translateY(7px) scale(1.08,.84); } 44% { transform: translateY(-3px) scale(.95,1.06); } 50%,100% { transform: translateY(0) scale(1,1); } }
@keyframes gbbLid    { 0%,44% { transform: rotateY(0deg); } 50% { transform: rotateY(188deg); } 55% { transform: rotateY(180deg); } 78% { transform: rotateY(180deg); } 86%,100% { transform: rotateY(0deg); } }
@keyframes gbbShadow { 0%,4% { transform: scale(1,1); } 38% { transform: scale(1.18,1); } 44% { transform: scale(.86,1); } 50%,100% { transform: scale(1,1); } }
@keyframes gbbItem   { 0%,45% { transform: translateY(18px) scale(0); opacity: 0; } 46% { transform: translateY(8px) scale(.4); opacity: 1; } 54% { transform: translateY(-58px) scale(1.15); opacity: 1; } 60% { transform: translateY(-48px) scale(1); opacity: 1; } 70% { transform: translateY(-53px) scale(1); opacity: 1; } 78% { transform: translateY(-48px) scale(1); opacity: 1; } 85%,100% { transform: translateY(12px) scale(0); opacity: 0; } }
@keyframes gbbLaunch { 0%,45% { transform: translateY(20px) scale(.2); opacity: 0; } 47% { transform: translateY(4px) scale(.7); opacity: 1; } 52% { transform: translateY(-30px) scale(1); opacity: 1; } 70% { transform: translateY(-230px) scale(1); opacity: 1; } 70.1%,100% { transform: translateY(20px) scale(.2); opacity: 0; } }
@keyframes gbbPiece  { 0%,45% { transform: translate(0,0) scale(0); opacity: 0; } 48% { transform: translate(0,-12px) scale(1) rotate(0deg); opacity: 1; } 72% { transform: translate(var(--dx,0px),var(--dy,-60px)) rotate(var(--rr,180deg)) scale(1); opacity: 1; } 82%,100% { transform: translate(var(--dx,0px),var(--dy,-60px)) rotate(var(--rr,180deg)) scale(0); opacity: 0; } }
@keyframes gbbWiggle { 0%,50% { transform: rotate(0deg); } 56% { transform: rotate(-11deg); } 62% { transform: rotate(9deg); } 68% { transform: rotate(-6deg); } 74% { transform: rotate(4deg); } 80%,100% { transform: rotate(0deg); } }
@keyframes gbbPulse  { 0%,55% { transform: scale(1); } 60% { transform: scale(1.28); } 64% { transform: scale(1); } 69% { transform: scale(1.22); } 74%,100% { transform: scale(1); } }
@keyframes gbbBlink  { 0%,54% { opacity: 0; } 58% { opacity: 1; } 62% { opacity: .2; } 66% { opacity: 1; } 70% { opacity: .3; } 74% { opacity: 1; } 80%,100% { opacity: 0; } }
@keyframes gbbBurst  { 0%,46% { transform: scale(0); opacity: 0; } 49% { transform: scale(.45); opacity: 1; } 58% { transform: scale(1); opacity: 1; } 66%,100% { transform: scale(1.18); opacity: 0; } }
@keyframes gbbHop    { 0%,45% { transform: translate(0,10px) scale(0); opacity: 0; } 47% { transform: translate(0,-16px) scale(1); opacity: 1; } 53% { transform: translate(-18px,-72px) scale(1); opacity: 1; } 60% { transform: translate(-42px,28px) scale(1.05,.85); opacity: 1; } 66% { transform: translate(-58px,-22px) scale(1); opacity: 1; } 72% { transform: translate(-72px,28px) scale(1.05,.88); opacity: 1; } 76% { transform: translate(-75px,28px) scale(1); opacity: 1; } 84%,100% { transform: translate(-75px,28px) scale(0); opacity: 0; } }

/* =========================================================
   フッター CONTACT（.gb-footer-contact = patterns/footer-contact.php）— Smart Slider の代わり
   左に 見出し（Contact）・文章・ボタン、右下に箱のアニメーション（[gb_box]）。黒背景のフッター用（文字は白）。
   値は tokens.css の --gb-fc-*
   ========================================================= */
.gb-footer-contact,
.post_content .gb-footer-contact {
  position: relative;
  max-width: var(--gb-fc-max-w);
  margin: 0;
  padding: 0 0 var(--gb-fc-pad-b); /* 下の余白 = 箱の置き場 */
  color: var(--gb-fc-color);
  text-align: left;
  /* 黒地に白い文字は太って見えるので、細く描く（以前の Smart Slider 版と同じ見え方） */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* ※ SWELL（クラシックテーマ）ではグループの中身が .wp-block-group__inner-container に包まれるので、子孫セレクタで書く（> は使わない） */
.gb-footer-contact .wp-block-group__inner-container { position: static; margin: 0; padding: 0; max-width: none; }
.gb-footer-contact .gb-footer-contact__title,
.post_content .gb-footer-contact p.gb-footer-contact__title {
  margin: 0 0 var(--gb-fc-title-mb);
  font-family: var(--gb-font-heading);
  font-size: var(--gb-fc-title-fs);
  font-weight: var(--gb-fw-regular);
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.gb-footer-contact .gb-footer-contact__text,
.post_content .gb-footer-contact p.gb-footer-contact__text {
  margin: 0 0 var(--gb-fc-text-mb);
  font-size: var(--gb-fc-text-fs);
  font-weight: var(--gb-fw-regular);
  line-height: var(--gb-fc-text-lh);
}
.gb-footer-contact .gb-footer-contact__buttons,
.post_content .gb-footer-contact .gb-footer-contact__buttons { margin: 0; justify-content: flex-start; }
/* ボタンの幅は外側（.wp-block-button）で決める（中のリンクに min-width: 〜% を書いても効かないため） */
.gb-footer-contact .gb-footer-contact__buttons .wp-block-button { width: min(var(--gb-fc-button-w), 100%); margin: 0; }
/* ボタン: 白い枠線だけ・文字は中央（サイト共通ボタンのドットと矢印は出さない）。hover で白地に黒文字 */
.gb-footer-contact .gb-footer-contact__buttons .wp-block-button .wp-block-button__link.wp-element-button,
.gb-footer-contact .gb-footer-contact__buttons .wp-block-button .wp-block-button__link.wp-element-button:hover,
.gb-footer-contact .gb-footer-contact__buttons .wp-block-button .wp-block-button__link.wp-element-button:focus-visible {
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: var(--gb-fc-button-h);
  min-height: 0;
  padding: 0 var(--gb-space-3);
  border: var(--gb-border) solid var(--gb-fc-color);
  background-color: transparent;
  color: var(--gb-fc-color);
  font-family: var(--gb-font-base);
  font-size: var(--gb-fc-button-fs);
  font-weight: var(--gb-fw-regular);
  letter-spacing: 0.06em;
  text-align: center;
  transition: background-color var(--gb-header-transition), color var(--gb-header-transition);
}
.gb-footer-contact .gb-footer-contact__buttons .wp-block-button .wp-block-button__link.wp-element-button:hover,
.gb-footer-contact .gb-footer-contact__buttons .wp-block-button .wp-block-button__link.wp-element-button:focus-visible {
  background-color: var(--gb-fc-color);
  color: var(--gb-color-text);
}
.gb-footer-contact .gb-footer-contact__buttons .wp-block-button .wp-block-button__link.wp-element-button::before,
.gb-footer-contact .gb-footer-contact__buttons .wp-block-button .wp-block-button__link.wp-element-button::after { content: none; }
/* 箱はボタンのすぐ右・少し下（以前の Smart Slider 版の位置関係）。SP は文章の下・右寄せ
   大きさはここで決める（パターンの [gb_box size="…"] より優先） */
.gb-footer-contact .gb-box {
  --gbb-size: var(--gb-fc-box-size) !important;
  position: absolute;
  left: calc(var(--gb-fc-button-w) + var(--gb-fc-box-gap));
  bottom: 0;
  margin: 0;
}
.gb-footer-contact p:empty { display: none; } /* ショートコードブロックのまわりにできる空の段落 */
@media (max-width: 599px) {
  .gb-footer-contact,
  .post_content .gb-footer-contact { padding-bottom: 0; }
  .gb-footer-contact .gb-box { position: relative; left: auto; margin: var(--gb-space-5) 0 0 auto; }
}

/* =========================================================
   SERVICE 概念図のスマホ版（.gb-svc-sp = [gb_service_diagram_sp]。inc/gootbox-service-diagram-sp.php）— サンプル・β
   スマホ幅（599px 以下）のときだけ出る縦長の動画。このショートコードがページにあるときだけ、PC 用の図（.gb-svc）をスマホで隠す。
   外すとき: ショートコードブロックを消すだけ（スマホでも PC 用の図に戻る）。値は tokens.css の --gb-svc-sp-*
   ========================================================= */
.gb-svc-sp { display: none; }
@media (max-width: 599px) {
  .gb-svc-sp {
    display: block;
    position: relative;
    width: 100%;
    max-width: var(--gb-svc-sp-max-w);
    margin: var(--gb-svc-sp-my) auto;
    aspect-ratio: 780 / 1688;
  }
  .gb-svc-sp__still,
  .gb-svc-sp__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
    pointer-events: none;
  }
  /* JS なし・動きを減らす設定・再生できなかったとき（.is-still）は完成形の静止画。それ以外は動画 */
  .gb-svc-sp__video { display: none; }
  .gb-js .gb-svc-sp:not(.is-still) .gb-svc-sp__video { display: block; }
  .gb-js .gb-svc-sp:not(.is-still) .gb-svc-sp__still { display: none; }
  /* スマホ版があるページでは、PC 用の図を隠す */
  body:has(.gb-svc-sp) .gb-svc { display: none; }
}


/* =========================================================
   SERVICE ポジション図（.gb-pos）— [gb_service_schema] / inc/gootbox-service-position.php / patterns/top-service-position.php
   原本: _reference/service-position/position-diagram-v3.html の .gb-pos 以下（:root / body / .gb-page / .gb-replay は持ち込まない）
   黒い箱（六角＝ロゴのキューブの輪郭）を中心に、3者の「〜で終わる」線を箱から伸びる太線が引き継ぐ。
   動き（assets/js/gb-service-position.js）は <html>.gb-js のときだけ .is-play を付ける。animation は backwards なので、付くまで・JS 無効でも完成形が見える。
   値は tokens.css の --gb-pos-*（3 色は --gb-svc-magenta / -blue / -yellow）。SWELL の本文スタイルに負けないよう、部品のセレクタは .gb-pos 配下に書く。
   ========================================================= */
.post_content .wp-block-group.gb-pos-section { padding-block: var(--gb-pos-my); }
/* 幅: alignfull グループの中は記事幅に絞られるので、.gb-svc と同じく --gb-pos-max-w（既定: サイト幅）で描き、はみ出すぶんは負のマージンで中央に */
.post_content .wp-block-group.gb-pos-section > .gb-pos,
.gb-pos {
  --gb-pos-w: min(var(--gb-pos-max-w), 100vw - var(--gb-gutter) * 2);
  width: var(--gb-pos-w);
  max-width: none;
  margin-inline: calc(50% - var(--gb-pos-w) / 2);
}
.gb-pos {
  --core: var(--gb-pos-core);
  --ease: var(--gb-pos-ease);
  font-family: var(--gb-pos-font-jp); color: var(--gb-pos-ink);
  letter-spacing: normal; /* サイト本文の字間（--gb-tracking-body）を図の中に持ち込まない（原本は字間なし） */
  line-height: 1.5; font-feature-settings: "palt"; -webkit-font-smoothing: antialiased;
}
.gb-pos * { box-sizing: border-box; margin: 0; padding: 0; }
/* SWELL の本文（.post_content ul / li / p / h2）の余白・行頭記号を消す（:where で詳細度を上げすぎない＝下の部品ルールが勝つ） */
.post_content .gb-pos :where(p, ul, li, h2, small, em, b, strong) { margin: 0; padding: 0; list-style: none; }
.post_content .gb-pos li::before, .post_content .gb-pos li::marker { content: none; }
/* SWELL の本文 h2 装飾（背景・帯・下線）を図の見出しには効かせない */
.post_content .gb-pos h2.gb-pos__title,
body .post_content .gb-pos h2.gb-pos__title { border: 0; background: none; box-shadow: none; padding: 0; margin: 0; color: inherit; font-family: inherit; }
.post_content .gb-pos h2.gb-pos__title::before, .post_content .gb-pos h2.gb-pos__title::after { content: none; }

/* ---- header ---- */
.gb-pos .gb-pos__head { display: flex; flex-direction: column; align-items: center; gap: var(--gb-pos-head-gap); margin-bottom: clamp(8px, 1.5vw, 20px); text-align: center; } /* 2026-10-23: TOP の EVENT / INTERVIEW の見出しと同じ中央揃え */
.gb-pos .gb-pos__eyebrow { font-family: var(--gb-pos-font-en); font-weight: var(--gb-fw-bold); font-size: 12px; letter-spacing: .18em; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.gb-pos .gb-pos__eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--gb-pos-ink); }
.gb-pos .gb-pos__title { font-size: var(--gb-pos-title-fs); font-weight: var(--gb-pos-title-fw); letter-spacing: .02em; line-height: var(--gb-pos-title-lh); text-wrap: balance; } /* 2026-10-23: EVENT / INTERVIEW の h2 と同じ大きさ・細さ（--gb-h2-*） */
.gb-pos .gb-pos__title b { font-weight: var(--gb-fw-bold); margin-inline: .1em 0; display: inline-block; }
.gb-pos .gb-pos__lead { font-size: clamp(13px, 1.15vw, 15px); line-height: 1.9; font-weight: var(--gb-fw-medium); max-width: 32em; text-wrap: pretty; }

/* ---- stage ---- */
.gb-pos .gb-pos__stage { display: grid; grid-template-columns: minmax(0, 1fr) var(--core) minmax(0, 1fr); grid-template-areas: "l core r" ". b ."; position: relative; z-index: 0; padding-top: calc(var(--core) * .36); }
.gb-pos .gb-arm--l { grid-area: l; }
.gb-pos .gb-arm--r { grid-area: r; }
.gb-pos .gb-arm--b { grid-area: b; }
.gb-pos .gb-zone { grid-area: core; position: relative; }
/* 空白のゾーン: 3者の線はこの縁で止まり、箱からの太線だけが渡る */
.gb-pos .gb-zone::before { content: ""; position: absolute; inset: -27.5%; background: var(--gb-pos-zone); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); z-index: -1; }

/* 3者（左右）: 上=英字ラベル＋「〜で終わる」 / 中=社名＋線 / 下=補足。中段が箱の中心に揃う（v3 で社名と「〜で終わる」を上下入れ替え） */
.gb-pos .gb-arm--l, .gb-pos .gb-arm--r { display: grid; grid-template-rows: 1fr auto 1fr; row-gap: 14px; }
.gb-pos .gb-arm--r { text-align: right; }
.gb-pos .gb-top { align-self: end; }
.gb-pos .gb-who small { display: block; font-family: var(--gb-pos-font-en); font-weight: var(--gb-fw-bold); font-size: 11px; letter-spacing: .18em; color: var(--gb-pos-mute); margin-bottom: 8px; }
.gb-pos .gb-name { font-size: clamp(24px, 2.5vw, 34px); font-weight: var(--gb-fw-bold); letter-spacing: .04em; line-height: 1.2; white-space: nowrap; }
.gb-pos .gb-mid { display: flex; align-items: center; gap: 14px; }
.gb-pos .gb-end { font-size: clamp(15px, 1.45vw, 18px); font-weight: var(--gb-fw-bold); white-space: nowrap; letter-spacing: .03em; position: relative; width: fit-content; } /* relative = もやもや（.gb-scr）の基準 */
.gb-pos .gb-arm--r .gb-end { margin-left: auto; }
.gb-pos .gb-sub { align-self: start; font-size: 12.5px; color: var(--gb-pos-mute); line-height: 1.8; list-style: none; }

/* 線: reach=相手の届く範囲（細・止まる） / bridge=gootbox が引き継ぐ（太） */
.gb-pos .gb-conn { flex: 1; display: flex; align-items: center; position: relative; min-width: 60px; }
.gb-pos .gb-reach { flex: 1; height: 15px; position: relative; }
.gb-pos .gb-reach::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--gb-pos-ink); }
.gb-pos .gb-reach::after { content: ""; position: absolute; top: 0; width: 1px; height: 15px; background: var(--gb-pos-ink); }
.gb-pos .gb-joint { width: 11px; height: 11px; flex: none; border: 1.5px solid var(--gb-pos-ink); background: var(--c); margin-inline: 7px 0; transition: transform .35s var(--ease); }
.gb-pos .gb-bridge { flex: none; width: calc(var(--core) * .275 - 5.5px); height: 3px; background: var(--gb-pos-ink); }
.gb-pos .gb-lbl { position: absolute; bottom: calc(50% + 16px); font-size: 12.5px; font-weight: var(--gb-fw-bold); letter-spacing: .04em; white-space: nowrap; font-style: normal; transition: transform .45s var(--ease); }
.gb-pos .gb-arm--l .gb-reach::after { right: 0; }
.gb-pos .gb-arm--l .gb-lbl { right: 12px; transform-origin: 100% 100%; }
.gb-pos .gb-arm--r .gb-conn { flex-direction: row-reverse; }
.gb-pos .gb-arm--r .gb-mid { flex-direction: row-reverse; }
.gb-pos .gb-arm--r .gb-reach::after { left: 0; }
.gb-pos .gb-arm--r .gb-joint { margin-inline: 0 7px; }
.gb-pos .gb-arm--r .gb-lbl { left: 12px; transform-origin: 0 100%; }

/* 下（AIツール）: 縦に同じ文法 */
.gb-pos .gb-arm--b { display: flex; flex-direction: column; align-items: center; text-align: center; }
.gb-pos .gb-arm--b .gb-conn { flex: none; flex-direction: column; width: 100%; min-width: 0; }
.gb-pos .gb-arm--b .gb-bridge { width: 3px; height: calc(var(--core) * .318 - 5.5px); }
.gb-pos .gb-arm--b .gb-joint { margin: 0 0 7px; }
.gb-pos .gb-arm--b .gb-reach { flex: none; width: 15px; height: 40px; }
.gb-pos .gb-arm--b .gb-reach::before { left: 7px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
.gb-pos .gb-arm--b .gb-reach::after { top: 0; left: 0; width: 15px; height: 1px; }
.gb-pos .gb-arm--b .gb-lbl { bottom: auto; top: calc(var(--core) * .318 - 48px); left: calc(50% + 18px); transform-origin: 0 50%; }
.gb-pos .gb-arm--b .gb-who, .gb-pos .gb-arm--b .gb-sub { align-self: center; }
.gb-pos .gb-arm--b .gb-who { margin-top: 16px; }
.gb-pos .gb-arm--b .gb-name { margin-top: 6px; }
.gb-pos .gb-arm--b .gb-sub { margin-top: 10px; }
.gb-pos .gb-arm--b .gb-sub li { display: inline; }
.gb-pos .gb-arm--b .gb-sub li + li::before { content: "／"; }

/* ---- core（黒い箱） ---- */
.gb-pos .gb-core { aspect-ratio: 1 / 1.1547; background: var(--gb-pos-ink); color: var(--gb-pos-paper); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 9%; position: relative; }
/* 箱の3面: 上面をわずかに明るく、右面をわずかに暗く */
.gb-pos .gb-core::before, .gb-pos .gb-core::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.gb-pos .gb-core::before { background: var(--gb-pos-face-top); clip-path: polygon(50% 0, 100% 25%, 50% 50%, 0 25%); }
.gb-pos .gb-core::after { background: var(--gb-pos-face-right); clip-path: polygon(50% 50%, 100% 25%, 100% 75%, 50% 100%); }
.gb-pos .gb-core > * { position: relative; z-index: 1; }
.gb-pos .gb-core__logo { width: 36%; height: auto; display: block; margin-bottom: 5%; }
.gb-pos .gb-core__jp { font-size: 11px; font-weight: var(--gb-fw-medium); letter-spacing: .14em; margin-bottom: 6px; opacity: .8; }
.gb-pos .gb-core__en { font-family: var(--gb-pos-font-en); font-weight: var(--gb-fw-bold); font-size: calc(var(--core) * .1); line-height: 1.1; letter-spacing: .035em; } /* 箱の中の Strategy Execution Partner（TOP・ループ版共通）。見本 v2 の更新で一回り小さく・字間広め */
.gb-pos .gb-core__tag { font-size: max(11.5px, calc(var(--core) * .034)); line-height: 1.6; font-weight: var(--gb-fw-medium); margin-top: 4%; }

/* 空白のラベル */
.gb-pos .gb-gap { position: absolute; left: 0; right: 0; bottom: calc(100% + var(--core) * .05); text-align: center; font-size: 11px; font-weight: var(--gb-fw-medium); letter-spacing: .2em; color: var(--gb-pos-mute); line-height: 1.7; }
.gb-pos .gb-gap b { display: block; font-family: var(--gb-pos-font-en); font-weight: var(--gb-fw-bold); font-size: 11px; letter-spacing: .2em; color: var(--gb-pos-ink); }

/* ---- 強調（v3。TOP = オンマウス / ループ版 = JS が .gb-arm に .is-hl を付ける） ----
   まずもやもや（.gb-scr）が「〜で終わる」の外側で動き出し、--gb-hl-delay（tokens.css）遅れてラベル（.gb-lbl）が --gb-pos-hl-scale 倍になり、ちょんちょん（.gb-hl--ticks）が付く。
   ほかの 2 つの腕は強調と同時に薄くなる。遅らせるのは強調中のセレクタだけ（外れるときは待たずに戻る）。黒い箱の中のロゴは動かさない。
   860px 以下では部品ごと出さない。動きを減らす設定では、もやもやは 1 コマで止める */
.gb-pos { --gb-hl-scale: var(--gb-pos-hl-scale); }
@media (max-width: 1100px) { .gb-pos { --gb-hl-scale: var(--gb-pos-hl-scale-md); } }
@media (max-width: 900px) { .gb-pos { --gb-hl-scale: var(--gb-pos-hl-scale-sm); } } /* 左の腕で、文末のもやもやとちょんちょんが重ならないように */
.gb-pos .gb-arm { transition: opacity .4s var(--ease); }
/* もやもや: 「で終わる」の文字の高さくらいの大きさで、外側（左の腕は文頭、右・下の腕は文末）に絵文字のように付く。4 コマを 0.133 秒ずつ切り替え */
.gb-pos .gb-scr { position: absolute; left: 100%; top: 50%; width: 1.3em; height: 1.3em; margin: -.65em 0 0 .3em; overflow: visible; pointer-events: none; z-index: 3;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.gb-pos .gb-arm--l .gb-scr { left: auto; right: 100%; margin: -.65em .3em 0 0; }
/* 1280px 以下は図の左右の余白が狭く（約 1240px までは --gb-gutter の 20px）、外側に付けると画面の端で欠けるので、左右の腕は中央側（左の腕は文末、右の腕は文頭）に付ける */
@media (min-width: 861px) and (max-width: 1280px) {
  .gb-pos .gb-arm--l .gb-scr { left: 100%; right: auto; margin: -.65em 0 0 .3em; }
  .gb-pos .gb-arm--r .gb-scr { left: auto; right: 100%; margin: -.65em .3em 0 0; }
}
.gb-pos .gb-scr path { fill: none; stroke: var(--gb-pos-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.gb-pos .gb-lbl > span { display: block; }
.gb-pos .gb-hl { position: absolute; height: auto; opacity: 0; visibility: hidden; pointer-events: none; }
.gb-pos .gb-hl--ticks { width: 1.25em; right: calc(100% - .2em); bottom: 62%; transition: opacity .2s ease; fill: none; stroke: var(--gb-pos-ink); stroke-width: 1.3; stroke-linecap: round; }
.gb-pos .gb-arm--r .gb-hl--ticks, .gb-pos .gb-arm--b .gb-hl--ticks { right: auto; left: calc(100% - .2em); transform: scaleX(-1); }
@keyframes gb-pos-boil { 0%, 25% { opacity: 1; } 25.01%, 100% { opacity: 0; } }
@media (min-width: 861px) {
  .gb-pos .gb-arm.is-hl .gb-lbl { transform: scale(var(--gb-hl-scale)); transition-delay: var(--gb-hl-delay); }
  .gb-pos .gb-arm.is-hl .gb-hl { opacity: 1; visibility: visible; transition-delay: calc(var(--gb-hl-delay) + .15s); }
  .gb-pos .gb-arm.is-hl .gb-scr { opacity: 1; visibility: visible; transition: opacity .2s ease; }
  .gb-pos .gb-arm.is-hl .gb-scr path { animation: gb-pos-boil .532s steps(1) infinite; }
  .gb-pos .gb-arm.is-hl .gb-scr path:nth-child(2) { animation-delay: .133s; }
  .gb-pos .gb-arm.is-hl .gb-scr path:nth-child(3) { animation-delay: .266s; }
  .gb-pos .gb-arm.is-hl .gb-scr path:nth-child(4) { animation-delay: .399s; }
  .gb-pos .gb-arm.is-hl .gb-joint { transform: scale(1.55) rotate(90deg); transition-delay: var(--gb-hl-delay); }
  .gb-pos .gb-pos__stage:has(.gb-arm.is-hl) .gb-arm:not(.is-hl) { opacity: .28; }
}
@media (min-width: 861px) and (hover: hover) {
  .gb-pos:not(.is-loop) .gb-arm:hover .gb-lbl { transform: scale(var(--gb-hl-scale)); transition-delay: var(--gb-hl-delay); }
  .gb-pos:not(.is-loop) .gb-arm:hover .gb-hl { opacity: 1; visibility: visible; transition-delay: calc(var(--gb-hl-delay) + .15s); }
  .gb-pos:not(.is-loop) .gb-arm:hover .gb-scr { opacity: 1; visibility: visible; transition: opacity .2s ease; }
  .gb-pos:not(.is-loop) .gb-arm:hover .gb-scr path { animation: gb-pos-boil .532s steps(1) infinite; }
  .gb-pos:not(.is-loop) .gb-arm:hover .gb-scr path:nth-child(2) { animation-delay: .133s; }
  .gb-pos:not(.is-loop) .gb-arm:hover .gb-scr path:nth-child(3) { animation-delay: .266s; }
  .gb-pos:not(.is-loop) .gb-arm:hover .gb-scr path:nth-child(4) { animation-delay: .399s; }
  .gb-pos:not(.is-loop) .gb-arm:hover .gb-joint { transform: scale(1.55) rotate(90deg); transition-delay: var(--gb-hl-delay); }
  .gb-pos:not(.is-loop) .gb-pos__stage:has(.gb-arm:hover) .gb-arm:not(:hover) { opacity: .28; }
}
@media (prefers-reduced-motion: reduce) {
  .gb-pos .gb-scr path { animation: none !important; }
  .gb-pos .gb-scr path:first-child { opacity: 1; }
}

/* ---- motion（.is-play が付いたときに一度。止まった状態が完成形） ---- */
@media (prefers-reduced-motion: no-preference) {
  .gb-pos.is-play .gb-who, .gb-pos.is-play .gb-name, .gb-pos.is-play .gb-end, .gb-pos.is-play .gb-sub { animation: gb-pos-up .7s var(--ease) backwards; }
  .gb-pos.is-play .gb-arm--r .gb-who, .gb-pos.is-play .gb-arm--r .gb-name, .gb-pos.is-play .gb-arm--r .gb-end, .gb-pos.is-play .gb-arm--r .gb-sub { animation-delay: .1s; }
  .gb-pos.is-play .gb-arm--b .gb-who, .gb-pos.is-play .gb-arm--b .gb-name, .gb-pos.is-play .gb-arm--b .gb-end, .gb-pos.is-play .gb-arm--b .gb-sub { animation-delay: .2s; }
  .gb-pos.is-play .gb-reach { animation: gb-pos-rl .8s var(--ease) .4s backwards; }
  .gb-pos.is-play .gb-arm--r .gb-reach { animation-name: gb-pos-rr; }
  .gb-pos.is-play .gb-arm--b .gb-reach { animation-name: gb-pos-rb; }
  .gb-pos.is-play .gb-zone::before { animation: gb-pos-zone .9s var(--ease) 1s backwards; }
  .gb-pos.is-play .gb-gap { animation: gb-pos-up .7s var(--ease) 1.3s backwards; }
  .gb-pos.is-play .gb-core { animation: gb-pos-core .9s var(--ease) 1.35s backwards; }
  .gb-pos.is-play .gb-core > * { animation: gb-pos-up .7s var(--ease) 1.75s backwards; }
  .gb-pos.is-play .gb-bridge { animation: gb-pos-x .55s var(--ease) 2.05s backwards; }
  .gb-pos.is-play .gb-arm--l .gb-bridge { transform-origin: right; }
  .gb-pos.is-play .gb-arm--r .gb-bridge { transform-origin: left; }
  .gb-pos.is-play .gb-arm--b .gb-bridge { transform-origin: top; animation-name: gb-pos-y; }
  .gb-pos.is-play .gb-joint { animation: gb-pos-pop .5s var(--ease) 2.5s backwards; }
  .gb-pos.is-play .gb-lbl { animation: gb-pos-up .6s var(--ease) 2.6s backwards; }
}
@keyframes gb-pos-rl { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes gb-pos-rr { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes gb-pos-rb { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes gb-pos-zone { from { opacity: 0; transform: scale(.9); } }
@keyframes gb-pos-up { from { opacity: 0; transform: translateY(10px); } }
@keyframes gb-pos-x { from { transform: scaleX(0); } }
@keyframes gb-pos-y { from { transform: scaleY(0); } }
@keyframes gb-pos-pop { from { transform: scale(0) rotate(-90deg); } }
@keyframes gb-pos-core { from { opacity: 0; transform: scale(.82) rotate(-30deg); } }

/* ---- 860px 以下: 箱＋3行リストに組み替え ---- */
@media (max-width: 860px) {
  .gb-pos { --core: var(--gb-pos-core-sp); }
  .gb-pos .gb-pos__stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "core" "l" "r" "b"; justify-items: center; padding-top: 0; }
  .gb-pos .gb-zone::before, .gb-pos .gb-gap { display: none; }
  .gb-pos .gb-zone { width: var(--core); } /* 箱を --gb-pos-core-sp の大きさにする（指定しないと中身の幅で約 300px に広がる） */
  .gb-pos .gb-arm--r .gb-conn { flex-direction: row; }
  .gb-pos .gb-pos__head { margin-bottom: 32px; }
  .gb-pos .gb-arm--l, .gb-pos .gb-arm--r, .gb-pos .gb-arm--b { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 18px; row-gap: 4px; text-align: left; align-items: start; justify-items: start; padding: 22px 0; border-bottom: 1px solid var(--gb-pos-hair); }
  .gb-pos .gb-arm--l { margin-top: 36px; border-top: 1px solid var(--gb-pos-ink); }
  .gb-pos .gb-arm--b { border-bottom-color: var(--gb-pos-ink); }
  .gb-pos .gb-mid { display: contents; }
  .gb-pos .gb-top { display: contents; }
  /* 左列 = 英字ラベルと社名 / 右列 =「〜で終わる」・補足・ラベル */
  .gb-pos .gb-who { grid-column: 1; grid-row: 1; width: 7.6em; align-self: start; }
  .gb-pos .gb-name, .gb-pos .gb-arm--b .gb-name { grid-column: 1; grid-row: 2 / span 2; font-size: 18px; align-self: start; margin: 0; }
  .gb-pos .gb-scr, .gb-pos .gb-hl { display: none; }
  .gb-pos .gb-arm--b .gb-sub li { display: block; }
  .gb-pos .gb-arm--b .gb-sub li + li::before { content: none; }
  .gb-pos .gb-end { grid-column: 2; grid-row: 1; font-size: 16px; margin: 0 !important; white-space: normal; width: auto; }
  .gb-pos .gb-sub { grid-column: 2; grid-row: 2; margin: 0 !important; }
  .gb-pos .gb-conn, .gb-pos .gb-arm--b .gb-conn { grid-column: 2; grid-row: 3; flex-direction: row; align-items: center; width: auto; min-width: 0; margin-top: 10px; gap: 8px; }
  .gb-pos .gb-reach, .gb-pos .gb-arm--b .gb-reach { display: none; }
  .gb-pos .gb-bridge, .gb-pos .gb-arm--b .gb-bridge { flex: none; width: 16px; height: 3px; order: 1; }
  .gb-pos .gb-joint, .gb-pos .gb-arm--b .gb-joint { margin: 0 !important; order: 2; }
  .gb-pos .gb-lbl, .gb-pos .gb-arm--b .gb-lbl { position: static; order: 3; font-size: 13px; letter-spacing: 0; white-space: normal; min-width: 0; }
  .gb-pos .gb-arm--b .gb-who { margin-top: 0; align-self: start; }
  .gb-pos .gb-arm--b .gb-sub { align-self: start; }
}

/* =========================================================
   SERVICE ポジション図 ループ版（.gb-pos--loop）— [gb_service_schema_more] / inc/gootbox-service-position-loop.php / patterns/service-position-loop.php
   原本: _reference/service-position/service-position-loop-v3.html の「ループ版の追加分」（v2 でパネルの配置・× の描き方・タブの位置を変更。v3 の追加分は CSS なし＝強調は上の .gb-pos 群の .is-hl）。図の部分は上の .gb-pos 群をそのまま使う
   既定（JS なし・860px 以下・reduced-motion）= パネルを常時表示（PC は図の下、SP は箱のすぐ下）
   .is-loop（assets/js/gb-service-position-loop.js が付ける）= パネルを箱に重ねて開閉、タブで切り替え
   値は tokens.css の --gb-pos-*（青・マゼンタは --gb-svc-*）。SWELL の本文リセット（.post_content .gb-pos :where(...)）に負けないよう .gb-pos 配下に書く
   ========================================================= */
.gb-pos.gb-pos--loop .gb-pos__stage { grid-template-areas: "l core r" ". b ." "p p p"; }
.gb-pos .gb-in { grid-area: p; justify-self: center; width: min(720px, 100%); margin-top: 56px; background: var(--gb-pos-panel); color: var(--gb-pos-paper);
  padding: 46px 52px 34px; display: grid; grid-template-columns: minmax(0, 1fr) 124px minmax(0, 1fr); grid-template-areas: "sh x eh" "sl m el" "f f f"; align-items: start; }
.gb-pos .gb-in__head { text-align: center; }
.gb-pos .gb-in__head.-s { grid-area: sh; }
.gb-pos .gb-in__head.-e { grid-area: eh; }
.gb-pos .gb-in__list.-s { grid-area: sl; }
.gb-pos .gb-in__list.-e { grid-area: el; }
.gb-pos .gb-in__en { font-family: var(--gb-pos-font-en); font-weight: var(--gb-fw-bold); font-size: clamp(22px, 2.1vw, 27px); letter-spacing: .06em; line-height: 1; }
.gb-pos .gb-in__jp { font-size: 14.5px; font-weight: var(--gb-fw-medium); letter-spacing: .06em; margin-top: 10px; }
.gb-pos .gb-in__bar { display: block; height: 4px; background: var(--c); margin-top: 14px; transform-origin: left; }
.gb-pos .gb-in__list { list-style: none; width: fit-content; margin: 28px auto 0; font-size: 13.5px; line-height: 1; display: grid; row-gap: 13px; letter-spacing: .03em; }
.gb-pos .gb-in__list li { display: flex; align-items: center; gap: 10px; }
.gb-pos .gb-in .gb-in__list li::before { content: ""; width: 4px; height: 4px; background: var(--c); flex: none; }
.gb-pos .gb-in__n { font-family: var(--gb-pos-font-en); font-weight: var(--gb-fw-bold); font-size: 10.5px; letter-spacing: .16em; color: var(--gb-pos-panel-mute); margin-top: 20px; }
/* 箱マーク: SVG の x=118（g の右上の角＝箱の手前の稜線）がパネルの中心線に来るよう、幅の 15.9% 右へ寄せる */
.gb-pos .gb-in__mark { grid-area: m; justify-self: center; align-self: start; width: 96px; margin-top: 36px; translate: 15.9% 0; }
.gb-pos .gb-in__mark svg { width: 100%; height: auto; display: block; overflow: visible; }
/* 箱マークの面の色（SVG の fill 属性は原本のまま。CSS の fill で tokens の値に置き換える） */
.gb-pos .gb-in__mark polygon:nth-of-type(1) { fill: var(--gb-pos-mark-l); }
.gb-pos .gb-in__mark polygon:nth-of-type(2) { fill: var(--gb-pos-mark-r); }
.gb-pos .gb-in__mark .gb-lid { fill: var(--gb-pos-mark-lid); }
.gb-pos .gb-in__mark .gb-g path { fill: var(--gb-pos-paper); }
/* ×: 細い 2 本線（文字ではなく空の span）。中心を STRATEGY / EXECUTION のバーの高さに合わせる */
.gb-pos .gb-in__x { grid-area: x; justify-self: center; align-self: end; width: 44px; height: 44px; position: relative; translate: 0 calc(50% - 2px); }
.gb-pos .gb-in__x::before, .gb-pos .gb-in__x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 141.4%; height: 1px; background: var(--gb-pos-paper); translate: -50% -50%; rotate: 45deg; }
.gb-pos .gb-in__x::after { rotate: -45deg; }
.gb-pos .gb-in__foot { grid-area: f; margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--gb-pos-panel-line); font-size: 11.5px; letter-spacing: .08em; color: var(--gb-pos-panel-mute); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gb-pos .gb-in__foot b { font-family: var(--gb-pos-font-en); font-weight: var(--gb-fw-bold); letter-spacing: .16em; color: var(--gb-pos-paper); }

/* タブ（ループ時だけ表示） */
.gb-pos .gb-tabs { display: none; justify-content: center; gap: 28px; margin: 28px 0 var(--gb-pos-tabs-mb); } /* v2: 見出しブロックの直後・図の直前（下の余白は原本 44px → 開いたパネルに重ならないよう tokens で調整） */
.gb-pos .gb-tab { font-family: var(--gb-pos-font-en); font-weight: var(--gb-fw-bold); font-size: 11px; letter-spacing: .18em; color: var(--gb-pos-mute); background: none; border: 0; border-radius: 0; box-shadow: none; padding: 8px 0 12px; cursor: pointer; position: relative; min-width: 150px; text-align: left; transition: color .3s; }
.gb-pos .gb-tab::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gb-pos-hair); }
.gb-pos .gb-tab i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gb-pos-ink); transform: scaleX(0); transform-origin: left; }
.gb-pos .gb-tab.is-on { color: var(--gb-pos-ink); }
.gb-pos .gb-tab.is-on i { animation: gb-pos-prog var(--dur, 5s) linear forwards; }
.gb-pos.is-hold .gb-tab.is-on i { animation-play-state: paused; }
.gb-pos .gb-tab:focus-visible { outline: 2px solid var(--gb-svc-blue); outline-offset: 4px; }
@keyframes gb-pos-prog { to { transform: scaleX(1); } }

/* ---- ループ: 箱に重ねて開閉 ---- */
.gb-pos.is-loop .gb-tabs { display: flex; }
.gb-pos.gb-pos--loop.is-loop .gb-pos__stage { grid-template-areas: "l core r" ". b ."; }
.gb-pos.is-loop .gb-in { position: absolute; left: 50%; top: calc(var(--core) * .93735); translate: -50% -50%; margin: 0; width: var(--gb-pos-panel-w); z-index: 5; pointer-events: none;
  --hx: calc(var(--core) / 2); --hy: calc(var(--core) * .57735); --hq: calc(var(--core) * .288675);
  clip-path: polygon(50% calc(50% - var(--hy)), calc(50% + var(--hx)) calc(50% - var(--hq)), calc(50% + var(--hx)) calc(50% + var(--hq)), 50% calc(50% + var(--hy)), calc(50% - var(--hx)) calc(50% + var(--hq)), calc(50% - var(--hx)) calc(50% - var(--hq)));
  opacity: 0; visibility: hidden;
  transition: clip-path .6s var(--ease) .2s, opacity 0s linear .82s, visibility 0s linear .82s; }
.gb-pos.is-loop.is-open .gb-in { pointer-events: auto; opacity: 1; visibility: visible;
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%, 0% 0%);
  transition: clip-path .9s var(--ease) .32s, opacity 0s linear .28s, visibility 0s linear .28s; }
/* 図の側: 箱の文字が消え、まわりが下がる */
.gb-pos.is-loop .gb-core > * { transition: opacity .4s ease .75s; }
.gb-pos.is-loop.is-open .gb-core > * { opacity: 0; transition: opacity .25s ease; }
/* ループ: 強調のタイミング（v4 で最後のアテンション＝中央ロゴの拡大は削除。SCHEMA の最後も黒いキューブのまま） */
.gb-pos--loop { --gb-hl-delay: var(--gb-pos-loop-hl-delay); }
.gb-pos.is-loop .gb-zone::before, .gb-pos.is-loop .gb-gap { transition: opacity .5s ease .5s; }
.gb-pos.is-loop.is-open .gb-zone::before, .gb-pos.is-loop.is-open .gb-gap { opacity: 0; transition: opacity .4s ease; }
.gb-pos.is-loop .gb-arm { transition: opacity .6s var(--ease) .45s; }
.gb-pos.is-loop.is-open .gb-arm { opacity: .1; transition: opacity .5s var(--ease); }
/* 見出しブロックも同じく下げる（開いたパネルの上端が見出しにかかるため。パネルは見出しより手前に重なる） */
.gb-pos.is-loop .gb-pos__head { transition: opacity .6s var(--ease) .45s; }
.gb-pos.is-loop.is-open .gb-pos__head { opacity: .1; transition: opacity .5s var(--ease); }
/* 中身: 中央から左右へ出てくる */
.gb-pos.is-loop .gb-in [data-i] { opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.gb-pos.is-loop .gb-in .-s [data-i] { transform: translateX(34px); }
.gb-pos.is-loop .gb-in .-e [data-i] { transform: translateX(-34px); }
.gb-pos.is-loop .gb-in__x[data-i] { transform: scale(.4) rotate(-90deg); }
.gb-pos.is-loop .gb-in__mark[data-i] { transform: scale(.6); }
.gb-pos.is-loop .gb-in__foot[data-i] { transform: translateY(8px); }
.gb-pos.is-loop .gb-in .gb-in__bar[data-i] { opacity: 1; transform: scaleX(0); }
.gb-pos.is-loop.is-open .gb-in [data-i] { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .7s var(--ease); transition-delay: calc(.85s + var(--i) * .05s); }
.gb-pos .gb-in .gb-lid, .gb-pos .gb-in .gb-g { transition: transform .2s ease, opacity .2s ease; }
.gb-pos.is-loop .gb-in .gb-lid { transform: translate(-22px, 26px); opacity: 0; }
.gb-pos.is-loop .gb-in .gb-g { transform: translateY(46px); opacity: 0; }
.gb-pos.is-loop.is-open .gb-in .gb-lid { transform: none; opacity: 1; transition: transform .5s var(--ease) 1.05s, opacity .3s ease 1.05s; }
.gb-pos.is-loop.is-open .gb-in .gb-g { transform: none; opacity: 1; transition: transform .6s var(--ease) 1.25s, opacity .3s ease 1.25s; }

/* ---- 860px 以下: パネルは箱のすぐ下に常時表示 ---- */
@media (max-width: 860px) {
  .gb-pos.gb-pos--loop .gb-pos__stage { grid-template-areas: "core" "p" "l" "r" "b"; }
  .gb-pos .gb-in { margin-top: 28px; padding: 32px 24px 26px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "m" "sh" "sl" "eh" "el" "f"; row-gap: 0; }
  .gb-pos .gb-in__mark { margin-top: 0; width: 64px; }
  .gb-pos .gb-in__x { display: none; }
  .gb-pos .gb-in__head { margin-top: 30px; }
  .gb-pos .gb-in__list { margin-top: 22px; }
  .gb-pos .gb-in__foot { margin-top: 0; }
  .gb-pos.gb-pos--loop .gb-arm--l { margin-top: 28px; }
}

/* ---- 860px 以下: SP 用の図（アニメーション。SERVICE のループ版と TOP で共通）＋ SERVICE は 3者の 3 行 ----
   原本: _reference/service-position/position-diagram-sp-anim-v1.html（構成・寸法・時間は原本のまま。クラス名は PC の図・[gb_box] とぶつからないよう .gb-fig__* / .gb-sheet__* に置き換え）
   SERVICE（.gb-pos--loop）: 見出し → リード（.gb-pos__intro）→ 図（.gb-fig）→ 3者の 3 行（.gb-sheet）。PC の図（.gb-arm / .gb-zone）・OUR POSITION・ヘッダーのリード文・CAPABILITY パネル（.gb-in）は出さない
   TOP（.gb-pos--top = [gb_service_schema]）: 図（.gb-fig）だけ。見出しブロックも出さない（TOP のセクション見出しを使う）
   動き: assets/js/gb-service-position-loop.js が、画面に入っている間だけ .gb-fig に is-l / is-r / is-b / is-open と、各部品に is-hl / is-on を付け外しする（1 周 --gb-pos-sp-loop）。
         JS なし・reduced-motion はクラスが付かない = 図の初期状態（グレーのゾーン＋黒いキューブ＋3者の名前）で静止。3 行は常に見える
   図は設計幅 --gb-pos-sp-w（370。中心 185,190）で組み、寸法はすべて --u（= 1px。足りない画面では比率で縮む）の倍数。左右の余白（--gb-gutter）の半分ずつまではみ出して使う
   色つき■はゾーン（3者のあいだの空白）の縁の上（左右 = 縦の辺 x89 / x281、下 = 下の頂点 y301）。黒いキューブの縁から太線が■まで渡り、細線と ⊣ はゾーンの外 */
.gb-pos .gb-pos__intro, .gb-pos .gb-fig, .gb-pos .gb-sheet { display: none; } /* PC（861px〜）では出さない */
@media (max-width: 860px) {
  .gb-pos.gb-pos--loop .gb-pos__stage { grid-template-areas: "intro" "fig" "sheet"; }
  .gb-pos.gb-pos--top .gb-pos__stage { grid-template-areas: "fig"; }
  .gb-pos:is(.gb-pos--loop, .gb-pos--top) .gb-pos__stage > :is(.gb-arm, .gb-zone, .gb-in) { display: none; } /* .gb-in = CAPABILITY パネル（PC のループ・タブ・開閉はそのまま） */
  .gb-pos.gb-pos--loop .gb-pos__head .gb-pos__lead { display: none; } /* 同じ文言を図の上（.gb-pos__intro）に出すため */
  .gb-pos.gb-pos--loop .gb-pos__eyebrow { display: none; } /* OUR POSITION（下の余白ごと消える） */
  .gb-pos.gb-pos--top .gb-pos__head { display: flex; } /* 2026-10-23: TOP のスマホでも「gootboxの強み」＋リードを出す（以前は非表示） */
  .gb-pos.gb-pos--top .gb-pos__lead { max-width: none; }

  /* リード（2026-10-19 の見本更新でロゴは削除） */
  .gb-pos.gb-pos--loop .gb-pos__intro { display: block; grid-area: intro; width: 100%; text-align: center; margin-bottom: 6px; }
  .gb-pos.gb-pos--loop .gb-pos__intro .gb-pos__lead { font-size: 12.5px; line-height: 1.85; font-weight: var(--gb-fw-medium); max-width: none; }
  .gb-pos.gb-pos--loop .gb-pos__intro .gb-pos__lead b { font-weight: var(--gb-fw-bold); }

  /* 図 */
  .gb-pos .gb-fig { --u: min(1px, (var(--gb-pos-w) + var(--gb-gutter)) / var(--gb-pos-sp-w)); --fc: calc(124 * var(--u)); display: block; grid-area: fig; position: relative; width: calc(var(--gb-pos-sp-w) * var(--u)); height: calc(400 * var(--u)); justify-self: center; margin: 0 calc((100% - var(--gb-pos-sp-w) * var(--u)) / 2); }
  .gb-pos .gb-fig__zone, .gb-pos .gb-fig__core { position: absolute; left: 50%; top: calc(190 * var(--u)); translate: -50% -50%; }
  .gb-pos .gb-fig__zone, .gb-pos .gb-fig__core { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
  .gb-pos .gb-fig__zone { width: calc(192 * var(--u)); height: calc(222 * var(--u)); background: var(--gb-pos-zone); } /* ゾーン本体は常にグレー */
  /* 強調中の色: ゾーンに同じ形の色の六角（::after）を重ね、中から広がる。広がりながら --gb-pos-sp-zone-o0 → -o1 に濃くなり、消えるときは縮みながら薄くなる（.5s）。
     色は JS が .gb-fig に付ける data-c（l / r / b）。消える間も色を保つため、強調を外しても data-c は残す。is-zin = 出だしの 1 フレーム（小さく・薄く。transition なし） */
  .gb-pos .gb-fig__zone::after { content: ""; position: absolute; inset: 0; clip-path: inherit; background: var(--zc, transparent); scale: var(--gb-pos-sp-zone-s0); opacity: 0; transition: scale .5s cubic-bezier(.4, 0, .6, 1), opacity .5s ease; }
  .gb-pos .gb-fig[data-c="l"] { --zc: var(--gb-svc-magenta); }
  .gb-pos .gb-fig[data-c="r"] { --zc: var(--gb-svc-blue); }
  .gb-pos .gb-fig[data-c="b"] { --zc: var(--gb-svc-yellow); }
  .gb-pos .gb-fig.is-zin .gb-fig__zone::after { scale: var(--gb-pos-sp-zone-s0); opacity: var(--gb-pos-sp-zone-o0); transition: none; }
  .gb-pos .gb-fig:is(.is-l, .is-r, .is-b) .gb-fig__zone::after { scale: 1; opacity: var(--gb-pos-sp-zone-o1); transition: scale .75s var(--ease), opacity .75s ease; }
  .gb-pos .gb-fig__core { width: var(--fc); aspect-ratio: 1 / 1.1547; background: var(--gb-pos-ink); color: var(--gb-pos-paper); display: flex; align-items: center; justify-content: center; text-align: center; transition: opacity .6s ease; }
  .gb-pos .gb-fig__core::before, .gb-pos .gb-fig__core::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
  .gb-pos .gb-fig__core::before { background: var(--gb-pos-face-top); clip-path: polygon(50% 0, 100% 25%, 50% 50%, 0 25%); }
  .gb-pos .gb-fig__core::after { background: var(--gb-pos-face-right); clip-path: polygon(50% 50%, 100% 25%, 100% 75%, 50% 100%); }
  .gb-pos .gb-fig__en { position: relative; z-index: 1; font-family: var(--gb-pos-font-en); font-weight: var(--gb-fw-bold); font-size: calc(12.5 * var(--u)); line-height: 1.15; letter-spacing: .035em; transition: opacity .3s ease; }
  /* 箱が開く = 黒い箱 → ロゴの箱（パネルの .gb-in__mark と同じ SVG）へのクロスフェードだけ（フタ・g は動かさない）。
     SVG（viewBox "0 -40 346 374"）の立方体部分（x 4–232 / y 67–331、中心 118,199 = 上端から 239）を y181 に置く（キューブの中心より 9 上。下に文字を置くため）。立方体の幅 ≒ ゾーン幅の 1/3（.51 倍）。--s = --fc × .51 / 228 */
  .gb-pos .gb-fig__box { --s: calc(var(--fc) * .51 / 228); position: absolute; left: calc(50% - 118 * var(--s)); top: calc(181 * var(--u) - 239 * var(--s)); width: calc(346 * var(--s)); height: calc(374 * var(--s)); opacity: 0; transition: opacity .45s ease; pointer-events: none; }
  .gb-pos .gb-fig__box svg { width: 100%; height: 100%; overflow: visible; display: block; }
  .gb-pos .gb-fig__box polygon:nth-of-type(1) { fill: var(--gb-pos-mark-l); }
  .gb-pos .gb-fig__box polygon:nth-of-type(2) { fill: var(--gb-pos-mark-r); }
  .gb-pos .gb-fig__box .gb-lid { fill: var(--gb-pos-mark-lid); }
  .gb-pos .gb-fig__box .gb-g path { fill: var(--gb-color-text); } /* g は黒（SVG の白を上書き。パネルの .gb-in__mark は白のまま） */
  .gb-pos .gb-fig.is-open .gb-fig__core { opacity: 0; }
  .gb-pos .gb-fig.is-open .gb-fig__box { opacity: 1; transition: opacity .9s ease; }
  /* 箱の下の「戦略実装パートナー」: 箱より少し遅れてフェードイン。top = 箱の中心 y181 + 縮小後の箱の半分の高さ（--fc × .51 × .577）+ 7 */
  .gb-pos .gb-fig__cap { position: absolute; left: 50%; top: calc(181 * var(--u) + var(--fc) * .51 * .577 + 7 * var(--u)); translate: -50% 0; margin: 0; white-space: nowrap; line-height: 1.5;
    font-size: calc(11.5 * var(--u)); font-weight: var(--gb-fw-bold); letter-spacing: .06em; color: var(--gb-pos-mute-light); opacity: 0; transition: opacity .4s ease; }
  .gb-pos .gb-fig.is-open .gb-fig__cap { opacity: 1; transition: opacity .9s ease .25s; }

  /* 3者: 社名（薄い）→ 強調中は濃く大きく、「〜で終わる」が出る。ほかの 2 者は薄く */
  .gb-pos .gb-fig__arm { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 0; transition: opacity .4s var(--ease); }
  .gb-pos .gb-fig__arm--l { left: 0; top: calc(190 * var(--u)); translate: 0 -50%; width: calc(64 * var(--u)); align-items: flex-start; text-align: left; }
  .gb-pos .gb-fig__arm--r { right: 0; top: calc(190 * var(--u)); translate: 0 -50%; width: calc(64 * var(--u)); align-items: flex-end; text-align: right; }
  .gb-pos .gb-fig__arm--b { left: 50%; top: calc(352 * var(--u)); translate: -50% 0; width: calc(200 * var(--u)); text-align: center; }
  .gb-pos .gb-fig__name { font-size: calc(12 * var(--u)); font-weight: var(--gb-fw-bold); letter-spacing: .02em; line-height: 1.3; color: var(--gb-pos-mute); white-space: nowrap; transition: color .4s ease, font-size .4s var(--ease); }
  /* 「〜で終わる」: 左右の腕は名前の上に 12 離して重ねる（腕の高さ = 名前だけになり、名前の中心 = 線の高さ。文字は線・⊣ から離れる）。下の腕は名前の下 */
  .gb-pos .gb-fig__end { position: absolute; bottom: calc(100% + 12 * var(--u)); font-size: calc(9.5 * var(--u)); font-weight: var(--gb-fw-bold); letter-spacing: .02em; color: var(--gb-color-text); white-space: nowrap; opacity: 0; transform: translateY(calc(3 * var(--u))); transition: opacity .35s ease, transform .35s var(--ease); }
  .gb-pos .gb-fig__arm--l .gb-fig__end { left: 0; }
  .gb-pos .gb-fig__arm--r .gb-fig__end { right: 0; }
  .gb-pos .gb-fig__arm--b .gb-fig__end { position: static; margin-top: calc(4 * var(--u)); }
  .gb-pos .gb-fig__arm.is-hl .gb-fig__name { color: var(--gb-pos-ink); font-size: calc(14 * var(--u)); } /* 15 だと ⊣ に近すぎる */
  .gb-pos .gb-fig__arm.is-hl .gb-fig__end { opacity: 1; transform: none; transition-delay: .15s; }
  .gb-pos .gb-fig:is(.is-l, .is-r, .is-b) .gb-fig__arm:not(.is-hl) { opacity: .45; }

  /* 線: reach = 相手の届く範囲（細・端に ⊣。ゾーンの外）/ joint = 色の四角（ゾーンの縁）/ bridge = キューブの縁から■まで渡る太線。■と太線は隙間なし、細線側に 5 だけ空ける（PC と同じ文法） */
  .gb-pos .gb-fig__conn { position: absolute; display: flex; align-items: center; opacity: 0; transition: opacity .3s ease; }
  .gb-pos .gb-fig__reach { position: relative; flex: 1; height: calc(15 * var(--u)); transition: clip-path .4s var(--ease); }
  .gb-pos .gb-fig__reach::before { content: ""; position: absolute; left: 0; right: 0; top: calc(7 * var(--u)); height: 1px; background: var(--gb-pos-ink); }
  .gb-pos .gb-fig__reach::after { content: ""; position: absolute; top: 0; width: 1px; height: calc(15 * var(--u)); background: var(--gb-pos-ink); }
  .gb-pos .gb-fig__joint { flex: none; width: calc(10 * var(--u)); height: calc(10 * var(--u)); border: 1.5px solid var(--gb-pos-ink); background: var(--c); transform: scale(0) rotate(-90deg); transition: transform .35s var(--ease); }
  .gb-pos .gb-fig__bridge { flex: none; height: calc(3 * var(--u)); background: var(--gb-pos-ink); transform: scaleX(0); transition: transform .4s var(--ease); }
  .gb-pos .gb-fig__conn--l { left: calc(64 * var(--u)); top: calc(183 * var(--u)); width: calc(59 * var(--u)); flex-direction: row; } /* ⊣ x64 → ■の中心 x89 → 太線 x94–123 */
  .gb-pos .gb-fig__conn--l .gb-fig__reach { clip-path: inset(0 100% 0 0); }
  .gb-pos .gb-fig__conn--l .gb-fig__reach::after { left: 0; }
  .gb-pos .gb-fig__conn--l .gb-fig__joint { margin-left: calc(5 * var(--u)); }
  .gb-pos .gb-fig__conn--l .gb-fig__bridge { width: calc(29 * var(--u)); transform-origin: right; }
  .gb-pos .gb-fig__conn--r { right: calc(64 * var(--u)); top: calc(183 * var(--u)); width: calc(59 * var(--u)); flex-direction: row-reverse; } /* 左の反転（■の中心 x281） */
  .gb-pos .gb-fig__conn--r .gb-fig__reach { clip-path: inset(0 0 0 100%); }
  .gb-pos .gb-fig__conn--r .gb-fig__reach::after { right: 0; }
  .gb-pos .gb-fig__conn--r .gb-fig__joint { margin-right: calc(5 * var(--u)); }
  .gb-pos .gb-fig__conn--r .gb-fig__bridge { width: calc(29 * var(--u)); transform-origin: left; }
  .gb-pos .gb-fig__conn--b { left: calc(50% - 7.5 * var(--u)); top: calc(261 * var(--u)); width: calc(15 * var(--u)); height: calc(87 * var(--u)); flex-direction: column-reverse; } /* 上から 太線（キューブの下端 →）→ ■（中心 y301 = ゾーンの下の頂点）→ 細線 → ⊣ */
  .gb-pos .gb-fig__conn--b .gb-fig__bridge { width: calc(3 * var(--u)); height: calc(34.5 * var(--u)); transform: scaleY(0); transform-origin: top; align-self: center; }
  .gb-pos .gb-fig__conn--b .gb-fig__joint { margin-bottom: calc(5 * var(--u)); } /* ■と細線のあいだ（■は真ん中の子なので SWELL の div > :last-child / :first-child のマージン打ち消しを受けない） */
  .gb-pos .gb-fig__conn--b .gb-fig__reach { width: calc(15 * var(--u)); height: auto; clip-path: inset(100% 0 0 0); }
  .gb-pos .gb-fig__conn--b .gb-fig__reach::before { left: calc(7 * var(--u)); right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .gb-pos .gb-fig__conn--b .gb-fig__reach::after { top: auto; bottom: 0; left: 0; width: calc(15 * var(--u)); height: 1px; }
  .gb-pos .gb-fig.is-l .gb-fig__conn--l, .gb-pos .gb-fig.is-r .gb-fig__conn--r, .gb-pos .gb-fig.is-b .gb-fig__conn--b { opacity: 1; }
  .gb-pos .gb-fig:is(.is-l, .is-r, .is-b) .gb-fig__conn.is-on .gb-fig__bridge { transform: none; }
  .gb-pos .gb-fig:is(.is-l, .is-r, .is-b) .gb-fig__conn.is-on .gb-fig__joint { transform: none; transition-delay: .25s; }
  .gb-pos .gb-fig:is(.is-l, .is-r, .is-b) .gb-fig__conn.is-on .gb-fig__reach { clip-path: inset(0); transition-delay: .4s; }

  /* 吹き出し: 色の丸＋白文字（黄は黒文字）。ポンと出て、しっぽはキューブの方を向く。消えるときは縮んで消える */
  .gb-pos .gb-fig__bub { position: absolute; z-index: 4; width: calc(78 * var(--u)); height: calc(78 * var(--u)); border-radius: 50%; background: var(--c); color: var(--gb-pos-paper); display: flex; align-items: center; justify-content: center; text-align: center;
    font-size: calc(11 * var(--u)); font-weight: var(--gb-fw-bold); font-style: normal; line-height: 1.35; letter-spacing: .02em; opacity: 0; scale: .3; transition: opacity .25s ease, scale .3s ease; }
  /* しっぽ: 丸の中心から --a（マークアップの style。丸の中心 → 黒いキューブの中心 185,190 の角度）の向きへ出る三角 */
  .gb-pos .gb-fig__bub::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(26 * var(--u)); height: calc(18 * var(--u)); margin-top: calc(-9 * var(--u)); background: var(--c); transform-origin: 0 50%; transform: rotate(var(--a)) translateX(calc(30 * var(--u))); clip-path: polygon(0 0, 100% 50%, 0 100%); }
  .gb-pos .gb-fig__bub > span { position: relative; }
  /* 位置: マゼンタ／シアンは黒い箱にかからないよう外側の下へ（位置を変えたら --a を計算し直す） */
  .gb-pos .gb-fig__bub--l { left: calc(4 * var(--u)); top: calc(226 * var(--u)); }
  .gb-pos .gb-fig__bub--r { right: calc(4 * var(--u)); top: calc(226 * var(--u)); }
  .gb-pos .gb-fig__bub--b { left: calc(226 * var(--u)); top: calc(292 * var(--u)); color: var(--gb-pos-ink); font-size: calc(10.5 * var(--u)); }
  .gb-pos .gb-fig__bub.is-on { opacity: 1; scale: 1; transition: opacity .25s ease, scale .55s cubic-bezier(.3, 1.5, .5, 1); }

  /* 3者の 3 行: 左に枠（〜で終わる / 社名 / 補足）｜ 右に ー ■ ラベル（社名と同じ 15・2 行）＋ 1 行目の文末にちょんちょん */
  .gb-pos.gb-pos--loop .gb-sheet { display: grid; row-gap: 14px; grid-area: sheet; width: 100%; margin-top: 30px; }
  .gb-pos .gb-sheet__row { display: grid; grid-template-columns: 174px minmax(0, 1fr); align-items: center; }
  .gb-pos .gb-sheet__box { border: 1.5px solid var(--gb-color-text); padding: 12px 12px 13px; }
  .gb-pos .gb-sheet__end { font-size: 10.5px; font-weight: var(--gb-fw-bold); letter-spacing: .02em; line-height: 1.4; }
  .gb-pos .gb-sheet__name { font-size: 15px; font-weight: var(--gb-fw-bold); letter-spacing: .04em; line-height: 1.35; margin-top: 2px; }
  .gb-pos .gb-sheet__sub { list-style: none; margin: 6px 0 0; padding-left: .7em; font-size: 11px; font-weight: var(--gb-fw-medium); color: var(--gb-pos-mute-light); line-height: 1.6; letter-spacing: .01em; }
  /* 右側: 太線（::before）は枠の右辺から■の手前まで伸びる。左右の 1fr が等しいので ■＋文字が右の列の中央に来る */
  .gb-pos .gb-sheet__lbl { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr); align-items: center; margin: 0; font-size: 15px; font-weight: var(--gb-fw-bold); letter-spacing: .04em; line-height: 1.4; font-style: normal; }
  .gb-pos .gb-sheet__lbl::before { content: ""; height: 3px; background: var(--gb-color-text); margin-right: 8px; }
  .gb-pos .gb-sheet__sq { width: 10px; height: 10px; border: 1.5px solid var(--gb-color-text); background: var(--c); margin-right: 8px; }
  .gb-pos .gb-sheet__t { position: relative; min-width: 0; text-align: left; width: 7.5em; white-space: nowrap; } /* 3 行とも同じ幅（最長の「経験と判断で、」）→ ■の位置と太線の長さが 3 行でそろう */
  .gb-pos .gb-sheet__l1 { position: relative; } /* ちょんちょんは 1 行目の文末に付ける */
  .gb-pos .gb-sheet__ticks { position: absolute; width: 16px; height: auto; left: calc(100% - 2px); top: -12px; fill: none; stroke: var(--gb-color-text); stroke-width: 1.6; stroke-linecap: round; transform: scaleX(-1); }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .gb-pos .gb-fig, .gb-pos .gb-fig *, .gb-pos .gb-fig__zone::after { transition: none !important; }
}

/* =========================================================
   SERVICE STRATEGY: 領域チップ（FIELDS）と課題 → 打ち手（ISSUE → APPROACH）— patterns/service-strategy-issues.php
   原本: _reference/service-strategy/strategy-final-v1.html の「ここから下をサイトへ」以降。中身はすべてコアブロック（エディタで文言・行の追加削除・アイコン差し替えができる）:
     小見出し = 段落 + 追加クラス gb-eyebrow（数字・矢印は太字）／ FIELDS = リスト + gb-fields（1 項目 = 1 語。「/」区切りの文字組み）
     見出し行 = グループ gb-issue__head（段落 2 つ。「HOVER」は ::after で出すので本文に書かない）
     課題の行 = グループ gb-issue__row + 色 is-c / is-m / is-y（中に 画像 → 段落 gb-issue__q → 段落 gb-issue__a）
   PC: 打ち手は最初から薄く見えていて、行に乗せると線が伸びて色の四角が渡り、黒くはっきりする。860px 以下・タッチ端末: 縦積みで最初から全部見せる。
   値は tokens.css の --gb-strategy-* / --gb-fields-* / --gb-issue-*（3 色は --gb-svc-*）。SWELL の本文スタイル（p・ul・li の余白や行頭記号）に負けないよう .post_content を付ける。
   グループを新しく足すとエディタが「constrained」レイアウト（子に max-width と margin auto !important）を付けるので、行の子要素ではそれも打ち消す。
   SWELL は theme.json の無いクラシックテーマなので、グループの中身は .wp-block-group__inner-container に包まれて出る → それを display: contents にして、
   中の 画像・段落 がそのまま行のグリッドに並ぶようにする（包みの有無どちらでも同じ見た目。子は > ではなく子孫セレクタで指定）。
   ========================================================= */
/* 小見出し（段落ブロック + gb-eyebrow） */
.post_content .gb-eyebrow { font-family: var(--gb-strategy-font-en); font-weight: var(--gb-fw-bold); font-size: 11px; letter-spacing: .2em; line-height: 1.5; color: var(--gb-strategy-mute); display: flex; align-items: center; gap: 10px; margin: 0 0 var(--gb-eyebrow-mb); }
.post_content .gb-eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--gb-strategy-ink); flex: none; }
.post_content .gb-eyebrow strong { font-weight: var(--gb-fw-bold); color: var(--gb-strategy-ink); }

/* FIELDS: 1 行の文字組み（リストブロック + gb-fields）。囲みも背景もホバーの変化もなし、薄い「/」で区切って本文として読ませる */
.post_content ul.gb-fields { list-style: none; margin: 0 0 var(--gb-fields-mb); padding: 0; display: flex; flex-wrap: wrap; gap: var(--gb-fields-gap) 0; max-width: var(--gb-fields-max-w); }
.post_content ul.gb-fields > li { margin: 0; padding: 0; color: var(--gb-strategy-ink); font-size: 15px; font-weight: var(--gb-fw-medium); letter-spacing: .03em; line-height: 1.5; display: flex; align-items: center; }
/* エディターで背景色を付けたとき（has-background / インラインの background）は内側に余白を取る。値は tokens.css の --gb-fields-bg-py / -px */
.post_content ul.gb-fields:is(.has-background, [style*="background"]) { padding: var(--gb-fields-bg-py) var(--gb-fields-bg-px); }
.post_content ul.gb-fields > li::before, .post_content ul.gb-fields > li::marker { content: none; } /* SWELL のリストの行頭記号を消す */
.post_content ul.gb-fields > li::after { content: "/"; color: var(--gb-strategy-mute); opacity: .6; font-weight: var(--gb-fw-regular); margin: 0 var(--gb-fields-sep-mx); font-family: var(--gb-strategy-font-en); }
.post_content ul.gb-fields > li:last-child::after { display: none; }

/* ISSUE → APPROACH: 見出し行（グループ + gb-issue__head） */
.post_content .gb-issue__head { display: grid; grid-template-columns: var(--gb-issue-icon-col) minmax(0, var(--gb-issue-q-fr)) minmax(0, var(--gb-issue-a-fr)); column-gap: var(--gb-issue-col-gap); align-items: end; padding: 0 0 12px; border-bottom: 1px solid var(--gb-strategy-ink); margin: 0; }
.post_content :is(.gb-issue__head, .gb-issue__row) > .wp-block-group__inner-container { display: contents; }
.post_content .gb-issue__head p { margin: 0 !important; max-width: none; }
.post_content .gb-issue__head p { font-family: var(--gb-strategy-font-en); font-weight: var(--gb-fw-bold); font-size: 11px; letter-spacing: .2em; line-height: 1.5; color: var(--gb-strategy-mute); }
.post_content .gb-issue__head p:first-child { grid-column: 2; }
.post_content .gb-issue__head p:last-child { padding-left: var(--gb-issue-a-indent); display: flex; justify-content: space-between; align-items: center; }
.post_content .gb-issue__head p:last-child::after { content: var(--gb-issue-hover-label); font-size: 10px; letter-spacing: .14em; display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(var(--gb-strategy-mute), var(--gb-strategy-mute)) no-repeat 0 50% / 22px 1px; padding-left: 28px; }

/* 課題の行（グループ + gb-issue__row + is-c / is-m / is-y） */
.post_content .gb-issue__row { display: grid; grid-template-columns: var(--gb-issue-icon-col) minmax(0, var(--gb-issue-q-fr)) minmax(0, var(--gb-issue-a-fr)); column-gap: var(--gb-issue-col-gap); align-items: center; padding: var(--gb-issue-row-py) 0; border-bottom: 1px solid var(--gb-strategy-hair); margin: 0; cursor: default; --c: var(--gb-svc-blue); }
.post_content .gb-issue__row.is-m { --c: var(--gb-svc-magenta); }
.post_content .gb-issue__row.is-y { --c: var(--gb-svc-yellow); }
.post_content .gb-issue__row:not(:has(+ .gb-issue__row)) { margin-bottom: var(--gb-issue-mb); } /* 最後の行の下だけ空ける（行どうしは罫線で詰める） */
.post_content .gb-issue__row :is(figure, .gb-issue__q, .gb-issue__a) { margin: 0 !important; max-width: none; }
.post_content .gb-issue__row figure { width: var(--gb-issue-icon); height: var(--gb-issue-icon); margin: 0 0 0 calc((var(--gb-issue-icon-col) - var(--gb-issue-icon)) / 2) !important; } /* 列の中央に（原本 7px） */
.post_content .gb-issue__row figure img { display: block; width: var(--gb-issue-icon); height: var(--gb-issue-icon); }
.post_content .gb-issue__q { font-size: 16px; font-weight: var(--gb-fw-bold); letter-spacing: .02em; line-height: 1.45; color: var(--gb-strategy-ink); }
.post_content .gb-issue__a { position: relative; padding-left: var(--gb-issue-a-indent); font-size: 16px; font-weight: var(--gb-fw-bold); letter-spacing: .02em; line-height: 1.5; color: var(--gb-strategy-mute); opacity: .55; translate: -6px 0;
  transition: opacity .35s ease, color .35s ease, translate .5s var(--gb-strategy-ease); }
/* つなぎ線: 薄い線の上を黒い線が伸び、色の四角が打ち手まで渡る */
.post_content .gb-issue__a::before { content: ""; position: absolute; left: var(--gb-issue-line-x); top: 50%; width: var(--gb-issue-line-w); height: 1px; translate: 0 -50%;
  background: linear-gradient(var(--gb-strategy-ink), var(--gb-strategy-ink)) no-repeat 0 0 / 0% 100%, var(--gb-strategy-hair); transition: background-size .5s var(--gb-strategy-ease); }
.post_content .gb-issue__a::after { content: ""; position: absolute; left: var(--gb-issue-line-x); top: 50%; width: 9px; height: 9px; translate: -50% -50%; border: 1.5px solid var(--gb-strategy-ink); background: var(--c); transition: left .5s var(--gb-strategy-ease); }
.post_content .gb-issue__row:hover .gb-issue__a, .post_content .gb-issue__row:focus-within .gb-issue__a { opacity: 1; color: var(--gb-strategy-ink); translate: 0 0; }
.post_content .gb-issue__row:hover .gb-issue__a::before, .post_content .gb-issue__row:focus-within .gb-issue__a::before { background-size: 100% 100%, auto; }
.post_content .gb-issue__row:hover .gb-issue__a::after, .post_content .gb-issue__row:focus-within .gb-issue__a::after { left: calc(var(--gb-issue-line-x) + var(--gb-issue-line-w)); }
@media (prefers-reduced-motion: reduce) { .post_content .gb-issue__a, .post_content .gb-issue__a::before, .post_content .gb-issue__a::after { transition: none; } }

/* 860px 以下・タッチ端末: 見出し行を消し、各行を「アイコン＋課題」→ 下に「線＋色の四角＋打ち手（黒字）」で縦積み。打ち手は最初から全部見せる */
@media (max-width: 860px), (hover: none) {
  .post_content .gb-issue__head { display: none; }
  .post_content .gb-issue__row { grid-template-columns: var(--gb-issue-icon-col) minmax(0, 1fr); row-gap: 12px; padding: var(--gb-issue-row-py-sp) 0; }
  .post_content .gb-issue__q { font-size: 15px; }
  .post_content .gb-issue__a { grid-column: 1 / -1; opacity: 1; color: var(--gb-strategy-ink); translate: 0; font-size: 14px; font-weight: var(--gb-fw-medium); padding-left: var(--gb-issue-a-indent-sp); }
  .post_content .gb-issue__a::before { left: 0; top: .55em; width: var(--gb-issue-line-w-sp); translate: 0; background: var(--gb-strategy-ink); }
  .post_content .gb-issue__a::after { left: var(--gb-issue-line-w-sp); top: .55em; translate: 0 -50%; }
}

/* =========================================================
   SERVICE EXECUTION: 項目（.gb-cap）— patterns/service-execution-capabilities.php
   原本: _reference/service-execution/execution-final-v1.html の「ここから下をサイトへ」以降。STRATEGY と同じ文法（細い罫・番号・囲まない）。中身はすべてコアブロック:
     小見出し = 段落 + gb-eyebrow（STRATEGY の CSS を共用）
     各項目 = グループ + gb-cap（中に 段落 gb-no「01」→ 見出し h4 → 画像 → 段落 gb-desc → リスト gb-cap__list）。番号の前の黒い四角は ::before
   PC: 番号 → 見出し（左右をまたいで横一）→ 左に写真（21:9）と説明、右に細い下線のリスト（上端は写真とそろえる）。860px 以下: 縦積み、写真 16:9、リストは「/」区切りの 1 行。
   SWELL はクラシックテーマなのでグループの中身が .wp-block-group__inner-container に包まれる → display: contents で透過。
   新しく足したグループに付く「constrained」レイアウト（子に margin-inline: auto !important）も打ち消す。値は tokens.css の --gb-cap-*。
   ========================================================= */
.post_content .gb-cap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "no no" "h h" "img list" "p list"; column-gap: var(--gb-cap-col-gap); row-gap: 0; align-content: start;
  padding: var(--gb-cap-py) 0; border-top: 1px solid var(--gb-cap-hair); margin: 0; color: var(--gb-cap-ink); }
.post_content .gb-cap:not(:has(+ .gb-cap)) { border-bottom: 1px solid var(--gb-cap-hair); } /* 最後の項目の下にも罫 */
.post_content .gb-cap > .wp-block-group__inner-container { display: contents; }
.post_content .gb-cap :is(.gb-no, h4, figure, .gb-desc, ul.gb-cap__list) { margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none; } /* 下の余白は各要素で指定 */
.post_content .gb-cap .gb-no { grid-area: no; font-family: var(--gb-cap-font-en); font-weight: var(--gb-fw-bold); font-size: 12px; letter-spacing: .14em; line-height: 1.5; color: var(--gb-cap-mute); display: flex; align-items: center; gap: 10px; margin-bottom: var(--gb-cap-no-mb); }
.post_content .gb-cap .gb-no::before { content: ""; width: 9px; height: 9px; background: var(--gb-cap-ink); flex: none; }
.post_content .gb-cap h4.wp-block-heading { grid-area: h; position: static; padding: 0; border: 0; background: none; box-shadow: none; color: inherit; font-size: clamp(22px, 2.2vw, 28px); font-weight: var(--gb-fw-bold); letter-spacing: .03em; line-height: 1.35; margin-bottom: var(--gb-cap-h-mb); }
.post_content .gb-cap h4.wp-block-heading::before, .post_content .gb-cap h4.wp-block-heading::after { content: none; display: none; } /* SWELL の h4 の飾りを出さない */
.post_content .gb-cap figure { grid-area: img; margin-bottom: var(--gb-cap-img-mb); }
.post_content .gb-cap figure img { display: block; width: 100%; height: auto; aspect-ratio: var(--gb-cap-ratio); object-fit: cover; }
.post_content .gb-cap .gb-desc { grid-area: p; margin-bottom: 0; font-size: 14px; line-height: 1.9; }
.post_content .gb-cap ul.gb-cap__list { grid-area: list; margin-bottom: 0; list-style: none; padding: 0; align-self: start; }
.post_content .gb-cap ul.gb-cap__list > li { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--gb-cap-hair); font-size: 14px; font-weight: var(--gb-fw-medium); letter-spacing: .02em; line-height: 1.5; }
.post_content .gb-cap ul.gb-cap__list > li:first-child { padding-top: 0; }
.post_content .gb-cap ul.gb-cap__list > li::before, .post_content .gb-cap ul.gb-cap__list > li::marker { content: none; } /* SWELL のリストの行頭記号を消す */
.post_content .gb-cap ul.gb-cap__list a { color: inherit; text-decoration: none; } /* 項目は WORKS の一覧へのリンク（見た目は本文のまま。乗せたときの合図は右端の丸と矢印） */

/* 右のリスト（PC）: 各項目の右端に小さな黒い点。乗せると文字が右へずれ、点がサイト共通ボタンと同じ「黒い丸＋白い矢印」に変わる。
   作りは共通ボタン（.wp-block-button__link / .gb-button）と同じ: ::after = 点 → 丸（clip-path）、::before = 矢印（mask の SVG）。.gb-cap__list の li だけが対象 */
@media (min-width: 861px) {
  .post_content .gb-cap ul.gb-cap__list > li { position: relative; padding-right: calc(var(--gb-btn-circle) + var(--gb-btn-gap)); transition: padding-left var(--gb-cap-li-dur) ease; }
  .post_content .gb-cap ul.gb-cap__list > li::after {
    content: ""; position: absolute; top: 50%; right: 0; left: auto; width: var(--gb-btn-circle); height: var(--gb-btn-circle); translate: 0 -50%;
    border-radius: var(--gb-radius-pill); background-color: var(--gb-cap-ink); clip-path: circle(calc(var(--gb-btn-dot) / 2) at center); transition: clip-path var(--gb-duration) var(--gb-ease-out);
  }
  .post_content .gb-cap ul.gb-cap__list > li::before {
    content: ""; position: absolute; z-index: 1; top: 50%; right: 0; left: auto; width: var(--gb-btn-circle); height: var(--gb-btn-circle); translate: 0 -50%; border-radius: 0;
    background-color: var(--gb-color-text-inverse);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 10' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'><path d='M0.6 5H10M6 1l4 4-4 4'/></svg>") no-repeat center / var(--gb-btn-arrow-w) var(--gb-btn-arrow-h);
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 10' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'><path d='M0.6 5H10M6 1l4 4-4 4'/></svg>") no-repeat center / var(--gb-btn-arrow-w) var(--gb-btn-arrow-h);
    opacity: 0; transition: opacity var(--gb-duration) var(--gb-ease-out);
  }
}
/* 乗せたとき（マウスのある端末だけ。タッチ端末は点のまま） */
@media (min-width: 861px) and (hover: hover) {
  .post_content .gb-cap ul.gb-cap__list > li:hover { padding-left: var(--gb-cap-li-shift); }
  .post_content .gb-cap ul.gb-cap__list > li:hover::after { clip-path: circle(50% at center); }
  .post_content .gb-cap ul.gb-cap__list > li:hover::before { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .post_content .gb-cap ul.gb-cap__list > li, .post_content .gb-cap ul.gb-cap__list > li::after, .post_content .gb-cap ul.gb-cap__list > li::before { transition: none; } }

@media (max-width: 860px) {
  .post_content .gb-cap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "no" "h" "img" "p" "list"; padding: var(--gb-cap-py-sp) 0; }
  .post_content .gb-cap .gb-no { margin-bottom: 10px; }
  .post_content .gb-cap h4.wp-block-heading { margin-bottom: var(--gb-cap-sp-mb); }
  .post_content .gb-cap figure { margin-bottom: var(--gb-cap-sp-mb); }
  .post_content .gb-cap figure img { aspect-ratio: var(--gb-cap-ratio-sp); }
  .post_content .gb-cap .gb-desc { margin-bottom: var(--gb-cap-sp-mb); }
  .post_content .gb-cap ul.gb-cap__list { display: flex; flex-wrap: wrap; gap: 6px 0; }
  .post_content .gb-cap ul.gb-cap__list > li { display: flex; align-items: center; padding: 0; border: 0; font-size: 13px; }
  .post_content .gb-cap ul.gb-cap__list > li::after { content: "/"; color: var(--gb-cap-mute); opacity: .6; font-weight: var(--gb-fw-regular); margin: 0 .8em; font-family: var(--gb-cap-font-en); }
  .post_content .gb-cap ul.gb-cap__list > li:last-child::after { display: none; }
}

/* =========================================================
   RECRUIT（固定ページ recruit / 2026-10-19）
   旧サイト（テーマ gootbox の page-recruit.php）の文言・構成・動きをそのまま、見た目だけ新サイトの部品に。値は tokens.css の --gb-recruit-*
   - 職種: core のアコーディオン（.gb-recruit-jobs）。初期は全部閉じる（旧と同じ）。JS 無効なら開閉ボタンは効かないが中身は全部見える（core の標準）
     見出しの背景は旧サイトの画像（--gb-recruit-job-0N）＋暗幕（--gb-recruit-job-overlay）。項目の ■・※ は旧と同じく CSS で付ける（文字は本文に入れない）
   - 待遇・福利厚生（.gb-recruit-benefit）/ Working Happy（.gb-recruit-entry）＋ ENTRY ＋ 画像マーキー（.gb-marquee-images。既存の部品）
   ========================================================= */
.post_content .gb-recruit-ttl__en { margin-left: .5em; font-family: var(--gb-font-heading); font-weight: var(--gb-fw-medium); letter-spacing: var(--gb-tracking-en); }

/* 職種（アコーディオン） */
.post_content .gb-recruit-jobs { display: grid; gap: var(--gb-recruit-job-gap); }
.post_content .gb-recruit-job { margin: 0; }
/* 見出しの背景: 並び順で 4 枚を順に（1,5,9 番目 = 01 … 4,8 番目 = 04）。エディターで並び替えても class を触らなくてよい（2026-10-23。職種 10 に）。
   個別に変えたいときは、そのアコーディオン項目の「追加 CSS クラス」に gb-recruit-job--0N を付ける（下の class 指定のほうが勝つ） */
.gb-recruit-jobs > .gb-recruit-job:nth-child(4n+1) { --gb-recruit-job-img: var(--gb-recruit-job-01); }
.gb-recruit-jobs > .gb-recruit-job:nth-child(4n+2) { --gb-recruit-job-img: var(--gb-recruit-job-02); }
.gb-recruit-jobs > .gb-recruit-job:nth-child(4n+3) { --gb-recruit-job-img: var(--gb-recruit-job-03); }
.gb-recruit-jobs > .gb-recruit-job:nth-child(4n)   { --gb-recruit-job-img: var(--gb-recruit-job-04); }
.gb-recruit-jobs > .gb-recruit-job--01 { --gb-recruit-job-img: var(--gb-recruit-job-01); }
.gb-recruit-jobs > .gb-recruit-job--02 { --gb-recruit-job-img: var(--gb-recruit-job-02); }
.gb-recruit-jobs > .gb-recruit-job--03 { --gb-recruit-job-img: var(--gb-recruit-job-03); }
.gb-recruit-jobs > .gb-recruit-job--04 { --gb-recruit-job-img: var(--gb-recruit-job-04); }
/* エディターで画像を置いた項目（inc/gootbox-recruit.php が has-gb-bg と --gb-recruit-job-img-pc/-sp を付ける）はその画像を優先 */
.gb-recruit-jobs > .gb-recruit-job.has-gb-bg { --gb-recruit-job-img: var(--gb-recruit-job-img-pc); }
.post_content h3.gb-recruit-job__head { margin: 0; padding: 0; border: 0; background: none; font-size: var(--gb-recruit-job-fs); }
.post_content h3.gb-recruit-job__head::before,
.post_content h3.gb-recruit-job__head::after { content: none; }
.post_content .gb-recruit-job__head .wp-block-accordion-heading__toggle {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: var(--gb-space-4);
  width: 100%; min-height: var(--gb-recruit-job-h); margin: 0; padding: 0 var(--gb-recruit-job-pad-x); border: 0; border-radius: 0;
  background: var(--gb-recruit-job-img) center / cover no-repeat; color: var(--gb-recruit-job-color);
  font: inherit; font-weight: var(--gb-fw-semibold); letter-spacing: var(--gb-tracking-body); line-height: 1.25; text-align: left; cursor: pointer;
}
.post_content .gb-recruit-job__head .wp-block-accordion-heading__toggle::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gb-recruit-job-overlay); mix-blend-mode: multiply; }
.post_content .gb-recruit-job__head .wp-block-accordion-heading__toggle:focus-visible { outline: 2px solid var(--gb-color-text); outline-offset: 2px; }
.post_content .gb-recruit-job__head .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title,
.post_content .gb-recruit-job__head .wp-block-accordion-heading__toggle:focus .wp-block-accordion-heading__toggle-title { text-decoration: none; } /* core の hover 下線を出さない（旧は下線なし） */
.post_content .gb-recruit-job__no { display: inline-block; margin-right: var(--gb-recruit-job-no-gap); font-family: var(--gb-font-heading); font-size: var(--gb-recruit-job-no-fs); font-weight: var(--gb-fw-medium); letter-spacing: var(--gb-tracking-en); vertical-align: baseline; } /* 見出しの番号 01〜10（2026-10-23） */
.post_content .gb-recruit-job__en { display: inline-block; margin-top: var(--gb-space-1); font-family: var(--gb-font-heading); font-size: var(--gb-recruit-job-en-fs); font-weight: var(--gb-fw-medium); letter-spacing: var(--gb-tracking-en); }
.post_content .gb-recruit-job__head .wp-block-accordion-heading__toggle-icon { flex: none; font-size: var(--gb-recruit-icon-fs); font-weight: var(--gb-fw-light); line-height: 1; }
.post_content .gb-recruit-job .wp-block-accordion-panel { margin: 0; padding: var(--gb-recruit-panel-pad); background: var(--gb-color-bg); }
/* 表: 2 つ目の表の上に線。項目の ■・※ */
.post_content .gb-recruit-table { margin: 0; }
/* 1 つ目の表（仕事内容〜求める人物像）と 2 つ目（就業時間〜休日）は、ページでは 1 つの表に見せる（2026-10-23）:
   間の空きを 0 にし、2 つ目の最初の行の上の罫線（SWELL の is-style-simple のセルの線）を消して、1 つ目の最後の行の下の線 1 本だけにする。
   空けたいときは tokens.css の --gb-recruit-table-gap（1 つ目の下）/ --gb-recruit-table-gap-inner（2 つ目の上）に値を入れ、線が要れば border-top を足す */
.post_content .gb-recruit-table + .gb-recruit-table { margin-top: var(--gb-recruit-table-gap); padding-top: var(--gb-recruit-table-gap-inner); border-top: 0; }
.post_content .gb-recruit-table + .gb-recruit-table tr:first-child > th,
.post_content .gb-recruit-table + .gb-recruit-table tr:first-child > td { border-top: 0; }
.post_content .gb-recruit-table td { line-height: 1.8; }
.post_content .gb-recruit-li { display: block; position: relative; padding-left: var(--gb-recruit-li-indent); }
.post_content .gb-recruit-li::before { position: absolute; left: 0; }
.post_content .gb-recruit-li--sq::before { content: "■"; }
.post_content .gb-recruit-li--dot::before { content: "・"; }
.post_content .gb-recruit-li--note::before { content: "※"; }
.post_content .gb-recruit-w500 { font-weight: var(--gb-fw-medium); }
.post_content .gb-recruit-line { display: block; } /* 記号なしの 1 行（【具体的な仕事内容】などの小見出し・その下の段落） */
.post_content .gb-recruit-line--mt { margin-top: var(--gb-recruit-line-mt); }
.post_content .gb-recruit-br-sp { display: none; } /* 旧の「SP だけ改行」 */
.post_content .gb-recruit-entry-btn { margin-top: var(--gb-recruit-btn-mt); }

/* Working Happy at gootbox. ＋ ENTRY ＋ マーキー（帯は画面幅いっぱい） */
.post_content .gb-recruit-entry { background-color: var(--gb-recruit-entry-bg); overflow-x: clip; }
.post_content h2.gb-recruit-entry__lead { margin: 0; padding: 0; border: 0; background: none; color: var(--gb-color-text); font-family: var(--gb-font-heading); font-size: var(--gb-recruit-lead-fs); font-weight: var(--gb-fw-semibold); letter-spacing: .025em; line-height: 1.25; text-align: center; }
.post_content h2.gb-recruit-entry__lead::before,
.post_content h2.gb-recruit-entry__lead::after { content: none; }
.post_content .gb-recruit-entry .gb-recruit-entry-btn { margin-top: var(--gb-space-7); }
.post_content .gb-recruit-entry .gb-marquee-images { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); }

@media (max-width: 781px) {
  .gb-recruit-jobs > .gb-recruit-job:nth-child(4n+1) { --gb-recruit-job-img: var(--gb-recruit-job-01-sp); }
  .gb-recruit-jobs > .gb-recruit-job:nth-child(4n+2) { --gb-recruit-job-img: var(--gb-recruit-job-02-sp); }
  .gb-recruit-jobs > .gb-recruit-job:nth-child(4n+3) { --gb-recruit-job-img: var(--gb-recruit-job-03-sp); }
  .gb-recruit-jobs > .gb-recruit-job:nth-child(4n)   { --gb-recruit-job-img: var(--gb-recruit-job-04-sp); }
  .gb-recruit-jobs > .gb-recruit-job--01 { --gb-recruit-job-img: var(--gb-recruit-job-01-sp); }
  .gb-recruit-jobs > .gb-recruit-job--02 { --gb-recruit-job-img: var(--gb-recruit-job-02-sp); }
  .gb-recruit-jobs > .gb-recruit-job--03 { --gb-recruit-job-img: var(--gb-recruit-job-03-sp); }
  .gb-recruit-jobs > .gb-recruit-job--04 { --gb-recruit-job-img: var(--gb-recruit-job-04-sp); }
  .gb-recruit-jobs > .gb-recruit-job.has-gb-bg { --gb-recruit-job-img: var(--gb-recruit-job-img-pc); }    /* エディターの画像（スマホ用が無ければ PC 用をそのまま） */
  .gb-recruit-jobs > .gb-recruit-job.has-gb-bg-sp { --gb-recruit-job-img: var(--gb-recruit-job-img-sp); }
  .post_content .gb-recruit-job__head .wp-block-accordion-heading__toggle { padding: 0 var(--gb-recruit-job-pad-x-sp); }
  .post_content .gb-recruit-job .wp-block-accordion-panel { padding: var(--gb-recruit-panel-pad-sp); }
  /* 募集要項の 2 列は縦積み（項目名の下に内容） */
  .post_content .gb-recruit-table th,
  .post_content .gb-recruit-table td { display: block; width: 100% !important; }
  .post_content .gb-recruit-table th { padding-bottom: 0; border-bottom: 0; }
  .post_content .gb-recruit-br-sp { display: inline; }
  .post_content .gb-recruit-entry .gb-marquee-images { --gb-mqi-sp-scale: var(--gb-recruit-mqi-sp-scale); }
}

/* =========================================================
   TOP のスマホ（781px 以下）: ABOUT / SERVICE / WORKS を「リード → 写真（左）× インタビュー（右）」に組み替える（2026-10-21 版）
   - 並び替えは CSS だけ（JS が包む .gb-about__pin を display: contents にして、右カラムをグリッドに）
     行 1 = リード（intro、2 列分）／ 行 2 = 写真（ceo、左の列）＋ インタビュー（cards、右の列）。下揃え
   - ◢ は右カラム（.gb-about__main）の ::before（濃・左下）/ ::after（淡・右下）で描き、帯の [gb_about_shapes] は出さない
   - インタビューはカードの枠・本文を出さず、ラベル・見出し・役職｜氏名・ボタンだけ
   - 左右反転（WORKS）もスマホでは同じ向き
   値は tokens.css の --gb-top-sp-*
   ========================================================= */
@media (max-width: 781px) {
  /* 段と段のすき間を詰める（2026-10-23 モック「トルツメ」）: WORKS の段（.gb-about）→ 黒い帯（.gb-works-section）の間の白、黒い帯の下の空き */
  #body_wrap.top .post_content .gb-about + .gb-works-section,
  #body_wrap.top .post_content .gb-about + * { margin-top: var(--gb-top-sp-after-about-mt) !important; }
  #body_wrap.top .post_content .gb-about { margin-bottom: 0 !important; }
  #body_wrap.top .post_content .wp-block-group.gb-works-section { padding-bottom: var(--gb-top-sp-works-pb); }
  /* 段を包む SWELL の全幅ブロック（エディターの sp-py-40 = 上下 40px 相当）の余白を消す: ABOUT / SERVICE / WORKS の段は下、黒い帯は上下（EVENT の段はそのまま） */
  #body_wrap.top .post_content .swell-block-fullWide:has(.gb-about) { padding-bottom: var(--gb-top-sp-fullwide-py) !important; }
  #body_wrap.top .post_content .swell-block-fullWide:has(.gb-works-section) { padding-top: var(--gb-top-sp-fullwide-py) !important; padding-bottom: var(--gb-top-sp-fullwide-py) !important; }
  #body_wrap.top .gb-about { --gb-about-lead-fs: var(--gb-top-sp-lead-fs); }
  #body_wrap.top .gb-about .gb-title-box,
  #body_wrap.top .post_content .gb-about .wp-block-group.gb-title-box { font-size: var(--gb-top-sp-title-size); } /* 箱アイコン＋ABOUT を一回り大きく（2026-10-23 モック） */
  #body_wrap.top .gb-about .gb-about__lead,
  #body_wrap.top .post_content .gb-about h3.gb-about__lead,
  #body_wrap.top .post_content .gb-about p.gb-about__lead { letter-spacing: var(--gb-top-sp-lead-ls); line-height: var(--gb-top-sp-lead-lh); }

  /* グリッド: intro（2 列）／ 写真 ＋ インタビュー */
  #body_wrap.top .gb-about .gb-about__main > .gb-about__pin { display: contents; }
  #body_wrap.top .gb-about .gb-about__main,
  #body_wrap.top .post_content .gb-about .wp-block-column.gb-about__main {
    position: relative; isolation: isolate;
    display: grid;
    grid-template-columns: var(--gb-top-sp-photo-col) minmax(0, 1fr);
    column-gap: var(--gb-top-sp-col-gap);
    align-items: end;
  }
  #body_wrap.top .gb-about .gb-about__main > *:not(.gb-about__ceo):not(.gb-about__cards) { grid-column: 1 / -1; }
  #body_wrap.top .gb-about .gb-about__intro,
  #body_wrap.top .post_content .gb-about .wp-block-group.gb-about__intro { grid-column: 1 / -1; grid-row: 1; margin-bottom: var(--gb-top-sp-row-gap); }

  /* 写真（左の列。列より大きく、下揃え。左右反転も同じ） */
  #body_wrap.top .gb-about .gb-about__main > .gb-about__ceo,
  #body_wrap.top .post_content .gb-about figure.gb-about__ceo,
  #body_wrap.top .gb-about.gb-about--mirror .gb-about__main > .gb-about__ceo,
  #body_wrap.top .post_content .gb-about.gb-about--mirror figure.gb-about__ceo {
    grid-column: 1; grid-row: 2;
    position: relative; z-index: 1;
    width: var(--gb-top-sp-photo-w); max-width: none; height: auto;
    margin: 0 0 0 var(--gb-top-sp-photo-left);
    overflow: hidden; pointer-events: none; /* 下へ沈めた写真の下端を、行の下端で切る */
  }
  #body_wrap.top .gb-about .gb-about__ceo img,
  #body_wrap.top .post_content .gb-about figure.gb-about__ceo img { display: block; width: 100%; height: auto; clip-path: none; translate: 0 var(--gb-top-sp-photo-sink); } /* 頭が右の列の見出しより上に出ないよう、写真だけ少し下げる（行の高さ・余白は変えない） */

  /* ◢: 右カラムの左下（濃）と右下（淡）。画面の端まで */
  #body_wrap.top .gb-about .gb-about__main::before,
  #body_wrap.top .gb-about .gb-about__main::after {
    content: ""; position: absolute; bottom: 0; z-index: 0; display: block; pointer-events: none;
  }
  #body_wrap.top .gb-about .gb-about__main::before {
    left: calc(50% - 50vw); width: var(--gb-top-sp-dark-w); height: var(--gb-top-sp-dark-h);
    background-color: var(--gb-about-shape-dark); clip-path: polygon(0 0, 100% 100%, 0 100%);
  }
  #body_wrap.top .gb-about .gb-about__main::after {
    right: calc(50% - 50vw); width: var(--gb-top-sp-light-w); height: var(--gb-top-sp-light-h);
    background-color: var(--gb-about-shape-light); clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }
  #body_wrap.top .gb-about .gb-about__shapes { display: none; } /* 帯の ◢ は使わない */

  /* インタビュー（右の列）: 枠なし。ラベル → 見出し → 役職｜氏名 → ボタン */
  #body_wrap.top .gb-about .gb-about__cards,
  #body_wrap.top .post_content .gb-about .wp-block-group.gb-about__cards {
    grid-column: 2; grid-row: 2; position: relative; z-index: 3;
    margin: 0; padding: 0 0 var(--gb-top-sp-iv-pb); width: auto; /* 下の余白は padding（margin は SWELL やほかのルールに消されることがある） */
  }
  #body_wrap.top .gb-about .gb-about__card,
  #body_wrap.top .post_content .gb-about .wp-block-group.gb-about__card {
    position: static; margin: 0; padding: 0; background: none; box-shadow: none; clip-path: none;
  }
  #body_wrap.top .gb-about .gb-about__card > .wp-block-group__inner-container,
  #body_wrap.top .gb-about .gb-about__card:not(:has(> .wp-block-group__inner-container)) { display: flex; flex-direction: column; align-items: flex-start; }
  #body_wrap.top .gb-about .gb-about__card-label,
  #body_wrap.top .post_content .gb-about p.gb-about__card-label { display: none; } /* スマホは見出し・役職｜氏名・ボタンだけ（モックどおり） */
  #body_wrap.top .gb-about .gb-about__card-panels,
  #body_wrap.top .post_content .gb-about .wp-block-group.gb-about__card-panels,
  #body_wrap.top .gb-about .gb-about__card-panel,
  #body_wrap.top .post_content .gb-about .wp-block-group.gb-about__card-panel { order: 2; width: 100%; margin: 0; padding: 0; min-height: 0; height: auto; }
  #body_wrap.top .gb-about .gb-about__card-name,
  #body_wrap.top .post_content .gb-about p.gb-about__card-name { position: static; order: 3; margin: var(--gb-top-sp-iv-name-mt) 0 0; text-align: left; }
  #body_wrap.top .gb-about .gb-about__card-more,
  #body_wrap.top .post_content .gb-about .wp-block-buttons.gb-about__card-more { order: 4; margin: var(--gb-top-sp-iv-btn-mt) 0 0; width: 100%; }
  /* スマホの文言は「VIEW MORE」（inc/gootbox-buttons.php の gb_button_sp_labels）なので、ほかのボタンと同じ標準サイズのまま（2026-10-27。以前は文字 11px・余白詰め） */
  /* 標準サイズ（約 190px）は右の列（390 で 155px）に収まらないので、ボタンだけ右の余白（gutter）まで使って画面の右端にそろえる（2026-10-27） */
  #body_wrap.top .gb-about .gb-about__card-more,
  #body_wrap.top .post_content .gb-about .wp-block-buttons.gb-about__card-more { justify-content: flex-end; width: calc(100% + var(--gb-gutter)); margin-right: calc(-1 * var(--gb-gutter)); }
  #body_wrap.top .gb-about .gb-about__card-more .wp-block-button,
  #body_wrap.top .gb-about .gb-about__card-more .wp-block-button .wp-block-button__link.wp-element-button { width: auto; max-width: none; white-space: nowrap; }
  #body_wrap.top .gb-about .gb-about__card-text,
  #body_wrap.top .post_content .gb-about p.gb-about__card-text { display: none; }
  #body_wrap.top .gb-about .gb-about__card-title,
  #body_wrap.top .post_content .gb-about h3.gb-about__card-title,
  #body_wrap.top .gb-about .gb-about__card:has(.gb-about__card-label) .gb-about__card-title,
  #body_wrap.top .post_content .gb-about .gb-about__card:has(.gb-about__card-label) h3.gb-about__card-title {
    padding: 0; margin: 0; font-size: var(--gb-top-sp-iv-title-fs); line-height: 1.5;
  }
}

/* =========================================================
   TOP FV: 質問ボックスを右下の「・・・」のフキダシにまとめる（2026-10-21。2026-10-22 から PC も同じ UI）
   - JS（gb-ask.js の mount）が中身を .gb-ask__sheet に包み、.gb-ask__fab（Q）を足す。PC では sheet は display: contents、fab は出さない = 変更なし
   - 全幅（PC も）: 右下に黄色い丸（白い「・・・」、右下にしっぽ）。押すと上に黒いフキダシ（.gb-ask__sheet）が開き、
     PC は位置だけ変える（--gb-ask-sp-fab-right / -bottom を PC 用の --gb-ask-right / -bottom に。Scroll の下端とそろう）。
     [gb_ask] で本文に置いたとき（.gb-ask--mv が無い）は今までどおり（sheet は display: contents、丸は出ない）。
     「gootboxについて」→ 白い面（回答 → 候補〔黄色い点のリスト〕→ 入力欄〔グレーの線の楕円。未入力は ●、フォーカス・入力で黒い丸に →〕）。
     開くと Q は消え、黒いフキダシのしっぽが Q のしっぽと同じ場所に来る（モック iPhone 14 Pro – 12 / 13、動画モック gootbox_askbox）
   - 動き: 右下の角から黒い四角が広がる → 中身が浮かぶ。閉じるときは薄くなって消え、Q が戻る（JS が .is-sheet-closing を animationend まで付ける）
   - 上の「TOP KV スマホ版」ブロックより後ろに置く（同じ詳細度のルールに勝つため）。値は tokens.css の --gb-ask-sp-fab-* / --gb-ask-sp-sheet-*
   ========================================================= */
.gb-ask__sheet { display: contents; }
.gb-ask__fab { display: none; }

@media (min-width: 782px) {
  .gb-ask--mv { --gb-ask-sp-fab-right: var(--gb-kv-edge-right, var(--gb-ask-right)); --gb-ask-sp-fab-bottom: var(--gb-ask-bottom); } /* PC: 右下の丸の位置。右端はヘッダーのメニューの右端（gb-ask.js の alignEdges() が .p-mainVisual に --gb-kv-edge-right を入れる）、下端は Scroll・CONTACT US とそろう */
}
@media all { /* 以前は (max-width: 781px)。PC も同じ UI にしたので全幅（ブロックの入れ子をそのまま残すための書き方） */
  /* 根元 = 丸の位置（右下）。sheet はこの上に absolute で開く */
  .p-mainVisual > .gb-ask.gb-ask--mv,
  .gb-kv > .gb-ask.gb-ask--mv {
    left: auto;
    right: var(--gb-ask-sp-fab-right);
    bottom: var(--gb-ask-sp-fab-bottom);
    width: var(--gb-ask-sp-fab-size);
    max-width: none;
    height: var(--gb-ask-sp-fab-size);
  }
  /* Q */
  .gb-ask--mv .gb-ask__fab {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--gb-ask-sp-fab-size);
    height: var(--gb-ask-sp-fab-size);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--gb-ask-sp-fab-bg);
    color: var(--gb-ask-sp-fab-fg);
    font-family: var(--gb-font-heading);
    font-weight: var(--gb-fw-bold);
    font-size: var(--gb-ask-sp-fab-fs);
    line-height: 1;
    box-shadow: var(--gb-ask-sp-fab-shadow);
    cursor: pointer;
    transition: transform var(--gb-header-transition);
  }
  .gb-ask--mv .gb-ask__fab::after { /* 右下のしっぽ: g キューブの吹き出し（[gb_gbox bubble="y"]、inc/gootbox-gbox.php の path）と同じバランス。
                                        丸の中心から見て 45° の向きに、丸の線の上の 2 点（45° ± 11°。幅は半径の約 0.38）から先（外接四角の右下の角 = 半径の約 1.41 倍）へ伸びる細い三角。
                                        polygon は「丸の中心を左上の角とする、半径と同じ大きさの四角」の中の座標。先の 2 つ手前の点は丸の内側（0.8 倍）で、継ぎ目を消すため */
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: var(--gb-ask-sp-fab-tail);
    height: var(--gb-ask-sp-fab-tail);
    background-color: var(--gb-ask-sp-fab-bg);
    clip-path: polygon(66% 45%, 82.5% 56.5%, 100% 100%, 56.5% 82.5%, 45% 66%);
  }
  .gb-ask--mv .gb-ask__fab .gb-ask__dots { /* 「・・・」（白）。動画モック gootbox-thinking-bubble: 丸の直径に対して 点 0.105・間隔 0.232・中心より 0.027 下 */
    --gb-ask-dots-size: var(--gb-ask-sp-fab-dot);
    --gb-ask-dots-gap: var(--gb-ask-sp-fab-dot-gap);
    color: var(--gb-ask-sp-fab-dot-color);
    transform: translateY(var(--gb-ask-sp-fab-text-dy));
  }
  /* 開いているあいだは Q を消す（黒いフキダシのしっぽが Q のしっぽと同じ場所に来て入れ替わる）。
     動画モック: 押した瞬間に Q は消え、閉じるときはフキダシが薄くなるのと一緒に Q が戻る（.is-sheet-closing の間に opacity が 1 へ） */
  .gb-ask--mv .gb-ask__fab { transition: opacity var(--gb-ask-sp-close-dur) var(--gb-ease-out), visibility 0s, transform var(--gb-header-transition); }
  .gb-ask--mv .gb-ask__fab:hover,
  .gb-ask--mv .gb-ask__fab:focus-visible { transform: scale(var(--gb-ask-sp-fab-hover-scale)); } /* PC のマウス */
  .gb-ask--mv.is-sheet-open .gb-ask__fab { opacity: 0; visibility: hidden; transition: opacity 0.12s var(--gb-ease-out), visibility 0s linear 0.12s; }

  /* 黒いフキダシ（Q の上） */
  .gb-ask--mv .gb-ask__sheet {
    display: none;
    position: absolute;
    right: 0;                               /* 本体の右端 = 丸の右端（しっぽの右辺がそのまま続く） */
    bottom: var(--gb-ask-sp-sheet-gap);     /* 本体の下端 = 丸の下端の少し上。その分がしっぽの高さ */
    z-index: 1;
    width: var(--gb-ask-sp-sheet-w);
    padding: var(--gb-ask-sp-sheet-pad);
    border-radius: var(--gb-ask-sp-sheet-radius); /* 動画モックは角を立てた四角（0） */
    background-color: var(--gb-ask-sp-sheet-bg);
    color: var(--gb-ask-sp-sheet-fg);
    box-shadow: var(--gb-ask-sp-sheet-shadow);
    transform-origin: 100% 100%;            /* 右下（Q のしっぽの先）から広がる */
    /* 高さは固定（動画モック 2: 黒い四角が開ききってから白い面が出る。天地は最初から確保）。中は縦の flex: 見出し / 回答 / 候補（余った高さを埋める）/ 入力欄 */
    display: none;
    box-sizing: border-box;
    height: var(--gb-ask-sp-sheet-h);
    flex-direction: column;
  }
  .gb-ask--mv.is-sheet-open .gb-ask__sheet,
  .gb-ask--mv.is-sheet-closing .gb-ask__sheet { display: flex; }
  /* 動き（動画モック gootbox_askbox）: 押すと右下の角から黒い四角が広がり（はじめは薄い）、広がりきる頃に中身が浮かび上がる。
     閉じるときは全体がすっと薄くなって消える（.is-sheet-closing は JS が animationend まで付ける） */
  .gb-js .gb-ask--mv.is-sheet-open .gb-ask__sheet { animation: gb-ask-sheet-in var(--gb-ask-sp-open-dur) var(--gb-ease-out) both; }
  .gb-js .gb-ask--mv.is-sheet-open .gb-ask__sheet::before,
  .gb-js .gb-ask--mv.is-sheet-open .gb-ask__chips,
  .gb-js .gb-ask--mv.is-sheet-open .gb-ask__form { animation: gb-ask-sheet-content-in var(--gb-ask-sp-content-dur) var(--gb-ease-out) var(--gb-ask-sp-content-delay) both; }
  .gb-js .gb-ask--mv.is-sheet-open .gb-ask__answer { animation: gb-ask-sheet-content-in 0.25s var(--gb-ease-out) both; } /* 回答は出たときにすぐ浮かぶ（開くときの遅れを付けると、あとから出た回答まで遅れる） */
  .gb-js .gb-ask--mv.is-sheet-closing .gb-ask__sheet { animation: gb-ask-sheet-out var(--gb-ask-sp-close-dur) var(--gb-ease-out) both; pointer-events: none; }
  .gb-ask--mv .gb-ask__sheet::after { /* しっぽ: 本体の下端から Q のしっぽの先（丸の右端 × 下端の角）へ向かう直角三角形。右辺は本体の右辺の続き */
    content: "";
    position: absolute;
    right: 0;
    top: calc(100% - 1px); /* 本体に 1px 食い込ませて継ぎ目を消す */
    width: var(--gb-ask-sp-sheet-tail-w);
    height: calc(var(--gb-ask-sp-sheet-gap) + 1px);
    background-color: var(--gb-ask-sp-sheet-bg);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
  }
  .gb-ask--mv .gb-ask__sheet::before { /* 見出し「gootboxについて」 */
    content: var(--gb-ask-sp-sheet-title);
    display: block;
    flex: none;
    margin: 0 0 var(--gb-ask-sp-sheet-title-mb);
    font-size: var(--gb-ask-sp-sheet-title-fs);
    letter-spacing: 0.04em;
    line-height: 1.4;
  }

  /* 黒い枠の中の白い面 = 回答（あるとき）＋ 候補 ＋ 入力欄。すき間なく縦に並べて 1 枚の面に見せる */
  .gb-ask--mv .gb-ask__answer { position: relative; inset: auto; display: block; flex: 0 1 auto; min-height: 0; margin: 0; padding: var(--gb-ask-sp-answer-pad); border-radius: var(--gb-ask-sp-answer-radius) var(--gb-ask-sp-answer-radius) 0 0; background-color: var(--gb-ask-sp-panel-bg); overflow-y: auto; } /* 長い回答は白い面の中でスクロール（高さは固定） */
  .gb-ask--mv .gb-ask__answer[hidden] { display: none; }
  .gb-ask--mv .gb-ask__talk { display: none; } /* g キューブは出さない（フキダシが狭い） */
  .gb-ask--mv .gb-ask__bubble {
    max-height: none; /* 高さの上限は .gb-ask__answer（flex）で決まり、スクロールも .gb-ask__answer がする */
    overflow: visible;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--gb-color-text);
    font-size: var(--gb-ask-sp-answer-fs);
  }
  .gb-ask--mv .gb-ask__bubble::before,
  .gb-ask--mv .gb-ask__bubble::after { content: none; } /* PC のフキダシのしっぽは出さない */
  .gb-ask--mv .gb-ask__asked { padding-right: calc(var(--gb-space-6) + var(--gb-ask-sp-close-inset) - var(--gb-ask-sp-panel-pad-x)); font-size: var(--gb-ask-sp-asked-fs); letter-spacing: 0.02em; color: var(--gb-color-text-muted); } /* 右は × の分だけあける */
  .gb-ask--mv .gb-ask__bubble { position: static; }
  .gb-ask--mv .gb-ask__close { top: var(--gb-ask-sp-close-inset); right: var(--gb-ask-sp-close-inset); } /* 白い面の右上（カードの内側の余白を 0 にしたので、PC の位置だと本文に重なっていた） */
  .gb-ask--mv .gb-ask__text,
  .gb-ask--mv .gb-ask__sources { font-size: var(--gb-ask-sp-answer-fs); }
  .gb-js .gb-ask--mv.is-open .gb-ask__bubble { animation: none; }

  /* 候補: 黄色い点つきの縦のリスト（横スクロールの帯をやめる） */
  .gb-ask--mv .gb-ask__chips { /* 白い面の本体。余った高さを埋め、候補は下に寄せる。下の余白には入力欄の楕円がまるごと重なる（動画モック 2: 楕円は白い面の幅いっぱい・いちばん下） */
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    padding: var(--gb-ask-sp-chips-pad);
    padding-bottom: calc(var(--gb-ask-sp-chips-pad-b) + var(--gb-ask-sp-pill-overlap));
    border-radius: var(--gb-ask-sp-answer-radius);
    background-color: var(--gb-ask-sp-panel-bg);
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .gb-ask--mv .gb-ask__chips::before { /* 回答がまだ無いとき、白い面の上に「聞きたいことはありますか？」（動画モック 2） */
    content: var(--gb-ask-sp-empty-text);
    display: none;
    margin: 0 0 var(--gb-ask-sp-chip-gap);
    color: var(--gb-color-text-muted);
    font-size: var(--gb-ask-sp-empty-fs);
    letter-spacing: 0.02em;
    line-height: 1.5;
  }
  .gb-ask--mv .gb-ask__answer[hidden] + .gb-ask__chips::before { display: block; }
  .gb-ask--mv .gb-ask__chips li { margin: 0 0 var(--gb-ask-sp-chip-gap); }
  .gb-ask--mv .gb-ask__chips li:first-child { margin-top: auto; } /* 候補は白い面の下に寄せる */
  .gb-ask--mv .gb-ask__chips li:last-child { margin-bottom: 0; }
  .gb-ask--mv .gb-ask__chip {
    display: flex;
    align-items: center;
    gap: var(--gb-ask-sp-chip-dot-gap);
    width: 100%;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--gb-ask-sp-chip-fg);
    font-size: var(--gb-ask-sp-chip-fs);
    line-height: 1.5;
    text-align: left;
    white-space: normal;
  }
  .gb-ask--mv .gb-ask__chip::before {
    content: "";
    flex: none;
    width: var(--gb-ask-sp-chip-dot);
    height: var(--gb-ask-sp-chip-dot);
    border-radius: 50%;
    background-color: var(--gb-ask-sp-fab-bg);
  }
  .gb-ask--mv .gb-ask__chip:hover,
  .gb-ask--mv .gb-ask__chip:focus-visible { background: none; color: var(--gb-color-text-muted); }
  .gb-ask--mv .gb-ask__answer:not([hidden]) + .gb-ask__chips { padding-top: var(--gb-ask-sp-sheet-block-gap); border-radius: 0 0 var(--gb-ask-sp-answer-radius) var(--gb-ask-sp-answer-radius); } /* 回答の下に続く */

  /* 入力欄: 白い楕円。送信ボタンは 未入力 = 小さな ●、入力あり = 黒い丸に → */
  .gb-ask--mv .gb-ask__form { /* 候補の白い面の下の余白にまるごと重ねる（負のマージン）。白い面の幅いっぱい（左右 form-mx）。白い面を伸ばす ::before は使わない（中身のフェードで form が重なり順の入れ物になり、線が隠れた） */
    position: relative;
    flex: none;
    margin: calc(-1 * var(--gb-ask-sp-pill-overlap)) var(--gb-ask-sp-form-mx) var(--gb-ask-sp-panel-pad-b);
    padding: var(--gb-ask-sp-form-pad);
    border: 1px solid var(--gb-ask-sp-input-border);
    background-color: var(--gb-ask-sp-panel-bg);
    box-shadow: none;
  }
  .gb-ask--mv .gb-ask__input { height: var(--gb-ask-sp-input-h); font-size: var(--gb-ask-sp-input-fs); color: var(--gb-ask-sp-input-fg); caret-color: var(--gb-ask-sp-input-fg); } /* 16px 未満だと iPhone が入力時に画面を拡大する */ /* フキダシの文字色（白）を受け継いで、白い入力欄で入力した文字が見えなかった */
  .gb-ask--mv .gb-ask__input::placeholder { color: var(--gb-color-text-muted); font-size: var(--gb-ask-sp-placeholder-fs); }
  .gb-ask--mv .gb-ask__submit {
    position: relative;
    width: var(--gb-ask-sp-submit-size);
    height: var(--gb-ask-sp-submit-size);
    padding: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--gb-color-text-inverse);
    font-size: 0;
    opacity: 1;
    transition: background-color var(--gb-header-transition);
  }
  .gb-ask--mv .gb-ask__submit::before { /* 未入力: ● */
    content: "";
    position: absolute;
    inset: 0;
    width: var(--gb-ask-sp-submit-dot);
    height: var(--gb-ask-sp-submit-dot);
    margin: auto;
    border-radius: 50%;
    background-color: var(--gb-ask-sp-submit-dot-color);
    transition: transform var(--gb-header-transition), opacity var(--gb-header-transition);
  }
  .gb-ask--mv .gb-ask__submit::after { /* 入力あり: → */
    content: "→";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--gb-font-base);
    font-size: var(--gb-ask-sp-submit-arrow-fs);
    line-height: 1;
    opacity: 0;
    transform: translateX(-4px);
    transition: transform var(--gb-header-transition), opacity var(--gb-header-transition);
  }
  /* 入力欄がアクティブ（フォーカス中）・入力ありで → （モックの注記「入力アクティブで→マークに」）。送れるのは今まで通り 2 文字から */
  .gb-ask--mv.gb-ask .gb-ask__form:focus-within .gb-ask__submit:disabled { opacity: 1; } /* フォーカス中の → は 2 文字未満（disabled）でも濃く。PC の「未入力は薄く」（.gb-ask .gb-ask__submit:disabled）を打ち消す */
  .gb-ask--mv .gb-ask__submit:not(:disabled),
  .gb-ask--mv .gb-ask__form:focus-within .gb-ask__submit { background-color: var(--gb-color-text); }
  .gb-ask--mv .gb-ask__submit:not(:disabled)::before,
  .gb-ask--mv .gb-ask__form:focus-within .gb-ask__submit::before { opacity: 0; transform: scale(0.4); }
  .gb-ask--mv .gb-ask__submit:not(:disabled)::after,
  .gb-ask--mv .gb-ask__form:focus-within .gb-ask__submit::after { opacity: 1; transform: none; }
  .gb-ask--mv .gb-ask__submit:not(:disabled):hover,
  .gb-ask--mv .gb-ask__submit:not(:disabled):focus-visible { background-color: var(--gb-color-text); color: var(--gb-color-text-inverse); }

  /* 見出し＋リードは、フキダシを開いても・回答が出ても消さない（モック 13。フキダシが手前に重なる）。上の「TOP KV スマホ版」の .is-open で消す指定を打ち消す */
  .p-mainVisual:has(.gb-ask--mv.is-open) .p-mainVisual__textLayer,
  .p-mainVisual:has(.gb-ask--mv.is-sheet-open) .p-mainVisual__textLayer { opacity: 1; }
}
@media (max-width: 781px) { /* ここだけスマホ */
  :root { --gb-tb-top-offset: 0px; } /* 見出しボックスの位置合わせは PC だけ */
  /* 見出しの黄色いドットは白い帯の内側に（帯の左の余白を広げて、その中に置く） */
  :root #body_wrap .p-mainVisual .p-mainVisual__slideTitle { padding-left: calc(var(--gb-kv-band-pad-x) + var(--gb-kv-sp-dot-size) + var(--gb-kv-sp-dot-gap)); }
  :root #body_wrap .p-mainVisual .p-mainVisual__slideTitle::before { left: var(--gb-kv-band-pad-x); }

  /* フキダシを開いている間と入力中は、浮いているヘッダー（ロゴ・メニュー）を消す。
     iOS でキーボードが出るとページがスクロールされ、固定ヘッダーがフキダシの上に重なるため（戻す処理は gb-ask.js）。PC は重ならないので消さない */
  html.gb-ask-typing .l-header,
  html:has(.gb-ask--mv.is-sheet-open) .l-header { opacity: 0; pointer-events: none; }
  html.gb-header-fixed .l-header { transition: background-color var(--gb-header-transition), color var(--gb-header-transition), opacity var(--gb-header-transition); }
}
/* 「・・・」の 3 つの点（.gb-ask__dots。右下のボタン = 白、探しているあいだ = 黄 25%）。
   動画モック gootbox-thinking-bubble（1.83s 周期）: 左から順に 0.2s ずつ遅れて、少し沈んで（0.17s）→ 跳ね上がって（0.13s）→ 少し止まって（0.1s）→ 戻る（0.2s）。残りは静止 */
.gb-ask__dots {
  display: inline-flex;
  gap: var(--gb-ask-dots-gap);
  vertical-align: middle;
  line-height: 0;
}
.gb-ask__dots i {
  display: block;
  width: var(--gb-ask-dots-size);
  height: var(--gb-ask-dots-size);
  border-radius: 50%;
  background-color: currentColor;
}
.gb-js .gb-ask__dots i { animation: gb-ask-dot var(--gb-ask-dots-period) ease-in-out infinite; }
.gb-js .gb-ask__dots i:nth-child(2) { animation-delay: var(--gb-ask-dots-stagger); }
.gb-js .gb-ask__dots i:nth-child(3) { animation-delay: calc(var(--gb-ask-dots-stagger) * 2); }
@keyframes gb-ask-dot {
  0%, 33%, 100% { transform: none; }
  9%            { transform: translateY(var(--gb-ask-dots-dip)); }
  16%, 22%      { transform: translateY(var(--gb-ask-dots-jump)); }
}
.gb-ask__text .gb-ask__dots { /* 探しているあいだ（回答の本文の場所に） */
  --gb-ask-dots-size: var(--gb-ask-dots-loading-size);
  --gb-ask-dots-gap: var(--gb-ask-dots-loading-gap);
  margin: var(--gb-ask-dots-loading-my) 0;
  color: var(--gb-color-yellow);
  opacity: var(--gb-ask-dots-loading-opacity);
}
@media (prefers-reduced-motion: reduce) {
  .gb-js .gb-ask__dots i { animation: none; }
}

@keyframes gb-ask-sheet-in {
  from { opacity: 0.35; transform: scale(0.06); }
  to   { opacity: 1; transform: none; }
}
@keyframes gb-ask-sheet-content-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes gb-ask-sheet-out {
  to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gb-js .gb-ask--mv.is-sheet-open .gb-ask__sheet,
  .gb-js .gb-ask--mv.is-sheet-open .gb-ask__sheet::before,
  .gb-js .gb-ask--mv.is-sheet-open .gb-ask__chips,
  .gb-js .gb-ask--mv.is-sheet-open .gb-ask__form,
  .gb-js .gb-ask--mv.is-sheet-open .gb-ask__answer,
  .gb-js .gb-ask--mv.is-sheet-closing .gb-ask__sheet { animation: none; }
  .gb-js .gb-ask--mv.is-sheet-closing .gb-ask__sheet { display: none; }
}