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

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

/* Gesund は焦茶地・白文字。コーポ配色のダークモードではなく、このブランド固有の世界観。 */
.kb-theme-gesund{
  --kb-text:        #f3ede7;
  --kb-text-soft:   #ded3c8;
  --kb-text-mute:   rgba(255,255,255,.55);
  --kb-rule:        rgba(255,255,255,.22);
  --kb-rule-strong: rgba(255,255,255,.22);
  --kb-chip-border: rgba(255,255,255,.4);
  --kb-link:        var(--kb-c-gold);
  --kb-link-hover:  var(--kb-c-white);
  --kb-round-bg:    var(--kb-c-white);
  --kb-round-fg:    #4a382e;
  --kb-nav-ink:     #e8e0d8;
  --kb-card-shadow: #d8c9b4;
  background:var(--kb-c-cocoa);
  color:var(--kb-text);
}

/* ===== ブランド：Gesund（ダークテーマ） ===== */

.kb-theme-gesund .kb-bhead{ background:var(--kb-c-cocoa); }
.kb-theme-gesund .kb-bhead__nav a{ color:var(--kb-nav-ink); }
.kb-theme-gesund .kb-bhead__nav a:hover{ color:var(--kb-c-white); }
.kb-theme-gesund .kb-bhead .kb-bhead__logo--honpo,
.kb-theme-gesund .kb-bhead .kb-bhead__logo--doch{ filter:brightness(0) invert(1); }
.kb-theme-gesund .kb-site-footer{ border-top:0; }
.kb-gesund{
  /* 旧名の互換（既存ルールが参照している） */
  --kb-g-bg:var(--kb-c-cocoa); --kb-g-bg2:var(--kb-c-cocoa-2);
  --kb-g-ink:var(--kb-text); --kb-g-soft:var(--kb-text-soft); --kb-g-line:var(--kb-rule);
  background:linear-gradient(180deg,var(--kb-c-cocoa) 0%,var(--kb-c-cocoa-2) 45%,var(--kb-c-cocoa-3) 100%);
  color:var(--kb-text);
}
.kb-gesund .kb-sec{ background-image:none; }

/* FV */
.kb-gfv{ text-align:center; }
.kb-gfv__title{
  margin:0; padding:clamp(1.5rem,4vw,2.75rem) 1.25rem clamp(1.75rem,4.5vw,3rem);
  font-weight:400; font-size:clamp(1.2rem,2.4vw,1.7rem); letter-spacing:.16em; color:var(--kb-g-ink);
}
.kb-gfv img{ width:100%; }

/* About */
/* 背景：gesund_backimage の上に #4D2F1F→#D2AE9A のグラデーションを 80% で重ねる。
   Sasshi #1e4c0ce8。※グラデーションの向きは指定が無かったため上→下(180deg)。 */
.kb-gabout{
  text-align:center;
  background-image:
    linear-gradient(180deg, rgba(77,47,31,.8) 0%, rgba(210,174,154,.8) 100%),
    url('brand/gesund/gesund_backimage.webp');
  background-size:cover, cover;
  /* 画像は縦長(1024x1536)。cover＋center だと葉の影が上下に切れて消えるため、
     画像レイヤーだけ上端基準にして葉が映るようにする（Sasshi #42487dc3）。 */
  background-position:center, center top;
  background-repeat:no-repeat, no-repeat;
}
.kb-gabout__copy{ max-width:760px; margin:0 auto; padding:clamp(2.5rem,6vw,4.5rem) 1.25rem clamp(2rem,5vw,3.5rem); }
.kb-gabout__title{ margin:0 0 clamp(1.5rem,3.5vw,2.25rem); font-weight:400; font-size:24px; letter-spacing:.14em; }  /* Sasshi #98003cc8 */
.kb-gabout__text{ margin:0; font-size:16px; line-height:2.4; letter-spacing:.08em; color:var(--kb-g-soft); }  /* Sasshi #acb7b2fd */
.kb-gabout__lead{ margin:clamp(1.5rem,3.5vw,2.25rem) 0; font-size:.86rem; letter-spacing:.16em; color:var(--kb-g-ink); }
/* 縦幅を540pxに狭める（Sasshi #8a23d2ae）
   ★`.kb-brand-body img{height:auto}`(0,1,1) に負けないよう詳細度を(0,2,0)に上げる。 */
.kb-gabout .kb-gabout__img{ width:100%; height:540px; object-fit:cover; }

/* メッセージ */
/* 背景は About セクションと同じ構成（画像＋グラデ80%）。Sasshi #7e0fcfa8
   ※付箋のアンカーはカード群でしたが「上のセクションと同じように」との指示から
     セクション全体に適用しています。 */
