/* =========================================================================
   トップページ専用
   静的サイト site/index.html の <head> にあった4つ目の <style> の内容。
   下層ページと .sec の padding が異なる（トップ 72px / 下層 64px）ため、
   page.css と読み分けている。
   ========================================================================= */

body {
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	text-wrap: pretty;
}

@media (min-width: 769px) {
	.cn-mobilebar {
		display: none !important;
	}
}

@media (max-width: 1024px) {
	.c2 {
		grid-template-columns: 1fr !important;
	}

	.c3 {
		grid-template-columns: 1fr !important;
	}

	.sec {
		padding-block: 72px !important;
	}

	.cn-eq {
		grid-template-columns: 1fr !important;
	}

	.cn-flow {
		grid-template-columns: 1fr 1fr !important;
	}

	.cn-prow {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 8px !important;
	}

	.cn-news {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 768px) {
	/* 下部固定バーの分だけ本文の下に余白を確保する */
	body {
		padding-bottom: 56px;
	}

	.cn-circ {
		grid-template-columns: 1fr !important;
		gap: 56px !important;
	}

	.cn-hbtn {
		width: 100%;
		justify-content: space-between !important;
	}

	.cn-flow {
		grid-template-columns: 1fr !important;
	}

	/* お知らせ欄：日付とタイトルを縦積みにする */
	.cn-newsrow {
		flex-direction: column;
		align-items: flex-start !important;
		gap: 4px !important;
	}
}
