@charset "UTF-8";
/* ============================================================
   base.css  ── 全ページ共通の核
   ・リセット / デザイントークン / 共通ユーティリティ
   ・header / drawer / footer / section / side など共通パーツ
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root{
  --cream:      #f4eedf;   /* 生成りベース */
  --cream-deep: #ece3cf;   /* 一段沈めた生成り */
  --ink:        #2e2b26;   /* 本文・濃い文字 */
  --ink-soft:   #5a554a;   /* 補助テキスト */
  --olive:      #6f6c34;   /* 差し色：くすんだオリーブ */
  --gold:       #a6884c;   /* 差し色：くすんだ金 */
  --shop:       #a31719;   /* オンラインショップ：くすんだ赤 */
  --shop-dark:  #861214;   /* 同・ホバー用 */
  --new:        #4a7c3f;   /* NEWバッジ：和グリーン */
  --line:       rgba(46,43,38,.14);

  --header-h:    84px;
  --header-h-sm: 64px;
  --ease:        cubic-bezier(.22,.61,.36,1);
  --maxw:        1280px;

  --font-sans:  "Noto Sans JP", system-ui, sans-serif;
  --font-serif: "Shippori Mincho", serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-sans);
  font-weight:400;
  color:var(--ink);
  background:var(--cream);
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

/* ---------- 共通ユーティリティ ---------- */
.mincho{ font-family:var(--font-serif); }

/* ---------- 共通レイアウト primitives ---------- */
/* section：全ページで使う節の基本余白（ページ固有の装飾は page.css 側で） */
.section{ padding:65px 0; }
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* side：下層ページ等のサイドカラム想定の受け皿 */
.side{ width:clamp(220px,22vw,300px); flex-shrink:0; }

/* ============================================================
   Header  ── 下スクロールで隠れ／上スクロールで現れる
   ============================================================ */
/* KVの上に浮かぶ白い角丸バー（JA福島さくら式） */
.site-header{
  position:fixed; z-index:1000;
  top:18px; left:0; right:0; margin-inline:auto;
  width:min(var(--maxw), calc(100% - 40px));
  height:72px;
  display:flex; align-items:center;
  background:#fff;
  border-radius:35px;
  box-shadow:0 6px 28px rgba(46,43,38,.10), 0 1px 0 rgba(46,43,38,.04);
  transition:transform .45s var(--ease), box-shadow .4s var(--ease), top .4s var(--ease);
}
/* スクロールで少し迫り上がり、影を強めて浮遊感を出す */
.site-header.is-scrolled{
  top:12px;
  box-shadow:0 10px 34px rgba(46,43,38,.16);
}
/* 下スクロールで隠す（上部の余白ぶんも含めて完全に退避） */
.site-header.is-hidden{ transform:translateY(calc(-100% - 28px)); }

.header-inner{
  width:100%; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

/* ロゴ画像（assets/img/kado.png を差し替えれば反映） */
.brand{ display:flex; align-items:center; line-height:0; }
.brand__logo{
  width:auto; height:48px;            /* 表示高さの基準。比率は維持 */
  transition:height .4s var(--ease);
}
.site-header.is-scrolled .brand__logo{ height:40px; }
@media (max-width:1024px){
  .brand__logo{ height:38px; }
  .site-header.is-scrolled .brand__logo{ height:34px; }
}

/* ナビ（PC） */
.nav{ display:flex; align-items:center; gap:clamp(14px,1.6vw,28px); }
.nav__list{
  display:flex; align-items:center; gap:clamp(14px,1.5vw,26px);
  list-style:none; margin:0; padding:0;
}
.nav__link{
  position:relative; font-size:14.5px; font-weight:700;
  letter-spacing:.06em; color:var(--ink); padding:6px 0; white-space:nowrap;
}
.nav__link::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right .35s var(--ease);
}
.nav__link:hover::after{ right:0; }

.nav__cta{
  font-size:13.5px; font-weight:700; letter-spacing:.06em;
  color:var(--cream); background:var(--shop);
  padding:11px 20px; border-radius:999px; white-space:nowrap;
  transition:background-color .3s var(--ease), transform .3s var(--ease);
}
.nav__cta:hover{ background:var(--shop-dark); transform:translateY(-1px); }

/* ハンバーガー（SP） */
.nav-toggle{
  display:none; width:44px; height:44px; border:0; background:transparent;
  cursor:pointer; padding:0; position:relative; z-index:1200;
}
.nav-toggle span{
  position:absolute; left:9px; right:9px; height:1.5px; background:var(--ink);
  transition:transform .4s var(--ease), opacity .3s var(--ease), top .4s var(--ease);
}
.nav-toggle span:nth-child(1){ top:15px; }
.nav-toggle span:nth-child(2){ top:21px; }
.nav-toggle span:nth-child(3){ top:27px; }
body.menu-open .nav-toggle span:nth-child(1){ top:21px; transform:rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
body.menu-open .nav-toggle span:nth-child(3){ top:21px; transform:rotate(-45deg); }

/* ============================================================
   Mobile Drawer（共通）
   ============================================================ */
/* ============================================================
   Mobile Drawer（共通）
   ============================================================ */
.drawer-backdrop{
  position:fixed; inset:0; z-index:1100; background:rgba(46,43,38,.35);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
body.menu-open .drawer-backdrop{ opacity:1; visibility:visible; }

.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:1150;
  width:min(82vw,360px); background:var(--cream);
  transform:translateX(100%); transition:transform .5s var(--ease);
  padding:calc(var(--header-h-sm) + 24px) 32px 40px;
  display:flex; flex-direction:column; overflow-y:auto;
}
body.menu-open .drawer{ transform:translateX(0); }
.drawer__list{ list-style:none; margin:0; padding:0; }
.drawer__list li{ border-bottom:1px solid var(--line); }
.drawer__list a{
  display:block; padding:16px 4px; font-size:15px; font-weight:500; letter-spacing:.06em;
}
.drawer__list .num{ display:none; }
.drawer__cta{
  margin-top:28px; text-align:center; font-weight:700; color:var(--cream);
  background:var(--shop); padding:15px; border-radius:999px; letter-spacing:.08em;
}

/* ロゴ */
.drawer__logo{
  display:block; width:160px; height:auto; margin-bottom:28px;
}

/* TEL・営業情報 */
.drawer__info{
  margin:20px 0 0; padding:18px 0 0; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:8px;
}
.drawer__tel{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-serif); font-size:20px; font-weight:600;
  color:var(--ink); letter-spacing:.04em;
}
.drawer__tel svg{ flex-shrink:0; }
.drawer__hours{
  font-size:12px; color:var(--ink-soft); letter-spacing:.06em; line-height:1.9;
}

