@charset "utf-8";

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

body {
  color: #333;
  font: .729vw/1 "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  min-width: 960px;
}

body.fixed {
  width: 100%;
}
html.fixed {
	overflow: hidden;
}
.menu.fixed{
	right: 17px;
}

body.popupOpen {
  overflow-y: hidden;
}

/*-----------------------------
  header
-----------------------------*/

header {
	height: 2.08vw;
	position: absolute;
	width: 100%;
	z-index: 9;
}

#headerInner {
  box-sizing: border-box;
	padding: 1.2vw 0 0 1.04vw;
}

header img {
	width: 5.98vw;
}

/*-----------------------------
  nav
------------------------------*/

.menu {
	position: fixed;
	right: 0;
	text-align: right;
	top: 50%;
	transform: translateY(-50%);
	z-index: 999;
}

nav li,
nav li:before,
nav li:after,
nav a {
  height: 2.188vw;
	width: 11.458vw;
}

nav li {
  overflow: hidden;
  position: relative;
  text-indent: 100%;
  white-space: nowrap;
}

nav li + li {
	margin-top: .52vw;
}

nav li::before,
nav li::after {
  content: "";
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  transition: all .2s;
}

nav li:hover::before,
nav li::after,
nav .current::before {
  opacity: 0;
}

nav li::before,
nav li:hover::after,
nav .current::after {
  opacity: 1;
}

nav .top::before {
  background: url("../images/pc/nav_top_off.png") no-repeat 0 0 / 11.458vw 2.188vw;
}

nav .top::after,
nav .top.current::after {
  background: url("../images/pc/nav_top_on.png") no-repeat 0 0 / 11.458vw 2.188vw;
}

nav .news::before {
  background: url("../images/pc/nav_news_off.png") no-repeat 0 0 / 11.458vw 2.188vw;
}

nav .news::after,
nav .news.current::after {
  background: url("../images/pc/nav_news_on.png") no-repeat 0 0 / 11.458vw 2.188vw;
}

nav .system::before {
  background: url("../images/pc/nav_system_off.png") no-repeat 0 0 / 11.458vw 2.188vw;
}

nav .system::after,
nav .system.current::after {
  background: url("../images/pc/nav_system_on.png") no-repeat 0 0 / 11.458vw 2.188vw;
}

nav .story::before {
  background: url("../images/pc/nav_story_off.png") no-repeat 0 0 / 11.458vw 2.188vw;
}

nav .story::after,
nav .story.current::after {
  background: url("../images/pc/nav_story_on.png") no-repeat 0 0 / 11.458vw 2.188vw;
}

nav .character::before {
  background: url("../images/pc/nav_character_off.png") no-repeat 0 0 / 11.458vw 2.188vw;
}

nav .character::after,
nav .character.current::after {
  background: url("../images/pc/nav_character_on.png") no-repeat 0 0 / 11.458vw 2.188vw;
}

nav .special::before {
  background: url("../images/pc/nav_special_off.png") no-repeat 0 0 / 11.458vw 2.188vw;
}

nav .special::after,
nav .special.current::after {
  background: url("../images/pc/nav_special_on.png") no-repeat 0 0 / 11.458vw 2.188vw;
}

nav .gallery::before {
  background: url("../images/pc/nav_gallery_off.png") no-repeat 0 0 / 11.458vw 2.188vw;
}

nav .gallery::after,
nav .gallery.current::after {
  background: url("../images/pc/nav_gallery_on.png") no-repeat 0 0 / 11.458vw 2.188vw;
}

nav a {
  display: block;
  position: relative;
  z-index: 2;
}

.menu .btn {
	margin: 1.56vw .52vw 0 0;
}

.menu .btn div ~ div {
	margin-top: 0.52vw;
}

.menu .btn img {
	width: 9.375vw;
}

/*-----------------------------
 layout
------------------------------*/

main {
	display: block;
}

