@charset "UTF-8";
/* ===================================================================
   事業紹介ページ 共通スタイル（kuyou / shisan / kukan / keiei）
   Figma上、4ページとも同じ構成：
     ページ見出し(375×390) → リード(写真300px+縦ラベル+本文) → 事業内容のご紹介(縦ラベル付き項目の繰り返し)
   ヘッダー／メニュー／フッター／Topへ／PC固定背景／.sechead / .sechead2 /
   .pagehead / .vlabel は css/style.css を参照。
   =================================================================== */

/* -------------------------------------------------------------------
   0. ページ見出しの写真にトリミング指定があるページ用（枠高100px基準）
   ------------------------------------------------------------------- */
.pagehead__figure { width: 100%; height: 100px; border-radius: 4px; overflow: hidden; }
.pagehead__figure img { width: 100%; height: 100%; object-fit: cover; }
.pagehead__figure img.crop-c { height: 161.89px; margin-top: -9.43px; }   /* shisan 2044:941 */
.pagehead__figure img.crop-d { height: 207.36px; margin-top: -34.41px; }  /* kukan 2103:620 */

/* -------------------------------------------------------------------
   1. リード（2027:736 / 375×796）
   ------------------------------------------------------------------- */
.biz-intro { padding: 72px var(--pad-side); }

.biz-intro__inner { display: flex; flex-direction: column; align-items: center; }

.biz-intro__block { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }

.biz-intro__figure {
  position: relative;
  width: 100%;
  max-width: var(--w-content);
  height: 300px;
  border-radius: 4px;
  overflow: hidden;
}
.biz-intro__figure img { width: 100%; height: 100%; object-fit: cover; }
/* 枠高300px基準のトリミング（kukan 2044:968） */
.biz-intro__figure img.crop-e { width: 103.54%; height: 429.33px; margin-left: .08%; margin-top: -36px; max-width: none; }
.biz-intro__figure img.crop-g { width: 155.31%; height: 321.99px; margin-left: -27.65%; margin-top: -21.99px; max-width: none; }  /* keiei 2044:1161 */
/* Figma: 下半分から白へのグラデーション */
.biz-intro__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50.962%, var(--c-white) 100%);
}

.biz-intro__row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: var(--w-content);
}

/* リードの縦ラベル高さもページごとに異なる */
.biz-intro__label { height: 184px; }        /* kuyou 2027:755 */
.biz-intro__label--192 { height: 192px; }   /* shisan 2044:745 */
.biz-intro__label--305 { height: 305px; }   /* kukan  2044:970 */
.biz-intro__label--268 { height: 268px; }   /* keiei  2044:1163 */
.biz-intro__label > span { font-size: 14px; }

.biz-intro__body { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 277px; max-width: calc(100% - 34px); }
.biz-intro__title { width: 100%; font-size: 24px; font-weight: 400; line-height: 32px; }
.biz-intro__text { width: 100%; font-size: 14px; font-weight: 400; line-height: 24px; }

/* -------------------------------------------------------------------
   2. 事業内容のご紹介（2027:766 / 375×2018）
   ------------------------------------------------------------------- */
.biz-detail { position: relative; padding: 72px var(--pad-side); overflow: hidden; }
.biz-detail__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.biz-detail__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  width: 100%;
}

/* 見出しだけは左寄せ（Figma: items-start） */
.biz-detail .sechead2 { align-self: flex-start; }

/* 各項目はフレーム幅(375px)いっぱい ＝ セクションの左右余白32pxを食い抜く */
.biz-item {
  display: flex;
  align-items: center;
  width: calc(100% + var(--pad-side) * 2);
  margin: 0 calc(var(--pad-side) * -1);
}

/* 64pxの枠のうち32pxは余白用の矩形。
   左タブ＝[余白32][ラベル列32(左寄せ)]、右タブ＝[ラベル列32(右寄せ)][余白32] */
/* Figmaでは縦ラベルの枠が項目の高さ(212px)を超えることがあり、その場合も項目は高くならず
   ラベルが上端基準ではみ出す。CSSでも絶対配置にして行の高さに影響させない。 */
.biz-item__tab { flex: 0 0 64px; position: relative; align-self: stretch; }
.biz-item__tab > .vlabel { position: absolute; top: 0; }
.biz-item__tab--left > .vlabel { left: 32px; }
.biz-item__tab--right > .vlabel { left: 8px; }
.biz-item__tab .vlabel > span { font-size: 10px; }

/* 縦ラベルの高さ（Figmaの実数値。英文ごとに長さが違うためページ別に定義） */
/* 供養関連（kuyou 2027:766） */
.kuyou-vl1 { height: 192px; }
.kuyou-vl2 { height: 152px; }
.kuyou-vl3 { height: 133px; }
.kuyou-vl4 { height: 183px; }
.kuyou-vl5 { height: 188px; }
.kuyou-vl6 { height: 206px; }
/* 資産活用（shisan 2044:749） */
.shisan-vl1 { height: 238px; }
.shisan-vl2 { height: 227px; }
.shisan-vl3 { height: 163px; }
.shisan-vl4 { height: 192px; }
/* 空間・場づくり（kukan 2044:974） */
.kukan-vl1 { height: 103px; }
.kukan-vl2 { height: 97px; }
.kukan-vl3 { height: 79px; }
/* 経営基盤（keiei 2044:1167） */
.keiei-vl1 { height: 200px; }
.keiei-vl2 { height: 230px; }
.keiei-vl3 { height: 126px; }
.keiei-vl4 { height: 149px; }

.biz-item__main {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  width: 311px;
  max-width: calc(100% - 64px);
}

.biz-item__thumb { width: 100%; height: 180px; border-radius: 4px; overflow: hidden; }
.biz-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Figmaのトリミング位置。
   高さ方向の％は枠高(180px)基準なのでpxに換算（CSSの margin の％は幅基準のため） */
.biz-item__thumb img.crop-a { width: 107.54%; height: 250.83px; margin-left: -3.77%; margin-top: -71px; max-width: none; }
.biz-item__thumb img.crop-b { width: 102.89%; height: 180px; margin-left: -1.45%; max-width: none; }
.biz-item__thumb img.crop-bottom { object-position: bottom; }
.biz-item__thumb img.crop-f { height: 414.67px; margin-top: -202.59px; }  /* kukan 2044:1021 */

.biz-item__cap { display: flex; align-items: flex-start; width: 100%; }
.biz-item__cap p { width: 100%; font-size: 14px; font-weight: 400; line-height: 24px; color: var(--c-blue); }
.biz-item__cap--pad-right { padding-right: 32px; }
.biz-item__cap--pad-left { padding-left: 32px; }

/* 区切り線：Figmaでは高さ0の枠に1pxの線が上側へはみ出す（＝占有高0） */
.biz-hr { width: 100%; max-width: var(--w-content); height: 1px; margin-top: -1px; }

/* 末尾のボタン（Figma 2041:445 / 幅310pxの枠に中央寄せ） */
.biz-cta { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 310px; max-width: 100%; }