@charset "UTF-8";
/* ==========================================================================
   service.css — サービス（05）ページ専用
   参照：CLAUDE.md §3・§4・§6、カンプ 05_service_pc_01〜05
   読み込み順：base.css → common.css → page/service.css（url は ../../images/…）
   ・下層共通：c-masthead / c-heading--page / c-breadcrumb / c-contact / c-btn を流用
   ・5領域の識別色は TOP EXPERTISE（実測確定）と同一：01青 / 02緑 / 03青緑 / 04濃紺 / 05オリーブ
   ========================================================================== */

.p-service {
  /* 5領域の識別色（カンプ実測＝TOP EXPERTISE と同定義） */
  --sv-01: var(--c-blue);   /* #2673BC 財務戦略 */
  --sv-02: #8AC54B;         /* 経営アドバイザリー */
  --sv-03: #1DA3A2;         /* 事業承継・M&A */
  --sv-04: #15668C;         /* セミナー・研修（カンプ実測＝供給アイコン/ TOP EXPERTISE と同一） */
  --sv-05: #C5B74B;         /* 海外進出 */
}

/* ==========================================================================
   ヒーロー（英字マストヘッド＋和文h1＋パンくず＋写真2枚）
   ========================================================================== */
.p-service-hero { padding-block: var(--sp-6) 0; }

/* 大見出し直下の行：左＝パンくず／右＝写真2枚（works と同型＝カンプ準拠） */
.p-service-hero__lower {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-top: var(--sp-3);
}

.p-service-hero .c-breadcrumb { padding-block: var(--sp-2) 0; }

.p-service-hero__photos {
  display: flex;
  flex-shrink: 0;
  gap: var(--sp-4);
}

.p-service-hero__photo {
  display: block;
  width: min(28vw, 345px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

/* ==========================================================================
   イントロ（キャッチ＋リード＋5領域ナビボックス）
   ========================================================================== */
.p-service-intro { padding-block: var(--sp-12) var(--sp-16); }

.p-service-intro__catch {
  font-size: 2.1875rem; /* 35px（指定） */
  font-weight: 900;     /* Black（Noto Sans JP 900。service.html の<link>で900を読込） */
  line-height: 1.5;
  color: var(--c-text); /* #282728 */
}

.p-service-intro__text {
  margin-top: var(--sp-4);
  font-size: var(--fs-base);
  line-height: var(--line-body);
}

/* 5領域ナビ（横並びボックス＋下向きコネクタ） */
.p-service-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;              /* 各ボックスのgap＝20px */
  max-width: 1245px;      /* 5ブロック横並びの最大幅 */
  margin: var(--sp-12) auto 0;
}

.p-service-nav__item {
  --sv: var(--c-blue);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 280px;      /* ボックス高さの基準 */
  padding: 20px 10px;     /* 左右10px／天地20px */
  border: 1px solid var(--c-line); /* 1px #707070 */
  text-align: center;
  color: inherit;
  transition: border var(--dur) var(--ease);
}

.p-service-nav__item--01 { --sv: var(--sv-01); }
.p-service-nav__item--02 { --sv: var(--sv-02); }
.p-service-nav__item--03 { --sv: var(--sv-03); }
.p-service-nav__item--04 { --sv: var(--sv-04); }
.p-service-nav__item--05 { --sv: var(--sv-05); }

/* ホバー/フォーカス：ボックスは動かさず、数字カラーの4px枠のみ。矢印は下へ移動（後述::after）。
   ※浮き上がり（上移動）・ドロップシャドウは付けない（指定） */
.p-service-nav__item:hover,
.p-service-nav__item:focus-visible {
  border: 4px solid var(--sv);
}

.p-service-nav__num {
  font-family: var(--font-en-bold); /* Bold英字＝差し替えフック */
  font-size: 3rem; /* 48px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: var(--sv);
}

/* 楕円バッジ：白文字18px Bold。幅は各ブロック共通（等幅ボックス×同パディングで100%＝同幅） */
.p-service-nav__tag {
  width: 100%;
  margin-top: var(--sp-2);
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--sv);
  color: var(--c-white);
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
}

/* タイトル：24px Black。1行/2行が混在するため、2行分の高さを確保し1行タイトルを天地中央に */
.p-service-nav__name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(1.5rem * 1.5 * 2); /* 24px×1.5行間×2行 */
  margin-top: var(--sp-3);
  font-size: 1.5rem; /* 24px */
  font-weight: 900;  /* Black */
  line-height: 1.5;
  color: var(--c-text);
}

