@charset "UTF-8";
/* ==========================================================================
   company.css — 会社情報（08 company.html） ページ専用
   参照：CLAUDE.md §3・§4・§6、カンプ 08_corporate_pc_01〜04（PCのみ・SP無し）
   読み込み順：base.css → common.css → page/company.css（url は ../../images/…）
   ・下層共通：c-masthead / c-heading--page / c-breadcrumb / c-contact / c-btn / c-dl-btn を流用
   ・SP無し → TOP/features/works/service の縮退ルール（768px境界）で展開
   ========================================================================== */

.p-company {
  /* ブランド識別色（カンプ実測。他ページ確定でトークン昇格） */
  --co-mission:   #1DA3A2;  /* Mission 円（青緑） */
  --co-vision:    #2673BC;  /* Vision 円（青） */
  --co-plan-light:#8AC54B;  /* ライトプラン（緑） */
  --co-plan-std:  #2673BC;  /* スタンダードプラン（青） */
  --co-plan-prem: #1DA3A2;  /* プレミアムプラン（青緑） */
  --co-ring:      #707070;  /* BRAND CONCEPT 外周円の細線 */
  --co-orbit-dot: #587288;  /* BRAND CONCEPT 周回ドット／グロー色 */
  --co-label-bg:  #ECEBF2;  /* 会社概要 ラベルセル背景（淡い青紫グレー） */
  --co-dotted:    #C9C9C9;  /* 会社概要 値セルの点線 */
}

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

.p-company-hero__lower {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-top: var(--sp-3);
}

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

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

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

/* 右写真下の網点飾り（絶対配置で写真の底部にぴったり密着・右寄せ。装飾＝フローに影響させない） */
.p-company-hero__deco {
  position: absolute;
  top: 100%; /* 写真底部にくっつける */
  right: 0;
  width: 450px; /* 高さは比率維持（height:auto） */
  height: auto;
  pointer-events: none;
}

/* ==========================================================================
   BRAND CONCEPT（大きな外周円の中に見出し＋赤コピー＋リード。左右に Mission/Vision 塗り円）
   ・stage 自体を外周円（border＋radius）にし、中央にテキスト、左右下に塗り円を重ねる。
   ・塗り円は stage の左右へはみ出す（overflow は visible のまま）。
   ========================================================================== */
.p-company-concept {
  padding-block: var(--sp-12) var(--sp-16);
  /* 周回ドットのラッパー（stage同寸・回転）は回転時のAABBが横に√2倍まで広がり、
     狭幅で横スクロールを生むため、横方向のみクリップ（縦はMission/Visionのはみ出しを活かす） */
  overflow-x: clip;
}

.p-company-concept > .l-container { position: relative; }

/* ヒーロー⇔STAFF間の網点飾り（180°回転・左下に配置。装飾）。
   bottom=-(セクション下padding sp-16) で飾り下端をセクション境界（STAFF淡背景の上端）へ密着 */
.p-company-concept__deco {
  position: absolute;
  left: calc(-1 * var(--content-pad)); /* コンテナ左端へ少し食い込ませる（カンプ：左端寄り） */
  bottom: calc(-1 * var(--sp-16));
  width: 450px; /* 高さは比率維持（height:auto） */
  height: auto;
  transform: rotate(180deg);
  pointer-events: none;
  z-index: 0;
}

.p-company-concept__stage {
  position: relative;
  width: min(784px, 100%); /* 背景の外周円 784×784 */
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  border: 1px solid var(--co-ring);
  border-radius: 50%;
}

/* --- 外周円を周回する3つの小球（軌道アニメーション） ---
   仕組み：stage と同寸のラッパー（inset:0）を中心で回転させ、
   球をラッパー天中央（=外周円の線上）に置く。回転で球が円周を周回する。
   3球は animation-delay を1/3周期ずつ負にずらして 120° 間隔に配置。
   球は inner/pole より前のDOM＝塗り円・テキストの背面を通過する（惑星の裏を回る見え方）。 */
/* 軌道ごとに段階変化（指定：球サイズ−20%ずつ／回転速度＋20%ずつ）。
   速度が揃わないため3球の間隔は一定でなくなる（流動的な見え方＝仕様）。
   initial位置は各自の周期基準で 120°/240°（delay＝自周期×1/3・2/3） */
