@charset "UTF-8";
.section-story {
  display: block;
  font-family: "M PLUS 1p", sans-serif;
  -webkit-transition: opacity 1s linear;
  transition: opacity 1s linear;
  opacity: 0;
}

.loaded .section-story {
  opacity: 1;
}

.story {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0% 0%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.story-dialogue {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  position: relative;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.story-dialogue__face {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin: auto 2%;
  display: block;
}
.story-dialogue__bubble {
  -webkit-box-flex: 4;
      -ms-flex: 4;
          flex: 4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  margin: auto 3%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: white;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 16px;
  padding: 2%;
  min-height: 100px;
  opacity: 0;
  -webkit-transform: translateY(10%);
          transform: translateY(10%);
  -webkit-transition: opacity 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
}
.story-dialogue__bubble.visible {
  opacity: 1;
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}
.story-dialogue__bubble.shown {
  opacity: 1;
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}
.story-dialogue__bubble p {
  font-family: "M PLUS Rounded 1c", sans-serif;
  text-shadow: 2px 0px 2px rgb(255, 255, 255), 2px 2px 2px rgb(255, 255, 255), -2px 0px 2px rgb(255, 255, 255), -2px -2px 2px rgb(255, 255, 255), 2px -2px 2px rgb(255, 255, 255), -2px 2px 2px rgb(255, 255, 255);
  padding: 2% 1%;
}
.story-dialogue.left {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.story-subsubpage {
  width: 100%;
  display: none;
  margin: 0 auto;
  -webkit-transition: opacity 0.25s;
  transition: opacity 0.25s;
  opacity: 0;
}
.story-subsubpage.show {
  display: block;
}
.story-subsubpage.visible {
  opacity: 1;
}

.section-character {
  display: block;
  font-family: "M PLUS 1p", sans-serif;
  -webkit-transition: opacity 1s linear;
  transition: opacity 1s linear;
  opacity: 0;
}

.loaded .section-character {
  opacity: 1;
}

.character {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0% 0%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.character .common-image-wrapper:nth-child(2n) {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
}
.character .common-image-wrapper:nth-child(2n+1) {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
}
.character .common-image-container {
  pointer-events: none;
  margin: auto 0;
}
.character .common-image-container.text {
  width: 60%;
}
.character .common-image-container.chara {
  width: 35%;
}

.section-system {
  display: block;
  font-family: "M PLUS 1p", sans-serif;
  -webkit-transition: opacity 1s linear;
  transition: opacity 1s linear;
  opacity: 0;
}

.loaded .section-system {
  opacity: 1;
}

.system {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0% 0%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.system .common-flex-container {
  width: 46%;
}
.system .common-item {
  margin-bottom: 0;
}
.system .common-image-container {
  width: 46%;
}
.system .common-image-container:only-child {
  width: 100%;
}

.section-gallery {
  display: block;
  font-family: "M PLUS 1p", sans-serif;
  min-height: 1080px;
  -webkit-transition: opacity 1s linear;
  transition: opacity 1s linear;
  opacity: 0;
}

.loaded .section-gallery {
  opacity: 1;
}

.gallery {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0% 0%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.gallery .common-wrapper {
  min-height: initial;
}
.gallery .movie-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
  width: 100%;
  margin-top: 20px;
}
.gallery .movie-container {
  display: block;
  position: relative;
  width: 48%;
  margin: auto;
  margin-bottom: 40px;
}
.gallery .movie-container:only-child {
  width: 80%;
}
.gallery .movie-container img {
  display: block;
  position: relative;
  max-width: 100%;
}
.gallery .movie-item {
  display: block;
  width: 100%;
  position: relative;
}
.gallery .movie-caption {
  color: #fff;
  padding-bottom: 0.3em;
  font-size: 1.3em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  text-shadow: 0px 0px 8px #000, 0px 0px 8px #000, 0px 0px 8px #000;
}

.section-special {
  display: block;
  font-family: "M PLUS 1p", sans-serif;
  -webkit-transition: opacity 1s linear;
  transition: opacity 1s linear;
  opacity: 0;
}

.loaded .section-special {
  opacity: 1;
}

.special {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0% 0%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.special .page01 .product-article {
  margin-bottom: 40px;
}
.special .page01 .product-article .common-text.product {
  font-size: 1em;
}
.special .page01 .limited-article .common-image-container.nippon1 {
  width: 60%;
}
.special .page01 .limited-article ul {
  padding-left: 1em;
}
.special .page01 .limited-article ul li {
  position: relative;
}
.special .page01 .limited-article ul li::before {
  content: "・";
  position: absolute;
  top: 0;
  left: -1em;
}
.special .page01 .stcdset-article {
  margin-bottom: 40px;
}
.special .page01 .stcdset-article .common-image-container.stcdset {
  width: 60%;
}
.special .page01 .stcdset-article .movie-wrapper {
  width: 60%;
  margin: 10px auto 0;
}
.special .page01 .stcdset-article .movie-wrapper img {
  width: 100%;
}
.special .benefit-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 100%;
  margin: 0 auto;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.special .benefit-container {
  width: 30%;
  display: block;
  position: relative;
  margin: 20px 1%;
  z-index: 1;
}
.special .benefit-container.empty {
  opacity: 0;
}
.special .benefit-container .shopname {
  width: 100%;
  display: block;
  position: relative;
}
.special .benefit-container .shopname img {
  display: block;
  position: relative;
  width: auto;
  margin: auto;
  max-width: 100%;
}
.special .benefit-container .contents {
  display: block;
  position: relative;
  width: 100%;
  border: solid 3px #ff0165;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px 0 16px;
  min-height: calc(100% - 85px);
}
.special .benefit-container .contents .common-image-container img {
  width: 100%;
}
.special .benefit-container .contents::before {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  width: 28px;
  height: 28px;
  background: url(../img/frame_triangle.png);
  top: 0;
  left: 0;
}
.special .benefit-container .contents::after {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  width: 28px;
  height: 28px;
  background: url(../img/frame_triangle.png);
  bottom: 0;
  right: 0;
  -webkit-transform: scale(-1, -1);
          transform: scale(-1, -1);
}
.special .benefit-container .contents .common-image-container {
  max-width: 70%;
}
.special .benefit-container .detail {
  color: white;
  text-align: center;
}
.special .btn-wrapper {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
}
.special .btn-container {
  width: 280px;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  margin: 10px auto 0;
  -webkit-transition: -webkit-filter 0.5s ease, -webkit-transform 0.5s ease;
  transition: -webkit-filter 0.5s ease, -webkit-transform 0.5s ease;
  transition: filter 0.5s ease, transform 0.5s ease;
  transition: filter 0.5s ease, transform 0.5s ease, -webkit-filter 0.5s ease, -webkit-transform 0.5s ease;
}
.special .btn-container:hover {
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
.special .btn-container img {
  display: block;
  margin: auto;
  width: auto;
  max-width: 100%;
  pointer-events: none;
}
.special .btn-container.ps4 {
  background: url(../img/btn_ps4_bg.png) 0% 0% repeat;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 5px 1px #245ae3;
          box-shadow: 0 0 5px 1px #245ae3;
}
.special .btn-container.switch {
  background: url(../img/btn_switch_bg.png) 0% 0% repeat;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 5px 1px #e32425;
          box-shadow: 0 0 5px 1px #e32425;
}
.special .btn-container.nippon1, .special .btn-container.stcdset {
  width: 580px;
}
.special .btn-container.common {
  background: url(../img/btn_common_bg.png) 0% 0% repeat;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 5px 1px #e32425;
          box-shadow: 0 0 5px 1px #e32425;
}
.special .page03 .common-flex-wrapper {
  margin-bottom: 0;
}
.special .page03 .common-flex-wrapper.haruki .common-flex-container {
  margin-bottom: 0;
}
.special .page03 .common-flex-wrapper.haruki .common-flex-container:first-child {
  width: 55%;
  margin-left: 0;
}
.special .page03 .common-flex-wrapper.haruki .common-flex-container:last-child {
  width: 22%;
  margin-left: 0;
}

.common-bg {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  background: url(../img/bg.jpg) 50% 50%;
  background-size: cover;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}
.common-bg.nonTop {
  opacity: 1;
}
.common-wrapper {
  display: block;
  position: relative;
  background-color: rgba(0, 0, 0, 0.8);
  border: solid 3px #ff0165;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 60px;
  width: 100%;
  max-width: 1200px;
  min-height: calc(100vh - 142px);
}
.common-wrapper::before {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  width: 28px;
  height: 28px;
  background: url(../img/frame_triangle.png);
  top: 0;
  left: 0;
}
.common-wrapper::after {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  width: 28px;
  height: 28px;
  background: url(../img/frame_triangle.png);
  bottom: 0;
  right: 0;
  -webkit-transform: scale(-1, -1);
          transform: scale(-1, -1);
}
.common-content {
  width: 100%;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  opacity: 0;
}
.common-content.show {
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
  opacity: 1;
}
.common-content:not(:last-child) {
  margin-bottom: 60px;
}
.common-caption {
  display: block;
  width: 100%;
  background: url(../img/caption_bg.png) 50% 50% no-repeat;
  pointer-events: none;
}
.common-caption img {
  display: block;
  max-width: 100%;
  margin: auto;
}
.common-subcaption {
  display: block;
  position: relative;
}
.common-item {
  position: relative;
  display: block;
  margin-bottom: 5%;
}
.common-text {
  display: block;
  position: relative;
  color: white;
  font-size: 1.3em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-shadow: 0px 0px 8px #000, 0px 0px 8px #000, 0px 0px 8px #000;
  margin: 0% auto 2%;
}
.common-text em {
  color: #ff0165;
  font-style: initial;
  background: initial;
}
.common-text .annotation {
  font-size: 0.8em;
}
.common-text .little-caption {
  width: 100%;
  display: block;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: auto 0;
}
.common-text a {
  -webkit-transition: 0.5s color;
  transition: 0.5s color;
}
.common-text a:hover {
  color: #ff0165;
}
.common-text.middle {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.common-submenus {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  margin: auto;
  max-width: 990px;
}
.common-submenu {
  display: block;
  position: relative;
  width: 330px;
  height: 90px;
  margin: 0;
  opacity: 0.7;
  cursor: pointer;
  -webkit-transition: opacity 0.5s linear, -webkit-filter 0.5s linear;
  transition: opacity 0.5s linear, -webkit-filter 0.5s linear;
  transition: filter 0.5s linear, opacity 0.5s linear;
  transition: filter 0.5s linear, opacity 0.5s linear, -webkit-filter 0.5s linear;
}
.common-submenu.system-page01 {
  background: url("../img/system/submenu1.png") 0% 0% no-repeat;
  background-size: cover;
}
.common-submenu.system-page02 {
  background: url("../img/system/submenu2.png") 0% 0% no-repeat;
  background-size: cover;
}
.common-submenu.system-page03 {
  background: url("../img/system/submenu3.png") 0% 0% no-repeat;
  background-size: cover;
}
.common-submenu.system-page04 {
  background: url("../img/system/submenu4.png") 0% 0% no-repeat;
  background-size: cover;
}
.common-submenu.system-page05 {
  background: url("../img/system/submenu5.png") 0% 0% no-repeat;
  background-size: cover;
}
.common-submenu.system-page06 {
  background: url("../img/system/submenu6.png") 0% 0% no-repeat;
  background-size: cover;
}
.common-submenu.system-page07 {
  background: url("../img/system/submenu7.png") 0% 0% no-repeat;
  background-size: cover;
}
.common-submenu.system-page08 {
  background: url("../img/system/submenu8.png") 0% 0% no-repeat;
  background-size: cover;
}
.common-submenu.special-page01 {
  background: url("../img/special/submenu1.png") 0% 0% no-repeat;
  background-size: cover;
}
.common-submenu.special-page02 {
  background: url("../img/special/submenu2.png") 0% 0% no-repeat;
  background-size: cover;
}
.common-submenu.special-page03 {
  background: url("../img/special/submenu3.png") 0% 0% no-repeat;
  background-size: cover;
}
.common-submenu:hover {
  opacity: 1;
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
}
.common-submenu.active {
  pointer-events: none;
  opacity: 1;
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
}
.common-image-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
}
.common-image-container {
  display: block;
  position: relative;
  width: 48%;
  margin: 10px auto;
}
.common-image-container:only-child {
  width: 100%;
}
.common-image-container img {
  display: block;
  max-width: 100%;
  margin: auto;
}
.common-flex-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 20px 0;
  width: 100%;
}
.common-flex-container {
  display: block;
  position: relative;
  width: 48%;
  margin: 10px auto;
}
.common-btn-wrapper {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
}
.common-btn-container {
  width: 280px;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  margin: 10px auto 0;
  -webkit-transition: -webkit-filter 0.5s ease, -webkit-transform 0.5s ease;
  transition: -webkit-filter 0.5s ease, -webkit-transform 0.5s ease;
  transition: filter 0.5s ease, transform 0.5s ease;
  transition: filter 0.5s ease, transform 0.5s ease, -webkit-filter 0.5s ease, -webkit-transform 0.5s ease;
  background: url(../img/btn_ps4_bg.png) 0% 0% repeat;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 5px 1px #245ae3;
          box-shadow: 0 0 5px 1px #245ae3;
}
.common-btn-container:hover {
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
.common-btn-container img {
  display: block;
  margin: auto;
  max-width: 100%;
  pointer-events: none;
}