/* ベーススタイル */
body {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
	margin: 0;
	padding: 0;
	background-color: #FFFBEA; /* 全体の背景色をクリームイエローに */
	color: #333;
	line-height: 1.6;
}

header {
	background-color: #FF8C00; /* ヘッダーをより明るいオレンジに */
	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;
}

/* 都道府県名のラベル */
.prefecture-label {
	font-size: 0.8rem;
	color: #480000;
	margin-bottom: 2px;
}

header h1 {
	margin: 0;
	font-size: 1.4rem;
	line-height: 1.3;
}

header h1 .sub-title {
	display: block;
	font-size: 0.8rem;
	font-weight: normal;
	color: #480000;
	margin: 5px 0;
}

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: #EF7C00; /* ヘッダーより少し濃いオレンジ色に設定 */
	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: #D65C00; /* ホバー時の色を濃いオレンジに変更 */
}

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

/* 広告コンテナの共通スタイル */
.ad-container {
	padding: 10px;
	margin: 20px auto;
	text-align: center;
	max-width: 728px; /* 一般的な広告サイズの最大幅 */
	min-height: 170px; /* 150-200pxの間で調整 */
	box-sizing: border-box; /* パディングを含めて幅を計算 */
}
/* デスクトップ向け（画面幅が広い場合：高さを確保） */
@media screen and (min-width: 768px) {
	.ad-container {
		min-height: 250px; /* 200-280pxの間で調整 */
	}
}

/* --- 1. 広告ラベル（共通） --- */
.ad-label {
	font-size: 11px;
	color: #888;
	margin-bottom: 5px;
	text-align: center;
	display: block;
}

/* 2. 広告枠のサイズ指定 */
/* デフォルト設定：モバイル（スマホ）用 */
.ads-std-format {
	width: 100%;
	height: 140px;
}

/* PC（デスクトップ）用のサイズ指定 */
@media screen and (min-width: 768px) {
	.ads-std-format {
		width: 100%;	/* 親要素の幅いっぱいに広げる */
		max-width: 728px;
		height: 250px;	/* PCでは250pxの高さを確保して、大きな広告も許可 */
	}
}

/* --- 3. ページ上部広告 (top-ad) の個別調整 --- */
/* スマホ（デフォルト）設定 */
.top-ad, .in-list-ad {
	background-color: #f9f9f9; /* ごく薄いグレー */
	margin-top: 10px;
	margin-bottom: 30px;
	/* 広告(140px) + ラベル(約15px) + 余白 で 180px程度を確保 */
	min-height: 180px !important; 
}

/* PC（デスクトップ）設定 */
@media screen and (min-width: 768px) {
	.top-ad, .in-list-ad {
		min-height: 280px !important; /* PC用：ラベル+広告(250px)+余白 */
	}
}

.middle-ad, .bottom-ad {
	/* 画面両端にSNSボタンと同等のマージンを作る */
	width: 100% !important; 
	margin: 20px auto !important; 

	/* 広告が枠からはみ出さないようにガード */
	overflow: hidden;

	/* 背景色をサイトの背景（薄いベージュ系）に合わせるとより自然です */
	background-color: transparent; 
}

/* --- 4. リスト内広告 (in-list-ad) の個別調整 --- */
.in-list-ad {
	background-color: #fcfcfc; /* コンテンツと区別するための背景色 */
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	margin: 15px 10px;
}

.ad-container p {
	color: #FFD700; /* 広告表示テキストを鮮やかなゴールドイエローに */
	font-weight: bold;
	margin: 0;
}

/* ページ説明欄 */
.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: #FF8C00; /* 見出しの色をメインカラーのオレンジに */
	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;
}

/* フィルタータブ */
.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: #D0D0D0; /* ホバー時の色を維持 */
}

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

/* ------------------------------------------- */
/* **** 新しい階層型地域選択メニューのスタイル **** */
/* ------------------------------------------- */
.region-selector-ui, .genre-selector-ui {
	padding: 15px;
	border: 1px solid #ddd;
	border-radius: 8px;
	background-color: #ffffff; /* 背景色を白に */
	display: flex; /* 要素を横並びにする */
	gap: 20px; /* 要素間のスペース */
	align-items: flex-end; /* 垂直方向の下揃え（ボタンに合わせる） */
	margin: 20px 0;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.selector-group {
	display: flex;
	flex-direction: column;
	flex-grow: 1; /* 幅を広げる */
}

.selector-group label {
	font-weight: bold;
	margin-bottom: 5px;
	font-size: 0.9em;
	color: #333;
}

.region-selector-ui select, .genre-selector-ui select {
	padding: 10px 12px;
	border-radius: 4px;
	border: 1px solid #ccc;
	font-size: 1em;
	width: 100%; /* 親要素に合わせて幅いっぱいにする */
	background-color: white;
	cursor: pointer;
}

#search-button {
	padding: 10px 20px;
	border: none;
	border-radius: 4px;
	font-weight: bold;
	cursor: pointer;
	background-color: #d90000; /* しまむらを意識した赤 */
	color: white;
	min-width: 120px;
	height: 40px; /* select要素と高さを合わせる */
	line-height: 20px; /* テキストを垂直中央に */
	transition: background-color 0.2s;
}

