@charset "utf-8";
/* contents.css — ページ固有スタイル
   基盤: basic.css
   ----------------------------------------------------------------
   設計方針:
   - カードは .card に統一。
       .card           → 横1列リスト型（.sec-inner 直下に並べる）
       .grid .card     → 横2列グリッド型（.grid の中に入れる）
   - ページタイトルエリア（.main-bar）は <main> の外に配置
   - section の背景色は nth-child により自動で交互切り替え
   ---------------------------------------------------------------- */

/* ========== 変数 ========== */
:root {
 --black:     #111111;
 --white:     #ffffff;
 --gray-bg:   #f0f0f0;
 --lita-blue: #1c2975;
 --gray-text: #555555;
 --border:    #cccccc;
 --fb: 'Noto Sans JP', sans-serif;
}
/* ========== リセット ========== */
body {
	background: var(--white);
	color: var(--black);
	font-family: var(--fb);
	margin: 0;
}
*, *::before, *::after {
	box-sizing: border-box;
}
a {
	color: inherit;
	text-decoration: none;
}
img {
	display: block;
	max-width: 100%;
}
/* basic.css 側の h2 装飾を上書き（このページでは非表示） */
h2::after {
	display: none !important;
}
/* ========== ページタイトルエリア（.main-bar）========== */
.main-bar {
	background: var(--gray-bg);
	border-bottom: 1px solid var(--border);
	color: var(--black);
}
.main-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 3rem 2.5rem;
}
h1 {
	font-family: var(--fb);
	font-size: clamp(1.8rem, 5vw, 2.8rem);
	font-weight: 900;
	color: var(--lita-blue);
	letter-spacing: -0.01em;
	margin-bottom: 1rem;
	text-align: left;
}
p {
	font-size: 1rem;
	color: var(--gray-text);
	line-height: 1.7;
	text-align: left;
}
/* ========== セクション共通 ========== */
section {
	margin: auto;
}
section .sec-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 6rem 2.5rem;
	text-align: left;
}
/* sectionのnth-childで背景色を自動交互切り替え（グレー→白→グレー…） */
main section:nth-child(odd) {
	background-color: var(--white);
}
main section:nth-child(even) {
	background-color: var(--gray-bg);
}
h2 {
	text-align: left;
}
/* ========== グリッド（横2列）========== */
.grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(1, 1fr); /* スマホは1列 */
}
@media (min-width: 640px) {
.grid {
	grid-template-columns: repeat(2, 1fr); /* 480px以上で2列 */
}
}
/* ========== 3列グリッド（横3列）========== */
.grid-3 {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(1, 1fr);
}
 @media (min-width: 640px) {
.grid-3 {
	grid-template-columns: repeat(3, 1fr);
}
}
/* ========== カード共通 ========== */
.card {
	padding: 2rem 0 0;
}
.card.bgGray{ padding:2rem; background-color:var(--gray-bg); margin-top:2rem; }
.grid .card, .grid-3 .card {
	padding: 2rem 0.5rem;
	border-bottom: 1px solid var(--border);
}
.card h3 {
	font-family: var(--fb);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--black);
	border-bottom: 0;
	margin-bottom: 0.5rem;
	padding-bottom: 0;
	line-height: 1.2;
	text-align: left;
}
.card p {
	font-size: 0.975rem;
	color: var(--gray-text);
	line-height: 1.85;
	margin: 0;
	text-align: left;
}

/* ========== レスポンシブ ========== */
@media (max-width: 768px) {
.grid {
	gap: 1.5rem;
}
}
@media (max-width: 640px) {
.card,  .grid .card {
	padding: 1.2rem 0;
}
.card.bgGray{ padding:1.2rem; margin-top:1.2rem; }

.grid .card, .grid-3 .card {
	padding: 1.2rem 0.2rem;
}
.main-inner,  section .sec-inner {
	padding: 2rem 1.2rem;
}
}