@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("../font/NotoSansJP-VariableFont_wght.ttf");
}
@font-face {
  font-family: "DCC-Ash";
  src: url("../font/DCC-Ash.ttf.eot");
  /* IE9 Compat Modes */
  src: url("../font/DCC-Ash.ttf.eot?#iefix") format("embedded-opentype"), url("../font/DCC-Ash.ttf.woff") format("woff"), url("../font/DCC-Ash.ttf") format("truetype"), url("../font/DCC-Ash.ttf.svg#DCC-Ash") format("svg");
  /* Legacy iOS */
}
@font-face {
  font-family: "Bad Grunge";
  src: url("../font/BAD%20GRUNGE.ttf") format("truetype");
}
html {
  font-size: 62.5%;
}

body {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "游ゴシック体", "Yu Gothic", YuGothic, "MS P Gothic", "ＭＳ Ｐゴシック", arial, helvetica, sans-serif;
  color: #000;
  line-height: 1.4;
  font-weight: 500;
  font-size: 15px;
  font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  height: 100%;
}

h1 {
  font-size: 34px;
}

h2 {
  font-size: 28px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 20px;
}

img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}

a {
  color: #000;
  cursor: pointer;
  text-decoration: none;
}

strong {
  font-weight: bold;
}

span {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  vertical-align: bottom;
}

table th,
table td {
  vertical-align: top;
}

/*
 スクロールアニメーション
 ----------------------------*/
/* .js--anime が画面に入るとJSが is_shown を付ける。
   定位置のまま透明度だけ変える */
.js--anime {
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0, 0, 0.2, 1);
}
.js--anime.is_shown {
  opacity: 1;
}

/*
 レイアウト
 ----------------------------*/
html {
  position: relative;
}

main {
  overflow: hidden;
}

