/* BizTalent Main Styles - TOP Page */

/* =============================================
   グローバル：横スクロール完全防止
   html の overflow-x: hidden は「ビューポート」に伝播する特別ルール。
   ・html 要素自体はスクロールコンテナにならない → position:sticky が壊れない
   ・clip と違い iOS 15以下を含む全ブラウザで対応
   ============================================= */
html {
  overflow-x: hidden; /* ← clip → hidden に変更（iOS 15以下でも動作）*/
  scroll-behavior: smooth;
}
/* body には hidden を付けない（付けると sticky が壊れる）*/
body {
  max-width: 100%;
}

    /* =====================
       RESET & BASE
    ===================== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: #080808;
      color: #f5f5f0;
      font-family: 'Noto Sans JP', sans-serif;
      overflow-x: clip;
    }
    a { text-decoration: none; }
    ul { list-style: none; }
    img { display: block; }

    :root {
      --gold: #c8a96e;
      --gold2: #e8d5a3;
      --black: #080808;
      --white: #f5f5f0;
      --gray: #1a1a1a;
      --muted: #888;
      --en: 'Inter', sans-serif;
      --ja: 'Noto Sans JP', sans-serif;
      --display: 'Bebas Neue', sans-serif;
    }

    /* =====================
       HEADER / NAV
    ===================== */
    #site-header {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 999;
      transition: background 0.4s;
    }
    #site-header.scrolled {
      background: rgba(8,8,8,0.95);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(200,169,110,0.15);
    }

    #site-nav {
      display: flex;
      align-items: center;
      height: 80px;
      padding: 0 60px;
    }
    #site-header.scrolled #site-nav { height: 64px; }

    /* ロゴ */
    .nav-logo {
      flex-shrink: 0;
      margin-right: auto;
    }
    .nav-logo img {
      height: 22px;
      width: auto;
      opacity: 0.88;
      transition: opacity 0.3s, filter 0.3s;
    }
    .nav-logo:hover img {
      opacity: 1;
      filter: brightness(1.1) sepia(0.25) saturate(4) hue-rotate(5deg);
    }

    /* メニュー */
    .nav-menu {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-right: auto;
    }
    .nav-menu li { position: relative; }
    .nav-menu a {
      font-family: var(--en);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(245,245,240,0.72);
      padding: 10px 14px;
      display: flex;
      align-items: center;
      gap: 4px;
      overflow: hidden;
      white-space: nowrap;
      position: relative;
    }
    /* c-txtHover: テキストスライドホバー */
    .nav-menu a {
      overflow: hidden;
      height: 36px;
      padding-top: 0; padding-bottom: 0;
      align-items: flex-start;
    }
    .nav-menu a .txt-hover-wrap {
      display: flex;
      flex-direction: column;
      transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .nav-menu a .txt-hover-wrap span {
      height: 36px;
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .nav-menu a .txt-hover-wrap span:last-child { color: var(--gold); }
    .nav-menu li:hover > a .txt-hover-wrap { transform: translateY(-36px); }
    .nav-arrow { font-size: 7px; opacity: 0.5; transition: transform 0.25s; }
    .nav-menu li:hover .nav-arrow { transform: rotate(180deg); }

    /* ドロップダウン */
    .dropdown {
      display: none;
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(10,10,10,0.98);
      border: 1px solid rgba(200,169,110,0.2);
      min-width: 210px;
      padding: 8px 0;
      z-index: 10;
    }
    .nav-menu li:hover .dropdown { display: block; }
    .dropdown-label {
      display: block;
      font-family: var(--en);
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--gold);
      padding: 10px 18px 6px;
    }
    .dropdown-main-link {
      display: block;
      font-family: var(--ja);
      font-size: 14px;
      color: var(--white);
      padding: 4px 18px 12px;
      border-bottom: 1px solid rgba(200,169,110,0.12);
      margin-bottom: 6px;
      transition: color 0.2s;
    }
    .dropdown-main-link:hover { color: var(--gold); }
    .dropdown-sub-label {
      display: block;
      font-family: var(--en);
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 2px 18px 6px;
    }
    .dropdown-sub-link {
      display: block;
      font-family: var(--ja);
      font-size: 13px;
      font-weight: 300;
      color: rgba(245,245,240,0.6);
      padding: 8px 18px;
      transition: background 0.15s, color 0.15s;
    }
    .dropdown-sub-link:hover { background: rgba(200,169,110,0.06); color: var(--white); }

    /* Contactボタン */
    .nav-cta {
      flex-shrink: 0;
      font-family: var(--en);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--black);
      background: var(--gold);
      padding: 10px 22px;
      transition: background 0.25s;
    }
    .nav-cta:hover { background: var(--gold2); }

    /* =====================
       HERO
    ===================== */
    #hero {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }
    #hero-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }
    @media (max-width: 768px) {
      #hero {
        height: calc(100vw * 16 / 9);
        overflow: hidden;
        background: #0a0a0a;
      }
      #hero-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
      }
    }

    /* SCROLL インジケーター（モバイルのみ表示） */
    .hero-scroll-indicator {
      display: none;
    }
    @media (max-width: 768px) {
      .hero-scroll-indicator {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        gap: 8px;
      }
      .hero-scroll-text {
        font-family: var(--en);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.35em;
        color: rgba(245,245,240,0.7);
      }
      .hero-scroll-line {
        display: block;
        width: 1px;
        height: 40px;
        background: linear-gradient(to bottom, rgba(245,245,240,0.7), transparent);
        animation: scrollLine 1.6s ease-in-out infinite;
      }
      @keyframes scrollLine {
        0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
        50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
        100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
      }
    }

    #mute-btn {
      position: absolute;
      bottom: 32px;
      right: 48px;
      z-index: 10;
      width: 42px;
      height: 42px;
      background: rgba(0,0,0,0.45);
      border: 1px solid rgba(245,245,240,0.25);
      backdrop-filter: blur(6px);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color 0.2s;
    }
    #mute-btn:hover { border-color: var(--gold); }
    #mute-btn svg { width: 17px; height: 17px; color: #fff; }
    #mute-btn .ico-muted { display: block; }
    #mute-btn .ico-sound { display: none; }
    #mute-btn.unmuted .ico-muted { display: none; }
    #mute-btn.unmuted .ico-sound { display: block; }

    /* =====================
       SECOND VIEW — white background
    ===================== */
    #second-view {
      position: sticky;
      top: 0;
      width: 100%;
      height: 100vh;
      min-height: 100vh;
      background: #f5f5f0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /* overflow: hidden を削除 → sticky要素のiOS Safariバグ回避 */
      overflow: visible;
      z-index: 1;
    }
    .sv-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 140px 60px 100px;
      width: 100%;
    }
    .sv-label {
      font-family: var(--en);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.45em;
      text-transform: uppercase;
      color: #b8934a;
      margin-bottom: 40px;
    }
    .sv-heading {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 28px;
    }
    .sv-en {
      font-family: var(--display);
      font-size: clamp(72px, 11vw, 152px);
      line-height: 1;
      color: #111;
      letter-spacing: 0.01em;
      display: block;
    }
    .sv-ja {
      font-size: clamp(13px, 1.4vw, 16px);
      font-weight: 300;
      letter-spacing: 0.25em;
      color: #b8934a;
      margin-top: 20px;
      margin-bottom: 36px;
    }
    .sv-desc {
      font-size: clamp(13px, 1.3vw, 17px);
      font-weight: 300;
      line-height: 2.6;
      color: rgba(0,0,0,0.65);
      margin-bottom: 56px;
    }
    /* Gokko c-viewmore style CTA */
    .sv-cta {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      font-family: var(--en);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #111;
      transition: gap 0.35s;
    }
    .sv-cta:hover { gap: 24px; }
    .sv-cta-arrow {
      display: flex; align-items: center; justify-content: center;
      width: 36px; height: 36px;
      border: 1px solid rgba(0,0,0,0.2);
      border-radius: 50%;
      transition: background 0.3s, border-color 0.3s;
    }
    .sv-cta:hover .sv-cta-arrow { background: #b8934a; border-color: #b8934a; }
    .sv-cta-arrow svg { width: 14px; height: 14px; color: #111; }
    .sv-cta:hover .sv-cta-arrow svg { color: #fff; }

    /* policy ticker strip */
    /* ティッカーの外ラッパー（sticky の外に出したことで overflow:hidden が確実に効く） */
    .sv-policy-outer {
      width: 100%;
      overflow: hidden; /* sticky の外なので確実に機能する */
      background: #f5f5f0;
    }
    .sv-policy {
      width: 100%;
      overflow: hidden;
      border-top: 1px solid rgba(0,0,0,0.08);
      padding: 24px 0;
      margin-top: 0;
    }
    .sv-policy-track {
      display: flex;
      animation: marquee 28s linear infinite;
      white-space: nowrap;
      will-change: transform;
    }
    .sv-policy-item {
      font-family: var(--display);
      font-size: 22px;
      letter-spacing: 0.1em;
      color: rgba(0,0,0,0.18);
      padding: 0 40px;
      display: inline-flex; align-items: center; gap: 40px;
    }
    .sv-policy-item::after { content: '✦'; font-size: 8px; color: #b8934a; }
    .sv-policy-item.highlight { color: rgba(0,0,0,0.65); }

    .sv-scroll-hint {
      position: absolute;
      bottom: 32px;
      right: 52px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    .sv-scroll-line {
      display: block;
      width: 1px;
      height: 52px;
      background: linear-gradient(to bottom, transparent, var(--gold));
      animation: scroll-line 1.8s ease-in-out infinite;
    }
    @keyframes scroll-line {
      0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
      50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
      51% { transform-origin: bottom; }
      100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
    }
    .sv-scroll-text {
      font-family: var(--en);
      font-size: 9px;
      letter-spacing: 0.35em;
      color: rgba(0,0,0,0.3);
      writing-mode: vertical-rl;
    }

    /* =====================
       MARQUEE
    ===================== */
    .marquee-wrap {
      overflow: hidden;
      -webkit-clip-path: inset(0 0 0 0);
      clip-path: inset(0 0 0 0);
      background: var(--gold);
      padding: 0;
      position: relative;
      z-index: 2;
    }
    /* FV内ニュースティッカー */
    .hero-marquee {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10;
    }
    /* Values ticker (top row) */
    .marquee-row { padding: 13px 0; }
    /* News ticker (bottom row) */
    .marquee-row.news-row-ticker {
      background: #111;
      border-top: 1px solid rgba(200,169,110,0.2);
      padding: 10px 0;
    }
    .marquee-track {
      display: flex;
      animation: marquee 22s linear infinite;
      white-space: nowrap;
    }
    .marquee-track.news-track { animation-duration: 38s; }
    .marquee-item {
      font-family: var(--ja);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.12em;
      color: var(--black);
      text-decoration: none;
      padding: 0 36px;
      display: inline-flex;
      align-items: center;
      gap: 36px;
    }
    .marquee-item::after { content: '|'; font-size: 11px; opacity: 0.3; }
    .marquee-item:hover { opacity: 0.75; }
    .marquee-badge {
      display: inline-block;
      font-family: var(--en); font-size: 9px; font-weight: 700;
      letter-spacing: 0.22em; text-transform: uppercase;
      background: rgba(0,0,0,0.12); color: var(--black);
      padding: 3px 7px; margin-right: 10px; flex-shrink: 0;
    }
    .marquee-date {
      font-family: var(--en); font-size: 10px; font-weight: 400;
      letter-spacing: 0.1em; opacity: 0.5; margin-right: 14px;
    }
    /* news ticker items */
    .news-ticker-item {
      display: inline-flex; align-items: center; gap: 20px;
      padding: 0 40px;
      font-family: var(--en); font-size: 11px; font-weight: 500;
      letter-spacing: 0.12em; color: rgba(245,245,240,0.65);
      white-space: nowrap;
    }
    .news-ticker-item::after { content: '—'; color: rgba(200,169,110,0.4); margin-left: 20px; }
    .news-ticker-badge {
      font-family: var(--en); font-size: 9px; font-weight: 700;
      letter-spacing: 0.28em; text-transform: uppercase;
      color: var(--gold); background: rgba(200,169,110,0.12);
      padding: 3px 8px; flex-shrink: 0;
    }
    .news-ticker-date { color: rgba(245,245,240,0.3); font-size: 10px; letter-spacing: 0.1em; }
    @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* =====================
       SECTION COMMONS
    ===================== */
    .section { padding: 0 0 160px; }
    .inner { max-width: 1200px; margin: 0 auto; padding: 0 60px; }

    /* =====================
       SEC-HERO — Gokko巨大アウトライン文字 + スクロールfillエフェクト
    ===================== */
    .sec-hero {
      width: 100%;
      overflow: hidden;
      padding: 100px 0 20px;
      pointer-events: none;
      user-select: none;
    }
    .sec-hero-text {
      display: block;
      position: relative;
      padding: 0 60px;
      /* line-heightを確保して文字が切れないように */
      line-height: 1;
    }
    /* アウトライン層（下層） */
    .sht-outline {
      display: block;
      font-family: var(--display);
      font-size: clamp(60px, 9vw, 120px);
      line-height: 0.9;
      letter-spacing: -0.01em;
      color: transparent;
      -webkit-text-stroke: 1.5px rgba(245,245,240,0.13);
    }
    /* 塗りつぶし層（上層） — clip-pathで左から右へ出現 */
    .sht-fill {
      position: absolute;
      top: 0; left: 0; right: 0;
      padding: 0 60px;
      font-family: var(--display);
      font-size: clamp(60px, 9vw, 120px);
      line-height: 0.9;
      letter-spacing: -0.01em;
      color: var(--white);
      clip-path: inset(0 100% 0 0);
      transition: clip-path 1.1s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: clip-path;
    }
    /* エフェクト発動時 */
    .sec-hero-text.hero-active .sht-fill {
      clip-path: inset(0 0% 0 0);
    }
    /* 白セクション variant */
    #news .sht-outline,
    #mission .sht-outline,
    #vision .sht-outline {
      -webkit-text-stroke-color: rgba(0,0,0,0.09);
    }
    #news .sht-fill,
    #mission .sht-fill,
    #vision .sht-fill {
      color: #111;
    }
    /* company: 白背景用 */
    #company .sht-outline { -webkit-text-stroke-color: rgba(0,0,0,0.07); }
    #company .sht-fill { color: #111; }

    /* .inner内の最初の要素に上マージン */
    .section .inner { padding-top: 52px; }

    /* Section header — Gokko style: label small top, massive title below */
    .sec-header {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: 0;
      margin-bottom: 72px;
    }
    .sec-header-top {
      display: flex;
      align-items: center;
      gap: 20px;
      border-top: 1px solid rgba(200,169,110,0.2);
      padding-top: 20px;
      margin-bottom: 16px;
    }
    #news .sec-header-top, #mission .sec-header-top, #vision .sec-header-top, #contact .sec-header-top {
      border-top-color: rgba(0,0,0,0.12);
    }
    .sec-header-top .sec-label { margin: 0; }
    .sec-header-line {
      flex: 1;
      height: 1px;
      background: rgba(200,169,110,0.12);
    }
    #news .sec-header-line, #mission .sec-header-line, #vision .sec-header-line, #contact .sec-header-line {
      background: rgba(0,0,0,0.08);
    }
    .sec-label {
      font-family: var(--en);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.42em;
      text-transform: uppercase;
      color: var(--gold);
    }
    .sec-title {
      font-family: var(--display);
      font-size: clamp(72px, 10vw, 140px);
      line-height: 0.92;
      color: var(--white);
      letter-spacing: 0.01em;
    }

    /* reveal animation */
    .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.85s cubic-bezier(0.4,0,0.2,1), transform 0.85s cubic-bezier(0.4,0,0.2,1); }
    .reveal.on { opacity: 1; transform: none; }

    /* ── スタガー遅延 ── */
    .stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1); }
    .stagger.on > *:nth-child(1) { transition-delay: 0s; }
    .stagger.on > *:nth-child(2) { transition-delay: 0.1s; }
    .stagger.on > *:nth-child(3) { transition-delay: 0.2s; }
    .stagger.on > *:nth-child(4) { transition-delay: 0.3s; }
    .stagger.on > *:nth-child(5) { transition-delay: 0.4s; }
    .stagger.on > * { opacity: 1; transform: none; }

    /* ── 単語スプリットリビール (sv-heading) ── */
    .word-split .word {
      display: inline-block;
      overflow: hidden;
      vertical-align: bottom;
    }
    .word-split .word-inner {
      display: inline-block;
      transform: translateY(110%);
      transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .word-split.on .word-inner { transform: translateY(0); }
    .word-split.on .word:nth-child(2) .word-inner { transition-delay: 0.12s; }
    .word-split.on .word:nth-child(3) .word-inner { transition-delay: 0.22s; }
    .word-split.on .word:nth-child(4) .word-inner { transition-delay: 0.32s; }

    /* ── ライン描画 (sec-header-top border) ── */
    .sec-header-top {
      position: relative;
      clip-path: inset(0 100% 0 0);
      transition: clip-path 0.9s cubic-bezier(0.4,0,0.2,1);
    }
    .sec-header-top.line-on { clip-path: inset(0 0% 0 0); }

    /* ── 磁力ボタン ── */
    .mag-btn { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }

    /* ── sec-heroパラレックス ── */
    .sec-hero-text { will-change: transform; }

    /* ── カウントアップ数字 ── */
    .count-num { display: inline-block; }

    /* ── サービスメインホバーライン ── */
    .service-main::before {
      content: '';
      position: absolute;
      bottom: 0; left: 60px; right: 60px;
      height: 1px;
      background: var(--gold);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
    }
    .service-main:hover::before { transform: scaleX(1); }

    /* ── ページ入場 ── */
    body { opacity: 1; }

    /* =====================
       SERVICE
    ===================== */
    /* =====================
       セクション交互背景
    ===================== */
    /* 黒セクション (奇数) */
    #service, #news, #company, #contact, footer  { position: relative; z-index: 2; }
    #service  { background: #0a0a0a; border-radius: 20px 20px 0 0; padding-bottom: 0; }
    #philosophy { background: #0a0a0a; }
    #values   { background: #0a0a0a; }
    #company  { background: #f5f5f0; }

    /* 白セクション (偶数) — テキストを黒に上書き */
    #news, #mission, #vision { background: #f5f5f0; }
    #news .sec-label, #mission .sec-label, #vision .sec-label { color: #b8934a; }
    #news .sec-title, #mission .mission-en, #vision .sec-title { color: #111; }
    #news .news-title, #news .news-date { color: #111; }
    #news .news-tag { background: #c8a96e; color: #fff; }
    #news .news-tag.info { background: transparent; color: #999; border: 1px solid #ccc; }
    #news .news-tag.service { background: transparent; color: #b8934a; border: 1px solid #c8a96e; }
    #news .news-row { border-color: rgba(0,0,0,0.1); }
    #news .news-list .news-row:last-child { border-color: rgba(0,0,0,0.1); }
    #news .news-arr { border-color: rgba(0,0,0,0.15); color: rgba(0,0,0,0.35); }
    #news .news-row:hover .news-arr { background: #111; color: #fff; border-color: #111; }
    #news .news-more { color: #b8934a; border-color: rgba(184,147,74,0.4); }
    #news .news-more:hover { border-color: #b8934a; }
    #mission { color: #111; }
    #mission .mission-sub { color: #b8934a; }
    #mission .mission-desc { color: #333; }
    #mission::before { color: rgba(0,0,0,0.04); }
    #vision .vision-left .sub, #vision .vision-left p { color: #222; }
    #vision .circle-text { color: #b8934a; }
    #vision .circle-wrap::before, #vision .circle-wrap::after { border-color: rgba(184,147,74,0.3); }
    /* Company: 白背景 */
    #company { color: #111; }
    #company .sec-label { color: #b8934a; }
    #company .sht-outline { -webkit-text-stroke-color: rgba(0,0,0,0.07); }
    #company .sht-fill { color: #111; }
    #company .info-lbl { color: rgba(0,0,0,0.4); }
    #company .info-val { color: #111; }
    #company .info-row { border-color: rgba(0,0,0,0.08); }
    /* Contact: 黒背景 */
    #contact { background: #0a0a0a; }
    #contact .sec-title { color: var(--white); }
    #contact .contact-inner p { color: rgba(245,245,240,0.6); }


    /* メインサービス */
    .service-main {
      border-top: 1px solid rgba(200,169,110,0.15);
      padding: 80px 60px 72px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 0;
      cursor: default;
      background: var(--item-bg, #0a0a0a);
      transition: background 0.4s;
    }
    .service-main:hover { background: rgba(200,169,110,0.018); }
    .service-ghost {
      position: absolute;
      right: -10px; top: 50%;
      transform: translateY(-50%);
      font-family: var(--display);
      font-size: clamp(130px, 18vw, 220px);
      line-height: 1;
      color: rgba(200,169,110,0.045);
      letter-spacing: -0.03em;
      pointer-events: none; user-select: none;
      transition: color 0.4s;
    }
    .service-main:hover .service-ghost { color: rgba(200,169,110,0.08); }
    .service-main-meta {
      display: flex; align-items: center; gap: 20px; margin-bottom: 28px;
    }
    .service-main-num {
      font-family: var(--en); font-size: 10px; font-weight: 700;
      letter-spacing: 0.4em; color: var(--gold);
    }
    .service-badge {
      display: inline-flex; align-items: center;
      font-family: var(--en); font-size: 9px; font-weight: 700;
      letter-spacing: 0.28em; text-transform: uppercase;
      background: var(--gold); color: var(--black);
      padding: 4px 12px;
    }
    .service-main-title {
      font-family: var(--display);
      font-size: clamp(48px, 6.2vw, 96px);
      line-height: 0.95; color: var(--white);
      margin-bottom: 28px; letter-spacing: 0.01em;
      position: relative; z-index: 1;
      white-space: nowrap;
    }
    .service-main-bottom {
      display: flex; align-items: flex-end;
      justify-content: space-between; gap: 60px;
      position: relative; z-index: 1;
    }
    .service-main-desc {
      font-size: 15px; font-weight: 300; line-height: 2.1;
      color: var(--white); max-width: 520px;
    }
    .service-main-cta {
      flex-shrink: 0;
      display: inline-flex; align-items: center; gap: 14px;
      font-family: var(--en); font-size: 10px; font-weight: 700;
      letter-spacing: 0.28em; text-transform: uppercase;
      color: var(--gold); white-space: nowrap;
      transition: gap 0.3s;
    }
    .service-main-cta:hover { gap: 24px; }
    .service-main-cta .sv-cta-arrow { border-color: rgba(200,169,110,0.35); }
    .service-main-cta:hover .sv-cta-arrow { background: var(--gold); border-color: var(--gold); }
    .service-main-cta:hover .sv-cta-arrow svg { color: var(--black); }

    /* ── 縦動画スクロール ── */
    .drama-scroll-section {
      padding: 0 0 0 60px;
      margin-bottom: 0;
    }
    .drama-scroll-label {
      font-family: var(--en); font-size: 10px; font-weight: 700;
      letter-spacing: 0.38em; text-transform: uppercase;
      color: rgba(200,169,110,0.6); margin-bottom: 28px;
      padding-right: 60px;
      display: flex; align-items: center; justify-content: space-between;
    }
    .drama-scroll-hint {
      display: flex; align-items: center; gap: 8px;
      font-size: 10px; letter-spacing: 0.12em; color: rgba(245,245,240,0.25);
    }
    .drama-scroll-hint svg { opacity: 0.4; }
    .drama-track-wrap {
      overflow-x: auto; overflow-y: hidden;
      cursor: grab;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 48px;
      max-width: 100%;
    }
    .drama-track-wrap::-webkit-scrollbar { display: none; }
    .drama-track-wrap.dragging { cursor: grabbing; }
    .drama-track {
      display: flex; gap: 16px;
      width: max-content;
      padding-right: 60px;
    }
    .drama-card {
      position: relative;
      width: 220px; flex-shrink: 0;
      aspect-ratio: 9/16;
      background: #111; overflow: hidden;
      border-radius: 4px;
      transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
    }
    .drama-card:hover { transform: scale(1.025); }
    .drama-card img {
      width: 100%; height: 100%; object-fit: cover;
      display: block; transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
    }
    .drama-card:hover img { transform: scale(1.06); }
    .drama-card-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.75) 35%, transparent 65%);
    }
    .drama-play {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 52px; height: 52px;
      border: 1.5px solid rgba(245,245,240,0.6); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.3s, border-color 0.3s, transform 0.3s;
    }
    .drama-card:hover .drama-play {
      background: var(--gold); border-color: var(--gold); transform: translate(-50%,-50%) scale(1.1);
    }
    .drama-play svg { width: 18px; height: 18px; color: #fff; margin-left: 3px; }
    .drama-card-info {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 20px 16px 18px;
    }
    .drama-card-tag {
      font-family: var(--en); font-size: 9px; font-weight: 700;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 6px; display: block;
    }
    .drama-card-title {
      font-size: 13px; font-weight: 500; color: #fff;
      line-height: 1.55; letter-spacing: 0.03em;
    }

    /* サブサービス — editorial list */
    .service-subs { border-bottom: 1px solid rgba(200,169,110,0.1); }
    .service-sub {
      border-top: 1px solid rgba(200,169,110,0.12);
      padding: 52px 60px;
      display: grid;
      grid-template-columns: 180px 1fr auto;
      gap: 0 60px;
      align-items: center;
      position: relative; overflow: hidden;
      transition: background 0.4s, color 0.4s;
      cursor: pointer;
    }
    .service-sub:hover { background: #f5f5f0; }
    .sub-num {
      font-family: var(--display);
      font-size: clamp(80px, 9vw, 128px);
      line-height: 1;
      color: rgba(200,169,110,0.55);
      letter-spacing: -0.03em;
      transition: color 0.4s;
    }
    .service-sub:hover .sub-num { color: rgba(0,0,0,0.08); }
    .sub-content { display: flex; flex-direction: column; gap: 12px; }
    .sub-title {
      font-family: var(--display);
      font-size: clamp(28px, 3.2vw, 46px);
      line-height: 1.1; color: var(--white);
      letter-spacing: 0.01em;
      transition: color 0.4s;
    }
    .service-sub:hover .sub-title { color: #111; }
    .sub-desc { font-size: 14px; font-weight: 300; line-height: 2; color: var(--white); max-width: 480px; transition: color 0.4s; }
    .service-sub:hover .sub-desc { color: rgba(0,0,0,0.6); }
    .sub-arr {
      width: 52px; height: 52px; flex-shrink: 0;
      border: 1px solid rgba(200,169,110,0.3);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: rgba(200,169,110,0.6);
      transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
    }
    .service-sub:hover .sub-arr { background: #111; color: #fff; border-color: #111; transform: rotate(45deg); }

    /* =====================
       NEWS
    ===================== */
    .news-more {
      font-family: var(--en); font-size: 10px; font-weight: 700;
      letter-spacing: 0.3em; text-transform: uppercase;
      color: var(--gold); display: inline-flex; align-items: center; gap: 12px;
      border-bottom: 1px solid rgba(200,169,110,0.3); padding-bottom: 4px;
      transition: gap 0.3s, border-color 0.3s; align-self: flex-end;
    }
    .news-more::after { content: '→'; }
    .news-more:hover { gap: 20px; border-color: var(--gold); }
    .news-list { display: flex; flex-direction: column; }
    .news-row {
      display: grid; grid-template-columns: 140px 1fr auto;
      gap: 0 52px; align-items: center;
      padding: 32px 0;
      border-top: 1px solid rgba(200,169,110,0.08);
      position: relative; cursor: default;
      transition: background 0.25s;
    }
    .news-list .news-row:last-child { border-bottom: 1px solid rgba(200,169,110,0.08); }
    .news-row:hover { background: rgba(200,169,110,0.02); }
    .news-meta { display: flex; flex-direction: column; gap: 8px; }
    .news-date { font-family: var(--en); font-size: 11px; color: rgba(245,245,240,0.4); letter-spacing: 0.12em; }
    .news-tag {
      display: inline-block; align-self: flex-start;
      font-family: var(--en); font-size: 9px; font-weight: 700;
      letter-spacing: 0.2em; text-transform: uppercase;
      background: var(--gold); color: var(--black); padding: 3px 10px;
    }
    .news-tag.info { background: transparent; color: rgba(245,245,240,0.35); border: 1px solid rgba(245,245,240,0.15); }
    .news-tag.service { background: transparent; color: var(--gold); border: 1px solid rgba(200,169,110,0.3); }
    .news-title {
      font-family: var(--ja); font-size: 17px; font-weight: 400;
      color: var(--white); line-height: 1.7;
      transition: letter-spacing 0.3s;
    }
    .news-row:hover .news-title { letter-spacing: 0.02em; }
    .news-arr {
      width: 44px; height: 44px; flex-shrink: 0;
      border: 1px solid rgba(200,169,110,0.15);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: rgba(200,169,110,0.4);
      transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
    }
    .news-row:hover .news-arr { background: var(--gold); color: var(--black); border-color: var(--gold); transform: rotate(45deg); }

    /* =====================
       PHILOSOPHY
    ===================== */
    
    .phil-inner {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 100px; align-items: start;
    }
    .phil-left .ja {
      font-size: clamp(13px,1.4vw,17px); font-weight: 300; letter-spacing: 0.22em;
      color: var(--gold); margin-bottom: 32px; display: block;
    }
    .phil-left p {
      font-size: 16px; font-weight: 300; line-height: 2.3; color: var(--white);
      border-left: 1px solid var(--gold); padding-left: 24px;
    }
    /* MVV — editorial list */
    .phil-right { display: flex; flex-direction: column; }
    .mvv {
      padding: 32px 0;
      border-top: 1px solid rgba(200,169,110,0.1);
      display: grid; grid-template-columns: 90px 1fr;
      gap: 0 28px; align-items: start;
      position: relative; cursor: default;
      transition: background 0.3s;
    }
    .mvv:last-child { border-bottom: 1px solid rgba(200,169,110,0.1); }
    .mvv:hover { background: rgba(200,169,110,0.02); }
    .mvv-lbl {
      font-family: var(--en); font-size: 9px; font-weight: 700;
      letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold);
      padding-top: 8px;
    }
    .mvv-body {}
    .mvv-en {
      font-family: var(--display); font-size: clamp(28px,3vw,44px);
      letter-spacing: 0.02em; color: var(--white); line-height: 1.1; margin-bottom: 10px;
    }
    .mvv-ja { font-size: 13px; font-weight: 300; letter-spacing: 0.08em; color: var(--white); }

    /* =====================
       MISSION
    ===================== */
    #mission { position: relative; overflow: hidden; text-align: center; }
    #mission::before {
      content: 'MOVE'; position: absolute;
      font-family: var(--display); font-size: clamp(120px,18vw,260px);
      color: rgba(200,169,110,0.04);
      top: 50%; left: 50%; transform: translate(-50%,-50%);
      pointer-events: none; user-select: none; white-space: nowrap;
    }
    .mission-inner { position: relative; z-index: 1; }
    .mission-en { font-family: var(--display); font-size: clamp(72px,11vw,168px); line-height: 1; color: var(--white); margin-bottom: 14px; }
    .mission-sub { font-size: 15px; font-weight: 300; letter-spacing: 0.2em; color: var(--gold); margin-bottom: 52px; }
    .mission-desc { font-size: clamp(13px,1.3vw,16px); font-weight: 300; line-height: 2.2; color: var(--white); max-width: 520px; margin: 0 auto; }

    /* =====================
       VALUES
    ===================== */
    
    .values-list { border-bottom: 1px solid rgba(200,169,110,0.1); }
    .val-item {
      border-top: 1px solid rgba(200,169,110,0.1);
      padding: 60px 0;
      display: grid;
      grid-template-columns: 160px 1fr 1fr auto;
      gap: 0 60px;
      align-items: center;
      cursor: default;
      transition: background 0.4s;
      position: relative; overflow: hidden;
    }
    .val-item:hover { background: rgba(200,169,110,0.02); }
    .val-num {
      font-family: var(--display);
      font-size: clamp(88px, 9vw, 128px);
      line-height: 1;
      color: rgba(200,169,110,0.55);
      letter-spacing: -0.03em;
      transition: color 0.4s;
    }
    .val-item:hover .val-num { color: rgba(200,169,110,0.25); }
    .val-tagline {
      font-family: var(--display);
      font-size: clamp(22px, 2.8vw, 38px);
      line-height: 1.2; color: var(--white);
      letter-spacing: 0.01em;
    }
    .val-desc { font-size: 14px; font-weight: 300; line-height: 2; color: var(--white); }
    .val-en {
      font-family: var(--en); font-size: 9px; font-weight: 700;
      letter-spacing: 0.3em; text-transform: uppercase;
      color: var(--gold);
      writing-mode: vertical-rl; text-orientation: mixed;
      transform: rotate(180deg);
      align-self: center;
    }

    /* =====================
       VISION
    ===================== */
    
    .vision-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
    .vision-left .sub { font-size: 14px; font-weight: 300; letter-spacing: 0.1em; color: var(--white); margin-bottom: 36px; }
    .vision-left p { font-size: 15px; font-weight: 300; line-height: 2.2; color: var(--white); }
    .vision-right { display: flex; align-items: center; justify-content: center; height: 380px; }
    .circle-wrap { width: 280px; height: 280px; position: relative; display: flex; align-items: center; justify-content: center; animation: spin 22s linear infinite; }
    .circle-wrap::before, .circle-wrap::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid rgba(200,169,110,0.2); }
    .circle-wrap::before { inset: 0; }
    .circle-wrap::after { inset: 28px; border-color: rgba(200,169,110,0.1); }
    .circle-text { font-family: var(--display); font-size: 26px; color: var(--gold); text-align: center; line-height: 1.3; animation: spin-rev 22s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes spin-rev { to { transform: rotate(-360deg); } }

    /* =====================
       COMPANY
    ===================== */
    
    .company-inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
    .info-table { margin-top: 40px; }
    .info-row { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid rgba(200,169,110,0.1); }
    .info-row:first-child { border-top: 1px solid rgba(200,169,110,0.1); }
    .info-lbl { font-family: var(--en); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); padding-top: 2px; }
    .info-val { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--white); }
    .map-box { border: 1px solid rgba(200,169,110,0.14); overflow: hidden; height: 360px; position: relative; }
    .map-box iframe { width: 100%; height: 100%; border: none; filter: grayscale(100%) invert(90%) contrast(0.8); }
    .map-box::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(200,169,110,0.14); pointer-events: none; }

    /* =====================
       CONTACT
    ===================== */
    /* ── CONTACT FORM ── */
    #contact { text-align: left; }
    .contact-layout {
      display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
    }
    .contact-lead { }
    .contact-lead-label {
      font-family: var(--en); font-size: 10px; font-weight: 700;
      letter-spacing: 0.42em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 24px; display: block;
    }
    .contact-lead-title {
      font-family: var(--display); font-size: clamp(36px, 4vw, 56px);
      line-height: 1.05; color: var(--white); margin-bottom: 28px;
    }
    .contact-lead-desc {
      font-size: 14px; font-weight: 300; line-height: 2.6;
      color: rgba(245,245,240,0.55); margin-bottom: 48px;
    }
    .contact-info-list { display: flex; flex-direction: column; gap: 20px; }
    .contact-info-item {
      display: flex; align-items: center; gap: 16px;
      font-size: 13px; font-weight: 300; color: rgba(245,245,240,0.5);
      letter-spacing: 0.06em;
    }
    .contact-info-item strong {
      font-family: var(--en); font-size: 9px; font-weight: 700;
      letter-spacing: 0.28em; text-transform: uppercase;
      color: var(--gold); min-width: 72px;
    }

    /* form */
    .contact-form { display: flex; flex-direction: column; gap: 0; }
    .form-group { position: relative; border-bottom: 1px solid rgba(245,245,240,0.12); padding: 8px 0 0; margin-bottom: 28px; transition: border-color 0.3s; }
    .form-group:focus-within { border-bottom-color: var(--gold); }
    .form-label {
      font-family: var(--en); font-size: 9px; font-weight: 700;
      letter-spacing: 0.32em; text-transform: uppercase;
      color: rgba(245,245,240,0.35); display: block; margin-bottom: 10px;
      transition: color 0.3s;
    }
    .form-group:focus-within .form-label { color: var(--gold); }
    .form-label span { color: var(--gold); margin-left: 2px; }
    .form-input, .form-select, .form-textarea {
      width: 100%; background: none; border: none; outline: none;
      font-family: var(--ja); font-size: 14px; font-weight: 300;
      color: var(--white); padding: 0 0 14px; line-height: 1.6;
    }
    .form-select { cursor: pointer; appearance: none; -webkit-appearance: none; }
    .form-select option { background: #111; color: #fff; }
    .form-select-wrap { position: relative; }
    .form-select-wrap::after {
      content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
      width: 8px; height: 8px; border-right: 1px solid rgba(245,245,240,0.4);
      border-bottom: 1px solid rgba(245,245,240,0.4); transform: translateY(-70%) rotate(45deg);
      pointer-events: none;
    }
    .form-textarea { resize: none; height: 100px; }
    .form-input::placeholder, .form-textarea::placeholder { color: rgba(245,245,240,0.2); font-size: 13px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
    .form-submit-wrap { margin-top: 12px; display: flex; align-items: center; gap: 28px; }
    .form-submit {
      font-family: var(--en); font-size: 11px; font-weight: 700;
      letter-spacing: 0.28em; text-transform: uppercase;
      color: var(--black); background: var(--gold);
      border: none; cursor: pointer;
      padding: 18px 52px; transition: background 0.25s, gap 0.3s;
      display: inline-flex; align-items: center; gap: 14px;
    }
    .form-submit:hover { background: #e8d5a3; gap: 20px; }
    .form-note { font-size: 11px; font-weight: 300; color: rgba(245,245,240,0.3); letter-spacing: 0.06em; line-height: 1.8; }
    /* success */
    .form-success {
      display: none; text-align: center; padding: 60px 0;
    }
    .form-success-icon { font-size: 40px; margin-bottom: 20px; }
    .form-success h3 { font-family: var(--display); font-size: 36px; color: var(--gold); margin-bottom: 12px; }
    .form-success p { font-size: 14px; font-weight: 300; color: rgba(245,245,240,0.6); line-height: 2; }

    /* =====================
       FOOTER
    ===================== */
    footer {
      background: #040404;
      padding: 52px 60px;
      display: flex; justify-content: space-between; align-items: center;
      border-top: 1px solid rgba(200,169,110,0.1);
    }
    .footer-logo img { height: 22px; width: auto; opacity: 0.8; }
    .footer-tagline { font-size: 11px; font-weight: 300; letter-spacing: 0.14em; color: var(--muted); margin-top: 6px; }
    .footer-links { display: flex; gap: 28px; }
    .footer-links a { font-family: var(--en); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); transition: color 0.2s; }
    .footer-links a:hover { color: var(--gold); }
    .footer-copy { font-family: var(--en); font-size: 10px; color: var(--muted); letter-spacing: 0.08em; }

    /* =====================
       CURSOR
    ===================== */
    body { cursor: none; }
    #cursor {
      position: fixed; width: 7px; height: 7px;
      background: var(--gold); border-radius: 50%;
      pointer-events: none; z-index: 9999;
      transform: translate(-50%,-50%);
      transition: width 0.2s, height 0.2s;
    }
    #cursor-ring {
      position: fixed; width: 36px; height: 36px;
      border: 1px solid rgba(200,169,110,0.5); border-radius: 50%;
      pointer-events: none; z-index: 9998;
      transform: translate(-50%,-50%);

    }

    /* =====================
       RESPONSIVE
    ===================== */
    @media (max-width: 1100px) {
      .service-sub { grid-template-columns: 120px 1fr auto; gap: 0 36px; }
      .val-item { grid-template-columns: 100px 1fr 1fr auto; gap: 0 36px; }
    }
    @media (max-width: 900px) {
      #site-nav { padding: 0 24px; height: 60px; }
      .nav-menu, .nav-cta { display: none; }
      .svc-nav { top: 60px; }
      .section { padding: 0 0 80px; }
      .sec-hero { padding: 60px 0 0; }
      .sec-hero-text { padding: 0 24px; }
      .sec-hero-text::after { padding: 0 24px; }
      .inner { padding: 0 24px; }
      footer { flex-direction: column; gap: 20px; text-align: center; padding: 40px 24px; }
      .footer-links { display: none; }
      .phil-inner, .vision-inner, .company-inner { grid-template-columns: 1fr; gap: 52px; }
      .service-sub { grid-template-columns: 80px 1fr; }
      .sub-arr { display: none; }
      .val-item { grid-template-columns: 72px 1fr; gap: 0 24px; }
      .val-en { display: none; }
      .news-row { grid-template-columns: 140px 1fr; gap: 0 24px; }
      .news-arr { display: none; }
      .sec-title { font-size: clamp(56px, 14vw, 100px); }
      .service-main { padding: 60px 24px; }
      .service-sub { padding: 40px 24px; }
      #mute-btn { bottom: 20px; right: 20px; }

      .sht-outline, .sht-fill {
        font-size: clamp(48px, 13vw, 100px);
      }
      .drama-scroll-section { padding-left: 24px; }

      /* ── HERO 幅固定 ── */
      #hero { max-width: 100%; overflow: hidden; }

      /* ── SECOND VIEW ── */
      .sv-en { font-size: clamp(32px, 9.5vw, 72px); }
      #second-view { overflow-x: clip; }
      .service-ghost { font-size: clamp(48px, 16vw, 100px); right: 0; }
      .service-main { overflow: hidden; }

      /* ── SERVICE ── */
      .service-main-title { font-size: clamp(28px, 8.5vw, 52px); white-space: nowrap; }
      .service-main-desc { font-size: 13px; line-height: 2; }
      .service-main-desc br { display: none; }
      .service-ghost { font-size: clamp(60px, 22vw, 120px); }
      .service-main-bottom { flex-direction: column; gap: 28px; align-items: flex-start; }

      /* ── CONTACT ── */
      .contact-layout { grid-template-columns: 1fr; gap: 48px; }
      .contact-lead-title { font-size: clamp(28px, 8vw, 44px); }
      .contact-lead-desc { font-size: 13px; }
      .contact-lead-desc br { display: none; }
      .form-row { grid-template-columns: 1fr; gap: 0; }
      .form-submit-wrap { flex-direction: column; align-items: flex-start; gap: 16px; }
    }
  
