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

/**************************************/
/* header */
#header-wrap {
  pointer-events: none;
}

.global-nav,
.hamburger-btn {
  pointer-events: auto;
}

.header-list-default {
  display: none !important;
}

.header-list-season2 {
  display: block;
}

.hamburger-btn {
  display: block; /* スマホで表示 */
}

#header-wrap {
  background: none;
}

.global-nav {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 400px;
  width: 100%;
  text-align: left;
  /*background: var(--color-slategray);*/
  background: #e3e5e5;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);

  transform: translateX(100%);
  visibility: hidden;

  transition:
    transform 0.5s ease,
    visibility 0.5s ease;
}

.global-nav.is-active {
  max-height: 500px; /* メニューの高さに合わせて調整 */
  visibility: visible;

  transform: translateX(0);
}

.global-nav ul {
  flex-direction: column;
  gap: 0;
  padding: 10px 0;
}

.global-nav li {
  /*border-bottom: 1px solid #f0f0f0;*/
  border-bottom: 1px solid #778b83;
}

.global-nav li:last-child {
  border-bottom: none;
}

.global-nav a {
  display: block;
  padding: 15px 20px;
  width: 100%;
  color: #778b83;
}

.global-nav a::after {
  display: none; /* スマホでは下線アニメーションなし */
}

.global-nav .new-icon {
  top: 0.1em;
  left: calc(50% - 4em);
  right: 0;
}

.hamburger-btn {
  position: absolute;
  width: 48px;
  height: 48px;
  top: 10px;
  right: 20px;

  background: #e3e5e5;
}

.hamburger-btn span {
  display: block;
  position: absolute;
  left: 10px;
  width: 28px;
  height: 2px;
  background-color: #778b83;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.hamburger-btn span:nth-child(1) {
  top: 14px;
}

.hamburger-btn span:nth-child(2) {
  top: 23px;
}

.hamburger-btn span:nth-child(3) {
  top: 32px;
}

/* 押したときは四角背景を消す */
.hamburger-btn.is-active {
  background: transparent;
}

/* ×印 */
.hamburger-btn.is-active span:nth-child(1) {
  top: 19px;
  transform: rotate(45deg);
}

/* 真ん中を消す */
.hamburger-btn.is-active span:nth-child(2) {
  opacity: 0;
}

/* 3本目 → ／ */
.hamburger-btn.is-active span:nth-child(3) {
  top: 19px;
  transform: rotate(-45deg);
}

#footer-wrap {
  background: URL(../image/common/dssb2_season2_footer.png) no-repeat center/cover;
}

.footer-copyright-wrap {
  display: none;
}

.season2-footer-copyright-wrap {
  display: block;
}

/**************************************/
/*背景アニメ*/

.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-tank,
.bg-anime-fighter,
.bg-anime-ship,
.bg-anime-heli,
.bg-anime-submarine {
  display: none;
}

.bg-anime div.is-active {
  display: block;
}

.bg-anime-fighter {
  position: relative;
}

.bg-anime .anime-tank,
.bg-anime .anime-air,
.bg-anime .anime-sea,
.bg-anime .anime-heli,
.bg-anime .anime-submarine {
  position: absolute;
  opacity: 0.1;

  img {
    filter: brightness(0) invert(0.85);
  }
}

/*戦車*/
#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 {
  max-width: 300px;
  width: 10%;
}

#bg-anime-fighter-1 {
  left: 18vw;
  /*bottom: -90px;*/
  /*bottom: calc(-1 * 5%) px;*/
}

#bg-anime-fighter-2 {
  left: 30vw;
  bottom: 0;
}

#bg-anime-fighter-3 {
  left: 42vw;
  /*bottom: -90px;*/
  /*bottom: calc(-1 * 5%) px;*/
}

#bg-anime-fighter-4 img,
#bg-anime-fighter-5 img,
#bg-anime-fighter-6 img,
#bg-anime-fighter-7 img,
#bg-anime-fighter-8 img {
  transform: scale(0.5);
}

#bg-anime-fighter-4 {
  left: 70vw;
  top: -100px;
}

#bg-anime-fighter-5 {
  left: 75vw;
  top: -50px;
}

#bg-anime-fighter-6 {
  left: 80vw;
  top: 0;
}

#bg-anime-fighter-7 {
  left: 85vw;
  top: -50px;
}

