.app {
  position: relative;
}
@media screen and (min-width: 768px) {
  .app {
    padding: max(18.4rem, 1px) 0 max(14.5rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .app {
    padding: max(4rem, 1px) max(3.4rem, 1px) max(7.9rem, 1px);
  }
}
.app-bg {
  background-image: url(../images/common/bg_gold.jpg);
  background-position: 50% 0;
  background-repeat: repeat;
  height: 100%;
  left: 0;
  mask-composite: add;
  mask-position:
    50% 0,
    50% 100%;
  mask-repeat: repeat-x;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .app-bg {
    background-size: max(48rem, 1px) max(48rem, 1px);
    mask-image:
      var(--gradient-mask), url(../images/common/mask_convex_bottom_pc.svg);
    mask-size:
      100% calc(100% - max(16.6rem, 1px)),
      clamp(max(192rem, 1px), 100vw, 100%) max(16.8rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .app-bg {
    background-size: max(48rem, 1px) max(48rem, 1px);
    mask-image:
      var(--gradient-mask), url(../images/common/mask_convex_bottom_sp.svg);
    mask-size:
      100% calc(100% - max(3.4rem, 1px)),
      100% max(3.6rem, 1px);
  }
}
.app-bg:before {
  aspect-ratio: 1/1;
  background: radial-gradient(
    158.02% 50% at 50% 50%,
    rgb(var(--color-black-rgb) / 20%) 0,
    var(--color-black) 100%
  );
  background-repeat: no-repeat;
  content: "";
  display: block;
  left: 0;
  mix-blend-mode: overlay;
  position: absolute;
}
@media screen and (min-width: 768px) {
  .app-bg:before {
    top: -31.5rem;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .app-bg:before {
    left: -104rem;
    top: -31.5rem;
    width: max(144rem, 1px);
  }
}
.app-inner {
  margin-inline: auto;
  position: relative;
}
@media screen and (min-width: 768px) {
  .app-inner {
    max-width: max(131.2rem, 1px);
  }
}
.app-figure {
  position: absolute;
}
@media screen and (min-width: 768px) {
  .app-figure {
    height: max(67.2rem, 1px);
    left: 0;
    top: 0;
    width: max(68.4rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .app-figure {
    height: max(37.8rem, 1px);
    left: -2.2rem;
    top: max(26.4rem, 1px);
    width: max(37.6rem, 1px);
  }
}
.app-figure:before {
  background-image: url(../images/app/app_bg.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  content: "";
  display: block;
  inset: 0;
  mix-blend-mode: multiply;
  position: absolute;
}
.app-figure-img {
  position: absolute;
}
@media screen and (min-width: 768px) {
  .app-figure-img {
    filter: drop-shadow(
        -9rem max(15.7rem, 1px) max(7.2rem, 1px) rgba(24, 1, 1, 0.02)
      )
      drop-shadow(
        -5.1rem max(8.8rem, 1px) max(6.1rem, 1px) rgba(24, 1, 1, 0.08)
      )
      drop-shadow(
        -2.3rem max(3.9rem, 1px) max(4.5rem, 1px) rgba(24, 1, 1, 0.14)
      )
      drop-shadow(-0.6rem max(1rem, 1px) max(2.5rem, 1px) rgba(24, 1, 1, 0.16));
    width: max(28rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .app-figure-img {
    filter: drop-shadow(
        -5.5rem max(9.6rem, 1px) max(4.4rem, 1px) rgba(24, 1, 1, 0.02)
      )
      drop-shadow(
        -3.1rem max(5.4rem, 1px) max(3.7rem, 1px) rgba(24, 1, 1, 0.08)
      )
      drop-shadow(
        -1.4rem max(2.3rem, 1px) max(2.7rem, 1px) rgba(24, 1, 1, 0.14)
      )
      drop-shadow(
        -0.3rem max(0.6rem, 1px) max(1.5rem, 1px) rgba(24, 1, 1, 0.16)
      );
    width: max(17.2rem, 1px);
  }
}
@media screen and (min-width: 768px) {
  .app-figure-img-01 {
    left: max(8rem, 1px);
    top: max(7.1rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .app-figure-img-01 {
    left: max(2.8rem, 1px);
    top: max(1.2rem, 1px);
  }
}
@media screen and (min-width: 768px) {
  .app-figure-img-02 {
    left: max(32.4rem, 1px);
    top: max(0.8rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .app-figure-img-02 {
    left: max(17.6rem, 1px);
    top: -0.4rem;
  }
}
@media screen and (min-width: 768px) {
  .app-info {
    margin-left: auto;
    margin-right: max(8.4rem, 1px);
    padding-top: max(2rem, 1px);
    width: max(51.8rem, 1px);
  }
  .app-logo {
    width: max(28.1rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .app-logo {
    margin: 0 auto;
    width: max(18.8rem, 1px);
  }
}
.app-name {
  align-items: center;
  display: flex;
}
@media screen and (min-width: 768px) {
  .app-name {
    column-gap: max(1.6rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .app-name {
    column-gap: max(1.4rem, 1px);
    justify-content: center;
  }
}
.app-name-logo {
  aspect-ratio: 1/1;
}
@media screen and (min-width: 768px) {
  .app-name-logo {
    width: max(7.2rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .app-name-logo {
    width: max(4.8rem, 1px);
  }
}
@media screen and (min-width: 768px) {
  .app-name-txt {
    width: max(19.6rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .app-name-txt {
    width: max(12.7rem, 1px);
  }
}
.app-ttl {
  position: relative;
}
@media screen and (min-width: 768px) {
  .app-ttl {
    margin-top: max(3.2rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .app-ttl {
    margin-left: max(0.2rem, 1px);
    margin-top: max(2.1rem, 1px);
    width: max(32.7rem, 1px);
  }
}
.app-label {
  display: block;
}
@media screen and (min-width: 768px) {
  .app-label {
    margin-left: auto;
    margin-right: max(1.6rem, 1px);
    margin-top: -6rem;
    width: max(25.4rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .app-label {
    margin: max(43rem, 1px) auto 0;
    width: max(25rem, 1px);
  }
}
@media screen and (min-width: 768px) {
  .app-txt {
    font-family: var(--font-family-base);
    font-size: max(1.8rem, 1px);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-base);
    line-height: var(--leading-base);
  }
}
@media screen and (max-width: 767px) {
  .app-txt {
    font-family: var(--font-family-base);
    font-size: max(1.5rem, 1px);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-base);
    line-height: var(--leading-base);
  }
}
@media screen and (min-width: 768px) {
  .app-txt {
    margin-left: max(0.3rem, 1px);
    margin-top: max(3.2rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .app-txt {
    margin-top: max(2.4rem, 1px);
    text-align: center;
  }
}
.app-note {
  text-align: justify;
  word-break: break-all;
}
@media screen and (min-width: 768px) {
  .app-note {
    font-family: var(--font-family-base);
    font-size: max(1.2rem, 1px);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-base);
    line-height: var(--leading-normal);
  }
}
@media screen and (max-width: 767px) {
  .app-note {
    font-family: var(--font-family-base);
    font-size: max(1.1rem, 1px);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-base);
    line-height: var(--leading-normal);
  }
}
@media screen and (min-width: 768px) {
  .app-note {
    margin-top: max(3rem, 1px);
    width: max(49.6rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .app-note {
    margin: max(2rem, 1px) -1.4rem 0;
  }
}
.app .u-list-note > li {
  padding-left: 1em;
  text-indent: -1em;
}
.value {
  display: flex;
  justify-content: center;
  position: relative;
}
@media screen and (min-width: 768px) {
  .value {
    column-gap: max(7.2rem, 1px);
    padding: max(14.4rem, 1px) 0;
  }
}
@media screen and (max-width: 767px) {
  .value {
    align-items: center;
    flex-direction: column;
    padding: max(8rem, 1px) max(2rem, 1px);
    row-gap: max(3.4rem, 1px);
  }
}
.value-ttl {
  position: relative;
}
@media screen and (min-width: 768px) {
  .value-ttl {
    margin-top: max(4rem, 1px);
    width: max(16rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .value-ttl {
    margin-left: max(1.4rem, 1px);
    width: max(31.8rem, 1px);
  }
}
.value-list {
  display: flex;
  position: relative;
}
@media screen and (min-width: 768px) {
  .value-list {
    column-gap: max(2.4rem, 1px);
    margin-right: max(4rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .value-list {
    flex-direction: column;
    row-gap: max(2rem, 1px);
  }
}
.value-item {
  background-color: var(--color-white);
  border: 0 solid var(--color-beige);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
}
@media screen and (min-width: 768px) {
  .value-item {
    border-width: max(0.1rem, 1px);
    min-height: max(49.6rem, 1px);
    padding: max(1.2rem, 1px);
    width: max(33.6rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .value-item {
    border-width: max(0.1rem, 1px);
    padding: max(1rem, 1px);
  }
}
.value-item-body {
  position: relative;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .value-item-body {
    padding: max(4rem, 1px) 0 max(2rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .value-item-body {
    padding: max(4.6rem, 1px) 0 max(2.8rem, 1px);
  }
}
.value-item-num {
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
}
@media screen and (min-width: 768px) {
  .value-item-num {
    top: -2.4rem;
    width: max(7.2rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .value-item-num {
    top: -2.5rem;
    width: max(7.8rem, 1px);
  }
}
.value-item-ttl {
  font-size: max(2.4rem, 1px);
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  .value-item-ttl {
    font-family: var(--font-family-toppan);
    font-size: max(2.4rem, 1px);
    font-weight: var(--font-weight-extra-bold);
    letter-spacing: var(--tracking-base);
    line-height: var(--leading-normal);
  }
}
@media screen and (min-width: 768px) and (max-width: 767px) {
  .value-item-ttl {
    font-family: var(--font-family-toppan);
    font-size: max(1.8rem, 1px);
    font-weight: var(--font-weight-extra-bold);
    letter-spacing: var(--tracking-base);
    line-height: var(--leading-normal);
  }
}
@media screen and (max-width: 767px) and (min-width: 768px) {
  .value-item-ttl {
    font-family: var(--font-family-toppan);
    font-size: max(3.6rem, 1px);
    font-weight: var(--font-weight-extra-bold);
    letter-spacing: var(--tracking-base);
    line-height: var(--leading-normal);
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .value-item-ttl {
    font-family: var(--font-family-toppan);
    font-size: max(2.4rem, 1px);
    font-weight: var(--font-weight-extra-bold);
    letter-spacing: var(--tracking-base);
    line-height: var(--leading-normal);
  }
}
@media screen and (min-width: 768px) {
  .value-item-txt {
    margin-top: max(1.7rem, 1px);
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  .value-item-txt {
    font-family: var(--font-family-base);
    font-size: max(1.6rem, 1px);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-base);
    line-height: var(--leading-base);
  }
}
@media screen and (min-width: 768px) and (max-width: 767px) {
  .value-item-txt {
    font-family: var(--font-family-base);
    font-size: max(1.4rem, 1px);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-base);
    line-height: var(--leading-base);
  }
}
@media screen and (max-width: 767px) {
  .value-item-txt {
    margin-top: max(1.7rem, 1px);
  }
}
@media screen and (max-width: 767px) and (min-width: 768px) {
  .value-item-txt {
    font-family: var(--font-family-base);
    font-size: max(2rem, 1px);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-base);
    line-height: var(--leading-base);
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .value-item-txt {
    font-family: var(--font-family-base);
    font-size: max(1.6rem, 1px);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-base);
    line-height: var(--leading-base);
  }
}
.value-item-note {
  align-items: center;
  border: 0 solid var(--color-red-pale);
  border-radius: var(--border-radius-full);
  color: var(--color-red);
  display: flex;
  justify-content: center;
  width: fit-content;
}
@media screen and (min-width: 768px) {
  .value-item-note {
    border-width: max(0.1rem, 1px);
    height: max(4rem, 1px);
    margin: max(1.6rem, 1px) auto 0;
    padding: 0 max(1.4rem, 1px);
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  .value-item-note {
    font-family: var(--font-family-base);
    font-size: max(1.6rem, 1px);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-base);
    line-height: var(--leading-base);
  }
}
@media screen and (min-width: 768px) and (max-width: 767px) {
  .value-item-note {
    font-family: var(--font-family-base);
    font-size: max(1.4rem, 1px);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-base);
    line-height: var(--leading-base);
  }
}
@media screen and (max-width: 767px) {
  .value-item-note {
    border-width: max(0.1rem, 1px);
    height: max(4rem, 1px);
    margin: max(1.6rem, 1px) auto 0;
    padding: 0 max(1.4rem, 1px);
  }
}
@media screen and (max-width: 767px) and (min-width: 768px) {
  .value-item-note {
    font-family: var(--font-family-base);
    font-size: max(2rem, 1px);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-base);
    line-height: var(--leading-base);
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .value-item-note {
    font-family: var(--font-family-base);
    font-size: max(1.6rem, 1px);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-base);
    line-height: var(--leading-base);
  }
}
.value-item-img {
  border-radius: var(--border-radius-inner);
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .l-contents-bg:before {
    top: max(76.8rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .l-contents-bg:before {
    top: max(117.4rem, 1px);
  }
}
.features {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  position: relative;
}
@media screen and (min-width: 768px) {
  .features {
    column-gap: max(7.2rem, 1px);
    padding-bottom: max(31.2rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .features {
    align-items: center;
    flex-direction: column;
    padding: 0 max(2rem, 1px) max(11.4rem, 1px);
    row-gap: max(4rem, 1px);
  }
}
.features-bg {
  display: grid;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
}
@media screen and (min-width: 768px) {
  .features-bg {
    grid-template-rows: max(20.4rem, 1px) 1fr;
  }
}
@media screen and (max-width: 767px) {
  .features-bg {
    grid-template-rows: max(20.4rem, 1px) 1fr;
  }
}
.features-bg:after,
.features-bg:before {
  content: "";
  width: 100%;
}
.features-bg:before {
  background: linear-gradient(180deg, #f9c51800, #f9c518);
  opacity: 0.2;
}
.features-bg:after {
  background: #f9c518;
  opacity: 0.2;
}
@media screen and (min-width: 768px) {
  .features-bg:after {
    height: calc(100% + max(12.2rem, 1px));
  }
}
@media screen and (max-width: 767px) {
  .features-bg:after {
    height: calc(100% + max(7.9rem, 1px));
  }
}
.features-ttl {
  position: relative;
}
@media screen and (min-width: 768px) {
  .features-ttl {
    width: max(7.2rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .features-ttl {
    width: max(22.5rem, 1px);
  }
}
.features-list {
  display: grid;
  position: relative;
}
@media screen and (min-width: 768px) {
  .features-list {
    align-items: center;
    column-gap: max(3.2rem, 1px);
    grid-template-columns: 1fr 1fr 1fr 1fr;
    height: fit-content;
    margin-top: max(2.6rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .features-list {
    column-gap: max(2.4rem, 1px);
    grid-template-columns: 1fr 1fr;
  }
}
.features-item {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  place-items: center center;
  position: relative;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .features-item {
    min-height: max(28.8rem, 1px);
    width: max(25.2rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .features-item {
    width: max(16rem, 1px);
  }
}
@media screen and (min-width: 768px) {
  .features-item:not(:last-of-type):after {
    background-image: linear-gradient(
      to bottom,
      var(--color-beige-light) max(0.3rem, 1px),
      #0000 max(0.3rem, 1px)
    );
    background-repeat: repeat-y;
    background-size: 100% calc(max(0.3rem, 1px) + max(0.3rem, 1px));
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: -1.6rem;
    top: 0;
    width: max(0.1rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .features-item:nth-child(n + 3) {
    margin-top: max(4rem, 1px);
  }
}
.features-item-ttl {
  align-self: flex-start;
  font-family: var(--font-family-toppan);
  font-weight: var(--font-weight-extra-bold);
  letter-spacing: var(--tracking-base);
  line-height: var(--leading-normal);
}
@media screen and (min-width: 768px) {
  .features-item-ttl {
    font-size: max(2.4rem, 1px);
    margin-top: max(1.8rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .features-item-ttl {
    font-size: max(2rem, 1px);
    margin-top: max(1.6rem, 1px);
  }
}
.features-item-ttl span {
  display: block;
}
@media screen and (min-width: 768px) {
  .features-item-ttl span {
    font-size: max(1.4rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .features-item-ttl span {
    font-size: max(1rem, 1px);
  }
}
.features-item-txt {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-base);
  line-height: var(--leading-base);
}
@media screen and (min-width: 768px) {
  .features-item-txt {
    font-size: max(1.5rem, 1px);
    margin-top: max(1.8rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .features-item-txt {
    align-self: flex-start;
    font-size: max(1.3rem, 1px);
    margin-top: max(1rem, 1px);
  }
}
.features-item-icon {
  align-items: center;
  aspect-ratio: 1/1;
  background-color: var(--color-white);
  border: 0 solid var(--color-beige);
  border-radius: var(--border-radius-full);
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .features-item-icon {
    border-width: max(0.1rem, 1px);
    width: max(14.4rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .features-item-icon {
    border-width: max(0.1rem, 1px);
  }
}
.cta {
  color: var(--color-white);
  position: relative;
}
@media screen and (min-width: 768px) {
  .cta {
    margin-top: -16.6rem;
    padding: max(14.5rem, 1px) 0 max(12.2rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .cta {
    margin-top: -3.4rem;
    padding: max(8rem, 1px) max(2rem, 1px) max(7.9rem, 1px);
  }
}
.cta-bg {
  background-image: url(../images/common/bg_red.jpg);
  background-position: 50% 0;
  background-repeat: repeat;
  height: 100%;
  left: 0;
  mask-composite: add;
  mask-repeat: repeat-x;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .cta-bg {
    background-size: max(48rem, 1px) max(48rem, 1px);
    mask-image:
      url(../images/common/mask_convex_top_pc.svg), var(--gradient-mask);
    mask-position:
      50% 0,
      50% max(16.6rem, 1px);
    mask-size:
      clamp(max(192rem, 1px), 100vw, 100%) max(16.8rem, 1px),
      100% calc(100% - max(16.6rem, 1px));
  }
}
@media screen and (max-width: 767px) {
  .cta-bg {
    background-size: max(48rem, 1px) max(48rem, 1px);
    mask-image:
      url(../images/common/mask_convex_top_sp.svg), var(--gradient-mask);
    mask-position:
      50% 0,
      50% max(3.4rem, 1px);
    mask-size:
      100% max(3.6rem, 1px),
      100% calc(100% - max(3.4rem, 1px));
  }
}
.cta-bg:before {
  aspect-ratio: 1/1;
  background: radial-gradient(
    158.02% 50% at 50% 50%,
    rgb(var(--color-black-rgb) / 20%) 0,
    var(--color-black) 100%
  );
  background-repeat: no-repeat;
  content: "";
  display: block;
  left: 0;
  mix-blend-mode: overlay;
  position: absolute;
}
@media screen and (min-width: 768px) {
  .cta-bg:before {
    top: -31.5rem;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .cta-bg:before {
    left: -104rem;
    top: -31.5rem;
    width: max(144rem, 1px);
  }
}
.cta-inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  position: relative;
}
@media screen and (min-width: 768px) {
  .cta-inner {
    max-width: max(115.2rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .cta-inner {
    padding-top: max(25.3rem, 1px);
  }
}
@media screen and (min-width: 768px) {
  .cta-ttl {
    margin-left: max(0.8rem, 1px);
    width: max(42.5rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .cta-ttl {
    margin-left: -0.4rem;
    width: max(32rem, 1px);
  }
}
@media screen and (min-width: 768px) {
  .cta-label {
    margin-top: max(3.3rem, 1px);
    width: max(25.4rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .cta-label {
    margin-top: max(2.8rem, 1px);
    width: max(25rem, 1px);
  }
}
@media screen and (min-width: 768px) {
  .cta .download {
    margin-top: max(4.8rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .cta .download {
    margin-top: max(3rem, 1px);
    width: max(33.2rem, 1px);
  }
}
.cta-img {
  pointer-events: none;
  position: absolute;
  top: 0;
  will-change: filter;
}
@media screen and (min-width: 768px) {
  .cta-img-01 {
    filter: drop-shadow(
        -8.16rem max(14.16rem, 1px) max(6.48rem, 1px) rgba(24, 1, 1, 0.02)
      )
      drop-shadow(
        -4.56rem max(7.92rem, 1px) max(5.52rem, 1px) rgba(24, 1, 1, 0.08)
      )
      drop-shadow(
        -2.04rem max(3.48rem, 1px) max(4.08rem, 1px) rgba(24, 1, 1, 0.14)
      )
      drop-shadow(
        -0.48rem max(0.84rem, 1px) max(2.28rem, 1px) rgba(24, 1, 1, 0.16)
      );
    left: max(4.4rem, 1px);
    top: -14.5rem;
    width: max(26rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .cta-img-01 {
    filter: drop-shadow(
        -4.08rem max(7.08rem, 1px) max(3.24rem, 1px) rgba(24, 1, 1, 0.02)
      )
      drop-shadow(
        -2.28rem max(3.96rem, 1px) max(2.76rem, 1px) rgba(24, 1, 1, 0.08)
      )
      drop-shadow(
        -1.02rem max(1.74rem, 1px) max(2.04rem, 1px) rgba(24, 1, 1, 0.14)
      )
      drop-shadow(
        -0.24rem max(0.42rem, 1px) max(1.14rem, 1px) rgba(24, 1, 1, 0.16)
      );
    left: max(3.2rem, 1px);
    top: -8rem;
    width: max(13rem, 1px);
  }
}
@media screen and (min-width: 768px) {
  .cta-img-02 {
    filter: drop-shadow(
        -8.28rem max(14.4rem, 1px) max(6.72rem, 1px) rgba(24, 1, 1, 0.02)
      )
      drop-shadow(
        -4.68rem max(8.16rem, 1px) max(5.64rem, 1px) rgba(24, 1, 1, 0.08)
      )
      drop-shadow(
        -2.04rem max(3.6rem, 1px) max(4.2rem, 1px) rgba(24, 1, 1, 0.14)
      )
      drop-shadow(
        -0.48rem max(0.96rem, 1px) max(2.28rem, 1px) rgba(24, 1, 1, 0.16)
      );
    right: -1rem;
    top: -1.5rem;
    width: max(31.8rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .cta-img-02 {
    filter: drop-shadow(
        -4.14rem max(7.2rem, 1px) max(3.36rem, 1px) rgba(24, 1, 1, 0.02)
      )
      drop-shadow(
        -2.34rem max(4.08rem, 1px) max(2.82rem, 1px) rgba(24, 1, 1, 0.08)
      )
      drop-shadow(
        -1.02rem max(1.8rem, 1px) max(2.1rem, 1px) rgba(24, 1, 1, 0.14)
      )
      drop-shadow(
        -0.24rem max(0.48rem, 1px) max(1.14rem, 1px) rgba(24, 1, 1, 0.16)
      );
    right: max(2.1rem, 1px);
    top: -3.5rem;
    width: max(15.9rem, 1px);
  }
}
.cta-note {
  align-items: center;
  border: 0 solid var(--color-red-light);
  border-radius: var(--border-radius);
  display: flex;
}
@media screen and (min-width: 768px) {
  .cta-note {
    border-width: max(0.1rem, 1px);
    column-gap: max(8.3rem, 1px);
    margin-top: max(7.2rem, 1px);
    padding: max(4.7rem, 1px) max(7.2rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .cta-note {
    border-width: max(0.1rem, 1px);
    flex-direction: column;
    margin-top: max(3.1rem, 1px);
    padding: max(3.4rem, 1px) max(2rem, 1px) max(3.6rem, 1px);
    row-gap: max(2.4rem, 1px);
  }
}
.cta-note-ttl {
  flex: none;
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  .cta-note-ttl {
    font-family: var(--font-family-toppan);
    font-size: max(2.4rem, 1px);
    font-weight: var(--font-weight-extra-bold);
    letter-spacing: var(--tracking-base);
    line-height: var(--leading-normal);
  }
}
@media screen and (min-width: 768px) and (max-width: 767px) {
  .cta-note-ttl {
    font-family: var(--font-family-toppan);
    font-size: max(1.8rem, 1px);
    font-weight: var(--font-weight-extra-bold);
    letter-spacing: var(--tracking-base);
    line-height: var(--leading-normal);
  }
}
@media screen and (max-width: 767px) and (min-width: 768px) {
  .cta-note-ttl {
    font-family: var(--font-family-toppan);
    font-size: max(3.6rem, 1px);
    font-weight: var(--font-weight-extra-bold);
    letter-spacing: var(--tracking-base);
    line-height: var(--leading-normal);
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .cta-note-ttl {
    font-family: var(--font-family-toppan);
    font-size: max(2.4rem, 1px);
    font-weight: var(--font-weight-extra-bold);
    letter-spacing: var(--tracking-base);
    line-height: var(--leading-normal);
  }
}
@media screen and (min-width: 768px) {
  .cta-note-body {
    font-family: var(--font-family-base);
    font-size: max(1.2rem, 1px);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-base);
    line-height: var(--leading-normal);
  }
}
@media screen and (max-width: 767px) {
  .cta-note-body {
    font-family: var(--font-family-base);
    font-size: max(1.1rem, 1px);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-base);
    line-height: var(--leading-normal);
  }
}
.cta-note-list {
  display: flex;
  position: relative;
}
@media screen and (min-width: 768px) {
  .cta-note-list {
    flex-wrap: wrap;
    gap: max(1.2rem, 1px) max(2.4rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .cta-note-list {
    flex-direction: column;
    row-gap: max(1.6rem, 1px);
  }
}
@media screen and (min-width: 768px) {
  .cta-note-list + .cta-note-list {
    margin-top: max(2.4rem, 1px);
    padding-top: max(2.4rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .cta-note-list + .cta-note-list {
    margin-top: max(1.6rem, 1px);
    padding-top: max(1.6rem, 1px);
  }
}
.cta-note-list + .cta-note-list:before {
  content: "";
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .cta-note-list + .cta-note-list:before {
    background-image: linear-gradient(
      to right,
      var(--color-red-light) max(0.3rem, 1px),
      #0000 max(0.3rem, 1px)
    );
    background-repeat: repeat-x;
    background-size: calc(max(0.3rem, 1px) + max(0.3rem, 1px)) 100%;
    height: max(0.1rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .cta-note-list + .cta-note-list:before {
    background-image: linear-gradient(
      to right,
      var(--color-red-light) max(0.3rem, 1px),
      #0000 max(0.3rem, 1px)
    );
    background-repeat: repeat-x;
    background-size: calc(max(0.3rem, 1px) + max(0.3rem, 1px)) 100%;
    height: max(0.1rem, 1px);
  }
}
.cta-note .u-list-note > li {
  padding-left: 1em;
  text-indent: -1em;
}
.download {
  background-color: var(--color-white);
  border: 0 solid var(--color-beige);
  border-radius: var(--border-radius);
  color: var(--color-red);
}
@media screen and (min-width: 768px) {
  .download {
    border-width: max(0.1rem, 1px);
    margin-top: max(3.5rem, 1px);
    padding: max(1.5rem, 1px) max(2rem, 1px) max(2rem, 1px);
    width: max(41.4rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .download {
    border-width: max(0.1rem, 1px);
    margin-top: max(2.4rem, 1px);
    padding: max(1.1rem, 1px) max(1.5rem, 1px) max(1.5rem, 1px);
  }
}
.download-ttl {
  align-items: center;
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .download-ttl {
    gap: max(0.8rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .download-ttl {
    gap: max(0.8rem, 1px);
  }
}
.download-ttl i {
  align-items: center;
  aspect-ratio: 1/1;
  background-color: var(--color-red);
  border-radius: var(--border-radius-full);
  color: var(--color-white);
  display: flex;
  justify-content: center;
  line-height: var(--leading-none);
}
@media screen and (min-width: 768px) {
  .download-ttl i {
    width: max(2.4rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .download-ttl i {
    width: max(1.7rem, 1px);
  }
}
@media screen and (min-width: 768px) {
  .download-ttl i svg {
    width: max(1.2rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .download-ttl i svg {
    width: max(0.8rem, 1px);
  }
}
.download-ttl span {
  font-weight: var(--font-weight-bold);
}
@media screen and (min-width: 768px) {
  .download-ttl span {
    font-size: max(1.7rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .download-ttl span {
    font-size: max(1.4rem, 1px);
  }
}
.download-list {
  display: grid;
  justify-content: space-between;
}
@media screen and (min-width: 768px) {
  .download-list {
    grid-template-columns: max(16.3rem, 1px) max(20.2rem, 1px);
    margin-top: max(1.3rem, 1px);
  }
}
@media screen and (max-width: 767px) {
  .download-list {
    grid-template-columns: max(13rem, 1px) max(16.2rem, 1px);
    margin-top: max(0.8rem, 1px);
  }
}
.download-item a {
  display: block;
  transition: opacity 0.3s var(--ease-power1-out);
}
@media screen and (hover: hover) and (min-width: 768px) {
  .download-item a:hover {
    opacity: 0.8;
  }
}