.box {
	min-height: 100vh;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.box.top {
	background: url(../images/pc/top_bg.jpg) no-repeat 50% 50% / cover;
}

.box.news {
	background: url(../images/pc/news_bg.jpg) no-repeat 50% 50% / cover;
}

.box.system {
	background: url(../images/pc/system_bg.jpg) no-repeat 50% 50% / cover;
}

.box.character {
	background: url(../images/pc/character_bg.jpg) no-repeat 50% 50% / cover;
}

.box.special {
	background: url(../images/pc/special_bg.jpg) no-repeat 50% 50% / cover;
}

.box.gallery {
	background: url(../images/pc/gallery_bg.jpg) no-repeat 50% 50% / cover;
}
footer.box{
	min-height: inherit;
}

.box h2 {
	margin-top: 6.25vw;
}

.box h2 img {
	width: 18.22vw !important;
}

/* tab */

.tab-list {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
	margin: 3.229vw auto;
}

.tab-list li {
	cursor: pointer;
}

.tab-list li ~ li {
  margin-left: .781vw;
}

.tab-list img {
	width: 9.375vw;
}

.tab-contents {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.tab-contents .cont {
  left: 0;
  margin: auto;
  opacity: 0;
  position: absolute;
  right: 0;
  transition: opacity .5s;
  z-index: -1;
}

.tab-contents .cont.active {
  animation: fade .5s forwards;
  z-index: 1;
}

.tab-contents .contInr {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
	margin: 0 auto;
}

.tab-contents .cont img {
	border: 2px solid #9b7d53;
}

@-webkit-keyframes fade {
  
  0% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
  
}

@keyframes fade {
  
  0% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
  
}

/* slider */

.sliderWrapper {
	margin: 0 auto;
	position: relative;
	width: 100%;
}

.slideInner {
	margin: 0 auto;
}

.arrows .slick-prev,
.arrows .slick-next {
  height: 5.208vw;
	top: calc(50% - 2.083vw);
  width: 5.208vw;
}

.arrows button.slick-prev::before,
.arrows button.slick-next::before {
  content: "";
}

.arrows img {
	width: 1.458vw;
}

button.slick-prev,
button.slick-next {
  z-index: 100;
}

.slick-prev {
	left: 50% !important;
	transform: translateX(-29.16vw) !important;
	z-index: 99;
}

.slick-next {
	right: 50% !important;
	transform: translateX(29.16vw) !important;
	z-index: 99;
}

#gallery .slick-prev {
	transform: translateX(-31.16vw) !important;
}

#gallery .slick-next {
	transform: translateX(31.16vw) !important;
}

.slick-next img {
	transform: scale(-1, 1);
}

.dots {
	display: flex;
	height: 1.04vw;
	left: 50%;
	position: absolute;
	top: 11.563vw;
	transform: translateX(-50%);
}

.dots > li + li {
	margin-left: 1.354vw;
}

.dots > li > button {
	background: none;
	border: none;
	height: 1.04vw;
	margin: 0;
	padding: 0;
	position: relative;
	text-indent: -9999px;
	width: 0.9375vw;
}

.dots > li > button::before {
	background: url(../images/pc/slide_pg_off.png) no-repeat 0 0 / .9375vw 1.04vw;
	content: "";
	display: inline-block;
	height: 1.04vw;
	left: 0;
	position: absolute;
	top: 0;
	width: 0.9375vw;
}

.dots > li.slick-active > button::before {
	background: url(../images/pc/slide_pg_on.png) no-repeat 0 0 / .9375vw 1.04vw;
}

/*-----------------------------
	top
------------------------------*/

h1 {
  overflow: hidden;
	text-indent: 100%;
  white-space: nowrap;
}

.floatCont {
	margin: auto;
	position: absolute;
	width: 34.375vw;
	bottom: 4.625vw;
	left: 0;
	right: 0;
}
.catchcopy {
	margin: 0 auto;
	width: 80%;
	/* margin: 0 auto -0.9vw; */
}
@media (max-width: 1100px) {
  
  _:lang(x)::-internal-media-controls-overlay-cast-button, .floatCont {
    transform: scale(.82);
    width: 29vw;
  }
}

