/* Common */
:root {
  --pc: 1440px;
  --pcvw: calc(100vw / 1440);
  --spvw: calc(100vw / 750);
  --color-white: #fff;
  --color-primary: #33b8a9;
  --color-green: #99c9bd;
  --color-green2: #cde6e3;
  --color-green3: #cbe7e3;
  --color-green4: #98d6ce;
  --color-green5: #e0f1ee;
  --color-black: #333;
  --color-red: #da2621;
  --color-pink: #fce4dc;
}

html,
body {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--color-black);
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

a {
  text-decoration: none;
}

body {
  font-size: 1.6rem;
  line-height: 1.3;
}

img {
  width: 100%;
  height: auto;
}

.bg {
  position: fixed;
  background: var(--color-green3);
  width: 100%;
  height: 100vh;
}

.wrapper {
  position: relative;
  max-width: 750px;
  margin: 0 auto;
  width: 100%;
  z-index: 1;
  background: var(--color-white);
  overflow: hidden;
}

@media screen and (min-width: 751px) {
  .wrapper {
    max-width: 375px;
  }
}

.bg-left,
.bg-right {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 36.975%;
  z-index: 1;
  overflow: hidden;
}

.bg-left figure img,
.bg-right figure img {
  display: none;
}

@media screen and (min-width: 751px) {
  .bg-left,
  .bg-right {
    display: flex;
    justify-content: center;
  }

  .bg-right {
    left: unset;
    right: 0;
  }

  .bg-left figure,
  .bg-right figure {
    position: relative;
    margin-top: 17.2222vh;
    width: calc(var(--spvw) * 200);
    height: calc(var(--spvw) * 200);
  }

  .bg-left figure img,
  .bg-right figure img {
    position: relative;
  }

  .bg-left figure::before,
  .bg-right figure::before {
    position: absolute;
    content: "";
  }

  .bg-left figure::before {
    top: -105%;
    left: -77%;
    border-radius: 50%;
    width: calc(var(--spvw) * 300);
    height: calc(var(--spvw) * 300);
    box-shadow: inset 0 0 0 calc(var(--spvw) * 32) var(--color-green5);
  }

  .bg-right figure::before {
    bottom: -98%;
    right: -80%;
    border-radius: 50%;
    width: calc(var(--spvw) * 300);
    height: calc(var(--spvw) * 300);
    box-shadow: inset 0 0 0 calc(var(--spvw) * 32) var(--color-green5);
    z-index: 0;
  }
}

@media screen and (min-width: 1000px) {
  .bg-left figure img,
  .bg-right figure img {
    display: block;
  }
}

@media screen and (min-width: 1025px) {
  .bg-left figure,
  .bg-right figure {
    margin-top: 17.2222vh;
    width: calc(var(--pcvw) * 400);
    height: calc(var(--pcvw) * 400);
  }

  .bg-left figure img,
  .bg-right figure img {
    position: relative;
  }

  .bg-left figure::before,
  .bg-right figure::before {
    position: absolute;
    content: "";
  }

  .bg-left figure::before {
    top: -101%;
    left: -78%;
    border-radius: 50%;
    width: calc(var(--pcvw) * 600);
    height: calc(var(--pcvw) * 600);
    box-shadow: inset 0 0 0 calc(var(--pcvw) * 64) var(--color-green5);
  }

  .bg-right figure::before {
    bottom: -106%;
    right: -74%;
    border-radius: 50%;
    width: calc(var(--pcvw) * 600);
    height: calc(var(--pcvw) * 600);
    box-shadow: inset 0 0 0 calc(var(--pcvw) * 64) var(--color-green5);
    z-index: 0;
  }
}

.bg-left img,
.bg-right img {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.bg-show .bg-left img,
.bg-show .bg-right img {
  opacity: 1;
}

.content__visual.kv {
  position: relative;
}

.content__visual::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--spvw) * 500);
  background-color: var(--color-primary);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 91%);
  z-index: 0;
}

@media screen and (min-width: 751px) {
  .content__visual::before {
    height: 290px;
  }
}

.content__visual--inner {
  padding-top: calc(var(--spvw) * 60);
  position: relative;
  z-index: 1;
}

@media screen and (min-width: 751px) {
  .content__visual--inner {
    padding-top: 60px;
  }
}

.content__visual-head {
  padding: 0 calc(var(--spvw) * 64);
}

@media screen and (min-width: 751px) {
  .content__visual-head {
    padding: 0 32px;
  }
}

.content__visual--inner h1 {
  width: calc(var(--spvw) * 622);
}

@media screen and (min-width: 751px) {
  .content__visual--inner h1 {
    width: 331px;
  }
}

.content__visual-wrapper {
  position: relative;
}

.content__visual-rabbit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content__visual-img {
  margin-top: calc(var(--spvw) * -126);
  width: calc(var(--spvw) * 430);
  margin-top: calc(var(--spvw) * -116);
  margin-left: calc(var(--spvw) * -20);
}

@media screen and (min-width: 751px) {
  .content__visual-img {
    margin-left: -10px;
    margin-top: -58px;
    width: 215px;
  }
}

.content__visual-img--grass {
  position: absolute;
  content: "";
  width: calc(var(--spvw) * 522);
  height: calc(var(--spvw) * 198);
  bottom: calc(var(--spvw) * 34);
}

@media screen and (min-width: 751px) {
  .content__visual-img--grass {
    position: absolute;
    content: "";
    width: 261px;
    height: 99px;
    bottom: 17px;
  }
}

.content__visual-flower {
  position: absolute;
  content: "";
  right: calc(var(--spvw) * 33);
  width: calc(var(--spvw) * 184);
  height: calc(var(--spvw) * 162);
  bottom: calc(var(--spvw) * 17);
  z-index: 1;
}

@media screen and (min-width: 751px) {
  .content__visual-flower {
    right: 16px;
    width: 92px;
    height: 81px;
    bottom: 8px;
  }
}

.content__desc {
  display: inline-block;
  margin-top: calc(var(--spvw) * 4);
  font-weight: 700;
  font-size: calc(var(--spvw) * 30);
  text-align: center;
  color: var(--color-white);
}

@media screen and (min-width: 751px) {
  .content__desc {
    margin-top: 2px;
    font-size: 15px;
  }
}

.content__visual-box {
  position: relative;
  margin-top: calc(var(--spvw) * -48);
  display: flex;
  height: calc(var(--spvw) * 480);
}

