@charset "UTF-8";
/* ==========================================================================
   common.css  —  Design Family（全ページ共通）
   設計方針
   - PC基準（デザイン幅 1440px / コンテンツ幅 1200px / 左右余白 120px）
   - clamp() 不使用。レスポンシブは @media を BP ごとに集約し CSS 変数を上書き
   - 命名は BEM（l-:レイアウト / p-:プロジェクト固有 / c-:コンポーネント / u-:ユーティリティ / js-:JS用）
   - レイアウトは Grid 優先。absolute は装飾のみ最小限
   --------------------------------------------------------------------------
   目次
     1. Design Tokens（:root）
     2. Base
     3. Layout（container / section）
     4. Components（button / heading / tag ...）
     5. Header / Nav
     6. Sections（hero 〜 footer）
     7. Utilities
     8. Media Queries（BPごとに集約）
   ========================================================================== */

/* ==========================================================================
   1. Design Tokens
   ========================================================================== */
:root {
  /* --- color --- */
  --c-white: #ffffff;
  --c-black: #000000;
  --c-text: #1a1a1a;
  --c-text-gray: #333333;
  --c-text-mute: #999999;
  --c-line: #e5e5e1;
  --c-border: #cccccc;

  --c-accent: #f55a07; /* 橙：CTA・数字 */
  --c-orange: #f0831e; /* 橙2：見出し/ボタン副系 */
  --c-yellow: #fad134; /* 黄：背景帯 */
  --c-yellow-deep: #f8b500; /* 黄カード */
  --c-red: #e35448;
  --c-blue: #44adcf;
  --c-green: #4da77b;

  --c-btn: #333333; /* 黒丸ボタン */
  --c-bg-soft: #f0f0ec; /* コラム背景 */
  --c-bg-gray: #f7f7f7; /* NEWS/採用背景 */
  --c-field: #f0eff2; /* フォーム入力欄背景 */
  --c-req: #e8380d; /* 必須バッジ */

  /* --- font --- */
  --ff-base: "Noto Sans JP", sans-serif;
  --ff-en: "Oswald", sans-serif;
  --ff-inter: "Inter", sans-serif;
  --ff-num: "Helvetica Neue", Arial, sans-serif;

  /* --- responsive font-size（BPで上書き） --- */
  --fs-hero: 66px; /* MV見出し */
  --fs-h1: 56px; /* 大見出し（作る前に〜 / RECRUIT / NEWS） */
  --fs-h2: 40px; /* 大見出し（セクション見出し）: 40/34/28 */
  --fs-h3: 28px; /* 中見出し: 28/25/22 */
  --fs-lead: 20px; /* リード文・小見出し */
  --fs-body: 16px; /* 標準本文 */
  --fs-num: 66px; /* 実績の大数字 */

  /* --- layout（BPで上書き） --- */
  --container: 1200px; /* コンテンツ最大幅 */
  --gutter: 120px; /* 左右余白 */
  --header-h: 88px; /* 固定ヘッダーの高さ＝下層タイトルのヘッダー逃げに使用（1元管理） */
  --section-gap: 96px; /* セクション間の縦余白：PC96 / SP56（隣接で二重になるため圧縮） */

  /* --- radius --- */
  --r-pill: 100px;
  --r-card: 30px;
  --r-md: 20px;
  --r-sm: 10px;
  --r-xs: 5px;
  --ribbon: 100px; /* 白パネル⇄黄帯の食い込み角丸量・重なり量 */

  /* --- shadow --- */
  --shadow-card: 0 10px 25px rgba(0, 0, 0, 0.12);

  /* --- motion（P5-1 モーショントークン） --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.4s;
  --dur-xs: 0.2s;
  --dur-s: 0.4s;
  --dur-m: 0.8s;
  --dur-l: 1.2s;
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
/* ページ内アンカーをスムーズスクロール（reduced-motion時は reset.css が auto に上書き） */
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--ff-base);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--c-text);
  background-color: var(--c-white);
  overflow-x: hidden;
  /* P2-1 和文タイポ：日本語の行頭禁則を厳格に（本文はベタ組み維持） */
  line-break: strict;
  /* P2-5 和文の折り返し品質：テキストは無改変、折り返し位置のみ制御。
     auto-phrase/pretty 非対応ブラウザは自動でフォールバック（従来の折り返し）。 */
  word-break: auto-phrase; /* 文節単位で改行＝単語途中割れ・1文字孤立を抑制 */
  text-wrap: pretty; /* 段落末尾の泣き別れ・孤立行を抑制 */
  hanging-punctuation: allow-end; /* 行末の句読点をぶら下げ右端を整える */
}

/* P2-5 要所の手動グループ化：この単位内では改行させず、狙った位置で折り返す（テキスト無改変） */
.u-nb {
  white-space: nowrap;
}
/* P2-5 幅の狭いUIラベル/バッジ用：文節折り返し(auto-phrase)だと収まらない箇所を
   通常のCJK折り返しに戻して確実に枠内へ収める（読み流す本文には使わない） */
.u-fit {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* P2-5 BudouX：JSが文節境界に <wbr> を挿入した要素。keep-all で「<wbr>でのみ改行」
   ＝Chrome専用の auto-phrase に依存せず全ブラウザ(Safari含む)で文節折り返し。
   overflow-wrap は万一長い塊が出た時の溢れ防止（min-content には影響しない break-word）。 */
.is-budoux {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* P2-1 見出しのみ字詰め＋多行バランス改行（本文には適用しない）。
   :where() で詳細度0＝既存スタイルを一切上書きしない安全な追加。 */
:where(h1, h2, h3, h4, h5, h6) {
  font-feature-settings: "palt";
  text-wrap: balance;
}

/* P4-6 ページ内アンカー：スムーススクロール（動きの配慮あり）＋固定ヘッダー分のオフセット */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
:where([id]) {
  scroll-margin-top: 100px;
}

/* P3-1 フォーカス可視化：キーボード操作時のみリング表示（マウスクリックでは出ない）。
   modern browser では outline が border-radius に追従＝ピルにも綺麗に沿う。 */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 2px;
}
/* 黄背景セクション等・青が沈む箇所は濃色リングで担保 */
.p-sv-worry :where(a, button):focus-visible {
  outline-color: var(--c-btn);
}

::selection {
  background-color: var(--c-yellow);
  color: var(--c-text);
}

/* ==========================================================================
   3. Layout
   ========================================================================== */
.l-container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.l-section {
  position: relative;
  padding-block: var(--section-gap);
}

.l-section__head {
  display: grid;
  gap: 24px;
  margin-bottom: 56px;
}

/* セクション英字ラベル＋見出しの定型 */
.l-section__label {
  font-size: var(--fs-lead);
  font-weight: 700;
}
.l-section__label--accent {
  color: var(--c-accent);
}

/* ==========================================================================
   4. Components
   ========================================================================== */

/* --- 共通ボタン（黒丸 313x54） --- */
.c-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 313px;
  max-width: 100%;
  min-height: 54px;
  padding-inline: 48px;
  border-radius: var(--r-pill);
  background-color: var(--c-btn);
  color: var(--c-white);
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  transition:
    background-color var(--dur) var(--ease),
    transform 0.16s var(--ease),
    box-shadow var(--dur) var(--ease);
}
/* 矢印はCSSで共通描画（i-white-arrow・8.5×7px）。HTMLに<img class="c-btn__icon">は不要 */
.c-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 24px;
  width: 8.5px;
  height: 7px;
  background: url("../img/i-white-arrow.svg") no-repeat center / contain;
  transform: translateY(-50%);
  transition: transform var(--dur) var(--ease);
}
.c-btn__icon {
  display: none;
}
.c-btn:hover {
  background-color: var(--c-accent);
}
.c-btn:hover::after {
  transform: translate(6px, -50%);
}
/* P3-2 押下・無効の状態 */
.c-btn:active {
  transform: scale(0.98);
}
.c-btn:disabled,
.c-btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* --- 橙CTA（ヘッダー等） --- */
.c-btn--accent {
  width: auto;
  background-color: var(--c-accent);
  border-radius: var(--r-pill);
}
.c-btn--accent:hover {
  background-color: var(--c-btn);
}

/* --- 見出しユーティリティ --- */
.c-heading {
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

/* --- タグ（実績カード等） --- */
.c-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xs);
  font-size: 14px;
  line-height: 1.4;
}

/* ==========================================================================
   5. Header / Nav
   ========================================================================== */
.l-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-block: 14px;
  transition:
    background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.l-header.is-scrolled {
  background-color: var(--c-white);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.06);
  padding-block: 10px; /* P3-3 スクロールで少し詰める */
}
.l-header__logo img {
  transition: transform var(--dur) var(--ease);
}
.l-header.is-scrolled .l-header__logo img {
  transform: scale(0.92);
}
.l-header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: 1325px;
  margin-inline: auto;
  padding-inline: 24px;
}
.l-header__logo {
  display: block;
  width: 200px;
  flex-shrink: 0;
}

/* グローバルナビ（PCインライン） */
.l-gnav {
  margin-left: auto;
}
.l-gnav__list {
  display: flex;
  align-items: center;
  gap: 28px;
}
.l-gnav__item a {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.07em;
  transition: color var(--dur) var(--ease);
}
.l-gnav__item a:hover {
  color: var(--c-accent);
}

/* A-4 実績紹介ドロップダウン（gnav・disclosure） */
.l-gnav__item--sub {
  position: relative;
}
.l-gnav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: inherit;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.l-gnav__toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform var(--dur) var(--ease);
}
.l-gnav__toggle:hover,
.l-gnav__toggle.is-current {
  color: var(--c-accent);
}
.l-gnav__item--sub:hover .l-gnav__toggle::after,
.l-gnav__item--sub.is-open .l-gnav__toggle::after {
  transform: rotate(-135deg) translateY(2px);
}
.l-gnav__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 20;
  min-width: 210px;
  margin-top: 14px;
  padding: 10px;
  background: #fff;
  border-radius: var(--r-sm);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.13);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility var(--dur);
}
/* ホバーgapを橋渡し（トグル↔パネル間でホバーが切れないように） */
.l-gnav__sub::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}
.l-gnav__item--sub:hover .l-gnav__sub,
.l-gnav__item--sub:focus-within .l-gnav__sub,
.l-gnav__item--sub.is-open .l-gnav__sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.l-gnav__sub li + li {
  margin-top: 2px;
}
.l-gnav__sub a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--r-xs);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.l-gnav__sub a:hover,
.l-gnav__sub a[aria-current] {
  background: var(--c-bg-soft);
  color: var(--c-accent);
}

/* ヘッダーCTA（橙ピル / メールアイコン左） */
.l-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  height: 54px;
  padding-inline: 24px;
  border-radius: var(--r-pill);
  background-color: var(--c-accent);
  color: var(--c-white);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease);
}
.l-header__cta img {
  width: 20px;
}
.l-header__cta:hover {
  background-color: var(--c-btn);
}

/* ハンバーガー（全BPで常時表示・60px黒丸） */
.l-header__hamburger {
  position: relative;
  z-index: 102;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: var(--r-pill);
  background-color: var(--c-btn);
}
.l-header__bar {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--c-white);
  transition: transform var(--dur) var(--ease);
}
.l-header__hamburger.is-open .l-header__bar:nth-child(1) {
  transform: translateY(3.5px) rotate(45deg);
}
.l-header__hamburger.is-open .l-header__bar:nth-child(2) {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* Drawer（全画面メニュー） */
.l-drawer {
  position: fixed;
  inset: 0;
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c-white);
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform 0.45s var(--ease),
    visibility 0.45s var(--ease);
}
.l-drawer.is-open {
  transform: none;
  visibility: visible;
}
.l-drawer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  width: 100%;
  padding-inline: 24px;
}
.l-drawer__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}
.l-drawer__list a {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: color var(--dur) var(--ease);
}
.l-drawer__list a:hover {
  color: var(--c-accent);
}

/* A-4 実績紹介ドロップダウン（drawer・アコーディオン） */
.l-drawer__sub-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.l-drawer__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: inherit;
  cursor: pointer;
}
.l-drawer__toggle::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur) var(--ease);
}
.l-drawer__toggle.is-current {
  color: var(--c-accent);
}
.l-drawer__sub-wrap.is-open .l-drawer__toggle::after {
  transform: rotate(-135deg) translateY(2px);
}
.l-drawer__sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height var(--dur) var(--ease),
    opacity var(--dur) var(--ease),
    margin-top var(--dur) var(--ease);
}
.l-drawer__sub-wrap.is-open .l-drawer__sub {
  max-height: 240px;
  margin-top: 22px;
  opacity: 1;
}
.l-drawer__sub a {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text-gray, #888);
}
.l-drawer__sub a:hover,
.l-drawer__sub a[aria-current] {
  color: var(--c-accent);
}
.l-drawer__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding-inline: 36px;
  border-radius: var(--r-pill);
  background-color: var(--c-accent);
  color: var(--c-white);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background-color var(--dur) var(--ease);
}
.l-drawer__cta img {
  width: 20px;
}
.l-drawer__cta:hover {
  background-color: var(--c-btn);
}

/* ==========================================================================
   2.7 全画面メニューのリッチ化（PC=左ナビ＋右ビジュアル／番号・スタッガー登場）
       HTMLは無改変。番号はCSSカウンタ、登場は .is-open トリガのCSSのみ。
   ========================================================================== */
.l-drawer {
  background-color: #141414;
  color: #fff;
  overflow: hidden;
}
.l-drawer__inner {
  position: relative;
  z-index: 1;
  gap: 40px;
}
.l-drawer__list {
  counter-reset: navnum;
  width: 100%;
  gap: 4px;
}
/* --- 各項目：スタッガー登場（開いた時に下から順に） --- */
.l-drawer__list > li {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.6s var(--ease-out-expo),
    transform 0.6s var(--ease-out-expo);
}
.l-drawer.is-open .l-drawer__list > li {
  opacity: 1;
  transform: none;
}
.l-drawer.is-open .l-drawer__list > li:nth-child(1) {
  transition-delay: 0.08s;
}
.l-drawer.is-open .l-drawer__list > li:nth-child(2) {
  transition-delay: 0.14s;
}
.l-drawer.is-open .l-drawer__list > li:nth-child(3) {
  transition-delay: 0.2s;
}
.l-drawer.is-open .l-drawer__list > li:nth-child(4) {
  transition-delay: 0.26s;
}
.l-drawer.is-open .l-drawer__list > li:nth-child(5) {
  transition-delay: 0.32s;
}
.l-drawer.is-open .l-drawer__list > li:nth-child(6) {
  transition-delay: 0.38s;
}
.l-drawer.is-open .l-drawer__list > li:nth-child(7) {
  transition-delay: 0.44s;
}
.l-drawer.is-open .l-drawer__cta {
  opacity: 0;
  animation: drawer-cta-in 0.6s var(--ease-out-expo) 0.5s forwards;
}
@keyframes drawer-cta-in {
  to {
    opacity: 1;
  }
}
/* --- リンク：番号付き・大型・下線ホバー --- */
.l-drawer__list > li > a,
.l-drawer__sub-wrap > .l-drawer__toggle {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  color: #fff;
  transition:
    color var(--dur) var(--ease),
    letter-spacing var(--dur) var(--ease);
}
.l-drawer__list > li > a::before,
.l-drawer__sub-wrap > .l-drawer__toggle::before {
  counter-increment: navnum;
  content: counter(navnum, decimal-leading-zero);
  font-family: var(--ff-en);
  font-size: 0.42em;
  font-weight: 600;
  color: var(--c-accent);
  letter-spacing: 0.04em;
  transform: translateY(-0.35em);
}
.l-drawer__list > li > a:hover,
.l-drawer__sub-wrap > .l-drawer__toggle:hover {
  color: var(--c-accent);
  letter-spacing: 0.04em;
}
/* --- サブ（実績紹介アコーディオン）は淡色→アクセント --- */
.l-drawer__sub a {
  color: rgba(255, 255, 255, 0.55);
}
.l-drawer__toggle.is-current {
  color: var(--c-accent);
}
/* --- 開いた時はハンバーガーを枠線化してダーク背景で視認性を確保 --- */
.l-header__hamburger.is-open {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

/* === PC（1024〜）：単一カラム・中央寄せのミニマル全画面メニュー（右ビジュアルなし） === */
@media (min-width: 1024px) {
  .l-drawer__inner {
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-inline: 24px;
    gap: 36px;
  }
  .l-drawer__list {
    align-items: center;
    text-align: center;
    gap: 6px;
  }
  .l-drawer__list > li > a,
  .l-drawer__sub-wrap > .l-drawer__toggle {
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: 0.06em;
  }
  .l-drawer__sub-wrap {
    align-items: center;
  }
  .l-drawer__sub {
    align-items: center;
  }
  .l-drawer__sub a {
    font-size: 15px;
  }
  /* 右側ビジュアルパネルは撤去 */
  .l-drawer::after {
    content: none;
  }
}
/* reduced-motion：メニューの登場演出を無効化（即表示） */
@media (prefers-reduced-motion: reduce) {
  .l-drawer__list > li,
  .l-drawer__cta,
  .l-drawer::after {
    transition: none;
    animation: none;
  }
  .l-drawer.is-open .l-drawer__list > li {
    opacity: 1;
    transform: none;
  }
  .l-drawer.is-open .l-drawer__cta {
    opacity: 1;
  }
}

/* ==========================================================================
   6. Sections
   ========================================================================== */

/* --- Hero / MV --------------------------------------------------------- */
.p-hero {
  position: relative;
  padding-block: 210px 120px;
  overflow: hidden;
}
.p-hero__inner {
  position: relative;
}
.p-hero__body {
  position: relative;
  z-index: 2;
  max-width: 760px;
  display: grid;
  gap: 44px;
}
.p-hero__title {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: 0.01em;
}
.p-hero__title-line {
  display: block;
  overflow: hidden;
}
.p-hero__lead {
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.95;
}
.p-hero__note {
  font-size: 14px;
  line-height: 2;
  color: var(--c-text-gray);
}
/* --- Hero visual：人と現場のフォトストリーム ------------------------- */
.p-hero__visual {
  position: absolute;
  top: -70px;
  right: -40px;
  width: 540px;
  height: 680px;
  z-index: 1;
  pointer-events: none;
}
/* 上下端を背景色に溶かす */
.p-hero__visual::before,
.p-hero__visual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 110px;
  z-index: 2;
}
.p-hero__visual::before {
  top: 0;
  background: linear-gradient(#fff, rgba(255, 255, 255, 0));
}
.p-hero__visual::after {
  bottom: 0;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff);
}
/* ブランドの黄色平行四辺形（ill-titlebg モチーフ） */
.p-hero__shape {
  position: absolute;
  top: 200px;
  left: -80px;
  width: 135%;
  height: 230px;
  background: var(--c-yellow);
  border-radius: var(--r-sm);
  transform: rotate(-14deg) skewX(-18deg);
}
.p-hero__stream {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  height: 100%;
  overflow: hidden;
}
.p-hero__track {
  will-change: transform;
  animation: hero-drift 48s linear infinite;
}
.p-hero__col--down .p-hero__track {
  animation-duration: 60s;
  animation-direction: reverse;
}
.p-hero__set {
  display: grid;
  gap: 20px;
  padding-bottom: 20px;
}
.p-hero__photo {
  overflow: hidden;
  border-radius: var(--r-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.p-hero__photo img {
  display: block;
  width: 100%;
  height: auto;
}
@keyframes hero-drift {
  to {
    transform: translateY(-50%);
  }
}
/* SP：横スクロール版フォトストリーム */
@keyframes hero-drift-x {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  /* SP横流し規則(.p-hero__col .p-hero__track=0,2,0)より詳細度を上げて確実に停止 */
  .p-hero .p-hero__col .p-hero__track {
    animation: none;
  }
}

/* --- Results（実績数） -------------------------------------------------- */
.p-results {
  /* 下は0：直後の p-organize が上に section-gap を持つため、二重余白を回避（隣接=1間隔） */
  padding-block: 40px 0;
}
.p-results__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 27px;
}
.p-results__card {
  display: grid;
  align-content: center;
  gap: 8px;
  aspect-ratio: 280 / 160;
  padding: 26px 24px;
  border-radius: var(--r-sm);
  color: var(--c-white);
}
.p-results__card--red {
  background-color: var(--c-red);
}
.p-results__card--blue {
  background-color: var(--c-blue);
}
.p-results__card--green {
  background-color: var(--c-green);
}
.p-results__card--yellow {
  background-color: var(--c-yellow-deep);
}
.p-results__label {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  /* 複合語ラベルは HTML の <wbr> で指定した位置でのみ改行（カタカナ途中割れ防止）。
     BudouX は data-no-budoux でスキップ。万一の溢れは break-word で保険。 */
  word-break: keep-all;
  overflow-wrap: break-word;
}
.p-results__num {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--ff-en);
  font-size: var(--fs-num);
  font-weight: 600;
  line-height: 1;
}
.p-results__unit {
  font-family: var(--ff-base);
  font-size: 20px;
  font-weight: 700;
}
.p-results__clients {
  margin-top: 64px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 48px;
}
.p-results__clients-info {
  flex-shrink: 0;
}
.p-results__clients-head {
  font-size: 24px;
  font-weight: 700;
}
.p-results__clients-note {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 400;
  color: var(--c-text-mute);
}

/* ロゴ無限マーキー（左方向ループ） */
.p-results__marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent);
}
.p-results__marquee-track {
  display: flex;
  width: max-content;
  animation: client-marquee 30s linear infinite;
}
.p-results__marquee:hover .p-results__marquee-track {
  animation-play-state: paused;
}
.p-results__marquee-track img {
  flex: none;
  width: auto;
  max-width: none;
  height: 64px;
  margin-right: 60px;
}
@keyframes client-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* --- Organize（整理から始める） ---------------------------------------- */
.p-organize {
  position: relative;
  z-index: 2;
  padding-block: var(--section-gap);
  background-color: var(--c-white);
  /* 下の両角を丸く抜き、背面に重なる黄帯を覗かせる（食い込み角丸） */
  border-radius: 0 0 var(--ribbon) var(--ribbon);
}
.p-organize__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.p-organize__title {
  font-size: var(--fs-h1);
  line-height: 1.5;
}
.p-organize__text {
  display: grid;
  gap: 1.6em;
  margin-top: 40px;
  font-size: 16px;
  line-height: 1.9;
  max-width: 600px;
}
.p-organize__media {
  position: relative;
  aspect-ratio: 610 / 760;
}
.p-organize__img,
.p-organize__art {
  position: absolute;
}
.p-organize__img {
  border-radius: var(--r-sm);
  object-fit: cover;
}
.p-organize__img--main {
  top: 0;
  right: 0;
  width: 100%;
  aspect-ratio: 610 / 380;
}
.p-organize__img--sub1 {
  top: 58%;
  left: 20%;
  width: 45%;
  aspect-ratio: 275 / 171;
}
.p-organize__img--sub2 {
  top: 78%;
  left: 55%;
  width: 45%;
  aspect-ratio: 275 / 171;
}
.p-organize__art {
  top: 61%;
  left: -6%;
  width: 26%;
}

