/* css/styles.css */

/* リセット & 基本（強化） */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;   /* ← height: 100% → min-height: 100vh に変更（これが重要！） */
}

/* ── ページ全体の背景 ──────────────────────────────── */
body {
  background-image: url('../img/allbg.jpg');  /* ← ここに全体背景画像のパス */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;          /* スクロールしても固定（好みで scroll に変更可）fixed */
}

/* メインコンテナ：フル幅追従を確実にする */
.container {
  width: 100%;
  max-width: none;
  margin: 0;                    /* auto を外して端寄せを解除（フル感UP） */
  padding: clamp(1rem, 3vw, 2rem);   /* ← 5vw → 3vw に下げて余白を抑える */
  container-type: inline-size;
}

/* タイポグラフィ：fluid + clamp でより自然にスケール */
h1 {
  font-size: clamp(1.8rem, 6vw, 4rem);
  line-height: 1.15;
  margin: clamp(1.5rem, 6vw, 3.5rem) 0 1rem;
}

h2 {
  font-size: clamp(1.4rem, 4.5vw, 2.8rem);
  margin: 2rem 0 1rem;
}

p, li {
  font-size: clamp(1rem, 3.2vw, 1.25rem);
  margin-bottom: clamp(1rem, 3.5vw, 1.75rem);
}

/* 画像：フル幅強化（変更なしでOK） */
img {
  width: 100%;
  height: auto;
  display: block;
  /* border-radius: 12px; */
  /* box-shadow: 0 6px 16px rgba(0,0,0,0.08); */
  object-fit: cover;
}

/* カード：常に縦1列、幅フル追従 */
/* ── ここから変更・追加 ── カード共通スタイル ──────────────────────── */
.cards {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin: clamp(2rem, 6vw, 5rem) 0;
}

.card {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: clamp(2rem, 5vw, 4rem);          /* 内側余白を少し増やして文字が背景に埋もれにくく */
  border-radius: 5px;                      /* baseradius 16px */
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);    /* 影を強めると背景画像が映える */
  color: white;                              /* 基本白文字（背景が暗めの場合） */
  text-shadow: 1px 1px 4px rgba(0,0,0,0.8);  /* 文字に影で視認性UP */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* オーバーレイで背景画像を暗くして文字を確実に読みやすく */
  position: relative;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);           /* 半透明黒オーバーレイ（濃さは0.3?0.6で調整） */
  border-radius: 5px;      /* baseradius 16px */
  z-index: 1;
}

.card > * {
  position: relative;
  z-index: 2;                                /* タイトル・本文をオーバーレイの上に */
}

/* ── 各カード専用の背景画像（ここを増やしていく） ────────────────────── */
.card--bg1 { background-image: url('../img/cardbg01.jpg'); }
.card--bg2 { background-image: url('../img/cardbg02.jpg'); }
.card--bg3 { background-image: url('../img/cardbg03.jpg'); }
/* 必要に応じて追加
.card--bg4 { background-image: url('/images/card-bg-4.webp'); }
*/

/* 読みやすさのためのテキスト幅制限（背景画像がある場合は少し緩めてもOK） */
.card p,
.card li,
main p {
  max-width: 80ch;                 /* 75ch → 80ch に少し緩和（好みで） */
  margin-left: auto;
  margin-right: auto;
}

/* Container Queries で大画面時の微調整（オプションだが効果的） */
@container (min-width: 900px) {
  .card {
    padding: clamp(2.5rem, 6vw, 5rem);
    border-radius: 5px;   /* baseradius 16px */
  }
}

@container (min-width: 1400px) {
  .card {
    max-width: 1200px;             /* 超ワイド画面でもカードを適度に抑える */
    margin: 0 auto;
  }
}

/* 大画面での全体ゆとり調整（任意・好みで削除可） */
@media (min-width: 1800px) {
  .container {
    padding: clamp(2rem, 8vw, 6rem);
  }
}