/* ベーススタイル */
body {
	font-family: 'Noto Sans JP', sans-serif;
	margin: 0;
	padding: 0;
	background-color: #f4f7f6; /* 全体の背景色を少し明るいグレー系に */
	color: #333;
	line-height: 1.6;
}

header {
	background-color: #FF6600; /* ヘッダーを鮮やかなオレンジに調整 */
	color: white;
	padding-bottom: 10px;
	text-align: center;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	position: relative;
}

.header-top {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px 0;
	position: relative;
}

.header-content {
	text-align: center;
	flex-grow: 1;
}

header h1 {
	margin: 0;
	font-size: 2.2em;
}

header p {
	font-size: 1.1em;
	margin-top: 5px;
}

/* ハンバーガーメニューボタン */
.menu-toggle {
	display: none; /* デスクトップでは非表示 */
	background: none;
	border: none;
	color: white;
	font-size: 1.8em;
	cursor: pointer;
	padding: 10px;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1000;
}

/* メインナビゲーション */
.main-nav {
	background-color: #E65C00; /* ナビゲーションバーを少し濃いオレンジに調整 */
	padding: 10px 0;
}

.main-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap; /* ここで折り返しを有効にする */
	justify-content: center;
	gap: 10px 15px; /* 上下左右のギャップを設定 */
}

.main-nav ul li a {
	color: white;
	text-decoration: none;
	font-weight: bold;
	padding: 5px 10px;
	border-radius: 4px;
	transition: background-color 0.3s ease;
	white-space: nowrap;
}

.main-nav ul li a:hover {
	background-color: #CC5200; /* ホバー時の色をさらに濃く */
}


main {
	max-width: 1200px;
	margin: 20px auto;
	padding: 0 20px 40px;
}

/* 広告コンテナの共通スタイル */
.ad-container {
//	background-color: #FFFCE0; /* 広告エリアの背景色を薄い黄色に */
//	border: 1px dashed #FFD700; /* 黄色の破線ボーダー */
	padding: 15px;
	margin: 20px auto;
	text-align: center;
	max-width: 728px; /* 一般的な広告サイズの最大幅 */
	box-sizing: border-box; /* パディングを含めて幅を計算 */
}

.ad-container p {
	color: #DAA520; /* 広告表示テキストの色 */
	font-weight: bold;
	margin: 0;
}

