@layer reset, base, tokens, layout, components, utilities;

/* ============================================================
   tokens — デザイントークン（ブルー3色）
   ============================================================ */
@layer tokens {
  :root {
    /* base */
    --c-white: #FFFFFF;
    --c-offwhite: #F8F9FA;

    /* text / ink */
    --c-ink: #202124;
    --c-ink-sub: #5F6368;
    --c-ink-mute: #80868B;
    --c-ink-faint: #BDC1C6;

    /* accent (blue) */
    --c-blue: #1A73E8;
    --c-blue-sub: #4285F4;
    --c-blue-pale: #A8C7FA;
    --c-blue-grad-from: #1A73E8;
    --c-blue-grad-to: #1557B0;
    --c-blue-tint: #E8F0FE;

    /* line */
    --c-line: #E8EAED;
    --c-line-strong: #DADCE0;

    /* state */
    --c-error: #D93025;

    /* typography */
    --font-ja: 'Noto Sans JP', system-ui, -apple-system, sans-serif;
    --font-en: 'Space Grotesk', var(--font-ja);

    /* layout */
    --container-max: 1280px;
    --container-pad: 48px;
    --header-h: 80px;

    /* radius / shadow / motion */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --shadow-sm: 0 1px 2px rgba(32,33,36,.06), 0 4px 14px rgba(32,33,36,.05);
    --shadow-md: 0 8px 30px rgba(26,115,232,.10);
    --ease: cubic-bezier(.2,.6,.2,1);
  }

  @media (max-width: 900px) {
    :root { --container-pad: 22px; --header-h: 64px; }
  }
}

/* ============================================================
   reset
   ============================================================ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
  body { min-height: 100vh; line-height: 1.7; -webkit-font-smoothing: antialiased; }
  img, picture, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: none; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; padding: 0; }
  h1, h2, h3, h4 { line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
}

/* ============================================================
   base
   ============================================================ */
@layer base {
  body {
    font-family: var(--font-ja);
    color: var(--c-ink);
    background: var(--c-white);
    font-size: 16px;
  }
  a { transition: color .2s var(--ease), opacity .2s var(--ease); }
  a:hover { color: var(--c-blue); }
  :focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
}

/* ============================================================
   layout
   ============================================================ */
@layer layout {
  .l-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }
  .l-section { padding-block: clamp(56px, 8vw, 112px); }
  .l-main { display: block; }

  /* header */
  .l-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c-line);
  }
  .l-header__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    height: var(--header-h);
    display: flex; align-items: center; gap: 40px;
  }
  .l-header__logo { font-family: var(--font-en); font-weight: 700; font-size: 26px; letter-spacing: -.02em; }
  .l-header__logo a { display: inline-flex; align-items: center; }
  .l-header__logo-img { display: block; width: auto; height: 50px; }
  .l-header__logo a:hover { color: var(--c-blue); }
  .l-header__nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
  .l-header__list { display: flex; align-items: center; gap: 24px; }
  .l-header__link { font-size: 14px; font-weight: 500; color: var(--c-ink-sub); }
  .l-header__link:hover { color: var(--c-blue); }
  .l-header__cta { margin-left: 6px; }
  .l-header__toggle { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; margin-left: auto; }
  .l-header__toggle-bar { width: 24px; height: 2px; background: var(--c-ink); transition: transform .25s var(--ease), opacity .25s var(--ease); }

  @media (max-width: 900px) {
    .l-header__toggle { display: flex; }
    .l-header__nav {
      position: fixed; inset: var(--header-h) 0 auto 0;
      flex-direction: column; align-items: stretch; gap: 0;
      background: var(--c-white); border-bottom: 1px solid var(--c-line);
      padding: 12px var(--container-pad) 24px;
      transform: translateY(-12px); opacity: 0; pointer-events: none;
      transition: transform .25s var(--ease), opacity .25s var(--ease);
      max-height: calc(100vh - var(--header-h)); overflow: auto;
    }
    .l-header.is-nav-open .l-header__nav { transform: none; opacity: 1; pointer-events: auto; }
    .l-header__list { flex-direction: column; align-items: stretch; gap: 0; }
    .l-header__item { border-bottom: 1px solid var(--c-line); }
    .l-header__link { display: block; padding: 14px 4px; font-size: 15px; }
    .l-header__cta { margin: 16px 0 0; text-align: center; }
  }

  /* footer */
  .l-footer { background: var(--c-offwhite); border-top: 1px solid var(--c-line); margin-top: 80px; }
  .l-footer__inner {
    max-width: var(--container-max); margin-inline: auto; padding: 72px var(--container-pad) 40px;
    display: grid; grid-template-columns: 1.1fr 1.4fr; gap: 56px;
  }
  .l-footer__logo { font-family: var(--font-en); font-weight: 700; font-size: 30px; letter-spacing: -.02em; margin-bottom: 18px; }
  .l-footer__logo a { display: inline-flex; align-items: center; }
  .l-footer__logo-img { display: block; width: auto; height: 75px; }
  .l-footer__desc { color: var(--c-ink-sub); font-size: 14px; margin-bottom: 24px; }
  .l-footer__offices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .l-footer__office-name { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
  .l-footer__office-en { font-family: var(--font-en); font-weight: 600; font-size: 13px; letter-spacing: .12em; }
  .l-footer__office-ja { font-size: 13px; font-weight: 700; }
  .l-footer__office-addr { font-size: 12px; line-height: 1.8; color: var(--c-ink-sub); }
  .l-footer__nav { grid-column: 1 / -1; border-top: 1px solid var(--c-line); padding-top: 28px; }
  .l-footer__list { display: flex; flex-wrap: wrap; gap: 12px 28px; }
  .l-footer__link { font-size: 13px; color: var(--c-ink-sub); }
  .l-footer__bottom {
    max-width: var(--container-max); margin-inline: auto; padding: 18px var(--container-pad) 40px;
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    border-top: 1px solid var(--c-line);
  }
  .l-footer__tel a { font-family: var(--font-en); font-weight: 700; font-size: 20px; }
  .l-footer__hours { font-size: 12px; color: var(--c-ink-mute); margin-left: 12px; }
  .l-footer__copy { font-family: var(--font-en); font-size: 12px; color: var(--c-ink-mute); }

  @media (max-width: 900px) {
    .l-footer__inner { grid-template-columns: 1fr; gap: 36px; }
    .l-footer__offices { grid-template-columns: 1fr; }
  }
}

/* ============================================================
   components
   ============================================================ */
@layer components {
  /* button */
  .c-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 15px; font-weight: 600; line-height: 1;
    padding: 15px 28px; border-radius: var(--radius-sm);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
    min-height: 44px;
  }
  .c-btn.-primary { color: #fff; background: linear-gradient(135deg, var(--c-blue-grad-from), var(--c-blue-grad-to)); box-shadow: var(--shadow-sm); }
  .c-btn.-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .c-btn.-ghost { color: var(--c-blue); background: transparent; border: 1px solid var(--c-blue-pale); }
  .c-btn.-ghost:hover { background: var(--c-blue-tint); color: var(--c-blue); }

  /* eyebrow */
  .c-eyebrow { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 18px; }
  .c-eyebrow__line { width: 30px; height: 1px; background: var(--c-blue); }
  .c-eyebrow__label { font-family: var(--font-en); font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--c-ink); }

  /* section heading */
  .c-section-heading { margin-bottom: 40px; }
  .c-section-heading__title { font-size: clamp(28px, 4.5vw, 56px); letter-spacing: -.015em; }

  /* card */
  .c-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  @media (max-width: 900px) { .c-card-grid { grid-template-columns: 1fr; } }
  .c-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-md); overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
  .c-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: inherit; }
  .c-card__media { aspect-ratio: 3 / 2; background: var(--c-offwhite); overflow: hidden; }
  .c-card__media img { width: 100%; height: 100%; object-fit: cover; }
  .c-card__body { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 10px; }
  .c-card__title { font-size: 18px; }
  .c-card__excerpt { font-size: 13px; color: var(--c-ink-sub); }
  .c-card__meta { font-size: 12px; color: var(--c-ink-mute); font-family: var(--font-en); letter-spacing: .04em; }

  /* prose（本文） */
  .c-prose { font-size: 16px; color: var(--c-ink); line-height: 1.9; }
  .c-prose > * + * { margin-top: 1.2em; }
  .c-prose h2 { font-size: 28px; margin-top: 2em; padding-bottom: .4em; border-bottom: 2px solid var(--c-line); }
  .c-prose h3 { font-size: 22px; margin-top: 1.6em; }
  .c-prose a { color: var(--c-blue); text-decoration: underline; }
  .c-prose img { border-radius: var(--radius-md); }
  .c-prose ul { list-style: disc; padding-left: 1.4em; }
  .c-prose ol { list-style: decimal; padding-left: 1.4em; }

  /* pagination */
  .c-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; flex-wrap: wrap; }
  .c-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--c-line); border-radius: var(--radius-sm); font-family: var(--font-en); font-size: 14px; color: var(--c-ink-sub); }
  .c-pagination .page-numbers.current { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }
  .c-pagination a.page-numbers:hover { border-color: var(--c-blue-pale); color: var(--c-blue); }

  /* page head（下層共通の見出し帯） */
  .p-pagehead { position: relative; background: var(--c-offwhite); border-bottom: 1px solid var(--c-line); overflow: hidden; }
  .p-pagehead__inner { max-width: var(--container-max); margin-inline: auto; padding: clamp(48px,7vw,96px) var(--container-pad); }
  .p-pagehead__en { font-family: var(--font-en); font-size: clamp(40px,8vw,96px); font-weight: 700; letter-spacing: -.03em; color: var(--c-blue-pale); opacity: .55; line-height: 1; }
  .p-pagehead__title { font-size: clamp(26px,4vw,44px); margin-top: 8px; }

  /* breadcrumb */
  .c-breadcrumb { font-size: 12px; color: var(--c-ink-mute); }
  .c-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .c-breadcrumb li::after { content: '/'; margin-left: 6px; color: var(--c-ink-faint); }
  .c-breadcrumb li:last-child::after { content: ''; }
  .c-breadcrumb a { color: var(--c-ink-sub); }

  /* entry */
  .p-entry { max-width: 820px; margin-inline: auto; }
  .p-entry__head { margin-bottom: 32px; }
  .p-entry__title { font-size: clamp(26px,4vw,40px); }

  /* 404 */
  .p-404 { text-align: center; }
  .p-404__code { font-family: var(--font-en); font-size: clamp(72px,16vw,160px); font-weight: 700; color: var(--c-blue-pale); line-height: 1; }
  .p-404__title { font-size: 24px; margin: 12px 0 16px; }
  .p-404__lead { color: var(--c-ink-sub); margin-bottom: 28px; }
}

/* ============================================================
   utilities
   ============================================================ */