/* SNS */
.drawer__sns{
  display:flex; gap:12px; margin-top:20px; padding-top:18px;
  border-top:1px solid var(--line);
}
.drawer__sns__link{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:50%;
  border:1.5px solid var(--line);
  color:var(--ink-soft);
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.drawer__sns__link--ig:hover{ background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color:transparent; color:#fff; }
.drawer__sns__link--fb:hover{ background:#1877f2; border-color:transparent; color:#fff; }
.drawer__sns__link--line:hover{ background:#06c755; border-color:transparent; color:#fff; }

/* ============================================================
   Footer（共通・プレースホルダ。次工程で本実装）
   ============================================================ */
/* Footer */
.site-footer { background:var(--ink); color:rgba(244,238,223,.72); font-size:13px; }
.site-footer::before { content:''; display:block; height:3px; background:linear-gradient(90deg,var(--gold) 0%,var(--olive) 50%,transparent 100%); }
.footer-main { max-width:var(--maxw); margin:0 auto; padding:64px 40px 48px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:48px 40px; align-items:start; }
.footer-brand__copy { font-family:var(--font-serif); font-size:13px; line-height:2; color:rgba(244,238,223,.55); letter-spacing:.06em; margin:0 0 28px; }
.footer-brand__logo {
    width: clamp(160px, 20vw, 160px);
    height: auto;
    margin-bottom: 20px;
    filter: brightness(0) invert(1) opacity(.85);
}
.footer-sns { display:flex; gap:14px; align-items:center; }
.footer-sns__link { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; border:1.5px solid rgba(244,238,223,.22); color:rgba(244,238,223,.72); transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease); }
.footer-sns__link:hover { transform:translateY(-3px); border-color:transparent; }
.footer-sns__link--ig:hover { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color:#fff; }
.footer-sns__link--fb:hover { background:#1877f2; color:#fff; }
.footer-sns__link--line:hover { background:#06c755; color:#fff; }
.footer-info__head,.footer-nav__label { font-family:var(--font-serif); font-size:17px; font-weight:600; color:rgba(244,238,223,.9); letter-spacing:.14em; margin:0 0 20px; padding-bottom:14px; border-bottom:1px solid rgba(244,238,223,.12); }
.footer-info__table { width:100%; border-collapse:collapse; }
.footer-info__table tr+tr td { padding-top:9px; }
.footer-info__table td:first-child { font-size:11px; font-weight:700; color:rgba(244,238,223,.4); letter-spacing:.08em; white-space:nowrap; padding-right:14px; padding-top:10px; vertical-align:top; }
.footer-info__table td:last-child { font-size:13.5px; line-height:1.8; color:rgba(244,238,223,.75); }
.footer-info__closed { display:block; font-size:11.5px; color:rgba(244,238,223,.42); margin-top:2px; }
.footer-nav__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-nav__list li a { font-size:13px; color:rgba(244,238,223,.62); letter-spacing:.04em; display:inline-flex; align-items:center; gap:7px; transition:color .25s var(--ease),gap .25s var(--ease); }
.footer-nav__list li a::before { content:''; display:block; width:14px; height:1px; background:var(--gold); flex-shrink:0; transition:width .25s var(--ease); }
.footer-nav__list li a:hover { color:var(--gold); gap:10px; }
.footer-nav__list li a:hover::before { width:20px; }
.footer-bottom { border-top:1px solid rgba(244,238,223,.08); padding:20px 40px; max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer-bottom__copy { font-size:11px; color:rgba(244,238,223,.3); letter-spacing:.08em; margin:0; }
.footer-bottom__links { display:flex; gap:20px; list-style:none; margin:0; padding:0; }
.footer-bottom__links a { font-size:11px; color:rgba(244,238,223,.3); letter-spacing:.04em; transition:color .2s; }
.footer-bottom__links a:hover { color:rgba(244,238,223,.7); }

@media (max-width:1024px) {
  .footer-main { grid-template-columns:1fr 1fr; gap:40px 32px; }
  .footer-brand { grid-column:1/3; }
  .footer-bottom { padding:16px 24px; }
}
@media (max-width:640px) {
  .footer-main { grid-template-columns:1fr; padding:40px 20px 32px; }
  .footer-brand { grid-column:auto; }
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:10px; padding:16px 20px; }
}
/* ============================================================
   共通レスポンシブ / モーション設定
   ============================================================ */
@media (max-width:1024px){
  .nav__list, .nav__cta.is-pc{ display:none; }
  .nav-toggle{ display:block; }
  :root{ --header-h:64px; }
  .site-header{ top:12px; height:60px; width:min(var(--maxw), calc(100% - 24px)); border-radius:14px; }
  .header-inner{ padding:0 18px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}