@charset "UTF-8";
/*--------------------------------------
wrpCts
--------------------------------------*/
.wrpCts {
  overflow-x: hidden;
  background-image: url(../image/bg.png);
  background-repeat: repeat;
  background-size: min(64.7368421053vw, 738px);
  padding-bottom: min(9.3859649123vw, 107px);
  animation: bgMovePC 20s linear infinite;
  will-change: transform;
}
@media screen and (max-width: 768px) {
  .wrpCts {
    background-image: url(../image/bg_sp.png);
    background-size: 74.2666666667vw;
    padding-bottom: 17.0666666667vw;
    animation: bgMoveSP 20s linear infinite;
  }
}

@keyframes bgMovePC {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: min(64.7368421053vw, 738px) max(-22.8947368421vw, -261px);
  }
}
@keyframes bgMoveSP {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 74.2666666667vw -52.6666666667vw;
  }
}
/*--------------------------------------
ctsInner
--------------------------------------*/
.ctsInner {
  width: min(83.3333333333vw, 950px);
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .ctsInner {
    width: 89.3333333333vw;
  }
}

/*--------------------------------------
common__ttl
--------------------------------------*/
.common__ttl {
  position: relative;
  width: min(83.3333333333vw, 950px);
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .common__ttl {
    width: 89.3333333333vw;
    margin-top: 1.0666666667vw;
  }
}
.common__ttl::after {
  position: absolute;
  z-index: 1;
  content: "";
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  width: min(16.3157894737vw, 186px);
  height: min(24.5614035088vw, 280px);
}
@media screen and (max-width: 768px) {
  .common__ttl::after {
    width: 22.6666666667vw;
    height: 33.6vw;
  }
}

@media screen and (max-width: 768px) {
  .pcOnly {
    display: none;
  }
}

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

