/* 東京ゆかた株式会社 — 2026年改修分のスタイル
   既存の style.css の後に読み込む。改修で追加・変更した部分のみここに書く。 */

:root {
  --ty-cream:  oklch(0.98 0.008 80);
  --ty-ink:    oklch(0.15 0.01 60);
  --ty-body:   oklch(0.40 0.01 60);
  --ty-line:   oklch(0.88 0.01 80);
  --ty-navy:   oklch(0.28 0.08 250);
  --ty-serif:  "Noto Serif JP", serif;
  --ty-en:     "EB Garamond", Georgia, serif;
}

/* ── ヒーローの見出し（デザイナーの字組をそのまま使うため画像化）──────
   alt に本文を入れてあるので、検索エンジン・読み上げには文字として伝わる。 */
.hero-title { margin: 0 0 1.5rem; line-height: 0; }
.hero-title img {
  display: block;
  width: 100%;
  max-width: 327px;   /* Figma 実寸（新規パーツは実寸CSSで描かれている） */
  height: auto;
}
@media (max-width: 767px) {
  /* Figma の top-SP（375px幅）実測 … 左右の余白 20px、見出し画像の幅 約210px、
     説明文は12px で「…昭和二十六年創業、／東京・日本橋。」と折り返す */
  .hero-panel { padding-left: 1.25rem; padding-right: 1.25rem; }
  .hero-title img { max-width: 210px; }
  .hero-panel__inner p { font-size: 12px; }
  /* 改行は PC と同じ「…製造卸。／昭和二十六年創業、東京・日本橋。」（#27 #44） */
  .hero-panel__inner p .sp-br { display: none; }
}

/* ── お祭天国 オンラインショップ帯 ─────────────────────────── */
.shop-band {
  display: grid;
  grid-template-columns: 63fr 37fr;
  /* Figma の地色は、ページ背景よりはっきり濃い温かみのあるベージュ。
     var(--ty-cream) はページ背景と同色で、帯が背景に溶けていた。 */
  background: #eae5dd;
  margin: 0 auto 4.5rem;
  overflow: hidden;
}
.shop-band__visual { margin: 0; }
.shop-band__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.shop-band__body {
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Figma では青海波・麻の葉が右パネルのほぼ全面に大きく入っている
     （右下の小さな飾りではない）。右端から左下へ流れる形。 */
  background-image: url("/assets/img/pattern-seigaiha.png");
  background-repeat: no-repeat;
  background-position: right -25px bottom -20px;
  background-size: 460px auto;
}
.shop-band__title {
  font-family: var(--ty-serif);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--ty-ink);
  margin: .35rem 0 .9rem;
}
.shop-band__text {
  font-family: var(--ty-serif);
  font-size: .8125rem;
  line-height: 2;
  letter-spacing: .04em;
  color: var(--ty-body);
  margin: 0 0 1.5rem;
}
.shop-band__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* PC：帯の左右の端をヘッダーのロゴ左端・ナビ右端（＝コンテナ幅）に揃える。
   Figma ではそう揃っている。以前は 1076px で止めていたため左右が内側に寄り、
   狭く見えていた。
   写真の縦横比は Figma（写真部分 678×316）に固定し、幅に応じて帯の高さも伸びる。 */
