@charset "UTF-8";
/* ==========================================================
   超音波研究所 ページ専用CSS（ul- 接頭辞）／ v9 2026-10-29
   置き場所：/Portals/0/css/article/us-lab/ultrasonic-lab.css
   ブレークポイント：max-width: 760px（SP）／ max-width: 1100px（中間幅）
   ========================================================== */

:root {
  /* 色 */
  --ul-color-brand: #AA0061;
  --ul-color-brand-tint: #FCF3F7;
  --ul-color-brand-tint-border: #F0D5E2;
  --ul-color-text-heading: #2B2B2E;
  --ul-color-text-body: #57575A;
  --ul-color-text-muted: #97999C;
  --ul-color-text-faint: #BCBDC0;
  --ul-color-text-on-brand: #FFFFFF;
  --ul-color-surface: #FFFFFF;
  --ul-color-surface-sunken: #F5F5F6;
  --ul-color-border: #DEDFE1;
  /* 影・角丸 */
  --ul-shadow-card: 0 1px 3px rgba(43, 43, 46, 0.08);
  --ul-shadow-card-hover: 0 8px 20px rgba(43, 43, 46, 0.12);
  --ul-radius-sm: 3px;
  --ul-radius-md: 4px;
  /* フォント */
  --ul-font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  /* ページ固有のレイアウト値（SPで上書き） */
  --ul-prose-max: 780px;
  --ul-section-pad: 128px;
  --ul-section-pad-wide: 160px;
  --ul-block-top: 64px;
  --ul-box-pad: 40px;
  --ul-card-pad: 32px;
  --ul-col-gap: 72px;
  --ul-h1: 60px;
  --ul-h2: 34px;
  --ul-lead: 16px;
  /* 目次から飛んだときの停止位置（サイト共通ヘッダーの高さ＋余白） */
  --ul-anchor-offset: 144px;
}

@media (max-width: 760px) {
  :root {
    --ul-section-pad: 72px;
    --ul-section-pad-wide: 88px;
    --ul-block-top: 40px;
    --ul-box-pad: 24px;
    --ul-card-pad: 24px;
    --ul-col-gap: 40px;
    --ul-h1: 36px;
    --ul-h2: 24px;
    --ul-lead: 15px;
  }
}

/* ---------- サイト共通CSSの打ち消し（このページ内だけ） ----------
   サイト共通CSS（contents.css 等）は h1〜h4・p・ul・li に装飾や余白を付けている。
   :where() で詳細度を要素セレクタと同じにし、サイト共通CSSには勝ち、下のクラス指定には負けるようにしている。 */
:where(.ul-page) h1,
:where(.ul-page) h2,
:where(.ul-page) h3,
:where(.ul-page) h4 { position: static; margin: 0; padding: 0; letter-spacing: normal; line-height: inherit; color: inherit; }
:where(.ul-page) h1::before,
:where(.ul-page) h3::before,
:where(.ul-page) h4::before { content: none; }
:where(.ul-page) h2::first-letter { font-size: inherit; color: inherit; }
:where(.ul-page) p { margin: 0; padding: 0; }
:where(.ul-page) ul,
:where(.ul-page) ol { margin: 0; padding: 0; }
:where(.ul-page) li { margin: 0; padding: 0; }

/* ---------- 文字サイズ切替（サイト共通の「小・中・大」） ----------
   サイトは body に fontSize1〜3 を付け、本文を 87.5%／100%／112% にする。
   このページの文字サイズはすべて「px × --ul-fs」で指定し、同じ倍率で拡大縮小する。
   「中」（fontSize2、または切替未設定）は倍率1で、px指定のときと同じ表示になる。 */
.ul-page { --ul-fs: 1; }
.fontSize1 .ul-page { --ul-fs: 0.875; }
.fontSize3 .ul-page { --ul-fs: 1.12; }

/* ---------- 共通 ---------- */
.ul-page { background: var(--ul-color-surface); font-family: var(--ul-font-sans); font-size: calc(16px * var(--ul-fs)); line-height: normal; color: var(--ul-color-text-body); -webkit-font-smoothing: antialiased; }
.ul-page *, .ul-page *::before, .ul-page *::after { box-sizing: border-box; }
/* 横幅と左右の余白はサイト共通の .inner（PC 1200px／SP 左右 5.34%）に任せる */
.ul-container { margin: 0 auto; padding: 0; }
.ul-section { padding: var(--ul-section-pad) 0; scroll-margin-top: var(--ul-anchor-offset); }
.ul-section--wide { padding: var(--ul-section-pad-wide) 0; }

/* 背景と罫線を画面の端まで伸ばす。
   box-shadow と clip-path は描画だけが外にはみ出し、レイアウトの幅は増えないため、横スクロールが出ない */
