@charset "utf-8";

body:not(#top) .wrap {
  position: relative;
  width: 980px;
  padding: 150px 0 0;
  margin: 0 auto;
}
body:not(#top) main {
  margin-left: 237px;
  width: 753px;
  padding-bottom: 450px;
}

/* サブナビ */
.sub_nav {
  position: absolute;
  top: 150px;
  left: 10px;
  width: 227px;
  z-index: 1000;
  -webkit-transition: all 0.5s cubic-bezier(.02, .01, .47, 1) 0s;
  transition: all 0.5s cubic-bezier(.02, .01, .47, 1) 0s;
}
.sub_nav ul {
  position: relative;
  z-index: 1000;
}
.sub_nav li {
  width: 227px;
  margin: 0 0 4px;
  -webkit-animation: subNavIn 0.55s ease both;
  animation: subNavIn 0.55s ease both;
}
.sub_nav li.new:after {
  position: absolute;
  top: -9px;
  left: 175px;
  content: url(../img/new.png);
  -webkit-animation: blink 2.4s ease-in-out infinite;
  animation: blink 2.4s ease-in-out infinite;
  /*-webkit-animation: 0.8s linear 0s alternate none infinite running blink;
  animation: 0.8s linear 0s alternate none infinite running blink;*/
}
.sub_nav li:nth-child(1)  { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
.sub_nav li:nth-child(2)  { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
.sub_nav li:nth-child(3)  { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }
.sub_nav li:nth-child(4)  { -webkit-animation-delay: 1.0s; animation-delay: 1.0s; }
.sub_nav li:nth-child(5)  { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
.sub_nav li:nth-child(6)  { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; }
.sub_nav li:nth-child(7)  { -webkit-animation-delay: 1.6s; animation-delay: 1.6s; }
.sub_nav li:nth-child(8)  { -webkit-animation-delay: 1.8s; animation-delay: 1.8s; }
.sub_nav li:nth-child(9)  { -webkit-animation-delay: 2.0s; animation-delay: 2.0s; }
.sub_nav li:nth-child(10) { -webkit-animation-delay: 2.2s; animation-delay: 2.2s; }
.sub_nav li:nth-child(11) { -webkit-animation-delay: 2.4s; animation-delay: 2.4s; }
.sub_nav li:nth-child(12) { -webkit-animation-delay: 2.6s; animation-delay: 2.6s; }
.sub_nav li:nth-child(13) { -webkit-animation-delay: 2.8s; animation-delay: 2.8s; }
.sub_nav li:nth-child(14) { -webkit-animation-delay: 3.0s; animation-delay: 3.0s; }
.sub_nav li:nth-child(15) { -webkit-animation-delay: 3.2s; animation-delay: 3.2s; }
.sub_nav li:nth-child(16) { -webkit-animation-delay: 3.4s; animation-delay: 3.4s; }
.sub_nav li:nth-child(17) { -webkit-animation-delay: 3.6s; animation-delay: 3.6s; }
.sub_nav li:nth-child(18) { -webkit-animation-delay: 3.8s; animation-delay: 3.8s; }
.sub_nav li:nth-child(19) { -webkit-animation-delay: 4.0s; animation-delay: 4.0s; }
.sub_nav li:nth-child(20) { -webkit-animation-delay: 4.2s; animation-delay: 4.2s; }
.sub_nav li a {
  display: block;
  min-width: 217px;
  height: 46px;
  background-position: 0 0;
  background-repeat: no-repeat;
  cursor: pointer;
}
.sub_nav li a img {
  display: block;
  min-width: 237px;
  height: 46px;
  background-position: 0 bottom;
  background-repeat: no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.4s linear;
  transition: opacity 0.4s linear;
}
.sub_nav li.third {
  padding-left: 18px;
}
.sub_nav li.third a,
.sub_nav li.third a img {
  height: 35px;
}
.sub_nav li.third.new:after {
  left: 163px;
}
.sub_nav li a.open {
  cursor: default;
}
.sub_nav li a.open img,
.sub_nav li a:hover img {
  opacity: 1;
}

/* フレーム */
.frame {
  position: relative;
  top: 224px;
  left: 0;
  width: 753px;
  background: url(../img/frame_middle.png) 0 0 repeat-y;
  -webkit-animation: frameSlideIn 0.5s ease-out 0.3s both;
  animation: frameSlideIn 0.5s ease-out 0.3s both;
}
.frame:nth-child(1) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
.frame:nth-child(2) { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; }
.frame:nth-child(3) { -webkit-animation-delay: 1.0s; animation-delay: 1.0s; }
.frame:nth-child(4) { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; }
.frame:nth-child(5) { -webkit-animation-delay: 1.6s; animation-delay: 1.6s; }
.frame:nth-child(6) { -webkit-animation-delay: 1.9s; animation-delay: 1.9s; }
.frame:nth-child(7) { -webkit-animation-delay: 2.2s; animation-delay: 2.2s; }
.frame:nth-child(8) { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; }
.frame:nth-child(9) { -webkit-animation-delay: 2.8s; animation-delay: 2.8s; }
.frame:nth-child(10) { -webkit-animation-delay: 3.1s; animation-delay: 3.1s; }

.frame::before {
  position: absolute;
  top: -245px;
  left: 0;
  content: url(../img/frame_header.png);
}
.frame::after {
  position: absolute;
  bottom: -223px;
  left: -1px;
  content: url(../img/frame_footer.png);
}
.frame section {
  position: relative;
  top: -175px;
  z-index: 1;
}
.frame section.new:after {
  content: url(../img/new.png);
  position: absolute;
  top: -55px;
  left: -45px;
  -webkit-animation: blink 2.4s ease-in-out infinite;
  animation: blink 2.4s ease-in-out infinite;
}

/***********************************
ワールド
***********************************/
.sub_nav .story,
.sub_nav .story img {
  background-image: url(../img/world/sub_navi_story.png);
}
.sub_nav .keyword,
.sub_nav .keyword img {
  background-image: url(../img/world/sub_navi_keyword.png);
}
.sub_nav .view_of_world,
.sub_nav .view_of_world img {
  background-image: url(../img/world/sub_navi_world.png);
}
.sub_nav .monster,
.sub_nav .monster img {
  background-image: url(../img/world/sub_navi_monster.png);
}
#world article {
  display: none;
  width: 753px;
}
#world section {
  width: 636px;
  margin: 0 0 0 58px;
  text-align: center;
}
#world section.new:after {
  content: url(../img/new.png);
  position: absolute;
  top: -55px;
  left: -45px;
  -webkit-animation: blink 2.4s ease-in-out infinite;
  animation: blink 2.4s ease-in-out infinite;
}
.story #story,
.keyword #keyword,
.view_of_world #view_of_world,
.monster #monster {
  display: block;
}
#story .frame {
  height: 450px;
}
#story section h2 {
  margin: 0 0 -80px;
}
#story .story_txt01 {
  -webkit-animation: fade-in 0.9s linear 1.1s both;
  animation: fade-in 0.9s linear 1.1s both;
}
#keyword > .frame {
  height: 0;
  margin: 0 0 448px;
}
#keyword > .frame:last-child {
  height: 0;
  margin: 0;
}
#keyword > .frame::after {
  bottom: -216px;
}
#keyword > .frame section h2 {
  margin: 0 0 40px;
}
#view_of_world .frame {
  height: 474px;
}
#monster .frame {
  height: 170px;
}
#monster > .frame:last-child {
  height: 400px;
}
#monster > .frame:not(:last-child) {
  margin: 0 0 448px;
}
.field_list {
  margin: 0 0 16px 7px;
}
.field_list figure {
  float: left;
  width: 298px;
  height: 292px;
  margin: 0 6px 16px;
}
.field_list,
.monster_list {
  margin: 0 0 16px 7px;
}
.field_list figure,
.monster_list figure {
  float: left;
  width: 298px;
  height: 292px;
  margin: 0 6px 16px;
}
.monster_list figure.boss01 {
  width: 608px;
  height: auto;
  text-align: left;
}
.monster_list figure .pop {
  position: relative;
}
.monster_list figure .pop img:first-child {
  -webkit-transition: opacity 0.1s linear;
  transition: opacity 0.1s linear;
}
.monster_list figure .pop:hover img:first-child {
  opacity: 0.85;
}
.monster_list figure .graphic {
  position: absolute;
  bottom: -40px;
  right: -36px;
  z-index: 2;
}
.monster_list figure:nth-child(1) .pop {
  z-index: 1;
}
.monster_list figure:nth-child(2) .graphic {
  position: absolute;
  bottom: -26px;
  right: -50px;
}
.monster_list figure.boss01 .graphic {
  right: -158px;
  bottom: -13px;
}