#bg-anime-fighter-8 {
  left: 90vw;
  top: -100px;
}

#bg-anime-fighter-9 img,
#bg-anime-fighter-10 img,
#bg-anime-fighter-11 img,
#bg-anime-fighter-12 img,
#bg-anime-fighter-13 img,
#bg-anime-fighter-14 img {
  transform: scale(0.8);
}

#bg-anime-fighter-9 {
  left: 10vw;
  bottom: -140px;
}

#bg-anime-fighter-10 {
  left: 15vw;
  bottom: 0;
}

#bg-anime-fighter-11 {
  left: 20vw;
  bottom: -140px;
}

#bg-anime-fighter-12 {
  left: 5vw;
  bottom: -240px;
}

#bg-anime-fighter-13 {
  left: 15vw;
  bottom: -240px;
}

#bg-anime-fighter-14 {
  left: 25vw;
  bottom: -240px;
}

#bg-anime-fighter-15 img,
#bg-anime-fighter-16 img,
#bg-anime-fighter-17 img,
#bg-anime-fighter-18 img {
  transform: scale(0.8);
}

#bg-anime-fighter-15 {
  left: 49vw;
  top: -300px;
}

#bg-anime-fighter-16 {
  left: 55vw;
  top: -240px;
}

#bg-anime-fighter-17 {
  left: 61vw;
  top: -300px;
}

#bg-anime-fighter-18 {
  left: 55vw;
  top: 0px;
}

/*艦船*/
.bg-anime .anime-sea img {
  transform: scale(1);
}

#bg-anime-ship-1 {
  bottom: 15vh;
}

#bg-anime-ship-2 {
  bottom: 65vh;
}

#bg-anime-ship-3 {
  bottom: 45vh;
}

#bg-anime-ship-3 img {
  transform: scale(0.8);
}

/*ヘリ*/
.anime-heli {
  max-width: 300px;
  width: 10%;
}

/*右向き*/
.anime-heli.to-right {
  transform: rotate(10deg) scale(-1, 1);
}

/*左向き*/
.anime-heli.to-left {
  transform: rotate(-10deg);
}

/*①左→右*/
#bg-anime-heli-1 {
  bottom: 15vh;
}
#bg-anime-heli-2 {
  bottom: 18vh;
}
#bg-anime-heli-3 {
  bottom: 13vh;
}

/*②右→左*/
#bg-anime-heli-4,
#bg-anime-heli-6 {
  bottom: 60vh;
}

#bg-anime-heli-5 {
  bottom: 56vh;
}

/*③左→右*/
#bg-anime-heli-7 {
  bottom: 70vh;
}

#bg-anime-heli-8 {
  bottom: 55vh;
}

#bg-anime-heli-9 {
  bottom: 40vh;
}

#bg-anime-heli-10 {
  bottom: 25vh;
}

/*④右→左*/
#bg-anime-heli-11 {
  bottom: 65vh;
}

#bg-anime-heli-12 {
  bottom: 50vh;
}

#bg-anime-heli-13 {
  bottom: 35vh;
}

#bg-anime-heli-14 {
  bottom: 20vh;
}

/*潜水艦*/
.anime-submarine img {
  /*transform: scale(0.5);*/
}

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

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

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

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

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

/**************************************/
/* 固定リンク */
.popup-title {
  font-size: 28px;
  margin-bottom: 15px;
  text-align: center;
}

#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;
}

.btn-to-yoyak {
  display: fixed;
  left: 0;
  bottom: 0;
}

/**************************************/

h2 {
  position: relative;
  max-width: none !important;
  width: fit-content !important;
  text-align: center;
  font-size: clamp(24px, 8.24vw, 56px);
  white-space: nowrap;
  /*color: #d1ffd1;*/
  color: #fff;
}

h2::after {
  content: "";
  position: absolute;
  left: -0.5em;
  right: -0.5em;
  bottom: 0;
  height: 1px;
  /*background: #d1ffd1;*/
  background: #fff;
}

h2 + h3 {
  margin-top: 30px;
}

h3 {
  font-size: clamp(24px, 4.16vw, 40px);
  white-space: nowrap;
  color: #c5cbc9;
  /*color: #fff;*/
}

h3 + .contents-item,
h3 + .contents-img {
  margin-top: 20px;
}

h4 {
  font-size: 32px;
  color: #fff;
}

