/* Dark / Light mode + header controls (colors from live darkmode.css) */

/* 固定ヘッダー分、アンカー位置をずらす */
html {
  scroll-padding-top: 78px;
}

@media (max-width: 820px) {
  html {
    scroll-padding-top: 68px;
  }
}

:root,
html[data-theme="light"] {
  --blue: #052275;
  --blue-dark: #052275;
  --blue-fg: #052275;
  --red: #c8161d;
  --ink: #171927;
  --band: #171927;
  --muted: #626778;
  --paper: #f6f7fa;
  --white: #fff;
  --line: #dfe2ea;
  --bg: #ffffff;
  --surface: #ffffff;
  --toggle-bg: #162459;
  --toggle-fg: #ffffff;
  --header-bg: rgba(255, 255, 255, 0.92);
}

html[data-theme="dark"] {
  --blue: #052275;
  /* MV直下などの帯がページ背景と同化するのを防ぐ */
  --blue-dark: #1e2740;
  /* 紺上の紺色アクセント（見やすさ優先） */
  --blue-fg: #b8c6f2;
  --red: #c8161d;
  --ink: #ffffff;
  /* domains など暗帯。--ink を白にした影響を切り離す */
  --band: #1a2030;
  --muted: rgba(255, 255, 255, 0.75);
  --paper: #4d5668;
  --white: #3d465c;
  --line: #969cac;
  --bg: #343e56;
  /* ライト時の白カード相当。paper帯の上で差が出るように */
  --surface: #343e56;
  --toggle-bg: #f3f3f3;
  --toggle-fg: #0b0b3a;
  --header-bg: rgba(52, 62, 86, 0.96);
}

html[data-theme="dark"] body {
  background: var(--bg);
  color: var(--ink);
}

html[data-theme="dark"] header {
  background: var(--header-bg);
}

html[data-theme="dark"] .links {
  background: var(--header-bg);
}

/* 帯の差を明示（ライト時の paper / navy / ink のリズムを暗でも維持） */
html[data-theme="dark"] .definition {
  background: var(--blue-dark);
  color: #fff;
}

html[data-theme="dark"] .strengths,
html[data-theme="dark"] .approach-section,
html[data-theme="dark"] .origin,
html[data-theme="dark"] .project-pipeline {
  background: var(--paper);
}

html[data-theme="dark"] .domains {
  background: var(--band);
  color: #fff;
}

html[data-theme="dark"] .projects {
  background: var(--bg);
}

/* 4つの力・伴走ステップ: paper帯の上でカードが浮くように */
html[data-theme="dark"] .strength,
html[data-theme="dark"] .approach {
  background: var(--surface);
  color: var(--ink);
}

/*
 * 下層・TOP共通: ページ背景(bg)上の浮きブロックは paper を使う
 * （ライト時の白地＋グレー紙面と同じコントラスト関係）
 */
html[data-theme="dark"] .choice a,
html[data-theme="dark"] .card,
html[data-theme="dark"] .project-more,
html[data-theme="dark"] form,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .initiative-feature,
html[data-theme="dark"] .policy-card,
html[data-theme="dark"] .notice,
html[data-theme="dark"] .contact-alert {
  background: var(--paper);
  color: var(--ink);
}

/* フォーム内フィールド: ライト時の白入力相当（paper帯より一段暗い） */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

/* dark帯の上のカードも paper で差を確保 */
html[data-theme="dark"] .dark .card {
  background: var(--paper);
  border-color: rgba(255, 255, 255, 0.18);
}

/* プロジェクトとサービスを見る: ライト時と同様、セクション(bg)とハブ(paper)で差をつける */
html[data-theme="dark"] .project-hub {
  background: var(--paper);
  color: var(--ink);
}

html[data-theme="dark"] .domains .section-head h2,
html[data-theme="dark"] .domains .domain h3 {
  color: #fff;
}

html[data-theme="dark"] .domains .section-head p,
html[data-theme="dark"] .domain ul,
html[data-theme="dark"] .dark p {
  color: rgba(255, 255, 255, 0.75);
}

html[data-theme="dark"] .hero-mark {
  opacity: 0.22;
  mix-blend-mode: normal;
}

html[data-theme="dark"] .project-hub:after {
  background-image: url("../images/decisionmake-symbol.png");
  opacity: 0.08;
}

/* 紺色テキスト → ダーク用の明るい青（CTAボタンはライト時の紺を維持） */
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .information-label,
html[data-theme="dark"] .hero h1 span,
html[data-theme="dark"] .hero h1 em,
html[data-theme="dark"] .menu,
html[data-theme="dark"] .back,
html[data-theme="dark"] .option b,
html[data-theme="dark"] .step,
html[data-theme="dark"] .origin-quote,
html[data-theme="dark"] .arrow,
html[data-theme="dark"] .document-row b,
html[data-theme="dark"] .section-action-light,
html[data-theme="dark"] .sub-nav-utils .lang-switch,
html[data-theme="dark"] .lang-switch a.is-active,
html[data-theme="dark"] .lang-switch a.gt-current-lang {
  color: var(--blue-fg) !important;
}

