@charset "UTF-8";

/* =============================================
# CSS Variables
============================================= */
:root {
  /* Colors */
  --color-blue: rgb(96, 185, 204);
  --color-yellow: rgb(249, 208, 46);
  --color-green: rgb(161, 212, 153);
  --color-gray: #626262;
  --color-emerald: #267c90;

  /* Typography */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-family-a-otf-gothic-mb101-pr6n: a-otf-gothic-mb101-pr6n, sans-serif;
  --font-family-dm-sans: dm-sans, sans-serif;
  --font-family-fiona: fiona, sans-serif;

  /* Layout */
  --sidebar-width: clamp(3.75rem, 2.171rem + 3.29vw, 5.625rem);
  --sidebar-width-mobile: clamp(2.5rem, -0.489rem + 12.76vw, 5.625rem);
  /* 90px → 40px */
  --padding-mobile: clamp(1.25rem, 0.054rem + 5.1vw, 2.5rem);
  /* 40px → 20px */

  /* Header */
  --header-height: 65px;
  --header-height-tablet: 113px;
}

/* =============================================
# Reset
============================================= */
html {
  scroll-behavior: smooth;
}


.l-contents section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.l-contents picture {
  display: block;
  width: 100%;
  height: 100%;
}

.l-contents img {
  display: block;
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
}

.max-w-content {
  max-width: 100% !important;
}


/* =============================================
# Layout
============================================= */
/* l-inner
=============================== */
.l-inner {
  width: 100%;
  max-width: calc(1280px + 20px * 2);
  margin-right: auto;
  margin-left: auto;
  padding-right: 20px;
  padding-left: 20px;
}

@media screen and (max-width: 767px) {
  .l-inner {
    max-width: 100%;
    padding-right: var(--padding-mobile);
    padding-left: var(--padding-mobile);
  }
}

/* l-main
=============================== */
.l-main {}

.l-main__breadcrumb {
  max-width: 1400px;
}

/* l-contents
=============================== */
.l-contents {
  position: relative;
  z-index: 1;
  font-family: var(--font-family-a-otf-gothic-mb101-pr6n);
  --line-scale-y: 0;
  --line-color: var(--color-blue);
}

.l-contents:before,
.l-contents:after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  z-index: 2;
  width: 1px;
  height: 100%;
  background-color: var(--line-color, var(--color-blue));
  transform: scaleY(var(--line-scale-y, 0));
  transform-origin: top;
}

.l-contents:before {
  left: var(--sidebar-width);
}

.l-contents:after {
  right: var(--sidebar-width);
}

@media screen and (max-width: 767px) {
  .l-contents:before {
    display: none;
  }

  .l-contents:after {
    right: var(--sidebar-width-mobile);
  }
}

.l-contents__main-visual {
  position: relative;
  z-index: 1;
}

.l-contents__wraper {
  display: grid;
  grid-template-columns: var(--sidebar-width) calc(100% - var(--sidebar-width) * 2) var(--sidebar-width);
}

@media screen and (max-width: 767px) {
  .l-contents__wraper {
    grid-template-columns: calc(100% - var(--sidebar-width-mobile)) var(--sidebar-width-mobile);
    min-width: 0;
  }
}

.l-contents__main {
  min-width: 0;
}

.l-contents__side {
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: var(--header-height);
  min-width: 0;
  width: 100%;
  height: 100vh;
}

@media screen and (max-width: 1112px) {
  .l-contents__side {
    top: var(--header-height-tablet);
  }
}

@media screen and (max-width: 767px) {
  .l-contents__side {
    top: 0;
  }

  .l-contents__side.l-contents__side--left {
    display: none;
  }
}

.l-contents__title {
  font-family: var(--font-family-dm-sans);
  color: var(--line-color, var(--color-blue));
  font-size: 20px;
  font-size: clamp(1.125rem, 1.02rem + 0.22vw, 1.25rem);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: capitalize;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

.l-contents__nav {
  width: 100%;
}

.l-contents__sub-visual {
  position: relative;
  z-index: 3;
}

/* l-sections
=============================== */
.l-sections {}

/* スムーススクロールの位置調整 */
#section-concept,
#section-refined-bloom,
#section-urban-prairie,
#section-club-side-active {
  scroll-margin-top: var(--header-height);
}

@media screen and (max-width: 1112px) {

  #section-concept,
  #section-refined-bloom,
  #section-urban-prairie,
  #section-club-side-active {
    scroll-margin-top: var(--header-height-tablet);
  }
}

