@charset "utf-8";

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

html { font-size: 6.25%; width: 100%; }

body {
  font: 10rem/1 "メイリオ" , Meiryo ,"ＭＳ ゴシック", "MS Gothic", sans-serif;
  color: #1d1d3f;
  background: #2b1a5e url(../img/body_bg.png) repeat-y center 0 fixed;
  overflow: hidden;
}


@media screen and (min-width: 1600px)  {
  body {
  background-color: #2b1a5e;
    background-image: url(../img/bg_left.png), url(../img/bg_right.png);
    background-repeat: repeat-y, repeat-y;
    background-position: 0 0, right 0;
  }
}

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

header {
  height: 1000px;
  overflow: hidden;
}

.news_bg {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background:#000 url(../img/header_bg.png) repeat-x 0 bottom;
  z-index: 1000;
}
.news {
  position: relative;
  width: 956px;
  padding: 8px 0 17px 4px;
  margin: 0 auto;
}
#newsTgl {
  position: absolute;
  top:0px;
  right:0;
  width: 90px;
  height: 43px;
  background: url(../img/btn_open.png) no-repeat right 9px;
  text-indent: -4444em;
  cursor: pointer;
  overflow: hidden;
}
#newsTgl.opened {
  background: url(../img/btn_close.png) no-repeat right 9px;
}
.news ul {
  height: 18px;
  color: #fff;
  font-size: 14rem;
  line-height: 1.3;
  margin: 2px 0 0;
  overflow: hidden;
  -webkit-transition: height 250ms ease-out;
  transition: height 250ms ease-out;
}
.news li {
  position: relative;
  margin: 0 90px 18px 92px;
}
/*
header li:nth-child(n+2) {
display: none;
}*/
.news li a {
  color: #ffde5a;
  text-decoration: underline;
}
.news li a:hover {
  color: #ff3b3b;
}
.news .date {
  position: absolute;
  top: 0;
  left: -92px;
  display: block;
  width: 92px;

}

/* ==================================
グローバルナビ
================================== */
header nav {
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  z-index: 999;
}
header nav ul {
  width: 961px;
  height: 59px;
  margin: 0 auto;
  padding: 15px 0 0 28px;
  background: url(../img/navi_flame.png) no-repeat 0 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
header nav li {
  position: relative;
  float: left;
  margin-right: 16px;
}

header nav li.new:after {
  content: url(../img/new.png);
  position: absolute;
  top: -8px;
  right: -30px;
  z-index: 100;
}
header nav li a,
header nav li span {
  display: block;
  height: 28px;
}
header nav li.close span img {
  opacity: 0.44;
}
header nav li img {
  position: absolute;
  clip: rect(0px, auto, 28px, auto);
}
header nav li.selected a img,
header nav li a:hover img {
  top: -32px;
  clip: rect(32px, auto, auto, auto);
}
header nav li.top.selected a img,
header nav li.top a:hover img {
  top: -32px;
  clip: rect(32px, auto, auto, auto);
}
header nav li.special.selected a img,
header nav li.special a:hover img {
  top: -2px;
  clip: rect(-2px, auto, 28px, auto);
}
header nav .top,
header nav .top a {
  width: 77px;
}
header nav .story,
header nav .story a {
  width: 106px;
}
header nav .character,
header nav .character a {
  width: 179px;
}
header nav .system,
header nav .system a {
  width: 121px;
}
header nav .movie,
header nav .movie a,
header nav .movie span {
  width: 150px;
}
header nav .special,
header nav .special a {
  width: 150px;
}
header nav a img {
  top: -2px;
}
header nav .top a.active img,
header nav .top a:hover img {
  top: -32px;
  clip: rect(30px, auto, auto, auto);
}
header nav .special a.active img,
header nav .special a:hover img {
  top: -32px !important;
  clip: rect(30px, auto, auto, auto) !important;
}
header #header_image {
  position: relative;
  width: 961px;
  height: 515px;
  margin: 135px auto 15px;
  background: url(../img/gimmick/top/flame.png) no-repeat 0 0;
  z-index: 50;
  opacity: 0;
  overflow: hidden;
  -webkit-animation: fade-in 600ms linear 300ms both;
  animation: fade-in 600ms linear 300ms both;
}
header h1 {
  position: relative;
  width: 501px;
  height: 210px;
  padding: 15px 0 0;
  margin: 7px auto 0;
  z-index: 50;
  -webkit-animation: fadeInDown 800ms linear 5300ms both;
  animation: fadeInDown 800ms linear 5300ms both;
}
header #header_image .yusya {
  position: absolute;
  top: 27px;
  left: 50%;
  width: 678px;
  height: 507px;
  margin-left: -339px;
  z-index: 48;
  opacity: 0;
  -webkit-animation: fade-in 1000ms linear 3000ms both;
  animation: fade-in 1000ms linear 3000ms both;
}
header #header_image .pake {
  position: absolute;
  top: 0;
  left: 0;
  width: 961px;
  height: 515px;
  z-index: 48;
  opacity: 0;
  -webkit-animation: fade-in 1100ms linear 3200ms both;
  animation: fade-in 1100ms linear 3200ms both;
}
header #header_image .release {
  position: absolute;
  bottom: 5px;
  left: 6px;
  width: 950px;
  height: 157px;
  z-index: 49;
  opacity: 0;
  -webkit-animation: fade-in 600ms linear 4500ms both;
  animation: fade-in 600ms linear 4500ms both;
}
header #header_image img[class^="memory"] {
  position: absolute;
  opacity: 0;
}
header #header_image img.memory1 {
  top: 160px; left: 500px;
  -webkit-animation: fade-in-zoomOut 400ms linear 1200ms both;
  animation: fade-in-zoomOut 400ms linear 1200ms both;
}
header #header_image img.memory2 {
  top: 190px; left: 355px;
  -webkit-animation: fade-in-zoomOut 400ms linear 950ms both;
  animation: fade-in-zoomOut 400ms linear 950ms both;
}
header #header_image img.memory3 {
  top: 120px; left: 200px;
  -webkit-animation: fade-in-zoomOut 400ms linear 1450ms both;
  animation: fade-in-zoomOut 400ms linear 1450ms both;
}
header #header_image img.memory4 {
  top: 325px; left: 245px;
  -webkit-animation: fade-in-zoomOut 400ms linear 1650ms both;
  animation: fade-in-zoomOut 400ms linear 1650ms both;
}
header #header_image img.memory5 {
  top: 15px; right: 0px;
  -webkit-animation: fade-in-zoomOut 400ms linear 1850ms both;
  animation: fade-in-zoomOut 400ms linear 1850ms both;
}
header #header_image img.memory6 {
  top: 0px; left: 20px;
  -webkit-animation: fade-in-zoomOut 400ms linear 2000ms both;
  animation: fade-in-zoomOut 400ms linear 2000ms both;
}
header #header_image img.memory7 {
  top: 338px; left: 407px;
  -webkit-animation: fade-in-zoomOut 400ms linear 2100ms both;
  animation: fade-in-zoomOut 400ms linear 2100ms both;
}
header #header_image img.memory8 {
  top: 210px; left: 60px;
  -webkit-animation: fade-in-zoomOut 400ms linear 2200ms both;
  animation: fade-in-zoomOut 400ms linear 2200ms both;
}
header #header_image img.memory9 {
  top: 265px; right: 0px;
  -webkit-animation: fade-in-zoomOut 400ms linear 2300ms both;
  animation: fade-in-zoomOut 400ms linear 2300ms both;
}
header #header_image img.memory10 {
  top: -5px; right: -6px;
  -webkit-animation: fade-in-zoomOut 400ms linear 2400ms both;
  animation: fade-in-zoomOut 400ms linear 2400ms both;
}
header #header_image img.memory11 {
  top: 294px; left: -5px;
  -webkit-animation: fade-in-zoomOut 600ms linear 2450ms both;
  animation: fade-in-zoomOut 600ms linear 2450ms both;
}
header #header_image img.memory12 {
  top: 70px; left: -1px;
  -webkit-animation: fade-in-zoomOut 600ms linear 2500ms both;
  animation: fade-in-zoomOut 600ms linear 2500ms both;
}

