@charset "UTF-8";
/* ============================================================
   HOKUSEI PRODUCTS - 下層ページ共通スタイル（sub.css）
   style.css（トークン・c-共通・TOP用p-）に追加で読み込む。
   WordPress化時は style.css と分けて enqueue する想定。
   デザイン基準（参考デザイン）の下層ページの型
   （巨大英字タイトル＋和文キッカー＋右上パンくず＋次ページナビ）を踏襲
   ============================================================ */

/* ============================================================
   c-page-header: 下層ページヘッダー
   ============================================================ */
.c-page-header {
  position: relative;
  padding: calc(var(--header-h) + clamp(50px, 8vh, 100px)) 0 clamp(40px, 6vh, 70px);
  background: var(--color-white);
}
.c-page-header__inner { position: relative; }
/* .c-breadcrumb を除外: 特異性0-3-0のこのルールが .c-breadcrumb(0-1-0) の
   position:absolute を上書きし、右上配置が効かなくなっていた不具合の修正 */
.c-page-header__inner > *:not(.c-deco):not(.c-breadcrumb) { position: relative; z-index: 1; }
.c-page-header__title {
  font-family: var(--font-en);
  font-size: var(--fs-title-en);
  font-weight: 600;
  letter-spacing: var(--ls-display);
  line-height: 1.05;
  color: var(--color-deep-navy);
}
.c-page-header__kicker {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--ls-kicker);
  color: var(--color-deep-navy);
  margin-top: 12px;
}
/* 記事詳細など、巨大タイトルを一段抑える用途（本文が主役の下層） */
.c-page-header__title--compact { font-size: clamp(4.6rem, 6vw, 8rem); }
/* パンくず（右上、デザイン基準の型） */
.c-breadcrumb {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
}
/* パンくずリンクはシルバー(#C9D1D9 on白=約1.9:1)でWCAG AA不合格だったため、
   ディープネイビー+opacityで実効コントラストを確保 */
.c-breadcrumb a { color: var(--color-deep-navy); opacity: 0.55; transition: opacity 0.25s var(--ease), color 0.25s var(--ease); }
.c-breadcrumb a:hover { color: var(--color-hokusei-blue); opacity: 1; }
.c-breadcrumb__sep {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-silver);
}
.c-breadcrumb [aria-current="page"] { color: var(--color-deep-navy); }
@media (max-width: 767px) {
  .c-breadcrumb { position: static; margin-top: 18px; }
}

/* ============================================================
   下層ページの装飾モチーフ（TOPページのc-decoを流用）
   波＝ハブとなる導入節／青海波＝データ・事業系／航路＝プロセス・歩み／
   稜線＝価値観・沿革／波紋＝拠点・接点。TOPページと同じ意味づけで
   各下層ページのc-sec-head／c-page-headerに展開し、装飾ゼロだった
   下層ページの密度をTOPと揃える
   ============================================================ */
/* c-sec-headは英字キッカー(1.4rem)+和文見出しがTOPより詰まっているため、
   デコは小さめ・見出しの上に大きくかからない位置に留める */
.c-deco--head-l { top: -52px; left: -30px; width: 120px; }
.c-deco--head-r { top: -46px; right: -14px; width: 110px; }
.c-deco--ph     { top: 14px; right: 2%; width: 130px; }
.c-deco--tone-blue   { color: var(--deco-blue); }
.c-deco--tone-silver { color: var(--deco-silver); }
.c-deco--tone-green  { color: var(--deco-green); }
@media (max-width: 767px) {
  .c-deco--head-l, .c-deco--head-r { top: -40px; width: 88px; }
  .c-deco--ph { top: 2px; right: 0; width: 84px; }
}

/* ============================================================
   下層セクション共通
   ============================================================ */
.p-sub-sec { padding-block: clamp(60px, 9vh, 110px); }
.p-sub-sec--tint { background: var(--color-mist); }
/* 下層の中見出し（英字キッカー＋和文見出しの型） */
.c-sec-head { position: relative; margin-bottom: clamp(32px, 5vh, 56px); }
.c-sec-head > *:not(.c-deco) { position: relative; z-index: 1; }
.c-sec-head__en {
  display: block;
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  color: var(--color-hokusei-blue);
  margin-bottom: 12px;
}
.c-sec-head__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: var(--ls-heading);
  line-height: 1.5;
  text-wrap: balance;
}
.c-sec-head__lead {
  margin-top: 16px;
  font-size: var(--fs-base);
  line-height: 2.0;
  max-width: 720px;
  text-wrap: pretty;
}

/* ============================================================
   c-fact-strip: 数字ファクトの横並びチップ（採用ページ発、汎用化）
   ============================================================ */
.c-fact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}
.c-fact-strip__item {
  flex: 1 1 auto;
  min-width: 150px;
  background: var(--color-white);
  border: 1px solid var(--color-silver);
  border-radius: var(--radius-md);
  padding: 20px 28px;
  text-align: center;
}
.c-fact-strip__label { font-size: var(--fs-xs); letter-spacing: 0.08em; opacity: 0.7; }
.c-fact-strip__value {
  margin-top: 4px;
  /* 数字は英字書体（Plus Jakarta）、和文単位はZen Kakuへフォールバックさせる合成スタック。
     数値スタットの書体を timeline/date と統一する */
  font-family: var(--font-en), var(--font-ja);
  font-size: clamp(2rem, 2.4vw, 2.6rem);
  font-weight: 600;
  color: var(--color-hokusei-blue);
  line-height: 1.3;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   c-table: 会社概要テーブル
   ============================================================ */
.c-table {
  width: 100%;
  max-width: 860px;
  border-collapse: collapse;
}
.c-table th,
.c-table td {
  padding: 22px 10px;
  border-bottom: 1px solid var(--color-silver);
  text-align: left;
  vertical-align: top;
  font-size: var(--fs-base);
  line-height: 1.9;
}
.c-table th {
  width: 200px;
  font-weight: 700;
  color: var(--color-deep-navy);
  white-space: nowrap;
}
@media (max-width: 767px) {
  .c-table th, .c-table td { display: block; width: 100%; padding: 10px 0; }
  .c-table th { border-bottom: none; padding-bottom: 0; font-size: var(--fs-sm); color: var(--color-hokusei-blue); }
  .c-table td { padding-top: 4px; }
}

/* ============================================================
   c-timeline: 沿革タイムライン（縦線＋年号）
   ============================================================ */
.c-timeline {
  position: relative;
  max-width: 860px;
  padding-left: 24px;
}
.c-timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-harbor);
}
.c-timeline__item {
  position: relative;
  padding: 0 0 34px 22px;
}
.c-timeline__item::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-white);
  border: 3px solid var(--color-hokusei-blue);
}
.c-timeline__year {
  font-family: var(--font-en);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-hokusei-blue);
  line-height: 1.2;
}
.c-timeline__body { margin-top: 6px; font-size: var(--fs-base); line-height: 2.0; }
.c-timeline__note { font-size: var(--fs-sm); color: var(--color-deep-navy); opacity: 0.7; margin-top: 4px; }

/* ============================================================
   c-media-row: 画像（円形クロップ）＋テキストの交互2カラム
   ============================================================ */
.c-media-row {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
  padding-block: clamp(36px, 6vh, 64px);
}
.c-media-row--reverse .c-media-row__visual { order: 2; }
.c-media-row__visual {
  width: min(100%, 46vh);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  /* AI的なアイソメ画像をやめ、クリーンなブランドグラデのプレースホルダに（2026-07-17）
     実写真設定時は c-cover-img が上に載って覆う。 */
  background: radial-gradient(125% 125% at 30% 24%, #EDF7FA 0%, #DDEFF2 46%, #CBE4EB 100%);
  box-shadow: inset 0 0 0 1px rgba(11, 31, 58, 0.06), 0 20px 50px rgba(11, 31, 58, 0.08);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
/* 下層ページの円形ジオラマ共通ホバー（company/contact独自の円もまとめて対象に） */
.c-media-row__visual:hover,
.p-company-profile__visual:hover,
.p-contact-lead__visual:hover,
.p-about-message__visual:hover {
  transform: scale(1.035);
  box-shadow: inset 0 0 0 1px rgba(11, 31, 58, 0.06), 0 26px 60px rgba(11, 31, 58, 0.14);
}
@media (prefers-reduced-motion: reduce) {
  .c-media-row__visual, .p-company-profile__visual, .p-contact-lead__visual, .p-about-message__visual { transition: none; }
  .c-media-row__visual:hover, .p-company-profile__visual:hover, .p-contact-lead__visual:hover, .p-about-message__visual:hover { transform: none; }
}
.c-media-row__title {
  font-size: clamp(2rem, 2.2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.c-media-row__no {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.4em;
  color: var(--color-hokusei-blue);
}
.c-media-row__text { margin-top: 16px; font-size: var(--fs-base); line-height: 2.1; }
.c-media-row__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.c-media-row__tags li {
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 8px 14px;
  border: 1px solid var(--color-silver);
  border-radius: 999px;
  background: var(--color-mist);
}
@media (max-width: 767px) {
  .c-media-row { grid-template-columns: 1fr; gap: 24px; }
  .c-media-row--reverse .c-media-row__visual { order: 0; }
  .c-media-row__visual { width: min(78vw, 340px); }
}

/* ============================================================
   c-card-grid: 汎用カードグリッド（拠点・グループ会社・募集職種）
   ============================================================ */
.c-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.c-info-card {
  position: relative;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-silver);
  border-radius: var(--radius-card);
  padding: 26px 26px 24px;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
/* 上辺のアクセントバー：ホバーで左から伸びる（D-028＝差し色はHokusei Blue1色に統合） */
.c-info-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--color-hokusei-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
@media (hover: hover) {
  .c-info-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-hokusei-blue);
  }
  .c-info-card:hover::before { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .c-info-card { transition: none; }
  .c-info-card:hover { transform: none; }
}
.c-info-card__label {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-hokusei-blue);
  margin-bottom: 8px;
}
.c-info-card__title { font-size: var(--fs-lg); font-weight: 700; line-height: 1.5; letter-spacing: var(--ls-heading); }
.c-info-card__text { margin-top: 8px; font-size: var(--fs-sm); line-height: 1.9; }

/* ============================================================
   c-entry: 記事本文の組版（news詳細等）
   ============================================================ */
.c-entry { max-width: 760px; }
.c-entry__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  font-size: var(--fs-sm);
}
.c-entry__date { font-family: var(--font-en); letter-spacing: 0.06em; color: var(--color-deep-navy); opacity: 0.7; }
.c-entry__cat {
  font-size: var(--fs-x2s);
  line-height: 1;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-harbor);
  color: var(--color-deep-navy);
}
.c-entry__cat--event  { background: var(--color-harbor); }
.c-entry__cat--media  { background: var(--color-hokusei-blue); color: var(--color-white); }
.c-entry__cat--notice { background: var(--color-silver); }

/* c-entry__nav: 記事詳細の前後ナビ */
.c-entry__nav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--color-silver);
}
.c-entry__nav-link {
  max-width: 46%;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--color-deep-navy);
  opacity: 0.85;
  transition: opacity 0.25s var(--ease);
}
.c-entry__nav-link:hover { opacity: 1; color: var(--color-hokusei-blue); }
.c-entry__nav-link--next { text-align: right; margin-left: auto; }
.c-entry__nav-label { display: block; font-size: var(--fs-x2s); letter-spacing: 0.1em; opacity: 0.6; margin-bottom: 6px; }
.c-entry__title {
  font-size: clamp(2.2rem, 2.6vw, 3rem);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
}
.c-entry__body p { margin-bottom: 1.4em; font-size: var(--fs-base); line-height: 2.2; }
.c-entry__body h2 {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.6;
  margin: 2em 0 0.8em;
  padding-left: 16px;
  border-left: 4px solid var(--color-hokusei-blue);
}

/* ============================================================
   c-news-list: ニュース一覧（日付・カテゴリ・タイトルの行）
   ============================================================ */
.c-news-list { max-width: 860px; }
.c-news-list__item { border-bottom: 1px solid var(--color-silver); }
.c-news-list__link {
  display: grid;
  grid-template-columns: 110px 90px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 24px 6px;
  transition: background-color 0.25s var(--ease);
}
.c-news-list__link:hover { background: var(--color-mist); }
.c-news-list__date { font-family: var(--font-en); font-size: var(--fs-sm); letter-spacing: 0.06em; opacity: 0.7; }
.c-news-list__cat {
  font-size: var(--fs-x2s);
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--color-harbor);
  color: var(--color-deep-navy);
  text-align: center;
}
/* カテゴリごとの色分け（トーンのみ変化、規定7色の範囲内） */
.c-news-list__cat--event  { background: var(--color-harbor); }
.c-news-list__cat--media  { background: var(--color-hokusei-blue); color: var(--color-white); }
.c-news-list__cat--notice { background: var(--color-silver); }
.c-news-list__title { font-size: var(--fs-base); font-weight: 500; line-height: 1.7; }
.c-news-list__arrow { color: var(--color-hokusei-blue); }
@media (max-width: 767px) {
  .c-news-list__link { grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 6px 12px; }
  .c-news-list__date { grid-row: 1; }
  .c-news-list__cat { grid-row: 1; justify-self: start; grid-column: 2; }
  .c-news-list__title { grid-column: 1 / -1; }
  .c-news-list__arrow { display: none; }
}

/* ============================================================
   c-form-skeleton: 問い合わせフォーム（静的モック・送信なし）
   ============================================================ */
.c-form { max-width: 720px; }
.c-form__row { margin-bottom: 26px; }
.c-form__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.c-form__req {
  display: inline-block;
  margin-left: 8px;
  font-size: var(--fs-x2s);
  font-weight: 500;
  color: var(--color-white);
  background: var(--color-hokusei-blue);
  border-radius: 4px;
  padding: 2px 8px;
  vertical-align: 2px;
}
.c-form__input,
.c-form__textarea,
.c-form__select {
  width: 100%;
  font: inherit;
  font-size: var(--fs-base);
  padding: 14px 16px;
  border: 1px solid var(--color-silver);
  border-radius: 10px;
  background: var(--color-white);
  color: var(--color-deep-navy);
}
.c-form__input:focus,
.c-form__textarea:focus,
.c-form__select:focus { outline: 2px solid var(--color-hokusei-blue); outline-offset: 1px; }
.c-form__textarea { min-height: 180px; resize: vertical; }
.c-form__note { font-size: var(--fs-sm); opacity: 0.75; margin-top: 6px; }
.c-form__submit { margin-top: 10px; }

/* ============================================================
   c-cta-band: 下層共通のContact誘導帯（フッター直前）
   ============================================================ */
.c-cta-band {
  background: var(--color-deep-navy);
  color: var(--color-white);
  padding-block: clamp(60px, 9vh, 100px);
  text-align: center;
}
.c-cta-band__title {
  font-family: var(--font-en);
  font-size: clamp(3.2rem, 4.5vw, 5.6rem);
  font-weight: 600;
  letter-spacing: var(--ls-display);
  line-height: 1.1;
}
.c-cta-band__lead { margin-top: 14px; font-size: var(--fs-base); letter-spacing: 0.06em; opacity: 0.85; }
.c-cta-band .c-btn-pill {
  margin-top: 30px;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.55);
}
.c-cta-band .c-btn-pill:hover { background: var(--color-white); color: var(--color-deep-navy); }

/* ============================================================
   c-next-nav: ページ末尾の次ページ誘導（デザイン基準 c-next01 相当）
   ============================================================ */
.c-next-nav { background: var(--color-mist); }
.c-next-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-block: clamp(70px, 11vh, 130px);
  text-align: center;
  transition: background-color 0.3s var(--ease);
}
.c-next-nav__link:hover { background: var(--color-harbor); }
.c-next-nav__label {
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  color: var(--color-deep-navy);
  opacity: 0.7;
}
.c-next-nav__title {
  font-family: var(--font-en);
  font-size: clamp(3.6rem, 5.5vw, 6.8rem);
  font-weight: 600;
  letter-spacing: var(--ls-display);
  line-height: 1.1;
  color: var(--color-deep-navy);
}
.c-next-nav__arrow { font-size: 2rem; color: var(--color-hokusei-blue); margin-top: 6px; }

/* 一覧末尾などの補足注記 */
.c-list-note { margin-top: 24px; font-size: var(--fs-sm); opacity: 0.7; }

/* ============================================================
   c-todo-badge: 要クライアント確認の可視マーカー
   ============================================================ */
.c-todo-badge {
  display: inline-block;
  font-size: var(--fs-x2s);
  line-height: 1;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--color-harbor);
  color: var(--color-deep-navy);
  vertical-align: middle;
  margin-left: 8px;
}

/* ============================================================
   英語ページ用の微調整
   和文向けの広い行間(2.0〜2.2)は英文には間延びするため、
   英文の可読最適域(1.6〜1.7)へ引き締める。字間もやや広めに。
   ============================================================ */
/* 英文はpalt（和文約物詰め）不要。本文トラッキングは0が最適域（和文の0.04emは英文で間延びる）。
   見出しは詰め、ラベルは広め、という英文タイポの標準に合わせる */
.p-en { letter-spacing: 0; font-feature-settings: normal; }
.p-en .c-sec-head__title { letter-spacing: -0.01em; line-height: 1.3; }
/* 英文本文・リード・カード文の行間を可読最適域へ。行末の孤立語をprettyで回避 */
/* 英文本文の1行が95〜110字と長く読みにくかったため、可読最適域の65〜75字へ（B-4/独立QA） */
.p-en .c-sec-head__lead { line-height: 1.7; max-width: 68ch; text-wrap: pretty; }
.p-en .c-info-card__text { line-height: 1.6; text-wrap: pretty; }
.p-en .c-info-card__title { line-height: 1.3; letter-spacing: 0; }
.p-en .c-info-card__label { letter-spacing: var(--ls-label); }
.p-en .c-table th,
.p-en .c-table td { line-height: 1.55; }
.p-en .c-cta-band__lead { line-height: 1.5; }
.p-en .c-page-header__kicker { letter-spacing: 0.08em; }

/* ホクセイ正式パレット：下層ページ固有コンポーネント */
.p-sub-sec--tint { background: var(--color-mist); }
.c-info-card__label,
.c-sec-head__en { color: var(--color-hokusei-blue); }
.c-news-list__link:hover { background: var(--color-aqua-mist); }
.c-entry__cat--event,
.c-news-list__cat--event { background: var(--color-aqua-mist); color: var(--color-deep-navy); }
.c-next-nav__link:hover { background: var(--color-aqua-mist); }
.c-page-header__title.c-title-echo::before { -webkit-text-stroke-color: rgba(45, 184, 197, 0.34); }

/* 下層ページもトップと同じ、明るく鮮やかなアクアの色文法へ。 */
.p-sub-sec--tint { background: var(--color-aqua-mist); }
.c-info-card,
.c-fact-strip__item {
  border-color: rgba(45, 184, 197, 0.30);
  box-shadow: 0 10px 28px rgba(45, 184, 197, 0.10);
}
.c-info-card::before { background: var(--color-aqua); }
.c-info-card__label { color: var(--color-aqua); }

/* ============================================================
   About: 企業理念（MVV）を参考サイトの構成へ寄せる（2026-07-15）
   ------------------------------------------------------------
   参考（アリスト /about/）の実装を実測した結果：
   ・.c-bg-circle01 … padding:313px 0 ＋ 上下に円弧PNG(100%×313px)、中央は白ベタ
   ・.about-purpose-sec ×3 … 「01 Mission ／ 私たちの果たす使命」の見出しの下に
     grid で 画像=左(x73) / 本文=右(x638)。3つとも同じ並び（交互ではない）
   こちらは円弧をPNGではなく border-radius の楕円指定で作る（画像不要・可変幅に追従）。
   横半径50% × 縦313px の角丸を4隅に指定すると、上下がドーム状に切れる。
   ============================================================ */

/* --- 円弧で切った白面（参考の c-bg-circle01 相当）---------------
   参考サイト（アリスト /about/）の実装：
     padding: 313px 0 ＋ 上下に円弧PNG(100%×313px)、中央は白ベタ
   ここでは円弧をPNGではなく border-radius の楕円指定で作る
   （画像不要・可変幅に追従）。横半径50% × 縦313px の角丸を4隅に
   指定すると、上下がドーム状に切れる。 */
.c-arc-sec {
  position: relative;
  background: var(--color-white);
  border-radius: 50% / var(--arc, 313px);
  padding-block: calc(var(--arc, 313px) * 0.62);
}
@media (max-width: 1100px) { .c-arc-sec { --arc: 180px; } }
@media (max-width: 767px)  { .c-arc-sec { --arc: 90px; } }

/* --- MVVを1つずつ大きく縦展開 --- */
.p-about-philosophy__item + .p-about-philosophy__item {
  margin-top: clamp(72px, 9vh, 132px);
}
/* 見出し「01 Mission ／ 私たちの果たす使命」 */
.p-about-philosophy__head {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  align-items: baseline;
}
.p-about-philosophy__no {
  font-family: var(--font-en);
  font-size: clamp(1.3rem, 1.1vw, 1.6rem);
  font-weight: 700;
  color: var(--color-gold, #D19A2E);
  letter-spacing: 0.08em;
}
.p-about-philosophy__en {
  position: relative;
  grid-column: 2;
  /* グリッド項目は既定で列幅いっぱいに伸びる。背後の筆の帯を文字幅に
     密着させるため、内容幅で止める（伸びると帯が1234pxまで広がった） */
  justify-self: start;
  font-family: var(--font-en);
  font-size: clamp(3.6rem, 4.6vw, 6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--color-deep-navy);
}
.p-about-philosophy__ja {
  grid-column: 2;
  margin-top: 10px;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-hokusei-blue);
}
/* 画像=左 / 本文=右（参考と同じ並び） */
.p-about-philosophy__con {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(28px, 3.5vh, 48px);
}
.p-about-philosophy__img { margin: 0; }
.p-about-philosophy__catch {
  font-size: clamp(2.2rem, 2.6vw, 3.4rem);
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: 0.04em;
}
.p-about-philosophy__catch-en {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-en);
  font-size: 0.62em;
  font-weight: 700;
  color: var(--color-hokusei-blue);
}
.p-about-philosophy__text {
  margin-top: 18px;
  font-size: var(--fs-sm);
  line-height: 2.0;
  text-wrap: pretty;
}
@media (max-width: 900px) {
  .p-about-philosophy__con { grid-template-columns: 1fr; }
}

/* ============================================================
   About ヒーロー（2026-07-16）— 参考サイト（アリスト /about/）の再現
   ------------------------------------------------------------
   あちらの実装を実測：
     .about-intro__mv { position:sticky; inset:0; z-index:-1;
                        min-height:100dvh; height:100% }
     .about-intro__mv img { position:absolute; inset:0; object-fit:cover }
     .about-intro__mv:after { inset:0; background:rgba(250,246,235,.85);
                              opacity:0; transition:opacity … }
     .about-intro:has(.about-intro__con.is-animated) .about-intro__mv:after { opacity:1 }
     .about-intro__con { display:grid; place-items:center; min-height:100dvh }
   → 全画面の画像が sticky で貼り付き、スクロールしてテキストが現れると
     ベールが被さって画像がウォーターマーク化する。
   ベールの色はクリームではなくホクセイの地の色にする。
   ============================================================ */
.p-about-intro { position: relative; }
.p-about-intro__mv {
  position: sticky;
  top: 0;
  z-index: 0;              /* 参考は -1 だが、こちらは地の白より前に出す必要がある */
  width: 100%;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
}
.p-about-intro__mv img,
.p-about-intro__mv .c-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* TOPのヒーロー(.p-hero__bg)と同じ彩度・明度の底上げを掛け、
     同じイラストが同じ見え方になるようにする */
  filter: var(--illust-filter);
}
/* ベール：テキストが現れると被さる */
.p-about-intro__mv::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.88);
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.33, 0, 0.2, 1);
}
.p-about-intro:has(.js-intro.is-intro-shown) .p-about-intro__mv::after { opacity: 1; }

/* テキスト面：MVの「下」に普通に続ける。
   当初 margin-top:-100dvh で引き上げてMVに重ねたが、それだと
   読み込み直後からテキストが画面内にあり、ベールが即座に掛かって
   「画像 → スクロール → ベール」の変化が消えた（実測で確認）。
   参考サイトは負のマージンを使わず、sticky のMVの上をテキストが
   通過する構造。MV(100dvh)＋テキスト(100dvh)＝親200dvh となり、
   MVはテキストが通り過ぎる間ちょうど貼り付く。 */
.p-about-intro__con {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: transparent !important;
}
@media (max-width: 767px) {
  .p-about-intro__mv { min-height: 70dvh; height: 70dvh; }
  .p-about-intro__con { min-height: 70dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .p-about-intro__mv::after { opacity: 1; }
}

/* ============================================================
   Our Purpose ラベル ／ Next Contents（2026-07-16）
   参考サイト（アリスト /about/）の実装を実測して合わせる：
     .c-head02       { display:flex; flex-wrap:wrap;
                       justify-content:space-between; align-items:center }
     .c-head02__main { font-size:1.6rem }
     .c-links01__in  { display:flex; flex-direction:column; justify-content:center;
                       align-items:flex-start; position:relative;
                       border:1px solid; border-radius:15px;
                       min-height:140px; padding:40px 50px 40px 40px }
   ============================================================ */

/* --- Our Purpose ←→ （企業理念） の対向ラベル --- */
.c-head02 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: clamp(40px, 6vh, 80px);
}
.c-head02__en {
  font-family: var(--font-en);
  font-size: clamp(1.6rem, 1.6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-deep-navy);
}
.c-head02__main {
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-hokusei-blue);
}

