@charset "UTF-8";

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(100/var(--device-width) *var(--main-width));
  font-size: 10px;
}

:root {
  --main-width: 100vw;
  --device-width: 1280;
  margin-top: 0 !important;
}

body {
  font-family: "Zen Maru Gothic", sans-serif;
  color: #000;
}

a {
  text-decoration: none;
  transition: opacity 0.4s;
}

a:hover {
  opacity: 0.6;
  transition: 0.4s;
}

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

.pcbr {
  display: block;
}

.spbr {
  display: none;
}

main {
  /* max-width: 1280px; */
  margin: auto;
  overflow: hidden;
}

/* animation */
@keyframes bounceIn {
  0% {
    transform: scale(0) translateY(-50px);
    opacity: 0;
  }

  50% {
    transform: scale(1.08) translateY(0);
    opacity: 1;
  }

  70% {
    transform: scale(0.9) translateY(-10px);
  }

  85% {
    transform: scale(1.03) translateY(0);
  }

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

/* --- ふわふわ揺れるアニメーション --- */
@keyframes fuwafuwaAnime01 {
  0% {
    transform: translate(0, 0) rotate(-7deg);
  }

  50% {
    transform: translate(0, -7px) rotate(0deg);
  }

  100% {
    transform: translate(0, 0) rotate(7deg);
  }
}

@keyframes fuwafuwaAnime02 {
  0% {
    transform: translate(0, 0) rotate(10deg);
  }

  50% {
    transform: translate(0, 10px) rotate(0deg);
  }

  100% {
    transform: translate(0, 0) rotate(-10deg);
  }
}

@keyframes fuwafuwaAnime03 {
  0% {
    transform: translate(0, 0) rotate(-15deg);
  }

  50% {
    transform: translate(0, -3px) rotate(0deg);
  }

  100% {
    transform: translate(0, 0) rotate(15deg);
  }
}

@keyframes UpAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-100px);
  }
}

@keyframes slideIn01 {
  0% {
    opacity: 1;
    transform: translateX(-180px);
  }

  50% {
    transform: translateX(0);
  }

  65% {
    transform: translateX(-30px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slideIn02 {
  0% {
    opacity: 1;
    transform: translateX(180px);
  }

  50% {
    transform: translateX(0);
  }

  65% {
    transform: translateX(30px);
  }

  100% {
    transform: translateX(0);
  }

}

@media screen and (max-width: 1280px) {
  :root {
    --main-width: 100vw;
    --device-width: 1280;
    margin-top: 0 !important;
  }

  .pcbr {
    display: block;
  }

  .spbr {
    display: none;
  }

}

@media screen and (max-width: 750px) {
  :root {
    --main-width: 100vw;
    --device-width: 750;
    margin-top: 0 !important;
  }

  .pcbr {
    display: none;
  }

  .spbr {
    display: block;
  }
}

.header {
  position: relative;
  background-color: rgba(255, 255, 255, 0.8);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: bold;
  font-size: calc(16/var(--device-width) *var(--main-width));
  z-index: 1000;

}

.header .header_inner {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  margin: auto;
}

.header .logo {
  width: 20%;
  height: 0%;
  padding: calc(16/var(--device-width) *var(--main-width)) 0;
}

.header-nav {
  display: flex;
  justify-content: center;
  align-items: center;

}

.header-list {
  display: flex;
  justify-content: center;
  position: relative;
}


.header-item {
  position: relative;
  transition: background-color .3s;
  padding: calc(16/var(--device-width) *var(--main-width)) 0;
}

/* .header-item.hover .megaMenu {
  opacity: 1;
  display: block;
} */

.header-item a,
.header-item span {
  color: #000;
  display: block;
  margin: calc(10/var(--device-width) *var(--main-width));
}

.header-item:hover a,
.header-item:hover span {
  color: rgb(29, 32, 136);
  cursor: pointer;
}

.megaMenu {
  background-color: rgb(248, 248, 248);
  text-align: center;
  width: calc(215/var(--device-width) *var(--main-width));
}

.megaMenu01 {
  width: calc(215/var(--device-width) *var(--main-width));
}

.megaMenu02 {
  width: calc(300/var(--device-width) *var(--main-width));
}

.megaMenu01,
.megaMenu02 {
  display: none;
  position: absolute;
}

.header-item01 .megaMenu01 {
  top: 100%;
  left: -20%;
}

.header-item02 .megaMenu02 {
  top: 100%;
  left: -20%;
}

.header-nav .megaMenu-list {
  padding-bottom: calc(10/var(--device-width) *var(--main-width));
  padding-top: calc(0/var(--device-width) *var(--main-width));
}

.megaMenu-item {
  position: relative;
  font-size: calc(13/var(--device-width) *var(--main-width));
  font-weight: 400;
  text-align: left;
  padding: calc(10/var(--device-width) *var(--main-width)) 0 0;
}

.megaMenu-item:not(:last-of-type)::after {
  position: absolute;
  bottom: -50%;
  left: 0;
  right: 0;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #cdcdcd;
  margin: auto;
}


@media screen and (max-width:1280px) {}

@media screen and (max-width:750px) {
  .header {
    padding: 4.5% 0 3.5% 5.6%;

  }

  .header .header_inner {
    justify-content: flex-start;
  }

  .header .logo {
    width: calc(303/var(--device-width) *var(--main-width));
    height: 0%;
  }

  .header-nav {
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: calc(-42/var(--device-width) *var(--main-width));
    top: calc(100/var(--device-width) *var(--main-width));
    background-color: #f6f6f6;
    width: 100vw;
    height: auto;
  }

  .header-nav ul {
    display: flex;
    flex-direction: column;
    gap: calc(20/var(--device-width) *var(--main-width));
    padding-top: calc(20/var(--device-width) *var(--main-width));
    padding-bottom: calc(20/var(--device-width) *var(--main-width));

  }

  .header-nav ul li {
    position: relative;
    padding-left: calc(20/var(--device-width) *var(--main-width));
  }

  .header-nav ul li:not(:last-of-type)::after {
    position: absolute;
    bottom: calc(-11/var(--device-width) *var(--main-width));
    ;
    left: 0;
    right: 0;
    content: "";
    width: 100%;
    height: 1px;
    background-color: #cdcdcd;
    margin: auto;
  }

  .header-nav ul li a,
  .header-nav ul li span {
    display: block;
    font-size: calc(26/var(--device-width) *var(--main-width));
    font-weight: 400;
  }

  .header-nav ul li span {
    position: relative;
  }

  .header-nav ul li span::after {
    content: "";
    position: absolute;
    top: 0;
    right: 5%;
    border-left: #000 solid 1px;
    border-bottom: #000 solid 1px;
    transform: rotate(-45deg);
    width: calc(15 / var(--device-width) * var(--main-width));
    height: calc(15 / var(--device-width) * var(--main-width));
  }

  .megaMenu01,
  .megaMenu02 {
    display: none;
    position: relative;
    width: 100%;
  }

  .header-item01 .megaMenu01 {
    top: initial;
    left: initial;
  }

  .header-item02 .megaMenu02 {
    top: initial;
    left: initial;
  }

  .header-nav .megaMenu-list {
    padding-bottom: calc(0 / var(--device-width) * var(--main-width));
    padding-top: calc(0 / var(--device-width) * var(--main-width));
  }

  .header-nav ul li.megaMenu-item {
    padding: 0 0 0 2em;
    text-align: left;
  }

}

/*============
.toggle_btn
=============*/
.toggle_btn {
  display: none;
}

@media screen and (max-width:1280px) {}

@media screen and (max-width:750px) {

  .toggle_btn {
    display: block;
    position: absolute;
    top: calc(-10 / var(--device-width) * var(--main-width));
    right: 6vw;
    width: 9.7vw;
    height: 9.5vw;
    transition: all .5s;
    cursor: pointer;
    z-index: 3;
  }

  .toggle_btn span {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    width: 56%;
    margin: auto;
    height: 2px;
    background-color: #000;
    border-radius: 4px;
    transition: all .5s;
  }

  .toggle_btn span:nth-child(1) {
    top: 33%;
  }

  .toggle_btn span:nth-child(2) {
    top: 47%;
  }

  .toggle_btn span:nth-child(3) {
    bottom: 35%;
  }

  .toggle_btn.open span:nth-child(1) {
    -webkit-transform: translateY(1.3vw) rotate(-315deg);
    transform: translateY(1.3vw) rotate(-45deg);
  }

  .toggle_btn.open span:nth-child(2) {
    opacity: 0;
  }

  .toggle_btn.open span:nth-child(3) {
    -webkit-transform: translateY(-1.3vw) rotate(315deg);
    transform: translateY(-1.3vw) rotate(45deg);
  }

}


/* ＝＝＝＝＝＝＝＝＝＝ */
/*　　　 fv 　　　*/
/* ＝＝＝＝＝＝＝＝＝＝ */
/* --- 飛び出すように現れるアニメーション --- */


.fuwa-fuwa01.is-show {
  animation: fuwafuwaAnime01 10s ease-in-out infinite alternate;
}

.fuwa-fuwa02.is-show {
  animation: fuwafuwaAnime02 10s ease-in-out infinite alternate;

}

.fuwa-fuwa03.is-show {
  animation: fuwafuwaAnime03 10s ease-in-out infinite alternate;

}

#fv {
  position: relative;
  background-image: url(../images/bg_fv.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 200;
  padding-top: 34%;
}

#fv h1 {
  position: absolute;
  top: 1%;
  left: 21%;
  width: calc(674/var(--device-width) *var(--main-width));
  animation-duration: 2s;
  z-index: 10;
}

.fade-in {
  position: absolute;
  width: 10%;
  animation-name: bounceIn;
  animation-timing-function: ease-in-out;
}

.fade-in01 {
  top: 4%;
  left: 9%;
  animation-duration: 0.5s;
  width: calc(193/var(--device-width) *var(--main-width));
}

.fade-in02 {
  top: 33%;
  left: -1%;
  animation-duration: 1s;
  width: calc(205/var(--device-width) *var(--main-width));
}

.fade-in03 {
  top: 56%;
  left: 15%;
  animation-duration: 0.7s;
  width: calc(186/var(--device-width) *var(--main-width));
  z-index: 10;
}

.fade-in04 {
  top: 0.2%;
  right: 11%;
  animation-duration: 1.2s;
  width: calc(205/var(--device-width) *var(--main-width));
  z-index: 10;
}

.fade-in05 {
  top: -10%;
  right: -0.6%;
  animation-duration: 0.9s;
  width: calc(194/var(--device-width) *var(--main-width));
}

.fade-in06 {
  top: 34%;
  right: -0.9%;
  animation-duration: 1.4s;
  width: calc(201/var(--device-width) *var(--main-width));
}

.fade-in07 {
  top: 54.7%;
  right: 17.7%;
  width: calc(175/var(--device-width) *var(--main-width));
  z-index: 20;
}

h2.fade-in-2.is-show {
  opacity: 1;
  animation-name: bounceIn;
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
}



@media screen and (max-width:1280px) {}

@media screen and (max-width:750px) {
  #fv {
    position: relative;
    background-image: url(../images/bg_fv_sp.png);
    background-position: top calc(-105/var(--device-width) *var(--main-width)) center;
    padding-top: 124%;
  }

  .fade-in {
    position: absolute;
    width: 10%;
    opacity: 1;
  }

  .fade-in01 {
    top: initial;
    bottom: 21.7%;
    left: initial;
    right: -6.9%;
    width: calc(256 / var(--device-width) * var(--main-width));
    z-index: 20;
  }

  .fade-in02 {
    top: initial;
    bottom: 4%;
    left: 32%;
    width: calc(245 / var(--device-width) * var(--main-width));
  }

  .fade-in03 {
    top: initial;
    bottom: 11%;
    left: -3%;
    width: calc(231 / var(--device-width) * var(--main-width));
  }

  .fade-in04 {
    top: -1%;
    right: 66%;
    width: calc(270/var(--device-width) *var(--main-width));
    z-index: 0;
  }

  .fade-in05 {
    top: 3.5%;
    right: -4%;
    width: calc(237/var(--device-width) *var(--main-width));
  }

  .fade-in06 {
    top: -1%;
    right: -4%;
    width: calc(298 / var(--device-width) * var(--main-width));
  }

  .fade-in07 {
    top: 78.8%;
    right: 4.7%;
    width: calc(220/var(--device-width) *var(--main-width));
  }

  #fv h1 {
    position: absolute;
    top: 19%;
    left: calc(8/var(--device-width) *var(--main-width));
    width: calc(698/var(--device-width) *var(--main-width));
    z-index: 10;
  }

}



