@charset "utf-8";

body:not(#top) {
  min-height: 800px;
  padding-bottom: 400px;
  background: #57d1e9 url(../img/bg.png) 50% 50% no-repeat fixed;
  font: 10rem/1 "メイリオ", Meiryo, "ＭＳ ゴシック", "MS Gothic", sans-serif;
  color: #110101;
  overflow: hidden;
}
body:not(#top) #contents {
  padding: 140px 0 0;
  width: 965px;
  min-height: 600px;
  margin: 0 auto 50px;
  /*-webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;*/
  position: relative;
  z-index: 7;
}
#contents.pageMovingIn {
  -webkit-animation: fadeIn 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  animation: fadeIn 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents.pageMovingOut {
  -webkit-animation: fadeOut 0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  animation: fadeOut 0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
#contents .frame {
  position: relative;
  width: 965px;
  padding: 77px 0 0;
  background: url(../img/frame_header.png) 0 0 no-repeat;
  z-index: 7;
}
#contents.pageMovingIn .frame {
  -webkit-animation: pageMovingIn 0.5s linear;
  animation: pageMovingIn 0.5s linear;
}
#contents.pageMovingOut .frame {
  -webkit-animation: pageMovingOut 0.5s linear;
  animation: pageMovingOut 0.5s linear;
}
#special #contents.pageMovingIn .frame {
  -webkit-animation: pageMovingIn2 0.5s linear;
  animation: pageMovingIn2 0.5s linear;
}
#special #contents.pageMovingOut .frame {
  -webkit-animation: pageMovingOut2 0.5s linear;
  animation: pageMovingOut2 0.5s linear;
}
#contents .frame .inner {
  background: url(../img/frame_middle.png) 0 0 repeat-y;
}
#contents .frame:after {
  content: url(../img/frame_footer.png);
  top: 100%;
  left: 0;
}
#contents main {
  position: relative;
  top: -50px;
  left: 243px;
  width: 712px;
  min-height: 535px;
  margin: 0 0 -220px;
}
#contents article {
  display: none;
}
#subNav {
  position: absolute;
  top: 26px;
  left: 28px;
  width: 215px;
}
#subNav li {
  position: relative;
  width: 215px;
  height: 32px;
  padding: 5px 0 8px 1px;
  background: url(../img/sub_navi_line.png) 0 100% no-repeat;
}
#subNav li.third {
  width: 195px;
  height: 28px;
  padding: 5px 0 0 14px;
  background: none;
}
#subNav li.third.t_first {
  padding: 9px 0 0 14px;
}
#subNav li.third.t_last {
  padding: 5px 0 3px 14px;
}
#subNav li a {
  position: relative;
  display: block;
  width: 215px;
  height: 32px;
  background: 0 0 no-repeat;
  cursor: pointer;
  -webkit-transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#subNav li a:before {
  content: url(../img/sub_navi_box.png);
  position: absolute;
  top: 0;
  left: 2px;
  display: block;
  width: 25px;
  height: 29px;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale3d(0,0,0);
  transform: scale3d(0,0,0);
  -webkit-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#subNav li a:before {
  content: url(../img/sub_navi_box.png);
  position: absolute;
  top: 0;
  left: 2px;
  display: block;
  width: 25px;
  height: 29px;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale3d(0,0,0);
  transform: scale3d(0,0,0);
  -webkit-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#subNav li.third a:before {
  top: -1px;
  left: -8px;
}
#subNav li.new a:after {
  content: url(../img/new.png);
  position: absolute;
  top: -6px;
  right: 4px;
  display: block;
  width: 55px;
  height: 21px;
  -webkit-animation: blink 2.5s ease-in-out infinite;
  animation: blink 2.5s ease-in-out infinite;
  z-index: 100;
}
#subNav li a img {
  display: block;
  width: 215px;
  height: 32px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
