html {
  overflow-y: scroll;
  font-size: 62.5%;
}

:root {
  --MainColor: #ffef81;
  --SecondColor: #fff7af;
  --CommonColorBrown: #6a3906;
  --CommonColorYellow: #ffe600;
  --CommonColorRed: #ff0028;
  --CommonColorPink: #ff00b5;
  --CommonColorEmerald: #00b485;
  --CommonColorGreen: #70b900;
  --CommonColorWhite: #fff;
  --BaseFontRegular: 400;
  --BaseFontMedium: 500;
  --BaseFontBold: 700;
  --FontSizeClamp20: clamp(16px, 11.416px + 0.596vw, 20px);
  --FontSizeClamp24: clamp(16px, 6.832px + 1.192vw, 24px);
  --FontSizeClamp32: clamp(22px, 10.539px + 1.49vw, 32px);
  --FontSizeSP22: 2.93vw;
  --FontSizeSP26: 3.46vw;
  --FontSizeSP28: 3.73vw;
  --FontSizeSP32: 4.26vw;
  --FontSizeSP36: 4.8vw;
  --FontSizeSP38: 5.066vw;
  --FontSizeSP48: 6.4vw;
}

body {
  font-family:
    "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
    "メイリオ", "Meiryo", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO", "verdana",
    sans-serif;
  width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin: 0;
  position: relative;
  color: var(--CommonColorBrown);
  background: var(--CommonColorYellow);
}

body.s {
  overflow: hidden;
}

body.ScrollLock {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

a {
  text-decoration: none;
  transition: all 0.2s ease-out;
  text-decoration: none;
}

a:hover {
  transition: all 0.2s ease-out;
  cursor: pointer;
}

ol,
ul,
li {
  list-style: none;
  padding: 0;
}

img {
  max-width: 100%;
  width: 100%;
  height: auto;
}

.l ._pc {
  display: block;
}

._pc {
  display: none;
}

.l ._sp {
  display: none;
}

._sp {
  display: block;
}

/* ================================
        Layout
================================ */
.Center {
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  width: min(1240px, 86.11vw);
  position: relative;
  text-align: center;
}

.s .Center {
  padding-left: 4vw;
  padding-right: 4vw;
  width: 100%;
}

.s .CommonBoxWrap {
  overflow: hidden;
}

.CommonBoxArea {
  width: min(1380px, 95.83vw);
  padding: 0 20px;
  margin: 0 auto;
}

.s .CommonBoxArea {
  width: 100%;
  padding: 25.73vw 2.66vw 2.66vw 2.66vw;
}

.CommonBox {
  background: var(--MainColor);
  border-radius: 30px;
  padding: min(130px, 9.02vw) 0 clamp(25px, -26.572px + 6.706vw, 70px);
  position: relative;
  margin-bottom: min(197px, 13.68vw);
  overflow-x: clip;
}

.s .CommonBox {
  padding: 8.933vw 0;
  margin-bottom: 23.73vw;
  overflow-x: visible;
}

.CommonBoxArea .CommonBox:last-child {
  margin-bottom: 0;
}

/* ================================
        Text
================================ */
.CommonList li {
  text-indent: -1em;
  padding-left: 1em;
}

.Marker {
  background: linear-gradient(transparent 60%, var(--CommonColorYellow) 0);
  padding: 0 4px;
  margin-right: 3px;
}

.Bold {
  font-weight: var(--BaseFontBold);
}

/* ================================
        Title
================================ */
#Promotion h2 {
  margin: 0 auto;
  position: relative;
}

#Promotion .CommonTitleDeco {
  position: absolute;
  width: min(160px, 11.11vw);
  z-index: -1;
}

.s #Promotion .CommonTitleDeco {
  width: 11.86vw;
}

#Promotion .CommonTitleDeco span {
  display: block;
}

/* ================================
        Button
================================ */
.CommonBtn a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 180px;
  margin: 0 auto;
  box-shadow: 4px 5px 0 0 var(--CommonColorBrown);
  transition: 0.3s;
  font-size: clamp(12px, 7.416px + 0.596vw, 16px);
  font-weight: var(--BaseFontMedium);
  color: var(--CommonColorWhite);
  border-radius: 50px;
  text-decoration: none;
  padding: 12px;
  line-height: 1;
}

.s .CommonBtn a {
  max-width: 50.66vw;
  font-size: var(--FontSizeSP32);
  padding: 4.66vw;
}

.CommonBtn a:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  width: 8px;
  height: 9px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.s .CommonBtn a:after {
  right: 4vw;
  width: 2.26vw;
  height: 2.66vw;
}

.CommonBtn a:hover {
  text-decoration: none;
  transform: translateY(5px);
  box-shadow: none;
}

/* --------------
	Recipe Button
-----------------*/
.Recipe .CommonBtn {
  margin-top: auto;
}