/* --- Concept（黄帯） ---------------------------------------------------- */
.p-concept {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--ribbon) * -1); /* 白パネルへ重ねる */
  padding-block: calc(120px + var(--ribbon)) 120px;
  background-color: var(--c-yellow);
  /* 下の両角を丸く抜き、背面の白（次セクション）を覗かせる（食い込み角丸） */
  border-radius: 0 0 var(--ribbon) var(--ribbon);
}
.p-concept__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 40px;
  text-align: center;
}
.p-concept__title {
  font-size: var(--fs-h2);
  line-height: 1.45;
}
.p-concept__text {
  max-width: 700px;
  font-size: 22px;
  line-height: 2;
}
.p-concept__btn {
  margin-top: 8px;
}
.p-concept__art {
  position: absolute;
  left: 7%;
  bottom: 110px;
  z-index: 0;
  width: 180px;
}

/* --- Service ----------------------------------------------------------- */
.p-service__title {
  font-size: var(--fs-h2);
  line-height: 1.5;
}
.p-service__lead {
  font-size: 18px;
  line-height: 1.7;
}
.p-service__list {
  display: grid;
  gap: 96px;
  margin-bottom: 96px;
}
.p-service__item {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 64px;
  align-items: center;
}
.p-service__item--reverse {
  grid-template-columns: 1fr 0.85fr;
}
.p-service__item--reverse .p-service__media {
  order: 2;
}
.p-service__media img {
  width: 100%;
  aspect-ratio: 514 / 564;
  object-fit: cover;
  /* テキスト側の上の角だけ大きな角丸（画像左＝右上） */
  border-radius: var(--r-sm) 80px var(--r-sm) var(--r-sm);
}
.p-service__item--reverse .p-service__media img {
  /* 画像右＝左上を大きく */
  border-radius: 80px var(--r-sm) var(--r-sm) var(--r-sm);
}
.p-service__content {
  display: grid;
  gap: 16px;
  align-content: center;
}
.p-service__metric {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.p-service__metric-label,
.p-service__metric-unit {
  font-size: 16px;
  font-weight: 700;
}
.p-service__metric-num {
  font-family: var(--ff-en);
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  color: var(--c-accent);
}
.p-service__name {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.5;
}
.p-service__desc {
  font-size: 16px;
  line-height: 1.9;
}
/* 控えめな補足文（desc とボタンの間） */
.p-service__note {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--c-text-mute);
}
.p-service__btn {
  margin-top: 12px;
  width: auto;
  min-width: 313px;
  justify-self: start;
  white-space: nowrap;
}
.p-service__maintenance {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 48px 40px;
  border: 1px solid #a8a8a8;
  text-align: center;
}
.p-service__maintenance-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
}
.p-service__maintenance-text {
  font-size: 16px;
  line-height: 1.9;
}

/* --- Achievements（スライダー） ---------------------------------------- */
.p-achievements__title {
  font-size: var(--fs-h2);
  line-height: 1.5;
}
.p-achievements__lead {
  font-size: 16px;
  line-height: 1.95;
}
.p-achievements__slider {
  overflow: hidden;
  margin-bottom: 48px;
}
.p-achievements__track {
  display: flex;
  gap: 60px;
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
  transition: transform 0.55s var(--ease);
}
.p-achievements__card {
  flex: 0 0 570px;
  max-width: 570px;
}
/* カードビジュアル（PC＋スマホ合成モックアップ） */
.p-achievements__visual {
  position: relative;
  /* スマホ枠が下にはみ出せるよう overflow は clip しない（画像側で角丸クリップ） */
  border-radius: var(--r-card);
  background-color: var(--c-white);
  /* 実績一覧（p-wk-case__shot）と同じ比率で統一 */
  aspect-ratio: 570 / 540;
}
/* 枠線は擬似要素で重ね、角の滲みを防ぐ（実績一覧 p-wk-case__shot と同じ2px黒罫線） */
.p-achievements__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 2px solid var(--c-black);
  border-radius: var(--r-card);
  pointer-events: none;
}
.p-achievements__visual img {
  display: block;
  width: 100%;
  height: auto;
}
/* PCビュー画像は固定比率のビジュアルを cover で埋める（実績一覧と同じ見え方）。上端基準でトリミング */
.p-achievements__visual .p-achievements__pc {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--r-card);
}
/* 実績スライダー動的化：カードリンク＋スマホ枠（df_works_sp）をPC画像に重ねる */
.p-achievements__link {
  display: block;
  color: inherit;
}
/* SP枠は実績一覧（p-wk-phone）と同じく右下にはみ出す配置＋前面に */
.p-achievements__visual .p-wk-phone {
  right: 24px;
  bottom: -20px;
  z-index: 2;
}
.p-achievements__visual .p-wk-phone__shot {
  width: 100%;
  height: calc(100% - 18px);
}
.p-achievements__body {
  padding-top: 24px;
}
.p-achievements__company {
  font-size: 14px;
}
.p-achievements__card-title {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
.p-achievements__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.p-achievements__keywords {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.7;
}
.p-achievements__foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-achievements__nav {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 8px;
}
.p-achievements__arrow {
  width: 48px;
  height: 48px;
  transition: opacity var(--dur) var(--ease);
}
.p-achievements__arrow img {
  width: 100%;
  height: 100%;
}
.p-achievements__arrow:hover {
  opacity: 0.6;
}

/* --- Interview --------------------------------------------------------- */
.p-interview {
  position: relative;
  overflow: hidden;
}
/* 左下の水色リング装飾（CSSで再現・一部画面外） */
.p-interview__deco {
  position: absolute;
  left: -185px;
  top: 410px;
  z-index: 0;
  width: 442px;
  height: 442px;
  border: 68px solid var(--c-blue);
  border-radius: 50%;
  pointer-events: none;
}
.p-interview .l-container {
  position: relative;
  z-index: 1;
}
.p-interview__inner {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 40px;
  align-items: start;
}
.p-interview__title {
  font-size: var(--fs-h2);
  line-height: 1.5;
}
.p-interview__text {
  display: grid;
  gap: 1.4em;
  font-size: 16px;
  line-height: 1.75;
}
.p-interview__media {
  display: flex;
  align-items: flex-start;
  gap: 4.9%;
}
.p-interview__img {
  border-radius: var(--r-sm);
  object-fit: cover;
}
.p-interview__img--1 {
  width: 53.8%;
  aspect-ratio: 364 / 491;
  margin-top: 5.5%;
}
.p-interview__img--2 {
  width: 41.3%;
  aspect-ratio: 279 / 491;
}
.p-interview__foot {
  display: flex;
  justify-content: center;
  margin-top: 64px;
}

/* --- Column ------------------------------------------------------------ */
.p-column {
  position: relative;
  padding-block: var(--section-gap);
  background-color: var(--c-bg-soft);
}
/* 上中央の三角（^） */
.p-column::before {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 14px solid transparent;
  border-top: 0;
  border-bottom-color: var(--c-bg-soft);
}
/* 左上角の白い三角（斜めカット装飾） */
.p-column::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 456px;
  height: 307px;
  background-color: var(--c-white);
  clip-path: polygon(33% 0, 100% 0, 100% 100%, 0 100%, 0 42%);
  pointer-events: none;
}
/* 装飾より前面にコンテンツを置く */
.p-column > .l-container,
.p-column > .p-column__slider {
  position: relative;
  z-index: 1;
}

/* ヘッダー：左見出し＋右リード */
.p-column__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 56px;
}
.p-column__heading {
  display: grid;
  gap: 24px;
}
.p-column__title {
  font-size: var(--fs-h2);
  line-height: 1.45;
}
.p-column__lead {
  flex-shrink: 0;
  text-align: right;
  font-size: 16px;
  line-height: 1.7;
}

/* スライダー */
.p-column__slider {
  overflow: hidden;
}
.p-column__track {
  display: flex;
  gap: 30px;
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
  transition: transform 0.55s var(--ease);
}
.p-column__item {
  flex: 0 0 450px;
  max-width: 450px;
}
.p-column__card {
  display: grid;
  gap: 20px;
}
.p-column__thumb {
  overflow: hidden;
  border-radius: var(--r-md);
  /* アスペクト比はコンテナ側で固定：画像が404/未生成でも高さが膨張しない
     （WPが sizes="auto" 画像に付ける contain-intrinsic-size:3000px 1500px 対策） */
  aspect-ratio: 450 / 253;
}
.p-column__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.p-column__card:hover .p-column__thumb img {
  transform: scale(1.05);
}
.p-column__card-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}
.p-column__meta {
  display: flex;
  align-items: center;
  gap: 14px;
}
.p-column__cat {
  padding: 2px 10px;
  border: 1px solid var(--c-black);
  border-radius: var(--r-xs);
  background-color: var(--c-white);
  font-size: 11px;
  white-space: nowrap;
}
.p-column__date {
  font-family: var(--ff-num);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.p-column__author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.p-column__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--c-border);
  flex-shrink: 0;
  overflow: hidden;
}
.p-column__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 区切り線＋コントロール */
.p-column__divider {
  height: 1px;
  margin-top: 56px;
  background-color: var(--c-border);
}
.p-column__controls {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}
.p-column__dots {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.p-column__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--c-border);
  transition: background-color var(--dur) var(--ease);
}
.p-column__dot.is-active {
  background-color: var(--c-accent);
}
.p-column__nav {
  position: absolute;
  right: 0;
  display: flex;
  gap: 8px;
}
.p-column__arrow {
  width: 48px;
  height: 48px;
  transition: opacity var(--dur) var(--ease);
}
.p-column__arrow img {
  width: 100%;
  height: 100%;
}
.p-column__arrow:hover {
  opacity: 0.6;
}

/* --- Seminar ----------------------------------------------------------- */
.p-seminar__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.p-seminar__title {
  font-size: var(--fs-h2);
  margin-bottom: 24px;
  line-height: 1.4;
}
.p-seminar__intro {
  display: grid;
  gap: 20px;
}
.p-seminar__lead {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.9;
}
.p-seminar__strong {
  display: inline-block;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.6;
}
.p-seminar__text {
  font-size: 16px;
  line-height: 1.95;
}
/* 右カラム：バナー＋（任意）最新予定セミナー。upcomingを外しても崩れない */
.p-seminar__main {
  display: grid;
  gap: 24px;
  align-content: center;
}
.p-seminar__panel {
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
}
.p-seminar__panel img {
  width: 100%;
  border-radius: var(--r-md);
  transition: transform 0.6s var(--ease);
}
.p-seminar__panel:hover img {
  transform: scale(1.03);
}
.p-seminar__upcoming {
  display: grid;
  gap: 8px;
}
.p-seminar__upcoming-head {
  font-size: 20px;
  font-weight: 700;
}
.p-seminar__upcoming-link {
  font-size: 16px;
  line-height: 1.7;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}
.p-seminar__upcoming-link:hover {
  color: var(--c-accent);
}
.p-seminar__roll {
  overflow: hidden;
  margin-block: 64px;
}
.p-seminar__roll-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: roll 36s linear infinite;
}
.p-seminar__roll:hover .p-seminar__roll-track {
  animation-play-state: paused;
}
.p-seminar__roll-item {
  flex: 0 0 330px;
}
.p-seminar__roll-item img {
  width: 100%;
  border-radius: var(--r-md);
}
@keyframes roll {
  to {
    transform: translateX(calc(-50% - 12px));
  }
}
/* 過去セミナーのアーカイブ */
.p-seminar__archive {
  display: grid;
  gap: 16px;
  padding: 32px 40px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.p-seminar__archive-head {
  font-size: 20px;
  font-weight: 700;
}
.p-seminar__archive-list {
  display: grid;
  gap: 12px;
  font-size: 16px;
  color: var(--c-text-gray);
}
.p-seminar__archive-list a {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}
.p-seminar__archive-list a:hover {
  color: var(--c-accent);
}
.p-seminar__foot {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* --- News -------------------------------------------------------------- */
.p-news {
  background-color: var(--c-bg-gray);
}
.p-news__inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 60px;
}
/* お知らせ一覧アーカイブ（/news/）＝1カラム・背景白（TOPのp-newsとは別扱い） */
.p-news--archive {
  background-color: var(--c-white);
}
.p-news--archive .p-news__inner {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.p-news__title {
  font-family: var(--ff-en);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}
.p-news__sub {
  margin-top: 8px;
  font-family: var(--ff-inter);
  font-size: 16px;
  color: var(--c-text-mute);
}
.p-news__list {
  display: grid;
}
.p-news__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: baseline;
  padding-block: 24px;
  border-bottom: 1px solid var(--c-line);
}
.p-news__item:first-child {
  border-top: 1px solid var(--c-line);
}
.p-news__date {
  font-family: var(--ff-num);
  font-size: 16px;
  color: var(--c-text-mute);
}
.p-news__link {
  font-size: 16px;
  color: var(--c-text-gray);
  transition: color var(--dur) var(--ease);
}
.p-news__link:hover {
  color: var(--c-accent);
}
.p-news__foot {
  margin-top: 40px;
}

/* --- Recruit ----------------------------------------------------------- */
.p-recruit {
  position: relative;
  overflow: hidden;
  color: var(--c-white);
}
.p-recruit__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.p-recruit__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-recruit__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #5c6579;
  mix-blend-mode: multiply;
}
/* 本文（下部）の可読性確保のため下を少し濃く */
.p-recruit__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(20, 24, 32, 0.45) 0%, rgba(20, 24, 32, 0) 45%);
  pointer-events: none;
}
.p-recruit__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 815px;
  padding-block: 100px 84px;
}
/* RECRUIT / 採用情報（上部中央） */
.p-recruit__head {
  text-align: center;
}
.p-recruit__title {
  font-family: var(--ff-en);
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
}
.p-recruit__sub {
  margin-top: 12px;
  font-family: var(--ff-inter);
  font-size: 16px;
}
/* 下部：本文（左）＋オレンジ円ボタン（右） */
.p-recruit__body-wrap {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
.p-recruit__content {
  display: grid;
  gap: 28px;
}
.p-recruit__catch {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.55;
}
.p-recruit__text {
  display: grid;
  gap: 1.2em;
  font-size: 16px;
  line-height: 1.65;
}
.p-recruit__btn {
  display: grid;
  place-content: center;
  flex-shrink: 0;
  width: 222px;
  height: 222px;
  border-radius: 50%;
  background-color: var(--c-accent);
  color: var(--c-white);
  font-size: 23px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.04em;
  transition:
    background-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.p-recruit__btn:hover {
  background-color: #e85100;
  transform: scale(1.05);
}

/* --- Footer ------------------------------------------------------------ */
.l-footer {
  position: relative;
  padding-top: 90px;
  background-color: var(--c-white);
}
.l-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 380px;
  background: url(../img/footer-bg.jpg) center / cover no-repeat;
}
.l-footer .l-container {
  position: relative;
  z-index: 1;
}
.l-footer__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 90px;
}
.l-footer__card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 44px 48px;
  border-radius: var(--r-md);
  background-color: var(--c-white);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease);
}
.l-footer__card:hover {
  transform: translateY(-4px);
}
.l-footer__card-ja {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text-gray);
}
.l-footer__card-en {
  margin: 6px 0 16px;
  font-family: var(--ff-inter);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.l-footer__card-text {
  font-size: 16px;
  line-height: 1.8;
}
.l-footer__card-arrow {
  width: 48px;
}
.l-footer__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 36px;
}
.l-footer__logo {
  width: 220px;
}
.l-footer__partners {
  display: flex;
  align-items: center;
  gap: 32px;
}
.l-footer__partners img {
  height: 28px;
  width: auto;
}
.l-footer__address {
  padding-bottom: 36px;
  border-bottom: 1px solid var(--c-line);
  font-size: 16px;
  line-height: 1.9;
  color: var(--c-text-gray);
}
.l-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 32px;
  padding-bottom: 40px;
}
.l-footer__links {
  display: flex;
  gap: 30px;
  font-size: 12px;
}
.l-footer__links a:hover {
  color: var(--c-accent);
}
.l-footer__copy {
  font-size: 12px;
  color: var(--c-text-mute);
}
.l-footer__pv {
  width: 46px;
}

/* ==========================================================================
   7. Utilities
   ========================================================================== */
.u-no-scroll {
  overflow: hidden;
}
/* hidden 属性の確実な非表示（display を持つ要素=grid/flex 等で UA の [hidden] が効かない対策） */
[hidden] {
  display: none !important;
}
/* ハニーポット（スパム対策：画面外へ退避。display:none はボットに無視されやすいため使わない） */
.u-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   6b. About ページ（私たちについて）
   ========================================================================== */

/* --- ページタイトルは共通部品 .l-pagehead。about は下に &マーク＋コンセプト文 --- */
.p-ab-hero {
  position: relative;
  padding-bottom: 40px;
}
.p-ab-hero__mark {
  display: block;
  width: 72px;
  margin: 64px auto 28px;
}
.p-ab-hero__catch {
  margin-top: 88px;
  text-align: center;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* --- 導入本文 --- */
.p-ab-intro {
  /* 下は0：直後の p-ab-members が上に section-gap を持つため二重余白を回避（隣接=1間隔） */
  padding-block: 24px 0;
}
.p-ab-intro__inner {
  max-width: 933px;
  margin-inline: auto;
}
.p-ab-intro__text {
  display: grid;
  gap: 1.5em;
  font-size: 16px;
  line-height: 2;
}
.p-ab-intro__lead {
  margin-top: 48px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--c-orange);
}
.p-ab-intro__note {
  margin-top: 24px;
  font-size: 16px;
}

/* --- メンバー --- */
.p-ab-members {
  padding-block: var(--section-gap);
}
.p-ab-members__head {
  display: grid;
  justify-items: center;
  gap: 20px;
  margin-bottom: 64px;
  text-align: center;
}
.p-ab-members__illust {
  width: 110px;
  height: auto;
}
.p-ab-members__title {
  font-family: var(--ff-inter);
  font-size: var(--fs-h3);
  font-weight: 700;
}
.p-ab-members__desc {
  font-size: 16px;
  line-height: 1.9;
}
.p-ab-members__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 56px 40px;
}
.p-ab-member__photo {
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 20px;
  border-radius: 50%;
  overflow: hidden;
}
.p-ab-member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-ab-member__name {
  font-size: 20px;
  font-weight: 700;
}
.p-ab-member__role {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-orange);
}
.p-ab-member__note {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-text);
}

/* --- リニューアルが正解とは限らない（bg-soft帯・テキスト＋画像） --- */
.p-ab-renewal {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-gap);
  background-color: var(--c-bg-soft);
}
/* 左上の白い斜め装飾（上の白セクションへ繋ぐ） */
.p-ab-renewal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 456px;
  height: 307px;
  background-color: var(--c-white);
  clip-path: polygon(33% 0, 100% 0, 100% 100%, 0 100%, 0 42%);
}
.p-ab-renewal > .l-container {
  position: relative;
  z-index: 1;
}
.p-ab-renewal__title {
  font-size: var(--fs-h2);
  line-height: 1.5;
}
.p-ab-renewal__inner {
  display: grid;
  /* 右のメディア（実績スライダー）は約40%に抑え、左のテキスト領域を確保 */
  grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
  gap: 48px;
  align-items: start;
  margin-top: 36px;
}
.p-ab-renewal__sub {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
}
.p-ab-renewal__text {
  display: grid;
  gap: 1.4em;
  margin-top: 28px;
  font-size: 16px;
  line-height: 1.9;
}
/* 画像：黒2px枠＋角丸30pカード＋左右チェブロン矢印 */
.p-ab-renewal__frame {
  display: flex;
  align-items: center;
  gap: 16px;
}
.p-ab-renewal__card {
  position: relative;
  flex: 1 1 0;
  border-radius: var(--r-card);
}
.p-ab-renewal__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 2px solid var(--c-black);
  border-radius: var(--r-card);
  pointer-events: none;
}
.p-ab-renewal__card img {
  display: block;
  width: 100%;
  height: auto;
}
.p-ab-renewal__arrow {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 36px;
  transition: opacity var(--dur) var(--ease);
}
.p-ab-renewal__arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 13px;
  height: 13px;
  border-top: 2px solid var(--c-black);
  border-right: 2px solid var(--c-black);
}
.p-ab-renewal__arrow[data-dir="next"]::before {
  transform: translateX(-3px) rotate(45deg);
}
.p-ab-renewal__arrow[data-dir="prev"]::before {
  transform: translateX(3px) rotate(-135deg);
}
.p-ab-renewal__arrow:hover {
  opacity: 0.55;
}
.p-ab-renewal__media figcaption {
  margin-top: 16px;
  padding-left: 34px;
  font-size: 14px;
}
/* リニューアル実績スライダー（works最新5件・PC/SP・ループ／スワイプ） */
.p-ab-renewal__viewport {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}
.p-ab-renewal__track {
  display: flex;
  will-change: transform;
  transition: transform 0.5s var(--ease);
}
.p-ab-renewal__slide {
  flex: 0 0 100%;
  min-width: 0;
}
.p-ab-renewal__link {
  display: block;
  color: inherit;
}
.p-ab-renewal__card {
  aspect-ratio: 570 / 540;
}
.p-ab-renewal__card .p-ab-renewal__pc {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--r-card);
}
/* SP枠は実績一覧（p-wk-phone）と同じく右下にはみ出す配置＋前面に */
.p-ab-renewal__card .p-wk-phone {
  right: 24px;
  bottom: -20px;
  z-index: 2;
}
.p-ab-renewal__card .p-wk-phone__shot {
  width: 100%;
  height: calc(100% - 18px);
}
.p-ab-renewal__cap {
  margin-top: 28px;
  padding-left: 34px;
  font-size: 14px;
}

/* --- リニューアルを決める前に（3視点） --- */
/* 上部：左に見出し＋本文、右にベン図 */
.p-ab-decide__top {
  display: grid;
  grid-template-columns: 0.78fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 72px;
}
.p-ab-decide__title {
  font-size: var(--fs-h2);
  line-height: 1.5;
}
.p-ab-decide__text {
  display: grid;
  gap: 1.6em;
  margin-top: 32px;
  font-size: 16px;
  line-height: 1.8;
}
.p-ab-decide__diagram img {
  width: 100%;
  height: auto;
}
.p-ab-views {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
}
.p-ab-views__item {
  flex: 1 1 0;
  max-width: 300px;
}
.p-ab-views__name {
  margin-bottom: 16px;
  font-size: var(--fs-h3);
  font-weight: 700;
}
.p-ab-views__text {
  font-size: 16px;
  line-height: 1.8;
}
.p-ab-views__cross {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 56px;
}
.p-ab-views__cross img {
  width: 56px;
}
.p-ab-decide__lead {
  margin-top: 64px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.6;
}

