@charset "UTF-8";
/**
 * カスケードレイヤーの優先順位
 *
 * 本テーマは旧デザインのCSS（css/style_pc.css など）が残ったまま、
 * ページ単位でリニューアルを進めている。旧CSSを `@layer legacy` に閉じ込め、
 * FLOCSS の各層をその後ろに置くことで、
 * **詳細度を上げずに旧CSSを上書きできる**ようにしている。
 *
 * ※ 実際の読み込みは css/import.css が行う（そちらでも同じ順序を宣言している）。
 * ※ レイヤーで勝てるのは「同じプロパティを宣言している場合」だけ。
 *    旧CSSが要素セレクタで指定しているプロパティは foundation/_base.scss で打ち消す。
 */
@layer legacy, foundation, layout, object;
/**
 * カラー定義（Figma のバリアブル primitive / semantic と 1:1 対応）
 */
@layer foundation {
  :root {
    /* ------------------------------------------------------------------
     * primitive
     * ---------------------------------------------------------------- */
    --color-white: #fff;
    --color-neutral-500: #afc0cc;
    --color-blue-1000: #052842;
    --color-blue-900: #0b1d27;
    --color-blue-700: #116bb2;
    --color-blue-500: #3095e4;
    --color-blue-100: #e9f4fb;
    --color-blue-400: #007cce;
    --color-gray-900: #3a4148;
    --color-gray-700: #3d4e59;
    --color-gray-500: #5e5e5e;
    --color-yellow-500: #fcfa3f;
    --color-yellow-300: #faf880;
    /* ------------------------------------------------------------------
     * semantic（コンポーネントからはこちらを使う）
     * ---------------------------------------------------------------- */
    /* text */
    --color-text-primary: #0b1d27;
    --color-text-secondary: #3d4e59;
    --color-text-tertiary: #5d7180;
    --color-text-error: #c8271f;
    --color-text-accent: #116bb2;
    --color-text-inverse: #fff;
    /* background */
    --color-bg-primary: #fff;
    --color-bg-secondary: #f8fafc;
    --color-bg-tertiary: #edf3f7;
    --color-bg-blue: #116bb2;
    --color-bg-brand: #3095e4;
    --color-bg-tint: #e9f4fb;
    /* border */
    --color-border-default: #d5e1e9;
    --color-border-strong: #b8c8d0;
    --color-border-subtle: #edf3f7;
    --color-border-brand: #116bb2;
    --color-border-dash: #5292d3;
    /* ------------------------------------------------------------------
     * 影・イージング
     * ---------------------------------------------------------------- */
    --shadow-float: 0 1rem 3rem color-mix(in oklab, var(--color-blue-700) 12%, transparent);
    --shadow-hover: 0 0.8rem 2rem color-mix(in oklab, var(--color-blue-700) 20%, transparent);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration: 0.3s;
    /* ボタンの塗りつぶし演出用（ゆっくり効き始めて素早く止まる） */
    --ease-wipe: cubic-bezier(0.165, 0.84, 0.44, 1);
    --duration-wipe: 0.5s;
    --delay-wipe: 0.2s;
  }
}
/**
 * フォント定義
 * 和文: Noto Sans JP（Regular 400 / Medium 500 / Bold 700）
 * 欧文: Inter（Light 300 / Regular 400 / Medium 500）
 *
 * デザイン上、英字ラベルや見出しの欧文は Inter が指定されている。
 * --en-font は Inter を先に置き、和文グリフは Noto Sans JP にフォールバックさせる。
 */
@layer foundation {
  :root {
    --main-font: "Noto Sans JP", "Noto Sans Japanese", "Hiragino Kaku Gothic ProN",
      "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
    --en-font: "Inter", var(--main-font);
    /* 字重は数値直書きせず、必ずこの変数を使うこと */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
  }
}
/**
 * 変数定義
 * 出典: Figma「PORT2401様_サイト改修（コピー）」
 *       PC … TOP_デザイン（node 355:15274）
 *       SP … SP（node 355:17405）
 *       それぞれのバリアブル（font-size / spacing / semantic）
 */
/* ------------------------------------------------------------------
 * ルートのフォントサイズ
 * 旧 style_pc.css が html { font-size: 62.5% }（= 1rem 10px）を指定しており、
 * 旧CSSが全面的にこれに依存しているため踏襲する。
 * rem() はこの値を基準に px → rem を計算する。
 * ---------------------------------------------------------------- */
/* ------------------------------------------------------------------
 * ブレークポイント
 * デザイン: PC 1440 / SP 390
 * ---------------------------------------------------------------- */
/* ------------------------------------------------------------------
 * フォントサイズ（Figma: font-size/*）
 * 使い方: font-size: m.fz("body-default");
 * ---------------------------------------------------------------- */
/* ------------------------------------------------------------------
 * 余白（Figma: spacing/*）
 * 使い方: padding-block: m.space("080");
 *
 * spacing は Figma の SP モードでも PC と同値のため、両者を揃えている。
 * セクションの上下余白だけは SP で別値になるので section-padding() で個別指定する。
 * ---------------------------------------------------------------- */
/* ------------------------------------------------------------------
 * 字送り（Figma の letterSpacing は % 指定）
 * ---------------------------------------------------------------- */
/* ------------------------------------------------------------------
 * レイアウト（単位：px）
 * ---------------------------------------------------------------- */
/* ------------------------------------------------------------------
 * ベーススタイルの適用範囲
 *
 * 通常のサイトなら html / body に直接当てるが、本テーマは旧デザインの
 * ページが同居しているため、リニューアル済みの範囲だけにスコープする。
 * リニューアルが全ページに行き渡ったら `html, body` に置き換えてよい。
 * ---------------------------------------------------------------- */
/* ------------------------------------------------------------------
 * 単位変換
 * ---------------------------------------------------------------- */
/* ------------------------------------------------------------------
 * デザイントークンのアクセサ
 * ---------------------------------------------------------------- */
/* ------------------------------------------------------------------
 * メディアクエリ
 * ---------------------------------------------------------------- */
/* ------------------------------------------------------------------
 * ホバー
 * ---------------------------------------------------------------- */
/* ------------------------------------------------------------------
 * タイポグラフィ
 * Figma のテキストスタイルと 1:1 対応（名前も Figma に合わせている）
 * letterSpacing は Figma の % 指定を em に変換（4 → 0.04em / 8 → 0.08em）
 * ---------------------------------------------------------------- */
/* ------------------------------------------------------------------
 * パーツ
 * ---------------------------------------------------------------- */
/* ------------------------------------------------------------------
 * レイアウト
 * ---------------------------------------------------------------- */
/**
 * セクションのコンテナ
 * @param {number} $max-width - コンテンツの最大幅（px）
 * @param {number} $gutter - 左右の余白（px）
 */
/**
 * セクションの上下余白
 * @param {number} $top - PCの上余白（px）
 * @param {number} $bottom - PCの下余白（px、既定: $top と同値）
 * @param {number} $sp-top - SPの上余白（px、未指定ならPC値の約1/1.7）
 * @param {number} $sp-bottom - SPの下余白（px、未指定ならPC値の約1/1.7）
 */
/**
 * デザイントークンを CSS 変数として出力する
 *
 * PC値を :root に、SP値をタブレット以下のメディアクエリで上書きする。
 */
@layer foundation {
  :root {
    /* フォントサイズ（PC） */
    --fz-h1: 4.8rem;
    --fz-h2: 4rem;
    --fz-h3: 3.2rem;
    --fz-h4: 2.4rem;
    --fz-button: 2.2rem;
    --fz-body-large: 1.8rem;
    --fz-body-default: 1.6rem;
    --fz-body-medium: 1.5rem;
    --fz-body-small: 1.4rem;
    --fz-label: 1.3rem;
    --fz-caption: 1.2rem;
    /* 余白（PC） */
    --space-008: 0.8rem;
    --space-012: 1.2rem;
    --space-016: 1.6rem;
    --space-024: 2.4rem;
    --space-032: 3.2rem;
    --space-040: 4rem;
    --space-048: 4.8rem;
    --space-056: 5.6rem;
    --space-064: 6.4rem;
    --space-080: 8rem;
    --space-096: 9.6rem;
    --space-120: 12rem;
    --space-240: 24rem;
    /* レイアウト */
    --header-height: 11.4rem;
    --outer-width: 144rem;
    /* 角丸 */
    --radius-xxs: 0.2rem;
    --radius-xs: 0.5rem;
    --radius-s: 0.8rem;
    --radius-m: 1.6rem;
    --radius-l: 2.4rem;
    --radius-xl: 4rem;
    --radius-pill: 12rem;
  }
  @media (max-width: 767px) {
    :root {
      --fz-h1: 3.2rem;
      --fz-h2: 3.2rem;
      --fz-h3: 2.4rem;
      --fz-h4: 2rem;
      --fz-button: 1.8rem;
      --fz-body-large: 1.6rem;
      --fz-body-default: 1.5rem;
      --fz-body-medium: 1.4rem;
      --fz-body-small: 1.3rem;
      --fz-label: 1.2rem;
      --fz-caption: 1.1rem;
      --space-008: 0.8rem;
      --space-012: 1.2rem;
      --space-016: 1.6rem;
      --space-024: 2.4rem;
      --space-032: 3.2rem;
      --space-040: 4rem;
      --space-048: 4.8rem;
      --space-056: 5.6rem;
      --space-064: 6.4rem;
      --space-080: 8rem;
      --space-096: 6.4rem;
      --space-120: 6.4rem;
      --space-240: 12.8rem;
    }
  }
  :root {
    /* ヘッダーだけは SP 表示に切り替わる幅が早い（ナビが1行に収まらなくなる幅） */
  }
  @media (max-width: 1399px) {
    :root {
      --header-height: 7.8rem;
    }
  }
}
/**
 * ベーススタイル
 *
 * 旧デザインのページが同居しているため、`html` / `body` ではなく
 * リニューアル済みの範囲（$scope）にスコープして当てる。
 */
@property --animation-reduced {
  syntax: "*";
  inherits: false;
  initial-value: none;
}
@layer foundation {
  /**
   * リニューアル範囲のベース。
   *
   * 旧CSS（@layer legacy）の要素セレクタは `main:not(.p-top)` にスコープし直したので、
   * ここは打ち消しではなく素直なリセットだけを書けばよい。
   */
  :where(.l-header, .l-footer, .p-top, .p-page) {
    font-family: var(--main-font);
    box-sizing: border-box;
    color: var(--color-text-primary);
    line-height: 1.8;
    text-align: start;
    font-feature-settings: "palt" 1;
  }
  :where(.l-header, .l-footer, .p-top, .p-page) *,
  :where(.l-header, .l-footer, .p-top, .p-page) *::before,
  :where(.l-header, .l-footer, .p-top, .p-page) *::after {
    box-sizing: inherit;
  }
  :where(.l-header, .l-footer, .p-top, .p-page) h1,
  :where(.l-header, .l-footer, .p-top, .p-page) h2,
  :where(.l-header, .l-footer, .p-top, .p-page) h3,
  :where(.l-header, .l-footer, .p-top, .p-page) h4,
  :where(.l-header, .l-footer, .p-top, .p-page) h5,
  :where(.l-header, .l-footer, .p-top, .p-page) h6,
  :where(.l-header, .l-footer, .p-top, .p-page) p,
  :where(.l-header, .l-footer, .p-top, .p-page) figure,
  :where(.l-header, .l-footer, .p-top, .p-page) dl,
  :where(.l-header, .l-footer, .p-top, .p-page) dd,
  :where(.l-header, .l-footer, .p-top, .p-page) blockquote {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
  }
  :where(.l-header, .l-footer, .p-top, .p-page) ul,
  :where(.l-header, .l-footer, .p-top, .p-page) ol {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  :where(.l-header, .l-footer, .p-top, .p-page) a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration) var(--ease-out), opacity var(--duration) var(--ease-out);
  }
  :where(.l-header, .l-footer, .p-top, .p-page) svg {
    display: block;
  }
  :where(.l-header, .l-footer, .p-top, .p-page) img {
    max-inline-size: 100%;
    block-size: auto;
  }
  :where(.l-header, .l-footer, .p-top, .p-page) {
    /* 改行位置は <br> で明示しているので text-wrap は既定（wrap）のまま。
       balance はもちろん pretty も使わない。
       pretty は Safari（iOS 含む）だと段落全体を最適化するため、
       行末を揃えようとして各行が短くなり、右側に余白が空いて見える。
       Chrome は最終行の調整だけなので PC では気づきにくい。 */
  }
  :where(.l-header, .l-footer, .p-top, .p-page) a:focus-visible,
  :where(.l-header, .l-footer, .p-top, .p-page) button:focus-visible {
    outline: 2px solid var(--color-bg-brand);
    outline-offset: 3px;
    border-radius: 0.4rem;
  }
  @media (prefers-reduced-motion: reduce) {
    :where(.l-header, .l-footer, .p-top, .p-page),
    :where(.l-header, .l-footer, .p-top, .p-page) * {
      animation: var(--animation-reduced) !important;
      scroll-behavior: auto !important;
    }
  }
}
/**
 * セクションのコンテナ
 * Figma のセクションごとの左右パディングに合わせて幅を用意している
 */
@layer layout {
  .l-container {
    inline-size: 100%;
    max-inline-size: calc(113.6rem + 2rem * 2);
    margin-inline: auto;
    padding-inline: 2rem;
  }
  @media (max-width: 767px) {
    .l-container {
      padding-inline: 2.4rem;
    }
  }
  .l-container--wide {
    inline-size: 100%;
    max-inline-size: calc(128rem + 2rem * 2);
    margin-inline: auto;
    padding-inline: 2rem;
  }
  @media (max-width: 767px) {
    .l-container--wide {
      padding-inline: 2.4rem;
    }
  }
  .l-container--media {
    inline-size: 100%;
    max-inline-size: calc(132.8rem + 2rem * 2);
    margin-inline: auto;
    padding-inline: 2rem;
  }
  @media (max-width: 767px) {
    .l-container--media {
      padding-inline: 2.4rem;
    }
  }
  .l-container--news {
    inline-size: 100%;
    max-inline-size: calc(129.6rem + 2rem * 2);
    margin-inline: auto;
    padding-inline: 2rem;
  }
  @media (max-width: 767px) {
    .l-container--news {
      padding-inline: 2.4rem;
    }
  }
  .l-container--medium {
    inline-size: 100%;
    max-inline-size: calc(120rem + 2rem * 2);
    margin-inline: auto;
    padding-inline: 2rem;
  }
  @media (max-width: 767px) {
    .l-container--medium {
      padding-inline: 2.4rem;
    }
  }
}
/**
 * 共通ヘッダー（Figma: Header / node 355:22316）
 *
 * 左端のロゴだけ青の角丸ボックス（高さ114px）、右にナビ＋CTAボタン2つ。
 * ナビは上下 20px パディング + CTAボタン48px ＝ 88px なので、
 * ロゴボックスより低く、上端揃えになる。
 */
