.body-wrapper {
  overflow: clip;
}

.js-fadein {
  opacity: 0;
}

.wow {
  visibility: hidden;
}

.js-fadeleft {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@media screen and (min-width: 768px) {
  .js-fadeleft {
    transform: translateX(clamp(-5rem, -7.960199005vw + 0.8208955224rem, -3rem));
  }
}
.js-fadeleft.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.js-fadeup {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}
@media screen and (min-width: 768px) {
  .js-fadeup {
    transform: translateY(clamp(1.5rem, 3.9800995025vw + -0.4104477612rem, 2.5rem));
  }
}
.js-fadeup.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.p-shiokonbutadon {
  position: relative;
  padding-bottom: 43px;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon {
    padding-bottom: clamp(4.2rem, 11.144278607vw + -1.1492537313rem, 7rem);
  }
}
.p-shiokonbutadon::after {
  pointer-events: none;
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100vh;
  height: 100%;
  width: 100%;
  background: url(./assets/images/bg_body_sp.webp) no-repeat center/100% 100%;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon::after {
    background: url(./assets/images/bg_body.webp) no-repeat center/100% 100%;
  }
}
.p-shiokonbutadon *,
.p-shiokonbutadon *::before,
.p-shiokonbutadon *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.p-shiokonbutadon img {
  max-width: 100%;
  height: auto;
}
.p-shiokonbutadon .u-pc {
  display: none !important;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon .u-pc {
    display: block !important;
  }
}
.p-shiokonbutadon .u-sp {
  display: block !important;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon .u-sp {
    display: none !important;
  }
}
.p-shiokonbutadon a {
  display: block;
  transition: 0.5s;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon a:hover {
    opacity: 1;
    transition-property: transform, opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transform: translateY(clamp(0.1875rem, 0.4975124378vw + -0.0513059701rem, 0.3125rem));
  }
}
.p-shiokonbutadon-btnlink {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0 auto;
}
.p-shiokonbutadon-container {
  position: relative;
  padding: 0 20px;
  width: 100%;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-container {
    max-width: clamp(43.875rem, 116.4179104478vw + -12.0055970149rem, 73.125rem);
    padding: 0 clamp(1.5rem, 3.9800995025vw + -0.4104477612rem, 2.5rem);
  }
}
.p-shiokonbutadon-mv {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-bottom: 14px;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-mv {
    padding-bottom: 0;
  }
}
.p-shiokonbutadon-mv__inner {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-top: 24px;
  max-width: 375px;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-mv__inner {
    max-width: 100%;
    padding-top: 0;
    padding-inline: clamp(1.5rem, 3.9800995025vw + -0.4104477612rem, 2.5rem);
  }
}
.p-shiokonbutadon-mv__title01 {
  position: relative;
  width: 355.5px;
  width: 356px;
  margin-bottom: -124px;
  margin-inline: auto;
  left: 4px;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-mv__title01 {
    width: clamp(29.8125rem, 79.1044776119vw + -8.1576492537rem, 49.6875rem);
    position: absolute;
    left: auto;
    right: calc(50% - clamp(10.0875rem, 26.7661691542vw + -2.760261194rem, 16.8125rem));
    top: clamp(1.4625rem, 3.8805970149vw + -0.4001865672rem, 2.4375rem);
    z-index: 1;
    margin-bottom: 0;
  }
}
.p-shiokonbutadon-mv__img01 {
  margin-inline: auto;
  position: relative;
  width: 574px;
  width: 573.5px;
  left: -142px;
  margin-bottom: -81px;
}
.p-shiokonbutadon-mv__img01.js-fadeup {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1.3s ease-out, transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.p-shiokonbutadon-mv__img01.js-fadeup.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-mv__img01.js-fadeup {
    transform: translateY(clamp(3.75rem, 7.4626865672vw + 0.1679104478rem, 5.625rem));
    transition: opacity 1.4s ease-out, transform 2s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .p-shiokonbutadon-mv__img01.js-fadeup.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-mv__img01 {
    width: clamp(41.175rem, 109.2537313433vw + -11.2667910448rem, 68.625rem);
    margin-bottom: clamp(-7.5rem, -11.9402985075vw + 1.2313432836rem, -4.5rem);
    left: clamp(-5.125rem, -8.1592039801vw + 0.8414179104rem, -3.075rem);
    bottom: clamp(-2.5625rem, -4.07960199vw + 0.4207089552rem, -1.5375rem);
  }
}
.p-shiokonbutadon-mv__box {
  display: flex;
  margin-inline: auto;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-mv__box {
    justify-content: space-between;
  }
}
.p-shiokonbutadon-mv__txts {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  position: relative;
  right: 6px;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-mv__txts {
    position: absolute;
    right: auto;
    left: calc(50% + clamp(14.2875rem, 37.9104477612vw + -3.9095149254rem, 23.8125rem));
    top: clamp(0.9rem, 2.3880597015vw + -0.2462686567rem, 1.5rem);
    gap: clamp(0.375rem, 0.9950248756vw + -0.1026119403rem, 0.625rem);
  }
}
.p-shiokonbutadon-mv__txt {
  position: relative;
}
.p-shiokonbutadon-mv__txt--sm {
  width: 22px;
  width: 23.5px;
  top: 10px;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-mv__txt--sm {
    width: clamp(1.63125rem, 4.328358209vw + -0.4463619403rem, 2.71875rem);
    top: clamp(0.7125rem, 1.8905472637vw + -0.1949626866rem, 1.1875rem);
  }
}
.p-shiokonbutadon-mv__txt--lg {
  width: 62px;
  width: 61.75px;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-mv__txt--lg {
    width: clamp(4.18125rem, 11.0945273632vw + -1.1441231343rem, 6.96875rem);
  }
}
.p-shiokonbutadon-mv__img02 {
  width: 100px;
  flex-shrink: 0;
  position: absolute;
  right: calc(50% + 69px);
  bottom: -9px;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-mv__img02 {
    left: auto;
    right: calc(50% + clamp(12.7875rem, 33.9303482587vw + -3.4990671642rem, 21.3125rem));
    bottom: clamp(0.3rem, 0.7960199005vw + -0.0820895522rem, 0.5rem);
    width: clamp(7.35rem, 19.5024875622vw + -2.0111940299rem, 12.25rem);
  }
}
.p-shiokonbutadon-mv__img03 {
  width: 154px;
  flex-shrink: 0;
  position: absolute;
  left: calc(50% + 28px);
  bottom: -20px;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-mv__img03 {
    left: calc(50% + clamp(10.8375rem, 28.7562189055vw + -2.9654850746rem, 18.0625rem));
    bottom: clamp(-0.3125rem, -0.4975124378vw + 0.0513059701rem, -0.1875rem);
    width: clamp(9.75rem, 25.8706467662vw + -2.6679104478rem, 16.25rem);
  }
}
.p-shiokonbutadon-arrange {
  position: relative;
  padding: 36px 0 53px;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-arrange {
    padding: clamp(3.075rem, 8.1592039801vw + -0.8414179104rem, 5.125rem) 0 clamp(2.55rem, 6.7661691542vw + -0.697761194rem, 4.25rem);
  }
}
.p-shiokonbutadon-arrange .p-shiokonbutadon-container {
  padding-inline: 0;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-arrange .p-shiokonbutadon-container {
    padding-inline: clamp(1.5rem, 7.9646017699vw + -2.3230088496rem, 3.75rem);
  }
}
.p-shiokonbutadon-arrange::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(./assets/images/bg_arrange_01_sp.webp) no-repeat center/cover;
  opacity: 0.4;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-arrange::before {
    background: url(./assets/images/bg_arrange_01.webp) no-repeat center/cover;
  }
}
.p-shiokonbutadon-arrange__title {
  position: relative;
  width: 445px;
  width: 445.5px;
  left: 6px;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-arrange__title {
    margin-bottom: clamp(-1.3125rem, -2.0895522388vw + 0.2154850746rem, -0.7875rem);
    width: clamp(33.4125rem, 88.6567164179vw + -9.1427238806rem, 55.6875rem);
    left: clamp(-1.4375rem, -2.2885572139vw + 0.2360074627rem, -0.8625rem);
  }
}
.p-shiokonbutadon-arrange__list {
  margin-top: 19px;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-arrange__list {
    margin-top: 0;
  }
}
.p-shiokonbutadon-arrange__item + .p-shiokonbutadon-arrange__item {
  margin-top: -5px;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-arrange__item + .p-shiokonbutadon-arrange__item {
    margin-top: clamp(0.45rem, 1.1940298507vw + -0.1231343284rem, 0.75rem);
  }
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-arrange__item--i01 .p-shiokonbutadon-arrange__grp {
    margin-left: auto;
    left: clamp(2.8125rem, 4.9342105263vw + -0.2467105263rem, 4.6875rem);
  }
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-arrange__item--i02 .p-shiokonbutadon-arrange__grp {
    margin-inline: auto;
  }
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-arrange__item--i03 .p-shiokonbutadon-arrange__grp {
    left: clamp(-4.6875rem, -4.9342105263vw + 0.2467105263rem, -2.8125rem);
  }
}
.p-shiokonbutadon-arrange__img {
  position: relative;
  width: 100%;
}
.p-shiokonbutadon-arrange__grp {
  position: relative;
  width: 418px;
  left: calc(50% - 209px);
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-arrange__grp {
    left: 0;
    width: clamp(31.3125rem, 83.0845771144vw + -8.5680970149rem, 52.1875rem);
  }
}
.p-shiokonbutadon-arrange__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  -webkit-mix-blend-mode: multiply;
}
.p-shiokonbutadon-arrange__bg img {
  display: block;
  width: 100%;
}
.p-shiokonbutadon-arrange__slogon {
  position: relative;
  margin-inline: auto;
  margin-top: 35px;
  width: 342px;
  left: 3px;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-arrange__slogon {
    width: clamp(34.725rem, 92.1393034826vw + -9.5018656716rem, 57.875rem);
    margin-top: clamp(1.725rem, 4.5771144279vw + -0.4720149254rem, 2.875rem);
    left: clamp(0.675rem, 1.7910447761vw + -0.1847014925rem, 1.125rem);
  }
}
.p-shiokonbutadon-recipe {
  padding: 26px 0 0;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-recipe {
    padding: clamp(3.3375rem, 8.855721393vw + -0.9132462687rem, 5.5625rem) 0 0;
  }
}
.p-shiokonbutadon-recipe__title01 {
  position: relative;
  width: 432px;
  width: 431.25px;
  left: -14px;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-recipe__title01 {
    width: clamp(32.3625rem, 85.8706467662vw + -8.8554104478rem, 53.9375rem);
    left: clamp(-0.3125rem, -0.4975124378vw + 0.0513059701rem, -0.1875rem);
  }
}
.p-shiokonbutadon-recipe__title02 {
  margin-top: 28px;
  margin-left: -10px;
  width: 202px;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-recipe__title02 {
    width: clamp(17.475rem, 46.368159204vw + -4.7817164179rem, 29.125rem);
    margin-top: clamp(0.675rem, 1.7910447761vw + -0.1847014925rem, 1.125rem);
    margin-left: clamp(4.6875rem, 12.4378109453vw + -1.2826492537rem, 7.8125rem);
  }
}
.p-shiokonbutadon-recipe__title03 {
  width: 342px;
  margin-top: -3px;
  margin-left: -9px;
  margin-top: -3.95px;
  margin-left: -9.5px;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-recipe__title03 {
    width: clamp(29.5875rem, 78.5074626866vw + -8.0960820896rem, 49.3125rem);
    margin-top: clamp(0.15rem, 0.3980099502vw + -0.0410447761rem, 0.25rem);
    margin-left: clamp(8.475rem, 22.4875621891vw + -2.3190298507rem, 14.125rem);
  }
}
.p-shiokonbutadon-recipe__btn {
  position: relative;
  margin-top: 3px;
  width: 189px;
  margin-left: auto;
  left: 6px;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-recipe__btn {
    width: clamp(14.175rem, 37.6119402985vw + -3.8787313433rem, 23.625rem);
    margin-top: clamp(1.0125rem, 2.6865671642vw + -0.2770522388rem, 1.6875rem);
    left: clamp(0.225rem, 0.5970149254vw + -0.0615671642rem, 0.375rem);
  }
}
.p-shiokonbutadon-recipe__slogon {
  position: relative;
  margin-inline: auto;
  width: 336px;
  left: -3px;
  left: -3.5px;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-recipe__slogon {
    left: 0;
    margin-top: clamp(1.5rem, 3.9800995025vw + -0.4104477612rem, 2.5rem);
    width: clamp(40.5rem, 107.4626865672vw + -11.0820895522rem, 67.5rem);
  }
}
.p-shiokonbutadon-recipe__grp {
  position: relative;
  margin-top: 29px;
  margin-bottom: -75.9px;
  width: 100%;
  max-width: 335px;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-recipe__grp {
    max-width: 100%;
    margin-top: clamp(0.0375rem, 0.0995024876vw + -0.010261194rem, 0.0625rem);
    margin-bottom: clamp(-12.4375rem, -19.8009950249vw + 2.0419776119rem, -7.4625rem);
  }
}
.p-shiokonbutadon-recipe__grp-txt {
  position: absolute;
  width: 220px;
  right: calc(50% - 60px);
  top: 39px;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-recipe__grp-txt {
    width: clamp(16.5375rem, 43.8805970149vw + -4.5251865672rem, 27.5625rem);
    top: clamp(1.95rem, 5.1741293532vw + -0.5335820896rem, 3.25rem);
    right: calc(50% + clamp(0.2625rem, 0.6965174129vw + -0.0718283582rem, 0.4375rem));
  }
}
.p-shiokonbutadon-recipe__grp-img {
  margin-inline: auto;
  width: 468.5px;
  position: relative;
  left: -92px;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-recipe__grp-img {
    left: clamp(-4.375rem, -6.9651741294vw + 0.7182835821rem, -2.625rem);
    width: clamp(36.6rem, 97.1144278607vw + -10.0149253731rem, 61rem);
  }
}
.p-shiokonbutadon-banner {
  display: grid;
  grid-gap: 18px;
  margin: 72px auto 50px auto;
  width: 234px;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-banner {
    width: 100%;
    max-width: clamp(34.425rem, 91.3432835821vw + -9.4197761194rem, 57.375rem);
    grid-gap: clamp(1.725rem, 4.5771144279vw + -0.4720149254rem, 2.875rem) clamp(5.175rem, 13.7313432836vw + -1.4160447761rem, 8.625rem);
    grid-template-columns: 1fr 1fr;
    margin-top: clamp(4.6875rem, 12.4378109453vw + -1.2826492537rem, 7.8125rem);
    margin-bottom: clamp(1.6125rem, 4.2786069652vw + -0.4412313433rem, 2.6875rem);
  }
}
.p-shiokonbutadon-banner__item {
  position: relative;
}
.p-shiokonbutadon-totop {
  margin: 0 auto;
  width: 184px;
  display: block;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-totop {
    width: clamp(13.8rem, 36.6169154229vw + -3.776119403rem, 23rem);
  }
}
.p-shiokonbutadon-note__txt {
  position: relative;
  margin: 0 auto;
  width: 259px;
  margin-top: 4px;
}
@media screen and (min-width: 768px) {
  .p-shiokonbutadon-note__txt {
    width: clamp(16.125rem, 42.7860696517vw + -4.4123134328rem, 26.875rem);
    left: clamp(0.225rem, 0.5970149254vw + -0.0615671642rem, 0.375rem);
    margin-top: clamp(1.2rem, 3.184079602vw + -0.328358209rem, 2rem);
  }
}

/*# sourceMappingURL=style.css.map */