#subNav li.third a,
#subNav li.third a img {
  width: 195px;
  height: 28px;
}
#subNav li a.open {
  padding: 0 0 0 30px;
  background-position: 30px 0;
}
#subNav li.third a.open {
  padding: 0 0 0 4px;
  background-position: 4px 0;
}
#subNav li a.open:before {
  -webkit-transform: scale3d(1,1,1);
  transform: scale3d(1,1,1);
}
#subNav li.third a.open:before {
  -webkit-transform: scale3d(0.8,0.8,0.8);
  transform: scale3d(0.8,0.8,0.8);
}
#subNav li a:hover img,
#subNav li a.open img,
#subNav li a.clicked img {
  opacity: 1;
}
.pop_images {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0 4px 0 0;
}
a.pop.txt {
  display: block;
  margin: 0 0 2px;
}
a.pop img {
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
a.pop:hover img {
  opacity: 0.75;
}
.mb1em {
  margin-bottom: 1em !important;
}
.mb1_half {
  margin-bottom: 1.5em !important;
}
.mb2 {
  margin-bottom: 2em !important;
}
/*.pop_images.arrow li,
.pop_images.arrowZ li {
position: relative;
}
.pop_images.arrow li:not(:last-child):after {
content: url(../img/system/arrow01.png);
position: absolute;
top: -webkit-calc(50% - 23px);
top: calc(50% - 23px);
left: 88.5%;
width: 44px;
height: 50px;
z-index: 10;
}*/
.fl_right {
  float: right;
}

/* ストーリー */
#subNav a.summary,
#subNav a.summary img {
  background-image: url(../img/story/sub_navi_summary.png);
}
#subNav a.world,
#subNav a.world img {
  background-image: url(../img/story/sub_navi_world.png);
}
#story #contents.summary #summary,
#story #contents.world #world {
  display: block;
}
#story #contents main {
  top: -35px;
}
#summary {
  width: 690px;
  height: 439px;
  padding: 42px 0; 
  background: url(../img/story/summary_img01.png) 10px 0 no-repeat;
  text-align: center;
}
#summary .txt01 {
  -webkit-animation: fadeOut 1s linear both;
  animation: fadeOut 1s linear both;
}
#contents.summary #summary .txt01 {
  -webkit-animation: fadeIn 1.3s linear 0.4s both;
  animation: fadeIn 1.3s linear 0.4s both;
}
#world {
  padding: 0 15px;
}
#world .pop_images li {
  -webkit-animation: slideFadeInBottom 0.4s linear 0.5s both;
  animation: slideFadeInBottom 0.4s linear 0.5s both;
}
#world .pop_images li:nth-child(2) {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
#world .pop_images li:nth-child(3) {
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
}

