@charset "utf-8";
/* ============================================================
   花秘書 スマートフォン ハンバーガーメニュー
   hanahisho_nav.html（デザイン案）より本番用に抽出

   デザイン案からの変更点
     ・確認用のダミー（.demoHeader / .demoBody / .demoLogo）を削除
     ・全体に効くリセット（* / html / body）を削除
       ※サイト全体のCSSを壊すため本番には持ち込まない
     ・案独自の開閉ボタン（.navBtn）は削除し、既存の .sp_menu を流用
     ・CSS変数を --sn- 接頭辞に変更（既存CSSとの衝突回避）
     ・スコープを #spNavDrawer 配下に限定
   ============================================================ */

:root{
  --sn-paper:    #ffffff;
  --sn-paper-2:  #f7f5ef;
  --sn-kin:      #91854a;
  --sn-kin-line: #cfc4a2;
  --sn-gin:      #7d858c;
  --sn-gin-line: #c2cad1;
  --sn-kin-bg:   #faf6ea;
  --sn-gin-bg:   #f4f6f7;
  --sn-ink:      #2d2d2d;
  --sn-ink-soft: #6b665c;
  --sn-beni:     #ff2456;
}

/* ---------- 既存ハンバーガー（.sp_menu）について ---------- */
/* アイコンの見た目には手を加えない方針。開いている間も三本線のまま。
   JS が付ける .snOpen は状態管理用で、装飾には使っていない。
   ✕に変えたくなった場合はここに指定を追加する。 */

/* ---------- 覆い ---------- */
#spNavVeil{
  position:fixed; inset:0; z-index:98;
  background:rgba(45,42,32,.42);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s;
}
#spNavVeil.snOpen{opacity:1; visibility:visible}

/* ---------- ドロワー ---------- */
#spNavDrawer{
  position:fixed; top:0; right:0; z-index:99;
  width:min(88vw,380px); height:100dvh;
  background:var(--sn-paper);
  box-shadow:-14px 0 40px rgba(45,42,32,.16);
  transform:translateX(100%);
  transition:transform .38s cubic-bezier(.22,.75,.28,1);
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  font-family:"Noto Sans JP",sans-serif;
  color:var(--sn-ink);
  text-align:left;
}
#spNavDrawer.snOpen{transform:translateX(0)}
#spNavDrawer *{box-sizing:border-box}

/* 画面幅が広いときは出さない（PCは既存メニューを使う） */
@media screen and (min-width:768px){
  #spNavDrawer,#spNavVeil{display:none}
}

#spNavDrawer .navHead{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px 14px;
}
#spNavDrawer .navHead p{
  margin:0; font-family:"Noto Serif JP",serif; font-weight:500;
  font-size:18px; letter-spacing:.22em; color:var(--sn-ink);
}
#spNavDrawer .navHead small{
  display:block; margin-top:4px;
  font-family:"Roboto Condensed",sans-serif; font-size:9px;
  letter-spacing:.28em; color:var(--sn-kin); text-transform:uppercase;
}
#spNavDrawer .navClose{
  -webkit-appearance:none; appearance:none;
  width:36px; height:36px; padding:0; background:none; border:0; cursor:pointer;
  position:relative;
}
#spNavDrawer .navClose::before,
#spNavDrawer .navClose::after{
  content:""; position:absolute; left:8px; top:17px;
  width:20px; height:1.5px; background:var(--sn-ink-soft);
}
#spNavDrawer .navClose::before{transform:rotate(45deg)}
#spNavDrawer .navClose::after{transform:rotate(-45deg)}
#spNavDrawer .navClose:focus-visible{outline:2px solid var(--sn-kin); outline-offset:2px}

/* ---------- 区画 ---------- */
#spNavDrawer .navSec{padding:22px 18px 20px; margin:0}
#spNavDrawer .navSec.kei{background:var(--sn-kin-bg)}
#spNavDrawer .navSec.chou{background:var(--sn-gin-bg)}
#spNavDrawer .navSec .navLabel{margin:0 0 12px}
#spNavDrawer .navSec .fudaGrid{margin:0}
#spNavDrawer .navSec .fudaMore{width:100%; margin:10px 0 0}
#spNavDrawer .navSec .kindGrid,
#spNavDrawer .navSec .guideList{margin:0}

