@charset "utf-8";

body {
  background: #000;
}
.mac body, .safari body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; }

.new:after {
  content: url(../img/new.png);
  position: absolute;
  top: -14px;
  right: -3px;
  -webkit-animation: blink 3s ease-in-out infinite;
  animation: blink 3s ease-in-out infinite;
}

.pop_images {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 1px 28px;
}
.pop_images.center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.pop_images li {
  position: relative;
  margin: 0 0 10px;
  text-align: left;
}
.pop_images.center li {
  position: relative;
  margin: 0 30px 10px;
  text-align: left;
}
.pop {
  position: relative;
  display: inline-block;
  -webkit-box-shadow: 0 0 14px 6px rgba(255,255,255,0.6);
  box-shadow: 0 0 14px 6px rgba(255,255,255,0.6);
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}
/*.pop:before {
  content: "";
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: #fff;
  opacity: 0;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}*/
.pop:hover {
  -webkit-filter: contrast(1.2) brightness(1.2);
  filter: contrast(1.2) brightness(1.2);
  -webkit-box-shadow: 0 0 14px 6px rgba(131,127,14,0.75);
  box-shadow: 0 0 14px 6px rgba(131,127,14,0.75);
}
.spotlight .pop:hover {
  -webkit-filter: contrast(1.1) brightness(1.2);
  filter: contrast(1.1) brightness(1.2);
}
/*.pop:hover:before {
  opacity: 0.12;
}*/
.right_img {
  position: absolute;
  top: 10px; right: 10px;
}
.pop + .txt {
  display: block;
}

header h1 {
  width: 22vh;
  margin: 0 auto 2vh;
}
header .release {
  width: 25vh;
  margin: 0 auto;
}
header h1 img, .release img {
  width: 100%;
}
.newsWrap {
  height: 184px;
}
.mCSB_inside > .mCSB_container {
  margin-right: 35px;
}
.mCSB_scrollTools {
  width: 35px;
  opacity: 1;
}
.mCSB_scrollTools .mCSB_draggerContainer {
  width: 35px;
  border-top: none;
}
.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail {
  width: 35px;
  background: url(../img/scroll_rail.png) 50% 0 / 30.5px auto no-repeat;
  opacity: 1;
}
.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 35px;
  height: 31px;
  background: transparent url(../img/scroll_marker.png) 0 0 no-repeat;
}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
  background-color: transparent;
}
.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger {
  height: 31px;
}
.news {
  width: 694px;
  height: 257px;
  padding: 46px 24px 0 20px;
  margin: 0 auto;
  background: url(../img/frame_news.png) 0 0 no-repeat;
  font-size: 16rem;
  line-height: 1.3;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.news li {
  position: relative;
  padding: 0.5em 0 0.5em 7.3em;
}
.news .date {
  position: absolute;
  top: 0.5em;
  left: 0;
  display: block;
  width: 6.3em;
  text-align: right;
}
.news b {
  color: #b00;
}
.banner_bg {
  position: relative;
  z-index: 10;
  background: #000;
}
.banner li {
  position: relative;
}
.banner .new:after {
  -webkit-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  transform: rotate(-4deg);
}
.banner a,
.banner a img {
  display: block;
  width: 257px;
  height: 102px;
}
.banner a {
  background: 0 0 no-repeat;
}
.banner a img {
  background: 0 100% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.25s linear;
  -o-transition: opacity 0.25s linear;
  transition: opacity 0.25s linear;
}
.banner .pv01,
.banner .pv01 img {
  background-image: url(../img/bnr_pv01.png);
}
.banner .twitter,
.banner .twitter img {
  background-image: url(../img/bnr_twitter.png);
}
.banner .machiasobi,
.banner .machiasobi img {
  background-image: url(../img/bnr_machiasobi.png);
}
.banner .benefits,
.banner .benefits img {
  background-image: url(../img/bnr_benefits.png);
}
.banner .chara_mv01,
.banner .chara_mv01 img {
  background-image: url(../img/bnr_chara_mv01.png);
}
.banner .rt_campaign01,
.banner .rt_campaign01 img {
  background-image: url(../img/bnr_rt_campaign01.png);
}
.banner .rt_campaign02,
.banner .rt_campaign02 img {
  background-image: url(../img/bnr_rt_campaign02.png);
}
.banner .rt_campaign03,
.banner .rt_campaign03 img {
  background-image: url(../img/bnr_rt_campaign03.png);
}
.banner .yomawari_mv,
.banner .yomawari_mv img {
  background-image: url(../img/bnr_yomawari_mv.png);
}
.banner .store_trial,
.banner .store_trial img {
  background-image: url(../img/bnr_store_trial.png);
}
.banner .omikuji,
.banner .omikuji img {
  background-image: url(../img/bnr_omikuji.png);
}
.banner .chara_mv02,
.banner .chara_mv02 img {
  background-image: url(../img/bnr_chara_mv02.png);
}

#gloNav {
}
#gloNav ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 65%;
  min-width: 820px;
  max-width: 906px;
  padding: 14px 0 0;
  margin: 0 auto;
}
#gloNav ul li {
  position: relative;
}
#gloNav ul li a:after {
  content: "";
  position: absolute;
  right: -5%;
  bottom: 0;
  left: -5%;
  display: block;
  width: 110%;
  height: 22px;
  margin: 0 auto;
  opacity: 0;
  -webkit-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
