/*
* close.css
*
*/
/* --------------------------------
  close
-------------------------------- */
/* --------------------------------
  keyframes
-------------------------------- */
@use "@/styles/_partials/global" as *;
.module-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 12.26667vw;
  background: #fff;
  text-decoration: none;
  color: #000;
}

:lang(ja) .module-btn {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 4vw;
  font-weight: 900;
  font-style: normal;
}

:lang(en) .module-btn {
  font-family: futura-pt-condensed, sans-serif;
  font-size: 4.53333vw;
  font-weight: 800;
  font-style: normal;
}

.module-btn.-ja {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 4vw;
  font-weight: 900;
  font-style: normal;
}

.module-btn.-en {
  font-family: futura-pt-condensed, sans-serif;
  font-size: 4.53333vw;
  font-weight: 800;
  font-style: normal;
}

.module-btn.-red {
  background: #ff1d49;
  color: #fff;
}

.module-btn.-disable {
  background: #686868;
  pointer-events: none;
  color: #fff;
}

.module-btn.-line {
  background: #00c400;
  color: #fff;
}

.module-btn.-line::after {
  content: "";
  position: absolute;
  left: 5.4vw;
  width: 8vw;
  height: 7.62267vw;
  background: url("../img/common/icon_line.svg") no-repeat center/cover;
}

.module-btn.-toggle-black {
  border: 1px solid #fff;
  height: 7.2vw;
  background: #000;
  color: #fff;
  font-family: futura-pt-condensed, sans-serif;
  font-size: 4vw;
  font-weight: 800;
  font-style: normal;
}

.module-btn.-toggle-white {
  border: 1px solid #fff;
  height: 7.2vw;
  background: #fff;
  color: #000;
  font-family: futura-pt-condensed, sans-serif;
  font-size: 4vw;
  font-weight: 800;
  font-style: normal;
}

.module-btn.-next {
  width: 8vw;
  height: 8vw;
  background: #fff;
  font-size: 0;
}

.module-btn.-next::after {
  content: "";
  position: absolute;
  width: 2.036vw;
  height: 2.85467vw;
  background: url("/assets/img/common/icon_page_arw.svg") no-repeat center/cover;
}

.module-btn.-next.-disable {
  opacity: 0.3;
  pointer-events: none;
}

.module-btn.-prev {
  width: 8vw;
  height: 8vw;
  background: #fff;
  font-size: 0;
}

.module-btn.-prev::after {
  content: "";
  position: absolute;
  width: 2.036vw;
  height: 2.85467vw;
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
  background: url("/assets/img/common/icon_page_arw.svg") no-repeat center/cover;
}

.module-btn.-prev.-disable {
  opacity: 0.3;
  pointer-events: none;
}

.module-btn.-number {
  width: 8vw;
  height: 8vw;
  background: none;
  color: #fff;
  font-family: futura-pt-condensed, sans-serif;
  font-size: 4vw;
  font-weight: 800;
  font-style: normal;
}

.module-btn.-number.-active {
  background: #000;
  color: #fff;
}

.module-btn.-columns2 {
  width: 7.2vw;
  height: 7.2vw;
  background: none;
  font-size: 0;
}

.module-btn.-columns2::after {
  content: "";
  position: absolute;
  width: 4vw;
  height: 4vw;
  background: url("/assets/img/common/icon_columns2.svg") no-repeat center/cover;
}

.module-btn.-columns3 {
  width: 7.2vw;
  height: 7.2vw;
  background: none;
  font-size: 0;
}

.module-btn.-columns3::after {
  content: "";
  position: absolute;
  width: 4vw;
  height: 4vw;
  background: url("../assets_ex/img/common/icon_columns3.svg") no-repeat center/cover;
}

@use "@/styles/_partials/global" as *;
.module-check {
  position: relative;
}

:lang(ja) .module-check {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.73333vw;
  font-weight: 900;
  font-style: normal;
}

:lang(en) .module-check {
  font-family: futura-pt-condensed, sans-serif;
  font-size: 3.73333vw;
  font-weight: 800;
  font-style: normal;
}

.module-check.-en {
  font-family: futura-pt-condensed, sans-serif;
  font-size: 3.73333vw;
  font-weight: 800;
  font-style: normal;
}

.module-check > .label {
  display: flex;
  align-items: center;
}

.module-check > .label > .input {
  display: none;
}

.module-check > .label > .input:checked + .icon {
  border: 2px solid #ff1d49;
  background: #ff1d49;
}

