/* スムーズスクロールの設定 */
@media (prefers-reduced-motion: no-preference) {
  /* 視差効果を減らすをオンにしている場合は無効化できるようにする */
  html {
    scroll-behavior: smooth;
  }
}
/* ページ内リンクを利用した時青い枠線が出るのを阻止 */
*:focus {
  outline: none;
}

body {
  color: #333333;
}

.set-max-width {
  margin: auto;
}
.responsive-width {
  width: 75%;
  margin: auto;
  max-width: 1600px;
}
#jumps {
  margin: 50px auto 0px auto;
  display: flex;
  flex-wrap: wrap;
}
section {
  padding: 65px 0px;
}
#jump-section {
  padding: 0;
}

/* セクションごとのヘッダー共通設定 */
#section-header {
  position: sticky;
  z-index: 2;
  border-bottom: #b0e0e6 solid 3px;
  margin: 20px 0 0 0;
  p {
    margin: 10px 0px;
  }
  .main {
    font-size: 30px;
    font-weight: 500;
    color: #333333;
  }
}

/* 背景が灰色のセクション設定 */
#suitable-section,
#mentor-introduction-section,
#about-applying-section {
  background-color: #f8f8f9;
}

/* ボタン */
#jump-section {
  margin: auto;
}
.jump-button {
  display: flex;
  margin: 5px 5px;
  border-radius: 50px;
  width: auto;
  max-width: 325px;
  height: 53px;
  color: #b0e0e6;
  border: 2px solid #a0d8ea;
  background-color: #fff;
  overflow: visible;
  cursor: pointer;
  align-items: center;
  padding: 10px;
}
a {
  text-decoration: none;
  color: #b0e0e6;
}
.circle {
  margin-left: 5px;
  width: 23px;
  height: 23px;
  font-size: 16px;
  background-color: #b0e0e6;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.jump-button:hover > p > a {
  color: #fff;
}
.jump-button > p {
  font-size: 16px;
  font-weight: 600;
  margin: auto;
  padding: 0px 8px;
  line-height: 18px;
  height: 20px;
  margin-left: 23px;
}
.jump-button:hover {
  background-color: #b0e0e6;
  color: #fff;
}
.jump-button:hover > .circle {
  background-color: #fff;
  img {
    content: url("../images/bule-down-arrow.svg");
  }
}
/* ボタン */
.button-blue {
  display: flex;
  margin: 50px auto 100px auto;
  border-radius: 50px;
  width: 100%;
  max-width: 325px;
  height: 53px;
  color: #fff;
  border: 2px solid #b0e0e6;
  background-color: #b0e0e6;
  overflow: visible;
  cursor: pointer;
  align-items: center;
  text-decoration: none;
  p {
    font-size: 16px;
    font-weight: 600;
    margin: auto;
  }
  .circle {
    margin: 0px 10px 0px -20px;
    width: 25px;
    height: 25px;
    font-size: 16px;
    background-color: #fff;
    color: #b0e0e6;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  &:hover {
    background-color: #cfe5d8;
    border: 2px solid #cfe5d8;
    .circle {
      color: #cfe5d8;
    }
  }
}
/* キャプション */
.caption::before {
  content: "";
  display: inline-block;
  position: relative;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #cfe5d8;
  margin-right: 0.25em;
}
.caption {
  font-size: 30px;
  font-weight: 500;
  padding-bottom: 15px;
  margin-top: 50px;
  text-align: center;
}

/* インターンでできること */
#contents {
  display: flex;
  justify-content: space-evenly;
  margin: 40px 0;
  flex-wrap: wrap;
}
.potential {
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  margin: 10px 10px;
  img {
    height: 160px;
    margin: 0px;
  }
  p {
    margin: 10px 0px;
  }
}

/* どんな人に向いているか、来て欲しいか */
#suitable {
  display: flex;
  justify-content: space-between;
  margin: 30px 0;
}
.suit {
  width: 30%;
  margin: 20px 0px;
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  p {
    margin: 20px 0px;
  }
}
.suitable-circle {
  height: 219px;
  width: 219px;
  margin: auto;
  background-color: #ffffff;
  border-radius: 50%;
  img {
    margin: 20% auto;
  }
}