/***********************************
キャラ
***********************************/
body#character main {
  margin-left: 0;
  width: 1009px;
  padding-bottom: 450px;
  -webkit-animation: frameSlideIn 0.5s ease-out 0.3s both;
  animation: frameSlideIn 0.5s ease-out 0.3s both;
}
.charaFrame {
  position: relative;
  top: 224px;
  left: 0;
  width: 1009px;
  background: url(../img/character/frame_middle_large.png) 0 0 repeat-y;
}
.charaFrame::before {
  position: absolute;
  top: -245px;
  left: 0;
  content: url(../img/character/frame_header_large.png);
}
.charaFrame::after {
  position: absolute;
  bottom: -223px;
  left: 0px;
  content: url(../img/character/frame_footer_large.png);
}
.charaFrame article {
  position: relative;
  top: -175px;
  z-index: 1;
  width: 896px;
  height: 274px;
  margin: 0 0 0 55px;
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);;
}
.charaFrame h2 {
  width: 443px;
  margin: 0 auto 7px;
  opacity: 0;
  -webkit-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
.charaFrame #index h2 {
  opacity: 1;
}
.chara_nav {
  position: relative;
  top: -65px;
  width: 228px;
  z-index: 10;
  margin: 0 0 0 15px;
  /*background: rgba(0,0,255,0.3);*/
}
.chara_nav ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.chara_nav li {
  position: relative;
  width: 33.334%;
  height: 110px;
  margin: 0 0 5px;
  -webkit-animation: fade-in 0.4s linear both;
  animation: fade-in 0.4s linear both;
}
.chara_nav li.new:after {
  content: url(../img/new.png);
  position: absolute;
  top: -9px;
  left: -5px;
  -webkit-animation: blink 2.4s ease-in-out infinite;
  animation: blink 2.4s ease-in-out infinite;
}
.chara_nav li:nth-child(1) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
.chara_nav li:nth-child(2) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.chara_nav li:nth-child(3) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
.chara_nav li:nth-child(4) { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; }
.chara_nav li:nth-child(5) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }
.chara_nav li:nth-child(6) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.chara_nav li:nth-child(7) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
.chara_nav li:nth-child(8) { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; }
.chara_nav li:nth-child(9) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }
.chara_nav li:nth-child(10) { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; }
.chara_nav li:nth-child(11) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
.chara_nav li:nth-child(12) { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; }
.chara_nav li:nth-child(13) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }

