/* ------------------------------------
  reset
------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500&display=swap");
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

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

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

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

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input[type=text], input[type=tel], input[type=email], input[type=url], textarea {
  vertical-align: middle;
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  resize: none;
  border-radius: 0;
}

input[type=radio], select, input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ------------------------------------
  scss
------------------------------------ */
/* ------------------------------------
  common
------------------------------------ */
html, body {
  width: 100%;
  height: auto;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0em;
  color: #fff;
  background-color: #000000;
  position: relative;
  z-index: 1;
  -webkit-text-size-adjust: 100%;
  -webkit-overscroll-behavior: none;
  -ms-scroll-chaining: none;
  overscroll-behavior: none;
  overflow: -moz-scrollbars-none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body .hidden {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

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

body a:hover {
  text-decoration: none;
}

body li {
  list-style-type: none;
}

body h1, body h2, body h3, body h4 {
  font-weight: 500;
}

body img, body svg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

::-moz-selection {
  color: #000000;
  background-color: #fff;
}

::selection {
  color: #000000;
  background-color: #fff;
}

/* #load */
#load {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #000000;
}

/* #modal_video */
#modal_video {
  width: 100%;
  height: 100svh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 888;
  background-color: rgba(0, 0, 0, 0.85);
}

#modal_video .video {
  aspect-ratio: 16 / 9;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  border: 1px #FF0000 solid;
}

#modal_video .video iframe {
  width: 100%;
  height: 100%;
}

#modal_video .btn_close {
  position: absolute;
  z-index: 10;
  border: 1px #FF0000 solid;
}

#modal_video .btn_close a {
  display: block;
}

#modal_video .btn_close a:before, #modal_video .btn_close a:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  background: #FF0000;
}

#modal_video .btn_close a:before {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}

#modal_video .btn_close a:after {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg);
}

#modal_video .area_close {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* #modal */
#modal {
  width: 100%;
  height: 100svh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 888;
  background-color: rgba(0, 0, 0, 0.85);
  display: none;
}

#modal:before {
  content: "";
  border: 1px #FF0000 solid;
  pointer-events: none;
}

#modal .inner:before {
  content: "";
  width: 100%;
  height: 4rem;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0)), to(black));
  background: linear-gradient(360deg, rgba(0, 0, 0, 0) 0%, black 100%);
  position: absolute;
  top: -1px;
  left: 0;
  z-index: 5;
}

#modal .inner:after {
  content: "";
  width: 100%;
  height: 4rem;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(black));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, black 100%);
  position: absolute;
  bottom: -1px;
  left: 0;
  z-index: 5;
}

#modal .inner .sc {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

#modal .inner .sc .block {
  display: none;
}

#modal .btn_close {
  position: absolute;
  z-index: 10;
  border: 1px #FF0000 solid;
}

#modal .btn_close a {
  display: block;
}

#modal .btn_close a:before, #modal .btn_close a:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  background: #FF0000;
}

#modal .btn_close a:before {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}

#modal .btn_close a:after {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg);
}

#modal .area_close {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* ------------------------------------
  animation
------------------------------------ */
.tra_1 {
  -webkit-transition: all 100ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
  transition: all 100ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
}

.tra_1_b {
  -webkit-transition: all 100ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
  transition: all 100ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
}

.tra_1_l {
  -webkit-transition: all 100ms linear;
  transition: all 100ms linear;
}

.tra_1_img {
  -webkit-transition: all 100ms linear 800ms;
  transition: all 100ms linear 800ms;
}

.tra_1_img:hover {
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
}

.tra_2 {
  -webkit-transition: all 200ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
  transition: all 200ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
}

.tra_2_b {
  -webkit-transition: all 200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
  transition: all 200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
}

