/* sections/service.css — トップページの事業内容
   Figma: p-service (node 1180:8594)

   3事業を交互レイアウトで見せる。各アイテムは「ピル型の写真」に「事業色のパネル」が
   重なる構成。共通パターンを .p-service__item に持たせ、事業色は --care / --job /
   --nursing で差し替える。

   写真を右に置く「ジョブ」（--reverse）は左右ミラーではない（Figma実測）：
   ・見出しバー／本文はそのまま左揃えで、コンテンツ列の左端に付く
   ・色パネルは画面左端からブリードし、右端はコンテンツ列右端の手前140px（右下角丸64）
   ・写真は2枚（上：左ピルの縦長 516×536 ／ 下：大きな角丸の 560×395）で、
     下の写真がパネルの右下角に重なる */

.p-service {
  /* 画像・背景色は画面全幅にブリードさせるが、テキスト（見出し・本文・ボタン）は
     Figmaと同じく中央寄せの 1200px コンテンツ列を基準に配置する（＝左右のバランスを維持）。

     テキスト左端の画面端からの位置（Figma実測）＝ コンテンツ列左端 ＋ 460px。
       コンテンツ列左端 = (100vw − 1200px)/2 + 120px[内側パディング] = (100vw − 75rem)/2 + 7.5rem
       テキスト開始      = 上記 + 28.75rem(460px)
     見出し/パネルに与えるインセットは、ボディ左端（画像26.25rem − 重なり17.5rem = 8.75rem）を
     差し引いた値：(100vw − 75rem)/2 + 27.5rem。狭い画面では 20rem を下限にする。 */
  --service-text-inset: max(20rem, calc((100vw - var(--layout-content-width)) / 2 + 27.5rem));

  /* 反転アイテム（ジョブ）のテキストインセット：見出しバーがコンテンツ列の左端に揃う。
     Figma実測はバー位置244px（1440px時）だが、244 = 列左端240 + 4px は
     はみ出しレイアウト（1056−280+420 > 960）が生む端数のため、列左端240pxに揃える。 */
  --service-text-inset-r: max(var(--layout-gutter), calc((100vw - var(--layout-content-width)) / 2 + var(--layout-gutter)));

  /* 画像は画面端からテキストの直前まで広げる。テキスト左端 = ボディ左端8.75rem + inset。
     画像右端とテキストの間隔は Figma実測の 40px（2.5rem）＝ テキスト左端460px − 画像右端420px。
     画像の可視幅をそこまで拡張し、body（＝テキスト）の開始位置は負マージンで
     8.75rem に固定する（テキスト位置は変わらない）。 */
  --service-img-w: calc(8.75rem + var(--service-text-inset) - 2.5rem);
  --service-img-pull: calc(8.75rem - var(--service-img-w));

  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: var(--space-120);
  padding-bottom: var(--space-160);
  background: var(--color-tertiary-20); /* Figma: セクション背景はベージュ #F4ECE2（CA9E6F 20%）*/
}

.p-service__inner {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space-80);
  align-items: center;
}

/* 事業リストはビューポート全幅にブリードさせる（画像・色パネルを画面端まで届かせる）。
   親 .l-inner（1200px・センタリング）から左右対称に食み出す定番テク：
   width:100vw ＋ margin-inline:calc(50% - 50vw)（両側マージンと幅の合計は親の100%に一致するため
   flex の align-items に影響されず安定）。見出し(section-header)はコンテンツ幅のまま。 */
.p-service__list {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: stretch;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* アイテム間隔（Figma実測）：リズム→ジョブは外側リストの gap 80px、
   ジョブ→テラスは入れ子リストの gap 16px（ジョブの下写真とテラスの写真が近接する）。 */
.p-service__item + .p-service__item {
  margin-top: var(--space-16);
}

.p-service__item:nth-child(2) {
  margin-top: var(--space-80);
}

/* ==========================================================================
   アイテム（写真＋色パネル）
   ========================================================================== */
.p-service__item {
  display: flex;
  align-items: stretch;
  width: 100%;
}

/* --- 写真（外側がピル）------------------------------------------------- */
.p-service__img {
  position: relative;
  z-index: 2; /* パネルより前面 */
  flex-shrink: 0;
  overflow: clip;
  width: var(--service-img-w);  /* 画面端からテキスト直前まで */
  height: 33.5rem;  /* Figma: 536px */
  /* 外側（既定は右）をピルにする */
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  margin-right: var(--service-img-pull); /* body開始位置(8.75rem)を一定に保つ */
}

.p-service__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- テキスト側 --------------------------------------------------------- */
.p-service__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--space-32);
  justify-content: center; /* 写真側が高いアイテム（ジョブ）で上下センター（Figma実測）*/
  min-width: 0;
  padding-top: var(--space-80);
}

