/*
 * ガジェットレシピ 企業サイトの CSS。
 *
 * ビルドを通さない(Concierge #2)。このファイルがそのまま配信される。
 * フレームワークは使わない(Concierge #3)。リセットだけ vendor/ に同梱している。
 *
 * 読み込みは <link rel="stylesheet" href="/css/site.css"> の1行だけ。
 *
 * 層の順(後ろほど強い):
 *   reset       modern-normalize(同梱。直さない)
 *   base        色・文字・余白の変数と、要素そのものの見た目
 *   layout      並べ方だけを決める部品(container / stack / cluster / grid)
 *   components  サイトの部品(ヘッダ・カード・ボタン・会社概要の表 など)
 *   utilities   1つの性質だけを足す補助
 *
 * 見た目を変えるときは、まず :root の変数を直す。
 * 色はロゴ(回路図の G)の基板グリーンとコーラルから取っている。
 */

@import url("vendor/modern-normalize.css") layer(reset);

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

/* ------------------------------------------------------------------ */
/* base                                                                */
/* ------------------------------------------------------------------ */

@layer base {
  :root {
    color-scheme: light;

    /* 紙とインク */
    --color-paper: #f7f6f2;
    --color-paper-muted: #eeede6;
    --color-surface: #ffffff;
    --color-ink: #16201c;
    --color-ink-muted: #56615c;
    --color-line: #d9d8d0;

    /* 基板グリーン(ロゴの地)。リンク・主ボタン・見出しの印 */
    --color-brand: #176b52;
    --color-brand-deep: #0f4f3c;
    --color-brand-soft: #e3f0ea;

    /* コーラル(ロゴの端子)。飾りにだけ使う。白地の本文には --color-accent-ink を使う */
    --color-accent: #e7654c;
    --color-accent-ink: #b5412b;

    --color-focus: var(--color-accent-ink);

    /* 文字。Webフォントは読まず、OS標準の日本語フォントを使う */
    --font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
      "Noto Sans JP", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
    --text-display: clamp(2.25rem, 1.4rem + 4.2vw, 4.5rem);

    --leading-body: 1.85;
    --leading-heading: 1.35;
    --tracking-body: 0.02em;

    /* 余白 */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    --space-section: clamp(4rem, 3rem + 5vw, 7.5rem);

    /* 幅 */
    --width-page: 72rem;
    --width-text: 42rem;
    --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);

    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.25rem;

    --shadow-card: 0 1px 2px rgb(22 32 28 / 0.06), 0 8px 24px -12px rgb(22 32 28 / 0.18);

    --header-height: 4rem;
  }

  html {
    scroll-padding-top: calc(var(--header-height) + var(--space-md));
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* 狭い画面ではナビが2段目に回り、ヘッダが高くなる(components の .site-nav) */
  @media (max-width: 48rem) {
    html {
      scroll-padding-top: calc(var(--header-height) + 3.5rem);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  body {
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    letter-spacing: var(--tracking-body);
    line-break: strict;
    overflow-wrap: anywhere;
    -webkit-font-smoothing: antialiased;
  }

  h1,
  h2,
  h3,
  h4 {
    margin: 0;
    font-weight: 700;
    line-height: var(--leading-heading);
    letter-spacing: 0.01em;
    /* 日本語の見出しを文節で折り返す(対応しないブラウザでは無視される) */
    word-break: auto-phrase;
    text-wrap: balance;
  }

  h1 {
    font-size: var(--text-display);
    line-height: 1.2;
  }

  h2 {
    font-size: var(--text-2xl);
  }

  h3 {
    font-size: var(--text-xl);
  }

  h4 {
    font-size: var(--text-lg);
  }

  p,
  ul,
  ol,
  dl,
  figure,
  blockquote {
    margin: 0;
  }

  p {
    text-wrap: pretty;
  }

  a {
    color: var(--color-brand);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;

    &:hover {
      color: var(--color-brand-deep);
      text-decoration-thickness: 2px;
    }
  }

  img,
  svg,
  video {
    display: block;
    max-width: 100%;
    height: auto;
  }

  code,
  kbd,
  samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  hr {
    margin: var(--space-xl) 0;
    border: 0;
    border-top: 1px solid var(--color-line);
  }

  :focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  ::selection {
    background: var(--color-brand-soft);
    color: var(--color-ink);
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

/* ------------------------------------------------------------------ */
/* layout — 並べ方だけ。色や枠は持たない                              */
/* ------------------------------------------------------------------ */

@layer layout {
  /* 中央寄せの本文幅 */
  .container {
    width: min(100% - 2 * var(--gutter), var(--width-page));
    margin-inline: auto;
  }

  .container--text {
    width: min(100% - 2 * var(--gutter), var(--width-text));
  }

  /* 縦に積む。間隔は --stack-space で変える */
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-space, var(--space-md));
  }

  .stack--lg {
    --stack-space: var(--space-xl);
  }

  .stack--sm {
    --stack-space: var(--space-xs);
  }

  /* 横に並べ、はみ出たら折り返す */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-space, var(--space-sm));
  }

  /* 幅に応じて列数が変わる格子。1列の最小幅は --grid-min */
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 18rem)), 1fr));
    gap: var(--grid-space, var(--space-lg));
  }

  /* 節の縦の余白 */
  .section {
    padding-block: var(--space-section);
  }
}

