@charset "UTF-8";
/* #contMain reset */
#contMain *,
#contMain *::before,
#contMain *::after {
  box-sizing: border-box;
}
#contMain * {
  margin: 0;
  padding: 0;
}
#contMain img,
#contMain picture,
#contMain video,
#contMain canvas,
#contMain svg {
  display: block;
  max-width: 100%;
  height: auto;
}
#contMain img {
  width: 100%;
}

#contMain .shops__contents, #contMain .recipe__contents, #contMain .local__container, #contMain .cont__center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#contMain .shops__contents > *, #contMain .recipe__contents > *, #contMain .local__container > *, #contMain .cont__center > * {
  min-height: 0%;
}

#contMain .shops__container, #contMain .cont__container, #contMain .cont__container--small {
  box-sizing: content-box !important;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (max-width: 768px) {
  #contMain .shops__container, #contMain .cont__container, #contMain .cont__container--small {
    padding-left: 4vw;
    padding-right: 4vw;
  }
}

#contMain .shops__link, #contMain .recipe__menu-btn, #contMain .product__link, #contMain .secret__btn, #contMain .local__info, #contMain .link__item {
  color: inherit;
  transition: opacity 0.3s;
  cursor: pointer;
}
#contMain .shops__link:hover, #contMain .recipe__menu-btn:hover, #contMain .product__link:hover, #contMain .secret__btn:hover, #contMain .local__info:hover, #contMain .link__item:hover {
  opacity: 0.7;
}

/* common:start */
@media screen and (max-width: 768px) {
  .layout-container {
    overflow-x: visible !important;
  }
}
#contMain {
  position: relative;
  display: flex;
  flex-direction: column;
}
#contMain [v-cloak] {
  display: none;
  opacity: 0;
}
@media screen and (max-width: 768px) {
  #contMain .pcOnly {
    display: none !important;
  }
}
@media screen and (min-width: 769px) {
  #contMain .spOnly {
    display: none !important;
  }
}
#contMain button {
  appearance: none;
  border: none;
  background-color: transparent;
}
#contMain .innerlink-target {
  position: absolute;
  width: 1px;
  height: 1px;
  top: 0;
  left: 0;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  #contMain .innerlink-target {
    height: 45px;
    top: -45px;
  }
}
@media screen and (min-width: 769px) {
  #contMain .cont__container--small {
    max-width: 1000px;
  }
}
@media screen and (max-width: 768px) {
  #contMain .cont__mv, #contMain .cont__lead, #contMain .cont__local, #contMain .cont__secret, #contMain .cont__product, #contMain .cont__recipe, #contMain .cont__shops {
    order: 2;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    z-index: 1;
  }
  #contMain .cont__link {
    order: 1;
    overflow-x: visible;
    overflow-y: visible;
    position: sticky;
    z-index: 2;
    top: 0;
  }
}

/* common:end */
/* js-animation:start */
:root {
  --fade-translate-x: 0px;
  --fade-translate-y: 0px;
  --fade-duration: 500ms;
}

/* 表示方向 */
.up {
  --fade-translate-y: 50px;
}

.down {
  --fade-translate-y: -50px;
}

.fromLeft {
  --fade-translate-x: -50px;
}

.fromRight {
  --fade-translate-x: 50px;
}

.jsScroll {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
  transition-delay: 0ms;
  transition-timing-function: ease-out;
  transform: translate(var(--fade-translate-x), var(--fade-translate-y));
}
.jsScroll.delay--100 {
  transition-delay: 100ms;
}
.jsScroll.delay--200 {
  transition-delay: 200ms;
}
.jsScroll.delay--300 {
  transition-delay: 300ms;
}
.jsScroll.delay--400 {
  transition-delay: 400ms;
}
.jsScroll.delay--500 {
  transition-delay: 500ms;
}
.jsScroll.delay--600 {
  transition-delay: 600ms;
}
.jsScroll.delay--700 {
  transition-delay: 700ms;
}
.jsScroll.delay--800 {
  transition-delay: 800ms;
}
.jsScroll.delay--900 {
  transition-delay: 900ms;
}
.jsScroll.delay--1000 {
  transition-delay: 1000ms;
}
.jsScroll.delay--1100 {
  transition-delay: 1100ms;
}
.jsScroll.delay--1200 {
  transition-delay: 1200ms;
}
.jsScroll.delay--1300 {
  transition-delay: 1300ms;
}
.jsScroll.delay--1400 {
  transition-delay: 1400ms;
}
.jsScroll.delay--1500 {
  transition-delay: 1500ms;
}
.jsScroll.delay--1600 {
  transition-delay: 1600ms;
}
.jsScroll.delay--1700 {
  transition-delay: 1700ms;
}
.jsScroll.delay--1800 {
  transition-delay: 1800ms;
}
.jsScroll.delay--1900 {
  transition-delay: 1900ms;
}
.jsScroll.delay--2000 {
  transition-delay: 2000ms;
}
.jsScroll.delay--2100 {
  transition-delay: 2100ms;
}
.jsScroll.delay--2200 {
  transition-delay: 2200ms;
}
.jsScroll.delay--2300 {
  transition-delay: 2300ms;
}
.jsScroll.delay--2400 {
  transition-delay: 2400ms;
}
.jsScroll.delay--2500 {
  transition-delay: 2500ms;
}
.jsScroll.delay--2600 {
  transition-delay: 2600ms;
}
.jsScroll.delay--2700 {
  transition-delay: 2700ms;
}
.jsScroll.delay--2800 {
  transition-delay: 2800ms;
}
.jsScroll.delay--2900 {
  transition-delay: 2900ms;
}
.jsScroll.delay--3000 {
  transition-delay: 3000ms;
}

