@charset "utf-8";
/*
 * ======================================
 * ボルドー洋菓子店 サイト固有CSS
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * ▼ 共通パーツ
 * .bd-loader / __lamp / __glow / __body / __name  - ランプのローディング演出
 * .bd-header / __inner / __logo / __right / __tel - デザインのsticky半透明ヘッダー
 * .bd-gnav / __item / __icon / __circle / __img / __text - アイコン付き横並びグローバルナビ
 * .bd-sns / --insta / --shop                      - ヘッダーの円形SNSボタン
 * .bd-sp-nav__lace / __brand / __icon / __text / __ja / __item--current - SPナビ（カード型）
 * .bd-sp-nav__tel / __tel-icon / __note / __links   - SPナビ下部
 * .bd-footer / __inner / __map / __info / __logo / __addr / __tel / __links / __bottom / __nav
 * .bd-btn / --fill / --ghost / --ghost-light / --ghost-white / --white / --sm / --lg / __chev
 * .bd-link-more / .bd-link-underline              - テキストリンク（→付き・下線付き）
 * .bd-lace                                        - レースボーダーのセクション区切り
 * .bd-divider                                     - ライン画像のセクション区切り（中央配置）
 * .bd-renga / --left / --right                    - レンガ壁の背景あしらい
 * .bd-sec-en / --light                            - 手書き風の英語ラベル
 * .bd-h2 / --26 / --28 / --30 / --32 / --34       - セクション見出し（デザイン実数値）
 * .bd-h2--light                                   - 濃色帯の上に載る見出し（共通の .text-white が site.css に負けるため）
 * .bd-text / --narrow / --center / --light        - 本文テキスト
 * .bd-note                                        - 注釈テキスト
 * .bd-ph / --dark                                 - 写真未支給箇所のプレースホルダ
 * .bd-figure / --4-3 / --4-34 / --4-36 / --4-44 / --16-10 / --1-1 - 比率付き写真
 * .bd-split / --center / __media / __body         - 2カラム（auto-fit 330px）
 * .bd-container-1320                              - 1320px幅コンテナ
 * .bd-sec-*                                       - 各セクションの余白・背景
 * .bd-arrow-up                                    - ページトップのCSS矢印
 * .bd-fixed-bar                                   - SP固定バーのアイコン調整
 * .bd-sr-only                                     - 視覚的非表示テキスト
 *
 * ▼ TOP
 * .bd-mv / __slideshow / __slide / __veil / __body / __catch / __en
 * .bd-sec-head / __title / __en                   - 罫線付きの左右振り分け見出し
 * .bd-posts / .bd-post / __img / __meta / __date / __title
 * .bd-sec-lead                                    - 中央寄せリード
 * .bd-features / .bd-feature / __img / __body / __en / __title / __text / __btn
 * .bd-cards / .bd-card / __img / __body / __en / __title / __text
 * .bd-mobile / __inner / __img / __body
 * .bd-insta-grid / __item
 * .bd-voices / .bd-voice / __rate / __stars / __title / __body / __person / __initial / __name / __text
 * .bd-voice-title
 * .bd-bnrs / .bd-bnr / --tel / __text / __en / __title / __note / __tel
 *
 * ▼ 下層
 * .page-hero--bd                                  - 左寄せのページヒーロー（共通page-heroのmodifier）
 * .bd-cta / __title / __lead / __hours / __sub    - お問い合わせCTA
 * .bd-catnav / __head / __en / __title / __list / __item / __dot - 商品カテゴリーサイドナビ
 * .bd-cat-head / __bar / __title / __en           - 商品カテゴリー見出し
 * .bd-items / .bd-item / __img / __name / __price - 商品カード
 * .bd-shopcta / __body / __title / __text         - オンラインショップ導線パネル
 * .bd-types / .bd-type / __img / __body / __en / __title / __lead / __text
 * .bd-tags / .bd-tag                              - モチーフ一覧タグ
 * .bd-works / __item                              - 実績ギャラリー
 * .bd-steps / .bd-step / __no / __label / __body / __title / __lead / __text
 * .bd-notes / .bd-note-card / __head / __no / __title / __text
 * .bd-event-hero / __photo / __body / __sub       - 出展ページのヒーロー
 * .bd-event-photos / .bd-halfmedia / __body / __img
 * .bd-scenes / __item
 * .bd-shop-photos
 * .bd-info-table                                  - 店舗情報テーブル
 * .bd-entry-* / .bd-side / __title / __list / __item / .bd-recent / __item / __img / __date / __title
 * .bd-pager                                       - ページネーションの色・角丸調整
 *
 * ======================================
 * 共通SCSSに不足していたもの（5分類）
 * ======================================
 *
 * [値の粒度不足]
 *  - fz utility に 11.5 / 12.5 / 13.5 / 14.5 / 15 / 17 / 26 / 30 / 34 / 42px 相当が無い
 *  - gap / margin utility に 12 / 14 / 26 / 34 / 44 / 46 / 56 px が無い（デザインの基準gapは26/56px）
 *  - letter-spacing utility に 0.18em / 0.16em / 0.14em / 0.04em が無い（英語ラベルの標準字間）
 *  - aspect utility に 4/3.4・4/3.6・4/4.4・4/2.2・16/10 が無い
 *  - line-height utility が 1.1〜2 の刻みのみで 2.1 / 2.2 が無い（本文の標準行高）
 *
 * [指定方向不足]
 *  - grid の auto-fit（repeat(auto-fit,minmax(N,1fr))）がない。grid-2/3/4 は固定列数のため、
 *    デザインの「幅に応じて列が落ちる」挙動を再現できない
 *
 * [状態不足]
 *  - ナビの現在ページ表示が下線のみ。デザインは「アイコン背面の円が着色」される表現
 *
 * [構造不足]
 *  - ヘッダーナビが縦積み（EN上・JA下）前提。デザインはアイコン左＋テキスト右の横並び
 *  - お客様の声カード（評価行＋タイトル＋イニシャル円＋本文の2カラム）に相当する component が無い
 *  - 商品カテゴリーのサイドナビ（sticky・見出し帯付き）に相当する component が無い
 *  - STEPカード（左に番号・右に本文の罫線区切り）は timeline / card-flow のどちらとも構造が異なる
 *
 * [装飾パターン不足]
 *  - レースボーダー（repeat-x の画像区切り）・レンガ壁のコーナーあしらいに対応する装飾クラスが無い
 *  - バナーの「装飾フレーム画像を背景に敷いて内側にテキストを置く」表現に対応する component が無い
 *
 */

/* ==========================================================================
   0. 基本設定
   ========================================================================== */
:root {
  --bd-base: #9a8d7a;
  --bd-sub: #c08172;
  --bd-sub-dark: #a86a5c;
  --bd-base-dark: #8a7d6c;
  --bd-ivory: #FFFFF0;
  --bd-tint: #F7F0E3;
  --bd-tint2: #EDE4D8;
  --bd-tint3: #F3EADC;
  --bd-txt: #4a4038;
  --bd-txt-body: #5d5347;
  --bd-txt-mute: #7a6f62;
  --bd-txt-sub: #8b7f6f;
  --bd-en-light: #b6a894;
  --bd-ph: #b3a48f;
  --bd-note: #a1937f;
  --bd-line: #e5dccd;
  --bd-line2: #ddd2be;
  --bd-dot: #cdbfa9;
  --bd-dash: #e8e0d1;
  --bd-font-en: "Edu SA Hand", "Zen Maru Gothic", cursive;
}

