/* ============================================================
   ブランドテーマ：黒棒茶寮 Doch
   このファイルが 黒棒茶寮 Doch の「色と地」の正。
   骨格（余白・書体・部品の形）は kurobo-brand-base.css / kurobo-tokens.css が持つ。

   ★ブランドは対等。他ブランドの色を参照しない・派生させない。
     コーポの配色を上書きしているのではなく、**このブランド自身の配色を宣言している**。
   ============================================================ */

.kb-theme-doch{
  /* 地：漆喰。本店と同系だが、宣言は独立させる（将来ここだけ動かせるように） */
  --kb-round-fg:    #dee2e6;   /* 丸ボタン内の矢印色。Sasshi #681bcc2a #af5ec032 #c3427853 */
  --kb-rule:        var(--kb-c-rule-washi);
  --kb-rule-strong: var(--kb-c-rule-strong);
  --kb-chip-border: rgba(43,43,43,.3);
}
.kb-theme-doch .kb-brand{ background-color:var(--kb-c-plaster); }

/* ===== ブランド：Doch 固有 ===== */
/* FV（写真＋左下コピー） */
.kb-fv3{ position:relative; }
.kb-fv3 img{ width:100%; }
.kb-fv3__copy{
  position:absolute; left:clamp(1.25rem,4vw,3.5rem); bottom:clamp(1.5rem,5vw,3.5rem);
  color:#fff; text-shadow:0 1px 14px rgba(0,0,0,.5);
}
.kb-fv3__en{ display:block; font-size:clamp(.7rem,1.1vw,.86rem); letter-spacing:.14em; margin-bottom:.55rem; }
.kb-fv3__ja{ margin:0; font-weight:400; font-size:clamp(1.35rem,2.8vw,2.1rem); letter-spacing:.12em; }

/* 縦書きヒーロー（About） */
/* 背景はスクロールに合わせて追従する（Sasshi #9904d204）。
   background-attachment:fixed は使わない。あれは画像の基準が画面サイズになるため、
   四隅にしか絵柄が無いこの画像だと中央の無地しか映らず、動いても何も見えなかった。
   代わりに節より縦に大きい背景レイヤーを敷き、スクロール量に応じて上下にずらす。
   ずらし幅は --kb-plx（％）で、assets/kurobo-brand.js が書き込む。 */
.kb-vhero{
  min-height:clamp(320px,42vw,520px);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(2.5rem,6vw,4.5rem) 1.25rem clamp(5rem,9vw,7rem);
  position:relative;   /* スクロール誘導・背景レイヤーの基準 */
  overflow:hidden;     /* はみ出した背景を切る */
}
/* 背景レイヤー。上下に 20% ずつ余らせてあるので、その範囲内で動かせる。
   ずらし幅の上限は 20/140 ≒ 14%。JS 側の MAX(12) はこれを超えないこと。 */
.kb-vhero::before{
  content:""; position:absolute; z-index:0;
  left:0; right:0; top:-20%; height:140%;
  background-image:var(--kb-vhero-bg); background-size:cover; background-position:center;
  background-repeat:no-repeat;
  transform:translate3d(0, calc(var(--kb-plx, 0) * 1%), 0);
  will-change:transform;
}
.kb-vhero__text{
  position:relative; z-index:1;
  writing-mode:vertical-rl; -webkit-writing-mode:vertical-rl; text-orientation:upright;
  margin:0; font-size:clamp(.9rem,1.6vw,1.15rem); letter-spacing:.28em; line-height:2.4; color:var(--kb-text);
}
.kb-vhero .kb-scrollcue{ z-index:1; }
@media (prefers-reduced-motion: reduce){
  .kb-vhero::before{ transform:none; }
}

/* メッセージ（テキスト左／画像右） */
.kb-msg__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:start; }
.kb-msg__text{ font-size:.86rem; line-height:2.6; letter-spacing:.04em; color:var(--kb-text-soft); }
.kb-msg__text p{ margin:0 0 2.4em; }
.kb-msg__text p:last-child{ margin-bottom:0; }
.kb-msg__figs{ display:flex; flex-direction:column; }
.kb-msg__fig{ margin:0; }
/* 画面の右端までのすき間。.kb-sec__inner の max-width と padding から算出する。 */
.kb-msg{ --kb-edge-gap:calc((100vw - min(1240px, 100vw)) / 2 + clamp(1.25rem,4vw,3rem)); }
/* 1枚目：画面右端にベタ付け＋1.2倍（Sasshi #2e75c301） */
.kb-msg__fig--a{
  width:120%;
  margin-left:calc(var(--kb-edge-gap) - 20%);
  margin-right:calc(-1 * var(--kb-edge-gap));
}
/* 2枚目：1枚目の左端より少し左にはみ出す（Sasshi #2dc40195） */
.kb-msg__fig--b{ width:82%; margin-left:-16.5%; margin-right:auto; margin-top:clamp(-2.5rem,-3vw,-1rem); position:relative; }

/* 縦書きセクション（画像＋縦書きコピー） */
/* タイトル・本文は1枚目の画像と上端を揃える（Sasshi #840cf5c1 #5d162e94）。
   旧 align-items:center だと縦中央になり、画像1枚目より下がっていた。 */