.chara_nav li a {
  display: block;
  width: 171px;
  height: 271px;
  background-repeat: no-repeat;
  cursor: pointer;/*
  -webkit-transform: scale(0.421,0.421);
  -ms-transform: scale(0.421,0.421);
  transform: scale(0.421,0.421);*/
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
}
.chara_nav li a img {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
/* 一覧表示 */
.charaFrame article#index {
  height: 555px;
}
#index .chara_nav {
  top: 0;
  width: 865px;
  padding: 0 1px 0 0;
}
#index .chara_nav li {
  width: 20%;
  height: 271px;
  /*padding: 0 1px;*/
}
#index .chara_nav li a {
  -webkit-transform: scale(1,1);
  -ms-transform: scale(1,1);
  transform: scale(1,1);
}
.chara_nav li a img {
  width: 100%;
  height: 100%;
}
.chara_nav li a,
.chara_nav li a img {
  background-image: url(../img/character/top_navi.png);
  /*background-image: url(../img/character/sub_navi.png);*/
}
#index .chara_nav li a,
#index .chara_nav li a img {
  background-image: url(../img/character/top_navi.png);
}
#index .chara_nav img {
  /*-webkit-animation: fadeOut 0.33s linear 1.6s both;
  animation: fadeOut 0.33s linear 1.6s both;*/
}
#chelka li a.chelka img,
#amalie li a.amalie img,
#milm li a.milm img,
#cavalry li a.cavalry img,
#huninmugin li a.huninmugin img,
#theodor li a.theodor img,
#gabrielle li a.gabrielle img,
#zophie li a.zophie img,
#lisa li a.lisa img,
#prim li a.prim img,
#isabel li a.isabel img,
#attis li a.attis img,
#chidori li a.chidori img,
.chara_nav li a:hover img {
  opacity: 1 !important;
}
li .chelka {
  background-position: -346px 0;
}
li .chelka img {
  background-position: -346px -271px;
}
li .amalie {
  background-position: 0 0;
}
li .amalie img {
  background-position: 0 -271px;
}
li .milm {
  background-position: -692px 0;
}
li .milm img {
  background-position: -692px -271px;
}
li .cavalry {
  background-position: -173px 0;
}
li .cavalry img {
  background-position: -173px -271px;
}
li .huninmugin {
  background-position: -519px 0;
}
li .huninmugin img {
  background-position: -519px -271px;
}
li .theodor {
  background-position: -865px 0;
}
li .theodor img {
  background-position: -865px -271px;
}
li .gabrielle {
  background-position: -1038px 0;
}
li .gabrielle img {
  background-position: -1038px -271px;
}
li .zophie {
  background-position: -1211px 0;
}
li .zophie img {
  background-position: -1211px -271px;
}
li .lisa {
  background-position: -1384px 0;
}
li .lisa img {
  background-position: -1384px -271px;
}
li .prim {
  background-position: -1557px 0;
}
li .prim img {
  background-position: -1557px -271px;
}
li .isabel {
  background-position: -1730px 0;
}
li .isabel img {
  background-position: -1730px -271px;
}
li .attis {
  background-position: -1903px 0;
}
li .attis img {
  background-position: -1903px -271px;
}
li .chidori {
  background-position: -2076px 0;
}
li .chidori img {
  background-position: -2076px -271px;
}
#index .charaFrame h2 {
  height: 60px;
  margin: 0 auto 14px;
  opacity: 1;
}
.charaDetail {
  position: relative;
}
.charaDetail section {
  display: none;
  position: absolute;
  top: -3px;
  left: 246px;
  width: 640px;
  min-height: 400px;
}
.charaDetail section h3 {
  position: relative;
  top: 6px;
  width: 443px;
  height: 87px;
  margin: 0 auto 15px;
  opacity: 0;
  z-index: 15;
}
.charaDetail section .txt {
  position: relative;
  top: 6px;
  margin: 0 0 0 18px;
  opacity: 0;
}
.charaDetail section figure {
  position: absolute;
  z-index: 12;
  opacity: 0;
}
.charaDetail section .serif {
  position: absolute;
  z-index: 14;
  opacity: 0;
}
/* 詳細表示 */
/* チェルカ */
.charaDetail#chelka  section.chelka,
.charaDetail#amalie  section.amalie,
.charaDetail#milm    section.milm,
.charaDetail#cavalry section.cavalry,
.charaDetail#huninmugin section.huninmugin,
.charaDetail#theodor section.theodor,
.charaDetail#gabrielle section.gabrielle,
.charaDetail#zophie section.zophie,
.charaDetail#lisa section.lisa,
.charaDetail#prim section.prim,
.charaDetail#isabel section.isabel,
.charaDetail#attis section.attis,
.charaDetail#chidori section.chidori {
  display: block;
  /*-webkit-animation: fade-in 0.5s ease-out 0.5s both;
  animation: fade-in 0.5s ease-out 0.5s both;*/
}
.charaDetail#chelka section.chelka figure {
  top: 5px;
  left: 296px;
  /*-webkit-animation: fade-in 0.5s ease-out 0.5s both;
  animation: fade-in 0.5s ease-out 0.5s both;*/
}
.charaDetail#chelka section.chelka .serif {
  top: 394px;
  left: 16px;
  /*-webkit-animation: fade-in 0.5s ease-out 0.5s both;
  animation: fade-in 0.5s ease-out 0.5s both;*/
}
/* アマリエ */ 
.charaDetail#amalie section.amalie figure {
  top: 57px;
  left: 272px;
}
.charaDetail#amalie section.amalie .serif {
  top: 392px;
  left: 16px;
}
/* ミルム */
.charaDetail#milm section.milm figure {
  top: -5px;
  left: 322px;
}
.charaDetail#milm section.milm .serif {
  top: 382px;
  left: 14px;
}
/* 百騎兵 */
.charaDetail#cavalry section.cavalry figure {
  top: 38px;
  left: 253px;
}
/* フニンムギン */
.charaDetail#huninmugin section.huninmugin figure {
  top: 108px;
  left: 282px;
}
.charaDetail#huninmugin section.huninmugin .serif {
  top: 394px;
  left: 16px;
}
/* テオドール */
.charaDetail#theodor section.theodor figure {
  top: 58px;
  left: 310px;
}
.charaDetail#theodor section.theodor .serif {
  top: 413px;
  left: 16px;
}
/* ガブリエーレ */
.charaDetail#gabrielle section.gabrielle figure {
  top: 60px;
  left: 302px;
}
.charaDetail#gabrielle section.gabrielle .serif {
  top: 394px;
  left: 16px;
}
/* ゾフィー */
.charaDetail#zophie section.zophie figure {
  top: 50px;
  left: 310px;
}
.charaDetail#zophie section.zophie .serif {
  top: 394px;
  left: 13px;
}
/* リサ */
.charaDetail#lisa section.lisa figure {
  top: 15px;
  left: 322px;
}
.charaDetail#lisa section.lisa .serif {
  top: 394px;
  left: 16px;
}
/* プリム */
.charaDetail#prim section.prim .txt {
  z-index: 16;
}
.charaDetail#prim section.prim figure {
  top: 4px;
  left: 256px;
}
.charaDetail#prim section.prim .serif {
  top: 394px;
  left: 16px;
}
/* イザベル */
.charaDetail#isabel section.isabel figure {
  top: 31px;
  left: 252px;
}
.charaDetail#isabel section.isabel .serif {
  top: 394px;
  left: 16px;
}
/* アティス */
.charaDetail#attis section.attis figure {
  top: 85px;
  left: 308px;
}
.charaDetail#attis section.attis .serif {
  top: 394px;
  left: 16px;
}
/* チドリ */
.charaDetail#chidori section.chidori figure {
  top: 108px;
  left: 325px;
}
.charaDetail#chidori section.chidori .serif {
  top: 394px;
  left: 16px;
}
/* ボイスボタン */
.voice_btns {
  position: absolute;
  top: 335px;
  left: 17px;
}
section.milm .voice_btns {
  top: 325px;
}
section.theodor .voice_btns {
  top: 355px;
}
.voice_btns li {
  float: left;
  width: 52px;
  height: 49px;
  margin: 0 3px;
  opacity: 0;
}
.voice_btns li img {
  display: block;
  width: 52px;
  height: 49px;
  cursor: pointer;
}
.voice_btns li:nth-child(1) img {
  background: url(../img/character/voice_btn01.png) 0 0 no-repeat;
}
.voice_btns li:nth-child(2) img {
  background: url(../img/character/voice_btn02.png) 0 0 no-repeat;
}
.voice_btns li:nth-child(3) img {
  background: url(../img/character/voice_btn03.png) 0 0 no-repeat;
}
.voice_btns li img:hover {
  opacity: 0.6;
}
.voice_btns li img.pause {
  background-position: 0 -49px;
}

