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

/* ==========================================================================
   Design Tokens
   ========================================================================== */
:root {
  color-scheme: light;

  /* Tier 1: literal tokens */
  --color-pink-90: #4a3238;
  --color-pink-70: #8a5f6c;
  --color-pink-60: #a97080;
  --color-pink-50: #c98a95;
  --color-pink-40: #d9a3ab;
  --color-pink-30: #e8bfc4;
  --color-pink-15: #f6e2e4;
  --color-pink-05: #fdf3f1;
  --color-mauve-60: #b89194; /* Figma: main/pink */
  --color-mauve-70: #8a6a72;
  --color-neutral-90: #373737;
  --color-neutral-70: #5a5658;
  --color-neutral-50: #8a8688;
  --color-neutral-30: #d4d0d1;
  --color-neutral-15: #ececec;
  --color-neutral-05: #f8f7f6;
  --color-white: #ffffff;
  --color-gradient-deep: #bb849f;
  --color-gradient-pale: #ffcdd2;

  /* Tier 2: semantic tokens */
  --color-accent: var(--color-pink-50);
  --color-accent-strong: var(--color-mauve-60);
  --color-text: var(--color-neutral-90);
  --color-text-muted: var(--color-neutral-70);
  --color-text-subtle: var(--color-neutral-50);
  --color-surface: var(--color-white);
  --color-surface-subtle: var(--color-neutral-05);
  --color-border: var(--color-neutral-30);

  /* Tier 3: UI tokens */
  --ui-radius-sm: 0.5rem;
  --ui-radius-md: 1rem;
  --ui-radius-lg: 2rem;
  --ui-radius-full: 999px;
  --ui-shadow-sm: 0 1px 3px oklch(0% 0 0 / 8%);
  --ui-shadow-md: 0 8px 24px oklch(0% 0 0 / 10%);
  --ui-gap-section: clamp(4rem, 3rem + 4vw, 6.5rem); /* 1440pxで104px(Figma) */
  /* Figma: フレーム1440px・左右48px余白。コンテンツ最大幅1344px(84rem) */
  --ui-container-max: 84rem;
  --ui-container-pad: clamp(1.25rem, 3.34vw, 3rem);

  /* Typography */
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  /* 欧文はOutfit、日本語はNoto Sans JPへ自動フォールバック(デザイン指示) */
  --font-display: "Outfit", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  interpolate-size: allow-keywords;
}

/* ==========================================================================
   Reset (scoped, not global)
   ========================================================================== */