.p-company-concept__orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  --orbit-dur: 21.333s;   /* 基準周期（回転速度75%＝元16s ÷ 0.75） */
  --sphere-size: 14px;    /* 基準サイズ */
  animation: co-orbit var(--orbit-dur) linear infinite;
  will-change: transform;
}
.p-company-concept__orbit--2 { --orbit-dur: 17.778s; --sphere-size: 11.2px; animation-delay: -5.926s; } /* 速度×1.2／サイズ×0.8 */
.p-company-concept__orbit--3 { --orbit-dur: 14.815s; --sphere-size: 8.96px; animation-delay: -9.877s; } /* 速度×1.44／サイズ×0.64 */

.p-company-concept__sphere {
  position: absolute;
  top: calc(var(--sphere-size) / -2); /* 球の中心を外周円の線上（stage天端）へ */
  left: 50%;
  width: var(--sphere-size);
  height: var(--sphere-size);
  margin-left: calc(var(--sphere-size) / -2);
  border-radius: 50%;
  background: var(--co-orbit-dot); /* #587288（3球とも同色） */
}

@keyframes co-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* モーション配慮：周回を止め、3球を120°間隔の静止ドットとして残す */
@media (prefers-reduced-motion: reduce) {
  .p-company-concept__orbit   { animation: none; }
  .p-company-concept__orbit--2 { transform: rotate(120deg); }
  .p-company-concept__orbit--3 { transform: rotate(240deg); }
}

/* 中央テキスト（見出し＋赤コピー＋リード） */
.p-company-concept__inner {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  width: min(80%, 560px);
  text-align: center;
}

.p-company-concept__title {
  font-family: var(--font-en-bold); /* Bold英字＝差し替えフック */
  font-size: 3.75rem; /* 60px */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--c-text);
}

.p-company-concept__copy {
  margin-top: var(--sp-4);
  color: var(--c-accent);
  font-size: 1.75rem; /* 28px */
  font-weight: 700;
  line-height: 1.5;
}

.p-company-concept__lead {
  margin-top: var(--sp-3);
  font-size: 1.375rem; /* 22px */
  font-weight: 700;
  line-height: 2;
}

/* Mission / Vision の塗り円（白文字） */
.p-company-concept__pole {
  position: absolute;
  top: 44%;
  width: 50%;          /* 392×392（背景円784の50%） */
  aspect-ratio: 1 / 1;
  display: grid;
  place-content: center;
  padding: 0 4%;
  border-radius: 50%;
  color: var(--c-white);
  text-align: center;
  z-index: 1;
}

/* 左右の円の外枠円（410×410・1px #707070 のボーダーのみ・塗りなし。円に同心で少し大きく） */
.p-company-concept__pole::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(410 / 392 * 100%);   /* 塗り円392に対し410 */
  height: calc(410 / 392 * 100%);
  transform: translate(-50%, -50%);
  border: 1px solid var(--co-ring); /* #707070 */
  border-radius: 50%;
  pointer-events: none;
}

.p-company-concept__pole--mission { left: -28%;  background: var(--co-mission); }
.p-company-concept__pole--vision  { right: -28%; background: var(--co-vision); }

.p-company-concept__pole-en {
  font-family: var(--font-en);
  font-size: 3.125rem; /* 50px */
  font-weight: 700;
  line-height: 1;
}

.p-company-concept__pole-ja {
  margin-top: 6px;
  font-size: .875rem; /* 14px */
  font-weight: 700;
  letter-spacing: 0;
}

.p-company-concept__pole-text {
  margin-top: var(--sp-3);
  font-size: clamp(.9375rem, 0.75rem + 0.5vw, 1.125rem); /* 15→18px */
  font-weight: 700;
  line-height: 1.7;
}

/* ==========================================================================
   STAFF（3名。写真左＋テキスト右の詳細レイアウト。人物別色＝縦組み英字イニシャル/コメント見出し）
   ========================================================================== */
.p-company-staff {
  padding-block: var(--sp-16);
  background: var(--c-bg-tint);
  overflow-x: clip; /* 偶数カードの右ブリードが画面端で収まるよう（横スクロール防止・スクロールバー分の溢れをクリップ） */
}

.p-company-staff__list {
  display: grid;
  gap: var(--sp-6);
}

.p-company-staff__item {
  --staff-accent: var(--c-blue);
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--sp-8);
  padding: var(--sp-6) 0;
}

