/* ============================================================
   ブランドページ 共通基盤（骨格のみ）
   3ブランドで共有するのは「書体・余白・部品の形・レイアウト」。
   **色と地は各ブランドテーマが持つ。このファイルに色の判断を書かない。**
   読み込み順： kurobo-tokens.css → このファイル → kurobo-theme-<brand>.css
   デザインの正 ＝ 支給カンプ 本店/茶寮/ゲズント（2026-08-25 受領）
   ============================================================ */

.kb-brand-body{
  margin:0; background:var(--kb-c-white);
  font-family:var(--kb-font-jp);
  color:var(--kb-text); overflow-x:hidden;
}
.kb-brand-body *{ box-sizing:border-box; }
.kb-brand-body img{ display:block; max-width:100%; height:auto; }
.kb-brand-body :focus-visible{ outline:2px solid var(--kb-text); outline-offset:3px; }

/* ---- ヘッダー ---- */
.kb-bhead{ background:var(--kb-c-white); }
.kb-bhead__inner{
  max-width:1440px; margin:0 auto;
  padding:clamp(1.2rem,2.4vw,2rem) clamp(1.25rem,4vw,3.5rem);
  display:flex; align-items:flex-start; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.kb-bhead__logos{ display:block; text-decoration:none; }
/* `.kb-brand-body img`(0,1,1) に負けないよう詳細度を上げる。ここを下げるとロゴが原寸で出て 375px で崩れる */
.kb-bhead .kb-bhead__logo{ width:auto; max-width:none; height:auto; }
.kb-bhead .kb-bhead__logo--honpo{ height:clamp(24px,2.6vw,34px); }
.kb-bhead__sub{ display:flex; align-items:center; gap:clamp(.9rem,2vw,1.6rem); margin-top:clamp(.6rem,1.2vw,1rem); }
.kb-bhead .kb-bhead__logo--gesund{ height:clamp(26px,3vw,40px); }
.kb-bhead .kb-bhead__logo--doch{ height:clamp(14px,1.6vw,22px); opacity:.92; }

.kb-bhead__nav{
  display:grid; grid-template-columns:auto auto;
  column-gap:clamp(1.5rem,4vw,3.5rem); row-gap:.85rem; align-content:start;
}
.kb-bhead__nav a{
  font-size:.76rem; letter-spacing:.06em; color:var(--kb-text-soft); text-decoration:none;
  transition:color .3s ease; white-space:nowrap;
}
.kb-bhead__nav a:hover{ color:var(--kb-link); }
.kb-bhead__top{ grid-column:1 / -1; }
.kb-bhead__col{ display:flex; flex-direction:column; gap:.85rem; }

/* ---- FV ---- */
.kb-fv2 img{ width:100%; height:auto; }

/* ---- 和紙地 ---- */
/* ブランドページは漆喰地。文脈トークンをここで上書きすれば、
   .kb-round や .kb-dl など共通部品は自動で追従する。 */
/* 面の色（地・罫線）は各ブランドテーマが持つ。ここには書かない。
   → kurobo-theme-honpo.css / -doch.css / -gesund.css */
/* 漆喰テクスチャはセクション単位で cover。
   ページ全体に repeat すると継ぎ目の直線が出る／全高に cover すると極端に拡大されるため。 */
.kb-sec,
.kb-scroll{
  background-image:var(--kb-brand-bg);
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.kb-fv2{ background:var(--kb-c-white); }

/* ---- セクション枠 ---- */
.kb-sec{ padding:clamp(3.5rem,8vw,7rem) 0; }
.kb-sec__inner{ max-width:1240px; margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem); }

/* 見出し */
.kb-h{ margin-bottom:clamp(1.8rem,4vw,3rem); }
.kb-h__en{
  margin:0; font-weight:400; font-size:clamp(1.8rem,4vw,2.6rem);
  letter-spacing:.02em; line-height:1.2; color:var(--kb-text);
}
.kb-h__ja{ margin:.55rem 0 0; font-size:.78rem; letter-spacing:.1em; color:var(--kb-text-soft); }

/* ---- About ---- */
.kb-about__text{
  font-size:.875rem; line-height:2.5; letter-spacing:.04em; color:var(--kb-text-soft); max-width:64ch;
}
.kb-about__text p{ margin:0; }
.kb-about__figure{
  margin-top:clamp(1.5rem,3vw,2.25rem); margin-left:auto;
  width:min(58%,620px); border:1px solid var(--kb-rule); padding:clamp(.7rem,1.6vw,1.4rem);
  background:rgba(255,255,255,.35);
}

/* ---- Line up ---- */
.kb-lineup__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem); align-items:start;
}
.kb-lineup__figure{ border:1px solid var(--kb-rule); padding:clamp(.7rem,1.6vw,1.3rem); background:rgba(255,255,255,.35); }
.kb-lineup__list{ display:flex; flex-direction:column; }
.kb-lineup__item{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:clamp(.9rem,2vw,1.45rem) .25rem; border-bottom:1px solid var(--kb-rule);
  font-size:.92rem; letter-spacing:.06em; color:var(--kb-text); text-decoration:none;
  transition:color .3s ease;
}
.kb-lineup__item:hover{ color:var(--kb-link); }
.kb-lineup__arrow{ color:var(--kb-text-soft); font-size:.8rem; }

