.subpage-caption {
  width: 100%;
  padding-top: 80px;
  margin-bottom: 50px;
}

.subpage-caption img {
  display: block;
  margin: 0 auto;
}

.common-window-section {
  display: block;
  width: 100%;
  padding: 0 2%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.common-window-section:nth-of-type(n+2) {
  margin-top: 100px;
}

.common-window {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  border-top: 5px ridge #b79952;
  border-bottom: 5px ridge #b79952;
  -webkit-box-shadow: 0 10px 10px 5px black;
          box-shadow: 0 10px 10px 5px black;
}

.common-window-content {
  background: url(../img/img_dirt.png) -95% -240px no-repeat, url(../img/bg_paperwhite.jpg) 0 0 repeat;
  background-size: 60% auto, 85% auto, auto;
  -webkit-box-shadow: 0 0 80px 30px rgba(0, 0, 0, 0.4) inset;
          box-shadow: 0 0 80px 30px rgba(0, 0, 0, 0.4) inset;
  width: 100%;
  height: 100%;
  padding: 0 2% 2%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
}

.common-window-caption {
  margin: 0 auto;
  text-align: center;
  font-size: 2.5em;
  font-weight: 900;
  line-height: 1.3;
  padding: 0 0 0.1em;
  margin-bottom: 0.4em;
  border-bottom: 1px solid #1b1b1b;
  text-shadow: rgba(255, 255, 255, 0.3) 1px 1px 7px, rgba(255, 255, 255, 0.3) -1px 1px 7px, rgba(255, 255, 255, 0.3) 1px -1px 7px, rgba(255, 255, 255, 0.3) -1px -1px 7px;
  background: url(../img/img_deco_comwin.png) 100% 0 no-repeat, url(../img/img_deco_comwin.png) 0 0 no-repeat;
  background-size: 100px auto;
}

.common-window-block-A {
  width: 100%;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.common-window-block-A:not(:first-child) {
  margin: 5% auto;
}

.common-window-block-B {
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 40px 4%;
  background: url(../img/deco_side.png) right -4% top 0 repeat-y, url(../img/deco_side.png) -4% 0 repeat-y, url(../img/bg_pattern20.jpg) 0 0 repeat;
  background-size: 7% auto, 7% auto, auto;
  border-top: 5px ridge #b79952;
  border-bottom: 5px ridge #b79952;
  -webkit-box-shadow: 0 10px 10px 5px rgba(0, 0, 0, 0.5);
          box-shadow: 0 10px 10px 5px rgba(0, 0, 0, 0.5);
  color: white;
}

.common-window-block-B:not(:first-child) {
  margin: 5% auto;
}

.common-window-block-C {
  width: 70%;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.common-window-block-C:not(:first-child) {
  margin: 5% auto;
}

.common-window-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  position: relative;
}

.common-window-list__item {
  width: 48.5%;
}

.common-window-list__item:nth-of-type(n + 3) {
  margin-top: 3%;
}

.common-window-subcaption {
  background: url(../img/img_deco_comwin_subcap.png) 3% 50% no-repeat, url(../img/img_deco_comwin_subcap.png) 97% 50% no-repeat, #1b1b1b;
  color: white;
  font-weight: 700;
  font-size: 1.4em;
  padding-bottom: 0.1em;
  text-align: center;
  margin-bottom: 0.5em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}

.common-window-block-B .common-window-subcaption {
  background: url(../img/img_deco_comwin_subcap.png) 3% 50% no-repeat, url(../img/img_deco_comwin_subcap.png) 97% 50% no-repeat, #b79952;
}

.common-window-text {
  width: 100%;
  text-align: justify;
  text-justify: inter-ideograph;
}

.common-window-text em {
  font-weight: 700;
  font-style: normal;
}

.common-window-text mark {
  color: #fc7700;
  background: transparent;
}

.common-window-text small {
  font-size: 0.8em;
}

.common-window-text p.center-A {
  text-align: center;
}

.common-window-text p.center-B {
  text-align: center;
}

.common-window-text:not(:first-child) {
  margin-top: 3%;
}

.common-window-image {
  max-width: 800px;
  margin: 0 auto;
}

.common-window-image:not(:first-child) {
  margin-top: 3%;
}

.common-window-twitter {
  width: 100%;
}

.common-window-twitter:not(:first-child) {
  margin: 5% 0;
}

.common-window-novel {
  max-width: 45em;
  margin: 0 auto;
}

.common-window-novel:not(:first-child) {
  margin: 5% auto 0;
}

.common-window-novel p.separation {
  text-align: center;
  margin: 2.5em auto;
}

.common-window-novel p.end {
  text-align: right;
  margin-top: 2em;
}

.twitter-tweet {
  margin: 0 auto;
}

.order-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  position: relative;
}

.order-buttons__item {
  display: block;
  width: 48.5%;
  position: relative;
}

.order-buttons__item-long {
  display: block;
  width: 100%;
  position: relative;
}

.order-buttons__item-long:not(:first-child) {
  margin-top: 2%;
}

.sub-navi {
  max-width: 1280px;
  margin: 0 auto 0.5%;
  position: relative;
}

.sub-navi-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  position: relative;
}

.sub-navi-menu__item {
  display: inline-block;
  width: 25.86667%;
  position: relative;
}

.sub-navi-button {
  display: block;
  width: 100%;
  position: relative;
}

.sub-navi-button img {
  vertical-align: bottom;
  width: 100%;
}

