@charset "UTF-8";
/*@import url(mobile_ep3.css);*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
RESET_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*
基本リセット
*/
* {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
span,
em,
strong,
ul,
ol,
li,
dl,
dt,
dd,
a {
  background-repeat: no-repeat;
  background-size: 100% auto;
}

a {
  outline: none;
  text-decoration: none;
}

/*
ウェブフォント用基本サイズセット
*/
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
dt,
dd,
a,
em,
span,
strong,
figcaption {
  font-size: 0.9375em;
  line-height: 1em;
  font-family: fot-tsukuaoldmin-pr6n, sans-serif;
  font-style: normal;
  font-weight: bold;
  letter-spacing: 0.07em;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
}

/*
PC・SP対応用
*/
.sp {
  display: none;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
RESET_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
COMMON_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
body {
  background-color: #eceeee;
}

html,
body {
  width: 100%;
  height: 100%;
  font-weight: 500;
  font-style: normal;
  vertical-align: baseline;
}

#grandwrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
COMMON_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
LOADING_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#loading {
  z-index: 999;
  background-color: #000000;
  color: #ffffff;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition-duration: 1000ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.42, 0, 0, 0.99);
  transition-delay: 0ms;
  transform-origin: bottom;
}

#loading.fade {
  opacity: 0;
  pointer-events: none;
  background-color: transparent;
}

#loading.remove {
  display: none;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
LOADING_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
メニュー_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.headernav {
  transition: 0.3s;
  opacity: 0;
  z-index: 3;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0px;
  background: url(../images/deluxe_btn_bg.png) no-repeat left top rgba(225, 225, 225, 0.8);
  width: 100%;
  height: 30px;
  padding: 10px;
  backdrop-filter: blur(3px);
}
.headernav li {
  display: flex;
  align-items: center;
  height: 100%;
}
.headernav li img {
  height: 100%;
  width: auto;
}
.headernav li a {
  display: flex;
  align-items: center;
  height: 100%;
  color: #000000;
}
.headernav li a.reserve_btn {
  padding: 0 15px;
  background: #b22222;
  border-radius: 50px;
  color: #FFFFFF;
}
.headernav.wpactive {
  opacity: 1;
  gap: 60px;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
メニュー_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
キービジュアル_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#kv {
  background-color: #000000;
  overflow: hidden;
  /*
  キャッチコピー
  */
  /*
  アート要素
  */
  /*
  プラットフォーム
  */
  /*
  パブリッシャー
  */
  /*
  アニメーション
  */
  /*トランスレーション系*/
}
#kv .catch {
  color: #FFFFFF;
  text-align: center;
  font-family: fot-tsukuaoldmin-pr6n, sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 1.6vw;
  margin: 15px 0;
}
#kv .art {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 720px;
  /*TC*/
  /*ABC*/
}
#kv .art > div {
  position: relative;
  flex: 1;
  background-repeat: no-repeat;
  background-size: auto 100%;
  height: 720px;
  overflow: hidden;
}
#kv .art > div > h2 {
  z-index: 2;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center center;
  text-indent: -9999px;
}
#kv .art .visual {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center center;
}
#kv .art .tc {
  background-image: url(../images/vis_tc_bg.png);
  background-position: top right;
}
#kv .art .tc h2 {
  top: 576px;
  right: 0;
  margin: 0 0 0 -454px;
  background-image: url(../images/vis_logo_tc.png);
  width: 410px;
  height: 133px;
}
#kv .art .tc .visual {
  top: 0;
  right: 0;
  background-image: url(../images/vis_tc_img.png);
  width: 571px;
  height: 705px;
}
#kv .art .abc {
  background-image: url(../images/vis_abc_bg.png);
  background-position: top left;
}
#kv .art .abc h2 {
  top: 620px;
  left: 0;
  margin: 0 0 0 140px;
  background-image: url(../images/vis_logo_abc.png);
  width: 222px;
  height: 70px;
}
#kv .art .abc .visual {
  top: 90px;
  left: 0;
  margin: 0 0 0 0;
  background-image: url(../images/vis_abc_img.png);
  width: 592px;
  height: 630px;
}
#kv .art_lowerpage {
  width: 100%;
  max-width: 1303px;
  margin: 0 auto;
}
#kv .art_lowerpage img {
  width: 100%;
}
#kv .platform {
  z-index: 3;
  position: absolute;
  top: 0;
  right: 0;
  background-image: url(../images/logo_switch.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  width: 72px;
  height: 72px;
}
#kv .publisher {
  position: absolute;
  top: 0px;
  left: 3px;
  background-image: url(../images/vis_logo_developer.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  width: 236px;
  height: 93px;
  text-indent: -9999px;
}
#kv .catch,
#kv .art > div > h2,
#kv .art .visual,
#kv .art_lowerpage,
#kv .platform,
#kv .publisher {
  opacity: 0;
  transition-duration: 800ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.42, 0, 0, 0.99);
  transition-delay: 0ms;
  transform-origin: center;
}
#kv .catch {
  transform: translateY(30px);
}
#kv.wpactive .catch {
  opacity: 1;
  transform: translateY(0px);
}
#kv .art > div > h2 {
  transform: translateY(30px);
}
#kv.wpactive .art > div > h2 {
  opacity: 1;
  transform: translateY(0px);
}
#kv .art .visual,
#kv .art_lowerpage {
  transform: scale(1.25);
  transition-delay: 500ms;
  transition-duration: 1500ms;
}
#kv.wpactive .art .visual, #kv.wpactive .art_lowerpage {
  opacity: 1;
  transform: scale(1);
}
#kv .platform {
  transform: translateX(-100px);
}
#kv.wpactive .platform {
  opacity: 1;
  transform: translateX(0px);
}
#kv .publisher {
  transform: translateX(100px);
}
#kv.wpactive .publisher {
  opacity: 1;
  transform: translateX(0px);
}