/* --- ベン図＋判断リスト --- */
.p-ab-judge {
  padding-block: 40px var(--section-gap);
}
.p-ab-judge__inner {
  display: grid;
  justify-items: center;
  gap: 48px;
}
.p-ab-judge__visual {
  width: 100%;
  max-width: 560px;
}
.p-ab-judge__visual img {
  width: 100%;
}
.p-ab-judge__panel {
  width: 100%;
  max-width: 762px;
  padding: 32px 48px;
  background-color: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
}
.p-ab-judge__list {
  display: grid;
  gap: 14px;
  font-size: 18px;
  line-height: 1.7;
}
.p-ab-judge__list li {
  position: relative;
  padding-left: 28px;
}
.p-ab-judge__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--c-accent);
}

/* --- 黄色コンセプト帯 --- */
.p-ab-concept {
  position: relative;
  padding-block: 200px 220px;
  background-color: var(--c-yellow);
  /* 下の両角を丸く抜き、背面の白を覗かせる */
  border-radius: 0 0 100px 100px;
}
/* 上の白帯：上部を白に＋上両角を丸く（右上が大きく回り込む形） */
.p-ab-concept::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 100px;
  background-color: var(--c-white);
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  z-index: 0;
}
.p-ab-concept .l-container {
  position: relative;
  z-index: 1;
}
.p-ab-concept__art {
  position: absolute;
  left: 140px;
  bottom: 56px;
  z-index: 0;
  width: 150px;
}
.p-ab-concept__inner {
  display: grid;
  justify-items: center;
  text-align: center;
}
.p-ab-concept__title {
  font-size: var(--fs-h2);
  line-height: 1.5;
}
.p-ab-concept__card {
  width: 100%;
  max-width: 762px;
  margin: 56px 0;
  padding: 32px 48px;
  background-color: var(--c-white);
  border-radius: var(--r-sm);
}
.p-ab-concept__list {
  display: grid;
  gap: 14px;
  text-align: left;
}
.p-ab-concept__list li {
  position: relative;
  padding-left: 30px;
  font-size: 22px;
  line-height: 1.6;
}
.p-ab-concept__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--c-border);
}
.p-ab-concept__text {
  display: grid;
  gap: 1.6em;
  max-width: 760px;
  font-size: 16px;
  line-height: 2;
}

/* --- 私たちの判断基準 --- */
.p-ab-criteria {
  overflow: hidden;
}
.p-ab-criteria__inner {
  position: relative;
}
.p-ab-criteria__art {
  position: absolute;
  right: -40px;
  top: -20px;
  z-index: 0;
  width: 240px;
  pointer-events: none;
}
.p-ab-criteria__body {
  position: relative;
  z-index: 1;
  max-width: 980px;
}
.p-ab-criteria__title {
  font-size: var(--fs-h2);
  line-height: 1.5;
}
.p-ab-criteria__sub {
  margin-top: 24px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-orange);
}
.p-ab-criteria__text {
  display: grid;
  gap: 1.4em;
  margin-top: 32px;
  font-size: 16px;
  line-height: 1.9;
}
/* 画像：左へ流れる無限マーキー（indexのセミナーロールと同方式・角丸＋余白） */
.p-ab-criteria__gallery {
  overflow: hidden;
  margin-top: 96px;
}
.p-ab-criteria__gallery-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: roll 50s linear infinite;
}
.p-ab-criteria__gallery:hover .p-ab-criteria__gallery-track {
  animation-play-state: paused;
}
.p-ab-criteria__gallery-item {
  flex: 0 0 372px;
}
.p-ab-criteria__gallery-item img {
  display: block;
  width: 100%;
  aspect-ratio: 372 / 248;
  object-fit: cover;
  border-radius: var(--r-md);
}

/* --- 教える立場だからこそ --- */
.p-ab-teach__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.p-ab-teach__title {
  font-size: var(--fs-h2);
  line-height: 1.5;
}
.p-ab-teach__text {
  display: grid;
  gap: 1.4em;
  margin-top: 32px;
  font-size: 16px;
  line-height: 1.9;
}
.p-ab-teach__media {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
}
.p-ab-teach__img {
  border-radius: var(--r-sm);
  object-fit: cover;
}
.p-ab-teach__img--1 {
  width: 54%;
  aspect-ratio: 364 / 491;
  margin-top: 6%;
}
.p-ab-teach__img--2 {
  width: 41%;
  aspect-ratio: 279 / 491;
}

/* --- クロージング ＋ CTA --- */
.p-ab-closing {
  padding-block: var(--section-gap);
}
.p-ab-closing__wrap {
  max-width: 930px;
  margin-inline: auto;
}
.p-ab-closing__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.5;
}
.p-ab-closing__inner {
  display: grid;
  grid-template-columns: 1fr 450px;
  gap: 48px;
  align-items: start;
  margin-top: 40px;
}
.p-ab-closing__text {
  display: grid;
  gap: 1.4em;
  font-size: 16px;
  line-height: 1.9;
}

/* CTA BOX（オレンジ） */
.p-ab-closing__cta {
  position: relative;
  display: block;
  padding: 36px 40px;
  background-color: var(--c-accent);
  color: var(--c-white);
  transition: opacity var(--dur) var(--ease);
}
.p-ab-closing__cta:hover {
  opacity: 0.88;
}
.p-ab-closing__cta-ja {
  font-size: 22px;
  font-weight: 700;
}
.p-ab-closing__cta-en {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  font-family: var(--ff-inter);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.p-ab-closing__cta-en img {
  width: 30px;
  height: auto;
}
.p-ab-closing__cta-text {
  margin-top: 20px;
  padding-right: 56px;
  font-size: 16px;
  line-height: 1.7;
}
.p-ab-closing__cta-arrow {
  position: absolute;
  right: 32px;
  bottom: 30px;
  width: 48px;
  height: 48px;
  transition: transform var(--dur) var(--ease);
}
.p-ab-closing__cta:hover .p-ab-closing__cta-arrow {
  transform: scale(1.1);
}

/* about：無背景どうしが隣接する箇所のみ、下余白を0にして二重白余白を解消。
   ※members は直後が renewal の灰色ボックス、renewal は背景色付きのため対象外
     （下余白を残さないとコンテンツが色ボックスに密着してしまう）。
   ※p-ab-concept はリボン（負マージンで食い込む）設計のため対象外。 */
.p-ab-criteria,
.p-ab-teach {
  padding-bottom: 0;
}

/* ==========================================================================
   6c. Works（実績紹介）ページ
   ========================================================================== */

/* --- ボタン橙バリエーション（var(--c-orange) 塗り・中央寄せ） --- */
.c-btn--orange {
  justify-content: center;
  background-color: var(--c-orange);
}
.c-btn--orange:hover {
  background-color: var(--c-accent);
}

/* --- Hero（ページタイトルは共通部品 .l-pagehead・本文のみ固有） --- */
.p-wk-hero {
  position: relative;
}
.p-wk-hero__body {
  margin-top: 40px;
}
.p-wk-hero__lead {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
.p-wk-hero__marker {
  background: linear-gradient(transparent 55%, rgba(248, 181, 0, 0.4) 55%);
}

/* --- Intro（成果から逆算 ＋ コラージュ） --- */
.p-wk-intro {
  padding-block: 56px var(--section-gap);
}
.p-wk-intro__inner {
  display: grid;
  grid-template-columns: 1fr 620px;
  gap: 64px;
  align-items: center;
}
.p-wk-intro__title {
  font-size: var(--fs-h3);
  line-height: 1.5;
}
.p-wk-intro__text {
  display: grid;
  gap: 1.5em;
  margin-top: 32px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
}
.p-wk-intro__visual {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.p-wk-intro__img {
  width: 300px;
  aspect-ratio: 300 / 423;
  object-fit: cover;
  border-radius: var(--r-md);
}

/* --- 3つの視点 --- */
.p-wk-views {
  padding-block: var(--section-gap);
}
.p-wk-views__head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 48px;
}
.p-wk-views__icon {
  width: 76px;
  height: auto;
}
.p-wk-views__title {
  font-size: var(--fs-h3);
}
.p-wk-views__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.p-wk-view {
  padding: 40px 34px;
  border-radius: var(--r-card);
  background-color: var(--c-bg-soft);
}
.p-wk-view__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.p-wk-view__text {
  display: grid;
  gap: 1.5em;
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.7;
}

/* --- 絞り込み検索 --- */
.p-wk-filter {
  padding-block: 0 var(--section-gap);
}
.p-wk-filter__panel {
  padding: 16px 48px;
  background-color: var(--c-white);
  border: 2px solid #a8a8a8;
  border-radius: var(--r-sm);
}
.p-wk-filter__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  align-items: start;
  padding-block: 28px;
}
.p-wk-filter__row + .p-wk-filter__row {
  border-top: 1px dashed var(--c-border);
}
.p-wk-filter__label {
  position: relative;
  padding-left: 24px;
  padding-top: 9px;
  font-size: 16px;
  font-weight: 700;
}
.p-wk-filter__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--c-yellow-deep);
}
.p-wk-filter__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.p-wk-tag {
  padding: 11px 24px;
  background-color: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  font-size: 16px;
  line-height: 1.4;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.p-wk-tag:hover {
  background-color: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-white);
}

/* --- 実績カード一覧 --- */
.p-wk-cases {
  padding-block: var(--section-gap);
}
.p-wk-cases__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px 60px;
}
.p-wk-case__inner {
  display: block;
  color: inherit;
}
.p-wk-case__media {
  position: relative;
  margin-bottom: 28px;
}
.p-wk-case__shot {
  display: block;
  width: 100%;
  aspect-ratio: 570 / 540;
  object-fit: cover;
  object-position: top center;
  border: 2px solid var(--c-black);
  border-radius: var(--r-card);
}
.p-wk-phone {
  position: absolute;
  right: 24px;
  bottom: -20px;
  display: block;
  width: 140px;
  aspect-ratio: 140 / 297;
  background-color: var(--c-white);
  border: 5px solid var(--c-black);
  border-radius: var(--r-md);
  overflow: hidden;
}
.p-wk-phone__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 18px;
  background-color: var(--c-field);
}
.p-wk-phone__notch {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 8px;
  border-radius: var(--r-pill);
  background-color: var(--c-black);
  z-index: 2;
}
.p-wk-phone__shot {
  position: absolute;
  top: 18px;
  left: 0;
  width: 100%;
  height: calc(100% - 18px);
  object-fit: cover;
  object-position: top center;
}
.p-wk-case__client {
  font-size: 14px;
  color: var(--c-text-gray);
}
.p-wk-case__title {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
.p-wk-case__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.p-wk-case__issue {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
}
.p-wk-case__issue-label {
  flex-shrink: 0;
  font-weight: 700;
}
.p-wk-case__inner:hover .p-wk-case__title {
  color: var(--c-accent);
}

/* ページ送り */
.p-wk-pager {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 64px;
}
.p-wk-pager__num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-family: var(--ff-inter);
  font-size: 16px;
  color: var(--c-text);
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.p-wk-pager__num.is-current {
  background-color: var(--c-yellow-deep);
  color: var(--c-white);
}
.p-wk-pager__num:not(.is-current):hover {
  color: var(--c-accent);
}

/* --- セミナー・研修の実績（写真帯） --- */
.p-wk-seminar {
  position: relative;
  padding-block: 100px;
  background: url("../img/bg_seminers.jpg") center / cover no-repeat;
  color: var(--c-white);
}
.p-wk-seminar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.p-wk-seminar__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 28px;
  text-align: center;
}
.p-wk-seminar__title {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.p-wk-seminar__text {
  font-size: 16px;
  line-height: 1.9;
}
.p-wk-seminar__text p + p {
  margin-top: 1.6em;
}
.p-wk-seminar .c-btn {
  margin-top: 12px;
}

/* --- お客様の声 --- */
.p-wk-voice {
  padding-block: var(--section-gap);
  background-color: var(--c-bg-soft);
}
.p-wk-voice__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 24px;
  text-align: center;
}
.p-wk-voice__illust {
  position: absolute;
  left: 100px;
  top: 50%;
  transform: translateY(-50%);
  width: 174px;
  height: auto;
}
.p-wk-voice__title {
  font-size: 40px;
}
.p-wk-voice__text {
  max-width: 620px;
  font-size: 16px;
  line-height: 1.9;
}
.p-wk-voice .c-btn {
  margin-top: 12px;
}

/* ==========================================================================
   6d. Works 詳細（実績詳細）ページ
   ========================================================================== */

/* --- 案件概要（Hero） --- */
.p-wd-hero {
  padding-block: 158px var(--section-gap);
}
.p-wd-hero__inner {
  display: grid;
  grid-template-columns: 1fr 570px;
  gap: 52px;
  align-items: start;
}
.p-wd-hero__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.p-wd-hero__client {
  margin-top: 26px;
  font-size: 19px;
  font-weight: 700;
}
.p-wd-hero__meta {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}
.p-wd-hero__meta-item {
  position: relative;
  padding-left: 32px;
  font-size: 16px;
  line-height: 1.6;
}
.p-wd-hero__meta-item b {
  font-weight: 700;
}
.p-wd-hero__meta-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 19px;
  height: 18px;
  background: url("../img/ill-listdot.svg") center / contain no-repeat;
}
.p-wd-hero__url {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 16px;
  color: var(--c-text);
  text-decoration: none;
  word-break: break-all;
}
.p-wd-hero__url:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.p-wd-hero__url::after {
  content: "";
  flex-shrink: 0;
  width: 15px;
  height: 14px;
  background: url("../img/icon-outlink.svg") center / contain no-repeat;
}

/* --- Design / Website ショーケース --- */
.p-wd-design {
  padding-block: 0 var(--section-gap);
}
.p-wd-design__inner {
  display: grid;
  grid-template-columns: auto 1fr 282px;
  gap: 30px;
  align-items: start;
}
.p-wd-design__scroll {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.p-wd-design__scroll-line {
  width: 1px;
  height: 95px;
  background-color: var(--c-text);
}
.p-wd-design__scroll-text {
  writing-mode: vertical-rl;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
}
.p-wd-design__label {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 700;
}
.p-wd-design__frame {
  height: 480px;
  overflow-y: auto;
  background-color: var(--c-bg-soft);
}
.p-wd-design__frame img {
  display: block;
  width: 100%;
}
/* PC↔SP の間隔を広げる */
.p-wd-design__item--sp {
  margin-left: 50px;
}

/* --- ご相談いただいた背景 --- */
.p-wd-background {
  padding-block: 0 var(--section-gap);
}
.p-wd-background__panel {
  position: relative;
  max-width: 1000px;
  margin-inline: auto;
  padding: 44px 60px;
  background-color: var(--c-bg-soft);
  border-radius: var(--r-md);
}
.p-wd-background__icon {
  position: absolute;
  top: -34px;
  left: 48px;
  width: 92px;
  height: auto;
}
.p-wd-background__title {
  font-size: 24px;
  font-weight: 700;
}
.p-wd-background__text {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.9;
}

/* --- セクション見出し（詳細ページ共通） --- */
.p-wd-heading {
  margin-bottom: 40px;
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --- 最初に整理をしたこと --- */
.p-wd-issues {
  padding-block: 0 var(--section-gap);
}
.p-wd-issues__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
}
.p-wd-issue {
  padding: 22px 24px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
}
.p-wd-issue__num {
  font-family: var(--ff-inter);
  font-size: 24px;
  font-weight: 700;
  color: var(--c-orange);
}
.p-wd-issue__text {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

/* --- 行なった支援内容 --- */
.p-wd-support {
  padding-block: 0 var(--section-gap);
}
.p-wd-support__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.p-wd-scard {
  padding: 36px 28px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.p-wd-scard__icon {
  width: 50px;
  height: auto;
  margin-bottom: 18px;
}
.p-wd-scard__title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}
.p-wd-scard__text {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.5;
}

/* --- 担当者より / 関連サービス --- */
.p-wd-author {
  padding-block: 0 var(--section-gap);
}
.p-wd-author__inner {
  display: grid;
  grid-template-columns: 246px 1fr;
  gap: 46px;
  align-items: start;
}
.p-wd-author__photo {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
}
.p-wd-author__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-wd-author__role {
  margin-top: 22px;
  font-size: 16px;
  font-weight: 700;
}
.p-wd-author__name {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 700;
}
.p-wd-author__bubble {
  position: relative;
  padding: 34px 44px;
  border: 6px solid var(--c-yellow);
  border-radius: var(--r-md);
}
.p-wd-author__bubble::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 48px;
  border-style: solid;
  border-width: 18px 26px 18px 0;
  border-color: transparent var(--c-yellow) transparent transparent;
}
.p-wd-author__title {
  font-size: 20px;
  font-weight: 700;
}
.p-wd-author__comment {
  display: grid;
  gap: 1.3em;
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.7;
}
.p-wd-author__related {
  margin-top: 36px;
}
.p-wd-author__links {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 16px;
}
.p-wd-author__links a {
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.p-wd-author__links a:hover {
  color: var(--c-accent);
}

/* ==========================================================================
   下層：お問い合わせ（contact.html）
   ========================================================================== */
/* ページタイトルは共通部品 .l-pagehead（contact/sales-contact） */

/* --- セクション全体 --- */
.p-ct {
  padding-block: 56px var(--section-gap);
}
.p-ct__intro {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.06em;
}
.p-ct__intro p {
  margin: 0;
}
.p-ct__notes {
  margin-top: 1.8em;
}
.p-ct__note a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.p-ct__note a:hover {
  opacity: 0.7;
}

/* --- フォーム --- */
.p-ct-form {
  margin-top: 64px;
}
.p-ct-form__lead {
  max-width: 864px;
  margin-inline: auto;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.06em;
}
.p-ct-form__lead p {
  margin: 0;
}
.p-ct-form__lead-rule {
  margin-top: 1.8em;
}

.p-ct-form__body {
  max-width: 864px;
  margin: 40px auto 0;
  border-top: 1px solid var(--c-line);
}
.p-ct-row {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding-block: 20px;
  border-bottom: 1px solid var(--c-line);
}
.p-ct-row--textarea {
  align-items: start;
}
.p-ct-row__label {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
}
.p-ct-row--textarea .p-ct-row__label {
  padding-top: 12px;
}

/* 必須バッジ（共通コンポーネント） */
.c-req,
.c-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 22px;
  margin-left: auto;
  padding-inline: 6px;
  border-radius: var(--r-xs);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.c-req {
  background: var(--c-req);
  color: var(--c-white);
}
.c-opt {
  border: 1px solid var(--c-border);
  background: var(--c-white);
  color: var(--c-text-mute);
}

/* 入力欄 */
.p-ct-input,
.p-ct-textarea,
.p-ct-select select {
  width: 100%;
  height: 50px;
  padding-inline: 20px;
  border: none;
  border-radius: var(--r-xs);
  background: var(--c-field);
  color: var(--c-text);
  font-family: inherit;
  font-size: 16px;
  letter-spacing: 0.04em;
}
.p-ct-input::placeholder,
.p-ct-textarea::placeholder {
  color: var(--c-text-mute);
}
.p-ct-textarea {
  height: 180px;
  padding-block: 14px;
  line-height: 1.8;
  resize: vertical;
}
.p-ct-input:focus,
.p-ct-textarea:focus,
.p-ct-select select:focus {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}

/* ご住所（複数入力） */
.p-ct-row__field--address {
  display: grid;
  gap: 10px;
}
.p-ct-input--zip {
  width: 160px;
}
.p-ct-select {
  position: relative;
  width: 240px;
}
.p-ct-select select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* 個人情報の取扱いについて（スクロールボックス） */
.p-ct-privacy {
  margin-top: 56px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xs);
}
.p-ct-privacy__scroll {
  max-height: 200px;
  overflow-y: auto;
  padding: 28px 38px;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
.p-ct-privacy__title {
  font-size: 16px;
  font-weight: 700;
}
.p-ct-privacy__lead {
  margin-top: 1em;
}
.p-ct-privacy h3 {
  margin-top: 1.6em;
  font-size: 14px;
  font-weight: 700;
}
.p-ct-privacy p {
  margin: 0;
}
.p-ct-privacy ul {
  margin-top: 0.4em;
  padding-left: 1.3em;
  list-style: disc;
}
.p-ct-privacy__addr {
  margin-top: 0.8em;
}

/* 同意チェック */
.p-ct-consent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
  font-size: 16px;
  cursor: pointer;
}
.p-ct-consent__box {
  display: grid;
  place-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: 2px solid var(--c-btn);
  border-radius: var(--r-xs);
  background: var(--c-white);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.p-ct-consent__box::before {
  content: "";
  width: 14px;
  height: 8px;
  border-left: 3px solid var(--c-accent);
  border-bottom: 3px solid var(--c-accent);
  transform: rotate(-45deg) translateY(-2px);
  opacity: 0;
}
.p-ct-consent__box:checked::before {
  opacity: 1;
}
.p-ct-consent__note {
  margin-top: 12px;
  font-size: 12px;
  text-align: center;
  letter-spacing: 0.04em;
}

/* 送信／リセット */
.p-ct-actions {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 48px;
}
.p-ct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 283px;
  height: 54px;
  border: none;
  border-radius: var(--r-pill);
  color: var(--c-white);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.p-ct-btn--reset {
  background: var(--c-text-mute);
}
.p-ct-btn--reset:hover {
  background: var(--c-text-gray);
}
.p-ct-btn--submit {
  background: var(--c-accent);
}
.p-ct-btn--submit:hover {
  background: #e14e00;
}
.p-ct-btn__arrow {
  width: 16px;
  transition: transform var(--dur) var(--ease);
}
.p-ct-btn--submit:hover .p-ct-btn__arrow {
  transform: translateX(4px);
}
.p-ct-btn[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

/* エラー表示 */
.p-ct-input.is-error,
.p-ct-textarea.is-error,
.p-ct-select.is-error select {
  box-shadow: inset 0 0 0 2px var(--c-req);
}
.p-ct-error {
  margin-top: 8px;
  color: var(--c-req);
  font-size: 13px;
  line-height: 1.6;
}
.p-ct-consent.is-error .p-ct-consent__box {
  border-color: var(--c-req);
}
.p-ct-consent__error {
  margin-top: 10px;
  color: var(--c-req);
  font-size: 13px;
  text-align: center;
}

/* 送信完了 */
.p-ct-done {
  max-width: 864px;
  margin: 64px auto 0;
  padding: 56px 40px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg-gray);
  text-align: center;
}
.p-ct-done__icon {
  display: grid;
  place-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-white);
}
.p-ct-done__title {
  font-size: 24px;
  font-weight: 700;
}
.p-ct-done__text {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   下層：会社概要・サービス資料ダウンロード（download.html）
   ========================================================================== */
/* ページタイトルは共通部品 .l-pagehead（download） */

/* --- セクション全体 --- */
.p-dl {
  padding-block: 56px var(--section-gap);
}
.p-dl-intro__lead {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
.p-dl-intro__q {
  margin-top: 32px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
.p-dl-intro__text {
  margin-top: 24px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.06em;
}

/* --- 2カラム（左：資料紹介 / 右：フォーム） --- */
.p-dl-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px 600px;
  column-gap: 80px;
  align-items: stretch;
  margin-top: 64px;
}
.p-dl-main__divider {
  width: 1px;
  background: var(--c-line);
}

/* --- 左：資料紹介 --- */
.p-dl-pitch__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--c-accent);
  letter-spacing: 0.04em;
}
.p-dl-pitch__body {
  margin-top: 28px;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
.p-dl-pitch__body p {
  margin: 0;
}
.p-dl-pitch__body p + p {
  margin-top: 1.5em;
}
.p-dl-pitch__list {
  margin-top: 28px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.04em;
}
.p-dl-pitch__list p {
  margin: 0;
}
.p-dl-pitch__divider {
  position: relative;
  height: 0;
  margin-top: 40px;
  border-top: 1px solid var(--c-border);
}
.p-dl-pitch__divider::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 14px;
  height: 14px;
  background: var(--c-white);
  border-right: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  transform: translate(-50%, -1px) rotate(45deg);
}
.p-dl-author {
  margin: 36px 0 0;
  text-align: center;
}
.p-dl-author__photo {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border-radius: 50%;
  object-fit: cover;
}
.p-dl-author__role {
  margin-top: 20px;
  font-size: 12px;
}
.p-dl-author__name {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 700;
}

/* --- 右：フォーム（入力欄・バッジ・個人情報枠・同意・ボタン・完了は p-ct-* を共有） --- */
.p-dl-row {
  margin-bottom: 26px;
}
.p-dl-row__label {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
}
/* 必須/任意バッジはラベル直後に置く（contact の margin-left:auto を打ち消す） */
.p-dl-row__label .c-req,
.p-dl-row__label .c-opt {
  margin-left: 8px;
}
.p-dl-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.p-dl-duo__field {
  display: flex;
  align-items: center;
  gap: 12px;
}
.p-dl-duo__mini {
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 500;
}
.p-dl-duo__field .p-ct-input {
  flex: 1;
  min-width: 0;
}
.p-dl-input--tel {
  max-width: 280px;
}
.p-ct-done__dl {
  margin-top: 28px;
  text-decoration: none;
}

/* ==========================================================================
   下層：会社概要（company.html）
   ========================================================================== */
/* --- ヒーロー（代表ビジュアル＋メッセージ） --- */
.p-co-hero {
  position: relative;
  overflow: hidden;
  /* 他ページ同様、上端のヘッダー領域は白帯にして背景画像を入れない */
  padding-top: 88px;
  background: var(--c-white);
}
.p-co-hero__bg {
  position: absolute;
  inset: 88px 0 0 0; /* ヘッダー分下げて画像を配置 */
  z-index: 0;
  width: 100%;
  height: calc(100% - 88px);
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.p-co-hero::before {
  content: "";
  position: absolute;
  inset: 88px 0 0 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 32%);
  pointer-events: none;
}
.p-co-hero__inner {
  position: relative;
  z-index: 2;
  padding-block: 72px 88px;
}
.p-co-hero__title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-white);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.p-co-hero__panel {
  max-width: 760px;
  margin-top: 32px;
  padding: 34px 36px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--r-sm);
}
.p-co-hero__message {
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.02em;
}
.p-co-hero__message p {
  margin: 0;
}
.p-co-hero__message p + p {
  margin-top: 1em;
}
.p-co-hero__sign {
  margin-top: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: right;
}

