/* 共通スタイル */

/*
モバイルファースト
横幅600px以上
@media (min-width: 600px) {
横幅768px以上
@media (min-width: 768px) {
横幅1025px以上
media (min-width: 1025px) {


PCファースト
横幅1024px以下
@media (max-width: 1024px) {
横幅767px以下
@media (max-width: 767px) {
横幅599px以下
@media (max-width: 599px) {

min-width
max-width
どとらも後ろの値を含む

古いページ 幅800px（IE _width: +20px）、
左メニュー 210px、
右メニュー 562px
だったので、右を530pxにしている。
内容書き換えと共に、幅を広げることを考える

iPhone/iPad/Apple Watch画面サイズ
https://qiita.com/tomohisaota/items/f8857d01f328e34fb551
*/

/*******************************************************************/
/* 全体の設定 */
* {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}

body {
	background-color: #EAEAEA;	/*#0D1546; 濃紺  DBF2FC 水色 #EAEAEA*/
	word-break: break-all;
	text-align: center;
}

strong {
	font-style: normal;
	font-weight: normal;
}

em {
	font-style: normal;
}

img {
	max-width: 95%;
	height: auto;
/*
	border: 1;
	align: center;
	vertical-align: middle;
*/
}
/*******************************************************************/


/*******************************************************************/
/* 全体枠の設定 */
#container {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
}

@media (min-width: 768px) {
	#container {
		width: 95%;
	}
}
/*******************************************************************/


/*******************************************************************/
/* コンテンツ */
#content {
	width: 100%;
	float: left;
	background-color: #FFFFFF;
/*display: flex;*/
}

@media (min-width: 768px) {
	#content {
		width: 100%;
		padding-top: 20px;
	}
}
/*******************************************************************/


/*******************************************************************/
/* ヘッダ（サイト名・サイト説明）の設定 */
#header {
	width: 100%;
	justify-content: space-between;	/* 左右均等分布 */
	background-color: #FFFFFF;
	padding-bottom: 2px;
}

#header img{
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

#header_sitename {
	clear: both;
	position: absolute;
	font-size: 18px;
	color: #FFFFFF;
	padding-left: 10px;
	padding-top: 35px;
	padding-bottom: 5px;
	font-weight: bold;
}

#header_syokai {
	font-size: 13px;
	color: #000077;
	font-weight: bold;
	font-size: 12px;
	line-height: 120%;
	padding-left: 20px;
	padding-right: 5px;
	padding-top: 60px;
	padding-bottom: 5px;
	text-align: left;
	float: right;
}

@media (min-width: 768px) {
	#header {
		width: 100%;
	}
	
	#header_sitename {
		width: 230px;
		_width: 250px;
		padding-left: 15px;
		padding-top: 42px;
		padding-bottom: 40px;
		float: left;
	}
	
	#header_syokai {
		width: 520px;
		_width: 550px;
		padding-right: 10px;
		padding-top: 42px;
		padding-bottom: 15px;
		text-align: left;
		font-size: 13px;
		line-height: 130%;
		float: right;
	}
}

#header a {
	color: #000077;
}

#header a:hover {
	color:#000077;
}

#header a:visited {
	color:#000077;
}
/*******************************************************************/


/*******************************************************************/
/* 左メニュー */
#left_menu {
	z-index: 99;	/* モバイル時フッタが上に来るのを防ぐため */
	float: left;
	width: 250px;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
}

/* ここはPCファースト */
@media (max-width: 767px) {
	/* モバイルだけ画面上部へ背景色を付けて表示 */
	#left_menu {
		width: 100%;
		height: 30px;
		position: relative;
		background-color: #7C97AE;
	}
	
	/* モバイルだけ画面最上部までスクロール後固定 */
	/* fixedプロパティがなければ固定されない */
	/* javaScriptからfixedクラスを設定 */
	/* https://webdesignday.jp/inspiration/technique/css/4166/ */
	#left_menu.fixed{
		position: fixed;
		top: 0;
	}
}

