@charset "utf-8";

* {
  box-sizing: border-box;
}

/* 基本スタイル（PC向けスタイル） */
html {
  font-size: 14px;
}

/* ヘッダーセクション */
.header {
  width: 100%;
  height: 50px;
  background-color: rgba(255, 255, 255, 1);
}
@media screen and (max-width: 768px) {
  .header {
    height: 20px;
  }
}

/* タイトルセクション */
.title-section {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .title-section {
    flex-direction: column;
  }
}

.title-img {
  max-width: 460px;
  height: auto;
  margin-top: 10px;
  padding-left: 30px;
  padding-right: 30px;
}
@media screen and (max-width: 768px) {
  .title-img {
    width: 100%;
  }
}

.title-game-img {
  max-width: 220px;
  height: auto;
  margin-top: 20px;
  padding-left: 30px;
  padding-right: 30px;
}
@media screen and (max-width: 768px) {
  .title-game-img {
    width: 100%;
  }
}

/* ゲームセクション */
.game-section {
  width: 100%;
  height: auto;
  background-color: rgba(0, 209, 255, 1);
  margin-top: 80px;
  text-align: center;
}
.game-section-paragraph-1 {
  width: 100%;
  color: rgba(255, 255, 255, 1);
  font-family: Helvetica Neue;
  font-weight: Regular;
  font-size: 32px;
  text-align: center;
  padding-top: 20px;
}
@media screen and (max-width: 520px) {
  .game-section-paragraph-1 {
    font-size: 5.5vw;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Unity埋め込みテスト画像用 */
.unity-game {
  width: 360px;
  height: auto;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 40px;
}
@media screen and (max-width: 360px) {
  .unity-game {
    width: 100%;
  }
}

/* Unity本番用 */
.unity-game-padding {
  padding-top: 20px;
  padding-bottom: 40px;
}

.unity-desktop {
  width: 360px;
  margin: auto;
  height: auto;
  position: relative;
}
@media screen and (max-width: 360px) {
  .unity-desktop {
    width: 100%;
    margin: auto;
  }
}

#unity-canvas {
  width: 324px;
  height: 576px;
  background: #231f20;
}
@media screen and (max-width: 360px) {
  #unity-canvas {
    width: 90%;
    height: auto;
    background: #231f20;
  }
}
#unity-loading-bar {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  position: absolute;
}
#unity-logo {
  width: 154px;
  height: 130px;
  background: url("../images/unity-logo-dark.png") no-repeat center;
}
#unity-progress-bar-empty {
  width: 141px;
  height: 18px;
  margin-top: 10px;
  background: url("../images/progress-bar-empty-dark.png") no-repeat center;
}
#unity-progress-bar-full {
  width: 0%;
  height: 18px;
  margin-top: 10px;
  background: url("../images/progress-bar-full-dark.png") no-repeat center;
}
#unity-warning {
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translate(-50%);
  padding: 10px;
  display: none;
}

