/* Reset-ish */
* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	overflow-x: clip;
}

/* または hidden */
img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* 共通リンクスタイル */
a {
	color: #333;
	/* 基本文字色 */
	text-decoration: none;
	/* 下線を消す */
	transition: color 0.2s;
}

a:hover {
	color: #0070f3;
	/* ホバー時の色 */
	text-decoration: underline;
}

/* Base */
body {
	font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", sans-serif;
	color: #222;
	line-height: 1.8;
	background: #fff;
}

.container {
	width: min(1120px, 92%);
	margin-inline: auto;
}

/* Header & Global Nav */
.site-header {
	background: #fff;
	border-bottom: 1px solid #eee;
	position: sticky;
	top: 0;
	z-index: 50;
}

.header-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px 0;
}

.logo img {
	width: 120px;
	height: auto;
}

.hamburger {
	display: none;
	width: 44px;
	height: 44px;
	border: 1px solid #ddd;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
}

.hamburger span {
	display: block;
	height: 2px;
	margin: 7px 8px;
	background: #111;
}

/* nav with icons */
.nav {
	font-weight: 700;
}

.nav ul {
	display: flex;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
}

.nav a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 10px;
	color: #111;
	text-decoration: none;
}

.nav a:hover {
	background: #f3f4f6;
}

.nav a.is-active {
	outline: 2px solid #111;
	outline-offset: -2px;
}

.nav img {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.nav img.ext {
	width: 16px;
	height: 16px;
	opacity: .65;
	margin-left: -2px;
}

/* Breadcrumb + Title */
.breadcrumb {
	font-size: 13px;
	color: #7a7a7a;
	margin: 14px 0 6px;
}

.breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.breadcrumb a:hover {
	text-decoration: underline;
}

.breadcrumb span[aria-hidden] {
	margin: 0 .4em;
}

.page-title {
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	margin: 6px 0 24px;
	padding-bottom: 6px;
	/*border-bottom: 2px solid #111;*/
	width: fit-content;
	margin-inline: auto;
}


.page-title::after {
	content: "";
	display: block;
	height: 3px;
	width: 100%;
	/* タイトル文字幅いっぱい */
	margin-top: 6px;
	background: url("../images/icons/bar.png") center / 100% 100% no-repeat;
	/* → 画像を文字幅にフィットさせて伸縮（repeat-x にしたい場合は /auto 100% 並べでもOK） */
}

/* Hero */
.hero {
	position: relative;
	isolation: isolate;
	height: 300px;
	margin-bottom: 28px;
	/* 背景画像（差し替え可） */
	background: url("../images/icons/hero-bg.jpg") center/cover no-repeat, #f7f7f7;
	border: 1px solid #eee;
	border-left: 0;
	border-right: 0;
}

.hero-inner {
	height: 100%;
	display: grid;
	place-items: center;
	position: relative;
}

.hero-copy {
	font-size: 20px;
	font-weight: 700;
	color: #1850ff;
	text-align: center;
	background: rgba(255, 255, 255, .72);
	padding: 12px 18px;
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.hero-size {
	position: absolute;
	right: 18px;
	bottom: 10px;
	color: #2c3e97;
	font-size: 13px;
}

/* Intro text */
.intro {
	max-width: 820px;
	margin: 0 auto 36px;
	color: #333;
}

/* Section title */
.section-title {
	font-size: 18px;
	letter-spacing: .08em;
	margin: 10px 0 14px;
}

/* Company Profile cards */
.card-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(2, 1fr);
}

.card {
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	transition: transform .1s ease, box-shadow .1s ease;
}

.card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.07);
}

.card .thumb {
	height: 140px;
	display: grid;
	place-items: center;
	background: #f7f7f7;
	color: #666;
	text-align: center;
}

.card .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.card .thumb span {
	opacity: .6;
	font-size: 12px;
}

.card h3 {
	margin: 0;
	opacity: .9;	
	padding: 10px 12px;
	font-size: 15px;
	border-top: 1px solid #f2f2f2;
}

/* OFFICIAL SNS band */
.sns {
	position: relative;
	color: #111;
	background: url("../images/bg.jpg") center/cover no-repeat, #888;
	border-top: 1px solid #eaeaea;
	border-bottom: 1px solid #eaeaea;
	margin-top: 36px;
}

.sns::before {
	/* 少し白いフィルムを被せて淡く */
	content: "";
	position: absolute;
	inset: 0;
}

.sns-inner {
	position: relative;
	padding: 40px 0;
	text-align: center;
}

.sns h2 {
	margin: 0 0 12px;
	font-size: 18px;
	letter-spacing: .12em;
}

.sns-links {
	list-style: none;
	display: flex;
	gap: 20px;
	justify-content: center;
	padding: 0;
	margin: 0;
}

.sns-links a {
	color: #fff;
	text-decoration: none;
	padding: 10px 16px;
}

/* Footer */
.site-footer {
	background: #111;
	color: #d7d7d7;
	padding: 12px 0;
	font-size: 12px;
}

.footer-grid {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(4, 1fr);
}

.site-footer h3 {
	font-size: 12px;
	margin: 0 0 10px;
	color: #fff;
}