/* ===== SERVICE PAGE ===== */

    /* ── RESET ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { background: #080808; color: #f5f5f0; font-family: 'Noto Sans JP', sans-serif; overflow-x: clip; }
    a { text-decoration: none; }
    ul { list-style: none; }
    img { display: block; width: 100%; }

    :root {
      --gold: #c8a96e;
      --gold2: #e8d5a3;
      --black: #080808;
      --white: #f5f5f0;
      --gray: #1a1a1a;
      --muted: #888;
      --en: 'Inter', sans-serif;
      --ja: 'Noto Sans JP', sans-serif;
      --display: 'Bebas Neue', sans-serif;
    }

    /* ── NAV ── */
    #site-header {
      position: fixed; top: 0; left: 0; right: 0; z-index: 999;
      transition: background 0.4s;
    }
    #site-header.scrolled {
      background: rgba(8,8,8,0.95);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(200,169,110,0.15);
    }
    #site-nav {
      display: flex; align-items: center; height: 80px; padding: 0 60px;
    }
    .nav-logo { flex-shrink: 0; margin-right: auto; }
    .nav-logo img { height: 22px; width: auto; opacity: 0.88; transition: opacity 0.3s; }
    .nav-logo:hover img { opacity: 1; }
    .nav-menu { display: flex; align-items: center; gap: 4px; margin-right: auto; }
    .nav-menu li { position: relative; }
    .nav-menu a {
      font-family: var(--en); font-size: 11px; font-weight: 500;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: rgba(245,245,240,0.72); padding: 10px 14px;
      display: flex; align-items: center; gap: 4px;
      overflow: hidden; height: 36px; align-items: flex-start;
      transition: color 0.2s;
    }
    .nav-menu a:hover { color: var(--gold); }
    .nav-cta {
      flex-shrink: 0; font-family: var(--en); font-size: 11px; font-weight: 600;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--black); background: var(--gold); padding: 10px 22px;
      transition: background 0.25s;
    }
    .nav-cta:hover { background: var(--gold2); }
    .nav-active { color: var(--gold) !important; }

    /* ── CURSOR ── */
    #cursor { position: fixed; width: 7px; height: 7px; background: var(--gold); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); }
    #cursor-ring { position: fixed; width: 36px; height: 36px; border: 1px solid rgba(200,169,110,0.5); border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%,-50%); transition: width 0.4s, height 0.4s; }

    /* ── REVEAL ── */
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.85s cubic-bezier(0.4,0,0.2,1), transform 0.85s cubic-bezier(0.4,0,0.2,1); }
    .reveal.on { opacity: 1; transform: none; }

    /* ── PAGE HERO ── */
    #page-hero {
      position: relative; width: 100%; min-height: 60vh;
      background: #080808; overflow: hidden;
      display: flex; flex-direction: column; justify-content: flex-end;
      padding-bottom: 80px;
    }
    .ph-bg {
      position: absolute; inset: 0;
      background: url('service.png') center/cover no-repeat;
      opacity: 0.35;
    }
    .ph-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, #080808 30%, transparent);
    }
    .ph-inner {
      position: relative; z-index: 1;
      padding: 0 60px;
    }
    .ph-label {
      font-family: var(--en); font-size: 10px; font-weight: 700;
      letter-spacing: 0.45em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 20px;
      display: flex; align-items: center; gap: 16px;
    }
    .ph-label::before { content: ''; display: block; width: 36px; height: 1px; background: var(--gold); opacity: 0.5; }
    .ph-title {
      font-family: var(--display);
      font-size: clamp(80px, 12vw, 160px);
      line-height: 0.9; color: var(--white);
      letter-spacing: 0.01em;
    }
    .ph-sub {
      font-size: 14px; font-weight: 300; letter-spacing: 0.12em;
      color: rgba(245,245,240,0.55); margin-top: 20px;
    }

    /* ── SERVICE NAV (sticky side tabs) ── */
    .svc-nav {
      position: sticky; top: 80px; z-index: 100;
      background: rgba(8,8,8,0.92); backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(200,169,110,0.12);
    }
    .svc-nav-inner {
      max-width: 1200px; margin: 0 auto; padding: 0 60px;
      display: flex; gap: 0;
    }
    .svc-nav-item {
      font-family: var(--en); font-size: 10px; font-weight: 700;
      letter-spacing: 0.3em; text-transform: uppercase;
      color: rgba(245,245,240,0.4); padding: 18px 28px;
      display: flex; align-items: center; gap: 10px;
      border-bottom: 2px solid transparent;
      transition: color 0.25s, border-color 0.25s;
      cursor: pointer;
    }
    .svc-nav-item:hover, .svc-nav-item.active {
      color: var(--gold); border-bottom-color: var(--gold);
    }
    .svc-nav-num {
      font-size: 9px; color: rgba(200,169,110,0.5);
    }

    /* ── SECTION BASE ── */
    .svc-section { padding: 140px 0; }
    .svc-section.dark { background: #080808; }
    .svc-section.light { background: #f5f5f0; color: #111; }
    .inner { max-width: 1200px; margin: 0 auto; padding: 0 60px; }

    /* ── SECTION HERO TEXT ── */
    .sec-hero {
      width: 100%; overflow: hidden;
      padding: 0 0 20px; pointer-events: none; user-select: none;
    }
    .sec-hero-text { display: block; position: relative; padding: 0 60px; line-height: 1; }
    .sht-outline {
      display: block; font-family: var(--display);
      font-size: clamp(60px, 9vw, 120px); line-height: 0.9; /* TOPページと統一 */
      letter-spacing: -0.01em; color: transparent;
      -webkit-text-stroke: 1.5px rgba(245,245,240,0.1);
    }
    .svc-section.light .sht-outline { -webkit-text-stroke-color: rgba(0,0,0,0.08); }
    .sht-fill {
      position: absolute; top: 0; left: 0; right: 0; padding: 0 60px;
      font-family: var(--display);
      font-size: clamp(60px, 9vw, 120px); line-height: 0.9; /* TOPページと統一 */
      letter-spacing: -0.01em; color: var(--white);
      clip-path: inset(0 100% 0 0);
      transition: clip-path 1.1s cubic-bezier(0.4,0,0.2,1);
    }
    .svc-section.light .sht-fill { color: #111; }
    .sec-hero-text.hero-active .sht-fill { clip-path: inset(0 0% 0 0); }

    /* ── SERVICE CONTENT LAYOUT ── */
    .svc-meta {
      display: flex; align-items: center; gap: 20px;
      margin-bottom: 32px;
    }
    .svc-num {
      font-family: var(--en); font-size: 10px; font-weight: 700;
      letter-spacing: 0.4em; color: var(--gold);
    }
    .svc-badge {
      font-family: var(--en); font-size: 9px; font-weight: 700;
      letter-spacing: 0.28em; text-transform: uppercase;
      background: var(--gold); color: var(--black); padding: 4px 12px;
    }
    .svc-title {
      font-family: var(--display);
      font-size: clamp(48px, 6.2vw, 96px); /* TOPページ .service-main-title と統一 */
      line-height: 0.95; color: var(--white);
      letter-spacing: 0.01em; margin-bottom: 28px;
    }
    .svc-section.light .svc-title { color: #111; }
    .svc-lead {
      font-size: clamp(15px, 1.6vw, 20px); font-weight: 300; line-height: 2.4;
      color: rgba(245,245,240,0.85); max-width: 640px; margin-bottom: 56px;
    }
    .svc-section.light .svc-lead { color: rgba(0,0,0,0.7); }

    /* ── DRAMA SCROLL (service page) ── */
    .svc-drama-scroll { overflow: hidden; margin-bottom: 80px; }
    .svc-drama-label {
      font-family: var(--en); font-size: 10px; font-weight: 700;
      letter-spacing: 0.38em; text-transform: uppercase;
      color: rgba(200,169,110,0.6); margin-bottom: 24px;
      display: flex; align-items: center; justify-content: space-between;
    }
    .svc-drama-hint { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 0.12em; color: rgba(245,245,240,0.25); }
    .svc-drama-track-wrap {
      overflow-x: auto; cursor: grab; scrollbar-width: none;
      -webkit-overflow-scrolling: touch; padding-bottom: 8px;
      margin: 0 -60px; padding-left: 60px;
    }
    .svc-drama-track-wrap::-webkit-scrollbar { display: none; }
    .svc-drama-track-wrap.dragging { cursor: grabbing; }
    .svc-drama-track { display: flex; gap: 16px; width: max-content; padding-right: 60px; }
    .svc-drama-card {
      position: relative; width: 240px; flex-shrink: 0;
      aspect-ratio: 9/16; overflow: hidden; border-radius: 4px; background: #111;
      transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
    }
    .svc-drama-card:hover { transform: scale(1.025); }
    .svc-drama-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); }
    .svc-drama-card:hover img { transform: scale(1.06); }
    .svc-drama-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 30%, transparent 65%); }
    .svc-drama-play {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
      width: 56px; height: 56px; border: 1.5px solid rgba(245,245,240,0.65);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      transition: background 0.3s, border-color 0.3s, transform 0.3s;
    }
    .svc-drama-card:hover .svc-drama-play { background: var(--gold); border-color: var(--gold); transform: translate(-50%,-50%) scale(1.1); }
    .svc-drama-play svg { width: 20px; height: 20px; color: #fff; margin-left: 3px; }
    .svc-drama-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 22px 18px 20px; }
    .svc-drama-tag { font-family: var(--en); font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; display: block; }
    .svc-drama-title { font-size: 13px; font-weight: 500; color: #fff; line-height: 1.55; letter-spacing: 0.03em; }

    /* ── MAIN IMAGE ── */
    .img-main {
      width: 100%; aspect-ratio: 16/7; overflow: hidden;
      margin-bottom: 80px; position: relative;
    }
    .img-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.4,0,0.2,1); }
    .img-main:hover img { transform: scale(1.03); }
    .img-placeholder {
      width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
      background: var(--gray);
      font-family: var(--en); font-size: 11px; font-weight: 700;
      letter-spacing: 0.3em; color: rgba(200,169,110,0.3); text-transform: uppercase;
    }

    /* ── SPLIT LAYOUT ── */
    .split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
    .split.reverse { direction: rtl; }
    .split.reverse > * { direction: ltr; }
    .split-img {
      aspect-ratio: 4/5; overflow: hidden; position: relative;
    }
    .split-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.4,0,0.2,1); }
    .split-img:hover img { transform: scale(1.04); }
    .split-img .img-num {
      position: absolute; top: 24px; left: 24px;
      font-family: var(--display); font-size: 52px; line-height: 1;
      color: rgba(200,169,110,0.35); pointer-events: none;
    }
    .split-content { padding-top: 20px; }

    /* ── FEATURE LIST ── */
    .feature-list { margin-bottom: 52px; }
    .feature-item {
      border-top: 1px solid rgba(200,169,110,0.15);
      padding: 20px 0; display: flex; gap: 0; align-items: flex-start;
    }
    .svc-section.light .feature-item { border-top-color: rgba(0,0,0,0.1); }
    .feature-item:last-child { border-bottom: 1px solid rgba(200,169,110,0.15); }
    .svc-section.light .feature-item:last-child { border-bottom-color: rgba(0,0,0,0.1); }
    .fi-icon { display: none; }
    .svc-section.light .fi-icon { display: none; }
    .fi-body {}
    .fi-title {
      font-family: var(--en); font-size: 11px; font-weight: 700;
      letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
      margin-bottom: 6px;
    }
    .svc-section.light .fi-title { color: #b8934a; }
    .fi-desc { font-size: 14px; font-weight: 300; line-height: 2; color: rgba(245,245,240,0.7); }
    .svc-section.light .fi-desc { color: rgba(0,0,0,0.6); }

    /* ── PROCESS FLOW ── */
    .process-title {
      font-family: var(--en); font-size: 10px; font-weight: 700;
      letter-spacing: 0.42em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 40px;
      display: flex; align-items: center; gap: 16px;
    }
    .svc-section.light .process-title { color: #b8934a; }
    .process-title::after { content: ''; flex: 1; height: 1px; background: rgba(200,169,110,0.15); }
    .svc-section.light .process-title::after { background: rgba(0,0,0,0.08); }
    .process-steps {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
      margin-bottom: 80px;
    }
    .process-step {
      padding: 32px 28px 32px 0; position: relative;
    }
    .process-step:not(:last-child)::after {
      content: '→';
      position: absolute; right: -4px; top: 50%;
      transform: translateY(-50%);
      color: var(--gold); font-size: 16px; opacity: 0.4;
    }
    .ps-num {
      font-family: var(--display); font-size: 52px; line-height: 1;
      color: rgba(200,169,110,0.6); margin-bottom: 12px;
    }
    .ps-label {
      font-family: var(--en); font-size: 11px; font-weight: 700;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--white); margin-bottom: 8px;
    }
    .svc-section.light .ps-label { color: #111; }
    .ps-desc { font-size: 13px; font-weight: 300; line-height: 2; color: var(--muted); }
    .svc-section.light .ps-desc { color: rgba(0,0,0,0.5); }

    /* ── IMAGE GRID ── */
    .img-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 80px; }
    .img-grid-item { aspect-ratio: 4/3; overflow: hidden; position: relative; }
    .img-grid-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); }
    .img-grid-item:hover img { transform: scale(1.06); }
    .img-grid-item:first-child { grid-column: span 2; aspect-ratio: 16/7; }

    /* ── 2-COL IMG ── */
    .img-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 80px; }
    .img-pair-item { aspect-ratio: 3/2; overflow: hidden; }
    .img-pair-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); }
    .img-pair-item:hover img { transform: scale(1.05); }

    /* ── SNS SAMPLES ── */
    .sns-samples { display: flex; flex-direction: column; gap: 48px; margin-bottom: 80px; }
    .sns-platform-block {}
    .sns-platform-label {
      display: flex; align-items: center; gap: 8px;
      font-family: var(--en); font-size: 10px; font-weight: 700;
      letter-spacing: 0.28em; text-transform: uppercase;
      color: rgba(200,169,110,0.7); margin-bottom: 16px;
    }
    .sns-insta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .sns-insta-item { aspect-ratio: 1/1; overflow: hidden; border-radius: 2px; background: #1a1a1a; }
    .sns-insta-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.4,0,0.2,1); }
    .sns-insta-item:hover img { transform: scale(1.05); }
    .sns-x-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .sns-x-item { aspect-ratio: 16/9; overflow: hidden; border-radius: 2px; background: #1a1a1a; }
    .sns-x-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.4,0,0.2,1); }
    .sns-x-item:hover img { transform: scale(1.05); }
    .sns-tiktok-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .sns-tiktok-item { aspect-ratio: 9/16; overflow: hidden; border-radius: 2px; background: #1a1a1a; }
    .sns-tiktok-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.4,0,0.2,1); }
    .sns-tiktok-item:hover img { transform: scale(1.05); }

    /* ── PARTNER LOGOS ── */
    .partner-logo-card {
      background: #fff; border-radius: 4px;
      padding: 28px 36px; display: flex; align-items: center; justify-content: center;
      transition: opacity 0.3s;
    }
    .partner-logo-card:hover { opacity: 0.85; }
    .partner-logo-card img { width: 100%; height: auto; max-height: 64px; object-fit: contain; display: block; }

    /* ── DIVIDER ── */
    .divider {
      width: 100%; height: 1px;
      background: linear-gradient(to right, transparent, rgba(200,169,110,0.2), transparent);
      margin: 0;
    }
    .svc-section.light .divider { background: linear-gradient(to right, transparent, rgba(0,0,0,0.1), transparent); }

    /* ── NUMBERS BLOCK ── */
    .nums-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 80px; }
    .num-block { border-top: 1px solid rgba(200,169,110,0.2); padding-top: 24px; }
    .svc-section.light .num-block { border-top-color: rgba(0,0,0,0.1); }
    .num-value {
      font-family: var(--display);
      font-size: clamp(48px, 6vw, 80px);
      line-height: 1; color: var(--gold);
      letter-spacing: 0.01em; margin-bottom: 8px;
    }
    .num-label { font-size: 13px; font-weight: 300; color: rgba(245,245,240,0.6); }
    .svc-section.light .num-label { color: rgba(0,0,0,0.5); }

    /* ── CTA LINK ── */
    .svc-cta {
      display: inline-flex; align-items: center; gap: 14px;
      font-family: var(--en); font-size: 11px; font-weight: 700;
      letter-spacing: 0.25em; text-transform: uppercase;
      color: var(--gold); transition: gap 0.3s;
      margin-top: 8px;
    }
    .svc-cta:hover { gap: 24px; }
    .svc-cta-arrow {
      width: 36px; height: 36px; border-radius: 50%;
      border: 1px solid rgba(200,169,110,0.35);
      display: flex; align-items: center; justify-content: center;
      transition: background 0.3s, border-color 0.3s;
    }
    .svc-cta:hover .svc-cta-arrow { background: var(--gold); border-color: var(--gold); }
    .svc-cta:hover .svc-cta-arrow svg { color: var(--black); }
    .svc-cta-arrow svg { width: 12px; height: 12px; color: var(--gold); }
    .svc-section.light .svc-cta { color: #b8934a; }
    .svc-section.light .svc-cta-arrow { border-color: rgba(0,0,0,0.2); }
    .svc-section.light .svc-cta-arrow svg { color: #b8934a; }
    .svc-section.light .svc-cta:hover .svc-cta-arrow { background: #b8934a; border-color: #b8934a; }
    .svc-section.light .svc-cta:hover .svc-cta-arrow svg { color: #fff; }

    /* ── CONTACT SECTION ── */
    #contact { background: #0a0a0a; color: var(--white); padding: 140px 0; text-align: left; border-top: 1px solid rgba(200,169,110,0.1); }
    .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
    .contact-lead-label { font-family: var(--en); font-size: 10px; font-weight: 700; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; display: block; }
    .contact-lead-title { font-family: var(--display); font-size: clamp(36px, 4vw, 56px); line-height: 1.05; color: var(--white); margin-bottom: 28px; }
    .contact-lead-desc { font-size: 14px; font-weight: 300; line-height: 2.6; color: rgba(245,245,240,0.55); margin-bottom: 48px; }
    .contact-info-list { display: flex; flex-direction: column; gap: 20px; }
    .contact-info-item { display: flex; align-items: center; gap: 16px; font-size: 13px; font-weight: 300; color: rgba(245,245,240,0.5); letter-spacing: 0.06em; }
    .contact-info-item strong { font-family: var(--en); font-size: 9px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); min-width: 72px; }
    .contact-form { display: flex; flex-direction: column; gap: 0; }
    .form-group { position: relative; border-bottom: 1px solid rgba(245,245,240,0.12); padding: 8px 0 0; margin-bottom: 28px; transition: border-color 0.3s; }
    .form-group:focus-within { border-bottom-color: var(--gold); }
    .form-label { font-family: var(--en); font-size: 9px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(245,245,240,0.35); display: block; margin-bottom: 10px; transition: color 0.3s; }
    .form-group:focus-within .form-label { color: var(--gold); }
    .form-label span { color: var(--gold); margin-left: 2px; }
    .form-input, .form-select, .form-textarea { width: 100%; background: none; border: none; outline: none; font-family: var(--ja); font-size: 14px; font-weight: 300; color: var(--white); padding: 0 0 14px; line-height: 1.6; }
    .form-select { cursor: pointer; appearance: none; -webkit-appearance: none; }
    .form-select option { background: #111; color: #fff; }
    .form-select-wrap { position: relative; }
    .form-select-wrap::after { content: ''; position: absolute; right: 0; top: 50%; width: 8px; height: 8px; border-right: 1px solid rgba(245,245,240,0.4); border-bottom: 1px solid rgba(245,245,240,0.4); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
    .form-textarea { resize: none; height: 100px; }
    .form-input::placeholder, .form-textarea::placeholder { color: rgba(245,245,240,0.2); font-size: 13px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
    .form-submit-wrap { margin-top: 12px; display: flex; align-items: center; gap: 28px; }
    .form-submit { font-family: var(--en); font-size: 11px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--black); background: var(--gold); border: none; cursor: pointer; padding: 18px 52px; transition: background 0.25s, gap 0.3s; display: inline-flex; align-items: center; gap: 14px; }
    .form-submit:hover { background: var(--gold2); gap: 20px; }
    .form-note { font-size: 11px; font-weight: 300; color: rgba(245,245,240,0.3); letter-spacing: 0.06em; line-height: 1.8; }
    .form-success { display: none; text-align: center; padding: 60px 0; }
    .form-success-icon { font-size: 40px; margin-bottom: 20px; }
    .form-success h3 { font-family: var(--display); font-size: 36px; color: var(--gold); margin-bottom: 12px; }
    .form-success p { font-size: 14px; font-weight: 300; color: rgba(245,245,240,0.6); line-height: 2; }

    /* ── FOOTER ── */
    footer {
      background: #050505; border-top: 1px solid rgba(200,169,110,0.1);
      padding: 52px 60px; display: flex; align-items: center; justify-content: space-between;
    }
    .footer-left { display: flex; align-items: center; gap: 36px; }
    .footer-logo img { height: 18px; opacity: 0.7; }
    .footer-tagline { font-family: var(--en); font-size: 10px; letter-spacing: 0.2em; color: rgba(245,245,240,0.3); }
    .footer-links { display: flex; gap: 28px; }
    .footer-links a { font-family: var(--en); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,245,240,0.35); transition: color 0.2s; }
    .footer-links a:hover { color: var(--gold); }
    .footer-copy { font-family: var(--en); font-size: 10px; color: rgba(245,245,240,0.25); letter-spacing: 0.1em; }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
      #site-nav { padding: 0 24px; height: 60px; }
      .nav-menu, .nav-cta { display: none; }
      .svc-nav { top: 60px; }
      .ph-inner, .inner { padding: 0 24px; }
      .svc-nav-inner { padding: 0 24px; overflow-x: auto; }
      .svc-nav-item { padding: 16px 18px; white-space: nowrap; }
      .split, .process-steps, .nums-grid { grid-template-columns: 1fr; gap: 40px; }
      .img-grid { grid-template-columns: 1fr 1fr; }
      .img-grid-item:first-child { grid-column: span 2; }
      .img-pair { grid-template-columns: 1fr; }
      .ph-title { font-size: clamp(60px, 18vw, 100px); }
      .sht-outline, .sht-fill { font-size: clamp(60px, 14vw, 120px); }
      .sec-hero-text { padding: 0 24px; }
      .sht-fill { padding: 0 24px; }
      footer { flex-direction: column; gap: 20px; text-align: center; padding: 40px 24px; }
      .footer-links { display: none; }
      #contact { padding: 80px 0; }
      .contact-layout { grid-template-columns: 1fr; gap: 48px; }
      .contact-lead-title { font-size: clamp(28px, 8vw, 44px); }
      .contact-lead-desc br { display: none; }
      .form-row { grid-template-columns: 1fr; gap: 0; }
      .form-submit-wrap { flex-direction: column; align-items: flex-start; gap: 16px; }
      .svc-lead br { display: none; }
      .svc-lead { font-size: 14px; line-height: 2; }
      .split { grid-template-columns: 1fr; }
    }
  
/* ===== ABOUT PAGE ===== */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { background: #080808; color: #f5f5f0; font-family: 'Noto Sans JP', sans-serif; overflow-x: clip; }
    a { text-decoration: none; }
    ul { list-style: none; }
    img { display: block; }

    :root {
      --gold: #c8a96e;
      --gold2: #e8d5a3;
      --black: #080808;
      --white: #f5f5f0;
      --gray: #1a1a1a;
      --muted: #888;
      --en: 'Inter', sans-serif;
      --ja: 'Noto Sans JP', sans-serif;
      --display: 'Bebas Neue', sans-serif;
    }

    /* ── NAV ── */
    #site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 999; transition: background 0.4s; }
    #site-header.scrolled { background: rgba(8,8,8,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(200,169,110,0.15); }
    #site-nav { display: flex; align-items: center; height: 80px; padding: 0 60px; }
    .nav-logo { flex-shrink: 0; margin-right: auto; }
    .nav-logo img { height: 22px; width: auto; opacity: 0.88; transition: opacity 0.3s; }
    .nav-logo:hover img { opacity: 1; }
    .nav-menu { display: flex; align-items: center; gap: 4px; margin-right: auto; }
    .nav-menu li { position: relative; }
    .nav-menu a {
      font-family: var(--en); font-size: 11px; font-weight: 500;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: rgba(245,245,240,0.72);
      padding: 0 14px; display: flex; align-items: center; gap: 4px;
      overflow: hidden; height: 36px; transition: color 0.2s;
    }
    .nav-menu a:hover, .nav-menu a.nav-active { color: var(--gold); }
    .nav-cta {
      flex-shrink: 0; font-family: var(--en); font-size: 11px; font-weight: 600;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--black); background: var(--gold); padding: 10px 22px; transition: background 0.25s;
    }
    .nav-cta:hover { background: var(--gold2); }

    /* ── CURSOR ── */
    #cursor { position: fixed; width: 7px; height: 7px; background: var(--gold); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); }
    #cursor-ring { position: fixed; width: 36px; height: 36px; border: 1px solid rgba(200,169,110,0.5); border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%,-50%); transition: width 0.4s, height 0.4s; }

    /* ── REVEAL ── */
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.85s cubic-bezier(0.4,0,0.2,1), transform 0.85s cubic-bezier(0.4,0,0.2,1); }
    .reveal.on { opacity: 1; transform: none; }
    .stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1); }
    .stagger.on > *:nth-child(1) { transition-delay: 0s; }
    .stagger.on > *:nth-child(2) { transition-delay: 0.1s; }
    .stagger.on > *:nth-child(3) { transition-delay: 0.2s; }
    .stagger.on > *:nth-child(4) { transition-delay: 0.3s; }
    .stagger.on > *:nth-child(5) { transition-delay: 0.4s; }
    .stagger.on > * { opacity: 1; transform: none; }

    /* ── SEC-HERO (fill animation) ── */
    .sec-hero { width: 100%; overflow: hidden; padding: 100px 0 20px; pointer-events: none; user-select: none; }
    .sec-hero-text { display: block; position: relative; padding: 0 60px; line-height: 1; }
    .sht-outline { display: block; font-family: var(--display); font-size: clamp(60px, 9vw, 120px); line-height: 0.9; letter-spacing: -0.01em; color: transparent; -webkit-text-stroke: 1.5px rgba(245,245,240,0.1); }
    .sht-fill { position: absolute; top: 0; left: 0; right: 0; padding: 0 60px; font-family: var(--display); font-size: clamp(60px, 9vw, 120px); line-height: 0.9; letter-spacing: -0.01em; color: var(--white); clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(0.4,0,0.2,1); }
    .sec-hero-text.hero-active .sht-fill { clip-path: inset(0 0% 0 0); }
    /* white variant */
    .light-section .sht-outline { -webkit-text-stroke-color: rgba(0,0,0,0.08); }
    .light-section .sht-fill { color: #111; }

    /* ── SECTION SHARED ── */
    .section { padding: 0 0 160px; }
    .inner { max-width: 1200px; margin: 0 auto; padding: 0 60px; padding-top: 52px; }
    .dark-section { background: #080808; }
    .light-section { background: #f5f5f0; color: #111; }

    /* ── PAGE HERO ── */
    #page-hero {
      position: relative; min-height: 55vh; background: #080808;
      display: flex; flex-direction: column; justify-content: flex-end;
      padding: 0 60px 80px; overflow: hidden;
    }
    .ph-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.18; }
    .ph-overlay { position: absolute; inset: 0; background: linear-gradient(to top, #080808 35%, transparent); }
    .ph-inner { position: relative; z-index: 1; }
    .ph-eyebrow { font-family: var(--en); font-size: 10px; font-weight: 700; letter-spacing: 0.45em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; display: flex; align-items: center; gap: 16px; }
    .ph-eyebrow::before { content: ''; display: block; width: 32px; height: 1px; background: var(--gold); opacity: 0.5; }
    .ph-title { font-family: var(--display); font-size: clamp(80px, 13vw, 160px); line-height: 0.9; color: var(--white); letter-spacing: 0.01em; }
    .ph-sub { font-size: 14px; font-weight: 300; letter-spacing: 0.1em; color: rgba(245,245,240,0.45); margin-top: 20px; }

    /* ── PHILOSOPHY ── */
    .phil-statement {
      font-family: var(--display);
      font-size: clamp(56px, 8.5vw, 120px);
      line-height: 0.95; letter-spacing: 0.01em;
      color: var(--white);
      margin-bottom: 56px;
    }
    .phil-statement em {
      font-style: normal;
      color: transparent;
      -webkit-text-stroke: 1px var(--gold);
    }
    .phil-divider { width: 100%; height: 1px; background: rgba(200,169,110,0.18); margin-bottom: 52px; }
    .phil-bottom {
      display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
    }
    .phil-bottom-left p {
      font-size: 15px; font-weight: 300; line-height: 2.7;
      color: rgba(245,245,240,0.68);
    }
    .phil-bottom-right { display: flex; flex-direction: column; gap: 32px; }
    .phil-fact { display: flex; flex-direction: column; gap: 6px; }
    .phil-fact-num {
      font-family: var(--display); font-size: clamp(44px, 5.5vw, 72px);
      line-height: 1; color: var(--gold); letter-spacing: -0.01em;
    }
    .phil-fact-label {
      font-family: var(--en); font-size: 10px; font-weight: 700;
      letter-spacing: 0.3em; text-transform: uppercase;
      color: rgba(245,245,240,0.35);
    }
    .phil-facts-row { display: flex; gap: 52px; padding-top: 12px; border-top: 1px solid rgba(200,169,110,0.12); }

    /* ── MISSION (About page) ── */
    /* TOP page の #mission { text-align:center } を上書き */
    .light-section#mission { text-align: left; }
    .mission-inner { max-width: 900px; }
    .mission-en {
      font-family: var(--display);
      font-size: clamp(72px, 11vw, 150px);
      line-height: 0.92; color: var(--white);
      letter-spacing: 0.01em; margin-bottom: 28px;
    }
    .mission-sub { font-size: clamp(16px, 1.8vw, 22px); font-weight: 300; color: var(--gold); letter-spacing: 0.15em; margin-bottom: 32px; }
    .light-section .mission-desc { font-size: 15px; font-weight: 300; line-height: 2.6; color: rgba(0,0,0,0.6); max-width: 600px; margin: 0; }
    #mission::before {
      content: 'MISSION';
      position: absolute; right: 60px; bottom: 40px;
      font-family: var(--display); font-size: clamp(100px, 15vw, 200px);
      color: rgba(245,245,240,0.025); pointer-events: none; user-select: none;
      line-height: 1;
    }
    .light-section#mission::before { color: rgba(0,0,0,0.025); }
    #mission { position: relative; overflow: hidden; }

    /* ── VALUES ── */
    .values-list { border-bottom: 1px solid rgba(200,169,110,0.1); }
    .val-item {
      border-top: 1px solid rgba(200,169,110,0.1);
      padding: 44px 0;
      display: grid;
      grid-template-columns: 160px 1fr 1fr auto;
      gap: 0 52px;
      align-items: center;
      transition: background 0.3s;
    }
    .val-item:hover { background: rgba(200,169,110,0.02); }
    .val-num { font-family: var(--display); font-size: clamp(52px, 6vw, 80px); color: rgba(200,169,110,0.55); line-height: 1; letter-spacing: -0.02em; transition: color 0.3s; }
    .val-item:hover .val-num { color: rgba(200,169,110,0.75); }
    .val-tagline { font-family: var(--ja); font-size: clamp(16px, 1.6vw, 20px); font-weight: 700; line-height: 1.7; color: var(--white); letter-spacing: 0.04em; }
    .val-desc { font-size: 13px; font-weight: 300; line-height: 2.1; color: rgba(245,245,240,0.6); }
    .val-en { font-family: var(--en); font-size: 10px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(200,169,110,0.5); }

    /* ── VISION ── */
    .vision-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
    .vision-left .sub { font-size: clamp(18px, 2vw, 24px); font-weight: 700; color: var(--white); letter-spacing: 0.05em; line-height: 1.6; margin-bottom: 28px; }
    .vision-left p { font-size: 14px; font-weight: 300; line-height: 2.6; color: rgba(245,245,240,0.65); }
    .circle-wrap {
      aspect-ratio: 1; max-width: 400px; margin: 0 auto;
      border: 1px solid rgba(200,169,110,0.25); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      position: relative;
    }
    .circle-wrap::before {
      content: ''; position: absolute; inset: 16px;
      border: 1px solid rgba(200,169,110,0.12); border-radius: 50%;
    }
    .circle-text { font-family: var(--display); font-size: clamp(28px, 4vw, 52px); line-height: 1.15; text-align: center; color: var(--gold); letter-spacing: 0.05em; }

    /* ── CONTACT SECTION ── */
    #contact { background: #0a0a0a; color: var(--white); padding: 140px 0; text-align: left; }
    .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
    .contact-lead-label {
      font-family: var(--en); font-size: 10px; font-weight: 700;
      letter-spacing: 0.42em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 24px; display: block;
    }
    .contact-lead-title {
      font-family: var(--display); font-size: clamp(36px, 4vw, 56px);
      line-height: 1.05; color: var(--white); margin-bottom: 28px;
    }
    .contact-lead-desc { font-size: 14px; font-weight: 300; line-height: 2.6; color: rgba(245,245,240,0.55); margin-bottom: 48px; }
    .contact-info-list { display: flex; flex-direction: column; gap: 20px; }
    .contact-info-item { display: flex; align-items: center; gap: 16px; font-size: 13px; font-weight: 300; color: rgba(245,245,240,0.5); letter-spacing: 0.06em; }
    .contact-info-item strong { font-family: var(--en); font-size: 9px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); min-width: 72px; }
    .contact-form { display: flex; flex-direction: column; gap: 0; }
    .form-group { position: relative; border-bottom: 1px solid rgba(245,245,240,0.12); padding: 8px 0 0; margin-bottom: 28px; transition: border-color 0.3s; }
    .form-group:focus-within { border-bottom-color: var(--gold); }
    .form-label { font-family: var(--en); font-size: 9px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(245,245,240,0.35); display: block; margin-bottom: 10px; transition: color 0.3s; }
    .form-group:focus-within .form-label { color: var(--gold); }
    .form-label span { color: var(--gold); margin-left: 2px; }
    .form-input, .form-select, .form-textarea { width: 100%; background: none; border: none; outline: none; font-family: var(--ja); font-size: 14px; font-weight: 300; color: var(--white); padding: 0 0 14px; line-height: 1.6; }
    .form-select { cursor: pointer; appearance: none; -webkit-appearance: none; }
    .form-select option { background: #111; color: #fff; }
    .form-select-wrap { position: relative; }
    .form-select-wrap::after { content: ''; position: absolute; right: 0; top: 50%; width: 8px; height: 8px; border-right: 1px solid rgba(245,245,240,0.4); border-bottom: 1px solid rgba(245,245,240,0.4); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
    .form-textarea { resize: none; height: 100px; }
    .form-input::placeholder, .form-textarea::placeholder { color: rgba(245,245,240,0.2); font-size: 13px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
    .form-submit-wrap { margin-top: 12px; display: flex; align-items: center; gap: 28px; }
    .form-submit { font-family: var(--en); font-size: 11px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--black); background: var(--gold); border: none; cursor: pointer; padding: 18px 52px; transition: background 0.25s, gap 0.3s; display: inline-flex; align-items: center; gap: 14px; }
    .form-submit:hover { background: #e8d5a3; gap: 20px; }
    .form-note { font-size: 11px; font-weight: 300; color: rgba(245,245,240,0.3); letter-spacing: 0.06em; line-height: 1.8; }
    .form-success { display: none; text-align: center; padding: 60px 0; }
    .form-success-icon { font-size: 40px; margin-bottom: 20px; }
    .form-success h3 { font-family: var(--display); font-size: 36px; color: var(--gold); margin-bottom: 12px; }
    .form-success p { font-size: 14px; font-weight: 300; color: rgba(245,245,240,0.6); line-height: 2; }

    /* ── FOOTER ── */
    footer { background: #050505; border-top: 1px solid rgba(200,169,110,0.1); padding: 52px 60px; display: flex; align-items: center; justify-content: space-between; }
    .footer-left { display: flex; align-items: center; gap: 36px; }
    .footer-logo img { height: 18px; opacity: 0.7; }
    .footer-tagline { font-family: var(--en); font-size: 10px; letter-spacing: 0.2em; color: rgba(245,245,240,0.3); }
    .footer-links { display: flex; gap: 28px; }
    .footer-links a { font-family: var(--en); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,245,240,0.35); transition: color 0.2s; }
    .footer-links a:hover { color: var(--gold); }
    .footer-copy { font-family: var(--en); font-size: 10px; color: rgba(245,245,240,0.25); letter-spacing: 0.1em; }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
      #site-nav { padding: 0 24px; height: 60px; }
      .nav-menu, .nav-cta { display: none; }
      #page-hero { padding: 60px 24px 60px; }
      .inner { padding: 0 24px; padding-top: 40px; }
      .sec-hero-text { padding: 0 24px; }
      .sht-fill { padding: 0 24px; }
      .phil-bottom, .vision-inner { grid-template-columns: 1fr; gap: 40px; }
      .phil-statement { font-size: clamp(44px, 10vw, 80px); }
      .val-item { grid-template-columns: 80px 1fr; gap: 0 20px; }
      .val-en, .val-desc { display: none; }
      footer { flex-direction: column; gap: 20px; text-align: center; padding: 40px 24px; }
      .footer-links { display: none; }
      /* ── CONTACT ── */
      #contact { padding: 80px 0; }
      .contact-layout { grid-template-columns: 1fr; gap: 48px; }
      .contact-lead-title { font-size: clamp(28px, 8vw, 44px); }
      .contact-lead-desc br { display: none; }
      .form-row { grid-template-columns: 1fr; gap: 0; }
      .form-submit-wrap { flex-direction: column; align-items: flex-start; gap: 16px; }
    }
  
/* ===== NEWS PAGE ===== */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { background: #f5f5f0; color: #111; font-family: 'Noto Sans JP', sans-serif; overflow-x: clip; }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }

    :root {
      --gold: #c8a96e;
      --gold2: #b8934a;
      --black: #080808;
      --white: #f5f5f0;
      --en: 'Inter', sans-serif;
      --ja: 'Noto Sans JP', sans-serif;
      --display: 'Bebas Neue', sans-serif;
    }

    /* ── NAV ── */
    #site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 999; transition: background 0.4s; }
    #site-header.scrolled { background: rgba(8,8,8,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(200,169,110,0.15); }
    #site-nav { display: flex; align-items: center; height: 80px; padding: 0 60px; }
    .nav-logo { flex-shrink: 0; margin-right: auto; }
    .nav-logo img { height: 22px; width: auto; opacity: 0.88; transition: opacity 0.3s; }
    .nav-logo:hover img { opacity: 1; }
    .nav-menu { display: flex; align-items: center; gap: 4px; margin-right: auto; }
    .nav-menu a { font-family: var(--en); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,245,240,0.72); padding: 0 14px; height: 36px; display: flex; align-items: center; transition: color 0.2s; }
    .nav-menu a:hover, .nav-menu a.nav-active { color: var(--gold); }
    .nav-cta { flex-shrink: 0; font-family: var(--en); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--black); background: var(--gold); padding: 10px 22px; transition: background 0.25s; }
    .nav-cta:hover { background: #e8d5a3; }

    /* ── CURSOR ── */
    #cursor { position: fixed; width: 7px; height: 7px; background: var(--gold); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); }
    #cursor-ring { position: fixed; width: 36px; height: 36px; border: 1px solid rgba(200,169,110,0.5); border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%,-50%); transition: width 0.4s, height 0.4s; }

    /* ── REVEAL ── */
    .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1), transform 0.8s cubic-bezier(0.4,0,0.2,1); }
    .reveal.on { opacity: 1; transform: none; }

    /* ── PAGE HERO ── */
    #page-hero {
      background: var(--black); min-height: 50vh;
      display: flex; flex-direction: column; justify-content: flex-end;
      padding: 0 60px 72px; position: relative; overflow: hidden;
    }
    .ph-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.08; }
    .ph-overlay { position: absolute; inset: 0; background: linear-gradient(to top, var(--black) 40%, transparent); }
    .ph-inner { position: relative; z-index: 1; }
    .ph-eyebrow { font-family: var(--en); font-size: 10px; font-weight: 700; letter-spacing: 0.45em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; display: flex; align-items: center; gap: 14px; }
    .ph-eyebrow::before { content: ''; display: block; width: 28px; height: 1px; background: var(--gold); opacity: 0.5; }
    .ph-title { font-family: var(--display); font-size: clamp(80px, 13vw, 160px); line-height: 0.9; color: var(--white); }
    .ph-sub { font-size: 13px; font-weight: 300; color: rgba(245,245,240,0.4); margin-top: 18px; letter-spacing: 0.1em; }

    /* ── FILTER ── */
    .filter-bar {
      background: var(--white); border-bottom: 1px solid rgba(0,0,0,0.08);
      padding: 0 60px; display: flex; align-items: center; gap: 4px;
      position: sticky; top: 80px; z-index: 10;
    }
    .filter-btn {
      font-family: var(--en); font-size: 10px; font-weight: 700;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: rgba(0,0,0,0.35); padding: 18px 16px;
      border: none; background: none; cursor: pointer;
      border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s;
    }
    .filter-btn:hover { color: #111; }
    .filter-btn.active { color: var(--gold2); border-bottom-color: var(--gold2); }

    /* ── NEWS LIST ── */
    .news-main { max-width: 900px; margin: 0 auto; padding: 60px 60px 160px; }

    .news-item {
      display: grid; grid-template-columns: 160px 1fr 40px;
      align-items: center; gap: 0 32px;
      padding: 32px 0; border-top: 1px solid rgba(0,0,0,0.08);
      cursor: pointer; transition: background 0.2s;
    }
    .news-item:last-child { border-bottom: 1px solid rgba(0,0,0,0.08); }
    .news-item:hover { background: rgba(0,0,0,0.02); margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
    .news-item:hover .news-arr { background: #111; color: #fff; border-color: #111; }
    .news-meta { display: flex; flex-direction: column; gap: 6px; }
    .news-date { font-family: var(--en); font-size: 11px; letter-spacing: 0.1em; color: rgba(0,0,0,0.4); }
    .news-tag {
      display: inline-block; font-family: var(--en); font-size: 9px; font-weight: 700;
      letter-spacing: 0.2em; text-transform: uppercase;
      background: var(--gold2); color: #fff; padding: 3px 8px; width: fit-content;
    }
    .news-tag.service { background: transparent; color: var(--gold2); border: 1px solid var(--gold2); }
    .news-tag.info { background: transparent; color: rgba(0,0,0,0.4); border: 1px solid rgba(0,0,0,0.2); }
    .news-title-text { font-size: 15px; font-weight: 500; line-height: 1.7; color: #111; letter-spacing: 0.03em; }
    .news-arr {
      width: 36px; height: 36px; border: 1px solid rgba(0,0,0,0.15);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      color: rgba(0,0,0,0.4); flex-shrink: 0; transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    /* ── PAGINATION ── */
    .pagination { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 60px 80px; }
    .page-btn {
      width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
      font-family: var(--en); font-size: 12px; font-weight: 600; letter-spacing: 0.05em;
      border: 1px solid rgba(0,0,0,0.12); color: rgba(0,0,0,0.4);
      cursor: pointer; transition: all 0.2s; background: none;
    }
    .page-btn.active { background: #111; color: #fff; border-color: #111; }
    .page-btn:hover:not(.active) { border-color: #111; color: #111; }

    /* ── FOOTER ── */
    footer { background: var(--black); border-top: 1px solid rgba(200,169,110,0.1); padding: 52px 60px; display: flex; align-items: center; justify-content: space-between; }
    .footer-left { display: flex; align-items: center; gap: 36px; }
    .footer-logo img { height: 18px; opacity: 0.7; }
    .footer-tagline { font-family: var(--en); font-size: 10px; letter-spacing: 0.2em; color: rgba(245,245,240,0.3); }
    .footer-links { display: flex; gap: 28px; }
    .footer-links a { font-family: var(--en); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,245,240,0.35); transition: color 0.2s; }
    .footer-links a:hover { color: var(--gold); }
    .footer-copy { font-family: var(--en); font-size: 10px; color: rgba(245,245,240,0.25); letter-spacing: 0.1em; }

    @media (max-width: 768px) {
      #site-nav { padding: 0 24px; }
      .nav-menu, .nav-cta { display: none; }
      #page-hero { padding: 60px 24px 40px; min-height: 26vh; }
      .filter-bar { padding: 0 24px; overflow-x: auto; }
      .news-main { padding: 40px 24px 100px; }
      .news-item { grid-template-columns: 1fr; gap: 12px; }
      .news-arr { display: none; }
      footer { flex-direction: column; gap: 20px; padding: 40px 24px; }
    }
  
/* ===== NEWS ARTICLE BODY ===== */
.news-article-body { font-family: 'Noto Sans JP', sans-serif; color: rgba(0,0,0,0.75); line-height: 2.2; }
.news-article-body h2 { font-size: 20px; font-weight: 700; color: #111; margin: 48px 0 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(0,0,0,0.1); }
.news-article-body h3 { font-size: 17px; font-weight: 700; color: #111; margin: 36px 0 12px; }
.news-article-body p  { font-size: 15px; font-weight: 300; margin-bottom: 24px; }
.news-article-body ul { margin: 0 0 24px 1.5em; }
.news-article-body ul li { font-size: 15px; font-weight: 300; margin-bottom: 8px; list-style: disc; }
.news-article-body a  { color: #b8934a; text-decoration: underline; }

/* =============================================
   モバイルメニュー
   ============================================= */

/* ハンバーガーボタン */
#nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: 12px;
  z-index: 1001;
  position: relative;
}
#nav-hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: #f5f5f0;
  transition: transform 0.3s, opacity 0.3s;
  transform-origin: center;
}
/* × に変形 */
#nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#nav-hamburger.open span:nth-child(2) { opacity: 0; }
#nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* モバイルドロワー
   display:none で完全に要素を消す（visibility:hidden では
   transform:translateX(100%)の物理位置が残り Android で横overflow発生） */
#mobile-nav {
  display: none; /* 閉じている時は完全に非表示 → 横overflow発生しない */
  position: fixed;
  top: 0; right: 0;
  width: min(320px, 85vw);
  height: 100%;
  background: #0a0a0a;
  border-left: 1px solid rgba(200,169,110,0.12);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
}
#mobile-nav.is-open {
  display: block;
  transform: translateX(0);
}

#mobile-nav-inner {
  display: flex;
  flex-direction: column;
  padding: 100px 40px 60px;
  height: 100%;
}

.mobile-nav-link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  letter-spacing: 0.08em;
  color: rgba(245,245,240,0.85);
  text-decoration: none;
  padding: 16px 0;
  border-bottom: 1px solid rgba(200,169,110,0.1);
  transition: color 0.2s;
}
.mobile-nav-link:hover { color: #c8a96e; }
.mnl-num {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(200,169,110,0.5);
}

.mobile-nav-cta {
  display: inline-block;
  margin-top: 40px;
  padding: 14px 32px;
  border: 1px solid rgba(200,169,110,0.5);
  color: #c8a96e;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s;
  align-self: flex-start;
}
.mobile-nav-cta:hover { background: rgba(200,169,110,0.1); }

.mobile-nav-tagline {
  margin-top: auto;
  padding-top: 40px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: rgba(245,245,240,0.2);
}

/* オーバーレイ */
#mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 999;
  backdrop-filter: blur(2px);
}
#mobile-nav-overlay.open { display: block; }

/* =============================================
   モバイル統合メディアクエリ（競合ゼロ・一元管理）
   ※ html の overflow-x はファイル先頭のグローバルで hidden 設定済み。
     ここでは絶対に html/body の overflow-x を触らない。
   ============================================= */
@media (max-width: 900px) {

  /* ── ハンバーガー表示 ── */
  #nav-hamburger { display: flex; }

  /* ── サービスページ ── */
  .svc-section { padding: 60px 0 80px; }
  .svc-section .sec-hero { padding: 0; }
  .svc-section .inner { padding-top: 32px; }

  /* ── ヘッダー：モバイルは常に背景を表示（ビデオとの境界を明確に） ── */
  #site-header {
    background: rgba(8,8,8,0.95) !important;
  }

  /* ── WP管理バー対応：46px下にずらしてヒーローとくっつける ── */
  .admin-bar #site-header {
    top: 46px !important;
  }

  /* ── ヒーロー ── */
  #hero { width: 100% !important; max-width: 100% !important; overflow: hidden; margin-top: 0 !important; }
  #hero-video { width: 100% !important; max-width: 100% !important; }
  #mute-btn { display: none !important; }

  /* ── セカンドビュー ── */
  .sv-en { font-size: clamp(28px, 8.5vw, 64px) !important; }
  .sv-inner { padding: 48px 24px 60px !important; }

  /* ── padding 統一 ── */
  .inner { padding-left: 24px !important; padding-right: 24px !important; }
  .sec-hero-text { padding-left: 24px !important; padding-right: 24px !important; }
  .sht-fill { padding-left: 24px !important; padding-right: 24px !important; }
  .sht-outline, .sht-fill { font-size: clamp(36px, 10vw, 80px) !important; }

  /* ── ドラマ横スクロール ── */
  .drama-track-wrap,
  .svc-drama-track-wrap {
    max-width: 100%;
    overflow-x: auto;
  }

  /* ── サービスタイトル ── */
  .service-ghost { overflow: hidden; max-width: 100%; }
  .service-main-title { font-size: clamp(20px, 5.8vw, 36px) !important; white-space: normal !important; }
  /* サービスページタイトル（.svc-title）モバイル */
  .svc-title { font-size: clamp(28px, 7.5vw, 48px) !important; }
  .svc-lead { font-size: 14px !important; line-height: 2 !important; }
}