#search-button:disabled {
	background-color: #ccc;
	cursor: not-allowed;
}

/* レスポンシブ対応 (画面幅が狭い場合は縦並びにする) */
@media (max-width: 768px) {
	.region-selector-ui, .genre-selector-ui {
		flex-direction: column;
		gap: 15px;
		align-items: stretch;
	}
	.selector-group {
		width: 100%;
	}
	#search-button {
		width: 100%;
		height: auto;
		line-height: normal;
		padding: 12px 20px;
	}
}

/* 店舗リスト (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: inherit;
	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 h3 {
	font-size: 1.6em; /* 1.8em から 1.6em に変更 */
	margin-top: 0;
	margin-bottom: 10px;
}

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

.store-card h3 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.85rem;   /* ボタンのサイズ感に合わせる */
	font-weight: bold;
	padding: 6px 12px;
	border-radius: 20px;  /* ボタンと同じ丸みにして統一感を出す */
	margin-top: 10px;
	display: inline-block;
}

/* チラシなし */
.flyer-unavailable {
	background-color: #eee; /* 穏やかなライトグレー */
	color: #666;           /* 控えめなダークグレー */
	border: 1px solid #ddd;
}

/* チラシの有無表示 */
.flyer-status {
	font-size: 0.85rem;   /* ボタンのサイズ感に合わせる */
	font-weight: bold;
	padding: 6px 12px;
	border-radius: 20px;  /* ボタンと同じ丸みにして統一感を出す */
	margin-top: 10px;
	display: inline-block;
}

/* チラシなし：エラー感を出さず、控えめに伝える */
.flyer-unavailable {
	background-color: #eee; /* 穏やかなライトグレー */
	color: #666;           /* 控えめなダークグレー */
	border: 1px solid #ddd;
}

/* チラシリンクエリア全体の余白 */
.flyer-links {
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px dashed #ddd;
}

/* チラシ1枚ごとのブロック：常に1行1ユニット */
.flyer-unit {
	margin-bottom: 12px;
	width: 100%; /* PCでも幅いっぱいに使う */
}
.flyer-unit:last-child {
	margin-bottom: 0;
}

/* チラシのタイトルテキスト */
.flyer-title-text {
font-size: 1.15rem;    /* サイズをさらにアップ（1.05 → 1.15） */
	font-weight: normal;   /* 太字を解除してスッキリさせる */
	color: #000;           /* 色を最も濃くして視認性を最大化 */
	margin: 4px 0 10px 0 !important; /* 上下に少し余裕を持たせる */
	line-height: 1.4;
	display: block;
	letter-spacing: 0.03em; /* 字間をわずかに広げ、一文字ずつを判別しやすく */
}

/* ボタンの横並びエリア */
.flyer-buttons {
	display: flex;
	gap: 10px;
	flex-wrap: wrap; /* ボタンは絶対に改行させず横並び */
	justify-content: flex-start; /* 左寄せ */
}

/* ボタン共通設定：3つ並びを想定 */
.flyer-btn-digital, .flyer-btn-pdf, .flyer-btn-coupon {
	flex: 0 1 120px;    /* 最大120px、幅が足りなければ縮む */
	min-width: 100px; /* ただし、100pxより小さくはさせない */
	text-align: center;
	justify-content: center;
	padding: 8px 0;
	font-size: 0.75rem; /* 3つ並んでも入りやすいサイズ */
	font-weight: bold;
	text-decoration: none;
	border-radius: 20px;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis; /* 文字が溢れたら「...」 */
	transition: all 0.2s ease;
	box-sizing: border-box;
}

/* ① デジタルチラシ（メイン：オレンジ） */
.flyer-btn-digital {
	background-color: #ff9800;
	color: #fff !important;
	border: 2px solid #ff9800;
}

/* ② PDFチラシ（サブ：青枠） */
.flyer-btn-pdf {
	background-color: #fff;
	color: #1976d2 !important;
	border: 2px solid #1976d2;
}

/* ③ クーポン（サブ：赤枠） */
.flyer-btn-coupon {
	background-color: #fff;
	color: #d32f2f !important;
	border: 2px solid #d32f2f;
}

/* ホバー効果 */
@media (hover: hover) {
	.flyer-btn-digital:hover, .flyer-btn-pdf:hover, .flyer-btn-coupon:hover {
		opacity: 0.7;
		transform: translateY(-1px);
	}
}

/* チラシの種類個々のリンク */
.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; /* 軽めのボーダー */
}