@layer layout {
  .l-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 999;
    block-size: var(--header-height);
    /* 少しスクロールしたら背景を出す（ページ最上部では下層ページも透過）。
       背景はヘッダー全体ではなくナビの範囲（ロゴの右〜画面右端）だけに敷く。 */
  }
  .l-header.is-scrolled .l-header__nav {
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    box-shadow: 0 0.2rem 1.4rem color-mix(in oklab, var(--color-blue-700) 8%, transparent);
  }
  .l-header__sentinel {
    position: absolute;
    inset-block-start: 4rem;
    inset-inline-start: 0;
    inline-size: 1px;
    block-size: 1px;
    visibility: hidden;
    pointer-events: none;
  }
  .l-header__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    block-size: 100%;
  }
  .l-header {
    /* ------------------------------------------------------------------
     * ロゴ
     * ---------------------------------------------------------------- */
  }
  .l-header__logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: var(--header-height);
    padding: 1.5rem 2rem 2.1rem;
    background-color: var(--color-bg-blue);
    border-end-end-radius: 1rem;
  }
  @media (max-width: 1399px) {
    .l-header__logo {
      padding: 1.03rem 1.375rem 1.44rem;
      border-end-end-radius: 0.6875rem;
    }
  }
  .l-header__logo-link {
    display: block;
    line-height: 0;
  }
  .l-header__logo-image {
    display: block;
    inline-size: 12rem;
    block-size: auto;
  }
  @media (max-width: 1399px) {
    .l-header__logo-image {
      inline-size: 8.25rem;
    }
  }
  .l-header {
    /* ------------------------------------------------------------------
     * ナビゲーション
     * ---------------------------------------------------------------- */
  }
  .l-header__nav {
    flex: 1 0 0;
    min-inline-size: 1px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.6rem;
    padding: 2rem 2.4rem;
    transition: background-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
  }
  @media (max-width: 1399px) {
    .l-header__nav {
      gap: var(--space-016);
      padding: 2rem var(--space-016);
    }
  }
  .l-header__nav {
    /* デザイン幅(390px)でロゴ＋CTA＋ハンバーガーがちょうど横いっぱいになるので、
       それより狭い端末では余白と文字を詰めて収める */
  }
  @media (max-width: 389px) {
    .l-header__nav {
      gap: var(--space-012);
      padding-inline: var(--space-012);
    }
  }
  .l-header__menu {
    display: flex;
    align-items: center;
  }
  @media (max-width: 1399px) {
    .l-header__menu {
      display: none;
    }
  }
  .l-header__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: 1rem;
  }
  .l-header__link {
    position: relative;
    display: flex;
    justify-content: center;
    padding-block: 1rem 1.3rem;
    font-size: var(--fz-label);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: var(--color-text-primary);
    white-space: nowrap;
    font-feature-settings: "palt" 1;
  }
  .l-header__link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 2px;
    background-color: currentColor;
    scale: 0 1;
    transition: scale var(--duration) var(--ease-out);
  }
  .l-header__link:focus-visible {
    color: var(--color-text-accent);
  }
  .l-header__link:focus-visible::after {
    scale: 1 1;
  }
  @media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .l-header__link:hover {
      color: var(--color-text-accent);
    }
    .l-header__link:hover::after {
      scale: 1 1;
    }
  }
  .l-header {
    /* ------------------------------------------------------------------
     * CTAボタン
     * ---------------------------------------------------------------- */
  }
  .l-header__cta {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
  }
  @media (max-width: 1399px) {
    .l-header__cta {
      gap: var(--space-008);
    }
  }
  @media (max-width: 767px) {
    .l-header__cta {
      gap: 0.6rem;
    }
  }
  @media (max-width: 389px) {
    .l-header__cta {
      gap: 0.4rem;
    }
  }
  .l-header {
    /**
     * ホバー時は .c-button と同じく、面が左から右へ塗りつぶして色が反転する。
     * アイコンは「白丸＋ボタン背景色のグリフ」なので、白く塗りつぶされると
     * 丸が背景に溶けてグリフだけが残り、そのまま反転した見た目になる。
     * 枠線は通常時は背景と同色（＝見えない）で、白くなったときだけ輪郭になる。
     */
  }
  .l-header__cta-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: calc(0.8rem - 1px) calc(2.4rem - 1px) calc(0.8rem - 1px) calc(0.8rem - 1px);
    border: 1px solid var(--cta-bg);
    border-radius: var(--radius-pill);
    background-color: var(--cta-bg);
    overflow: hidden;
    font-size: var(--fz-label);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--color-text-inverse);
    white-space: nowrap;
    font-feature-settings: "palt" 1;
    transition: color var(--duration-wipe) var(--ease-wipe);
  }
  .l-header__cta-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--color-bg-primary);
    scale: 0 1;
    transform-origin: right center;
    transition: scale var(--duration-wipe) var(--ease-wipe);
  }
  .l-header__cta-link:focus-visible {
    opacity: 1;
    color: var(--cta-bg);
  }
  .l-header__cta-link:focus-visible::before {
    scale: 1 1;
    transform-origin: left center;
  }
  @media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .l-header__cta-link:hover {
      opacity: 1;
      color: var(--cta-bg);
    }
    .l-header__cta-link:hover::before {
      scale: 1 1;
      transform-origin: left center;
    }
  }
  @media (max-width: 1399px) {
    .l-header__cta-link {
      gap: 0.6rem;
      padding: calc(0.4rem - 1px) calc(var(--space-016) - 1px) calc(0.4rem - 1px) calc(0.4rem - 1px);
      font-size: var(--fz-label);
    }
  }
  .l-header__cta-link {
    /* SP（Figma: 355:17416）はアイコンなしのテキストのみ。
       14px の文字に上下13px・左右16pxで、デザインどおり高さ40pxになる。 */
  }
  @media (max-width: 767px) {
    .l-header__cta-link {
      gap: 0;
      padding: calc(1.3rem - 1px) calc(var(--space-016) - 1px);
      font-size: var(--fz-body-medium);
    }
  }
  @media (max-width: 389px) {
    .l-header__cta-link {
      padding-inline: calc(var(--space-012) - 1px);
      font-size: var(--fz-body-small);
    }
  }
  .l-header__cta-icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    inline-size: 3.2rem;
    block-size: 3.2rem;
  }
  @media (max-width: 767px) {
    .l-header__cta-icon {
      display: none;
    }
  }
  .l-header__cta-label {
    position: relative;
    z-index: 1;
  }
  .l-header__cta-item--entry .l-header__cta-link {
    --cta-bg: var(--color-bg-brand);
    min-inline-size: 14.8rem;
  }
  @media (max-width: 1399px) {
    .l-header__cta-item--entry .l-header__cta-link {
      min-inline-size: 0;
    }
  }
  .l-header__cta-item--contact .l-header__cta-link {
    --cta-bg: var(--color-bg-blue);
  }
  .l-header {
    /* ------------------------------------------------------------------
     * ハンバーガーメニュー
     * Figma: 閉 355:17416（Frame 1707487215）/ 開 458:12083
     *
     * 35x9 の2本線とラベル（MENU / CLOSE）。開くと2本が交差して×になる。
     * ×はデザインどおり「左上から右下」「左下から右上」へ引いた線なので、
     * 傾きは 35:9 の対角線の角度＝ atan(9 / 35) ≒ 14.4deg。
     * ---------------------------------------------------------------- */
  }
  .l-header__burger {
    display: none;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    align-self: flex-end;
    padding: 0.8rem 0.6rem;
    margin: -0.8rem -0.6rem;
    border: 0;
    background-color: transparent;
    color: var(--color-text-accent);
    cursor: pointer;
    transition: color var(--duration) var(--ease-out);
  }
  @media (max-width: 1399px) {
    .l-header__burger {
      display: flex;
    }
  }
  .l-header__burger:focus-visible {
    outline: 2px solid var(--color-bg-brand);
    outline-offset: 3px;
    border-radius: 0.4rem;
  }
  .l-header__burger-bars {
    position: relative;
    display: block;
    inline-size: 3.5rem;
    block-size: 1.05rem;
  }
  .l-header__burger-bar {
    position: absolute;
    inset-inline: 0;
    block-size: 0.15rem;
    background-color: currentColor;
    transition: top var(--duration) var(--ease-out), translate var(--duration) var(--ease-out), rotate var(--duration) var(--ease-out);
  }
  .l-header__burger-bar:first-child {
    top: 0;
    translate: 0 0;
  }
  .l-header__burger-bar:last-child {
    top: 100%;
    translate: 0 -100%;
  }
  .l-header__burger-label {
    font-family: var(--en-font);
    font-size: var(--fz-caption);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.3;
  }
  .l-header__burger-label--close {
    display: none;
  }
  .l-header {
    /* ------------------------------------------------------------------
     * ハンバーガーメニューの中身（Figma: 458:12083）
     *
     * ヘッダーの下に紺色の面を敷き、24px の内側にリンクを縦積みする。
     * ロゴ・CTA・トグルはこの面より手前（__inner）に残る。
     * ---------------------------------------------------------------- */
  }
  .l-header__drawer {
    display: none;
    position: fixed;
    inset: 0;
    padding-block: calc(var(--header-height) + 4rem) 6.2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--color-blue-1000);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--duration) var(--ease-out), visibility 0s linear var(--duration);
  }
  @media (max-width: 1399px) {
    .l-header__drawer {
      display: block;
    }
  }
  .l-header__drawer-inner {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    inline-size: 100%;
    max-inline-size: 39rem;
    margin-inline: auto;
    padding-inline: var(--space-024);
  }
  .l-header__drawer-item {
    /* 区切りは 2px on / 2px off の点線。border の dotted は 1px 単位なので
       背景のグラデーションで描く。 */
    background-image: repeating-linear-gradient(to right, var(--color-border-strong) 0 0.2rem, transparent 0.2rem 0.4rem);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 1px;
  }
  .l-header__drawer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-008);
    block-size: 6.4rem;
    padding-inline: var(--space-008);
    color: var(--color-text-inverse);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.08em;
    font-size: 1.6rem;
    font-feature-settings: "palt" 1;
  }
  .l-header__drawer-link:focus-visible {
    opacity: 1;
    color: var(--color-blue-500);
  }
  @media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .l-header__drawer-link:hover {
      opacity: 1;
      color: var(--color-blue-500);
    }
  }
  .l-header__drawer-chevron {
    flex-shrink: 0;
    inline-size: 3.2rem;
    block-size: 2.4rem;
  }
  .l-header__drawer-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-016);
  }
  .l-header {
    /* ------------------------------------------------------------------
     * 開いた状態（js/renewal.js が body に is-menu-open を付ける）
     * ---------------------------------------------------------------- */
  }
  body.is-menu-open .l-header__drawer {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }
  body.is-menu-open .l-header__burger {
    color: var(--color-text-inverse);
  }
  body.is-menu-open .l-header__burger-label--menu {
    display: none;
  }
  body.is-menu-open .l-header__burger-label--close {
    display: block;
  }
  body.is-menu-open .l-header__burger-bar {
    top: 50%;
    translate: 0 -50%;
  }
  body.is-menu-open .l-header__burger-bar:first-child {
    rotate: 14.4deg;
  }
  body.is-menu-open .l-header__burger-bar:last-child {
    rotate: -14.4deg;
  }
  .l-header {
    /* 紺色の面の上に重なるので、追従時の白い背景は消す。
       打ち消す相手（.l-header.is-scrolled .l-header__nav）はクラス3つなので、
       body.is-menu-open だけでは詳細度が足りない。.is-scrolled を含めて書く。 */
  }
  body.is-menu-open .l-header.is-scrolled .l-header__nav {
    background-color: transparent;
    backdrop-filter: none;
    box-shadow: none;
  }
  body.is-menu-open {
    overflow: hidden;
  }
  /* 上の overflow: hidden でスクロールバーが消えると、その幅ぶん中身が右へずれる。
     あらかじめ場所を空けておいて開閉時に動かないようにする。
     スクロールバーが内容に重なる端末（スマホ）では何も起きない。 */
  html {
    scrollbar-gutter: stable;
  }
  /**
   * 下層ページの固定ヘッダー分の余白。
   * 下層テンプレートの <main> にはクラスが付いていないため、
   * 例外的に要素セレクタで指定している（旧CSSの padding-top: 100px を上書き）。
   * 各ページをリニューアルする際に .p-〇〇 のクラス指定へ置き換えること。
   */
  body:not(.home) main {
    padding-block-start: 0;
  }
  body.page main:not(.p-page) .sub_kv {
    padding-block-start: var(--header-height);
  }
}
/**
 * 共通フッター（Figma: 355:15274 / Footer）
 * 上端の波形（青・上に重ねる） → 青ベタの本体 → バナー → 品川区ロゴ → コピーライト
 */
@layer layout {
  .l-footer {
    margin-top: -9.2rem;
    position: relative;
    color: var(--color-text-inverse);
    font-family: var(--main-font);
  }
  .l-footer__wave {
    position: relative;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 9.2rem;
  }
  @media (max-width: 767px) {
    .l-footer__wave {
      block-size: 4.6rem;
    }
  }
  .l-footer__container {
    background-color: var(--color-bg-blue);
    padding-inline: 1rem;
  }
  .l-footer__body {
    padding-block-end: 2rem;
    max-inline-size: 98rem;
    margin-inline: auto;
  }
  .l-footer__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    inline-size: 100%;
    max-inline-size: 98rem;
    padding-block-start: 3.6rem;
  }
  @media (max-width: 767px) {
    .l-footer__top {
      justify-content: center;
      gap: var(--space-024);
    }
  }
  @media (max-width: 767px) {
    .l-footer__top {
      padding-block-start: var(--space-032);
    }
  }
  .l-footer__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 0.1rem;
    inline-size: 68.6rem;
  }
  @media (max-width: 767px) {
    .l-footer__nav {
      justify-content: center;
      inline-size: auto;
    }
  }
  @media (max-width: 767px) {
    .l-footer__nav {
      justify-content: center;
      inline-size: 100%;
    }
  }
  .l-footer__nav-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    block-size: 5.1rem;
    padding-inline-end: 1rem;
    padding-block: 0.5rem;
    color: var(--color-text-inverse);
    font-family: var(--en-font);
    font-size: 1.2rem;
    font-weight: var(--font-weight-regular);
    line-height: 1;
    letter-spacing: 0.3rem;
  }
  .l-footer__nav-item::after {
    content: "|";
    font-size: 1.09rem;
  }
  @supports (content: "a"/"b") {
    .l-footer__nav-item::after {
      content: "|"/"";
    }
  }
  .l-footer__nav-item:last-child {
    padding-inline-end: 0;
    font-size: 1.16rem;
  }
  .l-footer__nav-item:last-child::after {
    content: none;
  }
  @media (max-width: 767px) {
    .l-footer__nav-item {
      block-size: 3.6rem;
    }
  }
  .l-footer__nav-link {
    white-space: nowrap;
  }
  .l-footer__nav-link:focus-visible {
    opacity: 0.75;
  }
  @media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .l-footer__nav-link:hover {
      opacity: 0.75;
    }
  }
  .l-footer__sns {
    display: flex;
    align-items: flex-start;
    padding-block-start: var(--space-008);
  }
  @media (max-width: 767px) {
    .l-footer__sns {
      padding-block: var(--space-016) 0.6rem;
    }
  }
  .l-footer__sns-item {
    padding-inline-start: 3rem;
  }
  @media (max-width: 767px) {
    .l-footer__sns-item {
      padding-inline-start: var(--space-024);
    }
    .l-footer__sns-item:first-child {
      padding-inline-start: 0;
    }
  }
  .l-footer__sns-link {
    color: var(--color-bg-brand);
    flex-shrink: 0;
    display: grid;
    place-items: center;
    inline-size: 5rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: var(--color-bg-primary);
  }
  .l-footer__sns-link:focus-visible {
    opacity: 0.75;
  }
  @media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .l-footer__sns-link:hover {
      opacity: 0.75;
    }
  }
  .l-footer__sns-icon {
    inline-size: 2.8rem;
    block-size: 2.8rem;
    fill: currentColor;
  }
  .l-footer {
    /**
     * バナー一覧は固定ページ「top_banner」の入稿HTMLをそのまま出力しているため、
     * クラスを付けられない。ここだけ例外的に要素セレクタで指定する。
     */
  }
  .l-footer__banner {
    inline-size: 100%;
    max-inline-size: 87rem;
    margin-block-start: 5.6rem;
  }
  .l-footer__banner ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem 1rem;
  }
  @media (max-width: 767px) {
    .l-footer__banner ul {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .l-footer__banner img {
    inline-size: 100%;
    block-size: auto;
  }
  @media (max-width: 767px) {
    .l-footer__banner {
      max-inline-size: 34.2rem;
    }
  }
  .l-footer__logo {
    margin-block-start: 10rem;
    inline-size: 18rem;
    margin-inline: auto;
  }
  @media (max-width: 767px) {
    .l-footer__logo {
      padding-block: var(--space-040) 0.7rem;
    }
  }
  .l-footer__logo-image {
    inline-size: 100%;
    block-size: auto;
  }
  .l-footer {
    /* SP（デザイン未提供） */
  }
  @media (max-width: 767px) {
    .l-footer {
      padding-block-start: 3.8rem;
    }
    .l-footer__copy {
      display: block;
      letter-spacing: 0.1rem;
    }
    .l-footer__copy-mark {
      margin-inline-end: 0.3rem;
    }
  }
  .l-footer__copy {
    margin-block-start: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    font-family: var(--en-font);
    font-size: 1.18rem;
    font-weight: var(--font-weight-medium);
    line-height: 2.4rem;
    letter-spacing: 0.2rem;
    text-align: center;
  }
  .l-footer__copy-mark {
    font-size: 1.44rem;
  }
}
/**
 * ボタン（Figma: button）
 *
 * 白 … 白背景 + 1px の枠線（#afc0cc）+ 濃色文字 + 青丸の矢印
 * 青 … 青背景 + 白文字 + 白丸の矢印
 * 高さは 8 + 48（アイコン）+ 8 = 64px。
 *
 * ホバー時の演出は kobe-yl.jp のヘッダーボタンと同仕様:
 *   1. 面が左から右へ 0.5s で塗りつぶす（::before の scaleX）
 *   2. 0.2s 遅れて矢印が右へ抜け、同じ矢印が左から入ってくる
 *   3. 文字色と矢印の丸が反転する
 * 配色は通常時／ホバー時をカスタムプロパティに持たせ、モディファイアで差し替える。
 */
@layer object {
  .c-button {
    --button-bg: var(--color-bg-primary);
    --button-color: var(--color-text-primary);
    --button-border: var(--color-neutral-500);
    --button-arrow-bg: var(--color-bg-brand);
    --button-arrow-color: var(--color-text-inverse);
    --button-hover-bg: var(--color-bg-brand);
    --button-hover-color: var(--color-text-inverse);
    --button-hover-border: var(--button-hover-bg);
    --button-hover-arrow-bg: var(--color-bg-primary);
    --button-hover-arrow-color: var(--color-bg-brand);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-024);
    min-inline-size: 28rem;
    padding: var(--space-008) var(--space-008) var(--space-008) var(--space-032);
    border: 1px solid var(--button-border);
    border-radius: var(--radius-pill);
    background-color: var(--button-bg);
    color: var(--button-color);
    overflow: hidden;
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.08em;
    transition: color var(--duration-wipe) var(--ease-wipe), border-color var(--duration-wipe) var(--ease-wipe);
  }
  .c-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--button-hover-bg);
    scale: 0 1;
    transform-origin: right center;
    transition: scale var(--duration-wipe) var(--ease-wipe);
  }
  .c-button__label {
    position: relative;
    z-index: 1;
    flex: 1 0 0;
    min-inline-size: 0;
  }
  .c-button__arrow {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: block;
    inline-size: 4.8rem;
    block-size: 4.8rem;
    overflow: hidden;
    border-radius: 50%;
    background-color: var(--button-arrow-bg);
    color: var(--button-arrow-color);
    transition: background-color var(--duration-wipe) var(--ease-wipe), color var(--duration-wipe) var(--ease-wipe);
  }
  .c-button {
    /* 位置は left で動かす（丸の中を横断させるため物理プロパティを使う）
       transition はホバー側にだけ持たせている。ホバーを外したときに
       矢印が右から左へ戻るのを見せないため。2枚とも同じ矢印なので、
       解除の瞬間に位置が入れ替わっても見た目は変わらない。 */
  }
  .c-button__arrow-icon {
    position: absolute;
    top: 50%;
    inline-size: 100%;
    block-size: 100%;
    translate: -50% -50%;
  }
  .c-button__arrow-icon--before {
    left: 50%;
  }
  .c-button__arrow-icon--after {
    left: -50%;
  }
  .c-button:focus-visible {
    opacity: 1;
    color: var(--button-hover-color);
    border-color: var(--button-hover-border);
  }
  .c-button:focus-visible::before {
    scale: 1 1;
    transform-origin: left center;
  }
  .c-button:focus-visible .c-button__arrow {
    background-color: var(--button-hover-arrow-bg);
    color: var(--button-hover-arrow-color);
  }
  .c-button:focus-visible .c-button__arrow-icon {
    transition: left var(--duration-wipe) var(--ease-wipe) var(--delay-wipe);
  }
  .c-button:focus-visible .c-button__arrow-icon--before {
    left: 150%;
  }
  .c-button:focus-visible .c-button__arrow-icon--after {
    left: 50%;
  }
  @media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .c-button:hover {
      opacity: 1;
      color: var(--button-hover-color);
      border-color: var(--button-hover-border);
    }
    .c-button:hover::before {
      scale: 1 1;
      transform-origin: left center;
    }
    .c-button:hover .c-button__arrow {
      background-color: var(--button-hover-arrow-bg);
      color: var(--button-hover-arrow-color);
    }
    .c-button:hover .c-button__arrow-icon {
      transition: left var(--duration-wipe) var(--ease-wipe) var(--delay-wipe);
    }
    .c-button:hover .c-button__arrow-icon--before {
      left: 150%;
    }
    .c-button:hover .c-button__arrow-icon--after {
      left: 50%;
    }
  }
  .c-button--fill {
    --button-bg: var(--color-bg-blue);
    --button-color: var(--color-text-inverse);
    --button-border: var(--color-bg-blue);
    --button-arrow-bg: var(--color-bg-primary);
    --button-arrow-color: var(--color-bg-blue);
    --button-hover-bg: var(--color-bg-primary);
    --button-hover-color: var(--color-bg-blue);
    --button-hover-border: var(--button-hover-color);
    --button-hover-arrow-bg: var(--color-bg-blue);
    --button-hover-arrow-color: var(--color-text-inverse);
  }
  /**
   * ボタンの並び
   */
  .c-button-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-016);
  }
  @media (max-width: 767px) {
    .c-button-group {
      flex-direction: column;
      align-items: stretch;
      inline-size: max-content;
      max-inline-size: 100%;
      margin-inline: auto;
    }
    .c-button-group .c-button {
      inline-size: 100%;
    }
  }
}
/**
 * セクション見出し（中央寄せ）
 *
 * 標準形 … 波アイコン + 見出し（施設紹介・料金表・ABOUT）
 * --en  … 欧文ラベル + 見出し（FLOW・MEDIA）
 */