/* ＝＝＝＝＝＝＝＝＝＝ */
/*　　　 news 　　　*/
/* ＝＝＝＝＝＝＝＝＝＝ */
#news {
  position: relative;
  background-image: url(../images/bg_news.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
  margin-top: -14%;
  padding-top: 19.3%;
  padding-bottom: 11%;
  z-index: 100;
}

#news h2 {
  width: 11.6%;
  margin: 0 auto 2%;
}

#news .news_inner {
  margin: auto;
  width: 46.4%;
}


@media screen and (max-width:1280px) {}

@media screen and (max-width:750px) {
  #news {
    background-image: url(../images/bg_news_sp.png);
    margin-top: -14%;
    padding-top: 24%;
    padding-bottom: 17%;
  }

  #news h2 {
    width: 31.6%;
    margin: 0 auto 7%;
  }

  #news .news_inner {
    width: 78%;
  }
}


/* ＝＝＝＝＝＝＝＝＝＝ */
/*　　　 inner_nav 　　　*/
/* ＝＝＝＝＝＝＝＝＝＝ */
#inner_nav {
  position: relative;
  background-image: url(../images/bg_inner_nav.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 103%;
  color: #e50012;
  font-size: calc(16/var(--device-width) *var(--main-width));
  font-weight: 500;
  margin-top: -13.7%;
  padding-top: 5.6%;
  padding-bottom: 6%;
  z-index: 200;
}

#inner_nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: calc(20/var(--device-width) *var(--main-width));
  justify-content: space-between;
  width: calc(760/var(--device-width) *var(--main-width));
  margin: auto;
}

#inner_nav ul li {
  position: relative;
  width: calc(240/var(--device-width) *var(--main-width));
  text-align: center;
  background: #fff;
  padding: 1% 0;
  border: solid 2px #e50012;
  border-radius: calc(100/var(--device-width) *var(--main-width));
}

#inner_nav ul li::after {
  position: absolute;
  top: 20%;
  right: 4%;
  content: "";
  display: block;
  background-image: url("../images/btn_icon01.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(18/var(--device-width) *var(--main-width));
  height: calc(18/var(--device-width) *var(--main-width));
}

#inner_nav ul li:hover {
  transform: rotate(3deg);
}

#inner_nav ul li a {
  display: block;
}

@media screen and (max-width:1280px) {}