html[data-theme="dark"] .cta-btn,
html[data-theme="dark"] .cta a:first-child {
  color: #052275 !important;
}

html[data-theme="dark"] .section-action-light {
  border-color: var(--blue-fg);
}

html[data-theme="dark"] img.logo-light {
  display: none !important;
}

html[data-theme="dark"] img.logo-dark {
  display: block !important;
  width: 100%;
  max-width: 230px;
  height: auto;
}

img.logo-dark {
  display: none !important;
}

.logo {
  display: flex;
  align-items: center;
  overflow: hidden;
  max-height: 78px;
  flex: 0 1 auto;
  min-width: 0;
  width: min(230px, 100%);
}

.logo img.logo-light,
.logo img.logo-dark {
  width: 100%;
  max-width: 230px;
  height: auto;
  max-height: 48px;
  object-fit: contain;
  object-position: left center;
}

.company-intro img.logo-light,
.company-intro img.logo-dark,
.footer-logo.logo-light,
.footer-logo.logo-dark,
footer img.logo-light,
footer img.logo-dark {
  width: 230px;
  height: auto;
  max-height: 48px;
  object-fit: contain;
}

/* Header language switcher — same as text menu; active = color + underline */
.header-utils {
  display: none;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.lang-switch a {
  color: inherit;
  text-decoration: none;
}

.lang-switch a.is-active,
.lang-switch a.gt-current-lang {
  color: var(--blue-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: inherit;
}

.lang-switch .sep {
  opacity: 0.45;
  font-weight: inherit;
}

.sub-nav-utils {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  flex: 0 0 auto;
  white-space: nowrap;
}

.sub-nav-utils .lang-switch {
  color: var(--blue-fg);
}

.back-short {
  display: none;
}

/*
 * DarkModeSwitcher — layout/colors match live site darkmode.css
 * Font only uses site sans stack
 */
#DarkModeSwitcher {
  --dm-switcher-base: 20px;
  --dm-switcher-lift: 0px;
}

.disp-light {
  display: block;
}

.disp-dark {
  display: none;
}

html[data-theme="dark"] .disp-dark {
  display: block;
}

html[data-theme="dark"] .disp-light {
  display: none;
}

#DarkModeSwitcher button {
  position: fixed;
  bottom: calc(var(--dm-switcher-base) + var(--dm-switcher-lift));
  right: 20px;
  z-index: 1000;
  cursor: pointer;
  border: none;
  padding: 0;
  width: 56px;
  height: 56px;
  border-radius: 500px;
  background-color: #162459;
  color: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  display: inline-grid;
  place-items: center;
  font: inherit;
  transition: bottom 0.3s ease, background-color 0.3s linear, color 0.3s linear;
}

#DarkModeSwitcher button .theme-toggle-icon {
  display: block;
  width: 22px;
  height: 22px;
}

html[data-theme="dark"] #DarkModeSwitcher button {
  background: #f3f3f3;
  color: #0b0b3a;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

#DarkModeSwitcher p {
  position: fixed;
  right: 85px;
  bottom: calc(var(--dm-switcher-base) + var(--dm-switcher-lift) + 22px);
  z-index: 1000;
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.2em;
  color: #343e56;
  pointer-events: none;
  transition: bottom 0.3s ease;
}

html[data-theme="dark"] #DarkModeSwitcher p {
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 768px) {
  #DarkModeSwitcher {
    --dm-switcher-base: 8px;
  }

  #DarkModeSwitcher button {
    right: 16px;
    z-index: 2000;
    width: 50px;
    height: 50px;
    transform: translate3d(0, 0, 0);
  }

  #DarkModeSwitcher p {
    right: 76px;
    bottom: calc(var(--dm-switcher-base) + var(--dm-switcher-lift) + 16px);
    font-size: 12px;
    letter-spacing: 0.15em;
  }
}

@media (prefers-reduced-motion: reduce) {
  #DarkModeSwitcher button,
  #DarkModeSwitcher p {
    transition: none;
  }
}

.contact-alert {
  margin: 0 0 24px;
  padding: 16px 18px;
  border-left: 4px solid var(--blue);
  background: var(--paper);
}

.contact-alert.is-error {
  border-left-color: var(--red);
}

.hp-honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}

/* Hide default GTranslate chrome (we use custom JP|EN in header) */
.gt_float_switcher,
.gt_switcher_wrapper,
.gtranslate_wrapper:empty,
.skiptranslate iframe.skiptranslate,
body > .skiptranslate,
.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-te-spinner-pos {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body {
  top: 0 !important;
}

@media (max-width: 820px) {
  header .nav {
    gap: 10px;
  }

  header .logo {
    width: min(168px, 46vw);
    max-height: 40px;
  }

  header .logo img.logo-light,
  header .logo img.logo-dark,
  html[data-theme="dark"] header img.logo-dark {
    max-width: 168px;
    max-height: 32px;
  }

  .sub-nav-utils {
    gap: 10px;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
  }

  .back-full {
    display: none;
  }

  .back-short {
    display: inline;
  }

  html[data-theme="dark"] .hero-mark {
    opacity: 0.35;
    mix-blend-mode: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}