/*
Theme Name: ひんだれたキッチンカー (Custom)
Description: スマホアプリとして操作できるハンドメイドマルシェ用テーマ
Version: 1.4.1
Author: Your Name
*/

:root{
  --bg:        #FFF8E6; /* ほんのりクリーム（紙皿の色） */
  --surface:   #FFFFFF; /* カード/ボタン面 */
  --text:      #2F2F2F; /* 本文（可読性重視の濃いグレー） */
  --muted:     #6E6E6E; /* 補足テキスト */

  --accent:    #E54B4B; /* トマトレッド（食欲をそそる） */
  --accent-2:  #5BA25D; /* リーフグリーン（ピクニック） */
  --accent-3:  #7EC8E3; /* スカイブルー（爽やか） */
  --warn:      #D97800; /* 焼き色オレンジ（注意/強調） */
  --ok:        #3A8D4B; /* 合格/完了の緑 */

  --ring:      #2A73FF; /* フォーカスリング（WCAG意識） */
  --border:    #E7E2D9; /* うっすら枠線 */
  --card-shadow: 0 2px 10px rgba(0,0,0,.06);
  --font-scale: 1.2;
  --footer-nav-space: calc(104px + env(safe-area-inset-bottom, 0px));
}

:focus-visible{
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}


/* =■========================
   1. Reset & Base
   =■======================== */
*,
*::before,
*::after { margin:0; padding:0; box-sizing:border-box; }

html {
  /* 既定14pxの1.3倍 = 約18.2px */
  font-size: calc(14px * var(--font-scale));
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "メイリオ", sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
  padding-bottom: var(--footer-nav-space);
}

a { text-decoration:none; color: var(--accent); transition: opacity .2s; }
a:hover { opacity:.8; color: var(--accent-2); }

h1, h2, h3, h4, h5, h6 { font-weight:600; margin-bottom:.5em; color:#333; }
p { margin-bottom:1em; }
ul, ol { list-style:none; margin-bottom:1em; }

/* wrap */
#wrap{
  min-height:100vh;
  display:flex; flex-direction:column;
  font-size: calc(14px + 0.5vw);
  font-size: calc((14px + 0.5vw) * var(--font-scale)); 
  margin: 0 auto;
  padding-bottom: 1rem;
}

/* iOSの入力時ズーム防止＆可読性のため、スマホでも最低16pxは確保 */
@media (max-width:480px){ #wrap{ font-size:16px; } }
@media (min-width:481px){ #wrap{ font-size:16px; } }


/* =■========================
   2. ヘッダー＆フッター
   =■======================== */
#site-header{
  background-color: var(--surface);
  border-bottom: 2px solid var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,.055);
  padding:.5em 0; min-height:56px;
}
#site-header .header{
  position:relative; display:flex; align-items:center; justify-content:space-between; padding:0 1em;
}

.header-menu{ margin-right:.5em; }

/* ---- Header base ---- */
#site-header{
  position: sticky; top: 0; z-index: 1002; /* メニュー上に固定 */
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,.055);
}

/* ヘッダー左上のホームカード */
.app-home{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:8px 10px;
  border-radius:10px; text-decoration:none; color:inherit;
  -webkit-tap-highlight-color: transparent;
}
.app-home img{
  width:28px; height:28px; border-radius:6px; display:block;
}
.app-home__label{
  font-size:15px; font-weight:700; line-height:1;
}

/* タップ時の軽い押し下げ表現（任意） */
.app-home:active{ transform: translateY(1px); }

/* 画面が極小のときはラベル省略（任意） */
@media (max-width:360px){
  .app-home__label{ display:none; }
}


.header-menu{ margin-right:.5em; }

/* ハンバーガーボタン */
#hamburger-menu{
  -webkit-appearance:none; border:none; background:none; cursor:pointer; color:#666;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
}
#hamburger-menu:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

/* ---- Dropdown panel（重なり防止の要）---- */
:root { --header-h: 56px; }
@media (min-width:481px){ 
:root { --header-h: 64px; } 
}

/* メニュー本体は “固定配置＋不透明背景” に */
#nav-menu{
  display:none;
  position: fixed; inset: calc(var(--header-h)) 0 auto 0; /* ヘッダー直下に全幅で展開 */
  z-index: 1001;
  width: 100%;
  background: rgba(255,255,255, .98); /* 下の文字が透けない */
  backdrop-filter: saturate(1.1) blur(4px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0,0,0,.16);
  border-radius: 0;
}
#nav-menu.open{ display:block; }

#nav-menu ul{ list-style:none; margin:0; padding:8px; }
#nav-menu li{ margin:6px 8px; }
#nav-menu li a{
  display:flex; align-items:center; gap:10px;
  min-height:44px; padding:10px 12px;
  background:#fff;                     /* 各項目にも背景を付けて透け防止 */
  color:#333; text-decoration:none; border-radius:10px;
  border:1px solid var(--border);
  transition: background .15s, transform .05s;
}
#nav-menu li a:hover{ background: color-mix(in srgb, var(--accent-3) 12%, var(--surface)); }
#nav-menu li a:active{ transform: translateY(1px); }
#nav-menu li a:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }


/* ---- Dim 背景（クリックガード & 視認性UP）---- */
/* :has() が使える環境では、メニュー開時に全画面の薄暗い覆いを出す */
.header-menu{ position: relative; }
.header-menu:has(#nav-menu.open)::before{
  content:""; position: fixed; inset:0; z-index: 1000;
  background: rgba(0,0,0,.25);
}

/* 画面がとても狭い時にメニューが長くなってもスクロール可 */
#nav-menu{ max-height: calc(100svh - var(--header-h)); overflow:auto; }

/* 既存の丸メニュー（小さなポップアップ）として使いたい場合は以下を上書き
   #nav-menu{ position:absolute; inset:auto 1em auto auto; width:240px; }
*/




/* ---- フッター ---- */
#site-footer{
  margin-top:auto;
  background: var(--surface);
  border-top: 2px solid var(--border);
  /* 下部固定ナビ分の余白を本文側に確保 */
  padding-bottom: var(--footer-nav-space);
}

/* 固定フッターナビ（全幅固定） */
#fixed-footer-menu{
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 1002;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 20px rgba(0,0,0,.08);
  padding: 4px 8px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
}

/* 4等分グリッド（出店／作家／作品／イベント） */
#fixed-footer-menu ul{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#fixed-footer-menu li{ min-height:52px; }

/* ボタン（アイコン縦積み） */
#fixed-footer-menu a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:52px; padding:6px 0;
  border-radius:14px;
  -webkit-tap-highlight-color:transparent;
  text-decoration:none;
  color: var(--text);
  transition: background .15s, transform .05s;
}
#fixed-footer-menu a:hover{ background: color-mix(in srgb, var(--accent-3) 12%, var(--surface)); }
#fixed-footer-menu a:active{ transform: translateY(1px); }
#fixed-footer-menu a:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

