@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

a,a:visited {
	text-decoration: none;
	outline: none;
  color: #04f;
}
a:hover {
  text-decoration: underline;
  outline: none;
}
a[href*="tel:"] { cursor: default; }

button { outline: none; }

p {
	margin: 0 0 0.7em;
  background: url(../img/transparent.png);
}
td { background: url(../img/transparent.png); }

html {
  font-size: 6.25%;
  overflow-y: scroll;
}
body {
  min-width: 980px;
  background: url(../img/bg.png) center 0 repeat;
	font: 10rem/1 "Open Sans" , sans-serif;
	color: #333;
}

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

div,section {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6 {
  margin: 0;
}
ul,ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
button {
  padding: 0;
  border: none;
  background-color: transparent;
}

/***********************************
  ヘッダー
***********************************/
.header_bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  height: 70px;
  background: url(../img/header_bg.png) center 0 repeat-x;
  color: #fff;
  font-size: 15rem;
}
#gl_nav {
  width: 1080px;
  height: 53px;
  margin: 0 auto;
}
#bgmVol {
  display: block;
  float: left;
  position: relative;
  width: 93px;
  height: 34px;
  margin: 10px 0 0;
  background: #fce700;
  border: 3px solid #0e050a;
  -webkit-border-radius: 13px;
  border-radius: 13px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#bgmVol i {
  position: absolute;
  display: block;
  border: none;
  overflow: hidden;
  text-indent: -200em;
}
#bgmVol i:nth-child(1) {
  top: 4px;
  left: 11px;
  width: 21px;
  height: 21px;
  background: url(../img/bgm_speaker.png) 0 bottom no-repeat;
}
#bgmVol i:nth-child(2) {
  top: 7px;
  left: 37px;
  width: 14px;
  height: 14px;
  background: #0e050a;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
#bgmVol i:nth-child(3) {
  top: 4px;
  left: 56px;
  width: 20px;
  height: 20px;
  background: #0e050a;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
#bgmVol.off i:nth-child(2),
#bgmVol.off i:nth-child(3),
#bgmVol.small i:nth-child(3) {
  opacity: 0.4;
}