/* 中央（偶数）カードのみ白カードで強調（カンプ：3名中2人目が白カード）。
   右に100pxオフセット＋右端を画面端までブリード（右角は角丸なし＝端に密着） */
.p-company-staff__item:nth-child(even) {
  margin-left: 100px;                    /* 全体を右へ100pxオフセット */
  margin-right: calc(50% - 50vw);        /* 右端を画面端まで伸ばす（親=l-container基準のブリード） */
  padding: var(--sp-6) var(--sp-8);
  background: var(--c-white);
  border-radius: 20px 0 0 20px;          /* 左のみ角丸・右は端に付く（角丸なし） */
}

.p-company-staff__item--blue  { --staff-accent: var(--co-vision); }
.p-company-staff__item--green { --staff-accent: var(--co-plan-light); }
.p-company-staff__item--teal  { --staff-accent: var(--co-mission); }

/* --- プロフィール（縦組み英字名｜写真＋役職/氏名） --- */
.p-company-staff__profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 4px;
  align-content: start;
}

.p-company-staff__en {
  writing-mode: vertical-rl;
  grid-row: 1 / 2;
  align-self: start;
  font-family: var(--font-en);
  font-size: 1.875rem; /* 30px */
  font-weight: 700;
  letter-spacing: 0;
  color: var(--c-text);
}

.p-company-staff__en em {
  font-style: normal;
  color: var(--staff-accent); /* イニシャルのみ識別色 */
}

.p-company-staff__photo {
  grid-column: 2 / 3;
  display: block;
  width: 100%;
  aspect-ratio: 5 / 7; /* 素材実寸 500×700 */
  object-fit: cover;
}

