@charset "UTF-8";
/* =======================================
共通
======================================= */
body {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  color: #73705a;
  line-height: 1.2;
}

.container {
  width: calc(460 / 500 * 100vw);
  max-width: 460px;
  margin: 0 auto;
}


.sp{
display: none;
}
@media only screen and (max-width: 768px){
.sp{
display:block;
}
.pc{
display:none;
}


}


/* =======================================
PC背景
======================================= */
.body__bg::before {
  position: fixed;
  content: "";
  background: url(../images/common/pc_bg.jpg) no-repeat center / cover;
  inset: 0;
  z-index: -1;
}

/* =======================================
SP背景
======================================= */
.l-container {
  max-width: 500px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: #fefefe;
  box-shadow: 0 0 60px 0 rgba(255, 221, 227, 0.8);
}

/* =======================================
header
======================================= */
.header,
.footer {
  --loop-image-height: 45%;
  --loop-tile-width: calc(
    861 / 49 * min(calc(50 / 500 * 100vw), 50px) * 0.45
  );
  background: #fff;
  width: 100%;
  height: calc(50 / 500 * 100vw);
  max-height: 50px;
  overflow: hidden;
  position: relative;
}

.header::before,
.footer::before {
  position: absolute;
  content: "";
  background-repeat: repeat-x;
  background-position: left center;
  background-size: auto var(--loop-image-height);
  width: 100%;
  height: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  animation: common-horizontal-loop 50s linear infinite;
}

.header::before {
  background-image: url(../images/common/header.png);
}

.footer::before {
  background-image: url(../images/common/footer.png);
}

.header img,
.footer img {
  opacity: 0;
  pointer-events: none;
}

@keyframes common-horizontal-loop {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: calc(var(--loop-tile-width) * -1);
  }
}

/* =======================================
fv
======================================= */
.fv {
  max-width: 500px;
  width: 100%;
  max-height: 800px;
  height: calc(800 / 500 * 100vw);
  overflow: hidden;
  position: relative;
}

.fv::before {
  position: absolute;
  content: "";
  background: url(../images/fv/fv_bg.jpg) no-repeat center top / cover;
  max-width: 500px;
  width: calc(500 / 500 * 100vw);
  max-height: 850px;
  height: calc(850 / 500 * 100vw);
  top: clamp(-50px, 4vw, -32px);
  left: 0;
}

.fv__title {
  position: absolute;
  width: calc(460 / 500 * 100vw);
  max-width: 460px;
  height: auto;
  left: 50%;
  transform: translateX(-50%);
  top: 17%;
}

.fv__title.is-animated {
  animation: fv-title-poyoyon 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}

.fv__title img {
  width: 100%;
  height: 100%;
  transform-origin: center;
  animation: fv-title-idle-float 4.8s ease-in-out infinite;
}

.fv__title.is-animated img {
  animation: none;
}

.fv__img-girl {
  position: absolute;
  max-width: 480px;
  width: calc(480 / 500 * 100vw);
  height: auto;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1%;
  animation: fv-girl-breathe 5.9s cubic-bezier(0.37, 0, 0.63, 1) infinite;
  animation-delay: -2.1s;
}

.fv__img-flag {
  position: absolute;
  width: calc(218 / 500 * 100vw);
  max-width: 218px;
  height: auto;
  transform: rotate(3deg);
  transform-origin: 12% 85%;
  top: 1%;
  left: 1%;
  animation: fv-flag-wave 3.4s cubic-bezier(0.33, 1, 0.68, 1) infinite;
  animation-delay: -1.3s;
}

.fv__img-starTop {
  position: absolute;
  width: calc(75 / 500 * 100vw);
  max-width: 75px;
  height: auto;
  top: 2%;
  left: 32%;
  transform-origin: center;
  animation: fv-star-sparkle 3.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  animation-delay: -1.4s;
}

.fv__img-sun {
  position: absolute;
  width: calc(157 / 500 * 100vw);
  max-width: 157px;
  height: auto;
  top: 0;
  right: 4%;
  transform-origin: center;
  animation: fv-sun-rotate 18s linear infinite;
}

.fv__img-starRight {
  position: absolute;
  width: calc(32 / 500 * 100vw);
  max-width: 32px;
  height: auto;
  bottom: 46%;
  right: 4%;
  transform-origin: center;
  animation: fv-star-sparkle 3.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  animation-delay: -0.5s;
}

.fv__img-balloon {
  position: absolute;
  width: calc(169 / 500 * 100vw);
  max-width: 169px;
  height: auto;
  bottom: 37%;
  left: 7px;
  transform-origin: 50% 90%;
  animation: fv-balloon-sway 5.4s cubic-bezier(0.37, 0, 0.63, 1) infinite;
  animation-delay: -1.7s;
}