/* デザインのコンテナは max-width:1200px + 左右24px 固定 */
.container {
  max-width: 1200px;
  padding-left: 24px;
  padding-right: 24px;
}
.bd-container-1320 {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

.bd-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   1. ローディング
   ========================================================================== */
@keyframes bd-lampdrop { 0% { transform: translateY(-26px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes bd-lampon { 0% { opacity: 0; } 34% { opacity: .35; } 40% { opacity: .1; } 48% { opacity: .9; } 54% { opacity: .5; } 70%, 100% { opacity: 1; } }
@keyframes bd-loadname { 0%, 40% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes bd-loaderout { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }

.bd-loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bd-tint2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  animation: bd-loaderout .9s ease 2.4s forwards;
}
.bd-loader__lamp {
  position: relative;
  width: 132px;
  height: 210px;
  margin-bottom: 26px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  animation: bd-lampdrop 1s cubic-bezier(.2, .8, .3, 1) both;
}
.bd-loader__glow {
  position: absolute;
  left: 50%;
  top: 166px;
  width: 230px;
  height: 230px;
  transform: translate(-50%, -50%);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  animation: bd-lampon 2s ease .5s both;
}
.bd-loader__body {
  position: relative;
  width: 132px;
  height: 210px;
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
}
.bd-loader__name {
  margin: 0;
  font-family: var(--bd-font-en);
  font-size: 2rem;
  letter-spacing: .14em;
  color: var(--bd-txt-mute);
  animation: bd-loadname 1.6s ease .6s both;
}

/* ==========================================================================
   2. ヘッダー
   ========================================================================== */
.bd-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 240, .94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--bd-line);
}
.bd-header__inner {
  max-width: 1440px;
  height: auto;
  padding: 18px 24px;
  gap: 20px;
  flex-wrap: wrap;
}
.bd-header__logo img {
  height: 36px;
  width: auto;
}

/* -- グローバルナビ（アイコン＋EN／JAの横並び） */
.bd-gnav {
  margin-left: 0;
  margin-right: 0;
  align-items: stretch;
  flex-wrap: wrap;
  border-left: 1px dotted var(--bd-dot);
}
.bd-gnav .header__nav-item a {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  height: 100%;
  border-right: 1px dotted var(--bd-dot);
}
.bd-gnav .header__nav-item a::after { display: none; }
.bd-gnav__icon {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bd-gnav__circle {
  position: absolute;
  left: -7px;
  bottom: -6px;
  width: 41px;
  height: 41px;
  border-radius: 9999px;
  background: transparent;
  transition: background .25s ease;
}
.bd-gnav__item a:hover .bd-gnav__circle { background: #EDE0CE; }
.bd-gnav__item.header__nav-item--current .bd-gnav__circle { background: #DFCDB9; }
.bd-gnav__img {
  position: relative;
  width: 40px;
  height: 40px;
  opacity: .85;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.bd-gnav__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.bd-gnav .header__nav-en {
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--bd-txt);
  line-height: 1.25;
}
.bd-gnav .header__nav-ja {
  margin-top: 0;
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--bd-txt-mute);
  line-height: 1.25;
  white-space: nowrap;
}
.bd-gnav__item.header__nav-item--current .header__nav-en,
.bd-gnav__item.header__nav-item--current .header__nav-ja { color: var(--bd-sub); }

/* -- ヘッダー右側 */
.bd-header__right {
  gap: 12px;
  height: auto;
}
.bd-header__tel {
  font-family: inherit;
  flex-direction: column;
  align-items: flex-start;
  color: var(--bd-txt);
  line-height: 1.25;
  font-size: inherit;
}
.bd-header__tel::before { display: none; }
.bd-header__tel-num {
  font-size: 1.95rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}
.bd-header__tel-note {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--bd-base);
  white-space: nowrap;
}
.bd-sns {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9999px;
  color: var(--bd-ivory);
  /* 中身は Font Awesome の <i>。SVG（19px固定）と同じ見た目になるサイズを明示する。 */
  font-size: 1.9rem;
  line-height: 1;
  transition: background .25s ease;
}
.bd-sns--insta { background: var(--bd-base); }
.bd-sns--insta:hover { background: var(--bd-base-dark); opacity: 1; }
.bd-sns--shop { background: var(--bd-sub); }
.bd-sns--shop:hover { background: var(--bd-sub-dark); opacity: 1; }

/* -- SPナビ
   参考サイトに合わせ、main.css の暗色グラデーション＋罫線リストを
   「アイボリー地＋白い角丸カード＋手描きアイコン」に上書きする。
   アイコンはPCナビと同じ navi_icon0N.png を使う。 */
/* 縦中央寄せは justify-content ではなく auto margin で行う。
   justify-content:center だと、小さい画面で内容がはみ出したとき上端が切れて届かない。 */
.bd-sp-nav {
  justify-content: flex-start;
  padding: 74px 20px 30px;
  background: var(--bd-tint);
}
.bd-sp-nav__lace {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 26px;
  opacity: .5;
  background-image: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28563/lace_border.png);
  background-repeat: repeat-x;
  background-size: auto 26px;
  background-position: center top;
  pointer-events: none;
}
.bd-sp-nav__brand {
  margin: auto 0 20px;
}
.bd-sp-nav__brand img {
  width: auto;
  height: 30px;
}
.bd-sp-nav .sp-nav__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 340px;
  text-align: left;
}
/* main.css の罫線リストを解除してカード型にする */
.bd-sp-nav .sp-nav__item,
.bd-sp-nav .sp-nav__item:first-child {
  border: 0;
}
.bd-sp-nav .sp-nav__link {
  justify-content: flex-start;
  gap: 14px;
  padding: 10px 18px;
  border-radius: 9999px;
  background: var(--bd-ivory);
  color: var(--bd-txt);
  font-size: 1.4rem;
  font-weight: 500;
}
/* カードはアイボリー、地はベージュ。背景をわずかに変えるだけでは地と同化して
   押した感じが出ないので、サブカラーの縁＋右へのスライドで反応させる。 */
.bd-sp-nav .sp-nav__link:hover,
.bd-sp-nav .sp-nav__link:focus-visible {
  background: var(--bd-ivory);
  box-shadow: inset 0 0 0 1.5px var(--bd-sub);
  transform: translateX(5px);
  opacity: 1;
}
.bd-sp-nav .sp-nav__link:hover .sp-nav__en,
.bd-sp-nav .sp-nav__link:hover .bd-sp-nav__ja,
.bd-sp-nav .sp-nav__link:focus-visible .sp-nav__en,
.bd-sp-nav .sp-nav__link:focus-visible .bd-sp-nav__ja {
  color: var(--bd-sub-dark);
}
/* main.css の Font Awesome の矢印は出さない（カード自体が導線） */
.bd-sp-nav .sp-nav__link::after {
  content: none;
  display: none;
}
.bd-sp-nav__icon {
  flex: none;
  width: 40px;
  height: 40px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .9;
}
.bd-sp-nav__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* main.css の .sp-nav__en は 0.75rem・margin-right:auto・padding-left:12px。
   カード内では日本語ラベルの上に置くため、いずれも打ち消す。 */
.bd-sp-nav .sp-nav__en {
  margin-right: 0;
  padding-left: 0;
  font-size: 1.4rem;
  letter-spacing: .12em;
  opacity: 1;
  color: var(--bd-txt);
}
.bd-sp-nav__ja {
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--bd-txt-mute);
}
.bd-sp-nav__item--current .sp-nav__link {
  box-shadow: inset 0 0 0 1px var(--bd-sub);
}
.bd-sp-nav__item--current .sp-nav__en { color: var(--bd-sub); }
/* main.css の margin-top:auto を解除し、ナビ全体を1つの塊として縦中央に置く */
.bd-sp-nav .sp-nav__bottom {
  max-width: 340px;
  margin: 34px 0 auto;
}
.bd-sp-nav__tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--bd-font-en);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--bd-txt);
  letter-spacing: .02em;
}
.bd-sp-nav__tel-icon {
  font-size: .7em;
  color: var(--bd-sub);
}
.bd-sp-nav__note {
  margin: 4px 0 16px;
  font-size: 1.2rem;
  color: var(--bd-txt-sub);
}
.bd-sp-nav__links {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 開いている間のトグルは、参考サイトと同じくサブカラーの四角＋白い×にする */
.nav-toggle.is-active {
  background: var(--bd-sub);
}
.nav-toggle.is-active .nav-toggle__line {
  background: var(--bd-ivory);
}

/* ==========================================================================
   3. フッター
   ========================================================================== */
/* margin-top = カーブの高さ（::before の height 90px）＋ カーブ上部の余白 80px。
   カーブは margin 領域に載るので、この2つの合計でしか余白が確保できない。
   カーブの高さを変えたら margin-top も同じだけ増減させること。 */
.bd-footer {
  position: relative;
  margin-top: 170px;
  padding: 0 0 30px;
  background: var(--bd-tint);
}
/* フッター上端を直線ではなく半円カーブに。
   フッター本体の箱は矩形のまま、上に半楕円のキャップを重ねる
   （本体に border-radius を掛けると地図や見出しが角で欠けるため）。 */
.bd-footer::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 90px;
  background: var(--bd-tint);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
}
.bd-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 56px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 24px 0;
}
.bd-footer__map {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--bd-line);
}
.bd-footer__map iframe {
  width: 100%;
  height: 280px;
  border: 0;
  display: block;
}
.bd-footer__logo {
  height: 40px;
  width: auto;
  margin-bottom: 22px;
}
.bd-footer__addr {
  margin: 0 0 6px;
  font-size: 1.4rem;
  line-height: 1.9;
  color: var(--bd-txt-body);
}
.bd-footer__addr--last { margin-bottom: 18px; }
.bd-footer__tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--bd-txt);
  letter-spacing: .02em;
}
/* 電話アイコン。番号と同じ 2.6rem では主張が強すぎるので少し小さくする。 */
.bd-footer__tel .fa-phone {
  font-size: .72em;
  color: var(--bd-sub);
}
.bd-footer__links {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.bd-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 44px auto 0;
  padding: 22px 24px 0;
  border-top: 1px solid var(--bd-line);
  text-align: left;
}
.bd-footer__nav {
  gap: 24px;
}
.bd-footer__nav .footer-body__nav-item a {
  font-size: 1.25rem;
  color: var(--bd-txt-mute);
}
.bd-footer__nav .footer-body__nav-item a:hover { color: var(--bd-sub); }
.bd-footer__bottom .footer-bottom__copyright {
  font-family: var(--bd-font-en);
  font-size: 1.15rem;
  letter-spacing: .1em;
  color: var(--bd-en-light);
}

