@charset "utf-8";

body:not(#top) header.sub_header {
  position: relative;
  z-index: 20;
  width: 100%;
  height: 230px;

  background: url(../sp/img/title_bg.png) 50% 50% no-repeat,
    -webkit-gradient(linear,  left top, left bottom,  from(rgba(0,0,0,1)),color-stop(80%, rgba(0,0,0,1)),to(rgba(0,0,0,0))) 0 0 repeat;

  background: url(../sp/img/title_bg.png) 50% 50% no-repeat,
    -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 80%,rgba(0,0,0,0) 100%) 0 0 repeat;

  background: url(../sp/img/title_bg.png) 50% 50% no-repeat,
    linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 80%,rgba(0,0,0,0) 100%) 0 0 repeat;
}
body:not(#top) header.sub_header img {
  position: absolute;
  top: 3%;
  right: 0;
  left: 0;
  bottom: 0;
  display: block;
  width: 384px;
  margin: auto;
  /*-webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;*/
}
body:not(#top) #contents {
  padding: 4px 0 0;
  max-width: 640px;
  margin: 0 auto;
}
#contents .sp-h1 {
  width: 71.4%;
  margin: 0 auto 6px;
}
.sub_nav {
  display: none;
}
.sp-tgl {
  position: relative;
  margin-bottom: 2px;
}
.sp-tgl::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 25px;
  width: 44px;
  height: 43px;
  background: url(../sp/img/collapsible_cap_icon01.png) 0 0 no-repeat;
  background-size: 100% auto;
}
.sp-tgl::after {
  content: "";
  position: absolute;
  top: 26px;
  right: 36px;
  width: 38px;
  height: 25px;
  background: url(../sp/img/collapsible_cap_icon02.png) 0 0 no-repeat;
  background-size: 100% auto;
}
.sp-tgl.opened::before {
  background: url(../sp/img/collapsible_cap_icon01.png) 0 100% no-repeat;
  background-size: 100% auto;
}
.sp-tgl.opened::after {
  background: url(../sp/img/collapsible_cap_icon02.png) 0 100% no-repeat;
  background-size: 100% auto;
}
.sp-link {
  display: block;
  position: relative;
  margin-bottom: 2px;
}
.sp-link::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 40px;
  width: 25px;
  height: 38px;
  background: url(../sp/img/link_cap_icon.png) 0 0 no-repeat;
  background-size: 100% auto;
}
.sp-tgl .new,
.sp-link .new {
  position: absolute;
  top: 8px;
  content: url(../sp/img/new.png);
  -webkit-animation: blink 2.4s ease-in-out infinite;
  animation: blink 2.4s ease-in-out infinite;
  z-index: 10;
}
body:not(#top) main {
  /*padding-bottom: 320px;*/
}
#world article,
#system article,
#gallery article,
#special article {
  height: 0;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