.Recipe .CommonBtn a:after {
  background: url(../img/icon-arrow-white.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  color: var(--CommonColorWhite);
  border: none;
}

/* Recipe1 */
.Recipe .Recipe1 .CommonBtn a {
  background: var(--CommonColorRed);
}

/* Recipe2 */
.Recipe .Recipe2 .CommonBtn a {
  background: var(--CommonColorEmerald);
}

/* Recipe3 */
.Recipe .Recipe3 .CommonBtn a {
  background: var(--CommonColorPink);
}

/* Recipe4 */
.Recipe .Recipe4 .CommonBtn a {
  background: var(--CommonColorGreen);
}

/* --------------
	Intro Button
-----------------*/
.Intro .CommonBtn a {
  background: var(--CommonColorYellow);
  color: var(--CommonColorBrown);
  border: 2px solid var(--CommonColorBrown);
}

.Intro .CommonBtn a:after {
  background: url(../img/icon-arrow-brown.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

/* ================================
			FadeIn
================================ */
.FadeIn {
  opacity: 0;
}

.FadeIn.DownUp {
  opacity: 0;
  transform: translate(0, 50px);
}

.FadeIn.UpDown {
  opacity: 0;
  transform: translate(0, -20px);
}

.FadeIn.LeftUp {
  opacity: 0;
  transform: translate(30px, 30px);
}

.FadeIn.RightUp {
  opacity: 0;
  transform: translate(-30px, 30px);
}

.FadeIn.Up {
  opacity: 0;
  transform: scale(0.9);
}

.FadeIn.ScrollIn {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  transition-property: opacity, transform;
  transition-duration: 400ms;
  transition-timing-function: ease-in;
}

.FadeIn.Up.ScrollIn {
  transition-duration: 500ms;
}

/* ================================
        AnimationIn
================================ */
.AnimationIn.Bounce {
  opacity: 0;
  transform: scale(0.8);
}

.AnimationIn.Bounce.ScrollIn {
  animation: popBounce 0.6s ease-out forwards;
  animation-delay: 0.4s;
}

@keyframes popBounce {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  60% {
    opacity: 1;
    transform: scale(1.1);
  }

  80% {
    transform: scale(0.97);
  }

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

/* ================================
        Header
================================ */
.HeaderArea {
  display: none;
}

.s .HeaderArea {
  display: block;
  position: fixed;
  padding: 2vw 2.66vw 2.66vw 2.66vw;
  top: 0;
  right: 0;
  z-index: 9999;
  transition: opacity 0.6s ease;
  opacity: 0;
  pointer-events: none;
}

.HeaderArea.isShown {
  opacity: 1;
  pointer-events: auto;
}

.HeaderMenu {
  position: relative;
  width: 14.66vw;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--CommonColorBrown);
  border-radius: 50%;
  box-shadow: 4px 4px 0 0 var(--CommonColorWhite);
}

.HeaderMenu._active {
  background: none;
  box-shadow: none;
}

.HeaderMenuLine {
  position: absolute;
  inset: auto;
  width: 7.46vw;
  height: 0.8vw;
  background: #fff;
  border-radius: 10px;
  transition: 0.3s;
  transform-origin: center;
}

.HeaderMenuLineTop {
  top: 35%;
}

.HeaderMenuLineBottom {
  bottom: 35%;
}

.HeaderMenuLineTop._active {
  transform: rotate(45deg);
  top: 50%;
}

.HeaderMenuLineBottom._active {
  transform: rotate(-45deg);
  top: 50%;
}

.HeaderGnav {
  background: url(../img/lead-anchor-bg.png) top center repeat;
  background-size: 2.4vw 2.4vw;
  display: none;
  top: 0;
  left: 0;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 9998;
}

.HeaderGnavMenu {
  align-items: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  height: 100%;
  width: 100%;
}

.HeaderGnavMenu li {
  padding: 6.2vw 0;
  text-align: center;
  position: relative;
  display: block;
  width: 70vw;
}

.HeaderGnavMenu li::after {
  position: absolute;
  content: "";
  width: 3.73vw;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0;
}

.HeaderGnavMenu li:nth-child(odd)::after {
  background: url(../img/menu-arrow-orange.png) center no-repeat;
  background-size: 100%;
}

.HeaderGnavMenu li:nth-child(even)::after {
  background: url(../img/menu-arrow-yellow.png) center no-repeat;
  background-size: 100%;
}

.HeaderGnavMenu li a {
  color: var(--CommonColorWhite);
  font-size: var(--FontSizeSP48);
  font-weight: var(--BaseFontBold);
  position: relative;
  z-index: 100;
  width: 70vw;
  display: block;
}

.HeaderGnavMenu li a::after {
  position: absolute;
  content: "";
  width: 42vw;
  aspect-ratio: 315 / 21;
  bottom: -4vw;
  right: 0;
  left: 0;
  margin: auto;
}

.HeaderGnavMenu li:nth-child(odd) a::after {
  background: url(../img/menu-line-orange.png) center no-repeat;
  background-size: 100%;
}

.HeaderGnavMenu li:nth-child(even) a::after {
  background: url(../img/menu-line-yellow.png) center no-repeat;
  background-size: 100%;
}

.HeaderGnavMenu li a:hover {
  opacity: 1;
  text-decoration: none;
}

/* ================================
        Mv
================================ */
.Mv {
  background: var(--CommonColorYellow);
  width: 100%;
  height: min(1020px, 70.83vw, 83vh);
  /* aspect-ratio: 1440 / 1090; */
  position: relative;
}

.s .Mv {
  max-height: none;
  height: 100%;
  aspect-ratio: 750 / 1335;
}

.MvLoader {
  height: 100%;
  background: var(--CommonColorYellow);
}

.MvLoaderImg {
  width: min(300px, 20.83vw, 24.41vh);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.s .MvLoaderImg {
  width: 31.33vw;
}

.MvClip {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* aspect-ratio: 1440 / 1090; */
  height: min(1020px, 70.83vw, 83vh);
}

.s .MvClip {
  max-height: none;
  height: 100%;
  aspect-ratio: 750 / 1335;
}

.MvLayer1 {
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/mv-bg-1.png) top center / cover no-repeat;
  width: 100%;
  height: min(1020px, 70.83vw, 83vh);
  /* aspect-ratio: 1440 / 1090; */
}

.s .MvLayer1 {
  background: url(../img/mv-bg-1-sp.png) top center / cover no-repeat;
  max-height: none;
  height: 100%;
  aspect-ratio: 750 / 1335;
}

.MvLayer2 {
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/mv-bg-2.png) top center / 100% no-repeat;
  width: 100%;
  height: min(1020px, 70.83vw, 83vh);
  /* aspect-ratio: 1440 / 1090; */
}

.s .MvLayer2 {
  background: url(../img/mv-bg-2-sp.png) top center / 100% no-repeat;
  max-height: none;
  height: 100%;
  aspect-ratio: 750 / 1335;
}

.MvLayer3 {
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/mv-bg-3.png) bottom center / cover no-repeat;
  width: 100%;
  height: min(1020px, 70.83vw, 83vh);
  /* aspect-ratio: 1440 / 1090; */
}

.s .MvLayer3 {
  background: url(../img/mv-bg-3-sp.png) bottom center / cover no-repeat;
  max-height: none;
  height: 100%;
  aspect-ratio: 750 / 1335;
}

.MvLayer1,
.MvLayer2,
.MvLayer3 {
  opacity: 0;
  transition: 1s ease;
}

.MvLayer1.isShown,
.MvLayer2.isShown,
.MvLayer3.isShown {
  opacity: 1;
}

.MvInner {
  width: min(1440px, 100vw);
  margin-inline: auto;
  height: 100%;
  position: relative;
  padding: min(30px, 2.08vw, 2.44vh);
}

.s .MvInner {
  width: 100%;
  padding: 0;
}

.MvLogo {
  width: min(140.5px, 9.756vw, 10.7vh);
  position: absolute;
  top: min(30px, 2.08vw);
  right: min(20px, 1.388vw);
  z-index: 100;
}

.s .MvLogo {
  width: 17.86vw;
  top: 2vw;
  left: 2.4vw;
}

.s .MvTitleArea {
  transform: translate(1vw, 36.53vw);
}

.MvTitleList {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: min(40px, 2.777vw, 3.25vh);
  transform: translateX(max(-118px, -8.19vw, -19.25vh));
}

.s .MvTitleList {
  gap: 1.333vw;
  transform: translateX(-8vw);
}

.MvBubble {
  width: min(207px, 14.37vw, 16.84vh);
}

.s .MvBubble {
  width: 19.46vw;
  margin-top: 3vw;
}

.MvBubbleText {
  width: min(457px, 31.73vw, 37.18vh);
}

.s .MvBubbleText {
  width: 43vw;
}

.MvBubbleText span {
  transform: translateY(max(-30px, -2.08vw, -4.89vh));
  display: block;
}

.s .MvBubbleText span {
  transform: translateY(-2vw);
}

.Mv h1 {
  width: min(870.5px, 60.45vw, 70.84vh);
  margin: 0 auto;
  margin-top: max(-25px, -1.736vw);
}

.s .Mv h1 {
  width: 82.13vw;
  margin-top: -2.88vw;
}

.MvMainPkg {
  width: min(553px, 38.4vw, 44.98vh);
  padding: min(14px, 0.97vw) 0 min(25px, 1.73vw, 2.03vh);
  position: relative;
  margin: 0 auto;
  transform: translate(0, -28%);
  z-index: 100;
  opacity: 0;
  /* opacity: 1; */
  /*表示確認用*/
  transition: opacity 0.32s;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.s .MvMainPkg {
  width: 63.6vw;
  transform: translate(0, -14.3%);
  padding: 39.86vw 0 0;
}

/* --------------
	Drop Animation
-----------------*/
.MvMainPkg.drop {
  animation: drop 0.2s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
  transform: translateX(0) translateY(-28%);
}

@keyframes drop {
  0% {
    transform: translateX(0) translateY(-28%);
    opacity: 1;
  }

  80% {
    transform: translateX(0) translateY(4%);
    opacity: 1;
  }

  100% {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
}

@media screen and (max-width: 768px) {
  @keyframes drop {
    0% {
      transform: translateX(0) translateY(-14.3%);
      opacity: 1;
    }

    80% {
      transform: translateX(0) translateY(-2%);
      opacity: 1;
    }

    100% {
      transform: translateX(0) translateY(0);
      opacity: 1;
    }
  }
}

.MvMainPkg span {
  transform: translateX(min(100.5px, 6.979vw, 8.18vh));
  display: block;
}

.s .MvMainPkg span {
  transform: translateX(12.67vw);
}

/* --------------
	Squash Animation
-----------------*/
.MvMainPkg.squash {
  animation: squash3D 0.6s ease-in forwards;
  transform-origin: bottom center;
  transform-style: preserve-3d;
}

@keyframes squash3D {
  0% {
    transform: rotateX(0deg) scale(1);
  }

  35% {
    transform: scaleY(0.6);
  }

  75% {
    transform: perspective(1000px) rotateX(-30deg) translateZ(0px);
  }

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

/* --------------
	Recover Animation
-----------------*/
.MvSubText {
  width: min(575px, 39.9vw, 46.79vh);
  margin: 0 auto;
}

.s .MvSubText {
  width: 86vw;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8vw;
  margin: auto;
}

.MvRecipe li {
  position: absolute;
  z-index: 1;
}

.MvRecipe li:nth-of-type(1) {
  width: min(363.5px, 25.24vw, 29.57vh);
  top: min(376px, 26.1vw, 30.6vh);
  left: calc(50% - min(795.5px, 55.24vw, 64.74vh));
}

.s .MvRecipe li:nth-of-type(1) {
  width: 38.26vw;
  top: 14.13vw;
  left: calc(50% - 50vw - 4.8vw);
}

.MvRecipe li:nth-of-type(2) {
  width: min(436px, 30.27vw, 35.49vh);
  top: min(320px, 22.22vw, 26.04vh);
  left: calc(50% - max(-396px, -27.5vw, -32.23vh));
}

.s .MvRecipe li:nth-of-type(2) {
  width: 46.8vw;
  top: 11.13vw;
  left: calc(50% + 50vw - 32vw);
}

.MvRecipe li:nth-of-type(3) {
  width: min(387px, 26.87vw, 31.49vh);
  top: min(660px, 45.83vw, 53.65vh);
  left: calc(50% - min(712.5px, 49.479vw, 57.97vh));
}

.s .MvRecipe li:nth-of-type(3) {
  width: 38.6vw;
  top: 126.93vw;
  left: calc(50% - 50vw - 4.8vw);
}

.MvRecipe li:nth-of-type(4) {
  width: min(377.5px, 26.2vw, 30.71vh);
  top: min(670px, 46.52vw, 54.5vh);
  left: calc(50% - max(-343px, -24.09vw, -27.92vh));
}

.s .MvRecipe li:nth-of-type(4) {
  width: 40.53vw;
  top: 126.93vw;
  left: calc(50% + 50vw - 31.73vw);
}

/* --------------
	Spice Animation
-----------------*/
.MvSpicePop li {
  position: absolute;
  z-index: 100;
}

.MvSpicePop .toFinal .Move {
  opacity: 1;
}

.MvSpicePop .Move {
  width: 100%;
  height: 100%;
  position: relative;
}

.MvSpicePop li.Item1 ._parts1,
.MvSpicePop li.Item1 ._parts2,
.MvSpicePop li.Item2 ._parts1,
.MvSpicePop li.Item2 ._parts2 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.MvSpicePop li.Item3 ._parts1,
.MvSpicePop li.Item3 ._parts2,
.MvSpicePop li.Item4 ._parts1,
.MvSpicePop li.Item4 ._parts2 {
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
}

@keyframes shakeVT {

  0%,
  100% {
    top: 0;
  }

  50% {
    top: 4%;
  }
}

@keyframes shakeVB {

  0%,
  100% {
    bottom: 0;
  }

  50% {
    bottom: 4%;
  }
}


/* ------左上-------- */
/* 最終位置 */
.MvSpicePop li.Item1 {
  width: min(461px, 32.01vw, 37.51vh);
  top: min(67px, 4.65vw, 5.45vh);
  left: calc(50% - min(731px, 50.76vw, 59.45vh));
  height: 100%;
}

.s .MvSpicePop li.Item1 {
  width: 38.4vw;
  top: 26vw;
  left: calc(50% - 50vw - 9.6vw);
}


/* Item1 開始位置テスト確認用 */
/* .MvSpicePop li.Item1 ._parts1 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transform: translate(320px, 150px) scale(0.6) rotate(17deg);
}

.MvSpicePop li.Item1 ._parts2 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transform: translate(310px, -123px) scale(0.6) rotate(12deg);
} */


/* Item1 Parts1 開始位置 */
.MvSpicePop .Item1.toFinal .Move ._parts1 {
  animation:
    arcLT1 3s linear forwards,
    shakeVT 1.8s ease-in-out forwards 2;
  transform-origin: left center;
}

@keyframes arcLT1 {
  0% {
    transform: translate(min(420px, 29.16vw, 41.18vh), min(150px, 10.41vw, 14.71vh)) scale(0.6) rotate(17deg);
    opacity: 0.8;
  }

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

/* Item1 Parts2 開始位置 */
.MvSpicePop .Item1.toFinal .Move ._parts2 {
  animation:
    arcLT2 2.2s ease-out forwards,
    shakeVT 1.6s ease-in-out forwards 2;
  transform-origin: left center;
}

@keyframes arcLT2 {
  0% {
    transform: translate(min(510px, 35.41vw, 50vh), max(-123px, -8.54vw, -12.06vh)) scale(0.6) rotate(12deg);
    opacity: 0.8;
  }

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


/* ------右上-------- */
/* 最終位置 */
.MvSpicePop li.Item2 {
  width: min(483px, 33.54vw, 39.28vh);
  top: min(106px, 7.36vw, 8.62vh);
  left: calc(50% + min(278px, 19.3vw, 22.62vh));
  height: 100%;
}

.s .MvSpicePop li.Item2 {
  width: 44vw;
  top: 29vw;
  left: calc(50% + 50vw - 29vw);
}




/* Item2 開始位置テスト確認用 */
/* .MvSpicePop li.Item2 ._parts1 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transform: translate(-310px, 110px) scale(0.7) rotate(-4deg);
}

.MvSpicePop li.Item2 ._parts2 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transform: translate(-390px, -150px) scale(0.5) rotate(-11deg);
} */

/* Item2 Parts1 開始位置 */
.MvSpicePop .Item2.toFinal .Move ._parts1 {
  animation:
    arcRT1 3.3s ease-out forwards,
    shakeVT 1.4s ease-in-out forwards 2;
  transform-origin: left center;
}

@keyframes arcRT1 {
  0% {
    transform: translate(max(-510px, -35.41vw, -50vh), min(110px, 7.63vw, 10.78vh)) scale(0.9) rotate(-4deg);
    opacity: 0.8;
  }

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

/* Item2 Parts2 開始位置 */
.MvSpicePop .Item2.toFinal .Move ._parts2 {
  animation:
    arcRT2 2.6s ease-out forwards,
    shakeVT 1s ease-in-out forwards 2;
  transform-origin: left center;
}

@keyframes arcRT2 {
  0% {
    transform: translate(max(-390px, -27.08vw, -38.24vh), max(-150px, -10.41vw, -14.71vh)) scale(0.5) rotate(-11deg);
    opacity: 0.8;
  }

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

/* ------左下-------- */
/* 最終位置 */
.MvSpicePop li.Item3 {
  width: min(561px, 38.95vw, 45.62vh);
  bottom: max(-26px, -1.8vw, -2.11vh);
  left: calc(50% - min(775px, 53.8vw, 63.01vh));
  height: 100%;
}

.s .MvSpicePop li.Item3 {
  width: 48.8vw;
  bottom: 40vw;
  left: calc(50% - 50vw - 19vw);
}

/* Item3 開始位置テスト確認用 */
/* .MvSpicePop li.Item3 ._parts1 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transform: translate(350px, -400px) scale(0.6) rotate(17deg);
}

.MvSpicePop li.Item3 ._parts2 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transform: translate(340px, -460px) scale(0.6) rotate(12deg);
} */


/* Item3 Parts1 開始位置 */
.MvSpicePop .Item3.toFinal .Move ._parts1 {
  animation:
    arcLB1 3.3s linear forwards,
    shakeVB 0.9s ease-in-out forwards 3;

  transform-origin: left center;
}


@keyframes arcLB1 {
  0% {
    transform: translate(min(230px, 15.97vw, 22.55vh), max(-600px, -41.66vw, -58.82vh)) scale(1.3) rotate(17deg);
    opacity: 0.8;
  }

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

/* Item3 Parts2 開始位置 */
.MvSpicePop .Item3.toFinal .Move ._parts2 {
  animation:
    arcLB2 2.5s ease-out forwards,
    shakeVB 1.6s ease-in-out forwards 2;
  transform-origin: left center;
}

@keyframes arcLB2 {
  0% {
    transform: translate(min(340px, 23.61vw, 33.33vh), max(-460px, -31.94vw, -45.1vh)) scale(0.6) rotate(12deg);
    opacity: 0.8;
  }

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

/* ------右下-------- */
/* 最終位置 */
.MvSpicePop li.Item4 {
  width: min(545px, 37.84vw, 44.33vh);
  bottom: max(-26px, -1.8vw, -2.11vh);
  left: calc(50% + min(204px, 14.16vw, 16.6vh));
  height: 100%;
}

.s .MvSpicePop li.Item4 {
  width: 50.93vw;
  bottom: 39vw;
  left: calc(50% + 50vw - 29.4vw);
}


/* Item4 開始位置テスト確認用 */
/* .MvSpicePop li.Item4 ._parts1 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transform: translate(-220px, -352px) scale(0.6) rotate(7deg);
}

.MvSpicePop li.Item4 ._parts2 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transform: translate(-350px, -313px) scale(0.6) rotate(12deg);
} */

/* Item4 Parts1 開始位置 */
.MvSpicePop .Item4.toFinal .Move ._parts1 {
  animation:
    arcRB1 3.3s linear forwards,
    shakeVB 1.8s ease-in-out forwards 2;
  transform-origin: left center;
}

@keyframes arcRB1 {
  0% {
    transform: translate(max(-220px, -15.27vw, -21.57vh), max(-352px, -24.44vw, -34.51vh)) scale(1.2) rotate(7deg);
    opacity: 0.8;
  }

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

/* Item4 Parts2 開始位置 */
.MvSpicePop .Item4.toFinal .Move ._parts2 {
  animation: arcRB2 3.2s ease-out forwards,
    shakeVB 0.6s ease-in-out forwards 3;
  transform-origin: left center;
}

@keyframes arcRB2 {
  0% {
    transform: translate(max(-350px, -24.3vw, -34.31vh), max(-600px, -41.66vw, -58.82vh)) scale(0.6) rotate(12deg);
    opacity: 0.8;
  }

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

/* --------------
	Common Animation
-----------------*/
.Mv .DownUp {
  opacity: 0;
  transform: translate(0, 50px);
}

.Mv .DownUp.isShown {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  transition-property: opacity, transform;
  transition-duration: 400ms;
  transition-timing-function: ease-in;
}

.Mv .Up {
  opacity: 0;
  transform: scale(0.9);
}

.Mv .Up.isShown {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  transition-property: opacity, transform;
  transition-duration: 500ms;
  transition-timing-function: ease-in;
}

.Mv .Up {
  opacity: 0;
  transform: scale(0.9);
}

.Mv .Up.isShown {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  transition-property: opacity, transform;
  transition-duration: 500ms;
  transition-timing-function: ease-in;
}

.Mv .BounceUp {
  opacity: 0;
  transform: scale(0.8);
}

.Mv .BounceUp.isShown {
  animation: popBounce 0.6s ease-out forwards;
  animation-delay: 0.4s;
}

@keyframes popBounce {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  60% {
    opacity: 1;
    transform: scale(1.2);
  }

  80% {
    transform: scale(0.97);
  }

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

/* ================================
        Lead
================================ */
.Lead {
  background: var(--SecondColor);
}

.s .Lead {
  background: none;
}

.LeadAnchorArea {
  width: 100%;
  background: url(../img/lead-anchor-bg.png) top center repeat;
  background-size: 18px 18px;
  position: relative;
  padding: 20px 20px 25px 20px;
}

.s .LeadAnchorArea {
  display: none;
  background: none;
}

.LeadAnchor {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: min(40px, 2.77vw);
}

.LeadAnchor li:nth-of-type(1) {
  width: min(239px, 16.59vw);
}

.LeadAnchor li:nth-of-type(2) {
  width: min(249px, 17.29vw);
}

.LeadAnchor li:nth-of-type(3) {
  width: min(199px, 13.81vw);
}

.LeadAnchor li:nth-of-type(4) {
  width: min(183px, 12.7vw);
}

.LeadAnchor a {
  display: block;
}

.LeadAnchor a:hover {
  animation: bounce 1s infinite;
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

.LeadInner {
  background: url(../img/lead-bg.png) top center / cover no-repeat;
  padding-top: min(100px, 6.944vw);
  padding-bottom: min(350px, 24.3vw);
  width: 100%;
  position: relative;
}

.s .LeadInner {
  background: url(../img/lead-bg-sp.png) top center / 100% no-repeat;
  padding-top: 13.6vw;
  padding-bottom: 40vw;
  margin-top: -4vw;
}

.LeadtextArea {
  position: relative;
}

.LeadOrnamentLeft {
  position: absolute;
  top: min(82px, 5.69vw);
  left: calc((1440px - 100vw) * 0.02);
  aspect-ratio: 472 / 294;
  width: min(236px, 16.38vw);
}

.s .LeadOrnamentLeft {
  top: -4vw;
  left: -4vw;
  width: 19.46vw;
}

.LeadOrnamentIllust {
  position: absolute;
  top: -12px;
  right: min(35px, 2.43vw);
  width: min(271px, 18.81vw);
}

.s .LeadOrnamentIllust {
  top: 47vw;
  right: 7vw;
  width: 23.2vw;
}

.Leadtext {
  position: relative;
  font-size: var(--FontSizeClamp32);
  font-weight: var(--BaseFontMedium);
  line-height: 1.6;
  padding-bottom: min(41px, 2.84vw);
  letter-spacing: 0.8px;
}

.s .Leadtext {
  font-size: var(--FontSizeSP38);
  line-height: 2;
  padding-bottom: 0;
}

.Leadtext ._small {
  font-size: var(--FontSizeClamp20);
}

.s .Leadtext ._small {
  font-size: var(--FontSizeSP28);
}

.s .Leadtext ._small._block {
  display: block;
  padding: 2vw 0;
}

.Leadtext ._bold {
  font-weight: var(--BaseFontBold);
}

.LeadProblemtext {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding-top: min(32px, 2.22vw);
}

.s .LeadProblemtext {
  gap: 1.86vw;
  padding-top: 0;
  margin-left: 7vw;
}

.LeadProblemtext span {
  position: relative;
}

.LeadProblemtext span:nth-of-type(2) {
  width: min(219px, 15.2vw);
}

.s .LeadProblemtext span:nth-of-type(2) {
  width: 34.53vw;
}

.LeadProblemtext span:nth-of-type(3) {
  position: relative;
}

.LeadProblemtext span:nth-of-type(3)::after {
  content: "";
  position: absolute;
  top: max(-45px, -3.125vw);
  right: max(-45px, -3.125vw);
  aspect-ratio: 94 / 110;
  width: min(47px, 3.26vw);
  background: url(../img/lead-tornado.png) center / 100% no-repeat;
}

.s .LeadProblemtext span:nth-of-type(3)::after {
  top: -10.46vw;
  right: -3vw;
  width: 8.13vw;
}

.LeadProblemArea {
  width: min(1370px, 95.13vw);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-bottom: min(124px, 8.61vw);
}

.s .LeadProblemArea {
  width: 100vw;
  padding: 0 4vw;
  flex-direction: column;
  align-items: center;
  padding-top: 2.86vw;
  padding-bottom: 4.8vw;
}

.LeadProblemArea li {
  position: relative;
}

.LeadProblemArea li span {
  display: block;
}

.LeadProblemArea li:nth-of-type(1) {
  width: min(330px, 22.91vw);
  z-index: 2;
}

.s .LeadProblemArea li:nth-of-type(1) {
  width: 47.73vw;
  z-index: 4;
}

.LeadProblemArea li:nth-of-type(1) span {
  transform: translate(min(167px, 11.59vw), min(28px, 1.94vw));
}

.s .LeadProblemArea li:nth-of-type(1) span {
  transform: translate(-15.475vw, 0vw);
}

.LeadProblemArea li:nth-of-type(2) {
  width: min(298px, 20.69vw);
  z-index: 4;
}

.s .LeadProblemArea li:nth-of-type(2) {
  width: 45.86vw;
  z-index: 2;
}

.LeadProblemArea li:nth-of-type(2) span {
  transform: translate(min(93px, 6.45vw), min(90px, 6.25vw));
}

.s .LeadProblemArea li:nth-of-type(2) span {
  transform: translate(23.07vw, -12.4vw);
}

.LeadProblemArea li:nth-of-type(3) {
  width: min(305px, 21.1vw);
  z-index: 2;
}

.s .LeadProblemArea li:nth-of-type(3) {
  width: 51.33vw;
}

.LeadProblemArea li:nth-of-type(3) span {
  transform: translate(0px, 0px);
}

.s .LeadProblemArea li:nth-of-type(3) span {
  transform: translate(-20.335vw, -19vw);
}

.LeadProblemArea li:nth-of-type(4) {
  width: min(396px, 27.5vw);
  z-index: 1;
}

.s .LeadProblemArea li:nth-of-type(4) {
  width: 67.33vw;
  z-index: 3;
}

.LeadProblemArea li:nth-of-type(4) span {
  transform: translate(max(-98px, -6.8vw), min(89px, 6.18vw));
}

.s .LeadProblemArea li:nth-of-type(4) span {
  transform: translate(12.335vw, -29vw);
}

.Lead h2 {
  width: min(867.5px, 60.24vw);
  margin: 0 auto;
  padding-top: 17px;
}

.s .Lead h2 {
  width: 92.53vw;
  padding-top: 7.33vw;
}

#Lead>h2::before {
  content: none;
}

.s .Lead .Center._adjust {
  margin-top: -34vw;
}

.LeadOrnamentRight {
  content: "";
  position: absolute;
  top: clamp(15px, calc((1440px - 100vw) * 0.1), 0px);
  right: max(-50px, -3.47vw);
  width: min(200px, 13.88vw);
}

.s .LeadOrnamentRight {
  display: none;
}

/* ================================
        Solution
================================ */
.Solution {
  padding-bottom: min(320px, 22.22vw);
  position: relative;
  background: url(../img/solution-bg.png) top center / cover no-repeat;
  margin-top: max(-136px, -9.444vw);
  width: 100%;
}

.s .Solution {
  padding-bottom: 31.33vw;
}

.Solution::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  margin: auto;
  background: url(../img/solution-bg-bottom.png) center / cover no-repeat;
  aspect-ratio: 2880 / 951;
  width: 100%;
}

.s .Solution::after {
  background: none;
}

.SolutionTitleArea {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

.SolutionTitle {
  width: min(1203px, 83.541vw);
  margin-inline: auto;
  position: relative;
}

.s .SolutionTitle {
  width: 92.13vw;
}

#Promotion .Solution .CommonTitleDeco {
  top: max(-28px, -7.5vw);
  left: max(-75px, -5.2vw);
}

.s #Promotion .Solution .CommonTitleDeco {
  top: -2vw;
  left: 0vw;
}

#Promotion .Solution .CommonTitleDeco span {
  transform: rotate(-54deg);
}

.SolutionSub {
  width: min(520px, 36.11vw);
  margin: 0 auto;
}

.s .SolutionSub {
  width: 63.46vw;
  padding-bottom: 0.66vw;
}

.SolutionBgInner {
  overflow: hidden;
  position: relative;
}

.SolutionLead {
  font-size: var(--FontSizeClamp32);
  font-weight: var(--BaseFontMedium);
  text-align: center;
  margin-top: min(180px, 12.5vw);
  margin-bottom: min(75px, 5.2vw);
  line-height: 1.6;
  letter-spacing: 0.2px;
  position: relative;
}

.s .SolutionLead {
  font-size: var(--FontSizeSP36);
  margin-top: 25.73vw;
  margin-bottom: 19.86vw;
  line-height: 2;
}

.SolutionLead ._small {
  font-size: var(--FontSizeClamp24);
}

.s .SolutionLead ._small {
  font-size: var(--FontSizeSP28);
}

.SolutionLead ._bold {
  font-weight: var(--BaseFontBold);
}

/* .SolutionLeadPkg {
	position: absolute;
	width: min(220px, 15.27vw);
	top: -20px;
	left: calc(50% + clamp(570px, 398.092px + 22.355vw, 720px) - 283px);
}

.s .SolutionLeadPkg {
	width: 25.33vw;
	top: 23.4vw;
	left: 62.66vw;
} */

.SolutionLeadPkgArea {
  position: absolute;
  top: max(-20px, -1.38vw);
  left: calc(50% + clamp(570px, 398.092px + 22.355vw, 720px) - 283px);
}

.s .SolutionLeadPkgArea {
  top: 23.4vw;
  left: 62.66vw;
}

.SolutionLeadPkg {
  background: url(../img/solution-lead-pkg.png) center / 100% no-repeat;
  aspect-ratio: 379 / 293;
  width: min(220px, 15.27vw);
  position: relative;
}

.s .SolutionLeadPkg {
  width: 30.33vw;
}

.SolutionLeadPkg .item1,
.SolutionLeadPkg .item2,
.SolutionLeadPkg .item3,
.SolutionLeadPkg .item4,
.SolutionLeadPkg .item5,
.SolutionLeadPkg .item6,
.SolutionLeadPkg .item7 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: all 0.5s ease-out;
  opacity: 0.8;
}

.SolutionLeadPkg .item1 {
  transform: translate(min(24px, 1.66vw), max(-63px, -4.375vw));
}

.s .SolutionLeadPkg .item1 {
  transform: translate(3.2vw, -11vw);
}

.SolutionLeadPkg .item2 {
  transform: translate(min(31px, 2.15vw), max(-37px, -2.56vw));
}

.s .SolutionLeadPkg .item2 {
  transform: translate(3vw, -5vw);
}

.SolutionLeadPkg .item3 {
  transform: translate(min(1px, 0.069vw), max(-46px, -3.19vw));
}

.s .SolutionLeadPkg .item3 {
  transform: translate(1vw, -10vw);
}

.SolutionLeadPkg .item4 {
  transform: translate(max(-27px, -1.875vw), max(-50px, -3.47vw));
}

.s .SolutionLeadPkg .item4 {
  transform: translate(-3vw, -9vw);
}

.SolutionLeadPkg .item5 {
  transform: translate(max(-1px, -0.069vw), max(-84px, -5.83vw));
}

.s .SolutionLeadPkg .item5 {
  transform: translate(-3vw, -9vw);
}

.SolutionLeadPkg .item6 {
  transform: translate(max(-21px, -1.45vw), max(-76px, -5.27vw));
}

.s .SolutionLeadPkg .item6 {
  transform: translate(-3.4vw, -10vw);
}

.SolutionLeadPkg .item7 {
  transform: translate(max(-27px, -1.875vw), max(-99px, -6.87vw));
}

.s .SolutionLeadPkg .item7 {
  transform: translate(0vw, -14vw);
}

.SolutionLeadPkg .item1.isMove,
.SolutionLeadPkg .item2.isMove,
.SolutionLeadPkg .item3.isMove,
.SolutionLeadPkg .item4.isMove,
.SolutionLeadPkg .item5.isMove,
.SolutionLeadPkg .item6.isMove,
.SolutionLeadPkg .item7.isMove {
  transform: translate(0, 0);
  opacity: 1;
}

.SolutionList {
  display: flex;
  justify-content: center;
  align-items: center;
}

.s .SolutionList {
  flex-direction: column;
}

.SolutionList._first {
  gap: min(100px, 6.94vw);
  transform: translateX(min(90px, 6.25vw));
}

.s .SolutionList._first {
  gap: 0;
  transform: translate(0);
}

.SolutionList._first li:nth-of-type(1) {
  width: min(342px, 23.75vw);
}

.s .SolutionList._first li:nth-of-type(1) {
  width: 60.4vw;
}

.s .SolutionList._first li:nth-of-type(1) span {
  transform: translate(-14.53vw, 0vw);
  display: block;
}

.SolutionList._first li:nth-of-type(2) {
  width: min(305.5px, 21.21vw);
}

.s .SolutionList._first li:nth-of-type(2) {
  width: 55.73vw;
}

.s .SolutionList._first li:nth-of-type(2) span {
  transform: translate(18vw, -11vw);
  display: block;
}

.SolutionList._second {
  gap: min(100px, 6.94vw);
  transform: translateX(max(-100px, -6.94vw));
  margin-top: max(-30px, -2.083vw);
  padding-bottom: min(166px, 11.52vw);
}

.s .SolutionList._second {
  gap: 0;
  transform: translate(0);
  margin-top: 0;
  padding-bottom: 0;
}

.SolutionList._second li:nth-of-type(1) {
  width: min(317px, 22vw);
}

.s .SolutionList._second li:nth-of-type(1) {
  width: 50.26vw;
}

.s .SolutionList._second li:nth-of-type(1) span {
  transform: translate(-16.53vw, -16vw);
  display: block;
}

.SolutionList._second li:nth-of-type(2) {
  width: min(295px, 20.48vw);
}

.s .SolutionList._second li:nth-of-type(2) {
  width: 46.4vw;
}

.s .SolutionList._second li:nth-of-type(2) span {
  transform: translate(19vw, -27vw);
  display: block;
}

.SolutionMainPkg {
  width: min(472px, 32.77vw);
  transform: translateX(min(96px, 6.666vw));
  margin: 0 auto;
  padding-bottom: 20px;
}

.s .SolutionMainPkg {
  width: 42.66vw;
  transform: translateX(12vw);
  padding-bottom: 13.33vw;
  margin-top: -10vw;
}

.SolutionMainPkg span {
  display: block;
  opacity: 0;
  transform: scale(0.8);
}

.SolutionMainPkg span.isShown {
  animation: popBounce 0.6s ease-out forwards;
}

@keyframes popBounce {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  60% {
    opacity: 1;
    transform: scale(1.1);
  }

  80% {
    transform: scale(0.97);
  }

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

.SolutionBgLeft li,
.SolutionBgRight li {
  position: absolute;
  z-index: 2;
}

/* --------------
	Left Ornament
-----------------*/
.SolutionBgLeft li:nth-of-type(1) {
  width: min(267.5px, 18.57vw);
  top: min(132px, 9.16vw);
  left: calc(50% - clamp(372px, -26.826px + 51.863vw, 720px) - 39px);
}

.s .SolutionBgLeft li:nth-of-type(1) {
  width: 24.26vw;
  top: 99.6vw;
  left: 1vw;
}

.SolutionBgLeft li:nth-of-type(2) {
  width: min(102.5px, 7.11vw);
  top: min(500px, 34.7vw);
  left: calc(50% - clamp(368px, -35.41px + 52.459vw, 720px) - 15px);
}

.s .SolutionBgLeft li:nth-of-type(2) {
  width: 9.33vw;
  top: 188vw;
  left: -3.4vw;
}

.SolutionBgLeft li:nth-of-type(3) {
  width: min(166px, 11.52vw);
  top: min(795px, 55.2vw);
  left: calc(50% - clamp(430px, 97.645px + 43.219vw, 720px) + 56px);
}

.s .SolutionBgLeft li:nth-of-type(3) {
  width: 17.86vw;
  top: 201vw;
  left: 13.46vw;
}

.SolutionBgLeft li:nth-of-type(4) {
  width: min(234px, 16.25vw);
  top: min(961px, 66.73vw);
  left: calc(50% - clamp(500px, 247.869px + 32.787vw, 720px) + 180px);
}

.s .SolutionBgLeft li:nth-of-type(4) {
  width: 21.2vw;
  top: 220.2vw;
  left: -3.54vw;
}

.SolutionBgLeft li:nth-of-type(5) {
  width: min(394.5px, 27.39vw);
  top: min(924px, 64.16vw);
  left: calc(50% - clamp(580px, 419.553px + 20.864vw, 720px) + 337px);
}

.s .SolutionBgLeft li:nth-of-type(5) {
  width: 35.73vw;
  top: 232.2vw;
  left: 15vw;
}

/* --------------
	Right Ornament
-----------------*/
.SolutionBgRight li:nth-of-type(1) {
  width: min(161.5px, 11.21vw);
  top: min(270px, 18.75vw);
  left: calc(50% + clamp(420px, 76.185px + 44.709vw, 720px) - 71px);
}

.s .SolutionBgRight li:nth-of-type(1) {
  width: 12.53vw;
  top: 84vw;
  left: auto;
  right: 0;
}

.SolutionBgRight li:nth-of-type(2) {
  width: min(146px, 10.138vw);
  top: min(423px, 29.37vw);
  left: calc(50% + clamp(410px, 54.724px + 46.2vw, 720px) - 110px);
}

.s .SolutionBgRight li:nth-of-type(2) {
  width: 11.2vw;
  top: 96vw;
  left: auto;
  right: 0;
}

.SolutionBgRight li:nth-of-type(3) {
  width: min(249px, 17.29vw);
  top: min(602px, 41.8vw);
  left: calc(50% + clamp(500px, 247.869px + 32.787vw, 720px) - 252px);
}

.s .SolutionBgRight li:nth-of-type(3) {
  width: 22.53vw;
  top: 162vw;
  left: auto;
  right: -7vw;
}

.SolutionBgRight li:nth-of-type(4) {
  width: min(244.5px, 16.97vw);
  top: min(933px, 64.79vw);
  left: calc(50% + clamp(480px, 204.948px + 35.768vw, 720px) - 255px);
}

.s .SolutionBgRight li:nth-of-type(4) {
  width: 22.13vw;
  top: 212vw;
  left: auto;
  right: -7vw;
}

.SolutionBgRight li:nth-of-type(5) {
  width: min(146px, 10.13vw);
  top: min(814px, 56.52vw);
  left: calc(50% + clamp(570px, 398.092px + 22.355vw, 720px) - 427px);
}

.s .SolutionBgRight li:nth-of-type(5) {
  width: 13.2vw;
  top: 229vw;
  left: auto;
  right: 8.6vw;
}

.SolutionBgRight li:nth-of-type(6) {
  width: min(185px, 12.84vw);
  top: min(879px, 61.04vw);
  left: calc(50% + clamp(550px, 355.171px + 25.335vw, 720px) - 372px);
}

.s .SolutionBgRight li:nth-of-type(6) {
  width: 16.66vw;
  top: 235vw;
  left: auto;
  right: 1vw;
}

.SolutionBgRight li:nth-of-type(7) {
  width: min(162px, 11.25vw);
  top: min(917px, 66.6vw);
  left: calc(50% + clamp(650px, 569.776px + 10.432vw, 720px) - 599px);
}

.s .SolutionBgRight li:nth-of-type(7) {
  width: 14.66vw;
  top: 236vw;
  left: auto;
  right: 21vw;
}

/* --------------
	Spice Animation
-----------------*/
.SolutionBgLeft li img,
.SolutionBgRight li img {
  display: block;
  width: 100%;
  opacity: 0;
  transform: translateY(-15px) scale(0.96);
  filter: blur(6px);
  will-change: transform, opacity, filter;
}

.SolutionBgLeft li.isShown img,
.SolutionBgRight li.isShown img {
  animation: spiceRise 2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes spiceRise {
  0% {
    opacity: 0;
    transform: translate(30px) scale(1);
    filter: blur(6px);
  }

  25% {
    transform: translateX(-6px) scale(1.06);
    opacity: 0.6;
    filter: blur(3px);
  }

  50% {
    transform: translateX(4px) scale(1.03);
    opacity: 0.75;
    filter: blur(1px);
  }

  75% {
    transform: scale(1.01);
    opacity: 1;
    filter: blur(0.5px);
  }

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

/* ================================
        Recipe
================================ */
.Recipe {
  background: linear-gradient(to bottom,
      rgba(255, 229, 74, 1),
      rgba(255, 230, 0, 1));
  position: relative;
  padding-bottom: min(375px, 26.04vw);
  font-weight: var(--BaseFontMedium);
}

.s .Recipe {
  padding-bottom: 20.53vw;
}

.RecipeBgTop {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: min(119.5px, 8.298vw);
  background: url(../img/recipe-bg-top.png) top center / cover no-repeat;
}

.s .RecipeBgTop {
  height: 16vw;
  background: url(../img/recipe-bg-top-sp.png) top center / cover;
}

.RecipeTitleArea {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

.s .RecipeTitleArea {
  transform: translateY(-13vw);
}

.RecipeTitle {
  width: min(1203px, 83.54vw);
  margin: 0 auto;
  position: relative;
}

.s .RecipeTitle {
  width: 92.1vw;
  margin: 0 auto;
  position: relative;
}

.RecipeSub {
  width: min(702px, 48.75vw);
  margin: 0 auto;
}

.s .RecipeSub {
  width: 88.26vw;
}

#Promotion .Recipe .CommonTitleDeco {
  top: max(-28px, -1.94vw);
  right: max(-80px, -5.55vw);
}

.s #Promotion .Recipe .CommonTitleDeco {
  top: 11vw;
  right: 0vw;
}

.RecipeLead {
  font-size: var(--FontSizeClamp32);
  margin: 73px 0 50px;
  position: relative;
  display: inline-block;
}

.s .RecipeLead {
  font-size: var(--FontSizeSP28);
  margin: 12.4vw 0 5.2vw;
}

.RecipeLead::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: url(../img/recipe-lead-before.png) center / 100% no-repeat;
  aspect-ratio: 56 / 86;
  width: min(28px, 1.944vw);
  transform: translateX(max(-65px, -4.51vw));
}

.s .RecipeLead::before {
  width: 3.46vw;
  transform: translateX(-6.93vw);
}

.RecipeLead::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: url(../img/recipe-lead-after.png) center / 100% no-repeat;
  aspect-ratio: 56 / 86;
  width: min(28px, 1.944vw);
  transform: translateX(min(65px, 4.51vw));
}

.s .RecipeLead::after {
  width: 3.46vw;
  transform: translateX(6.93vw);
}

.RecipeAnchor {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: min(50px, 3.47vw) min(30px, 2.083vw);
  padding-bottom: min(198px, 13.75vw);
}

.s .RecipeAnchor {
  flex-direction: column;
  gap: 3.2vw;
  padding-bottom: 0;
}

.RecipeAnchor a {
  display: block;
}

.RecipeAnchor a:hover {
  animation: bounce 1s infinite;
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

.s .RecipeAnchor a:hover {
  animation: none;
}

.RecipeAnchor li:nth-of-type(1) {
  width: min(604px, 41.94vw);
}

.RecipeAnchor li:nth-of-type(2) {
  width: min(522px, 36.25vw);
}

.RecipeAnchor li:nth-of-type(3) {
  width: min(579px, 40.2vw);
  transform: translateX(min(54px, 3.75vw));
}

.RecipeAnchor li:nth-of-type(4) {
  width: min(522px, 36.25vw);
  transform: translateX(min(54px, 3.75vw));
}

.s .RecipeAnchor li:nth-of-type(1),
.s .RecipeAnchor li:nth-of-type(2),
.s .RecipeAnchor li:nth-of-type(3),
.s .RecipeAnchor li:nth-of-type(4) {
  width: 92.53vw;
  transform: translateX(0);
}

.RecipeIssue {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(16px, -2.337px + 2.385vw, 32px);
  font-weight: var(--BaseFontBold);
  gap: 20px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 100%;
}

.s .RecipeIssue {
  font-size: var(--FontSizeSP28);
  gap: 0;
  justify-content: flex-start;
  align-items: flex-end;
  bottom: 97%;
}

.RecipeIssue li:nth-of-type(3) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.s .RecipeIssue li:nth-of-type(3) {
  text-align: center;
}

.RecipeIssue li:nth-of-type(3) div {
  transform: translateY(-22%);
}

.s .RecipeIssue li:nth-of-type(3) div {
  transform: translate(2vw, 0);
}

.Recipe h4 {
  width: min(1050px, 72.9vw);
  margin: 0 auto;
}

.s .Recipe h4 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* --------------
	Recipe1 Title
-----------------*/
.Recipe1 .RecipeIssue li:nth-of-type(1) {
  flex: 0 0 min(135px, 9.375vw);
  margin-right: min(30px, 2.08vw);
}

.s .Recipe1 .RecipeIssue li:nth-of-type(1) {
  flex: 0 0 15.06vw;
  margin-right: 0;
}

.Recipe1 .RecipeIssue li:nth-of-type(2) {
  flex: 0 0 min(171px, 11.87vw);
}

.s .Recipe1 .RecipeIssue li:nth-of-type(2) {
  flex: 0 0 13.73vw;
  margin: 0 1vw 0 1.25vw;
}

.Recipe1 .RecipeIssue li:nth-of-type(3) {
  background: url(../img/recipe-bubble-1.png) top center / 100% no-repeat;
  aspect-ratio: 1346 / 252;
  flex: 0 1 min(673px, 46.73vw);
}

.s .Recipe1 .RecipeIssue li:nth-of-type(3) {
  background: url(../img/recipe-bubble-1-sp.png) top center / 100% no-repeat;
  aspect-ratio: 426/ 131;
  flex: 0 1 56.8vw;
}

/* --------------
	Recipe2 Title
-----------------*/
.Recipe2 .RecipeIssue li:nth-of-type(1) {
  flex: 0 0 min(159px, 11.04vw);
  margin-right: min(30px, 2.08vw);
}

.s .Recipe2 .RecipeIssue li:nth-of-type(1) {
  flex: 0 0 17.33vw;
  margin-right: 0;
}

.Recipe2 .RecipeIssue li:nth-of-type(2) {
  flex: 0 1 min(239px, 16.59vw);
}

.s .Recipe2 .RecipeIssue li:nth-of-type(2) {
  flex: 0 0 17.46vw;
  margin: 0 1vw 0 1.25vw;
}

.Recipe2 .RecipeIssue li:nth-of-type(3) {
  background: url(../img/recipe-bubble-2.png) top center / 100% no-repeat;
  aspect-ratio: 952 / 252;
  flex: 0 1 min(476px, 33.05vw);
}

.s .Recipe2 .RecipeIssue li:nth-of-type(3) {
  background: url(../img/recipe-bubble-2-sp.png) top center / 100% no-repeat;
  aspect-ratio: 408 / 102;
  flex: 0 0 54.4vw;
}

/* --------------
	Recipe3 Title
-----------------*/
.Recipe3 .RecipeIssue li:nth-of-type(1) {
  flex: 0 0 min(160px, 11.11vw);
  margin-right: min(30px, 2.08vw);
}

.s .Recipe3 .RecipeIssue li:nth-of-type(1) {
  flex: 0 0 17.59vw;
  margin-right: 0;
}

.Recipe3 .RecipeIssue li:nth-of-type(2) {
  flex: 0 1 min(180px, 12.5vw);
}

.s .Recipe3 .RecipeIssue li:nth-of-type(2) {
  flex: 0 0 12.13vw;
  margin: 0 1vw 0 1.25vw;
}

.Recipe3 .RecipeIssue li:nth-of-type(3) {
  background: url(../img/recipe-bubble-3.png) top center / 100% no-repeat;
  aspect-ratio: 1108 / 252;
  flex: 0 1 min(554px, 38.47vw);
}

.s .Recipe3 .RecipeIssue li:nth-of-type(3) {
  background: url(../img/recipe-bubble-3-sp.png) top center / 100% no-repeat;
  aspect-ratio: 449 / 102;
  flex: 0 0 59.86vw;
}

/* --------------
	Recipe4 Title
-----------------*/
.CommonBox .Recipe4 {
  flex: 0 1 min(162px, 11.25vw);
  margin-right: min(30px, 2.08vw);
}

.Recipe4 .RecipeIssue li:nth-of-type(1) {
  flex: 0 0 min(162px, 11.25vw);
  margin-right: min(30px, 2.08vw);
}

.s .Recipe4 .RecipeIssue li:nth-of-type(1) {
  flex: 0 0 17.73vw;
  margin-right: 0;
}

.Recipe4 .RecipeIssue li:nth-of-type(2) {
  flex: 0 1 min(220.5px, 15.31vw);
}

.s .Recipe4 .RecipeIssue li:nth-of-type(2) {
  flex: 0 0 13.46vw;
  margin: 0 1vw 0 1.25vw;
}

.Recipe4 .RecipeIssue li:nth-of-type(2) span {
  transform: translateX(-30px);
}

.Recipe4 .RecipeIssue li:nth-of-type(3) {
  background: url(../img/recipe-bubble-4.png) top center / 100% no-repeat;
  aspect-ratio: 1184 / 300;
  flex: 0 1 min(592px, 41.11vw);
  flex-direction: column;
  text-align: center;
}

.s .Recipe4 .RecipeIssue li:nth-of-type(3) {
  background: url(../img/recipe-bubble-4-sp.png) top center / 100% no-repeat;
  aspect-ratio: 460 / 124;
  flex: 0 0 61.33vw;
}

.Recipe4 .RecipeIssue li:nth-of-type(3) div {
  transform: translateY(-15%);
  line-height: 1.4;
}

.s .Recipe4 .RecipeIssue li:nth-of-type(3) div {
  transform: translate(3vw, 0);
}

.Recipe4 .RecipeIssue li:nth-of-type(3) ._small {
  font-size: var(--FontSizeClamp24);
  display: block;
}

.s .Recipe4 .RecipeIssue li:nth-of-type(3) ._small {
  font-size: var(--FontSizeSP26);
}

/* --------------
	Slider
-----------------*/
.RecipeSlider {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.RecipeCardArea {
  display: block;
  margin-top: -30px;
}

.s .RecipeCardArea {
  margin-top: -2.33vw;
}

#Recipe4 .RecipeCardArea {
  display: flex;
  justify-content: center;
  align-items: center;
}

.s #Recipe4 .RecipeCardArea {
  display: block;
}

.RecipeCardArea .slick-track {
  display: flex !important;
}

.RecipeCardArea .slick-list {
  overflow: visible;
}

.RecipeCardArea li {
  width: clamp(160px, 22.474px + 17.884vw, 280px);
  height: auto;
  display: flex !important;
  background: var(--CommonColorWhite);
  border-radius: 14px;
  border: 2px solid var(--CommonColorBrown);
  padding: 20px 18px 28px 18px;
  position: relative;
  flex-direction: column;
  margin: 0 min(10px, 0.69vw);
}

.s .RecipeCardArea li {
  width: 37.33vw;
  padding: 4.8vw 4.8vw 5.6vw 4.8vw;
  margin: 0 1.866vw;
}

.RecipeCardArea li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: url(../img/icon-pin.png) center / 100% no-repeat;
  width: 31px;
  height: 28px;
  transform: translate(-30%, -50%);
}

.JsSliderBtn {
  padding-top: 30px;
  display: flex;
  justify-content: center;
  gap: min(50px, 3.47vw);
}

.s .JsSliderBtn {
  padding-top: 4.26vw;
  gap: 8vw;
}

.JsSliderPrev,
.JsSliderNext {
  z-index: 2;
  background: var(--CommonColorBrown);
  width: min(80px, 5.55vw);
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 4px 4px 0 0 var(--CommonColorWhite);
  transition: 0.3s;
}

.s .JsSliderPrev,
.s .JsSliderNext {
  width: 13.33vw;
}

.JsSliderPrev:hover,
.JsSliderNext:hover {
  cursor: pointer;
  text-decoration: none;
  transform: translateY(5px);
  box-shadow: none;
}

.s .JsSliderPrev:hover,
.s .JsSliderNext:hover {
  cursor: pointer;
  text-decoration: none;
  transform: none;
  box-shadow: 4px 4px 0 0 var(--CommonColorWhite);
}

.JsSliderPrev img,
.JsSliderNext img {
  width: min(24px, 1.666vw);
}

.s .JsSliderPrev img,
.s .JsSliderNext img {
  width: 3.59vw;
}

.RecipeCardImg {
  margin-inline: auto;
  padding-bottom: min(35px, 3.5vw);
}

.s .RecipeCardImg {
  padding-bottom: 9.333vw;
}

.RecipeCardName {
  margin-inline: auto;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -40%);
}

.RecipeCardName._lines {
  transform: translate(-50%, -20%);
}

/* --------------
	Recipe1 Name
-----------------*/
.Recipe1 .RecipeCardArea ._item1 .RecipeCardName {
  width: min(231px, 16.04vw);
}

.s .Recipe1 .RecipeCardArea ._item1 .RecipeCardName {
  width: 65.2vw;
}

.Recipe1 .RecipeCardArea ._item2 .RecipeCardName {
  width: min(267px, 18.54vw);
}

.s .Recipe1 .RecipeCardArea ._item2 .RecipeCardName {
  width: 79.73vw;
}

.Recipe1 .RecipeCardArea ._item3 .RecipeCardName {
  width: min(267px, 18.54vw);
}

.s .Recipe1 .RecipeCardArea ._item3 .RecipeCardName {
  width: 69.73vw;
}

.Recipe1 .RecipeCardArea ._item4 .RecipeCardName {
  width: min(195px, 13.54vw);
}

.s .Recipe1 .RecipeCardArea ._item4 .RecipeCardName {
  width: 49.6vw;
}

.Recipe1 .RecipeCardArea ._item5 .RecipeCardName {
  width: min(267px, 18.54vw);
}

.s .Recipe1 .RecipeCardArea ._item5 .RecipeCardName {
  width: 71.2vw;
}

.Recipe1 .RecipeCardArea ._item6 .RecipeCardName {
  width: min(231px, 16.04vw);
}

.s .Recipe1 .RecipeCardArea ._item6 .RecipeCardName {
  width: 64.8vw;
}

/* --------------
	Recipe2 Name
-----------------*/
.Recipe2 .RecipeCardArea ._item1 .RecipeCardName {
  width: min(195px, 13.54vw);
}

.s .Recipe2 .RecipeCardArea ._item1 .RecipeCardName {
  width: 49.6vw;
}

.Recipe2 .RecipeCardArea ._item2 .RecipeCardName {
  width: min(159px, 11.04vw);
}

.s .Recipe2 .RecipeCardArea ._item2 .RecipeCardName {
  width: 49.6vw;
}

.Recipe2 .RecipeCardArea ._item3 .RecipeCardName {
  width: min(231px, 16.04vw);
}

.s .Recipe2 .RecipeCardArea ._item3 .RecipeCardName {
  width: 64.8vw;
}

.Recipe2 .RecipeCardArea ._item4 .RecipeCardName {
  width: min(231px, 16.04vw);
}

.s .Recipe2 .RecipeCardArea ._item4 .RecipeCardName {
  width: 64.8vw;
}

.Recipe2 .RecipeCardArea ._item5 .RecipeCardName {
  width: min(195px, 13.54vw);
}

.s .Recipe2 .RecipeCardArea ._item5 .RecipeCardName {
  width: 54.66vw;
}

.Recipe2 .RecipeCardArea ._item6 .RecipeCardName {
  width: min(267px, 18.54vw);
}

.s .Recipe2 .RecipeCardArea ._item6 .RecipeCardName {
  width: 69.73vw;
}

/* --------------
	Recipe3 Name
-----------------*/
.Recipe3 .RecipeCardArea ._item1 .RecipeCardName {
  width: min(267px, 18.54vw);
}

.s .Recipe3 .RecipeCardArea ._item1 .RecipeCardName {
  width: 79.73vw;
}

.Recipe3 .RecipeCardArea ._item2 .RecipeCardName {
  width: min(267px, 18.54vw);
}

.s .Recipe3 .RecipeCardArea ._item2 .RecipeCardName {
  width: 79.73vw;
}

.Recipe3 .RecipeCardArea ._item3 .RecipeCardName {
  width: min(264px, 18.33vw);
}

.s .Recipe3 .RecipeCardArea ._item3 .RecipeCardName {
  width: 79.73vw;
}

.Recipe3 .RecipeCardArea ._item4 .RecipeCardName {
  width: min(267px, 18.54vw);
}

.s .Recipe3 .RecipeCardArea ._item4 .RecipeCardName {
  width: 79.73vw;
}

.Recipe3 .RecipeCardArea ._item5 .RecipeCardName {
  width: min(267px, 18.54vw);
}

.s .Recipe3 .RecipeCardArea ._item5 .RecipeCardName {
  width: 69.73vw;
}

/* --------------
	Recipe4 Name
-----------------*/
.Recipe4 .RecipeCardArea ._item1 .RecipeCardName {
  width: min(210.5px, 14.6vw);
}

.s .Recipe4 .RecipeCardArea ._item1 .RecipeCardName {
  width: 64.8vw;
}

.Recipe4 .RecipeCardArea ._item2 .RecipeCardName {
  width: min(231px, 16.04vw);
}

.s .Recipe4 .RecipeCardArea ._item2 .RecipeCardName {
  width: 59.73vw;
}

.Recipe4 .RecipeCardArea ._item3 .RecipeCardName {
  width: min(236px, 16.38vw);
}

.s .Recipe4 .RecipeCardArea ._item3 .RecipeCardName {
  width: 64.8vw;
}

.Recipe4 .RecipeCardArea ._item4 .RecipeCardName {
  width: min(231px, 16.04vw);
}

.s .Recipe4 .RecipeCardArea ._item4 .RecipeCardName {
  width: 64.8vw;
}

.RecipeCardInfo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: min(15px, 1.04vw) min(11px, 0.76vw);
  padding-bottom: 17px;
}

.RecipeCardInfo p {
  font-size: clamp(12px, 9.708px + 0.298vw, 14px);
  position: relative;
  line-height: 1;
}

.s .RecipeCardInfo p {
  font-size: var(--FontSizeSP28);
  padding-right: 2.06vw;
}

.RecipeTime {
  padding-left: 27px;
}

.s .RecipeTime {
  padding-left: 6.875vw;
  margin-top: 2.66vw;
}

.RecipeCheck {
  padding-left: 22px;
}

.s .RecipeCheck {
  padding-left: 5.875vw;
  margin-top: 2.66vw;
}

.RecipeTime::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: url(../img/icon-clock.png) center / 100% no-repeat;
  width: 19px;
  height: 19px;
}

.s .RecipeTime::before {
  width: 5.46vw;
  height: 5.46vw;
}

.RecipeCheck::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  margin: auto;
  background: url(../img/icon-check.png) center / 100% no-repeat;
  width: 15px;
  height: 18px;
}

.s .RecipeCheck::before {
  bottom: 1vw;
  width: 4.26vw;
  height: 5.06vw;
}

/* ================================
        Intro
================================ */
.Intro {
  background: var(--SecondColor);
  font-size: 1.6rem;
  position: relative;
  background: url(../img/intro-bg.png) top center / cover no-repeat;
  margin-top: max(-136px, -9.444vw);
}

.s .Intro {
  font-size: var(--FontSizeSP28);
  background: url(../img/intro-bg-sp.png) top center / cover no-repeat;
  margin-top: 0;
}

.IntroBgInner {
  overflow: hidden;
  position: relative;
  padding-bottom: min(240px, 16.666vw);
}

.s .IntroBgInner {
  padding-bottom: 32vw;
}

.IntroBgLeft {
  position: absolute;
  width: min(417px, 28.95vw);
  top: min(140px, 9.72vw);
  left: calc(50% - clamp(300px, -181.341px + 62.593vw, 720px) - 192px);
}

.s .IntroBgLeft {
  width: 50.26vw;
  top: 16.53vw;
  left: -20.8vw;
}

.IntroBgLeftSp {
  display: none;
}

.s .IntroBgLeftSp {
  display: block;
  position: absolute;
  width: 50.26vw;
  top: 275.3vw;
  left: -20.8vw;
}

.IntroBgRight {
  position: absolute;
  width: min(300px, 20.83vw);
  top: min(140px, 9.72vw);
  left: calc(50% + clamp(490px, 226.408px + 34.277vw, 720px) - 178px);
}

.s .IntroBgRight {
  width: 30.66vw;
  top: 154.2vw;
  left: 70.13vw;
}

.IntroTitleArea {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  padding-top: 30px;
}

.s .IntroTitleArea {
  padding-top: 0;
}

.IntroTitle {
  width: min(668px, 46.388vw);
  margin-inline: auto;
  position: relative;
}

.s .IntroTitle {
  width: 48.8vw;
}

#Promotion .Intro .CommonTitleDeco {
  top: max(-108px, -7.5vw);
  left: max(-75px, -5.2vw);
}

#Promotion .Intro .CommonTitleDeco span {
  transform: rotate(-54deg);
}

.IntroList {
  display: flex;
  justify-content: center;
  gap: min(75px, 5.2vw);
  align-items: stretch;
  padding-top: min(162px, 11.25vw);
  padding-bottom: 10px;
}

.s .IntroList {
  flex-direction: column;
  gap: 22vw;
  padding: 25.6vw 4vw 0 4vw;
}

.IntroList li {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.IntroListImg {
  width: min(219px, 15.2vw);
  transform: translateX(16px);
  margin: 0 auto;
}

.s .IntroListImg {
  width: 34.8vw;
  transform: translateX(2.133vw);
}

.s .IntroList li:nth-of-type(2) .IntroListImg,
.s .IntroList li:nth-of-type(3) .IntroListImg {
  transform: translateX(6.133vw);
}

.IntroListTitle {
  color: var(--CommonColorWhite);
  font-weight: var(--BaseFontBold);
  font-size: clamp(15px, 4.686px + 1.341vw, 24px);
  background: url(../img/common-ribbon.png) center no-repeat;
  aspect-ratio: 696 / 124;
  width: min(348px, 24.16vw);
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.s .IntroListTitle {
  font-size: var(--FontSizeSP36);
  background: url(../img/common-ribbon-sp.png) center no-repeat;
  background-size: 100%;
  aspect-ratio: 570 / 101;
  width: 76vw;
  margin: 0 auto;
}

.IntroList li:nth-of-type(3) .IntroListTitle {
  font-size: clamp(13px, 3.832px + 1.192vw, 21px);
}

.s .IntroList li:nth-of-type(3) .IntroListTitle {
  font-size: var(--FontSizeSP36);
}

.IntroListTitle span {
  transform: translateY(-15%);
}

.IntroList li:nth-of-type(3) .IntroListTitlespan {
  transform: translateY(-12%);
}

.IntroList p {
  font-weight: var(--BaseFontRegular);
  padding: 16px 0;
  text-align: left;
}

.s .IntroList p {
  padding: 5.333vw 0;
}

.Intro .CommonBtn {
  margin-top: auto;
}

/* ================================
        Footer
================================ */
.Footer {
  position: relative;
  width: 100%;
  background: url(../img/footer-bg.png) top center repeat;
  background-size: 24px 24px;
  font-weight: var(--BaseFontMedium);
  text-align: center;
  position: relative;
}

.s .Footer {
  background-size: 3.46vw 3.33vw;
}

.FooterTitleArea {
  padding: 0 20px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-70%);
}

.s .FooterTitleArea {
  padding: 0;
  transform: translateY(-50%);
}

.FooterTitle {
  width: min(1113px, 77.29vw);
  margin: 0 auto;
  position: relative;
}

.s .FooterTitle {
  width: 83.06vw;
}

#Promotion .Footer .CommonTitleDeco {
  top: max(-28px, -1.94vw);
  right: max(-80px, -5.55vw);
}

.s #Promotion .Footer .CommonTitleDeco {
  top: -1vw;
  right: -2vw;
}

.FooterInner {
  padding-top: min(150px, 10.41vw);
  padding-bottom: 35px;
  overflow: hidden;
}

.s .FooterInner {
  padding-top: 28.53vw;
  padding-bottom: 5.33vw;
}

.FooterSub {
  width: min(520px, 36.11vw);
  margin: 0 auto;
}

.s .FooterSub {
  width: 69.46vw;
}

.FooterText {
  font-size: var(--FontSizeClamp32);
  margin: 0 auto;
  position: relative;
  display: inline-block;
}

.s .FooterText {
  font-size: var(--FontSizeSP36);
  line-height: 1.8;
}

.FooterText:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  background: url(../img/footer-text-before.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  aspect-ratio: 296 / 140;
  width: min(148px, 10.27vw);
  transform: translateX(max(-166px, -11.52vw));
}

.s .FooterText:before {
  width: 19.73vw;
  transform: translate(-16vw, -22.33vw);
}

.FooterText:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  background: url(../img/footer-text-after.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  aspect-ratio: 274 / 250;
  width: min(137px, 9.5138vw);
  transform: translateX(min(303px, 21.041vw));
}

.s .FooterText:after {
  width: 16.66vw;
  transform: translate(16vw, -19.33vw);
}

.FooterText ._small {
  font-size: var(--FontSizeClamp24);
  display: inline;
}

.s .FooterText ._small {
  font-size: var(--FontSizeSP28);
}

.FooterText ._ls {
  letter-spacing: -14px;
}

.FooterText ._adjust {
  font-size: var(--FontSizeClamp20);
  transform: translateY(-8px);
  display: inline-block;
}

.s .FooterText ._adjust {
  font-size: var(--FontSizeSP22);
  transform: translateY(-1.2vw);

}


.FooterArrow {
  width: 48px;
  margin: 0 auto;
  padding: 28px 0;
}

.s .FooterArrow {
  width: 6.53vw;
  padding: 3.2vw 0 2.133vw;
}

.FooterArrow span {
  transform: translateX(16%);
  display: block;
}

.FooterBanner {
  width: min(1090px, 75.69vw);
  margin: 0 auto;
  position: relative;
}

.s .FooterBanner {
  width: 92vw;
}

.FooterBanner a {
  display: block;
  border-radius: 20px;
  box-shadow: 6px 6px 0 0 var(--CommonColorBrown);
  transition: 0.3s;
}

.s .FooterBanner a {
  border-radius: 12px;
  box-shadow: 3px 2px 0 1px var(--CommonColorBrown);
}

.FooterBanner a:hover {
  text-decoration: none;
  transform: translateY(5px);
  box-shadow: none;
}

.FooterBanner:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/footer-banner-before.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  aspect-ratio: 288 / 189;
  width: min(144px, 10vw);
  transform: translate(max(-105px, -7.29vw), max(-130px, -9.02vw));
}

.s .FooterBanner:before {
  content: none;
  background: none;
}

.FooterBanner:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  background: url(../img/footer-banner-after.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  aspect-ratio: 234 / 253;
  width: min(117px, 8.125vw);
  transform: translate(max(-30px, -2.08vw), max(-181px, -12.56vw));
}

.s .FooterBanner:after {
  content: none;
  background: none;
}

.FooterCopyright {
  font-size: 1.4rem;
  padding-top: min(120px, 8.333vw);
}

.s .FooterCopyright {
  font-size: 3.2vw;
  padding-top: 16vw;
}

/* ================================
        Pagetop
================================ */
.Pagetop {
  position: fixed;
  right: min(40px, 2.777vw);
  bottom: min(30px, 2.08vw);
  z-index: 99;
}

.s .Pagetop {
  display: none;
}

.Pagetop a {
  display: block;
  width: 60px;
  aspect-ratio: 1/1;
  background: url(../img/btn-top.png?r1) center no-repeat;
  background-size: 100%;
  box-shadow: 4px 4px 0 0 var(--CommonColorBrown);
  border: 3px solid var(--CommonColorBrown);
  border-radius: 50%;
}

.Pagetop a:hover {
  transform: translateY(5px);
  box-shadow: none;
}