header .banner {
  width: 962px;
  margin: 0 auto 0;
}
header .banner li {
  /*position: relative;
  float: left;*/
  width: 314px;
  height: 93px;
  margin-left: 10px;
}
header .banner li:nth-child(3n-2) {
  margin-left: auto;
  margin-right: auto;
}
header .banner li:nth-child(n+4) {
  margin-top: 10px;
}

/*header .banner {
  width: 962px;
  height: 303px;
  margin: 0 auto 0;
  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-align-content: space-between;
  -ms-flex-line-pack: justify;
  align-content: space-between;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
header .banner li {
  position: relative;
  width: 314px;
  height: 93px;
}*/
header .banner a,
header .banner a span {
  display: block;
  width: 314px;
  height: 93px;
}
header .banner a.interview {
  background: url(../img/banner_interview.png) 0 0 no-repeat;
}
header .banner a.syupro_dx {
  background: url(../img/banner_syupro_dx.png) 0 0 no-repeat;
}
header .banner a.first {
  background: url(../img/banner_first.png) 0 0 no-repeat;
}
header .banner a.scene_gallery {
  background: url(../img/banner_scene_gallery.png) 0 0 no-repeat;
}
header .banner a.memory {
  background: url(../img/banner_memory.png) 0 0 no-repeat;
}
header .banner a.lost_memory {
  background: url(../img/banner_lost_memory.png) 0 0 no-repeat;
}
header .banner a.omoide_quest {
  background: url(../img/banner_omoide_quest.png) 0 0 no-repeat;
}
header .banner a.omoide_quest_music {
  background: url(../img/banner_omoide_quest_music.png) 0 0 no-repeat;
}
header .banner a.emanual {
  background: url(../img/banner_manual.png) 0 0 no-repeat;
}
header .banner a:hover {
  background-position: 0 bottom;
}
header .banner a span {
  visibility: hidden;
}
header .banner li.new:after {
  content: url(../img/new.png);
  position: absolute;
  top: -8px;
  right: -20px;
  z-index: 100;
  -webkit-animation: 0.8s linear 0s alternate none infinite running blink;
  animation: 0.8s linear 0s alternate none infinite running blink;
}
header .banner li.new:nth-child(6):after {
  top: -46px;
  right: -80px;
  z-index: 1005;
}
header .banner .pop_serif {
  position: absolute;
  top: -45px;
  right: -82px;
  z-index: 1000;
  -webkit-animation: bounceIn 1s ease-in-out 1s both;
  animation: bounceIn 1s ease-in-out 1s both;
  /*-webkit-animation: flipInY 1s ease-in-out 1s both;
  animation: flipInY 1s ease-in-out 1s both;*/
}
.news .f-red {
  color: #f22;
}

/* ==================================
ウィンドウ共通
================================== */

