/* Headline */
h1.PanelTitle
{
	background-image				:	url( './image/Panel/Background.jpg' );
	background-position				:	center center;
	background-size				:	cover;
}

/* Article */
div.PanelArticleTitle
{
	display						:	block !important;
	padding						:	10px 20px 0px 20px;
}
div.PanelArticleTime
{
	display						:	none;
	padding						:	10px 20px;
	text-align					:	left;
}
div.PanelArticleComment
{
}
div.PanelArticleComment table
{
	width						:	100%;
	border-collapse					:	collapse;
}
div.PanelArticleComment table tr th,
div.PanelArticleComment table tr td
{
	padding						:	10px;
	border						:	solid 1px rgba(153,153,153,1);
}
div.PanelArticleComment table tr th
{
	background-color				:	rgba(41,169,224,1);
	color						:	rgba(255,255,255,1);
	text-align					:	center;
	font-weight					:	bold;
	white-space					:	nowrap;
}
div.PanelArticleComment table tr td:first-child
{
	width						:	120px;
	background-color				:	rgba(41,169,224,0.1);
	color						:	rgba(41,169,224,1);
	text-align					:	center;
	font-weight					:	bold;
	white-space					:	nowrap;
}
div.PanelArticleComment table tr td p
{
	margin						:	0px !important;
}

/* Archive */
#PanelArticleArchiveByCategory
{
	padding						:	30px;
	background-color				:	rgba(41,169,224,0.1);
}
#LabelArticleArchiveByCategoryTitle
{
	display						:	none;
}
li.ListArticleCategoryMiddle
{
	display						:	inline-block;
	margin						:	0px 30px 0px 0px;
}
li.ListArticleCategorySmall
{
	display						:	none;
	margin						:	0px 30px 0px 0px;
}


/*
======================================
PC
======================================
*/
@media (min-width: 801px)
{
	/* Index */
	#PanelArticleIndexPhoto ul li
	{
		width				:	300px;
		margin				:	0px 25px 50px 0px;
	}
	#PanelArticleIndexPhoto ul li:nth-child(2n)
	{
		margin-right			:	25px;
	}
	#PanelArticleIndexPhoto ul li:nth-child(3n)
	{
		margin-right			:	0px;
	}

	div.PanelArticleComment table tr th,
	div.PanelArticleComment table tr td
	{
		padding						:	10px;
	}
}


/*
======================================
Smart Phone
======================================
*/
@media (max-width: 800px)
{
	div.PanelArticleComment table tr th,
	div.PanelArticleComment table tr td
	{
		padding						:	5px;
	}
	div.PanelArticleComment table tr td:first-child
	{
		width						:	30%;
	}
}


