/*
* close.css
*
*/
/* ------------------------
  variables
------------------------ */
:root {
  --color-accent: #e6002d;
  --color-primary: #0b318f;
  --color-text: #0f1350;
  --color-white: #fff;
  --font-noto: "Noto Sans JP", sans-serif;
  --font-teko: "Teko", sans-serif;
}

/* --------------------------------
  close
-------------------------------- */
/* --------------------------------
  keyframes
-------------------------------- */
@use "@/styles/_partials/global" as *;
.module-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 1.6vw;
  width: 100%;
  height: 12.26667vw;
  background: #fff;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #000;
  font-family: var(--font-noto);
  font-size: 4vw;
  font-weight: 900;
}

.module-btn.-ja {
  letter-spacing: 0.1em;
  font-size: 4vw;
  font-weight: 900;
}

.module-btn.-en {
  letter-spacing: 0.025em;
  font-family: var(--font-teko);
  font-size: 6.13333vw;
  font-weight: 700;
  line-height: 1.08696;
}

.module-btn.-red {
  background: var(--color-accent);
  color: var(--color-white);
}

.module-btn.-disable {
  background: #686868;
  pointer-events: none;
  color: var(--color-white);
}

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

@use "@/styles/_partials/global" as *;
.module-check {
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.73333vw;
  font-weight: 900;
  font-style: normal;
}

.module-check.-en {
  font-family: "Teko", sans-serif, 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 #ccc;
  border-radius: 1.6vw;
  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: 1px solid #ccc;
  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;
}

.close-container {
  position: relative;
  padding: 17.33333vw 0 18.66667vw;
}

@media (min-width: 768px) {
  .close-container {
    padding: clamp(74.66667px, 9.72222vw, 140px) 0;
  }
}

.close-container::before {
  content: "";
  position: absolute;
  top: 4.53333vw;
  left: calc(50% - 121.2vw / 2);
  width: 121.2vw;
  height: 121.2vw;
  background: no-repeat 0 0/100% url("/swallows/assets_ex/img/close/close_diamond_sm.webp");
}

@media (min-width: 768px) {
  .close-container::before {
    top: clamp(10.66667px, 1.38889vw, 20px);
    right: 0;
    left: 0;
    margin: auto;
    width: clamp(346.13333px, 45.06944vw, 649px);
    height: clamp(346.13333px, 45.06944vw, 649px);
    background-image: url("/swallows/assets_ex/img/close/close_diamond_lg.webp");
  }
}

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

.close-container > .txt {
  z-index: 1;
  margin-top: 9.33333vw;
  text-align: center;
  letter-spacing: 0;
  color: var(--color-primary);
  font-size: 4.26667vw;
  font-weight: 600;
  line-height: 1.875;
}

@media (min-width: 768px) {
  .close-container > .txt {
    margin-top: clamp(19.73333px, 2.56944vw, 37px);
    color: var(--color-primary);
    font-size: clamp(10.66667px, 1.38889vw, 20px);
    line-height: 2.1;
  }
}

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

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

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

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

.main-container > .close-container .h-box > .eyebrow {
  padding: 0.93333vw 1.86667vw 1.2vw;
  background-color: var(--color-accent);
  letter-spacing: 0;
  color: var(--color-white);
  font-size: 3.73333vw;
  font-weight: 700;
  line-height: 1;
}

@media (min-width: 768px) {
  .main-container > .close-container .h-box > .eyebrow {
    padding: clamp(2.66667px, 0.34722vw, 5px) clamp(5.33333px, 0.69444vw, 10px) clamp(3.73333px, 0.48611vw, 7px);
    font-size: clamp(12.8px, 1.66667vw, 24px);
  }
}

.main-container > .close-container .h-box > .h {
  margin-top: 2.93333vw;
  letter-spacing: 0;
  color: var(--color-primary);
  font-size: 6.66667vw;
  font-weight: 700;
  line-height: 1.08;
}

@media (min-width: 768px) {
  .main-container > .close-container .h-box > .h {
    margin-top: clamp(9.6px, 1.25vw, 18px);
    font-size: clamp(21.33333px, 2.77778vw, 40px);
    line-height: 1.35;
  }
}

@media (min-width: 768px) {
  .main-container > .close-container {
    height: clamp(367.46667px, 47.84722vw, 689px);
  }
}