@charset "UTF-8";

/* ==========================================
   私たちについて（About）
   XD: 01_TOP_SP の about（375px・グループ h=661）、01_TOP_PC の about（1366px。中身は x=203〜1163 の 960px）
   ========================================== */
.about {
  margin: 0 0 40px;
  padding: 0;
}

.about__inner {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
}

.about__content {
  /* XD SP: 本文の幅 346・高さ 661（画像は上の 2 枚と下の 2 枚） */
  position: relative;
  box-sizing: border-box;
  width: 346px;
  height: 661px;
  margin: 0 auto;
}

.about__img {
  position: absolute;
  display: block;
}

.about__img--1 {
  /* XD SP: ヤギ 63×79 x=19 y=0 */
  top: 0;
  left: 19px;
  width: 63px;
  height: 79px;
  border-radius: 0 0 100px 100px;
  object-fit: contain;
}

.about__img--2 {
  /* XD SP: ミニトマト 57×68 右 28 上 11 */
  top: 11px;
  right: 28px;
  width: 57px;
  height: 68px;
  border-radius: 0 0 90.5px 90.5px;
  object-fit: contain;
}

.about__img--3 {
  /* XD SP: 農家 86×86 左 31 下 27 */
  bottom: 27px;
  left: 31px;
  z-index: 3;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  object-fit: contain;
}

.about__img--4 {
  /* XD SP: 牛 109×113 右 33 下 0 */
  right: 33px;
  bottom: 0;
  z-index: 3;
  width: 109px;
  height: 113px;
  border-radius: 50%;
  object-fit: cover;
}

.about__text-area {
  /* XD SP: ロゴ（x=72.56 w=232 h=40）は画像の下端 79 から 10 下。本文 1 行目のベースラインは y=813 */
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 auto;
  padding-top: 89px;
  text-align: center;
}

.about__logo {
  position: relative;
  left: 1.06px;
  display: block;
  width: 232px;
  height: 40px;
  margin: 0 auto 23px;
  object-fit: contain;
}

.about__text {
  /* XD: YuGo-Bold 16px・行の高さ 32px・#555・中央揃え。2 つの段落の間（ベースライン 56px）は行の高さ 32px + 24px */
  margin: 0;
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 700;
  line-height: 2; /* 32px ÷ 16px */
  color: var(--color-text);
  text-align: center;
}

.about__text-group {
  display: block;
}

.about__text-line {
  display: block;
}

.about__text-break {
  display: block;
  height: 24px;
}

@media (width >= 768px) {
  .about {
    /* XD PC: 画像の上端 y=813（FV の下端 768 から 45） */
    margin: 0;
    padding: 45px 16px 53px;
  }

  .about__inner {
    display: block;
    max-width: 960px;
  }

  .about__content {
    /* XD PC: 中身は 960×703。画像の幅は 960 に対する比で縮め（中間幅は可変）、上端は XD の px のまま */
    width: 100%;
    height: 703px;
  }

  .about__img {
    /* 画像はスクロールで現れる（main.js が .about に is-visible を付ける）。位置は動かさず、濃さだけを変える */
    opacity: 0;
    transition: opacity 0.8s ease-out;
  }

  .about__img--1 {
    /* XD PC: ヤギ 200×252 x=203 y=813（下半分が丸い） */
    top: 0;
    left: 0;
    width: 20.8333%;
    height: auto;
    aspect-ratio: 200 / 252;
    border-radius: 0 0 50% 50% / 0 0 39.68% 39.68%;
  }

  .about__img--2 {
    /* XD PC: ミニトマト 181×217 x=982 y=861 */
    top: 48px;
    right: 0;
    left: auto;
    width: 18.8542%;
    height: auto;
    aspect-ratio: 181 / 217;
    border-radius: 0 0 50% 50% / 0 0 41.71% 41.71%;
  }

  .about__img--3 {
    /* XD PC: 農家 200×199.87 x=312 y=1247（円） */
    z-index: auto;
    inset: 434px auto auto 11.3542%;
    width: 20.8333%;
    height: auto;
    aspect-ratio: 200 / 199.87;
    border-radius: 50%;
  }

  .about__img--4 {
    /* XD PC: 牛 235×269 x=904 y=1247（下半分が丸い） */
    z-index: auto;
    inset: 434px auto auto 73.0208%;
    width: 24.4792%;
    height: auto;
    aspect-ratio: 235 / 269;
    border-radius: 0 0 42.55% 42.55% / 0 0 37.17% 37.17%;
    object-fit: contain;
  }

  .about__text-area {
    /* XD PC: ロゴ y=927.97（本文の上端から 114.97）w=313.77 h=53.89、本文 1 行目のベースライン y=1056（行の上端 1034.5） */
    padding-top: 114.97px;
  }

  .about__logo {
    left: 0;
    width: 313.77px;
    height: 53.89px;
    margin-bottom: 52.53px;
  }

  .about__text-line {
    white-space: nowrap;
  }

  .about__text-break {
    /* XD PC: 2 つの段落のベースラインの間 110px ＝ 3 行 96px + 14px */
    height: 14px;
  }

  .is-visible .about__img {
    opacity: 1;
  }

  /* 指示書：画像を 1 枚ずつ時間差でフェードイン（間隔は指示なし）。1 枚目から 0.3s ずつ遅らせ、最後の 4 枚目も 1.7s で現れ終わる */
  .is-visible .about__img--2 {
    transition-delay: 0.3s;
  }

  .is-visible .about__img--3 {
    transition-delay: 0.6s;
  }

  .is-visible .about__img--4 {
    transition-delay: 0.9s;
  }
}

/* 動きを減らす設定では、画像は時間差なしで即時に現れる（PC の @media より後ろに置いて遅延の規則に勝たせる） */
@media (prefers-reduced-motion: reduce) {
  .about__img,
  .is-visible .about__img--2,
  .is-visible .about__img--3,
  .is-visible .about__img--4 {
    transition: none;
  }
}