/* ==========================================================================
   灯不動産リノベーション研究所 — style.css  v4
   Design: Satoh 35 + Vignelli 30 / Norman 22 + Rams 20
   Approach: Mobile-first · Liquid layout · @layer cascade · :where() / :is()
   Token naming: design-brief.md の CSS変数命名規則に完全準拠
   ========================================================================== */

/* @import must precede @layer declarations */
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@300;400;500;700&display=swap');

/* --------------------------------------------------------------------------
   Layer order — later = higher cascade priority
   -------------------------------------------------------------------------- */
@layer reset, tokens, base, layout, components, utilities;


/* ==========================================================================
   TOKENS  — design-brief.md 命名規則完全準拠
   ========================================================================== */
@layer tokens {

  :root {
    /* ---- 基盤色 ---- */
    --color-bg-primary:   #FAFAF7;  /* 和紙の白 — 全体背景 */
    --color-bg-secondary: #F3F1EC;  /* 静かな生成り — カード・セクション背景 */
    --color-bg-tertiary:  #E8E4DD;  /* 薄いベージュグレー — ボーダー背景 */

    /* ---- ブランド色 ---- */
    --color-accent:       #C4712B;  /* 灯りの色 */
    --color-accent-dark:  #A85E22;  /* 灯りの深み — hover 時 */
    --color-accent-light: #F0D9C0;  /* 灯りの淡い余韻 — hover 背景 */
    --color-accent-sub:   #8B6914;  /* 落ち着いた木の色 — 補助アクセント */

    /* ---- テキスト色の階層 ---- */
    --color-text-heading: #2D2926;  /* 墨に近い柔らかな黒 — 見出し */
    --color-text-body:    #4A4540;  /* 読みやすいチャコール — 本文 */
    --color-text-muted:   #8C857C;  /* 控えめなグレーブラウン — メタ情報 */
    --color-border:       #D1CBC3;  /* 消え入りそうなウォームグレー — 区切り線 */

    /* ---- 機能色 ---- */
    --color-success: #4A8C5C;
    --color-error:   #C4463A;
    --color-warning: #B8862D;
    --color-info:    #5B7B8C;

    /* ---- フッター ---- */
    --color-footer: #2D2926;  /* --color-text-heading と同値 */

    /* ---- タイポグラフィ ---- */
    --font-serif: 'Zen Old Mincho', serif;
    --font-sans:  'Zen Kaku Gothic New', sans-serif;

    /* ---- タイプスケール（fluid） ---- */
    --fs-display: clamp(2rem,    1.4rem + 1.8vw,  3.25rem);
    --fs-h1:      clamp(1.75rem, 1.2rem  + 1.4vw, 2.5rem);
    --fs-h2:      clamp(1.375rem,1rem    + 1vw,   1.875rem);
    --fs-h3:      clamp(1.125rem,0.95rem + 0.5vw, 1.375rem);
    --fs-body:    clamp(0.9375rem,0.9rem + 0.1vw, 1rem);
    --fs-sm:      clamp(0.8125rem,0.78rem + 0.1vw,0.875rem);
    --fs-xs:      clamp(0.6875rem,0.66rem + 0.07vw,0.75rem);

    /* ---- 余白スケール（リキッド） ---- */
    --space-xs:      0.5rem;
    --space-sm:      1rem;
    --space-md:      1.5rem;
    --space-lg:      2rem;
    --space-xl:      3rem;
    --space-2xl:     4rem;
    --space-3xl:     6rem;
    --space-section: clamp(5rem, 3rem + 5vw, 8rem);
    /* 実装用トークン（ブリーフ補完） */
    --space-edge:    clamp(1.25rem, 1rem + 2vw, 3rem);
    --space-inner:   clamp(1rem, 0.75rem + 0.5vw, 1.5rem);
    --space-gutter:  clamp(1.25rem, 1rem + 0.5vw, 2rem);

    /* ---- 角丸 ---- */
    --radius-sm:   0.375rem;
    --radius-md:   0.75rem;
    --radius-pill: 99rem;

    /* ---- トランジション（duration + easing を1変数に） ---- */
    --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- シャドウ ---- */
    --shadow-card: 0 0.25rem 1rem  rgb(45 41 38 / 0.06);
    --shadow-nav:  0 1px   0      var(--color-border);

    /* ---- レイアウト ---- */
    --layout-max-w:  75rem;
    --layout-prose:  41.25rem;  /* ~35-40字/行 */
    --touch-target:  2.75rem;   /* WCAG 44px */
  }

} /* end @layer tokens */


