/* service.css — OUR SERVICEセクション（Figma: Section 2008:9928）
   実値: padding 114px 0 144px / ブロック間 gap 208px / max-width 1200px
         キャッチ 42.667px Black ls 0.1em / Service 72px Black
         カード 2x2 340px高 radius 16px 影 0,0,17.5,10% タイトル 25.6px */

.service-section {
  position: relative;
  display: flex;
  justify-content: center;
  padding: var(--space-114) 0 var(--space-144);
  overflow: hidden;
}

/* 全体TOPのみ下余白120px（Figma: 4038:8006 pb120。サービスページは144のまま） */
.home .service-section {
  padding-bottom: var(--space-120);
}

.service-section__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-208);
  width: 100%;
  max-width: var(--layout-max);
}

/* 透かし英字（青グラデ・2行をずらして配置）。
   枠内の白い透かし .service-catch__wm と「同じ1本の文字列」で、写真枠の外だけを青で見せる。
   .service-catch__frame は .service-catch__visual に inset:0 で重なるため両者の座標系は同一。
   基準を __visual に揃えることで、PC/SPどちらでも同じ座標値を書けば必ず一致する。
   ⚠ 座標は .service-catch__wm--line1/2 と必ず同じ値を保つこと。 */
.service-section__watermark {
  position: absolute;
  z-index: -1; /* 青帯 ::before / 小矩形 ::after の背面（__visual 内に閉じる） */
  margin: 0;
  font-size: var(--font-size-watermark);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap;
  background: var(--gradient-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.1;
  pointer-events: none;
}

.service-section__watermark--line1 {
  top: 7.5rem;
  left: -25rem; /* ⚠ Figma実値 left -400 */
}

.service-section__watermark--line2 {
  top: 19.375rem;
  left: -15.5rem; /* ⚠ Figma実値 left -248 */
}

/* --- キャッチコピー + 写真コラージュ（Figma: 2008:9071）--- */
.service-catch {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.service-catch__title {
  margin: 0;
  width: 33.75rem;
  flex-shrink: 0;
  white-space: nowrap; /* Figma: 改行は明示指定。枠540pxを超える行はみ出しを許容 */
  color: var(--color-black);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

.service-catch__visual {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 27.25rem;
}

/* 青＋白の透かしペアを持つバリアント。
   層分離を作り、.service-section__watermark の z-index:-1 をこの中に閉じ込める
   （作らないと最上位の重ね合わせ文脈まで抜け、背景の裏に回って消える）。
   ⚠ container-type: inline-size は使わない。Chromeで __frame の中身（写真・白透かし）が
     初回描画されない不具合を踏むため、SPの比例縮小は vw 計算（末尾のSPブロック）で行う。 */
.service-catch__visual--wm-pair {
  isolation: isolate;
}

/* 帯状の青グラデ矩形（Figma: 2008:9075 548x304 radius 40） */
.service-catch__visual::before {
  content: "";
  position: absolute;
  top: 8.25rem;
  left: 0;
  width: 34.25rem;
  height: 19rem;
  border-radius: var(--radius-xl);
  background: var(--gradient-blue-fill);
}

/* 右上の小さな青グラデ矩形（Figma: 2008:9076 145x145 radius 32） */
.service-catch__visual::after {
  content: "";
  position: absolute;
  top: 3.8125rem;
  left: 30.3125rem;
  width: 9.0625rem;
  height: 9.0625rem;
  border-radius: var(--radius-32);
  background: var(--gradient-blue-fill-diag);
}

.service-catch__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  z-index: 1;
}

/* コラージュ内の白透かし英字（Figma: 2008:9078 / 2008:9079） */
.service-catch__wm {
  position: absolute;
  margin: 0;
  font-size: var(--font-size-watermark);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap;
  color: var(--color-white);
  opacity: 0.1;
  pointer-events: none;
}

/* ⚠ Figma実値 left -400 / -248。.service-section__watermark--line1/2 と必ず同じ値を保つこと */
.service-catch__wm--line1 {
  top: 7.5rem;
  left: -25rem;
}

.service-catch__wm--line2 {
  top: 19.375rem;
  left: -15.5rem;
}

/* --- 紹介ブロック（Figma: Section 2094:10114 テキスト+コラージュ）--- */
.service-section--intro {
  padding-bottom: var(--space-160);
}

/* サービスTOPの「リビカルなら」は、PROBLEMパネル下端から83pxで本文が始まる
   （Figma 2652:8112: ノッチ43px + 40px）。ノッチ分は .wall の margin-bottom:40px が
   受け持つため、ここは残り40px。他ページの --intro はFigma未確認のためページ限定。 */
@media (min-width: 768px) {
  .page-template-page-service .service-section--intro {
    padding-top: var(--space-40);
  }
}

.service-intro {
  display: flex;
  align-items: center;
  gap: var(--space-40);
}

.service-intro__body {
  display: flex;
  flex: 1;
  min-width: 0;
  max-width: 33.75rem;
  flex-direction: column;
  gap: var(--space-24);
}

.service-intro__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.service-intro__title {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

.service-intro__subtitle {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-widest);
}

/* タイトル・サブタイトルは PHP 側で 行(__line) > 文節(__clause) の入れ子に分解される。
   PCは __line が block ＝ Figma通りの行組み。文節はそのまま流し込む。
   SPでは __clause を inline-block にし、行に収まらない文節だけが次行へ送られる
   ＝改行は文節の境目でのみ起き、語の途中では割れない。 */
.service-intro__line {
  display: block;
}

.service-intro__text {
  margin: 0;
  color: var(--color-text-body);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-widest);
  text-align: justify;
}

/* コラージュ右上に浮く小矩形（Figma: 2060:10442 72x72 radius 24） */
.service-catch__visual--intro .service-catch__deco {
  position: absolute;
  top: -.5625rem;
  left: 23.4375rem;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-24);
  background: var(--gradient-blue-fill-diag);
  z-index: 2;
}

