:root{
  --brand:#7b2d2b;         /* 小豆色（主色） */
  --brand-dark:#642525;         /* 小豆色（濃色） */
  --brand-ink:#4a1a19;     /* 見出し等の濃色 */
  --accent:#f6eceb;        /* 淡い小豆（バッジ等） */
  --ink:#0f172a;
  --nav-h: 64px;
  --totop-img:url('../images/totop_manju.png');
}

html{ scroll-behavior: smooth; }

/* ベース */
body{ line-height:1.8; color:var(--ink);
  font-family:'Noto Sans JP',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; }
p{ font-size:1.05rem; }
.badge-soft{ background:var(--accent); color:var(--brand-ink); }

/* ヒーロー背景（任意の画像に差し替えOK） */
.hero{
  position:relative; min-height:70vh; display:flex; align-items:center; justify-content:center;
  background: center/cover no-repeat url('../images/sample_hero.jpg');
  color:#fff;
}
.hero::after{
  content:""; position:absolute; inset:0 0 auto 0; height:140px;
  background: linear-gradient(to bottom, rgba(0,0,0,.40), rgba(0,0,0,0));
  pointer-events:none;
}
.hero .container{ position:relative; z-index:1; }

/* ナビ（オーバーレイ→スクロールで白） */
.navbar-overlay{ background: transparent; transition: background .25s ease, box-shadow .25s ease, color .25s ease; }
.navbar-overlay .navbar-brand, .navbar-overlay .nav-link{ color:#fff; }
.navbar-overlay .nav-link.active, .navbar-overlay .nav-link:hover{ color:#f8f9fa; }
.navbar-overlay .navbar-toggler{ border-color: rgba(255,255,255,.5); }
.navbar-overlay .navbar-toggler-icon{ filter: invert(1) brightness(200%); }
.navbar-overlay.scrolled{
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.navbar-overlay.scrolled .navbar-brand, .navbar-overlay.scrolled .nav-link{ color:#0f172a; }
.navbar-overlay.scrolled .navbar-toggler{ border-color: rgba(0,0,0,.15); }
.navbar-overlay.scrolled .navbar-toggler-icon{ filter:none; }

/* スクロール後（白ナビ）の active を小豆で強調 */
.navbar-overlay.scrolled .nav-link.active{
  color: var(--brand);
  font-weight: 700;
}


/* セクション見出し */
.section-title{
  position:relative; padding-bottom:.5rem; margin-bottom:1rem;
  color:var(--brand-ink); text-align:left;
}
.section-title::after{
  content:""; position:absolute; left:0; bottom:0;
  width:96px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--brand),transparent);
}

/* カード系 */
.card{ background:#fff; border:1px solid rgba(0,0,0,.06); box-shadow:0 8px 24px rgba(0,0,0,.06); }
.card-title{ color:var(--brand-ink); }

/* 上へ戻る */
.to-top{
  position:fixed; right:16px; bottom:16px; z-index:1030;
  width:56px; height:56px; border:none; cursor:pointer;
  background-image: var(--totop-img);
  background-repeat:no-repeat; background-position:center; background-size:contain;
  background-color: transparent; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
  opacity:0; pointer-events:none; transform:translateY(12px);
  transition:opacity .2s ease, transform .2s ease, filter .15s ease;
}
.to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* アンカーずれ対策 */
section[id]{ scroll-margin-top: calc(var(--nav-h) + 8px); }


/* ── h2装飾 ───────────────── */
.font-patrick { font-family: 'Fredericka the Great', cursive; }
h2 {
  color: var(--brand);
}


/* ── sweetsサブタイトル装飾 ─────────── */
.sweets-subtitle {
  font-family: 'Fredericka the Great', cursive;
  color: var(--brand);
  border-left: 6px solid #c58a8a;
  padding-left: 12px;
  scroll-margin-top: 90px; /* 見切れるなら100〜120に */
}

.sweets-lead{
  color:#6c757d;
  margin: -6px 0 16px;
  font-size: .95rem;
}
.sweets-divider{
  margin: 36px 0;
  opacity: .15;
}

/* ── sweetsカテゴリ別ボタン ─────────── */
.btn-azuki{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand);          /* あずき */
  --bs-btn-border-color: var(--brand);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #522020;
  --bs-btn-active-border-color: #522020;

  --bs-btn-focus-shadow-rgb: 122,45,45;
}

/* ── sweets「季節限定」「要予約」小バッジ ─────────── */
/* 共通：右上ピル */
.badge-tag{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);  

  color: #fff;
  border: 1px solid rgba(255,255,255,.45);

  font-size: .75rem;
  padding: .35rem .55rem;
  border-radius: 999px;
  letter-spacing: .02em;
  line-height: 1.2;
  text-align:center;
}

/* 季節限定：あずき（今の統一感） */
.badge-season{
  background: rgba(122,45,45,.92);
}

/* 要予約：渋い緑（抹茶/深緑） */
.badge-order{
  background: rgba(34,85,60,.92);
}


/* ── sweets Pagerボタン ─────────── */
.sweets-pager{
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

/* 共通 */
.sweets-prev-link,
.sweets-next-link{
  display: inline-flex;
  align-items: center;
  gap: .35rem;

  padding: .35rem .7rem;
  border-radius: 999px;

  color: var(--brand);               /* あずき */
  background: rgba(122,45,45,.08);
  border: 1px solid rgba(122,45,45,.25);

  text-decoration: none;
  font-size: .9rem;
  transition: transform .15s ease, background-color .15s ease;
}

/* hover */
.sweets-prev-link:hover,
.sweets-next-link:hover{
  background: rgba(122,45,45,.14);
}

/* 動きの向きだけ変える */
.sweets-prev-link:hover{
  transform: translateX(-2px);
}
.sweets-next-link:hover{
  transform: translateX(2px);
}

/* スマホ時：縦並びでもきれい */
@media (max-width: 576px){
  .sweets-pager{
    flex-direction: column;
    align-items: stretch;
  }
  .sweets-prev-link,
  .sweets-next-link{
    justify-content: center;
  }
}







/* ── 創業100周年バッジ ───────────────── */
/* ヒーロー中央寄せレイヤ（全面にかぶせて中央に） */
.hero-center{
  position:absolute; inset:0;
  display:grid; place-items:center;   /* 中央に配置 */
  pointer-events:none;                /* ボタンだけ反応させるため */
  z-index:2;
}

/* ボタンはクリックできるように */
.hero-center .btn{ pointer-events:auto; }

/* ロゴ＋コピーの並べ方：PCはロゴが左、コピーが右（横並び） */
.hero-box{
  display:flex; 
  align-items:center;
  gap: clamp(12px, 2.4vw, 28px);      /* ロゴとコピーの隙間 */
  background: rgba(0,0,0,.10);        /* ほんのりプレート(任意) */
  backdrop-filter: saturate(160%) blur(2px);
  border-radius: 12px;
  padding: clamp(12px, 2vw, 22px) clamp(16px, 3vw, 28px);
}

/* 100周年ロゴ：サイズは画面に応じて可変 */
.hero-anniv{
  width: clamp(120px, 14vw, 220px);
  height:auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
  flex: 0 0 auto;
}

/* コピーは常に中央寄せ（ボックス内） */
.hero-copy{
  text-align:center;
}

/* --- スマホ（縦積み：ロゴが上、コピーが下） --- */
@media (max-width: 991.98px){
  .hero-box{
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: rgba(0,0,0,.20);
    padding: 12px 16px;
  }
  .hero-anniv{
    width: clamp(120px, 34vw, 180px); /* スマホはやや小さめ */
  }
}

/* ===== Desktop 調整（992px 以上）===== */
@media (min-width: 992px){

  /* 1) ボックスの位置を少し下げる */
  .hero-box{
    margin-top: 20vh;                 /* 画面高の 10% 分だけ下へ */
    max-width: 880px;                 /* ボックスの最大幅を少し絞る */
    padding: 14px 24px;               /* 余白も少しだけ軽く */
    gap: 22px;                        /* ロゴとテキストの間 */
  }

  /* 2) ロゴを少し大きく */
  .hero-anniv{
    width: clamp(180px, 19vw, 280px); /* 以前より一回りアップ */
  }

  /* 3) プレートの濃さを少し抑えたい場合 */
  /* .hero-box { background: rgba(0,0,0,.10); } */
}



/* ヒーローのテキストが看板と被っても読めるよう、影を少し */
.hero-copy h1,
.hero-copy p{
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* 既存の hero まわりで position:relative が無い場合は付与 */
.hero{ position:relative; }



/* ===== Mobile: 開いたメニューを読みやすく ===== */
/* ===== モバイルメニュー：右側に出るパネル型／チラつき無し ===== */
@media (max-width: 991.98px){

  /* collapse 本体を“右側パネル”として固定配置 */
  #topNav .navbar-collapse{
    position: fixed;
    top: 56px;                 /* ←ナビの高さに合わせて調整（例:56px） */
    right: 12px;               /* 画面端にピッタリなら 0 */
    width: min(86vw, 360px);   /* パネル幅：最大360pxまで */
    padding: 14px 16px;
    z-index: 1040;             /* 文字・ボタンを最前面に */
  }

  /* 背景パネル（リンクの背面に置く） */
  #topNav .navbar-collapse::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius: 14px;
    background: rgba(17,24,39,.82);           /* 半透明ダーク */
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    box-shadow: 0 14px 30px rgba(0,0,0,.25);
    opacity:0; transform: translateY(-6px);
    transition: opacity .12s ease, transform .16s ease;
    pointer-events:none;       /* クリックを邪魔しない */
    z-index:0;                 /* 背面に固定 */
  }

  /* 開き始め（collapsing）からもう表示させる → チラつき防止 */
  #topNav .navbar-collapse.collapsing::before,
  #topNav .navbar-collapse.show::before{
    opacity:1; transform:none;
  }

  /* リンクは見やすく＆前面へ */
  #topNav .navbar-collapse .nav-link{
    position: relative; z-index:1;
    color:#fff !important;
    font-size:1.14rem; padding:12px 6px;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
  }
  #topNav .navbar-collapse .nav-item + .nav-item{
    border-top: 1px solid rgba(255,255,255,.14);
  }
}

/* 動きを苦手な設定の人にはブラーをオフ */
@media (prefers-reduced-motion: reduce){
  #topNav .navbar-collapse::before{ transition:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
}