/* 外枠の制限をなくして画面いっぱいに */
.container {
  width: 100%;       /* 画面の幅いっぱいに広げる */
  max-width: none;   /* 幅の制限を解除 */
  margin: 0;
}

/* カード風レイアウト（全体の枠） */
.card {
  display: flex;
  flex-direction: column; /* ★要素を「縦並び」にする命令 */
  align-items: center;    /* ★写真やテキストを中央に揃える（左揃えにしたい場合は flex-start） */
  gap: 24px;              /* タイトル、写真、文章の間の余白 */
  
  background: #ffffff;
  padding: 40px 20px;
  width: 100%;  /* ★画面幅いっぱいに広げる命令 */
  box-sizing: border-box; /* パディングを含めて100%にするおまじない */
}

/* ① タイトルエリアのスタイル */
.title-box {
  text-align: center;     /* タイトル文字を中央寄せ */
}

.title-box h2 {
  margin: 0 0 6px 0;
  font-size: 1.6rem;
  color: #1a252f;
}

.title-box .subtitle {
  margin: 0;
  font-size: 0.9rem;
  color: #7f8c8d;
  border-bottom: 1px solid #cbd5e1;
}

/* ② 写真エリアのスタイル */
.photo-box {
  width: 100%;
}

.clean-photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid #eef0f2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ③ コンテンツ（文章）エリアのスタイル */
.text-box {
  width: 100%;
  line-height: 1.8;
  color: #333333;
}