.fv__img-starLeft {
  position: absolute;
  width: calc(95 / 500 * 100vw);
  max-width: 95px;
  height: auto;
  bottom: 22%;
  left: 8%;
  transform-origin: center;
  animation: fv-star-sparkle 3.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  animation-delay: -2s;
}

.fv__img-flower {
  position: absolute;
  width: calc(107 / 500 * 100vw);
  max-width: 107px;
  height: auto;
  bottom: 4%;
  right: 5%;
  z-index: 1;
  transform-origin: 50% 100%;
  animation: fv-flower-wiggle 4.9s cubic-bezier(0.33, 1, 0.68, 1) infinite;
  animation-delay: -3.1s;
}

.fv__title,
.fv__img-girl,
.fv__img-flag,
.fv__img-starTop,
.fv__img-sun,
.fv__img-starRight,
.fv__img-balloon,
.fv__img-starLeft,
.fv__img-flower {
  will-change: transform, opacity;
}

@keyframes fv-title-poyoyon {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-140px);
  }
  20% {
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) translateY(0);
  }
  65% {
    transform: translateX(-50%) translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes fv-title-idle-float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  35% {
    transform: translateY(-4px) rotate(0.35deg) scale(1.004);
  }
  70% {
    transform: translateY(2px) rotate(-0.25deg) scale(0.998);
  }
}

@keyframes fv-girl-breathe {
  0%,
  38%,
  100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
  18% {
    transform: translateX(-50%) translateY(-7px) scale(1.012);
  }
  28% {
    transform: translateX(-50%) translateY(1px) scale(0.998);
  }
}

@keyframes fv-flag-wave {
  0%,
  48%,
  100% {
    transform: rotate(3deg) skewX(0deg);
  }
  8% {
    transform: rotate(-6deg) skewX(5deg);
  }
  16% {
    transform: rotate(8deg) skewX(-4deg);
  }
  24% {
    transform: rotate(-4deg) skewX(3deg);
  }
  32% {
    transform: rotate(6deg) skewX(-2deg);
  }
  40% {
    transform: rotate(1deg) skewX(1deg);
  }
}

@keyframes fv-star-sparkle {
  0%,
  54%,
  100% {
    filter: brightness(1) drop-shadow(0 0 0 rgba(255, 255, 255, 0));
    opacity: 1;
    transform: scale(1);
  }
  59% {
    filter: brightness(0.88) drop-shadow(0 0 0 rgba(255, 246, 132, 0));
    opacity: 0.68;
    transform: scale(0.92);
  }
  64% {
    filter: brightness(2.2) drop-shadow(0 0 13px rgba(255, 246, 132, 1));
    opacity: 1;
    transform: scale(1.18);
  }
  70% {
    filter: brightness(1.18) drop-shadow(0 0 4px rgba(255, 246, 132, 0.45));
    opacity: 0.96;
    transform: scale(0.98);
  }
}

@keyframes fv-sun-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes fv-balloon-sway {
  0%,
  52%,
  100% {
    transform: translate(0, 0) rotate(-1deg);
  }
  12% {
    transform: translate(7px, -10px) rotate(4deg);
  }
  26% {
    transform: translate(-2px, -18px) rotate(-3deg);
  }
  40% {
    transform: translate(-7px, -8px) rotate(3deg);
  }
}

