@charset "utf-8";

/* ****************************************************************************

	topics_year.css

	トピックス＆イベントの年別表示（年ナビ・記事一覧）。
	このページ専用。他ページへ影響させないため #topics_event 配下に限定する。

******************************************************************************* */

/***** 年ナビ *****/
#topics_event .year-nav{
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	border-bottom: 3px solid #790606;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

#topics_event .year-nav li{
	margin: 0;
}

#topics_event .year-nav > li > a,
#topics_event .year-nav > li > span{
	display: block;
	padding: 9px 13px 8px;
	font-size: .95rem;
	line-height: 1.2;
	text-decoration: none;
	border-radius: 4px 4px 0 0;
	white-space: nowrap;
	transition: background-color .2s ease;
}

#topics_event .year-nav > li > a{
	background: #ededed;
	color: #333;
}

#topics_event .year-nav > li > a:hover{
	background: #c70000;
	color: #fff;
}

#topics_event .year-nav .current{
	background: #790606;
	color: #fff;
	font-weight: bold;
}

#topics_event .year-nav .count{
	font-size: .75rem;
	margin-left: 6px;
	opacity: .75;
}

/***** 年ナビ：過去年のプルダウン *****/
#topics_event .year-nav .has-drop{
	position: relative;
}

#topics_event .year-nav .drop-btn{
	display: block;
	padding: 9px 30px 8px 13px;
	font-size: .95rem;
	line-height: 1.2;
	border: 0;
	border-radius: 4px 4px 0 0;
	background: #ededed;
	color: #333;
	font-family: inherit;
	white-space: nowrap;
	cursor: pointer;
	position: relative;
	transition: background-color .2s ease;
}

#topics_event .year-nav .drop-btn:hover{
	background: #c70000;
	color: #fff;
}

#topics_event .year-nav .has-drop.active .drop-btn{
	background: #790606;
	color: #fff;
	font-weight: bold;
}

#topics_event .year-nav .drop-btn::after{
	content: "";
	position: absolute;
	right: 13px;
	top: 14px;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

#topics_event .year-nav .drop-list{
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	min-width: 160px;
	margin: 3px 0 0;
	padding: 6px 0;
	list-style: none;
	background: #fff;
	border: 1px solid #ccc;
	box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

#topics_event .year-nav .drop-list[hidden]{
	display: none;
}

#topics_event .year-nav .drop-list a{
	display: block;
	padding: 8px 16px;
	font-size: .9rem;
	color: #333;
	text-decoration: none;
	white-space: nowrap;
}

#topics_event .year-nav .drop-list a:hover{
	background: #790606;
	color: #fff;
}

#topics_event .year-nav .drop-list .n{
	font-size: .75rem;
	color: #888;
	margin-left: 8px;
}

#topics_event .year-nav .drop-list a:hover .n{
	color: #fff;
}

#topics_event .year-nav .drop-list .current-in-drop{
	background: #f2e9e9;
	font-weight: bold;
}

/***** 年の見出し *****/
#topics_event .year-head{
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 25px;
}

#topics_event .year-head .y{
	font-size: 1.8rem;
	font-weight: bold;
	color: #790606;
	letter-spacing: .02em;
}

#topics_event .year-head .n{
	font-size: .85rem;
	color: #666;
}

/***** 記事一覧 *****/
#topics_event .topic-list{
	border-top: 1px solid #222;
	margin-bottom: 40px;
}

#topics_event .topic-row{
	border-bottom: 1px solid #ddd;
}

#topics_event .topic-row-btn{
	display: flex;
	align-items: flex-start;
	gap: 20px;
	width: 100%;
	background: #fff;
	border: 0;
	padding: 16px 30px 16px 10px;
	text-align: left;
	font-family: inherit;
	font-size: .95rem;
	line-height: 1.6;
	color: #222;
	cursor: pointer;
	position: relative;
	transition: background-color .2s ease;
}

#topics_event .topic-row-btn:hover{
	background: #faf5f5;
}

/* 開いている記事は背景でも分かるようにする */
#topics_event .topic-row-btn[aria-expanded="true"]{
	background: #faf5f5;
}

/* 固定ヘッダーの下へタイトル行が来るようにする。
   common.css が h1〜h4・div の id へ与えているのと同じ値。
   この一覧は id をボタンへ付けているため、そちらの指定が効かない */
#topics_event .topic-row-btn[id]{
	scroll-margin-top: 90px;
}

/* アンカーで飛んでくるとブラウザがボタンへフォーカスを当て、既定の枠が残る。
   枠はキーボード操作のときだけ出す */
#topics_event .topic-row-btn:focus{
	outline: none;
}

#topics_event .topic-row-btn:focus-visible{
	outline: 2px solid #790606;
	outline-offset: -3px;
}

#topics_event .topic-row-btn .date{
	flex: 0 0 105px;
	color: #790606;
	font-size: .85rem;
	padding-top: .15em;
	letter-spacing: .02em;
}

#topics_event .topic-row-btn .ttl{
	flex: 1 1 auto;
}

#topics_event .topic-row-btn::after{
	content: "";
	position: absolute;
	right: 12px;
	top: 22px;
	width: 8px;
	height: 8px;
	border-right: 2px solid #790606;
	border-bottom: 2px solid #790606;
	transform: rotate(45deg);
	transition: transform .2s ease;
}

#topics_event .topic-row-btn[aria-expanded="true"]::after{
	transform: rotate(-135deg);
	top: 25px;
}

#topics_event .topic-body{
	padding: 5px 10px 30px 135px;
}

#topics_event .topic-body[hidden]{
	display: none;
}

/* 本文に残る開催期間の行 */
#topics_event .topic-body .sub-catch{
	display: inline-block;
	background: #f2f2f2;
	border-left: 3px solid #790606;
	padding: 3px 12px;
	font-size: .85rem;
	color: #444;
}