#gl_nav ul {
  float: left;
  width: 868px;
  height: 40px;
  margin: 7px 0 0 14px;
  padding: 0;
}
#gl_nav li {
  position: relative;
  float: left;
  display: block;
  height: 40px;
  margin: 0 6px 0 0;
}
#gl_nav li.new:after {
  position: absolute;
  /*top: -9px;
  left: -12px;*/
  bottom: -20px;
  left: 50%;
  margin-left: -30px;
  content: url(../img/new.png);
  -webkit-animation: 0.8s linear 0s alternate none infinite running blink;
  animation: 0.8s linear 0s alternate none infinite running blink;
}
#gl_nav li a,
#gl_nav li a img {
  display: block;
  height: 40px;
  background: url(../img/navi.png) 0 0 no-repeat;
}
#gl_nav li a img {
  opacity: 0;
  -webkit-transition: opacity 0.1s linear;
  transition: opacity 0.1s linear;
}
#gl_nav li a img:hover,
.top #gl_nav li a.top img,
.story #gl_nav li a.story img,
.character #gl_nav li a.chara img,
.system #gl_nav li a.system img,
.movie #gl_nav li a.movie img,
.special #gl_nav li a.special img,
.spec #gl_nav li a.spec img {
  opacity: 1;
}
#gl_nav li a.top {
  width: 75px;
  background-position: -5px 0
}
#gl_nav li a.top img {
  width: 75px;
  background-position: -5px bottom;
}
#gl_nav li a.story {
  width: 115px;
  background-position: -105px 0;
}
#gl_nav li a.story img {
  width: 115px;
  background-position: -105px bottom;
}
#gl_nav li a.chara {
  width: 193px;
  background-position: -235px 0;
}
#gl_nav li a.chara img {
  width: 193px;
  background-position: -235px bottom;
}
#gl_nav li a.system {
  width: 140px;
  background-position: -450px 0;
}
#gl_nav li a.system img {
  width: 140px;
  background-position: -450px bottom;
}
#gl_nav li a.movie {
  width: 125px;
  background-position: -625px 0;
}
#gl_nav li a.movie img {
  width: 125px;
  background-position: -625px bottom;
}
#gl_nav li a.special {
  width: 75px;
  background-position: -782px 0;
}
#gl_nav li a.special img {
  width: 75px;
  background-position: -782px bottom;
}
#gl_nav li a.spec {
  width: 100px;
  background-position: -985px 0;
}
#gl_nav li a.spec img {
  width: 100px;
  background-position: -985px bottom;
}
.sns_btn {
  padding: 5px 0 0;
}
#posi {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 1000;
}
header {
  min-height: 800px;
  position: relative;
  z-index: 30;
}
header h1 {
  position: absolute;
  top: 430px;
  left: 50%;
  margin-left: -448px;
  width: 290px;
  z-index: 10;
  -webkit-animation: slide-in 0.4s ease-out 0.3s both;
  animation: slide-in 0.4s ease-out 0.3s both;
}
header h1 img {
  height: auto;
}
header .release {
  position: absolute;
  top: 558px;
  left: 52%;
  width: 360px;
  margin-left: -449px;
  z-index: 10;
  -webkit-animation: slide-in 0.4s ease-out 0.3s both;
  animation: slide-in 0.4s ease-out 0.3s both;
}
header .release img {
  width: 80%;
  height: auto;
  position: absolute;
  right: -488px;
  top: -159px;


}
header .rookie {
  position: absolute;
  top: 446px;
  left: 50%;
  width: 210px;
  margin-left: 220px;
  z-index: 10;
  -webkit-animation: slide-in 0.4s ease-out 0.3s both;
  animation: slide-in 0.4s ease-out 0.3s both;
}
header .rookie img {
  width: 100%;
  height: auto;
}
header .review {
  position: absolute;
  top: 437px;
  left: 50%;
  width: 212px;
  height: 162px;
  margin-left: -2px;
  background: url(../img/btn_review.png) 0 0 no-repeat;
  z-index: 10;
  -webkit-animation: slide-in 0.4s ease-out 0.3s both;
  animation: slide-in 0.4s ease-out 0.3s both;
}
header .review img {
  width: 212px;
  height: 162px;
  background: url(../img/btn_review.png) 0 100% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.1s linear;
  transition: opacity 0.1s linear;
}
header .review:hover img {
  opacity: 1;
}
header video#headMC {
  position: relative;
  top: 70px;
  left: 50%;
  margin-left: -480px;
}
header .mv_wrap {
  position: absolute;
  top: 70px;
  left: 50%;
  margin-left: -500px;
  width: 1000px;
  height: 540px;
  background: url(../img/mv_filter.png) 46% 0 repeat-y;
  z-index: 8;
}
header #mv_loading {
  position: absolute;
  top: 70px;
  left: 50%;
  margin-left: -480px;
  width: 960px;
  height: 540px;
  background: url(../img/loading_mv.jpg) 0 0 no-repeat;
  z-index: 5;
}
.ipad header #mv_loading,
.iphone header #mv_loading,
.mobile header #mv_loading {
  display: none;
  z-index: -1;
}
header #mv_loading img {
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
}
header #mv_loading .circle {
  top: -50px;
  color: #f0cd11;
  font-size: 14px;
  text-indent: -9999em;
  width: 1em;
  height: 1em;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load4 1.5s infinite linear;
  animation: load4 1.5s infinite linear;
}
header #mv_loading .load_txt {
  top: 90px;
  -webkit-animation: fadeIn 1.5s infinite linear;
  animation: fadeIn 1.5s infinite linear;
}
.news_bg {
  position: absolute;
  top: 610px;
  left: 0;
  width: 100%;
  padding: 8px 0;
  background: url(../img/news_header.png) 0 0 repeat-x,
              url(../img/news_footer.png) 0 bottom repeat-x,
              url(../img/news_middle.png) 0 0 repeat;
  z-index: 100;
}
.news {
  position: relative;
  width: 960px;
  padding: 11px 0 14px 4px;
  margin: 0 auto;
}
#newsTgl {
  position: absolute;
  top:5px;
  right:0;
  width: 97px;
  height: 33px;
  background: url(../img/btn_open.png) no-repeat right center;
  text-indent: -4444em;
  cursor: pointer;
  overflow: hidden;
}
#newsTgl.opened {
  background: url(../img/btn_close.png) no-repeat right center;
}
.news ul {
  height: 18px;
  color: #222;
  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 86px;
}
.news li a {
  color: #f0c;
  text-decoration: underline;
}
.news li em {
  color: #f50;
  font-weight: bold;
  font-style: normal;
}
.news li a:hover {
  color: #f08;
  text-decoration: none;
}
.news .date {
  position: absolute;
  top: 0;
  left: -86px;
  display: block;
  width: 86px;

}
.banner {
  width: 963px;
  height: 40px;
  margin: 158px auto 0;
}
.banner li {
  position: relative;
  float: left;
  width: 311px;
  height: 80px;
  margin: 0 5px;
}
.banner .new:after {
  content: url(../img/new.png);
  position: absolute;
  top: -7px;
  right: -16px;
  -webkit-animation: 0.8s linear 0s alternate none infinite running blink;
  animation: 0.8s linear 0s alternate none infinite running blink;
}
.banner a {
  display: block;
  width: 311px;
  height: 99px;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.banner a img {
  display: block;
  width: 311px;
  height: 99px;
  background-position: 0 bottom;
  background-repeat: no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.16s linear;
  transition: opacity 0.16s linear;
}
.banner li.large {
  margin: 0 5px 5px;
  margin: 10px;
}
.banner li.large, .banner li.large a, .banner li.large a img {
  width: 952px;
}
.banner .tgs,
.banner .tgs img {
  background-image: url(../img/banner_tgs.png);
}
.banner .rt_campaign01,
.banner .rt_campaign01 img {
  background-image: url(../img/banner_rt_campaign01.png);
}
.banner .machiasobi,
.banner .machiasobi img {
  background-image: url(../img/banner_machiasobi.png);
}
.banner .benefits,
.banner .benefits img {
  background-image: url(../img/banner_benefits.png);
}
.banner .playable_version,
.banner .playable_version img {
  background-image: url(../img/banner_playable_version.png);
}
.banner .minigame_campaign,
.banner .minigame_campaign img {
  background-image: url(../img/banner_minigame_campaign.png);
}
.banner .minigame,
.banner .minigame img {
  background-image: url(../img/banner_minigame.png);
}
.banner .webmanual,
.banner .webmanual img {
  background-image: url(../img/web_manual.png);
}
.banner .preorder,
.banner .preorder img {
  background-image: url(../img/banner_preorder.png);
}
.banner .download,
.banner .download img {
  background-image: url(../img/banner_download.png);
}
.banner .countdown,
.banner .countdown img {
  background-image: url(../img/banner_countdown.png);
}
.banner .wallpaper,
.banner .wallpaper img {
  background-image: url(../img/banner_wallpaper.png);
}
.banner .rt_campaign02,
.banner .rt_campaign02 img {
  background-image: url(../img/banner_rt_campaign02.png);
}
.banner .yoshimoto,
.banner .yoshimoto img {
  background-image: url(../img/banner_yoshimoto.png);
}
.banner .trial,
.banner .trial img {
  background-image: url(../img/banner_trial.png);
}
.banner a img:hover {
  opacity: 1;
}

/***********************************
  コンテンツ
***********************************/
.wrap {
  position: relative;
  z-index: 10;
  height: 1129px;
}
article {
  position: relative;
  width: 964px;
  height: 659px;
  margin: 0 auto;
  z-index: 20;
}
article .sub_nav {
  float: left;
  width: 261px;
  height: 659px;
  background: url(../img/sub_navi_frame.png) 0 0 no-repeat;
}
article .sub_nav ul {
  padding: 26px 25px 0 22px;
}
article .sub_nav li {
  position: relative;
  margin: 0 0 3px;
}
article .sub_nav li.new:after {
  position: absolute;
  top: -9px;
  content: url(../img/new.png);
  -webkit-animation: 0.8s linear 0s alternate none infinite running blink;
  animation: 0.8s linear 0s alternate none infinite running blink;
}
article .sub_nav li a {
  display: inline-block;
  height: 40px;
  background-position: 0 0;
  background-repeat: no-repeat;
}


article .sub_nav li a img {
  display: inline-block;
  opacity: 0;
  -webkit-transition: opacity 0.1s linear;
  transition: opacity 0.1s linear;
  background-position: 0 bottom;
  background-repeat: no-repeat;
}
article .sub_nav li a:hover img,
article.page1 .sub_nav li:nth-of-type(1) img,
article.page2 .sub_nav li:nth-of-type(2) img,
article.page3 .sub_nav li:nth-of-type(3) img,
article.page4 .sub_nav li:nth-of-type(4) img,
article.page5 .sub_nav li:nth-of-type(5) img,
article.page6 .sub_nav li:nth-of-type(6) img,
article.page7 .sub_nav li:nth-of-type(7) img {
  opacity: 1;
}
article .frame {
  float: right;
  width: 693px;
  padding: 25px 21px 0 14px;
  height: 659px;
  background: url(../img/frame.png) 0 0 no-repeat;
}
article .frame .main {
  position: relative;
  width: 658px;
  padding: 0 6px 0 12px;
  height: 604px;
  overflow: hidden;
}
article h2 {
  position: absolute;
  top: -142px;
  left: 92px;
  opacity: 0;
  top: 20px;
  -webkit-transition: top 0.3s ease-out, opacity 0s ease-out 0.4s;
  transition: top 0.3s ease-out, opacity 0s ease-out 0.4s;
}
.story #story article h2,
.character #character article h2,
.system #system article h2,
.movie #movie article h2,
.special #special article h2,
.spec #spec article h2 {
  top: -142px;
  opacity: 1;
  -webkit-transition: top 0.3s ease-out 0.7s, opacity 0s ease-out 0.6s;
  transition: top 0.3s ease-out 0.7s, opacity 0s ease-out 0.6s;
}
article h2 .balloon {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transform-origin: 70% bottom;
  -ms-transform-origin: 70% bottom;
  transform-origin: 70% bottom;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
article h2 .sebastian {
  position: relative;
  top: 39px;
  left: 180px;
  background: url(../img/gimmick/sebastian/sebastian.png) 0 0 no-repeat;
}
.story #story article h2 .balloon,
.character #character article h2 .balloon,
.system #system article h2 .balloon,
.movie #movie article h2 .balloon,
.special #special article h2 .balloon,
.spec #spec article h2 .balloon {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.3s ease-out 1s;
  transition: all 0.3s ease-out 1s;
}
article .sub_nav,
article .frame {
  position: relative;
  left: 30px;
  opacity: 0;
  -webkit-transition: all 0.4s ease-out 0.6s;
  transition: all 0.4s ease-out 0.6s;
}
article.show .frame {
  opacity: 1;
  left: 0;
  -webkit-transition: all 0.4s ease-out 0.2s;
  transition: all 0.4s ease-out 0.2s;
}
article.show .sub_nav {
  opacity: 1;
  left: 0;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
article .frame > .main > section {
  position: absolute;
  top: 0px;
  width: 640px;
  height: 604px;
  display: none;
  overflow: hidden;
}
article .frame > .main > section[class*="pg"] {
  height: 567px;
  margin: 0 0 40px;
}
article.page1 .frame > .main > section:nth-of-type(1),
article.page2 .frame > .main > section:nth-of-type(2),
article.page3 .frame > .main > section:nth-of-type(3),
article.page4 .frame > .main > section:nth-of-type(4),
article.page5 .frame > .main > section:nth-of-type(5),
article.page6 .frame > .main > section:nth-of-type(6),
article.page7 .frame > .main > section:nth-of-type(7) {
  display: block;
}
article .frame p {
  margin-bottom: 12px;
}
.frame section h3 {
  padding: 0 6px 10px 0;
  text-align: center;
}
.paging_wrap {
  min-height: 604px;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
.pg-0 .paging_wrap {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
.pg-1 .paging_wrap {
  -webkit-transform: translate3d(0,-604px,0);
  transform: translate3d(0,-604px,0);
}
.pg-2 .paging_wrap {
  -webkit-transform: translate3d(0,-1208px,0);
  transform: translate3d(0,-1208px,0);
}
.pg-3 .paging_wrap {
  -webkit-transform: translate3d(0,-1812px,0);
  transform: translate3d(0,-1812px,0);
}
.pg-4 .paging_wrap {
  -webkit-transform: translate3d(0,-2416px,0);
  transform: translate3d(0,-2416px,0);
}
.pg-5 .paging_wrap {
  -webkit-transform: translate3d(0,-3020px,0);
  transform: translate3d(0,-3020px,0);
}
.frame section .paging_wrap h3 {
  padding: 0 6px 10px 0;
  text-align: center;
}
.paging_wrap .paging_box {
  height: 604px;
}
.paging_nav {
  position: absolute;
  bottom: 2px;
  left: 15px;
  width: 628px;
  height: 33px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
.paging_nav button {
  position: absolute;
  top: 0;
  display: block;
  width: 120px;
  height: 33px;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.paging_nav button img {
  display: block;
  width: 120px;
  height: 33px;
  opacity: 0;
}
.paging_nav .prev,
.paging_nav .prev img {
  left: 0;
  background-image: url(../img/btn_prev.png);
}
.paging_nav .next,
.paging_nav .next img {
  right: 0;
  background-image: url(../img/btn_next.png);
}
.paging_nav button img {
  background-position: 0 bottom;
  background-repeat: no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.1s linear;
  transition: opacity 0.1s linear;
}
.paging_nav button:hover img {
  opacity: 1;
}
a.pop:hover {
  opacity: 0.75;
}
.right_img {
  position: relative;
  z-index: 3;
  float: right;
  margin: 0 10px 12px 0;
}
.screenshots {
  overflow: hidden;
  margin: 0 0 0 -3px;
}
.screenshots li {
  float: left;
  width: 300px;
  margin: 0 10px 10px;
}
#p_kingdom .screenshots li {
  margin: 0 10px;
}
.screenshots li p {
  margin: 0 4px;
}
/***********************************
  ストーリー
***********************************/
#story.wrap {
  height: 1550px;
  margin: 0 0 660px;
  background: url(../img/story_bg.png) center 80px no-repeat;
  opacity: 0;
  clear: both;
  -webkit-transform: translate3d(0,-120px,0);
  transform: translate3d(0,-120px,0);
  -webkit-transition: opacity 0.25s linear;
  transition: opacity 0.25s linear;
}
#story article {
  top: 390px;
}
#story article .sub_nav ul {
  padding: 26px 25px 0 30px;
}
.sub_nav ul li a.navi_world,
.sub_nav ul li a.navi_world img {
  background-image: url(../img/story/sub_navi_world.png);
}
.world_txt {
  text-align: center;
}
.world_scsho {
  overflow: hidden;
  margin: 0 34px;
}
.world_scsho li {
  float: left;
  width: 50%;
  text-align: center;
}
/***********************************
キャラクター
***********************************/
#character.wrap {
  position: absolute;
  top: 2000px;
  left: 0;
  width: 100%;
  height: 3100px;
  overflow: hidden;
  z-index: 13;
}
.edge #character.wrap,
.gecko #character.wrap {
  margin: 600px 0 0;
  height: 2600px;
}
#character article .frame .main {
  overflow: visible;
}
#character .wrap_inner {
  position: absolute;
  top: 0%;
  right: 0;
  width: 100%;
  height: 3200px;
  overflow: hidden;
}
html:not(.gecko):not(.edge) #character .wrap_inner {
  -webkit-transform-origin:100% 0;
  -ms-transform-origin:100% 0;
  transform-origin:100% 0;
  -webkit-transform: skewY(-30deg);
  -ms-transform: skewY(-30deg);
  transform: skewY(-30deg);
  overflow: hidden;
}
#character .wrap_img {
  position: relative;
  height: 3700px;
  background: url(../img/character_bg.png) center 0 no-repeat fixed;
  z-index: 15;
}
html:not(.gecko):not(.edge) #character .wrap_img {
  -webkit-transform-origin:100% 0;
  -ms-transform-origin:100% 0;
  transform-origin:100% 0;
  -webkit-transform: skewY(30deg);
  -ms-transform: skewY(30deg);
  transform: skewY(30deg);
}
#character article {
  top: 934px;
}
.edge #character article,
.gecko #character article {
  top: 534px !important;
}
#character article .sub_nav ul {
  padding: 26px 25px 0 30px;
}
.sub_nav ul li a.navi_comingsoon,
.sub_nav ul li a.navi_comingsoon img {
  background-image: url(../img/character/cs_title.png);
}
.sub_nav ul li a.navi_princess,
.sub_nav ul li a.navi_princess img {
  background-image: url(../img/character/sub_navi_princess.png);
}
.sub_nav ul li a.navi_sebastian,
.sub_nav ul li a.navi_sebastian img {
  background-image: url(../img/character/sub_navi_sebastian.png);
}
.sub_nav ul li a.navi_izabella,
.sub_nav ul li a.navi_izabella img {
  background-image: url(../img/character/sub_navi_izabella.png);
}
.sub_nav ul li a.navi_zenigami,
.sub_nav ul li a.navi_zenigami img {
  background-image: url(../img/character/sub_navi_zenigami.png);
}
.sub_nav ul li a.navi_doragoron,
.sub_nav ul li a.navi_doragoron img {
  background-image: url(../img/character/sub_navi_doragoron.png);
}
#character article .sub_nav li.new:nth-child(3):after {
  left: 106px;
}
#character article .sub_nav li.new:nth-child(4):after {
  left: 50px;
}
#character article .sub_nav li.new:nth-child(5):after {
  left: 175px;
}
#character .frame .chara_img {
  float: right;
  margin: 10px 33px 0 0;
}
#character .frame #p_sebastian .chara_img {
  margin: 25px 33px 0 0;
}
#character .frame .chara_txt {
  margin: 0 0 17px 2px;
}
#character .frame .scsho {
  width: 301px;
  margin: 0 0 0 5px;
}
.princess_motion {
  position: absolute;
  top: 335px;
  left: 295px;
  width: 300px;
  height: 300px;
}
.princess_motion #stand_mt {
  position: absolute;
  top: 4px;
  left: 52px;
  width: 72px;
  height: 88px;
}
.princess_motion #stand_mt img {
  width: 72px;
  height: 88px;
  background: url(../img/gimmick/princess/princess_stand.png) 0 0 no-repeat;
}
.princess_motion #run_mt {
  position: absolute;
  top: 0;
  left: 148px;
  width: 76px;
  height: 94px;
}
.princess_motion #run_mt img {
  width: 76px;
  height: 94px;
  background: url(../img/gimmick/princess/princess_run.png) 0 0 no-repeat;
}
.princess_motion #calc_mt {
  position: absolute;
  top: 5px;
  left: 256px;
  width: 64px;
  height: 84px;
}
.princess_motion #calc_mt img {
  width: 64px;
  height: 84px;
  background: url(../img/gimmick/princess/princess_calc.png) 0 0 no-repeat;
}
.princess_motion #punch_mt {
  position: absolute;
  top: 106px;
  left: 10px;
  width: 116px;
  height: 136px;
}
.princess_motion #punch_mt img {
  width: 116px;
  height: 136px;
  background: url(../img/gimmick/princess/princess_punch.png) 0 0 no-repeat;
}
.princess_motion #rolling_mt {
  position: absolute;
  top: 112px;
  left: 152px;
  width: 76px;
  height: 84px;
}
.princess_motion #rolling_mt img {
  width: 76px;
  height: 84px;
  background: url(../img/gimmick/princess/princess_rolling.png) 0 0 no-repeat;
}
.princess_motion #combo_mt {
  position: absolute;
  top: 100px;
  left: 190px;
  width: 140px;
  height: 160px;
}
.princess_motion #combo_mt img {
  width: 140px;
  height: 160px;
  background: url(../img/gimmick/princess/princess_combo.png) 0 0 no-repeat;
}
#p_izabella {
  overflow: visible;
}
.isabella_motion {
  position: absolute;
  top: 335px;
  left: 295px;
  width: 300px;
  height: 300px;
}
.isabella_motion #stand_mt {
  position: absolute;
  top: 4px;
  left: 30px;
  width: 78px;
  height: 78px;
}
.isabella_motion #stand_mt img {
  width: 78px;
  height: 78px;
  background: url(../img/gimmick/izabella/izabella_stand.png) 0 0 no-repeat;
}
.isabella_motion #run_mt {
  position: absolute;
  top: 0;
  left: 128px;
  width: 90px;
  height: 82px;
}
.isabella_motion #run_mt img {
  width: 90px;
  height: 82px;
  background: url(../img/gimmick/izabella/izabella_run.png) 0 0 no-repeat;
}
.isabella_motion #dive_mt {
  position: absolute;
  top: 5px;
  left: 236px;
  width: 92px;
  height: 72px;
}
.isabella_motion #dive_mt img {
  width: 92px;
  height: 72px;
  background: url(../img/gimmick/izabella/izabella_dive.png) 0 0 no-repeat;
}
.isabella_motion #purge_mt {
  position: absolute;
  top: 60px;
  left: 92px;
  width: 250px;
  height: 268px;
}
.isabella_motion #purge_mt img {
  width: 250px;
  height: 268px;
  background: url(../img/gimmick/izabella/izabella_purge.png) 0 0 no-repeat;
}
#p_doragoron {
  overflow: visible;
}
#character .frame #p_doragoron .chara_img {
  position: absolute;
  top: 50px;
  right: -60px;
}
/***********************************
システム
***********************************/
#system.wrap {
  position: relative;
  top: 500px;
  width: 100%;
  height: 1350px;
  margin-bottom: 550px;
  background: url(../img/system_bg.png) center 0 no-repeat;
  z-index: 16;
}
#system article {
  top: 335px;
}
.sub_nav ul li a.navi_summary,
.sub_nav ul li a.navi_summary img {
  background-image: url(../img/system/sub_navi_summary.png);
}
.sub_nav ul li a.navi_story,
.sub_nav ul li a.navi_story img {
  background-image: url(../img/system/sub_navi_story.png);
}
.sub_nav ul li a.navi_base,
.sub_nav ul li a.navi_base img {
  background-image: url(../img/system/sub_navi_base.png);
}
.sub_nav ul li a.navi_calc,
.sub_nav ul li a.navi_calc img {
  background-image: url(../img/system/sub_navi_calculator.png);
}