.ul-section--rule { position: relative; border-top: 1px solid var(--ul-color-border); }
.ul-section--rule::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--ul-color-border); box-shadow: 0 0 0 100vmax var(--ul-color-border); clip-path: inset(0 -100vmax); }
.ul-section--sunken { background: var(--ul-color-surface-sunken); box-shadow: 0 0 0 100vmax var(--ul-color-surface-sunken); clip-path: inset(0 -100vmax); }

.ul-overline { display: flex; align-items: center; gap: 12px; font-size: calc(12px * var(--ul-fs)); font-weight: 700; letter-spacing: 0.18em; color: var(--ul-color-brand); }
.ul-overline__rule { width: 24px; height: 1px; background: var(--ul-color-brand); }
.ul-overline--hero { letter-spacing: 0.22em; }
.ul-overline--hero .ul-overline__rule { width: 32px; }

.ul-heading { margin: 16px 0 0; font-size: calc(var(--ul-h2) * var(--ul-fs)); font-weight: 700; line-height: 1.4; letter-spacing: 0.02em; color: var(--ul-color-text-heading); }
.ul-lead { margin: 24px 0 0; max-width: var(--ul-prose-max); font-size: calc(var(--ul-lead) * var(--ul-fs)); line-height: 1.9; text-wrap: pretty; }
.ul-prose { margin: 0; max-width: var(--ul-prose-max); font-size: calc(15px * var(--ul-fs)); line-height: 1.9; text-wrap: pretty; }
.ul-strong { color: var(--ul-color-text-heading); font-weight: 700; }

.ul-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ul-more { display: inline-flex; align-items: center; gap: 12px; font-size: calc(14px * var(--ul-fs)); font-weight: 700; color: var(--ul-color-text-heading); text-decoration: none; }
.ul-more__arrow { color: var(--ul-color-brand); }
.ul-more--underline { padding-bottom: 6px; border-bottom: 1px solid var(--ul-color-text-heading); white-space: nowrap; justify-self: start; transition: color .2s ease, border-color .2s ease; }
.ul-more--underline:hover { color: var(--ul-color-brand) !important; border-color: var(--ul-color-brand); }

/* フォームへのページ内リンク（セクション2・5）。矢印は目次と同じ下向きにし、外部リンクの「詳しく見る →」と区別する
   通常：白地用。文字と下線はインク色、矢印はマゼンタ。ホバーで文字と下線もマゼンタ（「詳しく見る」と同じ反応）
   --ink：マゼンタ系の地（受けブロック）用。文字・矢印・下線ともインク色で、ホバーでも色は変えない */
.ul-formlink { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding-bottom: 4px; border-bottom: 1px solid var(--ul-color-text-heading); font-size: calc(14px * var(--ul-fs)); font-weight: 700; line-height: 1.5; color: var(--ul-color-text-heading); text-decoration: none; transition: color .2s ease, border-color .2s ease; }
.ul-formlink__arrow { color: var(--ul-color-brand); transition: transform .2s ease; }
.ul-formlink:hover { color: var(--ul-color-brand) !important; border-color: var(--ul-color-brand); }
.ul-formlink:hover .ul-formlink__arrow { transform: translateY(3px); }
.ul-formlink--ink .ul-formlink__arrow { color: var(--ul-color-text-heading); }
.ul-formlink--ink:hover { color: var(--ul-color-text-heading) !important; border-color: var(--ul-color-text-heading); }

/* ---------- FV ---------- */
.ul-hero { padding: 40px 0 112px; }
.ul-hero__title { margin: 20px 0 0; font-size: calc(var(--ul-h1) * var(--ul-fs)); font-weight: 700; line-height: 1.25; letter-spacing: 0.04em; color: var(--ul-color-text-heading); }
.ul-hero__lead { margin: 40px 0 0; max-width: var(--ul-prose-max); font-size: calc(17px * var(--ul-fs)); line-height: 1.9; color: var(--ul-color-text-heading); text-wrap: pretty; }
.ul-hero__catch { display: inline-block; margin-bottom: 16px; font-size: calc(24px * var(--ul-fs)); font-weight: 700; line-height: 1.6; }

.ul-toc { margin-top: 88px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; border-top: 1px solid var(--ul-color-text-heading); }
.ul-toc__item { display: flex; align-items: baseline; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--ul-color-border); text-decoration: none; color: var(--ul-color-text-heading); font-size: calc(14px * var(--ul-fs)); font-weight: 500; line-height: 1.6; transition: color .2s ease; }
/* 【!important の理由】サイト共通の背景色切替（jquery.fontSize.js の fontColor）が、ページ表示時に
   .skinWrapper 内の全要素へ、その時点の文字色をインラインの style として書き込む。
   インラインの style には通常の指定では勝てないため、ホバーで文字色を変える指定にだけ !important を付ける。
   子要素（項目名など）にも個別に書き込まれるので、色を変えたい要素それぞれに指定する */