@layer object {
  .c-section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-016);
    text-align: center;
    color: var(--color-text-accent);
  }
  .c-section-title:has(.c-section-title__eyebrow) {
    gap: var(--space-008);
  }
  .c-section-title__mark {
    inline-size: 2.4rem;
    block-size: 1.1rem;
    scale: -1 1;
  }
  .c-section-title__eyebrow {
    font-family: var(--en-font);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0;
  }
  .c-section-title__title {
    font-size: var(--fz-h2);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.08em;
  }
  .c-section-title__small {
    display: block;
    font-size: var(--fz-h4);
    line-height: 1.6;
    letter-spacing: 0;
  }
  @media (max-width: 767px) {
    .c-section-title__small {
      font-size: 1.8rem;
    }
  }
  .c-section-title__large {
    display: block;
    font-size: var(--fz-h3);
    line-height: 1.6;
  }
  @media (max-width: 767px) {
    .c-section-title__large {
      font-size: 2.8rem;
    }
  }
  /**
   * 見出し + リード文のまとまり（FLOW・MEDIA）
   */
  .c-section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-032);
  }
  @media (max-width: 767px) {
    .c-section-head {
      inline-size: 100%;
      padding-inline: var(--space-024);
    }
  }
  .c-section-head__lead {
    max-inline-size: 86.2rem;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--fz-body-medium);
    font-weight: var(--font-weight-regular);
    line-height: 1.8;
    letter-spacing: 0.08em;
  }
}
/**
 * 波アイコン付きの小見出しラベル（左寄せ）
 * 例: 「PORT2401が選ばれる理由」「STAFF」「ACCESS」
 */
@layer object {
  .c-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-008);
    color: var(--color-text-accent);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-medium);
    line-height: 1.8;
    letter-spacing: 0.08em;
  }
  .c-eyebrow__icon {
    flex-shrink: 0;
    inline-size: 2.4rem;
    block-size: 1.1rem;
    scale: -1 1;
  }
  .c-eyebrow__icon--object {
    block-size: 2.4rem;
    scale: none;
  }
  .c-eyebrow--en {
    font-family: var(--en-font);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0;
  }
  .c-eyebrow--en-small {
    font-family: var(--en-font);
    font-size: var(--fz-body-small);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0;
  }
  .c-eyebrow--white {
    color: var(--color-text-inverse);
  }
}
@layer object {
  /**
   * セクション間の波形ディバイダ
   *
   * Figma のデザインから書き出した透過PNG（images/renewal/waveXX.png）を、
   * 高さ固定・幅 100% で敷く。上側セクションの色は透過しているので、
   * 背面のグラデーションや背景色にそのまま馴染む。
   */
  .c-wave {
    position: absolute;
    inset-inline: 0;
    inset-block-end: -1px;
    z-index: 2;
    inline-size: 100%;
    line-height: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;
  }
  .c-wave--01 {
    block-size: 11.6rem;
    background-image: url("../images/renewal/wave01.png");
  }
  @media (max-width: 767px) {
    .c-wave--01 {
      block-size: 4.8rem;
    }
  }
  .c-wave--02 {
    block-size: 6.8rem;
    background-image: url("../images/renewal/wave02.png");
  }
  @media (max-width: 767px) {
    .c-wave--02 {
      block-size: 3.2rem;
    }
  }
  .c-wave--03 {
    block-size: 11.6rem;
    background-image: url("../images/renewal/wave03.png");
  }
  @media (max-width: 767px) {
    .c-wave--03 {
      block-size: 4.8rem;
    }
  }
  .c-wave--04 {
    block-size: 6.8rem;
    background-image: url("../images/renewal/wave04.png");
  }
  @media (max-width: 767px) {
    .c-wave--04 {
      block-size: 3.2rem;
    }
  }
  .c-wave--05 {
    block-size: 6.8rem;
    background-image: url("../images/renewal/wave05.png");
  }
  @media (max-width: 767px) {
    .c-wave--05 {
      block-size: 3.2rem;
    }
  }
  .c-wave--06 {
    block-size: 6.8rem;
    background-image: url("../images/renewal/wave06.png");
  }
  @media (max-width: 767px) {
    .c-wave--06 {
      block-size: 3.2rem;
    }
  }
  .c-wave--07 {
    block-size: 11rem;
    background-image: url("../images/renewal/wave07.png");
  }
  @media (max-width: 767px) {
    .c-wave--07 {
      block-size: 4.6rem;
    }
  }
}
/**
 * セクション間の曲線（Figma: 施設紹介ページ 355:20822）
 *
 * どの境目も同じパスで、塗りだけが変わる。曲線は「下のセクションの色」なので、
 * セクション自身の上端に、自分の高さぶんはみ出させて置く。
 */
@layer object {
  .c-curve {
    position: absolute;
    inset-block-end: 100%;
    inset-inline: 0;
    z-index: 1;
    inline-size: 100%;
    block-size: 6.4rem;
    color: var(--color-bg-primary);
    fill: currentColor;
    pointer-events: none;
  }
  .c-curve--tint {
    color: var(--color-bg-tint);
  }
  .c-curve--blue {
    color: var(--color-bg-blue);
  }
  @media (max-width: 767px) {
    .c-curve {
      block-size: 3.2rem;
    }
  }
}
/**
 * スライダー（slick）の見た目調整
 *
 * `.slick-*` は slick が実行時に生成するクラスなのでこちらでは付け替えられない。
 * ここだけは例外的に、ライブラリのクラスを直接指定している。
 * slick 本体の CSS は @layer legacy にあるため、詳細度を上げずに上書きできる。
 */
@layer object {
  .c-slider.slick-dotted.slick-slider {
    margin-block-end: unset;
  }
  .c-slider .slick-slide {
    block-size: auto;
  }
  .c-slider .slick-track {
    display: flex;
    align-items: stretch;
  }
  .c-slider {
    /* ページネーション */
  }
  .c-slider .slick-dots {
    position: static;
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-block-start: 1.6rem;
    padding: 0;
  }
  .c-slider .slick-dots li {
    inline-size: 2rem;
    block-size: 2rem;
    margin: 0;
  }
  .c-slider .slick-dots button {
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0;
  }
  .c-slider .slick-dots button::before {
    content: "";
    inline-size: 0.8rem;
    block-size: 0.8rem;
    inset-block-start: 0.6rem;
    inset-inline-start: 0.6rem;
    border-radius: 50%;
    background-color: #0079a6;
    opacity: 0.25;
  }
  .c-slider .slick-dots .slick-active button::before {
    opacity: 0.75;
  }
  .c-slider {
    /* 前後ボタン */
  }
  .c-slider .slick-prev,
  .c-slider .slick-next {
    z-index: 3;
    inline-size: 2rem;
    block-size: 2rem;
  }
  .c-slider .slick-prev {
    inset-inline-start: -2.5rem;
  }
  @media (max-width: 1359px) {
    .c-slider .slick-prev {
      inset-inline-start: -1.6rem;
    }
  }
  .c-slider .slick-next {
    inset-inline-end: -2.5rem;
  }
  @media (max-width: 1359px) {
    .c-slider .slick-next {
      inset-inline-end: -1.6rem;
    }
  }
  .c-slider {
    /**
     * 矢印は現行サイト（slick-theme.css）と同じ「<」「>」。
     * 書体は slick-theme.css が `font-family: "Kosugi Maru" !important` で指定しているので
     * ここでは触らない（Figma も Kosugi Maru 20px 指定）。
     */
  }
  .c-slider .slick-prev::before,
  .c-slider .slick-next::before {
    font-size: 2rem;
    line-height: 1;
    color: #0079a6;
    opacity: 0.75;
  }
  .c-slider .slick-prev::before {
    content: "<";
  }
  .c-slider .slick-next::before {
    content: ">";
  }
  .c-slider--on-dark .slick-dots button::before {
    background-color: var(--color-white);
  }
  .c-slider--on-dark .slick-prev::before,
  .c-slider--on-dark .slick-next::before {
    color: var(--color-white);
  }
}
/**
 * CTA帯（Figma: Background 236:3207）
 * 施設写真に青（86%）を重ねた背景の上に、白いリンクカードを3枚並べる
 */
@layer object {
  .m-cta-band {
    position: relative;
    padding-inline: var(--space-040);
    background-color: var(--color-bg-primary);
  }
  .m-cta-band--tint {
    background-color: var(--color-bg-tint);
  }
  .m-cta-band:last-child {
    padding-block-end: 12.8rem;
  }
  @media (max-width: 767px) {
    .m-cta-band:last-child {
      padding-block-end: var(--space-064);
    }
  }
  .m-cta-band__inner {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-032);
    max-inline-size: 136rem;
    margin-inline: auto;
    padding: var(--space-080) var(--space-096);
    border-radius: var(--radius-l);
    overflow: hidden;
  }
  @media (max-width: 767px) {
    .m-cta-band__inner {
      gap: var(--space-024);
      padding: var(--space-040) var(--space-024);
      border-radius: var(--radius-m);
    }
  }
  .m-cta-band__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../images/facility_info.jpg") center/cover no-repeat;
  }
  .m-cta-band__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(17, 107, 178, 0.86);
  }
  .m-cta-band__title {
    inline-size: 100%;
    text-align: center;
    color: var(--color-text-inverse);
    font-size: var(--fz-h3);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  .m-cta-band__list {
    display: flex;
    align-items: stretch;
    gap: var(--space-016);
    inline-size: 100%;
  }
  @media (max-width: 1179px) {
    .m-cta-band__list {
      flex-wrap: wrap;
    }
  }
  @media (max-width: 767px) {
    .m-cta-band__list {
      flex-direction: column;
      flex-wrap: nowrap;
    }
  }
  .m-cta-band__item {
    flex: 1 0 0;
    min-inline-size: 0;
  }
  @media (max-width: 1179px) {
    .m-cta-band__item {
      flex: 0 0 auto;
      inline-size: calc(50% - var(--space-016));
    }
  }
  @media (max-width: 767px) {
    .m-cta-band__item {
      inline-size: 100%;
    }
  }
  .m-cta-band__link {
    display: flex;
    align-items: center;
    gap: var(--space-016);
    block-size: 100%;
    padding: var(--space-048) var(--space-024) var(--space-048) var(--space-032);
    border-radius: var(--radius-s);
    background-color: var(--color-bg-primary);
    overflow: hidden;
  }
  .m-cta-band__link:focus-visible {
    opacity: 1;
  }
  .m-cta-band__link:focus-visible .m-cta-band__arrow-icon {
    transition: left var(--duration-wipe) var(--ease-wipe);
  }
  .m-cta-band__link:focus-visible .m-cta-band__arrow-icon--before {
    left: 150%;
  }
  .m-cta-band__link:focus-visible .m-cta-band__arrow-icon--after {
    left: 50%;
  }
  @media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .m-cta-band__link:hover {
      opacity: 1;
    }
    .m-cta-band__link:hover .m-cta-band__arrow-icon {
      transition: left var(--duration-wipe) var(--ease-wipe);
    }
    .m-cta-band__link:hover .m-cta-band__arrow-icon--before {
      left: 150%;
    }
    .m-cta-band__link:hover .m-cta-band__arrow-icon--after {
      left: 50%;
    }
  }
  @media (max-width: 767px) {
    .m-cta-band__link {
      padding: var(--space-024);
    }
  }
  .m-cta-band__body {
    flex: 1 0 0;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-016);
    white-space: nowrap;
  }
  @media (max-width: 767px) {
    .m-cta-band__body {
      gap: var(--space-008);
      white-space: normal;
    }
  }
  .m-cta-band__eyebrow {
    color: var(--color-bg-brand);
    font-family: var(--en-font);
    font-size: var(--fz-label);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0;
  }
  .m-cta-band__label {
    color: var(--color-text-primary);
    font-size: var(--fz-button);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  @media (max-width: 767px) {
    .m-cta-band__label {
      font-size: var(--fz-h4);
    }
  }
  .m-cta-band__arrow {
    position: relative;
    flex-shrink: 0;
    display: block;
    inline-size: 3.2rem;
    block-size: 3.2rem;
    overflow: hidden;
    border-radius: 50%;
    background-color: var(--color-bg-brand);
    color: var(--color-text-inverse);
  }
  .m-cta-band {
    /* 位置は left で動かす（丸の中を横断させるため物理プロパティを使う）
       transition はホバー側にだけ持たせている。ホバーを外したときに
       矢印が右から左へ戻るのを見せないため。2枚とも同じ矢印なので、
       解除の瞬間に位置が入れ替わっても見た目は変わらない。 */
  }
  .m-cta-band__arrow-icon {
    position: absolute;
    top: 50%;
    inline-size: 100%;
    block-size: 100%;
    translate: -50% -50%;
  }
  .m-cta-band__arrow-icon--before {
    left: 50%;
  }
  .m-cta-band__arrow-icon--after {
    left: -50%;
  }
  .m-cta-band {
    /* SP（デザイン未提供）: カードは1列に積む */
  }
  @media (max-width: 767px) {
    .m-cta-band {
      padding-inline: var(--space-016);
    }
  }
}
/**
 * 下層ページの見出し（Figma: 施設紹介ページ 355:20822 の [Text]）
 *
 * 高さ 408px は固定ヘッダー（114px）ぶんを含む。
 * ページ下端の曲線は次のセクション側に持たせる。
 */
@layer object {
  .m-page-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-008);
    block-size: 40.8rem;
    padding-block: 7.2rem var(--space-040);
    background-color: var(--color-bg-primary);
    color: var(--color-text-accent);
    text-align: center;
    /* SP の基本形（Figma: 施設紹介_SP / node 364:33468） */
  }
  @media (max-width: 767px) {
    .m-page-head {
      block-size: 26.6rem;
      padding-block: 11.2rem var(--space-080);
      padding-inline: 2.4rem;
    }
  }
  .m-page-head {
    /* アンカーリンク付き（スタッフ一覧など）。
       見出しとリンク列で gap が違うので、見出し側を __group でまとめる。
       SP はアンカーリンクが曲線の下（次のセクションの中）に移るので、
       この中に入るのは __group だけになる（高さは基底と同じ 266px）。 */
  }
  .m-page-head--anchor {
    block-size: auto;
    gap: var(--space-064);
    padding-block: 18.4rem 12.8rem;
  }
  @media (max-width: 767px) {
    .m-page-head--anchor {
      block-size: auto;
      padding-block: 11.2rem var(--space-080);
    }
  }
  .m-page-head {
    /* 高さを内容にまかせる形（会員紹介・卒業会員・お問い合わせ）。
       リード文の行数などで高さが変わるので、高さは固定せず余白だけ持たせる。 */
  }
  .m-page-head--auto {
    block-size: auto;
    gap: var(--space-032);
    padding-block: 18.4rem 12.8rem;
  }
  @media (max-width: 767px) {
    .m-page-head--auto {
      block-size: auto;
      gap: var(--space-024);
      padding-block: 11.2rem var(--space-080);
    }
  }
  .m-page-head__lead {
    max-inline-size: 86.2rem;
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-medium);
    line-height: 1.8;
    letter-spacing: 0.08em;
  }
  .m-page-head__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-008);
  }
  .m-page-head__eyebrow {
    font-family: var(--en-font);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0;
  }
  .m-page-head__title {
    font-size: var(--fz-h1);
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
    letter-spacing: 0.08em;
  }
}
/**
 * カテゴリーへのアンカーリンク（Figma: スタッフ・サポーター PC 355:22324 / SP）
 *
 * PC はページ見出しの中（白地・曲線の上）に横1列、
 * SP は曲線の下（淡い青地＝1つ目のセクションの中）に縦1列、と置き場所が違う。
 * DOM の位置ごと変わるのでテンプレート側で2か所に出し、--pc / --sp で出し分ける。
 */
@layer object {
  .m-anchor-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-024) var(--space-032);
    inline-size: 100%;
    /* PC：ページ見出しの中に置く横並び */
  }
  .m-anchor-nav--pc {
    padding-inline: 15.2rem;
  }
  @media (max-width: 767px) {
    .m-anchor-nav--pc {
      display: none;
    }
  }
  .m-anchor-nav {
    /* SP：曲線の下に置く縦並び */
  }
  .m-anchor-nav--sp {
    display: none;
  }
  @media (max-width: 767px) {
    .m-anchor-nav--sp {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-016);
      padding-inline: 2.4rem;
    }
  }
  .m-anchor-nav__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-008);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.08em;
    color: var(--color-text-accent);
  }
  .m-anchor-nav__item:focus-visible {
    opacity: 1;
  }
  .m-anchor-nav__item:focus-visible .m-anchor-nav__icon {
    translate: 0 0.3rem;
  }
  @media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .m-anchor-nav__item:hover {
      opacity: 1;
    }
    .m-anchor-nav__item:hover .m-anchor-nav__icon {
      translate: 0 0.3rem;
    }
  }
  .m-anchor-nav__icon {
    flex-shrink: 0;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    rotate: 90deg;
    transition: translate var(--duration) var(--ease-out);
  }
}
/**
 * よくある質問（Figma: 施設紹介ページ 355:22197）
 */
