.oshiageBox {
  --oshiage-accent: #ff7942;
  --oshiage-text: #303030;
  background: #fff;
  padding-block: clamp(48px, 7vw, 80px);
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo,
    メイリオ, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体",
    "Yu Gothic", YuGothic, "MS PGothic", Osaka, arial, sans-serif;
  color: var(--oshiage-text);
}

.oshiageBox__inner {
  width: min(920px, 90%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.oshiageBox__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.oshiageBox__intro {
  width: min(768px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.oshiageBox__header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.oshiageBox__date {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(8px, 1.7vw, 16px);
  font-weight: 700;
  line-height: 1;
}

.oshiageBox__dateLead {
  display: flex;
  align-items: flex-end;
  gap: clamp(6px, 1.3vw, 12px);
}

.oshiageBox__dateNum {
  font-size: clamp(37px, 9.8vw, 100px);
  letter-spacing: 0.12em;
}

.oshiageBox__dateSub {
  font-size: clamp(13px, 3.5vw, 36px);
  letter-spacing: 0.18em;
  line-height: 1.8;
}

.oshiageBox__dateMain {
  font-size: clamp(30px, 8vw, 82px);
  letter-spacing: 0.04em;
}

/* intro幅768pxではデザインの字間だと1行に収まらないため、PC(1行表示)のみ字間を詰める。SPは2行でデザインの字間を維持。 */
@media (min-width: 897px) {
  .oshiageBox__date {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .oshiageBox__dateNum {
    letter-spacing: -0.02em;
  }

  .oshiageBox__dateSub {
    letter-spacing: 0;
  }

  .oshiageBox__dateMain {
    letter-spacing: -0.02em;
  }
}

.oshiageBox__period {
  margin-block-start: clamp(14px, 2.7vw, 28px);
  background: #fff;
  border: 2px solid #ebebeb;
  border-radius: 8px;
  padding: clamp(10px, 1.6vw, 16px) clamp(16px, 2.4vw, 24px);
  font-size: clamp(13px, 2.5vw, 26px);
  line-height: 1;
}

.oshiageBox__fund {
  margin-block-start: clamp(24px, 4.7vw, 48px);
  width: 100%;
}

.oshiageBox__fund img {
  display: block;
  width: 100%;
  height: auto;
}

.oshiageBox__promo {
  margin-block-start: clamp(32px, 6.3vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1;
}

.oshiageBox__limit {
  font-size: clamp(24px, 5.3vw, 54px);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.oshiageBox__target {
  margin-block-start: clamp(12px, 2.4vw, 24px);
  font-size: clamp(13px, 2vw, 20px);
  letter-spacing: 0.04em;
}

.oshiageBox__lead {
  margin-block-start: clamp(24px, 4.6vw, 42px);
  font-size: clamp(20px, 4.1vw, 42px);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.oshiageBox__amount {
  margin-block-start: clamp(12px, 2.2vw, 22px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.9vw, 8px);
  font-weight: 700;
}

.oshiageBox__amountPre {
  font-size: clamp(20px, 4.1vw, 42px);
  letter-spacing: 0.04em;
}

.oshiageBox__amountAccent {
  display: flex;
  align-items: flex-end;
  color: var(--oshiage-accent);
  font-weight: 900;
}

.oshiageBox__amountNum {
  font-size: clamp(55px, 14.5vw, 148px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.9;
}

.oshiageBox__amountUnit {
  margin-inline-start: clamp(7px, 1.5vw, 14px);
  font-size: clamp(33px, 8.6vw, 88px);
  letter-spacing: 0.1em;
  padding-block-end: 0.05em;
}

.oshiageBox__amountSuf {
  margin-inline-start: clamp(2px, 0.4vw, 4px);
  font-size: clamp(20px, 5.1vw, 52px);
  letter-spacing: 0.08em;
  padding-block-end: 0.1em;
}

.oshiageBox__gift {
  margin-block-start: clamp(11px, 2.2vw, 22px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.7vw, 16px);
  font-weight: 700;
}

.oshiageBox__giftLabel {
  font-size: clamp(21px, 4.2vw, 43px);
  text-align: right;
  line-height: 1.2;
}

.oshiageBox__giftMark {
  font-size: 0.5em;
  vertical-align: top;
}

.oshiageBox__giftMain {
  font-size: clamp(38px, 10.2vw, 104px);
  letter-spacing: 0.04em;
}

.oshiageBox__chart {
  margin-block-start: clamp(40px, 9.8vw, 100px);
  width: 100%;
}

.oshiageBox__chart img {
  display: block;
  width: 100%;
  height: auto;
}

.oshiageBox__notes {
  margin-block-start: clamp(10px, 1.8vw, 18px);
  width: 100%;
  margin-block-end: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}

.oshiageBox__note {
  font-size: clamp(9px, 1vw, 10px);
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.oshiageBox__cta {
  margin-block-start: clamp(40px, 9.8vw, 100px);
  width: min(638px, 100%);
}

.oshiageBox__ctaLink {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 16px);
  width: 100%;
  box-sizing: border-box;
  padding: clamp(20px, 4.7vw, 48px) clamp(24px, 7vw, 72px);
  background: var(--oshiage-accent);
  border-radius: 9999px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.oshiageBox__ctaLink:hover {
  opacity: 0.85;
}

.oshiageBox__ctaLabel {
  color: #fff;
  font-size: clamp(18px, 3.9vw, 40px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

.oshiageBox__ctaArrow {
  display: inline-block;
  width: clamp(9px, 1.7vw, 14px);
  height: clamp(9px, 1.7vw, 14px);
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(45deg);
}

@media (max-width: 896px) {
  .oshiageBox {
    padding-block: clamp(40px, 10vw, 56px);
  }

  .oshiageBox__date {
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 2.1vw, 8px);
  }

  .oshiageBox__dateLead {
    gap: clamp(4px, 1.6vw, 6px);
  }

  .oshiageBox__dateNum {
    font-size: clamp(40px, 13.3vw, 56px);
  }

  .oshiageBox__dateSub {
    font-size: clamp(14px, 4.8vw, 20px);
  }

  .oshiageBox__dateMain {
    font-size: clamp(32px, 10.9vw, 46px);
  }

  .oshiageBox__period {
    margin-block-start: clamp(10px, 3.7vw, 14px);
    border-width: 1px;
    border-radius: 4px;
    padding: clamp(6px, 2.1vw, 8px) clamp(10px, 3.2vw, 12px);
    font-size: clamp(11px, 3.5vw, 14px);
  }

  .oshiageBox__fund {
    margin-block-start: clamp(18px, 6.4vw, 24px);
  }

  .oshiageBox__promo {
    margin-block-start: clamp(24px, 8.5vw, 32px);
  }

  .oshiageBox__limit {
    font-size: clamp(22px, 7.2vw, 30px);
  }

  .oshiageBox__target {
    margin-block-start: clamp(8px, 3.2vw, 12px);
    font-size: clamp(10px, 2.7vw, 12px);
  }

  .oshiageBox__lead {
    margin-block-start: clamp(24px, 9.6vw, 36px);
    font-size: clamp(18px, 5.6vw, 24px);
  }

  .oshiageBox__amount {
    margin-block-start: clamp(8px, 2.9vw, 11px);
    gap: clamp(2px, 1.1vw, 4px);
  }

  .oshiageBox__amountPre {
    font-size: clamp(18px, 5.6vw, 24px);
  }

  .oshiageBox__amountNum {
    font-size: clamp(58px, 19.7vw, 82px);
  }

  .oshiageBox__amountUnit {
    margin-inline-start: clamp(4px, 1.9vw, 7px);
    font-size: clamp(34px, 11.7vw, 50px);
  }

  /* SP幅では「最大10万円分相当の」が1行に収まらず折り返すため、サフィックスのみ縮めて数字の大きさを維持する。 */
  .oshiageBox__amountSuf {
    margin-inline-start: clamp(1px, 0.5vw, 2px);
    font-size: clamp(18px, 6.1vw, 30px);
  }

  .oshiageBox__gift {
    margin-block-start: clamp(10px, 4.3vw, 16px);
    flex-direction: column;
    gap: clamp(8px, 3.7vw, 14px);
  }

  .oshiageBox__giftBr {
    display: none;
  }

  .oshiageBox__giftLabel {
    text-align: center;
    font-size: clamp(24px, 8vw, 34px);
    letter-spacing: 0.04em;
    line-height: 1;
  }

  .oshiageBox__giftMain {
    font-size: clamp(40px, 13.3vw, 56px);
  }

  .oshiageBox__chart {
    margin-block-start: clamp(24px, 10vw, 38px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .oshiageBox__chart img {
    width: 919px;
    max-width: none;
  }

  .oshiageBox__notes {
    margin-block-start: clamp(10px, 3.2vw, 12px);
    text-align: left;
  }

  .oshiageBox__cta {
    margin-block-start: clamp(24px, 10vw, 38px);
  }
}