.container {
  max-width: 1520px;
  width: 100%;
  padding-left: 40px;
  padding-right: 40px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
@media screen and (max-width: 575px) {
  .container {
    padding-left: 6.41026vw;
    padding-right: 6.41026vw;
  }
}
@media screen and (max-width: 575px) {
  .container.sm {
    padding-left: 11.21795vw;
    padding-right: 11.21795vw;
  }
}

html {
  margin-top: 0 !important;
}

/*
 SPライク中央固定レイアウト
 PC時は $sp_base_width の枠を中央に置き、左右に背景を敷く
 ----------------------------*/
.l_wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #0f0f12;
  background-image: none;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
@media screen and (max-width: 575px) {
  .l_wrapper {
    background: none;
  }
}

/* PCは 左:イメージ図 / 中:メイン / 右:メニュー の3カラム
   SPではメインだけを表示する
   メイン490 + メニュー320 = 810px は確保する */
.l_wrapper {
  /* イメージ図が出る幅では、その伸縮に任せるので中央寄せに戻す */
}
@media screen and (min-width: 576px) {
  .l_wrapper {
    display: flex;
    /* 左詰め。イメージ図が無い幅でも両サイドに余白を作らない */
    justify-content: flex-start;
    align-items: flex-start;
    /* メニューの左罫線1pxぶんを足す。足りないと横スクロールが出る */
    min-width: 811px;
  }
}
@media screen and (min-width: 1050px) {
  .l_wrapper {
    justify-content: center;
  }
}

/* 左のイメージ図(固定表示)
   1050px未満のウィンドウでは表示しない */
.l_visual {
  display: none;
}
@media screen and (min-width: 1050px) {
  .l_visual {
    display: block;
    position: sticky;
    top: 0;
    /* メニューと同じ伸び方。左右で余りを等分し .l_main を中央に置く */
    flex: 1 1 0;
    min-width: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: url(../img/l_visual_bg.jpg);
    background-size: cover;
    background-position: top center;
    border-right: 1px solid #000;
    /* 縦書きコピー「新怪獣が、伝説に挑む。」
       Figma実測: 630x800の枠内で x=299 y=229 / 31.96x253 */
  }
  .l_visual .kaiju_g {
    width: 100%;
    height: 100%;
    background: url(../img/l_visual_g.png) no-repeat;
    background-size: cover;
    background-position: top right;
    mix-blend-mode: color;
  }
  .l_visual .kaiju {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  .l_visual .kaiju img {
    width: 100%;
  }
  .l_visual .copy {
    position: absolute;
    top: 28.625%;
    left: 47.46032%;
    width: 51px;
    margin: 0;
    /* 英語版は横書きのコピー。1440pxで346pxをvwに換算し、
       .l_visual の中央(縦横とも)に置く */
  }
  .is_en .l_visual .copy {
    top: 50%;
    left: 50%;
    width: 24.02778vw;
    transform: translate(-50%, -50%);
  }
  .l_visual .copy img {
    display: block;
    width: 100%;
    height: auto;
  }
  .l_visual small {
    position: absolute;
    font-size: 12px;
    color: #000;
    bottom: 2px;
    right: 5px;
  }
}

/* SPのみ表示するメニューボタン
   Figma実測(Group 72): 64x64 / 赤地に黒枠1px
   上に両端が三角に尖った横線2本、下に menu (Anton 20px) */
/* SPのみ表示するメニューボタン
   Figma実測: 66x66(枠1px込み)。開閉で画像を差し替える */
.l_menu_btn {
  display: none;
}
@media screen and (max-width: 575px) {
  .l_menu_btn {
    display: block;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 100;
    width: 17.6vw;
    height: 17.6vw;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    appearance: none;
    /* MVを抜けて、かつ上スクロール中だけ出す(JSが is_visible を付ける) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: opacity 300ms cubic-bezier(0, 0, 0.2, 1), transform 300ms cubic-bezier(0, 0, 0.2, 1), visibility 0s linear 300ms;
    /* メニューを開いている間は常に出す(閉じるボタンになるため) */
    /* 閉じている間は open を出す */
    /* 開いている間は close に差し替える */
  }
  .l_menu_btn.is_visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 300ms cubic-bezier(0, 0, 0.2, 1), transform 300ms cubic-bezier(0, 0, 0.2, 1), visibility 0s;
  }
  .is_menu_open .l_menu_btn {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .l_menu_btn img {
    display: block;
    width: 100%;
    height: auto;
  }
  .l_menu_btn .l_menu_btn_close {
    display: none;
  }
  .is_menu_open .l_menu_btn {
    z-index: 95;
  }
  .is_menu_open .l_menu_btn .l_menu_btn_open {
    display: none;
  }
  .is_menu_open .l_menu_btn .l_menu_btn_close {
    display: block;
  }
}

/* 右のメニュー(固定表示)
   縦積みのflexにして、ロゴエリアに余りを全部持たせる
   メニューを増減してもロゴエリアの高さが自動で追従する
   SPではmenuボタンで開閉するパネルとして使う
   Figma実測: 375x727 / 赤地に黒枠1px / 右下にCLOSE(64x64) */
.l_menu {
  display: none;
  /* --- SPパネルとして開いたときの中身 --- */
}
@media screen and (max-width: 575px) {
  .l_menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    box-sizing: border-box;
    /* 下辺と右辺の黒帯(64px)ぶんを空けて中身を置く */
    padding: 0 17.06667vw 17.06667vw 0;
    border: 1px solid #000;
    background: url(../img/bg-red.png);
    /* 閉じている間は消しておく。開くとフェードインする
       (黒帯はボタンの位置から伸びるので、下の l_menu_band を参照) */
    opacity: 0;
    visibility: hidden;
    /* 帯(400ms)が伸び切ってから中身をフェードインさせる */
    transition: opacity 350ms cubic-bezier(0, 0, 0.2, 1), visibility 0s linear 350ms;
  }
  .is_menu_open .l_menu {
    opacity: 1;
    visibility: visible;
    transition: opacity 350ms cubic-bezier(0, 0, 0.2, 1) 400ms, visibility 0s;
  }
}
@media screen and (min-width: 576px) {
  .l_menu {
    background: url(../img/bg-red.png);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    /* イメージ図が無い幅では、メインを引いた残りを全部使う */
    flex: 1 1 auto;
    width: auto;
    min-width: 320px;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    border-left: 1px solid #000;
    /* イメージ図が出る幅では左右で等分し、.l_main を中央に保つ */
    /* 高さは指定しない。メニューを引いた残り全部を受け取る */
    /* メニューは中身の高さのまま。縮ませない */
  }
}
@media screen and (min-width: 576px) and (min-width: 1050px) {
  .l_menu {
    flex: 1 1 0;
    min-width: 0;
  }
}
@media screen and (min-width: 576px) {
  .l_menu .logo_area {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #000;
  }
  .l_menu .logo_area img {
    display: block;
    width: 63.57895%;
    max-width: 100%;
    height: auto;
  }
  .l_menu nav {
    flex: 0 0 auto;
  }
  .l_menu nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .l_menu nav li + li a {
    border-top: 1px solid #000;
  }
  .l_menu nav li {
    position: relative;
  }
  .l_menu nav li::after {
    content: "";
    background: url(../img/menu-arrow.svg) no-repeat;
    width: 6px;
    height: 12px;
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    background-size: cover;
  }
  .l_menu nav a {
    display: block;
    /* Figma: 項目104px。テキスト塊55px + 上下24.5px */
    padding: 37px 16px;
    color: #000;
    text-decoration: none;
    font-family: "Anton", "Arial Narrow", arial, helvetica, sans-serif;
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0.09px;
  }
  .l_menu nav a span {
    display: block;
    margin-top: 2px;
    font-family: "Zen Kaku Gothic New", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "游ゴシック体", "Yu Gothic", YuGothic, "MS P Gothic", "ＭＳ Ｐゴシック", arial, helvetica, sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 21 / 15;
    letter-spacing: 0;
  }
}
@media screen and (max-width: 575px) {
  .l_menu .logo_area {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #000;
  }
  .l_menu .logo_area img {
    display: block;
    width: 58.66667vw;
    max-width: 100%;
    height: auto;
  }
  .l_menu nav {
    flex: 0 0 auto;
    /* Figma実測: 項目107px / 文字40px + 15px / 左16px */
  }
  .l_menu nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .l_menu nav li + li a {
    border-top: 1px solid #000;
  }
  .l_menu nav a {
    display: block;
    padding: 6.13333vw 4.26667vw 6.13333vw;
    color: #000;
    text-decoration: none;
    font-family: "Anton", "Arial Narrow", arial, helvetica, sans-serif;
    font-size: 10.66667vw;
    line-height: 1;
    letter-spacing: 0.024vw;
  }
  .l_menu nav a span {
    display: block;
    font-family: "Zen Kaku Gothic New", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "游ゴシック体", "Yu Gothic", YuGothic, "MS P Gothic", "ＭＳ Ｐゴシック", arial, helvetica, sans-serif;
    font-weight: 700;
    font-size: 4vw;
    line-height: 21 / 15;
    letter-spacing: 0;
  }
}

/* 下辺と右辺の黒帯。赤い中抜き文字が流れる
   Figma実測: 帯64px / Anton 64px / 塗りなし・線#ff0000 */
.l_menu_band {
  display: none;
  /* 下辺は右から左へ */
  /* 右辺は縦向き。帯と同じ幅の行を90度回して上から下へ流す */
  /* 幅を固定するとトラック長が変わって下辺と速度がずれるので、
     中身の長さ(max-content)のまま回す */
}
@media screen and (max-width: 575px) {
  .l_menu_band {
    display: block;
    position: fixed;
    overflow: hidden;
    background: #000;
    /* パネル(90)より手前、ボタン(95)より奥 */
    z-index: 92;
    /* ボタン(右下)を起点に伸びる。
       閉じている間は長さ0にして、開くと本来の長さまで広がる */
    transition: transform 400ms cubic-bezier(0, 0, 0.2, 1);
    /* 下辺: 右端(ボタン側)から左へ伸びる */
    /* 右辺: 下端(ボタン側)から上へ伸びる */
  }
  .l_menu_band.bottom {
    left: 0;
    bottom: 0;
    width: calc(100% - 17.06667vw);
    height: 17.06667vw;
    transform-origin: right center;
    transform: scaleX(0);
  }
  .l_menu_band.side {
    top: 0;
    right: 0;
    width: 17.06667vw;
    height: calc(100% - 17.06667vw);
    transform-origin: center bottom;
    transform: scaleY(0);
  }
  .is_menu_open .l_menu_band.bottom {
    transform: scaleX(1);
  }
  .is_menu_open .l_menu_band.side {
    transform: scaleY(1);
  }
}
.l_menu_band .l_menu_band_track {
  display: flex;
  width: max-content;
  height: 100%;
  align-items: center;
}
.l_menu_band .l_menu_band_track span {
  flex: 0 0 auto;
  padding-right: 5.33333vw;
  font-family: "Anton", "Arial Narrow", arial, helvetica, sans-serif;
  font-size: 17.06667vw;
  /* Antonは字面が箱より小さいので、帯の高さに合わせて詰める */
  line-height: 17.06667vw;
  white-space: nowrap;
  /* 塗りは抜いて、赤い輪郭だけ見せる */
  color: transparent;
  -webkit-text-stroke: 1px #ff0000;
  text-stroke: 1px #ff0000;
}
.l_menu_band.bottom .l_menu_band_track {
  animation: menu-band-flow 18s linear infinite;
}
.l_menu_band.side .l_menu_band_track {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  height: 17.06667vw;
  transform-origin: left top;
  transform: rotate(90deg) translateY(-100%);
  animation: menu-band-flow-v 18s linear infinite;
}

.l_main {
  position: relative;
  z-index: 1;
  width: 490px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}
@media screen and (min-width: 576px) {
  .l_main {
    flex: 0 0 490px;
  }
}
@media screen and (max-width: 575px) {
  .l_main {
    width: 100%;
    box-shadow: none;
  }
}

/*
 ローディング画面
 バーが伸びる + 3桁カウンター(縦ロール) 000 -> 100
 ----------------------------*/
/* ローディング中はスクロールさせない */
body.is_loading {
  overflow: hidden;
}

.l_loading {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #010101;
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms cubic-bezier(0, 0, 0.2, 1), visibility 0s linear 300ms;
}
.l_loading.is_hidden {
  opacity: 0;
  visibility: hidden;
  /* フェードアウト中も下の画面の操作を妨げない */
  pointer-events: none;
}

.l_loading_inner {
  position: relative;
  width: 260px;
}

/* プログレスバー */
.l_loading_bar {
  position: relative;
  width: 100%;
  height: 2px;
}

.l_loading_bar_fill {
  width: 0;
  height: 100%;
  background-image: linear-gradient(to right, #fff5d0 0%, #ffde65 21.6%, #ff5500 55.3%, #ff0040 100%);
  /* JSで幅を更新。transitionで中割りを滑らかにする */
  transition: width 60ms linear;
}

/* バー先端のドット: 白 -> 赤 */
.l_loading_dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background-color: #fff;
  transform: translateY(-50%);
  transition: left 60ms linear, background-color 60ms linear;
}

/* カウンター */
.l_loading_count {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: 18px;
  font-family: "Anton", "Arial Narrow", arial, helvetica, sans-serif;
  color: #fff;
  line-height: 1;
}

/* 各桁: 高さで窓を作り、中の数字列を translateY で送る */
.l_loading_digit {
  overflow: hidden;
  width: 14px;
  height: 24px;
}

.l_loading_digit_strip {
  display: block;
  transition: transform 60ms linear;
  will-change: transform;
}
.l_loading_digit_strip span {
  display: block;
  width: 14px;
  height: 24px;
  font-size: 24px;
  line-height: 24px;
  text-align: center;
}

.l_loading_percent {
  margin-left: 2px;
  font-size: 16px;
  line-height: 24px;
}

/*
 音声ON/OFF確認画面
 Figma: 音声A (1376:1275)
 ローディング後に表示し、選択後にオープニングを開始する
 ----------------------------*/
.l_sound {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 1;
  visibility: visible;
  transition: opacity 400ms cubic-bezier(0, 0, 0.2, 1), visibility 0s linear 400ms;
  /* 下のオープニングも黒地なのでフェードは不要。
     残すと消える途中の黒が透けて、最初の足跡がフェードインして見える */
  /* 選択後は中身(文言とボタン)だけを0.5sで消す。黒い背景はこの間だけ残す
     is_hidden が付いた後も中身は消えたままにする(戻ると一瞬ちらつくため) */
}
.l_sound.is_hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}
.l_sound.is_closing {
  pointer-events: none;
}
.l_sound.is_closing .l_sound_inner {
  opacity: 0;
  transition: opacity 500ms linear;
}

