/* ページ見出し(.page-hero)は BRANDページと共通のため base.css にある */


/* ---------- 3つの事業領域 ---------- */

/* ---------- ページ見出しの下の大きな写真 ---------- */

/*
 * 16:9の枠。写真は枠に合わせて切り抜く。
 * 写真がまだ無いときは、同じ形の仮枠(.placeholder)がそのまま入る。
 *
 * 下の空きは共通ルールの区切りぶん。
 * (上側は .page-hero が自分の下余白として持っているので、ここでは持たない)
 */
.business-visual {
  padding-bottom: var(--rule-section);
}

/* figure の既定の左右余白を打ち消す */
.business-visual__figure {
  margin: 0;
}

.business-visual__frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-grayge);
}

.business-visual__frame img,
.business-visual__frame .placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 枠側で形を決めているので、中身が持つ比率と枠線は打ち消す */
  aspect-ratio: auto;
  border: 0;
}

/*
 * 幅いっぱいの大判写真に付けるキャプション(本社の写真)。
 *
 * 右揃えにしているのは、写真が画面の幅いっぱいに広がるため。
 * 左端に置くと下に続く本文の1行目と紛れて、写真の説明に見えない。
 * (記事の中の小さい写真のキャプションは左端のままでよい)
 */
.business-visual__caption {
  margin-top: var(--rule-caption);
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-text-sub);
  text-align: right;
}


/*
 * 3つの事業領域のまとまり。
 *
 * 下の SIGNATURE PROJECT はベタ面(has-tint)。
 * 色の縁がカードの文字のすぐ下に来ないよう、境目の空きは倍(外48px + 内48px)取る。
 * ここは共通ルールぶん(24px)だけを持ち、残りは .signature 側の
 * margin(--rule-fill から24pxを引いた値)で作る。
 */
.areas {
  padding-bottom: var(--rule-section);
}

/*
 * リンクで飛んできたときの止まり位置。
 *
 * ヘッダーは画面上部に貼り付いたままなので、そのぶん手前で止めないと
 * 「01 …」の見出しがヘッダーの裏に隠れてしまう。
 */
.area {
  scroll-margin-top: var(--header-height);
}

/*
 * 01〜03 の各ブロック。
 *
 * ここだけ区切りの2倍。
 * 1ブロックが「見出し + 説明 + 箇条書き + カード4枚」と縦に長いので、
 * ふつうの区切りと同じ空きだと、どこで次の領域に移ったのか分からなくなる。
 */
.area + .area {
  margin-top: calc(var(--rule-section) * 2);
}

/*
 * 「01 企画と空間設計」の行。下に細い罫線を引く。
 *
 * スクロール中はヘッダーの真下に貼り付いたまま残る(position: sticky)。
 * 貼り付く範囲は親である .area の中だけなので、そのブロックを抜けると
 * 自然に上へ流れて消え、次の「02 …」が入れ替わりで貼り付く。
 *
 * 貼り付いている間は裏を写真や文章が通過するため、
 * 地色で塗りつぶしておかないと文字が重なって読めなくなる。
 */
.area__label {
  position: sticky;
  /*
   * ヘッダー下端には透明な1pxの線がある(スクロール時だけ色が付く)。
   * そこに合わせて貼り付けると、その透明な1pxから裏の中身が透けて
   * 髪の毛のような隙間に見える。1pxだけ食い込ませて塞いでいる。
   */
  top: calc(var(--header-height) - 1px);
  z-index: 5;
  padding-block: var(--space-sm);
  /* 裏を本文が通るので、ページの地色で塗りつぶす */
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  font: var(--type-body);
  font-weight: 400;
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

.area__num {
  margin-right: 0.8em;
}

/*
 * 罫線の下: 左に説明文、右に事業内容リスト。
 *
 * 下に並ぶカード4枚と「まったく同じ4列」の上に乗せている。
 * 説明文は1〜2枚目の位置、リストは4枚目の位置(3枚目は空き)。
 * こうするとリストの左右幅が、真下のカードとぴったり一致する。
 */
.area__body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  /* 罫線 → 中身。全ページ共通の24px。以前は25pxの直値だった */
  margin-top: var(--rule-head);
}