/* 下向きコネクタ（支給SVG v-cmn-11-arw-corner を縦向きに使用＝線＋矢じり一体。装飾）。
   元SVGは横向き（幅51×高13／右下が矢の先端）。90°回転で先端を下に向ける。
   矢印の高さ＝50px。うち20pxをボックス内へ食い込ませる（残り30pxが下へ突き出す）。
   回転中心が要素中心のため、可視の縦中心をボックス下端+5pxに置く＝span[100%-20, 100%+30]。 */
.p-service-nav__item::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 50px;  /* SVG幅＝回転後の縦の長さ＝矢印高さ50px */
  height: 14px;
  background: url(../../images/v-cmn-11-arw-corner.svg) center / contain no-repeat;
  transform: translate(-50%, -2px) rotate(90deg);
  transform-origin: center;
  transition: transform var(--dur) var(--ease);
}

/* ホバー/フォーカス：矢印だけを下へ35px移動（ボックスは固定） */
.p-service-nav__item:hover::after,
.p-service-nav__item:focus-visible::after {
  transform: translate(-50%, 33px) rotate(90deg); /* 基準-2px + 35px */
}

/* ==========================================================================
   詳細セクション 01〜05（共通）
   ========================================================================== */
.p-service-detail {
  --sv: var(--c-blue);
  padding-block: var(--sp-16);
  scroll-margin-top: 96px; /* 固定ヘッダー分のアンカーオフセット */
}

.p-service-detail--tint { background: var(--c-bg-tint); }  /* 01 / 03 / 05 */

.p-service-detail--01 { --sv: var(--sv-01); }
.p-service-detail--02 { --sv: var(--sv-02); }
.p-service-detail--03 { --sv: var(--sv-03); }
.p-service-detail--04 { --sv: var(--sv-04); }
.p-service-detail--05 { --sv: var(--sv-05); }

/* --- 見出しブロック（アイコン｜番号＋タグ＋名称＋説明） --- */
.p-service-detail__lede {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: var(--sp-6);
  align-items: start;
}

.p-service-detail__icon {
  display: grid;
  place-items: center;
  width: 168px;
  height: 168px;
  border: 3px solid var(--sv);
  border-radius: 50%;
}

/* アイコンはSVGを直接読み込む（file:// でも確実に表示。SVG自体がセクション色で色分け済み） */
.p-service-detail__icon img {
  width: 108px;
  height: 108px;
  object-fit: contain;
}

.p-service-detail__head {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-4);
  align-items: center;
}

.p-service-detail__num {
  grid-row: 1 / 3;
  font-family: var(--font-en-bold); /* Bold英字＝差し替えフック */
  font-size: 5rem; /* 実測≒80px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: var(--sv);
}

.p-service-detail__tag {
  align-self: end;
  justify-self: start;
  width: 300px;
  max-width: 100%;
  margin-bottom: var(--sp-1);
  padding: 10px 0; /* 天地10pxずつ */
  border-radius: 999px;
  background: var(--sv);
  color: var(--c-white);
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
  line-height: 1; /* 行間を詰め、天地10pxを実寸で効かせる（総高＝20+10+10=40px） */
  text-align: center;
}

.p-service-detail__name {
  align-self: start;
  font-size: 2.25rem; /* 36px */
  font-weight: 900;   /* Black */
  line-height: 1.3;
  color: var(--c-text); /* #282728 */
}