.left_menu_head {
	font-size: 14px;
	font-weight: bold;
	background-color: #7C97DE;
	color: #FFFFFF;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 15px;
	border: 1px solid #CCCCCC;
	background: url(img/left_menu_head.gif);
}

.left_menu_2nd {
/*	font-size: 12px;*/
	font-size: 14px;
	padding-top: 8px;
	padding-right: 0px;
	padding-left: 20px;
	padding-bottom: 6px;
	margin-top: 5px;
	margin-left: 10px;
	background: url(img/menu_icon.gif) no-repeat;
	background-position: left center;
}

.left_menu_3rd {
/*	font-size: 12px;*/
	font-size: 14px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 25px;
	margin-left: 25px;
	background: url(img/tree.gif) no-repeat;
}

#left_menu ul {
/*	font-size: 12px;*/
	font-size: 14px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 30px;
	margin: 0px;
}

#left_menu li {
	margin-bottom: 2px;
}

#left_menu img {
	text-align: center;
	margin-left: 10px;
}

#left_menu_text {
/*	font-size: 12px;*/
	font-size: 14px;
	text-align: left;
	margin: 10px;
}

.left_menu_top img {
	border: 0;
	margin: 3px;
}

#now_page{
	font-weight:bold;
	background-color: #d3d3d3;
}

.left_nav {
	margin-left: 20px;
	margin-right: 20px;
	color: #FFFFFF;
	font-size: 14px;
}

.left_nav a {
	color: #FFFFFF;
	text-decoration: none;
}

.left_nav a:hover {
	color: #FFFFFF;
	text-decoration: none;
}

@media (min-width: 768px) {
	.left_nav {
		display: none;
	}
}
/*******************************************************************/


/*******************************************************************/
/* メニューを左に隠しておく */
/* 隠しチェックボックスを置いてチェックの有り無しで表示非表示を切り替える */
/* https://saruwakakun.com/html-css/reference/nav-drawer */
/* マニュアル用の左メニューは動きが違うのでmanual.cssで上書きをする */
/* ここbase.cssではマニュアル以外のcssを記述 */

/* ここはPCファースト */
/* PCではクリックでメニュー表示のエレメント類を無効にする */

/* チェックボックス等非表示 */
.left-unshown {
	display:none;
}

/* クリックでメニュー表示 */
#left-open {
	display:none;
}

/* インデックスの中身 */
#left-content {
	padding-bottom: 20px;
}

/* ×（Close）非表示 */
#left-close-x {
	display: none;
}

@media (max-width: 767px) {
	/* インデックス格納部分 */
	#left-drawer {
		position: relative;
		padding-left: 10px;
	}
	
	/* チェックボックス等非表示 */
	.left-unshown {
		display:none;
	}
	
	/* クリックでメニュー表示 */
	#left-open {
		display: inline-block;
		height: 22px;
		vertical-align: middle;
		
		color: #FFFFFF;
		padding-top: 8px;
		padding-left: 30px;
		cursor: pointer;
		background: url(img/ya_small_right.png);
		background-repeat: no-repeat;
		background-position: left center;
	}
	
	/* メニュー後ろの薄黒カバークリックでメニュー非表示 */
	#left-close {
		display: none;
		position: fixed;
		z-index: 99;
		top: 0;	/*全体に広がるように*/
		left: 0;
		width: 100%;
		height: 100%;
		background: black;
		opacity: 0;
		transition: .3s ease-in-out;
	}
	
	/* ×（Close）表示 */
	#left-close-x {
		display: block;
		width: 90%;
		font-size: 16px;
		font-weight: bold;
		color: #006DAF;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 15px;
		border-bottom: 25px;
	}
	
	/* https://qiita.com/chocolamint/items/67d25933880404c93db0 */
	/* https://qiita.com/fumi_nagaoka/items/878107e739ff3309948f */
	/* https://www.webantena.net/css/css3-webkit-overflow-scrolling/ */
	/* インデックスの中身 */
	#left-content {
		/* ↓もともとはauto iOSでのスクロールをチェックするためscrollにして-webkit-overflow-scrollingを入れている */
		/*overflow: auto;*/
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
		/* ↑ */
		
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;	/*最前面に*/
		width: 90%;	/*右側に隙間を作る*/
		max-width: 330px;	/*最大幅*/
		height: 100%;
		background: #fff;	/*背景色*/
		transition: .3s ease-in-out;	/*滑らかに表示*/
		-webkit-transform: translateX(-105%);
		transform: translateX(-105%);	/*左に隠しておく*/
	}
	
	/* チェックが入ったら表示 */
	#left-input:checked ~ #left-close {
		display: block;	/*カバーを表示*/
		opacity: .5;
	}
	
	#left-input:checked ~ #left-content {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);	/*中身を表示*/
		box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}
	
	/* ×クリックでメニュー非表示 */
	#left-input:checked ~ #left-close-x {
		display: block;
		opacity: .5;
	}
}
/*******************************************************************/


