@charset "utf-8";

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

#leftnavi{
    /*stickyで固定*/
    position: -webkit-sticky;/*Safari*/
    position: sticky;
    /*固定したい位置*/
    top: 100px;
    /*ナビゲーションの形状*/
    background: #fff;
    padding: 20px;
}

/*レイアウトのためのCSS*/
#container{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#main-area{
	width:70%;
}

#sub-area{
	width:25%;
	padding: 0px 20px 0 0;
}

#l-navi{
    list-style: none;
    margin-top: 30px;
}

#l-navi li a{
	display: block;
	text-decoration: none;
	color: #666;
	padding:10px;
	transition:all 0.3s;
}

#l-navi li.current a,
#l-navi li a:hover,
#l-navi li a:active{
	color:#888;	
}
#l-navi li .switch_text {
}
#l-navi li a .hover {
    display: none;
}
#l-navi li a:hover .nomal {
    display: none;
}
#l-navi li a:hover .hover {
    display: inline;
}



/*768px以下の見え方*/

@media screen and (max-width:768px){
#main-area{
	width:100%;
}

#sub-area{
	width:100%;
	padding: 20px;
}

nav{
	position:relative;/*stickyからrelativeに戻す*/	
    top:0;
}
}

/*========= レイアウトのためのCSS ===============*/

@media (max-width:450px){
}