@keyframes fv-flower-wiggle {
  0%,
  46%,
  100% {
    transform: rotate(0deg) translateY(0);
  }
  10% {
    transform: rotate(7deg) translateY(-4px);
  }
  20% {
    transform: rotate(-6deg) translateY(1px);
  }
  30% {
    transform: rotate(4deg) translateY(-2px);
  }
  38% {
    transform: rotate(-1deg) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fv__title,
  .fv__img-girl,
  .fv__img-flag,
  .fv__img-starTop,
  .fv__img-sun,
  .fv__img-starRight,
  .fv__img-balloon,
  .fv__img-starLeft,
  .fv__img-flower {
    animation: none;
  }
}

/* =======================================
howto
======================================= */
.yellow__bg {
  position: relative;
  max-width: 500px;
  width: 100%;
}

.yellow__bg::before {
  position: absolute;
  content: "";
  background: url("../images/common/stlipe_bg.jpg") top center / 100% auto
    repeat;
  top: clamp(-65px, -13vw, -45px);
  left: 0;
  right: 0;
  bottom: 0;
}

.howto__container {
  max-width: 460px;
  width: calc(460 / 500 * 100vw);
  border-radius: clamp(16px, 4vw, 30px);
  background: #fff575;
  box-shadow: 2px 2px 60px 0 rgba(247, 239, 174, 0.4);
  position: relative;
  z-index: 1;
  top: -15px;
  padding: clamp(40px, 13vw, 60px) 0 clamp(50px, 19vw, 90px);
}

.howto__title {
  font-size: clamp(20px, 7vw, 32px);
  letter-spacing: 0.028em;
  text-align: center;
  margin-bottom: 30px;
}

.howto__title-chatgpt {
  color: #a3e4ff;
  font-size: clamp(28px, 8vw, 40px);
  font-weight: 900;
  letter-spacing: 0.18em;
  text-shadow:
    -2px 0 #fff,
    2px 0 #fff,
    0 -2px #fff,
    0 2px #fff;
}

.howto__title-small {
  font-size: clamp(18px, 5vw, 24px);
  letter-spacing: 0.03em;
}

.howto__list {
  max-width: 420px;
  width: calc(420 / 500 * 100vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 12vw, 40px);
}

.howto__item {
  width: 100%;
  border-radius: clamp(16px, 4vw, 30px);
  background: #fff;
  box-shadow: 0 0 20px 0 rgba(225, 210, 93, 0.2);
}

.howto__heading--top,
.howto__heading--middle,
.howto__heading--bottom {
  position: relative;
  width: 100%;
  height: calc(130 / 500 * 100vw);
  max-height: 130px;
  padding: 0 clamp(10px, 2vw, 20px);
}

.howto__button {
  width: 100%;
  height: 100%;
}
.howto__list-title {
  font-size: clamp(16px, 5vw, 24px);
  letter-spacing: 0.03em;
  color: #73705a;
  display: flex;
  align-items: center;
  width: fit-content;
  position: relative;
}

.howto__list-title::after {
  position: absolute;
  content: "";
  background: url(../images/howto/howto_arrow.svg) center / cover;
  width: calc(12 / 500 * 100vw);
  height: calc(12 / 500 * 100vw);
  max-width: 12px;
  max-height: 12px;
  top: 50%;
  transform: translateY(-50%);
  right: -10%;
}

.howto__list-titleSmall {
  font-size: clamp(14px, 5vw, 18px);
  letter-spacing: 0.03em;
}

.howto__list-titleRed {
  font-size: clamp(20px, 6.5vw, 32px);
  letter-spacing: 0.03em;
  color: #f38397;
}

/* 一つ目のアコーディオン */
.howto__heading--top::after {
  position: absolute;
  content: "";
  background: url(../images/howto/howto_img01.png) center / cover;
  width: calc(170 / 500 * 100vw);
  height: calc(170 / 500 * 100vw);
  max-width: 170px;
  max-height: 170px;
  top: -24%;
  right: -4%;
  cursor: pointer;
}

.howto__heading--top.open::after {
  background-image: var(--howto-open-image, url(../images/gif/howto_img01_open.gif));
  transform-origin: center bottom;
  animation: howto-open-puyon 5.5s linear infinite;
}

/* 二つ目のアコーディオン */
.howto__heading--top.open::before {
  position: absolute;
  content: "";
  background: url(../images/fv/hatena.png) center / contain no-repeat;
  width: calc(42 / 500 * 100vw);
  height: calc(42 / 500 * 100vw);
  max-width: 42px;
  max-height: 42px;
  top: -12%;
  right: 34%;
  z-index: 2;
  transform-origin: 50% 100%;
  animation:
    fv-flower-wiggle 4.9s cubic-bezier(0.33, 1, 0.68, 1) -3.1s infinite,
    howto-icon-fade-in 0.45s ease-out 0s 1 both;
  pointer-events: none;
}

.howto__heading--middle::after {
  position: absolute;
  content: "";
  background: url(../images/howto/howto_img02.png) center / cover;
  width: calc(170 / 500 * 100vw);
  height: calc(170 / 500 * 100vw);
  max-width: 170px;
  max-height: 170px;
  top: -24%;
  left: -4%;
  cursor: pointer;
}

.howto__heading--middle.open::after {
  background-image: var(--howto-open-image, url(../images/gif/howto_img02_open.gif));
  transform-origin: center bottom;
  animation: howto-open-puyon 5.5s linear infinite;
}

.howto__heading--middle.open::before {
  position: absolute;
  content: "";
  background-image: url(../images/fv/fv_star_left.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: calc(40 / 500 * 100vw);
  height: calc(40 / 500 * 100vw);
  max-width: 40px;
  max-height: 40px;
  top: -10%;
  left: 31%;
  z-index: 2;
  transform-origin: center;
  animation: fv-star-sparkle 3.2s cubic-bezier(0.16, 1, 0.3, 1) -0.5s infinite;
  pointer-events: none;
}

.howto__heading--middle .howto__button {
  position: relative;
}

.howto__heading--middle .howto__list-title {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 50px;
}

/* 3つ目のアコーディオン */
.howto__heading--bottom::after {
  position: absolute;
  content: "";
  background: url(../images/howto/howto_img03.png) center / cover;
  width: calc(170 / 500 * 100vw);
  height: calc(170 / 500 * 100vw);
  max-width: 170px;
  max-height: 170px;
  top: -24%;
  right: -4%;
  cursor: pointer;
}

.howto__heading--bottom.open::after {
  background-image: var(--howto-open-image, url(../images/gif/howto_img03_open.gif));
  transform-origin: center bottom;
  animation: howto-open-puyon 5.5s linear infinite;
}

.howto__heading--bottom.open::before {
  position: absolute;
  content: "";
  background: url(../images/fv/fv_sun.png) center / contain no-repeat;
  width: calc(48 / 500 * 100vw);
  height: calc(48 / 500 * 100vw);
  max-width: 48px;
  max-height: 48px;
  top: -12%;
  right: 34%;
  z-index: 2;
  transform-origin: center;
  animation:
    fv-sun-rotate 18s linear infinite,
    howto-icon-fade-in 0.45s ease-out 0s 1 both;
  pointer-events: none;
}

.howto__heading--top::after,
.howto__heading--middle::after,
.howto__heading--bottom::after {
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  transition: filter 0.35s ease;
}

.howto__heading--top.open::after,
.howto__heading--middle.open::after,
.howto__heading--bottom.open::after {
  z-index: 1;
  height: calc(263 / 500 * 100vw);
  max-height: 263px;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.18));
}