@media screen and (max-width: 767px) {

  #section-concept,
  #section-refined-bloom,
  #section-urban-prairie,
  #section-club-side-active {
    scroll-margin-top: 0;
  }
}

.l-sections__concept {
  padding-top: 100px;
  padding-bottom: 80px;
}

@media screen and (max-width: 767px) {
  .l-sections__concept {
    padding-top: 50px;
    padding-top: clamp(3.125rem, 0.136rem + 12.76vw, 6.25rem);
    padding-bottom: 30px;
    padding-bottom: clamp(1.875rem, 0.081rem + 7.65vw, 3.75rem);
  }
}

.l-sections__refined-bloom,
.l-sections__urban-prairie,
.l-sections__club-side-active {
  padding-top: 100px;
}

@media screen and (max-width: 767px) {

  .l-sections__refined-bloom,
  .l-sections__urban-prairie,
  .l-sections__club-side-active {
    padding-top: 50px;
    padding-top: clamp(3.125rem, 0.136rem + 12.76vw, 6.25rem);
  }
}

.l-sections__refined-bloom {
  padding-bottom: 85px;
  color: var(--color-blue);
}

@media screen and (max-width: 767px) {
  .l-sections__refined-bloom {
    padding-bottom: 28px;
    padding-bottom: clamp(1.75rem, 0.076rem + 7.14vw, 3.5rem);
  }
}

.l-sections__urban-prairie {
  padding-bottom: 95px;
  color: var(--color-yellow);
}

@media screen and (max-width: 767px) {
  .l-sections__urban-prairie {
    padding-bottom: 32px;
    padding-bottom: clamp(2rem, 0.087rem + 8.16vw, 4rem);
  }
}

.l-sections__club-side-active {
  padding-bottom: 160px;
  color: var(--color-green);
}

@media screen and (max-width: 767px) {
  .l-sections__club-side-active {
    padding-bottom: 80px;
    padding-bottom: clamp(5rem, 0.217rem + 20.41vw, 10rem);
  }
}

/* =============================================
# Component
============================================= */
/* c-label
=============================== */
.c-label {
  font-family: var(--font-family-fiona);
  color: inherit;
  font-size: 56px;
  font-weight: var(--font-weight-regular);
  letter-spacing: normal;
  line-height: 1;
  text-transform: capitalize;
}

@media screen and (max-width: 767px) {
  .c-label {
    font-size: 30px;
    font-size: clamp(1.875rem, 0.081rem + 7.65vw, 3.75rem);
  }
}

.c-label span {
  text-transform: lowercase;
}

/* c-caption
=============================== */
.c-caption {
  display: block;
  padding-top: 32px;
  padding-top: clamp(0.625rem, -0.533rem + 2.41vw, 2rem);
  padding-bottom: 32px;
  padding-bottom: clamp(0.625rem, -0.533rem + 2.41vw, 2rem);
}

@media screen and (max-width: 767px) {
  .c-caption {
    margin-left: var(--padding-mobile);
    padding-top: 25px;
    padding-bottom: 25px;
  }
}

.c-caption:has([src*="refined-bloom-text_look1"]),
.c-caption:has([src*="urban-prairie-text_look1"]),
.c-caption:has([src*="club-side-active-text_look1"]) {
  width: 182px;
  width: clamp(6.25rem, 1.934rem + 8.99vw, 11.375rem);
}

@media screen and (max-width: 767px) {

  .c-caption:has([src*="refined-bloom-text_look1"]),
  .c-caption:has([src*="urban-prairie-text_look1"]),
  .c-caption:has([src*="club-side-active-text_look1"]) {
    width: clamp(6.25rem, 0.271rem + 25.51vw, 12.5rem);
  }
}

.c-caption:has([src*="refined-bloom-text_look2"]),
.c-caption:has([src*="urban-prairie-text_look2"]),
.c-caption:has([src*="club-side-active-text_look2"]) {
  width: 193px;
  width: clamp(6.5rem, 1.816rem + 9.76vw, 12.063rem);
}

@media screen and (max-width: 767px) {

  .c-caption:has([src*="refined-bloom-text_look2"]),
  .c-caption:has([src*="urban-prairie-text_look2"]),
  .c-caption:has([src*="club-side-active-text_look2"]) {
    width: clamp(6.5rem, 0.282rem + 26.53vw, 13rem);
  }
}

/* c-btn
=============================== */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  max-width: 100%;
  height: 56px;
  background-color: transparent;
  border: 1px solid var(--color-gray);
  font-family: var(--font-family-dm-sans);
  color: var(--color-gray);
  font-size: 20px;
  font-weight: var(--font-weight-light);
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: capitalize;
}

