/* header-ios.css — グローバルヘッダー/メニュー DSスキン Phase1
   スコープ: body.ios-header-new（?design=ios ゲート → 確認後常時適用）
   方針: Flatsomeヘッダービルダー構造は不変・CSSのみ。ロゴは筆ロゴ画像キープ（ユーザー決定 2026-08-02）。
   フォントは全ページ適用のためWebフォント追加なし（システムゴシック。self-host後にZen Kaku検討）。 */

body.ios-header-new{
  --hd-cream:#f7f3ea; --hd-ink:#1a1714; --hd-ink-on-yellow:#38322a;
  --hd-yellow:#ffd400; --hd-rule:#e2dac9; --hd-accent:#7C3946;
  --hd-muted:#6e6353; --hd-card:#ffffff;
  --hd-ff:"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
}

/* ===== お知らせバー: 旧nav-dark → 黄帯＋温チャコール ===== */
.ios-header-new #top-bar{
  background:var(--hd-yellow) !important;
  min-height:0 !important;
}
.ios-header-new #top-bar .html_topbar_right div{ text-align:center; }
.ios-header-new #top-bar .html_topbar_right p{
  display:inline; margin:0 .25em;
  color:var(--hd-ink-on-yellow);
  font-family:var(--hd-ff); font-size:12px; font-weight:600; line-height:1.6;
}
@media (max-width:549px){
  .ios-header-new #top-bar .html_topbar_right p{ font-size:11px; }
}

/* ===== ヘッダー本体: 生成り地＋極細下罫 ===== */
.ios-header-new .header-bg-color{ background-color:var(--hd-cream) !important; }
.ios-header-new .header-main{ box-shadow:none; }
.ios-header-new .header-wrapper{ box-shadow:none; border-bottom:1px solid var(--hd-rule); }
.ios-header-new .header-bottom{ background-color:var(--hd-cream) !important; min-height:0; }
.ios-header-new.transparent .header-wrapper{ border-bottom-color:transparent; }
/* sticky時も生成り */
.ios-header-new .stuck .header-main,
.ios-header-new .header.show-on-scroll{ background-color:var(--hd-cream); }

/* ===== グロナビ: uppercase/縦罫を廃し 墨ゴシック700 / hover=ワイン下線 ===== */
.ios-header-new .header-nav > li > a,
.ios-header-new .header-main .mobile-nav > li > a{
  font-family:var(--hd-ff); font-weight:700; font-size:14px;
  letter-spacing:.02em; text-transform:none !important;
  color:var(--hd-ink) !important;
}
.ios-header-new .nav-divided > li + li > a::before,
.ios-header-new .nav-divided > li + li{ border-left:none !important; border-color:transparent !important; }
.ios-header-new .header-nav > li > a:hover,
.ios-header-new .header-main .mobile-nav > li > a:hover{
  color:var(--hd-accent) !important;
  text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px;
}
/* 現在地 = 黄アンダーライン（マーカー語彙） */
.ios-header-new .header-nav > li.current-menu-item > a,
.ios-header-new .header-nav > li.current-menu-ancestor > a{
  box-shadow:inset 0 -3px 0 var(--hd-yellow);
}

/* ===== 右側アクション（検索/カート）: 墨・タップ44px ===== */
.ios-header-new .header-main .nav-top-link,
.ios-header-new .header-main .header-cart-link,
.ios-header-new .header-main .icon-search,
.ios-header-new .header-main .icon-shopping-basket,
.ios-header-new .header-main .icon-menu{
  color:var(--hd-ink) !important;
}
.ios-header-new .header-main .header-cart-link .cart-price{ color:var(--hd-muted); font-family:var(--hd-ff); }
.ios-header-new .header-main .cart-icon strong{
  border-color:var(--hd-ink); color:var(--hd-ink);
}
.ios-header-new .header-main .cart-icon strong::after{ border-color:var(--hd-ink); }