.jsScrollIn {
  opacity: 1;
  transform: translate(0, 0);
}

.jsFvHide {
  opacity: 0;
  transition-duration: 1s;
  transition-property: opacity, transform;
  transition-delay: 0s;
}
.jsFvHide.jsFvShow {
  opacity: 1;
}

.fade-enter-active {
  transition: opacity 0.8s;
}
.fade-leave-active {
  transition: opacity 0.8s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

@media screen and (max-width: 768px) {
  .menu-enter-active {
    transition: all 0.5s;
  }
  .menu-leave-active {
    transition: all 0.5s;
  }
  .menu-enter, .menu-leave-to {
    opacity: 0;
    transform: translateY(-100%);
  }
}
/* js-animation:end */
#contMain .js-modal {
  position: relative;
  z-index: 10000;
}
#contMain .js-modal__bg {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  z-index: 9001;
}
#contMain .js-modal__bg-enter-active {
  transition: all 0.2s ease-in-out;
}
#contMain .js-modal__bg-leave-active {
  transition: all 0.2s ease-in-out;
}
#contMain .js-modal__bg-enter, #contMain .js-modal__bg-leave-to {
  opacity: 0;
}
#contMain .js-modal__trigger {
  transition: opacity 0.3s;
  position: relative;
  z-index: 100;
}
#contMain .js-modal__trigger:hover {
  opacity: 0.7;
  cursor: pointer;
}
#contMain .js-modal__close {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 10px;
}
#contMain .js-modal__close img {
  width: 20px;
}
#contMain .js-modal__target {
  position: fixed;
  max-height: 95vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9002;
  overflow: hidden;
}
#contMain .js-modal__target-enter-active {
  transition: all 0.5s ease-in-out;
  transition-delay: 0.3s;
}
#contMain .js-modal__target-leave-active {
  transition: all 0.5s ease-in-out;
}
#contMain .js-modal__target-enter {
  opacity: 0;
}
#contMain .js-modal__target-leave-to {
  opacity: 0;
}
#contMain .js-modal__img-frame, #contMain .js-modal__local-frame {
  position: relative;
  max-width: 100%;
}
#contMain .js-modal__img-frame.landscape, #contMain .js-modal__local-frame.landscape {
  width: min(92vw, 1000px);
}
#contMain .js-modal__img-frame.landscape picture,
#contMain .js-modal__img-frame.landscape img, #contMain .js-modal__local-frame.landscape picture,
#contMain .js-modal__local-frame.landscape img {
  width: 100% !important;
  height: auto !important;
}
#contMain .js-modal__img-frame.portrait picture,
#contMain .js-modal__img-frame.portrait img, #contMain .js-modal__local-frame.portrait picture,
#contMain .js-modal__local-frame.portrait img {
  width: auto !important;
  height: 100% !important;
}
#contMain .js-modal__img-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 110px;
  height: 110px;
  width: 11%;
}
@media screen and (max-width: 768px) {
  #contMain .js-modal__img-close {
    width: 13.6231884058%;
    height: 12.5333333333vw;
  }
}
#contMain .js-modal__img-close::before, #contMain .js-modal__img-close::after {
  display: block;
  position: absolute;
  content: "";
  width: 40px;
  height: 3px;
  background-color: #ffffff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
  #contMain .js-modal__img-close::before, #contMain .js-modal__img-close::after {
    width: 42.5531914894%;
    height: 0.4vw;
  }
}
#contMain .js-modal__img-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
#contMain .js-modal__img-close::after {
  transform: translate(-50%, -50%) rotate(135deg);
}
#contMain .js-modal__local-frame {
  position: relative;
  max-width: 100%;
}
#contMain .js-modal__local-frame.landscape {
  width: min(92vw, 1000px);
}
#contMain .js-modal__local-frame.landscape picture,
#contMain .js-modal__local-frame.landscape img {
  width: 100% !important;
  height: auto !important;
}
#contMain .js-modal__local-frame.portrait picture,
#contMain .js-modal__local-frame.portrait img {
  width: auto !important;
  height: 100% !important;
}

#contMain .mv__slide-02, #contMain .mv__slide-01 {
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  #contMain .mv__slide-02, #contMain .mv__slide-01 {
    height: 108.5333333333vw;
  }
}

/* mv:start */
#contMain .mv__container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}
@media screen and (min-width: 1921px) {
  #contMain .mv__container {
    max-width: 62.5vw;
  }
}
#contMain .mv__slide-01 {
  background-image: url(/craft_spice_soda/images/pc/mv_bg_limited.jpg);
}
@media screen and (max-width: 768px) {
  #contMain .mv__slide-01 {
    background-image: url(/craft_spice_soda/images/sp/mv_bg_limited.jpg);
  }
}
#contMain .mv__slide-02 {
  background-image: url(/craft_spice_soda/images/pc/mv_bg_01.jpg);
}
@media screen and (max-width: 768px) {
  #contMain .mv__slide-02 {
    background-image: url(/craft_spice_soda/images/sp/mv_bg_01.jpg);
  }
}
#contMain .mv__contents {
  display: flex;
  flex-direction: column-reverse;
}
#contMain .mv .swiper-outer {
  position: relative;
  padding-bottom: 40px;
}
@media screen and (max-width: 768px) {
  #contMain .mv .swiper-outer {
    padding-bottom: 7.2vw;
  }
}
#contMain .mv .swiper-pagination {
  width: 100%;
  line-height: 0;
  bottom: 0;
}
@media screen and (max-width: 768px) {
  #contMain .mv .swiper-pagination {
    bottom: 0;
  }
}
#contMain .mv .swiper-pagination-bullet {
  margin-left: 9px;
  margin-right: 9px;
  width: 18px;
  height: 18px;
  background: transparent;
  border: 2px solid #000000;
  opacity: 1;
}
@media screen and (max-width: 768px) {
  #contMain .mv .swiper-pagination-bullet {
    margin-left: 1.6vw;
    margin-right: 1.6vw;
    width: 3.2vw;
    height: 3.2vw;
    border-width: 1px;
  }
}
#contMain .mv .swiper-pagination-bullet-active {
  background: #000000;
}