@media screen and (max-width: 767px) {
  .c-btn {
    width: 210px;
    width: clamp(13.125rem, 0.569rem + 53.57vw, 26.25rem);
    height: 40px;
    height: clamp(2.5rem, 0.108rem + 10.2vw, 5rem);
    font-size: 13px;
    font-size: clamp(0.813rem, 0.035rem + 3.32vw, 1.625rem);
  }
}

/* =============================================
# Project
============================================= */
/* p-main-visual
=============================== */
.p-main-visual {
  position: relative;
}

.p-main-visual__title {
  display: flex;
  justify-content: center;
  position: absolute;
  z-index: 2;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

.p-main-visual__title img {
  width: 408px;
  width: clamp(19.25rem, 13.987rem + 10.96vw, 25.5rem);
  max-width: 100%;
  transform: scale(0.8);
  visibility: hidden;
  opacity: 0;
}

@media screen and (max-width: 767px) {
  .p-main-visual__title {
    top: 4.6%;
    padding-right: var(--sidebar-width-mobile);
  }

  .p-main-visual__title img {
    width: 204px;
    width: clamp(12.75rem, 0.553rem + 52.04vw, 25.5rem);
  }
}

.p-main-visual__img {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.l-contents__main-visual .p-main-visual__img img {
  transform: scale(1.15);
  visibility: hidden;
  opacity: 0;
}

.p-main-visual__credit {
  position: absolute;
  top: 7.2%;
  right: 4.2vw;
  z-index: 2;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .p-main-visual__credit {
    top: initial;
    bottom: 6.3%;
    right: initial;
    left: 50%;
    transform: translateX(-50%);
  }
}

.p-main-visual__credit ul {
  display: flex;
  flex-direction: column;
}

.p-main-visual__credit ul li {
  font-family: var(--font-family-dm-sans);
  color: var(--color-emerald);
  font-size: 16px;
  font-size: clamp(0.75rem, 0.539rem + 0.44vw, 1rem);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.12em;
  line-height: 2;
  text-transform: capitalize;
  text-align: right;
}

.p-main-visual__credit ul li span {
  text-transform: lowercase;
}

@media screen and (max-width: 767px) {
  .p-main-visual__credit ul li {
    font-size: 11.5px;
    font-size: clamp(0.719rem, 0.031rem + 2.93vw, 1.438rem);
    line-height: 1.8;
    text-align: center;
  }
}

/* p-main-visual
=============================== */
.p-nav {}

.p-nav__lists {
  display: flex;
  flex-direction: column;
  row-gap: 40px;
}

@media screen and (max-width: 767px) {
  .p-nav__lists {
    row-gap: 22px;
    row-gap: clamp(1.375rem, 0.299rem + 4.59vw, 2.5rem);
  }
}

.p-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-nav__list a {
  font-family: var(--font-family-dm-sans);
  color: var(--line-color, var(--color-blue));
  font-size: 20px;
  font-size: clamp(1.125rem, 1.02rem + 0.22vw, 1.25rem);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.02em;
  line-height: 44px;
  text-transform: capitalize;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

@media screen and (max-width: 767px) {
  .p-nav__list a {
    font-size: 12px;
    font-size: clamp(0.75rem, 0.033rem + 3.06vw, 1.5rem);
    line-height: 40px;
  }
}

.p-nav__list a span {
  text-transform: lowercase;
}

/* p-movie
=============================== */
.p-movie {}

.p-movie__box {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1500 / 812;
}

.p-movie__box video {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #9f9f9f;
  object-fit: cover;
}

@media screen and (max-width: 767px) {
  .p-movie__box {
    aspect-ratio: 670 / 1192;
  }
}

.p-movie__btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-gray);
  border-radius: 50%;
  background: transparent;
  color: var(--color-gray);
  cursor: pointer;
  font-family: var(--font-family-dm-sans);
}


.p-movie__btn:hover,
.p-movie__btn:focus {
  background: rgba(255, 255, 255, 0.9);
  /* outline: 1px solid var(--color-gray);
  outline-offset: 2px; */
}

.p-movie__icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-movie__icon.p-movie__icon--unmuted {
  display: none;
}

.p-movie__btn.is-unmuted .p-movie__icon--muted {
  display: none;
}

.p-movie__btn.is-unmuted .p-movie__icon--unmuted {
  display: flex;
}

/* p-concept
=============================== */
.p-concept {
  text-align: center;
}

.p-concept__inner {}

.p-concept__title {
  font-family: var(--font-family-fiona);
  color: var(--color-blue);
  font-size: 60px;
  font-size: clamp(2.5rem, 1.447rem + 2.19vw, 3.75rem);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.02em;
  text-transform: capitalize;
}

@media screen and (max-width: 767px) {
  .p-concept__title {
    font-size: 30px;
    font-size: clamp(1.875rem, 0.081rem + 7.65vw, 3.75rem);
  }
}

.p-concept__text {
  margin-top: 43px;
  color: var(--color-gray);
  font-size: 18px;
  font-size: clamp(0.875rem, 0.664rem + 0.44vw, 1.125rem);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.08em;
  line-height: 2.33333333;
}

@media screen and (max-width: 767px) {
  .p-concept__text {
    margin-top: 19px;
    font-size: 12px;
    font-size: clamp(0.75rem, 0.033rem + 3.06vw, 1.5rem);
    letter-spacing: 0.04em;
  }
}

.p-concept__movie {
  margin-top: 110px;
  margin-right: calc(50% - 50vw + var(--sidebar-width));
  margin-left: calc(50% - 50vw + var(--sidebar-width));
}

@media screen and (max-width: 767px) {
  .p-concept__movie {
    margin-top: 51px;
    margin-top: clamp(3.188rem, -0.34rem + 15.05vw, 6.875rem);
    margin-right: calc(var(--padding-mobile) * -1);
    margin-left: calc(var(--padding-mobile) * -1);
  }
}

/* p-section
=============================== */
.p-section {}

.p-section__slider {}

.p-section__inner {}

.p-section__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-right: 30px;
  padding-right: calc(30 / 1280 * 100%);
  padding-left: 30px;
  padding-left: calc(30 / 1280 * 100%);
}

