/* =========================================
   1. Base / Reset
========================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	background: #fff;
	color: #222;
}

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

img {
	max-width: 100%;
	display: block;
}

.wrap {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 1rem;
}

/* メイン背景（カードを浮かせる） */
.main {
	padding: 1rem 0 2.5rem;
	background: #fafafa;
}

.section-title {
	font-size: 1.25rem;
	margin: 0 0 0.8rem;
}

/* =========================================
   2. Header / Global Navigation
========================================= */

.site-header {
	background: #ffffffcc;
	backdrop-filter: blur(12px);
	border-bottom: 1px solid #eee;
	position: sticky;
	top: 0;
	z-index: 200;
	transition: box-shadow 0.25s ease;
}

/* スクロール時の影 */
.site-header.scrolled {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* wrap の中でヘッダー横並び（モバイル〜タブレット） */
.header-inner {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 1rem;
	min-height: 56px;
}

/* ブランドロゴ */
.brand {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 800;
	font-size: 1.15rem;
	text-decoration: none;
	color: #000;
}

.brand .dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #ff006e;
}

/* PC用グローバルナビ（デフォルトは非表示） */
.global-nav {
	display: none;
	gap: 0.75rem;
	margin-left: 1.5rem;
	flex-wrap: wrap;
	max-width: 60%;
}

.global-nav a {
	text-decoration: none;
	color: #333;
	font-size: 0.92rem;
	font-weight: 500;
	white-space: nowrap;
}

.global-nav a:hover {
	color: #ff006e;
}

/* 右側まとめ（SNS + 言語切替） */
.header-right {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-left: auto;
}

/* 言語切替 */
.lang-switch {
	display: flex;
	gap: 0.4rem;
}

.lang-btn {
	border: 1px solid #ddd;
	background: #fff;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	font-size: 0.7rem;
	cursor: pointer;
}

.lang-btn.active {
	border-color: #000;
	font-weight: 700;
}

/* SNSリンク（ヘッダー右側） */
.social-links {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.social-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #f5f5f5;
	transition: background 0.2s ease;
}

.social-links a:hover {
	background: #e5e5e5;
}

.icon-x {
	width: 16px;
	height: 16px;
	fill: #111;
}

/* モバイル・タブレット用カテゴリバー（〜1023pxで表示） */
.mobile-category-nav {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	overflow-x: auto;
	padding: 0.5rem 1rem;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	background: #ffffffee;
	backdrop-filter: blur(10px);
	scroll-snap-type: x mandatory;
	scroll-padding-left: 1rem;
	position: relative;
}

/* スクロールバー非表示 */
.mobile-category-nav::-webkit-scrollbar {
	display: none;
}
.mobile-category-nav {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

/* 各カテゴリチップ（基本形） */
.mobile-category-nav a {
	flex: 0 0 auto;
	font-size: 0.82rem;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: #f3f4f6;
	text-decoration: none;
	color: #444;
	white-space: nowrap;
	scroll-snap-align: start;
	border: 1px solid transparent;
	transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.12s ease,
		border-color 0.18s ease;
}

/* ホバー / タップ時（スマホ寄りの演出） */
.mobile-category-nav a:active,
.mobile-category-nav a:hover {
	background: #ffedf7;
	color: #b4004a;
	border-color: #ff8abf;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
	transform: translateY(-1px);
}

/* アクティブカテゴリ（デフォルト：スマホ用の派手め） */
.mobile-category-nav a.is-active {
	background: #ff006e;
	color: #fff;
	border-color: #ff006e;
	box-shadow: 0 2px 10px rgba(255, 0, 110, 0.5);
	font-weight: 700;
}

/* 左右フェード（スクロールヒント） */
.mobile-category-nav::before,
.mobile-category-nav::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 16px;
	pointer-events: none;
}
.mobile-category-nav::before {
	left: 0;
	background: linear-gradient(to right, #ffffff, transparent);
}
.mobile-category-nav::after {
	right: 0;
	background: linear-gradient(to left, #ffffff, transparent);
}

/* =============================
   タブレット（768〜1023px）は
   赤ベタをやめて落ち着いたデザイン
============================= */
@media (min-width: 768px) and (max-width: 1023px) {
	/* 背景シンプルに */
	.mobile-category-nav {
		background: #ffffff;
		backdrop-filter: none;
	}

	/* フェードOFF（うるさいので） */
	.mobile-category-nav::before,
	.mobile-category-nav::after {
		display: none;
	}

	/* チップを少し大きめ＆フラットに */
	.mobile-category-nav a {
		font-size: 0.9rem;
		padding: 0.35rem 0.95rem;
		background: #f3f4f6;
		color: #444;
		border-color: transparent;
		box-shadow: none;
		transform: none;
	}

	/* ホバーも控えめに */
	.mobile-category-nav a:hover,
	.mobile-category-nav a:active {
		background: #e5e7eb;
		color: #222;
		border-color: transparent;
		box-shadow: none;
		transform: none;
	}

	/* ⭐ アクティブは線＋文字色だけ強調（赤ベタ禁止） */
	.mobile-category-nav a.is-active {
		background: #ffffff;
		color: #ff006e;
		border-color: #ff006e;
		box-shadow: none;
		font-weight: 600;
	}
}

/* 1024px以上でPCナビに切り替え */
@media (min-width: 1024px) {
	/* 高さ・余白を増やしてニュースサイト感アップ */
	.site-header {
		padding-top: 0.6rem;
		padding-bottom: 0.6rem;
	}

	/* 3カラムグリッド：左／中央／右 */
	.header-inner {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: 1.5rem;
		min-height: 72px;
	}

	.brand {
		grid-column: 1 / 2;
		font-size: 1.25rem;
	}

	.global-nav {
		grid-column: 2 / 3;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1.2rem;
		flex-wrap: wrap;
		max-width: 100%;
	}

	.global-nav a {
		font-size: 0.98rem;
		padding: 0.3rem 0;
	}

	.header-right {
		grid-column: 3 / 4;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 0.9rem;
	}

	.social-links a {
		width: 32px;
		height: 32px;
	}

	.lang-btn {
		padding: 0.32rem 0.8rem;
		font-size: 0.75rem;
	}

	/* PCでは横スクロールカテゴリは消す */
	.mobile-category-nav {
		display: none;
	}

	/* グローバルナビは表示 */
	.global-nav {
		display: flex;
	}

	/* PCヘッダー下に薄いグラデーションライン */
	.site-header::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 1px;
		background: linear-gradient(
			to right,
			transparent 0%,
			#e5e5e5 20%,
			#e5e5e5 80%,
			transparent 100%
		);
	}
}

/* 今いるカテゴリを示すアクティブ状態（共通） */
.global-nav a.is-active,
.mobile-category-nav a.is-active {
	color: #ff006e;
	font-weight: 700;
}

/* PCではアクティブリンクに下線バー */
.global-nav a.is-active {
	position: relative;
}
.global-nav a.is-active::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 2px;
	background: #ff006e;
}