.sp-tgl.opened + article {
  height: auto;
  opacity: 1 !important;
}
/* フレーム */
.frame {
  position: relative;
  top: 234px;
  left: 0;
  width: 640px;
  background: url(../sp/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: -244px;
  left: 0;
  content: url(../sp/img/frame_header.png);
}
.frame::after {
  position: absolute;
  bottom: -222px;
  left: 0;
  content: url(../sp/img/frame_footer.png);
}
.frame section {
  position: relative;
  top: -170px;
  z-index: 1;
}
.frame section.new:after {
  content: url(../img/new.png);
  position: absolute;
  top: -55px;
  left: 5px;
  -webkit-animation: blink 2.4s ease-in-out infinite;
  animation: blink 2.4s ease-in-out infinite;
}
/***********************************
ワールド
***********************************/
#world .sp-tgl:nth-of-type(2) .new {
  left: 314px;
}
#world .sp-tgl:nth-of-type(3) .new {
  left: 257px;
}
#world .sp-tgl:nth-of-type(4) .new {
  left: 330px;
}
#world .opened + article {
  padding-bottom: 370px;
}
#world .opened + article#story {
  height: 560px;
}
#world .opened + article#keyword {
  height: 3240px;
}
#world .opened + article#view_of_world {
  height: 570px;
}
#world .opened + article#monster {
  height: 1120px;
}
#world section {
  position: relative;
  margin: 0 auto;
  text-align: center;
}
#world section.new:after {
  content: url(../img/new.png);
  position: absolute;
  top: -55px;
  left: 5px;
  -webkit-animation: blink 2.4s ease-in-out infinite;
  animation: blink 2.4s ease-in-out infinite;
}
/*.story #story {
  display: block;
}
.keyword #keyword {
  display: block;
}*/
#story .frame {
  height: 465px;
}
#story section h2 {
  margin: 0 0 -48px;
}
#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 450px;
}
#keyword > .frame section h2 {
  margin: 0 0 28px;
}
/*#keyword > .frame::after {
  bottom: -216px;
}*/
#keyword > .frame:last-child {
  margin: 0;
}
#view_of_world .frame {
  height: 480px;
}
#monster .frame:first-child {
  height: 172px;
  margin: 0 0 450px;
}
#monster .frame:nth-child(2) {
  height: 410px;
}
.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 {
  width: 640px;
  padding-bottom: 390px;
  -webkit-animation: frameSlideIn 0.5s ease-out 0.3s both;
  animation: frameSlideIn 0.5s ease-out 0.3s both;
}
.charaFrame {
  position: relative;
  top: 234px;
  left: 0;
  width: 640px;
  background: url(../sp/img/frame_middle.png) 0 0 repeat-y;
}
.charaFrame::before {
  position: absolute;
  top: -244px;
  left: 0;
  content: url(../sp/img/frame_header.png);
}
.charaFrame::after {
  position: absolute;
  bottom: -222px;
  left: 0;
  content: url(../sp/img/frame_footer.png);
}
.charaFrame article {
  position: relative;
  top: -160px;
  z-index: 1;
  width: 640px;
  height: 674px;
  -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: absolute;
  top: 75px;
  right: 0;
  left: 0;
  z-index: 100;
  width: 610px;
  margin: 0 auto;
}
.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: 20%;
  height: 177px;
  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: 112px;
  height: 171px;
  margin: 0 auto;
  background-repeat: no-repeat;
  cursor: pointer;
}
.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: 298px;
}
.chara_nav li a {
  background-image: url(../sp/img/character/sub_navi.png);
}
li .chelka {
  background-position: 0 0;
}
li .amalie {
  background-position: -112px 0;
}
li .milm {
  background-position: -224px 0;
}
li .cavalry {
  background-position: -336px 0;
}
li .huninmugin {
  background-position: -448px 0;
}
li .theodor {
  background-position: -560px 0;
}
li .gabrielle {
  background-position: -672px 0;
}
li .zophie {
  background-position: -784px 0;
}
li .lisa {
  background-position: -896px 0;
}
li .prim {
  background-position: -1008px 0;
}
li .isabel {
  background-position: -1120px 0;
}
li .attis {
  background-position: -1232px 0;
}
li .chidori {
  background-position: -1344px 0;
}
#index .charaFrame article {
  height: 274px;
}
#index .charaFrame h2 {
  height: 60px;
  margin: 0 auto 14px;
  opacity: 1;
}
.charaDetail {
  position: absolute;
}
.charaDetail section {
  display: none;
  position: relative;
  top: -46px;
  height: 0;
  width: 640px;
}
.charaDetail section h3 {
  position: relative;
  top: -24px;
  width: 443px;
  height: 87px;
  margin: 0 auto 15px;
  opacity: 0;
  z-index: 15;
}
.charaDetail section .txt {
  position: relative;
  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;
}
/* ボイスボタン */
.voice_btns {
  position: absolute;
  top: 335px;
  left: 17px;
  z-index: 30;
}
/* 詳細表示 */
/* チェルカ */
.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;
  height: 580px;
  z-index: 10;
}
.charaDetail#chelka section.chelka figure {
  top: -25px;
  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;
}
/* アマリエ */ 
.charaDetail#amalie section.amalie figure {
  top: 27px;
  left: 272px;
}
.charaDetail#amalie section.amalie .serif {
  top: 418px;
  left: 16px;
}
section.amalie .voice_btns {
  top: 360px;
}
/* ミルム */
.charaDetail#milm section.milm figure {
  top: -35px;
  left: 322px;
}
.charaDetail#milm section.milm .serif {
  top: 395px;
  left: 14px;
}
/* 百騎兵 */
.charaDetail#cavalry section.cavalry figure {
  top: 8px;
  left: 253px;
}
/* フニンムギン */
.charaDetail#huninmugin section.huninmugin figure {
  top: 78px;
  left: 282px;
}
.charaDetail#huninmugin section.huninmugin .serif {
  top: 410px;
  left: 16px;
}
section.huninmugin .voice_btns {
  top: 350px;
}
/* テオドール */
.charaDetail#theodor section.theodor figure {
  top: 0px;
  left: 278px;
}
.charaDetail#theodor section.theodor .txt {
  top: -26px;
}
.charaDetail#theodor section.theodor .serif {
  top: 413px;
  left: 16px;
}
section.theodor .voice_btns {
  top: 355px;
}
/* ガブリエーレ */
.charaDetail#gabrielle section.gabrielle figure {
  top: 50px;
  left: 262px;
}
.charaDetail#gabrielle section.gabrielle .serif {
  top: 402px;
  left: 16px;
}
section.gabrielle .voice_btns {
  top: 340px;
}
/* ゾフィー */
.charaDetail#zophie section.zophie figure {
  top: 20px;
  left: 260px;
}
.charaDetail#zophie section.zophie .txt {
  top: -60px;
}
.charaDetail#zophie section.zophie .serif {
  top: 472px;
  left: 13px;
}
section.zophie .voice_btns {
  top: 413px;
}
/* リサ */
.charaDetail#lisa section.lisa figure {
  top: -15px;
  left: 302px;
}
.charaDetail#lisa section.lisa .txt {
  top: 10px;
}
.charaDetail#lisa section.lisa .serif {
  top: 430px;
  left: 16px;
}
/* プリム */
.charaDetail#prim section.prim .txt {
  z-index: 16;
}
.charaDetail#prim section.prim figure {
  top: -30px;
  left: 250px;
}
.charaDetail#prim section.prim .serif {
  top: 394px;
  left: 16px;
}
/* イザベル */
.charaDetail#isabel section.isabel figure {
  top: 0px;
  left: 252px;
}
.charaDetail#isabel section.isabel .serif {
  top: 394px;
  left: 16px;
}
/* アティス */
.charaDetail#attis section.attis figure {
  top: 72px;
  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 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.pause {
  background-position: 0 -49px;
}

