header {position: relative; width: 100%; height: 73px; border-bottom: 1px solid var(--gray_dc); box-sizing: border-box; background: var(--black_1b);}
header.color_w {background: var(--wt);}
header .container {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
header .logo {width: 123px; height: auto;}
header .logo img {width: 100%; height: auto;}
header .switch {position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
header .switch ul {position: relative; display: flex; align-items: center; justify-content: center; width: 80px; height: 42px; padding: 5px; border-radius: 21px; background: var(--black_39); box-sizing: border-box; z-index: 1; gap: 6px;}
header .switch ul.color_w {background: var(--wt_f9); border: solid 1px var(--gray_dc);}
header .switch ul li {width: calc(100% / 2); cursor: pointer;}
header .switch ul li .child-box {width: 100%; height: auto;}
header .switch ul li .child-box .morning {width: 15px; height: auto; aspect-ratio: 1; margin: 0 auto; background: url(./../img/morning.png)no-repeat 50% 50%; background-size: cover;}
header .switch ul li.active .child-box .morning {width: 15px; height: auto; aspect-ratio: 1; margin: 0 auto; background: url(./../img/morning_on.png)no-repeat 50% 50%; background-size: cover;}
header .switch ul li .child-box .night {width: 13px; height: auto; aspect-ratio: 1; margin: 0 auto; background: url(./../img/night.png)no-repeat 50% 50%; background-size: cover;}
header .switch ul li.active .child-box .night {width: 13px; height: auto; aspect-ratio: 1; margin: 0 auto; background: url(./../img/night_on.png)no-repeat 50% 50%; background-size: cover;}
header .switch ul li.active:before {animation: before_move .3s linear alternate-reverse both; position: absolute; top: 50%; left: 5px; transform: translateY(-50%); content: ''; display: block; width: 32px; height: auto; aspect-ratio: 1; background: var(--pr); border-radius: 100%; z-index: -1;}
@keyframes before_move {
  0% {left: calc(100% - 37px);}
  100% {left: calc(100% - 5px);;}
}
header .switch ul li:last-of-type.active:before {animation: before_move .3s linear alternate both; left: auto; right: 5px;}
@keyframes before_move {
  0% {left: 5px;}
  100% {left: calc(100% - 37px);}
}