.sub-navi-button {
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 27.90698%;
  position: relative;
}

.sub-navi-button img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
  -webkit-transition: opacity 0.15s ease;
  transition: opacity 0.15s ease;
}

.sub-navi-button:hover img {
  opacity: 1;
}

.sub-navi-button.show img {
  opacity: 1;
}

.order-button-ps4 {
  display: block;
  background: #2586bc;
  width: 100%;
  text-align: center;
  padding: 1em 0;
  font-size: 0.9em;
  font-weight: 700;
  color: white;
  text-decoration: none;
  border: 1px solid white;
  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3) inset, 0 0 5px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3) inset, 0 0 5px 0 rgba(0, 0, 0, 0.5);
  -webkit-transition: background 0.15s ease;
  transition: background 0.15s ease;
}

.order-button-ps4:hover {
  background: #00c9ea;
}

.order-button-switch {
  display: block;
  background: #c33c33;
  width: 100%;
  text-align: center;
  padding: 1em 0;
  font-size: 0.9em;
  font-weight: 700;
  color: white;
  text-decoration: none;
  border: 1px solid white;
  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3) inset, 0 0 5px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3) inset, 0 0 5px 0 rgba(0, 0, 0, 0.5);
  -webkit-transition: background 0.15s ease;
  transition: background 0.15s ease;
}

.order-button-switch:hover {
  background: #ff7445;
}

.order-button-comingsoon {
  display: block;
  background: gray;
  width: 100%;
  text-align: center;
  padding: 1em 0;
  font-size: 0.9em;
  font-weight: 700;
  color: white;
  text-decoration: none;
  border: 1px solid white;
  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3) inset, 0 0 5px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3) inset, 0 0 5px 0 rgba(0, 0, 0, 0.5);
  -webkit-transition: background 0.15s ease;
  transition: background 0.15s ease;
}

.order-button-buy {
  display: block;
  background: #d18a39;
  width: 100%;
  text-align: center;
  padding: 1em 0;
  font-size: 0.9em;
  font-weight: 700;
  color: white;
  text-decoration: none;
  border: 1px solid white;
  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3) inset, 0 0 5px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3) inset, 0 0 5px 0 rgba(0, 0, 0, 0.5);
  -webkit-transition: background 0.15s ease;
  transition: background 0.15s ease;
}

.order-button-buy:hover {
  background: #fabf7b;
}

/* STORY --------------------------------*/
.bg-story {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: url("../img/story/bg_story.jpg") 50% 50% no-repeat;
  background-size: cover;
  z-index: -10;
}

.story {
  display: block;
  width: 100%;
  position: relative;
}