.p-service-detail__desc {
  margin-top: var(--sp-4);
  font-size: var(--fs-base);
  line-height: var(--line-body);
}

/* 説明中の強調（アクセント色＋下線。カンプの「金融機関目線 × 経営者目線」等）。
   ※<em>は既定でイタリック（斜体）になるため font-style:normal で立てる（指定：斜めにしない） */
.p-service-detail__em {
  color: var(--sv);
  font-style: normal;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- ■支援内容 --- */
.p-service-support { margin-top: var(--sp-10); }

.p-service-support__title {
  margin-bottom: 20px; /* ■支援内容とカードの間隔 */
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-navy);
}

.p-service-support__title::before { content: "■"; margin-right: 4px; }

/* チェックリスト＋写真の2カラム（写真が無いセクションはリスト全幅） */
.p-service-support__cols {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-6);
  align-items: start;
}

.p-service-support__cols--full { grid-template-columns: 1fr; }

/* チェックリスト（枠付きボックスを2列グリッド。●は赤ドット）
   DOM順＝列順（左列→右列）のため column-flow で流し込む（SPはDOM順で縦積み＝SPカンプの並び） */
.p-service-check {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: var(--sp-3);
  max-width: 740px; /* カード2枚並びの最大幅 */
}

.p-service-check--single {
  grid-template-columns: 1fr;
  grid-template-rows: none;
  grid-auto-flow: row;
}

/* 03（写真なし・全幅）は最大幅の制限を外す */
.p-service-support__cols--full .p-service-check { max-width: none; }

.p-service-check__item {
  display: flex;
  align-items: center;
  gap: 6px; /* 赤丸と文字の間隔 */
  padding: 16px 15px; /* 左右15px（天地16px） */
  border: 1px solid var(--c-line); /* #707070 */
  background: var(--c-white);      /* #FFFFFF */
  font-size: 1.125rem;             /* 18px */
  font-weight: 700;
  color: var(--c-text);            /* #282728 */
  line-height: 1.5;
}

.p-service-check__item::before {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-accent);
}

.p-service-support__figure { margin: 0; }

.p-service-support__figure img {
  width: 420px;
  height: 250px;
  max-width: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* 405事業への補足リンク（01セクション）。支援内容カード下端から50px。18px Bold #282728 */
.p-service-note {
  margin-top: 50px;
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  color: var(--c-text); /* #282728 */
}

/* 説明文直下の登録機関注記（01「認定経営革新等支援機関」／03「M&A支援機関登録制度」。42 §3・FN 9/2 → 43a・FN 9/9）：
   上余白は 42 で詰めた値（直上の説明文の段落間隔＝--sp-4）のまま。
   43a：赤字（既存アクセント --c-accent＝支援内容カードの●・フォーム「必須」バッジと同じ赤）＋本文（--fs-base 16px）+3px＝19px。
   PC/SP 同値（SP 側の .p-service-note{16px} が後勝ちになるため、SP ブロックでも同値を再指定）。Bold は .p-service-note を継承。
   405 リンク注記（支援内容カード下）は対象外＝--cert 修飾子で説明文直下の2箇所だけに限定。
   43b：ID「（ID : 109823000312）」は .p-service-note__id（span・nowrap）＝色・サイズは親から継承。
   SP で本文行に収まらない場合は ID ごと2行目へ送られる（ID 文字列の途中では折れない） */
.p-service-note--cert {
  margin-top: var(--sp-4);                  /* 50px → 32px（42） */
  font-size: calc(var(--fs-base) + 3px);    /* 16px + 3px = 19px（43a） */
  color: var(--c-accent);                   /* 赤（43a） */
}

.p-service-note__id { white-space: nowrap; } /* 43b：ID の途中で折り返さない */

/* 登録機関表記のリンク（52・service 03）：色・太さ・サイズは親（--cert）を継承。
   下線＝同ページの強調テキストリンク扱い（.p-service-detail__em）に合わせて underline／offset 3px。
   ホバー＝サイト共通の半透明 opacity .7（c-btn／フッター／news 本文リンク等と同値）＋共通 transition */
.p-service-note__cert-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--dur) var(--ease);
}