.l_sound_inner {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  box-sizing: border-box;
}

/* Figma実測: Zen Kaku Gothic New Black 15px / line-height 21px */
.l_sound_text {
  margin-bottom: 26px;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-weight: 900;
  font-size: 15px;
  line-height: 21px;
  color: #fff;
}

.l_sound_btns {
  display: flex;
  justify-content: center;
  gap: 32px;
}

/* Figma実測: 80x80 円形 / 枠線1px */
.l_sound_btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  appearance: none;
  transition: opacity 0.3s cubic-bezier(0, 0, 0.2, 1);
  /* Figma実測: Anton 20px */
}
.l_sound_btn:hover {
  opacity: 0.7;
}
.l_sound_btn svg {
  display: block;
  width: 20px;
  height: 18px;
  margin-bottom: 6px;
  fill: currentColor;
}
.l_sound_btn span {
  display: block;
  font-family: "Anton", "Arial Narrow", arial, helvetica, sans-serif;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0.09px;
}

/*
 オープニング(足跡シーケンス)
 Figma: 1230:2 -> 1230:101 -> 1230:83 -> 1230:115
 足跡が1つずつ増えながら、中央の縦書きテキストが差し替わる
 ----------------------------*/
.l_opening {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  width: 100%;
  height: 100%;
  background-color: #010101;
  opacity: 1;
  visibility: visible;
  transition: opacity 400ms cubic-bezier(0, 0, 0.2, 1), visibility 0s linear 400ms;
  /* MVへ移る前。中身だけ黒へ落とす(背景の黒はそのまま残す) */
}
.l_opening.is_hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.l_opening.is_outro .l_opening_stage {
  opacity: 0;
  transition: opacity 300ms linear;
}

/* 横は375px基準、縦は画面高(vh)基準の座標系 */
.l_opening_stage {
  position: relative;
  width: 490px;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  margin-left: auto;
  margin-right: auto;
}

/* 足跡 */
.l_opening_step {
  position: absolute;
  opacity: 0;
}
.l_opening_step.is_show {
  opacity: 1;
}
.l_opening_step img {
  display: block;
  width: 100%;
  height: auto;
}

/* Figma実測の配置
   横(left/width)は375px基準の実測値を%に換算し、
   枠幅($sp_base_width)が変わっても同じ絵になるようにする
   縦(top)は黒地の高さ647pxを100vhとして換算し、画面高に追従させる */
/* Group 14: x=189 y=459 */
.l_opening_step.step01 {
  top: 70.94281vh;
  left: 50.4%;
  width: 33.86667%;
}

/* Group 13: x=36 y=303 */
.l_opening_step.step02 {
  top: 46.83153vh;
  left: 9.6%;
  width: 37.86667%;
}

/* Group 15: x=208 y=151 */
.l_opening_step.step03 {
  top: 23.33849vh;
  left: 55.46667%;
  width: 33.86667%;
}

/* Group 16: x=46 y=11 */
.l_opening_step.step04 {
  top: 1.70015vh;
  left: 12.26667%;
  width: 37.86667%;
}

/* 縦書きテキスト */
.l_opening_text {
  position: absolute;
  top: 50%;
  left: 50%;
  writing-mode: vertical-rl;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  white-space: nowrap;
  /* 4カットを同じ位置に重ねて置き、表示するものだけ見せる。
     opacity だけだと描画自体は残り、隠れたテキストの輪郭が
     うっすら線になって見えるので visibility で描画ごと止める */
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%);
  /* 英語版(/en)。vertical-rl だと欧文は横倒しになって読めないので、
     横書きに戻す。改行位置は原稿側の <br> で決める */
}
.l_opening_text.is_show {
  opacity: 1;
  visibility: visible;
}
.is_en .l_opening_text {
  writing-mode: horizontal-tb;
  text-align: center;
  line-height: 1.15;
  white-space: nowrap;
}

/* Figma実測: カットごとに文字サイズが違う */
.l_opening_text.cut01 {
  /* 東宝プレゼンツ 16px */
  font-size: 16px;
}

.l_opening_text.cut02 {
  /* 新怪獣総選挙 32px */
  font-size: 32px;
}

.l_opening_text.cut03 {
  /* 新怪獣デザイン制作 16px */
  font-size: 16px;
}

.l_opening_text.cut04 {
  /* 白組 32px */
  font-size: 32px;
}