#fixed-footer-menu a img, #fixed-footer-menu a svg{ width:25px; height:25px; display:block; }
#fixed-footer-menu a .label{ font-size:.86rem; line-height:1; opacity:.95; font-weight:700; }
#fixed-footer-menu a.is-current{
  color:#d95367;
  background:#fff2f4;
  box-shadow: inset 0 3px 0 #d95367;
  font-weight:900;
}
#fixed-footer-menu a.is-current .label{ opacity:1; font-weight:900; }
#fixed-footer-menu a.is-current svg{ stroke:currentColor; }
#fixed-footer-menu a.is-current img{ filter:saturate(1.1); }
@media (max-width:340px){ #fixed-footer-menu a .label{ display:block; font-size:.82rem; } }

/* © 表示（メニュー外） */
#site-footer .footer-copy{
  text-align:center; font-size:.9rem; color:var(--muted);
  padding: 8px 0 4px;
}





/* =■========================
   3. コンテンツセクション
   =■======================== */
#content{
  width:100%; max-width:1200px; margin:0 auto;
  padding:1em;
  padding-bottom:calc(2.25em + var(--footer-nav-space));
}

.page-title{
  background:transparent; box-shadow:none; border-radius:0; padding:0; margin:8px 0 4px;
}

.page-title h1{
  display:inline-block; position:relative; margin:0; padding:2px 0 2px 10px;
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.35rem);
  font-weight:700; color:var(--text); line-height:1.2;
}

.page-title h1::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:2px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
}

.page-title + .sales-sort,
.page-title + *{ border-top:1px solid var(--border); padding-top:8px; margin-top:8px; }

/* 共通見出し（中央寄せ） */
#content h2, #content h3, #content h4, #content h5, #content h6{
  text-align:center; margin:.5em 0; line-height:1.2;
}

/* テキスト/画像 */
#content p{ margin-bottom:1em; line-height:1.6; font-size:1rem; }
#content img{ max-width:100%; height:auto; display:block; margin:0 auto; }

@media (max-width:480px){
  #content{ padding:.5em; padding-bottom:calc(2.25em + var(--footer-nav-space)); }
  #content h1{ font-size:1.8rem; }
  #content p{ font-size:1rem; }
}

/* ========= フォーム共通(統一) ========= */
#content form{ max-width:800px; margin:0 auto; text-align:left; }
#content form p{ margin:10px 0 14px; }
#content form label{ display:block; margin-bottom:6px; font-weight:700; color:var(--text); }

#content input[type="text"],
#content input[type="email"],
#content input[type="password"],
#content input[type="url"],
#content input[type="time"],
#content input[type="date"],
#content select,
#content textarea{
  width:100%; padding:10px 12px; min-height:44px;
  font-size:1rem; line-height:1.4; box-sizing:border-box;
  border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--text);
}
#content textarea{ min-height:120px; resize:vertical; }

#content input[type="submit"],
#content button,
#content button[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:10px 16px; margin:1em auto 0;
  border-radius:10px; cursor:pointer; border:1px solid var(--border);
  background: var(--accent); color:#fff; font-weight:800;
  transition: background .15s, transform .05s;
}
#content input[type="submit"]:hover,
#content button:hover{ background: var(--accent-2); }
#content input[type="submit"]:active,
#content button:active{ transform: translateY(1px); }

/* メッセージ/区切りの統一 */
#content .error,
#content .success{
  margin:8px auto 12px; padding:10px 12px; border-radius:10px;
  max-width:760px; border:1px solid var(--border); background:var(--surface);
}
#content .error{ border-color:#e2a6a6; background:#fff1f1; color:#8b1f1f; line-height:1.6; }
#content .success{ border-color:#8fd38f; background:#ecf9ec; color:#165c16; text-align:center; }

#content .updated{
  max-width:860px; margin:10px auto; padding:10px 12px;
  background: color-mix(in srgb, var(--accent-3) 20%, var(--surface));
  border:1px solid var(--border); border-radius:10px;
}
#content .updated a{ color:var(--accent); text-decoration:underline; }

#content hr{ border:0; border-top:1px solid var(--border); margin:16px auto; max-width:760px; }
#content small{ display:block; margin-top:.3em; font-size:.95rem; color:var(--muted); }
#content :focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }




/* ===== Single Menu：メイン画像下サムネイル（スマホ3枚固定） ===== */
.menu-product{
  max-width: 900px;
  margin: 0 auto 16px;
}

/* メイン画像（体裁） */
.menu-product .menu-photo{
  text-align: center;
}
.menu-product #mainMenuPhoto,
.menu-product .menu-photo .menu-thumb{
  display: block;
  width: min(90%, 720px);
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  background: #fff;
}

/* サムネイル：スマホは3列固定、タップしやすい大きさ */
.menu-product .menu-thumbnails{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ← 常に3枚並び（スマホ） */
  gap: 10px;
  justify-items: center;
  align-items: center;
  margin-top: 10px;
  padding: 6px 4px;
}

/* 端末が広くなったら段数を増やす（任意） */
@media (min-width: 560px){
  .menu-product .menu-thumbnails{ grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 900px){
  .menu-product .menu-thumbnails{ grid-template-columns: repeat(6, 1fr); }
}

/* 個々のサムネイル（正方形・44px以上を確保） */
.menu-product .menu-thumb-thumbnail{
  width: 100%;
  max-width: 120px;           /* 大きくなりすぎ防止 */
  aspect-ratio: 1 / 1;        /* 常に正方形 */
  object-fit: cover;
  border-radius: 12px;
  background: #fff;
  /* PHPで inline border が付与されていてもOK、統一したい場合は↓ */
  /* border: 1px solid var(--border) !important; */
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  padding: 4px;               /* 白縁で視認性UP */
  min-width: 44px;            /* タップ面積の下限 */
  min-height: 44px;           /* タップ面積の下限 */
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease-out, box-shadow .12s ease, outline-color .12s ease;
  cursor: pointer;
}

/* ホバー/フォーカス/アクティブ */
.menu-product .menu-thumb-thumbnail:hover{
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,.10);
}
.menu-product .menu-thumb-thumbnail:active{
  transform: translateY(0);
}
/* 選択中のサムネ（少し暗く＋内側影→凹み感） */
.menu-thumb-thumbnail.is-active,
.menu-thumb-thumbnail[aria-current="true"]{
  filter: brightness(0.9) saturate(0.95);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.18),
    0 0 0 2px var(--accent),
    0 3px 10px rgba(0,0,0,.10);
  transform: translateY(0); /* 押し込みでフラットに */
}

/* 選択中はホバーで浮かせない（状態がぶれないように） */
.menu-thumb-thumbnail.is-active:hover,
.menu-thumb-thumbnail[aria-current="true"]:hover{
  transform: none;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.18),
    0 0 0 2px var(--accent),
    0 3px 10px rgba(0,0,0,.10);
}



/* =========================
   トップページ
   ========================= */
.sales-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; padding:12px;
}
@media (min-width:600px){ .sales-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:900px){ .sales-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

.sales-item-link{
  display:block; text-decoration:none; background:var(--surface);
  border:1px solid var(--border); border-radius:16px; padding:12px; box-shadow:var(--card-shadow);
  min-height:120px;
}
.sales-item-link:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }

