@charset "utf-8";

h1{
color:rgb(64,186,141);
}

h2{
color:rgb(237,26,61);
}

h3{
color:rgb(0,0,0);
}

h4{
color:rgb(15,84,116);
}

h5{
color:rgb(255,127,80);
}

body{
background-color:rgb(206,197,240);
width: 750px;
margin: 20px auto;
padding: 10px;
border:#ff6600 5px solid;

/* ▼ 追加・変更：ページ全体の中身を中央に寄せる設定 ▼ */
text-align: center;
background: linear-gradient(yellow, white);
background-attachment: fixed; /* スクロールしても背景が動かないように固定 */
min-height: 100vh;           /* 画面全体の高さを確保 */
}

.sono1{
  color:rgb(0,0,0);
}

#sono2{
color:rgb(100,149,237);
}

.info-section li {
  color: green;
}

.sono3{
  color:red;
}

.marker {
  background-color: black; /* オレンジがかった黄色 */
  padding: 2px 5px;          /* 文字の周りに少し余裕を持たせる */
}

#hako{
width: 500px;
margin: 13px 0;
padding: 10px;
border: black 3px solid
}

.bold-list li {
  font-weight: bold; /* 太字にする */
}

body {
  /* 上が紫（初号機）、下が黒へのグラデーション */
  background: linear-gradient(yellow, white);
  background-attachment: fixed; /* スクロールしても背景が動かないように固定 */
  min-height: 100vh;           /* 画面全体の高さを確保 */
}

/*--------------------------*/

#big1{
font-size:60px;
}


#big2{
font-size:45px;
}

#big3{
font-size:30px;
}

#big4{
font-size:25px;
}

#big5{
font-size:35px;
}

/*--------------------------*/
/* 吹き出しの本体 */
.balloon {
  position: relative;
  display: inline-block;
  padding: 15px 20px;
  background-color: #f0f8ff; /* 背景色 */
  color: #000000;             /* 文字色 */
  border-radius: 10px;       /* 角丸 */
  max-width: 400px;
}

/* 吹き出しの三角（下向き） */
.balloon::after {
  content: "";
  position: absolute;
  top: 100%;                  /* 本体の一番下に配置 */
  left: 50%;                 /* 中央に配置 */
  margin-left: -10px;         /* 位置の微調整 */
  border-width: 10px;         /* 三角のサイズ */
  border-style: solid;
  border-color: #e0edff transparent transparent transparent; /* 上だけ色をつける */
}

/*--------------------------*/
/* ピクセル指定：固定サイズ（縦横比を維持するため片方はautoにする） */
.custom-size1 {
  vertical-align: top;
  width: 350px;
  height: auto; /* 自動で縦横比を調整 */
}

/* パーセント指定：親要素の幅に合わせて伸縮（レスポンシブ対応） */
.responsive-img {
  width: 100%;
  max-width: 300px; /* 最大サイズを制限する場合 */
  height: auto;
}

.custom-height-img {
    vertical-align: top;
    width: 350px;  /* 1枚目と同じ横幅（350px）に統一する */
    height: 480px; /* お好みの縦の高さ */
    
    object-fit: cover; /* 画像が歪まないように収め、余分な部分を切り抜く設定 */
    object-position: center; /* 切り抜く位置を中央にする */
}

/* ピクセル指定：固定サイズ（縦横比を維持するため片方はautoにする） */
.custom-size3 {
  width: 300px;
  height: auto; /* 自動で縦横比を調整 */
}

/* パーセント指定：親要素の幅に合わせて伸縮（レスポンシブ対応） */
.responsive-img {
  width: 100%;
  max-width: 600px; /* 最大サイズを制限する場合 */
  height: auto;
}