/* スケジュールセクション */
#schedule {
  background-color: #cfe5d8;
  border-radius: 20px;
  padding: 50px;
  margin: 50px 0 0 0;
  .down-arrow {
    margin: 30px 50%;
    width: fit-content;
    img {
      height: 30px;
    }
  }
}
.curriculum {
  border-radius: 15px;
  display: flex;
  width: 105%;
  align-items: center;
  justify-content: center;
  margin: auto;
  margin-left: -5%;
  .title-part {
    color: #66c6e2;
    font-weight: 600;
    display: flex;
    align-items: center;
    p {
      margin: 10px 20px 10px 0;
    }
    .curriculum-title {
      font-size: 34px;
    }
    .period {
      font-size: 20px;
    }
  }
  .curriculum-description {
    background-color: #ffffff;
    width: 80%;
    padding: 20px 20px 20px 80px;
    border-radius: 15px;
    .description {
      font-size: 18px;
    }
  }
}
.schedule-circle {
  background-color: #66c6e2;
  color: #ffffff;
  border-radius: 50%;
  height: 124px;
  width: 124px;
  text-align: center;
  z-index: 2;
  transform: translateX(40%);
  font-weight: 500;
  display: grid;
  align-items: center;
  aspect-ratio: 1;
  p {
    font-family: "Jost", sans-serif;
    font-size: 24px;
    margin: 0 0 -15px 0;
  }
  .number {
    font-size: 50px;
    margin: 0 0 -10px 0;
  }
}
/* インターンのここがすごい */
ul {
  padding: 0;
  li {
    list-style: none;
  }
}
#internship-outstanding {
  display: flex;
  justify-content: space-between;
  margin: 40px 0;
}
.speech-bubble {
  width: 24%;
  text-align: center;
  .bubble {
    color: #ffffff;
    background-color: #66c6e2;
    padding: 12px 15px;
    border-radius: 15px;
    min-height: 65%;
    position: sticky;
    z-index: 2;
    p {
      font-size: 24px;
      font-weight: 500;
      margin: 10px 0px 10px 0px;
    }
    span {
      font-size: 16px;
      font-weight: 600;
      margin: 0;
    }
  }
  .tail {
    margin: auto;
    background-color: #66c6e2;
    height: calc(tan(60deg) * 60px / 2);
    width: 60px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: translateY(-30px);
  }
}
/* メンター紹介セクション */
#mentor-introductions {
  display: flex;
  margin: 40px 0;
  .mentor-info {
    width: 30%;
    text-align: center;
    img {
      height: 370px;
      max-width: 100%;
      object-fit: contain;
    }
    div {
      text-align: left;
      .name {
        color: #66c6e2;
        font-size: 20px;
        margin: 0;
        text-align: center;
      }
      .description {
        font-size: 22px;
        font-weight: 500;
        margin: 0;
        text-wrap: balance;
        text-align: center;
      }
      .strengths {
        font-size: 16px;
        margin: 0;
        text-align: center;
      }
    }
  }
}
/* みんなの声セクション */
#intern-impressions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 40px 0;
  li {
    position: relative;
    border: #cfe5d8 solid 2px;
    margin: 10px 0;
    width: 43%;
    min-height: 207px;
    padding: 25px;
    .top-quotation {
      background-color: #ffffff;
      width: fit-content;
      position: absolute;
      padding: 1px;
      top: -8px;
      left: -3px;
      transform: rotate(180deg);
    }
    .bottom-quotation {
      background-color: #ffffff;
      width: fit-content;
      position: absolute;
      padding: 1px;
      bottom: -8px;
      right: -3px;
    }
    .inner-list {
      display: flex;
      .detail {
        margin: 10px 0 0 25px;
        word-break: break-all;
        .name {
          font-size: 22px;
          font-weight: 500;
          margin: 0;
        }
        .impression {
          font-size: 18px;
          margin: 10px 0;
        }
      }
      > img {
        width: 170px;
        height: 170px;
        aspect-ratio: 1;
        border-radius: 15px;
        object-fit: contain;
        margin: 10px 0 10px 10px;
      }
    }
  }
}

