/* ============================================================
   合成フォント（font-test.htmlより）
   ============================================================ */
      @font-face {
        font-family: "PF-Kana";
        font-display: swap;
        font-weight: 100 900;
        src: url(https://fonts.gstatic.com/s/notosansjp/v56/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.119.woff2)
          format("woff2");
        unicode-range:
          U+20, U+2027, U+3001-3002, U+3041-307f, U+3081-308f, U+3091-3093,
          U+3099-309a, U+309d-309e, U+30a1-30e1, U+30e3-30ed, U+30ef-30f0,
          U+30f2-30f4, U+30fb-30fe, U+ff0c, U+ff0e;
      }
      @font-face {
        font-family: "PF-Latin-118";
        font-display: swap;
        src:
          local("MyriadPro-Regular"),
          local("Myriad Pro"),
          url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2)
            format("woff2");
        size-adjust: 118%;
        ascent-override: 90%;
        unicode-range:
          U+0021- U+007E,
          U+00A0- U+00FF;
      }
      @font-face {
        font-family: "PF-Num-154";
        font-display: swap;
        src:
          local("MyriadPro-Regular"),
          local("Myriad Pro"),
          url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2)
            format("woff2");
        size-adjust: 153.85%;
        descent-override: 30%;
        unicode-range: U+0030- U+0039;
      }
      @font-face {
        font-family: "PF-Latin-127";
        font-display: swap;
        src:
          local("MyriadPro-Regular"),
          local("Myriad Pro"),
          url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2)
            format("woff2");
        size-adjust: 127%;
        ascent-override: 80%;
        unicode-range:
          U+0021- U+007E,
          U+00A0- U+00FF;
      }

      /* ============================================================
   Design Tokens
   ============================================================ */
      :root {
        --bg: #f8f8f8;
        --fg: #111111;
        --fg-muted: #888888;
        --border: rgba(0, 0, 0, 0.08);
        --accent: #111111;

        --font-body:
          "PF-Kana", "PF-Latin-118", "M PLUS Rounded 1c", "Noto Sans JP",
          sans-serif;
        --font-date:
          "PF-Kana", "PF-Num-154", "PF-Latin-118", "M PLUS Rounded 1c",
          "Noto Sans JP", sans-serif;
        --font-heading:
          "PF-Latin-127", "Hiragino Sans", "Noto Sans JP", sans-serif;

        /* Typography scale — グリッド連動 (base: gap=32px) */
        --text-xs: 10px; /* ラベル・ジャンル        32 ÷ 3.2  */
        --text-sm: 12px; /* ナビ・メタ・キャプション  32 ÷ 2.67 */
        --text-base: 16px; /* 本文基準               32 ÷ 2    */
        --text-md: 24px; /* 小見出し               32 × 0.75 */
        --text-lg: 32px; /* FV名前・大見出し        = gap     */
        --text-xl: 48px; /* 特大（将来用）          gap × 1.5 */
        --text-2xl: 72px; /* 超大（将来用）          = margin  */

        --fw-bold: 700;
        --fw-semi: 600;
        --fw-medium: 500;
        --fw-normal: 400;

        --col: 240px;
        --gap: 32px;
        --margin: 72px;
        --content: 1056px;
        --max-w: 1200px;

        --cell: 112px; /* (--col - 16px) / 2 */
        --cell-gap: 16px;
        --sq: 52px; /* (--cell - 8px) / 2 */
        --sq-gap: 8px;
      }

      @media (prefers-color-scheme: dark) {
        :root {
          --bg: #111111;
          --fg: #f8f8f8;
          --fg-muted: #666666;
          --border: rgba(255, 255, 255, 0.08);
        }
      }
      [data-theme="dark"] {
        --bg: #111111;
        --fg: #f8f8f8;
        --fg-muted: #666666;
        --border: rgba(255, 255, 255, 0.08);
      }
      [data-theme="light"] {
        --bg: #f8f8f8;
        --fg: #111111;
        --fg-muted: #888888;
        --border: rgba(0, 0, 0, 0.08);
      }

      /* ============================================================
   Reset
   ============================================================ */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        font-size: 16px;
      }
      body {
        background: var(--bg);
        color: var(--fg);
        font-family: var(--font-body);
        font-weight: 410;
        line-height: 1.8;
        transition:
          background 0.2s,
          color 0.2s;
        -webkit-font-smoothing: antialiased;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      img {
        display: block;
        width: 100%;
      }

      /* ============================================================
   Grid System
   ============================================================ */
      .container {
        max-width: var(--max-w);
        margin-inline: auto;
        padding-inline: var(--margin);
      }
      .grid {
        display: grid;
        grid-template-columns: repeat(4, var(--col));
        gap: var(--gap);
      }
      .bleed {
        margin-inline: calc(var(--margin) * -1);
      }

      /* 928-1199 : 3col */
      @media (max-width: 1199px) {
        :root {
          --margin: 72px;
          --content: 784px;
          --max-w: 928px;
        }
        .grid {
          grid-template-columns: repeat(3, 240px);
        }
      }
      /* 656-927 : 2col */
      @media (max-width: 927px) {
        :root {
          --col: 280px;
          --margin: 32px;
          --content: 592px;
          --max-w: 656px;
          --sq: 62px;
        }
        .grid {
          grid-template-columns: repeat(2, 280px);
        }
      }
      /* -655 : 1col */
      @media (max-width: 655px) {
        :root {
          --margin: 32px;
        }
        .grid {
          grid-template-columns: 1fr;
          gap: var(--gap);
        }
      }

      /* ============================================================
   Header
   ============================================================ */
      /* ── Square button (reusable) ────────────────────────────── */
      .sq-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--sq);
        height: var(--sq);
        background: var(--bg);
        border: none;
        border-right: 1px solid var(--fg);
        border-bottom: 1px solid var(--fg);
        font-family: var(--font-heading);
        font-size: var(--text-xs);
        font-weight: var(--fw-normal);
        letter-spacing: 0.08em;
        color: var(--fg);
        cursor: pointer;
        text-decoration: none;
        transition:
          background 0.15s,
          color 0.15s,
          border-color 0.15s,
          border-width 0.15s;
        box-sizing: border-box;
      }
      .sq-btn:hover {
        border-top: 1px solid var(--fg);
        border-left: 1px solid var(--fg);
        border-right: 1px solid transparent;
        border-bottom: 1px solid transparent;
      }
      .sq-btn.is-active,
      .sq-btn[aria-pressed="true"] {
        background: var(--fg);
        color: var(--bg);
        border-right: 1px solid var(--fg);
        border-bottom: 1px solid var(--fg);
        border-top: none;
        border-left: none;
      }
      .sq-btn img {
        width: 24px;
        height: 24px;
        object-fit: contain;
      }

      /* ── Site header ─────────────────────────────────────────── */
      .site-header {
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--bg);
        height: var(--cell);
        transition: background 0.2s;
      }
      .site-header .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
      }
      .site-header__logo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--sq);
        height: var(--sq);
        cursor: pointer;
        flex-shrink: 0;
        background: none;
        border: none;
        padding: 0;
      }
      .site-header__logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      .site-nav {
        display: flex;
        align-items: center;
        gap: var(--cell-gap);
      }
      .site-nav__pair {
        display: flex;
        align-items: center;
        gap: var(--sq-gap);
      }
      /* .theme-toggle は .sq-btn に統合済み */

      /* ── Hamburger button (1col only) ───────────────────────── */
      .hamburger-btn {
        display: none;
      }
      .hamburger-btn__icon,
      .hamburger-btn__icon::before,
      .hamburger-btn__icon::after {
        display: block;
        width: 18px;
        height: 1.5px;
        background: currentColor;
        transition: transform 0.2s, opacity 0.2s;
      }
      .hamburger-btn__icon {
        position: relative;
      }
      .hamburger-btn__icon::before,
      .hamburger-btn__icon::after {
        content: "";
        position: absolute;
        left: 0;
      }
      .hamburger-btn__icon::before { top: -6px; }
      .hamburger-btn__icon::after  { top:  6px; }

      .hamburger-btn[aria-expanded="true"] {
        background: var(--fg);
        color: var(--bg);
        border-right: 1px solid var(--fg);
        border-bottom: 1px solid var(--fg);
      }
      .hamburger-btn[aria-expanded="true"] .hamburger-btn__icon {
        background: transparent;
      }
      .hamburger-btn[aria-expanded="true"] .hamburger-btn__icon::before {
        transform: translateY(6px) rotate(45deg);
      }
      .hamburger-btn[aria-expanded="true"] .hamburger-btn__icon::after {
        transform: translateY(-6px) rotate(-45deg);
      }

      /* ── Mobile nav overlay ──────────────────────────────────── */
      .mobile-nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: calc(var(--cell) * 2);
        background: var(--bg);
        z-index: 98;
        align-items: flex-end;
        transform: translateY(-100%);
        transition: transform 0.3s ease;
      }
      .mobile-nav.is-open {
        transform: translateY(0);
      }
      .mobile-nav__row {
        width: 100%;
        height: var(--cell);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-inline: var(--margin);
      }

      @media (max-width: 532px) {
        :root {
          --sq: min(calc((100vw - 96px) / 4), var(--cell));
        }
        .hamburger-btn { display: inline-flex; }
        .site-nav       { display: none; }
        .mobile-nav     { display: flex; }
      }

      /* ============================================================
   Page transitions
   ============================================================ */
      .page {
        animation: pageFadeIn 0.3s ease;
      }
      .page.is-hidden {
        display: none;
      }
      @keyframes pageFadeIn {
        from {
          opacity: 0;
          transform: translateY(8px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* ============================================================
   Works Page — Filter
   ============================================================ */
      .works-filter {
        padding: 32px 0;
      }
      .works-filter .container {
        display: flex;
        align-items: center;
        gap: var(--sq-gap);
        flex-wrap: wrap;
      }
      /* ヘッダー nav (.sq-btn) のデザイン言語を踏襲したテキストフィルタ */
      .filter-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--sq);
        height: var(--sq);
        padding: 0;
        background: var(--bg);
        border: none;
        border-right: 1px solid var(--fg);
        border-bottom: 1px solid var(--fg);
        font-family: var(--font-heading);
        font-size: var(--text-xs);
        font-weight: var(--fw-normal);
        letter-spacing: 0.08em;
        color: var(--fg);
        cursor: pointer;
        transition:
          background 0.15s,
          color 0.15s,
          border-color 0.15s,
          border-width 0.15s;
        box-sizing: border-box;
      }
      .filter-btn--w2 {
        width: calc(var(--sq) * 2 + var(--sq-gap));
      }
      .filter-btn:hover {
        border-top: 1px solid var(--fg);
        border-left: 1px solid var(--fg);
        border-right: 1px solid transparent;
        border-bottom: 1px solid transparent;
      }
      .filter-btn.is-active {
        color: var(--bg);
        background: var(--fg);
        border-right: 1px solid var(--fg);
        border-bottom: 1px solid var(--fg);
        border-top: none;
        border-left: none;
      }

      /* ============================================================
   Works Grid
   ============================================================ */
      .works-section {
        padding-block: 32px;
      }

      .work-card {
        --color-project: #888;
        display: block;
        cursor: pointer;
      }
      .work-card__thumb {
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background: var(--border);
        position: relative;
      }
      .work-card__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
      }
      .work-card:hover .work-card__thumb img {
        transform: scale(1.03);
      }

      .work-card__overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to top,
          color-mix(in srgb, var(--color-project) 70%, transparent) 0%,
          transparent 60%
        );
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 20px;
        opacity: 1;
        transition: background 0.3s ease;
      }
      .work-card:hover .work-card__overlay {
        background: color-mix(in srgb, var(--color-project) 80%, transparent);
      }
      .work-card__overlay-genre {
        font-size: var(--text-xs);
        letter-spacing: 0.12em;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 4px;
        font-family: var(--font-heading);
      }
      .work-card__overlay-title {
        font-size: var(--text-base);
        font-weight: 500;
        color: #fff;
        font-family: var(--font-heading);
        line-height: 1.4;
      }

      /* hidden card */
      .work-card.is-hidden {
        display: none;
      }

      /* ============================================================
   Work Detail Modal
   ============================================================ */
      /* ============================================================
   Work Detail — オーバーレイパネル
   ============================================================ */
      .work-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 200;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s ease;
      }
      .work-overlay.is-open {
        opacity: 1;
        pointer-events: auto;
      }

      .work-panel {
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) translateY(100%);
        width: calc(100% - var(--margin) * 2);
        max-width: var(--content);
        max-height: 85vh;
        overflow-y: auto;
        background: var(--bg);
        border-radius: 8px 8px 0 0;
        z-index: 201;
        transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
        padding: 40px;
        padding-bottom: 64px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--gap);
        align-content: start;
      }
      .work-panel.is-open {
        transform: translateX(-50%) translateY(0);
      }

      /* パネルヘッダー */
      .work-panel__header {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4px;
      }
      .work-panel__genre {
        font-size: var(--text-xs);
        letter-spacing: 0.12em;
        color: var(--fg-muted);
        font-family: var(--font-heading);
      }
      .work-panel__close {
        background: none;
        border: none;
        color: var(--fg-muted);
        cursor: pointer;
        font-size: var(--text-xs);
        letter-spacing: 0.1em;
        font-family: var(--font-heading);
        padding: 0;
        line-height: 1;
        transition: color 0.15s;
      }
      .work-panel__close:hover { color: var(--fg); }
      .work-panel__title {
        grid-column: 1 / -1;
        font-family: var(--font-heading);
        font-size: var(--text-lg);
        font-weight: 500;
        line-height: 1.3;
        margin-bottom: 8px;
      }

      /* スライダー列 */
      .work-panel__left { position: relative; }
      .work-panel__slides {
        overflow: hidden;
        aspect-ratio: 4 / 3;
        background: #000;
      }
      .work-panel__slide {
        display: none;
        width: 100%;
        height: 100%;
      }
      .work-panel__slide.is-active { display: block; }
      .work-panel__slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
      }
      .work-panel__nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 12px;
      }
      .work-panel__nav-btn {
        background: none;
        border: 1px solid var(--border);
        color: var(--fg-muted);
        cursor: pointer;
        font-size: var(--text-xs);
        letter-spacing: 0.06em;
        padding: 5px 14px;
        font-family: var(--font-heading);
        transition: color 0.15s, border-color 0.15s;
      }
      .work-panel__nav-btn:hover { color: var(--fg); border-color: var(--fg); }
      .work-panel__nav-btn:disabled { opacity: 0.25; cursor: default; }
      .work-panel__counter {
        font-size: var(--text-xs);
        color: var(--fg-muted);
        font-family: var(--font-heading);
        letter-spacing: 0.06em;
      }

      /* 情報列 */
      .work-panel__right { }
      .work-panel__desc {
        font-size: var(--text-base);
        line-height: 2;
        margin-bottom: 32px;
      }
      .work-panel__meta {
        list-style: none;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 8px 24px;
        font-size: var(--text-sm);
      }
      .work-panel__meta li { display: contents; }
      .work-panel__meta-key {
        color: var(--fg-muted);
        letter-spacing: 0.06em;
        font-family: var(--font-heading);
      }
      .work-panel__meta-val { color: var(--fg); }

      @media (max-width: 655px) {
        .work-panel {
          width: 100%;
          max-width: 100%;
          max-height: 90dvh;
          border-radius: 12px 12px 0 0;
          padding: 24px;
          padding-bottom: 48px;
          grid-template-columns: 1fr;
        }
      }

      /* ============================================================
   About Page
   ============================================================ */
      .about-page {
        padding-block: var(--gap);
      }
      .about-card {
        aspect-ratio: 1;
        border-right: 1px solid var(--bg);
        border-bottom: 1px solid var(--bg);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: var(--cell-gap);
        box-sizing: border-box;
        font-family: var(--font-heading);
        background: var(--fg);
        color: var(--bg);
        text-decoration: none;
      }
      .about-card__label {
        font-size: var(--text-xs);
        letter-spacing: 0.12em;
        color: var(--bg);
        opacity: 0.5;
        font-weight: var(--fw-normal);
      }
      .about-card__main {
        font-size: var(--text-base);
        letter-spacing: 0.04em;
        line-height: 1.3;
        flex: 1;
        display: flex;
        align-items: center;
        opacity: 1;
      }
      .about-card--lg .about-card__main {
        font-size: var(--text-lg);
        letter-spacing: 0.02em;
      }
      .about-card__sub {
        font-size: var(--text-xs);
        letter-spacing: 0.08em;
        color: var(--bg);
        opacity: 0.5;
        line-height: 1.5;
      }
      .about-card__list {
        list-style: none;
        font-size: var(--text-base);
        letter-spacing: 0.04em;
        line-height: 2;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      @keyframes flip-peek {
        0%   { transform: rotateY(0deg); }
        50%  { transform: rotateY(10deg); }
        100% { transform: rotateY(0deg); }
      }
      /* Flip card */
      .about-card--flip {
        perspective: 800px;
        cursor: pointer;
        background: transparent;
        border: none;
        padding: 0;
        position: relative;
      }
      .flip-card__inner {
        position: absolute;
        inset: 0;
        transform-style: preserve-3d;
        transition: transform 0.5s ease;
      }
      .about-card--flip.is-peeking .flip-card__inner {
        animation: flip-peek 0.2s ease forwards;
      }
      .about-card--flip.is-flipped .flip-card__inner {
        transform: rotateY(180deg);
      }
      .flip-card__front,
      .flip-card__back {
        position: absolute;
        inset: 0;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: var(--cell-gap);
        background: var(--fg);
        color: var(--bg);
        border-right: 1px solid var(--bg);
        border-bottom: 1px solid var(--bg);
        box-sizing: border-box;
      }
      .flip-card__back {
        transform: rotateY(180deg);
      }
      .flip-card__back-text {
        font-size: var(--text-base);
        letter-spacing: 0.04em;
        line-height: 1.8;
        flex: 1;
        display: flex;
        align-items: center;
      }
      .flip-card__back-list {
        list-style: none;
        font-size: var(--text-base);
        letter-spacing: 0.04em;
        line-height: 2;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .flip-card__back-grid {
        list-style: none;
        font-size: var(--text-base);
        letter-spacing: 0.04em;
        line-height: 2;
        flex: 1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-content: center;
        gap: 0 0.5em;
      }

      .about-card__main--email {
        font-size: var(--text-xs);
        word-break: break-all;
        user-select: text;
        cursor: text;
      }
      .about-card__email-link {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: 0.3em;
      }
      .about-card--link {
        cursor: pointer;
        transition: border-color 0.15s;
      }
      .about-card--link:hover {
        border-top: 1px solid var(--bg);
        border-left: 1px solid var(--bg);
        border-right: 1px solid transparent;
        border-bottom: 1px solid transparent;
      }

      /* ============================================================
   Footer
   ============================================================ */
      .site-footer {
        height: var(--cell);
      }
      .site-footer .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
      }
      .site-footer__left {
        display: flex;
        align-items: center;
        gap: var(--cell-gap);
      }
      .site-footer__logo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--sq);
        height: var(--sq);
        flex-shrink: 0;
      }
      .site-footer__logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      .site-footer__email {
        font-family: var(--font-heading);
        font-size: var(--text-xs);
        font-weight: var(--fw-normal);
        letter-spacing: 0.08em;
        color: var(--fg);
        text-decoration: none;
      }
      .site-footer__email:hover {
        opacity: 0.6;
      }
      .site-footer__copy {
        font-size: var(--text-xs);
        color: var(--fg-muted);
        font-family: var(--font-heading);
        letter-spacing: 0.05em;
      }

      /* ============================================================
   FV
   ============================================================ */
      .fv {
        padding: var(--gap) 0;
      }
      .fv__inner {
        max-width: var(--max-w);
        margin-inline: auto;
        padding-inline: var(--margin);
        display: flex;
        align-items: stretch;
        gap: var(--gap);
        height: var(--cell);
      }

      /* カラム共通 */
      .fv__col {
        display: flex;
        align-items: stretch;
        gap: var(--cell-gap);
        width: var(--col);
        flex-shrink: 0;
      }

      /* 写真右ラッパー: デスクトップは2枚を横並び */
      .fv__photos-right {
        display: flex;
        flex-direction: row;
        gap: var(--gap);
        flex-shrink: 0;
        position: relative;
      }
      .fv__photos-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 1;
        pointer-events: none;
      }
      @media (min-width: 656px) {
        .fv__photos-right:hover .fv__photos-overlay {
          opacity: 1;
        }
      }
      .fv__photos-overlay.is-visible {
        opacity: 1;
        pointer-events: auto;
      }
      .fv__photos-overlay-text {
        color: #fff;
        font-family: var(--font-heading);
        font-size: var(--text-sm);
        letter-spacing: 0.08em;
        line-height: 2;
        text-align: center;
      }

      /* 顔写真セル */
      .fv__photo {
        width: var(--cell);
        height: var(--cell);
        flex-shrink: 0;
        overflow: hidden;
      }
      .fv__photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      /* テキスト情報カラム（デスクトップ：512px、内部で bottom揃え横並び） */
      .fv__col--text {
        width: calc(var(--col) * 2 + var(--gap));
        gap: 0;
        align-items: center;
      }
      .fv__text-inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--gap);
      }
      .fv__info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }
      .fv__info--name {
        width: var(--col);
        flex-shrink: 0;
      }
      .fv__info--tagline {
        flex: 1;
      }
      .fv__name-ja {
        font-family: var(--font-heading);
        font-size: var(--text-lg);
        font-weight: var(--fw-normal);
        letter-spacing: 0.05em;
        line-height: 1.1;
      }
      .fv__name-en {
        font-family: var(--font-heading);
        font-size: var(--text-sm);
        font-weight: var(--fw-normal);
        letter-spacing: 0.12em;
        line-height: 1.3;
      }
      .fv__info--tagline span {
        font-family: var(--font-heading);
        font-size: var(--text-sm);
        font-weight: var(--fw-normal);
        letter-spacing: 0.04em;
        line-height: 1.3;
      }

      /* FV レスポンシブ
   ============================================================ */

      /* 3列（928–1199px）: テキスト縦積み240px、肩書き1行 */
      @media (max-width: 1199px) {
        .fv__col--text {
          width: var(--col);
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          gap: 0;
        }
        .fv__text-inner {
          flex-direction: column;
          align-items: flex-start;
          gap: var(--sq-gap);
          height: auto;
        }
        .fv__info {
          flex: none;
        }
        .fv__info--tagline {
          flex-direction: row;
          flex-wrap: nowrap;
          gap: 0.4em;
          overflow: hidden;
        }
      }

      /* 2列（656–927px）: 左テキスト / 右写真縦積み */
      @media (max-width: 927px) {
        .fv__inner {
          height: auto;
          flex-wrap: nowrap;
          padding-inline: 32px;
          gap: var(--gap);
          align-items: stretch;
        }
        /* テキスト左カラム: 名前+肩書きまとめて写真ブロック全体に対して縦中央 */
        .fv__col--text {
          width: calc((100% - var(--gap)) / 2);
          flex-shrink: 0;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
        }
        .fv__text-inner {
          flex-direction: column;
          align-items: flex-start;
          gap: var(--sq-gap);
          height: auto;
        }
        .fv__info {
          flex: none;
          width: 100%;
        }
        .fv__info--tagline {
          flex-direction: row;
          flex-wrap: nowrap;
          gap: var(--sq-gap);
          overflow: visible;
        }
        /* 写真右ラッパー: 縦積み、2段間16px */
        .fv__photos-right {
          flex-direction: column;
          gap: 16px;
          width: calc((100% - var(--gap)) / 2);
          flex-shrink: 0;
        }
        .fv__photos-right .fv__col {
          width: 100%;
          flex-shrink: 0;
        }
        .fv__photo {
          flex: 1;
          height: auto;
          aspect-ratio: 1;
        }
      }

      /* 1列（〜655px）: 縦積み + margin32px */
      @media (max-width: 655px) {
        .fv__inner {
          flex-direction: column;
          flex-wrap: nowrap;
          height: auto;
        }
        .fv__col--text {
          width: 100%;
        }
        .fv__photos-right {
          flex-direction: column;
          width: 100%;
        }
        .fv__photos-right .fv__col {
          width: 100%;
        }
      }

      /* ============================================================
   Grid Guide（開発用）
   ============================================================ */
      .grid-guide {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 9999;
        display: none;
      }
      .grid-guide .container {
        height: 100%;
      }
      .grid-guide .grid {
        height: 100%;
      }
      .grid-guide .grid-col {
        height: 100%;
        background: rgba(255, 0, 80, 0.06);
        border-inline: 1px solid rgba(255, 0, 80, 0.15);
      }

      /* ============================================================
   プロジェクト別カラー（旧インライン style="--color-project")
   ============================================================ */
      .work-card[data-id="0"] {
        --color-project: #1a1a2e;
      }
      .work-card[data-id="1"] {
        --color-project: #3d2b1f;
      }
      .work-card[data-id="2"] {
        --color-project: #2c3e2d;
      }
      .work-card[data-id="3"] {
        --color-project: #1c3a5e;
      }
      .work-card[data-id="4"] {
        --color-project: #050f23;
      }
      .work-card[data-id="5"] {
        --color-project: #2a2a2a;
      }
      .work-card[data-id="6"] {
        --color-project: #4a2060;
      }

      /* モーダルスライドのプレースホルダ（旧インライン style） */
      .modal__slide-placeholder {
        width: 100%;
        height: 100%;
        background: var(--slide-bg);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .modal__slide-label {
        color: rgba(255, 255, 255, 0.2);
        font-size: 11px;
        letter-spacing: 0.14em;
        font-family: var(--font-heading);
      }