@charset "utf-8";

* {
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: clamp(1.4rem, 3.7vw, 2.8rem);
  font-family: 'Noto Sans JP', sans-serif;
  color: #fff;
}
@media screen and (768px <= width) {
  body {
    font-size: 1.8rem;
  }
}

a {
  text-decoration: none;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

/* ----- common ----- */
:root {
  --accent-color: #009de0;
  --accent-color-2: #8fc31f;
  --font-color-2: #161616;
}

@media screen and (768px <= width) {
  .__s {
    display: none;
  }
}

.btn {
  position: relative;
  display: block;
  width: min(80vw, 600px);
  height: min(16vw, 120px);
  background-color: var(--accent-color);
  border-radius: calc(1px / 0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(5.3vw, 4rem);
  font-weight: 600;
  color: #fff;
  opacity: 1;
  transition: opacity 0.2s;
}
.btn:after {
  content: '';
  position: absolute;
  top: 42%;
  right: 8%;
  display: block;
  width: min(6.6vw, 50px);
  height: auto;
  aspect-ratio: 4 / 1;
  border-right: 2px solid #fff;
  border-bottom: 1px solid #fff;
  transform: skewX(45deg);
  transition: translate 0.3s;
}
@media (hover: hover) {
  .btn:hover {
    opacity: 0.8;
  }
  .btn:hover::after {
    translate: 5px 0;
  }
}
@media screen and (768px <= width) {
  .btn {
    width: 350px;
    height: 70px;
    font-size: 2.4rem;
  }
  .btn:after {
    width: 35px;
  }
}

.sec {
  position: relative;
  padding: min(16vw, 120px) 5.3%;
}
.sec::before {
  content: '';
  position: absolute;
  top: max(-9.6vw, -72px);
  display: block;
  width: min(90%, 674px);
  height: auto;
  aspect-ratio: 674 / 197;
}
.sec._blue::before {
  left: 0;
  background: left/contain no-repeat url(../img/sec-deco_blue.webp);
}
.sec._green::before {
  right: 0;
  background: right/contain no-repeat url(../img/sec-deco_green.webp);
}
.sec-inner {
  margin-inline: auto;
  max-width: 1000px;
}
.sec-ttl {
  margin: 0 auto min(8vw, 60px);
}
.sec-ttl-en {
  margin-block-start: min(3.2vw, 24px);
  display: block;
  text-align: center;
  font-size: min(5.3vw, 4rem);
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}
@media screen and (768px <= width) {
  .sec {
    padding-inline: 40px;
  }
  .sec-ttl-en {
    font-size: 3rem;
  }
}

/* ----- floatBtn ----- */
.floatBtn {
  --matched-radius-padding: min(0.8vw, 6px);
  --matched-radius-inner-size: min(3.2vw, 24px);

  position: fixed;
  z-index: 10;
  bottom: max(-16vw, -120px);
  left: 0;
  right: 0;
  display: flex;
  transition: bottom 0.3s;
}
.floatBtn.is-scrolled {
  bottom: 0;
}
.floatBtn-item {
  width: 50%;
  padding: var(--matched-radius-padding) var(--matched-radius-padding) 0;
  border-radius: calc(var(--matched-radius-inner-size) + var(--matched-radius-padding))
    calc(var(--matched-radius-inner-size) + var(--matched-radius-padding)) 0 0;
  background-color: #fff;
  transition: width 0.2s;
}
.floatBtn-link {
  height: 100%;
  padding: min(2vw, 15px);
  border-radius: var(--matched-radius-inner-size) var(--matched-radius-inner-size) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.6rem, 4.2vw, 3.2rem);
  font-weight: 600;
  color: #fff;
}
._bleague .floatBtn-link {
  column-gap: min(4vw, 30px);
  background: rgb(108, 147, 23);
  background: linear-gradient(0deg, rgba(108, 147, 23, 1) 0%, rgba(143, 195, 31, 1) 100%);
  line-height: 1.25;
}
._bleague .floatBtn-icon {
  width: min(5.7vw, 43px);
  aspect-ratio: 43 / 83;
}
._fticket .floatBtn-link {
  column-gap: 0.2em;
  background: rgb(0, 124, 178);
  background: linear-gradient(0deg, rgba(0, 124, 178, 1) 0%, rgba(0, 157, 224, 1) 100%);
}
._fticket .floatBtn-icon {
  width: min(17.2vw, 129px);
  aspect-ratio: 129 / 53;
}
._fticket .floatBtn-text {
  padding-block-start: 0.5em;
}
@media screen and (768px <= width) {
  .floatBtn {
    --matched-radius-padding: 4px;
    --matched-radius-inner-size: 20px;

    bottom: 40px;
    left: auto;
    right: -300px;
    width: 330px;
    flex-direction: column;
    align-items: flex-end;
    row-gap: 20px;
    transition: right 0.3s;
  }
  .floatBtn.is-scrolled {
    bottom: 40px;
    right: 0;
  }
  .floatBtn-item {
    width: calc(100% - 30px);
    padding-right: 0;
    padding-bottom: var(--matched-radius-padding);
    border-radius: calc(var(--matched-radius-inner-size) + var(--matched-radius-padding)) 0 0
      calc(var(--matched-radius-inner-size) + var(--matched-radius-padding));
  }
  .floatBtn-link {
    padding-inline: 30px;
    border-radius: var(--matched-radius-inner-size) 0 0 var(--matched-radius-inner-size);
    font-size: 2.4rem;
  }
  @media (hover: hover) {
    .floatBtn-item:hover {
      width: 100%;
    }
  }
  ._bleague .floatBtn-link {
    column-gap: 20px;
    background: linear-gradient(270deg, rgba(108, 147, 23, 1) 0%, rgba(143, 195, 31, 1) 100%);
  }
  ._bleague .floatBtn-icon {
    width: calc(43px / 1.5);
  }
  ._fticket .floatBtn-link {
    background: linear-gradient(270deg, rgba(0, 124, 178, 1) 0%, rgba(0, 157, 224, 1) 100%);
  }
  ._fticket .floatBtn-icon {
    width: calc(129px / 1.5);
  }
}

/* ----- mv ----- */
.mv {
  aspect-ratio: 800 / 1422;
}
@media screen and (768px <= width) {
  .mv {
    aspect-ratio: 16 / 9;
  }
}

/* ----- lead ----- */
.lead {
  padding: min(8.5vw, 64px) 5.3% min(16vw, 120px);
  background: bottom/cover url(../img/lead-bg.webp);
}
@media screen and (768px <= width) {
  .lead {
    padding-inline: 40px;
  }
}

.lead-bnr {
  margin: 0 auto min(8vw, 60px);
  display: block;
  max-width: 800px;
}
.lead-bnr > img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}
@media (hover: hover) {
  .lead-bnr:hover {
    opacity: 0.7;
  }
}