.area__lead {
  grid-column: 1 / 3;
}

/*
 * Figmaの Special-Serif(明朝28px)。トークンは tokens.css を参照。
 *
 * 4列のうち左2列ぶんに収めている。右2列は空けたまま。
 * 以前は右端に事業内容の箇条書きを置いていたが、
 * それを写真の見出しへ移したあとも幅は広げていない。
 * 28pxの明朝を4列いっぱいに流すと1行が長くなりすぎて読みにくいのと、
 * 右の余白がそのまま「読み終わってから写真へ渡す間」になるため。
 */
.area__lead {
  font: var(--type-special);
  letter-spacing: 0;
  color: var(--color-ink);
}

/* 下に並ぶ写真カード4枚 */
.area__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* カード同士の間隔はページ内で30pxに統一(横断プロジェクトと同じ) */
  gap: 30px;
  /*
   * 説明 → 写真カード。大きなかたまりどうしなので64px。
   * 以前は60pxの直値だった。
   */
  margin-top: var(--space-2xl);
}

.work-card__thumb {
  /* 正方形。広い画面も狭い画面も同じ形 */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-grayge);
}

/*
 * 事業内容。写真の下に置くが、ただの説明ではなく
 * その領域で何をやっているかの本体なので List(14px)。
 * 以前ここに置いていた箇条書きと同じ大きさ・同じ字間にそろえている
 * (Caption(12px)だと、写真に対する注釈のように見えて内容が沈む)。
 */
.work-card__caption {
  /* 写真 → その説明。全ページ共通(tokens.css の --rule-caption) */
  margin-top: var(--rule-caption);
  font: var(--type-list);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

.work-card__link {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}

.work-card__link:hover {
  opacity: 0.65;
}


/* ---------- SIGNATURE PROJECT ---------- */

.signature {
  /*
   * ベタ面のブロック。境目の内側・外側とも --rule-fill(理由はtokens.css)。
   * 外側は隣のセクションの padding が先に入っているぶんを引く。
   */
  margin-block: calc(var(--rule-fill) - var(--rule-section));
  padding-block: var(--rule-fill);
}

/*
 * SIGNATURE PROJECT から切り離した「その他の横断プロジェクト」。
 * 地色はページ全体と同じ(has-tint を付けない)。
 * 上下の空きは共通ルールの区切りぶん。
 */
.signature-others {
  padding-block: var(--rule-section);
}

/*
 * ラベル → 見出し → リード文 → 中身 の空きは、全ページ共通。
 *   ラベル → 見出し   … 8px  (--space-xs)
 *   見出し → リード文 … 16px (--space-sm)  リード文は見出しの続きとして読ませる
 *   リード文 → 中身   … 24px (--rule-head) 「見出し→中身」の共通ルール
 * TOPページの .eyebrow / .section-title / .section-lead と同じ関係。
 */
/* 見出しまわりだけ中央ぞろえ。ここから下の記事は左ぞろえ */
.signature__head {
  text-align: center;
}

.signature__title {
  margin-top: var(--space-xs);
  font: var(--type-h1);
  letter-spacing: var(--ls-display);
}

.signature__intro {
  /* 1行が長くなりすぎないところで折り返す。他ページのリード文と同じ幅 */
  max-width: 886px;
  /*
   * 見出し → 説明文。
   *
   * 「見出し → 中身」の決まりは24px(--rule-head)だが、ここは16px。
   * 見出し(32px・行送り1.5)も説明文(15px・行送り1.9)も
   * 文字の外側に余白を持っているので、24pxを足すと見た目は
   * 40px近くになり、2つが別のかたまりに見えていた。
   */
  margin-top: var(--space-sm);
  margin-inline: auto;
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);

  /*
   * 対応しているブラウザでは文節の切れ目で折り返す。
   * 「領域を横/断しながら」のように語の途中で切れるのを避ける。
   * 非対応のブラウザではふつうの折り返しに戻るだけで、崩れはしない。
   */
  word-break: auto-phrase;
}

