/* ============================================================
   theme-light.css — 白 × オレンジグラデーション ライトテーマ
   style.css の後に読み込み、body.theme-light 配下でのみ有効。
   本採用しない場合は index-light.html と theme-light*.css を削除。

   コンセプト：今どきのスタイリッシュ。
   ・背景＝ピュアホワイト（差し色にごく淡いニュートラルグレー）
   ・アクセント＝ビビッドなオレンジ→アンバーのグラデーション
   ・締め色＝ウォームチャコール（フッター／マーキー／動画スクリム）
   ============================================================ */

body.theme-light {
  /* ブランド変数の差し替え（既存の --cyan/--magenta/--ink を再定義）*/
  --cyan: #ea580c;            /* アクセント＝ディープオレンジ（白地でAAコントラスト）*/
  --magenta: #e11d48;         /* サブ＝ローズレッド（必須マーク・警告のみ）*/
  --ink: #17130f;             /* 締め色＝ウォームチャコール */
  --navy-600: #201c17;        /* 見出し色＝チャコール（旧ネイビー枠を流用）*/
  --steel: #fb8c3a;           /* 小アクセント＝ブライトオレンジ */
  --blue-light: #ffbe8a;      /* 暗背景上のアクセント＝ピーチ */

  /* グラデーション定義 */
  --grad-a: #ff5e2c;          /* 濃いオレンジ */
  --grad-b: #ff9a2f;          /* アンバー */

  --paper: #ffffff;
  --paper-2: #f5f6f7;         /* ごく淡いニュートラルグレー（ベージュ不使用）*/
  --line: rgba(23,19,15,.09);
  --line-strong: rgba(23,19,15,.16);
  --txt: #211d1a;
  --txt-2: rgba(33,29,26,.66);
  --txt-3: rgba(33,29,26,.44);

  background: #ffffff;
  color: var(--txt);
}

.theme-light ::selection { background: var(--cyan); color: #fff; }

body.theme-light ::-webkit-scrollbar-track { background: #f0f0f1; }
body.theme-light ::-webkit-scrollbar-thumb { background: #d9d6d2; }

/* ---- Tailwindユーティリティの上書き ---- */
.theme-light .text-white { color: var(--txt); }
.theme-light .text-white\/70 { color: var(--txt-2); }
.theme-light .text-white\/50 { color: var(--txt-3); }
.theme-light .text-white\/40 { color: var(--txt-3); }
.theme-light .text-neoncyan { color: var(--cyan); }
.theme-light .border-white\/10 { border-color: var(--line); }
.theme-light .bg-black\/95 { background: rgba(255, 255, 255, 0.97); }

/* ============ Header ============ */
.theme-light #site-header.scrolled {
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid var(--line);
}
.theme-light .brand-logo { color: var(--navy-600); }

/* 最上部（動画ヒーロー上）ではヘッダー文字を白に */
.theme-light #site-header:not(.scrolled) .brand-logo { color: #fff; }
.theme-light #site-header:not(.scrolled) .nav-link { color: rgba(255,255,255,.82); }
.theme-light #site-header:not(.scrolled) .nav-link:hover { color: #fff; }
.theme-light #site-header:not(.scrolled) .nav-link::after { background: var(--grad-b); }
.theme-light #site-header:not(.scrolled) .nav-cta {
  border-color: rgba(255,255,255,.7); color: #fff;
}
.theme-light #site-header:not(.scrolled) .nav-cta:hover {
  background: #fff; color: var(--navy-600); border-color: #fff;
}
.theme-light #site-header:not(.scrolled) #menu-toggle { color: #fff; }

.theme-light .logo-dot {
  background: linear-gradient(120deg, var(--grad-a), var(--grad-b));
  box-shadow: none;
  animation: none;
}
.theme-light .nav-link { color: rgba(33,29,26,.66); }
.theme-light .nav-link:hover { color: var(--navy-600); }
.theme-light .nav-link::after { background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); box-shadow: none; height: 2px; }
.theme-light .nav-cta {
  border-color: var(--cyan);
  color: var(--cyan);
}
.theme-light .nav-cta:hover {
  background: linear-gradient(120deg, var(--grad-a), var(--grad-b));
  color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(255,94,44,.32);
}
.theme-light .mobile-link { color: rgba(33,29,26,.85); }
.theme-light .mobile-link:hover { color: var(--cyan); }
.theme-light .mobile-link-sub { color: rgba(33,29,26,.55); }
.theme-light #mobile-menu { border-top-color: var(--line); }