/* -- ページトップ / SP固定バー */
/* 色は共通SCSSの変数（$base_color / hover $sub_color）が持つので上書きしない。
   影だけ、黒ではなくメインカラーの透過に差し替える。 */
.page-top__link { box-shadow: 0 4px 12px rgba(154, 141, 122, .22); }
.sp-fixed-bar   { box-shadow: 0 -2px 10px rgba(154, 141, 122, .12); }
.bd-arrow-up {
  display: block;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(-45deg);
}
.bd-fixed-bar .sp-fixed-bar__link {
  padding: 8px 4px;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--bd-txt-mute);
}
.bd-fixed-bar i {
  display: block;
  margin-bottom: 5px;
  font-size: 2rem;
  color: var(--bd-sub);
}
/* 3つの導線を区切ってボタンらしく見せる（先頭には線を引かない） */
.bd-fixed-bar .sp-fixed-bar__item + .sp-fixed-bar__item {
  border-left: 1px solid var(--bd-dot);
}

/* ==========================================================================
   4. 共通パーツ（ボタン・見出し・テキスト・装飾）
   ========================================================================== */
.bd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 34px;
  border-radius: 9999px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.bd-btn:hover { opacity: 1; }
.bd-btn__chev { font-family: var(--bd-font-en); }
.bd-btn--fill { background: var(--bd-sub); color: var(--bd-ivory); }
.bd-btn--fill:hover { background: var(--bd-sub-dark); color: var(--bd-ivory); }
.bd-btn--ghost { border: 1px solid var(--bd-base); color: var(--bd-txt-mute); }
.bd-btn--ghost:hover { background: var(--bd-base); color: var(--bd-ivory); }
.bd-btn--ghost-light { border: 1px solid var(--bd-line2); color: var(--bd-txt-mute); }
.bd-btn--ghost-light:hover { border-color: var(--bd-sub); color: var(--bd-sub); }
.bd-btn--ghost-white { border: 1px solid rgba(255, 255, 240, .55); color: var(--bd-ivory); }
.bd-btn--ghost-white:hover { background: rgba(255, 255, 240, .12); color: var(--bd-ivory); }
.bd-btn--white { background: var(--bd-ivory); color: var(--bd-txt-mute); font-weight: 500; }
.bd-btn--white:hover { background: var(--bd-tint3); color: var(--bd-txt-mute); }
.bd-btn--sm { padding: 11px 20px; font-size: 1.3rem; }
.bd-btn--lg { padding: 17px 40px; font-size: 1.6rem; font-weight: 700; }
.bd-btn--block { display: flex; width: 100%; }

.bd-link-more {
  font-size: 1.3rem;
  color: var(--bd-sub);
  white-space: nowrap;
}
.bd-link-underline {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--bd-sub);
  font-size: 1.4rem;
  color: var(--bd-sub);
}

.bd-sec-en {
  margin: 0 0 12px;
  font-family: var(--bd-font-en);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .18em;
  color: var(--bd-sub);
}
.bd-sec-en--light { color: #f0d8cf; }

/* 商品ラインナップ・お客様の声は、英語ラベルを日本語見出しより大きく見せる。
   他セクション（Since 20 years / Chara-deco Cake / Instagram など）は元のサイズのまま。 */
.bd-sec--lineup .bd-sec-en,
.bd-sec--voice .bd-sec-en {
  font-size: 3rem;
  letter-spacing: .1em;
  margin-bottom: 6px;
}

.bd-h2 {
  margin: 0;
  text-wrap: pretty;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--bd-txt);
}
.bd-h2--26 { font-size: 2.6rem; }
/* 「イベントや施設への出店、お気軽にご相談ください。」を1行に収めるサイズ。
   24文字 × 2.5rem ≒ 600px で、.bd-split--wide-body のテキスト側（約630px）に収まる。 */
.bd-h2--25 { font-size: 2.5rem; line-height: 1.7; }
.bd-h2--27 { font-size: 2.7rem; line-height: 1.7; }
.bd-h2--28 { font-size: 2.8rem; line-height: 1.6; }
.bd-h2--29 { font-size: 2.9rem; line-height: 1.7; }
.bd-h2--30 { font-size: 3rem; }
.bd-h2--30-lh { font-size: 3rem; line-height: 1.7; }
/* ①「こんなケーキ、できますか？」から20年。を1行に収めるサイズ。
   .bd-split の片側カラム（約548px）に対し、20文字ぶん＝約520pxで収まる。 */
.bd-h2--32 { font-size: 2.6rem; line-height: 1.6; }
/* 濃色帯の上に載る見出し。
   共通utilityの .text-white は main.css 側にあるため、後読みの .bd-h2 に負けて効かない。
   site.css 内で .bd-h2 より後に定義したmodifierで上書きする。 */
.bd-h2--light { color: var(--bd-ivory); }

.bd-text {
  margin: 0;
  text-wrap: pretty;
  font-size: 1.5rem;
  line-height: 2.1;
  color: var(--bd-txt-body);
}
.bd-text--lh22 { line-height: 2.2; }
.bd-text--narrow { max-width: 44em; margin-left: auto; margin-right: auto; }
.bd-text--narrow46 { max-width: 46em; margin-left: auto; margin-right: auto; }
/* PC時に <br class="bd-br-pc"> の位置どおりに折り返させるための幅。
   一番長い行（50文字）が折り返さないよう 51em を確保する。 */
.bd-text--narrow51 { max-width: 51em; margin-left: auto; margin-right: auto; }
/* 2行目「写真やイメージを見ながら、…お聞かせください。」は64文字。
   折り返さないよう 65em を確保する（.container の内寸1152px 内に収まる）。 */
.bd-text--narrow65 { max-width: 65em; margin-left: auto; margin-right: auto; }
.bd-text--light { color: #f5efe1; font-size: 1.45rem; }
.bd-note {
  margin: 0;
  text-wrap: pretty;
  font-size: 1.25rem;
  line-height: 1.9;
  color: var(--bd-note);
}

.bd-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: var(--bd-tint2);
  color: var(--bd-ph);
  font-size: 1.25rem;
  letter-spacing: .08em;
  text-align: center;
}
.bd-ph--dark { background: #8d8071; color: #e6ddcd; font-size: 1.3rem; }
.bd-ph--warm { background: #E4D9C7; color: #a99a86; font-size: 1.3rem; }
.bd-ph--en { font-family: var(--bd-font-en); font-size: 1.5rem; letter-spacing: .16em; }

.bd-figure {
  display: block;
  width: 100%;
  border-radius: 18px;
  object-fit: cover;
}
.bd-figure--4-3 { aspect-ratio: 4 / 3; }
.bd-figure--4-32 { aspect-ratio: 4 / 3.2; }
.bd-figure--4-34 { aspect-ratio: 4 / 3.4; }
.bd-figure--4-36 { aspect-ratio: 4 / 3.6; }
.bd-figure--4-44 { aspect-ratio: 4 / 4.4; }
.bd-figure--16-10 { aspect-ratio: 16 / 10; }
.bd-figure--1-1 { aspect-ratio: 1 / 1; }
.bd-figure--r14 { border-radius: 14px; }
/* 写真枠をプレースホルダとして使う場合は中央寄せのflexに戻す */
.bd-figure.bd-ph { display: flex; }
.bd-figure--r16 { border-radius: 16px; }
/* アーチ型（上端を半円状に、下端は通常の角丸）。
   横半径 50%+50% = 全幅ぴったりで中央で合流するので、
   縦半径（45%）だけでアーチの深さを調整できる。
   縦横比が違う画像でも見た目のアーチの浅さが揃うよう % 指定にしている。 */
.bd-figure--arch {
  border-radius: 50% 50% 18px 18px / 45% 45% 18px 18px;
  overflow: hidden;
}

.bd-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 56px;
}
/* 本文の最長行（38文字＝約570px）が <br> の位置より前で折り返さないよう、
   テキスト側のカラムを広くする。左右均等（1200px時に548px）では足りない。
   1200px未満はカラム幅自体が足りないので、均等割りのままにする。 */
@media (min-width: 1200px) {
  .bd-split--wide-body { grid-template-columns: 1.15fr .85fr; }
}
.bd-split--center { align-items: center; }
.bd-split--top { align-items: start; }

/* -- レースボーダー区切り */
.bd-lace {
  height: 38px;
  opacity: .42;
  background-image: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28563/lace_border.png);
  background-repeat: repeat-x;
  background-size: auto 38px;
  background-position: center top;
}

