@charset "utf-8";

:root {
  --color-red: #bd0000;
  --color-yellow: #FFECB2;
  --color-orange: #FA7C00;
  --color-gray: #E6E1D7;
  --color-beige: #FAF6EE;
  --content-width: 117rem;
  --radius: 0.8rem;
}

main {
  line-height: 1.8;

  *,
  *::before,
  *::after {
    box-sizing: border-box;

  }

  p {
    line-height: 1.8;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  h1,
  h2,
  h3,
  h4,
  button,
  input,
  label,
  li {
    line-height: 1.5;
  }

}

.u-flex {
  display: flex;
}

.u-bold {
  font-weight: 600;
}

.u-center {
  text-align: center;
}

.u-pc-center {
  text-align: left;

  @media (min-width: 768px) {
    text-align: center;
  }
}

.u-red {
  color: var(--color-red);
}

.u-orange {
  color: var(--color-orange);
}

.u-list-dot {
  li {
    font-size: 1.4rem;
    padding-left: 1.3em;
    position: relative;

    &:not(:last-child) {
      margin-bottom: 0.3em;
    }

    &::before {
      content: "";
      position: absolute;
      left: 0.5em;
      top: 0.65em;
      width: 0.25em;
      height: 0.25em;
      border-radius: 50%;
      background: currentColor;
    }
  }
}

.u-note {
  li {
    font-size: 1.4rem;
    padding-left: 1em;
    position: relative;

    &::before {
      content: "※";
      position: absolute;
      left: 0;
    }
  }
}

.u-gray-border {
  background: #fff;
  border-radius: var(--radius);
  border: 0.2rem solid var(--color-gray)
}

.c-button {
  width: 100%;

  a {
    line-height: 1.5;
    border-radius: 50rem;
    color: var(--color-red);
    border: 0.2rem solid var(--color-red);
    font-size: 1.6rem;
    font-weight: 500;
    padding: 0.5em 2.8em;
    margin-inline: auto;
    display: block;
    width: 100%;
    max-width: 50rem;
    text-align: center;
    transition: 0.3s;
    position: relative;

    @media (min-width: 768px) {
      font-size: 1.8rem;
    }

    &:hover {
      background: var(--color-red);
      color: #fff;

      &::before,
      &::after {
        background: #fff;
        right: 1.5rem;
      }
    }

    &::before,
    &::after {
      position: absolute;
      content: "";
      top: 0;
      bottom: 0;
      margin: auto 0;
      right: 2rem;
      height: 0.2rem;
      transition: 0.3s;
      background: var(--color-red);
    }

    &::before {
      width: 1.8rem;
      bottom: -0.2rem;
    }

    &::after {
      width: 0.6rem;
      transform: rotate(45deg);
      top: -0.3rem;
    }
  }

  &.-cta {
    a {
      max-width: 57rem;
      font-weight: 600;
      padding: 1.2rem 6rem;
      font-size: 1.8rem;
      background: var(--color-red);
      border: 0.3rem solid #fff;
      color: #fff;
      box-shadow: 0px 0.6rem 0 #600000;

      @media (min-width: 768px) {
        font-size: 2.4rem;
      }

      &:hover {
        transform: translateY(6px);
        box-shadow: 0px 0.2rem 0 #600000;
        color: #fff;
      }

      &::before {
        width: 2.3rem;
      }

      &::after {
        width: 0.8rem;
        top: -0.4rem;
      }

      &::before,
      &::after {
        background: #fff;
      }
    }
  }
}

.bg-beige {
  background: var(--color-beige);
}

.bg-red,
.bg-orange {
  color: #fff;
  border-radius: var(--radius);
  text-align: center;
  padding: 1rem;
  margin: 0 auto 2rem;
  font-size: 1.6rem;

  @media (min-width: 768px) {
    padding: 1.5rem;
    margin: 0 auto 4rem;
    font-size: 2rem;
  }
}

.bg-red {
  background: var(--color-red);
}

.bg-orange {
  background: var(--color-orange);
}

.black-border {
  font-size: 1.3rem;
  font-weight: 600;
  border: 0.2rem solid currentColor;
  text-align: center;
  line-height: 1.4;
  padding: 0.25em 1em 0.3em;
  display: block;
  width: fit-content;

  @media (min-width: 768px) {
    font-size: 1.4rem;
    padding: 0.25em 2.5em 0.3em;
  }
}

.l-inner {
  width: 90%;
  max-width: var(--content-width);
  margin-inline: auto;
}

.l-section {
  padding: 5rem 0;

  @media (min-width: 768px) {
    padding: 8rem 0;
  }

  .l-section__text {
    margin: 0 0 4rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    @media (min-width: 768px) {
      margin: 0 0 6rem;
    }

    p {
      @media (min-width: 768px) {
        line-height: 2.4;
      }
    }
  }

  .l-section__title {
    font-weight: 600;
    line-height: 1.4;
    margin: 0 auto 4rem;
    font-size: 2.2rem;
    position: relative;

    @media (min-width: 768px) {
      margin: 0 auto 6rem;
      font-size: 3.6rem;
    }

    small {
      font-size: 0.7em;
    }

    .l-section__title-en {
      align-items: center;
      color: var(--color-red);
      display: flex;
      line-height: 1.5;
      font-size: 1.4rem;
      margin-bottom: 1rem;
      position: relative;

      @media (min-width: 768px) {
        font-size: 1.6rem;
        margin-bottom: 2rem;
      }

      &:lang(en) {
        font-family: "Roboto", sans-serif;
      }

      &::after {
        background-color: currentColor;
        content: "";
        height: 1px;
        margin-left: 2rem;
        width: 10rem;
      }
    }
  }

  &.l-mv {
    background: url("../img/happylth_mv_bg.jpg") no-repeat center bottom / cover;
    padding: 4rem 0;

    @media (min-width: 768px) {
      padding: 5rem 0;
    }

    .u-flex {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 3rem;
      flex-direction: column;

      @media (min-width: 768px) {
        flex-direction: row;
      }

      .l-mv__text {
        flex: 1;

        @media (max-width: 767px) {
          background: url("../img/happylth_mv_img.png") no-repeat top right / 15rem;
        }

        @media (max-width: 390px) {
          background: url("../img/happylth_mv_img.png") no-repeat top right / 12rem;
        }

        .l-mv__text-logo {
          display: flex;
          flex-direction: column;
          gap: 3rem;
          margin: 0 0 5rem;

          @media (max-width: 767px) {
            gap: 2rem;
            margin: 0 0 2rem;
            width: 45vw;
            max-width: 20rem;
          }
        }

        h1 {
          font-size: 1.8rem;
          margin-bottom: 1.5rem;
          text-shadow: 0 0 10px #fff;

          @media (min-width: 768px) {
            font-size: 3.6rem;
            margin-bottom: 3rem;
          }

          .u-orange {
            font-size: 1.3em;

            @media (min-width: 768px) {
              font-size: 4.6rem;
            }
          }
        }

        .catch {
          font-size: 1.4rem;

          @media (min-width: 768px) {
            font-size: 1.125em;
            letter-spacing: 0.05em;
            line-height: 2;
          }
        }
      }

      .l-mv__img {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4rem;
        align-items: center;

        img {
          margin-left: auto;

          @media (max-width: 767px) {
            display: none;
          }
        }

        .c-button.-cta {
          a {
            border: none;
          }
        }
      }
    }
  }

  &.l-contact {
    background: var(--color-yellow);
    border-top: 1px solid var(--color-red);
    border-bottom: 1px solid var(--color-red);
    padding: 3rem 0;

    @media (min-width: 768px) {
      padding: 6rem 0;
    }

    .u-flex {
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      flex-direction: column;

      @media (min-width: 768px) {
        flex-direction: row;
      }

      h2 {
        flex: 1;
        text-align: center;
        font-weight: 500;
        font-size: 2rem;

        @media (min-width: 768px) {
          font-size: 2.6rem;
        }
      }

      .c-button {
        flex: 1;

        a {

          @media (min-width: 768px) {
            margin: 0 0 0 auto;
          }
        }
      }
    }
  }

  &#achievement {
    padding: 4rem 0;

    .black-border {
      font-weight: 500;
      margin: 0 auto 3rem;

      @media (max-width: 767px) {
        margin: 0 auto 2rem;
      }
    }

    img {
      margin: 0 auto 3rem;

      @media (max-width: 767px) {
        margin: 0 auto 2rem;
        width: 80%;
      }
    }

    p {
      font-size: 1.2rem;

      .gray {
        color: #999;
      }
    }
  }

  &#problem {
    .problem-card {
      display: grid;
      justify-content: center;
      gap: 4rem 1rem;
      grid-template-columns: repeat(2, minmax(0, 1fr));

      @media (min-width: 768px) {
        grid-template-columns: repeat(6, 18.5rem);
        gap: 5rem 3rem;
      }

      .problem-card__item {
        position: relative;
        text-align: center;
        padding: 4rem 0.5em 2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;

        @media (min-width: 768px) {
          grid-column: span 2;
          min-width: 37rem;
          padding: 5rem 2rem 2rem;
        }


        .problem-card__item-title {
          position: absolute;
          left: 0;
          right: 0;
          width: fit-content;
          line-height: 1;
          font-size: 1.4rem;
          font-weight: 600;
          padding: 1rem 2.5rem;
          top: -1.5rem;
          margin: auto;
          background: var(--color-red);
          color: #fff;
          border-radius: 50rem;
        }

        .problem-card__item-text {
          font-weight: 500;
          font-size: 1.3rem;
          line-height: 1.6;
          display: flex;
          align-items: center;
          gap: 2rem;

          @media (min-width: 768px) {
            height: 2em;
            font-size: 1.8rem;
          }
        }
      }

      .problem-card__item:nth-child(1) {
        @media (min-width: 768px) {
          grid-column: 2 / span 2;
        }
      }

      .problem-card__item:nth-child(2) {
        @media (min-width: 768px) {
          grid-column: 4 / span 2;
        }
      }
    }
  }

  &#ba {
    .l-section__title {
      img {
        display: inline-block;
        vertical-align: middle;
        margin-top: -0.7rem;
        margin-bottom: 0.5rem;
      }
    }

    h3 {
      border-bottom: 1px solid currentColor;
      width: fit-content;
      line-height: 1.3;

      @media (max-width: 767px) {
        font-size: 1.5rem;
      }
    }

    .before_after {
      margin: 3rem auto 4rem;
      position: relative;
      display: flex;
      gap: 1rem;
      justify-content: space-between;
      flex-direction: column;

      @media (min-width: 768px) {
        flex-direction: row;
        margin: 4rem auto 5rem;
      }

      .before_after__arrow {
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;

        @media (min-width: 768px) {
          min-width: 3rem;
        }

        svg {
          @media (max-width: 767px) {
            transform: rotate(90deg);
          }
        }
      }

      .before_after__card {
        @media (min-width: 768px) {
          min-width: 56rem;
        }

        &.-after {
          border-color: var(--color-red);

          h4 {
            background: var(--color-red);
          }

          .before_after__card-inner {
            .card_case {
              dt {
                background: var(--color-orange);
              }
            }
          }
        }

        h4 {
          background: #555;
          width: calc(100% + 0.4rem);
          border-radius: var(--radius) var(--radius) 0 0;
          margin: -0.2rem auto;
          color: #fff;
          text-align: center;
          padding: 1rem;
          font-size: 1.8rem;

          @media (min-width: 768px) {
            margin: -0.2rem;
            padding: 1.5rem;
            font-size: 2rem;
          }

          span {
            font-size: 0.9em;
          }
        }

        .before_after__card-inner {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          gap: 2rem;
          padding: 2.5rem 2rem 2rem;

          @media (min-width: 768px) {
            gap: 4rem;
            padding: 3.3rem;
          }

          .before_after__card-inner-text {
            @media (min-width: 768px) {
              min-height: 20rem;
            }

            p {
              &:not(:last-child) {
                margin-bottom: 1em;
              }
            }
          }

          .bg-beige {
            width: 100%;
            padding: 2rem;

            p {
              line-height: 1.7;

              strong {
                display: block;
                font-size: 2rem;

                .num {
                  font-size: 1.6em;
                  font-weight: 800;
                  line-height: 1;
                }
              }

              small {
                display: block;
                font-size: 1.4rem;
              }
            }
          }

          .card_case {
            width: 100%;

            dt {
              background: #bbb;
              border-radius: 5rem;
              color: #fff;
              text-align: center;
              padding: 0.5em;
              margin: 0 auto 2rem;
              font-size: 1.5rem;
              font-weight: 600;
              width: 100%;
            }

            dd {
              display: flex;
              flex-direction: column;
              gap: 4rem;

              strong.u-red {
                font-size: 1.25em;
              }

              .u-flex {
                gap: 1rem;
                flex-direction: column;

                @media (min-width: 768px) {
                  min-height: 28rem;
                  flex-direction: row;
                }
              }

              img {
                margin: auto;
              }
            }
          }
        }
      }
    }
  }

  &#flow {
    .flow-card.u-flex {
      gap: 3rem;
      flex-direction: column;

      @media (min-width: 768px) {
        flex-direction: row;
      }
    }

    .u-note {
      margin-top: 1.5rem;
    }
  }

  &#function {
    .admin-item {
      margin: 0 auto 6rem;

      .function-swiper {
        .function-swiper__card {
          box-shadow: inset 0 0 0 0.2rem var(--color-red);
          min-height: 55rem;

          @media (min-width: 768px) {
            min-height: 55rem;
          }
        }
      }
    }

    .mypage-item {
      .function-swiper {
        .function-swiper__card {
          box-shadow: inset 0 0 0 0.2rem var(--color-orange);
          min-height: 52rem;

          @media (min-width: 768px) {
            min-height: 55rem;
          }

          .bg-beige {
            dt {
              border: 0.2rem solid var(--color-orange);
              color: var(--color-orange);
            }
          }

          .function-swiper__card-img {
            overflow: hidden;

            .spimg {
              margin: -15rem 2rem 0 auto;

              @media (max-width: 767px) {
                margin: -13rem 1rem 0 auto;
                width: 30vw;
              }
            }
          }
        }
      }

      .swiper-button-prev,
      .swiper-button-next {
        background: var(--color-orange);
      }
    }

    .swiper-button-prev,
    .swiper-button-next {
      border-radius: 50%;
      background: var(--color-red);
      color: #fff;
      width: 3rem;
      height: 3rem;
      padding: 0.5em;

      @media (min-width: 768px) {
        flex-direction: row;
        width: 4rem;
        height: 4rem;
        padding: 1rem;
      }
    }

    .swiper-button-prev {
      svg {
        margin-right: 0.3rem;
        transform: rotate(180deg);

        @media (min-width: 768px) {
          margin-right: 0.5rem;
        }
      }
    }

    .swiper-button-next {
      svg {
        margin-left: 0.3rem;

        @media (min-width: 768px) {
          margin-left: 0.5rem;
        }
      }
    }

    .swiper-slide {
      display: flex;
    }

    .function-swiper,
    .function-swiper .swiper-slide {
      box-sizing: border-box;

    }

    .function-swiper {
      .swiper-slide-active {
        .function-swiper__card {
          &::before {
            content: none;
          }
        }
      }

      .function-swiper__card {
        padding: 1.5rem;
        background: #fff;
        border-radius: var(--radius);
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        &::before {
          @media (min-width: 768px) {
            border-radius: var(--radius);
            background: #fff;
            opacity: 0.6;
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
          }
        }

        .bg-beige {
          width: 100%;
          padding: 1.5rem 1rem;
          border-radius: var(--radius);
          margin: 0 auto 1.5rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          min-height: 18rem;

          @media (min-width: 768px) {
            padding: 1.5rem 2rem;
          }

          dt {
            font-weight: 600;
            text-align: center;
            padding: 1rem;
            background: #fff;
            border: 2px solid var(--color-red);
            color: var(--color-red);
            border-radius: 50rem;
            line-height: 1;
            margin: 0 auto 1.5rem;
            width: 100%;
          }
        }

        .function-swiper__card-img {
          display: flex;
          flex-direction: column;
          gap: 1rem;
          position: relative;

          img {
            border: 0.18rem solid #c9c2b5;
          }
        }
      }

    }
  }

  &#schedule {
    .balloon {
      padding: 2rem 1.5rem;
      position: relative;

      p {
        line-height: 1.6;
        font-size: 1.4rem;
        font-weight: 600;

        @media (min-width: 768px) {
          font-size: 2.4rem;
        }
      }

      .arrow {
        position: absolute;
        margin: auto;
        bottom: -2.1rem;
        left: 0;
        right: 0;
        transform: rotate(90deg);
      }
    }

    .flow-list {
      gap: 2rem;
      flex-direction: column;

      @media (min-width: 768px) {
        flex-direction: row;
        gap: 1rem;
      }

      .flow-list__item {
        flex-direction: row;
        position: relative;
        gap: 1rem;

        @media (min-width: 768px) {
          flex-direction: column;
          gap: 1.5rem;
        }

        &:not(:last-child) {
          &::after {
            content: "";
            position: absolute;
            background-color: var(--color-red);
            -webkit-mask: url(../img/arrow.svg) center / cover no-repeat;
            mask: url(../img/arrow.svg) center / cover no-repeat;
            width: 2.2rem;
            height: 3rem;
            right: -1.7rem;
            top: 0;
            bottom: 0;
            margin: auto;
            z-index: 1;

            @media (max-width: 767px) {
              width: 1rem;
              height: 1.4rem;
              right: 0;
              left: 5rem;
              top: auto;
              bottom: -1.6rem;
              transform: rotate(90deg);
            }
          }
        }

        .flow-list__item-arrow {
          background: var(--color-red);
          color: #fff;
          font-weight: 600;
          font-size: 1.8rem;
          width: calc(100% - 1.5rem);
          position: relative;
          line-height: 1;
          padding: 0.6em 0.6em 0.6em 1.3em;

          @media (max-width: 767px) {
            width: calc(1.6rem + 2rem);
            font-size: 1.6rem;
            padding: 1rem;
            height: auto;
            margin-bottom: 1.5rem;
            -webkit-writing-mode: vertical-rl;
            -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
            -webkit-text-orientation: upright;
            -ms-text-orientation: upright;
            text-orientation: upright;
          }

          &::after {
            content: "";
            position: absolute;
            clip-path: polygon(100% 50%, 0 0, 0 100%);
            background: var(--color-red);
            width: 1.5rem;
            height: 100%;
            right: -1.5rem;
            top: 0;
            bottom: 0;

            @media (max-width: 767px) {
              right: 0;
              top: auto;
              margin: 0 auto;
              bottom: -1.48rem;
              clip-path: polygon(50% 100%, 0 0, 100% 0);
              width: 100%;
              height: 1.5rem;
            }
          }
        }

        .flow-list__item-card {
          flex-direction: column;
          background: #fff;

          @media (max-width: 767px) {
            width: calc(100% - 5rem);
          }

          @media (min-width: 768px) {
            flex: calc(100% / 5);
            min-width: 225px;
            align-items: center;
          }

          .flow-list__item-card-title {
            color: var(--color-red);
            border-bottom: 1px solid currentColor;
            font-weight: 800;
            font-size: 1.5rem;
            padding: 1em 0.5em 0.8em;
            line-height: 1;
            text-align: center;
            width: 100%;
            margin-inline: auto;
            background: #FFF5E0;
            border-radius: var(--radius) var(--radius) 0 0;

            @media (min-width: 768px) {
              background: none;
              font-size: 1.8rem;
              padding: 1em 0.5em 0.8em;
              width: calc(100% - 3rem);
            }
          }

          .bgs {
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 100%;

            @media (min-width: 768px) {
              flex-direction: column;
            }
          }

          .bg-white,
          .bg-cream {
            width: 100%
          }

          .bg-white {
            display: flex;
            flex-direction: row;

            @media (min-width: 768px) {
              flex-direction: column;
            }

            @media (max-width: 767px) {
              width: 40%;
            }

            figure {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              padding: 1.5rem;
              margin: auto;

              @media (min-width: 768px) {
                gap: 1rem;
                padding: 1rem 1rem 2.5rem;
              }

              figcaption {
                font-weight: 500;
                font-size: 1.5rem;
                line-height: 1;

                @media (min-width: 768px) {
                  font-size: 1.8rem;
                }

              }
            }
          }

          .bg-cream {
            border-radius: 0 0 var(--radius) var(--radius);
            border-top: 0.2rem solid var(--color-gray);
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-weight: 500;
            font-size: 1.4rem;
            padding: 2rem 1.5rem;
            height: 100%;

            @media (min-width: 768px) {
              background: #FFF5E0;
            }

            @media (max-width: 767px) {
              border-top: none;
              border-left: 0.1rem solid var(--color-gray);
              padding: 1.5rem;
              border-radius: 0 0 var(--radius) 0;
              width: 60%;
            }

            ul.u-list-dot {
              margin: 0 auto 0.5em;
            }
          }
        }
      }
    }
  }

  &#faq {
    .faq-list {
      padding: 2rem;

      &:not(:last-child) {
        margin-bottom: 2rem;
      }

      .q,
      .a {
        font-size: 2.4rem;
        font-weight: 500;
        line-height: 1;
      }

      dt,
      dd {
        gap: 2rem;
        flex-direction: row;
        align-items: baseline;

        @media (min-width: 768px) {
          font-size: 1.8rem;
        }
      }

      dt {
        border-bottom: 1px solid var(--color-gray);
        color: var(--color-red);
        font-weight: 600;
        padding-bottom: 1em;
        margin-bottom: 1em;
      }
    }
  }
}