/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {

  :where(*, *::before, *::after) {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  :where(html) {
    font-size: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }

  @media (prefers-reduced-motion: reduce) {
    :where(html) { scroll-behavior: auto; }
    :where(*, *::before, *::after) {
      animation-duration:  0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }

  :where(img, video)              { display: block; max-width: 100%; height: auto; }
  :where(a)                       { color: inherit; text-decoration: none; }
  :where(ul, ol)                  { list-style: none; }
  :where(button)                  { cursor: pointer; font: inherit; border: none; background: none; }
  :where(input, textarea, select) { font: inherit; }
  :where(address)                 { font-style: normal; }

} /* end @layer reset */


/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {

  body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.8;
    letter-spacing: 0.02em;
    color: var(--color-text-body);
    background: var(--color-bg-primary);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* ゼロ特異度で共通スタイルを定義 — 個別 h1/h2/h3 で上書き可 */
  :where(h1, h2, h3, h4, h5, h6) {
    font-weight: 500;
    line-height: 1.55;
    color: var(--color-text-heading);
  }

  h1 {
    font-family: var(--font-serif);
    font-size: var(--fs-h1);
    letter-spacing: 0.04em;
    line-height: 1.6;
  }

  h2 {
    font-family: var(--font-serif);
    font-size: var(--fs-h2);
    line-height: 1.6;
    letter-spacing: 0.04em;
  }

  h3 {
    font-family: var(--font-sans);
    font-size: var(--fs-h3);
    line-height: 1.6;
    letter-spacing: 0.02em;
  }


} /* end @layer base */


/* ==========================================================================
   LAYOUT
   ========================================================================== */
@layer layout {

  .container {
    width: 100%;
    max-width: var(--layout-max-w);
    margin-inline: auto;
    padding-inline: var(--space-edge);
  }

  .section          { padding-block: var(--space-section); }
  .section--alt     { background: var(--color-bg-secondary); }
  .section--dark    { background: var(--color-footer); color: var(--color-text-muted); }

  /* Section header */
  .sec-header          { margin-bottom: var(--space-2xl); }
  .sec-header--center  { text-align: center; }
  .sec-header--center .lead { margin-inline: auto; }

  /* eyebrow — 全箇所で統一: eyebrow→見出し = 0.25rem */
  .eyebrow {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.25rem;
  }

  .lead {
    color: var(--color-text-muted);
    margin-top: var(--space-sm);
  }

  /* Grids */
  .grid-2    { display: grid; gap: var(--space-gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
  .grid-3    { display: grid; gap: var(--space-gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
  .grid-auto { display: grid; gap: var(--space-gutter); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }

  /* Flex helpers */
  .flex-between { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); }

  /* Stacks */
  .stack-2 { display: flex; flex-direction: column; gap: var(--space-sm); }
  .stack-3 { display: flex; flex-direction: column; gap: var(--space-md); }
  .stack-4 { display: flex; flex-direction: column; gap: var(--space-lg); }

} /* end @layer layout */


/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {

  /* ----------------------------------------------------------------
     Image Placeholder
  ---------------------------------------------------------------- */
  .img-ph {
    width: 100%;
    background: var(--color-bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    overflow: hidden;
  }

  /* img タグで使う場合: display を block に上書きし object-fit でトリミング */
  img.img-ph {
    display: block;
    object-fit: cover;
    background: var(--color-bg-tertiary);
  }

  :is(.img-ph--3x2)      { aspect-ratio: 3 / 2; }
  :is(.img-ph--4x3)      { aspect-ratio: 4 / 3; }
  :is(.img-ph--16x7)     { aspect-ratio: 16 / 7; }
  :is(.img-ph--1x1)      { aspect-ratio: 1 / 1; }
  :is(.img-ph--portrait) { aspect-ratio: 2 / 3; }
  :is(.img-ph--fill)     { width: 100%; height: 100%; aspect-ratio: unset; min-height: 18rem; }
  :is(.img-ph--round)    { border-radius: 50%; }


  /* ----------------------------------------------------------------
     Buttons
  ---------------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--touch-target);
    padding: var(--space-sm) 2.25rem;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 3px rgb(45 41 38 / 0.1);
    transition:
      background    var(--transition-normal),
      color         var(--transition-normal),
      border-color  var(--transition-normal),
      box-shadow    var(--transition-normal);
  }

  .btn--primary {
    background: var(--color-accent);
    color: var(--color-bg-primary);
    border-color: var(--color-accent);
  }

  :is(.btn--primary:hover, .btn--primary:focus-visible) {
    background: #d4832f;
    border-color: #d4832f;
    box-shadow: 0 2px 6px rgb(196 113 43 / 0.25);
  }

  .btn--outline {
    background: transparent;
    color: var(--color-accent);
    border-color: var(--color-accent);
  }

  :is(.btn--outline:hover, .btn--outline:focus-visible) {
    background: var(--color-accent-light);
    box-shadow: 0 2px 6px rgb(196 113 43 / 0.15);
  }

  .btn--ghost {
    background: transparent;
    color: var(--color-bg-primary);
    border-color: rgb(250 250 247 / 0.5);
  }

  :is(.btn--ghost:hover, .btn--ghost:focus-visible) {
    background: rgb(250 250 247 / 0.12);
    border-color: var(--color-bg-primary);
  }

  .btn--text {
    padding: 0;
    min-height: unset;
    border: none;
    background: none;
    color: var(--color-accent);
    font-weight: 500;
    font-size: var(--fs-sm);
    letter-spacing: 0.04em;
    gap: 0.375rem;
  }

  .btn--text::after {
    content: '→';
    display: inline-block;
    transition: transform var(--transition-fast);
  }

  .btn--text:hover::after { transform: translateX(0.3rem); }

  :is(.btn:disabled, .btn[aria-disabled="true"]) {
    opacity: 0.5;
    pointer-events: none;
  }

  .btn:focus-visible {
    outline: 0.125rem solid var(--color-accent-light);
    outline-offset: 0.125rem;
  }

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


  /* ----------------------------------------------------------------
     Header / Global Nav
  ---------------------------------------------------------------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-bg-primary);
    box-shadow: var(--shadow-nav);
  }

  .site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4.25rem;
    gap: var(--space-md);
  }

  .site-logo { flex-shrink: 1; display: flex; align-items: center; min-width: 0; }
  .site-logo :is(img, svg) { height: 2.5rem; width: auto; max-width: 100%; }

  .logo-text {
    font-family: var(--font-serif);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--color-text-heading);
    line-height: 1.35;
  }

  .logo-text__sub {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.5625rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
    margin-top: 0.1875rem;
  }

  .gnav { display: none; }

  @media (width >= 64em) {
    .gnav { display: flex; align-items: center; gap: var(--space-xl); }
  }

  .gnav__list {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 0.25rem + 1vw, 1.5rem);
  }

  .gnav__link {
    position: relative;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--color-text-body);
    padding-block: 0.25rem;
    transition: color var(--transition-fast);
  }

  .gnav__link::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 1px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-normal);
  }

  :is(.gnav__link:hover, .gnav__link[aria-current="page"]) {
    color: var(--color-accent);
  }

  :is(.gnav__link:hover, .gnav__link[aria-current="page"])::after {
    transform: scaleX(1);
  }

  .header-cta { display: none; }

  @media (width >= 64em) {
    .header-cta { display: inline-flex; padding: 0.625rem 1.375rem; font-size: 0.8125rem; }
  }

  /* Hamburger */
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: var(--touch-target);
    height: var(--touch-target);
    gap: 5px;
    flex-shrink: 0;
  }

  @media (width >= 64em) { .hamburger { display: none; } }

  .hamburger__bar {
    width: 22px;
    height: 1px;
    background: var(--color-text-heading);
    transition:
      transform var(--transition-normal),
      opacity   var(--transition-fast);
    transform-origin: center;
  }

  .hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2) { opacity: 0; }
  .hamburger[aria-expanded="true"] .hamburger__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


  /* ----------------------------------------------------------------
     Mobile Drawer
  ---------------------------------------------------------------- */
  .mob-nav {
    position: fixed;
    inset: 0;
    z-index: 99;
    pointer-events: none;
  }

  .mob-nav__scrim {
    position: absolute;
    inset: 0;
    background: rgb(45 41 38 / 0.45);
    opacity: 0;
    transition: opacity var(--transition-normal);
  }

  .mob-nav__panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(82vw, 21rem);
    background: var(--color-bg-primary);
    padding: var(--space-2xl) var(--space-lg);
    transform: translateX(100%);
    transition: transform var(--transition-normal);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
  }

  .mob-nav.is-open                  { pointer-events: auto; }
  .mob-nav.is-open .mob-nav__scrim  { opacity: 1; }
  .mob-nav.is-open .mob-nav__panel  { transform: none; }

  .mob-nav__list { display: flex; flex-direction: column; }

  .mob-nav__link {
    display: block;
    padding-block: 0.875rem;
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--color-text-heading);
    border-bottom: 1px solid var(--color-border);
    transition: color var(--transition-fast);
  }

  .mob-nav__link:hover { color: var(--color-accent); }

  .mob-nav__footer { display: flex; flex-direction: column; gap: var(--space-sm); }
  .mob-nav__tel    { font-size: 1.125rem; font-weight: 500; letter-spacing: 0.04em; color: var(--color-text-heading); }


  /* ----------------------------------------------------------------
     Hero
     SP: 画像→テキスト縦積み（オーバーレイなし、完全な可読性）
     PC: フルワイド画像 + テキストオーバーレイ（左側）
  ---------------------------------------------------------------- */
  .hero {
    position: relative;
    width: 100%;
    max-height: 100vh;
    overflow: hidden;
  }

  .hero__media {
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    background: var(--color-bg-tertiary);
  }

  .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
  }

  .hero__content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 var(--space-edge);
    background: linear-gradient(
      to top,
      rgb(250 250 247 / 0.92) 0%,
      rgb(250 250 247 / 0.7) 50%,
      rgb(250 250 247 / 0.3) 75%,
      transparent 100%
    );
  }

  @media (width >= 64em) {
    .hero__content {
      align-items: center;
      padding: 0 clamp(5rem, 7vw, 10rem);
      background: linear-gradient(
        to right,
        rgb(250 250 247 / 0.9) 0%,
        rgb(250 250 247 / 0.75) 26%,
        rgb(250 250 247 / 0.3) 40%,
        transparent 55%
      );
    }
  }

  .hero__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 28rem;
  }

  .hero__eyebrow {
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
  }

  .hero__heading {
    font-family: var(--font-serif);
    font-size: var(--fs-h1);
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0.04em;
    color: var(--color-text-heading);
  }

  .hero__body {
    color: var(--color-text-body);
    line-height: 1.95;
    max-width: 26rem;
  }

  .hero__badges {
    display: none;
    gap: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
  }

  @media (width >= 64em) {
    .hero__badges { display: flex; }
  }

  .badge__num {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(1.375rem, 1.2rem + 0.4vw, 1.75rem);
    font-weight: 500;
    color: var(--color-text-heading);
    line-height: 1;
    margin-bottom: 0.25rem;
  }

  .badge__label {
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
  }


  /* ----------------------------------------------------------------
     Purpose Nav
  ---------------------------------------------------------------- */
  .purpose { background: var(--color-bg-secondary); }

  .purpose__grid { display: grid; }

  @media (width >= 48em) { .purpose__grid { grid-template-columns: 1fr 1fr; } }

  .purpose__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-2xl) var(--space-edge);
    text-decoration: none;
    transition: background var(--transition-normal);
  }

  /* モバイル: 2つ目のカード上部にボーダー */
  .purpose__card + .purpose__card {
    border-top: 1px solid var(--color-border);
  }

  /* PC: 上ボーダー → 左ボーダーに切替 */
  @media (width >= 48em) {
    .purpose__card + .purpose__card {
      border-top: none;
      border-left: 1px solid var(--color-border);
    }
  }

  .purpose__card:hover { background: var(--color-accent-light); }

  /* tag → title を 0.25rem に統一（他の eyebrow → h2 と同じ近接） */
  .purpose__heading { display: flex; flex-direction: column; gap: 0.25rem; }

  .purpose__tag {
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
  }

  .purpose__title {
    font-family: var(--font-serif);
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-text-heading);
  }

  .purpose__desc {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    line-height: 1.85;
    max-width: 24rem;
  }

  .purpose__arrow {
    font-size: 1.25rem;
    color: var(--color-accent);
    margin-top: auto;
    transition: transform var(--transition-fast);
  }

  .purpose__card:hover .purpose__arrow { transform: translateX(0.4rem); }


  /* ----------------------------------------------------------------
     Concept Split
  ---------------------------------------------------------------- */
  .concept-split { display: grid; gap: var(--space-2xl); align-items: center; }

  @media (width >= 48em) {
    .concept-split { grid-template-columns: 1fr 1fr; }
    /* PC: --reverse 修飾子で画像を左に配置（交互レイアウト用） */
    .concept-split--reverse > img { order: -1; }
  }

  .concept-split__body { display: flex; flex-direction: column; gap: var(--space-lg); }
  .concept-split__body .sec-header { margin-bottom: 0; }

  .concept-split__quote {
    font-family: var(--font-serif);
    font-size: clamp(1rem, 0.9rem + 0.25vw, 1.125rem);
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.03em;
    color: var(--color-text-heading);
    padding-left: var(--space-md);
    border-left: 2px solid var(--color-accent);
  }


  /* ----------------------------------------------------------------
     Works Carousel
  ---------------------------------------------------------------- */
  .carousel { overflow: hidden; }

  .carousel__track {
    display: flex;
    gap: var(--space-gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-edge);
    padding-inline: var(--space-edge);
    padding-block: var(--space-sm);
    margin-inline: calc(-1 * var(--space-edge));
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .carousel__track::-webkit-scrollbar { display: none; }

  /* scroll-snap-align: center で中央揃えスナップ（設計書準拠） */
  .carousel__track .work-card { flex: 0 0 85%; scroll-snap-align: center; }

  @media (width >= 48em) { .carousel__track .work-card { flex: 0 0 calc(50% - var(--space-gutter) / 2); } }
  @media (width >= 64em) { .carousel__track .work-card { flex: 0 0 calc(33.33% - var(--space-gutter) * 2 / 3); } }

  .carousel__dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: var(--space-md); padding-bottom: var(--space-xs); }

  .carousel__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-border);
    border: none; padding: 0;
    cursor: pointer;
    transition:
      background  var(--transition-normal),
      transform   var(--transition-normal);
  }

  .carousel__dot.is-active { background: var(--color-accent); transform: scale(1.5); }


  /* ----------------------------------------------------------------
     Work Card
  ---------------------------------------------------------------- */
  .work-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    overflow: hidden;
    text-decoration: none;
    transition:
      box-shadow var(--transition-normal),
      transform  var(--transition-normal);
  }


  .work-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); border-color: transparent; }

  .work-card__body {
    padding: var(--space-inner);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
  }

  .work-card__tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }

  .tag {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    background: var(--color-accent-light);
    border-radius: var(--radius-sm);
    padding: 0.1875rem 0.5rem;
  }

  .work-card__title {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.65;
    color: var(--color-text-heading);
  }

  .work-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: auto;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
  }

  .work-card__meta-item { font-size: var(--fs-sm); color: var(--color-text-muted); }

  /* 詳細ページ未作成のカード */
  .work-card--upcoming {
    pointer-events: none;
    opacity: 0.65;
    position: relative;
  }

  .work-card--upcoming::after {
    content: '詳細準備中';
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--color-bg-primary);
    background: var(--color-text-muted);
    border-radius: var(--radius-sm);
    padding: 0.1875rem 0.5rem;
  }

  .works-grid {
    display: grid;
    gap: var(--space-gutter);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  }


  /* ----------------------------------------------------------------
     Anxiety Resolution
  ---------------------------------------------------------------- */
  .anxiety-grid {
    display: grid;
    gap: var(--space-sm);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  }

  .anxiety-item {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-inner);
    background: var(--color-bg-secondary);
  }

  .anxiety-item__icon {
    flex-shrink: 0;
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    background: var(--color-accent-light);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 500;
  }

  .anxiety-item__q { font-size: var(--fs-xs); color: var(--color-text-muted); margin-bottom: 0.25rem; }
  .anxiety-item__a { font-size: var(--fs-sm); font-weight: 500; color: var(--color-text-heading); line-height: 1.75; }


  /* ----------------------------------------------------------------
     Flow Steps
  ---------------------------------------------------------------- */
  .flow-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: 45rem;
    margin-inline: auto;
  }

  .flow-item {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    position: relative;
    text-align: left;
  }

  @media (width >= 48em) {
    .flow-item {
      grid-template-columns: 2.5rem 1fr;
      align-items: center;
      justify-items: start;
      gap: 0 var(--space-md);
      text-align: left;
    }
  }

  .flow-item__num {
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 0.875rem;
    font-weight: 500;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
  }

  .flow-item__body  { padding-top: 0.25rem; }
  .flow-item__title { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--color-text-heading); margin-bottom: 0.375rem; }
  .flow-item__desc  { font-size: var(--fs-sm); color: var(--color-text-body); }
  .flow-item__note  { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 0.375rem; }


  /* ----------------------------------------------------------------
     People Split
  ---------------------------------------------------------------- */
  .people-split { display: grid; gap: var(--space-2xl); align-items: center; }

  @media (width >= 48em) { .people-split { grid-template-columns: 5fr 7fr; } }

  .people-split__img .img-ph { aspect-ratio: 4 / 5; }
  .people-split__body        { display: flex; flex-direction: column; gap: var(--space-md); }
  .people-split__body .sec-header { margin-bottom: 0; }


  /* ----------------------------------------------------------------
     Voice Cards
  ---------------------------------------------------------------- */
  .voice-grid {
    display: grid;
    gap: var(--space-gutter);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  }

  .voice-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .voice-card__mark {
    font-family: Georgia, serif;
    font-size: 3rem;
    line-height: 0.6;
    color: var(--color-accent-light);
  }

  .voice-card__text {
    font-size: var(--fs-body);
    line-height: 2;
    color: var(--color-text-body);
    flex: 1;
  }

  .voice-card__author {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
  }

  .voice-card__avatar {
    width: 3.5rem; height: 3.5rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-bg-tertiary);
  }

  .voice-card__name  { font-size: var(--fs-sm); font-weight: 500; color: var(--color-text-heading); }
  .voice-card__label { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 0.125rem; }


  /* ----------------------------------------------------------------
     Event Card
  ---------------------------------------------------------------- */
  .event-card {
    background: var(--color-bg-secondary);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .event-card__date  { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--color-accent); }
  .event-card__title { font-size: var(--fs-sm); font-weight: 500; color: var(--color-text-heading); line-height: 1.6; }
  .event-card__meta  { font-size: var(--fs-xs); color: var(--color-text-muted); }


  /* ----------------------------------------------------------------
     CTA Banner
  ---------------------------------------------------------------- */
  .cta-banner {
    background: var(--color-accent);
    padding-block: var(--space-section);
    text-align: center;
  }

  .cta-banner h2 { color: var(--color-bg-primary); }
  .cta-banner p  { color: rgb(250 250 247 / 0.8); margin-inline: auto; margin-top: var(--space-sm); }
  .cta-banner .btn-row { justify-content: center; margin-top: var(--space-xl); }
  /* CTA バナー内の btn--text は文字色を明示的に上書き */
  .cta-banner .btn--text { color: rgb(250 250 247 / 0.8); }
  .cta-banner .btn--text::after { color: rgb(250 250 247 / 0.8); }


  /* ----------------------------------------------------------------
     Footer
  ---------------------------------------------------------------- */
  .site-footer {
    background: var(--color-footer);
    color: var(--color-text-muted);
    padding-block: var(--space-3xl) var(--space-xl);
  }

  .site-footer__grid { display: grid; gap: var(--space-2xl); }

  @media (width >= 48em) { .site-footer__grid { grid-template-columns: 1fr 2fr; } }

  .footer-logo {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--color-bg-primary);
    line-height: 1.55;
    margin-bottom: var(--space-md);
  }

  .footer-logo span {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.5625rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
    margin-top: 0.1875rem;
  }

  .footer-address   { font-style: normal; font-size: var(--fs-xs); line-height: 2; }
  .footer-address a { color: inherit; transition: color var(--transition-fast); }
  .footer-address a:hover { color: var(--color-bg-primary); }

  .footer-tel {
    display: block;
    margin-top: var(--space-sm);
    font-size: 1.125rem;
    color: var(--color-bg-primary);
    letter-spacing: 0.04em;
  }

  .footer-nav__group { display: flex; flex-wrap: wrap; gap: 0.5rem var(--space-lg); margin-bottom: var(--space-md); }
  .footer-nav__link  { font-size: var(--fs-xs); color: var(--color-text-muted); letter-spacing: 0.04em; transition: color var(--transition-fast); }
  .footer-nav__link:hover { color: var(--color-bg-primary); }

  .footer-bottom {
    margin-top: var(--space-2xl);
    padding-top: var(--space-md);
    border-top: 1px solid rgb(255 255 255 / 0.07);
  }

  .footer-copy { font-size: var(--fs-xs); letter-spacing: 0.04em; }

  /* contact.html 専用 — お電話番号の大きな表示 */
  .contact-tel {
    display: block;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--color-text-heading);
  }


  /* ----------------------------------------------------------------
     SP Fixed Bar
  ---------------------------------------------------------------- */
  .fixed-bar {
    position: fixed;
    bottom: 0; inset-inline: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--color-footer);
    border-top: 1px solid rgb(255 255 255 / 0.08);
  }

  @media (width >= 64em) { .fixed-bar { display: none; } }

  @media (width < 64em) { body { padding-bottom: 3.25rem; } }

  .fixed-bar__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 3.25rem;
    padding-inline: 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.5rem;
    letter-spacing: 0.04em;
    border-right: 1px solid rgb(255 255 255 / 0.07);
    transition:
      background var(--transition-fast),
      color      var(--transition-fast);
  }

  .fixed-bar__btn:hover { background: rgb(255 255 255 / 0.05); color: var(--color-bg-primary); }
  .fixed-bar__icon      { font-size: 1.125rem; line-height: 1; }

  .fixed-bar__btn--cta {
    background: var(--color-accent);
    color: var(--color-bg-primary);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.05em;
    border-right: none;
    flex-direction: row;
    gap: 0.375rem;
  }

  .fixed-bar__btn--cta:hover { background: var(--color-accent-dark); }


  /* ----------------------------------------------------------------
     Page Header (sub-pages)
  ---------------------------------------------------------------- */
  .page-header {
    padding-block: var(--space-2xl) var(--space-xl);
    border-bottom: 1px solid var(--color-border);
  }

  .page-header h1 { margin-block: 0 var(--space-sm); }

  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
  }

  .breadcrumb__sep { color: var(--color-border); }
  .breadcrumb a    { color: var(--color-text-muted); transition: color var(--transition-fast); }
  .breadcrumb a:hover { color: var(--color-accent); }


  /* ----------------------------------------------------------------
     FAQ
  ---------------------------------------------------------------- */
  .faq-group { margin-bottom: var(--space-2xl); }

  .faq-group__heading {
    font-family: var(--font-serif);
    font-size: var(--fs-h3);
    color: var(--color-accent);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-xs);
  }

  details.faq-item          { border-bottom: 1px solid var(--color-border); }
  details.faq-item:first-of-type { border-top: 1px solid var(--color-border); }

  .faq-item summary {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding-block: var(--space-md);
    cursor: pointer;
    list-style: none;
    font-weight: 500;
    color: var(--color-text-heading);
    line-height: 1.7;
    font-size: var(--fs-sm);
  }

  .faq-item summary::-webkit-details-marker { display: none; }

  .faq-item__q {
    flex-shrink: 0;
    color: var(--color-accent);
    font-family: var(--font-serif);
  }

  .faq-item__chevron {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--color-text-muted);
    font-size: 1.25rem;
    line-height: 1;
    transition: transform var(--transition-normal);
  }

  details[open] .faq-item__chevron { transform: rotate(180deg); }
  details.is-closing .faq-item__chevron { transform: rotate(0deg); }

  .faq-item__answer {
    font-size: var(--fs-sm);
    color: var(--color-text-body);
    line-height: 2;
    overflow: hidden;
    height: 0;
    transition: height 0.3s ease;
  }

  .faq-item__answer > * {
    padding-left: calc(1rem + var(--space-sm));
    padding-bottom: var(--space-md);
  }


  /* ----------------------------------------------------------------
     Form
  ---------------------------------------------------------------- */
  .form       { display: flex; flex-direction: column; gap: var(--space-md); }
  .form-group { display: flex; flex-direction: column; gap: 0.375rem; }

  .form-label {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--color-text-heading);
    letter-spacing: 0.04em;
  }

  .form-label--req::after {
    content: '必須';
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.5625rem;
    font-weight: 500;
    color: var(--color-bg-primary);
    background: var(--color-accent);
    border-radius: var(--radius-sm);
    padding: 0.0625rem 0.3125rem;
    vertical-align: middle;
    letter-spacing: 0.04em;
  }

  /* :where() — ゼロ特異度で .has-error が必ず勝つ */
  :where(.form-input, .form-textarea, .form-select) {
    width: 100%;
    padding: 0.875rem 1.25rem;
    font-size: var(--fs-sm);
    color: var(--color-text-body);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    appearance: none;
    transition:
      border-color var(--transition-fast),
      box-shadow   var(--transition-fast);
  }

  :where(.form-input, .form-textarea)::placeholder { color: var(--color-text-muted); }

  :is(.form-input:focus, .form-textarea:focus, .form-select:focus) {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-light);
  }

  :is(.form-input, .form-textarea).has-error { border-color: var(--color-error); }

  .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%238C857C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
  }

  .form-textarea { resize: vertical; min-height: 8rem; }
  .form-error    { font-size: var(--fs-xs); color: var(--color-error); }

  .form-options       { display: flex; flex-direction: column; gap: 0.625rem; }
  .form-options--row  { flex-direction: row; flex-wrap: wrap; }
  .form-option        { display: flex; align-items: center; gap: 0.625rem; cursor: pointer; font-size: var(--fs-sm); }
  .form-option input  { width: 1.125rem; height: 1.125rem; accent-color: var(--color-accent); flex-shrink: 0; }


  /* ----------------------------------------------------------------
     Works Detail
  ---------------------------------------------------------------- */
  .detail-overview {
    background: var(--color-bg-secondary);
    padding: var(--space-lg);
    margin-block: var(--space-xl);
  }

  .detail-overview__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--space-md);
  }

  .detail-ov__label { font-size: var(--fs-xs); color: var(--color-text-muted); letter-spacing: 0.05em; }
  .detail-ov__val   { font-size: var(--fs-sm); font-weight: 500; color: var(--color-text-heading); margin-top: 0.25rem; }

  .story { display: flex; flex-direction: column; gap: var(--space-2xl); max-width: 48rem; margin-inline: auto; }

  .story__mark {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    border-bottom: 1px solid var(--color-accent);
    padding-bottom: 0.125rem;
    margin-bottom: var(--space-sm);
  }

  .story__heading {
    font-family: var(--font-serif);
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-text-heading);
    margin-bottom: var(--space-md);
  }

  .story__bullets {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: var(--space-md);
    background: var(--color-bg-secondary);
    border-left: 2px solid var(--color-accent);
  }

  .story__bullet { display: flex; gap: 0.75rem; font-size: var(--fs-sm); color: var(--color-text-body); }
  .story__bullet::before { content: '—'; color: var(--color-accent); flex-shrink: 0; }

  .gallery {
    display: grid;
    gap: var(--space-gutter);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  }


  /* ----------------------------------------------------------------
     Company Table
  ---------------------------------------------------------------- */
  .co-table { width: 100%; border-collapse: collapse; }

  :where(.co-table tr) { border-bottom: 1px solid var(--color-border); }
  .co-table tr:first-child { border-top: 1px solid var(--color-border); }

  :where(.co-table th, .co-table td) {
    padding: var(--space-md) 0;
    text-align: left;
    vertical-align: top;
    line-height: 1.85;
    font-size: var(--fs-sm);
  }

  .co-table th {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
    width: 9rem;
    padding-right: var(--space-lg);
  }

  @media (width < 48em) {
    :where(.co-table, .co-table tbody, .co-table tr, .co-table th, .co-table td) { display: block; }
    .co-table tr { padding-block: var(--space-md); }
    .co-table th { padding-right: 0; width: auto; border: none; padding-bottom: 0.25rem; }
    .co-table td { padding-top: 0; padding-bottom: 0; }
  }


  /* ----------------------------------------------------------------
     Filter Tabs
  ---------------------------------------------------------------- */
  .filter-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-lg); }

  .filter-tab {
    padding: 0.375rem 1.125rem;
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-family: inherit;
    transition:
      background   var(--transition-fast),
      color        var(--transition-fast),
      border-color var(--transition-fast);
  }

  :is(.filter-tab.is-active, .filter-tab:hover) {
    background: var(--color-accent-light);
    color: var(--color-accent);
    border-color: var(--color-accent-light);
  }

  /* ----------------------------------------------------------------
     Pagination
  ---------------------------------------------------------------- */
  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-2xl);
  }

  .pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding-inline: var(--space-xs);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-text-body);
    border: 1px solid var(--color-border);
    transition: background var(--transition-fast), color var(--transition-fast);
  }

  .pagination__item:hover {
    background: var(--color-accent-light);
    color: var(--color-accent);
    border-color: var(--color-accent-light);
  }

  .pagination__item--current {
    background: var(--color-accent);
    color: var(--color-bg-primary);
    border-color: var(--color-accent);
  }

  .pagination__ellipsis {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    padding-inline: var(--space-xs);
  }

  .pagination__next {
    padding-inline: var(--space-sm);
  }

} /* end @layer components */


/* ==========================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {

  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }

  .divider { border: none; border-top: 1px solid var(--color-border); margin-block: var(--space-xl); }

  /* Margin utilities — @layer utilities なので最高優先 */
  .mt-2 { margin-top: var(--space-sm); }
  .mt-3 { margin-top: var(--space-md); }
  .mt-4 { margin-top: var(--space-lg); }
  .mt-6 { margin-top: var(--space-xl); }
  .mt-8 { margin-top: var(--space-2xl); }
  .mb-2 { margin-bottom: var(--space-sm); }
  .mb-4 { margin-bottom: var(--space-lg); }
  .mb-6 { margin-bottom: var(--space-xl); }

  /* Prose */
  .prose p + p  { margin-top: var(--space-md); }
  .prose ul     { list-style: disc; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; }


} /* end @layer utilities */