/* -- ライン画像のセクション区切り（img/divider.png 1950×63）
   全幅ではなくセクション幅（.container の内容幅 1200 - 24*2 = 1152px）で中央配置。
   1950×63 を 1152px 幅に収めると高さ約37pxで、.bd-lace の 38px とほぼ同じになる。
   width の calc は .container と同じ左右24pxのアキ。
   下マージンは次セクションの margin-top と結合させて二重に空けない。 */
.bd-divider {
  display: block;
  width: calc(100% - 48px);
  max-width: 1152px;
  height: auto;
  margin: 90px auto 0;
  opacity: .7;
}

/* -- レンガ壁のあしらい
   ※ claude-design-output では画像パスが解決できず表示されていないが、
      デザインの意図（span + background-image, opacity:.3）を汲んで配置する。
      アイボリー地の印象を損なわないよう透過は .12 に抑えている。 */
.bd-renga {
  position: absolute;
  opacity: .3;
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 0;
}
.bd-renga--left {
  top: 0;
  left: 0;
  width: 476px;
  height: 322px;
  background-image: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28563/renga01.png);
  background-position: top left;
}
/* -- シュークリームのイラスト（移動販売セクション右下） */
.bd-deco {
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  z-index: 0;
}
/* 元画像 1180×526（比率 2.243）。右下に寄せ、文字の可読性を落とさない濃さにする。 */
/* 出展ページのヒーロー右下のイラスト。元画像 1882×707（比率 2.662）。
   .bd-event-hero は position:relative / overflow:hidden なので、右端・下端に密着させる。
   見出しは左寄せなので、幅は画面幅に応じて絞って重ならないようにする。 */
.bd-deco--hero {
  right: 0;
  bottom: 0;
  width: 680px;
  height: 255px;
  background-image: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28563/page-hero-deco.png);
  background-size: contain;
  background-position: bottom right;
}

.bd-deco--choux {
  right: 0;
  bottom: 0;
  width: 420px;
  height: 187px;
  opacity: .55;
  background-image: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28563/deco.png);
  background-size: contain;
  background-position: bottom right;
}

/* .bd-sec--intro には下パディングが無く、次の .bd-sec--charadeco が margin-top:96px で
   始まる。その余白ぶん下げて、レンガの下端が次セクションの上端にぴったり接するようにする。 */
.bd-renga--right {
  right: 0;
  bottom: -96px;
  width: 504px;
  height: 336px;
  background-image: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28563/renga02.png);
  background-position: bottom right;
}

/* ==========================================================================
   5. セクション余白（デザイン実数値）
   ========================================================================== */
.bd-sec--news { padding: 84px 0 0; }
.bd-sec--intro { padding: 96px 0 0; }
.bd-sec--charadeco { margin-top: 96px; padding: 84px 0 90px; }
.bd-sec--lineup { padding: 54px 0 0; }
.bd-sec--insta { padding: 94px 0 0; }
.bd-sec--voice { margin-top: 96px; padding: 80px 0; }
.bd-sec--bnr { padding: 54px 0 0; }
.bd-sec--tinted { background: var(--bd-tint); }

.bd-sec-lead {
  text-align: center;
  margin-bottom: 46px;
}
.bd-sec--charadeco .bd-sec-lead .bd-h2 { margin-bottom: 20px; }
.bd-sec--lineup .bd-sec-lead { margin-bottom: 42px; }
.bd-sec--lineup .bd-sec-lead .bd-h2 { margin-bottom: 18px; }
.bd-sec--voice .bd-sec-lead { margin-bottom: 40px; }

/* ==========================================================================
   6. TOP：メインビジュアル
   ========================================================================== */
/* PC時はファーストビューを画面いっぱいにする。
   ヘッダーは sticky で MV の上に場所を取るため、その分を差し引く。
   --bd-header-h は js/common.js がヘッダーの実測高さを入れる（JSが動かない場合は
   0px にフォールバックし、単純な 100vh になる）。
   min-height は横長・低解像度のディスプレイでキャッチコピーが潰れないための下限。 */
.bd-mv {
  position: relative;
  height: calc(100vh - var(--bd-header-h, 0px));
  min-height: 480px;
  overflow: hidden;
  background: var(--bd-tint2);
  isolation: isolate;  /* CMSスライダーが持ち込む z-index を .bd-mv の中に閉じ込める */
}
/* CMSスライダーの挿入先。z-index を張って自身が重ね順の基準（スタッキングコンテキスト）
   になるようにする。こうしておけば内部で z-index:9999 が使われても、veil と body より
   上には出てこない。 */
#slideshow {
  position: absolute;
  inset: 0;
  height: 100%;
  z-index: 1;
}
/* CMSが挿入するラッパーが高さを持たずに潰れないよう、MVの高さを継承させる */
#cms-slider-1-1-area {
  height: 100%;
}
#slideshow .swiper-slide,
.bd-mv__slide {
  width: 100%;
  height: 100%;
}
/* CMSが吐き出すスライド画像もMVの高さいっぱいに敷き詰める */
#slideshow img,
.bd-mv__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bd-mv__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;  /* スライダーのスワイプ・リンクを塞がない */
  /* 上：中央を強めに落とす／下：全面を均一に落とす。
     写真の明るさに関係なく文字のコントラストを確保する。 */
  background:
    radial-gradient(ellipse at 50% 55%, rgba(60, 44, 32, .5) 0%, rgba(60, 44, 32, .26) 55%, rgba(60, 44, 32, .06) 85%),
    linear-gradient(rgba(60, 44, 32, .26), rgba(60, 44, 32, .26));
}
.bd-mv__body {
  position: relative;
  z-index: 3;
  height: 100%;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;  /* 同上。文字は選択できなくてよい */
}

.bd-mv__catch {
  margin: 0 0 20px;
  text-wrap: balance;
  max-width: min(100%, 26em);
  font-size: 4.2rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .14em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(40, 28, 18, .7), 0 2px 20px rgba(40, 28, 18, .6);
}
.bd-mv__en {
  margin: 0;
  font-family: var(--bd-font-en);
  font-size: 2.2rem;
  letter-spacing: .1em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(40, 28, 18, .65), 0 2px 16px rgba(40, 28, 18, .55);
}

/* ==========================================================================
   7. TOP：お知らせ
   ========================================================================== */
.bd-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--bd-line);
}
.bd-sec-head__title {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--bd-txt);
}
.bd-sec-head__en {
  font-family: var(--bd-font-en);
  /* 英語ラベルを日本語（2.2rem）より大きく見せる */
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--bd-en-light);
}

.bd-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 26px;
}
/* TOPのお知らせ：記事が1〜2件でも3件時と同じ幅で表示（auto-fitだと横に引き伸ばされるため列数を固定） */
.bd-sec--news .bd-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 896px) {
  .bd-sec--news .bd-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .bd-sec--news .bd-posts { grid-template-columns: 1fr; }
}
.bd-post { display: block; color: var(--bd-txt); }
.bd-post:hover { opacity: 1; }
.bd-post__img {
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bd-tint2);
}
.bd-post__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bd-post__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 8px;
}
.bd-post__date {
  font-family: var(--bd-font-en);
  font-size: 1.2rem;
  color: var(--bd-en-light);
}
.bd-post__title {
  margin: 0;
  text-wrap: pretty;
  font-size: 1.45rem;
  line-height: 1.75;
  color: var(--bd-txt);
}
.bd-post:hover .bd-post__title { color: var(--bd-sub); }

/* ==========================================================================
   8. TOP：キャラデコ訴求 / 3つの特徴
   ========================================================================== */