.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer a {
	color: #d7d7d7;
	text-decoration: none;
}

.site-footer a:hover {
	text-decoration: underline;
}

/* === サイトマップ（薄いグレー帯） === */
.sitemap {
	background: #e9e9e9;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #d0d0d0;
	padding: 28px 0 20px;
}

.sitemap-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px 36px;
}

.sitemap-col h3 {
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: .06em;
	display: flex;
	align-items: center;
	gap: 8px;
}

.accent-bar {
	width: 6px;
	height: 18px;
	background: #224c9a;
	display: inline-block;
	border-radius: 2px;
}

.sitemap-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	column-gap: 28px;
	column-width: 240px;
}

.sitemap-col li {
	margin: 6px 0;
}

.sitemap-col a {
	color: #2c2c2c;
	text-decoration: none;
}

.sitemap-col a:hover {
	text-decoration: underline;
}

/* === 問い合わせ帯 === */
.contact-band {
	background: #fff;
	border-top: 1px solid #dcdcdc;
}

.contact-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 0;
	align-items: stretch;
}

.contact-left {
	display: grid;
	place-items: center;
	padding: 36px 16px;
	text-align: center;
}

.contact-logo {
	width: 120px;
	height: auto;
	margin-bottom: 14px;
}

.contact-left .postal {
	letter-spacing: .18em;
	margin: 4px 0;
}

/* 右側：黒グラデーションパネル */
.contact-right {
	position: relative;
	z-index: 0;
	color: #fff;
	padding: 34px 28px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* 垂直センター */
	align-items: flex-start;
	gap: 10px;
	/* ボタンと電話の間隔を安定させる */
	background: transparent;
	/* 自身の背景は透明（擬似要素が描画） */
}

/* ← ここがポイント：右端まで伸びる背景 */
.contact-right::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	/* ← 100vw は削除。右端を “ビューポート右端” に合わせる */
	right: calc(50% - 50vw);
	/* 画面右端まで伸ばすがレイアウト幅は増やさない */
	width: auto;
	background: linear-gradient(90deg, #171717 0%, #3b3b3b 70%, #6a6a6a 100%);
	z-index: -1;
}

.btn-mail {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .8);
	background: #fff;
	color: #111;
	text-decoration: none;
	font-weight: 700;
}

.btn-mail img {
	width: 18px;
	height: 18px;
	display: inline-block;
}

.tel {
	font-weight: 800;
	font-size: 28px;
	margin: 14px 0 6px;
}

.hours {
	opacity: .9;
	margin: 0;
}

/* 既存フッターとの区切り */
.site-footer {
	margin-top: 0;
}

@media (max-width: 768px) {
	.sitemap-grid {
		grid-template-columns: 1fr;
	}
}

/* ページ背景: 斜めの薄いグレー（ページ全体の下地） */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	/* 左上→右下 へ薄い帯を作る。比率はお好みで調整可 */
	background: linear-gradient(135deg,
			rgba(0, 0, 0, 0) 0 62%,
			rgba(0, 0, 0, 0.04) 62% 100%);
	z-index: -2;
	pointer-events: none;
}

/* 巨大な縦書き “MONOCHRO” の透かし（PCのみ表示推奨） */
body::after {
	content: "MONOCHRO";
	position: fixed;
	left: -12px;
	/* 文字が少しはみ出すくらいが雰囲気近い */
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	/* 画面の縦中央に揃える */
	font-weight: 900;
	font-size: 220px;
	/* 画面に合わせてお好みで */
	letter-spacing: .08em;
	color: rgba(0, 0, 0, 0.06);
	/* かなり薄く */
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	/* 縦書き方向を左側に見せる */
	z-index: -1;
	/* コンテンツの背面へ */
	pointer-events: none;
}

/* タブレット以下は邪魔になるので非表示 */
@media (max-width: 1200px) {
	body::after {
		display: none;
	}
}

/* モバイルで少しだけ背を高く（任意） */
@media (max-width: 768px) {
	.card .thumb {
		height: 180px;
	}

	.hamburger {
		display: inline-block;
	}

	.nav {
		display: none;
		position: absolute;
		inset: 60px 0 auto 0;
		background: #fff;
		border-bottom: 1px solid #eee;
	}

	.nav.open {
		display: block;
	}

	.nav ul {
		flex-direction: column;
		gap: 0;
	}

	.nav a {
		padding: 14px 18px;
		border-radius: 0;
	}

	.nav img {
		width: 20px;
		height: 20px;
	}

	.card-grid {
		grid-template-columns: 1fr;
	}
}

/* 画像の下に黒帯：.card--band 用 */
.card {
	overflow: hidden;
	border-radius: 12px;
}

.card .thumb {
	height: 140px;
}

.card .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 見出しは通常フローで下に配置（幅いっぱい・角丸） */
.card h3 {
	position: static;
	margin: 0;
	padding: 12px 16px;
	background: #000;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 0 0 12px 12px;
	/* 下だけ角丸 */
	min-height: 44px;
}

/* 右向き山括弧（›）を自動で付与したい場合 */
.card h3::after {
	content: "›";
	font-weight: 800;
	margin-left: 4px;
	opacity: .9;
}