@layer object {
  .m-faq {
    position: relative;
    background-color: var(--color-bg-tint);
    padding-block: 11.2rem 12.8rem;
  }
  @media (max-width: 767px) {
    .m-faq {
      padding-block: 4.8rem 12.8rem;
    }
  }
  .m-faq__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-040);
  }
  .m-faq__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-008);
    color: var(--color-text-accent);
    text-align: center;
  }
  .m-faq__eyebrow {
    font-family: var(--en-font);
    font-size: var(--fz-body-small);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0;
  }
  .m-faq__title {
    font-size: var(--fz-h3);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  @media (max-width: 767px) {
    .m-faq__title {
      font-size: var(--fz-h2);
    }
  }
  .m-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-056);
    inline-size: 100%;
    padding: var(--space-064) var(--space-120);
    border-radius: var(--radius-s);
    background-color: var(--color-bg-primary);
  }
  @media (max-width: 767px) {
    .m-faq__list {
      gap: var(--space-040);
      padding: var(--space-032) var(--space-024);
    }
  }
  .m-faq__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-008);
  }
  .m-faq__question {
    display: flex;
    align-items: center;
    gap: var(--space-008);
  }
  @media (max-width: 767px) {
    .m-faq__question {
      align-items: flex-start;
    }
  }
  .m-faq__q {
    flex-shrink: 0;
    color: var(--color-blue-400);
    font-family: var(--en-font);
    font-size: var(--fz-h3);
    font-weight: var(--font-weight-regular);
    line-height: 1.6;
    letter-spacing: 0.04em;
  }
  @media (max-width: 767px) {
    .m-faq__q {
      font-size: var(--fz-h3);
    }
  }
  .m-faq__question-text {
    flex: 1 0 0;
    min-inline-size: 0;
    color: var(--color-gray-900);
    font-size: var(--fz-body-large);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  @media (max-width: 767px) {
    .m-faq__question-text {
      font-size: var(--fz-body-default);
    }
  }
  .m-faq__divider {
    block-size: 1px;
    background-image: repeating-linear-gradient(to right, var(--color-border-dash) 0 2px, transparent 2px 4px);
  }
  .m-faq__answer {
    color: var(--color-text-secondary);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-regular);
    line-height: 1.8;
  }
  @media (max-width: 767px) {
    .m-faq__answer {
      font-size: var(--fz-body-small);
    }
  }
  .m-faq__answer-text + .m-faq__answer-text {
    margin-block-start: var(--space-016);
  }
  .m-faq__link {
    text-decoration: underline;
  }
}
/**
 * 会員カードを並べるセクション
 * （Figma: 会員紹介 355:22829 / 卒業会員 355:23580 — どちらも同じ組み）
 */
@layer object {
  .m-member-list {
    position: relative;
    background-color: var(--color-bg-tint);
    padding-block: 8.8rem 13.6rem;
  }
  @media (max-width: 767px) {
    .m-member-list {
      padding-block: 4.8rem 9.6rem;
    }
  }
  .m-member-list__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-080);
  }
  @media (max-width: 767px) {
    .m-member-list__inner {
      gap: var(--space-048);
    }
  }
  .m-member-list__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-040) var(--space-024);
    inline-size: 100%;
  }
  @media (max-width: 1179px) {
    .m-member-list__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 767px) {
    .m-member-list__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-024);
    }
  }
  .m-member-list__item {
    display: flex;
  }
  .m-member-list__empty {
    color: var(--color-text-secondary);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-regular);
    line-height: 1.8;
    letter-spacing: 0.08em;
  }
  .m-member-list__action {
    display: flex;
    justify-content: center;
  }
}
/**
 * 会員カード（Figma: 会員紹介 355:22829 / 卒業会員 355:23580 の Frame 1707487132）
 *
 * 右上に灯台のイラストを薄く敷き、その上に会員情報を重ねる。
 * 卒業会員では紹介文の下に「支援エピソード」のボックスが入る。
 */
@layer object {
  .m-member-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-016);
    inline-size: 100%;
    padding: var(--space-016) var(--space-024) var(--space-024);
    border-radius: var(--radius-s);
    background-color: var(--color-bg-primary);
  }
  .m-member-card__deco {
    position: absolute;
    z-index: -1;
    inset-block-start: 2.771rem;
    inset-inline-end: 2.149rem;
    inline-size: 9.048rem;
    block-size: 10.828rem;
    opacity: 0.6;
    pointer-events: none;
  }
  .m-member-card__badge {
    padding: 0.4rem var(--space-008);
    border-radius: var(--radius-xxs);
    background-color: var(--color-bg-tint);
    color: var(--color-text-accent);
    font-size: var(--fz-caption);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    letter-spacing: 0;
  }
  .m-member-card {
    /* ------------------------------------------------------------------
     * 顔写真 ＋ 会社名・氏名
     * ---------------------------------------------------------------- */
  }
  .m-member-card__profile {
    display: flex;
    align-items: center;
    gap: var(--space-016);
    inline-size: 100%;
  }
  .m-member-card__avatar {
    flex-shrink: 0;
    inline-size: 7.2rem;
    block-size: 7.2rem;
    overflow: hidden;
    border-radius: 50%;
    background-color: var(--color-bg-tertiary);
  }
  .m-member-card__photo {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .m-member-card__names {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: 0.4rem;
    min-inline-size: 0;
  }
  .m-member-card__company {
    color: var(--color-text-secondary);
    font-size: var(--fz-body-small);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.08em;
  }
  .m-member-card__name {
    color: var(--color-text-primary);
    font-size: var(--fz-body-large);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  .m-member-card {
    /* ------------------------------------------------------------------
     * 紹介文・リンク
     * ---------------------------------------------------------------- */
  }
  .m-member-card__text {
    inline-size: 100%;
    color: var(--color-text-secondary);
    font-size: var(--fz-body-small);
    font-weight: var(--font-weight-regular);
    line-height: 1.8;
    letter-spacing: 0.08em;
  }
  .m-member-card__text > * + * {
    margin-block-start: var(--space-008);
  }
  .m-member-card {
    /* 支援エピソード（卒業会員のみ） */
  }
  .m-member-card__episode {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-008);
    inline-size: 100%;
    padding: var(--space-016);
    border-radius: 0.4rem;
    background-color: var(--color-bg-tertiary);
  }
  .m-member-card__episode-head {
    display: flex;
    align-items: center;
    gap: var(--space-008);
  }
  .m-member-card__episode-icon {
    flex-shrink: 0;
    inline-size: 2.4rem;
    block-size: 2.4rem;
  }
  .m-member-card__episode-title {
    color: var(--color-text-accent);
    font-size: var(--fz-body-small);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.08em;
  }
  .m-member-card__episode-text {
    inline-size: 100%;
    color: var(--color-text-secondary);
    font-size: var(--fz-body-small);
    font-weight: var(--font-weight-regular);
    line-height: 1.8;
    letter-spacing: 0.08em;
  }
  .m-member-card__episode-text > * + * {
    margin-block-start: var(--space-008);
  }
  .m-member-card__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
    inline-size: 100%;
    margin-block-start: auto;
  }
  .m-member-card__sns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-008);
  }
  .m-member-card__sns-link {
    display: block;
    inline-size: 1.6rem;
    block-size: 1.6rem;
  }
  .m-member-card__sns-link:focus-visible {
    opacity: 0.6;
  }
  @media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .m-member-card__sns-link:hover {
      opacity: 0.6;
    }
  }
  .m-member-card__url {
    display: block;
    inline-size: 100%;
    overflow-wrap: anywhere;
    color: var(--color-text-tertiary);
    font-size: var(--fz-body-small);
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
    letter-spacing: 0.08em;
  }
  .m-member-card__url:focus-visible {
    color: var(--color-text-accent);
    opacity: 1;
  }
  @media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .m-member-card__url:hover {
      color: var(--color-text-accent);
      opacity: 1;
    }
  }
}
/**
 * フォームの切り替えタブ（Figma: お問い合わせ 368:7139 の Frame 1707486854）
 *
 * 「専門家への無料相談」と「お問い合わせ」を行き来する。
 * 中身が違うページなので、切り替えはページ遷移で行う。
 */
@layer object {
  .m-form-tabs {
    display: flex;
    align-items: center;
    gap: var(--space-008);
    inline-size: 100%;
    padding: var(--space-008);
    border-radius: 10.4rem;
    background-color: var(--color-bg-primary);
    filter: drop-shadow(0 0.5rem 0.55rem rgba(107, 107, 107, 0.02));
  }
  .m-form-tabs__item {
    flex: 1 0 0;
    min-inline-size: 0;
  }
  @media (max-width: 767px) {
    .m-form-tabs__item {
      inline-size: 100%;
    }
  }
  .m-form-tabs__link {
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 4.8rem;
    padding-inline: var(--space-008);
    border-radius: 10.4rem;
    color: var(--color-text-tertiary);
    text-align: center;
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.08em;
  }
  .m-form-tabs__link:focus-visible {
    opacity: 1;
    color: var(--color-text-accent);
    background-color: var(--color-bg-tint);
  }
  @media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .m-form-tabs__link:hover {
      opacity: 1;
      color: var(--color-text-accent);
      background-color: var(--color-bg-tint);
    }
  }
  .m-form-tabs__item--current .m-form-tabs__link, .m-form-tabs__link[aria-current=page] {
    block-size: 5.5rem;
    background-color: var(--color-bg-brand);
    color: var(--color-text-inverse);
    cursor: default;
  }
  .m-form-tabs__item--current .m-form-tabs__link:focus-visible, .m-form-tabs__link[aria-current=page]:focus-visible {
    background-color: var(--color-bg-brand);
    color: var(--color-text-inverse);
  }
  @media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .m-form-tabs__item--current .m-form-tabs__link:hover, .m-form-tabs__link[aria-current=page]:hover {
      background-color: var(--color-bg-brand);
      color: var(--color-text-inverse);
    }
  }
  @media (max-width: 767px) {
    .m-form-tabs {
      flex-direction: column;
      border-radius: 3.2rem;
    }
  }
}
/**
 * お問い合わせフォーム（Figma: お問い合わせ 368:7139）
 *
 * 中身は Contact Form 7 が出力するので、
 * ここでは CF7 のマークアップに合わせて見た目だけ当てている。
 * フォームの項目そのものは管理画面（お問い合わせ > コンタクトフォーム）で編集する。
 */
@layer object {
  .m-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-048);
    inline-size: 100%;
    /* ------------------------------------------------------------------
     * 項目
     * ---------------------------------------------------------------- */
  }
  .m-form__field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-008);
    inline-size: 100%;
  }
  .m-form__field:has(input[type=checkbox], input[type=radio]) {
    gap: var(--space-016);
  }
  .m-form__label {
    display: flex;
    align-items: center;
    gap: var(--space-008);
    color: var(--color-text-primary);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.08em;
  }
  .m-form__badge {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    block-size: 2.4rem;
    padding-inline: var(--space-008);
    border-radius: var(--radius-xxs);
    background-color: var(--color-bg-blue);
    color: var(--color-text-inverse);
    font-size: var(--fz-caption);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    letter-spacing: 0;
  }
  .m-form__badge--optional {
    background-color: var(--color-text-tertiary);
  }
  .m-form__control {
    inline-size: 100%;
  }
  .m-form__control .wpcf7-form-control-wrap {
    display: block;
  }
  .m-form__control--half {
    max-inline-size: 40rem;
  }
  @media (max-width: 767px) {
    .m-form__control--half {
      max-inline-size: none;
    }
  }
  .m-form {
    /**
     * 項目の下に添える注記（※オンラインの場合には〜）
     *
     * 余白は __field の gap（ラジオを含む項目は 16）で付くので、ここでは付けない。
     */
  }
  .m-form__note {
    color: var(--color-text-secondary);
    font-size: var(--fz-body-small);
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
    letter-spacing: 0.08em;
  }
  .m-form {
    /* ------------------------------------------------------------------
     * 入力欄（CF7 の出力に当てる）
     * ---------------------------------------------------------------- */
  }
  .m-form input[type=text],
  .m-form input[type=email],
  .m-form input[type=tel],
  .m-form input[type=url],
  .m-form input[type=number],
  .m-form textarea,
  .m-form select {
    inline-size: 100%;
    padding: var(--space-016) var(--space-024);
    border: 1px solid var(--color-border-strong);
    border-radius: 0.4rem;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.08em;
  }
  .m-form input[type=text]::placeholder,
  .m-form input[type=email]::placeholder,
  .m-form input[type=tel]::placeholder,
  .m-form input[type=url]::placeholder,
  .m-form input[type=number]::placeholder,
  .m-form textarea::placeholder,
  .m-form select::placeholder {
    color: var(--color-border-strong);
    font-weight: var(--font-weight-regular);
  }
  .m-form input[type=text]:focus-visible,
  .m-form input[type=email]:focus-visible,
  .m-form input[type=tel]:focus-visible,
  .m-form input[type=url]:focus-visible,
  .m-form input[type=number]:focus-visible,
  .m-form textarea:focus-visible,
  .m-form select:focus-visible {
    outline: 2px solid var(--color-bg-brand);
    outline-offset: 3px;
    border-radius: 0.4rem;
  }
  .m-form input[type=text],
  .m-form input[type=email],
  .m-form input[type=tel],
  .m-form input[type=url],
  .m-form input[type=number] {
    block-size: 5.6rem;
  }
  .m-form textarea {
    display: block;
    block-size: 18rem;
    padding: var(--space-024);
    resize: vertical;
  }
  .m-form {
    /* ------------------------------------------------------------------
     * チェックボックス・ラジオ
     * ---------------------------------------------------------------- */
  }
  .m-form input[type=checkbox],
  .m-form input[type=radio] {
    flex-shrink: 0;
    appearance: none;
    inline-size: 1.2rem;
    block-size: 1.2rem;
    margin: 0;
    border: 1px solid var(--color-text-secondary);
    background-color: var(--color-bg-primary);
    cursor: pointer;
    transition: border-color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
  }
  .m-form input[type=checkbox]:focus-visible,
  .m-form input[type=radio]:focus-visible {
    outline: 2px solid var(--color-bg-brand);
    outline-offset: 3px;
    border-radius: 0.4rem;
  }
  .m-form input[type=checkbox] {
    border-width: 0.133rem;
    border-radius: 0.2rem;
  }
  .m-form input[type=checkbox]:checked {
    border-color: var(--color-bg-blue);
    background-color: var(--color-bg-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
  }
  .m-form input[type=radio] {
    border-radius: 50%;
    block-size: 1.6rem;
    inline-size: 1.6rem;
  }
  .m-form input[type=radio]:checked {
    border-color: var(--color-bg-blue);
    background-color: var(--color-bg-blue);
    background-image: radial-gradient(circle at center, #fff 0 0.3rem, transparent 0.3rem);
  }
  .m-form {
    /* きっかけの「SNS」「その他」は、チェックの下に入力欄が付く */
  }
  .m-form__check-columns {
    display: flex;
    gap: var(--space-016);
    inline-size: 100%;
    margin-block-start: var(--space-016);
  }
  @media (max-width: 767px) {
    .m-form__check-columns {
      flex-direction: column;
    }
  }
  .m-form__check-column {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: var(--space-008);
    min-inline-size: 0;
  }
  .m-form {
    /* ------------------------------------------------------------------
     * 送信ボタンとエラー表示
     * ---------------------------------------------------------------- */
  }
  .m-form__submit {
    position: relative;
    display: flex;
    justify-content: center;
    inline-size: 100%;
    margin-block-start: var(--space-016);
  }
  .m-form input[type=submit] {
    flex-shrink: 0;
    inline-size: 28rem;
    max-inline-size: 100%;
    block-size: 6.4rem;
    padding-inline: var(--space-024);
    border: none;
    border-radius: var(--radius-pill);
    background-color: var(--color-bg-blue);
    color: var(--color-text-inverse);
    cursor: pointer;
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.08em;
    transition: opacity var(--duration) var(--ease-out);
  }
  .m-form input[type=submit]:focus-visible {
    opacity: 0.8;
  }
  @media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .m-form input[type=submit]:hover {
      opacity: 0.8;
    }
  }
}
/**
 * Contact Form 7 が自前で当てているスタイルの打ち消し
 *
 * プラグインの CSS はカスケードレイヤーの外にあり、レイヤー内のどの指定よりも強い。
 * そのためここだけ @layer を使わず、詳細度で勝つように .m-form を前置している。
 */
.m-form .wpcf7-checkbox,
.m-form .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-008) var(--space-032);
}
.m-form .wpcf7-radio {
  flex-direction: column;
  gap: var(--space-008);
}
.m-form .m-form__control--columns .wpcf7-radio {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-012) var(--space-016);
}
@media (max-width: 767px) {
  .m-form .m-form__control--columns .wpcf7-radio {
    grid-template-columns: minmax(0, 1fr);
  }
}
.m-form .wpcf7-list-item {
  margin: 0;
}
.m-form .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: var(--space-012);
  cursor: pointer;
}
.m-form .wpcf7-list-item-label {
  color: var(--color-text-secondary);
  font-size: var(--fz-body-default);
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.m-form .wpcf7-not-valid-tip {
  margin-block-start: var(--space-008);
  color: var(--color-text-error);
  font-size: var(--fz-body-small);
  line-height: 1.4;
}
.m-form .wpcf7-not-valid {
  border-color: var(--color-text-error);
}
.m-form .wpcf7-response-output {
  margin: var(--space-024) 0 0;
  padding: var(--space-016);
  border-radius: 0.4rem;
  font-size: var(--fz-body-small);
  line-height: 1.8;
}
.m-form .wpcf7-spinner {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0;
  translate: 0 -50%;
  margin: 0;
}

/**
 * フォームページの本体
 * （Figma: お問い合わせ 368:7139 / 専門家への無料相談 368:5772 の Container）
 */
@layer object {
  .m-form-section {
    position: relative;
    background-color: var(--color-bg-tint);
    padding-block: 8.8rem 12.8rem;
  }
  @media (max-width: 767px) {
    .m-form-section {
      padding-block: 4.8rem 9.6rem;
    }
  }
  .m-form-section__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-064);
    inline-size: 100%;
    max-inline-size: 84rem;
    margin-inline: auto;
    padding-inline: 2rem;
  }
  @media (max-width: 767px) {
    .m-form-section__inner {
      gap: var(--space-032);
      padding-inline: 2.4rem;
    }
  }
  .m-form-section__tabs {
    inline-size: 72rem;
    max-inline-size: 100%;
    margin-inline: auto;
  }
  .m-form-section {
    /* タブの下に置く説明文（Figma: 368:5786） */
  }
  .m-form-section__lead {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-024);
    inline-size: 100%;
    color: var(--color-text-secondary);
    margin-block-start: -1.6rem;
  }
  @media (max-width: 767px) {
    .m-form-section__lead {
      margin-block-start: 0;
    }
  }
  .m-form-section__lead-text {
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-regular);
    line-height: 1.8;
    letter-spacing: 0.08em;
  }
  .m-form-section__lead-note {
    font-size: var(--fz-body-small);
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
    letter-spacing: 0.08em;
  }
  .m-form-section__body {
    inline-size: 100%;
  }
}
/**
 * トップページ全体
 */