/***********************************
システム
***********************************/
/*body#system .sub_nav li:nth-child(1)  { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
body#system .sub_nav li:nth-child(2)  { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
body#system .sub_nav li:nth-child(3)  { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
body#system .sub_nav li:nth-child(4)  { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; }
body#system .sub_nav li:nth-child(5)  { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }
body#system .sub_nav li:nth-child(6)  { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; }
body#system .sub_nav li:nth-child(7)  { -webkit-animation-delay: 1.0s; animation-delay: 1.0s; }
body#system .sub_nav li:nth-child(8)  { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; }
body#system .sub_nav li:nth-child(9)  { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
body#system .sub_nav li:nth-child(10) { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; }
body#system .sub_nav li:nth-child(11) { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; }
body#system .sub_nav li:nth-child(12) { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }
body#system .sub_nav li:nth-child(13) { -webkit-animation-delay: 1.6s; animation-delay: 1.6s; }
body#system .sub_nav li:nth-child(14) { -webkit-animation-delay: 1.7s; animation-delay: 1.7s; }
body#system .sub_nav li:nth-child(15) { -webkit-animation-delay: 1.8s; animation-delay: 1.8s; }
body#system .sub_nav li:nth-child(16) { -webkit-animation-delay: 1.9s; animation-delay: 1.9s; }
body#system .sub_nav li:nth-child(17) { -webkit-animation-delay: 2.0s; animation-delay: 2.0s; }
body#system .sub_nav li:nth-child(18) { -webkit-animation-delay: 2.1s; animation-delay: 2.1s; }
body#system .sub_nav li:nth-child(19) { -webkit-animation-delay: 2.2s; animation-delay: 2.2s; }
body#system .sub_nav li:nth-child(20) { -webkit-animation-delay: 2.3s; animation-delay: 2.3s; }*/