#gloNav ul li a.top:after {
  background: url(../img/nav_top_ov.png) 50% 100% no-repeat;
}
#gloNav ul li a.about:after {
  bottom: -7px;
  background: url(../img/nav_about_ov.png) 50% 100% no-repeat;
}
#gloNav ul li a.yomawari:after {
  bottom: 8px;
  background: url(../img/nav_yomawari_ov.png) 50% 100% no-repeat;
}
#gloNav ul li a.shin_yomawari:after {
  bottom: -13px;
  background: url(../img/nav_shin_yomawari_ov.png) 50% 100% no-repeat;
}
#gloNav ul li a:hover:after {
  opacity: 1;
}
#bgmBox {
  background: url(../img/bgm.png) 0 50% no-repeat;
}
#bgmBox .btnSwitch {
  float: left;
  width: 181px;
  height: 76px;
}
#bgmBox .btnPlay1 {
  float: left;
  display: block;
  width: 76px;
  height: 76px;
  background: url(../img/bgm_on.png) 0 0 no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.25s linear;
  -o-transition: opacity 0.25s linear;
  transition: opacity 0.25s linear;
}
#bgmBox .btnPlay2 {
  float: left;
  display: block;
  width: 76px;
  height: 76px;
  margin: 0 8px 0 0;
  background: url(../img/bgm_on.png) 0 0 no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.25s linear;
  -o-transition: opacity 0.25s linear;
  transition: opacity 0.25s linear;
}
#bgmBox.track0:not(.off) .btnPlay1,
#bgmBox.track1:not(.off) .btnPlay2 {
  opacity: 1;
}
#bgmBox .btnPlay1:hover, #bgmBox .btnPlay2:hover {
  opacity: 1;
}
body.lightOff #bgmBox .btnSwitch,
body.lightOff #bgmBox .btnPlay1,
body.lightOff #bgmBox .btnPlay2,
body.lightOff #bgmBox .btnVol {
  cursor: not-allowed;
}
body.lightOff #bgmBox .btnPlay1:hover, body.lightOff #bgmBox .btnPlay2:hover {
  opacity: 0;
}
#bgmBox .btnVol {
  width: 60px;
  height: 48px;
  margin: 14px 0 0;
  background: url(../img/bgm_vol.png) 0 0 no-repeat;
}
#bgmBox.small .btnVol {
  background-position: 0 -48px;
}
#bgmBox.large .btnVol {
  background-position: 0 -96px;
}
#lightBox {
  position: relative;
  width: 278px;
  height: 82px;
  margin: 0 auto;
}
.android #lightBox {
  display: none;
}
#lightBox .btnType {
  display: block;
  width: 84px;
  height: 82px;
  margin: 0 8px 0 0;
  background: url(../img/light_btn.png) 0 0 no-repeat;
}
#lightBox .btnSwitch {
  position: absolute;
  top: 0; bottom: 0; left: 92px;
  width: 178px;
  height: 40px;
  margin: auto 0;
  background: url(../img/light_switch.png) 0 0 no-repeat;
}
.lightAll #lightBox .btnSwitch {
  background-position: 0 -40px;
}
.contents {
  position: relative;
  z-index: 10;
}
#about {
  position: relative;
  min-height: 920px;
  background: #000;
}
#about:before {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  width: 50%;
  height: 1220px;
  background: url(../img/bg_about1.jpg) 40% 0px no-repeat;
  z-index: 7;
}
#about:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 1220px;
  background: url(../img/bg_about2.png) 100% 0 no-repeat;
  z-index: 8;
  -webkit-mask-image: -webkit-gradient(linear,right bottom, left top,from(black), color-stop(25%, black), to(transparent));
  -webkit-mask-image: -webkit-linear-gradient(bottom right,black 0%, black 25%, transparent 100%);
  mask-image: -webkit-gradient(linear,right bottom, left top,from(black), color-stop(25%, black), to(transparent));
  mask-image: linear-gradient(to top left,black 0%, black 25%, transparent 100%);
}
#about section {
  position: relative;
  text-align: center;
  width: 960px;
  min-height: 920px;
  margin: 0 auto;
  padding: 80px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: url(../img/bg_about.png) 0 0 repeat-y;
  z-index: 10;
}
#about section h2 {
  margin: 0 0 64px;
}
#about #movie {
  position: relative;
  padding: 40px 0 100px;
}
#about #movie.new:after {
  top: 36px;
  right: 310px;
}
#about #movie h3 {
  margin: 0 0 25px;
}
#about #movie .mv_list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
#about #movie .mv_list li {
  position: relative;
  width: 50%;
  margin: 0 0 26px;
}

