@charset "UTF-8";
/* ==========================================================================
   base.css — リセット + デザイントークン
   BASE版 ec.jijiya.jp から移植
   ========================================================================== */

/* --------------------------------------------------------------------------
   トークン
   BASE版は PC を 1920px、SP を 375px でデザインし、
   calc(px / var(--screen-w) * 100vw) で全サイズを流動させていた。
   その方式をそのまま引き継ぐ。
   -------------------------------------------------------------------------- */
:root {
	--screen-w: 1920;

	/* ブランド色。ブランドごとに body.brand-xxx で上書きする */
	--brand: #D12F29;
	--brand-dark: #AB0600;
	--brand-deep: #911712;

	--ink: #373737;
	--ink-strong: #252525;
	--ink-deep: #1a1a1a;
	--ink-mute: #999999;

	--accent: #E60012;
	--accent-soft: #e75c5c;
	--accent-pale: #F07F7F;
	--sand: #CFCAAE;
	--teal: #11BEAE;

	--paper: #ffffff;
	--paper-warm: #FFFCFC;
	--paper-gray: #F5F5F5;
	--line: #eeeeee;

	--font-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--font-gothic: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ブランド配色の切り替え。
   HTML を複製せず body class だけで色を差し替える（指示書10項）。 */
body.brand-jijiya {
	--brand: #D12F29;
	--brand-dark: #AB0600;
}

/* ロゴの色に合わせた仮決定（すし市場＝ロゴの緑、ばんばん寿し＝ロゴの赤） */
body.brand-sushi-ichiba {
	--brand: #6FBA2C;
	--brand-dark: #4E8A1C;
}

body.brand-banban-sushi {
	--brand: #E60012;
	--brand-dark: #B3000E;
}

@media (width < 1000px) {
	:root {
		--screen-w: 375;
	}
}

/* --------------------------------------------------------------------------
   リセット
   -------------------------------------------------------------------------- */
/* BASE版の design.css は全体リセットを持たず、ブラウザ既定（content-box）を前提に
   8箇所だけ個別に border-box を指定している。全体に border-box を掛けると
   枠線や内側余白のある要素（ボタン・カードのリンク等）が本家より縮むため、
   自前で作ったページ部品の中だけに限定する。:where() で詳細度を 0 にして
   本家の個別指定を上書きしない。 */
:where(.hubTop, .storeArchive, .storeSingle, .newsArchive, .newsSingle, .pageDefault,
       .inquirySection, .shopArchive,
       .jijiyaPickupSummary, .jijiyaConsentWrap),
:where(.hubTop, .storeArchive, .storeSingle, .newsArchive, .newsSingle, .pageDefault,
       .inquirySection, .shopArchive,
       .jijiyaPickupSummary, .jijiyaConsentWrap) :where(*, *::before, *::after) {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-gothic);
	font-size: 16px;
	line-height: 1.8;
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-size: 100%;
	font-weight: 700;
	line-height: 1.5;
}

p, figure, blockquote, dl, dd {
	margin: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

img, svg, video {
	max-width: 100%;
	height: auto;
	border: 0;
	vertical-align: top;
}

a {
	color: inherit;
	text-decoration: none;
	transition: opacity .3s var(--ease), color .3s var(--ease);
}

a:hover {
	opacity: .75;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
	margin: 0;
}

button {
	background: none;
	border: 0;
	cursor: pointer;
}

table {
	border-collapse: collapse;
	width: 100%;
}

/* キーボード操作時だけフォーカスリングを出す */
:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   ユーティリティ
   -------------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 9999;
	padding: 12px 20px;
	background: var(--brand);
	color: #fff;
	font-weight: 700;
}

.skip-link:focus {
	top: 8px;
}

/* PC / SP の出し分けは全体では指定しない。
   本家は .mv .pc / .bgCloud.sp / nav.pc のように場所ごとに指定していて、
   <header class="pc"> のように「常に表示するもの」にも pc が付いている。
   全体に .pc { display:none } を掛けるとスマホでヘッダーごと消える。 */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* BASE版の文字の基準。本家は BASE システム層の body.shop で指定している。
   design.css の body { font: inherit } より後に読まれても負けないよう、
   本家と同じ body.shop（詳細度 0,1,1）で指定する。
   本家CSSは個別に文字サイズを指定していない要素でこの値を継承している */
body.shop {
	font-size: 13px;
	line-height: 1.6;
}

/* 自前で作ったページ部品は従来どおり 16px / 1.8 を基準にする */
:where(.hubTop, .storeArchive, .storeSingle, .newsArchive, .newsSingle, .pageDefault,
       .inquirySection, .shopArchive,
       .jijiyaPickupSummary, .jijiyaConsentWrap) {
	font-size: 16px;
	line-height: 1.8;
}