/* --- Vision / Mission / Value --- */
.p-co-vmv {
  padding-block: var(--section-gap);
}
.p-co-vmv__list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 56px 56px;
  max-width: 900px;
  margin-inline: auto;
  align-items: center;
}
.p-co-vmv__item {
  display: contents;
}
.p-co-vmv__label {
  font-family: var(--ff-en);
  font-size: 66px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}
.p-co-vmv__initial--v {
  color: var(--c-yellow);
}
.p-co-vmv__initial--m {
  color: #00a774;
}
.p-co-vmv__initial--va {
  color: #3071b9;
}
.p-co-vmv__desc {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

/* --- オフィス写真 --- */
.p-co-gallery__inner {
  display: grid;
  grid-template-columns: 551fr 619fr;
  gap: 30px;
}
.p-co-gallery__img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--r-sm);
}
.p-co-gallery__img--a {
  aspect-ratio: 551 / 443;
}
.p-co-gallery__img--b {
  aspect-ratio: 619 / 443;
}

/* --- 会社概要テーブル --- */
.p-co-info {
  padding-block: var(--section-gap);
}
.p-co-info__list {
  border-top: 1px solid var(--c-line);
}
.p-co-info__row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding-block: 18px;
  border-bottom: 1px solid var(--c-line);
}
.p-co-info__label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
.p-co-info__value {
  font-size: 16px;
  line-height: 1.5;
}

/* ==========================================================================
   下層：料金表（price.html）
   ========================================================================== */
/* ページタイトルは共通部品 .l-pagehead（price/column） */

/* --- イントロ --- */
.p-pr-intro {
  padding-block: 56px 0;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
.p-pr-intro p {
  margin: 0;
}
.p-pr-intro__q {
  margin-top: 1.8em;
}

/* --- 各セクション --- */
.p-pr-sec {
  padding-block: var(--section-gap) 0;
}
/* 最終セクションはフッターとの間に余白を確保 */
.p-pr-sec:last-of-type {
  padding-bottom: var(--section-gap);
}
.p-pr-h2 {
  margin-bottom: 32px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.p-pr-scrollhint {
  display: none;
  width: fit-content;
  margin: 0 auto 14px;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: var(--c-bg-soft);
  color: var(--c-text-gray);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  animation: pr-scrollhint 1.8s var(--ease) infinite;
}
@keyframes pr-scrollhint {
  0%,
  100% {
    transform: translateX(-4px);
  }
  50% {
    transform: translateX(4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-pr-scrollhint {
    animation: none;
  }
}

/* --- 比較表（横スクロール＋左端項目列を固定） --- */
.p-pr-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.p-pr-table {
  width: 100%;
  min-width: 800px;
  border-collapse: separate;
  border-spacing: 0;
}
.p-pr-table th,
.p-pr-table td {
  padding: 16px 18px;
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  font-size: 15px;
  line-height: 1.65;
  text-align: center;
  vertical-align: middle;
}
/* 外周の罫線は「左上の空セル」に付かないよう、見出し行に上・項目名列に左を付与 */
.p-pr-table thead th {
  border-top: 1px solid var(--c-line);
}
.p-pr-table th[scope="row"] {
  border-left: 1px solid var(--c-line);
}
.p-pr-table small {
  font-size: 12px;
  color: var(--c-text-gray);
}
/* プラン見出し（色分け） */
.p-pr-th {
  color: var(--c-white);
  font-weight: 700;
  font-size: 16px;
}
.p-pr-th--blue {
  background: var(--c-blue);
}
.p-pr-th--green {
  background: var(--c-green);
}
.p-pr-th--amber {
  background: var(--c-yellow-deep);
}
/* 左端：項目名列（固定） */
.p-pr-table th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 150px;
  background: var(--c-bg-gray);
  font-weight: 700;
  white-space: nowrap;
}
.p-pr-corner {
  position: sticky;
  left: 0;
  z-index: 3;
  min-width: 150px;
  background: var(--c-white);
}
/* 価格セル */
.p-pr-table .p-pr-price {
  font-size: 32px;
  font-weight: 700;
  white-space: nowrap;
}
.p-pr-table .p-pr-price small {
  font-size: 16px;
  font-weight: 400;
}
/* DFAnalisis 説明（横断セル） */
.p-pr-row--note td {
  text-align: left;
  background: var(--c-white);
}
.p-pr-dfa {
  padding: 8px 4px;
  font-size: 14px;
  line-height: 1.8;
}
.p-pr-dfa__logo {
  width: 190px;
  margin-bottom: 16px;
}
.p-pr-dfa__cost {
  margin-top: 16px;
  padding: 18px 24px;
  background: var(--c-bg-gray);
  border-radius: var(--r-sm);
  font-size: 14px;
  line-height: 1.9;
}
.p-pr-dfa__note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--c-text-gray);
}
.p-pr-linkbtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 15px 32px;
  border-radius: var(--r-pill);
  background: var(--c-btn);
  color: var(--c-white);
  font-size: 15px;
  font-weight: 700;
  transition: background var(--dur) var(--ease);
}
.p-pr-linkbtn img {
  width: 14px;
}
.p-pr-linkbtn:hover {
  background: var(--c-accent);
}

/* --- Web制作：項目/説明/価格リスト --- */
.p-pr-make {
  border-top: 1px solid var(--c-line);
}
.p-pr-make__row {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 200px;
  border-bottom: 1px solid var(--c-line);
}
.p-pr-make__row > * {
  padding: 20px 24px;
}
.p-pr-make__label {
  background: var(--c-bg-gray);
  font-weight: 700;
  line-height: 1.5;
}
.p-pr-make__desc {
  font-size: 15px;
  line-height: 1.7;
}
.p-pr-make__price {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.p-pr-note {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-text-gray);
}

/* カテゴリ見出し（ダークピル＋リード） */
.p-pr-cat {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  margin-top: 56px;
  margin-bottom: 24px;
}
.p-pr-cat__title {
  padding: 18px 16px;
  border-radius: var(--r-sm);
  color: var(--c-white);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
  word-break: keep-all;
}
.p-pr-cat__title--blue {
  background: var(--c-blue);
}
.p-pr-cat__title--green {
  background: var(--c-green);
}
.p-pr-cat__lead {
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

/* futureshop 注記ボックス（白地＋薄枠＋角丸） */
.p-pr-fsbox {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-bottom: 24px;
  padding: 32px 50px;
  background: var(--c-white);
  border: 5px solid var(--c-line);
  border-radius: var(--r-sm);
}
.p-pr-fsbox__logo {
  width: 271px;
  flex-shrink: 0;
}
.p-pr-fsbox p {
  font-size: 14px;
  line-height: 1.8;
}

/* その他カート：ロゴ一覧（白地＋薄枠＋角丸／各社の実比率で配置） */
.p-pr-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 40px;
  padding: 32px 50px;
  background: var(--c-white);
  border: 5px solid var(--c-line);
  border-radius: var(--r-sm);
}
.p-pr-logos__img {
  width: auto;
  height: auto;
  object-fit: contain;
}
.p-pr-logos__img--shopify {
  width: 199px;
}
.p-pr-logos__img--makeshop {
  width: 262px;
}
.p-pr-logos__img--rakuten {
  width: 180px;
}
.p-pr-logos__img--yahoo {
  width: 227px;
}

/* ==========================================================================
   共通コンポーネント：よくある質問（c-faq）※どのページにも設置可・WPループ想定
   ---------------------------------------------------------------------------
   使い方: <div class="c-faq"> の中に <div class="c-faq__item"> を必要な数だけ。
   1 item = 1 Q&A（WPでは投稿をループして __item を出力）。
   ========================================================================== */
.c-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.c-faq__item {
  padding: 32px;
  background: var(--c-bg-soft);
  border-radius: var(--r-md);
}
.c-faq__q,
.c-faq__a {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin: 0;
}
.c-faq__a {
  margin-top: 20px;
}
.c-faq__badge {
  display: block;
  width: 54px;
  height: 54px;
}
.c-faq__q-text {
  align-self: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.02em;
}
.c-faq__a-text {
  padding-top: 4px;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.02em;
}
.c-faq__a-text p {
  margin: 0;
}
.c-faq__a-text p + p {
  margin-top: 1em;
}
.c-faq__a-text a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   下層：よくある質問（faq.html）
   ========================================================================== */
/* ページタイトルは共通部品 .l-pagehead（faq） */

/* --- イントロ＋フィルタ --- */
.p-faq-intro {
  padding-block: 56px 0;
}
.p-faq-intro__lead {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.p-faq-intro__text {
  margin-top: 28px;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
.p-faq-intro__text p {
  margin: 0;
}
.p-faq-intro__text p + p {
  margin-top: 1.8em;
}

/* カテゴリフィルタ（該当セクションへジャンプ） */
.p-faq-filter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 48px;
}
.p-faq-filter__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-white);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}
.p-faq-filter__item::after {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--c-text);
  border-bottom: 2px solid var(--c-text);
  transform: translateY(-2px) rotate(45deg);
  transition: border-color var(--dur) var(--ease);
}
.p-faq-filter__item:hover {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-white);
}
.p-faq-filter__item:hover::after {
  border-color: var(--c-white);
}

/* --- カテゴリ節 --- */
.p-faq-cat {
  padding-block: var(--section-gap) 0;
  scroll-margin-top: 100px;
}
.p-faq-cat__title {
  margin-bottom: 32px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* --- クロージングCTA --- */
.p-faq-cta {
  padding-block: var(--section-gap);
}
.p-faq-cta__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.p-faq-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 48px;
  align-items: center;
  margin-top: 40px;
}
.p-faq-cta__text {
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.02em;
}
.p-faq-cta__text p {
  margin: 0;
}
.p-faq-cta__text p + p {
  margin-top: 1.4em;
}
.p-faq-cta__box {
  position: relative;
  display: block;
  padding: 40px 40px 44px;
  border-radius: var(--r-card);
  background: var(--c-accent);
  color: var(--c-white);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.p-faq-cta__box:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.p-faq-cta__box-ja {
  font-size: 18px;
  font-weight: 700;
}
.p-faq-cta__box-en {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  font-family: var(--ff-en);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.p-faq-cta__box-en img {
  width: 30px;
}
.p-faq-cta__box-text {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.8;
}
.p-faq-cta__box-arrow {
  position: absolute;
  right: 32px;
  bottom: 32px;
  width: 40px;
}

/* ==========================================================================
   下層：SEO対策（seo.html）
   ========================================================================== */
/* --- ヒーロー（左：見出し＋本文／右：写真） --- */
.p-seo-hero {
  position: relative;
  overflow: hidden;
  padding-bottom: var(--section-gap);
}
/* ページタイトルは共通部品 .l-pagehead。以下は seo系固有のMV本文＋写真 */
/* MV本文（左）＋写真（右・ブラウザ端までブリード） */
.p-seo-hero__main {
  position: relative;
  margin-top: 56px;
  min-height: 560px;
}
.p-seo-hero__body {
  position: relative;
  z-index: 1;
  max-width: 620px;
}
.p-seo-hero__catch {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.p-seo-hero__lead {
  margin-top: 28px;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.02em;
}
.p-seo-hero__lead p {
  margin: 0;
}
.p-seo-hero__lead p + p {
  margin-top: 1.2em;
}
.p-seo-hero__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46vw;
  max-width: 720px;
}
.p-seo-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--r-card) 0 0 var(--r-card);
}

/* --- 写真ストリップ（マーキー） --- */
.p-seo-strip {
  overflow: hidden;
}
.p-seo-strip__track {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: seo-strip 45s linear infinite;
}
.p-seo-strip__track li {
  flex: 0 0 auto;
}
.p-seo-strip__track img {
  display: block;
  width: 480px;
  height: 320px;
  object-fit: cover;
  border-radius: var(--r-md);
}
@keyframes seo-strip {
  to {
    transform: translateX(-50%);
  }
}

/* --- ノウハウ共有（3ポイント） --- */
.p-seo-points {
  padding-block: var(--section-gap) 0;
}
.p-seo-points__title {
  margin-bottom: 56px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: center;
}
.p-seo-points__row {
  display: grid;
  grid-template-columns: 370px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.p-seo-points__row + .p-seo-points__row {
  margin-top: 80px;
}
.p-seo-point-card__label {
  padding: 24px;
  border-radius: var(--r-sm);
  background: var(--c-blue);
  color: var(--c-white);
  text-align: center;
}
.p-seo-point-card__no {
  display: block;
  font-size: 14px;
  font-weight: 700;
}
.p-seo-point-card__name {
  display: block;
  margin-top: 6px;
  font-size: 24px;
  font-weight: 700;
}
.p-seo-point-card__illust {
  position: relative;
  z-index: 1;
  margin-top: -20px;
}
.p-seo-point-card__illust img {
  display: block;
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
}
.p-seo-points__sub {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
}
.p-seo-points__text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.02em;
}
.p-seo-points__text p + p {
  margin-top: 1.2em;
}
.p-seo-points__note {
  color: var(--c-text-gray);
  font-size: 13px !important;
}

/* --- 流れ --- */
.p-seo-flow {
  padding-block: var(--section-gap) 0;
}
.p-seo-flow__title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}
.p-seo-flow__sub {
  margin-top: 12px;
  color: var(--c-text-gray);
  font-size: 15px;
  text-align: center;
}
.p-seo-flow__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px;
  margin-top: 48px;
  list-style: none;
}
.p-seo-flow__step {
  position: relative;
}
.p-seo-flow__step + .p-seo-flow__step::before {
  content: "";
  position: absolute;
  left: -42px;
  top: 92px;
  width: 22px;
  height: 30px;
  background: url(../img/icon-arrow-yellowdelta.svg) center / contain no-repeat;
}
.p-seo-flow__box {
  height: 100%;
  padding: 28px 28px 32px;
  border-radius: var(--r-md);
  background: var(--c-bg-soft);
  text-align: center;
}
.p-seo-flow__no {
  display: grid;
  place-content: center;
  width: 60px;
  height: 60px;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--c-blue);
  color: var(--c-white);
  font-family: var(--ff-en);
  font-weight: 700;
  font-size: 24px;
}
.p-seo-flow__name {
  margin-top: 14px;
  font-size: 20px;
  font-weight: 700;
}
.p-seo-flow__badge {
  display: inline-block;
  margin-top: 16px;
  padding: 4px 18px;
  border-radius: var(--r-xs);
  background: var(--c-blue);
  color: var(--c-white);
  font-size: 15px;
  font-weight: 700;
}
.p-seo-flow__list {
  margin-top: 20px;
  display: grid;
  gap: 12px;
  text-align: left;
}
.p-seo-flow__list li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.7;
}
.p-seo-flow__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-blue);
}

/* --- 共通：「一覧はこちら」ボタン中央 --- */
.p-seo-more {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* --- お客様インタビュー --- */
.p-seo-interview {
  padding-block: var(--section-gap);
}
.p-seo-interview__title {
  margin-bottom: 32px;
  font-size: 28px;
  font-weight: 700;
}
.p-seo-interview__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}
.p-seo-interview__thumb img {
  width: 100%;
  aspect-ratio: 570 / 400;
  object-fit: cover;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
.p-seo-interview__name {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 700;
}
.p-seo-interview__desc {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.7;
}
.p-seo-interview__support {
  margin-top: 12px;
  color: var(--c-text-gray);
  font-size: 14px;
}

/* --- SEO対策実績 --- */
.p-seo-results {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-gap);
  background: var(--c-bg-soft);
}
.p-seo-results__deco {
  position: absolute;
  left: var(--gutter);
  bottom: 80px;
  z-index: 2;
  width: 300px;
  pointer-events: none;
}
/* マーケ実績：イラストのbottom位置のみ調整（z-indexは共通の2のまま／SEOには影響させない） */
.p-mk-results .p-seo-results__deco {
  bottom: 25px;
}
.p-seo-results__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.p-seo-results__title {
  margin-bottom: 16px;
  font-size: 28px;
  font-weight: 700;
}
.p-seo-results__lead {
  font-size: 15px;
  line-height: 1.8;
}
/* スライダー（左はコンテナ揃え・右はブラウザ端までブリード、WPで実績投稿をループ） */
.p-seo-results__scroller {
  position: relative;
  z-index: 1;
}
.p-seo-results__row {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(var(--gutter), calc((100vw - 1200px) / 2));
  padding-block: 4px 16px;
  padding-inline: max(var(--gutter), calc((100vw - 1200px) / 2)) 0;
  scrollbar-width: none;
}
.p-seo-results__row::-webkit-scrollbar {
  display: none;
}
.p-seo-result {
  position: relative;
  flex: 0 0 400px;
  scroll-snap-align: start;
  min-height: 240px;
  padding: 32px;
  border-radius: var(--r-md);
  background: var(--c-white);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
.p-seo-result::after {
  content: "";
  position: absolute;
  top: 24px;
  right: 24px;
  width: 14px;
  height: 14px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
}
.p-seo-result__client {
  font-size: 15px;
  font-weight: 700;
}
.p-seo-result__metric {
  margin-top: 6px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-yellow-deep);
}
.p-seo-result__metric small {
  font-size: 16px;
}
.p-seo-result__kw {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
}
.p-seo-result__area {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 14px;
}
.p-seo-result__area img {
  width: 14px;
}

/* スライダー prev/next */
.p-seo-slider-nav {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.p-seo-slider-nav__btn {
  position: relative;
  width: 48px;
  height: 48px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-white);
  cursor: pointer;
  transition:
    border-color var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}