h4 + .contents-text {
  margin-top: 10px;
}

.contents-text {
  color: #fff;
}

.contents-text-title {
  margin-bottom: 0.5em;
  font-size: 1.2em;
}

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

.link-text {
  color: blue;
  text-decoration: underline;
}

.link-text:hover {
  color: red;
  text-decoration: underline;
}

.caution-text {
  font-size: 0.7em;
  line-height: 1.2em;
  padding-left: 1em;
  text-indent: -1em;
}

.contents-wrap {
  scroll-margin-top: 64px;
}

.contents-wrap + .contents-wrap {
  margin-top: 100px;
}

.contents-item {
  scroll-margin-top: 80px;
}

.contents-item + .contents-item {
  margin-top: 50px;
}

.contents-item + h3 {
  margin-top: 30px;
}

.contents-item h3 {
  position: relative;
}

.contents-item h3 > .new-icon {
  position: absolute;
  width: 40px;
  top: -10%;
  left: 15px;
  transform: translateX(-50%);
}

.contents-img-list .contents-text {
  width: 90%;
  margin: 10px auto 0;
}

.indent-text {
  padding-left: 2.5em;
  text-indent: -2.5em;
}

.cs-caution-text {
  padding-left: 1em;
  text-indent: -1em;
  font-size: 1em;

  a {
    color: blue;
    border-bottom: 1px solid blue;
  }

  a:hover {
    color: red;
    border-bottom: 1px solid red;
  }
}

.text-orange {
  color: #ff9000;
}

.max-w-270 {
  max-width: 270px;
  margin: auto;
}

.max-w-375 {
  max-width: 375px;
  margin: auto;
}

/*タブ共通設定*/
.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);
}

.top-accordion .accordion-content {
  display: none;
}

/*アコーディオンコンテンツのnewアイコン*/
.accordion-btn .new-icon {
  position: absolute;
  width: 44px;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
}

.accordion-content .new-icon {
  position: absolute;
  width: 30px;
  top: -5px;
  left: 0;
}

.side-wrap {
  display: flex;
  justify-content: space-between;

  .left-item {
    width: 58%;
  }

  .right-item {
    display: flex;
    width: 40%;
    align-items: center;
  }
}

.side-reverse {
  .left-item {
    display: flex;
    width: 40%;

    align-items: center;
  }

  .right-item {
    /*display: block;*/
    width: 58%;
    flex-flow: column;
    justify-content: center;

    p {
      width: 100%;
    }
  }
}

h3 + .side-wrap,
h4 + .side-wrap,
.side-wrap + h4 {
  margin-top: 30px;
}

#main-wrap {
  padding-top: 0;
}

.bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: URL(../image/season2/bg.jpg) no-repeat center / cover;
  z-index: -1;
}

.btn-to-top {
  bottom: 10px;
}

/**ロゴ*/
.logo-wrap {
  display: flex;
  width: 100%;
  height: 270px;
  background-color: #eff9f3;
  justify-content: center;
  align-items: center;

  img {
    max-width: 510px;
  }
}

/*概要*/
#lb-outline {
  margin-top: 50px;

  .contents-text {
    font-size: 24px;
    line-height: 40px;
  }
}

.outline-side-wrap {
  display: flex;

  .left-item {
    width: 70%;
  }

  .right-item {
    width: 30%;
  }
}

.outline-side-wrap + .contents-text {
  margin-top: 0;
}

/*シーズン2 DLC「パワーアップキット」*/
.campaign-mode-wrap {
  width: 105%;
  padding: 2.5%;
  margin-top: 30px;
  margin-left: -2.5%;
  margin-bottom: 30px;
  background-color: #939dac;
}

.pakistan-list + .contents-text {
  margin-top: 0;
}

/*無料大型アップデート*/
.tech-list {
  .left-item {
    width: 28%;
  }

  .right-item {
    display: flex;
    width: 70%;
    align-items: center;
  }
}

.level-list {
  li {
    padding-left: 5em;
    text-indent: -5em;
  }
}

/*製品情報*/
.tabs {
  display: flex;
  justify-content: space-between;
}

.tabs button {
  max-width: 300px;
  width: 30%;
}

.tab-btn.is-inactive {
  pointer-events: none;
}

.products-wrap {
  position: relative;
}

.tab-products-section {
  margin-top: 30px;
}

