html {
  font-size: 62.5%;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  -webkit-text-size-adjust: 100%;
  font-size: 1.6rem;
  color: #000;
}

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

a,
a:link,
a:visited,
a:active {
  text-decoration: none;
  color: inherit;
}

a {
  transition: 0.4s ease;
}

ul,
li {
  list-style: none;
}

button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none;
}

main {
  display: block;
}

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

.l-wrapper {
  display: grid;
  z-index: 1;
  position: relative;
  grid-template-areas: "left main right";
  grid-template-columns: 1fr 500px 1fr;
  grid-template-rows: 1fr;
  max-width: 144rem;
  margin: 0 auto;
}
.l-wrapper::before {
  content: "";
  grid-area: left;
  position: fixed;
  top: 0;
  left: 0;
  width: calc(50vw - 230px);
  height: 100vh;
  background: url(../img/bg_cover_left.webp) no-repeat right center/auto 130%;
}
@media screen and (max-width: 767px) {
  .l-wrapper::before {
    display: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .l-wrapper::before {
    left: 0;
    right: auto;
    width: calc(50vw - 195px);
    height: 100%;
    background-image: url(../img/bg_cover_left_tab.webp);
    background-position: center center;
  }
}
.l-wrapper::after {
  content: "";
  grid-area: right;
  position: fixed;
  top: 0;
  right: 0;
  width: calc(50vw - 230px);
  height: 100vh;
  background: url(../img/bg_cover_right.webp) no-repeat left center/auto 130%;
}
@media screen and (max-width: 767px) {
  .l-wrapper::after {
    display: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .l-wrapper::after {
    left: calc(50vw + 195px);
    right: 0;
    width: auto;
    height: 100%;
    background-image: url(../img/bg_cover_right_tab.webp);
    background-position: center center;
  }
}
@media screen and (max-width: 767px) {
  .l-wrapper {
    display: block;
    max-width: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .l-wrapper {
    grid-template-columns: 1fr 500px 1fr;
  }
}

.p-mascotWindow {
  position: fixed;
  top: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .p-mascotWindow {
    display: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .p-mascotWindow {
    display: none;
  }
}
.p-mascotWindow--leftTop {
  top: 10.78vh;
  right: calc(50vw + 230px + 17.05vh);
  width: 27.586vh;
  height: 27.826vh;
  background-color: #ff83b7;
  border-radius: 50% 50% 0 0;
}
.p-mascotWindow--leftTop .p-mascotWindow__track {
  animation: mascotWindowTicker 22s linear infinite;
}
.p-mascotWindow--leftBottom {
  top: 63.761vh;
  right: calc(50vw + 230px + 18.5vh);
  width: 24.561vh;
  height: 21.071vh;
  background-color: #0083e7;
}
.p-mascotWindow--rightBottom {
  top: 59.723vh;
  left: calc(50vw + 230px + 18.6vh);
  width: 24.586vh;
  height: 25.944vh;
  background-color: #cbf764;
}

.p-mascotWindow__track {
  display: flex;
  height: 100%;
  width: -moz-max-content;
  width: max-content;
  animation: mascotWindowTicker 15s linear infinite;
}
.p-mascotWindow__track img {
  height: 100%;
  width: auto;
  max-width: none;
  flex-shrink: 0;
}

@keyframes mascotWindowTicker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.p-anchorBtnWrap {
  position: fixed;
  top: 316px;
  left: calc(50vw + 436px);
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .p-anchorBtnWrap {
    display: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .p-anchorBtnWrap {
    display: none;
  }
}
@media screen and (max-height: 1080px) {
  .p-anchorBtnWrap {
    top: 29.259vh;
    left: calc(50vw + 230px + 16vh);
  }
}

.p-anchorBtnList {
  display: flex;
  flex-wrap: wrap;
  width: 337px;
  gap: 9px 11px;
}
@media screen and (max-height: 1080px) {
  .p-anchorBtnList {
    width: 31.204vh;
    gap: 0.833vh 1.019vh;
  }
}

.p-anchorBtn {
  display: block;
  width: 163px;
  transition: 0.4s ease;
}
.p-anchorBtn:hover {
  opacity: 0.8;
}
@media screen and (max-height: 1080px) {
  .p-anchorBtn {
    width: 15.093vh;
  }
}

.l-main {
  grid-area: main;
  background: top center/contain;
  position: relative;
  z-index: 2;
  max-width: 500px;
  overflow: hidden;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .l-main {
    max-width: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .l-main {
    max-width: 500px;
  }
}

.l-header {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
}
@media screen and (max-width: 767px) {
  .l-header {
    max-width: none;
  }
}

.p-headerNav {
  position: fixed;
  bottom: 0;
  left: 50%;
  max-width: 500px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 0 15px 10px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 100%);
  z-index: 0;
  transition: 0.4s ease;
}
.p-headerNav.js-fixed {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transform: translate(-50%, 0);
}
.p-headerNavList {
  display: flex;
  align-items: flex-end;
  gap: 1.0666666667%;
  flex: 1;
}
.p-headerNavListItem {
  flex: 1;
}
.p-headerNavLink {
  display: block;
  transition: 0.4s ease;
}
.p-headerNavLink:hover {
  opacity: 0.8;
}
.p-headerNavTop {
  display: block;
  flex-shrink: 0;
  width: 20%;
  transition: 0.4s ease;
}
.p-headerNavTop:hover {
  opacity: 0.8;
}
@media screen and (max-width: 767px) {
  .p-headerNav {
    max-width: none;
  }
}
@media screen and (min-width: 1081px) {
  .p-headerNav {
    display: none;
  }
}

.l-mv {
  position: relative;
  background: url(../img/mv/bg_dot.webp) no-repeat top center/100% 100%;
}

.p-mvMascot--tambourine, .p-mvMascot--eggplant, .p-mvMascot--corn, .p-mvMascot--tomato, .p-mvMascot--piano {
  position: absolute;
  z-index: 1;
  width: auto;
  height: auto;
}

.p-mvAtt {
  position: absolute;
  top: 1.5617822692%;
  right: 5.6%;
  font-weight: 400;
  z-index: 1;
  width: 21.0666666667%;
}
.p-mvTitle, .p-mvHero {
  display: block;
  width: 100%;
  line-height: 0;
  position: relative;
  z-index: 2;
}
.p-mvTitle {
  aspect-ratio: 1.6357688113;
}
.p-mvHero {
  aspect-ratio: 1.1904761905;
}
.p-mvTitle {
  padding: 4.5333333333% 4% 2.6666666667%;
}
.p-mvHeroGroup {
  position: relative;
}
.p-mvMascot--piano {
  top: -0.919%;
  right: -2%;
  width: 34.533%;
}
.p-mvMascot--tomato {
  top: 30.372%;
  right: -12.667%;
  width: 39.733%;
}
.p-mvMascot--corn {
  bottom: -15.187%;
  right: -15.333%;
  width: 43.067%;
}
.p-mvMascot--eggplant {
  top: 37.129%;
  left: -16.667%;
  width: 41.067%;
}
.p-mvMascot--tambourine {
  bottom: -6%;
  left: 0;
  width: 28.533%;
}
.p-mvActivities {
  display: block;
  width: 100%;
  height: 57.333vw;
  overflow: hidden;
  line-height: 0;
  margin-bottom: 13.3333333333%;
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .p-mvActivities {
    height: 286.667px;
  }
}
@media screen and (min-width: 1081px) {
  .p-mvActivities {
    height: 210px;
  }
}
.p-mvActivities img {
  height: 100%;
  width: auto;
  max-width: none;
  animation: mvTicker 30s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@keyframes mvTicker {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
.js-hero {
  position: relative;
  overflow: hidden;
}

.js-sub {
  opacity: 0;
  transition: opacity 1s ease;
}
.js-sub.js-active {
  opacity: 1;
}

.js-front__bg,
.js-member,
.js-mascot,
.js-scrollIn {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.js-front__bg.js-active,
.js-member.js-active,
.js-mascot.js-active,
.js-scrollIn.js-active {
  opacity: 1;
  transform: translateY(0);
}

.js-slideInLeft,
.js-slideInRight {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.js-slideInLeft.js-active,
.js-slideInRight.js-active {
  opacity: 1;
  transform: translateX(0);
}

.js-slideInLeft {
  transform: translateX(-40px);
}

.js-slideInRight {
  transform: translateX(40px);
}

.l-frontSection {
  position: relative;
  background: url(../img/mv/bg_pink.webp) no-repeat top center/100% auto, linear-gradient(to bottom, transparent 10%, #ff83b7 15%);
  width: 100%;
  margin-top: -20px;
  z-index: 5;
}
@media screen and (max-width: 767px) {
  .l-frontSection {
    max-width: none;
    margin-top: -3vw;
  }
}
.l-frontSection::after {
  content: "";
  display: block;
}

.p-frontIntro {
  margin: 0 auto;
  padding: 40px 25px;
}
@media screen and (max-width: 767px) {
  .p-frontIntro {
    padding: 10.256vw 6.41vw;
  }
}
.p-frontCampaignTitle {
  width: 88%;
  margin: 0 auto;
  display: block;
}
.p-frontAnchor {
  display: flex;
  flex-direction: row;
  gap: 2.6666666667%;
  width: 88%;
  margin: 5.8666666667% auto 0;
  padding-bottom: 60px;
}
@media screen and (max-width: 767px) {
  .p-frontAnchor {
    margin-top: 6.41vw;
    padding-bottom: 10.256vw;
  }
}
.p-frontAnchor a {
  display: block;
  flex: 1;
  min-width: 0;
  transition: 0.4s ease;
}
.p-frontAnchor a:hover {
  opacity: 0.8;
}

.l-section__inner {
  padding: 0 3.3333333333%;
  margin: 0 auto;
}

.l-guestSection {
  background: #0083e7 url(../img/guest/bg_top.webp) no-repeat top center/100% auto;
  padding-bottom: 40px;
}
@media screen and (max-width: 767px) {
  .l-guestSection {
    padding-bottom: 10.256vw;
  }
}

.p-guestDeco {
  padding-top: 30px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .p-guestDeco {
    padding-top: 7.692vw;
  }
}
.p-guestTitle__row {
  position: relative;
  margin: 0 auto;
}
.p-guestTitle__mascot {
  position: absolute;
  bottom: 0;
  left: 0;
}
.p-guestMessage__row {
  position: relative;
  height: -moz-fit-content;
  height: fit-content;
}
.p-guestMessage__label {
  position: relative;
}
.p-guestMessage__mascot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 35.7333333333%;
}
.p-guestVideo {
  background: #fff;
}
.p-guestVideo a {
  display: block;
  transition: 0.4s ease;
}
.p-guestVideo a:hover {
  opacity: 0.8;
}

.p-prizeList {
  margin: 0 auto;
}
.p-prizeList__item + .p-prizeList__item {
  margin-top: 4%;
}

.p-prize__decoPiano {
  position: absolute;
  right: -25px;
  width: 28.9333333333%;
  z-index: 1;
}
.p-prize__decoPiano--a {
  top: 21%;
}
.p-prize__decoPiano--quo {
  top: 75%;
}
.p-prize__decoTambourine {
  position: absolute;
  top: 53%;
  left: -3.6%;
  width: 22%;
  z-index: 1;
}

.p-prizeTitle {
  margin: 9.8666666667% auto 6%;
  width: 68.5333333333%;
}

.p-step__title {
  width: 42.9333333333%;
  margin: 0 auto 6.9333333333%;
}
.p-step__list {
  margin: 0 auto;
}
.p-step__item:not(:last-child) {
  margin-bottom: 13.3333333333%;
}

.p-product {
  margin-top: 6.6666666667%;
}

.c-btn {
  margin: 6.6666666667% auto 0;
  width: 56.8%;
}
.c-btn a {
  display: block;
  transition: 0.4s ease;
}
.c-btn a:hover {
  opacity: 0.8;
}

.p-winner {
  margin-top: 40px;
  width: 87.692%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 767px) {
  .p-winner {
    margin-top: 10.256vw;
  }
}
.p-winner__title {
  width: 74.4%;
  margin: 0 auto 7.7333333333%;
}
.p-winner__textImg {
  margin-bottom: 8.6666666667%;
}
.p-winner__noteImg {
  margin-bottom: 6.9333333333%;
}
.p-winner__tableImg + .p-winner__tableImg {
  margin-top: 2.6666666667%;
}

.l-campaign01Section {
  position: relative;
  background: #5ecfd3 url(../img/campaign1/bg_top.webp) no-repeat top center/100% auto;
  padding: 12% 0 6.6666666667%;
}

.p-campaign__box--wh, .p-campaign__box--pk {
  margin-bottom: 2.6666666667%;
  overflow: hidden;
  padding: 6.6666666667% 5.3333333333%;
  border-radius: 9.333vw;
  text-align: center;
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .p-campaign__box--wh, .p-campaign__box--pk {
    border-radius: 46.667px;
  }
}
@media screen and (min-width: 1081px) {
  .p-campaign__box--wh, .p-campaign__box--pk {
    border-radius: 46.667px;
  }
}
.p-campaign__box--wh:last-child, .p-campaign__box--pk:last-child {
  margin-bottom: 0;
}

.p-campaign__box--pk {
  background: #fbe7e8;
  position: relative;
  overflow: visible;
}
.p-campaign__box--wh {
  background: #fff;
  position: relative;
  overflow: visible;
}
.p-campaign__titleImg {
  margin-bottom: 30px;
}
.p-campaign__title01 {
  margin: 0 auto 6.6666666667%;
  width: 75.8666666667%;
}
.p-campaign__title02 {
  margin: 0 auto 4.2666666667%;
  width: 77.6%;
}

.l-campaign02Section {
  padding: 12.6666666667% 0 3.3333333333%;
  background: #cbf764 url(../img/campaign2/bg_top.webp) no-repeat top center/100% auto;
}

.p-campaign02Inner {
  border-radius: 9.333vw;
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .p-campaign02Inner {
    border-radius: 46.667px;
  }
}
@media screen and (min-width: 1081px) {
  .p-campaign02Inner {
    border-radius: 46.667px;
  }
}

.l-contactSection {
  width: 100%;
  background: url(../img/contact/bg_dot.webp) repeat top left/contain;
  text-align: center;
  padding: 40px 20px;
}
@media screen and (max-width: 767px) {
  .l-contactSection {
    background-size: 25.641vw 22.564vw;
    padding: 10.256vw 5.128vw;
  }
}

.p-contact__title {
  width: 40%;
  margin: 0 auto 3.3333333333%;
}
.p-contact__tel {
  display: block;
  margin-bottom: 6.8%;
}
.p-contact__txtImg01 {
  width: 75.2%;
  margin: 0 auto 4.2666666667%;
}
.c-telBox {
  display: block;
  width: 70%;
  margin: 0 auto 14px;
}
@media screen and (max-width: 767px) {
  .c-telBox {
    margin: 0 auto 3.59vw;
  }
}

.l-rulesSection {
  padding: 6.6666666667% 0;
  background-color: #ff83b7;
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .l-rulesSection {
    padding-bottom: 130px;
  }
}
@media screen and (max-width: 767px) {
  .l-rulesSection {
    padding-bottom: 100px;
  }
}

.p-rulesHead {
  text-align: center;
  margin: 0 auto 20px;
}
.p-rulesHead img {
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .p-rulesHead {
    margin: 0 auto 5.128vw;
  }
}
.p-rules__title {
  width: 31.6%;
  margin: 0 auto 5.6%;
}
.p-rules__title02 {
  margin: 0 auto 2%;
}
.p-rulesInner {
  margin: 0 auto;
  background-color: #fff;
  border-radius: 12px;
}
.p-rulesContentsBox {
  margin: 0 auto;
}
.p-rulesLabel {
  padding: 10px 16px;
  margin: 20px auto 10px;
  display: block;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 24px;
  font-size: 1.4rem;
  font-weight: 700;
}
.p-rulesLabel:first-child {
  margin-top: 0;
}
@media screen and (max-width: 767px) {
  .p-rulesLabel {
    padding: 2.564vw 4.103vw;
    margin: 5.128vw auto 2.564vw;
    border-radius: 6.154vw;
  }
}
.p-rulesTextbox {
  aspect-ratio: 750/683;
  overflow-y: auto;
  padding: 4%;
}
.p-rulesDesc {
  margin-bottom: 30px;
  font-size: 1.4rem;
  line-height: 1.75;
}
.p-rulesDesc a {
  text-decoration: underline;
  transition: 0.4s ease;
}
.p-rulesDesc a:hover {
  opacity: 0.7;
}

.u-placeholder {
  color: #999;
  font-style: italic;
}