.tra_2_l {
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.tra_2_img {
  -webkit-transition: all 200ms linear 800ms;
  transition: all 200ms linear 800ms;
}

.tra_2_img:hover {
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
}

.tra_3 {
  -webkit-transition: all 300ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
  transition: all 300ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
}

.tra_3_b {
  -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
  transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
}

.tra_3_l {
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.tra_3_img {
  -webkit-transition: all 300ms linear 800ms;
  transition: all 300ms linear 800ms;
}

.tra_3_img:hover {
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
}

.tra_4 {
  -webkit-transition: all 400ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
  transition: all 400ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
}

.tra_4_b {
  -webkit-transition: all 400ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
  transition: all 400ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
}

.tra_4_l {
  -webkit-transition: all 400ms linear;
  transition: all 400ms linear;
}

.tra_4_img {
  -webkit-transition: all 400ms linear 800ms;
  transition: all 400ms linear 800ms;
}

.tra_4_img:hover {
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
}

.tra_5 {
  -webkit-transition: all 500ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
  transition: all 500ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
}

.tra_5_b {
  -webkit-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
  transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
}

.tra_5_l {
  -webkit-transition: all 500ms linear;
  transition: all 500ms linear;
}

.tra_5_img {
  -webkit-transition: all 500ms linear 800ms;
  transition: all 500ms linear 800ms;
}

.tra_5_img:hover {
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
}

.tra_6 {
  -webkit-transition: all 600ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
  transition: all 600ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
}

.tra_6_b {
  -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
  transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
}

.tra_6_l {
  -webkit-transition: all 600ms linear;
  transition: all 600ms linear;
}

.tra_6_img {
  -webkit-transition: all 600ms linear 800ms;
  transition: all 600ms linear 800ms;
}

.tra_6_img:hover {
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
}

.tra_7 {
  -webkit-transition: all 700ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
  transition: all 700ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
}

.tra_7_b {
  -webkit-transition: all 700ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
  transition: all 700ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
}

.tra_7_l {
  -webkit-transition: all 700ms linear;
  transition: all 700ms linear;
}

.tra_7_img {
  -webkit-transition: all 700ms linear 800ms;
  transition: all 700ms linear 800ms;
}

.tra_7_img:hover {
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
}

.tra_8 {
  -webkit-transition: all 800ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
  transition: all 800ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
}

.tra_8_b {
  -webkit-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
  transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
}

.tra_8_l {
  -webkit-transition: all 800ms linear;
  transition: all 800ms linear;
}

.tra_8_img {
  -webkit-transition: all 800ms linear 800ms;
  transition: all 800ms linear 800ms;
}

.tra_8_img:hover {
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
}

.tra_9 {
  -webkit-transition: all 900ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
  transition: all 900ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
}

.tra_9_b {
  -webkit-transition: all 900ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
  transition: all 900ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
}

.tra_9_l {
  -webkit-transition: all 900ms linear;
  transition: all 900ms linear;
}

.tra_9_img {
  -webkit-transition: all 900ms linear 800ms;
  transition: all 900ms linear 800ms;
}

.tra_9_img:hover {
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
}

.tra_10 {
  -webkit-transition: all 1000ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
  transition: all 1000ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
}

.tra_10_b {
  -webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
  transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
}

.tra_10_l {
  -webkit-transition: all 1000ms linear;
  transition: all 1000ms linear;
}

.tra_10_img {
  -webkit-transition: all 1000ms linear 800ms;
  transition: all 1000ms linear 800ms;
}

.tra_10_img:hover {
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
}

.tra_11 {
  -webkit-transition: all 1100ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
  transition: all 1100ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
}

.tra_11_b {
  -webkit-transition: all 1100ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
  transition: all 1100ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
}

.tra_11_l {
  -webkit-transition: all 1100ms linear;
  transition: all 1100ms linear;
}

.tra_11_img {
  -webkit-transition: all 1100ms linear 800ms;
  transition: all 1100ms linear 800ms;
}

.tra_11_img:hover {
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
}

.tra_12 {
  -webkit-transition: all 1200ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
  transition: all 1200ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
}

.tra_12_b {
  -webkit-transition: all 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
  transition: all 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
}

.tra_12_l {
  -webkit-transition: all 1200ms linear;
  transition: all 1200ms linear;
}

.tra_12_img {
  -webkit-transition: all 1200ms linear 800ms;
  transition: all 1200ms linear 800ms;
}

.tra_12_img:hover {
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
}

.tra_13 {
  -webkit-transition: all 1300ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
  transition: all 1300ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
}

.tra_13_b {
  -webkit-transition: all 1300ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
  transition: all 1300ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
}

.tra_13_l {
  -webkit-transition: all 1300ms linear;
  transition: all 1300ms linear;
}

.tra_13_img {
  -webkit-transition: all 1300ms linear 800ms;
  transition: all 1300ms linear 800ms;
}

.tra_13_img:hover {
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
}

.tra_14 {
  -webkit-transition: all 1400ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
  transition: all 1400ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
}

.tra_14_b {
  -webkit-transition: all 1400ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
  transition: all 1400ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
}

.tra_14_l {
  -webkit-transition: all 1400ms linear;
  transition: all 1400ms linear;
}

.tra_14_img {
  -webkit-transition: all 1400ms linear 800ms;
  transition: all 1400ms linear 800ms;
}

.tra_14_img:hover {
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
}

.tra_15 {
  -webkit-transition: all 1500ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
  transition: all 1500ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
}

.tra_15_b {
  -webkit-transition: all 1500ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
  transition: all 1500ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
}

.tra_15_l {
  -webkit-transition: all 1500ms linear;
  transition: all 1500ms linear;
}

.tra_15_img {
  -webkit-transition: all 1500ms linear 800ms;
  transition: all 1500ms linear 800ms;
}

.tra_15_img:hover {
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
}

.tra_16 {
  -webkit-transition: all 1600ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
  transition: all 1600ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
}

.tra_16_b {
  -webkit-transition: all 1600ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
  transition: all 1600ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
}

.tra_16_l {
  -webkit-transition: all 1600ms linear;
  transition: all 1600ms linear;
}

.tra_16_img {
  -webkit-transition: all 1600ms linear 800ms;
  transition: all 1600ms linear 800ms;
}

.tra_16_img:hover {
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
}

.tra_17 {
  -webkit-transition: all 1700ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
  transition: all 1700ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
}

.tra_17_b {
  -webkit-transition: all 1700ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
  transition: all 1700ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
}

.tra_17_l {
  -webkit-transition: all 1700ms linear;
  transition: all 1700ms linear;
}

.tra_17_img {
  -webkit-transition: all 1700ms linear 800ms;
  transition: all 1700ms linear 800ms;
}

.tra_17_img:hover {
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
}

.tra_18 {
  -webkit-transition: all 1800ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
  transition: all 1800ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
}

.tra_18_b {
  -webkit-transition: all 1800ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
  transition: all 1800ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
}

.tra_18_l {
  -webkit-transition: all 1800ms linear;
  transition: all 1800ms linear;
}

.tra_18_img {
  -webkit-transition: all 1800ms linear 800ms;
  transition: all 1800ms linear 800ms;
}

.tra_18_img:hover {
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
}

.tra_19 {
  -webkit-transition: all 1900ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
  transition: all 1900ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
}

.tra_19_b {
  -webkit-transition: all 1900ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
  transition: all 1900ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
}

.tra_19_l {
  -webkit-transition: all 1900ms linear;
  transition: all 1900ms linear;
}

.tra_19_img {
  -webkit-transition: all 1900ms linear 800ms;
  transition: all 1900ms linear 800ms;
}

.tra_19_img:hover {
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
}

.tra_20 {
  -webkit-transition: all 2000ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
  transition: all 2000ms cubic-bezier(0.18, 1.01, 0.29, 1.04), opacity 300ms linear;
}

.tra_20_b {
  -webkit-transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
  transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1), opacity 300ms linear;
}

.tra_20_l {
  -webkit-transition: all 2000ms linear;
  transition: all 2000ms linear;
}

.tra_20_img {
  -webkit-transition: all 2000ms linear 800ms;
  transition: all 2000ms linear 800ms;
}

.tra_20_img:hover {
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
}

.on .delay_1,
.on.delay_1 {
  -webkit-transition-delay: 100ms;
  transition-delay: 100ms;
}

.on .delay_2,
.on.delay_2 {
  -webkit-transition-delay: 200ms;
  transition-delay: 200ms;
}

.on .delay_3,
.on.delay_3 {
  -webkit-transition-delay: 300ms;
  transition-delay: 300ms;
}

.on .delay_4,
.on.delay_4 {
  -webkit-transition-delay: 400ms;
  transition-delay: 400ms;
}

.on .delay_5,
.on.delay_5 {
  -webkit-transition-delay: 500ms;
  transition-delay: 500ms;
}

.on .delay_6,
.on.delay_6 {
  -webkit-transition-delay: 600ms;
  transition-delay: 600ms;
}

.on .delay_7,
.on.delay_7 {
  -webkit-transition-delay: 700ms;
  transition-delay: 700ms;
}

.on .delay_8,
.on.delay_8 {
  -webkit-transition-delay: 800ms;
  transition-delay: 800ms;
}

.on .delay_9,
.on.delay_9 {
  -webkit-transition-delay: 900ms;
  transition-delay: 900ms;
}

.on .delay_10,
.on.delay_10 {
  -webkit-transition-delay: 1000ms;
  transition-delay: 1000ms;
}

.on .delay_11,
.on.delay_11 {
  -webkit-transition-delay: 1100ms;
  transition-delay: 1100ms;
}

.on .delay_12,
.on.delay_12 {
  -webkit-transition-delay: 1200ms;
  transition-delay: 1200ms;
}

.on .delay_13,
.on.delay_13 {
  -webkit-transition-delay: 1300ms;
  transition-delay: 1300ms;
}

.on .delay_14,
.on.delay_14 {
  -webkit-transition-delay: 1400ms;
  transition-delay: 1400ms;
}

.on .delay_15,
.on.delay_15 {
  -webkit-transition-delay: 1500ms;
  transition-delay: 1500ms;
}

.on .delay_16,
.on.delay_16 {
  -webkit-transition-delay: 1600ms;
  transition-delay: 1600ms;
}

.on .delay_17,
.on.delay_17 {
  -webkit-transition-delay: 1700ms;
  transition-delay: 1700ms;
}

.on .delay_18,
.on.delay_18 {
  -webkit-transition-delay: 1800ms;
  transition-delay: 1800ms;
}

.on .delay_19,
.on.delay_19 {
  -webkit-transition-delay: 1900ms;
  transition-delay: 1900ms;
}

.on .delay_20,
.on.delay_20 {
  -webkit-transition-delay: 2000ms;
  transition-delay: 2000ms;
}

/* ------------------------------------
  pc
------------------------------------ */
@media screen and (min-width: 768px) and (max-width: 960px) {
  html {
    font-size: 13px;
    font-size: 0.9vw;
  }
}

@media screen and (min-width: 768px) and (min-width: 961px) and (max-width: 1080px) {
  html {
    font-size: 12px;
    font-size: 0.83vw;
  }
}

@media screen and (min-width: 768px) and (min-width: 1081px) and (max-width: 1440px) {
  html {
    font-size: 10px;
  }
}

@media screen and (min-width: 768px) and (min-width: 1441px) {
  html {
    font-size: 10px;
    font-size: 0.69vw;
  }
}

@media screen and (min-width: 768px) {
  html body {
    font-size: 1rem;
    line-height: 1;
  }
  /* debug */
  body.debug:before,
  body.debug:after {
    content: "";
    width: 1px;
    height: 100%;
    background-color: red;
    position: fixed;
    top: 0;
    z-index: 900;
  }
  body.debug:before {
    left: 5.56%;
  }
  body.debug:after {
    right: 5.56%;
  }
  /* common */
  .forpc {
    display: block;
  }
  .forsp {
    display: none !important;
  }
  .hover_opacity:hover {
    opacity: 0.7;
  }
  .hover_bri:hover {
    -webkit-filter: brightness(0.9);
    filter: brightness(0.9);
  }
  .c_width {
    width: 87.08%;
    margin: 0 auto;
    position: relative;
  }
  /* #wrapper */
  #wrapper {
    width: 100%;
    position: relative;
    z-index: 1;
  }
  /* #header */
  #header {
    position: fixed;
    top: 25.9%;
    right: 2.3%;
    z-index: 500;
  }
  #header .menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
  #header .menu li {
    height: 0.96rem;
    margin-bottom: 2.7rem;
  }
  #header .menu li img {
    width: auto;
    height: 100%;
  }
  #header .menu li:last-child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-column-gap: 1.2rem;
    -moz-column-gap: 1.2rem;
    column-gap: 1.2rem;
  }
  #header .menu li:last-child .news {
    height: 0.73rem;
  }
  #header .menu li:last-child a img {
    height: 1.2rem;
  }
  /* #content */
  #content {
    width: 100%;
    position: relative;
    z-index: 10;
    /* #teaser */
    /* #main */
  }
  #content #teaser {
    width: 100%;
    height: 100vh;
    background-image: url(../img/pic-teaser_pc.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
  }
  #content #teaser .logo {
    width: 42.4rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -5.3rem 0 0 -21.2rem;
  }
  #content #teaser .date {
    width: 31rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 15.1rem 0 0 -15.5rem;
  }
  #content #main {
    width: 100%;
    height: 100vh;
    background-image: url(../img/pic-main_bg_pc.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
  }
  #content #main .logo {
    width: 100%;
    height: 59.75%;
    position: absolute;
    top: 23%;
    left: 0;
  }
}