@media screen and (max-width: 767px) {
  .p-section__wrap {
    margin-top: 45px;
    margin-top: clamp(2.813rem, -1.074rem + 16.58vw, 6.875rem);
    margin-right: calc(var(--padding-mobile) * -1);
    margin-left: calc(var(--padding-mobile) * -1);
    padding-right: 0;
    padding-left: 0;
  }
}

.p-section__wrap.u-mt60 {
  margin-top: 60px;
}

.p-section__wrap.u-mt65 {
  margin-top: 65px;
}

.p-section__wrap.u-mt80 {
  margin-top: 80px;
}

.p-section__wrap.u-mt85 {
  margin-top: 85px;
}

.p-section__wrap.u-mt95 {
  margin-top: 95px;
}

.p-section__wrap.u-mt100 {
  margin-top: 100px;
}

.p-section__wrap.u-mt110 {
  margin-top: 110px;
}

.p-section__wrap.u-mt120 {
  margin-top: 120px;
}

.p-section__wrap.u-mt125 {
  margin-top: 125px;
}

.p-section__wrap.u-mt130 {
  margin-top: 130px;
}

.p-section__wrap.u-mt160 {
  margin-top: 160px;
  margin-top: clamp(5rem, 0.789rem + 8.77vw, 10rem);
}

.p-section__wrap.u-mt175 {
  margin-top: 175px;
  margin-top: clamp(4.375rem, -1.151rem + 11.51vw, 10.938rem);
}

.p-section__wrap.u-mt-200 {
  margin-top: -200px;
}