.module-check > .label > .input:checked + .icon > .svg {
  stroke-dashoffset: 0;
}

.module-check > .label > .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 2px solid #000;
  width: 6.66667vw;
  height: 6.66667vw;
  transition: background-color 0.1s;
  background: #fff;
}

.module-check > .label > .icon > .svg {
  position: absolute;
  width: 3.92133vw;
  height: 3.53467vw;
  transition: stroke-dashoffset 0.14s cubic-bezier(0.755, 0.05, 0.855, 0.06);
  pointer-events: none;

  fill: none;
  stroke: #fff;
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  stroke-width: 8;
}

.module-check.-large > .label > .icon {
  border: 2px solid #000;
  width: 9.06667vw;
  height: 9.06667vw;
  background: #fff;
}

.module-check.-large > .label > .icon > .svg {
  position: absolute;
  width: 5.764vw;
  height: 5.08533vw;
}

.module-check.-circle > .label > .icon {
  border: 2px solid #fff;
  border-radius: 50%;
  width: 5.33333vw;
  height: 5.33333vw;
  background: #fff;
}

.module-check.-circle > .label > .icon > .svg {
  width: 2.132vw;
  height: 1.69867vw;

  stroke-width: 4;
}

.module-check.-circle > .label > .input:checked + .icon {
  border: 2px solid #fff;
}

@use "@/styles/_partials/global" as *;
.module-select {
  position: relative;
  width: 100%;
}

.module-select > .select {
  padding: 2.66667vw;
  border: 1px #fff solid;
  outline: 0;
  width: 100%;
  height: 12.26667vw;
  background: #191a1c;
  letter-spacing: 0 !important;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.46667vw;
  font-weight: 900;
  font-style: normal;
}

.module-select > .select:focus {
  border: 2px #ff1d49 solid;
}

.module-select::after {
  content: "";
  position: absolute;
  top: 0;
  right: 2.66667vw;
  bottom: 0;
  margin: auto;
  width: 2.54973vw;
  height: 1.9268vw;
  background: url("../img/common/icon_arw.svg") no-repeat center/cover;
  pointer-events: none;
}

@media (min-width: 768px) {
  .close-container {
    padding: clamp(32px, 4.16667vw, 60px) 0;
  }
}

.close-container > .close-box {
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .close-container > .close-box {
    margin: 0 auto;
    width: clamp(400px, 52.08333vw, 750px);
  }
}

body {
  display: -ms-grid;
  display: grid;
  height: auto;
  min-height: 100%;

  -ms-grid-rows: auto 1fr auto;

  -ms-grid-columns: auto;

      grid-template: auto 1fr auto / auto;
}

.main-container {
  display: flex;
  overflow: hidden;
  opacity: 0;
  flex-direction: column;
  position: relative;
  border-bottom: 1px solid #292929;
  transition: opacity 0.3s;
  background: no-repeat top/cover url("/jleague/assets_ex/img/close/close_bg_sm.webp");
  background-color: #191a1c;
}

@media (min-width: 768px) {
  .main-container {
    background-image: url("/jleague/assets_ex/img/close/close_bg_lg.webp");
  }
}