/*アニメート系*/
オブジェクト {
  opacity: 0;
  animation-duration: 1000ms;
  animation-timing-function: cubic-bezier(0.42, 0, 0, 0.99);
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
  animation-iteration-count: inherit;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
概要_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#aboutus {
  text-align: center;
  padding: 70px 0;
  /*
  見出し
  */
  /*
  キャプション
  */
  /*
  予約・購入ボタン
  */
  /*
  アニメーション
  */
  /*トランスレーション系*/
}
#aboutus h2 {
  margin: 0 0 60px 0;
  font-size: 56px;
  font-family: futura-pt, sans-serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0em;
}
#aboutus h2 strong {
  font-family: futura-pt, sans-serif;
  font-weight: 700;
}
#aboutus .caption p {
  font-size: 18px;
  line-height: 2em;
}
#aboutus a.reserve_btn {
  background: #b22222;
  color: #FFF;
  padding: 15px;
  margin: 60px auto 0;
  display: block;
  width: 250px;
  border-radius: 50px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}
#aboutus a.reserve_btn:hover {
  box-shadow: none;
  letter-spacing: 0.2em;
}
#aboutus h2,
#aboutus .caption p,
#aboutus a.reserve_btn {
  opacity: 0;
  transition-duration: 1000ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.42, 0, 0, 0.99);
  transition-delay: 0ms;
  transform-origin: center;
}
#aboutus h2 {
  letter-spacing: 0.1em;
}
#aboutus.wpactive h2 {
  opacity: 1;
  letter-spacing: 0;
}
#aboutus .caption p,
#aboutus a.reserve_btn {
  transform: translateY(30px);
}
#aboutus.wpactive .caption p, #aboutus.wpactive a.reserve_btn {
  opacity: 1;
  transform: translateY(0px);
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
受賞・評価歴_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#award {
  background-color: #1d1d1d;
  color: #ffffff;
  background-image: url(../images/award_bg.png);
  background-position: center center;
  background-repeat: repeat-x;
  background-size: auto 100%;
  text-align: center;
  padding: 65px 0;
}

