@charset "utf-8";
/* ==========================================================================
   Base
   ========================================================================== */
:root{
  --color-bg:          #f7f1e4;   /* クリーム背景 */
  --color-bg-dark:     #181210;   /* 焦げ茶〜黒 */
  --color-bg-dark2:    #20140f;
  --color-red:         #c8161d;   /* ブランドレッド */
  --color-gold:        #b08d3f;   /* ゴールド */
  --color-text:        #2c2420;
  --color-text-sub:    #6b5f53;
  --color-text-light:  #f3ead9;
  --color-border:      #ddd0b5;
  --color-tag-event:   #8b2635;
  --color-tag-dark:    #1e1e18;
  --color-bg-warm:     #f0e8de;
  --color-gold-btn:    #d4a044;
  --color-recipe-accent: #c1662f;  /* レシピページ専用アクセント（テラコッタ） */
  --color-contact:     #8b2635;   /* お問い合わせ用の臙脂（現在は未使用。PC固定ボタンを戻す場合に使用） */
  --font-serif:        'Noto Serif JP', serif;
  --font-sans:         'Noto Sans JP', sans-serif;
  --header-h-pc:       96px;
  --header-h-sp:       60px;
  --shopbar-h-sp:      60px;
  --transition:        0.25s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;}
body{
  font-family:var(--font-sans);
  color:var(--color-text);
  line-height:1.8;
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  padding-bottom:var(--shopbar-h-sp);
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
ul,ol{list-style:none;}

.l-container{
  width:100%;
  max-width:1080px;
  margin-inline:auto;
  padding-inline:20px;
}

/* ==========================================================================
   スクロールリビール（JSでビューポート進入を検知し js/common.js が is-inview を付与）
   .has-js が無い場合（JS無効時）は常に表示のまま＝プログレッシブエンハンスメント
   ========================================================================== */
.has-js .js-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.25,.1,.25,1), transform .7s cubic-bezier(.25,.1,.25,1);
}
.has-js .js-reveal.is-inview{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .has-js .js-reveal{opacity:1;transform:none;transition:none;}
}

/* ==========================================================================
   Header（固定・全ページ共通）
   ========================================================================== */
.l-header{
  position:fixed;
  top:0;left:0;width:100%;
  z-index:200;
  background:#100e0b;
  height:var(--header-h-sp);
  display:flex;
  align-items:center;
  box-shadow:0 2px 12px rgba(0,0,0,0.25);
}

/* WordPress管理バー（ログイン時のみ表示）の高さぶん、固定ヘッダーとSPドロワーを押し下げる。
   管理バーがposition:fixedでheaderより手前に重なり、本文側は<html>のmargin-topで
   ずれるため、headerだけそのままだと本文との間に隙間ができてしまう対策。 */
body.admin-bar .l-header{top:32px;}
body.admin-bar .c-drawer{
  top:calc(var(--header-h-sp) + 32px);
  height:calc(100dvh - var(--header-h-sp) - 32px);
}
@media screen and (max-width:782px){
  body.admin-bar .l-header{top:46px;}
  body.admin-bar .c-drawer{
    top:calc(var(--header-h-sp) + 46px);
    height:calc(100dvh - var(--header-h-sp) - 46px);
  }
}

.c-header__inner{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-inline:16px;
  gap:12px;
}

.c-header__brand{display:flex;align-items:center;gap:12px;min-width:0;}
.c-header__logo{flex:none;display:flex;align-items:center;}
.c-header__logo img{height:30px;width:auto;}

.c-header__eyebrow{
  display:flex;flex-wrap:wrap;
  column-gap:8px;row-gap:2px;
  font-size:0.625rem;
  line-height:1.5;
  color:var(--color-text-light);
  opacity:0.85;
  letter-spacing:0.02em;
}
.c-header__eyebrow-item{position:relative;padding-left:8px;}
.c-header__eyebrow-item:first-child{padding-left:0;}
.c-header__eyebrow-item::before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:1px;background:rgba(243,234,217,0.4);}
.c-header__eyebrow-item:first-child::before{display:none;}
.c-header__eyebrow-item--brand{flex-basis:100%;padding-left:0;}
.c-header__eyebrow-item--brand::before{display:none;}

.c-gnav{display:none;}
.c-gnav__list{display:flex;align-items:center;gap:28px;}
.c-gnav__link{
  font-family:var(--font-serif);
  font-size:0.875rem;
  color:var(--color-text-light);
  letter-spacing:0.05em;
  position:relative;
  padding:6px 0;
  transition:color var(--transition);
}
.c-gnav__link[aria-current="page"]{color:var(--color-gold);}
.c-gnav__link[aria-current="page"]::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--color-gold);
}
.c-gnav__link:hover{color:var(--color-gold);}