@media screen and (min-width: 751px) {
  .content__visual-box {
    margin-top: -24px;
    height: 240px;
  }
}

.content__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  content: "";
}

.content__box--01 {
  width: calc(var(--spvw) * 468);
  height: calc(var(--spvw) * 480);
}

@media screen and (min-width: 751px) {
  .content__box--01 {
    width: 234px;
    height: 240px;
  }
}

.content__box--02 {
  width: calc(var(--spvw) * 480);
  height: calc(var(--spvw) * 480);
}

@media screen and (min-width: 751px) {
  .content__box--02 {
    width: 240px;
    height: 240px;
  }
}

.content__box--product {
  top: calc(var(--spvw) * -40);
  left: calc(var(--spvw) * 32);
  width: calc(var(--spvw) * 160);
  z-index: 1;
}

@media screen and (min-width: 751px) {
  .content__box--product {
    top: -20px;
    left: 16px;
    width: 80px;
  }
}

.content__box:last-child {
  right: calc(var(--spvw) * 14);
}

@media screen and (min-width: 751px) {
  .content__box:last-child {
    right: 7px;
  }
}

.content__box figcaption {
  color: var(--color-primary);
  font-size: calc(var(--spvw) * 24);
  font-weight: 700;
  margin-top: calc(var(--spvw) * -26);
  margin-left: calc(var(--spvw) * 16);
}

@media screen and (min-width: 751px) {
  .content__box figcaption {
    font-size: 12px;
    font-weight: 700;
    margin-top: -13px;
    margin-left: 8px;
  }
}

.content__text {
  display: flex;
  align-items: center;
  width: fit-content;
  padding: 0 calc(var(--spvw) * 12);
  text-align: center;
  margin: calc(var(--spvw) * 28) auto 0;
  height: calc(var(--spvw) * 56);
  font-size: calc(var(--spvw) * 32);
  line-height: calc(var(--spvw) * 32);
  color: var(--color-primary);
  border-radius: calc(var(--spvw) * 6);
  border: 1px solid var(--color-primary);
  font-weight: 500;
}

@media screen and (min-width: 751px) {
  .content__text {
    padding: 0 6px;
    margin-top: 14px;
    height: 28px;
    font-size: 16px;
    line-height: 16px;
    border-radius: 3px;
    border: 1px solid var(--color-primary);
  }
}

/* Slogan */
.content__slogan {
  position: relative;
  margin-top: calc(var(--spvw) * 48);
  padding: 0 calc(var(--spvw) * 32);
}

@media screen and (min-width: 751px) {
  .content__slogan {
    margin-top: 24px;
    padding: 0 16px;
  }
}

.content__slogan::after {
  position: absolute;
  content: "";
  background-image: url("../images/logo_thumb.png");
  background-repeat: no-repeat;
  background-size: contain;
  top: calc(var(--spvw) * -6);
  right: calc(var(--spvw) * 40);
  width: calc(var(--spvw) * 80);
  height: calc(var(--spvw) * 80);
  width: calc(var(--spvw) * 368);
  height: calc(var(--spvw) * 408);
  z-index: 0;
}

@media screen and (min-width: 751px) {
  .content__slogan::after {
    top: -12px;
    right: 20px;
    width: 40px;
    height: 40px;
    width: 194px;
    height: 204px;
  }
}

.content__slogan-text {
  position: relative;
  font-size: calc(var(--spvw) * 32);
  text-align: center;
  font-weight: 500;
  line-height: 1.9;
  z-index: 1;
}

@media screen and (min-width: 751px) {
  .content__slogan-text {
    font-size: 16px;
  }
}

.content__slogan-text--lg {
  display: block;
  font-size: calc(var(--spvw) * 36);
  margin: calc(var(--spvw) * 22) 0;
}

@media screen and (min-width: 751px) {
  .content__slogan-text--lg {
    font-size: 18px;
    margin: 11px 0;
  }
}

/* Section 01 */
.section-01__wrapper-top {
  margin-top: calc(var(--spvw) * 94);
  position: relative;
  display: flex;
  padding-top: calc(var(--spvw) * 72);
}

@media screen and (min-width: 751px) {
  .section-01__wrapper-top {
    margin-top: 47px;
    padding-top: 36px;
  }
}

.section-01 h2 {
  position: absolute;
  content: "";
  top: calc(var(--spvw) * 12);
  right: 11.7%;
}

@media screen and (min-width: 751px) {
  .section-01 h2 {
    top: 6px;
  }
}

.section-01__img {
  max-width: calc(var(--spvw) * 702);
  border-top-right-radius: calc(var(--spvw) * 80);
  border-bottom-right-radius: calc(var(--spvw) * 80);
  overflow: hidden;
}

@media screen and (min-width: 751px) {
  .section-01__img {
    max-width: 351px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    overflow: hidden;
  }
}

.section-01__img--leaf {
  position: absolute;
  content: "";
  top: 63.2%;
  left: 0;
  width: calc(var(--spvw) * 320);
  height: calc(var(--spvw) * 380);
}

@media screen and (min-width: 751px) {
  .section-01__img--leaf {
    width: 160px;
    height: 190px;
  }
}

.section-01__img--text {
  border-radius: 0;
  max-width: calc(var(--spvw) * 140);
}

@media screen and (min-width: 751px) {
  .section-01__img--text {
    max-width: 70px;
  }
}

.section-01__content {
  margin-top: calc(var(--spvw) * 100);
  padding: 0 calc(var(--spvw) * 64);
  letter-spacing: 0.05em;
  line-height: 1.9;
  font-size: calc(var(--spvw) * 32);
}

@media screen and (min-width: 751px) {
  .section-01__content {
    margin-top: 50px;
    padding: 0 32px;
    font-size: 16px;
  }
}

/* Section 02 */
.section-02 {
  position: relative;
  padding: 0 calc(var(--spvw) * 64);
}

@media screen and (min-width: 751px) {
  .section-02 {
    padding: 0 32px;
  }
}

.section-02__top {
  margin-top: calc(var(--spvw) * 100);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spvw) * 12);
}

