@charset "UTF-8";
@font-face {
  font-family: "KaiseiHarunoUmi";
  font-style: normal;
  font-weight: 400;
  src: url("../font/KaiseiHarunoUmi-Regular.ttf") format("truetype"); /* Modern Browsers */
}
@font-face {
  font-family: "KaiseiHarunoUmi";
  font-style: normal;
  font-weight: 500;
  src: url("../font/KaiseiHarunoUmi-Medium.ttf") format("truetype"); /* Modern Browsers */
}
@font-face {
  font-family: "KaiseiHarunoUmi";
  font-style: normal;
  font-weight: 700;
  src: url("../font/KaiseiHarunoUmi-Bold.ttf") format("truetype"); /* Modern Browsers */
}
@font-face {
  font-family: "NotoSans";
  font-style: normal;
  font-weight: 100;
  src: url("../font/NotoSansJP-Thin.ttf") format("truetype"); /* Modern Browsers */
}
@font-face {
  font-family: "NotoSans";
  font-style: normal;
  font-weight: 200;
  src: url("../font/NotoSansJP-ExtraLight.ttf") format("truetype"); /* Modern Browsers */
}
@font-face {
  font-family: "NotoSans";
  font-style: normal;
  font-weight: 300;
  src: url("../font/NotoSansJP-Light.ttf") format("truetype"); /* Modern Browsers */
}
@font-face {
  font-family: "NotoSans";
  font-style: normal;
  font-weight: 400;
  src: url("../font/NotoSansJP-Regular.ttf") format("truetype"); /* Modern Browsers */
}
@font-face {
  font-family: "NotoSans";
  font-style: normal;
  font-weight: 500;
  src: url("../font/NotoSansJP-Medium.ttf") format("truetype"); /* Modern Browsers */
}
@font-face {
  font-family: "NotoSans";
  font-style: normal;
  font-weight: 600;
  src: url("../font/NotoSansJP-SemiBold.ttf") format("truetype"); /* Modern Browsers */
}
@font-face {
  font-family: "NotoSans";
  font-style: normal;
  font-weight: 700;
  src: url("../font/NotoSansJP-Bold.ttf") format("truetype"); /* Modern Browsers */
}
@font-face {
  font-family: "NotoSans";
  font-style: normal;
  font-weight: 800;
  src: url("../font/NotoSansJP-ExtraBold.ttf") format("truetype"); /* Modern Browsers */
}
@font-face {
  font-family: "NotoSans";
  font-style: normal;
  font-weight: 900;
  src: url("../font/NotoSansJP-Black.ttf") format("truetype"); /* Modern Browsers */
}
/* reset:start */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

[hidden] {
  display: none;
}

.chara .cont__contents, .cont__section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.chara .cont__contents > *, .cont__section > * {
  min-height: 0%;
}

.preload .header__logo.hidden {
  opacity: 0;
  visibility: hidden;
}

/* reset:end */
:root {
  --fs-root: var(--vh);
  --fs-parent: var(--vh);
}

body {
  font-family: "KaiseiHarunoUmi";
  font-weight: 400;
  background-color: #000d7c;
  display: none;
}
body.error, body.terms {
  display: block;
}

.cont__header {
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

/* header:start */
.header__bg {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  pointer-events: all;
}

.header__container {
  width: 500px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  width: var(--vw);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.header__logo {
  display: block;
  position: static;
  inset: 0;
  width: calc(var(--vw) * 0.67);
  z-index: 999;
  pointer-events: all;
  margin-left: 8.996%;
}
.header__logo img {
  opacity: 0;
  visibility: hidden;
}
.header__logo.hidden img {
  opacity: 1;
  visibility: visible;
}

.header__menu {
  display: block;
  width: 17.3333333333%;
  margin-left: auto;
  padding-top: calc(var(--vw) * 0.065);
  padding-bottom: calc(var(--vw) * 0.05);
  pointer-events: all;
  cursor: pointer;
  padding-right: 2.996%;
}

.header__menu-trigger {
  margin-left: auto;
  margin-right: calc(var(--vw) * 0.072);
  width: calc(var(--vw) * 0.024);
  display: block;
}
.header__menu-trigger.hidden img {
  opacity: 1;
  visibility: visible;
}
.header__menu-trigger.jsClose img {
  opacity: 1;
  visibility: visible;
}

.header__menu-trigger.jsClose {
  width: calc(var(--vw) * 0.065);
}

.header__menu-trigger #menuButtonImage {
  fill: #000;
}

.header__nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background-color: #000d7c;
  margin: 0 calc(50% - 50vw);
  padding: 0 calc(50vw - 50%);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.header__nav.jsNavClose {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

/* header:end */
.nav__link--05, .nav__link--04, .nav__link--03, .nav__link--02, .nav__link {
  display: block;
  font-weight: 700;
}

/* nav:start */
.nav__container {
  width: 100%;
  height: 100%;
  pointer-events: all;
}

.nav__container2 a {
  pointer-events: all;
  cursor: pointer;
}

.nav__contents {
  height: 100%;
  position: relative;
}

.nav__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.nav__links {
  position: relative;
  z-index: 2;
  padding-top: 7.3333333333%;
  margin: 0 10%;
}

.nav__link {
  width: 30.827%;
}

.nav__link--02 {
  width: 75.562%;
  margin-top: 10.844%;
}

.nav__link--03 {
  width: 45.694%;
  margin-top: 10.844%;
}

.nav__link--04 {
  width: 34.7224%;
  margin-top: 10.844%;
}

/* nav:end */
#cont {
  max-width: 100%;
  height: 100dvh;
  position: relative;
}
#cont .cont__main {
  max-width: 100%;
  width: 100%;
  height: 100dvh;
  height: var(--vh);
  position: relative;
  z-index: 1;
  scroll-snap-type: y mandatory;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none; /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
  scrollbar-width: none; /*Firefoxへの対応*/
}
#cont .cont__main::-webkit-scrollbar {
  display: none; /*Google Chrome、Safariへの対応*/
}
#cont .cont__main.modalOpen {
  overflow: hidden;
}
#cont .cont__main .cont__section {
  max-width: 100%;
  width: var(--vw);
  height: 100dvh;
  height: var(--vh);
  margin-left: auto;
  margin-right: auto;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