.p-company-staff__role {
  grid-column: 2 / 3;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.p-company-staff__position { font-size: var(--fs-base); } /* 16px */

.p-company-staff__name {
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
}

/* --- 詳細（出身地/経歴・コメント） --- */
.p-company-staff__meta {
  display: grid;
  gap: var(--sp-3);
}

.p-company-staff__row {
  display: grid;
  grid-template-columns: 5em minmax(0, 1fr);
  gap: var(--sp-5);
}

/* ラベル：固定幅内で均等割り付け（出身地=3字／経歴=2字 の頭尾を揃える） */
.p-company-staff__row dt {
  font-weight: 500;
  text-align: justify;
  text-align-last: justify;
}

.p-company-staff__row dd { line-height: 1.9; }

/* 経歴「続きを読む」ボタン（35 §5-3）。HTML側 u-sp-only＝PCでは非表示（PCは常に全文）。
   折りたたみの見た目はSPメディアクエリ側で定義。カンプ＝comps/sp/Web 1920 – 1.png */
.p-company-staff__bio-more {
  display: block;
  margin: var(--sp-2) auto 0;
  font-size: .875rem; /* 14px（SP本文と同サイズ） */
  color: var(--c-blue);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 展開後／経歴が閾値（15行）未満のときはJSが hidden を立てる＝ボタン＝白グラデ帯ごと消える。
   上の display 指定が UA の [hidden] を上書きするため明示的に消す（recruit FAQ と同パターン）。
   SPの折りたたみ時ルール（display:flex）にも勝てるよう複合セレクタを併記。 */
.p-company-staff__bio-more[hidden],
.p-company-staff__bio.is-collapsed + .p-company-staff__bio-more[hidden] { display: none; }

.p-company-staff__comment {
  display: grid;
  grid-template-columns: 5em minmax(0, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
}

.p-company-staff__comment-label { font-weight: 500; }

.p-company-staff__comment-title {
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
  line-height: 1.5;
  color: var(--staff-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.p-company-staff__comment-text {
  margin-top: var(--sp-1); /* 見出しと本文の間を詰める（24→8px） */
  line-height: 1.9;
}

.p-company-staff__comment-qual {
  margin-top: var(--sp-2);
  line-height: 1.9;
}

/* ==========================================================================
   COMPANY OVERVIEW（会社概要テーブル：左=グレーラベル／右=点線アンダーライン値）
   ========================================================================== */
.p-company-overview { padding-block: var(--sp-16) 0; }

.p-company-overview__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;              /* 行同士のgapなし */
}

/* 右列（値セル）の一番上に、行区切りと同じ破線ボーダーを付ける */
.p-company-overview__table tr:first-child td {
  border-top: 1px dashed var(--co-dotted);
}

.p-company-overview__table th {
  width: 250px;                       /* ラベル210px + 透明ボーダー40px */
  padding: 20px var(--sp-3);          /* 天地20px */
  border-right: 40px solid transparent; /* 列間40px（透明＝破線が入らないgap） */
  background: var(--co-label-bg);
  background-clip: padding-box;        /* グレー背景を透明ボーダー領域に出さない */
  color: var(--c-text);
  font-size: 1.125rem;                /* 18px */
  font-weight: 700;                   /* Bold */
  text-align: center;
  vertical-align: middle;
}

.p-company-overview__table td {
  padding: 20px 0;             /* 天地20px（列間はth側の透明ボーダーで確保） */
  border-bottom: 1px dashed var(--co-dotted);
  font-size: 1rem;             /* 16px */
  font-weight: 500;            /* Medium */
  line-height: 1.9;
  vertical-align: middle;
}

/* 登録・認定支援機関ブロック（表直下。35 §6 の一行テキスト `p-company-overview__note` を 43a・FN 9/9 で別枠化）。
   PC＝表と同幅・濃紺1px枠・左ラベル（表の見出しセルより濃い濃紺地＋白文字）／右本文（Bold）。表との間 24px（--sp-3）。
   「/」は半角スペースでなく __sep（margin: 0 1em）で余白を制御。
   ラベル幅は表の th と同じ 250px（列間の透明ボーダー40px込みの見た目幅に合わせて本文の左端を揃える） */
.p-company-cert {
  display: flex;
  align-items: stretch;
  margin-top: var(--sp-3);
  border: 3px solid var(--c-navy); /* Hiroshi指示（2026-09-09）：3px で確定 */
}

.p-company-cert__label {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  /* Hiroshi指示（2026-09-09・目標画像）：幅は文字幅＋左右32px の自動幅（旧 250px 固定）・天地12px（旧20px） */
  padding: 12px var(--sp-4);
  background: var(--c-navy);
  color: var(--c-white);
  font-size: 1.125rem; /* 18px＝表の th と同値 */
  font-weight: 700;
  text-align: center;
}

.p-company-cert__body {
  flex: 1 1 auto;
  margin: 0;
  padding: 12px var(--sp-5); /* 天地12px（目標画像。旧20px）・左右40px */
  font-size: 1.0625rem; /* 17px（43b：ID「（ID : 109823000312）」追記で 18px だと 1240px 幅で2行になるため 18→17px。43a 時点は 18px） */
  font-weight: 700;
  line-height: 1.9;
  color: var(--c-text);
}

.p-company-cert__sep { margin: 0 .5em; } /* 目標画像に合わせ 1em → .5em */

.p-company-cert__id { white-space: nowrap; } /* 43b：ID の途中で折り返さない（SPでは ID ごと次行へ） */

/* ==========================================================================
   写真4枚帯（全幅・等幅4分割）
   ========================================================================== */
.p-company-gallery { margin-top: var(--sp-16); }

.p-company-gallery__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.p-company-gallery__list img {
  display: block;
  width: 100%;
  height: clamp(200px, 22vw, 320px);
  object-fit: cover;
}

/* ==========================================================================
   PRICE PLAN（青灰背景・白文字）
   ========================================================================== */
.p-company-price {
  margin-top: var(--sp-16);
  padding-block: var(--sp-16);
  background: var(--c-blue-gray);
  color: var(--c-white);
}

/* 見出し：英字・和文とも白（赤バーは共通） */
.p-company-price .c-heading__en { color: var(--c-white); }
.p-company-price .c-heading__ja { color: var(--c-white); }

.p-company-price__lead {
  margin-top: calc(var(--sp-2) * -1);
  font-size: 1.5rem;   /* 24px */
  font-weight: 500;    /* Medium */
  line-height: 1.9;
}

.p-company-price__group-title {
  margin-top: var(--sp-8);
  font-size: 1.5rem;   /* 24px */
  font-weight: 900;    /* Black */
}

/* リード直後の最初の見出し（経営・財務アドバイザリープラン）はリードから60px */
.p-company-price__lead + .p-company-price__group-title { margin-top: 60px; }

.p-company-price__group-title::before { content: "●"; margin-right: 6px; font-size: .8em; }

/* --- 3プランカード --- */
.p-company-price__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 45px;            /* カード同士の間隔 */
  margin-top: 30px;     /* 見出し（経営・財務アドバイザリープラン）とカードの間 */
  align-items: stretch; /* カードの高さを揃える */
}

.p-company-price__card {
  --plan: var(--c-blue);
  display: flex;             /* 紫ボックスを余白いっぱいに伸ばして高さを揃える */
  flex-direction: column;
  padding: 40px 10px;   /* 天地40px・左右10px */
  background: var(--c-white);
  color: var(--c-text);
  border-radius: 20px;  /* R20 */
}

.p-company-price__card--light { --plan: var(--co-plan-light); }
.p-company-price__card--std   { --plan: var(--co-plan-std); }
.p-company-price__card--prem  { --plan: var(--co-plan-prem); }

.p-company-price__plan-name {
  margin-inline: 24px;         /* カード内項目の左右マージン */
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-gray-light);
  color: var(--plan);
  font-size: 1.375rem; /* 22px */
  font-weight: 700;
  text-align: center;
}

.p-company-price__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: var(--sp-5) 24px 0; /* 上40px・左右24px */
  color: var(--plan);
  font-weight: 900; /* Black */
  line-height: 1;
}

.p-company-price__yen { font-size: 1.625rem; }  /* 26px（Blackは親.price継承） */
.p-company-price__num { font-size: 2.5rem; }    /* 40px（42 §5：旧46px。¥100,000/¥300,000 の「月」折り返し解消のため3プラン同値で縮小・FN許諾） */
.p-company-price__per {
  position: relative;        /* （税別）の配置基準 */
  font-size: 1.625rem;
  font-weight: 900;          /* 26px Black */
  white-space: nowrap;       /* 「〜/月」の途中折れ防止 */
}

/* （税別）：「〜/月」の真上・右寄せに小さく（42 §5・FN 9/2＋Hiroshi配置指定）。
   DOM順は「¥50,000〜/月（税別）」＝読み上げ順を保ったままCSSで上へ。色はプラン色（--plan 継承） */
.p-company-price__tax {
  position: absolute;
  right: 0;
  bottom: calc(100% + 4px);
  font-size: .8125rem;       /* 13px（数字40pxの約1/3） */
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.p-company-price__term {
  width: max-content;
  margin: var(--sp-4) auto 0;
  padding: 8px 24px;
  border: 1px solid var(--c-text);
  border-radius: 8px;
  font-size: 1.25rem;  /* 20px */
  font-weight: 900;    /* Black */
  line-height: 1;
}

.p-company-price__feature {
  flex-grow: 1;               /* カード下端まで伸ばして紫ボックスの高さを揃える */
  margin: var(--sp-5) 24px 0; /* 上40px・左右24px */
  padding: 25px;              /* 薄紫ボックスの内側余白 */
  background: var(--c-bg-tint);
  border-radius: 20px;        /* R20 */
}

.p-company-price__feature ul { list-style: none; padding: 0; } /* 内側ulはクラス無し＝base.css の ul[class] リセット対象外。二重ドット＋既定の左padding(40px)を打ち消す */

.p-company-price__feature li {
  position: relative;
  padding-left: 1.3em;
  font-weight: 500; /* Medium */
  line-height: 2;
}

.p-company-price__feature li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .85em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-text);
}