.bd-sec--intro .bd-split__body .bd-h2 { margin-bottom: 24px; }
.bd-sec--intro .bd-split__body .bd-text { margin-bottom: 30px; }

.bd-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
  gap: 26px;
  margin-bottom: 44px;
  /* stretch（既定）で3カードの高さを揃える。本文量が違っても
     .bd-feature__body の flex:1 と .bd-feature__btn の margin-top:auto で
     ボタンが下端に揃う。 */
  align-items: stretch;
}
.bd-feature { display: flex; flex-direction: column; }
.bd-feature__img {
  /* 比率を固定して3枚の画像エリアの高さを揃える（.bd-card__img と同形式）。
     画像を差し替えても縦位置がずれない。 */
  aspect-ratio: 4 / 3;
  border: 1px solid var(--bd-dot);
  border-bottom: none;
  border-radius: 9999px 9999px 0 0;
  overflow: hidden;
  background: var(--bd-tint2);
}
.bd-feature__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 本文(#FFFFF0)とセクション背景(--bd-tint #F7F0E3)が近似色で縁が見えないため、
   上のアーチ画像とつながる枠線で輪郭を出す。 */
.bd-feature__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 26px 34px;
  border: 1px solid var(--bd-dot);
  border-top: none;
  border-radius: 0 0 14px 14px;
  background: var(--bd-ivory);
  text-align: center;
}
.bd-feature__en {
  margin: 0 0 8px;
  font-family: var(--bd-font-en);
  font-size: 2.6rem;
  letter-spacing: .04em;
  color: var(--bd-sub);
  line-height: 1.3;
}
.bd-feature__title {
  margin: 0 0 18px;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--bd-txt);
}
.bd-feature__text {
  margin: 0 0 24px;
  text-wrap: pretty;
  font-size: 1.4rem;
  line-height: 1.95;
  color: var(--bd-txt-body);
  text-align: left;
}
.bd-feature__btn {
  margin-top: auto;
  padding: 12px 26px;
  font-size: 1.35rem;
}

/* ==========================================================================
   9. TOP：商品ラインナップ
   ========================================================================== */
/* カード見出しの最長「オーダーメイド・キャラデコ」（13文字 × 1.7rem ≒ 221px）が
   折り返さないよう、カード内寸が常に 221px を超える最小幅にする。
   （最小幅280px − 本文左右padding 48px = 232px） */
.bd-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
/* カードとページ背景がどちらも #FFFFF0 で縁が見えないため、枠線と影で分離する。 */
.bd-card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--bd-dot);
  border-radius: 18px;
  background: var(--bd-ivory);
  color: var(--bd-txt);
  box-shadow: 0 4px 16px rgba(154, 141, 122, .14);
  transition: border-color .25s ease;
}
.bd-card:hover { border-color: var(--bd-sub); opacity: 1; }
.bd-card__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bd-tint2);
  font-size: 1.2rem;
  letter-spacing: .06em;
}
.bd-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.bd-card:hover .bd-card__img img { transform: scale(1.03); }
.bd-card__body { padding: 22px 24px 26px; }
.bd-card__en {
  margin: 0 0 8px;
  font-family: var(--bd-font-en);
  font-size: 1.15rem;
  letter-spacing: .16em;
  color: var(--bd-sub);
}
.bd-card__title {
  margin: 0 0 12px;
  text-wrap: pretty;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.6;
}
.bd-card__text {
  margin: 0;
  text-wrap: pretty;
  font-size: 1.35rem;
  line-height: 1.95;
  color: var(--bd-txt-body);
}

/* ==========================================================================
   10. TOP：移動販売・出店
   ========================================================================== */
.bd-mobile {
  position: relative;
  overflow: hidden;
  margin-top: 100px;
  background: var(--bd-base);
}
.bd-mobile__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  align-items: stretch;
  max-width: 1320px;
  margin: 0 auto;
}
/* 本文の最長行「看板商品は、…「さぬきパイシュー」。」は42文字＝約609px必要。
   左右均等（1200px時に本文内寸520px）では <br> の位置より前で折り返すため、
   ワイド幅ではテキスト側のカラムを広げる。 */
@media (min-width: 1200px) {
  .bd-mobile__inner { grid-template-columns: 42% 58%; }
}
/* あしらい（.bd-deco）より前面に置く */
.bd-mobile__inner { position: relative; z-index: 1; }
.bd-mobile__img { min-height: 440px; overflow: hidden; }
/* .bd-mobile__inner は align-items: stretch のグリッドなので、
   この枠の高さは確定する。画像はその高さいっぱいに敷き詰める。 */
.bd-mobile__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bd-mobile__body {
  padding: 74px 24px 74px 56px;
  color: var(--bd-ivory);
}
.bd-mobile__body .bd-h2 { margin-bottom: 22px; }
.bd-mobile__body .bd-text { margin-bottom: 30px; }

/* ==========================================================================
   11. TOP：Instagram
   ========================================================================== */
.bd-sec--insta .bd-h2 { margin-bottom: 16px; }
.bd-sec--insta .bd-text { margin-bottom: 34px; line-height: 2; }
.bd-insta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}
.bd-insta-grid__item {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bd-tint2);
}
.bd-insta-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.bd-insta-grid__item:hover { opacity: 1; }
.bd-insta-grid__item:hover img { transform: scale(1.03); }

/* ==========================================================================
   12. TOP：お客様の声
   ========================================================================== */
.bd-voice-title {
  text-wrap: pretty;
  max-width: 46em;
  margin: 0 auto 14px;
  font-size: 2rem;
  font-weight: 500;
  line-height: 2;
  color: var(--bd-txt);
}
.bd-voices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 24px;
  align-items: stretch;
}
/* カード(#FFFFF0)とセクション背景(--bd-tint #F7F0E3)が近似色のため、枠線と影で分離する。 */
.bd-voice {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 28px 28px;
  border: 1px solid var(--bd-dot);
  border-radius: 18px;
  background: var(--bd-ivory);
  box-shadow: 0 4px 16px rgba(154, 141, 122, .14);
}
.bd-voice__rate {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.bd-voice__rate-label {
  font-size: 1.1rem;
  letter-spacing: .06em;
  color: var(--bd-base);
}
.bd-voice__stars {
  font-size: 1.5rem;
  letter-spacing: .16em;
  color: var(--bd-sub);
}
.bd-voice__score {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bd-sub);
}
.bd-voice__title {
  margin: 0 0 18px;
  text-wrap: pretty;
  min-height: 3.4em;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--bd-txt);
}
.bd-voice__body {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 18px;
  align-items: start;
  flex: 1;
}
.bd-voice__person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.bd-voice__initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border-radius: 9999px;
  background: var(--bd-tint2);
  font-family: var(--bd-font-en);
  font-size: 2.4rem;
  color: var(--bd-base);
}
.bd-voice__name {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--bd-txt-sub);
  text-align: center;
}
.bd-voice__text {
  margin: 0;
  text-wrap: pretty;
  font-size: 1.3rem;
  line-height: 2;
  color: var(--bd-txt-body);
  white-space: pre-line;
}

/* ==========================================================================
   13. TOP：バナー
   ========================================================================== */
/* 枠は同じTOPページの商品カード（.bd-card）と同形式の細罫＋角丸に揃えている。
   以前の装飾フレーム画像（cont_frame.png）から差し替え。 */
.bd-bnrs {
  display: grid;
  /* minmax(0,…) にしないと、フレーム内テキストの min-content 幅で列が膨らむ */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.bd-bnr {
  position: relative;
  /* グリッド項目が min-content 幅で膨らんで列からはみ出すのを防ぐ */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 高さは中身に応じて伸び、同じ行のバナー同士はグリッドで揃う（.bd-card と同じ挙動） */
  min-height: 150px;
  padding: 32px 22px;
  border: 1px solid var(--bd-dot);
  border-radius: 18px;
  background: var(--bd-ivory);
  box-shadow: 0 4px 16px rgba(154, 141, 122, .14);
  color: var(--bd-txt);
  text-align: center;
  transition: transform .3s ease, border-color .25s ease;
}
.bd-bnr:hover {
  transform: translateY(-4px);
  border-color: var(--bd-sub);
  opacity: 1;
}
.bd-bnr__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bd-bnr__en {
  font-family: var(--bd-font-en);
  font-size: 1.25rem;
  letter-spacing: .16em;
  color: var(--bd-sub);
}
.bd-bnr__title {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.5;
}
.bd-bnr__note {
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--bd-txt-sub);
}
.bd-bnr__tel {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--bd-sub-dark);
}

