@charset "UTF-8";

/* =====================
  introduction
===================== */
.r-club-introduction {
  background: url(/recruit/assets/img/common/bg-white.webp) repeat center / 282px 282px;
  background-attachment: fixed;
  position: relative;
  &::before {
    content: '';
    background: url(/recruit/assets/img/club/sp-introduction-bg.webp) no-repeat center / contain;
    width: 100vw;
    height: 164.10256vw;
    position: absolute;
    display: block;
    top: 297rem;
    left: 0;
    right: 0;
    z-index: 0;
  }
}
.r-club-introduction-text {
  text-align: center;
  line-height: 2.2;
  letter-spacing: 0.04em;
  margin-bottom: 64rem;
  > p + p {
    margin-top: 16rem;
  }
}
.r-club-item {
  background-color: var(--color-background);
  box-shadow: 0px 9px 22px 0px rgb(0 0 0 / 0.03);
  border-radius: 18rem;
  padding: 32rem;
  position: relative;
  & + .r-club-item {
    margin-top: 40rem;
    &::before {
      content: '02';
    }
  }
  &::before {
    content: '01';
    display: block;
    color: var(--color-accent-yellow);
    position: absolute;
    top: -32rem;
    left: 0;
    font-size: 64rem;
    font-family: var(--coiny);
    font-weight: 400;
    font-style: normal;
    line-height: 1.2;
    z-index: 1;
    padding-inline: 12rem;
    @supports (text-box-trim: trim-both) {
      text-box-trim: trim-both;
      text-box-edge: cap alphabetic;
      padding-block: 0.2em;
      display: inline-block;
    }
  }
}
.r-club-item__title {
  margin-block: 8rem 16rem;
  font-size: 24rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
}
.r-club-item__image-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  gap: 10rem;
  > li {
    &:first-child {
      grid-column: 1 / 3;
      grid-row: 1 / 2;
      .r-club-item__image {
        aspect-ratio: 278 / 160;
      }
    }
    &:nth-child(2) {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
      .r-club-item__image {
        aspect-ratio: 134 / 108;
      }
    }
    &:nth-child(3) {
      grid-column: 2 / 3;
      grid-row: 2 / 3;
      .r-club-item__image {
        aspect-ratio: 134 / 108;
      }
    }
  }
}
.r-club-item__image {
  width: 100%;
  border-radius: 5rem;
}
.r-club-item__text {
  margin-top: 16rem;
}

/* =====================
  recreation
===================== */
.r-club-recreation {
  background: url(/recruit/assets/img/common/bg-gray.webp) repeat center / 282px 282px;
  background-attachment: fixed;
}
.r-club-recreation-main__image {
  width: 100%;
  aspect-ratio: 342 / 217;
  border-radius: var(--img-round);
}
.r-club-recreation-main__content {
  margin-top: 24rem;
}
.r-club-recreation__image-list {
  margin-top: 32rem;
  > li + li {
    margin-top: 16rem;
  }
}
.r-club-recreation__image {
  width: 100%;
  aspect-ratio: 342 / 168;
  border-radius: var(--img-round);
}

/* =====================
  Activity Report
===================== */
.r-club-activity {
  background: url(/recruit/assets/img/common/bg-white.webp) repeat center / 282px 282px;
  background-attachment: fixed;
}
.r-club-activity-card {
  position: relative;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1rem;
    transition: transform 0.3s ease;
    transform-origin: left;
    z-index: 0;
    background-color: #919aa9;
  }
  + .r-club-activity-card {
    margin-top: 32rem;
  }
}
.r-club-activity-card__link {
  display: block;
}
.r-club-activity-card__image {
  width: 100%;
  aspect-ratio: 342 / 213;
  border-radius: 8rem;
  object-fit: cover;
}
.r-club-activity-card__content {
  padding-block: 20rem 16rem;
  line-height: 1.7;
  left: 0.06em;
  .icon--square {
    width: 18rem;
    margin-inline: auto 0;
    display: block;
  }
}
.r-club-activity-card__date {
  color: #a3a7ad;
  font-size: 13rem;
}
.r-club-activity-card__category {
  font-size: 12rem;
  display: inline-block;
  margin-left: 16rem;
  padding-inline: 8rem;
  color: var(--color-accent-orange);
  background-color: #f6ece9;
}
.r-club-activity-card__title {
  font-size: 18rem;
  margin-block: 8rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
}

/* =====================
  club-report
===================== */
.r-club-report {
  padding-top: var(--header-H);
  .inner {
    padding-block-start: 40rem;
  }
}
.r-club-report__head {
  line-height: 1.7;
  letter-spacing: 0.06em;
}
.r-club-report__date {
  color: #a3a7ad;
  font-size: 14rem;
}
.r-club-report__category {
  font-size: 13rem;
  display: inline-block;
  padding-inline: 8rem;
  margin-left: 16rem;
  color: var(--color-accent-orange);
  border: var(--border) var(--color-accent-orange);
}
.r-club-report__title {
  padding-block: 12rem 24rem;
  border-bottom: var(--border) #919aa9;
  font-size: 20rem;
}
.r-club-report__contents {
  padding-block: 24rem 32rem;
  > p {
    margin-top: 16rem;
  }
  * {
    &:first-child {
      margin-top: 0;
    }
  }
}
.r-club-report__image-wrapper {
  margin-block: 24rem;
}
.r-club-report__image--full {
  width: 100%;
  aspect-ratio: 880 / 420;
  border-radius: var(--img-round);
}
.r-club-report__image {
  width: 100%;
  aspect-ratio: 282 / 184;
  border-radius: var(--img-round);
}
.r-club-report__image-list {
  margin-top: 24rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12rem;
}