@charset "UTF-8";
/* ========================================
  入院
======================================== */
@layer page {
  .hospitalization-nav ul li {
    border-top: 1px solid #a9a9a9;
  }
  .hospitalization-nav ul li:last-child {
    border-bottom: 1px solid #a9a9a9;
  }
  .hospitalization-nav ul li a {
    display: grid;
    align-items: center;
    min-height: 196px;
    padding-block: 40px;
  }
  @media screen and (max-width: 767px) {
    .hospitalization-nav ul li a {
      min-height: 37.3333333333vw;
      padding-block: 5.3333333333vw;
    }
  }
  @media (any-hover: hover) {
    .hospitalization-nav ul li a {
      transition: color 0.5s;
    }
    .hospitalization-nav ul li a:hover {
      color: var(--colorPrimary);
    }
  }
  .hospitalization-necessaries__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 20px;
  }
  @media screen and (max-width: 767px) {
    .hospitalization-necessaries__list {
      grid-template-columns: repeat(2, 1fr);
      gap: 10.6666666667vw 5.3333333333vw;
    }
  }
  .hospitalization-necessaries__item {
    text-align: center;
  }
  .hospitalization-necessaries__input {
    display: none;
  }
  .hospitalization-necessaries__img {
    display: grid;
    place-items: center;
    height: 110px;
    opacity: 0.4;
    filter: saturate(0.2);
    transition: 0.2s ease;
  }
  @media screen and (max-width: 767px) {
    .hospitalization-necessaries__img {
      height: 29.3333333333vw;
    }
  }
  .hospitalization-necessaries__control-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-top: 40px;
    font-weight: 600;
  }
  @media screen and (max-width: 767px) {
    .hospitalization-necessaries__control-wrap {
      margin-top: 5.3333333333vw;
    }
  }
  .hospitalization-necessaries__control {
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    border: 2px solid rgba(0, 0, 0, 0.4);
  }
  @media screen and (max-width: 767px) {
    .hospitalization-necessaries__control {
      width: 5.3333333333vw;
      height: 5.3333333333vw;
    }
  }
  .hospitalization-necessaries__control::after {
    position: absolute;
    inset: -10% -5% 0 0;
    box-sizing: border-box;
    display: inline-block;
    width: 40%;
    height: 90%;
    margin: auto;
    content: "";
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: scale(0, 0) rotate(45deg);
    transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .hospitalization-necessaries input:checked ~ * {
    color: #008057;
    filter: saturate(1);
  }
  .hospitalization-necessaries input:checked ~ .hospitalization-necessaries__img {
    opacity: 1;
  }
  .hospitalization-necessaries input:checked ~ .hospitalization-necessaries__control-wrap .hospitalization-necessaries__control {
    background-color: #008057;
    border-color: #008057;
    opacity: 1;
  }
  .hospitalization-necessaries input:checked ~ .hospitalization-necessaries__control-wrap .hospitalization-necessaries__control::after {
    transform: scale(1, 1) rotate(45deg);
  }
}