/* ホバーで少し明るく */
.card:hover h3 {
	background: #111;
}

/* まず、左の住所ブロックは常に白 */
.contact-left {
	background: #fff;
}

/* ── デスクトップ（左右2カラム）のときだけ
   右カラムから画面右端へグラデを“はみ出させる” */
.contact-right {
	position: relative;
	z-index: 0;
	background: transparent;
	/* 擬似要素で塗る */
}

.contact-right::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: calc(50% - 50vw);
	/* 画面右端まで伸ばす（横スクロールを出さない） */
	background: linear-gradient(90deg, #171717 0%, #3b3b3b 70%, #6a6a6a 100%);
	z-index: -1;
}

/* ===== Mobile: contact-right をフルブリード背景に ===== */
@media (max-width: 960px) {
	.card-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.footer-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sitemap-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.contact-grid {
		grid-template-columns: 1fr;
	}

	/* 土台は白のまま */
	.contact-band {
		background: #fff;
	}

	/* 本体には背景を塗らない（擬似要素で敷く） */
	.contact-right {
		position: relative;
		background: transparent;
		align-items: center;
		text-align: center;
		padding: 28px 0;
		/* 左右0でOK */
	}

	/* 画面幅いっぱいのグラデを中央基準で展開（左右の余白を消す） */
	.contact-right::before {
		content: "";
		position: absolute;
		inset: 0;
		left: 50%;
		width: 100vw;
		transform: translateX(-50%);
		background: linear-gradient(90deg, #171717 0%, #3b3b3b 70%, #6a6a6a 100%);
		z-index: -1;
	}
}

/* === Recruit: 社風ページ用の軽量スタイル === */

/* 見出し下のリード文 */
.page-lead {
	max-width: 860px;
	margin: 14px auto 26px;
	text-align: center;
	color: #444;
}

/* 5項目のリスト */
.culture-list {
	display: grid;
	gap: 18px;
	margin: 6px 0 28px;
}

.content-block {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 12px;
	padding: 14px 16px;
}

.content-block h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 800;
}

.content-block p {
	margin: 0;
	color: #333;
}

/* ページ内ボタン行 */
.recruit-cta {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 8px 0 34px;
}

.btn-ghost {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 10px;
	border: 1.5px solid #111;
	border-radius: 8px;
	font-weight: 800;
	text-decoration: none;
	color: #111;
}

.btn-ghost:hover {
	background: #111;
	color: #fff;
}

.btn-ghost.is-current {
	background: #111;
	color: #fff;
	cursor: default;
}

.btn-ghost.active {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* レスポンシブ */
@media (max-width: 768px) {
	.recruit-cta {
		grid-template-columns: 1fr;
	}

	.page-lead {
		text-align: left;
	}
}

/* ==== simple center footer (1 line) ==== */
footer {
	background: #111;
	/* お好みで #fff などに変更可 */
	color: #d7d7d7;
	border-top: 1px solid #222;
}

footer .footer-menu {
	max-width: 1120px;
	width: 92%;
	margin: 0 auto;
	padding: 14px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 中央寄せ */
	gap: 20px;
	/* 項目間余白 */
	flex-wrap: nowrap;
	/* 1行キープ */
	white-space: nowrap;
	/* 1行キープ（テキスト折返し防止） */
}

footer .footer-menu a {
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: .06em;
}

footer .footer-menu a:hover {
	text-decoration: underline;
}

footer .footer-menu .copyright {
	opacity: .9;
}

/* 区切り線を入れたい場合（任意） */
footer .footer-menu .privacypolicy {
	display: flex;
	align-items: center;
}

footer .footer-menu .privacypolicy::after {
	content: "";
	width: 1px;
	height: 1.1em;
	background: rgba(255, 255, 255, .25);
	margin-left: 18px;
}

/* すごく狭い端末では2段に落とす（任意） */
@media (max-width: 360px) {
	footer .footer-menu {
		flex-wrap: wrap;
		row-gap: 8px;
		white-space: normal;
	}

	footer .footer-menu .privacypolicy::after {
		display: none;
	}
}

/* ===== Recruit Top ===== */

/* 求人ステータス */
.recruit-status {
	margin: 6px 0 22px;
}

.status-box {
	border: 2px solid #222;
	border-radius: 6px;
	padding: 12px 14px;
	background: #fff;
	font-weight: 700;
}

.status-box p {
	margin: 4px 0;
}

.status-alert {
	color: #e21;
	/* 赤い強調 */
	font-weight: 900;
	text-align: center;
	margin: 12px 0 8px;
}

.status-desc {
	color: #333;
	margin: 0 0 8px;
}

/* セクション見出しに薄い罫線 */
.section-title.with-line {
	padding-bottom: 10px;

	font-size: 24px;
	border-bottom: 2px solid #d7d7d7;
}

.home-topics .section-title {
	display: grid;
	place-items: center;
	font-size: 24px;
	padding: 40px;
}

.home-works .section-title {
	display: grid;
	place-items: center;
	font-size: 24px;
	padding: 40px;
}

.home-info .section-title {
	display: grid;
	place-items: center;
	font-size: 24px;
	padding: 40px;
}

.sns .section-title {
	display: grid;
	place-items: center;
	font-size: 24px;
	padding: 40px;
}

/* RECRUIT INFORMATION グリッド */
.ri-grid {
	display: grid;
	grid-template-columns: 280px 1fr;
	/* ← 左狭め・右広め */
	gap: 28px;
	align-items: start;
}

/* 画面幅に応じて微調整（任意）*/
@media (min-width: 1280px) {
	.ri-grid {
		grid-template-columns: 300px 1fr;
	}
}

@media (max-width: 1024px) {
	.ri-grid {
		grid-template-columns: 260px 1fr;
		gap: 24px;
	}
}

@media (max-width: 960px) {
	.ri-grid {
		grid-template-columns: 1fr;
	}

	/* SPは縦積み */
}

/* 左リストの密度を少し上げる（任意） */
.ri-left .job-list {
	gap: 6px;
}

.ri-left .job-list a {
	padding: 9px 10px;
}

.job-group+.job-group {
	margin-top: 16px;
}

.group-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border: 1px solid #222;
	border-radius: 6px;
	font-weight: 800;
	background: #fff;
	margin-bottom: 8px;
}