/*--------------------------------------
yellow
--------------------------------------*/
.yellow {
  position: relative;
  z-index: 0;
}
.yellow::before {
  content: "";
  position: absolute;
  top: min(4.4736842105vw, 51px);
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFEF;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .yellow::before {
    top: 6.8vw;
  }
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, button {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  -webkit-text-size-adjust: none;
}

img, input[type=image] {
  -webkit-backface-visibility: hidden;
}

img {
  width: 100%;
  vertical-align: bottom;
}

*, *:before, *:after {
  box-sizing: border-box;
}

button {
  background: unset;
}

/* ----------------------------------------------------------------
フェードアニメーション
----------------------------------------------------------------- */
:root {
  --fade-translate-x: 0px;
  --fade-translate-y: 0px;
  --fade-duration: 500ms;
}

/* 表示方向 */
.up {
  --fade-translate-x: 0px;
  --fade-translate-y: 50px;
}

.down {
  --fade-translate-x: 0px;
  --fade-translate-y: -50px;
}

.left {
  --fade-translate-x: -50px;
  --fade-translate-y: 0px;
}

.right {
  --fade-translate-x: 50px;
  --fade-translate-y: 0px;
}

.jsFade {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
  transition-delay: 0ms;
  transform: translate(var(--fade-translate-x), var(--fade-translate-y));
}
.jsFade.speed--100 {
  transition-duration: 100ms;
}
.jsFade.speed--200 {
  transition-duration: 200ms;
}
.jsFade.speed--300 {
  transition-duration: 300ms;
}
.jsFade.speed--400 {
  transition-duration: 400ms;
}
.jsFade.speed--500 {
  transition-duration: 500ms;
}
.jsFade.speed--600 {
  transition-duration: 600ms;
}
.jsFade.speed--700 {
  transition-duration: 700ms;
}
.jsFade.speed--800 {
  transition-duration: 800ms;
}
.jsFade.speed--900 {
  transition-duration: 900ms;
}
.jsFade.speed--1000 {
  transition-duration: 1000ms;
}
.jsFade.speed--1100 {
  transition-duration: 1100ms;
}
.jsFade.speed--1200 {
  transition-duration: 1200ms;
}
.jsFade.speed--1300 {
  transition-duration: 1300ms;
}
.jsFade.speed--1400 {
  transition-duration: 1400ms;
}
.jsFade.speed--1500 {
  transition-duration: 1500ms;
}
.jsFade.speed--1600 {
  transition-duration: 1600ms;
}
.jsFade.speed--1700 {
  transition-duration: 1700ms;
}
.jsFade.speed--1800 {
  transition-duration: 1800ms;
}
.jsFade.speed--1900 {
  transition-duration: 1900ms;
}
.jsFade.speed--2000 {
  transition-duration: 2000ms;
}
.jsFade.speed--2100 {
  transition-duration: 2100ms;
}
.jsFade.speed--2200 {
  transition-duration: 2200ms;
}
.jsFade.speed--2300 {
  transition-duration: 2300ms;
}
.jsFade.speed--2400 {
  transition-duration: 2400ms;
}
.jsFade.speed--2500 {
  transition-duration: 2500ms;
}
.jsFade.speed--2600 {
  transition-duration: 2600ms;
}
.jsFade.speed--2700 {
  transition-duration: 2700ms;
}
.jsFade.speed--2800 {
  transition-duration: 2800ms;
}
.jsFade.speed--2900 {
  transition-duration: 2900ms;
}
.jsFade.speed--3000 {
  transition-duration: 3000ms;
}
.jsFade.delay--100 {
  transition-delay: 100ms;
}
.jsFade.delay--200 {
  transition-delay: 200ms;
}
.jsFade.delay--300 {
  transition-delay: 300ms;
}
.jsFade.delay--400 {
  transition-delay: 400ms;
}
.jsFade.delay--500 {
  transition-delay: 500ms;
}
.jsFade.delay--600 {
  transition-delay: 600ms;
}
.jsFade.delay--700 {
  transition-delay: 700ms;
}
.jsFade.delay--800 {
  transition-delay: 800ms;
}
.jsFade.delay--900 {
  transition-delay: 900ms;
}
.jsFade.delay--1000 {
  transition-delay: 1000ms;
}
.jsFade.delay--1100 {
  transition-delay: 1100ms;
}
.jsFade.delay--1200 {
  transition-delay: 1200ms;
}
.jsFade.delay--1300 {
  transition-delay: 1300ms;
}
.jsFade.delay--1400 {
  transition-delay: 1400ms;
}
.jsFade.delay--1500 {
  transition-delay: 1500ms;
}
.jsFade.delay--1600 {
  transition-delay: 1600ms;
}
.jsFade.delay--1700 {
  transition-delay: 1700ms;
}
.jsFade.delay--1800 {
  transition-delay: 1800ms;
}
.jsFade.delay--1900 {
  transition-delay: 1900ms;
}
.jsFade.delay--2000 {
  transition-delay: 2000ms;
}
.jsFade.delay--2100 {
  transition-delay: 2100ms;
}
.jsFade.delay--2200 {
  transition-delay: 2200ms;
}
.jsFade.delay--2300 {
  transition-delay: 2300ms;
}
.jsFade.delay--2400 {
  transition-delay: 2400ms;
}
.jsFade.delay--2500 {
  transition-delay: 2500ms;
}
.jsFade.delay--2600 {
  transition-delay: 2600ms;
}
.jsFade.delay--2700 {
  transition-delay: 2700ms;
}
.jsFade.delay--2800 {
  transition-delay: 2800ms;
}
.jsFade.delay--2900 {
  transition-delay: 2900ms;
}
.jsFade.delay--3000 {
  transition-delay: 3000ms;
}

/* 表示サイズ */
.scaleUp {
  transform: translate(var(--fade-translate-x), var(--fade-translate-y)) scale(0.6);
}

.jsScrollIn {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

@keyframes anmBounce {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.9);
  }
}
.kv__inner {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
}
.kv__fukidashi {
  position: absolute;
  animation: anmBounce 0.5s 3s ease-in-out infinite alternate;
}
.kv__fukidashi--01 {
  width: min(17.96875vw, 345px);
  top: 11.1721611722%;
  left: 2.8125%;
}
@media screen and (max-width: 768px) {
  .kv__fukidashi--01 {
    width: 19.2vw;
    top: 3.3333333333vw;
    left: 1.8666666667vw;
  }
}
.kv__fukidashi--02 {
  width: min(16.1458333333vw, 310px);
  top: 43.0402930403%;
  left: 1.3541666667%;
}
@media screen and (max-width: 768px) {
  .kv__fukidashi--02 {
    width: 27.3333333333vw;
    top: 1.8666666667vw;
    left: 45.6vw;
  }
}
.kv__fukidashi--03 {
  width: min(26.7708333333vw, 514px);
  top: 9.3406593407%;
  right: 0.2083333333%;
}
@media screen and (max-width: 768px) {
  .kv__fukidashi--03 {
    width: 28.2666666667vw;
    top: 1.6vw;
    right: -5.4666666667vw;
  }
}
.kv__fukidashi--04 {
  width: min(16.1458333333vw, 310px);
  bottom: 12.5457875458%;
  left: 3.75%;
}
@media screen and (max-width: 768px) {
  .kv__fukidashi--04 {
    width: 16.6666666667vw;
    bottom: 6.4vw;
    left: 1.8666666667vw;
  }
}
.kv__fukidashi--05 {
  width: min(14.1145833333vw, 271px);
  bottom: 45.4212454212%;
  right: 0.78125%;
}
@media screen and (max-width: 768px) {
  .kv__fukidashi--05 {
    width: 26.4vw;
    bottom: 0.5333333333vw;
    right: 51.3333333333vw;
  }
}
.kv__fukidashi--06 {
  width: min(17.2916666667vw, 332px);
  bottom: 10.1648351648%;
  right: 1.3541666667%;
}
@media screen and (max-width: 768px) {
  .kv__fukidashi--06 {
    width: 20.4vw;
    bottom: 5.7333333333vw;
    right: -2vw;
  }
}
.kv__character {
  position: absolute;
}
.kv__character--01 {
  width: min(16.875vw, 324px);
  top: 6.7765567766%;
  left: 16.3541666667%;
}
@media screen and (max-width: 768px) {
  .kv__character--01 {
    width: 36.2666666667vw;
    top: 3.8666666667vw;
    left: 8vw;
  }
}
.kv__character--02 {
  width: min(13.8541666667vw, 266px);
  top: 36.9047619048%;
  left: 13.6458333333%;
}
@media screen and (max-width: 768px) {
  .kv__character--02 {
    width: 36.2666666667vw;
    top: 2.5333333333vw;
    left: 31.6vw;
  }
}
.kv__character--03 {
  width: min(16.0416666667vw, 308px);
  top: 7.5091575092%;
  right: 20.3125%;
}
@media screen and (max-width: 768px) {
  .kv__character--03 {
    width: 36.2666666667vw;
    top: 3.6vw;
    right: 7.7333333333vw;
  }
}
.kv__character--04 {
  width: min(19.0104166667vw, 365px);
  bottom: 3.1135531136%;
  left: 13.75%;
}
@media screen and (max-width: 768px) {
  .kv__character--04 {
    width: 36.2666666667vw;
    bottom: 4.4vw;
    left: 9.2vw;
  }
}
.kv__character--05 {
  width: min(16.4583333333vw, 316px);
  bottom: 36.5384615385%;
  right: 13.0729166667%;
}
@media screen and (max-width: 768px) {
  .kv__character--05 {
    width: 36.2666666667vw;
    bottom: 2.8vw;
    right: 30.8vw;
  }
}
.kv__character--06 {
  width: min(19.375vw, 372px);
  bottom: 2.8388278388%;
  right: 14.9479166667%;
}
@media screen and (max-width: 768px) {
  .kv__character--06 {
    width: 36.2666666667vw;
    bottom: 4.4vw;
    right: 6.6666666667vw;
  }
}