/***********************************
システム
***********************************/
#system .sp-tgl:nth-of-type(2) .new {
  left: 413px;
}
#system .sp-tgl:nth-of-type(3) .new {
  left: 302px;
  display: none;
}
#system .sp-tgl:nth-of-type(4) .new {
  left: 500px;
  display: none;
}
#system .sp-tgl:nth-of-type(5) .new {
  left: 390px;
  display: none;
}
#system .sp-tgl:nth-of-type(6) .new {
  left: 470px;
  display: none;
}
#system .sp-tgl:nth-of-type(7) .new {
  left: 480px;
  display: none;
}
#system .sp-tgl:nth-of-type(8) .new {
  left: 240px;
}
#system .sp-tgl:nth-of-type(9) .new {
  left: 320px;
  display: none;
}
#system .sp-tgl:nth-of-type(10) .new {
  left: 307px;
  display: none;
}
#system .sp-tgl:nth-of-type(11) .new {
  left: 210px;
  display: none;
}
#system .sp-tgl:nth-of-type(12) .new {
  left: 364px;
  display: none;
}
#system .opened + article#summary {
  height: 806px;
}
#system .opened + article#base_action {
  height: 2405px;
}
#system .opened + article#battle_system {
  height: 1886px;
}
#system .opened + article#battle_technic {
  height: 1285px;
}
#system .opened + article#facet {
  height: 2788px;
}
#facet .frame {
  height: 2328px;
}
#system .opened + article#dodge {
  height: 460px;
}
#dodge .frame {
  height: 0px;
}
#system .opened + article#tochka {
  height: 2160px;
}
#tochka .frame {
  height: 1700px;
}
#system .opened + article#stomach {
  height: 572px;
}
#stomach .frame {
  height: 112px;
}
#system .opened + article#hack_and_slash {
  height: 710px;
}
#hack_and_slash .frame {
  height: 250px;
}
#system .opened + article#skill {
  height: 1130px;
}
#skill .frame {
  height: 666px;
}
#system .opened + article#opetime {
  height: 836px;
}
#opetime .frame {
  height: 376px;
}
#system .opened + article#third_eye {
  height: 720px;
}
#third_eye .frame {
  height: 260px;
}
#system .opened + article#strengthen {
  height: 900px;
}
#strengthen .frame {
  height: 440px;
}
#system .opened + article#petition {
  height: 484px;
}
#petition .frame {
  height: 24px;
}
#system .opened + article#map {
  height: 494px;
}
#map .frame {
  height: 50px;
}
#system article {
  width: 640px;
}
#system .frame {
  margin: 0 0 448px;
}
#system .frame:last-child {
  margin: 0;
}
#summary .frame {
  height: 340px;
}
#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: 215px;
}
#battle_system .frame:nth-child(1) {
  height: 570px;
}
#battle_system .frame:nth-child(2) {
  height: 398px;
}
#battle_technic .frame:nth-child(1) {
  height: 368px;
}
#battle_technic .frame:nth-child(2) {
  height: 0;
}
#system section {
  text-align: center;
}
#system section h2 {
  margin: 0 0 10px;
}
#system section p {
  margin: 0 0 10px;
}
.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 .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: -6px;
  left: 0px;
  -webkit-animation: blink 2.4s ease-in-out infinite;
  animation: blink 2.4s ease-in-out infinite;
}