@layer utilities {
  .u-skip-link { position: absolute; left: -9999px; top: 0; background: var(--c-blue); color: #fff; padding: 10px 16px; z-index: 100; }
  .u-skip-link:focus { left: 8px; top: 8px; color: #fff; }
  .u-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .u-bg-offwhite { background: var(--c-offwhite); }
  .u-text-center { text-align: center; }
  .u-sp-only { display: none; }
  @media (max-width: 600px) {
    .u-sp-only { display: inline; }
    .u-pc-only { display: none; }
  }
}

/* ============================================================
   front — トップページ専用（斜めクリップ境界 + 各セクション）
   _design-base/front-page.html に準拠
   ============================================================ */
@layer layout {
  /* 斜めクリップでセクション境界をつなぐ（後続セクションが前面に重なる） */
  .home { --clip: 74px; }
  body.has-section-stack { --clip: 64px; }
  @media (max-width: 900px) { .home, body.has-section-stack { --clip: 40px; } }

  .l-main.-front > section,
  .l-stack > section { position: relative; }
  .l-main.-front > section:not(:first-child),
  .l-stack > section:not(:first-child) { margin-top: calc(var(--clip) * -1); }
  .l-main.-front > section:not(:first-child):nth-of-type(even),
  .l-stack > section:not(:first-child):nth-of-type(even) {
    clip-path: polygon(0 0, 100% var(--clip), 100% 100%, 0 100%);
  }
  .l-main.-front > section:not(:first-child):nth-of-type(odd),
  .l-stack > section:not(:first-child):nth-of-type(odd) {
    clip-path: polygon(0 var(--clip), 100% 0, 100% 100%, 0 100%);
  }
  /* 重なり分だけ内側の上余白を足して、見た目の余白を確保 */
  .l-main.-front .l-section,
  .l-stack .l-section { padding-block: clamp(84px, 9vw, 130px); }
  .l-main.-front > section:not(:first-child) .l-section,
  .l-stack > section:not(:first-child) .l-section {
    padding-top: calc(clamp(84px, 9vw, 130px) + var(--clip));
  }

  /* フッターも同じ斜めで連結（トップ＋下層ページ） */
  .home .l-footer,
  body.has-section-stack .l-footer {
    position: relative; margin-top: calc(var(--clip) * -1); border-top: none;
    clip-path: polygon(0 var(--clip), 100% 0, 100% 100%, 0 100%);
  }
  .home .l-footer__inner,
  body.has-section-stack .l-footer__inner { padding-top: calc(72px + var(--clip)); }
}

@layer components {
  /* front / 下層共通：見出しを大きく */
  .l-main.-front .c-section-heading,
  .l-stack .c-section-heading { margin-bottom: 28px; }
  .l-main.-front .c-section-heading__title,
  .l-stack .c-section-heading__title {
    font-size: clamp(34px, 5.4vw, 60px); line-height: 1.25; letter-spacing: -.02em;
  }
  .l-main.-front .c-section-heading .c-eyebrow,
  .l-stack .c-section-heading .c-eyebrow { margin-bottom: 22px; }

  /* 共通アクション行 */
  .p-hero__actions, .p-onboarding__actions, .p-transform__actions, .p-aidev__actions {
    display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  }

  /* ---------- S1 hero ---------- */
  .p-hero {
    position: relative; overflow: hidden; background: var(--c-white);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 92px));
  }
  @media (max-width: 600px) { .p-hero { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 48px)); } }
  .p-hero__bg {
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(760px 540px at 86% 14%, rgba(66,133,244,.16), rgba(255,255,255,0) 62%),
      radial-gradient(560px 440px at 8% 92%, rgba(26,115,232,.09), rgba(255,255,255,0) 60%),
      radial-gradient(rgba(66,133,244,.09) 1px, transparent 1px);
    background-size: auto, auto, 34px 34px;
  }
  .p-hero__shape { position: absolute; display: block; }
  .p-hero__shape--1 { top: 64px; right: 96px; width: 104px; height: 104px; border: 2px solid var(--c-blue-sub); border-radius: 18px; transform: rotate(15deg); }
  .p-hero__shape--2 { top: 130px; right: 270px; width: 60px; height: 60px; background: var(--c-blue); border-radius: 11px; transform: rotate(-12deg); }
  .p-hero__shape--3 { top: 80px; right: 300px; width: 42px; height: 42px; background: var(--c-blue-sub); border-radius: 50%; }
  @media (max-width: 1024px) { .p-hero__shape { display: none; } }
  .p-hero__inner { position: relative; padding-block: clamp(88px, 12vw, 150px) clamp(120px, 15vw, 196px); }
  .p-hero__eyebrow {
    position: relative; padding-left: 44px; margin-bottom: 32px;
    font-family: var(--font-en); font-size: 12px; font-weight: 600;
    letter-spacing: .22em; text-transform: uppercase; color: var(--c-ink);
  }
  .p-hero__eyebrow::before { content: ''; position: absolute; left: 0; top: .65em; width: 30px; height: 1px; background: var(--c-blue); }
  .p-hero__title {
    font-size: clamp(34px, 6.2vw, 66px); font-weight: 700; line-height: 1.28;
    letter-spacing: -.02em; color: var(--c-ink); margin-bottom: 30px;
  }
  .p-hero__lead { font-size: clamp(18px, 2.4vw, 24px); font-weight: 500; line-height: 1.6; max-width: 660px; margin-bottom: 40px; }
  .p-hero__actions { margin-bottom: 40px; }
  .p-hero__meta { font-size: 13px; color: var(--c-ink-mute); letter-spacing: .02em; }

  /* ---------- S2 track-record / stats ---------- */
  .p-stats__lead { font-size: 15px; line-height: 1.95; color: var(--c-ink-sub); max-width: 560px; margin-bottom: 56px; }
  .p-stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
  .p-stats__num { font-family: var(--font-en); font-weight: 700; font-size: clamp(64px, 11vw, 128px); line-height: .82; letter-spacing: -.05em; display: flex; align-items: baseline; gap: 6px; }
  .p-stats__unit { font-size: .5em; font-weight: 600; color: var(--c-ink); }
  .p-stats__cap { font-size: 15px; color: var(--c-ink-sub); margin-top: 24px; }
  @media (max-width: 760px) { .p-stats__grid { grid-template-columns: 1fr; gap: 36px; } }

  /* ---------- S3 ai-tools ---------- */
  .p-aitools__lead { font-size: 17px; line-height: 1.9; color: var(--c-ink-sub); max-width: 720px; margin-bottom: 48px; }
  .p-aitools__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .p-aitools__card { position: relative; background: var(--c-offwhite); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 40px); }
  .p-aitools__card-en { font-family: var(--font-en); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-ink-mute); margin-bottom: 14px; }
  .p-aitools__card-name { font-size: 26px; font-weight: 700; margin-bottom: 16px; }
  .p-aitools__card-desc { font-size: 15px; line-height: 1.85; color: var(--c-ink-sub); margin-bottom: 18px; }
  .p-aitools__card-ph { font-size: 13px; line-height: 1.8; color: var(--c-ink-mute); background: #fff; border: 1px dashed var(--c-line-strong); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 20px; }
  .p-aitools__badge { display: inline-block; font-family: var(--font-en); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-blue); background: var(--c-blue-tint); border-radius: 999px; padding: 6px 14px; }
  .p-aitools__note { font-size: 12px; color: var(--c-ink-mute); margin-top: 24px; }
  @media (max-width: 760px) { .p-aitools__grid { grid-template-columns: 1fr; } }

  /* ---------- S4 ai-onboarding（中央寄せ） ---------- */
  .p-onboarding .c-section-heading { text-align: center; }
  .p-onboarding .c-eyebrow { justify-content: center; }
  .p-onboarding__lead { font-size: 17px; line-height: 1.9; color: var(--c-ink-sub); text-align: center; max-width: 640px; margin: 0 auto 56px; }
  .p-onboarding__placeholder {
    border: 1.5px dashed var(--c-line-strong); border-radius: var(--radius-lg);
    background: repeating-linear-gradient(135deg, #F8F9FA, #F8F9FA 16px, #ECEFF1 16px, #ECEFF1 32px);
    min-height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; margin-bottom: 40px;
  }
  .p-onboarding__placeholder-label { font-family: var(--font-en); font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink-mute); }
  .p-onboarding__placeholder-sub { font-size: 13px; color: var(--c-ink-mute); }
  .p-onboarding__actions { justify-content: center; }

  /* ---------- S5 services ---------- */
  .p-services__lead { font-size: 17px; line-height: 1.9; color: var(--c-ink-sub); max-width: 720px; margin-bottom: 56px; }
  .p-services__hero { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 60px); margin-bottom: 24px; }
  .p-services__hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(620px 420px at 90% 0%, rgba(66,133,244,.14), rgba(239,243,255,0) 62%); }
  .p-services__hero-body { position: relative; }
  .p-services__hero-en { font-family: var(--font-en); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-ink); margin-bottom: 18px; }
  .p-services__hero-title { font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; letter-spacing: -.015em; margin-bottom: 22px; }
  .p-services__hero-desc { font-size: 16px; line-height: 2; color: #3C4043; margin-bottom: 28px; max-width: 760px; }
  .p-services__hero-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; margin-bottom: 32px; }
  .p-services__hero-list li { position: relative; padding: 14px 0 14px 22px; border-top: 1px solid rgba(66,133,244,.12); font-size: 15px; line-height: 1.6; color: var(--c-ink-sub); }
  .p-services__hero-list li::before { content: ''; position: absolute; left: 0; top: 20px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-blue); }
  .p-services__hero-cta { margin-top: 6px; }
  .p-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 48px; margin-top: 56px; }
  a.p-services__card { display: block; transition: transform .2s var(--ease); }
  a.p-services__card:hover { transform: translateY(-3px); color: inherit; }
  a.p-services__card:hover .p-services__card-name { color: var(--c-blue); }
  .p-services__card-name { font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.4; margin-bottom: 14px; }
  .p-services__card-desc { font-size: 15px; line-height: 1.85; color: var(--c-ink-sub); }
  @media (max-width: 760px) { .p-services__hero-list, .p-services__grid { grid-template-columns: 1fr; } }

  /* ---------- S6 business-transform ---------- */
  .p-transform__sub { font-size: clamp(17px, 2.2vw, 20px); font-weight: 500; line-height: 1.7; margin-bottom: 18px; max-width: 720px; }
  .p-transform__lead { font-size: 16px; line-height: 1.95; color: var(--c-ink-sub); max-width: 760px; margin-bottom: 64px; }
  .p-transform__cases-heading { font-size: 15px; font-weight: 700; margin-bottom: 24px; }
  .p-transform__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--c-line-strong); }
  .p-transform__case { padding: 32px 28px 0 0; }
  .p-transform__case-no { display: block; font-family: var(--font-en); font-size: 13px; font-weight: 600; color: var(--c-blue-sub); margin-bottom: 16px; }
  .p-transform__case:nth-child(2) .p-transform__case-no { color: var(--c-blue); }
  .p-transform__case:nth-child(4) .p-transform__case-no { color: var(--c-ink); }
  .p-transform__case-title { font-size: 17px; font-weight: 700; line-height: 1.5; margin-bottom: 12px; }
  .p-transform__case-desc { font-size: 14px; line-height: 1.8; color: var(--c-ink-sub); }
  .p-transform__hook { font-size: clamp(24px, 3.6vw, 38px); font-weight: 700; line-height: 1.55; letter-spacing: -.01em; margin: 72px 0 0; padding-top: 48px; border-top: 1px solid var(--c-line); max-width: 780px; }
  .p-transform__actions { margin-top: 28px; }
  @media (max-width: 900px) { .p-transform__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .p-transform__grid { grid-template-columns: 1fr; } }

  /* ---------- S7 ai-development ---------- */
  .p-aidev__sub { font-size: clamp(17px, 2.2vw, 20px); font-weight: 500; line-height: 1.7; margin-bottom: 18px; max-width: 720px; }
  .p-aidev__lead { font-size: 16px; line-height: 1.95; color: var(--c-ink-sub); max-width: 760px; margin-bottom: 56px; }
  .p-aidev__compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; }
  .p-aidev__col { position: relative; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-md); padding: 40px; }
  .p-aidev__col-title { font-size: 13px; font-weight: 700; color: var(--c-ink-mute); margin-bottom: 16px; }
  .p-aidev__col-desc { font-size: 16px; line-height: 1.85; color: var(--c-ink-sub); }
  .p-aidev__col.is-win { background: linear-gradient(135deg, var(--c-blue-grad-from), var(--c-blue-grad-to)); border-color: transparent; }
  .p-aidev__col.is-win .p-aidev__col-title { color: #D2E3FC; font-family: var(--font-en); letter-spacing: .04em; }
  .p-aidev__col.is-win .p-aidev__col-desc { color: #fff; font-weight: 600; font-size: 17px; line-height: 1.8; }
  .p-aidev__badge { display: none; }
  @media (max-width: 760px) { .p-aidev__compare { grid-template-columns: 1fr; } }

  /* ---------- S8 works ---------- */
  .p-works__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-bottom: 40px; }
  .p-works__head .c-section-heading { margin-bottom: 0; }
  .p-works__lead { font-size: 15px; line-height: 1.95; color: var(--c-ink-sub); max-width: 440px; }
  .p-works__filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 48px; }
  .p-works__filter { font-size: 14px; font-weight: 500; color: var(--c-ink-sub); background: transparent; border: 1px solid var(--c-line-strong); border-radius: 999px; padding: 9px 22px; transition: border-color .2s var(--ease), color .2s var(--ease); }
  .p-works__filter:hover { border-color: var(--c-blue-pale); color: var(--c-blue); }
  .p-works__filter.is-active, .p-works__filter.is-active:hover { color: #fff; background: var(--c-blue); border-color: var(--c-blue); }
  .p-works__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 36px; margin-bottom: 48px; }
  .p-works__card { display: flex; flex-direction: column; }
  a.p-works__card:hover { color: inherit; }
  a.p-works__card:hover .p-works__card-title { color: var(--c-blue); }
  a.p-works__card:hover .p-works__card-media img { transform: scale(1.04); }
  .p-works__card-media { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden; background: linear-gradient(140deg, #F1F3F4, #E8EAED); margin-bottom: 20px; }
  .p-works__card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
  .p-works__card-visual { position: absolute; inset: 0; display: block; }
  .p-works__card-visual::before { content: ''; position: absolute; width: 128px; height: 128px; border-radius: 50%; background: rgba(66,133,244,.16); top: -22px; right: -12px; }
  .p-works__card-visual::after { content: ''; position: absolute; width: 62px; height: 62px; border: 1.5px solid rgba(66,133,244,.4); border-radius: 12px; bottom: 36px; left: 28px; transform: rotate(-12deg); }
  .p-works__card-visual-label { position: absolute; left: 20px; bottom: 16px; font-family: var(--font-en); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-faint); }
  .p-works__card-cat { font-family: var(--font-en); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink); margin-bottom: 8px; }
  .p-works__card-title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.4; }
  @media (max-width: 900px) { .p-works__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .p-works__grid { grid-template-columns: 1fr; } }

  /* ---------- S9 why-eda ---------- */
  .p-why__lead { font-size: 16px; line-height: 1.95; color: var(--c-ink-sub); max-width: 640px; margin-bottom: 64px; }
  .p-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
  .p-why__no { font-family: var(--font-en); font-size: clamp(52px, 7vw, 72px); font-weight: 700; letter-spacing: -.04em; line-height: 1; margin-bottom: 24px; }
  .p-why__rule { display: block; width: 36px; height: 2px; background: var(--c-blue); margin-bottom: 24px; }
  .p-why__item-title { font-size: 23px; font-weight: 700; letter-spacing: -.01em; line-height: 1.45; margin-bottom: 18px; }
  .p-why__item-desc { font-size: 15px; line-height: 1.9; color: var(--c-ink-sub); }
  @media (max-width: 860px) { .p-why__grid { grid-template-columns: 1fr; gap: 44px; } }

  /* ---------- S10 blog ---------- */
  .p-blog__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-bottom: 44px; }
  .p-blog__head .c-section-heading { margin-bottom: 0; }
  .p-blog__lead { font-size: 15px; line-height: 1.95; color: var(--c-ink-sub); max-width: 380px; }
  .p-blog__list { border-top: 1px solid var(--c-line-strong); margin-bottom: 40px; }
  .p-blog__row { display: grid; grid-template-columns: 120px 150px 1fr 40px; gap: 28px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--c-line); }
  .p-blog__row:hover { color: inherit; }
  .p-blog__row:hover .p-blog__title { color: var(--c-blue); }
  .p-blog__row:hover .p-blog__arrow { color: var(--c-blue); transform: translateX(4px); }
  .p-blog__date { font-family: var(--font-en); font-size: 14px; color: var(--c-ink-mute); }
  .p-blog__cat { font-family: var(--font-en); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink); }
  .p-blog__title { font-size: 18px; font-weight: 500; line-height: 1.5; }
  .p-blog__arrow { font-family: var(--font-en); font-size: 18px; color: var(--c-ink-faint); text-align: right; transition: color .2s var(--ease), transform .2s var(--ease); }
  @media (max-width: 760px) {
    .p-blog__row { grid-template-columns: 1fr auto; gap: 6px 16px; }
    .p-blog__date { order: 1; }
    .p-blog__cat { order: 2; text-align: right; }
    .p-blog__title { order: 3; grid-column: 1 / -1; }
    .p-blog__arrow { display: none; }
  }

  /* ---------- S11 careers（中央寄せ） ---------- */
  .p-careers__inner { text-align: center; }
  .p-careers .c-section-heading { text-align: center; }
  .p-careers .c-eyebrow { justify-content: center; }
  .p-careers__lead { font-size: 16px; line-height: 1.95; color: var(--c-ink-sub); max-width: 640px; margin: 0 auto 40px; }
  .p-careers__tags { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 48px; }
  .p-careers__tag { font-family: var(--font-en); font-size: 14px; font-weight: 500; color: var(--c-ink); background: #fff; border: 1px solid var(--c-line); border-radius: 999px; padding: 10px 24px; }

  /* ---------- S12 contact-cta ---------- */
  .p-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
  .p-contact__sub { font-size: 17px; font-weight: 500; line-height: 1.7; margin-bottom: 18px; }
  .p-contact__lead { font-size: 15px; line-height: 1.95; color: var(--c-ink-sub); max-width: 460px; margin-bottom: 48px; }
  .p-contact__tel { padding-top: 36px; border-top: 1px solid var(--c-line); }
  .p-contact__tel-label { font-size: 13px; color: var(--c-ink-sub); margin-bottom: 10px; }
  .p-contact__tel-num { font-family: var(--font-en); font-size: clamp(30px, 4vw, 38px); font-weight: 700; letter-spacing: -.02em; margin-bottom: 10px; }
  .p-contact__tel-num a:hover { color: var(--c-blue); }
  .p-contact__tel-hours { font-size: 13px; color: var(--c-ink-mute); }
  .p-contact__panel { background: var(--c-offwhite); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 48px); }
  .p-contact__panel-title { font-size: 20px; font-weight: 700; margin-bottom: 28px; }
  .p-contact__fallback { font-size: 15px; line-height: 1.9; color: var(--c-ink-sub); margin-bottom: 24px; }
  .p-contact__fallback-btn { width: 100%; }
  @media (max-width: 900px) { .p-contact__grid { grid-template-columns: 1fr; gap: 48px; } }

  /* CF7 をデザインに馴染ませる */
  .p-contact__form label { display: block; font-size: 13px; font-weight: 600; color: var(--c-ink); margin-bottom: 8px; }
  .p-contact__form p { margin-bottom: 20px; }
  /* 必須項目バッジ（.hissu） */
  .p-contact__form .hissu,
  .footer-contact .hissu {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: #078fbf;
    border-radius: 0;
    padding: 0.2rem 0.5rem;
    vertical-align: middle;
    margin-bottom: 0.3rem;
  }
  .footer-contact form .button {
    width: 100%;
    display: block !important;
  }
  .p-contact__form dl {
    margin-bottom: 1rem;
  }
  .p-contact__form input[type="text"],
  .p-contact__form input[type="email"],
  .p-contact__form input[type="tel"],
  .p-contact__form textarea,
  .p-contact__form select {
    width: 100%; font-family: inherit; font-size: 15px; color: var(--c-ink); background: #fff;
    border: 1px solid var(--c-line-strong); border-radius: var(--radius-sm); padding: 13px 16px; outline: none;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  }
  .p-contact__form textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
  .p-contact__form input:focus, .p-contact__form textarea:focus, .p-contact__form select:focus {
    border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(26,115,232,.12);
  }
  .p-contact__form .wpcf7-submit {
    width: 100%; font-family: inherit; font-size: 16px; font-weight: 600; color: #fff;
    background: linear-gradient(135deg, var(--c-blue-grad-from), var(--c-blue-grad-to));
    border: none; border-radius: var(--radius-sm); padding: 16px; cursor: pointer; margin-top: 4px; min-height: 52px;
    transition: box-shadow .2s var(--ease), transform .2s var(--ease);
  }
  .p-contact__form .wpcf7-submit:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
  .p-contact__form .wpcf7-not-valid-tip { font-size: 12px; color: var(--c-error); margin-top: 6px; }
  .p-contact__form .wpcf7-response-output { font-size: 13px; margin: 16px 0 0 !important; padding: 12px 16px; border-radius: var(--radius-sm); }

  /* ---------- フッター上部：AIエージェント導入サポート問い合わせ ---------- */
  .footer-contact {
    background: linear-gradient(180deg, var(--c-blue-tint), var(--c-offwhite));
    border-top: 1px solid var(--c-line);
    padding: clamp(56px, 8vw, 100px) var(--container-pad);
  }
  .footer-contact .p-contact__form {
    max-width: 640px;
    margin-inline: auto;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    padding: clamp(28px, 4vw, 48px);
    box-shadow: var(--shadow-sm);
  }
  @media (max-width: 600px) {
    .footer-contact .p-contact__form { padding: 24px 20px; }
  }

  /* 個人情報のお取扱いに関する同意事項：高さ制限＋スクロール */
  .p-form__content.privacy {
    max-height: 240px;
    overflow-y: auto;
    margin-top: 1rem;
    margin-bottom: 20px;
    padding: 16px 18px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    background: var(--c-offwhite);
    color: var(--c-ink-sub);
    font-size: 13px;
    line-height: 1.8;
    -webkit-overflow-scrolling: touch;
  }
  .p-form__content.privacy h4 { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--c-ink); }
  .p-form__content.privacy h5 { margin: 16px 0 4px; font-size: 13px; font-weight: 700; color: var(--c-ink); }
  .p-form__content.privacy p { margin: 0 0 8px; }
  .p-form__content.privacy p:last-child { margin-bottom: 0; }
  .p-form__content.privacy::-webkit-scrollbar { width: 8px; }
  .p-form__content.privacy::-webkit-scrollbar-thumb { border-radius: 8px; background: var(--c-line-strong); }
}

