@charset "utf-8";

/*========= ナビゲーションドロップダウンのためのCSS ===============*/

/*==ナビゲーション全体の設定*/
ul.sideM {
	list-style: none;
	text-align: left;
	margin-left: 2em;
}


/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
ul.sideM li{
	display:flex;
	font-size: 1.6rem;
	flex-flow: column;
	justify-content:space-around;
}

/*ナビゲーションのリンク設定*/
ul.sideM li a{
	padding: 0.5em 1em;/*文字の上下 左右の余白*/
	color: #494949;/*文字色*/
	font-size: 1.4rem;
	text-decoration: none;/*リンクの下線を消す*/
	background: #FFFFFF;/*背景色*/
	border-left: solid 5px #7db4e6;/*左線*/
	border-bottom: solid 3px #d7d7d7;/*下線*/
	transition:all .3s;
}

ul.sideM li a:hover{
	background: #fffaf4;/*背景色*/
	border-left: solid 5px #ffaf58;/*左線*/

}



/*==768px以下の形状*/

@media screen and (max-width:768px){
	ul.sideM {
		background:#333;
		color: #fff;
	}

	ul.sideM li a{
		border-bottom:1px solid #ccc;
		color: #fff;
		font-size: 2rem;
	}
}


/*ナビゲーションの固定*/

nav {
	display: block;
    /*stickyで固定*/
    position: -webkit-sticky;/*Safari*/
	position: sticky;
    /*固定したい位置*/
	top: 20px;
	left: 1px;
    /*ナビゲーションの形状*/
	padding: 5px;
}