/*
 * 記事の扉になる大判写真。
 *
 * 広い画面では 16:7。本社の写真(16:9)より横長にしてある。
 * こちらは記事の扉で、下に01/02/03の本文が続くため、
 * 16:9だと写真だけで画面の高さを使いきってしまう。
 * 狭い画面では下のメディアクエリで本社の写真と同じ正方形になる。
 */
.signature__visual {
  aspect-ratio: 16 / 7;
  overflow: hidden;
  margin-top: var(--rule-head);
  background-color: var(--color-grayge);
}

.signature__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.signature__visual .placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
}

/* ---------- SIGNATURE PROJECT の記事本体(01/02/03) ---------- */

/*
 * 上の「3つの事業領域」と同じ番号・同じ領域名で、
 * 1件のプロジェクトの中を順にたどる。
 * 段どうしの空きは --rule-block(48px)。
 * 1段が「見出し + 文章 + 写真」で高さを持つまとまりなので、
 * 行の区切り(32px)では詰まって見える。
 */
.sig-steps {
  display: grid;
  gap: var(--rule-block);
  margin-top: var(--rule-block);
}

.sig-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  /* 見出しの頭を、写真の上端にそろえる */
  align-items: start;
}

/*
 * 写真の列に2枚以上入るときは、その中で2列に組む。
 *
 * :has() は「その条件に当てはまる子を持つ親」を指す書き方。
 * ここでは「2枚目の写真がある media」だけに効かせている。
 * 1枚だけの段は指定が当たらないので、そのまま列いっぱいに出る。
 */
.sig-step__media:has(.sig-step__figure:nth-child(2)) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

/* 写真が左、文章が右。並び順だけ入れ替える(HTMLの順番は変えない) */
.sig-step--left .sig-step__body {
  order: 2;
}

.sig-step--left .sig-step__media {
  order: 1;
}

/* 写真が下に横並び。文章はその上 */
.sig-step--wide {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rule-head);
}

/*
 * 文章の幅は、写真が横に来る段と同じにする。
 *
 * この段だけ1カラムなので、そのままだと本文が画面の端まで伸び、
 * 上下の段と1行の長さが変わって折り返す位置がそろわない。
 * 2カラムの段と同じ「(全体 − 列の間) ÷ 2」で頭打ちにしている。
 */
.sig-step--wide .sig-step__body {
  max-width: calc((100% - var(--space-2xl)) / 2);
}

/*
 * 各ステップの見出し。
 * 以前は明朝18px(--type-h3)だったが、本文のすぐ上に置く小見出しは
 * サイト共通でサブヘッド(ゴシック20px/350)にそろえた。
 */
.sig-step__title {
  font: var(--type-subhead);
  letter-spacing: var(--ls-heading);
  color: var(--color-ink);
}

.sig-step__text {
  /* 見出し → 本文 */
  margin-top: var(--space-sm);
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

.sig-step--wide .sig-step__media {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.sig-step__thumb {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--color-grayge);
}

/*
 * 文章と横に並ぶ1枚は16:9。
 * 横並びの3枚(02)より1枚が大きく出るので、
 * 縦の厚みを抑えて、文章と釣り合う高さにしている。
 */
.sig-step--right .sig-step__thumb,
.sig-step--left .sig-step__thumb {
  aspect-ratio: 16 / 9;
}

.sig-step__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sig-step__thumb .placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
}

.sig-step__caption {
  /* 写真 → 説明。全ページ共通(tokens.css の --rule-caption) */
  margin-top: var(--rule-caption);
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-text-sub);
}


/* 関連施設 / その他の横断プロジェクト(3枚並び) */

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: var(--rule-head);
}

.project-card__thumb {
  /* Figma実測: 3738 : 2492 (およそ3:2) */
  aspect-ratio: 3738 / 2492;
  overflow: hidden;
  background-color: var(--color-grayge);
}