@media screen and (max-width: 767px) {

  .p-section__wrap.u-mt60,
  .p-section__wrap.u-mt65 {
    margin-top: 40px;
    margin-top: clamp(2.5rem, 0.108rem + 10.2vw, 5rem);
  }

  .p-section__wrap.u-mt80 {
    margin-top: 38px;
    margin-top: clamp(2.375rem, 0.103rem + 9.69vw, 4.75rem);
  }

  .p-section__wrap.u-mt85 {
    margin-top: 33px;
    margin-top: clamp(2.063rem, 0.089rem + 8.42vw, 4.125rem);
  }

  .p-section__wrap.u-mt90 {
    margin-top: 33px;
    margin-top: clamp(2.063rem, 0.089rem + 8.42vw, 4.125rem);
  }

  .p-section__wrap.u-mt95 {
    margin-top: 40px;
    margin-top: clamp(2.5rem, 0.108rem + 10.2vw, 5rem);
  }

  .p-section__wrap.u-mt100 {
    margin-top: 34px;
    margin-top: clamp(2.125rem, 0.092rem + 8.67vw, 4.25rem);
  }

  .p-section__wrap.u-mt110 {
    margin-top: 48px;
    margin-top: clamp(3rem, 0.13rem + 12.24vw, 6rem);
  }

  .p-section__wrap.p-section__wrap--col2.p-section__wrap--rightOver.u-mt110 {
    margin-top: 32px;
    margin-top: clamp(2rem, 0.087rem + 8.16vw, 4rem);
  }

  .p-section__wrap.u-mt115 {
    margin-top: 34px;
    margin-top: clamp(2.125rem, 0.092rem + 8.67vw, 4.25rem);
  }

  .p-section__wrap.u-mt120 {
    margin-top: 32px;
    margin-top: clamp(2rem, 0.087rem + 8.16vw, 4rem);
  }

  .p-section__wrap.u-mt125,
  .p-section__wrap.u-mt130,
  .p-section__wrap.u-mt175 {
    margin-top: 35px;
    margin-top: clamp(2.188rem, 0.095rem + 8.93vw, 4.375rem);
  }

  .p-section__wrap.u-mt160 {
    margin-top: 80px;
    margin-top: clamp(5rem, 0.217rem + 20.41vw, 10rem);
  }

  .p-section__wrap.u-mt-200 {
    margin-top: -40px;
    margin-top: calc(clamp(2.5rem, 0.108rem + 10.2vw, 5rem) * -1);
  }
}

.p-section__wrap.p-section__wrap--col1 .p-section__img {
  width: 848px;
  max-width: 100%;
}

.p-section__wrap.p-section__wrap--col1 .p-section__img.u-w680 {
  width: 680px;
  max-width: 100%;
}

@media screen and (max-width: 767px) {
  .p-section__wrap.p-section__wrap--col1 .p-section__img {
    width: 100%;
  }

  .p-section__wrap.p-section__wrap--col1 .p-section__img.u-w680 {
    width: calc(100% - var(--padding-mobile) * 2);
    margin-right: var(--padding-mobile);
    margin-left: var(--padding-mobile);
    padding-right: 0;
    padding-left: 0;
  }
}

.p-section__wrap.p-section__wrap--col2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  column-gap: 18px;
  column-gap: calc(18 / 1280 * 100%);
}

@media screen and (max-width: 767px) {
  .p-section__wrap.p-section__wrap--col2 {
    grid-template-columns: 1fr;
    row-gap: 8px;
    row-gap: clamp(0.5rem, 0.022rem + 2.04vw, 1rem);
    margin-right: 0;
    margin-left: 0;
  }
}

.p-section__wrap.p-section__wrap--col2-wide {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: start;
  align-items: start;
  column-gap: 80px;
  column-gap: calc(80 / 1280 * 100%);
  padding-right: 0;
  padding-left: 0;
}

.p-section__wrap.p-section__wrap--col2-wide.u-mt-200 {
  align-items: center;
}

@media screen and (max-width: 767px) {
  .p-section__wrap.p-section__wrap--col2-wide {
    grid-template-columns: 1fr;
    row-gap: 30px;
    row-gap: clamp(1.875rem, 0.081rem + 7.65vw, 3.75rem);
  }

  .p-section__wrap.p-section__wrap--col2-wide .p-section__box:nth-child(1) {
    row-gap: 25px;
    row-gap: clamp(1.563rem, 0.068rem + 6.38vw, 3.125rem);
  }

  .p-section__wrap.p-section__wrap--col2-wide .p-section__box:nth-child(1) .p-section__img {
    width: 260px;
    width: clamp(16.25rem, -1.687rem + 76.53vw, 35rem);
    padding-left: 0;
    margin-left: var(--padding-mobile);
  }

  .p-section__wrap.p-section__wrap--col2-wide .p-section__box:nth-child(1) .p-section__img:nth-child(2) {
    margin-left: auto;
  }

  .p-section__wrap.p-section__wrap--col2-wide .p-section__box:nth-child(2) {
    row-gap: 35px;
    row-gap: clamp(2.188rem, 0.095rem + 8.93vw, 4.375rem);
    row-gap: 30px;
    row-gap: clamp(1.875rem, 0.081rem + 7.65vw, 3.75rem);
  }

  .p-section__wrap.p-section__wrap--col2-wide .p-section__box:nth-child(2) .p-section__lists,
  .p-section__wrap.p-section__wrap--col2-wide .p-section__box:nth-child(2) .p-section__img {
    width: 185px;
    width: clamp(11.563rem, 0.501rem + 47.19vw, 23.125rem);
    margin-right: auto;
    margin-left: auto;
  }

  .p-section__wrap.p-section__wrap--col2-wide.u-mt-200 {
    display: flex;
    flex-direction: column;
    flex-direction: column-reverse;
  }

  .p-section__wrap.p-section__wrap--col2-wide.u-mt-200 .p-section__box.u-pb450 {
    row-gap: 28px;
    row-gap: clamp(1.75rem, 0.076rem + 7.14vw, 3.5rem);
  }

  .p-section__wrap.p-section__wrap--col2-wide.u-mt-200 .p-section__box:nth-child(2) .p-section__img,
  .p-section__wrap.p-section__wrap--col2-wide.u-mt-200 .p-section__box:nth-child(2) .p-section__lists {
    width: 260px;
    width: clamp(16.25rem, 0.705rem + 66.33vw, 32.5rem);
  }

  .p-section__wrap.p-section__wrap--col2-wide.u-mt-200 .p-section__box:nth-child(1) .p-section__img {
    width: 260px;
    width: clamp(16.25rem, 0.705rem + 66.33vw, 32.5rem);
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
  }

  .p-section__wrap.p-section__wrap--col2-wide.u-mt-200 .p-section__box:nth-child(1) .p-section__img img {
    width: 75%;
  }
}