.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; /* ボーダーをなくす */
}

.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; /* テキストとアイコンの間隔 */
}

/* n枚目以降のチラシを隠す設定 */
.flyer-unit.is-hidden {
	display: none !important;
}

/* もっと見るボタンの装飾案 */
.show-more-flyers {
	display: block !important;
	width: 200px !important;
	max-width: 90% !important;
	margin: 15px 0 10px 0 !important; /* 上に少し隙間を開ける */
	padding: 10px !important;
	background-color: #f8f9fa !important; /* 少し明るいグレー */
	border: 1px solid #ced4da !important;
	border-radius: 6px !important;
	color: #007bff !important; /* リンク色にして「押せる」ことを強調 */
	font-size: 14px !important;
	font-weight: bold !important;
	cursor: pointer !important;
	text-align: center !important;
	clear: both; /* 周囲の回り込みを解除 */
}

.show-more-flyers:hover {
	background-color: #e2e6ea;
}

.flyer-title-btn {
	/* タップ領域と配置 */
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	min-height: 48px; 
	padding: 10px 16px;
	margin-bottom: 8px;

	/* デザイン（イエロー背景＋オレンジ枠線） */
	background-color: #fff9c4; /* 非常に明るい黄色 */
	border: 2px solid #ff9800; /* オレンジ色の枠線 */
	color: #5d4037; /* 濃い茶色 */
	border-radius: 6px;

	/* フォント設定 */
	font-size: 14px;
	font-weight: bold;
	line-height: 1.4;
	text-decoration: none;

	/* ホバー時の変化をフワッと滑らかにする */
	transition: all 0.2s ease-out;
}

/* リンク先があることを示す右矢印 */
.flyer-title-btn::after {
	content: "〉";
	font-size: 14px;
	font-weight: bold;
	color: #ff9800;
	margin-left: 8px;
	transition: transform 0.2s ease-out; /* 矢印用のアニメーション */
}

/* =========================================
       マウスが乗った時（PC用）の動き
   ========================================= */
.flyer-title-btn:hover {
	background-color: #ffecb3; /* 背景色を少し濃くする */
	box-shadow: 0 4px 8px rgba(255, 152, 0, 0.15); /* オレンジ系の淡い影をつけて浮き上がらせる */
}

/* ホバー時に右矢印を少し右に動かして「進む」感を強調 */
.flyer-title-btn:hover::after {
	transform: translateX(4px);
}

/* =========================================
   タップ・クリックした瞬間（スマホ・PC共通）の動き
   ========================================= */
.flyer-title-btn:active {
	background-color: #ffe082; /* 押した時はさらに濃い色に */
	box-shadow: none; /* 影を消して押し込まれた感を出す */
	transform: translateY(2px); /* 物理的に少し下に沈み込む */
}

/* 店舗詳細ページへの誘導ボタン（「すべて見る」ボタン） */
.view-details-btn {
	display: block !important;
	width: 240px !important; /* 1行に綺麗に収まり、タップしやすい幅 */
	max-width: 90%;
	margin: 18px auto 8px auto !important; /* 上に少し広めの余白を取り、情報の区切りを明確に */
	padding: 11px 10px !important;

	/* 既存のオレンジ・青・赤と競合しない、ナビゲーション用の色 */
	background-color: #37474f !important; /* 落ち着いたダークネイビーグレー */
	color: #ffffff !important;

	border: none !important;
	border-radius: 6px !important;
	font-size: 14px !important;
	font-weight: bold !important;
	text-align: center !important;
	text-decoration: none !important;

	/* 影をつけて「ボタン」であることを認識させる */
	box-shadow: 0 2px 4px rgba(0,0,0,0.12);
	transition: all 0.2s ease-in-out;
	cursor: pointer;
}

/* ホバー・アクティブ時の動き */
.view-details-btn:hover {
	background-color: #263238 !important; /* ホバー時に一段暗くして反応を示す */
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.view-details-btn:active {
	transform: translateY(0); /* 押し込んだ感触 */
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* クイックナビゲーション */
.index-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 20px;
	position: sticky; /* スクロールに追従させるとより便利 */
	top: 0;
	background: #fff;
	padding: 10px;
	z-index: 100;
	border-bottom: 1px solid #eee;
}
.index-nav a {
	display: inline-block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	text-align: center;
	background: #f8f8f8;
	border-radius: 4px;
	text-decoration: none;
	color: #333;
	font-weight: bold;
	font-size: 0.9rem;
}

/* タイル状のリスト */
.store-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); /* スマホで2列、PCで多列 */
	gap: 10px;
	padding: 0;
	list-style: none;
	margin-bottom: 30px;
}

.store-grid li a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 6px 8px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	text-decoration: none;
	color: #444;
	font-size: 0.85rem;
	text-align: center;
	line-height: 1.2; /* 2行になった時の行間を詰める */
	transition: background 0.2s;
}