.campaign {
  background-color: #FFFFEF;
  width: min(83.3333333333vw, 950px);
  border-radius: min(3.5087719298vw, 40px);
  margin: min(5.2631578947vw, 60px) auto 0;
  padding: min(3.9473684211vw, 45px) 0 min(4.2105263158vw, 48px);
}
@media screen and (max-width: 768px) {
  .campaign {
    border-radius: 5.3333333333vw;
    margin-top: 10.6666666667vw;
    padding: 6.8vw 0 9.6vw;
  }
}
.campaign__ttl {
  width: min(69.298245614vw, 790px);
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .campaign__ttl {
    width: 81.6vw;
  }
}
.campaign__txt {
  width: min(71.4912280702vw, 815px);
  margin: min(3.9473684211vw, 45px) auto 0;
}
@media screen and (max-width: 768px) {
  .campaign__txt {
    width: 61.8666666667vw;
    margin-top: 5.4666666667vw;
  }
}

.movie {
  margin-top: min(16.1403508772vw, 184px);
}
@media screen and (max-width: 768px) {
  .movie {
    margin-top: 19.2vw;
  }
}
.movie .common__ttl::after {
  background-image: url(../image/pic_chara_01.png);
  top: max(-13.3333333333vw, -152px);
  right: 0;
}
@media screen and (max-width: 768px) {
  .movie .common__ttl::after {
    background-image: url(../image/pic_chara_01_sp.png);
    top: -16.8vw;
    right: 2.4vw;
  }
}
.movie__cts {
  display: flex;
  gap: min(5.6140350877vw, 64px);
  justify-content: center;
  margin-top: min(3.9473684211vw, 45px);
}
@media screen and (max-width: 768px) {
  .movie__cts {
    flex-direction: column;
    gap: 7.2vw;
    margin-top: 6.4vw;
  }
}
.movie__item {
  width: min(35.1754385965vw, 401px);
  aspect-ratio: 16/9;
  background-color: black;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .movie__item {
    width: 64.2666666667vw;
    margin: 0 auto;
  }
}
.movie__item video {
  width: 100%;
  height: auto;
  display: block;
}