#cont .cont__main .cont__section .cont__area {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  aspect-ratio: 750/1334;
}

#top_kv {
  position: relative;
}
#top_kv .kv01 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0;
  width: 100%;
  height: 51.703%;
  padding-left: 26.402%;
  padding-right: 4.773%;
  animation-name: kv01;
  animation-duration: 6s;
  animation-timing-function: ease;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
#top_kv .kv02 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  opacity: 0;
  width: 100%;
  height: 51.703%;
  padding-left: 26.402%;
  padding-right: 4.773%;
  animation-name: kv02;
  animation-duration: 6s;
  animation-timing-function: ease-in;
  animation-delay: 3s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
#top_kv .kv_bg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  animation-name: fade-in;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 9s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
#top_kv .kv_bg picture {
  transform: translate(-24.641%, -7.338%);
}
#top_kv .kv_photo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 10.901vh 0 0;
  opacity: 0;
  width: 100%;
  animation-name: fade-in;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 9.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
#top_kv .kv_logo {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto 5.199vh;
  opacity: 0;
  width: 62.917%;
  animation-name: fade-in;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 10s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
#top_kv .kv_btn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto 4.8vh;
  opacity: 0;
  width: 43.1827%;
  animation-name: fade-in;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 10s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
#top_kv .kv_btn_link:hover {
  opacity: 0.7;
}
#top_kv .kv_catchphrase {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: calc(var(--fs-root) * 0.125);
  margin-right: 9.04%;
  opacity: 0;
  width: 4.509%;
  animation-name: fade-in;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 10s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
#top_kv .kv_scroll {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-bottom: 4.281vh;
  margin-right: 9.04%;
  opacity: 0;
  width: 2.952%;
  animation-name: fade-in;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 10.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

/**
 * ----------------------------------------
 * kv
 * ----------------------------------------
 */
@keyframes kv01 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes kv02 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#prologue .prologue_frame {
  width: 100%;
  padding: 0 calc(var(--vw) * 0.12);
}
#prologue .prologue_frame .prologue_01 {
  font-size: calc(var(--fs-root) * 0.024);
  color: #ffffff;
}
#prologue .prologue_frame .prologue_02 {
  margin-top: 2.208vh;
  font-size: calc(var(--fs-root) * 0.024);
  color: #ffffff;
}
#prologue .prologue_frame .prologue_03 {
  margin-top: 4.816vh;
  font-size: calc(var(--fs-root) * 0.024);
  color: #ffffff;
}
#prologue .prologue_frame .prologue_04 {
  margin-top: 2.208vh;
  font-size: calc(var(--fs-root) * 0.024);
  color: #ffffff;
}
#prologue .prologue_frame .prologue_05 {
  margin-top: 2.208vh;
  font-size: calc(var(--fs-root) * 0.024);
  color: #ffffff;
}
#prologue .prologue_frame .prologue_06 {
  margin-top: 4.816vh;
  font-size: calc(var(--fs-root) * 0.024);
  color: #ffffff;
}
#prologue .prologue_frame .prologue_07 {
  margin-top: 2.208vh;
  font-size: calc(var(--fs-root) * 0.024);
  color: #ffffff;
}
#prologue .prologue_frame .prologue_08 {
  margin-top: 2.208vh;
  font-size: calc(var(--fs-root) * 0.024);
  color: #ffffff;
}
#prologue .prologue_frame .prologue_09 {
  margin-top: 2.208vh;
  font-size: calc(var(--fs-root) * 0.024);
  color: #ffffff;
}
#prologue .prologue_frame .prologue_10 {
  margin-top: 2.208vh;
  font-size: calc(var(--fs-root) * 0.024);
  color: #ffffff;
}