@media screen and (min-width: 751px) {
  .section-02__top {
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
}

.section-02__box {
  position: relative;
  width: calc(var(--spvw) * 268);
  height: calc(var(--spvw) * 180);
  border: calc(var(--spvw) * 4) solid var(--color-red);
  border-radius: calc(var(--spvw) * 20);
  text-align: center;
  color: var(--color-red);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 751px) {
  .section-02__box {
    width: 134px;
    height: 90px;
    border-width: 2px;
    border-radius: 10px;
  }
}

.section-02__box span {
  font-family: "Roboto", sans-serif;
  position: absolute;
  top: calc(var(--spvw) * -12);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-white);
  line-height: 1.1;
  font-size: calc(var(--spvw) * 24);
  font-weight: 500;
  padding: 0 calc(var(--spvw) * 12);
  white-space: nowrap;
  letter-spacing: -0.03em;
}

@media screen and (min-width: 751px) {
  .section-02__box span {
    top: -6px;
    background: var(--color-white);
    font-size: 12px;
    padding: 0 6px;
  }
}

.section-02__box p {
  margin: 0;
  font-weight: 700;
  font-size: calc(var(--spvw) * 48);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

@media screen and (min-width: 751px) {
  .section-02__box p {
    font-size: 24px;
  }
}

.multiple {
  position: relative;
  width: calc(var(--spvw) * 60);
  height: calc(var(--spvw) * 60);
}

@media screen and (min-width: 751px) {
  .multiple {
    width: 30px;
    height: 30px;
  }
}

.multiple::before,
.multiple::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--spvw) * 60);
  height: calc(var(--spvw) * 4);
  background: var(--color-red);
  transform-origin: center;
}

@media screen and (min-width: 751px) {
  .multiple::before,
  .multiple::after {
    width: 30px;
    height: 2px;
  }
}

.multiple::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.multiple::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.section-02__list {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: calc(var(--spvw) * 60);
  gap: calc(var(--spvw) * 126);
}

@media screen and (min-width: 751px) {
  .section-02__list {
    margin-top: 30px;
    gap: 63px;
  }
}

.section-02__item:not(:last-child) {
  position: relative;
}

.section-02__item:not(:last-child)::after {
  position: absolute;
  content: "";
  bottom: calc(var(--spvw) * -64);
  left: 0;
  width: 100%;
  height: calc(var(--spvw) * 6);
  background-image: url("../images/dot.png");
  background-size: contain;
}

@media screen and (min-width: 751px) {
  .section-02__item:not(:last-child)::after {
    bottom: -32px;
    height: 3px;
  }
}

.section-02__head {
  display: flex;
  gap: calc(var(--spvw) * 20);
}

@media screen and (min-width: 751px) {
  .section-02__head {
    display: flex;
    gap: 10px;
  }
}

.section-02__head h2 {
  color: var(--color-red);
  font-size: calc(var(--spvw) * 52);
  line-height: 1.2;
  letter-spacing: 0.05em;
}

@media screen and (min-width: 751px) {
  .section-02__head h2 {
    font-size: 26px
  }
}

.section-02__icon {
  width: calc(var(--spvw) * 140);
  aspect-ratio: 1;
}

@media screen and (min-width: 751px) {
  .section-02__icon {
    width: 70px;
    aspect-ratio: 1;
  }
}

.section-02__icon--sm {
  width: calc(var(--spvw) * 74);
}

@media screen and (min-width: 751px) {
  .section-02__icon--sm {
    width: 37px;
  }
}

.section-02__img--leaf {
  position: absolute;
  content: "";
  right: 0;
  top: calc(var(--spvw) * 96);
  width: calc(var(--spvw) * 400);
}

@media screen and (min-width: 751px) {
  .section-02__img--leaf {
    top: 48px;
    width: 200px;
  }
}

.section-02__title span {
  color: var(--color-red);
  font-size: calc(var(--spvw) * 28);
  font-weight: 700;
  line-height: 1.4;
}

@media screen and (min-width: 751px) {
  .section-02__title span {
    font-size: 14px;
  }
}

.section-02__title span.emphasize {
  position: relative;
  display: inline-block;
  font-size: calc(var(--spvw) * 38);
  font-weight: 700;
  line-height: 1.9;
  z-index: 1;
  background: linear-gradient(transparent 60%, var(--color-pink) 60%);
}

@media screen and (min-width: 751px) {
  .section-02__title span.emphasize {
    font-size: 19px;
  }
}

.section-02__title span.same {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--spvw) * 20);
  width: calc(var(--spvw) * 24);
  margin-inline: calc(var(--spvw) * 8);
}

@media screen and (min-width: 751px) {
  .section-02__title span.same {
    height: 10px;
    width: 12px;
    margin-inline: 4px;
  }
}

.section-02__title .same::before,
.section-02__title .same::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(var(--spvw) * 2);
  background: var(--color-red);
}

@media screen and (min-width: 751px) {
  .section-02__title .same::before,
  .section-02__title .same::after {
    height: 1px;
  }
}

.section-02__title .same::before {
  top: calc(var(--spvw) * 2);
}

@media screen and (min-width: 751px) {
  .section-02__title .same::before {
    top: 1px;
  }
}

.section-02__title .same::after {
  bottom: calc(var(--spvw) * 6);
}

@media screen and (min-width: 751px) {
  .section-02__title .same::after {
    bottom: 3px;
  }
}

.section-02__title span.same {
  font-size: calc(var(--spvw) * 38);
  line-height: 1.9;
}

@media screen and (min-width: 751px) {
  .section-02__title span.same {
    font-size: 19px;
  }
}

.section-02__desc {
  font-size: calc(var(--spvw) * 32);
  line-height: 1.7;
  letter-spacing: 0.05em;
}

@media screen and (min-width: 751px) {
  .section-02__desc {
    font-size: 16px;
  }
}

.section-02__desc--mt12 {
  margin-top: calc(var(--spvw) * 24);
}

@media screen and (min-width: 751px) {
  .section-02__desc--mt12 {
    margin-top: 12px;
  }
}

.section-02__box2 {
  position: relative;
  margin-top: calc(var(--spvw) * 68);
  border: calc(var(--spvw) * 4) solid var(--color-red);
  border-radius: calc(var(--spvw) * 20);
  padding: calc(var(--spvw) * 30) calc(var(--spvw) * 45);
}

@media screen and (min-width: 751px) {
  .section-02__box2 {
    margin-top: 34px;
    border-width: 2px;
    border-radius: 10px;
    padding: 15px 22px;
  }
}