.sub_nav ul li a.navi_buy,
.sub_nav ul li a.navi_buy img {
  background-image: url(../img/system/sub_navi_buy.png);
}
.sub_nav ul li a.navi_money,
.sub_nav ul li a.navi_money img {
  background-image: url(../img/system/sub_navi_money.png);
}
.sub_nav ul li a.navi_kingdom,
.sub_nav ul li a.navi_kingdom img {
  background-image: url(../img/system/sub_navi_kingdom.png);
}
#system article .sub_nav li.new:nth-child(1):after {
  left: 136px;
}
#system article .sub_nav li.new:nth-child(2):after {
  left: 52px;
}
#system article .sub_nav li.new:nth-child(3):after {
  left: 186px;
}
#system article .sub_nav li.new:nth-child(4):after {
  left: 186px;
}
#system article .sub_nav li.new:nth-child(5):after {
  left: 168px;
}
#system article .sub_nav li.new:nth-child(6):after {
  left: 84px;
}
#system article .sub_nav li.new:nth-child(7):after {
  left: 190px;
}
#system .frame section {
  width: 640px;
  margin: 0 auto;
}
article .frame p.calc_txt05 {
  width: 320px;
}
#system #p_calc {
  height: 600px;
}
.pop_mv {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.pop_mv li {
  position: relative;
  display: block;
  width: 302px;
  height: 177px;
  padding: 5px 5px;
  margin: 0 8px 10px;
  background: url(../img/system/movie_bg.png) 0 0 no-repeat;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
div.pop_mv {
  position: relative;
}
.pop_mv li video,
div.pop_mv video {
  width: 289px;
  height: 163px;
  background: url(../img/loading.gif) 50% 50% no-repeat;
  display: none;
}
.pop_mv li a:after,
div.pop_mv a:after {
  content: url(../img/movie/movie_on.png);
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 288px;
  height: 162px;
  opacity: 0;
}
.pop_mv li a:hover:after,
div.pop_mv a:hover:after {
  opacity: 1;
}
#inline_content video {
  background: url(../img/loading.gif) 50% 50% no-repeat;
}
div.pop_mv {
  width: 302px;
  height: 177px;
  padding: 5px 5px;
  margin: 0 auto;
  background: url(../img/system/movie_bg.png) 0 0 no-repeat;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#system .page1 #p_summary video {
  display: block;
}
#p_base.pg-1 .pri_movie video {
  display: block;
}
#p_base.pg-2 .isa_movie video {
  display: block;
}
#system .page4 #p_calc video {
  display: block;
}
#system section figure {
  text-align: center;
  margin: 0;
}
#system .page3 .paging_nav,
#system .page5 .paging_nav,
#system .page6 .paging_nav,
#system .page7 .paging_nav {
  visibility: visible;
  opacity: 1;
}
.page3 #p_base.pg-0 ~ .paging_nav .prev,
.page3 #p_base.pg-3 ~ .paging_nav .next,
.page5 #p_buy.pg-0 ~ .paging_nav .prev,
.page5 #p_buy.pg-1 ~ .paging_nav .next,
.page6 #p_money.pg-0 ~ .paging_nav .prev,
.page6 #p_money.pg-1 ~ .paging_nav .next,
.page7 #p_kingdom.pg-0 ~ .paging_nav .prev,
.page7 #p_kingdom.pg-4 ~ .paging_nav .next {
  visibility: hidden;
}