.story-content {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.story-window-section {
  display: block;
  width: 100%;
  position: relative;
}

.story-window-section:last-child {
  margin-bottom: 50px;
}

.story-window {
  display: block;
  width: 100%;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: url(../img/story/deco_story.png) calc(50% - 43%) 0 repeat-y, url(../img/story/deco_story.png) calc(50% + 43%) 0 repeat-y, url(../img/bg_pattern20.jpg) 0 0 repeat;
  -webkit-box-shadow: 0 0 188px 28px rgba(0, 0, 0, 0.5) inset;
          box-shadow: 0 0 188px 28px rgba(0, 0, 0, 0.5) inset;
}

.story-window:after, .story-window:before {
  content: "";
  display: block;
  width: 100%;
  height: 27px;
  background: url(../img/window_frame.png) 50% 50% repeat-x;
}

.story-window-content {
  display: block;
  position: relative;
  padding: 0 2%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.sub-navi-button[data-btn="story"] {
  background: url("../img/story/subnav_story.png") 0 0 no-repeat;
  background-size: 100% auto;
}

.sub-navi-button[data-btn="story"] img {
  background: url("../img/story/subnav_story.png") 0 0 no-repeat;
  background-size: 100% auto;
  background-position: 0 100%;
}

.sub-navi-button[data-btn="keyword"] {
  background: url("../img/story/subnav_keyword.png") 0 0 no-repeat;
  background-size: 100% auto;
}

.sub-navi-button[data-btn="keyword"] img {
  background: url("../img/story/subnav_keyword.png") 0 0 no-repeat;
  background-size: 100% auto;
  background-position: 0 100%;
}

.subsection-story,
.subsection-keyword {
  display: block;
  max-width: 1280px;
  margin: 0 auto;
  padding: 50px 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  opacity: 0;
  display: none;
}

.subsection-story.show,
.subsection-keyword.show {
  display: block;
  -webkit-animation: subsection-open 1s ease forwards;
          animation: subsection-open 1s ease forwards;
}

.start .subsection-story.show,
.start .subsection-keyword.show {
  opacity: 1;
}

.story-text {
  text-align: center;
  color: white;
  text-shadow: black 1px 1px 7px, black -1px 1px 7px, black 1px -1px 7px, black -1px -1px 7px;
  text-justify: inter-ideograph;
  font-weight: 700;
  line-height: 2;
}

.story-text b {
  color: #fc7700;
}

.story-text__para:nth-of-type(n+2) {
  margin-top: 30px;
}

.story-text__para:last-child {
  font-size: 1.5em;
  margin: 50px 0;
}

.story-ss {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  position: relative;
}

.story-ss__item {
  width: 49%;
  position: relative;
}

.story-ss__item:nth-of-type(n+2) {
  margin-left: 2%;
}

.keyword-list {
  display: block;
  width: 100%;
  position: relative;
}

.keyword-list__item {
  position: relative;
  width: 100%;
  opacity: 0;
}

.keyword-list__item:nth-of-type(n+2) {
  margin-top: 50px;
}

.start .keyword-list__item:nth-of-type(1) {
  -webkit-animation: character-icon-open 1s ease forwards 0.2s;
          animation: character-icon-open 1s ease forwards 0.2s;
}

.start .keyword-list__item:nth-of-type(2) {
  -webkit-animation: character-icon-open 1s ease forwards 0.4s;
          animation: character-icon-open 1s ease forwards 0.4s;
}

.start .keyword-list__item:nth-of-type(3) {
  -webkit-animation: character-icon-open 1s ease forwards 0.6s;
          animation: character-icon-open 1s ease forwards 0.6s;
}

.start .keyword-list__item:nth-of-type(4) {
  -webkit-animation: character-icon-open 1s ease forwards 0.8s;
          animation: character-icon-open 1s ease forwards 0.8s;
}

.start .keyword-list__item:nth-of-type(5) {
  -webkit-animation: character-icon-open 1s ease forwards 1s;
          animation: character-icon-open 1s ease forwards 1s;
}

.keyword-card {
  background: url(../img/img_dirt.png) -95% -240px no-repeat, url(../img/bg_paperwhite.jpg) 0 0 repeat;
  background-size: 85% auto, auto;
  -webkit-box-shadow: 0 0 80px 30px rgba(0, 0, 0, 0.4) inset, 0 10px 10px 5px black;
          box-shadow: 0 0 80px 30px rgba(0, 0, 0, 0.4) inset, 0 10px 10px 5px black;
  width: 100%;
  padding: 0 4% 4%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  border-top: 5px ridge #b79952;
  border-bottom: 5px ridge #b79952;
  position: relative;
}

.keyword-card-caption {
  margin: 0 auto;
  text-align: center;
  font-size: 2.5em;
  font-weight: 900;
  padding: 0 0 0.1em;
  margin-bottom: 0.4em;
  border-bottom: 1px solid #1b1b1b;
  text-shadow: rgba(255, 255, 255, 0.3) 1px 1px 7px, rgba(255, 255, 255, 0.3) -1px 1px 7px, rgba(255, 255, 255, 0.3) 1px -1px 7px, rgba(255, 255, 255, 0.3) -1px -1px 7px;
  background: url(../img/img_deco_comwin.png) 100% 0 no-repeat, url(../img/img_deco_comwin.png) 0 0 no-repeat;
  background-size: 100px auto;
}

.keyword-card-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.keyword-card-image {
  max-width: 330px;
  position: relative;
  margin-right: 2%;
}

.keyword-card-image img {
  vertical-align: bottom;
  width: 100%;
}

.keyword-card-text {
  text-align: justify;
  text-justify: inter-ideograph;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
}

.keyword-card-text__lines {
  display: block;
  font-size: 1.1em;
  font-weight: 700;
  font-style: italic;
}

.keyword-card-text__lines:nth-of-type(n + 2) {
  text-indent: 5em;
}

.keyword-card-text__lines:last-of-type {
  margin-bottom: 0.5em;
}

/* CHARACTER --------------------------------*/
.character {
  display: block;
  width: 100%;
  min-height: 80vh;
  position: relative;
}

.character-content {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0 2%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.bg-character {
  display: block;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: url(../img/character/blood_character.png) 0 100% no-repeat, url(../img/character/bg_character.jpg) 50% 50% no-repeat;
  background-size: cover;
  z-index: -5;
}

.character-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}

.character-list__item {
  width: 13.42857%;
  position: relative;
  opacity: 0;
}

.character-list__item:not(:nth-of-type(7n + 1)) {
  margin-left: 1%;
}

.character-list__item:nth-of-type(2n) {
  margin-top: 1%;
}

.start .character-list__item:nth-of-type(1) {
  -webkit-animation: character-icon-open 1s ease forwards 0.1s;
          animation: character-icon-open 1s ease forwards 0.1s;
}

.start .character-list__item:nth-of-type(2) {
  -webkit-animation: character-icon-open 1s ease forwards 0.1s;
          animation: character-icon-open 1s ease forwards 0.1s;
}

.start .character-list__item:nth-of-type(3) {
  -webkit-animation: character-icon-open 1s ease forwards 0.1s;
          animation: character-icon-open 1s ease forwards 0.1s;
}

.start .character-list__item:nth-of-type(4) {
  -webkit-animation: character-icon-open 1s ease forwards 0.1s;
          animation: character-icon-open 1s ease forwards 0.1s;
}

.start .character-list__item:nth-of-type(5) {
  -webkit-animation: character-icon-open 1s ease forwards 0.1s;
          animation: character-icon-open 1s ease forwards 0.1s;
}

.start .character-list__item:nth-of-type(6) {
  -webkit-animation: character-icon-open 1s ease forwards 0.1s;
          animation: character-icon-open 1s ease forwards 0.1s;
}

.start .character-list__item:nth-of-type(7) {
  -webkit-animation: character-icon-open 1s ease forwards 0.1s;
          animation: character-icon-open 1s ease forwards 0.1s;
}

.start .character-list__item:nth-of-type(8) {
  -webkit-animation: character-icon-open 1s ease forwards 0.5s;
          animation: character-icon-open 1s ease forwards 0.5s;
}

.start .character-list__item:nth-of-type(9) {
  -webkit-animation: character-icon-open 1s ease forwards 0.5s;
          animation: character-icon-open 1s ease forwards 0.5s;
}

.start .character-list__item:nth-of-type(10) {
  -webkit-animation: character-icon-open 1s ease forwards 0.5s;
          animation: character-icon-open 1s ease forwards 0.5s;
}

.start .character-list__item:nth-of-type(11) {
  -webkit-animation: character-icon-open 1s ease forwards 0.5s;
          animation: character-icon-open 1s ease forwards 0.5s;
}

.start .character-list__item:nth-of-type(12) {
  -webkit-animation: character-icon-open 1s ease forwards 0.5s;
          animation: character-icon-open 1s ease forwards 0.5s;
}

.start .character-list__item:nth-of-type(13) {
  -webkit-animation: character-icon-open 1s ease forwards 0.5s;
          animation: character-icon-open 1s ease forwards 0.5s;
}

.start .character-list__item:nth-of-type(14) {
  -webkit-animation: character-icon-open 1s ease forwards 0.5s;
          animation: character-icon-open 1s ease forwards 0.5s;
}

.character-card {
  display: block;
  width: 100%;
  position: relative;
}

.character-card:hover img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.character-card[data-chara="open"]:after {
  content: "";
  display: block;
  width: 51.98556%;
  height: 0;
  padding-bottom: 27.07581%;
  background: url(../img/character/icon_open.png) 0 0 no-repeat;
  background-size: cover;
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-animation: character-icon-mark 0.7s ease 1.2s forwards;
          animation: character-icon-mark 0.7s ease 1.2s forwards;
}

.character-card img {
  vertical-align: bottom;
  width: 100%;
  -webkit-transition: -webkit-transform 0.15s ease;
  transition: -webkit-transform 0.15s ease;
  transition: transform 0.15s ease;
  transition: transform 0.15s ease, -webkit-transform 0.15s ease;
}

.profile-content {
  display: block;
  max-width: 1280px;
  position: relative;
}

.profile-bg-deco {
  background: url(../img/character/img_note_character.png) 70% 50% no-repeat, url(../img/character/blood_charapop.png) 100% 100% no-repeat, url(../img/character/mark_tantei.png) 0 50% no-repeat;
  background-size: auto 120%, 56.32812% auto, auto 95%;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 20px;
  z-index: -4;
}

.profile-bg-deco-unopened {
  background: url(../img/character/blood_character_unopened.png) 100% 100% no-repeat;
  background-size: 100% 100%;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 20px;
  z-index: -4;
}

.profile-bg {
  background: url(../img/character/bg_character_modal.png) 0 0 repeat;
  display: block;
  width: 96%;
  height: 96%;
  position: absolute;
  top: calc(50% - 48%);
  left: calc(50% - 48%);
  z-index: -5;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: 0 0 30px 0 #b79952 inset;
          box-shadow: 0 0 30px 0 #b79952 inset;
  border-radius: 20px;
  -webkit-filter: blur(10px);
          filter: blur(10px);
}

.profile-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 5% 7% 5% 3%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.profile-image {
  display: block;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  max-height: 95%;
}

.profile-image-unopened {
  display: block;
  position: relative;
}

.profile-info {
  display: block;
  width: 70%;
  z-index: 10;
  margin: auto 0 auto auto;
}

.profile-name-space {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.profile-name {
  display: block;
  margin-left: -3%;
  width: 50%;
}

.profile-career {
  display: block;
  position: relative;
  width: 50%;
}

.profile-hr {
  width: 100%;
}

.profile-cv {
  display: block;
  margin: auto -3% auto auto;
}

.profile-lines {
  max-width: 95%;
  display: inline-block;
  margin-left: -3%;
  margin-top: -20px;
}

.profile-text {
  font-size: 0.9em;
  color: white;
  text-shadow: black 1px 1px 7px, black -1px 1px 7px, black 1px -1px 7px, black -1px -1px 7px;
  text-align: justify;
  text-justify: inter-ideograph;
  line-height: 1.7;
}

.profile-text b {
  color: #fc7700;
}

.profile-voice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  width: 40%;
  margin: 10px 0 auto auto;
  position: relative;
}

.profile-voice__item:nth-of-type(1) {
  height: 20%;
}

.profile-voice__item:nth-of-type(1) img {
  vertical-align: bottom;
  width: 100%;
  margin-right: 3%;
}

.profile-name-unopened {
  display: block;
  margin: 0 auto 0;
}

.profile-icon-unopened {
  display: block;
  width: 100px;
  margin: 3% auto 0;
}

.btn-voice {
  width: 100%;
  -webkit-transition: -webkit-transform 0.15s ease;
  transition: -webkit-transform 0.15s ease;
  transition: transform 0.15s ease;
  transition: transform 0.15s ease, -webkit-transform 0.15s ease;
}

.btn-voice:hover {
  -webkit-transform: translate(0, -10px);
          transform: translate(0, -10px);
}

.btn-voice img {
  vertical-align: auto;
  width: 100%;
}

/* SYSTEM --------------------------------*/
.system {
  display: block;
  width: 100%;
  position: relative;
}

.system-content {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.system-window-section {
  display: block;
  width: 100%;
  position: relative;
}

.system-window-section:last-child {
  margin-bottom: 50px;
}

.system-window {
  display: block;
  width: 100%;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: url(../img/system/img_note_system.png) 50% 50% repeat-y, url(../img/system/dirt_system.png) 100% 100% no-repeat, url(../img/bg_paperwhite.jpg) 0 0 repeat;
  background-size: 50% auto, auto, auto;
  -webkit-box-shadow: 0 0 188px 28px rgba(0, 0, 0, 0.5) inset;
          box-shadow: 0 0 188px 28px rgba(0, 0, 0, 0.5) inset;
}

.system-window:after, .system-window:before {
  content: "";
  display: block;
  width: 100%;
  height: 27px;
  background: url(../img/window_frame.png) 50% 50% repeat-x;
}

.system-window-content {
  display: block;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  padding: 0 2% 100px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.sub-navi-button[data-btn="adventure"] {
  background: url("../img/system/subnav_adventure.png") 0 0 no-repeat;
  background-size: 100% auto;
}

.sub-navi-button[data-btn="adventure"] img {
  background: url("../img/system/subnav_adventure.png") 0 0 no-repeat;
  background-size: 100% auto;
  background-position: 0 100%;
}

.sub-navi-button[data-btn="simulation"] {
  background: url("../img/system/subnav_simulation.png") 0 0 no-repeat;
  background-size: 100% auto;
}

.sub-navi-button[data-btn="simulation"] img {
  background: url("../img/system/subnav_simulation.png") 0 0 no-repeat;
  background-size: 100% auto;
  background-position: 0 100%;
}

.sub-navi-button[data-btn="investigation"] {
  background: url("../img/system/subnav_investigation.png") 0 0 no-repeat;
  background-size: 100% auto;
}

.sub-navi-button[data-btn="investigation"] img {
  background: url("../img/system/subnav_investigation.png") 0 0 no-repeat;
  background-size: 100% auto;
  background-position: 0 100%;
}

.sub-navi-button[data-btn="gameflow"] {
  background: url("../img/system/subnav_gameflow.png") 0 0 no-repeat;
  background-size: 100% auto;
}

.sub-navi-button[data-btn="gameflow"] img {
  background: url("../img/system/subnav_gameflow.png") 0 0 no-repeat;
  background-size: 100% auto;
  background-position: 0 100%;
}

.sub-navi-button[data-btn="collection"] {
  background: url("../img/system/subnav_collection.png") 0 0 no-repeat;
  background-size: 100% auto;
}

.sub-navi-button[data-btn="collection"] img {
  background: url("../img/system/subnav_collection.png") 0 0 no-repeat;
  background-size: 100% auto;
  background-position: 0 100%;
}

.caption-system-section-adventure {
  width: 100%;
  position: relative;
  margin: 50px auto 100px;
  padding: 30px 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5), 0 0 80px 40px rgba(0, 0, 0, 0.2) inset;
          box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5), 0 0 80px 40px rgba(0, 0, 0, 0.2) inset;
  background: url(../img/bg_pattern50_red.jpg) 0 0 repeat;
}

.caption-system-section-simulation {
  width: 100%;
  position: relative;
  margin: 50px auto 100px;
  padding: 30px 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5), 0 0 80px 40px rgba(0, 0, 0, 0.2) inset;
          box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5), 0 0 80px 40px rgba(0, 0, 0, 0.2) inset;
  background: url(../img/bg_pattern50_systemblue.jpg) 0 0 repeat;
}

