/*=========================
  mv
=========================*/
section.mv {
  margin-top: 2rem;
  background-color: #ffffff;
  position: relative;
  .bg-img {
    width: 100%;
  }
  .copy {
    position: absolute;
    bottom: 12%;
    left: 12%;
    .row {
      font-family: 'Zen Maru Gothic', system-ui;
      font-weight: 500;
      background-color: #ffffff;
      margin-bottom: 1rem;
      padding: 0.5em;
      width: fit-content;
      font-size: clamp(1.5rem, 0.25rem + 2.0833vw, 2.75rem);
      line-height: 1;
    }
  }
  .banner {
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc(450 / 1920 * 100vw);
    min-width: 280px;
    max-width: 450px;
    background-color: #ffffff;
    border-radius: 20px;
    a {
      opacity: 1;
      &:hover {
        @media (any-hover: hover) {
          opacity: 0.75;
        }
      }
    }
  }
}
@media (max-width: 960px) {
  section.mv {
    margin-top: 0;
    margin-bottom: 80px;
    .bg-img {
      width: 100%;
      height: 50vh;
      object-fit: cover;
    }
    .copy {
      .row {
        font-size: clamp(1.2rem, 1.0077rem + 0.8205vw, 1.5rem);
      }
    }
    .banner {
      right: 0;
      left: 0;
      bottom: -60px;
      width: 65%;
      min-width: 240px;
      max-width: 300px;
      margin-inline: auto;
    }
  }
}

