@charset "utf-8";
/* CSS Document */

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

@media screen and (min-width:760px) {

.pc { display: block !important; }
.sp { display: none !important; }

html,
body{
  background-image: url("../images/background.jpg");
  margin: 0 auto;
  width: 1000px;
}

#contents {
  width: 1000px;
  background-image: url("../images/background_2.jpg");
  margin: 0 auto;
}

.master img {
  width: 100%;
}

.layer_board.master {
  width: 63%;
  margin: 20px 0 0 0;
  left: 19%;
}

header {
 position: relative;
}

header nav {
  position: absolute;
  top: 8px;
  right: 13px;
}

header #gnav ul {
 list-style-type: none;
 padding: 0;
 margin: 0 auto;
 text-align: right;
}

header #gnav li {
 display: inline-block;
 margin-left: 7px;
}

header #gnav li a img {
 display: block;
}

header #gnav .nav_story a {
 display: inline-block;
 position: relative;
}
header #gnav .nav_character a {
 display: inline-block;
 position: relative;
}

header #gnav .nav_gallery a {
 display: inline-block;
 position: relative;
}

header #gnav .nav_special a {
 display: inline-block;
 position: relative;
}

header #gnav .nav_spec a {
 display: inline-block;
 position: relative;
}

header #gnav .nav_download a {
 display: inline-block;
 position: relative;
}

header #gnav .nav_support a {
 display: inline-block;
 position: relative;
}

header #movie {
  text-align: right;
}

header #twitter {
  width: 194px;
  margin-left: auto;
  text-align: right;
  margin-bottom: 14px;
}

header .twitter_box {
  background-color: rgba(255,255,255,0.7);
  width: 194px;
  margin-top: -7px;
  height: 108px;
}

header .twitter_box iframe {
  min-height: inherit!important;
}

header #news {
  width: 194px;
  margin-left: auto;
  text-align: right;
}

header .newsbox {
  height: 109px;
  overflow-y: scroll;
  border: #000000 1px;
  background-color: rgba(255,255,255,0.5);
  width: 194px;
  font-size: 14px;
  text-align: left;
  margin-top: -7px;
}

header .newsbox span {
  font-size: 18px;
}

header .slider_box {
  position: absolute;
  top: 477px;
  width: 30%;
}

header .slider_box.slider02 {
  position: absolute;
  top: 647px;
  width: 20%;
  right: 570px;
}

header .masterup {
  position: absolute;
  top: -170px;
  width: 100%;
  height: 0px;
  right: 420px;
}

header .masterup img {
  width: 50%;
  margin: 737px 0px 0px 680px;
   padding: 0 15px;
}

header .slider_box ul {
  padding: 0 15px;
  width: 226px;
  margin: 0 0px 0px 776px;
}

header .slider_box.slider02 ul {
  padding: 0 0;
  width: 415px;
  margin: 0 0px 0px 342px;
}

header .slider_box li {
  display: block;
  width: 100%;
}

header .slider_box li img {
  border-radius: 4px;
}

.lightbox .lb-image {
  width: 1280px!important;
  height: auto!important;
}

h1 {
  margin: 0;
  font-size: 0em;
}

h2 {
  margin: 0 auto;
  max-width: 50%;
  text-align: center;
}

h2 img {
  margin: 25px auto 0 auto;
}


#story {
  margin: 0 auto;
  font-size: 0em;
}

#character {
  background-image: url("../images/character_bg.jpg");
  background-repeat: no-repeat;
  font-size: 0em;
}

#character ul {
  padding: 0;
  margin: 0 auto;
  max-width: 100%;
  width: 376px;
}

#character ul li {
  display: inline-block;
  margin-right: 22px;
  margin-bottom: 23px;
  vertical-align: top;
  text-align: center;
}
#character ul li:last-child {
  margin-right: 0;
}

#character ul li:nth-child(5n) {
  margin-right: 0px;
}

#character .character_box {
  font-size: 0;
}

#character .character_text {
  position: relative;
}

:root #character .character_voice {
  margin-top: 0\0/;
}

#character .voice_button_01 {
  position: absolute;
  top: 140px;
  right: 70%;
}

#character .voice_button_02 {
  position: absolute;
  top: 140px;
  right: 64%;
}

