.retailer-header {
  background-color: #fff;;
}
#overview {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative
}

#overview .container {
  max-width: 100%
}

@media(max-width: 767px) {
  #overview .container {
    padding-left: 7vw;
    padding-right: 7vw
  }
}

#overview:before {
  content: "";
  position: absolute;
  width: 100%;
  height: auto;
  display: block;
  background: rgba(0, 0, 0, 0.65);
  /*background: linear-gradient(180deg, rgba(25, 113, 73, 1.0) 0%, rgba(25, 113, 73, 0.6) 50%, rgba(25, 113, 73, 0.45) 100%);*/
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0
}

#overview .overview__img {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%
}

#overview .overview__img img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

#overview .overview__img::before {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  height: 6.25rem;
  background-color: var(--background-page);
  left: 0;
  top: -6.25rem
}

#overview .overview__img.fixed-top::before {
  position: fixed;
  top: 0
}

#overview .overview__img.fixed-bottom::before {
  position: fixed;
  top: auto;
  bottom: 0;
  background-color: #d2d2d2
}

#overview .overview__picture {
  position: fixed;
  z-index: -2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out
}

#overview .overview__picture.active {
  opacity: 1
}

#overview #movie {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  object-fit: cover
}

#overview .text-box {
  position: relative;
  z-index: 0
}

@media(max-width: 767px) {
  #overview .text-box {
    padding-top: 4.875rem;
    padding-bottom: 4.875rem
  }
}

@media(min-width: 768px) {
  #overview .text-box {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
    padding-top: 7.5rem;
    padding-bottom: 26.875rem;
    margin-left: auto;
    margin-right: auto
  }
}

#overview .overview-title,
#overview .overview-date {
  color: #fff;
  letter-spacing: .05em;
  text-align: center
}

#overview .overview-title {
  font-weight: bold;
  margin: 0 auto 40px
}

@media(max-width: 767px) {
  #overview .overview-title {
    font-size: 28px;
    line-height: 1.1786
  }
}

@media(min-width: 768px) {
  #overview .overview-title {
    font-size: 52px;
    line-height: 1.0385
  }
}

#overview .overview-date {
  font-weight: 300;
  margin: 0 auto 52px
}

@media(max-width: 767px) {
  #overview .overview-date {
    font-size: 24px;
    line-height: 1.1786
  }
}

@media(min-width: 768px) {
  #overview .overview-date {
    font-size: 39px;
    line-height: 1.0385
  }
}

#overview .text__normal {
  font-weight: 300;
  color: #fff;
  font-size: .875rem;
  line-height: 1.71428em
}

@media(min-width: 768px) {
  #overview .text__normal {
    font-size: 1.125rem;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7777em
  }
}

#overview .text__normal+.text__normal {
  margin-top: 1.5rem
}

@media(min-width: 768px) {
  #overview .pc__text-justify {
    word-break: keep-all;
    overflow-wrap: break-word;
    text-align: justify
  }
}

@media(max-width: 767px) {
  #overview .pc__text-justify wbr {
    display: none
  }
}

#overview .pc__text-justify .delete {
  color: #fff
}

@media(min-width: 768px) {
  #overview .pc__text-justify .delete {
    display: none
  }
}