@layer object {
  .p-top {
    color: var(--color-text-primary);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-regular);
    line-height: 1.8;
    letter-spacing: 0.08em;
    overflow-x: clip;
  }
}
/**
 * キービジュアル（Figma: KV / node 322:1895・355:19019）
 *
 * 写真はアートディレクション上の固定配置なので、RTL で反転させたくない。
 * そのため論理プロパティではなく物理プロパティ（left / top）を使う。
 * 位置・サイズはデザイン幅 1440px に対する % なので、幅に追従して等比縮小する。
 *
 * 各枠には2枚の写真が重なっていて、時間差でクロスフェードする。
 * JS は使わず CSS アニメーションだけで動かしているので、
 * OS の「視差効果を減らす」設定時は foundation/_base.scss 側で自動的に停止する。
 */
@layer object {
  .p-fv {
    position: relative;
    inline-size: 100%;
    overflow: hidden;
    background-color: #eff2f7;
    background-image: radial-gradient(120% 88% at 42% 62%, #fcfcfd 0%, #f6f8fb 38%, #eef2f7 68%, #e2e9f1 100%);
  }
  .p-fv__stage {
    position: relative;
    inline-size: 100%;
    max-inline-size: var(--outer-width);
    margin-inline: auto;
    aspect-ratio: 1440/916;
  }
  @media (max-width: 767px) {
    .p-fv__stage {
      max-inline-size: 48rem;
      aspect-ratio: 390/801;
    }
  }
  .p-fv {
    /**
     * KVのキャッチコピー
     *
     * Figma の指定書体 A1ゴシック（モリサワの有料書体）が Web で使えないため、
     * デザイナー支給のアウトライン SVG（include/renewal/fv-copy.php）で出している。
     * 位置は文字の行ボックスではなく「字形そのもの」が基準になるので、
     * Figma のレンダリング画像から実測したインクの位置を指定している。
     * font-size は SVG の寸法（em 指定）の基準としてだけ効く。
     */
  }
  .p-fv__copy {
    position: absolute;
    left: 13.472%;
    top: calc(21.07% - 1.6rem);
    z-index: 3;
    color: var(--color-text-accent);
    font-size: var(--fz-h1);
  }
  @media (max-width: 767px) {
    .p-fv__copy {
      left: 8.526%;
      top: 78.976%;
      translate: 0 -50%;
      font-size: 3.6rem;
    }
  }
  .p-fv__copy-svg {
    display: block;
    inline-size: 7.4375em;
    block-size: auto;
  }
  .p-fv {
    /* コピーの1文字。--char-index は front-page.php が出力する */
  }
  .p-fv__char {
    animation: p-fv-char-in 0.18s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: calc(var(--char-index, 0) * 0.085s);
  }
  .p-fv {
    /**
     * コピーの下に置く施設名
     *
     * コピーと同じアウトライン SVG（images/renewal/kv-subcopy.svg）なので、
     * 位置もコピーと同じく字形基準。コピーの字形の下端から余白を取っている。
     * opacity: 0 は @keyframes 側だけに書き、モーション低減時はそのまま表示させる。
     */
  }
  .p-fv__subcopy {
    position: absolute;
    left: 13.472%;
    top: calc(calc(21.07% - 1.6rem) + 2.3125em + 2.4rem);
    z-index: 3;
    font-size: var(--fz-h1);
    animation: p-fv-subcopy-in 0.9s cubic-bezier(0.4, 0, 0.2, 1) 1.3s both;
  }
  @media (max-width: 767px) {
    .p-fv__subcopy {
      left: 8.205%;
      top: calc(78.976% + 4.1625rem + 1.9rem);
      font-size: 3.2rem;
    }
  }
  .p-fv__subcopy-svg {
    display: block;
    inline-size: 5.9583333333em;
    block-size: auto;
  }
  .p-fv {
    /* 背景を流れる英字 */
  }
  .p-fv__marquee {
    position: absolute;
    left: 0;
    top: 72.3%;
    translate: 0 -50%;
    inline-size: 100%;
    overflow: hidden;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
  }
  @media (max-width: 767px) {
    .p-fv__marquee {
      top: 78.902%;
    }
  }
  .p-fv__marquee-text {
    display: inline-block;
    padding-inline-end: 6rem;
    font-family: var(--en-font);
    font-size: min(8.47vw, 12.2rem);
    font-weight: 100;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(17, 107, 178, 0.07);
    animation: p-fv-marquee 60s linear infinite;
  }
  @media (max-width: 767px) {
    .p-fv__marquee-text {
      font-size: min(16.41vw, 6.4rem);
    }
  }
  .p-fv {
    /* ------------------------------------------------------------------
     * 写真（2枚をクロスフェード）
     * ---------------------------------------------------------------- */
    /* 写真は角丸なしで書き出してあるので、角丸はここで付ける。
       画像側にも同じ値を持たせているのは、Safari が transform 中に
       overflow: hidden + border-radius の切り抜きを外すことがあるため。

       2枚の写真はグリッドの同じマスに重ねる。
       以前は `position: absolute` + `inset: 0` で重ねていたが、iOS Safari が
       2枚目だけ基準位置を取り違えて右下にずらして描画することがあり、
       切り替わった瞬間に1枚目と2枚目が同時に見えてしまっていた。
       グリッドなら絶対配置の基準位置を使わないので、この取り違えが起きない。 */
  }
  .p-fv__photo {
    --photo-radius: 1.6rem;
    position: absolute;
    display: grid;
    grid-template: minmax(0, 1fr)/minmax(0, 1fr);
    overflow: hidden;
    border-radius: var(--photo-radius);
    box-shadow: var(--shadow-float);
    animation: p-fv-photo-in 1s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  @media (max-width: 767px) {
    .p-fv__photo {
      --photo-radius: var(--radius-s);
    }
  }
  .p-fv__image {
    grid-area: 1/1;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: var(--photo-radius);
  }
  .p-fv__image--alt {
    opacity: 0;
    animation: p-fv-crossfade 8.4s ease-in-out infinite both;
  }
  .p-fv__photo--01 {
    left: 2.2917%;
    top: 30.6769%;
    inline-size: 16.5278%;
    aspect-ratio: 238 / 328;
    animation-delay: 0.05s;
  }
  .p-fv__photo--01 .p-fv__image--alt {
    animation-delay: 0s;
  }
  .p-fv__photo--02 {
    left: 24.0278%;
    top: 42.5764%;
    inline-size: 18.0556%;
    aspect-ratio: 260 / 340;
    animation-delay: 0.2s;
  }
  .p-fv__photo--02 .p-fv__image--alt {
    animation-delay: 0.6s;
  }
  .p-fv__photo--03 {
    left: 47.7083%;
    top: 11.0262%;
    inline-size: 15.2083%;
    aspect-ratio: 219 / 287;
    animation-delay: 0.35s;
  }
  .p-fv__photo--03 .p-fv__image--alt {
    animation-delay: 1.2s;
  }
  .p-fv__photo--04 {
    left: 67.8472%;
    top: 31.5502%;
    inline-size: 30.4167%;
    aspect-ratio: 438 / 308;
    animation-delay: 0.5s;
  }
  .p-fv__photo--04 .p-fv__image--alt {
    animation-delay: 1.8s;
  }
  .p-fv__photo--05 {
    left: 60.9028%;
    top: 59.1703%;
    inline-size: 12.0139%;
    aspect-ratio: 173 / 115;
    animation-delay: 0.65s;
  }
  .p-fv__photo--05 .p-fv__image--alt {
    animation-delay: 2.4s;
  }
  .p-fv__photo--05 {
    z-index: 2;
  }
  .p-fv {
    /* ------------------------------------------------------------------
     * SP（Figma: 387:7789）
     *
     * 390 x 801 の枠に写真4枚（PC の 01 は使わない）とコピーを絶対配置する。
     * 数値は 390x801 に対する % なので幅に追従して等比縮小し、
     * 幅が広い端末では 480px で頭打ちにして間延びを防ぐ。
     * ---------------------------------------------------------------- */
  }
  @media (max-width: 767px) {
    .p-fv__photo--02 {
      left: -2.436%;
      top: 30.712%;
      inline-size: 41.538%;
      aspect-ratio: 162 / 210;
    }
    .p-fv__photo--03 {
      left: 46.026%;
      top: 13.858%;
      inline-size: 49.744%;
      aspect-ratio: 194 / 251;
    }
    .p-fv__photo--04 {
      left: 59.615%;
      top: 51.186%;
      inline-size: 42.051%;
      aspect-ratio: 164 / 123;
    }
    .p-fv__photo--05 {
      left: 38.077%;
      top: 61.673%;
      inline-size: 26.154%;
      aspect-ratio: 102 / 67;
    }
  }
  @media (max-width: 767px) {
    .p-fv__photo--01 {
      display: none;
    }
  }
}
@keyframes p-fv-marquee {
  from {
    translate: 0 0;
  }
  to {
    translate: -50% 0;
  }
}
@keyframes p-fv-crossfade {
  0%, 35.7142857143% {
    opacity: 0;
  }
  50%, 85.7142857143% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes p-fv-photo-in {
  from {
    opacity: 0;
    translate: 0 2.4rem;
    scale: 0.98;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}
@keyframes p-fv-char-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes p-fv-subcopy-in {
  from {
    opacity: 0;
    translate: 0 1.2rem;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
/**
 * NEWS＆EVENT（Figma: Background 355:15286）
 * 青ベタ背景 + 4枚並びのカードスライダー
 */
@layer object {
  .p-news {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-056);
    background-color: var(--color-bg-blue);
    color: var(--color-text-inverse);
    padding-block: 8.8rem 15.6rem;
  }
  @media (max-width: 767px) {
    .p-news {
      padding-block: 6.4rem 10.4rem;
    }
  }
  .p-news__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-032);
    inline-size: 100%;
  }
  @media (max-width: 767px) {
    .p-news__inner {
      gap: var(--space-024);
    }
  }
  .p-news {
    /* 見出し（欧文 + 和文サブ） */
  }
  .p-news__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-016);
    text-align: center;
  }
  @media (max-width: 767px) {
    .p-news__heading {
      gap: var(--space-008);
    }
  }
  .p-news__en {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-008);
    font-family: var(--en-font);
    font-size: var(--fz-h1);
    font-weight: var(--font-weight-light);
    line-height: 3.74rem;
    letter-spacing: 0.104em;
    white-space: nowrap;
  }
  @media (max-width: 767px) {
    .p-news__en {
      gap: 0.7rem;
      font-size: var(--fz-h2);
      line-height: 3.2rem;
      letter-spacing: 0.135em;
    }
  }
  .p-news__amp {
    letter-spacing: 0.0625em;
  }
  @media (max-width: 767px) {
    .p-news__amp {
      letter-spacing: 0.081em;
    }
  }
  .p-news__sub {
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-regular);
    line-height: 1.8;
    letter-spacing: 0.08em;
  }
  @media (max-width: 767px) {
    .p-news__sub {
      font-size: var(--fz-body-medium);
    }
  }
  .p-news {
    /**
     * カード
     *
     * Figma では「現行サイトと同様」と指定されているため、
     * 現行サイト（style_pc.css の `article.news .slide .slide_box`）の値をそのまま移植している。
     * フォントサイズを px 固定にしているのも現行サイトに合わせるため（SPでも変わらない）。
     */
  }
  .p-news__list {
    inline-size: 100%;
  }
  .p-news__list .slick-list {
    margin-inline: -1rem;
    margin-block-end: -1rem;
    padding-block-end: 1rem;
  }
  .p-news__item {
    display: flex;
    flex-direction: column;
    margin-inline: 1rem;
    background-color: var(--color-bg-primary);
  }
  @media (max-width: 767px) {
    .p-news__item {
      margin-inline: 1.9rem;
    }
  }
  .p-news__thumb {
    position: relative;
    display: block;
    inline-size: 100%;
    aspect-ratio: 1280/720;
    background: #ccc center/cover no-repeat;
    line-height: 1;
    transition: opacity var(--duration) var(--ease-out);
  }
  .p-news__thumb:focus-visible {
    opacity: 0.8;
  }
  @media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .p-news__thumb:hover {
      opacity: 0.8;
    }
  }
  .p-news__category {
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    display: inline-block;
    padding: 0.3rem 1rem;
    background-color: var(--color-bg-blue);
    color: var(--color-text-inverse);
    font-size: 1.2rem;
    font-weight: var(--font-weight-regular);
    line-height: 1.6rem;
    letter-spacing: 0.1rem;
  }
  .p-news__category--news {
    background-color: var(--color-yellow-500);
    color: var(--color-text-accent);
  }
  .p-news__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.8rem 2.4rem;
    color: var(--color-text-accent);
  }
  .p-news__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    inline-size: 100%;
    margin-block-end: 0.5rem;
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    line-height: 2.4rem;
    transition: opacity var(--duration) var(--ease-out);
  }
  .p-news__title:focus-visible {
    opacity: 0.5;
  }
  @media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .p-news__title:hover {
      opacity: 0.5;
    }
  }
  .p-news__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    inline-size: 100%;
    font-size: 1.2rem;
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
  }
  .p-news__tags {
    display: flex;
    flex-wrap: wrap;
    inline-size: 100%;
    padding-block-start: 0.5rem;
  }
  .p-news__tag {
    padding-inline-end: 1rem;
    font-size: 1rem;
    line-height: 2.4rem;
  }
  .p-news__tag:last-child {
    padding-inline-end: 0;
  }
  .p-news__button {
    margin-block-start: 2rem;
  }
  .p-news {
    /* ------------------------------------------------------------------
     * SP（Figma: SP / node 355:17405）
     * ---------------------------------------------------------------- */
  }
  @media (max-width: 767px) {
    .p-news {
      gap: var(--space-032);
    }
  }
  @media (max-width: 767px) {
    .p-news__list .slick-list {
      margin-inline: 0;
    }
  }
}
/**
 * 西大井創業支援センターとは？（Figma: Background 355:15487）
 */
@layer object {
  .p-about {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-096);
    overflow: clip;
    background-color: var(--color-bg-tint);
    padding-block: 9rem 24rem;
  }
  @media (max-width: 767px) {
    .p-about {
      padding-block: 4rem 12.8rem;
    }
  }
  .p-about__intro {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-048);
    inline-size: 100%;
  }
  @media (max-width: 767px) {
    .p-about__intro {
      gap: var(--space-032);
    }
  }
  .p-about__body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-040);
  }
  @media (max-width: 767px) {
    .p-about__body {
      align-items: stretch;
      gap: var(--space-032);
      inline-size: 100%;
    }
  }
  .p-about {
    /* リード文（黄色マーカーは背面の矩形で表現する） */
  }
  .p-about__lead {
    position: relative;
    isolation: isolate;
    text-align: center;
    color: var(--color-text-primary);
    font-size: var(--fz-h4);
    font-weight: var(--font-weight-medium);
    line-height: 2.2;
    letter-spacing: 0.08em;
  }
  @media (max-width: 767px) {
    .p-about__lead {
      inline-size: 100%;
      font-size: var(--fz-h4);
      line-height: 1.8;
    }
  }
  .p-about__marker {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 6.1rem;
    z-index: -1;
    translate: -50% 0;
    inline-size: 51.6rem;
    block-size: 3.8rem;
    background-color: var(--color-yellow-300);
  }
  @media (max-width: 767px) {
    .p-about__marker {
      inset-block-start: 7.9rem;
      inline-size: 30rem;
      block-size: 2.6rem;
    }
    .p-about__marker::after {
      content: "";
      position: absolute;
      inset-inline-start: 50%;
      inset-block-start: 3.5rem;
      translate: -50% 0;
      inline-size: 13.3rem;
      block-size: 2.6rem;
      background-color: var(--color-yellow-300);
    }
  }
  .p-about__accent {
    color: var(--color-text-accent);
  }
  .p-about__text {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--fz-body-medium);
    font-weight: var(--font-weight-regular);
    line-height: 2.2;
    letter-spacing: 0.08em;
  }
  @media (max-width: 767px) {
    .p-about__text {
      text-align: start;
      font-size: var(--fz-body-default);
      line-height: 1.8;
    }
  }
  .p-about__paragraph + .p-about__paragraph {
    margin-block-start: var(--space-024);
  }
  .p-about {
    /* 周囲に散らす写真（アートディレクション上の固定配置） */
  }
  .p-about__photos {
    position: absolute;
  }
  .p-about__photos--left {
    left: -1.2rem;
    top: 13.8rem;
    inline-size: 24.128rem;
    block-size: 40.2387rem;
  }
  @media (max-width: 1179px) {
    .p-about__photos--left {
      display: none;
    }
  }
  .p-about__photos--right {
    left: 96.4rem;
    top: 22.8rem;
    inline-size: 20.9rem;
    block-size: 35.7349rem;
  }
  @media (max-width: 1179px) {
    .p-about__photos--right {
      display: none;
    }
  }
  .p-about__photo {
    position: absolute;
    overflow: hidden;
  }
  .p-about__photo--01 {
    inline-size: 19.6rem;
    block-size: 24rem;
    inset: 0 auto auto 0;
    border-radius: var(--radius-s);
  }
  .p-about__photo--02 {
    --fade-delay: 0.2s;
    inline-size: 17.428rem;
    block-size: 11.7387rem;
    inset: 28.5rem auto auto 6.7rem;
    border-radius: var(--radius-s);
  }
  .p-about__photo--03 {
    inline-size: 12.3761rem;
    block-size: 14.9988rem;
    inset: 0 auto auto 8.524rem;
    border-radius: var(--radius-m);
  }
  .p-about__photo--04 {
    --fade-delay: 0.2s;
    inline-size: 14.7529rem;
    block-size: 17.8675rem;
    inset: 17.867rem auto auto 0;
    border-radius: var(--radius-m);
  }
  @media (max-width: 767px) {
    .p-about__photo {
      inset: auto;
      block-size: auto;
      border-radius: var(--radius-s);
    }
  }
  .p-about__image {
    inline-size: 100%;
    block-size: 100%;
    border-radius: var(--radius-m);
    object-fit: cover;
  }
  .p-about {
    /* 支援対象カード */
  }
  .p-about__target {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-032);
    inline-size: 100%;
    /* 支援対象カード */
  }
  @media (max-width: 767px) {
    .p-about__target {
      gap: var(--space-024);
    }
  }
  .p-about__target-title {
    color: var(--color-text-primary);
    font-size: 2rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  @media (max-width: 767px) {
    .p-about__target-title {
      font-size: 1.8rem;
    }
  }
  .p-about__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-016);
    inline-size: 100%;
  }
  @media (max-width: 767px) {
    .p-about__list {
      gap: var(--space-008);
    }
  }
  .p-about__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    inline-size: 36.8rem;
    padding: var(--space-024) var(--space-032);
    border-radius: var(--radius-m);
    background-color: var(--color-bg-primary);
    text-align: center;
    color: var(--color-text-primary);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.08em;
  }
  @media (max-width: 1179px) {
    .p-about__item {
      inline-size: calc(50% - var(--space-016));
    }
  }
  @media (max-width: 767px) {
    .p-about__item {
      inline-size: calc(50% - 0.4rem);
      gap: var(--space-008);
      padding: var(--space-016) var(--space-008);
      border-radius: var(--radius-s);
      font-size: var(--fz-body-small);
    }
  }
  .p-about__check {
    flex-shrink: 0;
    inline-size: 2.4rem;
    block-size: 2.4rem;
  }
  @media (max-width: 767px) {
    .p-about__photos--right {
      margin-top: var(--space-032);
      display: block;
      position: relative;
      left: auto;
      top: auto;
      inline-size: 100%;
      block-size: auto;
      aspect-ratio: 342/308;
    }
  }
  @media (max-width: 767px) {
    .p-about__photo--03 {
      left: 54.971%;
      top: 2.922%;
      inline-size: 40.643%;
      aspect-ratio: 139/168;
    }
  }
  @media (max-width: 767px) {
    .p-about__photo--04 {
      left: 2.339%;
      top: 35.714%;
      inline-size: 47.661%;
      aspect-ratio: 163/198;
    }
  }
}
/**
 * PORT2401が選ばれる理由（5つの支援）
 *
 * カードはスクロールに合わせて上に重なる（position: sticky）。
 * 重なり位置は PHP 側で付与するインラインの --stack-index から算出している。
 */