/* ページ説明欄 (index.html用) */
.page-description {
	background-color: #FFFDE7; /* 非常に薄い黄色を維持 */
	border-left: 5px solid #FFD700; /* 鮮やかな黄色をアクセントに維持 */
	padding: 20px;
	margin-bottom: 30px;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.page-description h2 {
	color: #DAA520; /* 見出しの色をやや濃い黄色（ゴールド系）に維持 */
	margin-top: 0;
	font-size: 1.6em;
	margin-bottom: 10px;
}

.page-description p {
	font-size: 1.0em;
	color: #555;
	margin-bottom: 5px;
}
.page-description p:last-child {
	margin-bottom: 0;
	font-size: 0.9em;
	color: #777;
}


/* フィルタータブ (index.html用) */
.filter-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 30px;
	justify-content: center;
	background-color: white;
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.tab-button {
	background-color: #F0F0F0; /* 少し明るいグレーを維持 */
	border: none;
	padding: 10px 20px;
	border-radius: 20px;
	cursor: pointer;
	font-size: 1em;
	font-weight: 600;
	color: #555;
	transition: background-color 0.3s ease, color 0.3s ease;
	white-space: nowrap;
}

.tab-button:hover {
	background-color: #E0E0E0; /* ホバー時の色を維持 */
}

.tab-button.active {
	background-color: #FF6600; /* アクティブなタブを鮮やかなオレンジに調整 */
	color: white;
}

.filter-tabs2 {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 30px;
	justify-content: center;
	background-color: white;
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.tab-button2 {
	background-color: #F0F0F0; /* 少し明るいグレーを維持 */
	border: none;
	padding: 10px 20px;
	border-radius: 20px;
	cursor: pointer;
	font-size: 1em;
	font-weight: 600;
	color: #555;
	transition: background-color 0.3s ease, color 0.3s ease;
	white-space: nowrap;
}

.tab-button2:hover {
	background-color: #E0E0E0; /* ホバー時の色を維持 */
}

.tab-button2.active {
	background-color: #FF6600; /* アクティブなタブを鮮やかなオレンジに調整 */
	color: white;
}

/* 店舗リスト (index.html用) */
.store-list {
	display: block; /* 変更: grid から block に */
	/* grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); */ /* 削除 */
	/* gap: 25px; */ /* 削除 */
}

.store-list .store-card { /* 追加: 1列表示用のスタイル */
    width: 100%;
    margin: 0 auto 20px auto; /* 中央揃えと下部の余白 */
}

.store-card {
	background-color: white;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
	padding: 25px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	transition: transform 0.2s ease-in-out;
}

.store-card:hover {
	transform: translateY(-5px);
}

.store-card h2 {
	font-size: 1.6em; /* 1.8em から 1.6em に変更 */
	margin-top: 0;
	margin-bottom: 10px;
}

.store-card h2 a {
	color: #FF6600; /* 店舗名のリンクの色をオレンジに */
	text-decoration: none; /* 下線を非表示 */
	transition: color 0.3s ease;
}

.store-card h2 a:hover {
	color: #E65C00; /* ホバー時に少し濃いオレンジに */
	text-decoration: underline; /* ホバー時に下線を表示 */
}


.store-card .address,
.store-card .tel {
	font-size: 0.95em;
	color: #666;
	margin-bottom: 5px;
}

/* チラシの有無表示 */
.flyer-status {
	font-size: 0.9em;
	font-weight: bold;
	padding: 5px 10px;
	border-radius: 4px;
	margin-top: 10px; /* 他の要素との間にスペース */
	display: inline-block; /* 背景色とパディングを適用するためにブロック要素にする */
}

.flyer-available {
	background-color: #D4EDDA; /* 薄い緑色（チラシあり） */
	color: #155724; /* 濃い緑色 */
}

.flyer-unavailable {
	background-color: #F8D7DA; /* 薄い赤色（チラシなし） */
	color: #721C24; /* 濃い赤色 */
}

/* チラシの種類リンクのコンテナ */
.flyer-links {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px; /* リンク間のスペース */
	width: 100%; /* 親要素の幅いっぱいに広げる */
}

/* チラシの種類個々のリンク */
.flyer-type-link {
	display: inline-block;
	background-color: #F5DEB3; /* 薄い黄土色系 */
	color: #8B4513; /* 茶色系 */
	padding: 6px 12px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 0.85em;
	transition: background-color 0.3s ease, color 0.3s ease;
	border: 1px solid #D2B48C; /* 軽めのボーダー */
//	white-space: nowrap; /* テキストの折り返しを防ぐ */
}

.flyer-type-link:hover {
	background-color: #DAA520; /* ホバーで少し濃い黄色に */
	color: white;
}

/* 「その他のチラシも見る」ボタン */
.more-flyers-view-button {
	display: inline-block;
	background-color: #FF6600; /* 目立つオレンジに */
	color: white;
	padding: 6px 12px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 0.85em;
	transition: background-color 0.3s ease, color 0.3s ease;
	border: none; /* ボーダーをなくす */
//	white-space: nowrap; /* テキストの折り返しを防ぐ */
}

.more-flyers-view-button:hover {
	background-color: #E65C00; /* ホバー時の色 */
	transform: translateY(-1px); /* 少し浮き上がる効果 */
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.more-flyers-view-button i {
	margin-left: 8px; /* テキストとアイコンの間隔 */
}

/* 広報紙リンクのコンテナ */
.tayori-links {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px; /* リンク間のスペース */
	width: 100%; /* 親要素の幅いっぱいに広げる */
}

/* 広報紙の個々のリンク */
.tayori-type-link {
	display: inline-block;
	background-color: #40C000; /* 緑系 */
	color: #FFFFFF; /* 白色系 */
	padding: 6px 12px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 0.85em;
	transition: background-color 0.3s ease, color 0.3s ease;
	border: 1px solid #7D95D9; /* 軽めのボーダー */
//	white-space: nowrap; /* テキストの折り返しを防ぐ */
}

.tayori-type-link:hover {
	background-color: #25866D; /* ホバーで少し濃い緑色に */
	color: white;
}

/* 市町村公式ページへの個々のリンク */
.city-top-link {
	display: inline-block;
	background-color: #20B2AA; /* 青緑色 */
	color: #FFFFFF; /* 白色系 */
	padding: 6px 12px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 0.85em;
	transition: background-color 0.3s ease, color 0.3s ease;
	border: 1px solid #7D95D9; /* 軽めのボーダー */
//	white-space: nowrap; /* テキストの折り返しを防ぐ */
}

.city-top-link:hover {
	background-color: #5F9EA0; /* ホバーで少し濃い色に */
	color: white;
}

/* 献血リンクのコンテナ */
.blood-links {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px; /* リンク間のスペース */
	width: 100%; /* 親要素の幅いっぱいに広げる */
}

/* 献血の個々のリンク */
.blood-type-link {
	display: inline-block;
	background-color: #FF6347; /* オレンジ系 */
	color: #FFFFFF; /* 白色系 */
	padding: 6px 12px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 0.85em;
	transition: background-color 0.3s ease, color 0.3s ease;
	border: 1px solid #FF8C00; /* 軽めのボーダー */
//	white-space: nowrap; /* テキストの折り返しを防ぐ */
}

.blood-type-link:hover {
	background-color: #B22222; /* ホバーで少し濃い緑色に */
	color: white;
}

/* 赤十字センター公式ページへのリンク */
.blood-top-link {
	display: inline-block;
	background-color: #FF69B4; /* ピンク色 */
	color: #FFFFFF; /* 白色系 */
	padding: 6px 12px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 0.85em;
	transition: background-color 0.3s ease, color 0.3s ease;
	border: 1px solid #7D95D9; /* 軽めのボーダー */
//	white-space: nowrap; /* テキストの折り返しを防ぐ */
}

.blood-top-link:hover {
	background-color: #FF1493; /* ホバーで少し濃い色に */
	color: white;
}

/* ページシェアセクション */
.share-page-section {
	background-color: #e0f2f1; /* 柔らかい背景色 */
	padding: 0px 15px 1rem;
	margin: 20px auto;
	max-width: 1200px;
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
	text-align: center;
}

/* SNSシェアボタンのスタイル (共通) */
.share-page-section .share-container {
	max-width: 600px; /* シェアボタンの横幅を制限 */
	margin: 0 auto;
}

.sns-share-buttons {
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px dashed #eee; /* 上部に点線ボーダーを追加 */
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center; /* 中央寄せ */
	width: 100%;
}

.share-button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 15px;
	border-radius: 5px;
	text-decoration: none;
	font-size: 0.9em;
	font-weight: bold;
	color: white;
	transition: opacity 0.3s ease, background-color 0.3s ease;
	white-space: nowrap; /* テキストの折り返しを防ぐ */

	/* アイコン画像を背景として設定するための共通スタイル */
	background-size: 1.1em; /* アイコンのサイズを調整 */
	background-repeat: no-repeat;
	background-position: 8px center; /* アイコンの位置を左に */
	padding-left: 30px; /* アイコン分のスペースを確保 */
}

.share-button.twitter {
	background-color: #222222; /* X (旧Twitter) の背景色を濃いグレーに */
	background-image: url('https://chirashi.valueinfosearch.net/img/icon/icon_x2.png');
}

.share-button.twitter:hover {
	background-color: #000000; /* ホバー時にさらに濃く */
}

.share-button.facebook {
	background-color: #1877F2; /* Facebook の背景色を濃い青に */
	background-image: url('https://chirashi.valueinfosearch.net/img/icon/icon_facebook.png');
}

.share-button.facebook:hover {
	background-color: #0056b3;
}

.share-button.line {
	background-color: #00B900; /* LINE の背景色を濃い緑に */
	background-image: url('https://chirashi.valueinfosearch.net/img/icon/icon_LINE.png');
}

.share-button.line:hover {
	background-color: #009900;
}

/* 上部と下部で余白などを調整したい場合の設定 */
.share-page-section.top-share {
	margin-top: 20px;
	margin-bottom: 30px;
}

.share-page-section.bottom-share {
	margin-top: 30px;
	margin-bottom: 20px;
}

/* 各店舗のSNSシェアボタンのサイズ変更 */
/* .sns-share-buttons.list は HTML の .store-card 内にある SNS シェアボタンにのみ適用されます */
.sns-share-buttons.list .share-button {
	padding: 5px 10px;	 /* パディングを小さくする */
	font-size: 0.8em;	  /* フォントサイズを小さくする */
	margin: 3px;		   /* マージンを小さくする */
	background-size: 1em;  /* アイコンのサイズを調整 */
	background-position: 5px center; /* アイコンの位置を左に */
	padding-left: 25px;	/* アイコン分のスペースを確保 */
}

/* ロード中のインジケーターの色は調整なし */
#loadingIndicator {
	color: #555;
}


/* フッター */
footer {
	text-align: center;
	padding: 20px 0;
	margin-top: 40px;
	background-color: #333;
	color: white;
	font-size: 0.9em;
}

/* フッターナビゲーションのスタイル */
.footer-nav {
	background-color: #555; /* フッターナビの背景色 */
	padding: 15px 20px;
	text-align: center;
	border-top: 1px solid #777;
	margin-top: 30px; /* mainコンテンツとの間隔 */
}

.footer-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex; /* 横並びにする */
	flex-wrap: wrap; /* 画面幅が狭いときに折り返す */
	justify-content: center; /* 中央揃え */
	gap: 15px; /* 項目間の隙間 */
}