.lead-btns {
  margin-bottom: min(8vw, 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(4vw, 30px);
}
.lead-btns .btn::after {
  width: min(5.3vw, 40px);
}
@media screen and (768px <= width) {
  .lead-btns {
    flex-direction: row;
    justify-content: center;
  }
  .lead-btns .btn {
    font-size: 2rem;
  }
  .lead-btns .btn::after {
    width: 25px;
  }
}

.lead-txt {
  margin-bottom: min(4vw, 30px);
  line-height: 1.75;
  text-align: center;
}
.lead-yt {
  margin: 0 auto min(8vw, 60px);
}
.lead-yt iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
@media screen and (768px <= width) {
  .lead-txt {
    font-size: 2.4rem;
  }
  .lead-yt iframe {
    aspect-ratio: 16 / 6;
  }
}

.lead-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: min(2.6vw, 20px);
}
.lead-nav-item {
  width: calc((100% - 2 * min(2.6vw, 20px)) / 3);
  background-color: var(--accent-color);
  border: min(0.4vw, 3px) solid #fff;
  border-radius: calc(1px / 0);
  pointer-events: all;
  cursor: pointer;
}
@media (hover: hover) {
  .lead-nav-item:hover > a::after {
    translate: 0 5px;
  }
}
.lead-nav-item > a {
  padding: min(2vw, 15px) min(2.6vw, 20px);
  font-weight: 600;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.2em;
}
.lead-nav-item > a::after {
  content: '';
  display: block;
  width: 0.4em;
  height: auto;
  aspect-ratio: 1 / 1;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  rotate: 45deg;
  transition: translate 0.3s;
}
@media screen and (1080px <= width) {
  .lead-nav {
    gap: 10px;
  }
  .lead-nav-item {
    width: calc((100% - 5 * 10px) / 6);
  }
  .lead-nav-item > a {
    padding-block: 10px;
  }
}

