@charset "UTF-8";

/* BASE */
/* ======================================= */
li {
  list-style: none;
}

.breadcrumb {
  display: none;
}

body {
  position: relative;
  height: 100vh;
  font-family: "Noto Sans JP", sans-serif;
}

@media (max-width: 767px) {
  .scrollBackToTop {
    display: none !important;
  }
}

/* CONTENT */
/* ======================================= */

/* NAV 
------------------------------------------ */
.season__nav--wrap {
  grid-column: 1;
  position: fixed;
  z-index: 3;
  bottom: 0;
  transition: opacity 0.5s ease;
}

@media (min-width:1000px) {
  .season__nav--wrap {
    position: sticky;
    top: 194px;
    height: max-content;
    margin-right: 9%;
    margin-bottom: 3%;
    width: min(100%, 622px);
  }
}

.season__nav--inner {
  padding-top: 20px;
  background-image: url("/wp-content/themes/mngtr_basic/img/menu/season/nav_bg.webp");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  width: 100vw;
  padding-inline: 1%;
}

.season__nav {
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  gap: 5px;
  height: clamp(10.3rem, -0.315rem + 25.641vw, 15.3rem);
}

@media (min-width:1000px) {
  .season__nav {
    display: block;
  }
}

.season__nav a:hover {
  opacity: 0.7;
}

@media (min-width:1000px) {
  .season__nav--about {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 38px;
  }

  .season__nav--logo {
    display: block;
    width: min(254px, 40.8%);
    height: auto;
  }

  .season__nav--title {
    display: block;
    width: min(300px, 50%);
    height: auto;
  }
}

.season__spOnly {
  display: none;
}

@media (max-width:1000px) {
  .season__spOnly {
    display: block;
  }

  .season__pcOnly {
    display: none;
  }
}

/* MAIN
------------------------------------------ */
.bg {
  position: relative;
}