.game-section-paragraph-2 {
  width: 100%;
  color: rgba(255, 255, 255, 1);
  font-family: Helvetica Neue;
  font-weight: Regular;
  font-size: 18px;
  text-align: center;
  padding-top: 10px;
}
@media screen and (max-width: 520px) {
  .game-section-paragraph-2 {
    font-size: 3.5vw;
    padding-left: 10px;
    padding-right: 10px;
  }
}
.game-section-paragraph-3 {
  width: 100%;
  color: rgba(255, 255, 255, 1);
  font-family: Helvetica Neue;
  font-weight: Regular;
  font-size: 18px;
  text-align: center;
  padding-top: 10px;
}
@media screen and (max-width: 520px) {
  .game-section-paragraph-3 {
    font-size: 3.5vw;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* ゲーム解説セクション */
.game-comment-section {
  width: 100%;
  height: auto;
  margin-top: 90px;
}

.game-comment-section-paragraph-1 {
  width: 100%;
  color: rgba(0, 209, 255, 1);
  font-family: Helvetica Neue;
  font-weight: Regular;
  font-size: 40px;
  text-align: center;
  overflow-wrap: break-word;
}
@media screen and (max-width: 520px) {
  .game-comment-section-paragraph-1 {
    font-size: 7vw;
  }
}
.game-comment-flex {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding-top: 40px;
}
@media screen and (max-width: 768px) {
  .game-comment-flex {
    flex-direction: column;
  }
}

.game-comments {
  max-width: 416px;
  margin-left: 30px;
  margin-right: 30px;
}

.game-comment-section-paragraph-2 {
  width: 100%;
  color: rgba(0, 0, 0, 1);
  font-family: Helvetica Neue;
  font-weight: Regular;
  font-size: 18px;
  text-align: left;
  overflow-wrap: break-word;
}
@media screen and (max-width: 520px) {
  .game-comment-section-paragraph-2 {
    font-size: 4vw;
  }
}

.game-comment-section-paragraph-3 {
  width: 100%;
  color: rgba(0, 0, 0, 1);
  font-family: Helvetica Neue;
  font-weight: Regular;
  font-size: 18px;
  text-align: left;
  overflow-wrap: break-word;
  margin-top: 30px;
}
@media screen and (max-width: 520px) {
  .game-comment-section-paragraph-3 {
    font-size: 4vw;
  }
}

.game-comment-images {
  margin-top: 20px;
  margin-left: 12px;
  margin-right: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.content-game-img {
  margin-left: 20px;
  margin-right: 20px;
  max-width: 198px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .content-game-img {
    width: 100%;
    margin-top: 20px;
  }
}

.result-game-img {
  margin-left: 20px;
  margin-right: 20px;
  max-width: 198px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .result-game-img {
    width: 100%;
    margin-top: 20px;
  }
}

/* 企画説明セクション */
.plan-section {
  width: 100%;
  height: auto;
  margin-top: 90px;
}

.plan-section-paragraph-1 {
  width: 100%;
  color: rgba(0, 209, 255, 1);
  font-family: Helvetica Neue;
  font-weight: Regular;
  font-size: 40px;
  text-align: center;
  overflow-wrap: break-word;
}
@media screen and (max-width: 520px) {
  .plan-section-paragraph-1 {
    font-size: 7vw;
  }
}
.plan-section-flex {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding-top: 40px;
}
@media screen and (max-width: 768px) {
  .plan-section-flex {
    flex-direction: column;
  }
}

.plan-section-comments {
  max-width: 416px;
  margin-left: 30px;
  margin-right: 30px;
}

.plan-section-paragraph-2 {
  width: 100%;
  color: rgba(0, 0, 0, 1);
  font-family: Helvetica Neue;
  font-weight: Regular;
  font-size: 18px;
  text-align: left;
  overflow-wrap: break-word;
}
@media screen and (max-width: 520px) {
  .plan-section-paragraph-2 {
    font-size: 4vw;
  }
}

.plan-section-paragraph-3 {
  width: 100%;
  color: rgba(0, 0, 0, 1);
  font-family: Helvetica Neue;
  font-weight: Regular;
  font-size: 18px;
  text-align: left;
  overflow-wrap: break-word;
  margin-top: 30px;
}
@media screen and (max-width: 520px) {
  .plan-section-paragraph-3 {
    font-size: 4vw;
  }
}

.game-plan-images {
  margin-left: 20px;
  margin-right: 20px;
}
.game-plan-img {
  margin-top: 40px;
  /* margin-left: 20px;
  margin-right: 20px; */
  padding-left: 20px;
  padding-right: 20px;
  max-width: 480px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .game-plan-img {
    flex-direction: column;
    width: 100%;
  }
}
@media screen and (max-width: 520px) {
  .game-plan-img {
    width: 100%;
  }
}

/* 関連項目セクション */
.related-item-section {
  width: 100%;
  height: auto;
  margin-top: 90px;
}
.related-item-section-paragraph-1 {
  width: 100%;
  color: rgba(0, 209, 255, 1);
  font-family: Helvetica Neue;
  font-weight: Regular;
  font-size: 40px;
  text-align: center;
}
@media screen and (max-width: 520px) {
  .related-item-section-paragraph-1 {
    font-size: 7vw;
  }
}

.related-item-section-paragraph-2 {
  width: 100%;
  color: rgba(0, 0, 0, 1);
  font-family: Helvetica Neue;
  font-weight: Regular;
  font-size: 18px;
  opacity: 1;
  text-align: center;
  overflow-wrap: break-word;
  margin-top: 40px;
}
@media screen and (max-width: 520px) {
  .related-item-section-paragraph-2 {
    font-size: 3.5vw;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* SNSセクション */
.sns-section {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 90px;
}
.youtube-icon {
  width: auto;
  margin-left: 20px;
  margin-right: 20px;
}
.twitter-icon {
  width: auto;
  margin-left: 20px;
  margin-right: 20px;
}

/* フッターセクション */
.footer {
  width: 100%;
  height: 64px;
  margin-top: 50px;
}
.footer-line {
  width: 100%;
  height: 2px;
  background: rgb(238, 238, 238);
}
.copyright {
  width: 100%;
  color: rgb(126, 126, 126);
  font-family: Helvetica Neue;
  font-weight: Regular;
  font-size: 14px;
  text-align: center;
  margin-top: 10px;
}
@media screen and (max-width: 520px) {
  .copyright {
    font-size: 1vw;
  }
}

a[target="_blank"] {
  padding-right: 18px;
  background: url(../images/icon_blank.png) right center/18px auto no-repeat;
}


@media screen and (max-width: 768px) {
}
@media screen and (max-width: 520px) {
}