/* ----- schedule ----- */
#schedule {
  background: bottom/cover url(../img/ticket-bg.webp);
}
.schedule-ttl {
  width: min(62.9vw, 472px);
}
.schedule-ttl > img {
  aspect-ratio: 472 / 70;
}
.schedule-txt {
  margin-bottom: min(8vw, 60px);
  line-height: 1.75;
  text-align: center;
  font-size: 1.8rem;
}
.schedule-btn {
  margin: auto;
  background-color: var(--accent-color-2);
}
.schedule-img {
  margin: min(12vw, 90px) auto min(4vw, 30px);
  max-width: 600px;
}
.schedule-btn._bw::after {
  content: none;
}
@media screen and (768px <= width) {
  .schedule-txt {
    font-size: 2.6rem;
  }
  .schedule-btn::after {
    width: 25px;
  }
}

/* ----- present ----- */
#present {
  background: bottom/cover url(../img/present-bg.webp);
}
.present-inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
  padding: 0 min(4.6vw, 35px) min(6.7vw, 50px);
}
.present-inner::before {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 60%;
  background-color: rgb(255 255 255 / 0.2);
}
.present-ttl {
  width: min(46.6vw, 350px);
}
.present-ttl > img {
  aspect-ratio: 350 / 74;
}
.present-link {
  margin-bottom: min(5.3vw, 40px);
  display: block;
  transition: filter 0.1s;
}
.present-link > img {
  aspect-ratio: 1 / 1;
}
@media (hover: hover) {
  .present-link:hover {
    filter: contrast(0.7);
  }
}
.present-subTtl {
  margin: 0 auto min(4vw, 30px);
  width: fit-content;
  padding: min(2vw, 15px) min(5.3vw, 40px);
  background-color: #fff;
  line-height: 1.25;
  text-align: center;
  font-size: min(5.3vw, 4rem);
  font-weight: 600;
  color: var(--accent-color);
}
.present-txt {
  line-height: 1.75;
}
@media screen and (768px <= width) {
  .present-target {
    font-size: 2.4rem;
  }
  .present-subTtl {
    font-size: 3rem;
  }
}

/* ----- ticket ----- */
#ticket {
  background: bottom/cover url(../img/ticket-bg.webp);
}
.ticket-ttl {
  width: min(58vw, 435px);
}
.ticket-ttl > img {
  aspect-ratio: 435 / 76;
}
.ticket-bnr {
  margin: min(16vw, 120px) auto min(4vw, 30px);
  max-width: 800px;
  display: block;
  transition: opacity 0.2s;
}
.ticket-bnr > img {
  aspect-ratio: 800 / 560;
}
@media (hover: hover) {
  .ticket-bnr:hover {
    opacity: 0.7;
  }
}
.ticket-img {
  margin-bottom: min(4vw, 30px);
  aspect-ratio: 16 / 9;
}
.ticket-mapBtn {
  margin-inline: auto;
  width: min(89vw, 670px);
  padding: min(4vw, 30px) min(6.6vw, 50px);
  background-color: #fff;
  border: min(0.7vw, 5px) solid var(--accent-color-2);
  border-radius: calc(1px / 0);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-size: clamp(1.6rem, 4.2vw, 3.2rem);
  font-weight: 500;
  color: var(--accent-color-2);
  pointer-events: all;
  cursor: pointer;
  transition: scale 0.2s;
}
.ticket-mapBtn::before {
  content: '';
  display: block;
  width: min(6.2vw, 47px);
  height: auto;
  aspect-ratio: 1 / 1;
  background: center/contain no-repeat url(../img/ticket-icon_glass.webp);
}
@media (hover: hover) {
  .ticket-mapBtn:hover {
    scale: 0.95;
  }
}
.ticket-btn {
  margin: min(12vw, 90px) auto 0;
  width: min(89vw, 670px);
  background-color: var(--accent-color-2);
  font-size: min(4.8vw, 3.6rem);
}
.ticket-btn:after {
  right: 6%;
}
@media screen and (768px <= width) {
  .ticket-mapBtn {
    width: 420px;
    padding: 15px 20px;
    font-size: 2rem;
  }
  .ticket-mapBtn::before {
    width: 30px;
  }
  .ticket-btn {
    width: 420px;
    font-size: 2.2rem;
  }
}

/* ----- event ----- */
#event {
  background: center/cover url(../img/event-bg.webp);
}
.event-ttl {
  width: min(41vw, 308px);
}
.event-ttl > img {
  aspect-ratio: 308 / 76;
}