.store {
	width: 72.42%;
	margin: -1.8% auto 0;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.store li + li {
	margin-left: 3.765%;
}

.bn-rotation{
	width: 87.27%;
	margin: 9.09% auto 0;
	position: relative;
	box-shadow: 0 0 50px rgba(0, 0, 0, .6);
}

.bn-rotation .swiper-slide{
	width: 9.6875vw;
}

.box.top .swiper-button-prev {
	left: -2.1875vw;
}
  
.box.top .swiper-button-next {
	right: -2.1875vw;
}

.top .swiper-button-prev,
.top .swiper-button-next {
  height: 2.6vw;
  width: .729vw;
}


/*-----------------------------
	news
------------------------------*/

.box.news {
  text-align: center;
}

.flexBox {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
	margin: 5.57vw auto 0;
	width: 54.6875vw;
}

.box.news section {
	background: rgba(0, 0, 0, .8);
	border: 1px solid #957c58;
  box-sizing: border-box;
	min-height: 29.166vw;
	padding-top: 3.125vw;
	position: relative;
	width: 26.35vw;
}

.flexBox section + section {
	margin-left: 2.083vw;
}

.box.news h3 {
	position: absolute;
	top: -1.406vw;
	width: 100%;
}

.box.news img {
	width: 21.77vw;
}

.box.news .btn {
	bottom: 2.083vw;
	position: absolute;
	width: 100%;
}

.box.news .btn img {
	width: 14.58vw;
}

.notice ul {
	margin: 0 1.04vw 0 1.3vw;
}

.notice li {
	border-bottom: 1px solid #464646;
}

.notice dl {
  display: -webkit-flex;
  display: flex;
	font-size: .78vw;
	position: relative;
}

.notice dl::before {
	border-radius: .156vw;
	color: #000;
	display: inline-block;
	font-size: 0.625vw;
	height: 1.35vw;
	line-height: 1.35vw;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 4.79vw;
}

.notice .mtn dl::before {
	background-color: #e5a25b;
	content: "メンテナンス";
}

.notice .upd dl::before {
	background-color: #83bdd8;
	content: "アップデート";
}

.notice .evt dl::before {
	background-color: #80d05c;
	content: "イベント";
}

.notice .chr dl::before {
	background-color: #e2cd58;
	content: "キャラクター";
}

.notice .ntc dl::before {
	background-color: #e57798;
	content: "お知らせ";
}

.notice dt,
.notice dd {
  line-height: 1.3;
}

.notice dt {
	padding-left: 5.468vw;
}

.notice dd {
	margin-left: .572vw;
	overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice ul a {
	color: #fff;
	display: block;
	padding: 1.04vw 0;
	text-decoration: none;
}

.notice a:hover {
	color: #92764f;
	text-decoration: underline;
}

.twitterTL {
	height: 24.27vw;
	margin: 0 auto;
	width: 20.83vw;
}

/*-----------------------------
	system
------------------------------*/

.box.system {
  text-align: center;
}

.box.system h2 {
	position: absolute;
	width: 100%;
	z-index: 9;
}

.box.system .swiper-container {
  height: 100vh;
}

.box.system .swiper-slide {
  opacity: 0 !important;
}

.box.system .swiper-slide-active {
  opacity: 1 !important;
}

.box.system .slide01 {
	background: url(../images/pc/sys_con01_bg.png) no-repeat 50% 50% / cover;
}

.box.system .slide02 {
	background: url(../images/pc/sys_con02_bg.png) no-repeat 50% 50% / cover;
}

.box.system .slide03 {
	background: url(../images/pc/sys_con03_bg.png) no-repeat 50% 50% / cover;
}

.box.system .slide04 {
	background: url(../images/pc/sys_con04_bg.png) no-repeat 50% 50% / cover;
}

.box.system .slide05 {
	background: url(../images/pc/sys_con05_bg.png) no-repeat 50% 50% / cover;
}

.box.system .contInr {
  margin: 0 auto;
  overflow: hidden;
  position: relative;
	width: 52.552vw;
}

.box.system .contInr .lead {
	margin: 14.583vw auto 0;
  width: 49.063vw;
}

.box.system .contInr figure {
	margin: -.417vw auto .99vw;
  width: 35.729vw;
}

.box.system .contInr img {
  margin-left: 55vw;
  opacity: 0;
  transition: all .3s;
  width: 100%;
}

.box.system .swiper-slide-active img {
  opacity: 1;
  margin-left: 0;
}

.box.system .swiper-slide-prev img {
  margin-left: -55vw;
}

.box.system .swiper-button-prev,
.box.system .swiper-button-next {
  bottom: auto;
  top: 27.448vw;
}

.box.system .swiper-button-prev {
  left: 24.167vw;
}

.box.system .swiper-button-next {
  right: 24.167vw;
}

.box.system .swiper-pagination-bullets {
  bottom: auto;
  top: 11.563vw;
}

.box.system .swiper-pagination-bullet {
  background: url("../images/pc/slide_pg_off.png") no-repeat 0 0 / cover;
  width: .938vw;
  height: 1.042vw;
}

.box.system .swiper-pagination-bullet ~ .swiper-pagination-bullet {
  margin-left: 1.25vw;
}

.box.system .swiper-pagination-bullet-active {
  background: url("../images/pc/slide_pg_on.png") no-repeat 0 0 / cover;
}

/*-----------------------------
	story
------------------------------*/

.box.story {
  text-align: center;
}

.box.story h2 {
	position: absolute;
	width: 100%;
	z-index: 9;
}

.box.story .swiper-container {
  height: 100vh;
}

.box.story .swiper-slide {
  opacity: 0 !important;
}

.box.story .swiper-slide-active {
  opacity: 1 !important;
}

.box.story .slide01 {
	background: url(../images/pc/sty_cont01_bg.jpg) no-repeat center center / cover;
}

.box.story .slide02 {
	background: url(../images/pc/sty_cont02_bg.jpg) no-repeat center center / cover;
}

.box.story .slide03 {
	background: url(../images/pc/sty_cont03_bg.jpg) no-repeat center center / cover;
}

.box.story .slide04 {
	background: url(../images/pc/sty_cont04_bg.jpg) no-repeat center center / cover;
}

.box.story .slide05 {
	background: url(../images/pc/sty_cont05_bg.jpg) no-repeat center center / cover;
}

.box.story .slide06 {
	background: url(../images/pc/sty_cont06_bg.jpg) no-repeat center center / cover;
}

.box.story .swiper-slide p {
	left: 50%;
	position: absolute;
	z-index: 9;
}

.box.story .slide01 p {
	top: 9.416vw;
	transform: translateX(10.416vw);
}

.box.story .slide02 p {
	bottom: 9.416vw;
	transform: translateX(-50%);
}

.box.story .slide03 p {
	top: 9.416vw;
	transform: translateX(10.416vw);
}

.box.story .slide04 p {
	top: 9.416vw;
	transform: translateX(-31.25vw);
}

.box.story .slide05 p {
	bottom: 9.416vw;
	transform: translateX(-50%);
}

.box.story .slide06 p {
	top: 9.416vw;
	transform: translateX(10.416vw);
}

.box.story .slide01 p img {
	width: 9.32vw;
}

.box.story .slide02 p img {
	width: 33.75vw;
}

.box.story .slide03 p img {
	width: 10.416vw;
}

.box.story .slide04 p img {
	width: 15.625vw;
}

.box.story .slide05 p img {
	width: 33.75vw;
}

.box.story .slide06 p img {
	width: 7.8125vw;
}

.box.story .swiper-button-prev {
  left: 50%;
  transform: translateX(-29.16vw);
}

.box.story .swiper-button-next {
  right: 50%;
  transform: translateX(29.16vw);
}

/*-----------------------------
	character
------------------------------*/

.box.character {
  text-align: center;
}

.box.character h2 {
	position: absolute;
	width: 100%;
	z-index: 9;
}

.box.character .swiper-container {
  height: 100vh;
}

.box.character .swiper-slide {
  opacity: 0 !important;
}

.box.character .swiper-slide-active {
  opacity: 1 !important;
}

.box.character figure {
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.box.character .info {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 50%;
}

.box.character .cv {
	margin-top: 1.145vw;
}

.box.character .btn {
  display: -webkit-flex;
  display: flex;
	justify-content: center;
	margin: 2.083vw auto;
	width: 7.29vw;
}

.box.character .btn li + li {
	margin-left: .9375vw;
}

.box.character .voice button.active img {
	opacity: .8;
}

.box.character figure img {
	width: 100vw;
}

.box.character .name img,
.box.character .cv img {
	width: 19.895vw;
}

.box.character .btn img {
	width: 3.125vw;
}

.voice button:active,
.voice button:focus,
.voice button:active > img,
.voice button:focus > img {
    position:relative;
}

.box.character .swiper-button-prev {
  left: 50%;
  transform: translateX(-29.16vw);
}

.box.character .swiper-button-next {
  right: 50%;
  transform: translateX(29.16vw);
}

/*-----------------------------
	special
------------------------------*/

.box.special {
  text-align: center;
}

.box.special .tab-list li,
.box.special .tab-list li::before,
.box.special .tab-list li::after {
  height: 3.125vw;
  width: 9.375vw;
}

.box.special .tab-list li {
  overflow: hidden;
  position: relative;
  text-indent: 100%;
  white-space: normal;
}

.box.special .tab-list li::before,
.box.special .tab-list li::after {
  content: "";
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  transition: all .2s;
}

.box.special .tab-list li::after,
.box.special .tab-list .active::before {
  opacity: 0;
}

.box.special .tab-list li:hover::after,
.box.special .tab-list .active::after {
  opacity: 1;
}

.box.special .tab-list .ic::before {
  background: url("../images/common/spe_tab_ic_passive.png") no-repeat 0 0 / cover;
}

.box.special .tab-list .ic::after,
.box.special .tab-list .ic.active::after {
  background: url("../images/common/spe_tab_ic_active.png") no-repeat 0 0 / cover;
}

.box.special .tab-list .wp::before {
  background: url("../images/common/spe_tab_wp_passive.png") no-repeat 0 0 / cover;
}

.box.special .tab-list .wp::after,
.box.special .tab-list .wp.active::after {
  background: url("../images/common/spe_tab_wp_active.png") no-repeat 0 0 / cover;
}

.box.special .tab-contents {
  height: 19.167vw;
}

.box.special .tab-contents .cont {
  margin: 0 auto;
	width: 45.417vw;
}

.box.special .tab-contents .contInr {
  margin: 0 auto;
	width: 39.219vw;
}

.box.special .tab-contents li {
  margin-top: .781vw;
}

.box.special .tab-contents li:nth-child(-n + 6) {
  margin-top: 0;
}

.box.special .tab-contents img {
  box-sizing: border-box;
}

.box.special .ic ul {
  -webkit-justify-content: space-between;
  justify-content: space-between;
	width: 39.21vw;
}

.box.special .ic li {
	width: 5.83vw;
}

.box.special .wp li {
  width: 9vw;
}

.box.special .txt {
	position: absolute;
	top: 42.7vw;
	left: 50%;
  line-height: 1.3;
	transform: translateX(-50%);
	color: #fff;
	font-size: 0.677vw;
}

.box.special .txt dl {
	margin: 0 auto;
	text-align: left;
	width: 19.27vw;
}

.box.special .txt dd {
	margin-top: 0.26vw;
}

.box.special .txt .caution {
	color: #aaa;
	margin-top: 1.25vw;
}

.box.special .empty {
	height: 5.2vw;
	width: 5.2vw;
}

#fs {
  opacity: 0;
}

/*-----------------------------
	gallery
------------------------------*/

.box.gallery {
  text-align: center;
}

.box.gallery .tab-list li,
.box.gallery .tab-list li::before,
.box.gallery .tab-list li::after {
  height: 3.125vw;
  width: 9.375vw;
}

.box.gallery .tab-list li {
  overflow: hidden;
  position: relative;
  text-indent: 100%;
  white-space: normal;
}

.box.gallery .tab-list li::before,
.box.gallery .tab-list li::after {
  content: "";
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  transition: all .2s;
}

.box.gallery .tab-list li::after,
.box.gallery .tab-list .active::before {
  opacity: 0;
}

.box.gallery .tab-list li:hover::after,
.box.gallery .tab-list .active::after {
  opacity: 1;
}

.box.gallery .tab-list .ss::before {
  background: url("../images/common/gal_tab_ss_passive.png") no-repeat 0 0 / cover;
}

.box.gallery .tab-list .ss::after,
.box.gallery .tab-list .ss.active::after {
  background: url("../images/common/gal_tab_ss_active.png") no-repeat 0 0 / cover;
}

.box.gallery .tab-list .pv::before {
  background: url("../images/common/gal_tab_pv_passive.png") no-repeat 0 0 / cover;
}

.box.gallery .tab-list .pv::after,
.box.gallery .tab-list .pv.active::after {
  background: url("../images/common/gal_tab_pv_active.png") no-repeat 0 0 / cover;
}

.box.gallery .tab-list .ch::before {
  background: url("../images/common/gal_tab_ch_passive.png") no-repeat 0 0 / cover;
}

.box.gallery .tab-list .ch::after,
.box.gallery .tab-list .ch.active::after {
  background: url("../images/common/gal_tab_ch_active.png") no-repeat 0 0 / cover;
}

.box.gallery .tab-list .bc::before {
  background: url("../images/common/gal_tab_bc_passive.png") no-repeat 0 0 / cover;
}

.box.gallery .tab-list .bc::after,
.box.gallery .tab-list .bc.active::after {
  background: url("../images/common/gal_tab_bc_active.png") no-repeat 0 0 / cover;
}

.box.gallery .tab-contents {
  height: 21vw;
}

.box.gallery .tab-contents .cont {
  margin: 0 auto;
	width: 60vw;
}

.box.gallery .tab-contents .contInr {
  margin: 0 auto;
	width: 51.875vw;
}

.box.gallery .tab-contents li {
  margin-top: .885vw;
	width: 16.719vw;
}

.box.gallery .tab-contents li:nth-child(-n + 3) {
  margin-top: 0;
}

.box.gallery .tab-contents img {
  box-sizing: border-box;
}

/*-----------------------------
  footer
------------------------------*/

footer {
	color: #fff;
	font-size: .625vw;
}
.footerInner{
	width: 33.33vw;
	margin: 0 auto;
	padding: 1.042vw 0;
}
.gameInfo {
	background: #464646;
}
.gameInfo .footerInner{
	display: flex;
	align-items: center;
}
.gameInfo .icon {
  box-sizing: border-box;
  margin-right: .885vw;
  width: 6.25vw;
	vertical-align: middle;
}
.gameInfo .icon img{
	border-radius: .8vw;
}
.table{
	width: 26.04vw;
}
table{
	width: 100%;
}
th,td{
	padding: 0.3125vw 0;
	background-color: #404040;
	border: solid 1px #505050;
	color: #aaaaaa;
	vertical-align: middle;
	line-height: 1.2;
}
td{
	padding-left: 20px;
}


/*-----------------------------
  popup
------------------------------*/

#firstPopup {
  color: #fff;
  margin: 0 auto;
  position: relative;
  text-align: right;
  width: 48.958vw;
}

#firstPopup .bn img {
  width: 48.958vw;
}