@layer object {
  .p-reason {
    position: relative;
    background-color: var(--color-bg-blue);
    padding-block: 7.6rem 20.4rem;
  }
  @media (max-width: 767px) {
    .p-reason {
      padding-block: 8rem 12.8rem;
    }
  }
  .p-reason__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-080);
  }
  @media (max-width: 767px) {
    .p-reason__inner {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-040);
    }
  }
  .p-reason__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-032);
    inline-size: 100%;
    max-inline-size: 98rem;
  }
  @media (max-width: 767px) {
    .p-reason__head {
      display: contents;
    }
  }
  .p-reason__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-024);
  }
  @media (max-width: 767px) {
    .p-reason__heading {
      gap: var(--space-016);
    }
  }
  .p-reason__title {
    color: var(--color-text-inverse);
    font-size: var(--fz-h2);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.08em;
  }
  .p-reason__eyebrow {
    color: var(--color-text-inverse);
    font-family: var(--en-font);
    font-size: var(--fz-label);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0;
  }
  .p-reason {
    /**
     * 見出しを中央寄せにした型（施設紹介ページ）
     * トップと違い「詳しく見る」ボタンを持たない
     */
  }
  .p-reason--center {
    padding-block: 11.2rem 18.8rem;
  }
  @media (max-width: 767px) {
    .p-reason--center {
      padding-block: 8rem 12.8rem;
    }
  }
  .p-reason--center .p-reason__head {
    justify-content: center;
    max-inline-size: none;
  }
  .p-reason--center .p-reason__heading {
    align-items: center;
    gap: var(--space-008);
    text-align: center;
  }
  .p-reason__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-024);
    inline-size: 100%;
    max-inline-size: 98rem;
  }
  @media (max-width: 767px) {
    .p-reason__list {
      gap: var(--space-024);
    }
  }
  .p-reason__item {
    /* 自分の上に何枚ぶん重なっているか（端数込み）。js/renewal.js が渡す。
       JS が動かない環境では 0 のまま＝重なるだけの今までの見え方になる。 */
    --stack-depth: 0;
    position: sticky;
    inset-block-start: calc(15rem + var(--stack-index, 0) * 1.8rem);
    z-index: calc(var(--stack-index, 0) + 1);
    transform-origin: 50% 0;
    scale: calc(1 - 0.04 * var(--stack-depth));
    display: flex;
    align-items: center;
    gap: var(--space-016);
    min-block-size: 38.4rem;
    padding-inline: var(--space-032) var(--space-056);
    border-radius: var(--radius-m);
    background-color: var(--color-bg-primary);
  }
  @media (max-width: 1179px) {
    .p-reason__item {
      flex-direction: column;
      justify-content: center;
      padding: var(--space-032);
      text-align: center;
    }
  }
  .p-reason__item::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--color-bg-blue);
    opacity: calc(0.08 * var(--stack-depth));
    pointer-events: none;
  }
  @media (max-width: 767px) {
    .p-reason__item {
      inset-block-start: calc(9.6rem + var(--stack-index, 0) * 1.2rem);
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: var(--space-016);
      min-block-size: 0;
      padding: 3.2rem var(--space-024);
      text-align: start;
    }
  }
  .p-reason__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    inline-size: 34rem;
    block-size: 27.6rem;
    border-radius: var(--radius-s);
    background-color: var(--color-bg-primary);
  }
  @media (max-width: 767px) {
    .p-reason__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      inline-size: 100%;
      block-size: 13.2rem;
    }
  }
  .p-reason {
    /**
     * アニメーション素材（TOP・ABOUT 共通）
     *
     * 素材は枠（340x276）のちょうど2倍の 680x552 なので枠いっぱいに敷く。
     * 白フチごと1枚の絵になっているため、SVG アイコンのように余白は足さない。
     */
  }
  .p-reason__movie {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    border-radius: 2.4rem;
  }
  @media (max-width: 767px) {
    .p-reason__movie {
      inline-size: auto;
      max-inline-size: 100%;
    }
  }
  .p-reason__body {
    flex: 1 0 0;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-024);
  }
  @media (max-width: 767px) {
    .p-reason__body {
      gap: var(--space-016);
    }
  }
  .p-reason__num {
    position: absolute;
    inset-block-start: 2.9rem;
    inset-inline-start: 95.1%;
    translate: 0 -50%;
    color: var(--color-text-accent);
    font-family: var(--en-font);
    font-size: var(--fz-label);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
  }
  @media (max-width: 767px) {
    .p-reason__num {
      inset-block-start: 2.25rem;
      inset-inline-start: 88.011%;
      letter-spacing: 0.02em;
    }
  }
  .p-reason__item-title {
    color: var(--color-text-accent);
    font-size: 2.8rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.6;
    letter-spacing: 0.04em;
  }
  @media (max-width: 767px) {
    .p-reason__item-title {
      font-size: 2rem;
      letter-spacing: 0.04em;
    }
  }
  .p-reason__text {
    color: var(--color-text-accent);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-regular);
    line-height: 1.8;
    letter-spacing: 0.08em;
  }
  @media (max-width: 767px) {
    .p-reason__text {
      font-size: var(--fz-body-default);
    }
  }
  .p-reason__paragraph + .p-reason__paragraph {
    margin-block-start: var(--space-016);
  }
  @media (max-width: 767px) {
    .p-reason .c-button {
      order: 1;
      align-self: center;
      margin-block-start: var(--space-016);
    }
  }
  @media (max-width: 767px) {
    .p-reason--center .p-reason__heading {
      gap: var(--space-008);
    }
  }
}
/**
 * 施設紹介（Matterport + カードスライダー）
 */
@layer object {
  .p-facility {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-048);
    background-color: var(--color-bg-primary);
    padding-block: 8.8rem 18.8rem;
  }
  @media (max-width: 767px) {
    .p-facility {
      padding-block: 6.4rem 9.6rem;
    }
  }
  .p-facility__movie {
    inline-size: 100%;
    max-inline-size: 129.6rem;
    line-height: 0;
  }
  .p-facility__iframe {
    inline-size: 100%;
    block-size: 48rem;
    border: 0;
  }
  @media (max-width: 767px) {
    .p-facility__iframe {
      block-size: 24rem;
    }
  }
  .p-facility__list {
    inline-size: 100%;
    padding-block-start: 3.6rem;
  }
  .p-facility__list .slick-list {
    margin-inline: -1rem;
    padding-block-end: 3rem;
  }
  .p-facility__list .slick-dots {
    margin-block-start: 3.2rem;
  }
  @media (max-width: 767px) {
    .p-facility__list {
      padding-block-start: 2.4rem;
    }
  }
  .p-facility__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-block-size: 39.1rem;
    margin-inline: 1rem;
    padding-block-end: 3rem;
    background-color: var(--color-bg-primary);
    box-shadow: 2px 2px 0 0 #d0dfe9;
  }
  @media (max-width: 767px) {
    .p-facility__item {
      min-block-size: 0;
    }
  }
  .p-facility__tag {
    display: block;
    inline-size: 100%;
    padding: 0.5rem;
    background-color: var(--color-yellow-500);
    text-align: center;
    color: var(--color-text-accent);
    font-family: var(--en-font);
    font-size: var(--fz-body-small);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.143em;
  }
  .p-facility__title {
    inline-size: 100%;
    padding: 2rem 2rem 0;
    text-align: center;
    color: var(--color-text-accent);
    font-size: var(--fz-body-large);
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
    letter-spacing: 0.111em;
  }
  .p-facility__figure {
    inline-size: 100%;
    padding: 2rem 2rem 0;
    line-height: 0;
  }
  .p-facility__image {
    inline-size: 100%;
    block-size: auto;
  }
  .p-facility__text {
    inline-size: 100%;
    padding: 2rem 3rem;
    color: var(--color-text-accent);
    font-family: var(--en-font);
    font-size: var(--fz-caption);
    font-weight: var(--font-weight-regular);
    line-height: 1.6;
  }
  .p-facility__reserve {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-end: 0;
    translate: -50% 32%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem var(--space-040);
    border-radius: var(--radius-xs);
    background-color: var(--color-bg-blue);
    color: var(--color-text-inverse);
    font-family: var(--en-font);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-regular);
    white-space: nowrap;
  }
  .p-facility__reserve:focus-visible {
    opacity: 0.8;
  }
  @media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .p-facility__reserve:hover {
      opacity: 0.8;
    }
  }
  .p-facility .c-button-group {
    padding-block-start: 4.8rem;
  }
  @media (max-width: 767px) {
    .p-facility .c-button-group {
      padding-block-start: 4rem;
    }
  }
}
/**
 * 料金表 / 月額会員サービス
 */
@layer object {
  .p-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-048);
    background-color: var(--color-bg-tint);
    padding-block: 8.8rem 18.8rem;
  }
  @media (max-width: 767px) {
    .p-plan {
      padding-block: 6.4rem 9.6rem;
    }
  }
  .p-plan__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-080);
    inline-size: 100%;
  }
  @media (max-width: 767px) {
    .p-plan__inner {
      gap: var(--space-056);
    }
  }
  .p-plan__tablewrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-048);
    inline-size: 100%;
  }
  @media (max-width: 767px) {
    .p-plan__tablewrap {
      gap: var(--space-040);
    }
  }
  .p-plan {
    /* ------------------------------------------------------------------
     * 料金表
     *
     * 見た目は現行サイト（https://port2401.jp/ の article.usage table）の
     * 指定をそのまま持ってきている。セレクタだけ本テーマの命名に置き換えた。
     *   現行 .table_wrap        → __table-scroll
     *   現行 table              → __table
     *   現行 tr                 → __row
     *   現行 th（1行目）         → __th--head
     *   現行 td:nth-of-type(1)  → __th--menu
     *   現行 td:nth-of-type(2)  → __td--price
     *   現行 td:nth-of-type(3)  → __td--how
     *   現行 .bbn               → __td--last
     * ---------------------------------------------------------------- */
  }
  .p-plan__table-scroll {
    inline-size: 100%;
  }
  @media (max-width: 767px) {
    .p-plan__table-scroll {
      overflow: auto;
      white-space: nowrap;
    }
  }
  .p-plan__table {
    inline-size: 100%;
    max-inline-size: 100rem;
    margin: 0 auto;
    border-collapse: collapse;
    font-size: 1.5rem;
    letter-spacing: 0.2rem;
  }
  @media (max-width: 767px) {
    .p-plan__table {
      font-size: 1.4rem;
      letter-spacing: 0;
    }
  }
  .p-plan__row {
    background-color: #fff;
  }
  .p-plan__th, .p-plan__td {
    padding: 2rem;
    vertical-align: middle;
    color: #116bb2;
  }
  .p-plan__th span, .p-plan__td span {
    font-size: 70%;
  }
  @media (max-width: 767px) {
    .p-plan__th, .p-plan__td {
      padding: 1rem;
    }
  }
  .p-plan__th--head {
    border-top: none;
    background-color: #b2d4eb;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 900;
  }
  .p-plan__th--head:nth-child(1) {
    inline-size: 40%;
  }
  .p-plan__th--head:nth-child(2) {
    inline-size: 25%;
  }
  .p-plan__th--head:nth-child(3) {
    inline-size: 35%;
  }
  @media (max-width: 767px) {
    .p-plan__th--head {
      font-size: 1.6rem;
    }
  }
  .p-plan__td, .p-plan__th--menu {
    border-right: 1px solid #116bb2;
    border-bottom: 1px solid #116bb2;
  }
  .p-plan__th--menu {
    padding-inline-start: 4rem;
    text-align: start;
    font-size: 1.5rem;
    font-weight: bold;
  }
  @media (max-width: 767px) {
    .p-plan__th--menu {
      padding-inline-start: 1.5rem;
      font-size: 1.4rem;
    }
  }
  .p-plan__td--price {
    padding: 1rem;
    text-align: center;
    font-weight: bold;
  }
  @media (max-width: 767px) {
    .p-plan__td--price {
      padding: 1rem 2rem;
    }
  }
  .p-plan__td--how {
    padding: 1rem 0 1rem 2.5rem;
    border-right: none;
    letter-spacing: 0.1rem;
  }
  @media (max-width: 767px) {
    .p-plan__td--how {
      padding: 1rem 2rem;
      letter-spacing: 0;
      line-height: 1.2;
    }
  }
  .p-plan__row:last-of-type .p-plan__th--menu, .p-plan__row:last-of-type .p-plan__td, .p-plan__td--last {
    border-bottom: none;
  }
  .p-plan__link {
    text-decoration: underline;
  }
  .p-plan {
    /* 月額会員サービス */
  }
  .p-plan__service {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-040);
    inline-size: 100%;
  }
  .p-plan__service-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-024);
    inline-size: 100%;
    max-inline-size: 109.6rem;
  }
  .p-plan__service-title {
    color: var(--color-text-accent);
    font-size: var(--fz-h4);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  .p-plan__service-list {
    display: flex;
    align-items: stretch;
    gap: var(--space-008);
    inline-size: 100%;
  }
  @media (max-width: 1179px) {
    .p-plan__service-list {
      flex-wrap: wrap;
      justify-content: center;
    }
  }
  .p-plan__service-item {
    flex: 1 0 0;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-016);
    padding: var(--space-024) var(--space-016);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-s);
    background-color: var(--color-bg-primary);
    text-align: center;
  }
  @media (max-width: 1179px) {
    .p-plan__service-item {
      flex: 0 0 auto;
      inline-size: calc(25% - var(--space-008));
    }
  }
  @media (max-width: 767px) {
    .p-plan__service-item {
      inline-size: calc(50% - 0.4rem);
    }
  }
  .p-plan__service-icon {
    inline-size: auto;
    block-size: 5.6rem;
    object-fit: contain;
  }
  .p-plan__service-label {
    inline-size: 10.3rem;
    word-break: normal;
  }
  @media (max-width: 1179px) {
    .p-plan__service-label {
      inline-size: 100%;
    }
  }
  .p-plan__service-label {
    color: var(--color-text-primary);
    font-size: var(--fz-body-small);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.08em;
  }
}
/**
 * 利用開始までの流れ
 */
@layer object {
  .p-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-056);
    background-color: var(--color-bg-primary);
    padding-block: 8.2rem 12rem;
  }
  @media (max-width: 767px) {
    .p-flow {
      padding-block: 6.4rem 6.4rem;
    }
  }
  .p-flow__list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    inline-size: 100%;
  }
  @media (max-width: 1179px) {
    .p-flow__list {
      flex-wrap: wrap;
    }
  }
  @media (max-width: 767px) {
    .p-flow__list {
      flex-direction: column;
      flex-wrap: nowrap;
      gap: var(--space-016);
    }
  }
  .p-flow__item {
    position: relative;
    flex: 1 0 0;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-008);
    min-block-size: 15rem;
    padding: 5.2rem var(--space-032) var(--space-048);
    border-radius: var(--radius-m);
    background-color: var(--color-bg-tertiary);
    text-align: center;
    color: var(--color-text-primary);
    font-size: var(--fz-body-large);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  @media (max-width: 767px) {
    .p-flow__item {
      flex: 0 0 auto;
      inline-size: 100%;
      min-block-size: 0;
      padding: 3.6rem var(--space-024) var(--space-024);
    }
  }
  .p-flow__num {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: -1.2rem;
    translate: -50% 0;
    display: grid;
    place-items: center;
    inline-size: 4rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: var(--color-bg-blue);
    color: var(--color-text-inverse);
    font-family: var(--en-font);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-medium);
    line-height: 1;
  }
  .p-flow__arrow {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    inline-size: 0.9rem;
    block-size: 1.8rem;
  }
  .p-flow__arrow::before {
    content: "";
    inline-size: 0;
    block-size: 0;
    border-style: solid;
    border-width: 0.9rem 0 0.9rem 0.9rem;
    border-color: transparent transparent transparent var(--color-bg-brand);
  }
  @media (max-width: 767px) {
    .p-flow__arrow {
      rotate: 90deg;
    }
  }
}
/**
 * スタッフ＆サポーター紹介
 * 右端を画面外まで伸ばした淡色ボックス（左側だけ角丸）
 */