/*
見出し
*/
#award .subtitle {
  margin: 0 0 40px 0;
}

#award .subtitle em {
  display: block;
  margin: 0 0 25px 0;
  font-size: 15px;
  font-style: normal;
}

#award .subtitle h2 {
  color: #ffefc0;
  position: relative;
  font-size: 30px;
  margin: 0 0 30px 0;
}

#award .subtitle h2::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -25px;
  left: 50%;
  margin: 0 0 0 -5px;
  width: 10px;
  height: 4px;
  background-color: #ffde00;
}

#award .subtitle span {
  font-size: 12px;
  font-family: futura-pt, sans-serif;
  font-weight: 400;
  font-style: italic;
}

/*
受賞リスト
*/
#award .awardlist ul {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  text-indent: -9999px;
}

/*TC*/
#award .awardlist ul.tc {
  background-image: url(../images/award_tc.png);
  width: 929px;
  height: 115px;
  margin: 0 auto 46px auto;
}

/*ABC*/
#award .awardlist ul.abc {
  background-image: url(../images/award_abc.png);
  width: 627px;
  height: 291px;
  margin: 0 auto;
}

/*
アニメーション
*/
/*トランスレーション系*/
#award,
#award .subtitle em,
#award .subtitle h2,
#award .subtitle span,
#award .awardlist ul.tc,
#award .awardlist ul.abc {
  opacity: 0;
  transition-duration: 1000ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.42, 0, 0, 0.99);
  transition-delay: 0ms;
  transform-origin: center;
}

#award {
  transition-duration: 400ms;
  transform-origin: left;
  transform: scaleX(0);
}

#award.wpactive {
  opacity: 1;
  transform: scaleX(1);
}

#award .subtitle em,
#award .subtitle h2,
#award .subtitle span {
  letter-spacing: 0.2em;
  transition-delay: 400ms;
  transform: translateY(20px);
}

#award .subtitle h2 {
  transition-delay: 700ms;
}

#award .subtitle span {
  transition-delay: 1000ms;
}

#award .subtitle.wpactive em,
#award .subtitle.wpactive h2,
#award .subtitle.wpactive span {
  opacity: 1;
  transform: translateY(0px);
}

#award .awardlist ul.tc,
#award .awardlist ul.abc {
  transform: scale(1.25);
  transition-duration: 2000ms;
}

#award .awardlist ul.tc.wpactive,
#award .awardlist ul.abc.wpactive {
  opacity: 1;
  transform: scale(1);
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ゲーム紹介汎用スタイル_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.aboutbox {
  background-repeat: repeat-y;
  background-position: top center;
  background-attachment: fixed;
  padding: 130px 0 0 0;
  text-align: center;
}

/*
キャッチコピー
*/
.aboutbox > h3 {
  font-size: 25px;
  writing-mode: vertical-rl;
  margin: 0 auto 98px auto;
  text-align: center;
  letter-spacing: 0.4em;
  font-feature-settings: unset;
}

/*
タイトルロゴ
*/
.aboutbox > h2 {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  text-indent: -9999px;
}

/*
ビジュアル
*/
.aboutbox .vis {
  background-position: bottom center;
  background-repeat: no-repeat;
}

.aboutbox .vis .visual {
  display: block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  margin: 0 auto;
}

/*
ストーリー
*/
.aboutbox .story {
  margin: 0 0 70px 0;
}

.aboutbox .story p {
  font-size: 16px;
  line-height: 2.56em;
  margin: 0 0 2.8em 0;
}

/*
スタッフ
*/
.aboutbox .staff {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 30px;
  margin: 0 auto 70px auto;
  padding: 0 30px;
}

.aboutbox .staff li {
  background-image: url(../images/common_box_arrow.png);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 10px auto;
  box-sizing: border-box;
  width: 315px;
  min-height: 135px;
  padding: 25px 15px;
  border: 1px #a0a0a0 solid;
}

