/* ==========================================================================
   about.css
   農園について（about.php）専用スタイル
   ========================================================================== */

/* ==========================================================================
   p-pagetop（products.php と同じ：帯の画像を変え、下の社長ごあいさつのピンク地と地続きにする）
   css/products.css の .p-pagetop / .p-pagetop__slide と同じ指定
   ========================================================================== */
.p-pagetop {
  margin-bottom: 0;
}

.p-pagetop__slide {
  --slide-gap: 0px;
  bottom: 0;
  height: calc(var(--slide-h) + var(--slide-gap));
  background-image: url("../img/sub-photo/page-top-slide.jpg");
  background-position-y: 0;
  background-size: var(--slide-w) calc(var(--slide-h) / 2);
}

.p-pagetop__slide::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--slide-h) / 2 - 1px);
  bottom: 0;
  background: #fbf1f2;
}

@media screen and (max-width: 1024px) {
  .p-pagetop__slide {
    --slide-gap: 20px;
  }
}

/* スマホ：帯の高さ = 右側写真の高さの半分（写真は about-pagetop.png：1000 × 667） */
@media screen and (max-width: 767px) {
  .p-pagetop {
    container-type: inline-size;
  }

  .p-pagetop__slide {
    height: calc(min((100cqw - 32px) * 0.92, 480px) * 667 / 1000 / 2);
  }
}

/* ==========================================================================
   p-greeting（社長ごあいさつ）
   ピンク地。左：社長の写真＋左下に重ねた二十日大根の写真 /
   右：英語ロゴ＋見出し、その下に方眼＋紙テープの手紙カード（products.php の .p-super__card と同じ）
   ========================================================================== */
.p-greeting {
  overflow: hidden;
  position: relative;
  /* 下端の白い曲線（.p-greeting__curve）に小鳥・手紙カードの下端が重なるよう、下余白は小さめ */
  padding: 60px 0 50px;
  background: #fbf1f2;
}

/* 右上の白い大根イラスト */
.p-greeting__dec {
  position: absolute;
  top: -20px;
  right: -3vw;
  z-index: 0;
  width: min(28vw, 420px);
  opacity: 0.8;
  pointer-events: none;
}

.p-greeting__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: start;
  gap: 50px;
}

/* 左の写真：角丸の四角＋内側に白い点線 */
.p-greeting__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  margin-top: 40px;
}

/* 写真2枚の枠。下の余白に、左下へ重ねる小さい写真がおさまる */
.p-greeting__photos {
  position: relative;
  padding-bottom: 22%;
}

.p-greeting__photo,
.p-greeting__photo-sub {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 16px 30px rgba(140, 19, 19, 0.12);
}

.p-greeting__photo::after,
.p-greeting__photo-sub::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px dashed rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  pointer-events: none;
}

.p-greeting__photo img,
.p-greeting__photo-sub img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.p-greeting__photo img {
  aspect-ratio: 1 / 1;
}

/* 左下に少しはみ出して重ねる小さい写真 */
.p-greeting__photo-sub {
  position: absolute;
  /* 主写真から左へ10%はみ出す。ただし画面の左端から15px以上はなす
     （sub-inner の外側の余白 (100vw - 1200px) / 2 より左へは出さない。100vw はスクロールバー幅ぶん大きいので余裕がある） */
  left: max(-10%, calc(-1 * max(0px, (100vw - var(--sub-inner)) / 2)));
  bottom: 0;
  z-index: 2;
  width: 58%;
  box-shadow:
    0 0 0 6px #fbf1f2,
    0 16px 30px rgba(140, 19, 19, 0.15);
}

.p-greeting__photo-sub img {
  aspect-ratio: 1433 / 1098;
}

/* 右：英語ロゴ＋見出し（.c-sub-heading を左寄せで使う） */
.p-greeting__heading {
  align-items: flex-start;
  margin-bottom: 40px;
  padding-left: 6%;
  text-align: left;
}

.p-greeting__heading .c-sub-heading__en {
  margin-left: -30px;
}

