@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap");
@font-face {
  font-family: "ClashDisplay-Medium";
  src: url("/fonts/renewal_design/ClashDisplay-Medium.woff2") format("woff2"), url("/fonts/renewal_design/ClashDisplay-Medium.woff") format("woff"), url("/fonts/renewal_design/ClashDisplay-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "ClashDisplay-Semibold";
  src: url("/fonts/renewal_design/ClashDisplay-Semibold.woff2") format("woff2"), url("/fonts/renewal_design/ClashDisplay-Semibold.woff") format("woff"), url("/fonts/renewal_design/ClashDisplay-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "ClashDisplay-Bold";
  src: url("/fonts/renewal_design/ClashDisplay-Bold.woff2") format("woff2"), url("/fonts/renewal_design/ClashDisplay-Bold.woff") format("woff"), url("/fonts/renewal_design/ClashDisplay-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "NotoSansJP-Thin";
  src: url("/fonts/renewal_design/NotoSansJP-Thin.woff2") format("woff2"), url("/fonts/renewal_design/NotoSansJP-Thin.woff") format("woff"), url("/fonts/renewal_design/NotoSansJP-Thin.ttf") format("truetype");
  font-weight: 100;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "NotoSansJP-ExtraLight";
  src: url("/fonts/renewal_design/NotoSansJP-ExtraLight.woff2") format("woff2"), url("/fonts/renewal_design/NotoSansJP-ExtraLight.woff") format("woff"), url("/fonts/renewal_design/NotoSansJP-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "NotoSansJP-Light";
  src: url("/fonts/renewal_design/NotoSansJP-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "NotoSansJP-Regular";
  src: url("/fonts/renewal_design/NotoSansJP-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "NotoSansJP-Medium";
  src: url("/fonts/renewal_design/NotoSansJP-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "NotoSansJP-SemiBold";
  src: url("/fonts/renewal_design/NotoSansJP-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "NotoSansJP-Bold";
  src: url("/fonts/renewal_design/NotoSansJP-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "NotoSansJP-ExtraBold";
  src: url("/fonts/renewal_design/NotoSansJP-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "NotoSansJP-Black";
  src: url("/fonts/renewal_design/NotoSansJP-Black.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}
@-webkit-keyframes fade-db-in {
  0% {
    visibility: hidden;
    opacity: 0;
  }
  1% {
    visibility: visible;
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}
@keyframes fade-db-in {
  0% {
    visibility: hidden;
    opacity: 0;
  }
  1% {
    visibility: visible;
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}
@-webkit-keyframes fade-db-out {
  0% {
    visibility: visible;
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    visibility: hidden;
    opacity: 0;
  }
}
@keyframes fade-db-out {
  0% {
    visibility: visible;
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    visibility: hidden;
    opacity: 0;
  }
}
@-webkit-keyframes moveDown {
  from {
    top: 0;
    left: min(24.306vw, 350px);
  }
  to {
    top: min(6.944vw, 100px);
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@keyframes moveDown {
  from {
    top: 0;
    left: min(24.306vw, 350px);
  }
  to {
    top: min(6.944vw, 100px);
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@-webkit-keyframes expandWidth {
  from {
    width: min(27.778vw, 400px);
  }
  to {
    width: min(69.444vw, 1000px);
  }
}
@keyframes expandWidth {
  from {
    width: min(27.778vw, 400px);
  }
  to {
    width: min(69.444vw, 1000px);
  }
}
@-webkit-keyframes moveUp {
  from {
    top: min(6.944vw, 100px);
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  to {
    top: 0;
    left: min(24.306vw, 350px);
  }
}
@keyframes moveUp {
  from {
    top: min(6.944vw, 100px);
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  to {
    top: 0;
    left: min(24.306vw, 350px);
  }
}
@-webkit-keyframes shrinkWidth {
  from {
    width: min(69.444vw, 1000px);
  }
  to {
    width: min(27.778vw, 400px);
  }
}
@keyframes shrinkWidth {
  from {
    width: min(69.444vw, 1000px);
  }
  to {
    width: min(27.778vw, 400px);
  }
}
@-webkit-keyframes expand {
  from {
    min-height: 0;
  }
  to {
    min-height: 100%;
  }
}
@keyframes expand {
  from {
    min-height: 0;
  }
  to {
    min-height: 100%;
  }
}
@-webkit-keyframes collapse {
  from {
    min-height: 100%;
  }
  to {
    min-height: 0;
  }
}
@keyframes collapse {
  from {
    min-height: 100%;
  }
  to {
    min-height: 0;
  }
}
@media screen and (max-width: 768px) {
  @-webkit-keyframes moveDown {
    from {
      top: 0;
      left: 40%;
    }
    to {
      top: min(13.333vw, 100px);
      left: calc(50% - min(2.667vw, 20px));
    }
  }
  @keyframes moveDown {
    from {
      top: 0;
      left: 40%;
    }
    to {
      top: min(13.333vw, 100px);
      left: calc(50% - min(2.667vw, 20px));
    }
  }
  @-webkit-keyframes expandWidth {
    from {
      width: calc(min(73.333vw, 550px) + min(3.333vw, 25px));
    }
    to {
      width: calc(100vw - min(10.667vw, 80px));
    }
  }
  @keyframes expandWidth {
    from {
      width: calc(min(73.333vw, 550px) + min(3.333vw, 25px));
    }
    to {
      width: calc(100vw - min(10.667vw, 80px));
    }
  }
  @-webkit-keyframes moveUp {
    from {
      top: min(13.333vw, 100px);
      left: calc(50% - min(2.667vw, 20px));
    }
    to {
      top: 0;
      left: 40%;
    }
  }
  @keyframes moveUp {
    from {
      top: min(13.333vw, 100px);
      left: calc(50% - min(2.667vw, 20px));
    }
    to {
      top: 0;
      left: 40%;
    }
  }
  @-webkit-keyframes shrinkWidth {
    from {
      width: calc(100vw - min(10.667vw, 80px));
    }
    to {
      width: calc(min(73.333vw, 550px) + min(3.333vw, 25px));
    }
  }
  @keyframes shrinkWidth {
    from {
      width: calc(100vw - min(10.667vw, 80px));
    }
    to {
      width: calc(min(73.333vw, 550px) + min(3.333vw, 25px));
    }
  }
}