@charset "utf-8";

/*---------------------------------------------------------
文字だけのバナー
トップページ（index.php）とサイドバー（sidebar.php）で使う。
header.php と header-1.php の両方から読み込む。

  .bannerLink    バナー本体（共通）
  .gridBanners   トップページ：2列に並べる
  .stackBanners  サイドバー：縦に積む
---------------------------------------------------------*/

/* バナー本体 */
.bannerLink {
	box-sizing: border-box;
	display:grid;
	place-items:center;
	width: 100%;
	height: 100%;
	border:solid 1px #b3b3b4;
	text-decoration: none;
}
.bannerLink__stringsWrap {
	display:inline-flex;
	flex-direction:column;
	text-align:left;
	line-height: 1;
	gap: 5px;
}
.bannerLink__string01 {
	display:block;
	color:#c43156;
	font-size:13px;
	font-weight:bold;
}
.bannerLink__string02 {
	display:block;
	color:#3a3a3a;
	font-size:11px;
}
.bannerLink:hover {
	background: #FDEEEA;
	border-color: #d86579;
}
.bannerLink:hover .bannerLink__string01 { color: #b2243c; }  /* 5.79:1 */

/* 修飾子：上下は中央、左右は左寄せ（サイドバーで使う） */
.bannerLink--alignStart {
	display:flex;
	align-items:center;
	padding-inline-start:1rem;
}


/* トップページ：2列（サービス事業案内） */
.gridBanners {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	box-sizing: border-box;
	gap: 7px;
	margin-right: 7px; /* .btn_area は中身より 7px 広いので打ち消す（top.css） */
}
.gridBanners__item {
	display: block;
	aspect-ratio: 261/55;
	width: 100%;
	height: auto;
	box-sizing: border-box;
}


/* サイドバー：縦に積む */
.stackBanners {
	display: grid;
	grid-auto-rows: 1fr; /* すべての段を、いちばん高い段の高さにそろえる */
	gap: 5px;
}
.stackBanners__item {
	display: grid;       /* 中の .bannerLink を段の高さいっぱいに広げる */
	min-height: 78px;
}