/* キャラクター */
#character #subNav {
  position: absolute;
  top: 26px;
  left: 28px;
  width: 340px;
  height: 153px;
  z-index: 10;
}
#character #subNav li {
  width: 152px;
  height: 153px;
  padding: 0 16px 0 0;
  background: none;
  float: left;
}
#character #subNav li a,
#character #subNav li a img {
  display: block;
  width: 152px;
  height: 153px;
}
#character #subNav li a:before {
  content: "";
  display: none;
}
#character #subNav li a.open {
  padding: 0;
  background-position: 0 0;
}
#subNav a.meme,
#subNav a.meme img {
  background-image: url(../img/character/sub_navi_meme.png);
}
#subNav a.sub_character,
#subNav a.sub_character img {
  background-image: url(../img/character/sub_navi_sub_character.png);
}
#character #contents.meme #meme,
#character #contents.sub_character #sub_character {
  display: block;
}
#character #contents main {
  position: relative;
  left: 25px;
  width: 910px;
  margin: 0 0 -220px;
}
#meme h2,
#sub_character h2 {
  padding: 170px 0 15px 44px;
}
#meme p,
#sub_character p {
  margin: 0 0 21px 45px;
}
#meme figure {
  position: absolute;
  top: 20px;
  right: 32px;
}
#meme figure > img,
#sub_character figure > img {
  float: right;
}
#meme figucaption {
  position: relative;
  top: -20px;
  left: 50px;
}
#meme figucaption img {
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-animation: zoomOut 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
  animation: zoomOut 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
}
#contents.meme #meme figucaption img {
  -webkit-animation: zoomIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.0s both;
  animation: zoomIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.0s both;
}
#meme .pop_images {
  margin: 0 10px;
}
#sub_character section {
  position: relative;
}
#sub_character figure {
  position: absolute;
  top: 116px;
  right: 0px;
}
#sub_character figucaption {
  position: relative;
  top: -116px;
  left: 50px;
}
#sub_character section#tommy_and_daniel {
  margin: 0 0 96px;
}
#sub_character section#fang {
  margin: 0 0 78px;
}
#sub_character #fang figure {
  top: 92px;
  right: 76px;
}
#sub_character #fang figucaption {
  top: -92px;
  left: -6px;
}
#sub_character section#nemurenu {
  margin: 0 0 72px;
}
#sub_character #nemurenu figure {
  top: 140px;
  right: 40px;
}
#sub_character #nemurenu figucaption {
  top: -148px;
  left: 22px;
}
#sub_character #nemurenu figure {
  top: 140px;
  right: 40px;
}
#sub_character #nemurenu figucaption {
  top: -148px;
  left: 22px;
}
#sub_character #buccaneers_company figure {
  top: 140px;
  right: 10px;
}
#sub_character #buccaneers_company figucaption {
  top: -144px;
  left: 46px;
}
#sub_character #nitro figure {
  top: 74px;
  right: 90px;
}
#sub_character #nitro figucaption {
  top: -68px;
  left: 18px;
}
#sub_character #moca figure {
  top: 140px;
  right: 80px;
}
#sub_character #moca figucaption {
  top: -140px;
  left: 8px;
}
#sub_character #chardone figure {
  top: 96px;
  right: 88px;
}
#sub_character #chardone figucaption {
  top: -92px;
  left: 14px;
}
#sub_character figucaption img {
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-animation: zoomOut 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
  animation: zoomOut 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
}
#contents.sub_character #sub_character figucaption img {
  -webkit-animation: zoomIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.0s both;
  animation: zoomIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.0s both;
}
#contents.sub_character #sub_character section:nth-child(2) figucaption img {
  -webkit-animation-delay: 1.15s;
  animation-delay: 1.15s;
}
#contents.sub_character #sub_character section:nth-child(3) figucaption img {
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
}
#contents.sub_character #sub_character section:nth-child(4) figucaption img {
  -webkit-animation-delay: 1.45s;
  animation-delay: 1.45s;
}
#sub_character .img_center,
.request_box .img_center {
  width: 435px;
  margin: 0 auto 30px;
}
#character section.new:before {
  position: absolute;
  top: 146px;
  left: 40px;
  display: block;
  content: url(../img/new.png);
  -webkit-animation: blink 2.5s ease-in-out infinite;
  animation: blink 2.5s ease-in-out infinite;
}