.aboutbox .staff li em {
  display: block;
  font-size: 15px;
  font-style: normal;
  margin: 0 0 15px 0;
}

.aboutbox .staff li h4 {
  font-size: 18px;
  font-style: normal;
  margin: 0 0 15px 0;
}

.aboutbox .staff li p {
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0;
}

/*
キャラクター
*/
#about_abc.aboutbox .character ul {
  max-width: 1100px;
}
#about_abc.aboutbox .character li {
  width: 20%;
}

.aboutbox .character {
  margin: 0 0 150px;
}
.aboutbox .character h3 {
  display: inline-block;
  background-color: #000000;
  color: #ffffff;
  font-size: 14px;
  margin: 0 0 50px 0;
  padding: 15px 40px;
}
.aboutbox .character ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  max-width: 1200px;
  margin: 0 auto;
}
.aboutbox .character li {
  width: 18%;
  max-width: 235px;
  margin: 0 0 10px;
  font-size: 18px;
}
.aboutbox .character li img {
  width: 100%;
  height: auto;
}
.aboutbox .character li figcaption {
  width: 88%;
  height: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background: url(../images/common_box_arrow.png) no-repeat top left rgba(236, 238, 238, 0.9);
  background-size: 10px auto;
  backdrop-filter: blur(4px);
  margin: -82px auto 0;
  padding: 15px 0;
  border: 1px solid #000000;
  font-size: 12px;
  text-align: center;
}
.aboutbox .character li figcaption em {
  display: block;
  font-size: 18px;
  font-style: normal;
  width: 100%;
}

/*
声優さん
*/
.aboutbox .voiceactor {
  margin: 0 0 75px 0;
}
.aboutbox .voiceactor h3 {
  display: inline-block;
  background-color: #000000;
  color: #ffffff;
  font-size: 14px;
  margin: 0 0 50px 0;
  padding: 15px 40px;
}
.aboutbox .voiceactor ul {
  display: flex;
  justify-content: center;
  width: 1000px;
  margin: 0 auto;
}
.aboutbox .voiceactor li {
  font-size: 18px;
  padding: 0 4px 0 0;
}
.aboutbox .voiceactor li::after {
  content: "/";
  padding: 0 0 0 4px;
}
.aboutbox .voiceactor li:last-child::after {
  display: none;
  padding: 0;
}

/*
Switch版の特徴
*/
.switchfact {
  margin: 65px 0 40px;
}

.switchfact h3 {
  font-size: 18px;
  margin: 0 0 40px 0;
}

.switchfact li {
  box-sizing: border-box;
  width: 700px;
  margin: 0 auto 10px auto;
  padding: 1.1em 3em;
  border: 1px #a0a0a0 solid;
  border-radius: 100px;
}

.switchfact li:last-child {
  margin: 0 auto 20px auto;
}

/*
スペック

.aboutbox .spec {
	box-sizing: border-box;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: auto 100%;
	width: 100%;
	margin: 0 auto;
}

.aboutbox .spec h3 {
	font-size: 18px;
	margin: 0 0 30px 0;
}

.aboutbox .spec ul {}

.aboutbox .spec li {
	font-size: 16px;
	margin: 0 0 15px 0;
}

.aboutbox .spec li em {
	display: inline-block;
	font-style: normal;
	background-color: #ffffff;
	margin: 0 10px 0 0;
	padding: 0 5px;
	letter-spacing: 0em;
	border: 1px #1d1d1d solid;
}
*/
/*
アニメーション
*/
/*トランスレーション系*/
.aboutbox > h3,
.aboutbox > h2,
.aboutbox .vis,
.aboutbox .vis .visual,
.aboutbox .story p,
.aboutbox .staff li,
.aboutbox .voiceactor h3,
.aboutbox .voiceactor ul,
.aboutbox .character h3,
.aboutbox .character li,
.aboutbox .character li figcaption,
.aboutbox .spec,
.aboutbox .spec ul {
  opacity: 0;
  transition-duration: 1000ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.42, 0, 0, 0.99);
  transition-delay: 0ms;
  transform-origin: center;
}