.wrapper {
  width: 100%;
  height: 1200px;
  position: relative;
}
.wrapper .box {
  position: absolute;
  top: 180px;
  right: 0;
  left: 0;
  width: 961px;
  height: 651px;
  margin: 0 auto;
}
.sub_nav {
  float: left;
  width: 253px;
  height: 651px;
  background: url(../img/sub_navi_flame.png) 0 0 no-repeat;
}
.sub_nav ul {
  width: 225px;
  padding: 22px 0 0 22px;
}
.sub_nav li {
  position: relative;
  margin: 0 0 6px;
}
.sub_nav li.new:after {
  content: url(../img/new.png);
  position: absolute;
  top: -7px;
  right: 4px;
  -webkit-animation: 0.8s linear 0s alternate none infinite running blink;
  animation: 0.8s linear 0s alternate none infinite running blink;
}
.sub_nav a {
  display: block;
  width: 211px;
  height: 26px;
}
.sub_nav a.selected,
.sub_nav a:hover {
  background-position: 0 bottom !important;
}
.sub_nav b {
  display: block;
  width: 211px;
  height: 26px;
}
.sub_nav li span {
  display: block;
  width: 211px;
  height: 26px;
  visibility: hidden;
}
.wrapper .box .frame {
  position: relative;
  float: right;
  width: 687px;
  height: 651px;
  padding: 20px 0 0;
  background: url(../img/flame.png) 0 0 no-repeat;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.wrapper h2 {
  position: absolute;
  top: -45px;
  left: 17px;
  height: 48px;
  overflow: hidden;
  z-index: 5;
}
.box .frame .caption {
  display: block;
  text-align: center;
  margin: 0 0 10px;
}
.box .frame p {
  width: 660px;
  margin: 0 auto 10px;
}

.box .frame .capture {
  margin: 15px auto 5px;
  text-align: center;
}
.box .frame #sys_page0 .capture {
  width: 400px;
}
.box .frame #sys_page2 .capture {
  width: 508px;
}


.box .pager {
  position: absolute;
  bottom: 20px;
  left: 18px;
  width: 649px;
  height: 23px;
}

#system.view .pager {
  -webkit-animation: fade-in 10ms linear 5000ms both;
  animation: fade-in 10ms linear 5000ms both;
}

#system.view .pager.show {
  -webkit-animation: pagerMove2 800ms ease-in infinite;
  animation: pagerMove2 800ms ease-in infinite;
}
.box .pager li {
  position: absolute;
  top:0;
  display: block;
  width: 94px;
  height: 23px;
}
.box .pager li.page_prev {
  left: 0;
  /*-webkit-animation: prevCursor 1800ms linear infinite;
  animation: prevCursor 1800ms linear infinite;*/
}
.box .pager li.page_next {
  right: 0;
  /*-webkit-animation: nextCursor 1800ms linear infinite;
  animation: nextCursor 1800ms linear infinite;*/
}
.box .pager a {
  display: block;
  width: 94px;
  height: 23px;
  overflow: hidden;
}
.box .pager li.page_prev a {
  background: url(../img/btn_prev.png) 0 0 no-repeat;
}
.box .pager li.page_next a {
  background: url(../img/btn_next.png) 0 0 no-repeat;
}
.box .pager li a:hover {
  background-position: 0 bottom;
}

.box .pager a span {
  display: block;
  width: 94px;
  height: 23px;
  visibility: hidden;
}

/* ==================================
ストーリー
================================== */

#story section {
  position: absolute;
  top: 180px;
  right: 0;
  left: 0;
  bottom: 0;
  width: 961px;
  margin: 0 auto;
  height: 555px;
  padding: 52px 0 0;
  background: url(../img/story/bg.png) center no-repeat, url(../img/frame_large.png) 0 0 no-repeat;
}
#story section p {
  text-align: center;
}

/* ==================================
システム
================================== */

#system .box {
  position: relative;
  display: none;
  z-index: 100;
}
#system.view .box {
  -webkit-animation: fade-in 500ms linear 1900ms both;
  animation: fade-in 500ms linear 1900ms both;
  display: block;
  opacity: 0;
}

.sub_nav a.sub_navi_summary   { background: url(../img/system/sub_navi_summary.png) 0 0 no-repeat; }
.sub_nav a.sub_navi_summary2  { background: url(../img/system/sub_navi_summary02.png) 0 0 no-repeat; }
.sub_nav a.sub_navi_summary3  { background: url(../img/system/sub_navi_summary03.png) 0 0 no-repeat; }
.sub_nav a.sub_navi_memory    { background: url(../img/system/sub_navi_memory.png) 0 0 no-repeat; }
.sub_nav a.sub_navi_album     { background: url(../img/system/sub_navi_album.png) 0 0 no-repeat; }
.sub_nav a.sub_navi_quest     { background: url(../img/system/sub_navi_quest.png) 0 0 no-repeat; }
.sub_nav a.sub_navi_mini_game { background: url(../img/system/sub_navi_mini_game.png) 0 0 no-repeat; }

.sub_nav b.sub_navi_summary  { background: url(../img/system/sub_navi_summary.png) 0 bottom no-repeat; }

#system .sub_nav li:nth-child(2).new:after { right: 40px; }
#system .sub_nav li:nth-child(3).new:after { right: 40px; }
#system .sub_nav li:nth-child(4).new:after { right: 14px; }
#system .sub_nav li:nth-child(5).new:after { right: 14px; }
#system .sub_nav li:nth-child(6).new:after { right: 90px; }
#system .sub_nav li:nth-child(7).new:after { right: 40px; }


#summary .sub_nav a.sub_navi_summary,
#summary02 .sub_nav a.sub_navi_summary2,
#memory .sub_nav a.sub_navi_memory,
#album .sub_nav a.sub_navi_album,
#quest .sub_nav a.sub_navi_quest,
#mini_game .sub_nav a.sub_navi_mini_game { background-position: 0 bottom !important; }

.box .frame .pagebox {
  position: absolute;
  top: 20px;
  left: 13px;
  overflow: hidden;
  width: 660px;
  height: 582px;
  margin: 0 auto;
  /*-webkit-animation: fadeOut 400ms linear both;
  animation: fadeOut 400ms linear both;*/
}
/*
.box#summary .frame .system_1,
.box#summary02 .frame .system_2,
.box#memory .frame .system_3,
.box#album .frame .system_4,
.box#quest .frame .system_5 {
  -webkit-animation: fadeIn 400ms linear both;
  animation: fadeIn 400ms linear both;
}*/
.box .frame .pagebox#sys0,
.box .frame .pagebox#sys1,
.box .frame .pagebox#sys2,
.box .frame .pagebox#sys3 {
  z-index: 10;
}
.box .frame .pagebox .pageboxinner {
  position: absolute;
  top: 0;
  left: 0;
  width: 2640px;
  -webkit-transition: left 400ms ease-in-out;
  transition: left 400ms ease-in-out;
}
.box .frame .pagebox#sys1 .pageboxinner {
  left: -660px;
}
.box .frame .pagebox#sys2 .pageboxinner {
  left: -1320px;
}
.box .frame .pagebox#sys3 .pageboxinner {
  left: -1980px;
}