/***********************************
ムービー
***********************************/
#movie.wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 1200px;
  background: url(../img/movie_bg.png) center -70px no-repeat;
  z-index: 6;
}
#movie article {
  top: 232px;
  -webkit-transition: opaciry 0.5s linear 0.3s;
  -webkit-transition: opaciry 0.5s linear 0.2s;
  transition: opaciry 0.5s linear 0.2s;
}
#movie article.show {
  opacity: 1;
}
#movie article .frame {
  left: 0px;
  float: none;
  width: 967px;
  height: 659px;
  padding: 30px 21px 0 25px;
  background: url(../img/large_frame.png) 0 0 no-repeat;
  -webkit-transform: translate3d(0,30px,0);
  transform: translate3d(0,30px,0);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#movie article.show .frame {
  -webkit-transform: translate3d(0,0px,0);
  transform: translate3d(0,0px,0);
}
.mv_list li {
  position: relative;
  float: left;
  width: 292px;
  margin: 0 7px 20px;
}
.mv_list li.new:after {
  content: url(../img/new.png);
  position: absolute;
  top: -9px;
  right: -25px;
  -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 2px;
  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;
}

/***********************************
スペシャル
***********************************/
.limited_ed{
  position: absolute;
  top: 190px;
  left: 64px;
}