/* ------------------------------------------------------------------ */
/* components                                                          */
/* ------------------------------------------------------------------ */

@layer components {
  /* 本文へ飛ぶリンク。キーボードで最初に止まる */
  .skip-link {
    position: absolute;
    top: var(--space-xs);
    left: var(--space-xs);
    z-index: 100;
    padding: var(--space-xs) var(--space-md);
    background: var(--color-ink);
    color: var(--color-paper);
    border-radius: var(--radius-sm);
    transform: translateY(-200%);

    &:focus {
      transform: none;
    }
  }

  /* ---- ヘッダ ---------------------------------------------------- */
  /* JavaScript 無しで成り立つ。狭い画面ではナビが2段目に回り、横にスクロールする */

  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgb(247 246 242 / 0.92);
    border-bottom: 1px solid var(--color-line);
    backdrop-filter: saturate(1.4) blur(10px);
  }

  .site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: var(--space-lg);
    min-height: var(--header-height);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-ink);
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.04em;

    &:hover {
      color: var(--color-ink);
    }

    & img,
    & svg {
      width: 2rem;
      height: 2rem;
    }
  }

  .site-nav {
    & ul {
      display: flex;
      gap: var(--space-2xs);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    & a {
      display: block;
      padding: var(--space-xs) var(--space-sm);
      border-radius: var(--radius-sm);
      color: var(--color-ink);
      font-size: var(--text-sm);
      font-weight: 600;
      text-decoration: none;
      white-space: nowrap;

      &:hover {
        background: var(--color-paper-muted);
      }

      &[aria-current="page"] {
        color: var(--color-brand);
      }
    }
  }

  @media (max-width: 48rem) {
    .site-nav {
      order: 3;
      width: 100%;
      margin-inline: calc(-1 * var(--space-sm));
      overflow-x: auto;
      scrollbar-width: none;
    }

    .site-header__action {
      padding-block: var(--space-xs);
    }
  }

  /* ---- 理念(最上段) --------------------------------------------- */

  .hero {
    padding-block: clamp(5rem, 3rem + 9vw, 10rem) var(--space-section);
    border-bottom: 1px solid var(--color-line);
  }

  .hero__title {
    max-width: 16em;
  }

  .hero__lead {
    max-width: 36em;
    margin-top: var(--space-lg);
    color: var(--color-ink-muted);
    font-size: var(--text-lg);
  }

  /* ---- 下層ページの見出し(プライバシーポリシー・404) ------------- */

  .page-head {
    padding-block: clamp(3.5rem, 2.5rem + 5vw, 6rem) var(--space-xl);
    border-bottom: 1px solid var(--color-line);

    & h1 {
      font-size: var(--text-2xl);
    }

    & > .container > * + * {
      margin-top: var(--space-sm);
    }
  }

  /* ---- 節の見出し ------------------------------------------------ */

  .section--muted {
    background: var(--color-paper-muted);
  }

  .section__head {
    max-width: var(--width-text);
    margin-bottom: var(--space-xl);

    & > * + * {
      margin-top: var(--space-sm);
    }
  }

  .section__lead {
    color: var(--color-ink-muted);
  }

  /* 見出しの上の小さな札。ロゴの端子(丸)を印にしている */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-brand);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    &::before {
      content: "";
      width: 0.625rem;
      height: 0.625rem;
      border: 2px solid currentColor;
      border-radius: 50%;
      flex: none;
    }
  }

  /* ---- カード(事業・実績) --------------------------------------- */

  .card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
  }

  .card__label {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
  }

  .card__title {
    font-size: var(--text-xl);
  }

  /* 事業の「理念の中での役目」。本文と区別して前に置く */
  .card__role {
    padding-left: var(--space-sm);
    border-left: 3px solid var(--color-accent);
    font-weight: 600;
  }

  .card__body {
    color: var(--color-ink-muted);
  }

  /* 最後の要素(リンクなど)を下端にそろえる */
  .card__footer {
    margin-top: auto;
    padding-top: var(--space-sm);
  }

  /* カード全体を押せるようにする。カードの中の最初のリンクが対象 */
  .card--link {
    position: relative;
    transition: border-color 0.15s, box-shadow 0.15s;

    & a::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
    }

    &:hover {
      border-color: var(--color-brand);
      box-shadow: var(--shadow-card);
    }

    &:focus-within {
      outline: 3px solid var(--color-focus);
      outline-offset: 3px;

      & a:focus-visible {
        outline: none;
      }
    }
  }

  /* カードの上の画像枠。横長の画面はそのまま敷き、縦長(スマホ)は中央に収める */
  .card__media {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)) var(--space-xs);
    overflow: hidden;
    background: var(--color-paper-muted);
    border-bottom: 1px solid var(--color-line);
    border-radius: var(--radius-md) var(--radius-md) 0 0;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top;
    }
  }

  .card__media--portrait {
    position: relative;
    background: var(--color-brand-soft);

    /* 主要な機能を読み取れる大きさに拡大し、下側を枠内で切り取る。 */
    & img {
      position: absolute;
      top: var(--space-md);
      left: 50%;
      width: 62%;
      height: auto;
      transform: translateX(-50%);
      object-fit: contain;
      border-radius: var(--radius-sm) var(--radius-sm) 0 0;
      box-shadow: var(--shadow-card);
    }
  }

  .card__media--game img {
    top: auto;
    bottom: 0;
  }

  /* 画像の差し替え待ち。本番に出す前に実物の画面へ置き換える */
  .card__media--pending {
    padding: var(--space-md);
    background: repeating-linear-gradient(-45deg, var(--color-paper-muted) 0 10px, var(--color-paper) 10px 20px);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    text-align: center;
  }

  .card__icon {
    width: 3rem;
    height: 3rem;
    border-radius: 22%;
    border: 1px solid var(--color-line);
  }

  .card__head {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  /* 実績の区分の小見出し */
  .group-title {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    margin: var(--space-2xl) 0 var(--space-md);
    font-size: var(--text-lg);

    &:first-of-type {
      margin-top: 0;
    }

    & small {
      color: var(--color-ink-muted);
      font-size: var(--text-sm);
      font-weight: 400;
    }
  }

  /* ---- 事業の節(F-102) ------------------------------------------ */
  /* 文と画像を左右に並べ、節ごとに左右を入れ替える。狭い画面では縦に積む */

  .biz {
    padding-block: var(--space-section);
    border-top: 1px solid var(--color-line);
  }

  .biz__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: center;
  }

  @media (min-width: 56rem) {
    .biz__inner {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-2xl);
    }

    .biz--reverse .biz__figure {
      order: -1;
    }
  }

  .biz__text > * + * {
    margin-top: var(--space-md);
  }

  /* 事業の番号と名前。見出しの上に置く */
  .biz__name {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    color: var(--color-brand);
    font-weight: 700;

    & span {
      font-family: var(--font-mono);
      font-size: var(--text-2xl);
      line-height: 1;
      letter-spacing: 0;
    }
  }

  .biz__title {
    font-size: var(--text-2xl);
  }

  /* 理念のどちらの問いに答えているか */
  .biz__answer {
    display: inline-block;
    padding: var(--space-2xs) var(--space-sm);
    background: var(--color-brand-soft);
    border-radius: var(--radius-sm);
    color: var(--color-brand-deep);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .biz__lead {
    font-size: var(--text-lg);
  }

  /* 理念をどう形にしているかの要点。端子の丸を印にする */
  .biz__points {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;

    & li {
      position: relative;
      padding-left: 1.5rem;
      color: var(--color-ink-muted);

      &::before {
        content: "";
        position: absolute;
        top: 0.7em;
        left: 0.125rem;
        width: 0.625rem;
        height: 0.625rem;
        border: 2px solid var(--color-accent);
        border-radius: 50%;
      }
    }

    & strong {
      color: var(--color-ink);
    }
  }

  .biz__figure {
    margin: 0;

    & figcaption {
      margin-top: var(--space-xs);
      color: var(--color-ink-muted);
      font-size: var(--text-sm);
    }
  }

  /* 生成したイメージ画像の印(#19)。実物と取り違えさせない */
  .figure-note {
    display: inline-block;
    margin-right: var(--space-xs);
    padding: 0 var(--space-xs);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.75rem;
  }

  .figure-frame {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--color-paper-muted);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);

    & > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .figure-frame--pending {
    display: grid;
    place-items: center;
    padding: var(--space-lg);
    background: repeating-linear-gradient(-45deg, var(--color-paper-muted) 0 10px, var(--color-paper) 10px 20px);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    text-align: center;
  }

  /* 実物の写真を2×2で並べる */
  .photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs);

    & img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: var(--radius-md);
    }
  }

  /* スマホの画面を横に並べる */
  .device-row {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-lg) 0;
    overflow: hidden;
    background: var(--color-brand-soft);
    border-radius: var(--radius-lg);

    & img {
      width: min(40%, 13rem);
      border-radius: var(--radius-md) var(--radius-md) 0 0;
      box-shadow: var(--shadow-card);
    }

    & img:nth-child(2) {
      margin-bottom: -2rem;
    }
  }

  /* ---- 手順(AIコーディングの実践) ------------------------------- */
  /* 番号は回路の端子に見立てた丸。線でつないで流れを見せる */

  .steps {
    display: grid;
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
  }

  .steps__item {
    position: relative;
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    column-gap: var(--space-md);
    counter-increment: step;

    &::before {
      content: counter(step);
      display: grid;
      place-items: center;
      width: 2.5rem;
      height: 2.5rem;
      background: var(--color-surface);
      border: 2px solid var(--color-brand);
      border-radius: 50%;
      color: var(--color-brand);
      font-family: var(--font-mono);
      font-weight: 700;
    }

    &:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 2.5rem;
      bottom: calc(-1 * var(--space-lg));
      left: calc(1.25rem - 1px);
      border-left: 2px solid var(--color-line);
    }

    & > * {
      grid-column: 2;
    }

    & h3 {
      grid-row: 1;
      align-self: center;
      font-size: var(--text-lg);
    }

    & p {
      margin-top: var(--space-2xs);
      color: var(--color-ink-muted);
    }
  }

  /* ---- 理念の背景の回路(飾り) ----------------------------------- */

  .hero {
    position: relative;
    overflow: hidden;
  }

  .hero > .container {
    position: relative;
  }

  .hero__circuit {
    position: absolute;
    top: 50%;
    right: max(-10rem, calc(50% - 44rem));
    width: min(46rem, 90vw);
    color: var(--color-brand);
    opacity: 0.14;
    transform: translateY(-50%);
    pointer-events: none;
  }

  @media (max-width: 48rem) {
    .hero__circuit {
      top: auto;
      bottom: -4rem;
      right: -8rem;
      transform: none;
      opacity: 0.1;
    }
  }

  /* ---- 札(技術スタック・実績の属性) ----------------------------- */

  .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .tag {
    display: inline-block;
    padding: 0.125rem var(--space-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    color: var(--color-ink);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    letter-spacing: 0;
  }

  /* 中心に置く技術(Claude Code / Claude API) */
  .tag--primary {
    background: var(--color-brand-soft);
    border-color: var(--color-brand);
    color: var(--color-brand-deep);
    font-weight: 600;
  }

  /* ---- 会社概要の表(dl) ----------------------------------------- */

  .data-list {
    display: grid;
    grid-template-columns: minmax(7em, max-content) 1fr;
    border-top: 1px solid var(--color-line);

    & dt,
    & dd {
      margin: 0;
      padding: var(--space-md) 0;
      border-bottom: 1px solid var(--color-line);
    }

    & dt {
      padding-right: var(--space-lg);
      color: var(--color-ink-muted);
      font-weight: 600;
    }
  }

  @media (max-width: 36rem) {
    .data-list {
      grid-template-columns: 1fr;

      & dt {
        padding-bottom: 0;
        border-bottom: 0;
        font-size: var(--text-sm);
      }

      & dd {
        padding-top: var(--space-2xs);
      }
    }
  }

  /* ---- ボタン ---------------------------------------------------- */

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 2.75rem;
    padding: var(--space-xs) var(--space-lg);
    background: var(--color-brand);
    border: 2px solid var(--color-brand);
    border-radius: var(--radius-sm);
    color: #fff;
    font: inherit;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;

    &:hover {
      background: var(--color-brand-deep);
      border-color: var(--color-brand-deep);
      color: #fff;
    }
  }

  .button--secondary {
    background: transparent;
    color: var(--color-brand);

    &:hover {
      background: var(--color-brand-soft);
      border-color: var(--color-brand);
      color: var(--color-brand-deep);
    }
  }

  .button--small {
    min-height: 2.25rem;
    padding: var(--space-2xs) var(--space-md);
    font-size: var(--text-sm);
  }

  /* 別のサイトへ移るリンクの印 */
  .link-external::after {
    content: "↗";
    display: inline-block;
    margin-left: 0.2em;
    font-family: var(--font-mono);
    font-size: 0.85em;
    text-decoration: none;
  }

  /* ---- 問い合わせの帯 -------------------------------------------- */

  .cta {
    padding-block: var(--space-section);
    background: var(--color-brand-deep);
    color: #fff;

    & a:not(.button) {
      color: #fff;
    }

    & .eyebrow {
      color: #b9dccd;
    }

    & .section__lead {
      color: #d3e8df;
    }

    & .button {
      background: #fff;
      border-color: #fff;
      color: var(--color-brand-deep);

      &:hover {
        background: var(--color-brand-soft);
        border-color: var(--color-brand-soft);
      }
    }

    & .button--secondary {
      background: transparent;
      color: #fff;

      &:hover {
        background: rgb(255 255 255 / 0.12);
        border-color: #fff;
        color: #fff;
      }
    }

    & :focus-visible {
      outline-color: #fff;
    }
  }

  /* ---- フッタ ---------------------------------------------------- */

  .site-footer {
    padding-block: var(--space-2xl) var(--space-xl);
    background: var(--color-ink);
    color: #c9d0cc;
    font-size: var(--text-sm);

    & a {
      color: #e9eeeb;
      text-decoration: none;

      &:hover {
        color: #fff;
        text-decoration: underline;
      }
    }

    & :focus-visible {
      outline-color: #fff;
    }

    & .brand,
    & .brand:hover {
      color: #fff;
    }
  }

  .site-footer__groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--space-xl);
    margin-top: var(--space-xl);
  }

  .site-footer__title {
    margin-bottom: var(--space-sm);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .site-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-footer__bottom {
    margin-top: var(--space-2xl);
    padding-top: var(--space-lg);
    border-top: 1px solid rgb(255 255 255 / 0.14);
    color: #9aa59f;
  }

  /* ---- 長い文章(プライバシーポリシー など) ----------------------- */

  .prose {
    max-width: var(--width-text);

    & > * + * {
      margin-top: var(--space-md);
    }

    & h2 {
      margin-top: var(--space-2xl);
      padding-bottom: var(--space-xs);
      border-bottom: 1px solid var(--color-line);
      font-size: var(--text-xl);
    }

    & h3 {
      margin-top: var(--space-xl);
      font-size: var(--text-lg);
    }

    & ul,
    & ol {
      padding-left: 1.5em;
    }

    & li + li {
      margin-top: var(--space-2xs);
    }

    & table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--text-sm);
    }

    & th,
    & td {
      padding: var(--space-xs) var(--space-sm);
      border: 1px solid var(--color-line);
      text-align: left;
      vertical-align: top;
    }

    & th {
      background: var(--color-paper-muted);
    }
  }
}

