:root {
  --z-index-bg-anime: -5;
  --z-index-tab-btn-default: 5;
  --z-index-tab-list-item: 10;
  --z-index-tab-btn-active: 15;
}

.bg-anime {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: var(--z-index-bg-anime);
}

.bg-anime .anime-tank {
  position: absolute;
  bottom: 100px;
  opacity: 0.4;
}

#bg-anime-tank-1 {
  bottom: 50vh;
}

#bg-anime-tank-2 {
  bottom: 40vh;
}

#bg-anime-tank-3 {
  bottom: 30vh;
}

#bg-anime-tank-4 {
  bottom: 20vh;
}

#bg-anime-tank-5 {
  bottom: 5vh;
}

.bg-anime .anime-air {
  position: absolute;
  bottom: 100px;
  opacity: 0;
}

/*タブ共通設定*/
.tab-list {
  display: flex;
  margin: 80px auto 0;
  justify-content: space-between;
}

/*トップページ用アコーディオン共通設定*/
.top-accordion {
  margin-top: 30px;
  padding: 20px;
  background-color: #708090;
}

.top-accordion .accordion-btn {
  width: 100%;
  margin: 0;
  font-size: 24px;
  text-align: center;
  transition: color 0.3s;
}

.top-accordion .accordion-btn:hover {
  cursor: pointer;
  color: var(--color-red);
}

/**************************************/
/*メインビジュアル*/
.mv-wrap {
  position: relative;
  max-width: 100%;
  width: 100%;
  height: calc(100vh - 64px);
  margin: 0 auto;
}

.mv-bg {
  width: 100%;
  height: 100%;
  overflow: hidden;

  -webkit-mask-image: linear-gradient(to top, transparent 0, black 5%, black 100%);
  mask-image: linear-gradient(to top, transparent 0, black 5%, black 100%);
}

/* parallax.jsが動かすためのコンテナ */
.parallax-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

/* 実際に画像を表示し、拡大・中央配置する要素 */
.mv-bg-img {
  position: absolute;
  width: 105%;
  height: 105%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 各レイヤーの背景画像 */
.mv-bg-img.back {
  background: url(../image/top/mvbg_01.png) center center / cover no-repeat;
}
.mv-bg-img.tank1 {
  background: url(../image/top/mvbg_02.png) center center / cover no-repeat;
}
.mv-bg-img.tank2 {
  background: url(../image/top/mvbg_03.png) center center / cover no-repeat;
}
.mv-bg-img.dust1 {
  background: url(../image/top/mvbg_04.png) center center / cover no-repeat;
}
.mv-bg-img.dust2 {
  background: url(../image/top/mvbg_05.png) center center / cover no-repeat;
}
.mv-bg-img.front {
  background: url(../image/top/mvbg_06.png) center center / cover no-repeat;
}

.mv-copyright {
  position: absolute;
  width: 32%;
  top: 1%;
  left: 0.5%;
}

.mv-logo {
  position: absolute;
  width: 27%;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
}

.mv-release {
  position: absolute;
  width: 28%;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
}

#lb-mv-link {
  margin-top: 0;
}

.mv-link-wrap {
  width: 318px;
  height: 126px;
  margin: 0 auto;
}

.yoyaku-popup-btn,
.x-link-btn {
  display: flex;
  width: 100%;
  aspect-ratio: 318/60;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}

.yoyaku-popup-btn {
  background-color: red;
}

.x-link-btn {
  margin-top: 6px;
  background-color: black;
}

#yoyaku-popup {
  display: none;
}

.yoyaku-popup-list li a {
  display: flex;
  width: 300px;
  height: 60px;
  font-size: 24px;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #b0c4de;
}

.yoyaku-popup-list li + li {
  margin-top: 10px;
}

/**************************************/
/*お知らせ*/
#ld-notice {
  max-width: 850px;
}

.notice-list {
  height: 225px;
  margin: 30px auto 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #222222 transparent;
}

.notice-list::-webkit-scrollbar {
  width: 6px;
}

.notice-list::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 3px;
}

.notice-list li {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 0.5em 0;
}

.notice-list li + li {
  margin-top: 10px;
}

.data-text {
  display: inline-flex;
  font-size: 19px;
}

.data-text .new-icon {
  height: 1em;
  width: auto;
}

.main-text {
  margin-top: 5px;
  margin-left: 1em;
  font-size: 17px;
}

/**************************************/
/*概要*/
/*大戦略とは*/
#lb-outline .contents-item:nth-of-type(1) h3 {
  max-width: 261px;
  width: 27%;
}

/*大戦略SSB2の特徴*/
#lb-outline .contents-item:nth-of-type(2) h3 {
  max-width: 449px;
  width: 47%;
}

.what-dsr-wrap {
  display: flex;
  margin: 30px auto 0;
}

.what-dsr-wrap .left-item {
  width: 39%;
}

.what-dsr-wrap .right-item {
  width: 61%;
  margin-top: 16px;
}

#lb-outline .contents-item + .contents-item {
  margin-top: 100px;
}

/**************************************/
/*システム*/
#lb-system,
#lb-weapons {
  color: #fff;
}

/*戦闘マップ、戦闘シーン*/
#lb-system .contents-item:nth-of-type(1) h3,
#lb-system .contents-item:nth-of-type(2) h3 {
  max-width: 276px;
  width: 29%;
}

/**************************************/
/*登場兵器*/
/*兵器一覧*/
#lb-weapons .contents-item:nth-of-type(1) h3 {
  max-width: 237px;
  width: 25%;
}