.p-section__wrap.p-section__wrap--col3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  column-gap: 30px;
  column-gap: calc(30 / 1500 * 100%);
  margin-right: calc(50% - 50vw + var(--sidebar-width));
  margin-left: calc(50% - 50vw + var(--sidebar-width));
  padding-right: 0;
  padding-left: 0;
}

.p-section__wrap.p-section__wrap--col3 .p-section__img:nth-child(2) {
  margin-top: 31%;
}

.p-section__wrap.p-section__wrap--col3 .p-section__img:nth-child(3) {
  margin-top: 62%;
}

@media screen and (max-width: 767px) {
  .p-section__wrap.p-section__wrap--col3 {
    grid-template-columns: 1fr;
    row-gap: 20px;
    row-gap: clamp(1.25rem, 0.054rem + 5.1vw, 2.5rem);
    margin-right: calc(var(--padding-mobile) * -1);
    margin-left: calc(var(--padding-mobile) * -1);
  }

  .p-section__wrap.p-section__wrap--col3 .p-section__img {
    width: 195px;
    width: clamp(12.188rem, 0.529rem + 49.74vw, 24.375rem);
  }

  .p-section__wrap.p-section__wrap--col3 .p-section__img:nth-child(2) {
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
  }

  .p-section__wrap.p-section__wrap--col3 .p-section__img:nth-child(3) {
    margin-top: 0;
    margin-left: auto;
  }
}

.p-section__wrap.p-section__wrap--46 {
  display: grid;
  grid-template-columns: 4fr 6fr;
  align-items: start;
  column-gap: 60px;
  column-gap: calc(60 / 1280 * 100%);
  padding-right: 115px;
  padding-right: calc(115 / 1280 * 100%);
  padding-left: 115px;
  padding-left: calc(115 / 1280 * 100%);
}

@media screen and (max-width: 767px) {
  .p-section__wrap.p-section__wrap--46 {
    grid-template-columns: 1fr;
    row-gap: 40px;
    row-gap: clamp(2.5rem, 0.108rem + 10.2vw, 5rem);
    padding-right: 0;
    padding-left: 0;
  }

  .p-section__wrap.p-section__wrap--46>.p-section__img {
    margin-right: var(--padding-mobile);
    margin-left: var(--padding-mobile);
    padding-right: 0;
    padding-left: 0;
  }

  .p-section__wrap.p-section__wrap--46 .p-section__box.p-section__box--right {
    flex-direction: row;
  }
}

.p-section__wrap.p-section__wrap--56 {
  display: grid;
  grid-template-columns: 5fr 6fr;
  align-items: start;
  column-gap: 180px;
  column-gap: calc(180 / 1500 * 100%);
  margin-right: calc(50% - 50vw + var(--sidebar-width));
  margin-left: calc(50% - 50vw + var(--sidebar-width));
  padding-right: 0;
  padding-left: 0;
}