/* タイル状のリストのホバー設定を修正 */
.store-grid li a:hover {
	background: #e7f2ff;	/* 薄い青色に変更（お好みで#f0f7ffなど） */
	border-color: #007bff;	/* 枠線を少し濃い青に */
	color: #0056b3;			/* 文字色を消さずに、少し濃い青にして「押せる感」を出す */
	text-decoration: none;	/* 下線を消す */
	box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 軽く浮き上がるエフェクト（任意） */
}

/* もし文字が白くなってしまう設定がどこかにある場合、以下で強制的に色を保持します */
.store-grid li a:hover span, 
.store-grid li a:hover {
	color: #0056b3 !important; 
}

/* スマホ等でタップした瞬間の反応を良くする設定 */
.store-grid li a:active {
	background: #d0e7ff;
	transform: translateY(1px); /* 押し込んだような動き */
}

/* 地方・都道府県ナビゲーションのコンテナ */
.index-nav2 {
	display: grid;
	/* ボタンの最小幅を100pxに設定し、入り切らない場合は自動で改行 */
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 8px;
	margin: 20px 0;
	padding: 0;
	list-style: none;
}

/* ナビゲーション内のボタン設定 */
.index-nav2 a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px; /* 指で押しやすい高さ */
	padding: 8px 4px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 6px;
	color: #333;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	line-height: 1.3;
	transition: all 0.2s ease;
}

/* ホバー時の挙動（店舗一覧と統一） */
.index-nav2 a:hover {
	background: #e7f2ff;
	border-color: #007bff;
	color: #0056b3 !important;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* スマホ表示（幅600px以下）の微調整 */
@media (max-width: 600px) {
	.index-nav2 {
		/* スマホでは2列または3列で固定 */
		grid-template-columns: repeat(3, 1fr); 
		gap: 6px;
	}
	.index-nav2 a {
		font-size: 0.85rem; /* スマホでは少しだけ文字を小さく */
		padding: 6px 2px;
	}
}
/* 広報紙リンクのコンテナ */
.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; /* 軽めのボーダー */
}

.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; /* 軽めのボーダー */
}

.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; /* 軽めのボーダー */
}

.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; /* 軽めのボーダー */
}

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

/* --- アクセス案内ボックスのデザイン --- */
.access-guide-box {
	background-color: #fdfbf7; /* しまむらのオレンジに合う暖色系 */
	border: 1px solid #e0dcd5;
	border-radius: 8px;
	padding: 15px;
	margin: 15px 0 20px 0; /* 住所と地図の間の余白を調整 */
}

.access-title {
	font-size: 15px;
	color: #333;
	margin-top: 0;
	margin-bottom: 8px;
	border-bottom: 2px solid #ff9800; /* アクセントカラー */
	display: inline-block;
}

.access-description {
	font-size: 14px;
	line-height: 1.6;
	color: #444;
	margin: 0;
}

/* --- 住所エリアのスタイル（アイコンとテキストを綺麗に揃える） --- */
.store-info-card p.address {
	display: flex;
	align-items: flex-start; /* 2行になってもアイコンを上揃えに維持 */
	font-size: 15px;
	line-height: 1.5;
	color: #333;
	margin-bottom: 15px;
}

.store-info-card p.address .icon {
	margin-right: 6px;
	flex-shrink: 0; /* アイコンが潰れるのを防ぐ */
}

/* ちなみに、店舗名も少し目立たせるとより綺麗です */
.store-info-card p.name {
	font-size: 18px;
	font-weight: bold;
	color: #cc0000; /* しまむらのブランドカラーなど */
	margin-bottom: 10px;
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
}

/* --- 電話発信ボタンのスタイル --- */
.tel-container {
	margin-top: 20px;
}

.tel-btn {
	display: block;
	background-color: #fff;
	border: 2px solid #e0dcd5; /* 地図の枠線やアクセス案内に合わせた色 */
	color: #333;
	text-align: center;
	padding: 12px;
	border-radius: 8px;
	text-decoration: none;
	font-size: 16px;
	font-weight: bold;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.tel-btn:hover, .tel-btn:active {
	background-color: #fdfbf7;
	border-color: #ff9800; /* タップ時にオレンジにする */
}

/* ページシェアセクション */
.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;
}

/* シェアを促すメッセージの設定のみを追加 */
.share-message {
	text-align: center;
	font-size: 14px;			/* 文字の大きさ */
	font-weight: bold;			/* 太字にして少し目立たせる */
	color: #666;				/* 控えめなグレー */
	padding-top: 5px;			/* メッセージの開始までの隙間 */
	margin-bottom: 15px;		/* メッセージとボタンの間の隙間 */
	display: block;				/* 確実に1行占有させる */
}

.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;
}

/* --- 初期状態で隠しておく店舗用 --- */
.is-hidden-store {
	display: none !important;
}