.ul-toc__item:hover,
.ul-toc__item:hover .ul-toc__label { color: var(--ul-color-brand) !important; }
.ul-toc__num { flex: none; font-size: calc(12px * var(--ul-fs)); font-weight: 700; letter-spacing: 0.08em; color: var(--ul-color-brand); }
.ul-toc__label { flex: 1; }
.ul-toc__arrow { flex: none; color: var(--ul-color-text-muted); }

/* ---------- 01 概要 ---------- */
.ul-overview { margin-top: var(--ul-block-top); display: grid; grid-template-columns: minmax(0, 780px) minmax(260px, 1fr); gap: var(--ul-col-gap); align-items: start; }
.ul-overview__main { min-width: 0; max-width: var(--ul-prose-max); }
.ul-overview__side { min-width: 0; }
.ul-overview__prose { margin-top: 48px; }

.ul-def { border: 1px solid var(--ul-color-text-heading); border-radius: 2px; padding: var(--ul-box-pad); display: grid; gap: 16px; }
.ul-def__overline { font-size: calc(12px * var(--ul-fs)); font-weight: 700; letter-spacing: 0.18em; color: var(--ul-color-text-muted); }
.ul-def__title { margin: 10px 0 0; font-size: calc(20px * var(--ul-fs)); font-weight: 700; line-height: 1.4; color: var(--ul-color-text-heading); }
.ul-def__text { margin: 0; font-size: calc(15px * var(--ul-fs)); line-height: 1.9; color: var(--ul-color-text-heading); text-wrap: pretty; }

/* PART 1 流れ図 */
.ul-flow { margin: 40px 0; }
.ul-flow__lead { margin: 0 0 20px; font-size: calc(17px * var(--ul-fs)); font-weight: 700; line-height: 1.6; color: var(--ul-color-text-heading); }
.ul-flow__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; }
.ul-flow__step { border: 1px solid var(--ul-color-text-faint); background: var(--ul-color-surface); padding: 22px 20px; text-align: center; }
.ul-flow__num { display: inline-block; margin-bottom: 8px; font-size: calc(11px * var(--ul-fs)); font-weight: 700; letter-spacing: .1em; color: var(--ul-color-text-muted); }
.ul-flow__title { display: block; margin-bottom: 6px; font-size: calc(18px * var(--ul-fs)); font-weight: 700; line-height: 1.45; color: var(--ul-color-text-heading); }
.ul-flow__note { display: block; font-size: calc(13px * var(--ul-fs)); line-height: 1.7; color: var(--ul-color-text-muted); }
.ul-flow__step--unseen { border-style: dashed; border-color: var(--ul-color-brand); background: var(--ul-color-brand-tint-border); }
.ul-flow__step--unseen .ul-flow__num,
.ul-flow__step--unseen .ul-flow__title,
.ul-flow__step--unseen .ul-flow__note { color: var(--ul-color-brand); }
/* 箱03の見出しは「対象に届く／エネルギー」でだけ折り返す（文字サイズ「大」で1行に収まらないため）。
   keep-all で文字間の折り返しを止め、HTML側の <wbr> の位置だけで折れるようにしている */
.ul-flow__step--unseen .ul-flow__title { word-break: keep-all; }
/* 箱02の添え書きは「変換の度合いは／構成によって変わる」で折り返す（「る」1文字だけが次行に回るのを防ぐ）。
   かたまりごとに inline-block にし、通常はかたまりの間で折れ、1つのかたまりが入りきらないときだけ中で折れる。
   keep-all は使わない（「大」で折る場所がなくなり、箱からはみ出すおそれがあるため） */
.ul-flow__chunk { display: inline-block; }
/* 矢印：横向き（PC） */
.ul-flow__arrow { position: relative; align-self: center; width: 34px; height: 10px; }
.ul-flow__arrow::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 2px; background: var(--ul-color-text-faint); }
.ul-flow__arrow::after { content: ""; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--ul-color-text-faint); }
.ul-flow__arrow--thin::before { height: 1px; background: var(--ul-color-border); }
.ul-flow__arrow--thin::after { border-top-width: 4px; border-bottom-width: 4px; border-left-color: var(--ul-color-border); }
.ul-flow figcaption { display: block; }
.ul-flow__close { display: block; margin-top: 20px; font-size: calc(17px * var(--ul-fs)); font-weight: 700; line-height: 1.6; color: var(--ul-color-text-heading); }
.ul-flow__caption { display: block; margin-top: 8px; font-size: calc(12.5px * var(--ul-fs)); line-height: 1.8; color: var(--ul-color-text-muted); }