/* mv:end */
/* link:start */
@media screen and (max-width: 768px) {
  #contMain .link__container {
    position: relative;
    z-index: 1;
    overflow: visible;
  }
}
#contMain .link__menu {
  width: 100%;
  height: 45px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  background-color: #000000;
  position: relative;
  z-index: 2;
}
#contMain .link__trigger {
  display: block;
  width: 58px;
  height: 45px;
  position: relative;
}
#contMain .link__btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 768px) {
  #contMain .link__contents {
    position: absolute;
    z-index: 1;
    top: 45px;
    left: 0;
    width: 100%;
    height: calc(100vh - 45px);
    background-color: #fbef20;
  }
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  #contMain .link__contents {
    overflow-y: auto;
    overscroll-behavior: none;
  }
}
@media screen and (max-width: 768px) {
  #contMain .link .cont__container--small {
    max-width: 345px;
  }
}
#contMain .link__list {
  padding-top: 4%;
  padding-bottom: 4%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
}
@media screen and (min-width: 769px) {
  #contMain .link__list {
    gap: 3.5%;
  }
}
@media screen and (max-width: 768px) {
  #contMain .link__list {
    padding-top: 4.347826087%;
    padding-bottom: 14.4927536232%;
    flex-direction: column;
    justify-content: flex-start;
    min-height: calc(100vh - 44px);
  }
}
#contMain .link__list li {
  width: 22.4%;
}
@media screen and (max-width: 768px) {
  #contMain .link__list li {
    width: 100%;
    margin-top: 4.347826087%;
  }
}
/* link:end */
#contMain .lead__batsu, #contMain .lead__maru {
  width: 48%;
  position: relative;
}
@media screen and (max-width: 768px) {
  #contMain .lead__batsu, #contMain .lead__maru {
    width: 80vw;
  }
}

#contMain .lead__icon--batsu, #contMain .lead__icon--maru {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* lead:start */
#contMain .lead__contents {
  padding-top: 7%;
  padding-bottom: 5%;
}
@media screen and (max-width: 768px) {
  #contMain .lead__contents {
    padding-top: 13.3333333333vw;
    padding-bottom: 6.6666666667vw;
  }
}
#contMain .lead__judge {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
}
@media screen and (max-width: 768px) {
  #contMain .lead__judge {
    flex-direction: column;
    align-items: center;
  }
}
#contMain .lead__maru {
  background-color: #71c0cf;
}
#contMain .lead__batsu {
  background-color: #e6e6e7;
}
@media screen and (max-width: 768px) {
  #contMain .lead__batsu {
    margin-top: 6.6666666667vw;
  }
}
#contMain .lead__judge-text {
  position: relative;
  z-index: 2;
}
#contMain .lead__icon--maru {
  width: 41.4583333333%;
  height: 124.375%;
}
@media screen and (max-width: 768px) {
  #contMain .lead__icon--maru {
    width: 25.3333333333vw;
    height: 25.3333333333vw;
  }
}
#contMain .lead__icon--batsu {
  width: 69.1666666667%;
  height: 62.5%;
}
@media screen and (max-width: 768px) {
  #contMain .lead__icon--batsu {
    width: 44.2666666667vw;
    height: 13.3333333333vw;
  }
}
#contMain .lead__icon--batsu::after {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 102.4096385542%;
  height: 12%;
  background-color: #d97354;
  transform: rotate(-15deg) scaleX(0);
  transform-origin: right top;
  display: block;
  content: "";
}
#contMain .lead__text-01 {
  margin-top: 8%;
}
@media screen and (max-width: 768px) {
  #contMain .lead__text-01 {
    margin-top: 6.6666666667vw;
  }
}
#contMain .lead__text-02 {
  margin-top: 4%;
}
@media screen and (max-width: 768px) {
  #contMain .lead__text-02 {
    margin-top: 5.3333333333vw;
  }
}
#contMain .lead__icon--maru {
  transform: rotate(180deg) translate(-50%, -50%);
  transform-origin: left top;
}
#contMain .lead__icon-svg {
  stroke-dasharray: 626 628;
  stroke-dashoffset: 627;
}
@keyframes circle {
  100% {
    stroke-dashoffset: 0;
  }
}
#contMain .jsScrollIn .lead__icon-svg {
  animation: circle 1s ease 0s forwards;
}
@media screen and (min-width: 769px) {
  #contMain .jsScrollIn .lead__icon-svg {
    animation-delay: 1s;
  }
}
@media screen and (max-width: 768px) {
  #contMain .jsScrollIn .lead__icon-svg {
    animation-delay: 1s;
  }
}
#contMain .jsScrollIn .lead__icon--batsu::after {
  transition: transform 0.5s;
  transform: rotate(-15deg) scaleX(1);
}
@media screen and (min-width: 769px) {
  #contMain .jsScrollIn .lead__icon--batsu::after {
    transition-delay: 0.5s;
  }
}
@media screen and (max-width: 768px) {
  #contMain .jsScrollIn .lead__icon--batsu::after {
    transition-delay: 2s;
  }
}