.p-company-price__notes {
  margin-top: var(--sp-4);
  text-align: right;
  font-size: .875rem; /* 14px */
  line-height: 1.9;
}

/* SP修正09：DLボタン内文言はタブレット・SP（≤1024px）で「M&A報酬表／（譲受希望企業用）」の2行に
   （端末幅によりボタン内で中途半端に折り返されるのを防ぐ） */
.p-company-price__dl-br { display: none; }

@media (max-width: 1024px) {
  .p-company-price__dl-br { display: inline; }

  /* 2行表示時は行間を詰める（共通c-dl-btnの行送り32px→1.4＝約22px。適用はこのボタン群のみ） */
  .p-company-price__mna-btns .c-dl-btn__inner { line-height: 1.4; }
}

/* --- M&A（テキスト＋DLボタン2つ） --- */
.p-company-price__mna {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;          /* 幅が足りなければボタン群をテキスト下へ折り返す（はみ出し防止） */
  gap: var(--sp-4);
  margin-top: 30px;         /* 見出し（●M&A）とボックスの間 */
  padding: var(--sp-6) var(--sp-6); /* 左右は1行に収めるため sp-6 */
  background: var(--c-white);
  color: var(--c-text);
  border-radius: 16px;
}

.p-company-price__mna-text {
  flex-shrink: 0;
  font-size: 1rem;   /* 16px */
  font-weight: 700;  /* Bold */
}