/* 相談の入口（こんな段階からご相談いただけます） */
.ul-stage { margin-bottom: 16px; border: 1px solid var(--ul-color-border); background: var(--ul-color-surface-sunken); padding: 22px 24px; }
.ul-stage__title { margin: 0 0 14px; font-size: calc(14px * var(--ul-fs)); font-weight: 700; letter-spacing: .02em; color: var(--ul-color-text-heading); }
.ul-stage__list { list-style: none; margin: 0; padding: 0; }
.ul-stage__item { padding: 10px 0; border-top: 1px solid var(--ul-color-border); font-size: calc(14px * var(--ul-fs)); line-height: 1.75; color: var(--ul-color-text-heading); }
.ul-stage__item:first-child { padding-top: 0; border-top: 0; }

/* PART 2 このページで分かること */
.ul-learn { border: 1px solid var(--ul-color-border); background: var(--ul-color-surface-sunken); padding: 22px 24px; }
.ul-learn__title { margin: 0 0 14px; font-size: calc(14px * var(--ul-fs)); font-weight: 700; letter-spacing: .02em; color: var(--ul-color-text-heading); }
.ul-learn__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.ul-learn__item { position: relative; padding-left: 26px; font-size: calc(14px * var(--ul-fs)); line-height: 1.75; color: var(--ul-color-text-heading); }
.ul-learn__item::before { content: ""; position: absolute; left: 4px; top: .55em; width: 9px; height: 5px; border-left: 2px solid var(--ul-color-text-muted); border-bottom: 2px solid var(--ul-color-text-muted); transform: rotate(-45deg); }

.ul-note { margin-top: var(--ul-block-top); background: var(--ul-color-text-heading); color: var(--ul-color-text-on-brand); border-radius: 2px; padding: 48px 56px; display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 56px; align-items: start; }
.ul-note__title { margin: 0; font-size: calc(22px * var(--ul-fs)); font-weight: 700; line-height: 1.5; color: var(--ul-color-text-on-brand); }
.ul-note__text { margin: 0; max-width: var(--ul-prose-max); font-size: calc(15px * var(--ul-fs)); line-height: 1.9; color: var(--ul-color-text-on-brand); text-wrap: pretty; }