/* lead:end */
:root {
  --widthPc: 0%;
  --posXpc: 0%;
  --posYpc: 0%;
  --posXsp: 0%;
  --posYsp: 0%;
}

.hokkaido {
  --widthPc: 18.5%;
  --posXpc: 12.6%;
  --posYpc: 6.1%;
  --widthSp: 45.4%;
  --posXsp: 13.2%;
  --posYsp: 2.6%;
}

.aomori {
  --widthPc: 14.2%;
  --posXpc: 36.1%;
  --posYpc: 4.5%;
  --widthSp: 29%;
  --posXsp: 63.7%;
  --posYsp: 2%;
}

.iwate {
  --widthPc: 14.6%;
  --posXpc: 54.3%;
  --posYpc: 6.7%;
  --widthSp: 31.4%;
  --posXsp: 7.3%;
  --posYsp: 6.7%;
}

.miyagi {
  --widthPc: 14.3%;
  --posXpc: 72.9%;
  --posYpc: 4.5%;
  --widthSp: 37.9%;
  --posXsp: 47%;
  --posYsp: 6.1%;
}

.akita {
  --widthPc: 14.7%;
  --posXpc: 7.7%;
  --posYpc: 14.7%;
  --widthSp: 31.6%;
  --posXsp: 20.3%;
  --posYsp: 10.4%;
}

.yamagata {
  --widthPc: 13.5%;
  --posXpc: 25.4%;
  --posYpc: 13%;
  --widthSp: 32.7%;
  --posXsp: 60%;
  --posYsp: 9.8%;
}

.fukushima {
  --widthPc: 12.3%;
  --posXpc: 43.4%;
  --posYpc: 14.8%;
  --widthSp: 38.6%;
  --posXsp: 7.3%;
  --posYsp: 14.7%;
}

.ibaraki {
  --widthPc: 13.2%;
  --posXpc: 59.1%;
  --posYpc: 12.9%;
  --widthSp: 35%;
  --posXsp: 51.4%;
  --posYsp: 14.1%;
}

.tochigi {
  --widthPc: 16.3%;
  --posXpc: 76.3%;
  --posYpc: 15.4%;
  --widthSp: 35.8%;
  --posXsp: 12.2%;
  --posYsp: 18.7%;
}

.gunma {
  --widthPc: 17.9%;
  --posXpc: 11.3%;
  --posYpc: 23.9%;
  --widthSp: 36.9%;
  --posXsp: 55.8%;
  --posYsp: 18.1%;
}

.saitama {
  --widthPc: 14.6%;
  --posXpc: 33.1%;
  --posYpc: 22.3%;
  --widthSp: 39.3%;
  --posXsp: 7.3%;
  --posYsp: 23.1%;
}

.chiba {
  --widthPc: 19.1%;
  --posXpc: 51.7%;
  --posYpc: 23%;
  --widthSp: 30%;
  --posXsp: 53.4%;
  --posYsp: 22.3%;
}

.tokyo {
  --widthPc: 13.9%;
  --posXpc: 74.7%;
  --posYpc: 20.8%;
  --widthSp: 25.3%;
  --posXsp: 17.6%;
  --posYsp: 26.4%;
}

.kanagawa {
  --widthPc: 16%;
  --posXpc: 5.2%;
  --posYpc: 32%;
  --widthSp: 41.9%;
  --posXsp: 50.9%;
  --posYsp: 26.4%;
}

.niigata {
  --widthPc: 16.8%;
  --posXpc: 24.7%;
  --posYpc: 30.9%;
  --widthSp: 36.1%;
  --posXsp: 7.2%;
  --posYsp: 31.4%;
}

.toyama {
  --widthPc: 12.4%;
  --posXpc: 45.5%;
  --posYpc: 32%;
  --widthSp: 36.9%;
  --posXsp: 51.6%;
  --posYsp: 30.8%;
}

.ishikawa {
  --widthPc: 13.3%;
  --posXpc: 61.9%;
  --posYpc: 30.9%;
  --widthSp: 28.6%;
  --posXsp: 18.2%;
  --posYsp: 35.3%;
}

.fukui {
  --widthPc: 15.2%;
  --posXpc: 79.8%;
  --posYpc: 32.8%;
  --widthSp: 38%;
  --posXsp: 54.7%;
  --posYsp: 34.7%;
}

.yamanashi {
  --widthPc: 17.8%;
  --posXpc: 12.9%;
  --posYpc: 40.8%;
  --widthSp: 33.4%;
  --posXsp: 7.3%;
  --posYsp: 39.7%;
}

.nagano {
  --widthPc: 14.4%;
  --posXpc: 34.6%;
  --posYpc: 39.3%;
  --widthSp: 33.8%;
  --posXsp: 49%;
  --posYsp: 39%;
}

.gifu {
  --widthPc: 15.3%;
  --posXpc: 53%;
  --posYpc: 41.1%;
  --widthSp: 31.2%;
  --posXsp: 12.4%;
  --posYsp: 43.6%;
}

.shizuoka {
  --widthPc: 14.7%;
  --posXpc: 72.2%;
  --posYpc: 39.3%;
  --widthSp: 41.1%;
  --posXsp: 51.8%;
  --posYsp: 43%;
}

.aichi {
  --widthPc: 13.2%;
  --posXpc: 8.3%;
  --posYpc: 49.1%;
  --widthSp: 35%;
  --posXsp: 7.3%;
  --posYsp: 48%;
}

.mie {
  --widthPc: 12.1%;
  --posXpc: 25.5%;
  --posYpc: 47.6%;
  --widthSp: 33.1%;
  --posXsp: 50.6%;
  --posYsp: 47.1%;
}