body#system .sub_nav li:nth-child(1)  { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
body#system .sub_nav li:nth-child(2)  { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
body#system .sub_nav li:nth-child(3)  { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }
body#system .sub_nav li:nth-child(4)  { -webkit-animation-delay: 1.0s; animation-delay: 1.0s; }
body#system .sub_nav li:nth-child(5)  { -webkit-animation-delay: 1.0s; animation-delay: 1.0s; }
body#system .sub_nav li:nth-child(6)  { -webkit-animation-delay: 1.0s; animation-delay: 1.0s; }
body#system .sub_nav li:nth-child(7)  { -webkit-animation-delay: 1.0s; animation-delay: 1.0s; }
body#system .sub_nav li:nth-child(8)  { -webkit-animation-delay: 1.0s; animation-delay: 1.0s; }
body#system .sub_nav li:nth-child(9)  { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
body#system .sub_nav li:nth-child(10) { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; }
body#system .sub_nav li:nth-child(11) { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; }
body#system .sub_nav li:nth-child(12) { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; }
body#system .sub_nav li:nth-child(13) { -webkit-animation-delay: 1.6s; animation-delay: 1.6s; }
body#system .sub_nav li:nth-child(14) { -webkit-animation-delay: 1.8s; animation-delay: 1.8s; }
body#system .sub_nav li:nth-child(15) { -webkit-animation-delay: 2.0s; animation-delay: 1.8s; }
body#system .sub_nav li:nth-child(16) { -webkit-animation-delay: 2.0s; animation-delay: 2.0s; }

