@charset "UTF-8";

/*================================================
 *  CSSリセット
 ================================================
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}*/

/*================================================
 *  一般・共通設定
 ================================================*/
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

html {
  font-size: 62.5%; /*font-size:10px;*/
}

body {
	margin: 0;
	padding: 0; /* 全体の背景色 */
	color: #2f2b3f; /* 全体の文字色 */
	font-size:1.6rem; /*font-size:14px;*/
	font-family: "メイリオ","Meiryo", Arial, Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
	background: #CCD8EC;
}

#container {
	width: 100%;
	max-width:1200px;
	margin: 0 auto; /* センタリング */
	background: #FFF;
	-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px #ccc;
	box-shadow: 0 0 5px #ccc;
	height:100%;
}

header {
	box-sizing:border-box;
	position:relative;
	width:100%;
	background:#FFF;
	padding: 25px;
}

.inner {
	position:relative;
	width: 100%;
	max-width:1200px;
	margin:0 auto;
}
.inner img {
	width: 100%;
	max-width: 600px;
	height: auto;
}
.inner2 {
	position:relative;
	width: 100%;
	max-width:1200px;
	margin:0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.inner2 div:first-of-type img {
	width: 100%;
	max-width: 600px;
	height: auto;
}
.inner2 div:last-of-type img {
	width: 100%;
	max-width: 200px;
	height: auto;
}


#header2 {
	margin: 0; /* ヘッダのマージン（上、左右、下） */
	padding: 30px 15px; /* ヘッダのパディング（上、左右、下） */
	width:100%;
	text-align: center;
	box-sizing: border-box; 
	background: -webkit-linear-gradient(#345693, #4872BD);
	background: -o-linear-gradient(#345693, #4872BD);
	background: linear-gradient(#345693, #4872BD);
}

#header2 img {
	width: 100%;
	max-width: 600px;
	height: auto;
}

#contents {
	overflow:hidden;
    width: 100%;
	max-width:1200px;
	margin:0 auto 0;
	background:#fff;
}

/* --- メイン --- */
#main {
	margin: 0 auto;
	max-width: 1000px;
	padding: 15px;
	min-height: 700px;
	height: 100%;
	background: rgba(255,255,255,0.6);
}

#main_in {
	margin: 0;
	padding: 25px 25px 0;
	background: #FFF;
	line-height: 1.7em;
}

footer {
	box-sizing:border-box;
	width:100%;
	margin:0 auto;
}

footer address {
	display: flex;
	text-align: left;
	font-style: normal;
}

/* new 更新情報 共通
-----------------------------------------------------*/
#content_info h3 {
	color: #FFF;
	font-size: 100%;
	padding: 4px 8px 3px;
	margin: 0;
	background-color: #064086;
}

#content_info .new dl {
	height: 150px;
	overflow: auto;
	margin: 0;
	padding: 0;
}

/* トップメニューのバナー表示 */
.bn_area img {
	width: 100%;
	height: auto;
	max-width: 210px; /* バナーの最大幅 */
}
.bn_area a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}

a {
	color:#00F;
	text-decoration:underline;
}
a:hover {
	color:#C39;
}

img {
	vertical-align:bottom;
	border-style:none;
}

.alpha a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}


/*================================================
 *  フッター
 ================================================*/
/* --- ▼フッタ内の設定開始 --- */
/* --- フッタ --- */
footer {
	/*position:fixed;
	left:0;
	bottom:0;
	z-index:50;*/
	background:#4872BD;
	clear: both;
	color: #FFF;
	font-size: 1.2rem;
	padding: 15px; /* フッタの上境界線 */
	text-align: center;
	width: 100%;
}

/* --- フッタメニュー --- */
footer a,
footer a:hover {
color: #FFF;
}

/* --- ▲フッタ内の設定終了 --- */

.copyright {
	margin-top: 15px;
}

/*================================================
 *  ページトップへの戻り
 ================================================*/
.totop {
	position:fixed;
	bottom:15px;
	right:15px;
}
.totop a {
	display:block;
	text-decoration:none;
}
.totop img {
	background: #064086;
}
.totop img:hover {
	background: #02326B;
}

/*================================================
 *  タブレット向けデザイン
 ================================================*/
@media screen and (max-width:991.98px) {
	header {
		z-index:2;
		box-sizing:border-box;
		position:fixed;
		top:0;
		left:0;
		width:100%;
		padding:15px 60px 15px 10px;
		border-bottom: 2px solid #CCD8EC;
	}

	.inner {
		width:100%;
	}

	#contents {
		box-sizing:border-box;
		width:100%;
		padding:0;
	}

	footer {
		width:100%;
	}
	footer address {
		flex-direction: column;
		text-align: center;
	}
	footer address div:first-of-type {
		padding-bottom: 5px;
	}
	footer address div:nth-of-type(2) {
		border-left: none;
	}

	#content_info { /* 以下 */
		margin: 0;
		padding: 0;
		background: #FFF;
		border-bottom: 1px solid #7CBBD5;
	}
	#content_info .new dt {
		padding: 5px 5px 0;
	}
	#content_info .new dd {
		margin: 0;
		padding: 0 5px 5px;
		border-bottom: 1px dotted #999;
	}

	.bn_area { /* 以下 */
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
	.bn_area a {
		margin: 10px;
	}

	.pcOnly {
    display: none !important;
  }
}

/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:767.98px) {
	.lock {
		position: fixed;
		z-index: -1;
		width: 100%;
		height: 100%;
		top: 0;
		right: 0;
	}

	#main {
		float:none;
		width:100%;
		padding-right:  0;
		padding-left:  0;
	}
	#main_in {
		margin: 0;
		padding: 10px;
	}
	h3 {
		margin: 0 0 5px;
		font-size: 1.8rem;
	}
}

/* 表示領域が992px以上の場合に適用するスタイル */
@media screen and (min-width: 992px) {
	#content_info { /* 以上 */
		margin: 0;
		padding: 0;
		background: #FFF;
		border-bottom: 1px solid #CCD8EC;
		font-size: 1.4rem;
	}
	#content_info .new dt {
		width:90px;
		float: left;
		min-height:12px;
		height:auto!important;
		padding:5px 10px;
	}
	#content_info .new dd {
		padding: 5px 5px 5px 7em;
		margin: 0 0 10px 0;
	}
	footer address {
		flex-wrap: wrap;
		justify-content: center;
	}
	footer address div:nth-of-type(2) {
		border-left: 1px solid #CCC;
		padding: 0 10px;
		margin-left: 10px;
	}

	.bn_area {
		display: flex;
		flex-direction: column;
		margin: 10px 5px;
	}
	.bn_area a {
		margin-bottom: 10px;
	}

	.spOnly {
    display: none !important;
  }
}