/* ABOUT APPLICATION 応募について */
#about-applying-section {
  /* #containerからオーバーライド */
  .caption {
    margin-top: 25px;
    text-align: center;
  }

  /* 選考の流れ */
  .steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    .step {
      width: 31%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .step-number {
        font-family: "Jost", sans-serif;
        font-size: 30px;
        font-weight: 500;
        margin: 15px 0 0 0;
        color: #cfe5d8;
      }
      .step-title {
        font-size: 24px;
        font-weight: 500;
        margin: 5px 0 0 0;
      }
      .step-about {
        line-height: 30px;
      }
    }
    img {
      max-height: 174px;
      /* aspect-ratio: 1; */
    }
  }
}

/* 浮いてる画像設定 */
.set-max-width {
  position: relative;
}
.float-img {
  position: absolute;
  z-index: 1;
}
.float-img-01 {
  right: 2%;
  top: -195px;
  img {
    width: 233px;
  }
}
.float-img-02 {
  left: 1%;
  bottom: -170px;
  img {
    width: 248px;
  }
}
.float-img-03 {
  right: 2%;
  top: -154px;
  img {
    width: 237px;
  }
}
@media screen and (max-width: 1360px) {
  /* ここがすごいセクション */
  #internship-outstanding {
    flex-wrap: wrap;
  }
  .speech-bubble {
    min-width: 50%;
    text-align: center;
    .bubble {
      width: 270px;
      min-height: 150px;
      margin: auto;
    }
  }
  /* みんなの声セクション */
  #intern-impressions {
    li {
      padding: 15px;
      .detail {
        .impression {
          font-size: 17px;
        }
      }
      > img {
        max-width: 140px;
        max-height: 140px;
      }
    }
  }
}
@media screen and (max-width: 1230px) {
  #section-header {
    .main {
      font-size: 26px;
    }
  }
  /* インターンでできること */
  .potential {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    margin: 10px 10px;
    img {
      height: 140px;
      margin: 10px 0px;
    }
  }
  /* どんな人に向いているか、来て欲しいか */
  .suit {
    font-size: 21px;
  }
  .suitable-circle {
    height: 200px;
    width: 200px;
    img {
      height: 120px;
    }
  }
  /* スケジュールセクション */
  .curriculum {
    .title-part {
      color: #66c6e2;
      font-weight: 600;
      display: flex;
      align-items: center;
      p {
        margin: 10px 20px 10px 0;
      }
      .curriculum-title {
        font-size: 28px;
      }
      .period {
        font-size: 18px;
      }
    }
    .curriculum-description {
      width: 75%;
      padding: 10px 10px 10px 60px;
      .description {
        font-size: 16px;
      }
    }
  }
  .schedule-circle {
    height: 100px;
    width: 100px;
    transform: translateX(30%);
    p {
      font-size: 18px;
    }
    .number {
      font-size: 38px;
    }
  }
  /* メンター紹介セクション */
  #mentor-introductions {
    li {
      width: 60%;
      margin: auto;
    }
  }
  /* みんなの声セクション */
  #intern-impressions {
    display: block;
    li {
      display: flex;
      align-items: center;
      position: relative;
      border: #cfe5d8 solid 2px;
      margin: 25px auto;
      width: 570px;
      height: 207px;
      padding: 25px;
      > img {
        max-width: 170px;
        max-height: 170px;
        aspect-ratio: 1;
        border-radius: 15px;
        margin: 10px 0 10px 10px;
      }
    }
  }

  /* 応募についてセクション */
  #about-applying-section {
    .steps {
      img {
        max-height: 135px;
      }
      .step {
        .step-number {
          font-size: 26px;
        }
        .step-title {
          font-size: 22px;
        }
      }
    }
    .caption {
      font-size: 26px;
    }
    .caption::before {
      width: 20px;
      height: 20px;
      top: 1px;
    }
  }
}

@media screen and (max-width: 950px) {
  .potential {
    width: 42%;
    white-space: nowrap;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    margin: 10px 10px;
    img {
      max-height: 120px;
      margin: 0px 0px;
    }
  }
}