/* もっと見る（.kb-more / .kb-round）は kurobo-tokens.css の共通部品へ移動 */
.kb-more--right{ justify-content:flex-end; }

/* ---- Store ---- */
.kb-store__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(1.5rem,4vw,3.5rem); row-gap:clamp(1.5rem,4vw,3rem);
}
.kb-store__item{ margin:0; }
.kb-store__item figcaption{ font-size:.86rem; letter-spacing:.06em; color:var(--kb-text); margin-bottom:.9rem; }
.kb-store__item img{ width:100%; }
.kb-store__item--1{ margin-top:clamp(1.5rem,4vw,3.5rem); }
.kb-store__item--3{ margin-top:clamp(1.5rem,4vw,3.5rem); }

/* ---- News ---- */
.kb-news2__inner{ display:block; }
.kb-news2__body{ display:block; }
.kb-news2{ background:rgba(255,255,255,.0); }
.kb-news2__inner{
  display:grid; grid-template-columns:minmax(0,.55fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem); align-items:start;
}
.kb-news2__inner .kb-h{ margin-bottom:0; }
.kb-news2__list{ display:flex; flex-direction:column; }
.kb-news2__item{
  display:block; padding:clamp(.8rem,1.8vw,1.1rem) .1rem; border-bottom:1px solid var(--kb-rule);
  text-decoration:none; color:var(--kb-text); transition:color .3s ease;
}
.kb-news2__item:hover{ color:var(--kb-link); }
.kb-news2__item time{ display:block; font-size:.66rem; letter-spacing:.1em; color:var(--kb-text-soft); margin-bottom:.4rem; }
.kb-news2__title{ font-size:.95rem; letter-spacing:.05em; line-height:1.7; }
.kb-news2__empty{ font-size:.82rem; color:var(--kb-text-soft); }

/* ---- バナー ---- */
.kb-banners{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(.35rem,.8vw,.7rem); }
.kb-banners__item{ display:block; }
.kb-banners__item img{ width:100%; height:100%; object-fit:cover; }

/* ---- お問い合わせ ---- */
.kb-contact__title{
  margin:0 0 clamp(1.8rem,4vw,2.75rem); font-weight:400;
  font-size:clamp(1.1rem,2.2vw,1.4rem); letter-spacing:.08em;
  padding-bottom:.9rem; border-bottom:1px solid var(--kb-rule-strong); width:fit-content;
}
.kb-contact__cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.25rem,3.5vw,3rem); }
.kb-card{ border:1px solid var(--kb-rule); padding:clamp(1.5rem,3.2vw,2.25rem); background:rgba(255,255,255,.25); }
.kb-card__title{ margin:0 0 1rem; font-weight:400; font-size:1rem; letter-spacing:.08em; }
.kb-card__text{ margin:0; font-size:.8rem; letter-spacing:.04em; line-height:2; color:var(--kb-text-soft); }
.kb-card .kb-more{ margin-top:clamp(1.25rem,2.5vw,1.75rem); }