/* 見出し（左に事業色のアクセントバー）。パネルの上にせり出す。
   Figma: 写真を避ける320pxは margin（バーの外側）、バー〜文字の32pxは padding（バーの内側）。
   → アクセントバーは写真の右隣に出て、その32px右にテキストが並ぶ。 */
.p-service__heading {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: flex-start;
  margin-left: var(--service-text-inset); /* 写真を避けつつコンテンツ列へ揃える */
  padding-left: var(--space-32);
  border-left: var(--space-12) solid var(--service-color);
  line-height: var(--line-height-body);
  color: var(--color-text);
}

.p-service__eyebrow {
  font-size: var(--font-size-h3-lg);
  font-weight: var(--font-weight-black);
}

.p-service__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-black);
  white-space: nowrap;
}

/* 色パネル */
.p-service__panel {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space-48);
  align-items: flex-start;
  padding: var(--space-24) 0 var(--space-56) var(--service-text-inset); /* 上24 右0 下56 左=テキスト列 */
  border-bottom-left-radius: var(--radius-panel);
  background: var(--service-color);
}

.p-service__panel-body {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space-16);
  align-items: flex-start;
  width: 100%;
  max-width: 31.25rem; /* Figma: 500px */
  color: var(--panel-text-color);
}

.p-service__lead {
  width: 100%;
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-body);
}

.p-service__text {
  width: 100%;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-loose);
}

/* ==========================================================================
   事業色（--service-color と、パネル上の文字色）＋事業ごとの余白差（Figma実測）
   ========================================================================== */
.p-service__item--care {
  --service-color: var(--color-service-care);
  --panel-text-color: var(--color-text-invert);
}

.p-service__item--job {
  --service-color: var(--color-service-job);
  --panel-text-color: var(--color-text-invert);
}

/* Figma実測: ジョブは見出し〜パネルの間隔48px・上下センター（padding-topなし）、パネル上24→32px */
.p-service__item--job .p-service__body {
  gap: var(--space-48);
  padding-top: 0;
}

.p-service__item--job .p-service__panel {
  padding-top: var(--space-32);
}

.p-service__item--nursing {
  --service-color: var(--color-service-nursing);
  --panel-text-color: var(--color-text); /* 茶パネルは濃い文字（Figma実測）*/
}

/* Figma実測: テラスはテキスト上余白120px・パネル上32px・写真がやや縦長544px＋6%の暗幕 */
.p-service__item--nursing .p-service__body {
  padding-top: var(--space-120);
}

.p-service__item--nursing .p-service__panel {
  padding-top: var(--space-32);
}

.p-service__item--nursing .p-service__img {
  height: 34rem; /* Figma: 544px */
}

.p-service__item--nursing .p-service__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-overlay-weak); /* Figma実測: rgba(0,0,0,0.06) */
}

/* ==========================================================================
   反転（写真を右に）: item2「ジョブ」
   --------------------------------------------------------------------------
   Figma実測では左右ミラーではない：テキストは左揃えのまま（バーも左）、
   見出し・パネルのインセットだけが --service-text-inset-r（コンテンツ列左端）に変わり、
   パネルの角丸が右下になる。写真列は2枚構成（.p-service__img--stacked）。
   ========================================================================== */
.p-service__item--reverse {
  flex-direction: row-reverse;
}

.p-service__item--reverse .p-service__img {
  margin-right: 0;
  /* Figma: テキスト列は写真フレーム（420px）に280px重なる → 写真列の実効幅を
     280px(17.5rem) 分だけ狭め、パネル右端を「コンテンツ列右端 − 140px」に置く */
  margin-left: -17.5rem;
}

.p-service__item--reverse .p-service__heading {
  margin-left: var(--service-text-inset-r);
}

.p-service__item--reverse .p-service__panel {
  padding-left: var(--service-text-inset-r);
  border-radius: 0 0 var(--radius-panel) 0; /* 右下だけ角丸 */
}

/* --- 写真2枚構成（ジョブ）--------------------------------------------- */
/* Figma実測（写真列660px内・1440px時）：
   上：516×536 左ピル、右端は画面右端に接する
   下：560×395 角丸 左上180/右上16/右下240/左下180、y=456から（上の写真に80px重なる） */