.c-hamburger{
  flex:none;
  width:40px;height:40px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:none;border:none;cursor:pointer;
}
.c-hamburger__line{width:24px;height:2px;background:var(--color-text-light);transition:transform .3s ease,opacity .3s ease;}
.c-hamburger[aria-expanded="true"] .c-hamburger__line:nth-child(1){transform:translateY(8px) rotate(45deg);}
.c-hamburger[aria-expanded="true"] .c-hamburger__line:nth-child(2){opacity:0;}
.c-hamburger[aria-expanded="true"] .c-hamburger__line:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* SPドロワー */
.c-drawer{
  position:fixed;top:var(--header-h-sp);left:0;width:100%;
  height:calc(100dvh - var(--header-h-sp));
  background:var(--color-bg-dark2);
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  z-index:190;overflow-y:auto;
}
.c-drawer.is-open{transform:translateX(0);}
.c-drawer__list{padding:8px 0;}
.c-drawer__item{border-bottom:1px solid rgba(255,255,255,0.1);}
.c-drawer__link{
  display:block;padding:18px 24px;
  font-family:var(--font-serif);
  font-size:1rem;color:var(--color-text-light);letter-spacing:0.04em;
}
.c-drawer__link[aria-current="page"]{color:var(--color-gold);}

/* SPドロワー：お問い合わせボタン（下部固定バーに入らないため、ドロワー先頭で目立たせる） */
.c-drawer__cta{padding:20px 24px 12px;}
.c-drawer__contact{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 20px;
  background:#fff;
  color:var(--color-text);
  font-family:var(--font-serif);
  font-size:1rem;letter-spacing:0.1em;
  border-radius:6px;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  transition:opacity var(--transition);
}
.c-drawer__contact:hover{opacity:0.85;}
.c-drawer__contact svg{width:20px;height:20px;flex:none;}

.c-drawer-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;z-index:180;
}
.c-drawer-overlay.is-open{opacity:1;visibility:visible;}

/* ==========================================================================
   ショッピングボタン（固定）
   ========================================================================== */