.aboutbox > h3.wpactive {
  opacity: 1;
  color: #000000;
}

.aboutbox > h2 {
  transform: scale(1.25);
}

.aboutbox > h2.wpactive {
  opacity: 1;
  transform: scale(1);
}

.aboutbox .vis {
  transform: translateX(-80px);
}

.aboutbox .vis.wpactive {
  opacity: 1;
  transform: translateX(0px);
}

.aboutbox .vis .visual {
  transform: translateX(80px);
  transition-delay: 500ms;
}

.aboutbox .vis.wpactive .visual {
  opacity: 1;
  transform: translateX(0px);
}

.aboutbox .story p {
  letter-spacing: 0.265em;
  transform: translateY(10px);
}

.aboutbox .story p.wpactive {
  opacity: 1;
  letter-spacing: 0.165em;
  transform: translateY(10px);
}

.aboutbox .staff li,
.aboutbox .character li figcaption {
  background-color: #000000;
}

.aboutbox .staff.wpactive li {
  opacity: 1;
  background-color: transparent;
}

.aboutbox .character li.wpactive figcaption {
  opacity: 1;
  background-color: rgba(236, 238, 238, 0.9);
}

.aboutbox .voiceactor h3,
.aboutbox .character h3,
.aboutbox .character li {
  transform: translateY(30px);
}

.aboutbox .voiceactor.wpactive h3,
.aboutbox .character.wpactive h3,
.aboutbox .character li.wpactive {
  opacity: 1;
  transform: translateY(0px);
}

.aboutbox .voiceactor ul {
  transform: translateY(-30px);
}

.aboutbox .voiceactor.wpactive ul {
  opacity: 1;
  transform: translateY(0px);
}

/*.aboutbox .switchfact h3 {
	transform: translateY(30px);
}

.aboutbox .switchfact.wpactive h3 {
	opacity: 1;
	transform: translateY(0px);
}

.aboutbox .switchfact li {
	transform: translateY(-30px);
}

.aboutbox .switchfact.wpactive li {
	opacity: 1;
	transform: translateY(0px);
}*/
.aboutbox .spec {
  transform: scale(1.25);
}

.aboutbox .spec.wpactive {
  opacity: 1;
  transform: scale(1);
}

.aboutbox .spec ul {
  transition-delay: 500ms;
}

.aboutbox .spec.wpactive ul {
  opacity: 1;
}

/*アニメート系*/
.iamdead {
  display: inline-block;
  position: relative;
  animation-duration: 1000ms;
  animation-timing-function: cubic-bezier(0.42, 0, 0, 0.99);
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
  animation-iteration-count: infinite;
}

.iamdead.wpactive {
  animation-name: tc_chatch_death;
  animation-duration: 4000ms;
}

@keyframes tc_chatch_death {
  0% {
    color: #000000;
  }
  50% {
    color: #ff0000;
  }
  51% {
    color: #ff0000;
    transform: translate(0px, 0px);
  }
  55% {
    color: #ff0000;
    transform: translate(2px, 3px);
  }
  60% {
    color: #ff0000;
    transform: translate(-3px, 2px);
  }
  65% {
    color: #ff0000;
    transform: translate(2px, -2px);
  }
  75% {
    color: #ff0000;
    transform: translate(0px, 0px);
  }
  80% {
    color: #ff0000;
    transform: translate(1px, 1px);
  }
  85% {
    color: #ff0000;
    transform: translate(0px, 0px);
  }
  100% {
    color: #000000;
  }
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
東京クロノス_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#about_tc.aboutbox {
  background-image: url(../images/about_tc_bg.png);
  background-size: 1481px auto;
}

