/* みつば栽培について 専用CSS。mitsuba-farming/index.html の head でだけ読み込む。Figma: 02_PC_/mitsuba-farming/ / 02_SP_/mitsuba-farming/ */

@layer pages {
  /* ---------- 共通: 写真 + 見出し + 本文の 2 カラム（Figma: Frame 1105 / 1106） ----------
     写真は PC 680×500 で、左側のときはカンバスの左端から 20px はみ出し、右側のときは右端からはみ出す。
     右下にグラデーション（不透明度 50%）の同じ形を 10px ずらして置く。SP は 360×265 で右端に 10px の影ぶんを空ける */
  .p-mitsuba-farming-intro {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--50);
    margin-top: var(--wp--preset--spacing--40);
  }

  .p-mitsuba-farming-intro__image {
    position: relative;
    flex-shrink: 0;
    width: calc(100% - var(--wp--preset--spacing--10));
    aspect-ratio: 680 / 500;
    border-radius: var(--wp--preset--radius--medium); /* SP は 10px（Figma: Rectangle 69） */
    isolation: isolate;
  }

    .p-mitsuba-farming-intro__image img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      border-radius: inherit;
    }

    .p-mitsuba-farming-intro__image::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      content: "";
      background: var(--wp--preset--gradient--primary);
      border-radius: inherit;
      opacity: 0.5;
      translate: var(--wp--preset--spacing--10) var(--wp--preset--spacing--10);
    }

  .p-mitsuba-farming-intro__body {
    min-width: 0;
  }

  .p-mitsuba-farming-intro__lead {
    margin: 0;
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: 700;
    line-height: var(--wp--preset--line-height--lead);
    color: var(--wp--preset--color--primary);
    letter-spacing: var(--wp--preset--letter-spacing--wide);
  }

  .p-mitsuba-farming-intro__text {
    margin: var(--wp--preset--spacing--40) 0 0;
    font-size: var(--wp--preset--font-size--body);
    line-height: var(--wp--preset--line-height--body);
  }

  /* 見出し無しで本文から始まる（Business Inquiries） */
  .p-mitsuba-farming-intro__text--first {
    margin-top: 0;
  }

  /* ---------- Feature 01 / 02 のカード 2 枚 ---------- */
  .p-mitsuba-farming-features {
    display: grid;
    grid-gap: var(--wp--preset--spacing--30);
    gap: var(--wp--preset--spacing--30);
    margin-top: var(--wp--preset--spacing--60);
  }

  /* ---------- Mitsuba ---------- */
  .p-mitsuba-farming-mitsuba {
    padding-top: var(--wp--preset--spacing--40);
    padding-bottom: var(--wp--preset--spacing--120);
    overflow: hidden; /* clip が無い iOS 15 以前の予備 */
    overflow: clip;
    background-color: var(--wp--preset--color--background-soft);
  }

  /* ---------- Hydroponics ---------- */
  .p-mitsuba-farming-hydroponics {
    padding-top: var(--wp--preset--spacing--60);
    padding-bottom: var(--wp--preset--spacing--80);
    overflow: hidden; /* clip が無い iOS 15 以前の予備 */
    overflow: clip;
    background-color: var(--wp--preset--color--background);
  }

  /* ---------- 高水準の設備環境 ---------- */
  .p-mitsuba-farming-equipment {
    padding-top: var(--wp--preset--spacing--80);
    padding-bottom: var(--wp--preset--spacing--80);
    background-color: var(--wp--preset--color--background-soft);
  }

  /* 見出しの両側に点線（Figma: Line 237 / 238。3px 線・5px 間隔） */
  .p-mitsuba-farming-equipment__heading {
    display: flex;
    gap: var(--wp--preset--spacing--20);
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: var(--wp--preset--font-size--lead);
    font-weight: 700;
    line-height: var(--wp--preset--line-height--normal);
    color: var(--wp--preset--color--primary);
    text-align: center;
    letter-spacing: var(--wp--preset--letter-spacing--wide);
    white-space: nowrap; /* 「高水準の設備環境」を折り返さない。両側の線のほうを縮める */
  }

    .p-mitsuba-farming-equipment__heading::before,.p-mitsuba-farming-equipment__heading::after {
      flex: 0 1 70px;
      height: 1px;
      content: "";
      background-image: repeating-linear-gradient(
        90deg,
        var(--wp--preset--color--primary) 0,var(--wp--preset--color--primary) 3px,
        transparent 3px, transparent 8px
      );
    }