.sales-card{ display:grid; grid-template-rows:auto auto; justify-items:center; align-items:center; row-gap:8px; }
.sales-logo{ width:88px; height:88px; border-radius:50%; object-fit:cover; display:block; }
.sales-logo.fallback{
  background:var(--accent-3); color:#000; font-weight:700; font-size:1.1rem; line-height:88px; text-align:center;
}
.sales-name{
  color:var(--text); text-align:center; font-size:1rem; max-width:90%;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* アクション付きタイトル */
.page-title.with-actions{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; margin:8px 0 4px;
}
.page-title.with-actions .page-actions{ display:inline-flex; gap:6px; }
.page-title.with-actions .page-actions button{
  padding:6px 10px; font-size:.9rem; border:1px solid var(--border);
  border-radius:10px; background:var(--surface); color:var(--text);
}
.page-title.with-actions .page-actions button[aria-pressed="true"]{
  border-color:var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

/* =========================
   Event Single（本文系）
   ========================= */
.article .page-title h1,
.page-title h1.event-title{ /* 既存テンプレ互換のため残置（実体は共通スタイル） */ }

.menu-post-date{
  display:flex; justify-content:flex-end; gap:.75em;
  font-size:.9rem; line-height:1.4; color:var(--muted);
  margin:4px 0 10px; border-bottom:1px solid var(--border); padding-bottom:8px;
}
.menu-post-date a{ color:var(--accent); }

.event-memo{
  font-size: clamp(1rem, .95rem + .4vw, 1.05rem);
  line-height:1.8; word-break:break-word; margin:12px 0 16px;
}

.event-details{
  display:grid; grid-template-columns:max-content 1fr; gap:10px 12px; align-items:start;
  margin:6px 0 18px; font-size:1rem; line-height:1.7;
}
.event-details p{ margin:0; display:contents; }
.event-details p strong{ grid-column:1; min-width:72px; color:var(--muted); font-weight:700; }
.event-details p strong + *{ grid-column:2; }

article h2{
  margin:14px 0 8px; padding-bottom:6px; font-size:clamp(1.05rem, 1rem + .5vw, 1.25rem);
  font-weight:700; color:var(--text); text-align:left; border-bottom:1px solid var(--border);
}

.other-events{ margin-top:18px; }
.other-events h2{ text-align:left; }
.other-event-list{
  list-style:none; margin:8px 0 0; padding:0; display:grid; gap:8px;
}
.other-event-list li a{ color:var(--accent); text-decoration:none; }
.other-event-list li a:hover{ text-decoration:underline; }

/* シェア */
.share-section{ margin:18px 0 8px; padding-top:10px; border-top:1px solid var(--border); }
.share-label{ display:block; font-size:.95rem; color:var(--muted); margin-bottom:8px; }
.share-buttons{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0; }
.share-button{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:6px 10px;
  border:1px solid var(--border); border-radius:999px; background:var(--surface);
  transition: background .15s, transform .05s;
}
.share-button:hover{ background: color-mix(in srgb, var(--accent-3) 12%, var(--surface)); }
.share-button:active{ transform: scale(.98); }
.share-button img{ width:20px; height:20px; display:block; }

/* =========================
   Single Kitchen Car
   ========================= */
.store-header{ text-align:center; margin-bottom:1em; }
.store-header .store-title{ font-size:2rem; margin:.5em 0; }
.store-header h2{ text-align:center; font-size:1.5rem; margin:.5em 0; }
.sales-active-area{ text-align:left; margin-top:1em; font-size:.9rem; color:#555; }
.sales-active-area p{ margin:.3em 0; }
.store-main{ display:flex; flex-direction:column; gap:1.5em; }
.store-thumbnail{ text-align:center; }
.store-thumbnail img{ max-width:100%; height:auto; display:inline-block; }
.store-details{ text-align:left; }
.store-details h2{ text-align:center; font-size:1.5rem; margin:1em 0; }
.store-details p{ margin:.5em 0; font-size:1rem; }

/* =========================
   Sales Start Page
   ========================= */
.sales-end-setting h3,
.sales-location-section h3{
  text-align:left; margin:10px 0 6px; padding-bottom:6px; font-weight:700;
  font-size:clamp(1.0rem, .95rem + .4vw, 1.1rem); color:var(--text); border-bottom:1px solid var(--border);
}
p.sales-date{ text-align:right; font-size:.95rem; color:var(--muted); margin:4px 0 8px; }

.sales-control{
  position:sticky; bottom:12px; z-index:20;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px;
  margin:8px 0 12px; padding:10px 12px;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: saturate(1.1) blur(4px);
  border:1px solid var(--border); border-radius:14px; box-shadow:var(--card-shadow);
}
#sales-state{ font-weight:800; color:var(--text); font-size:1.05rem; }
#sales-state::before{
  content:""; display:inline-block; width:10px; height:10px; border-radius:50%;
  margin-right:8px; translate:0 1px; background: color-mix(in srgb, var(--muted) 60%, transparent);
}
body:has(#sales-button.active) #sales-state::before{ background:var(--ok); }

#sales-button{
  min-width:56vw; min-height:56px; padding:10px 16px; border:none; border-radius:999px;
  font-size:clamp(1.05rem, 1rem + .6vw, 1.25rem); font-weight:900; letter-spacing:.02em;
  color:#fff; cursor:pointer; background:var(--accent);
  box-shadow:0 6px 16px rgba(0,0,0,.16);
  transition: background .15s, transform .05s, opacity .15s;
}
#sales-button:hover{ transform: translateY(.5px); }
#sales-button:active{ transform: translateY(1px); }
#sales-button[disabled], #sales-button.is-disabled{ opacity:.5; cursor:not-allowed; }
#sales-button.active{ background:#d84a4a; }
#sales-button.active:hover{ background:#bf3f3f; }
#sales-button-hint{ grid-column:1/-1; color:var(--muted)!important; font-size:.9rem!important; margin:4px 0 0!important; }

.sales-end-setting,
.sales-location-section{
  margin:8px 0 14px; padding:12px; background:var(--surface);
  border:1px solid var(--border); border-radius:12px; box-shadow:var(--card-shadow);
}
.sales-end-setting input[type="time"],
.sales-location-section input[type="text"],
.sales-location-section input[type="url"],
.sales-location-section textarea{
  width:100%; padding:10px 12px; min-height:44px; font-size:1rem; line-height:1.4;
  border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--text);
}
.sales-location-section textarea{ min-height:120px; resize:vertical; }

.sales-end-setting button,
.sales-location-section button,
.sales-location-section a#get-current-location{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:8px 14px; margin:6px 6px 0 0;
  border-radius:999px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-weight:800; text-decoration:none;
  transition: background .15s, transform .05s;
}
.sales-end-setting button:hover,
.sales-location-section button:hover,
.sales-location-section a#get-current-location:hover{
  background: color-mix(in srgb, var(--accent-3) 12%, var(--surface));
}
.sales-end-setting button:active,
.sales-location-section button:active,
.sales-location-section a#get-current-location:active{ transform: translateY(1px); }

#save-location{ border-color:transparent; background:var(--accent); color:#fff; }
#save-location:hover{ background:var(--accent-2); }

#display-endtime{
  margin-top:8px; display:inline-block; padding:6px 10px; border-radius:999px;
  background: color-mix(in srgb, var(--accent-3) 14%, var(--surface));
  border:1px solid var(--border); font-variant-numeric:tabular-nums; color:var(--text);
}
#countdown{
  display:inline-block; margin-left:8px; padding:6px 10px; border-radius:999px;
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
  border:1px solid var(--border); font-weight:800; font-variant-numeric:tabular-nums; color:#7a3b00;
}
#kcpm-diag-line{ font-size:.9rem; color:var(--muted); word-break:break-word; }

