/*
* 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.-bronze {
  background: #b48b58;
  color: #fff;
}

.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 #1892d5;
  background: #1892d5;
}

.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;
}

.module-select {
  position: relative;
  width: 100%;
}

.module-select > .select {
  padding: 2.66667vw;
  border: 1px #d8d8d8 solid;
  outline: 0;
  width: 100%;
  height: 12.26667vw;
  background: #fff;
  letter-spacing: 0 !important;
  color: #000;
  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: #000;
  pointer-events: none;

  -webkit-mask: url("/frontale/assets_ex/img/signin/icon_arw.svg") no-repeat center/cover;

          mask: url("/frontale/assets_ex/img/signin/icon_arw.svg") no-repeat center/cover;
}

@media (min-width: 768px) {
  .close-container {
    padding: clamp(69.33333px, 9.02778vw, 130px) 0 clamp(83.73333px, 10.90278vw, 157px);
  }
}

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

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;
  transition: opacity 0.3s;
  background-color: #fff;
}

@media (max-width: 767.98px) {
  .main-container {
    background: no-repeat right top -21.33333vw / 63.17733vw 60.86667vw url("/frontale/assets_ex/img/close/close_bg_sm.webp"), #fff;
  }
}

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

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

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

@media (min-width: 768px) {
  .main-container > .close-container .close-box {
    padding: clamp(43.73333px, 5.69444vw, 82px) clamp(40px, 5.20833vw, 75px) clamp(53.33333px, 6.94444vw, 100px) clamp(42.66667px, 5.55556vw, 80px);
    border: 1px solid #a5a5a5;
    background: no-repeat right top / clamp(378.66667px, 49.30556vw, 710px) clamp(170.66667px, 22.22222vw, 320px) url("/frontale/assets_ex/img/close/close_bg_lg.webp");
  }
}

.main-container > .close-container .close-box::before,
.main-container > .close-container .close-box::after {
  content: "";
  position: absolute;
  width: 8.11733vw;
  height: 8.11733vw;
  background: no-repeat 0 0/100% url("/frontale/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(20.15467px, 2.62431vw, 37.79px);
    height: clamp(20.15467px, 2.62431vw, 37.79px);
    background-image: url("/frontale/assets_ex/img/close/close_bracket_lg.webp");
  }
}

.main-container > .close-container .close-box::before {
  top: 6.8vw;
  right: 6.4vw;
}

@media (min-width: 768px) {
  .main-container > .close-container .close-box::before {
    top: clamp(10.66667px, 1.38889vw, 20px);
    right: clamp(8px, 1.04167vw, 15px);
  }
}

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

@media (min-width: 768px) {
  .main-container > .close-container .close-box::after {
    bottom: clamp(10.66667px, 1.38889vw, 20px);
    left: clamp(8px, 1.04167vw, 15px);
  }
}

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

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

@media (min-width: 768px) {
  .main-container > .close-container .close-box > .txt {
    margin-top: clamp(3.2px, 0.41667vw, 6px);
    letter-spacing: 0.1em;
    font-size: clamp(7.46667px, 0.97222vw, 14px);
    line-height: 1.71429;
  }
}

.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: 1.06667vw 1.86667vw;
  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(2.13333px, 0.27778vw, 4px) clamp(3.2px, 0.41667vw, 6px);
    font-size: clamp(7.46667px, 0.97222vw, 14px);
  }
}

.main-container > .close-container .h-box > .h {
  text-align: center;
  letter-spacing: 0.05em;
  color: #000;
  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;
  }
}