/* --- 絞り込み専用コンテナの枠 --- */
.filter-box-container {
	background-color: #fff9f2;
	border: 1px solid #ffcc80;
	border-radius: 8px;
	padding: 12px; /* スマホ画面を広く使えるよう、15pxから12pxへ引き締め */
	margin: 15px 0;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* --- 案内バナー --- */
.filter-guide-banner {
	background-color: #ffffff;
	border-left: 4px solid #ff9800;
	padding: 6px 10px; /* 上下の余白も少しコンパクトに */
	margin-bottom: 12px;
	border-radius: 4px;
	font-size: 13px;
	color: #333;
	display: flex;
	align-items: center; /* アイコンと文字を中央揃え */
}

.filter-guide-banner .guide-icon {
	margin-right: 6px;
	font-size: 15px;
	flex-shrink: 0; /* 文字が折り返してもアイコンが縦長に潰れないようにする */
}

.filter-guide-banner .guide-text {
	font-weight: bold;
	line-height: 1.3; /* 万が一折り返した際も、行間が詰まって綺麗に見える */
}

/* --- マイエリア登録を促す吹き出し --- */
.balloon-wrapper {
	position: relative;
	width: 100%;
	margin-top: 15px;
}
.balloon-text {
	position: absolute;
	top: -35px;
	left: 50%;
	transform: translateX(-50%);
	background: #e91e63; /* 視線を奪うアクセントカラー */
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	padding: 5px 12px;
	border-radius: 20px;
	white-space: nowrap;
	box-shadow: 0 3px 6px rgba(0,0,0,0.15);
	z-index: 10;
	pointer-events: none; /* クリックの邪魔にならないよう設定 */
}
.balloon-text::after {
	content: "";
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	border-top: 7px solid #e91e63;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
}

/* --- マイエリア 3ステップガイド --- */
.myarea-guide-container {
	background-color: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 15px 20px;
	margin: 25px 0 15px;
}
.myarea-guide-container h3 {
	font-size: 15px;
	color: #37474f;
	margin-top: 0;
	margin-bottom: 12px;
	border-bottom: 2px solid #ff9800;
	display: inline-block;
}
.step-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.step-list li {
	position: relative;
	padding-left: 65px;
	margin-bottom: 12px;
	font-size: 13px;
	line-height: 1.4;
	min-height: 24px;
	display: flex;
	align-items: center;
}
.step-list li:last-child {
	margin-bottom: 0;
}
.step-num {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	background: #37474f;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	padding: 2px 6px;
	border-radius: 3px;
	width: 50px;
	text-align: center;
}
.step-list li strong {
	color: #e91e63;
}

/* --- 「さらに読み込む」ボタン用 --- */
.btn-load-more-container {
	text-align: center;
	margin: 30px 0;
	display: none; /* JSで制御するため初期は非表示 */
}
/* --- ボタン本体（チャコール・モダン） --- */
.btn-load-more {
	width: 85%;
	max-width: 450px;
	padding: 16px;
	font-size: 16px;
	font-weight: bold;
	background-color: #37474f; /* 視線を奪わず、かつ絶対に埋もれないチャコール */
	color: #ffffff;
	border: none;
	border-radius: 35px;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
	transition: all 0.2s;
}
/* --- ボタン押下時のアクション --- */
.btn-load-more:active {
	background-color: #263238; /* 押した質感を出すために一段濃く */
	transform: translateY(2px);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

/* フッター */
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; /* 下の要素との間隔 */
}

/* 新しいUIコンテナのスタイル */
.header-ui-container {
	max-width: 960px; /* 既存のコンテンツ幅に合わせる */
	margin: 0 auto 20px;
}

/* ナビゲーションタブのスタイル */
.tab-navigation {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
	border-bottom: 2px solid #ddd;
}
.tab-button3 {
	background-color: #f1f1f1;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 10px 12px;
	transition: 0.3s;
	font-size: 16px;
	font-weight: bold;
	border-radius: 5px 5px 0 0;
	margin: 0 2px;
}
.tab-button3:hover {
	background-color: #ddd;
}
.tab-button3.active {
	background-color: #555;
	color: white;
	border-bottom: 2px solid #555;
	padding-bottom: 12px; /* アクティブなタブの視覚的な調整 */
}
.tab-content-container {
	border: 1px solid #ddd;
	padding: 20px;
	border-radius: 0 0 8px 8px;
	background-color: #fff;
}
.tab-pane {
	display: none;
}
.tab-pane.active {
	display: block;
}

/* 近隣市町村リンクのスタイル */
.nearby-cities-container {
	text-align: center;
	margin-top: 40px;
	margin-bottom: 20px;
	padding: 15px;
	background-color: #f9f9f9;
	border-radius: 8px;
}

.nearby-cities-container h3 {
	font-size: 20px;
	color: #333;
	margin-top: 0;
	margin-bottom: 15px;
	border-bottom: 2px solid #eee;
	padding-bottom: 10px;
}

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

/* 近隣市町村リンクのボタンの色 */
.link-button {
	display: inline-block;
	padding: 12px 20px;
	margin: 5px;
	background-color: #f8f9fa; /* 薄いグレー */
	border: 1px solid #ddd;
	border-radius: 8px; /* 角を丸く */
	text-decoration: none;
	color: #333;
	font-weight: bold;
	transition: all 0.3s;
}

.link-button:hover {
	background-color: #e9ecef;
	transform: translateY(-2px); /* 少し浮き上がる効果 */
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* 天気情報 */
.weather-summary {
	background-color: white;
	border: 1px solid #b2ebf2;
	padding: 15px;
	margin-bottom: 30px;
	border-radius: 8px;
	display: flex;
	justify-content: space-around;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	max-width: 800px; /* 適切な幅に制限 */
	margin-left: auto;
	margin-right: auto;
}
.day-weather {
	text-align: center;
	flex-grow: 1;
	padding: 0 5px;
}
.day-weather:first-child {
	border-right: 1px solid #b2ebf2;
}
.day-weather h3 {
	margin: 0 0 5px 0;
	font-size: 16px;
	color: #00796b;
}
.day-weather img {
	width: 80px;
	height: 60px;
	display: block;
	margin: 0 auto 2px auto;
}
.day-weather p {
	font-size: 14px;
	font-weight: bold;
	margin: 2px 0;
	color: #383c3c;
}
.day-weather .temp-high {
	font-size: 16px;
	font-weight: bold;
	color: orangered;
	margin: 2px 0;
}
.day-weather .temp-low {
	font-size: 16px;
	font-weight: bold;
	color: royalblue;
	margin: 2px 0;
}
.day-weather .temp-chg {
	font-size: 12px;
	font-weight: bold;
}
.day-weather .rain {
	font-size: 14px;
	color: mediumblue;
}
.day-weather .noon {
	font-size: 12px;
	color: midnightblue;
}

.table-tenki-1h table, .table-tenki-10d table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
}
.table-tenki-1h th, .table-tenki-10d th, .table-tenki-1h td, .table-tenki-10d td {
	border: 1px solid #ddd;
	padding: 6px;
	text-align: center;
	font-size: 14px;
}
.table-tenki-1h th, .table-tenki-10d th {
	background-color: #f2f2f2;
}
.table-tenki-1h img, .table-tenki-10d img {
	width: 40px;
	vertical-align: middle;
}

/* 個別説明ページ */
.article-list {
	display: block;
}

.article-list .article-card {
	width: inherit;
	margin: 0 auto 20px auto;
}

.article-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;
}

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

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

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

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

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

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

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

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