#system .frame section {
  width: 660px;
  float: left;
}

/* ___ ページ送りボタン非表示 ___ */
.pager li.page_prev,
.pager li.page_next { display: none; }

.box .pagebox#sys1 ~ .pager li.page_prev,
.box .pagebox#sys2 ~ .pager li.page_prev,
.box .pagebox#sys3 ~ .pager li.page_prev { display: block; }

.box .system_1#sys0 ~ .pager li.page_next,
.box .system_2#sys0 ~ .pager li.page_next,
.box .system_3#sys0 ~ .pager li.page_next,
.box .system_1#sys1 ~ .pager li.page_next,
.box .system_3#sys1 ~ .pager li.page_next,
.box .system_1#sys2 ~ .pager li.page_next { display: block; }

/* ___ ゲーム概要１ ___ */
.cap_sys_p2,
.cap_sys_p3 {
  position: relative;
  width: 568px;
  height: 320px;
  margin: 0 auto;
}
.cap_sys_p2 li {
  float: left;
  margin: 0 10px 20px;
}
.cap_sys_p3 li { position: absolute; }
.cap_sys_p3 li:nth-child(1) { opacity: 0; top:0; left:0;     z-index: 13; }
.cap_sys_p3 li:nth-child(2) { opacity: 0; top:0; left:0;     z-index: 12; }
.cap_sys_p3 li:nth-child(3) { opacity: 0; top:0; left:284px; z-index: 11; }
.cap_sys_p3 li:nth-child(4) { opacity: 0; top:170px; left:0; z-index: 10; }
.cap_sys_p3 .arrow01 {
  position: absolute;
  top: 47px;
  left: 215px;
  opacity: 0;
  z-index: 14;
}
.cap_sys_p3 .arrow02 {
  position: absolute;
  top: 115px;
  left: 252px;
  opacity: 0;
  z-index: 14;
}
.cap_sys_p3 .arrow03 {
  position: absolute;
  top: 222px;
  left: 215px;
  opacity: 0;
  z-index: 14;
}
.cap_sys_p3 li,
.cap_sys_p3 li img {
  -webkit-transition: all 10ms linear 400ms;
  transition: all 10ms linear 400ms;
}

#sys_page0 h3,
#sys_page0 p,
#system section .capture,
#system section li {
  opacity: 0;
}
#sys0 #sys_page0 h3 {
  -webkit-animation: bounceIn 900ms linear both;
  animation: bounceIn 900ms linear both;
}
#sys0 #sys_page0 p {
  -webkit-animation: fadeIn 600ms linear 100ms both;
  animation: fadeIn 600ms linear 100ms both;
}
#sys0 #sys_page0 .capture {
  -webkit-animation: bounceIn 900ms linear 150ms both;
  animation: bounceIn 900ms linear 150ms both;
}
/*
#system section .capture,
#sys_page1 .cap_sys_p2 li,
.cap_sys_p3 li {
  background: #fff;
}*/

#sys1 #sys_page1 .cap_sys_p2 li:nth-child(1) {
  -webkit-animation: fadeIn 800ms linear 400ms both;
  animation: fadeIn 800ms linear 400ms both;
}
#sys1 #sys_page1 .cap_sys_p2 li:nth-child(2) {
  -webkit-animation: fadeIn 800ms linear 900ms both;
  animation: fadeIn 800ms linear 900ms both;
}
#sys1 #sys_page1 .cap_sys_p2 li:nth-child(3) {
  -webkit-animation: fadeIn 800ms linear 1400ms both;
  animation: fadeIn 800ms linear 1400ms both;
}

#sys2 #sys_page2 .capture {
  -webkit-animation: pulse 600ms linear 450ms both;
  animation: pulse 600ms linear 450ms both;
  opacity: 1;
}

