/* * gootbox デザイントークン * 色・フォント・余白・角丸は必ずここで定義した変数を経由する（CLAUDE.md）。 * 無い値は「ここに追加してから」使う。CSSに直値を書かない。 * * 初版は旧サイトのトーン（黒×白×ライトグレー）を基準に置いている。 * 新デザイン（XD/Figma）が確定したら、このファイルの値だけを差し替える。 */ :root { /* ---- Color ---- */ --gb-color-text: #1a1a1a; --gb-color-text-muted: #8a8a8a; --gb-color-text-inverse: #ffffff; --gb-color-bg: #ffffff; --gb-color-bg-alt: #f2f2f2; --gb-color-line: #e0e0e0; --gb-color-accent: #1a1a1a; --gb-color-text-sub: #333333; --gb-color-overlay: #9e9e9e; /* 写真の上に乗せるグレー */ --gb-color-surface: rgba(255, 255, 255, 0.94); /* 半透明の白カード */ /* ---- Typography ---- */ --gb-font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; --gb-font-heading: "canada-type-gibson", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; /* Gibson（Adobe Fonts kit zjp5nni: 400/700） */ --gb-font-en: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; --gb-fs-xs: 0.75rem; /* 12px */ --gb-fs-sm: 0.8125rem; /* 13px */ --gb-fs-base: 0.875rem; /* 14px */ --gb-fs-md: 1rem; /* 16px */ --gb-fs-lg: 1.25rem; /* 20px */ --gb-fs-xl: 1.5rem; /* 24px */ --gb-fs-2xl: 2rem; /* 32px */ --gb-lh-body: 1.9; --gb-lh-heading: 1.5; --gb-lh-tight: 1.4; --gb-lh-loose: 1.6; /* Figma body-noto: 160% */ --gb-lh-relaxed: 1.7; --gb-lh-none: 1; --gb-fw-extralight: 200; /* セクション見出し・カード見出し（Noto Sans JP 200 を読み込み済み） */ --gb-fw-regular: 400; --gb-fw-medium: 500; --gb-fw-semibold: 600; --gb-fw-bold: 700; --gb-tracking-en: 0.08em; --gb-tracking-heading: 0.14em; /* 24px で 3.36px */ --gb-tracking-body: 0.05em; /* 20px で 1px */ --gb-tracking-button: 0.26em; /* 13px で 3.38px */ /* ---- Spacing (4px base) ---- */ --gb-space-1: 4px; --gb-space-2: 8px; --gb-space-3: 12px; --gb-space-4: 16px; --gb-space-5: 24px; --gb-space-6: 32px; --gb-space-7: 48px; --gb-space-8: 64px; --gb-space-9: 96px; /* ---- Layout ---- * SWELLカスタマイザーの「サイト幅」「記事幅」に追従する（無ければ括弧内の値）。 * 幅を変えたいときは SWELL設定 → サイト全体 → 基本デザイン → 幅 を変更する */ --gb-container: var(--container_size, 1080px); --gb-container-narrow: var(--article_size, 760px); --gb-gutter: 20px; --gb-credit-job-width: 140px; /* （2026-10-23 から未使用。職種の列は一番長い職種の幅に自動） */ --gb-credit-col-gap: var(--gb-space-6); /* クレジットの職種 → 名前の間 */ --gb-pagination-size: 40px; /* 一覧ページネーションの丸ボタン */ /* ---- ボタン共通（ドット拡大＋矢印のホバー） ---- */ --gb-btn-min-width: 175px; --gb-btn-height: 48px; --gb-btn-pad-x: 24px; /* 左パディング */ --gb-btn-gap: 16px; /* ラベルと円の間 */ --gb-btn-circle: 28px; /* 円（矢印の座）の直径 */ --gb-btn-dot: 4px; /* 通常時のドット */ --gb-btn-shift: 5px; /* ホバー時にラベルが右へ動く量 */ --gb-btn-arrow-w: 11px; --gb-btn-arrow-h: 10px; --gb-comingsoon-opacity: 0.3; /* 準備中のボタン・一覧カード（クラス comingsoon ／ 記事の「準備中」）の濃さ（0.45 → 0.3。2026-10-27） */ --gb-comingsoon-badge-fs: 0.6875rem; /* 一覧カードの「COMING SOON」ラベル 11px */ --gb-comingsoon-badge-mt: var(--gb-space-2); /* CTAカード（TOP 中途採用 / お問い合わせ）— 大きいボタン */ --gb-card-pad: 56px; --gb-card-min-h: 414px; --gb-card-text-width: 22em; --gb-cta-text-fs: 0.9375rem; /* CTA本文 15px（Figmaは20pxだが小さめに調整） */ --gb-cta-lead-font: inherit; /* 上の見出し（CONTACT）の書体。inherit = 本文と同じ（EVENT / INTERVIEW の h2 と同じ。2026-10-23） */ --gb-cta-lead-fs: 1.7rem; /* 同 大きさ（EVENT / INTERVIEW の h2 = 本文 17px × 1.6 = 27.2px。CTA の中は 16px なので em でなく rem で固定） */ --gb-cta-lead-fs-sp: var(--gb-h2-fs); --gb-cta-lead-fw: var(--gb-h2-fw); /* 同 細さ */ --gb-cta-image-opacity: 0.9; /* 写真の濃さ（乗算） */ --gb-cta-button-width: 336px; --gb-cta-button-height: 64px; --gb-cta-button-pad: 36px; /* ---- Shape ---- */ --gb-radius-sm: 4px; --gb-radius-pill: 999px; --gb-border: 1px; /* ---- Aurora背景（.gb-aurora）— モノトーンのゆらぎ＋左下の光＋グレイン ---- */ --gb-aurora-base: #FAFAFA; /* 下地 */ --gb-aurora-light: #ffffff; /* 明るい塊 */ --gb-aurora-dark: #d2d2d2; /* 暗い塊（コントラストは控えめに） */ --gb-aurora-glow: #ffffff; /* 左下の光 */ --gb-aurora-blur: 55px; --gb-aurora-drift: 16s; /* ゆらぎ1往復の時間 */ --gb-grain-opacity: 0.09; --gb-grain-size: 240px; /* ノイズタイルの大きさ（小さいほど細かい粒） */ /* ---- 下層の見出し（h1 = 記事/ページタイトル、h2 = 本文の h2）。TOP のセクション見出しと同じ ---- */ --gb-h1-fs: 2.2em; --gb-h1-fw: var(--gb-fw-extralight); --gb-h2-fs: 1.6em; --gb-h2-fw: var(--gb-fw-extralight); /* ---- ヘッダー（SWELL .l-header / .c-gnav に上書き） ---- */ --gb-header-logo-h: 39px; /* ロゴの高さ（Figma: 139×39） */ --gb-header-pad-y: 12px; /* バーの上下余白 */ --gb-header-row-h: 50px; /* ロゴ/ナビ行の高さ */ --gb-header-h: 74px; /* ヘッダー全体の高さ（12+50+12） */ --gb-nav-gap: 32px; /* メニュー項目の間隔 */ --gb-nav-fs: 1rem; /* 16px */ --gb-nav-fw: var(--gb-fw-bold); /* メニューの太さ。指定は当初 600 だったが、キットに Gibson SemiBold が無かった間は Bold（700）で表示されていた → 2026-10 キットに SemiBold が入って細く見えたので、見た目を以前の 700 に固定 */ --gb-tracking-nav: 0.065em;/* 16px で 1.04px */ --gb-header-z: 100; /* トップで固定したヘッダーの重なり */ --gb-header-transition: 0.3s ease; --gb-header-light-fg: var(--gb-color-text); /* トップ（KV 上）: 背景なし・文字は黒 */ --gb-header-light-logo-filter: brightness(0); /* 白ロゴを黒にする（黒ロゴを別に用意したら none に） */ --gb-header-dark-bg: #333333; /* KV を過ぎたあと・下層と同じ黒帯 */ --gb-header-dark-fg: #ffffff; /* CONTACT の hover で右に出る「Let's talk!」のフキダシ */ --gb-header-talk-text: "Let's\A talk!"; /* 文言（\A = 改行） */ --gb-header-talk-size: 54px; /* フキダシの幅 */ --gb-header-talk-gap: 6px; /* CONTACT の文字 → フキダシ */ --gb-header-talk-y: -62%; /* 縦位置（-50% で文字の中央。小さいほど上） */ --gb-header-talk-fs: 11px; --gb-header-talk-bg: var(--gb-color-yellow); --gb-header-talk-fg: var(--gb-color-text); --gb-kv-btn-border: var(--gb-color-accent); /* KV の「CONTACT US」ボタンの枠線の色（ほかのボタンと同じ。黄色にするなら var(--gb-color-yellow)） */ --gb-kv-logo: url("assets/img/logo-kv.png"); /* KV の上にいる間だけ使うロゴ（トップの全画面幅。キューブ黒・グレー、文字が黒。背景は透過）。元は uploads/2026/10/Section-fv__logo.png。差し替えるときはこのファイルを置き換える。カスタマイザーのロゴ設定は触らない */ --gb-kv-dot-color: var(--gb-color-yellow); /* FV の見出しの前のドット */ --gb-kv-dot-size: 0.4em; /* ドットの大きさ（見出しの文字に対して） */ --gb-kv-dot-gap: 0.55em; /* ドットと見出しの間 */ --gb-kv-dot-dur: 12s; /* ゆらぎ 1 周の時間 */ --gb-kv-dot-amp: 0.14; /* ゆらぎの大きさ（0.14 = 最大 14% ふくらむ。0 で動かない） */ --gb-kv-scroll-bottom: var(--gb-ask-bottom); /* PC: FV の「Scroll」の下端の位置（右下の丸・CONTACT US の下端とそろえる） */ --gb-kv-text-bottom: var(--gb-ask-bottom); /* PC: FV のキャッチ（見出し・リード・CONTACT US）の下端の位置（画面の下から） */ --gb-kv-text-indent: 72px; /* PC: FV の文字の左端 ← ヘッダーのロゴ左端からのずれ（画面が広がってもこの差のまま） */ --gb-kv-min-h: 100svh; /* トップの FV の高さ（ヘッダーが浮いているぶん画面いっぱい） */ --gb-header-top: var(--swl-adminbarH, var(--wp-admin--admin-bar--height, 0px)); /* 固定位置（ログイン中は管理バーの下） */ --gb-top-content-pt: 0px; /* トップ: 本文の上の余白（SWELL 既定 4em を上書き） */ --gb-cta-widget-mt: 0px; /* 共通 CTA（フッター直前ウィジェット）の上マージン */ --gb-cta-content-gap: var(--gb-space-9); /* 本文の最後 → 共通 CTA の間 */ /* ---- マーキー（.gb-marquee）— Getting Out Of The Box ---- */ --gb-marquee-color: #a6a6a6; --gb-marquee-fs: clamp(4rem, 12.5vw, 11.25rem); /* 1440px で 180px */ --gb-marquee-gap: 0.35em; /* 文言と文言の間 */ --gb-marquee-speed: 120px; /* 1秒あたりの移動量（大きいほど速い） */ --gb-marquee-pad-y: 0; --gb-marquee-pad-b: 0.22em; /* テキスト版: g等のディセンダー（ヒゲ）が切れないための下余白 */ --gb-marquee-h: clamp(6.25rem, 6.6vw, 12.625rem); /* 画像(SVG)版の高さ＝文字の大きさはこれで決まる。上限90px、SPで縮む（--gb-marquee-fs はテキスト版用で画像版には効かない） */ --gb-marquee-mt-img: -0.2em; /* 画像版の上マージン。負にするとヒーローに重なる */ --gb-marquee-mt: -0.52em; /* 上のブロックへの食い込み量（文字の内側余白ぶん）。0で密着、負で重なる */ --gb-marquee-fw: var(--gb-fw-bold); --gb-marquee-tracking: -0.01em; /* ---- 画像マーキー（.gb-marquee-images）— ギャラリーブロック＋追加CSSクラス（inc/gootbox-marquee-images.php）---- 数字は単位なし。ページごとの個別指定はクラス名で: gb-marquee-h-40 / gb-marquee-speed-60 / gb-marquee-gap-48 */ --gb-mqi-h: 40; /* 画像の高さ（px） */ --gb-mqi-gap: 48; /* 画像と画像の隙間（px） */ --gb-mqi-speed: 60; /* 1秒あたりの移動量（px。大きいほど速い） */ --gb-mqi-speed-scale: 0.85; /* 速さの全体倍率（クラスやショートコードで指定した速さにも掛かる。1 = 指定どおり、小さいほどゆっくり） */ --gb-mqi-sp-scale: 0.7; /* SP（781px 以下）での高さの倍率 */ --gb-mqi-my: var(--gb-space-7); /* 帯の上下マージン（個別指定: 追加CSSクラス gb-marquee-my-16 / ショートコード my="16"） */ --gb-mqi-gray-opacity: 0.55; /* gb-marquee-gray のときの薄さ（hover で 1） */ --gb-mqi-item-w-est: 2.5; /* JS 無効時の周期の見積り: 1枚の幅 ≒ 高さ × この値 */ /* ---- TOP WORKS セクション（.gb-works-section）と2段マーキー（.gb-wm）— 旧サイト踏襲 ---- */ --gb-color-bg-dark: #1a1a1a; /* 黒背景セクション */ --gb-color-dim: #585858; /* ホバー時に写真へ乗算する色 */ --gb-section-pad-y: clamp(64px, 9.72vw, 140px); /* 黒背景セクションの上下余白（1440pxで140px） */ --gb-wm-head-gap: clamp(40px, 5.56vw, 80px); /* 見出し → マーキー */ --gb-wm-more-gap: clamp(40px, 5.56vw, 80px); /* マーキー → VIEW MORE */ --gb-wm-item-w: min(535px, 37.15vw); /* 大きいサムネ（偶数番目） */ --gb-wm-item-w-sm: min(380px, 26.39vw); /* 小さいサムネ（1,3,5…番目） */ --gb-wm-ratio: 535 / 358; /* サムネの縦横比 */ --gb-wm-gap: min(50px, 3.47vw); /* サムネ同士の間隔 */ --gb-wm-row-gap: min(50px, 3.47vw); /* 上段と下段の間隔 */ --gb-wm-speed: 100px; /* 1秒あたりの移動量（大きいほど速い） */ --gb-wm-title-fs: 1rem; --gb-wm-title-pad: 2em; /* タイトルの左右余白 */ --gb-wm-title-border: 2px; /* ホバー時の白い内枠 */ --gb-wm-tag-fs: 1rem; --gb-wm-tag-pad: 10px; /* SP・タブレット（781px以下）で差し替える値 */ --gb-wm-item-w-sp: 70.67vw; --gb-wm-item-w-sm-sp: 49.87vw; --gb-wm-gap-sp: 4vw; --gb-wm-row-gap-sp: 7.47vw; --gb-wm-title-fs-sp: 0.8125rem; --gb-wm-tag-fs-sp: 0.75rem; --gb-wm-tag-pad-sp: 6px; /* ---- アクセントカラー（CMY）— Figma variables c-base / m-base / y-base ---- */ --gb-color-cyan: #00ACD6; --gb-color-cyan-dark: #148BAB; --gb-color-cyan-light: #78BED7; --gb-color-magenta: #E50181; --gb-color-magenta-dark: #AE0767; --gb-color-magenta-light:#E687B5; --gb-color-yellow: #FFCE00; --gb-color-yellow-dark: #D9C300; --gb-color-yellow-light: #FFF771; /* 紙のスポットカラー指定（50% / 20%）と同じ見え方の不透明色 = 白と混ぜた色（ブランドガイド準拠） */ --gb-color-cyan-50: color-mix(in srgb, var(--gb-color-cyan) 50%, #ffffff); --gb-color-cyan-20: color-mix(in srgb, var(--gb-color-cyan) 20%, #ffffff); --gb-color-magenta-50: color-mix(in srgb, var(--gb-color-magenta) 50%, #ffffff); --gb-color-magenta-20: color-mix(in srgb, var(--gb-color-magenta) 20%, #ffffff); --gb-color-yellow-50: color-mix(in srgb, var(--gb-color-yellow) 50%, #ffffff); --gb-color-yellow-20: color-mix(in srgb, var(--gb-color-yellow) 20%, #ffffff); /* 透過版（Figma variables の c-50% / c-20% 等。下地の色が透ける） */ --gb-color-cyan-a50: rgb(0 172 214 / 0.5); --gb-color-cyan-a20: rgb(0 172 214 / 0.2); --gb-color-magenta-a50: rgb(229 1 129 / 0.5); --gb-color-magenta-a20: rgb(229 1 129 / 0.2); --gb-color-yellow-a50: rgb(255 206 0 / 0.5); --gb-color-yellow-a20: rgb(255 206 0 / 0.2); /* ---- キューブアイコン（.gb-cube）— Figma 85:611: 100×96.52 ---- * 面の色 = キューブ色を --gb-cube-tint-base（既定: 白 = 紙の網点と同じ不透明の淡色）と混ぜる * 白背景: 左面100% / 右面・蓋50%　　同色背景(.gb-cube--on-color): 左面50% / 右面・蓋20% * 透過にしたいときは .gb-cube--alpha（tint-base を transparent に） */ --gb-cube-size: 100px; /* 幅。高さは比率で決まる */ --gb-cube-ratio: 100 / 96.7; /* 幅3w : 高さ5r（w=33.3, r=19.34） */ --gb-cube-tint-base: #ffffff; --gb-cube-l: 100%; /* 左面の濃さ */ --gb-cube-r: 50%; /* 右面・蓋の濃さ */ --gb-cube-on-color-l: 50%; /* 同色背景に置くとき */ --gb-cube-on-color-r: 20%; --gb-fw-light: 300; --gb-text-fs: 0.9375rem; /* 本文 15px（サイト共通） */ /* ---- セクション見出しボックス（.gb-title-box）— Figma 85:612（ABOUT / why now…）+ キューブ + ライン ---- */ --gb-font-sub: "Jost", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; /* サブ見出し（Jost Light Italic） */ /* 見出し（キューブのアイコン＋英字）。文字サイズを基準に、ほかは em の比率で持つ（デザイン: 文字 25px / アイコン 46.72×36.02 / 間 12 / アイコン下端がベースラインより 4.8 下）。 サイズを変えるときは --gb-title-size だけを変える（アイコン・間隔・下げ幅が比例する）。em は .gb-title-box の font-size（= --gb-title-size）基準 */ --gb-title-size: clamp(1.5rem, 2.5vw, 3rem); /* 見出しの文字サイズ（今の見出しのサイズ: 48px@1920 → 36px@1440 → SP は約 24.6px）。ここだけ変えれば全体が比例する */ --gb-title-weight: 400; /* semibold（Gibson SemiBold。キット zjp5nni に追加済み） */ --gb-title-style: normal; /* イタリックなし（正体） */ --gb-title-icon-h: 1.2em; /* アイコン（icon_title_bullet.svg）の高さ 36.02 / 25 = 1.441em。幅は SVG の縦横比から自動 */ --gb-title-icon-w: 1.869em; /* 同 幅 46.72 / 25（指定は高さだけ。ラインの位置計算などで幅が要るときに参照） */ --gb-title-gap: 0.48em; /* アイコンの右端（扉の右端）→ 文字の左端 12 / 25 */ --gb-title-icon-drop: 0.19em; /* アイコンの下端が文字のベースラインより下に出る量 4.8 / 25（0.15〜0.23em で調整） */ --gb-title-sub-display: block; /* サブタイトル（.gb-title-box__sub。"what we're getting out ?" など）の表示。none で非表示（余白も残らない）。 追加CSSで :root { --gb-title-sub-display: none; } → 全ページ / body.page-id-306 { … } → そのページだけ */ --gb-tb-title-tracking: 0.02em; /* 48px で 0.96px */ --gb-tb-title-lh: 1.5; --gb-tb-sub-fs: 0.9375rem; /* 15px */ --gb-tb-sub-tracking: 0.04em; /* 15px で 0.6px */ --gb-tb-gap: var(--gb-space-2); /* キューブ → 見出し / 見出し → サブ */ --gb-tb-sub-mt: var(--gb-space-2); /* 同: 見出しとサブ見出しの間 */ --gb-tb-top-offset: 3.4vw; /* TOP（PC）の見出しボックス（ABOUT など）を右カラムの見出しの上端にそろえる量（実測: 1440 で 49px、1280 で 43.5px = 3.4vw。2026-10-23）。スマホは 0（custom.css） */ --gb-tb-line-w: 1px; --gb-tb-line-color: var(--gb-color-text); --gb-tb-vline-x: clamp(-22px, -1.15vw, -12px); /* 縦ラインの位置（キューブ左端から） */ --gb-tb-vline-top: -27px; /* 縦ラインの上端（キューブ上端から） */ --gb-tb-vline-bottom: -60px; /* 縦ラインの下端（サブ見出し下から） */ --gb-tb-dline-angle: -30deg; /* 斜めライン（キューブ左下の角を通る） */ --gb-tb-dline-len: 150vw; /* ---- TOP ABOUT セクション（.gb-about）---- */ --gb-about-pad-top: clamp(40px, 3.5vw, 68px); --gb-about-pad-bottom: 0; /* ◢が下端まで来るので0 */ --gb-about-col-gap: clamp(32px, 4vw, 80px); --gb-sticky-extra: clamp(0px, calc((100vh - 820px) * 0.3), 140px); /* 縦に大きい画面で、固定見出しをヘッダーから離す量（高さ 820px 以下の画面では 0 = 今までどおり。高さ 1080px で約 78px、最大 140px） */ --gb-sticky-top: calc(var(--gb-header-h) + var(--gb-space-6) + var(--gb-sticky-extra)); /* 固定見出しの上端（追従ヘッダーの下） */ --gb-about-lead-fs: 2.2em; /* リード見出し（親の文字サイズ基準） */ --gb-about-lead-fw: var(--gb-fw-extralight); --gb-about-lead-lh: 1.6; /* ---- g＋箱＋フキダシ アイコン（[gb_gbox]）: 形は SVG、色と動きはここ ---- */ --gb-gbox-size: 120px; --gb-logos-sp-cube-w: 64px; /* TOP スマホ: 企業ロゴの帯の右端に置く g キューブ（Let's talk）の幅 */ --gb-logos-sp-gap: 16px; /* 同: ロゴの帯と g キューブの間 */ /* 幅。高さは 186.7/217.6 の比率 */ --gb-gbox-float-y: 6px; /* ふだんの上下のふわふわ: 動く幅（0 で止まる） */ --gb-gbox-float-dur: 2.2s; /* 同: 片道の時間（大きいほどゆっくり） */ --gb-gbox-float-delay: 1.2s; /* 同: 登場してから浮き始めるまで */ --gb-gbox-bubble: #ececec; /* 白背景用（design/png/Section-service__cta-gbox.svg の色） */ --gb-gbox-g: #1a1311; --gb-gbox-lid: #8e8e8f; --gb-gbox-face-r: #8e8e8f; --gb-gbox-face-l: #1a1311; --gb-gbox-dark-bubble: #faee6e; /* 濃い背景用（添付の見本） */ --gb-gbox-dark-g: #ffffff; --gb-gbox-dark-lid: #b2b2b3; --gb-gbox-dark-face-r: #b2b2b3; --gb-gbox-dark-face-l: #5f5e5e; --gb-gbox-bubble-c: var(--gb-color-cyan); /* bubble="c|m|y" のときのフキダシ色（ブランド CMY） */ --gb-gbox-bubble-m: var(--gb-color-magenta); --gb-gbox-bubble-y: var(--gb-color-yellow); --gb-gbox-g-drop: 46px; /* g が箱の中に隠れている深さ（SVG座標。前面の後ろに隠れる） */ --gb-gbox-g-duration: 0.55s; --gb-gbox-g-delay: 0.1s; --gb-gbox-bubble-duration: 0.4s; --gb-gbox-bubble-delay: 0.55s; /* g の後に出る */ --gb-gbox-hop: -7px; /* hover 時に g が跳ねる高さ */ --gb-gbox-bubble-pop: 1.18; /* hover 時にフキダシが膨らむ倍率 */ /* hover の「Let's talk!」— round（既定）: 丸いフキダシがシッポを支点に大きくなり中に文字 */ --gb-gbox-talk-scale: 1.9; /* 大きくなる倍率（元の丸に対して） */ --gb-gbox-talk-grow: 0.4s; /* 丸が大きくなる時間 */ --gb-gbox-talk-text-delay: 0.4s; /* 文字が出はじめるまでの待ち（丸が大きくなり終わってから） */ --gb-gbox-talk-text-fade: 0.25s; /* 文字のフェードイン時間 */ --gb-gbox-talk-font: var(--gb-font-heading); /* 文言のフォント（Gibson Bold） */ --gb-gbox-talk-color: var(--gb-color-text-sub); /* 文言の色（#333333。round / pill 共通、フキダシの色によらず） */ --gb-gbox-talk-fs: 10.5; /* 丸の中の文字サイズ（SVG 座標。丸と一緒に拡大される。単位なし） */ /* hover の「Let's talk」— pill（talk_style="pill"）: 丸がシッポへ縮み、横長の小さな吹き出しが開く */ --gb-gbox-talk-x: 29.4%; /* 吹き出しのシッポの位置（アイコン幅に対する%。丸いフキダシのシッポの先） */ --gb-gbox-talk-y: 32.5%; /* 同・高さに対する% */ --gb-gbox-talk-pill-fs: 11px; /* 吹き出しの文字サイズ（さりげなく小さめ） */ --gb-gbox-talk-pad: 0.5em 0.95em; --gb-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* 少し行き過ぎて戻る */ /* ---- EVENT 記事（patterns/event-*.php の .gb-event）---- */ --gb-event-lead-fs: 1.0625rem; /* リード文 17px */ --gb-event-label-w: 9em; /* 開催概要の表: 左列（項目名）の幅 */ --gb-event-time-w: 6em; /* プログラムの表: 左列（時刻）の幅 */ --gb-event-label-bg: var(--gb-color-bg-alt); --gb-event-head-date-fs: clamp(2rem, 4.2vw, 3.25rem); /* 開催日ブロックの日付（投稿日より目立たせる） */ --gb-event-status-open-bg: var(--gb-color-cyan); /* 受付中 */ --gb-event-status-open-fg: #ffffff; --gb-event-status-closed-bg: var(--gb-color-text-sub); /* 満席・受付終了 */ --gb-event-status-closed-fg: #ffffff; --gb-event-status-ended-bg: var(--gb-color-bg-alt); /* 開催終了 */ --gb-event-status-ended-fg: var(--gb-color-text-muted); /* ---- プロフィール（.gb-profile）---- */ --gb-profile-gap: var(--gb-space-6); --gb-profile-my: var(--gb-space-7); --gb-profile-photo-w: clamp(120px, 26%, 220px); /* card の写真幅 */ --gb-profile-photo-w-sp: 120px; --gb-profile-photo-w-inline: 56px; --gb-profile-photo-ratio: 4 / 5; --gb-profile-photo-radius: var(--gb-radius-sm, 4px); --gb-profile-name-fs: var(--gb-fs-lg); /* ---- メンバー紹介タイル（.gb-profile--tile / .gb-profile-list）: [gb_profile layout="tile"] / [gb_profile_list] ---- */ --gb-profile-list-gap-x: var(--gb-space-6); --gb-profile-list-gap-y: var(--gb-space-8); --gb-profile-tile-shape: polygon(34% 16%, 100% 16%, 78% 100%, 12% 100%); /* 写真の後ろの斜めの色面（左上, 右上, 右下, 左下。写真枠に対する%）。斜辺の傾き = 22 / 84 → 約14.7° */ --gb-profile-tile-angle: 14.7deg; /* 職種の英字の傾き（垂直から）。色面の斜辺（shape の 22/84 ≒ 14.7°）に沿わせる。0deg で垂直 */ --gb-profile-tile-photo-pl: 25px; /* 写真枠の左の余白（斜めの英字が色面・人物にかぶらないぶん、色面と写真を右へ寄せる） */ --gb-profile-tile-color: var(--gb-color-bg-alt); /* 色指定なし（color="" ）のときの色面 */ --gb-profile-tile-opacity: 1; /* 色面の濃さ（1 = そのまま。2026-10-23: 試しに 50%） */ --gb-profile-tile-max-w-sp: clamp(260px, 78vw, 320px); /* スマホ: ボードメンバーのタイルの最大幅（中央寄せ。2026-10-23） */ --gb-profile-photo-w-sp-sm: 50%; /* スマホ: ボードメンバー以外の写真の幅（1 列。2026-10-27） */ --gb-profile-tile-max-w-sp-sm: clamp(150px, calc((100vw - var(--gb-gutter) * 2 - var(--gb-profile-list-gap-x-sp-sm)) / 2), 200px); /* スマホ: それ以外のメンバー（2 列）の 1 枚の幅。390px で約 167px */ --gb-profile-list-gap-x-sp-sm: 16px; --gb-profile-list-gap-y-sp-sm: 32px; --gb-profile-tile-role-x: 1em; /* 職種の英字の位置（写真枠の左端から。色面の左下 12% より内側に） */ --gb-profile-tile-role-en-fs: var(--gb-fs-md); /* 職種（英字） */ --gb-profile-tile-name-fs: var(--gb-fs-xl); --gb-profile-tile-body-pl: 15%; /* 氏名・肩書・本文の左の余白（タイル幅に対する割合） */ --gb-profile-tile-body-pr: 0px; /* 同 右の余白 */ --gb-profile-tile-head-indent: 14px; /* 氏名・英字・肩書を、本文よりさらに字下げする量（3 つの左端がそろうよう px で指定） */ --gb-profile-tile-body-gap: var(--gb-space-5); /* 写真と氏名の間 */ /* ---- INTERVIEW 記事（.gb-interview）---- */ --gb-interview-q-marker: "――"; /* 質問の先頭に付く記号 */ --gb-interview-q-indent: 1.6em; /* 記号ぶんの字下げ */ --gb-interview-q-color: var(--gb-color-text); --gb-interview-q-mt: var(--gb-space-6); --gb-interview-photo-ratio: 16 / 9; /* 横長写真の比率（記事幅いっぱい、はみ出す分はトリミング） */ --gb-interview-q-fs: 1.125rem; /* 質問（h3）の文字サイズ 18px */ --gb-interview-qa-gap: var(--gb-space-6); /* 画像つき Q&A の画像と文章の間 */ --gb-interview-quote-fs: clamp(1.125rem, 1.6vw, 1.5rem); /* 引用の強調 */ /* 冒頭（patterns/interview-hero.php）の写真とスライダー */ --gb-about-interview-ceo-bottom: 12vh; /* 写真を画面下端から持ち上げる量（大きいほど上がる。0 で TOP と同じ下端） */ --gb-about-interview-step-h: var(--gb-about-step-h); /* 冒頭カード1枚あたりのスクロール量（短くすると冒頭全体が詰まる。TOP は --gb-about-step-h） */ /* ---- スクロール登場演出（.gb-reveal）---- */ --gb-reveal-duration: 0.9s; --gb-reveal-ease: var(--gb-ease-out); --gb-reveal-distance: 32px; /* スライドで入る距離 */ --gb-reveal-step: 0.15s; /* gb-reveal-delay-N の1段あたりの時間差 */ --gb-tb-line-duration: 0.8s; /* 見出しの縦ラインが伸びる時間 */ --gb-tb-dline-duration: 1.8s; /* 斜めラインはゆっくり */ --gb-tb-line-delay: 0.25s; /* 斜めラインは縦ラインより少し遅れて */ /* ---- TOP ABOUT: インタビューカード / CEO写真 / 背景の◢ ---- */ --gb-about-cards-mt: clamp(24px, 3vw, 56px); /* MORE → カード（やや詰め） */ --gb-top-head-gap: calc(var(--gb-title-size) * 1.36); /* TOP の ABOUT / SERVICE / WORKS: 右の大見出しの上の余白。大見出しの文字の上端を、左の箱アイコン見出し（ABOUT 等）の文字の上端にそろえる量（1440 で約 13px） */ --gb-top-title-line-color: transparent; /* TOP の箱アイコン見出しの線（縦・斜め）の色。薄いグレーに戻すなら var(--gb-strategy-hair)、黒なら var(--gb-tb-line-color) */ /* TOP のスマホ（781px 以下）: リード → 写真（左）× インタビュー（右）（custom.css 末尾「TOP のスマホ」） */ --gb-top-sp-lead-fs: 1.3em; /* リード見出し（375px で約 19.5px。「課題に本気な”戦略実装パートナー”。」が 1 行に入る大きさ） */ --gb-top-sp-lead-ls: 0.01em; --gb-top-sp-lead-lh: 1.6; --gb-top-sp-row-gap: 36px; /* ボタン → 写真・インタビューの行 */ --gb-top-sp-fullwide-py: 0px; /* TOP スマホ: ABOUT 〜 WORKS の段と黒い帯を包む全幅ブロック（SWELL の sp-py-40）の上下の余白 */ --gb-top-sp-after-about-mt: 0px; /* ABOUT / SERVICE / WORKS の段 → 次の段の間（スマホ。SWELL のブロック間の空きを消す） */ --gb-top-sp-works-pb: 48px; /* WORKS の黒い帯の下の空き（スマホ。VIEW MORE の下。2026-10-27: 0 → 48、黒い帯がボタンの下で切れて見えたので） */ --gb-top-sp-title-size: 30px; /* rem だとスマホのルート 14px 基準で小さくなるので px */ /* 箱アイコン＋ABOUT の見出しの大きさ（PC の --gb-title-size はスマホで 24px → 30px。2026-10-23 モック） */ --gb-top-sp-photo-col: 185px; /* 写真の列の幅（インタビューの文字はこの右から） */ --gb-top-sp-col-gap: 10px; --gb-top-sp-photo-w: 236px; /* 写真の幅（左端は画面端。2026-10-23: 214 → 236 で一回り大きく。写真の右端は列の幅 185 を越えてインタビューの文字の下に少し入る） */ --gb-top-sp-photo-sink: 16px; /* 写真を枠の中で下げる量（下端は行の下端で切れる）。ABOUT は写真の上に余白が無く、1 行の見出しより頭が約 10px 上に出ていたため */ --gb-top-sp-photo-left: calc(-1 * var(--gb-gutter) - var(--gb-top-sp-photo-trim)); --gb-top-sp-photo-trim: 36px; /* 写真（PNG）の左側の透明な余白ぶん、さらに左へ（人物の左端が画面端に来る） */ /* 写真の左端 = 画面の左端（段の左余白ぶん外へ。2026-10-23: 余白を詰めて一回り大きく） */ /* 写真の左端（記事の左端から。負で画面端へ） */ --gb-top-sp-dark-w: 62vw; /* 濃い ◢（左下）の幅・高さ */ --gb-top-sp-dark-h: 126px; --gb-top-sp-light-w: 31vw; /* 淡い ◢（右下） */ --gb-top-sp-light-h: 66px; --gb-top-sp-iv-pb: 62px; /* インタビュー（ラベル〜ボタン）の下の余白 = 写真の胸のあたりにボタンが来る量 */ --gb-top-sp-iv-title-fs: 1.25rem; /* 見出し 20px（2 行に折り返してよい。2026-10-23 モック） */ --gb-top-sp-iv-name-mt: 10px; /* 見出し → 役職｜氏名 */ --gb-top-sp-iv-btn-mt: 18px; /* 役職｜氏名 → ボタン */ --gb-about-pin-min-gap: 16px; /* TOP の左右固定: 右側が収まらない画面で止まる位置を上げるときの、ヘッダーの下・画面の下の最低限のすき間 */ --gb-about-tight-head-gap: calc(var(--gb-title-size) * 0.36); /* 収まらない高さで詰めるときの値（.is-tight）: 見出し上の余白（ふだんと同じ。見出しの上端をそろえたまま） */ --gb-about-tight-cards-mt: 20px; /* 同: MORE → カード */ --gb-about-tight-card-pad: clamp(20px, 2.6vw, 40px); /* 同: カードの内側の余白 */ --gb-about-tight-more-mt: var(--gb-space-5); /* 同: カードの本文とボタンの間 */ /* TOP のインタビューカード（2026-10 意匠変更: 左上の斜めカットなし・右上に INTERVIEW・右下に 役職｜氏名） */ --gb-ivcard-title-size: 1.2em; /* インタビューカード（TOP）の見出しの文字サイズ（親の文字サイズ基準。1440 で約 26px。599px 以下は下の @media で 1.25em） */ --gb-ivcard-title-weight: 500; /* 同 見出しの太さ */ --gb-top-card-label-fs: 0.9rem; /* 右上の INTERVIEW（段落 + gb-about__card-label） */ --gb-top-card-label-ls: .09em; /* 字間広め */ --gb-top-card-label-color: transparent; /*var(--gb-pos-mute); */ --gb-top-card-label-inset: calc(var(--gb-about-card-pad) / 3); /* カードの上端・右端から */ --gb-top-card-label-space: 7rem; /* 見出しがラベルにかからないよう、見出しの右に空ける幅 */ --gb-ivcard-name-size: clamp(0.8rem, 1.0vw, 1.0rem); /* インタビューカード（TOP）の 役職｜氏名 の文字サイズ（1440 で約 22px。役職 Gibson と氏名 日本語の両方） */ --gb-ivcard-name-weight: 400; /* 同 役職｜氏名の太さ（両方） */ --gb-about-step-h: 70vh; /* カード1枚あたりのスクロール量 */ --gb-about-card-hold: 35vh; /* カードが固定されてから 1 枚目が切り替わり始めるまでの「間」（スクロール量）。大きくするほど 1 枚目を長く見せる。0 で従来どおり */ --gb-about-card-hold-end: 35vh; /* 最後（3 枚目）に切り替わってから、セクションごと上へ流れ始めるまでの「間」。大きくするほど 3 枚目を長く見せる（その分セクションが長くなる）。0 で間なし */ --gb-about-card-bg: rgb(255 255 255 / 0.95); /* 少しだけ透過（後ろの◢がうっすら見える） */ --gb-about-card-shadow: drop-shadow(0 4px 5px rgb(0 0 0 / 0.15)); /* カードの影。デザイン指定 box-shadow: 0 4px 10px 0 rgba(0,0,0,.15) 相当 （カードは角を斜めに切っていて box-shadow が消えるため filter の drop-shadow で出す。ぼかしは box-shadow の半分の値で同じ見え方。影なしは none） */ --gb-about-card-pad: clamp(24px, 3.7vw, 72px); --gb-about-card-notch: 28px; /* 左上の角を切る大きさ */ --gb-about-card-title-fs: 1.6em; /* カード見出し（親の文字サイズ基準） */ --gb-about-card-title-fw: var(--gb-fw-extralight); --gb-about-hover: var(--gb-color-yellow); /* リード文（クリッカブル）の hover 色の既定。セクションの gb-about--y/--c/--m で上書き */ --gb-about-hover-duration: 0.25s; --gb-about-panel-shift: 260%; /* パネルが待機する位置（右） */ --gb-about-panel-duration: 2.2s; --gb-about-panel-out-duration: 0.3s; /* 済んだパネルが消える速さ（入る方より速く＝重なりを減らす） */ /* 末尾の CTA ボタン（[gb_about_shapes cta="…"] が .gb-about__cta を出力）: カードのスライダーを見終えるにつれ 下からフェードインし、さらにスクロールすると（下端に貼り付かず）上へ流れて退場する */ --gb-about-cta-bottom: clamp(40px, 9vh, 110px); /* 出現時の画面下端からの位置 */ --gb-about-cta-start: 0.82; /* この進行度（--gb-about-cards-p）からフェード開始 */ --gb-about-cta-span: 0.22; /* この幅で 0→1（start+span で出きる） */ --gb-about-cta-rise: 18px; /* 出現時に下から持ち上がる距離 */ --gb-about-cta-exit: 1.04; /* この進行度を過ぎると上へスクロールして退場（出きった直後） */ --gb-about-cta-exit-k: 140vh; /* 退場の速さ（= --gb-about-step-h × (カード枚数-1)） */ --gb-about-cta-col-inset: calc(33.33% + var(--gb-about-col-gap)); /* カード（右カラム）幅に center を合わせる左インセット */ --gb-about-ceo-w: clamp(300px, 33vw, 640px); /* 写真の幅の上限（旧 clamp(220px, 24vw, 460px)） */ --gb-about-ceo-ratio: 1 / 1; /* 写真はスクエア（assets/img/about-ceo.webp / service-cmo.webp / works-cco.webp、1200×1200）。斜めカットは CSS の clip-path */ --gb-about-ceo-pos: 50% 100%; /* 写真がスクエアでないときに切り抜く基準（object-position）。上を残すなら 50% 0 */ --gb-about-title-reserve: 200px; /* 見出しボックスのために画面上部に空けておく高さ。通常のPC画面ではこの値が写真の大きさを決める（小さくすると写真が大きくなる） */ --gb-about-mirror-card-gap: var(--gb-space-6); /* 左右反転: カードと写真の間 */ --gb-about-deco-vline-top: -140px; /* 左右反転: 右上の縦ラインの上端（見出し上端から。負で上へ伸びる） */ --gb-about-deco-vline-bottom: -90px; /* 左右反転: 右上の縦ラインの下端（見出しボックス下端から。負で下へ伸びる＝斜めラインと交差させる） */ --gb-about-deco-dline-len: 36vw; /* 左右反転: 右上の斜めラインの長さ（キューブ左下から 1/3 が左下側、2/3 が右上側） */ --gb-about-mirror-reserve: 280px; /* 左右反転: 右上のリード文のために空ける高さ。小さいほど写真が大きい（900px の画面で約27vw） */ --gb-about-mirror-intro-w: 86%; /* 左右反転: 右上のリード文の幅（右カラムに対して） */ /* 実際の写真幅: 画面の高さが足りないときは「画面高 − 見出し位置 − 見出し分」に収まる幅まで縮める（見出しと重ならない） */ --gb-about-ceo-w-eff: min(var(--gb-about-ceo-w), calc((100vh - var(--gb-sticky-top) - var(--gb-about-title-reserve)) * 1 / 1)); --gb-about-ceo-h: calc(var(--gb-about-ceo-w-eff) * 1 / 1); --gb-about-ceo-cut-x: 60.9%; /* 斜めカットが底辺に達する位置（左から） */ --gb-about-ceo-cut-y: 64.8%; /* 斜めカットの左端の高さ（上から）。スクエアでこの2点が 30°（tan30°×60.9% ≒ 35.2%） */ --gb-about-card-more-mt: var(--gb-space-6); /* カードの本文とボタンの間 */ --gb-about-card-name-mt: var(--gb-space-3); /* SP: カードのボタンと名前（CEO｜石井宏幸）の間（PC は右下に置くので使わない） */ --gb-about-card-name-fs: var(--gb-fs-sm); --gb-about-card-name-color: var(--gb-color-text-sub); --gb-about-ceo-caption-x: 0; /* キャプションの左位置（写真の左端から。写真の左側の余白に乗せる） */ --gb-about-ceo-caption-y: 50%; /* キャプションの上下位置（写真の高さに対する%。50% = 上下中央） */ --gb-about-ceo-w-sp: 70vw; --gb-about-ceo-shift: 16px; /* CEO写真が左からスライドインする距離（スクロール連動） */ --gb-scrub-smooth: 0.12s; /* スクロール連動の値を少しだけ滑らかにする */ --gb-scrub-up-distance: 80px; /* gb-scrub-up: 下から生えてくる距離 */ --gb-about-shape-dark: #3b3b3b; --gb-about-shape-light: #9d9d9d; /* 濃いグレーの斜辺 = CEO写真の斜めカット（clip-path: 左端で高さの 72.6%、幅の 60.9% で底辺に達する = 30°）の延長線。 写真はコンテナ左端（--gb-about-cols-x）にあるので、画面左端ではその分だけ高くなる */ --gb-about-cols-x: max(var(--gb-gutter), (100vw - var(--gb-container)) / 2); --gb-about-shape-dark-h: calc(var(--gb-about-ceo-w-eff) * 0.3515 + var(--gb-about-cols-x) * 0.5774); /* 0.3515 = 底辺→左端の高さ / 幅 */ --gb-about-shape-dark-w: calc(var(--gb-about-shape-dark-h) / 0.5774); --gb-about-shape-gap: 10vw; /* 濃いグレーの斜辺と薄いグレーの斜辺の間隔（底辺で） */ --gb-about-shape-light-x: calc(var(--gb-about-shape-dark-w) + var(--gb-about-shape-gap)); --gb-about-shape-light-h: calc((100vw - var(--gb-about-shape-light-x)) * 0.5774); /* ---- お問い合わせフォーム（Contact Form 7。custom.css「お問い合わせフォーム」が使う）---- */ --gb-form-label-w: 30%; /* PC の項目名カラムの幅 */ --gb-form-row-pad-y: var(--gb-space-5); /* 行の上下余白 */ --gb-form-field-max-w: 480px; /* PC の1行入力欄の最大幅（textarea は幅いっぱい） */ --gb-form-field-pad: 0.75em 1em; /* 入力欄の内側余白 */ --gb-form-field-fs: 1rem; /* 16px 未満だと iOS で入力時に画面が拡大されるので 16px */ --gb-form-field-bg: var(--gb-color-bg-alt); --gb-form-textarea-h: 200px; --gb-form-check-size: 18px; /* ラジオ・チェックボックスの大きさ */ --gb-form-badge-w: 40px; /* 「必須」バッジの幅（任意項目はこの幅ぶん下げて項目名の頭を揃える） */ --gb-form-submit-w: 280px; --gb-form-submit-h: var(--gb-cta-button-height); /* ---- WORKS 一覧・カテゴリ一覧（archive-works.php）---- */ --gb-archive-tag-fs: var(--gb-fs-sm); /* カテゴリ名の丸いタグ（旧サイト踏襲） */ --gb-archive-tag-pad: var(--gb-space-3) var(--gb-space-5); --gb-archive-tag-mb: var(--gb-space-8); /* タグ → 一覧 / 該当なしの文言 */ --gb-archive-empty-fs: var(--gb-fs-lg); /* 「事例を個別にご案内するので…」 */ --gb-archive-cta-mt: var(--gb-space-6); /* 文言 → CONTACT ボタン */ --gb-works-search-mt: var(--gb-space-8); /* 一覧・ページ送り → 検索ボックス */ --gb-archive-lead-mb: var(--gb-space-7); /* works-top の本文 → 一覧 */ --gb-works-search-max-w: 560px; /* 入力欄＋ボタンの最大幅 */ --gb-works-search-h: 48px; /* 入力欄とボタンの高さ */ --gb-works-search-fs: var(--gb-fs-base); --gb-works-search-label-fs: var(--gb-fs-sm); --gb-works-search-tags-mt: var(--gb-space-4); /* 入力欄 → タグの一覧 */ --gb-works-tags-top-mb: var(--gb-space-7); /* WORKS 一覧の上に置いたタグの一覧 → 一覧までの間 */ /* WORKS のタグクラウド（[gb_works_tags]。フッター用） */ --gb-works-tags-gap: var(--gb-space-2); /* タグとタグの隙間 */ --gb-works-tags-fs: var(--gb-fs-xs); --gb-works-tags-dark-fg: #ffffff; /* フッター（黒背景）での文字色 */ --gb-works-tags-dark-line: rgb(255 255 255 / 0.35); /* 同 枠線 */ --gb-works-tags-dark-hover-bg: #ffffff; /* 同 hover の背景（白黒の反転 = 白地） */ --gb-works-tags-dark-hover-fg: var(--gb-color-text); /* 同 hover の文字色（黒） */ /* ---- 聞いてみる（.gb-ask = トップ FV 右下の質問ボックス。inc/gootbox-ask.php）---- */ --gb-ask-w: 420px; /* ボックスの幅 */ --gb-ask-right: clamp(20px, 4vw, 64px); /* FV の右端からの距離（SP では左右の余白） */ --gb-ask-bottom: clamp(96px, 13vh, 140px); /* PC: FV の下端から、右下の丸・Scroll・キャッチの下端までの距離（2026-10-23 モック: 画面 972 で 129） */ --gb-ask-fs: 0.875rem; /* 回答の文字 14px */ --gb-ask-input-fs: 1rem; /* 入力欄の文字（16px 未満にしない） */ --gb-ask-note-fs: 0.6875rem; /* AI の回答の注記 11px */ --gb-ask-input-h: 40px; /* 入力欄・送信ボタンの高さ */ --gb-ask-form-pad: 6px 6px 6px 20px; /* 入力欄の枠の内側 */ --gb-ask-chip-fs: var(--gb-fs-sm); /* 候補ボタン・送信ボタンの文字 */ --gb-ask-chip-pad: 10px 16px; --gb-ask-chip-bg: var(--gb-color-text); /* 候補ボタン・送信ボタン: 黒地に白 */ --gb-ask-chip-fg: var(--gb-color-text-inverse); --gb-ask-chip-hover-bg: var(--gb-color-bg); /* 同 hover: 白地に黒 */ --gb-ask-chip-hover-fg: var(--gb-color-text); --gb-ask-submit-off-opacity: 0.3; /* 未入力のときの送信ボタンの薄さ */ --gb-ask-shadow: 0 4px 16px rgb(0 0 0 / 0.1); --gb-ask-bubble-pad: 20px; /* 回答のフキダシの内側 */ --gb-ask-bubble-radius: 20px; --gb-ask-answer-max-h: min(46vh, 360px); /* 回答のフキダシの最大の高さ（超えたら中でスクロール） */ --gb-ask-gbox-size: 84px; /* 回答に添える g キューブの幅 */ /* ---- SERVICE 概念図のスマホ版（.gb-svc-sp = [gb_service_diagram_sp]）---- */ --gb-svc-sp-max-w: 420px; /* 動画の最大幅（画面幅いっぱいにしたくないときに小さくする） */ --gb-svc-sp-my: 0px; /* 上下の余白 */ /* ---- ボックスアニメーション（.gb-box = [gb_box]）---- */ --gb-box-size: 110; /* 既定の幅（px。単位なし。個別には [gb_box size="150"]） */ --gb-box-line-w: 1.25px; /* 線の太さ（190px の絵の中での太さ。小さく置くと細く見える） */ --gb-box-edge: 56px; /* 箱の 1 辺（190px の絵の中での長さ。見た目の幅はこの約 1.41 倍。大きくすると影が隠れる） */ --gb-box-top: 60%; /* 箱の中心の高さ（絵の上端から。大きくすると箱が下がって影に近づく） */ --gb-box-shadow-bottom: 10px; /* 影の位置（絵の下端から。小さくすると影が下がり、箱が浮いて見える） */ --gb-box-shadow-w: 86px; /* 箱の下の影の幅（同上） */ --gb-box-text-font: var(--gb-font-heading); /* 飛び出す「？」「！」「Why?」の書体（Gibson） */ --gb-box-text-fw: var(--gb-fw-regular); /* 同 太さ（Gibson は 400 / 700 を読み込み済み） */ --gb-box-dur: 3s; /* 1 周（回る → はずむ → 開く → 閉じる）の時間 */ --gb-box-dark-bg: #191616; /* 黒背景用: 箱の面の色（フッターの背景色に合わせる） */ --gb-box-dark-line: #ffffff; --gb-box-dark-shadow: rgb(255 255 255 / 0.07); /* 箱の下の影 */ --gb-box-light-bg: #ffffff; /* 白背景用（[gb_box theme="light"]） */ --gb-box-light-line: var(--gb-color-text); --gb-box-light-shadow: rgb(0 0 0 / 0.07); /* ---- フッター CONTACT（.gb-footer-contact）---- */ --gb-fc-max-w: 700px; /* ブロック全体の最大幅 */ --gb-fc-color: #ffffff; --gb-fc-title-fs: 1.2rem; /* 「Contact」 */ --gb-fc-title-mb: 28px; /* 「Contact」と文章の間 */ --gb-fc-text-fs: 0.8rem; --gb-fc-text-lh: 2; --gb-fc-text-mb: 24px; /* 文章とボタンの間 */ --gb-fc-button-w: 290px; /* ボタンの幅 */ --gb-fc-button-h: 38px; /* ボタンの高さ */ --gb-fc-button-fs: 0.9rem; /* ボタンの文字 */ --gb-fc-pad-b: 80px; /* ボタンの下の余白（箱の下端はここにそろう。小さくすると箱が上がる） */ --gb-fc-box-size: 110; /* 箱の絵の幅（px。単位なし）。見えている箱はこの約 4 割の幅。※パターンの [gb_box size="…"] より優先される */ --gb-fc-box-gap: 4px; /* ボタンの右端 → 箱の絵の左端（絵の左右には余白があるので、見た目のすき間は約 50px） */ /* ---- 記事一覧（SWELL 投稿リスト・カード型。INTERVIEW / EVENT）---- */ --gb-postlist-gap-x: 32px; /* 記事と記事の横の隙間 */ --gb-postlist-gap-y: 56px; /* 記事と記事の縦の隙間（上下のマージン） */ --gb-postlist-body-pt: 1em; /* サムネイル → タイトル */ --gb-postlist-title-fw: var(--gb-fw-regular, 400);/* タイトルの太さ（太字にするなら 700） */ --gb-postlist-title-lh: 1.6; --gb-postlist-gap-y-sp: 40px; /* スマホ: 記事と記事の縦の隙間（INTERVIEW 一覧） */ --gb-iv-list-gap-pc: 64px; /* INTERVIEW 一覧（gb-postlist--more）の PC: 記事と記事の間（PC はリスト型・1 列のまま。2026-10-23） */ --gb-news-list-py: 20px; /* NEWS 一覧（gb-postlist--news）の 1 行の上下 */ --gb-news-list-gap: 24px; /* 日付 → タイトル */ --gb-news-list-date-fs: 0.8125rem; /* 日付 13px */ --gb-news-list-title-fs: 1rem; /* タイトル */ --gb-postlist-more-mt: var(--gb-space-4); /* 抜粋 → 「VIEW MORE」ボタン（投稿リストに gb-postlist--more を付けたとき） */ --gb-postlist-empty-py: var(--gb-space-9); /* 記事が 0 件のときの「イベント情報はありません」の上下の余白（サーバーで直接調整した値を取り込み 2026-10-28） */ --gb-postlist-empty-fs: var(--gb-fs-md); /* 同・文字サイズ */ --gb-postlist-empty-title-fs: var(--gb-fs-base); /* 同・上の「COMING SOON」（14px。同上） */ --gb-postlist-empty-title-fw: var(--gb-fw-regular); /* 同・太さ 400（同上） */ --gb-postlist-empty-gap: var(--gb-space-4); /* COMING SOON → 文言 */ /* ---- 会社概要（.gb-company）---- */ --gb-company-label-w: 11em; /* 左列（項目名）の幅 */ --gb-company-pad-y: var(--gb-space-5); /* 行の上下の余白 */ --gb-company-lh: 1.8; /* ---- Motion ---- */ --gb-transition: 0.2s ease; --gb-duration: 0.4s; --gb-ease-out: cubic-bezier(0.165, 0.84, 0.44, 1); /* ---- KV 背景のアイソメトリック・キューブ（[gb_kv_cubes] / inc/gootbox-kv-cubes.php）---- */ --gb-kvc-tone-1: #1a1311; /* 面の色（design/png/bg-pattern.svg の4階調。暗い順） */ --gb-kvc-tone-2: #5f5e5e; --gb-kvc-tone-3: #8e8e8f; --gb-kvc-tone-4: #b2b2b3; --gb-kvc-hero-in: 0.5s; /* 最初のキューブが出る時間 */ --gb-kvc-lid: 0.9s; /* 上フタが起きて奥へ倒れる時間（角度は inc/gootbox-kv-cubes.php の GB_KV_CUBES_LID_ANGLE） */ --gb-kvc-unfold: 1.1s; /* 左右の面が開く時間 */ --gb-kvc-expand-overlap: 0.5s;/* 開き終わる前にパターンが出はじめる量 */ --gb-kvc-step: 0.035s; /* パターンの面が1枚ずつ出る間隔（中心から順。82枚 × 0.035s ≒ 2.9s） */ --gb-kvc-face-dur: 0.55s; /* 1枚が折り込まれて出る時間 */ --gb-kvc-hero-opacity: 0.6; /* 最初のキューブの濃さ（パターンより濃く見せる） */ --gb-kvc-g-fill: var(--gb-kvc-tone-1); /* 最初のキューブから出てくる「g」の色（黒。キューブの薄さは掛からない） */ --gb-kvc-g-scale: 0.8; /* g の大きさ（1 = ロゴと同じ比率。足元を基準に縮む） */ --gb-kvc-g-drop: 45px; /* 出る前に箱の中へ沈めておく量（g のパス座標） */ --gb-kvc-g-delay: 0.35s; /* フタが開き始めてから g が出るまで */ --gb-kvc-g-in: 0.5s; /* ひょこっと出る時間 */ --gb-kvc-g-hold: 0.7s; /* 出たまま見せる時間（このあと左右の面が開く） */ --gb-kvc-g-rise: 16px; /* 消えるときに上へ動く量 */ --gb-kvc-g-out: 0.6s; /* 上へ動きながら消える時間 */ --gb-kvc-hero-hold: 0.2s; /* 展開図になってからフェードアウトを始めるまでの間 */ --gb-kvc-hero-fade: 1.4s; /* 最初のキューブ（展開図）が消える時間 */ --gb-kvc-loop: 1; /* 1 = 繰り返す / 0 = 1回だけ */ --gb-kvc-loop-hold: 5s; /* 完成形を見せておく時間 */ --gb-kvc-loop-fade: 1.2s; /* パターンが消える時間 */ --gb-kvc-drop: 1; /* 1 = ループの直前に、しずく（点＋線）が「Scroll」へ落ちる / 0 = 出さない */ --gb-kvc-drop-from: 52%; /* しずくが出はじめる高さ（メインビジュアルの上端から） */ --gb-kvc-drop-dur: 1.1s; /* 落ちる時間 */ --gb-kvc-drop-dot: 6px; /* 点の大きさ */ --gb-kvc-drop-tail: 36px; /* 線（尾）の長さ */ --gb-kvc-drop-line-w: 1px; /* 線の太さ */ --gb-kvc-drop-opacity: 0.8; /* しずくの濃さ */ --gb-kvc-drop-hit: 5px; /* 着いたとき Scroll が沈む量 */ --gb-kvc-loop-gap: 0.6s; /* 消えてから次が始まるまでの間 */ /* ---- SERVICE 概念図（.gb-svc / [gb_service_diagram] / inc/gootbox-service-diagram.php）— TOP の SERVICE と WORKS の間 ---- */ --gb-svc-yellow: #f8e864; /* XD の淡い黄（ブランド --gb-color-yellow より明るい。図の面用） */ --gb-svc-blue: #5ba8dc; /* STRATEGY の下線・左の矢印（XD 値） */ --gb-svc-magenta: #c4318b; /* EXECUTION の下線・右の矢印（XD 値） */ --gb-svc-ink: var(--gb-color-text); /* 枠線・黒パネル */ --gb-svc-paper: var(--gb-color-bg); --gb-svc-grey: var(--gb-color-bg-alt); /* 土台（EXPERIENCE / With AI） */ --gb-svc-muted-on-dark: #bdbdb8; /* 黒パネル上の「戦略も、／実装も。」 */ --gb-svc-max-w: var(--gb-container); /* 図の幅。既定はサイト幅（INTERVIEW 等と同じ）。広げるなら 1200px などの直値に */ --gb-svc-my: var(--gb-space-9); /* セクションの上下余白 */ --gb-svc-gap: 14px; /* タイル同士の隙間 */ --gb-svc-bw: 1px; /* タイルの枠線 */ --gb-svc-pad: var(--gb-space-5); /* タイルの内側余白 */ --gb-svc-pad-sp: var(--gb-space-4); --gb-svc-list-gap: var(--gb-space-2); --gb-svc-h-fs: clamp(1.375rem, 2.2vw, 1.875rem); /* INPUT / OUTPUT / 土台の見出し */ --gb-svc-step-fs: clamp(1.375rem, 2.6vw, 2.25rem); /* STRATEGY / EXECUTION */ --gb-svc-cre-fs: clamp(1.5rem, 2.8vw, 2.375rem); /* CREATIVE */ --gb-svc-side-fs: clamp(0.875rem, 1.4vw, 1.125rem); /* 戦略も、／実装も。 */ --gb-svc-x-fs: 1.375rem; /* × */ --gb-svc-x-w: 1.5rem; /* × の列の幅（上の「戦略も、／実装も。」と列をそろえるため固定） */ --gb-svc-sub-fs: var(--gb-fs-sm); /* Issues ➜ our strategy / Capability */ --gb-svc-list-fs: var(--gb-fs-base); --gb-svc-list-fs-s: var(--gb-fs-xs); /* 長い項目（海外・インバウンド…） */ --gb-svc-note-fs: var(--gb-fs-xs); /* STRATEGY / EXECUTION の説明 */ --gb-svc-ul-h: 4px; /* 下線の太さ */ --gb-svc-arrow: 22px; /* 矢印の大きさ */ --gb-svc-flow-minh: 250px; /* 黒パネルの最低高さ（PC） */ --gb-svc-base-minh: 150px; /* 土台タイルの最低高さ（PC） */ --gb-svc-mt: 56px; /* 概念図の上の空き（企業ロゴの帯とロゴのフキダシが重ならないぶん。2026-10-23） */ --gb-svc-logo-w: 230px; /* ロゴ（g＋箱＋フキダシ）の幅。高さは --gb-svc-logo-h */ --gb-svc-logo-h: calc(var(--gb-svc-logo-w) * 212 / 260); /* 専用 SVG の viewBox 比 */ --gb-svc-logo-overlap: 0.85; /* ロゴが黒パネルにどれだけ食い込むか（0.8 = g がぎりぎり黒の中、フキダシは半分ほど上にはみ出す） */ --gb-svc-logo-w-sp: 170px; --gb-svc-bub-fs: 22; /* フキダシの文字の大きさ（SVG 座標。ロゴと一緒に拡縮。単位なし） */ --gb-svc-bub-tracking: 0.02em; /* フキダシの文字の字間（詰め） */ --gb-svc-bub-stroke: 2; /* フキダシの枠線の太さ（SVG 座標） */ --gb-svc-g: var(--gb-gbox-g); /* g の色（白地の上） */ --gb-svc-g-on-dark: var(--gb-color-text-inverse); /* 黒パネルがせり上がったあとの g */ --gb-svc-seed: 84px; /* 中央から分かれる小箱の一辺 */ --gb-svc-line-w: 1.5px; /* ロゴから下へ伸びる縦線 */ /* ---- SERVICE ポジション図（.gb-pos / [gb_service_schema] / inc/gootbox-service-position.php）— 原本: _reference/service-position/position-diagram-v1.html ---- 3 色は --gb-svc-magenta（コンサル）/ --gb-svc-blue（制作）/ --gb-svc-yellow（AI）を再利用 */ --gb-pos-title-fs: calc(var(--gb-h2-fs) * 1.33); /* 「gootboxの強み」の大きさ（EVENT / INTERVIEW の h2 より一回り大きく ≒ 36px。2026-10-23） */ --gb-pos-title-fw: var(--gb-h2-fw); /* 同 細さ */ --gb-pos-head-gap: 16px; /* 見出し → リードの間 */ --gb-pos-title-lh: 1.8; /* 「gootboxの強み」の行の高さ（上下の空き。2026-10-23） */ --gb-pos-ink: #141414; /* 線・文字・黒い箱（デザイン値。サイトの文字色に揃えるなら var(--gb-color-text)） */ --gb-pos-paper: var(--gb-color-bg); /* 黒い箱の上の文字 */ --gb-pos-mute: #85857f; /* 補足文字（CONSULTING などの小見出し・〜できない・THE GAP の下） */ --gb-pos-hair: #cfcfca; /* SP のリストの区切り線 */ --gb-pos-mute-light: #aeaea8; /* より薄い補足文字（SP: 開いた箱の下の「戦略実装パートナー」・3者の枠の中の補足） */ --gb-pos-zone: #f2f2ef; /* 空白ゾーン（箱の後ろの薄い六角） */ --gb-pos-face-top: #242424; /* 箱の上面（わずかに明るく） */ --gb-pos-face-right: #0b0b0b; /* 箱の右面（わずかに暗く） */ --gb-pos-font-en: var(--gb-font-heading); /* 欧文（canada-type-gibson） */ --gb-pos-font-jp: var(--gb-font-base); --gb-pos-max-w: var(--gb-container); /* 図の幅。既定はサイト幅。デザイン原本は 1200px */ --gb-pos-my: var(--gb-space-9); /* セクションの上下余白 */ --gb-pos-core: clamp(220px, 20vw, 248px); /* 中央の黒い箱の幅（PC）。v2 で約 65% に縮小（旧 clamp(300px, 31vw, 380px)） */ --gb-pos-core-sp: min(264px, 72vw); /* 同（860px 以下。旧 min(320px, 84vw)） */ --gb-pos-ease: cubic-bezier(.2, .7, .1, 1); --gb-pos-hl-scale: 1.5; /* 強調中のラベル（実装まで、やり切る 等）の倍率（v3。TOP=オンマウス / ループ版=JS）。社名や THE GAP に重なるならここを下げる */ --gb-pos-hl-scale-md: 1.3; /* 同（1100px 以下） */ --gb-pos-hl-scale-sm: 1.2; /* 同（861〜900px。1.3 だと左の腕のちょんちょんが、文末に付くもやもやに重なる） */ --gb-hl-delay: .55s; /* 強調: もやもやが出てから、ラベルが大きくなるまでの間（ちょんちょんはさらに .15s 後）。.4s〜.8s で調整 */ /* ループ版（.gb-pos--loop / [gb_service_schema_more]）— 原本: _reference/service-position/service-position-loop-v1.html */ --gb-pos-panel: #0d0d0d; /* STRATEGY × EXECUTION のパネルの黒 */ --gb-pos-panel-mute: #9a9a95; /* パネル内の補足文字（× / 01 などの小さな英字 / 下の一文） */ --gb-pos-panel-line: rgb(255 255 255 / 0.16);/* パネル下の区切り線 */ --gb-pos-mark-l: #4b4b4b; /* パネル中央の箱マーク: 左面 */ --gb-pos-mark-r: #a9a9a9; /* 同 右面 */ --gb-pos-mark-lid: #b4b4b4; /* 同 フタ */ --gb-pos-tabs-mb: clamp(52px, 168px - 8.2vw, 88px); /* ループ時のタブ → 図の間。開いたパネル（箱の中心から上下に広がる）がタブに重ならない量。パネルは幅が狭いほど背が高くなるので、狭い画面ほど広く（1440 で 52px、1024 以下で 84〜88px） */ --gb-pos-panel-w: clamp(580px, 58vw, 740px); /* ループ時、箱に重ねて開くパネルの幅（見出しや AI ツールの文字にかぶるときはここを調整） */ --gb-pos-loop-pos: 8500ms; /* 図（SCHEMA）を見せる時間（JS が読む）。この間に 左 → 右 の順に強調し、右の強調が消えて 1 秒で CAPABILITY へ（v4） */ --gb-pos-loop-hl-l: 1000ms; /* SCHEMA の開始から、左（コンサル会社）を強調するまで */ --gb-pos-loop-hl-l-off: 3900ms; /* 同、左の強調を外すまで */ --gb-pos-loop-hl-r: 4600ms; /* 同、右（制作会社）を強調するまで */ --gb-pos-loop-hl-r-off: 7500ms; /* 同、右の強調を外すまで */ --gb-pos-loop-in: 5000ms; /* 中身（CAPABILITY）を見せる時間（JS が読む） */ --gb-pos-loop-hl-delay: .9s; /* ループ版の強調で、もやもやが出てからラベルが大きくなるまで（TOP の --gb-hl-delay より長め） */ /* ---- SERVICE STRATEGY: 小見出し（.gb-eyebrow）・領域チップ（ul.gb-fields）・課題 → 打ち手の行（.gb-issue__*）— 原本: _reference/service-strategy/strategy-final-v1.html ---- */ --gb-strategy-ink: var(--gb-pos-ink); /* 文字・見出し行の下線・つなぎ線（#141414） */ --gb-strategy-mute: var(--gb-pos-mute); /* 小見出し・見出し行・打ち手（薄い状態）の文字・FIELDS の「/」（#85857f） */ --gb-strategy-hair: #d4d4cf; /* 課題の行の横罫・つなぎ線の下地 */ --gb-strategy-font-en: var(--gb-font-heading); /* 欧文（canada-type-gibson） */ --gb-strategy-ease: var(--gb-pos-ease); --gb-fields-bg-py: 14px; /* FIELDS に背景色を付けたときの内側の余白（上下） */ --gb-fields-bg-px: 20px; /* 同（左右） */ --gb-fields-gap: 8px; /* FIELDS の行と行の間 */ --gb-fields-max-w: 44em; /* FIELDS の 1 行の最大幅（2〜3 行に折り返す） */ --gb-fields-sep-mx: .9em; /* 区切りの「/」の前後 */ --gb-fields-mb: 56px; /* FIELDS の下 → ISSUE → APPROACH */ --gb-eyebrow-mb: 18px; /* 小見出しの下 */ --gb-issue-q-fr: 0.8fr; /* 「こんなお悩み」の列の幅の比（旧 1fr） */ --gb-issue-a-fr: 1.2fr; /* 「gootbox サポート」の列の幅の比（旧 1.1fr） */ --gb-issue-hover-label: none; /* 見出し行の右端の「― HOVER」。出すなら "HOVER" */ --gb-issue-icon-col: 40px; /* 行の左端（アイコン）の列幅 */ --gb-issue-icon: 26px; /* アイコンの大きさ */ --gb-issue-col-gap: 14px; --gb-issue-row-py: 22px; /* 行の上下（PC） */ --gb-issue-row-py-sp: 20px; /* 同（860px 以下・タッチ端末） */ --gb-issue-a-indent: 160px; /* 打ち手の文字の左（この中につなぎ線と色の四角） */ --gb-issue-line-x: 18px; /* つなぎ線の始まり */ --gb-issue-line-w: 124px; /* つなぎ線の長さ（色の四角は 18 → 142px まで渡る） */ --gb-issue-a-indent-sp: 40px; /* 860px 以下: 打ち手の文字の左 */ --gb-issue-line-w-sp: 22px; /* 860px 以下: 線の長さ */ --gb-issue-mb: 40px; /* 最後の課題の行の下 → 続く本文（原本の締めの段落の上と同じ） */ /* ---- SERVICE EXECUTION: 項目（.gb-cap）— 原本: _reference/service-execution/execution-final-v1.html。小見出しは STRATEGY の .gb-eyebrow を共用 ---- */ --gb-cap-ink: var(--gb-color-text); /* 見出し・説明・項目の文字、番号の前の四角 */ --gb-cap-mute: var(--gb-pos-mute); /* 番号・860px 以下の「/」（#85857f） */ --gb-cap-hair: var(--gb-pos-hair); /* 項目の上下の罫・右のリストの下線（#cfcfca。STRATEGY の --gb-strategy-hair #d4d4cf より少し濃い） */ --gb-cap-font-en: var(--gb-font-heading); /* 番号（canada-type-gibson） */ --gb-cap-col-gap: 48px; /* 左（写真・説明）と右（リスト）の間 */ --gb-cap-py: 44px; /* 項目の上下 */ --gb-cap-py-sp: 32px; /* 同（860px 以下） */ --gb-cap-no-mb: 14px; /* 番号 → 見出し */ --gb-cap-h-mb: 24px; /* 見出し → 写真・リスト */ --gb-cap-img-mb: 20px; /* 写真 → 説明 */ --gb-cap-sp-mb: 16px; /* 860px 以下: 見出し・写真・説明の下 */ --gb-cap-ratio: 21 / 9; /* 写真の切り抜き */ --gb-cap-ratio-sp: 16 / 9; /* 同（860px 以下） */ --gb-cap-li-shift: 30px; /* 右のリスト: マウスを乗せたとき文字が右へずれる量 */ --gb-cap-li-dur: .3s; /* 同 ずれる速さ（ease） */ --gb-pos-loop-first: 3200ms; /* 最初の 1 回だけ、SCHEMA の進行に足す時間（登場アニメのぶん） */ /* ループ版の 860px 以下（.gb-fig = SP 用の図。原本 _reference/service-position/position-diagram-sp-anim-v1.html）。JS が読む。1 周 = --gb-pos-sp-loop */ --gb-pos-sp-l: 1000ms; /* コンサル会社を強調（色 → 線 → 吹き出し） */ --gb-pos-sp-l-off: 4600ms; /* 同、外す */ --gb-pos-sp-r: 5200ms; /* 制作会社 */ --gb-pos-sp-r-off: 8800ms; --gb-pos-sp-b: 9400ms; /* AIツール */ --gb-pos-sp-b-off: 13000ms; --gb-pos-sp-open: 13600ms; /* 箱が開いて g が出る */ --gb-pos-sp-open-off: 17000ms; /* 箱を閉じる */ --gb-pos-sp-loop: 18400ms; /* 1 周 */ --gb-pos-sp-conn: 150ms; /* 強調の開始 → 線が伸び始めるまで */ --gb-pos-sp-bub: 900ms; /* 強調の開始 → 吹き出しが出るまで */ --gb-pos-sp-w: 370; /* SP の図の設計幅（px・単位なし。左右の余白 --gb-gutter の半分ずつまで使う）。これより狭い画面では図全体をこの比率で縮める */ --gb-pos-sp-zone-s0: .62; /* 強調中の色（ゾーンに重ねる同じ形の六角）: 出だしの大きさ（キューブのあたり）。ここから広がる */ --gb-pos-sp-zone-o0: .25; /* 同 出だしの濃さ */ --gb-pos-sp-zone-o1: .5; /* 同 広がりきったときの濃さ */ /* ---- KV A案「The Box」テスト（.gb-kvbox / [gb_kv_box] / inc/gb-kv-box.php / assets/css/gb-kv-box.css）---- */ --gb-kv-bg: #000000; /* 背景・蓋の上の見出し・再生アイコンの三角 */ --gb-kv-fg: #ffffff; /* 見出し・リード・再生ボタンの丸・SCROLL の線 */ --gb-kv-sub: #a0a0a0; /* (01) MISSION / gootbox = … / SCROLL */ --gb-kv-face-dark: #6e6e6e; /* 箱の左面 */ --gb-kv-face-light: #bebebe; /* 箱の右面・蓋 */ --gb-kv-accent: #3f55a5; /* 箱の内側（動画なしのとき） */ /* ---- ABOUT 箱の展開図アニメーション（.gb-ac / [gb_about_cube] / inc/gootbox-about-cube.php）---- */ --gb-ac-max-w: 600px; /* 図の最大幅（展開図は横4面 ≒ この幅） */ --gb-ac-size: clamp(64px, 18vw, 142px); /* 立方体の1辺（142 × 4面 + 隙間 ≒ 600px） */ --gb-ac-gap: 4px; /* 展開図の面と面の隙間（閉じると 0） */ --gb-ac-pop-size: calc(var(--gb-ac-size) * 0.62); /* フタから顔を出す g / 握手アイコンの大きさ */ --gb-ac-pop-bottom: calc(var(--gb-ac-size) * 0.55); /* アイコンの下端の高さ（立方体の中心から上へ） */ --gb-ac-pop-rise: calc(var(--gb-ac-size) * 0.35); /* ひょこっと出るときの移動量 */ --gb-ac-hit-scale: 1.3; /* 黒マスの文字のアテンション（拡大率） */ --gb-ac-hit-dur: 0.25s; --gb-ac-slide-x: -16px; /* 白マスの文字のスライドイン（左から） */ --gb-ac-slide-step: 0.15s; /* 3 面の時間差 */ /* 面の色（2026-10 線画 → 面のキューブ。TOP の KV のキューブとそろえる。デザインの値） */ --gb-ac-face-l: var(--gb-kvc-tone-2); /* 箱の左の面（#5f5e5e）。回転して 180 度で左に来る right の面も同じ */ --gb-ac-face-r: var(--gb-kvc-tone-4); /* 箱の右の面（#b2b2b3）。回転して 180 度で右に来る奥（back）の面も同じ */ --gb-ac-lid: var(--gb-ac-face-r); /* フタが開いている〜閉じる途中（#b2b2b3） */ --gb-ac-lid-closed: #dedede; /* 閉じた箱の上の面 */ --gb-ac-lid-tint-at: calc(var(--gb-ac-lid-dur) * 0.4); /* フタが閉じ始めてから #dedede に切り替わるまで（閉じきる少し手前） */ --gb-ac-net-dark: #54514f; /* 展開図の黒マス（STRATEGY / CREATIVE / EXECUTION） */ --gb-ac-net-light: #e6e6e6; /* 展開図の白マス（With AI / EXPERIENCE / ARTISAN） */ --gb-ac-white: var(--gb-color-bg); /* 黒マスの上の文字の色 */ --gb-ac-line: var(--gb-kvc-tone-1); /* 白マスの上の文字・g・握手・キラキラの色 */ --gb-ac-shadow: #f0f0ee; /* 床の影（薄い菱形） */ --gb-ac-word-fs: calc(var(--gb-ac-size) * 0.13); /* 面の中の文字 */ --gb-ac-iso-x: -35.264deg; /* アイソメトリックの見下ろし角 */ --gb-ac-iso-y: 45deg; --gb-ac-hinge-dur: 0.9s; /* 面が1枚開く/閉じる時間 */ --gb-ac-hinge-step: 0.12s; /* 面ごとの時間差 */ --gb-ac-view-dur: 0.9s; /* アイソメ ⇄ 真上から の回転 */ --gb-ac-color-dur: 0.6s; /* 黒 ⇄ 白 */ --gb-ac-spin-dur: 0.8s; /* くるっと一回転（止め → 回転 → 止め の緩急） */ --gb-ac-spin-hop: calc(var(--gb-ac-size) * -0.2); /* 回るときに少し浮く高さ */ --gb-ac-lid-dur: 0.5s; /* フタの開閉（クイックに） */ --gb-ac-lid-open: 90deg; /* 開いたフタ（上面 = With AI の面。閉 -90 / 0 で垂直に立つ / 90 で外側に寝る） */ --gb-ac-bob-dur: 3.2s; /* ふわふわ1往復 */ --gb-ac-bob: calc(var(--gb-ac-size) * -0.06); --gb-ac-fade: 0.45s; /* 文字のフェード */ --gb-ac-my: var(--gb-space-8); /* セクションの上下余白 */ /* ---- ABOUT 箱アニメーション: 文字パート（2026-10-16 差し替え。.gb-ac__cap / .gb-ac__conf）---- */ --gb-ac-cap-bottom: calc(var(--gb-ac-size) * 0.98); /* 引き出し線の下端の高さ（立方体の中心から上へ。箱の上端の少し上） */ --gb-ac-cap-face-gap: calc(var(--gb-ac-gap) * 3); /* STRATEGY / EXECUTION の線と面の間（真上から見た展開図のとき） */ --gb-ac-lead-h: calc(var(--gb-ac-size) * 0.5); /* 引き出し線の長さ */ --gb-ac-lead-dur: 0.55s; /* 線が伸びる・四角が昇る時間 */ --gb-ac-cap-gap: 14px; /* 日本語と線の間 */ --gb-ac-cap-text-delay: 0.45s; /* 四角・線のあと文字が出るまで */ --gb-ac-cap-en-fs: var(--gb-fs-xs); /* ISSUE / STRATEGY / EXECUTION / with gootbox */ --gb-ac-cap-en-ls: 0.32em; --gb-ac-cap-en-ls-sp: 0.2em; --gb-ac-cap-jp-fs: 0.9375rem; /* 15px: 課題を分解し / 戦略から、/ 実装まで。/ ともに課題解決＆長期並走へ */ --gb-ac-cap-jp-ls: 0.22em; --gb-ac-cap-jp-ls-sp: 0.12em; --gb-ac-sq: 9px; /* 線の上端の色の四角（STRATEGY 青 / EXECUTION 赤） */ --gb-ac-conf: 9px; /* 紙吹雪の四角の一辺（丸は 1.3 倍） */ --gb-ac-conf-dur: 0.7s; --gb-ac-cap-below: calc(var(--gb-ac-lead-h) + 3.5rem); /* 真上から見た展開図の下に出る EXECUTION のキャプション（線＋2 行）のぶん、舞台を下に広げる */ --gb-ac-stage-h: calc(var(--gb-ac-size) * 3.2 + 9rem + var(--gb-ac-cap-below)); /* 上書き: 元の定義はこの行で置き換える */ --gb-ac-scene-top: calc(100% - var(--gb-ac-size) * 1.6 - var(--gb-ac-cap-below)); /* 上書き: 立方体の中心の高さは元のまま（広げたぶん下に空く） */ } /* .gb-about の計算式（:root と同じ式）。カスタムプロパティは「定義した要素」で計算されるため、 セクションの修飾クラス（gb-about--mirror / --photo-sm / --photo-lg）で --gb-about-ceo-w や --gb-about-title-reserve を 上書きしたときに効くように、ここで .gb-about 自身にも同じ式を宣言しておく */ .gb-about { --gb-about-ceo-w-eff: min(var(--gb-about-ceo-w), calc((100vh - var(--gb-sticky-top) - var(--gb-about-title-reserve)) * 1 / 1)); --gb-about-ceo-h: calc(var(--gb-about-ceo-w-eff) * 1 / 1); --gb-about-shape-dark-h: calc(var(--gb-about-ceo-w-eff) * 0.3515 + var(--gb-about-cols-x) * 0.5774); /* 0.3515 = 底辺→左端の高さ / 幅 */ --gb-about-shape-dark-w: calc(var(--gb-about-shape-dark-h) / 0.5774); --gb-about-shape-light-x: calc(var(--gb-about-shape-dark-w) + var(--gb-about-shape-gap)); --gb-about-shape-light-h: calc((100vw - var(--gb-about-shape-light-x)) * 0.5774); } /* * ブレークポイント（CSS変数はメディアクエリに使えないため値を固定） * 構造の切り替え（横並び→縦積み、スクロール演出の ON/OFF）: max-width 781px（WordPress のカラムブロックと同じ） * SP の文字サイズ・余白の段階: max-width 599px（SWELL のスマホ境界と同じ） * ヘッダー依存（追従位置・ヘッダー高さ）: max-width 959px（SWELL のヘッダー切替と同じ。未使用） * メンバー一覧のカラム数だけ 1023px を使う */ /* ========================================================= SP（599px 以下）の段階: 大きさ系のトークンだけをここで差し替える（custom.css は触らない） ========================================================= */ @media (max-width: 599px) { :root { --gb-h1-fs: 1.6em; /* 下層のページタイトル（PC 2.2em → 600px で 35px だったのを約 26px に） */ --gb-h2-fs: 1.35em; /* 本文の h2（PC 1.6em） */ --gb-about-lead-fs: 1.5em; /* ABOUT / SERVICE / WORKS / INTERVIEW 冒頭のリード（PC 2.2em → 375px で 33px だったのを約 23px に） */ --gb-about-card-title-fs: 1.25em; /* インタビューカードの見出し（PC 1.6em） */ --gb-ivcard-title-size: 1.25em; /* TOP のインタビューカードの見出し（PC 1.6em） */ --gb-cta-button-width: 100%; /* 大サイズボタンは幅いっぱい（336px 固定だと 375px で切れる） */ --gb-cta-button-pad: 24px; --gb-form-submit-w: 100%; /* お問い合わせの送信ボタンも幅いっぱい */ } } /* --------------------------------------------------------- VISION / MISSION / VALUES（.gb-vmv = [gb_vmv]。assets/css/gb-vmv.css） --------------------------------------------------------- */ :root { /* 色（既定 = 黒帯） */ --gb-vmv-bg: var(--gb-color-bg-dark); --gb-vmv-ink: var(--gb-color-text-inverse); --gb-vmv-sub: rgb(255 255 255 / 0.68); /* 説明文・番号 */ --gb-vmv-line: rgb(255 255 255 / 0.2); /* 罫線 */ --gb-vmv-accent: var(--gb-color-yellow); /* ■ とピリオド、ホバー時の番号 */ /* 色（[gb_vmv theme="light"] = 白地） */ --gb-vmv-light-bg: var(--gb-color-bg); --gb-vmv-light-ink: var(--gb-color-text); --gb-vmv-light-sub: #6b6b6b; --gb-vmv-light-line: var(--gb-color-line); /* 枠・余白 */ --gb-vmv-max-w: var(--gb-container); /* 中身の最大幅。実際は「置いた場所の幅（記事幅）」と小さいほうになる。もっと狭くするなら 900px などの直値に */ --gb-vmv-gutter: clamp(20px, 5.5vw, 88px); /* 左右の余白 */ --gb-vmv-pad-y: clamp(72px, 9vw, 144px); /* 帯の上下の余白 */ --gb-vmv-my: var(--gb-space-9); /* 帯の外側（前後のセクションとの間） */ --gb-vmv-block-gap: clamp(80px, 13cqi, 160px); /* VISION / MISSION / VALUES の間 */ /* 見出しの行（■ 01 VISION —— どんな会社か） */ --gb-vmv-mark-size: 8px; --gb-vmv-head-gap: clamp(12px, 1.4vw, 20px); --gb-vmv-label-fs: max(0.75rem, calc(var(--gb-vmv-en-size) * var(--gb-vmv-label-ratio))); /* ラベル行の英字（VISION）。欧文コピー × 0.28（スマホの下限 0.75rem） */ --gb-vmv-label-sm-fs: max(0.6875rem, calc(var(--gb-vmv-en-size) * var(--gb-vmv-label-sm-ratio))); /* 番号（01）と右端の和文（どんな会社か）。英字ラベルよりやや小さい */ --gb-vmv-label-ls: 0.08em; /* 英語ステートメント（特大） */ /* ---- 欧文コピーを基準に、ほかは比率（デザイン: 欧文 1 / 和文 0.58 / 説明文 0.28 / ラベル英字 0.28）。欧文は中身の幅の約 7.85% ---- */ --gb-vmv-en-size: clamp(2.5rem, 7.85cqi, 8.25rem); /* 欧文コピー（Experience Creates Tomorrow.）。cqi = 中身の幅の 1%（1440 で約 68px）。スマホは下限 2.5rem */ --gb-vmv-jp-ratio: 0.58; /* 和文コピー ÷ 欧文コピー */ --gb-vmv-body-ratio: 0.28; /* 説明文 ÷ 欧文コピー */ --gb-vmv-label-ratio: 0.28; /* ラベル行の英字 ÷ 欧文コピー */ --gb-vmv-label-sm-ratio: 0.22; /* 番号・右端の和文 ÷ 欧文コピー */ --gb-vmv-en-fw: var(--gb-fw-semibold); /* 欧文コピーの太さ 600（Gibson SemiBold。キット zjp5nni）。Book 300 は細すぎたため 2026-10 に変更 */ --gb-vmv-en-lh: 1.25; --gb-vmv-en-ls: -0.02em; --gb-vmv-lead-mt: calc(var(--gb-vmv-en-size) * 1.1); /* ラベル行 → 和文コピー（欧文 1 文字ぶん強） */ --gb-vmv-en-mt: calc(var(--gb-vmv-en-size) * 0.2); /* 和文コピー → 欧文コピー（詰める） */ /* 日本語ステートメント・説明文 */ --gb-vmv-sub-mt: calc(var(--gb-vmv-en-size) * 0.5); /* 欧文コピー → 説明文 */ --gb-vmv-jp-fs: calc(var(--gb-vmv-en-size) * var(--gb-vmv-jp-ratio)); /* 和文コピー（経験が未来を創る）。1440 で約 39px */ --gb-vmv-jp-fw: var(--gb-fw-extralight); /* 和文の太さ。デザインは 300 だが、読み込んでいる Noto Sans JP は 200/400/500/700 なのでいちばん細い 200 */ --gb-vmv-jp-ls: 0.1em; --gb-vmv-body-fs: max(0.875rem, calc(var(--gb-vmv-en-size) * var(--gb-vmv-body-ratio))); /* 説明文。1440 で約 19px（スマホの下限 0.875rem） */ --gb-vmv-body-ls: 0.1em; --gb-vmv-body-lh: 1.7; /* VALUES の箱（2×2。スマホは 1 列） */ --gb-vmv-values-mt: clamp(24px, 4cqi, 48px); --gb-vmv-value-min-h: clamp(260px, 32cqi, 400px); --gb-vmv-value-pad: clamp(22px, 3.4cqi, 44px); --gb-vmv-value-en-pt: clamp(36px, 6cqi, 80px); /* 番号と英語の間の最小の空き */ --gb-vmv-value-en-fw: var(--gb-fw-light); /* VALUES の英語（Be Inspired など）の太さ 300 */ --gb-vmv-value-en-fs: clamp(1.75rem, 3.9cqi, 3.25rem); /* 28px 〜 52px */ --gb-vmv-value-jp-fs: calc(var(--gb-vmv-value-en-fs) * var(--gb-vmv-jp-ratio)); /* VALUES の和文（欧文 × 0.58） */ --gb-vmv-value-en-mt: calc(var(--gb-vmv-value-en-fs) * 0.2); /* 和文 → 欧文 */ --gb-vmv-value-body-fs: clamp(0.875rem, 1.5cqi, 1rem); /* VALUES の説明文（箱の欧文 × 0.28 だと 10px を切るので、読める大きさを保つ） */ --gb-vmv-value-body-mt: calc(var(--gb-vmv-value-en-fs) * 0.5); /* 欧文 → 説明文 */ /* ホバー（PC のみ）: 箱が下から塗られて色が反転する */ --gb-vmv-reveal-dur: 0.5s; /* 説明文が開く・浮かぶ時間（VISION / MISSION / VALUES。2026-10-23） */ --gb-vmv-reveal-delay: 0.15s; /* VALUES: 箱が塗られてから説明文が浮かぶまで */ --gb-vmv-reveal-dist: 10px; /* 説明文が浮かぶ距離 */ --gb-vmv-hover-dur: 0.4s; --gb-vmv-hover-fill-dur: 0.7s; /* 登場の動き */ --gb-vmv-open-inset: 6vw; /* 帯が開く前に左右を絞る量（0 で動きなし） */ --gb-vmv-open-dur: 1.6s; --gb-vmv-in-dur: 1.1s; /* 1 語がせり上がる時間 */ --gb-vmv-in-step: 0.07s; /* 語ごとの時間差 */ --gb-vmv-in-ease: cubic-bezier(0.16, 1, 0.3, 1); --gb-vmv-line-dur: 1.4s; /* 罫線が伸びる時間 */ --gb-vmv-fade-dur: 0.9s; --gb-vmv-fade-step: 0.12s; --gb-vmv-fade-dist: 18px; /* ---- RECRUIT（固定ページ recruit。旧サイト page-recruit.php の見た目の値を、新サイトのトークンに寄せて移したもの）---- */ --gb-recruit-job-01: url("/wp-content/uploads/2026/10/recruit-job-01.jpg"); /* 職種の見出しの背景（メディア ID 3582。旧サイトの画像をそのまま登録） */ --gb-recruit-job-02: url("/wp-content/uploads/2026/10/recruit-job-02.jpg"); /* 3584 */ --gb-recruit-job-03: url("/wp-content/uploads/2026/10/recruit-job-03.jpg"); /* 3586 */ --gb-recruit-job-04: url("/wp-content/uploads/2026/10/recruit-job-04.jpg"); /* 3588 */ --gb-recruit-job-01-sp: url("/wp-content/uploads/2026/10/recruit-job-01-sp.jpg"); /* 同 781px 以下（3583） */ --gb-recruit-job-02-sp: url("/wp-content/uploads/2026/10/recruit-job-02-sp.jpg"); /* 3585 */ --gb-recruit-job-03-sp: url("/wp-content/uploads/2026/10/recruit-job-03-sp.jpg"); /* 3587 */ --gb-recruit-job-04-sp: url("/wp-content/uploads/2026/10/recruit-job-04-sp.jpg"); /* 3589 */ --gb-recruit-job-h: 180px; /* 職種の見出しの高さ（旧と同じ） */ --gb-recruit-job-pad-x: 70px; /* 同 左右の余白（旧と同じ） */ --gb-recruit-job-no-fs: 0.875em; /* 見出しの番号 01〜10 の大きさ（見出しの文字に対して） */ --gb-recruit-job-no-gap: 0.6em; /* 番号と職種名の間 */ --gb-recruit-line-mt: 0.8em; /* 仕事内容の中の小見出し（【…】）の前の空き */ --gb-recruit-job-pad-x-sp: var(--gb-space-5); --gb-recruit-job-gap: 3px; /* 職種と職種のすき間（旧と同じ） */ --gb-recruit-job-overlay: rgb(52 52 52 / 0.5); /* 写真の上の暗幕（旧と同じ値。乗算） */ --gb-recruit-job-color: var(--gb-color-text-inverse); /* 見出しの文字（白） */ --gb-recruit-job-fs: clamp(1.125rem, 1.67vw, 1.5rem);/* 職種名（旧: 1.5rem / 1.67vw） */ --gb-recruit-job-en-fs: clamp(0.8125rem, 1.11vw, 1rem); /* 英語表記（旧: 1rem / 1.11vw） */ --gb-recruit-icon-fs: 2rem; /* 開閉の + */ --gb-recruit-panel-pad: 67px 70px 70px; /* 開いた中身の余白（旧と同じ） */ --gb-recruit-panel-pad-sp: var(--gb-space-6) var(--gb-space-4); --gb-recruit-table-gap: 0px; /* 1 つ目の表（仕事内容〜求める人物像）と 2 つ目（就業時間〜休日）の間（2026-10-23: 1 つの表に見せるので 0） */ --gb-recruit-table-gap-inner: 0px; /* 同（2 つ目の表の上の内側の空き） */ --gb-recruit-line: var(--gb-color-line); /* 表と表のあいだの線 */ --gb-recruit-li-indent: 22px; /* ■・※ の字下げ（旧と同じ） */ --gb-recruit-btn-mt: 70px; /* 表 → ENTRY（旧と同じ） */ --gb-recruit-entry-bg: var(--gb-color-bg-alt); /* Working Happy の背景（旧 #f1f0f0 → サイトの薄いグレー） */ --gb-recruit-lead-fs: clamp(2rem, 4.5vw, 4rem); /* Working Happy at gootbox.（旧: 4rem / 3.33vw / 8vw） */ --gb-recruit-mqi-sp-scale: 0.27; /* マーキーの 781px 以下の高さ倍率（475px × 0.27 ≒ 旧 32.99vw の 390px 時） */ /* ---- TOP KV スマホ版（2026-10-20。原本 _claude/diagrams/kv-sp-final.css。使うのは custom.css の「TOP KV スマホ版」）＋ キャッチの帯（PC・SP 共通）---- */ --gb-kv-sp-pad: 24px; /* SP: FV の文字・質問ボックスの左右の余白 */ --gb-kv-sp-text-bottom: 112px; /* SP: 見出し＋リードの下端 = FV 下端からの距離（質問ボックスは右下の Q にまとめたので、Scroll の上に少し余裕を持たせるだけ） */ --gb-kv-sp-text-bottom-noask: 96px; /* SP: 質問ボックスが無いとき（JS なし）の見出しの下端 */ --gb-kv-sp-ask-bottom: 74px; /* SP: 質問ボックスの下端（Scroll の上） */ --gb-kv-sp-scroll-bottom: 20px; /* SP: Scroll の下端 */ --gb-kv-sp-title-fs: clamp(24px, 6.4vw, 28px); /* SP: 見出し（375px で 24px / 430px で 27.5px。1 行に収める） */ --gb-kv-sp-title-lh: 1.45; --gb-kv-sp-title-ls: 0.04em; --gb-kv-sp-lead-fs: clamp(13.5px, 3.6vw, 15px); /* SP: リード */ --gb-kv-sp-lead-lh: 1.95; --gb-kv-sp-lead-mt: 14px; /* SP: 見出しとリードの間 */ --gb-kv-sp-dot-size: 8px; /* SP: 見出しの前の黄色いドット（行頭の左外にぶら下げる） */ --gb-kv-sp-dot-left: -14px; --gb-kv-sp-dot-gap: 10px; /* SP: ドットと見出しの文字の間（帯の内側） */ --gb-kv-sp-cube-h: 132%; /* SP: キューブの SVG の高さ（FV に対して）。大きくすると模様が大きくなる */ --gb-kv-sp-cube-top: -28%; /* SP: 同・上へのずらし。中心 = (top + h/2) = 34% の高さにキューブ */ --gb-kv-sp-drop-from: 44%; /* SP: しずくが出はじめる高さ（キューブの下端あたり） */ --gb-ask-sp-chip-fs: 14px; /* 候補の文字（モック 17） */ --gb-ask-sp-chip-pad: 9px 14px; --gb-ask-sp-chips-gap: 12px; /* SP: 候補ボタンと入力欄の間 */ --gb-ask-sp-chips-fade: 40px; /* SP: 候補ボタンの行の右端のフェード（続きがあることを見せる） */ --gb-ask-sp-gbox-size: 64px; /* SP: 回答に添える g キューブ */ --gb-kv-sp-pattern-opacity: 0.17; /* SP: 展開したパターンの濃さ（PC は --gb-kvc-opacity 0.233。SP は面が大きく出るので少し薄く） */ /* SP: 質問ボックス = 右下の「Q」のフキダシ（custom.css「TOP FV スマホ: 質問ボックスを右下の Q に」） */ --gb-ask-sp-fab-size: 56px; /* Q の丸 */ --gb-ask-sp-fab-right: 28px; /* FV の右端から（スマホ。PC は custom.css で --gb-ask-right に差し替え） */ --gb-ask-sp-fab-bottom: 32px; /* FV の下端から（スマホ。Scroll とほぼ同じ高さ。PC は --gb-ask-bottom） */ --gb-ask-sp-fab-hover-scale: 1.06; /* PC: マウスを乗せたときの丸の大きさ */ --gb-ask-sp-fab-bg: var(--gb-color-yellow); --gb-ask-sp-fab-fg: var(--gb-color-text); --gb-ask-sp-fab-fs: 26px; /* （予備。いまは文字でなく「・・・」） */ --gb-ask-sp-fab-text-dy: 1.5px; /* 「・・・」の上下の位置（動画モック: 丸の中心より直径の 0.027 下） */ --gb-ask-sp-fab-dot: 6px; /* 「・・・」の点（動画モック: 丸の直径の 0.105） */ --gb-ask-sp-fab-dot-gap: 7px; /* 点と点のすき間（中心の間隔 13px = 直径の 0.232） */ --gb-ask-sp-fab-dot-color: var(--gb-color-text-inverse); /* 白 */ /* 「・・・」の動き（.gb-ask__dots。右下のボタンと、探しているあいだで共通） */ --gb-ask-dots-size: 6px; --gb-ask-dots-gap: 7px; --gb-ask-dots-period: 1.83s; /* 1 周（動画モック） */ --gb-ask-dots-stagger: 0.2s; /* 左 → 中 → 右 の時間差 */ --gb-ask-dots-dip: 1.2px; /* 跳ねる前に沈む量 */ --gb-ask-dots-jump: -4.7px; /* 跳ね上がる量（直径 56 の丸で。モック: 直径の 0.084） */ --gb-ask-dots-loading-size: 8px; /* 探しているあいだの点（白い面の上） */ --gb-ask-dots-loading-gap: 8px; --gb-ask-dots-loading-my: 6px; /* その上下の余白 */ --gb-ask-dots-loading-opacity: 0.25; /* 黄 25%（動画モック 2） */ --gb-ask-sp-fab-tail: calc(var(--gb-ask-sp-fab-size) / 2); /* Q のしっぽを描く四角（= 丸の半径。中心〜右下の角）。形は custom.css の polygon（g キューブの吹き出しと同じバランス）。この値は変えない */ --gb-ask-sp-fab-shadow: 0 6px 16px rgb(0 0 0 / 0.14); --gb-ask-sp-sheet-w: min(calc(100vw - var(--gb-kv-sp-pad) * 2), 284px);/* フキダシの幅（モック 17: 画面 393 に対して 282） */ --gb-ask-sp-sheet-h: min(420px, 60svh); /* フキダシの高さ（固定。モック 17: 画面 852 に対して 420）。回答が長いときは白い面の中でスクロール */ --gb-ask-sp-empty-text: "聞きたいことはありますか？"; /* 回答がまだ無いとき、白い面の上に出す文言（動画モック 2） */ --gb-ask-sp-empty-fs: 14px; --gb-ask-sp-sheet-gap: 9px; /* フキダシ本体の下端 = Q の丸の下端からこの分だけ上。= しっぽの高さ（先は丸の右下の角 = Q のしっぽの先） */ --gb-ask-sp-sheet-pad: 22px 12px 12px; /* 黒い枠: 上は見出し「gootboxについて」の帯、左右下は白い面のまわりの黒（動画モック 2） */ --gb-ask-sp-sheet-radius: 0px; /* 動画モックは角を立てた四角 */ --gb-ask-sp-sheet-bg: var(--gb-color-text); /* 黒 */ --gb-ask-sp-sheet-fg: var(--gb-color-text-inverse); --gb-ask-sp-sheet-shadow: 0 12px 32px rgb(0 0 0 / 0.22); --gb-ask-sp-sheet-title: "gootboxについて"; /* フキダシの見出し */ --gb-ask-sp-sheet-title-fs: 16px; --gb-ask-sp-sheet-title-mb: 14px; --gb-ask-sp-sheet-tail-w: 12px; /* 黒いフキダシのしっぽの幅（高さは sheet-gap）。右辺は本体の右辺の続き */ --gb-ask-sp-open-dur: 0.45s; /* 開く: 右下から黒い四角が広がる時間 */ --gb-ask-sp-content-dur: 0.3s; /* 開く: 中身（見出し・白い面）が浮かぶ時間 */ --gb-ask-sp-content-delay: 0.5s; /* 開く: 中身が浮かび始めるまで。四角が開ききって（open-dur）少し間を置いてから（動画モック 2） */ --gb-ask-sp-close-dur: 0.3s; /* 閉じる: 全体が薄くなって消える時間（Q が戻る時間も同じ） */ --gb-ask-sp-sheet-block-gap: 18px; /* 回答 → 候補の間（白い面の中。高さが固定なので詰める） */ --gb-ask-sp-answer-max-h: min(40vh, 280px); /* 回答のカードの最大の高さ */ --gb-ask-sp-answer-pad: 16px var(--gb-ask-sp-panel-pad-x) 0; /* 回答（白い面の上の部分）の内側 */ --gb-ask-sp-answer-radius: 8px; /* 白い面の角 */ --gb-ask-sp-panel-bg: var(--gb-color-bg); /* フキダシの中の白い面 */ --gb-ask-sp-panel-pad-x: 14px; /* 白い面の左右の内側（候補・回答・入力欄） */ --gb-ask-sp-panel-pad-b: 0px; /* 楕円の下の余白（白の余白は pill-pad-b、黒い枠の下の余白は sheet-pad の 3 つ目） */ --gb-ask-sp-pill-overlap: calc(var(--gb-ask-sp-input-h) + 2px + var(--gb-ask-sp-pill-pad-b)); /* 入力欄の楕円が白い面に重なる高さ（動画モック 2: 楕円はまるごと白い面の中、下に pill-pad-b の白） */ --gb-ask-sp-pill-pad-b: 4px; /* 楕円の下の白の余白 */ --gb-ask-sp-form-mx: 0px; /* 楕円の左右 〜 白い面の端 */ --gb-ask-sp-chips-pad: 16px var(--gb-ask-sp-panel-pad-x) 0; /* 候補（白い面）の内側（下は chips-pad-b） */ --gb-ask-sp-chips-pad-b: 18px; /* 候補の最後の行 〜 入力欄の楕円の上端 */ --gb-ask-sp-answer-fs: 14px; /* 回答の本文 */ --gb-ask-sp-asked-fs: 13px; /* 回答の上の「聞いたこと」（グレー） */ --gb-ask-sp-close-inset: 6px; /* 回答の × : 白い面の右上の角からの距離 */ --gb-ask-sp-chip-gap: 6px; /* 候補の行間 */ --gb-ask-sp-chip-dot: 9px; /* 候補の黄色い点 */ --gb-ask-sp-chip-dot-gap: 10px; --gb-ask-sp-chip-fg: var(--gb-color-text); /* 候補の文字の色（白い面の上なので黒） */ --gb-ask-sp-form-pad: 0 4px 0 14px; /* 入力欄の楕円の内側 */ --gb-ask-sp-input-h: 34px; /* 入力欄の高さ（モック 30）。文字は 16px のまま */ --gb-ask-sp-input-fs: 16px; /* 入力欄の文字。16px 未満にしない（iPhone が拡大する） */ --gb-ask-sp-input-fg: var(--gb-color-text); /* SP: 入力欄の文字・カーソルの色（フキダシの白を受け継がないように） */ --gb-ask-sp-input-border: var(--gb-color-text); /* 入力欄の楕円の線（動画モックは黒い細線） */ --gb-ask-sp-placeholder-fs: 14px; /* 入力欄の「ご質問を…」の文字（入力した文字は 16px） */ --gb-ask-sp-submit-size: 28px; /* 送信ボタン（入力中の黒い丸） */ --gb-ask-sp-submit-dot: 10px; /* 未入力の ● */ --gb-ask-sp-submit-dot-color: #4a4a2a; /* モックの暗い黄土色 */ --gb-ask-sp-submit-arrow-fs: 15px; /* 入力中の → */ --gb-kv-band-bg: rgb(255 255 255 / 0.74); /* FV のキャッチ（見出し・リード）の行ごとの白い帯（PC・SP 共通。濃くするなら 0.85） */ --gb-kv-band-pad-x: 0.4em; /* 帯の左右の内側 */ --gb-kv-band-pad-y: 0.12em; /* 帯の上下の内側（行間の中で帯どうしが離れる量にもなる） */ --gb-kv-band-title-mb: 0.55em; /* 見出しの帯とリードの帯の間 */ --gb-header-sp-menu-opacity: 0.72; /* トップ（KV 上）: ヘッダー下のメニュー帯の文字の濃さ */ }