.footer-nav li a {
	color: white;
	text-decoration: none;
	font-size: 0.95em;
	padding: 5px 10px;
	border-radius: 4px;
	transition: background-color 0.3s ease;
}

.footer-nav li a:hover {
	background-color: #777;
	text-decoration: underline;
}

/* モバイル対応 */
@media (max-width: 768px) {
	.footer-nav ul {
		flex-direction: column; /* 縦並びにする */
		align-items: center; /* 中央揃え */
	}
	.footer-nav li {
		margin-bottom: 10px; /* 項目間の縦の隙間 */
	}
	.footer-nav li:last-child {
		margin-bottom: 0;
	}
}

/* 既存のフッターのスタイル調整（もしあれば） */
footer p {
	padding: 15px 20px;
	color: #666;
	font-size: 0.85em;
	text-align: center;
	background-color: #333; /* フッター全体の背景色 */
	color: #eee; /* 文字色 */
}

/* 詳細ページ固有のスタイル */

/* パンくずリスト全体のコンテナ */
.breadcrumbs-container {
	margin: 20px auto; /* mainと同じ上下マージン、左右自動で中央寄せ */
	max-width: 1200px; /* mainと同じ最大幅 */
	padding: 0 20px; /* mainと同じ左右パディング */
}

/* 各パンくずリストのスタイル */
.breadcrumbs {
	margin: 0; /* 親コンテナでマージンを管理するため、上下マージンをリセット */
	padding: 10px 20px;
	background-color: #f0f0f0; /* 背景色 */
	border-radius: 5px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	font-size: 0.95em;
	overflow-x: auto; /* 横スクロールは維持（念のため） */
}