/* --- Next Contents --- */
.c-next01 {
  padding-block: clamp(72px, 11vh, 140px);
}
.c-next01__message {
  font-size: clamp(1.9rem, 2.3vw, 3rem);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: clamp(40px, 6vh, 72px);
}
.c-next01__head {
  font-family: var(--font-en);
  font-size: clamp(1.8rem, 2.1vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--color-hokusei-blue);
  margin-bottom: 16px;
}
.c-links01 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.c-links01__in {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  border: 1px solid var(--color-silver, #C9D1D9);
  border-radius: 15px;
  min-height: 140px;
  padding: 40px 50px 40px 40px;
  background: var(--color-white);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.c-links01__in .is-txt {
  font-size: clamp(1.5rem, 1.5vw, 1.8rem);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.c-links01__arrow {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-hokusei-blue);
  color: #fff;
  font-size: 1.3rem;
  transition: transform 0.4s var(--ease);
}
.c-links01__in:hover {
  border-color: var(--color-hokusei-blue);
  box-shadow: 0 14px 34px rgba(11, 31, 58, 0.10);
}
.c-links01__in:hover .c-links01__arrow { transform: translateY(-50%) translateX(4px); }
@media (max-width: 767px) {
  .c-links01 { grid-template-columns: 1fr; }
  .c-links01__in { padding: 28px 56px 28px 24px; min-height: 96px; }
}

/* ============================================================
   About：TOPの角丸パネル感を適用（2026-07-16）
   TOPをマルイユナイト式の角丸パネルで組んであるので、Aboutも同じ面の
   作りに揃える。面を“切る”円弧(c-arc-sec)とは併存しないため無効化する。
   .p-about でスコープ：.p-sub-sec は company/contact など7ページ共通で、
   ここで全体に効かせると他ページを巻き込む。
   ============================================================ */
.p-about .c-arc-sec {
  /* 円弧は使わない（パネルと併存しない）。ヒーロー直後の面も普通の面に */
  border-radius: 0;
  padding-block: 0;
  background: none;
}
.p-about .p-sub-sec {
  --gap: clamp(12px, 2.9vw, 40px);
  --r: clamp(14px, 1.8vw, 24px);
  --R: clamp(28px, 6.4vw, 88px);
  position: relative;
  margin-inline: var(--gap);
  margin-block: calc(var(--gap) / 2);
  border-radius: var(--r);
  padding-block: clamp(56px, 8vh, 104px);
}
/* ヒーローのテキスト面はMVに重なるのでパネルにしない */
.p-about .p-about-intro__con {
  margin-inline: 0;
  margin-block: 0;
  border-radius: 0;
  padding-block: 0;
}
/* 大きい角を章ごとに左下・右上へ振る（TOPと同じリズム） */
.p-about .p-sub-sec:nth-of-type(odd)  { border-radius: var(--r) var(--r) var(--r) var(--R); }
.p-about .p-sub-sec:nth-of-type(even) { border-radius: var(--r) var(--R) var(--r) var(--r); }
/* パネルの色：TOPと同じ4系統 */
.p-about .p-sub-sec--tint            { background: #E1E9F4 !important; }  /* スカイ */
.p-about .p-about-philosophy         { background: #F0EBE2 !important; }  /* サンド：企業理念 */
.p-about .p-sub-sec:nth-last-of-type(2) { background: #DEF0E8 !important; } /* ミント：商社観 */

/* ============================================================
   MVVの構図：参考サイトの実装値に合わせる（2026-07-16）
   ------------------------------------------------------------
   PC版を実測した結果：
     __head span.is-deco  { top:0; left:0; width:100vw;
                            margin-left:calc(50% - 50vw) }   ← 画面幅いっぱい
     __head span.is-deco svg { width:720px;
                               margin-left:calc(50% - 820px) } ← 720pxの巨大な筆跡
     __head        { max-width:1060px; margin:0 auto 60px }
     __head-num    { position:absolute; top:1em; left:-2em }  ← 番号は見出しの左外
     __con         { grid-template-columns: minmax(0,1fr) 612px; gap:0 50px }
     __img         { width:100% }
   こちらは筆跡を見出し幅(254px)にしていた＝別物だった。720pxへ。
   ============================================================ */
.p-about-philosophy__head {
  position: relative;
  z-index: 1;
  display: block;                 /* 参考はgridではなく素の積み上げ */
  /* overflow:hidden は付けない。付けると左へ張り出した筆跡(308px分)と
     番号「01」が切られて消えた（実測で確認）。参考サイトは筆跡側を
     100vw で持たせて枠の制約を外していたので、こちらも枠は切らない。 */
}
/* 番号は見出しの左外へ（参考: top:1em; left:-2em） */
.p-about-philosophy__no {
  position: absolute;
  top: 1em;
  left: -1.6em;
}
.p-about-philosophy__en {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
}
.p-about-philosophy__ja { margin-top: 6px; }


/* 画像＝左 ／ 本文＝右（参考: minmax(0,1fr) 612px / gap 50px） */
.p-about-philosophy__con {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 612px);
  gap: 0 clamp(28px, 4vw, 50px);
  align-items: start;
  margin-top: clamp(28px, 4vh, 60px);
}
.p-about-philosophy__img { width: 100%; margin: 0; }
.p-about-philosophy__body { padding-top: 37px; }
@media (max-width: 900px) {
  .p-about-philosophy__con { grid-template-columns: 1fr; }
  .p-about-philosophy__no { position: static; }
  }

/* About ヒーローのコピーを主役にする（2026-07-16）
   実測：現状 34px に対し、参考サイト（アリスト）の同じ位置
   (.about-intro__copy = u-text-x7l) は 4.2rem = 42px。
   こちらは全画面イラストの上に載る一枚看板なので、参考より一段大きく取る。
   .c-sec-head__title は company/service など他ページ共通のため、
   ヒーロー内(.p-about-intro__con)だけにスコープする。 */
.p-about-intro__con .c-sec-head__title {
  font-size: clamp(2.8rem, 3.8vw, 5.2rem);
  font-weight: 900;                 /* TOPのWhoキャッチと同じBlack（900まで読込済み） */
  line-height: 1.45;
  letter-spacing: 0.04em;
  /* イラストの上でも文字が沈まないよう、白のにじみで可読性を確保 */
  text-shadow:
    0 0 14px rgba(255, 255, 255, 0.9),
    0 0 34px rgba(255, 255, 255, 0.7);
}
/* 主役が大きくなった分、周りの余白とラベルも釣り合わせる */
.p-about-intro__con .c-sec-head__en {
  font-size: clamp(1.2rem, 1.1vw, 1.4rem);
  letter-spacing: 0.18em;
}
.p-about-intro__con .c-sec-head__title { margin-top: clamp(10px, 1.4vh, 20px); }
.p-about-intro__con .c-sec-head__lead {
  margin-top: clamp(16px, 2.2vh, 28px);
  font-size: clamp(1.4rem, 1.15vw, 1.6rem);
  line-height: 2;
}

/* ============================================================
   About：MVVの見出しをTOPと同じSVGストローク描画にする（2026-07-16）
   ------------------------------------------------------------
   手描きの筆跡（ペン風）は世界観に合わなかったため全ページから撤去。
   代わりに、TOPの Business/Story/Data 等で使っている見出しSVGと
   同じ仕組み（1文字ずつのパスを stroke-dashoffset で描く）を当てる。
   c-title-svg 系の見た目・配色・描画JSは style.css 側の既存定義を
   そのまま使うので、ここでは大きさと配置だけを与える。
   ============================================================ */
.p-about-philosophy__en {
  position: relative;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  /* SVGの高さは 1.26em。TOPの見出しと同格の存在感にする */
  font-size: clamp(3.6rem, 4.6vw, 6rem);
  line-height: 1.05;
}
.p-about-philosophy__en .c-title-svg { display: block; }

/* ============================================================
   CREED セクションを作り込む（2026-07-16）
   ------------------------------------------------------------
   ラベル＋見出し＋本文が素で並ぶだけで、パネルの上に載っても
   締まりがなかった。TOPの Creed 章（白いカードに載せて浮かせる）と
   同じ考え方で、面の中に一枚カードを置いて主役をはっきりさせる。
   ============================================================ */
.p-about .p-about-creed .l-container {
  position: relative;
  max-width: calc(1040px + var(--pad) * 2);
}
.p-about .p-about-creed .c-sec-head {
  position: relative;
  background: var(--color-white);
  border-radius: clamp(14px, 1.8vw, 24px);
  padding: clamp(40px, 6vh, 76px) clamp(28px, 5vw, 72px);
  box-shadow: 0 20px 50px rgba(11, 31, 58, 0.07);
  text-align: center;
}
.p-about .p-about-creed .c-sec-head__en {
  margin-inline: auto;
  font-size: clamp(1.2rem, 1.1vw, 1.4rem);
  letter-spacing: 0.2em;
  color: var(--color-hokusei-blue);
}
.p-about .p-about-creed .c-sec-head__title {
  margin-top: clamp(12px, 1.6vh, 22px);
  font-size: clamp(2.4rem, 3.2vw, 4.2rem);
  font-weight: 700; /* 「商社とは、」＝究極の便利屋(SVG:ZenKaku Bold)と同ウェイトに統一（2026-07-17） */
  line-height: 1.5;
}
/* 「究極の便利屋」= TOPと同じインラインSVG（1文字ずつ線で描く→金フラッシュ）。
   配色と描画は style.css の .c-title-svg--inline / creed-gold が担うため、
   ここでは em 既定の斜体を打ち消すだけに留める（色はSVGのfillが持つ）。 */
.p-about .p-about-creed .c-sec-head__title em {
  font-style: normal;
}
.p-about .p-about-creed .c-sec-head__lead {
  margin-top: clamp(18px, 2.4vh, 32px);
  margin-inline: auto;
  max-width: 44em;
  font-size: clamp(1.4rem, 1.15vw, 1.6rem);
  line-height: 2.1;
  text-wrap: pretty;
}

/* ============================================================
   写真枠を「入れる前提」の設計にする（2026-07-16）
   ------------------------------------------------------------
   現状の .c-photo は破線＋カメラアイコン＋「※写真差し替え」で、
   工事中の仮置きに見えていた。写真が入ってこそ人が伝わる場所なので、
   ・写真が入ったら仮置きの装飾（破線・タグ）は自動で消す
   ・枠はパネルと同じ角丸言語に揃え、写真が主役として立つようにする
   ・仮置き状態も「未設定」ではなく設計の一部に見える最小限の見た目にする
   ============================================================ */

/* 写真が入ったら仮置きの体裁を捨てる（:has で img の有無を見る） */
.c-photo:has(img) {
  border: 0;
  background: var(--color-silver, #EDF1F4);
  box-shadow: 0 18px 44px rgba(11, 31, 58, 0.10);
}
.c-photo:has(img) .c-photo__ph,
.c-photo:has(img) .c-photo__tag { display: none; }
.c-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 枠をパネルと同じ角丸言語へ（18px → パネルと同じ 24px 系） */
.p-about .c-photo {
  border-radius: clamp(14px, 1.8vw, 24px);
}
/* 仮置きの見た目を静かにする（破線をやめ、面で示す） */
.p-about .c-photo:not(:has(img)) {
  border: 0;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(11, 31, 58, 0.06);
}
.p-about .c-photo__ph { opacity: 0.5; }
.p-about .c-photo__tag {
  background: rgba(255, 255, 255, 0.7);
  opacity: 0.75;
}

/* --- 人物写真の帯（CREEDの直後）------------------------------
   「人が全く感じられない」ため、働く人の写真をページの中心に置く。
   3枚並べた帯で、現場・対話・地域の3面から人を見せる。
   パネルの中に白カードではなく、写真そのものを面として置く。 */
/* 中央だけ少し下げて、横一列の単調さを崩す */
@media (max-width: 767px) {
    }

/* ============================================================
   写真を「装飾」として差し込む（2026-07-16）
   ------------------------------------------------------------
   PEOPLE章のような四角い塊ではなく、面の境界をまたいで覗かせる。
   各章の余白は実測で上下61px・左右40〜123pxしかなく、内側に置く余地は
   ほぼ無い。そこでカードやパネルの角に重ねて配置する。
   形はサイトの既存語彙（丸バッジ／円形イラスト）に合わせて円形。
   ============================================================ */
.c-photo-orb {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  /* 面から浮いて見えるよう、地の色で縁取る */
  box-shadow: 0 0 0 8px var(--color-white), 0 18px 40px rgba(11, 31, 58, 0.14);
  background: rgba(255, 255, 255, 0.6);
  color: var(--color-hokusei-blue);
}
.c-photo-orb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 写真が入ったら仮置きの体裁を捨てる */
.c-photo-orb:has(img) { background: none; }
.c-photo-orb:has(img) .c-photo-orb__ph { display: none; }
.c-photo-orb__ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.5;
  text-align: center;
  padding: 10px;
}
.c-photo-orb__ph svg { width: 26px; height: 26px; }
.c-photo-orb__note { font-size: var(--fs-x2s); line-height: 1.5; }

/* 配置：CREEDカードの左下にかぶせる。
   当初は左上に置いたが「CREED」ラベルに被った（実測で確認）。
   カードは中央寄せで左右に123pxの余白があるので、その余白へ逃がしつつ
   カードの角に重ねる。 */
.p-about-creed .l-container { position: relative; }
.c-photo-orb--a {
  width: clamp(110px, 13vw, 190px);
  left: clamp(-14px, -1vw, 6px);
  bottom: clamp(-34px, -3.4vh, -18px);
  top: auto;
}
/* 配置：企業理念パネルの右下。
   当初は右上に置いたが「（ 企業理念 ）」ラベルに被った（実測で確認）。
   Our Purpose ラベル行は面の上端にあるので、下端へ逃がす。 */
.p-about-philosophy .l-container { position: relative; }
.c-photo-orb--b {
  width: clamp(96px, 11vw, 160px);
  right: clamp(-14px, -1vw, 6px);
  bottom: clamp(-30px, -3vh, -14px);
  top: auto;
}
@media (max-width: 900px) {
  .c-photo-orb { display: none; }   /* 狭い画面では余地が無く、重なって邪魔になる */
}

/* ============================================================
   引用（代表メッセージ内）を作り直す（2026-07-16）
   ------------------------------------------------------------
   従来：左に4pxの青い縦棒＋グレー背景＋角丸 という汎用ブログの型。
   代表の言葉という一番強い一文なのに、装飾に埋もれて弱かった。
   箱をやめ、言葉そのものを大きく見せる。ホクセイの語彙である
   ゴールドの引用符だけを添える。
   ============================================================ */
.p-about .p-about-quote {
  position: relative;
  margin: clamp(28px, 4vh, 48px) 0;
  padding: 0 0 0 clamp(28px, 3vw, 46px);
  background: none;
  border: 0;
  border-radius: 0;
  font-size: clamp(1.8rem, 1.9vw, 2.4rem);
  font-weight: 900;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--color-deep-navy);
}
/* 引用符：ブランドのゴールド。文字ではなく符号だけを添える */
.p-about .p-about-quote::before {
  content: "“";
  position: absolute;
  top: -0.32em;
  left: -0.06em;
  font-family: var(--font-en);
  font-size: 3.2em;
  line-height: 1;
  color: var(--color-gold, #D19A2E);
  opacity: 0.5;
}

/* ============================================================
   OUR VALUES のカードを作り直す（2026-07-16）
   ------------------------------------------------------------
   従来：260px幅×4列の白い箱に 13px の本文。実測で1枚284pxしかなく、
   見出しも本文も改行が詰まって窮屈だった（「知っていても、／聞く。」）。
   箱を並べるのをやめ、2列にして文字に余裕を持たせる。
   区切りは枠線ではなく、番号と細い罫で示す。
   ============================================================ */
.p-about .c-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 56px) clamp(32px, 4vw, 72px);
}
.p-about .c-info-card {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  padding: clamp(24px, 3vh, 36px) 0 0 clamp(44px, 4vw, 64px);
  overflow: visible;
  /* 上端の細い罫だけで区切る（箱で囲わない） */
  border-top: 1px solid rgba(11, 31, 58, 0.14);
  box-shadow: none;
}
/* 番号：罫の左端に置く。
   当初は ::before の counter() で出したが描画されず、原因の切り分けに
   時間がかかった。HTMLに実要素で持たせるほうが確実なのでそちらに変更。
   色は変数 --color-gold(#F1C75B) だと白地で沈むため、見出しSVGの
   3色配色で使っている濃いゴールドに合わせる。 */
.p-about .c-info-card__no {
  position: absolute;
  top: clamp(24px, 3vh, 36px);
  left: 0;
  font-family: var(--font-en);
  font-size: clamp(1.6rem, 1.7vw, 2rem);
  font-weight: 700;
  line-height: 1;
  color: #D19A2E;
}
.p-about .c-info-card__label {
  font-size: clamp(1.2rem, 1.1vw, 1.3rem);
  letter-spacing: 0.16em;
  color: var(--color-aqua, #2DB8C5);
}
.p-about .c-info-card__title {
  margin-top: 6px;
  font-size: clamp(2rem, 2.1vw, 2.6rem);
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: 0.02em;
  text-wrap: balance;
}
.p-about .c-info-card__text {
  margin-top: clamp(10px, 1.4vh, 16px);
  font-size: clamp(1.4rem, 1.1vw, 1.5rem);
  line-height: 2;
  text-wrap: pretty;
  color: rgba(11, 31, 58, 0.82);
}
@media (max-width: 767px) {
  .p-about .c-card-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   About：MVV見出しを「ページ見出しと同格」の大きさへ（2026-07-16）
   ------------------------------------------------------------
   従来 clamp(3.6rem,4.6vw,6rem)=53.8px。同じ c-title-svg 部品である
   ページ見出し「About Us」は --fs-title-en=79.5px で、MVVだけが一段
   小さかった。SVGは viewBox に上下の余白（アセンダ/ディセンダ）を
   含むため、指定値ほど大きく見えないのも効いていた。
   変数を共有して「見出し文字と同じサイズ」を宣言的に担保する
   （モバイル側の --fs-title-en 上書きにも自動追従する）。
   ============================================================ */
.p-about .p-about-philosophy__en {
  font-size: var(--fs-title-en);
}

/* ------------------------------------------------------------
   代表メッセージの円形ビジュアルはホバー効果を持たない。
   aria-hidden の装飾でリンクでもないため、拡大しても操作の
   手がかりにならない。共通ルールは company/contact が使うので
   打ち消しは About だけにスコープする。
   ------------------------------------------------------------ */
.p-about .p-about-message__visual { transition: none; }
.p-about .p-about-message__visual:hover {
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(11, 31, 58, 0.06), 0 20px 50px rgba(11, 31, 58, 0.08);
}

/* ============================================================
   About：パネル配色の穴を塞ぐ（2026-07-16）
   ------------------------------------------------------------
   既存の `.p-sub-sec:nth-last-of-type(2)`（ミント）は、末尾から数える
   対象に c-next01 / c-cta-band まで含まれるため実際にはどのセクション
   にも当たっておらず、OUR VALUES が背景なし＝白地に沈んでいた。
   数え方に依存せずクラスで名指しし、TOPと同じ4系統を1つずつ配る。
   ============================================================ */
.p-about .p-about-values { background: #DEF0E8 !important; }  /* ミント：行動指針 */
.p-about .p-about-msg    { background: #DDEFF2 !important; }  /* アクア：代表メッセージ（CREEDのスカイと差をつける） */

/* ============================================================
   About：章番号の切り欠き（参考サイト marui-unite の手法）
   ------------------------------------------------------------
   実測したレシピ：パネル本体は角丸、その左上角に「ページ背景と同じ色の
   箱」を absolute で重ね、内側（右下）だけを丸める。これで角を齧り取った
   ような輪郭が生まれる。以前この切り欠きが「浮いた白タブ」に見えて没に
   なったのは、中身が空だったため。参考サイト同様、必ず章番号を抱かせる。
   パネルの上パディング（56〜104px）内に収まる高さに留め、本文と干渉させない。
   ============================================================ */
.c-chapter-no {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: clamp(40px, 4.8vh, 54px);
  /* 左は本文の左端に、右は切り欠きの内側に余白をとる */
  padding-left: clamp(20px, 2.6vw, 40px);
  padding-right: clamp(18px, 2.2vw, 30px);
  background: var(--color-white, #FFFFFF);
  border-radius: 0 0 var(--r) 0;
  font-family: var(--font-en);
  font-size: clamp(1.3rem, 1.3vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--color-deep-navy);
}
/* 番号の前の点。サイトのドット装飾と同じアクアで、章の始まりを示す */
.c-chapter-no::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-aqua, #2DB8C5);
}
/* 切り欠きは上パディングを占有するので、その分だけ内容を下げる */
.p-about .p-about-philosophy,
.p-about .p-about-values,
.p-about .p-about-msg {
  padding-top: clamp(72px, 9.5vh, 118px);
}
@media (max-width: 767px) {
  .c-chapter-no {
    height: 38px;
    padding-left: 20px;
    padding-right: 16px;
    font-size: 1.2rem;
  }
}

/* ============================================================
   About：OUR VALUESカードのホバー無効化＋ドット波の装飾（2026-07-16）
   ------------------------------------------------------------
   ホバー：共通の c-info-card は company/service 等でも使うので、
   打ち消しは About だけにスコープする。装飾カードで浮き上がる必要が
   ないため、上辺バー・浮き・影・枠線色の変化を止める。
   ------------------------------------------------------------
   ドット：番号「01〜04」の真下の左帯（本文は右カラムなので空いている）へ、
   小さな粒を2列×4行で並べ、上から下へ時間差で明滅させる。番号を起点に
   価値が流れ落ちるイメージ。色はサイトのドット装飾と同じ3色。JSで生成
   （c-info-card__dots > i×8）。動きはCSS、reduced-motionで停止。
   ============================================================ */
.p-about .c-info-card { transition: none; }
.p-about .c-info-card:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}
.p-about .c-info-card::before { display: none; }  /* 上辺のアクセントバーも不要 */

.p-about-values .c-info-card__dots {
  position: absolute;
  top: clamp(58px, 7vh, 80px);          /* 番号のすぐ下から */
  left: clamp(4px, 0.5vw, 10px);        /* 番号（left:0）と左を揃える */
  display: grid;
  grid-template-columns: repeat(2, 6px);
  gap: clamp(9px, 1.1vh, 13px) 8px;
  pointer-events: none;
  z-index: 1;
}
.p-about-values .c-info-card__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0.24;
  transform: scale(0.72);
  animation: valuesDotPulse 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* 3色を順に */
.p-about-values .c-info-card__dots i:nth-child(3n+1) { background: #2DB8C5; }
.p-about-values .c-info-card__dots i:nth-child(3n+2) { background: #1E7FC2; }
.p-about-values .c-info-card__dots i:nth-child(3n)   { background: #F1C75B; }
/* 上の行から下の行へ、左→右へ時間差をつけて波が流れ落ちる */
.p-about-values .c-info-card__dots i:nth-child(1) { animation-delay: 0s; }
.p-about-values .c-info-card__dots i:nth-child(2) { animation-delay: 0.08s; }
.p-about-values .c-info-card__dots i:nth-child(3) { animation-delay: 0.22s; }
.p-about-values .c-info-card__dots i:nth-child(4) { animation-delay: 0.30s; }
.p-about-values .c-info-card__dots i:nth-child(5) { animation-delay: 0.44s; }
.p-about-values .c-info-card__dots i:nth-child(6) { animation-delay: 0.52s; }
.p-about-values .c-info-card__dots i:nth-child(7) { animation-delay: 0.66s; }
.p-about-values .c-info-card__dots i:nth-child(8) { animation-delay: 0.74s; }
/* 各カードでも位相をずらし、4枚が一斉に光らないようにする */
.p-about-values .c-info-card:nth-child(2) .c-info-card__dots i { animation-duration: 4s; }
.p-about-values .c-info-card:nth-child(3) .c-info-card__dots i { animation-duration: 3.3s; }
.p-about-values .c-info-card:nth-child(4) .c-info-card__dots i { animation-duration: 4.3s; }
@keyframes valuesDotPulse {
  0%, 100% { opacity: 0.20; transform: scale(0.7); }
  45%      { opacity: 0.92; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .p-about-values .c-info-card__dots i { animation: none; opacity: 0.3; transform: scale(0.85); }
}

/* パネルの「動く枠線」CSSは style.css（全ページ共通）へ移設（2026-07-16）。
   TOP は sub.css を読まないため。ここには置かない。 */

/* ============================================================
   Company：About/TOPと同じ角丸パネル＋章番号に揃える（2026-07-16）
   ------------------------------------------------------------
   これまで全幅の素の面だったため、サイトのパネル・デザイン言語から浮いていた。
   4章（PROFILE/HISTORY/NETWORK/GROUP）を角丸パネル化し、章番号の切り欠きと
   動く白枠線（style.css の c-panel-trace、JS側でクラスを対象に追加）を付ける。
   ============================================================ */
.p-company .p-sub-sec {
  --gap: clamp(12px, 2.9vw, 40px);
  --r: clamp(14px, 1.8vw, 24px);
  --R: clamp(28px, 6.4vw, 88px);
  position: relative;
  margin-inline: var(--gap);
  margin-block: calc(var(--gap) / 2);
  border-radius: var(--r);
  /* 章番号の切り欠き分だけ上を空ける */
  padding-block: clamp(72px, 9.5vh, 118px) clamp(56px, 8vh, 104px);
}
/* 章ごとに大きい角を左下／右上へ振る（TOP/Aboutと同じリズム） */
.p-company .p-comp-profile,
.p-company .p-comp-network { border-radius: var(--r) var(--r) var(--r) var(--R); }
.p-company .p-comp-history,
.p-company .p-comp-group   { border-radius: var(--r) var(--R) var(--r) var(--r); }
/* パネルの色：TOP/Aboutと同じ4系統を1章ずつ */
.p-company .p-comp-profile { background: #DDEFF2 !important; }  /* アクア */
.p-company .p-comp-history { background: #E1E9F4 !important; }  /* スカイ */
.p-company .p-comp-network { background: #F0EBE2 !important; }  /* サンド */
.p-company .p-comp-group   { background: #DEF0E8 !important; }  /* ミント */

/* ============================================================
   About：ホクセイグループとは（中核＋グループ4社の組織図イラスト）2026-07-16
   ------------------------------------------------------------
   中核（ホクセイプロダクツ）を上に置き、ステム＋横バー＋各縦線の
   組織図コネクタでグループ4社へつなぐ。参考サイトの画像は使わず、
   線画アイコンとCSSコネクタで自作（＝著作権クリア）。
   モバイルはコネクタを隠してカードを縦積みにする。
   ============================================================ */
.p-about .p-about-group { background: #E1E9F4 !important; }        /* スカイ */
.p-about .p-about-group { padding-top: clamp(72px, 9.5vh, 118px); } /* 章番号の切り欠き分 */

.c-group-chart { margin-top: clamp(30px, 4.5vh, 60px); }
.c-group-chart__core {
  position: relative;
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
  background: var(--color-white);
  border-radius: 20px;
  padding: clamp(24px, 3.2vh, 36px) clamp(22px, 3vw, 44px);
  box-shadow: 0 20px 48px rgba(11, 31, 58, 0.10);
}
.c-group-chart__badge {
  font-family: var(--font-en); font-size: clamp(1.2rem, 1.1vw, 1.4rem);
  font-weight: 700; letter-spacing: 0.18em; color: var(--color-aqua, #2DB8C5);
}
.c-group-chart__name {
  margin-top: 6px; font-size: clamp(2rem, 2.3vw, 2.8rem);
  font-weight: 900; line-height: 1.4; color: var(--color-deep-navy);
}
.c-group-chart__role {
  margin-top: 10px; font-size: clamp(1.35rem, 1.1vw, 1.55rem);
  line-height: 1.95; color: rgba(11, 31, 58, 0.80); text-wrap: pretty;
}
.c-group-chart__stem {
  width: 2px; height: clamp(26px, 4vh, 46px);
  margin: 0 auto; background: rgba(11, 31, 58, 0.18);
}
.c-group-chart__members {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.c-group-chart__members::before {                 /* 4社の上をつなぐ横バー */
  content: ""; position: absolute; top: 0; left: 12.5%; right: 12.5%;
  height: 2px; background: rgba(11, 31, 58, 0.18);
}
.c-group-node {
  position: relative;
  background: var(--color-white);
  border-radius: 16px;
  padding: clamp(20px, 2.6vh, 30px) clamp(14px, 1.4vw, 22px) clamp(18px, 2.2vh, 26px);
  box-shadow: 0 12px 30px rgba(11, 31, 58, 0.07);
  text-align: center;
}
.c-group-node::before {                           /* 横バー→各カードの短い縦線 */
  content: ""; position: absolute; top: calc(-1 * clamp(14px, 1.8vh, 20px)); left: 50%;
  width: 2px; height: clamp(14px, 1.8vh, 20px);
  background: rgba(11, 31, 58, 0.18); transform: translateX(-50%);
}
.c-group-node__ico {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: #EAF6FA; color: var(--color-hokusei-blue, #1E7FC2);
}
.c-group-node__ico svg { width: 24px; height: 24px; }
.c-group-node__en {
  display: block; margin-top: 12px;
  font-family: var(--font-en); font-size: clamp(1.05rem, 0.95vw, 1.2rem);
  font-weight: 700; letter-spacing: 0.12em; color: var(--color-aqua, #2DB8C5);
}
.c-group-node__name {
  margin-top: 4px; font-size: clamp(1.5rem, 1.4vw, 1.7rem);
  font-weight: 900; line-height: 1.4; color: var(--color-deep-navy); text-wrap: balance;
}
.c-group-node__note {
  margin-top: 8px; font-size: clamp(1.25rem, 1vw, 1.35rem);
  line-height: 1.8; color: rgba(11, 31, 58, 0.72); text-wrap: pretty;
}
@media (max-width: 900px) {
  .c-group-chart__members { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .c-group-chart__members::before,
  .c-group-node::before { display: none; }        /* コネクタは隠す */
  .c-group-chart__stem { height: 24px; }
}
@media (max-width: 520px) {
  .c-group-chart__members { grid-template-columns: 1fr; }
}

/* ============================================================
   About グループ図：「HOKUSEI GROUP」の枠で 中核＋各社 を囲む（2026-07-16）
   ------------------------------------------------------------
   「ホクセイグループという大きな枠の中に、ホクセイプロダクツ（中核）があり、
   ホクセイ金属・その他がある」という包含関係を、ラベル付きの囲み枠で示す。
   ============================================================ */
.c-group-frame {
  position: relative;
  margin-top: clamp(26px, 3.6vh, 46px);
  padding: clamp(46px, 6vh, 76px) clamp(18px, 3vw, 44px) clamp(28px, 4vh, 48px);
  border: 1.5px solid rgba(11, 31, 58, 0.16);
  border-radius: clamp(22px, 3vw, 36px);
  background: rgba(255, 255, 255, 0.30);   /* スカイのパネル地より少し明るく＝囲みを示す */
}
/* 枠の上辺に乗る「HOKUSEI GROUP」ラベル（＝この枠全体がグループ） */
.c-group-frame__label {
  position: absolute;
  top: 0;
  left: clamp(20px, 3vw, 44px);
  transform: translateY(-50%);
  display: inline-block;
  padding: 7px 20px;
  background: var(--color-hokusei-blue);   /* ヘッダー/ボタンと同じネイビー */
  color: var(--color-white);
  border-radius: 999px;
  font-family: var(--font-en);
  font-size: clamp(1.1rem, 1.1vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  box-shadow: 0 8px 20px rgba(7, 52, 137, 0.22);
}

/* ============================================================
   子ページのファーストビュー刷新：編集的なヒーロー帯（2026-07-17 Phase1）
   ------------------------------------------------------------
   参考：aristo の MV（大きなタイトル＋ゆとり＋帯）。AI的な画像は使わず、
   淡いブランドグラデ＋大きな柔らかいアーク＋ドットで密度と品を出す。
   白い平板→淡い帯にすることで「ファーストビュー」として成立させる。 */
.c-page-header {
  overflow: hidden;
  padding-block: calc(var(--header-h) + clamp(74px, 12vh, 150px)) clamp(84px, 13vh, 160px);
  background:
    radial-gradient(78% 130% at 102% -12%, rgba(45, 184, 197, 0.16) 0%, rgba(45, 184, 197, 0) 58%),
    radial-gradient(66% 120% at -6% 116%, rgba(30, 127, 194, 0.12) 0%, rgba(30, 127, 194, 0) 55%),
    linear-gradient(180deg, #ECF6F8 0%, #F3FAFB 60%, #F7FCFD 100%);
}
/* 右の余白を埋める大きな柔らかいアーク（＝AI画像の代わりのブランド図形） */
.c-page-header::after {
  content: "";
  position: absolute;
  right: clamp(-140px, -7vw, -50px);
  top: 50%;
  width: clamp(280px, 36vw, 600px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(45, 184, 197, 0.20) 0%, rgba(45, 184, 197, 0) 60%),
    radial-gradient(circle at 70% 78%, rgba(30, 127, 194, 0.14) 0%, rgba(30, 127, 194, 0) 58%);
  pointer-events: none;
  z-index: 0;
}
/* JAキッカーを主役級に格上げ（（ 事業紹介 ）等） */
.c-page-header__kicker {
  font-size: clamp(1.5rem, 1.55vw, 1.9rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--color-hokusei-blue);
  opacity: 0.92;
  margin-top: clamp(18px, 2.6vh, 30px);
}
/* ドット装飾を見出しの上に大きめ・左端そろえで */
.c-page-header .c-deco--ph {
  top: clamp(-8px, -0.6vh, 4px);
  right: auto;
  left: 0;
  width: clamp(130px, 16vw, 210px);
}
/* パンくずは右上（タイトル帯の上端）へ */
.c-page-header .c-breadcrumb { top: 0; bottom: auto; }
@media (max-width: 767px) {
  .c-page-header::after { width: 220px; right: -90px; }
  .c-page-header .c-breadcrumb { position: static; top: auto; margin-top: 20px; }
}

/* ============================================================
   c-cv01：超大型CTA（参考サイト aristo の CONTACT US を再現）2026-07-17
   ------------------------------------------------------------
   巨大タイポ「CONTACT US / ACROSS THE SEA, WITH YOU.」＋濃紺の丸CONTACTボタン。
   従来の小さな c-cta-band を置換し、ページ末尾の見せ場にする。
   ============================================================ */
.c-cv01 {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #F5FBFC 0%, #FFFFFF 100%);
  padding-block: clamp(84px, 14vh, 180px);
}
.c-cv01__inner { position: relative; }
.c-cv01__body { max-width: min(100%, 76%); }
.c-cv01__head {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(3.8rem, 7.6vw, 10rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--color-deep-navy);
  text-wrap: balance;
}
.c-cv01__lead {
  margin-top: clamp(26px, 3.6vh, 46px);
  max-width: 34em;
  font-size: clamp(1.4rem, 1.15vw, 1.6rem);
  line-height: 2;
  color: rgba(11, 31, 58, 0.82);
  text-wrap: pretty;
}
/* 濃紺の大きな丸ボタン（右・縦中央） */
.c-cv01__btn {
  position: absolute;
  right: clamp(0px, 1vw, 24px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(158px, 17vw, 228px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  gap: 8px;
  background: var(--color-deep-navy);
  color: var(--color-white);
  box-shadow: 0 24px 60px rgba(7, 52, 137, 0.28);
  transition: box-shadow 0.45s var(--ease);
  z-index: 2;
}
.c-cv01__btn:hover { box-shadow: 0 30px 72px rgba(7, 52, 137, 0.4); }
.c-cv01__btn-txt {
  font-family: var(--font-en);
  font-size: clamp(1.6rem, 1.5vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.1em;
}
.c-cv01__btn-arrow { font-size: clamp(1.4rem, 1.3vw, 1.7rem); line-height: 1; opacity: 0.9; }
/* 手描き風の柔らかいブランド装飾（aristo のブラシ痕の代わり） */
.c-cv01::before {
  content: "";
  position: absolute;
  left: clamp(-40px, -2vw, 0px);
  bottom: clamp(40px, 8vh, 120px);
  width: clamp(120px, 16vw, 240px);
  height: clamp(16px, 2vw, 30px);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(241, 199, 91, 0.55), rgba(241, 199, 91, 0));
  transform: rotate(-6deg);
  pointer-events: none;
}
.c-cv01::after {
  content: "";
  position: absolute;
  right: clamp(160px, 20vw, 320px);
  top: clamp(30px, 6vh, 80px);
  width: clamp(90px, 12vw, 180px);
  height: clamp(12px, 1.6vw, 24px);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(45, 184, 197, 0.4), rgba(45, 184, 197, 0));
  transform: rotate(-8deg);
  pointer-events: none;
}
@media (max-width: 900px) {
  .c-cv01__body { max-width: 100%; text-align: center; }
  .c-cv01__lead { margin-inline: auto; }
  .c-cv01__btn { position: static; transform: none; margin: clamp(36px, 6vh, 56px) auto 0; }
  .c-cv01::after { display: none; }
}

/* ============================================================
   B1：Company沿革を横型タイムラインに（参考 aristo History）2026-07-17
   ------------------------------------------------------------
   線を上辺に横に引き、節目のドット＋年＋カードを下にぶら下げ、横スクロールで
   歴史を辿る。HTMLは縦リストのまま、CSSだけで横に組み替える。
   ============================================================ */
.p-comp-history .c-timeline {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  max-width: none;
  padding: clamp(46px, 6vh, 64px) 2px clamp(22px, 3vh, 34px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(11, 31, 58, 0.28) transparent;
}
.p-comp-history .c-timeline::before { display: none; }   /* 縦線を消す */
.p-comp-history .c-timeline__item {
  flex: 0 0 clamp(228px, 24vw, 300px);
  scroll-snap-align: start;
  padding: clamp(30px, 3.4vh, 42px) clamp(18px, 1.6vw, 26px) 0 0;
}
/* 上辺の横線（各アイテム幅いっぱい＝連続して1本に見える） */
.p-comp-history .c-timeline__item::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: clamp(12px, 1.4vh, 18px);
  width: auto; height: 2px;
  background: rgba(11, 31, 58, 0.16);
  border: 0; border-radius: 0;
}
/* 節目のドット（線の上・左端） */
.p-comp-history .c-timeline__item::after {
  content: "";
  position: absolute;
  left: 0; top: clamp(6px, 0.8vh, 12px);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-white);
  border: 3px solid var(--color-hokusei-blue);
}
.p-comp-history .c-timeline__year {
  font-size: clamp(1.8rem, 1.9vw, 2.4rem);
  color: #D19A2E;   /* 年はゴールドで節目感（白パネル上で沈まない濃いゴールド） */
}
.p-comp-history .c-timeline__body { margin-top: 10px; font-size: var(--fs-sm); line-height: 1.9; }
.p-comp-history .c-timeline__note { margin-top: 8px; font-size: var(--fs-xs); line-height: 1.8; }
/* 横スクロールのヒント（右端フェード） */
.p-comp-history .c-timeline { position: relative; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, #000 92%, transparent 100%); }
@media (max-width: 767px) {
  .p-comp-history .c-timeline__item { flex-basis: 78vw; }
}

/* ============================================================
   A4：子ページの大判MV（タイトル帯の直下の角丸ビジュアル）2026-07-17
   ------------------------------------------------------------
   参考 aristo：タイトル直下に大きな角丸写真。未設定時はクリーンな
   ブランドグラデのプレースホルダ、実写真は c-cover-img が覆う。 */
.c-page-mv {
  position: relative;
  margin-top: clamp(-58px, -6vh, -30px);   /* ヘッダー帯に少し食い込ませる */
  z-index: 1;
  padding-bottom: clamp(20px, 4vh, 52px);
}
.c-page-mv__frame {
  position: relative;
  aspect-ratio: 2.7 / 1;
  border-radius: clamp(20px, 2.6vw, 36px);
  overflow: hidden;
  box-shadow: 0 34px 80px rgba(11, 31, 58, 0.14);
  background:
    radial-gradient(70% 120% at 82% -10%, rgba(45, 184, 197, 0.30) 0%, rgba(45, 184, 197, 0) 55%),
    radial-gradient(62% 120% at 6% 112%, rgba(30, 127, 194, 0.26) 0%, rgba(30, 127, 194, 0) 55%),
    linear-gradient(135deg, #E7F4F7 0%, #DDEFF2 45%, #CFE6EC 100%);
  display: grid;
  place-items: center;
}
.c-page-mv__ph {
  display: grid;
  place-items: center;
  gap: 10px;
  color: rgba(11, 31, 58, 0.42);
  text-align: center;
}
.c-page-mv__ph svg { width: clamp(34px, 4vw, 52px); height: auto; }
.c-page-mv__ph-note { font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.18em; }
.c-page-mv:has(img) .c-page-mv__ph { display: none; }
.c-page-mv .c-cover-img { border-radius: inherit; }
@media (max-width: 767px) { .c-page-mv__frame { aspect-ratio: 16 / 10; } }

/* ============================================================
   子ページ共通：セクションを角丸パネルに統一（company/about と同じ言語）2026-07-17
   ------------------------------------------------------------
   service/recruit/contact/en の各セクションに .p-page-panel を付け、
   色（is-aqua/sky/sand/mint）と大角の向き（is-odd/even）＋章番号で
   サイト全体のパネル・デザイン言語に揃える。動く白枠線もJSで対象に追加。 */
.p-page-panel {
  --gap: clamp(12px, 2.9vw, 40px);
  --r: clamp(14px, 1.8vw, 24px);
  --R: clamp(28px, 6.4vw, 88px);
  position: relative;
  margin-inline: var(--gap);
  margin-block: calc(var(--gap) / 2);
  border-radius: var(--r);
  padding-block: clamp(72px, 9.5vh, 118px) clamp(56px, 8vh, 104px);
}
.p-page-panel.is-odd  { border-radius: var(--r) var(--r) var(--r) var(--R); }
.p-page-panel.is-even { border-radius: var(--r) var(--R) var(--r) var(--r); }
.p-page-panel.is-aqua { background: #DDEFF2 !important; }
.p-page-panel.is-sky  { background: #E1E9F4 !important; }
.p-page-panel.is-sand { background: #F0EBE2 !important; }
.p-page-panel.is-mint { background: #DEF0E8 !important; }

/* ============================================================
   写真サイズ・角丸の体系化（2026-07-17）
   ------------------------------------------------------------
   ・rect系（c-photo, MV枠）は共通の角丸 --photo-r に統一
   ・円形ビジュアル（c-media-row 等）は過大にならないようキャップ
   ・重複していた大判横長写真は除去済み。大判ビジュアルはMV帯に一本化。 */
:root { --photo-r: clamp(18px, 2.2vw, 28px); }
.c-photo { border-radius: var(--photo-r); }
.c-page-mv__frame { border-radius: var(--photo-r); }
/* 円形ジオラマ：バランス良い最大径に（テキスト側に余白を残す） */
.c-media-row__visual,
.p-company-profile__visual,
.p-contact-lead__visual {
  width: min(100%, 40vh, 440px);
}
/* media-row：画像と本文の比率を安定させる（画像列を固定寄りに） */
@media (min-width: 768px) {
  .c-media-row {
    grid-template-columns: minmax(280px, 440px) 1fr;
    align-items: center;
    column-gap: clamp(36px, 5vw, 84px);
  }
  .c-media-row--reverse { grid-template-columns: 1fr minmax(280px, 440px); }
}

/* ============================================================
   c-news-cards：ニュース一覧のサムネ付きカードグリッド（2026-07-17）
   ------------------------------------------------------------
   旧 c-news-list（1行リスト）を置換。カテゴリバッジは c-news-list__cat を
   そのまま再利用（配色互換）。サムネ未設定はブランドグラデのfallback。 */
.c-news-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}
.c-news-cards__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-white);
  border-radius: clamp(14px, 1.6vw, 20px);
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(11, 31, 58, 0.08);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.c-news-cards__link:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(11, 31, 58, 0.14);
}
.c-news-cards__thumb {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  background:
    radial-gradient(90% 130% at 78% -8%, rgba(45, 184, 197, 0.22) 0%, rgba(45, 184, 197, 0) 55%),
    linear-gradient(135deg, #E7F4F7 0%, #D8ECF1 100%);
  color: rgba(11, 31, 58, 0.30);
}
.c-news-cards__thumb img { width: 100%; height: 100%; object-fit: cover; }
.c-news-cards__thumb:has(img) .c-news-cards__thumb-ph { display: none; }
.c-news-cards__thumb-ph svg { width: 30px; height: 30px; }
.c-news-cards__body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(16px, 1.8vw, 22px) clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 24px);
}
.c-news-cards__meta { display: flex; align-items: center; gap: 12px; }
.c-news-cards__date { font-family: var(--font-en); font-size: var(--fs-xs); letter-spacing: 0.06em; opacity: 0.65; }
.c-news-cards__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-news-cards__arrow {
  margin-top: auto;
  align-self: flex-end;
  font-family: var(--font-en);
  color: var(--color-hokusei-blue);
  transition: transform 0.3s var(--ease);
}
.c-news-cards__link:hover .c-news-cards__arrow { transform: translateX(5px); }
@media (max-width: 1023px) { .c-news-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .c-news-cards { grid-template-columns: 1fr; } }

/* ============================================================
   Company：Outline（PROFILE）を「見出し左・内容右」の非対称2カラムに、
   Access（章05）を新設（参考 aristo Outline/Access）2026-07-17
   ============================================================ */
@media (min-width: 901px) {
  .p-comp-profile > .l-container {
    display: grid;
    grid-template-columns: minmax(220px, 0.85fr) minmax(0, 2.3fr);
    column-gap: clamp(32px, 5vw, 80px);
    align-items: start;
  }
  .p-comp-profile .c-sec-head { position: sticky; top: calc(var(--header-h) + 24px); }
}
/* 会社概要表：細い罫・広い行間の編集的な表に */
.p-comp-profile .c-table th,
.p-comp-profile .c-table td {
  border: 0;
  border-bottom: 1px solid rgba(11, 31, 58, 0.12);
  padding: clamp(16px, 2vh, 22px) clamp(8px, 1vw, 16px);
  line-height: 1.9;
}
.p-comp-profile .c-table th {
  width: 9em;
  font-weight: 700;
  color: rgba(11, 31, 58, 0.65);
  letter-spacing: 0.06em;
}
/* Access */
.c-access {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 1fr);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: center;
  margin-top: clamp(26px, 3.6vh, 46px);
}
.c-access__map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 0;
  border-radius: var(--photo-r);
  box-shadow: 0 20px 48px rgba(11, 31, 58, 0.12);
}
.c-access__name { font-size: clamp(1.7rem, 1.6vw, 2rem); font-weight: 900; }
.c-access__addr { margin-top: 12px; font-size: var(--fs-base); line-height: 2; }
.c-access__note { margin-top: 8px; font-size: var(--fs-sm); color: rgba(11, 31, 58, 0.65); }
.c-access .c-btn-pill { margin-top: 22px; }
@media (max-width: 900px) {
  .c-access { grid-template-columns: 1fr; }
}

/* ============================================================
   Phase4：見出し階層の反転（参考 aristo のシグネチャ）2026-07-17
   ------------------------------------------------------------
   aristo は「大きな英字ディスプレイ見出し（Greeting/History/Outline）＋
   小さな（日本語）ラベル」。従来の「小英字キッカー＋大日本語見出し」を
   反転させる。About のヒーローと CREED は c-sec-head--keep で除外
   （構造的除外＝プロパティ漏れゼロ）。 */
.c-sec-head:not(.c-sec-head--keep) .c-sec-head__en {
  font-size: clamp(3.6rem, 5vw, 6.4rem);
  font-weight: 600;
  letter-spacing: var(--ls-display, -0.015em);
  line-height: 1.05;
  color: var(--color-deep-navy);
  text-wrap: balance;
  margin-bottom: 4px;
}
.c-sec-head:not(.c-sec-head--keep) .c-sec-head__title {
  font-size: clamp(1.5rem, 1.5vw, 1.9rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.7;
  color: var(--color-hokusei-blue);
}
/* 日本語ラベルを（ ）で括る（aristo の （ご挨拶） 表記） */
.c-sec-head:not(.c-sec-head--keep) .c-sec-head__title::before { content: "（ "; }
.c-sec-head:not(.c-sec-head--keep) .c-sec-head__title::after  { content: " ）"; }
.c-sec-head:not(.c-sec-head--keep) .c-sec-head__lead {
  margin-top: clamp(18px, 2.4vh, 28px);
}
/* enページ：__title も英文のため（）はやめてダッシュ区切りに */
.p-en .c-sec-head:not(.c-sec-head--keep) .c-sec-head__title::before { content: "— "; }
.p-en .c-sec-head:not(.c-sec-head--keep) .c-sec-head__title::after  { content: ""; }
.p-en .c-sec-head:not(.c-sec-head--keep) .c-sec-head__title { letter-spacing: 0.04em; }
/* 大型化した EN と被らないよう、見出し上のドット装飾を上へ逃がす */
.c-sec-head:not(.c-sec-head--keep) .c-deco--head-l,
.c-sec-head:not(.c-sec-head--keep) .c-deco--head-r { top: -64px; }
@media (max-width: 767px) {
  .c-sec-head:not(.c-sec-head--keep) .c-sec-head__en { font-size: clamp(3rem, 9vw, 4rem); }
}

/* ============================================================
   大型英字見出しを手書きSVG(.c-title-svg)化 2026-07-17
   ------------------------------------------------------------
   TOP・About「Value」等と同じ「1文字ずつ線で描いて塗る＋青→アクア→金の配色」を
   セクション見出しにも適用。英字は各ページのHTMLで .c-title-svg へ変換済み。
   描画アニメ・配色・--ar自動設定は c-title-svg 側（style.css / main.js）が担保。
   ここでは見出し枠内での収まりだけ整える。 */
.c-sec-head:not(.c-sec-head--keep) .c-sec-head__en {
  display: inline-block;
  line-height: 1;
}
.c-sec-head:not(.c-sec-head--keep) .c-sec-head__en .c-title-svg {
  margin-bottom: 0.06em;
}

/* 沿革タイムラインの前後矢印（JSがDOM注入する） */
.c-timeline-nav { display: flex; gap: 12px; margin-top: 6px; }
.c-timeline-nav__btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(11, 31, 58, 0.25);
  background: var(--color-white);
  color: var(--color-deep-navy);
  font-family: var(--font-en);
  font-size: 1.6rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.c-timeline-nav__btn:hover:not(:disabled) { background: var(--color-deep-navy); color: var(--color-white); }
.c-timeline-nav__btn:disabled { opacity: 0.3; cursor: default; }

/* ============================================================
   Phase7：フォーム磨き（contact）2026-07-17
   ------------------------------------------------------------
   余白拡大・radius 12px・focusは枠色＋柔らかいリング・selectに矢印。 */
.c-form__input,
.c-form__textarea,
.c-form__select {
  padding: 16px 18px;
  border-radius: 12px;
  border: 1.5px solid rgba(11, 31, 58, 0.18);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.c-form__input::placeholder,
.c-form__textarea::placeholder { color: rgba(11, 31, 58, 0.35); }
.c-form__input:hover,
.c-form__textarea:hover,
.c-form__select:hover { border-color: rgba(11, 31, 58, 0.34); }
.c-form__input:focus,
.c-form__textarea:focus,
.c-form__select:focus {
  outline: none;
  border-color: var(--color-hokusei-blue);
  box-shadow: 0 0 0 4px rgba(7, 52, 137, 0.12);
}
.c-form__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1F3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
}
.c-form__row + .c-form__row { margin-top: clamp(20px, 2.6vh, 28px); }

/* ============================================================
   Phase8：フッターTELバッジの微調整（CSSのみ）
   番号を主役に、受付時間はさりげなく。 */
.c-footer__tel { border-color: rgba(255, 255, 255, 0.5); padding: 26px 42px; }
.c-footer__tel-num { letter-spacing: 0.04em; }

/* ============================================================
   NETWORK 拠点カードを編集的インデックスに刷新（脱・白箱）
   連番＋区切りティック＋フラット面で「拠点一覧」の意図を明確化。
   ※ .p-comp-network にスコープ限定（recruit等の汎用カードは不変）
   ============================================================ */
.p-comp-network .c-card-grid {
  counter-reset: netloc;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}
.p-comp-network .c-info-card {
  background: var(--color-white);
  border: 1px solid rgba(11, 31, 58, 0.09);
  border-radius: 14px;
  box-shadow: none;
  padding: 28px 26px 24px 30px;
}
/* 既定の上辺ホバーバーを撤去し、左端の縦アクセント（常時表示）へ */
.p-comp-network .c-info-card::before {
  content: "";
  top: 26px; bottom: 26px; left: 0; right: auto;
  width: 2px; height: auto;
  background: var(--color-aqua);
  transform: none;
  border-radius: 0 2px 2px 0;
}
/* ゴースト連番（右上・大きく淡く） */
.p-comp-network .c-info-card::after {
  counter-increment: netloc;
  content: counter(netloc, decimal-leading-zero);
  position: absolute;
  top: 18px; right: 22px;
  font-family: var(--font-en);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(7, 52, 137, 0.10);
  letter-spacing: 0.01em;
  pointer-events: none;
}
/* 区分ラベル：先頭に細いティックを付け「標識」化 */
.p-comp-network .c-info-card__label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--color-aqua);
  letter-spacing: var(--ls-label);
  margin-bottom: 13px;
}
.p-comp-network .c-info-card__label::before {
  content: "";
  width: 16px; height: 1px;
  background: currentColor;
  flex: none;
}
.p-comp-network .c-info-card__title {
  font-size: clamp(1.7rem, 1.8vw, 2rem);
  color: var(--color-hokusei-blue);
  letter-spacing: 0.02em;
  padding-right: 40px; /* ゴースト連番との重なり回避 */
}
.p-comp-network .c-info-card__text {
  color: rgba(11, 31, 58, 0.6);
  margin-top: 10px;
}
@media (hover: hover) {
  .p-comp-network .c-info-card {
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }
  .p-comp-network .c-info-card:hover {
    transform: translateY(-4px);
    border-color: rgba(45, 184, 197, 0.55);
    box-shadow: 0 12px 30px rgba(7, 52, 137, 0.10);
  }
  .p-comp-network .c-info-card:hover::before { transform: none; background: var(--color-hokusei-blue); }
  .p-comp-network .c-info-card:hover::after  { color: rgba(45, 184, 197, 0.24); }
}

/* ============================================================
   c-sec-bg：パネル型セクションの背景に画像/動画を敷く汎用レイヤー（2026-07-17）
   使い方 ─ セクションに .has-sec-bg を付け、直下に1つ置く：
     <section class="... has-sec-bg">
       <div class="c-sec-bg" aria-hidden="true">
         <img class="c-sec-bg__media" src="..." alt="">                     ← 画像
         <!-- または動画（自動再生・無音・ループ） -->
         <video class="c-sec-bg__media" autoplay muted loop playsinline poster="...">
           <source src="....mp4" type="video/mp4"></video>
       </div>
       …既存のセクション内容…
     </section>
   ・パネルの非対称角丸に border-radius: inherit で追従
   ・可読性ヴェールは --sec-veil で調整（既定＝淡いスカイ）
   ・暗い写真/動画に白文字を載せたい時は .has-sec-bg--dark を併用
   ============================================================ */
.has-sec-bg { position: relative; isolation: isolate; }
.c-sec-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;      /* パネルの角丸に追従 */
  background: transparent;     /* メディア無し（色のみ）の時は元のパネル背景が透ける */
}
.c-sec-bg__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: var(--sec-media-opacity, 1);   /* メディア自体の不透明度も調整可 */
}
/* オーバーレイ（色ヴェール）：色と不透明度を独立して調整できる。
   --sec-veil-color   … 重ねる色（既定＝淡いスカイ）
   --sec-veil-opacity … 不透明度 0〜1（0=写真そのまま／1=色で覆う）
   WPは hokusei_section_bg() が各セクションのインラインCSS変数として出力。 */
.c-sec-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sec-veil-color, #E1E9F4);
  opacity: var(--sec-veil-opacity, 0.7);
}
/* 暗色プリセット：メディアを沈めて白文字を載せる（カード無しで直接載せる節向け） */
.has-sec-bg--dark { --sec-veil-color: #06142D; --sec-veil-opacity: 0.62; }
.has-sec-bg--dark > .l-container :is(.c-sec-head__en, .c-sec-head__title, .c-sec-head__lead, h2, h3, p) { color: #fff; }
/* reduced-motion：動画は非表示にしてポスター/静止に */
@media (prefers-reduced-motion: reduce) {
  .c-sec-bg video.c-sec-bg__media { display: none; }
}

/* ============================================================
   c-sec-bg の適用範囲を全パネルへ拡張（2026-07-17）
   .has-sec-bg を付けなくても、c-sec-bg を直接子に持つ要素は
   自動で分離コンテキスト化し、背景メディアが正しく敷ける。
   （パネルは position:relative 済み。ここでは isolation を付与） */
:has( > .c-sec-bg) { position: relative; isolation: isolate; }

/* ============================================================
   企業理念 Mission/Vision/Values を左右交互（ジグザグ）に（2026-07-17）
   偶数番（Vision）は画像を右・本文を左に入れ替えてリズムを出す。 */
.p-about-philosophy__item:nth-child(even) .p-about-philosophy__con {
  grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
}
.p-about-philosophy__item:nth-child(even) .p-about-philosophy__img { order: 2; }
.p-about-philosophy__item:nth-child(even) .p-about-philosophy__body { order: 1; }

/* ============================================================
   CREEDの丸オーブを「浮かぶ北前船」に（2026-07-17）
   丸クリップ・白リングを外し、透過PNGの船が静かに揺れる（ship-bob流用）。 */
.c-photo-orb--ship {
  border-radius: 0;
  box-shadow: none;
  background: none;
  overflow: visible;
  aspect-ratio: auto;
  place-items: initial;
  width: clamp(180px, 22vw, 320px);
  left: clamp(-24px, -2vw, 0px);
  bottom: clamp(-42px, -4.2vh, -20px);
}
.c-photo-orb--ship .c-photo-orb__ship-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(11, 31, 58, 0.16));
  animation: ship-bob 6.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .c-photo-orb--ship .c-photo-orb__ship-img { animation: none; }
}

/* 英語版CREEDの強調句（日本語のインラインSVGの代替）2026-07-17 */
.c-creed-em-en {
  font-style: normal;
  font-weight: 700;
  background: linear-gradient(90deg, #1E7FC2 0%, #2DB8C5 45%, #D19A2E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Vision（偶数項目）は見出しブロックも右寄せ：画像右・本文左と方向を揃える（2026-07-17）*/
.p-about-philosophy__item:nth-child(even) .p-about-philosophy__en { margin-left: auto; margin-right: 0; }
.p-about-philosophy__item:nth-child(even) .p-about-philosophy__ja { text-align: right; }
.p-about-philosophy__item:nth-child(even) .p-about-philosophy__no { left: auto; right: -1.6em; }

/* OUR GROUP：組織図をカスタマイザー画像で差し替え可能に（2026-07-17）
   画像未設定時は既存のHTMLチャート、設定時はこの図版を表示。 */
.c-group-image { margin: clamp(20px, 3.5vh, 40px) 0 0; text-align: center; }
.c-group-image img {
  display: inline-block;
  width: min(100%, 580px);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;                 /* 円形の図版に沿わせる（四隅の透明部に四角い影が出る「浮き」を解消）*/
  box-shadow: 0 22px 56px rgba(11, 31, 58, 0.12);
}

/* ============================================================
   OUR GROUP：各社ロゴを用いた組織図ツリー（2026-07-17）
   フラット画像をやめ、CORE＋4社をツリー線でつなぐデザインに。 */
.c-grouptree { margin-top: clamp(32px, 5vh, 60px); --gt-line: rgba(11, 31, 58, 0.16); }
.c-grouptree__core {
  max-width: 560px; margin: 0 auto; text-align: center;
  background: var(--color-white); border: 1px solid rgba(11, 31, 58, 0.10);
  border-radius: 18px; padding: clamp(24px,3vw,34px) clamp(24px,4vw,48px);
  box-shadow: 0 18px 44px rgba(11, 31, 58, 0.09);
}
.c-grouptree__badge {
  display: inline-block; font-family: var(--font-en); font-size: 1.1rem; font-weight: 700;
  letter-spacing: 0.2em; color: #fff; background: var(--color-hokusei-blue);
  border-radius: 999px; padding: 5px 16px; margin-bottom: 16px;
}
.c-grouptree__logo--core { display: block; }
.c-grouptree__logo--core img { height: clamp(50px, 6vw, 68px); width: auto; }
.c-grouptree__role { margin-top: 14px; font-size: var(--fs-sm); line-height: 1.9; color: rgba(11, 31, 58, 0.72); }
.c-grouptree__branch { position: relative; height: clamp(26px, 4vh, 42px); }
.c-grouptree__branch::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 100%;
  background: var(--gt-line); transform: translateX(-50%);
}
.c-grouptree__members {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 22px); padding-top: clamp(22px, 3vh, 34px);
}
.c-grouptree__members::before {           /* 横のつなぎ線（4列の中心を結ぶ） */
  content: ""; position: absolute; top: 0; left: 12.5%; right: 12.5%; height: 2px; background: var(--gt-line);
}
.c-grouptree__node {
  position: relative; background: var(--color-white); border: 1px solid rgba(11, 31, 58, 0.09);
  border-radius: 14px; padding: 26px 16px 22px; text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.c-grouptree__node::before {              /* 各カードへの縦ドロップ線 */
  content: ""; position: absolute; top: calc(-1 * clamp(22px,3vh,34px)); left: 50%;
  width: 2px; height: clamp(22px,3vh,34px); background: var(--gt-line); transform: translateX(-50%);
}
@media (hover: hover) {
  .c-grouptree__node:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(11,31,58,0.10); border-color: rgba(45,184,197,0.5); }
}
.c-grouptree__en { display: block; font-family: var(--font-en); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.16em; color: var(--color-aqua); margin-bottom: 14px; }
.c-grouptree__logo { display: flex; align-items: center; justify-content: center; height: 46px; margin-bottom: 12px; }
.c-grouptree__logo img { max-height: 46px; max-width: 92%; width: auto; object-fit: contain; }
.c-grouptree__logo--text { font-family: var(--font-en); font-size: 1.5rem; font-weight: 700; color: var(--color-hokusei-blue); letter-spacing: 0.01em; line-height: 1.15; height: auto; }
.c-grouptree__name { font-size: var(--fs-sm); font-weight: 700; color: var(--color-hokusei-blue); line-height: 1.45; }
.c-grouptree__loc { margin-top: 6px; font-size: var(--fs-x2s); font-weight: 700; letter-spacing: 0.04em; color: rgba(11,31,58,0.55); }
.c-grouptree__note { margin-top: 8px; font-size: var(--fs-x2s); line-height: 1.7; color: rgba(11,31,58,0.6); }
@media (max-width: 900px) {
  .c-grouptree__members { grid-template-columns: repeat(2, 1fr); row-gap: clamp(28px,5vw,40px); }
  .c-grouptree__members::before, .c-grouptree__node::before { display: none; }
}
@media (max-width: 480px) { .c-grouptree__members { grid-template-columns: 1fr; } }

/* ============================================================
   OUR GROUP：正円の集合図（洗練＋彗星の周回）2026-07-17 改3
   円のリングをグループが束ね、光の彗星が周回。背景は放射グラデで奥行き。 */
.c-groupwrap { position: relative; width: min(94vw, 1080px); aspect-ratio: 1 / 1; margin: clamp(30px,5vh,60px) auto 0; }
.c-grouporbit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.c-grouporbit__ring { fill: none; stroke: rgba(11,31,58,0.15); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.c-grouporbit__field { transform-box: view-box; transform-origin: 500px 500px; animation: gc-orbit 46s linear infinite; }
@keyframes gc-orbit { to { transform: rotate(360deg); } }
/* 星：普段は控えめ、定期的に「キラーン」と一瞬だけ拡大＋発光（時間差） */
/* 星：不透明度は常に1（変化なし）。回転を速く＋キランは白い輝き(brightness)で表現。名前は全てユニーク化し★下線のgc-twinkleとの衝突を解消 */
.c-grouporbit__star { transform-box: fill-box; transform-origin: center; }
.c-grouporbit__star--gold { fill: var(--color-gold); animation: gc-starspin 3.4s linear infinite, gc-glint-gold 4.6s ease-in-out infinite; }
.c-grouporbit__star--navy { fill: var(--color-hokusei-blue); animation: gc-starspin 3.4s linear infinite, gc-glint-navy 4.6s ease-in-out infinite; }
.c-grouporbit__star--aqua { fill: var(--color-aqua); animation: gc-starspin 3.4s linear infinite, gc-glint-aqua 4.6s ease-in-out infinite; }
@keyframes gc-starspin { to { transform: rotate(360deg); } }
@keyframes gc-glint-gold { 0%, 76%, 100% { filter: brightness(1) drop-shadow(0 0 3px rgba(241,199,91,0.75)); } 86% { filter: brightness(2.4) drop-shadow(0 0 10px rgba(255,244,214,1)); } }
@keyframes gc-glint-navy { 0%, 76%, 100% { filter: brightness(1) drop-shadow(0 0 3px rgba(45,184,197,0.55)); } 86% { filter: brightness(2.4) drop-shadow(0 0 10px rgba(210,245,255,1)); } }
@keyframes gc-glint-aqua { 0%, 76%, 100% { filter: brightness(1) drop-shadow(0 0 3px rgba(45,184,197,0.7)); } 86% { filter: brightness(2.4) drop-shadow(0 0 10px rgba(215,248,255,1)); } }
/* 流れ星：普段は非表示、時々スッと横切る */
.c-grouporbit__shoot-head { fill: #FFFFFF; filter: drop-shadow(0 0 4px rgba(127,180,255,0.9)); }
.c-grouporbit__shooting { transform-box: view-box; opacity: 0; animation: gc-shoot 9s cubic-bezier(.35,0,.5,1) infinite; }
@keyframes gc-shoot {
  0%, 80% { transform: translate(170px,60px); opacity: 0; }
  83% { opacity: 1; }
  91% { opacity: 0.95; }
  94%, 100% { transform: translate(720px,440px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .c-grouporbit__field, .c-grouporbit__star, .c-grouporbit__shooting { animation: none; }
  .c-grouporbit__shooting { display: none; }
}

.c-groupwrap .c-groupcircle {
  position: absolute; inset: clamp(30px,4vw,58px); z-index: 1; margin: 0; border-radius: 50%;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(8px,1.8vh,26px);
  padding: clamp(66px,11%,140px) clamp(46px,9%,112px);
  background: radial-gradient(125% 125% at 50% 32%, #FFFFFF 0%, #F1F3FB 52%, #E6EAF6 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.7),
    inset 0 10px 46px rgba(255,255,255,0.85),
    inset 0 0 60px rgba(255,255,255,0.5),
    0 0 64px 6px rgba(255,255,255,0.6),
    0 34px 84px rgba(11,31,58,0.10);
  overflow: visible;
}
.c-groupcircle__row { display: grid; align-items: start; justify-items: center; }
.c-groupcircle__row--2 { grid-template-columns: 1fr 1fr; gap: clamp(20px,4vw,64px); }
.c-groupcircle__row--3 { grid-template-columns: repeat(3,1fr); gap: clamp(10px,1.6vw,28px); width: 92%; margin-inline: auto; }
.c-groupco { text-align: center; max-width: 300px; transition: transform .35s var(--ease); }
.c-groupco__logo { display: flex; align-items: flex-end; justify-content: center; height: clamp(52px,6vw,80px); margin-bottom: 12px; }
.c-groupco__logo img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
.c-groupco__logo--empty { height: clamp(52px,6vw,80px); }
.c-groupco__name { font-size: clamp(1.35rem,1.6vw,1.85rem); font-weight: 700; color: var(--color-hokusei-blue); line-height: 1.35; }
.c-groupco__rule { position: relative; display: block; width: min(84%,210px); height: 0; border-top: 1.5px solid var(--color-hokusei-blue); margin: 11px auto 9px; }
.c-groupco__rule::after { content: "★"; position: absolute; left: 50%; top: 0; transform: translate(-50%,-50%); background: #EEF0F9; color: var(--color-hokusei-blue); font-size: 12px; line-height: 1; padding: 0 6px; animation: gc-twinkle 3.4s ease-in-out infinite; }
.c-groupco__loc { font-size: clamp(1.1rem,1.25vw,1.35rem); font-weight: 700; color: rgba(11,31,58,0.82); }
.c-groupco__desc { margin-top: 7px; font-size: clamp(1.05rem,1.15vw,1.3rem); line-height: 1.65; color: rgba(11,31,58,0.68); }
@media (hover: hover) { .c-groupco:hover { transform: translateY(-5px); } }
.c-groupcircle__band { text-align: center; padding: clamp(6px,1.2vh,18px) 0; }
.c-groupcircle__wordmark {
  font-family: var(--font-en); font-size: clamp(2.2rem,4.8vw,4.4rem); font-weight: 800; letter-spacing: 0.1em; line-height: 1;
  background: linear-gradient(100deg, var(--color-hokusei-blue) 0 42%, #7fb4ff 50%, var(--color-hokusei-blue) 58% 100%);
  background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: gc-shine 4.6s ease-in-out infinite;
}
@keyframes gc-shine { 0% { background-position: 145% 0; } 55%,100% { background-position: -45% 0; } }
.c-groupcircle__line { position: relative; display: block; height: 1px; margin-top: clamp(8px,1.4vh,16px); background: linear-gradient(90deg,transparent,rgba(11,31,58,0.38) 16%,rgba(11,31,58,0.38) 84%,transparent); }
.c-groupcircle__line::after { content: "★"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #EEF0F9; color: rgba(11,31,58,0.55); font-size: 13px; padding: 0 7px; animation: gc-twinkle 3.4s ease-in-out .8s infinite; }
@keyframes gc-twinkle { 0%,100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 0.4; transform: translate(-50%,-50%) scale(1.3); } }
.c-groupcircle__row--2 .c-groupco:nth-child(2) .c-groupco__rule::after { animation-delay: .5s; }
.c-groupcircle__row--3 .c-groupco:nth-child(1) .c-groupco__rule::after { animation-delay: 1.1s; }
.c-groupcircle__row--3 .c-groupco:nth-child(2) .c-groupco__rule::after { animation-delay: 1.6s; }
.c-groupcircle__row--3 .c-groupco:nth-child(3) .c-groupco__rule::after { animation-delay: 2.1s; }
@media (prefers-reduced-motion: reduce) { .c-groupco__rule::after,.c-groupcircle__line::after,.c-groupcircle__wordmark { animation: none; } }
@media (max-width: 720px) {
  .c-groupwrap { aspect-ratio: auto; }
  .c-groupwrap .c-groupcircle { position: relative; inset: auto; border-radius: 28px; width: 100%; height: auto; padding: clamp(30px,7vw,44px) clamp(20px,5vw,30px); }
  .c-grouporbit { display: none; }
  .c-groupcircle__row--2, .c-groupcircle__row--3 { grid-template-columns: 1fr; gap: 22px; }
  .c-groupcircle__wordmark { font-size: clamp(2rem,8vw,2.8rem); }
}

/* ============================================================
   NETWORK：拠点カード（keipe.co.jp の拠点表示を参考：写真トップ＋ピン付き住所）2026-07-18
   ------------------------------------------------------------
   .c-info-card は他セクションでも使うため、拠点は専用の .c-loc-card に置換し
   .p-comp-network 配下のグリッドだけ上書きする。写真は WP の hokusei_photo_cover で
   .c-loc-card__media に重ねる（未設定時はブランドのグラデ＋ピンのプレースホルダー）。 */
.p-comp-network .c-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 30px);
}
/* カードの箱（背景・枠・影）は無し。写真タイル＋その下のテキストだけで見せる（keipe同様）。 */
.c-loc-card {
  display: flex;
  flex-direction: column;
}
.c-loc-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent, #1E7FC2);
  background-image:
    radial-gradient(130% 120% at 18% 12%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(0, 0, 0, 0.16));
  box-shadow: 0 12px 28px rgba(11, 31, 58, 0.10);
}
.c-loc-card__media .c-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.c-loc-card__pinbg {
  width: 34%;
  height: auto;
  color: #fff;
  opacity: 0.42;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
}
.c-loc-card__region {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.94);
  color: var(--accent, #1E7FC2);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(11, 31, 58, 0.12);
}
.c-loc-card__body { padding: 15px 4px 0; }
.c-loc-card__name {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: var(--ls-heading);
  line-height: 1.5;
  color: var(--color-deep-navy);
}
.c-loc-card__addr {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--color-deep-navy);
}
.c-loc-card__pin {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 5px;
  color: var(--accent, #1E7FC2);
}
@media (max-width: 900px) { .p-comp-network .c-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .p-comp-network .c-card-grid { grid-template-columns: 1fr; } }

/* ============================================================
   NETWORK：拠点マップ（世界＋日本のビジュアル可視化）2026-07-18
   ------------------------------------------------------------
   自作の簡略SVG地図（緯度経度から一貫投影でピン配置）。カード群の上に置く。 */
/* 背景（パネル）は付けず、地図をセクション地に直接。横幅いっぱい・濃色ドット。 */
.c-map-viz {
  margin: 0 auto clamp(24px, 3.5vw, 44px);
}
.c-map-panel { position: relative; }
.c-map-panel__head {
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 1.3rem;
  color: var(--color-hokusei-blue);
  margin: 0 0 4px;
}
.c-map-panel__sub {
  font-size: var(--fs-sm);
  color: #5b6b82;
  margin: 0 0 10px;
  line-height: 1.7;
}
.c-map { display: block; width: 100%; height: auto; }
.c-map--world { aspect-ratio: 1000 / 378; }
.c-map-panel--japan { margin-top: clamp(22px, 3.4vw, 44px); text-align: center; }
.c-map--japan { display: block; width: 100%; max-width: 360px; height: auto; aspect-ratio: 430 / 560; margin: 8px auto 0; }
.c-map--japan { max-height: 440px; margin-inline: auto; }
.c-map__land { fill: #dce3ef; stroke: rgba(11, 31, 58, 0.12); stroke-width: 1; stroke-linejoin: round; }
.c-map__arc { fill: none; stroke: var(--color-gold); stroke-width: 2; stroke-dasharray: 5 6; opacity: 0.7; animation: mapdash 6s linear infinite; pointer-events: none; }
@keyframes mapdash { to { stroke-dashoffset: -110; } }
.c-map__pin-halo { opacity: 0.28; transform-box: fill-box; transform-origin: center; animation: mappulse 2.6s ease-out infinite; pointer-events: none; }
@keyframes mappulse { 0% { transform: scale(0.4); opacity: 0.45; } 70% { transform: scale(1.15); opacity: 0; } 100% { opacity: 0; } }
.c-map__pin-dot { stroke: #fff; stroke-width: 2; }
.c-map__pin.is-jp .c-map__pin-dot, .c-map__pin.is-hq .c-map__pin-dot,
.c-map__pin.is-jp .c-map__pin-halo, .c-map__pin.is-hq .c-map__pin-halo { fill: var(--color-gold); }
.c-map__pin.is-ov .c-map__pin-dot, .c-map__pin.is-dom .c-map__pin-dot,
.c-map__pin.is-ov .c-map__pin-halo, .c-map__pin.is-dom .c-map__pin-halo { fill: var(--color-aqua); }
.c-map__label { font-size: 16px; font-weight: 700; fill: var(--color-deep-navy); paint-order: stroke; stroke: #fff; stroke-width: 3.2px; stroke-linejoin: round; }
.c-map__label--w { font-family: var(--font-en); font-size: 21px; }
@media (prefers-reduced-motion: reduce) { .c-map__pin-halo, .c-map__arc { animation: none; } }
@media (max-width: 760px) {
  .c-map-viz { grid-template-columns: 1fr; }
  .c-map--japan { max-height: 400px; }
  .c-map__label { font-size: 17px; }
}

/* ===== About OUR GROUP 内：拠点ネットワーク（Companyから移設 2026-07-18） ===== */
.c-groupnet { margin-top: clamp(56px, 7vw, 104px); }
.c-groupnet__title {
  text-align: center;
  font-family: var(--font-ja);
  font-size: clamp(2.0rem, 2.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #16305c;
}
.c-groupnet__title::after {
  content: ""; display: block; width: 40px; height: 3px; margin: 14px auto 0;
  background: var(--color-aqua); border-radius: 2px;
}
.c-groupnet__lead {
  text-align: center; max-width: 640px; margin: 16px auto 0;
  font-size: var(--fs-base); line-height: 2.0; color: #4a5568; text-wrap: pretty;
}
/* 地図：背景パネルなし。ドットを濃紺に濃くして淡色背景でも際立たせる */
.c-groupnet .c-map-viz { margin-top: clamp(28px, 4vw, 52px); }
/* 拠点カードを3列に */
.p-about .c-groupnet .c-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
  margin-top: clamp(24px, 3.5vw, 44px);
}
@media (max-width: 900px) { .p-about .c-groupnet .c-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .p-about .c-groupnet .c-card-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Service：事業デザイン刷新（INTLOOP参考／Hokusei調 2026-07-19）
   ・番号付き事業インデックス（英字＋和名＋タグ）
   ・事業行のENアイブロウ＋キーワードチップ
   ・同心円モチーフ（つなぐ／ループの象徴）
   ============================================================ */
/* 大きな同心円モチーフ（セクション装飾） */
.c-biz-rings { position: absolute; top: clamp(-40px, -3vw, -10px); right: clamp(-90px, -6vw, -40px);
  width: min(46vw, 520px); aspect-ratio: 1; z-index: 0; opacity: 0.14; pointer-events: none; }
.c-biz-rings circle { fill: none; stroke: #26426e; stroke-width: 1; stroke-dasharray: 2 8; stroke-linecap: round; }
.p-page-panel .l-container { position: relative; z-index: 1; }

/* 事業インデックス */
.c-biz-index {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.5vw, 22px);
  margin: clamp(34px, 4.5vw, 64px) 0 clamp(46px, 6vw, 90px);
}
.c-biz-index__item {
  --acc: #2DB8C5;
  position: relative; display: flex; flex-direction: column;
  padding: clamp(22px, 1.9vw, 30px) clamp(18px, 1.5vw, 24px) clamp(20px, 1.7vw, 26px);
  background: #fff; border-radius: clamp(14px, 1.4vw, 20px);
  box-shadow: 0 10px 30px rgba(11, 31, 58, 0.06);
  text-decoration: none; overflow: hidden; isolation: isolate;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.c-biz-index__item::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--acc); }
.c-biz-index__item::after {
  content: ""; position: absolute; right: -44px; bottom: -44px; width: 128px; height: 128px; z-index: -1;
  background: repeating-radial-gradient(circle at center, transparent 0 12px, rgba(38, 66, 110, 0.06) 12px 13px);
}
.c-biz-index__item:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(11, 31, 58, 0.13); }
.c-biz-index__no { font-family: var(--font-en); font-size: clamp(2.4rem, 3vw, 3.4rem); font-weight: 700; line-height: 1; color: var(--acc); letter-spacing: 0.02em; }
.c-biz-index__en { margin-top: 14px; font-family: var(--font-en); font-size: 1.3rem; font-weight: 700; letter-spacing: 0.13em; color: #16305c; }
.c-biz-index__jp { margin-top: 5px; font-size: clamp(1.6rem, 1.7vw, 1.9rem); font-weight: 700; color: #0B1F3A; letter-spacing: 0.01em; }
.c-biz-index__desc { margin-top: 11px; font-size: var(--fs-sm); line-height: 1.85; color: #4a5568; flex: 1; text-wrap: pretty; }
.c-biz-index__more { margin-top: 16px; font-family: var(--font-en); font-size: 1.2rem; font-weight: 700; letter-spacing: 0.08em; color: var(--acc); display: inline-flex; align-items: center; gap: 6px; }
.c-biz-index__more span { transition: transform 0.3s var(--ease); }
.c-biz-index__item:hover .c-biz-index__more span { transform: translateX(4px); }
.c-biz-index__item:nth-child(1) { --acc: #26426e; }
.c-biz-index__item:nth-child(2) { --acc: #2DB8C5; }
.c-biz-index__item:nth-child(3) { --acc: #1E7FC2; }
.c-biz-index__item:nth-child(4) { --acc: #C9922E; }
@media (max-width: 900px) { .c-biz-index { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .c-biz-index { grid-template-columns: 1fr; } }

/* 事業行：ENアイブロウ＋タグチップ */
.c-biz-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
  font-family: var(--font-en); font-size: 1.4rem; font-weight: 700; letter-spacing: 0.16em; color: #16305c; }
.c-biz-eyebrow__no { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  flex: none; border-radius: 50%; background: var(--acc, #26426e); color: #fff; font-size: 1.35rem; letter-spacing: 0; }
.c-biz-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.c-biz-tags li { font-size: var(--fs-xs); font-weight: 600; color: #345; background: rgba(45, 184, 197, 0.10);
  border: 1px solid rgba(45, 184, 197, 0.30); border-radius: 999px; padding: 5px 12px; }

/* ============================================================
   Service 刷新 v2（INTLOOP 事業紹介の構図を高再現 2026-07-19）
   ・事業相関チャート（同心円＋放射スポーク＋事業ノード）
   ・サービス節：大円写真＋回転リング＋アイコン＋番号/英和＋キーワードメニュー＋円形View More
   ============================================================ */
:root { --svc-navy:#16305c; --svc-ink:#0B1F3A; }

/* --- 大キャッチ（c-service-lead 相当） --- */
.c-svc-catch { max-width: 940px; margin: clamp(24px,3vw,44px) 0 clamp(40px,5vw,72px); }
.c-svc-catch__main { font-size: clamp(2.4rem,3.4vw,4rem); font-weight:700; line-height:1.5; letter-spacing:0.02em; color: var(--svc-ink); text-wrap: balance; }
.c-svc-catch__main .is-accent { color: var(--color-hokusei-blue); }
.c-svc-catch__sub { margin-top: 22px; font-size: var(--fs-base); line-height: 2.05; color:#40506b; max-width: 760px; text-wrap: pretty; }

/* --- 事業相関チャート --- */
.c-bizchart { position: relative; width: min(100%, 1180px); aspect-ratio: 1; margin: clamp(28px,4vw,64px) auto clamp(56px,7vw,120px); }
.c-bizchart__bg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.c-bizchart__bg .ring { fill:none; stroke:#26426e; opacity:0.22; stroke-dasharray:2 7; stroke-linecap:round; }
.c-bizchart__bg .spoke { stroke:#8ba0bd; stroke-width:1.2; stroke-dasharray:1.5 5; fill:none;
  stroke-dashoffset:0; animation: bizspoke 3.2s linear infinite; }
@keyframes bizspoke { to { stroke-dashoffset:-13; } }
.c-bizchart__core, .c-bizchart__node { position:absolute; transform:translate(-50%,-50%);
  border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; }
.c-bizchart__core { left:50%; top:50%; width:25%; aspect-ratio:1; background:#fff; padding:3%;
  color:var(--svc-ink); box-shadow:0 18px 46px rgba(11,31,58,0.22); border:1px solid rgba(11,31,58,0.07); z-index:3; }
.c-bizchart__core-logo { width:66%; height:auto; display:block; }
.c-bizchart__core-jp { margin-top:11px; font-size:clamp(1.2rem,1.4vw,1.65rem); font-weight:700; line-height:1.5; color:#16305c; }
.c-bizchart__node { width:40%; aspect-ratio:1; background:#fff; text-decoration:none; overflow:hidden;
  box-shadow:0 16px 38px rgba(11,31,58,0.16); border:3px solid var(--acc,#2DB8C5); z-index:2;
  transition: transform .4s var(--ease), box-shadow .4s; }
.c-bizchart__node:hover { transform:translate(-50%,-50%) scale(1.045); box-shadow:0 26px 54px rgba(11,31,58,0.24); }
.c-bizchart__node.-n1 { left:20%; top:20%; --acc:#26426e; }
.c-bizchart__node.-n2 { left:80%; top:20%; --acc:#2DB8C5; }
.c-bizchart__node.-n3 { left:80%; top:80%; --acc:#1E7FC2; }
.c-bizchart__node.-n4 { left:20%; top:80%; --acc:#C9922E; }
/* 円の背景画像（任意）：写真＋濃紺スクリム＋白文字 */
.c-bizchart__node-img { position:absolute; inset:0; border-radius:50%; background-size:cover; background-position:center; z-index:0;
  transition: transform .6s var(--ease); }
.c-bizchart__node:hover .c-bizchart__node-img { transform:scale(1.08); }
.c-bizchart__node:has(.c-bizchart__node-img)::after { content:""; position:absolute; inset:0; border-radius:50%; z-index:1;
  background:linear-gradient(165deg, rgba(11,31,58,0.30) 0%, rgba(11,31,58,0.55) 55%, rgba(11,31,58,0.78) 100%); }
.c-bizchart__node > span:not(.c-bizchart__node-img) { position:relative; z-index:2; }
.c-bizchart__node:has(.c-bizchart__node-img) .c-bizchart__node-no,
.c-bizchart__node:has(.c-bizchart__node-img) .c-bizchart__node-en,
.c-bizchart__node:has(.c-bizchart__node-img) .c-bizchart__node-jp { color:#fff; text-shadow:0 1px 8px rgba(0,0,0,0.28); }
.c-bizchart__node-no { font-family:var(--font-en); font-size:clamp(2rem,2.6vw,3.2rem); font-weight:700; color:var(--acc); line-height:1; }
.c-bizchart__node-en { font-family:var(--font-en); font-size:clamp(1.45rem,1.7vw,2rem); font-weight:700; letter-spacing:0.12em; color:var(--acc); margin-top:8px; }
.c-bizchart__node-jp { margin-top:9px; font-size:clamp(2rem,2.5vw,3rem); font-weight:700; color:var(--svc-ink); line-height:1.4; }
@media (max-width:560px){ .c-bizchart__core-jp{font-size:1.15rem} .c-bizchart__node-jp{font-size:1.15rem} .c-bizchart__node-en{font-size:1rem} }

/* --- サービス節（bizServiceSec 相当） --- */
.c-svcblocks { margin-top: clamp(20px,3vw,44px); }
.c-svcblock { --acc:#2DB8C5; display:grid; grid-template-columns: minmax(280px, 42%) 1fr; align-items:center;
  gap: clamp(32px,5vw,84px); padding-block: clamp(44px,7vh,88px); }
.c-svcblock.-reverse .c-svcblock__visual { order:2; }
.c-svcblock__visual { position:relative; width:min(100%, 44vh); aspect-ratio:1; margin-inline:auto; }
.c-svcblock__ring { position:absolute; inset:-6%; border-radius:50%;
  border:1.5px dashed var(--acc); opacity:0.55; animation: svcring 26s linear infinite; }
.c-svcblock.-reverse .c-svcblock__ring { animation-direction:reverse; }
@keyframes svcring { to { transform:rotate(360deg); } }
.c-svcblock__circle { position:absolute; inset:0; border-radius:50%; overflow:hidden;
  background:radial-gradient(125% 125% at 30% 24%, #EDF7FA 0%, #DDEFF2 46%, #CBE4EB 100%);
  box-shadow: inset 0 0 0 1px rgba(11,31,58,0.06), 0 22px 54px rgba(11,31,58,0.14); }
.c-svcblock__circle .c-cover-img { width:100%; height:100%; object-fit:cover; }
.c-svcblock__icon { position:absolute; right:6%; bottom:4%; width:clamp(58px,7vw,80px); height:clamp(58px,7vw,80px);
  display:grid; place-items:center; border-radius:50%; background:var(--acc); color:#fff; z-index:2;
  box-shadow:0 10px 24px rgba(11,31,58,0.22); }
.c-svcblock__icon svg { width:52%; height:52%; }
.c-svcblock__no { font-family:var(--font-en); font-size:clamp(3.6rem,4.8vw,6rem); font-weight:700; line-height:.9; color:var(--acc); opacity:.9; }
.c-svcblock__head { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 18px; margin-top:8px; }
.c-svcblock__title { font-size:clamp(2.4rem,2.8vw,3.3rem); font-weight:700; letter-spacing:0.03em; color:var(--svc-ink); }
.c-svcblock__en { font-family:var(--font-en); font-size:clamp(1.4rem,1.5vw,1.7rem); font-weight:700; letter-spacing:0.16em; color:var(--acc); }
.c-svcblock__text { margin-top:20px; font-size:clamp(1.55rem,1.05vw,1.8rem); line-height:2.05; color:#3a4b60; text-wrap:pretty; }
.c-svcmenu { list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:12px 24px; }
.c-svcmenu li { position:relative; padding-left:24px; font-size:clamp(1.4rem,0.95vw,1.55rem); font-weight:600; color:#2f4056; }
.c-svcmenu li::before { content:""; position:absolute; left:0; top:0.55em; width:10px; height:10px; border-radius:50%;
  border:2px solid var(--acc); background:#fff; }
.c-svcblock__more { display:inline-flex; align-items:center; gap:16px; margin-top:30px; text-decoration:none;
  font-family:var(--font-en); font-size:1.5rem; font-weight:700; letter-spacing:0.1em; color:var(--svc-ink); }
.c-svcblock__more-circle { width:58px; height:58px; flex:none; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid var(--acc); color:var(--acc); font-size:1.8rem; transition:background .3s var(--ease), color .3s, transform .3s; }
.c-svcblock__more:hover .c-svcblock__more-circle { background:var(--acc); color:#fff; transform:translateX(4px); }
@media (max-width:860px){
  .c-svcblock, .c-svcblock.-reverse { grid-template-columns:1fr; gap:28px; }
  .c-svcblock.-reverse .c-svcblock__visual { order:0; }
  .c-svcmenu { grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion: reduce){ .c-svcblock__ring, .c-bizchart__bg .spoke { animation:none; } }

/* サービス節の番号：TOPページ見出しと同じ手描きストローク描画アニメを適用（配色は各節のアクセント色を維持） */
.c-svcblock__no { font-size: clamp(3rem, 3.8vw, 4.6rem); line-height: 1; margin-bottom: 2px; }
.c-svcblock__no .c-title-svg { width: calc(1.26em * var(--ar, 1.4)); }
.c-svcblock__no .c-title-svg__l { fill: var(--acc); stroke: var(--acc); }

/* ============ Service 装飾追加：サイト共通のドット言語で賑やかに 2026-07-19 ============ */
/* サービスブロック背後の薄いドットグリッド（縁はフェード） */
.c-svcblocks { position: relative; }
.c-svcblocks::before {
  content:""; position:absolute; top:0; bottom:0; left:-3%; right:-3%; z-index:0; pointer-events:none;
  background-image: radial-gradient(rgba(22,48,92,0.06) 1.5px, transparent 1.7px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.c-svcblock { position: relative; z-index: 1; }
/* 各サービス円の脇にアクセント色のドットクラスター */
.c-svcblock__visual::before {
  content:""; position:absolute; z-index:2; width:94px; height:68px; top:-6%; left:-12%;
  background-image: radial-gradient(var(--acc) 3px, transparent 3.3px);
  background-size: 22px 22px; opacity:0.5;
}
.c-svcblock.-reverse .c-svcblock__visual::before { left:auto; right:-12%; }
/* チャート角の浮遊ドット（アクア／金） */
.c-bizchart::before, .c-bizchart::after {
  content:""; position:absolute; z-index:0; pointer-events:none; width:140px; height:96px; background-size:23px 23px; opacity:0.7;
}
.c-bizchart::before { top:-1%; left:-6%; background-image: radial-gradient(#2DB8C5 3.3px, transparent 3.6px); }
.c-bizchart::after  { bottom:1%; right:-6%; background-image: radial-gradient(#C9922E 3px, transparent 3.3px); }
/* 事業名の左に小さなアクセントのドット（見出しのリズム） */
.c-svcblock__head { position: relative; }
@media (max-width:860px){
  .c-svcblock__visual::before { width:64px; height:46px; }
  .c-bizchart::before, .c-bizchart::after { width:92px; height:62px; }
}

/* ドット装飾に動きを付与（ゆらぎ／流れ） 2026-07-19 */
@keyframes svc-dot-bob { 0%,100% { transform:translateY(0); opacity:0.72; } 50% { transform:translateY(-10px); opacity:0.42; } }
@keyframes svc-dot-drift { from { background-position:0 0; } to { background-position:22px 22px; } }
.c-bizchart::before { animation: svc-dot-bob 5s ease-in-out infinite; }
.c-bizchart::after  { animation: svc-dot-bob 6.6s ease-in-out infinite; animation-delay:-2.4s; }
.c-svcblock__visual::before { animation: svc-dot-drift 7s linear infinite; }
@media (prefers-reduced-motion: reduce){ .c-bizchart::before, .c-bizchart::after, .c-svcblock__visual::before { animation:none; } }

/* ============ ドット装飾 v2：色×大小のきらめき（c-deco調・移動なし） 2026-07-19 ============ */
.c-bizchart::before, .c-bizchart::after { display: none !important; }  /* 旧・単色移動ドットを無効化 */
.c-dotcluster { position:absolute; z-index:1; pointer-events:none; width:clamp(96px,12vw,150px); }
.c-dotcluster svg { width:100%; height:auto; overflow:visible; display:block; }
.c-dotcluster circle { transform-box:fill-box; transform-origin:center; animation: dot-twinkle 3.4s ease-in-out infinite; }
@keyframes dot-twinkle { 0%,100% { transform:scale(.5); opacity:.28; } 50% { transform:scale(1.2); opacity:1; } }
.c-dotcluster circle:nth-child(5n+1){ animation-delay:0s; }
.c-dotcluster circle:nth-child(5n+2){ animation-delay:.42s; }
.c-dotcluster circle:nth-child(5n+3){ animation-delay:.84s; }
.c-dotcluster circle:nth-child(5n+4){ animation-delay:1.26s; }
.c-dotcluster circle:nth-child(5n)  { animation-delay:1.68s; }
.c-dotcluster.-tl { top:-3%; left:-7%; }
.c-dotcluster.-br { bottom:-1%; right:-7%; width:clamp(110px,14vw,172px); }
/* サービス円の脇ドット：移動→大小＋明滅のパルスへ */
.c-svcblock__visual::before { animation: svc-dot-psize 3.4s ease-in-out infinite !important; }
@keyframes svc-dot-psize { 0%,100% { transform:scale(.8); opacity:.3; } 50% { transform:scale(1.05); opacity:.6; } }
@media (prefers-reduced-motion: reduce){ .c-dotcluster circle, .c-svcblock__visual::before { animation:none !important; } }

/* チャートの接続線を「拠点ネットワーク（地図）」風に：流れる破線＋走るパルス 2026-07-19 */
.c-bizchart__bg .spoke { display: none; }  /* 矢印スポークは撤去 */
/* 丸い線（同心円）：点線でゆっくり流れる軌道として復活 */
.c-bizchart__bg .ring { fill:none; stroke:#26426e; stroke-width:1.2; stroke-dasharray:2 7; stroke-linecap:round; opacity:0.2;
  animation: cflow-dash 7s linear infinite; }
.c-bizchart__bg .ring:nth-of-type(2) { animation-duration: 9s; animation-direction: reverse; opacity:0.16; }
.c-bizchart__bg .ring:nth-of-type(3) { animation-duration: 12s; opacity:0.13; }
.c-bizchart__bg .cflow { fill:none; stroke:#8095b5; stroke-width:1.5; stroke-dasharray:2 6; stroke-linecap:round; opacity:0.6;
  animation: cflow-dash 2.6s linear infinite; }
@keyframes cflow-dash { to { stroke-dashoffset:-16; } }
@media (prefers-reduced-motion: reduce){ .c-bizchart__bg .cflow { animation:none; } .c-bizchart__bg .cpulse { display:none; } }

/* 同心円を周回するドット（ぐるぐる） 2026-07-19 */
.c-bizchart__bg .corbit { filter: drop-shadow(0 0 5px rgba(45,184,197,0.35)); }
.c-bizchart__bg .ring { animation-duration: 26s !important; opacity: 0.16 !important; }  /* リングの流れは控えめに＝周回ドットを主役に */
@media (prefers-reduced-motion: reduce){ .c-bizchart__bg .corbit animateTransform { display:none; } }

/* 動きをゆっくり・静かに（騒々しさ低減） 2026-07-20 */
.c-dotcluster circle { animation-duration: 6s !important; }
.c-svcblock__visual::before { animation-duration: 6s !important; }
.c-bizchart__bg .ring { animation-duration: 40s !important; opacity: 0.18 !important; }

/* 円の線を白く・やや太く（視認性UP） 2026-07-20 */
.c-bizchart__bg .ring { stroke: #ffffff !important; stroke-width: 2.6 !important; opacity: 0.85 !important; stroke-dasharray: 3 9 !important; }

/* 円の線自体をぐるぐる回転（周回ドットは廃止） 2026-07-20 */
.c-bizchart__bg .ring { transform-box: fill-box; transform-origin: center;
  animation: ring-spin 40s linear infinite !important; }
@keyframes ring-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .c-bizchart__bg .ring { animation: none !important; } }

/* 事業セクション（OUR BUSINESS）の背景をデザイン：グラデ＋中央スポットライト 2026-07-20 */
.p-service .p-page-panel.is-aqua {
  background:
    radial-gradient(66% 54% at 50% 42%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(163deg, #C3DFEC 0%, #DCEEF4 48%, #C8E4EE 100%) !important;
}

/* 「4象徴チャート」と「事業詳細への動線」を区切る：詳細ブロックを白パネル化 2026-07-20 */
.c-svcblocks {
  margin-top: clamp(56px, 7vw, 112px);
  background: linear-gradient(180deg, #ffffff 0%, #F4F9FB 100%);
  border-radius: clamp(22px, 3vw, 44px);
  padding: clamp(48px, 6vw, 88px) clamp(28px, 4vw, 64px) clamp(40px, 4.5vw, 66px);
  box-shadow: 0 26px 64px rgba(11,31,58,0.10);
}
.c-svcblocks::before { left:0 !important; right:0 !important; top:0 !important; bottom:0 !important; border-radius: inherit; opacity: 0.55; }
.c-svcdetail__head { text-align:center; margin: 0 0 clamp(20px,3vw,44px); font-size: clamp(2rem,2.5vw,2.9rem); font-weight:700; color:#0B1F3A; line-height:1.35; position:relative; z-index:1; }
.c-svcdetail__head span { display:block; font-family:var(--font-en); font-size:clamp(1.2rem,1.4vw,1.5rem); font-weight:700; letter-spacing:0.18em; color:var(--color-aqua); margin-bottom:8px; }
.c-svcdetail__head::after { content:""; display:block; width:44px; height:3px; margin:16px auto 0; background:var(--color-aqua); border-radius:2px; }

/* 各事業のご紹介パネル：単体ドットを程よく点在（静かな装飾） 2026-07-20 */
.c-svcblocks::before { opacity: 0.32 !important; }  /* 下地のドットグリッドは控えめに */
.c-svcblocks::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius: inherit;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle at 4% 8%,  #2DB8C5 0 4px,  transparent 5px),
    radial-gradient(circle at 9% 14%, rgba(30,127,194,0.55) 0 2px, transparent 3px),
    radial-gradient(circle at 96% 6%, #C9922E 0 3px,  transparent 4px),
    radial-gradient(circle at 2.6% 32%, #1E7FC2 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 97.4% 29%, #2DB8C5 0 5px, transparent 6px),
    radial-gradient(circle at 4% 57%, #C9922E 0 3px,  transparent 4px),
    radial-gradient(circle at 96% 60%, #1E7FC2 0 4px, transparent 5px),
    radial-gradient(circle at 8.5% 63%, rgba(45,184,197,0.5) 0 2px, transparent 3px),
    radial-gradient(circle at 3% 83%, #2DB8C5 0 4px,  transparent 5px),
    radial-gradient(circle at 97% 86%, #C9922E 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 46% 2.6%, #2DB8C5 0 3px, transparent 4px),
    radial-gradient(circle at 55% 97%, #1E7FC2 0 3px, transparent 4px);
  opacity: 0.85;
}

/* 各事業のご紹介パネル：パーティクル演出（漂う粒子） 2026-07-20 */
.c-svcblocks::after { display: none; }  /* 静的な点在ドットは廃止 */
.c-particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; border-radius:inherit; }
.c-particles span { position:absolute; left:var(--x); top:var(--y); width:var(--s); height:var(--s);
  border-radius:50%; background:var(--c); will-change:transform,opacity;
  animation: particle-drift var(--d) ease-in-out var(--delay) infinite alternate; }
@keyframes particle-drift { 0%{ transform:translate(0,0); opacity:var(--o1); } 100%{ transform:translate(var(--dx),var(--dy)); opacity:var(--o2); } }
@media (prefers-reduced-motion: reduce){ .c-particles span { animation:none; opacity:0.4; } }

/* パーティクルに淡いグロー（発光）を付与して視認性UP 2026-07-20 */
.c-particles span { box-shadow: 0 0 6px 0 var(--c); }

/* パーティクル演出は廃止（要素削除済み） 2026-07-20 */
.c-particles { display: none !important; }

/* サービス系テキストの改行を整える（文節改行＝body継承＋孤立回避 text-wrap:pretty） 2026-07-20 */
.c-svcblock__title, .c-svcblock__en, .c-svcmenu li, .c-svcdetail__head,
.c-bizchart__node-jp, .c-bizchart__node-en, .c-bizchart__core-jp,
.c-biz-index__jp, .c-biz-index__desc, .c-biz-index__en, .c-biz-eyebrow {
  text-wrap: pretty;
}

/* ============ モバイル横スクロール解消（改行監査で検出） 2026-07-20 ============ */
/* 根本原因：グリッド項目の自動最小幅(min-content)で1frトラックが親内容幅を超えて膨張(blowout)。
   正攻法の min-width:0 でトラック膨張を止め、visualを本来幅に戻して中央化。
   回転リングの不可視な角部分だけを overflow-x:clip で安全網クリップ（縦の装飾ブリードは保持）。 */
/* 全幅：装飾(c-biz-rings/回転リング)のビューポート外ブリードによる横スクロールを防止（Xのみクリップ、可視域は不変） */
.p-service .p-page-panel { overflow-x: clip; }
@media (max-width: 860px){
  .c-svcblock__visual, .c-svcblock__body { min-width: 0; }
  .c-svcblock__visual { width: min(100%, 44vh); margin-inline: auto; }
}

/* about グループ図：モバイルで width:min(94vw,1080px) が親paddingを無視して約10px溢れ→100%に是正 */
@media (max-width: 720px){
  .c-groupwrap { width: 100%; margin-inline: 0; }
}

/* ============ 改行ハードニング（保険）：英字1語/メール/海外住所の溢れ対策 2026-07-20 ============
   word-break:auto-phrase は和文の文節改行を助けるがラテン1語は割らない。
   固定幅・overflow:hidden 内に長い英字が入っても溢れないよう overflow-wrap:anywhere を保険付与。
   日本語は従来どおり文節で折れ、収まる限り作用しないため現状の見た目は不変。 */
.c-loc-card__addr, .c-loc-card__name, .c-loc-card__region,
.c-groupco__name, .c-groupco__desc, .c-groupco__loc,
.c-info-card__title, .c-footer__address,
.c-table td, .c-table th,
.c-bizchart__node-en, .c-bizchart__node-jp,
.c-breadcrumb [aria-current="page"] {
  overflow-wrap: anywhere;
}
/* パンくず：長い現在地でも折り返して1行伸長・重なりを防止 */
.c-breadcrumb { flex-wrap: wrap; }
.c-breadcrumb [aria-current="page"] { min-width: 0; }
/* サービス節キーワードのグリッド項目：長語でのトラック膨張を防止 */
.c-svcmenu li { min-width: 0; }

/* カードグリッド3列固定（6枚を3+3で均等に。auto-fillの4+2不揃いを回避） 2026-07-20 */
.c-card-grid--tri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px){ .c-card-grid--tri { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .c-card-grid--tri { grid-template-columns: 1fr; } }

/* 拠点カード名の（正式社名）は一段小さく＝支社名と1行に収める（沖縄/欧州/北米の折返し解消） 2026-07-20 */
.c-loc-card__name-sub { font-size: 0.66em; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }

/* ============ プロダクト・ギャラリー：製品を写真で一覧化（初見でも分かりやすい） 2026-07-20 ============
   写真＋製品名＋スペック＋一言。子ページ共通で再利用できる部品。 */
.c-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(24px, 4vw, 44px);
}
@media (max-width: 860px){ .c-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px){ .c-product-grid { grid-template-columns: 1fr; } }
.c-product-card {
  display: flex; flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-silver);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
@media (hover: hover){
  .c-product-card:hover { transform: translateY(-6px); box-shadow: 0 24px 54px rgba(11,31,58,0.16); border-color: rgba(30,127,194,0.4); }
}
.c-product-card__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-mist); }
.c-product-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
@media (hover: hover){ .c-product-card:hover .c-product-card__img img { transform: scale(1.06); } }
.c-product-card__body { flex: 1; padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.8vw, 24px) clamp(20px, 2vw, 26px); }
.c-product-card__name { font-size: clamp(1.75rem, 1.9vw, 2.05rem); font-weight: 700; letter-spacing: 0.02em; color: var(--color-deep-navy); line-height: 1.4; }
.c-product-card__spec { display: inline-block; margin-top: 8px; font-family: var(--font-en); font-size: clamp(1.2rem, 1.2vw, 1.35rem); font-weight: 700; letter-spacing: 0.03em; color: var(--color-hokusei-blue); }
.c-product-card__text { margin-top: 12px; font-size: var(--fs-sm); line-height: 1.85; color: #3a4b60; text-wrap: pretty; }

/* ============ サービス子ページ：参考サイト風の静かな編集構図 v1（.p-svc-detail） 2026-07-20 ============
   カラーパネル＋角丸インセット → 白/極薄の交互フル幅・広い余白・章番号ウォーターマーク非表示・列を締める。
   既存の賑やかな装飾を抑え、余白と縦組みで「綺麗にまとまった」編集トーンへ。 */
/* パネル：インセット・角丸を廃してフル幅、余白を広げる */
.p-svc-detail .p-page-panel {
  margin-inline: 0 !important;
  margin-block: 0 !important;
  border-radius: 0 !important;
  padding-block: clamp(84px, 12vw, 176px) !important;
  overflow-x: clip;
}
/* 色は白／極薄グレイッシュブルーの交互に（章の奇偶で） */
.p-svc-detail .p-page-panel.is-odd  { background: #FFFFFF !important; }
.p-svc-detail .p-page-panel.is-even { background: #F5F8FB !important; }
/* 章番号ウォーターマークは非表示（見出しに集約） */
.p-svc-detail .c-chapter-no { display: none !important; }
/* コンテンツ列を締めて左右に余白を（編集的な静けさ） */
.p-svc-detail .l-container { max-width: 1080px; }
/* 見出しと本文の間を広めに */
.p-svc-detail .c-sec-head { margin-bottom: clamp(40px, 4.5vw, 72px); }
.p-svc-detail .c-sec-head__lead { max-width: 68ch; }
/* ============ 大型ヒーロー：左＝濃紺パネル(巨大タイトル)／右＝写真（参考サイト風・大胆版・常に可読） ============ */
.p-svc-detail .c-page-header.c-svc-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) 1.08fr;
  min-height: min(82vh, 720px);
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  background: #0B1F3A;
}
.c-svc-hero__bg {
  grid-column: 2; grid-row: 1;
  position: relative; inset: auto;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* 写真左端を濃紺へなじませるブレンド */
.c-svc-hero::after {
  content: ""; grid-column: 2; grid-row: 1;
  position: relative; z-index: 1; margin-left: -1px;
  background: linear-gradient(90deg, #0B1F3A 0%, rgba(11,31,58,0.4) 20%, rgba(11,31,58,0) 52%);
}
/* 左のテキストパネル */
.p-svc-detail .c-svc-hero .c-page-header__inner {
  grid-column: 1; grid-row: 1;
  position: relative; z-index: 2;
  width: 100%;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  padding: clamp(44px, 6vw, 96px) clamp(24px, 3.6vw, 72px) !important;
  color: #fff;
}
.p-svc-detail .c-svc-hero .c-deco { display: none !important; }
.p-svc-detail .c-svc-hero .c-page-header__title {
  font-size: clamp(5.5rem, 11vw, 12rem) !important;
  line-height: 0.9; margin: 0;
}
/* ヒーロータイトルは描画アニメに依存せず常にソリッド白で表示（titleObserver未発火でも確実に）
   ベースが fill-opacity:0（塗り透明・ストロークのみ）のため fill-opacity:1 で塗りを出す */
.p-svc-detail .c-svc-hero .c-title-svg__l {
  fill: #fff !important; fill-opacity: 1 !important;
  stroke: #fff !important; stroke-opacity: 0 !important;
  stroke-dashoffset: 0 !important; opacity: 1 !important;
}
.p-svc-detail .c-svc-hero .c-page-header__kicker {
  order: -1; color: #fff !important; opacity: 0.92; font-weight: 700;
  font-size: clamp(1.4rem, 1.5vw, 1.9rem); letter-spacing: 0.22em;
  margin: 0 0 clamp(10px, 1.4vw, 18px) !important;
}
.p-svc-detail .c-svc-hero .c-breadcrumb {
  position: static; order: -2; margin: 0 0 clamp(14px, 2vw, 26px) !important;
}
.p-svc-detail .c-svc-hero .c-breadcrumb a,
.p-svc-detail .c-svc-hero .c-breadcrumb span,
.p-svc-detail .c-svc-hero .c-breadcrumb span[aria-current] { color: rgba(255,255,255,0.85); }
.p-svc-detail .c-svc-hero .c-breadcrumb__sep { background: rgba(255,255,255,0.5); }
/* モバイル：写真を上・濃紺テキストパネルを下に積む */
@media (max-width: 767px) {
  .p-svc-detail .c-page-header.c-svc-hero { grid-template-columns: 1fr; min-height: 0; }
  .c-svc-hero__bg { grid-column: 1; grid-row: 1; height: clamp(220px, 54vw, 380px); }
  .c-svc-hero::after { display: none; }
  .p-svc-detail .c-svc-hero .c-page-header__inner { grid-column: 1; grid-row: 2; padding-block: clamp(30px, 8vw, 44px) !important; }
  .p-svc-detail .c-svc-hero .c-page-header__title { font-size: clamp(4.6rem, 20vw, 7rem) !important; }
}
/* セクション見出し（日本語キャッチ）を一段大きく＝編集的な迫力に */
.p-svc-detail .c-sec-head__title { font-size: clamp(2.6rem, 3.6vw, 4.2rem); line-height: 1.35; }

/* ============ 用途タグ／サブ見出し（サービス詳細） 2026-07-21 ============ */
/* 用途チップの一覧（「こんな用途に対応」を一目で・逆算検索の受け皿） */
.c-tag-grid { display: flex; flex-wrap: wrap; gap: clamp(10px, 1vw, 14px); margin-top: clamp(24px, 3vw, 40px); }
.c-tag-grid .c-tag {
  font-size: clamp(1.4rem, 1.35vw, 1.65rem); font-weight: 700; line-height: 1.3;
  padding: clamp(10px, 1vw, 14px) clamp(16px, 1.6vw, 22px);
  border: 1px solid var(--color-silver); border-radius: 999px;
  background: var(--color-white); color: var(--color-deep-navy);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
@media (hover:hover){ .c-tag-grid .c-tag:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(11,31,58,0.12); border-color: rgba(30,127,194,0.4); } }
.c-tag-grid .c-tag em { font-style: normal; color: var(--color-hokusei-blue); }
/* 取り扱いの小見出し（品目グループのラベル） */
.c-lineup-label { margin: clamp(32px, 4vw, 56px) 0 clamp(12px, 1.4vw, 18px); font-size: clamp(1.7rem, 1.9vw, 2.1rem); font-weight: 700; letter-spacing: 0.03em; color: var(--color-deep-navy); display: flex; align-items: baseline; gap: 12px; }
.c-lineup-label span { font-family: var(--font-en); font-size: 0.62em; font-weight: 700; letter-spacing: 0.08em; color: var(--color-hokusei-blue); }
/* 想いブロック（引用調） */
.c-belief { margin-top: clamp(28px, 3.5vw, 48px); padding: clamp(24px, 3vw, 40px) clamp(24px, 3.4vw, 48px); border-left: 4px solid var(--color-aqua); background: linear-gradient(180deg, rgba(45,184,197,0.06), rgba(45,184,197,0.02)); border-radius: 0 var(--radius-card) var(--radius-card) 0; }
.c-belief__lead { font-size: clamp(1.9rem, 2.2vw, 2.5rem); font-weight: 700; line-height: 1.6; color: var(--color-deep-navy); text-wrap: pretty; }
.c-belief__text { margin-top: 14px; font-size: var(--fs-base); line-height: 2.0; color: #3a4b60; text-wrap: pretty; }
.c-belief__sign { margin-top: 16px; font-size: var(--fs-sm); font-weight: 700; color: rgba(11,31,58,0.7); }
/* メディア掲載の一覧 */
.c-media-list { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: clamp(18px, 2vw, 28px); }
.c-media-list li { font-size: var(--fs-sm); font-weight: 700; padding: 7px 14px; border-radius: 999px; background: var(--color-mist); color: rgba(11,31,58,0.78); }
/* サービス詳細の em 強調は青・非斜体で統一 */
.p-svc-detail em { font-style: normal; font-weight: 700; color: var(--color-hokusei-blue); }
/* 対応事例テーブル：見出しセル内の補足（顧客タイプ）を小さく */
.p-svc-detail .c-table th small { display: block; margin-top: 3px; font-size: 0.76em; font-weight: 500; color: rgba(11,31,58,0.6); }

/* ============ 実績データカード（対応事例）：数値を主役に、スキャンできる見せ方 2026-07-21 ============ */
.c-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(26px, 3.2vw, 44px); }
@media (max-width: 860px){ .c-case-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .c-case-grid { grid-template-columns: 1fr; } }
.c-case {
  position: relative; display: flex; flex-direction: column;
  background: var(--color-white); border: 1px solid var(--color-silver);
  border-radius: var(--radius-card); padding: clamp(22px, 2.2vw, 32px) clamp(22px, 2.2vw, 30px) clamp(24px, 2.4vw, 32px);
  box-shadow: var(--shadow-card); overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.c-case::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--color-aqua), var(--color-hokusei-blue)); }
@media (hover:hover){ .c-case:hover { transform: translateY(-6px); box-shadow: 0 24px 52px rgba(11,31,58,0.16); border-color: rgba(30,127,194,0.4); } }
.c-case__field { font-size: clamp(1.55rem, 1.6vw, 1.85rem); font-weight: 700; letter-spacing: 0.02em; color: var(--color-deep-navy); }
.c-case__value { font-family: var(--font-en); font-size: clamp(3.2rem, 4.2vw, 4.8rem); font-weight: 700; line-height: 1; letter-spacing: -0.015em; color: var(--color-hokusei-blue); margin-top: 10px; }
.c-case__value small { font-size: 0.36em; font-weight: 700; letter-spacing: 0.02em; color: rgba(11,31,58,0.5); margin-left: 5px; }
.c-case__spec { margin-top: 12px; font-size: var(--fs-sm); font-weight: 700; line-height: 1.7; color: #2f4056; text-wrap: pretty; }
.c-case__client { margin-top: auto; padding-top: 12px; font-size: var(--fs-xs); font-weight: 500; color: rgba(11,31,58,0.55); }

/* ============================================================================
   サービス詳細ページ：PREVENT（prevent.co.jp/myscope）の"レイアウト・見せ方"を模倣。
   ※配色はホクセイのまま（紺・アクア・青・金）。淡い地に白い"浮かぶ"角丸カード。
   ============================================================================ */
:root { --svc-soft-bg: #EEF3F8; --svc-shadow: 0 22px 48px rgba(11,31,58,0.09), 0 6px 16px rgba(11,31,58,0.05); }
/* ページ全体を淡いブルーグレー地に。セクション背景は透明にして地色を見せる */
.p-svc-detail { background: var(--svc-soft-bg); }
.p-svc-detail .p-page-panel.is-odd,
.p-svc-detail .p-page-panel.is-even { background: transparent !important; }
.p-svc-detail .c-next01 { background: transparent; }

/* カード類：大きめ角丸＋柔らかい影で"浮遊感"（レイアウトのみ模倣） */
.p-svc-detail .c-product-card,
.p-svc-detail .c-info-card,
.p-svc-detail .c-case {
  border-radius: 22px !important;
  border: 1px solid rgba(11,31,58,0.06) !important;
  background: #fff !important;
  box-shadow: var(--svc-shadow) !important;
}
@media (hover:hover){
  .p-svc-detail .c-product-card:hover,
  .p-svc-detail .c-info-card:hover,
  .p-svc-detail .c-case:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(11,31,58,0.16), 0 8px 20px rgba(11,31,58,0.06) !important; border-color: rgba(45,184,197,0.35) !important; }
}
/* 想いブロックも白カード化（左のアクアライン維持） */
.p-svc-detail .c-belief {
  background: #fff; box-shadow: var(--svc-shadow);
  border-left: 5px solid var(--color-aqua);
  border-radius: 6px 22px 22px 6px;
}

/* テーブルを白い角丸カードに（罫線を薄く・行間ゆったり・見やすく） */
.p-svc-detail .c-table {
  background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: var(--svc-shadow); border: 1px solid rgba(11,31,58,0.06);
}
.p-svc-detail .c-table th,
.p-svc-detail .c-table td { border-color: rgba(11,31,58,0.10) !important; padding-block: clamp(16px, 1.6vw, 22px); }
.p-svc-detail .c-table th { background: rgba(45,184,197,0.06); color: var(--color-deep-navy); }

/* 用途タグ：アウトラインピル（ホクセイのアクア／青で柔らかく） */
.p-svc-detail .c-tag-grid .c-tag {
  border: 1.5px solid rgba(45,184,197,0.5); color: var(--color-hokusei-blue); background: #fff;
  border-radius: 100px; box-shadow: 0 6px 16px rgba(11,31,58,0.05);
}
@media (hover:hover){ .p-svc-detail .c-tag-grid .c-tag:hover { background: rgba(45,184,197,0.08); border-color: var(--color-aqua); transform: translateY(-3px); box-shadow: 0 12px 26px rgba(11,31,58,0.12); } }

/* メディア掲載ピルも柔らかく */
.p-svc-detail .c-media-list li { background: #fff; box-shadow: 0 6px 16px rgba(11,31,58,0.05); }

/* MV/メディア行の円形写真も柔らかい影に */
.p-svc-detail .c-media-row__visual { box-shadow: 0 22px 48px rgba(11,31,58,0.12); }

/* ============ 純度スケール（グラフ）＆ 取引の流れ（ステップ図）：PREVENT風の"図で見せる" 2026-07-21 ============ */
/* 純度スケール：一般アルミ〜6Nを横軸で可視化 */
.c-purity {
  background: #fff; border-radius: 22px; box-shadow: var(--svc-shadow); border: 1px solid rgba(11,31,58,0.06);
  padding: clamp(28px,3vw,44px) clamp(28px,3.6vw,56px) clamp(44px,4.4vw,60px);
  margin-top: clamp(26px,3.2vw,44px);
}
.c-purity__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; }
.c-purity__range { font-family: var(--font-en); font-size: clamp(1.9rem,2.4vw,2.8rem); font-weight: 700; letter-spacing: 0.01em; color: var(--color-hokusei-blue); }
.c-purity__scale { position: relative; margin-top: clamp(34px,3.6vw,52px); }
.c-purity__track { height: 12px; border-radius: 999px; background: #E6EDF4; overflow: hidden; }
.c-purity__fill { height: 100%; width: 100%; background: linear-gradient(90deg, #CFE7E9 0%, var(--color-aqua) 42%, var(--color-hokusei-blue) 100%); }
.c-purity__marks { list-style: none; margin: 0; padding: 0; position: relative; height: 58px; }
.c-purity__marks li { position: absolute; top: 0; left: var(--x); transform: translateX(-50%); text-align: center; }
.c-purity__marks li::before { content: ""; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 2px; height: 15px; background: rgba(11,31,58,0.22); }
.c-purity__marks li.is-peak::before { background: var(--color-hokusei-blue); width: 3px; }
.c-purity__marks b { display: block; font-family: var(--font-en); font-size: clamp(1.5rem,1.7vw,1.95rem); font-weight: 700; color: var(--color-deep-navy); }
.c-purity__marks li.is-peak b { color: var(--color-hokusei-blue); }
.c-purity__marks span { font-size: var(--fs-xs); color: rgba(11,31,58,0.55); white-space: nowrap; }
.c-purity__note { margin-top: clamp(22px,2.2vw,30px); font-size: var(--fs-sm); line-height: 1.95; color: #3a4b60; }
@media (max-width: 560px){ .c-purity__marks span { display: none; } .c-purity__marks li:first-child span, .c-purity__marks li.is-peak span { display: block; } }

/* 取引の流れ：番号付きステップを矢印でつなぐフロー図 */
.c-steps { list-style: none; margin: clamp(26px,3vw,44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px,1.4vw,20px); }
@media (max-width: 900px){ .c-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .c-steps { grid-template-columns: 1fr; } }
.c-step {
  position: relative; background: #fff; border-radius: 18px; border: 1px solid rgba(11,31,58,0.06);
  box-shadow: 0 12px 30px rgba(11,31,58,0.07); padding: clamp(20px,2vw,26px) clamp(18px,1.8vw,22px) clamp(22px,2.2vw,26px);
}
/* ステップ間の矢印（横並び時） */
.c-steps .c-step:not(:last-child)::after {
  content: ""; position: absolute; z-index: 2; right: clamp(-14px,-1vw,-11px); top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-top: 2px solid var(--color-aqua); border-right: 2px solid var(--color-aqua); rotate: 45deg;
}
@media (max-width: 900px){ .c-steps .c-step:not(:last-child)::after { display: none; } }
.c-step__no { display: inline-flex; align-items: center; justify-content: center; width: clamp(38px,3.4vw,46px); height: clamp(38px,3.4vw,46px); border-radius: 50%; background: linear-gradient(135deg, var(--color-aqua), var(--color-hokusei-blue)); color: #fff; font-family: var(--font-en); font-weight: 700; font-size: clamp(1.5rem,1.6vw,1.8rem); }
.c-step__ttl { margin-top: 12px; font-size: clamp(1.6rem,1.7vw,1.9rem); font-weight: 700; color: var(--color-deep-navy); }
.c-step__txt { margin-top: 7px; font-size: var(--fs-sm); line-height: 1.8; color: #3a4b60; text-wrap: pretty; }

/* ============ デザインモック実装：アイコン／2カラム／用途カード 2026-07-21 ============ */
/* 共通アイコン（線画・ホクセイのアクア〜青） */
.c-uicon { width: clamp(30px, 3.2vw, 40px); height: auto; color: var(--color-hokusei-blue); stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.c-uicon--sm { width: clamp(24px, 2.4vw, 30px); }
/* 2カラム：内容（左）＋写真（右） */
.c-svc-2col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 72px); align-items: center; }
@media (max-width: 900px){ .c-svc-2col { grid-template-columns: 1fr; } }
.c-svc-2col__media { border-radius: 22px; overflow: hidden; box-shadow: var(--svc-shadow); aspect-ratio: 4/3; }
.c-svc-2col__media img { width: 100%; height: 100%; object-fit: cover; }
.c-svc-2col--wide-text { grid-template-columns: 1.15fr 0.85fr; }
@media (max-width: 900px){ .c-svc-2col--wide-text { grid-template-columns: 1fr; } }

/* 用途アイコンカード（グリッド） */
.c-usecase-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1.2vw, 16px); }
@media (max-width: 900px){ .c-usecase-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px){ .c-usecase-grid { grid-template-columns: repeat(2, 1fr); } }
.c-usecase {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  background: #fff; border-radius: 16px; border: 1px solid rgba(11,31,58,0.06);
  box-shadow: 0 12px 28px rgba(11,31,58,0.06); padding: clamp(16px,1.6vw,22px) clamp(8px,1vw,12px);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
@media (hover:hover){ .c-usecase:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(11,31,58,0.12); } }
.c-usecase__label { font-size: clamp(1.25rem, 1.2vw, 1.45rem); font-weight: 700; line-height: 1.4; color: var(--color-deep-navy); text-wrap: balance; }
/* 用途セクション：アイコングリッド（左）＋写真（右） */
.c-usecase-wrap { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: clamp(24px, 3vw, 48px); align-items: stretch; }
@media (max-width: 980px){ .c-usecase-wrap { grid-template-columns: 1fr; } }
.c-usecase-photo { border-radius: 22px; overflow: hidden; box-shadow: var(--svc-shadow); min-height: 260px; }
.c-usecase-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 980px){ .c-usecase-photo { min-height: 200px; } }

/* 強み・実績・工法カードのアイコン枠 */
.c-info-card__icon, .c-case__icon { display: inline-flex; align-items: center; justify-content: center; width: clamp(48px,4.4vw,58px); height: clamp(48px,4.4vw,58px); border-radius: 14px; background: rgba(45,184,197,0.1); margin-bottom: 14px; }
.c-info-card__icon .c-uicon, .c-case__icon .c-uicon { width: 56%; }
.c-case__icon { width: clamp(40px,3.6vw,48px); height: clamp(40px,3.6vw,48px); border-radius: 12px; margin-bottom: 12px; }

/* ---- 明るいOVERVIEW（濃紺ヒーロー廃止・見出し左＋写真右） ---- */
.c-svc-crumb { border-bottom: 1px solid rgba(11,31,58,0.08); padding: 16px 0; background: var(--svc-soft-bg); }
.c-svc-crumb .c-breadcrumb { margin: 0; }
.p-svc-overview { padding-top: clamp(40px, 5vw, 72px) !important; }
.p-svc-overview .c-chapter-no { display: none; }
.p-svc-overview__grid { align-items: center; }
.p-svc-overview__grid .c-sec-head { margin-bottom: 0; }
.p-svc-overview__h1 { font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.32; }
/* ファクトカード（アイコン付き 4枚） */
.c-fact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(32px, 4vw, 56px); list-style: none; padding: 0; }
@media (max-width: 620px){ .c-fact-cards { grid-template-columns: repeat(2, 1fr); } }
.c-fact-card { background: #fff; border-radius: 18px; box-shadow: var(--svc-shadow); padding: clamp(18px,1.8vw,26px); display: flex; flex-direction: column; gap: 8px; }
.c-fact-card__head { display: flex; align-items: center; gap: 10px; }
.c-fact-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(45,184,197,0.12); flex: none; }
.c-fact-card__icon .c-uicon { width: 22px; color: var(--color-hokusei-blue); }
.c-fact-card__label { font-size: 1.2rem; font-weight: 700; color: var(--color-hokusei-blue); letter-spacing: 0.04em; }
.c-fact-card__value { font-size: clamp(1.9rem, 2.4vw, 2.5rem); font-weight: 800; color: var(--color-deep-navy); line-height: 1.1; font-family: var(--font-en); }

/* ---- 想い：社長写真つき ---- */
.c-belief--photo { display: grid; grid-template-columns: 0.42fr 0.58fr; gap: clamp(24px, 3vw, 48px); align-items: center; }
@media (max-width: 820px){ .c-belief--photo { grid-template-columns: 1fr; } }
.c-belief__photo { border-radius: 18px; overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--svc-shadow); }
@media (max-width: 820px){ .c-belief__photo { aspect-ratio: 16/10; max-width: 340px; } }
.c-belief__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.c-belief--photo .c-belief__body { padding: 0; }

/* ---- FAQ：左に導線＋ボタン、右にフロー ---- */
.c-faq-2col { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 3.5vw, 56px); align-items: start; }
@media (max-width: 900px){ .c-faq-2col { grid-template-columns: 1fr; } }
.c-faq-2col__intro .c-sec-head { margin-bottom: clamp(20px,2vw,28px); }
.c-faq-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--color-hokusei-blue); color: #fff; font-weight: 700; padding: 14px 24px; border-radius: 999px; font-size: 1.35rem; transition: transform .3s var(--ease), box-shadow .3s var(--ease); box-shadow: 0 10px 24px rgba(30,127,194,0.24); }
@media (hover:hover){ .c-faq-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(30,127,194,0.32); } }
.c-faq-btn__arrow { transition: transform .3s var(--ease); }
@media (hover:hover){ .c-faq-btn:hover .c-faq-btn__arrow { transform: translateX(4px); } }
/* Q&Aカード（2列グリッド） */
.c-qa-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.6vw, 20px); margin-top: clamp(28px,3vw,44px); }
@media (max-width: 680px){ .c-qa-grid { grid-template-columns: 1fr; } }
.c-qa { background: #fff; border-radius: 18px; box-shadow: var(--svc-shadow); padding: clamp(20px,2vw,26px); }
.c-qa__q { display: flex; gap: 12px; align-items: flex-start; font-weight: 700; color: var(--color-deep-navy); font-size: 1.5rem; line-height: 1.5; margin-bottom: 10px; }
.c-qa__badge { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(45,184,197,0.14); color: var(--color-hokusei-blue); font-family: var(--font-en); font-weight: 700; font-size: 1.3rem; margin-top: 1px; }
.c-qa__a { font-size: 1.35rem; line-height: 1.85; color: var(--color-ink-70, #4a5568); padding-left: 38px; }

/* ---- CTA：北前船イラスト ---- */
.c-cv01 { position: relative; overflow: hidden; }
.c-cv01__ship { position: absolute; left: clamp(-20px, -1vw, 0px); bottom: 0; width: clamp(160px, 22vw, 300px); opacity: 0.9; pointer-events: none; z-index: 0; }
.c-cv01__inner { position: relative; z-index: 1; }
@media (max-width: 720px){ .c-cv01__ship { opacity: 0.5; width: 150px; } }

/* ---- OVERVIEW修正：パンくずの絶対配置解除・写真のカバー確実化 ---- */
.c-svc-crumb { position: relative; }
.c-svc-crumb .c-breadcrumb { position: static !important; }
.c-svc-2col__media { position: relative; }
.c-svc-2col__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-usecase-photo { position: relative; }
.c-usecase-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- LINEUP 2カラム（見出し左＋純度グラフ右） ---- */
.c-lineup-2col { grid-template-columns: 0.82fr 1.18fr; align-items: center; margin-bottom: clamp(32px,3.5vw,52px); }
@media (max-width: 900px){ .c-lineup-2col { grid-template-columns: 1fr; } }
.c-lineup-2col .c-sec-head { margin: 0; }
.c-lineup-2col .c-purity { margin: 0; }
/* ---- FLOWコンパクト（FAQ右カラム内） ---- */
.c-steps--compact { gap: 8px; }
.c-steps--compact .c-step { padding: 16px 9px; }
.c-steps--compact .c-step__no { width: 30px; height: 30px; font-size: 1.2rem; margin-bottom: 8px; }
.c-steps--compact .c-step__ttl { font-size: 1.18rem; margin-bottom: 5px; }
.c-steps--compact .c-step__txt { font-size: 1.02rem; line-height: 1.55; }
.c-steps--compact .c-step::after { display: none; }
@media (max-width: 900px){ .c-steps--compact { grid-template-columns: repeat(5,1fr); } }
@media (max-width: 560px){ .c-steps--compact { grid-template-columns: repeat(2,1fr); } }
/* ---- CTA/Next：北前船イラスト ---- */
.c-next01 { position: relative; overflow: hidden; }
.c-svc-ship { position: absolute; left: clamp(-10px,0vw,10px); bottom: 0; width: clamp(150px, 20vw, 260px); opacity: 0.85; pointer-events: none; z-index: 0; }
.c-next01 .l-container { position: relative; z-index: 1; }
@media (max-width: 720px){ .c-svc-ship { opacity: 0.45; width: 130px; } }

/* ============ モック準拠：クリーン見出し階層（.is-mock）2026-07-21 ============ */
/* 手描き英字タイトルを廃止 → 小さな英字ラベル（c-eyebrow）＋大きな日本語見出し */
.p-svc-detail.is-mock .c-sec-head__en { display: none !important; }
.p-svc-detail.is-mock .c-eyebrow {
  display: inline-block; font-family: var(--font-en);
  font-size: clamp(1.15rem, 1.15vw, 1.3rem); font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: #9AA8BA;
  margin: 0 0 16px;
}
.p-svc-detail.is-mock .c-sec-head:not(.c-sec-head--keep) .c-sec-head__title,
.p-svc-detail.is-mock .c-sec-head__title {
  font-weight: 700; color: var(--color-deep-navy);
  font-size: clamp(2.2rem, 2.9vw, 3.05rem); line-height: 1.5; letter-spacing: 0.02em;
  margin: 0 0 20px;
}
.p-svc-detail.is-mock .c-sec-head:not(.c-sec-head--keep) .c-sec-head__title::before,
.p-svc-detail.is-mock .c-sec-head__title::before,
.p-svc-detail.is-mock .c-sec-head:not(.c-sec-head--keep) .c-sec-head__title::after,
.p-svc-detail.is-mock .c-sec-head__title::after { content: none !important; }
.p-svc-detail.is-mock .c-sec-head:not(.c-sec-head--keep) .c-sec-head__lead,
.p-svc-detail.is-mock .c-sec-head__lead {
  font-size: clamp(1.4rem, 1.1vw, 1.55rem); line-height: 2; color: #5B6A7C;
  max-width: 64ch; margin-top: 0;
}
.p-svc-detail.is-mock .p-svc-overview__h1 {
  font-size: clamp(2.6rem, 3.3vw, 3.5rem) !important; line-height: 1.42 !important; color: var(--color-deep-navy);
}
/* リード内の強調（em）はアクセントカラーのまま太字に */
.p-svc-detail.is-mock .c-sec-head__lead em { font-style: normal; font-weight: 700; color: var(--color-hokusei-blue); }

/* ============================================================
   モック準拠 ＋ 徹底的デザイン磨き（.is-mock）2026-07-21
   多層シャドウ／ヘアライン／グラデアイコン／アクセント
   ============================================================ */
.p-svc-detail.is-mock {
  --prem-shadow: 0 1px 2px rgba(11,31,58,.04), 0 12px 24px -10px rgba(11,31,58,.13), 0 32px 60px -28px rgba(11,31,58,.14);
  --prem-shadow-hi: 0 2px 6px rgba(11,31,58,.06), 0 20px 36px -12px rgba(11,31,58,.20), 0 48px 80px -32px rgba(11,31,58,.22);
  --prem-border: 1px solid rgba(11,31,58,.07);
  --grad: linear-gradient(135deg, #2DB8C5 0%, #1E7FC2 100%);
  --grad-soft: linear-gradient(135deg, rgba(45,184,197,.15) 0%, rgba(30,127,194,.09) 100%);
  --ink-70: #46586c;
  --ink-50: #71818f;
}

/* ---- アイキャッチ・ラベル：先頭にグラデの短線 ---- */
.p-svc-detail.is-mock .c-eyebrow { position: relative; padding-left: 30px; color: #7C8CA0; }
.p-svc-detail.is-mock .c-eyebrow::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 22px; height: 2px; border-radius: 2px; background: var(--grad);
}

/* ---- 共通カードの質感（ファクト／情報／実績／Q&A／純度／商品） ---- */
.p-svc-detail.is-mock .c-fact-card,
.p-svc-detail.is-mock .c-info-card,
.p-svc-detail.is-mock .c-case,
.p-svc-detail.is-mock .c-qa,
.p-svc-detail.is-mock .c-purity,
.p-svc-detail.is-mock .c-product-card,
.p-svc-detail.is-mock .c-usecase,
.p-svc-detail.is-mock .c-step {
  border: var(--prem-border);
  box-shadow: var(--prem-shadow);
  border-radius: 20px;
  background: #fff;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s cubic-bezier(.2,.7,.2,1), border-color .45s;
}
@media (hover:hover){
  .p-svc-detail.is-mock .c-fact-card:hover,
  .p-svc-detail.is-mock .c-info-card:hover,
  .p-svc-detail.is-mock .c-case:hover,
  .p-svc-detail.is-mock .c-qa:hover,
  .p-svc-detail.is-mock .c-product-card:hover,
  .p-svc-detail.is-mock .c-usecase:hover {
    transform: translateY(-6px);
    box-shadow: var(--prem-shadow-hi);
    border-color: rgba(45,184,197,.35);
  }
}

/* ---- ファクトカード：上質化 ---- */
.p-svc-detail.is-mock .c-fact-card { padding: clamp(20px,2vw,28px); }
.p-svc-detail.is-mock .c-fact-card__icon {
  width: 44px; height: 44px; border-radius: 13px; background: var(--grad-soft);
  box-shadow: inset 0 0 0 1px rgba(45,184,197,.18);
}
.p-svc-detail.is-mock .c-fact-card__icon .c-uicon { color: #1E7FC2; }
.p-svc-detail.is-mock .c-fact-card__label { color: #7C8CA0; letter-spacing: .08em; font-size: 1.15rem; }
.p-svc-detail.is-mock .c-fact-card__value { color: var(--color-deep-navy); letter-spacing: -.01em; }

/* ---- 情報／POINTカード：グラデ・アイコンバッジ＋上部アクセント ---- */
.p-svc-detail.is-mock .c-info-card { position: relative; overflow: hidden; padding: clamp(26px,2.6vw,36px); }
.p-svc-detail.is-mock .c-info-card::before {
  content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 4px;
  background: var(--grad); opacity: 0; transition: opacity .45s;
}
@media (hover:hover){ .p-svc-detail.is-mock .c-info-card:hover::before { opacity: 1; } }
.p-svc-detail.is-mock .c-info-card__icon {
  width: 60px; height: 60px; border-radius: 17px; background: var(--grad-soft); margin-bottom: 22px;
  box-shadow: inset 0 0 0 1px rgba(45,184,197,.16);
}
.p-svc-detail.is-mock .c-info-card__icon .c-uicon { width: 52%; color: #1E7FC2; stroke-width: 1.7; }
.p-svc-detail.is-mock .c-info-card__label {
  font-family: var(--font-en); font-size: 1.15rem; font-weight: 700; letter-spacing: .16em;
  color: #2DB8C5; text-transform: uppercase; margin-bottom: 10px;
}
.p-svc-detail.is-mock .c-info-card__title { font-size: clamp(1.7rem,1.7vw,2rem); font-weight: 700; color: var(--color-deep-navy); margin-bottom: 12px; letter-spacing: .01em; }
.p-svc-detail.is-mock .c-info-card__text { font-size: 1.4rem; line-height: 1.95; color: var(--ink-70); }

/* ---- 用途アイコンカード：質感・アイコンバッジ ---- */
.p-svc-detail.is-mock .c-usecase { gap: 14px; padding: clamp(20px,1.9vw,26px) clamp(10px,1vw,14px); }
.p-svc-detail.is-mock .c-usecase .c-uicon {
  width: 44px; height: 44px; padding: 10px; box-sizing: content-box;
  border-radius: 14px; background: var(--grad-soft); color: #1E7FC2;
  box-shadow: inset 0 0 0 1px rgba(45,184,197,.15);
}
.p-svc-detail.is-mock .c-usecase__label { color: var(--color-deep-navy); font-size: 1.3rem; letter-spacing: .01em; }

/* ---- 商品カード：画像ズーム＋スペックのピル ---- */
.p-svc-detail.is-mock .c-product-card { overflow: hidden; padding: 0; }
.p-svc-detail.is-mock .c-product-card__img { overflow: hidden; aspect-ratio: 3/2; }
.p-svc-detail.is-mock .c-product-card__img img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
@media (hover:hover){ .p-svc-detail.is-mock .c-product-card:hover .c-product-card__img img { transform: scale(1.06); } }
.p-svc-detail.is-mock .c-product-card__body { padding: clamp(20px,2vw,26px); }
.p-svc-detail.is-mock .c-product-card__name { font-size: clamp(1.6rem,1.6vw,1.85rem); font-weight: 700; color: var(--color-deep-navy); margin-bottom: 12px; }
.p-svc-detail.is-mock .c-product-card__spec {
  display: inline-block; font-size: 1.15rem; font-weight: 700; color: #1E7FC2;
  background: var(--grad-soft); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; letter-spacing: .02em;
}
.p-svc-detail.is-mock .c-product-card__text { font-size: 1.35rem; line-height: 1.9; color: var(--ink-70); }

/* ---- 実績カード：番号グラデ文字＋アイコン ---- */
.p-svc-detail.is-mock .c-case { padding: clamp(24px,2.4vw,32px); }
.p-svc-detail.is-mock .c-case__icon {
  width: 46px; height: 46px; border-radius: 13px; background: var(--grad-soft); margin-bottom: 16px;
  box-shadow: inset 0 0 0 1px rgba(45,184,197,.16);
}
.p-svc-detail.is-mock .c-case__icon .c-uicon { color: #1E7FC2; }
.p-svc-detail.is-mock .c-case__field { font-size: 1.35rem; font-weight: 700; color: var(--ink-50); letter-spacing: .04em; margin-bottom: 6px; }
.p-svc-detail.is-mock .c-case__value {
  font-family: var(--font-en); font-weight: 800; letter-spacing: -.02em; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-size: clamp(2.6rem,3vw,3.4rem); margin-bottom: 14px;
}
.p-svc-detail.is-mock .c-case__value small { -webkit-text-fill-color: var(--ink-50); font-size: .4em; font-weight: 700; letter-spacing: 0; }
.p-svc-detail.is-mock .c-case__spec { font-size: 1.3rem; line-height: 1.85; color: var(--ink-70); margin-bottom: 14px; }
.p-svc-detail.is-mock .c-case__client { font-size: 1.2rem; color: var(--ink-50); padding-top: 12px; border-top: 1px solid rgba(11,31,58,.08); }

/* ---- ステップ：番号グラデバッジ＋グロー ---- */
.p-svc-detail.is-mock .c-step { border-radius: 18px; }
.p-svc-detail.is-mock .c-step__no {
  background: var(--grad); color: #fff; box-shadow: 0 8px 18px -6px rgba(30,127,194,.55);
  font-family: var(--font-en); font-weight: 700;
}
.p-svc-detail.is-mock .c-step__ttl { color: var(--color-deep-navy); }

/* ---- Q&Aカード：Qバッジをグラデに ---- */
.p-svc-detail.is-mock .c-qa { padding: clamp(24px,2.4vw,32px); }
.p-svc-detail.is-mock .c-qa__badge { background: var(--grad); color: #fff; box-shadow: 0 6px 14px -5px rgba(30,127,194,.5); }
.p-svc-detail.is-mock .c-qa__q { font-size: 1.6rem; color: var(--color-deep-navy); }
.p-svc-detail.is-mock .c-qa__a { color: var(--ink-70); }

/* ---- FAQボタン：グラデ ---- */
.p-svc-detail.is-mock .c-faq-btn { background: var(--grad); box-shadow: 0 12px 26px -8px rgba(30,127,194,.5); }

/* ---- 純度グラフカード：質感 ---- */
.p-svc-detail.is-mock .c-purity { padding: clamp(26px,2.6vw,36px); }

/* ---- 想いブロック：写真に枠取り、引用感 ---- */
.p-svc-detail.is-mock .c-belief--photo .c-belief__photo { box-shadow: var(--prem-shadow); border: 5px solid #fff; }

/* ---- 磨き強化：ソリッドグラデのアイコンバッジ＋奥行き ---- */
.p-svc-detail.is-mock {
  --prem-shadow: 0 2px 4px rgba(11,31,58,.05), 0 16px 32px -14px rgba(11,31,58,.17), 0 44px 74px -34px rgba(11,31,58,.20);
  --prem-shadow-hi: 0 3px 8px rgba(11,31,58,.07), 0 26px 44px -14px rgba(11,31,58,.24), 0 60px 96px -38px rgba(11,31,58,.26);
}
/* カード地に極薄グラデ＋内側ハイライト */
.p-svc-detail.is-mock .c-info-card,
.p-svc-detail.is-mock .c-case,
.p-svc-detail.is-mock .c-qa,
.p-svc-detail.is-mock .c-product-card,
.p-svc-detail.is-mock .c-purity,
.p-svc-detail.is-mock .c-fact-card {
  background: linear-gradient(180deg, #ffffff 0%, #F7FAFD 100%);
}
/* アイコンバッジ：ソリッドグラデ＋白アイコン＋グロー */
.p-svc-detail.is-mock .c-fact-card__icon,
.p-svc-detail.is-mock .c-info-card__icon,
.p-svc-detail.is-mock .c-case__icon {
  background: var(--grad); box-shadow: 0 10px 22px -8px rgba(30,127,194,.5), inset 0 1px 0 rgba(255,255,255,.25);
}
.p-svc-detail.is-mock .c-fact-card__icon .c-uicon,
.p-svc-detail.is-mock .c-info-card__icon .c-uicon,
.p-svc-detail.is-mock .c-case__icon .c-uicon { color: #fff; }
.p-svc-detail.is-mock .c-usecase .c-uicon {
  background: var(--grad); color: #fff;
  box-shadow: 0 9px 20px -8px rgba(30,127,194,.45), inset 0 1px 0 rgba(255,255,255,.25);
}
/* POINTカード：大きなゴースト装飾（右上に淡いアクセントの輪） */
.p-svc-detail.is-mock .c-info-card::after {
  content: ""; position: absolute; top: -40px; right: -40px; width: 130px; height: 130px;
  border-radius: 50%; background: radial-gradient(circle, rgba(45,184,197,.10) 0%, rgba(45,184,197,0) 70%);
  pointer-events: none;
}
/* 見出し帯の下に極細グラデ区切り（任意の余韻） */
.p-svc-detail.is-mock .c-purity__fill { box-shadow: 0 0 16px -2px rgba(45,184,197,.5); }

/* ============================================================
   PREVENT忠実再現ライブラリ（Hokusei配色）2026-07-21
   参考: prevent.co.jp/myscope（my.css / style.css）
   ============================================================ */
.p-svc-detail.is-mock {
  --pv-primary: #2DB8C5;   /* aqua ← PREVENT #56BFC2 */
  --pv-secondary: #1E7FC2; /* blue ← #6CAEE0 */
  --pv-title: #1E7FC2;     /* 見出し英字 ← #47AFB3 */
  --pv-sub: #C9A227;       /* ボタン ← #F7AA3E（Hokusei深ゴールド） */
  --pv-mv-bg: #EFF5F7;     /* ヒーロー地 ← #F2F7F7 */
}

/* ---- hline見出し（◇マーカー＋英字ラベル＋大きな日本語） ---- */
.p-svc-detail.is-mock .c-eyebrow {
  display: flex; align-items: center; gap: 1.3rem; padding: 0; margin: 0 0 1.4rem;
  font-family: var(--font-en); font-size: clamp(1.7rem, 1.9vw, 2rem); font-weight: 600;
  letter-spacing: 0.06em; text-transform: none; color: var(--pv-title); line-height: 1;
}
.p-svc-detail.is-mock .c-eyebrow::before {
  content: ""; width: 1.2rem; aspect-ratio: 1; border-radius: 0.2rem;
  background: currentColor; transform: rotate(45deg); flex: none;
}
.p-svc-detail.is-mock .c-sec-head:not(.c-sec-head--keep) .c-sec-head__title,
.p-svc-detail.is-mock .c-sec-head__title {
  font-weight: 600; color: var(--color-deep-navy); letter-spacing: 0.08em;
  font-size: clamp(2.4rem, 3.2vw, 3.2rem); line-height: 1.68; margin: 0 0 2rem;
}
.p-svc-detail.is-mock .p-svc-overview__h1 { font-size: clamp(2.8rem, 3.6vw, 3.6rem) !important; line-height: 1.6 !important; letter-spacing: 0.06em; }
.p-svc-detail.is-mock .c-sec-head:not(.c-sec-head--keep) .c-sec-head__lead,
.p-svc-detail.is-mock .c-sec-head__lead {
  font-size: clamp(1.5rem, 1.1vw, 1.6rem); line-height: 2; color: #4c5a68; letter-spacing: 0.04em; max-width: 74rem;
}

/* ---- c-mv ヒーロー（広い余白・大きな事業名・ラベルピル・下罫） ---- */
.p-svc-detail.is-mock .c-mv {
  position: relative; background: var(--pv-mv-bg); margin-bottom: clamp(5rem, 8vw, 11rem);
  padding: clamp(9rem, 16vw, 20rem) 0 clamp(1.8rem, 3vw, 2.9rem);
}
.p-svc-detail.is-mock .c-mv::after {
  content: ""; position: absolute; bottom: 0; left: clamp(2.5rem,5vw,5rem); right: clamp(2.5rem,5vw,5rem);
  height: 1px; background: var(--pv-primary); opacity: .25; border-radius: 2rem;
}
.p-svc-detail.is-mock .c-mv__inner { max-width: 120rem; margin-inline: auto; padding-inline: clamp(2.5rem,5vw,5rem); }
.p-svc-detail.is-mock .c-mv__name {
  font-size: clamp(2.8rem, 4.4vw, 4.4rem); font-weight: 700; letter-spacing: 0.1em; color: var(--color-deep-navy); line-height: 1.5;
}
.p-svc-detail.is-mock .c-mv__name small { display:block; font-size: .42em; font-weight: 600; letter-spacing: .12em; color: var(--pv-secondary); margin-top: 1.2rem; }
.p-svc-detail.is-mock .c-mv__lb { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.p-svc-detail.is-mock .c-mv__lb li {
  border: 1px solid var(--pv-primary); color: var(--pv-title); border-radius: 10rem;
  font-size: clamp(1.3rem,1.4vw,1.6rem); font-weight: 600; letter-spacing: 0.08em; padding: .5rem 1.5rem;
}
.p-svc-detail.is-mock .c-mv__lb li.--gold { border-color: #E0B84A; color: #B08A1E; }
.p-svc-detail.is-mock .c-mv .c-breadcrumb { margin: clamp(3rem,8vw,10rem) 0 0; position: static; }

/* ---- point-post（番号ピル＋見出し＋長文＋大画像の交互ブロック） ---- */
.p-svc-detail.is-mock .c-ppost { display: flex; flex-direction: column; gap: 3rem; margin-bottom: clamp(4rem,7vw,7.5rem); }
.p-svc-detail.is-mock .c-ppost:last-child { margin-bottom: 0; }
@media (min-width: 900px){
  .p-svc-detail.is-mock .c-ppost { flex-direction: row; gap: clamp(4rem,6vw,8rem); align-items: flex-start; }
  .p-svc-detail.is-mock .c-ppost.is-reverse { flex-direction: row-reverse; }
}
.p-svc-detail.is-mock .c-ppost__body { flex: 1; }
@media (min-width: 900px){ .p-svc-detail.is-mock .c-ppost__body { padding-top: 1rem; } }
.p-svc-detail.is-mock .c-ppost__head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem;
  margin-bottom: 2.6rem; padding-bottom: 1.7rem; border-bottom: 1px solid var(--pv-secondary);
}
@media (min-width: 768px){ .p-svc-detail.is-mock .c-ppost__head { flex-direction: row; align-items: center; gap: 2.4rem; } }
.p-svc-detail.is-mock .c-ppost__num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 4.9rem; height: 3.2rem; padding: 0 .4rem; border-radius: 5rem;
  font-family: var(--font-en); font-size: 1.5rem; font-weight: 600; line-height: 1;
  color: var(--pv-secondary); border: 1px solid currentColor; flex: none;
}
.p-svc-detail.is-mock .c-ppost__ttl { font-size: clamp(1.9rem,2.2vw,2.4rem); font-weight: 700; letter-spacing: 0.04em; color: var(--pv-secondary); line-height: 1.55; }
.p-svc-detail.is-mock .c-ppost__txt { font-size: clamp(1.45rem,1.05vw,1.55rem); line-height: 2.05; color: #46586c; letter-spacing: 0.03em; }
.p-svc-detail.is-mock .c-ppost__txt + .c-ppost__txt { margin-top: 1.6rem; }
.p-svc-detail.is-mock .c-ppost__txt em { font-style: normal; font-weight: 700; color: var(--pv-secondary); }
.p-svc-detail.is-mock .c-ppost__img {
  width: 100%; border-radius: 2rem; overflow: hidden; aspect-ratio: 477/391;
  box-shadow: 0 24px 50px -22px rgba(11,31,58,.28); flex: none;
}
@media (min-width: 900px){ .p-svc-detail.is-mock .c-ppost__img { width: 44rem; max-width: 44%; } }
.p-svc-detail.is-mock .c-ppost__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---- PREVENT風ピルボタン（右に丸アイコン＋ホバー塗り） ---- */
.p-svc-detail.is-mock .c-pvbtn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-width: 22rem; padding: 1.8rem 2rem 1.8rem 3rem; border-radius: 10rem;
  font-size: 1.5rem; font-weight: 700; letter-spacing: 0.08em; color: #fff;
  background: var(--pv-secondary); border: 1px solid var(--pv-secondary);
  position: relative; overflow: hidden; z-index: 1; transition: color .35s ease, border-color .35s ease;
}
.p-svc-detail.is-mock .c-pvbtn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; background: #fff;
  transform: scaleX(0); transform-origin: right; transition: transform .35s ease;
}
@media (hover:hover){ .p-svc-detail.is-mock .c-pvbtn:hover { color: var(--pv-secondary); }
  .p-svc-detail.is-mock .c-pvbtn:hover::after { transform: scaleX(1); transform-origin: left; }
  .p-svc-detail.is-mock .c-pvbtn:hover .c-pvbtn__ic { background: var(--pv-secondary); color:#fff; }
}
.p-svc-detail.is-mock .c-pvbtn__ic {
  display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem;
  border-radius: 50%; background: #fff; color: var(--pv-secondary); flex: none; transition: .35s ease;
}
.p-svc-detail.is-mock .c-pvbtn__ic svg { width: 1.1rem; }

/* ---- p-cmn 囲みボックス（アクセント枠のコールアウト） ---- */
.p-svc-detail.is-mock .c-callout {
  padding: clamp(2.6rem,3vw,4.5rem) clamp(2.2rem,3.5vw,5rem); border-radius: 2rem;
  border: 2px solid var(--pv-primary); background: #fff;
}
.p-svc-detail.is-mock .c-callout__hd { position: relative; padding-left: 2.4rem; font-size: clamp(1.7rem,1.8vw,2rem); font-weight: 700; color: var(--color-deep-navy); line-height: 1.7; margin-bottom: 1.6rem; letter-spacing: .04em; }
.p-svc-detail.is-mock .c-callout__hd::after { content:""; position:absolute; left:0; top:.9rem; width:.6rem; height:.6rem; border:.3rem solid var(--pv-secondary); border-radius:.6rem; }
.p-svc-detail.is-mock .c-callout__tx { font-size: clamp(1.45rem,1.05vw,1.55rem); line-height: 2; color: #46586c; }

/* セクション余白をPREVENT並みに広く */
.p-svc-detail.is-mock .p-sub-sec { padding-block: clamp(5rem, 9vw, 11rem); }

/* ================================================================
   PREVENT 完全解剖ポート（prevent.co.jp/myscope 実測値・Hokusei配色）
   2026-07-21  html{font-size:62.5%} 共通のため rem 値は 1:1 移植
   ================================================================ */
.p-svc-detail.is-mock { background: #F0F5F7; }
.p-svc-detail.is-mock .c-mv { background: #F0F5F7; }

/* ---- レイアウト幅（wrap-inner / inner） ---- */
.p-svc-detail.is-mock .pv-wrap  { max-width: 121.6rem; margin-inline: auto; padding-inline: 2.5rem; width: 100%; }
.p-svc-detail.is-mock .pv-inner { max-width: 114.6rem; margin-inline: auto; padding-inline: 2.5rem; width: 100%; }

/* ---- 見出しシステム（hline03 / hline03-en-second / hline02 / hline06 / hline07） ---- */
.p-svc-detail.is-mock .pv-h3 { font-size: 3.2rem; font-weight: 600; line-height: 1.6875; letter-spacing: 0.1em; color: var(--color-deep-navy); }
@media (max-width: 767px){ .p-svc-detail.is-mock .pv-h3 { font-size: 2.2rem; line-height: 1.545; letter-spacing: .06em; } }
.p-svc-detail.is-mock .pv-en-head { margin-bottom: 3.5rem; }
.p-svc-detail.is-mock .pv-en-head__ttl { display: flex; align-items: center; gap: 1.5rem; font-family: var(--font-en); font-size: 2rem; font-weight: 500; letter-spacing: .06em; color: var(--pv-secondary); margin-bottom: 1.3rem; }
.p-svc-detail.is-mock .pv-en-head__ttl::before { content:""; width: 1rem; aspect-ratio: 1; border-radius: .2rem; background: currentColor; transform: rotate(45deg); }
.p-svc-detail.is-mock .pv-en-head__txt { display: block; font-size: 3.2rem; font-weight: 600; letter-spacing: .1em; line-height: 1.6875; color: var(--color-deep-navy); }
@media (max-width: 767px){ .p-svc-detail.is-mock .pv-en-head__txt { font-size: 2.2rem; } }
.p-svc-detail.is-mock .pv-h2 { text-align: center; margin-bottom: 8rem; }
@media (max-width: 767px){ .p-svc-detail.is-mock .pv-h2 { margin-bottom: 4rem; } }
.p-svc-detail.is-mock .pv-h2__ttl { display: flex; align-items: center; justify-content: center; gap: 1.2rem; font-family: var(--font-en); font-size: 2rem; font-weight: 500; letter-spacing: .06em; color: var(--pv-secondary); margin-bottom: 1.7rem; }
.p-svc-detail.is-mock .pv-h2__ttl::before { content:""; width: 1.2rem; aspect-ratio: 1; border-radius: .2rem; background: currentColor; transform: rotate(45deg); }
.p-svc-detail.is-mock .pv-h2__txt { display: block; font-size: 3.2rem; font-weight: 600; letter-spacing: .1em; line-height: 1.7778; color: var(--color-deep-navy); }
@media (max-width: 767px){ .p-svc-detail.is-mock .pv-h2__txt { font-size: 2.2rem; } }
.p-svc-detail.is-mock .pv-h6 { display: block; width: fit-content; margin-inline: auto; padding-bottom: 2rem; font-size: 2.4rem; font-weight: 600; color: var(--pv-secondary); border-bottom: 1px solid currentColor; }
@media (max-width: 767px){ .p-svc-detail.is-mock .pv-h6 { width: 100%; font-size: 1.9rem; padding-bottom: 1.8rem; } }
.p-svc-detail.is-mock .pv-lead { font-size: 1.7rem; line-height: 2; letter-spacing: .04em; color: var(--color-body, #393A3A); }
@media (max-width: 767px){ .p-svc-detail.is-mock .pv-lead { font-size: 1.55rem; line-height: 1.9; } }

/* ---- intro セクション ---- */
.p-svc-detail.is-mock .pv-intro { padding-bottom: 15rem; }
@media (max-width: 767px){ .p-svc-detail.is-mock .pv-intro { padding-bottom: 7rem; } }
.p-svc-detail.is-mock .pv-intro .pv-h3 { margin-bottom: 4rem; }

/* ---- ステップ図カード（myscope-step） ---- */
.p-svc-detail.is-mock .pv-step { margin-bottom: 7rem; padding: 7rem 4rem 8.5rem; background: #fff; border-radius: 2rem; box-shadow: 3rem 3rem 5rem rgba(30,127,194,0.05); }
@media (max-width: 767px){ .p-svc-detail.is-mock .pv-step { margin-bottom: 4rem; padding: 3.5rem 2rem; border-radius: 1rem; } }
.p-svc-detail.is-mock .pv-step__hline { display: flex; justify-content: center; align-items: baseline; gap: 1.3rem; margin-bottom: 5rem; }
.p-svc-detail.is-mock .pv-step__brand { font-family: var(--font-en); font-size: 3.4rem; font-weight: 700; letter-spacing: .04em; color: var(--pv-secondary); line-height: 1; }
.p-svc-detail.is-mock .pv-step__hline span:not(.pv-step__brand) { font-weight: 500; font-size: 2.6rem; color: var(--color-deep-navy); }
@media (max-width: 767px){
  .p-svc-detail.is-mock .pv-step__hline { flex-direction: column; align-items: center; gap: .5rem; margin-bottom: 2.5rem; }
  .p-svc-detail.is-mock .pv-step__brand { font-size: 2.6rem; }
  .p-svc-detail.is-mock .pv-step__hline span:not(.pv-step__brand) { font-size: 2rem; }
}
.p-svc-detail.is-mock .pv-step__list { display: flex; justify-content: center; padding-inline: 2rem; list-style: none; margin: 0; }
.p-svc-detail.is-mock .pv-step__list li { position: relative; display: flex; flex-direction: column; align-items: center; width: 25%; }
.p-svc-detail.is-mock .pv-step__fig { position: relative; display: flex; align-items: center; justify-content: center; height: 18rem; margin-bottom: 3.5rem; }
.p-svc-detail.is-mock .pv-step__fig::after {
  content: ""; position: absolute; top: 50%; right: -4.2rem; width: 1.6rem; height: 3rem; transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 30'%3E%3Cpath d='M2 2l12 13L2 28' fill='none' stroke='%232DB8C5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 1.6rem auto;
}
.p-svc-detail.is-mock .pv-step__list li:last-child .pv-step__fig::after { display: none; }
.p-svc-detail.is-mock .pv-step__circle { display: flex; align-items: center; justify-content: center; width: 14.5rem; height: 14.5rem; border-radius: 50%; background: linear-gradient(160deg, rgba(45,184,197,.13), rgba(30,127,194,.08)); }
.p-svc-detail.is-mock .pv-step__circle .c-uicon { width: 6rem; height: 6rem; color: var(--pv-secondary); stroke-width: 1.4; }
.p-svc-detail.is-mock .pv-step__ttl { font-size: 1.7rem; font-weight: 500; line-height: 1.647; letter-spacing: .1em; text-align: center; color: var(--color-body,#393A3A); }
@media (max-width: 767px){
  .p-svc-detail.is-mock .pv-step__list { flex-direction: column; gap: 4.5rem; padding-inline: 0; }
  .p-svc-detail.is-mock .pv-step__list li { flex-direction: row; width: 100%; gap: 2rem; }
  .p-svc-detail.is-mock .pv-step__fig { height: auto; margin-bottom: 0; width: calc(100% - 14rem); }
  .p-svc-detail.is-mock .pv-step__fig::after {
    right: auto; left: 50%; top: auto; bottom: -3.4rem; width: 3rem; height: 1.6rem; transform: translateX(-50%) rotate(90deg);
  }
  .p-svc-detail.is-mock .pv-step__circle { width: 11rem; height: 11rem; }
  .p-svc-detail.is-mock .pv-step__circle .c-uicon { width: 4.6rem; height: 4.6rem; }
  .p-svc-detail.is-mock .pv-step__ttl { width: 14rem; text-align: left; padding-left: 0; letter-spacing: 0; font-size: 1.5rem; }
}

/* ---- 用途ピル（p-cmn__list） ---- */
.p-svc-detail.is-mock .pv-pills { display: flex; flex-wrap: wrap; gap: 1.2rem; list-style: none; padding: 0; margin: 0; }
.p-svc-detail.is-mock .pv-pills li { border: 1px solid var(--pv-primary); color: var(--color-deep-navy); background: #fff; border-radius: 10rem; font-size: 1.5rem; font-weight: 500; letter-spacing: .04em; line-height: 1; padding: 1.1rem 1.8rem 1.2rem; }
@media (max-width: 767px){ .p-svc-detail.is-mock .pv-pills { gap: .7rem; } .p-svc-detail.is-mock .pv-pills li { font-size: 1.35rem; padding: .9rem 1.4rem 1rem; } }

/* ---- callout（p-cmn-second：2px枠ボックス） ---- */
.p-svc-detail.is-mock .c-callout { border-width: 0.2rem; border-radius: 2rem; padding: 4.5rem 5rem; }
@media (max-width: 767px){ .p-svc-detail.is-mock .c-callout { padding: 3rem 2.5rem; border-radius: 1rem; } }
.p-svc-detail.is-mock .c-callout__hd { font-size: 2rem; line-height: 1.8; letter-spacing: .06em; padding-left: 2.4rem; }
.p-svc-detail.is-mock .c-callout__hd::after { top: 1.2rem; }
.p-svc-detail.is-mock .c-callout__tx { font-size: 1.6rem; line-height: 2; }
.p-svc-detail.is-mock .c-callout__sign { margin-top: 1.6rem; font-size: 1.4rem; font-weight: 700; color: var(--color-deep-navy); }
.p-svc-detail.is-mock .c-callout .pv-pills { margin-top: 2rem; }

/* ---- point 白パネル（非対称 5rem 角丸・前後に浮く） ---- */
.p-svc-detail.is-mock .pv-point { position: relative; z-index: 1; padding-block: 12rem 16rem; background: #fff; border-top-left-radius: 5rem; border-bottom-right-radius: 5rem; }
@media (max-width: 767px){ .p-svc-detail.is-mock .pv-point { padding-block: 6rem 7rem; border-top-left-radius: 2rem; border-bottom-right-radius: 2rem; } }
.p-svc-detail.is-mock .pv-block { margin-bottom: 10rem; }
.p-svc-detail.is-mock .pv-block:last-child { margin-bottom: 0; }
@media (max-width: 767px){ .p-svc-detail.is-mock .pv-block { margin-bottom: 5rem; } }

/* point-post（微調整：PREVENT実測に合わせる） */
.p-svc-detail.is-mock .c-ppost { margin-bottom: 7.5rem; }
.p-svc-detail.is-mock .c-ppost__img { border-radius: 2rem; box-shadow: none; }
@media (min-width: 900px){ .p-svc-detail.is-mock .c-ppost__img { width: 47.7rem; max-width: 47%; aspect-ratio: 477/391; } }
.p-svc-detail.is-mock .c-ppost__txt { font-size: 1.6rem; line-height: 2; color: var(--color-body,#393A3A); }

/* ---- rate（純度グラフの置き場） ---- */
.p-svc-detail.is-mock .pv-rate { margin-top: -2rem; }
.p-svc-detail.is-mock .c-purity { border: none; border-radius: 2rem; background: #F5F9FB; box-shadow: none; padding: 4rem 4.5rem; }
@media (max-width: 767px){ .p-svc-detail.is-mock .c-purity { padding: 2.6rem 2rem; border-radius: 1rem; } }

/* ---- analysis 帯（白パネルの下に潜る淡色ゾーン） ---- */
.p-svc-detail.is-mock .pv-analysis { margin-top: -5rem; padding-block: 19rem 0; background: #EDF3F6; }
@media (max-width: 767px){ .p-svc-detail.is-mock .pv-analysis { margin-top: -2rem; padding-block: 9rem 0; } }
.p-svc-detail.is-mock .pv-analysis__head { margin-bottom: 7.5rem; text-align: center; }
@media (max-width: 767px){ .p-svc-detail.is-mock .pv-analysis__head { margin-bottom: 4rem; text-align: left; } }
.p-svc-detail.is-mock .pv-analysis__head .pv-h3 { margin-bottom: 3rem; }
.p-svc-detail.is-mock .pv-analysis__head .pv-lead { max-width: 90rem; margin-inline: auto; }

/* ---- ex-list（2列・白カード・アイコン見出し） ---- */
.p-svc-detail.is-mock .pv-ex { margin-bottom: 10rem; }
.p-svc-detail.is-mock .pv-ex .pv-h6 { margin-bottom: 2.8rem; }
.p-svc-detail.is-mock .pv-ex__txt { text-align: center; font-size: 1.6rem; line-height: 1.8; letter-spacing: .04em; }
@media (max-width: 767px){ .p-svc-detail.is-mock .pv-ex__txt { text-align: left; } }
.p-svc-detail.is-mock .pv-exlist { display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 3rem; margin-top: 5.5rem; list-style: none; padding: 0; }
.p-svc-detail.is-mock .pv-exlist li { width: calc(50% - 1.5rem); padding: 3.5rem 4rem; border-radius: 2rem; background: #fff; }
@media (max-width: 767px){ .p-svc-detail.is-mock .pv-exlist { row-gap: 1.5rem; margin-top: 2.5rem; } .p-svc-detail.is-mock .pv-exlist li { width: 100%; padding: 3rem 2.5rem; border-radius: 1rem; } }
.p-svc-detail.is-mock .pv-exlist__ttl { position: relative; display: flex; align-items: center; gap: 1.4rem; margin-bottom: 2rem; font-size: 2rem; font-weight: 600; letter-spacing: .06em; color: var(--color-deep-navy); }
.p-svc-detail.is-mock .pv-exlist__ttl .c-uicon { width: 3.4rem; height: 3.4rem; color: var(--pv-secondary); flex: none; }
.p-svc-detail.is-mock .pv-exlist__ttl small { font-size: 1.4rem; font-weight: 500; color: #71818f; }
.p-svc-detail.is-mock .pv-exlist__txt { font-size: 1.6rem; line-height: 2; color: var(--color-body,#393A3A); }
.p-svc-detail.is-mock .pv-exlist__txt em { font-style: normal; font-weight: 700; color: var(--pv-secondary); }

/* フード＆アグリ：導入写真・取扱原料カード写真 */
.p-svc-detail.is-mock .pv-foodagri-intro-photo { width: min(92%, 1040px); aspect-ratio: 16 / 7; margin: clamp(3rem, 4vw, 5rem) auto 0; overflow: hidden; border-radius: 2rem; }
.p-svc-detail.is-mock .pv-foodagri-intro-photo:empty,
.p-svc-detail.is-mock .pv-exlist__photo:empty { display: none; }
.p-svc-detail.is-mock .pv-foodagri-intro-photo img,
.p-svc-detail.is-mock .pv-exlist__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.p-svc-detail.is-mock .pv-exlist__photo { width: 100%; aspect-ratio: 16 / 9; margin: 2.6rem 0 0; overflow: hidden; border-radius: 1.2rem; background: var(--color-aqua-mist); }
@media (max-width: 767px) {
  .p-svc-detail.is-mock .pv-foodagri-intro-photo { width: 94%; aspect-ratio: 4 / 3; border-radius: 1.2rem; }
  .p-svc-detail.is-mock .pv-exlist__photo { margin-top: 2rem; border-radius: .8rem; }
}

/* ---- usage-list（3列・白い上段＋青い下段＋矢印） ---- */
.p-svc-detail.is-mock .pv-usage { margin-bottom: 12rem; }
.p-svc-detail.is-mock .pv-usage .pv-h6 { margin-bottom: 5.8rem; }
.p-svc-detail.is-mock .pv-usagelist { display: flex; justify-content: space-between; list-style: none; padding: 0; margin: 0; }
.p-svc-detail.is-mock .pv-usagelist li { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: calc((100% - 14.8rem) / 3); border-radius: 2rem; box-shadow: 3rem 3rem 5rem rgba(30,127,194,0.05); }
.p-svc-detail.is-mock .pv-usagelist li::after {
  content: ""; position: absolute; top: 50%; right: -4.5rem; width: 2rem; height: 3rem; transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 30'%3E%3Cpath d='M2 2l12 13L2 28' fill='none' stroke='%232DB8C5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 1.6rem auto;
}
.p-svc-detail.is-mock .pv-usagelist li:last-child::after { display: none; }
.p-svc-detail.is-mock .pv-usagelist__head { height: 100%; padding: 2.5rem 3rem; background: #fff; border-top-left-radius: 2rem; border-top-right-radius: 2rem; }
.p-svc-detail.is-mock .pv-usagelist__ttl { position: relative; margin-bottom: 1.5rem; padding-left: 2.4rem; font-size: 2rem; font-weight: 600; letter-spacing: .06em; line-height: 1.8; color: var(--color-deep-navy); }
.p-svc-detail.is-mock .pv-usagelist__ttl::after { content: ""; position: absolute; left: 0; top: 1.2rem; width: .6rem; height: .6rem; border: .3rem solid var(--pv-secondary); border-radius: .6rem; }
.p-svc-detail.is-mock .pv-usagelist__txt1 { font-size: 1.6rem; line-height: 1.68; color: var(--color-body,#393A3A); }
.p-svc-detail.is-mock .pv-usagelist__content { position: relative; z-index: 1; padding: 2.5rem .5rem; border-bottom-left-radius: 2rem; border-bottom-right-radius: 2rem; background: var(--pv-secondary); color: #fff; }
.p-svc-detail.is-mock .pv-usagelist__content::after { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); border-left: 1.4rem solid transparent; border-right: 1.4rem solid transparent; border-top: 1.4rem solid #fff; }
.p-svc-detail.is-mock .pv-usagelist__txt2 { font-size: 2rem; font-weight: 600; line-height: 1.5; text-align: center; }
@media (max-width: 767px){
  .p-svc-detail.is-mock .pv-usagelist { flex-direction: column; row-gap: 5.4rem; }
  .p-svc-detail.is-mock .pv-usagelist li { width: 100%; }
  .p-svc-detail.is-mock .pv-usagelist li::after { top: auto; right: calc(50% - 1rem); bottom: -4rem; transform: rotate(90deg); }
  .p-svc-detail.is-mock .pv-usagelist__txt2 { font-size: 1.6rem; }
  .p-svc-detail.is-mock .pv-usage { margin-bottom: 7rem; }
}

/* ---- FAQ（ex-list 流用の2列白カード） ---- */
.p-svc-detail.is-mock .pv-faq { margin-bottom: 12rem; }
.p-svc-detail.is-mock .pv-faq .pv-h6 { margin-bottom: 2.8rem; }
.p-svc-detail.is-mock .pv-faq .pv-exlist { margin-top: 3.5rem; }
.p-svc-detail.is-mock .pv-faq .pv-exlist__ttl::before { content: "Q."; font-family: var(--font-en); font-weight: 700; color: var(--pv-primary); font-size: 2.2rem; line-height: 1; }
@media (max-width: 767px){ .p-svc-detail.is-mock .pv-faq { margin-bottom: 7rem; } }

/* ---- case-list（3列・枠付き写真＋タグ） ---- */
.p-svc-detail.is-mock .pv-case { margin-bottom: 12rem; }
@media (max-width: 767px){ .p-svc-detail.is-mock .pv-case { margin-bottom: 7rem; } }
.p-svc-detail.is-mock .pv-caselist { display: flex; column-gap: 6rem; list-style: none; padding: 0; margin: 0; }
.p-svc-detail.is-mock .pv-caselist li { width: calc((100% - 12rem) / 3); }
.p-svc-detail.is-mock .pv-caselist__img { width: 100%; aspect-ratio: 28/21; margin-bottom: 2.5rem; border: 2px solid #BFD8EC; border-radius: 1rem; overflow: hidden; }
.p-svc-detail.is-mock .pv-caselist__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-svc-detail.is-mock .pv-caselist__tags { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 1.5rem; }
.p-svc-detail.is-mock .pv-caselist__tag { display: inline-flex; color: var(--pv-secondary); font-size: 1.3rem; font-weight: 600; line-height: 1; letter-spacing: .1em; padding: .8rem 1.3rem; border: 1px solid currentColor; border-radius: 3rem; }
.p-svc-detail.is-mock .pv-caselist__tag.--aqua { color: var(--pv-primary); }
.p-svc-detail.is-mock .pv-caselist__ttl { margin-bottom: 1rem; font-size: 2rem; font-weight: 600; letter-spacing: .06em; line-height: 1.8; color: var(--color-deep-navy); }
.p-svc-detail.is-mock .pv-caselist__txt { font-size: 1.5rem; line-height: 1.9; color: var(--color-body,#393A3A); }
@media (max-width: 767px){
  .p-svc-detail.is-mock .pv-caselist { flex-direction: column; row-gap: 2rem; }
  .p-svc-detail.is-mock .pv-caselist li { width: 100%; padding: 1.8rem 2rem 2rem; background: #fff; border-radius: 1rem; }
}
.p-svc-detail.is-mock .pv-note { margin-top: 3rem; font-size: 1.35rem; color: #71818f; line-height: 1.9; }

/* ---- banner（次の事業へ：写真右・ホバーで枠） ---- */
.p-svc-detail.is-mock .pv-banner { position: relative; display: flex; flex-direction: column; border-radius: 2rem; overflow: hidden; background: #fff; padding: 5rem 43% 7rem 7.7rem; transition: .3s background-color ease; }
.p-svc-detail.is-mock .pv-banner::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 41%; background: var(--pv-banner-img) no-repeat center / cover; }
.p-svc-detail.is-mock .pv-banner::after { content: ""; position: absolute; z-index: 2; inset: 0; border: 3px solid transparent; border-radius: 2rem; transition: .3s border-color ease; pointer-events: none; }
@media (hover:hover){
  .p-svc-detail.is-mock .pv-banner:hover { background-color: #E8F3FB; }
  .p-svc-detail.is-mock .pv-banner:hover::after { border-color: var(--pv-secondary); }
  .p-svc-detail.is-mock .pv-banner:hover .pv-banner__icon { transform: translateY(-50%) translateX(.8rem); }
}
.p-svc-detail.is-mock .pv-banner__ttl { display: flex; align-items: center; gap: 1.2rem; font-family: var(--font-en); font-size: 2.2rem; font-weight: 400; letter-spacing: .06em; color: var(--pv-secondary); margin-bottom: .7rem; }
.p-svc-detail.is-mock .pv-banner__ttl::before { content:""; width: 1.2rem; aspect-ratio: 1; border-radius: .2rem; background: currentColor; transform: rotate(45deg); }
.p-svc-detail.is-mock .pv-banner__txt { font-size: 3.6rem; font-weight: 600; letter-spacing: .12em; line-height: 1.7778; color: var(--color-deep-navy); margin-bottom: .6rem; }
.p-svc-detail.is-mock .pv-banner__sub { font-size: 1.6rem; color: var(--color-body,#393A3A); letter-spacing: .04em; }
.p-svc-detail.is-mock .pv-banner__icon { position: absolute; top: 50%; right: 6rem; transform: translateY(-50%); width: 6rem; height: 6rem; border-radius: 6rem; background: #fff; display: flex; align-items: center; justify-content: center; z-index: 1; box-shadow: 0 .4rem 1.6rem rgba(11,31,58,.12); transition: .3s transform ease; }
.p-svc-detail.is-mock .pv-banner__icon svg { width: 1.8rem; color: var(--pv-secondary); }
@media (max-width: 767px){
  .p-svc-detail.is-mock .pv-banner { padding: 0; border-radius: 1rem; }
  .p-svc-detail.is-mock .pv-banner::before { position: static; display: block; width: 100%; height: 15rem; }
  .p-svc-detail.is-mock .pv-banner__body { position: relative; padding: 1.9rem 6rem 2.5rem 3rem; }
  .p-svc-detail.is-mock .pv-banner__txt { font-size: 2.4rem; line-height: 1.5; }
  .p-svc-detail.is-mock .pv-banner__icon { right: 2.5rem; width: 3rem; height: 3rem; }
  .p-svc-detail.is-mock .pv-banner__icon svg { width: 1.2rem; }
}

/* ---- c-contact（分割式・段違い大型パネル） ---- */
.p-svc-detail.is-mock .pv-contact { margin-top: 18rem; margin-bottom: 5rem; position: relative; }
@media (max-width: 767px){ .p-svc-detail.is-mock .pv-contact { margin-top: 12rem; margin-bottom: 3rem; } }
.p-svc-detail.is-mock .pv-contact__wrap { display: grid; grid-template-columns: repeat(2, 1fr); }
.p-svc-detail.is-mock .pv-contact__info { position: relative; z-index: 1; display: flex; justify-content: center; padding: 8rem 5rem 10rem; }
.p-svc-detail.is-mock .pv-contact__info::before { content: ""; position: absolute; top: 0; right: 0; height: 100%; width: 50vw; z-index: -1; background: #fff; border-top-right-radius: 5rem; }
.p-svc-detail.is-mock .pv-contact__h .pv-en-head__ttl { color: var(--pv-primary); font-size: 2.2rem; margin-bottom: 2.5rem; }
.p-svc-detail.is-mock .pv-contact__h .pv-en-head__txt { font-size: 3.6rem; }
.p-svc-detail.is-mock .pv-contact__txt { margin-top: 3rem; font-size: 1.7rem; letter-spacing: .04em; line-height: 2.2; color: var(--color-body,#393A3A); }
.p-svc-detail.is-mock .pv-contact__nav { position: absolute; top: 5rem; bottom: -5rem; right: 0; width: 50%; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding-inline: 7rem; list-style: none; margin: 0; }
.p-svc-detail.is-mock .pv-contact__nav::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 50vw; z-index: -1; background: linear-gradient(135deg, #8FD3D9 0%, #2DB8C5 40%, #1E7FC2 100%); border-bottom-left-radius: 5rem; }
.p-svc-detail.is-mock .pv-contact__nav > li { padding-inline: 3rem; }
.p-svc-detail.is-mock .pv-contact__nav > li:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,.5); margin-bottom: 6rem; padding-bottom: 6.2rem; }
.p-svc-detail.is-mock .pv-contact__link { position: relative; display: flex; flex-direction: column; gap: 1.7rem; padding-left: 3.2rem; color: #fff; transition: .3s ease; }
@media (hover:hover){ .p-svc-detail.is-mock .pv-contact__link:hover { padding-left: 4.2rem; } }
.p-svc-detail.is-mock .pv-contact__link::before { content: ""; position: absolute; left: 0; top: .6rem; width: 1.2rem; aspect-ratio: 1; border-radius: .3rem; background: #fff; transform: rotate(45deg); }
.p-svc-detail.is-mock .pv-contact__link-ttl { font-family: var(--font-en); font-size: 2.6rem; font-weight: 500; letter-spacing: .06em; line-height: 1; }
.p-svc-detail.is-mock .pv-contact__link-txt { font-size: 1.6rem; letter-spacing: .06em; }
.p-svc-detail.is-mock .pv-contact__arrow { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 4.6rem; height: 4.6rem; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.p-svc-detail.is-mock .pv-contact__arrow svg { width: 1.5rem; color: var(--pv-secondary); }
@media (max-width: 900px){
  .p-svc-detail.is-mock .pv-contact__wrap { display: block; }
  .p-svc-detail.is-mock .pv-contact__info { padding: 6rem 2.5rem; }
  .p-svc-detail.is-mock .pv-contact__info::before { width: 100vw; border-top-right-radius: 3rem; }
  .p-svc-detail.is-mock .pv-contact__nav { position: relative; top: auto; bottom: auto; width: 100%; padding: 5rem 2.5rem 2.8rem; }
  .p-svc-detail.is-mock .pv-contact__nav::before { width: 100vw; bottom: -3rem; border-bottom-left-radius: 3rem; }
  .p-svc-detail.is-mock .pv-contact__nav > li:not(:last-child) { margin-bottom: 3rem; padding-bottom: 3.8rem; }
  .p-svc-detail.is-mock .pv-contact__h .pv-en-head__txt { font-size: 2.6rem; }
}

/* ================================================================
   ホクセイ色への最終調整 ＋ ホクセイ本来コンテンツ復元用 2026-07-21b
   （デザイン文法はPREVENT流のまま、青#1E7FC2・紺#0B1F3Aを主体に）
   ================================================================ */
.p-svc-detail.is-mock { background: #EEF3F8; --pv-primary: #1E7FC2; --pv-secondary: #1E7FC2; --pv-title: #1E7FC2; }
.p-svc-detail.is-mock .c-mv { background: #EEF3F8; }
.p-svc-detail.is-mock .pv-analysis { background: #E9EFF5; }

/* シェブロン矢印を青に */
.p-svc-detail.is-mock .pv-step__fig::after,
.p-svc-detail.is-mock .pv-usagelist li::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 30'%3E%3Cpath d='M2 2l12 13L2 28' fill='none' stroke='%231E7FC2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* ステップ丸イラスト：青〜紺のトーンに */
.p-svc-detail.is-mock .pv-step__circle { background: linear-gradient(160deg, rgba(30,127,194,.13), rgba(11,31,58,.06)); }
.p-svc-detail.is-mock .pv-step__circle .c-uicon { color: #1E7FC2; }
/* フロー下段：紺（サイトのCTAと同じ地色） */
.p-svc-detail.is-mock .pv-usagelist__content { background: #0B1F3A; }
/* コンタクトのグラデ：ホクセイのブランドラン（アクア→青→紺） */
.p-svc-detail.is-mock .pv-contact__nav::before { background: linear-gradient(135deg, #2DB8C5 0%, #1E7FC2 45%, #0B1F3A 100%); }
.p-svc-detail.is-mock .pv-contact__arrow svg { color: #1E7FC2; }
/* 事例タグの2色目はアクアのまま（ホクセイのアクセント） */
.p-svc-detail.is-mock .pv-caselist__tag.--aqua { color: #2DB8C5; }

/* ---- ファクト行（創業・純度・ロット・分析表）---- */
.p-svc-detail.is-mock .pv-facts { display: flex; flex-wrap: wrap; gap: 1.2rem; list-style: none; padding: 0; margin: 3rem 0 0; }
.p-svc-detail.is-mock .pv-facts li { display: inline-flex; align-items: baseline; gap: .9rem; background: #fff; border: 1px solid rgba(30,127,194,.35); border-radius: 10rem; padding: 1.1rem 2rem 1.2rem; font-size: 1.4rem; font-weight: 500; color: var(--color-body,#393A3A); }
.p-svc-detail.is-mock .pv-facts b { font-family: var(--font-en); font-size: 1.9rem; font-weight: 700; color: #1E7FC2; line-height: 1; letter-spacing: .02em; }
@media (max-width: 767px){ .p-svc-detail.is-mock .pv-facts li { padding: .9rem 1.5rem 1rem; font-size: 1.3rem; } .p-svc-detail.is-mock .pv-facts b { font-size: 1.6rem; } }

/* ---- 仕様テーブル（白丸カード化・ホクセイの詳細コンテンツ用） ---- */
.p-svc-detail.is-mock .pv-tbl-label { display: flex; align-items: baseline; gap: 1.2rem; margin: 5rem 0 1.8rem; font-size: 1.9rem; font-weight: 700; color: var(--color-deep-navy); letter-spacing: .06em; }
.p-svc-detail.is-mock .pv-tbl-label span { font-family: var(--font-en); font-size: 1.25rem; font-weight: 600; letter-spacing: .18em; color: #1E7FC2; text-transform: uppercase; }
.p-svc-detail.is-mock .pv-table { width: 100%; background: #fff; border-radius: 2rem; overflow: hidden; border-collapse: separate; border-spacing: 0; }
.p-svc-detail.is-mock .pv-table th,
.p-svc-detail.is-mock .pv-table td { padding: 2rem 2.6rem; border-bottom: 1px solid rgba(11,31,58,.07); vertical-align: top; text-align: left; }
.p-svc-detail.is-mock .pv-table tr:last-child th,
.p-svc-detail.is-mock .pv-table tr:last-child td { border-bottom: none; }
.p-svc-detail.is-mock .pv-table th { width: 22rem; background: #F4F8FC; font-size: 1.5rem; font-weight: 700; color: var(--color-deep-navy); letter-spacing: .04em; }
.p-svc-detail.is-mock .pv-table th small { display: block; font-size: .8em; font-weight: 500; color: #71818f; margin-top: .4rem; letter-spacing: 0; }
.p-svc-detail.is-mock .pv-table td { font-size: 1.5rem; line-height: 1.95; color: var(--color-body,#393A3A); }
.p-svc-detail.is-mock .pv-table td em { font-style: normal; font-weight: 700; color: #1E7FC2; }
@media (max-width: 767px){
  .p-svc-detail.is-mock .pv-table th, .p-svc-detail.is-mock .pv-table td { display: block; width: 100%; padding: 1.4rem 2rem; }
  .p-svc-detail.is-mock .pv-table th { border-bottom: none; padding-bottom: .2rem; background: #fff; }
}

/* ---- 事例6件（2段折り返し） ---- */
.p-svc-detail.is-mock .pv-caselist { flex-wrap: wrap; row-gap: 5rem; }
@media (max-width: 767px){ .p-svc-detail.is-mock .pv-caselist { row-gap: 2rem; } }

/* ---- 上下をサイト標準に：淡色地は pv-body（本文）だけに限定 2026-07-21c ---- */
.p-svc-detail.is-mock { background: #fff; }
.p-svc-detail.is-mock .pv-body { background: #EEF3F8; }
.p-svc-detail.is-mock .pv-intro { padding-top: clamp(4rem, 6vw, 7rem); }
.p-svc-detail.is-mock .pv-analysis { padding-bottom: clamp(7rem, 10vw, 13rem); }

/* ---- 英字ラベルを手描き多色＋描画アニメ（他ページの見出し英字に統一）2026-07-21d ---- */
.p-svc-detail.is-mock .pv-svg-label::before { display: none !important; }  /* ◇マーカー除去 */
.p-svc-detail.is-mock .pv-svg-label { gap: 0; }
.p-svc-detail.is-mock .pv-svg-label .c-title-svg-wrap { display: inline-block; line-height: 1; }
.p-svc-detail.is-mock .pv-en-head__ttl.pv-svg-label { margin-bottom: 1.6rem; }
.p-svc-detail.is-mock .pv-en-head__ttl.pv-svg-label .c-title-svg-wrap { font-size: 2.7rem; }
.p-svc-detail.is-mock .pv-h2__ttl.pv-svg-label { justify-content: center; margin-bottom: 1.7rem; }
.p-svc-detail.is-mock .pv-h2__ttl.pv-svg-label .c-title-svg-wrap { font-size: 2.7rem; }
.p-svc-detail.is-mock .pv-step__brand.pv-svg-label { display: inline-block; }
.p-svc-detail.is-mock .pv-step__brand.pv-svg-label .c-title-svg-wrap { font-size: 2.7rem; vertical-align: -0.5rem; }
@media (max-width: 767px){
  .p-svc-detail.is-mock .pv-en-head__ttl.pv-svg-label .c-title-svg-wrap,
  .p-svc-detail.is-mock .pv-h2__ttl.pv-svg-label .c-title-svg-wrap,
  .p-svc-detail.is-mock .pv-step__brand.pv-svg-label .c-title-svg-wrap { font-size: 2.2rem; }
}

/* ================================================================
   サイト配色・フォントサイズへ統一 ＋ 用途ブロック刷新 2026-07-21e
   ================================================================ */
/* 変数を site トークンへ（青=#073489, アクア=#2DB8C5） */
.p-svc-detail.is-mock {
  --pv-primary: var(--color-aqua);
  --pv-secondary: var(--color-hokusei-blue);
  --pv-title: var(--color-hokusei-blue);
  --pv-ink: var(--color-deep-navy);
  --pv-ink-mute: rgba(11,31,58,0.62);
}
/* --- フォントサイズを site スケールへ --- */
.p-svc-detail.is-mock .pv-en-head__txt,
.p-svc-detail.is-mock .pv-h2__txt,
.p-svc-detail.is-mock .pv-h3,
.p-svc-detail.is-mock .p-svc-overview__h1 {
  font-size: var(--fs-xl) !important; letter-spacing: var(--ls-heading); line-height: 1.6; color: var(--color-deep-navy);
}
.p-svc-detail.is-mock .pv-lead { font-size: var(--fs-base); line-height: 2.0; color: var(--color-deep-navy); letter-spacing: 0.02em; }
.p-svc-detail.is-mock .c-ppost__ttl { font-size: var(--fs-lg); color: var(--color-hokusei-blue); letter-spacing: var(--ls-heading); }
.p-svc-detail.is-mock .c-ppost__txt,
.p-svc-detail.is-mock .pv-exlist__txt,
.p-svc-detail.is-mock .c-callout__tx { font-size: var(--fs-base); line-height: 1.9; color: var(--color-deep-navy); }
.p-svc-detail.is-mock .pv-caselist__txt { font-size: var(--fs-base); line-height: 1.85; color: var(--pv-ink-mute); }
.p-svc-detail.is-mock .pv-h6 { font-size: var(--fs-lg); color: var(--color-hokusei-blue); }
.p-svc-detail.is-mock .pv-ex__txt { font-size: var(--fs-base); color: var(--color-deep-navy); }
.p-svc-detail.is-mock .pv-exlist__ttl { font-size: var(--fs-lg); color: var(--color-deep-navy); }
.p-svc-detail.is-mock .pv-exlist__ttl small { font-size: var(--fs-sm); color: var(--pv-ink-mute); }
.p-svc-detail.is-mock .pv-caselist__ttl { font-size: var(--fs-lg); color: var(--color-deep-navy); }
.p-svc-detail.is-mock .c-callout__hd { font-size: var(--fs-lg); color: var(--color-deep-navy); }
.p-svc-detail.is-mock .c-callout__sign { font-size: var(--fs-sm); color: var(--color-deep-navy); }
.p-svc-detail.is-mock .pv-facts li { font-size: var(--fs-sm); color: var(--color-deep-navy); border-color: rgba(7,52,137,.28); }
.p-svc-detail.is-mock .pv-facts b { font-size: var(--fs-md); color: var(--color-hokusei-blue); }
.p-svc-detail.is-mock .pv-pills li { font-size: var(--fs-sm); color: var(--color-deep-navy); border-color: var(--color-aqua); }
.p-svc-detail.is-mock .pv-caselist__tag { font-size: var(--fs-xs); }
.p-svc-detail.is-mock .pv-usagelist__ttl { font-size: var(--fs-lg); color: var(--color-hokusei-blue); }
.p-svc-detail.is-mock .pv-usagelist__txt1 { font-size: var(--fs-base); color: var(--color-deep-navy); }
.p-svc-detail.is-mock .pv-usagelist__txt2 { font-size: var(--fs-md); }
.p-svc-detail.is-mock .pv-table th { font-size: var(--fs-base); }
.p-svc-detail.is-mock .pv-table td { font-size: var(--fs-base); color: var(--color-deep-navy); }
.p-svc-detail.is-mock .pv-tbl-label { font-size: var(--fs-lg); }
.p-svc-detail.is-mock .pv-note { font-size: var(--fs-xs); color: var(--pv-ink-mute); }
/* em 強調は site の hokusei-blue に */
.p-svc-detail.is-mock em { color: var(--color-hokusei-blue) !important; }
.p-svc-detail.is-mock .c-case__value { background: linear-gradient(135deg,var(--color-aqua),var(--color-hokusei-blue)); -webkit-background-clip:text; background-clip:text; }
/* テーブル見出し帯・境界を site 寄りに */
.p-svc-detail.is-mock .pv-table th { background: var(--color-aqua-mist); }
.p-svc-detail.is-mock .pv-tbl-label span { color: var(--color-hokusei-blue); }
.p-svc-detail.is-mock .pv-caselist__img { border-color: var(--color-harbor); }
.p-svc-detail.is-mock .pv-caselist__tag { color: var(--color-hokusei-blue); }
.p-svc-detail.is-mock .pv-caselist__tag.--aqua { color: var(--color-aqua); }
/* usage フロー矢印を紺チェブロンへ */
.p-svc-detail.is-mock .pv-usagelist li::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 30'%3E%3Cpath d='M2 2l12 13L2 28' fill='none' stroke='%23073489' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.p-svc-detail.is-mock .pv-usagelist__content { background: var(--color-hokusei-blue); }
/* コンタクトのグラデを site（アクア→青→紺）に */
.p-svc-detail.is-mock .pv-contact__nav::before { background: linear-gradient(135deg, var(--color-aqua) 0%, var(--color-hokusei-blue) 55%, var(--color-deep-navy) 100%); }
.p-svc-detail.is-mock .pv-contact__arrow svg { color: var(--color-hokusei-blue); }
.p-svc-detail.is-mock .pv-contact__txt { font-size: var(--fs-base); color: var(--color-deep-navy); }
/* callout 枠をアクアに */
.p-svc-detail.is-mock .c-callout { border-color: var(--color-aqua); }
.p-svc-detail.is-mock .c-callout__hd::after { border-color: var(--color-hokusei-blue); }

/* --- 用途ブロック（刷新：白パネル＋◇インデックス）--- */
.p-svc-detail.is-mock .pv-uses { margin-top: 6rem; background: #fff; border-radius: 2rem; padding: clamp(3rem,3.6vw,4.6rem) clamp(2.6rem,3.6vw,4.6rem); box-shadow: 0 2px 34px -14px rgba(11,31,58,.14); }
.p-svc-detail.is-mock .pv-uses__hd { position: relative; padding-left: 2.6rem; margin-bottom: 2.6rem; font-size: var(--fs-lg); font-weight: 700; letter-spacing: var(--ls-heading); color: var(--color-deep-navy); }
.p-svc-detail.is-mock .pv-uses__hd::before { content: ""; position: absolute; left: 0; top: .55em; width: 1.1rem; height: 1.1rem; background: var(--color-aqua); border-radius: .2rem; transform: rotate(45deg); }
.p-svc-detail.is-mock .pv-uses__grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 4rem; list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(11,31,58,.1); }
.p-svc-detail.is-mock .pv-uses__grid li { display: flex; align-items: center; gap: 1.4rem; padding: 1.7rem .4rem; font-size: var(--fs-base); font-weight: 500; color: var(--color-deep-navy); border-bottom: 1px solid rgba(11,31,58,.1); }
.p-svc-detail.is-mock .pv-uses__grid li::before { content: ""; flex: none; width: .8rem; height: .8rem; border-radius: 50%; background: var(--color-aqua); box-shadow: 0 0 0 .4rem rgba(45,184,197,.14); }
.p-svc-detail.is-mock .pv-uses__note { margin-top: 2.6rem; font-size: var(--fs-base); line-height: 1.9; }
.p-svc-detail.is-mock .pv-uses__note em { font-style: normal; font-weight: 700; }
@media (max-width: 900px){ .p-svc-detail.is-mock .pv-uses__grid { grid-template-columns: repeat(2, 1fr); column-gap: 2.4rem; } }
@media (max-width: 560px){ .p-svc-detail.is-mock .pv-uses__grid { grid-template-columns: 1fr; } }

/* 用途ブロックのサブリード */
.p-svc-detail.is-mock .pv-uses__lead { margin: -1.2rem 0 2.4rem; padding-left: 2.6rem; font-size: var(--fs-base); line-height: 1.9; color: var(--pv-ink-mute); }

/* ---- サブ見出し（pv-subhead）：英字ラベル手描き多色＋描画アニメ＋日本語 2026-07-21f ---- */
.p-svc-detail.is-mock .pv-subhead { text-align: center; margin-bottom: clamp(3.6rem, 4vw, 5.8rem); }
.p-svc-detail.is-mock .pv-subhead__en { display: inline-flex; justify-content: center; margin-bottom: 1.3rem; }
.p-svc-detail.is-mock .pv-subhead__en .c-title-svg-wrap { display: inline-block; line-height: 1; font-size: 2.3rem; }
.p-svc-detail.is-mock .pv-subhead__txt { display: block; font-size: var(--fs-lg); font-weight: 600; letter-spacing: var(--ls-heading); line-height: 1.5; color: var(--color-deep-navy); }
@media (max-width: 767px){ .p-svc-detail.is-mock .pv-subhead__en .c-title-svg-wrap { font-size: 1.9rem; } }

/* ---- サブ見出しを他の節見出しと同じ見出しサイズへ 2026-07-21g ---- */
.p-svc-detail.is-mock .pv-subhead__txt { font-size: var(--fs-xl); font-weight: 700; letter-spacing: var(--ls-heading); line-height: 1.5; }
.p-svc-detail.is-mock .pv-subhead__en { margin-bottom: 1.6rem; }
.p-svc-detail.is-mock .pv-subhead__en .c-title-svg-wrap { font-size: 2.7rem; }
@media (max-width: 767px){ .p-svc-detail.is-mock .pv-subhead__en .c-title-svg-wrap { font-size: 2.2rem; } }

/* ---- 英字ラベルを他ページ節見出し(c-sec-head__en)と同一サイズに 2026-07-21h ---- */
.p-svc-detail.is-mock .pv-en-head__ttl.pv-svg-label .c-title-svg-wrap,
.p-svc-detail.is-mock .pv-h2__ttl.pv-svg-label .c-title-svg-wrap,
.p-svc-detail.is-mock .pv-subhead__en .c-title-svg-wrap {
  font-size: clamp(3.6rem, 5vw, 6.4rem) !important;
  line-height: 1.05;
}
.p-svc-detail.is-mock .pv-en-head__ttl.pv-svg-label,
.p-svc-detail.is-mock .pv-h2__ttl.pv-svg-label { margin-bottom: 0.6rem; }
.p-svc-detail.is-mock .pv-subhead__en { margin-bottom: 0.6rem; }

/* ================================================================
   事業別コンテンツ充実（差別化フォーマット）2026-07-21i
   ================================================================ */
/* ライフスタイル：取扱ブランド・ディレクトリ（3地域） */
.p-svc-detail.is-mock .pv-brands { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 2.4vw, 3.4rem); }
@media (max-width: 900px){ .p-svc-detail.is-mock .pv-brands { grid-template-columns: 1fr; gap: 3.2rem; } }
.p-svc-detail.is-mock .pv-brands__region { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; padding-bottom: 1.4rem; margin-bottom: 1.4rem; border-bottom: 2px solid var(--color-aqua); font-size: var(--fs-lg); font-weight: 700; color: var(--color-hokusei-blue); letter-spacing: .04em; }
.p-svc-detail.is-mock .pv-brands__region small { font-size: var(--fs-xs); font-weight: 600; color: var(--pv-ink-mute); letter-spacing: .02em; }
.p-svc-detail.is-mock .pv-brands__list { list-style: none; padding: 0; margin: 0; }
.p-svc-detail.is-mock .pv-brands__list li { display: flex; align-items: flex-start; gap: clamp(1.2rem, 1.4vw, 1.8rem); padding: 1.5rem 0; border-bottom: 1px solid rgba(11,31,58,.1); }
.p-svc-detail.is-mock .pv-brands__name { display: block; font-size: var(--fs-md); font-weight: 700; color: var(--color-deep-navy); margin-bottom: .5rem; letter-spacing: .02em; }
.p-svc-detail.is-mock .pv-brands__desc { display: block; font-size: var(--fs-sm); line-height: 1.75; color: var(--pv-ink-mute); }
/* 製品サムネイル：写真を設定した項目だけ名前の左に出る（未設定なら :empty で枠ごと非表示＝従来の見た目） */
.p-svc-detail.is-mock .pv-brands__body { flex: 1 1 auto; min-width: 0; }
.p-svc-detail.is-mock .pv-brands__img { flex: 0 0 auto; width: clamp(128px, 12.2vw, 176px); aspect-ratio: 1 / 1; margin: .3rem 0 0; overflow: hidden; border: 1px solid var(--color-harbor); border-radius: .8rem; background: var(--color-aqua-mist); }
.p-svc-detail.is-mock .pv-brands__img:empty { display: none; }
.p-svc-detail.is-mock .pv-brands__img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* 英語ページ：地域名が長く折り返すため、拠点名を必ず次行に送って3カラムの下線位置を揃える */
.p-svc-detail.is-mock.is-en .pv-brands__region small { flex: 1 0 100%; }
/* 英語ページ：単語が長く1行あたりの語数が減るため、サムネイルは一段控えめにして本文幅を確保する */
.p-svc-detail.is-mock.is-en .pv-brands__img { width: clamp(112px, 10.5vw, 150px); }

/* パッケージ：対応業界カード（2×2） */
.p-svc-detail.is-mock .pv-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.6rem, 2vw, 2.4rem); }
@media (max-width: 700px){ .p-svc-detail.is-mock .pv-fields { grid-template-columns: 1fr; } }
.p-svc-detail.is-mock .pv-fields li { display: flex; gap: 1.8rem; align-items: flex-start; background: #fff; border-radius: 1.6rem; padding: clamp(2.2rem,2.4vw,3rem); box-shadow: 0 2px 30px -14px rgba(11,31,58,.14); }
.p-svc-detail.is-mock .pv-fields__no { flex: none; font-family: var(--font-en); font-size: var(--fs-lg); font-weight: 700; color: var(--color-aqua); line-height: 1; padding-top: .2rem; }
.p-svc-detail.is-mock .pv-fields__ttl { font-size: var(--fs-lg); font-weight: 700; color: var(--color-deep-navy); margin-bottom: .8rem; letter-spacing: .04em; }
.p-svc-detail.is-mock .pv-fields__txt { font-size: var(--fs-base); line-height: 1.85; color: var(--color-deep-navy); }

/* ================================================================
   連絡先カードを最新プレミアムデザインに（サービス準拠）2026-07-21j
   ================================================================ */
.c-contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 1.8vw, 2.2rem); }
@media (max-width: 760px){ .c-contact-cards { grid-template-columns: 1fr; } }
.c-contact-cards .c-info-card {
  position: relative; overflow: hidden; text-align: left;
  background: linear-gradient(180deg, #fff 0%, #F7FAFD 100%);
  border: 1px solid rgba(11,31,58,.07); border-radius: 2rem;
  box-shadow: 0 2px 4px rgba(11,31,58,.05), 0 16px 32px -14px rgba(11,31,58,.16), 0 44px 74px -34px rgba(11,31,58,.18);
  padding: clamp(2.4rem, 2.6vw, 3.2rem);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s;
}
@media (hover:hover){ .c-contact-cards .c-info-card:hover { transform: translateY(-6px); border-color: rgba(45,184,197,.35); box-shadow: 0 3px 8px rgba(11,31,58,.07), 0 26px 44px -14px rgba(11,31,58,.24), 0 60px 96px -38px rgba(11,31,58,.26); } }
.c-contact-cards .c-info-card__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; border-radius: 1.4rem;
  background: linear-gradient(135deg, #2DB8C5 0%, #1E7FC2 100%);
  box-shadow: 0 10px 22px -8px rgba(30,127,194,.5), inset 0 1px 0 rgba(255,255,255,.25); margin-bottom: 1.8rem;
}
.c-contact-cards .c-info-card__icon svg { width: 2.4rem; height: 2.4rem; color: #fff; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.c-contact-cards .c-info-card__label { font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--color-aqua); margin-bottom: .8rem; }
.c-contact-cards .c-info-card__title { font-size: var(--fs-lg); font-weight: 700; color: var(--color-deep-navy); letter-spacing: .01em; margin-bottom: 1rem; line-height: 1.4; word-break: break-word; }
.c-contact-cards .c-info-card__text { font-size: var(--fs-base); line-height: 1.85; color: var(--color-deep-navy); }

/* ================================================================
   連絡先リード部をサービス詳細ページのデザインに統一 2026-07-21k
   ================================================================ */
/* 1カラム化（カードを全幅に）＋窮屈な円形写真を廃止 */
.p-contact .p-contact-lead { display: block; }
.p-contact .p-contact-lead__visual { display: none; }
.p-contact .p-contact-lead .c-sec-head { margin-bottom: clamp(3.4rem, 4.5vw, 5.6rem); }
/* 日本語見出しを（ ）無しの大見出しへ（サービス準拠：英字大＋日本語大） */
.p-contact .c-sec-head:not(.c-sec-head--keep) .c-sec-head__title::before,
.p-contact .c-sec-head:not(.c-sec-head--keep) .c-sec-head__title::after { content: none !important; }
.p-contact .c-sec-head:not(.c-sec-head--keep) .c-sec-head__title {
  font-size: var(--fs-xl); font-weight: 700; color: var(--color-deep-navy);
  letter-spacing: var(--ls-heading); line-height: 1.5; margin-top: .8rem;
}
.p-contact .c-sec-head:not(.c-sec-head--keep) .c-sec-head__lead {
  font-size: var(--fs-base); line-height: 2; color: var(--color-deep-navy); max-width: 74rem; margin-top: 2.4rem;
}
/* カードを全幅3カラム・余裕を持たせる */
.p-contact .c-contact-cards { margin-top: clamp(3.2rem, 4vw, 5rem); }
.p-contact .c-contact-cards .c-info-card { min-height: 20rem; }
.p-contact .c-contact-cards .c-info-card__title { font-size: var(--fs-lg); }

/* ================================================================
   連絡先カードを「AIっぽさ」排除：フラット・エディトリアルに 2026-07-21l
   グラデバッジ／多層ドロップシャドウ／持ち上がりホバーを撤去
   ================================================================ */
.c-contact-cards { gap: 0; border-top: 1px solid rgba(11,31,58,.12); }
@media (min-width: 761px){ .c-contact-cards .c-info-card + .c-info-card { border-left: none; } }
.c-contact-cards .c-info-card {
  background: transparent !important; border: none !important; border-radius: 0 !important;
  box-shadow: none !important; padding: clamp(2.8rem,3vw,3.6rem) clamp(2rem,2.4vw,3rem) clamp(2.8rem,3vw,3.6rem) 0;
  transform: none !important; transition: none;
  border-bottom: 1px solid rgba(11,31,58,.12) !important;
}
@media (min-width: 761px){
  .c-contact-cards { grid-template-columns: repeat(3,1fr); column-gap: clamp(3rem,4vw,5rem); }
  .c-contact-cards .c-info-card { border-bottom: none !important; padding-bottom: 0; }
}
.c-contact-cards .c-info-card:hover { transform: none !important; box-shadow: none !important; border-color: rgba(11,31,58,.12) !important; }
/* アイコン：グラデバッジ廃止 → 細い線アイコン（紺）。◇の代わりに上部の小さな指標に */
.c-contact-cards .c-info-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: auto; background: none !important; box-shadow: none !important;
  border-radius: 0; margin: 0 0 1.6rem; padding: 0;
}
.c-contact-cards .c-info-card__icon svg { width: 2.6rem; height: 2.6rem; color: var(--color-hokusei-blue); stroke-width: 1.4; }
/* 見出しラベルに◇マーカー（サイトの節ラベル語彙に統一） */
.c-contact-cards .c-info-card__label { position: relative; display: flex; align-items: center; gap: .9rem; color: var(--color-hokusei-blue); letter-spacing: .18em; margin-bottom: 1rem; }
.c-contact-cards .c-info-card__label::before { content: ""; width: .8rem; height: .8rem; border-radius: .15rem; background: var(--color-aqua); transform: rotate(45deg); flex: none; }
.c-contact-cards .c-info-card__title { font-size: var(--fs-lg); font-weight: 700; color: var(--color-deep-navy); letter-spacing: .01em; margin-bottom: 1rem; line-height: 1.45; }
.c-contact-cards .c-info-card__text { font-size: var(--fs-base); line-height: 1.9; color: var(--color-deep-navy); }

/* ---- 連絡先カード 最終形：フラット白カード＋ヘアライン＋◇（アイコン/影/持上げ廃止）override ---- */
.c-contact-cards { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: clamp(1.6rem, 1.8vw, 2rem) !important; border-top: none !important; }
@media (max-width: 760px){ .c-contact-cards { grid-template-columns: 1fr !important; } }
.c-contact-cards .c-info-card {
  background: #fff !important; border: 1px solid rgba(11,31,58,.10) !important; border-radius: 1.4rem !important;
  box-shadow: none !important; transform: none !important;
  padding: clamp(2.8rem, 3vw, 3.6rem) !important;
  transition: border-color .3s ease !important; border-bottom: 1px solid rgba(11,31,58,.10) !important; border-left: 1px solid rgba(11,31,58,.10) !important;
}
@media (hover:hover){ .c-contact-cards .c-info-card:hover { transform: none !important; box-shadow: none !important; border-color: var(--color-aqua) !important; } }
.c-contact-cards .c-info-card__icon { display: none !important; }
.c-contact-cards .c-info-card__label {
  position: static; display: inline-flex; align-items: center; gap: .9rem;
  font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--color-hokusei-blue); margin-bottom: 1.4rem;
}
.c-contact-cards .c-info-card__label::before { content: ""; width: .8rem; height: .8rem; border-radius: .15rem; background: var(--color-aqua); transform: rotate(45deg); flex: none; }
.c-contact-cards .c-info-card__title { font-size: var(--fs-lg) !important; font-weight: 700; color: var(--color-deep-navy); margin-bottom: 1rem; line-height: 1.45; letter-spacing: .01em; }
.c-contact-cards .c-info-card__text { font-size: var(--fs-base); line-height: 1.9; color: var(--color-deep-navy); }

/* ---- 連絡先カード：ホバー効果も撤去（静的）2026-07-21m ---- */
.c-contact-cards .c-info-card { transition: none !important; }
.c-contact-cards .c-info-card:hover { border-color: rgba(11,31,58,.10) !important; transform: none !important; box-shadow: none !important; background: #fff !important; }

/* ================================================================
   CyberAgent風 サービスバナーグリッド 2026-07-21n
   画像ズーム／矢印スライド／オーバーレイ／スタッガーフェードイン
   ================================================================ */
.c-svc-banners { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.6rem, 2vw, 2.4rem); }
@media (max-width: 720px){ .c-svc-banners { grid-template-columns: 1fr; } }
.c-svc-banner {
  position: relative; display: block; overflow: hidden; border-radius: 1.8rem; isolation: isolate;
  aspect-ratio: 16 / 10; color: #fff; text-decoration: none;
  box-shadow: 0 22px 48px -24px rgba(11,31,58,.45);
}
.c-svc-banner__img { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transform: scale(1.001); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.c-svc-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,31,58,.06) 0%, rgba(11,31,58,.34) 52%, rgba(11,31,58,.80) 100%); }
.c-svc-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(45,184,197,.30) 0%, rgba(11,31,58,.55) 100%); opacity: 0; transition: opacity .55s ease; }
.c-svc-banner__body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(2.4rem, 3vw, 3.6rem); gap: .5rem; }
.c-svc-banner__no { font-family: var(--font-en); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .12em; opacity: .82; }
.c-svc-banner__tag { position: absolute; top: clamp(2.4rem,3vw,3.6rem); left: clamp(2.4rem,3vw,3.6rem); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; padding: .6rem 1.3rem; border: 1px solid rgba(255,255,255,.55); border-radius: 10rem; }
.c-svc-banner__en { font-family: var(--font-en); font-size: clamp(2.8rem, 3.6vw, 4.2rem); font-weight: 700; letter-spacing: .03em; line-height: 1.02; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.c-svc-banner__jp { font-size: var(--fs-md); font-weight: 600; letter-spacing: .06em; opacity: .95; transition: transform .55s cubic-bezier(.2,.7,.2,1) .04s; }
.c-svc-banner__arrow {
  position: absolute; right: clamp(2.4rem,3vw,3.6rem); bottom: clamp(2.4rem,3vw,3.6rem);
  width: 5rem; height: 5rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.6);
  display: flex; align-items: center; justify-content: center; font-size: 1.9rem; line-height: 1;
  transition: background .45s ease, color .45s ease, transform .45s ease; z-index: 1;
}
@media (hover:hover){
  .c-svc-banner:hover .c-svc-banner__img { transform: scale(1.075); }
  .c-svc-banner:hover::after { opacity: 1; }
  .c-svc-banner:hover .c-svc-banner__en,
  .c-svc-banner:hover .c-svc-banner__jp { transform: translateY(-.6rem); }
  .c-svc-banner:hover .c-svc-banner__arrow { background: #fff; color: var(--color-deep-navy); transform: translateX(.5rem); }
}
/* スクロール・フェードイン（子をスタッガー、コンテナ自体は動かさない） */
.c-svc-banners.js-fadein { opacity: 1; transform: none; }
.c-svc-banners .c-svc-banner { opacity: 0; transform: translateY(30px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.c-svc-banners.is-in .c-svc-banner { opacity: 1; transform: translateY(0); }
.c-svc-banners.is-in .c-svc-banner:nth-child(1){ transition-delay: 0s; }
.c-svc-banners.is-in .c-svc-banner:nth-child(2){ transition-delay: .1s; }
.c-svc-banners.is-in .c-svc-banner:nth-child(3){ transition-delay: .2s; }
.c-svc-banners.is-in .c-svc-banner:nth-child(4){ transition-delay: .3s; }
@media (prefers-reduced-motion: reduce){ .c-svc-banners .c-svc-banner { opacity: 1 !important; transform: none !important; } }

/* ---- バナー：z-index堅牢化（負値→正値、isolation解除）override ---- */
.c-svc-banner { isolation: auto; }
.c-svc-banner__img { z-index: 0; }
.c-svc-banner::before { z-index: 1; }
.c-svc-banner::after { z-index: 1; }
.c-svc-banner__body { z-index: 2; }
.c-svc-banner__tag { z-index: 2; }
.c-svc-banner__arrow { z-index: 2; }

/* ---- バナーホバーを見やすく（濁ったオーバーレイ廃止・テキスト移動廃止）override 2026-07-21o ---- */
.c-svc-banner::after { display: none !important; }
@media (hover:hover){
  .c-svc-banner:hover .c-svc-banner__img { transform: scale(1.05); }
  .c-svc-banner:hover::before { background: linear-gradient(180deg, rgba(11,31,58,.14) 0%, rgba(11,31,58,.46) 55%, rgba(11,31,58,.86) 100%); }
  .c-svc-banner:hover .c-svc-banner__en,
  .c-svc-banner:hover .c-svc-banner__jp { transform: none !important; }
  .c-svc-banner:hover .c-svc-banner__arrow { background: #fff; color: var(--color-deep-navy); transform: translateX(.4rem); }
}

/* ================================================================
   CyberAgent風 フローティング・ピルヘッダー 2026-07-21p
   参考: cyberagent.co.jp（.l-header_bar：白/フル角丸/浮遊）
   ================================================================ */
.c-header {
  background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  height: auto !important; padding: clamp(1.2rem, 1.5vw, 1.8rem) clamp(1.4rem, 2vw, 2.2rem) !important;
  pointer-events: none;
}
.c-header.is-scrolled { box-shadow: none !important; }
.c-header__inner {
  pointer-events: auto;
  max-width: 132rem; margin-inline: auto; height: 6.2rem !important;
  background: #fff; border-radius: 999px;
  box-shadow: 0 10px 30px -12px rgba(11,31,58,.18), 0 2px 6px rgba(11,31,58,.05);
  border: 1px solid rgba(11,31,58,.05);
  padding-inline: clamp(2.2rem, 2.4vw, 3.2rem) !important;
}
/* スクロール時はほんの少し影を締める（浮遊感キープ） */
.c-header.is-scrolled .c-header__inner { box-shadow: 0 8px 24px -12px rgba(11,31,58,.22), 0 2px 6px rgba(11,31,58,.06); }
/* ナビ下線ホバーをアクア→青のグラデ細線に（さりげなく） */
.c-header__nav-link::after { background: linear-gradient(90deg, var(--color-aqua), var(--color-hokusei-blue)) !important; height: 2px !important; border-radius: 2px; }
/* ロゴを少し詰める（ピル内に収める） */
.c-header__logo-img { width: 34px; }
@media (max-width: 767px){
  .c-header { padding: 1rem 1.2rem !important; }
  .c-header__inner { height: 5.6rem !important; padding-inline: 1.8rem !important; }
}

/* ================================================================
   ヘッダー：SERVICEドロップダウン（子ページ表示）2026-07-21q
   ================================================================ */
.c-nav-has-sub { position: relative; }
.c-nav-sub {
  position: absolute; top: 100%; left: 50%; z-index: 20;
  min-width: 21rem; margin-top: 1.6rem; padding: 1rem;
  background: #fff; border-radius: 1.4rem; border: 1px solid rgba(11,31,58,.05);
  box-shadow: 0 18px 44px -14px rgba(11,31,58,.24), 0 2px 8px rgba(11,31,58,.08);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(.8rem);
  transition: opacity .3s ease, transform .32s cubic-bezier(.2,.7,.2,1), visibility .3s;
}
/* ホバーの隙間を埋める透明ブリッジ */
.c-nav-sub::before { content: ""; position: absolute; top: -1.6rem; left: 0; width: 100%; height: 1.6rem; }
.c-nav-has-sub:hover .c-nav-sub,
.c-nav-has-sub:focus-within .c-nav-sub {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.c-nav-sub__link {
  display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.6rem; border-radius: .9rem;
  font-size: var(--fs-sm); font-weight: 600; color: var(--color-deep-navy); letter-spacing: .04em;
  white-space: nowrap; transition: background .25s ease, color .25s ease;
}
.c-nav-sub__link::before { content: ""; width: .6rem; height: .6rem; border-radius: .12rem; background: var(--color-aqua); transform: rotate(45deg); flex: none; transition: transform .25s ease; }
.c-nav-sub__link:hover { background: var(--color-aqua-mist); color: var(--color-hokusei-blue); }
.c-nav-sub__link:hover::before { transform: rotate(45deg) scale(1.25); }
/* 親SERVICEにドロップダウン印（▾） */
.c-nav-has-sub > .c-header__nav-link { position: relative; }
/* モバイル：ドロップダウンは常時インライン表示（ハンバーガーメニュー内） */
@media (max-width: 900px){
  .c-nav-sub { position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    margin: .6rem 0 .4rem; box-shadow: none; border: none; background: transparent; padding: 0 0 0 1.4rem; min-width: 0; }
  .c-nav-sub::before { display: none; }
  .c-nav-sub__link { font-size: 1.6rem; padding: .8rem 0; }
  .c-nav-sub__link:hover { background: transparent; }
}

/* ---- ヘッダーをCyberAgentにさらに寄せる：ピル比率＋丸いメニューボタン 2026-07-21r ---- */
.c-header__inner { height: 6.8rem !important; }
/* メニュー（ハンバーガー）をCyberAgent「ALL」風の丸ボタンに（≤1099px） */
@media (max-width: 1099px){
  .c-header__hamburger {
    width: 4.6rem !important; height: 4.6rem !important; padding: 1.4rem !important; gap: 5px !important;
    border-radius: 50% !important; border: 1.5px solid var(--color-aqua) !important; background: #fff !important;
    box-shadow: 0 5px 16px -6px rgba(11,31,58,.2);
  }
  .c-header__hamburger span { background: var(--color-hokusei-blue) !important; }
  .c-header__hamburger.is-open { border-color: var(--color-hokusei-blue) !important; }
  .c-header__hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg) !important; }
  .c-header__hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg) !important; }
}

/* ================================================================
   ヘッダー：デスクトップでも丸メニューボタン＋全画面オーバーレイ
   （CyberAgent「ALL」相当。インラインナビは維持）2026-07-21s
   ================================================================ */
/* 丸メニューボタンを全ビューポートで表示 */
.c-header__hamburger {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: 4.6rem; height: 4.6rem; padding: 1.4rem;
  border-radius: 50%; border: 1.5px solid var(--color-aqua); background: #fff;
  box-shadow: 0 5px 16px -6px rgba(11,31,58,.2); position: relative; z-index: 110; cursor: pointer;
  margin-left: 1.4rem; flex: none;
}
.c-header__hamburger span { display: block; width: 100%; height: 1.5px; background: var(--color-hokusei-blue); transition: transform .28s var(--ease), opacity .2s; }
.c-header__hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg) !important; }
.c-header__hamburger.is-open span:nth-child(2) { opacity: 0 !important; }
.c-header__hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg) !important; }
.c-header__hamburger.is-open { border-color: var(--color-hokusei-blue); }
/* 全画面オーバーレイ（is-open時のみ）— 通常時はインラインナビのまま */
.c-header__nav { transition: opacity .3s var(--ease), visibility .3s; }
.c-header__nav.is-open {
  position: fixed; inset: 0; z-index: 105; background: rgba(255,255,255,.98); backdrop-filter: blur(6px);
  flex-direction: column; justify-content: center; align-items: center; gap: 3.2rem;
  opacity: 1; visibility: visible;
}
.c-header__nav.is-open .c-header__nav-list { flex-direction: column; align-items: center; gap: 2.6rem; }
.c-header__nav.is-open .c-header__nav-link { font-size: 2.2rem; }
.c-header__nav.is-open .c-nav-has-sub { text-align: center; }
.c-header__nav.is-open .c-nav-sub {
  position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  box-shadow: none; border: none; background: transparent; padding: 0; margin: 1.4rem 0 0; min-width: 0;
  flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .6rem 1.8rem;
}
.c-header__nav.is-open .c-nav-sub::before { display: none; }
.c-header__nav.is-open .c-nav-sub__link { font-size: 1.6rem; padding: .6rem 0; }
.c-header__nav.is-open .c-nav-sub__link:hover { background: transparent; }
.c-header__nav.is-open .c-header__contact { margin-top: 1rem; }
/* オーバーレイ表示中はスクロール抑制の見た目安定のためロゴは残す（.c-headerは維持） */

/* ---- バナー：フェードインをサイト標準js-fadeinに委譲（is-in誤用の修正）2026-07-21t ---- */
.c-svc-banners .c-svc-banner { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.c-svc-banners.is-in .c-svc-banner { opacity: 1; transform: none; }

/* ---- バナーのホバーをCyberAgent流に（イージング 0.23,1,0.58,1／画像ズーム＋矢印スライド）2026-07-21u ---- */
.c-svc-banner__img { transition: transform .7s cubic-bezier(.23,1,.58,1) !important; }
.c-svc-banner__arrow { transition: background .4s cubic-bezier(.23,1,.58,1), color .4s cubic-bezier(.23,1,.58,1), transform .4s cubic-bezier(.23,1,.58,1) !important; }
@media (hover:hover){
  .c-svc-banner:hover .c-svc-banner__img { transform: scale(1.06); }
  /* 濁らせず、可読性のためのグラデはほぼ据え置き */
  .c-svc-banner:hover::before { background: linear-gradient(180deg, rgba(11,31,58,.10) 0%, rgba(11,31,58,.42) 55%, rgba(11,31,58,.82) 100%); }
  .c-svc-banner:hover .c-svc-banner__en,
  .c-svc-banner:hover .c-svc-banner__jp { transform: none !important; }
  .c-svc-banner:hover .c-svc-banner__arrow { background: #fff; color: var(--color-deep-navy); transform: translateX(.7rem); }
}

/* ---- バナー：ホバーで暗くならないように（明るさ優先）2026-07-21v ---- */
/* ベースの可読グラデを固定（下部は文字用にキープ、全体は明るめ） */
.c-svc-banner::before { background: linear-gradient(180deg, rgba(11,31,58,.04) 0%, rgba(11,31,58,.26) 48%, rgba(11,31,58,.72) 100%) !important; }
.c-svc-banner__img { transition: transform .7s cubic-bezier(.23,1,.58,1), filter .5s ease !important; }
@media (hover:hover){
  /* ホバー時：画像を少し明るく＋オーバーレイをむしろ薄く（＝見やすく） */
  .c-svc-banner:hover .c-svc-banner__img { transform: scale(1.06); filter: brightness(1.08) saturate(1.03); }
  .c-svc-banner:hover::before { background: linear-gradient(180deg, rgba(11,31,58,.02) 0%, rgba(11,31,58,.20) 48%, rgba(11,31,58,.66) 100%) !important; }
}

/* ---- バナー：下部にフロストガラス（ガウスぼかし）帯で文字を見やすく 2026-07-21w ---- */
/* 上部オーバーレイは控えめに（画像をシャープに見せる） */
.c-svc-banner::before { background: linear-gradient(180deg, rgba(11,31,58,0) 0%, rgba(11,31,58,.05) 55%, rgba(11,31,58,.14) 100%) !important; }
/* 下部＝文字帯：ガウスぼかし＋暗色グラデ。上端はマスクで自然にフェード */
.c-svc-banner::after {
  content: "" !important; display: block !important; opacity: 1 !important; pointer-events: none;
  position: absolute; left: 0; right: 0; bottom: 0; height: 60%; z-index: 1;
  background: linear-gradient(180deg, rgba(11,31,58,0) 0%, rgba(11,31,58,.34) 42%, rgba(11,31,58,.70) 100%);
  -webkit-backdrop-filter: blur(5px) saturate(1.05); backdrop-filter: blur(5px) saturate(1.05);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 44%); mask-image: linear-gradient(180deg, transparent 0%, #000 44%);
  transition: backdrop-filter .5s ease, -webkit-backdrop-filter .5s ease;
}
@media (hover:hover){
  .c-svc-banner:hover::before { background: linear-gradient(180deg, rgba(11,31,58,0) 0%, rgba(11,31,58,.03) 55%, rgba(11,31,58,.11) 100%) !important; }
  .c-svc-banner:hover .c-svc-banner__img { transform: scale(1.06); filter: brightness(1.06); }
  .c-svc-banner:hover::after { -webkit-backdrop-filter: blur(7px) saturate(1.06); backdrop-filter: blur(7px) saturate(1.06); }
}

/* ---- バナー：通常時は元の状態／ホバー時は暗くしない（フロスト撤去）FINAL 2026-07-21x ---- */
/* 下部フロスト帯を撤去（元に戻す） */
.c-svc-banner::after { display: none !important; }
/* 通常時のオーバーレイ＝元の可読グラデ */
.c-svc-banner::before { background: linear-gradient(180deg, rgba(11,31,58,.06) 0%, rgba(11,31,58,.34) 52%, rgba(11,31,58,.80) 100%) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.c-svc-banner__img { filter: none !important; transition: transform .7s cubic-bezier(.23,1,.58,1) !important; }
@media (hover:hover){
  /* ホバー時：オーバーレイは通常時と同一（＝暗くしない）。画像ズーム＋矢印スライドのみ */
  .c-svc-banner:hover::before { background: linear-gradient(180deg, rgba(11,31,58,.06) 0%, rgba(11,31,58,.34) 52%, rgba(11,31,58,.80) 100%) !important; }
  .c-svc-banner:hover .c-svc-banner__img { transform: scale(1.06); filter: none !important; }
  .c-svc-banner:hover .c-svc-banner__arrow { background: #fff; color: var(--color-deep-navy); transform: translateX(.7rem); }
}

/* ---- バナー：ホバーでテキストを明るい色（アクア）に点灯 2026-07-21y ---- */
.c-svc-banner__no, .c-svc-banner__tag, .c-svc-banner__en, .c-svc-banner__jp {
  transition: color .4s cubic-bezier(.23,1,.58,1), opacity .4s ease, border-color .4s ease;
}
@media (hover:hover){
  .c-svc-banner:hover .c-svc-banner__no { color: var(--color-aqua); opacity: 1; }
  .c-svc-banner:hover .c-svc-banner__tag { color: var(--color-aqua); border-color: var(--color-aqua); }
  .c-svc-banner:hover .c-svc-banner__jp { color: var(--color-aqua); opacity: 1; }
  .c-svc-banner:hover .c-svc-banner__en { color: #fff; text-shadow: 0 0 18px rgba(45,184,197,.5); }
}

/* ================================================================
   フッターCTA：PREVENT c-contact 忠実移植（お問い合わせのみ）2026-07-21z2
   出典: prevent.co.jp style.css 8836-9030 / hline01 9380- / c-hover icon-arrow
   ================================================================ */
.c-footcta { position: relative; margin-top: clamp(7rem, 10vw, 14rem); background: #EEF3F8; padding: 6rem 0 6rem; overflow: hidden; }
@media (min-width: 768px) { .c-footcta { padding: 10rem 0 10rem; } }
.c-footcta__wrap { position: relative; max-width: 132rem; margin-inline: auto; }
@media (min-width: 768px) { .c-footcta__wrap { display: grid; grid-template-columns: repeat(2, 1fr); } }

/* 左：白パネル（右上角のみ丸め・50vwで画面左端までフルブリード） */
.c-footcta__info { padding: 6rem 2.5rem; position: relative; z-index: 1; }
@media (min-width: 768px) { .c-footcta__info { display: flex; justify-content: center; padding: 8rem 5rem 10rem; } }
.c-footcta__info::before { content: ""; border-top-right-radius: 3rem; background-color: #fff; position: absolute; top: 0; right: 0; height: 100%; width: 100%; z-index: -1; }
@media (min-width: 768px) { .c-footcta__info::before { border-top-right-radius: 5rem; width: 50vw; } }
.c-footcta__body { max-width: 52rem; }

/* hline01: ◇英字小ラベル + 日本語大見出し */
.c-footcta__hline { margin-bottom: 3.8rem; }
@media (min-width: 768px) { .c-footcta__hline { margin-bottom: 8rem; } }
.c-footcta__hline-ttl { color: var(--color-aqua); display: flex; align-items: center; gap: .8rem; font-family: var(--font-en); font-size: 1.8rem; font-weight: 400; letter-spacing: .06em; margin-bottom: 1.3rem; }
@media (min-width: 768px) { .c-footcta__hline-ttl { gap: 1.3rem; font-size: 2.2rem; margin-bottom: 2.5rem; } }
.c-footcta__hline-ttl::before { content: ""; background-color: currentColor; border-radius: .2rem; aspect-ratio: 1; width: 1.2rem; transform: rotate(45deg); }
.c-footcta__hline-txt { display: block; color: var(--color-deep-navy); font-size: 2.6rem; font-weight: 600; letter-spacing: .02em; line-height: 1.615; }
@media (min-width: 768px) { .c-footcta__hline-txt { font-size: 3.6rem; line-height: 1.7778; letter-spacing: .12em; } }
.c-footcta__txt { color: var(--color-deep-navy); font-size: 1.6rem; letter-spacing: .04em; line-height: 1.8125; }
@media (min-width: 768px) { .c-footcta__txt { font-size: 1.5rem; line-height: 2.235; } }
@media (min-width: 1200px) { .c-footcta__txt { font-size: 1.7rem; } }

/* 右：グラデパネル（上+5rem/下-5remの段違い・左下角のみ丸め・50vwフルブリード） */
.c-footcta__nav { display: flex; flex-direction: column; justify-content: center; padding-inline: 2.5rem; position: relative; z-index: 1; list-style: none; margin: 0; }
@media (min-width: 768px) { .c-footcta__nav { position: absolute; top: 5rem; bottom: -5rem; right: 0; width: 50%; } }
@media (min-width: 1200px) { .c-footcta__nav { padding-inline: 7rem; } }
@media (max-width: 767px) { .c-footcta__nav { padding-block: 5rem 2.8rem; } }
.c-footcta__nav::before { content: ""; background: linear-gradient(135deg, #8ED4DA 0%, var(--color-aqua) 30%); border-bottom-left-radius: 3rem; position: absolute; top: 0; left: 0; bottom: -3rem; width: 100%; z-index: -1; }
@media (min-width: 768px) { .c-footcta__nav::before { border-bottom-left-radius: 5rem; bottom: 0; width: 50vw; } }
@media (min-width: 768px) { .c-footcta__nav > li { padding-inline: 3rem; } }

/* リンク：◇ + 大型英字(5rem/400) + 日本語 + 丸矢印 */
.c-footcta__link { color: #fff; display: flex; gap: .9rem; flex-direction: column; position: relative; padding-left: 3.2rem; padding-right: 6rem; transition: .3s ease; }
@media (min-width: 768px) { .c-footcta__link { gap: 1.7rem; } }
.c-footcta__link:hover { padding-left: 4.2rem; }
.c-footcta__link::before { content: ""; background-color: #fff; border-radius: .3rem; aspect-ratio: 1; width: 1.2rem; transform: rotate(45deg); position: absolute; left: 0; top: 1.5rem; }
.c-footcta__link-ttl { font-family: var(--font-en); font-size: 4rem; font-weight: 400; line-height: 1.28; letter-spacing: .06em; }
@media (min-width: 768px) { .c-footcta__link-ttl { font-size: 5rem; } }
.c-footcta__link-txt { font-size: 1.5rem; font-weight: 600; letter-spacing: .05em; }
@media (min-width: 768px) { .c-footcta__link-txt { font-size: 1.7rem; } }

/* 丸矢印：白円 + ダブル矢印スライドスルー */
.c-footcta__arrow { position: absolute; right: 0; top: 50%; transform: translateY(-50%); aspect-ratio: 1; background-color: #fff; border-radius: 50%; width: 4rem; overflow: hidden; }
@media (min-width: 768px) { .c-footcta__arrow { width: 5rem; } }
.c-footcta__arrow::before, .c-footcta__arrow::after { content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M8 1.2 12.8 6 8 10.8M12.8 6H1' fill='none' stroke='%232DB8C5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/0.9rem auto; height: 100%; width: 100%; transition: .3s ease; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
@media (min-width: 768px) { .c-footcta__arrow::before, .c-footcta__arrow::after { background-size: 1.1rem auto; } }
.c-footcta__arrow::before { transform: translate(-150%, -50%); }
.c-footcta__link:hover .c-footcta__arrow::before { transform: translate(-50%, -50%); }
.c-footcta__link:hover .c-footcta__arrow::after { transform: translate(100%, -50%); }

/* ================================================================
   コールアウト内・掲載メディア区画（metal 社長メッセージ下）2026-07-21z3
   ================================================================ */
.p-svc-detail.is-mock .c-callout__media { margin-top: 3rem; padding-top: 2.6rem; border-top: 1px solid rgba(7, 52, 137, .14); }
.p-svc-detail.is-mock .c-callout__media-hd { display: flex; align-items: center; gap: .9rem; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em; color: var(--color-deep-navy); margin-bottom: 1rem; }
.p-svc-detail.is-mock .c-callout__media-hd::before { content: ""; width: 1rem; aspect-ratio: 1; border-radius: .2rem; background: var(--color-aqua); transform: rotate(45deg); }
.p-svc-detail.is-mock .c-callout__media-tx { font-size: var(--fs-sm); line-height: 1.9; color: var(--color-deep-navy); margin-bottom: 1.6rem; }
.p-svc-detail.is-mock .c-callout__media .pv-pills { margin-top: 0; }
@media (max-width: 767px){ .p-svc-detail.is-mock .c-callout__media { margin-top: 2.4rem; padding-top: 2rem; } }

/* ================================================================
   フッターCTA：ホバーで文字色を変えない 2026-07-21z4
   style.css の本文リンク汎用ホバー a:not([class*="btn"])...:hover
   （詳細度0,4,1）がfootctaリンクにも効いて紺色化するため、
   詳細度0,5,0で白のまま固定する
   ================================================================ */
.c-footcta .c-footcta__wrap .c-footcta__nav .c-footcta__link:hover { color: #fff; }

/* ================================================================
   お問い合わせカード：ホバー時に上辺のアクセントバーを出さない 2026-07-22
   .c-info-card::before（上辺バー）がホバーで scaleX(1) するのを無効化。
   フラット・エディトリアルな見せ方に統一（About と同じ扱い）。
   ================================================================ */
.c-contact-cards .c-info-card::before { display: none !important; }

/* ================================================================
   お問い合わせカード：TEL/EMAIL をリンク化した際のアフォーダンス 2026-07-22
   タップで発信・メール作成できるリンク。押せると分かるようホバーで
   アクア色に。ADDRESS等リンクのない項目は変化しない。
   ================================================================ */
.c-contact-cards .c-info-card__title a { color: inherit; text-decoration: none; transition: color .2s var(--ease); }
@media (hover: hover) { .c-contact-cards .c-info-card__title a:hover { color: var(--color-aqua); } }

/* ================================================================
   全面写真ヒーロー c-hero-full（下層ページのトップビュー刷新）2026-07-22
   背景写真フルブリード＋紺グラデオーバーレイ＋白の大型タイポ。
   従来の中央寄せ c-page-header＋c-page-mv を置き換える。
   ================================================================ */
.c-hero-full { position: relative; min-height: clamp(44rem, 64vh, 58rem); display: flex; align-items: flex-end; overflow: hidden; background: var(--color-deep-navy); }
.c-hero-full__bg { position: absolute; inset: 0; z-index: 0; }
.c-hero-full__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-hero-full__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,31,58,.28) 0%, rgba(11,31,58,.42) 45%, rgba(11,31,58,.80) 100%); }
.c-hero-full__inner { position: relative; z-index: 1; width: 100%; color: #fff; padding-block: clamp(11rem, 16vh, 15rem) clamp(4.5rem, 8vh, 7rem); }
.c-hero-full .c-breadcrumb { margin-bottom: 2.6rem; }
.c-hero-full .c-breadcrumb, .c-hero-full .c-breadcrumb a { color: rgba(255,255,255,.82); opacity: 1; }
@media (hover:hover){ .c-hero-full .c-breadcrumb a:hover { color: #fff; } }
.c-hero-full .c-breadcrumb__sep { background: rgba(255,255,255,.5); }
.c-hero-full__kicker { font-size: var(--fs-base); letter-spacing: .24em; color: var(--color-aqua); margin-bottom: 1.6rem; }
.c-hero-full__title { font-family: var(--font-en); font-size: clamp(5.6rem, 11vw, 12rem); font-weight: 700; line-height: .92; letter-spacing: .01em; color: #fff; }
.c-hero-full__lead { margin-top: 2.2rem; font-size: var(--fs-lg); font-weight: 500; line-height: 1.9; letter-spacing: .04em; color: rgba(255,255,255,.92); max-width: 54rem; }
@media (max-width: 767px){ .c-hero-full { min-height: clamp(38rem, 72vh, 46rem); } .c-hero-full__inner { padding-block: 10rem 4rem; } .c-hero-full__lead { font-size: var(--fs-base); } }
/* c-hero-full 内のパンくずは絶対配置を解除して左上に置く（既存 .c-breadcrumb は右下固定のため） */
.c-hero-full .c-breadcrumb { position: static; right: auto; bottom: auto; justify-content: flex-start; }
/* c-hero-full：パンくずを最上部・見出し塊を最下部に分離（写真中間の低視認を回避） */
.c-hero-full { align-items: stretch; }
.c-hero-full__inner { min-height: inherit; display: flex; flex-direction: column; justify-content: space-between; }
.c-hero-full__body { display: block; }
.c-hero-full__bg::after { background: linear-gradient(180deg, rgba(11,31,58,.36) 0%, rgba(11,31,58,.46) 50%, rgba(11,31,58,.84) 100%); }

/* ================================================================
   フォーム送信ボタン（button要素）のホバー文字を白に 2026-07-22
   白文字ルールが a.c-btn-pill 限定で button に効かず、濃紺のドット
   フィル上に濃紺文字が沈んでいた（矢印だけ白）。button にも白文字を。
   ================================================================ */
.c-form__submit button.c-btn-pill:not(.c-btn-pill--fill):hover,
.c-form__submit button.c-btn-pill:not(.c-btn-pill--fill):focus-visible { color: #fff; }

/* ================================================================
   フォーム入力欄をサイトの丸角の世界観に合わせる 2026-07-22
   カード（16〜24px角丸）に対し入力欄が12pxで角ばって見えたため、
   input/textarea/select を 18px（1.8rem）の角丸に統一。
   ================================================================ */
.c-form__input,
.c-form__textarea,
.c-form__select { border-radius: 1.8rem; }
.c-form__textarea { border-radius: 1.8rem; }

/* ================================================================
   全面写真ヒーローを角丸フレーム化 2026-07-22
   フルブリード矩形だとサイトの角丸パネルの世界観から浮くため、
   左右に余白＋大きな角丸にして「背景に浮く角丸」に統一。
   fixedヘッダー分の上余白を確保し、内側paddingは控えめに。
   ================================================================ */
.c-hero-full {
  margin-inline: clamp(1.6rem, 3vw, 4rem);
  margin-top: clamp(8.5rem, 12vh, 11rem);
  border-radius: clamp(2.2rem, 3vw, 3.2rem);
  min-height: clamp(40rem, 56vh, 50rem);
}
.c-hero-full__inner { padding-block: clamp(3.6rem, 5vh, 5.2rem); }
@media (max-width: 767px) {
  .c-hero-full { margin-inline: 1.2rem; margin-top: 8rem; border-radius: 1.8rem; min-height: clamp(34rem, 58vh, 42rem); }
  .c-hero-full__inner { padding-block: 3rem; }
}

/* ================================================================
   グループ会社ロゴ：ホバー時の浮き上がりを無効化 2026-07-22
   .c-groupco:hover の translateY(-5px) を止め、静止させる。
   （★の常時トゥインクルは装飾として維持）
   ================================================================ */
.c-groupco { transition: none; }
@media (hover: hover) { .c-groupco:hover { transform: none; } }

/* 用途カード（pv-fields）の直前にあるリード文が、カードと密着していた不具合を修正 2026-07-26 */
.p-svc-detail.is-mock .pv-ex__txt + .pv-fields { margin-top: clamp(3.2rem, 4vw, 4.8rem); }

/* 拠点ネットワーク図：図版なので切り取らず全体を見せる（写真枠は cover のまま維持） 2026-07-27 */
.p-svc-detail.is-mock .c-ppost__img:has(img[src*="group-network-map"]) {
  background: #FFFFFF;
}
.p-svc-detail.is-mock .c-ppost__img img[src*="group-network-map"] {
  object-fit: contain;
  padding: clamp(0.6rem, 1.2vw, 1.6rem);
}