.eventSchedule {
  margin-inline: auto;
  max-width: 700px;
  padding: min(5.3vw, 40px) min(4.6vw, 35px);
  background-color: rgb(255 255 255 / 0.9);
}
.eventSchedule:has(+ .eventSchedule) {
  margin-bottom: min(8vw, 40px);
}
.eventSchedule-ttl {
  margin-bottom: min(6.6vw, 50px);
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 0.3em;
  font-size: min(5.3vw, 4rem);
  font-family: 'Aldrich', sans-serif;
  font-weight: 400;
  color: var(--font-color-2);
}
.eventSchedule-ttl-game {
  padding: 0.3em 0.2em 0;
  border: 1px solid var(--font-color-2);
}
.eventSchedule-ttl-date {
  padding-top: 0.3em;
  font-size: 1.2em;
}
.eventSchedule-ttl-date ._roboto {
  font-size: 0.8em;
  font-family: 'Roboto', sans-serif;
}
.eventSchedule-ttl-date ._fontS {
  font-size: 0.8em;
}
@media screen and (768px <= width) {
  .eventSchedule-ttl {
    margin-bottom: 30px;
    font-size: 3rem;
  }
}

.eventSchedule-item:has(+ .eventSchedule-item) {
  margin-bottom: min(5.3vw, 40px);
}
.eventSchedule-time {
  margin-bottom: min(1.3vw, 10px);
  display: flex;
  column-gap: min(2.6vw, 20px);
  color: var(--font-color-2);
}
.eventSchedule-time-start {
  position: relative;
  padding-top: 0.1em;
  padding-inline-end: min(13.3vw, 100px);
  font-size: min(5.3vw, 4rem);
  font-family: 'Aldrich', sans-serif;
}
.eventSchedule-time-start::before {
  content: '';
  position: absolute;
  top: 0.4em;
  right: 0;
  display: block;
  width: min(12vw, 90px);
  height: 1px;
  background-color: var(--font-color-2);
}
.eventSchedule-time-ttl {
  font-size: min(4.2vw, 3.2rem);
  font-weight: 600;
}
@media screen and (768px <= width) {
  .eventSchedule-time-start {
    font-size: 3rem;
  }
  .eventSchedule-time-start::before {
    top: 0.5em;
  }
  .eventSchedule-time-ttl {
    font-size: 2.8rem;
  }
}

.eventScheduleCard {
  border-radius: min(2.6vw, 20px);
  display: flex;
  overflow: hidden;
}
.eventScheduleCard:has(+ .eventScheduleCard) {
  margin-bottom: min(2.6vw, 20px);
}
.eventScheduleCard-img {
  width: 37%;
  aspect-ratio: 1 / 1;
}
.eventScheduleCard-content {
  width: 63%;
  padding: min(4vw, 30px) min(2.6vw, 20px);
  background-color: var(--font-color-2);
}
.eventScheduleCard-time {
  margin-bottom: 0.1em;
  font-size: min(5.3vw, 4rem);
  font-family: 'Aldrich', sans-serif;
  color: var(--accent-color);
}
.eventScheduleCard-txt {
  line-height: 1.5;
  font-weight: 600;
}
@media screen and (768px <= width) {
  .eventScheduleCard-time {
    font-size: 3rem;
  }
}

/* guest */
.event-subTtl {
  margin: min(8vw, 60px) auto min(5.3vw, 40px);
  width: fit-content;
  padding: 0 0.7em 0.3em;
  border-bottom: clamp(1px, 0.3vw, 2px) solid #fff;
  font-size: min(5.3vw, 4rem);
  font-weight: 600;
}
.event-guest {
  display: flex;
  justify-content: center;
  column-gap: min(2.6vw, 20px);
}
.eventGuestCard {
  width: calc((100% - min(2.6vw, 20px)) / 2);
}
.eventGuestCard-img {
  margin-bottom: min(2.6vw, 20px);
  border-radius: min(2.6vw, 20px);
}
.eventGuestCard-name {
  text-align: center;
  font-size: min(4.2vw, 3.2rem);
  font-weight: 600;
}
@media screen and (768px <= width) {
  .eventGuestCard {
    min-width: 300px;
    width: calc((100% - 2 * min(2.6vw, 20px)) / 3);
  }
  .eventGuestCard-name {
    font-size: 2.4rem;
  }
}