.shiga {
  --widthPc: 13.1%;
  --posXpc: 41.6%;
  --posYpc: 48.7%;
  --widthSp: 33.5%;
  --posXsp: 18.3%;
  --posYsp: 52.1%;
}

.kyoto {
  --widthPc: 14.9%;
  --posXpc: 58.7%;
  --posYpc: 47.6%;
  --widthSp: 33.5%;
  --posXsp: 59.6%;
  --posYsp: 51.5%;
}

.osaka {
  --widthPc: 14.5%;
  --posXpc: 77.5%;
  --posYpc: 48.8%;
  --widthSp: 36.7%;
  --posXsp: 7%;
  --posYsp: 56.1%;
}

.hyogo {
  --widthPc: 15.4%;
  --posXpc: 12%;
  --posYpc: 57%;
  --widthSp: 33.2%;
  --posXsp: 51.9%;
  --posYsp: 55.9%;
}

.nara {
  --widthPc: 15.1%;
  --posXpc: 31.3%;
  --posYpc: 56%;
  --widthSp: 32.2%;
  --posXsp: 16.3%;
  --posYsp: 60.7%;
}

.wakayama {
  --widthPc: 17.8%;
  --posXpc: 50.3%;
  --posYpc: 57.6%;
  --widthSp: 38%;
  --posXsp: 55.1%;
  --posYsp: 60.2%;
}

.tottori {
  --widthPc: 16.2%;
  --posXpc: 72%;
  --posYpc: 56.8%;
  --widthSp: 31.5%;
  --posXsp: 7.2%;
  --posYsp: 65.9%;
}

.shimane {
  --widthPc: 14.6%;
  --posXpc: 5.1%;
  --posYpc: 64.6%;
  --widthSp: 31.5%;
  --posXsp: 48.5%;
  --posYsp: 64.1%;
}

.okayama {
  --widthPc: 15.7%;
  --posXpc: 23.7%;
  --posYpc: 64.5%;
  --widthSp: 38.9%;
  --posXsp: 15.3%;
  --posYsp: 69.6%;
}

.hiroshima {
  --widthPc: 14.5%;
  --posXpc: 43.2%;
  --posYpc: 65.5%;
  --widthSp: 30.8%;
  --posXsp: 62.1%;
  --posYsp: 68.9%;
}

.yamaguchi {
  --widthPc: 15.9%;
  --posXpc: 61.5%;
  --posYpc: 63.9%;
  --widthSp: 36.4%;
  --posXsp: 7.4%;
  --posYsp: 73.4%;
}

.tokushima {
  --widthPc: 14.3%;
  --posXpc: 81.2%;
  --posYpc: 66.5%;
  --widthSp: 35.7%;
  --posXsp: 52.2%;
  --posYsp: 72.8%;
}

.kagawa {
  --widthPc: 16%;
  --posXpc: 11.4%;
  --posYpc: 74.8%;
  --widthSp: 29.9%;
  --posXsp: 24%;
  --posYsp: 77.4%;
}

.ehime {
  --widthPc: 15.9%;
  --posXpc: 31.3%;
  --posYpc: 73.3%;
  --widthSp: 31.4%;
  --posXsp: 61.6%;
  --posYsp: 76.8%;
}

.kochi {
  --widthPc: 16.3%;
  --posXpc: 51.1%;
  --posYpc: 75.3%;
  --widthSp: 30.6%;
  --posXsp: 7.3%;
  --posYsp: 81.2%;
}

.fukuoka {
  --widthPc: 17.1%;
  --posXpc: 71.3%;
  --posYpc: 73.3%;
  --widthSp: 34.5%;
  --posXsp: 45.7%;
  --posYsp: 80.8%;
}

.saga {
  --widthPc: 14.8%;
  --posXpc: 4.5%;
  --posYpc: 82.9%;
  --widthSp: 27.9%;
  --posXsp: 28.5%;
  --posYsp: 84.9%;
}

.nagasaki {
  --widthPc: 13.5%;
  --posXpc: 22.3%;
  --posYpc: 81.7%;
  --widthSp: 28.2%;
  --posXsp: 64.7%;
  --posYsp: 84.3%;
}

.kumamoto {
  --widthPc: 16.1%;
  --posXpc: 39.8%;
  --posYpc: 83.7%;
  --widthSp: 32.1%;
  --posXsp: 7.2%;
  --posYsp: 89.1%;
}

.oita {
  --widthPc: 17%;
  --posXpc: 59.6%;
  --posYpc: 81.7%;
  --widthSp: 32.1%;
  --posXsp: 45.7%;
  --posYsp: 88.5%;
}

.miyazaki {
  --widthPc: 15.2%;
  --posXpc: 80.4%;
  --posYpc: 82.8%;
  --widthSp: 28.7%;
  --posXsp: 20%;
  --posYsp: 92.6%;
}

.kagoshima {
  --widthPc: 18.8%;
  --posXpc: 31.5%;
  --posYpc: 91.6%;
  --widthSp: 37.2%;
  --posXsp: 55.7%;
  --posYsp: 91.9%;
}

.okinawa {
  --widthPc: 14.2%;
  --posXpc: 54.1%;
  --posYpc: 90.1%;
  --widthSp: 27.7%;
  --posXsp: 7.3%;
  --posYsp: 96.2%;
}