@media screen and (max-width:750px) {
  #inner_nav {
    background-image: url(../images/bg_inner_nav_sp.png);
    font-size: calc(28 / var(--device-width) * var(--main-width));
    margin-top: -20%;
    padding-top: 7.6%;
    padding-bottom: 9.5%;
  }

  #inner_nav ul {
    gap: 2.8vw 0;
    width: 86%;
  }

  #inner_nav ul li {
    display: grid;
    place-content: center;
    width: calc(314 / var(--device-width) * var(--main-width));
    height: calc(87 / var(--device-width) * var(--main-width));
    text-align: center;
    padding: 1% 0;
    border-radius: calc(100 / var(--device-width) * var(--main-width));
  }

  #inner_nav ul li::after {
    top: 28%;
    right: 4%;
    width: calc(34 / var(--device-width) * var(--main-width));
    height: calc(34 / var(--device-width) * var(--main-width));
  }
}

/* ＝＝＝＝＝＝＝＝＝＝ */
/*　　　 whats 　　　*/
/* ＝＝＝＝＝＝＝＝＝＝ */
#whats {
  position: relative;
  background-color: #fffccc;
  z-index: 100;
  margin-top: -2%;
  padding-top: 10.5%;
}

#whats h2 {
  opacity: 0;
  width: calc(692/var(--device-width) *var(--main-width));
  margin: 0 auto 3.2%
}

#whats h2.fade-in-2.is-show {
  opacity: 1;
  animation-name: bounceIn;
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
}

#whats h3 {
  color: #e50012;
  font-size: calc(26/var(--device-width) *var(--main-width));
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.03em;
  margin: 0 auto 1.1%;
}

#whats p {
  font-size: calc(20/var(--device-width) *var(--main-width));
  font-weight: 400;
  text-align: center;
  line-height: 1.75;
  padding-bottom: 9%;

}

.movie {
  position: relative;
  background-color: #fffccc;
}

.movie .sausages {
  opacity: 0;
  position: absolute;
  bottom: -44%;
  left: -3%;
  width: calc(315/var(--device-width) *var(--main-width));
  height: calc(342/var(--device-width) *var(--main-width));
  z-index: 910;
}

.movie .sausages.is-show {
  opacity: 1;
  animation: slideIn01 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}

.youtube {
  position: relative;
  width: 59%;
  aspect-ratio: 16 / 9;
  margin: 0 auto 10%;
  z-index: 900;
}

.youtube iframe {
  width: 100%;
  height: 100%;
}

.youtube::before {
  position: absolute;
  top: -27%;
  left: -6%;
  content: "";
  background-image: url(../images/bg_youtube.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(951/var(--device-width) *var(--main-width));
  height: calc(644/var(--device-width) *var(--main-width));
  z-index: -1;
}

@media screen and (max-width:1280px) {}

@media screen and (max-width:750px) {
  #whats h2 {
    width: calc(675 / var(--device-width) * var(--main-width));
    margin: 0 auto 7% 7%;
  }

  #whats h3 {
    font-size: calc(46 / var(--device-width) * var(--main-width));
    margin: 0 auto 7%;
  }

  #whats p {
    font-size: calc(28 / var(--device-width) * var(--main-width));
    padding-bottom: 13%;
  }

  .youtube {
    width: 77%;
    margin: 0 auto 10%;
  }

  .youtube::before {
    top: -12%;
    left: -5%;
    background-image: url(../images/bg_youtube_sp.png);
    width: calc(640 / var(--device-width) * var(--main-width));
    height: calc(443 / var(--device-width) * var(--main-width));
  }

  .movie .sausages {
    bottom: -100%;
    left: -9%;
  }
}

/* ＝＝＝＝＝＝＝＝＝＝ */
/*　　　 history 　　　*/
/* ＝＝＝＝＝＝＝＝＝＝ */
#history {
  position: relative;
  background-image: url(../images/bg_history.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 200;
  margin-top: -17%;
  padding-top: 25%;
}

#history h2 {
  opacity: 0;
  width: calc(765/var(--device-width) *var(--main-width));
  margin: 0 auto 2.3% 17.3%;
}

#history h2.fade-in-2.is-show {
  opacity: 1;
  animation-name: bounceIn;
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
}

#history p {
  font-size: calc(20/var(--device-width) *var(--main-width));
  font-weight: 400;
  text-align: center;
  line-height: 1.75;
}

.swiper {
  position: relative;
}

.swiper::before {
  display: block;
  content: "";
  position: absolute;
  bottom: 16%;
  left: 0;
  right: 0;
  background-image: url(../images/slide_cutlery.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(634/var(--device-width) *var(--main-width));
  height: calc(234/var(--device-width) *var(--main-width));
  margin: auto;
  z-index: 900;
}

.swiper-wrapper {
  align-items: center;
}


.swiper-slide {
  background-image: url(../images/bg_slider.png);
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: center;
  padding: 27% 0;
}

.swiper-slide.swiper-slide-active {
  position: relative;
  padding: 19% 0;
  transform: scale(1.5);
  transition: transform 0.5s;
}

.swiper-slide.swiper-slide-active::after {
  content: "";
  position: absolute;
  top: 20%;
  right: 10%;
  background-image: url(../images/shine.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(78 / var(--device-width) * var(--main-width));
  height: calc(69 / var(--device-width) * var(--main-width));
}

.swiper_inner {
  position: relative;
}

.swiper .item01 .img {
  display: block;
  position: absolute;
  top: -135%;
  left: 0;
  right: 0;
  width: calc(165/var(--device-width) *var(--main-width));
  margin: auto;
}

.swiper .item02 .img {
  display: block;
  position: absolute;
  top: -152%;
  left: 1%;
  right: 0;
  width: calc(210 / var(--device-width) * var(--main-width));
  margin: auto;
}

.swiper .item03 .img {
display: block;
    position: absolute;
    top: -135%;
    left: 0;
    right: 0;
    width: calc(165 / var(--device-width) * var(--main-width));
    margin: auto;
}

.swiper .item04 .img {
  display: block;
  position: absolute;
  top: -128%;
  left: 0;
  right: 0;
  width: calc(230 / var(--device-width) * var(--main-width));
  margin: auto;
}

.swiper .swiper_text {
  position: relative;
}

.swiper .item01 h3 {
  width: calc(232/var(--device-width) *var(--main-width));
  margin: 16% auto 1%;
}

.swiper .item02 h3 {
  width: calc(232/var(--device-width) *var(--main-width));
  margin: 16% auto 1%;
}

.swiper .item03 h3 {
  width: calc(232/var(--device-width) *var(--main-width));
  margin: 16% auto 1%;
}

.swiper .item04 h3 {
  width: calc(232/var(--device-width) *var(--main-width));
  margin: 16% auto 1%;
}

#history .swiper_text p {
  font-size: calc(12/var(--device-width) *var(--main-width));
}

.swiper-button-next, .swiper-button-prev {
  color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  width: calc(77/var(--device-width) *var(--main-width));
  height: calc(78/var(--device-width) *var(--main-width));
}

.swiper-button-next {
  right: 21.4%;
  background-image: url(../images/arrow_right.png);
}

.swiper-button-prev {
  left: 21.6%;
  background-image: url(../images/arrow_left.png);
}

@media screen and (max-width:1280px) {}

@media screen and (max-width:750px) {
  #history {
    background-image: url(../images/bg_history_sp.png);
    margin-top: -23%;
    padding-top: 44%;
  }

  #history h2 {
    width: calc(672 / var(--device-width) * var(--main-width));
    margin: 0 auto 6% 6.6%;
  }

  #history p {
    font-size: calc(28 / var(--device-width) * var(--main-width));
  }

  .swiper {
    padding: 13% 0 0;
  }

  .swiper::before {
    bottom: 10%;
    background-image: url(../images/slide_cutlery_sp.png);
    width: calc(674 / var(--device-width) * var(--main-width));
    height: calc(234 / var(--device-width) * var(--main-width));
  }

  .swiper-slide {
    background-size: 49%;
    background-position: top 1vw center;
  }

  .swiper-slide.swiper-slide-active {
    padding: 0 0 1%
  }

  .swiper-slide.swiper-slide-active::after {
    top: -10%;
    right: 26%;
  }

  #history .swiper_text p {
    padding-bottom: 15%;
    font-size: calc(16 / var(--device-width) * var(--main-width));
    line-height: 1.35;
  }

  .swiper .item01 .img {
    top: -80%;
  }

  .swiper .item02 .img {
    top: -89%;
    left: 0%;
  }

  .swiper .item03 .img {
    top: -74%;
  }

  .swiper .item04 .img {
    top: -72%;
    width: calc(230 / var(--device-width) * var(--main-width));
  }

  .swiper .swiper-slide h3 {
    margin: 16% auto 1%;
  }

  .swiper .item01 h3 {
    width: min(calc(234 / var(--device-width) * var(--main-width)), 234px);
  }

  .swiper .item02 h3 {
    width: min(calc(234 / var(--device-width) * var(--main-width)), 234px);
  }

  .swiper .item03 h3 {
    width: min(calc(234 / var(--device-width) * var(--main-width)), 234px);
  }

  .swiper .item04 h3 {
    width: min(calc(234 / var(--device-width) * var(--main-width)), 234px);
  }

  .swiper-button-next, .swiper-button-prev {
    top: 51.5%;
    width: calc(67 / var(--device-width) * var(--main-width));
    height: calc(68 / var(--device-width) * var(--main-width));
  }

  .swiper-button-prev {
    left: 2%;
  }

  .swiper-button-next {
    right: 2%;
  }


}

