@charset "utf-8";

/*--------------------------------------------------
 * 共通
 *  --  縦線
 *  --  コンテンツ上下ボーダー枠
 *  --  枠（見出し、ボタン）
 *  --  八角形枠
 *  --  エクスクラメーションマーク調整
 * site contents
 * bg contents
 * nav contents
 * main contents
 *  --  メインビジュアル
 *  --  topic contents トピックス
 *  --  update contents アップデート情報
 *  --  introduction contents イントロダクション
 *  --  story contents ストーリー
 *  --  character contents キャラクターリンク
 *  --  special contents スペシャル
 *  --  qanda contents 一問一答
 *  --  books contents 書籍情報
 *  --  footer contents

 ** 個別ページ **
 *  --  共通
 * character contents キャラクター
 *  --  ナビ + 枠 調整
 *  --  キャラクター 紹介
 *  --  用語 鴻救命株式会社
 * interview contents スタッフ鼎談
 * comment contents 発売記念コメント
 * present contents アイコン・壁紙プレゼント
--------------------------------------------------*/

@media (max-width: 320px) {
}
@media (max-width: 600px) {
}
@media (min-width: 601px) {
}
@media (min-width: 1124px) {
}

/*--------------------------------------------------
 * 共通
--------------------------------------------------*/
/*
 *  --  文字 太文字
 */
.font-bold {
  font-weight: bold;
}

/*
 *  --  縦線
 */
.vertical-line>span {
  position: absolute;
  width: 2px;
  height: 100%;
  background-image: linear-gradient(
    0deg,
    hsl(0deg 100% 48%) 0%,
    hsl(29deg 100% 50%) 8%,
    hsl(45deg 100% 50%) 17%,
    hsl(63deg 100% 50%) 25%,
    hsl(76deg 100% 55%) 33%,
    hsl(97deg 100% 61%) 42%,
    hsl(141deg 100% 50%) 50%,
    hsl(184deg 100% 45%) 58%,
    hsl(204deg 100% 50%) 67%,
    hsl(241deg 100% 50%) 75%,
    hsl(313deg 100% 43%) 83%,
    hsl(339deg 100% 50%) 92%,
    hsl(0deg 100% 50%) 100%
  );
  background-size: 100% 500%;
  z-index: 100;
}
.line-left>span {
  left: 2%;
  animation: line-animation-up 30s linear infinite;
}
.line-right>span {
  right: 2%;
  animation: line-animation-down 30s linear infinite;
}
.line-mix-blend {
  mix-blend-mode: soft-light;
  filter: blur(2px);
}
/* 縦線アニメーション */
@keyframes line-animation-up {
  0% { background-position: 0% 0%; }
  100% { background-position: 0% 500%; }
}
@keyframes line-animation-down {
  0% { background-position: 0% 500%; }
  100% { background-position: 0% 0%; }
}

/*
 *  --  コンテンツ上下ボーダー枠
 */
.border-frame {
  border-top: 0.15em solid var(--color-black);
  border-bottom: 0.15em solid var(--color-black);
}
.border-top-frame {
  border-top: 0.15em solid var(--color-black);
}
.border-bottom-frame {
  border-bottom: 0.15em solid var(--color-black);
}

/*
 *  --  枠（見出し、ボタン）
 */
