@charset "UTF-8";
/* 器材ページのサイドバー（器材の関連ページ一覧）
 *
 * 2カラムにする骨格（#sidebar の幅280px・PCで横並び・960px未満で下に回り込み）は
 * SWELLテーマ本体の main.css に入っているので、そのまま使っている。
 * ただし現在のWordPressは「サイドバー無し」設定のため、
 * ウィジェットの見た目のCSSだけがWordPress側から出力されない。
 * 足りないぶんをここで補う。
 *
 * 色・線・角丸はSWELLの変数を使っているので、テーマの色を変えるとここも追随する。
 */

#sidebar {
	margin-top: 0;
}

#sidebar .c-widget {
	background: #fff;
	border: 1px solid var(--color_border);
	border-radius: 4px;
	overflow: hidden;
}

/* 見出し（紺色の帯） */
#sidebar .c-widget__title {
	margin: 0;
	padding: 12px 16px;
	background: var(--color_main);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}
#sidebar .c-widget__title::before,
#sidebar .c-widget__title::after {
	content: none;
}

/* ページ一覧 */
#sidebar .c-listMenu {
	list-style: none;
	margin: 0;
	padding: 0;
}
#sidebar .c-listMenu a {
	padding: 12px 38px 12px 16px;
	font-size: 14px;
}
/* SWELLテーマ本体が項目名の左に小さな「›」を出すが、
 * このサイドバーは右側に青い丸矢印を置いているので、左の矢印は消す。
 * （矢印が左右に2つ並んで見えるのを防ぐ） */
#sidebar .c-listMenu a::before {
	content: none;
}
/* SWELL標準はマウスを乗せると左の余白が広がる（左矢印とセットの動き）。
 * 左矢印を消したので、この横ずれも止めて余白を固定する。 */
#sidebar .c-listMenu a:hover {
	padding-left: 16px;
	padding-right: 38px;
}
#sidebar .c-listMenu a .-arrow {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	color: var(--color_main);
	font-size: 14px;
	line-height: 1;
}
#sidebar .c-listMenu > li:last-child > a,
#sidebar .c-listMenu > li:last-child > span {
	border-bottom: none;
}

/* いま開いているページ（リンクにしない） */
#sidebar .c-listMenu .-current > span {
	display: block;
	padding: 12px 16px;
	border-bottom: 1px solid var(--color_border);
	background: var(--swl-color_hov_gray);
	color: var(--color_main);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

/* 960px未満（タブレット・スマホ）では本文の下に回り込む。
 * SWELL標準は margin-top:4em だが、本文とくっつきすぎないよう少し広げる。 */
@media not all and (min-width: 960px) {
	#sidebar {
		margin-top: 3em;
	}
}