@layer object {
  .p-staff {
    padding-inline-start: var(--space-120);
    background-color: var(--color-bg-primary);
  }
  .p-staff__box {
    position: relative;
    display: flex;
    gap: var(--space-064);
    align-items: flex-start;
    padding: var(--space-080) 0 var(--space-080) var(--space-064);
    border-start-start-radius: var(--radius-xl);
    border-end-start-radius: var(--radius-xl);
    background-color: var(--color-bg-tint);
    overflow: hidden;
  }
  @media (max-width: 1179px) {
    .p-staff__box {
      flex-direction: column;
      padding-inline: var(--space-024);
    }
  }
  @media (max-width: 767px) {
    .p-staff__box {
      gap: var(--space-032);
      padding: var(--space-048) var(--space-024);
      border-start-start-radius: var(--radius-l);
      border-end-start-radius: var(--radius-l);
    }
  }
  .p-staff__deco {
    position: absolute;
    inset-block-start: 46rem;
    inset-inline-start: 1.1rem;
    z-index: 1;
    inline-size: 56.6rem;
    block-size: 26.8rem;
    opacity: 0.4;
    scale: -1 1;
    pointer-events: none;
  }
  @media (max-width: 1179px) {
    .p-staff__deco {
      display: none;
    }
  }
  .p-staff__lead {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-048);
    inline-size: 35.6rem;
  }
  @media (max-width: 1179px) {
    .p-staff__lead {
      inline-size: 100%;
    }
  }
  @media (max-width: 767px) {
    .p-staff__lead {
      gap: var(--space-032);
    }
  }
  .p-staff__lead {
    /* SP はデザイン上「見出し → スライダー → ボタン」の順。
       ラッパを畳んで、中身を __box の直接の子として並べ替える。 */
  }
  @media (max-width: 767px) {
    .p-staff__lead {
      display: contents;
    }
  }
  .p-staff__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-040);
  }
  @media (max-width: 767px) {
    .p-staff__heading {
      inline-size: 100%;
      gap: var(--space-016);
    }
  }
  .p-staff__titlewrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-016);
  }
  @media (max-width: 767px) {
    .p-staff__titlewrap {
      gap: var(--space-008);
    }
  }
  .p-staff__title {
    color: var(--color-text-accent);
    font-size: var(--fz-h2);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.08em;
  }
  .p-staff__text {
    color: var(--color-text-secondary);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-regular);
    line-height: 1.8;
    letter-spacing: 0.08em;
  }
  .p-staff__main {
    flex: 1 0 0;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-040);
    padding-block-start: var(--space-024);
  }
  @media (max-width: 767px) {
    .p-staff__main {
      inline-size: 100%;
      gap: var(--space-016);
      padding-block-start: 0;
    }
  }
  .p-staff__nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-008);
    inline-size: 100%;
    padding-inline-end: 8.8rem;
  }
  @media (max-width: 767px) {
    .p-staff__nav {
      display: none;
    }
  }
  .p-staff__nav-button {
    inline-size: 4.8rem;
    block-size: 4.8rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: opacity var(--duration) var(--ease-out);
  }
  .p-staff__nav-button:focus-visible {
    opacity: 0.7;
  }
  @media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .p-staff__nav-button:hover {
      opacity: 0.7;
    }
  }
  .p-staff__nav-icon {
    inline-size: 100%;
    block-size: 100%;
  }
  .p-staff__nav-icon--prev {
    scale: -1 1;
  }
  .p-staff__list {
    inline-size: 100%;
  }
  .p-staff__list .slick-list {
    overflow: hidden;
  }
  .p-staff__list {
    /* SP は slick を解除（unslick）して素の横スクロールにする。
       右端は画面外まで見せたいので、ボックスの余白ぶん外へ出す。 */
  }
  @media (max-width: 767px) {
    .p-staff__list {
      display: flex;
      align-items: flex-start;
      gap: 1.6rem;
      overflow-x: auto;
      inline-size: auto;
      align-self: stretch;
      margin-inline-end: -2.4rem;
      padding-inline-end: var(--space-024);
      scrollbar-width: none;
    }
    .p-staff__list::-webkit-scrollbar {
      display: none;
    }
  }
  .p-staff {
    /* スライダーの位置を示すバー（SPのみ。Figma: 高さ5px） */
  }
  .p-staff__progress {
    display: none;
  }
  @media (max-width: 767px) {
    .p-staff__progress {
      position: relative;
      display: block;
      inline-size: 100%;
      block-size: 0.5rem;
      border-radius: var(--radius-pill);
      background-color: var(--color-border-default);
      overflow: hidden;
    }
  }
  .p-staff__progress-thumb {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    display: block;
    inline-size: 25%;
    border-radius: inherit;
    background-color: var(--color-bg-blue);
  }
  .p-staff__item {
    inline-size: 22rem;
    margin-inline-end: var(--space-040);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-016);
  }
  @media (max-width: 767px) {
    .p-staff__item {
      flex-shrink: 0;
      inline-size: 12.1rem;
      margin-inline-end: 0;
      gap: var(--space-008);
    }
  }
  .p-staff__item:nth-child(even) {
    padding-block-start: var(--space-040);
  }
  .p-staff__item {
    /**
     * slick は先頭にクローンを差し込むため nth-child の偶奇がずれる。
     * 初期化後はスライドの通し番号（data-slick-index）を基準にする。
     */
  }
  .p-staff__item[data-slick-index] {
    padding-block-start: 0;
  }
  .p-staff__item[data-slick-index="-19"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="-17"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="-15"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="-13"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="-11"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="-9"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="-7"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="-5"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="-3"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="-1"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="1"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="3"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="5"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="7"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="9"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="11"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="13"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="15"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="17"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="19"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="21"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="23"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="25"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="27"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="29"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="31"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="33"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="35"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="37"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__item[data-slick-index="39"] {
    padding-block-start: var(--space-040);
  }
  .p-staff__thumb {
    position: relative;
    display: block;
    inline-size: 100%;
    block-size: 28rem;
  }
  @media (max-width: 767px) {
    .p-staff__thumb {
      block-size: auto;
      aspect-ratio: 121/154;
    }
  }
  .p-staff__thumb {
    overflow: hidden;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-m);
    background: var(--color-bg-tertiary) center/cover no-repeat;
  }
  .p-staff__thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    scale: 1;
    transition: scale var(--duration-wipe) var(--ease-wipe);
  }
  .p-staff__thumb:is(a):focus-visible::before {
    scale: 1.04;
  }
  @media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .p-staff__thumb:is(a):hover::before {
      scale: 1.04;
    }
  }
  .p-staff__icon {
    position: absolute;
    z-index: 1;
    inset-block-end: 1.2rem;
    inset-inline-end: 1.2rem;
    inline-size: 3.2rem;
    block-size: 3.2rem;
  }
  @media (max-width: 767px) {
    .p-staff__icon {
      inset-block-end: 1rem;
      inset-inline-end: 1rem;
      inline-size: 2.4rem;
      block-size: 2.4rem;
    }
  }
  .p-staff__body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    inline-size: 100%;
  }
  .p-staff__name {
    color: var(--color-text-primary);
    font-size: var(--fz-body-large);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  .p-staff {
    /* SP（Figma: 364:32841）。ボタンはスライダーの後ろに回して中央寄せ */
  }
  @media (max-width: 767px) {
    .p-staff {
      padding-inline-start: var(--space-024);
    }
    .p-staff .c-eyebrow {
      min-block-size: 2.4rem;
    }
    .p-staff .c-button {
      order: 1;
      align-self: center;
      margin-block-start: var(--space-008);
    }
  }
  .p-staff__role {
    color: var(--color-text-secondary);
    font-size: var(--fz-body-small);
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    letter-spacing: 0;
  }
  @media (max-width: 767px) {
    .p-staff__role {
      line-height: 1.5384615385;
    }
  }
}
/**
 * 起業メディア
 */
@layer object {
  .p-media {
    background-color: var(--color-bg-primary);
    padding-block: 11.8rem 12rem;
  }
  @media (max-width: 767px) {
    .p-media {
      padding-block: 6.4rem 6.4rem;
    }
  }
  .p-media__list {
    margin-top: 5.6rem;
    inline-size: 100%;
  }
  .p-media__list .slick-dots {
    margin-block-start: 4rem;
  }
  .p-media__item {
    margin-inline: 1.6rem;
    background-color: var(--color-bg-secondary);
  }
  .p-media__thumb {
    display: block;
    inline-size: 100%;
    aspect-ratio: 300/169;
    background: var(--color-bg-tertiary) center/cover no-repeat;
  }
  .p-media__category {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    padding: 0.5rem;
    background-color: var(--color-gray-500);
    color: var(--color-text-inverse);
    text-align: center;
    white-space: nowrap;
    font-family: var(--en-font);
    font-size: var(--fz-caption);
    font-weight: var(--font-weight-light);
    line-height: 1.8rem;
    letter-spacing: 0.1rem;
  }
  .p-media__body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-040) 2rem 2rem;
  }
  .p-media__title {
    inline-size: 100%;
    padding-block-end: 0.5rem;
    color: var(--color-text-accent);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-bold);
    line-height: 2.4rem;
  }
  .p-media__excerpt {
    inline-size: 100%;
    color: var(--color-text-accent);
    font-family: var(--en-font);
    font-size: var(--fz-caption);
    font-weight: var(--font-weight-light);
    line-height: 1.8rem;
  }
  .p-media__button {
    margin-block-start: 3.2rem;
  }
}
/**
 * アクセス
 *
 * 「詳しいアクセス方法はこちら」は PC では見出しの右、SP ではセクションの最後
 * （Figma: SP 355:27796）。マークアップは SP の並び順にしておき、
 * PC だけグリッドで見出しと同じマスに戻している。
 */
@layer object {
  .p-access {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background-color: var(--color-bg-primary);
    padding-block: 12rem 16rem;
  }
  @media (max-width: 767px) {
    .p-access {
      padding-block: 8rem 8rem;
    }
  }
  .p-access__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-032);
    inline-size: 100%;
  }
  @media (min-width: 768px) {
    .p-access__head {
      grid-row: 1;
      grid-column: 1;
    }
  }
  .p-access__action {
    display: flex;
    justify-content: center;
    margin-block-start: var(--space-040);
  }
  @media (min-width: 768px) {
    .p-access__action {
      grid-row: 1;
      grid-column: 1;
      align-self: end;
      justify-content: flex-end;
      margin-block-start: 0;
    }
  }
  .p-access__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-016);
  }
  .p-access__title {
    color: var(--color-text-primary);
    font-size: var(--fz-h2);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.08em;
  }
  .p-access__body {
    margin-top: 6.4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-040);
    inline-size: 100%;
  }
  @media (min-width: 768px) {
    .p-access__body {
      grid-row: 2;
      grid-column: 1;
    }
  }
  @media (max-width: 767px) {
    .p-access__body {
      margin-top: var(--space-032);
      gap: var(--space-032);
    }
  }
  .p-access__summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-024);
  }
  .p-access__name {
    color: var(--color-text-primary);
    font-size: var(--fz-h4);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  .p-access__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-016) var(--space-032);
  }
  @media (max-width: 767px) {
    .p-access__meta {
      gap: var(--space-008) var(--space-016);
    }
  }
  .p-access__meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-008);
    color: var(--color-text-primary);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  .p-access__meta-label {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 0.4rem var(--space-008) 0.5rem;
    background-color: var(--color-bg-tertiary);
    color: var(--color-border-brand);
    font-size: var(--fz-body-small);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.08em;
  }
  .p-access__detail {
    display: flex;
    align-items: center;
    gap: var(--space-040);
    inline-size: 100%;
  }
  @media (max-width: 1179px) {
    .p-access__detail {
      flex-direction: column;
      align-items: flex-start;
    }
  }
  @media (max-width: 767px) {
    .p-access__detail {
      gap: var(--space-024);
    }
  }
  .p-access__map {
    flex-shrink: 0;
    inline-size: 67.6rem;
    block-size: 40rem;
    border-radius: var(--radius-s);
    overflow: hidden;
    line-height: 0;
  }
  @media (max-width: 1179px) {
    .p-access__map {
      inline-size: 100%;
    }
  }
  @media (max-width: 767px) {
    .p-access__map {
      block-size: 24rem;
    }
  }
  .p-access__iframe {
    inline-size: 100%;
    block-size: 100%;
    border: 0;
  }
  .p-access__info {
    flex: 1 0 0;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-032);
  }
  .p-access__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-032);
  }
  .p-access__group {
    display: flex;
    flex-direction: column;
  }
  .p-access__term {
    display: flex;
    align-items: center;
    gap: var(--space-008);
    color: var(--color-text-primary);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-regular);
    line-height: 1.8;
    letter-spacing: 0.08em;
  }
  .p-access__term::before {
    content: "";
    flex-shrink: 0;
    inline-size: 0.7rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: var(--color-bg-brand);
  }
  .p-access__desc {
    color: var(--color-text-primary);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-regular);
    line-height: 1.8;
    letter-spacing: 0.08em;
  }
  .p-access__gmap {
    display: inline-flex;
    align-items: center;
    gap: var(--space-008);
    color: var(--color-text-primary);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  .p-access__gmap:focus-visible {
    opacity: 0.7;
  }
  @media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .p-access__gmap:hover {
      opacity: 0.7;
    }
  }
  .p-access__gmap-icon {
    flex-shrink: 0;
    inline-size: 2.4rem;
    block-size: 2.4rem;
  }
}
/**
 * リニューアル済みの下層ページ共通の土台
 *
 * 見出しセクション（.m-page-head）が固定ヘッダーぶんの高さを含んでいるので、
 * 旧テンプレート向けの padding-top（layout/_l-header.scss）は打ち消す。
 */
@layer object {
  .p-page {
    padding-block-start: 0;
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-regular);
    line-height: 1.8;
    letter-spacing: 0.08em;
    overflow-x: clip;
  }
  .p-page > *:last-child::after {
    content: "";
    display: block;
    block-size: 9.2rem;
    background: inherit;
  }
}
/**
 * 施設紹介ページ: 「西大井創業支援センターとは？」
 * 左にテキスト、右に写真2枚（アートディレクション上の固定配置）
 */
@layer object {
  .p-intro {
    position: relative;
    background-color: var(--color-bg-tint);
    padding-block: 7.2rem 17.6rem;
  }
  @media (max-width: 767px) {
    .p-intro {
      padding-block: 4rem 12.8rem;
    }
  }
  .p-intro__inner {
    display: flex;
    align-items: flex-start;
    gap: 8.8rem;
  }
  @media (max-width: 767px) {
    .p-intro__inner {
      flex-direction: column;
      gap: var(--space-040);
    }
  }
  .p-intro__body {
    flex: 1 0 0;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-032);
  }
  @media (max-width: 767px) {
    .p-intro__body {
      gap: var(--space-024);
      inline-size: 100%;
    }
  }
  .p-intro__title {
    color: var(--color-text-accent);
    font-size: 3.6rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.6;
    letter-spacing: 0.08em;
  }
  @media (max-width: 767px) {
    .p-intro__title {
      font-size: 2.8rem;
    }
  }
  .p-intro__lead-block {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: var(--space-016);
  }
  @media (max-width: 767px) {
    .p-intro__lead-block {
      gap: var(--space-024);
    }
  }
  .p-intro__marker {
    position: absolute;
    inset-block-start: 6.1rem;
    inset-inline-start: -0.1rem;
    z-index: -1;
    inline-size: 51.6rem;
    block-size: 3.8rem;
    background-color: var(--color-yellow-300);
  }
  @media (max-width: 767px) {
    .p-intro__marker {
      inset-block-start: 7.8rem;
      inset-inline-start: -0.4rem;
      inline-size: 30rem;
      block-size: 2.6rem;
    }
    .p-intro__marker::after {
      content: "";
      position: absolute;
      inset-block-start: 3.5rem;
      inset-inline-start: 0;
      inline-size: 13.3rem;
      block-size: 2.6rem;
      background-color: var(--color-yellow-300);
    }
  }
  .p-intro__lead {
    color: var(--color-text-primary);
    font-size: var(--fz-h4);
    font-weight: var(--font-weight-medium);
    line-height: 2.2;
    letter-spacing: 0.08em;
  }
  @media (max-width: 767px) {
    .p-intro__lead {
      font-size: 2rem;
      line-height: 1.8;
    }
  }
  .p-intro__accent {
    color: var(--color-text-accent);
  }
  .p-intro__text {
    color: var(--color-text-secondary);
    font-size: 1.5rem;
    font-weight: var(--font-weight-regular);
    line-height: 2.2;
    letter-spacing: 0.08em;
  }
  .p-intro__paragraph + .p-intro__paragraph {
    margin-block-start: var(--space-024);
  }
  .p-intro {
    /* 写真（デザインどおりの重ね配置） */
  }
  .p-intro__photos {
    position: relative;
    flex-shrink: 0;
    inline-size: 38rem;
    block-size: 45.8rem;
  }
  @media (max-width: 767px) {
    .p-intro__photos {
      inline-size: 30rem;
      block-size: 36.1579rem;
    }
  }
  .p-intro__photo {
    position: absolute;
    overflow: hidden;
    border-radius: var(--radius-s);
  }
  .p-intro__photo--01 {
    inset: 0 auto auto 0;
    inline-size: 31.3075rem;
    block-size: 38.4537rem;
  }
  .p-intro__photo--02 {
    inset: 32.561rem auto auto 18.263rem;
    inline-size: 19.7373rem;
    block-size: 13.2716rem;
  }
  @media (max-width: 767px) {
    .p-intro__photo {
      border-radius: 0.6316rem;
    }
    .p-intro__photo--01 {
      inline-size: 24.7164rem;
      block-size: 30.3582rem;
    }
    .p-intro__photo--02 {
      inset: 25.706rem auto auto 14.418rem;
      inline-size: 15.5821rem;
      block-size: 10.4776rem;
    }
  }
  .p-intro__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}
/**
 * 施設紹介ページ: 「支援の考え方について」＋「支援対象について」
 */