.frame {
  position: relative;
  display: inline-block;
  padding: .5em 1em .3em;
  font-family: var(--fontfamily-for-alphanumeric);
  font-size: var(--fontsize-30);
  font-weight: 700;
  line-height: 1;
}
.frame.frame-span-img {
  width: 100%;
  padding: .3em 1em;
  text-align: center;
}
.frame::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-color: var(--color-transp);
  outline: .2em solid var(--color-transp);
  transform: skewX(-10deg);
  z-index: 2;
}
.frame::after {
  content: "";
  position: absolute;
  width: 0;
  height: 100%;
  inset: 0 auto auto 0;
  background-color: var(--color-black);
  background-image: none;
  outline: 0 solid var(--color-black);
  transform: skewX(-10deg);
  z-index: 4;
}
.frame p {
  position: relative;
  color: var(--color-transp);
  opacity: 1;
  z-index: 3;
}
.frame.frame-span-img:not(.frame-visible) p {
  opacity: 0;
}
.frame p span {
  position: relative;
  left: 0;
}
/* ----- 常に表示 ----- */
.frame.frame-visible.frame-before-black::before {
  background-color: var(--color-black);
  outline: .2em solid var(--color-black);
}
.frame.frame-visible.frame-before-white::before {
  background-color: var(--color-white);
  outline: .2em solid var(--color-black);
}
.frame.frame-visible::after {
  width: 100%;
  top: .4em;
  left: .3em;
  outline-width: .2em;
  z-index: 1;
}
.frame.frame-visible.frame-after-purple-green::after {
  background-image: var(--bgcolor-purple-green);
}
.frame.frame-visible.frame-after-orange-pink::after {
  background-image: var(--bgcolor-orange-pink);
}
.frame.frame-visible.frame-after-blue-pink::after {
  background-image: var(--bgcolor-blue-pink);
}
.frame.frame-visible.frame-span-orange p {
  color: var(--color-orange);
}
.frame.frame-visible.frame-span-white p {
  color: var(--color-white);
}
/* ----- トリガー ----- */
.frame.active::before,
.frame.active p,
.frame.active::after {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}
/* 枠背景 - 白 */
.frame.frame-before-white.active::before {
  animation-name: frame-before-white-animation;
}
/* 枠背景 - 黒 */
.frame.frame-before-black.active::before {
  animation-name: frame-before-black-animation;
}
/* 枠文字 - オレンジ */
.frame.frame-span-orange.active p {
  animation-name: frame-span-orange-animation;
}
/* 枠文字 - 白 */
.frame.frame-span-white.active p {
  animation-name: frame-span-white-animation;
}
/* 枠文字 - 画像 */
.frame.frame-span-img.active p {
  animation-name: frame-span-img-animation;
}
/* 枠ドロップシャドウ - 黒 */
.frame.frame-after-black.active::after {
  animation-name: frame-after-black-animation;
}
/* 枠ドロップシャドウ - 黒 + 紫・緑 */
.frame.frame-after-purple-green.active::after {
  animation-name: frame-after-black-animation, frame-after-purple-green-animation;
}
/* 枠ドロップシャドウ - 黒 + オレンジ・ピンク */
.frame.frame-after-orange-pink.active::after {
  animation-name: frame-after-black-animation, frame-after-orange-pink-animation;
}
/* 枠ドロップシャドウ - 黒 + 青・ピンク */
.frame.frame-after-blue-pink.active::after {
  animation-name: frame-after-black-animation, frame-after-blue-pink-animation;
}
/* 枠ドロップシャドウ - 黒 + 青・黄 */
.frame.frame-after-blue-yellow.active::after {
  animation-name: frame-after-black-animation, frame-after-blue-yellow-animation;
}
/* 枠ドロップシャドウ - 黒 + 緑・ピンク */
.frame.frame-after-green-pink.active::after {
  animation-name: frame-after-black-animation, frame-after-green-pink-animation;
}
/* 枠ドロップシャドウ - 黒 + オレンジ・青 */
.frame.frame-after-orange-blue.active::after {
  animation-name: frame-after-black-animation, frame-after-orange-blue-animation;
}
/* 枠ドロップシャドウ - 黒 + オレンジ・黄 */
.frame.frame-after-orange-yellow.active::after {
  animation-name: frame-after-black-animation, frame-after-orange-yellow-animation;
}
/* リンクボタン - 点滅 */
.frame.frame-span-flicker.active p span:not(.excl) {
  animation: flicker-animation 4s ease-out infinite;
  animation-delay: 1s;
}

/* ----- 表示アニメーション ----- */
/* 枠背景 - 白 */
@keyframes frame-before-white-animation {
  33%  { outline-color: var(--color-transp); background-color: var(--color-transp); }
  34%  { outline-color: var(--color-black); background-color: var(--color-white); }
  100% { outline-color: var(--color-black); background-color: var(--color-white); }
}
/* 枠背景 - 黒 */
@keyframes frame-before-black-animation {
  33%  { outline-color: var(--color-transp); background-color: var(--color-transp); }
  34%  { outline-color: var(--color-black); background-color: var(--color-black); }
  100% { outline-color: var(--color-black); background-color: var(--color-black); }
}
/* 枠文字 - オレンジ */
@keyframes frame-span-orange-animation {
  33%  { color: var(--color-transp); }
  34%  { color: var(--color-orange); }
  100% { color: var(--color-orange); }
}
/* 枠文字 - 白 */
@keyframes frame-span-white-animation {
  33%  { color: var(--color-transp); }
  34%  { color: var(--color-white); }
  100% { color: var(--color-white); }
}
/* 枠文字 - 画像 */
@keyframes frame-span-img-animation {
  33%  { opacity: 0; }
  34%  { opacity: 1; }
  100% { opacity: 1; }
}
/* 枠ドロップシャドウ - 黒 */
@keyframes frame-after-black-animation {
  0%   { width: 0%;             outline-width: 0; }
  32%  { width: 100%;}
  37%  { width: 100%; left: 0%; outline-width: .2em; }
  69%  { width: 0%; left: 100%; outline-width: 0; }
  74%  {                                          z-index: 4; }
  75%  { width: 0%; left: 100%; outline-width: 0; z-index: 1; top: 0; left: 0; }
  76%  { width: 100%; left: 0%; outline-width: .2em; }
  100% { width: 100%; left: 0%; outline-width: .2em; z-index: 1; top: .4em; left: .3em; }
}
/* 枠ドロップシャドウ - 黒 + 紫から緑 */
@keyframes frame-after-purple-green-animation {
  74%  { background-image: none; }
  75%  { background-image: var(--bgcolor-purple-green); }
  100% { background-image: var(--bgcolor-purple-green); }
}
/* 枠ドロップシャドウ - 黒 + オレンジからピンク */
@keyframes frame-after-orange-pink-animation {
  74%  { background-image: none; }
  75%  { background-image: var(--bgcolor-orange-pink); }
  100% { background-image: var(--bgcolor-orange-pink); }
}
/* 枠ドロップシャドウ - 黒 + 青からピンク */
@keyframes frame-after-blue-pink-animation {
  74%  { background-image: none; }
  75%  { background-image: var(--bgcolor-blue-pink); }
  100% { background-image: var(--bgcolor-blue-pink); }
}
/* 枠ドロップシャドウ - 黒 + 青から黄 */
@keyframes frame-after-blue-yellow-animation {
  74%  { background-image: none; }
  75%  { background-image: var(--bgcolor-blue-yellow); }
  100% { background-image: var(--bgcolor-blue-yellow); }
}
/* 枠ドロップシャドウ - 黒 + 緑からピンク */
@keyframes frame-after-green-pink-animation {
  74%  { background-image: none; }
  75%  { background-image: var(--bgcolor-green-pink); }
  100% { background-image: var(--bgcolor-green-pink); }
}
/* 枠ドロップシャドウ - 黒 + オレンジから青 */
@keyframes frame-after-orange-blue-animation {
  74%  { background-image: none; }
  75%  { background-image: var(--bgcolor-orange-blue); }
  100% { background-image: var(--bgcolor-orange-blue); }
}
/* 枠ドロップシャドウ - 黒 + オレンジから黄 */
@keyframes frame-after-orange-yellow-animation {
  74%  { background-image: none; }
  75%  { background-image: var(--bgcolor-orange-yellow); }
  100% { background-image: var(--bgcolor-orange-yellow); }
}
/* リンクボタン - 点滅 */
@keyframes flicker-animation {
  0%   { opacity: 1; }
  2%   { opacity: .5; }
  4%   { opacity: 1; }
  6%   { opacity: .5; }
  8%   { opacity: 1; }
  10%  { opacity: .5; }
  12%  { opacity: 1; }
  100% { opacity: 1; }
}