.c-shop-fixed-group{
  position:fixed;
  right:0;top:50%;
  transform:translateY(-50%);
  display:flex;flex-direction:column;
  z-index:150;
}
.c-shop-fixed{
  writing-mode:vertical-rl;
  display:flex;flex-direction:row;align-items:center;gap:10px;
  background:var(--color-red);
  color:#fff;
  padding:18px 10px;
  font-family:var(--font-sans);
  font-size:0.8125rem;
  letter-spacing:0.1em;
  box-shadow:-2px 0 10px rgba(0,0,0,.25);
  transition:opacity var(--transition);
}
.c-shop-fixed:hover{opacity:0.85;}
.c-shop-fixed svg{width:20px;height:20px;flex:none;}
.c-shop-fixed--products{background:var(--color-gold);}
/* PC固定のお問い合わせはグレーで試用中（臙脂に戻す場合は var(--color-contact) に） */
.c-shop-fixed--contact{background:#6b5f53;}
.c-shop-fixed-group > .c-shop-fixed:first-child{border-radius:6px 0 0 0;}
.c-shop-fixed-group > .c-shop-fixed:last-child{border-radius:0 0 0 6px;}

/* ==========================================================================
   トップへ戻るボタン（固定・スクロールで表示）
   ========================================================================== */
.c-back-to-top{
  position:fixed;
  right:16px;bottom:calc(var(--shopbar-h-sp) + 16px);
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;
  border:1px solid var(--color-gold);
  color:var(--color-gold);
  border-radius:50%;
  box-shadow:0 4px 14px rgba(0,0,0,.15);
  cursor:pointer;
  opacity:0;visibility:hidden;
  transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease, background .25s ease, color .25s ease;
  z-index:150;
}
.c-back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.c-back-to-top:hover{background:var(--color-gold);color:#fff;}
.c-back-to-top svg{width:18px;height:18px;}

@media (min-width:1024px){
  .c-back-to-top{right:24px;bottom:24px;width:48px;height:48px;}
  .c-back-to-top svg{width:20px;height:20px;}
}

/* ==========================================================================
   Footer（固定・全ページ共通）
   ========================================================================== */
.l-footer{
  position:relative;
  background:var(--color-bg);
  padding:40px 0 24px;
  overflow:hidden;
  text-align:center;
}
.l-footer__inner{position:relative;z-index:1;}

/* ブランド欄：ロゴの横幅をブロック幅とし、キャッチ・ロゴ・SNSアイコンを同じ幅で中央揃えにする */
.c-footer__brand{width:180px;margin:0 auto 40px;}
.c-footer__logo{display:flex;flex-direction:column;align-items:center;margin-bottom:20px;}
/* ロゴ上のキャッチ：ロゴ幅よりやや狭くなるよう文字サイズと字間を合わせている。
   字間は末尾にも付くため、text-indentで左右の余白を揃えて中央に見せる */
.c-footer__tagline{
  font-family:var(--font-serif);
  font-size:0.9375rem;
  letter-spacing:0.24em;
  text-indent:0.24em;
  line-height:1.6;
  color:var(--color-text);
  margin-bottom:12px;
}
.c-footer__logo img{width:100%;height:auto;}

/* SNSアイコン：ロゴ幅の中に均等配置（左右は少し内側に寄せる） */
.c-footer__sns{
  display:flex;justify-content:space-between;
  margin-top:20px;
  padding:0 16px;
}
.c-footer__sns a{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  transition:opacity var(--transition);
}
.c-footer__sns a:hover{opacity:0.8;}
.c-footer__sns img{width:100%;height:100%;}

/* 電話注文：ロゴ下・SNSアイコン上、ブランド欄の幅で中央揃え。上下に細線を引いて区切る */
.c-footer__tel{
  display:flex;flex-direction:column;align-items:center;
  padding:10px 0 8px;
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
  color:var(--color-text);
  transition:color var(--transition);
}
.c-footer__tel-label{
  font-size:0.6875rem;
  letter-spacing:0.2em;
  text-indent:0.2em;
  color:var(--color-gold);
}
.c-footer__tel-num{
  font-family:var(--font-serif);
  font-size:1.375rem;
  font-weight:600;
  letter-spacing:0.06em;
  line-height:1.4;
}
.c-footer__tel-hours{
  font-size:0.6875rem;
  letter-spacing:0.02em;
  color:var(--color-text-sub);
}
.c-footer__tel:hover{color:var(--color-red);}

.c-footer__nav{
  display:none;
}
.c-footer__nav-col{text-align:left;}
.c-footer__nav-head{
  display:block;
  font-size:0.6875rem;
  letter-spacing:0.15em;
  color:var(--color-gold);
  margin-bottom:16px;
}
.c-footer__nav-list li + li{margin-top:14px;}
.c-footer__nav-list a{font-size:0.8125rem;color:var(--color-text);}
.c-footer__nav-list a:hover{color:var(--color-red);}

.c-footer__bottom{
  border-top:1px solid var(--color-border);
  margin-top:24px;
  padding-top:20px;
}
.c-footer__copy{font-size:0.6875rem;letter-spacing:0.04em;color:var(--color-text-sub);}

.c-footer__shopbar{
  position:fixed;left:0;bottom:0;
  width:100%;
  min-height:var(--shopbar-h-sp);
  display:flex;
  box-shadow:0 -2px 10px rgba(0,0,0,.2);
  z-index:150;
  opacity:0;visibility:hidden;
  transform:translateY(100%);
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.c-footer__shopbar.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.c-footer__shopbar-link{
  flex:1 1 0;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 10px;
  color:#fff;
  font-family:var(--font-sans);
  font-size:0.9375rem;
  letter-spacing:0.04em;
}
.c-footer__shopbar-link--shop{flex-grow:3;}
.c-footer__shopbar-link--products{flex-grow:2;}
.c-footer__shopbar-link svg,
.c-footer__shopbar-link img{width:20px;height:20px;flex:none;}
.c-footer__shopbar-link--shop{background:var(--color-red);}
.c-footer__shopbar-link--products{background:var(--color-gold);}

/* ==========================================================================
   PC（1024px〜）ヘッダー・フッター共通
   ========================================================================== */
@media (min-width:1024px){
  body{padding-bottom:0;}
  .l-header{height:var(--header-h-pc);}
  .c-header__logo img{height:36px;}
  .c-header__eyebrow{font-size:0.75rem;column-gap:14px;}
  .c-header__eyebrow-item{padding-left:14px;}
  .c-header__eyebrow-item--brand{flex-basis:auto;padding-left:14px;}
  .c-header__eyebrow-item--brand::before{display:block;}
  .c-gnav{display:flex;}
  .c-hamburger{display:none;}

  .l-footer{padding:64px 0 40px;text-align:left;}
  .l-footer__inner{display:flex;gap:120px;align-items:flex-start;}
  .c-footer__brand{flex:0 0 220px;width:220px;margin:0;}
  .c-footer__logo{margin-bottom:24px;}
  .c-footer__tagline{font-size:1.0625rem;letter-spacing:0.28em;text-indent:0.28em;margin-bottom:16px;}
  .c-footer__sns{margin-top:24px;padding:0 24px;}
  .c-footer__tel-num{font-size:1.5rem;}
  .c-footer__tel-hours{font-size:0.75rem;}
  /* ナビ4列はブランド欄の右側いっぱいに均等配置し、右端をコンテナ右端に揃える */
  .c-footer__nav{
    display:flex;flex:1 1 0;justify-content:space-between;gap:32px;
  }
  .c-footer__bottom{text-align:left;}
}