.caption-system-section-text {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}

.caption-system-section-text img {
  width: 100%;
  vertical-align: bottom;
}

.caption-system-section__frame-top, .caption-system-section__frame-bottom {
  width: 100%;
  display: block;
  position: absolute;
  left: 0;
}

.caption-system-section__frame-top {
  top: -70px;
}

.caption-system-section__frame-bottom {
  bottom: -70px;
}

.subsection-adventure,
.subsection-simulation,
.subsection-investigation,
.subsection-gameflow,
.subsection-collection {
  width: 100%;
  margin: 0 auto;
  position: relative;
  opacity: 0;
  display: none;
}

.subsection-adventure.show,
.subsection-simulation.show,
.subsection-investigation.show,
.subsection-gameflow.show,
.subsection-collection.show {
  display: block;
  -webkit-animation: subsection-open 1s ease forwards;
          animation: subsection-open 1s ease forwards;
}

.button-investigation {
  display: block;
  width: 60%;
  margin: 10% auto 0;
  -webkit-transition: -webkit-transform 0.15s ease;
  transition: -webkit-transform 0.15s ease;
  transition: transform 0.15s ease;
  transition: transform 0.15s ease, -webkit-transform 0.15s ease;
}

.button-investigation:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.button-investigation img {
  width: 100%;
  vertical-align: bottom;
}