/* ----- gourmet ----- */
#gourmet {
  background: bottom/cover url(../img/gourmet-bg.webp);
}
.gourmet-inner {
  margin-inline: auto;
  max-width: 700px;
}
.gourmet-ttl {
  width: min(33vw, 247px);
}
.gourmet-ttl > img {
  aspect-ratio: 247 / 84;
}
.gourmet-content {
  position: relative;
  z-index: 1;
  padding: 0 min(4.6vw, 35px) min(6.7vw, 50px);
}
.gourmet-content::before {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 80%;
  background-color: rgb(255 255 255 / 0.2);
}
.gourmet-img {
  margin-bottom: min(4vw, 30px);
  aspect-ratio: 16 / 9;
  border-radius: min(2.6vw, 20px);
}
.gourmet-txt {
  line-height: 1.75;
}
.gourmet-note {
  padding-inline-start: 1em;
  line-height: 1.5;
  text-indent: -1em;
  font-weight: 300;
}
.gourmet-note::before {
  content: '※';
  color: #ff0000;
}
.gourmet-btn {
  margin: min(8vw, 60px) auto 0;
}
@media screen and (768px <= width) {
  .gourmet-content {
    position: relative;
    z-index: 1;
    padding: 0 min(4.6vw, 35px) min(6.7vw, 50px);
  }
  .gourmet-content::before {
    content: '';
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    width: 100%;
    height: 80%;
    background-color: rgb(255 255 255 / 0.2);
  }
  .gourmet-img {
    margin-bottom: min(4vw, 30px);
    aspect-ratio: 16 / 9;
    border-radius: min(2.6vw, 20px);
  }
  .gourmet-txt {
    line-height: 1.75;
  }
  .gourmet-btn {
    margin: min(8vw, 60px) auto 0;
  }
}

/* ----- player ----- */
#player {
  --matched-radius-padding: min(0.9vw, 7px);
  --matched-radius-inner-size: min(1.7vw, 13px);

  padding-inline: 0;
  background: bottom/cover url(../img/player-bg.webp);
}
.player-inner {
  overflow: hidden;
}
.player-ttl {
  width: min(46.2vw, 347px);
}
.player-ttl > img {
  aspect-ratio: 347 / 83;
}
.player-btn {
  margin: min(8vw, 60px) auto 0;
  background-color: var(--accent-color-2);
}
@media screen and (768px <= width) {
  .player-inner {
    max-width: none;
  }
}

/* slider */
.player-slider {
  max-width: 700px;
  padding-inline: min(10vw, 75px);
  overflow: visible;
}
.swiper-button {
  width: min(10.8vw, 81px);
  height: auto;
  aspect-ratio: 1 / 1;
  background-color: var(--accent-color-2);
  border: min(0.6vw, 5px) solid rgb(255 255 255 / 0.9);
  border-radius: 50%;
  opacity: 1;
}
.swiper-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: auto;
  aspect-ratio: 4 / 1;
  border-bottom: 1px solid #fff;
}
.swiper-button-prev::before {
  border-left: 2px solid #fff;
  transform: skewX(-45deg);
  translate: -33% -70%;
}
.swiper-button-next::before {
  border-right: 2px solid #fff;
  transform: skewX(45deg);
  translate: -67% -70%;
}
.swiper-button::after {
  content: none;
}

.playerCard {
  background-color: var(--accent-color-2);
  padding: var(--matched-radius-padding);
  border-radius: calc(var(--matched-radius-inner-size) + var(--matched-radius-padding));
  pointer-events: all;
  cursor: pointer;
}
.playerCard-inner {
  position: relative;
  border-radius: var(--matched-radius-inner-size);
  overflow: hidden;
}
.playerCard-img {
  aspect-ratio: 600 / 680;
  object-fit: cover;
  object-position: top center;
}
.playerCard-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 19%;
  background: rgb(173, 255, 0);
  background: linear-gradient(
    90deg,
    rgba(173, 255, 0, 0.8) 0%,
    rgba(125, 164, 42, 0.8) 25%,
    rgba(85, 116, 19, 0.8) 55%,
    rgba(50, 74, 0, 0.4) 82%,
    rgba(50, 74, 0, 0) 95%,
    rgba(50, 74, 0, 0) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.3;
  text-align: center;
  font-size: min(5.3vw, 4rem);
  font-weight: 600;
}
.playerCard-name-en {
  display: block;
  font-size: 0.6em;
}

.player-slider .swiper-slide .playerCard {
  transition: scale 0.4s;
}
.player-slider .swiper-slide:not(.swiper-slide-visible) .playerCard {
  scale: 0.9;
}