#weapons-list {
  width: 91%;
  margin: 50px auto 0;
}

#weapons-list .tab-btn {
  width: 33%;
}

/**************************************/
/*ギャラリー*/
/*ムービー*/
#lb-gallery .contents-item:nth-of-type(1) h3 {
  max-width: 225px;
  width: 23%;
}

/*週刊大戦略SSB　X投稿ムービー*/
#lb-gallery .contents-item:nth-of-type(2) h3 {
  max-width: 529px;
  width: 55%;
}

.movie-list {
  display: flex;
  margin: 30px auto 0;
}

.movie-list li {
  width: 48%;
}

.movie-list li + li {
  margin-left: 4%;
}

.movie-title {
  max-width: 362px;
  width: 77%;
  margin: 5px auto 0;
}

.x-post-list {
  margin-top: 30px;
}

.x-post-list .popup-list li {
  font-size: 14px;
}

.popup-thumb.is-weekly-thumb {
  width: 85px;
}

/**************************************/
/*製品情報*/
/*製品情報の詳細*/
.product-info-wrap {
  margin-top: 70px;
}

.product-info-wrap h3 {
  max-width: 347px;
  width: 36%;
}

.product-mv-wrap {
  display: flex;
  margin: 30px auto 0;
  justify-content: space-between;
}

.product-mv-wrap .left-item {
  width: 48%;
}

.product-mv-wrap .right-item {
  width: 49%;
}

.product-info-img {
  margin-top: 70px;
}

.product-info-wrap .contents-item {
  margin-top: 20px;
}

.product-info-wrap .contents-item + .contents-item {
  margin-top: 130px;
}

.product-info-wrap .contents-item .tab-list:not(.sub-tab-list) {
  margin-top: 55px;
}

/* パッケージ/ダウンロード */
.form-list .tab-btn {
  max-width: 464px;
  width: 48%;
}

/* CSパッケージ 通常版/豪華版 */
.sub-tab-list {
  margin-top: 20px;
  justify-content: center;
}

.sub-tab-list .tab-btn {
  position: relative;
  max-width: 358px;
  width: 37%;
  z-index: var(--z-index-tab-btn-default);
}

.sub-tab-list .tab-btn.is-active {
  z-index: var(--z-index-tab-btn-active);
}

.sub-tab-list .tab-btn + .tab-btn {
  margin-left: 4%;
}

.product-list-item {
  position: relative;
  width: 100%;
  z-index: var(--z-index-tab-list-item);
}

.product-item-title {
  max-width: 600px;
  margin: 0 auto;
}

/*プラットフォーム事のリンクボタン*/
.pt-wrap {
  position: absolute;
  display: flex;
  width: 96%;
  left: 50%;
  bottom: 4%;
  text-align: center;
  transform: translateX(-50%);
  justify-content: center;
}

.pt-wrap li {
  width: 32%;
  margin: 0 auto;
  aspect-ratio: 300/60;
  color: #fff;
  background-color: #1b222d;
}

.pt-wrap li:hover {
  color: #000;
  background-color: #fff;
}

.pt-wrap li + li {
  margin-left: 1%;
}

.spec-popup-btn,
.pt-wrap li a {
  display: flex;
  width: 100%;
  height: 100%;
  font-size: 3vw;
  justify-content: center;
  align-items: center;
}

.spec-popup-btn {
  cursor: pointer;
}

/*動作環境*/
#spec-popup {
  display: none;
}

#spec-popup.fancybox-content {
  max-width: 1000px;
  width: 100%;
}

.product-spec-title {
  max-width: 243px;
  width: 25%;
  margin: 0 auto;
}

.product-spec-text {
  max-width: 402px;
  width: 42%;
  margin: 20px auto 0;
}

/**************************************/
/*タブレット表示*/
@media screen and (max-width: 768px) {
  /*MV*/
  .mv-wrap .pc {
    display: none;
  }

  .mv-wrap .sp {
    display: block;
  }

  .mv-bg .mv-copyright {
    display: none;
  }

  .mv-copyright.pc {
    display: block;
  }

  .mv-bg {
    background: URL(../image/top/mvbg_07.png) no-repeat center center;
    background-size: cover;
  }

  .mv-copyright {
    width: 98%;
    top: 1%;
    left: 1%;
  }

  .mv-logo {
    width: 50%;
    top: 12%;
  }

  .mv-release {
    width: 75%;
  }

  .mv-link-wrap {
    width: 240px;
    height: auto;
  }

  /*概要*/
  .what-dsr-wrap {
    flex-wrap: wrap;
    justify-content: center;
  }

  .what-dsr-wrap .left-item {
    max-width: 377px;
  }

  .what-dsr-wrap .left-item,
  .what-dsr-wrap .right-item {
    width: 100%;
  }
}

/**************************************/
/*スマホ表示*/
@media screen and (max-width: 414px) {
  /*MV*/
  .mv-bg {
    background: URL(../image/top/mv_sp.png) no-repeat center center;
    background-size: cover;
  }

  .mv-bg .mv-copyright {
    display: block;
  }

  .mv-copyright.pc {
    display: none;
  }

  .mv-copyright {
    width: 100%;
    top: 0;
    left: 0;
  }

  .mv-logo {
    width: 75%;
    top: 20%;
  }

  .mv-link-wrap {
    width: 240px;
    height: auto;
  }

  /*概要*/
  #lb-outline .contents-item + .contents-item {
    margin-top: 50px;
  }

  /*製品情報*/
  .product-info-wrap .contents-item + .contents-item {
    margin-top: 50px;
  }
}