/**
 * variables
 */
:root {
  --rate: calc(100cqw / 390);
  --color-white: #fff;
  --color-admonition: #a43030;
  --color-calm: #4d788e;
  --font-ja: "Noto Sans JP", sans-serif;
  --cta-popup-base-color: #f9df6f;
  --cta-popup-deep-color: #f5ca1b;
  --cta-popup-text-color: #e60b10;
}

body {
  font-family: var(--font-ja);
}

#wrapper {
  container-type: inline-size;
  container-name: base;
}

/**
 * cta summary
 */
.c-cta-summary {
  --cta-summary-title-height: calc(50 * var(--rate));
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 7 / 5;
  padding-block-start: calc(var(--cta-summary-title-height) / 2);
  box-sizing: border-box;
}

.c-cta-summary * {
  font-family: var(--font-ja);
  box-sizing: border-box;
}

.c-cta-summary__body {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
  height: fit-content;
  padding-block-start: calc(var(--cta-summary-title-height) * 2 / 3);
  background-image: url(../images/cta/summary-frame.webp);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: var(--color-white);
}

.c-cta-summary__title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--cta-summary-title-height);
}

.c-cta-summary__title img {
  display: block !important;
  width: auto !important;
  height: 100% !important;
  margin-inline: auto !important;
  padding-block: calc(5 * var(--rate));
  padding-inline: calc(10 * var(--rate));
  background-color: #fff;
}

.c-cta-summary__description {
  display: grid;
  grid-template-columns: 100%;
  font-weight: 700;
  color: #000;
  line-height: 1;
}

.c-cta-summary__description:not([data-cta-summary="uridoki"]) {
  --cta-summary-description-gap: calc(32 * var(--rate));
  row-gap: var(--cta-summary-description-gap);
}

.c-cta-summary__description[data-cta-summary="uridoki"] {
  place-items: center;
  row-gap: calc(20 * var(--rate));
  padding-block-start: calc(20 * var(--rate));
  font-size: calc(24 * var(--rate));
}

.c-cta-summary__description[data-cta-summary="uridoki"] strong {
  font-size: 1.1em;
  font-weight: 900;
}

.c-cta-summary__benefits {
  position: relative;
  display: flex;
  flex-direction: column;
  width: fit-content;
  margin-inline: auto;
  font-size: calc(18 * var(--rate));
  line-height: 1;
  letter-spacing: 0.05em;
}

.c-cta-summary__benefits>span {
  line-height: 1;
}

.c-cta-summary__benefits-title {
  display: block;
  padding-block-end: .5em;
}

.c-cta-summary__benefits-detail {
  font-size: 2em;
  color: var(--color-admonition);
  font-weight: 900;
}

.c-cta-summary__benefits-notes {
  padding-block-start: .5em;
  font-size: .75em;
  color: var(--color-admonition);
  text-align: right;
}

.c-cta-summary__benefits::before,
.c-cta-summary__benefits::after {
  --cta-cross-line-gap: calc(5 * var(--rate));
  content: "";
  position: absolute;
  bottom: calc(var(--cta-summary-description-gap) * -1 / 2 - var(--cta-cross-line-gap));
  left: 0;
  right: 0;
  width: calc(var(--cta-summary-description-gap) - var(--cta-cross-line-gap) * 2);
  height: calc(4 * var(--rate));
  margin: auto;
  background-color: var(--color-calm);
}

.c-cta-summary__benefits::after {
  transform: rotate(90deg);
}

.c-cta-summary__contents {
  font-size: 1.75em;
  color: var(--color-admonition);
  font-weight: 900;
}

.c-cta-summary__conditions {
  position: relative;
  display: block;
  width: fit-content;
  margin-inline: auto;
  font-size: calc(16 * var(--rate));
  line-height: 1.5;
}

.c-cta-summary__conditions::before {
  content: '＼ここだけ!／';
  position: absolute;
  top: calc(var(--cta-summary-description-gap) * -1 / 2);
  left: calc(-50 * var(--rate));
  font-size: calc(12 * var(--rate));
  color: var(--color-calm);
  font-weight: 600;
  transform: rotate(-15deg);
}

.c-cta-summary__conditions-amount {
  font-size: 1.5em;
  color: #a43030;
  font-weight: 900;
}