/* ==========================================================================
   14. 余白ユーティリティ（共通utilityに刻みが無い値）
   ========================================================================== */
.bd-mb-16 { margin-bottom: 16px; }
.bd-mb-18 { margin-bottom: 18px; }
.bd-mb-22 { margin-bottom: 22px; }
.bd-mb-24 { margin-bottom: 24px; }
.bd-mb-28 { margin-bottom: 28px; }
.bd-mb-30 { margin-bottom: 30px; }
.bd-mb-40 { margin-bottom: 40px; }
.bd-mt-18 { margin-top: 18px; }
.bd-mt-20 { margin-top: 20px; }
.bd-mt-30 { margin-top: 30px; }
.bd-text--lh2 { line-height: 2; }
.bd-lineup__more { margin-top: 38px; }

/* -- セクション上余白（デザイン実数値） */
.bd-sec--pt26 { padding-top: 26px; }
.bd-sec--pt34 { padding-top: 34px; }
.bd-sec--pt56 { padding-top: 56px; }
.bd-sec--pt64 { padding-top: 64px; }
.bd-sec--pt80 { padding-top: 80px; }
.bd-sec--pt90 { padding-top: 90px; }
.bd-sec--pt94 { padding-top: 94px; }
.bd-sec-lead--36 { margin-bottom: 36px; }
.bd-sec-lead--38 { margin-bottom: 38px; }
.bd-sec-lead--44 { margin-bottom: 44px; }
.bd-sec-lead--light { color: var(--bd-ivory); }
.bd-container-1080 { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ==========================================================================
   15. 下層ページ共通：ページヒーロー / お問い合わせCTA
   ========================================================================== */
.page-hero--bd {
  padding: 70px 0;
  text-align: left;
  --hero-bg: var(--bd-tint);
  --hero-color: var(--bd-txt);
}
/* page-hero__content は flex-column のため、margin:0 auto の .container が
   縮んで中央寄せになる。デザインは左寄せなので幅100%に戻す */
.page-hero--bd .container { width: 100%; }
.page-hero--bd .heading__en {
  display: block;
  margin-bottom: 10px;
  font-family: var(--bd-font-en);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .18em;
  color: var(--bd-sub);
}
.page-hero--bd .heading__ja {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
  color: var(--bd-txt);
}

.bd-cta { margin-top: 56px; text-align: center; }
.bd-cta__title { margin: 0 0 14px; font-size: 2.2rem; font-weight: 700; color: var(--bd-txt); }
.bd-cta__lead {
  text-wrap: pretty;
  /* 45文字（約675px）が1行に収まる幅。44em＝660pxでは折り返す。 */
  max-width: 47em;
  margin: 0 auto 20px;
  font-size: 1.5rem;
  line-height: 2;
  color: var(--bd-txt-body);
}
.bd-cta__hours { margin: 14px 0 0; font-size: 1.3rem; color: var(--bd-txt-mute); }
/* .bd-bnr はトップでは3カラムに並ぶ前提の可変幅。単独で置くときは幅を絞って中央寄せする。 */
.bd-bnr-solo {
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}
.bd-cta__bnr { margin-top: 22px; }

/* ==========================================================================
   16. コンセプト
   ========================================================================== */
/* 背景はアイボリー（＝ページ背景と同色）。淡ベージュの帯にはしない。 */
.bd-sec--handwork { margin-top: 90px; padding: 80px 0; background: var(--bd-ivory); }

/* ==========================================================================
   17. 商品紹介
   ========================================================================== */
.bd-product {
  display: grid;
  grid-template-columns: minmax(230px, 262px) minmax(320px, 1fr);
  gap: 44px;
  align-items: start;
}
.bd-catnav {
  position: sticky;
  top: 96px;
  overflow: hidden;
  border: 1px solid var(--bd-dot);
  border-radius: 18px;
  background: var(--bd-ivory);
  box-shadow: 0 4px 16px rgba(154, 141, 122, .14);
}
.bd-catnav__head {
  padding: 20px 24px;
  background: var(--bd-base);
  text-align: center;
}
.bd-catnav__en {
  margin: 0;
  font-family: var(--bd-font-en);
  font-size: 1.1rem;
  letter-spacing: .18em;
  color: #f0d8cf;
}
.bd-catnav__title {
  margin: 4px 0 0;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--bd-ivory);
}
.bd-catnav__list { padding: 10px 18px 18px; }
.bd-catnav__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 8px;
  border-bottom: 1px dashed var(--bd-dot);
  font-size: 1.4rem;
  line-height: 1.7;
  color: var(--bd-txt-body);
}
.bd-catnav__item:hover { color: var(--bd-sub); opacity: 1; }
.bd-catnav__dot {
  flex: none;
  margin-top: .45em;
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: #d8ccb8;
}
.bd-catnav__item.is-current { color: var(--bd-sub); font-weight: 700; }
.bd-catnav__item.is-current .bd-catnav__dot { background: var(--bd-sub); }

.bd-cat--next { margin-top: 56px; }
.bd-cat-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 28px;
  border: 1px solid var(--bd-dot);
  border-radius: 16px;
  background: var(--bd-ivory);
}
.bd-cat-head__bar {
  flex: none;
  width: 5px;
  height: 30px;
  border-radius: 9999px;
  background: var(--bd-sub);
}
.bd-cat-head__title {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--bd-txt);
}
.bd-cat-head__en {
  font-family: var(--bd-font-en);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--bd-en-light);
}
.bd-cat__desc {
  margin: 24px 4px 8px;
  text-wrap: pretty;
  font-size: 1.45rem;
  line-height: 2;
  color: var(--bd-txt-body);
}
.bd-cat__note {
  margin: 0 4px 28px;
  font-size: 1.25rem;
  color: var(--bd-note);
}
.bd-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
}
.bd-item {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--bd-dot);
  border-radius: 18px;
  background: var(--bd-ivory);
  transition: border-color .25s ease;
}
.bd-item:hover { border-color: var(--bd-sub); }
.bd-item__img {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  font-size: 1.15rem;
}
.bd-item__name {
  margin: 0 0 10px;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--bd-txt-sub);
}
.bd-item__price { margin: 0; font-size: 1.5rem; color: var(--bd-sub); }

.bd-shopcta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding: 36px 40px;
  border-radius: 18px;
  background: var(--bd-tint);
}
.bd-shopcta__title { margin: 0 0 10px; font-size: 1.8rem; font-weight: 700; color: var(--bd-txt); }
.bd-shopcta__text { margin: 0; font-size: 1.4rem; line-height: 1.9; color: var(--bd-txt-body); }
.bd-shopcta .bd-btn { flex: none; }

/* ==========================================================================
   18. キャラデコケーキについて
   ========================================================================== */
.bd-sec--types { margin-top: 96px; padding: 80px 0; }
.bd-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}
/* カード(#FFFFF0)とセクション背景(--bd-tint #F7F0E3)が近似色で縁が見えないため、
   枠線と影で分離する。枠線は --bd-line(#e5dccd) では弱いので --bd-dot(#cdbfa9)。
   影の色は site.scss の $shadow_base と同じメインカラーの透過。 */
.bd-type {
  overflow: hidden;
  border: 1px solid var(--bd-dot);
  border-radius: 18px;
  background: var(--bd-ivory);
  box-shadow: 0 4px 16px rgba(154, 141, 122, .14);
}
.bd-type__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.bd-type__body { padding: 30px 32px 34px; }
.bd-type__en {
  margin: 0 0 10px;
  font-family: var(--bd-font-en);
  font-size: 1.25rem;
  letter-spacing: .16em;
  color: var(--bd-sub);
}
.bd-type__title { margin: 0 0 8px; font-size: 2rem; font-weight: 700; color: var(--bd-txt); }
.bd-type__lead { margin: 0 0 14px; font-size: 1.5rem; font-weight: 500; color: var(--bd-txt-mute); }
.bd-type__text { margin: 0; text-wrap: pretty; font-size: 1.4rem; line-height: 2; color: var(--bd-txt-body); }
.bd-types__closing {
  text-wrap: pretty;
  max-width: 46em;
  margin: 38px auto 0;
  text-align: center;
  font-size: 1.45rem;
  line-height: 2;
  color: var(--bd-txt-body);
}

.bd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 34px;
}
.bd-tag {
  padding: 9px 18px;
  /* --bd-line2(#ddd2be) はアイボリー背景に対して弱いため --bd-dot(#cdbfa9) にする */
  border: 1px solid var(--bd-dot);
  border-radius: 9999px;
  font-size: 1.3rem;
  color: var(--bd-txt-mute);
}
.bd-works {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 20px;
}
.bd-works__item {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--bd-tint2);
  font-size: 1.2rem;
}
.bd-works__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.bd-works__item:hover { opacity: 1; }
.bd-works__item:hover img { transform: scale(1.03); }