.order_btn{
    border: 2px solid #000;
    width: 246px;
    height: 72px;
    background-color: rgba(255,255,255,.5);
    padding: 5px;
    margin: 2px;

    position: absolute;
}

.order_btn:hover{
  background-color: rgba(255,243,67,.7);
}

.btn_nisa{
    top: 407px;
    left: 86px;
}

.btn_amazon{
    top: 125px;
    left: 552px;
}

.btn_gamestop{
    top: 203px;
  left: 552px;
}

.btn_eshop{
  top: 343px;
  left: 552px;
}

.btn_ps{
  top: 421px;
  left: 552px;
}

#special.wrap {
  top: 0px;
  left: 0;
  height: 1200px;
  z-index: 4;
}
.special_bg {
  width: 0%;
  height: 1200px;
  margin: 0 auto;
  background: url(../img/special_bg.png) center 0px no-repeat;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: all 0.9s ease-in;
  transition: all 0.9s ease-in;
}
.special_bg.show {
  opacity: 1;
  width: 100%;
}
#special .special_bg article {
  top: 330px;
  opacity: 0;
  -webkit-transition: opacity 0.4s linear 0s;
  transition: opacity 0.4s linear 0s;
}
#special .special_bg.show article {
  opacity: 1;
  -webkit-transition: opacity 0.4s linear 0.9s;
  transition: opacity 0.4s linear 0.9s;
}
.sub_nav ul li a.navi_cast01,
.sub_nav ul li a.navi_cast01 img {
  background-image: url(../img/special/sub_navi_cast.png);
}
.sub_nav ul li a.navi_benefits,
.sub_nav ul li a.navi_benefits img {
  background-image: url(../img/special/sub_navi_benefits.png);
}
#special article .sub_nav li.new:nth-child(2):after {
  left: 158px;
}
.sub_nav ul li a.navi_benefits img {
  background-position: 0 -40px;
}
.cast01_pic {
  float: right;
  width: 224px;
  margin: 0 18px 0 0;
}
.cast01_txt02 {
  width: 390px;
}
#special .page1 .paging_nav {
  visibility: visible;
  opacity: 1;
}
.page1 #p_cast01.pg-0 ~ .paging_nav .prev,
.page1 #p_cast01.pg-1 ~ .paging_nav .next {
  visibility: hidden;
}