/* ＝＝＝＝＝＝＝＝＝＝ */
/*　　　character 　　*/
/* ＝＝＝＝＝＝＝＝＝＝ */
#character {
  position: relative;
  background-color: #f0e6d2;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 300;
  margin-top: 0%;
  padding-top: 7.5%;
  padding-bottom: 14.5%;
}

.character::before {
  display: block;
  content: "";
  position: absolute;
  top: calc(-20/var(--device-width) *var(--main-width));
  right: 0;
  background-image: url(../images/bg_character.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(1280/var(--device-width) *var(--main-width));
  height: calc(1380/var(--device-width) *var(--main-width));
  margin: auto;
  z-index: -1;
}

.character .sausages {
  opacity: 0;
  position: absolute;
  bottom: calc(-120/var(--device-width) *var(--main-width));
  right: calc(-205/var(--device-width) *var(--main-width));
  width: calc(547/var(--device-width) *var(--main-width));
  height: calc(502/var(--device-width) *var(--main-width));
  margin: auto;
  z-index: 10;
}

.character .sausages.is-show {
  opacity: 1;
  animation: slideIn02 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}

#character .top {
  position: relative;
  bottom: initial;
  right: initial;
  background-image: url(../images/bg_character_top.png);
  background-position: top calc(110/var(--device-width) *var(--main-width)) center;
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 10;
  width: 84%;
  margin: auto;
  padding-bottom: 5%;
}

#character .top::before {
  display: block;
  content: "";
  position: absolute;
  top: calc(130/var(--device-width) *var(--main-width));
  left: calc(-70/var(--device-width) *var(--main-width));
  background-image: url(../images/character_okinawa.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(222/var(--device-width) *var(--main-width));
  height: calc(272/var(--device-width) *var(--main-width));
  margin: auto;
  z-index: 10;
}

#character h2 {
  opacity: 0;
  width: calc(765/var(--device-width) *var(--main-width));
  margin: 0 auto 3.4% 17.9%;
}

#character h2.fade-in-2.is-show {
  opacity: 1;
  animation-name: bounceIn;
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
}

#character h3 {
  width: 85%;
  margin: 0 auto 2.3%;
}

#character p {
  font-size: calc(18/var(--device-width) *var(--main-width));
  font-weight: 400;
  line-height: 1.75;
  width: 85%;
  margin: auto;
}

#character .bottom {
  position: relative;
  background-color: #fffccc;
  width: 84%;
  margin: auto;
  padding-top: 4.6%;
  padding-bottom: 5%;
  border-bottom-left-radius: calc(20/var(--device-width) *var(--main-width));
  border-bottom-right-radius: calc(20/var(--device-width) *var(--main-width));
}

#character .bottom::before {
  display: block;
  content: "";
  position: absolute;
  bottom: -12%;
  left: 0;
  right: 0;
  background-image: url(../images/character_bottom.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(1052/var(--device-width) *var(--main-width));
  height: calc(115/var(--device-width) *var(--main-width));
  margin: auto;
  z-index: -1;
}

#character .bottom::after {
  display: block;
  content: "";
  position: absolute;
  bottom: calc(24/var(--device-width) *var(--main-width));
  right: calc(-45/var(--device-width) *var(--main-width));
  background-image: url(../images/character_flower.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(203/var(--device-width) *var(--main-width));
  height: calc(146/var(--device-width) *var(--main-width));
  margin: auto;
  z-index: 10;
}

#character .bottom .pokina {
  position: absolute;
  top: calc(-45/var(--device-width) *var(--main-width));
  left: calc(335/var(--device-width) *var(--main-width));
  width: calc(350/var(--device-width) *var(--main-width));
  height: calc(458/var(--device-width) *var(--main-width));
  z-index: 10;
}

#character dl {
  display: flex;
  flex-wrap: wrap;
  gap: 0 30%;
  justify-content: flex-end;
  margin: auto;
}

#character dl>div {
  width: 32%;
  margin-bottom: 1.6%;
}

#character dt {
  display: grid;
  place-content: center;
  background-color: #e50012;
  color: #fff;
  font-size: calc(20/var(--device-width) *var(--main-width));
  text-align: center;
  width: calc(173/var(--device-width) *var(--main-width));
  border-radius: calc(50/var(--device-width) *var(--main-width));
  padding: 1% 0;
  margin-bottom: 4%;
}

#character dt .shouzoku {
  font-size: calc(16/var(--device-width) *var(--main-width));
}

#character dd {
  font-size: calc(18/var(--device-width) *var(--main-width));
}


@media screen and (max-width:1280px) {}