body#system main {
  min-height: 270px;
}
.sub_nav .summary,
.sub_nav .summary img {
  background-image: url(../img/system/sub_navi_summary.png);
}
.sub_nav .base_action,
.sub_nav .base_action img {
  background-image: url(../img/system/sub_navi_base_action.png);
}
.sub_nav .battle_system,
.sub_nav .battle_system img {
  background-image: url(../img/system/sub_navi_battle_system.png);
}
.sub_nav .facet,
.sub_nav .facet img {
  background-image: url(../img/system/sub_sub_navi_facet.png);
}
.sub_nav .dodge,
.sub_nav .dodge img {
  background-image: url(../img/system/sub_sub_navi_dodge.png);
}
.sub_nav .tochka,
.sub_nav .tochka img {
  background-image: url(../img/system/sub_sub_navi_tochka.png);
}
.sub_nav .stomach,
.sub_nav .stomach img {
  background-image: url(../img/system/sub_sub_navi_stomach.png);
}
.sub_nav .hack_and_slash,
.sub_nav .hack_and_slash img {
  background-image: url(../img/system/sub_sub_navi_hack_and_slash.png);
}
.sub_nav .new_system,
.sub_nav .new_system img {
  background-image: url(../img/system/sub_navi_new_system.png);
}
.sub_nav .skill,
.sub_nav .skill img {
  background-image: url(../img/system/sub_sub_navi_skill.png);
}
.sub_nav .opetime,
.sub_nav .opetime img {
  background-image: url(../img/system/sub_sub_navi_opetime.png);
}
.sub_nav .third_eye,
.sub_nav .third_eye img {
  background-image: url(../img/system/sub_sub_navi_third_eye.png);
}
.sub_nav .base_system,
.sub_nav .base_system img {
  background-image: url(../img/system/sub_navi_base_system.png);
}
.sub_nav .strengthen,
.sub_nav .strengthen img {
  background-image: url(../img/system/sub_sub_navi_strengthen.png);
}
.sub_nav .petition,
.sub_nav .petition img {
  background-image: url(../img/system/sub_sub_navi_petition.png);
}
.sub_nav .map,
.sub_nav .map img {
  background-image: url(../img/system/sub_navi_map.png);
}
#system article {
  display: none;
  width: 753px;
}
#system section {
  width: 636px;
  margin: 0 0 0 56px;
  text-align: center;
}
#system section h2 {
  margin: 0 0 10px;
}
#system section p {
  margin: 0 0 10px;
}
.summary #summary,
.base_action #base_action,
.battle_system #battle_system,
.facet #facet,
.dodge #dodge,
.tochka #tochka,
.stomach #stomach,
.hack_and_slash #hack_and_slash,
.skill #skill,
.opetime #opetime,
.third_eye #third_eye,
.strengthen #strengthen,
.petition #petition,
.map #map {
  display: block;
}
#summary .frame {
  height: 240px;
}
#base_action .frame:nth-child(1) {
  height: 385px;
}
#base_action .frame:nth-child(2),
#base_action .frame:nth-child(3) {
  height: 0px;
}
#base_action .frame:nth-child(4) {
  height: 210px;
}
#battle_system .frame:nth-child(1) {
  height: 565px;
}
#battle_system .frame:nth-child(2) {
  height: 392px;
}
#battle_technic .frame:nth-child(1) {
  height: 368px;
}
#battle_technic .frame:nth-child(2) {
  height: 0;
}
#map .frame {
  height: 46px;
}
#system .frame {
  margin: 0 0 448px;
}
#system .frame:last-child {
  margin: 0;
}
#facet .frame {
  /*height: 2214px;*/
  height: 2270px;
}
#stomach .frame {
  height: 110px;
}
#hack_and_slash .frame {
  height: 240px;
}
#skill .frame {
  height: 666px;
}
#opetime .frame {
  height: 367px;
}
#third_eye .frame {
  height: 255px;
}
#strengthen .frame {
  height: 432px;
}
#petition .frame {
  height: 14px;
}