@media screen and (max-width: 767px) {
  .p-section__wrap.p-section__wrap--56 {
    grid-template-columns: 1fr;
    row-gap: 40px;
    row-gap: clamp(2.5rem, 0.108rem + 10.2vw, 5rem);
    margin-right: calc(var(--padding-mobile) * -1);
    margin-left: calc(var(--padding-mobile) * -1);
  }

  .p-section__wrap.p-section__wrap--56 .p-section__img:nth-child(1) {
    width: 200px;
    width: clamp(12.5rem, 0.542rem + 51.02vw, 25rem);
  }

  .p-section__wrap.p-section__wrap--56 .p-section__img:nth-child(2) {
    width: 294px;
    width: clamp(18.375rem, 0.797rem + 75vw, 36.75rem);
    margin-left: auto;
  }
}

.p-section__wrap.p-section__wrap--over {
  margin-right: calc(50% - 50vw + var(--sidebar-width));
  margin-left: calc(50% - 50vw + var(--sidebar-width));
  padding-right: 0;
  padding-left: 0;
}

@media screen and (max-width: 767px) {
  .p-section__wrap.p-section__wrap--over {
    margin-right: calc(var(--padding-mobile) * -1);
    margin-left: calc(var(--padding-mobile) * -1);
  }
}

.p-section__wrap.p-section__wrap--rightOver {
  margin-right: calc(50% - 50vw + var(--sidebar-width));
  padding-right: 0;
}

.p-section__wrap.p-section__wrap--rightOver .p-section__img.u-w440 {
  width: 440px;
  width: calc(440 / 670 * 100%);
  max-width: 100%;
}

@media screen and (max-width: 767px) {
  .p-section__wrap.p-section__wrap--rightOver {
    margin-right: calc(var(--padding-mobile) * -1);
    margin-left: 0;
  }

  .p-section__wrap.p-section__wrap--rightOver .p-section__img.u-w440 {
    margin-top: -113px;
    margin-top: calc((clamp(7.063rem, 0.306rem + 28.83vw, 14.125rem)) * -1);
    width: 160px;
    width: clamp(10rem, 0.434rem + 40.82vw, 20rem);
  }

  .p-section__wrap.p-section__wrap--col2.p-section__wrap--rightOver {
    row-gap: 25px;
    row-gap: clamp(1.563rem, 0.068rem + 6.38vw, 3.125rem);
  }
}

.p-section__box {
  display: flex;
  flex-direction: column;
  row-gap: 45px;
  row-gap: clamp(1.875rem, 1.086rem + 1.64vw, 2.813rem);
  width: 100%;
}

.p-section__box.p-section__box--center {
  align-items: center;
}

.p-section__box.p-section__box--right {
  align-items: flex-end;
}

@media screen and (max-width: 767px) {
  .p-section__box.p-section__box--right {
    column-gap: 42px;
    column-gap: clamp(2.625rem, 0.114rem + 10.71vw, 5.25rem);
  }

  .p-section__box.p-section__box--right .p-section__img.u-sp-w180 {
    width: 180px;
    width: clamp(11.25rem, 0.488rem + 45.92vw, 22.5rem);
  }
}

.p-section__box.u-mt20 {
  margin-top: 20px;
}

@media screen and (max-width: 767px) {
  .p-section__box.u-mt20 {
    margin-top: 5px;
    margin-top: clamp(0.313rem, 0.014rem + 1.28vw, 0.625rem);
  }
}

.p-section__box.u-mt50 {
  margin-top: 50px;
}

.p-section__box.u-mt60 {
  margin-top: 60px;
}

.p-section__box.u-mt75 {
  margin-top: 75px;
}

.p-section__box.u-mt80 {
  margin-top: 80px;
}

.p-section__box.u-mt85 {
  margin-top: 85px;
}

@media screen and (max-width: 767px) {

  .p-section__box.u-mt50,
  .p-section__box.u-mt60,
  .p-section__box.u-mt75,
  .p-section__box.u-mt80,
  .p-section__box.u-mt85 {
    margin-top: 30px;
    margin-top: clamp(1.875rem, 0.081rem + 7.65vw, 3.75rem);
  }
}

.p-section__box.u-pb200 {
  padding-bottom: 200px;
  padding-bottom: clamp(8.313rem, 4.786rem + 7.35vw, 12.5rem);
}

.p-section__box.u-pb360 {
  padding-bottom: 360px;
}

@media screen and (max-width: 767px) {

  .p-section__box.u-pb200,
  .p-section__box.u-pb360 {
    padding-bottom: 0;
  }
}

.p-section__text {
  width: 490px;
  max-width: 100%;
  color: var(--color-gray);
  font-size: 15px;
  font-size: clamp(0.813rem, 0.707rem + 0.22vw, 0.938rem);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.08em;
  line-height: 2.66666667;
  text-align: left;
}

