:root {
  --font-base: "Noto Sans JP", sans-serif;
  --font-en: "Lato", sans-serif;
  --font-ubuntu: "Ubuntu", sans-serif;
  --leading-trim: calc((1em - 1lh) / 2);
  --blue: #2635A7;
  --bg-noise: url("../img/common/bg-noise-blue.png") repeat;
  --bg-noise-yel: url("../img/common/bg-noise-yellow.png") repeat;
  --border: #2635A71A;
  --border02: #2635A733;
  --yellow: #FFF100;
  --grey: #F2F3F4;
  --header-height: 71px;
  --sp-fixed-btns-height: 46px;
  --radius: 10px;
  --mask-arrow: url("../img/common/icon-arrow.svg") no-repeat center center/ contain;
  --top-part-height: min(calc(70 / 1280) * 100vw, 70px);
}
@supports not (top: 1lh) {
  :root {
    --leading-trim: 0px;
  }
}
@media screen and (max-width: 768px) {
  :root {
    --header-height: 60px;
  }
}

.p-env {
  background: var(--grey);
}
.p-env > section:not(.c-sub-mv) {
  padding-block: 120px calc(120px + var(--top-part-height));
}
.p-env .c-count-item {
  border-radius: var(--radius);
  border: 1px solid rgba(38, 53, 167, 0.2);
  grid-column: span 6;
}
@media screen and (max-width: 1023px) {
  .p-env .c-count-item {
    grid-column: auto;
  }
}
.p-env .c-count-item.--small {
  grid-column: span 3;
}
@media screen and (max-width: 1023px) {
  .p-env .c-count-item.--small {
    grid-column: auto;
  }
}
.p-env .c-count-item.--medium {
  grid-column: span 4;
}
@media screen and (max-width: 1023px) {
  .p-env .c-count-item.--medium {
    grid-column: auto;
  }
}
.p-env__num-wrap {
  position: relative;
}
.p-env__num-wrap .gender-text {
  font-size: clamp(1.4rem, 1.2342541436rem + 0.4419889503vw, 1.8rem);
  line-height: 1;
  background: var(--bg-noise);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: absolute;
  left: 0;
  bottom: 100%;
}
.p-env__count-list {
  margin-top: 120px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
@media screen and (max-width: 1023px) {
  .p-env__count-list {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

@media screen and (min-width: 1024px) {
  .p-env-comp .c-count-item.--small .c-count-item__cont {
    left: 30px;
    right: 30px;
  }
}

.p-env-club {
  padding-bottom: 205px;
}
.p-env-club__inner {
  display: grid;
  grid-template-columns: 49.1071428571% 1fr;
  grid-template-rows: auto auto 1fr;
  align-items: start;
  gap: 0 60px;
  grid-template-areas: "ttl img" "text img" "btn img";
}
@media screen and (max-width: 1023px) {
  .p-env-club__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "ttl" "img" "text" "btn";
    gap: 0;
  }
}
.p-env-club__ttl {
  grid-area: ttl;
}
.p-env-club__text {
  grid-area: text;
  max-width: 453px;
  margin-top: 80px;
}
@media screen and (max-width: 1023px) {
  .p-env-club__text {
    margin-top: 60px;
    max-width: unset;
  }
}
.p-env-club__btn {
  grid-area: btn;
}
.p-env-club__imgs-wrap {
  grid-area: img;
  margin-top: 32px;
  position: relative;
  display: grid;
  gap: 15px 0;
}
@media screen and (max-width: 1023px) {
  .p-env-club__imgs-wrap {
    margin-top: 80px;
    max-width: min(50%, 400px);
    justify-self: center;
  }
}
@media screen and (max-width: 768px) {
  .p-env-club__imgs-wrap {
    max-width: unset;
    width: min(70%, 350px);
    margin-top: 60px;
  }
}
.p-env-club__img {
  border-radius: var(--radius);
  overflow: hidden;
}
.p-env-club__img:nth-child(1) {
  aspect-ratio: 449/289;
}
.p-env-club__img:nth-child(2) {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40.7572383073%;
  aspect-ratio: 415/503;
  transform: translate(-27.3224043716%, -9.0517241379%) rotate(-6deg);
}
.p-env-club__img:nth-child(3) {
  width: 66.8151447661%;
  aspect-ratio: 300/212;
  justify-self: end;
}
.p-env-club__img > img {
  width: 100%;
}