/* 2つ目のパンくずリストの上にのみマージンを追加して間隔を調整 */
.breadcrumbs + .breadcrumbs {
	margin-top: 5px; /* ここで2つのパンくずリストの間の距離を調整 (例: 5px) */
}

.breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap; /* 横幅が狭い時に複数行に折り返す */
}

.breadcrumbs li {
	display: inline-flex; /* 矢印との並びを揃える */
	align-items: center;
}

/* 区切り記号を '>' に変更 */
.breadcrumbs li:not(:last-child)::after {
	content: '>'; /* より大きい記号 */
	margin: 0 8px;
	color: #999;
	font-size: 1.2em;
	line-height: 1; /* 中央揃えのため */
}

.breadcrumbs li a {
	text-decoration: none;
	color: #555;
	font-weight: bold;
	transition: color 0.3s ease;
}

.breadcrumbs li a:hover {
	color: #FF6600; /* ホバー時の色 */
	text-decoration: underline;
}

.breadcrumbs li:last-child {
	color: #333; /* 現在のページのテキスト色 */
	font-weight: bold;
}


.store-detail-header {
	text-align: center;
	margin-bottom: 30px;
	padding: 10px 0;
	position: relative; /* 戻るリンクの配置用 */
}

.store-detail-header h2 {
	font-size: 2.2em; /* 店舗名は大きく表示 */
	color: #FF6600;
	margin: 10px 0 0;
}