/* ---- スクロール写真 ---- */
.kb-scroll{ overflow:hidden; padding:clamp(2rem,5vw,4rem) 0 clamp(3rem,7vw,6rem); }
.kb-scroll__track{
  display:flex; align-items:flex-start; gap:clamp(1.5rem,4vw,3.5rem);
  width:max-content; animation:kb-scroll 48s linear infinite;
}
.kb-scroll:hover .kb-scroll__track{ animation-play-state:paused; }
.kb-scroll__item{ flex:none; width:clamp(160px,20vw,260px); }
.kb-scroll__item--0{ margin-top:0; }
.kb-scroll__item--1{ margin-top:clamp(2rem,5vw,4rem); }
.kb-scroll__item--2{ margin-top:clamp(1rem,2.5vw,2rem); }
.kb-scroll__item--3{ margin-top:clamp(3rem,7vw,5.5rem); }
@keyframes kb-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .kb-scroll__track{ animation:none; } }

/* ---- レスポンシブ ---- */
@media (max-width:900px){
  .kb-bhead__inner{ gap:1.25rem; }
  .kb-about__figure{ width:100%; margin-left:0; }
  .kb-lineup__grid{ grid-template-columns:1fr; }
  .kb-news2__inner{ grid-template-columns:1fr; }
  .kb-banners{ grid-template-columns:1fr; }
  .kb-contact__cards{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .kb-bhead__inner{ flex-direction:column; align-items:flex-start; }
  .kb-bhead__nav{ column-gap:2rem; }
  .kb-store__grid{ grid-template-columns:1fr; }
  .kb-store__item--1,
  .kb-store__item--3{ margin-top:0; }
  .kb-banners{ grid-template-columns:1fr; }
}

/* ---- 店舗情報（Doch / Gesund が共有する骨格。色は各テーマのトークン任せ）---- */
.kb-info__title{ margin:0 0 clamp(1.5rem,3.5vw,2.5rem); font-weight:400; font-size:clamp(1.15rem,2.2vw,1.5rem); letter-spacing:.16em; padding-bottom:.8rem; border-bottom:1px solid var(--kb-rule-strong); width:fit-content; }
.kb-info__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:start; }
.kb-info__map{ aspect-ratio:4 / 3; }
.kb-info__map iframe{ width:100%; height:100%; border:0; display:block; }
.kb-info__list{ margin:0; }
.kb-info__row{ display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:1rem; padding:1.15rem 0; border-bottom:1px solid var(--kb-rule); }
.kb-info__row:first-child{ border-top:1px solid var(--kb-rule); }
.kb-info__row dt{ font-size:.76rem; letter-spacing:.08em; color:var(--kb-text-soft); }
.kb-info__row dd{ margin:0; font-size:.82rem; letter-spacing:.04em; line-height:2; }

@media (max-width:900px){ .kb-info__grid{ grid-template-columns:1fr; } }
@media (max-width:600px){ .kb-info__row{ grid-template-columns:1fr; gap:.4rem; } }

/* ============================================================
   演出（出所：黒棒茶寮 Doch のベースHTML）
   カンプ(PNG)では表現されていなかった「動き」をここに集約する。
   ============================================================ */

/* ---- フェードイン（スクロール到達時）----
   ベース: .fade-in { animation: fadeIn 2s ease-out forwards; opacity:0 }
           @keyframes fadeIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
   実サイトは縦に長いので、読込時ではなくスクロール到達時に .is-in を付けて発火させる。

   ★隠す指定はここ（CSS）が持つこと。JS がクラスを足して隠す方式にすると、
     JSが走るまで表示されている内容が、あとから2秒かけて消えていく。
     初期表示で発火条件に届かない位置の節は、消えたまま留まる。
   ★.kb-js は <head> のインライン1行で付く（inc/site-chrome.php）。
     JSが動かない環境では付かない＝隠さない＝内容は普通に読める。

   対象は「main 直下のセクションのうち、ヒーローと除外指定以外」。
   背景をまたがらせる目的で div でくくった節（.kb-contact-block）も拾う。
   セクションを足しても、テンプレート側は何もしなくてよい。 */