/*
 *  --  八角形枠
 */
.visual-box .octagon-border,
.visual-box .octagon-inner {
  width: 100%;
  height: 100%;
  clip-path: polygon(20% 0%, 80% 0%, 100% 12%, 100% 88%, 80% 100%, 20% 100%, 0% 88%, 0% 12%);
}
.books-box .octagon-border,
.books-box .octagon-inner {
  width: 100%;
  height: 100%;
  clip-path: polygon(20% 0%, 80% 0%, 100% 6.5%, 100% 93.5%, 80% 100%, 20% 100%, 0% 93.5%, 0% 6.5%);
}
.octagon-border {
  padding: 1.25%;
  background-color: var(--color-black);
}
.octagon-inner {
  background-color: var(--color-white);
}

/*
 *  --  エクスクラメーションマーク調整
 */
.excl {
  padding-left: .15em;
}

/*
 *  --  ネガティブマージン調整用
 */
.negative-margin-200 {
  margin-bottom: max(-35vw, -200px);
}
@media (min-width: 1124px) {
  .negative-margin-200 {
    margin-bottom: 0;
  }
}


/*--------------------------------------------------
 * site contents
--------------------------------------------------*/
.site-contents {
  display: block;
}
  @media (min-width: 601px) {
    .site-contents {
      display: grid;
      grid-template-columns: 1fr var(--main-max-width);
    }
  }
  @media (min-width: 1124px) {
    .site-contents {
      grid-template-columns: 1fr var(--main-max-width) 1fr;
    }
  }

/*--------------------------------------------------
 * bg contents
--------------------------------------------------*/
.bg-contents {
  display: none;
}
  @media (min-width: 601px) {
    .bg-contents {
      display: block;
      position: sticky;
      width: 100%;
      height: 100vh;
      top: 0;
      background-image: url(/books/moonfighters/img/pc-bg.webp);
      background-position: 100% 0;
      background-size: cover;
    }
  }

/*--------------------------------------------------
 * nav contents
--------------------------------------------------*/
/*
 *  --  ボタン
 */
.nav-button {
  position: fixed;
  width: 1.2em;
  height: 1.2em;
  top: min(3.33vw, 20px);
  right: min(5vw, 30px);
  color: var(--color-orange);
  background-color: var(--color-white);
  font-size: var(--fontsize-50);
  border: 0.1em solid var(--main-color-black);
  border-radius: 50%;
  z-index: 99;
}
  @media (min-width: 1124px) {
    .nav-button {
      display: none;
    }
  }
.nav-button-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.nav-button-inner span {
  position: absolute;
  width: 60%;
  height: 0.1em;
  inset: 0;
  margin: auto;
  background-color: var(--color-orange);
  border-radius: 0.1em;
  transition: 0.3s ease-out;
}
.nav-button-inner span.nav-button-1 {
  top: -0.35em;
}
.nav-show .nav-button-inner span.nav-button-1 {
  top: 0;
  transform: rotate(-45deg);
}
.nav-show .nav-button-inner span.nav-button-2 {
  display: none;
}
.nav-button-inner span.nav-button-3 {
  top: 0.35em;
}
.nav-show .nav-button-inner span.nav-button-3 {
  top: 0;
  transform: rotate(45deg);
}
/*
 *  --  メニュー
 */
.nav-contents {
  position: fixed;
  width: 100%;
  max-width: var(--main-max-width);
  height: 100vh;
  top: 0;
  right: -100%;
  overflow: hidden;
  z-index: 98;
  transition: 0.3s ease-out;
}
  @media (min-width: 1124px) {
    .nav-contents {
      position: sticky;
      max-width: 100%;
      right: auto;
    }
  }
.nav-show.nav-contents {
  right: 0%;
}
.nav-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: min(23.33vw, 140px) min(5vw, 30px) 0;
  background-color: var(--color-white);
  overflow-y: auto;
}
  @media (min-width: 1124px) {
    .nav-inner {
      justify-content: space-between;
      align-items: flex-start;
      padding: 40px 30px;
      background-color: var(--color-yellow);
    }
  }
.nav-logo {
  position: absolute;
  width: min(33.33vw, 200px);
  top: min(3.33vw, 20px);
  left: min(5vw, 30px);
}
  @media (min-width: 1124px) {
    .nav-logo {
      display: none;
    }
  }
.nav-list>li {
  padding-bottom: min(3.33vw, 20px);
  text-align: center;
}
  @media (min-width: 1124px) {
    .nav-list>li {
      text-align: left;
    }
  }