.job-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 6px;
}

.job-list a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 10px;
	border-radius: 8px;
	background: #f7f7f7;
	color: #111;
	text-decoration: none;
}

.job-list a::after {
	content: "›";
	font-weight: 800;
	opacity: .8;
}

.job-list a:hover {
	background: #eee;
}

/* 右側ビジュアル枠 */
.hero-panel {
	display: grid;
	place-items: center;
	min-height: 260px;
	border-radius: 8px;
	background: repeating-linear-gradient(135deg, #e7e7e7 0 12px, #efefef 12px 24px);
	color: #666;
	font-weight: 700;
}

/* 下部ボタン（黒塗り） */
.btn-solid {
	background: #111;
	color: #fff !important;
	border-color: #111;
}

.btn-solid:hover {
	opacity: .9;
}

/* レスポンシブ */
@media (max-width: 960px) {
	.ri-grid {
		grid-template-columns: 1fr;
	}

	.hero-panel {
		min-height: 200px;
	}
}

/* 動的詳細パネル */
.job-panel:focus {
	outline: none;
}

.page-subtitle {
	font-size: 18px;
	font-weight: 800;
	margin: 4px 0 12px;
}

/* 画像がある場合 */
.job-hero {
	margin: 0 0 10px;
}

.job-hero img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}

/* 左メニューの現在地強調（既存と同じトーン） */
.job-list a.is-current {
	background: #111;
	color: #fff;
}

/* 動的詳細パネル */
.job-panel:focus {
	outline: none;
}

.page-subtitle {
	font-size: 18px;
	font-weight: 800;
	margin: 4px 0 12px;
}

/* 画像がある場合 */
.job-hero {
	margin: 0 0 10px;
}

.job-hero img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}

/* 左メニューの現在地強調（既存と同じトーン） */
.job-list a.is-current {
	background: #111;
	color: #fff;
}

/* 閉鎖中メニューの見た目（薄くする） */
.job-list a.is-closed {
	opacity: .55;
}

/* 右ペインの共通メッセージ箱 */
.job-closed-notice {
	padding: 16px;
	border: 1px solid #f0d9b5;
	background: #fff8e6;
	border-radius: 8px;
	font-weight: 700;
	text-align: center;
}

/* ---- 選考プロセスの段落レイアウト ---- */
.process-list {
	margin-top: 8px;
}

.process-item+.process-item {
	margin-top: 22px;
}

.process-step {
	font-size: 16px;
	font-weight: 800;
	margin: 0 0 6px;
	line-height: 1.3;
	display: flex;
	align-items: center;
	gap: 12px;
}

/* 小さいバー */
.process-desc {
	margin: 0;
	padding-left: 100px;
	line-height: 1.9;
}


/* ==== kv（ラベル：値）2カラム ==== */
.kv-table {
	display: grid;
	grid-template-columns: minmax(110px, 160px) 1fr;
	/* 左ラベル固定幅／右が可変 */
	column-gap: 22px;
	row-gap: 18px;
	margin-top: 16px;
	margin-left: 20px;
}

.kv-label {
	line-height: 1.6;
	white-space: nowrap;
}

.kv-value {
	line-height: 1.9;
}

.kv-note {
	margin-top: 6px;
	font-size: 13px;
	opacity: .8;
}

/* モバイル：縦並びに */
@media (max-width: 768px) {
	.kv-table {
		grid-template-columns: 1fr;
		row-gap: 14px;
	}

	.kv-label {
		margin-top: 8px;
	}
}

/* モノクロの社風 用の最小調整 */
.lead-block {
	margin-top: 40px;
	margin-bottom: 40px;
	line-height: 1.9;
	font-size: 24px;
	font-weight: 800;
	text-align: center;
	color: #222;
}

@media (max-width: 768px) {
	.lead-block {
		font-size: 18px;
	}
}

.section-stack {
	display: grid;
	gap: 5px;
}

.section-stack .content-block h2 {
	margin-bottom: 8px;
}

/* ===== HERO ===== */
.home-hero {
	position: relative;
	overflow: hidden;
}

.home-hero .hero-track {
	position: relative;
}

.hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .4s ease;

  pointer-events: none;
	
}

.hero-slide.is-active {
	position: relative;
	opacity: 1;
  pointer-events: auto;
}

.hero-slide img {
	width: 100%;
	height: clamp(220px, 40vw, 520px);
	object-fit: cover;
	display: block;
}

.hero-meta {
	position: absolute;
	left: 40px;
	bottom: 28px;
	color: #fff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

.hero-meta h3 {
	font-size: clamp(20px, 3.2vw, 36px);
	margin: 0 0 6px;
}

.hero-sub {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.hero-actions {
	margin-top: 10px;
	display: flex;
	gap: 10px;
}

.hero-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	background: rgba(0, 0, 0, .45);
	color: #fff;
	width: 44px;
	height: 44px;
	border-radius: 50%;
}

.hero-nav.prev {
	left: 10px;
}

.hero-nav.next {
	right: 10px;
}

/* ===== TOPICS ===== */
.home-topics .card-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.metaRow {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
}

.date {
	font-size: 16px;
	opacity: .8;
}

.excerpt {
	margin: .2rem 0 0;
	color: #444;
	font-size: 14px;
	line-height: 1.6;
}

/* ===== WORKS（黒帯） ===== */
.home-works {
	background: #111;
	color: #fff;
	padding: 24px 0 28px;
}

.home-works .section-title.invert {
	color: #fff;
}

.works-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.work-card {
	display: block;
	background: #000;
	border-radius: 10px;
	overflow: hidden;
	color: #fff;
}

.work-card img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.work-meta {
	padding: 10px 12px;
}

.work-meta h3 {
	font-size: 16px;
	margin: 0 0 4px;
}

.work-meta .sub {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 12px;
	opacity: .9;
}

/* ===== INFORMATION ===== */
.info-list {
	display: grid;
	gap: 10px;
	margin-top: 6px;
}

.info-list li {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 14px;
	border-bottom: 1px solid #e9e9e9;
	padding: 12px 0;
}

.info-list .date {
	font-weight: 700;
	color: #111;
}

/* 共通 */
.pill {
	display: inline-block;
	padding: .1em .6em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 12px;
}

.btn-ghost {
	border: 2px solid currentColor;
	background: transparent;
	color: #111;
	padding: 8px 16px;
	border-radius: 999px;
	font-weight: 700;
}

.btn-ghost:hover {
	background: #111;
	color: #fff;
}

.btn-ghost.invert {
	color: #fff;
	border-color: #fff;
}

.btn-ghost.invert:hover {
	background: #fff;
	color: #000;
}

.center-cta {
	display: grid;
	place-items: center;
	margin: 16px 0 2px;
}

/* レスポンシブ */
@media (max-width: 1024px) {
	.home-topics .card-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.works-row {
		grid-template-columns: repeat(2, 1fr);
	}

	.info-list li {
		grid-template-columns: 100px 1fr;
	}
}

@media (max-width: 640px) {
	.home-topics .card-grid {
		grid-template-columns: 1fr;
	}

	.hero-meta {
		left: 16px;
		bottom: 16px;
	}

	.info-list li {
		grid-template-columns: 1fr;
	}
}

/* ==== TOPICS WORKS list ==== */
.topics-banner {
	background: #e9e9e9;
	border-radius: 10px;
	overflow: hidden;
	margin: 6px 0 14px;
}

.topics-banner a {
	display: block;
}

.topics-banner img {
	display: block;
	width: 100%;
	height: clamp(90px, 12vw, 150px);
	object-fit: cover;
}

.topics-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.pager {
	display: flex;
	gap: 8px;
	justify-content: center;
	align-items: center;
	margin: 16px 0;
}

.pager .btn-ghost[aria-current="page"] {
	box-shadow: inset 0 0 0 2px currentColor;
	pointer-events: none;
}

.topics-filters {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	align-items: start;
	margin: 8px 0 4px;
}

.cats {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.cats .pill {
	cursor: pointer;
	user-select: none;
}

.cats .pill.is-active {
	background: #111;
	color: #fff;
}

.topics-search {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

.topics-search input {
	flex: 1 1 auto;
	min-width: 240px;
	max-width: 400px;
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 8px;
}

@media (max-width: 1024px) {
	.topics-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.topics-filters {
		grid-template-columns: 1fr;
	}

	.topics-search input {
		min-width: 0;
	}
}

@media (max-width: 640px) {
	.topics-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== TOPICS 詳細 ===== */
.post-hero img {
	width: 100%;
	height: clamp(200px, 38vw, 500px);
	object-fit: cover;
	border-radius: 10px;
	display: block;
}

.post-title {
	font-size: clamp(20px, 3vw, 28px);
	margin: 12px 0 6px;
}

.post-meta {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.update-note {
	background: #fff6d8;
	border: 1px solid #f1d27a;
	border-radius: 8px;
	padding: 10px 12px;
	margin: 10px 0;
}

/* 本文ブロック */
.post-body h2,
.post-body h3,
.post-body h4 {
	margin: 6px 0;
}

/* ===== 見出しの装飾（TOPICS詳細 などの本文エリア用） ===== */
:root {
	--accent: #3347b7;
	/* 紺寄りのブルー（お好みで） */
	--rule-gray: #e5e6ea;
	/* ベースの薄いグレー */
	--h3-bar-w: 8px;
	/* H3の縦バーの太さ */
	--h4-accent-w: clamp(90px, 20vw, 160px);
	/* H4のカラーライン長 */
}

/* H3：左に縦のアクセントバー */
.post-body h3 {
	position: relative;
	margin: 22px 0 10px;
	padding-left: calc(var(--h3-bar-w) + 12px);
	font-size: clamp(18px, 2.2vw, 24px);
	line-height: 1.4;
}

.post-body h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: .15em;
	bottom: .15em;
	width: var(--h3-bar-w);
	background: var(--accent);
	border-radius: 999px;
}

/* H4：下にカラーライン + 全幅の薄いグレーの罫線 */
.post-body h4 {
	position: relative;
	margin: 20px 0 10px;
	padding-bottom: 10px;
	font-size: clamp(16px, 1.9vw, 20px);
	line-height: 1.5;
	font-weight: 800;
}

/* ベースの薄いグレー線（全幅） */
/*
.post-body h4::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--rule-gray);
	border-radius: 2px;
}
*/
/* 左側だけ太めのカラーラインを重ねる */
/*
.post-body h4::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: var(--h4-accent-w);
	height: 6px;
	background: var(--accent);
	border-radius: 3px;
	z-index: 1;
}
*/

/* ——「H4は一色でOK」なページだけに使う簡易スイッチ —— */
/* 本文コンテナに .h4-solid を付けるとカラーラインのみになります */
.post-body.h4-solid h4::after {
	display: none;
}

/* グレー線を消す */
.post-body.h4-solid h4::before {
	width: 100%;
}

/* 下線を全幅に */

.media-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	align-items: start;
}

.media-row img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}

@media (max-width: 800px) {
	.media-row {
		grid-template-columns: 1fr;
	}
}

.link-buttons {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.link-buttons a {
	text-decoration: none;
}

.related-cards {
	margin: 22px 0 6px;
}

/* 表風レイアウト */
.table-like>div {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 12px;
	padding: 10px 12px;
	border-bottom: 1px solid #eee
}

.table-like strong,
.table-like dt {
	font-weight: 700
}

/* 年表 */
.timeline>div {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px dotted #e7e7e7
}

.timeline dt {
	font-weight: 700
}

/* 事業ボックス */
.feature-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px
}

.feature .thumb img {
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	border-radius: 10px
}

/* SNS */
.sns-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px
}

.sns-box {
	display: flex;
	gap: 12px;
	align-items: center;
	background: #f7f7f7;
	border-radius: 12px;
	padding: 12px
}

.sns-ico {
	width: 36px;
	height: 36px
}

/* アクセス */
.step-gallery {
	margin: 0;
	padding-left: 1.2em;
	line-height: 1.9
}

.center-cta {
	display: grid;
	place-items: center;
	margin: 14px 0
}

@media (max-width:1024px) {
	.feature-row {
		grid-template-columns: 1fr 1fr
	}

	.sns-grid {
		grid-template-columns: 1fr
	}
}

@media (max-width:640px) {

	.table-like>div,
	.timeline>div {
		grid-template-columns: 1fr
	}

	.feature-row {
		grid-template-columns: 1fr
	}
}

/* Contact */
.notice ul {
	margin: 8px 0 0 1.2em;
	line-height: 1.8;
}

.form-grid {
	display: grid;
	gap: 12px;
	max-width: 760px;
}

.form-row {
	display: grid;
	gap: 6px;
}

.form-row input,
.form-row select,
.form-row textarea {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 16px;
}

.error {
	color: #d33;
}

.form-actions {
	margin-top: 8px;
}

/* ===== Section Title Decorations ===== */
:root {
	--accent: #3347b7;
	/* アクセント色 */
	--rule: #e7e7ec;
	/* 薄いグレーの罫線 */
}

/* 共通ベース（既存の .section-title に上書きしてOK） */
.section-title {
	position: relative;
	display: inline-block;
	font-weight: 800;
	letter-spacing: .08em;
	line-height: 1.3;
}

/* 1) underline：下に細い罫線＋左側だけ太いアクセントライン */
.section-title.deco-underline {
	padding-bottom: 12px;
}

.section-title.deco-underline::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--rule);
	border-radius: 2px;
}