@media screen and (max-width:750px) {
  #character {
    padding-top: 13.5%;
    padding-bottom: 28.5%;
  }

  .character::before {
    top: -3vw;
    right: 0;
    background-image: url(../images/bg_character_sp.png);
    width: calc(750 / var(--device-width) * var(--main-width));
    height: calc(3057 / var(--device-width) * var(--main-width));
  }

  .character::after {
    bottom: -8%;
    right: -19%;
    background-image: url(../images/character_sausage.png);
    background-repeat: no-repeat;
    background-size: contain;
  }

  #character .top {
    background-image: url(../images/bg_character_top_sp.png);
    background-position: top calc(180 / var(--device-width) * var(--main-width)) center;
    width: 92%;
    padding-bottom: 16%;
  }

  #character .top::before {
    top: 91%;
    left: 5%;
    background-image: url(../images/character_okinawa.png);
    width: calc(160 / var(--device-width) * var(--main-width));
    height: calc(196 / var(--device-width) * var(--main-width));
  }

  #character h2 {
    width: calc(667 / var(--device-width) * var(--main-width));
    margin: 0 auto 8.9% 3%;
  }

  #character h3 {
    width: 87%;
    margin: 0 auto 4.5%;
  }

  #character p {
    font-size: calc(28 / var(--device-width) * var(--main-width));
    width: 83%;
    line-height: 1.79;
    text-align: center;
    margin: auto;
  }

  #character .bottom {
    background-color: #fffccc;
    width: 92%;
    margin: auto;
    padding-top: 62.6%;
    padding-bottom: 8%;
    border-bottom-left-radius: calc(20 / var(--device-width) * var(--main-width));
    border-bottom-right-radius: calc(20 / var(--device-width) * var(--main-width));
  }

  #character .bottom::before {
    bottom: -4.5%;
    background-image: url(../images/character_bottom_sp.png);
    width: calc(650 / var(--device-width) * var(--main-width));
    height: calc(115 / var(--device-width) * var(--main-width));
  }

  #character .bottom::after {
    bottom: 68.6%;
    right: -2%;
    background-image: url(../images/character_flower.png);
    width: calc(214 / var(--device-width) * var(--main-width));
    height: calc(154 / var(--device-width) * var(--main-width));
  }

  #character .bottom .pokina {
    top: -4.8%;
    left: 20%;
    width: calc(356 / var(--device-width) * var(--main-width));
    height: auto;
  }

  #character dl {
    display: flex;
    flex-direction: column;
    flex-wrap: initial;
    gap: 8vw 0;
    justify-content: center;
    margin: auto;
  }

  #character dl>div {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    margin-bottom: 0;
  }

  #character dl>div:not(:last-of-type)::after {
    display: block;
    position: absolute;
    bottom: -25%;
    left: 0;
    right: 0;
    margin: auto;
    content: "";
    background-image: url(../images/line_sp.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: calc(604 / var(--device-width) * var(--main-width));
    height: 4px;
  }

  #character dl>div.item01 {
    order: 1;
  }

  #character dl>div.item02 {
    order: 4;
  }

  #character dl>div.item03 {
    order: 2;
  }

  #character dl>div.item04 {
    order: 5;
  }

  #character dl>div.item05 {
    order: 3;
  }

  #character dl>div.item06 {
    order: 6;
  }

  #character dt {
    display: grid;
    place-content: center;
    font-size: calc(28 / var(--device-width) * var(--main-width));
    text-align: center;
    width: calc(260/ var(--device-width) * var(--main-width));
    height: calc(50 / var(--device-width) * var(--main-width));
    border-radius: calc(50 / var(--device-width) * var(--main-width));
    padding: 1.2% 0;
    margin-bottom: 3.2%;
  }

  #character dt .shouzoku {
    font-size: calc(22 / var(--device-width) * var(--main-width));
  }

  #character dd {
    font-size: calc(28 / var(--device-width) * var(--main-width));

  }

  .character .sausages {
    opacity: 0;
    position: absolute;
    bottom: calc(-220 / var(--device-width) * var(--main-width));
    right: calc(-135 / var(--device-width) * var(--main-width));
    width: calc(547 / var(--device-width) * var(--main-width));
    height: calc(502 / var(--device-width) * var(--main-width));
    margin: auto;
    z-index: 10;
  }
}

/* ＝＝＝＝＝＝＝＝＝＝ */
/*　　　　lineup　 　　*/
/* ＝＝＝＝＝＝＝＝＝＝ */
#lineup {
  position: relative;
  background-image: url(../images/bg_lineup.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 200;
  padding-top: 9.5%;
  padding-bottom: 40%;
}

#lineup h2 {
  opacity: 0;
  width: calc(812/var(--device-width) *var(--main-width));
  margin: 0 auto 4.4% 17.9%;
}

#lineup h2.fade-in-2.is-show {
  opacity: 1;
  animation-name: bounceIn;
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
}


#lineup dl {
  display: flex;
  flex-direction: column;
  gap: calc(40/var(--device-width) *var(--main-width));
  width: calc(1080/var(--device-width) *var(--main-width));
  margin: auto;
}

#lineup dt {
  position: relative;
  background-color: #fff000;
  border-radius: calc(20/var(--device-width) *var(--main-width));
  padding: 3.8% 0;
}

#lineup dt .open {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 2.4%;
  display: grid;
  place-content: center;
  background-color: #fff;
  border: solid calc(2/var(--device-width) *var(--main-width)) #009844;
  border-radius: calc(50/var(--device-width) *var(--main-width));
  width: calc(60/var(--device-width) *var(--main-width));
  height: calc(60/var(--device-width) *var(--main-width));
  margin: auto;
}

#lineup dt .open span {
  position: relative;
  width: calc(35/var(--device-width) *var(--main-width));
  height: calc(4/var(--device-width) *var(--main-width));
  border-radius: calc(10/var(--device-width) *var(--main-width));
  background-color: #009844;
}

#lineup dt .open span::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: calc(35/var(--device-width) *var(--main-width));
  height: calc(4/var(--device-width) *var(--main-width));
  background-color: #009844;
  border-radius: calc(10/var(--device-width) *var(--main-width));
  transform: rotate(90deg);
  transition: transform 0.5s;

}

#lineup dt.active .open span::after {
  transform: rotate(0deg);
  transition: transform 0.5s;
}

#lineup dt.active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;

}

#lineup .acc01 h3 {
  width: calc(402/var(--device-width) *var(--main-width));
  margin: auto;
}

#lineup .acc02 h3 {
  width: calc(155/var(--device-width) *var(--main-width));
  margin: auto;
}

#lineup .acc03 h3 {
  width: calc(165/var(--device-width) *var(--main-width));
  margin: auto;
}

#lineup .acc04 h3 {
  width: calc(260/var(--device-width) *var(--main-width));
  margin: auto;
}

#lineup dd {
  background-color: #fff;
  font-weight: 400;
  line-height: 1.75;
  margin: auto;
  border-left: solid #fff000 calc(6/var(--device-width) *var(--main-width));
  border-right: solid #fff000 calc(6/var(--device-width) *var(--main-width));
  border-bottom: solid #fff000 calc(6/var(--device-width) *var(--main-width));
  border-bottom-left-radius: calc(20/var(--device-width) *var(--main-width));
  border-bottom-right-radius: calc(20/var(--device-width) *var(--main-width));
  padding-bottom: 6%;
  display: none;
}

#lineup dd p {
  font-size: calc(20/var(--device-width) *var(--main-width));
  text-align: center;
  margin-bottom: 6%;
  padding-top: 3%;
}

#lineup .acc01 .flex {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 3vw;
}

#lineup .acc01 .flex a,
#lineup .acc02 a,
#lineup .acc03 a,
#lineup .acc04 a {
  position: relative;
  display: block;
  z-index: 10;
}

#lineup .acc01 .img01 {
  position: relative;
  display: block;
  width: calc(269/var(--device-width) *var(--main-width));
  margin: 0 auto 4%;
  z-index: 10;
}

#lineup .acc01 .img02 {
  position: relative;
  display: block;
  width: calc(310/var(--device-width) *var(--main-width));
  margin: 0 auto 4%;
  z-index: 10;
}

#lineup .acc02 .img {
  position: relative;
  display: block;
  width: calc(298/var(--device-width) *var(--main-width));
  margin: 0 auto 1% 34%;
  z-index: 10;
}

#lineup .acc03 .img {
  position: relative;
  display: block;
  width: calc(318/var(--device-width) *var(--main-width));
  margin: 0 auto 0 33.6%;
  z-index: 10;
}

#lineup .acc04 .img {
  position: relative;
  display: block;
  width: calc(377/var(--device-width) *var(--main-width));
  margin: 0 auto 1% 29.6%;
  z-index: 10;
}

#lineup dd .detail {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  background-color: #d6efe1;
  margin: auto;
  padding: 5% 7.5% 7.5%;

}