/* 手紙カード（.p-super__card と同じ方眼・点線・紙テープ） */
.p-greeting__letter {
  position: relative;
  padding: 64px 56px 48px;
  border-radius: 24px;
  /* 白地に、小さく淡い方眼（縦線＋横線）を敷く */
  background-color: #fff;
  background-image: linear-gradient(rgba(200, 39, 46, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(200, 39, 46, 0.07) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: center;
  outline: 2px dashed var(--color-main);
  outline-offset: -14px;
  box-shadow:
    0 0 0 8px #fff7f7,
    0 10px 40px rgba(232, 150, 156, 0.25);
}

/* 上の左右の角に貼った紙テープ（.p-super__tape と同じ柄） */
.p-greeting__tape {
  position: absolute;
  top: 18px;
  z-index: 2;
  width: 130px;
  height: 34px;
  background: repeating-linear-gradient(45deg, rgba(214, 164, 76, 0.85) 0 10px, rgba(232, 199, 138, 0.85) 10px 20px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

.p-greeting__tape--l {
  left: -30px;
  transform: rotate(-38deg);
}

.p-greeting__tape--r {
  right: -30px;
  transform: rotate(38deg);
  background: repeating-linear-gradient(45deg, rgba(200, 39, 46, 0.75) 0 10px, rgba(232, 120, 125, 0.75) 10px 20px);
}

/* キャッチコピー：黄色のマーカー線 */
.p-greeting__catch {
  margin-bottom: 30px;
  /* 手書き風（Google Fonts の Zen Kurenaido） */
  font-family: "Zen Kurenaido", var(--font-round);
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: #8c1313;
}

/* 螢光ペンのアニメーション（products.php .p-super__ttl と同じ作り）
   background-size の幅を 0 → 100% に伸ばして、左から右へ線を引く。
   引く順番は js/sub.js（.js-marker）が管理する：ページの上から順に1本ずつ、
   前の線を引き終えてから、次の線が画面に入っていれば .is-drawn を付ける。
   本文の <mark> は box-decoration-break を slice（初期値）のままにしているので、
   2行にまたがっても「1行目を左から右 → 2行目を左から右」の順に引かれる */
.p-greeting__catch span {
  background: linear-gradient(transparent 60%, #ffe066 60%, #ffe066 92%, transparent 92%) left bottom / 0% 100% no-repeat;
  transition: background-size 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.p-greeting__mark {
  padding: 0 2px;
  background: linear-gradient(transparent 62%, #fbf1f2 62%, #fbf1f2 94%, transparent 94%) left bottom / 0% 100% no-repeat;
  color: inherit;
  font-weight: 700;
  transition: background-size 1s cubic-bezier(0.65, 0, 0.35, 1);
}

.p-greeting__catch span.is-drawn,
.p-greeting__mark.is-drawn {
  background-size: 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
  .p-greeting__catch span,
  .p-greeting__mark {
    background-size: 100% 100%;
    transition: none;
  }
}

.p-greeting__body {
  display: flex;
  flex-direction: column;
  gap: 1em;
  line-height: 2.1;
  letter-spacing: 0.04em;
}

.p-greeting__sign {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  margin-top: 30px;
  /* 手書き風（Google Fonts の Zen Kurenaido）。会社名・名前とも同じ大きさで右寄せ */
  font-family: "Zen Kurenaido", var(--font-round);
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: #8c1313;
}

.p-greeting__sign span,
.p-greeting__sign strong {
  font-weight: 400;
}

/* 小鳥のふきだし（index.php #feature .p-feature__talk と同じ作り）
   白いシェイプ（suika-wh.png）を後ろに敷き、鳥＋文字の画像をゆらゆら揺らす。
   トップの .fadeInTrigger は jQuery（animation.js）が必要でこのページでは読み込まないため、
   .js-inview（main.js）で画面に入ったら同じ fadeInAnime（animation.css）を再生する */
.p-greeting__talk {
  position: relative;
  z-index: 3;
  width: 74%;
  /* 左列の下端（手紙カードの下端の高さ）近くまで下げ、白い曲線に足元が重なるようにする */
  margin: auto 0 4vw 18%;
  padding-top: 50px;
  opacity: 0;
}

.p-greeting__talk.is-inview {
  animation: fadeInAnime 1s forwards;
}

.p-greeting__talk-img {
  display: block;
  width: 100%;
}

/* 回転の軸は鳥の脚元あたり */
.p-greeting__talk-img {
  position: relative;
  height: auto;
  transform-origin: 20% 86%;
  animation: p-greeting-bird-sway 3.2s ease-in-out infinite;
}

@keyframes p-greeting-bird-sway {
  0%,
  100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg);
  }
}

/* 下端の白い曲線（products.php .p-season__curve と同じ） */
.p-greeting__curve {
  position: absolute;
  left: 0;
  bottom: -1px;
  z-index: 0;
  display: block;
  width: 100%;
  /* 画像の比率（2000 × 300）のまま。左側の丘が小鳥・手紙カードの下端に重なる */
  height: auto;
  pointer-events: none;
}

/* 左下の白い西瓜イラスト（.p-greeting__talk から独立）。画面幅に合わせて拡大縮小する。
   重なり順：曲線（z-index 0）より上、写真・小鳥・手紙カード（.p-greeting__inner の z-index 2）より下 */
.p-greeting__suika {
  position: absolute;
  left: -2vw;
  bottom: 10vw;
  z-index: 1;
  width: clamp(180px, 32vw, 560px);
  opacity: 0.9;
  pointer-events: none;
}

/* ==========================================================================
   p-company（企業情報）
   ========================================================================== */
/* 淡いピンクのパネルの内側に、赤い点線の角丸枠。
   左右2列（左：会社名・代表・設立・事業内容 / 右：所在地・電話番号・Instagram） */
/* products.php .p-super__card と同じ：白地に淡い方眼＋内側の赤い点線＋上の左右に紙テープ */
.p-company__table {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 50px 60px 40px;
  border-radius: 60px;
  background-color: #fff;
  background-image: linear-gradient(rgba(200, 39, 46, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(200, 39, 46, 0.07) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: center;
  outline: 2px dashed var(--color-main);
  outline-offset: -18px;
  box-shadow:
    0 0 0 8px #fff7f7,
    0 10px 40px rgba(232, 150, 156, 0.25);
}

.p-company__tape {
  position: absolute;
  top: 18px;
  z-index: 2;
  width: 130px;
  height: 34px;
  background: repeating-linear-gradient(45deg, rgba(214, 164, 76, 0.85) 0 10px, rgba(232, 199, 138, 0.85) 10px 20px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

.p-company__tape--l {
  left: -30px;
  transform: rotate(-38deg);
}

.p-company__tape--r {
  right: -30px;
  transform: rotate(38deg);
  background: repeating-linear-gradient(45deg, rgba(200, 39, 46, 0.75) 0 10px, rgba(232, 120, 125, 0.75) 10px 20px);
}

/* 2列のグリッド。横に並ぶ2項目は同じ行になり、高さがそろう（fukkura713.com のアクセス表と同じ考え方）。
   区切り線は項目ごとに引き、左右の線のあいだにはすき間をあける */
.p-company__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0;
}

/* 事業内容は2列ぶんの幅を使う */
.p-company__row--full {
  grid-column: 1 / -1;
}

.p-company__row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 20px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 2px dotted var(--color-pink-deep);
}

/* 最後の行（事業内容）は区切り線なし */
.p-company__row:last-child {
  border-bottom: 0;
}

.p-company__row dt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  padding: 5px 16px;
  border-radius: 30px;
  background: #fbe3e5;
  color: var(--color-main);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}

.p-company__row dd {
  padding-top: 4px;
  font-weight: 500;
  line-height: 1.8;
}

.p-company__row dd small {
  margin-left: 6px;
  color: #999;
  font-size: 0.8rem;
}

.p-company__row dd a:hover {
  border-bottom: 1px dotted var(--color-main);
  color: var(--color-main);
}

/* 事業内容：番号の丸＋見出し、説明（小さい字）は見出しのうしろに続ける */
.p-company__biz {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
}

.p-company__biz li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.p-company__biz span {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-sun);
  color: #8c1313;
  font-size: 0.75rem;
  font-weight: 900;
  transform: translateY(-2px);
}

.p-company__biz p {
  font-weight: 700;
  line-height: 1.7;
}

.p-company__biz small {
  margin-left: 10px !important;
  font-weight: 500;
  color: #8c5a5a !important;
}

/* ==========================================================================
   p-gallery（農園ギャラリー）
   ポラロイド写真をコルクボードに留めたような、少し傾いたカード。
   ホバーでまっすぐに戻って持ち上がる。
   ========================================================================== */

#gallery {
  padding-top: 20px;
  padding-bottom: 80px;
}

.p-gallery__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 44px 32px;
  list-style: none;
}

.p-gallery__item:nth-child(4n + 1) {
  --tilt: -3deg;
}
.p-gallery__item:nth-child(4n + 2) {
  --tilt: 2deg;
}
.p-gallery__item:nth-child(4n + 3) {
  --tilt: -1.5deg;
}
.p-gallery__item:nth-child(4n + 4) {
  --tilt: 3deg;
}

.p-gallery__thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 12px 12px 16px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(140, 19, 19, 0.12);
  transform: rotate(var(--tilt, 0deg));
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s ease;
  cursor: zoom-in;
  text-align: center;
}

/* 上部に留めた丸いピン */
.p-gallery__thumb::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  z-index: 2;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff7b80, var(--color-main));
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2);
}

