@charset "utf-8";

.okinawaBox {
  padding: 10rem 0 8rem;
  text-align: center;
  background: url("../img/index/okinawa_bg.webp") no-repeat center top / cover;
}

.okinawaBox__img {
  margin: 0 auto 4.8rem;
  width: min(100%, 116.6rem);
}

.okinawaBox__img img,
.okinawaBox__btn img {
  width: 100%;
  height: auto;
}

.okinawaBox__btn a {
  display: inline-block;
  width: min(100%, 87.3rem);
}

.okinawaBox__btn a:hover {
  opacity: .7;
}

@media all and (max-width: 896px) {
  .okinawaBox {
    padding: 0 0 6rem;
  }

  .okinawaBox .content {
    margin: 0 auto !important;
    width: 100% !important;
  }

  .okinawaBox__img {
    margin-bottom: 2.4rem;
    width: 100%;
  }

  .okinawaBox__sp {
    padding-top: 7.5rem;
  }

  .okinawaBox__date {
    margin-bottom: 3.8rem;
    color: #e7433d;
    font-size: 4.2rem;
    font-weight: 700;
    line-height: 1.34;
    letter-spacing: .08em;
    text-align: center;
    text-shadow:
      .1rem .1rem 0 #fff,
      -.1rem .1rem 0 #fff,
      .1rem -.1rem 0 #fff,
      -.1rem -.1rem 0 #fff;
  }

  .okinawaBox__date .num {
    font-size: 5rem;
    letter-spacing: .04em;
  }

  .okinawaBox__date .day {
    font-size: 3.3rem;
  }

  .okinawaBox__date .small {
    margin-left: .4rem;
    font-size: 2.6rem;
  }

  .okinawaBox__fund {
    margin: 0 auto 5.4rem;
    width: 90%;
    overflow: hidden;
    border-radius: .6rem;
  }

  .okinawaBox__fund img {
    width: 100%;
    height: auto;
  }

  .okinawaBox__campaign {
    margin: 0 auto 4.3rem;
    padding: 0 1.4rem 1.8rem;
    width: 92.6%;
    position: relative;
    text-align: center;
    background: #ffd0ca;
    border-radius: 1.8rem .3rem .3rem .3rem;
  }

  .okinawaBox__label {
    margin: 0 auto 3.2rem;
    width: 78%;
    position: relative;
    top: -2.8rem;
    color: #e34842;
    font-size: 2.9rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .08em;
    background: #fff;
    border: .2rem solid #f08383;
    border-radius: .5rem;
    padding: 1.1rem .8rem;
  }

  .okinawaBox__lead {
    margin: -1.4rem 0 1.6rem;
    color: #152129;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .07em;
  }

  .okinawaBox__lead::before,
  .okinawaBox__lead::after {
    content: "";
    width: 3.8rem;
    height: .2rem;
    display: inline-block;
    vertical-align: middle;
    background: currentColor;
  }

  .okinawaBox__lead::before {
    margin-right: 1.1rem;
    transform: rotate(48deg);
  }

  .okinawaBox__lead::after {
    margin-left: 1.1rem;
    transform: rotate(-48deg);
  }

  .okinawaBox__coin {
    margin: 0 auto 1.7rem;
    padding: .2rem 0 .5rem;
    color: #e64a31;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: .08em;
    background: #ffde95;
  }

  .okinawaBox__chart {
    margin: 0 auto;
  }

  .okinawaBox__chart img {
    width: 100%;
    height: auto;
  }

  .okinawaBox__btn {
    padding: 0 4rem;
  }
}