/* local:start */
#contMain .local {
  position: relative;
}
#contMain .local__container {
  padding-top: 5%;
  padding-bottom: 10%;
}
@media screen and (max-width: 768px) {
  #contMain .local__container {
    padding-top: 6.6666666667vw;
    padding-bottom: 13.3333333333vw;
  }
}
#contMain .local__title {
  width: 49.3%;
  margin-bottom: -8.3%;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  #contMain .local__title {
    width: 83.9130434783%;
    margin-bottom: -15.0724637681%;
  }
}
#contMain .local__contents {
  position: relative;
  z-index: 1;
}
#contMain .local__btn {
  position: absolute;
  width: var(--widthPc);
  left: var(--posXpc);
  top: var(--posYpc);
}
@media screen and (max-width: 768px) {
  #contMain .local__btn {
    width: var(--widthSp);
    left: var(--posXsp);
    top: var(--posYsp);
  }
}
#contMain .local__info:nth-child(1) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 400ms;
}
#contMain .local__info:nth-child(2) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 500ms;
}
#contMain .local__info:nth-child(3) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 600ms;
}
#contMain .local__info:nth-child(4) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 700ms;
}
#contMain .local__info:nth-child(5) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 800ms;
}
#contMain .local__info:nth-child(6) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 900ms;
}
#contMain .local__info:nth-child(7) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 1000ms;
}
#contMain .local__info:nth-child(8) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 1100ms;
}
#contMain .local__info:nth-child(9) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 1200ms;
}
#contMain .local__info:nth-child(10) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 1300ms;
}
#contMain .local__info:nth-child(11) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 1400ms;
}
#contMain .local__info:nth-child(12) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 1500ms;
}
#contMain .local__info:nth-child(13) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 1600ms;
}
#contMain .local__info:nth-child(14) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 1700ms;
}
#contMain .local__info:nth-child(15) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 1800ms;
}
#contMain .local__info:nth-child(16) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 1900ms;
}
#contMain .local__info:nth-child(17) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 2000ms;
}
#contMain .local__info:nth-child(18) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 2100ms;
}
#contMain .local__info:nth-child(19) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 2200ms;
}
#contMain .local__info:nth-child(20) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 2300ms;
}
#contMain .local__info:nth-child(21) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 2400ms;
}
#contMain .local__info:nth-child(22) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 2500ms;
}
#contMain .local__info:nth-child(23) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 2600ms;
}
#contMain .local__info:nth-child(24) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 2700ms;
}
#contMain .local__info:nth-child(25) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 2800ms;
}
#contMain .local__info:nth-child(26) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 2900ms;
}
#contMain .local__info:nth-child(27) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 3000ms;
}
#contMain .local__info:nth-child(28) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 3100ms;
}
#contMain .local__info:nth-child(29) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 3200ms;
}
#contMain .local__info:nth-child(30) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 3300ms;
}
#contMain .local__info:nth-child(31) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 3400ms;
}
#contMain .local__info:nth-child(32) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 3500ms;
}
#contMain .local__info:nth-child(33) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 3600ms;
}
#contMain .local__info:nth-child(34) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 3700ms;
}
#contMain .local__info:nth-child(35) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 3800ms;
}
#contMain .local__info:nth-child(36) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 3900ms;
}
#contMain .local__info:nth-child(37) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 4000ms;
}
#contMain .local__info:nth-child(38) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 4100ms;
}
#contMain .local__info:nth-child(39) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 4200ms;
}
#contMain .local__info:nth-child(40) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 4300ms;
}
#contMain .local__info:nth-child(41) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 4400ms;
}
#contMain .local__info:nth-child(42) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 4500ms;
}
#contMain .local__info:nth-child(43) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 4600ms;
}
#contMain .local__info:nth-child(44) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 4700ms;
}
#contMain .local__info:nth-child(45) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 4800ms;
}
#contMain .local__info:nth-child(46) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 4900ms;
}
#contMain .local__info:nth-child(47) .local__btn {
  opacity: 0;
  transition: opacity 1s ease-out 0.5s;
  transition-delay: 5000ms;
}
#contMain .jsScrollIn .local__info .local__btn {
  opacity: 1;
}

/* local:end */
#contMain .secret__spice-front, #contMain .secret__spice-bg, #contMain .secret__image {
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
}
@media screen and (max-width: 768px) {
  #contMain .secret__spice-front, #contMain .secret__spice-bg, #contMain .secret__image {
    top: 0;
  }
}

/* secret:start */
#contMain .secret__container {
  background-image: url(/craft_spice_soda/images/pc/secret_bg.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 1920px;
}
@media screen and (max-width: 768px) {
  #contMain .secret__container {
    background-image: url(/craft_spice_soda/images/sp/secret_bg.jpg);
    background-size: 100%;
  }
}
#contMain .secret__contents {
  position: relative;
  padding-bottom: 10%;
}
@media screen and (max-width: 768px) {
  #contMain .secret__contents {
    padding-bottom: 13.3333333333vw;
  }
}
#contMain .secret__title {
  position: relative;
  z-index: 4;
}
#contMain .secret__image {
  z-index: 2;
}
#contMain .secret__spice-bg {
  z-index: 1;
}
#contMain .secret__spice-front {
  z-index: 3;
}
#contMain .secret__sub-title {
  margin-top: 5%;
}
@media screen and (max-width: 768px) {
  #contMain .secret__sub-title {
    margin-top: 6.6666666667vw;
  }
}
#contMain .secret__spice-text {
  margin-top: 3%;
}
@media screen and (max-width: 768px) {
  #contMain .secret__spice-text {
    margin-top: 4.6666666667vw;
  }
}
#contMain .secret__btns {
  margin-top: 5%;
  margin-left: auto;
  margin-right: auto;
  width: 85.5%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}
@media screen and (max-width: 768px) {
  #contMain .secret__btns {
    margin-top: 4vw;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}