.project-card__title {
  /* 写真 → その説明。全ページ共通(tokens.css の --rule-caption) */
  margin-top: var(--rule-caption);
  /* 写真の下に置く施設名。本文ではなく名前なので Name-San の小さい版 */
  font: var(--type-name-sm);
  letter-spacing: var(--ls-body);
  /*
   * 施設名 → 説明文の空き。
   *
   * ここは元々、行送りが作る余白だけで空いていた。
   * 行送りを2.0から1.45に詰めたとき(--type-name-sm)、
   * 文字の下に付く余白も 8px → 約3.6px に減り、
   * 説明文が名前にくっついてしまった。
   * 減ったぶんを足して、元の見え方に戻している。
   */
  margin-bottom: var(--space-2xs);
}

.project-card__caption {
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-text-sub);
}

/*
 * 権利表記。
 * 説明文と同じ書式だが、続きの文章ではないので1行ぶん空けて切り離す。
 */
.project-card__credit {
  margin-top: var(--space-xs);
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-text-sub);
}

/*
 * 「その他の横断プロジェクト」。
 * 文字の右側に罫線が最後まで伸びる形。
 * 線は擬似要素で引き、文字との間に少し余白を取る。
 */
.signature__others-label {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text-sub);
  white-space: nowrap;
}

.signature__others-label::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--color-line);
}

/* 読み進める先へ送るリンク。TOPの .section-foot と同じ空け方・同じ右端 */
.signature__foot {
  margin-top: var(--rule-row);
  text-align: right;
}


/* ---------- タブレット ---------- */

@media (max-width: 1100px) {
  /*
   * 02の本文の幅の頭打ちを外す。
   *
   * 広い画面では、上下の段(2カラム)と同じ位置で折り返すよう
   * 半分の幅で止めている。
   * ただし画面が狭くなるとその半分が400px前後まで縮み、
   * 右半分が大きく空いたまま細い1本の柱になってしまう。
   * ここからは幅いっぱいに流す。
   */
  .sig-step--wide .sig-step__body {
    max-width: none;
  }

  /* 狭い画面では1列に積む。列の指定も解除する */
  .area__body {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .area__lead {
    grid-column: auto;
  }

  .area__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}


/* ---------- スマートフォン ---------- */

@media (max-width: 768px) {
  /*
   * 幅いっぱいの大判写真2枚(本社・プロジェクト事例の扉)。
   * 広い画面では16:9の帯だが、狭い画面だと高さが画面幅の56%しかなく、
   * 「大判」として効かない。正方形にして面積を取り戻している。
   */
  .business-visual__frame,
  .signature__visual {
    aspect-ratio: 1 / 1;
  }

  /*
   * 導入文だけ左揃えにする。ラベルと見出しは中央のまま。
   *
   * 狭い画面では必ず2行以上になり、中央揃えだと行頭が毎行ずれて、
   * 目が次の行の始まりを探すことになる。
   * (PCは1行に収まるので中央揃えのままでよい)
   */
  .signature__intro {
    text-align: left;
  }

  /*
   * 記事の各段は縦積み。左右の入れ替えは解除して、
   * どの段も「見出し → 文章 → 写真」の順で読ませる。
   * 段によって写真が先になったり後になったりすると、
   * 上から流して読んだときに調子が狂うため。
   */
  .sig-step,
  .sig-step--wide {
    grid-template-columns: 1fr;
    gap: var(--rule-head);
  }

  .sig-step--left .sig-step__body,
  .sig-step--left .sig-step__media {
    order: 0;
  }

  /* 3枚並びは2列に。3枚目は左に1枚だけ残る */
  .sig-step--wide .sig-step__media {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .project-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

}

@media (max-width: 600px) {
  /*
   * 事業内容のカードは、スマートフォンでも2列のまま。
   * 1枚が画面の左右いっぱいになると大きすぎるため。
   * そのぶん間隔と文字は少し詰める。
   */
  .area__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }
}