.section-02__box2-head {
  color: var(--color-red);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-02__box2-head {
  font-size: calc(var(--spvw) * 44);
  line-height: 1.25;
}

@media screen and (min-width: 751px) {
  .section-02__box2-head {
    font-size: 22px;
  }
}

.section-02__img--apple {
  position: absolute;
  content: "";
  top: calc(var(--spvw) * 4);
  right: calc(var(--spvw) * 16);
  margin-top: calc(var(--spvw) * -36);
  flex-shrink: 0;
  width: calc(var(--spvw) * 188);
  height: calc(var(--spvw) * 170);
}

@media screen and (min-width: 751px) {
  .section-02__img--apple {
    top: 2px;
    right: 8px;
    margin-top: -18px;
    width: 94px;
    height: 85px;
  }
}

.section-02__box2 .section-02__desc {
  margin-top: calc(var(--spvw) * 18);
}

@media screen and (min-width: 751px) {
  .section-02__box2 .section-02__desc {
    margin-top: 9px;
  }
}

.section-02__list--02 {
  gap: 0;
  border: calc(var(--spvw) * 2) solid var(--color-red);
  border-radius: calc(var(--spvw) * 20);
  overflow: hidden;
}

@media screen and (min-width: 751px) {
  .section-02__list--02 {
    border-width: 1px;
    border-radius: 10px;
  }
}

.section-02__list--02 .section-02__item:not(:last-child)::after {
  bottom: calc(var(--spvw) * -35);
}

@media screen and (min-width: 751px) {
  .section-02__list--02 .section-02__item:not(:last-child)::after {
    bottom: -18px;
  }
}

.section-02__title-head {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--spvw) * 40);
  font-weight: 700;
  color: var(--color-white);
  background-color: var(--color-red);
  height: calc(var(--spvw) * 100);
}

@media screen and (min-width: 751px) {
  .section-02__title-head {
    font-size: 20px;
    height: 50px;
  }
}

.section-02__wrapper-item {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spvw) * 68);
  padding: calc(var(--spvw) * 32) calc(var(--spvw) * 46);
}

@media screen and (min-width: 751px) {
  .section-02__wrapper-item {
    gap: 34px;
    padding: 16px 23px;
  }
}

.section-02__list--02 .section-02__head h2 {
  color: var(--color-red);
  font-size: calc(var(--spvw) * 44);
  line-height: 1.6;
  font-weight: 500;
}

@media screen and (min-width: 751px) {
  .section-02__list--02 .section-02__head h2 {
    font-size: 22px;
  }
}

/* Section 03 */
.section-03 {
  position: relative;
  padding: calc(var(--spvw) * 80) calc(var(--spvw) * 64);
}

@media screen and (min-width: 751px) {
  .section-03 {
    padding: 40px 32px;
  }
}

.section-03::before {
  position: absolute;
  content: "";
  background-image: url("../images/dot_02.png");
  background-size: 100% auto;
  background-repeat:repeat;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.section-03__mv {
  position: relative;
}

.section-03__img {
  width: calc(var(--spvw) * 544);
  height: calc(var(--spvw) * 96);
  margin: 0 auto;
}

@media screen and (min-width: 751px) {
  .section-03__img {
    width: 272px;
    height: 48px;
  }
}

.section-03 h2 {
  text-align: center;
  font-size: calc(var(--spvw) * 64);
  color: var(--color-primary);
  font-weight: 700;
  line-height: 1.2;
}

@media screen and (min-width: 751px) {
  .section-03 h2 {
    font-size: 32px;
  }
}

.section-03__group-img {
  margin-top: calc(var(--spvw) * 20);
  display: flex;
}

@media screen and (min-width: 751px) {
  .section-03__group-img {
    margin-top: 10px;
  }
}

.section-03 .section-03__img--rabbit01 {
  width: calc(var(--spvw) * 244);
  height: calc(var(--spvw) * 310);
}

@media screen and (min-width: 751px) {
  .section-03 .section-03__img--rabbit01 {
    width: 122px;
    height: 155px;
  }
}

.section-03 .section-03__img--rabbit02 {
  align-self: flex-end;
  width: calc(var(--spvw) * 284);
  height: calc(var(--spvw) * 275);
}

@media screen and (min-width: 751px) {
  .section-03 .section-03__img--rabbit02 {
    width: 142px;
    height: 138px;
  }
}

.section-03__img--rabbit02 figcaption {
  font-size: calc(var(--spvw) * 18);
  line-height: 1.4;
  text-align: right;
}

@media screen and (min-width: 751px) {
  .section-03__img--rabbit02 figcaption {
    font-size: 9px;
  }
}
.section-03__img--bg {
	position:absolute;
	left:50%;
	transform: translate(-50%)!important;
  width: calc(var(--spvw) * 688);
  height: calc(var(--spvw) * 342);
}
@media screen and (min-width: 751px) {
  .section-03__img--bg {
    width: 344px;
    height: 171px;
  }
}

.section-03__intro {
  margin-top: calc(var(--spvw) * 36);
  font-size: calc(var(--spvw) * 32);
  line-height: 1.7;
  text-align: center;
  position:relative;
}

@media screen and (min-width: 751px) {
  .section-03__intro {
    margin-top: 18px;
    font-size: 16px;
  }
}

.section-03__intro .strong {
  font-weight: 500;
}

.section-03__list {
  position: relative;
  margin-top: calc(var(--spvw) * 34);
  border-radius: calc(var(--spvw) * 20);
  border: calc(var(--spvw) * 2) solid var(--color-primary);
  overflow: hidden;
}

@media screen and (min-width: 751px) {
  .section-03__list {
    border-width: 1px;
    margin-top: 17px;
    border-radius: 10px;
  }
}

.section-03__title-head {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--spvw) * 40);
  font-weight: 700;
  color: var(--color-white);
  background-color: var(--color-primary);
  height: calc(var(--spvw) * 80);
}

@media screen and (min-width: 751px) {
  .section-03__title-head {
    font-size: 20px;
    height: 40px;
  }
}

.section-03__wrapper-item {
  display: flex;
  background-color: var(--color-white);
  flex-direction: column;
  gap: calc(var(--spvw) * 20);
  padding: calc(var(--spvw) * 40) calc(var(--spvw) * 48) calc(var(--spvw) * 30);
}

@media screen and (min-width: 751px) {
  .section-03__wrapper-item {
    gap: 10px;
    padding: 20px 23px 15px;
  }
}

.section-03__item {
  display: flex;
  align-items: center;
  gap: calc(var(--spvw) * 16);
}

