/* 全体の設定
------------------------------ */

body {
background-image: url("back.png");
background-repeat: no-repeat;
background-position: right top;
background-repeat: repeat-y;
background-attachment: scroll;
padding-top: 10px;
padding-left: 50px;
}

/* 個別の設定
------------------------------ */

h1{
  font-size: 20px;
  color: green;
}
h2{
  font-size: 18px;
  color: rgb(255, 96, 228);
}
h3{
  font-size: 18px;
  color: rgb(63, 155, 241);
}



/* 全体の枠組み */
.custom-card {
  width: 100%;
  max-width: 600px;       /* 本体の最大横幅（お好みで調整してください） */
  margin: 20px left;      /* 画面左寄りに配置 */
  border: 1.5px solid #000000; /* 外枠の線の太さと色 */
  border-radius: 10px;    /* 角の丸み */
  background-color: #fff; /* 背景色 */
  box-sizing: border-box;
  overflow: hidden;       /* 中身が角の丸みからはみ出るのを防ぐ */
}

/* タイトルエリア */
.card-header {
  padding: 10px 10px;     /* 内側の余白（上下、左右） */
  border-bottom: 1.5px solid #1a2846; /* タイトル下の青い区切り線 */
}

/* タイトルの文字スタイル */
.card-title {
  margin: 0;
  font-size: 18px;        /* 文字の大きさ */
  font-weight: normal;    /* 文字の太さを通常に */
  color: #333;
}

/* 箇条書きエリア */
.card-body {
  padding: 15px;          /* 内側の余白 */
}

/* 箇条書きのリストスタイル */
.card-list {
  margin: 0;
  padding-left: 20px;     /* 点（・）の左側のスペース */
  list-style-type: disc;  /* 一般的な黒丸（・） */
}

.card-list li {
  font-size: 16px;        /* 文字の大きさ */
  line-height: 1.0;       /* 行間 */
  margin-bottom: 5px;    /* 箇条書き同士の間隔 */
  color: #333;
}

/* 最後の箇条書きだけ下の余白を無くす */
.card-list li:last-child {
  margin-bottom: 0;
}

.image-gallery {
  display: flex;
  flex-wrap: wrap; /* スマホなどで画面幅を超えたら改行する */
  gap: 10px; /* 画像と画像の間の隙間 */
}

.image-gallery img {
  width: 300px;
  height: auto; /* 縦横比を維持 */
}