#sys3 .cap_sys_p3 li:nth-child(1) {
  position: absolute;
  opacity: 1;
  -webkit-transition: all 600ms linear 400ms;
  transition: all 600ms linear 400ms;
}
#sys3 .cap_sys_p3 li:nth-child(2) {
  position: absolute;
  opacity: 1;
  top:0;
  left:284px;
  -webkit-transition: all 600ms linear 1000ms;
  transition: all 600ms linear 1000ms;
}
#sys3 .cap_sys_p3 li:nth-child(3) {
  position: absolute;
  opacity: 1;
  top:170px;
  left:0;
  -webkit-transition: all 600ms linear 1600ms;
  transition: all 600ms linear 1600ms;
}
#sys3 .cap_sys_p3 li:nth-child(4) {
  position: absolute;
  opacity: 1;
  top:170px;
  left:284px;
  -webkit-transition: all 600ms linear 2200ms;
  transition: all 600ms linear 2200ms;
}
#sys3 .cap_sys_p3 li:nth-child(5) {
  opacity: 1;
}
#sys3 .cap_sys_p3 .arrow01 {
  opacity: 1;
  left: 235px;
  -webkit-transition: all 400ms linear 1050ms;
  transition: all 400ms linear 1050ms;
}
#sys3 .cap_sys_p3 .arrow02 {
  opacity: 1;
  top: 125px;
  left: 242px;
  -webkit-transition: all 400ms linear 1650ms;
  transition: all 400ms linear 1650ms;
}
#sys3 .cap_sys_p3 .arrow03 {
  opacity: 1;
  left: 235px;
  -webkit-transition: all 400ms linear 2250ms;
  transition: all 400ms linear 2250ms;
}
/* ___ ゲーム概要２ ___ */
.summa2_p1, .memory_p1,
.box .frame .album_p1,
.box .frame .quest_p1 {
  text-align: center;
}
.box .frame .summa2_p1 .caption,
.box .frame .memory_p1 .caption,
.box .frame .memory_p2 .caption,
.box .frame .memory_p3 .caption,
.box .frame .album_p1 .caption,
.box .frame .quest_p1 .caption {
  opacity: 0;
  margin: 0 0 20px;
}
.box .frame .system_2 .fix_caption {
  position: absolute;
  top:0;
  /* left: 10px; */
  opacity: 0;
  width: 100%;
  text-align: center;
}
#system .selif_txt {
  opacity: 0;
  margin: 0 0 20px !important;
}
#system .txt01,
#system .txt02 {
  opacity: 0;
}
.summa2_p1 .pop01,
.album_p1 .pop01,
.quest_p1 .pop01 {
  opacity: 0;
  margin: 0 0 12px;
}
.box .frame .system_2 .hide_caption {
  height: 29px;
  margin: 0 0 15px;
  overflow: hidden;
  text-indent: -200%;
}
.summa2_p2 dl {
  float: left;
  width: 312px;
  text-align: center;
}
.summa2_p2 dl:first-of-type {
  margin: 0 20px 0 9px;
}
.summa2_p2 dl .pop1 {
  margin: 0 0 8px;
}
.summa2_p2 dl p {
  width: 312px !important;
}

#sys0.system_2 .fix_caption,
#sys1.system_2 .fix_caption {
  -webkit-animation: fadeIn 600ms linear both;
  animation: fadeIn 600ms linear both;
}
#sys0 .summa2_p1 .selif_txt,
#sys0 .summa2_p1 .pop01 {
  -webkit-animation: pulseIn 500ms linear 900ms both;
  animation: pulseIn 500ms linear 900ms both;
}
#sys0 .summa2_p1 .txt02 {
  -webkit-animation: fadeIn 300ms linear 1900ms both;
  animation: fadeIn 300ms linear 1900ms both;
}
#sys1 .summa2_p2 dl:first-of-type {
  -webkit-animation: pulse 500ms linear 1000ms both;
  animation: pulse 500ms linear 1000ms both;
}
#sys1 .summa2_p2 dl:nth-of-type(2) {
  -webkit-animation: pulse 500ms linear 2200ms both;
  animation: pulse 500ms linear 2200ms both;
}

/* ___ 思い出補正レベル ___ */
.pics {
  position: relative;
  margin: 0 0 12px -11px;
  overflow: hidden;
}
#system section .pics li {
  width: 312px;
  margin: 0 0 0 20px;
  float: left;
}
#system .memory_p2 .pics:after {
  content: url(../img/system/arrow04.png);
  position: absolute;
  top: 58px;
  left: 290px;
  opacity: 0;
  z-index: 14;
  -webkit-transition: all 0.1s ease-in 0.5s;
  transition: all 0.1s ease-in 0.5s;
}
#system #sys1 section .pics:after {
  opacity: 1;
  left: 310px;
  -webkit-transition: all 0.4s linear 0.8s;
  transition: all 0.4s linear 0.8s;
}
#system .memory_p2 .pics li:last-child {
  position: absolute;
  top: 0;
  left: 331px;
  opacity: 1;
  -webkit-transition: all 0.1s ease-in 0.5s;
  transition: all 0.1s ease-in 0.5s;
}

#sys0 .memory_p1 .caption {
  -webkit-animation: flash 0.8s linear 0.4ms both;
  animation: flash 0.8s linear 0.4s both;
}
.box .frame .memory_p2 .caption,
#system .memory_p2 .pics li:first-child,
.box .frame .memory_p3 .caption {
  opacity: 1;
  position: relative;
  z-index: 3;
}
#system #sys0 .memory_p1 .selif_txt,
#system #sys0 .memory_p1 .pics li,
#system #sys0 .memory_p1 .txt02 {
  -webkit-animation: fadeIn 0.6s linear 1.6s both;
  animation: fadeIn 0.6s linear 1.6s both;
}
#system #sys1 .memory_p2 .pics li:last-child {
  left: 331px;
  opacity: 1;
  -webkit-transition: all 0.5s ease-in 0.6s;
  transition: all 0.5s ease-in 0.6s;
}
#system #sys2 .memory_p3 .pics li {
  -webkit-animation: fadeIn 0.6s linear 0.8s both;
  animation: fadeIn 0.6s linear 0.8s both;
}
#system #sys2 .memory_p3 .txt01 {
  -webkit-animation: fadeIn 0.6s linear 1.7s both;
  animation: fadeIn 0.6s linear 1.7s both;
}
#system .memory_p3 .pics li,
#system .memory_p3 .txt01 {
  -webkit-animation: fadeOut 0.1s linear 0.5s both;
  animation: fadeOut 0.1s linear 0.5s both;
}
/* ___ おもいでのアルバム ___ */
#system .frame .system_4 .caption,
#system .frame .system_4 .selif_txt,
#system .frame .system_4 .pop01,
#system .frame .system_4 .txt02 {
  opacity: 1;
}
#system .frame #sys0 .album_p1 .selif_txt {
  -webkit-animation: shaking 0.6s linear 0.6s;
  animation: shaking 0.6s linear 0.6s;
}
/* ___ クエスト ___ */
#system #sys0 .quest_p1 .caption {
  -webkit-animation: fadeInUpPixel 0.6s linear 0.4s both;
  animation: fadeInUpPixel 0.6s linear 0.4s both;
}
#system #sys0 .quest_p1 .pop01 {
  -webkit-animation: fadeInUpPixel 0.6s linear 1.1s both;
  animation: fadeInUpPixel 0.6s linear 1.1s both;
}
#system #sys0 .quest_p1 .txt01 {
  -webkit-animation: fadeInUpPixel 0.6s linear 1.8s both;
  animation: fadeInUpPixel 0.6s linear 1.8s both;
}