/*
タイトルロゴ
*/
#about_tc.aboutbox > h2 {
  background-image: url(../images/logo_tc.png);
  width: 654px;
  height: 133px;
  margin: 0 auto 40px auto;
}

/*
ビジュアル
*/
#about_tc.aboutbox .vis {
  background-image: url(../images/about_tc_vis_bg.png);
  background-size: 1679px auto;
  margin: 0 0 60px 0;
}

#about_tc.aboutbox .vis .visual {
  background-image: url(../images/about_tc_vis.png);
  width: 688px;
  height: 605px;
}

/*
スペック
*/
#about_tc.aboutbox .spec {
  background-image: url(../images/spec_tc_bg.png);
  height: 361px;
  padding: 110px 0 0 0;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
アルトデウス_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#about_abc.aboutbox {
  background-image: url(../images/about_abc_bg.png);
  background-size: 1600px auto;
  margin: 0 0 150px 0;
}

/*
タイトルロゴ
*/
#about_abc.aboutbox > h2 {
  background-image: url(../images/logo_abc.png);
  width: 423px;
  height: 133px;
  margin: 0 auto 40px auto;
}

/*
ビジュアル
*/
#about_abc.aboutbox .vis {
  background-image: url(../images/about_abc_vis_bg.png);
  background-size: 1512px auto;
  margin: 0 0 60px 0;
}

#about_abc.aboutbox .vis .visual {
  background-image: url(../images/about_abc_vis.png);
  width: 716px;
  height: 631px;
}

/*
スペック
*/
#about_abc.aboutbox .spec {
  background-image: url(../images/spec_abc_bg.png);
  height: 313px;
  padding: 70px 0 0 0;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
製品情報_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#product,
#reserve-buy {
  text-align: center;
  margin: 150px 0px;
  min-height: 1000px;
  /*
  見出し
  */
  /*
  キャプション
  */
  /*
  パッケージ画像
  */
}
#product .subtitle em,
#reserve-buy .subtitle em {
  display: block;
  margin: 0 0 25px 0;
  font-size: 15px;
  font-style: normal;
}
#product .subtitle h2,
#reserve-buy .subtitle h2 {
  position: relative;
  font-size: 30px;
  margin: 0 0 50px 0;
}
#product .subtitle h2::after,
#reserve-buy .subtitle h2::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -25px;
  left: 50%;
  margin: 0 0 0 -5px;
  width: 10px;
  height: 4px;
  background-color: #b22222;
}
#product .caption,
#reserve-buy .caption {
  margin: 0 0 65px 0;
}
#product .caption p,
#reserve-buy .caption p {
  font-size: 17px;
  line-height: 2em;
}
#product .package img,
#reserve-buy .package img {
  display: inline-block;
  margin: 0 0 10px 0;
}

/*
製品情報詳細
*/
.productinfo {
  position: relative;
  background: url(../images/product_bg.png) no-repeat center top/cover;
  box-sizing: border-box;
  width: 100%;
  margin: 150px auto;
  padding: 65px 0;
}
.productinfo dl {
  font-size: 16px;
  margin: 0 0 15px 0;
}
.productinfo dt {
  display: inline-block;
  font-style: normal;
  background-color: #ffffff;
  margin: 0 10px 0 0;
  padding: 0 5px;
  letter-spacing: 0em;
  border: 1px #1d1d1d solid;
}
.productinfo dd {
  margin: 0 0 30px;
  line-height: 1.4em;
}
.productinfo::before {
  content: "";
  z-index: 2;
  display: block;
  position: absolute;
  top: -47px;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 63px;
  height: 56px;
  background: url(../images/product_bgchara.png) no-repeat center top/contain;
}