/* Category menu (2026-10-27): category heading + area buttons */
#PanelArticleArchiveByCategory ul.ListArticleCategoryLarge
{
	margin						:	0px;
	padding						:	0px;
}
#PanelArticleArchiveByCategory li.ListArticleCategoryLarge
{
	display						:	block !important;
	margin						:	0px !important;
	padding						:	0px !important;
	font-size					:	16px !important;
	text-align					:	center;
}
#PanelArticleArchiveByCategory li.ListArticleCategoryLarge > a
{
	display						:	inline-flex;
	align-items					:	center;
	gap						:	10px;
	padding						:	10px 28px;
	border-radius					:	999px;
	background-color				:	rgba(41,169,224,1);
	color						:	rgba(255,255,255,1);
	font-size					:	20px;
	font-weight					:	bold;
	text-decoration					:	none;
	transition					:	background-color 0.2s;
}
#PanelArticleArchiveByCategory li.ListArticleCategoryLarge > a:hover
{
	background-color				:	rgba(26,140,190,1);
}
#PanelArticleArchiveByCategory li.ListArticleCategoryLarge > a span.LabelCategoryLargeNumber
{
	font-size					:	15px;
	font-weight					:	normal;
}
#PanelArticleArchiveByCategory li.ListArticleCategoryLarge > a::after
{
	content						:	"すべて見る ›";
	margin-left					:	6px;
	padding-left					:	14px;
	border-left					:	solid 1px rgba(255,255,255,0.6);
	font-size					:	14px;
	font-weight					:	normal;
}
#PanelArticleArchiveByCategory ul.ListArticleCategoryMiddle
{
	/* table-like grid: centered as a whole, rows filled from the left (empty columns collapse) */
	display						:	grid;
	grid-template-columns				:	repeat(auto-fit, 142px);
	justify-content					:	center;
	gap						:	12px;
	max-width					:	960px;
	margin						:	0px auto;
	padding						:	54px 0px 0px 0px;
	position					:	relative;
}
#PanelArticleArchiveByCategory ul.ListArticleCategoryMiddle::before
{
	content						:	"地域から探す";
	position					:	absolute;
	top						:	22px;
	left						:	0px;
	right						:	0px;
	color						:	rgba(102,102,102,1);
	font-size					:	13px;
	letter-spacing					:	0.1em;
	text-align					:	center;
}
#PanelArticleArchiveByCategory li.ListArticleCategoryMiddle
{
	display						:	block !important;
	margin						:	0px !important;
	list-style-type					:	none;
}
#PanelArticleArchiveByCategory li.ListArticleCategoryMiddle > a
{
	display						:	flex;
	align-items					:	center;
	justify-content					:	space-between;
	gap						:	10px;
	box-sizing					:	border-box;
	width						:	142px;
	padding						:	10px 12px 10px 16px;
	border						:	solid 1px rgba(41,169,224,1);
	border-radius					:	8px;
	background-color				:	rgba(255,255,255,1);
	color						:	rgba(51,51,51,1);
	font-size					:	16px;
	line-height					:	1.3;
	text-decoration					:	none;
	transition					:	background-color 0.2s, color 0.2s;
}
#PanelArticleArchiveByCategory li.ListArticleCategoryMiddle > a:hover
{
	background-color				:	rgba(41,169,224,1);
	color						:	rgba(255,255,255,1);
}
#PanelArticleArchiveByCategory li.ListArticleCategoryMiddle > a span.LabelCategoryMiddleNumber
{
	color						:	rgba(41,169,224,1);
	font-size					:	13px;
	white-space					:	nowrap;
}
#PanelArticleArchiveByCategory li.ListArticleCategoryMiddle > a:hover span.LabelCategoryMiddleNumber
{
	color						:	rgba(255,255,255,1);
}
/* area with 0 items: no link, shown as a disabled button */
#PanelArticleArchiveByCategory li.ListArticleCategoryMiddle:not(:has(> a))
{
	display						:	flex !important;
	align-items					:	center;
	justify-content					:	space-between;
	gap						:	10px;
	box-sizing					:	border-box;
	width						:	142px;
	padding						:	10px 12px 10px 16px;
	border						:	solid 1px rgba(204,204,204,1);
	border-radius					:	8px;
	background-color				:	rgba(245,245,245,1);
	color						:	rgba(153,153,153,1);
	font-size					:	16px;
	line-height					:	1.3;
}
#PanelArticleArchiveByCategory li.ListArticleCategoryMiddle:not(:has(> a)) span.LabelCategoryMiddleNumber
{
	font-size					:	13px;
}
#PanelArticleArchiveByCategory ul.ListArticleCategorySmall,
#PanelArticleArchiveByCategory li.ListArticleCategorySmall
{
	display						:	none !important;
}

@media (max-width: 800px)
{
	#PanelArticleArchiveByCategory
	{
		padding						:	20px 15px !important;
	}
	#PanelArticleArchiveByCategory li.ListArticleCategoryLarge > a
	{
		padding						:	8px 20px;
		font-size					:	17px;
	}
	#PanelArticleArchiveByCategory ul.ListArticleCategoryMiddle
	{
		display						:	grid;
		grid-template-columns				:	repeat(2, minmax(0, 1fr));
		gap						:	8px;
		max-width					:	100%;
	}
	#PanelArticleArchiveByCategory li.ListArticleCategoryMiddle > a,
	#PanelArticleArchiveByCategory li.ListArticleCategoryMiddle:not(:has(> a))
	{
		width						:	100%;
		font-size					:	15px;
	}
}