.main-container::before,
.main-container::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.main-container::before {
  opacity: 0.15;
  background: linear-gradient(to right, #0ff, #f0f);
}

.main-container::after {
  opacity: 0.7;
  background: linear-gradient(#888, #717171 22.2%, #6b6b6b 25.15%, #4e4e4e 39.9%, #191a1c);

  mix-blend-mode: multiply;
}

.main-container.-active {
  opacity: 1;
}

.main-container > .close-container {
  margin: auto;
  width: 100%;
}

.main-container > .close-container .close-box {
  position: relative;
  padding: 21vw 0 18.66667vw;
}

@media (min-width: 768px) {
  .main-container > .close-container .close-box {
    padding: clamp(44.8px, 5.83333vw, 84px) clamp(53.33333px, 6.94444vw, 100px) clamp(51.2px, 6.66667vw, 96px);
    background: rgba(0, 0, 0, 0.4);
  }
}

.main-container > .close-container .close-box::before,
.main-container > .close-container .close-box::after {
  content: "";
  position: absolute;
  width: 15.2vw;
  height: 15.2vw;
  background: no-repeat 0 0/100% url("/jleague/assets_ex/img/close/close_bracket_sm.webp");
}

@media (min-width: 768px) {
  .main-container > .close-container .close-box::before,
  .main-container > .close-container .close-box::after {
    width: clamp(46.93333px, 6.11111vw, 88px);
    height: clamp(46.93333px, 6.11111vw, 88px);
    background-image: url("/jleague/assets_ex/img/close/close_bracket_lg.webp");
  }
}

.main-container > .close-container .close-box::before {
  top: 3.2vw;
  right: 2.93333vw;
}

@media (min-width: 768px) {
  .main-container > .close-container .close-box::before {
    top: clamp(-5px, -0.34722vw, -2.66667px);
    right: clamp(-3px, -0.20833vw, -1.6px);
  }
}

.main-container > .close-container .close-box::after {
  bottom: 3.2vw;
  left: 2.93333vw;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

@media (min-width: 768px) {
  .main-container > .close-container .close-box::after {
    bottom: clamp(-5px, -0.34722vw, -2.66667px);
    left: clamp(-3px, -0.20833vw, -1.6px);
  }
}

.main-container > .close-container .close-box > .close-contents + .close-contents {
  margin-top: 11.73333vw;
}

@media (min-width: 768px) {
  .main-container > .close-container .close-box > .close-contents + .close-contents {
    margin-top: clamp(32px, 4.16667vw, 60px);
  }
}

.main-container > .close-container .close-contents > .txt {
  margin-top: 5.86667vw;
  letter-spacing: 0.1em;
  font-size: 4vw;
  font-weight: 500;
  line-height: 2;
}

@media (max-width: 767.98px) {
  .main-container > .close-container .close-contents > .txt {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .main-container > .close-container .close-contents > .txt {
    margin-top: clamp(2.66667px, 0.34722vw, 5px);
    font-size: clamp(7.46667px, 0.97222vw, 14px);
    line-height: 1.71429;
  }
}

.main-container > .close-container .close-contents > .txt.-en {
  margin-top: 3.73333vw;
}

@media (min-width: 768px) {
  .main-container > .close-container .close-contents > .txt.-en {
    margin-top: clamp(12.26667px, 1.59722vw, 23px);
    font-size: clamp(6.93333px, 0.90278vw, 13px);
    line-height: 1.69231;
  }
}

.main-container > .close-container .h-box {
  display: flex;
  align-items: center;
}

@media (max-width: 767.98px) {
  .main-container > .close-container .h-box {
    flex-direction: column;
  }
}

.main-container > .close-container .h-box > .eyebrow {
  padding: 0.8vw 1.86667vw 1.33333vw;
  background-color: #e6002d;
  letter-spacing: 0;
  font-size: 3.73333vw;
  font-weight: 700;
  line-height: 1;
}

@media (min-width: 768px) {
  .main-container > .close-container .h-box > .eyebrow {
    padding: clamp(1.6px, 0.20833vw, 3px) clamp(3.2px, 0.41667vw, 6px) clamp(2.13333px, 0.27778vw, 4px);
    font-size: clamp(7.46667px, 0.97222vw, 14px);
  }
}

.main-container > .close-container .h-box > .h {
  text-align: center;
  letter-spacing: 0.05em;
  font-size: 6.4vw;
  font-weight: 900;
  line-height: 0.95833;
}

@media (max-width: 767.98px) {
  .main-container > .close-container .h-box > .h {
    margin-top: 4.26667vw;
  }
}

@media (min-width: 768px) {
  .main-container > .close-container .h-box > .h {
    margin-left: clamp(7.46667px, 0.97222vw, 14px);
    letter-spacing: 0.075em;
    font-size: clamp(10.66667px, 1.38889vw, 20px);
    line-height: 2.98;
  }
}

.main-container > .close-container .h-box.-en > .eyebrow {
  padding: 0.26667vw 2.13333vw 0.53333vw;
  letter-spacing: 0;
  text-transform: uppercase;
  font-family: "futura-pt-condensed", sans-serif;
  font-size: 4.8vw;
  font-weight: 700;
  line-height: 1;
}

@media (min-width: 768px) {
  .main-container > .close-container .h-box.-en > .eyebrow {
    padding: clamp(1.06667px, 0.13889vw, 2px) clamp(4.26667px, 0.55556vw, 8px);
    font-size: clamp(9.6px, 1.25vw, 18px);
  }
}

.main-container > .close-container .h-box.-en > .h {
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: "futura-pt-condensed", sans-serif;
  font-size: 9.06667vw;
  font-weight: 700;
  line-height: 0.88235;
}

@media (min-width: 768px) {
  .main-container > .close-container .h-box.-en > .h {
    padding: 0;
    letter-spacing: 0.01em;
    font-size: clamp(14.4px, 1.875vw, 27px);
  }
}