#firstPopup .txt {
  font-size: .833vw;
  margin-top: .521vw;
}

#firstPopup .txt label {
  cursor: pointer;
}

#firstPopup .txt input {
  height: .833vw;
  margin-right: .26vw;
  position: relative;
  top: .156vw;
  width: .833vw;
}

#firstPopup .mfp-close {
  right: -68px;
}

#charaPopup {
  display: none;
  height: 100%;
  left: 0;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

#charaPopup .media {
  overflow: hidden;
  padding-bottom: 10vw;
  position: relative;
}

#charaPopup .media .bg {
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#charaPopup .media .voice,
#charaPopup .media .movie {
  position: relative;
}

#charaPopup .media .voice {
  margin-top: 9.063vw;
}

#charaPopup .media .voiceTtl {
  margin-left: 35.313vw;
  width: 10.365vw;
}

#charaPopup .media .voiceBtn {
  margin: 1.458vw 0 0 37.917vw;
  width: 5.208vw;
}

#charaPopup .media .voiceBtn.active {
  opacity: .6;
  pointer-events: none;
}

#charaPopup .media .movie p:not(.caution) {
  margin: 42.063vw auto 0;
  text-align: center;
  width: 16.563vw;
}

#charaPopup .media .movie ul {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  margin-top: 2.604vw;
}