@media screen and (min-width: 768px) and (max-width: 1080px) {
  #content #main .logo {
    height: 49.38%;
  }
}

@media screen and (min-width: 768px) {
  #content #main .logo img {
    width: auto;
    height: 100%;
    margin: 0 auto;
  }
  #content #main .date {
    width: 100%;
    height: 5.93%;
    position: absolute;
    bottom: 5.2%;
    left: 0;
  }
}

@media screen and (min-width: 768px) and (max-width: 1080px) {
  #content #main .date {
    height: 4.94%;
  }
}

@media screen and (min-width: 768px) {
  #content #main .date img {
    width: auto;
    height: 100%;
    margin: 0 auto;
  }
  #content #main .award {
    width: 19.1rem;
    position: absolute;
    top: 3.7%;
    left: 2.3%;
  }
  #content #main .ticket {
    width: 11rem;
    position: absolute;
    bottom: 2%;
    right: 1.3%;
    border-radius: 4px 4px;
    overflow: hidden;
  }
  /* #modal_video */
  #modal_video .video {
    width: 65%;
  }
  #modal_video .btn_close {
    top: -38px;
    right: -38px;
  }
  #modal_video .btn_close a {
    width: 36px;
    height: 36px;
  }
  #modal_video .btn_close a:before, #modal_video .btn_close a:after {
    height: 50px;
  }
  /* #modal */
  #modal:before {
    width: 71.25%;
    height: 71.23%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 20;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
  }
  #modal .inner {
    width: 71.25%;
    height: 71.23%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
  }
  #modal .inner .block {
    width: 66.67%;
    margin: 0 auto;
    padding: 7rem 0 7rem;
  }
  #modal .inner .block h2 {
    height: 1rem;
    margin-bottom: 4.2rem;
  }
  #modal .inner .block h2 img {
    width: auto;
    height: 100%;
  }
  #modal .inner .block h3.copy {
    width: 90.91%;
    font-size: 2.4rem;
    line-height: 2.08;
    letter-spacing: 0.1em;
    margin-bottom: 4.1rem;
    -webkit-transform: scaleX(1.1);
    transform: scaleX(1.1);
    -webkit-transform-origin: left top;
    transform-origin: left top;
  }
  #modal .inner .block h3.copy span {
    display: inline-block;
    margin-left: -1.1rem;
  }
  #modal .inner .block h3.name {
    font-size: 2.4rem;
    line-height: 2.08;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    -webkit-transform: scaleX(1.1);
    transform: scaleX(1.1);
    -webkit-transform-origin: left top;
    transform-origin: left top;
  }
  #modal .inner .block h3.name span {
    font-size: 1.6rem;
    margin-left: 0.5rem;
  }
  #modal .inner .block.comment h3.name {
    margin-bottom: 0rem;
    margin-top: 0.5rem;
  }
}

