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

#contents {
	background: #FFF;
}

#main {
  background: #fad6df url("../images/top_main02_bg.png");
  background-size: cover;
	padding: 0;
	position: relative;
}

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

.main_top {
  padding: 60px;
  text-align: center;
}
div.info-wrap {
	position: absolute;
	bottom: 0px;
	right: 0;
	padding: 20px 20px 5% 20px;
}

div.info-wrap div {
	padding-bottom: 10px; 
}
div.info-wrap img {
	max-width: 550px;
}

/* new 更新情報 共通
-----------------------------------------------------*/
#content_info {
  background: rgba(255,248,251,0.80);
}

#content_info .new dl {
  height: auto;
  min-height: 120px;
  max-height: 250px;
  overflow: auto;
}

#content_info h3 {
	position: relative;
	color: #59BDA3;
	padding: 0 0 12px 0;
	line-height: 1.2;
	margin: 0;
  background: transparent;
	font-size: 2.2rem;
	font-weight: 700;
	border-bottom: 3px solid #53AE4B;
}

#content_info .new dt {
	color: #7693CB;
	font-weight: 700;
}

#content_info .new dd {
  border-bottom: 1px dotted #ADB94F;
}

/* トップメニューのバナー表示 */
.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)";
}

.poster-area {
	margin-top: 24px;
	text-align: center;
}

.poster-area a {
	position: relative;
	display: inline-block;
	max-width: 180px;
	color: #FFF;
	text-decoration: none;
}

.poster-area img {
	width: 100%;
	max-width: 180px;
	height: auto;
	border: 4px solid rgba(255,255,255,0.75);
	box-shadow: 0 10px 24px rgba(98,43,78,0.22);
}

.poster-area span {
	position: absolute;
	left: 4px;
	right: 4px;
	bottom: 4px;
	padding: 8px 6px 9px;
	background: rgba(182,62,123,0.78);
	color: #FFF;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.2;
	backdrop-filter: blur(3px);
}

.poster-area span i {
	display: block;
	margin-bottom: 4px;
	font-size: 1.6rem;
}

.poster-area a:hover span {
	background: rgba(217,130,50,0.82);
}

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

	.top_l_b {
		display: none;
	}
}

/* 表示領域が1199.98px以下の場合に適用するスタイル */
@media print, screen and (max-width: 1199.98px) {
	.bn_area { /* 以下 */
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
	.bn_area a {
		margin: 10px;
	}
}

/* 表示領域が1200px以上の場合に適用するスタイル */
@media screen and (min-width: 1200px) {
/*	#contents {
		width: 100%;
		max-width: 1400px;
		margin: 0 auto;
		display: grid; 
		grid-template-columns: 250px auto 250px; 
		grid-template-rows: min-content auto;
		grid-template-areas: 
			"left-contents middle-contents right-contents";
	}
	#left-contents {
		padding: 10px;
	}
	#right-contents {
		margin: 0;
		padding: 0;
		position: relative;
	}*/

	.bn_area {
		display: flex;
		flex-direction: column;
		text-align: center;
	}
	.bn_area {
		margin-top: 10px;
	}
	.bn_area a {
		margin-bottom: 10px;
	}
}

/* 表示領域が992px以上の場合に適用するスタイル */
@media screen and (min-width: 992px) {
	#contents {
		width: 100%;
		max-width: 1200px; /* 追加 */
		margin: 0 auto; /* 追加 */
		padding: 0;
		display: grid; 
		grid-template-columns: 250px 1fr; 
		grid-template-rows: 1fr min-content; 
		gap: 0px 0px; 
		grid-template-areas: 
    "left-contents middle-contents"
    "left-contents right-contents";
	}
	#left-contents {
		padding: 50px 15px 24px;
		background: #CD7AA0;
	}

	/* トップメニューのバナー表示 */
	.top_l_b {
		visibility: visible;
	}
	.top_l_s {
		display: none;
	}
	#middle-contents,
	#main_in,
	#main {
		min-height: 100%;
	}
	#middle-contents {
		display: flex;
	}
	#main_in {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	#main {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		height: 100%;
	}
	#content_info {
		margin-top: auto;
	}
}

/* 表示領域が991.98px以下の場合に適用するスタイル */
@media print, screen and (max-width: 991.98px) {
	#contents {
		width: 100%;
		display: grid; 
		grid-template-columns: 1fr; 
		grid-template-rows: min-content min-content 1fr;
		gap: 0px 0px; 
		grid-template-areas: 
			"left-contents"
			"middle-contents"
			"right-contents";
	}
	#left-contents {
		padding: 0;
		background: #BA477B;
	}
	.top_l_b {
		display: none;
	}
	.top_l_s {
		visibility: visible;
		margin: 10px
	}
}

/* 表示領域が768px以上の場合に適用するスタイル */
@media screen and (min-width: 768px) {
  #content_info {
    padding: 24px 26px;
  }
	#content_info .new dt {
		width:110px;
		float: left;
		min-height:12px;
		height:auto!important;
		padding:10px 15px 10px 10px;
	}
	#content_info .new dd {
		padding: 10px 14px 10px 8.5em;
		margin: 0;
	}
}

/* 表示領域が767.98px以下の場合に適用するスタイル */
@media print, screen and (max-width: 767.98px) {
	#middle-contents {
		margin: 0;
	}
	#main {
		background-position: top center;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
  
  .main_top {
    padding: 60px 30px;
  }

	div.info-wrap {
		padding: 10px 10px 2% 10px;
	}
	div.info-wrap div {
		padding-bottom: 5px; 
	}

  #content_info {
    padding: 14px 16px;
  }

  #content_info h3 {
		padding: 0 0 8px 0;
		font-size: 1.8rem;
	}

	#content_info .new dl {
		font-size: 1.4rem;
	}
	#content_info .new dt {
		padding: 10px 12px 2px;
		width: auto;
		float: inherit;
		min-height:auto;
		height:auto!important;
	}
	#content_info .new dd {
		padding: 0 12px 10px;
	}
}

/* 表示領域が575.98px以下の場合に適用するスタイル */
@media print, screen and (max-width: 575.98px) {
  .main_top {
    padding: 40px 15px;
  }
}