.nav-list>li>a {
  display: inline-block;
  font-family: var(--fontfamily-for-alphanumeric);
  font-size: var(--fontsize-22);
  font-weight: 700;
}
.nav-list>li>a:hover {
  text-decoration: none;
}
.nav-list-topic-link>li {
  max-width: min(60vw, 360px);
}
.nav-list-topic-link>li+li {
  padding-top: min(4vw, 24px);
}

.nav-list-topic-link .frame {
  font-size: var(--fontsize-18);
}
.nav-list-topic-link img {
  vertical-align: baseline;
}
.nav-footer {
  display: none;
}
  @media (min-width: 1124px) {
    .nav-footer {
      display: block;
    }
    .nav-footer .footer-social-list {
      gap: 1em;
      width: 120px;
      padding: 0;
      margin: 0;
    }
    .nav-footer .footer-link-list {
      align-items: flex-start;
      gap: 0.7em;
      padding: 15px 0;
    }
    .nav-footer .ka-esuma {
      width: 120px;
    }
    .nav-footer .kyotoanimation {
      width: 160px;
    }
    .nav-footer .footer-copyright {
      padding: 0;
      text-align: left;
      font-size: 10px;
    }
  }

/*--------------------------------------------------
 * main contents
--------------------------------------------------*/
.main-contents {
  position: relative;
  width: 100%;
  max-width: var(--main-max-width);
  height: 100%;
  margin: auto;
  background-color: var(--color-white);
  overflow: hidden;
}
.main-contents:before {
  content: "";
  position: fixed;
  width: 100%;
  max-width: var(--main-max-width);
  height: 100vh;
  background-image: url(/books/moonfighters/img/main-bg.webp);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
  z-index: 0;
}
.main-inner>section {
  position: relative;
}
.main-inner>section:not(.books-contents) {
  background-color: var(--color-white);
}

/* ----- 見出し ----- */
.heading-box {
  position: absolute;
  top: -1em;
  padding: 0 5%;
}

/*
 *  --  メインビジュアル
 */
