/* ベースとなる段落の共通設定（必要に応じて） */
p {
  line-height: 1.8;
  margin-bottom: 20px;
}

/* ① 標準の幅（例：900px） */
.w-normal {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* ② 狭い幅（例：550px） */
.w-narrow550 {
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
}

/* ③ 狭い幅（例：700px） */
.w-narrow {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

body {
    /* 1. 背景画像のパスを指定（画像のファイル名やURL） */
    background-image: url("background_hana.jpg");

    /* 2. 画像がタイル状に繰り返されるのを防ぐ */
    background-repeat: no-repeat;

    /* 3. 画像を画面いっぱいに、比率を保ったまま拡大縮小する */
    background-size: cover;

    /* 4. 画像の表示位置を画面の中央に固定する */
    background-position: center;

    /* 5. スクロールしても背景画像が動かないように固定する（お好みで） */
    background-attachment: fixed;

    /* 文字が見えづらくならないように最低限の余白を設定 */
    margin: 0 5px;
    padding: 0;
}

/* （参考）文字を読みやすくするためのコンテンツ用スタイル */
.content {
    color: #522E00; /* 文字色 */
    text-shadow: 1px 1px 4px rgba(0,0,0,0.4); /* 文字に影をつけて見やすくする */
    padding: 50px;
}


/* ページ内の画像スクロール */
.scroll-box {
  width: 820px;       /* 枠の横幅（画面いっぱいに広げる場合は100%を指定） */
  height: 320px;     /* 枠の高さ（この高さを超えるとスクロールする） */
  overflow: auto;    /* はみ出た場合に自動でスクロールバーを表示 */
  border: 1px solid #ccc; /* 枠線（分かりやすくするため） */
  margin: 0 auto; /* 👇 枠自体を左右中央に寄せる設定 */
}

.scroll-box img {
  width: auto;       /* 画像の本来のサイズを維持 */
  height: auto;      /* 画像の本来のサイズを維持 */
  display: block;    /* 余計な隙間をなくす */
}