/* ============================================================
   下層ページ（blog / company / services）
   _design-base/{blog,company,services}.html に準拠
   ============================================================ */
@layer components {
  /* ---------- 共通：下層ヒーロー ---------- */
  .p-subhero {
    position: relative; overflow: hidden; background: var(--c-white);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 80px));
  }
  @media (max-width: 600px) { .p-subhero { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 44px)); } }
  .p-subhero__bg {
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(720px 520px at 88% 16%, rgba(66,133,244,.14), rgba(255,255,255,0) 62%),
      radial-gradient(rgba(66,133,244,.09) 1px, transparent 1px);
    background-size: auto, 34px 34px;
  }
  .p-subhero__shape { position: absolute; display: block; }
  .p-subhero__shape--1 { top: 70px; right: 120px; width: 96px; height: 96px; border: 2px solid var(--c-blue-sub); border-radius: 18px; transform: rotate(15deg); }
  .p-subhero__shape--2 { top: 132px; right: 270px; width: 54px; height: 54px; background: var(--c-blue); border-radius: 11px; transform: rotate(-12deg); }
  .p-subhero__shape--3 { top: 84px; right: 286px; width: 38px; height: 38px; background: var(--c-blue-sub); border-radius: 50%; }
  .p-subhero__shape--4 { top: 176px; right: 104px; width: 28px; height: 28px; background: var(--c-ink); border-radius: 7px; transform: rotate(20deg); }
  @media (max-width: 1024px) { .p-subhero__shape { display: none; } }
  .p-subhero__inner { position: relative; padding-block: clamp(72px, 10vw, 128px) clamp(80px, 11vw, 124px); }
  .p-subhero__eyebrow { position: relative; padding-left: 44px; margin-bottom: 30px; font-family: var(--font-en); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--c-ink); }
  .p-subhero__eyebrow::before { content: ''; position: absolute; left: 0; top: .65em; width: 30px; height: 1px; background: var(--c-blue); }
  .p-subhero__en { font-family: var(--font-en); font-weight: 700; font-size: clamp(64px, 14vw, 128px); line-height: .9; letter-spacing: -.04em; color: var(--c-blue-sub); margin-bottom: 22px; }
  .p-subhero__ja { font-size: clamp(22px, 3.4vw, 30px); font-weight: 700; color: var(--c-ink); margin-bottom: 20px; }
  .p-subhero__lead { font-size: 16px; line-height: 2; color: var(--c-ink-sub); max-width: 680px; }
  .p-subhero__lead strong { color: var(--c-ink); font-weight: 700; }

  /* ---------- 共通：CTA ---------- */
  .p-cta { background: var(--c-white); }
  .p-cta__inner { text-align: center; }
  .p-cta .c-eyebrow { justify-content: center; }
  .p-cta__title { font-size: clamp(30px, 4.6vw, 52px); font-weight: 700; letter-spacing: -.02em; margin-bottom: 22px; }
  .p-cta__lead { font-size: 16px; line-height: 1.95; color: var(--c-ink-sub); max-width: 600px; margin: 0 auto 16px; }
  .p-cta__tel { font-family: var(--font-en); font-size: clamp(28px, 4vw, 34px); font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
  .p-cta__hours { font-size: 13px; color: var(--c-ink-mute); margin-bottom: 40px; }
  .p-cta__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; }

  /* ---------- blog ---------- */
  .p-blogbody__filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 64px; }
  .p-blogbody__empty { text-align: center; padding: 40px 0 60px; color: var(--c-ink-mute); font-size: 15px; }

  .p-feat { display: grid; grid-template-columns: 1.15fr 1fr; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 64px; }
  .p-feat:hover { color: inherit; }
  .p-feat:hover .p-feat__title { color: var(--c-blue); }
  .p-feat__visual { position: relative; min-height: 360px; overflow: hidden; background: linear-gradient(140deg, var(--c-blue-tint), #D2E3FC); }
  .p-feat__visual::before { content: ''; position: absolute; width: 150px; height: 150px; border-radius: 50%; background: rgba(26,115,232,.18); top: -28px; right: -18px; }
  .p-feat__visual::after { content: ''; position: absolute; width: 76px; height: 76px; border: 1.5px solid rgba(26,115,232,.45); border-radius: 16px; bottom: 54px; left: 44px; transform: rotate(-12deg); }
  .p-feat__img { width: 100%; height: 100%; object-fit: cover; }
  .p-feat__visual-tag { position: absolute; left: 32px; top: 30px; font-family: var(--font-en); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-blue); font-weight: 600; }
  .p-feat__visual-label { position: absolute; left: 32px; bottom: 24px; font-family: var(--font-en); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-sub); }
  .p-feat__body { padding: clamp(32px, 4vw, 52px) clamp(28px, 3.5vw, 48px); display: flex; flex-direction: column; justify-content: center; }
  .p-feat__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
  .p-feat__cat { font-family: var(--font-en); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-blue); font-weight: 600; }
  .p-feat__sep { width: 14px; height: 1px; background: var(--c-line-strong); }
  .p-feat__date { font-family: var(--font-en); font-size: 13px; color: var(--c-ink-mute); }
  .p-feat__title { display: block; font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.015em; line-height: 1.45; margin-bottom: 28px; }
  .p-feat__btn { align-self: flex-start; }
  @media (max-width: 820px) { .p-feat { grid-template-columns: 1fr; } .p-feat__visual { min-height: 220px; } }

  .p-bloggrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 36px; margin-bottom: 64px; }
  .p-blogcard { display: block; }
  .p-blogcard:hover { color: inherit; }
  .p-blogcard:hover .p-blogcard__title { color: var(--c-blue); }
  .p-blogcard:hover .p-blogcard__img { transform: scale(1.04); }
  .p-blogcard__media { position: relative; display: block; height: 200px; border-radius: var(--radius-md); overflow: hidden; background: linear-gradient(140deg, #F1F3F4, #E8EAED); margin-bottom: 20px; }
  .p-blogcard__img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
  .p-blogcard__visual { position: absolute; inset: 0; background-image: radial-gradient(rgba(66,133,244,.10) 1px, transparent 1px); background-size: 26px 26px; }
  .p-blogcard__visual::before { content: ''; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: rgba(66,133,244,.16); top: -22px; right: -12px; }
  .p-blogcard__visual::after { content: ''; position: absolute; width: 58px; height: 58px; border: 1.5px solid rgba(26,115,232,.4); border-radius: 12px; bottom: 34px; left: 26px; transform: rotate(-12deg); }
  .p-blogcard__cat-en { position: absolute; left: 20px; top: 16px; font-family: var(--font-en); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-sub); }
  .p-blogcard__meta { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
  .p-blogcard__cat { font-size: 12px; font-weight: 600; color: var(--c-blue); }
  .p-blogcard__sep { width: 12px; height: 1px; background: var(--c-line-strong); }
  .p-blogcard__date { font-family: var(--font-en); font-size: 12px; color: var(--c-ink-mute); }
  .p-blogcard__title { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.005em; line-height: 1.55; }
  @media (max-width: 900px) { .p-bloggrid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .p-bloggrid { grid-template-columns: 1fr; } }

  /* ---------- company: philosophy ---------- */
  .p-philo__lead { font-size: 16px; line-height: 1.95; color: var(--c-ink-sub); max-width: 720px; margin-bottom: 64px; }
  .p-philo__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .p-philo__card { background: #fff; border: 1px solid var(--c-line); border-radius: 18px; padding: 40px; display: flex; flex-direction: column; gap: 24px; min-height: 220px; }
  .p-philo__head { display: flex; align-items: baseline; gap: 12px; }
  .p-philo__label { font-family: var(--font-en); font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--c-ink-mute); }
  .p-philo__no { font-family: var(--font-en); font-size: 52px; font-weight: 700; line-height: .8; letter-spacing: -.03em; }
  .p-philo__title { font-size: 21px; font-weight: 700; line-height: 1.55; letter-spacing: -.01em; }
  @media (min-width: 901px) and (max-width: 1100px) { .p-philo__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 900px) { .p-philo__grid { grid-template-columns: 1fr; } .p-philo__card { min-height: 0; } }

  /* ---------- company: ceo message ---------- */
  .p-ceo__title { font-size: clamp(28px, 3.6vw, 44px); font-weight: 700; letter-spacing: -.015em; line-height: 1.45; margin-bottom: 56px; max-width: 920px; }
  .p-ceo__grid { display: grid; grid-template-columns: 340px 1fr; gap: 64px; align-items: start; }
  .p-ceo__portrait { position: relative; display: block; height: 380px; border-radius: 18px; overflow: hidden; border: 1px solid var(--c-line); background: linear-gradient(160deg, #F1F3F4, #E8EAED); }
  /* 顔の位置調整はこの object-position（横 / 縦）で行う。左寄り・上寄りの人物を枠内に収めている */
  .p-ceo__portrait-img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .p-ceo__name-block { display: block; margin-top: 24px; }
  .p-ceo__role { display: block; font-size: 13px; color: var(--c-ink-mute); margin-bottom: 6px; }
  .p-ceo__name { display: block; font-size: 24px; font-weight: 700; }
  .p-ceo__name-en { display: block; font-family: var(--font-en); font-size: 12px; letter-spacing: .16em; color: var(--c-ink-mute); margin-top: 6px; }
  .p-ceo__body { display: flex; flex-direction: column; gap: 22px; }
  .p-ceo__body p { font-size: 16px; line-height: 2.05; color: #3C4043; }
  .person-position-1 { object-position: 5% 16%; }
  .person-position-2 { object-position: 5% 16%; }
  .person-position-3 { object-position: 5% 16%; }
  .person-position-4 { object-position: 5% 16%; }
  .person-position-5 { object-position: 5% 16%; }
  .person-position-6 { object-position: 5% 16%; }
  @media (max-width: 860px) { .p-ceo__grid { grid-template-columns: 1fr; gap: 40px; } .p-ceo__portrait { height: 300px; } }

  /* ---------- company: leaders ---------- */
  .p-leaders__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
  .p-leader { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; }
  .p-leader__photo { position: relative; display: block; height: 160px; background: repeating-linear-gradient(135deg, #F1F3F4, #F1F3F4 14px, #E8EAED 14px, #E8EAED 28px); }
  .p-leader__photo.has-photo { background: #F1F3F4; }
  .p-leader__photo::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--bar, var(--c-blue)); z-index: 1; }
  /* 顔の位置調整はこの object-position（横 / 縦）で行う。上寄せで顔を出している */
  .p-leader__photo-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
  .p-leader__photo-label { position: absolute; bottom: 14px; left: 14px; font-family: var(--font-en); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-faint); }
  .p-leader__role { display: block; font-size: 12px; color: var(--c-ink-mute); line-height: 1.5; padding: 20px 20px 0; min-height: 52px; }
  .p-leader__name { display: block; font-size: 19px; font-weight: 700; padding: 0 20px; margin-bottom: 14px; }
  .p-leader__link { display: block; padding: 0 20px 20px; font-family: var(--font-en); font-size: 12px; font-weight: 600; letter-spacing: .06em; }
  @media (max-width: 1024px) { .p-leaders__grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 620px) { .p-leaders__grid { grid-template-columns: repeat(2, 1fr); } .p-leader__role { min-height: 0; } }

  /* ---------- company: data ---------- */
  .p-cdata__table { border-top: 2px solid var(--c-ink); }
  .p-cdata__row { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--c-line); }
  .p-cdata__key { font-size: 15px; font-weight: 700; }
  .p-cdata__val { font-size: 15px; line-height: 1.8; color: #3C4043; }
  .p-cdata__office + .p-cdata__office { margin-top: 18px; }
  .p-cdata__office-name { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
  .p-cdata__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
  .p-cdata__office-ja { font-size: 14px; font-weight: 700; }
  .p-cdata__office-en { font-family: var(--font-en); font-size: 11px; letter-spacing: .14em; color: var(--c-ink-mute); }
  .p-cdata__office-addr { font-size: 14px; line-height: 1.7; color: #3C4043; padding-left: 19px; }
  @media (max-width: 700px) { .p-cdata__row { grid-template-columns: 1fr; gap: 8px; } }

  /* ---------- company: access ---------- */
  .p-access__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .p-access__card { background: #fff; border: 1px solid var(--c-line); border-radius: 18px; overflow: hidden; }
  .p-access__map { position: relative; display: block; height: 190px; background-color: #F1F3F4; background-image: linear-gradient(#E3E6EA 1px, transparent 1px), linear-gradient(90deg, #E3E6EA 1px, transparent 1px); background-size: 30px 30px; }
  .p-access__map-frame { display: block; width: 100%; height: 100%; border: 0; }
  .p-access__body { padding: 24px; }
  .p-access__name { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .p-access__name-ja { font-size: 17px; font-weight: 700; }
  .p-access__name-en { font-family: var(--font-en); font-size: 11px; letter-spacing: .14em; color: var(--c-ink-mute); }
  .p-access__zip { font-size: 13px; color: var(--c-ink-mute); margin-bottom: 4px; }
  .p-access__addr { font-size: 14px; line-height: 1.75; color: #3C4043; margin-bottom: 16px; }
  .p-access__route { font-size: 13px; line-height: 1.75; color: var(--c-ink-sub); padding-top: 14px; border-top: 1px solid var(--c-line); }
  @media (max-width: 920px) { .p-access__grid { grid-template-columns: 1fr; } }

  /* ---------- company: health ---------- */
  .p-health__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .p-health__lead { font-size: 16px; line-height: 2; color: var(--c-ink-sub); max-width: 520px; }
  .p-health__badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .p-health__badge { height: 130px; border: 1px solid var(--c-line); border-radius: var(--radius-md); background: var(--c-offwhite); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; }
  .p-health__badge-icon { width: 44px; height: 44px; border-radius: 50%; }
  .p-health__badge-icon--img { width: auto; height: 60px; border-radius: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
  .p-health__badge-icon--dark { background: var(--c-ink); border-radius: 8px; padding: 8px 12px; }
  .p-health__badge-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
  .p-health__badge-label { font-size: 12px; line-height: 1.5; color: var(--c-ink-sub); }
  @media (max-width: 860px) { .p-health__grid { grid-template-columns: 1fr; gap: 36px; } }

  /* ---------- company: clients ---------- */
  .p-clients__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-bottom: 48px; }
  .p-clients__head .c-section-heading { margin-bottom: 0; }
  .p-clients__lead { font-size: 15px; line-height: 1.9; color: var(--c-ink-sub); max-width: 380px; }
  .p-clients__list { background: #fff; border: 1px solid var(--c-line); border-radius: 18px; padding: 40px 44px; column-count: 4; column-gap: 40px; }
  .p-clients__item { position: relative; display: block; break-inside: avoid; padding: 7px 0 7px 18px; font-size: 13.5px; line-height: 1.6; color: #3C4043; }
  .p-clients__item::before { content: ''; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-line-strong); }
  @media (max-width: 1024px) { .p-clients__list { column-count: 3; } }
  @media (max-width: 720px) { .p-clients__list { column-count: 2; padding: 28px; } }
  @media (max-width: 480px) { .p-clients__list { column-count: 1; } }

  /* ---------- company: history ---------- */
  .p-history__list { border-top: 1px solid var(--c-line); }
  .p-history__row { display: grid; grid-template-columns: 180px 1fr; gap: 36px; padding: 30px 0; border-bottom: 1px solid var(--c-line); }
  .p-history__year { display: flex; align-items: flex-start; gap: 14px; }
  .p-history__dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 14px; flex: none; }
  .p-history__year-num { font-family: var(--font-en); font-size: 38px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
  .p-history__events { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; }
  .p-history__event { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: baseline; }
  .p-history__month { font-size: 14px; font-weight: 700; color: var(--c-ink-sub); }
  .p-history__text { font-size: 15px; line-height: 1.7; color: #3C4043; }
  @media (max-width: 760px) { .p-history__row { grid-template-columns: 1fr; gap: 16px; } .p-history__event { grid-template-columns: 56px 1fr; gap: 14px; } }

  /* ---------- services: AI focus ---------- */
  .l-stack > section.p-aifocus:not(:first-child) {
    clip-path: polygon(0 0, 100% var(--clip), 100% 100%, 0 calc(100% - var(--clip)));
    overflow: hidden;
  }
  .p-aifocus { position: relative; }
  .p-aifocus__bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(680px 480px at 90% 8%, rgba(66,133,244,.16), rgba(248,249,250,0) 60%), radial-gradient(rgba(66,133,244,.08) 1px, transparent 1px); background-size: auto, 34px 34px; }
  .p-aifocus .l-section { position: relative; }
  .p-aifocus__lead { font-size: 18px; line-height: 1.95; color: var(--c-ink-sub); max-width: 720px; margin-bottom: 64px; }
  .p-aifocus__lead strong { color: var(--c-ink); font-weight: 700; }
  .p-aifocus__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 64px; }
  .p-aifocus__card { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 48px; background: #fff; border: 1px solid var(--c-line); }
  .p-aifocus__card::before { content: ''; position: absolute; width: 160px; height: 160px; border-radius: 50%; background: rgba(66,133,244,.10); top: -30px; right: -24px; }
  .p-aifocus__card.-primary { background: linear-gradient(150deg, var(--c-blue-grad-from), var(--c-blue-grad-to)); border-color: transparent; }
  .p-aifocus__card.-primary::before { background: rgba(255,255,255,.10); }
  .p-aifocus__card-en { position: relative; font-family: var(--font-en); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-blue); margin-bottom: 20px; }
  .p-aifocus__card.-primary .p-aifocus__card-en { color: #D2E3FC; }
  .p-aifocus__card-title { position: relative; font-size: 30px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 18px; }
  .p-aifocus__card.-primary .p-aifocus__card-title { color: #fff; }
  .p-aifocus__card-desc { position: relative; font-size: 15px; line-height: 1.95; color: var(--c-ink-sub); }
  .p-aifocus__card.-primary .p-aifocus__card-desc { color: var(--c-blue-tint); }
  .p-aifocus__caps { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--c-line-strong); margin-bottom: 64px; }
  .p-aifocus__cap { padding: 32px 20px 0 0; }
  .p-aifocus__cap-no { display: block; font-family: var(--font-en); font-size: 13px; font-weight: 600; color: var(--c-blue); margin-bottom: 14px; }
  .p-aifocus__cap-text { font-size: 14px; line-height: 1.75; color: var(--c-ink-sub); }
  .p-aifocus__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
  @media (max-width: 860px) { .p-aifocus__cards { grid-template-columns: 1fr; } .p-aifocus__caps { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .p-aifocus__caps { grid-template-columns: 1fr; } }

  /* ---------- services: core development ---------- */
  .p-coreserv__lead { font-size: 16px; line-height: 1.95; color: var(--c-ink-sub); max-width: 760px; margin-bottom: 64px; }
  .p-coreserv__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 52px; }
  .p-coreserv__head { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
  .p-coreserv__no { font-family: var(--font-en); font-size: 12px; font-weight: 600; color: var(--c-ink-faint); }
  .p-coreserv__line { width: 16px; height: 1px; background: var(--c-line-strong); }
  .p-coreserv__en { font-family: var(--font-en); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
  .p-coreserv__ja { font-size: 24px; font-weight: 700; letter-spacing: -.015em; line-height: 1.4; margin-bottom: 16px; }
  .p-coreserv__desc { font-size: 15px; line-height: 1.85; color: var(--c-ink-sub); }
  @media (max-width: 900px) { .p-coreserv__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .p-coreserv__grid { grid-template-columns: 1fr; } }

  /* ---------- services: platforms ---------- */
  .p-platforms__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .p-platforms__card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-md); padding: 36px; }
  .p-platforms__en { font-family: var(--font-en); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-blue); margin-bottom: 14px; }
  .p-platforms__ja { font-size: 22px; font-weight: 700; margin-bottom: 14px; }
  .p-platforms__desc { font-size: 14px; line-height: 1.8; color: var(--c-ink-sub); }
  @media (max-width: 900px) { .p-platforms__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .p-platforms__grid { grid-template-columns: 1fr; } }

  /* ---------- services: tech stack ---------- */
  .p-stack__featured { background: #F4F8FE; border: 1px solid #D2E3FC; border-radius: 18px; padding: 38px 40px; margin-bottom: 48px; }
  .p-stack__featured-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
  .p-stack__featured-en { font-family: var(--font-en); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-blue); font-weight: 600; }
  .p-stack__featured-ja { font-size: 14px; font-weight: 700; }
  .p-stack__featured-note { font-size: 13px; color: var(--c-ink-sub); }
  .p-stack__tags { display: flex; flex-wrap: wrap; gap: 10px; }
  .p-stack__tag { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; color: var(--c-blue-grad-to); background: #fff; border: 1px solid #D2E3FC; border-radius: 999px; padding: 9px 18px; }
  .p-stack__tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-blue); flex: none; }
  .p-stack__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; }
  .p-stack__col-label { font-family: var(--font-en); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink-mute); padding-bottom: 16px; border-bottom: 2px solid var(--c-ink); margin-bottom: 8px; }
  .p-stack__item { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--c-line); font-size: 15px; color: #3C4043; }
  .p-stack__item-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-blue); flex: none; }
  @media (max-width: 900px) { .p-stack__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
  @media (max-width: 520px) { .p-stack__grid { grid-template-columns: 1fr; } }

  /* ---------- services: process ---------- */
  .p-process__list { display: flex; flex-direction: column; gap: 20px; }
  .p-process__phase { display: grid; grid-template-columns: 230px 1fr; gap: 40px; background: #fff; border: 1px solid var(--c-line); border-radius: 18px; padding: 40px 44px; align-items: start; }
  .p-process__phase-label { font-family: var(--font-en); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-blue); font-weight: 600; margin-bottom: 8px; }
  .p-process__phase-dur { font-family: var(--font-en); font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
  .p-process__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
  .p-process__step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .p-process__step-no { font-family: var(--font-en); font-size: 12px; font-weight: 600; color: var(--c-ink-faint); }
  .p-process__step-title { font-size: 16px; font-weight: 700; }
  .p-process__step-desc { font-size: 13.5px; line-height: 1.75; color: var(--c-ink-sub); padding-left: 24px; }
  @media (max-width: 920px) { .p-process__phase { grid-template-columns: 1fr; gap: 28px; } .p-process__steps { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .p-process__steps { grid-template-columns: 1fr; } }

  /* ---------- services: works (app / web) ---------- */
  .p-swworks__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-bottom: 48px; }
  .p-swworks__head .c-section-heading { margin-bottom: 0; }
  .p-swworks__head .c-section-heading__title { font-size: clamp(30px, 4vw, 48px); }
  .p-swworks__lead { font-size: 15px; line-height: 1.9; color: var(--c-ink-sub); max-width: 440px; }
  .p-swworks__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .p-swworks__card { display: flex; flex-direction: column; }
  .p-swworks__media { position: relative; display: block; height: 180px; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 18px; }
  .p-swworks__media.-app { background: linear-gradient(140deg, #F1F3F4, #E8EAED); }
  .p-swworks__media.-web { background: linear-gradient(140deg, var(--c-blue-tint), #D2E3FC); }
  .p-swworks__media::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(66,133,244,.10) 1px, transparent 1px); background-size: 24px 24px; }
  .p-swworks__media.-app::after { content: ''; position: absolute; width: 96px; height: 96px; border-radius: 50%; background: rgba(66,133,244,.16); top: -18px; right: -10px; }
  .p-swworks__media.-web::after { content: ''; position: absolute; width: 62px; height: 62px; border: 1.5px solid rgba(26,115,232,.4); border-radius: 12px; bottom: 30px; left: 22px; transform: rotate(-12deg); }
  .p-swworks__media-label { position: absolute; left: 18px; bottom: 14px; z-index: 1; font-family: var(--font-en); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-sub); }
  .p-swworks__client { display: block; font-size: 12px; color: var(--c-ink-mute); margin-bottom: 6px; }
  .p-swworks__title { display: block; font-size: 16px; font-weight: 700; line-height: 1.5; }
  @media (max-width: 1024px) { .p-swworks__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .p-swworks__grid { grid-template-columns: 1fr; } }
}

/* ============================================================
   下層ページ（works / contact / recruit）
   _design-base/{works,contact,recruit}.html に準拠
   ============================================================ */
@layer components {
  /* 上下とも斜めクリップ（recruit ステートメント等） */
  .l-stack > section.is-clip-both:not(:first-child) {
    clip-path: polygon(0 0, 100% var(--clip), 100% 100%, 0 calc(100% - var(--clip)));
    overflow: hidden;
  }

  /* ---------- works: 一覧 ---------- */
  .p-workslist__bar { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-bottom: 40px; }
  .p-workslist__filters { display: flex; flex-wrap: wrap; gap: 10px; }
  .p-workslist__count { font-size: 14px; color: var(--c-ink-sub); }
  .p-workslist__count span { font-family: var(--font-en); font-weight: 700; color: var(--c-ink); }
  .p-workslist__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 36px; margin-bottom: 64px; }
  .p-workslist__empty { text-align: center; padding: 40px 0 60px; color: var(--c-ink-mute); font-size: 15px; }
  .p-workscard { display: block; }
  .p-workscard:hover { color: inherit; }
  .p-workscard:hover .p-workscard__title { color: var(--c-blue); }
  .p-workscard:hover .p-workscard__img { transform: scale(1.04); }
  .p-workscard__media { position: relative; display: block; height: 220px; border-radius: var(--radius-md); overflow: hidden; background: linear-gradient(140deg, #F1F3F4, #E8EAED); margin-bottom: 20px; }
  .p-workscard__img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
  .p-workscard__visual { position: absolute; inset: 0; background-image: radial-gradient(rgba(66,133,244,.10) 1px, transparent 1px); background-size: 26px 26px; }
  .p-workscard__visual::before { content: ''; position: absolute; width: 128px; height: 128px; border-radius: 50%; background: rgba(66,133,244,.16); top: -24px; right: -12px; }
  .p-workscard__visual::after { content: ''; position: absolute; width: 60px; height: 60px; border: 1.5px solid rgba(26,115,232,.4); border-radius: 12px; bottom: 36px; left: 26px; transform: rotate(-12deg); }
  .p-workscard__meta { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
  .p-workscard__cat { font-size: 12px; font-weight: 600; color: var(--c-blue); }
  .p-workscard__sep { width: 12px; height: 1px; background: var(--c-line-strong); }
  .p-workscard__client { font-size: 12px; color: var(--c-ink-mute); }
  .p-workscard__title { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.005em; line-height: 1.5; }
  @media (max-width: 900px) { .p-workslist__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .p-workslist__grid { grid-template-columns: 1fr; } }

  /* ---------- works: 機能開発実績 ---------- */
  .p-features__lead { font-size: 16px; line-height: 1.95; color: var(--c-ink-sub); max-width: 720px; margin-bottom: 72px; }
  .p-features__groups { display: flex; flex-direction: column; gap: 64px; }
  .p-features__group-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 32px; padding-bottom: 18px; border-bottom: 2px solid var(--c-ink); }
  .p-features__group-en { font-family: var(--font-en); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-blue); font-weight: 600; }
  .p-features__group-cat { font-size: 22px; font-weight: 700; }
  .p-features__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 32px; }
  .p-features__item { border-top: 1px solid var(--c-line); padding-top: 18px; }
  .p-features__item-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
  .p-features__item-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-blue); flex: none; }
  .p-features__item-name { font-size: 15px; font-weight: 700; }
  .p-features__item-desc { font-size: 13px; line-height: 1.75; color: var(--c-ink-sub); padding-left: 16px; }
  @media (max-width: 900px) { .p-features__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .p-features__grid { grid-template-columns: 1fr; } }

  /* ---------- contact ---------- */
  .p-contactbody__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
  .p-contactbody__info { position: sticky; top: calc(var(--header-h) + 32px); }
  .p-contactbody__title { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -.02em; line-height: 1.4; margin-bottom: 22px; }
  .p-contactbody__lead { font-size: 15px; line-height: 1.95; color: var(--c-ink-sub); margin-bottom: 40px; }
  .p-contactbody__tel { background: #fff; border: 1px solid var(--c-line); border-radius: 18px; padding: 32px; margin-bottom: 20px; }
  .p-contactbody__tel-label { font-size: 13px; color: var(--c-ink-mute); margin-bottom: 10px; }
  .p-contactbody__tel-num { font-family: var(--font-en); font-size: clamp(28px, 4vw, 36px); font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
  .p-contactbody__tel-num a:hover { color: var(--c-blue); }
  .p-contactbody__tel-hours { font-size: 13px; color: var(--c-ink-mute); }
  .p-contactbody__offices { background: #fff; border: 1px solid var(--c-line); border-radius: 18px; padding: 32px; }
  .p-contactbody__offices-en { font-family: var(--font-en); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-blue); margin-bottom: 20px; }
  .p-contactbody__office { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--c-line); }
  .p-contactbody__office-en { font-family: var(--font-en); font-size: 11px; letter-spacing: .12em; color: var(--c-blue); width: 64px; flex: none; padding-top: 3px; }
  .p-contactbody__office-body { display: block; }
  .p-contactbody__office-ja { display: block; font-size: 14px; font-weight: 700; margin-bottom: 3px; }
  .p-contactbody__office-addr { display: block; font-size: 12px; line-height: 1.7; color: var(--c-ink-sub); }
  .p-contactbody__card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 48px); }
  .p-contactbody__fallback { font-size: 15px; line-height: 1.95; color: var(--c-ink-sub); }
  @media (max-width: 920px) { .p-contactbody__grid { grid-template-columns: 1fr; gap: 40px; } .p-contactbody__info { position: static; } }

  /* ---------- recruit: statement ---------- */
  .p-statement { position: relative; }
  .p-statement__bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(640px 460px at 88% 10%, rgba(66,133,244,.16), rgba(248,249,250,0) 60%), radial-gradient(rgba(66,133,244,.08) 1px, transparent 1px); background-size: auto, 34px 34px; }
  .p-statement .l-section { position: relative; }
  .p-statement__title { font-size: clamp(30px, 4.4vw, 52px); font-weight: 700; letter-spacing: -.02em; line-height: 1.45; margin-bottom: 40px; max-width: 980px; }
  .p-statement__title span { color: var(--c-blue); }
  .p-statement__lead { font-size: 17px; line-height: 2.1; color: var(--c-ink-sub); max-width: 760px; }
  .p-statement__links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 48px; }

  /* ---------- recruit: perks + data ---------- */
  .p-perks__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-bottom: 80px; }
  .p-perks__card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-md); padding: 30px 26px; min-height: 200px; display: flex; flex-direction: column; }
  .p-perks__no { font-family: var(--font-en); font-size: 44px; font-weight: 700; line-height: .85; letter-spacing: -.04em; margin-bottom: 24px; }
  .p-perks__text { font-size: 16px; font-weight: 700; line-height: 1.6; }
  @media (max-width: 1024px) { .p-perks__grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 620px) { .p-perks__grid { grid-template-columns: repeat(2, 1fr); } .p-perks__card { min-height: 0; } }

  .p-rstats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .p-rstats__card { background: #fff; border: 1px solid var(--c-line); border-radius: 18px; padding: 40px; }
  .p-rstats__label { font-family: var(--font-en); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink-mute); margin-bottom: 24px; }
  .p-rstats__bar { display: flex; height: 56px; border-radius: 10px; overflow: hidden; margin-bottom: 18px; }
  .p-rstats__bar-male, .p-rstats__bar-female { display: flex; align-items: center; padding-left: 18px; color: #fff; font-family: var(--font-en); font-weight: 700; font-size: 20px; }
  .p-rstats__bar-male { width: 58%; background: var(--c-blue); }
  .p-rstats__bar-female { width: 42%; background: var(--c-ink); }
  .p-rstats__legend { display: flex; gap: 24px; font-size: 13px; color: var(--c-ink-sub); }
  .p-rstats__legend > span { display: flex; align-items: center; gap: 8px; }
  .p-rstats__chip { width: 10px; height: 10px; border-radius: 3px; }
  .p-rstats__chip.-male { background: var(--c-blue); }
  .p-rstats__chip.-female { background: var(--c-ink); }
  .p-rstats__ages { display: flex; flex-direction: column; gap: 14px; }
  .p-rstats__age { display: flex; align-items: center; gap: 14px; }
  .p-rstats__age-label { width: 42px; flex: none; font-size: 13px; font-weight: 600; }
  .p-rstats__age-track { flex: 1; height: 14px; background: #F1F3F4; border-radius: 7px; overflow: hidden; }
  .p-rstats__age-fill { display: block; height: 100%; border-radius: 7px; }
  .p-rstats__age-pct { width: 42px; flex: none; text-align: right; font-family: var(--font-en); font-size: 14px; font-weight: 600; }
  @media (max-width: 760px) { .p-rstats { grid-template-columns: 1fr; } }

  /* ---------- recruit: voices ---------- */
  .p-voices__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .p-voices__card { background: var(--c-offwhite); border-radius: var(--radius-lg); padding: 44px; }
  .p-voices__quote { display: block; font-family: var(--font-en); font-size: 64px; font-weight: 700; color: var(--c-blue-pale); line-height: .6; margin-bottom: 20px; }
  .p-voices__body { font-size: 15.5px; line-height: 2.05; color: #3C4043; margin-bottom: 28px; }
  .p-voices__who { display: flex; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid var(--c-line); }
  .p-voices__avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; }
  .p-voices__who-name { font-size: 15px; font-weight: 700; }
  @media (max-width: 760px) { .p-voices__grid { grid-template-columns: 1fr; } }

  /* ---------- recruit: remote strength ---------- */
  .p-remote__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .p-remote__title { font-size: clamp(26px, 3.2vw, 40px); font-weight: 700; letter-spacing: -.02em; line-height: 1.55; margin-bottom: 28px; }
  .p-remote__lead { font-size: 16px; line-height: 2; color: var(--c-ink-sub); }
  .p-remote__visual { position: relative; height: 360px; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(140deg, var(--c-blue-tint), #D2E3FC); }
  .p-remote__visual::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(26,115,232,.12) 1px, transparent 1px); background-size: 30px 30px; }
  .p-remote__visual::after { content: ''; position: absolute; width: 160px; height: 160px; border-radius: 50%; background: rgba(26,115,232,.18); top: -30px; right: -20px; }
  .p-remote__visual-label { position: absolute; left: 32px; bottom: 26px; z-index: 1; font-family: var(--font-en); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-sub); }
  @media (max-width: 860px) { .p-remote__grid { grid-template-columns: 1fr; gap: 36px; } .p-remote__visual { height: 280px; } }

  /* ---------- recruit: members（p-leader を流用） ---------- */
  .p-members__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .p-members__grid .p-leader__photo { height: 240px; }
  .p-members__grid .p-leader__photo-img { object-position: 50% 28%; }
  .p-members__grid .p-leader__role { min-height: 40px; padding-top: 22px; }
  @media (max-width: 900px) { .p-members__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .p-members__grid { grid-template-columns: 1fr; } }

  /* ---------- recruit: jobs ---------- */
  .p-jobs__list { display: flex; flex-direction: column; gap: 20px; }
  .p-jobs__group { background: #fff; border: 1px solid var(--c-line); border-radius: 18px; padding: 40px 44px; display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; }
  .p-jobs__cat-name { font-size: 24px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 14px; }
  .p-jobs__types { display: flex; flex-wrap: wrap; gap: 8px; }
  .p-jobs__type { font-size: 12px; font-weight: 500; color: var(--c-ink-sub); background: #F1F3F4; border-radius: 999px; padding: 6px 14px; }
  .p-jobs__roles { display: flex; flex-direction: column; }
  .p-jobs__role { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--c-line); }
  .p-jobs__role-name { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; }
  .p-jobs__role-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-blue); flex: none; }
  .p-jobs__role-link { font-family: var(--font-en); font-size: 13px; font-weight: 600; color: var(--c-blue); white-space: nowrap; }
  @media (max-width: 760px) { .p-jobs__group { grid-template-columns: 1fr; gap: 24px; } }

  /* ---------- recruit: CTA（青グラデ） ---------- */
  .p-cta-join { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--c-blue-grad-from), var(--c-blue-grad-to)); }
  .p-cta-join__bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(620px 440px at 50% 0%, rgba(255,255,255,.16), rgba(26,115,232,0) 60%); }
  .p-cta-join__inner { position: relative; text-align: center; }
  .p-cta-join__eyebrow { justify-content: center; }
  .p-cta-join__eyebrow .c-eyebrow__line { background: rgba(255,255,255,.6); }
  .p-cta-join__eyebrow .c-eyebrow__label { color: #D2E3FC; }
  .p-cta-join__title { font-size: clamp(30px, 4.4vw, 52px); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; color: #fff; margin-bottom: 22px; }
  .p-cta-join__lead { font-size: 16px; line-height: 1.95; color: var(--c-blue-tint); max-width: 600px; margin: 0 auto 40px; }
  .p-cta-join__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; }
  .p-cta-join__primary { color: var(--c-blue); background: #fff; }
  .p-cta-join__primary:hover { color: var(--c-blue); background: #fff; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
  .p-cta-join__ghost { color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.45); }
  .p-cta-join__ghost:hover { color: #fff; background: rgba(255,255,255,.10); }
}

/* ============================================================
   下層ページ（flutter / go / freelance / rights / 404）
   _design-base/{flutter,go,freelance,rights,404}.html に準拠
   ============================================================ */
@keyframes edaFloat { 0%, 100% { transform: translateY(0) rotate(15deg); } 50% { transform: translateY(-14px) rotate(15deg); } }
@keyframes edaFloat2 { 0%, 100% { transform: translateY(0) rotate(-12deg); } 50% { transform: translateY(-10px) rotate(-12deg); } }
@keyframes edaRise { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: no-preference) {
  .p-subhero__shape--1, .p-error__shape--1 { animation: edaFloat 7s ease-in-out infinite; }
  .p-subhero__shape--2, .p-error__shape--2 { animation: edaFloat2 6s ease-in-out infinite; }
}

@layer components {
  /* 下層ヒーローの制定日メタ（rights） */
  .p-subhero__est { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
  .p-subhero__est-en { font-family: var(--font-en); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-mute); }
  .p-subhero__est-val { font-size: 14px; font-weight: 500; color: var(--c-ink-sub); }

  /* ---------- flutter/go/freelance: キーメッセージ ---------- */
  .p-keymsg { position: relative; }
  .p-keymsg__bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(680px 480px at 90% 8%, rgba(66,133,244,.14), rgba(248,249,250,0) 60%), radial-gradient(rgba(66,133,244,.08) 1px, transparent 1px); background-size: auto, 34px 34px; }
  .p-keymsg .l-section { position: relative; }
  .p-keymsg__lead { font-size: 18px; line-height: 1.95; color: var(--c-ink-sub); max-width: 760px; margin-bottom: 72px; }
  .p-keymsg__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .p-keymsg__card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 44px 40px; }
  .p-keymsg__card::before { content: ''; position: absolute; width: 160px; height: 160px; border-radius: 50%; background: rgba(66,133,244,.10); top: -34px; right: -28px; }
  .p-keymsg__card.-primary { background: linear-gradient(150deg, var(--c-blue-grad-from), var(--c-blue-grad-to)); border-color: transparent; }
  .p-keymsg__card.-primary::before { background: rgba(255,255,255,.10); }
  .p-keymsg__big { position: relative; font-family: var(--font-en); font-size: 56px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--c-blue); margin-bottom: 14px; }
  .p-keymsg__card.-primary .p-keymsg__big { color: #fff; }
  .p-keymsg__card-title { position: relative; font-size: 18px; font-weight: 700; margin-bottom: 8px; }
  .p-keymsg__card.-primary .p-keymsg__card-title { color: #fff; }
  .p-keymsg__card-desc { position: relative; font-size: 14px; line-height: 1.9; color: var(--c-ink-sub); }
  .p-keymsg__card.-primary .p-keymsg__card-desc { color: var(--c-blue-tint); }
  @media (max-width: 860px) { .p-keymsg__grid { grid-template-columns: 1fr; } }

  /* ---------- flutter/go: ◯◯とは（2カラム＋ビジュアル） ---------- */
  .p-whatis__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: center; }
  .p-whatis__lead { font-size: 16px; line-height: 2; color: var(--c-ink-sub); }
  .p-whatis__visual { position: relative; height: 360px; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(150deg, var(--c-blue-tint), #D2E3FC); }
  .p-whatis__visual::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(26,115,232,.12) 1px, transparent 1px); background-size: 28px 28px; }
  .p-whatis__emblem { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; background: var(--c-blue); border-radius: 24px; transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 24px 50px -18px rgba(26,115,232,.5); }
  .p-whatis__bars { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: flex-end; gap: 12px; height: 120px; }
  .p-whatis__bar { width: 26px; border-radius: 8px; }
  .p-whatis__bar:nth-child(1) { height: 54px; background: var(--c-blue-pale); }
  .p-whatis__bar:nth-child(2) { height: 86px; background: var(--c-blue-sub); }
  .p-whatis__bar:nth-child(3) { height: 120px; background: var(--c-blue); box-shadow: 0 16px 36px -14px rgba(26,115,232,.5); }
  .p-whatis__chip { position: absolute; font-family: var(--font-en); font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--c-blue-grad-to); background: #fff; border-radius: 999px; padding: 8px 16px; box-shadow: 0 6px 16px -8px rgba(26,115,232,.4); }
  @media (max-width: 860px) { .p-whatis__grid { grid-template-columns: 1fr; gap: 40px; } .p-whatis__visual { height: 300px; } }

  /* ---------- flutter/go/freelance: メリット ---------- */
  .p-merits__list { display: flex; flex-direction: column; gap: 20px; }
  .p-merits__row { display: grid; grid-template-columns: 280px 1fr; gap: 48px; background: #fff; border: 1px solid var(--c-line); border-radius: 20px; padding: 48px 52px; align-items: start; }
  .p-merits__label { font-family: var(--font-en); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-blue); font-weight: 600; margin-bottom: 14px; }
  .p-merits__title { font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.45; }
  .p-merits__desc { font-size: 16px; line-height: 2; color: var(--c-ink-sub); padding-left: 24px; border-left: 1px solid var(--c-line); }
  @media (max-width: 860px) { .p-merits__row { grid-template-columns: 1fr; gap: 24px; padding: 36px; } .p-merits__desc { padding-left: 0; border-left: none; } }

  /* ---------- flutter/go: EDAの強み ---------- */
  .p-strengths__lead { font-size: 16px; line-height: 1.95; color: var(--c-ink-sub); max-width: 760px; margin-bottom: 64px; }
  .p-strengths__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .p-strengths__card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--c-line); border-radius: 20px; padding: 44px 40px; }
  .p-strengths__card::before { content: ''; position: absolute; width: 130px; height: 130px; border-radius: 50%; background: rgba(66,133,244,.08); top: -26px; right: -22px; }
  .p-strengths__no { position: relative; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: var(--c-blue-tint); font-family: var(--font-en); font-size: 20px; font-weight: 700; color: var(--c-blue); margin-bottom: 24px; }
  .p-strengths__title { position: relative; font-size: 21px; font-weight: 700; letter-spacing: -.01em; line-height: 1.45; margin-bottom: 14px; }
  .p-strengths__desc { position: relative; font-size: 14px; line-height: 1.95; color: var(--c-ink-sub); }
  @media (max-width: 860px) { .p-strengths__grid { grid-template-columns: 1fr; } }

  /* ---------- flutter: 開発実績（Pick Up + グリッド） ---------- */
  .p-techfeat { display: grid; grid-template-columns: 1.15fr 1fr; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 56px; }
  .p-techfeat__body { padding: clamp(36px, 4vw, 52px) clamp(32px, 4vw, 56px); }
  .p-techfeat__badge { display: inline-flex; align-items: center; gap: 8px; background: var(--c-blue); border-radius: 999px; padding: 7px 16px; margin-bottom: 26px; font-family: var(--font-en); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
  .p-techfeat__badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
  .p-techfeat__title { font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -.015em; margin-bottom: 14px; }
  .p-techfeat__os { display: flex; gap: 8px; margin-bottom: 22px; }
  .p-techfeat__os-tag { font-size: 12px; font-weight: 600; color: var(--c-blue-grad-to); background: var(--c-blue-tint); border-radius: 6px; padding: 5px 12px; }
  .p-techfeat__desc { font-size: 15px; line-height: 1.95; color: var(--c-ink-sub); margin-bottom: 34px; }
  .p-techfeat__specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 32px; }
  .p-techfeat__spec-label { font-family: var(--font-en); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-mute); margin-bottom: 7px; }
  .p-techfeat__spec-value { font-size: 14px; font-weight: 500; line-height: 1.6; }
  .p-techfeat__visual { position: relative; overflow: hidden; min-height: 380px; background: linear-gradient(140deg, var(--c-blue-grad-from), var(--c-blue-grad-to)); }
  .p-techfeat__visual::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px); background-size: 26px 26px; }
  .p-techfeat__phone { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 150px; height: 300px; background: #fff; border-radius: 28px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.4); padding: 14px; display: block; }
  .p-techfeat__phone::before { content: ''; position: absolute; inset: 14px; border-radius: 16px; background: linear-gradient(160deg, var(--c-blue-tint), #D2E3FC); }
  .p-techfeat__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: var(--c-blue); }
  .p-techfeat__play::after { content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
  @media (max-width: 820px) { .p-techfeat { grid-template-columns: 1fr; } .p-techfeat__visual { min-height: 260px; order: -1; } }
  .p-techworks__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .p-techcard { display: flex; flex-direction: column; }
  .p-techcard__media { position: relative; display: block; height: 200px; border-radius: 16px; overflow: hidden; background: linear-gradient(140deg, #F1F3F4, #E8EAED); margin-bottom: 18px; }
  .p-techcard__media::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(66,133,244,.10) 1px, transparent 1px); background-size: 24px 24px; }
  .p-techcard__media::after { content: ''; position: absolute; width: 46px; height: 46px; background: var(--c-blue); border-radius: 13px; bottom: 54px; left: 26px; transform: rotate(12deg); box-shadow: 0 12px 24px -10px rgba(26,115,232,.5); }
  .p-techcard__media-label { position: absolute; left: 20px; bottom: 16px; font-family: var(--font-en); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-faint); }
  .p-techcard__os { display: flex; gap: 6px; margin-bottom: 10px; }
  .p-techcard__os-tag { font-size: 11px; font-weight: 600; color: var(--c-blue-grad-to); background: var(--c-blue-tint); border-radius: 5px; padding: 3px 9px; }
  .p-techcard__title { display: block; font-size: 17px; font-weight: 700; line-height: 1.5; }
  @media (max-width: 900px) { .p-techworks__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .p-techworks__grid { grid-template-columns: 1fr; } }

  /* ---------- freelance: 言語 ---------- */
  .p-langs__list { display: flex; flex-wrap: wrap; gap: 12px; }
  .p-langs__chip { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--c-ink); background: #fff; border: 1px solid var(--c-line); border-radius: 999px; padding: 12px 22px; }
  .p-langs__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-blue); flex: none; }

  /* ---------- freelance: 実績 ---------- */
  .p-flworks__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
  .p-flworks__card { display: flex; flex-direction: column; }
  .p-flworks__media { position: relative; display: block; height: 140px; border-radius: var(--radius-md); overflow: hidden; background: linear-gradient(140deg, var(--c-blue-tint), #D2E3FC); margin-bottom: 14px; }
  .p-flworks__media::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(26,115,232,.12) 1px, transparent 1px); background-size: 22px 22px; }
  .p-flworks__media::after { content: ''; position: absolute; width: 40px; height: 40px; background: var(--c-blue); border-radius: 11px; bottom: 18px; left: 18px; transform: rotate(12deg); }
  .p-flworks__title { display: block; font-size: 15px; font-weight: 700; line-height: 1.5; }
  @media (max-width: 900px) { .p-flworks__grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 560px) { .p-flworks__grid { grid-template-columns: repeat(2, 1fr); } }

  /* ---------- freelance: 募集要項 ---------- */
  .p-reqs__table { border-top: 2px solid var(--c-ink); }
  .p-reqs__row { display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding: 30px 0; border-bottom: 1px solid var(--c-line); }
  .p-reqs__key { display: flex; flex-direction: column; gap: 6px; }
  .p-reqs__key-en { font-family: var(--font-en); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-blue); }
  .p-reqs__key-ja { font-size: 16px; font-weight: 700; }
  .p-reqs__val { font-size: 15px; line-height: 1.95; color: #3C4043; }
  @media (max-width: 700px) { .p-reqs__row { grid-template-columns: 1fr; gap: 12px; } }

  /* ---------- rights: イントロ ---------- */
  .p-rintro { position: relative; }
  .p-rintro__bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(640px 440px at 90% 10%, rgba(66,133,244,.12), rgba(248,249,250,0) 60%), radial-gradient(rgba(66,133,244,.07) 1px, transparent 1px); background-size: auto, 34px 34px; }
  .p-rintro .l-section { position: relative; }
  .p-rintro__title { font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; letter-spacing: -.02em; line-height: 1.55; max-width: 920px; margin-bottom: 32px; }
  .p-rintro__lead { font-size: 17px; line-height: 2.05; color: var(--c-ink-sub); max-width: 760px; }

  /* ---------- rights: 8つの方針 ---------- */
  .p-rprinciples__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .p-rprinciple { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--c-line); border-radius: 20px; padding: 42px 40px; }
  .p-rprinciple.is-wide { grid-column: 1 / -1; }
  .p-rprinciple::before { content: ''; position: absolute; width: 140px; height: 140px; border-radius: 50%; background: rgba(66,133,244,.07); top: -28px; right: -24px; }
  .p-rprinciple__head { position: relative; display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
  .p-rprinciple__no { font-family: var(--font-en); font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--c-blue); flex: none; }
  .p-rprinciple__line { width: 20px; height: 1px; background: var(--c-line-strong); flex: none; }
  .p-rprinciple__title { font-size: 21px; font-weight: 700; letter-spacing: -.01em; line-height: 1.45; }
  .p-rprinciple__text { position: relative; font-size: 15px; line-height: 1.95; color: var(--c-ink-sub); }
  .p-rprinciples__enact { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; background: var(--c-offwhite); border: 1px solid var(--c-line); border-left: 3px solid var(--c-blue); border-radius: 16px; padding: 30px 34px; margin-top: 24px; }
  .p-renact__title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
  .p-renact__date { font-size: 15px; color: var(--c-ink-sub); }
  @media (max-width: 760px) { .p-rprinciples__grid { grid-template-columns: 1fr; } .p-rprinciple.is-wide { grid-column: auto; } }

  /* ---------- privacy: 本文 ---------- */
  .p-privacy .c-prose h2 { font-size: 22px; letter-spacing: -.01em; }
  .p-privacy .c-prose ul { list-style: none; padding-left: 0; }
  .p-privacy .c-prose ul li { position: relative; padding-left: 1.2em; }
  .p-privacy .c-prose ul li::before { content: ''; position: absolute; left: 0; top: .78em; width: 7px; height: 7px; border-radius: 2px; background: var(--c-blue-pale); }
  .p-privacy .c-prose ul ul { margin-top: .6em; }
  .p-privacy .c-prose ul ul li::before { background: var(--c-line-strong); }
  .p-privacy .c-prose ol { padding-left: 1.6em; }
  .p-privacy .c-prose ol > li + li { margin-top: .8em; }
  .p-privacy__basics { counter-reset: eda-basics; background: var(--c-offwhite); border: 1px solid var(--c-line); border-left: 3px solid var(--c-blue); border-radius: 16px; padding: 30px 34px 30px 60px; }
  .p-privacy__note { background: #fff; border: 1px solid var(--c-line); border-radius: 14px; padding: 24px 28px; font-size: 15px; line-height: 1.9; color: var(--c-ink-sub); }
  .p-privacy__note > p + p { margin-top: 1em; }
  .p-privacy__end { text-align: right; color: var(--c-ink-sub); }
  @media (max-width: 600px) { .p-privacy__basics { padding: 22px 20px 22px 40px; } .p-privacy__note { padding: 20px 18px; } }

  /* ---------- 404 ---------- */
  .p-error { position: relative; overflow: hidden; background: var(--c-white); }
  .p-error__bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(760px 540px at 88% 12%, rgba(66,133,244,.15), rgba(255,255,255,0) 62%), radial-gradient(560px 440px at 4% 96%, rgba(26,115,232,.08), rgba(255,255,255,0) 60%), radial-gradient(rgba(66,133,244,.09) 1px, transparent 1px); background-size: auto, auto, 34px 34px; }
  .p-error__shape { position: absolute; display: block; }
  .p-error__shape--1 { top: 90px; right: 78px; width: 96px; height: 96px; border: 2px solid var(--c-blue-sub); border-radius: 18px; transform: rotate(15deg); }
  .p-error__shape--2 { top: 150px; right: 240px; width: 54px; height: 54px; background: var(--c-blue); border-radius: 11px; transform: rotate(-12deg); }
  .p-error__shape--3 { top: 96px; right: 262px; width: 38px; height: 38px; background: var(--c-blue-sub); border-radius: 50%; }
  .p-error__shape--4 { bottom: 90px; left: 70px; width: 28px; height: 28px; background: var(--c-ink); border-radius: 7px; transform: rotate(20deg); }
  @media (max-width: 1024px) { .p-error__shape { display: none; } }
  .p-error__inner { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: center; padding-block: clamp(64px, 8vw, 96px) clamp(80px, 10vw, 110px); }
  .p-error__code { font-family: var(--font-en); font-weight: 700; font-size: clamp(96px, 18vw, 188px); line-height: .86; letter-spacing: -.05em; color: var(--c-ink); margin: 8px 0 32px; }
  .p-error__code span { color: var(--c-blue); }
  .p-error__title { font-size: clamp(24px, 3.2vw, 34px); font-weight: 700; letter-spacing: -.015em; line-height: 1.4; margin-bottom: 20px; }
  .p-error__lead { font-size: 16px; line-height: 2; color: var(--c-ink-sub); max-width: 520px; margin-bottom: 14px; }
  .p-error__route { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-en); font-size: 13px; color: var(--c-ink-mute); margin-bottom: 44px; }
  .p-error__route-path { background: var(--c-offwhite); border: 1px solid var(--c-line); border-radius: 7px; padding: 5px 11px; color: var(--c-blue); font-weight: 500; }
  .p-error__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
  .p-error__ghost { color: var(--c-ink); background: transparent; }
  .p-error__ghost:hover { color: var(--c-blue); background: transparent; }
  .p-error__panel { position: relative; background: #fff; border: 1px solid var(--c-line); border-radius: 18px; box-shadow: 0 24px 60px -28px rgba(26,115,232,.28), 0 4px 14px -8px rgba(32,33,36,.10); overflow: hidden; }
  .p-error__panel-head { display: flex; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--c-line); background: var(--c-offwhite); }
  .p-error__panel-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-blue); }
  .p-error__panel-name { font-family: var(--font-en); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
  .p-error__panel-sub { font-size: 12px; color: var(--c-ink-mute); }
  .p-error__panel-status { margin-left: auto; font-family: var(--font-en); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-blue); font-weight: 600; }
  .p-error__trace { padding: 26px 24px 28px; }
  .p-error__step { display: flex; gap: 14px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid #F1F3F4; animation: edaRise .5s ease both; }
  .p-error__step-no { font-family: var(--font-en); font-size: 11px; font-weight: 600; color: var(--c-ink-faint); width: 24px; flex: none; padding-top: 3px; }
  .p-error__step-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; }
  .p-error__step-body { flex: 1; }
  .p-error__step-label { display: block; font-size: 14px; font-weight: 500; line-height: 1.55; }
  .p-error__step-meta { display: block; font-family: var(--font-en); font-size: 12px; color: var(--c-ink-mute); margin-top: 3px; }
  .p-error__step-tag { font-family: var(--font-en); font-size: 11px; letter-spacing: .06em; flex: none; padding-top: 3px; }
  .p-error__suggest { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--c-line); }
  .p-error__suggest-label { font-family: var(--font-en); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink-mute); margin-bottom: 14px; }
  .p-error__suggest-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 10px; background: #fff; margin-bottom: 8px; transition: border-color .2s var(--ease), background .2s var(--ease); }
  .p-error__suggest-item:hover { border-color: var(--c-blue-pale); background: var(--c-offwhite); color: inherit; }
  .p-error__suggest-en { font-family: var(--font-en); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-blue); font-weight: 600; width: 78px; flex: none; }
  .p-error__suggest-ja { font-size: 14px; font-weight: 500; flex: 1; }
  .p-error__suggest-arrow { font-family: var(--font-en); font-size: 15px; color: var(--c-ink-faint); }
  @media (max-width: 860px) { .p-error__inner { grid-template-columns: 1fr; gap: 40px; } }
}