/*******************************************************************/
/* フッター */
#footer {
	z-index: 1;	/* モバイル時フッタが上に来るのを防ぐため */
	clear: both;
	bottom: 0px;
	left: 0px;
	position: relative;
	
	text-align: center;
	font-size: 10px;
	color: #000077;
	line-height: 200%;
	
	padding-top: 15px;
	padding-bottom: 15px;
	background-color: #9CDCF7;
	border-top: 1px solid #CCCCCC;
}

#footer p {
	font-size: 10px;
	color: #FFFFFF;
}

#footer a {
	color: #000077;
	text-decoration: none;
}

@media (min-width: 768px) {
	#footer {
		height: 40px;
		font-size: 12px;
		line-height: 100%;
	}
	
	#footer p {
		font-size: 12px;
	}
	
	#footer a {
	}
}
/*******************************************************************/


/*******************************************************************/
/* ページのトップへ */
.page_top {
	z-index: 2;	/* フッタが上に来るのを防ぐため */
	display: none;
}

@media (min-width: 768px) {
	.page_top {
		/* ▼表示位置を画面の右下に固定 */
		position: fixed;
		bottom: 20px;
		right: 10px;
		
		/* 円を描画 */
		width: 70px; 
		height: 70px;
		border-radius: 50px;       /* ←角丸の半径 */
		
		/* 中央に文字を表示 */
		line-height: 70px;
		text-align: center;
		vertical-align: middle;
		
		display: block;
	
		background-color: #808080;
		opacity: 0.5;             /* ←透明度 */
		font-size: 120%;
		font-weight: bold;
		margin: 0px;
		padding: 0px;
	}
	
	.page_top a {
		color: white;
		text-decoration: none;
	}
	
	.page_top a:hover {
		color: white;
		text-decoration: underline;
	}
}
/*******************************************************************/


/*******************************************************************/
/* indexページへ */
.to_home {
	z-index: 2;	/* フッタが上に来るのを防ぐため */
	display: none;
}

@media (min-width: 768px) {
	.to_home {
		/* ▼表示位置を画面の右下に固定 */
		position: fixed;
		bottom: 20px;
		left: 10px;
		
		/* 円を描画 */
		width: 70px; 
		height: 70px;
		border-radius: 50px;       /* ←角丸の半径 */
		
		/* 中央に文字を表示 */
		line-height: 70px;
		text-align: center;
		vertical-align: middle;
		
		display: block;
	
		background-color: #808080;
		opacity: 0.5;             /* ←透明度 */
		font-size: 120%;
		font-weight: bold;
		margin: 0px;
		padding: 0px;
	}
	
	.to_home a {
		color: white;
		text-decoration: none;
	}
	
	.to_home a:hover {
		color: white;
		text-decoration: underline;
	}
}
/*******************************************************************/


/*******************************************************************/
/* 強調 */
.bg_yellow_bold {
	background-color: #FFFF86;
	font-weight: bold;
}

.moji_red_bold {
	color: #FF4A4A;
	font-weight: bold;
}

.moji_black_bold {
	font-weight: bold;
}
/*******************************************************************/


/*******************************************************************/
.text-right {
	text-align: right;
}

.text-center {
	text-align: center;
}

.dir {
	 line-height: 220%;
}
/*******************************************************************/