/* 各種リンク */
.article-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; /* 軽めのボーダー */
}

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

/* フォーム全体のテーブル設定 */
.contact-form {
	max-width: 600px; /* フォームの最大幅 */
	margin: 20px auto; /* 中央寄せ */
	width: 95%; /* スマホ時の横幅 */
}

.contact-form table {
	width: 100%;
	border-collapse: collapse;
}

/* 見出し（お名前・メールアドレス等）の調整 */
.contact-form th {
	text-align: left;
	padding: 10px 0 5px 5px;
	font-size: 15px;
	color: #333;
}

/* 入力欄（input/textarea）のスタイル */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
	width: 100%; /* 横幅いっぱい */
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 16px; /* スマホでズームされないサイズ */
	box-sizing: border-box; /* 余白を含めたサイズ計算 */
	background-color: #fafafa;
}

/* お問い合わせ内容の高さ */
.contact-form textarea {
	height: 180px;
	resize: vertical;
}

/* 送信ボタンのセルとボタン本体 */
.submit-cell {
	text-align: center;
	padding-top: 25px;
}

.contact-form input[type="submit"] {
	background-color: #f39800; /* オレンジ系のアクセントカラー */
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	padding: 15px 60px;
	border: none;
	border-radius: 30px; /* 丸みのあるボタン */
	cursor: pointer;
	transition: 0.3s;
	-webkit-appearance: none; /* iOSのデフォルトスタイル解除 */
}

.contact-form input[type="submit"]:hover {
	background-color: #d88700;
	transform: translateY(-2px); /* 少し浮き上がる演出 */
}

/* 最終更新日の設定(共通) */
.update-date-right, .update-date2-right {
	text-align: right;
	font-size: 0.85rem;
	color: #666666;
	display: block;
	margin-bottom: 10px;
}

/* 詳細ページ用：上に無理やり持ち上げる */
.update-date-right {
	margin-top: -50px;
}

/* 一覧ページ用：普通に隙間を空ける */
.update-date2-right {
	margin-top: 10px;
}