@media screen and (max-width: 767px) {
  .p-section__text {
    width: 240px;
    width: clamp(15rem, 0.651rem + 61.22vw, 30rem);
    font-size: 11px;
    font-size: clamp(0.688rem, 0.03rem + 2.81vw, 1.375rem);
    /* letter-spacing: 0.04em; */
    line-height: 2.09090909;
  }
}

.p-section__lists {
  display: inline-block;
}

.p-section__lists.u-w600 {
  width: 600px;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.p-section__lists.u-w760 {
  width: 760px;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.p-section__box.p-section__box--center .p-section__lists {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  gap: clamp(0.625rem, 0.204rem + 0.88vw, 1.125rem);
}

@media screen and (max-width: 767px) {
  .p-section__lists.u-sp-mb-5 {
    margin-bottom: -5px;
  }

  .p-section__box.p-section__box--center .p-section__lists {
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 16px;
    column-gap: clamp(1rem, 0.043rem + 4.08vw, 2rem);
    row-gap: 6px;
    row-gap: clamp(0.375rem, 0.016rem + 1.53vw, 0.75rem);
  }
}

.p-section__list {}

.p-section__list+.p-section__list {
  margin-top: 18px;
  margin-top: clamp(0.625rem, 0.204rem + 0.88vw, 1.125rem);
}

@media screen and (max-width: 767px) {
  .p-section__list+.p-section__list {
    margin-top: 6px;
    margin-top: clamp(0.375rem, 0.016rem + 1.53vw, 0.75rem);
  }
}

.p-section__box.p-section__box--center .p-section__list+.p-section__list {
  margin-top: 0;
}


.p-section__list a {
  display: inline-block;
  font-family: var(--font-family-dm-sans);
  color: var(--color-gray);
  font-size: 16px;
  font-size: clamp(0.75rem, 0.539rem + 0.44vw, 1rem);
  font-weight: var(--font-weight-light);
  letter-spacing: 0.04em;
  text-decoration: underline;
}

@media screen and (max-width: 767px) {
  .p-section__list a {
    font-size: 10.5px;
    font-size: clamp(0.656rem, 0.028rem + 2.68vw, 1.313rem);
  }
}

.p-section__btn {
  margin-top: -155px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .p-section__btn {
    margin-top: 80px;
  }
}

.p-section__switching-img {
  position: relative;
}

.p-section__switching-img picture {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.p-section__switching-img img {
  opacity: 0;
  animation: change-img-anim 6s infinite;
}

/* 最初の画像要素（picture内のimgまたは最初のimg） */
.p-section__switching-img picture img,
.p-section__switching-img>img:first-of-type {
  position: relative;
  z-index: 2;
  animation: change-img-anim-first 6s infinite;
  animation-delay: 0s;
}

/* 2番目の画像要素（picture + imgまたは2番目のimg） */
.p-section__switching-img picture+img,
.p-section__switching-img>img:last-of-type {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  animation-delay: 3s;
}

@keyframes change-img-anim-first {
  0% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  36% {
    opacity: 1;
  }

  65% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes change-img-anim {
  0% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  36% {
    opacity: 1;
  }

  65% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.js-color-mask .p-section__img {
  position: relative;
  z-index: 1;
  --mask-opacity: 1;
}

.js-color-mask .p-section__img::after {
  display: block;
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: var(--mask-opacity);
  transition: opacity 0.01s linear;
}

@media screen and (max-width: 767px) {
  .js-color-mask.js-color-mask--small .p-section__img::after {
    left: 0;
    transform: translate(0, -50%);
    width: 75%;
  }
}

#section-refined-bloom .js-color-mask .p-section__img::after {
  background-color: var(--color-blue);
}

#section-urban-prairie .js-color-mask .p-section__img::after {
  background-color: var(--color-yellow);
}

#section-club-side-active .js-color-mask .p-section__img::after {
  background-color: var(--color-green);
}

/* =============================================
# Utility
============================================= */
.u-show-sp {
  display: none;
}

@media screen and (max-width: 767px) {
  .u-show-sp {
    display: block;
  }
}

/* PCのみ表示（768px以上） */
.u-show-pc {
  display: block;
}

@media screen and (max-width: 767px) {
  .u-show-pc {
    display: none;
  }
}

.u-switch-tab {
  display: block;
}

@media screen and (max-width: 767px) {
  .u-switch-tab {
    display: none;
  }
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* =============================================
# GSAP
============================================= */
.js-fadeIn {
  visibility: hidden;
  opacity: 0;
  transform: translateY(20px);
}