@media (min-width: 1280px) {
  /* 1279px 以下では文字側の列が狭く、文章の方が写真より背が高くなるため
     縦横比は固定しない（写真が文章の高さに合わせて伸びる） */
  .shop-band { container-type: inline-size; }
  /* 帯の高さは Figma の比率（1076×316）を最低限とし、文章の方が長ければ伸びる。
     aspect-ratio を写真に付けると、行の高さから幅が逆算されて
     文字の列を押し潰すため、帯の幅（100cqw）から min-height で指定する。 */
  .shop-band__visual { min-width: 0; min-height: calc(100cqw * 316 / 1076); }

  /* 帯の中身は Figma の Group8（幅1076px・3倍書き出し）を実測して合わせる：
     文字のかたまりは幅320px・写真のすぐ右から始まる、
     ボタンは1つ幅約154px×高さ44px、文字約15pxの太字。
     写真は帯の幅に合わせて大きくなるので、中身も同じ比率で拡大する
     （em 指定にして、帯の font-size だけで全体の倍率を決める）。
       倍率は帯の実際の幅から計算する（100cqw = 帯の幅、Figma では 1076px で 16px）。 */
  .shop-band__body { font-size: calc(100cqw * 16 / 1076); }
  .shop-band__body {
    padding: 1.5em 2em 1.5em .75em;
    /* 文様も帯と一緒に拡大（460px・右-25px/下-20px を 16px 基準で em に換算） */
    background-size: 28.75em auto;
    background-position: right -1.5625em bottom -1.25em;
  }
  /* 幅320px 相当。em は各要素自身の文字サイズ基準になるので、要素ごとに換算する */
  .shop-band__actions { max-width: 20em; }
  .shop-band__body .label-en { font-size: .6875em; }
  .shop-band__title { font-size: 1.3125em; }
  .shop-band__text { font-size: .8125em; margin-bottom: 1.6em; max-width: calc(20em / .8125); }
  /* 横の間隔は％で持つ（em だと親子で文字サイズが違い、合計が100%を超えて折り返す） */
  .shop-band__actions { column-gap: 3.75%; row-gap: .75em; }
  .shop-band__actions > a {
    flex: 0 0 48.125%;
    min-height: calc(44em / 15);   /* 高さ44px 相当 */
    justify-content: center;
    padding: 0 .5em;
    font-size: .9375em;
    font-weight: 600;
    letter-spacing: .04em;
  }
}

/* スマホ：Figma top-SP の帯（Group 21）。
   デザイナー書き出しの「3人の縦構図＋麻の葉・青海波」の画像（文字なし・3倍）を
   帯いっぱいに敷き、見出し・文章・ボタンは HTML で右の空き部分に重ねる。
   画面幅いっぱいに出し、中身は帯の幅（375px 基準）に比例して拡大縮小する。 */
@media (max-width: 767px) {
  .shop-band {
    display: block;
    position: relative;
    /* 左右のコンテナ余白（1.5rem）を打ち消して画面端まで出す。
       100vw はスクロールバー幅を含んで横にはみ出すので使わない */
    margin: 0 -1.5rem 4.5rem;
    aspect-ratio: 1125 / 1527;
    background: #eae5dd url("/assets/img/products/shop-models-sp.jpg") center / cover no-repeat;
    container-type: inline-size;
  }
}
@media (min-width: 520px) and (max-width: 767px) {
  /* タブレット縦など：縦長の帯が大きくなりすぎないよう幅を抑えて中央に */
  .shop-band { max-width: 440px; margin: 0 auto 4.5rem; }
}
@media (max-width: 767px) {
  .shop-band__visual { display: none; }
  .shop-band__body {
    position: absolute;
    top: 0; bottom: 0;
    left: 53%; right: 3%;
    padding: calc(100cqw * 40 / 375) 0 0;
    justify-content: flex-start;
    background: none;
    font-size: calc(100cqw * 16 / 375);
  }
  .shop-band__body .label-en { font-size: .6875em; margin-bottom: .2em; }
  .shop-band__title { font-size: 1.25em; margin: 0 0 .7em; }
  .shop-band__text {
    font-size: .8125em;            /* Figma: 1行11文字 */
    line-height: 2;
    letter-spacing: 0;
    color: var(--ty-ink);
    margin: 0 0 1.1em;
  }
  .shop-band__actions { flex-direction: column; gap: .6em; }
  .shop-band__actions > a {
    justify-content: center;
    min-height: 2.75em;
    padding: 0 .5em;
    font-size: .9375em;
    font-weight: 600;
    letter-spacing: .04em;
  }
}

/* ── 商品カテゴリー（写真グリッド）───────────────────────────
   これまでは文字だけの一覧だった箇所。商品写真を主役にする。 */
.cat-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem 3.7rem;           /* Figma の列間 59px 相当 */
  max-width: 809px;           /* 158px × 4 + 59px × 3 */
  margin: 0 auto;
}
.cat-grid__item { text-align: center; }
/* 各セルは「正方形に商品が収まった1枚の画像」。
   Figma と同じ構図になるよう、原本から切り出して作ってある
   （踊帯・祭用品は2点で1枚）。作り直しは:
     python _archive/tools/make-category-cells.py
   Figma では枠線は付いていないので、枠は引かない。 */