#contMain .secret__btns li {
  width: 18.1286549708%;
  margin-left: 0.9356725146%;
  margin-right: 0.9356725146%;
}
@media screen and (max-width: 768px) {
  #contMain .secret__btns li {
    width: 28.1333333333vw;
    margin-top: 4vw;
    margin-left: 2vw;
    margin-right: 2vw;
  }
}
#contMain .secret__btn {
  display: block;
}
#contMain .secret__bottom-text {
  margin-top: 3%;
}
@media screen and (max-width: 768px) {
  #contMain .secret__bottom-text {
    margin-top: 5.3333333333vw;
  }
}
#contMain .secret__image {
  opacity: 0;
}
#contMain .secret__spice-bg,
#contMain .secret__spice-front {
  opacity: 0;
}
#contMain .jsScrollIn > .secret__image {
  animation: rotate-in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: 1s;
}
#contMain .jsScrollIn > .secret__spice-bg {
  animation: fade-up 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: 1.5s;
}
#contMain .jsScrollIn > .secret__spice-front {
  animation: fade-up 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: 1.55s;
}

/**
 * ----------------------------------------
 * fade-in
 * ----------------------------------------
 */
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * fade-up
 * ----------------------------------------
 */
@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(10%);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
/**
 * ----------------------------------------
 * rotate-in
 * ----------------------------------------
 */
@keyframes rotate-in {
  0% {
    transform: rotate(-2deg) translate(10%, 20%);
    opacity: 0;
  }
  100% {
    transform: rotate(0deg) translate(0, 0);
    opacity: 1;
  }
}
/* secret:end */
#contMain .product__wrapper--limited, #contMain .product__wrapper {
  width: 100%;
  background-image: url(/craft_spice_soda/images/pc/product_bg.jpg);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 1920px 145px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
@media screen and (min-width: 1921px) {
  #contMain .product__wrapper--limited, #contMain .product__wrapper {
    background-size: 100% 145px;
  }
}
@media screen and (max-width: 768px) {
  #contMain .product__wrapper--limited, #contMain .product__wrapper {
    padding-bottom: 0;
    background-image: url(/craft_spice_soda/images/sp/product_bg.jpg);
    background-size: 100%;
    background-position: top 74.4vw center;
  }
}

/* product:start */
#contMain .product__container {
  width: 100%;
}
#contMain .product__container .swiper-outer {
  position: relative;
}
#contMain .product__container .swiper-pagination {
  width: 100%;
  line-height: 0;
  position: absolute;
  bottom: 30px;
}
@media screen and (max-width: 768px) {
  #contMain .product__container .swiper-pagination {
    bottom: 4vw;
  }
}
#contMain .product__container .swiper-pagination-bullet {
  margin-left: 9px;
  margin-right: 9px;
  width: 18px;
  height: 18px;
  background: transparent;
  border: 2px solid #000000;
  opacity: 1;
}
@media screen and (max-width: 768px) {
  #contMain .product__container .swiper-pagination-bullet {
    margin-left: 1.6vw;
    margin-right: 1.6vw;
    width: 3.2vw;
    height: 3.2vw;
    border-width: 0.2666666667vw;
  }
}
#contMain .product__container .swiper-pagination-bullet-active {
  background: #000000;
}
#contMain .product__items {
  position: relative;
}
#contMain .product__wrapper {
  background-color: #fbef20;
}
#contMain .product__wrapper--limited {
  background-color: #f88f26;
}
#contMain .product__contents {
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
}
@media screen and (max-width: 768px) {
  #contMain .product__contents {
    margin: 0 auto;
    width: 92vw;
  }
}
#contMain .product__image-area {
  padding-bottom: 50px;
  width: 45%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
}
@media screen and (max-width: 768px) {
  #contMain .product__image-area {
    padding-bottom: 0;
    width: 100%;
  }
}
#contMain .product__text-area {
  display: flex;
  flex-direction: column;
  padding-bottom: 10.8%;
  width: 57.1%;
  margin-top: 10%;
  margin-right: -2.1%;
}
@media screen and (max-width: 768px) {
  #contMain .product__text-area {
    width: 100%;
    padding-bottom: 14.6666666667vw;
    margin-top: 0;
    margin-right: 0;
  }
}
#contMain .product__title {
  padding-top: 100px;
  width: 18.1481481481%;
  max-width: 196px;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 50%;
}
#contMain .product__title.jsScroll {
  transform: translate(-50%, 50px);
}
#contMain .product__title.jsScrollIn.up {
  transform: translate(-50%, 0);
}
@media screen and (max-width: 768px) {
  #contMain .product__title {
    padding-top: 13.3333333333vw;
    width: 92vw;
    max-width: none;
  }
}
#contMain .product__name {
  margin-top: 7.0052539405%;
  padding-top: 15.411558669%;
  width: 72.5043782837%;
}
@media screen and (max-width: 768px) {
  #contMain .product__name {
    margin-top: 0;
    padding-top: 0;
    width: 100%;
  }
}
#contMain .product__copy {
  margin-top: 3.8528896673%;
  width: 92.9947460595%;
}
@media screen and (max-width: 768px) {
  #contMain .product__copy {
    width: 100%;
    margin-top: 4vw;
  }
}
#contMain .product__copy--limited {
  margin-top: 3.8528896673%;
  width: 100%;
}
@media screen and (max-width: 768px) {
  #contMain .product__copy--limited {
    width: 100%;
    margin-top: 4vw;
  }
}
#contMain .product__info {
  width: 51.3134851138%;
  margin-top: 7.0052539405%;
  margin-bottom: 6.6549912434%;
}
@media screen and (max-width: 768px) {
  #contMain .product__info {
    width: 100%;
    margin-top: 8vw;
    margin-bottom: 8vw;
  }
}
@media screen and (max-width: 768px) {
  #contMain .product__info.productNormal {
    margin-top: 6.6666666667vw;
  }
}
#contMain .product__link {
  display: block;
  width: 52.5394045534%;
}
@media screen and (max-width: 768px) {
  #contMain .product__link {
    margin-bottom: auto;
    width: 100%;
  }
}
#contMain .product__image--small {
  width: 49.3333333333%;
}
@media screen and (max-width: 768px) {
  #contMain .product__image--small {
    width: 50%;
  }
}
#contMain .product__image--long {
  width: 50.6666666667%;
}
@media screen and (max-width: 768px) {
  #contMain .product__image--long {
    width: 50%;
  }
}
#contMain .jsScroll.product__contents {
  opacity: 1;
}
#contMain .jsScrollIn.product__contents {
  animation: popOut 0.4s both;
  animation-delay: 0.3s;
}

