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

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

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

#menu{
	display:block;
	margin:0 auto;
	width:260px;
}
#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 ul .nav1{
	background-image: url(../images/arrow03.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: #31AF57;
	text-decoration: none;
	font-size: 110%;
	box-sizing: border-box;
	border: 1px #31AF57 solid;
	border-radius: 5px;
	background-color: #E4FFEE;
}
#leftnav ul .nav1 a:hover{
	color: #E02A36;
}
#leftnav figure{
	padding-top: 15px;
}
#leftnav img{
	/*width: 100%;*/
	width: 260px;
	height: 65px;
}
#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:#294785;
	opacity: 0.9;
	/*border:1px solid;*/
	border-radius:0px;
	color:#fff; /* 文字色 */
	display:inline-block;
	/*position:absolute;*/
	position: fixed;
	text-align:center;
	height:50px;
	width:50px; /* 大きさ */
	top:10px;right:5px; /* メニューを開くボタンの位置 */
	z-index:1001;
	border-radius: 12px;
	}
	#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 ;*/
		padding: 10px 0;
	}
	#leftnav ul{
		margin-bottom: 10px;
	}

	#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;
	}
}