.theme-light .nav-dropdown-menu {
  background: rgba(255,255,255,.98);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(23,19,15,.12);
}
.theme-light .nav-dropdown-menu a { color: rgba(33,29,26,.75); }
.theme-light .nav-dropdown-menu a:hover { background: rgba(234,88,12,.09); color: var(--cyan); }

/* ============ Hero ============ */
/* 動画は残す：シネマティックなヒーロー × 白いボディ */
.theme-light .hero-bg { background: var(--ink); }
.theme-light .hero-video { opacity: .9; }

/* テキスト可読性のための暗幕＋最下部はマーキー帯へ溶け込む。
   わずかにオレンジを混ぜてブランドの温度感を出す。 */
.theme-light .hero-vignette {
  background:
    linear-gradient(to right, rgba(15,11,8,.58), rgba(15,11,8,.15) 60%, transparent),
    radial-gradient(ellipse at 78% 30%, rgba(255,94,44,.16), transparent 55%),
    linear-gradient(to bottom, rgba(15,11,8,.32), transparent 30%, transparent 72%, var(--ink) 100%);
}

.theme-light .hero-grid { display: none; }

/* ヒーロー内は白＋ピーチを維持（動画上のため） */
.theme-light .hero-eyebrow { color: var(--grad-b); }
.theme-light .hero-glow { text-shadow: none; color: #fff; }
.theme-light .type-cursor { color: var(--grad-b); }
.theme-light .hero-sub { color: rgba(255,255,255,.82); }
.theme-light .scroll-indicator { color: rgba(255,255,255,.6); }

/* ヒーロー内ボタン：オレンジグラデでブランドを主張 */
.theme-light #hero .btn-primary {
  background: linear-gradient(120deg, var(--grad-a), var(--grad-b));
  color: #fff;
  box-shadow: 0 12px 30px rgba(255,94,44,.4);
}
.theme-light #hero .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(255,94,44,.55);
}
.theme-light #hero .btn-ghost {
  border: 1px solid rgba(255,255,255,.5);
  color: #fff;
  background: rgba(255,255,255,.06);
}
.theme-light #hero .btn-ghost:hover {
  border-color: var(--grad-b); background: rgba(255,154,47,.14);
  color: #fff; box-shadow: none;
}

/* ヒーロー以外のボタン：オレンジグラデーション（今どきの主役）*/
.theme-light .btn-primary {
  background: linear-gradient(120deg, var(--grad-a), var(--grad-b));
  color: #fff;
  box-shadow: 0 10px 26px rgba(255,94,44,.32);
}
.theme-light .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(255,94,44,.45);
}
.theme-light .btn-ghost {
  border: 1px solid rgba(234,88,12,.4);
  color: var(--cyan);
  background: rgba(255,255,255,.5);
}
.theme-light .btn-ghost:hover {
  border-color: var(--cyan); color: var(--cyan); box-shadow: none;
  background: rgba(234,88,12,.06);
}

/* ============ Marquee ============ */
.theme-light .marquee-section { background: var(--ink); }
.theme-light .marquee-track { color: rgba(255,255,255,.72); }
.theme-light .marquee-track .dot { color: var(--steel); }

/* ============ Sections ============ */
.theme-light .bg-works { background: linear-gradient(180deg, #ffffff, var(--paper-2)); }
.theme-light .section-eyebrow { color: var(--cyan); }
.theme-light .section-eyebrow::before { background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); box-shadow: none; }
.theme-light .section-title { color: var(--navy-600); }
.theme-light .section-lead { color: var(--txt-2); }

/* ============ Services ============ */
.theme-light .services-bg-overlay {
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(245,246,247,.86) 45%, rgba(255,255,255,.97));
}

.theme-light .service-card {
  background: #ffffff;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(23,19,15,.05);
}
/* ホバーで上辺にオレンジのグラデーションラインを覗かせる（今どきの遊び）*/
.theme-light .service-card::before {
  display: block; opacity: 0;
  background: linear-gradient(120deg, var(--grad-a), var(--grad-b));
  -webkit-mask: none; mask: none;
  padding: 0; inset: auto 0 auto 0; top: 0; height: 3px;
  border-radius: 20px 20px 0 0;
}
.theme-light .service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(234,88,12,.35);
  box-shadow: 0 24px 48px rgba(23,19,15,.1);
}
.theme-light .service-card:hover::before { opacity: 1; }
.theme-light .service-icon {
  background: linear-gradient(135deg, rgba(255,94,44,.12), rgba(255,154,47,.12));
  color: var(--cyan);
  border: 1px solid rgba(234,88,12,.22);
}
.theme-light .service-title { color: var(--navy-600); }
.theme-light .service-text { color: var(--txt-2); }
.theme-light .service-list li { color: rgba(33,29,26,.75); }
.theme-light .service-list i { color: var(--steel); }
.theme-light .service-link { color: var(--cyan); }