.section-title.deco-underline::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: clamp(120px, 30vw, 220px);
	height: 6px;
	background: linear-gradient(90deg, var(--accent), rgba(51, 71, 183, 0.05));
	border-radius: 3px;
	z-index: 1;
}

/* 2) tag：見出しを“タグ”風に。カード上に置くと映えます */
.section-title.deco-tag {
	padding: 8px 14px;
	border: 2px solid var(--accent);
	border-radius: 12px;
	background: linear-gradient(#fff, #fafafa);
	box-shadow:
		0 1px 0 rgba(0, 0, 0, .06),
		inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* 3) rail：文字の左に縦バー＋右へスーッと伸びるレール */
.section-title.deco-rail {
	padding-left: 16px;
}

.section-title.deco-rail::before {
	content: "";
	position: absolute;
	left: 0;
	top: .2em;
	bottom: .2em;
	width: 6px;
	background: var(--accent);
	border-radius: 999px;
}

.section-title.deco-rail::after {
	content: "";
	position: absolute;
	left: calc(16px + 6px + 10px);
	right: -8px;
	top: 50%;
	height: 1px;
	background: linear-gradient(90deg, var(--accent), transparent);
	transform: translateY(-50%);
}

/* ダーク背景に置く場合は色を少し強めに */
.dark .section-title.deco-underline::after {
	background: rgba(255, 255, 255, .18);
}

.dark .section-title.deco-underline::before {
	background: linear-gradient(90deg, #fff, rgba(255, 255, 255, .08));
}

.dark .section-title.deco-tag {
	background: rgba(255, 255, 255, .06);
}

.dark .section-title.deco-rail::after {
	background: linear-gradient(90deg, #fff, transparent);
}

/* ピースのリンク並び – 既存の btn-ghost を横並びに */
.link-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 12px;
}

/* PRODUCT */
.product-hero img {
	width: 100%;
	height: clamp(220px, 40vw, 500px);
	object-fit: cover;
	border-radius: 12px
}

.info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
	margin-bottom: 12px
}

.info-grid>div {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 8px
}

.chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px
}