.cont__section-story {
  /* 画像サイズ調整 */
}
.cont__section-story .story_frame {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 8.996%;
}
.cont__section-story .swiper-wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 100%;
}
.cont__section-story .swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 100%;
  height: 100%;
}
.cont__section-story .video-card {
  inline-size: min(640px, 100%);
  display: grid;
}
.cont__section-story .video-card .story-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 4%;
  background-color: #00004c;
  border-radius: 0 0 4% 4%;
}
.cont__section-story .video-card .story-info .story_title {
  width: 85.928%;
  font-weight: 500;
  color: #ff0060;
  font-size: calc(var(--fs-root) * 0.022);
}
.cont__section-story .video-card .story-info .video-toggle {
  width: 10.388%;
  justify-self: start;
  cursor: pointer;
  margin-left: auto;
}
.cont__section-story .video-card .story-info .video-toggle.is-playing {
  background: #f5f5f5;
}
.cont__section-story .video-card .story-info .summary {
  width: 100%;
  margin: 1.634vh 0;
  overflow-y: auto;
  -ms-overflow-style: none; /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
  scrollbar-width: none; /*Firefoxへの対応*/
}
.cont__section-story .video-card .story-info .summary::-webkit-scrollbar {
  display: none; /*Google Chrome、Safariへの対応*/
}
.cont__section-story .video-card .story-info .summary p {
  font-size: calc(var(--fs-root) * 0.0195);
  color: #ffffff;
}
.cont__section-story .video-card .story-info .scenario {
  width: 100%;
}
.cont__section-story .video-card .story-info .scenario p {
  font-size: calc(var(--fs-root) * 0.0195);
  color: #ffffff;
  text-align: right;
}
.cont__section-story .video-card .story-info .cast_title {
  width: 100%;
  margin: 2.947vh 0 1.804vh;
}
.cont__section-story .video-card .story-info .cast_title h3 {
  width: 100%;
  display: flex;
  align-items: center;
}
.cont__section-story .video-card .story-info .cast_title h3 img {
  width: 13.839%;
}
.cont__section-story .video-card .story-info .cast_title h3::before, .cont__section-story .video-card .story-info .cast_title h3::after {
  content: "";
  height: 1px;
  flex-grow: 1;
  background-color: #ff006d;
}
.cont__section-story .video-card .story-info .cast_title h3::before {
  margin-right: 1rem;
}
.cont__section-story .video-card .story-info .cast_title h3::after {
  margin-left: 1rem;
}
.cont__section-story .video-card .story-info .cast_info {
  width: 100%;
}
.cont__section-story .video-card .story-info .cast_info ul {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.cont__section-story .video-card .story-info .cast_info ul li:nth-child(1) {
  width: 41.08%;
}
.cont__section-story .video-card .story-info .cast_info ul li:nth-child(2) {
  width: 45.513%;
}
.cont__section-story .video-card .story-info .cast_info ul li a {
  cursor: pointer;
}
.cont__section-story .video-card .video-wrapper {
  position: relative;
  width: 100%;
  background: #000; /* 読み込み中の下地 */
  overflow: hidden;
}
.cont__section-story .video-card .video-wrapper::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9 */
}
.cont__section-story .video-card .video-wrapper .video-thumb,
.cont__section-story .video-card .video-wrapper video,
.cont__section-story .video-card .video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  cursor: pointer;
}
.cont__section-story .swiper-horizontal > .swiper-pagination-bullets, .cont__section-story .swiper-pagination-bullets.swiper-pagination-horizontal, .cont__section-story .swiper-pagination-custom, .cont__section-story .swiper-pagination-fraction {
  bottom: calc(var(--vh) * 0.0475);
}
.cont__section-story .swiper-pagination-bullet {
  background: #4650a0;
  opacity: 1;
}
.cont__section-story .swiper-pagination-bullet-active {
  background: #ff1f6d;
}
.cont__section-story .swiper-button-prev {
  width: calc(var(--vw) * 0.102);
  height: calc(var(--vh) * 0.0475);
  z-index: 100;
}
.cont__section-story .swiper-button-prev svg {
  display: none;
}
.cont__section-story .swiper-button-prev::after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  width: calc(var(--vw) * 0.102);
  height: calc(var(--vh) * 0.04);
  margin: auto;
  background-image: url(../img/swiper-prev.svg);
  background-position: left;
}
.cont__section-story .swiper-button-next {
  width: calc(var(--vw) * 0.102);
  height: calc(var(--vh) * 0.0475);
  z-index: 100;
}
.cont__section-story .swiper-button-next svg {
  display: none;
}
.cont__section-story .swiper-button-next::after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  width: calc(var(--vw) * 0.102);
  height: calc(var(--vh) * 0.04);
  margin: auto;
  background-image: url(../img/swiper-next.svg);
  background-position: right;
}
.cont__section-story .swiper-slide img {
  height: auto;
  width: 100%;
}
.cont__section-story .story_frame {
  flex-direction: column;
  justify-content: center;
}
.cont__section-story .story_content {
  margin: 8vh 0 3.1099vh;
  height: 54%;
}
.cont__section-story .story_icon {
  width: 17.2764%;
  margin-bottom: 0.5vh;
}
.cont__section-story .story_ttl {
  width: 85.928%;
  font-weight: 500;
  color: #ff0060;
  font-size: calc(var(--vw) * 0.04);
  margin-bottom: 0.5vh;
}
.cont__section-story .story_yt {
  width: 100%;
  aspect-ratio: 16/9;
  margin-bottom: 1.8764vh;
}
.cont__section-story .story_yt iframe {
  width: 100%;
  height: 100%;
}
.cont__section-story .story_txt {
  font-size: calc(var(--vw) * 0.033);
  color: #ffffff;
  height: 30.05%;
}
.cont__section-story .story_writer {
  font-size: calc(var(--vw) * 0.033);
  color: #ffffff;
  text-align: right;
}
.cont__section-story .character_content {
  width: 100%;
}
.cont__section-story .character_ttl {
  display: flex;
  align-items: center;
  margin-bottom: 0.9766vh;
  width: 100%;
}
.cont__section-story .character_ttl img {
  width: 23.5527%;
}
.cont__section-story .character_ttl::before {
  content: "";
  height: 1px;
  flex-grow: 1;
  background-color: #ff006d;
  margin-right: 1rem;
}
.cont__section-story .character_ttl::after {
  content: "";
  height: 1px;
  flex-grow: 1;
  background-color: #ff006d;
  margin-left: 1rem;
}
.cont__section-story .character_check {
  width: 47.9376%;
  margin: 0 auto;
  margin-bottom: 1.8233vh;
}
.cont__section-story .character_list {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}
.cont__section-story .character_item {
  width: 48.2029%;
}
.cont__section-story .character_img {
  width: 42.8036%;
  aspect-ratio: 5/8;
  margin: 0 auto;
  cursor: pointer;
}
.cont__section-story .character_img:hover {
  opacity: 0.7;
}
.cont__section-story .character_voice {
  font-size: calc(var(--vw) * 0.033);
  color: #ff006d;
  text-align: center;
  display: block;
}
.cont__section-story .character_voice span {
  text-decoration: underline;
}
.cont__section-story .character_voice::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url(../img/character_voice_arrow.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-bottom: 0.1em;
}
.cont__section-story .character_voice:hover span {
  text-decoration: none;
}