#about #movie .mv_list li .mv_obj {
  width: 432px;
  height: 243px;
}
#about #movie .mv_list li:only-child {
  width: 768px;
  margin: 0 auto;
}

#about #movie .mv_list li:only-child .mv_obj {
  width: 768px;
  height: 432px;
}
#about #movie h4 {
  margin: 0 0 18px;
}
#about #movie .mv_list li a.play_btn {
  position: relative;
  display: inline-block;
  line-height: 0;
  -webkit-box-shadow: 0 0 14px 6px rgba(255,255,255,0.6);
  box-shadow: 0 0 14px 6px rgba(255,255,255,0.6);
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}
#yomawari, #shin_yomawari {
  position: relative;
  overflow: hidden;
}
#yomawari > h2 {
  position: relative;
  width: 960px;
  height: 1347px;
  padding: 190px 0 0;
  margin: 0 auto;
  text-align: center;
  background: #000 url(../img/bg1.jpg) 50% 0 / 100% auto no-repeat;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: inset 0 0 36px 16px rgba(0,0,0,1);
  box-shadow: inset 0 0 36px 16px rgba(0,0,0,1);
}
#yomawari .story,
#shin_yomawari .story {
  position: relative;
  background: #000;
  text-align: center;
  /*-webkit-box-shadow: 0 0 36px 16px rgba(0,0,0,1);
  box-shadow: 0 0 36px 16px rgba(0,0,0,1);*/
}
.txt_1_system01:after {
  content: url(../img/img_1_system01.png);
  position: absolute;
  top: 142px;
  right: 10px;
}
#yomawari .mainBox > section,
#shin_yomawari .mainBox > section {
  position: relative;
  width: 960px;
  padding: 68px 20px 0;
  margin: 0 auto;
  background: rgba(0,0,0,0.75);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#yomawari .mainBox > section > section {
  padding: 0 0 36px;
}
#yomawari h3,
#shin_yomawari h3 {
  margin: 0 0 16px;
  text-align: center;
}

section h4 {
  margin: 0 0 0px;
}

section.game_flow h4 {
  margin: 0 0 26px;
}
.game_flow ul {
  position: relative;
  margin: 0 36px;
}
.game_flow ul:before {
  content: url(../img/arrow_system.png);
  position: absolute;
  top: 130px;
  left: 384px;
}
.game_flow ul li {
  width: 360px;
}
.game_flow ul li:first-child {
  margin: 0 0 56px;
}
.game_flow ul li:nth-child(2) {
  position: absolute;
  top: 144px;
  right: 6px;
}
p.box {
  position: relative;
  width: 840px;
  margin: 0 auto;
}
.img_question {
  position: absolute;
  top: 58px;
  left: 25px;
}
.img_exclaim {
  position: absolute;
  top: 266px;
  left: 25px;
}
.img_hide {
  position: absolute;
  top: 403px;
  left: 529px;
}
.txt_1_system08:after {
  content: url(../img/img_1_system03.png);
  position: absolute;
  top: 284px;
  left: 427px;
}

.back {
  position: fixed;
  top: 0; right:0; left: 0;
  display: block;
  width: 100%;
  height: 100vh;
  z-index: 0;
  background: #000;
}
.back img {
  position: absolute;
  top: 0; right: 0; left: 0;
  max-width: 960px;
  height: 100vh;
  margin: 0 auto;
}
.back img.bg1,
.back.shin img.bg2 {
  display: block;
}
.back.shin img.bg1,
.back img.bg2 {
  display: none;
}