.p-gallery__item:nth-child(even) .p-gallery__thumb::before {
  background: radial-gradient(circle at 35% 35%, #fff3b8, var(--color-sun));
}

.p-gallery__thumb:hover,
.p-gallery__thumb:focus-visible {
  transform: rotate(0deg) translateY(-8px) scale(1.03);
  box-shadow: 0 22px 36px rgba(140, 19, 19, 0.2);
  outline: none;
}

.p-gallery__img {
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  background: var(--color-pink);
}

.p-gallery__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.p-gallery__thumb:hover .p-gallery__img img {
  transform: scale(1.08);
}

.p-gallery__label {
  font-family: var(--font-round);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-gallery__zoom {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-sun);
  color: #8c1313;
  box-shadow: 0 0 0 3px #fff;
  transform: scale(0);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.p-gallery__thumb:hover .p-gallery__zoom,
.p-gallery__thumb:focus-visible .p-gallery__zoom {
  transform: scale(1);
}

.p-gallery__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 520px;
  margin: 0 auto;
  padding: 50px 30px;
  border: 2px dashed var(--color-main);
  border-radius: 40px;
  background: var(--color-cream);
  text-align: center;
  font-family: var(--font-round);
  font-weight: 700;
  line-height: 1.9;
}

.p-gallery__empty img {
  width: 90px;
  border-radius: 50%;
  animation: c-float 4s ease-in-out infinite;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media screen and (max-width: 1100px) {
  .p-gallery__list {
    grid-template-columns: repeat(3, 1fr);
  }

  .p-greeting__letter {
    padding: 56px 40px 40px;
  }

  .p-company__table {
    padding: 46px 40px 34px;
  }

  .p-company__list {
    column-gap: 28px;
  }
}

@media screen and (max-width: 1000px) {
  /* 農園ギャラリーの写真は少し小さくして、まわりに余白をつくる（中央寄せ） */
  .p-gallery__thumb {
    width: 90%;
    margin: 0 auto;
  }

  .p-greeting {
    /* 下端の白い曲線に下の要素が重なるよう、下余白は小さめ */
    padding: 40px 0 24px;
  }

  .p-greeting__dec {
    width: min(40vw, 300px);
  }

  /* 縦並び（順番を入れ替え）：見出し → 手紙 → 写真 → 小鳥 */
  .p-greeting__inner {
    display: flex;
    flex-direction: column-reverse;
    gap: 40px;
  }

  .p-greeting__visual {
    width: min(76%, 440px);
    margin: 0 auto;
  }

  /* 縦並びでは写真が中央にあるので、左へのはみ出しは「画面の左端から24px」までにおさえる
     （(100vw - 100%) / 2 が画面の左端から写真までの距離） */
  .p-greeting__photo-sub {
    left: max(-10%, calc(24px - (100vw - 100%) / 2));
    bottom: -10%;
  }

  .p-greeting__heading {
    align-items: center;
    margin-bottom: 36px;
    padding-left: 0;
    text-align: center;
  }

  .p-greeting__catch {
    margin-bottom: 30px;
    font-family: "Zen Kurenaido", var(--font-round);
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.02em;
  }

  .p-greeting__talk {
    width: min(70%, 380px);
    margin: 40px auto 0;
    padding-top: 0;
  }
}

@media screen and (max-width: 900px) {
  /* セクションの上下余白を詰める（このページだけ） */
  .c-sec {
    padding: 30px 0;
  }

  #gallery {
    padding-top: 40px;
  }

  /* .c-sec より後に書いて、社長ごあいさつの余白はこちらを優先（下は曲線と重ねるため 24px のまま） */
  .p-greeting {
    padding-top: 0;
    padding-bottom: 24px;
  }

  /* 右上の白い大根イラストは、狭い画面では見出しと重なるので非表示 */
  .p-greeting__dec {
    display: none;
  }

  /* 小さい写真は主写真の右下へ（右へ10%はみ出す） */
  .p-greeting__photo-sub {
    left: auto;
    right: -10%;
  }

  .p-greeting__suika {
    left: -10vw;
    bottom: 13vw;
    width: 50vw;
    min-width: 150px;
  }

  /* 企業情報：900px以下は1列（左列の下に右列が続く） */
  .p-company__list {
    grid-template-columns: 1fr;
  }

  .p-gallery__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
}

@media screen and (max-width: 600px) {
  .p-greeting__visual {
    width: 84%;
  }

  .p-greeting__photo::after,
  .p-greeting__photo-sub::after {
    inset: 8px;
  }

  .p-greeting__letter {
    padding: 50px 22px 34px;
    border-radius: 20px;
    outline-offset: -10px;
    box-shadow:
      0 0 0 6px #fff7f7,
      0 8px 28px rgba(232, 150, 156, 0.25);
  }

  .p-greeting__tape {
    top: 12px;
    width: 90px;
    height: 26px;
  }

  .p-greeting__tape--l {
    left: -22px;
  }

  .p-greeting__tape--r {
    right: -22px;
  }

  .p-company__table {
    padding: 40px 24px 26px;
    border-radius: 36px;
    outline-offset: -10px;
    box-shadow:
      0 0 0 6px #fff7f7,
      0 8px 28px rgba(232, 150, 156, 0.25);
  }

  .p-company__tape {
    top: 12px;
    width: 90px;
    height: 26px;
  }

  .p-company__tape--l {
    left: -22px;
  }

  .p-company__tape--r {
    right: -22px;
  }

  .p-company__row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 0;
  }

  /* 説明の小さい字は、狭い画面では見出しの下へ */
  .p-company__biz small {
    display: block;
    margin-left: 0 !important;
  }

  .p-gallery__list {
    gap: 28px 16px;
  }

  .p-gallery__thumb {
    padding: 8px 8px 12px;
  }

  .p-gallery__label {
    font-size: 0.8rem;
  }

  .p-gallery__zoom {
    transform: scale(0.8);
    width: 32px;
    height: 32px;
  }
}

/* 360px未満：社長ごあいさつの見出しは改行（br）をやめ、2つの文を続けて流し込む */
@media screen and (max-width: 359px) {
  .p-greeting__catch br {
    display: none;
  }
}