.prize {
  margin-top: min(16.1403508772vw, 184px);
}
@media screen and (max-width: 768px) {
  .prize {
    margin-top: 19.2vw;
  }
}
.prize .common__ttl::after {
  background-image: url(../image/pic_chara_02.png);
  top: max(-13.0701754386vw, -149px);
  left: 0;
}
@media screen and (max-width: 768px) {
  .prize .common__ttl::after {
    background-image: url(../image/pic_chara_02_sp.png);
    top: -17.0666666667vw;
  }
}
.prize__cts {
  margin-top: min(5.6140350877vw, 64px);
}
@media screen and (max-width: 768px) {
  .prize__cts {
    margin-top: 6.4vw;
  }
}
.prize__name {
  width: min(57.8947368421vw, 660px);
  margin: min(1.4035087719vw, 16px) auto 0;
}
@media screen and (max-width: 768px) {
  .prize__name {
    width: 80vw;
    margin-top: 3.2vw;
  }
}
.prize__image {
  position: relative;
  width: min(34.7368421053vw, 396px);
  margin: min(1.1403508772vw, 13px) auto 0;
}
@media screen and (max-width: 768px) {
  .prize__image {
    width: 52.8vw;
    margin-top: 13.2vw;
  }
}
.prize__image p {
  position: absolute;
  width: min(22.3684210526vw, 255px);
  top: 0;
  right: max(-17.5438596491vw, -200px);
}
@media screen and (max-width: 768px) {
  .prize__image p {
    width: 34vw;
    top: -12.1333333333vw;
    right: -18.2666666667vw;
  }
}
.prize__txt {
  margin-top: min(1.7543859649vw, 20px);
  font-size: min(1.7543859649vw, 20px);
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .prize__txt {
    margin-top: 3.3333333333vw;
    font-size: 3.7333333333vw;
    line-height: 1.5;
  }
}
.prize__txt span {
  font-size: min(1.1403508772vw, 13px);
  line-height: 2.3076923077;
}
@media screen and (max-width: 768px) {
  .prize__txt span {
    font-size: 2.6666666667vw;
    line-height: 1.5;
  }
}
.prize__detail {
  width: min(30.8771929825vw, 352px);
  margin: min(1.4035087719vw, 16px) auto 0;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .prize__detail {
    width: 43.2vw;
    margin-top: 1.0666666667vw;
  }
}
.prize__detail p {
  font-size: min(2.6315789474vw, 30px);
  line-height: 1.4666666667;
}
@media screen and (max-width: 768px) {
  .prize__detail p {
    font-size: 4.2666666667vw;
    line-height: 1.09375;
  }
}
.prize__note {
  width: fit-content;
  margin: min(2.1052631579vw, 24px) auto 0;
  font-size: min(1.7543859649vw, 20px);
  line-height: 1.25;
}
@media screen and (max-width: 768px) {
  .prize__note {
    margin-top: 3.2vw;
    font-size: 3.2vw;
    line-height: 1.0294117647;
  }
}
.prize__note li {
  padding-left: 1em;
  text-indent: -1em;
}
@media screen and (max-width: 768px) {
  .prize__item:nth-child(1) .prize__note {
    width: 59.0666666667vw;
  }
}
.prize__item:nth-child(2) {
  margin-top: min(3.5964912281vw, 41px);
}
@media screen and (max-width: 768px) {
  .prize__item:nth-child(2) {
    margin-top: 9.6vw;
  }
}
@media screen and (max-width: 768px) {
  .prize__item:nth-child(2) .prize__name {
    width: 89.3333333333vw;
  }
}
.prize__item:nth-child(2) .prize__image {
  position: relative;
  width: min(52.6315789474vw, 600px);
  margin: min(1.1403508772vw, 13px) auto 0;
}
@media screen and (max-width: 768px) {
  .prize__item:nth-child(2) .prize__image {
    width: 78.6666666667vw;
    margin-top: 3.0666666667vw;
  }
}
.prize__item:nth-child(2) .prize__image p {
  position: absolute;
  width: min(16.8421052632vw, 192px);
  top: min(20.1754385965vw, 230px);
  right: max(-6.1403508772vw, -70px);
}
@media screen and (max-width: 768px) {
  .prize__item:nth-child(2) .prize__image p {
    width: 25.6vw;
    top: 34vw;
    right: -5.3333333333vw;
  }
}
.prize__item:nth-child(2) .prize__txt {
  margin-top: min(2.8070175439vw, 32px);
}
@media screen and (max-width: 768px) {
  .prize__item:nth-child(2) .prize__txt {
    margin-top: 2.9333333333vw;
  }
}
.prize__item:nth-child(2) .prize__txt span {
  font-size: min(1.4912280702vw, 17px);
  line-height: 1.7647058824;
}
@media screen and (max-width: 768px) {
  .prize__item:nth-child(2) .prize__txt span {
    font-size: 3.2vw;
    line-height: 1.75;
  }
}
.prize__item:nth-child(2) .prize__detail {
  width: min(42.5438596491vw, 485px);
}
@media screen and (max-width: 768px) {
  .prize__item:nth-child(2) .prize__detail {
    width: 56.6666666667vw;
  }
}

