/* =====================================================================
   各店舗の公開サイトのデザイン（テーマ「pos」の見た目を上書きする）。
   白と黒だけのシンプルなデザイン。
   テーマ本体の assets/css/main.css のあとに読み込まれる。
   プラグインの自動更新で配布できるよう、デザインはこのファイルで持つ。
   ===================================================================== */

:root{
	--champ-bg:#ffffff;
	--champ-fg:#111111;
	--champ-muted:#6b6b6b;
	--champ-accent:#111111;    /* 差し色は使わず、黒で統一 */
	--champ-line:#e5e5e5;
	--champ-soft:#f5f5f5;      /* 薄いグレー（写真なし・帯の背景） */
	--champ-radius:6px;
}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
	background:var(--champ-bg); color:var(--champ-fg); line-height:1.85; letter-spacing:.02em;
	font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Noto Sans JP",Meiryo,system-ui,sans-serif;
	-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--champ-fg); text-underline-offset:3px}
a:hover{color:var(--champ-muted)}
img{max-width:100%; height:auto}
.container{max-width:1120px; padding:56px 24px}

/* ===== ヘッダー（上に固定） ===== */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); border-bottom:1px solid var(--champ-line);
	-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.admin-bar .site-header{top:32px}
.site-header__inner{max-width:1120px; padding:0 24px; min-height:66px; gap:20px}
.site-brand{display:flex; align-items:center; min-width:0}
.site-brand__logo{max-height:40px}
.site-brand__name{font-size:1.15rem; font-weight:700; letter-spacing:.12em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.site-nav{min-width:0}
.site-nav__list{gap:26px; flex-wrap:nowrap}
.site-nav__list a{position:relative; display:block; padding:8px 0; font-size:.84rem; font-weight:600; letter-spacing:.1em;
	color:var(--champ-fg); white-space:nowrap}
.site-nav__list a::after{content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:var(--champ-fg);
	transform:scaleX(0); transform-origin:left; transition:transform .25s ease}
.site-nav__list a:hover{color:var(--champ-fg)}
.site-nav__list a:hover::after,.site-nav__list .current-menu-item > a::after{transform:scaleX(1)}

/* ===== ボタン ===== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 32px; border-radius:2px;
	font-size:.9rem; font-weight:700; letter-spacing:.12em; border:1px solid var(--champ-fg);
	transition:background .2s ease, color .2s ease, border-color .2s ease}
.btn--primary{background:var(--champ-fg); color:#fff}
.btn--primary:hover{background:#fff; color:var(--champ-fg); opacity:1}
.btn--ghost{background:transparent; border-color:var(--champ-fg); color:var(--champ-fg)}
.btn--ghost:hover{background:var(--champ-fg); color:#fff}

/* ===== ヒーロー（黒地に白文字） ===== */
.hero{background:#111; color:#fff; text-align:center}
.hero__inner{max-width:820px; padding:112px 24px 104px}
.hero__logo{max-height:104px; margin-bottom:26px}
.hero__name{font-size:clamp(2rem, 5.2vw, 3.2rem); font-weight:700; letter-spacing:.16em; line-height:1.35; margin:0 0 18px; text-indent:.16em}
.hero__name::before{content:"WELCOME"; display:block; font-size:.7rem; font-weight:600; letter-spacing:.42em; text-indent:.42em;
	color:#9a9a9a; margin-bottom:18px}
.hero__catch{font-size:1rem; color:#d6d6d6; margin:0 auto 36px; max-width:620px; line-height:2}
.hero__cta{gap:14px}
.hero__cta .btn--primary{background:#fff; border-color:#fff; color:#111}
.hero__cta .btn--primary:hover{background:transparent; color:#fff}
.hero__cta .btn--ghost{border-color:#fff; color:#fff}
.hero__cta .btn--ghost:hover{background:#fff; color:#111}
.hero__hours{margin:34px 0 0; font-size:.82rem; letter-spacing:.1em; color:#b5b5b5}

/* ===== ホームの各セクション ===== */
.home-sec{padding:28px 0 36px}
.home-sec .container{padding-top:44px; padding-bottom:44px}
.home-sec--alt{background:var(--champ-soft); border:0}
.home-sec__title{font-size:1.5rem; font-weight:700; letter-spacing:.14em; margin:0 0 40px; text-indent:.14em}
.home-sec__title::before{content:"MENU"; display:block; font-size:.68rem; font-weight:700; letter-spacing:.4em; text-indent:.4em;
	color:#8a8a8a; margin-bottom:10px}
.home-sec--alt .home-sec__title::before{content:"CATEGORY"}
#access .home-sec__title::before{content:"ACCESS"}
.home-sec__title::after{width:32px; height:1px; margin-top:16px; background:var(--champ-fg); border-radius:0}
.home-sec__more{margin-top:44px}
#access{scroll-margin-top:84px}

/* ===== 商品カード ===== */
.product-grid{grid-template-columns:repeat(auto-fill, minmax(232px, 1fr)); gap:24px}
.product-card{border:1px solid var(--champ-line); border-radius:var(--champ-radius); background:#fff; box-shadow:none;
	transition:border-color .2s ease}
.product-card:hover{border-color:var(--champ-fg)}
.product-card__link{height:100%}
.product-card__thumb{aspect-ratio:4 / 3; overflow:hidden; background:var(--champ-soft)}
.product-card__thumb img{transition:transform .5s ease}
.product-card:hover .product-card__thumb img{transform:scale(1.04)}
/* 写真がないとき */
.product-card__noimg{position:relative; background:var(--champ-soft)}
.product-card__noimg::after{content:"NO IMAGE"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
	font-size:.66rem; font-weight:700; letter-spacing:.3em; text-indent:.3em; color:#b0b0b0; white-space:nowrap}
.product-card__title,.product-card h3.product-card__title{font-size:.96rem; font-weight:700; line-height:1.6; margin:16px 18px 6px; letter-spacing:.03em}
.product-card__price{margin:0 18px 18px; font-size:1rem; font-weight:700; color:var(--champ-fg); letter-spacing:.04em;
	font-variant-numeric:tabular-nums}

/* 在庫バッジ */
.champ-stock{top:12px; left:12px; padding:4px 12px; border-radius:2px; font-size:.68rem; letter-spacing:.12em}
.champ-stock--in,.champ-stock--low,.champ-stock--out{background:#111; color:#fff}

/* ===== カテゴリ案内 ===== */
.cat-list{grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px}
.cat-list a{position:relative; padding:18px 44px 18px 20px; border-radius:var(--champ-radius); background:#fff;
	border:1px solid var(--champ-line); transition:border-color .2s ease, background .2s ease, color .2s ease}
.cat-list a::after{content:""; position:absolute; right:20px; top:50%; width:7px; height:7px; margin-top:-4px;
	border-right:1px solid currentColor; border-top:1px solid currentColor; transform:rotate(45deg); transition:right .2s ease}
.cat-list a:hover{border-color:var(--champ-fg); background:var(--champ-fg); color:#fff}
.cat-list a:hover::after{right:15px}
.cat-list a:hover .cat-list__count{color:#cfcfcf}
.cat-list__name{font-size:.96rem; letter-spacing:.06em}
.cat-list__count{font-size:.76rem; color:var(--champ-muted); margin-left:auto; padding-left:12px; white-space:nowrap}

/* ===== 営業案内・アクセス ===== */
.access{max-width:760px; border-top:1px solid var(--champ-fg); border-bottom:1px solid var(--champ-fg)}
.access__list{display:block}
.access__list dt{float:left; clear:left; width:120px; padding:20px 0; font-size:.8rem; font-weight:700; letter-spacing:.14em; color:var(--champ-fg)}
.access__list dd{margin:0; padding:20px 0 20px 120px; border-bottom:1px solid var(--champ-line); font-size:.96rem}
.access__list dd:last-of-type{border-bottom:0}
.access__list dd a{font-weight:700}
.access__map{display:inline-block; margin:0 0 0 12px; padding:3px 14px; border:1px solid var(--champ-fg); border-radius:2px;
	font-size:.74rem; font-weight:700; letter-spacing:.06em; text-decoration:none; color:var(--champ-fg); background:#fff;
	transition:background .2s ease, color .2s ease}
.access__map:hover{background:var(--champ-fg); color:#fff}
.access__sns{margin:0; padding:18px 0; border-top:1px solid var(--champ-line); gap:10px; flex-wrap:wrap}
.access__sns span{width:110px; font-size:.8rem; letter-spacing:.14em; color:var(--champ-fg)}
.access__sns a{padding:5px 16px; border-radius:2px; border:1px solid var(--champ-fg); font-size:.8rem; font-weight:700; text-decoration:none;
	color:var(--champ-fg); transition:background .2s ease, color .2s ease}
.access__sns a:hover{background:var(--champ-fg); color:#fff}

/* ===== 下層ページの見出し ===== */
.page-title{border-left:0; padding-left:0; margin:0 0 34px; font-size:1.6rem; font-weight:700; letter-spacing:.12em; text-align:center}
.page-title::after{content:""; display:block; width:32px; height:1px; margin:16px auto 0; background:var(--champ-fg)}
.entry-content{max-width:760px; margin:0 auto 36px; font-size:.96rem}
.entry-content > *:first-child{margin-top:0}

/* ===== 写真メニュー ===== */
.menu-jump{position:sticky; top:66px; z-index:20; margin:0 -24px 34px; padding:12px 24px; gap:8px; flex-wrap:nowrap; overflow-x:auto;
	background:rgba(255,255,255,.95); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--champ-line);
	scrollbar-width:none}
.menu-jump::-webkit-scrollbar{display:none}
.admin-bar .menu-jump{top:98px}
.menu-jump a{flex:none; padding:6px 18px; border-radius:2px; font-size:.8rem; font-weight:700; letter-spacing:.06em; background:#fff;
	border-color:var(--champ-line); color:var(--champ-fg); transition:background .2s ease, color .2s ease, border-color .2s ease}
.menu-jump a:hover{background:var(--champ-fg); border-color:var(--champ-fg); color:#fff}
.menu-cat{margin-bottom:56px; scroll-margin-top:140px}
.menu-cat__title{display:flex; align-items:center; gap:16px; border-left:0; padding-left:0; margin:0 0 22px; font-size:1.2rem; font-weight:700; letter-spacing:.12em}
.menu-cat__title::after{content:""; flex:1 1 auto; height:1px; background:var(--champ-line)}
.menu-list{grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:16px}
.menu-item{gap:0; border:1px solid var(--champ-line); border-radius:var(--champ-radius); background:#fff; transition:border-color .2s ease}
.menu-item:hover{border-color:var(--champ-fg)}
.menu-item__thumb{flex:0 0 132px; background:var(--champ-soft); overflow:hidden}
.menu-item__thumb img{width:132px; transition:transform .5s ease}
.menu-item:hover .menu-item__thumb img{transform:scale(1.04)}
.menu-item__thumb .product-card__noimg{width:132px; min-height:132px}
.menu-item__body{display:flex; flex-direction:column; justify-content:center; padding:18px 20px}
.menu-item__title{font-size:.98rem; font-weight:700; line-height:1.6; letter-spacing:.03em}
.menu-item__desc{font-size:.84rem; color:var(--champ-muted); line-height:1.75; margin:0 0 10px}
.menu-item__price{font-size:1rem; color:var(--champ-fg); letter-spacing:.04em; font-variant-numeric:tabular-nums}

/* ===== 商品詳細 ===== */
.product-single{gap:48px; align-items:center}
.product-single__media{border-radius:var(--champ-radius); overflow:hidden; border:1px solid var(--champ-line); background:var(--champ-soft); min-height:200px}
.product-single__media img{display:block; border-radius:0}
.product-single__title{font-size:1.8rem; font-weight:700; letter-spacing:.08em; line-height:1.5; margin:0 0 14px}
.product-single__price{display:inline-block; margin:0 0 18px; padding-bottom:10px; border-bottom:1px solid var(--champ-fg);
	font-size:1.45rem; color:var(--champ-fg); letter-spacing:.04em; font-variant-numeric:tabular-nums}
.product-single__cats{margin:0 0 18px}
.product-single__cats a{display:inline-block; padding:3px 14px; margin-right:6px; border:1px solid var(--champ-line); border-radius:2px;
	font-size:.76rem; font-weight:700; text-decoration:none; color:var(--champ-fg); background:#fff}
.product-single__cats a:hover{border-color:var(--champ-fg)}
.product-single__desc{font-size:.96rem; color:#333}
.product-single__back{margin-top:34px}
.product-single__back a{display:inline-flex; align-items:center; min-height:44px; padding:0 22px; border:1px solid var(--champ-fg); border-radius:2px;
	font-size:.84rem; font-weight:700; letter-spacing:.06em; text-decoration:none; color:var(--champ-fg); transition:background .2s ease, color .2s ease}
.product-single__back a:hover{background:var(--champ-fg); color:#fff}

/* ===== 価格表 ===== */
.pricelist__cat{display:flex; align-items:center; gap:16px; margin:44px 0 14px; font-size:1.1rem; font-weight:700; letter-spacing:.12em}
.pricelist__cat::after{content:""; flex:1 1 auto; height:1px; background:var(--champ-line)}
.pricelist{border-top:1px solid var(--champ-fg); border-bottom:1px solid var(--champ-fg); background:#fff}
.pricelist th{background:#fff; color:var(--champ-fg); font-size:.78rem; letter-spacing:.14em; padding:12px 8px; border-bottom:1px solid var(--champ-fg)}
.pricelist td{padding:15px 8px; font-size:.95rem; border-bottom:1px solid var(--champ-line)}
.pricelist tr:last-child td{border-bottom:0}
.pricelist td:last-child,.pricelist th:last-child{text-align:right; white-space:nowrap; font-weight:700; font-variant-numeric:tabular-nums}
.pricelist td a{color:var(--champ-fg); text-decoration:none}
.pricelist td a:hover{text-decoration:underline}

/* ===== ページ送り ===== */
.pagination{margin-top:44px; text-align:center}
.pagination .nav-links{display:inline-flex; gap:6px; flex-wrap:wrap; justify-content:center}
.pagination .page-numbers{display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 12px; border-radius:2px;
	border:1px solid var(--champ-line); background:#fff; color:var(--champ-fg); font-size:.86rem; font-weight:700; text-decoration:none}
.pagination .page-numbers.current,.pagination a.page-numbers:hover{background:var(--champ-fg); border-color:var(--champ-fg); color:#fff}
.pagination .screen-reader-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ===== フッター（黒地） ===== */
.site-footer{margin-top:0; background:#111; color:#bdbdbd; text-align:center}
.site-footer__inner{max-width:1120px; padding:60px 24px 34px}
.site-footer__name{margin:0 0 14px; font-size:1.2rem; font-weight:700; letter-spacing:.18em; color:#fff}
.site-footer__info{margin:0 0 18px; font-size:.84rem; line-height:2.1}
.site-footer__sns{justify-content:center; gap:10px; margin:0 0 30px; flex-wrap:wrap}
.site-footer__sns:empty{display:none}
.site-footer__sns a{display:inline-block; padding:5px 16px; border:1px solid #fff; border-radius:2px; font-size:.78rem; font-weight:700;
	letter-spacing:.08em; text-decoration:none; color:#fff; transition:background .2s ease, color .2s ease}
.site-footer__sns a:hover{background:#fff; color:#111}
.site-footer a{color:#fff}
.site-footer__copy{margin:0; padding-top:24px; border-top:1px solid #2e2e2e; font-size:.72rem; letter-spacing:.12em; color:#8a8a8a}

/* ===== スマホ ===== */
@media (max-width:782px){
	.admin-bar .site-header{top:46px}
}
@media (max-width:720px){
	.container{padding:40px 16px}
	.site-header__inner{flex-direction:row; gap:10px; padding:0 14px; min-height:56px}
	.site-brand__name{font-size:1rem; letter-spacing:.08em}
	.site-brand__logo{max-height:34px}
	.site-nav{overflow-x:auto; scrollbar-width:none; margin-right:-14px; padding-right:14px}
	.site-nav::-webkit-scrollbar{display:none}
	.site-nav__list{gap:16px}
	.site-nav__list a{font-size:.78rem; letter-spacing:.04em}
	.hero__inner{padding:76px 18px 70px}
	.hero__name{letter-spacing:.1em; text-indent:.1em}
	.hero__catch{font-size:.9rem; margin-bottom:28px}
	.hero__cta{flex-direction:column; align-items:stretch; max-width:320px; margin:0 auto}
	.hero__cta .btn{width:100%}
	.home-sec{padding:14px 0 20px}
	.home-sec .container{padding-top:36px; padding-bottom:36px}
	.home-sec__title{font-size:1.25rem; margin-bottom:28px}
	.product-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px}
	.product-card__title,.product-card h3.product-card__title{font-size:.84rem; margin:12px 12px 4px}
	.product-card__price{font-size:.9rem; margin:0 12px 14px}
	.cat-list{grid-template-columns:minmax(0, 1fr); gap:10px}
	.access__list dt{float:none; width:auto; padding:16px 0 2px}
	.access__list dd{padding:0 0 16px}
	.access__map{margin:8px 0 0}
	.access__sns span{width:100%}
	#access{scroll-margin-top:70px}
	.page-title{font-size:1.3rem; margin-bottom:26px}
	.menu-jump{top:56px; margin:0 -16px 26px; padding:10px 16px}
	.admin-bar .menu-jump{top:102px}
	.menu-cat{margin-bottom:40px; scroll-margin-top:120px}
	.menu-list{grid-template-columns:minmax(0, 1fr); gap:12px}
	.menu-item__thumb{flex-basis:108px}
	.menu-item__thumb img,.menu-item__thumb .product-card__noimg{width:108px}
	.menu-item__thumb .product-card__noimg{min-height:108px}
	.menu-item__body{padding:14px 16px}
	.product-single{gap:24px}
	.product-single__title{font-size:1.4rem}
	.product-single__price{font-size:1.2rem}
	.site-footer__inner{padding:44px 16px 28px}
}
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	.btn,.product-card,.product-card__thumb img,.menu-item,.menu-item__thumb img,.cat-list a,.site-nav__list a::after{transition:none}
}