@charset "UTF-8";

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.4rem;
  font-weight: 400;
  color: #000;
}

main {
  max-width: 75rem;
  width: 100%;
  margin: 0 auto;
}

p {
  font-size: 3.5rem;
  line-height: 2;
}

.hidden {
  overflow: hidden;
}

.sp {
  display: none;
}

.tb {
  display: none;
}

.pc {
  display: block;
}

.shadow {
  box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 16%);
}

@media (min-width: 1080px) {
  .hover {
    transition: all 0.3s;
  }

  .hover:hover {
    opacity: 0.7;
    transition: all 0.3s;
  }
}

img {
  width: 100%;
  height: auto;
  user-drag: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
}

#sec02,
#sec03,
#sec04,
#sec05,
#thanks {
  display: none;
}

.skin-layer {
  position: relative;
}

.skin-image {
  width: 100%;
  height: auto;
}

.highlight {
  position: absolute;
  top: 23rem;
  left: 50%;
  transform: translateX(-50%);
  width: 64rem;
  height: 1.5rem;
  background: rgba(255, 255, 0, 0.5);
  opacity: 0;
  pointer-events: none;
}

/* ----- q ----- */

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}

.q-item:not(:first-of-type) {
  margin-top: 4rem;
}

.q-item label {
  display: flex;
  font-size: 3.2rem;
  line-height: 1.6;
  position: relative;
}

.q-item input[type="radio"] {
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 0.3rem;
  background-color: #fff;
  border: 2px solid #333;
  flex-shrink: 0;
  margin: 0.5rem 2.5rem 0 0;
}

input[type="radio"]:checked {
  background-color: #ef6c72;
  border: 2px solid #ef6c72;
}

input[type="radio"]:checked + span::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  left: 0.5rem;
  background-image: url(../img/check_white.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 3.8rem;
  height: 3.8rem;
}

/* ----- sec01 ----- */

.sec01-items {
  position: absolute;
  top: 75.5rem;
  left: 16rem;
}

/* ----- sec02 ----- */
.sec02-pic04 {
  position: relative;
  z-index: 1;
  margin-top: -0.1rem;
}

.sec02-items {
  position: absolute;
  top: 65rem;
  left: 14.5rem;
}

/* ----- sec03 ----- */

.sec03-items {
  position: absolute;
  top: 67rem;
  left: 10.5rem;
  width: 100%;
}

/* ----- sec04 ----- */

.sec04-items {
  position: absolute;
  top: 64rem;
  left: 9rem;
}

/* ----- sec05 ----- */

.sec05-item {
  position: absolute;
  top: 16rem;
  left: 50%;
  transform: translateX(-50%);
  width: 68rem;
  box-shadow: 1rem 1rem 1rem rgba(0, 0, 0, 15%);
  cursor: pointer;
  border-radius: 7.5rem;
}

/* ----- sec06 ----- */

.sec06-coupon-wrap {
  position: relative;
}

.sec06-bg {
  background-color: #ffe3e4;
}

.sec06-coupon {
  position: absolute;
  top: 68rem;
  left: 50%;
  transform: translateX(-50%);
  width: 58rem;
}

.sec06-coupon img {
  width: 100%;
}

.sec06-item {
  background-color: #f1c1c4;
}

.sec06-item li {
  margin: 1rem;
}

.sec06-item li,
.sec06-item li img {
  width: 22rem !important;
}

.sec06-cnv {
  position: absolute;
  top: 23rem;
  left: 50%;
  transform: translateX(-50%);
  width: 65rem;
  border-radius: 8rem;
  box-shadow: 1rem 1rem 1rem rgba(0, 0, 0, 25%);
}

.sec06-cnv-item {
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 50rem;
  pointer-events: none;
}

/* ----- sec07 ----- */

.sec07-gif {
  position: absolute;
  top: 133rem;
  left: 8rem;
  width: 60.5rem;
}

.sec07-item {
  position: relative;
}