.bg::before {
  content: "";
  position: fixed;
  z-index: -1;
  background-image: url(/wp-content/themes/mngtr_basic/img/menu/season/bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom left;
  width: 100vw;
  height: 100vh;
}

.season__content--wrap {
  position: relative;
  display: flex;
  grid-template-columns: 1fr min(609px, 100%);
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 clamp(0rem, -12.619rem + 20.687vw, 27.1rem) 0 clamp(0rem, -11.595rem + 19.008vw, 24.9rem);
}

@media (min-width:1920px) {
  .season__content--wrap {
    position: relative;
    margin: 0 auto;
  }
}

@media (609px<width<1000px) {
  .season__content--wrap {
    flex-direction: column;
    align-items: center;
  }
}

.season__main {
  max-width: 609px;
}

@media (min-width:609px) {
  .season__main {
    margin-top: 63px;
  }
}

.season__mv {
  position: relative;
  z-index: 0;
  max-width: 609px;
  aspect-ratio: 609/ 1016;
}

@media (max-width:609px) {
  .season__mv {
    width: 100vw;
  }
}

.season__mv--deco {
  position: absolute;
  z-index: 1;
  top: 6.1%;
  right: 4.76%;
  width: 34.8%;
}

/* カルーセル */
.slider {

  .slick-slide {
    overflow: hidden;

    img {
      width: revert-layer;
    }
  }


  @media (min-width:609px) {
    .slick-slide {
      border-radius: 26px 26px 0 0;
    }
  }

  .slick-dots {
    top: auto;
    bottom: 3rem;
  }

  .my-next,
  .my-prev {
    position: absolute;
    z-index: 1;
    width: 4.5rem;
    height: 4.5rem;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50vh;
    top: 50%;
    transition: all 0.5s;
  }

  .my-next:hover,
  .my-prev:hover {
    opacity: 0.7;
  }

  .my-next {
    right: 1.5rem;
  }

  .my-prev {
    left: 1.5rem;
  }


  .my-next::before,
  .my-prev::before {
    position: absolute;
    z-index: 2;
    content: "";
    width: clamp(0.7rem, 0.063rem + 1.538vw, 1rem);
    height: clamp(0.7rem, 0.063rem + 1.538vw, 1rem);
    border-top: solid 2px #333;
    border-right: solid 2px #333;
  }

  .my-next::before {
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .my-prev::before {
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%) rotate(220deg);
  }

  .season__mv--title {
    position: absolute;
    z-index: 3;
    bottom: 9.7%;
    width: min(100%, 100vw);
  }

}



.season__dec--wrap {
  background-color: #A31818;
}

/* DESCRIPTION
------------------------------------------ */
.season__intro--description {
  position: relative;
  padding: clamp(5.45rem, -6.758rem + 29.487vw, 11.2rem) 0 clamp(4.3rem, 1.328rem + 7.179vw, 5.7rem);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.06em;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.season__intro--description::after {
  position: absolute;
  content: "";
  display: block;
  background-image: url(/wp-content/themes/mngtr_basic/img/menu/season/intro_deco_01.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.season__intro--description::before {
  position: absolute;
  content: "";
  display: block;
  background-image: url(/wp-content/themes/mngtr_basic/img/menu/season/intro_deco_02.webp);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
  width: 55%;
  height: 100%;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
}


/* CARD
------------------------------------------ */
.season__card {
  width: 100%;
  max-height: 952px;
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
  aspect-ratio: 1218/1920;
  margin-bottom: 45px;
  scroll-margin-top: 0;
}

.season__card.card-01 {
  background-image: url("/wp-content/themes/mngtr_basic/img/menu/season/menu_01.webp");
}

.season__card.card-02 {
  background-image: url("/wp-content/themes/mngtr_basic/img/menu/season/menu_02.webp");
}

.season__card.card-03 {
  background-image: url("/wp-content/themes/mngtr_basic/img/menu/season/menu_03.webp");
}

.season__card.card-04 {
  background-image: url("/wp-content/themes/mngtr_basic/img/menu/season/menu_04.webp");
}

.card-01 {
  display: block;

  .desc {
    padding-top: calc(57/ 609 * 100%);
  }

  .menu {
    margin-top: calc((82/ 609 * 100%) * -1);
  }

  .title {
    margin-top: calc((25/ 609 * 100%) * -1);
  }
}

.card-02 {
  display: block;

  .desc {
    padding-top: calc(57/ 609 * 100%);
  }

  .menu {
    margin-top: calc((99/ 609 * 100%) * -1);
  }

  .title {
    margin-top: calc((36/ 609 * 100%) * -1);
  }
}

.card-03 {
  display: block;

  .desc {
    position: relative;
    z-index: 1;
    padding-top: calc(87/ 609 * 100%);
  }

  .menu {
    position: relative;
    z-index: 0;
    margin-top: calc((173/ 609 * 100%) * -1);
  }

  .title {
    margin-top: calc((74/ 609 * 100%) * -1);
  }
}

.card-04 {
  display: block;

  .desc {
    padding-top: calc(66/ 609 * 100%);
  }

  .menu {
    margin-top: calc(30/ 609 * 100%);
  }

  .title {
    margin-top: calc(7/ 609 * 100%);
  }
}


/* SEASON FOOTER
------------------------------------------ */
.season__footer {
  background-color: #FFF7EA;
}

.season__inline {
  padding-inline: clamp(2.9rem, -0.072rem + 7.179vw, 4.3rem);
}

.season__shop {
  position: relative;
  font-family: "Noto Serif JP", serif;
  display: block;
  width: 100%;
  padding-block: clamp(3rem, -0.185rem + 7.692vw, 4.5rem);
  margin-top: clamp(4rem, 10.667vw, 5.6rem);
  color: #A31818;
  font-weight: 700;
  font-size: clamp(1.8rem, 0.314rem + 3.59vw, 2.5rem);
  line-height: 1;
  text-align: center;
  background-color: #fff;
  letter-spacing: 0.2em;
  border-radius: 15px;
  border: 3px solid #A31818;
  transition: 0.6s;
}

.season__shop::after {
  position: absolute;
  z-index: 1;
  content: "";
  width: clamp(1.8rem, -0.323rem + 5.128vw, 2.8rem);
  height: clamp(1.8rem, -0.323rem + 5.128vw, 2.8rem);
  background-color: #A31818;
  top: 50%;
  transform: translate(50%, -50%);
  right: 8%;
  border-radius: 50vh;
}

.season__shop::before {
  position: absolute;
  z-index: 2;
  content: "";
  width: clamp(0.7rem, 0.063rem + 1.538vw, 1rem);
  height: clamp(0.7rem, 0.063rem + 1.538vw, 1rem);
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  top: 50%;
  transform: translate(50%, -50%) rotate(45deg);
  right: 8.4%;
}

.season__shop:hover,
.allergyInfo:hover {
  opacity: 0.8;
}

.season__attention {
  color: #43210A;
  font-size: clamp(1.3rem, 1.088rem + 0.513vw, 1.4rem);
}

.allergyInfo {
  font-size: clamp(1.5rem, 0.226rem + 3.077vw, 2.1rem);
}

.area__application {
  font-family: "Noto Serif JP", serif;
}

@media (min-width:768px) {
  .area__application {
    padding-inline: 15px;
  }
}

/* ANIMATION
------------------------------------------ */
.fadeup,
.fadeup.lazyloaded {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.6s ease-out, transform 0.8s ease-out;
}

.fadeup.visible,
.fadeup.lazyloaded.visible {
  opacity: 1;
  transform: translateY(0);
}

.stamp {
  display: inline-block;
  transform: scale(1) rotate(0deg);
  opacity: 0;
}

.stamp.visible {
  animation: stamp 0.6s forwards;
}

@keyframes stamp {
  0% {
    transform: translateY(-50px) scale(1) rotate(-10deg);
    opacity: 0;
  }

  50% {
    transform: translateY(0) scale(0.9) rotate(5deg);
    opacity: 1;
  }

  70% {
    transform: scale(1.05) rotate(-2deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.zoom {
  display: inline-block;
  opacity: 0;
}

.slick-active .zoom {
  animation: zoom 0.6s forwards;
}

@keyframes zoom {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}