/* SKIPボタン: Figma実測 56x32 / 右下 */
.l_opening_skip {
  position: absolute;
  right: 32px;
  bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 32px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 24px;
  background: transparent;
  font-family: "Anton", "Arial Narrow", arial, helvetica, sans-serif;
  font-size: 18px;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  appearance: none;
  transition: opacity 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.l_opening_skip:hover {
  opacity: 0.7;
}

/*
 header
 ----------------------------*/
/*
 footer
 ----------------------------*/
footer {
  padding: 40px 40px 63px;
  background: #000;
}
footer ul {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}
footer small {
  display: block;
  text-align: center;
  color: #fff;
  font-size: 12px;
}

/*
 section
 ----------------------------*/
/*
 conponents
 ----------------------------*/
.section-title {
  /* スクロールで左から右へ開く。テキストは動かさず、
     見える範囲だけを広げる。h2 のあとに p が続く */
}
.section-title.js--anime {
  opacity: 1;
  transition: none;
}
.section-title.js--anime h2,
.section-title.js--anime p {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 500ms ease-out;
}
.section-title.js--anime p {
  transition-delay: 250ms;
}
.section-title.js--anime.is_shown h2,
.section-title.js--anime.is_shown p {
  clip-path: inset(0);
}
.section-title h2 {
  color: #fff;
  text-align: center;
  font-family: Anton;
  font-size: 64px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  /* 64px */
  letter-spacing: 0.092px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
@media screen and (max-width: 575px) {
  .section-title h2 {
    font-size: 17.06667vw;
  }
}
.section-title p {
  color: #fff;
  text-align: center;
  font-family: "Zen Kaku Gothic New";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 21px;
  /* 131.25% */
  letter-spacing: 1px;
}
@media screen and (max-width: 575px) {
  .section-title p {
    font-size: 4.26667vw;
  }
}

/* メニューの黒帯を流す。1セットぶん動かして繰り返す */
@keyframes menu-band-flow {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes menu-band-flow-v {
  from {
    transform: rotate(90deg) translateY(-100%) translateX(0);
  }
  to {
    transform: rotate(90deg) translateY(-100%) translateX(-50%);
  }
}
/* 言語切り替え。左下に固定して上へ開く
   Figma実測(Group 156): 98x32 / 白地に黒枠1px
   閉: language のみ / 開: ENGLISH・日本語 が上に積まれる */
.l_lang {
  /* 画面下に貼り付ける。.l_main の中にあるが overflow: hidden で
     sticky が効かないため fixed にして、左端だけ .l_main に合わせる */
  position: fixed;
  bottom: 0;
  left: 0;
  /* メニューパネル(90)より下。開いたら隠れる */
  z-index: 80;
  width: 98px;
  /* .l_main(490px)は画面中央にあるので、中央から半分戻すと左端になる */
  /* 開いたときだけ出る2項目。閉じている間は下へ畳む */
  /* 3段とも同じ寸法。罫線は共有させる */
  /* いちばん下(language)だけ下の罫線を持つ */
}
@media screen and (min-width: 1050px) {
  .l_lang {
    left: 50%;
    margin-left: -245px;
  }
}
@media screen and (max-width: 575px) {
  .l_lang {
    width: 26.13333vw;
  }
}
.l_lang .l_lang_list {
  overflow: hidden;
  max-height: 0;
  transition: max-height 300ms cubic-bezier(0, 0, 0.2, 1);
}
.l_lang.is_open .l_lang_list {
  max-height: 64px;
}
@media screen and (max-width: 575px) {
  .l_lang.is_open .l_lang_list {
    max-height: 17.06667vw;
  }
}
.l_lang .l_lang_item,
.l_lang .l_lang_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 1px solid #000;
  border-bottom: none;
  background: #fff;
  color: #000;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
}
@media screen and (max-width: 575px) {
  .l_lang .l_lang_item,
  .l_lang .l_lang_btn {
    height: 8.53333vw;
  }
}
.l_lang .l_lang_btn {
  border-bottom: 1px solid #000;
  gap: 4px;
}
@media screen and (max-width: 575px) {
  .l_lang .l_lang_btn {
    gap: 1.06667vw;
  }
}
.l_lang .l_lang_item {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "游ゴシック体", "Yu Gothic", YuGothic, "MS P Gothic", "ＭＳ Ｐゴシック", arial, helvetica, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
}
@media screen and (max-width: 575px) {
  .l_lang .l_lang_item {
    font-size: 3.73333vw;
    letter-spacing: 0.26667vw;
  }
}
.l_lang .l_lang_icn {
  display: block;
  width: 16px;
  height: 16px;
}
@media screen and (max-width: 575px) {
  .l_lang .l_lang_icn {
    width: 4.26667vw;
    height: 4.26667vw;
  }
}
.l_lang .l_lang_icn svg {
  display: block;
  width: 100%;
  height: 100%;
}
.l_lang .l_lang_text {
  font-family: "Anton", "Arial Narrow", arial, helvetica, sans-serif;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.09px;
  text-transform: lowercase;
}
@media screen and (max-width: 575px) {
  .l_lang .l_lang_text {
    font-size: 4.26667vw;
  }
}

/*
 btn
 ----------------------------*/
/*
 titles
 ----------------------------*/
/*
 bg
 ----------------------------*/
/*
 bd
 ----------------------------*/
/*
 color
 ----------------------------*/
/*
 table
 ----------------------------*/
/*
 block
 ----------------------------*/
/*
 column
 ----------------------------*/
/*
 TOPキービジュアル(PC)
 Figma: 完成図 2535:39 / 490 x 846.72
 重ね順(奥->手前): layer4(ゴジラ) -> layer3 -> layer2 -> layer1
 足音アニメーション完了後に黒からフェードインし、ズームアウトしながら怪獣が下から現れる
 ----------------------------*/
.p_top {
  position: relative;
  width: 100%;
  /* OPと同じ 375x648 の枠。画面高には追従させない */
  height: 846.72px;
  overflow: hidden;
  background-color: #000;
  /* SPは画面幅に追従させる */
}
@media screen and (max-width: 575px) {
  .p_top {
    height: 172.8vw;
  }
}

/* 全層の親。375pxの枠を覆う(絵柄と枠で比率が違う分は上下がはみ出す)
   ※ translate と scale を同じ要素に混ぜると transform-origin が
     センタリングにも効いて斜めにズレるため、位置決めは top/left で行う */
.p_top_stage {
  position: absolute;
  top: 0;
  left: 0;
  /* 375pxの枠いっぱい。絵柄の比率差は object-fit: cover で吸収する */
  width: 100%;
  height: 100%;
  /* 子(各層)をパススルーで合成させるため、ここでも分離しない */
  isolation: auto;
  /* 3. 画面中央を基準にズームアウト(絵は動かず拡大縮小のみ) */
  transform-origin: 50% 27.7%;
  transform: scale(3);
  /* 1. 黒からのフェードイン */
  opacity: 0;
  transition: opacity 2200ms linear 350ms, transform 5200ms cubic-bezier(0.16, 1, 0.3, 1) 350ms;
}
.is_playing .p_top_stage {
  opacity: 1;
  transform: scale(1);
}

/* 各層の共通土台。はみ出しはこの枠で切る
   Figmaの各グループはブレンドモード「パススルー」
   = 独立した合成レイヤーを作らず、下の層とそのまま重なる
   CSSでは normal + isolation:auto がこれに相当する */
.p_top_layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  mix-blend-mode: normal;
  isolation: auto;
}
.p_top_layer img {
  display: block;
  width: 100%;
  height: 100%;
  /* 全層とも同じ切り取り方をするので、重なりの位置関係は崩れない */
  object-fit: cover;
  object-position: center center;
}

/* 最背面のゴジラ。ズームはstage側でまとめてかける。
   赤背景と乗算で合成する。ズーム中は体が画面を覆い
   全面が黒く沈むので、序盤は薄く出して引きに合わせて濃くする */
.p_top_godzilla {
  z-index: 1;
  mix-blend-mode: multiply;
  opacity: 0.15;
  transition: opacity 5200ms cubic-bezier(0.16, 1, 0.3, 1) 350ms;
}
.p_top_godzilla img {
  object-position: top center;
}

.p_top.is_playing .p_top_godzilla {
  opacity: 1;
}

/* ゴジラの上に重ねる黒グラデーション(下から重ねる)
   490x699 の素材を下端合わせで置く。
   新怪獣がせり上がってくるのに合わせてフェードインさせる */
.p_top_black {
  position: absolute;
  left: 0;
  bottom: 0;
  /* 火の粉(z:2)より手前に出す */
  z-index: 3;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  /* 序盤(ゴジラが大きい間)は出さず、遅れてから効かせる */
  transition: opacity 1200ms linear 2000ms;
  /* 素材の上辺が直線なので、そのままだとゴジラの胸に
     黒い横線が出る。上側をぼかして背景に溶け込ませる */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 25%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 25%);
}
.is_playing .p_top_black {
  opacity: 1;
}
.p_top_black img {
  display: block;
  width: 100%;
  height: auto;
}

/* 4. 新怪獣(layer1-3)。1つのdivをまとめて下からせり上がる
      stage の外に置いてあるので、ゴジラのズームとは独立して動き、
      自分の transition が終わった時点で完全に静止する */
.p_top_kaiju {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  isolation: auto;
  transform-origin: center bottom;
  /* 画面下に潰れた状態で待機し、せり上がりながら等倍に戻る
     translate と scale3d を同じ transform に入れて歩調を揃える */
  transform: translate3d(0, 100%, 0) scale3d(1, 0.3, 1);
  /* 半透明にすると下のゴジラが透けるのでフェードはさせない */
  transition: transform 1900ms cubic-bezier(0.16, 1, 0.3, 1) 350ms;
  will-change: transform;
  /* 素材の上部に黒が入っていて、ゴジラとの境目が
     黒い帯になって見える。上側をぼかして消す */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 22%, #000000 42%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 22%, #000000 42%);
}
.is_playing .p_top_kaiju {
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}

/*
 キャッチコピー
 490x846.72 基準で right 8px / top 8px / 幅 158px
 ゴジラのズームが終わる前にフワッと出す
 ----------------------------*/
.p_top_copy {
  position: absolute;
  z-index: 9;
  right: 1.63265%;
  top: 0.94482%;
  width: 32.2449%;
  margin: 0;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0, 0, 0.2, 1) 2600ms;
}
@media screen and (max-width: 575px) {
  .p_top_copy {
    width: 42.13333vw;
  }
}
.p_top_copy.en {
  width: 43.87755%;
}
@media screen and (max-width: 575px) {
  .p_top_copy.en {
    width: 57.33333vw;
  }
}
.is_playing .p_top_copy {
  opacity: 1;
}
.p_top_copy img {
  display: block;
  width: 100%;
  height: auto;
}

/*
 権利表記 TM & (c) TOHO
 Figma実測(490x846.72基準): right 1.63% / bottom 0.91% / 12px
 出るタイミングはキャッチコピーと揃える
 ----------------------------*/
.p_top_credit {
  position: absolute;
  z-index: 9;
  right: 1.63265%;
  bottom: 0.90939%;
  margin: 0;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0, 0, 0.2, 1) 2600ms;
}
@media screen and (max-width: 575px) {
  .p_top_credit {
    font-size: 2.44898vw;
  }
}
.is_playing .p_top_credit {
  opacity: 1;
}