.p-service-note__cert-link:hover,
.p-service-note__cert-link:focus-visible { opacity: .7; }

.p-service-note__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit; /* #282728 */
}

/* 矢印はトップのNEWS一覧と同じアイコン（青丸＋白矢印。22px） */
.p-service-note__link::after {
  content: "";
  width: 22px;
  height: 22px;
  background: url(../../images/v-cmn-08-arw3-b-r.svg) center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}

.p-service-note__link:hover::after { transform: translateX(4px); }

/* --- こんな方へ（濃紺の矢印タブ＋説明文） --- */
.p-service-target {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: 40px; /* 「一部…」注記／支援内容から40px */
}

/* 03：比較表（白枠）と「こんな方へ」の間は80px */
.p-service-detail--03 .p-service-target { margin-top: 80px; }

.p-service-target__label {
  flex-shrink: 0;
  position: relative;
  padding: 12px 32px 12px 20px; /* 18px×line-height1 + 上下12px = 42px（三角の高さと一致） */
  background: var(--c-navy);
  color: var(--c-white);
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  line-height: 1;
}

.p-service-target__label::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  border-style: solid;
  border-width: 21px 0 21px 16px; /* 高さ42px相当の三角 */
  border-color: transparent transparent transparent var(--c-navy);
}

.p-service-target__text {
  font-size: 1.125rem; /* 18px */
  line-height: 1.6;
}

/* ==========================================================================
   03 事業承継：再生×成長×承継フロー／比較表／M&Aガイドライン
   ========================================================================== */
.p-service-flow { margin-top: var(--sp-12); }

.p-service-flow__title {
  text-align: center;
  font-size: 2.25rem; /* 36px */
  font-weight: 700;
  color: var(--c-navy);
}

