@charset "UTF-8";

html{
  scroll-behavior: smooth;
}

@media (min-width: 768px) {
  .s-content{
    overflow: hidden;
  }
}

.splash-screen{
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  background-color: var(--color-white);
  opacity: 1;
  visibility: visible;
  transition: opacity var(--transition-default), visible var(--transition-default);
}

.splash-screen.hide{
  opacity: 0;
  visibility: hidden;
}

.splash-screen__inner{
  display: grid;
  gap: 3rem;
}

.splash-screen__loading--percent{
  font-family: var(--font-cherry-bomb-one);
  font-size: 3rem;
  letter-spacing: 0.1em;
  line-height: 1.4667;
  text-align: center;
  color: #D92047;
}

.splash-screen__loading{
  display: grid;
  justify-content: center;
  gap: 1.6rem;
}

.splash-screen__loading--symbol{
  width: 15.3rem;
  position: relative;
}

.splash-screen__loading--wave{
  position: absolute;
  top: 100%;
  right: 0;
}

.splash-screen__character{
  display: grid;
  gap: 2rem;
}

.splash-screen__character--image{
  margin: auto;
  width: 18rem;
}

.splash-screen__chracher--text{
  font-family: var(--font-cherry-bomb-one);
  font-size: 2.5rem;
  letter-spacing: 0.2em;
  line-height: 1;
  text-align: center;
}

.s-firstview{
  padding: 9rem 0 1.4rem;
  position: relative;
  background-color: var(--color-project-bg-yellow);
  position: relative;
}

.s-firstview::after{
  content: '';
  width: 100%;
  height: 8.5rem;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: url(../img/firstview_bg.svg);
  background-position: bottom center;
  background-color: var(--color-project-bg-pink);
  z-index: 1;
}

.s-firstview__positive-word{
  margin-inline: auto;
  width: 88.9743%;
  position: relative;
}