@keyframes popOut {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
/* product:end */
/* recipe:start */
#contMain .recipe__container {
  background-color: #fbef20;
}
#contMain .recipe__contents {
  padding-top: 10%;
  padding-bottom: 10%;
}
@media screen and (max-width: 768px) {
  #contMain .recipe__contents {
    padding-top: 13.3333333333vw;
    padding-bottom: 13.3333333333vw;
  }
}
#contMain .recipe__menus {
  margin-top: 4%;
  width: 72%;
}
@media screen and (max-width: 768px) {
  #contMain .recipe__menus {
    margin-top: 5.3333333333vw;
    width: 87.7333333333vw;
  }
}
#contMain .recipe__menus .swiper-container {
  overflow: visible;
}
#contMain .recipe__menus .swiper-slide {
  opacity: 0.6;
  transition: opacity 0.3s;
  padding-bottom: 3px;
}
#contMain .recipe__menus .swiper-slide-active {
  opacity: 1;
}
#contMain .recipe__menus .swiper-outer {
  position: relative;
  padding-bottom: 38px;
}
@media screen and (max-width: 768px) {
  #contMain .recipe__menus .swiper-outer {
    padding-bottom: 6.4vw;
  }
}
#contMain .recipe__menus .swiper-pagination {
  width: 100%;
  line-height: 0;
  bottom: 0;
}
#contMain .recipe__menus .swiper-pagination-bullet {
  margin-left: 9px;
  margin-right: 9px;
  width: 18px;
  height: 18px;
  background: transparent;
  border: 2px solid #000000;
  opacity: 1;
}
@media screen and (max-width: 768px) {
  #contMain .recipe__menus .swiper-pagination-bullet {
    margin-left: 1.6vw;
    margin-right: 1.6vw;
    width: 3.2vw;
    height: 3.2vw;
    border-width: 0.2666666667vw;
  }
}
#contMain .recipe__menus .swiper-pagination-bullet-active {
  background: #000000;
}
#contMain .recipe__menu {
  width: 94.4444444444%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 768px) {
  #contMain .recipe__menu {
    width: 85.8666666667vw;
  }
}
#contMain .recipe__menu-images {
  margin-top: 4.4117647059%;
  border: 1px solid #000000;
}
@media screen and (max-width: 768px) {
  #contMain .recipe__menu-images {
    margin-top: 3.2vw;
    border-width: 0.2666666667vw;
    width: 100%;
  }
}
#contMain .recipe__menu-photo {
  position: relative;
  width: 100%;
}
#contMain .recipe__menu-btn {
  display: block;
  width: 32.3529411765%;
  position: absolute;
  right: 1.4705882353%;
  bottom: 2.5%;
}
#contMain .recipe__menu-btn::after {
  display: none;
}
@media screen and (max-width: 768px) {
  #contMain .recipe__menu-btn {
    width: 34.6666666667vw;
    right: 2.9333333333vw;
    bottom: 2.6666666667vw;
  }
}
#contMain .recipe__menu-text {
  margin-top: 2.9411764706%;
}
@media screen and (max-width: 768px) {
  #contMain .recipe__menu-text {
    margin-top: 5.0666666667vw;
  }
}

/* recipe:end */
/* shops:start */
#contMain .shops__contents {
  padding-top: 60px;
  padding-bottom: 83px;
}
@media screen and (max-width: 768px) {
  #contMain .shops__contents {
    padding-top: 10.6666666667vw;
    padding-bottom: 13.8666666667vw;
  }
}
#contMain .shops__heading {
  width: 165px;
}
@media screen and (max-width: 768px) {
  #contMain .shops__heading {
    width: 35.2vw;
  }
}
#contMain .shops__items {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  #contMain .shops__items {
    margin-top: 4vw;
    margin-left: 4.8vw;
    flex-direction: column;
  }
}
#contMain .shops__item {
  height: 85px;
  width: auto;
}
@media screen and (max-width: 768px) {
  #contMain .shops__item {
    height: 18.2666666667vw;
  }
}
#contMain .shops__item:not(:last-child) {
  padding-right: 20px;
}
@media screen and (max-width: 768px) {
  #contMain .shops__item:not(:last-child) {
    padding-right: 0;
    margin-bottom: 5.3333333333vw;
  }
}
#contMain .shops__link {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
}
#contMain .shops__link::after {
  margin-bottom: 10px;
  width: 14px;
  height: 14px;
}
@media screen and (max-width: 768px) {
  #contMain .shops__link::after {
    margin-bottom: 0;
    margin-left: 2.4vw;
    width: 3.0666666667vw;
    height: 3.0666666667vw;
  }
}
@media screen and (max-width: 768px) {
  #contMain .shops__bnr {
    display: block;
    height: 18.2666666667vw;
    width: auto;
  }
}

/* shops:end */