:root {
  --accent-color: #3a7575;
  --sub-accent-color: #765d3c;
  --assort-color: #f0f7f7;
  --alert-color: #ff7d0b;
  --slide-left: 1em;
  --slide-right: -1em;
  --slide-up: -1em;
  --slide-time: 1.2s;
  --slide-delay: 0.8s;
  --fade-time: 1.2s;
  --fade-delay: 0.8s;
  --border-radius: 3px;
}

.target.slidein,
.smb-section__subtitle {
  transform: translateX(var(--slide-left));
  opacity: 0;
  transition: opacity var(--fade-time) ease-in var(--fade-delay), transform var(--slide-time) ease-out var(--slide-delay);

  &.active {
    transform: translateX(0);
    opacity: 1;
  }
}

.l-contents__inner {
  &:first-child {
    padding-top: 0;
  }

  & main {
    & section {

      &.smb-section-with-bgimage .smb-section__inner .smb-section__header .smb-section__title::before,
      >.smb-section__fixed-background~.smb-section__inner .smb-section__header .smb-section__title::before {
        display: none;
      }

      .smb-section__inner {
        .smb-section__header {
          >.smb-section__title {
            --_font-size-level: 2;
            font-family: "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "MS PMincho", "MS 明朝", serif;
            display: inline-block;
            position: relative;
            margin: 0;
            color: var(--sub-accent-color);

            @media screen and (width >=782px) {
              --_font-size-level: 3;
            }

            &::before {
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-75%, -160%);
              background-image: url(assets/img/amane-bird.webp);
              background-repeat: no-repeat;
              background-size: contain;
              width: 50px;
              height: 50px;
              opacity: 0.0;
              transition: opacity var(--fade-time) ease-in, transform var(--slide-time) ease-out;

              @media screen and (width >=782px) {
                top: 50%;
                left: 0;
                width: 100px;
                height: 100px;
                transform: translate(-100%, -100%);
              }
            }

            &.active::before {
              transform: translate(-50%, -140%);
              opacity: 0.4;

              @media screen and (width >=782px) {
                transform: translate(-80%, -70%);
                opacity: 0.5;
              }
            }
          }
        }

        >.smb-section__subtitle {
          --_font-size-level: 2;
          font-size: var(--fluid-font-size);
        }
      }
    }
  }

  #feature {
    .smb-section__body .wp-block-column p span {
      @media screen and (width >=782px) {
        display: block;
      }
    }
  }

  #support {
    .smb-section__body .wp-block-group.has-border-color.is-layout-constrained {
      padding-top: 2px;

      .wp-block-heading {
        margin-left: -17px !important;

        .sme-badge {
          border-radius: var(--border-radius) 0 var(--border-radius) 0;
        }
      }
    }
  }
}

.page {
  .c-page-header {
    max-height: 80px;
    font-size: 1.2rem;

    @media screen and (width >=782px) {
      max-height: 150px;
      font-size: 1.8rem;
    }
  }

  .header-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 80px;
    overflow: hidden;
    font-size: 1.2rem;

    @media screen and (width >=782px) {
      max-height: 150px;
      font-size: 1.8rem;
    }

    >img {
      object-fit: cover;
      width: 100%;
      height: auto;
    }
  }

  .l-contents__inner .l-contents__main {
    .c-entry__header .c-entry__title {
      font-family: "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "MS PMincho", "MS 明朝", serif;
      font-size: 1.25rem;
      letter-spacing: 0.04rem;
      color: var(--sub-accent-color);
      padding: 0.8rem 0.5rem;
      border-left: 3px solid var(--accent-color);

      @media screen and (width >=782px) {
        font-size: 2rem;
        letter-spacing: 0.07rem;
        padding: 0.8rem 0.8rem;
        border-left-width: 4px;
      }
    }

    #contact {
      text-align: center;

      @media screen and (width >=782px) {
        text-align: right;
      }

      & p {
        margin: 0;
      }
    }

    #area .smb-section__body {
      margin-top: 0;

      .cover-area .wp-block-group p:first-child {
        text-wrap: nowrap;
        color: var(--accent-color);

        strong {
          text-wrap: nowrap;
        }
      }
    }

    #flow .smb-step .smb-step__item__title>span {
      color: var(--sub-accent-color);
    }

    #career {
      >.smb-section-with-bgimage__bgimage {
        filter: blur(10px);
      }

      .smb-information .smb-information__item>.c-row>.c-row__col:first-child {
        color: var(--accent-color);
        font-weight: bold;
      }
    }

    #medical-dx .wp-block-list>li::before {
      border-color: var(--accent-color);
    }

    #target .wp-block-list {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 0.3rem 1rem;
      padding: 0;

      >li {
        margin: 0;
        padding: 0;

        &::before {
          content: '';
          display: inline-block;
          width: 1rem;
          height: 1rem;
          background-image: url(assets/img/icon-clover.webp);
          background-size: contain;
          background-repeat: no-repeat;
          margin-right: 0.3rem;
          margin-bottom: 0.25rem;
          vertical-align: middle;
        }
      }
    }

    #info {
      .footer-logo {
        max-width: 480px;
        margin: 0;
      }

      .wp-block-columns .wp-block-column {
        >p {
          margin-top: 0.5rem;

          +h4 {
            margin-top: 1.5rem;
          }
        }
      }
    }

    h2.wp-block-heading {
      color: var(--sub-accent-color);
      border-bottom: 1px solid var(--sub-accent-color);
    }

    .wp-block-list li {

      &::marker,
      &::before {
        color: var(--accent-color);
        border-color: var(--accent-color);
      }
    }

    .wp-block-group.download {
      background-color: var(--_lightest-color-gray);
      padding: 1.5rem 1rem 2rem;
      border-radius: var(--border-radius);
      text-align: center;

      >p {
        font-weight: bold;
      }

      .wp-block-file>a {
        position: relative;
        color: white;
        text-decoration: none;
        background-color: var(--accent-color);
        border-radius: var(--border-radius);
        padding: 0.5rem 4rem 0.6rem;

        &::before {
          content: url(assets/img/icon-pdf.svg);
          display: inline-block;
          vertical-align: middle;
          margin-right: 0.3rem;
          width: 1rem;
          height: 1.3rem;
        }

        &::after {
          content: '';
          display: inline-block;
          position: absolute;
          border-width: 0 2px 2px 0;
          border-style: solid;
          border-color: white;
          width: 0.5rem;
          height: 0.5rem;
          top: 43%;
          right: 0.6rem;
          vertical-align: middle;
          transform: translateY(-50%) rotate(45deg);
        }

        &:hover {
          filter: brightness(90%);
        }
      }
    }
  }

  &.slug-recruit,
  &.slug-privacy-policy,
  &.slug-contact {
    .l-contents__main .c-entry__body {
      h3.wp-block-heading {
        padding: 0.1rem 0.8rem;
        border-left: 3px solid var(--sub-accent-color);

        @media screen and (width>=782px) {
          border-left-width: 4px;
        }
      }

      .smb-section__body>.wp-block-group.is-layout-constrained:not(:first-child) {
        margin-top: 2.5rem;
      }

      .form-container {
        padding: 0;

        @media screen and (width>=782px) {
          background-color: var(--assort-color);
          border-radius: 10px;
          padding: 1rem 2rem 3rem;
        }


        .wpcf7>.wpcf7-form {

          p:first-of-type:not(:has(>label)),
          p>label {
            color: var(--accent-color);
            font-weight: bold;
            line-height: 2rem;
            position: relative;
            border-left: 2px solid var(--sub-accent-color);
            padding-left: 0.6rem;

            .required {
              font-size: 0.8rem;
              color: var(--sub-accent-color);

              &::before {
                content: '※';
                display: inline-block;
              }
            }
          }

          .note {
            color: var(--sub-accent-color);
            font-size: 0.8rem;

            &::before {
              content: '※';
              display: inline-block;
            }
          }

          .wpcf7-not-valid-tip {
            background-color: var(--alert-color);
            color: white;
            font-weight: bold;
            margin: 0.5rem 0;
            padding: 0 0.5rem;
            border-radius: var(--border-radius);
            line-height: 2;
          }

          .wpcf7-response-output {
            border-color: var(--accent-color);
            border-radius: var(--border-radius);
            padding: 0.5rem 1rem;
            background-color: #F2FEFE;
          }

          &.invalid .wpcf7-response-output {
            border-color: var(--alert-color);
            background-color: #FFF5EC;

          }
        }
      }
    }
  }
}

