/* TOPページ */

/* ---------- 共通パーツ（TOP内） ---------- */
.top-head { display: flex; flex-direction: column; align-items: center; gap: 2.4rem; text-align: center; }
.top-head__en {
  color: var(--orange); font-size: 1.7rem; letter-spacing: 0.51rem; line-height: 3.8rem;
}
.top-head__ja {
  font-family: var(--ff-zen); font-size: 3.6rem; letter-spacing: 1.08rem; line-height: 3.8rem; font-weight: 400;
}
.top-head--shop .top-head__ja { font-family: var(--ff-shippori); }

.top-more {
  display: inline-flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--orange);
  color: var(--orange); font-size: 1.5rem; letter-spacing: 0.15rem; line-height: 3.8rem;
  transition: opacity .3s;
}
.top-more:hover { opacity: .7; }

@media (max-width: 768px) {
  .top-head { gap: 0.4rem; }
  .top-head__en { font-size: 1.2rem; letter-spacing: 0.36rem; }
  .top-head__ja { font-size: 2.2rem; letter-spacing: 0.66rem; line-height: normal; }
  .top-head--shop .top-head__ja { line-height: 3.8rem; }
  .top-more { font-size: 1.4rem; letter-spacing: 0.14rem; line-height: 3.5rem; }
}

/* ---------- MV＋農園紹介 ---------- */
.top-intro { position: relative; isolation: isolate; }
.top-intro__bg {
  position: absolute; z-index: -1; left: 0; right: 0;
  top: 53.75rem; bottom: 60.28rem;
}
.top-intro__bg img { width: 100%; height: 100%; object-fit: cover; }

.top-mv { display: flex; flex-direction: row-reverse; align-items: center; }
.top-mv__img { flex-shrink: 0; width: 124rem; height: 92.7rem; }
.top-mv__img img { width: 100%; height: 100%; object-fit: cover; }
.top-mv__body {
  flex: 1 0 0; display: flex; flex-direction: row-reverse; justify-content: center; align-items: flex-start; gap: 6.4rem;
}
.top-mv__area {
  display: flex; flex-direction: column; align-items: center; gap: 1.6rem; padding: 2rem 0;
  color: var(--orange); font-size: 1.7rem; letter-spacing: 0.4rem; line-height: 1.7rem;
}
.top-mv__area::before { content: ""; width: 0; height: 5.6rem; border-left: 1px solid var(--orange); }
.top-mv__area-text { writing-mode: vertical-rl; }
.top-mv__catch {
  writing-mode: vertical-rl;
  margin: 0 -3.2rem;
  font-family: var(--ff-zen); font-size: 4.8rem; letter-spacing: 1.8rem; line-height: 11.2rem;
}

.top-about { display: flex; flex-direction: column; gap: 8rem; padding-block: 20rem; }
.top-about__inner { display: flex; flex-direction: column; align-items: center; gap: 9.6rem; }
.top-about__title {
  display: flex; flex-direction: column; align-items: center; gap: 1.6rem;
  font-family: var(--ff-zen); font-size: 2.8rem; font-weight: 400; letter-spacing: 0.9rem; line-height: 2.8rem;
}
.top-about__title::before { content: ""; width: 1.2rem; height: 1.2rem; background: var(--orange); }
.top-about__title-text { writing-mode: vertical-rl; }
.top-about__text {
  font-size: 1.5rem; letter-spacing: 0.15rem; line-height: 6rem; text-align: center;
}
.top-about__btn {
  display: flex; align-items: center; justify-content: center;
  height: 8rem; padding: 0 6.1rem; border: 1px solid var(--black);
  font-size: 1.7rem; letter-spacing: 0.17rem; line-height: normal;
  transition: opacity .3s;
}
.top-about__btn:hover { opacity: .7; }
.top-about__landscape img { width: 100%; height: 65.43rem; object-fit: cover; }

