@charset "UTF-8";
/* Sass Document */
.l-content__heading {
  height: 775px;
}
@media screen and (max-width: 767.98px) {
  .l-content__heading {
    height: auto;
    aspect-ratio: 1/1;
  }
}

.l-mv {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.l-mv video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.l-mv::before, .l-mv::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
}
.l-mv::before {
  height: 100%;
  background: url(../img/about/dots.png);
  z-index: 1;
  top: 0;
}
.l-mv::after {
  bottom: -1px;
  height: 60px;
  background: url(../img/about/fade.png) repeat-x top center/auto 100%;
  z-index: 2;
}
@media screen and (max-width: 767.98px) {
  .l-mv::after {
    height: 2.8rem;
  }
}

.l-content-ttl .u-jp {
  font-size: 3.99rem;
}
@media screen and (max-width: 767.98px) {
  .l-content-ttl .u-jp {
    font-size: 2.16rem;
  }
}
.l-content-ttl .u-en {
  color: #fff;
  margin-top: 10px;
}
@media screen and (max-width: 767.98px) {
  .l-content-ttl .u-en {
    margin-top: 0.6rem;
  }
}

.p-about picture {
  width: 100%;
  height: 100%;
}
.p-about .l-content__body .c-ttl {
  font-size: 2.6rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.7692307692;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767.98px) {
  .p-about .l-content__body .c-ttl {
    font-size: 1.82rem;
  }
}

@media screen and (max-width: 767.98px) {
  .l-content__heading-txt-wrapper {
    padding-top: 2rem;
  }
}
.l-content__heading-txt-wrapper .c-heading__txt {
  font-size: 2.6rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-top: 65px;
  line-height: 1.7692307692;
}
@media screen and (max-width: 767.98px) {
  .l-content__heading-txt-wrapper .c-heading__txt {
    font-size: 1.53rem;
    margin-top: 5rem;
  }
}

.p-copy {
  text-align: center;
  padding: 50px 0 170px;
}
@media screen and (max-width: 767.98px) {
  .p-copy {
    padding: 5.5rem 1rem 11rem;
  }
}
.p-copy .c-txt {
  font-size: 1.8rem;
  line-height: 2;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
}
@media screen and (max-width: 767.98px) {
  .p-copy .c-txt {
    font-size: 1.44rem;
    letter-spacing: 0;
  }
}
.p-copy .c-txt + .c-txt {
  margin-top: 2em;
}

