@charset "utf-8";

@font-face {
    font-family: 'JFdot';
    src: url('../../font/JF-Dot-MPlusS10.eot');
    src: url('../../font/JF-Dot-MPlusS10.woff2') format('woff2'),
      url('../../font/JF-Dot-MPlusS10.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
  background: #e60012;
  font-family: 'JFdot', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "ヒラギノ角ゴ ProN W3", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, Meiryo, sans-serif;
}

.wrapper {
  overflow-x: hidden;
}

.contents {
  padding: 50px 10px 10px;
  position: relative;
  z-index: 1;
}

@media screen and (min-width: 900px){
  .wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

.contents {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ==========================================
*
*  chat
*
========================================== */
.chatArea {
  max-width: 750px;
  margin: 0 auto 120px;
}

@media screen and (min-width: 900px){
  .chatArea {
  }
}

.chatArea__date {
  color: #fff;
  text-align: center;
  background: #000;
  line-height: 1.2;
  font-weight: 400;
  position: relative;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  margin-bottom: 70px;
}

.chatArea__date>span {
  font-size: 1.2rem;
  margin-left: 5px;
}

.chatLog {
  margin: 0 0 10px;
  display: flex;
  align-items: center;
}

.chatLog--system {
  margin: 50px 0;
}

.chatLog--system p{
  background: rgba(0, 0, 0, .5);
  color: #fff;
  border-radius: 100px;
  margin: 0 auto;
  padding: .3em 3em;
  line-height: 1.2;
  font-size: 1.4rem;
}

@media screen and (min-width: 900px){
  .chatLog--system p{
    font-size: 1.6rem;
  }
}

.chatLog[data-speacker="山中"]{
  flex-direction: row-reverse;
}

.chatLog__balloon {
  position: relative;
  background: #000;
  color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  max-width: 525px;
  min-height: 40px;
  margin: 10px 0 0 20px;
  padding: 10px;
  line-height: 1.4;
  font-size: 1.4rem;
  filter: drop-shadow(3px 4px 0 #b2000e);
  transition: .5s;
  letter-spacing: -1px;
}

.chatLog__balloon--small {
  font-size: 1rem;
}

.chatLog__balloon--large {
  font-size: 1.8rem;
}

.chatLog__balloon--huge {
  font-size: 2rem;
}

.chatLog__balloon a{
  color: #fff;
  word-break: break-all;
}

[data-speacker="山中"] .chatLog__balloon{
  margin: 10px 20px 0 0;
}

@media screen and (min-width: 900px){
  .chatLog__balloon,
  [data-speacker="山中"] .chatLog__balloon {
    font-size: 2rem;
    min-height: 80px;
    margin: 20px 0 0 50px;
    padding: 10px 33px;
  }

  [data-speacker="山中"] .chatLog__balloon{
    margin: 20px 50px 0 0;
  }

  .chatLog__balloon.chatLog__balloon--small {
    font-size: 1.4rem;
  }

  .chatLog__balloon.chatLog__balloon--large {
    font-size: 2.6rem;
  }

  .chatLog__balloon.chatLog__balloon--huge {
    font-size: 4rem;
  }
}

@media all and (-ms-high-contrast:none){
  .chatLog__balloon{
    min-height: 0 !important;
  }
}

.chatLog__balloon::before {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  top: 0;
  left: -5px;
  bottom: 0;
  background: #000;
  transform: scale(2,.5) rotate(45deg);
  margin: auto 0;
  z-index: 0;
}

.chatLog__balloon[data-modal]{
  cursor: pointer;
  padding: 20px 20px 35px;
}

.chatLog__balloon[data-modal]::after {
  content: "タップして開く";
  font-size: 1.2rem;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  border-top: 1px solid rgba(255,255,255,.3);
  padding: 4px 0 2px;
}

@media screen and (min-width: 900px){
  .chatLog__balloon[data-modal]::after {
    content: "クリックして開く";
  }
}

.chatLog__balloon[data-modal="audio_bgm"]::after {
  content: "クリックして再生する";
}

.chatLog__balloon[data-modal] img{
  max-width: 150px;
  position: relative;
}

.chatLog__balloon[data-modal]:hover{
  opacity: .8;
}

[data-speacker="山中"] .chatLog__balloon::before{
  left: auto;
  right: -5px;
}

@media screen and (min-width: 900px){
  .chatLog__balloon::before {
    width: 20px;
    height: 20px;
    left: -10px;
  }

  [data-speacker="山中"] .chatLog__balloon::before{
    right: -10px;
  }
}

.chatLog__speaker {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
  outline: 0;
}

[data-speacker="山中"] .chatLog__speaker {
  width: calc( 129px / 1.5 );
  height: calc( 142px / 1.5 );
  background-image: url(../img/山中拓也.png);
}

[data-speacker="山中"][data-face="クマ"] .chatLog__speaker {
  background-image: url(../img/山中拓也_クマ.png);
}

[data-speacker="今川"] .chatLog__speaker {
  width: calc( 112px / 1.5 );
  height: calc( 136px / 1.5 );
  background-image: url(../img/今川伸浩.png);
}

[data-speacker="増子"] .chatLog__speaker {
  width: calc( 112px / 1.5 );
  height: calc( 134px / 1.5 );
  background-image: url(../img/増子津可燦.png);
}

[data-speacker="井上"] .chatLog__speaker {
  width: calc( 119px / 1.5 );
  height: calc( 137px / 1.5 );
  background-image: url(../img/井上信行.png);
}

[data-speacker="山根"] .chatLog__speaker {
  width: calc( 124px / 1.5 );
  height: calc( 132px / 1.5 );
  background-image: url(../img/山根敬洋.png);
}

[data-speacker="安本"] .chatLog__speaker {
  width: calc( 118px / 1.5 );
  height: calc( 137px / 1.5 );
  background-image: url(../img/安本鈴花.png);
}

@media screen and (min-width: 900px){
  [data-speacker="山中"] .chatLog__speaker {
    width: 129px;
    height: 142px;
  }

  [data-speacker="今川"] .chatLog__speaker {
    width: 112px;
    height: 136px;
  }

  [data-speacker="増子"] .chatLog__speaker {
    width: 112px;
    height: 134px;
  }

  [data-speacker="井上"] .chatLog__speaker {
    width: 119px;
    height: 137px;
  }

  [data-speacker="山根"] .chatLog__speaker {
    width: 124px;
    height: 132px;
  }

  [data-speacker="安本"] .chatLog__speaker {
    width: 118px;
    height: 137px;
  }
}

.js-addClassWhenVisible .chatLog {
  opacity: 0;
}

.chatArea.is-visible .chatLog {
  animation: showChatLog .5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s both;
}

.chatArea.is-visible .chatLog[data-delay="0.1"]  { animation-delay: 0.1s; }
.chatArea.is-visible .chatLog[data-delay="0.2"]  { animation-delay: 0.2s; }
.chatArea.is-visible .chatLog[data-delay="0.3"]  { animation-delay: 0.3s; }
.chatArea.is-visible .chatLog[data-delay="0.4"]  { animation-delay: 0.4s; }
.chatArea.is-visible .chatLog[data-delay="0.5"]  { animation-delay: 0.5s; }
.chatArea.is-visible .chatLog[data-delay="0.6"]  { animation-delay: 0.6s; }
.chatArea.is-visible .chatLog[data-delay="0.7"]  { animation-delay: 0.7s; }
.chatArea.is-visible .chatLog[data-delay="0.8"]  { animation-delay: 0.8s; }
.chatArea.is-visible .chatLog[data-delay="0.9"]  { animation-delay: 0.9s; }
.chatArea.is-visible .chatLog[data-delay="1.0"]  { animation-delay: 1.0s; }
.chatArea.is-visible .chatLog[data-delay="1.1"]  { animation-delay: 1.1s; }
.chatArea.is-visible .chatLog[data-delay="1.2"]  { animation-delay: 1.2s; }
.chatArea.is-visible .chatLog[data-delay="1.3"]  { animation-delay: 1.3s; }
.chatArea.is-visible .chatLog[data-delay="1.4"]  { animation-delay: 1.4s; }
.chatArea.is-visible .chatLog[data-delay="1.5"]  { animation-delay: 1.5s; }
.chatArea.is-visible .chatLog[data-delay="1.6"]  { animation-delay: 1.6s; }
.chatArea.is-visible .chatLog[data-delay="1.7"]  { animation-delay: 1.7s; }
.chatArea.is-visible .chatLog[data-delay="1.8"]  { animation-delay: 1.8s; }
.chatArea.is-visible .chatLog[data-delay="1.9"]  { animation-delay: 1.9s; }
.chatArea.is-visible .chatLog[data-delay="2.0"]  { animation-delay: 2.0s; }
.chatArea.is-visible .chatLog[data-delay="2.1"]  { animation-delay: 2.1s; }
.chatArea.is-visible .chatLog[data-delay="2.2"]  { animation-delay: 2.2s; }
.chatArea.is-visible .chatLog[data-delay="2.3"]  { animation-delay: 2.3s; }
.chatArea.is-visible .chatLog[data-delay="2.4"]  { animation-delay: 2.4s; }
.chatArea.is-visible .chatLog[data-delay="2.5"]  { animation-delay: 2.5s; }
.chatArea.is-visible .chatLog[data-delay="2.6"]  { animation-delay: 2.6s; }
.chatArea.is-visible .chatLog[data-delay="2.7"]  { animation-delay: 2.7s; }
.chatArea.is-visible .chatLog[data-delay="2.8"]  { animation-delay: 2.8s; }
.chatArea.is-visible .chatLog[data-delay="2.9"]  { animation-delay: 2.9s; }
.chatArea.is-visible .chatLog[data-delay="3.0"]  { animation-delay: 3.0s; }
.chatArea.is-visible .chatLog[data-delay="3.1"]  { animation-delay: 3.1s; }
.chatArea.is-visible .chatLog[data-delay="3.2"]  { animation-delay: 3.2s; }
.chatArea.is-visible .chatLog[data-delay="3.3"]  { animation-delay: 3.3s; }
.chatArea.is-visible .chatLog[data-delay="3.4"]  { animation-delay: 3.4s; }
.chatArea.is-visible .chatLog[data-delay="3.5"]  { animation-delay: 3.5s; }
.chatArea.is-visible .chatLog[data-delay="3.6"]  { animation-delay: 3.6s; }
.chatArea.is-visible .chatLog[data-delay="3.7"]  { animation-delay: 3.7s; }
.chatArea.is-visible .chatLog[data-delay="3.8"]  { animation-delay: 3.8s; }
.chatArea.is-visible .chatLog[data-delay="3.9"]  { animation-delay: 3.9s; }
.chatArea.is-visible .chatLog[data-delay="4.0"]  { animation-delay: 4.0s; }
.chatArea.is-visible .chatLog[data-delay="4.1"]  { animation-delay: 4.1s; }
.chatArea.is-visible .chatLog[data-delay="4.2"]  { animation-delay: 4.2s; }
.chatArea.is-visible .chatLog[data-delay="4.3"]  { animation-delay: 4.3s; }
.chatArea.is-visible .chatLog[data-delay="4.4"]  { animation-delay: 4.4s; }
.chatArea.is-visible .chatLog[data-delay="4.5"]  { animation-delay: 4.5s; }
.chatArea.is-visible .chatLog[data-delay="4.6"]  { animation-delay: 4.6s; }
.chatArea.is-visible .chatLog[data-delay="4.7"]  { animation-delay: 4.7s; }
.chatArea.is-visible .chatLog[data-delay="4.8"]  { animation-delay: 4.8s; }
.chatArea.is-visible .chatLog[data-delay="4.9"]  { animation-delay: 4.9s; }
.chatArea.is-visible .chatLog[data-delay="5.0"]  { animation-delay: 5.0s; }
.chatArea.is-visible .chatLog[data-delay="5.1"]  { animation-delay: 5.1s; }
.chatArea.is-visible .chatLog[data-delay="5.2"]  { animation-delay: 5.2s; }
.chatArea.is-visible .chatLog[data-delay="5.3"]  { animation-delay: 5.3s; }
.chatArea.is-visible .chatLog[data-delay="5.4"]  { animation-delay: 5.4s; }
.chatArea.is-visible .chatLog[data-delay="5.5"]  { animation-delay: 5.5s; }
.chatArea.is-visible .chatLog[data-delay="5.6"]  { animation-delay: 5.6s; }
.chatArea.is-visible .chatLog[data-delay="5.7"]  { animation-delay: 5.7s; }
.chatArea.is-visible .chatLog[data-delay="5.8"]  { animation-delay: 5.8s; }
.chatArea.is-visible .chatLog[data-delay="5.9"]  { animation-delay: 5.9s; }
.chatArea.is-visible .chatLog[data-delay="6.0"]  { animation-delay: 6.0s; }
.chatArea.is-visible .chatLog[data-delay="6.1"]  { animation-delay: 6.1s; }
.chatArea.is-visible .chatLog[data-delay="6.2"]  { animation-delay: 6.2s; }
.chatArea.is-visible .chatLog[data-delay="6.3"]  { animation-delay: 6.3s; }
.chatArea.is-visible .chatLog[data-delay="6.4"]  { animation-delay: 6.4s; }
.chatArea.is-visible .chatLog[data-delay="6.5"]  { animation-delay: 6.5s; }
.chatArea.is-visible .chatLog[data-delay="6.6"]  { animation-delay: 6.6s; }
.chatArea.is-visible .chatLog[data-delay="6.7"]  { animation-delay: 6.7s; }
.chatArea.is-visible .chatLog[data-delay="6.8"]  { animation-delay: 6.8s; }
.chatArea.is-visible .chatLog[data-delay="6.9"]  { animation-delay: 6.9s; }
.chatArea.is-visible .chatLog[data-delay="7.0"]  { animation-delay: 7.0s; }
.chatArea.is-visible .chatLog[data-delay="7.1"]  { animation-delay: 7.1s; }
.chatArea.is-visible .chatLog[data-delay="7.2"]  { animation-delay: 7.2s; }
.chatArea.is-visible .chatLog[data-delay="7.3"]  { animation-delay: 7.3s; }
.chatArea.is-visible .chatLog[data-delay="7.4"]  { animation-delay: 7.4s; }
.chatArea.is-visible .chatLog[data-delay="7.5"]  { animation-delay: 7.5s; }
.chatArea.is-visible .chatLog[data-delay="7.6"]  { animation-delay: 7.6s; }
.chatArea.is-visible .chatLog[data-delay="7.7"]  { animation-delay: 7.7s; }
.chatArea.is-visible .chatLog[data-delay="7.8"]  { animation-delay: 7.8s; }
.chatArea.is-visible .chatLog[data-delay="7.9"]  { animation-delay: 7.9s; }
.chatArea.is-visible .chatLog[data-delay="8.0"]  { animation-delay: 8.0s; }
.chatArea.is-visible .chatLog[data-delay="8.1"]  { animation-delay: 8.1s; }
.chatArea.is-visible .chatLog[data-delay="8.2"]  { animation-delay: 8.2s; }
.chatArea.is-visible .chatLog[data-delay="8.3"]  { animation-delay: 8.3s; }
.chatArea.is-visible .chatLog[data-delay="8.4"]  { animation-delay: 8.4s; }
.chatArea.is-visible .chatLog[data-delay="8.5"]  { animation-delay: 8.5s; }
.chatArea.is-visible .chatLog[data-delay="8.6"]  { animation-delay: 8.6s; }
.chatArea.is-visible .chatLog[data-delay="8.7"]  { animation-delay: 8.7s; }
.chatArea.is-visible .chatLog[data-delay="8.8"]  { animation-delay: 8.8s; }
.chatArea.is-visible .chatLog[data-delay="8.9"]  { animation-delay: 8.9s; }
.chatArea.is-visible .chatLog[data-delay="9.0"]  { animation-delay: 9.0s; }
.chatArea.is-visible .chatLog[data-delay="9.1"]  { animation-delay: 9.1s; }
.chatArea.is-visible .chatLog[data-delay="9.2"]  { animation-delay: 9.2s; }
.chatArea.is-visible .chatLog[data-delay="9.3"]  { animation-delay: 9.3s; }
.chatArea.is-visible .chatLog[data-delay="9.4"]  { animation-delay: 9.4s; }
.chatArea.is-visible .chatLog[data-delay="9.5"]  { animation-delay: 9.5s; }
.chatArea.is-visible .chatLog[data-delay="9.6"]  { animation-delay: 9.6s; }
.chatArea.is-visible .chatLog[data-delay="9.7"]  { animation-delay: 9.7s; }
.chatArea.is-visible .chatLog[data-delay="9.8"]  { animation-delay: 9.8s; }
.chatArea.is-visible .chatLog[data-delay="9.9"]  { animation-delay: 9.9s; }
.chatArea.is-visible .chatLog[data-delay="10.0"]  { animation-delay: 10.0s; }
.chatArea.is-visible .chatLog[data-delay="10.1"]  { animation-delay: 10.1s; }
.chatArea.is-visible .chatLog[data-delay="10.2"]  { animation-delay: 10.2s; }
.chatArea.is-visible .chatLog[data-delay="10.3"]  { animation-delay: 10.3s; }
.chatArea.is-visible .chatLog[data-delay="10.4"]  { animation-delay: 10.4s; }
.chatArea.is-visible .chatLog[data-delay="10.5"]  { animation-delay: 10.5s; }
.chatArea.is-visible .chatLog[data-delay="10.6"]  { animation-delay: 10.6s; }
.chatArea.is-visible .chatLog[data-delay="10.7"]  { animation-delay: 10.7s; }
.chatArea.is-visible .chatLog[data-delay="10.8"]  { animation-delay: 10.8s; }
.chatArea.is-visible .chatLog[data-delay="10.9"]  { animation-delay: 10.9s; }
.chatArea.is-visible .chatLog[data-delay="11.0"]  { animation-delay: 11.0s; }
.chatArea.is-visible .chatLog[data-delay="11.1"]  { animation-delay: 11.1s; }
.chatArea.is-visible .chatLog[data-delay="11.2"]  { animation-delay: 11.2s; }
.chatArea.is-visible .chatLog[data-delay="11.3"]  { animation-delay: 11.3s; }
.chatArea.is-visible .chatLog[data-delay="11.4"]  { animation-delay: 11.4s; }
.chatArea.is-visible .chatLog[data-delay="11.5"]  { animation-delay: 11.5s; }
.chatArea.is-visible .chatLog[data-delay="11.6"]  { animation-delay: 11.6s; }
.chatArea.is-visible .chatLog[data-delay="11.7"]  { animation-delay: 11.7s; }
.chatArea.is-visible .chatLog[data-delay="11.8"]  { animation-delay: 11.8s; }
.chatArea.is-visible .chatLog[data-delay="11.9"]  { animation-delay: 11.9s; }
.chatArea.is-visible .chatLog[data-delay="12.0"]  { animation-delay: 12.0s; }
.chatArea.is-visible .chatLog[data-delay="12.1"]  { animation-delay: 12.1s; }
.chatArea.is-visible .chatLog[data-delay="12.2"]  { animation-delay: 12.2s; }
.chatArea.is-visible .chatLog[data-delay="12.3"]  { animation-delay: 12.3s; }
.chatArea.is-visible .chatLog[data-delay="12.4"]  { animation-delay: 12.4s; }
.chatArea.is-visible .chatLog[data-delay="12.5"]  { animation-delay: 12.5s; }
.chatArea.is-visible .chatLog[data-delay="12.6"]  { animation-delay: 12.6s; }
.chatArea.is-visible .chatLog[data-delay="12.7"]  { animation-delay: 12.7s; }
.chatArea.is-visible .chatLog[data-delay="12.8"]  { animation-delay: 12.8s; }
.chatArea.is-visible .chatLog[data-delay="12.9"]  { animation-delay: 12.9s; }
.chatArea.is-visible .chatLog[data-delay="13.0"]  { animation-delay: 13.0s; }
.chatArea.is-visible .chatLog[data-delay="13.1"]  { animation-delay: 13.1s; }
.chatArea.is-visible .chatLog[data-delay="13.2"]  { animation-delay: 13.2s; }
.chatArea.is-visible .chatLog[data-delay="13.3"]  { animation-delay: 13.3s; }
.chatArea.is-visible .chatLog[data-delay="13.4"]  { animation-delay: 13.4s; }
.chatArea.is-visible .chatLog[data-delay="13.5"]  { animation-delay: 13.5s; }
.chatArea.is-visible .chatLog[data-delay="13.6"]  { animation-delay: 13.6s; }
.chatArea.is-visible .chatLog[data-delay="13.7"]  { animation-delay: 13.7s; }
.chatArea.is-visible .chatLog[data-delay="13.8"]  { animation-delay: 13.8s; }
.chatArea.is-visible .chatLog[data-delay="13.9"]  { animation-delay: 13.9s; }
.chatArea.is-visible .chatLog[data-delay="14.0"]  { animation-delay: 14.0s; }

@keyframes showChatLog {
  0% {
    opacity: 0;
    transform: translate3d(0,50px,0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0,-15px,0);
  }
  75% {
    transform: translate3d(0,7px,0);
  }
  90% {
    transform: translate3d(0,-3px,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

/* ==========================================
*
*  Creator
*
========================================== */

.modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 500;
  background: rgba(0,0,0,.7);
  padding: 10px;
  cursor: zoom-out;
}

@media screen and (min-width: 900px){
  .modal {
    padding: 30px;
  }
}

.modal__inner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-items: center;
}

@media screen and (min-width: 600px) and (min-height: 600px){
  .modal__inner {
    align-items: center;
  }
}

.intro,
.creatorInfo {
  background: #fff;
  border-radius: 10px;
  max-width: 730px;
  padding: 1em 1em;
  max-height: 90vh;
  overflow-y: auto;
}

@media screen and (min-width: 900px){
  .intro,
  .creatorInfo {
    padding: 1.5em 3em;
  }
}

.creator__headWrap {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  margin: 0 0 20px;
}

@media screen and (min-width: 900px){
  .creator__headWrap {
    margin: 0 0 40px;
  }
}

.creator__head {
  margin: 0;
  line-height: 1.2;
  flex-shrink: 0;
}

.creator__role {
  font-size: 1.6rem;
  display: block;
}

.creator__name {
  font-size: 3.5rem;
  white-space: nowrap;
  line-height: 1.3;
}

.creator__name>span {
  font-size: 1.6rem;
  display: block;
}

.creator__img {
  margin: 0 20px 0 0;
  width: 75px;
}

@media screen and (min-width: 900px){
  .creator__img {
    margin: 0 40px 0 0;
    width: auto;
  }
}

.creator__worksHead {
  margin: 0;
  font-size: 1.4rem;
}

.creator__works {
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.2;
}

.creator__works>span {
  display: inline-block;
}

.creator__intro {
  font-size: 1.3rem;
  line-height: 1.4;
  margin-bottom: 0;
}

@media screen and (min-width: 900px){
  .creator__name {
    font-size: 4rem;
  }

  .creator__worksHead {
    font-size: 2rem;
  }

  .creator__works {
    font-size: 2rem
  }

  .creator__intro {
    font-size: 1.6rem;
  }
}

/* ==========================================
*
*  intro
*
========================================== */

.intro {
  display: none;
  line-height: 1.4;
}

/* ==========================================
*
*  footer
*
========================================== */
.footer {
  background: #000;
  color: #fff;
  text-align: center;
  font-size: 1.2rem;
  padding: 16px 16px 100px;
  position: relative;
  z-index: 1;
}

@media screen and (min-width: 900px){
  .footer {
    padding: 16px;

  }
}

.copyrights {
  margin: 0;
  font-size: 2rem;
}

.socialList {
  display: flex;
  justify-content: center;
}

.socialList>li {
  width: 60px;
  margin: 10px;
}

.socialList>li img{
  width: 60px;
}

.js-scrollToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 200;
  background: #000;
  color: #fff;
  padding: 1em;
  border-radius: 10px;
  outline: 0;
  font-size: 1.4rem;
  filter: drop-shadow(3px 4px 0 #b2000e);
}

.js-scrollToTop:hover {
  opacity: .8;
}

/* ==========================================
*
*  background
*
========================================== */

.background {
  position: fixed;
  top: -100px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.background__chara {
  position: absolute;
  right: 10px;
  bottom: 10%;
  max-width: 25%;
}

.snowfall-flakes {
  animation: spin 20s linear infinite;
  pointer-events: none;
  z-index: 0 !important;
  transition: opacity .5s;
  transition-delay: 1.5s;
}

.snowfall-flakes:nth-child(2n) {
  animation-delay: .5s;
}

.snowfall-flakes:nth-child(3n) {
  animation-delay: 1s;
}

.snowfall-flakes:nth-child(4n) {
  animation-delay: 1.5s;
}

.snowfall-flakes:nth-child(2n+1) {
  animation-duration: 25s;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 899px){
  .snowfall-flakes {
    transform: scale(.5,.5);
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg) scale(.5,.5);
    }
    100% {
      transform: rotate(360deg) scale(.5,.5);
    }
  }
}

#bgObject {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}


/* ========================================
about page
======================================== */
.gameLogo {
  text-align: center;
  margin: 0 0 50px;
}

.gameDetailWrap {
  max-width: 900px;
  margin: 0 auto 150px;
}

.gameDetail {
  /* background: #000; */
  background: rgba(40, 16, 16, 0.9);
  border: 2px solid rgba(216, 152, 36, 0.7);
  color: #fff;
  border-radius: 10px;
  padding: 15px;
  margin: 0 0 15px;
}

.gameDetail ul,
.gameDetail p {
  margin: 0;
}

.gameDetail__umiushi{
  text-align: right;
}

.gameDetail__umiushi img{
  width: 100px;
}

.followButton>a {
  display: block;
  background: #fff;
  color: #000;
  text-decoration: none;
  border-radius: 5px;
  text-align: center;
  font-size: 2rem;
  margin: 10px 0 0
}

@media screen and (min-width: 900px){
  .gameDetailWrap {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .gameDetail {
    flex-basis: calc(50% - 15px);
    padding: 25px 30px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.gameDetail>a{
  color: #fff;
}

/* ========================================
media
======================================== */

@media screen and (max-width: 899px) {
  .pc-only {
    display: none !important;
  }
}

@media screen and (min-width: 900px) {
  .sp-only {
    display: none !important;
  }
}