@charset "UTF-8";

/* ==============================
reset
================================*/
body {
  min-width: 320px;
}

.season video,
.season img {
  display: block;
  max-width: 100%;
}

.scrollBackToTop {
  display: none !important;
}

body main.main,
body:has(.l-lowerNav) .l-main .main {
  padding: 0;
}

/* ==============================
共通css fadeのスピード調整
================================*/

.scroll-in.fade-left {
  animation: fadeleft 0.9s forwards;
}

.scroll-in.fade-right {
  animation: faderight 0.9s forwards;
}


/* ==============================
PC
================================*/
.season {
  position: relative;
  z-index: 0;
  background: url("../img/menu/season_2024hokkaido/bg_pc.webp") no-repeat center center fixed;
  background-size: cover;
}

.season--pc {
  top: 73px;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 100px);
  display: flex;
}

.season--pc .season--pc--right,
.season--pc .season--pc--left {
  display: flex;
  align-items: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc((100% - 525px) / 2);
  height: 100%;
}

.season--pc--left {
  right: calc((100% - 525px) / 2 + 525px);
  justify-content: flex-end;
}

.season--pc--left .season--sns {
  position: absolute;
  margin-inline: min(23%, 163px);
  width: 34rem;
  bottom: 40px;
}

.season--pc--left .season--sns .season--sns--icon {
  margin-top: 0;
  gap: 14px;
}

.season--pc--right {
  left: calc((100% - 525px) / 2 + 525px);
  background-position: right;
}

.season--pc--logo {
  margin-inline: min(23%, 163px);
  margin-top: -130px;
  width: 30rem;
  height: auto;
}

.season--pc--nav {
  display: flex;
  flex-direction: column;
  margin-inline: min(18%, 128px);
  list-style-type: none;
}

.season--pc--nav img {
  width: min(clamp(32.2rem, 10.733rem + 17.889vw, 45.08rem), clamp(32.2rem, 10.733rem + 17.889vh, 45.08rem));
  width: 344px;
}


/* ==============================
sns
================================*/
.season--sns--icon {
  display: flex;
  justify-content: center;
  margin-top: 4%;
  gap: 4%;
}

.season--sns--icon>a {
  display: inline-grid;
  align-items: center;
  justify-items: center;
  width: clamp(5rem, 13.333vw, 7rem);
  height: clamp(5rem, 13.333vw, 7rem);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, 0.8);
}

.season--sns--icon img {
  width: clamp(2.2rem, 5.867vw, 3.08rem);
}

.season--container {
  z-index: 1;
  position: relative;
  max-width: 525px;
  margin-inline: auto;
  overflow: hidden;
  background-color: #fff;
}

.season--intro {
  position: relative;
  width: 100%;
  padding-inline: clamp(1.7rem, 1.391rem + 0.824vw, 2.38rem);
  padding-block: clamp(2rem, 1.636rem + 0.97vw, 2.8rem);
  overflow: hidden;
  background: url("../img/menu/season_2024hokkaido/bg_intro.webp") bottom/cover no-repeat;
}

.season--intro--img {
  width: clamp(28rem, 74.667vw, 39.2rem);
  margin-inline: auto;
}

.season--intro--text {
  padding: clamp(1rem, 0.818rem + 0.485vw, 1.4rem);
  color: #fff;
  font-size: clamp(1.4rem, 1.145rem + 0.679vw, 1.96rem);
  line-height: 1.5;
}

.season--intro--text+.season--intro--text {
  margin-block-start: clamp(0.6rem, 0.491rem + 0.291vw, 0.84rem);
}

.season--intro--text-white {
  background: rgba(255, 255, 255, 0.8);
  color: #000;
  font-size: clamp(1.5rem, 1.227rem + 0.727vw, 2.1rem);
  text-align: center;
  border-radius: 6px;
}


/* ==============================
season contents
================================*/

.season--menu--wrap {
  background: url("../img/menu/season_2024hokkaido/bg.webp") bottom center/ cover no-repeat;
  background-color: #FDF8E2;
  position: relative;
  z-index: -1;
  top: 0;
}

.season--menu--wrap-bg {
  background-color: #FDF8E2;
  position: relative;
  z-index: -1;
  top: 0;
}

.season--menu--body {
  position: relative;
  overflow: hidden;
}

.season--menu--item {
  opacity: 0;
}

.season--menu--text {
  position: relative;
  font-size: clamp(1.4rem, 3.733vw, 1.96rem);
  line-height: calc(21 / 14);
  width: clamp(32.7rem, 87.2vw, 45.78rem);
  margin-inline: auto;
}