@media screen and (width >=1024px) {
  .l-header {
    &:not([aria-hidden=true]) {
      transition: background-color 0.3s;
    }

    .l-2row-header__row {
      &:first-child {
        padding-bottom: 0;

        .c-row--middle {
          align-items: start;
        }
      }

      &:last-child {
        margin-top: -1rem;
      }

      .p-global-nav .c-navbar {
        justify-content: flex-end;

        >.menu-item {
          flex-grow: inherit;
          text-align: center;

          >a {
            padding-top: 0;
          }

          &:last-child {
            display: inline-flex;
            align-items: start;
            position: relative;

            &::after {
              content: '▼';
              position: absolute;
              top: 6px;
              right: 0;
              font-size: 8px;
            }

            &:hover::after {
              transform: translateY(2px);
              transition: transform 0.3s;
            }
          }
        }
      }

      .p-header-content .sub-navigation {
        display: flex;
        list-style: none;
        gap: 0.8em;
        padding-top: 0.8em;

        >li {
          >a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            font-weight: bold;
            line-height: 1;
            padding: 0.2em 0.6em 0.3em;
            text-decoration: none;
            border: 1px solid var(--accent-color);
            border-radius: var(--border-radius);
            transition: background-color 0.6s, border-color 0.5s, color 0.5s;

            &:hover {
              background-color: var(--sub-accent-color);
              color: white;
              border-color: var(--sub-accent-color);
            }
          }

          &:first-child {
            >a {
              background-color: var(--accent-color);
              color: white;

              &:hover {
                background-color: var(--sub-accent-color);
                color: white;
                border-color: var(--sub-accent-color);
              }
            }
          }
        }
      }
    }
  }
}

.l-footer {
  .l-footer-widget-area .c-widget .smb-information {
    .c-row__col--md-1-3 {
      @media screen and (width>=640px) {
        --_item-width: 40%;
      }

      @media screen and (width>=1024px) {
        --_item-width: 35%;
      }

      >.smb-information__item__label {
        color: var(--sub-accent-color);
        font-weight: bold;
        font-size: 0.8rem;

        @media screen and (width>=782px) {
          font-size: 1rem;
        }
      }
    }

    .c-row__col--md-2-3 {
      @media screen and (width>=640px) {
        --_item-width: 60%;
      }

      @media screen and (width>=1024px) {
        --_item-width: 65%;
      }

      >.smb-information__item__body {
        font-size: 0.82rem;

        @media screen and (width>=782px) {
          font-size: 1rem;
        }
      }
    }
  }

  .c-copyright {
    background-color: var(--accent-color);
  }
}

#page-top {
  border-radius: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 1rem);
  right: 0.5rem;
  transition: opacity 0.3s, transform 0.3s;

  &[aria-hidden=true] {
    transform: translateY(100%);
  }
}