@media (max-width:480px){
  #content{ padding-bottom:18svh; }
  .sales-control{ grid-template-columns:1fr; }
  #sales-button{ min-width:100%; }
}
@media (prefers-reduced-motion:reduce){
  #sales-button, .sales-control,
  .sales-end-setting button, .sales-location-section button,
  .sales-location-section a#get-current-location{ transition:none!important; }
}

/* =========================
   MyPage（表示側）
   ========================= */
.page-title h1::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px; border-radius:2px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
}
.kc-photo-display,
.kc-logo-display,
.kc-info-display,
.store-notice,
.account-deletion{
  max-width:860px; margin:10px auto; padding:12px 14px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--card-shadow);
}
.kc-photo-display h2,
.kc-logo-display h2,
.kc-info-display h2,
.store-notice h2,
.account-deletion h2{
  margin:4px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--border);
  font-weight:700; font-size:clamp(1.05rem, 1rem + .5vw, 1.25rem); color:var(--text);
}

/* 統一 photo-gallery（grid 版） */
.photo-gallery{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px;
}
@media (min-width:600px){ .photo-gallery{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.photo-gallery img{
  width:100%; height:auto; display:block; border:1px solid var(--border);
  border-radius:10px; background:#fff; padding:4px;
}
.photo-item img{ width:100%; height:auto; display:block; border:1px solid var(--border); border-radius:10px; background:#fff; padding:4px; }
.photo-item p{ margin:6px 0 0; text-align:center; }
.photo-item a{ color:var(--accent); }

.kc-logo-display .kc-logo,
.kc-logo-display img{
  display:block; margin:0 auto; max-width:180px; height:auto;
  border:1px solid var(--border); border-radius:12px; background:#fff; padding:6px;
}
.kc-info-display p{
  margin:8px 0; display:grid; grid-template-columns:max-content 1fr; gap:6px 10px;
  line-height:1.8; font-size:1rem;
}
.kc-info-display p strong{ color:var(--muted); min-width:7.5em; font-weight:700; }

.store-notice ul{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:8px; }
.store-notice li a{ color:var(--accent); text-decoration:none; }
.store-notice li a:hover{ text-decoration:underline; }
.store-notice p{ text-align:center; color:var(--muted); }

.account-deletion p{ line-height:1.8; color:var(--text); }
#show-delete-form,
#cancel-delete-form,
#delete-form-container input[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:10px 14px; margin:6px 6px 0 0;
  border-radius:10px; cursor:pointer; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-weight:800;
  transition: background .15s, transform .05s;
}
#delete-form-container input[type="submit"]{ background:var(--accent); color:#fff; border-color:transparent; }
#show-delete-form:hover, #cancel-delete-form:hover{ background: color-mix(in srgb, var(--accent-3) 12%, var(--surface)); }
#delete-form-container input[type="submit"]:hover{ background:var(--accent-2); }
#show-delete-form:active, #cancel-delete-form:active, #delete-form-container input[type="submit"]:active{ transform: translateY(1px); }

@media (max-width:480px){
  .kc-photo-display, .kc-logo-display, .kc-info-display, .store-notice, .account-deletion{
    padding:10px 12px; border-radius:10px;
  }
  .kc-info-display p{ grid-template-columns:1fr; }
}

/* =========================
   プロフィール編集
   ========================= */
.page-title{ margin:8px 0 6px; padding:0; }
.page-title h1{
  position:relative; padding:2px 0 2px 10px; margin:0; font-weight:700; line-height:1.25; color:var(--text);
  font-size: clamp(1.1rem, 1rem + .8vw, 1.5rem);
}
.page-title h1::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px; border-radius:2px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
}

#content fieldset{
  max-width:860px; margin:10px auto; padding:12px 14px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--card-shadow);
}
#content fieldset legend{
  padding:0 6px 6px; margin:0 0 8px; font-weight:800; color:var(--text);
  border-bottom:1px solid var(--border);
  font-size: clamp(1.05rem, 1rem + .5vw, 1.25rem);
}

#content p:has(input[type="checkbox"]){
  display:grid; gap:8px 12px; grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (min-width:560px){ #content p:has(input[type="checkbox"]){ grid-template-columns:repeat(3, minmax(0,1fr)); } }
#content p:has(input[type="checkbox"]) label{ display:inline-flex; align-items:center; gap:6px; font-weight:600; }
#content input[type="checkbox"]{ width:18px; height:18px; }

@media (max-width:480px){ #content fieldset{ padding:10px 12px; border-radius:10px; } }

/* =========================
   メニュー投稿ページ
   ========================= */
#content form:has(#menu_title, #menu_price){
  max-width:760px; margin:8px auto 24px; padding:14px 16px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--card-shadow);
}
#menu_price{ font-variant-numeric:tabular-nums; }
#menu_genre{ background:#fff; }



#uploadContainer{
  margin:6px 0 12px; border:1px dashed color-mix(in srgb, var(--border) 80%, transparent);
  border-radius:12px; background: color-mix(in srgb, var(--accent-3) 6%, var(--surface)); padding:10px;
}

.upload-container fieldset{ border:1px solid #ddd; padding:12px; border-radius:8px }
.upload-group{ display:flex; align-items:center; gap:8px; margin:.5rem 0 }
.upload-group label{ min-width:4.5em }
.file-name-display{ font-size:.9em; color:#333 }



#addPhoto{
  display:block; width:100%; margin:8px 0 4px; padding:12px 16px; min-height:48px;
  border:1px solid var(--border); border-radius:12px; background:var(--surface);
  color:var(--text); font-weight:800; cursor:pointer; transition: background .15s, transform .05s;
}

#addPhoto::before{ content:"＋ 写真を追加"; }
#addPhoto:hover{ background: color-mix(in srgb, var(--accent-3) 12%, var(--surface)); }
#addPhoto:active{ transform: translateY(1px); }

.current-images{
  margin:8px 0 12px; display:grid; gap:10px; grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (min-width:640px){ .current-images{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.current-image{
  background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:6px; text-align:center;
}
.current-image img{ width:100%; height:auto; display:block; border-radius:6px; margin-bottom:6px; }
.current-image a{
  display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:6px 10px; font-size:.95rem;
  border:1px solid var(--border); border-radius:999px;
  background: color-mix(in srgb, var(--accent-3) 10%, var(--surface)); color:var(--text);
}

#content form p:has(input[name="update_menu"]){
  display:grid; gap:10px; grid-template-columns:1fr;
}
@media (min-width:560px){
  #content form p:has(input[name="update_menu"]){ grid-template-columns:1fr 1fr; }
}
#content form input[name="delete_menu"]{
  border:none; border-radius:12px; min-height:48px; font-weight:800; color:#fff;
  background:#d84a4a; transition: background .15s, transform .05s;
}
#content form input[name="delete_menu"]:hover{ background:#bf3f3f; }
#content form input[name="delete_menu"]:active{ transform: translateY(1px); }

/* サムネイル（新メニュー投稿プレビュー用） */
.menu-thumbnail{ text-align:center; margin-top:1em; }
.menu-thumbnail img{
  max-width:150px; max-height:150px; border:1px solid var(--border);
  padding:.3em; display:inline-block; border-radius:6px; background:#fff;
}

/* =========================
   Event Create / Edit
   ========================= */
#event-form, #edit-event-form{
  max-width:760px; margin:8px auto 24px; padding:14px 16px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--card-shadow);
}
#event-form p, #edit-event-form p{ margin:10px 0 14px; }
#event-form label, #edit-event-form label{ display:block; font-weight:700; color:var(--text); margin-bottom:6px; }