/* ===== ドロワー（#main-menu）= 雑誌の「目次」 ===== */
.ios-header-new .mobile-sidebar{
  background:var(--hd-cream);
  color:var(--hd-ink);
}
.ios-header-new .mobile-sidebar .nav-sidebar.nav-vertical > li{
  border-bottom:1px solid var(--hd-rule);
}
.ios-header-new .mobile-sidebar .nav-sidebar.nav-vertical > li > a{
  font-family:var(--hd-ff); font-weight:700; font-size:16px;
  text-transform:none !important; letter-spacing:.02em;
  color:var(--hd-ink) !important;
  padding:14px 20px; min-height:44px; display:flex; align-items:center;
}
.ios-header-new .mobile-sidebar .nav-sidebar.nav-vertical > li > a:hover{ color:var(--hd-accent) !important; }

/* 主動線3項目に白抜き番号（href属性で対象を特定 = メニュー並び替えに依存しない） */
.ios-header-new .mobile-sidebar .nav-sidebar a[href$="/shop/"]::before{ content:"01"; }
.ios-header-new .mobile-sidebar .nav-sidebar a[href$="/recipe/"]::before{ content:"02"; }
.ios-header-new .mobile-sidebar .nav-sidebar a[href$="/guide/"]::before{ content:"03"; }
.ios-header-new .mobile-sidebar .nav-sidebar a[href$="/shop/"]::before,
.ios-header-new .mobile-sidebar .nav-sidebar a[href$="/recipe/"]::before,
.ios-header-new .mobile-sidebar .nav-sidebar a[href$="/guide/"]::before{
  font-weight:900; font-size:22px; line-height:1;
  color:transparent; -webkit-text-stroke:1.3px var(--hd-ink);
  font-feature-settings:"tnum";
  margin-right:12px; flex:none;
}
@supports not (-webkit-text-stroke:1px #000){
  .ios-header-new .mobile-sidebar .nav-sidebar a[href$="/shop/"]::before,
  .ios-header-new .mobile-sidebar .nav-sidebar a[href$="/recipe/"]::before,
  .ios-header-new .mobile-sidebar .nav-sidebar a[href$="/guide/"]::before{
    color:var(--hd-ink); opacity:.2;
  }
}

/* 連載（急行）・物語（about）= ワインの小キッカー付き */
.ios-header-new .mobile-sidebar .nav-sidebar a[href$="/masala-express/"]::before{ content:"連載"; }
.ios-header-new .mobile-sidebar .nav-sidebar a[href$="/about/"]::before{ content:"物語"; }
.ios-header-new .mobile-sidebar .nav-sidebar a[href$="/masala-express/"]::before,
.ios-header-new .mobile-sidebar .nav-sidebar a[href$="/about/"]::before{
  font-size:10px; font-weight:700; letter-spacing:.2em;
  color:var(--hd-accent); margin-right:10px; flex:none;
}

/* サポート系（配送と決済 / お問い合わせ）= muted小組みへ降格 */
.ios-header-new .mobile-sidebar .nav-sidebar a[href$="#footer"],
.ios-header-new .mobile-sidebar .nav-sidebar a[href$="/contact/"]{
  font-size:13px !important; font-weight:500 !important;
  color:var(--hd-muted) !important; padding:10px 20px;
}

/* ドロワー内検索: 白面＋黄サブミット */
.ios-header-new .mobile-sidebar .search-field{
  background:var(--hd-card); border:1px solid var(--hd-rule); color:var(--hd-ink);
}
.ios-header-new .mobile-sidebar .ux-search-submit{
  background:var(--hd-yellow) !important; color:var(--hd-ink-on-yellow) !important; border:none;
}
.ios-header-new .mobile-sidebar .header-search-form{ padding:14px 20px; border-bottom:1px solid var(--hd-rule); }

/* 奥付（コロフォン） */
.ios-header-new .mobile-sidebar .sidebar-menu::after{
  content:"アナン株式会社 — 1954年 鎌倉創業";
  display:block; padding:18px 20px 24px;
  font-family:var(--hd-ff); font-size:11px; letter-spacing:.08em;
  color:var(--hd-muted);
}

/* ===== a11y: フォーカスリング ===== */
.ios-header-new .header a:focus-visible,
.ios-header-new .mobile-sidebar a:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(124,57,70,.8);
}