@media (max-width: 768px) {
  .top-intro__bg { top: 43.3rem; bottom: 19.3rem; }

  .top-mv { flex-direction: column; align-items: flex-start; gap: 4rem; padding-top: 8rem; }
  .top-mv__img { width: 35.1rem; height: 35.8rem; }
  .top-mv__img img { object-position: 56% 50%; }
  .top-mv__body { flex: none; flex-direction: column; gap: 1.2rem; width: 100%; padding: 0 2.4rem; }
  .top-mv__area {
    flex-direction: row; gap: 1.2rem; padding: 0;
    font-size: 1.4rem; letter-spacing: 0.14rem; line-height: normal;
  }
  .top-mv__area::before { width: 3.2rem; height: 0; border-left: 0; border-top: 1px solid var(--orange); }
  .top-mv__area-text { writing-mode: horizontal-tb; }
  .top-mv__catch {
    writing-mode: horizontal-tb; margin: 0;
    font-size: 2.4rem; letter-spacing: 0.24rem; line-height: 4.8rem;
  }

  .top-about { gap: 5.6rem; padding-block: 8rem; }
  .top-about__inner { gap: 5.6rem; padding: 0 2.4rem; }
  .top-about__title { width: 100%; font-size: 2rem; letter-spacing: 0.6rem; line-height: 3.5rem; }
  .top-about__title::before { width: 1rem; height: 1rem; }
  .top-about__title-text { writing-mode: horizontal-tb; }
  .top-about__text { font-size: 1.4rem; letter-spacing: 0.14rem; line-height: 3.5rem; text-align: left; }
  .top-about__btn { width: 100%; font-size: 1.6rem; letter-spacing: 0.16rem; }
  .top-about__landscape img { height: 28.216rem; }
}

/* ---------- 育てているもの ---------- */
.top-produce { display: flex; flex-direction: column; align-items: center; gap: 12rem; padding: 0 40rem 20rem; }
.top-produce__list { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; }
.top-produce__item { display: flex; flex-direction: column; gap: 3.2rem; width: 52rem; }
.top-produce__img { width: 100%; height: 52rem; }
.top-produce__img img { width: 100%; height: 100%; object-fit: cover; }
.top-produce__item--kaki .top-produce__img img { object-position: 18.6% 50%; }
.top-produce__item--vegetable .top-produce__img img { object-position: 33.3% 50%; }
.top-produce__body { display: flex; flex-direction: column; align-items: flex-start; gap: 3.2rem; }
.top-produce__text { display: flex; flex-direction: column; gap: 2.4rem; width: 100%; }
.top-produce__name { font-size: 2.8rem; font-weight: 400; letter-spacing: 0.28rem; line-height: 3.8rem; }
.top-produce__desc { font-size: 1.5rem; letter-spacing: 0.15rem; line-height: 3.8rem; }
.top-produce__season {
  display: flex; flex-direction: column; gap: 0.4rem; width: 100%;
  padding: 2.4rem 4rem; border: 1px solid var(--beige);
  font-size: 1.5rem; letter-spacing: 0.15rem; line-height: 3.8rem;
}
.top-produce__season-row { display: flex; justify-content: space-between; gap: 1.6rem; }
.top-produce__season dd { text-align: right; }

@media (max-width: 768px) {
  .top-produce { gap: 6.4rem; padding: 0 2.4rem 8rem; }
  .top-produce__list { flex-direction: column; gap: 5.6rem; }
  .top-produce__item { gap: 2.4rem; width: 100%; }
  .top-produce__img { height: 24rem; }
  .top-produce__item--kaki .top-produce__img img,
  .top-produce__item--vegetable .top-produce__img img { object-position: 50% 50%; }
  .top-produce__body { align-items: center; gap: 2.4rem; }
  .top-produce__text { gap: 0.4rem; }
  .top-produce__name { font-size: 2rem; letter-spacing: 0.2rem; }
  .top-produce__desc { font-size: 1.4rem; letter-spacing: 0.14rem; line-height: 3.5rem; }
  .top-produce__season { padding: 1.6rem 2.4rem; font-size: 1.4rem; letter-spacing: 0.14rem; }
  .top-produce__season--multi { gap: 1.6rem; font-size: 1.5rem; letter-spacing: 0.15rem; }
}