.back-link {
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	color: #E65C00;
	text-decoration: none;
	font-size: 1.1em;
	font-weight: bold;
	transition: color 0.3s ease;
}

.back-link:hover {
	color: #CC5200;
	text-decoration: underline;
}

.back-link i {
	margin-right: 5px;
}

.store-info-section,
.flyer-list-section {
	background-color: white;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
	padding: 30px;
	margin-bottom: 30px;
}

.store-info-section h3,
.flyer-list-section h3 {
	font-size: 1.8em;
	color: #FF6600;
	margin-top: 0;
	margin-bottom: 20px;
	border-bottom: 2px solid #F0F0F0;
	padding-bottom: 10px;
}

.store-info-card p {
	font-size: 1.1em;
	color: #555;
	margin-bottom: 8px;
}

/* 地図コンテナ */
.map-container {
	position: relative;
	width: 100%;
	/* 縦横比を16:9に設定 (高さ / 幅 * 100%) */
	/* 例: 幅100%に対して高さが56.25%になるように設定 */
	padding-bottom: 56.25%; /* 16:9のアスペクト比 */
	height: 0;
	overflow: hidden;
	margin: 20px 0; /* 上下マージン */
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.store-map {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}


.store-info-card .store-official-link {
	display: inline-block;
	margin-top: 15px;
	background-color: #007bff; /* 青色のボタン */
	color: white;
	padding: 10px 20px;
	border-radius: 5px;
	text-decoration: none;
	font-weight: bold;
	transition: background-color 0.3s ease;
}

.store-info-card .store-official-link:hover {
	background-color: #0056b3;
}

.store-info-card .store-official-link i {
	margin-left: 8px;
}


/* チラシリストコンテナ */
.flyer-cards-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 25px; /* 店舗リストと同様のギャップ */
}

.flyer-card {
	background-color: #f9f9f9; /* チラシカードの背景色をわずかにグレーに */
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	transition: transform 0.2s ease-in-out;
}

.flyer-card:hover {
	transform: translateY(-3px);
}

.flyer-card h4 {
	font-size: 1.4em;
	margin-top: 0;
	margin-bottom: 10px;
}

.flyer-card h4 a {
	color: #FF6600;
	text-decoration: none;
	transition: color 0.3s ease;
}

.flyer-card h4 a:hover {
	color: #E65C00;
	text-decoration: underline;
}

.flyer-card .description {
	font-size: 0.95em;
	color: #666;
	margin-bottom: 15px;
	flex-grow: 1; /* 内容が少ないカードでもボタンが下に揃うように */
}

.flyer-card .flyer-meta {
	font-size: 0.85em;
	color: #888;
	margin-bottom: 15px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 15px;
}