.cat-grid__thumb {
  display: block;
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden;
}
.cat-grid__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cat-grid__label {
  display: block;
  margin-top: .85rem;
  font-family: var(--ty-serif);
  font-size: .8125rem;
  letter-spacing: .08em;
  color: var(--ty-body);
}

/* ── スマホはカルーセル ───────────────────────────────────
   Figma の top-SP / 和装事業SP は、商品カテゴリーを
   「1枚ずつ・左右に矢印・下にドット8個」で見せる指定になっている。
   横スクロール＋スクロールスナップで作ってあるので、
   矢印を使わず指でスワイプしても送れる。
   JS が動かない環境でも、ただの横スクロールとして使える。 */
.cat-carousel { position: relative; }
.cat-carousel__nav,
.cat-carousel__dots { display: none; }

@media (max-width: 767px) {
  .cat-grid {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    width: 100%;
    max-width: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
  }
  .cat-grid::-webkit-scrollbar { display: none; }
  .cat-grid__item { flex: 0 0 100%; scroll-snap-align: center; }
  /* Figma(375px幅)の実測で画像は 208px。
     コンテナの内側余白を差し引いた幅に対する比率にしてある。 */
  .cat-grid__thumb { width: 63.5%; margin-inline: auto; }
  .cat-grid__label { font-size: .8125rem; }

  .cat-carousel__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc(50% - 1.1rem);
    transform: translateY(-50%);
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ty-ink);
    cursor: pointer;
    z-index: 1;
  }
  .cat-carousel__nav--prev { left: 0; }
  .cat-carousel__nav--next { right: 0; }
  .cat-carousel__nav[disabled] { opacity: .2; cursor: default; }

  .cat-carousel__dots {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.1rem;
  }
  .cat-carousel__dots button {
    width: .5rem;
    height: .5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: oklch(0.86 0.01 80);
    cursor: pointer;
  }
  .cat-carousel__dots button[aria-current="true"] { background: var(--ty-navy); }
}


/* ── ヘッダーのナビゲーション ──────────────────────────────
   768〜1023px の幅で項目の文字が途中で折り返していた
   （「和装／事業」「お問い／合わせ」のように割れる）。
   項目内は絶対に折り返さないようにし、その幅では項目間を詰めて収める。 */
/* ロゴの社名・ナビ項目とも、途中で折り返さない */
header a,
header a span,
header nav span {
  white-space: nowrap;
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* 折り返さない代わりに、この幅では全体を少し詰めて収める */
  .container nav { gap: 1rem; }                     /* 2rem → 1rem */
  .container nav > div { padding-left: .75rem; gap: .375rem; }
  /* ロゴが幅を取りすぎてナビと接触するため、社名だけ少し小さく */
  header a[href="/"] span span:first-child { font-size: .95rem; }
  header a[href="/"] { margin-right: 1.25rem; }
  /* ヒーローの英字ラベルが2行になって切れるので、この幅だけ詰める */
  .hero-label { font-size: .6rem; letter-spacing: .18em; white-space: nowrap; }
  /* テキスト面が固定ヘッダーに潜り込むため、上に余白を足して逃がす。
     あわせて幅を広げ、本文が「製／造卸」のように割れないようにする */
  .hero-panel { padding-top: 5rem; width: 52%; }
}

/* ── ヒーロー：Figma の版面に合わせる ─────────────────────────────
   ★Figma の数値の読み方（次に触る人へ）
   各フレームの下敷きになっている「現行サイトのスクリーンショット」は、
   約1905px幅で撮ったものを1400pxに縮小して貼ってある（＝約0.735倍）。
   一方、デザイナーが新しく描いたパーツ（ヒーロー・お祭天国の帯・
   商品カテゴリー）は実寸のCSS px で描かれている。
   根拠: ヒーローの Group 33 が 1400×533 で、現行ヒーローの
        max-w-[1400px] / h-[533px] と完全に一致する。
   したがって —
     新規パーツの数値 → そのまま px として使ってよい
     下敷き部分の数値 → 0.735 で割らないと実寸にならない（比較時は注意）

   ヒーローの実測 … 和紙パネル 678/1400 = 48.4%、文字面は幅340pxで
   パネル内の左右中央（左171・右168）。
   移行直後は 41% ＋ 左詰めだったため、写真の出方と字の位置が食い違っていた。 */