@layer components {
  /* ---------- 詳細ページ共通（works / column / blog） ---------- */
  .p-detail { max-width: 820px; margin-inline: auto; }
  .p-detail__head { margin-bottom: 40px; }
  .p-detail__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-family: var(--font-en); font-size: 13px; color: var(--c-ink-mute); margin-bottom: 18px; }
  .p-detail__cat { font-weight: 600; color: var(--c-blue); letter-spacing: .04em; }
  .p-detail__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--c-ink-faint); flex: none; }
  .p-detail__updated { color: var(--c-ink-mute); }
  .p-detail__title { font-size: clamp(26px, 4vw, 38px); font-weight: 700; line-height: 1.4; letter-spacing: -.01em; color: var(--c-ink); }
  .p-detail__lead { margin-top: 18px; font-size: 16px; line-height: 1.9; color: var(--c-ink-sub); }
  .p-detail__thumb { margin-top: 28px; }
  .p-detail__thumb img { width: 100%; height: auto; border-radius: var(--radius-lg); }
  .p-detail__body { margin-top: 8px; }
  .p-detail__back { margin-top: 56px; text-align: center; }

  /* works 固有メタ（バッジ・アイコン・クライアント・OS） */
  .p-worksdetail__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
  .p-worksdetail__type,
  .p-worksdetail__cat { display: inline-block; font-size: 12px; font-weight: 600; line-height: 1; padding: 7px 14px; border-radius: 999px; }
  .p-worksdetail__type { color: #fff; background: var(--c-blue); }
  .p-worksdetail__cat { color: var(--c-ink-sub); background: var(--c-offwhite); border: 1px solid var(--c-line); }
  .p-worksdetail__profile { display: flex; align-items: center; gap: 22px; }
  .p-worksdetail__profile.-no-icon { gap: 0; }
  .p-worksdetail__icon { flex: none; width: 88px; height: 88px; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); background: #fff; }
  .p-worksdetail__icon img { width: 100%; height: 100%; object-fit: cover; }
  .p-worksdetail__client { font-size: 14px; color: var(--c-ink-sub); margin-bottom: 6px; }
  .p-worksdetail__os { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .p-worksdetail__os-label { font-family: var(--font-en); font-size: 12px; font-weight: 500; color: var(--c-blue); background: var(--c-blue-tint); border-radius: 6px; padding: 4px 10px; }
  @media (max-width: 600px) {
    .p-worksdetail__profile { flex-direction: column; align-items: flex-start; gap: 16px; }
    .p-worksdetail__icon { width: 72px; height: 72px; }
  }

  /* 詳細ページ末尾に埋め込むフォーム帯（footer.php / footer-recruit.php とも共通） */
  .footer-contact { padding: clamp(48px, 7vw, 88px) 24px; background: var(--c-offwhite); }
  .footer-contact .p-contact__form { max-width: 720px; margin-inline: auto; }
}