/* ===================================
基本
=================================== */

#leftcolumn-wrap{
	width:22%; /* 左側の幅(※1) */
	padding: 0;
}
@media screen and (max-width: 1100px){
	#leftcolumn-wrap{
		width:25%; /* 左側の幅(※1) */
	}
}

/* ===================================
メニュー
=================================== */

#menu{
	display:block;
	margin:0 auto
}
#leftnav {
	text-align: center;
	background-color: #FFF;
}
#leftnav ul{
	margin-bottom: 20px;
}
#leftnav li{
	margin-bottom: 3px;
}
#leftnav ul a{
	background-image: url(../images/arrow01.png);
	background-repeat: no-repeat;
	background-position: 11px 17px;
	text-align: left;
	display: inline-block;
	width: 100%;
	padding-top: 11px;
	padding-bottom: 11px;
	padding-left: 25px;
	color: #0051A4;
	text-decoration: none;
	font-size: 110%;
	box-sizing: border-box;
	border: 1px #0051A4 solid;
	border-radius: 5px;
	background-color: #F0F8FF;
}
#leftnav ul a:hover{
	color: #EE832B;
}
#leftnav figure{
	padding-top: 15px;
}
#leftnav img{
	width: 100%;
}
#leftnav .fArea{
	width: 100%;
	margin: 0 auto;
}
#leftnav .fArea ol{
	display: flex;
	flex-wrap: wrap;
	margin-top: 30px;
}
#leftnav .fArea ol li{
	width: 24%;
	margin-right: 14%;
}
#leftnav .fArea ol li:last-child{
	margin-right: 0;
}


/*  メニューを開くボタン、前に戻るボタン非表示
------------------------------ */
#open{display:none}

@media screen and (max-width: 1100px){
	#leftcolumn-wrap{
		width:25%; /* 左側の幅(※1) */
	}
}

/* ===================================
横幅840pxで切り替え
=================================== */
@media screen and (max-width: 768px){
/*  画像の縮小表示
------------------------------ */
img{
height:auto;
max-width:100%
}
}
/* ===================================
スマホ、タブレット用
横幅600pxで切り替え
=================================== */

@media screen and (max-width: 768px){
#wrapper{
width:auto
}
#leftcolumn-wrap{
width:100%
}

/* ===================================
スマホ、タブレット用メニュー
=================================== */

/*  スライド
------------------------------ */
#leftcolumn-wrap{
	/*background-color: #F0F9FE;*/
	/*background-image: url(../images/nav_bg.jpg);
	background-repeat: repeat-y;
	background-size: 100%;*/
  background-color: #FFF;
	padding:60px 0px 10px; /* メニューボタン分空ける */
	line-height:2;
	margin:0;
	position:fixed;
	height:100%;
	width:300px; /* (*1)同じにする */
	top:0;right:0;
	-ms-transform:translate(300px); /* (*1)同じにする */
	-webkit-transform:translate(300px); /* (*1)同じにする */
	transform:translate(300px); /* (*1)同じにする */
	transition:all .3s;
	z-index:1000;
	box-sizing: border-box;
}
#side-bg{
background:rgba(0,0,0,0.77)/* 周りの背景色 */
}
/*  メニューを開くボタン/前に戻るボタン
------------------------------ */
#open{
background:#0C2E8F;
/*border:1px solid;*/
border-radius:0px;
color:#fff; /* 文字色 */
display:inline-block;
position:absolute;
text-align:center;
height:50px;
  width:50px; /* 大きさ */
top:10px;right:5px; /* メニューを開くボタンの位置 */
z-index:1001
}
#open-icon,#open-icon:before,#open-icon:after{
background:#fff/* 線の色 */
}
/*  前に戻るボタン
------------------------------ */
#leftcolumn{
	height:100%;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
}
#leftcolumn-wrap.open{
	-ms-transform:translate(0);
	-webkit-transform:translate(0);
	transform:translate(0);
}
#side-bg{
	display:none;
	position:fixed;
	height:100%;
	width:100%;
	top:0;left:0;
	z-index:999;
	cursor:pointer;
}
.open-text,
.back-text{
	font-size:10px;
	letter-spacing:0;
	position:absolute;
	bottom:-3px;
	left:0;
	width:100%;
	/*line-height: 1.0em;*/
}/* ボタン文字サイズ */
#open.buttonclose{
	position:fixed;
	right:5px;
}
#open-icon{
	display:block;
	margin:-1px 0 0 -9px;
	position:absolute;
	top:16px;
	left:44%;
	height:3px;
	width:24px;
}
#open-icon:before,#open-icon:after{
	content:"";
	display:block;
	position:absolute;
	top:50%;
	left:0;
	height:3px;
	width:24px;
	transition:.3s;
}
#open-icon:before{
	margin-top:-10px;
}
#open-icon:after{
	margin-top:7px;
}
#open .close{
	background:transparent;
}
#open .close:before,#open .close:after{
	margin-top:0;
}
#open .close:before{
	-ms-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
#open .close:after{
	-ms-transform:rotate(-135deg);
	-webkit-transform:rotate(-135deg);
	transform:rotate(-135deg);
}


	#leftnav {
		padding: 10px 10px 10px 10px ;
	}
	#leftnav ul{
		margin-bottom: 10px;
	}
	#leftnav ul li{
	}
	#leftnav ul a{
		text-align: left;
		display: inline-block;
		width: 100%;
		padding: 12px 5px 12px 20px;
    background-position: 6px 16px;
    font-size: 0.9em;
    line-height: 1.6em;
	}
	#leftnav .notes{
		text-align: justify;
		margin-bottom: 10px;
		font-size: 70%;
		line-height: 1.3em;
	}
}