/* ---------- 見出し ---------- */
#spNavDrawer .navLabel{
  display:flex; align-items:baseline; gap:10px;
  margin:26px 18px 12px;
}
#spNavDrawer .navLabel b{
  font-family:"Noto Serif JP",serif; font-weight:500;
  font-size:15px; letter-spacing:.16em; color:var(--sn-ink);
}
#spNavDrawer .navLabel i{
  font-style:normal;
  font-family:"Roboto Condensed",sans-serif; font-size:9px;
  letter-spacing:.24em; color:var(--sn-kin);
}
#spNavDrawer .navLabel::after{content:""; flex:1 1 auto; height:1px; background:var(--sn-kin-line)}
#spNavDrawer .navLabel.gin::after{background:var(--sn-gin-line)}
#spNavDrawer .navSec.kei .navLabel b{color:var(--sn-kin)}
#spNavDrawer .navSec.chou .navLabel b{color:var(--sn-gin)}
#spNavDrawer .navLabel.gin i{color:var(--sn-gin)}

/* ---------- 畳める見出し（弔事） ---------- */
#spNavDrawer button.navFold{
  -webkit-appearance:none; appearance:none;
  width:100%; margin:0 0 12px; padding:0;
  background:none; border:0; cursor:pointer;
  font-family:inherit; text-align:left;
}
#spNavDrawer button.navFold .mk{
  order:2;
  flex:none; width:11px; height:11px; margin-left:2px;
  border-right:1.4px solid var(--sn-gin); border-bottom:1.4px solid var(--sn-gin);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .28s ease;
}
#spNavDrawer button.navFold[aria-expanded="true"] .mk{
  transform:rotate(-135deg) translate(-2px,-2px);
}
#spNavDrawer button.navFold:focus-visible{outline:2px solid var(--sn-gin); outline-offset:3px}
#spNavDrawer .navFoldBody[hidden]{display:none}

/* ---------- 用途のふだ ---------- */
#spNavDrawer .fudaGrid{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  margin:0 18px; padding:0; list-style:none;
  background:var(--sn-kin-line);
  border:1px solid var(--sn-kin-line);
}
#spNavDrawer .fudaGrid.gin{background:var(--sn-gin-line); border-color:var(--sn-gin-line)}
#spNavDrawer .fudaGrid li{margin:0; padding:0; background:none; border:0}
#spNavDrawer .fudaGrid li::before{content:none}
#spNavDrawer .fudaGrid a{
  display:block; padding:13px 14px;
  background:#fff;
  font-size:14.5px; font-weight:400; letter-spacing:.06em;
  color:var(--sn-ink); text-decoration:none;
  transition:background .18s, color .18s;
}
#spNavDrawer .fudaGrid a:hover,
#spNavDrawer .fudaGrid a:focus-visible{background:var(--sn-kin-bg); outline:none}
#spNavDrawer .fudaGrid.gin a:hover,
#spNavDrawer .fudaGrid.gin a:focus-visible{background:var(--sn-gin-bg)}
#spNavDrawer .fudaGrid a:focus-visible{outline:2px solid var(--sn-kin); outline-offset:-2px}
#spNavDrawer .fudaGrid.gin a:focus-visible{outline-color:var(--sn-gin)}
#spNavDrawer .fudaGrid a small{
  display:block; margin-top:3px;
  font-size:10px; font-weight:400;
  letter-spacing:.22em; color:var(--sn-kin);
}

/* もっと見る */
#spNavDrawer .fudaMore{
  display:block; width:calc(100% - 36px); margin:10px 18px 0;
  padding:9px;
  border:1px solid var(--sn-kin-line); color:var(--sn-kin); background:#fff;
  font-family:inherit; font-size:11px; letter-spacing:.16em; cursor:pointer;
}
#spNavDrawer .fudaMore:hover{background:var(--sn-kin-bg)}
#spNavDrawer .fudaMore.gin{border-color:var(--sn-gin-line); color:#5f676e}
#spNavDrawer .fudaMore.gin:hover{background:var(--sn-gin-bg)}
#spNavDrawer .fudaMore:focus-visible{outline:2px solid var(--sn-kin); outline-offset:2px}
#spNavDrawer .fudaHide{display:none}
#spNavDrawer .fudaGrid.open .fudaHide{display:block}