@media screen and (min-width: 751px) {
  .section-03__item {
    gap: 8px;
  }
}

.section-03__num {
  flex-shrink: 0;
  width: calc(var(--spvw) * 52);
  height: calc(var(--spvw) * 52);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: calc(var(--spvw) * 30);
  color: var(--color-white);
  border-radius: 50%;
  background-color: var(--color-primary);
}

@media screen and (min-width: 751px) {
  .section-03__num {
    width: 26px;
    height: 26px;
    font-size: 15px;
  }
}

.section-03__text {
  font-size: calc(var(--spvw) * 32);
  font-weight: 600;
}

@media screen and (min-width: 751px) {
  .section-03__text {
    font-size: 16px;
  }
}

.section-03__copy {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(var(--spvw) * 20);
  padding: calc(var(--spvw) * 18);
  color: var(--color-white);
  font-size: calc(var(--spvw) * 40);
  background-color: var(--color-red);
  border-radius: calc(var(--spvw) * 10);
}

@media screen and (min-width: 751px) {
  .section-03__copy {
    margin-top: 10px;
    padding: 9px;
    font-size: 20px;
    border-radius: 5px;
    border-width: 5px;
  }
}

.section-03__copy::after {
  position: absolute;
  content: "";
  right: calc(var(--spvw) * 36);
  width: calc(var(--spvw) * 30);
  height: calc(var(--spvw) * 24);
  background-image: url("../images/icon_copy.png");
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}

@media screen and (min-width: 751px) {
  .section-03__copy::after {
    right: 18px;
    width: 15px;
    height: 12px;
  }
}

.section-03__info {
  text-align: center;
  font-size: calc(var(--spvw) * 28);
}

@media screen and (min-width: 751px) {
  .section-03__info {
    font-size: 14px;
  }
}

.section-03__info span {
  font-size: calc(var(--spvw) * 36);
  font-weight: 600;
}

@media screen and (min-width: 751px) {
  .section-03__info span {
    font-size: 18px;
  }
}

.section-03__note {
  position: relative;
  background-color: var(--color-white);
  margin-top: calc(var(--spvw) * 32);
  padding: calc(var(--spvw) * 32) calc(var(--spvw) * 26);
  text-align: center;
  font-size: calc(var(--spvw) * 32);
  border-radius: calc(var(--spvw) * 20);
  border: calc(var(--spvw) * 2) solid var(--color-primary);
  font-weight: 700;
  line-height: 1.7;
}

@media screen and (min-width: 751px) {
  .section-03__note {
    margin-top: 16px;
    padding: 16px 13px;
    font-size: 16px;
    border-radius: 10px;
    border-width: 1px;
  }
}

.section-03__note span {
  color: var(--color-red);
}

/* Footer */
.footer {
  margin-top: calc(var(--spvw) * 80);
  transition: padding-bottom 0.4s ease;
}

@media screen and (min-width: 751px) {
  .footer {
    margin-top: 40px;
  }
}

.footer__img {
  max-width: calc(var(--spvw) * 750);
  width: 100%;
  display: block;
  margin: 0 auto;
}

@media screen and (min-width: 751px) {
  .footer__img {
    max-width: 375px;
  }
}

.footer__img--instagram {
  max-width: calc(var(--spvw) * 460);
}

@media screen and (min-width: 751px) {
  .footer__img--instagram {
    max-width: 230px;
  }
}

.footer__content {
  position: relative;
}

.footer__content .footer__overview,
.footer__content .footer__privacy,
.footer__content .footer__company {
  display: block;
  position: absolute;
  content: "";
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  bottom: 56%;
}

.footer__content .footer__overview {
  width: 15.8%;
  height: 6.6%;
  left: 24%;
}

.footer__content .footer__privacy {
  width: 30.8%;
  height: 6.6%;
  left: 45%;
}

.footer__content .footer__company {
  top: 9%;
  bottom: unset;
  left: 50%;
  transform: translateX(-50%);
  width: 23%;
  height: 20%;
}

/* Dialog */
.wrapper__dialog {
  text-decoration: none;
  color: var(--color-white);
  line-height: 1.4;
  position: fixed;
  bottom: calc(var(--pcvw) * 40);
  left: calc(var(--pcvw) * 64);
  right: calc(var(--pcvw) * 64);
  z-index: 30;
  transition: all 0.5s ease;
}

.wrapper__dialog:hover {
  opacity: 0.7;
}

@media screen and (min-width: 751px) {
  .wrapper__dialog {
    width: 343px;
    margin: 0 auto;
    bottom: 20px;
    left: 32px;
    right: 32px;
  }
}

.wrapper__dialog.is-hidden {
  opacity: 0;
  transform: translateY(100%);
  visibility: hidden;
  pointer-events: none;
}

.dialog {
  position: relative;
  display: flex;
  background-color: var(--color-primary);
  border-radius: calc(var(--spvw) * 10);
  padding: calc(var(--spvw) * 14) calc(var(--spvw) * 20) calc(var(--spvw) * 16)
    calc(var(--spvw) * 166);
}

@media screen and (min-width: 751px) {
  .dialog {
    border-radius: 5px;
    padding: 7px 10px 8px 83px;
  }
}

.dialog__img-close {
  cursor: pointer;
  position: absolute;
  content: "";
  top: calc(var(--spvw) * -20);
  right: calc(var(--spvw) * -20);
  bottom: calc(var(--spvw) * 26);
  width: calc(var(--spvw) * 48);
  height: calc(var(--spvw) * 48);
  transition: all .3s ease;
}

.dialog__img-close:hover {
  opacity: 0.7;
}

@media screen and (min-width: 751px) {
  .dialog__img-close {
    position: absolute;
    content: "";
    top: -11px;
    right: -11px;
    bottom: 13px;
    width: 24px;
    height: 24px;
  }
}

.dialog__img-banner {
  position: absolute;
  content: "";
  left: 0;
  bottom: calc(var(--spvw) * 38);
  width: calc(var(--spvw) * 158);
  height: calc(var(--spvw) * 200);
}

@media screen and (min-width: 751px) {
  .dialog__img-banner {
    bottom: 19px;
    width: 79px;
    height: 100px;
  }
}

.dialog__img-banner figcaption {
  margin-top: calc(var(--spvw) * -8);
  text-align: center;
  color: var(--color-white);
  font-size: calc(var(--spvw) * 18);
  line-height: 1.4;
}