/*
 ロゴ
 ズームの影響を受けないよう stage の外に置き、最初から表示しておく
 Figma実測(Group 159 / 490x846.72基準): left 7.73% / top 63.66% / width 85.06%
 ----------------------------*/
.p_top_logo {
  position: absolute;
  z-index: 10;
  left: 7.73469%;
  top: 63.65741%;
  width: 85.06122%;
  margin: 0;
  /* PCは実寸374pxで中央に置く。
     transform は scale のアニメーションが入っているので、
     中央寄せは margin-left で行う */
  /* 2. 大きい状態で出てから通常サイズへ。ゴジラより先に見せる */
  opacity: 0;
  transform-origin: center center;
  transform: scale(1.6);
  transition: opacity 2000ms linear 150ms, transform 3000ms cubic-bezier(0.16, 1, 0.3, 1) 150ms;
}
@media screen and (min-width: 576px) {
  .p_top_logo {
    left: 50%;
    /* top指定を打ち消して下端から測る */
    top: auto;
    bottom: 20px;
    width: 374px;
    margin-left: -187px;
  }
}
.is_playing .p_top_logo {
  opacity: 1;
  transform: scale(1);
}
.p_top_logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* 新怪獣3層の重ね順。動きは親の .p_top_kaiju がまとめて持つ */
.p_top_layer3 {
  z-index: 3;
}

.p_top_layer2 {
  z-index: 5;
}

.p_top_layer1 {
  z-index: 7;
}

/*
 火の粉(動画)
 黒地・アルファ無しの素材なので lighten で合成し、黒を飛ばす
 Figmaの配置を 490x846.72 に対する % で再現する
 ----------------------------*/
.p_top_fire {
  position: absolute;
  overflow: hidden;
  mix-blend-mode: lighten;
  pointer-events: none;
  /* 序盤は完全に消しておき、新怪獣が出そろう少し前に現れる */
  opacity: 0;
  transition: opacity 1600ms linear 900ms;
}
.is_playing .p_top_fire {
  opacity: 1;
}
.p_top_fire video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Figma実測(490x846.72基準) */
/* fire4 のみ SP版KV(375x648)の実測値。
   MVは100vhで縦横比が違うので、縦も幅基準(spvw)で置く */
.p_top_fire4 {
  z-index: 2;
  left: -32%;
  top: -2.66667vw;
  width: 164%;
  height: auto;
  aspect-ratio: 615 / 346;
}

/* Figmaでは約6度傾いている。回転前は他のfireと同じ 690x388
   親に transform を付けると合成コンテキストが分離して
   lighten が効かなくなり上辺が黒く出るため、内側の video を回す */
.p_top_fire3 {
  z-index: 4;
  left: -20.40816%;
  top: 20.54989%;
  width: 140.81633%;
  height: 45.82389%;
  overflow: visible;
  /* 素材の縁が直線で出てしまうので、上下をぼかして溶け込ませる */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 22%, #000000 78%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 22%, #000000 78%, rgba(0, 0, 0, 0) 100%);
}
.p_top_fire3 video {
  /* 回転で角が空くぶん、少し大きめにして隙間を作らない */
  transform: rotate(-6deg) scale(1.25);
  transform-origin: center center;
}

.p_top_fire2 {
  z-index: 6;
  left: -20.40816%;
  top: 30.58862%;
  width: 140.81633%;
  height: 45.82389%;
}

/* 上辺だけ斜めに切る(Figmaの傾き約11度ぶん)。動画自体は回転させない */
.p_top_fire1 {
  z-index: 8;
  left: -70.4898%;
  top: 22.0616%;
  width: 245.40816%;
  height: 96.80886%;
  clip-path: polygon(0 29%, 100% 0, 100% 100%, 0 100%);
}

/*
 確認用: ?kv=hold で初期状態(ズーム最大)のまま停止する
 アニメーションは動かさず、見た目だけ表示する
 ----------------------------*/
.p_top.is_hold {
  /* 新怪獣は出さない(ゴジラのズームだけ確認する) */
}
.p_top.is_hold .p_top_stage {
  opacity: 1;
  transition: none;
  /* transform は初期値($kv_zoom_from)のまま */
}
.p_top.is_hold .p_top_logo {
  opacity: 1;
  transform: scale(1.6);
  transition: none;
}
.p_top.is_hold .p_top_kaiju {
  transition: none;
}

/*
 火の粉の出方(PC・SP共通)
 4層とも黒からフェードインし、以降は濃さを変えない
 ----------------------------*/
.p_top_fire {
  opacity: 0;
  transition: opacity 800ms linear;
}

.is_playing .p_top_fire {
  opacity: 1;
}

/* 最背面の fire4 だけ少し遅れて現れる */
.p_top_fire4 {
  transition: opacity 800ms linear 1200ms;
}

/*
 SP: MVを画面の高さいっぱいにする
 赤背景とゴジラを分離し、怪獣を切らずに収める
 ----------------------------*/
@media screen and (max-width: 575px) {
  .p_top {
    height: 100vh;
    height: 100dvh;
  }

  /* 枠が絵柄より縦長になるので、怪獣は切らずに収める */
  .p_top_layer img {
    object-fit: contain;
    object-position: center center;
  }

  /* 赤いテクスチャ背景。最背面で画面全体を覆う */
  .p_top_bg {
    z-index: 0;
  }
  .p_top_bg img {
    object-fit: cover;
    object-position: center center;
  }

  /* SPでは絵を切らずに収める(乗算と濃さの制御は共通側で指定済み) */
  .p_top_godzilla img {
    object-fit: contain;
    object-position: top center;
  }

  /* 黒グラデーションは濃くなりすぎないよう上限をかける */
  .p_top_black img {
    object-fit: contain;
    object-position: center bottom;
  }

  .p_top.is_playing .p_top_black {
    opacity: 0.35;
  }

  /* 新怪獣は絵を切らずに全部見せる */
  .p_top_kaiju .p_top_layer img {
    object-fit: contain;
    object-position: center center;
  }
}
.section-countdown {
  background: url(../img/bg-countdown.png);
  background-size: 114%;
  background-position: center -33px;
  height: 702px;
  position: relative;
  padding-top: 310px;
}
@media screen and (max-width: 575px) {
  .section-countdown {
    background-position: center -8.8vw;
    height: 149vw;
    padding-top: 58.66667vw;
  }
}
.section-countdown .copy {
  position: absolute;
  top: -67px;
  left: 50%;
  transform: translateX(-50%);
  width: 811px;
}
@media screen and (max-width: 575px) {
  .section-countdown .copy {
    top: -17.86667vw;
    width: 169.06667vw;
  }
}
.section-countdown .copy p {
  font-size: 28px;
  font-style: normal;
  font-weight: 900;
  line-height: 130%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skewX(-5deg) rotate(-5deg);
  color: #fff;
}
.section-countdown .copy p.en {
  font-size: 32px;
  text-align: center;
  width: 100%;
  font-family: Anton;
}
@media screen and (max-width: 575px) {
  .section-countdown .copy p.en {
    font-size: 8.53333vw;
  }
}
@media screen and (max-width: 575px) {
  .section-countdown .copy p {
    font-size: 6.4vw;
  }
}
.section-countdown .section-title {
  position: relative;
  z-index: 10;
  margin-bottom: 28px;
}
@media screen and (max-width: 575px) {
  .section-countdown .section-title {
    margin-bottom: 7.46667vw;
  }
}

