/* ここにCSSを記入 */

/************************************
** サイドバー ウィジェットの設定 共通
************************************/

.sidebar h3 { /* サイドバータイトル */
	padding: 12px 6px;
	margin: 16px 0 0px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}

.sidebar h3:before { /* サイドバータイトルの装飾 */
	margin-right: 6px;
	content:'';
	border-left: 4px solid;
	border-radius: 5px;
	color: #4baef3;
}

.sidebar ul { /* サイドバーの幅 */
	padding: 0 12px;
}

.sidebar ul li a { /* サイドバーリストの上下左右の間隔 */
	position: relative;
	padding: 12px 0;	
	line-height: 1;
	border-bottom: 1px solid #CCC;
	font-size: 16px;
}

.sidebar ul li a:after { /* サイドバーリストの装飾 */
	position: absolute;
	right: 2px;
	padding-right:5px;
	list-style:none;
	content: '\f105';
	font-family: "Font Awesome 5 Free",sans-serif;
	font-weight: 900;
	color: #CCC;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/* ▽▽▽ 1023pxより上 ここから ▽▽▽ */
@media screen and (min-width : 1023px) {

	.sidebar{
		background: transparent;
		padding-top: 0;
	}
	
	.sidebar h3, .sidebar ul {
		background: #FFF;
	}

	.sidebar h3 { /* サイドバータイトル */
		padding: 16px 10px 0px;
	}
	
	.sidebar ul {
		padding: 0 20px 16px;
	}

	
} 
/* △△△ 1023pxより上 ここまで △△△ */


/* ▽▽▽ 1023px以下 ここから ▽▽▽ */
@media screen and (max-width: 1023px){
	
}
/* △△△ 1023px以下 ここまで △△△ */

/* ▽▽▽ 834px以下 ここから ▽▽▽ */
@media screen and (max-width: 834px){

	
	/*------------------------------------
	 コンテンツエリア
	 ------------------------------------ */
	div.sidebar { /* メインコンテンツとサイドバーの幅 */
		padding: 24px 48px;
		margin-top: 40px;
	}

}
/* △△△ 834px以下 ここまで △△△ */



/* ▽▽▽ 480px以下 ここから ▽▽▽ */
@media screen and (max-width: 480px){
		
	div.sidebar { /* メインコンテンツとサイドバーの幅 */
		padding: 16px 16px;
		margin: 12px 0;
	}
	
	div.sidebar:first-of-type {
		padding-top: 0;
	}
	
	
}
/* △△△ 480px以下 ここまで △△△ */