/*
豪華版・早期購入特典
*/
.deluxe {
  width: 60%;
  max-width: 1000px;
  margin: 0 auto 100px;
}
.deluxe img {
  width: 100%;
}
.deluxe .setlist {
  border: 1px #a0a0a0 solid;
  padding: 30px;
  margin: 15px 0 0;
  background: url(../images/common_box_arrow.png) no-repeat top left;
  background-size: 10px auto;
}
.deluxe .setlist li {
  margin: 0 0 30px;
  text-align: left;
  line-height: 1.4em;
}
.deluxe .setlist li:last-child {
  margin: 0;
}

.earlybird {
  text-align: left;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 60%;
  max-width: 1000px;
  border: 1px #a0a0a0 solid;
  padding: 30px;
  margin: 0 auto 100px;
  background: url(../images/common_box_arrow.png) no-repeat top left;
  background-size: 10px auto;
}
.earlybird img {
  width: 20%;
  max-width: 150px;
}
.earlybird dt {
  display: inline-block;
  background-color: #000000;
  color: #ffffff;
  font-size: 14px;
  margin: 0 0 15px;
  padding: 15px 40px;
}

/*
ご予約・購入 店舗情報
*/
.shop h3 {
  display: inline-block;
  background-color: #000000;
  color: #ffffff;
  font-size: 14px;
  padding: 15px 40px;
}
.shop .shoplist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
  width: 70%;
  min-width: 750px;
  max-width: 1200px;
  margin: 0 auto;
}
.shop .shoplist li {
  width: 30%;
  margin: 0 0 100px;
}
.shop .shoplist .benefits {
  margin: 0 0 30px;
}
.shop .shoplist .benefits img {
  width: 100%;
}
.shop .shoplist .benefits figcaption {
  min-height: 30px;
}
.shop .shoplist .standard_btn,
.shop .shoplist .deluxe_btn {
  position: relative;
  display: block;
  margin: 0 auto 15px;
  padding: 15px;
  width: 50%;
  border-radius: 50px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
  background: #b22222;
  color: #FFF;
  transition-duration: 300ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.42, 0, 0, 0.99);
}
.shop .shoplist .standard_btn.comingsoon,
.shop .shoplist .deluxe_btn.comingsoon {
  background: #cccccc;
  color: rgba(255, 255, 255, 0.5);
  box-shadow: none;
}
.shop .shoplist .standard_btn.comingsoon::after,
.shop .shoplist .deluxe_btn.comingsoon::after {
  content: "comingsoon";
  display: block;
  position: absolute;
  bottom: 16px;
  right: 0;
  left: 0;
  color: #333333;
}
.shop .shoplist .standard_btn.comingsoon:hover,
.shop .shoplist .deluxe_btn.comingsoon:hover {
  letter-spacing: 0.07em;
}
.shop .shoplist .standard_btn:hover,
.shop .shoplist .deluxe_btn:hover {
  box-shadow: none;
  letter-spacing: 0.2em;
}
.shop .shoplist .deluxe_btn {
  background: url(../images/deluxe_btn_bg.png) no-repeat left top #b22222;
  background-size: cover;
}
.shop .shoplist .benefits_caution {
  display: inline-block;
  color: #b22222;
  margin: 0 0 15px;
}

.back_btn {
  display: block;
  margin: 0 auto 15px;
  padding: 15px;
  width: 20%;
  border-radius: 50px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  background: none;
  color: #000000;
  border: 1px solid #000000;
}

/*
アニメーション
*/
/*トランスレーション系*/
#product,
#product .subtitle em,
#product .subtitle h2,
#product .caption,
#product figure img,
#reserve-buy,
#reserve-buy .subtitle h2,
#reserve-buy .deluxe img,
#reserve-buy .deluxe .setlist,
#reserve-buy .shop h3,
#reserve-buy .earlybird,
#reserve-buy .shoplist li {
  opacity: 0;
  transition-duration: 1000ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.42, 0, 0, 0.99);
  transition-delay: 0ms;
  transform-origin: center;
}

