@charset "utf-8";
:root {
  --color-green: #01b399;
}

#str-main {
  margin-bottom: 70px;
}

[v-cloak] {
  display: none;
}

.inner {
  max-width: 1200px;
  box-sizing: content-box;
  padding: 0px 20px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .inner {
    padding: 0px;
  }
}

.akakan, .recipe, .movie, .concept, .mv {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

main * {
  box-sizing: border-box;
}

.anime-fade {
  transition: opacity 1.5s ease 0.5s;
  opacity: 0;
}

.anime-fade-r {
  transform: translateX(50px);
}

.anime-fade-l, .anime-fade-r {
  transition: opacity 1.5s ease, transform 1s ease;
  opacity: 0;
}

.anime-fade-l {
  transform: translateX(-50px);
}

.anime-fade-y {
  transition: opacity 1.5s ease, transform 1s ease;
  opacity: 0;
  transform: translateY(50px);
}

.anime-fade-l.js--anime__play, .anime-fade-r.js--anime__play, .anime-fade-y.js--anime__play, .anime-fade.js--anime__play {
  opacity: 1;
  transform: translate(0);
}

@media screen and (max-width: 768px) {
  .mv {
    border-bottom: 4vw solid var(--color-green);
  }
  .mv img {
    background-image: url("../images/sp/index-bg-mv.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  .mv {
    background-image: url("../images/pc/index-bg-mv-01.png"), url("../images/pc/index-bg-mv.jpg");
    background-size: auto 100%, cover;
    background-position: center top, center;
    border-bottom: 40px solid var(--color-green);
  }
  .mv .inner {
    padding: 0;
  }
}

.concept {
  position: relative;
}
@media screen and (max-width: 768px) {
  .concept {
    background-image: url("../images/sp/index-bg-concept.jpg");
  }
  .concept__container {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .concept__hd {
    width: 96.0113960114%;
    margin-bottom: 5.698005698%;
  }
  .concept__text {
    width: 73.2%;
    margin-bottom: 15.6695156695%;
  }
  .concept__images {
    width: 87.8917378917%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-left: auto;
    margin-right: auto;
  }
  .concept__image-beer {
    width: 47.0016207455%;
  }
  .concept__image-curry {
    width: 52.5121555916%;
  }
  .concept .inner {
    padding: 10.6666666667vw 3.2vw 18.6666666667vw;
    display: flex;
    flex-flow: nowrap column;
  }
  .concept__right {
    position: relative;
    margin-top: 14.6666666667vw;
    height: 62.8vw;
  }
  .concept__right__image01 {
    position: absolute;
    bottom: 0;
    width: 38.6666666667vw;
    left: 5.3333333333vw;
    z-index: 2;
  }
  .concept__right__image02 {
    position: absolute;
    bottom: 0;
    width: 43.2vw;
    left: 44vw;
    z-index: 1;
  }
}
@media screen and (min-width: 769px) {
  .concept {
    background-image: url("../images/pc/index-bg-concept.jpg");
  }
  .concept__container {
    width: 100%;
    height: 30vw;
    max-height: 360px;
    position: relative;
  }
  .concept__hd {
    width: 54.4791666667%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .concept__text {
    width: 38.125%;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .concept__images {
    width: 45.625%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .concept__image-beer {
    width: 46.1187214612%;
  }
  .concept__image-curry {
    width: 52.5114155251%;
  }
}
@media screen and (min-width: 769px) and (min-width: 1201px) {
  .concept .inner {
    padding-right: 120px;
    padding-left: 120px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .concept .inner {
    padding-right: 10%;
    padding-left: 10%;
  }
}
@media screen and (min-width: 769px) {
  .concept .inner {
    box-sizing: border-box;
    max-width: 1200px;
    padding-top: 86px;
    padding-bottom: 150px;
  }
}
.concept::after {
  height: 20px;
  border-top: 4px solid white;
}
@media screen and (max-width: 768px) {
  .concept::after {
    height: 2.6666666667vw;
    border-top-width: 0.5333333333vw;
  }
}
.concept::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  z-index: 3;
  width: 100%;
  background-image: linear-gradient(90deg, rgb(194, 132, 0) 0%, rgb(255, 224, 51) 50%, rgb(194, 132, 0) 100%);
  bottom: 0;
}

.movie {
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 768px) {
  .movie {
    background-image: url("../images/sp/index-bg-movie.jpg");
  }
  .movie .inner {
    padding: 17.3333333333vw 0 41.8666666667vw;
    text-align: center;
    box-sizing: border-box;
  }
  .movie__hd {
    margin-bottom: 8vw;
  }
  .movie__hd img {
    width: 28.2666666667vw;
  }
  .movie__list__img01 img {
    width: 70.1333333333vw;
    background-image: url("../images/sp/index-img-movie-thumb01.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  .movie__list figcaption {
    margin-top: 4.2666666667vw;
  }
  .movie__list figcaption img {
    width: 88.8vw;
  }
  .movie__image01 {
    position: absolute;
    top: 2.6666666667vw;
    left: 0;
    z-index: 1;
  }
  .movie__image01 img {
    width: 37.8666666667vw;
    position: relative;
    z-index: 2;
  }
  .movie__image01::before {
    content: "";
    background-image: url("../images/sp/index-bg-movie-left.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 18.6666666667vw;
    height: 13.4666666667vw;
    display: block;
    top: -2.6666666667vw;
    left: 37.3333333333vw;
    position: absolute;
    z-index: 1;
  }
  .movie__image02 {
    position: absolute;
    bottom: 2.6666666667vw;
    right: 0;
    z-index: 1;
  }
  .movie__image02 img {
    width: 33.3333333333vw;
    position: relative;
    z-index: 2;
  }
  .movie__image02::before {
    content: "";
    background-image: url("../images/sp/index-bg-movie-right.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 18.4vw;
    height: 18vw;
    display: block;
    bottom: -3.2vw;
    right: 30.6666666667vw;
    position: absolute;
    z-index: 1;
  }
  .movie::before, .movie::after {
    height: 2.6666666667vw;
    border-top: 0.5333333333vw solid white;
  }
}
@media screen and (min-width: 769px) {
  .movie {
    background-image: url("../images/pc/index-bg-movie.jpg");
  }
  .movie .inner {
    padding: 104px 0 146px;
    text-align: center;
    box-sizing: border-box;
  }
  .movie__hd {
    margin-bottom: 3.3335%;
  }
  .movie__hd img {
    width: 16.8333333333%;
    max-width: 202px;
  }
  .movie__list__img01 img {
    width: 55.5833333333%;
    max-width: 667px;
    background-image: url("../images/pc/index-img-movie-thumb01.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  .movie__list figcaption {
    margin-top: 1.667%;
  }
  .movie__list figcaption img {
    width: 57.9166666667%;
    max-width: 695px;
  }
  .movie__image01 {
    max-width: 450px;
    width: 23.4375%;
    position: absolute;
    top: 0;
    left: 0%;
  }
  .movie__image01 img {
    position: relative;
    z-index: 2;
  }
  .movie__image01::before {
    content: "";
    background-image: url("../images/pc/index-bg-movie-left.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 48.8888888889%;
    height: 21.682464455%;
    display: block;
    top: 0;
    left: 73.3333333333%;
    position: absolute;
    z-index: 1;
  }
  .movie__image02 {
    width: 23.6979166667%;
    max-width: 455px;
    position: absolute;
    bottom: 20px;
    right: 0%;
  }
  .movie__image02 img {
    position: relative;
    z-index: 2;
  }
  .movie__image02::before {
    content: "";
    background-image: url("../images/pc/index-bg-movie-right.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 36.9230769231%;
    height: 26.3940520446%;
    display: block;
    bottom: -4.1290322581%;
    right: 89.2543859649%;
    position: absolute;
    z-index: 1;
  }
  .movie::before, .movie::after {
    height: 20px;
    border-top: 4px solid white;
  }
}
.movie__hd, .movie__list {
  position: relative;
  z-index: 3;
}
.movie::before, .movie::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  z-index: 3;
  width: 100%;
  background-image: linear-gradient(90deg, rgb(194, 132, 0) 0%, rgb(255, 224, 51) 50%, rgb(194, 132, 0) 100%);
}
.movie::before {
  top: 0;
}
.movie::after {
  bottom: 0;
}

.recipe {
  position: relative;
}
@media screen and (max-width: 768px) {
  .recipe {
    background-image: url("../images/sp/index-bg-recipe.jpg");
  }
  .recipe .inner {
    padding: 13.3333333333vw 0 16vw;
    text-align: center;
  }
  .recipe__hd {
    margin-bottom: 7.4666666667vw;
  }
  .recipe__hd img {
    width: 30.1333333333vw;
  }
  .recipe__description {
    width: 7.4666666667vw;
  }
  .recipe__description img {
    width: 87.7333333333vw;
  }
  .recipe__item img {
    margin-top: -2.6666666667vw;
    width: 99.4666666667vw;
  }
  .recipe::after {
    height: 2.6666666667vw;
    border-top: 0.5333333333vw solid white;
  }
}
@media screen and (min-width: 769px) {
  .recipe {
    background-image: url("../images/pc/index-bg-recipe.jpg");
  }
  .recipe .inner {
    padding: 80px 0 140px;
    text-align: center;
  }
  .recipe__hd img {
    width: 18.5%;
    max-width: 222px;
    margin-bottom: 50px;
  }
  .recipe__description img {
    width: 48.6666666667%;
    max-width: 584px;
  }
  .recipe__item img {
    width: 83%;
    margin-top: -1.667%;
    max-width: 996px;
  }
  .recipe::after {
    height: 20px;
    border-top: 4px solid white;
  }
}
.recipe::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  z-index: 3;
  width: 100%;
  background-image: linear-gradient(90deg, rgb(194, 132, 0) 0%, rgb(255, 224, 51) 50%, rgb(194, 132, 0) 100%);
  bottom: 0;
}

@media screen and (max-width: 768px) {
  .akakan {
    background-image: url("../images/sp/index-bg-akakan.jpg");
  }
  .akakan .inner {
    padding: 13.3333333333vw 2.6666666667vw;
  }
  .akakan__bnr img {
    width: 94.6666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .akakan {
    background-image: url("../images/pc/index-bg-akakan-01.png"), url("../images/pc/index-bg-akakan.jpg");
    background-size: contain, cover;
    background-position: center, center;
  }
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .akakan .inner {
    padding: 0;
    aspect-ratio: 1249/432;
    text-align: center;
  }
  .akakan__bnr {
    padding-top: 7%;
  }
  .akakan__bnr img {
    width: 65%;
    max-width: 780px;
  }
}
@media screen and (min-width: 769px) and (min-width: 1201px) {
  .akakan .inner {
    padding: 80px 0 100px;
    text-align: center;
    aspect-ratio: unset;
  }
  .akakan__bnr {
    padding-top: 0;
  }
  .akakan__bnr img {
    width: 65%;
    max-width: 780px;
  }
}