@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: 3rem 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: 480px) {
  .grid {
    grid-template-columns: repeat(2, 1fr); /* 480px以上で2列 */
  }
}
/* ========== グリッド（基本：スマホは1列）========== */
.grid-3 {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(1, 1fr); /* デフォルトは1列 */
}

/* 480px以上で2列に */
@media (min-width: 480px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 768px（または640px）以上で3列に */
@media (min-width: 768px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ========== カード共通 ========== */
.card {
  padding: 2.5rem 0 0;
}
.grid .card,
.grid-3 .card {
  padding: 2.5rem 0.3rem 2rem;
  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,
  .grid-3 {
    gap: 1.5rem;
  }
}
@media (max-width: 480px) {
  .card,
  .grid .card,
  .grid-3 .card{
    padding: 1.2rem 0 0;
  }
  .main-inner,
  section .sec-inner {
    padding: 1.5rem 1.2rem;
  }
}