@charset "utf-8";

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

#sub-area nav{
    /*stickyで固定*/
    position: -webkit-sticky;/*Safari*/
	position: sticky;
    /*固定したい位置*/
	top: 100px;
    /*ナビゲーションの形状*/
    background:#fff;
	padding: 0px;
}
#sub-area nav ul {
	padding-left: 0;
	list-style-type: none;
	margin: 0;
}
#sub-area nav ul li {
	font-size: 1.8rem;
	background-color: #fff;
	border-bottom: 0.5px solid #aaa;
}
#sub-area nav ul li:first-child {
	border-top: 0.5px solid #aaa;
}
#sub-area nav ul li a {
	color: #000;
	padding: 10px;
	text-decoration: none;
	display: block;
	width: 100%;
	transition:all 0.3s;
}

#sub-area nav ul li a:hover {
/*	background: linear-gradient(90deg,rgba(22,90,203,.5),rgba(0,215,188,.5));*/
	color: #0000ff;
	font-weight: bold;
}
#sub-area nav ul li a:active {
	color: #0000ff;
	font-weight: bold;
	opacity: 0.5;
}
/*レイアウトのためのCSS*/
#wrapper-sub {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
}

#main-area{
/*	width:77%;*/
	width:100%;
	margin-top: 0px!important;
}

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


/*991.98以下の見え方*/

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

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

#sub-area nav{
	position:relative;/*stickyからrelativeに戻す*/	
    top:0;
}
	#wrapper-sub {
		flex-direction: column-reverse;
	}
}

/*========= レイアウトのためのCSS ===============*/
#sub-area nav ul li.current a{
	color:#00d7bc;
	font-weight: bold;
}
@media screen and (max-width:768px) {

	#sub-area nav ul li.current a {
		color:#fff;	
	}
}
#main-area section{
	padding:30px;
}

#main-area section:nth-child(1){
	padding:100px 30px 30px;	
}

#main-area section:nth-child(2n){
	background:#f3f3f3;	
}