/* ------------------------------------------------------------------ */
/* utilities                                                           */
/* ------------------------------------------------------------------ */

@layer utilities {
  /* 画面には出さず、読み上げには残す */
  .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .text-muted {
    color: var(--color-ink-muted);
  }

  .text-sm {
    font-size: var(--text-sm);
  }

  .mono {
    font-family: var(--font-mono);
    letter-spacing: 0;
  }
}

/* 2026 brand refresh: a restrained editorial system for the corporate site. */
@layer base {
  :root {
    --color-paper: #f7f9f8;
    --color-paper-muted: #edf2f1;
    --color-surface: #fff;
    --color-ink: #102433;
    --color-ink-muted: #536773;
    --color-line: #dce5e5;
    --color-brand: #0f6266;
    --color-brand-deep: #10484e;
    --color-brand-soft: #e3f1ee;
    --color-accent: #f47a58;
    --color-accent-ink: #a83f23;
    --width-page: 78rem;
    --width-text: 48rem;
    --text-display: clamp(3.25rem, 2.1rem + 5.2vw, 6.75rem);
    --text-2xl: clamp(2rem, 1.25rem + 3vw, 3.5rem);
    --space-section: clamp(5rem, 3.5rem + 6vw, 9rem);
    --radius-lg: 1.75rem;
    --shadow-card: 0 24px 60px -38px rgb(16 36 51 / .28);
  }

  body { letter-spacing: .01em; }
  h1, h2, h3 { letter-spacing: -.045em; }
  h1 { line-height: 1.11; }
  h2 { line-height: 1.2; }
}