/* システム */
#subNav a.battle_system,
#subNav a.battle_system img {
  background-image: url(../img/system/sub_navi_battle_system.png);
}
#subNav a.battle_basics,
#subNav a.battle_basics img {
  background-image: url(../img/system/sub_sub_navi_battle.png);
}
#subNav a.jobs,
#subNav a.jobs img {
  background-image: url(../img/system/sub_sub_navi_job.png);
}
#subNav a.skill,
#subNav a.skill img {
  background-image: url(../img/system/sub_sub_navi_skill.png);
}
#subNav a.craft_system,
#subNav a.craft_system img {
  width: 225px;
  background-image: url(../img/system/sub_navi_craft_system.png);
}
#subNav a.base,
#subNav a.base img {
  background-image: url(../img/system/sub_sub_navi_base.png);
}
#subNav a.strengthen,
#subNav a.strengthen img {
  background-image: url(../img/system/sub_sub_navi_strengthen.png);
}
#subNav a.company,
#subNav a.company img {
  width: 225px;
  background-image: url(../img/system/sub_navi_company.png);
}
#subNav a.character_edit,
#subNav a.character_edit img {
  background-image: url(../img/system/sub_navi_character_edit.png);
}
#subNav a.world_wide_whale,
#subNav a.world_wide_whale img {
  width: 203px !important;
  background-image: url(../img/system/sub_sub_navi_world_wide_whale.png);
}
#subNav a.island,
#subNav a.island img {
  background-image: url(../img/system/sub_sub_navi_island.png);
}
#subNav a.request,
#subNav a.request img {
  background-image: url(../img/system/sub_sub_navi_request.png);
}
#subNav li.new a.battle_basics:after {
  right: 10px;
}
#subNav li.new a.jobs:after {
  right: 54px;
}
#subNav li.new a.skill:after {
  right: 54px;
}
#subNav li.new a.base:after {
  right: -10px;
}
#subNav li.new a.strengthen:after {
  right: 12px;
}
#subNav li.new a.world_wide_whale:after {
  right: -4px;
}
#subNav li.new a.island:after {
  right: 6px;
}
#subNav li.new a.request:after {
  right: 80px;
}
#subNav li.new a.character_edit:after {
  right: -10px;
}
#system #contents.battle_system #battle_system,
#system #contents.battle_basics #battle_basics,
#system #contents.jobs #jobs,
#system #contents.skill #skill,
#system #contents.craft_system #craft_system,
#system #contents.base #base,
#system #contents.strengthen #strengthen,
#system #contents.company #company,
#system #contents.world_wide_whale #world_wide_whale,
#system #contents.island #island,
#system #contents.request #request,
#system #contents.character_edit #character_edit {
  display: block;
}
#battle_system,
#battle_basics,
#jobs,
#skill,
#base,
#strengthen,
#world_wide_whale,
#island,
#request,
#character_edit {
  padding: 0 15px;
}
#system #contents h2 {
  margin: 0 0 14px;
}
#battle_system .fl_right {
  position: relative;
  top: 2px;
}
#battle_system .fl_right .img01 {
  position: absolute;
  top: 75px;
  right: -85px;
  -webkit-transform-origin: -50% 50%;
  -ms-transform-origin: -50% 50%;
  transform-origin: -50% 50%;
  -webkit-animation: zoomOut 0.5s ease-In both;
  animation: zoomOut 0.5s ease-In both;
}
#contents.battle_system #battle_system .fl_right .img01 {
  -webkit-animation: zoomIn 0.5s ease-out 0.6s both;
  animation: zoomIn 0.5s ease-out 0.6s both;
}
#battle_system p:first-of-type,
#craft_system p:first-of-type {
  margin: 0 0 3px;
}
#battle_basics .img01 {
  position: absolute;
  top: 277px;
  left: 298px;
  -webkit-transform-origin: -45% 120%;
  -ms-transform-origin: -45% 120%;
  transform-origin: -45% 120%;
  -webkit-animation: zoomOut 0.5s ease-In both;
  animation: zoomOut 0.5s ease-In both;
}
#battle_basics aside {
  position: relative;
  margin: 16px 0 0 3px;
}
#battle_basics aside .img02 {
  position: absolute;
  top: 91px;
  left: 392px;
}
#jobs .pop01 {
  position: absolute;
  top: 68px;
  right: 14px;
}
#jobs .pop01 .img01 {
  position: absolute;
  top: -30px;
  right: -64px;
  -webkit-transform-origin: -50% 80%;
  -ms-transform-origin: -50% 80%;
  transform-origin: -50% 80%;
  -webkit-animation: zoomOut 0.5s ease-In both;
  animation: zoomOut 0.5s ease-In both;
}
#jobs .job_box {
  position: relative;
  margin: 0 0 20px;
}
#jobs .job_box .job_image {
  position: absolute;
  top: 342px;
  left: 347px;
  z-index: 1;
}
#jobs .job_box .job_ss {
  position: absolute;
  top: 314px;
  left: 37px;
}
#jobs .oyakata {
  height: 587px;
  padding: 39px 0 0 36px;
  background: url(../img/system/job_txt_bg.png) 0 0 no-repeat;
}
#jobs .oyakata .txt {
  position: relative;
  z-index: 3;
  margin: 0 0 15px;
}
#jobs .oyakata .job_image {
  top: 302px;
  left: 336px;
}
#jobs .oyakata .job_ss {
  position: static;
}
#jobs .attacker .job_ss {
  top: 343px;
}
#jobs .rounder .job_image {
  top: 332px;
  left: 387px;
}
#jobs .borer .job_image {
  top: 332px;
  left: 387px;
}
#jobs .carry .job_image {
  top: 312px;
  left: 412px;
}
#skill .img01 {
  position: absolute;
  top: 365px;
  left: 73%;
}
#contents.battle_basics #battle_basics .img01,
#contents.jobs #jobs .pop01 .img01 {
  -webkit-animation: zoomIn 0.5s ease-out 0.3s both;
  animation: zoomIn 0.5s ease-out 0.3s both;
}
#system #contents #craft_system h2 {
  padding: 0 0 0 3px;
}
#craft_system {
  padding: 0 12px 0 13px;
}
#craft_system .fl_right {
  position: relative;
  top: 2px;
}
#craft_system .fl_right .img01 {
  position: absolute;
  top: 146px;
  right: -7px;
  -webkit-transform-origin: 60% 150%;
  -ms-transform-origin: 60% 150%;
  transform-origin: 60% 150%;
  -webkit-animation: zoomOut 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
  animation: zoomOut 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
}
#contents.craft_system #craft_system .fl_right .img01 {
  -webkit-animation: zoomIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.0s both;
  animation: zoomIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.0s both;
}
.craft {
  position: absolute;
  top: 314px;
  left: 36px;
  display: block;
  width: 354px;
  height: 29px;
  background: url(../img/system/world_wide_whale_btn.png) 0 0 no-repeat;
}
.craft img {
  display: block;
  width: 354px;
  height: 29px;
  background: url(../img/system/world_wide_whale_btn.png) 0 100% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
.craft img:hover {
  opacity: 1;
}
#base .pop_images {
  margin: 0 -1px 6px 0;
}
#strengthen .pop01 {
  position: absolute;
  top: 66px;
  right: 14px;
}
#strengthen .pop_images,
#character_edit .pop_images {
  margin: 0 7px 5px 2px;
}
.line {
  display: block;
  width: 664px;
  height: 9px;
  margin: 26px auto;
  background: url(../img/system/line.png) 0 0 no-repeat;
  border: none;
}
#company {
  padding: 0 14px 0 21px;
}
#company .img01 {
  text-align: center;
}
#character section,
#system section {
  position: relative;
}
#system section.new:before {
  position: absolute;
  top: -6px;
  left: -12px;
  display: block;
  content: url(../img/new.png);
  -webkit-animation: blink 2.5s ease-in-out infinite;
  animation: blink 2.5s ease-in-out infinite;
}
.strengthen_txt05 img:first-child {
  margin: 0 18px 0 0;
}
.strengthen_arrow {
  position: relative;
}
.strengthen_arrow:before {
  position: absolute;
  top: 40px;
  left: 186px;
  display: block;
  content: url(../img/system/arrow.png);
  z-index: 10;
}
.strengthenBox {
  position: relative;
  width: 673px;
  margin: 0 0 22px;
}
.strengthenBox.new:before,
.isl_box.new:before {
  position: absolute;
  top: -14px;
  left: -3px;
  display: block;
  content: url(../img/new.png);
  -webkit-animation: blink 2.5s ease-in-out infinite;
  animation: blink 2.5s ease-in-out infinite;
}
.strengthenBox.txt07 {
  height: 471px;
  background: url(../img/system/strengthen_txt08.png) 0 0 no-repeat;
}
.strengthenBox.txt08 {
  height: 471px;
  background: url(../img/system/strengthen_txt09.png) 0 0 no-repeat;
}
.strengthenBox.txt09 {
  height: 471px;
  background: url(../img/system/strengthen_txt10.png) 0 0 no-repeat;
}
.strengthenBox a.pop {
  position: absolute;
  top: 163px;
  right: 0;
  left: 0;
  display: block;
  width: 435px;
  height: 262px;
  margin: 0 auto;
}
.wwwBox {
  position: relative;
  width: 673px;
}
.wwwBox.txt02 {
  height: 366px;
  background: url(../img/system/world_wide_whale_txt02.png) 0 0 no-repeat;
}
.wwwBox.txt03 {
  height: 340px;
  background: url(../img/system/world_wide_whale_txt03.png) 0 0 no-repeat;
}
.wwwBox.txt04 {
  height: 340px;
  background: url(../img/system/world_wide_whale_txt04.png) 0 0 no-repeat;
}
.wwwBox.txt05 {
  height: 388px;
  background: url(../img/system/world_wide_whale_txt05.png) 0 0 no-repeat;
}
.wwwBox.txt06 {
  height: 371px;
  background: url(../img/system/world_wide_whale_txt06.png) 0 0 no-repeat;
}
.wwwBox a.pop {
  position: absolute;
  top: 94px;
  left: 352px;
  display: block;
  width: 281px;
  height: 164px;
}
.isl_box {
  position: relative;
  width: 673px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.isl_box a.pop:first-of-type {
  margin: 0 14px 0 0;
}
.isl_box.txt02 {
  height: 422px;
  padding: 195px 0 0 40px;
  background: url(../img/system/world_wide_island_txt02.png) 0 0 no-repeat;
}
.isl_box.txt03 {
  height: 481px;
  padding: 254px 0 0 40px;
  background: url(../img/system/world_wide_island_txt03.png) 0 0 no-repeat;
}
.isl_box.txt04 {
  height: 481px;
  padding: 254px 0 0 40px;
  background: url(../img/system/world_wide_island_txt04.png) 0 0 no-repeat;
}
.isl_box.txt05 {
  height: 481px;
  padding: 254px 0 0 40px;
  background: url(../img/system/world_wide_island_txt05.png) 0 0 no-repeat;
}
.isl_box.txt06 {
  height: 519px;
  padding: 288px 0 0 40px;
  background: url(../img/system/world_wide_island_txt06.png) 0 0 no-repeat;
}
.request_box {
  position: relative;
  width: 673px;
  margin: 0 0 24px;
}
.request_box.txt02 {
  height: 490px;
  padding: 195px 34px 0 36px;
  background: url(../img/system/request_txt02.png) 0 0 no-repeat;
}
.request_box.txt03 {
  height: 504px;
  padding: 195px 34px 0 36px;
  background: url(../img/system/request_txt03.png) 0 0 no-repeat;
}
.request_box.txt04 {
  height: 542px;
  padding: 195px 34px 0 36px;
  background: url(../img/system/request_txt04.png) 0 0 no-repeat;
}
.request_box.txt05 {
  height: 476px;
  padding: 168px 34px 0 36px;
  background: url(../img/system/request_txt05.png) 0 0 no-repeat;
}
.request_box.txt06 {
  height: 643px;
  padding: 258px 34px 0 36px;
  background: url(../img/system/request_txt06.png) 0 0 no-repeat;
}
.mini_pop2 {
  width: 466px;
  margin: 0 0 0 20px;
}
figure.new {
  position: relative;
}
figure.new:before {
  position: absolute;
  top: -14px;
  left: -3px;
  display: block;
  content: url(../img/new.png);
  -webkit-animation: blink 2.5s ease-in-out infinite;
  animation: blink 2.5s ease-in-out infinite;
}
/* ムービー */
#movie #contents.video #video {
  display: block;
}
#contents.video main {
  position: relative;
  top: -40px;
  left: 15px;
  width: 930px;
  margin: 0 0 -220px;
}
.mv_list {
  margin: -6px -2px 0;
}
.mv_list li {
  position: relative;
  float: left;
  width: 301px;
  margin: 0 5px 20px;
}
.mv_list li:nth-child(3n+1) {
  clear: left;
}
.mv_list li.new:after {
  content: url(../img/new.png);
  position: absolute;
  top: -9px;
  right: 0;
  -webkit-animation: blink 2.5s ease-in-out infinite;
  animation: blink 2.5s ease-in-out infinite;
}
.mv_list h3 {
  margin: 0 0 2px;
  text-align: center;
}
.mv_list .play_btn {
  position: relative;
  display: block;
  width: 301px;
  height: 175px;
  padding: 4px;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: url(../img/movie/bg.png) 0 0 no-repeat;
}
.mv_list .play_btn:after {
  content: url(../img/movie/on.png);
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 297px;
  height: 171px;
  opacity: 0;
}
.mv_list .play_btn:hover:after {
  opacity: 1;
}
.mv_list .mv_obj {
  width: 288px;
  height: 162px;
  background: url(../img/loading.gif) 50% 50% no-repeat;
}