/* =============================
   スマホ（〜767px）でも
   赤ベタをやめて読みやすくする
============================= */
@media (max-width: 767px) {
	/* 背景をシンプルに */
	.mobile-category-nav {
		background: #ffffff;
		backdrop-filter: none;
	}

	/* チップ全体を少し大きめ＆フラットに */
	.mobile-category-nav a {
		font-size: 0.9rem;
		padding: 0.35rem 0.95rem;
		background: #f3f4f6;
		color: #444;
		border-color: transparent;
		box-shadow: none;
		transform: none;
	}

	/* ホバー／タップも控えめに */
	.mobile-category-nav a:hover,
	.mobile-category-nav a:active {
		background: #e5e7eb;
		color: #222;
		border-color: transparent;
		box-shadow: none;
		transform: none;
	}

	/* ⭐ アクティブは白背景＋ピンクの文字＆枠線だけ */
	.mobile-category-nav a.is-active {
		background: #ffffff;
		color: #ff006e;
		border-color: #ff006e;
		box-shadow: none;
		font-weight: 600;
	}
}

/* =========================================
   3. Portal Hero / Breaking / Top Tabs
========================================= */

/* ポータルヒーロー（検索付き） */
.portal-hero {
	margin-bottom: 1.8rem;
}

.portal-hero-inner {
	padding: 1.2rem 1rem;
	border-radius: 14px;
	background: radial-gradient(circle at top left, #ffedf7 0, #ffffff 45%, #f3f4ff 100%);
	border: 1px solid #f5d2ea;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.portal-label {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #ec4899;
	margin: 0 0 0.2rem;
}

.portal-title {
	font-size: 1.4rem;
	margin: 0 0 0.4rem;
	line-height: 1.3;
}

.portal-desc {
	font-size: 0.9rem;
	color: #4b5563;
	margin: 0;
}

.portal-search {
	margin-top: 0.2rem;
}

.portal-search-form {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.portal-search-form input[type='search'] {
	flex: 1;
	padding: 0.45rem 0.65rem;
	border-radius: 999px;
	border: 1px solid #d1d5db;
	font-size: 0.85rem;
}

.portal-search-form button {
	padding: 0.45rem 0.9rem;
	border-radius: 999px;
	border: none;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	background: #111827;
	color: #fff;
}

.portal-search-form button:hover {
	opacity: 0.9;
}

.portal-search-note {
	margin: 0.4rem 0 0;
	font-size: 0.78rem;
	color: #6b7280;
}

@media (min-width: 768px) {
	.portal-hero-inner {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.portal-hero-text {
		flex: 1.4;
	}

	.portal-search {
		flex: 1;
	}
}

/* ブレイキングニュースバー */
.breaking-section {
	margin: 0 0 1rem;
}

.breaking-bar {
	background: #ff3860;
	color: #fff;
	padding: 0.45rem 0.75rem;
	border-radius: 6px;
	font-size: 0.85rem;
	font-weight: 600;
}

.breaking-bar a {
	color: #fff;
	text-decoration: underline;
}

.breaking-label {
	font-weight: 800;
	margin-right: 0.5rem;
}

/* トップカテゴリタブ（index） */
.top-tabs {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1rem;
	overflow-x: auto;
	padding-bottom: 0.3rem;
}

.tab-btn {
	flex: 0 0 auto;
	padding: 0.35rem 0.75rem;
	font-size: 0.82rem;
	background: #f2f2f2;
	border: 1px solid #ddd;
	border-radius: 999px;
	cursor: pointer;
}

.tab-btn.active {
	background: #000;
	color: #fff;
	border-color: #000;
}

/* =========================================
   4. Featured (注目記事)
========================================= */

.featured-section {
	margin-bottom: 1.8rem;
}

.featured-list {
	display: grid;
	gap: 0.8rem;
	margin-bottom: 1.2rem;
}

.featured-card {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #eee;
	background: #fafafa;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
	transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.featured-card:hover,
.featured-card:active {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
	border-color: #ddd;
}

.featured-thumb {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 */
	overflow: hidden;
}

.featured-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.featured-body {
	padding: 0.8rem 0.9rem 1rem;
}

.featured-title {
	font-size: 1rem;
	margin: 0 0 0.3rem;
	line-height: 1.45;
}

.featured-meta {
	font-size: 0.75rem;
	color: #888;
	margin-bottom: 0.35rem;
}

.featured-desc {
	font-size: 0.85rem;
	color: #555;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* PCで2列 */
@media (min-width: 768px) {
	.featured-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =========================================
   5. News List / Cards（共通・広告含む）
========================================= */

/* ベースレイアウト */
.news-section {
	margin-bottom: 1.8rem;
}

.news-list {
	display: grid;
	gap: 0.9rem;
}

/* カード本体 */
.news-card {
	display: flex;
	gap: 0.6rem;
	border-radius: 12px;
	padding: 0.55rem;
	border: 1px solid #eee;
	background: #fff;
	min-height: 88px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
	transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease,
		background-color 0.12s ease;
	text-decoration: none;
	color: inherit;
}

/* ホバー・タップ反応 */
.news-card:hover,
.news-card:active {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	border-color: #ddd;
	background-color: #fff;
}

/* サムネイル */
.news-thumb {
	flex: 0 0 42%;
	max-width: 42%;
}

.news-thumb-inner {
	position: relative;
	width: 100%;
	padding-top: 62%; /* だいたい16:10 */
	overflow: hidden;
	border-radius: 6px;
	background: #f3f4f6;
}

.news-thumb-inner img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* テキスト本体 */
.news-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.news-title {
	font-size: 0.9rem;
	margin: 0 0 0.25rem;
	line-height: 1.35;
	font-weight: 600;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* カテゴリ／日付など */
.news-meta {
	font-size: 0.7rem;
	color: #666;
	margin-bottom: 0.2rem;
}

/* タグっぽいドット */
.news-meta::before {
	content: '●';
	display: inline-block;
	margin-right: 0.3rem;
	font-size: 0.6rem;
	color: #ff006e;
}

/* 説明文 */
.news-desc {
	font-size: 0.75rem;
	color: #555;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* PCでは2列 / 縦カードレイアウト */
@media (min-width: 768px) {
	.news-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.news-card {
		flex-direction: column;
	}

	.news-thumb {
		flex: 0 0 auto;
		max-width: 100%;
	}

	.news-thumb-inner {
		padding-top: 56.25%; /* 16:9 */
	}

	.news-title {
		font-size: 1rem;
		-webkit-line-clamp: 2;
	}

	.news-desc {
		-webkit-line-clamp: 4;
	}
}

/* スマホ微調整 */
@media (max-width: 767px) {
	.wrap {
		padding: 0 0.75rem;
	}

	.section-title {
		font-size: 1.2rem;
	}

	.news-title {
		font-size: 0.92rem;
	}

	.news-desc {
		font-size: 0.78rem;
	}
}

/* 広告カード（記事と同じ形で少しトーン変更） */
.news-card.ad-card {
	background: #f9fafb;
	border-radius: 10px;
	border: 1px solid #e5e5eb;
}

/* ad-card 内で news-thumb を使う場合の比率固定 */
.ad-card .news-thumb-inner {
	padding-top: 56.25% !important; /* 16:9固定 */
}

/* =========================================
   6. Special Guides（ポータル下の特集）
========================================= */

.special-guides {
	margin-bottom: 2rem;
}

.special-guides-list {
	display: grid;
	gap: 0.9rem;
}

.special-guide-card {
	display: block;
	padding: 0.85rem 0.9rem;
	border-radius: 12px;
	border: 1px solid #e5e7eb;
	background: #ffffff;
	text-decoration: none;
	color: inherit;
	transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease,
		background-color 0.12s ease;
}

.special-guide-card:hover,
.special-guide-card:active {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
	border-color: #d1d5db;
	background-color: #f9fafb;
}

.special-guide-meta {
	font-size: 0.7rem;
	color: #6b7280;
	margin-bottom: 0.25rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.special-guide-title {
	font-size: 0.95rem;
	margin: 0 0 0.3rem;
	font-weight: 700;
}

.special-guide-desc {
	font-size: 0.82rem;
	color: #4b5563;
	margin: 0;
}

.special-guide-card--coming {
	border-style: dashed;
	border-color: #f97316;
}

.special-guide-card--tour {
	border-color: #22c55e;
}

@media (min-width: 768px) {
	.special-guides-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.special-guides-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* =========================================
   7. Article Page（共通）
========================================= */

.article-wrap {
	max-width: 880px;
	margin: 0 auto;
	padding-top: 1.5rem;
	padding-bottom: 2.5rem;
}

/* 戻るリンク */
.article-breadcrumb {
	font-size: 0.8rem;
	margin-bottom: 0.75rem;
}

.article-breadcrumb a {
	color: #777;
	text-decoration: none;
}

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

/* 見出し部分 */
.article-header {
	margin-bottom: 0.75rem;
}

.article-header h1 {
	font-size: 1.5rem;
	line-height: 1.4;
	margin: 0 0 0.35rem;
}

.article-header .news-meta {
	font-size: 0.8rem;
	color: #888;
}

/* HERO */
.article-hero {
	margin: 0 0 1.2rem;
}

.article-hero picture,
.article-hero img {
	display: block;
	width: 100%;
}

.article-hero img {
	border-radius: 12px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* 本文ベース */
.article-body {
	max-width: 760px;
	margin: 0 auto 3rem;
	font-size: 0.95rem;
	line-height: 1.9;
	color: #222;
}

.article-body p {
	margin: 0 0 1rem;
}

.article-body h2 {
	margin: 2rem 0 0.8rem;
	font-size: 1.2rem;
	line-height: 1.4;
	border-left: 4px solid #ff006e;
	padding-left: 0.6rem;
}

.article-body h3 {
	margin: 1.6rem 0 0.6rem;
	line-height: 1.4;
}

/* 特定ID見出しの余白強め（エリアガイド系） */
.article-body h2[id^='asakusa'],
.article-body h2[id^='iwasaki'],
.article-body h2[id^='koishikawa'],
.article-body h2[id^='rikugien'],
.article-body h2[id^='nakano'],
.article-body h2[id^='goods'],
.article-body h2[id^='route'] {
	margin-top: 2.4rem;
}

/* 引用 */
.article-body blockquote {
	margin: 1.2rem 0;
	padding-left: 0.9rem;
	border-left: 3px solid #eee;
	color: #555;
	font-style: italic;
}

/* Figure / 画像 */
.article-body figure {
	margin: 1.5rem 0;
}

.article-body figure picture {
	display: block;
	width: 100%;
	max-width: 100%;
}

.article-body figure img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: 12px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.article-body figcaption {
	margin-top: 0.4rem;
	font-size: 0.8rem;
	color: #6b7280;
}

.article-body figure a {
	color: #4b5563;
	text-decoration: underline;
	font-size: 0.8rem;
}

/* HEROや章頭の画像を16:9で揃える */
.article-body .article-hero picture,
.article-body .article-hero img,
.article-body h2 + figure picture,
.article-body h2 + figure img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* リスト */
.article-body ul {
	margin: 0 0 1.1rem;
	padding-left: 1.3rem;
}

.article-body li {
	margin: 0.15rem 0;
}

/* Tipボックス */
.article-body .tip-box {
	border-left: 4px solid #ff006e;
	background: #fff7fc;
	padding: 0.85rem 1rem;
	margin: 1.2rem 0;
	font-size: 0.93rem;
	border-radius: 8px;
}

.article-body .tip-box strong {
	font-weight: 700;
}

/* Map埋め込み */
.article-body .map-embed {
	margin: 1.6rem 0;
}

.article-body .map-frame {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.article-body .map-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.article-body .map-note {
	margin-top: 0.5rem;
	font-size: 0.82rem;
	color: #6b7280;
}

/* テーブル（ルート・比較など） */
.article-body .article-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.6rem 0;
	font-size: 0.9rem;
}

.article-body .article-table th,
.article-body .article-table td {
	border: 1px solid #e5e7eb;
	padding: 0.6rem 0.75rem;
	vertical-align: top;
}

.article-body .article-table th {
	background: #f9fafb;
	font-weight: 600;
	white-space: nowrap;
}

.article-body .article-table tr:nth-child(even) td {
	background: #fdfdfd;
}

/* シェアセクション */
.share {
	margin-top: 2rem;
	padding-top: 1.3rem;
	border-top: 1px solid #eee;
}

.share h2 {
	font-size: 1rem;
	margin: 0 0 0.6rem;
}

.share-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.share-buttons a {
	font-size: 0.85rem;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	border: 1px solid #ddd;
	text-decoration: none;
	background: #fafafa;
	transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.share-buttons a:hover,
.share-buttons a:active {
	background: #f0f0f0;
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

/* 関連・人気記事（article下部） */
.related,
.popular {
	margin-top: 2rem;
}

.related .section-title,
.popular .section-title {
	font-size: 1.05rem;
	margin-bottom: 0.7rem;
}

/* Popularリスト（共通） */
.popular-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.popular-item .popular-link,
.popular-list > li > .popular-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.popular-thumb {
	flex: 0 0 96px;
	margin: 0;
}

.popular-thumb img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	object-fit: cover;
}

.popular-meta {
	font-size: 0.85rem;
}

.popular-title {
	font-weight: 600;
	margin-bottom: 0.15rem;
}

.popular-views {
	font-size: 0.75rem;
	opacity: 0.7;
}

/* tags + prev/next */
.article-meta-bottom {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid #eee;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	font-size: 0.8rem;
}

.tags-label {
	font-weight: 600;
	margin-right: 0.3rem;
}

.tag-chip {
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: #f3f3f3;
	border: 1px solid #e0e0e0;
}

.article-nav {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.85rem;
}

.article-nav-link {
	flex: 1;
	padding: 0.4rem 0.6rem;
	border-radius: 6px;
	border: 1px solid #eee;
	text-decoration: none;
	background: #fafafa;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-height: 2.2rem;
}

.article-nav-link.prev {
	justify-content: flex-start;
}

.article-nav-link.next {
	justify-content: flex-end;
}

.article-nav-link:hover {
	background: #f0f0f0;
}

/* Inline Related（本文途中の関連） */
.inline-related {
	margin: 1.5rem 0 2rem;
	padding: 1rem 0.8rem;
	background: #f9fafb;
	border-radius: 10px;
}

.inline-related-title {
	font-size: 1rem;
	margin-bottom: 0.6rem;
}

.inline-related-list .news-card {
	padding: 0.4rem 0;
	border: none;
	box-shadow: none;
}

/* 埋め込みSNS */
.twitter-tweet,
.instagram-media {
	margin: 1.2rem auto !important;
}

/* PC時の微調整 */
@media (min-width: 768px) {
	.article-wrap {
		padding-top: 2rem;
	}

	.article-header h1 {
		font-size: 1.8rem;
	}

	.inline-related {
		padding: 1.2rem 1.4rem;
	}
}

/* スマホ向けフォント縮小 */
@media (max-width: 767px) {
	.article-body {
		padding: 0 0.2rem;
		font-size: 0.92rem;
	}

	.article-body h2 {
		font-size: 1.08rem;
	}
}

/* PCで画像高さを抑える */
@media (min-width: 1024px) {
	.article-body .article-hero img {
		max-height: 480px;
	}
}

/* =========================================
   8. Ad Section（ツアー紹介など共通）
========================================= */

.ad-section {
	margin: 2.5rem 0;
	padding: 1.5rem 1rem;
	background: #fafafa;
	border-radius: 12px;
	border: 1px solid #eee;
}

.ad-section h2 {
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.ad-list {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.ad-card {
	display: flex;
	gap: 1rem;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	padding: 0.9rem;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.ad-card:hover {
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.ad-thumb {
	flex-shrink: 0;
	width: 140px;
	height: 80px;
	overflow: hidden;
	border-radius: 10px;
}

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

.ad-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.3rem;
}

.ad-label {
	display: inline-block;
	background: #ff006e;
	color: white;
	font-size: 0.7rem;
	font-weight: 700;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	margin-bottom: 0.1rem;
}

.ad-title {
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
}

.ad-desc {
	font-size: 0.85rem;
	line-height: 1.45;
	color: #444;
	margin: 0;
}

@media (max-width: 600px) {
	.ad-card {
		flex-direction: column;
		padding: 0.8rem;
	}

	.ad-thumb {
		width: 100%;
		height: 180px;
	}

	.ad-title {
		font-size: 0.95rem;
	}

	.ad-desc {
		font-size: 0.85rem;
	}
}

/* =========================================
   9. Category Page
========================================= */

.category-wrap,
.category-page {
	max-width: 960px;
	margin: 0 auto;
	padding-top: 1.5rem;
	padding-bottom: 2rem;
}

/* パンくず（category-page 用） */
.breadcrumb {
	font-size: 0.85rem;
	margin-bottom: 1rem;
	color: #777;
}

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

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

/* ヘッダー */
.category-header {
	padding: 1rem 0 1rem;
	border-bottom: 1px solid #eee;
	margin-bottom: 1rem;
}

.category-label {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #888;
	margin: 0 0 0.2rem;
}

.category-header h1 {
	font-size: 1.6rem;
	margin: 0 0 0.5rem;
}

.category-desc {
	font-size: 0.9rem;
	color: #555;
	margin: 0 0 0.3rem;
}

.category-count,
.category-count span {
	font-size: 0.8rem;
	color: #888;
}

/* レイアウト（記事一覧＋サイドバー） */
.category-layout {
	display: grid;
	grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr);
	gap: 2rem;
}

.category-main-column {
	min-width: 0;
}

.category-sub-column {
	margin-top: 0.3rem;
}

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

	.category-sub-column {
		margin-top: 2rem;
	}
}

/* カテゴリー用記事カード */
.article-card-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.2rem;
}

.article-card {
	border: 1px solid #eee;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	display: block;
	text-decoration: none;
	color: inherit;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.article-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
	border-color: #ddd;
}

.article-card img {
	width: 100%;
	height: auto;
	display: block;
}

.article-card-body {
	padding: 0.75rem 1rem;
}

.article-card-title {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 0.4rem;
}

.article-card-desc {
	font-size: 0.85rem;
	color: #666;
	margin-bottom: 0.5rem;
}

.article-card-date {
	font-size: 0.75rem;
	color: #999;
}

/* サイドバー人気記事 */
.sidebar-title {
	font-size: 1.1rem;
	margin-bottom: 1rem;
}

.sidebar-popular-list li {
	margin-bottom: 0.7rem;
	font-size: 0.9rem;
}

/* =========================================
   10. Anime Ranking Pages
========================================= */

/* ランキング共通 */
.anime-ranking-page {
	margin-top: 1.5rem;
	margin-bottom: 2.5rem;
}

.anime-ranking-note {
	font-size: 0.9rem;
	color: #666;
	margin: 0 0 0.75rem;
}

.anime-ranking-meta {
	font-size: 0.8rem;
	color: #888;
	margin: 0 0 1rem;
}

.anime-ranking-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

/* 各アイテム */
.anime-ranking-item {
	display: flex;
	gap: 0.75rem;
	border: 1px solid #eee;
	border-radius: 10px;
	padding: 0.6rem 0.8rem;
	background: #fff;
}

.anime-ranking-rank {
	min-width: 2.5rem;
	text-align: center;
	font-weight: 700;
	font-size: 0.9rem;
	color: #ff006e;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	margin-top: 0.1rem;
}

.anime-ranking-main {
	min-width: 0;
}

.anime-ranking-title {
	font-size: 1rem;
	margin: 0 0 0.3rem;
	line-height: 1.35;
}

.anime-ranking-summary {
	font-size: 0.9rem;
	margin: 0 0 0.4rem;
	color: #444;
	line-height: 1.5;
}

.anime-ranking-meta-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.8rem;
	font-size: 0.8rem;
	color: #777;
}

.anime-ranking-meta-item::before {
	content: '• ';
}

/* ランキングページのレイアウト */
.layout {
	display: block;
	margin-top: 1.5rem;
}

.main-column {
	min-width: 0;
}

.sub-column {
	margin-top: 2rem;
}

@media (min-width: 768px) {
	.layout {
		display: grid;
		grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr);
		gap: 1.5rem;
		align-items: flex-start;
	}

	.sub-column {
		margin-top: 0.3rem;
	}
}

/* INDEX用 TOP5 */
.anime-ranking-top {
	margin: 1.8rem 0 2.2rem;
}

.anime-ranking-top-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 0.85rem;
}

.anime-ranking-top-item {
	display: flex;
	gap: 0.4rem;
	padding: 0.25rem 0;
	border-bottom: 1px solid #f0f0f0;
	align-items: flex-start;
}

.anime-ranking-top-rank {
	min-width: 2rem;
	font-weight: 700;
	color: #ff006e;
}

.anime-ranking-top-title {
	font-weight: 600;
	line-height: 1.35;
}

.anime-ranking-top-meta {
	font-size: 0.75rem;
	color: #888;
	margin-top: 0.1rem;
}

/* モバイルで少し詰める */
@media (max-width: 480px) {
	.anime-ranking-item {
		padding: 0.55rem 0.65rem;
	}

	.anime-ranking-title {
		font-size: 0.95rem;
	}
}

/* ========== 検索結果ページ ========== */
.search-section {
	margin-top: 1.5rem;
}

.search-summary {
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
	color: #666;
}

.search-controls {
	margin: 0 0 0.75rem;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
}

.search-controls select {
	font-size: 0.85rem;
	padding: 0.2rem 0.4rem;
	border-radius: 4px;
	border: 1px solid #ddd;
	background: #fff;
}

/* =============================
   タブレットでも横スクロールカテゴリを出す
   768px〜1023px では mobile-category-nav を優先
============================= */
@media (min-width: 768px) and (max-width: 1023px) {
	/* PCナビは消す */
	.global-nav {
		display: none;
	}

	/* 横スクロールカテゴリバーを表示 */
	.mobile-category-nav {
		display: flex;
	}
}

/* ============================
   タブレット幅では光りすぎないデザインに調整
   768px〜1023px
============================ */
@media (min-width: 768px) and (max-width: 1023px) {
	/* 背景：普通の白＋ブラーなし */
	.mobile-category-nav {
		background: #ffffff;
		backdrop-filter: none;
	}

	/* フェードは一旦オフ（うるさく見えるので） */
	.mobile-category-nav::before,
	.mobile-category-nav::after {
		display: none;
	}

	/* チップのベースを落ち着かせる */
	.mobile-category-nav a {
		background: #f3f4f6;
		color: #444;
		border-color: transparent;
		box-shadow: none;
		transform: none;
	}

	/* ホバー／タップもシンプルに（影なし・浮かせない） */
	.mobile-category-nav a:hover,
	.mobile-category-nav a:active {
		background: #e5e7eb;
		color: #222;
		border-color: transparent;
		box-shadow: none;
		transform: none;
	}

	/* アクティブは色だけ強調（影はカット） */
	.mobile-category-nav a.is-active {
		background: #ff006e;
		color: #fff;
		border-color: #ff006e;
		box-shadow: none;
	}
}

/* 今いるカテゴリを示すアクティブ状態 */
.global-nav a.is-active,
.mobile-category-nav a.is-active {
	color: #ff006e;
	font-weight: 700;
}

/* 下線も付けてあげるとより分かりやすい（PC） */
.global-nav a.is-active {
	position: relative;
}

.global-nav a.is-active::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 2px;
	background: #ff006e;
}

/* ヘッダーのガラス風＋スクロール影 */
.site-header {
	background: #ffffffcc;
	backdrop-filter: blur(12px);
	border-bottom: 1px solid #eee;
	position: sticky;
	top: 0;
	z-index: 200;
	transition: box-shadow 0.25s ease;
}

.site-header.scrolled {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* =========================================
   PCヘッダー（1024px以上）
   - ブランド：左
   - カテゴリ：中央
   - SNS & 言語：右
   - 高さに余裕 + グラデーションライン
========================================= */
@media (min-width: 1024px) {
	/* ヘッダー全体を少し高く＆余白多めに */
	.site-header {
		padding-top: 0.6rem;
		padding-bottom: 0.6rem;
	}

	/* 下側にグラデーションの1pxライン */
	.site-header::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 1px;
		background: linear-gradient(
			to right,
			transparent 0%,
			#e5e5e5 20%,
			#e5e5e5 80%,
			transparent 100%
		);
	}

	/* 3カラムグリッド：左／中央／右 */
	.header-inner {
		display: grid;
		grid-template-columns: auto 1fr auto; /* brand | nav | right */
		align-items: center;
		gap: 1.5rem;
		min-height: 72px; /* ちょっと高さアップ */
	}

	/* ブランドは左固定＋少し大きく */
	.brand {
		grid-column: 1 / 2;
		font-size: 1.25rem;
	}

	/* ナビは中央揃え＋余裕ある間隔（PCナビON） */
	.global-nav {
		grid-column: 2 / 3;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1.2rem;
		flex-wrap: wrap; /* 幅が足りないときは2段に逃がす */
		max-width: 100%;
	}

	.global-nav a {
		font-size: 0.98rem;
		padding: 0.3rem 0;
	}

	/* モバイルカテゴリバーはPCでは非表示 */
	.mobile-category-nav {
		display: none;
	}

	/* 右側（SNS + 言語） */
	.header-right {
		grid-column: 3 / 4;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 0.9rem;
	}

	/* SNSアイコン・言語ボタンも少し大きく */
	.social-links a {
		width: 32px;
		height: 32px;
	}

	.lang-btn {
		padding: 0.32rem 0.8rem;
		font-size: 0.75rem;
	}
}
/* ============================
   タブレット用：カテゴリの赤ベタをやめて線だけにする
   768px〜1023px
============================ */
@media (min-width: 768px) and (max-width: 1023px) {
	/* チップ自体を少し大きくして読みやすくする */
	.mobile-category-nav a {
		font-size: 0.9rem;
		padding: 0.35rem 0.95rem;
	}

	/* アクティブは “枠線＋文字色” だけで強調（ベタ塗りしない） */
	.mobile-category-nav a.is-active {
		background: #ffffff; /* ベタ塗りピンク→白 */
		color: #ff006e; /* 文字だけピンク */
		border-color: #ff006e; /* 細いピンクの枠線 */
		font-weight: 600; /* 太字すぎるので少し軽く */
		box-shadow: none;
	}

	/* ホバーも落ち着いたグレー寄りに */
	.mobile-category-nav a:hover,
	.mobile-category-nav a:active {
		background: #f3f4f6;
		color: #222;
		border-color: transparent;
		box-shadow: none;
		transform: none;
	}
}
/* ============================
   楽天ニュース風：カテゴリ色分け
=========================== */
.global-nav a[data-cat='Anime'],
.mobile-category-nav a[data-cat='Anime'] {
	color: #d946ef;
}

.global-nav a[data-cat='Movie'],
.mobile-category-nav a[data-cat='Movie'] {
	color: #ef4444;
}

.global-nav a[data-cat='Streaming'],
.mobile-category-nav a[data-cat='Streaming'] {
	color: #3b82f6;
}

.global-nav a[data-cat='Game'],
.mobile-category-nav a[data-cat='Game'] {
	color: #22c55e;
}

.global-nav a[data-cat='Area guide'],
.mobile-category-nav a[data-cat='Area guide'] {
	color: #f97316;
}

.global-nav a[data-cat='Akihabara'],
.mobile-category-nav a[data-cat='Akihabara'] {
	color: #9333ea;
}

.global-nav a[data-cat='Tours'],
.mobile-category-nav a[data-cat='Tours'] {
	color: #0ea5e9;
}

/* ▼ 抹茶用：正方形で切り抜くレイアウト */
.article-img-square {
	max-width: 400px; /* スマホ時の最大幅（PCでも400pxまで） */
	margin: 0 auto 1.5rem;
}

/* 中の picture を正方形ボックスにする */
.article-img-square picture {
	position: relative;
	display: block;
	width: 100%;
	padding-top: 100%; /* 高さ = 幅 → 正方形 */
	overflow: hidden;
}

/* 画像をボックス一杯に広げてトリミング */
.article-img-square img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.special-topic-block {
	padding: 1.5rem 0;
	margin: 2rem 0;
	background: #fafafa;
	border-radius: 12px;
}

.special-topic-block .special-desc {
	font-size: 0.95rem;
	color: #666;
	margin-bottom: 1rem;
}

.special-topic-list .news-item {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid #eee;
}

.special-topic-list .news-item:last-child {
	border-bottom: none;
}

.special-topic-list .news-item img {
	width: 96px;
	height: 54px;
	object-fit: cover;
	border-radius: 6px;
}
/* ====== HERO画像 16:9固定 ====== */
.article-hero {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin: 0 0 1.5rem;
}

.article-hero picture,
.article-hero img {
	width: 100%;
	height: 100%;
	display: block;
}

.article-hero img {
	object-fit: cover;
	object-position: center;
}

/* Archive Page */
.archive-page {
	padding-top: 1.5rem;
	padding-bottom: 2rem;
}

.archive-header {
	margin-bottom: 1rem;
}

.archive-header h1 {
	font-size: 1.4rem;
	margin: 0 0 0.3rem;
}

.archive-header p {
	margin: 0 0 0.8rem;
	color: #555;
	font-size: 0.9rem;
}

.archive-controls {
	font-size: 0.85rem;
	margin-bottom: 1rem;
}

#archive-sort {
	font-size: 0.85rem;
	padding: 0.2rem 0.4rem;
}

.archive-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.archive-list-group {
	margin-bottom: 1.2rem;
}

.archive-list-group-title {
	font-size: 0.95rem;
	font-weight: 700;
	margin: 0 0 0.4rem;
	color: #374151;
}

.archive-item {
	font-size: 0.88rem;
	padding: 0.25rem 0;
	border-bottom: 1px solid #eee;
}

.archive-item a {
	font-weight: 600;
	text-decoration: none;
}

.archive-item a:hover {
	text-decoration: underline;
}

.archive-meta {
	display: inline-block;
	margin-left: 0.4rem;
	font-size: 0.78rem;
	color: #6b7280;
}

/* =========================
   Footer
========================= */
.site-footer {
	background: #111827; /* ダークグレー系 */
	color: #e5e7eb;
	margin-top: 2rem;
	font-size: 0.85rem;
}

.footer-inner {
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1.3fr));
	gap: 1.5rem;
	padding: 1.6rem 0 1.2rem;
}

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

.footer-logo {
	font-weight: 700;
	margin-bottom: 0.4rem;
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.site-footer .dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #f97316; /* 既存のブランドカラーに合わせて調整 */
	display: inline-block;
}

.footer-desc {
	margin: 0;
	color: #9ca3af;
	line-height: 1.5;
}

.footer-title {
	font-size: 0.9rem;
	margin: 0 0 0.4rem;
	font-weight: 700;
}

.footer-links li + li {
	margin-top: 0.1rem;
}

.footer-links a {
	color: #e5e7eb;
	text-decoration: none;
}

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

.footer-bottom {
	border-top: 1px solid #1f2937;
	background: #020617;
}

.footer-bottom-inner {
	padding: 0.6rem 0 0.8rem;
	text-align: center;
}

.footer-copy {
	color: #6b7280;
}

/* モバイル対応 */
@media (max-width: 720px) {
	.footer-inner {
		grid-template-columns: 1fr 1fr;
		row-gap: 1.2rem;
	}

	.footer-brand {
		grid-column: 1 / -1;
	}

	.footer-bottom-inner {
		font-size: 0.78rem;
	}
}
/* =========================================
   Contact Form
========================================= */

.contact-form {
	margin-top: 1rem;
	padding: 1.2rem;
	background: #ffffff;
	border-radius: 12px;
	border: 1px solid #e5e7eb;
}

.form-row {
	margin-bottom: 1rem;
}

.contact-form label {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
	color: #374151;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
	width: 100%;
	padding: 0.55rem 0.65rem;
	font-size: 0.9rem;
	border-radius: 8px;
	border: 1px solid #d1d5db;
	background: #f9fafb;
	transition: border-color 0.2s, background 0.2s;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
	border-color: #2563eb;
	outline: none;
	background: #ffffff;
}

.contact-form textarea {
	resize: vertical;
	min-height: 120px;
}

.form-note {
	font-size: 0.8rem;
	color: #6b7280;
	margin-top: -0.4rem;
	margin-bottom: 0.6rem;
}

.form-note a {
	color: #2563eb;
}

.form-actions {
	margin-top: 1.2rem;
	text-align: center;
}

/* ========== Shop 共通レイアウト ========== */

.hero-shop {
	margin-top: 1.5rem;
	margin-bottom: 2rem;
	padding: 1.5rem 1.5rem 1.8rem;
	border-radius: 12px;
	background: linear-gradient(135deg, #1f2933, #151925);
	color: #fff;
}

.hero-shop .hero-body h1 {
	font-size: 1.6rem;
	margin-bottom: 0.5rem;
}

.hero-shop .hero-body p {
	margin-bottom: 0.75rem;
	line-height: 1.6;
}

.hero-shop .hero-points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	font-size: 0.9rem;
}

.hero-shop .hero-points li::before {
	content: '•';
	margin-right: 0.3rem;
}

/* ========== フィルターエリア ========== */

.shop-filter {
	margin: 1.5rem 0 1rem;
}

.shop-filter .section-title {
	font-size: 1.2rem;
	margin-bottom: 0.75rem;
}

.shop-filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

#shop-category-filter,
#shop-search {
	flex: 1;
	min-width: 160px;
	padding: 0.55rem 0.7rem;
	border-radius: 8px;
	border: 1px solid #d0d5dd;
	font-size: 0.95rem;
}

/* ========== カードグリッド（商品一覧） ========== */

.shop-list-section {
	margin-bottom: 2rem;
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1rem;
}

.card.shop-card {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
	overflow: hidden;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.card.shop-card a {
	color: inherit;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.card.shop-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.card-thumb {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f3f4f6;
}

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

.card-body {
	padding: 0.75rem 0.9rem 0.85rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.card-title {
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.4;
}

.card-desc {
	font-size: 0.86rem;
	color: #4b5563;
	line-height: 1.5;
	max-height: 3.1em;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 0.2rem;
	font-size: 0.88rem;
}

.card-meta .price {
	font-weight: 600;
	color: #0f766e; /* アクセント系の緑：変えたければOK */
}

/* ========== バッジ ========== */

.badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	font-size: 0.75rem;
	background: #e5e7eb;
	color: #374151;
	white-space: nowrap;
}

.badge-pickup {
	background: #ecfdf3;
	color: #166534;
}

/* ========== 空表示 ========== */

.empty-state {
	margin-top: 1.5rem;
	font-size: 0.95rem;
	color: #6b7280;
	text-align: center;
}

/* ========== 商品詳細ページ ========== */

.product-detail {
	margin-top: 1.8rem;
	margin-bottom: 2.2rem;
}

.product-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr);
	gap: 1.5rem;
	align-items: flex-start;
}

.product-media {
	background: #f9fafb;
	border-radius: 10px;
	padding: 0.75rem;
	box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

.product-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
	object-fit: cover;
}

.product-main {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.product-title {
	font-size: 1.4rem;
	font-weight: 600;
}

.product-price {
	font-size: 1.2rem;
	font-weight: 600;
	color: #0f766e;
}

.product-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.product-desc {
	font-size: 0.95rem;
	line-height: 1.7;
	color: #374151;
}

.product-info {
	list-style: none;
	margin: 0.4rem 0 0.8rem;
	padding: 0;
	font-size: 0.9rem;
	color: #4b5563;
}

.product-info li + li {
	margin-top: 0.25rem;
}

/* ========== 注文フォーム（Akiba受け取り・ホテル配送） ========== */

.order-section {
	margin-top: 0.6rem;
	padding-top: 0.9rem;
	border-top: 1px solid #e5e7eb;
}

.order-section h2 {
	font-size: 1.05rem;
	margin-bottom: 0.6rem;
}

.field-group {
	margin-bottom: 0.8rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.field-group label {
	font-size: 0.88rem;
	color: #111827;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.field-group input[type='text'],
.field-group input[type='email'],
.field-group input[type='date'],
.field-group select,
.field-group textarea {
	padding: 0.5rem 0.6rem;
	border-radius: 8px;
	border: 1px solid #d1d5db;
	font-size: 0.9rem;
	font-family: inherit;
}

.field-group textarea {
	min-height: 80px;
	resize: vertical;
}

.field-note {
	font-size: 0.8rem;
	color: #6b7280;
}

/* ラジオボタン行 */
.radio {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9rem;
	cursor: pointer;
}

/* サマリー */

.order-summary {
	margin-top: 0.4rem;
	margin-bottom: 0.4rem;
	padding: 0.6rem 0.75rem;
	border-radius: 8px;
	background: #f9fafb;
	font-size: 0.9rem;
}

.order-summary p {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0.15rem 0;
}

/* ボタン（既存 .btn-primary があればそちら優先でOK） */

.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.55rem 1.1rem;
	border-radius: 999px;
	border: none;
	background: #0f766e;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.12s ease, transform 0.08s ease, box-shadow 0.08s ease;
	box-shadow: 0 4px 10px rgba(15, 118, 110, 0.25);
}

.btn-primary:hover {
	background: #115e59;
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(15, 118, 110, 0.35);
}

.btn-primary:active {
	transform: translateY(0);
	box-shadow: 0 3px 8px rgba(15, 118, 110, 0.2);
}

/* ========== レスポンシブ ========== */

@media (max-width: 768px) {
	.hero-shop {
		margin-top: 1rem;
		padding: 1.1rem 1rem 1.3rem;
	}

	.hero-shop .hero-body h1 {
		font-size: 1.3rem;
	}

	.product-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.product-media {
		max-width: 420px;
		margin: 0 auto;
	}

	.shop-filter-row {
		flex-direction: column;
		align-items: stretch;
	}
}

@media (max-width: 480px) {
	.card-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}