:root {
  --base-color-wh: #ffffff;
  --base-color-wh10: rgba(255, 255, 255, .1);
  --base-color-wh60: rgba(255, 255, 255, .6);
  --base-color-l-gray: #F5F5F5;
  --base-color-m-gray: #D9D9D9;
  --base-color-d-gray: #A5A5A5;
  --base-color-cr: #FFFFEC;
  --base-color-p-sky: #F5FAFC;
  --base-color-nv: #003894;
  --base-color-nv80: rgba(0, 56, 148, .8);
  --base-color-bk: #333333;
  --text-color-bk: #333333;
  --accent-color-l-sky: #C4E7F3;
  --accent-color-sky: #8BCFF1;
  --accent-color-sky70: rgba(139, 207, 241, .7);
  --accent-color-bl: #487DE7;
  --accent-color-nikoniko-ye: #FFF100;
  --accent-color-dark-green: #2D5A27;
  --accent-color-green: #67B471;
  --accent-color-orange: #E95464;
  --accent-color-logo-BL: #00A0E9;
  --accent-color-logo-BL80: rgba(0, 160, 233, .8);
  --accent-color-logo-BL60: rgba(0, 160, 233, .6);
  --accent-color-logo-BL40: rgba(0, 160, 233, .4);
  --accent-color-logo-BL20: rgba(0, 160, 233, .2);
  --accent-color-facebook: #1877F2;
  --accent-color-logo-GR: #6FBA2C;
  --accent-color-ye: #FDDE4D;
  --accent-color-red: #F80B0B;
  --accent-color-pk: #EF9FB1;
  --accent-color-pk70: rgba(239, 159, 177, .7);
  --accent-color-br: #CD853F;
  --accent-color-br70: rgba(205, 133, 63, .7);
  --accent-color-or: #FF8A1E;
  --accent-color-or80: rgba(255, 138, 30, .8);
  --accent-color-or60: rgba(255, 138, 30, .6);
  --accent-color-or40: rgba(255, 138, 30, .4);
  --accent-color-or20: rgba(255, 138, 30, .2);
  --accent-color-p-or: #FCE6D3;
  --accent-color-l-or: #FCC697;
  --accent-color-instagram: linear-gradient(90deg, rgba(118,56,250,1) 0%, rgba(211,0,197,1)49%, rgba(255,0,105,1)100%);
}