.count-time {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  /* 赤いテクスチャをタイル状に敷き詰める(640x128) */
  background-image: url(../img/bg-red.png);
  background-repeat: repeat;
  color: #000;
  font-family: "Anton", "Arial Narrow", arial, helvetica, sans-serif;
  line-height: 1;
  border: 1px solid #000;
  /* 左: 日数。単位も含めて大きく見せる */
  /* 右: 上段(時) / 下段(分・秒) の2段。左の残り幅を使う */
  /* 下段(分・秒)は上段より少し小さい */
}
.count-time span {
  display: block;
}
.count-time .count-time_left {
  flex: 0 0 228px;
  width: 228px;
  text-align: center;
}
.count-time .count-time_left .count-time_num {
  font-size: 175px;
}
.count-time .count-time_left .count-time_unit {
  font-size: 92px;
}
@media screen and (max-width: 575px) {
  .count-time .count-time_left {
    /* 幅の比率はそのまま。左が広がると右の数字が入らない */
    flex-basis: 46.53061%;
    width: 46.53061%;
  }
  .count-time .count-time_left .count-time_num {
    font-size: 36.53333vw;
  }
  .count-time .count-time_left .count-time_unit {
    font-size: 18.66667vw;
  }
}
.count-time .count-time_right {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}
.count-time .count-time_right::before {
  content: "";
  background: url(../img/icn-count-arrow.svg) no-repeat;
  width: 7px;
  height: 8px;
  position: absolute;
  top: 0;
  left: -3px;
  background-size: contain;
}
.count-time .count-time_right::after {
  content: "";
  background: url(../img/icn-count-arrow.svg) no-repeat;
  width: 7px;
  height: 8px;
  position: absolute;
  bottom: 0;
  left: -3px;
  transform: rotate(180deg);
  background-size: contain;
}
.count-time .count-time_right .count-time_item {
  padding: 16px 0;
}
@media screen and (max-width: 575px) {
  .count-time .count-time_right .count-time_item {
    padding: 3.73333vw 0;
  }
}
.count-time .count-time_right .count-time_item.secs {
  border-left: 1px solid #000;
  position: relative;
}
.count-time .count-time_right .count-time_item.secs::before {
  content: "";
  background: url(../img/icn-count-arrow.svg) no-repeat;
  width: 7px;
  height: 8px;
  position: absolute;
  top: 0;
  left: -4px;
  background-size: contain;
}
.count-time .count-time_right .count-time_item.secs::after {
  content: "";
  background: url(../img/icn-count-arrow.svg) no-repeat;
  width: 7px;
  height: 8px;
  position: absolute;
  bottom: 0;
  left: -4px;
  transform: rotate(180deg);
  background-size: contain;
}
.count-time .count-time_row {
  display: flex;
}
.count-time .count-time_row .count-time_item:first-child {
  border-left: 1px solid #000;
}
.count-time .count-time_row + .count-time_row .count-time_num {
  font-size: 83px;
}
@media screen and (max-width: 575px) {
  .count-time .count-time_row + .count-time_row .count-time_num {
    font-size: 14.93333vw;
  }
}
.count-time .count-time_item {
  width: 50%;
  text-align: center;
}
.count-time .count-time_item.hrs {
  display: flex;
  align-items: baseline;
  gap: 13px;
  width: 100%;
  justify-content: center;
  border-bottom: 1px solid #000;
  position: relative;
  /* JSTの表記。.hrs の子要素なので & を付けない */
}
@media screen and (max-width: 575px) {
  .count-time .count-time_item.hrs {
    gap: 3.46667vw;
  }
}
.count-time .count-time_item.hrs .zone {
  background: #000;
  color: #fff;
  position: absolute;
  width: 76px;
  font-size: 27px;
  font-weight: 700;
  padding: 6px 0;
  text-align: center;
  top: 0;
  right: 0;
  border-radius: 0 0 0 8px;
}
@media screen and (max-width: 575px) {
  .count-time .count-time_item.hrs .zone {
    width: 20.26667vw;
    font-size: 7.2vw;
    padding: 1.6vw 0;
    border-radius: 0 0 0 2.13333vw;
  }
}
.count-time .count-time_item.hrs::before, .count-time .count-time_item.hrs::after {
  content: "";
  background: url(../img/icn-count-arrow.svg) no-repeat;
  width: 7px;
  height: 8px;
  position: absolute;
  bottom: -4px;
  background-size: contain;
}
.count-time .count-time_item.hrs::before {
  left: 0;
  transform: rotate(-90deg);
}
.count-time .count-time_item.hrs::after {
  right: 0;
  transform: rotate(90deg);
}
.count-time .count-time_item.hrs .count-time_unit {
  font-size: 68px;
}
@media screen and (max-width: 575px) {
  .count-time .count-time_item.hrs .count-time_unit {
    font-size: 13.87755vw;
  }
}
.count-time .count-time_item.zone {
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.count-time .count-time_item.zone span {
  font-size: 88px;
  color: #fff;
}
@media screen and (max-width: 575px) {
  .count-time .count-time_item.zone span {
    font-size: 17.95918vw;
  }
}
.count-time .count-time_item .count-time_num {
  font-size: 105px;
}
.count-time .count-time_item .count-time_unit {
  font-size: 35px;
}
@media screen and (max-width: 575px) {
  .count-time .count-time_item .count-time_num {
    font-size: 21.42857vw;
  }
  .count-time .count-time_item .count-time_unit {
    font-size: 7.14286vw;
  }
}

/* COMING SOON の帯。時間の上下に置く(count-timeの外の兄弟要素) */
.count-time_marquee {
  overflow: hidden;
  width: 100%;
  padding: 5px 0;
  background: url(../img/kamofura.png);
  /* 同じ文字列を2セット並べ、1セットぶん(-50%)動かしてループさせる */
  /* 下の帯は逆向き(左から右)に流す */
}
@media screen and (max-width: 575px) {
  .count-time_marquee {
    height: 10.66667vw;
    padding: 1.33333vw 0;
  }
}
.count-time_marquee .count-time_track {
  display: flex;
  width: max-content;
  animation: count-time-flow 20s linear infinite;
}
.count-time_marquee.is_reverse .count-time_track {
  animation-direction: reverse;
}
.count-time_marquee .count-time_text {
  flex: 0 0 auto;
  font-family: "Anton", "Arial Narrow", arial, helvetica, sans-serif;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.758px;
  color: #000;
  white-space: nowrap;
}
@media screen and (max-width: 575px) {
  .count-time_marquee .count-time_text {
    font-size: 8.53333vw;
    line-height: 10.66667vw;
    letter-spacing: 0.20213vw;
  }
}

@keyframes count-time-flow {
  from {
    transform: translateX(0);
  }
  to {
    /* 2セットのうち1セットぶん進んだら先頭に戻る = 途切れない */
    transform: translateX(-50%);
  }
}
.section-about {
  background: url(../img/bg-about.png) no-repeat;
  background-size: cover;
  margin-top: -110px;
}
@media screen and (max-width: 575px) {
  .section-about {
    margin-top: -40vw;
    position: relative;
    z-index: -1;
  }
}
.section-about .section-title {
  padding-top: 170px;
  margin-bottom: 48px;
}
@media screen and (max-width: 575px) {
  .section-about .section-title {
    padding-top: 45.33333vw;
    margin-bottom: 12.8vw;
  }
}
.section-about .kaiju {
  margin-bottom: 48px;
}
@media screen and (max-width: 575px) {
  .section-about .kaiju {
    margin-bottom: 12.8vw;
  }
}
.section-about .kaiju li {
  text-align: center;
  position: relative;
  margin-bottom: 24px;
  /* SPのみ。英字ロゴは怪獣ごとに字数が違うので幅を個別に指定する
     上から モスラ / ラドン / キングギドラ / メカゴジラ */
}
@media screen and (max-width: 575px) {
  .section-about .kaiju li {
    margin-bottom: 6.4vw;
  }
}
.section-about .kaiju li:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 575px) {
  .section-about .kaiju li .back {
    margin: 0 auto;
  }
  .section-about .kaiju li .back img {
    display: block;
    width: 100%;
    height: auto;
  }
  .section-about .kaiju li:nth-child(1) .back {
    width: 46.4vw;
  }
  .section-about .kaiju li:nth-child(2) .back {
    width: 36.53333vw;
  }
  .section-about .kaiju li:nth-child(3) .back {
    width: 83.46667vw;
  }
  .section-about .kaiju li:nth-child(4) .back {
    width: 90.13333vw;
  }
}
.section-about .kaiju li .front {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: #000;
  font-weight: 900;
  line-height: 100%;
  letter-spacing: -0.306px;
}
@media screen and (max-width: 575px) {
  .section-about .kaiju li .front {
    font-size: 6.4vw;
    letter-spacing: -0.0816vw;
  }
}
.section-about h3 {
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
  line-height: 130%;
  /* 23.4px */
  letter-spacing: -0.196px;
  padding: 0 32px;
  color: #fff;
  margin-bottom: 44px;
}
@media screen and (max-width: 575px) {
  .section-about h3 {
    font-size: 4.8vw;
    letter-spacing: -0.05227vw;
    padding: 0 8.53333vw;
    margin-bottom: 11.73333vw;
  }
}
.section-about .charge {
  padding: 0 32px 155px;
}
@media screen and (max-width: 575px) {
  .section-about .charge {
    padding: 0 8.53333vw 41.33333vw;
  }
}