@media screen and (min-width: 768px) and (max-width: 1440px) {
  #modal .inner .block.story .copy .forsp {
    display: block !important;
  }
}

@media screen and (min-width: 768px) and (min-width: 1441px) {
  #modal .inner .block.story .copy {
    letter-spacing: 0.05em;
  }
}

@media screen and (min-width: 768px) {
  #modal .inner .block p {
    width: 90.91%;
    font-size: 1.6rem;
    line-height: 2.31;
    letter-spacing: 0.1em;
    -webkit-transform: scaleX(1.1);
    transform: scaleX(1.1);
    -webkit-transform-origin: left top;
    transform-origin: left top;
  }
  #modal .inner .block p.center {
    text-align: center;
    margin-bottom: 1rem;
  }
  #modal .inner .block p.profile {
    font-size: 1.25rem;
    line-height: 2;
  }
  #modal .inner .block p.txt {
    font-size: 1.25rem;
    line-height: 2;
  }
  #modal .inner .block .pic {
    margin: 2rem 0;
  }
  #modal .inner .block .pic.btm {
    margin-bottom: 0;
  }
  #modal .inner .block .video {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 auto 4rem;
  }
  #modal .inner .block .video iframe {
    width: 100%;
    height: 100%;
  }
  #modal .inner .block .video.btm {
    margin-bottom: 0;
  }
  #modal .inner .block .list li {
    margin-bottom: 6rem;
  }
  #modal .inner .block .list li:last-child {
    margin-bottom: 2rem;
  }
  #modal .inner .block .list .pic {
    margin-top: 0;
  }
  #modal .btn_close {
    top: -38px;
    right: -38px;
  }
  #modal .btn_close a {
    width: 36px;
    height: 36px;
  }
  #modal .btn_close a:before, #modal .btn_close a:after {
    height: 50px;
  }
}