.p-seo-slider-nav__btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--c-text);
  border-right: 2px solid var(--c-text);
}
.p-seo-slider-nav__btn:first-child::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}
.p-seo-slider-nav__btn:last-child::before {
  transform: translate(-70%, -50%) rotate(45deg);
}
.p-seo-slider-nav__btn:hover {
  border-color: var(--c-accent);
}
.p-seo-slider-nav__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* --- 私たちが担当します --- */
.p-seo-team {
  padding-block: var(--section-gap) 0;
}
.p-seo-team__heading {
  margin-bottom: 40px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.p-seo-team__grid {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.p-seo-team__title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.p-seo-team__text {
  margin-top: 24px;
  font-size: 15px;
  line-height: 1.9;
}
.p-seo-team__text p {
  margin: 0;
}
.p-seo-team__text p + p {
  margin-top: 1.2em;
}
.p-seo-team__members {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  list-style: none;
}
.p-seo-member__photo img {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}
.p-seo-member__name {
  margin-top: 18px;
  font-size: 15px;
  font-weight: 700;
}
.p-seo-member__cert {
  margin-top: 8px;
  color: var(--c-accent);
  font-size: 12px;
  line-height: 1.6;
}
.p-seo-member__cert a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.p-seo-member__cert a:hover {
  opacity: 0.75;
}
.p-seo-member__note {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
}

/* --- SEOセミナー実績（横スクロール） --- */
.p-seo-seminar {
  padding-block: var(--section-gap) 0;
}
.p-seo-seminar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.p-seo-seminar__title {
  font-size: 28px;
  font-weight: 700;
}
/* 右端まで続くスクロール（左はコンテナに揃え、右はビューポート端までブリード） */
.p-seo-seminar__scroller {
  position: relative;
}
.p-seo-seminar__scroller::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 16px;
  width: 90px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--c-white));
  pointer-events: none;
}
.p-seo-seminar__row {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(var(--gutter), calc((100vw - 1200px) / 2));
  padding-block: 4px 16px;
  padding-inline: max(var(--gutter), calc((100vw - 1200px) / 2)) 0;
  scrollbar-width: none;
}
.p-seo-seminar__row::-webkit-scrollbar {
  display: none;
}
.p-seo-sem {
  flex: 0 0 340px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
.p-seo-sem__thumb {
  order: 1;
}
.p-seo-sem__ttl {
  order: 2;
}
.p-seo-sem__desc {
  order: 3;
}
.p-seo-sem__tags {
  order: 4;
}
.p-seo-sem__meta {
  order: 5;
}
.p-seo-sem__thumb img {
  width: 100%;
  aspect-ratio: 380 / 267;
  object-fit: cover;
  border-radius: var(--r-sm);
}
.p-seo-sem__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.p-seo-sem__ttl {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
.p-seo-sem__desc {
  margin-top: 10px;
  color: var(--c-text-gray);
  font-size: 13px;
  line-height: 1.7;
}
.p-seo-sem__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-size: 12px;
}
.p-seo-sem__cat {
  padding: 3px 12px;
  border-radius: var(--r-xs);
  background: var(--c-yellow);
  font-weight: 700;
}
.p-seo-sem__author {
  display: flex;
  align-items: center;
  gap: 6px;
}
.p-seo-sem__author img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

/* --- よくあるご質問 --- */
.p-seo-faq {
  padding-block: var(--section-gap);
}
.p-seo-faq__title {
  margin-bottom: 16px;
  font-size: 28px;
  font-weight: 700;
}
.p-seo-faq__lead {
  margin-bottom: 32px;
  font-size: 15px;
  line-height: 1.8;
}

/* ==========================================================================
   下層：Webマーケティング（marketing.html）
   ※共通は p-seo- / p-pr- / c-faq を再利用
   ========================================================================== */
/* --- ヒーロー写真をブラウザ左端に（マーケ・デザイン通り） --- */
.p-mk-hero .p-seo-hero__media {
  left: 0;
  right: auto;
}
.p-mk-hero .p-seo-hero__media img {
  object-position: center top;
  border-radius: 0 var(--r-card) var(--r-card) 0;
}
.p-mk-hero .p-seo-hero__body {
  margin-left: auto;
  max-width: 540px;
}

/* --- 売っている会社ではありません（緑背景＝左ブリード＋左上角を斜めカット・「豊富なアウトプット」と同形状） --- */
.p-mk-sell {
  position: relative;
  padding-block: var(--section-gap);
}
/* 緑の背景。左はブラウザ端までブリード、左上角を斜めにカット。写真は右辺からはみ出す */
.p-mk-sell__bg {
  position: absolute;
  z-index: 0;
  left: 0;
  width: 62%;
  top: calc(var(--section-gap) - 56px);
  bottom: calc(var(--section-gap) - 56px);
  background: var(--c-green);
  clip-path: polygon(33% 0, 100% 0, 100% 100%, 0 100%, 0 42%);
}
.p-mk-sell__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 56px;
  align-items: start;
}
.p-mk-sell__title {
  margin-bottom: 32px;
  color: var(--c-text);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.p-mk-sell__text {
  color: var(--c-white);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.02em;
}
.p-mk-sell__text p {
  margin: 0;
}
.p-mk-sell__text p + p {
  margin-top: 1.2em;
}
.p-mk-sell__media {
  display: grid;
  gap: 24px;
}
.p-mk-sell__media img {
  width: 100%;
  aspect-ratio: 480 / 320;
  object-fit: cover;
  border-radius: var(--r-md);
}

/* --- POINT（5枚） --- */
.p-mk-points {
  padding-block: var(--section-gap) 0;
}
.p-mk-points__title {
  margin-bottom: 48px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: center;
}
.p-mk-points__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.p-mk-point {
  padding: 32px 36px;
  border-radius: var(--r-md);
  background: var(--c-bg-soft);
}
.p-mk-point--wide {
  grid-column: 1 / -1;
}
.p-mk-point__badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--r-sm);
  background: var(--c-green);
  color: var(--c-white);
  font-family: var(--ff-en);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
}
.p-mk-point__badge small {
  font-size: 11px;
  letter-spacing: 0.08em;
}
.p-mk-point__ttl {
  margin-top: 20px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.p-mk-point__desc {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.9;
}

/* --- 特徴 / ロードマップ / 資格cross（中央イラスト系） --- */
.p-mk-feature,
.p-mk-roadmap,
.p-mk-cross {
  padding-block: var(--section-gap) 0;
  text-align: center;
}
.p-mk-feature__title,
.p-mk-roadmap__title,
.p-mk-cross__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.p-mk-feature__sub {
  margin-top: 16px;
  font-size: 24px;
  font-weight: 700;
  color: var(--c-orange);
  letter-spacing: 0.04em;
}
.p-mk-roadmap__text {
  max-width: 900px;
  margin: 28px auto 0;
  font-size: 15px;
  line-height: 1.9;
  text-align: left;
}
.p-mk-feature__media,
.p-mk-roadmap__media,
.p-mk-cross__media {
  margin-top: 40px;
}
.p-mk-feature__media img,
.p-mk-roadmap__media img,
.p-mk-cross__media img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
}
/* ロードマップは元画像のMAXサイズを超えない（拡大しない） */
.p-mk-roadmap__media img {
  width: auto;
  max-width: min(100%, 835px);
  margin-inline: auto;
}

/* --- 対策CASE（タブ切り替え） --- */
.p-mk-case {
  padding-block: var(--section-gap);
}
.p-mk-case__title {
  margin-bottom: 32px;
  font-size: 24px;
  font-weight: 700;
}
.p-mk-case__grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.p-mk-case__tabs {
  display: grid;
  gap: 16px;
  margin-top: 40px;
}
.p-mk-case__tab {
  position: relative;
  z-index: 1;
  justify-self: stretch;
  width: 100%;
  padding: 24px 28px;
  border: none;
  border-radius: var(--r-md);
  background: var(--c-bg-soft);
  color: var(--c-text);
  font-family: var(--ff-en);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: left;
  cursor: pointer;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    width var(--dur) var(--ease),
    border-radius var(--dur) var(--ease);
}
.p-mk-case__tab:hover {
  background: #e3e3dd;
}
/* 選択タブは右のパネルに少し重ねる（角丸は四隅とも維持） */
.p-mk-case__tab.is-active {
  z-index: 2;
  justify-self: start;
  width: calc(100% + 36px);
  border-radius: var(--r-md);
  background: var(--c-btn);
  color: var(--c-white);
}
.p-mk-case__panel {
  padding: 40px 48px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.p-mk-case__panel[hidden] {
  display: none;
}
/* タブ切り替えを滑らかに（表示時にフェードイン） */
.p-mk-case__panel.is-active {
  animation: mkCaseFade var(--dur) var(--ease);
}
@keyframes mkCaseFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.p-mk-case__q {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
}
.p-mk-case__ans {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  margin-top: 28px;
}
.p-mk-case__photo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}
.p-mk-case__point {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-yellow-deep);
}
.p-mk-case__a {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.9;
}
.p-mk-cta {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.p-mk-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 44px;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-white);
  font-size: 16px;
  font-weight: 700;
  transition: opacity var(--dur) var(--ease);
}
.p-mk-cta__btn img {
  width: 20px;
}
.p-mk-cta__btn:hover {
  opacity: 0.88;
}

/* --- 実績カード内「やったこと」リスト（p-seo-results 再利用） --- */
.p-mk-result {
  min-height: 0;
}
.p-mk-result__did {
  margin-top: 16px;
}
.p-mk-result__did-ttl {
  font-size: 14px;
  font-weight: 700;
}
.p-mk-result__did ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
  margin-top: 8px;
  padding-left: 1.1em;
  list-style: disc;
  font-size: 13px;
  line-height: 1.6;
}

/* --- 中間コピー --- */
.p-mk-lead2 {
  padding-block: var(--section-gap);
  text-align: center;
}
.p-mk-lead2 p {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

/* --- 豊富なアウトプット（緑の斜め背景＋スライダー） --- */
.p-mk-output {
  position: relative;
  margin-top: 0;
  padding-block: 0 var(--section-gap);
  overflow: hidden;
}
/* 緑の背景：左ブリード、左上角を斜めにカット（デザイン node 611:13073） */
.p-mk-output::before {
  content: "";
  position: absolute;
  left: 0;
  top: 150px;
  bottom: 0;
  width: 100%;
  background: var(--c-green);
  clip-path: polygon(33% 0, 100% 0, 100% 100%, 0 100%, 0 42%);
  z-index: 0;
}
.p-mk-output__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.p-mk-output__headtext {
  min-width: 0;
}
.p-mk-output__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.p-mk-output__text {
  max-width: 760px;
  margin-top: 24px;
  font-size: 15px;
  line-height: 1.9;
}
.p-mk-output__slider {
  position: relative;
  z-index: 1;
  margin-top: 48px;
}
.p-mk-output__row {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.p-mk-output__row::-webkit-scrollbar {
  display: none;
}
.p-mk-output__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: minmax(0, 585px) 444px;
  justify-content: center;
  gap: 20px;
  align-items: stretch;
}
.p-mk-output__img {
  width: 100%;
  min-width: 0;
  aspect-ratio: 585 / 390;
}
.p-mk-output__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.p-mk-output__card {
  padding: 34px 28px;
  border-radius: var(--r-md);
  background: var(--c-white);
  color: var(--c-text);
  border: 1px solid var(--c-line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
.p-mk-output__card-ttl {
  font-size: 28px;
  font-weight: 700;
}
.p-mk-output__card p {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.9;
}
/* ナビ矢印は共通の .p-seo-slider-nav（見出し右）を流用＝他スライダーとあしらい統一 */

/* --- ご支援の流れ（プラン別3行・デザインnode 620:14462） --- */
.p-mk-flow {
  padding-block: var(--section-gap) 0;
}
.p-mk-flow__title {
  margin-bottom: 32px;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.p-mk-flow__rows {
  display: grid;
  gap: 10px;
}
/* 各行＝枠線付き角丸カード。左にプラン名、右にステップ */
.p-mk-flow__row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 24px 32px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.p-mk-flow__plan {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
/* ステップ：ラベル行（上）＋ボックス行（下）の2行グリッド。矢印はボックス行の中央 */
.p-mk-flow__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr);
  grid-template-rows: auto auto;
  row-gap: 8px;
}
.p-mk-flow__label {
  grid-row: 1;
  align-self: end;
  color: var(--c-green);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.p-mk-flow__label:nth-of-type(1) {
  grid-column: 1;
}
.p-mk-flow__label:nth-of-type(2) {
  grid-column: 3;
}
.p-mk-flow__label:nth-of-type(3) {
  grid-column: 5;
}
.p-mk-flow__box {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 75px;
  padding: 14px 20px;
  background: var(--c-bg-soft);
  border-radius: var(--r-sm);
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}
.p-mk-flow__box:nth-of-type(1) {
  grid-column: 1;
}
.p-mk-flow__box:nth-of-type(2) {
  grid-column: 3;
}
.p-mk-flow__box:nth-of-type(3) {
  grid-column: 5;
}
/* 黄色い三角矢印（右向き）。ボックス行の中央に配置 */
.p-mk-flow__arrow {
  grid-row: 2;
  align-self: center;
  justify-self: center;
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 16px solid var(--c-yellow);
}
.p-mk-flow__arrow:nth-of-type(1) {
  grid-column: 2;
}
.p-mk-flow__arrow:nth-of-type(2) {
  grid-column: 4;
}

/* ==========================================================================
   下層：Web制作（web.html）※共通は p-seo- / c-faq / l-footer を再利用
   ========================================================================== */
/* --- ヒーロー：長いタイトルに合わせて調整。写真下部の余白を詰める --- */
.p-web-hero .l-pagehead__title {
  font-size: 40px;
}
.p-web-hero__strong {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.7;
}
.p-web-hero {
  padding-bottom: 0;
}

/* --- 3つの考え方（アイコン3列＋写真2枚） --- */
.p-web-intro {
  padding-block: 56px 0;
}
.p-web-intro__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
}
.p-web-intro__icon {
  width: 200px;
  height: auto;
}
.p-web-intro__ttl {
  margin-top: 12px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.p-web-intro__desc {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.9;
}
.p-web-intro__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 56px;
}
.p-web-intro__photos img {
  width: 100%;
  aspect-ratio: 560 / 373;
  object-fit: cover;
  border-radius: var(--r-md);
}

/* --- 目的に合わせて（赤帯・6サービス） --- */
.p-web-need {
  margin-top: var(--section-gap);
  padding-block: var(--section-gap);
  background: var(--c-red);
  border-radius: 100px 100px 100px 0px;
  color: var(--c-white);
}
.p-web-need__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: center;
}
.p-web-need__lead {
  max-width: 900px;
  margin: 20px auto 0;
  font-size: 15px;
  line-height: 1.9;
  text-align: center;
}
.p-web-need__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 48px;
}
.p-web-need__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px 18px;
  padding: 24px 28px;
  border-radius: var(--r-md);
  background: var(--c-white);
  color: var(--c-text);
}
.p-web-need__icon {
  grid-row: 1;
  grid-column: 1;
  align-self: center;
  width: auto;
  height: auto;
}
/* イラストはデザイン実寸（node 625:1037）に合わせて個別サイズ・タイトルと縦センター */
/* コーポレートのイラストはカード左上からはみ出す（デザイン node 625:1037＝187×158・カード左に約45pxオーバー） */
.p-web-need__card:nth-child(1) {
  position: relative;
  overflow: visible;
}
.p-web-need__card:nth-child(1) .p-web-need__icon {
  align-self: start;
  width: 178px;
  max-width: none;
  margin-left: -73px;
  margin-top: -46px;
}
.p-web-need__card:nth-child(2) .p-web-need__icon {
  width: 104px;
}
.p-web-need__card:nth-child(3) .p-web-need__icon {
  width: 72px;
}
/* EC・LPのイラストはカード上端からはみ出す（デザイン node 625:1037＝EC約7px・LP約19px上へ） */
.p-web-need__card:nth-child(4) .p-web-need__icon {
  align-self: start;
  width: 110px;
  margin-top: -31px;
}
.p-web-need__card:nth-child(5) .p-web-need__icon {
  align-self: start;
  width: 96px;
  margin-top: -43px;
}
.p-web-need__card:nth-child(6) .p-web-need__icon {
  width: 82px;
}
.p-web-need__ttl {
  grid-row: 1;
  grid-column: 2;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.p-web-need__desc {
  grid-row: 2;
  grid-column: 1 / -1;
  font-size: 14px;
  line-height: 1.8;
}

/* --- できること（Web / EC）＋運用保守で共用するグレーボックスのグリッド --- */
.p-web-can {
  padding-block: var(--section-gap) 0;
}
.p-web-can__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 700px;
  gap: 48px;
  align-items: center;
}
.p-web-can__head--ec {
  display: block;
  margin-top: var(--section-gap);
}
.p-web-can__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.p-web-can__lead {
  margin-top: 24px;
  font-size: 15px;
  line-height: 1.9;
}
.p-web-can__img img {
  width: 100%;
  border-radius: var(--r-md);
}
.p-web-can__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.p-web-can__item {
  padding: 24px 28px;
  border-radius: var(--r-md);
  background: var(--c-bg-soft);
}
.p-web-can__item-ttl {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.p-web-can__item p {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.8;
}
.p-web-can__more {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* --- 運用保守管理（グレー帯） --- */
/* 白背景＋グレーのカード（デザイン node 627:2285＝帯なし・カードは --c-bg-soft） */
.p-web-maintain {
  margin-top: var(--section-gap);
  padding-block: var(--section-gap) 0;
}
.p-web-maintain__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  gap: 56px;
  align-items: center;
}
.p-web-maintain__sub {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-text);
}
.p-web-maintain__title {
  margin-top: 12px;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.p-web-maintain__text {
  margin-top: 24px;
  font-size: 15px;
  line-height: 1.9;
}
.p-web-maintain__img img {
  width: 100%;
  aspect-ratio: 480 / 320;
  object-fit: cover;
  border-radius: var(--r-md);
}
.p-web-maintain .p-web-can__grid {
  margin-top: 48px;
}

/* --- 制作の流れ（緑の斜め背景・8ステップ） --- */
.p-web-flow {
  position: relative;
  margin-top: var(--section-gap);
  padding-block: var(--section-gap);
  overflow: hidden;
}
.p-web-flow__bg {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 350px;
  bottom: 0;
  background: var(--c-yellow);
  clip-path: polygon(33% 0, 100% 0, 100% 100%, 0 100%, 0 42%);
}
.p-web-flow__head {
  position: relative;
  z-index: 1;
}
.p-web-flow__title {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.p-web-flow__lead {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.9;
}
.p-web-flow__steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 24px;
  margin-top: 56px;
}
.p-web-flow__step {
  position: relative;
}
.p-web-flow__num {
  position: absolute;
  top: -14px;
  left: -10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-orange);
  color: var(--c-white);
  font-family: var(--ff-en);
  font-size: 22px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.p-web-flow__img img {
  width: 100%;
  aspect-ratio: 260 / 180;
  object-fit: cover;
  border-radius: var(--r-md);
}
.p-web-flow__step-ttl {
  margin-top: 16px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.p-web-flow__step-desc {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.8;
}

/* ==========================================================================
   下層：サービス紹介（service.html）※共通は p-seo-hero / p-service / l-footer 再利用
   ========================================================================== */
/* --- ヒーロー：写真下の余白を詰める --- */
/* ヒーロー：写真はコンテナ内に収める（右端ブリードしない・角丸10px）＋本文2カラム（デザイン node 630:3667） */
.p-sv-hero {
  padding-bottom: 0;
}
.p-sv-hero .p-seo-hero__main {
  min-height: 0;
}
.p-sv-hero__grid {
  display: grid;
  grid-template-columns: minmax(480px, 1fr) minmax(0, 610px);
  gap: 48px;
  align-items: start;
}
.p-sv-hero__body {
  max-width: none;
}
.p-sv-hero__catch {
  font-size: 48px;
  line-height: 1.35;
}
.p-sv-hero__media {
  align-self: start;
}
.p-sv-hero__media img {
  width: 100%;
  aspect-ratio: 610 / 380;
  object-fit: cover;
  border-radius: var(--r-sm);
}

/* --- サービスを選ぶ前に（画像左＋本文右） --- */
.p-sv-intro {
  padding-block: 56px var(--section-gap);
}
.p-sv-intro__inner {
  display: grid;
  grid-template-columns: 620px minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.p-sv-intro__media img {
  width: 100%;
  border-radius: var(--r-md);
}
.p-sv-intro__title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.p-sv-intro__text {
  margin-top: 24px;
  font-size: 15px;
  line-height: 1.9;
}
.p-sv-intro__text p + p {
  margin-top: 1.4em;
}

/* --- このようなお悩みはありませんか？（黄帯） --- */
.p-sv-worry {
  padding-block: var(--section-gap);
  background: var(--c-yellow);
  border-bottom-right-radius: 100px;
}
.p-sv-worry__title {
  margin-bottom: 48px;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}
.p-sv-worry__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 64px;
}
.p-sv-worry__item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.p-sv-worry__q {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
}

/* --- デザインファミリーができること（p-service 再利用） --- */
.p-sv-service {
  padding-block: var(--section-gap);
}
.p-sv-service__title {
  margin-bottom: 48px;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* --- どこから相談すればいいかわからない方へ（グレー斜め背景） --- */
.p-sv-guide {
  position: relative;
  padding-block: var(--section-gap);
  overflow: hidden;
}
.p-sv-guide__bg {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--c-bg-soft);
  clip-path: polygon(32% 0, 100% 0, 100% 100%, 0 100%, 0 20%);
}
.p-sv-guide__head {
  position: relative;
  z-index: 1;
  margin-bottom: 48px;
  text-align: center;
}
.p-sv-guide__icon {
  width: 72px;
  height: auto;
  margin-bottom: 8px;
}
.p-sv-guide__title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.p-sv-guide__lead {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.9;
}
.p-sv-guide__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.p-sv-guide__card {
  padding: 26px 30px;
  border-radius: var(--r-md);
  background: var(--c-white);
  border: 1px solid var(--c-line);
}
.p-sv-guide__card-ttl {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-orange);
}
.p-sv-guide__tags {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: #666;
}

/* --- まずは、状況を整理するところから始めます（5ステップ） --- */
.p-sv-flow {
  padding-block: var(--section-gap);
}
.p-sv-flow__title {
  margin-bottom: 48px;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}
/* 3+2のジグザグ配置。番号丸オレンジ＋間に「＞」チェブロン（icon-barrow）。デザイン node 630:3701 */
.p-sv-flow__flow {
  display: flex;
  flex-direction: column;
  gap: 44px;
  margin-top: 48px;
}
.p-sv-flow__row {
  display: flex;
  align-items: stretch;
}
/* 下段（04・05）は右へオフセットしてジグザグに */
.p-sv-flow__row--lower {
  padding-left: 213px;
}
.p-sv-flow__step {
  flex: 0 0 auto;
}
.p-sv-flow__arrow {
  flex: 1 1 auto;
  min-width: 56px;
  background: url("../img/icon-barrow.svg") no-repeat center / auto 92%;
}
.p-sv-flow__head {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.p-sv-flow__num {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--c-orange);
  color: var(--c-white);
  font-family: var(--ff-en);
  font-size: 24px;
  font-weight: 700;
}
.p-sv-flow__step-ttl {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.p-sv-flow__desc {
  width: 259px;
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.8;
}

/* --- 費用や進め方が気になる方へ（オレンジ2カード） --- */
.p-sv-cost {
  padding-block: 0 var(--section-gap);
  text-align: center;
}
.p-sv-cost__title {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.p-sv-cost__lead {
  max-width: 760px;
  margin: 16px auto 0;
  font-size: 15px;
  line-height: 1.9;
}
.p-sv-cost__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 450px));
  justify-content: center;
  gap: 24px;
  margin-top: 40px;
}
.p-sv-cost__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: 140px;
  padding: 0 40px;
  border-radius: var(--r-md);
  background: var(--c-accent);
  color: var(--c-white);
  text-align: left;
  transition: opacity var(--dur) var(--ease);
}
.p-sv-cost__card:hover {
  opacity: 0.9;
}
/* JA（料金表を見る）が大きく上、EN（PRICE）が小さく下 */
.p-sv-cost__card-ja {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.p-sv-cost__card-en {
  font-family: var(--ff-en);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
}
.p-sv-cost__card-arrow {
  position: absolute;
  right: 32px;
  top: 50%;
  width: 48px;
  transform: translateY(-50%);
}
.p-sv-cost__card-arrow img {
  width: 100%;
  filter: brightness(0) invert(1);
}

/* --- これまでの支援実績（緑斜め背景） --- */
.p-sv-results {
  position: relative;
  padding-block: var(--section-gap);
  overflow: hidden;
}
.p-sv-results__bg {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--c-green);
  clip-path: polygon(32% 0, 100% 0, 100% 100%, 0 100%, 0 20%);
}
.p-sv-results__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 620px minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.p-sv-results__media {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.p-sv-results__img {
  border-radius: var(--r-md);
  object-fit: cover;
}
.p-sv-results__img--1 {
  width: 56%;
  aspect-ratio: 364 / 491;
}
.p-sv-results__img--2 {
  width: 44%;
  margin-top: 40px;
  aspect-ratio: 283 / 499;
}
.p-sv-results__body {
  color: var(--c-white);
}
.p-sv-results__title {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.p-sv-results__text {
  margin-top: 24px;
  font-size: 15px;
  line-height: 1.9;
}
.p-sv-results__btns {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 32px;
}

/* --- クロージングCTA（左本文＋右オレンジ箱） --- */
.p-sv-cta {
  padding-block: var(--section-gap);
}
.p-sv-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 450px;
  gap: 56px;
  align-items: center;
}
.p-sv-cta__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.p-sv-cta__text {
  margin-top: 24px;
  font-size: 15px;
  line-height: 1.9;
}
.p-sv-cta__box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 40px;
  border-radius: var(--r-md);
  background: var(--c-accent);
  color: var(--c-white);
  transition: opacity var(--dur) var(--ease);
}
.p-sv-cta__box:hover {
  opacity: 0.9;
}
.p-sv-cta__box-ja {
  font-size: 15px;
  font-weight: 700;
}
.p-sv-cta__box-en {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-en);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
}
.p-sv-cta__box-en img {
  width: 34px;
}
.p-sv-cta__box-text {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.8;
}
.p-sv-cta__box-arrow {
  position: absolute;
  right: 32px;
  bottom: 32px;
  width: 40px;
}
.p-sv-cta__box-arrow img {
  width: 100%;
}