#lineup dd .detail::after {
  position: absolute;
  top: -36.5%;
  left: 0;
  right: 0;
  content: "";
  background-color: #ebf7f0;
  width: 100%;
  height: calc(153/var(--device-width) *var(--main-width));
  margin: auto;
}

#lineup dd .detail li {
  font-size: calc(18/var(--device-width) *var(--main-width));
}

#lineup dd .detail li:nth-of-type(3) {
  display: flex;
}

#lineup dd .detail li:nth-of-type(3) span {
  letter-spacing: 0.09em;
}

#lineup dd .detail li:nth-of-type(3) div {
  width: calc(770/var(--device-width) *var(--main-width));
}

#lineup dd .detail li span:not(.alle) {
  position: relative;
  color: #009844;
  font-size: calc(22/var(--device-width) *var(--main-width));
  font-weight: bold;
  padding-left: 1em;
}

#lineup dd .detail li span:not(.alle)::before {
  position: absolute;
  top: calc(8/var(--device-width) *var(--main-width));
  left: calc(3/var(--device-width) *var(--main-width));
  bottom: 0;
  content: "";
  width: calc(6/var(--device-width) *var(--main-width));
  height: calc(18/var(--device-width) *var(--main-width));
  background-color: #009844;
}

#lineup dd .detail li i.pcbr {
  display: inline;
  padding-left: 0;
  font-style: normal;
}

#lineup .allergie {
  display: flex;
  align-items: center;
  gap: calc(10/var(--device-width) *var(--main-width));
}

#lineup .allergie div {
  display: flex;
  align-items: center;
  gap: 0 calc(10/var(--device-width) *var(--main-width));
}

#lineup .detail li span.alle {
  display: inline-block;
  background-color: #009844;
  color: #fff;
  font-size: calc(18/var(--device-width) *var(--main-width));
  text-align: center;
  font-weight: 500;
  width: calc(82/var(--device-width) *var(--main-width));
  border-radius: calc(50/var(--device-width) *var(--main-width));
}

#lineup .barometer h3 {
  position: relative;
  width: calc(353/var(--device-width) *var(--main-width));
  z-index: 20;
  margin-top: -4.6%;
  margin-bottom: 5%;
}

#lineup .barometer h3::before {
  content: "";
  display: block;
  position: absolute;
  top: 18%;
  left: -4%;
  right: 0;
  background-color: #fff;
  width: calc(388/var(--device-width) *var(--main-width));
  height: calc(56/var(--device-width) *var(--main-width));
  border-top-left-radius: calc(30/var(--device-width) *var(--main-width));
  border-top-right-radius: calc(30/var(--device-width) *var(--main-width));
  margin: auto;
  z-index: -1;
}

#lineup .barometer ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(30/var(--device-width) *var(--main-width));
  width: calc(903/var(--device-width) *var(--main-width));
  margin: auto;
}

#lineup .barometer ul li {
  width: calc(416/var(--device-width) *var(--main-width));
}


@media screen and (max-width:750px) {
  #lineup {
    background-repeat: repeat;
    padding-top: 22.5%;
  }

  #lineup h2 {
    width: calc(683/var(--device-width) *var(--main-width));
    margin: 0 auto 8.4% 5%;
  }

  #lineup dl {
    gap: calc(40/var(--device-width) *var(--main-width));
    width: calc(650/var(--device-width) *var(--main-width));
    margin: auto;
  }

  #lineup .acc01 h3 {
    width: calc(284 / var(--device-width) * var(--main-width));
  }

  #lineup .acc02 h3 {
    width: calc(188 / var(--device-width) * var(--main-width));
  }

  #lineup .acc03 h3 {
    width: calc(199 / var(--device-width) * var(--main-width));
  }

  #lineup .acc04 h3 {
    width: calc(313 / var(--device-width) * var(--main-width));
  }

  #lineup dt .open {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 2.4%;
    display: grid;
    place-content: center;
    background-color: #fff;
    border: solid calc(2 / var(--device-width) * var(--main-width)) #009844;
    border-radius: calc(50 / var(--device-width) * var(--main-width));
    width: calc(80 / var(--device-width) * var(--main-width));
    height: calc(80 / var(--device-width) * var(--main-width));
    margin: auto;
  }

  #lineup dt .open span {
    width: calc(48 / var(--device-width) * var(--main-width));
    height: calc(6 / var(--device-width) * var(--main-width));
    border-radius: calc(10 / var(--device-width) * var(--main-width));
  }

  #lineup dt .open span::after {
    width: calc(48 / var(--device-width) * var(--main-width));
    height: calc(6 / var(--device-width) * var(--main-width));
    border-radius: calc(10 / var(--device-width) * var(--main-width));
  }

  #lineup dt {
    border-radius: calc(20 / var(--device-width) * var(--main-width));
    padding: 7% 0;
  }

  #lineup dd {
    padding-bottom: 9%;
  }

  #lineup .acc01 dt {
    padding: 4% 0;
  }

  #lineup dd p {
    font-size: calc(26 / var(--device-width) * var(--main-width));
    line-height: 1.9;
    margin-bottom: 6%;
    padding-top: 4%;
  }

  #lineup dd .detail {
    flex-direction: column;
    gap: 1em;
    line-height: 1.6;
    padding: 5% 7.5% 14.5%;
  }

  #lineup dd .detail::after {
    top: calc(-153 / var(--device-width) * var(--main-width));
    height: calc(153 / var(--device-width) * var(--main-width));
  }

  #lineup dd .detail li span:not(.alle) {
    display: block;
    font-size: calc(28 / var(--device-width) * var(--main-width));
    padding-left: 0.4em;
  }

  #lineup dd .detail li span:not(.alle)::before {
    top: calc(11 / var(--device-width) * var(--main-width));
    left: calc(-3 / var(--device-width) * var(--main-width));
    width: calc(6 / var(--device-width) * var(--main-width));
    height: calc(21 / var(--device-width) * var(--main-width));
  }

  #lineup dd .detail li i.pcbr {
    display: none;
  }

  #lineup dd .detail li {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    font-size: calc(28 / var(--device-width) * var(--main-width));
  }

  #lineup dd .detail li:nth-of-type(3) div {
    width: 100%;
  }

  #lineup .detail li span.alle {
    color: #fff;
    font-size: calc(28 / var(--device-width) * var(--main-width));
    text-align: center;
    font-weight: 500;
    width: calc(122 / var(--device-width) * var(--main-width));
    border-radius: calc(50 / var(--device-width) * var(--main-width));
  }


  #lineup .allergie div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2vw 4%;
  }

  #lineup .acc01 .img01 {
    width: calc(186 / var(--device-width) * var(--main-width));
  }

  #lineup .acc01 .img02 {
    width: calc(216 / var(--device-width) * var(--main-width));
  }

  #lineup .acc02 .img {
    width: calc(218 / var(--device-width) * var(--main-width));
    margin: 0 auto 3%;
  }

  #lineup .acc03 .img {
    width: calc(276 / var(--device-width) * var(--main-width));
    margin: 0 auto 3%;
  }

  #lineup .acc04 .img {
    width: calc(358 / var(--device-width) * var(--main-width));
    margin: 0 auto 3%;
  }

  #lineup .barometer ul {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(30 / var(--device-width) * var(--main-width));
    width: 100%;
  }

  #lineup .barometer h3 {
    width: calc(428 / var(--device-width) * var(--main-width));
    margin-top: -9.6%;
    margin-bottom: 5%;
  }

  #lineup .barometer h3::before {
    top: 22%;
    left: -4%;
    width: calc(428 / var(--device-width) * var(--main-width));
    height: calc(56 / var(--device-width) * var(--main-width));
    border-top-left-radius: calc(20 / var(--device-width) * var(--main-width));
    border-top-right-radius: calc(20 / var(--device-width) * var(--main-width));
  }

  #lineup .barometer ul li {
    width: 78%;
  }
}