/* ---------- 02 よくある行き詰まり ---------- */
.ul-group { margin-top: var(--ul-block-top); }
.ul-group--second { margin-top: 56px; }
.ul-group__title { margin: 0; display: flex; align-items: center; gap: 14px; font-size: calc(22px * var(--ul-fs)); font-weight: 700; line-height: 1.5; color: var(--ul-color-text-heading); }
.ul-group__rule { flex: none; width: 24px; height: 2px; background: var(--ul-color-text-heading); }
.ul-group__grid { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ul-concern { background: var(--ul-color-surface); border: 1px solid var(--ul-color-border); border-radius: var(--ul-radius-md); box-shadow: var(--ul-shadow-card); padding: var(--ul-card-pad); display: flex; flex-direction: column; gap: 16px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.ul-concern:hover { border-color: var(--ul-color-text-heading); box-shadow: var(--ul-shadow-card-hover); transform: translateY(-3px); }
.ul-concern__head { display: flex; align-items: center; gap: 10px; }
.ul-concern__num { font-size: calc(28px * var(--ul-fs)); font-weight: 300; line-height: 1; letter-spacing: 0.02em; color: var(--ul-color-text-faint); }
.ul-concern__rule { flex: 1; height: 1px; background: var(--ul-color-border); }
.ul-concern__title { margin: 0; font-size: calc(18px * var(--ul-fs)); font-weight: 700; line-height: 1.5; color: var(--ul-color-text-heading); }
.ul-concern__text { margin: 0; font-size: calc(14px * var(--ul-fs)); line-height: 1.9; text-wrap: pretty; }

/* 収束ライン：コンテンツ幅いっぱいの横線 → 中央のマゼンタ縦線が結論ボックスに接する */
.ul-converge { position: relative; height: 65px; }
.ul-converge::before { content: ""; position: absolute; top: 24px; left: 0; right: 0; height: 1px; background: var(--ul-color-text-faint); }
.ul-converge::after { content: ""; position: absolute; top: 25px; left: 50%; width: 1px; height: 40px; background: var(--ul-color-brand); }

.ul-conclusion { background: var(--ul-color-brand-tint); border: 1px solid var(--ul-color-brand-tint-border); border-radius: var(--ul-radius-md); padding: var(--ul-box-pad); text-align: center; }
.ul-conclusion__text { margin: 0; font-size: calc(15px * var(--ul-fs)); line-height: 1.9; color: var(--ul-color-text-heading); text-wrap: pretty; }
.ul-conclusion__head { display: inline-block; margin-bottom: 12px; font-size: calc(21px * var(--ul-fs)); font-weight: 700; line-height: 1.6; }

/* ---------- 03 向きやすい条件・向きにくい条件 ---------- */
.ul-scale { margin-top: var(--ul-block-top); background: var(--ul-color-surface); border: 1px solid var(--ul-color-border); border-radius: var(--ul-radius-md); }
.ul-scale__axis { display: flex; align-items: center; gap: 16px; padding: 20px 32px; border-bottom: 1px solid var(--ul-color-border); }
.ul-scale__axis-label { flex: none; font-size: calc(13px * var(--ul-fs)); font-weight: 700; letter-spacing: 0.04em; color: var(--ul-color-text-heading); }
.ul-scale__axis-label--muted { color: var(--ul-color-text-muted); }
.ul-scale__axis-line { position: relative; flex: 1; height: 1px; background: var(--ul-color-text-faint); }
.ul-scale__axis-line::after { content: ""; position: absolute; right: -1px; top: -4px; border-left: 7px solid var(--ul-color-text-faint); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.ul-scale__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ul-scale__col { padding: var(--ul-card-pad); }
.ul-scale__col + .ul-scale__col { border-left: 1px solid var(--ul-color-border); }
.ul-scale__bars { display: flex; align-items: flex-end; gap: 4px; height: 28px; }
.ul-scale__bar { width: 10px; background: var(--ul-color-border); }
.ul-scale__bar--1 { height: 12px; }
.ul-scale__bar--2 { height: 20px; }
.ul-scale__bar--3 { height: 28px; }
.ul-scale__bar--on { background: var(--ul-color-text-heading); }
.ul-scale__bar--brand { background: var(--ul-color-brand); }
.ul-scale__label { margin-top: 16px; font-size: calc(19px * var(--ul-fs)); font-weight: 700; line-height: 1.5; color: var(--ul-color-text-heading); }
.ul-scale__label--brand { color: var(--ul-color-brand); }
.ul-scale__list { margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.ul-scale__item { position: relative; padding-left: 24px; font-size: calc(14px * var(--ul-fs)); line-height: 1.85; color: var(--ul-color-text-heading); }
.ul-scale__item::before { content: ""; position: absolute; left: 0; top: calc(13px * var(--ul-fs)); width: 12px; height: 1px; background: var(--ul-color-text-heading); }
.ul-scale__after { margin-top: 40px; color: var(--ul-color-text-heading); }

/* ---------- 04 相談テーマ ---------- */
.ul-themes-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--ul-col-gap); align-items: start; }
.ul-themes { border-top: 1px solid var(--ul-color-text-heading); padding-top: 24px; }
.ul-themes__title { margin-bottom: 24px; font-size: calc(14px * var(--ul-fs)); font-weight: 700; color: var(--ul-color-text-heading); }
.ul-themes__group + .ul-themes__group { margin-top: 22px; }
.ul-themes__label { margin: 0 0 10px; padding-left: 10px; border-left: 3px solid var(--ul-color-text-faint); font-size: calc(12.5px * var(--ul-fs)); font-weight: 700; letter-spacing: .06em; line-height: 1.5; color: var(--ul-color-text-muted); }
.ul-themes__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ul-themes__tag { border: 1px solid var(--ul-color-text-faint); background: var(--ul-color-surface); padding: 6px 14px; font-size: calc(13.5px * var(--ul-fs)); line-height: 1.5; color: var(--ul-color-text-body); }
.ul-themes__group--approach .ul-themes__label { border-left-color: var(--ul-color-brand); color: var(--ul-color-brand); }
.ul-themes__group--approach .ul-themes__tag { border-color: var(--ul-color-brand); background: var(--ul-color-brand-tint); color: var(--ul-color-brand); }

/* ---------- 05 ご相談の流れ ---------- */
.ul-steps { margin: 64px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ul-steps__item { position: relative; padding-right: 28px; }
/* 横の連結線と矢印（PC） */
.ul-steps__item::before { content: ""; position: absolute; left: 56px; right: 10px; top: 28px; height: 1px; background: var(--ul-color-text-faint); }
/* 矢じりは clip-path で三角に切り抜く。枠線で描くと 4.5px が 4px に切り捨てられ、線に対して上下非対称になるため。
   高さ9px（24〜33px）で、1pxの線（28〜29px）に対して上下対称。先端は次の STEP の箱から6px離す */
.ul-steps__item::after { content: ""; position: absolute; right: 6px; top: 24px; width: 8px; height: 9px; background: var(--ul-color-text-faint); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ul-steps__item:last-child::before,
.ul-steps__item:last-child::after { display: none; }
.ul-steps__node { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: var(--ul-radius-sm); background: var(--ul-color-text-heading); color: var(--ul-color-text-on-brand); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ul-steps__item--first .ul-steps__node { background: var(--ul-color-brand); }
.ul-steps__node-label { font-size: calc(9px * var(--ul-fs)); font-weight: 700; letter-spacing: 0.16em; }
.ul-steps__node-num { margin-top: 4px; font-size: calc(22px * var(--ul-fs)); font-weight: 700; }
.ul-steps__body { min-width: 0; }
.ul-steps__title { margin: 28px 0 0; font-size: calc(19px * var(--ul-fs)); font-weight: 700; line-height: 1.4; color: var(--ul-color-text-heading); }
.ul-steps__text { margin: 12px 0 0; font-size: calc(14px * var(--ul-fs)); line-height: 1.9; text-wrap: pretty; }
.ul-steps__after { margin: 56px 0 0; font-size: calc(16px * var(--ul-fs)); font-weight: 700; line-height: 1.8; color: var(--ul-color-text-heading); }

.ul-guide { margin-top: var(--ul-block-top); border: 1px solid var(--ul-color-border); border-radius: var(--ul-radius-md); padding: var(--ul-box-pad); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.ul-guide__title { margin: 0; font-size: calc(18px * var(--ul-fs)); font-weight: 700; line-height: 1.5; color: var(--ul-color-text-heading); }
.ul-guide__text { margin: 12px 0 0; max-width: var(--ul-prose-max); font-size: calc(14px * var(--ul-fs)); line-height: 1.9; text-wrap: pretty; }
.ul-guide__link { color: var(--ul-color-text-heading); text-decoration: underline; text-underline-offset: 3px; }
/* サイト共通CSSの a:hover（下線を消す）に負けないよう、ここで下線を指定し直す */
.ul-guide__link:hover { color: var(--ul-color-brand) !important; text-decoration: underline; }

/* ---------- 06 よくあるご質問 ---------- */
.ul-faq-layout { display: grid; grid-template-columns: minmax(200px, 320px) minmax(0, 1fr); gap: var(--ul-col-gap); align-items: start; }
.ul-faq__item { border: 1px solid var(--ul-color-border); border-radius: var(--ul-radius-md); background: var(--ul-color-surface); overflow: hidden; }
.ul-faq__item + .ul-faq__item { margin-top: 8px; }
.ul-faq__q { list-style: none; cursor: pointer; display: flex; gap: 14px; align-items: flex-start; padding: 17px 18px; font-size: calc(15px * var(--ul-fs)); font-weight: 700; line-height: 1.6; color: var(--ul-color-text-heading); }
.ul-faq__q::-webkit-details-marker { display: none; }
.ul-faq__mark { flex: none; font-size: calc(15px * var(--ul-fs)); font-weight: 900; color: var(--ul-color-brand); }
.ul-faq__q-text { flex: 1; }
.ul-faq__icon { position: relative; flex: none; width: 20px; height: 20px; }
.ul-faq__icon::before { content: ""; position: absolute; left: 3px; right: 3px; top: 9px; height: 2px; background: var(--ul-color-brand); }
.ul-faq__icon::after { content: ""; position: absolute; top: 3px; bottom: 3px; left: 9px; width: 2px; background: var(--ul-color-brand); transition: transform .25s ease, opacity .25s ease; }
.ul-faq__item[open] .ul-faq__icon::after { transform: rotate(90deg); opacity: 0; }
.ul-faq__a { padding: 0 18px 18px 46px; font-size: calc(14px * var(--ul-fs)); line-height: 1.9; color: var(--ul-color-text-body); }
.ul-faq__a p { margin: 0; }

/* ---------- 07 対応体制 ---------- */
.ul-support { margin-top: var(--ul-block-top); display: grid; grid-template-columns: minmax(0, 400px) minmax(360px, 1fr); gap: var(--ul-col-gap); align-items: start; }
.ul-collab { border: 1px solid var(--ul-color-text-heading); border-radius: 2px; padding: var(--ul-box-pad); }
.ul-collab__overline { font-size: calc(12px * var(--ul-fs)); font-weight: 700; letter-spacing: 0.14em; line-height: 1.6; color: var(--ul-color-text-muted); }
.ul-collab__title { margin: 10px 0 0; font-size: calc(20px * var(--ul-fs)); font-weight: 700; line-height: 1.4; color: var(--ul-color-text-heading); }
.ul-collab__text { margin: 16px 0 0; font-size: calc(15px * var(--ul-fs)); line-height: 1.9; color: var(--ul-color-text-heading); text-wrap: pretty; }

.ul-areas { width: 100%; border-collapse: collapse; }
.ul-areas__head th { padding: 0 0 12px; border-bottom: 1px solid var(--ul-color-text-heading); text-align: left; font-size: calc(12px * var(--ul-fs)); font-weight: 700; letter-spacing: 0.08em; color: var(--ul-color-text-muted); }
.ul-areas__head th:first-child { width: 220px; padding-right: 24px; }
.ul-areas__key,
.ul-areas__val { padding: 22px 0; border-bottom: 1px solid var(--ul-color-border); text-align: left; vertical-align: top; }
.ul-areas__key { width: 220px; padding-right: 24px; font-size: calc(16px * var(--ul-fs)); font-weight: 700; line-height: 1.6; color: var(--ul-color-text-heading); }
.ul-areas__val { font-size: calc(14px * var(--ul-fs)); font-weight: 400; line-height: 1.9; text-wrap: pretty; }

/* ---------- 08 技術資料 ---------- */
.ul-docs { margin-top: 88px; gap: 40px; }
.ul-doc { text-decoration: none; color: inherit; background: var(--ul-color-surface); border: 1px solid var(--ul-color-border); border-radius: var(--ul-radius-md); box-shadow: var(--ul-shadow-card); padding: 40px 36px; display: flex; flex-direction: column; gap: 16px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
/* サイト共通CSSの a:hover（文字をマゼンタにする）を打ち消す */
.ul-doc:hover { color: inherit; border-color: var(--ul-color-text-heading); box-shadow: var(--ul-shadow-card-hover); transform: translateY(-3px); }
.ul-doc__num { font-size: calc(12px * var(--ul-fs)); font-weight: 700; letter-spacing: 0.12em; color: var(--ul-color-text-muted); }
.ul-doc__title { margin: 0; font-size: calc(19px * var(--ul-fs)); font-weight: 700; line-height: 1.4; color: var(--ul-color-text-heading); }
.ul-doc__text { margin: 0; flex: 1; font-size: calc(14px * var(--ul-fs)); line-height: 1.9; text-wrap: pretty; }
.ul-doc .ul-more { margin-top: 12px; }

/* ---------- 09 ご相談フォーム（外枠のみ） ---------- */
.ul-form { margin: var(--ul-block-top) auto 0; max-width: 960px; background: var(--ul-color-surface); border: 1px solid var(--ul-color-border); border-radius: var(--ul-radius-md); padding: 56px 64px; }

/* ---------- 関連情報 ---------- */
.ul-related { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; border-top: 1px solid var(--ul-color-text-heading); }
.ul-related__item { text-decoration: none; color: inherit; padding: 32px 0; border-bottom: 1px solid var(--ul-color-border); display: flex; flex-direction: column; gap: 12px; }
/* ホバー：タイトルだけマゼンタにする。本文は変えない。
   サイト共通CSSの a:hover（カード全体の文字をマゼンタにする）は color: inherit で打ち消す */
.ul-related__item:hover { color: inherit; }
.ul-related__title { margin: 0; font-size: calc(17px * var(--ul-fs)); font-weight: 700; color: var(--ul-color-text-heading); transition: color .2s ease; }
.ul-related__item:hover .ul-related__title { color: var(--ul-color-brand) !important; }
.ul-related__text { margin: 0; flex: 1; font-size: calc(14px * var(--ul-fs)); line-height: 1.9; text-wrap: pretty; }

/* ---------- 中間幅（761〜1100px）：見出し＋本文の2カラムは縦積み ---------- */
@media (max-width: 1100px) {
  :root { --ul-col-gap: 48px; }
  .ul-overview { grid-template-columns: 1fr; }
  .ul-overview__side { display: contents; }
  .ul-stage { order: -1; margin-bottom: 0; }
  .ul-learn { order: 1; }
  .ul-faq-layout,
  .ul-support { grid-template-columns: 1fr; }
  .ul-areas__head th:first-child,
  .ul-areas__key { width: 200px; }
}

/* ==========================================================
   SP（max-width: 760px）
   ========================================================== */
@media (max-width: 760px) {
  /* FV */
  .ul-hero { padding: 40px 0 56px; }
  .ul-hero__lead { font-size: calc(15px * var(--ul-fs)); }
  .ul-hero__catch { font-size: calc(19px * var(--ul-fs)); }
  .ul-toc { margin-top: 48px; grid-template-columns: 1fr; }

  /* 01：1カラム（1100px以下で適用済み）。入口の囲み → 本文 → 分かること の順 */
  .ul-overview__prose { margin-top: 40px; }
  /* 流れ図：縦積み、矢印は下向き */
  .ul-flow { margin: 32px 0; }
  .ul-flow__lead,
  .ul-flow__close { font-size: calc(15px * var(--ul-fs)); }
  .ul-flow__steps { grid-template-columns: 1fr; }
  .ul-flow__arrow { align-self: auto; width: 100%; height: 30px; }
  .ul-flow__arrow::before { left: 50%; top: 4px; transform: translateX(-50%); width: 2px; height: 16px; }
  .ul-flow__arrow::after { left: 50%; right: auto; top: auto; bottom: 2px; transform: translateX(-50%); border-top: 8px solid var(--ul-color-text-faint); border-bottom: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; }
  .ul-flow__arrow--thin::before { width: 1px; }
  .ul-flow__arrow--thin::after { border-top-color: var(--ul-color-border); border-left-width: 4px; border-right-width: 4px; }
  .ul-note { padding: 28px 24px; grid-template-columns: 1fr; gap: 16px; }
  .ul-note__title { font-size: calc(19px * var(--ul-fs)); }

  /* 02：2列 → 1列、小見出しは残す、収束ラインは非表示 */
  .ul-grid3,
  .ul-group__grid { grid-template-columns: 1fr; }
  .ul-group--second { margin-top: 40px; }
  .ul-group__title { font-size: calc(19px * var(--ul-fs)); }
  .ul-converge { display: none; }
  .ul-conclusion { margin-top: 24px; text-align: left; }
  .ul-conclusion__head { font-size: calc(17px * var(--ul-fs)); }

  /* 03：3列 → 縦積み、軸と矢印は非表示 */
  .ul-scale__axis { display: none; }
  .ul-scale__cols { grid-template-columns: 1fr; }
  .ul-scale__col + .ul-scale__col { border-left: 0; border-top: 1px solid var(--ul-color-border); }

  /* 04 */
  .ul-themes-layout { grid-template-columns: 1fr; }

  /* 05：横並び → 縦積み、左端に縦線 */
  .ul-steps { margin-top: 40px; padding-left: 24px; display: block; }
  .ul-steps__item { display: flex; gap: 16px; padding-right: 0; padding-bottom: 32px; border-left: 1px solid var(--ul-color-text-faint); }
  .ul-steps__item:last-child { padding-bottom: 0; border-left-color: transparent; }
  .ul-steps__item::before,
  .ul-steps__item::after { display: none; }
  .ul-steps__node { flex: none; margin-left: -24px; width: 48px; height: 48px; }
  .ul-steps__node-label { font-size: calc(8px * var(--ul-fs)); letter-spacing: 0.14em; }
  .ul-steps__node-num { margin-top: 3px; font-size: calc(19px * var(--ul-fs)); }
  .ul-steps__body { padding-top: 10px; }
  .ul-steps__title { margin-top: 0; font-size: calc(17px * var(--ul-fs)); }
  .ul-steps__text { margin-top: 8px; }
  .ul-steps__after { margin-top: 8px; }
  .ul-guide { grid-template-columns: 1fr; }

  /* 06 */
  .ul-faq-layout { grid-template-columns: 1fr; }

  /* 07：ヘッダー行を非表示、1列に */
  .ul-support { grid-template-columns: 1fr; }
  .ul-areas__head { display: none; }
  .ul-areas, .ul-areas tbody, .ul-areas__row, .ul-areas__key, .ul-areas__val { display: block; width: 100%; }
  .ul-areas__row { padding: 22px 0; border-bottom: 1px solid var(--ul-color-border); }
  .ul-areas__key, .ul-areas__val { padding: 0; border-bottom: 0; }
  .ul-areas__val { margin-top: 6px; }

  /* 08 */
  .ul-docs { margin-top: 48px; gap: 20px; }
  .ul-doc { padding: 28px 24px; }

  /* 09 */
  .ul-form { padding: 28px 20px 32px; }

  /* 関連情報 */
  .ul-related { grid-template-columns: 1fr; }
  .ul-related__item { padding: 24px 0; }
}

/* ---------- SP表示（サイトが spView を付けたとき）：SPのヘッダーは高さ81px（実測） ---------- */
.spView .ul-page { --ul-anchor-offset: 96px; }

/* ---------- 【注意】.ul-page の外側に効く指定 ----------
   本文の下にあるサイト共通の .contentBottom（お問い合わせ帯の外枠）は、上に100pxの余白を持つ。
   関連情報セクションの下余白と重なって空きすぎるため、0 にする。
   このCSSはこのページでしか読み込まないため、他のページには影響しない。 */
.contentBottom { margin-top: 0; }

/* ---------- 【注意】.ul-page の外側に効く指定（2か所目） ----------
   パンくずの下にあるサイト共通の .pagetitle（ページタイトルの枠）は、このページでは中身が空のまま描画され、
   上パディング30px＋下マージン50px（SPは40px）の空きだけを作っている。
   ページタイトルはファーストビューの h1 が担うため、このページでだけ 0 にする。
   共通CSSと同じ #main .pagetitle で指定し、読み込み順（このCSSが後）で上書きする。
   このページで infoCMS 側のページタイトル欄に文字を入れた場合は、この指定を見直すこと */
#main .pagetitle { padding-top: 0; margin-bottom: 0; }