.p-service-flow__key { text-decoration: underline; text-underline-offset: 3px; }
.p-service-flow__key--01 { color: #2673BC; } /* 再生 */
.p-service-flow__key--02 { color: #1DA3A2; } /* 成長 */
.p-service-flow__key--03 { color: #15668C; } /* 承継 */
.p-service-flow__x { margin: 0 .4em; font-weight: 400; }

.p-service-flow__diagram {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px; /* 円⇔矢印の間隔。矢印30pxを挟み円⇔円＝70px */
  margin-top: 100px; /* タイトルと図の間（40px+60px） */
}

.p-service-flow__step {
  flex: 0 0 auto;
  width: 230px;
  text-align: center;
}

.p-service-flow__circle {
  position: relative;
  width: 230px;   /* 白い円の径 */
  height: 230px;
  background: var(--c-white);       /* 白 */
  border: 1px solid var(--c-line);  /* #707070 1px */
  border-radius: 50%;
}

/* フェーズ名は円の下寄り中央に固定（上のバッジと重ならない位置）。文字＝#707070 18px 中央 */
.p-service-flow__phase {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;            /* 白円の天地中央 */
  transform: translateY(-50%);
  padding: 0 12px;
  font-size: 1.125rem; /* 18px */
  font-weight: 700;    /* bold */
  line-height: 1;
  text-align: center;
  color: var(--c-text); /* #282728 */
}

.p-service-flow__phase span {
  display: block;
  margin-top: 20px;    /* 行間20px */
  font-size: 1.125rem; /* 18px */
  font-weight: 700;    /* bold */
  line-height: 1;
  color: var(--c-text); /* #282728 */
}

/* 売り手／買い手バッジ（170px・透明度75%）。
   白い円の中心を基準に、上へ120px・左右へ100px離して重ねる。 */
.p-service-flow__side {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;              /* 1行目（__side-main）と2行目を縦積みで中央寄せ */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 170px;
  padding: 0 10px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  line-height: 33px;   /* 行間15px（18px+15px） */
  text-align: center;
}

.p-service-flow__side br { display: none; } /* 改行はflex縦積みが担う（旧markup互換） */

.p-service-flow__side--seller {
  transform: translate(calc(-50% - 100px), calc(-50% - 120px));
  background: rgba(38, 115, 188, .75);  /* #2673BC 75% */
}
.p-service-flow__side--buyer {
  transform: translate(calc(-50% + 100px), calc(-50% - 120px));
  background: rgba(29, 163, 162, .75);  /* #1DA3A2 75% */
}

/* 円下の箇条書き：文字は左揃え／ブロック（ul）自体は円の中心に配置 */
.p-service-flow__note {
  display: inline-block;
  margin-top: var(--sp-4);
  font-size: 1.125rem; /* 18px */
  font-weight: 700;    /* bold */
  line-height: 36px;   /* 行間36px */
  color: #051E33;
  text-align: left;
}

/* 矢印＝支給SVG v-service-07-arrow.svg（66.62×18・#051E33） */
.p-service-flow__arrow {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 67px;
  height: 18px;
  margin-top: 106px; /* 円の天地中央（230/2−9）に合わせる */
}

.p-service-flow__arrow img { display: block; width: 100%; height: auto; }

/* 比較表 */
.p-service-compare {
  max-width: 1040px;      /* 表を囲む白枠の最大幅 */
  margin: var(--sp-12) auto 0;
  padding: 50px 60px;     /* 天地50px・左右60px */
  background: var(--c-white);
  border-radius: 20px;
}

.p-service-compare__table {
  width: 100%;
  table-layout: fixed; /* 列幅（CoreBiz列436px）を正確に効かせる */
  border-collapse: separate;
  border-spacing: 25px;
}

/* 表内セルは角丸にしない（白枠のみ角丸） */
.p-service-compare__table th,
.p-service-compare__table td {
  padding: 16px 12px;
  text-align: center;
  vertical-align: middle;
  font-size: var(--fs-base);
  font-weight: 700;
  border-radius: 0;
}

.p-service-compare__table thead th:first-child { background: transparent; }

/* 一般的なM&A列：見出しセル（18px・#15668C・bg #CAD7E2） */
.p-service-compare__table th.p-service-compare__col-general {
  width: 24%;
  background: #CAD7E2;
  color: #15668C;
  font-size: 1.125rem; /* 18px */
}

/* CoreBiz列：見出しボックス（幅436px・#15668C・34px Black・天地15px） */
.p-service-compare__table th.p-service-compare__col-corebiz {
  width: 436px;
  padding: 16px 12px;
  background: #15668C;
  color: #ffffff;
  font-size: 2.125rem; /* 34px */
  font-weight: 900;    /* Black */
  line-height: 1;      /* 行間を詰め、天地16pxを実寸で効かせる（総高＝34+16+16≒66px） */
}

.p-service-compare__row-label {
  width: 22%;
  background: #E9E9E9;
  color: var(--c-text);
}

/* 一般的なM&A列：項目セル（16px Medium・#15668C・枠2px #15668C） */
.p-service-compare__table td.p-service-compare__cell-general {
  background: var(--c-white);
  border: 2px solid #15668C;
  color: #15668C;
  font-size: 1rem;   /* 16px */
  font-weight: 500;  /* Medium */
}

/* CoreBiz列：項目ボックス（#1DA3A2・18px Black・天地30px） */
.p-service-compare__table td.p-service-compare__cell-corebiz {
  padding: 30px 12px;
  background: var(--sv-03); /* #1DA3A2 */
  color: #ffffff;
  font-size: 1.125rem; /* 18px */
  font-weight: 900;    /* Black */
  line-height: 1;      /* 行間を詰め、天地30pxを実寸で効かせる */
}

/* M&Aガイドライン宣言ボックス */
.p-service-guideline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-top: 80px; /* 「こんな方へ」と下のガイドラインボックスの間 */
  padding: 40px 50px;          /* 天地40px・左右50px */
  border: 1px solid #051E33;   /* ボーダー#051E33 */
  border-radius: 20px;         /* R20px */
  background: none;            /* 背景なし */
}

.p-service-guideline__body {
  width: 680px;         /* 文字ボックス幅 */
  max-width: 100%;
  color: #282728;
  font-size: 1.125rem;  /* 18px */
  font-weight: 700;     /* bold */
  line-height: 48px;    /* 行間48px */
}

.p-service-guideline__lead { font-weight: 700; }
.p-service-guideline__lead::before { content: "■"; margin-right: 4px; }

/* ダウンロードボタンは共通コンポーネント .c-dl-btn（common.css）へ集約。ここでは配置のみ */
.p-service-guideline .c-dl-btn { flex-shrink: 0; }

/* ==========================================================================
   405認定事業について（淡背景カード）
   ========================================================================== */
.p-service-405 {
  padding-block: var(--sp-12) 0;
  scroll-margin-top: 96px; /* 固定ヘッダー分のアンカーオフセット（.p-service-detail と同方針） */
}

.p-service-405__box {
  padding: 60px 40px;            /* 天地60px・左右40px */
  background: var(--c-bg-tint);   /* #F1EFF8 */
  border: 1px solid #051E33;     /* ボーダー#051E33 1px */
  border-radius: 20px;           /* R20 */
}

/* タイトル：30px Black #051E33。下にボーダー（1px #707070）を敷き、上下20px空ける */
.p-service-405__title {
  padding-bottom: 20px;                 /* タイトル→ボーダー 20px */
  border-bottom: 1px solid #707070;     /* タイトルと本文の間のボーダー */
  font-size: 1.875rem; /* 30px */
  font-weight: 900;    /* Black */
  line-height: 1;      /* 行間を詰め、天地パディング・区切りまでの余白を実寸に */
  color: #051E33;
}

.p-service-405__text {
  margin-top: 20px;    /* ボーダー→本文 20px */
  font-size: 1rem;     /* 16px */
  font-weight: 500;    /* Medium */
  line-height: 32px;   /* 行間32px */
}

/* ==========================================================================
   レスポンシブ（SPカンプ未支給＝TOP/features のSP縮退ルールで展開）
   ========================================================================== */
@media (max-width: 900px) {
  .p-service-nav {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4) var(--sp-3);
  }
  /* 折返しでコネクタ矢印は非表示（縦積みの整合を優先） */
  .p-service-nav__item::after,
  .p-service-nav__item::before { display: none; }

  .p-service-detail__lede { grid-template-columns: 160px 1fr; }
  .p-service-detail__icon { width: 160px; height: 160px; }
  .p-service-detail__icon img { width: 86px; height: 86px; }
}

/* 中間幅：図は904px固定のため、コンテナに収まらない範囲では横スクロールさせる
   （SP（767px以下）と同じ扱い。サイズはPCのまま） */
@media (max-width: 1080px) and (min-width: 768px) {
  .p-service-flow__diagram {
    justify-content: flex-start;
    justify-content: safe center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* overflow-x:auto で overflow-y も auto 扱いになり、上に張り出すサイドバッジが縦クリップされる（08e）。
       PCの margin-top:100px をスクロール内側の padding へ振り替えて張り出し分（実測90px＋余裕10px）を確保。
       見た目の縦位置は不変（margin 100px → padding 100px の等価交換） */
    margin-block-start: 0;
    padding-block-start: 100px;
    margin-inline: calc(var(--content-pad) * -1);
    /* 左＝売り手バッジの左張り出し（実測70px）＋余裕10px。右はスクロール可動域が張り出しを含むため既存のまま */
    padding-inline: 80px var(--content-pad);
  }
}

@media (max-width: 767px) {
  .p-service-hero { padding-block: var(--sp-4) 0; }
  .p-service-hero__lower { flex-direction: column; gap: var(--sp-5); }
  .p-service-hero__photos { width: 100%; }
  .p-service-hero__photo { flex: 1 1 0; min-width: 0; width: auto; }
  .p-service-intro__catch { font-size: 1.375rem; } /* SP:22px（featuresリード見出しのSPカンプ実測に揃える） */

  .p-service-intro { padding-block: var(--sp-8) var(--sp-10); }

  /* 5領域ナビ：2列グリッド（SP_私たちの特長-01 カンプ準拠。05は左半分のみ）。
     カード実測：幅152.5×高145／列間14px・行間16px／番号30px・バッジ14px・名称18px */
  .p-service-nav {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2) 14px;
    margin-top: var(--sp-6);
  }
  .p-service-nav__item {
    min-height: 145px;
    padding: 12px 10px;
  }
  .p-service-nav__num { font-size: 1.875rem; } /* 30px */
  .p-service-nav__tag {
    margin-top: var(--sp-1);
    padding: 4px 8px;
    font-size: .875rem; /* 14px */
    line-height: 1.4;
  }
  .p-service-nav__name {
    min-height: calc(1rem * 1.5 * 2);
    margin-top: var(--sp-1);
    font-size: 1rem; /* 16px（「コンサルティング」がカード内1行に収まる上限） */
  }

  .p-service-detail { padding-block: var(--sp-10); }

  .p-service-detail__lede {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    justify-items: start;
  }
  .p-service-detail__icon { width: 118px; height: 118px; justify-self: center; } /* SP_私たちの特長-02 カンプ実測118px・中央 */
  .p-service-detail__icon img { width: 64px; height: 64px; }
  .p-service-detail__num { font-size: 2.5rem; }

  /* 見出しブロック：タグの固定幅300pxとnameの36pxが393pxで溢れるため縮退
     （番号40px＋タグ=列幅いっぱい・文字16px＋名称22px。features SOLUTION の縮退比率を踏襲） */
  .p-service-detail__head {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--sp-2);
  }
  .p-service-detail__tag {
    width: 100%;
    font-size: var(--fs-base);
    padding: 8px 0;
  }
  .p-service-detail__name { font-size: 1.375rem; }

  .p-service-support__cols { grid-template-columns: 1fr; }
  .p-service-check,
  .p-service-check--single {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row; /* DOM順（＝列順）で縦積み＝SPカンプの並び */
    gap: 12px; /* SP_私たちの特長-02 カンプ実測：囲み間12〜14px */
  }
  /* 囲み：文字15px Noto Bold／天地12px・左右28px（指定） */
  .p-service-check__item {
    padding: 12px 28px;
    font-size: .9375rem; /* 15px */
  }
  .p-service-support__figure img { width: 100%; }

  /* 405事業リンク：矢印サークルを右端配置（SP_私たちの特長-02 カンプ実測49px）
     FN修正指示（2026-08-07）：文字を2pt下げ 18→16px／サークルも縮小 48→40px */
  .p-service-note { font-size: var(--fs-base); } /* 16px */
  .p-service-note--cert { font-size: calc(var(--fs-base) + 3px); } /* 43a：登録機関注記は SP も 19px（赤字・Bold） */
  .p-service-note__link {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
  }
  .p-service-note__link::after {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  .p-service-target {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }

  /* 「こんな方へ」（38 §4・FN 8/27）：本文16px。ブロック自体に枠パディングは無いため、
     「パディング半分」は唯一の余白＝ラベル（濃紺タブ）の内側余白に適用（12px 32px 12px 20px→半分）。
     タブ高さ 42px→30px に伴い三角も 21px→15px（高さ整合） */
  .p-service-target__text { font-size: var(--fs-base); } /* 18px→16px */
  .p-service-target__label { padding: 6px 16px 6px 10px; }
  .p-service-target__label::after { border-width: 15px 0 15px 12px; }

  /* フロー図：PC配置を維持したまま約0.6倍に縮小し、横スクロールで閲覧
     （SP_私たちの特長-04 カンプ。画面端までブリード／先頭の売り手バッジぶん左padding確保） */
  .p-service-flow__title { font-size: 1.5rem; } /* 24px（指定） */

  .p-service-flow__diagram {
    justify-content: flex-start;
    gap: 10px; /* 白丸の縁⇔縁＝70px（指定）：step余白5×2＋gap10×2＋矢印40 */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: var(--sp-5);
    margin-inline: calc(var(--content-pad) * -1);
    padding: 60px 24px var(--sp-2) 60px; /* 上＝バッジ（110px）はみ出し分／左＝売り手バッジ分 */
  }

  .p-service-flow__step { width: 150px; } /* 箇条書き12px×12字が1行で収まる幅 */
  .p-service-flow__circle { width: 140px; height: 140px; margin-inline: auto; }

  .p-service-flow__phase { padding: 0 6px; font-size: .6875rem; } /* 11px（指定）。左右padは「ディール実行フェーズ」1行化のため縮小 */
  .p-service-flow__phase span { margin-top: 10px; font-size: .6875rem; }

  /* バッジ＝青/緑円（指定：110px）。位置はPCの関係（中心から上120px・左右100px）の0.6倍 */
  .p-service-flow__side {
    width: 110px;
    height: 110px;
    padding: 0 6px;
    font-size: .6875rem; /* 11px（指定：2行目「企業価値の最大化」等） */
    line-height: 1.7;
  }
  .p-service-flow__side-main { font-size: 1.125rem; } /* 1行目「売り手/買い手」＝18px（指定） */
  .p-service-flow__side--seller { transform: translate(calc(-50% - 60px), calc(-50% - 72px)); }
  .p-service-flow__side--buyer  { transform: translate(calc(-50% + 60px), calc(-50% - 72px)); }

  .p-service-flow__note {
    margin-top: var(--sp-3);
    font-size: .625rem; /* 10px Bold（指定） */
    line-height: 20px;  /* 行間20px（指定） */
  }

  .p-service-flow__arrow {
    width: 40px; /* 支給SVGを0.6倍（66.62→40px） */
    height: 11px;
    margin-top: 64px; /* 縮小後の円の天地中央（140/2−5.5） */
  }

  /* 比較表：PC版と同じ組みのまま横スクロールで見せる（34 §5・FN 8/27 PDF）。
     旧実装（列幅・フォントを縮めて393pxに収める）は廃止。
     書式は「支援の流れ」図のスクロール化（08d）に準拠 */
  .p-service-compare {
    padding: 22px 12px; /* 天地は旧SP指定を踏襲。左右はスクロール窓の見切れ防止で最小限 */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .p-service-compare__table { min-width: 920px; } /* PC実寸（白枠1040−左右pad120）＝PCの列幅・フォントのまま */
  /* PC組み再現のため、SP縮小レイアウト用にセル内へ入れていた改行（u-sp-only）は表内でのみ無効化 */
  .p-service-compare__table br.u-sp-only { display: none; }

  .p-service-guideline {
    flex-direction: column;
    align-items: stretch;
    /* 「こんな方へ」との間隔を半分に（80px→40px）。FN指示の朱書き「パディングを半分に縮めて」は
       2ブロック間の縦の空きを指す（矢印がこの区間を示している） */
    margin-top: 40px;
    /* 上＝枠内の天の空きを半分に（40px→20px）。左右20px＝ボタン幅を確保しテキストの途中折れを防ぐ（20 §A）。
       下は40pxのまま（朱書きの指示は天のみ） */
    padding: 20px 20px var(--sp-5);
  }
  /* ガイドライン遵守宣言の本文（38 §5・FN 8/27）：前後ブロックの本文と同値＝16px・行間29px（PC=18px/48pxのまま） */
  .p-service-guideline__body {
    font-size: var(--fs-base);
    line-height: 29px;
  }
  .p-service-guideline .c-dl-btn { align-self: flex-start; }

  .p-service-405__box { padding: var(--sp-5) 20px; } /* 左右のみ20px（20 §A） */

  /* 見出し30pxのままだと375px幅で「て」1文字残りが再発するためAとセットで縮小（20 §B） */
  .p-service-405__title { font-size: 1.75rem; } /* 28px */
}