@supports (background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%)) {
.p-mitsuba-farming-equipment__heading::before,.p-mitsuba-farming-equipment__heading::after {
      background-image: repeating-linear-gradient(
        90deg,
        var(--wp--preset--color--primary) 0 3px,
        transparent 3px 8px
      );
    }
}

  /* カードは SP 350px（Figma）。両端の余白 25px */
  .p-mitsuba-farming-equipment__list {
    width: min(100%, 350px);
    margin: var(--wp--preset--spacing--40) auto 0;
  }

  /* ---------- Stable Production ---------- */
  .p-mitsuba-farming-stable {
    padding-top: var(--wp--preset--spacing--80);
    padding-bottom: var(--wp--preset--spacing--80);
    overflow: hidden; /* clip が無い iOS 15 以前の予備 */
    overflow: clip;
    background-color: var(--wp--preset--color--background);
  }

  .p-mitsuba-farming-stable .p-mitsuba-farming-intro + .p-mitsuba-farming-intro {
    margin-top: var(--wp--preset--spacing--80);
  }

  /* 1 反当たりの出荷数の棒グラフ（Figma: Frame 1374。PC 580×235 / SP 370×180） */
  .p-mitsuba-farming-chart {
    --bar-unit: 24px; /* 棒の高さの単位（Figma SP: 24 / 47 / 71） */

    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
    margin: var(--wp--preset--spacing--40) 0 0;
    background-color: var(--wp--preset--color--background-soft);
    border-radius: var(--wp--preset--radius--medium);
  }

  .p-mitsuba-farming-chart__title {
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 700;
    line-height: var(--wp--preset--line-height--normal);
    color: var(--wp--preset--color--primary);
    text-align: center;
  }

  .p-mitsuba-farming-chart__graph {
    position: relative;
    width: min(100%, 380px);
    margin: var(--wp--preset--spacing--15) auto 0;
  }

  /* 右上がりの点線の矢印。棒の並び（380×142）に対する位置を % で持つ */
  .p-mitsuba-farming-chart__arrow {
    position: absolute;
    top: 13%;
    left: 13%;
    width: 87%;
    height: auto;
    color: var(--wp--preset--color--primary);
    pointer-events: none;
    opacity: 0.4;
  }

  .p-mitsuba-farming-chart__bars {
    display: flex;
    gap: var(--wp--preset--spacing--30);
    align-items: flex-end;
    margin: 0;
    list-style: none;
  }

  .p-mitsuba-farming-chart__item {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    min-width: 0;
  }

  .p-mitsuba-farming-chart__value {
    font-size: var(--wp--preset--font-size--cta-title);
    font-weight: 700;
    line-height: var(--wp--preset--line-height--normal);
    color: var(--wp--preset--color--primary);
    white-space: nowrap;
  }

  /* 棒。高さは data-level（1〜3）× 単位。色は薄い黄緑 → 黄緑 → 緑（Figma: #c6ed19 / #83ce1a / #22bd61） */
  .p-mitsuba-farming-chart__bar {
    width: 100%;
    height: calc(1 * var(--bar-unit));
    height: calc(var(--level, 1) * var(--bar-unit));
    margin-top: var(--wp--preset--spacing--10);
    background-color: var(--wp--preset--color--primary);
    border-radius: var(--wp--preset--radius--medium) var(--wp--preset--radius--medium) 0 0;
  }

  .p-mitsuba-farming-chart__item[data-level="1"] {
    --level: 1;
  }

    .p-mitsuba-farming-chart__item[data-level="1"] .p-mitsuba-farming-chart__bar {
      background-color: var(--wp--preset--color--chart-light);
    }

  .p-mitsuba-farming-chart__item[data-level="2"] {
    --level: 2;
  }

    .p-mitsuba-farming-chart__item[data-level="2"] .p-mitsuba-farming-chart__bar {
      background-color: var(--wp--preset--color--accent);
    }

  .p-mitsuba-farming-chart__item[data-level="3"] {
    --level: 3;
  }

  .p-mitsuba-farming-chart__year {
    margin-top: var(--wp--preset--spacing--10);
    font-size: var(--wp--preset--font-size--nav);
    font-weight: 500;
    line-height: var(--wp--preset--line-height--normal);
    letter-spacing: var(--wp--preset--letter-spacing--narrow);
    white-space: nowrap;
  }

  /* 年間生産量などの 3 つの数字（Figma: Frame 1279。PC 360×146 × 3 / SP 370×106 縦積み） */
  .p-mitsuba-farming-stats {
    display: grid;
    grid-gap: var(--wp--preset--spacing--20);
    gap: var(--wp--preset--spacing--20);
    margin: var(--wp--preset--spacing--40) 0 0;
  }

  .p-mitsuba-farming-stats__item {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--15);
    align-items: center;
    padding: var(--wp--preset--spacing--25) var(--wp--preset--spacing--20);
    text-align: center;
    background-color: var(--wp--preset--color--background-soft);
    border-radius: var(--wp--preset--radius--medium);
  }

  .p-mitsuba-farming-stats__label {
    margin: 0;
    font-size: var(--wp--preset--font-size--card-sub);
    font-weight: 500;
    line-height: var(--wp--preset--line-height--normal);
  }

  /* グラデーション文字 */
  .p-mitsuba-farming-stats__value {
    margin: 0;
    font-size: var(--wp--preset--font-size--stat);
    font-weight: 700;
    line-height: var(--wp--preset--line-height--normal);
    color: transparent;
    white-space: nowrap;
    background: var(--wp--preset--gradient--primary);
    -webkit-background-clip: text;
            background-clip: text;
  }

  .p-mitsuba-farming-stats__note {
    margin: var(--wp--preset--spacing--10) 0 0;
    font-size: var(--wp--preset--font-size--x-small);
    line-height: var(--wp--preset--line-height--normal);
    text-align: right;
  }

  /* ---------- Business Inquiries ---------- */
  .p-mitsuba-farming-business {
    padding-top: var(--wp--preset--spacing--80);
    padding-bottom: var(--wp--preset--spacing--100);
    overflow: hidden; /* clip が無い iOS 15 以前の予備 */
    overflow: clip;
    background-color: var(--wp--preset--color--background-soft);
  }

  /* ボタンは SP でも 350×80（Figma。--link の SP 300×60 を上書き） */
  .p-mitsuba-farming-business__button {
    margin: var(--wp--preset--spacing--40) 0 0;
    text-align: center;
  }

    .p-mitsuba-farming-business__button .c-button {
      width: 350px;
      height: 80px;
      border-radius: var(--wp--preset--radius--medium);
    }

  /* ---------- Online Store（トップの p-top-store と同じ） ---------- */
  .p-mitsuba-farming-store {
    position: relative;
    padding-top: var(--wp--preset--spacing--60);
    padding-bottom: var(--wp--preset--spacing--60);
    overflow: hidden; /* clip が無い iOS 15 以前の予備 */
    overflow: clip;
    color: var(--wp--preset--color--white);
    text-align: center;

    /* 写真を少し暗くしてぼかす（Figma: Rectangle 169） */
  }
    .p-mitsuba-farming-store::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      content: "";
      background-color: var(--wp--preset--color--overlay);
      -webkit-backdrop-filter: blur(3px);
              backdrop-filter: blur(3px);
    }

  .p-mitsuba-farming-store__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: bottom;
       object-position: bottom;
  }

  .p-mitsuba-farming-store__inner {
    position: relative;
    z-index: 2;
  }

  .p-mitsuba-farming-store__lead {
    margin: var(--wp--preset--spacing--35) 0 0;
    font-size: var(--wp--preset--font-size--store-lead);
    font-weight: 700;
    line-height: var(--wp--preset--line-height--loose);
    letter-spacing: var(--wp--preset--letter-spacing--wide);
    text-shadow: var(--wp--preset--shadow--text);
  }

  .p-mitsuba-farming-store__buttons {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);
    align-items: center;
    margin-top: var(--wp--preset--spacing--40);
  }

  /* ========== PC ========== */
  @media (min-width: 768px) {
    .p-mitsuba-farming-intro {
      margin-top: var(--wp--preset--spacing--80);
    }

    .p-mitsuba-farming-intro__text {
      margin-top: var(--wp--preset--spacing--60);
      line-height: var(--wp--preset--line-height--loose);
    }

    /* グラフが続く方（Stable Production の 1 つめ）は間を 40px に */
    .p-mitsuba-farming-intro__text--tight {
      margin-top: var(--wp--preset--spacing--40);
    }

    .p-mitsuba-farming-intro__text--first {
      margin-top: 0;
    }

    .p-mitsuba-farming-features {
      gap: var(--wp--preset--spacing--40);
      padding-left: var(--wp--preset--spacing--20);
      padding-right: var(--wp--preset--spacing--20);
      margin-top: var(--wp--preset--spacing--100);
    }

    .p-mitsuba-farming-mitsuba {
      padding-top: var(--wp--preset--spacing--75);
      padding-bottom: var(--wp--preset--spacing--100);
    }

    .p-mitsuba-farming-hydroponics {
      padding-top: var(--wp--preset--spacing--100);
      padding-bottom: var(--wp--preset--spacing--100);
    }

    .p-mitsuba-farming-equipment {
      padding-top: var(--wp--preset--spacing--100);
      padding-bottom: var(--wp--preset--spacing--100);
    }

    .p-mitsuba-farming-equipment__heading {
      gap: var(--wp--preset--spacing--40);
    }

      .p-mitsuba-farming-equipment__heading::before,.p-mitsuba-farming-equipment__heading::after {
        flex-basis: 450px;
      }

    .p-mitsuba-farming-equipment__list {
      width: 100%;
      margin-top: var(--wp--preset--spacing--80);
    }

    .p-mitsuba-farming-stable {
      padding-top: var(--wp--preset--spacing--100);
      padding-bottom: var(--wp--preset--spacing--100);
    }

    .p-mitsuba-farming-stable .p-mitsuba-farming-intro + .p-mitsuba-farming-intro {
      margin-top: var(--wp--preset--spacing--100);
    }

    .p-mitsuba-farming-chart {
      --bar-unit: 30px;

      padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--70);
    }

    .p-mitsuba-farming-chart__graph {
      margin-top: var(--wp--preset--spacing--20);
    }

    .p-mitsuba-farming-chart__bars {
      gap: var(--wp--preset--spacing--40);
    }

    .p-mitsuba-farming-stats {
      width: min(100%, 1140px);
      margin: var(--wp--preset--spacing--80) auto 0;
    }

    .p-mitsuba-farming-stats__item {
      gap: var(--wp--preset--spacing--25);
      padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
    }

    .p-mitsuba-farming-stats__note {
      width: min(100%, 1140px);
      margin-left: auto;
      margin-right: auto;
    }

    .p-mitsuba-farming-business {
      padding-top: var(--wp--preset--spacing--100);
      padding-bottom: var(--wp--preset--spacing--100);
    }

    .p-mitsuba-farming-business__button {
      margin-top: var(--wp--preset--spacing--50);
      text-align: center; /* 文章に対して中央（Figma） */
    }

    .p-mitsuba-farming-store {
      padding-top: var(--wp--preset--spacing--100);
      padding-bottom: var(--wp--preset--spacing--100);
    }

    .p-mitsuba-farming-store__bg {
      -o-object-position: center;
         object-position: center;
    }

    .p-mitsuba-farming-store__lead {
      margin-top: var(--wp--preset--spacing--50);
      line-height: 2;
    }

    .p-mitsuba-farming-store__buttons {
      flex-flow: row wrap;
      gap: var(--wp--preset--spacing--60);
      justify-content: center;
      margin-top: var(--wp--preset--spacing--20);
    }
  }

  /* ========== 1200px 以上（2 カラム。768〜1199 は SP と同じ縦積み） ========== */
  @media (min-width: 1200px) {
    .p-mitsuba-farming-intro {
      flex-direction: row;
      gap: var(--wp--preset--spacing--80);
      align-items: center;
    }

    /* 写真は 680px。カンバスの端から 20px はみ出す（container の余白 + 20px ぶん外へ）。影は右下 */
    .p-mitsuba-farming-intro__image {
      border-radius: var(--wp--preset--radius--large);
      width: min(680px, 55%);
      margin-left: calc((var(--wp--preset--layout--container-gutter) + 20px) * -1);
    }

      .p-mitsuba-farming-intro__image::before {
        translate: var(--wp--preset--spacing--10) var(--wp--preset--spacing--10);
      }

    .p-mitsuba-farming-intro__body {
      flex: 1;
    }

    /* 写真が右側。影は左下 */
    .p-mitsuba-farming-intro--reverse .p-mitsuba-farming-intro__image {
      margin-right: calc((var(--wp--preset--layout--container-gutter) + 20px) * -1);
      margin-left: 0;
    }

      .p-mitsuba-farming-intro--reverse .p-mitsuba-farming-intro__image::before {
        translate: calc(var(--wp--preset--spacing--10) * -1) var(--wp--preset--spacing--10);
      }

    /* 3 つの数字を横に（Figma: 360×146 × 3、間 30）。768〜1199 は数字が収まらないので縦積み */
    .p-mitsuba-farming-stats {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--wp--preset--spacing--30);
    }

    /* カード 2 枚を横に。2 枚めは 40px 下げる（Figma: Frame 1067 / 1107） */
    .p-mitsuba-farming-features {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
    }

      .p-mitsuba-farming-features > :nth-child(2) {
        margin-top: var(--wp--preset--spacing--40);
      }
  }
}