@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : hatajirushisen.css
Description : 旗印戦
===================================================================== */
/* =====================================================================
    hatajirushisen
======================================================================*/
.hatajirushisen {
  padding-bottom: 77rem;
  background: #ffbf00;
  overflow: hidden;
}

.hatajirushisen::before {
  content: '';
  position: absolute;
  display: block;
  bottom: -5rem;
  left: 0;
  width: 100%;
  height: 92.3rem;
  background: url(../images/bg_kaimaku-sp.png) no-repeat center/contain;
}

.hatajirushisen > *,
.hatajirushisen img {
  position: relative;
}

.hatajirushisen img {
  z-index: 2;
}

.ttl_hatajirushisen {
  margin-bottom: -7rem;
}

.ttl_hatajirushisen::before {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 85.7rem;
  background: url(../images/bg_cloud-sp.png) no-repeat center/contain;
  z-index: 1;
}

.ttl_hatajirushisen h2 {
  position: relative;
  padding: 8.4rem 0 14.4rem;
  background: url(../images/bg_radiation.png) no-repeat center/80rem;
}

.ttl_hatajirushisen h2 img {
  z-index: 2;
}

.content1 {
  margin-bottom: 4.6rem;
}

.content1::before {
  content: '';
  position: absolute;
  display: block;
  bottom: -10.4rem;
  right: 2.3rem;
  width: 14.1rem;
  height: 13rem;
  background: url(../images/img_illust1-sp.png) no-repeat center/contain;
}

.content1 img {
  margin-left: auto;
  width: 73.4rem;
}

.content2 {
  margin-bottom: 4rem;
}

.content2::before {
  content: '';
  position: absolute;
  display: block;
  bottom: -12.2rem;
  left: -10rem;
  width: 33.6rem;
  height: 29.4rem;
  background: url(../images/img_illust3.png) no-repeat center/contain;
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
}

.content2 img {
  margin-left: auto;
  width: 73.4rem;
}

.content3 {
  margin-bottom: 6rem;
}

.content3::before {
  content: '';
  position: absolute;
  display: block;
  bottom: -17.9rem;
  right: -1.5rem;
  width: 26.7rem;
  height: 26.7rem;
  background: url(../images/img_illust2.png) no-repeat center/contain;
}

.content3 img {
  margin-left: auto;
  width: 73.4rem;
}

.content4 {
  margin-bottom: 9.1rem;
}

.content4::before {
  content: '';
  position: absolute;
  display: block;
  bottom: -11rem;
  left: -14rem;
  width: 41.7rem;
  height: 41.7rem;
  background: url(../images/img_illust4.png) no-repeat center/contain;
}

.content4 img {
  margin-left: auto;
  width: 73.4rem;
}

@media screen and (min-width: 768px) {
  .hatajirushisen {
    padding-bottom: 74rem;
  }
  .hatajirushisen::before {
    bottom: -7rem;
    left: -4.3rem;
    width: 161.7rem;
    height: 89rem;
    background-image: url(../images/bg_kaimaku-pc.png);
  }
  .ttl_hatajirushisen {
    margin-bottom: -12rem;
  }
  .ttl_hatajirushisen::before {
    top: 5.7rem;
    left: 0;
    width: 51rem;
    height: 51.8rem;
    background-image: url(../images/bg_cloud_l.png);
  }
  .ttl_hatajirushisen::after {
    content: '';
    position: absolute;
    display: block;
    top: 11.3rem;
    right: 0;
    width: 42.2rem;
    height: 49.3rem;
    background: url(../images/bg_cloud_r.png) no-repeat center/contain;
    z-index: 1;
  }
  .ttl_hatajirushisen h2 {
    left: 48%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    padding: 5.7rem 0 16.9rem;
    width: 103.9rem;
    background-size: 94.1rem;
    z-index: 2;
  }
  .content1 {
    margin-bottom: -1rem;
  }
  .content1::before {
    bottom: -0.4rem;
    right: 0;
    width: 42.7rem;
    height: 84.5rem;
    background-image: url(../images/img_illust1-pc.png);
  }
  .content1::after {
    content: '';
    position: absolute;
    display: block;
    top: 29.8rem;
    left: 0;
    width: 38.1rem;
    height: 43.3rem;
    background: url(../images/img_illust5.png) no-repeat center/contain;
  }
  .content1 img {
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    margin: 0;
    width: 104.7rem;
  }
  .content2 {
    margin-bottom: -2rem;
  }
  .content2::before {
    bottom: 6.1rem;
    left: 10rem;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  .content2::after {
    content: '';
    position: absolute;
    display: block;
    bottom: 6.1rem;
    right: 10rem;
    width: 33.6rem;
    height: 29.4rem;
    background: url(../images/img_illust3.png) no-repeat center/contain;
  }
  .content2 img {
    left: 51%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    margin: 0;
    width: 85.7rem;
  }
  .content3 {
    margin: 0 0 0 50%;
    width: 55.1rem;
  }
  .content3::before {
    bottom: auto;
    top: 3.4rem;
    right: -29.3rem;
    width: 33.4rem;
    height: 33.4rem;
  }
  .content3::after {
    content: '';
    position: absolute;
    display: block;
    top: 38rem;
    right: -41.5rem;
    width: 26.7rem;
    height: 26.7rem;
    background: url(../images/img_illust2.png) no-repeat center/contain;
  }
  .content3 img {
    margin: 0;
    width: 100%;
  }
  .content4 {
    margin: -72rem 0 0 15%;
    width: 55.6rem;
  }
  .content4::before {
    bottom: auto;
    top: 10.5rem;
    left: -27.7rem;
    width: 41.7rem;
    height: 41.7rem;
  }
  .content4::after {
    content: '';
    position: absolute;
    display: block;
    top: 52.5rem;
    left: -44rem;
    width: 33.3rem;
    height: 33.3rem;
    background: url(../images/img_illust4.png) no-repeat center/contain;
  }
  .content4 img {
    margin: 0;
    width: 100%;
  }
  .notice {
    margin: -13.5rem auto 0;
    width: 89rem;
  }
}
/*# sourceMappingURL=hatajirushisen.css.map */