.episode_link {
  width: 100%;
}
.episode_linkList {
  display: none;
  flex-direction: column;
  align-items: center;
  position: fixed;
  right: 50%;
  top: 13.1155vh;
  transform: translateX(calc(var(--vw) * 0.49));
  z-index: 3;
  width: calc(var(--vw) * 0.055);
}
.episode_linkList.active {
  display: flex;
}
.episode_link a {
  display: block;
  width: 100%;
}
.episode_link a:hover {
  opacity: 0.7;
}
.episode_link.current a {
  background-image: url(../img/episode_link_bg.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

#characters {
  position: relative;
}
#characters.cont__section {
  min-height: 100dvh; /* 伸びるようなら調整必要 */
  height: auto;
  scroll-snap-align: none;
}
#characters .characters_frame {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 10.021%;
}
#characters .characters_frame .characters_info {
  position: relative;
  width: 100%;
  padding: 3.566vh 0 0.84vh;
  border: 2px #ff006d solid;
  border-radius: 20px;
}
#characters .characters_frame .characters_info::before {
  content: "";
  width: 2.72%;
  height: 4px;
  background-color: #000d7c;
  position: absolute;
  top: -2px;
  right: 4.621%;
}
#characters .characters_frame .characters_info::after {
  content: "";
  width: 2.72%;
  height: 4px;
  background-color: #000d7c;
  position: absolute;
  bottom: -2px;
  left: 4.621%;
}
#characters .characters_frame .characters_info .characters_title {
  width: 33.154%;
  padding: 0 2.859%;
  background-color: #000d7c;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
}
#characters .characters_frame .characters_info .characters_guide {
  width: 74.288%;
  margin: 0 auto;
}
#characters .characters_frame .characters_info ul {
  width: 100%;
  margin-top: 6.489vh;
  display: flex;
  flex-wrap: wrap;
}
#characters .characters_frame .characters_info ul li {
  width: 34.858%;
  margin-bottom: 3.798vh;
}
#characters .characters_frame .characters_info ul li a {
  cursor: pointer;
}
#characters .characters_frame .characters_info ul li:nth-child(odd) {
  margin-left: 10.558%;
}
#characters .characters_frame .characters_info ul li:nth-child(even) {
  margin-left: auto;
  margin-right: 10.558%;
}
#characters footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 2.299vh;
}
#characters footer picture {
  width: 54.793%;
  margin-left: auto;
  margin-right: auto;
}

