@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul,
ol,
li {
  list-style: none;
}

a {
  text-decoration: none;
}

a,
img,
span {
  display: inline-block;
}

img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
  object-fit: cover;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

picture {
  display: block;
}

svg {
  width: 100%;
  height: 100%;
}

em {
  font-style: normal;
}

button {
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
}

table {
  border-collapse: collapse;
}

:root {
  --white: #ffffff;
  --ink: #163958;
  --ink-rgb: 22, 57, 88;
  --pink: #f2a3c5;
  --pink-accent: #eb6ea5;
  --pink-sub: #f19ec2;
  --pink-bg: #fce9f2;
  --pink-bg-light: #fceaf2;
  --pink-bg-deep: #f7c9dd;
  --pink-mid: #f3a9c9;
  --blue: #7ecbeb;
  --blue-bg: #d3edf9;
  --blue-deep: #7ab2e1;
  --cream: #fffbd3;
  --gray: #bdcbd2;
  --footer-bg: #303030;
  --footer-text-sub: #999999;
  --zen-kaku: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --montserrat: Montserrat, "游ゴシック", "Yu Gothic", YuGothic, sans-serif;
  --leading-trim: calc((1em - 1lh) / 2);
}

@font-face {
  font-family: "Zen Kaku Gothic New";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/zen-kaku-gothic-new-medium.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/zen-kaku-gothic-new-bold.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/zen-kaku-gothic-new-black.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
}
html {
  font-size: 62.5%;
}
@media screen and (max-width: 950px) {
  html {
    font-size: calc(10 / (390 / 100) * 1vw);
  }
}
@media screen and (min-width: 951px) {
  html {
    font-size: calc(10 / (1152 / 100) * 1vw);
  }
}
@media screen and (min-width: 1182px) {
  html {
    font-size: 10.2564102564px;
  }
}

body {
  font-family: var(--zen-kaku);
  font-weight: 500;
  line-height: normal;
  letter-spacing: normal;
  color: var(--ink);
  background-color: var(--pink-mid);
  position: relative;
  min-height: 100vh;
}

a,
button {
  color: inherit;
  transition: opacity 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  a:hover,
  button:hover {
    opacity: 0.7;
  }
}

.p-fv {
  position: relative;
}

.p-fv__kv {
  position: relative;
  height: 39rem;
}

.p-fv__circle {
  position: absolute;
  top: 15.3rem;
  left: -10.4rem;
  width: 60rem;
  height: 60rem;
  border-radius: 50%;
  background-color: var(--pink-accent);
}

.p-fv__logo {
  position: absolute;
  top: 4.3rem;
  left: 1.4rem;
  display: block;
  width: 36.03rem;
  aspect-ratio: 360.3/114.8;
}

.p-fv__logo-image,
.p-fv__sparkle {
  position: absolute;
  top: 0;
}

.p-fv__logo-image {
  left: 0.85rem;
  width: 34.38rem;
}

.p-fv__sparkle {
  --float: 0.4rem;
  left: 0;
  width: 100%;
  transform: translateY(calc(var(--float-t, 0) * var(--float)));
}

.p-fv__sparkle--01 {
  top: -0.6rem;
}

.p-fv__sparkle--02 {
  left: -0.6rem;
}

.p-fv__sparkle--06 {
  top: 0.6rem;
}

.p-fv__illust {
  position: absolute;
  top: 18.7rem;
  left: 1.55rem;
  width: 36.09rem;
}

.p-fv__lead {
  position: relative;
  height: 20.6rem;
  background-color: var(--pink-bg);
}

.p-fv__lead-copy {
  position: absolute;
  top: 0.75rem;
  left: 1.5rem;
  width: 23.61rem;
}

.p-fv__lead-receipt {
  position: absolute;
  top: 11.81rem;
  left: 1.5rem;
  width: 36rem;
}

.p-fv__goods {
  position: absolute;
  top: -1.72rem;
  left: 21rem;
  width: 18rem;
}

.p-fv__badge-text {
  position: absolute;
  top: 7.4rem;
  left: 30.8rem;
  width: 7.09rem;
}

.p-fv__period {
  position: relative;
  height: 6.2rem;
  background-color: var(--pink-accent);
  background-image: url("../images/common/bg-dot-ink.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: 2.2rem 2.2rem;
}

.p-fv__period-label {
  position: absolute;
  top: -2rem;
  left: 12.9rem;
  z-index: 2;
  width: 13.17rem;
}

.p-fv__period-date {
  position: absolute;
  top: 0.7rem;
  left: 1.72rem;
  width: 35.57rem;
}