.theme-light .service-btn {
  color: #fff;
  background: linear-gradient(120deg, var(--grad-a), var(--grad-b));
  box-shadow: 0 6px 16px rgba(255,94,44,.3);
}
.theme-light .service-btn:hover {
  background: linear-gradient(120deg, #ff6f3d, #ffa845);
  box-shadow: 0 10px 24px rgba(255,94,44,.42);
}
.theme-light .service-btn-sub {
  color: var(--cyan);
  background: transparent;
  border-color: rgba(234,88,12,.45);
  box-shadow: none;
}
.theme-light .service-btn-sub .service-btn-arrow { color: var(--cyan); }
.theme-light .service-btn-sub:hover {
  color: #fff; background: linear-gradient(120deg, var(--grad-a), var(--grad-b)); border-color: transparent;
  box-shadow: 0 10px 24px rgba(255,94,44,.42);
}
.theme-light .service-btn-sub:hover .service-btn-arrow { color: #fff; }

/* ============ Works ============ */
.theme-light .work-item {
  border: 1px solid var(--line);
  background: #ececee;
  box-shadow: 0 2px 8px rgba(23,19,15,.06);
}
.theme-light .work-item:hover .work-overlay {
  background: linear-gradient(to top, rgba(15,11,8,.92), rgba(255,94,44,.16) 60%, transparent);
}
.theme-light .work-coming-soon {
  color: rgba(255,255,255,.78);
  background: rgba(15,11,8,.45);
  border-color: rgba(255,255,255,.2);
}
.theme-light .work-cat { color: var(--blue-light); }
.theme-light .work-title { color: #fff; }
.theme-light .work-play {
  background: rgba(255,154,47,.18);
  border-color: rgba(255,154,47,.55);
}

/* ============ Contact Form ============ */
.theme-light .contact-form {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 30px rgba(23,19,15,.06);
}
.theme-light .form-field label { color: rgba(33,29,26,.7); }
.theme-light .form-field label span { color: var(--magenta); }
.theme-light .form-field input,
.theme-light .form-field select,
.theme-light .form-field textarea {
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  color: var(--txt);
}
.theme-light .form-field input:focus,
.theme-light .form-field select:focus,
.theme-light .form-field textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(234,88,12,.14);
}
.theme-light .form-field select option { background: #ffffff; color: var(--txt); }
.theme-light .form-field input::placeholder,
.theme-light .form-field textarea::placeholder { color: rgba(33,29,26,.32); }
.theme-light .form-status.success { color: var(--cyan); }
.theme-light .form-status.error { color: var(--magenta); }

/* ============ Scroll to Top ============ */
.theme-light #scroll-top-btn {
  background: linear-gradient(120deg, var(--grad-a), var(--grad-b));
  border: none;
  color: #fff;
  box-shadow: 0 8px 22px rgba(255,94,44,.4);
}
.theme-light #scroll-top-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 12px 30px rgba(255,94,44,.55);
}

/* ============ Footer ============ */
/* フッターはウォームチャコールで締める（白背景の今どきアンカー）*/
.theme-light .site-footer {
  background: var(--ink);
  border-top: none;
}
.theme-light .site-footer .brand-logo { color: #fff; }
.theme-light .site-footer .logo-dot { background: linear-gradient(120deg, var(--grad-a), var(--grad-b)); }
.theme-light .site-footer .text-white\/50 { color: rgba(245,240,236,.6); }
.theme-light .site-footer .text-white\/40 { color: rgba(245,240,236,.48); }
.theme-light .footer-heading { color: rgba(245,240,236,.48); }
.theme-light .footer-list a, .theme-light .footer-list li { color: rgba(245,240,236,.75); }
.theme-light .footer-list a:hover { color: var(--blue-light); }
.theme-light .site-footer .text-neoncyan { color: var(--steel); }
.theme-light .footer-social a {
  border-color: rgba(245,240,236,.22); color: rgba(245,240,236,.75);
}
.theme-light .footer-social a:hover { border-color: var(--grad-b); color: var(--grad-b); box-shadow: none; }
.theme-light .footer-bottom {
  border-top-color: rgba(245,240,236,.14);
  color: rgba(245,240,236,.48);
}
.theme-light .footer-bottom a { color: rgba(245,240,236,.48); }
.theme-light .footer-bottom a:hover { color: var(--blue-light); }

/* ============ Video Modal ============ */
.theme-light .video-modal-backdrop { background: rgba(15,11,8,.72); }
.theme-light .video-frame { border-color: rgba(255,154,47,.4); box-shadow: 0 30px 80px rgba(15,11,8,.4); }