.system-blockA {
  width: 100%;
  position: relative;
}

.system-blockA:not(:first-of-type) {
  margin-top: 10%;
}

.system-subcaption {
  width: 70%;
  margin: 0 auto;
  position: relative;
}

.system-subcaption img {
  width: 100%;
  vertical-align: bottom;
}

.system-point {
  width: 60%;
  margin: 0 auto;
  position: relative;
}

.system-point img {
  width: 100%;
  vertical-align: bottom;
}

.system-point:not(:first-child) {
  margin-top: 8%;
}

.system-image {
  width: 60%;
  position: relative;
  margin: 0 auto;
}

.system-image:not(:first-child) {
  margin-top: 3%;
}

.system-ss-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  position: relative;
}

.system-ss-list:not(:first-child) {
  margin-top: 3%;
}

.system-ss-list__item {
  display: inline-block;
  width: 49%;
  min-height: 0%;
  position: relative;
}

.system-ss-list__item:nth-of-type(n+3) {
  margin-top: 2%;
}

.system-text-box {
  width: 100%;
  position: relative;
  padding: 2% 5%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: url(../img/deco_side.png) right -4% top 0 repeat-y, url(../img/deco_side.png) -4% 0 repeat-y, url(../img/bg_pattern20.jpg) 0 0 repeat;
  background-size: 7% auto, 7% auto, auto;
  border-top: 5px ridge #b79952;
  border-bottom: 5px ridge #b79952;
  -webkit-box-shadow: 0 10px 10px 5px rgba(0, 0, 0, 0.5);
          box-shadow: 0 10px 10px 5px rgba(0, 0, 0, 0.5);
}

