@charset "utf-8";

body {
  overflow-x: clip;
  position: relative;
  background-color: #F0F0F0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 1) 1px, transparent 1px);
  background-size: 6.25vw 6.25vw;

  @media (max-width: 768px) {
    background-size: 80px 80px;
  }
}

.-txtBand {
  color: transparent;
  --d: 0%;
  --color: #fff;
  background: linear-gradient(#052275,#052275) 0 100% /var(--d) 100% no-repeat; 
}

/* ↓↓↓ fv ↓↓↓ */
.fv {
  position: relative;
  margin-top: min(80px, 6.25vw);
  height: min(640px, 50vw);
  overflow-x: clip;
  @media (max-width: 768px) {
    margin-top: 64px;
    height: fit-content;
    padding-inline: 24px;
  }
  
  .info {
    position: absolute;
    background-color: #fff;
    border-radius: 0 20px 20px 0;
    padding: min(1.875vw,24px) min(2.5vw,32px);
    bottom: min(4.53125vw,58px);
    left: min(40px, 3.046875vw);
    z-index: 1;

    @media (max-width: 768px) {
      position: relative;
      width: fit-content;
      display: block;
      bottom: unset;
      left: unset;
      padding: 16px 32px;
      margin-left: calc(-24px + 2.666666666666667vw);
      margin-top: 55px;
    }
    
    &::before, &::after {
      content: '';
      position: absolute;
      top: max(-19px, -1.484375cqw);
      left: 0;
      width: min(20px, 1.5625cqw);
      height: min(20px, 1.5625cqw);
      background: url(../img/common/side-menu-deco.png) no-repeat;
      background-size: cover;
      @media (max-width: 768px) {
        &::before, &::after {
          top: -19px;
          left: 0;
          width: 20px;
          height: 20px;
        }
      }
    }
    &::after {
      scale: 1 -1;
      top: unset;
      bottom: max(-19px, -1.484375cqw);
      @media (max-width: 768px) {
        &::after {
          scale: 1 -1;
          top: unset;
          bottom: -19px;
        }
      }
    }

    .post {
      font-size: min(max(1.171875vw,1rem),1.5rem);
      font-weight: 700;
      letter-spacing: 0.04em;

      @media (max-width: 768px) {
        font-size: 1.3rem;
      }
    }

    .name {
      font-size: min(1.875vw,2.4rem);
      font-family: var(--text-poppins);
      font-weight: 500;
      letter-spacing: 0.04em;
      color: #052275;
      margin-top: min(1.25vw,16px);

      @media (max-width: 768px) {
        font-size: 2rem;
        line-height: 1.5384615384615385;
        margin-top: 8px;
      }
    }

    .year {
      font-size: min(max(1.015625vw,1rem),1.3rem);
      font-weight: 400;
      letter-spacing: 0.04em;
      margin-top: 0.3125cqw;

      @media (max-width: 768px) {
        font-size: 1.3rem;
        margin-top: 4px;
      }
    }
  }
  .inner {
    position: relative;
    max-width: 1280px;
    height: 100%;
    margin: 0 auto;
    container-type: inline-size;
    @media (max-width: 768px) {
      max-width: 100%;
    }
    .img {
      position: absolute;
      display: block;
      bottom: 6.09375cqw;
      right: 9.6875cqw;
      width: 75.78125cqw;
      @media (max-width: 768px) {
        position: relative;
        bottom: unset;
        right: unset;
        width: 327px;
        /* width: calc(327/375*100vw); */
        margin: 65px auto 0;
      }
    }
    .copy {
      position: absolute;
      top: 8.984375cqw;
      left: 57.8125cqw;
      z-index: 1;

      @media (max-width: 768px) {
        position: initial;
        margin-top: 56px;
      }

      .-txtBand {
        font-size: 1.875cqw;
        font-weight: 700;
        line-height: 2.4;
        letter-spacing: 0.04em;
        padding: 0.625cqw 0.9375cqw;

        @media (max-width: 768px) {
          font-size: 2rem;
          line-height: 2;
          padding: 4px 12px;
        }
      }

      .-pc {
        display: inline;
      }

      @media (max-width: 768px) {
        .-pc {
          display: none;
        }
        .-sp {
          display: inline;
        }
      }
    }
    div[class*="deco"] {
      position: absolute;
    }

    .deco01 {
      width: 3.75cqw;
      top: 0;
      left: 8.515625cqw;
    }
    .deco02 {
      width: 2.5cqw;
      top: 5.078125cqw;
      left: 17.578125cqw;
    }
    .deco03 {
      width: 3.75cqw;
      top: 10.546875cqw;
      left: 12.578125000000002cqw;
    }
    .deco04 {
      width: 7.8125cqw;
      top: 3.28125cqw;
      left: 33.4375cqw;
    }
    .deco05 {
      width: 7.8125cqw;
      top: 17.65625cqw;
      left: 0;
    }
    .deco06 {
      width: 2.5cqw;
      top: 17.5cqw;
      right: 3.90625cqw;
    }
    .deco07 {
      width: 23.203125cqw;
      bottom: 10.9375cqw;
      right: -1.640625cqw;
    }
    .deco08 {
      width: 15.625cqw;
      bottom: 3cqw;
      right: 24.53125cqw;
    }
    @media (max-width: 768px) {
      .deco01 {
        width: 33px;
        top: 10px;
        left: 0;
      }
      .deco02 {
        width: 24px;
        top: 165px;
        left: unset;
        right: 18px;
      }
      .deco03 {
        width: 37px;
        top: 470px;
        left: 215px;
      }
      .deco04 {
        width: 57px;
        top: 240px;
        left: 40px;
      }
      .deco05 {
        width: 68px;
        top: -24px;
        left: unset;
        right: 24px;
      }
      .deco06 {
        width: 24px;
        top: 402px;
        right: 18px;
      }
      .deco07 {
        width: 99px;
        bottom: unset;
        top: 324px;
        right: -40px;
        right: calc((150 + 40) * ((100vw - 375px) / (768 - 375)) - 40px);
      }
      .deco08 {
        width: 114px;
        bottom: unset;
        top: 383px;
        right: 40px;
        right: calc((240 - 40) * ((100vw - 375px) / (768 - 375)) + 40px);
      }
    }
  }
}
#interview07 {
  .copy {
    top: 5.78125cqw;
    left: 62.81250000000001cqw;
  }
}
/* ↑↑↑ fv ↑↑↑ */
/* ↓↓↓ interview ↓↓↓ */
section[class*="interview"] {
  position: relative;
  max-width: 1280px;
  container-type: inline-size;
  margin: min(120px, 9.375vw) auto 0;

  @media (max-width: 768px) {
    padding-inline: 25px;
    margin-top: 80px;

    &.interview01 {
      margin-top: 100px;
    }
  }

  &:nth-of-type(odd) {
    .txt_group {
      margin-left: auto;

      @media (max-width: 768px) {
        margin-inline: auto;
      }
    }
  }
  
  div[class*="deco"] {
    position: absolute;
  }
  .deco01 {
    width: 2.5cqw;
    top: 2.03125cqw;
    right: 5.234375cqw;
  }
  .deco02 {
    width: 3.75cqw;
    top: 22.03125cqw;
    right: 11.40625cqw;
  }
  .deco03 {
    width: 7.8125cqw;
    top: 14.374999999999998cqw;
    left: 9.765625cqw;
  }
  .deco04 {
    width: 7.8125cqw;
    top: -7.109375cqw;
    left: 3.125cqw;
  }
  .deco05 {
    width: 3.75cqw;
    top: -4.453125cqw;
    right: 28.749999999999996cqw;
  }
  .deco06 {
    width: 3.75cqw;
    top: 3.28125cqw;
    right: 7.265625000000001cqw;
  }
  .deco07 {
    width: 7.8125cqw;
    top: 13.984374999999998cqw;
    right: 11.875cqw;
  }
  .deco08 {
    width: 15.625cqw;
    top: -2.5cqw;
    left: 0;
  }
  @media (max-width: 768px) {
    .deco01 {
      width: 24px;
      top: -72px;
      right: 42px;
    }
    .deco02 {
      width: 33px;
      top: -72px;
      right: 123px;
    }
    .deco03 {
      width: 79px;
      top: -79px;
      left: unset;
      right: 19px;
    }
    .deco04 {
      width: 57px;
      top: -126px;
      left: 0;
    }
    .deco05 {
      display: none;
    }
    .deco06 {
      width: 33px;
      top: -182px;
      right: 10px;
    }
    .deco07 {
      width: 68px;
      top: -138px;
      right: 83px;
    }
    .deco08 {
      width: 68px;
      top: -50px;
      left: unset;
      right: 30px;
    }
  }

  .inner {
    width: 80.625cqw;
    margin: 0 auto;

    @media (max-width: 768px) {
      width: 100%;
    }
  }

  .txt_group {
    width: 60cqw;

    @media (max-width: 768px) {
      width: 100%;
    }

    .sub-ttl {
      font-size: max(1.171875cqw,1rem);
      font-family: var(--text-sans);
      font-weight: 400;
      letter-spacing: 0.04em;

      @media (max-width: 768px) {
        font-size: 1.5rem;
      }
  
      .num {
        font-size: 1.40625cqw;
        font-family: var(--text-poppins);
        font-weight: 400;
        letter-spacing: 0.24em;
        margin-right: 0.625cqw;

        @media (max-width: 768px) {
          font-size: 1.8rem;
          margin-right: 8px;
        }
      }
    }
    
    .main-ttl {
      font-size: 2.1875cqw;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: #052275;

      @media (max-width: 768px) {
        font-size: 2.4rem;
        line-height: 1.6666666666666667;
      }
    }

    .txt {
      font-size: max(1.171875cqw,1rem);
      font-weight: 400;
      line-height: 1.8666666666666667;
      letter-spacing: 0.04em;
      text-align: justify;
      overflow-wrap: anywhere;
      word-break: normal;
      line-break: strict;
      margin-top: 3.125cqw;

      @media (max-width: 768px) {
        font-size: 1.5rem;
        margin-top: 40px;
      }
    }
  }

  .img {
    position: relative;
    width: 100%;
    border-radius: 20px;
    border: 1px solid #052275;
    overflow: clip;
    margin-top: 5cqw;
    z-index: 1;
  }
}
/* ↑↑↑ interview ↑↑↑ */
/* ↓↓↓ goals ↓↓↓ */
.goals {
  max-width: 1280px;
  container-type: inline-size;
  margin: min(120px, 9.375vw) auto 0;

  @media (max-width: 768px) {
    padding-inline: 25px;
    margin-top: 80px;
  }

  .inner {
    position: relative;
    width: 66.875cqw;
    background-color: #fff;
    border-radius: 20px;
    padding: 4.6875cqw 6.875000000000001cqw 5cqw;
    margin: 0 auto;

    @media (max-width: 768px) {
      width: 100%;
      padding: 44px 23px 32px;
    }

    &::before {
      content: '';
      position: absolute;
      translate: -50% 0;
      top: 0;
      left: 50%;
      width: 20.625cqw;
      height: 0.3125cqw;
      background-image: var(--grad01);
      background-repeat: no-repeat;
      background-size: 100%;

      @media (max-width: 768px) {
        width: 210px;
        height: 4px;
      }
    }
  }
  
  .inner_ttl {
    font-size: 2.1875cqw;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #052275;
    text-align: center;

    @media (max-width: 768px) {
      font-size: 2.4rem;
      line-height: 1.6666666666666667;
    }
  }

  .js_txtGroup {
    text-align: center;
    margin: 3.125cqw auto 0;

    @media (max-width: 768px) {
      margin-top: 28px;
    }

    .-txtBand {
      font-size: 1.875cqw;
      font-weight: 700;
      line-height: 2.4;
      letter-spacing: 0.04em;
      padding: 0.625cqw 0.9375cqw;
      display: inline;

      @media (max-width: 768px) {
        font-size: 2rem;
        padding: 4px 8px;
      }
    }
  }

  .txt {
    font-size: max(1.171875cqw,1rem);
    font-weight: 400;
    line-height: 1.8666666666666667;
    letter-spacing: 0.04em;
    text-align: justify;
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
    margin-top: 1.875cqw;

    @media (max-width: 768px) {
      font-size: 1.5rem;
      margin-top: 24px;
    }
  }
}
/* ↑↑↑ goals ↑↑↑ */
/* ↓↓↓ schedule ↓↓↓ */
.bg_wrap {
  overflow-x: clip;
  position: relative;
  background-color: #052275;
  background-image: linear-gradient(#2B438A 1px, transparent 1px), linear-gradient(90deg, #2B438A 1px, transparent 1px);
  background-size: 6.25vw 6.25vw;

  @media (max-width: 768px) {
    background-size: 80px 80px;
  }
}
.schedule {
  max-width: 1280px;
  color: #fff;
  container-type: inline-size;
  padding: min(6.25vw,80px) 0 min(7.8125vw,100px);
  margin: min(9.375vw,120px) auto 0;

  @media (max-width: 768px) {
    padding: 64px 25px;
  }

  .inner {
    position: relative;
    width: 70.625cqw;
    margin: 0 auto;
    z-index: 1;

    @media (max-width: 768px) {
      width: 100%;
    }
  }

  .ttl {
    text-align: center;
    margin: 0 auto;

    .en {
      font-size: max(1.09375cqw,1rem);
      font-family: var(--text-poppins);
      font-weight: 400;
      letter-spacing: 0.24em;

      @media (max-width: 768px) {
        font-size: 1rem;
      }
    }

    .ja {
      position: relative;
      width: fit-content;
      font-size: 2.1875cqw;
      font-weight: 700;
      letter-spacing: 0.04em;
      display: block;
      padding-bottom: 0.9375cqw;
      margin: 0.625cqw auto 0;

      @media (max-width: 768px) {
        font-size: 2.4rem;
        padding-bottom: 12px;
        margin-top: 8px;
      }
      
      &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 0.3125cqw;
        background-image: var(--grad01);
        background-repeat: no-repeat;
        background-size: 100%;
        bottom: 0;
        left: 0;
  
        @media (max-width: 768px) {
          height: 4px;
        }
      }
    }
  }

  .list_group {
    display: flex;
    gap: 32px 6.875000000000001cqw;
    margin-top: 5cqw;

    @media (max-width: 768px) {
      flex-direction: column;
      margin-top: 56px;
    }

    .list {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 3.125cqw;

      @media (max-width: 768px) {
        gap: 32px;
      }

      .item {
        display: flex;
        gap: 1.25cqw;

        @media (max-width: 768px) {
          gap: 8px;
        }

        &:last-of-type .conts::before {
          height: calc(100% - 0.625cqw);

          @media (max-width: 768px) {
            height: calc(100% + 32px);
          }
        }
      }

      @media (max-width: 768px) {
        &:last-of-type .item:last-of-type .conts::before {
          content: none;
        }
      }
      
      .time {
        width: 4.6875cqw;
        font-size: 1.40625cqw;
        font-family: var(--text-poppins);
        font-weight: 700;
        letter-spacing: 0.04em;
        flex-shrink: 0;

        @media (max-width: 768px) {
          width: 60px;
          height: fit-content;
          font-size: 1.8rem;
          line-height: 1;
          padding-top: 6px;
        }
      }
      .conts {
        position: relative;
        flex: 1;
        padding-left: 2.8125cqw;

        @media (max-width: 768px) {
          padding-left: 28px;
        }

        &::before {
          content: '';
          position: absolute;
          width: 1px;
          height: calc(100% + 3.125cqw);
          background-image: linear-gradient(to bottom, #fff 2px, transparent 2px);
          background-size: 1px 4px;
          background-repeat: repeat-y;
          background-position: right top;
          top: 0.625cqw;
          left: 0.46875cqw;

          @media (max-width: 768px) {
            height: calc(100% + 32px);
            top: 9px;
            left: 6px;
          }
        }

        &::after {
          content: '';
          position: absolute;
          width: 0.9375cqw;
          height: auto;
          aspect-ratio: 1/1;
          border-radius: 50%;
          background: var(--grad02);
          top: 0.625cqw;
          left: 0;

          @media (max-width: 768px) {
            width: 12px;
            top: 9px;
          }
        }

        .head {
          font-size: 1.40625cqw;
          font-weight: 700;
          letter-spacing: 0.04em;

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

        .txt {
          font-size: max(1.171875cqw,1rem);
          font-weight: 400;
          line-height: 1.8666666666666667;
          letter-spacing: 0.04em;
          text-align: justify;
          overflow-wrap: anywhere;
          word-break: normal;
          line-break: strict;
          margin-top: 1.25cqw;

          @media (max-width: 768px) {
            font-size: 1.5rem;
            margin-top: 8px;
          }
        }
      }
    }
  }
}
/* ↑↑↑ schedule ↑↑↑ */
/* ↓↓↓ dayoff ↓↓↓ */
.dayoff {
  max-width: 1280px;
  container-type: inline-size;
  margin: min(120px, 9.375vw) auto 0;

  @media (max-width: 768px) {
    padding-inline: 25px;
    margin-top: 80px;
  }

  .inner {
    position: relative;
    width: 66.875cqw;
    border-radius: 20px;
    border: 1px solid #052175;
    padding: 5cqw;
    margin: 0 auto;

    @media (max-width: 768px) {
      width: 100%;
      padding: 44px 23px 32px;
    }

    &::before {
      content: '';
      position: absolute;
      translate: -50% 0;
      top: 0;
      left: 50%;
      width: 20.625cqw;
      height: 0.3125cqw;
      background-image: var(--grad01);
      background-repeat: no-repeat;
      background-size: 100%;

      @media (max-width: 768px) {
        width: 210px;
        height: 4px;
      }
    }
  }
  
  .inner_ttl {
    font-size: 2.1875cqw;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #052275;
    text-align: center;

    @media (max-width: 768px) {
      font-size: 2.4rem;
      line-height: 1.6666666666666667;
    }
  }

  .flex {
    display: flex;
    gap: 32px 5cqw;
    margin-top: 2.5cqw;

    @media (max-width: 768px) {
      flex-direction: column;
      margin-top: 28px;
    }
  }

  .img {
    width: 15.625cqw;
    height: fit-content;
    flex-shrink: 0;

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

  .js_txtGroup {

    .-txtBand {
      font-size: 1.40625cqw;
      font-weight: 700;
      line-height: 2.6;
      letter-spacing: 0.04em;
      padding: 0.625cqw 0.9375cqw;
      display: inline;

      @media (max-width: 768px) {
        font-size: 1.8rem;
        line-height: 2.3;
        padding: 4px 8px;
      }
    }
  }

  .txt {
    font-size: max(1.171875cqw,1rem);
    font-weight: 400;
    line-height: 1.8666666666666667;
    letter-spacing: 0.04em;
    text-align: justify;
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
    margin-top: 1.875cqw;

    @media (max-width: 768px) {
      font-size: 1.5rem;
      margin-top: 24px;
    }
  }
}
/* ↑↑↑ dayoff ↑↑↑ */
/* ↓↓↓ other ↓↓↓ */
.other {
  max-width: 1280px;
  container-type: inline-size;
  margin: min(120px, 9.375vw) auto min(12.5vw,160px);

  @media (max-width: 768px) {
    margin-block: 80px 56px;
  }
}
.other .inner {
  width: 80.625cqw;
  margin: 0 auto;

  @media (max-width: 768px) {
    width: 100%;
  }
  
  .ttl-group {
    padding-inline: 2.5cqw;
    
    @media (max-width: 768px) {
      padding-inline: 50px;
    }
  }

  .other_slider {
    padding-inline: 2.65625cqw;
    margin-top: 3.125cqw;

    @media (max-width: 768px) {
      margin-top: 40px;
    }

    .splide__slide {
      width: 17.421875cqw;

      @media (max-width: 768px) {
        width: 223px;
      }

      .link {
        position: relative;
        width: 100%;
        border-radius: 20px;
        border: 1px solid #052275;
        overflow: clip;
        display: block;
        
        @media (min-width: 768px) {
          &:hover {
            .img {
              scale: 1.1;
            }
            .arrow-wrap {
              &::after {
                opacity: 0;
              }
            }
          }
        }
      }

      .img {
        width: 100%;
        transition: scale ease .3s;
      }

      .txt {
        position: absolute;
        bottom: 0;
        left: 0;
      }
      .year {
        width: fit-content;
        font-size: max(1.015625cqw,1rem);
        font-weight: 500;
        letter-spacing: 0.04em;
        color: #052275;
        background-color: #fff;
        display: block;
        padding: 0.3125cqw 0.9375cqw;

        @media (max-width: 768px) {
          font-size: 1.3rem;
          padding: 4px 12px;
        }
      }
      .post {
        width: fit-content;
        font-size: max(1.171875cqw,1rem);
        font-weight: 700;
        letter-spacing: 0.04em;
        color: #052275;
        background-color: #fff;
        display: block;
        padding: 0.625cqw 0.9375cqw;

        @media (max-width: 768px) {
          font-size: 1.5rem;
          padding: 8px 12px;
        }
      }
      .arrow-wrap {
        position: absolute;
        bottom: -1px;
        right: -1px;
        width: 3.75cqw;
        aspect-ratio: 1/1;
        border-radius: 20px 0 0 0;
        border: 1px solid var(--color-navy);
        overflow: hidden;
        @media (max-width: 768px) {
          width: 48px;
        }
        &::before {
          content: '';
          position: absolute;
          top: -1px;
          left: -1px;
          width: calc(100% + 2px);
          height: calc(100% + 2px);
          background: var(--grad02);
        }
        &::after {
          content: '';
          position: absolute;
          top: -1px;
          left: -1px;
          width: calc(100% + 2px);
          height: calc(100% + 2px);
          background-color: var(--color-navy);
          transition: opacity 300ms ease;
        }
        .arrow {
          display: block;
          position: absolute;
          top: 36%;
          left: 50%;
          translate: -50% 0%;
          width: 1.71875cqw;
          height: 1.015625cqw;
          z-index: 2;
          mask-image: url(../img/about/other-arrow.svg);
          mask-repeat: no-repeat;
          mask-size: cover;
          background-color: #fff;
          transition: background-color 300ms ease;
          @media (max-width: 768px) {
            width: 22px;
            height: 13px;
          }
        }
      }
    }

    .splide__arrows {
      position: absolute;
      width: 100%;
      display: flex;
      justify-content: space-between;
      translate: -50% -50%;
      top: 50%;
      left: 50%;
      pointer-events: none;

      @media (max-width: 768px) {
        /* width: calc(100% - 35px*2); */
        width: 305px;
      }
    }
    .splide__arrow {
      position: relative;
      width: 4.21875cqw;
      height: auto;
      aspect-ratio: 1/1;
      border-radius: 50%;
      overflow: clip;
      opacity: 1;
      transform: translate(0);
      top: unset;
      pointer-events: all;

      @media (max-width: 768px) {
        width: 48px;
      }
      
      &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: var(--color-navy);
        opacity: 0;
        transition: opacity ease .3s;
        top: 0;
        left: 0;
      }
      &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: var(--grad02);
        transition: opacity ease .3s;
        top: 0;
        left: 0;
      }
      .arrow {
        position: absolute;
        width: 2.65625cqw;
        height: auto;
        aspect-ratio: 34/23;
        mask-image: url(../img/interview/other_arrow.svg);
        mask-repeat: no-repeat;
        mask-size: cover;
        background-color: #fff;
        display: block;
        transition: background-color ease .3s;
        translate: -50% -50%;
        top: 50%;
        left: 50%;
        z-index: 2;

        @media (max-width: 768px) {
          width: 25px;
        }
      }

      @media (min-width: 769px) {
        &:hover {
          &::before {
            opacity: 1;
          }
          &::after {
            opacity: 0;
          }
        }
      }

      &.splide__arrow--prev {
        rotate: Y 180deg;
        left: unset;
      }
      &.splide__arrow--next {
        right: unset;
      }
    }
  }
}
/* ↑↑↑ other ↑↑↑ */