html, body {
  height: 100%;
}

html {
  font-size: 62.5%;
}

body {
  margin: 0;
  padding: 0;
  background: #FFF;
  font-family: sans-serif;
}

p, h1, h2, h3, h4, h5, h6, ul, ol, dl, dt, dd, div, section, li, table, th, td, tr, form, iframe, span, strong {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  vertical-align: bottom;
}

li {
  list-style-type: none;
}

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

a {
  text-decoration: none;
}

.pc_hidden {
  display: none;
}

.sp_hidden {
  display: block;
}

.ld-overlay {
  position: fixed;
  color: #CCC;
  font-size: 12px;
  letter-spacing: 0.4pt;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFFFFF;
  z-index: 1000;
  overflow: hidden;
}

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}

.loader {
  color: #b11b24;
  font-size: 10px;
  margin: auto;
  position: relative;
  text-indent: -9999em;
  transform: translateZ(0) scale(0.5);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.loader:before,
.loader:after {
  content: "";
  position: absolute;
  top: 0;
}

.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.loader:after {
  left: 3.5em;
}

@-webkit-keyframes load7 {
  0%, 80%, 100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%, 80%, 100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
#wrap {
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 0;
}
.logo {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 60%;
}

#gnav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #282828;
  height: 100%;
  z-index: 1100;
}
#gnav .gnav-btns {
  display: flex;
  height: 100%;
  max-height: 680px;
  padding: 50px 0;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
#gnav .gnav-btns li a,
#gnav .gnav-btns li span {
  display: block;
  font-size: 18px;
  color: #FFF;
}
#gnav .gnav-btns li.current {
  position: relative;
}
#gnav .gnav-btns li.current span {
  display: block;
  color: #FFF;
  background: #b11b24;
  padding: 0 10px;
}
#gnav .gnav-btns li.current::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 100%;
  background: #b11b24;
}
#gnav .gnav-btns li.btn-sns {
  display: flex;
}
#gnav .gnav-btns li.btn-sns a {
  display: flex;
  width: 50px;
}

#player {
  width: 100%;
  height: auto;
  aspect-ratio: 500/400;
}

#player .iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 500/400;
}

/*.trailer-btns ul {
    display: flex;
	flex-wrap: wrap;
    gap: 7px;
    justify-content: center;
}
.trailer-btns li {
    width: calc(50% - 7px);
}
.trailer-btns li span {
    display: block;
    padding: 10px 5px;
    text-align: center;
    background: #666;
    color: #CCC;
	font-size: 14px;
    border-radius: 2px;
}
.trailer-btns li span.current {
    background: #cb1133;
    color: #FFF;
    font-weight: 700;
}*/
.trailer-btns ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 15px 10px;
  height: auto;
}

.trailer-btns ul li {
  width: calc((100% - 10px) / 2);
  color: #CCC;
  font-size: 16px;
  padding: 0;
  letter-spacing: 0.075em;
  font-family: sans-serif;
  margin-top: 10px;
}

.trailer-btns ul li span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 4.4em;
  padding: 10px 3px;
  cursor: pointer;
  border-radius: 2px;
  text-align: center;
  background: #181818;
  font-size: 16px;
  line-height: 1.4em;
  font-weight: 700;
  border: solid 1px #333;
}

.trailer-btns ul li .sub {
  display: block;
  font-size: 11px;
}

.trailer-btns ul li span.current {
  color: #FFF;
  background: #cb1133;
  border: solid 1px #cb1133;
}

/*#trailer-btns {
	margin: 10px;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	li {
		width: 25%;
		box-sizing: border-box;
		padding-bottom: 10px;
		padding-right: 10px;
		span {
			display: block;
			letter-spacing: 0.6pt;
			background: #CCC;
			line-height: 36px;
			text-align: center;
			font-size: 14px;
			color: #2a2824;
			border: solid 1px #CCC!important;
			border-radius: 30px;
			cursor: pointer;
			&:hover {
				background: #FFF;
				border: solid 1px #FFF!important;
			}
			&.current {
				background: #e60038!important;
				color: #FFF!important;
				border: solid 1px #e60038!important;
				cursor: default!important;
				&:hover {
					background: #e60038;
					border: solid 1px #e60038!important;
				}
			}
		}
	}
}*/
.is_loaded #introduction,
.is_loaded #story {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.is_loaded .page-title {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.is_loaded #story .catch1 {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.is_loaded #story .scroll-text {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.is_loaded #story .catch2 {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1.6s;
  animation-duration: 1.6s;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.is_loaded #introduction .catch4 {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1.6s;
  animation-duration: 1.6s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}
@-webkit-keyframes scaleVerticalRight {
  from {
    transform: translateY(-40px);
    height: 0%;
  }
  to {
    transform: translateY(0px);
    height: 100%;
  }
}
@-webkit-keyframes scaleLeft {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}
@keyframes scaleLeft {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes moveLeft {
  from {
    transform: translateX(40px);
    opacity: 0;
  }
  to {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes moveLeft {
  from {
    transform: translateX(40px);
    opacity: 0;
  }
  to {
    transform: translateX(0px);
    opacity: 1;
  }
}
@-webkit-keyframes moveBottom {
  from {
    transform: translateY(-40px);
    opacity: 0;
  }
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes moveBottom {
  from {
    transform: translateY(-40px);
    opacity: 0;
  }
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}
.fadein {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1.6s;
}

.fadeinLeft {
  opacity: 0;
  transform: translateY(40px) translateX(-40px);
  transition: all 1.6s;
}

.fadeinRight {
  opacity: 0;
  transform: translateY(40px) translateX(40px);
  transition: all 1.6s;
}