@media (min-width: 768px) {
  /* 写真側に w-[59%] が入っており、単に width を広げても
     flex の縮小に食われてしまうため flex-basis で固定する */
  .hero-panel { flex: 0 0 48.4%; width: 48.4%; }
  .hero-panel__inner {
    max-width: 340px;       /* Figma の文字面の幅 */
    width: 100%;
    margin-inline: auto;    /* パネル内で中央に置く */
  }
  .hero-panel__inner .max-w-sm { max-width: 100%; }
}

/* ── 和装事業ページのヒーロー ─────────────────────────────────
   Figma では「写真の上に見出しを載せる」のをやめ、
   左に和紙パネルを敷いてその上に見出しを置く構成になっている。
   （帯の写真が明るく柄も多いため、載せると WASO BUSINESS がほぼ読めない）
   実測 … PC: パネル幅 400/1400 = 28.6%、帯の高さ 185px
          SP: パネル幅 185/375 = 49.3%、帯の高さ 203px
   見出しはページ共通の .container に載せてあるので、
   他セクションと左端が自動的に揃う。 */
.waso-hero {
  position: relative;
  margin-top: 5rem;            /* 固定ヘッダーの高さ */
  height: 203px;
  overflow: hidden;
}
.waso-hero__panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: 49.3%;
  background: oklch(0.96 0.012 80) url("/assets/img/texture-washi.png") center / cover;
}
.waso-hero__img {
  position: absolute;
  inset: 0 0 0 49.3%;
  width: 50.7%;
  height: 100%;
  object-fit: cover;
}
.waso-hero__text {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;     /* 帯の中で上下中央（Figma と同じ）*/
  align-items: flex-start;
}
@media (min-width: 768px) {
  .waso-hero { height: 185px; }
  .waso-hero__panel { width: 28.6%; }
  .waso-hero__img { inset: 0 0 0 28.6%; width: 71.4%; }
}

/* ── 会社概要の地図の食い出しを直す ─────────────────────────────
   地図ブロックは負のマージンでコンテナから食い出させているが、
   lg 以上で -64px なのに対しコンテナの内側余白は 48px しかなく、
   左右に 16px ずつはみ出していた。
   幅1280pxちょうど（＝コンテナが画面幅と一致する）のときだけ
   横スクロールバーが出る。移行前から同じ状態。 */
@media (min-width: 1024px) {
  .mt-20.overflow-hidden[class*="-mx-16"] { margin-inline: -3rem; }
}

/* 文様の上に乗るボタンは、Figma と同じく地を白で抜く
   （枠線だけだと青海波が透けて文字が読みにくい） */