/* ___ 冒険の息抜き ___ */
.box .frame .system_6 {
  height: 620px;
}
.mini_game_p1 .caption {
  opacity: 0;
}
#system #sys0 .mini_game_p1 .caption {
  -webkit-animation: fadeInDownPixel 0.4s linear 0.4s both;
  animation: fadeInDownPixel 0.4s linear 0.4s both;
}
#system section p.txt01 {
  margin: 0 0 0 4px;
}

.game_list {
  
}
.game_list li {
  width: 50%;
  height: 249px;
  float: left;
  text-align: center;
}
.game_list li a img {
  margin: -4px 0;
}
.game_list li b {
  display: block;
  margin: -8px auto 0;
}
#system section .game_list li p {
  width: 100%;
}
#system section .game_list li {
  opacity: 0;
}

#system #sys0 .mini_game_p1 .txt01 {
  -webkit-animation: fadeInDownPixel 0.4s linear 0.4s both;
  animation: fadeInDownPixel 0.4s linear 0.4s both;
}
#system #sys0 .mini_game_p1 .game_list li:nth-child(1) {
  -webkit-animation: fade-in 0.4s linear 1.3s both;
  animation: fade-in 0.4s linear 1.3s both;
}
#system #sys0 .mini_game_p1 .game_list li:nth-child(2) {
  -webkit-animation: fade-in 0.4s linear 1.5s both;
  animation: fade-in 0.4s linear 1.5s both;
}
#system #sys0 .mini_game_p1 .game_list li:nth-child(3) {
  -webkit-animation: fade-in 0.4s linear 1.7s both;
  animation: fade-in 0.4s linear 1.7s both;
}

/* ___ システムページ背景 ___ */
#system .mist_bg_left01 {
  position: absolute;
  top:-100px;
  left: 50%;
  margin-left: -2677px;
  opacity: 0;
}
#system.view .mist_bg_left01 {
  -webkit-animation: mist1 1500ms linear 200ms both;
  animation: mist1 1500ms linear 200ms both;
  opacity: 1;
}
#system .mist_bg_left02 {
  position: absolute;
  top:324px;
  left: 50%;
  margin-left: -1140px;
  opacity: 0;
}
#system.view .mist_bg_left02 {
  -webkit-animation: mist2 1400ms linear 300ms both;
  animation: mist2 1400ms linear 300ms both;
  opacity: 1;
}
#system .mist_bg_right {
  position: absolute;
  top:-100px;
  left: 50%;
  margin-left: -700px;
  opacity: 0;
}
#system.view .mist_bg_right {
  -webkit-animation: mist3 1350ms linear 350ms both;
  animation: mist3 1350ms linear 350ms both;
  opacity: 1;
}
#system .town_bg {
  position: absolute;
  top:0;
  left: 50%;
  margin-left: -960px;
  opacity: 0;
}
#system.view .town_bg {
  -webkit-animation: fade-in 800ms linear 1050ms both;
  animation: fade-in 800ms linear 1050ms both;
  opacity: 1;
}
#system .mist_front_left01 {
  position: absolute;
  top:370px;
  left: 50%;
  margin-left: -1300px;
  opacity: 0;
}
#system.view .mist_front_left01 {
  -webkit-animation: mist4 700ms linear 850ms both;
  animation: mist4 700ms linear 850ms both;
  opacity: 1;
}
#system .mist_front_left02 {
  position: absolute;
  top:0px;
  left: 50%;
  margin-left: -1020px;
  opacity: 0;
}
#system.view .mist_front_left02 {
  -webkit-animation: mist5 1000ms linear 950ms both;
  animation: mist5 1000ms linear 950ms both;
  opacity: 1;
}
#system .mist_front_right01 {
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: 460px;
  opacity: 0;
}
#system.view .mist_front_right01 {
  -webkit-animation: mist6 1000ms linear 900ms both;
  animation: mist6 1000ms linear 900ms both;
  opacity: 1;
}
#system .mist_front_right02 {
  position: absolute;
  top: 350px;
  left: 50%;
  margin-left: 500px;
  opacity: 0;
}
#system.view .mist_front_right02 {
  -webkit-animation: mist7 500ms linear 1050ms both;
  animation: mist7 500ms linear 1050ms both;
  opacity: 1;
}

/* ==================================
キャラクター
================================== */

#character .sub_nav li.new:after {
  content: url(../img/new.png);
  position: absolute;
  top: -12px;
  right: 120px;
}
.sub_nav a.sub_navi_back    { background: url(../img/character/sub_navi_back.png) 0 0 no-repeat; }
.sub_nav a.sub_navi_regent  { background: url(../img/character/sub_navi_regent.png) 0 0 no-repeat; }
.sub_nav a.sub_navi_yotsuba { background: url(../img/character/sub_navi_yotsuba.png) 0 0 no-repeat; }
.sub_nav a.sub_navi_yuzu    { background: url(../img/character/sub_navi_yuzu.png) 0 0 no-repeat; }
.sub_nav a.sub_navi_satan   { background: url(../img/character/sub_navi_satan.png) 0 0 no-repeat; }
.sub_nav a.sub_navi_yanagi  { background: url(../img/character/sub_navi_yanagi.png) 0 0 no-repeat; }
.sub_nav a.sub_navi_kuroe   { background: url(../img/character/sub_navi_kuroe.png) 0 0 no-repeat; }
.sub_nav a.sub_navi_kogure  { background: url(../img/character/sub_navi_kogure.png) 0 0 no-repeat; }