.bd-sec--steps {
  margin-top: 96px;
  padding: 82px 0;
  background: var(--bd-base);
}
.bd-steps { display: flex; flex-direction: column; gap: 16px; }
.bd-step {
  display: grid;
  grid-template-columns: minmax(90px, 118px) 1fr;
  gap: 28px;
  align-items: start;
  padding: 26px 32px;
  border-radius: 16px;
  background: var(--bd-ivory);
}
.bd-step__no { padding-right: 20px; border-right: 1px solid var(--bd-line); }
.bd-step__label {
  margin: 0;
  font-family: var(--bd-font-en);
  font-size: 1.2rem;
  letter-spacing: .14em;
  color: var(--bd-en-light);
}
.bd-step__num {
  margin: 0;
  font-family: var(--bd-font-en);
  font-size: 3.4rem;
  line-height: 1.1;
  color: var(--bd-sub);
}
.bd-step__title { margin: 0 0 6px; font-size: 1.8rem; font-weight: 700; color: var(--bd-txt); }
.bd-step__lead { margin: 0 0 10px; font-size: 1.45rem; color: var(--bd-txt-mute); }
.bd-step__text { margin: 0; text-wrap: pretty; font-size: 1.4rem; line-height: 1.95; color: var(--bd-txt-body); }

.bd-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
  align-items: stretch;
}
.bd-note-card {
  padding: 28px 30px;
  border-radius: 16px;
  background: var(--bd-tint);
}
.bd-note-card__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.bd-note-card__no {
  font-family: var(--bd-font-en);
  font-size: 2.2rem;
  color: var(--bd-sub);
}
.bd-note-card__title { margin: 0; font-size: 1.7rem; font-weight: 700; color: var(--bd-txt); }
.bd-note-card__text { margin: 0; text-wrap: pretty; font-size: 1.4rem; line-height: 2; color: var(--bd-txt-body); }

/* ==========================================================================
   19. 出展・移動販売サービス
   ========================================================================== */
.bd-event-hero {
  position: relative;
  height: 420px;
  overflow: hidden;
  background: var(--bd-tint2);
}
.bd-event-hero__photo {
  position: absolute;
  inset: 0;
}
.bd-event-hero__body {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bd-event-hero__body .container { width: 100%; }
.bd-event-hero__sub { margin: 0; font-size: 1.55rem; color: var(--bd-txt-body); }
.bd-h2--34 { font-size: 3.4rem; line-height: 1.6; }
.bd-h2--26-lh { font-size: 2.6rem; line-height: 1.7; }

.bd-event-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}
.bd-event-photos__item {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  font-size: 1.2rem;
}
.bd-halfmedia { margin-top: 96px; }
.bd-halfmedia__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
}
.bd-halfmedia__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 76px 56px 76px 24px;
}
.bd-halfmedia__img { min-height: 420px; overflow: hidden; }
/* .bd-halfmedia__inner は align-items: stretch のグリッドなので枠の高さは確定する。 */
.bd-halfmedia__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bd-scenes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.bd-scenes__item {
  padding: 22px 20px;
  /* --bd-line(#e5dccd) はアイボリー背景に対して弱すぎたため、1段濃い --bd-dot(#cdbfa9) にする */
  border: 1px solid var(--bd-dot);
  border-radius: 14px;
  text-align: center;
  font-size: 1.45rem;
  color: var(--bd-txt-body);
}

/* ==========================================================================
   20. 店舗紹介
   ========================================================================== */
.bd-shop-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 20px;
  margin-bottom: 56px;
}
.bd-shop-photos__item {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
  background: var(--bd-tint2);
}
.bd-shop-photos__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.bd-shop-photos__item:hover { opacity: 1; }
.bd-shop-photos__item:hover img { transform: scale(1.03); }

.bd-shop-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 48px;
  align-items: start;
}
.bd-info-table { margin: 0; }
.bd-info-table__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--bd-line);
}
.bd-info-table__label {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--bd-base);
}
.bd-info-table__value {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--bd-txt);
}
.bd-shop-map {
  border: 1px solid var(--bd-line);
  border-radius: 16px;
  overflow: hidden;
}
.bd-shop-map iframe {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;
}

/* ==========================================================================
   21. お知らせ一覧 / 記事詳細
   ========================================================================== */
.bd-entry-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 300px;
  gap: 56px;
  align-items: start;
}
/* 一覧：記事が1件でも引き伸ばされないよう auto-fill（空き列を残す） */
.bd-posts--list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px 26px; }
.bd-post__title--lg { font-size: 1.5rem; }

.bd-side { display: flex; flex-direction: column; gap: 34px; }
.bd-side__title {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bd-line);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--bd-txt);
}
.bd-side__item {
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px dashed var(--bd-dash);
  font-size: 1.4rem;
  color: var(--bd-txt-body);
}
.bd-recent__item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--bd-dash);
  color: var(--bd-txt);
}
.bd-recent__item:hover { opacity: 1; }
.bd-recent__item:hover .bd-recent__title { color: var(--bd-sub); }
.bd-recent__img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bd-tint2);
}
.bd-recent__img img { width: 100%; height: 100%; object-fit: cover; }
.bd-recent__date {
  margin: 0 0 4px;
  font-family: var(--bd-font-en);
  font-size: 1.1rem;
  color: var(--bd-en-light);
}
.bd-recent__title { margin: 0; font-size: 1.3rem; line-height: 1.6; }

.bd-pager { margin: 52px 0 0; }
.bd-pager .pagination__link {
  min-width: 42px;
  height: auto;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--bd-ivory);
  border-color: var(--bd-line2);
  font-size: 1.4rem;
  color: var(--bd-txt-mute);
}
.bd-pager .pagination__link:hover { border-color: var(--bd-sub); color: var(--bd-sub); }
.bd-pager .pagination__link.is-current {
  border-color: var(--bd-sub);
  background: var(--bd-sub);
  color: var(--bd-ivory);
}

.bd-breadcrumb { padding: 0; font-size: 1.25rem; color: var(--bd-note); }
.bd-breadcrumb .breadcrumb__link,
.bd-breadcrumb .breadcrumb__current,
.bd-breadcrumb .breadcrumb__item::after { color: var(--bd-note); }
.bd-entry__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.bd-entry__date {
  font-family: var(--bd-font-en);
  font-size: 1.25rem;
  color: var(--bd-en-light);
}
.bd-entry__title {
  margin: 0 0 28px;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.65;
  color: var(--bd-txt);
}
.bd-entry__hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 34px;
}
.bd-entry__photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}
.bd-entry__photos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}
.bd-entry__nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 22px;
  border-top: 1px solid var(--bd-line);
  font-size: 1.35rem;
}

/* -- PC専用の改行。SPでは改行させない（幅が足りず不自然な位置で折り返すため） */
.bd-br-pc { display: inline; }

/* ==========================================================================
   22. レスポンシブ
   ========================================================================== */
/* PCナビは6項目あり、拡大するとワイド幅でしか1列に収まらない。
   1400px 以下では少し詰めて、2段に折り返さないようにする。
   （1100px 以下ではPCナビ自体が消えてハンバーガーに切り替わる） */
@media (max-width: 1400px) {
  .bd-header__inner { padding: 14px 24px; }
  .bd-gnav .header__nav-item a { padding: 5px 8px; }
  .bd-gnav__icon,
  .bd-gnav__img { width: 34px; height: 34px; }
  .bd-gnav__circle { left: -6px; bottom: -5px; width: 35px; height: 35px; }
  .bd-gnav .header__nav-ja { font-size: 1.3rem; }
  .bd-header__tel-num { font-size: 1.8rem; }
  .bd-header__tel-note { font-size: 1.1rem; }
}

@media (max-width: 1100px) {
  .bd-deco--hero { width: 480px; height: 180px; }  /* 見出しと重ならない幅に絞る */

  .bd-header__inner { padding: 8px 16px; }
  .bd-header__logo img { height: 32px; }
  .bd-product { grid-template-columns: 1fr; gap: 28px; }
  .bd-catnav { position: static; }
  .bd-entry-layout { grid-template-columns: 1fr; gap: 40px; }
  /* 3列のまま枠が縮むので、文字を一段小さくして枠内に収める */
  .bd-bnrs { gap: 12px; }
  .bd-bnr { padding: 20px 14px; }
  .bd-bnr__title { font-size: 1.4rem; }
  .bd-bnr__note { font-size: 1.15rem; }
  .bd-bnr__tel { font-size: 1.7rem; }
}

