/* コンテナ ------------------------------------------------------------*/
.section {
  padding-block: 5em;
}

.container {
  width: 90%;
  margin-inline: auto;

  &.container_s {
    max-width: 950px;
  }
}

/* テキスト ------------------------------------------------------------*/
.fs20 {
  font-size: 2rem;
}

.fs24 {
  font-size: 2rem;

  @media(width >=750px) {
    font-size: 2.4rem;
  }
}

.fs40 {
  font-size: 6.9svw;

  @media(width >=750px) {
    font-size: 4rem;
  }
}

.fs50 {
  font-size: 7svw;

  @media(width >=750px) {
    font-size: 5rem;
  }
}

.fs55 {
  font-size: 5.5rem;
}

.fs60 {
  font-size: 6rem;
}

.fs90 {
  font-size: 9rem;
}

.eng {
  font-size: 10svw;
  line-height: 0.85;

  @media(width >=750px) {
    font-size: 7rem;
  }
}

.title {
  .eng+h2 {
    margin-block-start: -0.7em;
  }
}

.text_center {
  text-align: center;
}

/* コンテンツ ------------------------------------------------------------*/
#fv {
  .hero {
    position: relative;
    z-index: 0;

    >img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 80%;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: -2;
    }

    .container {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 5%;

      .text {
        padding-block: 18%;
      }

      .image {
        width: 35%;
        max-width: 253px;
        margin-inline-start: auto;
        position: relative;
        right: -3em;
        bottom: -1em;
      }
    }

    .loop-slider {
      position: relative;
      z-index: -1;

      &::before {
        content: '';
        width: 100%;
        height: 50%;
        background-color: #fff;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 0;
      }

      .swiper-wrapper {
        transition-timing-function: linear;

        .swiper-slide {
          width: 300px;

          img {
            display: block;
            width: 100%;
            height: auto;
          }
        }
      }
    }
  }
}

#message {
  .container {
    .fs40 {
      >span {
        display: inline-block;

        &:first-child {
          width: 100%;
        }
      }
    }

    .eng {
      color: var(--blue-light);
      position: relative;
      z-index: 1;

      span {
        display: inline-block;
      }
    }

    .image {
      text-align: center;
      padding: 20%;
      position: relative;
      z-index: 0;

      &::before {
        content: '';
        width: calc(100% - 4em);
        height: calc(100% - 2em);
        border-top: #fff solid 1px;
        border-bottom: #fff solid 1px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
      }

      &::after {
        content: '';
        width: calc(100% - 2em);
        height: calc(100% - 4em);
        border-left: #fff solid 1px;
        border-right: #fff solid 1px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
      }

      .bg_message {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;

        &::before {
          content: '';
          background-image: linear-gradient(to right, var(--blue), var(--blue-light));
          width: 100%;
          height: 100%;
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
          opacity: .4;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          opacity: .8;
        }
      }
    }
  }
}

#features {
  position: relative;
  z-index: 0;

  &::before,
  &::after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

  &::before {
    content: '';
    width: 100%;
    height: 100%;
    background: url(../images/bg_features.webp) no-repeat center center / cover;
  }

  &::after {
    content: '';
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, var(--blue-pale) 0%, rgba(229, 240, 247, 0.8) 100%);
  }

  >.eng {
    position: absolute;
    top: -0.1em;
  }

  .container {
    .title {
      .fs50 {
        @media(width<750px) {
          font-size: 6.6svw;
        }
      }
    }

    .inner {
      display: grid;
      gap: 3em;

      @media (width>=750px) {
        grid-template-columns: repeat(2, 1fr);
      }

      @media (width>=1100px) {
        grid-template-columns: repeat(3, 1fr);
      }

      @media (width>=1500px) {
        grid-template-columns: repeat(4, 1fr);
      }

      .feature {
        background-color: rgba(255, 255, 255, 0.8);
        box-shadow: 0px 0px 2em rgba(9, 45, 77, 0.1);
        padding: 5%;

        &:last-child {
          .text {
            p {
              line-height: 1.25;
            }
          }
        }

        .text {
          background-repeat: no-repeat;
          background-position: 50% 50%;
          background-size: contain;
          padding-block: 8%;

          p {
            font-weight: 700;
            line-height: 0.8;
            position: relative;
            top: -0.4em;

            br+.fs40 {
              position: relative;
              bottom: -0.35em;
            }
          }

          .note {
            width: 100%;
            font-weight: normal;
            display: block;
            position: absolute;
            bottom: -1.75em;
            left: 0;
          }
        }
      }
    }
  }
}

