@charset "utf-8";
/* CSS Document */
/* #right-contents、#middle-contents、#left-contents の3カラムパターン */

#main {
	padding: 0;
	position: relative;
}

#main img {
	width: 100%;
	height: auto;
}

.news {
  background: #fff;
  padding: 30px 32px;
}

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

@media print {
	.top_l_s {
		margin-bottom: 1em;
	}

	.top_l_b {
		display: none;
	}
}

/* 表示領域が992px以上の場合に適用するスタイル */
@media screen and (min-width: 992px) {
  .bn_area {
		display: flex;
		flex-direction: column;
		text-align: center;
	}
	.bn_area {
		margin-top: 10px;
	}
	.bn_area a {
		margin-bottom: 10px;
	}

  /* トップメニューのバナー表示 */
	.top_l_b {
		visibility: visible;
	}
	.top_l_s {
		display: none;
	}
}

/* 表示領域が991.98px以下の場合に適用するスタイル */
@media print, screen and (max-width: 991.98px) {
	.top_l_b {
		display: none;
	}
	.top_l_s {
		visibility: visible;
		margin: 10px
	}

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

/* 表示領域が767.98px以下の場合に適用するスタイル */
@media print, screen and (max-width: 767.98px) {
	#middle-contents {
		margin: 0;
	}
}