.chip {
	border: 1px solid #ddd;
	border-radius: 999px;
	padding: 6px 10px;
	font-size: 14px;
	line-height: 1
}

.sns-chips a {
	display: inline-flex;
	align-items: center;
	gap: 6px
}

.official-cta {
	padding-top: 12px;
}

.product-tabs {
	display: flex;
	gap: 10px;
	margin-bottom: 12px;
	overflow-x: auto;
	padding-bottom: 4px;
	/* タイトルが多いとき横スクロール */
	-webkit-overflow-scrolling: touch;
}

.product-tabs button {
	appearance: none;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 6px 12px;
	background: #fff;
	white-space: nowrap;
}

.product-tabs .active {
	background: #111;
	color: #fff;
	border-color: #111;
}

.seg {
	display: flex;
	gap: 6px;
	margin-bottom: 10px
}

.seg button {
	border: 1px solid #ddd;
	background: #fff;
	border-radius: 999px;
	padding: 6px 12px
}

.seg .active {
	background: #111;
	color: #fff;
	border-color: #111
}

/* ===== PRODUCT 微調整 ===== */

/* 1) 基本情報を 3 + 1 行に */
.info-grid {
	display: grid;
	gap: 12px 18px;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-areas:
		"release genre rating"
		"publisher publisher publisher";
	align-items: center;
}

.info-grid .cell {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 10px
}

.cell-release {
	grid-area: release
}

.cell-genre {
	grid-area: genre
}

.cell-rating {
	grid-area: rating
}

.cell-publisher {
	grid-area: publisher
}

/* 2) 公式サイトボタンに余裕を */
.official-cta {
	margin-top: 18px;
	display: flex;
	justify-content: center
}

.official-btn {
	padding: 12px 26px;
	border-width: 2px;
	font-weight: 800;
	letter-spacing: .04em;
	border-radius: 999px
}

.official-btn::after {
	content: "↗";
	margin-left: .5em;
	font-size: .9em;
}

/* 3) Title SNS：四角い黒ベースに支給アイコン */
#p-sns a.sns-icon {
	display: inline-grid;
	place-items: center;
	padding: 12px;
}

#p-sns a.sns-icon img {
	/*width: 40px;*/
	height: 40px;
	display: block
}

/* 4) レスポンシブ（狭幅は1カラム） */
@media (max-width: 800px) {
	.info-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"release"
			"genre"
			"rating"
			"publisher";
	}

	.info-grid .cell {
		grid-template-columns: 96px 1fr
	}
}

/* ===== OFFICIAL SNS（背景＋アイコン） ===== */
.sns .sns-inner {
	position: relative;
	padding-top: 100px;
	padding-bottom: 100px;
}

.sns-links {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	align-items: center;
}

.sns-links li a {
	display: grid;
	place-items: center;
}

.sns-links img {
	display: block
}

.sns-links .btn-ghost {
	padding: 0 0px;
	display: inline-grid;
	place-items: center;
	border-radius: 12px
}

/* === DEVCO: one-row card (left thumb + right texts) ==================== */
/* apply to devco page: <div id="devco-grid" class="card-grid row-mode"> */
#devco-grid.card-grid.row-mode {
	grid-template-columns: 1fr;
	/* one card per row */
	max-width: 1200px;
	margin-inline: auto;
	gap: 24px;
}

.devco-card.devco-row {
	display: grid;
	grid-template-columns: 360px 1fr;
	/* left fixed, right flexible */
	gap: 0px;
	align-items: stretch;
	border-radius: 12px;
	overflow: hidden;
	/* clip image & band to rounded corners */
	background: #fff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .05);
}

/* left media */
.devco-card.devco-row .thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	/* height follows width, equal for all */
	width: 100%;
	background: #f4f5f7;
}

.devco-card.devco-row .thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* 見出しは通常フローで下に配置（幅いっぱい・角丸） */
.devco-card.devco-row h3 {
	position: static;
	margin: 0;
	padding: 12px 16px;
	background: #000;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* 下だけ角丸 */
	min-height: 44px;
}