@media screen and (min-width: 751px) {
  .dialog__img-banner figcaption {
    margin-top: -4px;
    font-size: 9px;
  }
}

.dialog__text {
  position: relative;
  color: var(--color-white);
  font-size: calc(var(--spvw) * 26);
  font-weight: 700;
  line-height: 1.4;
}

@media screen and (min-width: 751px) {
  .dialog__text {
    font-size: 13px;
  }
}

.dialog__text span {
  font-size: calc(var(--spvw) * 32);
}

@media screen and (min-width: 751px) {
  .dialog__text span {
    font-size: 16px;
  }
}

.dialog__img-title {
  position: relative;
  max-width: calc(var(--spvw) * 476);
  width: 100%;
  height: calc(var(--spvw) * 150);
}

.dialog__img-title::before {
  position: absolute;
  content: "";
  top: 0;
  right: calc(var(--spvw) * -15);
  background-image: url("../images/decor.svg");
  width: calc(var(--spvw) * 20);
  height: calc(var(--spvw) * 24);
  background-repeat: no-repeat;
  background-size: 100%;
}

.dialog__img-title::after {
  position: absolute;
  content: "";
  bottom: 7%;
  right: 17%;
  background-image: url("../images/arrow_right.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  width: calc(var(--spvw) * 16);
  height: calc(var(--spvw) * 28);
}

@media screen and (min-width: 751px) {
  .dialog__img-title {
    max-width: 238px;
    height: 75px;
  }

  .dialog__img-title::before {
    right: -9px;
    width: 10px;
    height: 12px;
  }

  .dialog__img-title::after {
    width: 8px;
    height: 14px;
  }
}

.dialog__img {
  max-width: calc(var(--spvw) * 480);
  width: 100%;
  height: calc(var(--spvw) * 56);
}

@media screen and (min-width: 751px) {
  .dialog__img {
    max-width: 240px;
    height: 28px;
  }
}

.intro {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 50px;
  background-color: var(--color-green);
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.intro.hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.text-main {
  position: relative;
}

.text-main img.text-l {
  width: calc(var(--pcvw) * 137);
  height: calc(var(--pcvw) * 233);
}
.text-main img.text-o {
  width: calc(var(--pcvw) * 188);
  height: calc(var(--pcvw) * 189);
}
.text-main img.text-v {
  width: calc(var(--pcvw) * 178);
  height: calc(var(--pcvw) * 182);
}
.text-main img.text-i {
  width: calc(var(--pcvw) * 39);
  height: calc(var(--pcvw) * 185);
  margin: 0 calc(var(--pcvw) * 8) calc(var(--pcvw) * -3);
}
.text-main img.text-s {
  width: calc(var(--pcvw) * 154);
  height: calc(var(--pcvw) * 189);
  margin-bottom: calc(var(--pcvw) * -6);
}
.text-main img.text-i2 {
  width: calc(var(--pcvw) * 55);
  height: calc(var(--pcvw) * 192);
  margin: 0 calc(var(--pcvw) * 8) 0 calc(var(--pcvw) * 10);
}
.text-main img.text-o2 {
  width: calc(var(--pcvw) * 163);
  height: calc(var(--pcvw) * 163);
}

.text-main img.text-n {
  width: calc(var(--pcvw) * 164);
  height: calc(var(--pcvw) * 185);
  margin-left: calc(var(--pcvw) * 10);
}

.text-main img.text-circle {
  width: calc(var(--pcvw) * 45);
  height: calc(var(--pcvw) * 45);
}

.text-main img.text-circle-half {
  width: calc(var(--pcvw) * 48);
  height: calc(var(--pcvw) * 48);
}

.text-main img.text-circle-half-01 {
  width: calc(var(--pcvw) * 61);
  height: calc(var(--pcvw) * 65);
}

.text-main img.text-circle-half-02 {
  width: calc(var(--pcvw) * 61);
  height: calc(var(--pcvw) * 65);
}

@media screen and (min-width: 1441px) {
  .text-main img.text-l {
    width: 137px;
    height: 233px;
  }
  .text-main img.text-o {
    width: 188px;
    height: 189px;
  }
  .text-main img.text-v {
    width: 178px;
    height: 182px;
  }
  .text-main img.text-i {
    width: 39px;
    height: 185px;
    margin: 0 8px -3px;
  }
  .text-main img.text-s {
    width: 154px;
    height: 189px;
    margin-bottom: -6px;
  }
  .text-main img.text-i2 {
    width: 55px;
    height: 192px;
    margin: 0 8px 0 10px;
  }
  .text-main img.text-o2 {
    width: 163px;
    height: 163px;
  }

  .text-main img.text-n {
    width: 164px;
    height: 185px;
    margin-left: 10px;
  }

  .text-main img.text-circle {
    width: 45px;
    height: 45px;
  }

  .text-main img.text-circle-half {
    width: 48px;
    height: 48px;
  }

  .text-main img.text-circle-half-01 {
    width: 61px;
    height: 65px;
  }

  .text-main img.text-circle-half-02 {
    width: 61px;
    height: 65px;
  }
}

.text-main img.text-circle {
  top: 0;
  left: 45.3%;
}

.text-main img.text-circle-half {
  position: absolute;
  top: calc(var(--spvw) * 1);
  left: 65%;
}

.text-main img.text-circle-half-01 {
  top: 2.8%;
  right: 22%;
}

.text-main img.text-circle-half-02 {
  top: 2.8%;
  right: 16.9%;
}

/* Text jp */
.text-jp {
  position: absolute;
  top: calc(var(--pcvw) * -34);
  left: calc(var(--pcvw) * 53);
}

.text-jp img:nth-child(1) {
  width: calc(var(--pcvw) * 56);
  height: calc(var(--pcvw) * 60);
}

.text-jp img:nth-child(2) {
  width: calc(var(--pcvw) * 62);
  height: calc(var(--pcvw) * 63);
}

.text-jp img:nth-child(3) {
  width: calc(var(--pcvw) * 64);
  height: calc(var(--pcvw) * 63);
}

.text-jp img:nth-child(4) {
  width: calc(var(--pcvw) * 43);
  height: calc(var(--pcvw) * 44);
}

.text-jp img:nth-child(5) {
  width: calc(var(--pcvw) * 60);
  height: calc(var(--pcvw) * 57);
}

@media screen and (min-width: 1441px) {
  .text-jp {
    top: -34px;
    left: 53px;
  }

  .text-jp img:nth-child(1) {
    width: 56px;
    height: 60px;
  }

  .text-jp img:nth-child(2) {
    width: 62px;
    height: 63px;
  }

  .text-jp img:nth-child(3) {
    width: 64px;
    height: 63px;
  }

  .text-jp img:nth-child(4) {
    width: 43px;
    height: 44px;
  }

  .text-jp img:nth-child(5) {
    width: 60px;
    height: 57px;
  }
}

/* Fade in animation */
.js-fadeIn {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.js-fadeIn.is-show {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--delay, 0s);
}

/* Zoom-in (rabbit) */
.js-zoomIn {
  opacity: 0;
  transform: scale(0.45);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.js-zoomIn.is-show {
  opacity: 1;
  transform: scale(1);
  transition-delay: var(--delay, 0s);
}

/* Rabbit */
.wrapper-rabbit {
  display: none;
}

@media screen and (min-width: 1000px) {
  .wrapper-rabbit {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
  }

  .rabbit {
    position: absolute;
    top: 50%;
    left: 0;
    mask-image: url("../images/rabbit_frame.png");
    width: calc(var(--pcvw) * 144);
    aspect-ratio: 1;
    mask-size: 400% 100%;
    mask-position: 0 0;
    background: var(--color-green4);
    overflow: hidden;
    will-change: transform, mask-position;
    transform: translateY(-50%);
    z-index: 1;
  }
  
  .rabbit.run {
    animation: rabbit 0.5s steps(3) infinite, rabbit-run 3s linear forwards;
  }
  
  @keyframes rabbit {
    0% {
      mask-position: 0 0;
    }
    100% {
      mask-position: 300% 0;
    }
  }
  
  @keyframes rabbit-run {
    0% {
      opacity: 1;
      left: 0;
    }
    15% {
      opacity: 1;
    }
    75% {
      opacity: 1;
    }
    100% {
      left: 100%;
    }
  }
}

/* Animation for text intro */
.text-main img,
.text-jp img {
  opacity: 0;
  transform: translateY(30px) scale(0.8) rotate(-10deg);
  animation: textIn 0.8s forwards;
}

/* Keyframes animation */
@keyframes textIn {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.8) rotate(-10deg);
  }
  60% {
    opacity: 1;
    transform: translateY(-5px) scale(1.05) rotate(5deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

/* Add a delay to each character so they appear sequentially */
.text-main img.text-l {
  animation-delay: 0s;
}
.text-main img.text-o {
  animation-delay: 0.1s;
}
.text-main img.text-v {
  animation-delay: 0.2s;
}
.text-main img.text-i {
  animation-delay: 0.3s;
}
.text-main img.text-s {
  animation-delay: 0.4s;
}
.text-main img.text-i2 {
  animation-delay: 0.5s;
}
.text-main img.text-o2 {
  animation-delay: 0.6s;
}
.text-main img.text-n {
  animation-delay: 0.7s;
}

/* JP text */
.text-jp img:nth-child(1) {
  animation-delay: 0.8s;
}
.text-jp img:nth-child(2) {
  animation-delay: 0.9s;
}
.text-jp img:nth-child(3) {
  animation-delay: 1s;
}
.text-jp img:nth-child(4) {
  animation-delay: 1.1s;
}
.text-jp img:nth-child(5) {
  animation-delay: 1.2s;
}

/* Hide before animation */
.text-circle,
.text-circle-half-01,
.text-circle-half-02 {
  position: absolute;
  opacity: 0;
  transform: translateY(-50px) scale(0.5);
  animation: jumpIn 0.6s forwards;
}

/* Partial Delay */
.text-main img.text-circle {
  animation: jumpIn 0.6s forwards;
  animation-delay: 1.5s;
}

.text-main img.text-circle-half {
  animation: jumpIn 0.6s forwards;
  animation-delay: 1.6s;
}

.text-main img.text-circle-half-01 {
  animation: jumpIn 0.6s forwards;
  animation-delay: 1.7s;
}

.text-main img.text-circle-half-02 {
  animation: jumpIn 0.6s forwards;
  animation-delay: 1.8s;
}

/* Keyframes Jump in */
@keyframes jumpIn {
  0% {
    opacity: 0;
    transform: translateY(-50px) scale(0.5);
  }
  60% {
    opacity: 1;
    transform: translateY(10px) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.section-04{
	background:#E0F1EE;
	position:relative;
	margin-top:calc(var(--spvw) * 100);
	padding:calc(var(--spvw) * 80) 0 calc(var(--spvw) * 100) ;
}
.section-04__img {
  width: calc(var(--spvw) * 300);
  height: calc(var(--spvw) * 336);
  top: 0;
  left: 0;
  position:absolute;
}
.section-04 h2 {
	font-size: calc(var(--spvw) * 80);
	color:#33B8A9;
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	text-align:center;
	padding-bottom:calc(var(--spvw) * 64);
}
.section-04__wrap {
margin:0 calc(var(--spvw) * 64);
background:#FFF;
border-radius: calc(var(--spvw) * 20);
overflow:hidden;
padding-bottom:calc(var(--spvw) * 48);
}
.section-04__wrap + .section-04__wrap {
margin-top:calc(var(--spvw) * 48);
}
.section-04__wrap h3 {
color:#FFF;
font-size: calc(var(--spvw) * 40);
text-align:center;
padding: calc(var(--spvw) * 18) 0 calc(var(--spvw) * 22);
font-weight:bold;
}
.section-04__head01 {
background:#EA5548;
}
.section-04__head02 {
background:#6671A4;
}
.section-04__lineup_img {
  width: 100%;
  height: auto;
}
@media screen and (min-width: 751px) {
.section-04{
	margin-top:50px;
	padding:40px 0 50px;
}
.section-04__img {
  width: 160px;
  height: 168px;
}
.section-04 h2 {
	font-size: 40px;
	padding-bottom:32px;
}
.section-04__wrap {
	margin:0 32px;
	border-radius: 10px;
	padding-bottom:24px;
}
.section-04__wrap + .section-04__wrap {
margin-top:24px;
}
.section-04__wrap h3 {
	font-size: 20px;
	padding: 9px 0 11px;
}
}
.novelty {
  position: relative;
  margin-top: calc(var(--spvw) * 34);
  border-radius: calc(var(--spvw) * 20);
  border: calc(var(--spvw) * 2) solid var(--color-primary);
  overflow: hidden;
  background:#FFF;
  padding-top:calc(var(--spvw) * 16);
}
.novelty__wrap {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spvw) * 20);
  padding: calc(var(--spvw) * 48) 0;
}
.novelty p{
	text-align:center;
  font-size: calc(var(--spvw) * 32);
  font-weight:bold;
}
.novelty .novelty-tag {
	color:#FFF;
	border-radius: 32px;
  padding: 0.1rem 0.7rem 0.2rem;
}
.novelty__text01,
.novelty__text02,
.novelty__text05{
	line-height: 1.6;
	margin: 0;
}
.novelty__text03 {
	line-height: 1.7;
	margin: 0;
}
.novelty__text01 .novelty-tag {
	background: #DA2621;
}
.novelty__text01 strong{
	color: #DA2621;
  font-size: calc(var(--spvw) * 40);
}
.novelty__img01 {
  width: calc(var(--spvw) * 558);
  height: calc(var(--spvw) * 864);
  margin: 0 auto;
}
.novelty__text02 .novelty-tag {
	background: #33B8A9;
}
.novelty__text02 strong{
	color: #33B8A9;
  font-size: calc(var(--spvw) * 40);
}

.novelty__text03 strong{
	color: #DA2621;
}
.novelty__btn .btn{
  width: calc(var(--spvw) * 526);
  margin: 0 auto;
  display:block;
}
.novelty__btn .btn img{
  width: 100%;
  height: auto;
}
.novelty__btn p {
  font-size: calc(var(--spvw) * 24);
  text-align:center;
  color:#666;
  font-weight:normal;
}
.novelty__text04 {
	position:relative;
	margin-top:calc(var(--spvw) * 16);
}
.novelty__text04 img {
  width: 100%);
  height: auto;
}
.novelty__text04 p {
	position:absolute;
	top: 50%;
	left: calc(.5em + 50%);
	transform: translateY(-50%);
}
.novelty__text05 strong {
	color: #DA2621;
}
.novelty__text05 strong.tag {
	color: #33B8A9;
  font-size: calc(var(--spvw) * 40);
}
.novelty__img02 {
  width: calc(var(--spvw) * 526);
  height: calc(var(--spvw) * 300);
  margin: 0 auto calc(var(--spvw) * 48);
}
.novelty__att {
	background: #FCEEED;
	padding: calc(var(--spvw) * 48);
	margin-top: calc(var(--spvw) * 64);
}
.novelty__att p{
	text-align:left;
	font-weight: 500;
  font-size: calc(var(--spvw) * 28);
  line-height: 1.6;
}
.novelty__att p strong{
	color: #DA2621;
  font-size: calc(var(--spvw) * 32);
}
.novelty__att p img {
  width: calc(var(--spvw) * 48);
  height: calc(var(--spvw) * 48);
  vertical-align: bottom;
}
@media screen and (min-width: 751px) {
  .novelty {
    border-width: 1px;
    margin-top: 17px;
    padding-top:8px;
    border-radius: 10px;
  }
	.novelty__wrap {
		gap: 10px;
		padding: 24px 0px;
	}
  .novelty p{
    font-size: 16px;
  }
  .novelty__text01 strong,
  .novelty__text02 strong{
    font-size: 20px;
	}
	.novelty__img01 {
	  width: 279px;
	  height: 432px;
	}
	.novelty__text02 strong{
    font-size: 20px;
	}

	.novelty__btn .btn {
	  width: 263px;
	}
	.novelty__btn p {
	  font-size: 12px;
	}
	.novelty__text04 {
		margin-top:8px;
	}
	.novelty__text05 strong.tag {
    font-size: 20px;
	}
	.novelty__img02 {
	  width: 263px;
	  height: 150px;
  margin-bottom: 24px;
	}
	.novelty__att {
		padding: 24px;
		margin-top: 32px;
	}
	.novelty__att p{
	  font-size: 14px;
	}
	.novelty__att p strong{
		font-size: 16px;
	}
	.novelty__att p img {
	  width: 24px;
	  height: 24px;
	}
}

.shop_list {
background:#FFF;
display: flex;
flex-wrap: wrap;
gap:23px;
justify-content: center;
margin: 0 auto;
padding: 0 20px;
}
.shop_list li{
width: 45%;
display:flex;
flex-direction:column;
}
.shop_list li a {
display:flex;
flex-direction:column;
flex-grow: 1;
}
.shop_list li img{
width:100%;height:auto;
}
.shop_list_head {
  font-size: 11px;
  color:#333;
}
.shop_list_btn {
	background: #DEDEDE;
	text-align:center;
	padding:6px 0;
	position:relative;
  font-size: 10px;
  display:flex;
  align-items:center;
  justify-content: center;
  border-radius:5px;
  color:#333;
	gap:10px;
	flex-grow: 1;
}
.shop_list li img.shop_list_arrow {
	width:12px;
	height: 10px;
}
@media screen and (max-width: 750px) {
.shop_list {
gap:calc(var(--spvw) * 46);
padding: 0;
}
.shop_list_head {
  font-size: calc(var(--spvw) * 22);
}
.shop_list_btn {
	padding:calc(var(--spvw) * 12) 0;
  font-size: calc(var(--spvw) * 20);
	gap:calc(var(--spvw) * 10);
}
.shop_list li img.shop_list_arrow {
	width: calc(var(--spvw) * 24);
	height:  calc(var(--spvw) * 20);
}
}
.modaal-overlay{z-index:9998}
.modaal-inner-wrapper {padding: 30px;}
.modaal-container{box-shadow:none;border-radius:14px;max-width:100%;}
@media screen and (min-width: 751px) {
.modaal-container {max-width:311px;}
}

.modaal-container .modaal-content-container{padding:23px}

@media screen and (min-width:641px){
.modaal-container .modaal-content-container{padding:40px 0 40px;}}
.modaal-wrapper .modaal-close{width:30px;height:30px;background-color:#666666;border-radius:50%;position:absolute;top:8px;right:8px}
@media screen and (min-width:641px){
.modaal-wrapper .modaal-close{width:30px;height:30px;top:8px;right:8px}
}
.modaal-wrapper .modaal-close:after,
.modaal-wrapper .modaal-close:before{top:6px;left:14px;border-radius:0;width:2px;height:18px}

.modaal-wrapper .modaal-close:hover:after,
.modaal-wrapper .modaal-close:hover:before{background-color:#fff}