/* player modal */
.playerModal {
  position: fixed;
  z-index: 100;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  width: 100vw;
  height: 100%;
  padding-inline: min(5.3vw, 40px);
  background-color: rgb(0 0 0 / 0.8);
  align-items: center;
  justify-content: center;
}
body:has(.is-view) {
  overflow: hidden;
}
.playerModal.is-view {
  display: flex;
}
.playerModal-inner {
  position: relative;
  width: 100%;
  max-width: 700px;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.playerModal-inner::-webkit-scrollbar {
  display: none;
}
.playerModal-content {
  position: relative;
  margin-block: min(10.6vw, 80px);
  padding: var(--matched-radius-padding);
  background-color: var(--accent-color-2);
  border-radius: calc(var(--matched-radius-inner-size) + var(--matched-radius-padding));
}
.playerModal-close {
  position: absolute;
  top: max(-10.6vw, -80px);
  right: 0;
  width: min(10.6vw, 80px);
  height: auto;
  aspect-ratio: 1 / 1;
  pointer-events: all;
  cursor: pointer;
}
.playerModal-close:after,
.playerModal-close:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 60%;
  height: min(0.5vw, 4px);
  background-color: #fff;
}
.playerModal-close:before {
  rotate: 45deg;
}
.playerModal-close:after {
  rotate: -45deg;
}
.playerModal-content-head {
  position: relative;
  border-radius: var(--matched-radius-inner-size);
  overflow: hidden;
}
.playerModal-number {
  position: absolute;
  top: 3%;
  left: 0;
  width: min(25.3vw, 190px);
}
.playerModal-number > img {
  aspect-ratio: 190 / 84;
}
.playerModal-img {
  aspect-ratio: 600 / 680;
  object-fit: cover;
  object-position: top center;
}
.playerModal-name {
  height: 24%;
}
.playerModal-name-pos {
  margin-block-start: 0.6em;
  font-weight: 400;
}
.playerModal-content-body {
  padding: min(2vw, 15px) min(4vw, 30px);
}
.playerModal-txt {
  line-height: 1.75;
}
.playerModal-btn {
  margin: min(4vw, 30px) auto 0;
  width: min(60vw, 450px);
  height: min(12vw, 90px);
  background-color: #fff;
  font-size: min(4vw, 3rem);
  color: var(--accent-color-2);
}
.playerModal-btn::after {
  border-color: var(--accent-color-2);
}
@media screen and (768px <= width) {
  /* .playerModal-inner {
    max-width: 500px;
  } */
  .playerModal-content {
    margin-block: 60px;
  }
  .playerModal-close {
    top: -60px;
    width: 60px;
  }
  .playerModal-number {
    width: 130px;
  }
  .playerModal-img {
    aspect-ratio: 16 / 9;
  }
  .playerModal-name {
    font-size: 2.8rem;
  }
  .playerModal-txt {
    font-size: 1.6rem;
  }
  .playerModal-btn {
    width: 210px;
    height: 40px;
    font-size: 1.4rem;
  }
  .playerModal-btn::after {
    width: 20px;
  }
}

/* ----- access ----- */
#access {
  background: bottom/cover url(../img/access-bg.webp);
}
.access-inner {
  max-width: 700px;
}
.access-ttl {
  width: min(40.6vw, 305px);
}
.access-ttl > img {
  aspect-ratio: 305 / 72;
}
.access-content:has(+ .access-content) {
  margin-bottom: min(8vw, 60px);
}
.access-subTtl {
  margin: 0 auto min(5.3vw, 40px);
  width: fit-content;
  padding-bottom: 0.3em;
  border-bottom: 1px solid #fff;
  text-align: center;
  font-size: min(5.3vw, 4rem);
  font-weight: 500;
}
.access-subTtl::before {
  content: '';
  margin-inline-end: 0.3em;
  display: inline-block;
  height: auto;
  background: center/contain no-repeat;
}
.access-subTtl._bus::before {
  width: min(8.9vw, 67px);
  aspect-ratio: 67 / 34;
  background-image: url(../img/access-icon_bus.webp);
}
.access-subTtl._car::before {
  width: min(7.2vw, 54px);
  aspect-ratio: 54 / 27;
  background-image: url(../img/access-icon_car.webp);
}
.access-thirdTtl {
  margin: min(5.3vw, 40px) auto;
  text-align: center;
  font-size: min(4.2vw, 3.2rem);
  font-weight: 500;
}
.access-content-img._bus {
  aspect-ratio: 671 / 547;
}
.access-content-img._car {
  aspect-ratio: 16 / 9;
}
.access-content-txt {
  margin-block: min(2.6vw, 20px) min(4vw, 30px);
  line-height: 1.5;
}
.access-btn {
  margin-inline: auto;
}