/* introバリアントは小矩形の位置が5pxだけ左（Figma: left 480） */
.service-catch__visual--intro::after {
  left: 30rem;
}

/* --- トップ導入ブロック「リビカルなら」（Figma: サービスTOP Value 4083:8574）--- */
.service-catch__title--lh-loose {
  line-height: 1.86; /* ⚠ Figma実値（このブロックのみ）要デザイン確認 */
}

/* 見出し（タイトル＋サブタイトル）は gap 8、本文との間は body 側の gap 24
   （Figma: Frame 1963 gap-8 / Heading 3 gap-24）*/
.service-catch__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.service-catch__subtitle {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-widest);
}

.service-catch__lead {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-wider);
}

.service-catch__lead strong {
  color: var(--color-primary);
  font-size: var(--font-size-h2-sm);
  font-weight: var(--font-weight-black);
}

.service-catch__body {
  display: flex;
  width: 33.75rem; /* Figma実値 540px */
  flex-shrink: 0;
  flex-direction: column;
  gap: var(--space-24); /* Figma実値: 見出しブロックと本文の間 */
}

/* catch2: フレーム548px固定・写真は枠内・透かしはグレー版 */
.service-catch__visual--catch2 .service-catch__frame {
  width: 34.25rem;
  inset: auto;
  height: 27.25rem;
}

.service-catch__visual--catch2 .service-catch__deco {
  top: 0;
}

.service-catch__visual--catch2::after {
  left: 29.75rem;
}

.service-catch__wm--gray {
  background: var(--gradient-watermark-gray);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.1;
}

