/* Web版の追加調整。画像制作用からコピーしたstyle.cssはそのまま保持する。 */
@media screen {
  body {
    background:
      radial-gradient(ellipse at 8% 8%, rgb(126 208 248 / 28%), transparent 42%),
      radial-gradient(ellipse at 94% 30%, rgb(189 166 230 / 24%), transparent 44%),
      radial-gradient(ellipse at 90% 88%, rgb(247 176 210 / 25%), transparent 40%),
      linear-gradient(180deg, #effaff 0%, #f1f4fd 32%, #f5f0fb 50%, #f0f8ff 72%, #fff2f8 100%);
    background-repeat: no-repeat;
  }
}

.consultation a.consultation-label {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-decoration: none;
  min-height: 44px;
  gap: .8em;
  border: 1px solid rgb(255 255 255 / 65%);
  border-radius: clamp(12px, 2cqw, 16px);
  background: #ef4f98;
  color: #fff;
  font-size: clamp(14px, 2.857143cqw, 20px);
  font-weight: 800;
  letter-spacing: .06em;
  box-shadow: 0 4px 0 rgb(146 28 84 / 35%), 0 10px 24px rgb(146 28 84 / 25%);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.consultation a.consultation-label::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -50% auto -50% -40%;
  width: 35%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 40%), transparent);
  transform: translateX(-150%) skewX(-22deg);
  pointer-events: none;
  animation: cta-shine 5s ease-in-out infinite;
}

.consultation .cta-arrow {
  display: block;
  width: 1.2em;
  height: 1.2em;
  flex: none;
  transition: transform .25s ease;
}

@keyframes cta-shine {
  0%, 58% { transform: translateX(-150%) skewX(-22deg); }
  84%, 100% { transform: translateX(520%) skewX(-22deg); }
}

@media (hover: hover) and (pointer: fine) {
  .consultation a.consultation-label:hover {
    transform: translateY(-3px) scale(1.02);
    background: #df3583;
    box-shadow: 0 6px 0 rgb(146 28 84 / 30%), 0 16px 32px rgb(146 28 84 / 32%);
  }

  .consultation a.consultation-label:hover .cta-arrow {
    transform: translateX(4px);
  }
}

.consultation a.consultation-label:active {
  transform: translateY(2px) scale(.98);
  box-shadow: 0 1px 0 rgb(146 28 84 / 35%), 0 4px 10px rgb(146 28 84 / 25%);
}

.consultation a.consultation-label:focus-visible {
  outline: 3px solid #103478;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .consultation a.consultation-label,
  .consultation .cta-arrow {
    transition: none;
  }

  .consultation a.consultation-label::before {
    animation: none;
  }

  .consultation a.consultation-label:hover,
  .consultation a.consultation-label:active,
  .consultation a.consultation-label:hover .cta-arrow {
    transform: none;
  }
}

/* メイングラデーションのページ先頭ボタン。 */
.back-to-top {
  position: fixed;
  z-index: 20;
  right: max(20px, calc((100vw - 700px) / 2 - 76px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 75%);
  border-radius: 50%;
  background: linear-gradient(135deg, #36a9e8, #aa8bd2 44%, #f34f98 80%, #ff958c);
  color: #fff;
  box-shadow: 0 6px 20px rgb(78 80 160 / 25%);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, bottom .25s ease;
}

.back-to-top[hidden] {
  display: none;
}

.back-to-top svg {
  flex: none;
}

.back-to-top span {
  font: 800 9px/1 Arial, sans-serif;
  letter-spacing: .1em;
}

@media (hover: hover) and (pointer: fine) {
  .back-to-top:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgb(78 80 160 / 35%);
  }
}

.back-to-top:active {
  transform: translateY(1px) scale(.96);
}

.back-to-top:focus-visible {
  outline: 3px solid #103478;
  outline-offset: 4px;
}

@media (max-width: 879px) {
  .back-to-top {
    right: 14px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    width: 48px;
    height: 48px;
  }

  .back-to-top svg {
    width: 20px;
    height: 20px;
  }

  .back-to-top.is-above-footer {
    bottom: calc(clamp(112px, 32vw, 240px) + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }

  .back-to-top:hover,
  .back-to-top:active {
    transform: none;
  }
}

@media print {
  .back-to-top {
    display: none;
  }
}

/* pictureの追加で既存カードやflex配置を変えない。 */
.lp picture { display: contents; }
.hero-visual { background-image: none; }
.hero-background-image {
  position: absolute;
  left: -12.8cqw;
  top: -3cqw;
  width: 180cqw;
  height: 270cqw;
  max-width: none;
  pointer-events: none;
}