#special article .frame {
  left: 0px;
  float: none;
  width: 967px;
  height: 530px;
  background: url(../img/med_frame2.png) 0 0 no-repeat;
  -webkit-transform: translate3d(0,30px,0);
  transform: translate3d(0,30px,0);
}


.special #special article h2{
  top: -105px;
}

/***********************************
スペック
***********************************/
#spec.wrap {
  height: 929px;
  top: -75px;
}
#spec article {
  top: 207px;
}
#spec article .frame {
  left: 0px;
  float: none;
  width: 967px;
  height: 659px;
  background: url(../img/large_frame.png) 0 0 no-repeat;
  -webkit-transform: translate3d(0,30px,0);
  transform: translate3d(0,30px,0);
}
#spec article.show .frame {
  -webkit-transform: translate3d(0,0px,0);
  transform: translate3d(0,0px,0);
}
.spec_txt {
  position: absolute;
  top: 125px;
  left: 32px;
}
.package_img {
  position: absolute;
  top: 107px;
  right: 50px;
}

/***********************************
フッター
***********************************/
#pagetop {
  position: fixed;
  right: auto;
  left: 50%;
  margin-left: 490px;
  bottom: -1000px;
  width: 118px;
  height: 150px;
  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;
}
#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: 225px;
  background: url(../img/footer_bg.png) 0 0 repeat-x #fce700;
}
.logo_img{
  vertical-align: middle;
  margin-left: 10px;
}
.logo_img_psv{
  vertical-align: middle;
  margin-left: 15px;
}