.p-service__img--stacked {
  overflow: visible;
  height: 53.1875rem; /* Figma: 851px（2枚の写真領域全体）*/
  border-radius: 0;
}

.p-service__img--stacked .p-service__img-main {
  position: absolute;
  top: 0;
  right: 0;
  width: 32.25rem; /* Figma: 516px */
  height: 33.5rem; /* Figma: 536px */
  border-radius: var(--radius-pill) 0 0 var(--radius-pill); /* ピルを左に */
}

.p-service__img--stacked .p-service__img-sub {
  position: absolute;
  top: 28.5rem; /* Figma: 456px */
  left: 0;
  width: 35rem;      /* Figma: 560px */
  height: 24.6875rem; /* Figma: 395px */
  border-radius: var(--radius-180) var(--radius-lg) var(--radius-240) var(--radius-180);
}

/* ==========================================================================
   SP（767px以下）— 写真の下にテキスト・パネルを積むシングルカラム
   --------------------------------------------------------------------------
   テキストのインセット（--service-text-inset）は「写真を避ける」役割を失うため、
   画面端からのガター（--space-24）に切替える。ジョブの2枚重ね写真は絶対配置を
   やめて縦積みの静的配置にする。
   ========================================================================== */
@media (max-width: 767px) {
  .p-service {
    --service-text-inset: var(--space-24);
    --service-text-inset-r: var(--space-24);

    /* SPの --space-120（4rem）の半分 */
    padding-top: var(--space-32);
  }

  .p-service__inner { gap: var(--space-24); }

  .p-service__item,
  .p-service__item--reverse {
    flex-direction: column;
    gap: var(--space-16);
  }

  /* 2つ目以降のブロックは、前のブロックの色パネルに角丸分だけ重ねる
     （写真の上角丸から前のパネル色が覗く。親 .p-service__list は gap なし） */
  .p-service__item + .p-service__item {
    margin-top: calc(-1 * var(--radius-lg));
  }

  /* 写真は各事業1枚・角丸なし・黄金比（横:縦 = 1.618:1）
     （nursing の高さ上書きより特異性を上げるためセレクタを併記） */
  .p-service__img,
  .p-service__item--nursing .p-service__img {
    width: 100%;
    height: auto;
    margin-right: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* 上左右のみ */
  }

  /* 比率は img 自身に持たせる（コンテナの height:auto と両立させるため） */
  .p-service__img img {
    height: auto;
    aspect-ratio: 1.618 / 1;
  }

  .p-service__item--reverse .p-service__img { margin-left: 0; }

  .p-service__body {
    gap: var(--space-16);
    padding-top: 0;
  }
  .p-service__item--nursing .p-service__body { padding-top: 0; }
  .p-service__item--job .p-service__body { gap: var(--space-16); }

  .p-service__title { white-space: normal; }

  /* セクション見出し（c-section-header）のSPと同じバランスに合わせる
     （小ラベル=h3、タイトル=h2、行間tight） */
  .p-service__heading {
    padding-left: var(--space-16);
    border-left-width: calc(var(--space-12) / 2); /* PC（12px）の半分 */
    line-height: var(--line-height-tight);
  }
  .p-service__eyebrow { font-size: var(--font-size-h3); }

  .p-service__panel,
  .p-service__item--reverse .p-service__panel {
    gap: var(--space-24);
    /* 下は次ブロックの写真が角丸分重なるため多めに確保 */
    padding: var(--space-24) var(--space-24) var(--space-64) var(--service-text-inset);
    border-radius: 0;
  }

  /* ボタンは中央揃え */
  .p-service__panel .c-button { align-self: center; }

  /* テラス（最後のブロック）は次の写真が重ならないため下を浅く */
  .p-service__item--nursing .p-service__panel { padding-bottom: var(--space-40); }

  .p-service__item--job .p-service__panel,
  .p-service__item--nursing .p-service__panel {
    padding-top: var(--space-24);
  }

  /* ジョブの2枚重ね写真：SPは1枚目のみ表示（各事業1枚に統一） */
  .p-service__img--stacked {
    overflow: clip;
    height: auto;
  }

  .p-service__img--stacked .p-service__img-main {
    position: static;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* 上左右のみ */
  }

  .p-service__img--stacked .p-service__img-sub { display: none; }

  /* 写真のinview演出：SPは左右スライドをやめ、下からのフェードアップに揃える */
  .js-enabled .p-service__img .js-inview:not(.is-inview) {
    translate: 0 var(--space-32);
  }
}