#character .voice_button_03 {
  position: absolute;
  top: 140px;
  right: 58%;
}

#character .voice_button_04 {
  position: absolute;
  top: 140px;
  right: 52%;
}

#character .voice_button_05 {
  position: absolute;
  top: 140px;
  right: 46%;
}

#gallery {
  background-image: url("../images/gallery_bg.jpg");
  background-repeat: no-repeat;
  font-size: 0em;
}

#gallery ul {
  margin: 0 30px;
  padding: 0;
  margin-top: 10px;
  padding-bottom: 25px;
}

#gallery ul li {
  display: inline-block;
  margin-right: 27px;
  margin-bottom: 14px;
}
#gallery ul li:last-child {
  margin-right: 0;
}

:root #gallery ul li {
  margin-right: 20px\0/;
}

#gallery ul li img {
  border-radius: 4px;
}

#gallery ul li:nth-child(5n) {
  margin-right: 0;
}

#special {
  font-size: 0em;
  background-image: url("../images/special_bg.jpg");
  background-repeat: no-repeat;
  padding: 30px 0;
}

#special .special_banner {
  text-align: center;
}

#special .special_box {
  text-align: center;
  margin: 25px auto;
}

#special .special_banner .special_box {
  display: inline-block;
  margin: 0 20px;
}

#spec {
  background-image: url("../images/spec_bg.jpg");
  background-repeat: no-repeat;
  height: 528px;

}

#spec .spec_box {
  margin: 30px auto;
  display: flex;
  justify-content: space-between;
  max-width: 85%;
  background-color: #927028;
  opacity: 0.8;
  color: #ffffff;
  font-size: 21px;
  font-family: 'ＭＳ 明朝', 'MS Mincho','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
  font-weight: bold;
  padding: 18px;
  margin-top: 0;
  -js-display: flex;
}

#spec .spec_box p {
  margin-bottom: 18px;
  margin: 0; 
  margin-top: 15px;
}

#spec .spec_box p a {
  color: #ffffff;
}

#spec .spec_box span {
  display: inline-block;
  width: 10em;
}

#spec .spec_box .spec_01 {
  width: 60%;
}

#spec .spec_box .spec_02 {
  width: 40%;
  margin-top: inherit\0/;
}

#shortcut {
  background-color: #000000;
  padding-bottom: 50px;
}

#shortcut ul {
  display: block;
  list-style-type: none;
  -webkit-padding-start: 0;
  padding-top: 44px;
  margin-top: 0;
  /*width: 652px;*/
  width: 345px;
  margin: 0 auto;
}

#shortcut li {
  display: inline-block;
  padding: 0 6px;
}

#shortcut a {
  display: inline-block;
  color: #ffffff;
  font-weight: bold;
}

#shortcut small {
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  display: block;
  margin-top: 20px;
}

.pagetop {
  position: fixed;
  bottom: 20px;
  right: 160px;
}

#contents.special_contents #main01 h1 {
  margin: 0 auto;
  max-width: 50%;
  text-align: center;
}

#contents.special_contents #main01 h1 img {
  margin: 125px auto 0 auto;
}

#contents.special_contents .campain_contents {
  margin-top: 15px;
}

#contents.special_contents .campain_contents ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0 auto;
  width: 85%;
}

#contents.special_contents .campain_contents li {
  display: inline-block;
  margin-right: 9%;
  margin-bottom: 77px;
  vertical-align: top;
}

#contents.special_contents .campain_contents ul.special_original  {
  margin-bottom: 150px;
}

#contents.special_contents .campain_contents .special_original li {
  height: 250px;
}

#contents.special_contents .campain_contents li:nth-child(3n) {
  margin: 0;
}

#contents.special_contents.dl .campain_contents li {
  display: inline-block;
  margin-right: 0;
  margin-bottom: 30px;
  vertical-align: top;
}

#contents.special_contents.dl .campain_contents li img {
  width: 100%;
}

#contents.special_contents.dl .campain_contents .icon li {
    width: 30%;
}

#contents.special_contents.dl .campain_contents ul.icon {
    text-align:center;
}

}

#special.trial {
  display: block;
  font-size: 21px;
  color: #ffffff;
  background: #000;
  padding: 30px 30px;
}

#special.trial a {
  color: #ffffff;
}