/* ==========================================================================
   下層：コラム一覧（column.html）※タイトルは p-pr-hero 再利用
   ========================================================================== */
.p-bl-hero__lead {
  position: relative;
  z-index: 1;
  margin-top: 28px;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.02em;
}
/* hero リード下の余白（l-pagehead 化で失われた分を復元。一覧グリッドとの間隔） */
.p-bl-hero__body {
  padding-bottom: 56px;
}

/* --- 一覧レイアウト（サイドバー＋グリッド） --- */
.p-bl {
  padding-block: var(--section-gap);
}
.p-bl__inner {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* --- サイドバー --- */
.p-bl-side__block + .p-bl-side__block {
  margin-top: 56px;
}
.p-bl-side__title {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-line);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.p-bl-side__cats {
  margin-top: 20px;
  display: grid;
  gap: 14px;
}
.p-bl-side__cats a {
  font-size: 15px;
  transition: color var(--dur) var(--ease);
}
.p-bl-side__cats a:hover {
  color: var(--c-accent);
}
.p-bl-side__popular {
  margin-top: 4px;
}
.p-bl-side__popular li {
  border-bottom: 1px solid var(--c-line);
}
.p-bl-side__popular a {
  display: block;
  padding: 18px 0;
  font-size: 13px;
  line-height: 1.6;
  transition: color var(--dur) var(--ease);
}
.p-bl-side__popular a:hover {
  color: var(--c-accent);
}

/* --- 記事グリッド --- */
.p-bl-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px 30px;
}
.p-bl-card__link {
  display: block;
  color: inherit;
}
/* P3-4 サムネのズーム（他カード系と統一） */
.p-bl-card__thumb {
  overflow: hidden;
  border-radius: var(--r-md);
}
.p-bl-card__thumb img {
  width: 100%;
  aspect-ratio: 450 / 253;
  object-fit: cover;
  border-radius: var(--r-md);
  transition: transform 0.4s ease;
}
.p-bl-card__link:hover .p-bl-card__thumb img {
  transform: scale(1.04);
}
.p-bl-card__title {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  transition: color var(--dur) var(--ease);
}
.p-bl-card__link:hover .p-bl-card__title {
  color: var(--c-accent);
}
.p-bl-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 14px;
}
.p-bl-card__tag {
  padding: 4px 12px;
  border-radius: var(--r-xs);
  background: var(--c-yellow);
  font-size: 13px;
  font-weight: 700;
}
.p-bl-card__date {
  font-size: 14px;
  color: #888;
  letter-spacing: 0.04em;
}
.p-bl-card__author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.p-bl-card__author img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}

/* --- ページ送り --- */
.p-bl-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 64px;
}
.p-bl-pager__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--c-text);
  font-family: var(--ff-en);
  font-size: 18px;
  font-weight: 600;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.p-bl-pager__num:hover {
  background: var(--c-bg-soft);
}
.p-bl-pager__num:active {
  transform: scale(0.94);
}
.p-bl-pager__num.is-current {
  background: var(--c-yellow);
  color: var(--c-text);
}

/* ==========================================================================
   記事詳細（column-detail） p-ar / c-post
   ========================================================================== */
.p-ar-page {
  padding-top: 140px;
}

.p-ar {
  min-width: 0;
}

.p-ar__title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.p-ar__eyecatch {
  margin-top: 28px;
}
.p-ar__eyecatch img {
  width: 100%;
  border-radius: var(--r-md);
}

.p-ar__meta {
  margin-top: 20px;
}

/* --- 本文（WPブロックエディター想定の共通タイポグラフィ） --- */
.c-post {
  margin-top: 48px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--c-text);
}
.c-post > * + * {
  margin-top: 1.6em;
}
.c-post h2 {
  position: relative;
  margin-top: 2em;
  padding-left: 24px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
}
.c-post h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 10px;
  height: 1.3em;
  border-radius: 10px;
  background: var(--c-yellow-deep);
}
/* h3：全幅の下線＋左にブルーのアクセント線（推しポイント準拠） */
.c-post h3 {
  position: relative;
  margin-top: 1.8em;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--c-line);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}
.c-post h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 64px;
  height: 2px;
  background: var(--c-blue);
}
/* h4：左にグリーンのリングドット */
.c-post h4 {
  position: relative;
  margin-top: 1.6em;
  padding-left: 22px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}
.c-post h4::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 11px;
  height: 11px;
  border: 3px solid var(--c-green);
  border-radius: 50%;
}
/* h5：左に金色の短いダッシュマーカー */
.c-post h5 {
  position: relative;
  margin-top: 1.4em;
  padding-left: 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-btn);
}
.c-post h5::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 13px;
  height: 3px;
  border-radius: 2px;
  background: var(--c-yellow-deep);
}
.c-post ul,
.c-post ol {
  padding-left: 1.4em;
}
.c-post ul {
  list-style: disc;
}
.c-post ol {
  list-style: decimal;
}
.c-post li + li {
  margin-top: 0.4em;
}
.c-post a {
  color: var(--c-blue);
  text-decoration: underline;
}
.c-post strong {
  font-weight: 700;
}
.c-post mark {
  background: none;
  color: var(--c-accent);
  font-weight: 700;
}
/* 画像：不用意な引き伸ばしはせず、ブロック（figure）画像のみ全幅 */
.c-post img {
  max-width: 100%;
  height: auto;
}
.c-post figure {
  margin: 0;
}
.c-post figure img,
.c-post .wp-block-image img {
  width: 100%;
  border-radius: var(--r-md);
}
.c-post figcaption,
.c-post .wp-block-image figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: #888;
  text-align: center;
}

/* 画像の横並び：WP標準の「ギャラリー」「カラム」ブロックでも整う */
.c-post .wp-block-gallery.has-nested-images,
.c-post .wp-block-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.c-post .wp-block-gallery figure {
  margin: 0;
}

/* 引用（WP標準の「引用」ブロック＝カスタムクラス不要） */
.c-post blockquote,
.c-post .wp-block-quote {
  margin-left: 0;
  padding: 20px 28px;
  border-left: 4px solid var(--c-yellow-deep);
  background: var(--c-bg-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.c-post blockquote cite,
.c-post .wp-block-quote cite {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-style: normal;
  color: #888;
}

/* 表（WP標準の「テーブル」ブロック） */
.c-post table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.c-post th,
.c-post td {
  padding: 12px 16px;
  border: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
}
.c-post thead th {
  background: var(--c-bg-soft);
  font-weight: 700;
}

/* 区切り線（WP標準の「区切り」ブロック） */
.c-post hr,
.c-post .wp-block-separator {
  height: 0;
  margin-block: 2em;
  border: none;
  border-top: 1px solid var(--c-line);
}

/* コード */
.c-post code {
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: var(--c-bg-soft);
  font-size: 0.9em;
}
.c-post pre {
  padding: 20px 24px;
  border-radius: var(--r-sm);
  background: #2b2b2b;
  color: #f5f5f5;
  overflow-x: auto;
  line-height: 1.7;
}
.c-post pre code {
  padding: 0;
  background: none;
  color: inherit;
}

/* インタビュー引用ブロック（アバター付きの装飾用パターン。通常投稿は上記「引用」ブロックでOK） */
.c-post__interview {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}
.c-post__interview-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.c-post__interview-person img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}
.c-post__interview-person span {
  font-size: 15px;
  font-weight: 700;
}
.c-post__interview-text {
  margin-top: 0;
  padding: 28px 32px;
  background: var(--c-bg-soft);
  border-radius: var(--r-md);
  font-size: 15px;
  line-height: 1.9;
}

/* --- この記事を書いた人 --- */
.p-ar-writer {
  margin-top: 72px;
}
.p-ar-writer__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
}
.p-ar-writer__head img {
  width: 26px;
}
.p-ar-writer__inner {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  margin-top: 28px;
}
.p-ar-writer__person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.p-ar-writer__photo img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
}
.p-ar-writer__name {
  font-size: 18px;
  font-weight: 700;
}
.p-ar-writer__box {
  padding: 30px 36px;
  border: 6px solid var(--c-yellow);
  border-radius: var(--r-md);
}
.p-ar-writer__role {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-orange);
}
.p-ar-writer__desc {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.9;
}
.p-ar-writer__certs {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.9;
}
.p-ar-writer__btn {
  margin-top: 28px;
  text-align: center;
}

/* --- 前後の記事 --- */
.p-ar-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 72px;
  padding-top: 32px;
  border-top: 1px solid var(--c-line);
}
.p-ar-nav__item {
  display: block;
  padding: 0 32px;
}
.p-ar-nav__item--prev {
  border-right: 1px solid var(--c-line);
}
.p-ar-nav__item--next {
  text-align: right;
}
.p-ar-nav__label {
  position: relative;
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: #888;
}
.p-ar-nav__item--prev .p-ar-nav__label {
  padding-left: 18px;
}
.p-ar-nav__item--next .p-ar-nav__label {
  padding-right: 18px;
}
.p-ar-nav__label::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
}
.p-ar-nav__item--prev .p-ar-nav__label::before {
  left: 0;
  transform: translateY(-50%);
  border-width: 5px 8px 5px 0;
  border-color: transparent var(--c-btn) transparent transparent;
}
.p-ar-nav__item--next .p-ar-nav__label::before {
  right: 0;
  transform: translateY(-50%);
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--c-btn);
}
.p-ar-nav__title {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}
.p-ar-nav__item:hover .p-ar-nav__title {
  color: var(--c-blue);
}

.p-ar-back {
  margin-top: 56px;
  text-align: center;
}

/* ==========================================================================
   セミナー・研修実績（seminar.html） p-sm-*
   ========================================================================== */
/* --- Hero（タイトルは共通部品 .l-pagehead／以下は導入＋2×2写真） --- */
.p-sm-hero {
  position: relative;
  overflow: hidden;
  padding-bottom: var(--section-gap);
}
.p-sm-hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 500px;
  gap: 56px;
  align-items: start;
  margin-top: 64px;
}
.p-sm-hero__catch {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.p-sm-hero__lead {
  margin-top: 28px;
  font-weight: 700;
  line-height: 1.85;
}
.p-sm-hero__marker {
  padding: 3px 6px;
  background: #f6d84c;
  font-size: 30px;
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.p-sm-hero__marker--sm {
  font-size: 22px;
}
.p-sm-hero__desc {
  margin-top: 32px;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.02em;
}
.p-sm-hero__desc p + p {
  margin-top: 1.4em;
}
.p-sm-hero__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.p-sm-hero__photo {
  aspect-ratio: 240 / 348;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.p-sm-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 検索（絞り込み） --- */
.p-sm-search {
  padding-bottom: var(--section-gap);
}
.p-sm-search__head {
  text-align: center;
}
.p-sm-search__ttl {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.4;
}
.p-sm-search__sub {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}
.p-sm-search__box {
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 8px 40px;
  border: 2px solid #a8a8a8;
  border-radius: var(--r-sm);
}
.p-sm-search__row {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 22px 0;
}
.p-sm-search__row + .p-sm-search__row {
  border-top: 1px dashed #d5d5d5;
}
.p-sm-search__label {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  width: 150px;
  font-size: 16px;
  font-weight: 700;
}
.p-sm-search__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-orange);
}
.p-sm-search__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.p-sm-search__tag {
  padding: 11px 24px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: #fff;
  font-size: 16px;
  line-height: 1.3;
  color: inherit;
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s,
    transform 0.14s var(--ease);
}
.p-sm-search__tag:hover {
  border-color: var(--c-yellow-deep);
  background: #fdf3d0;
}
.p-sm-search__tag:active {
  transform: scale(0.96);
}
.p-sm-search__tag.is-active {
  border-color: var(--c-yellow-deep);
  background: var(--c-yellow);
  font-weight: 700;
}

/* --- 実績一覧グリッド --- */
.p-sm-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 50px 30px;
}
.p-sm-card__link {
  display: block;
  color: inherit;
}
.p-sm-card__thumb {
  aspect-ratio: 380 / 267;
  border-radius: var(--r-md);
  overflow: hidden;
}
.p-sm-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.p-sm-card__link:hover .p-sm-card__thumb img {
  transform: scale(1.04);
}
.p-sm-card__title {
  margin-top: 22px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}
.p-sm-card__link:hover .p-sm-card__title {
  color: var(--c-blue);
}
.p-sm-card__text {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.p-sm-card__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.p-sm-card__cat {
  padding: 3px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xs);
  font-size: 14px;
  line-height: 1.4;
}
.p-sm-card__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.p-sm-card__badge {
  padding: 3px 10px;
  border-radius: var(--r-xs);
  background: var(--c-yellow);
  font-size: 11px;
  font-weight: 700;
}
.p-sm-card__date {
  font-size: 12px;
  color: var(--c-text-mute);
  letter-spacing: 0.04em;
}
.p-sm-card__author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 11px;
}
.p-sm-card__author img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}
.p-sm-list {
  padding-bottom: var(--section-gap);
}

/* ==========================================================================
   セミナー詳細（seminar-detail） p-sd / c-toc
   ========================================================================== */
.p-sd {
  padding-top: 140px;
  padding-bottom: var(--section-gap);
}
.p-sd__inner {
  max-width: calc(1200px + var(--gutter) * 2);
}

/* --- メタ（タイトル上） --- */
.p-sd-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}
.p-sd-meta__badge {
  padding: 3px 10px;
  border-radius: var(--r-xs);
  background: var(--c-yellow);
  font-size: 11px;
  font-weight: 700;
}
.p-sd-meta__date {
  font-size: 12px;
  color: var(--c-text-mute);
  letter-spacing: 0.04em;
}
.p-sd-meta__author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.p-sd-meta__author img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}

.p-sd__title {
  margin-top: 22px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.p-sd__eyecatch {
  margin-top: 32px;
}
.p-sd__eyecatch img {
  width: 100%;
  border-radius: var(--r-md);
}

/* --- 目次（TOCプラグイン想定） --- */
.c-toc {
  margin-top: 48px;
  padding: 32px 56px 40px;
  background: var(--c-bg-gray);
  border: 1px solid #a8a8a8;
  border-radius: var(--r-sm);
}
.c-toc__title {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
}
.c-toc__list {
  margin-top: 18px;
  list-style: none;
  counter-reset: toc1;
  font-size: 16px;
  line-height: 2;
}
.c-toc__list li {
  position: relative;
}
.c-toc__list a {
  color: inherit;
}
.c-toc__list a:hover {
  color: var(--c-blue);
}
/* 第1階層 */
.c-toc__list > li {
  counter-increment: toc1;
}
.c-toc__list > li > a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.c-toc__list > li > a::before {
  content: counter(toc1) "　";
  font-weight: 700;
}
/* 第2階層 */
.c-toc__list ol {
  list-style: none;
  counter-reset: toc2;
  padding-left: 1.6em;
}
.c-toc__list ol > li {
  counter-increment: toc2;
}
.c-toc__list ol > li > a::before {
  content: counter(toc1) "." counter(toc2) "　";
}
/* 第3階層 */
.c-toc__list ol ol {
  counter-reset: toc3;
}
.c-toc__list ol ol > li {
  counter-increment: toc3;
}
.c-toc__list ol ol > li > a::before {
  content: counter(toc1) "." counter(toc2) "." counter(toc3) "　";
}

/* 本文：画像2枚並び（WPカラム／ギャラリー想定） */
.c-post__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.c-post__cols figure {
  margin: 0;
}
.c-post__cols img {
  width: 100%;
  aspect-ratio: 560 / 373;
  object-fit: cover;
  border-radius: var(--r-md);
}

.p-sd__back {
  margin-top: 64px;
  text-align: center;
}

/* ==========================================================================
   お客様インタビュー一覧（interview.html） p-iv-*
   ========================================================================== */
/* --- Hero（タイトルは共通部品 .l-pagehead／以下は導入＋2枚写真） --- */
.p-iv-hero {
  position: relative;
  overflow: hidden;
}
.p-iv-hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 640px;
  gap: 48px;
  align-items: start;
  margin-top: 56px;
}
.p-iv-hero__catch {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.p-iv-hero__desc {
  margin-top: 28px;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.02em;
}
.p-iv-hero__desc p + p {
  margin-top: 1.4em;
}
.p-iv-hero__photos {
  display: grid;
  grid-template-columns: 364fr 279fr;
  gap: 24px;
  align-items: start;
}
.p-iv-hero__photo {
  border-radius: var(--r-sm);
  overflow: hidden;
}
.p-iv-hero__photo img {
  width: 100%;
  display: block;
}
.p-iv-hero__photo--l {
  margin-top: 37px;
}

/* --- 絞り込み（フィルタは .p-sm-search__* を流用） --- */
.p-iv-search {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}
.p-iv-search .p-sm-search__box {
  margin-top: 0;
}

/* --- 一覧グリッド（2列） --- */
.p-iv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 60px;
}
.p-iv-card__link {
  display: block;
  color: inherit;
}
.p-iv-card__thumb {
  aspect-ratio: 570 / 400;
  border-radius: var(--r-card);
  overflow: hidden;
}
.p-iv-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.p-iv-card__link:hover .p-iv-card__thumb img {
  transform: scale(1.04);
}
.p-iv-card__company {
  margin-top: 22px;
  font-size: 14px;
  color: var(--c-text);
}
.p-iv-card__title {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
.p-iv-card__link:hover .p-iv-card__title {
  color: var(--c-blue);
}
.p-iv-card__support {
  display: flex;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.7;
}
.p-iv-card__support-label {
  flex-shrink: 0;
  font-weight: 700;
}
.p-iv-list {
  padding-bottom: var(--section-gap);
}

/* --- その他の支援実績 --- */
.p-iv-more {
  padding-bottom: var(--section-gap);
  text-align: center;
}
.p-iv-more__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
}
.p-iv-more__body {
  position: relative;
  margin-top: 40px;
}
.p-iv-more__ill {
  position: absolute;
  left: 40px;
  top: 50%;
  width: 174px;
  transform: translateY(-50%);
  pointer-events: none;
}
.p-iv-more__text {
  font-size: 16px;
  line-height: 1.8;
}
.p-iv-more__btn {
  margin-top: 36px;
}

/* --- 相談CTA（p-ab-closing 流用時の見出し） --- */
.p-iv-contact__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.5;
}

/* ==========================================================================
   お客様インタビュー詳細（interview-detail） p-id-*
   ========================================================================== */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* P1-6 スキップリンク：通常は画面外、フォーカス時のみ左上に出現 */
.l-skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 18px;
  border-radius: var(--r-xs);
  background: var(--c-btn);
  color: var(--c-white);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-150%);
  opacity: 0;
  transition:
    transform var(--dur, 0.2s) ease,
    opacity var(--dur, 0.2s) ease;
}
.l-skip:focus {
  transform: translateY(0);
  opacity: 1;
  outline: 2px solid var(--c-blue);
  outline-offset: 2px;
}

/* P1-7 パンくず：ヒーロー上部の余白ゾーンに絶対配置（既存レイアウト不変） */
:is(section, article):has(> .l-breadcrumb) {
  position: relative;
}
.l-breadcrumb {
  position: absolute;
  top: 104px;
  left: 0;
  right: 0;
  z-index: 6;
}
.l-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 0.6em;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-text-gray, #888);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.l-breadcrumb__list::-webkit-scrollbar {
  display: none;
}
.l-breadcrumb__list li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex-shrink: 0;
}
.l-breadcrumb__list li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
}
.l-breadcrumb__list a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.l-breadcrumb__list a:hover {
  color: var(--c-accent);
  text-decoration: underline;
}
.l-breadcrumb__list [aria-current] span {
  color: var(--c-text);
  font-weight: 700;
}
.p-id {
  padding-top: 140px;
}
.p-id__eyecatch img {
  width: 100%;
  border-radius: var(--r-md);
}

