@charset "utf-8";
/* {outline: 1px solid magenta;}*/
:root{    
	--black: #000;
    --yellow: #ffd800;
    --green: #36fe4b;
    --gray: #989898;
    --red: rgb(184, 17, 17);
}
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../font/inter-v20-latin-700.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('../font/inter-v20-latin-800.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400;
  src: url('../font/orbitron-v35-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 500;
  src: url('../font/orbitron-v35-latin-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 600;
  src: url('../font/orbitron-v35-latin-600.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 700;
  src: url('../font/orbitron-v35-latin-700.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 800;
  src: url('../font/orbitron-v35-latin-800.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 900;
  src: url('../font/orbitron-v35-latin-900.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../font/open-sans-v44-latin-800.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 800;
  src: url('../font/noto-sans-jp-v56-japanese_latin-800.woff2') format('woff2');
}
.axisr{
    font-family: 'A+mfCv-AXIS Font ベーシック R ProN';
}
.axism{
    font-family: 'A+mfCv-AXIS Font ベーシック M ProN';
}
.axisb{
    font-family: 'A+mfCv-AXIS Font ベーシック B ProN';
}
.axish{
    font-family: 'A+mfCv-AXIS Font ベーシック H ProN';
}
.en{
    font-family: 'Inter';
    font-weight: 800;
    letter-spacing: -0.05em;
}
.orb{
    font-family: "Orbitron";
    font-weight: 900;
}
html,body{
    margin: 0;
    padding: 0;
}
.mv{
    width: 100%;
    min-height: calc(100vw * 16 / 36);
    height: 80vh;
    position: relative;
    background: url("../img/teaser.webp") center center / cover no-repeat;
}
.mv-message{
    width: clamp(340px, 30vw, 580px);
    position: absolute;
    top: 1em;
    left: 0.5em;
    z-index: 2;
}
.mv-message img{
    width: 100%;
    height: auto;
    vertical-align: 0;
    line-height: 0;
}
.mv-message .sp{
    display: none;
}
.mv-logo{
    width: clamp(415px, 27vw, 690px);
    position: absolute;
    top: -1em;
    right: 0;
    z-index: 2;
}
.mv-launch{
    width: clamp(740px, 60vw, 1400px);
    position: absolute;
    bottom: 2em;
    right: 0;
    z-index: 2;
}
@media (max-width: 980px) {
    .mv{
        height: 72vh;
        min-height: 540px;
    }
    .mv-logo {
       width: clamp(150px, 40vw, 800px);
    }
    .mv-launch{
        width: clamp(300px, 94vw, 700px);
        bottom: 1em;
    }
    .mv-message img {
        width: auto;
        height: 100%;
    }
    .mv-message .sp{
        display: block;
        height: 53vh;
        min-height: 400px;
        width: auto;
    }
    .mv-message .pc{
        display: none;
    }
}
/*MARQUEE*/
.marquee-wrap{
    overflow: hidden;
}
.marquee {
    overflow: hidden;
    width: 100%;
    background: #fff;
    white-space: nowrap;
}
.marquee-en,
.marquee-jp {
    display: flex;
    width: max-content;
    animation-name: scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.marquee-en {
    animation-duration: 30s;
}
.marquee-jp {
    animation-duration: 20s;
}
.marquee-en span,
.marquee-jp span {
    flex: 0 0 auto;
    padding-right: 0.25em;
    color: #fff;
    -webkit-text-stroke: 1px #000;
    text-stroke: 1px #000;
    line-height: 1.3;
}
.marquee-en span {
    font-family: "Open Sans", sans-serif;
    font-weight: 800;
    font-size: clamp(52px, 12vw, 140px);
    letter-spacing: -0.08em;
}
.marquee-jp span{
    font-family: "ゴシックMB101 B";
    font-size: clamp(24px, 5.4vw, 58px);
    letter-spacing: -0.02em;
}
.marquee-en span:nth-child(even) {
    color: #000;
    -webkit-text-stroke: 0;
}
.marquee-jp span:nth-child(odd) {
    color: #000;
    -webkit-text-stroke: 0;
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}