.s-firstview__positive-word--frame{
  padding: 2.25rem 1.5rem 0;
  aspect-ratio: 34.7/10.1;
  background-image: url(../img/positive-word-balloon.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
}

.s-firstview--treat[data-image-id="top01"]{
  width: 11.6rem;
  position: absolute;
  top: -7.7rem;
  right: 1.3rem;
  z-index: 2;
}

.s-firstview__positive-word--title{
  padding: 0.3rem 1rem;
  display: block;
  font-size: 1.4rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  position: absolute;
  top: -1.3rem;
  left: 1rem;
  background-color: var(--color-project-brown);
  border-radius: 100vh;
  color: var(--color-white);
  z-index: 2;
}

.s-firstview__positiveword--text{
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
  color: var(--color-project-brown);
}

.s-firstview__image{
  margin: auto;
  width: calc(100% - 4rem);
}

.s-firstview__title{
  margin: 2.8rem 0 0;
  display: grid;
  justify-items: center;
  gap: 1rem;
}

.s-firstview__title--image{
  margin: auto;
  width: 60.2564%;
}

.s-firstview__title--lead{
  font-size: 2.2rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: 1.1667;
  color: var(--color-project-brown);
}

.s-firstview__viewmore{
  margin: 5.65rem auto 0;
  display: grid;
  gap: 0.8rem;
  justify-items: center;
  position: relative;
  z-index: 2;
}

.s-firstview__viewmore--text{
  font-family: var(--font-cherry-bomb-one);
  font-size: 2rem;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
  color: var(--color-project-orange);
}

.s-firstview__viewmore--icon{
  width: 2rem;
  animation: moveDown 3s ease-in-out infinite;
}

.animation-enable .s-firstview .u-animation{
  opacity: 0;
  animation: fadeIn 1s forwards;
}

.animation-enable .s-firstview .u-animation[data-image-id="top01"]{
  animation-delay: 1s;
}

.animation-enable .s-firstview .u-animation.s-firstview__positive-word--frame{
  animation-delay: 2s;
}

@keyframes fadeIn{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

@keyframes moveDown {
  0%{
    translate: 0 0;
  }
  40%{
    translate: 0 0;
  }
  50%{
    translate: 0 0.75rem;
  }
  60%{
    translate: 0 0;
  }
  100%{
    translate: 0 0;
  }
}

.s-about{
  padding: 5rem 0 0;
  background-image: url(../img/about_bg.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom right;
}

.s-about__lead{
  margin: 2rem auto 0;
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-align: center;
}

.s-about__image{
  margin: 1rem auto 0;
  width: 53.6796%;
}

.s-sns{
  padding: 4.8rem 0;
  background-color: var(--color-project-bg-yellow);
  position: relative;
}

.s-sns::after{
  width: 100%;
  height: 8.5rem;
  content: '';
  display: block;
  background-image: url(../img/sns_bottom.png);
  background-repeat: no-repeat;
  background-size: 115.38%;
  background-position: top center;
  background-color: var(--color-project-bg-yellow);
  position: absolute;
  bottom: -8.5rem;
  left: 0;
  z-index: 2;
}

.s-sns .c-heading--large{
  font-size: 4.5rem;
  color: var(--color-project-orange);
}

.s-sns .c-heading--small{
  margin-top: -0.5rem;
  opacity: 0.5;
  color: var(--color-project-orange);
}

.s-sns .s-sns__heading{
  margin: 0.8rem auto 0;
  position: relative;
  z-index: 5;
}

.s-sns .s-sns__heading--image{
  margin: auto;
  width: 12.2rem;
}

.s-sns .s-sns__embed--frame{
  margin-top: -1.3rem;
  width: 100%;
}

.s-sns .s-sns__embed--title{
  margin: 0 auto -2.25rem;
  padding: 0.85rem 0;
  font-family: var(--font-cherry-bomb-one);
  font-size: 2.8rem;
  width: 71.7948%;
  letter-spacing: 0.1em;
  line-height: 1;
  background-color: var(--color-project-orange);
  border-radius: 100vh;
  color: var(--color-white);
  text-align: center;
  z-index: 2;
  position: relative;
}

.s-sns .s-sns__embed--content{
  padding: 4rem 2rem;
  width: 100%;
  background-color: var(--color-white);
  border-radius: 4rem;
}

.tiktok-embed{
  margin: 0 !important;
}

.tiktok-embed iframe{
  max-height: unset !important;
}

.s-sns .s-sns__link{
  margin-top: 2.4rem;
}

.s-sns .s-sns__link--title{
  font-family: var(--font-cherry-bomb-one);
  font-size: 2.2rem;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
}

.s-sns .s-sns-button{
  margin-top: 1.5rem;
}

.s-sns .s-sns-button__list{
  gap: 1.25rem;
}

.s-sns .s-sns-button__item{
  width: 6rem;
}

.s-sns .s-sns__image{
  margin: 2.33rem auto 0;
  width: 51.282%;
  position: relative;
  z-index: 5;
}

.s-characters{
  padding-bottom: 8.5rem;
  position: relative;
  background-image: url(../img/sns_bottom.png);
  background-repeat: no-repeat;
  background-size: 115.38%;
  background-position: bottom center;
}

.s-characters::before{
  content: '';
  width: 100%;
  height: 8.5rem;
  display: block;
  background-image: url(../img/sns_bottom.png);
  background-repeat: no-repeat;
  background-size: 115.38%;
  background-position: top center;
}

.s-characters__inner{
  background-color: var(--color-project-bg-blue);
}

.s-characters .c-heading{
  color: var(--color-project-blue);
}

.s-characters .c-heading--large{
  font-size: 4.5rem;
}

.s-characters .c-heading--small{
  opacity: 0.5;
  letter-spacing: 0.1em;
}

.s-characters__frame{
  margin: 1.5rem auto 0;
  padding: 4rem 0 3.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.5rem 1rem;
  width: 88.4615%;
  background-color: var(--color-white);
  border: 0.4rem solid var(--color-project-brown);
  border-radius: 4rem;
}

.s-characters__item:nth-of-type(n+3){
  width: 15rem;
}

.s-characters__item[data-column="full"]{
  grid-column: 1/3;
}

.s-characters__item--image{
  margin: auto;
  width: 10rem;
}

.s-characters__item:first-of-type .s-characters__item--image{
  margin: auto;
  width: 15rem;
}

.s-characters__item:nth-of-type(2) .s-characters__item--image{
  width: 12rem;
}

.s-characters__item--info{
  margin-top: 1.3rem;
}

.s-characters__item--name{
  margin: auto;
  padding: 0.8rem 0;
  font-size: 1.8rem;
  font-weight: var(--fw-black);
  letter-spacing: 0.1em;
  line-height: 1;
  width: 75%;
  text-align: center;
  color: var(--color-white);
  border-radius: 100vh;
}

.s-characters__item--name[data-color="magenta"]{
  background-color: #FF6EA3;
}

.s-characters__item--name[data-color="cyan"]{
  background-color: #3CC7E6;
}

.s-characters__item--name[data-color="yellow"]{
  background-color: #F8C04F;
}

.s-characters__item--name[data-color="pink"]{
  background-color: #FC8B9D;
}

.s-characters__item--name[data-color="purple"]{
  background-color: #9174C0;
}

.s-characters__item--name[data-color="orange"]{
  background-color: #FF9171;
}

.s-characters__item--name[data-color="blue"]{
  background-color: #7CB0F8;
}

.s-characters__item--description{
  margin-top: 1.2rem;
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-align: center;
}

.s-characters__item:nth-of-type(n+3) .s-characters__item--description{
  font-size: 1.4rem;
}

.s-characters__item:nth-of-type(n+3) .s-characters__item--name{
  padding: 0.7rem 0;
  width: 93.95%;
  font-size: 1.6rem;
}

.s-characters__item:nth-of-type(n+3) .s-characters__item--name[data-short-letter-spacing]{
  letter-spacing: 0.06em;
}

.s-characters__item:nth-of-type(n+3) .s-characters__item--info{
  margin-top: 1.5rem;
}

.s-characters__item:nth-of-type(2n):not(:nth-of-type(2)){
  margin: 0 auto 0 0;
}

.s-characters__item:nth-of-type(2n-1):not(:first-of-type){
  margin: 0 0 0 auto;
}

.s-characters__item--name + .s-characters__item--name{
  position: relative;
}

.s-characters__item--name + .s-characters__item--name::before{
  content: '&';
  position: absolute;
  left: 1rem;
}

.s-everyday-party{
  height: 81rem;
  position: relative;
}

.s-everyday-party__image{
  width: 100%;
  height: 100svh;
  position: fixed;
  top: 0;
  z-index: -1;
}

@media (min-width: 768px) {
  .s-everyday-party__image{
    width: min(39rem, 27.5572vw);
    height: 100%;
  }
}

.s-everyday-party__content{
  width: 100%;
  height: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.s-everyday-party__image--base{
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  background-image: url(../img/party_cloud.svg);
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
}

.s-everyday-party__title--heading{
  display: flex;
  justify-content: center;
}

.s-everyday-party__title--heading :where(span){
  font-family: var(--font-cherry-bomb-one);
  font-size: 8.1rem;
  letter-spacing: 0.1em;
  line-height: 1;
}

.s-everyday-party__title--heading .blue{
  color: var(--color-project-blue);
}

.s-everyday-party__title--heading .pink{
  color: var(--color-project-pink);
}

.s-everyday-party__title--lead{
  margin-top: 2.3rem;
  font-size: 2.2rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
}

@keyframes fuwafuwa {
  0%{
    translate: 0 0;
  }
  50%{
    translate: 0 -2rem;
  }
  100%{
    translate: 0 0;
  }
}

.s-everyday-party__character{
  position: absolute;
}

.animation-enable .s-everyday-party__character{
  animation: fuwafuwa 3s infinite ease;
}

.s-everyday-party__character[data-chara-id="01"]{
  width: 11.5rem;
  top: -16.9rem;
  left: 3.85rem;
  animation-delay: -2s;
}

.s-everyday-party__character[data-chara-id="02"]{
  width: 11.4rem;
  top: -36.2rem;
  right: 12.4rem;
  animation-delay: -1s;
}

.s-everyday-party__character[data-chara-id="03"]{
  width: 11.5rem;
  top: -10.2rem;
  right: 5.6rem;
  animation-delay: -3.5s;
}

.s-everyday-party__character[data-chara-id="04"]{
  width: 13.4rem;
  top: 6.4rem;
  left: 1.4rem;
  animation-delay: -0.2s;
}

.s-everyday-party__character[data-chara-id="05"]{
  width: 10.1rem;
  top: 12.2rem;
  right: 2.3rem;
  animation-delay: -0.8s;
}

.s-news{
  padding: 8.5rem 0 0;
  background-image: url(../img/yellow_curve.svg);
  background-repeat: no-repeat;
  background-size: 115.38%;
  background-position: top center;
}

.s-news__inner{
  padding: 0 2rem 2.5rem;
  background-color: var(--color-project-bg-yellow);
}

.s-news .c-heading{
  color: var(--color-project-magenta);
}

.s-news .c-heading--small{
  opacity: 0.5;
}

.s-news__list{
  margin-top: 2rem;
}

.s-news__item{
  border-bottom: 2px dotted var(--color-project-brown);
}

.s-news__item:first-of-type{
  border-top: 2px dotted var(--color-project-brown);
}

.s-news__details--heading{
  padding: 1.5rem 0;
}

.s-news__details--date{
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--color-project-pink);
}

.s-news__details--title{
  position: relative;
}

.s-news__details--title-text{
  margin-top: 0.5rem;
  width: 85.7142%;
  display: block;
  font-size: 1.6rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: 1.5;
}

.s-news__details--title-icon{
  width: 2.6rem;
  height: auto;
  display: block;
  aspect-ratio: 1;
  background-color: var(--color-project-pink);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
}

.s-news__details--title-icon::before,
.s-news__details--title-icon::after{
  content: '';
  display: block;
  width: 1.4rem;
  height: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  background-color: var(--color-white);
  border-radius: 100vh;
}

.s-news__details--title-icon::after{
  rotate: 90deg;
  transition: rotate var(--transition-default);
}

.s-news__details[data-state-accordion="opened"] .s-news__details--title-icon::after{
  rotate: 0deg;
}

.s-news__details--content{
  padding: 0 0 1.5rem;
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  line-height: 1.5;
}

.s-news__sns-link{
  margin-top: 2rem;
}

.s-dash-animation{
  max-width: 100%;
  overflow: hidden;
  background-color: var(--color-project-bg-yellow);
}

.s-dash-animation__image{
  width: 15.6rem;
  translate: 174.87% 0;
}

@keyframes runToLeftSide{
  0%{
    translate: 250% 0;
  }
  100%{
    translate: -100% 0;
  }
}

.animation-enable .s-dash-animation__image.animate{
  animation: runToLeftSide 5s infinite linear;
}

.s-banner{
  padding: 0 0 8.5rem;
  background-image: url(../img/yellow_curve.svg);
  background-repeat: no-repeat;
  background-size: 115.38%;
  background-position: bottom center;
  background-color: var(--color-project-bg-beige);
}

.s-banner__inner{
  padding: 0.8rem 2rem 0;
  background-color: var(--color-project-bg-yellow);
}

.s-banner__wrapper{
  display: grid;
}

.s-banner__wrapper[data-column="1"]{
  gap: 1.5rem;
}

.s-banner__wrapper[data-column="1"] .s-banner__item{
  border-radius: 1rem;
}

.s-banner__wrapper[data-column="2"]{
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1rem;
}

.s-banner__wrapper[data-column="2"] .s-banner__item{
  border-radius: 2rem;
}

.s-banner__item{
  overflow: hidden;
}

.s-contact{
  margin-bottom: -9.5rem;
  background-color: var(--color-project-bg-beige);
}

.s-contact__inner{
  padding: 3rem 2rem 13.5rem;
}

.s-contact .c-heading--small{
  letter-spacing: 0.1em;
  opacity: 0.5;
}

.s-contact__link-list{
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
}

.s-contact__link--item[data-theme="brown"][data-icon="arrow"]{
  display: grid;
  gap: 1rem;
  background-position: center right 1rem;
}

.s-contact__link--title{
  display: block;
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
}

.s-contact__link--lead{
  display: block;
  font-size: 1.4rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
  color: #90755E;
}

.s-contact__character{
  margin-top: 3.5rem;
}

.s-contact__character--image{
  margin: 1rem auto 0;
  width: 30rem;
}

.animation-enable .s-contact__character--image{
  scale: 0;
}

.animation-enable .s-contact__character.animate .s-contact__character--image{
  animation: popin 0.5s forwards;
}

@keyframes popin{
  0%{
    scale: 0;
  }
  80%{
    scale: 1.25;
  }
  100%{
    scale: 1;
  }
}