/* 個人HP / LPHP を行き来するスイッチ（2つのページで共通。同じ位置・同じ大きさ・同じ文字）
   ボタンの名前と行き先は js/site-switch.js の ITEMS にある */
.site-switch {
  position: fixed;
  z-index: 60;
  top: 19px;
  left: 50vw; /* スクロールバーのあるなしで位置が変わらないように、窓の幅を基準にする */
  transform: translateX(-50%);
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  height: 36px;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--sw-line);
  border-radius: 99px;
  background: var(--sw-bg);
  font-family: "Inter Tight", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* 個人HP：夜の見た目（黒地に明るい文字） */
.site-switch[data-theme="dark"] {
  --sw-fg: #f3f5f4;
  --sw-mute: rgba(243, 245, 244, 0.56);
  --sw-line: rgba(243, 245, 244, 0.22);
  --sw-bg: rgba(7, 8, 8, 0.55);
  --sw-on: #f3f5f4;
  --sw-on-fg: #070808;
}
/* LPHP：白い見た目（白地に黒い文字）。LPHP のヘッダーより上に出す */
.site-switch[data-theme="light"] {
  z-index: 600;
  --sw-fg: #0c0c0c;
  --sw-mute: rgba(12, 12, 12, 0.56);
  --sw-line: rgba(12, 12, 12, 0.18);
  --sw-bg: rgba(255, 255, 255, 0.7);
  --sw-on: #0c0c0c;
  --sw-on-fg: #ffffff;
}
/* 選ばれた側の印（滑るように動く） */
.site-switch__ind {
  position: absolute;
  left: 0; top: 3px; bottom: 3px;
  width: 0;
  border-radius: 99px;
  background: var(--sw-on);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-switch.is-init .site-switch__ind { transition: none; }
.site-switch a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 99px;
  color: var(--sw-mute);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.4s ease;
}
.site-switch a::after { content: none; }
.site-switch a:hover, .site-switch a:focus-visible { color: var(--sw-fg); }
.site-switch a.is-on { color: var(--sw-on-fg); }

/* スマホ幅：ロゴやメニューと重ならないように、ヘッダーのすぐ下の真ん中に置く */
@media (max-width: 820px) {
  .site-switch { top: 54px; height: 32px; font-size: 11px; }
  .site-switch a { padding: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-switch__ind, .site-switch a { transition: none; }
}