/* --- メタ（会社情報＋ご相談背景） --- */
.p-id-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 560px;
  gap: 48px;
  align-items: start;
  margin-top: 56px;
}
.p-id-meta__cat {
  position: relative;
  display: inline-block;
  font-size: 20px;
  line-height: 1.4;
}
.p-id-meta__cat-un {
  position: absolute;
  left: 0;
  bottom: -14px;
  width: 190px;
  max-width: none;
  pointer-events: none;
}
.p-id-meta__company {
  margin-top: 24px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
}
.p-id-meta__list {
  margin-top: 20px;
}
.p-id-meta__row {
  position: relative;
  display: flex;
  padding-left: 30px;
  font-size: 16px;
  line-height: 1.9;
}
.p-id-meta__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 15px;
  height: 15px;
  border: 1.5px solid #333;
  border-radius: 50%;
}
.p-id-meta__row dt {
  flex-shrink: 0;
  font-weight: 700;
}
.p-id-meta__url {
  margin-top: 8px;
  font-size: 16px;
}
.p-id-meta__url a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  word-break: break-all;
}
.p-id-meta__url a:hover {
  color: var(--c-blue);
}
.p-id-meta__ext {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.p-id-meta__bg {
  position: relative;
  padding: 28px 32px;
  background: var(--c-bg-gray);
  border-radius: var(--r-md);
}
.p-id-meta__bg-ill {
  position: absolute;
  top: -34px;
  left: 24px;
  width: 100px;
  pointer-events: none;
}
.p-id-meta__bg-title {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-line);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
}
.p-id-meta__bg-text {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.9;
}

/* --- サマリー（オレンジ帯：課題／解決方法／効果） --- */
.p-id-summary {
  margin-top: var(--section-gap);
  padding-block: 64px 72px;
  background: var(--c-orange);
}
.p-id-summary__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 573px;
  gap: 56px;
  align-items: start;
}
.p-id-summary__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.5;
}
.p-id-summary__mark {
  display: inline;
  padding: 4px 8px;
  background: #f6d84c;
  color: #000;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.p-id-summary__title-w {
  display: inline-block;
  margin-top: 12px;
  color: #fff;
}
.p-id-summary__lead {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.9;
  color: #fff;
}
.p-id-summary__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin-top: 48px;
}
.p-id-summary__card {
  padding: 28px 30px 32px;
  background: #fff;
  border-radius: var(--r-md);
}
.p-id-summary__h {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}
.p-id-summary__en {
  display: block;
  margin-top: 4px;
  font-family: var(--ff-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.p-id-summary__en--problem {
  color: var(--c-text-mute);
}
.p-id-summary__en--solution {
  color: #3071b9;
}
.p-id-summary__en--effect {
  color: var(--c-req);
}
.p-id-summary__points {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}
.p-id-summary__points li {
  position: relative;
  padding-left: 26px;
}
.p-id-summary__points li + li {
  margin-top: 16px;
}
/* チェックマーク（列ごとに色分け：課題=グレー／解決=青／効果=赤） */
.p-id-summary__points li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.3em;
  width: 7px;
  height: 12px;
  border-right: 2px solid var(--c-text-mute);
  border-bottom: 2px solid var(--c-text-mute);
  transform: rotate(45deg);
}
.p-id-summary__card:nth-child(2) .p-id-summary__points li::before {
  border-color: #3071b9;
}
.p-id-summary__card:nth-child(3) .p-id-summary__points li::before {
  border-color: var(--c-req);
}

/* --- Q&A インタビュー本文 --- */
/* 背景：薄オレンジの全幅帯＋コンテンツは白ステージ（デザイン準拠） */
.p-id-qa {
  padding-block: var(--section-gap);
  background: rgba(240, 131, 30, 0.05);
}
.p-id-qa__stage {
  padding: 64px 40px;
  background: #fff;
  border-radius: var(--r-md);
}
.p-id-qa__block + .p-id-qa__block {
  margin-top: 72px;
}
/* Q見出し：左寄せ、オレンジの上下ライン＋下線の切り欠き */
.p-id-qa__head {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
  padding-block: 14px;
  border-top: 1px solid var(--c-orange);
  border-bottom: 1px solid var(--c-orange);
}
.p-id-qa__head::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 11px;
  height: 11px;
  margin-left: -6px;
  background: #fff;
  border-right: 1px solid var(--c-orange);
  border-bottom: 1px solid var(--c-orange);
  transform: rotate(45deg);
}
.p-id-qa__q {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}
.p-id-qa__qnum {
  margin-right: 20px;
  font-family: var(--ff-en);
  font-size: 24px;
  font-weight: 700;
  color: var(--c-yellow-deep);
}
.p-id-qa__answer {
  margin-top: 32px;
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-orange);
}
.p-id-qa__cards {
  margin-top: 40px;
  display: grid;
  gap: 24px;
}
/* カード：アバターは箱の外（左）、グレー箱は本文のみ */
.p-id-qa__card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: start;
  gap: 40px;
}
.p-id-qa__person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.p-id-qa__person img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}
.p-id-qa__person span {
  font-size: 14px;
  font-weight: 700;
}
.p-id-qa__box {
  padding: 28px 36px;
  background: var(--c-bg-gray);
  border-radius: var(--r-sm);
}
.p-id-qa__text {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
}

/* --- 担当者MEMO（枠は p-ar-writer__box を流用） --- */
.p-id-memo {
  margin-top: var(--section-gap);
}
.p-id-memo__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-yellow-deep);
}
.p-id-memo__title img {
  width: 22px;
}
.p-id-memo__text {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.9;
}

/* --- 関連サービス --- */
.p-id-related {
  margin-top: 56px;
}
.p-id-related__label {
  font-size: 20px;
  font-weight: 700;
}
.p-id-related__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 16px;
}
.p-id-related__tags a {
  font-size: 14px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.p-id-related__tags a:hover {
  color: var(--c-blue);
}

/* --- 企業情報 --- */
.p-id-company {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--c-line);
}
.p-id-company__logo img {
  width: 240px;
}
.p-id-company__thanks {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.8;
}
.p-id-company__name {
  margin-top: 20px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.8;
}
.p-id-company__desc {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.8;
}
.p-id__back {
  margin-top: 56px;
  padding-bottom: var(--section-gap);
  text-align: center;
}

/* ==========================================================================
   404ページ（404.html） p-404
   ========================================================================== */
.p-404 {
  display: grid;
  place-items: center;
  min-height: 70vh;
  padding-block: 220px 120px;
  text-align: center;
}
.p-404__num {
  font-family: var(--ff-en);
  font-size: 130px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--c-yellow);
}
.p-404__title {
  margin-top: 24px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
}
.p-404__text {
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--c-text-gray, #888);
}
.p-404__btn {
  margin-top: 44px;
}

/* P5-8 ページ遷移：対応ブラウザのみ淡いクロスフェード（非対応は無変化・JS不要）。
   reduced-motion 時は無効化。 */
@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* ==========================================================================
   P5-2 スクロールリビール（data-reveal ＝ WP出力にも属性追加だけで適用可）
   .js-reveal は <head> インラインscriptが即付与＝FOUC回避。main.jsがIOで .is-revealed 付与。
   ========================================================================== */
.js-reveal [data-reveal] {
  opacity: 0;
  transition:
    opacity var(--dur-m) var(--ease-out-expo),
    transform var(--dur-m) var(--ease-out-expo),
    clip-path var(--dur-m) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0s);
}
.js-reveal [data-reveal="up"] {
  transform: translateY(42px);
}
.js-reveal [data-reveal="clip"] {
  clip-path: inset(0 0 100% 0);
  transform: translateY(20px);
}
.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   下層ページタイトル共通部品 .l-pagehead（全14ページ）
   ヘッダー逃げ(--header-h)→パンくず→タイトル を「フローで積む」＝魔法の数字を排除。
   黄背景(ill-titlebg)はタイトル基準の絶対配置なので、上に何が来ても一緒に動く。
   各ページ固有の本文（リード/写真/catch 等）は l-pagehead の後ろに別ブロックで置く。
   ========================================================================== */
