@charset "UTF-8";
/* カラー */
.only-pc {
  /*PCのみ*/
  display: none;
}
@media screen and (min-width: 1024px) {
  .only-pc {
    display: block;
  }
}
.only-tab {
  /*タブレット以上*/
  display: block;
}
@media screen and (min-width: 768px) {
  .only-tab {
    display: none;
  }
}
.under-tab {
  /*タブレット以下*/
  display: block;
}
@media screen and (min-width: 1024px) {
  .under-tab {
    display: none;
  }
}
.only-sp {
  /*スマホのみ*/
  display: block;
}
@media screen and (min-width: 768px) {
  .only-sp {
    display: none;
  }
}
.except-sp {
  /*スマホ以外*/
  display: none;
}
@media screen and (min-width: 768px) {
  .except-sp {
    display: block;
  }
}
body {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-style: normal;
  background: #0C762C;
}
img {
  width: 100%;
  height: auto;
}
h1, h2, h3, h4, h5, h6, p, li, dt, dd, tr, td, a {
  font-feature-settings: "palt";
}
h1, h2, h3, h4, h5, h6 {
  letter-spacing: 0.075em;
}
p, li, dt, dd {
  font-size: clamp(1.125rem, calc(1.0603448276 * 1rem + 0.275862069vw), 1.25rem);
  line-height: 1.5;
  font-feature-settings: "palt";
}
.orange {
  color: #DC872D;
}
.green {
  color: #0C762C;
}
.ocher {
  color: #D9B62E;
}
.text span {
  font-weight: 600;
}
.section {
  position: relative;
  padding: clamp(1.25rem, calc(0.6034482759 * 1rem + 2.7586206897vw), 2.5rem) 0;
}
.container {
  max-width: 1160px;
  padding: 0 clamp(1.25rem, calc(0.9267241379 * 1rem + 1.3793103448vw), 1.875rem);
  margin: 0 auto;
}
.flame {
  background: #fff;
  border-radius: 10px;
  padding: clamp(2.5rem, calc(1.2068965517 * 1rem + 5.5172413793vw), 5rem) clamp(0.9375rem, calc(-0.5172413793 * 1rem + 6.2068965517vw), 3.75rem);
}
.title {
  width: fit-content;
  height: clamp(1.75rem, calc(0.7155172414 * 1rem + 4.4137931034vw), 3.75rem);
  margin: 0 auto clamp(0.625rem, calc(0.3017241379 * 1rem + 1.3793103448vw), 1.25rem);
}
.title img {
  width: auto;
  height: 100%;
}
.sub-title {
  display: block;
  width: fit-content;
  background: #000;
  color: #fff;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%);
  font-size: clamp(1.125rem, calc(0.8017241379 * 1rem + 1.3793103448vw), 1.75rem);
  text-align: center;
  line-height: 1;
  padding: clamp(0.1875rem, calc(0.0905172414 * 1rem + 0.4137931034vw), 0.375rem) clamp(1.875rem, calc(0.9051724138 * 1rem + 4.1379310345vw), 3.75rem);
  margin: 0 auto clamp(1.875rem, calc(0.9051724138 * 1rem + 4.1379310345vw), 3.75rem);
}
.heading2 {
  margin-bottom: clamp(1.25rem, calc(0.6034482759 * 1rem + 2.7586206897vw), 2.5rem);
}
.product-img {
  margin-bottom: clamp(1.25rem, calc(0.6034482759 * 1rem + 2.7586206897vw), 2.5rem);
}
.btn {
  display: grid;
  width: fit-content;
  color: #fff;
  background: #0C762C;
  font-family: "Inter", sans-serif;
  font-size: clamp(0.8125rem, calc(0.7478448276 * 1rem + 0.275862069vw), 0.9375rem);
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  border-radius: 40px;
  padding: clamp(0.3125rem, calc(0.2155172414 * 1rem + 0.4137931034vw), 0.5rem) clamp(0.9375rem, calc(0.4525862069 * 1rem + 2.0689655172vw), 1.875rem);
  margin: clamp(0.9375rem, calc(0.4525862069 * 1rem + 2.0689655172vw), 1.875rem) auto 0;
}
.organic__list {
  display: grid;
  gap: 30px clamp(1.875rem, calc(-0.3879310345 * 1rem + 9.6551724138vw), 6.25rem);
  margin-bottom: clamp(2.5rem, calc(1.2068965517 * 1rem + 5.5172413793vw), 5rem);
}
@media screen and (min-width: 768px) {
  .organic__list {
    grid-template-columns: 1fr 1fr;
  }
}
.organic__bottom {
  display: grid;
  gap: 20px clamp(1.25rem, calc(-0.6896551724 * 1rem + 8.275862069vw), 5rem);
  border: 2px solid #0C762C;
  padding: clamp(1.25rem, calc(-0.0431034483 * 1rem + 5.5172413793vw), 3.75rem) clamp(0.9375rem, calc(-0.5172413793 * 1rem + 6.2068965517vw), 3.75rem);
  margin-bottom: clamp(3.125rem, calc(1.5086206897 * 1rem + 6.8965517241vw), 6.25rem);
}
@media screen and (min-width: 768px) {
  .organic__bottom {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}
.organic__lead {
  color: #0C762C;
  font-size: clamp(2rem, calc(1.5474137931 * 1rem + 1.9310344828vw), 2.875rem);
  font-weight: 500;
}
.organic__lead span {
  font-size: 120%;
}
.recipe {
  margin-bottom: clamp(3.125rem, calc(1.5086206897 * 1rem + 6.8965517241vw), 6.25rem);
}
.recipe__title {
  color: #0C762C;
  font-size: clamp(2.25rem, calc(1.474137931 * 1rem + 3.3103448276vw), 3.75rem);
  font-weight: 600;
  text-align: center;
  margin-bottom: clamp(0.9375rem, calc(0.4525862069 * 1rem + 2.0689655172vw), 1.875rem);
}
.recipe__list {
  display: grid;
  gap: 0 clamp(1.25rem, calc(-0.0431034483 * 1rem + 5.5172413793vw), 3.75rem);
}
@media screen and (min-width: 768px) {
  .recipe__list {
    grid-template-columns: 1fr 1fr;
  }
}
.recipe__item {
  display: grid;
  grid-template-columns: 40% 1fr;
  align-items: center;
  gap: clamp(0.9375rem, calc(0.4525862069 * 1rem + 2.0689655172vw), 1.875rem);
  border-top: 2px solid #0C762C;
  border-bottom: 2px solid #0C762C;
  margin-top: -2px;
  padding: clamp(1.25rem, calc(0.9267241379 * 1rem + 1.3793103448vw), 1.875rem) clamp(0rem, calc(-0.3232758621 * 1rem + 1.3793103448vw), 0.625rem);
  cursor: pointer;
}
.recipe__img-wrap {
  aspect-ratio: 1;
}
.recipe__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recipe__text-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.recipe__name {
  font-size: clamp(1.125rem, calc(0.9310344828 * 1rem + 0.8275862069vw), 1.5rem);
  text-align: center;
}
.sns__title {
  width: clamp(12.5rem, calc(9.2672413793 * 1rem + 13.7931034483vw), 18.75rem);
  margin: 0 auto clamp(1.25rem, calc(0.6034482759 * 1rem + 2.7586206897vw), 2.5rem);
}
.sns__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, calc(0.6034482759 * 1rem + 2.7586206897vw), 2.5rem);
}
@media screen and (min-width: 768px) {
  .sns__list {
    grid-template-columns: repeat(4, 1fr);
  }
}
.sns__link {
  display: block;
  border: clamp(0.125rem, calc(0.0603448276 * 1rem + 0.275862069vw), 0.25rem) solid #fff;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
.vegetarian__body {
  max-width: 440px;
  margin: 0 auto;
}
.vegetarian__list {
  display: grid;
  gap: 10px;
  max-width: 440px;
  margin: clamp(1.25rem, calc(0.6034482759 * 1rem + 2.7586206897vw), 2.5rem) auto 0;
}
.vegetarian__item {
  font-size: clamp(1.25rem, calc(1.1206896552 * 1rem + 0.5517241379vw), 1.5rem);
  font-weight: 500;
  padding-left: 0.8em;
  text-indent: -0.8em;
  line-height: 1.2;
}
.vegetarian__item::before {
  content: "・";
}
.modal {
  display: none;
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: clamp(1.875rem, calc(0.5818965517 * 1rem + 5.5172413793vw), 4.375rem) clamp(1.25rem, calc(0.9267241379 * 1rem + 1.3793103448vw), 1.875rem);
  z-index: 999;
}
.modal.active {
  display: block;
}
.modal__content {
  position: relative;
  max-width: 1100px;
  background: #fff;
  border-radius: clamp(0.3125rem, calc(0.150862069 * 1rem + 0.6896551724vw), 0.625rem);
  margin: auto;
}
.modal__inner {
  max-height: calc(100vh - 60px);
  padding: clamp(0.9375rem, calc(0.1293103448 * 1rem + 3.4482758621vw), 2.5rem) clamp(0.9375rem, calc(-0.5172413793 * 1rem + 6.2068965517vw), 3.75rem);
  overflow: scroll;
}
@media screen and (min-width: 768px) {
  .modal__inner {
    max-height: calc(100vh - 140px);
  }
}
.modal__close {
  position: absolute;
  display: grid;
  place-content: center;
  color: #000;
  font-size: clamp(1.5rem, calc(1.1120689655 * 1rem + 1.6551724138vw), 2.25rem);
  font-weight: 100;
  line-height: 1;
  top: clamp(0.3125rem, calc(0.150862069 * 1rem + 0.6896551724vw), 0.625rem);
  right: clamp(0.625rem, calc(0.3017241379 * 1rem + 1.3793103448vw), 1.25rem);
}
.modal__top-area {
  display: grid;
  grid-template-columns: 30% 1fr;
  align-items: center;
  gap: clamp(0.9375rem, calc(0.1293103448 * 1rem + 3.4482758621vw), 2.5rem);
  margin-bottom: clamp(1.25rem, calc(0.6034482759 * 1rem + 2.7586206897vw), 2.5rem);
}
.modal__name {
  color: #0C762C;
  font-size: clamp(1.5rem, calc(0.6594827586 * 1rem + 3.5862068966vw), 3.125rem);
  font-weight: 500;
  text-align: center;
}
.modal__body + .modal__body {
  margin-top: clamp(2.5rem, calc(1.2068965517 * 1rem + 5.5172413793vw), 5rem);
}
.modal__lead {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(0.625rem, calc(0.3017241379 * 1rem + 1.3793103448vw), 1.25rem);
  color: #0C762C;
  font-size: clamp(1.125rem, calc(0.9956896552 * 1rem + 0.5517241379vw), 1.375rem);
  font-weight: 500;
  margin-bottom: clamp(0.625rem, calc(0.3017241379 * 1rem + 1.3793103448vw), 1.25rem);
}
.modal__lead::after {
  content: "";
  width: 100%;
  height: 1px;
  background: #0C762C;
}
.modal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(15rem, calc(11.1206896552 * 1rem + 16.5517241379vw), 22.5rem), 1fr));
  gap: 30px clamp(1.25rem, calc(-0.6896551724 * 1rem + 8.275862069vw), 5rem);
}
.modal__index {
  font-size: clamp(1.125rem, calc(1.0603448276 * 1rem + 0.275862069vw), 1.25rem);
  font-weight: 500;
  margin-bottom: clamp(0.3125rem, calc(0.150862069 * 1rem + 0.6896551724vw), 0.625rem);
}
.modal__item dl {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px clamp(0.625rem, calc(0.3017241379 * 1rem + 1.3793103448vw), 1.25rem);
  border-top: 1px dotted #C0C0C0;
  border-bottom: 1px dotted #C0C0C0;
  padding: clamp(0.3125rem, calc(0.150862069 * 1rem + 0.6896551724vw), 0.625rem) 0;
}
.modal__item dt, .modal__item dd {
  font-size: clamp(1rem, calc(0.9353448276 * 1rem + 0.275862069vw), 1.125rem);
  font-weight: 300;
  line-height: 1.2;
}
.modal__item dt b, .modal__item dd b {
  color: #0C762C;
  font-weight: 500;
}
.modal__list {
  display: grid;
  gap: clamp(0.625rem, calc(0.3017241379 * 1rem + 1.3793103448vw), 1.25rem);
  margin-bottom: clamp(1.25rem, calc(0.6034482759 * 1rem + 2.7586206897vw), 2.5rem);
}
.modal__list li {
  line-height: 1.2;
  padding-left: 0.8em;
  text-indent: -0.8em;
}
.modal__list li::before {
  content: "・";
}
.modal__cooking {
  counter-reset: number 0;
  display: grid;
  gap: clamp(0.9375rem, calc(0.4525862069 * 1rem + 2.0689655172vw), 1.875rem);
  margin-bottom: clamp(0.9375rem, calc(0.4525862069 * 1rem + 2.0689655172vw), 1.875rem);
}
.modal__cooking li {
  line-height: 1.2;
  padding-left: 1.4em;
  text-indent: -1.4em;
}
.modal__cooking li::before {
  counter-increment: number 1;
  content: counter(number) ".";
  color: #0C762C;
  font-size: 160%;
  line-height: 1;
}
.footer {
  color: #fff;
  font-size: clamp(0.875rem, calc(0.8103448276 * 1rem + 0.275862069vw), 1rem);
  text-align: center;
  line-height: 1.4;
  padding: 0 clamp(1.25rem, calc(0.9267241379 * 1rem + 1.3793103448vw), 1.875rem) clamp(1.25rem, calc(0.9267241379 * 1rem + 1.3793103448vw), 1.875rem);
}