#back .sub_nav a.sub_navi_back,
#regent .sub_nav a.sub_navi_regent,
#yotsuba .sub_nav a.sub_navi_yotsuba,
#yuzu .sub_nav a.sub_navi_yuzu,
#satan .sub_nav a.sub_navi_satan,
#yanagi .sub_nav a.sub_navi_yanagi,
#kuroe .sub_nav a.sub_navi_kuroe,
#kogure .sub_nav a.sub_navi_kogure { background-position: 0 bottom !important; }

#character .vertical_box {
  position: relative;
  width: 660px;
  height: 582px;
  margin: 0 auto;
  overflow: hidden;
}
#character .vertical_box .v_box_inner {
  position: absolute;
  top: 0;
  left: 0;
  /*transition: top 10ms linear;*/
  -webkit-transition: top 600ms ease-in-out;
  transition: top 600ms ease-in-out;
}
#character #regent .vertical_box .v_box_inner {
  top: -582px;
}
#character #yotsuba .vertical_box .v_box_inner {
  top: -1164px;
}
#character #yuzu .vertical_box .v_box_inner {
  top: -1746px;
}
#character #satan .vertical_box .v_box_inner {
  top: -2328px;
}
#character #yanagi .vertical_box .v_box_inner {
  top: -2910px;
}
#character #kuroe .vertical_box .v_box_inner {
  top: -3492px;
}
#character #kogure .vertical_box .v_box_inner {
  top: -4074px;
}
#character .frame section {
  width: 660px;
  height: 582px;
  position: relative;
}
#character .frame h3.caption {
  padding: 40px 0;
}
.box .frame p.text_height {
  height: 200px;
}
.box .frame .chara_v3 p.text_height {
  height: 240px;
}
.box .frame .chara_v5 h3,
.box .frame .chara_v5 p {
  position: relative;
  z-index: 10;
}
.box .frame .chara_v5 p.text_height {
  height: 250px;
}
#character .frame p {
  opacity: 0;
}
.chara_v1 .dotchara {
  position: absolute;
  top: 140px;
  right: 85px;
  opacity: 0;
}
.chara_v2 .dotchara {
  position: absolute;
  top: 124px;
  right: 70px;
  opacity: 0;
}
.chara_v3 .dotchara {
  position: absolute;
  top: 140px;
  right: 66px;
  opacity: 0;
}
.chara_v4 .dotchara {
  position: absolute;
  top: 130px;
  right: 70px;
  opacity: 0;
}
.chara_v5 .dotchara {
  position: absolute;
  top: 70px;
  right: 15px;
  z-index: 1;
  opacity: 0;
}
.chara_v6 .dotchara {
  position: absolute;
  top: 130px;
  right: 60px;
  opacity: 0;
}
.chara_v7 .dotchara {
  position: absolute;
  top: 140px;
  right: 60px;
  opacity: 0;
}
.chara_v8 .dotchara {
  position: absolute;
  top: 130px;
  right: 66px;
  opacity: 0;
}
/*
#back .chara_v1 h3,
#regent .chara_v2 h3,
#yotsuba .chara_v3 h3,
#yuzu .chara_v4 h3,
#satan .chara_v5 h3 {
  opacity: 1;
  animation: fadeInRightBig 600ms linear 300ms both;
  transition: all 600ms linear 800ms;
}*/

#back .chara_v1 .text_height,
#regent .chara_v2 .text_height,
#yotsuba .chara_v3 .text_height,
#yuzu .chara_v4 .text_height,
#satan .chara_v5 .text_height,
#yanagi .chara_v6 .text_height,
#kuroe .chara_v7 .text_height,
#kogure .chara_v8 .text_height {
  opacity: 1;
  -webkit-transition: all 400ms linear 1500ms;
  transition: all 400ms linear 1500ms;
}

#back .chara_v1 .dotchara,
#regent .chara_v2 .dotchara,
#yotsuba .chara_v3 .dotchara,
#yuzu .chara_v4 .dotchara,
#yanagi .chara_v6 .dotchara,
#kuroe .chara_v7 .dotchara,
#kogure .chara_v8 .dotchara {
  opacity: 1;
  -webkit-transition: all 300ms linear 900ms;
  transition: all 300ms linear 900ms;
  -webkit-animation: bounce 600ms linear 900ms both;
  animation: bounce 600ms linear 900ms both;
}
#satan .chara_v5 .dotchara {
  opacity: 1;
  -webkit-transition: all 600ms linear 900ms;
  transition: all 600ms linear 900ms;
}
#back .chara_v1 .selif,
#regent .chara_v2 .selif,
#yotsuba .chara_v3 .selif,
#yuzu .chara_v4 .selif,
#satan .chara_v5 .selif {
  opacity: 1;
  -webkit-animation: fadeInRightBig 600ms linear 1700ms both;
  animation: fadeInRightBig 600ms linear 1700ms both;
  /*transition: all 600ms linear 800ms;*/
}

/* ==================================
ムービー
================================== */

#movie section {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 961px;
  margin: 0 auto;
  height: 578px;
  padding: 28px 0 0;
  background: url(../img/frame_large.png) 0 0 no-repeat;
}

.mv_list {
  width: 926px;
  margin: 0 auto;
  height: 225px;
}
.mv_list li {
  position: relative;
  float: left;
  width: 292px;
  margin: 0 8px 17px;
}
.mv_list li.new:after {
  content: url(../img/new.png);
  position: absolute;
  top: -9px;
  right: -20px;
  -webkit-animation: 0.8s linear 0s alternate none infinite running blink;
  animation: 0.8s linear 0s alternate none infinite running blink;
}
.mv_list h3 {
  margin: 0 0 8px;
  text-align: center;
}
.mv_list .play_btn {
  position: relative;
  display: block;
  width: 288px;
  height: 162px;
  padding: 2px;
  background: url(../img/movie/movie_bg.png) 0 0 no-repeat;
}
.mv_list .play_btn:after {
  content: url(../img/movie/movie_on.png);
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 288px;
  height: 162px;
  opacity: 0;
}
.mv_list .play_btn:hover:after {
  opacity: 1;
}
.mv_list .mv_obj {
  width: 288px;
  height: 162px;
  background: url(../img/loading.gif) center center no-repeat;
}