.products {
  margin-top: min(11.7543859649vw, 134px);
  padding-bottom: min(2.5438596491vw, 29px);
}
@media screen and (max-width: 768px) {
  .products {
    margin-top: 19.2vw;
    padding-bottom: 1.8666666667vw;
  }
}
.products .common__ttl::after {
  background-image: url(../image/pic_chara_03.png);
  top: max(-9.3859649123vw, -107px);
  right: min(0.8771929825vw, 10px);
}
@media screen and (max-width: 768px) {
  .products .common__ttl::after {
    background-image: url(../image/pic_chara_03_sp.png);
    top: -14.8vw;
    right: 1.4666666667vw;
  }
}
.products__inner {
  width: min(78.0701754386vw, 890px);
  margin: min(4.0350877193vw, 46px) auto 0;
}
@media screen and (max-width: 768px) {
  .products__inner {
    width: 100%;
    margin-top: 6.4vw;
  }
}
.products__cts {
  display: flex;
}
@media screen and (max-width: 768px) {
  .products__cts {
    flex-direction: column;
  }
}
.products__group {
  flex-basis: 33.3333333333%;
  padding-top: min(5.9649122807vw, 68px);
}
@media screen and (max-width: 768px) {
  .products__group {
    padding-top: 12vw;
    display: flex;
    justify-content: space-between;
  }
}
.products__group:nth-of-type(1) {
  padding-top: min(1.4035087719vw, 16px);
}
@media screen and (max-width: 768px) {
  .products__group:nth-of-type(1) {
    padding: 0;
  }
}
.products__group:nth-of-type(2) {
  position: relative;
}
@media screen and (max-width: 768px) {
  .products__group:nth-of-type(2) .products__name {
    height: 16.4vw;
  }
}
.products__group:nth-of-type(2)::before, .products__group:nth-of-type(2)::after {
  content: "";
  display: inline-block;
  width: min(0.8771929825vw, 10px);
  height: min(107.5438596491vw, 1226px);
  background-image: url(../image/ps_products_01.png);
  background-size: contain;
  position: absolute;
  top: 0;
}
@media screen and (max-width: 768px) {
  .products__group:nth-of-type(2)::before, .products__group:nth-of-type(2)::after {
    width: 79.4666666667vw;
    height: 1.3333333333vw;
    background-image: url(../image/ps_products_01_sp.png);
    top: 4.2666666667vw;
    left: 4.2666666667vw;
  }
}
.products__group:nth-of-type(2)::after {
  right: 0;
}
@media screen and (max-width: 768px) {
  .products__group:nth-of-type(2)::after {
    top: unset;
    right: unset;
    bottom: -4.2666666667vw;
  }
}
.products__item:nth-of-type(2) {
  padding-top: min(4.2105263158vw, 48px);
}
@media screen and (max-width: 768px) {
  .products__item:nth-of-type(2) {
    padding-top: 0;
  }
}
.products__image {
  width: min(17.9824561404vw, 205px);
  margin: 0 auto;
  filter: drop-shadow(4px 6px 6px rgba(0, 0, 0, 0.16));
}
@media screen and (max-width: 768px) {
  .products__image {
    width: 30.6666666667vw;
  }
}
.products__image--vc30 {
  width: min(23.1578947368vw, 264px);
}
@media screen and (max-width: 768px) {
  .products__image--vc30 {
    width: 39.2vw;
    padding-top: 8.5333333333vw;
  }
}
@media screen and (max-width: 768px) {
  .products__image--vb30, .products__image--bio30 {
    width: 28.5333333333vw;
  }
}
.products__name {
  display: flex;
  justify-content: center;
  align-items: center;
  height: min(9.649122807vw, 110px);
  font-size: min(2.1929824561vw, 25px);
  font-weight: bold;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .products__name {
    height: 10.1333333333vw;
    font-size: 4vw;
  }
}
.products__day {
  width: min(17.9824561404vw, 205px);
  margin: 0 auto;
  border: 1px solid #000;
  font-size: min(1.7543859649vw, 20px);
  font-weight: bold;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .products__day {
    width: 30.6666666667vw;
    font-size: 3.7333333333vw;
  }
}
.products__btn {
  display: block;
  width: min(20.8771929825vw, 238px);
  margin: min(3.3333333333vw, 38px) auto 0;
}
@media screen and (max-width: 768px) {
  .products__btn {
    width: 39.2vw;
    margin-top: 3.2vw;
  }
}
.products__shop {
  display: flex;
  justify-content: space-between;
  margin-top: min(2.1929824561vw, 25px);
}
@media screen and (max-width: 768px) {
  .products__shop {
    flex-direction: column;
    gap: 2.1333333333vw;
    margin-top: 5.3333333333vw;
  }
}
.products__shop a {
  display: block;
  width: min(37.6315789474vw, 429px);
}
@media screen and (max-width: 768px) {
  .products__shop a {
    width: 72.8vw;
    margin: 0 auto;
  }
}
.products__note {
  margin-top: min(2.1052631579vw, 24px);
  padding-left: 1em;
  text-indent: -1em;
  font-size: min(1.7543859649vw, 20px);
  line-height: 1;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .products__note {
    width: 70.4vw;
    margin: 2.1333333333vw auto 0;
    font-size: 3.2vw;
    line-height: 1.25;
    text-align: left;
  }
}