.visual-inner {
  position: relative;
  padding: min(17.5vw, 105px) 0 min(2.50vw, 15px);
}
.visual-box {
  width: 90%;
  height: min(111.67vw, 670px);
  margin: auto;
}
.visual-image {
  background-image: url(/books/moonfighters/img/moonfighters-mainvisual.webp);
  background-size: cover;
  background-position: center 0%;
  animation: visual-image-animation 30s ease-in-out infinite;
}
@keyframes visual-image-animation {
  0% { background-position-y: 0%; }
  50% { background-position-y: 100%; }
  100% { background-position-y: 0%; }
}
/* ロゴ */
.logo {
  position: absolute;
  inset: min(5.83vw, 35px) 0 auto 0;
  width: min(76.67vw, 460px);
  margin: auto;
}
/* キャッチコピー */
.copy {
  position: absolute;
  width: min(65.83vw, 395px);
  right: 10.5%;
  bottom: 0.9%;
  z-index: 3;
}
/* 発売日情報 */
.release-box {
  position: absolute;
  width: min(30vw, 180px);
  height: min(30vw, 180px);
  right: 5%;
  bottom: 2%;
}
.release-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.release-box-inner span {
  position: absolute;
  width: 100%;
  height: 100%;
}
.release-dropshadow {
  inset: 5% 0 0 5%;
  background-image: url(/books/moonfighters/img/moonfighters-release-bg.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  animation: release-bg-animation 5s linear infinite;
}
.release-bg {
  -webkit-mask-image: url(/books/moonfighters/img/moonfighters-release-bg.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: cover;
  mask-image: url(/books/moonfighters/img/moonfighters-release-bg.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
  animation: release-bg-animation 5s linear infinite;
}
.release-bg::before {
  content: "";
  position: absolute;
  width: 110%;
  height: 110%;
  top: -5%;
  left: -5%;
  background-image: linear-gradient(135deg, hsl(343deg 100% 58%) 30%, hsl(24deg 100% 59%) 50%, hsl(50deg 100% 49%) 65%, hsl(65deg 100% 55%) 80%);
  animation: release-bg-revers-animation 5s linear infinite;
}
@keyframes release-bg-animation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes release-bg-revers-animation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
.release-1122 {
  position: relative;
  padding: min(6.67vw, 40px) min(4.33vw, 26px) 0 min(7.00vw, 42px);
}
.onsale {
  position: relative;
  padding: min(6.67vw, 40px) min(4vw, 24px) 0px min(5.5vw, 33px);
}
/* 著者 */
.author {
  padding: min(5vw, 30px) min(11.67vw, 70px);
}

/*
 *  --  topic contents トピックス
 */
.topic-inner {
  padding: min(3.33vw, 20px) min(6.67vw, 40px) min(11.67vw, 70px);
}
.topic-link-list li + li {
  padding-top: min(6.67vw, 40px);
}
.topic-link-list li + li {
  padding-top: min(6.67vw, 40px);
}
.topic-link-list li.banner + li.banner {
	padding-top: min(5vw, 30px);
}
.banner a {
  display: block;
  border: 5px var(--color-black) solid;
}
.movie-list {
  padding-top: min(10vw, 60px);
}
.youtube {
  display: block;
  border: 5px var(--color-black) solid;
}

/*
 *  --  update contents アップデート情報
 */
.update-inner {
  padding: min(13.33vw, 80px) 0;
}
.update-list {
  width: min(80vw, 480px);
  height: min(43.33vw, 260px);
  padding: 0.5em;
  margin: auto;
  overflow-y: scroll;
}
.update-list::-webkit-scrollbar {
  width: var(--sb-size);
}
.update-list::-webkit-scrollbar-track {
  background: var(--sb-track-color);
	border-radius: var(--sb-radius-size);
}
.update-list::-webkit-scrollbar-thumb {
	background: var(--sb-thumb-color);
	border-radius: var(--sb-radius-size);
}
.update-list li + li {
  padding-top: min(5vw, 30px);
}
.update-on {
  font-family: var(--fontfamily-for-alphanumeric);
  font-size: var(--fontsize-18);
  font-weight: 700;
  line-height: 1;
}
.update-txt {
  display: inline-block;
  font-size: var(--fontsize-20);
  font-weight: 700;
}

/*
 *  --  introduction contents イントロダクション
 */
.introduction-inner {
  background-image: linear-gradient(135deg,hsl(52deg 100% 61%) 0%,hsl(41deg 100% 56%) 50%, hsl(29deg 100% 56%) 100%);
}
.intro-1 {
  padding: min(15vw, 90px) min(8.33vw, 50px) min(5vw, 30px);
}
.intro-2-box {
  background-color: #ff5408;
}
.intro-2 {
  padding: min(1.67vw, 10px) min(7vw, 42px);
}
.intro-3 {
  padding: min(4.17vw, 25px) min(15vw, 90px) min(20vw, 120px);
}

/*
 *  --  story contents ストーリー
 */
.story-box {
  padding: min(15vw, 90px) min(5vw, 30px);
  background-image: url(/books/moonfighters/img/story-bg.webp);
  background-position: center;
  background-size: cover;
}

/*
 *  --  character contents キャラクターリンク
 */
.character-link-box {
  position: relative;
  width: 100vw;
  max-width: var(--main-max-width);
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}
.character-link-image {
  width: 100%;
  height: calc(min(100vw, 600px) * (580/834));
  background-image: url(/books/moonfighters/img/character-link-bg.png);
  background-position: center;
  background-size: cover;
}
.character-link-image > img {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transform: scale(1.3);
}
.character-link-image.active .character-link-1 {
  animation: character-link-1-animation 1s ease-out forwards;
}
.character-link-image.active .character-link-2 {
  animation: character-link-2-animation 1s ease-out forwards;
}
.character-link-image.active .character-link-3 {
  animation: character-link-3-animation 1s ease-out forwards;
}
.character-link-image.active .character-link-4 {
  animation: character-link-4-animation 1s ease-out forwards;
}
.character-link-image.active .character-link-5 {
  animation: character-link-5-animation 1s ease-out forwards;
}
@keyframes character-link-1-animation {
  0%   { opacity: 0; transform: scale(1.3); }
  50%  { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes character-link-2-animation {
  10%   { opacity: 0; transform: scale(1.3); }
  60%  { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes character-link-3-animation {
  20%   { opacity: 0; transform: scale(1.3); }
  70%  { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes character-link-4-animation {
  30%   { opacity: 0; transform: scale(1.3); }
  80%  { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes character-link-5-animation {
  40%   { opacity: 0; transform: scale(1.3); }
  90%  { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
.character-link-frame-box {
  position: absolute;
  inset: 75% 0 0 0;
  margin: auto;
  text-align: center;
}
.frame.character-link-frame-txt {
  width: min(51.67vw, 310px);
  font-size: var(--fontsize-26);
  font-style: italic;
}

/*
 *  --  special contents スペシャル
 */
.special-inner .heading-box {
  top: min(6.67vw, 40px);
}
.special-inner {
  background-image: linear-gradient( 135deg, hsl(0deg 100% 72%) 0%, hsl(322deg 100% 50%) 50%, hsl(275deg 100% 56%) 100% );
}
.special-box {
  padding: min(26.67vw, 160px) min(6.67vw, 40px) min(20vw, 120px);
}
.special-link-list>li + li {
  padding-top: min(6.67vw, 40px);
}

/*
 *  --  qanda contents 一問一答
 */
.qanda-box {
  padding: min(16.67vw, 100px) 0 min(13.33vw, 80px);
}
.swiper {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  width: 80%;
  text-align: center;
}
.swiper-navigation {
  display: grid;
  justify-content: center;
  align-content: center;
  grid-template-columns: auto auto;
  gap: 40px;
  padding: 20px;
}
.swiper-navigation .swiper-button-next,
.swiper-navigation .swiper-button-prev {
  padding: 10px 30px;
  color: #FFF;
  background-color: #ffab38;
  border-radius: 30px;
  cursor: pointer;
}

/*
 *  --  books contents 書籍情報
 */
.books-inner {
  padding: min(16.67vw, 100px) 0 min(35vw, 200px);
}
  @media (min-width: 1124px) {
    .books-inner {
      padding: 100px 0 40px;
    }
  }
.books-box {
  width: 90%;
  height: 100%;
  margin: auto;
}
.books-box-inner {
  padding: 12%;
}
.books-detail {
  padding: 1em 0;
}
.books-detail-title {
  padding: .25em 0;
  font-family: var(--fontfamily-for-alphanumeric);
  font-size: var(--fontsize-30);
  font-weight: 700;
}
.books-detail-head {
  padding-right: 1em;
  color: var(--color-orange);
  font-size: var(--fontsize-18);
  font-weight: 700;
}
.books-detail-txt {
  font-size: var(--fontsize-20);
  font-weight: 700;
}
.books-link a {
  position: relative;
  display: block;
  margin: 0.7em 0;
  padding: .5em 1em;
  color: var(--color-white);
  background-color: var(--color-black);
  font-size: var(--fontsize-18);
  font-weight: 700;
}
.books-link a:hover {
  text-decoration: none;
}
.books-link a:before,
.books-link a:after {
  content: "";
  width: .5em;
  height: .5em;
  border-top: solid 2px;
  border-right: solid 2px;
  position: absolute;
  top: 50%;
  transform: rotate(45deg) translateY(-50%) skew(-15deg, -15deg);
}
.books-link a:before {
  right: 2.2em;
}
.books-link a:after {
  right: 1.5em;
}
.books-simultaneous-publication {
  padding: min(10vw, 60px);
}

.footer-contents {
}
@media (min-width: 1124px) {
  .footer-contents {
    display: none;
  }
}

/*
 *  --  footer contents
 */
.footer-inner {
  position: relative;
  font-size: var(--fontsize-14);
  overflow: hidden;
}
.footer-inner:before {
  content: "";
  position: absolute;
  width: min(130vw, 700px);
  height: 100%;
  top: min(10vw, 60px);
  left: 50%;
  background-color: var(--color-yellow);
  border-radius: 100% 100% 0 0;
  transform: translateX(-50%);
}
.footer-box {
  position: relative;
}
.footer-logo {
  width: min(57.5vw, 345px);
  margin: auto;
}
.footer-social-list {
  display: flex;
  justify-content: center;
  gap: 2em;
  width: min(33.33vw, 200px);
  margin: auto;
  padding: min(6.67vw, 40px) 0;
}
.footer-link-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
}
.ka-esuma {
  width: min(35vw, 210px);
}
.kyotoanimation {
  width: min(46.67vw, 280px);
}
.footer-copyright {
  padding: 2em 0 3em;
  text-align: center;
  font-size: var(--fontsize-14);
}



/*--------------------------------------------------
 * 個別ページ
--------------------------------------------------*/
/*
 *  --  共通
 */
.lower .main-contents:before {
  content: none;
}
.lower-logo {
  position: absolute;
  width: min(33.33vw, 200px);
  top: min(3.33vw, 20px);
  left: min(5vw, 30px);
  z-index: 1;
}
.lower-heading-box {
  padding: 0 5%;
}
.sub-contents-inner {
  padding: min(20vw,120px) 0 min(35vw, 200px);
}
@media (min-width: 1124px) {
  .sub-contents-inner {
    padding: 120px 0 30px;
  }
}
/* トップページへ */
.backtotop-link {
  padding: min(10vw, 60px) 0 min(16.67vw, 100px);
  text-align: center;
}
.frame.backtotop-link-frame-txt {
  width: min(51.67vw, 310px);
  font-size: var(--fontsize-26);
  font-style: italic;
}


/*--------------------------------------------------
 * character contents キャラクター
--------------------------------------------------*/
/*
 *  --  ナビ + 枠 調整
 */
/* ナビ */
.character-list-nav {
  display: flex;
  justify-content: space-between;
  padding: min(8.33vw, 50px) min(6.67vw, 40px);
}
.character-list-nav a {
  display: block;
}
/* 枠 調整 */
.frame.frame-span-chara {
  padding: 0;
}
.frame.frame-span-chara span {
  position: relative;
  display: block;
  width: min(13.33vw, 80px);
  height: calc(min(13.33vw, 80px) * (115/150));
  aspect-ratio: 150/115;
  -webkit-mask-image: linear-gradient(0deg, black, black);
  mask-image: linear-gradient(0deg, black, black);
  transform: skewX(-10deg);
}
.frame.frame-span-chara span::before {
  content: "";
  position: absolute;
  display: block;
  width: 120%;
  height: 100%;
  top: 0;
  left: 50%;
  background-position: center;
  background-size: cover;
  transform: translateX(-50%) skewX(10deg);
}
.frame.frame-visible.frame-span-chara::after {
  top: .05em;
  left: 0;
  padding: .15em;
  background-color: var(--color-transp);
  outline: 0;
}
/* 枠 キャラクター */
.frame.frame-span-chara.frame-after-masoho span::before {
  background-image: url(/books/moonfighters/img/character-nav-1.png);
}
.frame.frame-span-chara.frame-after-ebizome span::before {
  background-image: url(/books/moonfighters/img/character-nav-2.png);
}
.frame.frame-span-chara.frame-after-tokiwa span::before {
  background-image: url(/books/moonfighters/img/character-nav-3.png);
}
.frame.frame-span-chara.frame-after-kariyasu span::before {
  background-image: url(/books/moonfighters/img/character-nav-4.png);
}
.frame.frame-span-chara.frame-after-gunjo span::before {
  background-image: url(/books/moonfighters/img/character-nav-5.png);
}
/* 枠 キャラクター 背景色 */
.frame.frame-visible.frame-after-masoho::after {
  background-image: var(--bgcolor-masoho);
}
.frame.frame-visible.frame-after-ebizome::after {
  background-image: var(--bgcolor-ebizome);
}
.frame.frame-visible.frame-after-tokiwa::after {
  background-image: var(--bgcolor-tokiwa);
}
.frame.frame-visible.frame-after-kariyasu::after {
  background-image: var(--bgcolor-kariyasu);
}
.frame.frame-visible.frame-after-gunjo::after {
  background-image: var(--bgcolor-gunjo);
}

/*
 *  --  キャラクター 紹介
 */
/* ----- キャラクターイメージ ----- */
.character-img-box {
  position: relative;
  width: 100%;
  height: 100%;
}
.character-img-box::before {
  content: "";
  display: block;
  padding-top: calc(100%*(1290/834));
}
.character-img-box>li {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  visibility: hidden;
}
.character-img-box>li.c-active {
  visibility: visible;
}
.character-img-box>li>div {
  position: absolute;
}
/* 名前 英字 */
.character-name-en {
  width: min(10.83vw, 65px);
  bottom: 0;
}
.c-masoho .character-name-en,
.c-kariyasu .character-name-en {
  left: min(5vw, 30px);
}
.c-ebizome .character-name-en,
.c-tokiwa .character-name-en,
.c-gunjo .character-name-en {
  right: min(5vw, 30px);
}
/* 名前 */
.character-name {
  top: 0;
  left: min(5vw, 30px);
}
.c-masoho .character-name {
  width: min(44vw, 264px);
}
.c-ebizome .character-name {
  width: min(44vw, 264px);
}
.c-tokiwa .character-name {
  width: min(36vw, 216px);
}
.c-kariyasu .character-name {
  width: min(29.17vw, 175px);
}
.c-gunjo .character-name {
  width: min(31.17vw, 187px);
}

/* ----- キャラクターイメージ 表示アニメーション ----- */
/* 背景 */
.character-bg {
  -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,1) 90%,rgba(0,0,0,0) 90%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 1000%;
  mask-image: linear-gradient(0deg, rgba(0,0,0,1) 90%,rgba(0,0,0,0) 90%);
  mask-repeat: no-repeat;
  mask-size: 100% 1000%;
}
.c-active .character-bg {
  animation: character-bg-animation .5s ease-out forwards;
}
@keyframes character-bg-animation {
  0%  { -webkit-mask-size: 100% 1000%; mask-size: 100% 1000%; }
  100% { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
}
/* 名前 英字 */
.character-name-en {
  bottom: 2%;
  opacity: 0;
}
.c-active .character-name-en {
  animation: character-name-en-animation .2s ease-out forwards;
  animation-delay: .7s;
}
@keyframes character-name-en-animation {
  0%  { bottom: 2%; opacity: 0; }
  100% { bottom: 0%; opacity: 1; }
}
/* キャラクター全身 */
.character-figure {
  height: 0%;
  top: -1%;
  overflow: hidden;
}
.c-active .character-figure {
  animation: character-figure-animation .5s ease-out forwards;
  animation-delay: .2s;
}
@keyframes character-figure-animation {
  0%  { height: 0%; top: -1%; }
  100% { height: 100%; top: 0%; }
}
/* セリフ */
.character-quote {
  top: -1%;
  opacity: 0;
}
.c-active .character-quote {
  animation: character-quote-animation .2s ease-out forwards;
  animation-delay: .6s;
}
@keyframes character-quote-animation {
  0%  { top: -1%; opacity: 0; }
  100% { top: 0%; opacity: 1; }
}
/* 名前 */
.character-name::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 100%;
  top: 0;
  left: 0%;
  background-color: var(--color-black);
}
.character-name img {
  opacity: 0;
}
.c-active .character-name img {
  animation: character-name-img-animation .3s ease-out forwards;
  animation-delay: .7s;
}
.c-active .character-name::after {
  animation: character-name-animation .3s ease-out forwards;
  animation-delay: .7s;
}
@keyframes character-name-img-animation {
  40%  { opacity: 0; }
  60%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes character-name-animation {
  0%   { width: 0%; left: 0%; }
  40%  { width: 100%; left: 0%; }
  60%  { width: 100%; left: 0%; }
  100% { width: 0%; left: 100%; }
}


/* ----- キャラクタープロフィール ----- */
.character-personal-data {
  padding: min(6.67vw, 40px) min(10vw, 60px);
  font-size: var(--fontsize-20);
  font-weight: 700;
}
.character-personal-data>li {
  display: none;
}
.character-personal-data>li.c-active {
  display: block;
}
.character-profile-txt {
  line-height: 2;
}
.character-profile-sheet {
  display: flex;
  flex-wrap: wrap;
  padding-top: min(6.67vw, 40px);
}
.character-profile-sheet dt {
  width: 35%;
  font-weight: bold;
}
.c-masoho .character-profile-sheet dt {
  color: var(--color-masoho);
}
.c-ebizome .character-profile-sheet dt {
  color: var(--color-ebizome);
}
.c-tokiwa .character-profile-sheet dt {
  color: var(--color-tokiwa);
}
.c-kariyasu .character-profile-sheet dt {
  color: var(--color-kariyasu);
}
.c-gunjo .character-profile-sheet dt {
  color: var(--color-gunjo);
}
.character-profile-sheet dd {
  width: 65%;
}


/* ----- キャラクター一問一答 ----- */
.character-qa-title {
  padding: min(3.33vw, 20px) min(15vw, 90px);
  background-color: var(--color-orange);
}
.character-qa-list {
  padding: min(6.67vw, 40px) min(10vw, 60px) min(13.33vw, 80px);
}
.character-qa-list>li {
  display: none;
}
.character-qa-list>li.c-active {
  display: block;
}
.character-qa dt {
  color: var(--color-brightorange);
  font-size: var(--fontsize-20);
  font-weight: 700;
}
.character-qa-list dd + dt {
  padding-top: min(5vw, 30px);
}
.c-masoho .character-qa dt {
  color: var(--color-masoho);
}
.c-ebizome .character-qa dt {
  color: var(--color-ebizome);
}
.c-tokiwa .character-qa dt {
  color: var(--color-tokiwa);
}
.c-kariyasu .character-qa dt {
  color: var(--color-kariyasu);
}
.c-gunjo .character-qa dt {
  color: var(--color-gunjo);
}
.character-qa-list dd {
  padding-top: 5px;
  font-size: var(--fontsize-20);
  font-weight: 700;
}



/*
 *  --  用語 鴻救命株式会社
 */
.glossary-box {
  background-color: var(--color-orange);
}
.glossary-title {
  padding: min(5vw, 30px) min(23.33vw, 140px);
}
.glossary-txt {
  padding: 0 min(10vw, 60px) min(6.67vw, 40px);
  color: var(--color-white);
  font-size: var(--fontsize-20);
  font-weight: 700;
}


/*--------------------------------------------------
 * interview contents スタッフ鼎談
--------------------------------------------------*/
.interview-box {
  padding: min(13.33vw, 80px) min(6.67vw, 40px);
}
.interview-heading {
}
.interview-lead {
  margin: min(10vw, 60px) 0;
  font-size: var(--fontsize-20);
  font-weight: 700;
  text-align: justify;
}
.interview-subtitle {
  margin: min(10vw, 60px) 0 min(6.67vw, 40px);
  font-size: var(--fontsize-26);
  font-weight: 700;
  text-align: justify;
}
.interview-body {
  font-size: var(--fontsize-20);
  line-height: 1.8;
  text-align: justify;
}
.interview-notes {
  margin: min(5vw, 30px) 0;
  font-size: var(--fontsize-14);
  padding-left: 1em;
  text-indent: -1em;
}
.interview-question {
  margin: min(6.67vw, 40px) 0;
  color: var(--color-brightorange);
}
.interview-answer {
  display: flex;
  width: 100%;
  margin: min(5vw, 30px) 0;
}
.answer-maruki,
.answer-hata,
.answer-takayama {
  width: min(10vw, 60px);
  font-weight: 700;
}
.answer-maruki {
  color: #ff5151;
}
.answer-hata {
  color: #04aa10;
}
.answer-takayama {
  color: #577df9;
}
.answer-text {
  width: min(76.67vw, 460px);
}
.interview-story {
  background-color: var(--color-yellow-marker);
  font-weight: 700;
}
.interview-images + .interview-images {
  padding-top: 10px;
}
.interview-images>figcaption {
  padding-bottom: 5px;
  color: var(--color-brightorange);
  font-size: var(--fontsize-16);
}
.interview-images>img {
  outline: #DDD solid 1px;
}


/*--------------------------------------------------
 * comment contents 発売記念コメント
--------------------------------------------------*/
.comment-box {
  padding: min(13.33vw, 80px) min(6.67vw, 40px);
}
.comment-box + .comment-box {
  padding-top: 0px;
}
.comment-heading {
  font-size: min(6.33vw, 38px);
  font-weight: 700;
}
.comment-body {

}
.comment-author {
  padding-top: min(6.67vw, 40px);
  color: var(--color-brightorange);
  font-weight: 700;
}
.comment-name {
  font-size: var(--fontsize-30);
}
.comment-role {
  font-size: var(--fontsize-20);
}
.comment-data-txt {
  padding: min(3.33vw, 20px);
  text-align: justify;
  font-size: var(--fontsize-20);
  font-weight: 700;
}
@media (min-width: 601px) {
  .comment-data-txt {
    font-weight: 400;
  }
}
.comment-data-image{
  padding: min(3.33vw, 20px);
}
.comment-data-image>img {
  outline: #DDD solid 1px;
}


/*--------------------------------------------------
 * present contents アイコン・壁紙プレゼント
--------------------------------------------------*/
.present-box {
  padding: min(13.33vw, 80px) min(6.67vw, 40px);
}
.present-heading {
  font-size: min(6.33vw, 38px);
  font-weight: 700;
}
.present-lead {
  padding: min(3.33vw, 20px) 0;
  font-size: var(--fontsize-20);
  font-weight: 700;
}
.present-notes {
  padding-left: 1.1em;
  text-indent: -1.1em;
  font-size: var(--fontsize-16);
}
.present-list-sns,
.present-list-wallpaper {
  padding: min(3.33vw, 20px) 0 min(13.33vw, 80px);
}
.present-title {
  padding-top: min(6.67vw, 40px);
  color: var(--color-brightorange);
  font-size: var(--fontsize-30);
  font-weight: 700;
}
.present-list-image {
  display: flex;
  justify-content: space-between;
  gap: min(1.67vw, 10px);
}
.present-list-image1 {
  width: min(67.83vw, 407px);
}
.present-list-image2 {
  width: min(17.17vw, 103px);
}
.present-list-image img {
  outline: 1px #6f6f6f solid;
}
.present-list-dl li,
.present-list-dl li.wp-zip {
  padding-top: 1.5em;
}
.present-list-dl li + li {
  padding-top: .7em;
}
.present-list-dl a {
  display: block;
  width: min(60vw, 360px);
  margin: auto;
  padding: .5em 1em;
  background-color: var(--color-black);
  color: var(--color-white);
  font-size: var(--fontsize-18);
  font-weight: 700;
  text-align: center;
}
.present-list-dl a:hover {
  text-decoration: none;
}
.present-list-dl a span + span {
  display: block;
  font-size: var(--fontsize-14);
}