@layer components {
  .site-header {
    background: rgb(247 249 248 / .94);
    border-bottom-color: rgb(16 36 51 / .08);
    box-shadow: 0 8px 28px -25px rgb(16 36 51 / .35);
    backdrop-filter: blur(20px);
  }
  .site-header__inner { min-height: 5rem; }
  .brand { gap: .7rem; color: var(--color-ink); letter-spacing: -.035em; }
  .brand img { width: 2.55rem; height: 2.55rem; }
  .brand__name { font-family: var(--font-sans); font-size: .78rem; font-weight: 900; line-height: 1.05; letter-spacing: .055em; }
  .brand__dot { color: var(--color-accent-ink); }
  .site-nav a { padding: .55rem .85rem; color: #39505d; font-weight: 600; }
  .site-nav a:hover { background: #eaf0ef; color: var(--color-ink); }
  .site-header__action { border-radius: 999px; }

  .hero {
    display: flex;
    align-items: center;
    min-height: min(770px, calc(100svh - 5rem));
    padding-block: clamp(6rem, 10vw, 10rem) 5rem;
    background: #0b1826;
    border: 0;
    color: #fff;
    isolation: isolate;
  }
  .hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -2; }
  .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(7 19 31 / .9) 0%, rgb(7 19 31 / .76) 32%, rgb(7 19 31 / .1) 76%), linear-gradient(0deg, rgb(7 19 31 / .44), transparent 34%); }
  .hero__inner { width: min(100% - 2 * var(--gutter), var(--width-page)); }
  .hero__title { max-width: 8.8em; margin-top: 2rem; font-size: var(--text-display); font-weight: 850; text-wrap: balance; }
  .hero__lead { max-width: 30em; margin-top: 2rem; color: #e2edf0; font-size: clamp(1rem, .9rem + .5vw, 1.3rem); line-height: 1.85; }
  .hero .eyebrow { color: #9fe6dd; font-size: .8rem; letter-spacing: .17em; }
  .hero__index { margin-left: 1.5rem; color: #d2e1e2; letter-spacing: .06em; }
  .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; margin-top: 2.5rem; }
  .hero__actions .button { background: #f47a58; border-color: #f47a58; border-radius: 999px; color: #182b34; box-shadow: 0 16px 38px -18px rgb(244 122 88 / .8); }
  .hero__actions .button:hover { background: #ff9d7c; border-color: #ff9d7c; color: #102433; }
  .hero__text-link { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / .5); }
  .hero__text-link:hover { color: #b9efea; }
  .hero__caption { position: absolute; bottom: 1.6rem; right: var(--gutter); color: #d5e2e4; font-size: .7rem; letter-spacing: .05em; }

  .section__head { max-width: 55rem; margin-bottom: 3.5rem; }
  .section__head .eyebrow, .biz__name { text-transform: uppercase; letter-spacing: .09em; }
  .section__head h2 { max-width: 17em; font-weight: 800; }
  .section__lead { max-width: 42em; font-size: var(--text-lg); line-height: 1.9; }
  .eyebrow::before { width: .5rem; height: .5rem; border: 0; background: var(--color-accent); }

  .biz { border-top: 0; }
  .biz:nth-of-type(odd) { background: #fff; }
  .biz:nth-of-type(even) { background: #f0f5f4; }
  .biz__inner { gap: clamp(3rem, 6vw, 7rem); grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .biz__text { max-width: 37rem; }
  .biz__name { gap: 1rem; color: var(--color-brand-deep); font-size: .78rem; font-weight: 800; }
  .biz__name span { color: var(--color-accent-ink); font-size: 1rem; }
  .biz__title { max-width: 13em; font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); font-weight: 800; line-height: 1.25; }
  .biz__answer { background: #e4efed; border-radius: 999px; padding: .35rem .9rem; color: #20525a; font-size: .77rem; }
  .biz__lead { color: #263e4b; font-size: clamp(1.04rem, 1rem + .3vw, 1.2rem); line-height: 1.9; }
  .biz__points { padding-top: .4rem; gap: .9rem; }
  .biz__points li { color: #526772; line-height: 1.7; }
  .biz__points li::before { top: .65em; width: .45rem; height: .45rem; border: 0; background: var(--color-accent); }
  .figure-frame, .device-row, .photo-grid { box-shadow: 0 35px 70px -50px rgb(16 36 51 / .45); }
  .figure-frame { border: 0; border-radius: 1.4rem; }
  .biz__figure figcaption { margin-top: 1rem; color: #637782; font-size: .78rem; }
  .figure-note { border: 0; background: #e7eeec; color: #38535c; border-radius: 999px; padding: .1rem .55rem; }
  .photo-grid { overflow: hidden; border-radius: 1.4rem; gap: .35rem; background: #fff; }
  .photo-grid img { border-radius: 0; }
  .device-row { min-height: 26rem; border-radius: 1.4rem; background: radial-gradient(circle at 65% 25%, #b4dcd8, transparent 55%), #dbece8; }

  #works { background: #eaf0f0; }
  #works .section__head { margin-bottom: 4.5rem; }
  .group-title { margin-top: 4rem; padding-top: 1.4rem; border-top: 1px solid #cbd9d9; color: #183540; font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); }
  .group-title small { color: #647883; font-size: .8rem; }
  .card { gap: 1rem; padding: 1.25rem; border: 1px solid #dae5e5; border-radius: 1.15rem; box-shadow: 0 14px 40px -33px rgb(16 36 51 / .35); }
  .card--link { transition: transform .25s, box-shadow .25s, border-color .25s; }
  .card--link:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
  .card__media { margin: -1.25rem -1.25rem .2rem; border-radius: 1.15rem 1.15rem 0 0; border: 0; }
  .card__media--portrait { background: radial-gradient(circle at center, #b7dcd8, #e7f0ef 75%); }
  .card__media--pending { position: relative; background: radial-gradient(circle at 70% 35%, #cde6e2 0 8%, transparent 9%), linear-gradient(135deg, #dceae8, #f0f5f4); color: #48636c; font-weight: 700; }
  .card__media--pending::before { content: ""; position: absolute; width: 48%; aspect-ratio: 1; border: 1px solid rgb(15 98 102 / .22); border-radius: 50%; }
  .card__icon { box-shadow: 0 5px 18px -12px #102433; }
  .card__title { font-weight: 800; }
  .tag { border-color: #dbe6e4; background: #f5f8f7; color: #47606a; font-size: .73rem; }

  #practice { background: #112b37; color: #fff; }
  #practice > .container > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(3rem, 7vw, 7rem);
  }
  #practice .eyebrow { color: #9fe6dd; }
  #practice .section__lead, #practice .steps__item p { color: #c8d9dd; }
  #practice .steps__item::before { background: #183d47; border-color: #77c4ba; color: #d5f1ed; }
  #practice .steps__item:not(:last-child)::after { border-color: #42606a; }
  #practice .steps__item h3 { color: #fff; }
  .practice__figure { grid-column: 1 / -1; margin-top: 2.25rem; }
  .practice__figure img { width: 100%; max-height: 26rem; object-fit: cover; object-position: center; border: 1px solid rgb(180 230 225 / .15); border-radius: 1.4rem; }
  .practice__figure figcaption { margin-top: 1rem; color: #b9d0d2; font-size: .78rem; }
  .practice__figure .figure-note { background: #31525b; color: #d6e9e6; }
  #company { background: #fff; }
  #company .container { width: min(100% - 2 * var(--gutter), 62rem); }
  .data-list { border-top: 2px solid #102433; }
  .data-list dt, .data-list dd { padding-block: 1.3rem; border-color: #e2e9e8; }
  .data-list dt { color: #5b727c; font-size: .84rem; }

  .cta { position: relative; overflow: hidden; background: radial-gradient(circle at 90% 20%, #245762, transparent 38%), #0c2532; }
  .cta::after { content: ""; position: absolute; right: -6rem; bottom: -12rem; width: 26rem; height: 26rem; border: 1px solid rgb(175 231 225 / .22); border-radius: 50%; pointer-events: none; }
  .cta .eyebrow { color: #a9e2da; }
  .cta h2 { font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
  .cta .button { border-radius: 999px; }
  .site-footer { background: #091a25; }
  .site-footer .brand__dot { color: #f47a58; }
}

@media (max-width: 56rem) {
  .biz__inner { grid-template-columns: 1fr; }
  .biz--reverse .biz__figure { order: initial; }
  .biz__figure { max-width: 42rem; }
  #practice > .container > .grid { grid-template-columns: 1fr; }
}
@media (max-width: 48rem) {
  .hero { min-height: 670px; padding-block: 6rem 7rem; }
  .hero__image { object-position: 60% center; }
  .hero::after { background: linear-gradient(90deg, rgb(7 19 31 / .87), rgb(7 19 31 / .5)), linear-gradient(0deg, rgb(7 19 31 / .75), transparent 65%); }
  .hero__title { max-width: 8em; }
  .hero__caption { left: var(--gutter); right: auto; }
  .site-header__inner { row-gap: .3rem; padding-block: .55rem; }
  .site-nav { padding-bottom: .25rem; }
}
@media (max-width: 36rem) {
  .hero__title { font-size: clamp(3.15rem, 13vw, 4.5rem); }
  .hero__actions { gap: 1.2rem; }
  .brand__name { font-size: .7rem; }
  .site-header__action { font-size: .75rem; padding-inline: .75rem; }
  .section__head h2, .biz__title { font-size: clamp(1.9rem, 8vw, 2.65rem); }
  .group-title { display: block; }
  .group-title small { display: block; margin-top: .2rem; }
}

@layer components {
  .card--site {
    display: grid;
    grid-column: 1 / -1;
    padding: 0;
    overflow: hidden;
    gap: 0;
  }
  .card__copy { padding: 1.5rem; display: grid; align-content: center; gap: 1rem; }
  .card__media--site {
    position: relative;
    margin: 0;
    width: 100%;
    aspect-ratio: auto;
    padding: 0;
    border-radius: 0;
    cursor: zoom-in;
    & img { display: block; height: auto; object-fit: contain; }
    &:focus-visible { outline: 3px solid var(--color-brand); outline-offset: -3px; }
  }
  .image-preview-label {
    position: absolute; right: .75rem; bottom: .75rem;
    padding: .4rem .7rem; border-radius: 2rem;
    background: #112b37; color: white; font-size: .75rem;
  }
  @media (min-width: 56rem) {
    .card--site { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  }
  .works-preview {
    margin: auto;
    width: min(96vw, 100rem); max-width: 96vw; max-height: 94dvh;
    padding: 0; border: 1px solid #cbd9d9; border-radius: 1rem;
    background: #f7faf9; color: #112b37;
    &::backdrop { background: rgb(10 25 35 / .8); }
  }
  .works-preview__bar {
    position: sticky; top: 0; z-index: 1;
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; padding: 1rem; background: #f7faf9;
    & h2 { margin: 0; font-size: 1rem; }
    & button { padding: .5rem 1rem; border: 1px solid #cbd9d9; border-radius: 2rem; cursor: pointer; }
  }
  .works-preview__image { overflow: auto; }
  .works-preview__image img { display: block; width: 100%; height: auto; }
  body:has(.works-preview[open]) { overflow: hidden; }
}

@layer components {
  .contract-grid { grid-template-columns: 1fr; }
  @media (min-width: 56rem) {
    .contract-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}

@layer components {
  .stack-label { margin-top: .75rem; color: #647883; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; }
  .tech-stack { gap: .45rem; }
  .tech-stack .tag { font-size: .76rem; padding: .35rem .6rem; overflow-wrap: anywhere; white-space: normal; }
}

@layer components {
  .works-grid, .contract-grid { grid-template-columns: 1fr; }
  .works-grid .card--site { grid-column: auto; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .works-grid .card__copy { align-content: start; }
  .works-grid .card__media--site { align-self: start; }
  @media (min-width: 40rem) {
    .works-grid, .contract-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 64rem) {
    .works-grid, .contract-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
}

@layer components {
  #works .card__title a { text-decoration: none; }
  #works .card__title a:hover { color: var(--color-brand); }
  section[aria-labelledby="works-lab-title"], section[aria-labelledby="works-contract-title"] { padding-top: 4rem; }
  #works-lab-title, #works-contract-title { margin-top: 0; border-top: 1px solid #cbd9d9; padding-top: 1.4rem; }
}

@layer components {
  #physical-ai .figure-frame { aspect-ratio: 2908 / 1612; }
  #physical-ai .figure-frame > img { height: auto; object-fit: contain; }
}