.service-catch__wm--blue {
  background: var(--gradient-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.1;
}

/* --- OpEx紹介ブロック（Figma: 業務改善診断 2247:65193）--- */
/* OpEx文字アート（Figma: 618x392 左1 上43） */
.service-catch__opex {
  position: absolute;
  top: 2.6875rem;
  left: 1px;
  width: 38.625rem;
  height: 24.5625rem;
  pointer-events: none;
}

/* OpExバリアント: 青矩形なし（Figmaで非表示）・白透かし150px・写真は left 75 */
.service-catch__visual--opex::before,
.service-catch__visual--opex::after {
  content: none;
}

/* 透かしペア（青=枠外／白=枠内）は同じ1本の文字列。どちらも基準は __visual なので
   まったく同じ座標・サイズを与える（ずらすと枠の境目で文字が段差になる）。 */
.service-catch__visual--opex .service-catch__wm,
.service-catch__visual--opex .service-section__watermark {
  font-size: var(--font-size-watermark-sm);
}

.service-catch__visual--opex .service-catch__wm--line1,
.service-catch__visual--opex .service-section__watermark--line1 {
  top: 10.0625rem;
  left: -35rem;
}

.service-catch__visual--opex .service-catch__wm--line2,
.service-catch__visual--opex .service-section__watermark--line2 {
  top: 21.4375rem;
  left: -14.125rem;
}

/* --- サービス一覧ブロック（Figma: 2008:9082）--- */
.service-block {
  display: flex;
  gap: var(--space-80);
  align-items: flex-start;
}

.service-block__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-80);
  width: 17.5rem;
  flex-shrink: 0;
}

.service-block__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* 左バー付きラベル（Figma: 2008:9085 8px青ボーダー + pl 32px） */
.service-block__label {
  margin: 0;
  border-left: .5rem solid var(--color-primary);
  padding-left: var(--space-32);
  color: var(--color-black);
  font-size: var(--font-size-h3-lg);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

.service-block__title-en {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-en-title);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-heading);
}

/* サービス一覧ボタン（Figma: 2008:9090 px32 py16 内側208px） */
.btn--service {
  width: 17rem;
  padding: var(--space-16) var(--space-32);
  font-size: var(--font-size-h3);
}

/* カードグリッド 2x2（Figma: 2008:9096 gap 24 各行340px） */
.service-cards {
  position: relative;
  display: grid;
  flex: 1;
  min-width: 0;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 21.25rem;
  gap: var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* カード群背面のぼかし影（Figma: 2008:9098 #E2E2E2 blur 50 multiply） */
.service-cards::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 27rem;
  height: 23.6875rem;
  background: var(--color-shadow-soft-2);
  filter: blur(50px);
  mix-blend-mode: multiply;
}

.service-cards > li {
  display: contents;
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-drop);
  color: var(--color-black);
  text-decoration: none;
}

.service-card--fill {
  background: var(--gradient-card-blue);
  color: var(--color-white);
}

.service-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
}

.service-card__title {
  margin: 0;
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
  white-space: nowrap;
}

.service-card--fill .service-card__title {
  font-weight: var(--font-weight-black);
}

.service-card__text {
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

.service-card__img {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

.service-card__img img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 全体TOP: 左カラムを540pxに広げる（Figma: 2246:58657） */
.service-block--wide .service-block__side {
  width: auto;
  flex: 1;
  min-width: 17.5rem;
}

/* --- 横長サービスカード（Figma: 全体TOP 2246:58669）--- */
.service-rows {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 41.25rem;
  flex-shrink: 0;
  margin: 0;
  margin-left: auto;
  padding: 0;
  list-style: none;
}

/* カード群背面のぼかし影（Figma: 2246:58670 #E2E2E2 blur50 multiply 50%） */
.service-rows::before {
  content: "";
  position: absolute;
  top: 5.875rem;
  left: 2.375rem;
  width: 34.8125rem;
  height: 33rem;
  background: var(--color-shadow-soft-2);
  filter: blur(50px);
  mix-blend-mode: multiply;
  opacity: 0.5;
}

.service-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: var(--space-32);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-drop);
  color: var(--color-black);
  text-decoration: none;
  transition: color 0.3s ease;
}