#inquery {
  .container {
    max-width: 800px;

    .title {
      h2 {
        margin-block-end: 0.25em;
      }
    }

    .buttons {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      justify-content: center;
      gap: 1em 2em;

      @media(width>=750px) {
        grid-template-columns: repeat(2, 1fr);
      }

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

#requirements {
  background-image: linear-gradient(to bottom, #fff 0%, var(--gray-pale) 100%);

  .container {
    .text {
      p {
        span {
          display: inline-block;
        }
      }
    }

    table {
      border-top: #ccc solid 1px;

      tr {

        th,
        td {
          padding: 0.5em 1em;
          border-bottom: #ccc solid 1px;

          @media(width>=1100px) {
            padding: 1em 1.5em;
          }
        }

        th {
          min-width: 90px;
          background-color: var(--gray-light);
          text-align: left;
          vertical-align: top;
        }

        td {
          background-color: #fff;
        }
      }
    }
  }
}

#career {
  position: relative;
  z-index: 0;

  >.eng {
    position: absolute;
    top: -0.1em;
  }

  .container {
    .career {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 2em 5%;

      &+.career {
        margin-block-start: 2em;

        @media(width>=750px) {
          margin-block-start: 1em;
        }
      }

      @media(width>=750px) {
        &:nth-of-type(even) {
          flex-direction: row-reverse;
        }
      }

      .image {
        width: 100%;

        @media(width>=750px) {
          width: 270px;
          min-width: 270px;
        }

        img {
          width: 100%;
        }
      }

      .text {
        @media(width>=750px) {
          width: calc(76% - 270px);
        }

        h3 {
          @media(width<750px) {
            text-align: center;
          }
        }
      }
    }
  }
}

#interview {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20500%2046%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%200L250%2046L0%200H500Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 50% auto;

  @media(width>=1100px) {
    background-size: 500px auto;
  }

  .interview {
    .card {
      max-width: 290px;
      height: auto;
      background-color: #fff;
      border-radius: 1em;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .body {
        padding: 1.25em 1.25em 0;
        flex: 1;
        display: flex;
        flex-direction: column;
      }

      .image {
        text-align: center;
        line-height: 0;
        margin-block: auto -1px;
      }

      .footer {
        background: var(--blue);
        padding: 0.6em 1.25em 1em;
      }
    }
  }
}

#inquery02 {
  .container {
    .title {
      h2 {
        margin-block-end: 0.25em;
      }
    }

    .button {
      a {
        img {
          filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(1850%) hue-rotate(189deg) brightness(88%) contrast(103%);
        }
      }
    }
  }
}

/* フォーム ------------------------------------------------------------*/
#form {
  background-image: linear-gradient(180deg, rgba(229, 240, 247, 1) 0%, rgba(229, 240, 247, 0) 50%);
  position: relative;

  &::before {
    content: '';
    width: 100%;
    height: 10em;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20500%2046%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%200L250%2046L0%200H500Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: 25% auto;
    position: absolute;
    top: 0;
    left: 0;
  }

  .input_box {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    row-gap: 0.5em;

    @media(width>=750px) {
      grid-template-columns: 15em auto;
    }

    &+.input_box {
      margin-block-start: 2em;
    }

    label {
      font-weight: bold;
    }

    .badge {
      margin-inline-start: 0.5em;
      position: relative;
      top: -0.1em;
    }

    .form-control {
      background-color: var(--gray-light);
    }
  }
}

/* フッター ------------------------------------------------------------*/
#footer {
  .gotop {
    width: 90%;
    max-width: 950px;
    text-align: right;
    margin-inline: auto;
  }

  .wrap {
    color: #fff;
    background-color: var(--blue);
    padding-block: 3em 2em;

    .inner {
      width: 90%;
      max-width: 950px;
      margin-inline: auto;

      .button {
        margin-block-end: 1em;

        @media(width>=750px) {
          margin-block-end: -3.5em;
        }
      }

      address {
        font-style: normal;
      }

      .btn {
        background-color: rgba(255, 255, 255, .1);
      }
    }
  }
}