*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    /* ==================================================
       TOP: tokens and desktop layout
       ================================================== */
    :root {
      --bg:#f0f0f0; --ink:#1a1814;
      --ink-light:#8a8680; --ink-xlight:#c8c4be; --purple:#AA3E96;
      --top-content-max:var(--layout-content-wide);
      --band-dur: 0.55s;   /* 帯が走る時間 */
      --reveal-delay: 0.42s; /* 文字が出るタイミング */
    }

    html {
      background:var(--bg);
      overflow-y:scroll;
    }
    /* KV〜VALUEのスワイプ操作でプルツーリフレッシュ(引っ張って更新)が発火しないようにする。
       Work以降の通常スクロール(body.scroll-mode)ではPCのホイールスクロールを妨げないよう解除する。 */
    html:has(body:not(.scroll-mode)) {
      overscroll-behavior-y:none;
    }
    body {
      width:100%;
      background:var(--bg);
      font-family:'Share Tech Mono',monospace;
      overflow:hidden;
      overscroll-behavior-y:none;
    }
    body.scroll-mode {
      overscroll-behavior-y:auto;
      overflow-y:auto;
    }

    /* KV〜VALUE中は背景と一体化させ、WORK以降は共通の白背景へ戻す。 */
    body:not(.scroll-mode) .site-header {
      background:transparent;
    }

    /* ── 固定背景 ── */
    #bg-fixed { position:fixed; inset:0; z-index:0; pointer-events:none; }
    #bg-canvas { width:100%; height:100%; display:block; }
    .grain { position:absolute; inset:0; pointer-events:none; opacity:0.04;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); }

    /* ── ページ共通 ── */
    #fullpage-wrap {
      position:fixed;
      inset:0;
      z-index:10;
      height:100vh;
      height:100dvh; /* スマホのアドレスバー分のズレを防ぐ(100vhだと表示より縦長になり中央寄せが下にズレる) */
    }
    body.scroll-mode #fullpage-wrap {
      position:absolute;
      top:0;
      left:0;
      right:0;
      height:100vh;
      height:100dvh;
      pointer-events:none;
    }
    #scroll-content {
      display:none;
      position:relative;
      z-index:5;
    }
    body.scroll-mode #scroll-content {
      display:block;
      margin-top:100vh;
      margin-top:100dvh;
    }
    body:not(.scroll-mode) .site-footer {
      display:none;
    }
    .page { position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; }
    .page.active { opacity:1; pointer-events:auto; }
    body.scroll-mode .page { pointer-events:none; }
    .page:not(#page-kv)::before { content:''; position:absolute; top:0; left:48px; right:48px; height:1px; background:rgba(26,24,20,0.07); }

    /* ════════════════════════════════
       帯アニメ共通パターン
       .band-wrap > .band-text
       .band-wrap::after が帯
    ════════════════════════════════ */
    .band-wrap {
      position:relative;
      overflow:hidden;
      display:inline-block;
      vertical-align:bottom;
    }
    /* 帯本体 */
    .band-wrap::after {
      content:'';
      position:absolute;
      inset:0;
      background:var(--ink); /* デフォルト帯色 */
      transform:translateX(-101%);
      transition:none;
    }
    /* 帯アニメ状態 */
    .band-wrap.run::after {
      animation:band-slide var(--band-dur) cubic-bezier(0.77,0,0.18,1) forwards;
    }
    @keyframes band-slide {
      0%   { transform:translateX(-101%); }
      45%  { transform:translateX(0%);    }
      55%  { transform:translateX(0%);    }
      100% { transform:translateX(101%);  }
    }
    /* 帯逆再生（右→左に走り抜けて文字を消す） */
    .band-wrap.run-reverse::after {
      animation:band-slide-reverse var(--band-dur) cubic-bezier(0.77,0,0.18,1) forwards;
    }
    @keyframes band-slide-reverse {
      0%   { transform:translateX(101%);  }
      45%  { transform:translateX(0%);    }
      55%  { transform:translateX(0%);    }
      100% { transform:translateX(-101%); }
    }
    /* 逆再生: 開始時は文字表示、帯通過後に非表示 */
    .band-wrap.run-reverse .band-text {
      opacity: 1;
      animation: band-text-hide 0.01s calc(var(--band-dur) * 0.48) forwards;
    }
    @keyframes band-text-hide { to { opacity: 0; } }

    /* 四隅パネルの内角（画面中央側の角）に円を配置
       val-quad は overflow:hidden なのでカード外にははみ出ない */
    .vq-arc {
      position: absolute;
      width: 38vmin;   /* 2周り小さく */
      height: 38vmin;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.6s ease 0.3s;
      z-index: 3; /* border(z-index相当)より前面 */
    }
    /* 各パネルの内角（画面中央側）に配置 */
    .q-tr .vq-arc { bottom: 0; left: 0;  transform: translate(-50%, 50%);  }
    .q-br .vq-arc { top: 0;    left: 0;  transform: translate(-50%, -50%); }
    .q-bl .vq-arc { top: 0;    right: 0; transform: translate(50%, -50%);  }
    .q-tl .vq-arc { bottom: 0; right: 0; transform: translate(50%, 50%);   }
    .val-quad.open .vq-arc { opacity: 1; }
    .vq-arc circle {
      fill: var(--bg);           /* 内側を背景色で塗りつぶす */
      stroke: rgba(26,24,20,0.15);
      stroke-width: 1.5;
    }
    /* 文字: 帯が通過するまで隠す */
    .band-text {
      display:block;
      opacity:0;
      transition:none;
    }
    .band-wrap.run .band-text {
      animation:band-text-reveal 0.01s var(--reveal-delay) forwards;
    }
    @keyframes band-text-reveal { to { opacity:1; } }

    /* eyebrow用: 帯が紫 */
    .band-wrap.purple-band::after { background:var(--purple); }

    /* ── KV ── */
    #page-kv {
      overflow:hidden;
      background:var(--bg);
    }
    .kv-bg-assets {
      position:absolute;
      inset:0;
      z-index:1;
      pointer-events:none;
      opacity:1;
      --kv-cycle: 30s;
      --kv-gray-filter: grayscale(1) contrast(0.42) brightness(1.16);
    }
    .kv-bg-asset {
      display:block;
      border:0;
      pointer-events:none;
    }
    .kv-manuscript {
      position:absolute;
      left:50%;
      top:50%;
      width:100vw;
      max-width:none;
      height:auto;
      transform:translate(-50%,-50%);
      filter:var(--kv-gray-filter);
      mix-blend-mode:multiply;
    }
    .kv-bg-logo {
      position:absolute;
      left:60%;
      top:40%;
      width:auto;
      height:150vh;
      transform:translate(-50%,-50%);
      filter:var(--kv-gray-filter);
      mix-blend-mode:multiply;
    }
    .kv-brand-logo {
      position:absolute;
      z-index:1;
      display:block;
      left:60%;
      top:40%;
      width:auto;
      height:150vh;
      transform:translate(-50%,-50%);
      filter:var(--kv-gray-filter);
      mix-blend-mode:multiply;
    }
    .kv-brand-logo--growl {
      height:150vh;
    }
    .kv-brand-logo--arderelle {
      height:150vh;
    }
    .kv-brand-logo--novel {
      height:150vh;
    }
    .kv-brand-logo--cerise {
      height:150vh;
    }
    .kv-copy { position:relative; z-index:2; text-align:center; user-select:none; }
    /* KVはSVG手書きアニメのまま */
    .kv-svg  { display:block; overflow:visible; }
    .kv-tp { fill:transparent; stroke:var(--ink); stroke-width:1; paint-order:stroke fill; stroke-dasharray:4000; stroke-dashoffset:4000; }
    .kv-en { font-family:'Share Tech Mono',monospace; font-size:0.6875rem; letter-spacing:0.28em; color:var(--ink-light); margin-top:28px; line-height:2; text-align:center; opacity:0; transition:opacity 0.7s ease; text-transform:uppercase; }
    .kv-en.show { opacity:1; }
    #scroll-hint { position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:10; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--ink-light); font-size:0.5625rem; letter-spacing:0.3em; text-transform:uppercase; opacity:0; transition:opacity 0.6s ease; }
    #scroll-hint.show { opacity:1; }
    #scroll-hint::after { content:''; display:block; width:1px; height:40px; background:linear-gradient(to bottom,var(--ink-light),transparent); animation:line-drop 2s ease-in-out infinite; }
    @keyframes line-drop {
      0%  { transform:scaleY(0); transform-origin:top;    opacity:0; }
      40% { transform:scaleY(1); transform-origin:top;    opacity:1; }
      41% { transform-origin:bottom; }
      100%{ transform:scaleY(0); transform-origin:bottom; opacity:0; }
    }

    /* ── Mission / Vision 共通レイアウト ── */
    #page-mission {
      background:var(--bg);
    }
    #page-vision {
      background:var(--bg);
    }
    .sec-content {
      max-width:1280px;
      padding:0 48px;
      text-align:center;
    }

    /* eyebrow */
    .sec-eyebrow-wrap { display:block; margin-bottom:48px; }
    #page-mission .sec-eyebrow-wrap .band-wrap,
    #page-vision .sec-eyebrow-wrap .band-wrap {
      line-height:0;
    }
    .eyebrow-label {
      display:block;
    }
    .eyebrow-img {
      display:block;
      width:auto;
      height:30px;
    }

    /* メイン見出し行 */
    .heading-line {
      display:block;
      margin-bottom:2px;
    }
    .heading-text {
      font-family:'M PLUS Code Latin',monospace; font-weight:400;
      font-size:2.75rem;
      line-height:1.7; letter-spacing:-0.01em; color:var(--ink);
    }
    .vision-mobile-break { display:none; }

    /* 下線 */
    .sec-rule-wrap { display:none; margin:20px auto; height:2px; }
    .sec-rule { display:block; width:40px; height:1px; background:var(--ink-xlight); }
    /* 下線用band-wrapは高さを明示 */
    #bw-m-rule, #bw-v-rule { width:40px; height:1px; display:inline-block; vertical-align:middle; }
    #bw-m-rule::after, #bw-v-rule::after { background:var(--ink-xlight); }
    #bw-m-rule .band-text, #bw-v-rule .band-text { display:block; width:40px; height:1px; background:var(--ink-xlight); opacity:0; }

    /* ENコピー */
    .sec-en-wrap { display:block; margin-top:48px; }
    .sec-en-text {
      font-family:'Share Tech Mono',monospace; font-size:0.75rem;
      letter-spacing:0.22em; color:var(--ink-light);
      line-height:2.2; text-transform:uppercase;
    }
    #page-mission .sec-en-text,
    #page-vision .sec-en-text {
      color:var(--purple);
    }

    /* ── VALUE ── */
    #page-value {
      overflow:hidden;
      background:var(--bg);
    }

    /*
      VALUE中央円レイヤー
      - カードより上に置く
      - VALUE文字より下に置く
      - 線はstroke-dashではなく、JSでarc pathそのものを生成する
        → 回転・初期半円表示などの事故を避ける
    */
    .value-progress-layer {
      position:absolute;
      top:50%;
      left:50%;
      width:42vmin;
      height:42vmin;
      transform:translate(-50%,-50%);
      z-index:20;
      pointer-events:none;
      overflow:visible;
      display:none;
    }

    .value-sector-fill {
      fill:var(--bg);
      display:none;
    }

    .value-full-fill {
      fill:var(--bg);
      display:none;
    }

    .value-circle-line {
      fill:none;
      stroke:var(--purple);
      stroke-width:0.45;
      stroke-linecap:round;
      stroke-linejoin:round;
      vector-effect:non-scaling-stroke;
      display:none;
    }

    .value-flip-link {
      position:absolute;
      left:50%;
      transform:translate(-50%,-50%);
      z-index:65;
      display:block;
      pointer-events:none;
      text-decoration:none;
      border-radius:0;
      --band-reveal-color:var(--purple);
      --band-reveal-surface:var(--purple);
    }

    /* VIEW MOREなど他のCTAボタンと同じ帯アニメーションの仕組み（js-band-reveal）に合わせる。 */
    .value-flip-link.js-band-reveal--surface {
      background-color:transparent;
    }

    #page-value.value-about-ready .value-flip-link {
      pointer-events:auto;
      cursor:pointer;
    }

    #page-value.value-about-ready #val-center {
      pointer-events:none;
    }

    /* 旧カード内円弧は完全停止 */
    .vq-arc { display:none !important; }

    #val-center {
      position:absolute; top:50%; left:50%;
      transform:translate(-50%,-50%) scale(0.84);
      z-index:50;
      display:flex;
      align-items:center;
      justify-content:center;
      width:200px;
      height:200px;
      border:1px solid transparent;
      background:var(--purple);
      text-align:center;
      opacity:0;
      transition:
        opacity 0.52s ease,
        transform 0.7s cubic-bezier(0.22,1,0.36,1),
        background-color 0.58s ease,
        border-color 0.58s ease,
        box-shadow 0.58s ease;
      box-shadow:0 16px 36px rgba(170,62,150,0.18);
    }
    .vc-label-wrap.run {
      opacity:1;
    }
    #page-value.value-entered #val-center {
      opacity:1;
      transform:translate(-50%,-50%) scale(1);
    }
    #page-value.value-about-ready #val-center {
      border-color:var(--purple);
      background:var(--bg);
      box-shadow:0 14px 34px rgba(170,62,150,0.08);
    }
    .vc-label-wrap { display:inline-block; line-height:1; }
    .vc-label-text {
      font-family:'Bebas Neue',sans-serif;
      font-size:2.625rem;
      font-weight:400;
      line-height:1;
      letter-spacing:0.22em;
      color:#fff;
      text-transform:uppercase;
      transition:color 0.58s ease;
    }
    .vc-label-about {
      display:none;
      font-size:1.75rem;
      letter-spacing:0.14em;
    }
    #page-value.value-about-ready .vc-label-text {
      color:var(--purple);
    }
    #page-value.value-about-ready .vc-label-main {
      display:none;
    }
    #page-value.value-about-ready .vc-label-about {
      display:block;
    }
    .value-mobile-label { display:none; }
    .value-more-content { display:none; }

    .value-board {
      position:absolute;
      top:50%;
      left:50%;
      z-index:3;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
      width:82vw;
      max-width:1600px;
      transform:translate(-50%,-50%);
    }

    .val-quad {
      position:relative;
      width:auto;
      height:280px;
      display:flex; align-items:center; justify-content:center;
      padding:48px 56px;
      overflow:hidden;
      transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1),
                  transform 0.65s cubic-bezier(0.4,0,0.2,1);
      background:#fff;
      z-index:3;
    }
    .val-quad.q-tl { grid-column:1; grid-row:1; transform:translate(50%,50%); opacity:0; }
    .val-quad.q-tr { grid-column:2; grid-row:1; transform:translate(-50%,50%); opacity:0; }
    .val-quad.q-bl { grid-column:1; grid-row:2; transform:translate(50%,-50%); opacity:0; }
    .val-quad.q-br { grid-column:2; grid-row:2; transform:translate(-50%,-50%); opacity:0; }
    /* 展開時 */
    .val-quad.open { transform:translate(0,0); opacity:1; }

    /* パネル内テキスト: band-wrapで帯アニメ */
    .vq-body {
      text-align:center;
      display:flex; flex-direction:column; align-items:center; gap:10px;
    }
    .vq-num-wrap .band-text { line-height:1; }
    .vq-num-img { display:block; width:80px; height:auto; }
    .vq-ja-wrap  .band-text { font-family:'M PLUS Code Latin',monospace; font-weight:400; font-size:2rem; color:var(--ink); letter-spacing:0.04em; transform:translateX(0.2em); }
    .vq-en-wrap  .band-text { font-family:'Share Tech Mono',monospace; font-size:0.75rem; letter-spacing:0.18em; color:var(--purple); line-height:1.6; text-transform:uppercase; text-align:center; }
    .value-accent { color:var(--purple); }
    .vq-num-wrap::after { background:var(--purple); }

    /* ホバー詳細 */
    .vq-detail {
      position:absolute; inset:0;
      display:flex; align-items:center; justify-content:center;
      padding:40px 48px; text-align:center;
      opacity:0; transition:opacity 0.35s ease;
      pointer-events:none; background:var(--bg);
      display:none;
    }
    .val-quad.open:hover .vq-body  { opacity:1; transition:opacity 0.2s ease; }
    .val-quad.open:hover .vq-detail { opacity:0; pointer-events:none; }
    .vq-detail-text { font-family:'M PLUS Code Latin',monospace; font-weight:400; font-size:1rem; line-height:2; color:var(--ink-light); letter-spacing:0.03em; }

    /* PCも、タブレット/スマホと同じ「4象限の下に常時表示のABOUT USボタン」に統一する。 */
    @media (min-width: 1025px) {
      .value-flip-link {
        top:calc(50% + 286px + 48px);
        left:50%;
        width:320px;
        min-height:32px;
        height:auto;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        padding:8px 24px;
        background:var(--purple);
        color:#fff;
        font-family:'Share Tech Mono',monospace;
        font-size:0.875rem;
        letter-spacing:0.35em;
        opacity:0;
        transform:translateX(-50%);
        transition:opacity 0.35s ease, transform 0.35s ease;
      }
      .value-more-content {
        position:relative;
        left:0;
        display:none;
        align-items:center;
        flex:1 1 auto;
        min-width:0;
        width:100%;
        transition:left 0.3s ease;
      }
      .value-flip-link .more-arrow { margin-left:16px; }
      #page-value.value-about-ready .value-flip-link { opacity:1; }
      #page-value.value-about-ready .value-more-content { display:flex; }
      #page-value.value-leaving .value-flip-link {
        opacity:0;
        pointer-events:none;
        transform:translate(-50%, 12px);
      }
      #page-value.value-about-ready .value-flip-link:hover .value-more-content,
      #page-value.value-about-ready .value-flip-link:focus-visible .value-more-content { left:4px; }
      #page-value.value-about-ready .value-flip-link:hover .more-arrow::before,
      #page-value.value-about-ready .value-flip-link:focus-visible .more-arrow::before { left:18%; }

      /* PCの中央円は「Value」表示・配色のままにし、「ABOUT US」へは切り替えない。
         値を戻すだけでなく transition も止め、一瞬の変化・チラつきが起きないようにする。 */
      #page-value.value-about-ready .vc-label-main { display:inline; }
      #page-value.value-about-ready .vc-label-about { display:none; }
      #page-value.value-about-ready .vc-label-text {
        color:#fff;
        transition:none;
      }
      #page-value.value-about-ready #val-center {
        border-color:transparent;
        background:var(--purple);
        box-shadow:0 16px 36px rgba(170,62,150,0.18);
        transition:opacity 0.52s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1);
      }

      /* PCの中央VALUEは拡大縮小せず、中央位置のままフェード表示する。 */
      #val-center,
      #page-value.value-entered #val-center,
      #page-value.value-about-ready #val-center {
        transform:translate(-50%,-50%);
        transition:opacity 0.52s ease;
      }
      #page-value.value-leaving #val-center {
        opacity:0;
        transform:translate(-50%, calc(-50% - 12px));
        transition:
          opacity 0.35s ease 0.28s,
          transform 0.42s cubic-bezier(0.22,1,0.36,1) 0.28s;
      }
    }

    /* ── FIX design lower pages ── */
    .page-lower {
	  --news-accent:var(--purple);
	  --section-accent:var(--purple);
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:100vh;
      background:#fff;
      color:var(--ink);
    }
    .page-lower::before {
      display:none;
    }
    .page-work,
    .page-recruit,
    .page-news,
    .page-contact {
      min-height:0;
      padding:var(--layout-section-space-lower) 0;
    }
    .page-news {
      padding-bottom:0;
    }
    .lower-inner {
      width:100%;
      max-width:760px;
      margin:auto;
    }
    .lower-inner--wide {
      max-width:var(--top-content-max);
    }
    .lower-heading {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:28px;
      margin-bottom:48px;
    }
    .lower-heading-copy {
      max-width:430px;
      color:var(--purple);
      font-family:'M PLUS Code Latin',monospace;
      font-size:0.9rem;
      line-height:2;
      letter-spacing:0.08em;
    }
    .work-labels {
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:28px;
    }
    .work-label-card {
      display:flex;
      min-width:0;
    }
    .work-label-link {
      display:flex;
      flex-direction:column;
      width:100%;
      height:100%;
      min-width:0;
      color:inherit;
      text-decoration:none;
    }
    .work-label-logo {
      display:flex;
      align-items:center;
      justify-content:center;
      height:120px;
      margin:0;
      color:#1a1814;
      font-family:'Bebas Neue',sans-serif;
      font-size:1.875rem;
      line-height:1;
      letter-spacing:0.04em;
      text-align:center;
    }
    .work-label-rule {
      display:block;
      width:100%;
      margin:0 0 26px;
      border-top:1px solid rgba(26,24,20,0.14);
    }
    .work-label-logo img {
      display:block;
      width:auto;
      max-width:100%;
      max-height:70px;
    }
    .work-label-logo--growl {
      padding-inline:4px;
    }
    .work-label-logo--ardeur img {
      max-height:82px;
    }
    .work-label-logo--novel img {
      max-height:74px;
    }
    .work-label-logo--cerise img {
      max-height:90px;
    }
    .work-label-link h3 {
      margin-bottom:18px;
      color:var(--purple);
      font-family:'M PLUS Code Latin',monospace;
      font-size:1.125rem;
      font-weight:700;
      letter-spacing:0.08em;
    }
    .work-label-description {
      width:100%;
      max-width:100%;
      min-width:0;
      color:#8a8680;
      font-family:'M PLUS Code Latin',monospace;
      font-size:0.75rem;
      line-height:2;
      letter-spacing:0.04em;
      overflow-wrap:anywhere;
      word-break:break-all;
    }
    .work-label-more {
      position:relative;
      display:flex;
      align-items:center;
      gap:0;
      width:100%;
      margin-top:auto;
      padding:26px 0 0;
      color:var(--purple);
      font-family:'Share Tech Mono',monospace;
      font-size:0.75rem;
      font-weight:400;
      letter-spacing:0.16em;
      text-transform:uppercase;
    }
    .work-label-more .more-arrow { margin-left:10px; }
    .work-label-logo img {
      transition:transform 0.3s ease;
    }
    .work-label-link:hover .work-label-logo img,
    .work-label-link:focus-visible .work-label-logo img {
      transform:scale(1.04);
    }
    .work-label-link:focus-visible {
      outline:1px solid var(--purple);
      outline-offset:6px;
    }
    .page-recruit {
      background:var(--purple);
      color:#fff;
    }
    .recruit-panel,
    .contact-panel {
      display:flex;
      align-items:center;
      justify-content:center;
      gap:30px;
      width:100%;
      max-width:620px;
      margin:0 auto 34px;
      padding:34px 48px;
      background:#fff;
    }
    .page-recruit .recruit-panel {
      max-width:100%;
      margin-bottom:54px;
    }
    .recruit-lead {
      max-width:600px;
    }
    .recruit-lead,
    .contact-lead,
    .contact-time {
      margin:0 auto;
      color:#fff;
      font-family:'M PLUS Code Latin',monospace;
      font-size:0.9rem;
      line-height:2.4;
      letter-spacing:0.08em;
      text-align:center;
    }
    .recruit-links {
      display:grid;
      gap:16px;
      width:100%;
      max-width:40%;
      margin:48px auto 0;
    }
    .recruit-links a,
    .contact-button,
    .lower-more {
      --button-min-height:40px;
      --button-padding:8px 24px;
      --button-border:1px solid rgba(26,24,20,0.16);
      --button-background:#fff;
      --button-color:var(--purple);
      --button-font-size:1rem;
      --button-font-weight:200;
      --button-letter-spacing:0.08em;
      --button-text-transform:none;
    }
    .recruit-links a.js-band-reveal,
    .contact-button.js-band-reveal {
      --band-reveal-color:#fff;
      --band-reveal-surface:#fff;
    }
    .lower-more.js-band-reveal {
      --band-reveal-color:var(--purple);
      --band-reveal-surface:var(--purple);
    }
    .recruit-links a.js-band-reveal--surface,
    .contact-button.js-band-reveal--surface,
    .lower-more.js-band-reveal--surface {
      background-color:transparent;
    }
    .recruit-links a .more-arrow,
    .contact-button .more-arrow,
    .lower-more .more-arrow {
      margin-left:16px;
    }
    .recruit-links .recruit-more {
      --button-border:1px solid rgba(255,255,255,0.42);
      --button-background:transparent;
      --button-color:#fff;
      --button-font-weight:400;
    }
    .lower-heading--news {
      align-items:center;
      justify-content:space-between;
      gap:32px;
      margin-bottom:34px;
    }
    .lower-more {
      --button-width:280px;
      --button-min-height:32px;
      --button-border:0;
      --button-background:var(--purple);
      --button-color:#fff;
      --button-font-size:0.875rem;
      --button-font-weight:400;
      --button-letter-spacing:0.35em;
      --button-text-transform:uppercase;
    }
    .page-contact {
      align-items:flex-start;
    }
    .contact-panel {
	  --section-accent:#fff;
      background:#b9b9b9;
    }
    .page-contact .contact-panel {
      max-width:100%;
      margin-bottom:64px;
    }
    .contact-panel p { color:#fff; }
    .contact-lead,
    .contact-time {
      color:#444;
    }
    .contact-time {
      margin-top:32px;
      font-weight:700;
    }
    .contact-time-break { display:none; }
    .contact-button {
      --button-width:100%;
      --button-max-width:40%;
      margin:48px auto 0;
      --button-border:1px solid rgb(68 68 68 / 0.16);
      --button-color:#444;
    }
    /* ==================================================
       TOP: responsive overrides
       ================================================== */
    /* 通常のPCでは余白を保つ。ワイドモニターのみ1280pxまで広げる。 */
    @media (max-width: 2559px) {
      :root { --top-content-max:var(--layout-content-standard); }
    }

    /* ── Tablet: 768px - 1024px ── */
    @media (max-width: 1024px) {
      .kv-manuscript {
        width:auto;
        height:100vh;
      }
      .kv-svg {
        width:calc(100vw - 64px);
        max-width:760px;
        height:auto;
      }
      .sec-content {
        width:100%;
        max-width:720px;
        padding:0 32px;
      }
      .sec-eyebrow-wrap { margin-bottom:36px; }
      .heading-text { font-size:2rem; }
      .sec-en-wrap { margin-top:36px; }

      #page-value {
        --value-card-height:min(180px, calc((86vh - 202px) / 4));
        --value-card-height:min(180px, calc((86dvh - 202px) / 4));
      }
      .value-board {
        top:calc(14% + 88px + var(--value-card-height) + var(--value-card-height));
        width:calc(100% - 64px);
        max-width:none;
        grid-template-columns:1fr;
        grid-template-rows:repeat(4, var(--value-card-height));
        gap:20px;
      }
      .val-quad {
        height:var(--value-card-height);
        padding:clamp(16px, 2.6vh, 24px) 28px;
      }
      #page-value .val-quad.q-tl { grid-column:1; grid-row:1; transform:translateY(-24px); }
      #page-value .val-quad.q-tr { grid-column:1; grid-row:2; transform:translateY(-24px); }
      #page-value .val-quad.q-bl { grid-column:1; grid-row:3; transform:translateY(-24px); }
      #page-value .val-quad.q-br { grid-column:1; grid-row:4; transform:translateY(-24px); }
      #page-value .val-quad.open { transform:translateY(0); }
      #val-center,
      .value-flip-link {
        top:14%;
      }
      #val-center {
        width:159px;
        height:26px;
        border:0;
        background:transparent;
        box-shadow:none;
      }
      .value-flip-link {
        top:calc(15% + 150px + var(--value-card-height) + var(--value-card-height) + var(--value-card-height) + var(--value-card-height));
        width:320px;
        min-height:32px;
        height:auto;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        padding:8px 24px;
        border:0;
        background:var(--purple);
        color:#fff;
        font-family:'Share Tech Mono',monospace;
        font-size:0.875rem;
        letter-spacing:0.35em;
        opacity:0;
        transition:opacity 0.35s ease, transform 0.35s ease;
      }
      .value-more-content {
        position:relative;
        left:0;
        display:none;
        align-items:center;
        flex:1 1 auto;
        min-width:0;
        width:100%;
        transition:left 0.3s ease;
      }
      .value-flip-link .more-arrow {
        margin-left:16px;
      }
      .value-mobile-label {
        display:block;
        width:159px;
        height:auto;
      }
      #val-center .vc-label-wrap { display:inline-block; }
      #val-center .vc-label-main,
      #val-center .vc-label-about { display:none; }
      #page-value.value-about-ready #val-center .vc-label-about { display:none; }
      #page-value.value-about-ready #val-center {
        width:159px;
        height:26px;
        border:0;
        background:transparent;
        box-shadow:none;
      }
      #page-value.value-about-ready .value-mobile-label { display:block; }
      #page-value.value-about-ready .value-flip-link { opacity:1; }
      #page-value.value-about-ready .value-more-content { display:flex; }
      #page-value.value-leaving .value-flip-link {
        opacity:0;
        pointer-events:none;
        transform:translate(-50%, calc(-50% + 12px));
      }
      #page-value.value-about-ready .value-flip-link:hover .value-more-content,
      #page-value.value-about-ready .value-flip-link:focus-visible .value-more-content { left:4px; }
      #page-value.value-about-ready .value-flip-link:hover .more-arrow::before,
      #page-value.value-about-ready .value-flip-link:focus-visible .more-arrow::before { left:18%; }
      .vc-label-text { font-size:1.75rem; }
      .vc-label-about { font-size:1.25rem; }
      .vq-num-img { width:80px; }
      .vq-ja-wrap .band-text { font-size:1.75rem; line-height:1.4; transform:translateX(0.2em); }
      .vq-en-wrap .band-text { font-size:0.6875rem; line-height:1.4; }

      .page-work,
      .page-recruit,
      .page-news,
      .page-contact {
        padding:96px 32px 72px;
      }
      .page-news { padding-bottom:0; }
      .lower-inner,
      .lower-inner--wide { max-width:960px; }
      .lower-heading {
        align-items:flex-start;
        flex-direction:column;
        gap:40px;
        margin-bottom:40px;
      }
      .lower-heading-copy {
        max-width:680px;
        text-align:left;
      }
      .work-labels {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:32px;
      }
      .work-label-logo { height:104px; }
      .work-label-description { font-size:0.8125rem; }
      .work-label-more { font-size:0.8125rem; }

      .recruit-panel,
      .contact-panel {
        gap:24px;
        padding:30px 32px;
      }
      .recruit-lead,
      .contact-lead,
      .contact-time { max-width:640px; }
      .recruit-links,
      .contact-button,
      .lower-more {
        --button-width:320px;
        --button-max-width:100%;
      }

      .page-contact .contact-panel { margin-bottom:34px; }
      .contact-time { margin-top:24px; }
      .contact-button { margin-top:28px; }

      .lower-heading--news {
        flex-direction:row;
        align-items:center;
      }
    }

    /* ── Smartphone: up to 767px ── */
    @media (max-width: 767px) {
      .sec-content {
        padding:0 24px;
      }
      .sec-eyebrow-wrap { margin-bottom:28px; }
      .eyebrow-img { height:22px; }
      .heading-text {
        font-size:1.4rem;
        line-height:1.6;
      }
      /* Visionの1行目だけ幅が5px前後オーバーして「や」が折り返すため、字間を詰めて1行に収める */
      #bw-v-h1 .heading-text {
        letter-spacing:-0.05em;
      }
      .sec-en-wrap { margin-top:28px; }
      .sec-en-text {
        font-size:0.5625rem;
        letter-spacing:0.14em;
      }
      .kv-en { font-size:0.5625rem; }
      .kv-svg {
        width:145vw;
        max-width:640px;
        height:auto;
      }
      #scroll-hint { bottom:24px; }
      .vision-mobile-break { display:block; }

      #page-value {
        --value-card-height:min(120px, calc((88vh - 170px) / 4));
        --value-card-height:min(120px, calc((88dvh - 170px) / 4));
      }
      .value-board {
        top:calc(12% + 46px + var(--value-card-height) + var(--value-card-height) + 18px);
        width:calc(100% - 32px);
        grid-template-rows:repeat(4, var(--value-card-height));
        gap:8px;
      }
      .val-quad {
        height:var(--value-card-height);
        padding:18px 12px 20px;
      }
      #val-center {
        width:130px;
        height:21px;
      }
      .value-mobile-label {
        width:130px;
      }
      .value-flip-link {
        top:calc(12% + 114px + var(--value-card-height) + var(--value-card-height) + var(--value-card-height) + var(--value-card-height));
      }
      #page-value.value-about-ready .value-flip-link {
        width:calc(100% - 32px);
        min-height:44px;
        padding:8px 40px;
      }
      .vc-label-text { font-size:1.25rem; }
      .vc-label-about { font-size:0.875rem; }
      .vq-body { gap:6px; }
      .vq-num-img { width:64px; }
      .vq-ja-wrap .band-text { font-size:1rem; }
      /* 03のカードだけ強制改行で2行になり箱の高さに収まらず見切れるため、スマホでは改行を解除して1行にする */
      .vq-j3-break { display:none; }
      .vq-en-wrap .band-text {
        font-size:0.5625rem;
        letter-spacing:0.1em;
      }

      .page-work,
      .page-recruit,
      .page-news,
      .page-contact {
        padding:72px 24px 56px;
      }
      .page-news { padding-bottom:0; }
      .lower-heading {
        align-items:center;
        gap:40px;
        margin-bottom:32px;
      }
      .lower-heading-copy {
        font-size:0.8125rem;
        line-height:1.9;
      }
      .work-labels {
        grid-template-columns:1fr;
        gap:40px;
      }
      .work-label-logo {
        height:88px;
        margin-bottom:24px;
      }
      .work-label-rule { display:none; }
      .work-label-link h3 { margin-bottom:8px; }
      .work-label-description { font-size:0.8125rem; }
      .work-label-more { padding-top:20px; }

      .recruit-panel,
      .contact-panel {
        gap:18px;
        padding:24px;
      }
      .page-recruit .recruit-panel { margin-bottom:36px; }
      .recruit-lead,
      .contact-lead,
      .contact-time {
        font-size:0.875rem;
        line-height:2;
      }
      .recruit-links {
        width:100%;
        max-width:none;
        margin-top:32px;
        --button-width:100%;
      }
      .recruit-links a,
      .contact-button {
        --button-min-height:40px;
      }
      .recruit-links a,
      .contact-button,
      .lower-more {
        --button-padding:8px 40px;
      }

      .lower-heading--news {
        align-items:center;
        flex-direction:column;
        gap:40px;
      }
      .lower-more {
        --button-width:100%;
        --button-min-height:44px;
      }

      .contact-button {
        --button-width:100%;
        --button-max-width:none;
        margin-top:24px;
      }
      .contact-time-break { display:block; }
    }