#event-form fieldset, #edit-event-form fieldset{
  border:1px solid var(--border); border-radius:12px; padding:12px; margin:12px 0 16px;
  background: color-mix(in srgb, var(--accent-3) 6%, var(--surface));
}
#event-form legend, #edit-event-form legend{ font-weight:800; font-size:.95rem; color:var(--text); padding:0 8px; }

#event-dates-wrapper p{ margin:8px 0; }

#add-event-date{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 14px; min-height:44px; border:1px solid var(--border); border-radius:999px;
  background:var(--surface); color:var(--text); font-size:.95rem; cursor:pointer;
  transition: background .15s, transform .05s;
}
#add-event-date::before{ content:"＋"; font-weight:800; }
#add-event-date:hover{ background: color-mix(in srgb, var(--accent-3) 12%, var(--surface)); }
#add-event-date:active{ transform: scale(.98); }

#event-form input[type="submit"], #edit-event-form input[name="update_event"]{
  display:block; width:100%; padding:12px 16px; min-height:48px; font-size:1rem; font-weight:800; letter-spacing:.02em;
  border:none; border-radius:12px; background:var(--accent); color:#fff; cursor:pointer;
  transition: background .15s, transform .05s;
}
#event-form input[type="submit"]:hover, #edit-event-form input[name="update_event"]:hover{ background:var(--accent-2); }
#event-form input[type="submit"]:active, #edit-event-form input[name="update_event"]:active{ transform: translateY(1px); }

#edit-event-form p:has(input[name="update_event"]){
  display:grid; gap:10px; grid-template-columns:1fr;
}
@media (min-width:560px){
  #edit-event-form p:has(input[name="update_event"]){ grid-template-columns:1fr 1fr; }
}
#edit-event-form input[name="delete_event"]{
  border:none; border-radius:12px; min-height:48px; font-weight:800; color:#fff; background:#d84a4a;
  transition: background .15s, transform .05s;
}
#edit-event-form input[name="delete_event"]:hover{ background:#bf3f3f; }
#edit-event-form input[name="delete_event"]:active{ transform: translateY(1px); }

@media (max-width:480px){
  #event-form, #edit-event-form{ padding:12px; border-radius:10px; }
  #add-event-date{ width:100%; }
}

/* =========================
   Auth（Login & Registration）
   ========================= */
#content form:has(input[name="login_submit"]),
#content form#reg_form{
  max-width:760px; margin:8px auto 24px; padding:14px 16px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--card-shadow);
}
#content form:has(input[name="login_submit"]) p,
#content form#reg_form p{ margin:10px 0 14px; }
#content form:has(input[name="login_submit"]) label,
#content form#reg_form label{ display:block; font-weight:700; color:var(--text); margin-bottom:6px; }
#content form#reg_form textarea{ min-height:120px; resize:vertical; }
#content form:has(input[name="login_submit"]) input:focus-visible,
#content form#reg_form :is(input,select,textarea):focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
#content #login_remember{ width:18px; height:18px; vertical-align:middle; }
#content label[for="login_remember"]{ display:inline-flex; align-items:center; gap:8px; font-weight:600; }
#content .cf-turnstile{ margin:4px 0 10px; }

#content form:has(input[name="login_submit"]) input[type="submit"],
#content form#reg_form input[type="submit"]{
  display:block; width:100%; padding:12px 16px; min-height:48px;
  font-size:1rem; font-weight:800; letter-spacing:.02em; border:none; border-radius:12px;
  background:var(--accent); color:#fff; cursor:pointer; transition: background .15s, transform .05s;
}
#content form:has(input[name="login_submit"]) input[type="submit"]:hover,
#content form#reg_form input[type="submit"]:hover{ background:var(--accent-2); }
#content form:has(input[name="login_submit"]) input[type="submit"]:active,
#content form#reg_form input[type="submit"]:active{ transform: translateY(1px); }

@media (min-width:560px){
  #content form#reg_form p:has(input[type="checkbox"]){ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:480px){
  #content form:has(input[name="login_submit"]), #content form#reg_form{ padding:12px; border-radius:10px; }
}
#username-msg{ margin-top:6px; font-size:.95rem; }

/* =========================
   QR Page
   ========================= */
.qr-page .page-title h1, .page-title h1{ /* 既存との互換のため保持（内容は共通） */ }
.page-title h1::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:2px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
}
/* セカンド見出しはページ内に限定して下線 */
.qr-content h2{
  margin:10px 0 8px; padding-bottom:6px;
  font-size:clamp(1.05rem, 1rem + .5vw, 1.25rem);
  font-weight:700; color:var(--text); border-bottom:1px solid var(--border);
}

.qr-content{
  margin:8px auto 16px; padding:8px; display:grid; place-items:center;
  min-height: calc(100svh - 180px);
}
.qr-frame{
  background:#fff; padding:10px; border-radius:8px; box-shadow:var(--card-shadow);
}
.qr-content img{
  display:block; width:min(88vw, 520px); height:auto; image-rendering:auto;
}
.qr-caption{
  margin-top:10px; text-align:center; color:var(--muted);
  font-size: clamp(.95rem, .9rem + .3vw, 1.05rem);
}
.qr-overlay{ display:none; }
.qr-content.is-overlay .qr-overlay{
  display:block; position:absolute; inset:0; display:grid; place-items:center;
}
.qr-content.is-overlay .qr-overlay-inner{
  background:rgba(255,255,255,.85); padding:16px 18px; border-radius:10px; color:#000;
  text-align:center; font-weight:700; max-width:90%;
}
.qr-content :focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

@media print{
  .page-title, #site-header, #site-footer{ display:none !important; }
  .qr-content{ min-height:auto; margin:0; padding:0; }
  .qr-frame{ box-shadow:none; padding:12mm; }
  .qr-content img{ width:120mm; }
}

/* =========================
   About（サイトについて）
   ========================= */
.about .page-title h1, .page-title h1{ /* 互換保持 */ }
.about-content{
  max-width:800px; margin:0 auto; padding:16px 20px; line-height:1.8;
}
.about-content h2{
  font-size:clamp(1.15rem, 1.05rem + .7vw, 1.5rem);
  font-weight:700; color:var(--text); border-bottom:1px solid var(--border);
  padding-bottom:8px; margin:12px 0 12px;
}
.about-content h3{
  font-size:clamp(1.05rem, 1rem + .5vw, 1.25rem);
  color:var(--text); margin:10px 0 8px; font-weight:700;
}
.catch-copy{
  background: color-mix(in srgb, var(--accent-3) 12%, var(--surface));
  color:var(--text); font-weight:700; padding:10px 12px; border-radius:12px; text-align:center; margin:14px 0 16px;
}
.features ul, .recommend ul{ list-style:disc outside; margin:8px 0 16px 1.25em; padding:0; }
.features li, .recommend li{ margin-bottom:10px; line-height:1.8; }
.features li strong{ font-weight:700; }
@media (max-width:768px){ .about-content{ padding:12px; } }
.about-content :focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

/* =========================
   Store Notice（置き換え版・統一）
   ========================= */