@media (max-width: 896px) {
  .bd-br-pc { display: none; }
  .bd-renga--right { bottom: -64px; }  /* .bd-sec--charadeco の margin-top に合わせる */
  .bd-deco--choux { width: 260px; height: 116px; }

  .bd-mv { height: 480px; min-height: 0; }  /* SPは全画面にせず固定高さ */
  .bd-mv__catch { font-size: 3.2rem; letter-spacing: .1em; }
  .bd-mv__en { font-size: 1.8rem; }

  .bd-sec--news { padding-top: 56px; }
  .bd-sec--intro { padding-top: 64px; }
  .bd-sec--charadeco { margin-top: 64px; padding: 56px 0 60px; }
  .bd-sec--lineup { padding-top: 40px; }
  .bd-sec--insta { padding-top: 64px; }
  .bd-sec--voice { margin-top: 64px; padding: 56px 0; }
  .bd-sec--bnr { padding-top: 40px; }
  .bd-bnrs {
    /* 1fr（= minmax(auto,1fr)）だとフレーム内テキストの min-content 幅で
       列がコンテナより広がり、画面外に見切れる。基底ルールと同じく最小0にする。 */
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    max-width: 440px;
    margin: 0 auto;
  }
  .bd-bnr__title { font-size: 1.7rem; }
  .bd-bnr__note { font-size: 1.3rem; }
  .bd-bnr__tel { font-size: 2rem; }
  .bd-sec--handwork,
  .bd-sec--types { margin-top: 64px; padding: 56px 0; }
  .bd-divider { margin-top: 64px; }  /* 下は .bd-sec--handwork の 64px と結合 */
  .bd-sec--steps { margin-top: 64px; padding: 56px 0; }
  .bd-halfmedia { margin-top: 64px; }
  .bd-sec--pt64,
  .bd-sec--pt80,
  .bd-sec--pt90,
  .bd-sec--pt94 { padding-top: 56px; }
  .bd-mobile { margin-top: 64px; }

  .bd-split { gap: 36px; }
  .bd-mobile__body { padding: 48px 24px; }
  .bd-mobile__img { min-height: 300px; }
  .bd-halfmedia__body { padding: 48px 24px; }
  .bd-halfmedia__img { min-height: 300px; }
  .bd-event-hero { height: 360px; }

  .bd-h2 { font-size: 2.2rem; }
  .bd-h2--25, .bd-h2--26, .bd-h2--26-lh, .bd-h2--27, .bd-h2--28, .bd-h2--29 { font-size: 2.2rem; }
  .bd-h2--30, .bd-h2--30-lh, .bd-h2--32, .bd-h2--34 { font-size: 2.4rem; }
  .bd-voice-title { font-size: 1.7rem; }
  .page-hero--bd { padding: 50px 0; }
  .page-hero--bd .heading__ja { font-size: 2.4rem; }

  .bd-features { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .bd-scenes { grid-template-columns: repeat(2, 1fr); }
  .bd-step { grid-template-columns: 84px 1fr; gap: 18px; padding: 22px 20px; }
  .bd-step__no { padding-right: 14px; }
  .bd-item { grid-template-columns: 96px 1fr; gap: 14px; }
  .bd-shopcta { padding: 28px 24px; }
  .bd-footer { margin-top: 130px; }  /* カーブ 50px ＋ 上部余白 80px */
  .bd-footer::before { height: 50px; }
  .bd-footer__inner { gap: 36px; padding-top: 48px; }
  .bd-info-table__row { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 639px) {
  /* 中央寄せの長文はスマホだと行頭が揃わず読みづらいので左寄せにする。
     見出し（.bd-h2 / .bd-voice-title / .bd-sec-en）とカード内の短いテキスト
     （.bd-feature__body / .bd-bnr / .bd-scenes__item など）は中央のまま。 */
  .bd-sec-lead .bd-text,
  .bd-sec-lead .bd-note,
  .text-center .bd-text,
  .text-center .bd-note,
  .bd-cta__lead,
  .bd-types__closing { text-align: left; }

  /* PCサイズ（476px / 504px）のままだと画面幅を超え、横スクロールが発生する。
     比率（左1.478 / 右1.5）を保ったまま、狭い端末でも収まる幅に縮める。 */
  .bd-renga--left  { width: 240px; height: 162px; }
  .bd-renga--right { width: 260px; height: 173px; }

  /* 幅が狭く見出しと重なるため、薄くして文字を読めるようにする */
  .bd-deco--hero { width: 300px; height: 113px; opacity: .3; }

  /* 拡大した英語ラベルは、狭い画面では日本語との差を保ったまま縮める */
  .bd-sec-head__en,
  .bd-sec--lineup .bd-sec-en,
  .bd-sec--voice .bd-sec-en { font-size: 2.4rem; }

  .container,
  .bd-container-1320,
  .bd-container-1080 { padding-left: 16px; padding-right: 16px; }
  .bd-divider { width: calc(100% - 32px); }  /* .container の左右16pxに合わせる */

  .bd-mv { height: 380px; min-height: 0; }
  .bd-mv__body { width: 100%; }
  .bd-mv__catch { font-size: 2.4rem; line-height: 1.7; margin-bottom: 14px; max-width: 100%; letter-spacing: .06em; }
  .bd-mv__en { font-size: 1.5rem; }

  .bd-sec-head { flex-wrap: wrap; gap: 8px; }
  .bd-posts,
  .bd-posts--list { gap: 24px; }
  .bd-features { grid-template-columns: 1fr; }
  .bd-voices { grid-template-columns: 1fr; }
  .bd-voice { padding: 22px 20px; }
  .bd-voice__title { min-height: 0; }
  .bd-voice__body { grid-template-columns: 62px 1fr; gap: 14px; }
  .bd-voice__initial { width: 56px; height: 56px; font-size: 2rem; }
  .bd-cards { grid-template-columns: 1fr; }
  .bd-items { grid-template-columns: 1fr; }
  .bd-types { grid-template-columns: 1fr; }
  .bd-type__body { padding: 24px 22px 26px; }
  .bd-works { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .bd-notes { grid-template-columns: 1fr; }
  .bd-note-card { padding: 22px 20px; }
  .bd-step { grid-template-columns: 1fr; gap: 12px; }
  .bd-step__no {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 0 0 10px;
    border-right: none;
    border-bottom: 1px solid var(--bd-line);
  }
  .bd-scenes { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .bd-scenes__item { padding: 16px 12px; font-size: 1.3rem; }
  .bd-event-hero { height: 320px; }
  .bd-entry__title { font-size: 2.2rem; }
  .bd-entry__nav { flex-wrap: wrap; justify-content: center; }
  /* 共通footerのSP指定（.footer-body__nav を flex-direction:column にする）を戻し、
     デザインどおり横並び折り返しの中央寄せにする */
  /* スマホではロゴ・住所・電話・SNSボタンを中央寄せにする。
     .bd-footer__info は grid項目で中身が左寄せのままだったため。
     .bd-footer__links は flex なので text-align では効かず justify-content で寄せる。 */
  .bd-footer__info { text-align: center; }
  .bd-footer__links { justify-content: center; }
  .bd-footer__bottom { flex-direction: column; justify-content: center; text-align: center; }
  .bd-footer__nav { display: none; }  /* スマホではハンバーガーメニューに集約する */
  .bd-lace { height: 26px; background-size: auto 26px; }
  .bd-loader__lamp { width: 100px; height: 160px; }
  .bd-loader__body { width: 100px; height: 160px; }
  .bd-loader__glow { top: 127px; width: 180px; height: 180px; }  /* ランプ画像が小さいぶん下げ幅も比例させる */
  .bd-loader__name { font-size: 1.6rem; }
}

/* ①の見出しは、コンテナが最大幅(1200px)になるワイド画面でのみ1行を保証する。
   それ未満はカラム幅が足りないため、無理に nowrap にすると横にはみ出す。 */
@media (min-width: 1200px) {
  .bd-h2--32 { white-space: nowrap; }
}

/* Hand drawing セクション（concept.php）は画像→本文の順でマークアップしているため、
   1カラムに折り返すと画像が本文の上に来る。スマホでは本文を先に読ませたいので入れ替える。
   .bd-split が1カラムになるのは コンテンツ幅 330*2+56=716px 未満 ≒ ビューポート756px 未満。 */
@media (max-width: 756px) {
  .bd-sec--handwork .bd-split__media { order: 2; }
}