@media screen and (min-width: 960px) {
  /* PC */
  /* ----------  ---------- */
  .toggle-button {
    height: 100%
    ;
    min-width: 80px;
    min-height: 35px;
  
    aspect-ratio: 2.25 / 1;
   
    display: block;
    background-color: #F2F3F5;
    position: relative;
    overflow: hidden;
  
    transition: background-color 0.2s ease-in-out;
  
    border-radius: 1000px;
  }
  
  .toggle-button::after {
    width: 30%;
    min-width: 25px;
  
    aspect-ratio: 1 / 1;
  
    content: "";
    display: block;
    cursor: pointer;
    border-radius: 50%;
  
    transform: translateX(5px);
  
    background-color: #FFFFFD;
    transition: transform 0.2s ease-in-out;
  }
  
  .toggle-button.is-active {
    background-color: #106DFF;
  }
  
  .toggle-button.is-active::after {
    transform: translateX(50px);
  }
}

@media screen and (max-width: 959px) {
  /* Tablet and Mobile */
  /* ----------  ---------- */
  .toggle-button {
    height: 100%
    ;
    min-width: 40px;
    min-height: 25px;
  
    aspect-ratio: 2.25 / 1;
   
    display: block;
    background-color: #F2F3F5;
    position: relative;
    overflow: hidden;
  
    transition: background-color 0.2s ease-in-out;
  
    border-radius: 1000px;
  }
  
  .toggle-button::after {
    width: 30%;
    min-width: 15px;
  
    aspect-ratio: 1 / 1;
  
    content: "";
    display: block;
    cursor: pointer;
    border-radius: 50%;
  
    transform: translateX(5px);
  
    background-color: #FFFFFD;
    transition: transform 0.2s ease-in-out;
  }
  
  .toggle-button.is-active {
    background-color: #106DFF;
  }
  
  .toggle-button.is-active::after {
    transform: translateX(2rem);
  }
}