.weapons {
  position: relative;
  height: 500px;
}
.weapons li {
  position: absolute;
}
.weapons li:nth-child(1) {
  top: 8px;
  left: 4px;
  width: 210px;
}
.weapons li:nth-child(2) {
  top: -16px;
  left: 186px;
  width: 268px;
}
.weapons li:nth-child(3) {
  top: -88px;
  left: 438px;
  width: 105px;
}
#system .right {
  float: right;
  margin: 0 10px 0 0;
}
#system .left {
  float: left;
  margin: 0 0 0 15px;
}
#system .text_left {
  text-align: left;
  margin: 0 0 0 12px;
}
#system .faset .right {
  float: right;
  margin: 20px 10px 0 0;
}
#system article .facet {
  padding: 0 18px 30px;
  text-align: left;
}
#system .facet.knight {
  background: url(../img/system/facet_img01.png) 366px 70px no-repeat;
}
#system .facet.power {
  background: url(../img/system/facet_img02.png) 324px 74px no-repeat;
}
#system .facet.mage {
  background: url(../img/system/facet_img03.png) 300px 0px no-repeat;
}
#system .facet.sinobi {
  background: url(../img/system/facet_img04.png) 322px 30px no-repeat;
}
#system .facet.trick {
  background: url(../img/system/facet_img05.png) 101.8% 55% no-repeat;
}
#system .facet.noble {
  background: url(../img/system/facet_img06.png) 100% 70px no-repeat;
}
#system .facet figure {
  margin: 0 0 8px;
  text-align: left;
}
.skills {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 9px;
}
.skills li {
  width: 50%;
  margin: 0 0 4px;
}
.tochka_list {
  margin: 0 0 16px 7px;
}
.tochka_list figure {
  float: left;
  width: 298px;
  margin: 0 6px 16px;
}
.tochka_list figure .pop {
  position: relative;
}
.tochka_list figure .graphic {
  position: absolute;
  bottom: -16px;
  right: -14px;
}
.tochka_list figure:nth-child(2) .graphic {
  bottom: -18px;
  right: -8px;
}
.tochka_list figure:nth-child(3) .graphic {
  right: -12px;
}
.tochka_list figure:nth-child(4) .graphic {
  bottom: -22px;
  right: -44px;
}
.tochka_list figure:nth-child(5) .graphic {
  bottom: -25px;
}
.tochka_list figure:nth-child(5) .graphic {
  bottom: -25px;
}
.tochka_list.newt figure:nth-child(1) .graphic {
  bottom: -23px;
}
.ope_time {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 6px 9px;
}
.ope_time li {
  position: relative;
  width: 50%;
}
.ope_time li.new:after {
  content: url(../img/new.png);
  position: absolute;
  top: -8px;
  left: 0px;
  -webkit-animation: blink 2.4s ease-in-out infinite;
  animation: blink 2.4s ease-in-out infinite;
}
#system main a.pop {
  -webkit-transition: opacity 0.08s linear;
  transition: opacity 0.08s linear;
}
#system main a.pop:hover {
  opacity: 0.7;
}

/***********************************
ギャラリー
***********************************/
.sub_nav .screenshot,
.sub_nav .screenshot img {
  background-image: url(../img/gallery/sub_navi_screenshot.png);
}
.sub_nav .imageboard,
.sub_nav .imageboard img {
  background-image: url(../img/gallery/sub_navi_imageboard.png);
}
.sub_nav .movie,
.sub_nav .movie img {
  background-image: url(../img/gallery/sub_navi_movie.png);
}
#gallery article {
  display: none;
  width: 753px;
}
.screenshot #screenshot {
  display: block;
}
.imageboard #imageboard {
  display: block;
}
.movie #movie {
  display: block;
}
#screenshot .frame {
  height: 992px;
}
#gallery section {
  width: 636px;
  margin: 0 0 0 56px;
  text-align: center;
}
#gallery section h2 {
  margin: 0 0 10px;
}
#screenshot section p {
  margin: 0 0 10px;
}
#screenshot ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  margin: 0 10px;
}
#screenshot ul.new:after {
  content: url(../img/new.png);
  position: absolute;
  top: -9px;
  left: -5px;
  -webkit-animation: blink 2.4s ease-in-out infinite;
  animation: blink 2.4s ease-in-out infinite;
}
#screenshot ul li {
  width: 33.333%;
}
#imageboard .frame {
  height: 450px;
}
#imageboard ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 10px;
}
#imageboard ul li {
  position: relative;
  width: 50%;
  margin: 0 0 4px;
}
#imageboard ul li.new:after {
  content: url(../img/new.png);
  position: absolute;
  top: -10px;
  left: 2px;
  -webkit-animation: blink 2.4s ease-in-out infinite;
  animation: blink 2.4s ease-in-out infinite;
}
#gallery ul li a {
  -webkit-transition: opacity 0.08s linear;
  transition: opacity 0.08s linear;
}
#gallery main ul li a:hover {
  opacity: 0.7;
}
#movie .frame {
  height: 420px;
}
.mv_list li {
  position: relative;
  float: left;
  width: 298px;
  margin: 0 10px 17px;
}
.mv_list li.new:after {
  content: url(../img/new.png);
  position: absolute;
  top: -9px;
  left: -5px;
  -webkit-animation: blink 2.4s ease-in-out infinite;
  animation: blink 2.4s ease-in-out infinite;
}
.mv_list b {
  display: block;
  height: 32px;
}
.mv_list .play_btn {
  position: relative;
  display: block;
  width: 290px;
  height: 164px;
  padding: 4px;
  background: url(../img/gallery/movie_bg.png) 0 0 no-repeat;
  outline: none;
}
.mv_list .play_btn:after {
  content: url(../img/gallery/movie_on.png);
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 298px;
  height: 172px;
  opacity: 0;
}
.mv_list .play_btn:hover:after {
  opacity: 1;
}
.mv_list .mv_obj {
  display: block;
  width: 290px;
  height: 164px;
  background: url(../img/loading.gif) 50% 50% no-repeat;
}