/* ---------- 会社概要 ---------- */
.top-company {
  position: relative;
  display: flex; justify-content: flex-end; align-items: flex-start; gap: 18.2rem;
  padding-bottom: 20rem;
}
.top-company__side { display: flex; flex-direction: column; align-items: flex-start; gap: 12rem; width: 9.8rem; }
.top-company__head { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: flex-start; gap: 2.4rem; }
.top-company__ja {
  writing-mode: vertical-rl;
  font-size: 3.6rem; font-weight: 400; letter-spacing: 1.2rem; line-height: 3.6rem;
}
.top-company__en {
  writing-mode: vertical-rl;
  height: 13.3rem; padding: 1.2rem 0; text-align: center;
  color: var(--orange); font-size: 1.7rem; letter-spacing: 0.51rem; line-height: 3.8rem;
}
.top-company__img { flex-shrink: 0; width: 124rem; height: 56rem; }
.top-company__img img { width: 100%; height: 100%; object-fit: cover; }
.top-company__box {
  position: absolute; left: 40rem; bottom: 0.932rem;
  width: 47.04rem; height: 28.3rem; object-fit: cover;
}

@media (max-width: 768px) {
  .top-company { flex-direction: column; align-items: flex-end; gap: 2.4rem; padding-bottom: 8rem; }
  .top-company__side { display: contents; }
  .top-company__head {
    order: 1; flex-direction: column; align-items: flex-start; gap: 0.4rem;
    width: 100%; padding-left: 2.4rem;
  }
  .top-company__en {
    writing-mode: horizontal-tb; height: auto; padding: 0; text-align: left;
    font-size: 1.2rem; letter-spacing: 0.36rem;
  }
  .top-company__ja {
    writing-mode: horizontal-tb;
    font-family: var(--ff-zen); font-size: 2.2rem; letter-spacing: 0.66rem; line-height: normal;
  }
  .top-company__img { order: 2; width: 100%; height: 32rem; padding-left: 2.4rem; }
  .top-company__more { order: 3; padding-right: 2.4rem; }
  .top-company__box { left: 1.1rem; bottom: 7.916rem; width: 17.6rem; height: 10.6rem; }
}

/* ---------- Shop（EC未完時は [data-ec-block] ごと非表示にできる） ---------- */
.top-shop { position: relative; padding: 20rem 40rem; }
.top-shop__box {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; gap: 5.6rem;
  padding: 16rem 0;
}
.top-shop__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.top-shop__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 0 50%; }
.top-shop__content { display: flex; flex-direction: column; align-items: center; gap: 6.4rem; width: 100%; text-align: center; }
.top-shop__text { font-size: 1.5rem; letter-spacing: 0.15rem; line-height: 3.8rem; }
.top-shop__btn {
  display: flex; align-items: center; justify-content: center;
  height: 7.9rem; padding: 0 6.1rem; background: var(--orange); color: #fff;
  font-size: 1.7rem; font-weight: 500; letter-spacing: 0.51rem; line-height: normal;
  transition: opacity .3s;
}
.top-shop__btn:hover { opacity: .8; }
.top-shop__zaru {
  position: absolute; right: 23.3rem; bottom: 11.932rem;
  width: 41rem; height: 24rem; object-fit: cover;
}

@media (max-width: 768px) {
  .top-shop { padding: 0 2.4rem 12.2rem; }
  .top-shop__box { gap: 3.2rem; padding: 8rem 2.4rem; }
  .top-shop__content { gap: 3.2rem; }
  .top-shop__text { font-size: 1.4rem; letter-spacing: 0.14rem; }
  .top-shop__btn { width: 100%; height: 7.7rem; padding: 0 1.6rem; font-size: 1.6rem; letter-spacing: 0.48rem; white-space: nowrap; }
  .top-shop__zaru { right: 1.3rem; bottom: 8.016rem; width: 14.5rem; height: 8.5rem; }
}