.system-text-box:not(:first-child) {
  margin-top: 3%;
}

.system-text {
  font-weight: 400;
  text-align: justify;
  text-justify: inter-ideograph;
  color: white;
}

.system-text b {
  font-weight: 700;
  color: #fc7700;
}

.ss-arrow {
  height: 60%;
  position: absolute;
  right: -10%;
  top: calc(50% - 30%);
  z-index: 10;
  pointer-events: none;
}

.system-map-point {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 93%;
  margin: 7% auto 0;
  position: relative;
}

.system-map-point__item {
  width: 48.5%;
  position: relative;
  padding: 1em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: url(../img/bg_pattern20trans.png) 0 0 repeat;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  border: 3px solid #b79952;
  border-radius: 20px;
}

.system-map-point__item:nth-of-type(n + 3) {
  margin-top: 4%;
}

.map-point-name {
  width: 85%;
  text-align: center;
  padding: 0.2em 0;
  font-size: 1.2em;
  position: relative;
  top: -1.2em;
  margin: 0 auto 0;
  border-radius: 1000px;
  background: #b79952;
  color: #1b1b1b;
  font-weight: 900;
  text-shadow: 0 2px rgba(255, 255, 255, 0.5);
  -webkit-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.4);
          box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.4);
}

.map-point-image {
  width: 60%;
  height: 0;
  padding-bottom: 60%;
  margin-top: 1em;
  border-radius: 1000px;
  overflow: hidden;
  margin: 1em auto 0;
  position: relative;
  border: 1px solid #b79952;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

.map-point-image img {
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.map-point-text {
  color: white;
  font-size: 0.8em;
  text-shadow: rgba(0, 0, 0, 0.6) 1px 1px 5px, rgba(0, 0, 0, 0.6) -1px 1px 5px, rgba(0, 0, 0, 0.6) 1px -1px 5px, rgba(0, 0, 0, 0.6) -1px -1px 5px;
}

.map-point-text b {
  font-weight: 500;
  color: #ffe2a2;
}

.system-action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 93%;
  margin: 7% auto 0;
}

.system-action__item {
  width: 100%;
  min-height: 0%;
  position: relative;
  padding: 1em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: url(../img/bg_pattern20trans.png) 0 0 repeat;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3), 0 0 50px 20px rgba(0, 0, 0, 0.3) inset;
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3), 0 0 50px 20px rgba(0, 0, 0, 0.3) inset;
  border: 3px solid #b79952;
  border-radius: 20px;
}

.system-action__item:not(:first-of-type) {
  margin-top: 5%;
}

.action-name {
  width: 50%;
  text-align: center;
  padding: 0.2em 0;
  font-size: 1.5em;
  position: relative;
  top: -1.2em;
  margin: 0 auto 0;
  border-radius: 1000px;
  background: #b79952;
  color: #1b1b1b;
  font-weight: 900;
  text-shadow: 0 2px rgba(255, 255, 255, 0.5);
  -webkit-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.4);
          box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.4);
}

.action-text {
  color: white;
  font-size: 0.9em;
  text-shadow: rgba(0, 0, 0, 0.7) 1px 1px 5px, rgba(0, 0, 0, 0.7) -1px 1px 5px, rgba(0, 0, 0, 0.7) 1px -1px 5px, rgba(0, 0, 0, 0.7) -1px -1px 5px;
}

.action-text b {
  font-weight: 500;
  color: #ffe2a2;
}

.system-ss-comment {
  display: block;
  position: absolute;
  padding: 0.2em 0.5em;
  top: -2%;
  left: -3%;
  background: #b79952;
  color: #1b1b1b;
  font-weight: 700;
  text-shadow: 0 2px rgba(255, 255, 255, 0.5);
  font-size: 1.3em;
  -webkit-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.4);
          box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.4);
  z-index: 10;
  line-height: 1.2;
  pointer-events: none;
}

.system-ss-simulation-point01 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  width: 100%;
  position: relative;
  margin: 5% auto 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 3%;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.2) inset;
          box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.2) inset;
}

.system-ss-simulation-point01__item {
  width: 40%;
  min-height: 0%;
  position: relative;
}

.system-ss-simulation-point01__item img {
  vertical-align: bottom;
  width: 100%;
  border-radius: 20px;
}

.system-ss-simulation-point01__item:nth-of-type(2) {
  width: 8%;
  position: relative;
  margin: 10% -10% 0;
  z-index: 10;
}

.system-ss-simulation-point02 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  margin: 5% auto 0;
  padding: 3%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.2) inset;
          box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.2) inset;
}

.system-ss-simulation-point02__arrow {
  display: block;
  width: 8%;
  min-height: 0%;
}

.system-ss-simulation03 {
  width: 30%;
  min-height: 0%;
  position: relative;
  border-radius: 26px;
  border: 5px outset #b79952;
}