.section-about_2 {
  background: url(../img/bg-about_2.png) no-repeat;
  background-size: cover;
  margin-top: -120px;
}
@media screen and (max-width: 575px) {
  .section-about_2 {
    margin-top: -32vw;
  }
}
.section-about_2 .nagative {
  padding-top: 136px;
  /* 発火の監視用に js--anime を付けているだけなので、
     共通指定のフェード(opacity)は打ち消す */
  /* 画面に入ったら帯を左から開く */
}
.section-about_2 .nagative.js--anime {
  opacity: 1;
  transition: none;
}
.section-about_2 .nagative.is_shown .pont {
  clip-path: inset(0);
}
@media screen and (max-width: 575px) {
  .section-about_2 .nagative {
    padding-top: 36.26667vw;
  }
}
.section-about_2 .nagative .pont {
  background: url(../img/kamofura.png);
  text-align: center;
  width: 100%;
  padding: 15px 0;
  color: #000;
  font-weight: 900;
  font-size: 24px;
  line-height: 130%;
  transform: skewX(354deg) rotate(-5deg);
  margin-bottom: 22px;
  /* 英語版(/en)はAnton */
  /* 左から現れる。scaleX だと文字まで伸びて歪むので、
     帯は動かさず clip-path で見える範囲を広げる。
     clip-path で切ると本体が「見えていない」と判定されて
     発火しないため、監視は親の .nagative に付ける */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 300ms cubic-bezier(0, 0, 0.2, 1);
}
@media screen and (max-width: 575px) {
  .section-about_2 .nagative .pont {
    padding: 4vw 0;
    font-size: 6.4vw;
    margin-bottom: 5.86667vw;
  }
}
.is_en .section-about_2 .nagative .pont {
  font-family: "Anton", "Arial Narrow", arial, helvetica, sans-serif;
}
.section-about_2 .nagative h3 {
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 900;
  line-height: 160%;
  /* 38.4px */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 11%;
  text-underline-offset: 37%;
  text-underline-position: from-font;
  color: #fff;
}
@media screen and (max-width: 575px) {
  .section-about_2 .nagative h3 {
    font-size: 6.4vw;
    margin-bottom: 3.2vw;
  }
}
.section-about_2 .nagative h3 span {
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
  line-height: 160%;
}
@media screen and (max-width: 575px) {
  .section-about_2 .nagative h3 span {
    font-size: 4.8vw;
  }
}
.section-about_2 .nagative h3 span:last-child {
  /* 親h3のunderlineは子に継承される。
     text-decoration: none では消せないので、
     inline-block にして装飾の範囲から外す */
  display: inline-block;
  padding-top: 15px;
}
@media screen and (max-width: 575px) {
  .section-about_2 .nagative h3 span:last-child {
    padding-top: 4vw;
  }
}
.section-about_2 .nagative .one_godzira {
  width: 640px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  /* 監視用に js--anime を付けているだけなので、
     共通指定のフェード(opacity)は打ち消す */
  /* 2枚を同じ位置に重ねる。下が焼き付いた痕、上が本体 */
  /* 本体は右から。焼き付いた痕(500ms)が出きって、
     さらに0.25s置いてから始める(500 + 250 = 750ms) */
}
@media screen and (max-width: 575px) {
  .section-about_2 .nagative .one_godzira {
    width: 170.66667vw;
    margin-bottom: 8.8vw;
    margin-top: -10.66667vw;
  }
}
.section-about_2 .nagative .one_godzira.js--anime {
  opacity: 1;
  transition: none;
}
.section-about_2 .nagative .one_godzira img {
  display: block;
  width: 100%;
  height: auto;
}
.section-about_2 .nagative .one_godzira .one_godzira_burn {
  position: absolute;
  top: 0;
  left: 0;
  /* 暗い岩肌に焼き付いたように沈ませる。
     見た目を本体とはっきり変えるため強めに転ばせる */
  mix-blend-mode: color-dodge;
  filter: grayscale(1) contrast(1.4);
  opacity: 0.85;
  /* 左から入ってくる */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 500ms cubic-bezier(0, 0, 0.2, 1);
}
.section-about_2 .nagative .one_godzira .one_godzira_main {
  position: relative;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 300ms cubic-bezier(0, 0, 0.2, 1) 750ms;
}
.section-about_2 .nagative .one_godzira.is_shown .one_godzira_burn {
  clip-path: inset(0);
}
.section-about_2 .nagative .one_godzira.is_shown .one_godzira_main {
  clip-path: inset(0);
}
.section-about_2 .nagative .comment {
  color: #fff;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  margin-bottom: 32px;
}
@media screen and (max-width: 575px) {
  .section-about_2 .nagative .comment {
    font-size: 4.8vw;
    margin-bottom: 8.53333vw;
    margin-top: -13.33333vw;
  }
}
.section-about_2 .nagative small {
  font-size: 14px;
  padding-bottom: 48px;
  color: #ffff;
  display: block;
  padding: 0 17px 48px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.076px;
}
.section-about_2 .nagative small.en {
  text-align: center;
}
@media screen and (max-width: 575px) {
  .section-about_2 .nagative small {
    font-size: 3.2vw;
    padding-bottom: 0 4.53333vw 12.8vw;
  }
}

