@charset "UTF-8";
/* =====================================================
  1.0 - Foundation
===================================================== */
/* ===============================================
  関数の登録
=============================================== */
/*
  数値から単位を取り除く
----------------------------------------------- */
/*
  px→remの計算
----------------------------------------------- */
/*
  px→vwの計算
----------------------------------------------- */
/*
  文字列からワードを検索して置換する
----------------------------------------------- */
/*
  @font-faceの設定
----------------------------------------------- */
/*
  object-fit
----------------------------------------------- */
@font-face {
  font-family: "Futura";
  src: url("../assets/font/FuturaStd-Bold.otf") format("otf");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Futura";
  src: url("../assets/font/FuturaStd-Heavy.otf") format("otf");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Futura";
  src: url("../assets/font/FuturaStd-Light.otf") format("otf");
  font-weight: 400;
  font-style: normal;
}
/*
  Reset
-----------------------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

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

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

a {
  text-decoration: none;
}

address {
  font-style: normal;
}

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

svg {
  max-width: 100%;
  height: auto;
  fill: currentcolor;
  vertical-align: bottom;
}

input,
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/*
  Base
-----------------------------------------------------*/
html *,
html *:before,
html *:after {
  box-sizing: inherit;
}

*,
:before,
:after {
  box-sizing: inherit;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

body {
  height: 100%;
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.1em;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif;
  color: #707070;
  text-rendering: optimizeLegibility;
  font-feature-settings: "pkna";
}
body.is-drawerActive {
  overflow: hidden;
}

[lang=en] {
  font-family: "Futura", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif;
  font-weight: 500;
  letter-spacing: 0.2em;
}

a {
  color: #fff;
}

/* =====================================================
  .0 - Layout
===================================================== */
/*
----------------------------------------------- */
.l-container {
  position: relative;
  z-index: 0;
  max-width: 768px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.l-section {
  padding: 76px 0;
}
.l-section + .l-section {
  padding-top: 0;
}
.l-section--slim {
  padding: 48px 0;
}
.l-section--slim .l-section--slim {
  padding-bottom: 0;
}

.l-inner {
  padding: 0 3.3333333333%;
  width: 100%;
}
.l-inner--slim {
  padding: 0 6.6666666667%;
}

.l-fullwide {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.l-grid {
  display: grid;
}
.l-grid_col2 {
  grid-template-columns: 1fr 1fr;
}

/* =====================================================
  3.0 - Objectr
===================================================== */
/*
  3.2 - Project
-----------------------------------------------------*/
main {
  background-position: center;
}
.Paper_v2 {
  background-image: repeating-linear-gradient(to bottom, transparent 25px, rgba(0, 0, 0, 0.04) 26px, rgba(0, 0, 0, 0.04) 26px, transparent 27px, transparent 51px, rgba(0, 0, 0, 0.04) 52px, rgba(0, 0, 0, 0.04) 52px, transparent 53px, transparent 77px, rgba(0, 0, 0, 0.04) 78px, rgba(0, 0, 0, 0.04) 78px, transparent 79px, transparent 103px, rgba(0, 0, 0, 0.04) 104px, rgba(0, 0, 0, 0.04) 104px, transparent 105px, transparent 129px, rgba(0, 0, 0, 0.04) 130px, rgba(0, 0, 0, 0.04) 130px), repeating-linear-gradient(to right, transparent 25px, rgba(0, 0, 0, 0.04) 26px, rgba(0, 0, 0, 0.04) 26px, transparent 27px, transparent 51px, rgba(0, 0, 0, 0.04) 52px, rgba(0, 0, 0, 0.04) 52px, transparent 53px, transparent 77px, rgba(0, 0, 0, 0.04) 78px, rgba(0, 0, 0, 0.04) 78px, transparent 79px, transparent 103px, rgba(0, 0, 0, 0.04) 104px, rgba(0, 0, 0, 0.04) 104px, transparent 105px, transparent 129px, rgba(0, 0, 0, 0.04) 130px, rgba(0, 0, 0, 0.04) 130px);
}

.main {
  padding-top: 90px;
  position: relative;
  margin-bottom: 10px;
}
@media screen and (max-width: 1000px) {
  .main {
    padding-top: 50px;
    margin-bottom: 0px;
  }
}
.main__inner {
  max-width: 1164px;
  width: 100%;
  margin: 0 auto;
  display: flex;
}
@media screen and (max-width: 767px) {
  .main__inner {
    flex-direction: column;
  }
}
.main__mv {
  width: 100%;
  max-width: 680;
}
@media screen and (max-width: 767px) {
  .main__mv {
    width: 100%;
  }
}
.main__menu {
  width: 40%;
  margin-top: 15px;
}
@media screen and (max-width: 767px) {
  .main__menu {
    width: 100%;
    padding: 0 10px;
    position: absolute;
    top: 126%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.main__menu-inner {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  display: table;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .main__menu-inner {
    width: 100%;
    margin-bottom: 20px;
  }
}
.main__logo {
  margin-bottom: 15px;
  display: table-cell;
  vertical-align: middle;
}
@media screen and (max-width: 767px) {
  .main__logo {
    width: 71.5%;
    margin: 0 auto 20px;
  }
}
.main__pv {
  width: 60%;
  text-align: center;
  margin: 15px;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .main__pv {
    margin: 0px auto;
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 767px) {
  .main-nav__list {
    display: none;
  }
}
.main-nav__item {
  background-color: #fff;
  font-size: 22px;
  font-family: fot-chiaro-std, sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
  text-align: center;
  border: 1px dashed #707070;
  padding: 10px 0 9px;
}
.main-nav__item.hidden {
  background: #cbcbcb;
}
.main-nav__item.hidden a {
  pointer-events: none;
}

.info {
  margin-top: 60px;
  margin-bottom: 60px;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .info {
    flex-direction: column;
    margin-bottom: 20px;
    align-items: center;
  }
}
.info__title {
  font-size: 40px;
  text-align: left;
  margin-bottom: 18px;
  font-family: fot-chiaro-std, sans-serif;
  font-weight: 700;
  font-style: normal;
  border-bottom: 2px solid #c21500;
  -o-border-image: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.2959777661) 50%, rgba(255, 255, 255, 0) 100%);
     border-image: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.2959777661) 50%, rgba(255, 255, 255, 0) 100%);
  border-image-slice: 1;
}
@media screen and (max-width: 767px) {
  .info__title {
    font-size: 35px;
  }
}

.info-twitter {
  padding: 10px !important;
}
.info-twitter__inner {
  width: 100%;
  max-width: 580px;
  padding: 20px;
  margin: 0 auto;
}
@media only screen and (min-width: 767px) and (max-width: 1033px) {
  .info-twitter__inner {
    padding-bottom: 93px;
  }
}
@media screen and (max-width: 767px) {
  .info-twitter {
    width: 100%;
    order: 2;
  }
}

.info-news {
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 4px 4px rgba(0, 0, 0, 0.25);
  padding: 10px;
}
.info-news__left {
  width: 68%;
  padding: 10px 0px;
}
@media screen and (max-width: 767px) {
  .info-news__left {
    width: 100%;
  }
}
.info-news__right {
  width: 28%;
  padding: 10px 0px;
}
@media screen and (max-width: 767px) {
  .info-news__right {
    width: 100%;
  }
}
.info-news__inner {
  padding-top: 5px;
  padding-bottom: 5px;
}
@media screen and (max-width: 767px) {
  .info-news__inner {
    padding: 0 0;
  }
  .info-news__inner .pc {
    display: none !important;
  }
  .info-news__inner .sp {
    display: block !important;
  }
}
@media screen and (max-width: 767px) {
  .info-news {
    width: 100%;
    margin-bottom: 30px;
  }
}
.info-news__item {
  margin-bottom: 24px;
  font-size: 18px;
  border-bottom: 1px solid #fff;
  line-height: 1.3;
  text-align: center;
}
.info-news__item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}
@media screen and (max-width: 767px) {
  .info-news__item {
    font-size: 12px;
  }
}
.info-news__item-data {
  margin-bottom: 3px;
}

.book-info {
  padding-bottom: 60px;
}
@media screen and (max-width: 767px) {
  .book-info {
    margin-top: 10px;
    margin-bottom: 30px;
    flex-direction: column;
  }
}
.book-info__area {
  padding: 45px 50px 20px;
  border: 5px solid #fff;
  padding: 10px;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  .book-info__area {
    margin-bottom: 30px;
  }
}
.book-info__area__inner {
  border: 5px solid;
  padding: 20px;
}
@media screen and (max-width: 767px) {
  .book-info__area {
    padding: 45px 50px 20px;
    border: 5px solid #fff;
    padding: 10px;
  }
}
.book-info__inner {
  max-width: 979px;
  width: 100%;
  justify-content: center;
  text-align: center;
  display: flex;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .book-info__inner {
    flex-direction: column;
  }
}
.book-info__left {
  width: 47.09%;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .book-info__left {
    width: 100%;
    margin-bottom: 10px;
  }
}
.book-info__left figure {
  width: 49%;
}
.book-info__right {
  width: 50.87%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .book-info__right {
    width: 100%;
  }
}
.book-info__right li {
  width: 22.29%;
}
.book-info__right li:first-child {
  margin-bottom: 10px;
}
.book-info__right li img {
  width: 100%;
}

.chara-info {
  margin-top: 60px;
  margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
  .chara-info {
    margin-top: 10px;
    margin-bottom: 30px;
  }
}
.chara-info__area {
  padding: 45px 50px 20px;
  background-image: url(../img/BG-tx.jpg);
  border: 5px solid #fff;
  padding: 10px;
  margin-top: 20px;
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
  .chara-info__area {
    margin-top: 0px;
    margin-bottom: 30px;
  }
}
.chara-info__area__inner {
  border: 5px solid;
  padding: 20px;
}
@media screen and (max-width: 767px) {
  .chara-info__area {
    padding: 45px 50px 20px;
    background-image: url(../img/BG-tx.jpg);
    border: 5px solid #fff;
    padding: 10px;
  }
}
.chara-info__inner {
  max-width: 979px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .chara-info__inner {
    flex-direction: column;
  }
}
.chara-info__left {
  width: 47.09%;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .chara-info__left {
    width: 100%;
    margin-bottom: 10px;
  }
}
.chara-info__left figure {
  width: 49%;
}
.chara-info__right {
  width: 50.87%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .chara-info__right {
    width: 100%;
  }
}
.chara-info__right li {
  width: 22.29%;
}
.chara-info__right li:first-child {
  margin-bottom: 10px;
}
.chara-info__right li img {
  width: 100%;
}

.story-info {
  margin-top: 60px;
  margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
  .story-info {
    margin-top: 10px;
    margin-bottom: 30px;
  }
}
.story-info__area {
  padding: 45px 50px 20px;
  background-image: url(../img/BG-tx.jpg);
  border: 5px solid #fff;
  padding: 10px;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  .story-info__area {
    margin-bottom: 30px;
  }
}
.story-info__area__inner {
  border: 5px solid;
  padding: 20px;
}
@media screen and (max-width: 767px) {
  .story-info__area {
    padding: 45px 50px 20px;
    background-image: url(../img/BG-tx.jpg);
    border: 5px solid #fff;
    padding: 10px;
  }
}
.story-info__inner {
  max-width: 979px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .story-info__inner {
    flex-direction: column;
  }
}
.story-info__left {
  width: 47.09%;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .story-info__left {
    width: 100%;
    margin-bottom: 10px;
  }
}
.story-info__left figure {
  width: 49%;
}
.story-info__right {
  width: 50.87%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .story-info__right {
    width: 100%;
  }
}
.story-info__right li {
  width: 22.29%;
}
.story-info__right li:first-child {
  margin-bottom: 10px;
}
.story-info__right li img {
  width: 100%;
}

.news-info {
  margin-top: 60px;
  margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
  .news-info {
    margin-top: 10px;
    margin-bottom: 30px;
  }
}
.news-info__area {
  padding: 45px 50px 20px;
  color: #333333;
  padding: 10px;
  box-sizing: border-box;
  background-image: url(../img/bg/BG-tx-pap.jpg);
  margin: auto;
}
.news-info__area__inner {
  border: 5px solid;
  padding: 20px;
}
@media screen and (max-width: 767px) {
  .news-info__area {
    padding: 45px 50px 20px;
    padding: 10px 0px;
  }
}
.news-info__inner {
  max-width: 979px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .news-info__inner {
    flex-direction: column;
  }
}
.news-info__left {
  width: 47.09%;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .news-info__left {
    width: 100%;
    margin-bottom: 10px;
  }
}
.news-info__left figure {
  width: 49%;
}
.news-info__right {
  width: 50.87%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .news-info__right {
    width: 100%;
  }
}
.news-info__right li {
  width: 22.29%;
}
.news-info__right li:first-child {
  margin-bottom: 10px;
}
.news-info__right li img {
  width: 100%;
}

@media only screen and (min-width: 767px) and (max-width: 1033px) {
  .info-news__item-title {
    font-size: 16px;
  }
}
.top-btn-area {
  max-width: 979px;
  width: 100%;
  justify-content: center;
  text-align: center;
  display: flex;
  margin: 0 auto;
}

.top-btn {
  width: 100%;
  max-width: 340px;
  text-align: center;
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.pv-title {
  padding-top: 10px;
  font-size: 16px;
  font-family: fot-chiaro-std, sans-serif;
  font-weight: 700;
  font-style: normal;
}

.cs-text {
  font-size: 40px;
  text-align: center;
  margin-top: 36px;
  margin-bottom: 18px;
  font-family: fot-chiaro-std, sans-serif;
  font-weight: 700;
  font-style: normal;
}
@media screen and (max-width: 767px) {
  .cs-text {
    font-size: 24px;
    text-align: center;
    margin-top: 18px;
    margin-bottom: 9px;
    font-family: fot-chiaro-std, sans-serif;
    font-weight: 700;
    font-style: normal;
  }
}

.cv-area {
  max-width: 150px;
  width: 100%;
  background: #fff;
  color: #707070;
  font-size: 16px;
  text-align: center;
  margin: 0 auto;
  margin-top: 30px;
  border-radius: 5px;
}
@media screen and (max-width: 767px) {
  .cv-area {
    width: 85%;
    font-size: 16px;
    margin-bottom: 10px;
  }
}
.cv-area a {
  display: block;
  padding: 10px 5px;
}
@media screen and (max-width: 767px) {
  .cv-area a {
    padding: 5% 10px;
  }
}

.chara-cast {
  margin-bottom: 30px;
  padding: 40px 30px;
  font-family: fot-chiaro-std, sans-serif;
  font-weight: 700;
  font-style: normal;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.chara-cast:last-child {
  margin-bottom: 0px;
}
@media screen and (max-width: 767px) {
  .chara-cast {
    padding: 20px 10px;
  }
}

.chara {
  font-size: 1rem;
  color: #fff;
}

.name {
  font-size: 1.7vw;
}
@media screen and (max-width: 767px) {
  .name {
    font-size: 1.5rem;
  }
}

.name_cp {
  font-size: 2rem;
}

.staff-cast {
  margin-bottom: 10px;
  font-family: fot-chiaro-std, sans-serif;
  font-weight: 700;
  font-style: normal;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.staff-cast:last-child {
  margin-bottom: 0px;
  padding: 30px;
}

.staff {
  font-size: 1rem;
  color: #fff;
}

.name-st {
  font-size: 2rem;
  text-align: center;
  margin: 20px 0;
  font-family: fot-udkakugo-small-pr6n, sans-serif;
  font-weight: 400;
  font-style: normal;
}
.name-st:last-child {
  margin-bottom: 0px;
}
@media screen and (max-width: 767px) {
  .name-st {
    font-size: 1.2rem;
  }
}

.name-st-price {
  font-size: 1.2rem;
  text-align: center;
  margin: 10px 0;
  font-family: fot-chiaro-std, sans-serif;
  font-weight: 700;
  font-style: normal;
}
.name-st-price:last-child {
  margin-bottom: 0px;
}

.news-text {
  font-size: 24px;
  margin-bottom: 10px;
  font-family: fot-chiaro-std, sans-serif;
  font-weight: 700;
  font-style: normal;
}
.news-text:last-child {
  margin-bottom: 18px;
}
@media screen and (max-width: 767px) {
  .news-text {
    font-size: 20px;
  }
}

.anchor {
  display: block;
  padding-top: 160px;
  margin-top: -160px;
}
@media screen and (max-width: 1000px) {
  .anchor {
    display: block;
    padding-top: 90px;
    margin-top: -90px;
  }
}

.spbr {
  display: none;
}
@media screen and (max-width: 1000px) {
  .spbr {
    display: block;
  }
}

.info__title-news {
  max-width: 200px;
  margin-bottom: 18px;
}

.info__title-cast {
  max-width: 180px;
  margin-bottom: 18px;
}

.info__title-story {
  max-width: 220px;
  margin-bottom: 18px;
}

.info__title-staff {
  max-width: 220px;
  margin-bottom: 18px;
}

.info__title-character {
  max-width: 400px;
  margin-bottom: 18px;
}

.info__title-movie {
  max-width: 220px;
  margin-bottom: 18px;
}

.info__title-twitter {
  max-width: 220px;
  margin-bottom: 18px;
}

.youtube {
  width: 100%;
}

.news-wrapper {
  max-width: 1080px;
  width: 95%;
  margin: 0 auto;
  display: flex;
}
@media only screen and (max-width: 1033px) {
  .news-wrapper {
    text-align: center;
  }
}

.heading-title {
  font-size: 48px;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #333333;
  font-family: "museo-slab", serif;
  font-weight: 700;
  font-style: italic;
  position: relative;
  text-align: center;
  border-radius: 2.5px;
  border-bottom: 5px solid #CCFFFF;
  filter: drop-shadow(0px 4px 4px #CCFFFF);
}
.heading-title:last-child {
  margin-bottom: 18px;
}
@media screen and (max-width: 767px) {
  .heading-title {
    font-size: 30px;
  }
}

.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #33CCFF;
}

.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #33CCFF;
}

.samp a {
  position: relative;
  margin: 0px 0px;
  padding: 10px;
  list-style-type: none;
}

.samp a:hover {
  background: #ddbbbb;
}

.tooltips {
  display: none;
  position: absolute;
  bottom: -2.5em;
  z-index: 1;
  padding: 0.5em;
  color: #FFFFFF;
  background: #33CCFF;
  border-radius: 0.5em;
}

.tooltips:after {
  width: 100%;
  content: "";
  display: block;
  position: absolute;
  left: 0.5em;
  top: -8px;
  border-top: 8px solid transparent;
  border-left: 8px solid #33CCFF;
}

.samp a:hover .tooltips {
  display: block;
}

.iv-pic {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .iv-pic {
    max-width: 300px;
  }
}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.mail-btn {
  color: #333333;
  text-align: center;
}

.dl-voice {
  text-align: center;
  justify-content: space-between;
  margin: 20px;
}

.st-btn {
  width: 100%;
  max-width: 340px;
  text-align: center;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .st-btn {
    max-width: 200px;
    margin-bottom: 10px;
  }
}

.pr-btn {
  width: 100%;
  max-width: 200px;
  text-align: center;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .pr-btn {
    max-width: 200px;
    margin-bottom: 10px;
  }
}

.pr-btn-jump {
  width: 100%;
  max-width: 200px;
  text-align: center;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .pr-btn-jump {
    max-width: 200px;
    margin-top: 20px;
  }
}

.pr-cp {
  font-size: 1.5rem;
  text-align: center;
  margin: 20px 0;
  font-family: fot-chiaro-std, sans-serif;
  font-weight: 700;
  font-style: normal;
}
@media screen and (max-width: 767px) {
  .pr-cp {
    font-size: 1rem;
  }
}

.pr-info {
  margin-top: 60px;
  margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
  .pr-info {
    margin-top: 10px;
    margin-bottom: 30px;
    flex-direction: column;
  }
}
.pr-info__area {
  padding: 45px 50px 20px;
  border: 5px solid #fff;
  padding: 10px;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  .pr-info__area {
    margin-bottom: 30px;
  }
}
.pr-info__area__inner {
  border: 5px solid;
  padding: 20px;
}
@media screen and (max-width: 767px) {
  .pr-info__area {
    padding: 45px 50px 20px;
    border: 5px solid #fff;
    padding: 10px;
  }
}
.pr-info__inner {
  max-width: 979px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .pr-info__inner {
    flex-direction: column;
  }
}
.pr-info__left {
  width: 47.09%;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .pr-info__left {
    width: 100%;
    margin-bottom: 10px;
  }
}
.pr-info__left figure {
  width: 49%;
}
.pr-info__right {
  width: 50.87%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .pr-info__right {
    width: 100%;
  }
}
.pr-info__right li {
  width: 22.29%;
}
.pr-info__right li:first-child {
  margin-bottom: 10px;
}
.pr-info__right li img {
  width: 100%;
}

.jkt-pic {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
}

.anchor-btn {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .anchor-btn {
    width: 60px;
  }
}

.story {
  padding-top: 80px;
  width: 100%;
  background-image: url(../img/bg/character-bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.story__inner {
  margin: 30px 0 0;
  padding: 0 30px;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .story__inner {
    padding: 0 0px;
  }
}
.story__area {
  justify-content: space-between;
  margin-top: 0px;
  margin-bottom: 0px;
  border-radius: 10px;
}
@media screen and (max-width: 767px) {
  .story__area {
    padding: 10px 0px;
  }
  .story__area .pc {
    display: none !important;
  }
  .story__area .sp {
    display: block !important;
  }
}
.story__area-inner {
  padding: 0 30px;
}
@media screen and (max-width: 767px) {
  .story__area-inner {
    padding: 0;
  }
}

.thumbnail {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  padding: 10px 30px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.chara-thumb {
  width: 100%;
  max-width: 150px;
  height: 75px;
  padding: 10px;
}

.staffcast__container-rp {
  margin-right: 35px;
}
@media screen and (max-width: 767px) {
  .staffcast__container-rp {
    margin-right: 15px;
  }
}

.story-data.crt {
  display: block;
  animation: fadeIn 0.5s 0s ease-out both;
}

.story-data {
  position: relative;
  text-align: center;
}

.staffcast__container-lc {
  margin-left: -15px;
}

.staffcast__container-rc {
  margin-right: -15px;
}

.cont-subtitle {
  margin: 1.5em auto 0.5em auto;
  font-size: 3rem;
  color: #333;
  font-family: a-otf-ryumin-pr6n, serif;
  font-weight: 300;
  font-style: normal;
  text-shadow: 0 0 10px #fff, 0 0 15px #fff;
}

.story-data .ep-title {
  font-size: 2rem;
  margin-bottom: 1em;
  position: relative;
  color: #fff;
  font-family: a-otf-ryumin-pr6n, serif;
  font-weight: 300;
  font-style: normal;
  padding: 0.5rem 1rem 0.5rem;
  background: #E62886;
}
@media screen and (max-width: 767px) {
  .story-data .ep-title {
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 767px) {
  .ep-title__long {
    font-size: 1.2rem;
  }
}

.story-data .ep-text {
  margin-top: 2rem;
  font-size: 1rem;
  line-height: 1.5rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  .story-data .ep-text {
    font-size: 0.7rem;
    line-height: 1rem;
  }
}

.ep-text {
  position: relative;
  padding: 0.7em 1.3em;
  color: #333333;
  font-family: fot-rodin-pron, sans-serif;
  font-weight: 600;
  font-style: normal;
}
@media screen and (max-width: 767px) {
  .ep-text {
    padding: 0.5em 0.5em;
    text-align: left;
  }
}

.ep-text::before,
.ep-text::after {
  display: inline-block;
  position: absolute;
  width: 1em;
  height: 1em;
  content: "";
}

.ep-text::before {
  top: 0;
  left: 0;
  border-top: 3px solid #2589d0;
  border-left: 3px solid #2589d0;
}

.ep-text::after {
  bottom: 0;
  right: 0;
  border-bottom: 3px solid #2589d0;
  border-right: 3px solid #2589d0;
}

.story-data .ep-staff {
  margin-top: 2rem;
  font-size: 1rem;
  line-height: 1.5rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  .story-data .ep-staff {
    font-size: 0.7rem;
    line-height: 1rem;
  }
}

.ep-staff {
  position: relative;
  padding: 0.7em 1.3em;
  color: #333333;
  font-family: fot-rodin-pron, sans-serif;
  font-weight: 600;
  font-style: normal;
}

.ep-staff::before,
.ep-staff::after {
  display: inline-block;
  position: absolute;
  width: 1em;
  height: 1em;
  content: "";
}

.ep-staff::before {
  top: 0;
  left: 0;
  border-top: 3px solid #E62886;
  border-left: 3px solid #E62886;
}

.ep-staff::after {
  bottom: 0;
  right: 0;
  border-bottom: 3px solid #E62886;
  border-right: 3px solid #E62886;
}

/*==================================================
スライダーのためのcss
===================================*/
.slick-prev { /*戻る矢印の位置と形状*/
  left: -5%;
  transform: rotate(-135deg);
}

.slick-next { /*次へ矢印の位置と形状*/
  right: -5%;
  transform: rotate(45deg);
}

/*選択するサムネイル画像の設定*/
.choice-btn li {
  cursor: pointer;
  outline: none;
  background: rgba(255, 255, 255, 0);
  list-style: none;
}

.choice-btn li img {
  opacity: 0.4; /*選択されていないものは透過40%*/
}

.choice-btn li.slick-current img {
  opacity: 1; /*選択されているものは透過しない*/
}

@media screen and (max-width: 767px) {
  .slick-prev, .slick-next {
    display: none !important;
  }
}

/*tabの形状------------------------------------*/
.tab {
  display: flex;
  flex-wrap: wrap;
}

.tab li a {
  display: block;
  background: #E62886;
  margin: 0 2px;
  padding: 10px 20px;
}

/*liにactiveクラスがついた時の形状*/
.tab li.active a {
  background: #2589d0;
}

/*エリアの表示非表示と形状*/
.story-area {
  display: none; /*はじめは非表示*/
  opacity: 0; /*透過0*/
  background: #fff;
  padding: 50px 20px;
}

/*areaにis-activeというクラスがついた時の形状*/
.story-area.is-active {
  display: block; /*表示*/
  animation-name: displayAnime; /*ふわっと表示させるためのアニメーション*/
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes displayAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.tab a {
  color: #fff;
  text-decoration: none;
  font-family: a-otf-ryumin-pr6n, serif;
}

.story-area ul {
  list-style: none;
}

.story-area li {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.tab01 {
  width: 100%;
  margin: 0 auto 0px;
}

/*タブのスタイル*/
.tab_menu {
  width: 33.3333333333%;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-family: a-otf-ryumin-pr6n, serif;
  font-weight: 300;
  font-style: normal;
  text-align: center;
  color: #fff;
  background-color: #0000FF;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
@media screen and (max-width: 767px) {
  .tab_menu {
    font-size: 16px;
    width: 100%;
  }
}

/*ラジオボタンを全て消す*/
input[name=tab_menu] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_contents {
  display: none;
  clear: both;
  overflow: hidden;
  transition: 0.5s opacity;
}

/*選択されているタブを表示*/
#menu01:checked ~ #menu01,
#menu02:checked ~ #menu02,
#menu03:checked ~ #menu03,
#menu04:checked ~ #menu04,
#menu05:checked ~ #menu05,
#menu06:checked ~ #menu06,
#menu07:checked ~ #menu07,
#menu08:checked ~ #menu08,
#menu09:checked ~ #menu09,
#menu10:checked ~ #menu10,
#menu11:checked ~ #menu11,
#menu12:checked ~ #menu12 {
  display: block;
}

/*選択されているタブのスタイル*/
.tab01 input:checked + .tab_menu {
  background-color: #33CCFF;
  color: #fff;
}

/*========= ローディング画面のためのCSS ===============*/
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999999;
  text-align: center;
  color: #fff;
}

#splash-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  max-width: 400px;
  transform: translate(-50%, -50%);
}

/*==================================================
スライダーのためのcss
===================================*/
.slider { /*横幅94%で左右に余白を持たせて中央寄せ*/
  width: 94%;
  margin: 0 auto;
}

.slider img {
  width: 60vw; /*スライダー内の画像を60vwにしてレスポンシブ化*/
  height: auto;
}

.slider .slick-slide {
  transform: scale(0.8); /*左右の画像のサイズを80%に*/
  transition: all 0.5s; /*拡大や透過のアニメーションを0.5秒で行う*/
  opacity: 0.5; /*透過50%*/
}

.slider .slick-slide.slick-center {
  transform: scale(1); /*中央の画像のサイズだけ等倍に*/
  opacity: 1; /*透過なし*/
}

/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
  position: absolute; /*絶対配置にする*/
  top: 42%;
  cursor: pointer; /*マウスカーソルを指マークに*/
  outline: none; /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #666; /*矢印の色*/
  border-right: 2px solid #666; /*矢印の色*/
  height: 15px;
  width: 15px;
}

.slick-prev { /*戻る矢印の位置と形状*/
  left: -1.5%;
  transform: rotate(-135deg);
}

.slick-next { /*次へ矢印の位置と形状*/
  right: -1.5%;
  transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/
.slick-dots {
  text-align: center;
  margin: 20px 0 0 0;
}

.slick-dots li {
  display: inline-block;
  margin: 0 5px;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width: 8px; /*ドットボタンのサイズ*/
  height: 8px; /*ドットボタンのサイズ*/
  display: block;
  border-radius: 50%;
  background: #ccc; /*ドットボタンの色*/
}

.slick-dots .slick-active button {
  background: #333; /*ドットボタンの現在地表示の色*/
}

.topbanner {
  margin: 10px 0 0 10px;
}

/*==================================================
　中心から外に線が伸びる（下部）
===================================*/
.main-nav__list a li {
  /*線の基点とするためrelativeを指定*/
  position: relative;
}

.main-nav__list a.current li,
.main-nav__list a li:hover {
  color: #0481A2;
}

.main-nav__list a li::after {
  content: "";
  /*絶対配置で線の位置を決める*/
  position: absolute;
  bottom: 6px;
  left: 10%;
  /*線の形状*/
  width: 80%;
  height: 2px;
  background: #0481A2;
  /*アニメーションの指定*/
  transition: all 0.3s;
  transform: scale(0, 1); /*X方向0、Y方向1*/
  transform-origin: center top; /*上部中央基点*/
}

/*現在地とhoverの設定*/
.main-nav__list a.current li::after,
.main-nav__list a li:hover::after {
  transform: scale(1, 1); /*X方向にスケール拡大*/
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after,
.modaal-close:before {
  background: #ccc;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
  background: #666;
}

.modaal-wrapper {
  max-width: 900px;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

/*全て共通：hideエリアをはじめは非表示*/
.hide-area {
  display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after,
.modaal-close:before {
  background: #ccc;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
  background: #666;
}

/*確認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title {
  font-size: 1.2rem;
  text-align: center;
  margin: 0 0 20px 0;
}

/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper {
  padding: 0;
}

/*--------------------------------------------------------------*/
/*まずはお決まりのボックスサイズ算出をborer-boxに */
*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%; /*rem算出をしやすくするために*/
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #fff;
  border-radius: 0.5rem;
}

a.btn--red.btn--cubic {
  background-color: #0099FF;
  border-bottom: 5px solid #0066CC;
}

a.btn--red.btn--cubic:hover {
  margin-top: 3px;
  border-bottom: 2px solid #0066CC;
}

a.btn--radius {
  border-radius: 100vh;
}

.fa-position-right {
  position: absolute;
  top: calc(50% - 0.5em);
  right: 1rem;
}

/*---------------------------------------------------*/
.slider-2 .slick-slide {
  width: 600px;
  height: 400px;
  margin: 0 40px;
  position: relative;
  overflow: hidden;
}

.slider-2 .slick-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.slider-2 .slick-arrow {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
  border: none;
  outline: none;
  font-size: 0;
  position: absolute;
  top: 180px;
  z-index: 1;
  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
}

.slider-2 .slick-arrow::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid #09000d;
  border-width: 3px 3px 0 0;
  position: absolute;
  top: 24px;
  transform: rotate(45deg);
}

.slider-2 .slick-next {
  right: 0;
}

.slider-2 .slick-prev {
  left: 0;
}

.slider-2 .slick-next::before {
  left: 20px;
}

.slider-2 .slick-prev::before {
  border-width: 0 0 3px 3px;
  right: 22px;
}

.dots-2 .slick-dots {
  text-align: center;
}

.dots-2 .slick-dots li {
  display: inline-block;
}

.dots-2 .slick-dots button {
  display: block;
  width: 10px;
  height: 10px;
  margin: 6px;
  font-size: 0;
  padding: 0;
  border: 0;
  outline: none;
  cursor: pointer;
  background: #bcbcbc;
  border-radius: 50%;
}

.dots-2 .slick-dots .slick-active button {
  background: #0a467d;
}

/* -------------------------------------------- */
/* 全体のスタイル */
.swiper-wrapper {
  width: 100%;
  height: 250px;
}

/* 全スライド共通スタイル */
.swiper-slide {
  color: #ffffff;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 250px;
}

/* 4の倍数＋1枚目のスライドのスタイル（1枚目、5枚目…） */
.swiper-slide:nth-child(4n+1) {
  background-color: #ffffff;
}

/* 4の倍数＋2枚目のスライドのスタイル（2枚目、6枚目…） */
.swiper-slide:nth-child(4n+2) {
  background-color: #ffffff;
}

/* 4の倍数＋3枚目のスライドのスタイル（3枚目、7枚目…） */
.swiper-slide:nth-child(4n+3) {
  background-color: #ffffff;
}

/* 4の倍数＋4枚目のスライドのスタイル（4枚目、8枚目…） */
.swiper-slide:nth-child(4n+4) {
  background-color: #ffffff;
}

section.slider-part {
  position: relative;
  max-width: 960px;
  overflow: hidden;
  margin: 0 auto;
}

section.slider-part .mySwiper {
  height: 100%;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  touch-action: auto;
}

.swiper-slide.slide1, .swiper-slide.slide3, .swiper-slide.slide5 {
  background: #daf5ff;
}

/*==================================================
ギャラリーのためのcss
===================================*/
.gallery {
  -moz-columns: 3;
       columns: 3; /*段組みの数*/
  padding: 0 20px; /*ギャラリー左右に余白をつける*/
  margin: 0;
}

.gallery li {
  margin-bottom: 20px; /*各画像下に余白をつける*/
  list-style: none;
}

/*ギャラリー内のイメージは横幅100%にする*/
.gallery img {
  width: 100%;
  height: auto;
  vertical-align: bottom; /*画像の下にできる余白を削除*/
}

/*　横幅900px以下の段組み設定　*/
@media only screen and (max-width: 900px) {
  .gallery {
    -moz-columns: 2;
         columns: 2;
  }
}
@media only screen and (max-width: 768px) {
  .gallery {
    -moz-columns: 2;
         columns: 2;
  }
}
.slider-thumbnail .swiper-slide {
  opacity: 0.5;
  transition: opacity 0.5s;
  width: 33.3333333333%;
}

.slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}

.footer {
  padding: 30px 0;
  opacity: 0.8;
  color: #231816;
  background-color: #FFCCFF;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .footer {
    padding: 20px 0;
    opacity: 0.8;
    background-color: #FFCCFF;
    text-align: center;
  }
  .footer__copy {
    font-size: 14px;
    text-align: center;
    padding: 0 20px;
    font-family: dnp-shuei-shogomincho-std, sans-serif;
    font-weight: 700;
    font-style: normal;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .footer__copy {
    font-family: dnp-shuei-shogomincho-std, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 10px;
    line-height: 1.5;
  }
}
.footer .anchor-btn {
  position: fixed;
  right: 10px;
  bottom: 10px;
}
@media screen and (max-width: 767px) {
  .footer .anchor-btn {
    width: 60px;
  }
}

/*
.p-header
----------------------------------------------- */
.header-btn {
  width: 80px;
  height: 80px;
  position: fixed;
  top: 0;
  right: 0;
  cursor: pointer;
  z-index: 3;
}
@media screen and (max-width: 1000px) {
  .header-btn {
    width: 50px;
    height: 50px;
  }
}
.header-btn__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.header-btn__line {
  width: 43px;
  height: 6px;
  background: #fff;
  display: block;
  margin-bottom: 10px;
  transition: 0.3s;
}
@media screen and (max-width: 1000px) {
  .header-btn__line {
    width: 33px;
    height: 3px;
    margin-bottom: 7px;
  }
}
.header-btn__line:last-child {
  margin-bottom: 0;
}
.header-btn__line.is-active:nth-child(1) {
  transform: rotate(45deg);
  position: absolute;
  position: absolute;
  top: 6px;
  background: #FEF7FF;
}
.header-btn__line.is-active:nth-child(2) {
  opacity: 0;
}
.header-btn__line.is-active:nth-child(3) {
  transform: rotate(-45deg);
  position: absolute;
  top: 6px;
  background: #FEF7FF;
}

.header-menu {
  display: none;
  position: relative;
  z-index: 1;
}
.header-menu__area {
  width: 100%;
  height: 100vh;
  opacity: 0.8;
  background-color: #0000FF;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-menu__inner {
  max-width: 950px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .header-menu__inner {
    flex-direction: column;
    margin-top: -80px;
  }
}
.header-menu__logo {
  width: 100%;
  max-width: 400px;
}
@media screen and (max-width: 767px) {
  .header-menu__logo {
    width: 60%;
    margin-bottom: 20px;
  }
}
.header-menu__nav {
  width: 51.3%;
}
@media screen and (max-width: 767px) {
  .header-menu__nav {
    width: 60%;
  }
}
.header-menu__item {
  color: #993D3D;
  font-size: 24px;
  margin-bottom: 6px;
  text-align: center;
  line-height: 1.8;
  font-family: "museo-slab", serif;
  font-weight: 700;
  font-style: italic;
  padding-top: 2px;
}
@media screen and (max-width: 767px) {
  .header-menu__item {
    font-size: 18px;
  }
}
.header-menu__item.hidden {
  background: #993D3D;
}
.header-menu__item.hidden a {
  pointer-events: none;
}

.header-list {
  width: 100%;
  height: 80px;
  background-color: #FFCCFF;
  transition: all 0.2s ease-out;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}
@media screen and (max-width: 1000px) {
  .header-list {
    height: 50px;
  }
}
.header-list__logo {
  width: 140px;
  position: absolute;
  left: 25px;
  top: 0px;
}
@media screen and (max-width: 1000px) {
  .header-list__logo {
    width: 90px;
    left: 10px;
    top: 2px;
  }
}
.header-list__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 700px;
  width: 100%;
  text-align: center;
  margin-top: 10px;
}
@media screen and (max-width: 1060px) {
  .header-list__nav {
    display: none;
  }
}
.header-list__item {
  font-size: 18px;
  margin-right: 30px;
  margin-bottom: 10px;
  font-family: "museo-slab", serif;
  font-weight: 700;
  font-style: italic;
}
.header-list__item:last-child {
  margin-right: 0;
}
.header-list__item.hidden {
  /* text-decoration: line-through; */
  color: #b8b6b6;
}
.header-list__item.hidden a {
  pointer-events: none;
}

.header-list__title {
  font-size: 20px;
  font-family: "museo-slab", serif;
  font-weight: 700;
  font-style: italic;
  max-width: 300px;
  width: 100%;
  text-align: center;
  color: #993D3D;
}
@media screen and (max-width: 1000px) {
  .header-list__title {
    font-size: 20px;
    max-width: 200px;
  }
}

/*==================================================
左から右に背景が伸びる
===================================*/
/*背景の設定*/
.header-list__nav li a {
  /*背景色の基点とするためrelativeを指定*/
  position: relative;
}

.header-list__nav li a::after {
  content: "";
  /*絶対配置で線の位置を決める*/
  position: absolute;
  z-index: -1;
  bottom: 2px;
  left: 0;
  /*背景の形状*/
  width: 0;
  height: 100%;
  background: #FEF7FF;
  /*アニメーションの指定*/
  transition: all 0.5s;
  opacity: 0; /*はじめは透過0*/
}

/*現在地とhoverの設定*/
.header-list__nav li.current a::after,
.header-list__nav li a:hover::after {
  /*背景の形状*/
  width: 100%; /*横幅を伸ばす*/
  opacity: 1; /*不透明に*/
}

.header-list__nav li.current a,
.header-list__nav li a:hover {
  color: #FFA8C0;
}

/*==================================================
　中心から外に線が伸びる（下部）
===================================*/
.header-menu-list a li {
  /*線の基点とするためrelativeを指定*/
  position: relative;
}

.header-menu-list a.current li,
.header-menu-list a li:hover {
  color: #FEF7FF;
}

.header-menu-list a li::after {
  content: "";
  /*絶対配置で線の位置を決める*/
  position: absolute;
  bottom: 6px;
  left: 10%;
  /*線の形状*/
  width: 80%;
  height: 2px;
  background: #FEF7FF;
  /*アニメーションの指定*/
  transition: all 0.3s;
  transform: scale(0, 1); /*X方向0、Y方向1*/
  transform-origin: center top; /*上部中央基点*/
}

/*現在地とhoverの設定*/
.header-menu-list a.current li::after,
.header-menu-list a li:hover::after {
  transform: scale(1, 1); /*X方向にスケール拡大*/
}

.wrapper {
  max-width: 1163px;
  width: 95%;
  margin: 0 auto;
}

.page-title {
  font-size: 70px;
  color: #707070;
  font-family: din-2014, sans-serif;
  font-weight: 700;
  font-style: italic;
  text-align: center;
  margin-bottom: 30px;
  text-shadow: 0 0 10px #fff, 0 0 15px #fff;
}
@media screen and (max-width: 767px) {
  .page-title {
    font-size: 40px;
  }
}

.h2pic {
  width: 100%;
}
.h2pic--introduction {
  max-width: 476px;
}
.h2pic--character {
  max-width: 386px;
}
.h2pic--news {
  max-width: 214px;
}
.h2pic--staffcast {
  max-width: 414px;
}
.h2pic--special {
  max-width: 276px;
}
.h2pic--contact {
  max-width: 276px;
}
.pc {
  display: block !important;
}

.sp {
  display: none !important;
}

/*========= ローディング画面のためのCSS ===============*/
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999999;
  text-align: center;
  color: #fff;
}

#splash-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  max-width: 400px;
  transform: translate(-50%, -50%);
}

/*========= 画面遷移のためのCSS ===============*/
/*画面遷移アニメーション*/
.splashbg {
  display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg {
  display: block;
  content: "";
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  transform: scaleX(0);
  background-color: #E62886; /*伸びる背景色の設定*/
  animation-name: PageAnime;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes PageAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}
/*画面遷移の後現れるコンテンツ設定*/
#container {
  opacity: 0; /*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #container {
  animation-name: PageAnimeAppear;
  animation-duration: 1s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes PageAnimeAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* fadeUpをするアイコンの動き */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.news {
  padding-top: 80px;
  width: 100%;
  background-image: url(../img/bg/news-bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.news__inner {
  margin: 30px 0 0;
}
.news__area {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .news__area {
    flex-direction: column;
  }
}

.news-list {
  width: 70%;
}
@media screen and (max-width: 767px) {
  .news-list {
    width: 100%;
  }
}
.news-list__box {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 20px;
}
.news-list__item {
  background: #fff;
  padding: 20px;
  margin-bottom: 30px;
}
.news-list__item-data {
  font-size: 24px;
}
@media screen and (max-width: 767px) {
  .news-list__item-data {
    font-size: 18px;
  }
}
.news-list__item-cate {
  font-size: 24px;
}
@media screen and (max-width: 767px) {
  .news-list__item-cate {
    font-size: 18px;
  }
}
.news-list__item-text {
  font-size: 16px;
  width: 95%;
  margin: 0 auto;
  line-height: 1.5;
}

.side-menu {
  background: #fff;
  width: 22%;
  font-size: 20px;
  padding: 30px 20px;
  height: 40vh;
}
@media screen and (max-width: 767px) {
  .side-menu {
    width: 100%;
    margin-bottom: 30px;
    order: 2;
  }
}
.side-menu__inner {
  width: 80%;
  margin: 0 auto;
  padding: 30px 0;
}
.side-menu__title {
  margin-bottom: 18px;
  text-align: left;
  font-weight: bold;
}
.side-menu__list {
  padding-left: 20px;
  border-top: 1px solid #707070;
  padding-top: 18px;
}
.side-menu__item {
  margin-bottom: 15px;
  word-break: break-all;
}
.side-menu__item:last-child {
  margin-bottom: 0;
}

.introduction {
  padding-top: 80px;
  width: 100%;
  background-image: url(../img/bg/intro-bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.introduction__inner {
  margin: 30px 0 0;
}
.introduction__area {
  display: flex;
  justify-content: space-between;
  margin-top: 0px;
  margin-bottom: 0px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 50px;
  border-radius: 10px;
}
@media screen and (max-width: 767px) {
  .introduction__area {
    padding: 20px 0;
  }
  .introduction__area .pc {
    display: none !important;
  }
  .introduction__area .sp {
    display: block !important;
  }
}

.staffcast {
  padding-top: 80px;
  width: 100%;
  background-image: url(../img/bg/staffcast-bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: #707070;
}
.staffcast__inner {
  margin: 30px 10px 0;
}
.staffcast__area {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
}
.staffcast__area-inner {
  justify-content: space-between;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 20px 10px 32px;
}
.staffcast__inbox {
  max-width: 400px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .staffcast__inbox {
    width: 90%;
  }
}
.staffcast__head {
  margin-bottom: 30px;
}
.staffcast-top {
  font-size: 36px;
  font-weight: bold;
  color: #707070;
  margin: 30px 20px 30px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .staffcast-top {
    font-size: 18px;
  }
}

.original-title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 18px;
}
@media screen and (max-width: 767px) {
  .original-title {
    font-size: 18px;
  }
}

.staffcast-position {
  font-size: 12px;
  text-align: center;
  margin-bottom: 0px;
}
@media screen and (max-width: 767px) {
  .staffcast-position {
    font-size: 12px;
  }
}

.staffcast-name {
  font-size: 28px;
  text-align: center;
  margin-bottom: 18px;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .staffcast-name {
    font-size: 20px;
  }
}

.special {
  padding-top: 80px;
  width: 100%;
  background-image: url(../img/bg/news-bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.special__inner {
  margin: 30px 0 0;
}
.special__area {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .special__area {
    flex-direction: column;
  }
}

.special-list {
  width: 70%;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 10px;
}
@media screen and (max-width: 767px) {
  .special-list {
    width: 100%;
    margin-bottom: 30px;
  }
}

.special-item {
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
  .special-item {
    margin-bottom: 20px;
  }
}
.special-item__title {
  background: linear-gradient(90deg, rgba(34, 151, 219, 0.895417542) 50%, rgba(255, 255, 255, 0.895417542) 100%);
  width: 100%;
  padding: 5px 20px;
  border-radius: 10px;
  font-size: 40px;
  color: #fff;
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
  .special-item__title {
    font-size: 20px;
    margin-bottom: 20px;
    padding: 5px 20px;
  }
}
.special-item__box {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
.special-item__box-item {
  width: 30%;
  margin: 0 auto;
  position: relative;
  padding-top: 20.25%;
}
.special-item__box-item iframe {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.special-item__box-modal {
  width: 30%;
}

.side-menu-spe {
  background: #fff;
  width: 22%;
  font-size: 20px;
  padding: 30px 20px;
  height: 35vh;
}
@media screen and (max-width: 767px) {
  .side-menu-spe {
    width: 100%;
    order: 2;
  }
}
.side-menu-spe__inner {
  width: 80%;
  margin: 0 auto;
  padding: 30px 0;
}
.side-menu-spe__title {
  margin-bottom: 18px;
  text-align: left;
  font-weight: bold;
}
.side-menu-spe__list {
  padding-left: 20px;
  border-top: 1px solid #707070;
  padding-top: 18px;
}
.side-menu-spe__item {
  margin-bottom: 15px;
  word-break: break-all;
}
.side-menu-spe__item:last-child {
  margin-bottom: 0;
}

.hide-area {
  display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after,
.modaal-close:before {
  background: #ccc;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
  background: #666;
}

.modaal-wrapper {
  max-width: 900px;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

.character {
  padding-top: 80px;
  width: 100%;
  background-image: url(../img/bg/character-bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
@media screen and (max-width: 767px) {
  .character {
    height: calc(100vh - 70px);
  }
}
.character__inner {
  margin: 30px 0 0;
  padding: 0 30px;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .character__inner {
    padding: 20px 0;
  }
}
.character__area {
  justify-content: space-between;
  margin-top: 0px;
  margin-bottom: 0px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0px;
  border-radius: 10px;
}
@media screen and (max-width: 767px) {
  .character__area {
    padding: 0px;
  }
  .character__area .pc {
    display: none !important;
  }
  .character__area .sp {
    display: block !important;
  }
}
.character__area-inner {
  padding: 10px 20px 20px 20px;
}
@media screen and (max-width: 767px) {
  .character__area-inner {
    padding: 0px 0;
  }
}

.thumbnail {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  padding: 10px 30px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.chara-thumb {
  width: 100%;
  max-width: 150px;
  height: 75px;
  padding: 10px;
}

.staffcast__container-rp {
  margin-right: 35px;
}
@media screen and (max-width: 767px) {
  .staffcast__container-rp {
    margin-right: 15px;
  }
}

.staffcast__container-lc {
  margin-left: -15px;
}

.staffcast__container-rc {
  margin-right: -15px;
}

.contact {
  padding-top: 80px;
  width: 100%;
  background-image: url(../img/bg/intro-bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.contact__inner {
  margin: 30px 0 0;
}
.contact__area {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 50px;
  border-radius: 10px;
}
@media screen and (max-width: 767px) {
  .contact__area {
    padding: 30px;
  }
  .contact__area .pc {
    display: none !important;
  }
  .contact__area .sp {
    display: block !important;
  }
}

.contact-box {
  width: 95%;
  margin: ０ auto;
  justify-content: space-between;
}

.box-text {
  resize: both;
}

.lead-form {
  text-align: center;
  font-size: 20px;
}

.form {
  width: 1163px;
  margin: 0 auto;
}

.item {
  overflow: hidden;
  margin-bottom: 20px;
}

.label {
  float: left;
  margin-right: 20px;
  width: 135px;
  border-left: solid 3px #e0505d;
  padding-left: 10px;
}

.inputs {
  float: left;
  width: 300px;
}

.input[type=text], .input[type=email] {
  border: solid 1px #aaa;
  border-radius: 5px;
  padding: 10px;
  font-size: 15px;
}

.textarea {
  border: solid 1px #aaa;
  border-radius: 5px;
  padding: 10px;
  height: 160px;
  font-size: 15px;
}

.btn-area {
  text-align: center;
}

.input[type=submit] {
  background: #e0505c;
  border: none;
  color: white;
  font-size: 17px;
  font-weight: bold;
  padding: 10px 20px;
  margin: 0 5px;
}

.input[type=reset] {
  background: #aaa;
  border: none;
  color: white;
  font-size: 17px;
  font-weight: bold;
  padding: 10px 20px;
  margin: 0 5px;
}

/*
  3.2 - Utility
-----------------------------------------------------*/
/*
  Break
*/
@media screen and (min-width: 769px) {
  .br-pc {
    display: inline-block;
    white-space: nowrap;
  }
}

.isPc {
  display: none;
}
@media screen and (min-width: 768px) {
  .isPc {
    display: block;
  }
}

.isSp {
  display: block;
}
@media screen and (min-width: 768px) {
  .isSp {
    display: none !important;
    background-color: #fff;
    font-size: 12px;
  }
}

.u-bgc_main {
  color: #fff;
  background-color: #DA7F88;
}
.u-bgc_sub {
  background-color: #FFF6F7;
}

.u-fc_main {
  color: #DA7F88;
}

/*
  Screen Reader Text
*/
.screen-reader-text {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
}

body {
  font-family: fot-rodin-pron, sans-serif;
  font-style: normal;
  font-weight: 600;
  color: #ffffff;
}

.pc {
  display: block !important;
}

.sp {
  display: none !important;
}/*# sourceMappingURL=common.css.map */