/* 深夜廻 */
#shin_yomawari > h2 {
  position: relative;
  width: 960px;
  height: 1347px;
  padding: 176px 0 0;
  margin: 0 auto;
  text-align: center;
  background: #000 url(../img/bg2.jpg) 50% 0 / 100% auto no-repeat;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: inset 0 0 36px 16px rgba(0,0,0,1);
  box-shadow: inset 0 0 36px 16px rgba(0,0,0,1);
}
#shin_yomawari .mainBox > section.shin_system {
  padding: 68px 20px 4px;
}
.txt_2_monster1 {
  height: 1300px;
}
.img_monster01 {
  position: absolute;
  top: 536px;
  left: 22px;
}
.img_monster02 {
  position: absolute;
  top: 722px;
  left: 620px;
}
.img_monster03 {
  position: absolute;
  top: 982px;
  left: 44px;
}
#overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  display: none;
  width: 100%;
  height: 100%;
  /*background: rgba(255,222,141,0.57);*/
  mix-blend-mode: overlay;
  z-index: 50;
  pointer-events: none;
}
.spotlight #overlay {
  display: block;
}
#overlay img {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 1246px;
  height: 1211px;
  margin: auto;
  z-index: 51;
  -webkit-transition: -webkit-transform 3.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: -webkit-transform 3.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: transform 3.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 3.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 3.84s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 3.84s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.edge #overlay img, .ie #overlay img {
  opacity: 0;
}
#light {
  position: fixed;
  top: -200%; right: -150%; bottom: -200%; left: -150%;
  width: 300%;
  height: 400%;
  margin: auto;
  z-index: 51;
  pointer-events: none;
}
.lightAll #light {
  display: none;
}
.lightOff #light {
  pointer-events: auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#light img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/light.png) 50% 50% no-repeat;
  -webkit-transition: -webkit-transform 3.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: -webkit-transform 3.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: transform 3.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 3.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 3.84s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 3.84s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#light:after {
  position: absolute;
  top: 0; left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 52;
}
.loaded #light:after {
  -webkit-animation: fadeOut 0.8s linear both;
  animation: fadeOut 0.8s linear both;
}
.lightOff #light img {
  background: #000;
}
.light_pop_msg {
  position: fixed;
  top: 70px;
  right: 10px;
  display: none;
  padding: 0.4em 0.7em 0.5em;
  border: 2px solid #b00;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  background: rgba(0,0,0,0.75);
  font-size: 16rem;
  line-height: 1.4;
  z-index: 100;
}
.light_pop_msg:after {
  content: "";
  position: absolute;
  top: -9.5px;
  right: 58px;
  display: block;
  width: 15px;
  height: 15px;
  border-top: 2px solid #b00;
  border-left: 2px solid #b00;
  background: #000;
  -webkit-transform: rotate(45deg) skewX(7deg) skewY(7deg);
  -ms-transform: rotate(45deg) skewX(7deg) skewY(7deg);
  transform: rotate(45deg) skewX(7deg) skewY(7deg);
}
.light_pop_msg p {
  margin: 0;
}
.light_pop_msg img {
  position: relative;
  top: 3px;
  margin: 0 3px 0 0;
}
.light_pop_msg b {
  color: #b00;
}
.enemy_red {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
}
.enemy_red img {
  position: absolute;
  pointer-events: none;
  z-index: 200;
  -webkit-animation: fade-in-out 0.5s ease-in-out infinite both;
  animation: fade-in-out 0.5s ease-in-out infinite both;
}
.enemy_red .y1 {
  top: 5720px;
  left: 120px;
  /*-webkit-animation-duration: 2s;
  animation-duration: 2s;*/
}
.enemy_red .y2 {
  top: 5850px;
  left: 540px;
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  /*-webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;*/
}
.enemy_red .y3 {
  top: 6030px;
  left: 100px;
  -webkit-transform: scale(0.4);
  -ms-transform: scale(0.4);
  transform: scale(0.4);
  /*-webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;*/
}
.enemy_red .y4 {
  position: absolute;
  top: 10750px;
  right: 130px;
  /*-webkit-animation-duration: 2.2s;
  animation-duration: 2.2s;*/
}
.enemy_red .y5 {
  position: absolute;
  top: 11160px;
  right: 0px;
  -webkit-transform: scale(0.6);
  -ms-transform: scale(0.6);
  transform: scale(0.6);
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  /*-webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;*/
}
.enemy_red .y6 {
  top: 11315px;
  right: 235px;
  z-index: 200;
  -webkit-transform: scale(0.35);
  -ms-transform: scale(0.35);
  transform: scale(0.35);
}
.footer_bg {
  position: relative;
  margin: -50px 0 0;
  z-index: 70;
  padding: 34px 0 0;
  background: #000;
  -webkit-box-shadow: 0 0 8px 4px #000;
  box-shadow: 0 0 8px 4px #000;
}
.footer_bg:before {
  content: "";
  position: absolute;
  top: -27px;
  left: 0;
  width: 100%;
  height: 48px;
  margin: 0 auto;
  background: url(../img/bg_footer.png) no-repeat 50% 0;
}
footer {
  width: 960px;
  padding: 0 0 12px;
  margin: 0 auto;
  overflow: hidden;
}
.spec {
  width: 966px;
  margin: 0 -3px 10px;
  padding: 0 0 42px;
  text-align: center;
  background: url(../img/line_footer.png) 0 100% no-repeat;
}
.footer_bg .btns {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin: 0 0 8px;
}
.footer_bg .btns li {
  background: #fff;
  margin: 0 6px;
  line-height: 0;
  vertical-align: top;
}
.footer_bg li a:hover {
  opacity: 0.85;
}