/***********************************
スペシャル
***********************************/
.sub_nav .limited,
.sub_nav .limited img {
  background-image: url(../img/special/sub_navi_limited.png);
}
.sub_nav .standard,
.sub_nav .standard img {
  background-image: url(../img/special/sub_navi_standard.png);
}
.sub_nav .spcial_pgm,
.sub_nav .spcial_pgm img {
  background-image: url(../img/special/sub_navi_news.png);
}
.sub_nav .nippon1_edition,
.sub_nav .nippon1_edition img {
  background-image: url(../img/special/sub_navi_nippon1_edition.png);
}
.sub_nav .release_sale,
.sub_nav .release_sale img {
  background-image: url(../img/special/sub_navi_release_sale.png);
}
.sub_nav .benefits,
.sub_nav .benefits img {
  background-image: url(../img/special/sub_navi_benefits.png);
}
.sub_nav .radio,
.sub_nav .radio img {
  background-image: url(../img/special/sub_navi_radio.png);
}
.sub_nav .banner_twitter,
.sub_nav .banner_twitter img {
  background-image: url(../img/special/sub_navi_banner_twitter.png);
}
.sub_nav .wallpaper,
.sub_nav .wallpaper img {
  background-image: url(../img/special/sub_navi_wallpaper.png);
}
.sub_nav .concert,
.sub_nav .concert img {
  background-image: url(../img/special/sub_navi_concert.png);
}
.sub_nav .countdown,
.sub_nav .countdown img {
  background-image: url(../img/special/sub_navi_countdown.png);
}
.sub_nav .illustration_campaign,
.sub_nav .illustration_campaign img {
  background-image: url(../img/special/sub_navi_illustration_campaign.png);
}
.sub_nav .dlc,
.sub_nav .dlc img {
  background-image: url(../img/special/sub_navi_dlc.png);
}

#special article {
  display: none;
  width: 753px;
}
#limited .frame {
  height: 440px;
}
#limited section {
  width: 614px;
  margin: 0 0 0 68px;
  text-align: center;
}
#limited section h2 {
  margin: 0 0 10px;
}
#limited section .txt02 {
  margin: -45px 0 0;
}

.limited #limited {
  display: block;
}

.standard #standard {
  display: block;
}

#standard .frame {
  height: 440px;
}
#standard section {
  width: 614px;
  margin: 0 0 0 68px;
  text-align: center;
}
#standard section h2 {
  margin: 0 0 10px;
}

.premium_btn {
  display: block;
  width: 379px;
  height: 93px;
  margin: 12px auto 0;
  background: url(../img/special/limited_btn.png) 0 0 no-repeat;
}
.premium_btn img {
  display: block;
  width: 379px;
  height: 93px;
  background: url(../img/special/limited_btn.png) 0 100% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.premium_btn:hover img {
  opacity: 1;
}

.gamestop_btn {
  display: block;
  width: 379px;
  height: 93px;
  margin: 12px auto 0;
  background: url(../img/special/gamestop_btn.png) 0 0 no-repeat;
}
.gamestop_btn img {
  display: block;
  width: 379px;
  height: 93px;
  background: url(../img/special/gamestop_btn.png) 0 100% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.gamestop_btn:hover img {
  opacity: 1;
}

.amazon_btn {
  display: block;
  width: 379px;
  height: 93px;
  margin: 12px auto 0;
  background: url(../img/special/amazon_btn.png) 0 0 no-repeat;
}
.amazon_btn img {
  display: block;
  width: 379px;
  height: 93px;
  background: url(../img/special/amazon_btn.png) 0 100% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.amazon_btn:hover img {
  opacity: 1;
}

.niitengo_chelka {
  overflow: hidden;
  margin: 0 0 24px;
}
.niitengo_chelka li {
  width: 152px;
  margin-right: 1px;
  float: left;
}
.niitengo_chelka li a {
  -webkit-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.niitengo_chelka li a:hover {
  opacity: 0.75;
}
/*#limited section figure {
  position: absolute;
  top: 722px;
  right: 0;
  width: 373px;
  height: 297px;
}*/