#special.trial img {
  display: block;
  padding: 0 5px;
}

#special.trial .trial_link {
  vertical-align: middle;
  margin-bottom: 30px;
  display: flex;
  line-height: 50px;
}

@media screen and (min-width: 0px) and (max-width: 760px) { 

.pc { display: none !important; }
.sp { display: block !important; }

body{
  background-image: url("../images/background.jpg");
  background-size: cover;
  margin: 0 auto;
  width: 100%;
  height: auto;
}

#contents {
  width: 100%;
  background-image: url("../images/background_2.jpg");
  margin: 0 auto;
  height: auto;
}

header {
 padding-top: 80px;
}

header .sp {
 position: relative;
 background-color: #000000;
}

header nav {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
}

header #gnav ul {
 list-style-type: none;
 padding: 0;
 margin: 0 auto;
 width: 100%;
 margin-top: 10px;
 text-align: center;
}

header #gnav ul img {
 width: 100%;
}

header #gnav li {
 display: inline-block;
 margin-left: 7px;
 width: 20%;
}

header #gnav li a img {
 display: block;
}

header #gnav .nav_story {
 background-size: cover;
}

header #twitter {
  width: 90%;
  text-align: center; 
  margin: 0 auto;
  margin-bottom: 14px;
  margin-top: 14px;
}

header .twitter_box {
  background-color: rgba(255,255,255,0.7);
  width: 100%;
  margin-top: -7px;
}

header #news {
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

header .newsbox {
  height: 109px;
  overflow: scroll;
  border: #000000 1px;
  background-color: rgba(255,255,255,0.5);
  width: 90%;
  font-size: 14px;
  text-align: left; 
  margin: 0 auto;
  margin-top: -7px;
}

header .newsbox span {
  font-size: 18px;
}

header .slider_box {
  position: absolute;
  top: 45%;
  width: 100%;
}

header .slider_box ul {
  padding: 0 15px;
  width: 100%;
  margin: 0 auto;
}

header .slider_box li {
  display: block;
  width: 100%;
}

header .slider_box li img {
  border-radius: 4px;
  width: 100%;
  margin: 0 auto;
}

.layer_board.master {
  width: 90%;
  margin: 50px 0px 0px -45%;
}

.layer_board.master img {
  width: 100%;
}

h1 {
  margin: 0;
  font-size: 0em;
}

h1 img {
 width: 100%;
 height: auto;
}

h2 {
  margin: 0 auto;
  text-align: center;
}

h2 img {
  margin: 25px auto 0 auto;
  width: 70%;
  height: auto;
}

.special_campaign h2 img {
  margin: 25px auto 0 auto;
  width: inherit;
  height: auto;
}

#main01 {
  
}

#story {
  margin: 0 auto;
  font-size: 0em;
}

#story img {
  width: 100%;
  height: auto;
}

#character {  
  font-size: 0em;
  width: 100%;
  height: auto;
}

#character ul {
  margin-top: 60px;
  padding: 0;
  margin: 0 auto;
  max-width: 100%;
  padding-top: 5px;
  margin-bottom: 30px;
}

#character ul li {
  display: inline-block;
  margin-right: 0;
  margin-bottom: 9px;
  vertical-align: top;
  text-align: center;
  width: 39%;
  padding: 0 20px;
}

#character ul li img {
  width: 100%;
}

#character ul li:nth-child(2n) {
  margin-right: 0px;
}

#character .character_cover {
  background-image: url("../images/character_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

#character .character_box {
  display: inherit;
}

#character .character_box .character_text {
  margin-right: 0;
  margin-bottom: 0; 
  position: relative;
}

#character .character_box .character_text img {
  width: 100%;
  height: auto; 
}

#character .character_voice {
  position: relative;
  float: left;
  width: 50%;
}


#character .character_stand {
  /*float: right;*/
  margin: 0 auto;
  width: 50%;
}

#character .stand {
  text-align: center;  
}

#character .character_stand img {
  width: 100%;
  height: auto;
}

#character .character_stand .stand img {
  width: inherit;
  height: auto;
}

#character .character_box .character_stand .stand_switch {
  margin-top: -25px;
}

#character .character_box .character_stand .stand_switch img {
  cursor: pointer;
  margin: 5px;
  margin-right: 13px;
  margin-top: 5px;
}