/* accordion */
.accessAccordion {
  padding: min(5.3vw, 40px) min(4.6vw, 35px);
  background-color: #fff;
  border-radius: min(2.6vw, 20px);
  color: var(--font-color-2);
}
.accessAccordion:has(+ .accessAccordion) {
  margin-bottom: min(4vw, 30px);
}
.accessAccordion-ttl {
  position: relative;
  padding-inline-end: min(6.7vw, 50px);
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: min(2.6vw, 20px);
  font-size: min(4.2vw, 3.2rem);
  font-weight: 600;
  pointer-events: all;
  cursor: pointer;
}
.accessAccordion-ttl::before,
.accessAccordion-ttl::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1%;
  translate: 0 -50%;
  display: block;
  width: min(4vw, 30px);
  height: auto;
  aspect-ratio: 30 / 6;
  background-color: var(--font-color-2);
}
.accessAccordion-ttl::after {
  rotate: 90deg;
  transition: rotate 0.3s;
}
.accessAccordion-ttl-icon_train {
  width: min(6.1vw, 47px);
  aspect-ratio: 47 / 43;
}
.accessAccordion-ttl-icon_plane {
  width: min(6.2vw, 46px);
  aspect-ratio: 46 / 45;
}
.accessAccordion-content {
  display: none;
  padding-top: min(4vw, 30px);
}
.accessAccordion-content-img {
  margin-bottom: min(4vw, 30px);
}
.accessAccordion-content-detail {
  display: flex;
  align-items: flex-start;
  column-gap: min(2.6vw, 20px);
  line-height: 1.25;
  font-size: min(4.2vw, 3.2rem);
}
.accessAccordion-content-detail:has(+ .accessAccordion-content-detail) {
  margin-bottom: min(2vw, 15px);
}
.accessAccordion-content-detail:has(+ .accessAccordion-content-card) {
  margin-bottom: min(4vw, 30px);
}
.accessAccordion-content-detail dt {
  width: 27%;
  padding-block: 0.2em;
  border: 1px solid var(--font-color-2);
  text-align: center;
  font-weight: 500;
}
.accessAccordion-content-detail dd {
  width: calc(100% - 27% - min(2.6vw, 20px));
  padding-block-start: 0.3em;
}
.accessAccordion-content-card {
  border: 2px solid var(--accent-color);
  border-radius: min(2.6vw, 20px);
  overflow: hidden;
}
.accessAccordion-content-card:has(+ .accessAccordion-content-card) {
  margin-bottom: min(2.6vw, 20px);
}
.accessAccordion-content-card-ttl {
  padding: 0.4em;
  background-color: var(--accent-color);
  text-align: center;
  font-size: min(4.2vw, 3.2rem);
  font-weight: 400;
  color: #fff;
}
.accessAccordion-content-card-txt {
  padding: min(1.3vw, 10px) min(4vw, 30px);
  line-height: 1.35;
  color: var(--accent-color);
}

.is-open .accessAccordion-ttl::after {
  rotate: 180deg;
}
@media screen and (768px <= width) {
  .accessAccordion {
    padding-block: 20px;
  }
  .accessAccordion-ttl {
    font-size: 2.4rem;
  }
  .accessAccordion-content-detail {
    align-items: stretch;
    font-size: 1.8rem;
  }
  .accessAccordion-content-detail dt {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .accessAccordion-content-detail dd {
    align-self: center;
    padding-block-start: 0;
  }
  .accessAccordion-content-card:has(+ .accessAccordion-content-card) {
    margin-bottom: min(2.6vw, 20px);
  }
  .accessAccordion-content-card-ttl {
    font-size: 2rem;
  }
  .accessAccordion-content-card-txt {
    text-align: center;
  }
}

/* ----- environment ----- */
#environment {
  background: top/cover url(../img/environment-bg.webp);
}
.environment-inner {
  max-width: 700px;
}
.environment-ttl {
  width: min(68.6vw, 515px);
}
.environment-ttl {
  aspect-ratio: 515 / 128;
}
.environment-txt {
  margin-bottom: min(5.3vw, 40px);
  line-height: 1.75;
}