/* ------------------------------------
  sp
------------------------------------ */
@media screen and (max-width: 767px) and (min-width: 390px) {
  html {
    font-size: 10px;
    font-size: 2.56vw;
  }
}

@media screen and (max-width: 767px) and (max-width: 391px) {
  html {
    font-size: 10px;
    font-size: 2.56vw;
  }
}

@media screen and (max-width: 767px) {
  html body {
    font-size: 1rem;
    line-height: 1;
  }
  /* debug */
  body.debug:before,
  body.debug:after {
    content: "";
    width: 1px;
    height: 100%;
    background-color: red;
    position: fixed;
    top: 0;
    z-index: 999;
  }
  body.debug:before {
    left: 5.13%;
  }
  body.debug:after {
    right: 5.13%;
  }
  /* common */
  .forpc {
    display: none !important;
  }
  .forsp {
    display: block;
  }
  .c_width {
    width: 78.21%;
    margin: 0 auto;
    position: relative;
  }
  /* #wrapper */
  #wrapper {
    width: 100%;
    position: relative;
    z-index: 1;
  }
  /* #header */
  #header {
    position: fixed;
    top: 12.2%;
    right: 5.13%;
    z-index: 500;
  }
  #header .menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    margin-top: -0.5rem;
  }
  #header .menu li {
    margin-bottom: 1.05rem;
  }
  #header .menu li a {
    display: inline-block;
  }
  #header .menu li img {
    width: auto;
    height: 0.75rem;
    padding: 0.5rem 0;
  }
  #header .menu li:last-child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-column-gap: 1.2rem;
    -moz-column-gap: 1.2rem;
    column-gap: 1.2rem;
  }
  #header .menu li:last-child .news {
    height: 0.55rem;
  }
  #header .menu li:last-child a img {
    height: 0.9rem;
  }
  /* #content */
  #content {
    width: 100%;
    position: relative;
    z-index: 10;
    /* #teaser */
    /* #main */
  }
  #content #teaser {
    width: 100%;
    height: 100svh;
    background-image: url(../img/pic-teaser_sp.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
  }
  #content #teaser .logo {
    width: 26.4rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -23.2rem 0 0 -13.2rem;
  }
  #content #teaser .date {
    width: 18rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0.3rem 0 0 -9rem;
  }
  #content #main {
    width: 100%;
    height: 100svh;
    background-image: url(../img/pic-main_bg_sp.webp);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
    position: relative;
  }
  #content #main .logo {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -3.9rem;
  }
  #content #main .logo img {
    width: 81.5%;
    margin: 0 auto;
  }
  #content #main .date {
    width: 12.1rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 23.4rem 0 0 -6.05rem;
  }
  #content #main .award {
    width: 11.4rem;
    position: absolute;
    top: 4%;
    left: 4.3%;
  }
  #content #main .ticket {
    width: 10rem;
    position: absolute;
    bottom: 2%;
    right: 2.56%;
    border-radius: 2px 2px;
    overflow: hidden;
  }
  /* #modal_video */
  #modal_video .video {
    width: 96.92%;
  }
  #modal_video .btn_close {
    top: 26px;
    right: 23px;
  }
  #modal_video .btn_close a {
    width: 32px;
    height: 32px;
  }
  #modal_video .btn_close a:before, #modal_video .btn_close a:after {
    height: 45px;
  }
  /* #modal */
  #modal:before {
    width: 96.92%;
    height: 77.68%;
    position: absolute;
    top: 85px;
    left: 50%;
    z-index: 20;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
  #modal .inner {
    width: 96.92%;
    height: 77.68%;
    position: absolute;
    top: 85px;
    left: 50%;
    z-index: 10;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
  #modal .inner .block {
    width: 91.01%;
    margin: 0 auto;
    padding: 5.5rem 0 5.5rem;
  }
  #modal .inner .block h2 {
    height: 0.7rem;
    margin-bottom: 4.5rem;
  }
  #modal .inner .block h2 img {
    width: auto;
    height: 100%;
  }
  #modal .inner .block h3.copy {
    width: 100%;
    font-size: 1.7rem;
    line-height: 1.94;
    letter-spacing: 0.05em;
    margin-bottom: 4.5rem;
    -webkit-transform: scaleX(1.1);
    transform: scaleX(1.1);
    -webkit-transform-origin: left top;
    transform-origin: left top;
  }
  #modal .inner .block h3.copy span {
    display: inline-block;
    margin-left: -0.7rem;
  }
  #modal .inner .block h3.name {
    font-size: 1.7rem;
    line-height: 1.94;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    -webkit-transform: scaleX(1.1);
    transform: scaleX(1.1);
    -webkit-transform-origin: left top;
    transform-origin: left top;
  }
  #modal .inner .block h3.name span {
    font-size: 1.25rem;
    margin-left: 0.5rem;
  }
  #modal .inner .block.comment h3.name {
    margin-bottom: 0rem;
    margin-top: 1rem;
  }
  #modal .inner .block.story .copy {
    letter-spacing: 0.06em;
  }
  #modal .inner .block p {
    width: 90.91%;
    font-size: 1.25rem;
    line-height: 1.96;
    letter-spacing: 0.05em;
    -webkit-transform: scaleX(1.1);
    transform: scaleX(1.1);
    -webkit-transform-origin: left top;
    transform-origin: left top;
  }
  #modal .inner .block p.center {
    text-align: center;
    margin-bottom: 1.3rem;
  }
  #modal .inner .block p.btm {
    margin-bottom: 0;
  }
  #modal .inner .block p.profile {
    font-size: 1rem;
  }
  #modal .inner .block p.txt {
    font-size: 1rem;
  }
  #modal .inner .block .pic {
    width: 100%;
    margin: 2.7rem auto;
  }
  #modal .inner .block .pic.small {
    width: 86.34%;
  }
  #modal .inner .block .pic.btm {
    width: 100%;
    margin-bottom: 0;
  }
  #modal .inner .block .video {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 auto 5.4rem;
  }
  #modal .inner .block .video iframe {
    width: 100%;
    height: 100%;
  }
  #modal .inner .block .video.btm {
    margin-bottom: 0;
  }
  #modal .inner .block .list li {
    margin-bottom: 5.4rem;
  }
  #modal .inner .block .list li:last-child {
    margin-bottom: 2rem;
  }
  #modal .inner .block .list .pic {
    margin-top: 0;
  }
  #modal .btn_close {
    top: 26px;
    right: 23px;
  }
  #modal .btn_close a {
    width: 32px;
    height: 32px;
  }
  #modal .btn_close a:before, #modal .btn_close a:after {
    height: 45px;
  }
}