/* 会社情報ページ専用CSS。company/index.html の head でだけ読み込む。Figma: 04_PC_/company/ / 04_SP_/company/ */
@layer pages {
  /* ---------- Philosophy ---------- */
  .p-company-philosophy {
    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-soft);
  }

  /* 経営理念 3 つの白いカード（Figma: Frame 1282） */
  .p-company-philosophy__card {
    width: min(100%, var(--wp--preset--layout--content-max));
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
    margin: var(--wp--preset--spacing--40) auto 0;
    background-color: var(--wp--preset--color--white);
    border-radius: var(--wp--preset--radius--large);
  }

  .p-company-philosophy__list {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--15); /* 行送り約 55px（Figma） */
    width: min(100%, 740px);
    margin-left: auto;
    margin-right: auto;
    counter-reset: philosophy;
  }

  /* 番号ごとグラデーション文字（Figma: 20px / PC 25px、行 35px、list-decimal） */
  .p-company-philosophy__item {
    padding-left: 1.5em;
    font-size: var(--wp--preset--font-size--large);
    font-weight: 700;
    line-height: 1.75;
    color: transparent;
    text-indent: -1.5em;
    counter-increment: philosophy;
    background: var(--wp--preset--gradient--primary);
    -webkit-background-clip: text;
            background-clip: text;
  }

    .p-company-philosophy__item::before {
      display: inline-block;
      width: 1.5em;
      text-indent: 0;
      content: counter(philosophy) ".";
    }

  .p-company-philosophy__intro {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--50);
    margin-top: var(--wp--preset--spacing--60);
  }

  /* 写真。右下にグラデーションの同じ形をずらして置く（Figma: Rectangle 71、不透明度 50%） */
  .p-company-philosophy__image {
    position: relative;
    aspect-ratio: 680 / 500;
    border-radius: var(--wp--preset--radius--medium);
    isolation: isolate;
  }

    .p-company-philosophy__image img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      -o-object-position: bottom;
         object-position: bottom;
      border-radius: inherit;
    }

    .p-company-philosophy__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: 10px 10px;
    }

  .p-company-philosophy__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-company-philosophy__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);
    letter-spacing: var(--wp--preset--letter-spacing--narrow);
  }

  /* ---------- Massage（代表挨拶） ---------- */
  .p-company-message {
    padding-top: var(--wp--preset--spacing--80);
    padding-bottom: var(--wp--preset--spacing--80);
    background-color: var(--wp--preset--color--background-soft);
  }

  /* 白いカード（Figma: Frame 1282 / Frame 1283）。SP は 40/20、PC は 80/100 */
  .p-company-message__card {
    width: min(100%, var(--wp--preset--layout--content-max));
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
    margin: var(--wp--preset--spacing--40) auto 0;
    background-color: var(--wp--preset--color--white);
    border-radius: var(--wp--preset--radius--large);
  }

    .p-company-message__card + .p-company-message__card {
      margin-top: var(--wp--preset--spacing--60);
    }

  .p-company-message__head {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
    align-items: center;
  }

  .p-company-message__photo {
    flex-shrink: 0;
    width: 200px;
    height: 200px;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: var(--wp--preset--radius--pill);
  }

  /* Figma: SP 22px / PC 28px（欲しいトークン: message-lead）。line 40 / 50 */
  .p-company-message__lead {
    width: 100%;
    margin: 0;
    font-size: var(--wp--preset--font-size--message-lead);
    font-weight: 700;
    line-height: 1.8;
    color: var(--wp--preset--color--primary);
    text-align: left; /* SP も左揃え（本人指示） */
    letter-spacing: var(--wp--preset--letter-spacing--wide);
  }

  /* 本文（Figma: 15px、行 28 / PC 30。空行で段落を分ける） */
  .p-company-message__text {
    margin-top: var(--wp--preset--spacing--40);
    font-size: var(--wp--preset--font-size--nav);
    line-height: var(--wp--preset--line-height--body);
  }

    .p-company-message__text p {
      margin: 0;
    }

    /* 空行 1 つぶん（Figma: 行 28 / PC 30） */
    .p-company-message__text p + p,.p-company-message__text div + p,.p-company-message__text p + div {
      margin-top: var(--wp--preset--spacing--30);
    }

    .p-company-message__text strong {
      font-weight: 700;
    }

  /* 続きの本文。grid の行を 1fr ↔ 0fr にして高さを動かす（JS が is-collapsed を付ける。PC は __more--pc まで見せる）
     上の余白は内側の先頭段落に持たせ、畳んだときに余白が残らないようにする */
  .p-company-message__more {
    display: grid;
    grid-template-rows: 1fr;
    margin-top: 0;
  }

  .p-company-message__more-inner {
    min-height: 0;
    overflow: hidden;
  }

    .p-company-message__more-inner > p:first-child {
      margin-top: var(--wp--preset--spacing--30);
    }

  .p-company-message__text.is-collapsed .p-company-message__more {
    grid-template-rows: 0fr;
    visibility: hidden;
  }

  /* 読み込み直後の畳み込みは動かさず、ボタンを押したときだけ動かす（JS が is-animated を付ける） */
  @media (prefers-reduced-motion: no-preference) {
    .p-company-message__text.is-animated .p-company-message__more {
      transition:
        grid-template-rows 0.6s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.6s;
    }
  }

  .p-company-message__sign {
    margin-top: var(--wp--preset--spacing--30);
  }

  .p-company-message__button {
    margin: var(--wp--preset--spacing--50) 0 0;
    text-align: center;
  }

  /* 「+」（Figma: Button_大 green_plus）。開いているときは 45° 回して「×」にする */
  [aria-expanded="true"] .p-company-message__arrow {
    transform: translateY(-50%) rotate(45deg);
  }

  /* ---------- Company Profile ---------- */
  .p-company-profile {
    padding-top: var(--wp--preset--spacing--80);
    padding-bottom: var(--wp--preset--spacing--80);
    background-color: var(--wp--preset--color--background);
  }

  .p-company-profile__intro {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
    margin-top: var(--wp--preset--spacing--40);
  }

  .p-company-profile__image {
    width: 100%;
    aspect-ratio: 370 / 246;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: var(--wp--preset--radius--medium); /* SP は 10px */
  }

  /* wp: 会社情報の表（inc/contact-site-info.php） */
  .p-company-profile__table {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--10);
    width: 100%;
    margin: 0;
  }

  .p-company-profile__row {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--10); /* Figma SP は項目名と内容の間 20px。行間ぶん（上下 5px 強）を差し引く */
    padding-bottom: var(--wp--preset--spacing--10);
    border-bottom: 1px solid var(--wp--preset--color--border);
  }

  .p-company-profile__label {
    flex-shrink: 0;
    width: 85px;
    margin: 0;
    font-size: var(--wp--preset--font-size--label);
    font-weight: 400; /* 項目名はレギュラー（reset の dt が bold なので戻す。2026-10-29 本人指示） */
    line-height: 1.875;
    letter-spacing: var(--wp--preset--letter-spacing--wide);
  }

  .p-company-profile__value {
    margin: 0;
    font-size: var(--wp--preset--font-size--label);
    line-height: 1.875;
  }

    .p-company-profile__value a {
      -webkit-text-decoration: none;
      text-decoration: none;
    }

    .p-company-profile__value a[target="_blank"] {
      color: var(--wp--preset--color--primary);
      -webkit-text-decoration: underline;
      text-decoration: underline;
      text-underline-offset: 0.15em;
    }

  /* Google マップ（Figma: Frame 1284。SP 370×400 角丸 10 / PC 1240×500 角丸 20） */
  .p-company-profile__map {
    margin-top: var(--wp--preset--spacing--60);
    overflow: hidden; /* clip が無い iOS 15 以前の予備 */
    overflow: clip;
    border-radius: var(--wp--preset--radius--medium);
  }

  .p-company-profile__map-frame {
    display: block;
    width: 100%;
    height: 400px;
    border: 0;
  }

  /* ---------- Farm Visit（トップの Offer と同じ組み） ---------- */
  .p-company-farm {
    position: relative;
    padding-top: var(--wp--preset--spacing--80);
    padding-bottom: var(--wp--preset--spacing--80);
    overflow: hidden; /* clip が無い iOS 15 以前の予備 */
    overflow: clip;
    color: var(--wp--preset--color--white);
    text-align: center;
    background-color: var(--wp--preset--color--primary);
  }

  /* SP は幅いっぱい、PC は 1000px 角丸 */
  .p-company-farm__main {
    position: relative;
    margin-left: calc(var(--wp--preset--layout--container-gutter) * -1);
    margin-right: calc(var(--wp--preset--layout--container-gutter) * -1);
    margin-top: var(--wp--preset--spacing--40);
  }

  .p-company-farm__main-image {
    display: block;
    width: 100%;
    aspect-ratio: 400 / 300;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: bottom;
       object-position: bottom;
    border-radius: inherit;
  }

  /* 手書きの「Come and See」（Figma: 3f45e982… 1、-13.14° 回転） */
  .p-company-farm__hand {
    position: absolute;
    top: 224px;
    left: 6px;
    width: 238px;
    pointer-events: none;
    rotate: -13.14deg;
  }

  .p-company-farm__lead {
    margin: var(--wp--preset--spacing--40) 0 0;
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: 900;
    line-height: var(--wp--preset--line-height--lead);
    letter-spacing: var(--wp--preset--letter-spacing--x-wide);
  }

  .p-company-farm__text {
    margin: var(--wp--preset--spacing--40) 0 0;
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 500;
    line-height: var(--wp--preset--line-height--body);
  }

  .p-company-farm__button {
    margin: var(--wp--preset--spacing--60) 0 0;
  }

  /* ---------- Staff + Recruit ---------- */
  .p-company-staff {
    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);
  }

  .p-company-staff__intro {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--wp--preset--spacing--50);
    margin-top: var(--wp--preset--spacing--40);
  }

  /* 写真。SP だけ右下にグラデーションの影（Figma: Rectangle 71） */
  .p-company-staff__image {
    position: relative;
    aspect-ratio: 680 / 500;
    border-radius: var(--wp--preset--radius--medium);
    isolation: isolate;
  }

    .p-company-staff__image img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      -o-object-position: bottom;
         object-position: bottom;
      border-radius: inherit;
    }

    .p-company-staff__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: 10px 10px;
    }

  .p-company-staff__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-company-staff__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);
    letter-spacing: var(--wp--preset--letter-spacing--narrow);
  }

  /* 採用バナー（Figma: Frame 1107）。トップの p-top-company__recruit と同じ */
  .p-company-recruit {
    position: relative;
    isolation: isolate; /* 飾りを内容の下に */
    display: flex;
    flex-direction: column;
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--15)
      var(--wp--preset--spacing--30);
    margin-top: var(--wp--preset--spacing--60);
    overflow: hidden; /* clip が無い iOS 15 以前の予備 */
    overflow: clip;
    color: var(--wp--preset--color--white);
    text-align: center;
    background-color: var(--wp--preset--color--primary);
    border-radius: var(--wp--preset--radius--medium);
  }

  .p-company-recruit__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .p-company-recruit__lead {
    margin: var(--wp--preset--spacing--25) 0 0;
    font-size: var(--wp--preset--font-size--card-sub);
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: var(--wp--preset--letter-spacing--wide);
  }

  /* SP は 写真 → ボタン の順（Figma）。DOM は PC の並び（本文・ボタン・写真） */
  .p-company-recruit__image {
    position: relative;
    z-index: 1;
    order: 1;
    width: 100%;
    aspect-ratio: 340 / 195;
    margin-top: var(--wp--preset--spacing--20);
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: var(--wp--preset--radius--large);
  }

  .p-company-recruit__button {
    position: relative;
    z-index: 1;
    order: 2;
    margin: var(--wp--preset--spacing--20) var(--wp--preset--spacing--5) 0 0;
    text-align: right;
  }

  .p-company-recruit__deco {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    background-color: var(--wp--preset--color--white);
    border-radius: 3.3333% 25%;
    opacity: 0.2;
  }

  .p-company-recruit__deco--1 {
    top: 186px;
    left: -23px;
    width: 126px;
    height: 126px;
  }

  .p-company-recruit__deco--2 {
    top: 80px;
    left: 430px;
    width: 48px;
    height: 48px;
  }

  /* ========== PC ========== */
  @media (min-width: 768px) {
    .p-company-philosophy {
      padding-top: var(--wp--preset--spacing--75);
      padding-bottom: var(--wp--preset--spacing--100);
    }

    .p-company-philosophy__card {
      padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--40);
      margin-top: var(--wp--preset--spacing--60);
    }

    .p-company-philosophy__intro {
      margin-top: var(--wp--preset--spacing--100);
    }

    .p-company-philosophy__image {
      border-radius: var(--wp--preset--radius--large);
    }

    .p-company-philosophy__lead,
    .p-company-staff__lead {
      line-height: var(--wp--preset--line-height--lead-pc);
    }

    .p-company-philosophy__text,
    .p-company-staff__text {
      margin-top: var(--wp--preset--spacing--60);
      line-height: var(--wp--preset--line-height--loose);
    }

    .p-company-message {
      padding-top: var(--wp--preset--spacing--100);
      padding-bottom: var(--wp--preset--spacing--100);
    }

    .p-company-message__card {
      padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--40);
      margin-top: var(--wp--preset--spacing--60);
    }

      .p-company-message__card + .p-company-message__card {
        margin-top: var(--wp--preset--spacing--100);
      }

    .p-company-message__photo {
      width: 250px;
      height: 250px;
    }

    .p-company-message__text {
      margin-top: var(--wp--preset--spacing--50);
      line-height: 2;
    }

    .p-company-message__button {
      margin-top: var(--wp--preset--spacing--60);
    }

    .p-company-profile {
      padding-top: var(--wp--preset--spacing--100);
      padding-bottom: var(--wp--preset--spacing--100);
    }

    .p-company-profile__intro {
      margin-top: var(--wp--preset--spacing--60);
    }

    .p-company-profile__row {
      flex-direction: row;
      gap: var(--wp--preset--spacing--30);
      align-items: flex-start;
    }

    .p-company-profile__map {
      margin-top: var(--wp--preset--spacing--100);
      border-radius: var(--wp--preset--radius--large);
    }

    .p-company-profile__map-frame {
      height: 500px;
    }

    .p-company-farm {
      padding-top: var(--wp--preset--spacing--120);
      padding-bottom: var(--wp--preset--spacing--100);
    }

    .p-company-farm__main {
      width: min(100%, var(--wp--preset--layout--content-max));
      margin-left: auto;
      margin-right: auto;
      margin-top: var(--wp--preset--spacing--50);
      border-radius: var(--wp--preset--radius--large);
    }

    .p-company-farm__main-image {
      aspect-ratio: 1000 / 450;
      -o-object-position: center;
         object-position: center;
    }

    .p-company-farm__hand {
      top: -7px;
      left: 0;
      width: 487px;
    }

    .p-company-farm__lead {
      margin-top: var(--wp--preset--spacing--60);
      line-height: var(--wp--preset--line-height--lead-pc);
    }

    .p-company-farm__text {
      margin-top: var(--wp--preset--spacing--50);
      line-height: var(--wp--preset--line-height--loose);
    }

    .p-company-staff {
      padding-top: var(--wp--preset--spacing--100);
      padding-bottom: var(--wp--preset--spacing--100);
    }

    .p-company-staff__intro {
      margin-top: var(--wp--preset--spacing--80);
    }

    .p-company-staff__image {
      border-radius: var(--wp--preset--radius--large);
    }

    .p-company-recruit {
      margin-top: var(--wp--preset--spacing--80);
    }

    .p-company-recruit__lead {
      margin-top: var(--wp--preset--spacing--25); /* Figma: 見出しの下 35px（行ボックスの余白 10px を引く） */
    }

    .p-company-recruit__deco--1 {
      top: 208px;
      left: -52px;
      width: 184px;
      height: 184px;
    }
  }

  /* ========== 1200px 以上（2 カラムの区画。768〜1199 は SP と同じ縦積み） ========== */
  @media (min-width: 1200px) {
    /* 写真は 1240px のカラムから左に（余白 + 20px）はみ出す（Figma: x = -20） */
    .p-company-philosophy__intro {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 580px;
      grid-gap: var(--wp--preset--spacing--80);
      gap: var(--wp--preset--spacing--80);
      align-items: center;
    }

    .p-company-philosophy__image {
      margin-left: calc(var(--wp--preset--layout--container-gutter) * -1 - 20px);
    }

    .p-company-message__card {
      padding-left: var(--wp--preset--spacing--100);
      padding-right: var(--wp--preset--spacing--100);
    }

    .p-company-message__head {
      flex-direction: row;
      gap: var(--wp--preset--spacing--60);
      justify-content: space-between;
    }

    .p-company-message__lead {
      width: auto;
      text-align: left;
    }

    /* 畳んだとき、PC は Figma の Massage のとおり 2021 年の段落まで見せる */
    .p-company-message__text.is-collapsed .p-company-message__more--pc {
      grid-template-rows: 1fr;
      visibility: visible;
    }

    .p-company-profile__intro {
      display: grid;
      grid-template-columns: minmax(0, 625fr) minmax(0, 535fr);
      grid-gap: var(--wp--preset--spacing--80);
      gap: var(--wp--preset--spacing--80);
      align-items: center;
    }

    .p-company-profile__image {
      aspect-ratio: 625 / 416;
      border-radius: var(--wp--preset--radius--large);
    }

    .p-company-farm__hand {
      left: -156px;
    }

    /* 写真は右に（余白 + 20px）はみ出す（Figma: x = 660 + 680 = 1340） */
    .p-company-staff__intro {
      display: grid;
      grid-template-columns: 580px minmax(0, 1fr);
      grid-gap: var(--wp--preset--spacing--80);
      gap: var(--wp--preset--spacing--80);
      align-items: center;
    }

    .p-company-staff__image {
      margin-right: calc(var(--wp--preset--layout--container-gutter) * -1 - 20px);
    }

      .p-company-staff__image::before {
        content: none;
      }

    /* 左列（本文・ボタン）を上下中央に置くため、上下に 1fr の空き行を挟む */
    .p-company-recruit {
      display: grid;
      grid-template-rows: 1fr auto auto 1fr;
      grid-template-columns: minmax(0, 1fr) 490px;
      align-items: center;
      width: min(100%, var(--wp--preset--layout--content-max));
      height: 300px;
      padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--10)
        var(--wp--preset--spacing--10) 0;
      margin: var(--wp--preset--spacing--80) auto 0;
      border-radius: var(--wp--preset--radius--large);
    }

    .p-company-recruit__body {
      grid-row: 2;
      grid-column: 1;
    }

    .p-company-recruit__image {
      grid-row: 1 / 5;
      grid-column: 2;
      height: 280px;
      aspect-ratio: auto;
      margin-top: 0;
    }

    .p-company-recruit__button {
      grid-row: 3;
      grid-column: 1;
      margin: var(--wp--preset--spacing--20) 0 0; /* Figma: 文の下 35px（行ボックスの余白 15px を引く） */
      text-align: center;
    }
  }
}