.season--menu-1 {
  padding-block-start: clamp(5.2rem, 13.867vw, 7.28rem);

  .season--menu--item--wrap {
    width: clamp(67.8rem, 180.8vw, 94.9rem);
    height: auto;
  }

  .season--menu--item {
    position: relative;
    z-index: 1;
    top: 0;
    left: calc(clamp(12.5rem, 33.333vw, 17.5rem) * -1);
    max-height: 624px;
  }
}

.season--menu-2 {
  padding-block-start: clamp(6.4rem, 17.067vw, 8.96rem);

  .season--menu--item--wrap {
    width: clamp(51rem, 136vw, 71.4rem);
    height: auto;
  }

  .season--menu--item {
    position: relative;
    z-index: 1;
    top: 0;
    left: calc(clamp(8.7rem, 23.2vw, 12.18rem) * -1);
  }
}

.season--menu-3 {
  padding-block-start: clamp(7.4rem, 19.733vw, 10.36rem);
  padding-block-end: clamp(9rem, 24vw, 12.6rem);

  .season--menu--item--wrap {
    width: clamp(61.8rem, 164.8vw, 86.5rem);
    height: auto;
  }

  .season--menu--item {
    position: relative;
    z-index: 1;
    top: 0;
    left: calc(clamp(10.83rem, 28.88vw, 15.162rem) * -1);
    max-height: 519px;
  }
}

.season--menu-4 {
  .season--menu--item--wrap {
    width: clamp(47.1rem, 125.6vw, 66rem);
    height: clamp(54.7rem, 0.2rem + 145.333vw, 76.5rem);
  }

  .season--menu--deco-sub {
    width: clamp(4.5rem, 12vw, 6.3rem);
    position: absolute;
    z-index: 0;
    top: clamp(5.1rem, 13.6vw, 7.14rem);
    left: clamp(24.2rem, 64.533vw, 33.88rem);
  }

  .season--menu--deco {
    width: clamp(36.2rem, 96.533vw, 50.68rem);
    z-index: 1;
    height: auto;
    top: 0;
    left: -42px;
  }

  .season--menu--item {
    position: relative;
    z-index: 2;
    top: clamp(19.9rem, 53.067vw, 27.86rem);
    left: calc(clamp(2.96rem, 7.893vw, 4.144rem) * -1);
  }
}

.season--menu-5 {
  .season--menu--item--wrap {
    width: clamp(54.4rem, 145.067vw, 76.1rem);
    height: clamp(59.2rem, -0.8rem + 160vw, 83.2rem);
    position: relative;
  }

  .season--menu--deco-sub {
    width: clamp(6rem, 16vw, 8.4rem);
    position: absolute;
    z-index: 0;
    top: clamp(3rem, 8vw, 4.2rem);
    left: clamp(21.5rem, 57.333vw, 30.1rem);
  }

  .season--menu--deco {
    width: clamp(53.6rem, 142.933vw, 75.04rem);
    z-index: 1;
    height: auto;
    top: calc(clamp(2rem, 5.333vw, 2.8rem) * -1);
    left: calc(clamp(5.18rem, 13.813vw, 7.252rem) * -1);
  }

  .season--menu--item {
    position: relative;
    z-index: 2;
    top: clamp(21rem, 56vw, 29.4rem);
    left: calc(clamp(9.1rem, 24.267vw, 12.74rem) * -1);
    max-height: 535px;
  }
}

.season--menu-6 {
  .season--menu--item--wrap {
    width: clamp(58rem, 154.667vw, 81.2rem);
    height: clamp(54.8rem, 146.133vw, 76.72rem);
  }

  .season--menu--deco-sub {
    width: clamp(5rem, 13.333vw, 7rem);
    position: absolute;
    top: clamp(5rem, 1.333vw, 7rem);
    left: clamp(25rem, 66.667vw, 35rem);
  }

  .season--menu--deco {
    width: clamp(35.9rem, 95.733vw, 50.26rem);
    height: auto;
    top: 0;
    left: calc(clamp(2.53rem, 6.747vw, 3.542rem) * -1);
  }

  .season--menu--item {
    position: relative;
    z-index: 1;
    top: clamp(13.7rem, 36.533vw, 19.18rem);
    left: calc(clamp(9.6rem, 25.6vw, 13.44rem) * -1);
  }
}