.method {
  position: relative;
  margin-top: min(25.0877192982vw, 286px);
}
@media screen and (max-width: 768px) {
  .method {
    margin-top: 32.8vw;
  }
}
.method .common__ttl {
  position: absolute;
  top: max(-4.4736842105vw, -51px);
}
@media screen and (max-width: 768px) {
  .method .common__ttl {
    top: -6.8vw;
  }
}
.method .common__ttl::after {
  background-image: url(../image/pic_chara_04.png);
  top: max(-14.1228070175vw, -161px);
  left: 0;
}
@media screen and (max-width: 768px) {
  .method .common__ttl::after {
    background-image: url(../image/pic_chara_04_sp.png);
    top: -17.3333333333vw;
  }
}
.method__cts {
  background-color: #FFFFEF;
  border-radius: min(3.5087719298vw, 40px);
  padding: min(8.0701754386vw, 92px) min(2.8070175439vw, 32px) min(5.6140350877vw, 64px) min(2.8070175439vw, 32px);
}
@media screen and (max-width: 768px) {
  .method__cts {
    border-radius: 5.3333333333vw;
    padding: 15.3333333333vw 5.3333333333vw 8.5333333333vw 5.3333333333vw;
  }
}
.method .step {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .method .step {
    flex-direction: column;
    row-gap: 5.3333333333vw;
  }
}
.method .step__item:nth-of-type(1) {
  width: min(22.5438596491vw, 257px);
}
@media screen and (max-width: 768px) {
  .method .step__item:nth-of-type(1) {
    width: 100%;
  }
}
.method .step__item:nth-of-type(2) {
  width: min(21.4912280702vw, 245px);
}
@media screen and (max-width: 768px) {
  .method .step__item:nth-of-type(2) {
    width: 100%;
  }
}
.method .step__item:nth-of-type(3) {
  width: min(19.649122807vw, 224px);
}
@media screen and (max-width: 768px) {
  .method .step__item:nth-of-type(3) {
    width: 100%;
  }
}
.method .step__name {
  width: min(15.7894736842vw, 180px);
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .method .step__name {
    width: 28.2666666667vw;
  }
}
.method .step__image {
  width: min(15.0877192982vw, 172px);
  margin: min(2.1052631579vw, 24px) auto 0;
}
@media screen and (max-width: 768px) {
  .method .step__image {
    width: 26.6666666667vw;
  }
}
.method .step p:nth-of-type(1) {
  font-size: min(1.4035087719vw, 16px);
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  margin-top: min(1.2280701754vw, 14px);
}
@media screen and (max-width: 768px) {
  .method .step p:nth-of-type(1) {
    font-size: 4vw;
    margin-top: 1.8666666667vw;
  }
}
.method .step p:nth-of-type(2) {
  margin-top: min(0.701754386vw, 8px);
  padding-left: 1em;
  font-size: min(1.1403508772vw, 13px);
  line-height: 1.5384615385;
  text-indent: -1em;
}
@media screen and (max-width: 768px) {
  .method .step p:nth-of-type(2) {
    margin-top: 1.0666666667vw;
    font-size: 2.6666666667vw;
    line-height: 1.5;
  }
}
.method .attention {
  padding-top: min(2.8070175439vw, 32px);
}
@media screen and (max-width: 768px) {
  .method .attention {
    padding-top: 8.5333333333vw;
  }
}
.method .attention__ttl {
  width: min(55.7894736842vw, 636px);
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .method .attention__ttl {
    width: 86.4vw;
    margin: 0 0 0 -3.8666666667vw;
  }
}
.method .attention__cts {
  display: flex;
  justify-content: space-between;
  background-image: radial-gradient(circle, #a883eb min(0.4385964912vw, 5px), transparent min(0.4385964912vw, 5px));
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: min(3.0701754386vw, 35px) min(0.8771929825vw, 10px);
  margin-top: min(2.1929824561vw, 25px);
  padding-bottom: min(4.2105263158vw, 48px);
}
@media screen and (max-width: 768px) {
  .method .attention__cts {
    flex-direction: column;
    row-gap: 4.2666666667vw;
    background-image: radial-gradient(circle, #a883eb 0.6666666667vw, transparent 0.6666666667vw);
    background-size: 4.6666666667vw 1.3333333333vw;
    margin-top: 5.3333333333vw;
    padding-bottom: 5.3333333333vw;
  }
}
.method .attention__item {
  width: min(36.4035087719vw, 415px);
  border-radius: min(1.7543859649vw, 20px);
  padding: min(3.0701754386vw, 35px) 0 min(3.5087719298vw, 40px);
}
@media screen and (max-width: 768px) {
  .method .attention__item {
    width: 100%;
    border-radius: 2.6666666667vw;
    padding: 5.0666666667vw 0 4.2666666667vw;
  }
}
.method .attention__item:nth-of-type(1) {
  background-color: #FFE2E4;
}
.method .attention__item:nth-of-type(2) {
  background-color: #ECF3F9;
}
.method .attention__item ul {
  width: min(33.3333333333vw, 380px);
  margin: min(1.4035087719vw, 16px) auto 0;
  font-size: min(1.4035087719vw, 16px);
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .method .attention__item ul {
    width: 74vw;
    margin-top: 1.6vw;
    font-size: 3.2vw;
    line-height: 1.4583333333;
  }
}
.method .attention__item ul li span {
  font-size: min(1.1403508772vw, 13px);
  line-height: 1.4615384615;
}
@media screen and (max-width: 768px) {
  .method .attention__item ul li span {
    font-size: 2.6666666667vw;
    line-height: 1.75;
  }
}
.method .attention__note {
  width: min(48.5964912281vw, 554px);
  margin: 0 auto;
  padding-top: min(4.298245614vw, 49px);
  font-size: min(1.1403508772vw, 13px);
}
@media screen and (max-width: 768px) {
  .method .attention__note {
    font-size: 2.6666666667vw;
    width: 100%;
  }
}
.method .attention__note li {
  padding-left: 1em;
  text-indent: -1em;
}

.agreement {
  position: relative;
  margin-top: min(20.6140350877vw, 235px);
}
@media screen and (max-width: 768px) {
  .agreement {
    margin-top: 26vw;
  }
}
.agreement::after {
  position: absolute;
  z-index: 1;
  content: "";
  display: block;
  background-image: url(../image/pic_chara_06.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: min(16.3157894737vw, 186px);
  height: min(24.5614035088vw, 280px);
  bottom: min(7.1052631579vw, 81px);
  left: max(-2.8947368421vw, -33px);
}
@media screen and (max-width: 768px) {
  .agreement::after {
    background-image: url(../image/pic_chara_06_sp.png);
    width: 22.6666666667vw;
    height: 33.6vw;
    bottom: 15.4666666667vw;
    left: -5.3333333333vw;
  }
}
.agreement .common__ttl {
  position: absolute;
  top: max(-4.4736842105vw, -51px);
}
@media screen and (max-width: 768px) {
  .agreement .common__ttl {
    top: -6.8vw;
  }
}
.agreement .common__ttl::after {
  background-image: url(../image/pic_chara_05.png);
  top: max(-13.8596491228vw, -158px);
  right: min(1.2280701754vw, 14px);
}
@media screen and (max-width: 768px) {
  .agreement .common__ttl::after {
    background-image: url(../image/pic_chara_05_sp.png);
    top: -16.4vw;
    right: -0.9333333333vw;
  }
}
.agreement__cts {
  background-color: #FFFFEF;
  border-radius: min(3.5087719298vw, 40px);
  padding: min(8.6842105263vw, 99px) min(5.2631578947vw, 60px) min(7.0175438596vw, 80px) min(5.2631578947vw, 60px);
}
@media screen and (max-width: 768px) {
  .agreement__cts {
    border-radius: 5.3333333333vw;
    padding: 15.4666666667vw 8vw 8.5333333333vw;
  }
}
.agreement__btn {
  display: block;
  width: min(58.5087719298vw, 667px);
  margin: min(5.6140350877vw, 64px) auto 0;
}
@media screen and (max-width: 768px) {
  .agreement__btn {
    width: 78.8vw;
    margin-top: 6.4vw;
  }
}
.agreement .txtBox {
  background-color: #FFF;
  height: min(44.8245614035vw, 511px);
  overflow-y: scroll;
  font-size: min(1.4035087719vw, 16px);
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .agreement .txtBox {
    height: 106.6666666667vw;
    font-size: 3.4666666667vw;
    line-height: 1.7692307692;
  }
}
.agreement .txtBox__inner {
  width: min(59.298245614vw, 676px);
  margin: 0 auto;
  padding: min(4.9122807018vw, 56px) 0 min(4.1228070175vw, 47px);
}
@media screen and (max-width: 768px) {
  .agreement .txtBox__inner {
    width: 65.0666666667vw;
    padding: 5.3333333333vw 0 10.5333333333vw;
  }
}
.agreement .txtBox__inner h3 {
  font-size: min(2.4561403509vw, 28px);
  line-height: 0.8571428571;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .agreement .txtBox__inner h3 {
    font-size: 5.3333333333vw;
    line-height: 1;
  }
}
.agreement .txtBox__inner > p {
  margin-top: min(3.5087719298vw, 40px);
}
@media screen and (max-width: 768px) {
  .agreement .txtBox__inner > p {
    margin-top: 7.4666666667vw;
  }
}
.agreement .txtBox__inner .txtMain dt {
  font-size: min(1.7543859649vw, 20px);
  line-height: 1.2;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .agreement .txtBox__inner .txtMain dt {
    font-size: 4.2666666667vw;
    line-height: 1.25;
  }
}
.agreement .txtBox__inner .txtMain dt:first-of-type {
  margin-top: min(2.8070175439vw, 32px);
}
@media screen and (max-width: 768px) {
  .agreement .txtBox__inner .txtMain dt:first-of-type {
    margin-top: 6.4vw;
  }
}
.agreement .txtBox__inner .txtMain dt:nth-of-type(n+2) {
  margin-top: min(2.1052631579vw, 24px);
}
@media screen and (max-width: 768px) {
  .agreement .txtBox__inner .txtMain dt:nth-of-type(n+2) {
    margin-top: 5.3333333333vw;
  }
}
.agreement .txtBox__inner .txtMain dd {
  margin-top: min(0.701754386vw, 8px);
}
@media screen and (max-width: 768px) {
  .agreement .txtBox__inner .txtMain dd {
    margin-top: 2.1333333333vw;
  }
}
.agreement .txtBox__inner .txtMain ul li {
  padding-left: 1em;
  text-indent: -1em;
}
.agreement .txtBox__inner .txtSub {
  background-image: radial-gradient(circle, #000000 min(0.1754385965vw, 2px), transparent min(0.1754385965vw, 2px));
  background-position: left top;
  background-repeat: repeat-x;
  background-size: min(1.4035087719vw, 16px) min(0.350877193vw, 4px);
  margin-top: min(2.1052631579vw, 24px);
  padding-top: min(2.1052631579vw, 24px);
}
@media screen and (max-width: 768px) {
  .agreement .txtBox__inner .txtSub {
    background-image: radial-gradient(circle, #000000 0.4vw, transparent 0.4vw);
    background-size: 3.4666666667vw 0.8vw;
    margin-top: 5.3333333333vw;
    padding-top: 5.3333333333vw;
  }
}
.agreement .txtBox__inner .txtSub > dt {
  font-size: min(1.7543859649vw, 20px);
  line-height: 1.2;
}
@media screen and (max-width: 768px) {
  .agreement .txtBox__inner .txtSub > dt {
    font-size: 4.2666666667vw;
    line-height: 1.40625;
  }
}
.agreement .txtBox__inner .txtSub > dd {
  margin-top: min(0.701754386vw, 8px);
}
@media screen and (max-width: 768px) {
  .agreement .txtBox__inner .txtSub > dd {
    margin-top: 2.1333333333vw;
  }
}

.contact {
  position: relative;
  z-index: 0;
  background-color: #FFFFEF;
  border-radius: min(3.5087719298vw, 40px);
  margin-top: min(16.1403508772vw, 184px);
  padding: min(4.3859649123vw, 50px) 0 min(5.1754385965vw, 59px);
}
@media screen and (max-width: 768px) {
  .contact {
    border-radius: 5.3333333333vw;
    margin-top: 19.2vw;
    padding: 6.4vw 0 4.5333333333vw;
  }
}
.contact::after {
  position: absolute;
  z-index: 1;
  content: "";
  display: block;
  background-image: url(../image/pic_chara_07.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: min(16.3157894737vw, 186px);
  height: min(29.8245614035vw, 340px);
  bottom: min(0.701754386vw, 8px);
  right: 0;
}
@media screen and (max-width: 768px) {
  .contact::after {
    background-image: url(../image/pic_chara_07_sp.png);
    width: 20.5333333333vw;
    height: 43.7333333333vw;
    bottom: 3.6vw;
    right: 5.3333333333vw;
  }
}
.contact__ttl {
  width: min(22.1052631579vw, 252px);
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .contact__ttl {
    width: 36.5333333333vw;
  }
}
.contact__ttl:nth-of-type(2) {
  width: min(44.4736842105vw, 507px);
  margin-top: min(4.9122807018vw, 56px);
}
@media screen and (max-width: 768px) {
  .contact__ttl:nth-of-type(2) {
    width: 73.3333333333vw;
    margin-top: 6.4vw;
  }
}
.contact__cts {
  width: min(56.4035087719vw, 643px);
  margin: min(3.5087719298vw, 40px) auto 0;
}
@media screen and (max-width: 768px) {
  .contact__cts {
    width: 76.9333333333vw;
    margin-top: 4.8vw;
  }
}
.contact__cts:nth-of-type(2) .contact__item:nth-of-type(2) dd {
  position: relative;
}
.contact__cts:nth-of-type(2) .contact__item:nth-of-type(2) dd::after {
  position: absolute;
  content: "";
  display: inline-block;
  background-image: url(../image/txt_contact_01.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: min(9.2105263158vw, 105px);
  height: min(2.6315789474vw, 30px);
  left: min(12.6315789474vw, 144px);
}
@media screen and (max-width: 768px) {
  .contact__cts:nth-of-type(2) .contact__item:nth-of-type(2) dd::after {
    background-image: url(../image/txt_contact_01_sp.png);
    width: 20.5333333333vw;
    height: 5.3333333333vw;
    left: 21.3333333333vw;
  }
}
.contact__item {
  display: flex;
  gap: min(3.5087719298vw, 40px);
  margin-top: min(0.7894736842vw, 9px);
}
@media screen and (max-width: 768px) {
  .contact__item {
    flex-direction: column;
    gap: 1.7333333333vw;
    margin-top: 3.2vw;
  }
}
.contact__item dt {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #E14389;
  width: min(8.5964912281vw, 98px);
  height: min(2.6315789474vw, 30px);
  border-radius: min(1.6666666667vw, 19px);
  color: #FFF;
  font-size: min(1.4035087719vw, 16px);
  font-weight: 600;
  line-height: 2.8125;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .contact__item dt {
    width: 19.2vw;
    height: 5.3333333333vw;
    border-radius: 2.5333333333vw;
    font-size: 3.3333333333vw;
    line-height: 1.8;
  }
}
.contact__item dd {
  font-size: min(1.8421052632vw, 21px);
  font-weight: 500;
  line-height: 1.5238095238;
}
@media screen and (max-width: 768px) {
  .contact__item dd {
    font-size: 3.2vw;
    line-height: 2.0833333333;
  }
}
.contact__item dd a {
  color: #000;
  text-decoration: none;
}
.contact__note {
  margin-top: min(2.8070175439vw, 32px);
  font-size: min(1.1403508772vw, 13px);
  line-height: 1.5384615385;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .contact__note {
    margin-top: 2.1333333333vw;
    font-size: 2.6666666667vw;
    line-height: 1.5;
  }
}
.contact__note li {
  padding-left: 1em;
  text-indent: -1em;
}

.footer__inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: min(83.3333333333vw, 950px);
  height: min(4.649122807vw, 53px);
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .footer__inner {
    width: 89.3333333333vw;
    height: 11.7333333333vw;
  }
}
.footer__inner small {
  font-size: min(1.1403508772vw, 13px);
  line-height: 1.5384615385;
}
@media screen and (max-width: 768px) {
  .footer__inner small {
    font-size: 2.6666666667vw;
    line-height: 1.35;
  }
}