/* ＝＝＝＝＝＝＝＝＝＝ */
/*       recipe  　　*/
/* ＝＝＝＝＝＝＝＝＝＝ */
#recipe {
  position: relative;
  background-image: url(../images/bg_recipe.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 300;
  margin-top: -24%;
  padding-top: 13.8%;
  padding-bottom: 23%;
}

#recipe h2 {
  opacity: 0;
  position: relative;
  width: calc(765/var(--device-width) *var(--main-width));
  margin: 0px auto 3.5% 22.5%;
  z-index: 10;
}

#recipe h2.fade-in-2.is-show {
  opacity: 1;
  animation-name: bounceIn;
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
}


#recipe .fork {
  opacity: 0;
  position: absolute;
  bottom: 72%;
  left: -10%;
  width: calc(481 / var(--device-width) * var(--main-width));
  height: calc(572 / var(--device-width) * var(--main-width));
  margin: auto;
  z-index: -1;
}

#recipe .fork.is-show {
  opacity: 1;
  animation: slideIn01 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}


#recipe .recipe_inner {
  display: block;
  width: 81%;
  margin: auto;
}

#recipe .btn_recipe {
  display: block;
  width: calc(300 / var(--device-width) * var(--main-width));
  margin: 4% auto 0;
}

@media screen and (max-width:750px) {
  #recipe {
    background-image: url(../images/bg_recipe_sp.png);
    background-position: top center;
    background-repeat: no-repeat;
    margin-top: -24%;
    padding-top: 16.8%;
    padding-bottom: 35%;
  }

  #recipe h2 {
    position: relative;
    width: calc(668 / var(--device-width) * var(--main-width));
    margin: 0 auto 8.5% 7%;
    z-index: 10;
  }

  #recipe .fork {
    bottom: 83%;
    left: -10%;
    width: calc(370 / var(--device-width) * var(--main-width));
    height: calc(440 / var(--device-width) * var(--main-width));
  }

  #recipe .recipe_inner {
    width: 83%;
  }

  #recipe .btn_recipe {
    width: calc(350 / var(--device-width) * var(--main-width));
    margin: 8% auto 0;
  }
}

/* ＝＝＝＝＝＝＝＝＝＝ */
/*     activity　  　*/
/* ＝＝＝＝＝＝＝＝＝＝ */
#activity {
  position: relative;
  background-image: url(../images/bg_activity.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 200;
  margin-top: -21%;
  padding-top: 18.5%;
  padding-bottom: 12%;

}

#activity::before {
  display: block;
  content: "";
  position: absolute;
  bottom: 21.4%;
  left: 2%;
  background-image: url(../images/activity_pokina.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(260/var(--device-width) *var(--main-width));
  height: calc(410/var(--device-width) *var(--main-width));
  margin: auto;
  z-index: 10;
}

#activity h2 {
  opacity: 0;
  width: calc(765/var(--device-width) *var(--main-width));
  margin: 0 auto 4.2% 17%;
}

#activity h2.fade-in-2.is-show {
  opacity: 1;
  animation-name: bounceIn;
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
}


#activity .activity_inner {
  position: relative;
  background-image: url(../images/activity_inner.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 81%;
  margin: auto;
  padding-top: 3.5%;
  padding-bottom: 3%;

}

#activity .activity_inner::before {
  opacity: 0;
  display: block;
  content: "";
  position: absolute;
  top: 16%;
  left: -5.6%;
  background-image: url(../images/activity_fork.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(204/var(--device-width) *var(--main-width));
  height: calc(188/var(--device-width) *var(--main-width));
  margin: auto;
  z-index: 10;
}

#activity .activity_inner::after {
  opacity: 0;
  display: block;
  content: "";
  position: absolute;
  top: 13.3%;
  right: -7%;
  background-image: url(../images/activity_loupe.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(252/var(--device-width) *var(--main-width));
  height: calc(220/var(--device-width) *var(--main-width));
  margin: auto;
  z-index: 10;
}

#activity .activity_inner.is-show::before {
  opacity: 1;
  animation: bounceIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

#activity .activity_inner.is-show::after {
  opacity: 1;
  animation: bounceIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

#activity h3 {
  position: relative;
  width: 61%;
  margin: 0 auto 4.5%;
}

#activity h3::before {
  opacity: 0;
  display: block;
  content: "";
  position: absolute;
  top: 76%;
  left: -22%;
  background-image: url(../images/activity_sausage.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(119/var(--device-width) *var(--main-width));
  height: calc(171/var(--device-width) *var(--main-width));
  margin: auto;
  z-index: 10;
}

#activity h3::after {
  opacity: 0;
  display: block;
  content: "";
  position: absolute;
  top: 88%;
  right: -36%;
  background-image: url(../images/activity_flower.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(168/var(--device-width) *var(--main-width));
  height: calc(173/var(--device-width) *var(--main-width));
  margin: auto;
  z-index: 10;
}

#activity .activity_inner.is-show h3::before {
  opacity: 1;
  animation: bounceIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

#activity .activity_inner.is-show h3::after {
  opacity: 1;
  animation: bounceIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

#activity .inner {
  position: relative;
  background-color: #fff;
  border-radius: calc(20/var(--device-width) *var(--main-width));
  width: 93%;
  margin: 0 auto 7%;
  padding-top: 2%;
  padding-bottom: 3%;
  overflow: hidden;
}

#activity .inner p {
  font-size: calc(18/var(--device-width) *var(--main-width));
  font-weight: 500;
  text-align: center;
  line-height: 1.95;
  margin: 0 auto 3%;
}

#activity h4 {
  position: relative;
}

#activity h4::before {
  content: "";
  display: block;
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: #0090D0;
  margin: auto;
}

#activity h4::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 40%;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: #0090D0;
  margin: auto;
}

#activity h4 span {
  position: relative;
  display: block;
  background-color: #fff;
  font-size: calc(23/var(--device-width) *var(--main-width));
  font-weight: 500;
  color: #0090D0;
  text-align: center;
  width: 25%;
  margin: 0 auto 2%;
  z-index: 10;
}

#activity dl {
  display: flex;
  flex-wrap: wrap;
  gap: calc(25/var(--device-width) *var(--main-width)) calc(80/var(--device-width) *var(--main-width));
  width: 84%;
  margin: 0px auto 0 16%;
}

#activity dt {
  position: relative;
  display: inline-block;
  color: #0090D0;
  font-size: calc(20/var(--device-width) *var(--main-width));
  font-weight: bold;
  margin-bottom: 0.4em;
  z-index: 10;
}

#activity dt::before {
  display: inline-block;
  position: absolute;
  bottom: 0;
  content: "";
  background-color: #fff000;
  width: 97%;
  height: calc(10/var(--device-width) *var(--main-width));
  z-index: -1;
}

#activity dl div:nth-of-type(1) dt {
  letter-spacing: 0.7em;
}

#activity dl div:nth-of-type(2) dt {
  letter-spacing: 0.3em;
}

#activity dl div:nth-of-type(3) dt {}

#activity dd {
  font-size: calc(18/var(--device-width) *var(--main-width));
  font-weight: 500;
}

#activity dl div:nth-of-type(3) dd {
  display: flex;
}

#activity dl div:nth-of-type(3) dd div:first-of-type {
  font-size: calc(46/var(--device-width) *var(--main-width));
  font-weight: bold;
  letter-spacing: 0.03em;
}