.section-how_to {
  background: url(../img/bg-how_to.png);
  padding: 48px 21px;
}
@media screen and (max-width: 575px) {
  .section-how_to {
    padding: 12.8vw 5.6vw;
  }
}
.section-how_to .section-title {
  margin-bottom: 48px;
}
@media screen and (max-width: 575px) {
  .section-how_to .section-title {
    margin-bottom: 12.8vw;
  }
}
.section-how_to .section-title h2,
.section-how_to .section-title p {
  color: #000;
}
.section-how_to .how_to {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #000;
}
.section-how_to .how_to_item {
  display: flex;
  align-items: flex-start;
}
.section-how_to .how_to_num {
  flex: 0 0 17.85714%;
  font-family: "Anton", "Arial Narrow", arial, helvetica, sans-serif;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.12px;
}
@media screen and (max-width: 575px) {
  .section-how_to .how_to_num {
    font-size: 8.53333vw;
    letter-spacing: 0.032vw;
  }
}
.section-how_to .how_to_body {
  flex: 1 1 auto;
  min-width: 0;
}
.section-how_to .how_to_title {
  margin: 0 0 3.57143%;
  font-weight: 900;
  font-size: 24px;
  line-height: 1.4;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
@media screen and (max-width: 575px) {
  .section-how_to .how_to_title {
    font-size: 6.4vw;
    text-underline-offset: 1.06667vw;
  }
}
.section-how_to .how_to_text {
  margin: 0;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  text-align: justify;
}
@media screen and (max-width: 575px) {
  .section-how_to .how_to_text {
    font-size: 4vw;
  }
}
.section-how_to .how_to_note {
  margin: 1.78571% 0 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.1px;
}
@media screen and (max-width: 575px) {
  .section-how_to .how_to_note {
    font-size: 3.2vw;
    letter-spacing: -0.02667vw;
  }
}
.section-how_to .how_to_line {
  margin: 5.35714% 0;
}
.section-how_to .how_to_line img {
  display: block;
  width: 100%;
  height: auto;
}

.section-schedule {
  background: url(../img/bg-schedule.png) no-repeat;
  box-sizing: border-box;
  padding: 24px;
  /* 枠は画像をやめてCSSで描く。高さが中身に追従するので
     日本語版・英語版で文章量が変わってもはみ出さない
     Figma(under/top)の2枚重ねを再現:
       under 343x1074 角丸32 … 下地。内側に影を落として縁の立体感を出す
       top   327x1058 角丸24 … その上に重ねるノイズの板(上下左右8px内側) */
}
@media screen and (max-width: 575px) {
  .section-schedule {
    padding: 6.4vw;
  }
}
.section-schedule .inner {
  width: 100%;
  box-sizing: border-box;
  /* Figmaは枠線ではなく塗りの板。borderを足すと内側が8pxからずれる */
  position: relative;
  padding: 8px;
  border-radius: 32px;
  background: #b1b1b1;
  /* 縁の落ち込み。内側の板に隠れないよう上に重ねる */
  /* 上に重ねるノイズの板 */
  /* phase 01 と phase 02 を分ける区切り線(394x24) */
  /* 英語版(/en)。日本語版より字数が多いぶん全体を小さくする
     Figma実測: ラベル18 / 期間24 / 発表32 / 注釈15 */
}
.section-schedule .inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 12px 2px #3a3a3a;
}
.section-schedule .inner .inner_body {
  box-sizing: border-box;
  padding: 40px 16px;
  border-radius: 24px;
  /* 素材が2倍解像度なので半分に縮めて等倍の粒に戻す */
  background: #696969 url(../img/noise-tile.png);
  background-size: 128px 128px;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.85) inset;
}
@media screen and (max-width: 575px) {
  .section-schedule .inner .inner_body {
    padding: 10.66667vw 4.26667vw;
  }
}
@media screen and (max-width: 575px) {
  .section-schedule .inner {
    padding: 2.13333vw;
    border-radius: 8.53333vw;
  }
  .section-schedule .inner .inner_body {
    border-radius: 6.4vw;
  }
}
.section-schedule .inner .section-title {
  margin-bottom: 32px;
}
@media screen and (max-width: 575px) {
  .section-schedule .inner .section-title {
    margin-bottom: 8.53333vw;
  }
}
.section-schedule .inner .section-title h2,
.section-schedule .inner .section-title p {
  text-shadow: -1.306px 0 #00f6ff, 1.306px 0 #ff00a6;
}
.section-schedule .inner .schedule_phase {
  margin: 0 0 16px;
  font-family: "Anton", "Arial Narrow", arial, helvetica, sans-serif;
  text-transform: uppercase;
  font-size: 32px;
  line-height: 1;
  color: #fff;
}
@media screen and (max-width: 575px) {
  .section-schedule .inner .schedule_phase {
    font-size: 8.53333vw;
  }
}
.section-schedule .inner .schedule_block {
  text-align: center;
  color: #fff;
  /* ブロック下の下向き矢印。注釈との間隔を取る */
}
.section-schedule .inner .schedule_block + .schedule_block {
  margin-top: 24px;
}
@media screen and (max-width: 575px) {
  .section-schedule .inner .schedule_block + .schedule_block {
    margin-top: 6.4vw;
  }
}
.section-schedule .inner .schedule_block svg {
  display: block;
  margin: 24px auto 0;
}
@media screen and (max-width: 575px) {
  .section-schedule .inner .schedule_block svg {
    margin-top: 6.4vw;
  }
}
.section-schedule .inner figure {
  margin: 40px 0;
}
@media screen and (max-width: 575px) {
  .section-schedule .inner figure {
    margin: 10.66667vw 0;
  }
}
.section-schedule .inner figure img {
  display: block;
  width: 100%;
  height: auto;
}
.section-schedule .inner .schedule_label {
  margin: 0 0 16px;
  padding: 15px 0;
  border: 1px solid #fff;
  font-weight: 900;
  font-size: 24px;
  line-height: 1;
  /* 中間発表・最終結果発表は白背景に反転させる */
}
@media screen and (max-width: 575px) {
  .section-schedule .inner .schedule_label {
    margin-bottom: 4.26667vw;
    padding: 4vw 0;
  }
}
.section-schedule .inner .schedule_label.is_fill {
  background: #fff;
  color: #616161;
}
@media screen and (max-width: 575px) {
  .section-schedule .inner .schedule_label {
    font-size: 6.4vw;
  }
}
.section-schedule .inner .schedule_date {
  margin: 0 0 8px;
  font-weight: 900;
  font-size: 31px;
  line-height: 1.3;
  /* 曜日は括弧ごと小さく。
     和文はベースラインより下に出るため、baseline揃えだと
     小さい方が上に浮く。下端が揃うぶんだけ下げる */
  /* 発表日は期間より大きい */
}
.section-schedule .inner .schedule_date span {
  position: relative;
  top: 0.09em;
  vertical-align: baseline;
  font-size: 20px;
}
@media screen and (max-width: 575px) {
  .section-schedule .inner .schedule_date span {
    font-size: 5.33333vw;
  }
}
.section-schedule .inner .schedule_date.is_lg {
  font-size: 47px;
}
.section-schedule .inner .schedule_date.is_lg span {
  font-size: 24px;
}
@media screen and (max-width: 575px) {
  .section-schedule .inner .schedule_date.is_lg span {
    font-size: 6.4vw;
  }
}
@media screen and (max-width: 575px) {
  .section-schedule .inner .schedule_date {
    font-size: 8.26667vw;
  }
  .section-schedule .inner .schedule_date.is_lg {
    font-size: 12.53333vw;
  }
}
.section-schedule .inner .schedule_note {
  margin: 0;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
@media screen and (max-width: 575px) {
  .section-schedule .inner .schedule_note {
    font-size: 4.26667vw;
  }
}
.section-schedule .inner .schedule_jst {
  font-size: 12px;
  margin-top: 30px;
}
@media screen and (max-width: 575px) {
  .section-schedule .inner .schedule_jst {
    font-size: 3.2vw;
    margin-top: 8vw;
  }
}
.section-schedule .inner.en {
  /* 英語版はラベル・日付・注釈とも Zen Kaku Gothic New。
     Anton は phase 01/02 の見出しだけに残す */
}
.section-schedule .inner.en .schedule_phase {
  font-size: 24px;
}
@media screen and (max-width: 575px) {
  .section-schedule .inner.en .schedule_phase {
    font-size: 6.4vw;
  }
}
.section-schedule .inner.en .schedule_label,
.section-schedule .inner.en .schedule_date {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "游ゴシック体", "Yu Gothic", YuGothic, "MS P Gothic", "ＭＳ Ｐゴシック", arial, helvetica, sans-serif;
  font-weight: 900;
}
.section-schedule .inner.en .schedule_note,
.section-schedule .inner.en .schedule_jst {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "游ゴシック体", "Yu Gothic", YuGothic, "MS P Gothic", "ＭＳ Ｐゴシック", arial, helvetica, sans-serif;
  font-weight: 700;
}
.section-schedule .inner.en .schedule_label {
  font-size: 18px;
}
@media screen and (max-width: 575px) {
  .section-schedule .inner.en .schedule_label {
    font-size: 4.8vw;
  }
}
.section-schedule .inner.en .schedule_date {
  font-size: 24px;
}
.section-schedule .inner.en .schedule_date.is_lg {
  font-size: 32px;
}
@media screen and (max-width: 575px) {
  .section-schedule .inner.en .schedule_date {
    font-size: 6.4vw;
  }
  .section-schedule .inner.en .schedule_date.is_lg {
    font-size: 8.53333vw;
  }
}
.section-schedule .inner.en .schedule_note {
  font-size: 15px;
}
@media screen and (max-width: 575px) {
  .section-schedule .inner.en .schedule_note {
    font-size: 4vw;
  }
}

.pc_only {
  display: block !important;
}

.sp_only {
  display: none !important;
}

@media screen and (max-width: 575px) {
  .sp_only {
    display: block !important;
  }

  .pc_only {
    display: none !important;
  }
}