.sec07-item-pic {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

.sec07-item-pic-01 {
  top: 6rem;
}

.circle-wrap {
  position: relative;
}

.circle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 43rem;
  height: 43rem;
  background-image: none;
  animation: fillAnimation 3s infinite;
  border-radius: 50%;
  z-index: 1;
  overflow: hidden;
}

@keyframes fillAnimation {
  0% {
    background-image: conic-gradient(#dbb059, #b68623 0%, #fff 0%, #fff 100%);
  }
  5% {
    background-image: conic-gradient(#dbb059, #b68623 30%, #fff 30.1%, #fff 100%);
  }
  10% {
    background-image: conic-gradient(#dbb059, #b68623 60%, #fff 60.1%, #fff 100%);
  }
  15% {
    background-image: conic-gradient(#dbb059, #b68623 90%, #fff 90.1%, #fff 100%);
  }
  20% {
    background-image: conic-gradient(#dbb059, #b68623 50%, #dbb059 100%);
  }
  100% {
    background-image: conic-gradient(#dbb059, #b68623 50%, #dbb059 100%);
  }
}

.circle::before {
  content: "";
  position: absolute;
  top: -6.7rem;
  left: 19rem;
  background-image: url(../img/sec07_06.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 1.8rem;
  height: 21.2rem;
  z-index: 1;
}

.circle-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 43rem;
  height: 43rem;
  border-radius: 50%;
  background-color: #fff;
}

.circle-txt {
  opacity: 0;
  animation: fadeInAnimation 3s infinite;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.sec07-item-pic-02 {
  top: 20rem;
  width: 29rem;
  left: 24rem;
  transform: translateX(0);
}

.sec07-item-pic-03 {
  top: 40rem;
  width: 50rem;
}

/* ----- sec09 ----- */

.sec09 {
  margin-top: -6rem;
}

/* ----- sec10 ----- */

.sec10 {
  margin-top: 6rem;
}

.sec10-coupon-wrap {
  position: relative;
}

.sec10-coupon {
  position: absolute;
  top: 44rem;
  left: 50%;
  transform: translateX(-50%);
  width: 65rem;
}

.sec10-coupon img {
  width: 100%;
}

.sec10-item {
  position: relative;
}

.sec10-item-line {
  position: absolute;
  top: 103rem;
  left: 13rem;
  transform: rotate(-17deg);
  transform-origin: left;
  width: 0;
  background-color: #ef6c72;
  border-radius: 3rem;
}

.sec10-item-line.lineAnima {
  height: 0.3rem;
  animation: lineAnimation 0.5s forwards;
}

@keyframes lineAnimation {
  0% {
    width: 0;
  }
  100% {
    width: 20rem;
  }
}

.sec10-item-price {
  position: absolute;
  top: 107rem;
  left: 50%;
  transform: translateX(-50%);
  width: 68rem;
}

.sec10-item-price img {
  width: 100%;
}

.sec10-item-price-box {
  position: absolute;
  top: 2rem;
  left: 9rem;
  display: block;
  width: 41rem;
  height: 14rem;
  overflow: hidden;
  margin: 0 auto;
  background-color: transparent;
  z-index: 0;
}

.sec10-item-price-shiny {
  display: inline-block;
  text-align: center;
  position: relative;
  width: 100%;
  color: #fff;
  font-size: min(calc(30 / 750 * 100vw), 30px);
}

.sec10-item-price-shiny:after {
  content: "";
  position: absolute;
  top: -100px;
  left: -100px;
  width: 50px;
  height: 50px;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.8) 100%, rgba(255, 255, 255, 0) 0%);
}

.priceAnima.sec10-item-price-shiny:after {
  animation: shinyAnima 2.5s forwards;
  animation-duration: 2.5s;
  animation-timing-function: ease-in-out;
}

@keyframes shinyAnima {
  0% {
    transform: scale(0) rotate(25deg);
    opacity: 0;
  }

  50% {
    transform: scale(1) rotate(25deg);
    opacity: 1;
  }

  100% {
    transform: scale(50) rotate(25deg);
    opacity: 0;
  }
}

/* ----- sec11 ----- */

.sec11 {
  margin-top: 6rem;
}

/* ----- sec12 ----- */

.sec12-cnv {
  position: absolute;
  top: 96rem;
  left: 50%;
  transform: translateX(-50%);
  width: 65rem;
  border-radius: 2rem;
  box-shadow: 1rem 1rem 1rem rgba(0, 0, 0, 10%);
}

.sec12-cnv-item {
  position: absolute;
  top: -3.8rem;
  left: 4rem;
  width: 52.3rem;
  pointer-events: none;
}

/* ----- flg ----- */

.flg {
  position: fixed;
  bottom: -0.2rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: 75rem;
  width: 100%;
  padding: 2rem 2.5rem;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 99;
}

.flg a {
  display: block;
  width: 65rem;
  margin: 0 auto;
}

.flg a:hover {
  filter: brightness(120%);
  opacity: 1;
}

.flg img {
  max-width: 100%;
}

/* ----- footer ----- */

footer {
  padding: 8rem 0 5rem;
  background-color: #ffe3e4;
  max-width: 75rem;
  margin: 0 auto 28rem;
  text-align: center;
  font-size: 2rem;
}

footer ul {
  display: flex;
  justify-content: center;
}
footer ul li {
  margin: 0 1.5rem;
}
footer ul li a {
  color: #ef6c72;
  text-decoration: none;
}

footer .copy {
  color: #ef6c72;
  margin-top: 3rem;
}

@media (max-width: 750px) {
  footer {
    padding: 6.66vw 0;
    font-size: 2.66vw;
  }
  footer .copy {
    margin-top: 4vw;
  }
}

/* ----- 光が横切るエフェクト ----- */

.light-box {
  display: block;
  overflow: hidden;
  margin: 0 auto;
  background-color: transparent;
  position: relative;
  z-index: 0;
}

.sec06-cnv .light-box {
  border-radius: 8rem;
}

.sec12-cnv .light-box {
  border-radius: 2rem;
}

.shiny-btn {
  display: inline-block;
  text-align: center;
  position: relative;
  width: 100%;
  color: #fff;
  font-size: min(calc(30 / 750 * 100vw), 30px);
}
.shiny-btn:after {
  content: "";
  position: absolute;
  top: -100px;
  left: -100px;
  width: 50px;
  height: 50px;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.8) 100%, rgba(255, 255, 255, 0) 0%);
  animation-name: shiny;
  animation-duration: 2.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes shiny {
  0% {
    transform: scale(0) rotate(25deg);
    opacity: 0;
  }

  50% {
    transform: scale(1) rotate(25deg);
    opacity: 1;
  }

  100% {
    transform: scale(50) rotate(25deg);
    opacity: 0;
  }
}

/* ----- 跳ねるエフェクト ----- */

.bounce {
  animation: bounce 1.5s ease infinite;
}
@keyframes bounce {
  70% {
    transform: translateY(0%);
  }
  80% {
    transform: translateY(-15%);
  }
  90% {
    transform: translateY(0%);
  }
  95% {
    transform: translateY(-7%);
  }
  97% {
    transform: translateY(0%);
  }
  99% {
    transform: translateY(-3%);
  }
  100% {
    transform: translateY(0);
  }
}

/* ----- slideIn  ----- */

.slideIn {
  animation-name: slideInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  transition-timing-function: ease;
  opacity: 0;
}

@keyframes slideInAnime {
  from {
    opacity: 0;
    transform: translateX(-15rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slideInTrigger {
  opacity: 0;
}

/* ----- fadeUp -----*/

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(8rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeUpTrigger {
  opacity: 0;
}

/* ------------------------------------------
  /* sp
  /* ------------------------------------------ */

@media (max-width: 750px) {
  html,
  body {
    font-size: calc(100vw / 75);
  }

  .tb {
    display: none;
  }

  .sp {
    display: block;
  }
}