.kb-gmsg{
  padding:clamp(3rem,7vw,6rem) 0 clamp(3.5rem,8vw,7rem);
  background-image:
    linear-gradient(180deg, rgba(77,47,31,.8) 0%, rgba(210,174,154,.8) 100%),
    url('brand/gesund/gesund_backimage.webp');
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
}
.kb-gmsg__head{ text-align:center; margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.kb-gmsg__title{ margin:0 0 clamp(1.25rem,3vw,2rem); font-weight:400; font-size:clamp(1rem,2vw,1.3rem); letter-spacing:.14em; line-height:1.9; }
.kb-gmsg__lead{ margin:0; font-size:16px; line-height:2.3; letter-spacing:.08em; color:var(--kb-g-soft); }  /* Sasshi #1c037d98 */

.kb-gcards{ display:flex; flex-direction:column; gap:clamp(2rem,5vw,3.5rem); }
.kb-gcard{ position:relative; width:min(46%,430px); }
.kb-gcard--1{ margin-left:auto; margin-right:6%; }
.kb-gcard--2{ margin-left:4%; }
/* 漢字は写真の「上」に重ねる（旧 z-index:0 だと画像の下に埋まっていた）。Sasshi #e8788cb6 #7fba3a8a #49c7ff1c */
.kb-gcard__kanji{
  position:absolute; left:-.15em; top:-.62em; z-index:2;
  font-size:clamp(3rem,6vw,4.6rem); line-height:1; color:rgba(0,0,0,.42); pointer-events:none;
}
.kb-gcard__fig{ margin:0; position:relative; z-index:1; }
.kb-gcard__fig::after{
  content:""; position:absolute; inset:0; z-index:-1;
  transform:translate(clamp(.6rem,1.4vw,1.1rem),clamp(.6rem,1.4vw,1.1rem)); background:rgba(0,0,0,.4);
}
.kb-gcard__fig img{ width:100%; }
/* 画像と見出しの間を広げる（Sasshi #ff690899 #882333c1 #43ab7a80）1.1rem→2.2rem */
.kb-gcard__label{ margin:2.2rem 0 .8rem; font-weight:400; font-size:24px; letter-spacing:.1em; }  /* Sasshi #9aeb7afe #9b3a1c04 #62e4cf91 */
.kb-gcard__body{ margin:0; font-size:16px; line-height:2.2; letter-spacing:.05em; color:var(--kb-g-soft); }  /* Sasshi #87027d2b #8b650eae #dc2ce160 */

/* ダーク時の共通パーツ上書き */
.kb-gesund .kb-info__title,
.kb-gesund .kb-contact__title{ color:var(--kb-g-ink); border-bottom-color:var(--kb-g-line); }
.kb-gesund .kb-info__row{ border-bottom-color:var(--kb-g-line); }
.kb-gesund .kb-info__row:first-child{ border-top-color:var(--kb-g-line); }
.kb-gesund .kb-info__row dt{ color:var(--kb-g-soft); }
.kb-gesund .kb-info__row dd{ color:var(--kb-g-ink); }
.kb-gesund .kb-card{ position:relative; border:0; background:rgba(255,255,255,.09); }
.kb-gesund .kb-card::after{
  content:""; position:absolute; inset:0; z-index:-1;
  transform:translate(.7rem,.7rem); background:var(--kb-card-shadow,#d8c9b4);
}
.kb-gesund .kb-card__title{ color:var(--kb-g-ink); font-size:24px; }  /* Sasshi #eb5fcc4b #7aa6d45a */
.kb-gesund .kb-card__text{ color:var(--kb-g-soft); font-size:16px; }  /* Sasshi #d2d14ffb #032d2e89 */

@media (max-width:900px){
  .kb-gcard{ width:min(78%,430px); }
  .kb-gcard--1{ margin-right:0; }
  .kb-gcard--2{ margin-left:auto; }
}
@media (max-width:600px){
  .kb-gcard{ width:100%; }
  .kb-gcard--1,
  .kb-gcard--2{ margin-left:0; margin-right:0; }
}

/* ---- 店舗情報（Sasshi 2026-08-26）---- */
/* テキストサイズをすべて16pxに（#6c5d8b3c） */
.kb-gesund .kb-info__row dt,
.kb-gesund .kb-info__row dd{ font-size:16px; }
/* 背景も About と同じ構成に（#d34619cc） */
.kb-gesund .kb-info{
  background-image:
    linear-gradient(180deg, rgba(77,47,31,.8) 0%, rgba(210,174,154,.8) 100%),
    url('brand/gesund/gesund_backimage.webp');
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
}