@keyframes howto-icon-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes howto-open-puyon {
  0% {
    transform: scale(1, 1) translate(0, 0);
  }
  5.82% {
    transform: scale(0.985, 1.06) translate(0, -3%);
  }
  7.27% {
    transform: scale(1.1, 0.9) translate(0, 5%);
  }
  8.73% {
    transform: scale(0.95, 1.05) translate(0, -3%);
  }
  10.18% {
    transform: scale(1.05, 0.95) translate(0, 3%);
  }
  11.64%,
  20% {
    transform: scale(1, 1) translate(0, 0);
  }
  42% {
    transform: scale(1.01, 1.01) translate(0, -0.6%);
  }
  64% {
    transform: scale(1, 1) translate(0, 0);
  }
  84% {
    transform: scale(1.006, 1.006) translate(0, -0.4%);
  }
  100% {
    transform: scale(1, 1) translate(0, 0);
  }
}

.howto__list-content {
  display: none;
  overflow: hidden;
}

.howto__list-textTop {
  width: calc(300 / 500 * 100vw);
  max-width: 300px;
  font-size: clamp(14px, 4vw, 16px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.02em;
  padding: 0 clamp(15px, 5vw, 30px);
  margin-bottom: 1.25rem;
}

.howto__heading--top.open + .howto__list-content .howto__list-textTop,
.howto__heading--bottom.open + .howto__list-content .howto__list-textTop {
  width: calc(270 / 500 * 100vw);
  max-width: 270px;
  padding-right: 0;
}

.howto__heading--middle.open + .howto__list-content .howto__list-textTop {
  width: calc(270 / 500 * 100vw);
  max-width: 270px;
  padding-left: 0;
}

.howto__textTop--middle {
  margin-left: auto;
}


.howto__list-textBottom {
  font-size: clamp(14px, 4vw, 16px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.02em;
  padding: 0 clamp(15px, 5vw, 30px) clamp(15px, 5vw, 21px);
}

/* =======================================
line-stamp
======================================= */
.line-stamp {
  padding: clamp(40px, 13vw, 60px) 0;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.line-stamp__title {
  display: none;
}

.line-stamp__content {
  position: relative;
}

.line-stamp__link {
  display: inline-block;
  transform-origin: 50% 58%;
  animation: line-stamp-star-appeal 2.5s infinite;
  opacity: 1;
}

.line-stamp__star {
  width: calc(270 / 500 * 100vw);
  max-width: 270px;
  height: auto;
  transform-origin: 50% 58%;
}
.line-stamp__girl {
  width: calc(250 / 500 * 100vw);
  max-width: 250px;
  height: auto;
  position: absolute;
  top: 10px;
  right: -10px;
  transform-origin: 72% 82%;
  animation: line-stamp-girl-poyoyon 7s cubic-bezier(0.12, 0, 0.39, 0)
    infinite;
}

@keyframes line-stamp-star-appeal {
  0%,
  40%,
  100% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(5deg, 5deg);
  }
  10% {
    transform: skew(-4deg, -4deg);
  }
  15% {
    transform: skew(3deg, 3deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
}

@keyframes line-stamp-girl-poyoyon {
  0%,
  57.14%,
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  57.15% {
    opacity: 0;
    transform: translateX(140px);
  }
  58.57% {
    opacity: 1;
  }
  60.71% {
    transform: translateX(0);
  }
  61.78% {
    transform: translateX(30px);
  }
  64.28% {
    opacity: 1;
    transform: translateX(0);
  }
}