.store-notice{
  max-width:860px; margin:14px auto 16px; padding:12px 14px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--card-shadow);
}
.store-notice h2{
  margin:4px 0 10px; padding-bottom:6px; font-weight:700;
  font-size:clamp(1.05rem, 1rem + .5vw, 1.25rem); color:var(--text);
  text-align:left; border-bottom:1px solid var(--border);
}
.store-notice ul{
  list-style:none; margin:6px 0 0; padding:0; display:grid; gap:8px;
}
.store-notice li a{
  display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 12px;
  border:1px solid var(--border); border-radius:10px; background:var(--surface);
  color:var(--text); text-decoration:none; transition: background .15s, transform .05s; overflow:hidden;
}
.store-notice li a::before{
  content:""; flex:0 0 8px; width:8px; height:8px; border-radius:50%; background:var(--accent); translate:0 .5px; opacity:.9;
}
.store-notice li a{ white-space:nowrap; text-overflow:ellipsis; }
.store-notice li a > *{ min-width:0; }
.store-notice li a:hover{ background: color-mix(in srgb, var(--accent-3) 12%, var(--surface)); }
.store-notice li a:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
.store-notice p{ margin-top:10px; text-align:center; }
.store-notice p a{
  display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:8px 14px;
  border-radius:999px; border:1px solid var(--border); background:var(--surface);
  color:var(--accent); font-weight:800; text-decoration:none; transition: background .15s, transform .05s;
}
.store-notice p a:hover{ background: color-mix(in srgb, var(--accent-3) 12%, var(--surface)); }
.store-notice p a:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }




/* ===== Mobile baseline: 全ページで縦並び（～1024px）===== */
@media (max-width: 1024px){
  /* よく使われる横並び系の器を全部 block 化 */
  .row, .columns, .two-col, .split,
  .content, .entry, .entry-content,
  .main, .primary, .secondary,
  .store-main, .article-main {
    display: block !important;
  }

  /* 左右に振るための float/幅指定を無効化 */
  [class*="col-"], .column,
  .store-thumbnail, .store-details,
  .sidebar, .aside {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}




/* 店主SNS（Single Kitchen Car） */
.store-sns {
  margin: 1.25rem 0 1.25rem;
  padding: 0.75rem 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.store-sns__title {
  font-size: 1.05rem;
  margin: 0 0 .5rem;
}

/* 横一列・常に1行死守。幅が足りなければ自動で縮小（最大40px・最小は実質 ~34-38px程度で収まる） */
.sns-list {
  --gap: 12px;
  --max: 40px;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 0;
  margin: 0;
  list-style: none;
  /* 折り返し禁止 */
  flex-wrap: nowrap;
  overflow: visible;
}

/* 5個を1列で必ず収めるため、画面幅から逆算して自動縮小 */
.sns-item .sns-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(min(var(--max), (100vw - 32px - (4 * var(--gap))) / 5));
  height: calc(min(var(--max), (100vw - 32px - (4 * var(--gap))) / 5));
  /* 32px は左右のページ余白想定。テーマの余白が異なる場合は微調整可 */
  border-radius: 10px;
  touch-action: manipulation;
}
.sns-item .sns-link img {
  width: 100%;
  height: 100%;
  display: block;
}

/* タップしやすさ & 視認性 */
.sns-item .sns-link:focus-visible {
  outline: 2px solid #333;
  outline-offset: 2px;
}
.sns-item .sns-link:active {
  transform: scale(0.96);
}

/* ごく狭い端末での最終保険（万一は38px固定に落とす） */
@media (max-width: 320px) {
  .sns-list { --max: 38px; --gap: 10px; }
}



/* フォロー行：左右配置 */
.kcpm-follow{ margin:.5rem 0 1rem; }
.kcpm-follow-inner{
  display:flex;
  align-items:center;
  justify-content:space-between; /* ← 左右に配置 */
  gap:12px;
}
.kcpm-msg{
  margin:0;
  font-size:.95rem;
  color:#666;
  flex:1;           /* ← 左側テキストを可変幅に */
  min-width:0;      /* 折り返し制御の保険 */
}
.kcpm-btn{
  white-space:nowrap; /* ボタンの改行防止（既存スタイルは尊重） */
}
.kcpm-diag { display: none !important; }





/* 実体バックドロップ（外側タップで閉じる用） */
#nav-backdrop{
  display:none; position:fixed; inset:0; z-index:1000;
  background: rgba(0,0,0,.25);
}
#nav-backdrop.is-show{ display:block; }

/* メニュー本体はヘッダー直下で全幅 */
:root{ --header-h: 56px; }
@media (min-width:481px){ :root{ --header-h: 64px; } }

#nav-menu{
  display:none; position:fixed; inset:var(--header-h) 0 auto 0; z-index:1001;
  width:100%; background:rgba(255,255,255,.98);
  backdrop-filter:saturate(1.1) blur(4px);
  border-bottom:1px solid var(--border);
  box-shadow:0 6px 20px rgba(0,0,0,.16);
  max-height:calc(100svh - var(--header-h));
  overflow:auto;
}
#nav-menu.open{ display:block; }

/* 開いている間は背面スクロール禁止 */
body.no-scroll{ overflow:hidden; touch-action:none; }

/*  価格： 16–18px + 太字 */
.food-menu-title{
  font-size: 1.0625rem;   /* 17px */
  line-height: 1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/*  フォーカスリング**：iOSで消えることがあるので */
:focus-visible{ outline: 2px solid #3b82f6; outline-offset: 2px; }


/* # レイアウト安定（スマホの“ガタつき”防止） */
.sales-logo, .food-menu-thumb{ aspect-ratio: 1 / 1; object-fit: cover; }

/*  スクロール快適化 */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
/* =========================================================
 * 個別ページの「前に戻る / 一覧へ戻る」ボタン
 * ========================================================= */
.kc-back-nav {
  width: min(100%, 960px);
  margin: 12px auto 18px;
}
.kc-back-nav.kc-back-nav-bottom {
  margin-top: 28px;
  margin-bottom: 10px;
}
.kc-back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35em;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--border, #ddd);
  border-radius: 999px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  touch-action: manipulation;
}
.kc-back-button:hover,
.kc-back-button:focus {
  text-decoration: none;
  transform: translateY(-1px);
}
.kc-back-button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 3px;
}
@media (max-width: 480px) {
  .kc-back-nav {
    padding: 0 12px;
  }
  .kc-back-button {
    width: 100%;
  }
}



/* 第30段：スマホ固定ナビとモバイル視認性の調整 */
@media (max-width:640px){
  #site-header{ box-shadow:0 2px 12px rgba(0,0,0,.07); }
  #fixed-footer-menu{ box-shadow:0 -8px 22px rgba(0,0,0,.10); }
  #fixed-footer-menu ul{ gap:4px; }
  #fixed-footer-menu a{ min-height:50px; padding:5px 0; }
  #fixed-footer-menu a img,
  #fixed-footer-menu a svg{ width:24px; height:24px; }
  #fixed-footer-menu a .label{ font-size:.76rem; }
}

@media (max-width:360px){
  #fixed-footer-menu a .label{ display:block; font-size:.72rem; }
}


/* 第31段：QR・作家ロゴ・下部余白・SNSアイコン微調整 */
@media (max-width:640px){
  :root{ --footer-nav-space: calc(110px + env(safe-area-inset-bottom, 0px)); }
}

