@charset "UTF-8";

/* guarantee_content_sp.webpの代わりに表示する、スマホ用の保証説明。 */
.guarantee-mobile {
  display: none;
}

@media (max-width: 767px) {
  .art-guarantee > .mobile-background,
  .art-guarantee .guarantee-desktop-content {
    display: none;
  }

  .guarantee-mobile {
    --guarantee-gold: linear-gradient(90deg, #eac033, #f5db70 27.404%, #dfb12e);
    display: block;
    padding-bottom: calc(12 * var(--art-unit));
    background: #fff;
    color: #060606;
    font-size: calc(16 * var(--art-unit));
    font-weight: 500;
    line-height: calc(28 * var(--art-unit));
  }

  /* 上下の金色の帯はCSS。紙吹雪だけを独立した2倍サイズ画像で重ねる。 */
  .guarantee-mobile__intro {
    position: relative;
    height: calc(257 * var(--art-unit));
  }

  .guarantee-mobile__intro::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: calc(69 * var(--art-unit));
    background: var(--guarantee-gold);
  }

  .art-guarantee .guarantee-mobile__confetti {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
  }

  .guarantee-mobile__more {
    position: absolute;
    top: calc(16 * var(--art-unit));
    left: calc(50% + 0.5 * var(--art-unit));
    display: grid;
    place-items: center;
    width: calc(75 * var(--art-unit));
    height: calc(75 * var(--art-unit));
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: calc(15.825 * var(--art-unit));
    font-weight: 900;
    line-height: 1;
    transform: translateX(-50%);
  }

  .guarantee-mobile__more::after {
    content: '';
    position: absolute;
    top: calc(69 * var(--art-unit));
    left: 50%;
    width: calc(16 * var(--art-unit));
    height: calc(16 * var(--art-unit));
    background: var(--blue);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: translateX(-50%);
  }

  .guarantee-mobile__more > span {
    transform: skewX(-5deg);
  }

  /* 分離済みのメイン見出し画像とアニメーションを引き続き使用。 */
  .art-guarantee #guarantee-title {
    top: calc(117 * var(--art-unit));
  }

  .guarantee-mobile__cards {
    display: grid;
    gap: calc(12.5 * var(--art-unit));
    padding-inline: calc(15 * var(--art-unit));
  }

  /* 高さは最小値のみを指定。文章が増えてもカードが自然に伸びる。 */
  .guarantee-card {
    min-width: 0;
    min-height: calc(167 * var(--art-unit));
    padding: calc(15 * var(--art-unit)) calc(8 * var(--art-unit)) calc(14 * var(--art-unit));
    border: calc(2 * var(--art-unit)) solid var(--blue);
    border-radius: calc(11 * var(--art-unit));
    background: #fff;
  }

  .guarantee-card--rate {
    min-height: calc(186 * var(--art-unit));
  }

  .guarantee-card--refund {
    min-height: calc(203 * var(--art-unit));
  }

  .guarantee-card__heading {
    margin: 0 calc(2 * var(--art-unit)) calc(6 * var(--art-unit)) calc(7 * var(--art-unit));
    padding-bottom: calc(4 * var(--art-unit));
    border-bottom: calc(2 * var(--art-unit)) dashed var(--blue);
    color: #d8100f;
    font-size: calc(26 * var(--art-unit));
    font-weight: 900;
    line-height: calc(38 * var(--art-unit));
  }

  .guarantee-card__heading-text {
    position: relative;
    top: calc(-3 * var(--art-unit));
    display: inline-block;
    background: linear-gradient(155deg, #d8100f 13.09%, #ff4140 55.332%, #d8100f 92.246%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transform: skewX(-5deg);
  }

  .guarantee-card--rate .guarantee-card__heading-text {
    margin-left: calc(10 * var(--art-unit));
  }

  .guarantee-card__heading sup {
    display: inline-block;
    margin-left: calc(2 * var(--art-unit));
    color: #e52221;
    font-size: calc(12 * var(--art-unit));
    font-weight: 500;
    line-height: 1;
    vertical-align: top;
    transform: skewX(-5deg);
  }

  .guarantee-card--rate .guarantee-card__heading sup {
    position: relative;
    top: calc(8 * var(--art-unit));
  }

  .guarantee-card__body {
    display: grid;
    grid-template-columns: calc(83 * var(--art-unit)) minmax(0, 1fr);
    align-items: start;
    gap: calc(10 * var(--art-unit));
    margin-right: calc(3 * var(--art-unit));
  }

  .art-guarantee .guarantee-card__icon {
    width: 100%;
    height: auto;
  }

  .guarantee-card__copy {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .guarantee-card mark {
    background: linear-gradient(transparent 25%, #fff200 25%, #fff200 95%, transparent 95%);
    color: inherit;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .guarantee-card__note {
    margin-top: calc(6 * var(--art-unit));
    font-size: calc(12 * var(--art-unit));
    line-height: calc(14 * var(--art-unit));
  }

  .guarantee-card__note--rate {
    margin-top: calc(7 * var(--art-unit));
    line-height: calc(12 * var(--art-unit));
  }

  .guarantee-mobile::after {
    content: '';
    display: block;
    height: calc(25 * var(--art-unit));
    margin-top: calc(14 * var(--art-unit));
    background: var(--guarantee-gold);
  }
}