/* ==================================
スペシャル
================================== */
#special { height: 900px; }
.sub_nav a.sub_navi_first { background: url(../img/special/sub_navi_first.png) 0 0 no-repeat; }
.sub_nav a.sub_navi_omoide_quest { background: url(../img/special/sub_navi_omoide_quest.png) 0 0 no-repeat; }
.sub_nav a.sub_navi_benefits { background: url(../img/special/sub_navi_benefits.png) 0 0 no-repeat; }

.sub_nav b.sub_navi_first { background: url(../img/special/sub_navi_first.png) 0 bottom no-repeat; }

#special .sub_nav li:nth-child(1).new:after { right: -10px; }

#special .frame .center {
  margin-top: 25px;
}
.box .frame p.detail_link {
  width: 650px;
  margin-top: 22px;
}
.box .frame p.detail_link a {
  display: block;
  width: 346px;
  height: 30px;
  background: url(../img/special/btn.png) 0 0 no-repeat;
}
.box .frame p.detail_link a:hover {
  background-position: 0 bottom;
}

.detail_link a.new {
  position: relative;
}
.detail_link a.new:after {
  content: url(../img/new.png);
  position: absolute;
  top: -8px;
  right: -30px;
  z-index: 100;
  -webkit-animation: 0.8s linear 0s alternate none infinite running blink;
  animation: 0.8s linear 0s alternate none infinite running blink;
}
.box .frame p.detail_link span {
  display: block;
  overflow: hidden;
  text-indent: -110%;
}

/* ==================================
フッター
================================== */
#pagetop {
  position: fixed;
  right: 0;
  bottom: -1000px;
  width: 151px;
  height: 262px;
  background: url(../img/btn_to_top.png) no-repeat 0 0;
  color: transparent;
  text-indent: -4444em;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: opacity 500ms linear, bottom 10ms linear 510ms;
  transition: opacity 500ms linear, bottom 10ms linear 510ms;
  z-index: 100;
}
@media screen and (min-width: 1294px)  {
  #pagetop {
    right: auto;
    left: 50%;
    margin-left: 490px;
  }
}
#pagetop.show {
  opacity: 1;
  bottom: 40px;
  -webkit-transition: opacity 500ms linear, bottom 10ms linear;
  transition: opacity 500ms linear, bottom 10ms linear;
}
#pagetop.show.bottom {
  position: absolute;
}
#pagetop:hover {
  background-position: 0 bottom;
}

.footer_bg {
  height: 342px;
  background: url(../img/footer_bg.png) 0 0 repeat-x;
}
footer {
  width: 961px;
  padding: 20px 0 0;
  margin: 0 auto;
}
footer p.about {
  margin: 0 0 -15px;
}
footer .banner {
  height: 31px;
  float: right;
}
footer .banner li {
  float: left;
  margin-left: 7px;
}
footer .banner a {
  display: block;
  background: #fff;
}
footer .banner a:hover img {
  opacity: 0.8;
}
footer .sns {
  height: 29px;
  padding: 2px 0 0;
}
footer .sns li {
  float: left;
  height: 26px;
  overflow: hidden;
}
footer .sns li:not(:last-child) {
  padding-right: 48px;
  background: url(../img/footer_navi_slash.png) 90% 0 no-repeat;
}
footer .sns a {
  display: block;
  height: 26px;
}
footer .sns .blog,
footer .sns .blog a {
  width: 131px;
}
footer .sns .blog a {
  background: url(../img/footer_navi_blog.png) 0 1px no-repeat;
}
footer .sns .blog a:hover {
  background-position: 0 -25px;
}
footer .sns .twitter,
footer .sns .twitter a {
  width: 169px;
  height: 25px;
}
footer .sns .twitter a {
  background: url(../img/footer_navi_twitter.png) 0 0px no-repeat;
}
footer .sns .twitter a:hover {
  background-position: 0 -24px;
}
footer .sns .facebook,
footer .sns .facebook a {
  width: 181px;
  height: 24px;
}
footer .sns .facebook a {
  background: url(../img/footer_navi_facebook.png) 0 1px no-repeat;
}
footer .sns .facebook a:hover {
  background-position: 0 -21px;
}
footer .sns a span {
  visibility: hidden;
}
footer .social {
  clear: left;
  overflow: hidden;
}
footer .social li {
  float: left;
  margin: 5px 11px 0 0;
}
footer .copy {
  float: right;
  clear: left;
  color: #fff;
  font-size: 11rem;
  line-height: 1.4;
  text-align: right;
}
.floating_object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -10;
  overflow: hidden;
}
.floating_object div {
  position: absolute;
  z-index: -1;
  left: 50%;
}
.floating_object .chara01 {
  position: fixed;
  top: 140px;
  -webkit-transform: translate(3000px,0px);
  -ms-transform: translate(3000px,0px);
  transform: translate(3000px,0px);
  opacity: 0;
}
.floating_object .chara02 {
  top: 1600px;
}
.floating_object .chara03 {
  position: fixed;
  top: 140px;
  opacity: 0;
}
.floating_object .chara04 {
  top: 6000px;
  -webkit-transform: rotate(-720deg);
  -ms-transform: rotate(-720deg);
  transform: rotate(-720deg);
}
.floating_object .chara05 {
  top: 5210px;
}

.center {
  text-align: center;
}

.hide {
  display: none !important;
}
.show {
  display: block !important;
}

.pop {
  -webkit-transition: opacity 200ms linear;
  transition: opacity 200ms linear;
}
.pop:hover {
  opacity: 0.75;
}

.license {
  padding-bottom: 10px;
}

.license a {
  color: #ffd929;
  text-decoration: underline;
}