/* === Global === */
html{
  scroll-behavior: smooth !important;
}

body{
  background-color: #FFF;
  --screen-base-size: 750;
  --screen-pc-size: 1920;

  background-image: url(../img/pc-bg/pc-menu-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  background-attachment: fixed;
}

img{
  display: block;
  width: 100%;
}

.pc{
  display: block;
}

.sp{
  display: none;
}

@media screen and (max-width: 750px) {
  .pc{
    display: none !important;
  }
  .sp{
    display: block;
  }
}
/* === Global /E === */



/* === Layout === */
.l-container{
  width: 100%;
  max-width: min(750px, calc(750 / var(--screen-pc-size) * 100vw));
  margin: 0 auto ;
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 750px) {
  .l-container{
    max-width: 750px;
  }
}
/* === Layout /E === */


/* === Component === */
.c-cta-sec-btn img{
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.40));
}

.c-cta-sec{
  position: relative;
}

.c-cta-sec-btn{
  display: block;
  width: 92%;
  position: absolute;
  left: 50%;
  bottom: 4.8%;
  transform: translateX(-50%);
}

.c-fixed-cta{
  display: none;
  width: 95%;
  max-width: 500px;
  margin: 0 auto;

  position: fixed;
  bottom: 2%;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
}
/* === Component /E === */


/* === Project === */
/* * * PC背景 * * */
.p-pc-bg{
  width: 100%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}

.p-pc-bg-wrap{
  height: 100%;
}

.p-pc-bg__logo{
  width: min(170px, calc(170 / var(--screen-pc-size) * 100vw));
  left: 3%;
  top: 28%;
}

.p-pc-bg__text{
  width: min(462px, calc(462 / var(--screen-pc-size) * 100vw));
  left: 3%;
  top: 56.3%;
}

.p-pc-bg-nav{
  display: flex;
  flex-direction: column;
  gap: min(50px, calc(50 / var(--screen-pc-size) * 100vw));

  right: 16.5%;
  top: 41.8%;
}

.p-pc-bg-nav__link{
  height: min(17px, calc(17 / var(--screen-pc-size) * 100vw));
}

.p-pc-bg-nav__link img{
  width: initial;
  height: 100%;
}
/* * * PC背景 /E * * */



/* * * FV * * */
.p-fv__product{
  display: none;
  width: calc(579 / var(--screen-base-size) * 100%);
  max-width: 579px;
  left: 17%;
  top: 26%;
}

.p-fv__text-title{
  width: calc(671 / var(--screen-base-size) * 100%);
  max-width: 671px;
  left: 5%;
  top: 2.6%;
}

.p-fv__beans--left-1{
  width: calc(55 / var(--screen-base-size) * 100%);
  max-width: 55px;
  left: 11%;
  top: 30%;
}

.p-fv__beans--right-1{
  width: calc(45 / var(--screen-base-size) * 100%);
  max-width: 45px;
  right: 7%;
  top: 31.5%;
}

.p-fv__beans--right-2{
  width: calc(48 / var(--screen-base-size) * 100%);
  max-width: 48px;
  top: 45.3%;
  right: 1.2%;
}

.p-fv__text-new{
  display: none;
  width: calc(136 / var(--screen-base-size) * 100%);
  max-width: 136px;
  left: 2.2%;
  bottom: 14%;
}

.p-fv__text-catch--1{
  width: calc(192 / var(--screen-base-size) * 100%);
  max-width: 192px;
  left: 21%;
  bottom: 18.5%;
}

.p-fv__text-catch--2{
  width: calc(556 / var(--screen-base-size) * 100%);
  max-width: 556px;
  left: 21%;
  bottom: 13%;
}

.p-fv .u-anime-fluffy{
  animation-play-state: paused;
}

.p-fv.is-ready .u-anime-fluffy{
  animation-play-state: running;
}

/* * * FV /E * * */
/* === Project /E === */


/* === Utility === */
.u-relative{
  position: relative;
}

.u-absolute{
  position: absolute;
}

/* === Utility /E === */


/* === CSSアニメーション === */
.u-anime-fluffy{
  animation: fluffy 4s ease-in-out infinite alternate-reverse
}

@media screen and (max-width: 750px) {
  .u-anime-fluffy{
    animation: fluffy--sp 4s ease-in-out infinite alternate-reverse
  }
}

@keyframes fluffy{ /* ふわふらアニメーション */
  0%{
    transform: translateY(-12px);
  }
  100%{
    transform: translateY(12px);
  }
}

@keyframes fluffy--sp{ /* ふわふらアニメーション SP版 */
  0%{
    transform: translateY(-6px);
  }
  100%{
    transform: translateY(6px);
  }
}

.u-clip-path{
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);

  transition: clip-path .5s ease-out;
  -webkit-transition: -webkit-clip-path .5s ease-out;
}

.u-clip-path.is-active{
  clip-path: inset(0 0% 0 0);
  -webkit-clip-path: inset(0 0% 0 0);
}

.u-slide-up{
  transform: translateY(14px);
  transition: transform .5s ease-out;
}

.u-slide-up.is-active{
  transform: translateY(0px);
}

@media screen and (max-width: 750px) {
  .u-slide-up{
    transform: translateY(8px);
  }
}
/* === CSSアニメーション /E === */