.season--menu-7 {
  padding-block-start: clamp(3rem, 8vw, 4.2rem);

  .season--menu--item--wrap {
    width: clamp(56.6rem, 150.933vw, 79.24rem);
    height: auto;
  }

  .season--menu--item {
    position: relative;
    z-index: 1;
    top: 0;
    left: calc(clamp(7.9rem, 21.067vw, 11.06rem) * -1);
  }
}

.season--menu--deco {
  z-index: 1;
  position: absolute;
}

.season--menu--deco.season--anime.is-active {
  animation: shake-left-right 1s linear both;
}

@keyframes shake-left-right {
  0%,
  100% {
    transform: rotate(0deg);
    transform-origin: 50% 50%;
  }

  16% {
    transform: rotate(8deg);
  }

  32%,
  64% {
    transform: rotate(-10deg);
  }

  48%,
  80% {
    transform: rotate(10deg);
  }
}

.season--menu--deco-sub {
  z-index: 1;
}

.season--menu--deco-sub.season--anime-sub.is-active {
  animation: 0.3s pop 0.7s linear both;
}

@keyframes pop {
  0% {
    transform: scale(0);
  }

  60% {
    transform: scale(1.2);
  }

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

.season--note--wrap {
  padding-block: clamp(6rem, 1.6vw, 8.4rem);
  margin-inline: clamp(1.5rem, 4vw, 2.1rem);
}

.season--note {
  padding: clamp(1.8rem, 4.8vw, 2.52rem);
  background-color: #FFFFFF;
  font-size: clamp(1.3rem, 3.467vw, 1.82rem);
}

.season--share {
  padding-block-start: clamp(5.6rem, 4.582rem + 2.715vw, 7.84rem);
  text-align: center;
}

.season--share>img {
  margin-inline: auto;
}

.season--info {
  margin-inline: clamp(1.6rem, 1.309rem + 0.776vw, 2.24rem);
  padding-block: clamp(5rem, 4.091rem + 2.424vw, 7rem);
  font-size: clamp(1.4rem, 1.145rem + 0.679vw, 1.96rem);
  text-align: center;
}

.season--info--card {
  display: flex;
  margin-top: 1em;
  gap: 5.2%;
}

.season--info--card>a {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 15px;
}

.season--info--card>a p {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 10%;
  color: #fff;
  background-color: #000;
}

.season--info--card>a:nth-of-type(1) p img {
  width: clamp(9.3rem, 24.8vw, 13rem);
  height: auto;
}

.season--info--card>a:nth-of-type(2) p img {
  width: clamp(11.8rem, 31.467vw, 16.52rem);
  height: auto;
}

.season--info--button {
  padding-block-start: clamp(5rem, 4.091rem + 2.424vw, 7rem);
}

.season--info--button a {
  display: block;
  position: relative;
  margin-inline: auto;
  padding: 1em;
  border-radius: 1.2em;
  font-weight: 500;
  font-size: clamp(1.6rem, 1.309rem + 0.776vw, 2.24rem);
  line-height: 1;
  text-align: center;
}

.season--info--button a::before {
  display: inline-block;
  position: absolute;
  top: 40%;
  left: 12%;
  width: 0.55em;
  height: 0.55em;
  transform: rotate(45deg);
  border-top: 2px solid;
  border-right: 2px solid;
  content: "";
}

.season--info--button a:nth-of-type(1) {
  border: 1px solid #d51717;
  background-color: #d51717;
  color: #fff;
}

.season--info--button a:nth-of-type(2) {
  margin-top: 1em;
  border: 1px solid #000;
}

.season--info--allergy {
  margin-block-start: clamp(4rem, 3.273rem + 1.939vw, 5.6rem);
  text-align: right;
}

.season--info--allergy a {
  color: #821923;
  font-weight: 700;
  font-size: clamp(1.3rem, 1.064rem + 0.63vw, 1.82rem);
}

@media screen and (max-width: 1200px) {
  .season--pc--left .season--sns {
    display: none;
  }

  .season--pc--logo {
    display: none;
  }

  .season--pc--nav {
    display: none;
  }
}

@media screen and (max-width: 960px) {
  .season--pc {
    top: 60px;
  }
}

@media screen and (max-width: 768px) {
  .season--share>img {
    width: 101px;
  }
}

@media screen and (max-width: 525px) {
  .season--pc {
    display: none;
  }
}

@media not all and (max-width: 768px) {
  .season--menu-1 .season--menu--name {
    margin-block-start: -23rem;
  }
}

@media (769px <=width <=1020px) {
  .season--menu-1 .season--menu--text {
    padding-block-end: 3.6rem;
  }
}

@media (hover: hover) {
  .season a {
    transition: 0.8s opacity;
  }

  .season a:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}