/* 全体のリセットと背景色設定 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
background-color: #f0f0fa; /* 画像のような薄い紫・グレー系の背景色 */
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 20px; /* 画面端の余白 */
    }

/* 全体を包むコンテナ（PCでの最大幅を設定してレスポンシブ対応） */
.container {
  width: 100%;
  max-width: 800px; /* PCで見ても広がりすぎないように制限 */
display: flex;
  flex-direction: column;
  gap: 15px; /* カードとカードの間の隙間 */
}

/* 共通のカードスタイル */
.card {
  background-color: #ffffff; /* 白い背景 */
  border-radius: 8px;        /* 角の少しの丸み */
  padding: 10px 15px;             /* 内側の余白 */
  font-size: 16px;
  color: #333333;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02); /* ほんの少しの影（お好みで） */
}

/* 各カードの高さ（画像に合わせた目安です。テキスト量で自動で伸びるようにもできます） */
.card-small {
/*  min-height: 80px; */
}

.card-large {
  /* min-height: 400px; 中央の広いエリア */
}

.card-medium {
  min-height: 120px;
}