/* hover時に青グラデ塗り＋白文字になる（Figmaの --fill 見た目はhover状態のデザイン）。
   グラデはtransitionできないため、::beforeのオーバーレイをフェードさせる */
.service-row::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: var(--gradient-card-blue-2);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-row > * {
  position: relative; /* オーバーレイ（::before）より手前に出す */
}

.service-row:hover {
  color: var(--color-white);
}

.service-row:hover::before {
  opacity: 1;
}

.service-row:hover .service-row__title {
  font-weight: var(--font-weight-black);
}

@media (prefers-reduced-motion: reduce) {
  .service-row,
  .service-row::before,
  .service-row__arrow::after {
    transition: none;
  }
  .service-row:hover .service-row__arrow::after {
    transform: none;
  }
}

.service-row__body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-16);
  align-self: stretch;
}

.service-row__title {
  margin: 0;
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

/* タイトルは文節ごとに <span> で区切られている（PHP側で出力）。
   各文節を inline-block の塊にすることで、行に収まらない文節だけが次行へ送られ、
   改行は文節の境目でのみ起きる（語の途中では割れないため nowrap は不要）。
   文節1つが行幅を超えたときだけ内部で折り返す＝破綻しないための保険。 */
.service-row__title > span {
  display: inline-block;
}

.service-row__text {
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

.service-row__visual {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: center;
}

.service-row__visual img {
  width: 10rem;
  height: 10rem;
  object-fit: contain;
}

.service-row__arrow {
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
}

.service-row__arrow::after {
  content: "";
  width: 1rem;
  height: .75rem;
  background: currentColor;
  mask: url("../../images/icon-arrow-right-sm.svg") center / contain no-repeat;
  -webkit-mask: url("../../images/icon-arrow-right-sm.svg") center / contain no-repeat;
  transition: transform 0.3s ease;
}

/* hover: 矢印を少し右へ（カード全体のhoverで発火） */
.service-row:hover .service-row__arrow::after {
  transform: translateX(var(--space-4));
}

/* === SP ================================================================= */
@media (max-width: 767px) {
  .service-section {
    padding: var(--space-64) 0 var(--space-80);
  }
  .home .service-section {
    padding-bottom: var(--space-48);
  }
  .service-section__inner {
    gap: var(--space-80);
    padding-inline: var(--space-24);
  }

  /* キャッチ＋コラージュ：縦積み */
  .service-catch {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .service-catch__title,
  .service-catch__body {
    width: 100%;
  }
  .service-catch__title {
    white-space: normal;
    font-size: var(--font-size-h2);
  }
  /* サブタイトルはPCのFigma実値（h2-lead）だとSPでは大きく見えるため、
     タイプスケール1段下（h3-lg）に落とす。PC側はFigma実値のまま。 */
  .service-catch__subtitle {
    font-size: var(--font-size-h3-lg);
  }
  .service-catch__lead strong {
    font-size: var(--font-size-h2);
  }
  /* PC用の<br>を無効化し、SPは自然折返しに任せる */
  .service-catch__lead br { display: none; }
  .service-catch__lead {
    font-size: var(--font-size-h3-lg);
  }
  .service-catch__visual {
    flex: none;
    width: 100%;
    height: 20rem;
  }
  /* 青グラデ帯・小矩形：全幅コンテナ基準に縮小・再配置 */
  .service-catch__visual::before {
    top: 5rem;
    width: 90%;
    height: 12rem;
  }
  .service-catch__visual::after,
  .service-catch__visual--intro::after,
  .service-catch__visual--catch2::after {
    left: auto;
    right: 0;
    top: 1.5rem;
    width: 6rem;
    height: 6rem;
  }
  .service-catch__visual--intro .service-catch__deco,
  .service-catch__visual--catch2 .service-catch__deco {
    left: auto;
    right: 4.5rem;
    width: 3.5rem;
    height: 3.5rem;
  }
  .service-catch__visual--catch2 .service-catch__frame {
    width: 100%;
    height: 20rem;
  }
  .service-catch__opex {
    top: 1rem;
    left: 0;
    width: 100%;
    height: auto;
  }
  /* フレーム内透かし：縮小してフレーム基準に再配置
     （--wm-pair のペアは下でまとめて上書きするのでここでは扱わない） */
  .service-catch__wm {
    font-size: var(--font-size-en-title);
  }
  .service-catch__wm--line1,
  .service-catch__visual--catch2 > .service-catch__wm--line1 {
    top: 2rem;
    left: 1rem;
  }
  .service-catch__wm--line2 {
    top: 8.5rem;
    left: 4rem;
  }

  /* 透かしペア（青=枠外／白=枠内）は、写真枠 .service-catch__frame を基準にした
     PC版の比例縮小版にする。PCの枠幅 41.25rem（= --layout-max 75rem − 見出し 33.75rem）が
     SPでは写真枠の実幅（画面幅 − __inner の左右padding）まで縮むので、その比率を
     --wm-unit（= 縮小後の「PC版1rem」の長さ）として持ち、font-size・top・left を
     すべて同じ率で縮める。数値はPC版の rem 値とそのまま1:1で対応する。
     画面外へのはみ出しは body の overflow-x: clip で切り取る。 */
  .service-catch__visual--wm-pair {
    --wm-unit: calc((100vw - var(--space-24) * 2) / 41.25);
  }
  .service-catch__visual--wm-pair .service-section__watermark,
  .service-catch__visual--wm-pair .service-catch__wm {
    font-size: calc(var(--wm-unit) * 12.5); /* PC: 12.5rem */
  }
  /* 横位置だけはPC版の比率をそのまま使わず、1行目の左端を画面左端にフィットさせる。
     .service-catch__visual は __inner の padding 分だけ内側にあるので、その分を戻す。
     2行目は1行目からの相対ずれ（PC: -15.5 −(-25) = 9.5rem）を比例維持したまま、
     1行目と同じ量だけ移動する＝2行のバランスはPC版のまま。 */
  .service-catch__visual--wm-pair .service-section__watermark--line1,
  .service-catch__visual--wm-pair .service-catch__wm--line1 {
    top: calc(var(--wm-unit) * 7.5); /* PC: 7.5rem */
    left: calc(var(--space-24) * -1);
  }
  .service-catch__visual--wm-pair .service-section__watermark--line2,
  .service-catch__visual--wm-pair .service-catch__wm--line2 {
    top: calc(var(--wm-unit) * 19.375); /* PC: 19.375rem */
    left: calc(var(--wm-unit) * 9.5 - var(--space-24));
  }

  /* OpEx紹介ブロックのペアも同じ考え方。PC版の枠幅（38.75rem）と透かしの実値
     （150px = 9.375rem / line1 top 10.0625・left -35 / line2 top 21.4375・left -14.125）
     が上のキャッチ版と違うので、専用の --wm-unit と比率で上書きする。
     2行目の相対ずれは PC: -14.125 −(-35) = 20.875rem。 */
  .service-catch__visual--opex.service-catch__visual--wm-pair {
    --wm-unit: calc((100vw - var(--space-24) * 2) / 38.75);
  }
  .service-catch__visual--opex.service-catch__visual--wm-pair .service-section__watermark,
  .service-catch__visual--opex.service-catch__visual--wm-pair .service-catch__wm {
    font-size: calc(var(--wm-unit) * 9.375); /* PC: 9.375rem */
  }
  .service-catch__visual--opex.service-catch__visual--wm-pair .service-section__watermark--line1,
  .service-catch__visual--opex.service-catch__visual--wm-pair .service-catch__wm--line1 {
    top: calc(var(--wm-unit) * 10.0625); /* PC: 10.0625rem */
    left: calc(var(--space-24) * -1);
  }
  .service-catch__visual--opex.service-catch__visual--wm-pair .service-section__watermark--line2,
  .service-catch__visual--opex.service-catch__visual--wm-pair .service-catch__wm--line2 {
    top: calc(var(--wm-unit) * 21.4375); /* PC: 21.4375rem */
    left: calc(var(--wm-unit) * 20.875 - var(--space-24));
  }

  /* 紹介ブロック：縦積み */
  .service-intro {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-32);
  }
  .service-intro__body {
    max-width: 100%;
  }
  .service-intro__title {
    font-size: var(--font-size-h2);
  }
  /* SPのタイトルは行の固定改行を解き、文節（__clause）単位でだけ折り返す */
  .service-intro__title .service-intro__line {
    display: inline;
  }
  .service-intro__subtitle {
    font-size: var(--font-size-h3-lg);
    line-height: var(--line-height-heading);
  }
  .service-intro__text {
    font-size: var(--font-size-body);
  }
  .service-intro__clause {
    display: inline-block;
  }


  /* サービス一覧：サイド→カードの縦積み。カードは2カラム維持 */
  .service-block {
    flex-direction: column;
    gap: var(--space-40);
  }
  .service-block__side {
    width: 100%;
    gap: var(--space-32);
  }
  /* 英字タイトルはSPではタイプスケール一段下（72px → 64px）に落とす */
  .service-block__title-en {
    font-size: var(--font-size-large);
  }
  /* 全体TOP（--wide）は Service → ラベル → カード一覧 → ボタン の順に並べ替える。
     __side を透過させて heading・btn・__rows を .service-block の同じ列に並べ、
     order で指定する（__rows をボタンの前に挟むため __side の箱があると割り込めない）。
     heading は箱のまま残し、ラベルと Service の間隔 var(--space-16) を保つ。 */
  .service-block--wide .service-block__side {
    display: contents;
  }
  .service-block--wide .service-block__heading {
    order: 1;
  }
  .service-block--wide .service-block__title-en {
    order: 1;
  }
  .service-block--wide .service-block__label {
    font-size: var(--font-size-h4);
    order: 2;
    padding-left: var(--space-16);
  }
  .service-block--wide .service-rows {
    order: 2;
  }
  .service-block--wide .btn--service {
    order: 3;
    align-self: center; /* .service-block は align-items: flex-start なので個別に中央寄せ */
  }
  .service-cards {
    grid-auto-rows: auto;
  }
  .service-card {
    min-height: 14rem;
    padding: var(--space-16);
    gap: var(--space-8);
  }
  .service-card__title {
    white-space: normal;
    font-size: var(--font-size-h3);
  }
  /* 背面ぼかし影：グリッド全体に追従 */
  .service-cards::before {
    width: 100%;
    height: 100%;
  }

  /* 横長カード */
  .service-rows {
    width: 100%;
  }
  .service-rows::before {
    top: 3rem;
    left: 1rem;
    width: 90%;
    height: 90%;
  }
  .service-row {
    padding: var(--space-24);
  }
  .service-row__title {
    font-size: var(--font-size-h3);
  }
  /* タイトルの折返しは文節 <span> の inline-block で全幅共通に効くため、
     SP専用の white-space 上書きは不要（PC側の定義を参照）。 */
  /* SPは画像を右上の装飾として絶対配置し、本文（タイトル/説明）が
     カード幅を広く使えるようにする（横並び半々だとテキストが割れるため） */
  .service-row__visual {
    position: absolute;
    top: var(--space-16);
    right: var(--space-16);
    flex: none;
    min-width: 0;
    pointer-events: none;
  }
  .service-row__visual img {
    width: 5rem;
    height: 5rem;
  }
  .service-row__body {
    padding-right: 5.5rem;
  }
}

/* 右下の矢印（Figma: 16x12 currentColorに追従） */
.service-card__arrow {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: var(--space-4);
}

.service-card__arrow::after {
  content: "";
  width: 1rem;
  height: .75rem;
  background: currentColor;
  mask: url("../../images/icon-arrow-right-sm.svg") center / contain no-repeat;
  -webkit-mask: url("../../images/icon-arrow-right-sm.svg") center / contain no-repeat;
}