.kb-vsec__grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(1.5rem,4vw,3rem); align-items:start; }
.kb-vsec--rev .kb-vsec__grid{ grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); }
/* 画像は12分割で重ねずに階段状。カンプ同様、1枚目を大きく・以降を小さく */
.kb-vsec__figs{ display:grid; grid-template-columns:repeat(12,1fr); }
.kb-vsec__fig{ margin:0; }
.kb-vsec__fig--1{ grid-column:1 / span 8; }
/* 2枚目：右端を1枚目の右端(=8列目の終わり)に合わせる（Sasshi #42f06e4f） */
.kb-vsec__fig--2{ grid-column:3 / span 6; margin-top:clamp(.75rem,1.6vw,1.25rem); }
/* 3枚目：右端を2枚目の左端(=3列目の始まり)に合わせる（Sasshi #7132ea84）
   幅は従来どおり4列分。セル(2列)より広いので justify-self:end で左へはみ出す。 */
.kb-vsec__fig--3{ grid-column:1 / 3; justify-self:end; width:200%; margin-top:clamp(.75rem,1.6vw,1.25rem); }
.kb-vsec__figs--rev .kb-vsec__fig--1{ grid-column:1 / span 8; }
/* 2枚目：右端を1枚目の右端に合わせる（Sasshi #821e60a8） */
.kb-vsec__figs--rev .kb-vsec__fig--2{ grid-column:5 / span 4; margin-top:clamp(.75rem,1.6vw,1.25rem); }
/* 3枚目：右端を2枚目の左端(=5列目の始まり)に合わせる（Sasshi #3c109316） */
.kb-vsec__figs--rev .kb-vsec__fig--3{ grid-column:1 / 5; justify-self:end; width:175%; margin-top:clamp(.75rem,1.6vw,1.25rem); }
.kb-vsec__copy{ display:flex; flex-direction:row-reverse; justify-content:center; gap:clamp(1.25rem,3vw,2.5rem); }
.kb-vsec--rev .kb-vsec__copy{ justify-content:center; }
.kb-vsec__title{
  writing-mode:vertical-rl; -webkit-writing-mode:vertical-rl; text-orientation:mixed;
  margin:0; font-weight:400; font-size:clamp(1.1rem,2vw,1.5rem); letter-spacing:.2em; line-height:1.9;
}
.kb-vsec__body{
  writing-mode:vertical-rl; -webkit-writing-mode:vertical-rl; text-orientation:mixed;
  margin:0; font-size:.8rem; letter-spacing:.14em; line-height:2.3; color:var(--kb-text-soft);
}

/* オンラインショップ */
.kb-shop__head{ display:flex; align-items:baseline; gap:clamp(1.25rem,3vw,2.5rem); flex-wrap:wrap; margin-bottom:clamp(1.75rem,4vw,2.75rem); }
.kb-shop__title{ margin:0; font-weight:400; font-size:clamp(1.15rem,2.2vw,1.5rem); letter-spacing:.16em; }
.kb-shop__lead{ margin:0; font-size:.74rem; line-height:2; letter-spacing:.05em; color:var(--kb-text-soft); }
.kb-shop__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1rem,2.5vw,2rem); }
.kb-prod{ display:block; text-decoration:none; color:inherit; }
.kb-prod__img{ display:block; overflow:hidden; }
.kb-prod__img img{ width:100%; transition:transform .7s ease; }
.kb-prod:hover .kb-prod__img img{ transform:scale(1.04); }
.kb-prod__name{ display:block; margin-top:.9rem; font-size:.78rem; letter-spacing:.05em; }
.kb-prod__desc{ display:block; margin-top:.5rem; font-size:.66rem; line-height:1.9; color:var(--kb-text-mute); }
.kb-prod__price{ display:block; margin-top:.7rem; font-size:1.05rem; letter-spacing:.05em; }
.kb-prod__price small{ font-size:.6rem; margin-left:.4em; color:var(--kb-text-mute); }


@media (max-width:900px){
  /* --- メッセージ1：画像を上、テキストを下に（Sasshi #551fb3be）--- */
  .kb-msg__grid{ grid-template-columns:1fr; }
  .kb-msg__figs{ order:1; }
  .kb-msg__text{ order:2; }
  .kb-msg__fig--b{ width:70%; margin-top:-1.5rem; }

  /* --- 縦書きセクション ---
     ・縦書きタイトルは縦書きのまま中央配置（Sasshi #0f465cb3 #2c7ebcfa）
     ・本文は横書きにしてタイトルの下へ（Sasshi #35d8b67f #7072a766）
     ・--rev は画像を先に出し、その下にタイトル（Sasshi #2c7ebcfa） */
  .kb-vsec__grid,
  .kb-vsec--rev .kb-vsec__grid{ grid-template-columns:1fr; }
  .kb-vsec__figs{ order:1; }
  .kb-vsec__copy{
    order:2;
    flex-direction:column; align-items:center; justify-content:flex-start;
    gap:clamp(1.25rem,4vw,1.75rem);
  }
  .kb-vsec--rev .kb-vsec__copy{
    order:2;
    flex-direction:column; align-items:center; justify-content:flex-start;
  }
  .kb-vsec__title{ text-align:center; }
  .kb-vsec__body{
    writing-mode:horizontal-tb; -webkit-writing-mode:horizontal-tb;
    text-align:center; letter-spacing:.06em; line-height:2.1;
  }

  .kb-shop__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px){
  /* 商品はレスポンシブでも2カラムを維持（Sasshi #736c42b9） */
  .kb-shop__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
}