/* right content */
.devco-card.devco-row .card-body {
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 0px;
}

/* バッジを右下に固定（カード全体を相対基準に） */
.devco-card.devco-row {
	position: relative;
}

.devco-card.devco-row .badge {
	position: absolute;
	right: 16px;
	bottom: 14px;
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border: 1px solid #d4d7dc;
	border-radius: 999px;
	background: #fff;
	color: #111;
	font-weight: 700;
	font-size: 12px;
	pointer-events: none;
	/* クリック系とは独立 */
}

/* バッジとボタン行が重ならないよう少し余白を確保したいとき（任意） */
.devco-card.devco-row .card-body {
	padding-bottom: 36px;
}

/* chips row (genre / platform etc.) */
.devco-card.devco-row .chips {
	display: flex;
	gap: 10px;
	flex-wrap: wrap
}

.devco-card.devco-row .chip {
	display: inline-block;
	font-size: 14px;
	line-height: 1;
	border: 1px solid #E1E4EA;
	background: #fff;
	color: #222;
	border-radius: 999px;
	padding: 9px 12px;
	font-weight: 700;
}

.devco-card.devco-row .chip:hover {
	background: #111;
	color: #fff;
	border-color: #111
}

/* devcoeration roles text */
.devco-card.devco-row .roles {
	font-size: 18px;
	line-height: 1.7;
	color: #111;
}

/* small CTA buttons */
.devco-card.devco-row .btn-row {
	margin-top: auto;
	display: flex;
	gap: 10px;
	flex-wrap: wrap
}

.devco-card.devco-row .btn-chip {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	border: 1px solid #ddd;
	border-radius: 999px;
	padding: 10px 14px;
	background: #fff;
	color: #111;
	text-decoration: none;
}

.devco-card.devco-row .btn-chip:hover {
	background: #111;
	color: #fff;
	border-color: #111
}

/* responsive */
@media (max-width: 1100px) {
	.devco-card.devco-row {
		grid-template-columns: 320px 1fr;
	}
}

@media (max-width: 900px) {
	.devco-card.devco-row {
		grid-template-columns: 1fr;
	}

	.devco-card.devco-row .thumb {
		aspect-ratio: 16/9;
	}
}

/* ===== 定義リスト版（dl） ===== */
.devco-card .meta-grid {
	display: grid;
	grid-template-columns: 15.5ch 1fr;
	/* モバイルは1列分（ラベル/値） */
	gap: 8px 16px;
	margin: 4px 0 14px;
}

.devco-card .meta-grid dt {
	font-weight: 700;
	color: var(--ink-2, #333);
	white-space: nowrap;
}

.devco-card .meta-grid dd {
	margin: 0;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

/* -------------------------
   TOPICS カード（一覧/ホーム共通）
-------------------------- */
.card-grid.topics-grid {
	--col: 3;
	display: grid;
	grid-template-columns: repeat(var(--col), minmax(0, 1fr));
	gap: 28px;
}

@media (max-width: 1024px) {
	.card-grid.topics-grid {
		--col: 2;
	}
}

@media (max-width: 640px) {
	.card-grid.topics-grid {
		--col: 1;
	}
}

.topic-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
	overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease;
}

.topic-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}

.topic-card a.card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.topic-card .thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	/* 画像比固定 */
	overflow: hidden;
}

.topic-card .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.topic-card .body {
	padding: 16px 20px 18px;
}

.topic-card .title {
	font-size: clamp(18px, 2vw, 22px);
	font-weight: 800;
	line-height: 1.35;
	margin: 4px 0 10px;
}

.topic-card .meta {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: space-between;
}

.topic-card .meta .date {
	color: #7a7f87;
	font-weight: 600;
	letter-spacing: .02em;
}

.topic-card .pill {
	display: inline-flex;
	align-items: center;
	border: 1px solid #d4d7dc;
	color: #111;
	background: #fff;
	padding: 6px 12px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 12px;
}

/* ホームの TOPICS（同じカードでOK） */
#home-topics.card-grid {
	gap: 24px;
}

.works-search {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

.works-search input {
	flex: 1 1 auto;
	min-width: 240px;
	max-width: 400px;
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 8px;
}

.works-filters {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	align-items: start;
	margin: 8px 0 4px;
}

.works-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

@media (max-width: 1024px) {
	.works-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.works-filters {
		grid-template-columns: 1fr;
	}

	.works-search input {
		min-width: 0;
	}
}

@media (max-width: 640px) {
	.works-grid {
		grid-template-columns: 1fr;
	}
}

.form-status {
	margin-top: 8px;
	font-size: 18px;
}

.form-status.is-info {
	opacity: .9
}

.form-status.is-success {
	color: #107c10
}

.form-status.is-warn {
	color: #b25c00
}

.form-status.is-error {
	color: #b00020
}

.btn-ghost[disabled] {
	opacity: .6;
	cursor: not-allowed
}

.is-submitting .btn-ghost {
	pointer-events: none
}

.store-heading {
  font-size: 1rem;
  font-weight: bold;
  margin: 0 0 6px;
}

.store-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}