#comments {
  position: relative;
}
#comments.cont__section {
  min-height: 100dvh; /* 伸びるようなら調整必要 */
  height: auto;
  scroll-snap-align: none;
}
#comments .comments_frame {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 10.021%;
}
#comments .comments_frame .comments_content {
  position: relative;
  width: 100%;
}
#comments .comments_frame .comments_content .comments_title {
  width: 51.212%;
  margin: 0 auto;
}
#comments .comments_frame .comments_content ul {
  width: 100%;
  margin-top: 4.126vh;
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 4%;
       column-gap: 4%;
}
#comments .comments_frame .comments_content ul li {
  width: 47.904%;
}
#comments .comments_frame .comments_content ul li a {
  cursor: pointer;
}
#comments footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 2.299vh;
}
#comments footer picture {
  width: 54.793%;
  margin-left: auto;
  margin-right: auto;
}

.cont__section-cast {
  position: relative;
}
.cont__section-cast.cont__section {
  min-height: 100dvh; /* 伸びるようなら調整必要 */
  height: auto;
  scroll-snap-align: none;
}
.cont__section-cast .cast_frame {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: flex-start;
  row-gap: 1vh;
  padding: 0 8.996%;
}
.cont__section-cast .cast_ttl {
  width: 100%;
  height: 30%;
}
.cont__section-cast .cast_ttl_inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -moz-column-gap: 7%;
       column-gap: 7%;
  padding-top: 22%;
  height: 100%;
}
.cont__section-cast .cast_ttl span {
  display: block;
}
.cont__section-cast .cast_name {
  color: #ffffff;
}
.cont__section-cast .cast_act {
  font-size: calc(var(--vw) * 0.037);
  letter-spacing: 0.1em;
}
.cont__section-cast .cast_kanji {
  font-size: calc(var(--vw) * 0.055);
  letter-spacing: 0.44em;
}
.cont__section-cast .cast_kanji-fairouz {
  letter-spacing: normal;
}
.cont__section-cast .cast_roma {
  font-size: calc(var(--vw) * 0.033);
  letter-spacing: 0.46em;
}
.cont__section-cast .cast_img {
  width: 33%;
}
.cont__section-cast .cast_content {
  height: 58%;
  width: 100%;
  padding-right: 6%;
  color: #ffffff;
  font-size: calc(var(--vw) * 0.033);
  line-height: 1.6168;
}
.cont__section-cast .cast_content_ttl {
  font-size: calc(var(--vw) * 0.048);
  font-weight: bold;
  margin-bottom: 0.8vh;
  margin-top: 3vh;
}
.cont__section-cast .cast_content_ttl-episode {
  margin-top: 1.5vh;
}
.cont__section-cast .cast_content .simplebar-track.simplebar-vertical {
  width: calc(var(--vw) * 0.036);
  background: linear-gradient(to right, transparent 0, transparent calc(var(--vw) * 0.016), #fff calc(var(--vw) * 0.016), #fff calc(var(--vw) * 0.02), transparent calc(var(--vw) * 0.02), transparent calc(var(--vw) * 0.036));
}
.cont__section-cast .cast_content .simplebar-scrollbar::before {
  background-color: transparent;
  background-image: url(../img/scrollbar.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 1;
  border-radius: 0;
}
.cont__section-cast .cast_episodeList {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  row-gap: 0.5vh;
}
.cont__section-cast .cast_episode a {
  color: #ff006d;
  font-weight: bold;
}
.cont__section-cast .cast_episode a span {
  text-decoration: underline;
}
.cont__section-cast .cast_episode a:hover span {
  text-decoration: none;
}
.cont__section-cast .cast_episode a::after {
  content: "";
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  margin-left: 0.3em;
  background-image: url(../img/character_voice_arrow.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-bottom: 0.1em;
}
.cont__section-cast .cast_comment:not(:last-of-type) {
  margin-bottom: 2.6666vh;
}
.cont__section-cast .cast_question {
  color: #ff006d;
  margin-bottom: 0.5vh;
  font-weight: bold;
}
.cont__section-cast .cast_link {
  color: #ff006d;
  font-weight: bold;
  margin-top: 0.5vh;
  display: inline-block;
}
.cont__section-cast .cast_link span {
  text-decoration: underline;
}
.cont__section-cast .cast_link:hover span {
  text-decoration: none;
}
.cont__section-cast .cast_link::after {
  content: "";
  display: inline-block;
  width: 1.3em;
  height: 1em;
  margin-left: 0.3em;
  background-image: url(../img/link_blank.svg);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-bottom: 0.1em;
}
.cont__section-cast footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 2.299vh;
}
.cont__section-cast footer picture {
  width: 54.793%;
  margin-left: auto;
  margin-right: auto;
}

#footer {
  position: relative;
}
#footer.cont__section {
  min-height: 100dvh; /* 伸びるようなら調整必要 */
  height: auto;
  scroll-snap-align: none;
}
#footer .footer_frame {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 10.021%;
}
#footer footer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54.793%;
}