footer .sns {
  margin: -5px 0 0;
  float: left;
  height: 39px;
}
.footer_bg footer .sns li {
  float: left;
  height: 34px;
  margin: 0;
  padding: 5px 0 0;
}
footer .sns li:not(:last-child) {
  padding-right: 26px;
  background: url(../img/footer_navi_slash.png) 98.2% 0 no-repeat;
}
footer .sns a,
footer .sns a img {
  background-repeat: no-repeat;
}
footer .sns a {
  display: block;
  background-position: 0 0;
}
footer .sns a img {
  background-position: 0 100%;
  opacity: 0;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
footer .sns a:hover img {
  opacity: 1;
}

footer .sns .blog a,
footer .sns .blog a img {
  width: 154px;
  height: 30px;
  background-image: url(../img/footer_navi_blog.png);
}
footer .sns .twitter a,
footer .sns .twitter a img {
  width: 195px;
  height: 29px;
  background-image: url(../img/footer_navi_twitter.png);
}
footer .sns .facebook a,
footer .sns .facebook a img {
  width: 211px;
  height: 32px;
  background-image: url(../img/footer_navi_facebook.png);
}

.share {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 276px;
  margin: 0 auto 28px;
}

.copy {
  text-align: right;
  font-size: 13rem;
  line-height: 1.3;
  margin: 0;
}

#pagetop {
  display: none;
  width: 127px;
  height: 127px;
  background: url(../img/pagetop.png) no-repeat 0 0;
  overflow: hidden;
  z-index: 1000;
}
#pagetop img {
  display: block;
  width: 127px;
  height: 127px;
  background: url(../img/pagetop.png) no-repeat 0 100%;
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
#pagetop:hover img {
  opacity: 1;
}

@media screen and (max-width: 1359px) {
  header {
    position: relative;
    height: 114vh;
    padding: 40vh 0 0;
    margin: 0 auto;
    background: #000 url(../img/bg_sp.jpg) 50% 10vh / auto 100vh no-repeat;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 10;
  }
  .news_bg {
    padding: 0 0 25px;
  }
  .news_bg, .gloNav_bg {
    position: relative;
    background: #000;
    z-index: 12;
    -webkit-box-shadow: 0 0 12px 1px #000;
    box-shadow: 0 0 12px 1px #000;
  }
  #gloNav {
    display: none;
  }
  .banner_bg {
    padding: 15px 0 30px;
  }
  .banner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 820px;
    margin: 0 auto;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .banner li {
    margin: 0 8px 8px;
  }
  #bgmBox {
    width: 402px;
    height: 76px;
    margin: 0 auto;
    padding: 0 0 15px;
  }
  #about:after {
    background-position: 60% 0;
  }
}
@media screen and (max-width: 960px) {
  header {
    height: 1358px;
    padding: 418px 0 0;
    margin: 0 auto;
    background: url(../img/bg_sp.jpg) 50% 0 no-repeat;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 10;
  }
  .news_bg {
    height: 470px;
  }
  .news {
    width: 960px;
    padding: 61px 32px 0 27px;
    height: 470px;
    font-size: 32rem;
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    background-image: url(../img/frame_news_sp.png);
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
  }
  .newsWrap {
    height: 360px;
  }
  .mCSB_inside > .mCSB_container {
    margin-right: 35px;
  }
  .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail {
    background: url(../img/scroll_rail_sp.png) no-repeat;
  }
  .banner {
    width: 100%;
  }
  .banner li {
    width: 442px;
    height: 176px;
    margin: 0 12px 12px;
  }
  .banner li a {
    -webkit-transform: scale(1.72);
    -ms-transform: scale(1.72);
    transform: scale(1.72);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
  }
  #about #movie .mv_list li a.play_btn:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 768px;
    height: 432px;
  }
  #about #movie h4 img {
    height: 32px;
  }
  .spec {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    margin: 0 -3px 54px;
  }
  footer {
    padding: 0 0 24px;
  }
  footer .sns {
    display: none;
  }
  .footer_bg .btns {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 0 24px;
  }
  .footer_bg .btns li {
    margin: 0 12px;
  }
  .footer_bg .btns li img {
    width: auto;
    height: 62px;
  }
  .copy {
    font-size: 24rem;
    text-align: center;
  }
  /*#light,#overlay,#lightBox {
    display: none;
  }*/
}