.tab-products-section + .tab-products-section {
  margin-top: 50px;
}

/*.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}*/

.tab3 {
  margin-top: 9%;
}

.tab3 .tab-btn {
  position: absolute;
  top: -11.4%;
  left: 0;
}

.tab3 .tab-btn:nth-child(2) {
  left: 0;
  right: 0;
  margin: 0 auto;
}

.tab3 .tab-btn:nth-child(3) {
  right: 0;
}

/*プラットフォームタブ*/
.tab1 {
  width: 90%;
  margin: 0 auto;
  justify-content: center;
}

.tab1 button,
.img-ps5-pt,
.img-st-pc-pt,
.img-st-pc-pt {
  width: 254px;
}

.img-ps5-pt,
.img-st-pc-pt,
.img-st-pc-pt {
  margin: 0 auto;
}

/*販売形態タブ*/
.tab2 {
  margin-top: 4%;
}

.tab2 button {
  margin: 0 auto;
}

/*Steam版は通常版なし*/
#tab-st-sf-wrap {
  width: 66%;
  margin: 4% auto 0;
}

#tab-st-sf-wrap button {
  width: 50%;
}

.platform-shop-link-popup {
  display: none;
}

.platform-shop-link-list {
  display: flex;
  max-width: 400px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.platform-shop-link-list li {
  width: 48%;
}

.platform-shop-link-list li a {
  font-size: 24px;
  color: var(-color-slategray);
  text-decoration: underline;
}

.platform-shop-link-list li a:hover {
  text-decoration: none;
}

.platform-shop-link-list li:nth-child(n + 3) {
  margin-top: 1.5em;
}

/*Steam、PCのプラットフォーム画像*/
/*.img-st-pc-pt {
  width: 254px;
  margin: 0 auto;
}*/

/*購入ボタン*/
.btn-product-buy,
.btn-product-spec {
  position: absolute;
  max-width: 300px;
  width: 31%;
  bottom: 4%;
  right: 0;
  left: 0;
  margin: 0 auto;
}

.btn-product-buy a,
.btn-product-spec a {
  display: flex;
  width: 100%;
  aspect-ratio: 300/60;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 3vw, 20px);
  color: #fff;
  background-color: #1b222d;
}

.btn-product-buy a:hover,
.btn-product-spec a:hover {
  color: #000;
  background-color: #fff;
}

/*Steam、PCは動作環境ボタン表示*/
.btn-product-buy-wrap {
  position: absolute;
  display: flex;
  width: 100%;
  bottom: 4%;
  right: 0;
  left: 0;
  margin: 0 auto;
}

.btn-product-buy-wrap .btn-product-buy,
.btn-product-spec {
  position: relative;
}

/*プラットフォーム事のリンクボタン*/
.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 a {
  cursor: pointer;
}

.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: 1400px) {
  #lb-other {
    br.sp {
      display: block;
    }
  }
}

/**************************************/
@media (max-width: 1050px) {
  .global-nav {
    left: auto;
  }
}

/**************************************/
/*タブレット表示*/
@media screen and (max-width: 768px) {
  br.sp {
    display: block;
  }

  .side-wrap {
    flex-wrap: wrap;

    .left-item {
      width: 100%;
    }

    .right-item {
      width: 100%;
    }
  }

  .outline-side-wrap {
    flex-wrap: wrap;
    flex-flow: column-reverse;

    .left-item {
      width: 100%;
    }

    .right-item {
      max-width: 375px;
      width: 100%;
      margin: 0 auto 10px;
    }
  }

  .pakistan-list {
    flex-flow: column-reverse;

    .right-item {
      max-width: 380px;
      margin: 10px auto 0;
    }
  }
}

/**************************************/
/*スマホ表示*/
@media screen and (max-width: 414px) {
  .global-nav {
    max-width: 100%;
  }

  .tab3 .tab-btn {
    top: -3.5%;
  }

  .btn-product-buy,
  .btn-product-spec {
    width: 45%;
  }

  .btn-product-buy-wrap {
    bottom: 5%;
  }

  /*ショップポップアップ*/
  .platform-shop-link-list {
    max-width: 300px;
  }

  #win-shop-popup,
  #windx-shop-popup {
    max-width: 200px;
  }

  .platform-shop-link-list li a {
    font-size: 16px;
  }
}