body {
  height: auto;
  margin: 0 auto; }

img {
  width: 100%; }

a {
  text-decoration: none;
  color: #000; }

.border-f-1px {
  border: 1px solid #fff; }

@media screen and (min-width: 720px) {
  body {
    background: url(../img/body_us.jpg) no-repeat;
    background-size: cover;
    background-attachment: fixed; } }

.pagelink {
  display: block;
  margin-top: -58px !important;
  padding-bottom: 58px !important; }

.mb-00 {
  margin-bottom: 0 !important; }

.mb-20 {
  margin-bottom: 20px; }

.mb-30 {
  margin-bottom: 30px; }

.align-center {
  text-align: center; }

.align-left {
  text-align: left; }

.align-right {
  text-align: right; }

.border-top-glay {
  border-top: 1px solid #d4d4d4; }

.p00,
.pa-0 {
  padding: 0px !important; }

.pa-10 {
  padding: 10px !important; }

.pa-15 {
  padding: 15px !important; }

.pa-20 {
  padding: 20px !important; }

.pa-25 {
  padding: 25px !important; }

.pa-30 {
  padding: 30px !important; }

.mb-10 {
  margin-bottom: 10px; }

.mb-20 {
  margin-bottom: 20px; }

.bg-white {
  background: #fff; }

.bg-skyblue {
  background: #72b6e5; }

.bg-glay {
  background: #f8f8f8; }

.link-underline {
  text-decoration: underline !important; }

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box; }

*:after {
  display: block;
  clear: both; }

article,
aside,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block; }

html,
body {
  -webkit-text-size-adjust: none;
  width: 100%;
  height: 100%; }

li,
ol {
  list-style: none; }

.gnavi {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  clear: both;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: rgba(255, 255, 255, 0.8);
  min-height: 1px;
  padding-top: 3px;
  z-index: 1000; }
  .gnavi:after {
    content: " ";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden; }
  .gnavi ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0 1px;
    justify-content: space-around; }
    .gnavi ul li {
      width: 32.8%;
      border: 2px solid #000;
      text-align: center;
      -ms-flex-pack: distribute;
      margin-bottom: 2px;
      justify-content: space-around;
      position: relative;
      letter-spacing: 1px;
      background: #fff; }
      .gnavi ul li img {
        max-width: 81.6%; }
      .gnavi ul li a {
        padding: 20px 0;
        display: block; }
      .gnavi ul li a.mogi {
        padding: 10px 0 20px; }
      .gnavi ul li a.event {
        padding: 20px 0 20px; }
      .gnavi ul li a.song {
        padding: 13px 0 5px; }
    .gnavi ul li::before {
      content: "";
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 16px 16px 0 0;
      border-color: #000000 transparent transparent transparent;
      z-index: 100;
      position: absolute; }

@media screen and (min-width: 720px) {
  .gnavi {
    width: 750px;
    left: 50%;
    margin: 0 0 0 -375px;
    font-size: 16px; }
    .gnavi ul li {
      width: 33%; }
      .gnavi ul li img {
        max-width: 140px; }
      .gnavi ul li a {
        padding: 26px 0 20px;
        display: block; }
      .gnavi ul li a.mogi {
        padding: 10px 0 20px; }
      .gnavi ul li a.event {
        padding: 26px 0 20px; }
      .gnavi ul li a.song {
        padding: 14px 0 12px; } }

header {
  background: #fff;
  border-bottom: 2px solid #000;
  min-height: 1px; }
  header:after {
    content: " ";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden; }
  header h1 {
    max-width: 63%;
    margin-top: 5px;
    margin-left: 4px;
    float: left; }
  header nav {
    float: right;
    max-width: 25%; }
    header nav ul {
      margin-top: 14px;
      margin-right: 14px; }
      header nav ul li {
        max-width: 43%; }
      header nav ul li:nth-child(1) {
        float: left; }
      header nav ul li:nth-child(2) {
        float: right; }

.wrapper {
  max-width: 750px;
  margin: auto;
  position: relative;
  background: #fff; }
  .wrapper img {
    vertical-align: bottom;
    line-height: 100%; }

@keyframes fadeIn {
  0% {
    opacity: 0.5; }
  100% {
    opacity: 1; } }

footer {
  position: relative;
  padding-bottom: 24vh; }

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  margin: 0 auto;
  text-align: center;
  background-position: center;
  background-repeat: no-repeat; }

footer .wrap {
  max-width: 380px; }

footer .redirectArea {
  padding-top: 1vh;
  text-align: center; }

footer .redirectBtn {
  display: inline-block;
  width: 46%;
  vertical-align: top; }

footer .redirectBtn a {
  display: inline-block;
  width: 100%;
  padding: 10% 0;
  text-align: center;
  color: #f0f0f0;
  background: #826634;
  background-image: linear-gradient(top, #826634, #654a1a);
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #826634;
  border-top: 1px solid #af9057;
  border-bottom: 2px solid #382607;
  font-size: 3vw;
  text-decoration: none;
  line-height: 1.5;
  border-radius: 5px; }

footer .redirectBtn a span {
  color: #f0f0f0;
  font-size: 4vw;
  font-weight: bold; }

footer .shiroLogo {
  position: relative;
  text-align: center;
  width: 100%;
  margin: 0 auto;
  padding: 8vh 0 1vh; }

footer .shiroLogo span {
  width: 100%; }

footer .shiroLogo span img {
  text-align: center;
  width: 120px;
  margin: 0 auto; }

footer .appNotice {
  width: 100%;
  margin: 0 auto;
  padding: 0 2%;
  border-radius: 4px;
  font-size: 9px;
  letter-spacing: .2em; }

footer .appNotice li {
  margin: 0 0 8px 20px;
  list-style-type: disc;
  line-height: 1.5; }

footer .appNotice li:last-child {
  margin-bottom: 0; }

footer .appArea {
  /* background:url(/shironekoproject/zero_chronicle/img/footer_app_bg.png) 50% 0 repeat-y;  */
  background-size: 100%; }

footer .appArea ul {
  padding: 3vh 0;
  width: 100%;
  text-align: center; }

footer .appArea li {
  display: inline-block;
  width: 30%; }

footer .appArea li img {
  width: 100%;
  height: auto; }

footer .link {
  position: relative;
  padding: 3vh 0 5vh;
  text-align: center;
  font-size: 10px;
  z-index: 10;
  line-height: 1.3;
  letter-spacing: .1em;
  text-indent: .1em; }

footer .copyright {
  position: relative;
  padding: 3vh 0 5vh;
  text-align: center;
  font-size: 10px;
  z-index: 10;
  line-height: 1.3;
  letter-spacing: .3em;
  text-indent: .3em; }

.snsArea {
  padding: 10vh 0 10vh;
  width: 100%;
  text-align: center; }

.snsArea li {
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px; }

.snsArea li.btn {
  width: 10%; }

.snsArea li.btn img {
  width: 100%; }

.loading {
  width: 100%;
  height: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
  display: table;
  z-index: 1000000; }
  .loading .loading-icon {
    display: table-cell;
    vertical-align: middle;
    margin: auto; }
    .loading .loading-icon img {
      max-width: 59px;
      animation: bound .3s ease infinite alternate; }

@keyframes bound {
  0% {
    transform: translateY(0px); }
  100% {
    transform: translateY(-10px); } }

@media screen and (min-width: 720px) {
  .loading .loading-icon img {
    max-width: 118px; } }

.changebtn {
  clear: both;
  text-align: center;
  color: #fff;
  background: #fff;
  padding: 0px 20px 20px; }

.top header {
  border-bottom: none; }

.top .keyvisual {
  clear: both;
  padding-top: 67%;
  position: relative;
  overflow: hidden; }
  .top .keyvisual .disnone {
    display: none; }
  .top .keyvisual h1.catchcopy {
    position: absolute;
    left: 3.3%;
    opacity: 0;
    top: 18%;
    z-index: 101;
    max-width: 54%; }
  .top .keyvisual #chara {
    position: absolute;
    right: 22px;
    bottom: -2px;
    z-index: 100;
    max-width: 48%; }
  .top .keyvisual p {
    position: absolute;
    top: 0;
    left: 0; }

.top .top_img01 {
  background: url(../img/top_img01_bg_us.png) repeat-x;
  background-size: 100% auto;
  padding-top: 85%; }
  .top .top_img01 p {
    max-width: 84.5%;
    margin: -28.7% auto 0; }

.top .top_img02 {
  background: #f1e5d7;
  padding: 30px; }

@media screen and (min-width: 720px) {
  .top .keyvisusal h1.catchcopy {
    left: 4%; }
  .top .top_img02 {
    padding: 35px 54px 45px; } }

.btn-wrap {
  position: relative; }
  .btn-wrap .stop {
    max-width: 5.86%;
    position: absolute;
    left: 33.3%;
    top: 38%;
    opacity: 0; }

.css-change {
  height: auto;
  margin: 0 auto;
  background: #000;
  /*top*/ }
  .css-change .loading {
    width: 100%;
    height: 100%;
    background: #000; }
  .css-change .catchcopy {
    width: 64%;
    position: absolute;
    left: 0;
    top: 0; }
  .css-change .keyvisual #chara {
    max-width: 79%;
    position: absolute;
    right: 3%;
    top: 0; }
  .css-change .gnavi {
    background-color: black; }
    .css-change .gnavi ul {
      border-right: 1px solid #000;
      border-left: 1px solid #000; }
      .css-change .gnavi ul li {
        background: #000;
        border: 2px solid #fff; }
      .css-change .gnavi ul li::before {
        content: "";
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 16px 16px 0 0;
        border-color: #fff transparent transparent transparent;
        z-index: 100;
        position: absolute; }
  .css-change header {
    background: #000; }
  .css-change .top_img01 {
    background: url(../img/top_img01_bg_takeover.png) repeat-x;
    background-size: 100% auto; }
  .css-change .top_img02 {
    background: #6b6b6b;
    padding: 30px; }
  .css-change .changebtn {
    clear: both;
    text-align: center;
    color: #fff;
    padding: 0px 20px 20px; }

.css-change.top {
  /*footer*/ }
  .css-change.top .wrapper {
    background: #000; }
  .css-change.top .changebtn {
    background: #000; }
  .css-change.top footer {
    color: #fff; }
    .css-change.top footer a {
      color: #fff;
      text-decoration: underline; }

@media screen and (min-width: 720px) {
  .css-change {
    background: url(../img/body_takeover.jpg) no-repeat;
    background-size: cover;
    background-attachment: fixed; } }