.l-pagehead {
  position: relative;
  overflow: hidden;
  padding-top: var(--header-h);
}
.l-pagehead .l-breadcrumb {
  position: static;
  margin-top: 16px;
  margin-bottom: 64px;
}
.l-pagehead__inner {
  position: relative;
}
.l-pagehead__bg {
  position: absolute;
  top: -28px;
  left: -40px;
  z-index: 0;
  width: 300px;
  pointer-events: none;
}
.l-pagehead__title {
  position: relative;
  z-index: 1;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.4;
}
.l-pagehead__en {
  position: relative;
  z-index: 1;
  margin-top: 6px;
  font-family: var(--ff-en);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* ==========================================================================
   8. Media Queries（BPごとに集約）
   ========================================================================== */

/* === 小型PC：1024px〜1279px =============================================== */
@media (max-width: 1279px) {
  :root {
    --gutter: 40px;
    /* --section-gap は PC 共通の 120px を継承 */
  }
  .l-container {
    max-width: none;
  }
  .p-hero__visual {
    width: 440px;
    right: -20px;
  }
  .p-sm-hero__body {
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 40px;
  }
  .p-sm-hero__catch {
    font-size: 38px;
  }
  .p-iv-hero__body {
    grid-template-columns: minmax(0, 1fr) 520px;
    gap: 40px;
  }
  .p-iv-hero__catch {
    font-size: 34px;
  }
}

/* === タブレット：768px〜1023px =========================================== */
@media (max-width: 1023px) {
  /* 下層タイトル共通部品：タブレット/SP（黄背景は小さめ・タイトル30px） */
  .l-pagehead .l-breadcrumb {
    margin-bottom: 48px;
  }
  .l-pagehead__title {
    font-size: 30px;
  }
  .l-pagehead__bg {
    width: 200px;
    top: -18px;
    left: -24px;
  }
  :root {
    --fs-hero: 48px;
    --fs-h1: 40px;
    --fs-h2: 34px;
    --fs-h3: 25px;
    --fs-num: 52px;
    /* --section-gap は PC 共通の 120px を継承（SP 767以下で 80px） */
  }

  /* 会社概要ヒーローのキャッチ：中間BPで48→34pxに縮小 */
  .p-ab-hero__catch {
    font-size: 34px;
    margin-top: 64px;
  }

  /* about：2カラム/横並びを縦積みに（媒体が潰れる・画面外に出るのを解消） */
  .p-ab-renewal__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .p-ab-decide__top {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 48px;
  }
  .p-ab-views {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .p-ab-views__item {
    max-width: none;
  }
  .p-ab-views__cross {
    align-self: center;
    margin-top: 0;
  }
  .p-ab-views__cross img {
    width: 40px;
  }

  /* interview-detail：2カラム系を縦積み・サマリーは1〜2列に */
  .p-id-meta {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .p-id-summary__head {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .p-id-summary__cols {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .p-id-company {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* header：インラインナビは格納し、ハンバーガーで開く */
  .l-gnav {
    display: none;
  }
  .l-header__cta {
    margin-left: auto; /* CTA＋ハンバーガーを右寄せ */
  }

  /* interview：ヒーローは縦積み */
  .p-iv-hero__body {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .p-iv-hero__photos {
    max-width: 640px;
  }
  .p-iv-hero__catch {
    font-size: 36px;
  }
  .p-iv-grid {
    gap: 40px;
  }
  /* その他実績：装飾イラストは非表示（中央テキストと干渉するため） */
  .p-iv-more__ill {
    display: none;
  }
  /* seminar：ヒーローは縦積み、一覧は2列 */
  .p-sm-hero__body {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .p-sm-hero__catch {
    font-size: 40px;
  }
  .p-sm-hero__photos {
    max-width: 560px;
  }
  .p-sm-search__label {
    width: 130px;
  }
  .p-sm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* hero */
  .p-hero {
    padding-block: 160px 80px;
  }
  /* hero：ストリームは本文下に回して高さを絞る
     ※relative＝シェイプ/グラデの絶対配置基準を visual 自身に保つ */
  .p-hero__visual {
    position: relative;
    top: auto;
    right: auto;
    width: min(440px, 100%);
    height: 400px;
    margin: 48px auto 0;
  }
  .p-hero__shape {
    top: 28%;
    left: -40px;
    width: 120%;
    height: 170px;
  }

  /* 2カラム → 1カラム化 */
  .p-organize__inner,
  .p-interview__inner,
  .p-seminar__inner,
  .p-ab-teach__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* about teach：本文 → 画像の順で縦積み */
  .p-ab-teach__body {
    order: -1;
  }

  /* about closing ＋ CTA：縦積み */
  .p-ab-closing__wrap {
    max-width: none;
  }
  .p-ab-closing__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* organize：コラージュをメイン写真のみに簡素化 */
  .p-organize__media {
    aspect-ratio: auto;
  }
  .p-organize__img--main {
    position: static;
    width: 100%;
  }
  .p-organize__img--sub1,
  .p-organize__img--sub2,
  .p-organize__art {
    display: none;
  }

  /* concept：左下イラストは非表示 */
  .p-concept__art {
    display: none;
  }
  .p-service__item,
  .p-service__item--reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .p-service__item--reverse .p-service__media {
    order: 0;
  }
  .p-service__media img,
  .p-service__item--reverse .p-service__media img {
    aspect-ratio: 3 / 2;
    border-radius: var(--r-sm) 60px var(--r-sm) var(--r-sm);
  }
  .p-service__name {
    font-size: 26px;
  }
  .p-concept__text {
    font-size: 19px;
  }
  .p-seminar__strong {
    font-size: 24px;
  }

  /* column：ヘッダー縦積み・カード幅調整 */
  .p-column__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .p-column__lead {
    text-align: left;
  }
  .p-column__item {
    flex-basis: 58vw;
    max-width: 450px;
  }

  /* news 縦積み */
  .p-news__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* achievements card */
  .p-achievements__card {
    flex-basis: 86vw;
    max-width: 540px;
  }

  /* recruit：本文＋ボタンを縦積み */
  .p-recruit__inner {
    min-height: 0;
    padding-block: 96px 80px;
  }
  .p-recruit__body-wrap {
    margin-top: 72px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  /* === Works ページ === */
  /* intro：本文 → コラージュ の縦積み */
  .p-wk-intro__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  /* views：3 → 1カラム化を避け、2カラムに */
  .p-wk-views__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* filter：余白調整 */
  .p-wk-filter__panel {
    padding-inline: 32px;
  }
  .p-wk-filter__row {
    grid-template-columns: 150px 1fr;
  }
  /* cases：2カラム維持・スマホモックを縮小 */
  .p-wk-cases__list {
    gap: 56px 32px;
  }
  .p-wk-phone {
    width: 110px;
    right: 16px;
  }
  /* voice：イラストはフロート解除して中央上に */
  .p-wk-voice__illust {
    position: static;
    transform: none;
    width: 150px;
    margin: 0 auto 8px;
  }

  /* === Works 詳細ページ === */
  .p-wd-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .p-wd-hero__media {
    max-width: 570px;
  }
  /* design：縦積み、Scrollヒントは隠す */
  .p-wd-design__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .p-wd-design__scroll {
    display: none;
  }
  .p-wd-design__item--sp {
    margin-left: 0;
  }
  .p-wd-design__frame--sp {
    max-width: 320px;
  }
  /* カードは2カラム */
  .p-wd-issues__list,
  .p-wd-support__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  /* download：2カラムを縦積みに */
  .p-dl-main {
    grid-template-columns: 1fr;
    row-gap: 56px;
  }
  .p-dl-main__divider {
    display: none;
  }
  .p-dl-author__photo {
    width: 180px;
    height: 180px;
  }

  /* company：ヒーロー・VMV を縮小 */
  .p-co-hero__title {
    font-size: 36px;
  }
  .p-co-hero__panel {
    max-width: none;
  }
  .p-co-vmv__list {
    gap: 40px 40px;
  }
  .p-co-vmv__label {
    font-size: 52px;
  }
  .p-co-info__row {
    grid-template-columns: 180px 1fr;
  }

  /* price：表が入りきらない幅では横スクロール案内を表示 */
  .p-pr-scrollhint {
    display: block;
  }
  /* 下層14ページのタイトルは共通部品 .l-pagehead で縮小（別途定義）。
     company だけは写真ヒーロー独自なのでここで縮小 */
  .p-co-hero__title {
    font-size: 30px;
  }
  /* Web制作：カテゴリ見出しとリードを縦積み */
  .p-pr-cat {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .p-pr-cat__title {
    justify-self: start;
    min-width: 260px;
  }

  /* faq：Q&Aは1カラム、フィルタ2カラム、CTAは縦積み */
  .c-faq {
    grid-template-columns: 1fr;
  }
  .p-faq-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .p-faq-cta__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* seo：ヒーロー写真は通常配置（縦積み）に（タブレット）。
     padding-top は他下層と揃えて 200px（旧150pxはタイトルが黄背景から浮いていた） */
  .p-seo-hero__main {
    padding-bottom: 0;
  }
  .p-seo-hero__body {
    max-width: none;
  }
  .p-seo-hero__media {
    position: static;
    width: auto;
    max-width: none;
    height: auto;
    margin-top: 40px;
  }
  .p-seo-hero__media img {
    height: auto;
    max-height: 520px;
    border-radius: var(--r-md);
  }
  /* service：ヒーローと各2カラムを縦積み（タブレット） */
  .p-sv-hero__grid,
  .p-sv-intro__inner,
  .p-sv-results__inner,
  .p-sv-cta__inner,
  .p-sv-worry__grid,
  .p-sv-cost__cards {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .p-sv-hero__catch {
    font-size: 38px;
  }
  .p-sv-guide__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* コラム：サイドバーを上に、記事は縦積み想定でも2列維持（タブレット） */
  .p-bl__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .p-bl-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 40px;
  }
  .p-bl-side__block + .p-bl-side__block {
    margin-top: 0;
  }
  /* 記事詳細：本文を上、サイドバーを下に */
  .p-ar-page .p-ar {
    order: -1;
  }
  .p-ar-page {
    padding-top: 120px;
  }
  /* service フロー：ジグザグを解除して縦積み・矢印は非表示（タブレット） */
  .p-sv-flow__row,
  .p-sv-flow__row--lower {
    flex-direction: column;
    gap: 28px;
    padding-left: 0;
  }
  .p-sv-flow__flow {
    gap: 28px;
  }
  .p-sv-flow__arrow {
    display: none;
  }
  .p-sv-flow__desc {
    width: 100%;
  }
  .p-seo-points__row {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .p-seo-point-card__illust img {
    max-width: 260px;
  }
  .p-seo-flow__steps {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .p-seo-flow__step + .p-seo-flow__step::before {
    left: 50%;
    top: -40px;
    transform: translateX(-50%) rotate(90deg);
  }
  .p-seo-results__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .p-seo-team__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* marketing：2カラム系を縦積み（タブレット） */
  .p-mk-sell__inner,
  .p-mk-case__grid,
  .p-mk-case__ans,
  .p-mk-output__slide {
    /* minmax(0,1fr) にして子（タブ／画像）の min-content が親を押し広げるのを防ぐ。
       1fr だと初期表示で選択中タブや実寸画像が列を膨張させ横溢れ＝崩れる（L-21/L-22 同型） */
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  /* 売っている会社：斜め背景を解除し全幅の矩形に */
  .p-mk-sell__bg {
    clip-path: none;
    left: 0;
    width: 100%;
  }
  /* Web系グリッド：SP未対応で列が狭すぎたものをスマホ用に是正（L-23同型の見落とし対策） */
  /* できること：3列→1列（説明文の可読性確保） */
  .p-web-can__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 28px;
  }
  .p-web-can__item {
    padding: 20px 22px;
  }
  /* できること見出し：本文＋700px画像の2カラムが溢れる → 1カラム化（画像は本文下・上限480px中央） */
  .p-web-can__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .p-web-can__img {
    max-width: 480px;
    margin-inline: auto;
  }
  /* 運用保守：本文＋480px画像の2カラムが溢れる → 1カラム化（画像は本文下・上限480px中央） */
  .p-web-maintain__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .p-web-maintain__img {
    max-width: 480px;
    margin-inline: auto;
  }
  /* 導入ポイント：3列→1列 */
  .p-web-intro__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  /* こんなお悩み（need）：3列→1列。内部はアイコン＋テキストの横並びを維持しつつ
     アイコンが実寸(最大187px)でテキスト列を潰さないよう幅を制限 */
  .p-web-need__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .p-web-need__icon {
    width: 64px;
  }
  /* 制作の流れ：4列→2列（番号で順序は明快） */
  .p-web-flow__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 16px;
    margin-top: 40px;
  }
  .p-mk-case__tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
  }
  .p-mk-case__tab {
    padding: 18px 16px;
    text-align: center;
    font-size: 18px;
  }
  /* activeタブの「右パネルへ+36px重ねる」PC用オーバーハングはSP横並びでは
     隣タブに被るため解除 */
  .p-mk-case__tab.is-active {
    width: 100%;
    justify-self: stretch;
  }
  .p-mk-case__ans {
    justify-items: center;
    text-align: center;
  }
  .p-mk-case__photo {
    max-width: 160px;
  }
  .p-mk-output::before {
    width: 100%;
  }
}

/* === SP：〜767px ========================================================= */
@media (max-width: 767px) {
  :root {
    --gutter: 24px;
    --fs-hero: 32px;
    --fs-h1: 28px;
    --fs-h2: 28px;
    --fs-h3: 22px;
    --fs-lead: 17px;
    --fs-num: 44px;
    --section-gap: 56px;
    --ribbon: 60px;
  }
  body {
    line-height: 1.8;
  }
  .l-section__head {
    margin-bottom: 36px;
  }
  /* 会社概要ヒーローのキャッチ：48px固定でSPは過大（長文）→縮小＋上余白も圧縮。
     「を」等の行頭孤立は HTML側の .u-nb グループで防止（テキスト無改変） */
  .p-ab-hero__catch {
    margin-top: 40px;
    font-size: 25px;
    line-height: 1.6;
  }
  /* 導入リード：SPは32px→24px・行間もタイトに */
  .p-ab-intro__lead {
    font-size: 24px;
    line-height: 1.5;
  }
  /* 非見出しで32px固定だった要素（SP未対応）→SPは24pxに縮小 */
  .p-ab-decide__lead,
  .p-ab-criteria__sub {
    font-size: 24px;
    line-height: 1.5;
  }
  /* メンバーの役割：SPは12px・上マージンなし */
  .p-ab-member__role {
    margin-top: 0;
    font-size: 12px;
  }
  /* メンバー一覧：SPは2列（既存はSP未対応で4列のまま溢れていた＝L-21同型を是正） */
  .p-ab-members__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 24px;
  }
  /* 404（SP） */
  .p-404 {
    padding-block: 150px 90px;
  }
  .p-404__num {
    font-size: 88px;
  }
  .p-404__title {
    font-size: 22px;
  }
  /* P2-2: 40px化したセクション見出しはSPで28pxに（他セクション見出しSPと整合） */
  .p-sv-worry__title,
  .p-sv-service__title,
  .p-sv-results__title,
  .p-sv-flow__title,
  .p-sv-cost__title,
  .p-web-need__title,
  .p-web-maintain__title,
  .p-web-flow__title,
  .p-web-can__title,
  .p-mk-sell__title,
  .p-mk-points__title,
  .p-mk-output__title,
  .p-mk-flow__title,
  .p-mk-cross__title,
  .p-seo-points__title {
    font-size: 28px;
  }
  /* web：3つの考え方 → イラストを中央に（テキストは左のまま） */
  .p-web-intro__icon {
    display: block;
    margin-inline: auto;
  }
  /* web：目的に合わせて（need）→ SPは2カラム。カードは縦積み（アイコン上・中央）に再構成し、
     PC用のアイコンはみ出し（負マージン・実寸幅）を打ち消す */
  .p-web-need__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .p-web-need__card {
    grid-template-columns: minmax(0, 1fr);
    padding: 10px;
    gap: 6px;
    text-align: center;
    align-content: start;
    overflow: hidden;
  }
  /* nth-child のはみ出し指定（幅/負マージン/align-self）を全カードで打ち消す＝同一詳細度・後勝ち */
  .p-web-need__grid .p-web-need__card .p-web-need__icon {
    width: 52px;
    margin: 0 auto;
    align-self: center;
  }
  .p-web-need__ttl {
    grid-column: 1;
    grid-row: auto;
    font-size: 15px;
  }
  .p-web-need__desc {
    grid-column: 1;
    grid-row: auto;
    font-size: 13px;
  }
  /* クロス画像：SPは縦長版に差し替え済。大きくなりすぎないよう上限＋比率(CLS防止) */
  .p-mk-cross__media img {
    max-width: 300px;
    margin-inline: auto;
    aspect-ratio: 342 / 306;
  }
  /* ファーストビューを詰めて写真帯を引き上げ、寂しさを解消 */
  .p-hero {
    padding-block: 112px 72px;
  }
  .p-hero__body {
    gap: 28px;
  }
  /* --- ヒーロー：SP専用の全幅・横2段オートスクロール写真ストリーム --- */
  /* 上段/下段が逆方向に流れる密度のある帯にして、ファーストビューの寂しさを解消 */
  .p-hero__visual {
    width: auto;
    height: auto;
    /* ガター分を相殺して画面端まで全幅ブリード（overflow-x:hidden で溢れ無し） */
    margin: 20px calc(-1 * var(--gutter)) 0;
  }
  /* 左右端を背景色にフェード（縦フェード→横フェードへ） */
  .p-hero__visual::before,
  .p-hero__visual::after {
    top: 0;
    bottom: 0;
    height: auto;
    width: 44px;
    z-index: 3;
  }
  .p-hero__visual::before {
    right: auto;
    background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));
  }
  .p-hero__visual::after {
    left: auto;
    top: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
  }
  /* 黄色シェイプは2段の背後に斜めに敷いてブランド色をのぞかせる */
  .p-hero__shape {
    top: 50%;
    left: -12%;
    width: 124%;
    height: 74%;
    border-radius: var(--r-md);
    transform: translateY(-50%) rotate(-5deg) skewX(-10deg);
    z-index: 0;
  }
  /* 上下2段を縦に並べ、それぞれ横流し */
  .p-hero__stream {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: auto;
    z-index: 1;
  }
  .p-hero__col {
    height: 116px;
  }
  .p-hero__col--down {
    display: block;
  }
  .p-hero__col .p-hero__track {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: max-content;
    animation: hero-drift-x 42s linear infinite;
  }
  /* 下段は逆方向・速度違いで自然な流れに（shorthand が direction をリセットするため明示） */
  .p-hero__col--down .p-hero__track {
    animation-duration: 54s;
    animation-direction: reverse;
  }
  .p-hero__set {
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 0 12px 0 0;
    height: 100%;
    flex: 0 0 auto;
  }
  .p-hero__photo {
    height: 100%;
    flex: 0 0 auto;
  }
  .p-hero__photo img {
    width: auto;
    height: 100%;
  }
  /* インタビュー詳細（SP）※パンくず分の上余白を確保 */
  .p-id {
    padding-top: 132px;
  }
  .p-id-meta__company {
    font-size: 22px;
  }
  .p-id-summary {
    padding-block: 48px 56px;
  }
  .p-id-summary__title {
    font-size: 24px;
  }
  .p-id-qa__stage {
    padding: 40px 20px;
  }
  .p-id-qa__q {
    font-size: 20px;
  }
  .p-id-qa__answer {
    font-size: 22px;
  }
  .p-id-qa__card {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 16px;
  }
  .p-id-qa__box {
    padding: 22px;
  }
  .p-id-company__thanks,
  .p-id-company__name {
    font-size: 20px;
  }
  /* インタビュー一覧（SP）：タイトルは共通部品 .l-pagehead。本文のみ調整 */
  .p-iv-hero__catch {
    font-size: 26px;
  }
  .p-iv-hero__photos {
    max-width: none;
    gap: 14px;
  }
  .p-iv-search {
    padding-block: 64px;
  }
  .p-iv-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .p-iv-more__title {
    font-size: 26px;
  }
  .p-iv-contact__title {
    font-size: 24px;
  }
  /* セミナー一覧（SP）：タイトルは共通部品 .l-pagehead。本文のみ調整 */
  .p-sm-hero__catch {
    font-size: 30px;
  }
  .p-sm-hero__marker {
    font-size: 22px;
  }
  .p-sm-hero__marker--sm {
    font-size: 17px;
  }
  .p-sm-hero__photos {
    max-width: none;
    gap: 12px;
  }
  .p-sm-search__ttl {
    font-size: 28px;
  }
  .p-sm-search__box {
    padding: 4px 20px;
  }
  .p-sm-search__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 0;
  }
  .p-sm-search__label {
    width: auto;
  }
  .p-sm-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .p-sm-card__title {
    font-size: 20px;
  }
  /* セミナー詳細（SP）※パンくず分の上余白を確保 */
  .p-sd {
    padding-top: 132px;
  }
  .p-sd__title {
    font-size: 26px;
  }
  .c-toc {
    padding: 24px 22px 28px;
  }
  .c-toc__list {
    font-size: 15px;
  }
  .c-toc__list ol {
    padding-left: 1.1em;
  }
  .c-post__cols {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* 記事詳細（SP）※パンくず分の上余白を確保 */
  .p-ar-page {
    padding-top: 132px;
  }
  .p-ar__title {
    font-size: 22px;
  }
  .c-post h2 {
    font-size: 22px;
  }
  .c-post h3 {
    font-size: 18px;
  }
  .c-post__interview {
    grid-template-columns: 1fr;
    gap: 16px;
    justify-items: center;
  }
  .c-post__interview-text {
    padding: 20px 22px;
  }
  .p-ar-writer__inner {
    grid-template-columns: 1fr;
    gap: 24px;
    justify-items: center;
  }
  .p-ar-writer__box {
    padding: 24px 22px;
  }
  .p-ar-writer__role {
    font-size: 17px;
  }
  .p-ar-nav {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .p-ar-nav__item {
    padding: 0;
  }
  .p-ar-nav__item--prev {
    border-right: none;
    border-bottom: 1px solid var(--c-line);
    padding-bottom: 24px;
  }
  .p-ar-nav__item--next {
    text-align: left;
  }
  .p-ar-nav__item--next .p-ar-nav__label {
    padding-right: 0;
    padding-left: 18px;
  }
  .p-ar-nav__item--next .p-ar-nav__label::before {
    right: auto;
    left: 0;
    border-width: 5px 8px 5px 0;
    border-color: transparent var(--c-btn) transparent transparent;
  }
  .c-btn {
    width: 100%;
  }

  /* header：SPはロゴ＋ハンバーガーのみ（CTAはドロワー内） */
  .l-header__cta {
    display: none;
  }
  .l-header__hamburger {
    margin-left: auto; /* ハンバーガーを右端へ */
  }
  .l-header__logo {
    width: 170px;
  }

  .p-results {
    /* 下は0：直後の p-organize が上に section-gap を持つため、二重余白を回避（隣接=1間隔） */
    padding-block: 0px 0;
  }

  /* results 4 → 2列 */
  .p-results__cards {
    /* minmax(0,1fr)：カードのmin-content(数値+単位)がコンテナを突き破るのを防ぐ */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .p-results__card {
    /* aspect-ratio 固定だとラベル2行時に高さが足りず上余白が消える→内容基準の高さに */
    aspect-ratio: auto;
    min-height: 104px;
    gap: 6px;
    padding: 18px 18px;
  }
  .p-results__label {
    font-size: 14px;
  }
  .p-results__unit {
    font-size: 16px;
  }
  .p-results__clients-head {
    font-size: 20px;
  }
  .p-results__clients {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  /* 取引先ロゴマーキー：小さすぎたので拡大＋画面端まで全幅ブリード（端から端へ流れる） */
  .p-results__marquee {
    margin-inline: calc(-1 * var(--gutter));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .p-results__marquee-track img {
    height: 60px;
    margin-right: 48px;
  }

  /* organize */
  .p-organize__text {
    margin-top: 28px;
  }

  /* concept */
  .p-concept {
    padding-block: calc(72px + var(--ribbon)) 72px;
  }
  .p-concept__text {
    font-size: 16px;
  }

  /* service */
  .p-service__metric-num {
    font-size: 44px;
  }
  .p-service__list {
    gap: 64px;
  }
  .p-service__name {
    font-size: 24px;
  }
  .p-service__maintenance {
    padding: 32px 24px;
  }

  /* achievements：コラムと揃えて次カードの覗きを明確に（右端に次実績を見せる）。
     gap 60px 固定だと2件目が画面外に押し出されるためSPで縮小 */
  .p-achievements__track {
    gap: 16px;
  }
  .p-achievements__card {
    flex-basis: 82vw;
  }
  .p-achievements__foot {
    flex-direction: column;
    gap: 28px;
  }
  .p-achievements__nav {
    position: static;
    transform: none;
    justify-content: center;
  }

  /* interview 画像横並び維持・縮小 */
  .p-interview__media {
    gap: 16px;
  }
  .p-interview__deco {
    width: 260px;
    height: 260px;
    border-width: 42px;
    left: -110px;
    top: 320px;
  }
  .p-interview__foot {
    margin-top: 48px;
  }

  /* column：カード幅・コントロール縦積み */
  .p-column::after {
    width: 220px;
    height: 148px;
  }
  .p-column__item {
    flex-basis: 82vw;
  }
  .p-column__controls {
    flex-direction: column;
    gap: 24px;
  }
  .p-column__dots,
  .p-column__nav {
    position: static;
  }

  /* seminar */
  .p-seminar__roll-item {
    flex-basis: 240px;
  }
  .p-seminar__archive {
    padding: 24px;
  }

  /* footer */
  .l-footer::before {
    height: 280px;
  }
  .l-footer__cards {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 64px;
  }
  .l-footer__card {
    padding: 32px 28px;
  }
  .l-footer__card-en {
    font-size: 30px;
  }
  .l-footer__main {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  .l-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .l-footer__links {
    flex-wrap: wrap;
    gap: 16px 24px;
  }

  /* recruit */
  .p-recruit__inner {
    padding-block: 64px;
  }
  .p-recruit__title {
    font-size: 44px;
  }
  .p-recruit__catch {
    font-size: 22px;
  }
  .p-recruit__text {
    font-size: 15px;
  }
  .p-recruit__body-wrap {
    margin-top: 48px;
  }
  .p-recruit__btn {
    width: 176px;
    height: 176px;
    font-size: 18px;
  }

  /* About 黄帯（基準）。SPは装飾アイコン(art)がテキストに被らないよう下余白を確保 */
  .p-ab-concept {
    padding-block: 140px 190px;
    border-radius: 0 0 60px 60px;
  }
  .p-ab-concept::before {
    height: 60px;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
  }
  .p-ab-concept__card {
    margin: 36px 0;
    padding: 24px;
  }
  .p-ab-concept__list li {
    font-size: 16px;
    padding-left: 26px;
  }
  .p-ab-concept__art {
    width: 110px;
    left: 16px;
    bottom: 24px;
  }

  /* === Works ページ（タイトルは about と共通＝上書きなし） === */
  .p-wk-hero__lead {
    font-size: 20px;
    line-height: 1.7;
  }
  .p-wk-intro {
    padding-block: 40px var(--section-gap);
  }
  .p-wk-intro__title {
    font-size: 26px;
  }
  .p-wk-intro__visual {
    gap: 8px;
  }
  .p-wk-intro__img {
    width: 50%;
  }
  /* views：1カラム */
  .p-wk-views__head {
    gap: 14px;
    margin-bottom: 32px;
  }
  .p-wk-views__icon {
    width: 60px;
  }
  .p-wk-views__title {
    font-size: 26px;
  }
  .p-wk-views__list {
    grid-template-columns: 1fr;
  }
  .p-wk-view {
    padding: 28px 24px;
  }
  .p-wk-view__title {
    font-size: 22px;
  }
  /* filter：ラベルを上、タグを下に縦積み */
  .p-wk-filter__panel {
    padding: 8px 20px;
  }
  .p-wk-filter__row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-block: 24px;
  }
  .p-wk-filter__label {
    padding-top: 0;
  }
  .p-wk-filter__label::before {
    top: 6px;
  }
  .p-wk-tag {
    padding: 8px 16px;
    font-size: 13px;
  }
  /* cases：1カラム */
  .p-wk-cases__list {
    grid-template-columns: 1fr;
    gap: 64px;
  }
  .p-wk-phone {
    width: 100px;
    right: 14px;
    bottom: -16px;
  }
  .p-wk-case__title {
    font-size: 17px;
  }
  .p-wk-pager {
    margin-top: 48px;
  }
  /* seminar / voice */
  .p-wk-seminar {
    padding-block: 72px;
  }
  .p-wk-seminar__title {
    font-size: 28px;
  }
  .p-wk-voice__title {
    font-size: 26px;
  }
  .p-wk-voice__illust {
    position: static;
    transform: none;
    width: 96px;
    margin-bottom: 4px;
  }

  /* === Works 詳細ページ === */
  .p-wd-hero {
    padding-block: 120px var(--section-gap);
  }
  .p-wd-hero__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .p-wd-hero__title {
    font-size: 24px;
  }
  .p-wd-design__frame {
    height: 380px;
  }
  .p-wd-background__panel {
    padding: 28px 24px;
  }
  .p-wd-heading {
    margin-bottom: 28px;
    font-size: 24px;
  }
  /* issues：2カラム / support：1カラム */
  .p-wd-issues__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .p-wd-support__list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .p-wd-scard {
    padding: 28px 24px;
  }
  /* author：縦積み、写真上・フキダシ下、三角は上向きに */
  .p-wd-author__inner {
    grid-template-columns: 1fr;
    gap: 28px;
    justify-items: center;
    text-align: center;
  }
  .p-wd-author__bubble {
    padding: 28px 24px;
    text-align: left;
  }
  .p-wd-author__bubble::before {
    right: auto;
    left: 50%;
    top: auto;
    bottom: 100%;
    transform: translateX(-50%);
    border-width: 0 18px 26px 18px;
    border-color: transparent transparent var(--c-yellow) transparent;
  }
  .p-wd-author__related {
    width: 100%;
    text-align: left;
  }

  /* contact：1カラムへ */
  .p-ct-row {
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: stretch;
  }
  .p-ct-row__label {
    width: 100%;
  }
  .c-req {
    margin-left: auto;
  }
  .p-ct-row--textarea .p-ct-row__label {
    padding-top: 0;
  }
  .p-ct-input--zip,
  .p-ct-select {
    width: 60%;
  }
  .p-ct-privacy__scroll {
    padding: 20px 18px;
  }
  .p-ct-actions {
    flex-direction: column-reverse;
    align-items: center;
    gap: 16px;
  }
  .p-ct-btn {
    width: 100%;
    max-width: 320px;
  }

  /* download：見出し・電話欄をSP最適化 */
  .p-dl-intro__lead {
    font-size: 24px;
  }
  .p-dl-intro__q {
    font-size: 18px;
  }
  .p-dl-input--tel {
    max-width: none;
  }
  .p-dl-duo {
    gap: 12px;
  }
  .p-dl-duo__field {
    gap: 8px;
  }

  /* company */
  .p-co-hero__inner {
    padding-block: 48px 56px;
  }
  .p-co-hero__title {
    font-size: 28px;
  }
  .p-co-hero__panel {
    margin-top: 32px;
    padding: 28px 22px;
  }
  /* VMV：英字ラベルの上に説明を縦積み */
  .p-co-vmv__list {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: none;
  }
  .p-co-vmv__item {
    display: block;
  }
  .p-co-vmv__label {
    font-size: 44px;
  }
  .p-co-vmv__desc {
    margin-top: 10px;
    font-size: 16px;
  }
  /* オフィス写真：縦積み */
  .p-co-gallery__inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* 会社概要：ラベルを上に縦積み */
  .p-co-info__row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding-block: 16px;
  }

  /* price */
  .p-pr-h2 {
    font-size: 24px;
  }
  /* 比較表：横スクロール（項目列は sticky のまま）。列幅を確保 */
  /* 料金表：右端まで全幅ブリードして金額の見える幅を最大化（左のガター分は残す） */
  .p-pr-tablewrap {
    margin-right: calc(-1 * var(--gutter));
  }
  .p-pr-table {
    min-width: 600px;
  }
  .p-pr-table th,
  .p-pr-table td {
    padding: 12px 12px;
    font-size: 14px;
  }
  /* 左固定列が広すぎると金額が隠れるため縮小 */
  .p-pr-table th[scope="row"],
  .p-pr-corner {
    min-width: 84px;
  }
  .p-pr-table .p-pr-price {
    font-size: 22px;
  }
  /* Web制作：項目/説明/価格を縦積み */
  .p-pr-make__row {
    grid-template-columns: 1fr;
  }
  .p-pr-make__row > * {
    padding: 14px 18px;
  }
  .p-pr-make__label {
    border-bottom: 1px solid var(--c-line);
  }
  .p-pr-make__price {
    text-align: left;
    color: var(--c-accent);
  }
  /* futureshop 注記：縦積み */
  .p-pr-fsbox {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 22px;
  }
  .p-pr-fsbox__logo {
    width: 200px;
  }
  /* ロゴ：縦積み中央（各社の比率を保ったまま画面幅に収める） */
  .p-pr-logos {
    flex-direction: column;
    justify-content: center;
    gap: 26px;
    padding: 28px 20px;
  }
  .p-pr-logos__img--shopify {
    width: 150px;
  }
  .p-pr-logos__img--makeshop {
    width: 210px;
  }
  .p-pr-logos__img--rakuten {
    width: 140px;
  }
  .p-pr-logos__img--yahoo {
    width: 180px;
  }

  /* faq */
  .p-faq-intro__lead {
    font-size: 24px;
  }
  .p-faq-filter {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .p-faq-cat__title {
    font-size: 22px;
  }
  .c-faq__item {
    padding: 24px 20px;
  }
  .c-faq__q,
  .c-faq__a {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
  }
  .c-faq__badge {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  .c-faq__q-text,
  .c-faq__a-text {
    font-size: 15px;
  }
  .p-faq-cta__title {
    font-size: 22px;
  }
  .p-faq-cta__box {
    padding: 28px 24px 32px;
  }
  .p-faq-cta__box-en {
    font-size: 30px;
  }
  .p-faq-cta__box-arrow {
    width: 34px;
    right: 24px;
    bottom: 24px;
  }

  /* seo（SP） */
  .p-seo-hero__catch {
    font-size: 24px;
  }
  .p-seo-strip__track img {
    width: 300px;
    height: 200px;
  }
  .p-seo-points__title {
    font-size: 22px;
  }
  .p-seo-points__sub {
    font-size: 20px;
  }
  .p-seo-flow__title,
  .p-seo-interview__title,
  .p-seo-results__title,
  .p-seo-seminar__title,
  .p-seo-faq__title,
  .p-seo-team__heading {
    font-size: 22px;
  }
  .p-seo-team__title {
    font-size: 22px;
  }
  .p-seo-interview__grid,
  .p-seo-results__grid,
  .p-seo-team__members {
    grid-template-columns: 1fr;
  }
  /* チームメンバー：SPは縦積みだと余白が目立つため「写真左＋テキスト右」の横並びに
     （seo / marketing / web の課ページ共通） */
  .p-seo-team__members {
    gap: 20px;
  }
  .p-seo-member {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 2px 16px;
    /* 右のテキスト（名前/資格/注記）は上詰め＝名前を写真上端に揃える。
       写真は align-self:center のまま（短文メンバーでは縦センター） */
    align-items: start;
    align-content: start;
  }
  .p-seo-member__photo {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
  }
  .p-seo-member__photo img {
    max-width: 84px;
  }
  .p-seo-member__name,
  .p-seo-member__cert,
  .p-seo-member__note {
    grid-column: 2;
  }
  .p-seo-member__name {
    margin-top: 0;
  }
  .p-seo-member__photo img {
    max-width: 180px;
  }
  .p-seo-sem {
    flex-basis: 260px;
  }
  .p-seo-result {
    flex-basis: 280px;
    min-height: 0;
    padding: 20px;
  }
  .p-seo-results__deco {
    display: none;
  }

  /* marketing（SP） */
  .p-mk-sell__title,
  .p-mk-points__title,
  .p-mk-feature__title,
  .p-mk-roadmap__title,
  .p-mk-cross__title,
  .p-mk-output__title,
  .p-mk-flow__title {
    font-size: 22px;
  }
  .p-mk-feature__sub {
    font-size: 18px;
  }
  .p-mk-lead2 p {
    font-size: 20px;
  }
  .p-mk-points__grid {
    grid-template-columns: 1fr;
  }
  .p-mk-point__ttl {
    font-size: 19px;
  }
  .p-mk-result__did ul {
    grid-template-columns: 1fr;
  }
  /* 流れ：プラン名を上に、ステップを縦積み。矢印は下向き */
  .p-mk-flow__row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .p-mk-flow__steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .p-mk-flow__label {
    align-self: start;
  }
  .p-mk-flow__box {
    width: 100%;
  }
  .p-mk-flow__arrow {
    align-self: center;
    border-top: 16px solid var(--c-yellow);
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 0;
  }
}