@media screen and (max-width: 800px) {
  .responsive-width {
    width: 92%;
  }
  section {
    padding: 45px 0px;
  }

  .jump-button > p {
    padding: 0px 8px;
  }
  /* セクションごとのヘッダー共通設定 */
  #section-header {
    margin: 0;
    .main {
      font-size: 24px;
    }
  }

  /* どんな人に向いているか、来て欲しいか */
  #suitable {
    display: block;
  }
  .suit {
    width: 100%;
    margin: 20px 0px;
    font-size: 21px;
    p {
      margin: 10px 0px 30px 0px;
    }
  }
  .suitable-circle {
    height: 181px;
    width: 181px;
    img {
      max-height: 110px;
    }
  }
  /* スケジュールセクション */
  #schedule {
    padding: 16px 30px 30px 30px;
    .down-arrow {
      margin: auto;
      width: fit-content;
      img {
        height: 30px;
        margin: 15px 0 10px 0;
      }
    }
  }
  .curriculum {
    flex-direction: column;
    text-align: center;
    width: 100%;
    margin: -30px 0 0 0;
    .title-part {
      display: block;
      p {
        margin: 10px 0px;
      }
      .curriculum-title {
        font-size: 26px;
      }
      .period {
        font-size: 16px;
      }
    }
    .curriculum-description {
      width: 95%;
      padding: 40px 20px 0px 20px;
      .description {
        font-size: 16px;
        text-align: left;
      }
    }
  }
  .schedule-circle {
    height: 73px;
    width: 73px;
    transform: translateY(50%);
    p {
      font-size: 16px;
      margin: 0 0 -8px 0;
    }
    .number {
      font-size: 24px;
      margin: 0 0 -5px 0;
    }
  }
  /* ここがすごいセクション */
  #internship-outstanding-section {
    padding: 5px 0;
  }
  #internship-outstanding {
    margin: 25px 0;
    .bubble {
      width: 270px;
      min-height: 150px;
    }
  }
  /* メンター紹介セクション*/
  #mentor-introductions {
    margin: 25px 0;
    li {
      width: 100%;
      div {
        margin: auto;
        .name {
          font-size: 20px;
        }
        .description {
          font-size: 20px;
        }
        .strengths {
          font-size: 16px;
        }
      }
      img {
        height: 225px;
      }
    }
  }
  /* みんなの声セクション */
  #intern-impressions {
    display: block;
    margin: 25px 0;
    li {
      margin: 25px auto;
      width: auto;
      height: auto;
      padding: 10px 15px;
      .inner-list {
        .detail {
          .name {
            font-size: 20px;
          }
          .impression {
            font-size: 16px;
          }
        }
        > img {
          max-width: 103px;
          max-height: 103px;
        }
      }
    }
  }
  /* 浮いてる画像設定 */
  .float-img-01 {
    right: 2%;
    top: -85px;
    img {
      width: 116px;
    }
  }
  .float-img-02 {
    left: 2%;
    bottom: -74px;
    img {
      width: 108px;
    }
  }
  .float-img-03 {
    right: 2%;
    top: -95px;
    img {
      width: 100px;
    }
  }
}
@media screen and (max-width: 700px) {
  #section-header {
    .main {
      font-size: 23px;
      font-weight: 600;
    }
  }
  .potential {
    img {
      max-height: 110px;
    }
  }
  /* スケジュールセクション */
  #schedule {
    padding: 16px 18px;
  }
  .curriculum {
    .curriculum-description {
      padding: 40px 10px 0px 10px;
    }
  }
  /* ここがすごいセクション */
  #internship-outstanding {
    display: block;
    .speech-bubble {
      width: fit-content;
    }
    .bubble {
      width: 270px;
      min-height: 150px;
    }
    li:nth-child(even) {
      margin-left: auto;
    }
  }
  /* 応募についてセクション */
  #about-applying-section {
    .steps {
      display: block;
      .step {
        width: 100%;
      }
    }
    .caption {
      font-size: 22px;
    }
  }
  /* みんなの声セクション */
  #intern-impressions {
    li {
      margin: 20px auto;
      padding: 10px 15px;
      .inner-list {
        .detail {
          margin: 10px 0 0 15px;
        }
        > img {
          margin: 10px 0 0 0;
        }
      }
    }
  }
}
/* swiper */
.swiper-wrapper {
  height: auto;
}
.swiper-button-next,
.swiper-button-prev {
  --swiper-navigation-color: var(--accent-color);
  --swiper-navigation-size: 60px;
}
.swiper-pagination {
  --swiper-pagination-color: var(--main-color);
}
@media screen and (max-width: 350px) {
  .potential {
    width: 44%;
  }
}