/* YouTube 16:9 ラッパー（必須） */
/* IFrame API が生成する要素を全面フィット */
.video-card .youtube-wrap iframe,
.video-card .youtube-wrap > div,
.video-card .youtube-wrap > * {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ----- ここから “カバー表示” 用（上下の黒帯を隠す） ----- */
/* cover クラスが付いたときは iframe を拡大して中央トリミング */
.video-card .youtube-wrap.cover iframe,
.video-card .youtube-wrap.cover > * {
  /* だいたい1.25〜1.35倍で帯が隠れる。映像に合わせて微調整 */
  transform: scale(1.3);
  transform-origin: 50% 50%;
}

/**
 * ----------------------------------------
 * modal
 * ----------------------------------------
 */
.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 13, 124, 0.7);
}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  aspect-ratio: 750/1334;
}

.modalContents {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0 10.021%;
  transform: translateY(calc(var(--vw) * -0.065));
}
.modalContents.modalContents-vt {
  padding: 0 23.021%;
}
.modalContents picture, .modalContents img {
  width: 100%;
}
.modalContents .closeModal {
  width: calc(var(--vw) * 0.065);
  margin-bottom: calc(var(--vw) * 0.0325);
  margin-left: auto;
  cursor: pointer;
}

.modalArea01, .modalArea02, .modalArea03, .modalArea04, .modalArea05 {
  display: none;
  position: fixed;
  z-index: 10; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalComment01, .modalComment02 {
  display: none;
  position: fixed;
  z-index: 10; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalCast01, .modalCast02, .modalCast03 {
  display: none;
  position: fixed;
  z-index: 10; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.modalCast01 .modalInner, .modalCast02 .modalInner, .modalCast03 .modalInner {
  max-height: 90vh;
  height: auto;
  width: 100%;
  padding: 6%;
  background-color: #00004c;
  border-radius: 4%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.modalCast01 .modalInner .profile_photo, .modalCast02 .modalInner .profile_photo, .modalCast03 .modalInner .profile_photo {
  width: 36.755%;
  margin-right: 7.051%;
}
.modalCast01 .modalInner .profile_name, .modalCast02 .modalInner .profile_name, .modalCast03 .modalInner .profile_name {
  width: 56.194%;
  color: #ffffff;
}
.modalCast01 .modalInner .profile_name p, .modalCast02 .modalInner .profile_name p, .modalCast03 .modalInner .profile_name p {
  font-size: calc(var(--fs-root) * 0.0195);
  letter-spacing: calc(var(--fs-root) * 0.007);
}
.modalCast01 .modalInner .profile_name h2, .modalCast02 .modalInner .profile_name h2, .modalCast03 .modalInner .profile_name h2 {
  font-size: calc(var(--fs-root) * 0.03);
  letter-spacing: calc(var(--fs-root) * 0.007);
}
.modalCast01 .modalInner .profile_info, .modalCast02 .modalInner .profile_info, .modalCast03 .modalInner .profile_info {
  max-height: 56vh;
  height: auto;
  width: 100%;
  overflow-y: auto;
  margin-top: 3.336vh;
  color: #ffffff;
  -ms-overflow-style: none; /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
  scrollbar-width: none; /*Firefoxへの対応*/
}
.modalCast01 .modalInner .profile_info::-webkit-scrollbar, .modalCast02 .modalInner .profile_info::-webkit-scrollbar, .modalCast03 .modalInner .profile_info::-webkit-scrollbar {
  display: none; /*Google Chrome、Safariへの対応*/
}
.modalCast01 .modalInner .profile_info p, .modalCast02 .modalInner .profile_info p, .modalCast03 .modalInner .profile_info p {
  font-size: calc(var(--fs-root) * 0.0195);
  line-height: calc(var(--fs-root) * 0.0395);
  letter-spacing: calc(var(--fs-root) * 0.001);
}
.modalCast01 .modalInner .profile_info p a, .modalCast02 .modalInner .profile_info p a, .modalCast03 .modalInner .profile_info p a {
  color: rgb(255, 0, 109);
  cursor: pointer;
  text-decoration: underline;
}
.modalCast01 .modalInner .profile_info p a:hover, .modalCast02 .modalInner .profile_info p a:hover, .modalCast03 .modalInner .profile_info p a:hover {
  text-decoration: none;
}

/**
 * ----------------------------------------
 * fade
 * ----------------------------------------
 */
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes fade-Left {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
/**
 * ----------------------------------------
 * bounce-in
 * ----------------------------------------
 */
@keyframes bounce-in {
  0% {
    transform: scale(1.5);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    transform: scale(0.8);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  65% {
    transform: scale(1.1);
    animation-timing-function: ease-in;
    opacity: 1;
  }
  80% {
    transform: scale(1);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  100% {
    transform: scale(1);
    animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes bounce-in-fwd {
  0% {
    transform: scale(0);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  45% {
    transform: scale(1.3);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  80% {
    transform: scale(0.9);
    animation-timing-function: ease-in;
    opacity: 1;
  }
  100% {
    transform: scale(1);
    animation-timing-function: ease-out;
    opacity: 1;
  }
}
.error,
.terms {
  font-family: "NotoSans";
  font-weight: 400;
}
.error #cont,
.terms #cont {
  max-width: 100%;
  height: 100dvh;
  position: relative;
}
.error #cont .cont__main,
.terms #cont .cont__main {
  max-width: 100%;
  width: 100%;
  height: 100dvh;
  height: var(--vh);
  position: relative;
  z-index: 1;
  scroll-snap-type: none;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none; /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
  scrollbar-width: none; /*Firefoxへの対応*/
}
.error #cont .cont__main::-webkit-scrollbar,
.terms #cont .cont__main::-webkit-scrollbar {
  display: none; /*Google Chrome、Safariへの対応*/
}
.error #cont .cont__main .cont__area,
.terms #cont .cont__main .cont__area {
  position: relative;
  width: 100%;
  aspect-ratio: 750/1334;
}
.error #cont .cont__main .cont__area .error_frame,
.error #cont .cont__main .cont__area .terms_frame,
.terms #cont .cont__main .cont__area .error_frame,
.terms #cont .cont__main .cont__area .terms_frame {
  width: 100%;
  height: 100%;
  padding: 0 10.021%;
}
.error #cont .cont__main .cont__area .error_frame h1,
.error #cont .cont__main .cont__area .terms_frame h1,
.terms #cont .cont__main .cont__area .error_frame h1,
.terms #cont .cont__main .cont__area .terms_frame h1 {
  margin-top: 2.208vh;
  color: #ffffff;
  font-size: calc(var(--fs-root) * 0.03);
  text-align: center;
}
.error #cont .cont__main .cont__area .error_frame p,
.error #cont .cont__main .cont__area .terms_frame p,
.terms #cont .cont__main .cont__area .error_frame p,
.terms #cont .cont__main .cont__area .terms_frame p {
  color: #ffffff;
  font-size: calc(var(--fs-root) * 0.018);
  margin-top: calc(var(--vh) * 0.034);
}
.error #cont .cont__main .cont__area .error_frame p a,
.error #cont .cont__main .cont__area .terms_frame p a,
.terms #cont .cont__main .cont__area .error_frame p a,
.terms #cont .cont__main .cont__area .terms_frame p a {
  color: rgb(255, 0, 109);
  cursor: pointer;
}
.error #cont .cont__main .cont__area .error_frame p a span,
.error #cont .cont__main .cont__area .terms_frame p a span,
.terms #cont .cont__main .cont__area .error_frame p a span,
.terms #cont .cont__main .cont__area .terms_frame p a span {
  text-decoration: underline;
}
.error #cont .cont__main .cont__area .error_frame p a:hover span,
.error #cont .cont__main .cont__area .terms_frame p a:hover span,
.terms #cont .cont__main .cont__area .error_frame p a:hover span,
.terms #cont .cont__main .cont__area .terms_frame p a:hover span {
  text-decoration: none;
}
.error #cont .cont__main .cont__area .error_frame p a::after,
.error #cont .cont__main .cont__area .terms_frame p a::after,
.terms #cont .cont__main .cont__area .error_frame p a::after,
.terms #cont .cont__main .cont__area .terms_frame p a::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.3em;
  background-image: url(../img/link_blank.svg);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-top: -0.1em;
}
.error #cont .cont__main .cont__area .error_frame li,
.error #cont .cont__main .cont__area .terms_frame li,
.terms #cont .cont__main .cont__area .error_frame li,
.terms #cont .cont__main .cont__area .terms_frame li {
  color: #ffffff;
  font-size: calc(var(--fs-root) * 0.018);
  margin-top: calc(var(--vh) * 0.019);
  text-indent: -1em;
  padding-left: 1em;
}
.error #cont .cont__main .cont__area .error_frame li::before,
.error #cont .cont__main .cont__area .terms_frame li::before,
.terms #cont .cont__main .cont__area .error_frame li::before,
.terms #cont .cont__main .cont__area .terms_frame li::before {
  content: "・";
}
.error #cont .cont__main .cont__area .error_frame li a,
.error #cont .cont__main .cont__area .terms_frame li a,
.terms #cont .cont__main .cont__area .error_frame li a,
.terms #cont .cont__main .cont__area .terms_frame li a {
  color: rgb(255, 0, 109);
  cursor: pointer;
}
.error #cont .cont__main .cont__area .error_frame li a span,
.error #cont .cont__main .cont__area .terms_frame li a span,
.terms #cont .cont__main .cont__area .error_frame li a span,
.terms #cont .cont__main .cont__area .terms_frame li a span {
  text-decoration: underline;
}
.error #cont .cont__main .cont__area .error_frame li a:hover span,
.error #cont .cont__main .cont__area .terms_frame li a:hover span,
.terms #cont .cont__main .cont__area .error_frame li a:hover span,
.terms #cont .cont__main .cont__area .terms_frame li a:hover span {
  text-decoration: none;
}
.error #cont .cont__main .cont__area .error_frame li a::after,
.error #cont .cont__main .cont__area .terms_frame li a::after,
.terms #cont .cont__main .cont__area .error_frame li a::after,
.terms #cont .cont__main .cont__area .terms_frame li a::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.3em;
  background-image: url(../img/link_blank.svg);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-top: -0.1em;
}
.error #cont .cont__main .cont__area .error_frame .item,
.error #cont .cont__main .cont__area .terms_frame .item,
.terms #cont .cont__main .cont__area .error_frame .item,
.terms #cont .cont__main .cont__area .terms_frame .item {
  margin-top: calc(var(--vh) * 0.054);
}
.error #cont .cont__main .cont__area .error_frame .item p,
.error #cont .cont__main .cont__area .terms_frame .item p,
.terms #cont .cont__main .cont__area .error_frame .item p,
.terms #cont .cont__main .cont__area .terms_frame .item p {
  margin-top: 0;
}
.error #cont .cont__main .cont__area .error_frame .item p.margin-top,
.error #cont .cont__main .cont__area .terms_frame .item p.margin-top,
.terms #cont .cont__main .cont__area .error_frame .item p.margin-top,
.terms #cont .cont__main .cont__area .terms_frame .item p.margin-top {
  margin-top: calc(var(--vh) * 0.019);
}
.error #cont .cont__main .cont__area .error_frame footer.error,
.error #cont .cont__main .cont__area .terms_frame footer.error,
.terms #cont .cont__main .cont__area .error_frame footer.error,
.terms #cont .cont__main .cont__area .terms_frame footer.error {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-bottom: 2.299vh;
}
.error #cont .cont__main .cont__area .error_frame footer.error picture,
.error #cont .cont__main .cont__area .terms_frame footer.error picture,
.terms #cont .cont__main .cont__area .error_frame footer.error picture,
.terms #cont .cont__main .cont__area .terms_frame footer.error picture {
  width: 54.793%;
  margin: calc(var(--vh) * 0.088) auto 0;
}
.error #cont .cont__main .cont__area .error_frame footer.terms,
.error #cont .cont__main .cont__area .terms_frame footer.terms,
.terms #cont .cont__main .cont__area .error_frame footer.terms,
.terms #cont .cont__main .cont__area .terms_frame footer.terms {
  width: 100%;
  padding-bottom: 2.299vh;
}
.error #cont .cont__main .cont__area .error_frame footer.terms picture,
.error #cont .cont__main .cont__area .terms_frame footer.terms picture,
.terms #cont .cont__main .cont__area .error_frame footer.terms picture,
.terms #cont .cont__main .cont__area .terms_frame footer.terms picture {
  width: 68.524%;
  margin: calc(var(--vh) * 0.088) auto 0;
}

.pagetop {
  position: fixed;
  right: 16px;
  bottom: 24px;
  z-index: 9999;
  display: none; /* JSのfadeIn/Outと整合 */
}

.pagetop a {
  position: relative;
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 50%;
}/*# sourceMappingURL=style.css.map */