#product {
  background-position: center 50px;
}
#product.wpactive {
  opacity: 1;
  background-position: center 160px;
}
#product .subtitle em {
  letter-spacing: 0.4em;
}
#product .subtitle.wpactive em {
  opacity: 1;
  letter-spacing: 0.165em;
}
#product .subtitle h2 {
  letter-spacing: 0.4em;
  transform: translateY(-30px);
}
#product .subtitle.wpactive h2 {
  opacity: 1;
  letter-spacing: 0.165em;
  transform: translateY(0px);
}
#product .caption {
  transform: translateY(-30px);
}
#product .caption.wpactive {
  opacity: 1;
  transform: translateY(0px);
}
#product figure img {
  display: inline-block;
  transform: scale(1.5);
  transition-duration: 2000ms;
}
#product figure.wpactive img {
  opacity: 1;
  transform: scale(1);
}

#reserve-buy {
  background-position: center 50px;
}
#reserve-buy.wpactive {
  opacity: 1;
  background-position: center 160px;
}
#reserve-buy .subtitle h2,
#reserve-buy .shop h3,
#reserve-buy .deluxe .setlist {
  letter-spacing: 0.4em;
  transform: translateY(-30px);
}
#reserve-buy .subtitle.wpactive h2,
#reserve-buy .shop h3.wpactive,
#reserve-buy .deluxe .setlist.wpactive {
  opacity: 1;
  letter-spacing: 0.165em;
  transform: translateY(0px);
}
#reserve-buy .deluxe img {
  display: inline-block;
  transform: scale(1.5);
  transition-duration: 2000ms;
}
#reserve-buy .deluxe img.wpactive {
  opacity: 1;
  transform: scale(1);
}
#reserve-buy .shop li,
#reserve-buy .earlybird {
  transform: translateY(-30px);
}
#reserve-buy .shop li.wpactive,
#reserve-buy .earlybird.wpactive {
  opacity: 1;
  transform: translateY(0px);
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
公式SNS_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#sns {
  margin: 0 0 300px 0;
  text-align: center;
}

/*
見出し
*/
#sns .subtitle em {
  display: block;
  margin: 0 0 25px 0;
  font-size: 15px;
  font-style: normal;
}

#sns .subtitle h2 {
  position: relative;
  font-size: 30px;
  margin: 0 0 100px 0;
}

#sns .subtitle h2::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -25px;
  left: 50%;
  margin: 0 0 0 -5px;
  width: 10px;
  height: 4px;
  background-color: #b22222;
}

/*
リンクアイコン
*/
#sns .snslist {
  display: flex;
  justify-content: center;
  align-items: center;
}

#sns .snslist li {
  margin: 0 20px;
}

#sns .snslist li img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

#sns .snslist li a {
  position: relative;
  top: 0;
  display: block;
  width: 100px;
  height: 100px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

#sns .snslist li a:hover {
  top: -10px;
}

/*
アニメーション
*/
/*トランスレーション系*/
#sns .subtitle em,
#sns .subtitle h2,
#sns .snslist li a {
  opacity: 0;
  transition-duration: 1000ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.42, 0, 0, 0.99);
  transition-delay: 0ms;
  transform-origin: center;
}

#sns .subtitle em {
  letter-spacing: 0.4em;
}

#sns.wpactive .subtitle em {
  opacity: 1;
  letter-spacing: 0.165em;
}

#sns .subtitle h2 {
  letter-spacing: 0.4em;
  transform: translateY(-30px);
}

#sns.wpactive .subtitle h2 {
  opacity: 1;
  letter-spacing: 0.165em;
  transform: translateY(0px);
}

#sns .snslist li a {
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
  transform: translateY(10px);
  transition-duration: 600ms;
}

#sns.wpactive .snslist li a {
  opacity: 1;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
  transform: translateY(0px);
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
フッター_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
footer#grandfooter {
  background-color: #020309;
  color: #ffffff;
  text-align: center;
  padding: 80px 0;
}

/*
コンテンツ
*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*//*# sourceMappingURL=basic.css.map */