/* ---------- 花の種類 ---------- */
#spNavDrawer .kindGrid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:0 18px; margin:0 18px; padding:0; list-style:none;
}
#spNavDrawer .kindGrid li{border-bottom:1px solid #ebe6d9; margin:0; padding:0; background:none}
#spNavDrawer .kindGrid li::before{content:none}
#spNavDrawer .kindGrid a{
  display:block; padding:12px 2px; text-decoration:none;
  color:var(--sn-ink); font-size:13.5px; letter-spacing:.06em;
}
#spNavDrawer .kindGrid a:hover,
#spNavDrawer .kindGrid a:focus-visible{color:var(--sn-kin); outline:none}

/* ---------- ご利用案内 ---------- */
#spNavDrawer .guideList{margin:0 18px; padding:0; list-style:none}
#spNavDrawer .guideList li{border-bottom:1px solid #ebe6d9; margin:0; padding:0; background:none}
#spNavDrawer .guideList li::before{content:none}
#spNavDrawer .guideList a{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 2px; text-decoration:none;
  color:var(--sn-ink-soft); font-size:13px; letter-spacing:.04em;
}
#spNavDrawer .guideList a::after{content:"\203A"; color:var(--sn-kin); font-size:16px}
#spNavDrawer .guideList a:hover,
#spNavDrawer .guideList a:focus-visible{color:var(--sn-ink); outline:none}

/* ---------- 上部のアカウント行 ---------- */
#spNavDrawer .navAcctTop{
  margin:6px 18px 22px; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:1px; background:var(--sn-kin-line);
  border:1px solid var(--sn-kin-line);
}
#spNavDrawer .navAcctTop li{margin:0; padding:0; background:none; border:0}
#spNavDrawer .navAcctTop li::before{content:none}
#spNavDrawer .navAcctTop a{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:12px 2px 10px; text-align:center; text-decoration:none;
  background:#fff; color:var(--sn-ink); font-size:10.5px; letter-spacing:0;
}
#spNavDrawer .navAcctTop a svg{
  width:24px; height:24px; flex:none;
  fill:none;
  stroke:var(--sn-kin); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}
#spNavDrawer .navAcctTop a:hover,
#spNavDrawer .navAcctTop a:focus-visible{background:var(--sn-kin-bg); color:var(--sn-kin); outline:none}

/* ---------- 下部の行動 ---------- */
#spNavDrawer .navFoot{margin:0; padding:22px 18px 28px; background:#fff}
#spNavDrawer .navCart{
  display:block; padding:14px; text-align:center; text-decoration:none;
  background:var(--sn-beni); color:#fff; font-size:14px; font-weight:500; letter-spacing:.12em;
}
#spNavDrawer .navCart:hover{background:#e01c49}
#spNavDrawer .navSub{
  display:flex; justify-content:center; gap:0;
  margin:14px 0 0; padding:0; list-style:none;
}
#spNavDrawer .navSub li{margin:0; padding:0 14px; background:none; border:0}
#spNavDrawer .navSub li::before{content:none}
#spNavDrawer .navSub li + li{border-left:1px solid var(--sn-kin-line)}
#spNavDrawer .navSub a{
  text-decoration:none; color:var(--sn-ink-soft);
  font-size:12px; letter-spacing:.06em;
}
#spNavDrawer .navSub a:hover,
#spNavDrawer .navSub a:focus-visible{color:var(--sn-kin); outline:none}

#spNavDrawer .navTel{
  margin:24px 0 0; padding:0;
  text-align:center;
}
#spNavDrawer .navTel b{
  display:block; font-weight:400;
  font-size:11.5px; letter-spacing:.14em; color:var(--sn-ink-soft);
}
#spNavDrawer .navTel a{
  display:inline-flex; align-items:center; gap:8px;
  margin:8px 0 0; text-decoration:none; color:var(--sn-ink);
  font-size:25px; font-weight:500; letter-spacing:.02em;
  font-feature-settings:"palt" 0;
}
#spNavDrawer .navTel a svg{width:16px; height:25px; flex:none;
  fill:none; stroke:var(--sn-kin); stroke-width:1.3;
  stroke-linecap:round; stroke-linejoin:round}
#spNavDrawer .navTel small{
  display:block; margin:6px 0 0;
  font-size:11px; letter-spacing:.08em; color:var(--sn-ink-soft);
}

@media (prefers-reduced-motion:reduce){
  #spNavDrawer,#spNavVeil{transition:none}
}