#character_sub img {
  text-align: center;
  width: 100%;
}

#character .voice_button_01 {
  position: absolute;
  top: 53px;
  right: 70%;
  width: 5%;
}

#character .voice_button_02 {
  position: absolute;
  top: 53px;
  right: 64%;
  width: 5%;
}

#character .voice_button_03 {
  position: absolute;
  top: 53px;
  right: 58%;
  width: 5%;
}

#character .voice_button_04 {
  position: absolute;
  top: 53px;
  right: 52%;
  width: 5%;
}

#character .voice_button_05 {
  position: absolute;
  top: 53px;
  right: 46%;
  width: 5%;
}

#gallery {
  background-image: url("../images/gallery_bg.jpg");
  background-repeat: no-repeat;
  font-size: 0em;
  width: 100%;
  height: auto;
}

#gallery h2 img {
  width: 50%;
}

#gallery ul {
  margin: 0 15px;
  padding: 0;
  margin-top: 10px;
  padding-bottom: 25px;
}

#gallery ul li {
  display: inline-block;
  margin-right: 5%;
  margin-bottom: 14px;
  width: 21%;
}

#gallery ul li:nth-child(4n) {
  margin-right: 0;
}

#gallery ul li img {
  border-radius: 4px;
  width: 100%;
}

#special {
  font-size: 0em;
  background-image: url("../images/special_bg.jpg");
  background-repeat: no-repeat;
  padding: 30px 0;
  width: 100%;
  height: auto;
}

#special h2 img {
  width: 50%;
}

#special .special_box {
  text-align: center;
  margin: 30px auto;
}

#special .special_box h3 img {
  width: auto;
  height: auto;
}

#special .special_box img {
  width: 90%;
  height: auto;
}

.movie {
  position: relative;
  width: 95%;
  padding-top: 56.25%;
  margin: 0 auto;
}
.movie video{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

#spec {
  background-image: url("../images/spec_bg.jpg");
  width: 100%;
  background-repeat: no-repeat;
  height: 547px;
  background-size: cover;
  background-position: 50% 50%;
}

#spec h2 img {
  width: 30%;	
  margin-top: 30px;
}

#spec .spec_box {
  margin: 30px auto;
  display: inherit;
  justify-content: space-between;
  max-width: 72%;
  background-color: #927028;
  opacity: 0.8;
  color: #ffffff;
  font-size: 18px;
  font-family: 'ＭＳ 明朝', 'MS Mincho','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
  font-weight: bold;
  padding: 13px;
  margin-top: 0;
  font-size: 85%;
}

#spec .spec_box p {
  margin-bottom: 18px;
  margin: 0; 
  margin-top: 15px;
}

#spec .spec_box span {
  display: inline-block;
  width: 9em;
}

#spec .spec_box .spec_01 {
  width: 100%;
}

#spec .spec_box .spec_02 {
  width: 100%;
}

#shortcut {
  background-color: #000000;
  padding-bottom: 120px;
}

#shortcut ul {
  display: block;
  list-style-type: none;
  -webkit-padding-start: 0;
  padding-top: 44px;
  margin-top: 0;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding-left: 0px;
}

#shortcut li {
  display: inline-block;
  padding: 0 6px;
}

#shortcut a {
  display: inline-block;
  color: #ffffff;
  font-weight: bold;
}

.pagetop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  opacity: 0.7;
}

#contents.special_contents #main01 h1 {
  margin: 0 auto;
  max-width: 50%;
  text-align: center;
}

#contents.special_contents #main01 h1 img {
  margin: 105px auto 0 auto;
}

#contents.special_contents .campain_contents {
  text-align: center;
  margin-top: 15px;
  margin: 0 7px;
}

#contents.special_contents .campain_contents img {
  width: 100%;
}

#contents.special_contents .campain_contents ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0 auto;
  width: 85%;
}

#contents.special_contents .campain_contents li {
  display: inline-block;
  vertical-align: top;
  margin-right: 1%;
  margin-bottom: 17px;
}

#contents.special_contents .campain_contents li:nth-child(3n) {
  margin: 0;
}

}


.tax {
	width: 100%;
	text-align: right;
	font-size: 12px;
}