.system-ss-simulation03 img {
  vertical-align: bottom;
  width: 100%;
  border-radius: 20px;
}

.system-ss-list-simulation-point02 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 50%;
  position: relative;
}

.system-ss-list-simulation-point02__item {
  width: 100%;
  min-height: 0%;
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
}

.system-ss-list-simulation-point02__item:nth-of-type(2) {
  margin-top: 5%;
}

.system-investigation03-catch01 {
  margin: 5% auto 0;
  text-align: center;
  font-weight: 700;
  font-size: 1.5em;
  border-top: 5px solid #b79952;
  border-bottom: 5px solid #b79952;
  background: #1b1b1b;
  color: #dddcdc;
}

.image-system-mplock {
  width: 37%;
  height: 0;
  padding-bottom: 37%;
  position: absolute;
  bottom: 0;
  right: -16%;
  pointer-events: none;
}

.image-system-mplock__image {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  border-radius: 1000px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.image-system-mplock__image img {
  width: 100%;
  vertical-align: bottom;
}

/* GALLERY --------------------------------*/
.bg-gallery {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: url("../img/gallery/bg_gallery.jpg") 50% 50% no-repeat;
  background-size: cover;
  z-index: -10;
}

.gallery-content {
  background: url(../img/blood_common.png) 100% 100% no-repeat;
  background-size: 30% auto;
  padding: 0 0 50px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-shadow: rgba(42, 36, 30, 0.05) 1px 1px 7px, rgba(42, 36, 30, 0.05) -1px 1px 7px, rgba(42, 36, 30, 0.05) 1px -1px 7px, rgba(42, 36, 30, 0.05) -1px -1px 7px;
}

.gallery-movie-section {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.gallery-movie-section:nth-of-type(n+2) {
  margin-top: 6%;
}

.gallery-movie {
  width: 95%;
  margin: 0 auto;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.gallery-images {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
}

.gallery-images__item {
  width: 49%;
  position: relative;
  background: rgba(42, 36, 30, 0.7);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.gallery-images__item:nth-of-type(2n) {
  margin-left: 2%;
}

.gallery-images__item:nth-of-type(n + 3) {
  margin-top: 2%;
}

.gallery-image-text {
  color: white;
  width: 100%;
  padding: 1em;
  font-size: 0.8em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: justify;
  text-justify: inter-ideograph;
  position: relative;
}

/* PRODUCT --------------------------------*/
.bg-product {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: url("../img/product/bg_product.jpg") 50% 50% no-repeat;
  background-size: cover;
  z-index: -10;
}

.product-content {
  background: url(../img/blood_common.png) 100% 100% no-repeat;
  background-size: 30% auto;
  padding: 0 0 50px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-shadow: rgba(42, 36, 30, 0.05) 1px 1px 7px, rgba(42, 36, 30, 0.05) -1px 1px 7px, rgba(42, 36, 30, 0.05) 1px -1px 7px, rgba(42, 36, 30, 0.05) -1px -1px 7px;
  position: relative;
}

.product-price {
  font-size: 1.3em;
  font-weight: 700;
  text-align: right;
}

.product-price b {
  font-size: 1.4em;
}

.product-goodslist {
  background: url(../img/bg_pattern20trans.png) 0 0 repeat;
  width: 100%;
  padding: 1em;
  line-height: 1.8;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}

.product-goodslist__item {
  display: list-item;
  color: white;
  font-weight: 700;
  list-style: square inside;
  text-shadow: rgba(0, 0, 0, 0.3) 1px 1px 7px, rgba(0, 0, 0, 0.3) -1px 1px 7px, rgba(0, 0, 0, 0.3) 1px -1px 7px, rgba(0, 0, 0, 0.3) -1px -1px 7px;
}

.product-spec-table {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
}

.product-spec-table th {
  width: 30%;
  padding: 0.5em 0;
  background: #1b1b1b;
  color: white;
}

.product-spec-table td {
  width: 70%;
  padding: 0.5em 1em;
}

.product-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  position: relative;
}

.product-info__left {
  width: 45%;
  position: relative;
}

.product-info__right {
  width: 53%;
  position: relative;
}

.product-package-image {
  vertical-align: bottom;
  width: 100%;
}

.benefits-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  position: relative;
}

.benefits-list__item {
  width: 49%;
  position: relative;
}

.benefits-list__item:nth-of-type(n + 3) {
  margin-top: 2%;
}

.benefit-box {
  background: url(../img/img_dirt.png) -95% -240px no-repeat, url(../img/bg_pattern20.jpg) 0 0 repeat;
  background-size: 85% auto, auto;
  -webkit-box-shadow: 0 0 80px 30px rgba(0, 0, 0, 0.4) inset, 0 10px 10px 5px rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 80px 30px rgba(0, 0, 0, 0.4) inset, 0 10px 10px 5px rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  padding: 4% 4%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  border-top: 5px ridge #b79952;
  border-bottom: 5px ridge #b79952;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.benefit-store-name {
  width: 100%;
  text-align: center;
  font-size: 1.3em;
  position: relative;
  padding: 0.1em 0;
  background: url(../img/img_deco_comwin_subcap.png) 3% 50% no-repeat, url(../img/img_deco_comwin_subcap.png) 97% 50% no-repeat, #b79952;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  color: white;
}

.benefit-goods-image, .benefit-goods-image-nowprinting {
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 70%;
  position: relative;
  background: url(../img/bg_paperwhite.jpg) 0 0 repeat;
  margin-top: 1em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.benefit-goods-image img, .benefit-goods-image-nowprinting img {
  vertical-align: bottom;
  max-width: 95%;
  max-height: 95%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.benefit-goods-image-nowprinting:after {
  content: "Now Printing...";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  font-size: 2em;
  font-weight: 700;
  color: white;
  position: absolute;
  top: 0;
  left: 0;
}

.benefit-goods-name {
  margin: 1em auto;
  text-align: center;
  color: #dddcdc;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.benefit-order-buttons {
  width: 100%;
  margin-top: auto;
  position: relative;
}

/* NOVEL --------------------------------*/
.novel-button {
  display: block;
  width: 100%;
  padding: 1.2em 0 1.2em 1em;
  background: url(../img/bg_pattern50_blue.jpg) 0 0 repeat;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  margin: 0 auto;
  -webkit-transition: background-image 0.15s ease;
  transition: background-image 0.15s ease;
}

.novel-button:not(:first-child) {
  margin-top: 1em;
}

.novel-button__title {
  font-size: 1.5em;
  font-weight: 700;
  position: relative;
  z-index: 5;
  -webkit-transition: text-shadow 0.15s ease;
  transition: text-shadow 0.15s ease;
}

.novel-button:hover {
  background-image: url(../img/bg_pattern50_systemblue.jpg);
}

.novel-button:hover [class^="novel-button__image"] {
  opacity: 1;
}

.novel-button:hover .novel-button__title {
  text-shadow: rgba(255, 255, 255, 0.3) 1px 1px 7px, rgba(255, 255, 255, 0.3) -1px 1px 7px, rgba(255, 255, 255, 0.3) 1px -1px 7px, rgba(255, 255, 255, 0.3) -1px -1px 7px;
}

[class^="novel-button__image"] {
  position: absolute;
  opacity: 0.5;
  -webkit-transition: opacity 0.15s ease;
  transition: opacity 0.15s ease;
}

.novel-button__image-sibuya {
  width: 45%;
  right: -10%;
  top: -59%;
}

.novel-button__image-kazoku {
  width: 42%;
  right: -10%;
  top: -110%;
}

.novel-button__image-gedou {
  width: 55%;
  right: -25%;
  top: -71%;
}

.novel-button__image-busou {
  width: 55%;
  right: -20%;
  top: -71%;
}

.novel-button__image-makai {
  width: 55%;
  right: -18%;
  top: -71%;
}

.novel-button__image-bishoku {
  width: 50%;
  right: -25%;
  top: -57%;
}

.novel-button__image-yamato {
  width: 35%;
  right: -13%;
  top: -180%;
}

.novel-button__image-bungaku {
  width: 40%;
  right: -10%;
  top: -120%;
}

.novel-button__image-higyaku {
  width: 40%;
  right: -8%;
  top: -60%;
}

.novel-button__image-madogiwa {
  width: 23%;
  right: -1%;
  top: -26%;
}

.novel-button__image-rousi {
  width: 27%;
  right: -3%;
  top: -28%;
}

.novel-button__image-kagaku {
  width: 37%;
  right: -5%;
  top: -28%;
}

.novel-button__image-shatiku {
  width: 38%;
  right: -12%;
  top: -54%;
}

.novel-button__image-munou {
  width: 33%;
  right: -7%;
  top: -68%;
}

.novel-button__image-risou {
  width: 31%;
  right: -5%;
  top: -37%;
}

.novel-page-navi {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 2em;
  font-size: 1.5em;
}

.novel-page-prev,
.novel-page-top,
.novel-page-next {
  text-decoration: none;
  color: #1b1b1b !important;
  -webkit-transition: -webkit-transform 0.15s ease;
  transition: -webkit-transform 0.15s ease;
  transition: transform 0.15s ease;
  transition: transform 0.15s ease, -webkit-transform 0.15s ease;
  width: 33.33%;
  text-align: center;
}

.novel-page-prev:hover,
.novel-page-top:hover,
.novel-page-next:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.novel-image-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 60%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
}

.madogiwa-image-wrapper {
  position: relative;
  width: 95%;
  max-width: 960px;
  margin: 0 auto;
}

.madogiwa-image-wrapper.vertical {
  position: relative;
  height: 800px;
  width: auto;
}

.madogiwa-image-wrapper.vertical img {
  display: block;
  height: 100%;
  width: auto;
  margin: 0 auto;
}

.madogiwa-last-button {
  display: block;
  width: 100%;
  padding: 1.2em 0 1.2em 1em;
  background: url(../img/bg_pattern50_red.jpg) 0 0 repeat;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  margin: 0 auto;
  -webkit-transition: background-image 0.15s ease;
  transition: background-image 0.15s ease;
}

.madogiwa-last-button:not(:first-child) {
  margin-top: 1em;
}

.madogiwa-last-button__title {
  font-size: 1.5em;
  font-weight: 700;
  position: relative;
  z-index: 5;
  -webkit-transition: text-shadow 0.15s ease;
  transition: text-shadow 0.15s ease;
}

.madogiwa-last-button:hover {
  background-image: url(../img/bg_pattern50_red.jpg);
}

.madogiwa-last-button:hover .madogiwa-last-button__title {
  text-shadow: rgba(255, 255, 255, 0.3) 1px 1px 7px, rgba(255, 255, 255, 0.3) -1px 1px 7px, rgba(255, 255, 255, 0.3) 1px -1px 7px, rgba(255, 255, 255, 0.3) -1px -1px 7px;
}