/* インフィード広告をチラシユニットと馴染ませる */
.infeed-ad-container {
	margin: 20px 0;
	padding: 10px 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	background-color: #fafafa; /* わずかに色を付けて「情報の一部」として目立たせる */
	min-height: 100px;
}

/* 個別ページ特有：チラシカード（タイル）の設定を無効化または上書き */
.flyer-cards-container {
	display: block; /* gridやflexを解除 */
}

.flyer-card {
	/* タイル形式のスタイルを打ち消す */
	border: none;
	box-shadow: none;
	padding: 0;
	margin-bottom: 15px;
}

/* おすすめ商品紹介ボックス（PB商品紹介用） */
.featured-item-box {
	border: 2px solid #28a745;
	border-radius: 12px;
	padding: 15px;
	margin: 20px auto;
	background-color: #fff;
	display: flex;
	align-items: center;
	gap: 15px;
	max-width: 900px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.featured-item-img-wrapper {
	flex: 0 0 90px;
}

.featured-item-img-wrapper img {
	width: 90px;
	height: 90px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid #eee;
}

.featured-item-content {
	flex: 1;
}

.featured-item-content .label {
	margin: 0;
	font-size: 0.75em;
	color: #28a745;
	font-weight: bold;
	letter-spacing: 0.05em;
}

.featured-item-content h3 {
	margin: 2px 0 5px 0;
	font-size: 1.05em;
	color: #333;
	line-height: 1.3;
}

.featured-item-content .description {
	margin: 0 0 8px 0;
	font-size: 0.85em;
	color: #666;
	line-height: 1.4;
}

.featured-item-content .link {
	display: inline-block;
	color: #0066cc;
	font-size: 0.9em;
	font-weight: bold;
	text-decoration: none;
	border-bottom: 1.5px solid #0066cc;
}

/* 関連リンクセクション全体をほんのり暖かいクリーム色に */
.related-links {
	margin-top: 40px;
	padding: 25px 20px;
	background-color: #fffdf5; /* 淡いクリームイエロー */
	border-radius: 8px;
	border: 1px solid #ffecb3; /* 優しいイエローオレンジの枠線 */
}

/* セクション内の見出し（h3） */
.related-links h3 {
	font-size: 1.15rem;
	color: #5d4037; /* 真っ黒ではなく、暖かみのあるこげ茶色で優しく */
	margin-top: 0;
	margin-bottom: 15px;
	padding-bottom: 8px;
	border-bottom: 2px solid #ffca28; /* アクセントのイエローオレンジ */
}

/* ブロック間の余白 */
.nearby-stores {
	margin-bottom: 30px;
}

/* リンクを並べるグリッドレイアウト */
.related-links .link-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
}

/* リンクカード（ボタン風） */
.related-links .link-list li a {
	display: flex;
	align-items: center;
	padding: 12px 15px;
	background-color: #ffffff;
	border: 1px solid #ffe0b2; /* 枠線も淡いオレンジ系に */
	border-radius: 6px;
	color: #d84315; /* リンクテキストは視認性の高い濃いオレンジ・赤茶色 */
	text-decoration: none;
	font-size: 0.95rem;
	line-height: 1.4;
	transition: all 0.2s ease-in-out;
	box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

/* ホバー時の動き（マウスを乗せた時やタップした時） */
.related-links .link-list li a:hover,
.related-links .link-list li a:active {
	background-color: #fff3e0; /* ほんのりオレンジの背景が浮き出る */
	border-color: #ffb74d;
	color: #bf360c;
}

/* リンクの先頭の矢印アイコン */
.related-links .link-list li a::before {
	content: "\203A"; /* 右向きの山括弧「›」 */
	font-size: 1.4rem;
	margin-right: 8px;
	color: #ffb74d; /* アイコンもオレンジ系に */
}

/* --- マイエリア登録ボタン --- */
.myarea-btn-container {
	text-align: center;
	margin: 10px 16px 20px; /* 上・左右・下の余白 */
}
.myarea-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	border: 2px solid #ff9800;
	color: #ff9800;
	padding: 10px 20px;
	border-radius: 25px; /* 丸みを強くして押しやすく */
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 4px 6px rgba(255, 152, 0, 0.15); /* フワッと浮き上がらせる */
}
/* 登録済みの状態 */
.myarea-btn.is-registered {
	background-color: #ff9800;
	color: #fff;
	box-shadow: none;
}
.myarea-btn .icon {
	margin-right: 6px;
	font-size: 16px;
}

/* --- Cookie同意モーダル --- */
.cookie-modal-overlay {
	position: fixed;
	top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}