/* スペシャル */
#subNav a.first_run,
#subNav a.first_run img {
  background-image: url(../img/special/sub_navi_first_run.png);
}
#subNav a.shop,
#subNav a.shop img {
  background-image: url(../img/special/sub_navi_shop.png);
}
#subNav a.theme_song,
#subNav a.theme_song img {
  height: 31px;
  background-image: url(../img/special/sub_navi_theme_song.png);
}
#subNav a.benefits,
#subNav a.benefits img {
  height: 31px;
  background-image: url(../img/special/sub_navi_benefits.png);
}
#subNav li.new a.first_run:after {
  right: 10px;
}
#subNav li.new a.shop:after {
  right: -17px;
}
#subNav li.new a.theme_song:after {
  right: 27px;
}
#subNav li.new a.benefits:after {
  right: 0px;
}
#special #contents.first_run #first_run,
#special #contents.theme_song #theme_song {
  display: block;
}
#first_run,
#theme_song {
  padding: 0 15px;
}
#first_run h2 {
  margin: 0 0 14px;
}
#first_run .center {
  margin: 0 0 18px -18px;
}
#first_run p.wrap_text {
  margin: 0 0 8px -15px;
}
#first_run .charaList {
  position: relative;
}
#first_run .charaList.new:after {
  position: absolute;
  top: -22px;
  left: -10px;
  content: url("../img/new.png");
  -webkit-animation: blink 2.5s ease-in-out infinite;
  animation: blink 2.5s ease-in-out infinite;
}
#first_run .charaList h2 {
}
#first_run .charaList table {
  margin: 0 0 0.5em;
  font-size: 21rem;
  border: 3px solid #b27f23;
}
#first_run .charaList table th,
#first_run .charaList table td {
  padding: 0.43em 0.25em 0.36em;
  border: 1px solid #b27f23;
}
#first_run .charaList table thead th {
  text-align: left;
  background: #edd38b;
}
#first_run .charaList table tbody th {
  width: 2em;
  padding-right: 0.38em;
  text-align: right;
  background: #fff0c8;
}
#first_run .charaList table td {
  background: #fff0c8;
  font-weight: bold;
}
#first_run .line {
  margin: 26px 0;
}
#first_run a {
  color: #f59d2a;
  text-decoration: underline;
}
#first_run a:hover {
  color: #f93366;
}
.text_center {
  text-align: center;
}
.artist_img {
  position: absolute;
  top: 830px;
  right: 16px;
}
.theme_song h2 {
  margin: 0 0 12px;
}
.theme_song_btn {
  display: block;
  width: 360px;
  height: 28px;
  background: url(../img/special/theme_song_btn01.png) 0 0 no-repeat;
  margin: 0 0 36px;
}
.theme_song_btn img {
  display: block;
  width: 360px;
  height: 28px;
  background: url(../img/special/theme_song_btn01.png) 0 100% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.25s linear;
  -o-transition: opacity 0.25s linear;
  transition: opacity 0.25s linear;
}
.theme_song_btn:hover img {
  opacity: 1;
}
.yutb {
  display: block;
  margin: 0 auto 20px;
}
#first_run .img03 {
  position: relative;
  margin: 10px 0 0;
}
#first_run .img03.new:after {
  content: url(../img/special/first_run_img03_new.png);
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: blink 2.5s ease-in-out infinite;
  animation: blink 2.5s ease-in-out infinite;
  z-index: 100;
}