.c-section__ttl.u-en {
  color: #d4152d;
  font-weight: 900;
  font-size: 8.96rem;
  line-height: 1.15625;
  letter-spacing: 0;
}
@media screen and (max-width: 767.98px) {
  .c-section__ttl.u-en {
    font-size: 5.616rem;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}
.c-section__ttl.u-en .u-txtsize--small {
  font-size: 7rem;
  font-weight: 500;
}
@media screen and (max-width: 767.98px) {
  .c-section__ttl.u-en .u-txtsize--small {
    font-size: 4.704rem;
  }
}

.p-nice-to-meat {
  height: 600px;
  position: relative;
}
@media screen and (max-width: 767.98px) {
  .p-nice-to-meat {
    height: 53.4rem;
  }
}
.p-nice-to-meat .c-section__ttl {
  font-size: 12.46rem;
  position: absolute;
  transform: translateY(-50%);
  z-index: 2;
  left: 0;
  right: 0;
  text-align: center;
}
@media screen and (max-width: 767.98px) {
  .p-nice-to-meat .c-section__ttl {
    font-size: 8.736rem;
    line-height: 1.1923076923;
    transform: translateY(-25%);
  }
}
.p-nice-to-meat .c-ttl,
.p-nice-to-meat .c-txt {
  color: #fff;
}
.p-nice-to-meat .c-txt {
  width: 460px;
  margin: 30px auto 0;
  font-weight: 500;
}
@media screen and (max-width: 767.98px) {
  .p-nice-to-meat .c-txt {
    width: auto;
    font-size: 1.44rem;
    text-align: justify;
    letter-spacing: 0.01em;
    line-height: 2;
  }
}
.p-nice-to-meat .p-txt-wrapper {
  position: absolute;
  top: 0;
  z-index: 2;
  height: 100%;
  width: 100%;
  left: 0;
  right: 0;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 767.98px) {
  .p-nice-to-meat .p-txt-wrapper {
    padding-top: 20.3rem;
    padding-left: 2.2rem;
    padding-right: 2rem;
    padding-bottom: 4rem;
    display: block;
  }
}

.p-col--2 {
  display: flex;
}
@media screen and (max-width: 767.98px) {
  .p-col--2 {
    display: block;
  }
}
.p-col--2.-rev {
  flex-direction: row-reverse;
}
.p-col--2.-rev .p-text-content .p-txt-wrapper {
  margin-left: 0;
  padding-right: 0;
}
.p-col--2 .p-content {
  width: 50%;
}
@media screen and (max-width: 767.98px) {
  .p-col--2 .p-content {
    width: auto;
  }
}
.p-col--2 .p-image-content picture {
  width: 100%;
  height: 100%;
}
.p-col--2 .p-text-content {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 767.98px) {
  .p-col--2 .p-text-content {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
.p-col--2 .p-text-content .p-txt-wrapper {
  padding: 80px 100px 100px 0;
  max-width: 670px;
  margin-left: auto;
}
@media screen and (max-width: 767.98px) {
  .p-col--2 .p-text-content .p-txt-wrapper {
    padding: 0;
  }
}
.p-col--2 .p-text-content .p-txt-wrapper .c-ttl {
  margin-top: 90px;
  letter-spacing: 0.01em;
}
@media screen and (max-width: 767.98px) {
  .p-col--2 .p-text-content .p-txt-wrapper .c-ttl {
    margin-top: 5.6rem;
  }
}
.p-col--2 .p-text-content .p-txt-wrapper .c-txt {
  margin: 35px auto 0;
  font-weight: 500;
  text-align: justify;
}
@media screen and (max-width: 767.98px) {
  .p-col--2 .p-text-content .p-txt-wrapper .c-txt {
    font-size: 1.44rem;
    line-height: 2;
    margin-top: 2.8rem;
    letter-spacing: 0.01em;
    line-height: 2;
  }
}
.p-col--2 .p-text-content .p-img-wrapper {
  flex-grow: 1;
}
.p-col--2 .p-text-content .p-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-rice {
  height: 1118px;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-template-columns: 50% 50%;
  grid-template-rows: 1fr auto;
  gap: 0px 0px;
  grid-template-areas: "large-img txt" "large-img image";
}
@media screen and (max-width: 767.98px) {
  .p-rice {
    padding-top: 8.1rem;
    height: auto;
    display: block;
  }
}
.p-rice .p-txt-wrapper {
  grid-area: txt;
  width: 560px;
  padding-top: 82px;
  padding-left: 108px;
}
@media screen and (max-width: 767.98px) {
  .p-rice .p-txt-wrapper {
    width: auto;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 0;
  }
}
.p-rice .p-img-wrapper {
  grid-area: image;
  height: 480px;
}
@media screen and (max-width: 767.98px) {
  .p-rice .p-img-wrapper {
    height: auto;
  }
}
.p-rice .p-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-rice .c-ttl {
  margin-top: 89px;
}
@media screen and (max-width: 767.98px) {
  .p-rice .c-ttl {
    margin-top: 52px;
  }
}
.p-rice .c-txt {
  margin-top: 35px;
}
@media screen and (max-width: 767.98px) {
  .p-rice .c-txt {
    width: auto;
    font-size: 1.44rem;
    margin-top: 2.9rem;
    letter-spacing: 0.01em;
    line-height: 2;
  }
}
.p-rice .p-image-content {
  grid-area: large-img;
}
@media screen and (max-width: 767.98px) {
  .p-rice .p-image-content {
    margin-top: 4.8rem;
    height: 50.9rem;
  }
}

.p-salad {
  height: 1453px;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-template-columns: 50% 50%;
  grid-template-rows: 1fr auto;
  gap: 0px 0px;
  grid-template-areas: "txt large-img" "image large-img";
}
@media screen and (max-width: 767.98px) {
  .p-salad {
    display: block;
    height: auto;
  }
}
.p-salad .p-txt-wrapper {
  grid-area: txt;
  margin-left: auto;
  width: 553px;
  padding-right: 92px;
  padding-top: 82px;
}
@media screen and (max-width: 767.98px) {
  .p-salad .p-txt-wrapper {
    width: auto;
    margin-left: 0;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
.p-salad .p-image-content {
  grid-area: large-img;
}
@media screen and (max-width: 767.98px) {
  .p-salad .p-image-content {
    margin-top: 4.2rem;
    height: 52.5rem;
  }
}
.p-salad .p-img-wrapper {
  grid-area: image;
  height: 600px;
}
@media screen and (max-width: 767.98px) {
  .p-salad .p-img-wrapper {
    height: auto;
  }
}
.p-salad .p-img-wrapper picture {
  width: 100%;
  height: 100%;
}
.p-salad .p-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-salad .c-ttl {
  margin-top: 79px;
}
@media screen and (max-width: 767.98px) {
  .p-salad .c-ttl {
    margin-top: 5.9rem;
  }
}
.p-salad .c-txt {
  margin-top: 38px;
}
@media screen and (max-width: 767.98px) {
  .p-salad .c-txt {
    width: auto;
    font-size: 1.44rem;
    margin-top: 3.1rem;
    letter-spacing: 0.01em;
    line-height: 2;
  }
}

.p-content__inner {
  overflow: hidden;
}

.jarallax {
  height: 100%;
}

.p-image {
  height: 600px;
  width: 100%;
}
.p-image picture {
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 767.98px) {
  .p-image {
    height: auto;
  }
}
.p-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-h-and-m {
  margin-top: 120px;
}
@media screen and (max-width: 767.98px) {
  .p-h-and-m {
    margin-top: 8.5rem;
  }
}
.p-h-and-m .p-text-content .p-txt-wrapper {
  padding-top: 0;
  padding-bottom: 0;
}
.p-h-and-m .p-text-content .p-txt-wrapper .c-ttl {
  margin-top: 77px;
}
@media screen and (max-width: 767.98px) {
  .p-h-and-m .p-text-content .p-txt-wrapper .c-ttl {
    margin-top: 4.9rem;
    white-space: nowrap;
  }
}
.p-h-and-m .p-text-content .c-txt {
  width: 514px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 767.98px) {
  .p-h-and-m .p-text-content .c-txt {
    width: auto;
    margin-top: 2.5rem;
  }
}
.p-h-and-m .p-image-content {
  margin-top: 20px;
}
@media screen and (max-width: 767.98px) {
  .p-h-and-m .p-image-content {
    margin-top: 4.4rem;
  }
}

.p-image-content.is-zoomIn {
  overflow: hidden;
}
.p-image-content.is-zoomIn img {
  transform: scale(1);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-image-content.is-zoomIn.js-animeOn img {
  animation: imgZoomIn 4s forwards;
}

@keyframes imgZoomIn {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
.p-images {
  display: flex;
  justify-content: center;
  gap: 27px;
  flex-wrap: wrap;
  margin-top: 96px;
}
@media screen and (max-width: 767.98px) {
  .p-images {
    justify-content: space-between;
    padding: 2.5rem 2.5rem 2rem;
    gap: 2rem 0;
    margin-top: 0;
  }
}

.p-images__item {
  width: 254px;
  height: 170px;
}
@media screen and (max-width: 767.98px) {
  .p-images__item {
    width: 47%;
    aspect-ratio: 154/103;
    height: auto;
  }
}
.p-images__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-safety {
  margin-top: 120px;
}
@media screen and (max-width: 767.98px) {
  .p-safety {
    margin-top: 7rem;
  }
}
.p-safety .p-text-content .p-txt-wrapper {
  padding-top: 0;
  padding-bottom: 0;
}
.p-safety .p-text-content .p-txt-wrapper .c-ttl {
  margin-top: 174px;
}
@media screen and (max-width: 767.98px) {
  .p-safety .p-text-content .p-txt-wrapper .c-ttl {
    margin-top: 5rem;
  }
}
.p-safety .p-text-content .p-txt-wrapper .c-txt {
  width: 514px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 767.98px) {
  .p-safety .p-text-content .p-txt-wrapper .c-txt {
    width: auto;
  }
}
.p-safety .p-image-content {
  margin-top: 20px;
}
@media screen and (max-width: 767.98px) {
  .p-safety .p-image-content {
    margin-top: 40px;
  }
}

.p-history {
  margin-top: 140px;
  background: url(../img/about/bg_history.jpg) #382617 no-repeat center center/cover;
}
@media screen and (max-width: 767.98px) {
  .p-history {
    margin-top: 7rem;
    padding: 26.6666666667vw 0 133.3333333333vw;
    background-image: url(../img/about/bg_history_sp.png);
    background-position: center calc(100% - 13.3333333333vw);
    background-size: 100% auto;
    /*padding-bottom: 4rem;*/
  }
}
.p-history .p-text-content .p-txt-wrapper {
  color: #fff;
}
.p-history .p-text-content .p-txt-wrapper .c-section__ttl {
  color: #fff !important;
}
.p-history .p-text-content .p-txt-wrapper .p-bg-wrapper::before {
  background-color: #fff;
}
.p-history .p-text-content .p-txt-wrapper .c-ttl {
  margin-top: 51px;
}
@media screen and (max-width: 767.98px) {
  .p-history .p-text-content .p-txt-wrapper .c-ttl {
    margin-top: 5.1rem;
  }
}
.p-history .p-text-content .p-txt-wrapper .c-txt {
  font-size: 1.8rem;
  letter-spacing: 0.11em;
  width: 534px;
  margin-top: 59px;
}
@media screen and (max-width: 767.98px) {
  .p-history .p-text-content .p-txt-wrapper .c-txt {
    width: auto;
    margin-top: 3.3rem;
    font-size: 1.44rem;
    letter-spacing: 0.04em;
    text-align: justify;
  }
}

.p-image-shop {
  height: 600px;
  width: 100%;
  overflow: hidden;
  margin-bottom: -1px;
}
@media screen and (max-width: 767.98px) {
  .p-image-shop {
    height: auto;
    width: 100%;
  }
}
.p-image-shop img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/*==================================================
背景色が伸びて出現
===================================*/
.is-bgScoll.js-animeOn .p-bg-wrapper::before {
  animation-name: bgDUextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 1;
}
.is-bgScoll.js-animeOn .p-txt {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

/*全共通*/
.p-bg-wrapper {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  opacity: 0;
  display: inline-block;
}

@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*下から上*/
.p-bg-wrapper::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #d4152d; /*伸びる背景色の設定*/
  opacity: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

@keyframes bgDUextendAnime {
  0% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
  50% {
    transform-origin: bottom;
    transform: scaleY(1);
  }
  50.001% {
    transform-origin: top;
  }
  100% {
    transform-origin: top;
    transform: scaleY(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.p-bg-wrapper,
.p-txt {
  opacity: 0;
}