#charaPopup .media .movie li {
  width: 14.063vw;
}

#charaPopup .media .movie li ~ li {
  margin-left: .781vw;
}

#charaPopup .media .movie .caution {
  color: #fff;
  font-size: .729vw;
  margin-top: 1.563vw;
  text-align: center;
}

#charaPopup .close {
  background: url("../images/pc/btn_close.gif") no-repeat 0 0;
  height: 55px;
  opacity: .65;
  position: fixed;
  right: calc(1.354vw + 17px);
  top: 1.354vw;
  transition: all .2s;
  width: 56px;
  z-index: 1001;
}



/*-----------------------------
	キャラ別ポップアップ
------------------------------*/

.charaDetailPopup{cursor: pointer;}
#charaDetail{
	display: none;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 50%;
	transform: translate3d(-50%,0,0);
	width: 100%;
	height: 100%;
}
#popup>div{
	height: 100vh;
	overflow-y: scroll;
	background: url(../images/pc/charaDetail/bg01.jpg) repeat-y center 0/100%;
}
#charaDetailNav{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 50%;
	transform: translate3d(-50%,0,0);
	width: 100%;
	margin-left: -17px;
	margin-bottom: -4.06vw;
	box-shadow: -0.15vw 0 0.2vw 0.15vw rgba(0,0,0,0.55);
	background: url(../images/pc/charaDetail/tab_bg01.jpg) repeat-x 0 0 /0.1vw 3.1vw;
}
#charaDetailNav li{
	position: relative;
	width: 8.27%;
	height: 0;
	padding-bottom: 3.1%;
}
#charaDetailNav li:last-of-type{margin-right: -17px;}
#charaDetailNav li span{
	display: inline-block;
	position: absolute;
	width: 100%;
}
.charaDetail p{display: none;}
.charaDetail+p{
	position: relative;
	width: 12.62%;
	margin: -7.55% auto 0;
	cursor: pointer;
}
#charaDetailNav::after,
#charaDetailNav li::before,
#charaDetailNav li span::before,
#charaDetailNav li::after,
.charaDetail+p::after{content: '';display: inline-block;position: absolute;}
#charaDetailNav::after{
	z-index: 9999;
	bottom: 0;
	left: 50%;
	transform: translate3d(-50%,0,0);
	width: 100%;
	height: 0.1vw;
	background: #84714f;
}
#charaDetailNav li::before,
#charaDetailNav li span::before{
	z-index: 9999;
	top: 0;
	left: -1.5%;
	width: 1.5%;
	height: 3vw;
	background: url(../images/pc/charaDetail/tab_before01.jpg) no-repeat center 0/100%;
}
#charaDetailNav li::after,
.charaDetail+p::after{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: 0.3s;
	pointer-events: none;
}
#charaDetailNav li.on{pointer-events: none;}
#charaDetailNav li.on::after{opacity: 1;background: url(../images/pc/charaDetail/tab_bt01_on.jpg) no-repeat center 0/100%;}
#charaDetailNav li:nth-of-type(2).on::after{background: url(../images/pc/charaDetail/tab_bt02_on.jpg) no-repeat center 0/100%;}
#charaDetailNav li:nth-of-type(3).on::after{background: url(../images/pc/charaDetail/tab_bt03_on.jpg) no-repeat center 0/100%;}
#charaDetailNav li:nth-of-type(4).on::after{background: url(../images/pc/charaDetail/tab_bt04_on.jpg) no-repeat center 0/100%;}
#charaDetailNav li:nth-of-type(5).on::after{background: url(../images/pc/charaDetail/tab_bt05_on.jpg) no-repeat center 0/100%;}
.charaDetail+p.on::after{opacity: 1;background: url(../images/common/charaDetail/closeBtn.png) no-repeat center 0/100%;}
.box.character .btn{align-items: baseline;}
#firstPopup .mfp-close{
	width: 3.646vw;
	height: 3.646vw;
	right: -4.583vw;
	background: url(../images/pc/btn_close.png) no-repeat 0 0/100%;
}