#activity dl div:nth-of-type(3) dd div:last-of-type {
  font-size: calc(16/var(--device-width) *var(--main-width));
  font-weight: 400;
  padding-left: 1em;
}


#activity dl div:nth-of-type(3) dd div:last-of-type span {
  display: inline;
}

#activity .inner .free {
  display: inline-block;
  position: absolute;
  bottom: 3%;
  right: 4.2%;
}

#activity .inner .free p {
  position: relative;
  z-index: 10;
  font-size: calc(24/var(--device-width) *var(--main-width));
  font-weight: 500;
  color: #0090D0;
  text-align: left;
  line-height: 1.3;
}

#activity .inner .free span {
  font-size: calc(38/var(--device-width) *var(--main-width));
  font-weight: bold;
}

#activity .inner .free::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -87%;
  background-color: #fff000;
  width: calc(181/var(--device-width) *var(--main-width));
  height: calc(181/var(--device-width) *var(--main-width));
  border-radius: calc(100/var(--device-width) *var(--main-width));
}

#activity .sns_btn {
  display: block;
  width: calc(130/var(--device-width) *var(--main-width));
  margin: 0 auto 3%;
}

#activity .flex {
  display: flex;
  justify-content: space-between;
  width: calc(562/var(--device-width) *var(--main-width));
  margin: auto;
}

#activity .flex a {
  display: block;
  width: calc(265/var(--device-width) *var(--main-width));
}

@media screen and (max-width:750px) {
  #activity {
    background-image: url(../images/bg_activity_sp.png);
    margin-top: -15%;
    padding-top: 20%;
    padding-bottom: 12%;
  }

  #activity::before {
    background-image: url(../images/activity_pokina_sp.png);
    bottom: 11.5%;
    left: 5%;
    width: calc(395 / var(--device-width) * var(--main-width));
    height: calc(292 / var(--device-width) * var(--main-width));
  }

  #activity h2 {
    width: calc(672 / var(--device-width) * var(--main-width));
    margin: 0 auto 6.3% 3.5%;
  }

  #activity h3 {
    width: 84%;
    margin: 0 auto 12.5%;
  }

  #activity h3::before {
    top: 98.5%;
    left: 1.5%;
    width: calc(101 / var(--device-width) * var(--main-width));
    height: calc(145 / var(--device-width) * var(--main-width));
  }

  #activity h3::after {
    top: 244%;
    right: -16%;

    width: calc(168 / var(--device-width) * var(--main-width));
    height: calc(173 / var(--device-width) * var(--main-width));
  }

  #activity .activity_inner {
    background-image: url(../images/activity_inner_sp.png);
    width: 92%;
    padding-top: 7.5%;
    padding-bottom: 3%;
    margin: 0 auto 5%;
  }

  #activity .activity_inner::before {
    top: 25.5%;
    left: -3%;
    width: calc(132 / var(--device-width) * var(--main-width));
    height: calc(122/ var(--device-width) * var(--main-width));
  }

  #activity .activity_inner::after {
    top: 28.3%;
    right: -10%;
    width: calc(242 / var(--device-width) * var(--main-width));
    height: calc(211/ var(--device-width) * var(--main-width));
  }

  #activity .inner {
    border-radius: calc(10 / var(--device-width) * var(--main-width));
    width: 94%;
    padding-top: 7%;
    padding-bottom: 34%;
  }

  #activity .inner p {
    font-size: calc(28 / var(--device-width) * var(--main-width));
    line-height: 1.82;
    margin: 0 auto 7%;
  }

  #activity h4 span {
    font-size: calc(40 / var(--device-width) * var(--main-width));
    width: 65%;
    margin: 0 auto 5%;
  }

  #activity h4::before,
  #activity h4::after {
    width: 92%;
    height: 2px;
  }

  #activity dl {
    gap: calc(40 / var(--device-width) * var(--main-width));
    width: 85%;
    margin: 0 auto 0;
  }

  #activity dt {
    font-size: calc(28 / var(--device-width) * var(--main-width));
    margin-bottom: 0.4em;
  }

  #activity dt::before {
    height: calc(18 / var(--device-width) * var(--main-width));
  }

  #activity dd {
    font-size: calc(26 / var(--device-width) * var(--main-width));
  }

  #activity dl div:nth-of-type(3) dd {
    display: flex;
    flex-direction: column;
  }

  #activity dl div:nth-of-type(3) dd div:first-of-type {
    margin: 0 0 0.2em;
  }

  #activity dl div:nth-of-type(3) dd div:last-of-type {
    font-size: calc(22 / var(--device-width) * var(--main-width));
    padding-left: 0;
  }


  #activity .inner .free::before {
    top: -34%;
    right: -83%;
    width: calc(280 / var(--device-width) * var(--main-width));
    height: calc(280 / var(--device-width) * var(--main-width));
    border-radius: calc(140 / var(--device-width) * var(--main-width));
  }

  #activity .inner .free p {
    font-size: calc(37 / var(--device-width) * var(--main-width));
    line-height: 1.3;
  }

  #activity .inner .free span {
    font-size: calc(58 / var(--device-width) * var(--main-width));
  }

  #activity .inner .free {
    bottom: 1.2%;
    right: 8.8%;
  }

  #activity .sns_btn {
    width: calc(145 / var(--device-width) * var(--main-width));
    margin: 0 auto 3%;
  }

  #activity .flex {
    width: calc(657 / var(--device-width) * var(--main-width));
  }

  #activity .flex a {
    width: calc(319 / var(--device-width) * var(--main-width));
  }
}

/* ＝＝＝＝＝＝＝＝＝＝ */
/*      footer      　*/
/* ＝＝＝＝＝＝＝＝＝＝ */
footer {
  font-size: calc(20/var(--device-width) *var(--main-width));
  font-weight: bold;
  padding: 1em;
  text-align: center;
  letter-spacing: 0.07em;
}

@media screen and (max-width:750px) {
  footer {
    font-size: calc(22/var(--device-width) *var(--main-width));
    font-weight: 500;
    padding: 1.6em;
    letter-spacing: 0.1em;
  }
}

/* ＝＝＝＝＝＝＝＝＝＝ */
/*       top       　*/
/* ＝＝＝＝＝＝＝＝＝＝ */
#top {
  opacity: 0;
  position: fixed;
  bottom: calc(50/var(--device-width) *var(--main-width));
  right: calc(50/var(--device-width) *var(--main-width));
  width: calc(114/var(--device-width) *var(--main-width));
  z-index: 999;
}

#top.is-show {
  opacity: 1;
  transition: opacity 0.5s;
  animation: slideIn02 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}

#top a {
  position: relative;
  display: block;
}

#top a::after {
  opacity: 0;
  display: block;
  content: "";
  position: absolute;
  top: -70%;
  right: calc(-3/var(--device-width) *var(--main-width));
  background-image: url(../images/top.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(155/var(--device-width) *var(--main-width));
  height: calc(145/var(--device-width) *var(--main-width));
  margin: auto;
  z-index: -1;
  transition: opacity 0.6s;
}

#top a:hover {
  opacity: 1;
}

#top:hover a::after {
  opacity: 1;
  transition: opacity 1s;
}

@media screen and (max-width:750px) {
  #top {
    bottom: calc(35 / var(--device-width) * var(--main-width));
    right: calc(30 / var(--device-width) * var(--main-width));
    width: calc(89 / var(--device-width) * var(--main-width));
  }


  #top a::after {
    opacity: 1;
    top: -70%;
    right: calc(-3 / var(--device-width) * var(--main-width));
    width: calc(121 / var(--device-width) * var(--main-width));
    height: calc(114/ var(--device-width) * var(--main-width));
  }
}