.peacefarm {
  position: relative;
  overflow-x: hidden;
  font-family: "Kiwi Maru", serif;
}
.peacefarm .hero {
  position: relative;
  height: 700px;
  background: url(../img/peacefarm/hero_pc.webp) no-repeat center center/cover;
}
@media only screen and (max-width: 767px) {
  .peacefarm .hero {
    height: 570px;
    background: url(../img/peacefarm/hero_sp.webp) no-repeat center bottom/cover;
  }
}
.peacefarm .hero_inner {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  max-width: 1100px;
  height: 100%;
  padding-top: 12rem;
}
@media only screen and (max-width: 767px) {
  .peacefarm .hero_inner {
    height: 100%;
    padding-top: 4rem;
  }
}
.peacefarm .hero_inner .title {
  width: 35%;
}
@media only screen and (max-width: 767px) {
  .peacefarm .hero_inner .title {
    width: 56.26%;
  }
}
.peacefarm .hero_inner .copy {
  width: 65.45%;
}
@media only screen and (max-width: 767px) {
  .peacefarm .hero_inner .copy {
    width: 100%;
  }
}
.peacefarm .hero_inner .copy img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.peacefarm .hero_btn {
  position: absolute;
  right: 5rem;
  bottom: 7.2rem;
  width: 374px;
}
@media only screen and (max-width: 767px) {
  .peacefarm .hero_btn {
    right: auto;
    bottom: 4rem;
    left: 50%;
    width: 84.26%;
    transform: translateX(-50%);
  }
}
.peacefarm .hero_btn img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.peacefarm article .sec h2 {
  position: relative;
  z-index: 3;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .sec h2 {
    font-size: 2.4rem;
  }
}
.peacefarm article .sec h2 span {
  font-size: 4rem;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .sec h2 span {
    font-size: 3.2rem;
  }
}
.peacefarm article .sec .h2box h2::before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 80px;
  height: 80px;
  background: var(--accent-color-green);
  border-radius: 50%;
  top: -24px;
  left: -24px;
  z-index: -1;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .sec .h2box h2::before {
    top: -21px;
    left: -21px;
    width: 72px;
    height: 72px;
  }
}
.peacefarm article .sec h3 {
  display: block;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  z-index: 2;
  margin: 0 auto 32px;
  background: none;
  font-size: 2.4rem;
  font-weight: 700;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .sec h3 {
    font-size: 2.2rem;
  }
}
.peacefarm article .sec .h3box {
  text-align: center;
}
.peacefarm article .about {
  padding: 120px 0 80px;
  background: #F9F6F0;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .about {
    padding: 80px 0;
  }
}
.peacefarm article .about_wrap {
  width: calc(100% - 32px);
  max-width: 800px;
  margin-inline: auto;
}
.peacefarm article .about_wrap h2 {
  color: var(--accent-color-dark-green);
  font-size: 32px;
  font-weight: 500;
  line-height: 150%;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .about_wrap h2 {
    font-size: 24px;
  }
}
.peacefarm article .about_wrap p {
  margin-top: 3.2rem;
  font-size: 20px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 5%;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .about_wrap p {
    margin-top: 2rem;
    font-size: 16px;
  }
}
.peacefarm article .about_thumb {
  position: relative;
  width: 100%;
  margin-top: 6.4rem;
  padding: 0 6rem;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .about_thumb {
    margin-top: 4.8rem;
    padding: 0;
  }
}
.peacefarm article .about_thumb img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.peacefarm article .about_image {
  position: relative;
  width: 100%;
  margin-top: 6.4rem;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .about_image {
    margin-top: 4.8rem;
  }
}
.peacefarm article .about_image img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.peacefarm article .farm {
  padding: 0;
}
.peacefarm article .farm img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.peacefarm article .restaurant {
  position: relative;
  padding: 180px 0;
  background: #F9F6F0;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .restaurant {
    padding: 140px 0;
  }
}
.peacefarm article .restaurant::after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-image: url(../img/peacefarm/restraunt_bg.webp);
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
}
.peacefarm article .restaurant_wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2.4rem 2rem;
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .restaurant_wrap {
    flex-direction: column;
  }
}
.peacefarm article .restaurant_thumb {
  position: relative;
  width: 44.5%;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .restaurant_thumb {
    width: 100%;
  }
}
.peacefarm article .restaurant_thumb::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: -100px;
  left: 0;
  width: 160px;
  height: auto;
  background-image: url(../img/peacefarm/restaurant_mark.webp);
  background-position: top center;
  background-size: contain;
  background-repeat: no-repeat;
  aspect-ratio: 32/25;
}
.peacefarm article .restaurant_thumb img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.peacefarm article .restaurant_txt {
  width: 53.5%;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .restaurant_txt {
    width: 100%;
  }
}
.peacefarm article .restaurant_txt h2 img {
  width: 190px;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .restaurant_txt h2 img {
    width: 153px;
  }
}
.peacefarm article .restaurant_txt p {
  margin-top: 2.4rem;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 5%;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .restaurant_txt p {
    margin-top: 2rem;
    font-size: 16px;
  }
}
.peacefarm article .restaurant_txt p:first-of-type {
  margin-top: 1.6rem;
}
.peacefarm article .restaurant_gallery {
  overflow: hidden;
  width: 100%;
  margin-top: 6.4rem;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .restaurant_gallery {
    margin-top: 4.8rem;
  }
}
.peacefarm article .restaurant_gallery .gallery-track {
  display: flex;
  gap: 16px;
  width: -moz-max-content;
  width: max-content;
  animation: scrollLeft 30s linear infinite;
}
.peacefarm article .restaurant_gallery .gallery-item {
  flex-shrink: 0;
  width: 192px;
  height: 192px;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .restaurant_gallery .gallery-item {
    width: 120px;
    height: 120px;
  }
}
.peacefarm article .restaurant_gallery .gallery-item img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.peacefarm article .restaurant_link {
  width: 100%;
  margin-top: 6.4rem;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .restaurant_link {
    margin-top: 4.8rem;
  }
}
.peacefarm article .restaurant_link .link-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  padding: 2rem 8rem;
  margin-inline: auto;
  border-radius: 8px;
  background-color: var(--accent-color-dark-green);
  color: var(--base-color-wh);
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .restaurant_link .link-btn {
    padding: 2rem 4rem;
  }
}
.peacefarm article .experience {
  position: relative;
  padding: 80px 0;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .experience {
    padding: 40px 0;
  }
}
.peacefarm article .experience_title img {
  width: 190px;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .experience_title img {
    width: 153px;
  }
}
.peacefarm article .experience_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row-reverse;
  gap: 2.4rem 2rem;
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .experience_wrap {
    flex-direction: column;
  }
}
.peacefarm article .experience_thumb {
  position: relative;
  width: 44.5%;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .experience_thumb {
    width: 100%;
  }
}
.peacefarm article .experience_thumb img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.peacefarm article .experience_txt {
  width: 53.5%;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .experience_txt {
    width: 100%;
  }
}
.peacefarm article .experience_txt p {
  margin-top: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 5%;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .experience_txt p {
    font-size: 16px;
  }
}
.peacefarm article .experience_txt figure {
  width: 64.11%;
  margin-top: 3.2rem;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .experience_txt figure {
    margin-inline: auto;
  }
}
.peacefarm article .experience_txt figure img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.peacefarm article .experience_gallery {
  overflow: hidden;
  width: 100%;
  margin-top: 6.4rem;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .experience_gallery {
    margin-top: 4.8rem;
  }
}
.peacefarm article .experience_gallery .gallery-track {
  display: flex;
  gap: 16px;
  width: -moz-max-content;
  width: max-content;
  animation: scrollRight 30s linear infinite;
}
.peacefarm article .experience_gallery .gallery-item {
  flex-shrink: 0;
  width: 192px;
  height: 192px;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .peacefarm article .experience_gallery .gallery-item {
    width: 120px;
    height: 120px;
  }
}
.peacefarm article .experience_gallery .gallery-item img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
@keyframes scrollRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}/*# sourceMappingURL=peacefarm.css.map */