/* ダークモード用の変数定義 */
body.dark-mode {
  --color-white: #0e0e0e; /* 黒を白の変数に */
  --color-black: #fefefe; /* 白を黒の変数に */
}

body.dark-mode .page-transition-overlay::before {
  background-color: var(--color-white); /* ページ遷移時の背景も反転 */
}


/* --- ダークモード切り替えスイッチのスタイル --- */
.theme-switch-wrapper {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10;
}

.theme-switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
}

.theme-switch input {
  display: none;
}

.slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
}

.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 26px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 26px;
}

input:checked + .slider {
  background-color: #555; /* ダークモード時のスイッチ背景 */
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* アイコンのスタイル */
.slider svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #fff;
  transition: opacity 0.3s ease;
}

.sun-icon {
  left: 7px;
  opacity: 1;
}

.moon-icon {
  right: 7px;
  opacity: 0;
}

input:checked + .slider .sun-icon {
  opacity: 0;
}

input:checked + .slider .moon-icon {
  opacity: 1;
}

/* スマホでは少し小さく */
@media screen and (max-width: 768px) {
  .theme-switch-wrapper {
    right: 15px;
    bottom: 15px;
  }
  .theme-switch {
    height: 30px;
    width: 52px;
  }
  .slider:before {
    height: 22px;
    width: 22px;
  }
  input:checked + .slider:before {
    transform: translateX(22px);
  }
  .slider svg {
    width: 16px;
    height: 16px;
  }
}

/* ロゴ */
body.dark-mode .header_logo:hover .live-up-logo {
  filter: drop-shadow(0 4px 8px rgba(254, 254, 254, 0.1));
}

/* SERVICEセクションの個別調整 */
body.dark-mode .service_circle {
  background-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .service_name {
  color: var(--color-black);
}

/* メニューボタンとナビゲーションボタンの背景 */
body.dark-mode .header_menu_btn,
body.dark-mode .about_btn,
body.dark-mode .service_btn,
body.dark-mode .news_btn,
body.dark-mode .btn_style {
  background-color: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ホバー時の効果も追加 */
body.dark-mode .header_menu_btn:hover,
body.dark-mode .about_btn:hover,
body.dark-mode .service_btn:hover,
body.dark-mode .news_btn:hover,
body.dark-mode .btn_style:hover {
  background-color: var(--color-black) !important;
  border: 1px solid var(--color-black) !important;
  color: transparent !important;
}

/* ボタンのホバーアニメーション文字色 */
body.dark-mode .btn_style::after {
  color: var(--color-white) !important;
}

body.dark-mode .btn_style:hover::after {
  color: var(--color-white) !important;
}

/* 地図のダークモード対応 */
body.dark-mode .company_section .map_block {
  filter: grayscale(100%) invert(85%) hue-rotate(180deg) brightness(1.1) contrast(1.1);
  transition: filter 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

body.dark-mode .company_section .map_block:hover {
  filter: grayscale(100%) invert(85%) hue-rotate(180deg) brightness(1.3) contrast(1.2);
}

/* フォーム要素のダークモード対応 */
body.dark-mode .form_input,
body.dark-mode .form_select,
body.dark-mode .form_textarea {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--color-black) !important;
}

/* フォーカス時の効果 */
body.dark-mode .form_input:focus,
body.dark-mode .form_select:focus,
body.dark-mode .form_textarea:focus {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  outline: none;
}

/* プレースホルダーの色 */
body.dark-mode .form_input::placeholder,
body.dark-mode .form_textarea::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* セレクトボックスの矢印も調整 */
body.dark-mode .select_wrapper::after {
  color: var(--color-black) !important;
}

/* ページトップ */
body.dark-mode .page-top-btn {
  background-color: #3c3c3c;
}

/* ページ移管 */
body.dark-mode .page-transition-circle {
  stroke: var(--color-white);
}

body.dark-mode .rotating-elements line {
  stroke: var(--color-white);
}

body.dark-mode .page-transition-logo svg {
  fill: var(--color-white);
}

body.dark-mode .page-transition-text {
  color: var(--color-white);
}