/* banner コンテナ：最大幅1120pxで中央寄せ、通常は2列 */
.banner {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 左右等分 */
gap: 2rem 1.5rem;
box-sizing: border-box;
align-items: start;

max-width: 1120px; /* 最大幅1120px */
width: 100%; /* ビューポートが狭ければ親幅にフィット */
margin: 0 auto; /* 中央寄せ */
padding: 0 1rem; /* 端に張り付かないよう左右余白（任意で調整） */
}

/* 各セルを確実にセル内に収める */
.banner > div {
box-sizing: border-box;
width: 100%;
}

/* 内側ラッパーを幅100%に */
.banner > div > div {
width: 100%;
box-sizing: border-box;
margin: 0; / 必要なら margin-bottom を個別指定 */
text-align: center;
}

/* a と img をブロック化して余白・行間を排除 */
.banner a {
display: block;
width: 100%;
box-sizing: border-box;
text-align: center;
}

.banner img {
display: block;
width: 100%; /* 親セルにフィット */
height: auto; /* アスペクト比を維持 */
max-width: 100%;
box-sizing: border-box;
}

/* レスポンシブ：画面が狭くなったら1列に切替（ここは必要に応じて閾値を変更） */
@media (max-width: 900px) {
.banner {
grid-template-columns: 1fr; /* 1列 */
gap: 1rem; /* 小さい画面では隙間を調整 */
padding: 0 1rem;
}
}