/* 固定ページ本文QR：本文側のインライン指定が削られても大きくなりすぎない保険 */
#content .page-content-qr{
  max-width:860px;
  margin:0 auto;
  padding:0 .25rem 2rem;
}
#content .page-content-qr figure{
  margin:1.6em auto;
  text-align:center;
}
#content .page-content-qr img,
#content .page-content-qr figure img{
  display:block !important;
  width:clamp(220px,70vw,320px) !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 auto !important;
}
#content .page-content-qr figcaption{
  margin-top:.8em;
  text-align:center;
  font-size:.9em;
  color:#666;
}

/* 下部固定ナビの上に本文・コピーライトが潜り込まないように余白を強める */
#wrap{
  padding-bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
}
#site-footer .footer-copy{
  padding-bottom:calc(.75rem + env(safe-area-inset-bottom, 0px));
}
body.no-scroll #fixed-footer-menu{
  pointer-events:none;
  filter:brightness(.85);
}

/* 未登録SNSはPHP側で出さない。表示されたSNSアイコンは白背景でも見えるようにする */
.sns-item .sns-link{
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  padding:6px;
}
.sns-item .sns-link img{
  object-fit:contain;
}


/* 第32段：出店管理同期・QR表示保険・作家ロゴ縮小・下部余白補強 */
/* QR固定ページが汎用テンプレートで表示されても、QR画像だけは大きくなりすぎないようにする */
#content img[src*="qr_hm_hindareta"],
#content img[src*="qr_hm"],
#content img[src*="qr-"],
#content img[src*="/qr_"]{
  display:block !important;
  width:clamp(220px,70vw,320px) !important;
  max-width:100% !important;
  height:auto !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
#content figure:has(img[src*="qr_hm_hindareta"]),
#content figure:has(img[src*="qr_hm"]),
#content figure:has(img[src*="/qr_"]){
  text-align:center !important;
}

/* 作家情報ページのロゴは作品画像ではないため、控えめなサイズに固定 */
#content .store-main .store-thumbnail figure{
  margin:0 auto 1rem !important;
  text-align:center !important;
}
#content .store-main .store-thumbnail figure img{
  width:min(38vw,126px) !important;
  max-width:126px !important;
  height:auto !important;
  object-fit:contain !important;
  border-radius:16px;
}
@media (min-width:900px){
  #content .store-main .store-thumbnail figure img{
    width:126px !important;
    max-width:126px !important;
  }
}
@media (max-width:420px){
  #content .store-main .store-thumbnail figure img{
    width:min(36vw,120px) !important;
    max-width:120px !important;
  }
}

/* 固定下部ナビに本文・コピーライト・戻るボタンが隠れにくいようにする */
#content{
  padding-bottom:calc(2.75rem + var(--footer-nav-space)) !important;
}
#site-footer{
  padding-bottom:calc(1.5rem + var(--footer-nav-space)) !important;
}
#site-footer .footer-copy{
  padding-bottom:calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
}

/* 出店中一覧の並び替えボタン：選択中・未選択の見分けを強める */
#content .page-actions button{
  background:#fffaf0 !important;
  color:#5b3b25 !important;
  border:1px solid #eadfca !important;
  text-shadow:none !important;
}
#content .page-actions button[aria-pressed="true"]{
  background:#d95367 !important;
  color:#fff !important;
  border-color:#d95367 !important;
  box-shadow:0 2px 10px rgba(217,83,103,.22) !important;
}
#content .page-actions button[aria-pressed="false"]{
  color:#5b3b25 !important;
}


/* =========================================================
 * 第35段：スマホUI最終微調整
 * - メニュー開閉中の背面操作を防止
 * - 下部固定ナビを少し浮かせて、固定領域だと分かりやすくする
 * - 詰められる余白だけ軽く調整
 * ========================================================= */
#nav-backdrop{
  z-index:1200 !important;
  background:rgba(0,0,0,.34) !important;
}
#nav-menu{
  z-index:1202 !important;
}
#site-header{
  z-index:1203 !important;
}
body.nav-is-open #fixed-footer-menu,
body.no-scroll #fixed-footer-menu{
  pointer-events:none !important;
  user-select:none;
  opacity:.42;
  filter:saturate(.85) brightness(.95);
  z-index:900 !important;
}
body.nav-is-open #content,
body.nav-is-open #site-footer .footer-copy{
  pointer-events:none;
}

/* 下部固定ナビ：全幅ベタ付けではなく、軽く浮いたアプリ風の台座にする */
#fixed-footer-menu{
  left:50% !important;
  right:auto !important;
  bottom:max(8px, env(safe-area-inset-bottom, 0px)) !important;
  width:min(100% - 16px, 960px) !important;
  transform:translateX(-50%);
  border:1px solid rgba(231,226,217,.95) !important;
  border-radius:24px !important;
  box-shadow:0 -2px 10px rgba(0,0,0,.04), 0 10px 28px rgba(0,0,0,.16) !important;
  overflow:hidden;
}
#fixed-footer-menu::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:0;
  height:1px;
  background:rgba(255,255,255,.9);
  pointer-events:none;
}
#fixed-footer-menu a.is-current{
  box-shadow:inset 0 4px 0 #d95367, 0 2px 8px rgba(217,83,103,.10) !important;
}

@media (max-width:640px){
  :root{ --footer-nav-space: calc(118px + env(safe-area-inset-bottom, 0px)); }
  #content{
    padding-top:.45rem !important;
    padding-left:clamp(16px,4vw,24px) !important;
    padding-right:clamp(16px,4vw,24px) !important;
  }
  .page-title{
    margin-top:4px !important;
    margin-bottom:4px !important;
  }
  .page-title + *,
  .page-title + .sales-sort{
    margin-top:6px !important;
    padding-top:6px !important;
  }
  #content > p:first-of-type{
    margin-bottom:.7em;
  }
  .kc-back-nav{
    margin-top:8px !important;
    margin-bottom:12px !important;
  }
  .kc-back-nav.kc-back-nav-bottom{
    margin-top:20px !important;
  }
  .sales-grid,
  .food-menu-grid,
  .event-list,
  .store-list{
    margin-top:.75rem;
  }
  #fixed-footer-menu ul{ gap:4px; }
  #fixed-footer-menu a{ min-height:54px; padding:6px 0 7px; }
}

@media (max-width:360px){
  #fixed-footer-menu{
    width:min(100% - 10px, 960px) !important;
    border-radius:20px !important;
  }
  #fixed-footer-menu a{ min-height:52px; }
}


/* =========================================================
 * v1.1.0：スマホ情報優先UI
 * ========================================================= */
#fixed-footer-menu ul{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
#fixed-footer-menu a{ min-width:0; padding-inline:2px; }
#fixed-footer-menu a .label{ display:block !important; white-space:nowrap; overflow:hidden; text-overflow:clip; }
@media (max-width:380px){
  #fixed-footer-menu a img,#fixed-footer-menu a svg{ width:22px;height:22px; }
  #fixed-footer-menu a .label{ font-size:.80rem !important; letter-spacing:-.02em; }
}