footer {
  width: 940px;
  padding: 27px 0 0;
  margin: 0 auto;
}
footer .btns {
  height: 128px;
  float: right;
  line-height: 0;
  margin: auto;
}
footer .btns li {
  float: left;
  margin-left: 7px;

}
footer .btns a {
  display: block;
  ///background: #fff;
}
footer .btns 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: 33px;
  background: url(../img/footer_navi_slash.png) 94% 0 no-repeat;
}
footer .sns a {
  display: block;
  height: 24px;
}
footer .sns .blog,
footer .sns .blog a {
  width: 139px;
}
footer .sns .blog a {
  background: url(../img/footer_navi_blog.png) 0 0 no-repeat;
}
footer .sns .blog a:hover {
  background-position: 0 -24px;
}
footer .sns .twitter,
footer .sns .twitter a {
  width: 167px;
  height: 20px;
}
footer .sns .twitter a {
  background: url(../img/footer_navi_twitter.png) 0 0px no-repeat;
}
footer .sns .twitter a:hover {
  background-position: 0 -20px;
}
footer .sns .facebook,
footer .sns .facebook a {
  width: 202px;
  height: 20px;
}
footer .sns .facebook a {
  background: url(../img/footer_navi_facebook.png) 0 0 no-repeat;
}
footer .sns .facebook a:hover {
  background-position: 0 -20px;
}
.copy {
  clear: both;
  text-align: center;
  line-height: 1.3;
  font-size: 11rem;
}
#countdown {
  display: block;
  width: 100%;
  max-width: 748px;
  height: auto;
  margin: 0 auto;
}
/* =============================================================================
フロートさせたコンテンツの高さを親要素が認識しないバグを修正　Clearfix
========================================================================== */

/* For modern browsers */
.cf:before, .cf:after {
  content: "";
  display: table;
}

.cf:after { clear: both; }

/* For IE 6/7 (trigger hasLayout) */
.cf { zoom: 1; }

* html .cf { height: 1px;/*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}