.flyer-card .flyer-meta span i {
	margin-right: 5px;
	color: #FF6600; /* アイコンの色をオレンジに */
}

.flyer-card .view-flyer-button {
	display: inline-block;
	background-color: #FF6600; /* オレンジ色のボタン */
	color: white;
	padding: 10px 15px;
	border-radius: 5px;
	text-decoration: none;
	font-weight: bold;
	margin-top: 8px; /* カード下部に配置 */
	transition: background-color 0.3s ease;
}

.flyer-card .view-flyer-button:hover {
	background-color: #E65C00; /* ホバー時は少し濃いオレンジ */
}

.view-flyer-button i {
	margin-left: 8px;
}

.no-flyer-message {
	text-align: center;
	color: #777;
	font-size: 1.1em;
	padding: 30px;
	background-color: #f0f3f2;
	border-radius: 8px;
}

/* チラシ個数表示のスタイル */
.flyer-count-message {
	text-align: center;
	font-size: 1.1em;
	color: #555;
	margin-top: -10px; /* h3との間隔を調整 */
	margin-bottom: 20px; /* 下の要素との間隔 */
	padding-bottom: 10px; /* border-bottomとの間隔 */
	border-bottom: 1px dashed #ddd; /* 区切り線 */
}


/* レスポンシブデザイン */
@media (max-width: 768px) {
	header h1 {
		font-size: 1.8em;
	}

	header h1 .sub-title {
		display: block;			/* 強制的に改行する */
		font-size: 0.7em;		/* 親のh1のフォントサイズに対して小さく表示 */
		margin-top: 5px;		/* 上に少し余白を持たせる */
		margin-bottom: 10px;		/* 下に少し余白を持たせる */
		font-weight: normal;	/* 太字ではなく通常フォントにする */
		line-height: 1.2;		/* 行間を調整する */
	}

	.header-top {
		justify-content: space-between;
		padding: 15px 20px;
	}

	.menu-toggle {
		display: block; /* モバイルでは表示 */
		position: static;
		transform: none;
	}

	.main-nav {
		max-height: 0; /* デフォルトで非表示 */
		overflow: hidden;
		transition: max-height 0.3s ease-out;
		background-color: #E65C00;
		padding: 0; /* 非表示時はパディングも0に */
	}

	.main-nav.active {
		max-height: 500px; /* 展開時に十分な高さを設定 */
		padding: 10px 0; /* 展開時にパディングを追加 */
	}

	.main-nav ul {
		flex-direction: column; /* 縦並びにする */
		align-items: center;
		gap: 0; /* モバイルではアイテム間のギャップをリセット */
		padding: 0;
	}

	.main-nav ul li {
		width: 100%; /* 全幅を占める */
		text-align: center;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		margin-bottom: 0; /* 各項目間のマージンはaタグのパディングで調整 */
	}

	.main-nav ul li:last-child {
		border-bottom: none;
	}

	.main-nav ul li a {
		display: block;
		padding: 12px 15px; /* タップしやすいようにパディングを確保 */
		width: auto;
	}

	.filter-tabs {
		flex-direction: column;
		align-items: center;
	}

	.tab-button {
		width: 100%;
		margin-bottom: 8px;
	}

	.store-list {
		/* grid-template-columns: 1fr; */ /* 削除: 親要素がblockになったため不要 */
	}

	.store-card {
		padding: 20px;
	}

	.store-card h2 {
		font-size: 1.4em;
	}

	/* モバイルでのチラシ有無表示の調整 */
	.flyer-status {
		font-size: 0.85em;
		padding: 4px 8px;
	}

	/* チラシの種類リンクの調整 */
	.flyer-links {
		flex-direction: column; /* 縦に並べる */
		gap: 5px; /* 縦方向のスペース */
	}
	.flyer-type-link {
		font-size: 0.8em;
		padding: 5px 10px;
		width: fit-content; /* 内容に合わせて幅を調整 */
	}

	/* モバイルでの「その他のチラシも見る」ボタンの調整 */
	.more-flyers-view-button {
		font-size: 0.8em;
		padding: 5px 10px;
		margin-top: 10px;
	}

	/* SNSシェアボタンの調整 (ページ全体のボタン) */
	.sns-share-buttons {
		flex-direction: column; /* モバイルでは縦並び */
//		align-items: stretch; /* 幅いっぱいに広げる */
	}
	.share-button {
		padding: 10px; /* モバイルでタップしやすいように */
		font-size: 1em;
		background-position: 10px center; /* アイコンの位置調整 */
		padding-left: 35px; /* アイコン分のスペース調整 */
	}

	/* 各店舗のSNSシェアボタン（モバイル用）の調整 */
	/* 全幅にならないようにするため、親要素のFlexboxの挙動を上書き */
	.sns-share-buttons.list {
		flex-direction: row; /* ボタン自体は横並びに戻すか、個別調整 */
		flex-wrap: wrap; /* 必要であれば折り返す */
		justify-content: center; /* 中央寄せにする */
		align-items: center; /* アイテムを中央揃えにする */
		width: auto; /* 幅を自動調整 (内容に合わせる) */
		border-top: none; /* 上部の点線ボーダーを削除 */
		padding-top: 0; /* 上部のパディングも削除 */
		margin-top: 10px; /* 他の要素との間隔調整 */
	}
	.sns-share-buttons.list .share-button {
		padding: 8px 12px;	 /* パディングをさらに小さく */
		font-size: 0.85em;	 /* フォントサイズを小さく */
		background-position: 8px center; /* アイコンの位置調整 */
		padding-left: 30px;	/* アイコン分のスペース調整 */
		min-width: unset;	  /* 最小幅の制約を解除 */
		width: auto;		   /* ボタン自体の幅も内容に合わせる */
	}

	/* 詳細ページでのレスポンシブ調整 */
	.store-detail-header {
		padding: 15px 20px;
		text-align: left; /* モバイルでは左寄せに */
	}
	.store-detail-header h2 {
		font-size: 1.8em;
		margin-left: 0; /* 戻るリンク分の余白をなくす */
	}
	.back-link {
		position: static; /* 静的位置に戻し、通常の流れに */
		transform: none;
		display: block; /* ブロック要素にして単独行に */
		margin-bottom: 15px;
	}

	.store-info-section,
	.flyer-list-section {
		padding: 20px;
		margin-bottom: 20px;
	}

	.store-info-section h3,
	.flyer-list-section h3 {
		font-size: 1.5em;
		padding-bottom: 8px;
	}

	.store-info-card p {
		font-size: 1em;
	}

	/* モバイルでの地図の調整 */
	.map-container {
		margin: 15px 0;
		padding-bottom: 75%; /* モバイルでは少し縦長に (例: 4:3のアスペクト比) */
	}

	.flyer-cards-container {
		grid-template-columns: 1fr;
	}

	.flyer-card {
		padding: 15px;
	}
	.flyer-card h4 {
		font-size: 1.2em;
	}
	.flyer-card .description {
		font-size: 0.9em;
	}
	.flyer-card .flyer-meta {
		flex-direction: column; /* 縦並びにする */
		gap: 5px;
		font-size: 0.8em;
	}
	.flyer-card .view-flyer-button {
		padding: 8px 12px;
		font-size: 0.9em;
	}

	.flyer-count-message { /* モバイルでの調整 */
		font-size: 1em;
		margin-bottom: 15px;
	}

	.breadcrumbs-container { /* モバイルでのパンくずリストコンテナのマージン調整 */
		margin: 15px auto;
		padding: 0 15px;
	}

	.breadcrumbs {
		padding: 8px 15px;
		font-size: 0.9em;
	}

	.breadcrumbs li:not(:last-child)::after {
		margin: 0 5px;
		font-size: 1.1em;
	}
}