.cookie-modal-overlay.is-show {
	opacity: 1;
	visibility: visible;
}
.cookie-modal-content {
	background: #fff;
	width: 90%;
	max-width: 400px;
	padding: 24px;
	border-radius: 8px;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.cookie-modal-content h3 {
	color: #ff9800;
	font-size: 18px;
	margin-bottom: 12px;
}
.cookie-modal-content p {
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
	margin-bottom: 16px;
}
.cookie-note {
	color: #666;
	background: #f9f9f9;
	padding: 8px;
	border-radius: 4px;
}
.cookie-modal-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.btn-consent-yes {
	background-color: #ff9800;
	color: #fff;
	border: none;
	padding: 12px;
	border-radius: 6px;
	font-weight: bold;
	cursor: pointer;
}
.btn-consent-no {
	background: none;
	border: none;
	color: #999;
	text-decoration: underline;
	cursor: pointer;
}

/* --- マイエリア：ゼロステート（未登録時の案内） --- */
.zero-state-container {
	text-align: center;
	padding: 50px 20px;
	background-color: #fff;
	border-radius: 8px;
	margin: 20px 16px;
	border: 2px dashed #ff9800; /* 目立たせるためにオレンジの破線に */
}
.zero-state-container .icon {
	font-size: 40px;
	color: #ff9800;
	margin-bottom: 10px;
	display: block;
}
.zero-state-container h3 {
	color: #333;
	font-size: 20px;
	margin-bottom: 16px;
}
.zero-state-container p {
	font-size: 15px;
	line-height: 1.6;
	color: #555;
	margin-bottom: 24px;
}
.zero-state-container .instruction {
	background-color: #fff8e1;
	padding: 12px;
	border-radius: 6px;
	font-weight: bold;
	color: #d84315;
	margin-bottom: 24px;
	display: inline-block;
	text-align: left;
}
.btn-go-register {
	display: inline-block;
	background-color: #ff9800;
	color: #fff;
	padding: 14px 28px;
	border-radius: 30px;
	font-weight: bold;
	text-decoration: none;
	box-shadow: 0 4px 6px rgba(255, 152, 0, 0.2);
	transition: all 0.2s;
}

/* --- マイエリア：リセットボタン --- */
.myarea-reset-container {
	text-align: right;
	margin: 0 16px 10px;
}
.btn-reset-area {
	background: none;
	border: none;
	color: #999;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
	/* 1. ページ全体の大枠の左右余白を 20px → 5px に大幅カット */
	main {
		padding-left: 5px;
		padding-right: 5px;
	}

	/* 2. リスト全体を囲む枠線の左右パディングを 20px → 0px に */
	.tab-content-container {
		padding-left: 0;
		padding-right: 0;
		border-left: none;
		border-right: none;
		border-radius: 0;
	}

	/* 3. 店舗カード自体のデザインを「画面幅いっぱい」に変更 */
	.store-card {
		/* テキストが画面端にくっつくのを防ぐ最低限の内部余白（15px）だけ確保 */
		padding: 20px 15px; 
		border-radius: 0;             /* 幅いっぱいなので横の角丸をなくす */
		box-shadow: none;             /* 影の代わりに... */
		border-bottom: 1px solid #ddd;/* 下線で区切るモダンなデザインに変更 */
		margin-bottom: 0;
	}

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

	/* 4. トップ広告・リスト内広告の左右余白をゼロにし、幅を最大化 */
	.top-ad, .in-list-ad {
		margin-left: 0;
		margin-right: 0;
		border-left: none;
		border-right: none;
	}

	/* 5. 上部の説明文やジャンル選択枠も、左右を詰めて画面を広く使う */
	.page-description,
	.genre-selector-ui,
	.region-selector-ui,
	.weather-summary {
		padding-left: 10px;
		padding-right: 10px;
	}

	header h1 {
		font-size: 1.3rem; /* 画面が狭いときは少し小さく */
	}

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

	.menu-toggle {
		display: flex;         /* モバイルではflexに設定 */
		align-items: center;   /* 上下中央 */
		justify-content: center; /* 左右中央 */
		background: none;
		border: none;
		color: white;
		font-size: 32px;       /* 記号を大きく表示 */
		cursor: pointer;
		z-index: 1001;
		width: 44px;           /* タップしやすいサイズ */
		height: 44px;
		padding: 0;
		line-height: 1;
	}

	.main-nav {
		max-height: 0; /* デフォルトで非表示 */
		overflow: hidden;
		transition: max-height 0.3s ease-out;
		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になったため不要 */
	}

	/* モバイルでのチラシ有無表示の調整 */
	.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; /* モバイルでは縦並び */
	}
	.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;
	}

	/* 天気情報 */
	.day-weather {
		padding: 0 5px;
	}
	.day-weather h3 {
		font-size: 12px;
	}
	.day-weather p {
		font-size: 12px;
	}
	.day-weather .temp-high {
		font-size: 12px;
	}
	.day-weather .temp-low {
		font-size: 12px;
	}
	.day-weather .temp-chg {
		font-size: 10px;
	}
	.day-weather .rain {
		font-size: 12px;
	}
	.day-weather .noon {
		font-size: 10px;
	}
}