/* 作家SNS：公式サービスを一目で区別できる配色＋文字ラベル */
.store-sns .sns-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.store-sns .sns-item{ margin:0; }
.store-sns .sns-link{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  padding:7px 12px !important; border-radius:999px !important;
  color:#fff; font-weight:900; text-decoration:none; border:0 !important;
}
.store-sns .sns-link img{ width:28px;height:28px;object-fit:contain;filter:none !important; }
.store-sns .sns-link--x{ background:#000 !important; }
.store-sns .sns-link--instagram{ background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045) !important; }
.store-sns .sns-link--facebook{ background:#1877f2 !important; }
.store-sns .sns-link:focus-visible{ outline:3px solid var(--ring); outline-offset:3px; }

/* ログイン／新規登録の切替 */
.hm-auth-shell{ max-width:860px; margin:0 auto; }
.hm-auth-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0 14px; }
.hm-auth-tab{ min-height:48px; border:1px solid var(--border); border-radius:12px; background:#fff; color:var(--text); font-weight:900; font-size:1rem; }
.hm-auth-tab[aria-selected="true"]{ color:#fff; background:var(--accent); border-color:var(--accent); box-shadow:0 3px 10px rgba(229,75,75,.22); }
.hm-auth-panel[hidden]{ display:none !important; }
.hm-auth-panel{ max-width:860px; margin:0 auto; }
.hm-auth-panel > form{ margin-top:0; }

/* 作品詳細の作家カード */
.hm-author-link{ display:block; color:inherit; text-decoration:none; border-radius:14px; padding:.35rem; }
.hm-author-link:hover{ background:#fffaf0; }
.hm-author-cta{ display:inline-flex; min-height:44px; align-items:center; justify-content:center; margin-top:.85rem; padding:.55rem 1rem; border-radius:999px; background:#d95367; color:#fff; font-weight:900; }


/* =========================================================
 * v1.3.0：スマホ可読性・折りたたみジャンルUI
 * ========================================================= */
@media (max-width:767px){
  #wrap{ font-size:17px; }
  #content{ padding-left:clamp(12px,3.5vw,18px); padding-right:clamp(12px,3.5vw,18px); }
  #content p,
  #content li,
  #content label,
  #content .field-note,
  #content .field-warn,
  #content .filter-hint{ font-size:1rem; }
  #content input:not([type="checkbox"]):not([type="radio"]),
  #content select,
  #content textarea,
  #content button{ font-size:1rem; }
  #content small{ font-size:.95rem; line-height:1.65; }
  .page-title h1{ font-size:clamp(1.25rem,5vw,1.55rem); line-height:1.35; }
  #fixed-footer-menu a .label{ font-size:.9rem !important; letter-spacing:0 !important; }
}

/* 親ジャンルを1項目ずつ開閉する共通UI */
.hind-kc-genre-tree{ display:grid; gap:10px; margin-top:10px; }
.hind-kc-genre-tree .genre-help{ margin:.25rem 0 .75rem; color:var(--muted); font-size:.95rem; line-height:1.7; }
.hind-kc-genre-tree .menu-genre-block{
  margin:0; border:1px solid var(--border); border-radius:13px; background:#fff; overflow:hidden;
}
.hind-kc-genre-tree .menu-genre-block > summary{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:48px; padding:10px 12px; cursor:pointer; list-style:none;
  background:#fff7e6; font-weight:900; color:var(--text);
}
.hind-kc-genre-tree .menu-genre-block > summary::-webkit-details-marker{ display:none; }
.hind-kc-genre-tree .menu-genre-block > summary::after{ content:"開く"; flex:0 0 auto; font-size:.9rem; color:var(--accent); }
.hind-kc-genre-tree .menu-genre-block[open] > summary::after{ content:"閉じる"; }
.hind-kc-genre-tree .menu-genre-summary-name{ min-width:0; }
.hind-kc-genre-tree .menu-genre-selected-count{
  margin-left:auto; padding:3px 8px; border:1px solid #eadfca; border-radius:999px;
  background:#fff; color:#5b3b25; font-size:.9rem; font-weight:800; white-space:nowrap;
}
.hind-kc-genre-tree .menu-genre-panel{ padding:10px 12px 12px; border-top:1px solid var(--border); }
.hind-kc-genre-tree .menu-genre-parent,
.hind-kc-genre-tree .menu-genre-children label{
  display:flex; align-items:flex-start; gap:9px; min-height:44px; margin:0; padding:9px 8px;
  border-radius:9px; font-size:1rem; line-height:1.5; cursor:pointer;
}
.hind-kc-genre-tree .menu-genre-parent{ background:#fffaf0; font-weight:800; }
.hind-kc-genre-tree .menu-genre-children{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 8px; margin-top:7px; }
.hind-kc-genre-tree input[type="checkbox"]{ width:20px; height:20px; flex:0 0 20px; margin-top:2px; }
.hind-kc-genre-tree .genre-empty-child{ margin:.5rem 0 0; color:var(--muted); font-size:.95rem; }
@media (max-width:430px){
  .hind-kc-genre-tree .menu-genre-children{ grid-template-columns:1fr; }
  .hind-kc-genre-tree .menu-genre-block > summary{ align-items:flex-start; flex-wrap:wrap; }
  .hind-kc-genre-tree .menu-genre-selected-count{ margin-left:0; }
}

/* エラー一覧は読み上げ順を保つ */
.hm-auth-panel .error ul{ list-style:disc; margin:.25rem 0 .25rem 1.4rem; }
.hm-auth-panel .error li{ margin:.25rem 0; }

/* 作家検索：親ジャンル単位の折りたたみ */
.store-genre-filter-tree{ display:grid; gap:9px; margin-top:8px; }
.filter-genre-help{ margin:.25rem 0 .65rem !important; color:var(--muted); font-size:.95rem !important; line-height:1.7; }
.store-genre-filter-group{ border:1px solid var(--border); border-radius:12px; background:#fff; overflow:hidden; }
.store-genre-filter-group > summary{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:46px; padding:9px 11px; cursor:pointer; list-style:none; background:#fffaf0; font-weight:900;
}
.store-genre-filter-group > summary::-webkit-details-marker{ display:none; }
.store-genre-filter-group > summary::after{ content:"開く"; color:var(--accent); font-size:.9rem; }
.store-genre-filter-group[open] > summary::after{ content:"閉じる"; }
.store-genre-filter-count{ margin-left:auto; border:1px solid #eadfca; border-radius:999px; background:#fff; padding:3px 8px; font-size:.9rem; white-space:nowrap; }
.store-genre-filter-panel{ padding:9px 11px 11px; border-top:1px solid var(--border); }
.store-genre-filter-parent,
.store-genre-filter-children label{
  display:flex !important; align-items:flex-start !important; gap:8px !important;
  min-height:44px; margin:0 !important; padding:8px 7px; border-radius:8px; line-height:1.5;
}
.store-genre-filter-parent{ background:#fff8ed; font-weight:800 !important; }
.store-genre-filter-children{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 8px; margin-top:6px; }
.store-genre-filter-tree input[type="checkbox"]{ width:20px; height:20px; flex:0 0 20px; margin-top:2px; }
.filter-genre-empty{ margin:.5rem 0 0 !important; color:var(--muted); font-size:.95rem !important; }
@media(max-width:430px){
  .store-genre-filter-children{ grid-template-columns:1fr; }
  .store-genre-filter-group > summary{ align-items:flex-start; flex-wrap:wrap; }
  .store-genre-filter-count{ margin-left:0; }
}