/* ★除外は :where() で書くこと。:not() を並べると、その中身のぶんだけ
   このセレクタの詳細度が上がり、下の .is-in（出す側）を食って何も出なくなる。
   :where() は詳細度に加算されない。 */
.kb-js main.kb-brand > section:not(:where(.kb-fv2, .kb-fv3, .kb-gfv, .kb-reveal--off)),
.kb-js main.kb-brand > div > section:not(:where(.kb-reveal--off)),
.kb-js main.kb-brand .kb-reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity 2s ease-out, transform 2s ease-out;
}
/* ★will-change:transform をここに書かないこと。
   付いた要素は position:fixed / background-attachment:fixed の基準になるため、
   節の背景を画面に固定する指定（.kb-vhero）が要素基準に落ちて効かなくなる。
   数秒の1回きりのフェードに必要な最適化でもなく、レイヤーを保持し続ける副作用の方が大きい。 */
.kb-js main.kb-brand .is-in{ opacity:1; transform:none; }

/* ---- FV内のコピーのフェードイン ----
   FV は最初から見えている場所なので、スクロールを待たせると誰にも見られない。
   ベースHTMLでも FV のコピー塊には .fade-in（読込時発火）が当たっていた。

   ★JSでクラスを足す方式にしないこと。
     一度素のまま描画されてから opacity:0 になるので、見えて→消えて→出る、とちらつく。
   ★opacity:0 を素の宣言で持たせないこと。
     animation-fill-mode:both が開始前の状態も当ててくれる。こうしておくと
     アニメーションを止めた環境（検証時の animation:none 等）でも中身が消えない。

   対象は「ヒーロー直下の、写真でもスクロール誘導でもない要素」＝文字が乗っている塊。
   クラス名を決め打ちしないので、FVの構成を変えても追従する。 */
.kb-fv2 > :not(img):not(.kb-scrollcue),
.kb-fv3 > :not(img):not(.kb-scrollcue),
.kb-gfv > :not(img):not(.kb-scrollcue){
  animation:kb-fadein 2s ease-out both;
}
@keyframes kb-fadein{
  from{ opacity:0; transform:translateY(20px); }
  to  { opacity:1; transform:none; }
}

/* ---- スクロール誘導（「下へ」＋縦線・上下に跳ねる）----
   ベース: animate-bounce（Tailwind）相当 */
.kb-scrollcue{
  position:absolute; left:50%; bottom:2.5rem; transform:translateX(-50%);
  opacity:.7; pointer-events:none;
}
.kb-scrollcue__inner{
  display:flex; flex-direction:column; align-items:center;
  animation:kb-bounce 1s infinite;
}
.kb-scrollcue__label{
  writing-mode:vertical-rl; -webkit-writing-mode:vertical-rl;
  font-size:.75rem; letter-spacing:.1em; margin-bottom:.5rem; color:var(--kb-text);
}
.kb-scrollcue__line{ width:1px; height:3rem; background:var(--kb-text); opacity:.6; }
@keyframes kb-bounce{
  0%,100%{ transform:translateY(-25%); animation-timing-function:cubic-bezier(.8,0,1,1); }
  50%    { transform:none;             animation-timing-function:cubic-bezier(0,0,.2,1); }
}

@media (prefers-reduced-motion: reduce){
  .kb-js main.kb-brand > section,
  .kb-js main.kb-brand > div > section,
  .kb-js main.kb-brand .kb-reveal{ opacity:1; transform:none; transition:none; }
  .kb-scrollcue__inner{ animation:none; }
  .kb-fv2 > :not(img):not(.kb-scrollcue),
  .kb-fv3 > :not(img):not(.kb-scrollcue),
  .kb-gfv > :not(img):not(.kb-scrollcue){ animation:none; }
}
/* ヒーローはスクロール誘導の基準にする */
.kb-fv2, .kb-fv3, .kb-gfv{ position:relative; }
/* ラインナップ：選択中の商品（Sasshi #27b52a6d） */
.kb-lineup__item{ cursor:pointer; }
.kb-lineup__item.is-active{ color:var(--kb-link); }
.kb-lineup__item.is-active .kb-lineup__arrow{ color:var(--kb-link); }
.kb-lineup__figure img{ transition:opacity var(--kb-ease); }