.p-company-price__mna-btns {
  display: flex;
  flex-wrap: wrap;     /* ボタン2つも幅が足りなければ縦積みに折り返す */
  justify-content: flex-end; /* PC＝右寄せ1行。折り返し時は各ボタンが縮小して収まる */
  gap: var(--sp-4);
  min-width: 0;        /* 親フレックス内で縮小可能に（はみ出し防止の要） */
}

/* このセクションのDLボタンは 360px を上限に、幅が足りなければ縮小して折り返す */
.p-company-price__mna-btns .c-dl-btn {
  flex: 0 1 360px;
}

/* --- スポット支援プラン（2列チェックリスト） --- */
.p-company-price__spot {
  margin-top: 30px;         /* 見出し（●スポット支援プラン）とボックスの間 */
  padding: var(--sp-6) var(--sp-8);
  background: var(--c-white);
  color: var(--c-text);
  border-radius: 16px;
}

.p-company-price__spot-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3) var(--sp-8);
}

.p-company-price__spot-list li {
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-line); /* #707070 1px */
  font-weight: 700;
  line-height: 1.6;
}

.p-company-price__spot-list li::before { content: "・"; }

/* ==========================================================================
   レスポンシブ（SPカンプ未支給＝TOP/features/service のSP縮退ルールで展開）
   ========================================================================== */
