/* about.css — 私たちについて 固有 */
.color-block { color: #fff; padding: clamp(28px,4vw,56px) clamp(24px,3.4vw,48px); aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: center; }   /* 設計: 正方形。見出し+本文は上下に離さず中央でグループ化 */
.color-block h2 { font-family: var(--sans); font-weight: 400; font-size: clamp(2.4rem, 4.4vw, 3.6rem); letter-spacing: .08em; margin: 0 0 clamp(20px,2.6vw,34px); }   /* 設計実測: 見出し字高≈49px(font≈60px)。サイト標準ゴシック */
.color-block p { font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.9; margin: 0; }   /* 設計実測: 本文字高≈17px(font≈19px) */
.color-block--salmon { background: var(--salmon); }
.color-block--green { background: var(--green); align-items: flex-end; text-align: right; }

/* プロローグ: 設計は左揃え(content左端)。先頭文に右へ伸びる装飾罫線、段落ごとに改行 */
.about-prose { margin: 60px 0 0; text-align: left; line-height: 2; }
.about-prose p { margin-bottom: 1.7em; }
.about-prose .prose-lead { display: flex; align-items: center; gap: 28px; margin-bottom: 1.7em; }
.about-prose .prose-lead::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.feature-intro { margin-bottom: 40px; }   /* 設計: 導入文は全幅(≈1140) */

/* 成果の特徴カード(設計: khaki帯の上に白BOX・見出し中央) */
.card-grid .card { background: #fff; padding: 28px 26px; }
.card-grid .card h3 { text-align: center; }

/* ---- 選ばれる理由: 白カードの背後に色付き正方形を外側角へオフセット(重なりクラスタ)。
       PCは縦書き見出し＋本文左下＋写真左上＋番号右上。SPは横書きで縦積み。 ---- */
/* 上段カードの色面が上に約80pxはみ出すので、見出しと重ならない余白を確保 */
/* 下段カードの色面も下へ約80pxはみ出す。footer との間に設計(≈176px)の余白を確保するため下マージンを付ける */
.reason-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 64px; margin-top: 92px; margin-bottom: clamp(96px, 12.8vw, 184px); }
.reason-card {
  position: relative; padding: 26px 28px;
  aspect-ratio: 477 / 413;   /* 設計実測: 白カード=477×413(≈1.155)。1frのbody行が余白を吸収し、設計の本文下ホワイトスペースを再現 */
  /* 左列=写真(上)+本文(下)、右列=番号(上)+縦書き見出し(下)。設計比 写真≒card幅58% */
  display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto 1fr; column-gap: 18px; row-gap: 16px;   /* 写真列≒カード全体の58%(padding込) */
}
/* 設計のグルーピング: 色付き正方形(背面) の上に、白背景+黒borderの箱(中身=写真/番号+見出し/本文) が乗る。
   白箱を ::before で作り、色四角(z0) < 白箱(z1) < 中身(z2) の重なりにする */
.reason-card::before { content: ""; position: absolute; inset: 0; background: #fff; border: 1px solid var(--line); z-index: 1; }
.reason-card > :not(.reason-bg) { position: relative; z-index: 2; }
/* 色付き正方形は白カードよりやや大きく、外側角へ約70pxはみ出す(設計実測 offset≈top76/left63, size+22/+30) */
.reason-bg { position: absolute; z-index: 0; width: calc(100% + 23px); height: calc(100% + 34px); }   /* 設計: 色四角498×444=card+21w+31h。外側角へ約66pxはみ出す */
.reason-card:nth-child(1) .reason-bg { background: var(--green);  top: -68px;    left: -66px; }
.reason-card:nth-child(2) .reason-bg { background: var(--accent); top: -68px;    right: -66px; }
.reason-card:nth-child(3) .reason-bg { background: var(--accent); bottom: -68px; left: -66px; }
.reason-card:nth-child(4) .reason-bg { background: var(--green);  bottom: -68px; right: -66px; }
.reason-photo { grid-column: 1; grid-row: 1; width: 100%; aspect-ratio: 4/3; object-fit: cover; }   /* 設計: 横長写真(card幅の約58%) */
.reason-body  { grid-column: 1; grid-row: 2; font-size: .82rem; color: #444; line-height: 1.85; }
.reason-right { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.reason-num   { font-size: 1.9rem; color: var(--logo-green); letter-spacing: .1em; }
.reason-title { writing-mode: vertical-rl; flex: 1; font-size: 1.3rem; font-weight: 500; letter-spacing: .16em; line-height: 1.65; }   /* 設計実測: 縦書き見出しは大きめ(pitch≈34px)。折返しは br-pc で右列やや短く(番号分) */

@media (max-width: 768px) {
  .color-block { padding: 36px 24px; min-height: 0; }
  /* 緑ブロックは PC 同様に右揃え(HUB右・本文右=サーモンの鏡。設計SPレンダで確認)。左揃え上書きはしない */

  /* SP(設計SPレンダ準拠): 白カードは画面幅より狭く(≈68%)、奇数=右寄せ/偶数=左寄せに交互配置。
     色四角はカードとほぼ同寸で外側の余白へ張り出し(奇=左/偶=右)＋上へ。番号はその張出し角に乗る。
     中身は タイトル(横書き)→写真→本文 の縦積み。 */
  .reason-grid { grid-template-columns: 1fr; gap: 80px; margin-bottom: clamp(72px, 20vw, 120px); }
  /* PC用の aspect-ratio(477/413) は SP縦積みでは高さから幅を逆算してカードを膨張させるため解除 */
  .reason-card { aspect-ratio: auto; display: flex; flex-direction: column; padding: 30px 24px 26px; margin-top: 56px; width: 68%; justify-self: center; }
  /* 色四角は外側へ33%はみ出す。カード+はみ出しの「ユニット」を画面中央に揃えるため、
     カードを はみ出し量の半分(16.5%) だけ非はみ出し側へずらす → 全カードが縦に揃う */
  .reason-card:nth-child(odd)  { transform: translateX(16.5%); }   /* 左へ張出す分、右へ半分 */
  .reason-card:nth-child(even) { transform: translateX(-16.5%); }  /* 右へ張出す分、左へ半分 */
  .reason-card::before { inset: 0; }                    /* 白カード=カード全体 */
  .reason-right { display: block; order: 1; }            /* タイトルを先頭(番号は絶対配置で色四角へ) */
  .reason-photo { order: 2; width: 100%; aspect-ratio: 3/2; margin: 4px 0 18px; }
  .reason-body { order: 3; font-size: .92rem; }
  .reason-title { writing-mode: horizontal-tb; font-size: 1.15rem; letter-spacing: .02em; line-height: 1.6; margin-bottom: 18px; }
  /* 色四角: カードとほぼ同寸(97%)、外側(奇=左/偶=右)へ約33%張り出し＋上へ56px。番号の背後 */
  .reason-bg { width: 97%; height: 46%; }
  .reason-card:nth-child(odd)  .reason-bg { top: -56px; bottom: auto; left: -33%; right: auto; }
  .reason-card:nth-child(even) .reason-bg { top: -56px; bottom: auto; right: -33%; left: auto; }
  /* SP配色は 緑/テラ/緑/テラ (PCの 緑/テラ/テラ/緑 と異なる。設計SPレンダ準拠) */
  .reason-card:nth-child(3) .reason-bg { background: var(--green); }
  .reason-card:nth-child(4) .reason-bg { background: var(--accent); }
  /* 番号: 色四角の張出し角(カードの外側)に乗せる。負オフセットでマージン側へ */
  .reason-num { position: absolute; z-index: 2; top: -44px; font-size: 3.2rem; letter-spacing: .06em; line-height: 1; }
  /* 番号は色四角の外側はみ出し部(幅≈33%)に収め、白カードと被らせない。%(カード幅基準)で全幅一定 */
  .reason-card:nth-child(odd)  .reason-num { left: -47%; right: auto; }
  .reason-card:nth-child(even) .reason-num { right: -47%; left: auto; }
}