/*=========================
  news
=========================*/
section.news {
  padding: 7rem 0 5rem;
  .container {
    width: 80%;
  }
  .flex {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .section-title {
    width: 20%;
    line-height: 1;
    .en {
      font-size: 3rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
    }
    .jp {
      font-size: 1.25rem;
      font-weight: 400;
    }
  }
  .section-body {
    width: 80%;
  }
  .news-list {
    max-height: 280px;
    overflow-y: scroll;
    .news-item {
      border-bottom: 1px solid #707070;
      padding-bottom: 1rem;
      margin-bottom: 1rem;
    }
    .news-item a {
      display: flex;
      justify-content: center;
      align-items: center;
      .date {
        width: 25%;
        text-align: center;
      }
      .body {
        width: 75%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
  }
}
@media (max-width: 960px) {
  section.news {
    padding: 3rem 0 3rem;
    .container {
      width: calc(100% - 2rem);
    }
    .flex {
      flex-direction: column;
      gap: 1rem;
    }
    .section-title {
      width: 100%;
      text-align: center;
      .en {
        font-size: 2.5rem;
      }
      .jp {
        font-size: 1rem;
      }
    }
    .section-body {
      width: 100%;
    }
    .news-list {
      .news-item a {
        flex-direction: column;
        align-items: initial;
        .date {
          width: 100%;
          text-align: left;
        }
        .body {
          width: 100%;
        }
      }
    }
  }
}

/*=========================
  about
=========================*/
section.about {
  padding: 5rem 0;
  position: relative;
  .bg-img {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: fill;
    /* object-fit: cover;
    object-position: 70% 50%; */
  }
  .container {
    width: 80%;
  }
  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
  }
  .flex-left {
    width: 50%;
    .img {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 2rem;
    }
    .text {
      text-align: center;
      font-size: 1.5rem;
    }
  }
  .flex-right {
    width: 50%;
    text-align: center;
    .title {
      font-size: 2.75rem;
      margin-bottom: 2rem;
    }
    .text {
      text-align: center;
      font-size: 1.2rem;
      margin-bottom: 2rem;
    }
    .link {
      display: flex;
      justify-content: center;
      align-items: center;
      .icon {
        background-color: #91877f;
        color: #ffffff;
        font-size: 1.25rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        aspect-ratio: 1/1;
        border-radius: 100vmax;
        margin-right: 1rem;
      }
    }
  }
}
@media (max-width: 960px) {
  section.about {
    padding: 5rem 0;
    position: relative;
    .bg-img {
      object-fit: cover;
    }
    .container {
      width: calc(100% - 2rem);
    }
    .flex {
      flex-direction: column-reverse;
      gap: 4rem;
    }
    .flex-left {
      width: 100%;
      .img {
        margin-bottom: 2rem;
      }
      .text {
        font-size: 1.25rem;
      }
    }
    .flex-right {
      width: 100%;
      .title {
        font-size: 2.25rem;
      }
      .text {
        font-size: 1rem;
      }
      .link {
        .icon {
          font-size: 1.25rem;
          width: 40px;
          margin-right: 0.5rem;
        }
      }
    }
  }
}

/*=========================
  support
=========================*/
section.support {
  padding: 5rem 0;
  .section-title {
    line-height: 1;
    text-align: center;
    margin-bottom: 3rem;
    .en {
      font-size: 3rem;
      margin-bottom: 0.5rem;
    }
    .jp {
      font-size: 1.25rem;
    }
  }
  .support-item {
    --item-color: #ec765f;
    display: flex;
    justify-content: center;
    align-items: center;
    &:not(:last-of-type) {
      margin-bottom: 5rem;
    }
    .img {
      width: 70%;
    }
    .texts {
      width: 45%;
      position: relative;
      left: -5%;
      z-index: 1;
      background-color: #ffffff;
      border-radius: 30px;
      padding: 1.5rem 2rem;
    }
    .title {
      color: var(--item-color);
      font-size: 1.5rem;
      margin-bottom: 0.5rem;
    }
    .subtitle {
      margin-bottom: 1rem;
    }
    .border {
      width: 30%;
      height: 2px;
      background-color: var(--item-color);
      margin-bottom: 1rem;
    }
    .text {
      margin-bottom: 2rem;
    }
    .link {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .icon {
        background-color: var(--item-color);
        color: #ffffff;
        font-size: 1.25rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        aspect-ratio: 1/1;
        border-radius: 100vmax;
        margin-right: 1rem;
      }
    }
  }
  .support-item:nth-of-type(2) {
    --item-color: #ff9966;
    flex-direction: row-reverse;
    .texts {
      left: initial;
      right: -5%;
    }
  }
  .support-item:nth-of-type(3) {
    --item-color: #7ec191;
  }
  .support-item:nth-of-type(4) {
    --item-color: #71afd1;
    flex-direction: row-reverse;
    .texts {
      left: initial;
      right: -5%;
    }
  }
}
@media (max-width: 960px) {
  section.support {
    padding: 3rem 0;
    .section-title {
      margin-bottom: 2rem;
      .en {
        font-size: 2.5rem;
      }
      .jp {
        font-size: 1rem;
      }
    }
    .support-item {
      flex-direction: column-reverse;
      &:not(:last-of-type) {
        margin-bottom: 5rem;
      }
      .img {
        width: 100%;
        max-width: 500px;
        margin-inline: auto;
      }
      .texts {
        width: 100%;
        position: initial;
        padding: 0;
        margin-bottom: 2rem;
      }
      .title {
        text-align: center;
      }
      .subtitle {
        text-align: center;
      }
      .border {
        width: 100%;
      }
      .text {
      }
      .link {
        justify-content: center;
        .icon {
          width: 40px;
        }
      }
    }
    .support-item:nth-of-type(2),
    .support-item:nth-of-type(4) {
      flex-direction: column-reverse;
    }
  }
}

/*=========================
  instagram
=========================*/
section.instagram {
  padding: 5rem 0;
  position: relative;
  .bg-img {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .section-title {
    line-height: 1;
    text-align: center;
    margin-bottom: 3rem;
    .en {
      font-size: 3rem;
      margin-bottom: 0.5rem;
    }
    .jp {
      font-size: 1.25rem;
    }
  }
  .feed-wrapper {
    max-width: 900px;
    margin-inline: auto;
  }
}
@media (max-width: 960px) {
  section.instagram {
    padding: 3rem 0;
    .bg-img {
    }
    .section-title {
      margin-bottom: 3rem;
      .en {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
      }
      .jp {
        font-size: 1rem;
      }
    }
  }
}

/*=========================
  event
=========================*/
section.event {
  padding: 5rem 0;
  position: relative;
  .bg-img {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .container {
    width: 80%;
  }
  .flex {
    display: flex;
    justify-content: center;
  }
  .flex-left {
    width: 25%;
    .section-title {
      line-height: 1;
      margin-bottom: 3rem;
      .en {
        font-size: 3rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
      }
      .jp {
        font-size: 1.25rem;
      }
    }
  }
  .link {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .icon {
      background-color: #91877f;
      color: #ffffff;
      font-size: 1.25rem;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      aspect-ratio: 1/1;
      border-radius: 100vmax;
      margin-right: 1rem;
    }
  }
  .flex-right {
    width: 75%;
    .event-list {
      background-color: #ffffff;
      border-radius: 20px;
      padding: 1.5rem 1.5rem;
    }
    .event-list__item {
      &:not(:last-of-type) {
        border-bottom: 1px dotted #91877f;
        padding-bottom: 1rem;
        margin-bottom: 1.5rem;
      }
    }
    .event-list__item a {
      display: flex;
      gap: 1rem;
      .thumbnail {
        flex-shrink: 0;
        width: 30%;
        height: fit-content;
        background-color: #ffffff;
        aspect-ratio: 4/3;
        .img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .img.default-img {
          object-fit: contain;
        }
      }
      .body {
        width: 70%;
        overflow: hidden;
        .date {
          color: #91877f;
          font-family: 'Quicksand', sans-serif;
          font-weight: 500;
        }
        .title {
          font-weight: 400;
          font-size: 1.25rem;
          margin-bottom: 0.75rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .excerpt {
          font-weight: 300;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
      }
    }
  }
}
@media (max-width: 960px) {
  section.event {
    padding: 3rem 0;
    position: relative;
    .bg-img {
    }
    .container {
      width: calc(100% - 2rem);
    }
    .flex {
      flex-direction: column;
    }
    .flex-left {
      width: 100%;
      .section-title {
        text-align: center;
        margin-bottom: 2rem;
        .en {
          font-size: 2.5rem;
        }
        .jp {
          font-size: 1rem;
        }
      }
    }
    .flex-right {
      width: 100%;
      .event-list {
        padding: 1rem 1rem;
        margin-bottom: 2rem;
      }
      .event-list__item a {
        .thumbnail {
          width: 30%;
          height: fit-content;
          aspect-ratio: 1/1;
        }
        .body {
          width: 70%;
          .date {
          }
          .title {
            margin-bottom: 0.25rem;
          }
          .excerpt {
          }
        }
      }
    }
    .link {
      justify-content: center;
      .icon {
        width: 40px;
      }
    }
  }
}