@layer reset {
  html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
  }

  :where(*, *::before, *::after) {
    box-sizing: inherit;
  }

  :where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol) {
    margin: 0;
  }

  :where(ul, ol) {
    padding: 0;
    list-style: none;
  }

  :where(img, svg) {
    display: block;
    max-inline-size: 100%;
  }

  :where(button) {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
  }

  :where(a) {
    color: inherit;
    text-decoration: none;
  }

  :where(input, textarea, select) {
    font: inherit;
    color: inherit;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */
@layer base {
  html {
    font-size: 100%;
    scroll-behavior: smooth;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  body {
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-surface);
    line-height: 1.8;
    font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
    overflow-wrap: break-word;
  }

  h1, h2, h3, h4 {
    line-height: 1.4;
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 2px solid var(--color-accent-strong);
    outline-offset: 3px;
  }

  ::selection {
    background: var(--color-pink-30);
    color: var(--color-pink-90);
  }
}

/* ==========================================================================
   Layout utilities
   ========================================================================== */
@layer layout {
  .container {
    inline-size: min(100% - (var(--ui-container-pad) * 2), var(--ui-container-max));
    margin-inline: auto;
  }

  .section {
    padding-block: var(--ui-gap-section);
  }

  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ==========================================================================
   Components
   ========================================================================== */
@layer components {

  /* --- Header --- */
  /* スクロール時に追従・背景なし(デザイン指示) */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
  }

  /* 上下24px・高さは内包。左右は.containerに任せて
     ロゴとヒーロー左端を全画面幅で揃える */
  /* Figma: ナビ+CTAは間隔34pxの1グループで右寄せ(846x40内包) */
  .site-header__inner {
    display: flex;
    align-items: center;
    gap: 2.125rem;
    padding-block: clamp(1rem, 1.67vw, 1.5rem);
  }

  .site-header__inner .brand {
    margin-inline-end: auto;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-text);
  }

  .brand img {
    inline-size: auto;
    block-size: 1.9rem;
  }

  .main-nav {
    display: none;
  }

  @media (width > 768px) {
    /* Figma: Noto Sans JP Light(300) / 16px / #373737 */
    /* Figma: Noto Sans JP Light(300) / 16px / 行間100% / 字間0%。
       画面拡大時もナビは16px固定(px指定) */
    .main-nav {
      display: flex;
      align-items: center;
      gap: 2.125rem; /* Figma: 34px */
      font-size: 16px;
      font-weight: 300;
      line-height: 1;
      letter-spacing: 0;
    }

    .main-nav__list {
      display: flex;
      align-items: center;
      gap: 2.125rem;
    }

    /* テキストリンクはホバーでピンクにゆっくりフェード(デザイン指示) */
    .main-nav__link {
      padding-block: 0.25rem;
      transition: color 0.4s ease;
    }

    .main-nav__link:hover,
    .main-nav__link:focus-visible {
      color: var(--color-accent-strong);
    }

    .has-submenu {
      position: relative;
    }

    /* 「印刷の種類」右横のシェブロン。閉時は下向き、開時(ホバー)は上向き */
    .has-submenu > .main-nav__link::after {
      content: "";
      display: inline-block;
      inline-size: 0.45em;
      block-size: 0.45em;
      margin-inline-start: 0.45em;
      border-inline-end: 1.5px solid currentColor;
      border-block-end: 1.5px solid currentColor;
      rotate: 45deg;
      translate: 0 -0.2em;
      transition: rotate 0.25s ease, translate 0.25s ease;
    }

    .has-submenu:hover > .main-nav__link::after,
    .has-submenu:focus-within > .main-nav__link::after {
      rotate: -135deg;
      translate: 0 0.1em;
    }

    /* Figma: main/pinkベタ塗り+白文字 / 角丸16px / パディング24px / 間隔12px。
       リンク文字の中央に揃え、文字に被らないよう12px下に表示 */
    .submenu {
      position: absolute;
      inset-block-start: calc(100% + 1rem); /* 文字下端から12px */
      inset-inline-start: 50%;
      display: grid;
      gap: 0.75rem; /* Figma: 12px */
      background: var(--color-accent-strong);
      color: var(--color-white);
      border-radius: 1rem; /* Figma: 16px */
      border-block-start: 1px solid var(--color-white);
      padding: 1.5rem; /* Figma: 24px */
      opacity: 0;
      visibility: hidden;
      transform: translate(-50%, -4px);
      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    }

    /* リンクとの12pxの隙間でホバーが途切れないよう透明ブリッジ */
    .submenu::before {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block-start: -1rem;
      block-size: 1rem;
    }

    .has-submenu:hover .submenu,
    .has-submenu:focus-within .submenu {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, 0);
    }

    /* Figma: Noto Sans JP Light(300) / 14px / 行間130% / 中央揃え */
    .submenu a {
      display: block;
      white-space: nowrap;
      font-size: 14px;
      font-weight: 300;
      line-height: 1.3;
      letter-spacing: 0;
      text-align: center;
      transition: opacity 0.4s ease;
    }

    .submenu a:hover,
    .submenu a:focus-visible {
      opacity: 0.7;
    }
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--ui-radius-full);
    background: var(--color-accent);
    color: var(--color-white);
  }

  @media (width > 768px) {
    .menu-toggle {
      display: none;
    }
  }

  .menu-toggle__bars {
    position: relative;
    inline-size: 1.1rem;
    block-size: 0.8rem;
  }

  .menu-toggle__bars span {
    position: absolute;
    inset-inline: 0;
    block-size: 2px;
    background: currentColor;
    border-radius: var(--ui-radius-full);
    transition: translate 0.25s ease, rotate 0.25s ease, opacity 0.2s ease;
  }

  .menu-toggle__bars span:nth-child(1) { inset-block-start: 0; }
  .menu-toggle__bars span:nth-child(2) { inset-block-start: 50%; translate: 0 -50%; }
  .menu-toggle__bars span:nth-child(3) { inset-block-end: 0; }

  .nav-drawer[open] ~ .site-header .menu-toggle__bars span:nth-child(1),
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) {
    translate: 0 0.39rem;
    rotate: 45deg;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) {
    translate: 0 -0.39rem;
    rotate: -45deg;
  }

  .btn-cta {
    display: none;
  }

  @media (width > 768px) {
    .btn-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem; /* Figma: 4px */
      /* Figma: 左が濃→右が淡のグラデーション / Noto Sans JP 400 / 14px / #FFF */
      background: linear-gradient(90deg in oklab,
        var(--color-gradient-deep) 0%,
        var(--color-gradient-deep) 33.34%,
        var(--color-gradient-pale) 100%);
      background-size: 150% 100%;
      background-position: 100% 0%;
      color: var(--color-white);
      padding: 0.8125rem 1.5rem; /* 13px+文字14px+13px=高さ40px */
      border-radius: var(--ui-radius-full);
      font-size: 0.875rem;
      font-weight: 400;
      line-height: 1;
      transition: background-position 0.6s ease;
    }

    /* ホバーで濃くなる。ボタン領域外へのエフェクトは付けない */
    .btn-cta:hover {
      background-position: 0% 0%;
    }
  }

  /* --- Nav Drawer (mobile) --- */
  .nav-drawer {
    position: fixed;
    inset: 0;
    inset-inline-start: auto;
    inline-size: min(85vw, 22rem);
    background: linear-gradient(160deg in oklab, var(--color-pink-60), var(--color-mauve-60));
    color: var(--color-white);
    z-index: 200;
    border: none;
    padding: 1.5rem;
    margin: 0;
    max-block-size: 100dvh;
    box-shadow: var(--ui-shadow-md);
    transition: translate 0.3s ease, display 0.3s allow-discrete, overlay 0.3s allow-discrete;
    translate: 100% 0;
  }

  .nav-drawer[open] {
    translate: 0 0;
  }

  @starting-style {
    .nav-drawer[open] {
      translate: 100% 0;
    }
  }

  .nav-drawer::backdrop {
    background: oklch(0% 0 0 / 40%);
    transition: opacity 0.3s ease, display 0.3s allow-discrete, overlay 0.3s allow-discrete;
    opacity: 0;
  }

  .nav-drawer[open]::backdrop {
    opacity: 1;
  }

  @starting-style {
    .nav-drawer[open]::backdrop {
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-drawer {
      transition-duration: 0.01ms;
    }
  }

  .nav-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: 1.5rem;
  }

  .nav-drawer__close {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    border-radius: var(--ui-radius-full);
  }

  .nav-drawer__close:hover {
    background: oklch(100% 0 0 / 15%);
  }

  .nav-drawer__list {
    display: flex;
    flex-direction: column;
  }

  .nav-drawer__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 0.85rem;
    border-block-end: 1px solid oklch(100% 0 0 / 20%);
    font-size: 0.95rem;
  }

  .nav-drawer__sublist {
    padding-inline-start: 1rem;
  }

  .nav-drawer__sublist a {
    font-size: 0.85rem;
    padding-block: 0.65rem;
    border-block-end: 1px dashed oklch(100% 0 0 / 15%);
  }

  .nav-drawer__cta {
    margin-block-start: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--color-white);
    color: var(--color-accent-strong);
    padding: 0.85rem 1.5rem;
    border-radius: var(--ui-radius-full);
    font-weight: 700;
  }

  /* --- Buttons --- */
  .btn-round {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem; /* Figma: 16px */
    inline-size: clamp(7rem, 12.78vw, 11.5rem); /* Figma: 184px */
    aspect-ratio: 184 / 180; /* Figma: 184x180 */
    border-radius: 50%;
    /* Figma: 左→右で#BB849F→#FFCDD2。
       左1/3をベタのdeepにした150%幅のグラデーションを右寄せしておくと、
       静止時はちょうどdeep→paleのフルレンジが見え、
       ホバーで左へスライドするとdeepの割合が増える */
    background: linear-gradient(90deg in oklab,
      var(--color-gradient-deep) 0%,
      var(--color-gradient-deep) 33.34%,
      var(--color-gradient-pale) 100%);
    background-size: 150% 100%;
    background-position: 100% 0%;
    color: var(--color-white);
    /* Figma: Noto Sans JP Regular(400) / 20px / 行間130% / 中央揃え / #FFF */
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    transition: background-position 0.6s ease;
  }

  /* ホバーで#BB849Fの割合が増える。ボタン領域外へのエフェクトは付けない */
  .btn-round:hover {
    background-position: 0% 0%;
  }



  /* Figma: 白背景+main/pinkの細枠と文字。ホバーでベタ塗り化 */
  .btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 2rem;
    border-radius: var(--ui-radius-full);
    border: 1px solid var(--color-accent-strong);
    background: var(--color-surface);
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--color-accent-strong);
    transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
  }

  /* ホバーでフェードしてベタ塗りに変化(デザイン指示) */
  .btn-pill:hover {
    background: var(--color-mauve-60);
    border-color: var(--color-mauve-60);
    color: var(--color-white);
  }

  .btn-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.8125rem 1.5rem;
    border-radius: var(--ui-radius-full);
    background: linear-gradient(90deg in oklab,
        var(--color-gradient-deep) 0%,
        var(--color-gradient-deep) 33.34%,
        var(--color-gradient-pale) 100%);
    background-size: 150% 100%;
    background-position: 100% 0%;
    color: var(--color-white);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1;
    transition: background-position 0.6s ease;
  }

  .btn-solid:hover {
    background-position: 0% 0%;
  }

  .btn-cta img,
  .btn-solid img,
  .nav-drawer__cta img {
    inline-size: 0.875rem; /* 14px(文字サイズと同幅) */
    block-size: auto;
  }

  .btn-solid:disabled {
    background: var(--color-neutral-30);
    color: var(--color-neutral-50);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
  }

  /* --- Section headings --- */
  /* Figma: Outfit ExtraLight(200) / 72px / 行間100% / 字間5% */
  .eyebrow {
    display: block;
    font-family: var(--font-display);
    font-weight: 200;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1;
    color: var(--color-accent-strong);
    letter-spacing: 0.05em;
  }

  /* セクション見出し行: 左に導入見出し、右下端にセクション名 */
  .section-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem 2rem;
  }

  /* セクション導入見出し(例: 昭和36年創業、〜) */
  .section-lead {
    font-family: var(--font-body);
    font-weight: 100;
    font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
    color: var(--color-text);
    line-height: 1.6;
    text-align: start;
  }

  /* Figma: Noto Sans JP Light(300) / 24px / 行間100% / 字間0% / #7D7D7D */
  .section-kicker {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;
    color: #7d7d7d;
    margin-block-start: 0.75rem;
  }

  .bg-wordmark {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 2rem + 12vw, 9rem);
    color: var(--color-pink-15);
    letter-spacing: 0.08em;
    white-space: nowrap;
    overflow: clip;
    line-height: 1;
    user-select: none;
  }

  /* ゆっくりテキストをスクロール(リピート表示・デザイン指示) */
  .bg-wordmark__track {
    display: inline-flex;
    animation: wordmark-scroll 40s linear infinite;
  }

  .bg-wordmark__track > span {
    padding-inline-end: 0.75em;
  }

  @keyframes wordmark-scroll {
    to { translate: -50% 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .bg-wordmark__track {
      animation: none;
    }
  }

  /* --- Hero --- */
  .hero {
    position: relative;
  }

  .hero__grid {
    display: grid;
    gap: clamp(1.5rem, 1rem + 2vw, 3rem);
    align-items: center;
  }

  @media (width > 768px) {
    .hero__grid {
      /* Figma: 画像は1440px時に891x790(上限)。
         テキスト列は残り空間を占め、ブロックを中央に置く */
      grid-template-columns: min(61.875vw, 891px) 1fr;
      justify-content: start;
    }

    .hero__copy {
      justify-self: center;
      /* Figma: 「あらゆる」上端は画像上端の24px下 */
      align-self: start;
      margin-block-start: 1.5rem;
    }
  }

  .hero__media {
    position: relative;
    overflow: clip;
    aspect-ratio: 891 / 790;
  }

  /* 徐々にズームアップ+フェードで画像切り替え(デザイン指示) */
  .hero__media img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.5s ease;
  }

  .hero__media img.is-active {
    opacity: 1;
    animation: hero-zoom 8s ease-out forwards;
  }

  @keyframes hero-zoom {
    from { scale: 1; }
    to { scale: 1.08; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero__media img.is-active {
      animation: none;
    }
  }

  .hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  /* Figma: 縦書きブロック(見出し+タグライン)とボタンを1グループとして
     中央軸で揃える */
  @media (width > 768px) {
    .hero__copy {
      align-items: center;
    }
  }

  /* Figma: Noto Sans JP Thin(100) / 24px / 行間115% / #373737 */
  .hero__tagline {
    font-size: clamp(1rem, 1.67vw, 1.5rem);
    font-weight: 100;
    line-height: 1.15;
    color: var(--color-text);
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }

  @media (width > 768px) {
    .hero__copy-inner {
      display: flex;
      flex-direction: row-reverse;
      justify-content: flex-start;
      align-items: flex-start;
      gap: clamp(1rem, 0.6rem + 1.5vw, 2.5rem);
    }
  }

  .hero__heading {
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    font-weight: 100;
    color: var(--color-text);
    font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
    line-height: 1.15;
  }

  @media (width > 768px) {
    .hero__heading {
      /* 縦書きコンテナではblock軸が右→左の横方向になるため、
         列を横に並べるにはcolumnを使う */
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem; /* Figma: 列間12px */
      font-size: clamp(2rem, 3.98vw, 3.58rem);
      line-height: 1.15;
      writing-mode: vertical-rl;
      text-orientation: mixed;
    }
  }

  /* Figma: Outfit Thin(100) / 179px / 行間100% / 字間5% /
     グラデーション#BB849F→#E8B6BB。
     行間100%なので-0.5emでセンターラインが画像下端に一致する */
  .hero__bg-wordmark {
    position: relative;
    margin-block-start: -0.5em;
    /* コンテナを抜けて画面端まで(Figma) */
    inline-size: 100vw;
    margin-inline-start: calc(50% - 50vw);
    font-size: clamp(3.5rem, 12.43vw, 11.1875rem);
    font-weight: 100;
    letter-spacing: 0.05em;
  }

  /* グラデーション文字。トラックがアニメーションで別レイヤーになるため
     クリップは末端のspanに適用する */
  .hero__bg-wordmark .bg-wordmark__track > span {
    background: linear-gradient(90deg in oklab, #bb849f, #e8b6bb);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* --- Case study slider (2段・自動ループ) --- */
  .case-slider {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-block-start: 2.5rem;
    /* 画面幅いっぱいにブレイクアウト(Figma: 2段目が左右に見切れる) */
    inline-size: 100vw;
    margin-inline-start: calc(50% - 50vw);
    overflow: clip;
  }

  .case-slider__track {
    display: flex;
    inline-size: max-content;
    animation: case-scroll 60s linear infinite;
  }

  .case-slider__track--reverse {
    animation-direction: reverse;
    animation-delay: -30s; /* 上段と位置をずらす */
  }

  /* ホバー中は停止(クリックしやすく) */
  .case-slider__row:hover .case-slider__track {
    animation-play-state: paused;
  }

  @media (prefers-reduced-motion: reduce) {
    .case-slider__track {
      animation: none;
    }
  }

  @keyframes case-scroll {
    to { translate: -50% 0; }
  }

  .case-grid__item {
    position: relative;
    flex: none;
    inline-size: clamp(10rem, 27.78vw, 25rem); /* Figma: 400px(1440px時) */
    margin-inline-end: 1rem; /* gapではなくmarginで、-50%ループを正確にする */
    aspect-ratio: 1;
    overflow: clip;
  }

  /* ホバーでゆっくり103%に拡大(写真のみ、枠サイズは不変・デザイン指示) */
  .case-grid__item img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: scale 0.8s ease;
  }

  .case-grid__button {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    padding: 0;
  }

  .case-grid__button:hover img,
  .case-grid__button:focus-visible img {
    scale: 1.03;
  }

  .case-grid__caption {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: 0.6rem 0.8rem;
    font-size: 0.75rem;
    color: var(--color-white);
    background: linear-gradient(to top in oklab, oklch(0% 0 0 / 55%), transparent);
    text-align: start;
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .case-grid__button:hover .case-grid__caption,
  .case-grid__button:focus-visible .case-grid__caption {
    opacity: 1;
  }

  .case-cta {
    margin-block-start: 2.5rem;
    text-align: center;
  }

  /* Figma: 幅広ピルで文字は中央、矢印は右端 */
  .case-cta .btn-pill {
    position: relative;
    min-inline-size: min(24rem, 100%);
  }

  .case-cta .btn-pill span {
    position: absolute;
    inset-inline-end: 1.5rem;
  }

  /* --- Case study modal (dialog) --- */
  /* Figma: 画像720x720 / 角丸なし / 下部テキストは透明背景+白文字 */
  .case-modal {
    border: none;
    border-radius: 0;
    padding: 0;
    max-inline-size: min(90vw, 45rem);
    background: transparent;
    transition: opacity 0.25s ease, display 0.25s allow-discrete, overlay 0.25s allow-discrete, scale 0.25s ease;
    opacity: 1;
    scale: 1;
  }

  .case-modal::backdrop {
    background: oklch(0% 0 0 / 55%);
    transition: opacity 0.25s ease, display 0.25s allow-discrete, overlay 0.25s allow-discrete;
    opacity: 1;
  }

  .case-modal[open] {
    display: grid;
  }

  @starting-style {
    .case-modal[open] {
      opacity: 0;
      scale: 0.96;
    }

    .case-modal[open]::backdrop {
      opacity: 0;
    }
  }

  .case-modal:not([open]) {
    opacity: 0;
    scale: 0.96;
    pointer-events: none;
  }

  .case-modal:not([open])::backdrop {
    opacity: 0;
  }

  .case-modal__media {
    inline-size: min(720px, 90vw);
    aspect-ratio: 1;
    overflow: clip;
  }

  .case-modal__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .case-modal__body {
    padding-block: 1.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    background: transparent;
    color: var(--color-white);
  }

  .case-modal__title {
    font-size: 1.25rem;
    font-weight: 300;
    text-align: center;
  }

  .case-modal__close {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 300;
    color: var(--color-white);
    padding-block: 0.4rem;
  }

  .case-modal__close:hover {
    opacity: 0.7;
  }

  /* --- Printing methods (tabs + panels) --- */
  /* Figma: main/pink #B89194ベタ塗り / フルブリード(1440px目一杯) / 角丸48px / パディング上下104px
     左右ガターは内側の.containerが担当(帯左右48px=コンテナ余白) */
  .methods {
    background: var(--color-mauve-60);
    border-radius: 3rem;
    color: var(--color-white);
    padding-block: clamp(3rem, 2rem + 5vw, 6.5rem); /* 1440pxで104px */
  }

  .methods__layout {
    display: grid;
    gap: 2rem;
  }

  @media (width >= 1000px) {
    .methods__layout {
      /* Figma実測: パネル1004px固定・右端はコンテナ右端に一致(帯右から48px)、
         左ナビ列が余剰を吸収(1440pxで276px、最小180px) + 間隔64px */
      grid-template-columns: minmax(11.25rem, 1fr) minmax(0, 62.75rem);
      column-gap: 4rem;
      align-items: start;
    }
  }

  .methods__intro {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .methods__head {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.5vw, 1.5rem);
  }

  @media (width >= 1000px) {
    .methods__head {
      flex-direction: row; /* 左に「印刷の種類」、右に「Printing Methods」 */
      align-items: flex-start;
    }
  }

  /* Figma: Noto Sans JP Light(300) / 24px / 行間120% / #FFF / 縦書き */
  .methods__kicker {
    font-weight: 300;
    font-size: clamp(1rem, 1.67vw, 1.5rem);
    line-height: 1.2;
    color: var(--color-white);
  }

  /* Figma: Outfit ExtraLight(200) / 72px / 行間100% / 文字間隔10% / #FFF */
  .methods__title {
    font-family: var(--font-display);
    font-weight: 200;
    font-size: clamp(2.75rem, 5vw, 4.5rem);
    line-height: 1;
    letter-spacing: 0.1em;
    justify-self: start;
  }

  @media (width >= 1000px) {
    .methods__kicker,
    .methods__title {
      writing-mode: vertical-rl;
      text-orientation: mixed;
    }
  }

  .method-tabs {
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    margin-block-start: 1.5rem;
  }

  @media (width >= 1000px) {
    .method-tabs {
      display: flex;
      /* Figma: 選択ピル幅340px = 左列(1440pxで276px) + 列間64px → パネル左端に接する */
      margin-inline-end: -4rem;
    }
  }

  /* Figma: 340×66 / Noto Sans JP Light(300) 18px 行間100% / 左24px・ドット10px・間隔8px */
  .method-tabs button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 1.5rem; /* テキスト18px + 上下24px = 高さ66px */
    padding-inline-start: 1.5rem;
    font-weight: 300;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--color-white);
    text-align: start;
  }

  .method-tabs button::before {
    content: "";
    inline-size: 0.625rem;
    block-size: 0.625rem;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
  }

  /* 選択状態: 白背景・左端は半円ラウンド・右端は角のままパネルに接続 */
  .method-tabs button[aria-selected="true"] {
    background: var(--color-surface);
    color: var(--color-text);
    border-start-start-radius: 100vmax;
    border-end-start-radius: 100vmax;
  }

  .method-tabs button[aria-selected="true"]::before {
    background: var(--color-mauve-60);
  }

  .method-tabs-mobile {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    background: oklch(100% 0 0 / 12%);
    border-radius: var(--ui-radius-sm);
    padding: 0.35rem;
  }

  @media (width >= 1000px) {
    .method-tabs-mobile {
      display: none;
    }
  }

  .method-tabs-mobile button {
    padding-block: 0.6rem;
    font-size: 0.75rem;
    border-radius: calc(var(--ui-radius-sm) - 0.2rem);
    color: oklch(100% 0 0 / 75%);
    text-align: center;
  }

  .method-tabs-mobile button[aria-selected="true"] {
    background: var(--color-white);
    color: var(--color-accent-strong);
    font-weight: 700;
  }

  .method-panels {
    display: grid;
    /* minmax(0,1fr): 表のmin幅がパネル幅に伝播してページからはみ出すのを防ぐ */
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  }

  /* Figma: 白パネル / 角丸16px / パディング72px 64px / ブロック間隔64px */
  .method-panel {
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: 1rem;
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
    padding-inline: clamp(1.5rem, 4.45vw, 4rem);
    flex-direction: column;
    gap: clamp(2rem, 4.45vw, 4rem);
  }

  .method-panel[hidden] {
    display: none;
  }

  .method-panel:not([hidden]) {
    display: flex;
    animation: panel-in 0.3s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    .method-panel:not([hidden]) {
      animation: none;
    }
  }

  @keyframes panel-in {
    from { opacity: 0; translate: 0 0.5rem; }
    to { opacity: 1; translate: 0 0; }
  }

  /* Figma: Noto Sans JP Medium(500) / 32px / 行間100% / main/pink / 本文との間16px */
  .method-panel__title {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
    color: var(--color-accent-strong);
    margin-block-end: 1rem;
  }

  /* Figma: Noto Sans JP Light(300) / 16px / 行間180% / #000 */
  .method-panel__desc {
    color: #000;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.8;
  }

  /* Figma: Noto Sans JP Light(300) / 12px / 行間100% / #000 / 本文との間16px */
  .method-panel__note {
    margin-block-start: 1rem;
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;
    color: #000;
  }

  /* Figma: 区切り線1px #CECECE(hrのUAマージンは除去) */
  .method-panel hr {
    border: none;
    border-block-start: 1px solid #cecece;
    margin: 0; /* UAのmargin-inline:autoはflex縦並びでstretchを打ち消し幅0になる */
  }

  /* Figma: Noto Sans JP Light(300) / 20px / 行間100% / #000 / 内容との間隔24px */
  .method-panel h4 {
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;
    color: #000;
    margin-block-end: 1.5rem;
  }

  /* Figma: 各列の幅は円サムネイル(240px)に揃える */
  .process-steps {
    --process-circle-size: clamp(7rem, 16.67vw, 15rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--process-circle-size));
    justify-content: space-between;
    gap: 1.5rem;
    text-align: center;
  }

  /* Figma: 円サムネイル240x240 */
  .process-steps__figure {
    inline-size: var(--process-circle-size);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: clip;
    margin-inline: auto;
    margin-block-end: 0.75rem;
  }

  .process-steps__figure img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* Figma: Outfit Light(300) / 48px / 行間100% / 中央揃え / #B89194 */
  .process-steps__number {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 3rem;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: var(--color-accent-strong);
    display: block;
  }

  /* Figma: Noto Sans JP Light(300) / 16px / 行間130% / 中央揃え / #000 / 数字との間8px */
  .process-steps__desc {
    margin-block-start: 0.5rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: 0;
    text-align: center;
    color: #000;
  }

  .method-examples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.75rem;
  }

  .method-examples button {
    display: block;
    padding: 0;
  }

  /* Figma: 283.86x280 / 角丸なし(height属性の300pxを打ち消すためblock-size:auto) */
  .method-examples img {
    aspect-ratio: 283.86 / 280;
    object-fit: cover;
    inline-size: 100%;
    block-size: auto;
  }

  .method-detail {
    display: grid;
    gap: 1.5rem;
  }

  @media (width >= 800px) {
    /* Figma: 工程図列470px / 列間40px(右列366px)。minmax(0,1fr)でテーブルのmin幅に押されないように */
    .method-detail {
      grid-template-columns: 470px minmax(0, 1fr);
      column-gap: 2.5rem;
    }
  }

  /* Figma: ボーダーは列ごとに分割 / 線の下64px開けて内容 / 両列の底面を揃える(高さ429px) */
  .method-detail > div {
    display: flex;
    flex-direction: column;
    border-block-start: 1px solid #cecece;
    padding-block-start: 4rem;
  }

  .method-detail .spec-tiles {
    flex: 1;
  }

  .method-detail figure img {
    max-inline-size: 100%;
    block-size: auto;
  }

  /* Figma: Noto Sans JP Light(300) / 16px / 行間140% / #000 / 表との間24px */
  .method-panel .field-hint {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0;
    color: #000;
    margin-block-end: 1.5rem;
  }

  /* Data table */
  .table-wrap {
    overflow-x: auto;
  }

  /* Figma: 線幅表876px / セル間隔4px / 見出し・行見出し#F1DEE6 / データ#F4F4F4 */
  .spec-table {
    display: grid;
    grid-template-columns: 220fr 316fr 170fr 170fr;
    gap: 0.25rem;
    min-inline-size: 30rem;
  }

  .spec-table thead,
  .spec-table tbody,
  .spec-table tr {
    display: contents;
  }

  /* Figma: タイル表 3列 / gap8px / セルpadding8px / 見出し・素材#F1DEE6 / 数値#F3F3F3
     行の高さは固定せず親の余り高さを2行で等分(列の底面を工程図と揃えるため) */
  .spec-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 0.5rem;
  }

  .spec-tiles thead,
  .spec-tiles tbody,
  .spec-tiles tr {
    display: contents;
  }

  .spec-tiles th,
  .spec-tiles td {
    display: grid;
    place-items: center;
    padding: 0.5rem;
    background: #f3f3f3;
    font-size: 1rem;
    font-weight: 300;
    text-align: center;
  }

  .spec-tiles th {
    background: #f1dee6;
  }

  .spec-table caption {
    text-align: start;
    font-size: 0.9rem;
    font-weight: 700;
    margin-block-end: 0.75rem;
    color: var(--color-text-muted);
  }

  .spec-table th,
  .spec-table td {
    display: grid;
    place-items: center;
    padding: 1rem 1.5rem;
    background: #f4f4f4;
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    text-align: center;
  }

  .spec-table th {
    background: #f1dee6;
  }

  /* 素材列は左揃え */
  .spec-table tbody td:first-of-type {
    justify-items: start;
    text-align: start;
  }

  /* 「シルク印刷」の行見出しはrowspan分を縦にまたぐ(行数を変えたらspanも更新) */
  .spec-table tbody th[rowspan="12"] {
    grid-row: span 12;
  }

  /* --- Order process --- */
  .order-process {
    display: grid;
    gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  }

  @media (width > 768px) {
    /* Figma: 左カラム固定298px / 列間40px */
    .order-process {
      grid-template-columns: 298px minmax(0, 1fr);
      gap: 2.5rem;
      align-items: start;
    }
  }

  /* Figma: 左カラム内の間隔24px */
  .order-process__intro {
    display: grid;
    gap: 1.5rem;
  }

  /* Figma: Outfit ExtraLight(200) / 72px / 行間100% / main/pink */
  .order-process__intro-title {
    font-family: var(--font-display);
    font-weight: 200;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1;
    letter-spacing: 0;
    color: var(--color-accent-strong);
  }

  /* Figma: Noto Sans JP Light(300) / 16px / 行間180% / #000 */
  .order-process__intro p:not(.section-kicker) {
    color: #000;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.8;
    letter-spacing: 0;
  }

  .order-process__intro .section-kicker {
    margin-block-start: 0;
  }

  .order-process__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Figma: カード#FAFAFA / 角丸16px / パディング16px 32px / 内部間隔24px */
  .process-card {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 1.5rem;
    background: #fafafa;
    border-radius: 1rem;
    padding: 1rem 2rem;
  }

  /* Figma: Outfit ExtraLight(200) / 72px / 行間100% / 中央揃え / #B89194 / ボックス92x72(幅はフォント比92/72em) */
  .process-card__num {
    font-family: var(--font-display);
    font-weight: 200;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    inline-size: calc(92em / 72);
    color: var(--color-accent-strong);
  }

  /* Figma: 88x88の白い円 + アイコン */
  .process-card__icon {
    inline-size: 5.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Figma: Noto Sans JP Light(300) / 20px / 行間100% / #000 */
  .process-card__title {
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;
    color: #000;
    margin-block-end: 0.5rem;
  }

  /* Figma: Noto Sans JP Light(300) / 16px / 行間140% / #000 */
  .process-card__desc {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0;
    color: #000;
  }

  .process-card__note {
    grid-column: 1 / -1;
    background: var(--color-pink-15);
    color: var(--color-pink-90);
    border-radius: var(--ui-radius-sm);
    padding: 0.85rem 1rem;
    font-size: 0.8rem;
    margin-block-start: 0.5rem;
  }

  /* --- Contact banner --- */
  /* Figma: 1344x411(1440px時) / 角丸48px / パディング24px 64px / #000 50%オーバーレイ */
  .contact-banner {
    position: relative;
    border-radius: 3rem;
    overflow: clip;
    aspect-ratio: 1344 / 411;
    padding-block: 1.5rem;
    padding-inline: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* ホバーでゆっくり103%に拡大(写真のみ、枠は不変・デザイン指示) */
  .contact-banner img:not(.contact-banner__arrow) {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: scale 0.8s ease;
  }

  .contact-banner:hover img:not(.contact-banner__arrow),
  .contact-banner:focus-visible img:not(.contact-banner__arrow) {
    scale: 1.03;
  }

  .contact-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: oklch(0% 0 0 / 50%);
    z-index: 1;
  }

  /* Figma: 中央揃え。サブテキストはNoto Sans JP Light(300)/24px/行間100%/#FFF */
  .contact-banner__link {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem; /* Figma: 16px */
    color: var(--color-white);
    font-size: clamp(1rem, 1.67vw, 1.5rem);
    font-weight: 300;
    line-height: 1;
    text-align: center;
    z-index: 1;
  }

  /* Figma: Outfit Thin(100) / 72px / 行間100% / #F89D99 */
  .contact-banner__title {
    font-family: var(--font-display);
    font-weight: 100;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1;
    color: #f89d99;
  }

  /* 矢印はSVG(41x79)。ホバーで右に5px移動(イーズ) */
  .contact-banner__arrow {
    position: absolute;
    inset-inline-end: clamp(1.5rem, 5.4vw, 4.875rem);
    inset-block-start: 50%;
    translate: 0 -50%;
    inline-size: 2.5625rem;
    block-size: auto;
    z-index: 1;
    transition: translate 0.3s ease;
  }

  .contact-banner:hover .contact-banner__arrow,
  .contact-banner:focus-visible .contact-banner__arrow {
    translate: 5px -50%;
  }

  /* --- 404 --- */
  .not-found {
    min-block-size: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: var(--ui-container-pad);
    text-align: center;
  }

  .not-found .page-hero {
    padding-block: 0;
  }

  .not-found__text {
    font-size: 0.9375rem;
  }

  .not-found .btn-solid {
    padding-inline: 2.5rem;
  }

  /* --- FAQ --- */
  .faq-layout {
    display: grid;
    gap: 2rem;
  }

  @media (width > 768px) {
    .faq-layout {
      grid-template-columns: auto 1fr;
      column-gap: 8.1875rem; /* Figma: 131px */
      align-items: start;
    }
  }

  /* Figma: Outfit ExtraLight(200) / 72px / 行間100% / 字間0% */
  .faq-title {
    font-family: var(--font-display);
    font-weight: 200;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1;
    letter-spacing: 0;
    color: var(--color-accent-strong);
  }

  .faq-list {
    display: flex;
    flex-direction: column;
  }

  .faq-item {
    border-block-end: 1px solid var(--color-border);
  }

  /* Figma: Noto Sans JP Light(300) / 20px / 行間100% / 字間0% / #000 */
  .faq-item summary {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding-block: 1.25rem;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;
    color: #000;
    cursor: pointer;
    list-style: none;
  }

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

  .faq-item summary::after {
    content: "+";
    margin-inline-start: auto;
    font-size: 1.25rem;
    color: var(--color-accent-strong);
    transition: rotate 0.25s ease;
  }

  .faq-item[open] summary::after {
    rotate: 45deg;
  }

  .faq-item .q-mark {
    color: var(--color-accent-strong);
    font-weight: 700;
  }

  .faq-item__answer {
    display: flex;
    gap: 0.5rem;
    padding-block-end: 1.25rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
  }

  .faq-item .a-mark {
    color: var(--color-pink-40);
    font-weight: 700;
    flex-shrink: 0;
  }

  /* --- Back to top --- */
  .back-to-top {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    margin-inline: auto;
    margin-block: 2rem;
    color: var(--color-text-subtle);
    transition: background 0.2s ease, color 0.2s ease;
  }

  .back-to-top:hover {
    background: var(--color-pink-05);
    color: var(--color-accent-strong);
  }

  /* --- Footer --- */
  /* Figma: 白→#FFE1ECの縦グラデーション / 上ボーダー1px #C0C0C0 /
     パディング上112px / 高さ460px相当 */
  .site-footer {
    position: relative;
    background: linear-gradient(to bottom in oklab, var(--color-white), #ffe1ec);
    border-block-start: 1px solid #c0c0c0;
    padding-block: clamp(4rem, 7.78vw, 7rem) 0;
    /* overflowはワードマークのラッパーでクリップする(to-topボタンを切らないため) */
  }

  /* フッター上ボーダー中央の「トップへ戻る」丸ボタン */
  .to-top {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    translate: -50% -50%;
    inline-size: 2.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-surface);
    border: 1px solid #c0c0c0;
    display: grid;
    place-items: center;
    z-index: 2;
  }

  .to-top::before {
    content: "";
    inline-size: 0.55rem;
    block-size: 0.55rem;
    border-inline-start: 1.5px solid var(--color-text-subtle);
    border-block-start: 1.5px solid var(--color-text-subtle);
    rotate: 45deg;
    translate: 0 0.15rem;
  }

  .site-footer__inner {
    display: grid;
    gap: 2rem 5rem; /* Figma: 間隔80px */
    position: relative;
    z-index: 1;
  }

  @media (width >= 800px) {
    .site-footer__inner {
      grid-template-columns: auto 1fr auto;
      align-items: start;
    }
  }

  /* Figma: Noto Sans JP Light(300) / 16px / 行間100% / #000 */
  .footer-nav {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 1.875rem 6.5rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1;
    color: #000;
  }

  .footer-nav a {
    transition: color 0.4s ease;
  }

  .footer-nav a:hover {
    color: var(--color-accent-strong);
  }

  .footer-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
  }

  @media (width >= 800px) {
    .footer-meta {
      align-items: flex-end;
    }
  }

  .footer-copyright {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 300;
    color: #000;
  }

  .footer-wordmark-clip {
    overflow: clip;
  }

  .footer-wordmark {
    inline-size: 100%;
    text-align: center;
    margin-block-start: clamp(2rem, 4vw, 4rem);
    margin-block-end: -0.16em; /* 下端で少し見切れさせる(Figma) */
    color: var(--color-pink-30);
    font-weight: 100;
  }

  /* --- Page hero (subpages) --- */
  /* Figma: 下層ページ全体の背景グラデ(両端#FFF4F8→中央透過、103deg) */
  .page-sub {
    background: linear-gradient(103deg, #fff4f8 0%, oklch(100% 0 0 / 0%) 48%, #fff4f8 100%) var(--color-surface);
  }

  /* Figma: 上160px(ヘッダー88px含む)・下64px・タイトル間16px・中央揃え */
  .page-hero {
    text-align: center;
    padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 4.45vw, 4rem);
  }

  /* Figma: Outfit ExtraLight(200) / 72px / 行間100% / #B89194 */
  .page-hero__title {
    font-family: var(--font-display);
    font-weight: 200;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1;
    color: var(--color-accent-strong);
  }

  /* Figma: Noto Sans JP Light(300) / 24px / 行間100% / #000 */
  .page-hero__subtitle {
    margin-block-start: 1rem; /* Figma: 16px */
    font-size: clamp(1.125rem, 1.67vw, 1.5rem);
    font-weight: 300;
    line-height: 1;
    color: #000;
  }

  /* --- About intro collage --- */
  /* セクション下余白はFigma実測144px(コンテンツ下端→沿革帯) */
  .about-intro {
    padding-block-end: clamp(4rem, 10vw, 9rem);
  }

  /* Figma: Noto Sans JP Thin(100) / 56px / 行間150% / 字間2.8px / palt / #000 */
  .about-lead {
    text-align: center;
    font-weight: 100;
    font-size: clamp(1.625rem, 3.89vw, 3.5rem);
    line-height: 1.5;
    letter-spacing: 0.05em;
    font-feature-settings: "palt" 1;
    color: #000;
  }

  /* Figma: 数字のみOutfit Thin 60px(和文56pxに対し107%) */
  .about-lead__num {
    font-family: var(--font-display);
    font-size: 1.07em;
    font-weight: 100;
  }

  /* Figma: 1344x460、見出しとの間38px */
  .about-collage__wide {
    margin-block-start: clamp(1.5rem, 2.64vw, 2.375rem);
    aspect-ratio: 1344 / 460;
  }

  .about-collage__wide img,
  .about-collage__left img,
  .about-collage__tall img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .about-collage__cols {
    display: grid;
    gap: 2rem;
  }

  /* Figma: 左写真584px(左端から104px)・右列392px(右端まで129px)。1344px基準の%換算 */
  @media (width > 768px) {
    .about-collage__cols {
      /* %列幅はパディング控除後の1111px(1344-104-129)基準: 584px/392px */
      grid-template-columns: 52.57% 35.28%;
      justify-content: space-between;
      padding-inline: 7.74% 9.6%;
      gap: 0;
    }

    /* Figma: 横長写真の下端から151px */
    .about-collage__left {
      margin-block-start: clamp(4rem, 10.5vw, 9.4375rem);
    }

    /* Figma: 横長写真に113px重なる */
    .about-collage__tall {
      margin-block-start: clamp(-7.0625rem, -7.85vw, -3rem);
    }
  }

  .about-collage__left {
    aspect-ratio: 584 / 668;
  }

  /* Figma: 元画像のやや右寄りをトリミング表示 */
  .about-collage__left img {
    object-position: 75% 50%;
  }

  .about-collage__tall {
    aspect-ratio: 392 / 598;
    box-shadow: 16px 28px 36px oklch(0% 0 0 / 25%);
  }

  /* Figma: 幅384px・写真下144px・段落間45px・16px/行間180%/#000 */
  .about-text {
    max-inline-size: 24rem;
    margin-block-start: clamp(3rem, 10vw, 9rem);
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3.13vw, 2.8125rem);
    font-size: 1rem;
    line-height: 1.8;
    color: #000;
  }

  /* --- History timeline (沿革) --- */
  /* Figma: 全幅帯 #B89194 + テクスチャ画像(乗算・不透明度20%) / 上下104px / 角丸なし */
  .history {
    position: relative;
    background: var(--color-mauve-60);
    color: var(--color-white);
    padding-block: var(--ui-gap-section);
  }

  .history::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../images/history-bg.webp") center / cover;
    mix-blend-mode: multiply;
    opacity: 0.2;
  }

  .history > .container {
    position: relative;
  }

  /* Figma: コンテンツ幅888px(1440中左右276px) */
  .history__inner {
    max-inline-size: 55.5rem;
    margin-inline: auto;
  }

  /* Figma: Noto Sans JP Medium(500) / 32px / 行間100% / 白。リストとの間64px */
  .history__title {
    font-size: clamp(1.5rem, 2.23vw, 2rem);
    font-weight: 500;
    line-height: 1;
    margin-block-end: clamp(2.5rem, 4.45vw, 4rem);
  }

  .history__grid {
    display: grid;
    gap: 2rem 3rem;
  }

  @media (width >= 800px) {
    .history__grid {
      grid-template-columns: auto auto;
      justify-content: space-between;
    }
  }

  /* Figma: 項目間隔32px */
  .history__list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  /* ドット中心(x=8px)を貫く縦線。端点は先頭・末尾ドットの中心 */
  .history__list::before {
    content: "";
    position: absolute;
    inset-block: 0.65rem 0.65rem;
    inset-inline-start: calc(0.5rem - 0.5px);
    inline-size: 1px;
    background: var(--color-white);
  }

  /* Figma: ドット16px+間隔24px、Noto Sans JP Light(300)/16px/行間130% */
  .history__item {
    position: relative;
    display: flex;
    padding-inline-start: 2.5rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.3;
  }

  .history__item::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.15em;
    inline-size: 1rem;
    block-size: 1rem;
    border-radius: 50%;
    background: var(--color-white);
  }

  /* Figma: 年号は幅72px固定 */
  .history__year {
    flex: 0 0 4.5rem;
    font-weight: 300;
  }

  /* --- Company profile table (会社概要) --- */
  /* Figma: Noto Sans JP Medium(500) / 32px / #B89194 中央揃え。表との間64px */
  .profile-title {
    text-align: center;
    font-size: clamp(1.5rem, 2.23vw, 2rem);
    font-weight: 500;
    line-height: 1;
    color: var(--color-accent-strong);
    margin-block-end: clamp(2.5rem, 4.45vw, 4rem);
  }

  /* Figma: 幅888px・行=上線#D3D3D3+上下32px・表末尾線#D8D8D8 */
  .profile-table {
    inline-size: 100%;
    max-inline-size: 55.5rem;
    margin-inline: auto;
    border-collapse: collapse;
    border-block-end: 1px solid #d8d8d8;
  }

  .profile-table tr {
    border-block-start: 1px solid #d3d3d3;
  }

  /* Figma: Noto Sans JP Light(300) / 20px / 行間100%(行高84px) / #000 */
  .profile-table th,
  .profile-table td {
    text-align: start;
    padding-block: 2rem;
    font-size: clamp(1rem, 1.39vw, 1.25rem);
    font-weight: 300;
    line-height: 1;
    color: #000;
    vertical-align: middle;
  }

  /* Figma: 取引銀行など複数行の値は行間150% */
  .profile-table td.is-multiline {
    line-height: 1.5;
  }

  /* Figma: 左余白40px+ラベル幅168px+値との間8px */
  .profile-table th {
    inline-size: 13rem;
    padding-inline: 2.5rem 0.5rem;
  }

  .profile-table td {
    white-space: pre-line;
  }

  @media (width <= 768px) {
    .profile-table th {
      inline-size: 7.5rem;
      padding-inline: 0 0.5rem;
    }
  }

  /* --- Contact form --- */
  /* Figma: 導入文・フォームともコンテンツ幅664px(1440中左右388px)、行間8px */
  .contact-intro {
    max-inline-size: 41.5rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 1rem;
    line-height: 1.8;
    color: #000;
  }

  /* Figma: メールリンクはOutfit Regular(400)/24px/#B89194/下線 */
  .contact-intro__mail a {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-accent-strong);
    text-decoration: underline;
    text-underline-position: from-font;
    margin-inline-start: 0.5rem;
  }

  /* Figma: 導入文との間56px、項目間16px */
  .contact-form {
    max-inline-size: 41.5rem;
    margin-inline: auto;
    margin-block-start: 3.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Figma: ラベル=Noto Sans JP Light(300)/16px/#000、バッジとの間8px */
  .form-field label {
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* Figma: 背景#A13E3E / 10px白 / 角丸2px / 余白2x3px */
  .required-badge {
    font-size: 0.625rem;
    font-weight: 400;
    line-height: normal;
    color: var(--color-white);
    background: #a13e3e;
    padding: 0.125rem 0.1875rem;
    border-radius: 2px;
  }

  /* Figma: 12px / #808080 / ラベルとの間4px */
  .field-hint {
    font-size: 0.75rem;
    color: #808080;
    margin-block-start: -0.25rem;
  }

  /* Figma: 背景#F5F5F5 / 枠1px #EEE / 角丸4px / 余白18x16px(高さ55px) */
  .form-field input,
  .form-field textarea,
  .form-field select {
    padding: 1.125rem 1rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: normal;
    color: #000;
    border: 1px solid #eee;
    border-radius: 0.25rem;
    background-color: #f5f5f5;
  }

  .form-field input,
  .form-field select {
    block-size: 3.4375rem; /* Figma: 55px */
    padding-block: 0;
  }

  /* Figma: プレースホルダ #A2A2A2 */
  .form-field ::placeholder {
    color: #a2a2a2;
    opacity: 1;
  }

  .form-field input:user-invalid,
  .form-field textarea:user-invalid,
  .form-field select:user-invalid {
    border-color: var(--color-pink-60);
  }

  /* Figma: セレクトは幅238px、シェブロン24pxを右16px */
  .form-field select {
    inline-size: 14.875rem;
    max-inline-size: 100%;
    appearance: none;
    background-image: url("../images/chevron-select.svg");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.5rem;
  }

  /* 未選択(プレースホルダ表示)時はプレースホルダ色に */
  .form-field select:invalid {
    color: #a2a2a2;
  }

  /* Figma: 高さ190px */
  .form-field textarea {
    resize: vertical;
    min-block-size: 11.875rem;
  }

  .form-consent {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Figma: 14px/行間26px、ボックスとの間8px */
  .form-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.86;
    cursor: pointer;
  }

  /* Figma: 16px / 背景#F5F5F5 / 枠#EEE / 角丸2.7px */
  .form-checkbox input {
    appearance: none;
    margin: 0;
    inline-size: 1rem;
    block-size: 1rem;
    background: #f5f5f5;
    border: 1px solid #eee;
    border-radius: 0.1875rem;
    cursor: pointer;
  }

  .form-checkbox input:checked {
    background: var(--color-mauve-60) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 10"><path d="M1 5l3.5 3.5L11 1.5" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 0.7rem no-repeat;
    border-color: var(--color-mauve-60);
  }

  /* Figma: 12px/行間140%、リンクは#B89194下線 */
  .form-consent__note {
    font-size: 0.75rem;
    line-height: 1.4;
    color: #000;
  }

  .form-consent__note a {
    color: var(--color-accent-strong);
    text-decoration: underline;
    text-underline-position: from-font;
  }

  /* Figma: ボタン間16px。クリア=264px固定、送信=残り幅(384px) */
  .form-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }

  /* Figma: 枠・文字#7D7D7D / 角丸25px / Bold 16px / 264x55px */
  .form-actions .btn-pill {
    flex: 0 1 16.5rem;
    block-size: 3.4375rem; /* Figma: 55px */
    padding-block: 0;
    border-color: #7d7d7d;
    color: #7d7d7d;
    font-size: 1rem;
    font-weight: 700;
    background: none;
  }

  .form-actions .btn-pill:hover {
    background: #7d7d7d;
    border-color: #7d7d7d;
    color: var(--color-white);
  }

  /* Figma: 送信=グラデ / Noto Sans JP Regular 18px白 / 高さ55px / 矢印17x12を右24px */
  .form-actions .btn-solid {
    position: relative;
    flex: 1 1 12rem;
    block-size: 3.4375rem; /* Figma: 55px */
    padding-block: 0;
    font-size: 1.125rem;
    line-height: 1.3;
  }

  .form-actions .btn-solid::after {
    content: "";
    position: absolute;
    inset-inline-end: 1.5rem;
    inline-size: 1.0625rem;
    block-size: 0.75rem;
    background: url("../images/arrow-submit.svg") center / contain no-repeat;
  }
}