/***********************************
ギャラリー
***********************************/
#gallery .sp-tgl:nth-of-type(1) .new {
  left: 468px;
}
#gallery .sp-tgl:nth-of-type(2) .new {
  left: 414px;
}
#gallery .sp-tgl:nth-of-type(3) .new {
  left: 294px;
}
#gallery .opened + article {
  height: 690px;
}
#gallery .opened + article#screenshot {
  height: 1405px;
}
#gallery .opened + article#imageboard {
  height: 900px;
}
#gallery .opened + article#movie {
  height: 2500px;
}
#movie .frame {
  height: 2040px;
}
#screenshot .frame {
  height: 960px;
}
#gallery section {
  text-align: center;
}
#gallery section h2 {
  margin: 0 0 10px;
}
#screenshot section p {
  margin: 0 0 10px;
}
#screenshot ul {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  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%;
}
#screenshot ul li img {
  width: 96%;
}
#imageboard .frame {
  height: 453px;
}
#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;
}
#imageboard ul li img {
  width: 98%;
}
.mv_list li {
  position: relative;
  width: 640px;
  margin: 0 0 44px;
}
.mv_list li.new:after {
  content: url(../img/new.png);
  position: absolute;
  top: -9px;
  -webkit-animation: blink 2.4s ease-in-out infinite;
  animation: blink 2.4s ease-in-out infinite;
}
.pv01.new:after {
  left: 68px;
}
.bgmMV.new:after {
  left: 155px;
}
.pv02.new:after {
  left: 68px;
}
.playMV01.new:after,
.playMV02.new:after {
  left: 132px;
}
.tvcm.new:after {
  left: 378px;
}
.imageMV.new:after {
  left: 508px;
}
.mv_list b {
  display: block;
  width: 640px;
  margin: 0 0 6px;
}
.mv_list .play_btn {
  position: relative;
  display: block;
  width: 640px;
  height: 360px;
  /*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: 640px;
  height: 360px;
  opacity: 0;
}
.mv_list .play_btn:hover:after {
  opacity: 1;
}
.mv_list .mv_obj {
  display: block;
  width: 640px;
  height: 360px;
  background: #000 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_limited.png);
}
#special .opened + article {
  padding-bottom: 310px;
}
#special .opened + article#limited {
  height: 720px;
}
#special .opened + article#standard {
  height: 720px;
}
#special .sp-tgl:first-of-type .new {
  left: 358px;
}
#special a.sp-link:nth-of-type(4) .new {
  left: 388px;
}
#special a.sp-link:nth-of-type(5) .new {
  left: 546px;
}
#special a.sp-link:nth-of-type(6) .new {
  left: 388px;
}
#special a.sp-link:nth-of-type(7) .new {
  left: 432px;
}
#special a.sp-link:nth-of-type(8) .new {
  left: 192px;
}
#special a.sp-link:nth-of-type(10) .new {
  left: 476px;
}
#special a.sp-link:nth-of-type(11) .new {
  left: 496px;
}
#limited .frame {
  height: 470px;
}
#limited section {
  width: 96%;
  margin: 0 auto;
  text-align: center;
}
#limited section h2 {
  margin: 0 0 10px;
}
#limited section .txt02 {
  margin: -45px 0 0;
}
#standard .frame {
  height: 470px;
}
#standard section {
  width: 96%;
  margin: 0 auto;
  text-align: center;
}
#standard section h2 {
  margin: 0 0 10px;
}
#standard section .txt02 {
  margin: -45px 0 0;
}
.niitengo_chelka {
  overflow: hidden;
  margin: 0 0 24px;
}
.niitengo_chelka li {
  width: 152px;
  margin-right: 1px;
  float: left;
}
.premium_btn {
  display: block;
  width: 379px;
  height: 93px;
  margin: 12px auto 0;
  background: url(../img/special/nis_store.png) 0 0 no-repeat;
}
.premium_btn img {
  display: block;
  width: 379px;
  height: 93px;
  background: url(../img/special/nis_store.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.png) 0 0 no-repeat;
}
.gamestop_btn img {
  display: block;
  width: 379px;
  height: 93px;
  background: url(../img/special/gamestop.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.png) 0 0 no-repeat;
}
.amazon_btn img {
  display: block;
  width: 379px;
  height: 93px;
  background: url(../img/special/amazon.png) 0 100% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.amazon_btn:hover img {
  opacity: 1;
}