.environmentPoint:has(+ .environmentPoint) {
  margin-bottom: min(2.6vw, 20px);
}
.environmentPoint-img {
  margin-bottom: min(1.3vw, 10px);
  width: auto;
  height: min(8.3vw, 62px);
}
.environmentPoint-img._01 {
  aspect-ratio: 621 / 62;
}
.environmentPoint-img._02 {
  aspect-ratio: 546 / 62;
}
.environmentPoint-img._03 {
  aspect-ratio: 470 / 62;
}
.environmentPoint-txt {
  position: relative;
  z-index: 1;
  padding-block: 0.8em;
  line-height: 1.3;
  font-size: min(4.2vw, 3.2rem);
  font-weight: 500;
}
.environmentPoint-txt::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: max(-5.3vw, -40px);
  display: block;
  width: 100vw;
  height: 100%;
  background: rgb(0, 179, 255);
  background: linear-gradient(
    90deg,
    rgba(0, 179, 255, 0.5) 0%,
    rgba(3, 122, 173, 0.5) 25%,
    rgba(3, 122, 173, 0.5) 55%,
    rgba(0, 43, 62, 0.3) 80%,
    rgba(0, 43, 62, 0) 95%,
    rgba(0, 43, 62, 0) 100%
  );
}
.environmentPoint-txt._green::before {
  background: rgb(173, 255, 0);
  background: linear-gradient(
    90deg,
    rgba(173, 255, 0, 0.5) 0%,
    rgba(125, 164, 42, 0.5) 25%,
    rgba(125, 164, 42, 0.5) 55%,
    rgba(50, 74, 0, 0.2) 80%,
    rgba(50, 74, 0, 0) 95%,
    rgba(50, 74, 0, 0) 100%
  );
}
@media screen and (768px <= width) {
  .environment-txt {
    text-align: center;
    font-size: 2.4rem;
  }

  .environmentPoint-txt {
    line-height: 1.5;
    font-size: 2rem;
  }
  .environmentPoint-txt::before {
    max-width: calc(700px + 40px * 2);
  }
}

/* ----- promotion ----- */
#promotion {
  padding-block: min(20vw, 150px);
  background: bottom/cover url(../img/sns-bg.webp);
}
.promotion-list {
  display: flex;
  flex-direction: column;
  gap: min(4vw, 30px);
}
@media (hover: hover) {
  .promotionBnr-link:hover {
    opacity: 0.7;
  }
}
.promotionBnr-img {
  aspect-ratio: 16 / 9;
}
@media screen and (768px <= width) {
  .promotion-list {
    flex-direction: row;
  }
}

/* ----- sns ----- */
#sns {
  background: bottom/cover url(../img/sns-bg.webp);
}
.sns-ttl {
  width: min(42vw, 315px);
}
.sns-ttl > img {
  aspect-ratio: 315 / 76;
}
.sns-lead {
  margin-bottom: min(4.6vw, 35px);
  line-height: 1.35;
  text-align: center;
}
.sns-list {
  display: flex;
  justify-content: center;
  column-gap: min(6%, 40px);
}
.sns-item {
  width: min(13.3vw, 100px);
}
@media (hover: hover) {
  .sns-item:hover {
    filter: brightness(0.7);
  }
}

/* ----- useful ----- */
.useful {
  background: rgb(0, 157, 224);
  background: linear-gradient(0deg, rgba(0, 157, 224, 1) 0%, rgba(0, 126, 199, 1) 100%);
}
.useful-ttl {
  width: min(63vw, 473px);
}
.useful-ttl > img {
  aspect-ratio: 473 / 76;
}
.useful-list {
  display: flex;
  flex-wrap: wrap;
  gap: min(2.6vw, 20px);
}
.useful-item {
  width: calc((100% - min(2.6vw, 20px)) / 2);
  height: auto;
  aspect-ratio: 325 / 100;
  background-color: #fff;
  box-shadow: 5px 5px 5px 5px rgb(0 0 0 / 0.08);
  pointer-events: all;
  cursor: pointer;
}
.useful-item::after {
  width: min(5.3vw, 1.4em);
  border-color: var(--accent-color);
}
.useful-item a {
  width: 100%;
  padding-inline: 12% 26%;
  line-height: 1.25;
  font-size: clamp(1.4rem, 3.7vw, 2.8rem);
  color: var(--accent-color);
}
@media screen and (768px <= width) {
  .useful-list {
    justify-content: center;
  }
  .useful-item {
    width: calc((100% - 20px * 3) / 4);
    min-width: 220px;
  }
  .useful-item a {
    font-size: 1.8rem;
  }
}