@media screen and (min-width: 961px) {
  .sp {
    display: none;
  }
  #gloNav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    display: block;
    height: 140px;
    background: url(../img/bg_header.png) 0 0 repeat-x;
    z-index: 100;
  }
  #gloNav .new:after {
    -webkit-transform: scale(0.75);
    -ms-transform: scale(0.75);
    transform: scale(0.75);
    -webkit-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
  }
  .banner a:hover img {
    opacity: 1;
  }
  #bgmBox {
    width: 208px;
    height: 38px;
    -webkit-background-size: 155px auto;
    background-size: 155px auto;
  }
  #bgmBox .btnSwitch {
    float: left;
    width: 90px;
    height: 38px;
  }
  #bgmBox .btnPlay1,
  #bgmBox .btnPlay2 {
    float: left;
    display: block;
    width: 38px;
    height: 38px;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
  }
  #bgmBox .btnPlay2 {
    margin: 0 4px 0 0;
  }
  #bgmBox .btnVol {
    width: 30px;
    height: 24px;
    margin: 7px 0 0;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
  }
  #bgmBox.small .btnVol {
    background-position: 0 -24px;
  }
  #bgmBox.large .btnVol {
    background-position: 0 -48px;
  }
  #lightBox {
    width: 139px;
    height: 41px;
  }
  #lightBox .btnType {
    width: 42px;
    height: 41px;
    margin: 0 4px 0 0;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
  }
  .lightAll #lightBox .btnSwitch {
    background-position: 0 -20px;
  }
  #lightBox .btnSwitch {
    left: 46px;
    width: 89px;
    height: 20px;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
  }
  .lightOff #lightBox .btnSwitch {
    background-position: 0 -20px;
  }
  /*header {
    position: relative;
    height: 1358px;
    padding: 418px 0 0;
    margin: 0 auto;
    background: url(../img/bg_sp.jpg) 50% 0 no-repeat;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 10;
  }
  header h1,header .release {
    -webkit-transform: scale(0.958);
    -ms-transform: scale(0.958);
    transform: scale(0.958);
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
}*/
  .banner .new:after {
    -webkit-transform: rotate(-4deg) scale(0.75);
    -ms-transform: rotate(-4deg) scale(0.75);
    transform: rotate(-4deg) scale(0.75);
  }
  #about #movie .mv_list {

  }
  #about #movie .mv_list li:only-child {
    width: 512px;
    margin: 0 auto;
  }

  #about #movie .mv_list li a.play_btn:hover {
    -webkit-filter: contrast(1.2) brightness(1.2);
    filter: contrast(1.2) brightness(1.2);
    -webkit-box-shadow: 0 0 14px 6px rgba(131,127,14,0.75);
    box-shadow: 0 0 14px 6px rgba(131,127,14,0.75);
  }
  .spotlight #about #movie .mv_list li a.play_btn:hover {
    -webkit-filter: contrast(1.1) brightness(1.2);
    filter: contrast(1.1) brightness(1.2);
  }
  #about #movie .mv_list li a.play_btn:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 432px;
    height: 243px;
    background: url(../img/movie_on.png) 0 0 / 100% auto no-repeat;
    opacity: 0;
    -webkit-transition: opacity 0.25s linear;
    -o-transition: opacity 0.25s linear;
    transition: opacity 0.25s linear;
  }
  #about #movie .mv_list li a.play_btn:hover:after {
    opacity: 1;
  }
  
  #about #movie .mv_list li:only-child .mv_obj {
    width: 512px;
    height: 288px;
  }
  #about #movie h4 {
    margin: 0 0 14px;
  }
  #about #movie h4 img {
    height: 32px;
  }
  #pagetop {
    position: fixed;
    right: 0;
    bottom: -1000px;
    display: block;
    opacity: 0;
    -webkit-transition: opacity 0.5s linear, margin-bottom 0.15s linear, bottom 10ms linear 510ms;
    -o-transition: opacity 0.5s linear, margin-bottom 0.15s linear, bottom 10ms linear 510ms;
    transition: opacity 0.5s linear, margin-bottom 0.15s linear, bottom 10ms linear 510ms;
    z-index: 1000;
  }
  #pagetop.show {
    opacity: 1;
    bottom: 40px;
    -webkit-transition: opacity 0.5s linear, margin-bottom 0.15s linear, bottom 10ms linear;
    -o-transition: opacity 0.5s linear, margin-bottom 0.15s linear, bottom 10ms linear;
    transition: opacity 0.5s linear, margin-bottom 0.15s linear, bottom 10ms linear;
  }
  .share {
    position: absolute;
    top: 25px;
    left: -webkit-calc(50% + 355px);
    left: calc(50% + 355px);
    width: 114px;
    margin: 0;
  }
  .share img {
    width: 52px;
  }
  .share #line {
    display: none;
  }
}
@media screen and (min-width: 1360px) {
  header {
    position: relative;
    height: 1080px;
    z-index: 10;
  }
  header h1 {
    width: 399px;
    margin: 170px auto 50px;
  }
  header .release {
    width: 265px;
  }
  .news_bg {
    position: absolute;
    top: 860px;
    right: 0;
    left: 0;
    z-index: 10;
  }
  #bgmBox {
    position: fixed;
    top: 22px;
    left: 25px;
    z-index: 105;
  }
  #lightBox {
    position: fixed;
    top: 22px;
    right: 25px;
    z-index: 105;
  }
  .lightAll #lightBox .btnType {
    background-position: 0 -41px;
  }
  #lightBox .btnType img {
    position: absolute;
    top: -3px;
    left: 0px;
    display: block;
    width: 44px;
    height: 43px;
    background: url(../img/light_btn_ov.png) 0 2px no-repeat;
    opacity: 0;
    -webkit-transition: opacity 0.25s linear;
    -o-transition: opacity 0.25s linear;
    transition: opacity 0.25s linear;
  }
  .lightAll #lightBox .btnType img {
    background-position: 0 -43px;
  }
  #lightBox .btnType:hover img {
    opacity: 1;
  }
  .lightAll #lightBox .btnSwitch {
    background-position: 0 0;
  }
  #lightBox .btnSwitch .on,
  #lightBox .btnSwitch .off {
    display: none;
  }
  /*#lightBox .btnSwitch .on,
  #lightBox .btnSwitch .off {
    content: "";
    display: block;
    height: 20px;
    opacity: 0;
    -webkit-transition: opacity 0.25s linear;
    -o-transition: opacity 0.25s linear;
    transition: opacity 0.25s linear;
  }
  #lightBox .btnSwitch .on {
    position: relative;
    top: 0;
    left: -1px;
    width: auto;
  }
  #lightBox .btnSwitch .off {
    position: absolute;
    top: 0;
    right: -1px;
    width: auto;
  }
  #lightBox .btnSwitch .on:hover,
  #lightBox .btnSwitch .off:hover {
    opacity: 1;
  }*/

  .banner_bg {
    position: absolute;
    top: 145px;
    left: 10px;
    z-index: 100;
    background: none;
  }
  .banner li {
    opacity: 0;
    -webkit-transition: opacity 0.8s linear 1.2s;
    -o-transition: opacity 0.8s linear 1.2s;
    transition: opacity 0.8s linear 1.2s;
  }
  .banner li:nth-child(2) {
    -webkit-transition-delay: 1.6s;
    -o-transition-delay: 1.6s;
    transition-delay: 1.6s;
  }
  .banner li:nth-child(3) {
    -webkit-transition-delay: 2.0s;
    -o-transition-delay: 2.0s;
    transition-delay: 2.0s;
  }
  .banner li:nth-child(4) {
    -webkit-transition-delay: 2.4s;
    -o-transition-delay: 2.4s;
    transition-delay: 2.4s;
  }
  .banner li:nth-child(5) {
    -webkit-transition-delay: 2.8s;
    -o-transition-delay: 2.8s;
    transition-delay: 2.8s;
  }
  .banner li:nth-child(6) {
    -webkit-transition-delay: 3.2s;
    -o-transition-delay: 3.2s;
    transition-delay: 3.2s;
  }
  .banner li:nth-child(7) {
    -webkit-transition-delay: 3.6s;
    -o-transition-delay: 3.6s;
    transition-delay: 3.6s;
  }
  .banner li:nth-child(8) {
    -webkit-transition-delay: 4s;
    -o-transition-delay: 4s;
    transition-delay: 4s;
  }
  .banner li:nth-child(9) {
    -webkit-transition-delay: 4.4s;
    -o-transition-delay: 4.4s;
    transition-delay: 4.4s;
  }
  .banner li:nth-child(10) {
    -webkit-transition-delay: 4.8s;
    -o-transition-delay: 4.8s;
    transition-delay: 4.8s;
  }
  .loaded .banner li {
    opacity: 1;
  }
  .contents {
    background: #000;
  }
  #about {
    -webkit-box-shadow: 0 0 50px 20px #000;
    box-shadow: 0 0 50px 20px #000;
  }
  #yomawari > h2 {
    position: absolute;
    top: -10vh;
    left: 960px;
    width: -webkit-calc(100% - 960px);
    width: calc(100% - 960px);
    height: 100vh;
    padding: 16vh 0 0;
    margin: 0;
    background-position: 50% 100%;
    -webkit-background-size: auto 120vh;
    background-size: auto 120vh;
  }
  #yomawari > h2 img {
    width: 16vh;
  }
  #yomawari .story {
    /*width: 50vw;*/
    width: 960px;
  }
  #yomawari .story img, #shin_yomawari .story img {
    width: 100%;
    height: auto;
  }
  #yomawari .mainBox > section {
    margin: 0;
    background: #000;
  }
  #shin_yomawari {
    -webkit-box-shadow: 0 0 50px 20px #000;
    box-shadow: 0 0 50px 20px #000;
  }
  #shin_yomawari > h2 {
    position: absolute;
    top: -10vh;
    right: 960px;
    width: -webkit-calc(100% - 960px);
    width: calc(100% - 960px);
    height: 100vh;
    padding: 10vh 0 0;
    margin: 0;
    background-position: 50% 100%;
    -webkit-background-size: auto 120vh;
    background-size: auto 120vh;
  }
  #shin_yomawari > h2 img {
    width: 16vh;
  }
  #shin_yomawari .mainBox > section {
    margin: 0 0 0 -webkit-calc(100% - 960px);
    margin: 0 0 0 calc(100% - 960px);
    background: #000;
  }
  #shin_yomawari .story {
    width: 960px;
    margin: 0 0 0 -webkit-calc(100% - 960px);
    margin: 0 0 0 calc(100% - 960px);
  }
  .back img {
    position: absolute;
    top: -10vh;
    width: auto;
    height: 120vh;
    margin: 0;
    z-index: 10;
  }
  .back img.bg1 {
    display: block !important;
    right: 0;
    left: 50%;
  }
  .back img.bg2 {
    display: block !important;
    right: 50%;
    left: auto;
  }
  .lightOff .enemy_red {
    display: block;
  }
  .enemy_red .y1 {
    top: 5800px;
    left: 120px;
    /*-webkit-animation-duration: 2s;
    animation-duration: 2s;*/
  }
  .enemy_red .y2 {
    top: 5950px;
    left: 540px;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    /*-webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;*/
  }
  .enemy_red .y3 {
    top: 6130px;
    left: 100px;
    -webkit-transform: scale(0.4);
    -ms-transform: scale(0.4);
    transform: scale(0.4);
    /*-webkit-animation-duration: 1.2s;
    animation-duration: 1.2s;*/
  }
  .enemy_red .y4 {
    position: absolute;
    top: 10850px;
    right: 130px;
    /*-webkit-animation-duration: 2.2s;
    animation-duration: 2.2s;*/
  }
  .enemy_red .y5 {
    position: absolute;
    top: 11260px;
    right: 0px;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    transform: scale(0.6);
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    /*-webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;*/
  }
  .enemy_red .y6 {
    top: 11415px;
    right: 235px;
    z-index: 200;
    -webkit-transform: scale(0.35);
    -ms-transform: scale(0.35);
    transform: scale(0.35);
  }
  .light_pop_msg {
    display: block;
    opacity: 0;
    -webkit-transition: opacity 0.25s linear;
    -o-transition: opacity 0.25s linear;
    transition: opacity 0.25s linear;
  }
  .btnSwitch:hover + .light_pop_msg {
    opacity: 1;
  }
  #pagetop {
    display: block;
    position: absolute;
    right: auto;
    left: 50%;
    bottom: 256px;
    margin-left: 490px;
    opacity: 1;
  }
  #pagetop.show {
    bottom: 256px;
  }
}

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

@keyframes blink {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}