.shop-band__body .btn-outline { background: #fff; }
.hero-panel__inner .btn-outline { background: #fff; }
/* 上の白地指定が :hover の紺より優先されて、ホバー時に文字が消えていたので戻す */
.shop-band__body .btn-outline:hover,
.hero-panel__inner .btn-outline:hover { background-color: oklch(28% .08 250); }

/* ── 和装事業：カテゴリーの下の購入ボタン ──────────────────────
   Figma コメント#20「『購入はこちらから』という項目をなくし、カテゴリーの配下へまとめました」。
   枠と見出しを外し、ボタン3つ→説明文の順で中央に並べる（SPは縦積み）。 */
.cat-purchase { margin-top: 2.75rem; text-align: center; }
.cat-purchase__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem;
}
.cat-purchase__note {
  margin: 1.25rem 0 0;
  font-family: var(--ty-serif);
  font-size: .8125rem;
  line-height: 2;
  letter-spacing: .04em;
  color: var(--ty-body);
}
.cat-purchase .btn-outline { background: #fff; }
.cat-purchase .btn-outline:hover { background-color: oklch(28% .08 250); }
@media (max-width: 767px) {
  .cat-purchase__actions { flex-direction: column; align-items: center; }
  .cat-purchase__actions > a { min-width: 14rem; justify-content: center; }
}

/* ── トップ「和装事業」の説明文：スマホは左揃え ─────────────────
   Figma コメント#26「左揃えへ変更してください ※他の個所が左揃えのため」（top-SP）。
   PC は中央揃えのまま。スマホでは PC 用の改行も外して流し込みにする。 */
@media (max-width: 767px) {
  .waso-intro { text-align: left; }
  .waso-intro br { display: none; }
}

/* ══ 2026-09-18 デザイナー回答（Figma コメント #32〜#42）════════════════

   ★大きさについて（#32 #33 #36）
   デザイナーは 1400px 幅のデザインを「画面幅いっぱい」のつもりで作っている。
   1400px より広い画面では、ヒーロー・商品カテゴリー・購入ボタンを
   画面幅に比例して大きくする（1400px 以下は従来どおり）。
   連続的に変えられないもの（文字・ボタン）は --z の倍率で段階的に拡大する。 */
:root { --z: 1; }
@media (min-width: 1500px) { :root { --z: 1.071; } }
@media (min-width: 1600px) { :root { --z: 1.143; } }
@media (min-width: 1700px) { :root { --z: 1.214; } }
@media (min-width: 1800px) { :root { --z: 1.286; } }
@media (min-width: 1900px) { :root { --z: 1.357; } }
@media (min-width: 2000px) { :root { --z: 1.429; } }
@media (min-width: 2200px) { :root { --z: 1.571; } }
@media (min-width: 2400px) { :root { --z: 1.714; } }
@media (min-width: 2560px) { :root { --z: 1.829; } }

/* ── トップのヒーロー（#32 画面幅いっぱい／#34 スマホの写真）── */
.top-hero { margin-top: 4rem; }                 /* ヘッダーの下から始める（デザインと同じ） */
@media (max-width: 767px) {
  .top-hero > div:first-child { height: 64vw; min-height: 0; }   /* Figma top-SP：写真 240/375 */
  /* Figma は手前の神輿に寄った構図。神輿が右半分に収まるよう、
     左端を基点に 1.3倍して右へ寄せる（コメント#34 追記） */
  .top-hero > div:first-child img { transform: scale(1.3); transform-origin: 0% 95%; }
  .top-hero > div:first-child > div {
    height: 22%;
    background: linear-gradient(rgba(243,238,230,0), rgb(243,238,230)) !important;
  }
}
@media (min-width: 768px) {
  .top-hero {
    margin-top: 5rem;
    max-width: none;
    height: max(533px, calc(100vw * 533 / 1400));
  }
  .hero-panel__inner { zoom: var(--z); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-panel { padding-top: 0; }                /* ヘッダーに潜らなくなったので不要 */
}

/* ── 商品カテゴリー（#33 #36 大きさ／名前はデザインどおり濃く太く）── */
.cat-grid__label { color: var(--ty-ink); font-weight: 600; }
@media (min-width: 768px) {
  .cat-grid, .cat-purchase { zoom: var(--z); }
}

/* ── トップ：スマホだけ、カルーセルの下に購入ボタン（#35）── */
/* #45：PC でもカテゴリーの下に中央寄せで置く（デザイン top-PC） */
.cat-sp-actions {
  display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem;
  margin-top: 2.75rem;
}
.cat-sp-actions > a {
  min-height: 44px; padding: 0 1.5rem; justify-content: center;
  font-size: .9375rem; font-weight: 600; letter-spacing: .04em;
}
.cat-sp-actions .btn-outline { background: #fff; }
.cat-sp-actions .btn-outline:hover,
.cat-sp-actions .btn-outline:active { background-color: oklch(28% .08 250); }
@media (min-width: 768px) { .cat-sp-actions { zoom: var(--z); } }
@media (max-width: 767px) {
  .cat-sp-actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
    margin-top: 1.5rem;
  }
  .cat-sp-actions > a {
    justify-content: center; min-height: 44px; padding: 0 .5rem;
    font-size: .875rem; font-weight: 600; letter-spacing: .04em;
  }
  .cat-sp-actions .btn-outline { background: #fff; }
  /* 白地の指定が :hover（タップ時）の紺より優先されて白地に白文字になっていた（#35 追記） */
  .cat-sp-actions .btn-outline:hover,
  .cat-sp-actions .btn-outline:active { background-color: oklch(28% .08 250); }
}

/* ── 和装事業：購入ボタンと説明文をデザインに揃える（コメント#20への返信）── */
.cat-purchase__actions > a {
  min-height: 44px; padding: 0 1.5rem; justify-content: center;
  font-size: .9375rem; font-weight: 600; letter-spacing: .04em;
}
.cat-purchase__note {
  text-align: center;          /* 共通の p { text-align:start } に負けて左揃えになっていた */
  font-size: .75rem; letter-spacing: .1em; color: var(--ty-ink); margin-top: 1.5rem;
}

/* ── 見出しの帯（和装・会社概要・飲食）も画面幅に比例 ── */
@media (min-width: 768px) {
  .waso-hero { height: max(185px, calc(100vw * 185 / 1400)); }
  .waso-hero__text .label-en { font-size: calc(10px * var(--z)); letter-spacing: .05em; color: var(--ty-ink); }
  .waso-hero__text h1 { font-size: calc(36px * var(--z)); line-height: 1.35; letter-spacing: 0; }
}
.hero-panel__inner p .sp-br { display: none; }
/* ── 商品カテゴリー：画像を押すと通販サイト「お祭天国」の該当カテゴリーへ（#42）── */
.cat-grid__link { display: block; color: inherit; text-decoration: none; }
.cat-grid__link .cat-grid__thumb img { transition: transform .4s ease; }
.cat-grid__link:hover .cat-grid__thumb img,
.cat-grid__link:focus-visible .cat-grid__thumb img { transform: scale(1.04); }
.cat-grid__link:hover .cat-grid__label { text-decoration: underline; text-underline-offset: .25em; }

/* ══ 2026-09-24 和装事業のデザイン更新（Figma コメント #46〜#54）═════════════
   PC：見出し・説明文を中央揃えに、文字サイズをデザイン寸法（1400px 基準×--z）に。
   スマホ：左揃えのまま（#46 #52）。 */
.wz-intro .pc-br { display: none; }
@media (min-width: 768px) {
  .wz-head { text-align: center; }
  .wz-head .en {
    text-align: center; font-size: calc(11px * var(--z));
    letter-spacing: .05em; color: var(--ty-ink);
  }
  .wz-head .ja {
    text-align: center; font-size: calc(20px * var(--z));
    font-weight: 700; letter-spacing: .05em; color: var(--ty-ink); line-height: 2;
  }
  .wz-head hr { width: calc(34px * var(--z)); margin-left: auto; margin-right: auto; }
  .wz-intro-wrap { max-width: none; text-align: center; }
  .wz-intro {
    text-align: center; font-size: calc(12px * var(--z));
    line-height: 2; letter-spacing: .05em; color: var(--ty-ink);
  }
  .wz-intro .pc-br { display: inline; }

  /* 法人向け4項目（#51）：見出し14px太字・本文12px、WEBカタログ／価格表にボタン */
  .wz-corp .wz-corp__title {
    display: block; font-family: var(--ty-serif);
    font-size: calc(14px * var(--z)); font-weight: 700;
    letter-spacing: .05em; text-transform: none; color: var(--ty-ink); margin-bottom: .25em;
  }
  .wz-corp p {
    font-size: calc(12px * var(--z)); line-height: 2;
    letter-spacing: .05em; color: var(--ty-ink);
  }
  .wz-corp__btn { zoom: var(--z); }
  .cat-purchase__actions > a { font-size: 1rem; font-weight: 700; }
}
/* 法人向け：WEBカタログ／価格表ボタン（#53 #54）。スマホは中央 */
.wz-corp__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 159px; min-height: 44px; margin-top: 1rem; padding: 0 1.25rem;
  background: #fff; font-size: 1rem; font-weight: 700; letter-spacing: .04em;
}
.wz-corp__btn:hover, .wz-corp__btn:active { background-color: oklch(28% .08 250); }
@media (max-width: 767px) {
  .wz-corp > div { text-align: left; }
  .wz-corp__btn { display: flex; width: 213px; margin: 1.25rem auto 0; }
  .cat-purchase__note { text-align: left; }            /* #46 */
  .wz-head, .wz-head .en, .wz-head .ja { text-align: left; }   /* #52 */
  .wz-head hr { margin-left: 0; }
}

/* ── 2026-09-28 Figma #56 #57（和装事業・PCのみ）──────────────────
   #56 ブランド紹介と商品カテゴリーの間の横線（デザインではコンテナ幅いっぱい）
   #57 「価格表・サンプル」の説明文を「…ご用意しております。／お気軽に…」で改行 */
.wz-rule { display: none; }
.wz-corp .pc-br { display: none; }
@media (min-width: 768px) {
  .wz-rule {
    display: block; border: 0; border-top: 1px solid oklch(0.88 0.01 80);
    margin: calc(24px * var(--z)) 0 calc(56px * var(--z));
  }
  .wz-corp .pc-br { display: inline; }
}