@layer object {
  .p-mindset {
    position: relative;
    background-color: var(--color-bg-primary);
    padding-block: 8rem 19.2rem;
  }
  @media (max-width: 767px) {
    .p-mindset {
      padding-block: 4rem 12.8rem;
    }
  }
  .p-mindset__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7.6rem;
  }
  @media (max-width: 767px) {
    .p-mindset__inner {
      gap: var(--space-064);
    }
  }
  .p-mindset__row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-080);
    inline-size: 100%;
  }
  @media (max-width: 767px) {
    .p-mindset__row {
      flex-direction: column;
      align-items: center;
      gap: var(--space-040);
    }
  }
  .p-mindset {
    /* 写真（デザインどおりの重ね配置） */
  }
  .p-mindset__photos {
    position: relative;
    flex-shrink: 0;
    inline-size: 38rem;
    block-size: 48.2rem;
  }
  @media (max-width: 767px) {
    .p-mindset__photos {
      order: 1;
      inline-size: 30rem;
      block-size: 38.0526rem;
    }
  }
  .p-mindset__photo {
    position: absolute;
    overflow: hidden;
  }
  .p-mindset__photo--01 {
    inset: 0 auto auto 0;
    inline-size: 31.3075rem;
    block-size: 38.4537rem;
    border-radius: var(--radius-m);
  }
  .p-mindset__photo--02 {
    inset: 34.961rem auto auto 18.263rem;
    inline-size: 19.7373rem;
    block-size: 13.2716rem;
    border-radius: var(--radius-s);
  }
  @media (max-width: 767px) {
    .p-mindset__photo--01 {
      inline-size: 24.7164rem;
      block-size: 30.3582rem;
      border-radius: 1.2632rem;
    }
    .p-mindset__photo--02 {
      inset: 27.601rem auto auto 14.418rem;
      inline-size: 15.5821rem;
      block-size: 10.4776rem;
      border-radius: 0.6316rem;
    }
  }
  .p-mindset__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .p-mindset__body {
    flex: 1 0 0;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-032);
    padding-block-start: var(--space-032);
  }
  @media (max-width: 767px) {
    .p-mindset__body {
      inline-size: 100%;
    }
  }
  .p-mindset__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-008);
  }
  .p-mindset__title {
    color: var(--color-text-accent);
    font-size: var(--fz-h3);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  @media (max-width: 767px) {
    .p-mindset__title {
      font-size: var(--fz-h2);
    }
  }
  .p-mindset__text {
    color: var(--color-text-secondary);
    font-size: 1.5rem;
    font-weight: var(--font-weight-regular);
    line-height: 2.2;
    letter-spacing: 0.08em;
  }
  .p-mindset__paragraph + .p-mindset__paragraph {
    margin-block-start: var(--space-024);
  }
  /**
   * 支援対象について（枠線付きのカード）
   */
  .p-target {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-032);
    inline-size: 100%;
    padding: var(--space-048) var(--space-056);
    border: 1px solid var(--color-bg-brand);
    border-radius: var(--radius-m);
    background-color: var(--color-bg-secondary);
  }
  @media (max-width: 767px) {
    .p-target {
      gap: 2.4rem;
    }
  }
  .p-target__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-008);
    color: var(--color-text-accent);
    text-align: center;
  }
  .p-target__title {
    font-size: var(--fz-h4);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  @media (max-width: 767px) {
    .p-target__title {
      font-size: var(--fz-h4);
    }
  }
  .p-target__sub {
    font-family: var(--en-font);
    font-size: var(--fz-label);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0;
  }
  @media (max-width: 767px) {
    .p-target__sub {
      font-family: var(--en-font);
      font-size: var(--fz-label);
      font-weight: var(--font-weight-medium);
      line-height: 1.4;
      text-transform: uppercase;
      letter-spacing: 0;
    }
  }
  .p-target__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-024);
    inline-size: 100%;
  }
  .p-target__lead, .p-target__note {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-regular);
    line-height: 1.8;
    letter-spacing: 0.08em;
  }
  .p-target__list {
    display: flex;
    align-items: stretch;
    gap: 1.2rem;
    inline-size: 100%;
  }
  @media (max-width: 767px) {
    .p-target__list {
      flex-wrap: wrap;
      justify-content: center;
      gap: 1.2rem;
    }
  }
  .p-target__item {
    flex: 1 0 0;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    padding: var(--space-024) var(--space-032);
    border-radius: var(--radius-m);
    background-color: var(--color-bg-primary);
    text-align: center;
    color: var(--color-text-primary);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.08em;
  }
  @media (max-width: 767px) {
    .p-target__item {
      flex: 0 0 auto;
      inline-size: 14.8rem;
      gap: var(--space-008);
      padding: var(--space-016);
      border-radius: var(--radius-s);
      font-size: var(--fz-body-small);
    }
  }
  .p-target__check {
    flex-shrink: 0;
    inline-size: 2.4rem;
    block-size: 2.4rem;
  }
  .p-target__label {
    white-space: nowrap;
  }
  @media (max-width: 767px) {
    .p-target__label {
      white-space: normal;
    }
  }
  .p-target {
    /* SP（Figma: 施設紹介_SP / node 364:33468）: カードは2列 */
  }
  @media (max-width: 767px) {
    .p-target {
      padding: var(--space-040) var(--space-016);
    }
  }
  @media (max-width: 767px) {
    .p-target__lead {
      font-size: var(--fz-body-default);
    }
  }
  @media (min-width: 768px) {
    .p-target__note {
      margin-top: 1.2rem;
    }
  }
  @media (max-width: 767px) {
    .p-target__note {
      text-align: start;
      font-size: var(--fz-body-default);
    }
  }
}
/**
 * 施設紹介ページ: 「支援体制について」＋「主な支援内容」
 */
@layer object {
  .p-team {
    position: relative;
    background-color: var(--color-bg-primary);
    padding-block: 8rem 18.4rem;
  }
  @media (max-width: 767px) {
    .p-team {
      padding-block: 4rem 12.8rem;
    }
  }
  .p-team__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-040);
  }
  .p-team__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-008);
    color: var(--color-text-accent);
    text-align: center;
  }
  .p-team__eyebrow {
    font-family: var(--en-font);
    font-size: var(--fz-body-small);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0;
  }
  .p-team__title {
    font-size: var(--fz-h3);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  @media (max-width: 767px) {
    .p-team__title {
      font-size: var(--fz-h2);
    }
  }
  .p-team__text {
    inline-size: 100%;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-regular);
    line-height: 2.2;
    letter-spacing: 0.08em;
  }
  .p-team__paragraph + .p-team__paragraph {
    margin-block-start: var(--space-016);
  }
  .p-team {
    /* 主な支援内容 */
  }
  .p-team__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-024);
    inline-size: 100%;
    padding: var(--space-040) var(--space-032) var(--space-048);
    border-radius: var(--radius-m);
    background-color: var(--color-bg-tint);
  }
  @media (max-width: 767px) {
    .p-team__panel {
      padding: var(--space-032) var(--space-016) var(--space-040);
    }
  }
  .p-team__panel-title {
    color: var(--color-text-accent);
    font-size: var(--fz-h4);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
  }
  @media (max-width: 767px) {
    .p-team__panel-title {
      font-size: var(--fz-h4);
    }
  }
  .p-team__list {
    display: flex;
    align-items: stretch;
    gap: var(--space-008);
    inline-size: 100%;
  }
  @media (max-width: 767px) {
    .p-team__list {
      flex-wrap: wrap;
      justify-content: center;
    }
  }
  .p-team__item {
    flex: 1 0 0;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-016);
    padding: var(--space-024) 1rem;
    border-radius: var(--radius-s);
    background-color: var(--color-bg-primary);
  }
  @media (max-width: 767px) {
    .p-team__item {
      flex: 0 0 auto;
      inline-size: calc(50% - 0.4rem);
    }
  }
  .p-team__icon {
    inline-size: auto;
    block-size: 5.6rem;
    object-fit: contain;
  }
  .p-team__label {
    inline-size: 10.3rem;
    word-break: normal;
    text-align: center;
    color: var(--color-text-primary);
    font-size: var(--fz-body-small);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.08em;
  }
  @media (max-width: 767px) {
    .p-team__label {
      inline-size: 100%;
    }
  }
}
/**
 * 施設紹介ページ: 「この施設が目指すこと」＋ GALLERY
 */
@layer object {
  .p-vision {
    position: relative;
    background-color: var(--color-bg-tint);
    padding-block: 8rem 12rem;
  }
  @media (max-width: 767px) {
    .p-vision {
      padding-block: 4rem 12.8rem;
    }
  }
  .p-vision__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-064);
  }
  .p-vision__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-040);
    inline-size: 100%;
  }
  .p-vision__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-008);
    color: var(--color-text-accent);
    text-align: center;
  }
  .p-vision__eyebrow {
    font-family: var(--en-font);
    font-size: var(--fz-body-small);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0;
  }
  .p-vision__title {
    font-size: var(--fz-h3);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  @media (max-width: 767px) {
    .p-vision__title {
      font-size: var(--fz-h2);
    }
  }
  .p-vision__text {
    inline-size: 100%;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-regular);
    line-height: 2.2;
    letter-spacing: 0.08em;
  }
  .p-vision__paragraph + .p-vision__paragraph {
    margin-block-start: var(--space-016);
  }
  .p-vision {
    /* GALLERY */
  }
  .p-vision__gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-040);
    padding: 5.4rem var(--space-032) var(--space-056);
    border-radius: var(--radius-m);
    background-color: var(--color-bg-primary);
  }
  @media (max-width: 767px) {
    .p-vision__gallery {
      gap: var(--space-032);
      padding: var(--space-032) var(--space-016) var(--space-040);
    }
  }
  .p-vision__gallery-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-008);
    color: var(--color-text-accent);
    text-align: center;
  }
  .p-vision__gallery-mark {
    inline-size: 2.4rem;
    block-size: 1.1rem;
    scale: -1 1;
  }
  .p-vision__gallery-title {
    font-family: var(--en-font);
    font-size: var(--fz-h2);
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  @media (max-width: 767px) {
    .p-vision__gallery-title {
      font-size: var(--fz-h3);
    }
  }
  .p-vision__gallery-sub {
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-regular);
    line-height: 1.8;
    letter-spacing: 0.08em;
  }
  .p-vision__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.56rem 1.85rem;
    inline-size: 100%;
    max-inline-size: 86.2rem;
  }
  @media (max-width: 767px) {
    .p-vision__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-012);
      max-inline-size: none;
    }
  }
  .p-vision__figure {
    overflow: hidden;
    line-height: 0;
  }
  .p-vision__image {
    inline-size: 100%;
    aspect-ratio: 275/183;
    object-fit: cover;
  }
}
/**
 * スタッフ・サポーター一覧（Figma: スタッフ・サポーター_デザイン / node 355:22317）
 *
 * カテゴリー（staff_detail_cat）ごとに1セクション。
 * 背景は淡い青と白を交互に敷き、境目は .c-curve でつなぐ。
 */
@layer object {
  .p-staff-list {
    position: relative;
    background-color: var(--color-bg-primary);
    scroll-margin-block-start: var(--header-height);
    padding-block: 8rem 19.2rem;
  }
  @media (max-width: 767px) {
    .p-staff-list {
      padding-block: 4rem 10.4rem;
    }
  }
  .p-staff-list--tint {
    background-color: var(--color-bg-tint);
  }
  .p-staff-list--first {
    padding-block-start: 7.2rem;
  }
  @media (max-width: 767px) {
    .p-staff-list--first {
      padding-block-start: var(--space-040);
    }
  }
  .p-staff-list--last {
    padding-block-end: 13.6rem;
  }
  .p-staff-list {
    /* 在籍者が0名のカテゴリー。
       中身は出さないが、ここで背景色が切り替わり波の装飾も入るので、
       セクション自体は残して高さだけ詰める。 */
  }
  .p-staff-list--empty {
    padding-block: 0 13.6rem;
  }
  .p-staff-list {
    /* カテゴリーへのアンカーリンク（.m-anchor-nav--sp）。
       PC ではページ見出しの中に出しているので、ここに出るのは SP だけ。 */
  }
  .p-staff-list__anchors {
    margin-block-end: var(--space-080);
  }
  .p-staff-list__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-048);
  }
  @media (max-width: 767px) {
    .p-staff-list__inner {
      gap: var(--space-040);
    }
  }
  .p-staff-list {
    /* ------------------------------------------------------------------
     * 見出し
     * ---------------------------------------------------------------- */
  }
  .p-staff-list__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-032);
  }
  @media (max-width: 767px) {
    .p-staff-list__head {
      gap: 2rem;
    }
  }
  .p-staff-list__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-008);
  }
  .p-staff-list__flag {
    position: relative;
    inline-size: 3.6rem;
    block-size: 3.6rem;
  }
  .p-staff-list__flag-image {
    inline-size: 100%;
    block-size: 100%;
  }
  .p-staff-list__flag-num {
    position: absolute;
    inset: 13.89% 25% 36.11% 33.33%;
    display: grid;
    place-items: center;
    color: var(--color-text-inverse);
    font-family: var(--en-font);
    font-size: var(--fz-label);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  .p-staff-list__title {
    color: var(--color-text-accent);
    font-size: var(--fz-h3);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-align: center;
  }
  @media (max-width: 767px) {
    .p-staff-list__title {
      line-height: 1.625;
      font-size: 2.8rem;
      line-height: 1.4;
    }
  }
  .p-staff-list__desc {
    inline-size: 100%;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--fz-body-default);
    font-weight: var(--font-weight-regular);
    line-height: 1.8;
    letter-spacing: 0.08em;
  }
  .p-staff-list {
    /* ------------------------------------------------------------------
     * カード
     * ---------------------------------------------------------------- */
  }
  .p-staff-list__grid {
    --staff-col: calc((100% - var(--space-032) * 4) / 5);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, var(--staff-col)));
    justify-content: center;
    gap: var(--space-080) var(--space-032);
  }
  @media (max-width: 1179px) {
    .p-staff-list__grid {
      --staff-col: calc((100% - var(--space-032) * 2) / 3);
    }
  }
  @media (max-width: 767px) {
    .p-staff-list__grid {
      grid-template-columns: repeat(2, minmax(0, 16rem));
      gap: var(--space-040) var(--space-016);
    }
  }
  .p-staff-list {
    /* カード全体がスタッフ詳細へのリンク。
       「ウェブサイト」は別リンクなので、入れ子にせずカードの下に並べる（Figma: 間 8px）。 */
  }
  .p-staff-list__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-008);
    min-inline-size: 0;
  }
  .p-staff-list__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-016);
    min-inline-size: 0;
  }
  .p-staff-list__link:is(a):focus-visible {
    opacity: 1;
  }
  .p-staff-list__link:is(a):focus-visible .p-staff-list__image {
    scale: 1.04;
  }
  @media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .p-staff-list__link:is(a):hover {
      opacity: 1;
    }
    .p-staff-list__link:is(a):hover .p-staff-list__image {
      scale: 1.04;
    }
  }
  .p-staff-list__thumb {
    position: relative;
    inline-size: 100%;
    aspect-ratio: 201.6/248.436;
  }
  @media (max-width: 767px) {
    .p-staff-list__thumb {
      aspect-ratio: 160/204;
    }
  }
  .p-staff-list__thumb {
    overflow: hidden;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-m);
    background-color: var(--color-bg-tertiary);
  }
  .p-staff-list__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: scale var(--duration-wipe) var(--ease-wipe);
  }
  .p-staff-list__arrow {
    position: absolute;
    inset-block-end: 1.244rem;
    inset-inline-end: 1.06rem;
    inline-size: 3.2rem;
    block-size: 3.2rem;
  }
  .p-staff-list__body {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }
  .p-staff-list__name-block {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }
  .p-staff-list__role {
    color: var(--color-text-secondary);
    font-size: var(--fz-body-small);
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    letter-spacing: 0;
  }
  @media (max-width: 767px) {
    .p-staff-list__role {
      line-height: 1.5384615385;
    }
  }
  .p-staff-list__name {
    color: var(--color-text-primary);
    font-size: 2rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  @media (max-width: 767px) {
    .p-staff-list__name {
      font-size: 1.6rem;
    }
  }
  .p-staff-list {
    /* 専門分野（staff_skill） */
  }
  .p-staff-list__skills {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .p-staff-list__skill {
    display: flex;
    align-items: flex-start;
    gap: 0.2rem;
  }
  .p-staff-list__skill-mark {
    flex-shrink: 0;
    inline-size: 1.1rem;
    color: var(--color-bg-brand);
    font-size: var(--fz-label);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  .p-staff-list__skill-text {
    flex: 1 0 0;
    min-inline-size: 0;
    color: var(--color-text-primary);
    font-size: var(--fz-label);
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  .p-staff-list {
    /* ウェブサイト（カスタムフィールド staff_detail_url） */
  }
  .p-staff-list__website {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    max-inline-size: 100%;
    color: var(--color-text-accent);
    font-size: var(--fz-body-small);
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    letter-spacing: 0;
  }
  .p-staff-list__website:focus-visible {
    opacity: 1;
  }
  .p-staff-list__website:focus-visible .p-staff-list__website-text {
    text-decoration: underline;
  }
  @media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .p-staff-list__website:hover {
      opacity: 1;
    }
    .p-staff-list__website:hover .p-staff-list__website-text {
      text-decoration: underline;
    }
  }
  .p-staff-list__website-icon {
    flex-shrink: 0;
    inline-size: 1.6rem;
    block-size: 1.6rem;
  }
  .p-staff-list__website-text {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }
}
@layer object {
  /**
   * 視覚的に隠す（スクリーンリーダーには読ませる）
   */
  .u-visually-hidden {
    position: absolute;
    clip-path: inset(50%);
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    white-space: nowrap;
  }
}
@layer object {
  /**
   * スクロール連動フェードイン
   * 画面内に入ったら JS が .animated を付与する（js/renewal.js）
   */
  .js-fade-in {
    opacity: 0;
    translate: 0 2.4rem;
    transition: opacity 0.8s var(--ease-out), translate 0.8s var(--ease-out);
  }
  .js-fade-in.animated {
    opacity: 1;
    translate: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .js-fade-in {
      opacity: 1;
      translate: none;
      transition: none;
    }
  }
  /**
   * 画像用のフェード（参考: recruit.cominka.co.jp のメンバー写真）
   *
   * 位置は動かさず、ぼかし＋わずかな明るさからピントが合うように出す。
   * 出る順をずらしたいときは、当てる側で `--fade-delay` を指定する。
   */
  .js-fade-in--blur {
    translate: none;
    filter: blur(14px) brightness(1.15);
    will-change: opacity, filter;
    transition: opacity 1.2s var(--ease-out) var(--fade-delay, 0s), filter 1.2s var(--ease-out) var(--fade-delay, 0s);
  }
  .js-fade-in--blur.animated {
    filter: none;
    will-change: auto;
  }
  @media (prefers-reduced-motion: reduce) {
    .js-fade-in--blur {
      filter: none;
      will-change: auto;
    }
  }
}
/**
 * PC / SP の出し分け
 * デザイン上、改行位置や文言がPCとSPで異なる箇所に使う
 */
@layer object {
  @media (max-width: 767px) {
    .u-br-pc {
      display: none;
    }
  }
  .u-br-sp {
    display: none;
  }
  @media (max-width: 767px) {
    .u-br-sp {
      display: inline;
    }
  }
  @media (max-width: 767px) {
    .u-pc-only {
      display: none;
    }
  }
  .u-sp-only {
    display: none;
  }
  @media (max-width: 767px) {
    .u-sp-only {
      display: inline;
    }
  }
}

/*# sourceMappingURL=renewal.css.map */