@media (max-width: 900px) {
  /* BRAND CONCEPT：外周円を解除し、テキスト→Mission→Vision を縦積み */
  .p-company-concept__stage {
    aspect-ratio: auto;
    border: none;
    padding-block: 0;
  }
  .p-company-concept__orbit { display: none; } /* 外周円を外すため軌道球も非表示 */
  .p-company-concept__pole  { animation: none; } /* ドットが無いためグローも停止 */
  .p-company-concept__inner {
    position: static;
    transform: none;
    width: auto;
    max-width: 560px;
    margin-inline: auto;
  }
  .p-company-concept__pole {
    position: static;
    width: min(300px, 80%);
    margin: var(--sp-6) auto 0;
  }

  /* STAFF：プロフィール列を縮小 */
  .p-company-staff__item { grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-5); }

  /* PRICE：カードを2列 */
  .p-company-price__cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .p-company-hero { padding-block: var(--sp-4) 0; }
  .p-company-hero__lower { flex-direction: column; gap: var(--sp-5); }
  .p-company-hero__photos { width: 100%; }
  .p-company-hero__photo { flex: 1 1 0; min-width: 0; width: auto; }
  .p-company-hero__deco,
  .p-company-concept__deco { display: none; } /* 網点飾りはPC専用（SPは縦積みで干渉するため非表示） */

  .p-company-concept { padding-block: var(--sp-8) var(--sp-10); }
  /* SPは大サイズが溢れるため縮退（PCの60/28/22/50pxを縮小）。
     中央ブロックは外周円（353px）内で Mission/Vision と重ならない高さに抑える */
  .p-company-concept__title   { font-size: 1.75rem; }   /* 28px */
  .p-company-concept__copy    { font-size: 1rem; margin-top: var(--sp-2); }    /* 16px＝円内1行 */
  .p-company-concept__lead    { font-size: .875rem; margin-top: var(--sp-2); line-height: 1.9; } /* 14px */

  /* SP配置（SP_会社情報.png カンプ準拠）：
     リング（365px・コンテンツ余白を超えて左右14pxまでブリード）→ Mission → Vision を縦に連結。
     Mission＝リング下縁に49px重なり／Vision＝Mission下縁に17px重なり（いずれもカンプ実測）。
     下へのはみ出し分（円2つ分−重なり）は stage の margin-bottom で確保。周回ドットは再表示 */
  .p-company-concept__stage {
    --stage-w: min(365px, calc(100vw - 28px)); /* カンプ実測：リング径365（393幅時 左右14px） */
    --pole-d: 262px;  /* Mission/Vision円の直径（カンプ実測） */
    --ov-ring: 49px;  /* リングとMissionの重なり（カンプ実測） */
    --ov-pole: 17px;  /* MissionとVisionの重なり（カンプ実測） */
    aspect-ratio: 1 / 1;
    border: 1px solid var(--co-ring);
    width: var(--stage-w);
    margin-inline: calc((100% - var(--stage-w)) / 2);
    margin-top: 0;
    margin-bottom: calc(var(--pole-d) * 2 - var(--ov-ring) - var(--ov-pole));
  }

  .p-company-concept__orbit { display: block; }

  .p-company-concept__inner {
    position: absolute;
    top: 46%; /* カンプ実測：テキストブロックはリング中心よりやや上 */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 94%;
    max-width: none;
  }

  .p-company-concept__pole {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: var(--pole-d);
    margin: 0;
    padding: 0 3%;
  }

  .p-company-concept__pole--mission { top: calc(100% - var(--ov-ring)); }

  .p-company-concept__pole--vision {
    right: auto;
    bottom: auto;
    top: calc(100% - var(--ov-ring) + var(--pole-d) - var(--ov-pole));
  }

  .p-company-concept__pole-en   { font-size: 1.875rem; } /* 30px */
  .p-company-concept__pole-ja   { font-size: .75rem; }
  .p-company-concept__pole-text { font-size: .75rem; letter-spacing: 0; } /* 12px：円内で<br>どおり3行に収める */

  .p-company-staff { padding-block: var(--sp-10); }

  /* STAFF：プロフィールを上、詳細を下に縦積み。プロフィール内は横並び維持 */
  .p-company-staff__item,
  .p-company-staff__item:nth-child(even) {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
    margin-left: 0;                /* SPはオフセット/ブリード解除 */
    margin-right: 0;
    padding: var(--sp-5) var(--sp-3); /* 目視追補8/31：左右40→24px＝コメント見出し（18px×16字=288px）を役物詰め非対応環境でも1行に */
    background: var(--c-white);
    border-radius: 16px;
  }
  .p-company-staff__profile { grid-template-columns: auto minmax(0, 220px); justify-content: start; }
  /* 出身地・経歴などのdl行：SPは「ラベル上・内容下」の縦積み
     （2カラムだと内容列が約5em分狭くなり折り返し過多で読みづらいため） */
  .p-company-staff__row { grid-template-columns: 1fr; gap: var(--sp-1); }
  .p-company-staff__row dt,
  .p-company-staff__comment-label {
    align-self: start;
    padding: 4px 12px; /* 横幅いっぱい（grid stretch）のバー */
    background: var(--c-bg-tint);
    font-weight: 700;
    text-align: center;
    text-align-last: auto; /* PCの均等割り付け（固定5em前提）を解除 */
  }
  .p-company-staff__comment { grid-template-columns: 1fr; gap: var(--sp-2); }

  /* SP修正03/04：スタッフ詳細の調整 */
  .p-company-staff__role { margin-top: 20px; } /* 写真→役職・氏名 20px */
  .p-company-staff__row dd,
  .p-company-staff__comment-text,
  .p-company-staff__comment-qual { font-size: .875rem; } /* 出身地・経歴・コメント本文 14px */
  .p-company-staff__comment {
    margin-top: var(--sp-4);  /* 経歴→区切り線→コメントの余白 32px（40pxから詰め） */
    padding-top: var(--sp-4);
  }
  .p-company-staff__comment-title { font-size: 1.125rem; } /* 強調色文字 18px */

  /* 経歴の折りたたみ（SPのみ。35 §5-3。is-collapsed はJS付与＝JS無効時は全文表示）。
     クランプ＝15行。JS側の STAFF_BIO_MIN_LINES と同値で、15行未満の経歴には「続きを読む」を出さない。 */
  .p-company-staff__bio.is-collapsed {
    position: relative;
    max-height: 28.5em; /* fallback：本文14px×行1.9×15行＝399px */
    max-height: 15lh;
    overflow: hidden;
  }
  /* 「続きを読む」＝グラデーションボックスの中に入る（FN支給 .st0 準拠）。
     ボタン自身が 70px の白グラデ帯となり、折りたたんだ経歴の下端に重なる。
     ・0%透明→45.3%で不透明白→100%白（支給値）。向きは上が透明・下が白＝180deg。
     ・幅は支給値361px固定ではなくカード本文幅に追従（inset-inline:0）。
     ・`transparent` は環境により rgba(0,0,0,0) 補間で中間がくすむため rgba(255,255,255,0) を明示。
     ・展開後はJSが is-collapsed を外し button を hidden にするため、この指定は自動的に外れる。 */
  .p-company-staff__row dd { position: relative; }

  .p-company-staff__bio.is-collapsed + .p-company-staff__bio-more {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 45.3%,
      rgba(255, 255, 255, 1) 100%);
  }

  .p-company-overview { padding-block: var(--sp-10) 0; }
  /* 登録・認定支援機関ブロック（43a）：ラベル上・本文下の縦積み。「/」は u-pc-only で消え、br.u-sp-only で2行になる。
     ラベル＝表の th と同値（16px・8px/16px パディング）。本文＝15px（1行目「中小企業庁「M&A支援機関登録制度」登録機関」＝21字が
     16px だと 393px 幅（本文内寸335px）に収まらず3行になるため。15px×21字=315px で2行を維持）・左右パディングは td と同じ 8px */
  .p-company-cert { flex-direction: column; }
  .p-company-cert__label {
    width: 100%;
    padding: var(--sp-1) var(--sp-2);
    font-size: 1rem;
  }
  .p-company-cert__body {
    padding: 20px var(--sp-1) var(--sp-3);
    font-size: .9375rem; /* 15px */
  }

  /* 会社概要：SPは「ラベル上（全幅センターのバー）・内容下」の縦積み
     （2カラムだと事業内容・取引先企業などの長文が折り返し過多で読みづらいため。スタッフ紹介と同パターン） */
  .p-company-overview__table,
  .p-company-overview__table tbody,
  .p-company-overview__table tr { display: block; }
  .p-company-overview__table th,
  .p-company-overview__table td { display: block; width: 100%; }
  .p-company-overview__table th {
    padding: var(--sp-1) var(--sp-2);
    border-right: none; /* PCの列間40px透明ボーダーを解除 */
    font-size: 1rem;
  }
  .p-company-overview__table td { padding: 20px var(--sp-1) var(--sp-3); } /* SP修正05：帯→本文の上パディング20px */
  .p-company-overview__table tr:first-child td { border-top: none; } /* 縦積みでは上端の破線は不要 */

  .p-company-gallery { margin-top: var(--sp-10); }
  .p-company-gallery__list { grid-template-columns: repeat(2, 1fr); }
  .p-company-gallery__list img { height: clamp(140px, 42vw, 220px); }

  .p-company-price { margin-top: var(--sp-10); padding-block: var(--sp-10); }
  .p-company-price__cards { grid-template-columns: 1fr; }
  .p-company-price__group-title { margin-top: var(--sp-8); }

  /* SP修正07/08：料金プランをコンパクトに（指示のパディング32px・リード18px・価格数字20px） */
  .p-company-price__lead { font-size: 1.125rem; }
  .p-company-price__card { padding: 32px 10px; }        /* 天地40→32px */
  .p-company-price__plan-name { padding-bottom: 32px; } /* プラン名→罫線 32px */
  .p-company-price__price { margin-top: 32px; }         /* 罫線→価格 32px（40pxから詰め） */
  .p-company-price__feature { margin-top: 32px; }       /* 期間→内容ボックス 32px（40pxから詰め） */
  /* 指示「数字の部分20px」は¥・/月（PC26px）への指定と解釈（数字自体20pxだとリード18pxと階層差が出ないため）。
     数字は46pxの約70%＝32pxでリードとの階層を確保 */
  .p-company-price__num { font-size: 2rem; }            /* 価格数字 32px（3プラン共通） */
  .p-company-price__yen,
  .p-company-price__per { font-size: 1.25rem; }         /* ¥・/月 20px */
  .p-company-price__tax { font-size: .6875rem; }        /* （税別）11px（数字32pxの約1/3。42 §5） */
  .p-company-price__mna,
  .p-company-price__spot { padding: var(--sp-5); }
  .p-company-price__mna-text { flex-shrink: 1; } /* PCのflex-shrink:0だとSPで折り返せず横はみ出し */
  .p-company-price__mna-btns { width: 100%; }
  .p-company-price__spot-list { grid-template-columns: 1fr; gap: var(--sp-2); }
  /* 目視追補8/31：❸の2行目（（借換…）を「・」以降の文字位置に揃える＝ぶら下げインデント */
  .p-company-price__spot-list li { padding-left: 1em; }
  .p-company-price__spot-list li::before { display: inline-block; width: 1em; margin-left: -1em; }
  .p-company-price__notes { text-align: left; }
}