/**
 * cta popup
 */
.c-cta-popup__header {
  background-image: linear-gradient(0deg, var(--cta-popup-base-color), var(--cta-popup-deep-color));
  color: var(--cta-popup-text-color);
  padding-block: calc(10 * var(--rate));
  padding-inline: calc(10 * var(--rate));
  text-align: left;
  line-height: 1;
  text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.8);
}

.c-cta-popup__header-container {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  align-items: center;
  column-gap: calc(10 * var(--rate));
}

.c-cta-popup__header-title {
  grid-column: 1;
  grid-row: 1;
  font-size: calc(10 * var(--rate));
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -.05em;
}

.c-cta-popup__header-title span {
  font-size: 1.5em;
}

.c-cta-popup__header-description {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: calc(5 * var(--rate));
  row-gap: calc(10 * var(--rate));
  align-items: center;
  letter-spacing: 0.05em;
}

.c-cta-popup__header-label {
  grid-column: 1;
  grid-row: 1;
  width: fit-content;
  height: fit-content;
  font-size: calc(18 * var(--rate));
  font-weight: 900;
  writing-mode: vertical-rl;
}

.c-cta-popup__header-benefits {
  grid-column: 2;
  grid-row: 1;
  font-size: calc(48 * var(--rate));
  font-weight: 900;
  text-align: right;
}

.c-cta-popup__header-term {
  grid-column: 2;
  grid-row: 2;
  font-size: calc(12 * var(--rate));
  font-weight: 700;
  text-align: right;
}

.c-cta-popup__footer {
  background-image: url(../images/cta/banner-footer-bottom.webp);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-block: calc(5 * var(--rate)) calc(20 * var(--rate));
  padding-inline: calc(22 * var(--rate));
}

.c-cta-popup__footer-container {
  display: grid;
  grid-template-columns: calc(110 * var(--rate)) 1fr;
  align-items: center;
  column-gap: calc(10 * var(--rate));
  align-items: center;
}

.c-cta-popup__footer-description {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: calc(5 * var(--rate));
  line-height: 1.5;
  color: var(--cta-popup-text-color);
  font-weight: 900;
  line-height: 1;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.1);
}

.c-cta-popup__footer-label {
  font-size: calc(14 * var(--rate));
}

.c-cta-popup__footer-benefits {
  font-size: calc(24 * var(--rate));
}

/**
 * FV流用設置用一時css
 */
.first_view {
  position: relative;
}

.first_view .c-cta-popup__header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  box-sizing: border-box;
}

.first_view .c-cta-popup__header+* {
  position: relative;
  padding-block-start: calc(40 * var(--rate));
}

/**
 * gold price banner
 */
.c-gold-price__banner {
  position: relative;
  width: 100%;
}

.c-gold-price__banner-header {
  position: absolute;
  top: calc(2 * var(--rate));
  right: calc(30 * var(--rate));
  width: calc(160 * var(--rate));
  padding-block: calc(7.5 * var(--rate));
  padding-inline: calc(15 * var(--rate));
  border-radius: calc(10 * var(--rate));
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 0) 100%);
  background-color: #fff;
  box-shadow: 0px 20px 20px -10px rgba(0, 0, 0, 0.3);
  line-height: 1;
  box-sizing: border-box;
}

.c-gold-price__update-date {
  font-size: calc(12 * var(--rate));
  color: #000;
  font-weight: 700;
}

.c-gold-price__amount {
  margin-block-start: calc(2 * var(--rate));
  font-size: calc(26 * var(--rate));
  font-weight: 900;
  color: #d50d18;
  text-shadow:
    2px 2px 0px rgba(255, 199, 0, 0.8),
    4px 4px 0px rgba(155, 128, 31, 0.2);
  line-height: 1.2;
}

.c-gold-price__amount .unit {
  font-size: 0.6em;
}

/**
 * animation
 */
.u-anim-brightly::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
  transform: skewX(-25deg);
  animation: anim-brightly 3s linear infinite;
}

@keyframes anim-brightly {
  0% {
    left: -75%;
  }

  25% {
    left: 125%;
  }

  26% {
    left: 125%;
    opacity: 0;
  }

  100% {
    left: -75%;
    opacity: 0;
  }
}