/* ================================================================
   CRAFTSMANSHIP PAGE
   /craftsmanship/ ページ固有のスタイル。共通の reset / tokens / base /
   layout / 共通コンポーネント (header, footer, cta-v2 等) は
   style.css 側で定義済み。philosophy ページのデザイン言語を踏襲しつつ、
   "三つの技 (techniques)" セクションだけ SVG 線画アイコン演出を変奏点と
   して新規追加している。
   style.css 冒頭で `@layer reset, tokens, base, layout, components,
   utilities;` の順が宣言されているので、本ファイルでも同じ
   `@layer components` に乗せて詳細度衝突を避ける。
   ================================================================ */
@layer components {

  /* ================================================================
     HERO + INTRO STAGE
     hero と craftsmanship-intro を共通 stage で wrap し、 stage の sticky bg-wrap
     に hero 画像を持たせる。 hero スクロール中も intro に入っても画像が画面上端に
     貼り付き続け、 intro 自身は背景透過で hero bg をそのまま表示する。
     ================================================================ */
  .craftsmanship-hero-stage {
    position: relative;
    isolation: isolate;
    background-color: var(--color-bg-deep);
  }

  /* hero-stage の末尾を次セクション (leather の entry 開始時のダーク色) と
     滑らかに繋ぐためのグラデーション overlay。 absolute で stage 下端に貼り付け、
     bg-wrap (z:0) と前面 content (z:1+) の間に置くことで hero 画像下部だけを
     ダークへ落とす。 hero-stage 中盤では viewport 外、 末尾に近づくと viewport
     下端に現れて 画像 → ダークの自然な転換を作る。 */
  .craftsmanship-hero-stage::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    block-size: clamp(10rem, 30dvh, 24rem);
    background-image: linear-gradient(to bottom, transparent, var(--color-bg-deep) 70%);
    pointer-events: none;
    z-index: 0;
  }

  /* sticky bg-wrap (hero 画像)。 stage 全体の containing block 内で sticky。
     bg1 / bg2 の 2 枚を ::before / ::after に乗せ、 12 秒サイクル (1 枚あたり 6 秒)
     でふわっと交互に重なるクロスフェードループを行う (philosophy-hero と同パターン)。 */
  .craftsmanship-hero-stage__bg-wrap {
    position: sticky;
    inset-block-start: 0;
    inline-size: 100%;
    block-size: 100dvh;
    z-index: 0;
    background-color: var(--color-bg-deep);
    pointer-events: none;
  }

  /* 2 枚の画像レイヤー。 同じ位置に absolute で重ねて opacity でクロスフェード。
     ::before = bg1 (初期に表示)、 ::after = bg2 (フェードイン側)。 */
  .craftsmanship-hero-stage__bg-wrap::before,
  .craftsmanship-hero-stage__bg-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: top right;
    pointer-events: none;
    /* opacity crossfade を GPU 合成レイヤーに promote。 Safari でスクロール中に
       compositor がレイヤーを作り直すコストを抑える。 */
    will-change: opacity;
  }

  .craftsmanship-hero-stage__bg-wrap::before {
    background-image: image-set(
      url(../../images/under-craftsmanship/under-craftmanship-hero-bg1.webp) 1x,
      url(../../images/under-craftsmanship/under-craftmanship-hero-bg1@2x.webp) 2x
    );
    animation: craftsmanship-hero-bg-fade-a 12s ease-in-out infinite;
  }

  .craftsmanship-hero-stage__bg-wrap::after {
    background-image: image-set(
      url(../../images/under-craftsmanship/under-craftmanship-hero-bg2.webp) 1x,
      url(../../images/under-craftsmanship/under-craftmanship-hero-bg2@2x.webp) 2x
    );
    animation: craftsmanship-hero-bg-fade-b 12s ease-in-out infinite;
  }

  @media (width < 1024px) {
    .craftsmanship-hero-stage__bg-wrap::before {
      background-image: image-set(
        url(../../images/under-craftsmanship/under-craftmanship-hero-bg1-sp.webp) 1x,
        url(../../images/under-craftsmanship/under-craftmanship-hero-bg1-sp@2x.webp) 2x
      );
      background-position: center;
      background-size: cover;
    }

    .craftsmanship-hero-stage__bg-wrap::after {
      background-image: image-set(
        url(../../images/under-craftsmanship/under-craftmanship-hero-bg2-sp.webp) 1x,
        url(../../images/under-craftsmanship/under-craftmanship-hero-bg2-sp@2x.webp) 2x
      );
      background-position: center;
      background-size: cover;
    }
  }

  /* 12s サイクル: 3s ホールド + 3s フェード を 2 回繰り返す (philosophy と同位相)。
     0-25%  bg1 表示 (bg2 隠れ)
     25-50% bg1 → bg2 にクロスフェード (6 秒地点で完全切替)
     50-75% bg2 表示 (bg1 隠れ)
     75-100% bg2 → bg1 にクロスフェード (12 秒地点で初期状態に戻る) */
  @keyframes craftsmanship-hero-bg-fade-a {
    0%   { opacity: 1; }
    25%  { opacity: 1; }
    50%  { opacity: 0; }
    75%  { opacity: 0; }
    100% { opacity: 1; }
  }

  @keyframes craftsmanship-hero-bg-fade-b {
    0%   { opacity: 0; }
    25%  { opacity: 0; }
    50%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .craftsmanship-hero-stage__bg-wrap::before,
    .craftsmanship-hero-stage__bg-wrap::after {
      animation: none;
    }
    .craftsmanship-hero-stage__bg-wrap::after {
      opacity: 0;
    }
  }

  /* ================================================================
     HERO (philosophy-hero と同パターン)
     ================================================================ */
  .craftsmanship-hero {
    /* bg-image は stage の bg-wrap に移譲、 ここは透過 */
    background-color: transparent;
    position: relative;
    z-index: 1;
    /* stage の 1 番目の子である bg-wrap (100dvh) を打ち消して hero を stage の頭に揃える */
    margin-block-start: -100dvh;
    min-block-size: 80svh;
    padding-block: clamp(13rem, 24vw, 18rem) clamp(2.5rem, 5vw, 4.5rem);
    /* grid: 行 1 (1fr) で section の余白を吸収して heading を中央に置き、
       行 2 (auto) は tagline 専用で bottom-right に固定。 */
    display: grid;
    grid-template-rows: 1fr auto;
    row-gap: clamp(2rem, 4vw, 4rem);
  }

  /* PC (>=1024) では 16:9 比率に固定 (高さ = 横幅 × 9/16 = 56.25vw)。
     超ワイドモニタで縦が画面外に出ないよう 100svh で頭打ち。 */
  @media (width >= 1024px) {
    .craftsmanship-hero {
      min-block-size: min(56.25vw, 100svh);
    }
  }

  .craftsmanship-hero__heading {
    margin: 0;
    /* 行 1 の中で水平中央 (x軸真ん中) に配置。
       text-align: center で h2 と subtitle の text を中央揃え。
       margin-block-end で heading 全体を少し上に押し上げる。 */
    grid-row: 1;
    align-self: center;
    justify-self: center;
    text-align: center;
    padding-inline-start: 0;
    margin-block-end: clamp(3rem, 8vw, 8rem);
  }

  .craftsmanship-hero__title {
    font-family: var(--font-en);
    font-size: clamp(2.75rem, 1.8rem + 4vw, 5rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.1;
    color: oklch(0.98 0 0);
    text-wrap: balance;
    margin: 0;
    display: block;
  }

  @media (width >= 1024px) {
    .craftsmanship-hero__title {
      font-size: clamp(4.375rem, calc(1.9rem + 3.9vw), 5rem);
    }
  }

  .craftsmanship-hero__title-line {
    display: block;
    overflow: hidden;
    padding-block-end: 0.2em;
  }

  .craftsmanship-hero__title-line > span {
    display: block;
    transform: translate3d(0, calc(100% + 0.2em), 0);
    transition: transform 1.2s cubic-bezier(0.87, 0, 0.13, 1);
  }

  .craftsmanship-hero__title.is-revealed .craftsmanship-hero__title-line > span {
    transform: translate3d(0, 0, 0);
  }

  @media (prefers-reduced-motion: reduce) {
    .craftsmanship-hero__title-line > span {
      transform: translate3d(0, 0, 0);
      transition: none;
    }
  }

  .craftsmanship-hero__subtitle {
    font-family: var(--font-jp);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    line-height: 1.4;
    color: oklch(0.88 0.01 70);
    margin: 0;
    margin-block-start: 1rem;
    padding-inline-start: 0.1rem;
  }

  .craftsmanship-hero__tagline {
    font-family: var(--font-jp);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.8;
    color: oklch(0.88 0.01 70);
    text-align: end;
    margin: 0;
    /* grid 行 2 で bottom-right に固定 */
    grid-row: 2;
    justify-self: end;
    padding-inline-end: clamp(1.5rem, 3vw, 4rem);
  }

  @media (width < 768px) {
    .craftsmanship-hero__tagline {
      display: none;
    }
  }


  /* ================================================================
     共通 section padding & background (philosophy と揃える)
     ================================================================ */
  .craftsmanship-intro,
  .craftsmanship-leather,
  .craftsmanship-techniques,
  .craftsmanship-voice {
    background-color: var(--color-bg-primary);
    padding-block: clamp(5rem, 14vw, 11rem);
    padding-inline: clamp(1.5rem, 5vw, 3.75rem);
    position: relative;
  }

  @media (width < 768px) {
    .craftsmanship-intro,
    .craftsmanship-leather,
    .craftsmanship-techniques,
    .craftsmanship-voice {
      padding-inline: clamp(1.875rem, calc(-0.87rem + 11.7vw), 4.75rem);
    }

    /* intro のみ SP padding を 1.5 倍に拡張 (375 で 45px、 767 で 114px)。
       下 padding は左右と同値に揃える (上 padding は base の clamp(5rem, 14vw, 11rem) を維持)。
       他セクション (leather / techniques / voice) は上の共通値のまま。 */
    .craftsmanship-intro {
      padding-inline: clamp(2.8125rem, calc(-1.305rem + 17.55vw), 7.125rem);
      padding-block-end: clamp(2.8125rem, calc(-1.305rem + 17.55vw), 7.125rem);
    }
  }

  /* SP: hero-stage の sticky 背景画像が intro 区間にも引き続き映るため、本文が
     画像と重なって読みづらい。 intro が viewport に入るに従って黒オーバーレイを
     fade-in させて可読性を担保する。 ::before は .craftsmanship-intro
     (position: relative; z-index: 1) の stacking context 内、 __inner (z:1) より
     背面・ section の透明 bg より前面に置かれる。 */
  @media (width < 768px) {
    .craftsmanship-intro::before {
      content: "";
      position: absolute;
      inset: 0;
      /* hero 側との境を硬く割らないよう、 section 上端 6rem (=96px) だけ
         透明 → 50% 黒のグラデで繋ぎ、そこから下は 50% 黒の単色。 */
      background-image: linear-gradient(
        to bottom,
        oklch(0 0 0 / 0),
        oklch(0 0 0 / 0.5) 6rem
      );
      z-index: 0;
      pointer-events: none;
    }

    @supports (animation-timeline: view()) {
      .craftsmanship-intro::before {
        opacity: 0;
        animation: craftsmanship-intro-overlay-in linear forwards;
        animation-timeline: view();
        animation-range: entry 0% entry 80%;
      }

      @media (prefers-reduced-motion: reduce) {
        .craftsmanship-intro::before {
          opacity: 1;
          animation: none;
        }
      }
    }
  }

  @keyframes craftsmanship-intro-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }


  /* ================================================================
     INTRO — philosophy-intro 型 (左テキスト + 右画像3枚)
     ================================================================ */
  .craftsmanship-intro__inner {
    inline-size: min(100%, 80rem);
    margin-inline: auto;
    display: grid;
    gap: clamp(4rem, 11vw, 8rem);
  }

  @media (width >= 1024px) {
    .craftsmanship-intro__inner {
      /* PC では 1 カラム縦並び (画像が上、 テキストが下)。
         order で HTML 順を反転して __images を先頭に配置する。 */
      grid-template-columns: 1fr;
      gap: clamp(4rem, 8vw, 7rem);
      align-items: start;
    }

    .craftsmanship-intro__images {
      order: 1;
    }

    .craftsmanship-intro__text {
      order: 2;
    }
  }

  .craftsmanship-intro__text {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
    row-gap: clamp(2rem, 5vw, 3.5rem);
  }

  .craftsmanship-intro__heading {
    margin: 0;
    display: grid;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
  }

  .craftsmanship-intro__title {
    font-family: var(--font-jp);
    font-size: clamp(1.625rem, calc(1.27rem + 1.53vw), 2rem);
    font-weight: 400;
    letter-spacing: 0.16em;
    line-height: 1.7;
    color: oklch(0.98 0 0);
    text-wrap: balance;
    margin: 0;
    display: block;
  }

  @media (width >= 768px) {
    .craftsmanship-intro__title {
      font-size: 2rem;
    }
  }

  @media (width >= 1024px) {
    .craftsmanship-intro__title {
      font-size: clamp(1.875rem, 0.34rem + 2.4vw, 2.5rem);
    }
  }

  .craftsmanship-intro__title-line {
    display: block;
    overflow: hidden;
    padding-block-end: 0.2em;
  }

  .craftsmanship-intro__title-line > span {
    display: block;
    transform: translate3d(0, calc(100% + 0.2em), 0);
    transition: transform 1.2s cubic-bezier(0.87, 0, 0.13, 1);
  }

  .craftsmanship-intro__title.is-revealed .craftsmanship-intro__title-line > span {
    transform: translate3d(0, 0, 0);
  }

  .craftsmanship-intro__title.is-revealed .craftsmanship-intro__title-line:nth-child(2) > span {
    transition-delay: 0.15s;
  }

  @media (prefers-reduced-motion: reduce) {
    .craftsmanship-intro__title-line > span {
      transform: translate3d(0, 0, 0);
      transition: none;
    }
  }

  .craftsmanship-intro__title-en {
    font-family: var(--font-en);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.2;
    color: oklch(0.98 0 0);
    margin: 0;
  }

  @media (width >= 768px) {
    .craftsmanship-intro__title-en {
      font-size: 0.875rem;
    }
  }

  @media (width >= 1024px) {
    .craftsmanship-intro__title-en {
      font-size: 1rem;
    }
  }

  .craftsmanship-intro__body {
    display: grid;
    row-gap: clamp(1.25rem, 2.5vw, 1.75rem);
  }

  .craftsmanship-intro__lead {
    font-family: var(--font-jp);
    /* SP: 16px (1rem) */
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 2.2;
    color: oklch(0.93 0.005 70);
    text-wrap: wrap;
    max-inline-size: 38rem;
    margin: 0;
  }

  @media (width >= 768px) {
    .craftsmanship-intro__lead {
      /* TB / PC: 20px (1.25rem) */
      font-size: 1.25rem;
      /* TB / PC では __text と同じ幅まで広げる (= 折り返しを抑える) */
      max-inline-size: none;
    }
  }

  /* 右側画像エリア: SP は 1 列、TB+ は 2 列ずれ配置 */
  .craftsmanship-intro__images {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 2rem);
    justify-items: center;
  }

  /* PC: 3 枚を等幅・等高で真横に並べる (gap なし) */
  @media (width >= 1024px) {
    .craftsmanship-intro__images {
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      align-items: stretch;
    }
  }

  .craftsmanship-intro__image {
    display: block;
    inline-size: 100%;
    max-inline-size: 22rem;
    aspect-ratio: 7 / 9;
    overflow: hidden;
    border-radius: 2px;
    will-change: transform;
  }

  /* PC: max-inline-size と border-radius を解除して 3 枚の境界を完全密着に */
  @media (width >= 1024px) {
    .craftsmanship-intro__image {
      max-inline-size: none;
      border-radius: 0;
    }
  }

  .craftsmanship-intro__image img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }


  /* intro section は背景透過。 共通 stage (.craftsmanship-hero-stage) の sticky
     bg-wrap が hero と intro の全期間で画面上端に貼り付くので、 intro はその上を
     z-index: 1 で乗る形で content を表示する。 */
  .craftsmanship-intro {
    position: relative;
    z-index: 1;
    background-color: transparent;
  }

  .craftsmanship-intro__inner {
    position: relative;
    z-index: 1;
  }


  /* ================================================================
     LEATHER — philosophy-logic 型 (heading + lead + bleed image + 3詳細)
     ================================================================ */
  /* leather section: philosophy-history と同じ scroll-driven 演出パターン。
     基本は明色ベージュ背景だが、 @supports (animation-timeline: view()) 対応環境では
     entry 中はダーク背景 + 白テキストで、 entry 100% から contain 25dvh の間に
     ベージュ背景 + 暗色テキストへ切り替わる。 hero-stage 末尾のダーク overlay と
     繋がることで「画面全体が暗色 → 明色に切り替わる」演出になる。
     overflow-x: clip は detail-image の右側 viewport 端まで延長の保険。 */
  .craftsmanship-leather {
    position: relative;
    z-index: 1;
    /* top ページ craftsmanship セクションと同色 (#E2E1DA 相当) */
    background-color: oklch(0.909 0.009 100);
    color: oklch(0.25 0.005 70);
    overflow-x: clip;
    /* 上 padding は共通設定の 1.5 倍 (techniques と比べて余白を増やし、 fade-in
       完了タイミングと __title 中央到達のバランスを取る)。 SP では下と揃える。 */
    padding-block-start: clamp(9rem, 21vw, 16.5rem);
  }

  @media (width < 768px) {
    .craftsmanship-leather {
      padding-block-start: clamp(5rem, 14vw, 11rem);
    }
  }

  @supports (animation-timeline: view()) {
    .craftsmanship-leather {
      background-color: var(--color-bg-deep);
      color: oklch(0.98 0 0);
      /* 子要素 (テキスト) からこの timeline を参照して同タイミングで色スナップさせる */
      view-timeline-name: --craftsmanship-leather-tl;
      animation:
        craftsmanship-leather-bg-in linear forwards,
        craftsmanship-leather-color-in steps(1, end) forwards;
      animation-timeline: --craftsmanship-leather-tl;
      animation-range: entry 100% contain 15dvh;
    }
  }

  @keyframes craftsmanship-leather-bg-in {
    from { background-color: var(--color-bg-deep); }
    to   { background-color: oklch(0.909 0.009 100); }
  }

  @keyframes craftsmanship-leather-color-in {
    from { color: oklch(0.98 0 0); }
    to   { color: oklch(0.25 0.005 70); }
  }

  /* テキスト個別色のスナップ用 keyframes。
     title / detail-title (0.2)、 title-en / detail-title-en (0.45)、
     lead / detail-body p (0.28) の 3 グループ。 */
  @keyframes craftsmanship-leather-title-color-in {
    from { color: oklch(0.98 0 0); }
    to   { color: oklch(0.2 0.005 70); }
  }

  @keyframes craftsmanship-leather-title-en-color-in {
    from { color: oklch(0.98 0 0); }
    to   { color: oklch(0.45 0.008 70); }
  }

  @keyframes craftsmanship-leather-body-color-in {
    from { color: oklch(0.98 0 0); }
    to   { color: oklch(0.28 0.005 70); }
  }

  .craftsmanship-leather__inner {
    inline-size: min(100%, 80rem);
    margin-inline: auto;
    display: grid;
    row-gap: clamp(2rem, 5vw, 3.5rem);
    text-align: start;
  }

  .craftsmanship-leather__heading {
    margin: 0;
    display: grid;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
  }

  .craftsmanship-leather__title {
    font-family: var(--font-jp);
    font-size: clamp(1.625rem, calc(1.27rem + 1.53vw), 2rem);
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.7;
    color: oklch(0.2 0.005 70);
    text-wrap: balance;
    /* SP/TB で「革の個性を、そのままに。」(11 文字) を 1 行に強制。
       balance による意図しない 2 行折り返しを防ぐ。 */
    white-space: nowrap;
    margin: 0;
    display: block;
  }

  @media (width >= 768px) {
    .craftsmanship-leather__title {
      font-size: 2rem;
    }
  }

  @media (width >= 1024px) {
    .craftsmanship-leather__title {
      font-size: clamp(1.875rem, 0.34rem + 2.4vw, 2.5rem);
    }
  }

  .craftsmanship-leather__title-line {
    display: block;
    overflow: hidden;
    padding-block-end: 0.2em;
  }

  .craftsmanship-leather__title-line > span {
    display: block;
    transform: translate3d(0, calc(100% + 0.2em), 0);
    transition: transform 1.2s cubic-bezier(0.87, 0, 0.13, 1);
  }

  .craftsmanship-leather__title.is-revealed .craftsmanship-leather__title-line > span {
    transform: translate3d(0, 0, 0);
  }

  .craftsmanship-leather__title.is-revealed .craftsmanship-leather__title-line:nth-child(2) > span {
    transition-delay: 0.15s;
  }

  @media (prefers-reduced-motion: reduce) {
    .craftsmanship-leather__title-line > span {
      transform: translate3d(0, 0, 0);
      transition: none;
    }
  }

  .craftsmanship-leather__title-en {
    font-family: var(--font-en);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.2;
    color: oklch(0.45 0.008 70);
    margin: 0;
    padding-inline-start: 0.2em;
  }

  @media (width >= 768px) {
    .craftsmanship-leather__title-en {
      font-size: 0.875rem;
    }
  }

  @media (width >= 1024px) {
    .craftsmanship-leather__title-en {
      font-size: 1rem;
    }
  }

  .craftsmanship-leather__lead {
    font-family: var(--font-jp);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 2.2;
    color: oklch(0.28 0.005 70);
    text-wrap: wrap;
    margin: 0;
    max-inline-size: 48rem;
  }

  /* SP のみ: lead 内の <br> による改行を無効化して、 自然な折り返しに任せる。 */
  @media (width < 768px) {
    .craftsmanship-leather__lead br {
      display: none;
    }
  }

  /* details: philosophy-history__inner と同じ 80rem 中央寄せ + 1fr:1.6fr 2カラム構成。
     PC (>=1024) では grid 2カラムで [media-pane sticky | text-pane scroll]、
     1024-1279 のみ 1.1fr:1.4fr に切替。
     SP (<1024) では single カラムで text-pane のみ表示 (media-pane は隠し、
     各 article 内の __detail-image をインラインで使う)。
     position: relative は media-pane の sticky の containing block として必要
     (これがないと section が containing block になり、sticky 解除位置が後ろにずれる)。 */
  .craftsmanship-leather__details {
    position: relative;
    inline-size: min(100%, 80rem);
    margin-inline: auto;
    /* __lead と __details の距離を craftsmanship-intro__inner の gap と揃える */
    margin-block-start: clamp(4rem, 11vw, 8rem);
    display: grid;
    grid-template-columns: 1fr;
    text-align: start;
  }

  @media (width >= 1024px) {
    .craftsmanship-leather__details {
      /* PC でも craftsmanship-intro__inner の gap (PC) と同じ値に揃える */
      margin-block-start: clamp(4rem, 8vw, 7rem);
    }
  }

  /* text-pane: SP は 1 カラム縦積み、PC (>=1024) は 3 カラム横並び。
     card の見た目を共通化することで、PC でも各素材を一望できるカード一覧として
     提示する。row-gap は SP 用、column-gap は PC 用に分けて指定。 */
  .craftsmanship-leather__text-pane {
    display: grid;
    row-gap: clamp(2rem, 4.5vw, 3.5rem);
  }

  @media (width < 768px) {
    .craftsmanship-leather__text-pane {
      /* SP では記事間の縦距離を 2 倍に取って、 各 article の独立感を出す */
      row-gap: clamp(4rem, 9vw, 7rem);
    }
  }

  @media (768px <= width < 1024px) {
    .craftsmanship-leather__text-pane {
      /* TB は base の 2 倍を取って 3 カードの境界を明確化 */
      row-gap: clamp(4rem, 9vw, 7rem);
    }
  }

  @media (width >= 1024px) {
    .craftsmanship-leather__text-pane {
      /* PC でも 1 カラム縦積み。 横並び廃止。 row-gap で記事間の縦距離を取る。 */
      grid-template-columns: 1fr;
      column-gap: 0;
      row-gap: clamp(4rem, 8vw, 6rem);
    }
  }

  /* article (= detail): SP は image + content 縦積み、PC は content のみ
     (image は media-pane が代替)。 */
  .craftsmanship-leather__detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 3rem);
    /* section padding が外側で効いているため、 detail 側で再度 padding を入れると
       二重に効いて content が短く見える。 padding はかけず section padding に
       一任する。 */
    padding-inline: 0;
    justify-items: center;
  }

  /* SP / PC 共通: 親画像 (上) + テキスト (下) の素直な縦積み。
     カード方式 (背景画像オーバーレイ + ベージュベタなど) は廃止し、 各 article は
     leather セクションのベージュ背景の上に直置きされる構造。
     PC では text-pane の 3 カラム grid 内で 3 記事が横並ぶ。 */
  .craftsmanship-leather__detail-card {
    display: grid;
    gap: clamp(1.5rem, 4vw, 2.5rem);
  }

  /* 親画像: 各記事の上部に配置。 PC は 2:1 (元画像 1600x800)、 SP は 768/500
     (元画像 768x500) で、 各 viewport の元素材比に合わせてクロップ無しで表示。
     __details が中央寄せされているので、 左端は親 (__details, 80rem max) の
     左端 = craftsmanship-intro__text と同じ位置、 右端は section padding を超えて
     viewport 右端まで延ばす。 */
  .craftsmanship-leather__detail-image {
    display: block;
    position: relative;
    inline-size: calc(100% + (100vw - 100%) / 2);
    margin: 0;
    aspect-ratio: 2 / 1;
    overflow: hidden;
  }

  @media (width < 1024px) {
    .craftsmanship-leather__detail-image {
      aspect-ratio: 768 / 500;
    }
  }

  /* 2 層の picture を絶対配置で重ねる。 PC では layer-1 ↔ layer-2 が 5 秒ごとに
     入れ替わり、 次の画像が右からスライドインして前面を上書きする。 */
  .craftsmanship-leather__detail-image-layer {
    display: block;
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
  }

  .craftsmanship-leather__detail-image-layer img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* 2 層を 10s 周期で交互にスライドイン (SP / TB / PC 共通)。
     同一の keyframes を 5s ずらして適用。
     - 0%   : 右側待機 (translate 100%) / z 最下層
     - 30%  : 右端で z 最上層に上げる (スライドの直前)
     - 30-50%: 右から左へ slide (2s, hero と同じ cubic-bezier)。 ここで前面に被さる
     - 50%+ : 中央に着地 (z 2 に下げて常時表示)
     - 80%  : 反対層が被さってくるので z 最下層に下がる (見た目はそのまま)
     - 100% : 次サイクルへ向け右端へ瞬間移動 (反対層が前面で隠してくれる) */
  .craftsmanship-leather__detail-image-layer--1 {
    animation: craftsmanship-leather-img-cycle 10s linear infinite;
    animation-delay: -5s;
    will-change: translate, z-index;
  }
  .craftsmanship-leather__detail-image-layer--2 {
    animation: craftsmanship-leather-img-cycle 10s linear infinite;
    will-change: translate, z-index;
  }

  /* slide 区間を 20% (= 2s / 10s cycle) に拡張し、 top hero の wipe と同じ
     cubic-bezier(0.79, 0.01, 0.03, 1) で "両端ゆっくり中盤一気" の S 字を効かせる。 */
  @keyframes craftsmanship-leather-img-cycle {
    0%     { translate: 100% 0; z-index: 1; }
    29.99% { translate: 100% 0; z-index: 1; }
    30%    { translate: 100% 0; z-index: 3; animation-timing-function: cubic-bezier(0.79, 0.01, 0.03, 1); }
    50%    { translate: 0 0; z-index: 3; }
    50.01% { translate: 0 0; z-index: 2; }
    79.99% { translate: 0 0; z-index: 2; }
    80%    { translate: 0 0; z-index: 1; }
    99.99% { translate: 0 0; z-index: 1; }
    100%   { translate: 100% 0; z-index: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .craftsmanship-leather__detail-image-layer--1,
    .craftsmanship-leather__detail-image-layer--2 {
      animation: none;
    }
  }


  @media (width >= 1024px) {
    .craftsmanship-leather__detail {
      align-content: start;
      padding-inline: 0;
    }
  }

  /* heading + body 縦積みコンテンツ。text-pane の中央に置く */
  .craftsmanship-leather__detail-content {
    display: grid;
    row-gap: clamp(1.5rem, 3vw, 2.5rem);
    inline-size: 100%;
    /* SP/TB で __lead の max-inline-size (48rem) と揃える */
    max-inline-size: 48rem;
    justify-self: center;
    align-content: center;
  }

  @media (width >= 1024px) {
    .craftsmanship-leather__detail-content {
      /* PC では heading (左) + body (右) の 2 カラム横並び。
         max-inline-size は親 detail-card の幅 (= 80rem max) まで広げる。
         本文側に重みを置いた 1:2 比率。 */
      grid-template-columns: 1fr 2fr;
      column-gap: clamp(3rem, 6vw, 6rem);
      row-gap: 0;
      max-inline-size: none;
      align-items: start;
    }
  }

  .craftsmanship-leather__detail-heading {
    display: grid;
    row-gap: clamp(0.75rem, 1.5vw, 1.25rem);
  }

  /* 番号 (01, 02, 03)。philosophy-logic__detail-num と同じサイズ感に揃える。
     色は本文タイトルと同じ dark に統一。 entry 中の dark 背景下では下記
     @supports ブロックで白 → dark へスナップ。 */
  .craftsmanship-leather__detail-num {
    font-family: var(--font-en);
    font-size: 0.875rem; /* 14px */
    font-weight: 400;
    letter-spacing: 0.16em;
    color: oklch(0.2 0.005 70);
    line-height: 1;
    display: block;
  }

  /* h3: philosophy-logic__detail-title と揃える。
     SP/TB: 20px 固定、PC (1024~): 20→23px fluid。
     明色ベージュ背景前提で暗色文字。 */
  .craftsmanship-leather__detail-title {
    font-family: var(--font-jp);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.6;
    color: oklch(0.2 0.005 70);
    text-wrap: balance;
    margin: 0;
    display: block;
  }

  @media (width >= 1024px) {
    .craftsmanship-leather__detail-title {
      /* 1024px: 24px, 1440px: 28px, それ以上は固定 28px。 */
      font-size: clamp(1.5rem, calc(0.88rem + 0.96vw), 1.75rem);
    }
  }

  .craftsmanship-leather__detail-title-line {
    display: block;
    overflow: hidden;
    padding-block-end: 0.15em;
  }

  .craftsmanship-leather__detail-title-line > span {
    display: block;
    transform: translate3d(0, calc(100% + 0.15em), 0);
    transition: transform 1.1s cubic-bezier(0.87, 0, 0.13, 1);
  }

  .craftsmanship-leather__detail-title.is-revealed .craftsmanship-leather__detail-title-line > span {
    transform: translate3d(0, 0, 0);
  }

  .craftsmanship-leather__detail-title.is-revealed .craftsmanship-leather__detail-title-line:nth-child(2) > span {
    transition-delay: 0.12s;
  }

  @media (prefers-reduced-motion: reduce) {
    .craftsmanship-leather__detail-title-line > span {
      transform: translate3d(0, 0, 0);
      transition: none;
    }
  }

  .craftsmanship-leather__detail-body {
    display: grid;
    row-gap: clamp(1rem, 2vw, 1.5rem);
  }

  .craftsmanship-leather__detail-body p {
    font-family: var(--font-jp);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 2.1;
    color: oklch(0.28 0.005 70);
    text-wrap: wrap;
    margin: 0;
  }

  /* 本文末尾の仕様表 (左ラベル / 右内容の行ヘッダー型)。
     色は親から継承 (= section の bg color アニメに同調)、 区切り線は currentColor
     を薄めた半透明で dark/light bg いずれでも視認できる中間トーンに。
     左列 (th) は短いラベル固定幅、 右列 (td) が広く取って多行コンテンツに対応。 */
  .craftsmanship-leather__detail-spec {
    inline-size: 100%;
    border-collapse: collapse;
    font-family: var(--font-jp);
    font-size: 0.9375rem;
    line-height: 1.8;
    letter-spacing: 0.04em;
    text-align: start;
    margin: 0;
    margin-block-start: clamp(0.5rem, 1.5vw, 1rem);
  }

  .craftsmanship-leather__detail-spec th,
  .craftsmanship-leather__detail-spec td {
    padding-block: 1.25em;
    text-align: start;
    vertical-align: top;
    border-block-end: 1px solid color-mix(in oklch, currentColor 18%, transparent);
  }

  /* 表の最上部にも区切り線を追加 (各行の border-block-end と同トーン)。 */
  .craftsmanship-leather__detail-spec tbody tr:first-child :is(th, td) {
    border-block-start: 1px solid color-mix(in oklch, currentColor 18%, transparent);
  }

  /* 左ラベル (th[scope="row"]): 固定幅、 やや太め。
     6em 程度で 種類 / カラー どちらも収まり、 右内容との間に明確な空きを取る。 */
  .craftsmanship-leather__detail-spec th[scope="row"] {
    inline-size: 8em;
    font-weight: 500;
    letter-spacing: 0.1em;
    padding-inline-end: 1.5em;
    white-space: nowrap;
  }

  .craftsmanship-leather__detail-spec td {
    font-weight: 400;
  }

  /* テキスト色のスナップ切替 (philosophy-history と同パターン): @supports 対応環境で
     leather セクションの暗色 → 明色 fade に合わせて、 各テキストを「白 → 明色背景用色」
     にスナップ。 timeline は親 .craftsmanship-leather の view-timeline-name を参照。
     ソース順で static rule の後に置くことで初期 white を勝たせる。 */
  @supports (animation-timeline: view()) {
    .craftsmanship-leather__title,
    .craftsmanship-leather__title-en,
    .craftsmanship-leather__lead,
    .craftsmanship-leather__detail-num,
    .craftsmanship-leather__detail-title,
    .craftsmanship-leather__detail-body p {
      color: oklch(0.98 0 0);
      animation-timing-function: steps(1, end);
      animation-fill-mode: forwards;
      animation-timeline: --craftsmanship-leather-tl;
      animation-range: entry 100% contain 15dvh;
    }

    .craftsmanship-leather__title,
    .craftsmanship-leather__detail-num,
    .craftsmanship-leather__detail-title {
      animation-name: craftsmanship-leather-title-color-in;
    }

    .craftsmanship-leather__title-en {
      animation-name: craftsmanship-leather-title-en-color-in;
    }

    .craftsmanship-leather__lead,
    .craftsmanship-leather__detail-body p {
      animation-name: craftsmanship-leather-body-color-in;
    }
  }


  /* ================================================================
     TECHNIQUES (NEW 変奏点)
     3 技法を SVG ラインアイコンで象徴。viewport in で線が描画される。
     ================================================================ */
  /* techniques を包む stage。 sticky bg-wrap が techniques section の全期間で
     画面上端にピン留めされ、その上を section content がスクロールする。 */
  .craftsmanship-techniques-stage {
    position: relative;
    isolation: isolate;
    /* bg-wrap の clip-path 範囲外でこの色が見える。 革画像が両端から広がる際、
       外側は leather / voice と同じ色 (#E2E1DA 相当) で段差なく繋がる。 */
    background-color: oklch(0.909 0.009 100);
    overflow: clip;
    /* 子 bg-wrap の clip-path expand アニメで参照する view-timeline。
       stage の entry phase 中に「両端からだんだん広がる」演出を完了させる。 */
    view-timeline-name: --craftsmanship-techniques-stage-tl;
  }

  /* sticky bg。 stage の containing block 内で sticky なので、 leather →
     techniques の境界を越えても画面上端に貼り付く。 革画像は bg1 / bg2 の 2 枚を
     ::before / ::after にそれぞれ敷き、 ::after の opacity を周期トグルさせて
     ふわっと切り替える (philosophy-logic__subtraction と同パターン)。 */
  .craftsmanship-techniques-stage__bg-wrap {
    position: sticky;
    inset-block-start: 0;
    inline-size: 100%;
    block-size: 100dvh;
    z-index: 0;
    background-color: var(--color-bg-deep);
    pointer-events: none;
  }

  .craftsmanship-techniques-stage__bg-wrap::before,
  .craftsmanship-techniques-stage__bg-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: 100vw auto;
    background-position: top center;
  }

  .craftsmanship-techniques-stage__bg-wrap::before {
    background-image: image-set(
      url(../../images/under-craftsmanship/under-craftmanship-leather-bg1.webp) 1x,
      url(../../images/under-craftsmanship/under-craftmanship-leather-bg1@2x.webp) 2x
    );
  }

  /* ::after が透明のタイミングで ::before の bg1 を見せる。 ::after は
     opacity 0 ↔ 1 をループしてふわっと bg2 を被せる。 */
  .craftsmanship-techniques-stage__bg-wrap::after {
    background-image: image-set(
      url(../../images/under-craftsmanship/under-craftmanship-leather-bg2.webp) 1x,
      url(../../images/under-craftsmanship/under-craftmanship-leather-bg2@2x.webp) 2x
    );
    opacity: 0;
    animation: craftsmanship-leather-bg-toggle 12s ease-in-out infinite;
    will-change: opacity;
  }

  /* SP (<1024) では SP 専用の縦長画像に差し替え。
     画像中央を起点に viewport を覆う形 (center + cover) で表示する。 */
  @media (width < 1024px) {
    .craftsmanship-techniques-stage__bg-wrap::before {
      background-image: image-set(
        url(../../images/under-craftsmanship/under-craftmanship-leather-bg1-sp.webp) 1x,
        url(../../images/under-craftsmanship/under-craftmanship-leather-bg1-sp@2x.webp) 2x
      );
      background-position: center;
      background-size: cover;
    }
    .craftsmanship-techniques-stage__bg-wrap::after {
      background-image: image-set(
        url(../../images/under-craftsmanship/under-craftmanship-leather-bg2-sp.webp) 1x,
        url(../../images/under-craftsmanship/under-craftmanship-leather-bg2-sp@2x.webp) 2x
      );
      background-position: center;
      background-size: cover;
    }
  }

  /* bg1 ↔ bg2 の crossfade ループ (philosophy-logic__subtraction と同形)。
     0-25% bg1 のみ、 25-50% で bg2 が fade in、 50-75% bg2 のみ、 75-100% で bg2 が fade out。 */
  @keyframes craftsmanship-leather-bg-toggle {
    0%   { opacity: 0; }
    25%  { opacity: 0; }
    50%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .craftsmanship-techniques-stage__bg-wrap::after {
      animation: none;
      opacity: 0;
    }
  }

  /* スクロール連動で bg-wrap の表示幅を両端から広げる演出。
     voice__bleed-image と同じ clip-path inset パターン。 stage が viewport
     下から登場する entry phase の間に「真ん中の細い帯」→「画面全幅」へ展開。
     range は entry 50% まで = stage 上端が画面中央に来た時点で開ききる
     (top ページの craftmanship-bg-window と同じタイミング)。 */
  @supports (animation-timeline: view()) {
    .craftsmanship-techniques-stage__bg-wrap {
      clip-path: inset(0 clamp(2rem, 12vw, 12rem));
      animation: craftsmanship-techniques-bg-expand linear forwards;
      animation-timeline: --craftsmanship-techniques-stage-tl;
      animation-range: entry 0% entry 50%;
    }
  }

  @keyframes craftsmanship-techniques-bg-expand {
    from { clip-path: inset(0 clamp(2rem, 12vw, 12rem)); }
    to   { clip-path: inset(0 0); }
  }

  /* techniques: stage の sticky bg-wrap (leather 画像) の上に乗る。
     margin-block-start: -100dvh で stage 先頭の bg-wrap と重ね、 z-index: 1 で
     content を bg より前面に。 各 technique は縦並びで、 ブロック内は symbol (上) +
     content (下)。 PC 以上では 3 列横並び + 縦罫線。 */
  .craftsmanship-techniques {
    position: relative;
    z-index: 1;
    background-color: transparent;
    margin-block-start: -100dvh;
  }

  .craftsmanship-techniques__inner {
    inline-size: min(100%, 80rem);
    margin-inline: auto;
    display: grid;
    row-gap: clamp(3rem, 7vw, 5rem);
  }

  .craftsmanship-techniques__heading {
    margin: 0;
    display: grid;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
  }

  .craftsmanship-techniques__title {
    font-family: var(--font-jp);
    font-size: clamp(1.625rem, calc(1.27rem + 1.53vw), 2rem);
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.7;
    color: oklch(0.98 0 0);
    text-wrap: balance;
    margin: 0;
    display: block;
  }

  @media (width >= 768px) {
    .craftsmanship-techniques__title {
      font-size: 2rem;
    }
  }

  @media (width >= 1024px) {
    .craftsmanship-techniques__title {
      font-size: clamp(1.875rem, 0.34rem + 2.4vw, 2.5rem);
    }
  }

  .craftsmanship-techniques__title-line {
    display: block;
    overflow: hidden;
    padding-block-end: 0.2em;
  }

  .craftsmanship-techniques__title-line > span {
    display: block;
    transform: translate3d(0, calc(100% + 0.2em), 0);
    transition: transform 1.2s cubic-bezier(0.87, 0, 0.13, 1);
  }

  .craftsmanship-techniques__title.is-revealed .craftsmanship-techniques__title-line > span {
    transform: translate3d(0, 0, 0);
  }

  .craftsmanship-techniques__title.is-revealed .craftsmanship-techniques__title-line:nth-child(2) > span {
    transition-delay: 0.15s;
  }

  @media (prefers-reduced-motion: reduce) {
    .craftsmanship-techniques__title-line > span {
      transform: translate3d(0, 0, 0);
      transition: none;
    }
  }

  .craftsmanship-techniques__title-en {
    font-family: var(--font-en);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.2;
    color: oklch(0.78 0.012 70);
    margin: 0;
    padding-inline-start: 0.2em;
  }

  @media (width >= 768px) {
    .craftsmanship-techniques__title-en {
      font-size: 0.875rem;
    }
  }

  @media (width >= 1024px) {
    .craftsmanship-techniques__title-en {
      font-size: 1rem;
    }
  }

  .craftsmanship-techniques__lead {
    font-family: var(--font-jp);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 2.2;
    color: oklch(0.92 0.005 70);
    text-wrap: balance;
    margin: 0;
    max-inline-size: 50rem;
  }

  .craftsmanship-techniques__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    row-gap: 0;
    margin-block-start: clamp(2rem, 5vw, 4rem);
  }

  /* 各技法ブロック: symbol (上) + content (下) の縦積み。 SP では 3 つ縦に
     並び、水平 hairline で区切る。 TB 以上では 3 列横並びになり、 罫線は
     縦方向の hairline (border-inline) に切り替わる。 */
  .craftsmanship-technique {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 3vw, 2rem);
    justify-items: start;
    text-align: start;
    padding-block: clamp(2.5rem, 6vw, 5rem);
    border-block-end: 1px solid oklch(1 0 0 / 0.15);
  }

  .craftsmanship-technique:first-child {
    border-block-start: 1px solid oklch(1 0 0 / 0.15);
  }

  /* TB+ : 3 列横並び。 縦罫線で区切り、 padding は inline 方向に。
     :first-child の border-block-start を打ち消すために :first-child も対象に含める。 */
  @media (width >= 768px) {
    .craftsmanship-techniques__list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: stretch;
    }

    .craftsmanship-technique,
    .craftsmanship-technique:first-child {
      padding-block: 0;
      padding-inline: clamp(1.25rem, 3vw, 2.5rem);
      border-block: none;
    }

    /* 1 番左の card は section の左端 (=見出しの左端) と揃える */
    .craftsmanship-technique:first-child {
      padding-inline-start: 0;
    }

    /* 1 番右の card は section の右端と揃える */
    .craftsmanship-technique:last-child {
      padding-inline-end: 0;
    }

    /* 隣接 card 間の縦罫線 */
    .craftsmanship-technique + .craftsmanship-technique {
      border-inline-start: 1px solid oklch(1 0 0 / 0.15);
    }
  }

  /* シンボル枠: 細い円形ボーダー + 中央クロスヘア + SVG。
     横並びレイアウトに合わせて SP では小さめに、 PC では大きくスケール。 */
  .craftsmanship-technique__symbol {
    inline-size: clamp(6rem, 16vw, 13rem);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 0.5px solid oklch(1 0 0 / 0.3);
    border-radius: 50%;
    color: var(--color-accent-light);
    padding: clamp(1rem, 2.5vw, 2rem);
    position: relative;
    flex-shrink: 0;
  }

  /* 円中心のクロスヘア (philosophy-logic ring を踏襲したミニマル装飾) */
  .craftsmanship-technique__symbol::before,
  .craftsmanship-technique__symbol::after {
    content: '';
    position: absolute;
    background-color: oklch(1 0 0 / 0.18);
  }

  .craftsmanship-technique__symbol::before {
    inset-inline-start: 50%;
    inset-block: 14%;
    inline-size: 1px;
    transform: translateX(-0.5px);
  }

  .craftsmanship-technique__symbol::after {
    inset-block-start: 50%;
    inset-inline: 14%;
    block-size: 1px;
    transform: translateY(-0.5px);
  }

  .craftsmanship-technique__icon {
    inline-size: 100%;
    block-size: auto;
    display: block;
    position: relative;
    z-index: 1;
  }

  /* SVG 描画アニメ:
     pathLength="100" + stroke-dasharray="100" の組み合わせで線を非表示にし、
     is-icon-drawn 付与時に stroke-dashoffset を 100→0 にして線を描画する。
     破線スタイルの stroke-dasharray は inline で別値を持つので個別対応。 */
  .craftsmanship-technique__draw {
    transition: stroke-dashoffset 1.6s cubic-bezier(0.65, 0, 0.35, 1);
  }

  .craftsmanship-technique__draw--delay {
    transition: stroke-dashoffset 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.4s;
  }

  .craftsmanship-technique__draw--dot {
    transition: opacity 0.6s ease-out 1.6s;
  }

  .craftsmanship-technique.is-icon-drawn .craftsmanship-technique__draw,
  .craftsmanship-technique.is-icon-drawn .craftsmanship-technique__draw--delay {
    stroke-dashoffset: 0;
  }

  .craftsmanship-technique.is-icon-drawn .craftsmanship-technique__draw--dot {
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .craftsmanship-technique__draw,
    .craftsmanship-technique__draw--delay,
    .craftsmanship-technique__draw--dot {
      transition: none;
      stroke-dashoffset: 0;
      opacity: 1;
    }
  }

  .craftsmanship-technique__content {
    display: grid;
    row-gap: clamp(0.75rem, 1.5vw, 1.25rem);
    inline-size: 100%;
    max-inline-size: 40rem;
  }

  .craftsmanship-technique__num {
    font-family: var(--font-en);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    color: oklch(0.98 0 0);
    line-height: 1;
    display: block;
  }

  /* h3: philosophy-logic__detail-title と揃える。
     SP/TB: 20px 固定、PC (1024~): 20→23px fluid。 */
  .craftsmanship-technique__title {
    font-family: var(--font-jp);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.6;
    color: oklch(0.98 0 0);
    text-wrap: balance;
    margin: 0;
    display: block;
  }

  @media (width >= 1024px) {
    .craftsmanship-technique__title {
      /* 1024px: 24px, 1440px: 28px, それ以上は固定 28px (leather__detail-title と揃え) */
      font-size: clamp(1.5rem, calc(0.88rem + 0.96vw), 1.75rem);
    }
  }

  .craftsmanship-technique__title-line {
    display: block;
    overflow: hidden;
    padding-block-end: 0.15em;
  }

  .craftsmanship-technique__title-line > span {
    display: block;
    transform: translate3d(0, calc(100% + 0.15em), 0);
    transition: transform 1.1s cubic-bezier(0.87, 0, 0.13, 1);
  }

  .craftsmanship-technique__title.is-revealed .craftsmanship-technique__title-line > span {
    transform: translate3d(0, 0, 0);
  }

  .craftsmanship-technique__title.is-revealed .craftsmanship-technique__title-line:nth-child(2) > span {
    transition-delay: 0.12s;
  }

  @media (prefers-reduced-motion: reduce) {
    .craftsmanship-technique__title-line > span {
      transform: translate3d(0, 0, 0);
      transition: none;
    }
  }

  .craftsmanship-technique__body {
    display: grid;
    row-gap: clamp(1rem, 2vw, 1.5rem);
    margin-block-start: clamp(0.75rem, 1.5vw, 1.25rem);
  }

  /* 旧 PC zig-zag 時代の __body max-inline-size 制限はここに削除済み。
     新 3-col レイアウトでは column-width 追従 (= 100%) を前段の override で適用。 */

  .craftsmanship-technique__body p {
    font-family: var(--font-jp);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 2.1;
    color: oklch(0.92 0.005 70);
    text-wrap: wrap;
    max-inline-size: 38rem;
    margin: 0;
  }


  /* ================================================================
     VOICE — 職人より (Q&A フォーマット)
     leather / techniques-stage と同じオフホワイト bg。 共通 section padding の
     --color-bg-primary (dark) を上書きする。
     ================================================================ */
  .craftsmanship-voice {
    position: relative;
    /* top ページ craftsmanship セクションと同色 (#E2E1DA 相当) */
    background-color: oklch(0.909 0.009 100);
  }

  .craftsmanship-voice__inner {
    inline-size: min(100%, 80rem);
    margin-inline: auto;
    display: grid;
    row-gap: clamp(2.5rem, 6vw, 4.5rem);
  }

  /* PC は他セクション (80rem) より約 20% 狭い 64rem に絞る */
  @media (width >= 1024px) {
    .craftsmanship-voice__inner {
      inline-size: min(100%, 64rem);
    }
  }

  .craftsmanship-voice__heading {
    margin: 0;
    display: grid;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    text-align: center;
  }

  .craftsmanship-voice__title {
    font-family: var(--font-jp);
    font-size: clamp(1.625rem, calc(1.27rem + 1.53vw), 2rem);
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.7;
    color: oklch(0.2 0.005 70);
    text-wrap: balance;
    margin: 0;
    display: block;
  }

  @media (width >= 768px) {
    .craftsmanship-voice__title {
      font-size: 2rem;
    }
  }

  @media (width >= 1024px) {
    .craftsmanship-voice__title {
      font-size: clamp(1.875rem, 0.34rem + 2.4vw, 2.5rem);
    }
  }

  .craftsmanship-voice__title-line {
    display: block;
    overflow: hidden;
    padding-block-end: 0.2em;
  }

  .craftsmanship-voice__title-line > span {
    display: block;
    transform: translate3d(0, calc(100% + 0.2em), 0);
    transition: transform 1.2s cubic-bezier(0.87, 0, 0.13, 1);
  }

  .craftsmanship-voice__title.is-revealed .craftsmanship-voice__title-line > span {
    transform: translate3d(0, 0, 0);
  }

  .craftsmanship-voice__title.is-revealed .craftsmanship-voice__title-line:nth-child(2) > span {
    transition-delay: 0.15s;
  }

  @media (prefers-reduced-motion: reduce) {
    .craftsmanship-voice__title-line > span {
      transform: translate3d(0, 0, 0);
      transition: none;
    }
  }

  .craftsmanship-voice__title-en {
    font-family: var(--font-en);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.2;
    color: oklch(0.45 0.008 70);
    margin: 0;
    padding-inline-start: 0.2em;
  }

  @media (width >= 768px) {
    .craftsmanship-voice__title-en {
      font-size: 0.875rem;
    }
  }

  @media (width >= 1024px) {
    .craftsmanship-voice__title-en {
      font-size: 1rem;
    }
  }

  /* 質問 + 回答の縦並びリスト。 上下に外枠線、 item 間にも区切り線。 */
  .craftsmanship-voice__qa {
    margin: 0;
    border-block: 1px solid oklch(0.2 0.005 70 / 0.2);
    padding-block: clamp(1.8rem, 3.6vw, 3rem);
  }

  /* SP: 線とテキストの間隔を philosophy-logic__details と同じ 2.5rem に揃える */
  @media (width < 768px) {
    .craftsmanship-voice__qa {
      padding-block: 2.5rem;
    }
  }

  /* item は question (dt) + answer (dd) の縦積み (全 viewport)。 */
  .craftsmanship-voice__item {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: clamp(1.25rem, 2.5vw, 2rem);
  }

  /* item 同士の区切り線 (最初の item には付かない) */
  .craftsmanship-voice__item + .craftsmanship-voice__item {
    border-block-start: 1px solid oklch(0.2 0.005 70 / 0.2);
    margin-block-start: clamp(1.8rem, 3.6vw, 3rem);
    padding-block-start: clamp(1.8rem, 3.6vw, 3rem);
  }

  /* SP: 区切り線とテキストの間隔を philosophy-logic__detail と同じ 2.5rem に揃える */
  @media (width < 768px) {
    .craftsmanship-voice__item + .craftsmanship-voice__item {
      margin-block-start: 2.5rem;
      padding-block-start: 2.5rem;
    }
  }

  /* dt (質問)。 leather__detail-title より一段小さめのサイズ。
     SP/TB: 18px、 PC (1024~): 20→24px fluid。 */
  .craftsmanship-voice__question {
    font-family: var(--font-jp);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.8;
    color: oklch(0.2 0.005 70);
    text-wrap: balance;
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: clamp(0.75rem, 1.5vw, 1.25rem);
    align-items: center;
  }

  @media (width >= 1024px) {
    .craftsmanship-voice__question {
      /* 1024px: 20px, 1440px: 24px、 それ以上は固定 24px */
      font-size: clamp(1.25rem, calc(0.7rem + 0.86vw), 1.5rem);
    }
  }

  /* Q マークは「Q」一文字を丸枠で囲んだバッジ。 ドットは廃止。 */
  .craftsmanship-voice__q-mark {
    font-family: var(--font-en);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--color-accent-light);
    line-height: 1;
    display: inline-grid;
    place-items: center;
    inline-size: 2.4em;
    block-size: 2.4em;
    border: 1px solid currentColor;
    border-radius: 50%;
    align-self: center;
  }

  .craftsmanship-voice__q-text {
    display: block;
  }

  /* 回答は質問テキストの開始位置 (Q バッジの右端 + column-gap) に揃えてインデント。 */
  .craftsmanship-voice__answer {
    margin: 0;
    display: grid;
    row-gap: clamp(1rem, 2vw, 1.5rem);
    margin-inline-start: calc(2.4 * 0.8125rem + clamp(0.75rem, 1.5vw, 1.25rem));
  }

  .craftsmanship-voice__answer p {
    font-family: var(--font-jp);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 2.1;
    color: oklch(0.28 0.005 70);
    margin: 0;
  }

  /* SP のみ: 本文系 p の line-height を一律 1.9 に縮めて、 縦の詰まりを少し増す。
     PC/TB は各ブロックの既存値 (2.1 / 2.2) を維持する。 */
  @media (width < 768px) {
    .craftsmanship-intro__lead,
    .craftsmanship-leather__lead,
    .craftsmanship-leather__detail-body p,
    .craftsmanship-techniques__lead,
    .craftsmanship-technique__body p,
    .craftsmanship-voice__answer p {
      line-height: 1.9;
    }

    /* 本文 body の段落間 row-gap を 0.75rem に統一して少し詰める。
       PC/TB は各ブロックの既存 clamp 値を維持する。 */
    .craftsmanship-intro__body,
    .craftsmanship-leather__detail-body,
    .craftsmanship-technique__body,
    .craftsmanship-voice__answer {
      row-gap: 0.75rem;
    }
  }

}