@charset "utf-8";
/* CSS Document */

.message{
    text-align: center;
}

/* ▼ 背景画像を表示するブロック全体の設定 */
.visual {
  width: 100%; /* 横幅を100%にして画面いっぱいに表示 */
  height: 320px; /* 高さを固定（必要に応じて調整可能） */
  background-image: url("../images/visual.jpg"); /* 表示する背景画像のパス */
  background-size: cover; /* 画像の縦横比を保ったまま要素全体をカバー */
  background-position: center; /* 画像の中心を基準に表示 */
  position: relative; /* 子要素や疑似要素の配置基準にする */
}

/* ▼ 背景画像の上に黒い半透明フィルターを重ねる（文字を読みやすくする） */
.visual::after {
  content: ""; /* 疑似要素を生成（空の内容） */
  position: absolute; /* .visual を基準に絶対配置 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 50% 透過の黒いオーバーレイ */
}

/* ▼ 背景画像の中央に表示されるテキストブロックの設定 */
.visual-text {
  position: absolute; /* .visual を基準に絶対配置 */
  top: 50%; /* 上から50%の位置に */
  left: 50%; /* 左から50%の位置に */
  transform: translate(-50%, -50%); /* 自身のサイズ分だけ戻して中央に揃える */
  color: #fff; /* テキストの色は白に */
  text-align: center; /* テキストを中央揃え */
  z-index: 1; /* 疑似要素より上に表示 */
  padding: 0 20px; /* スマホで文字が端にくっつかないように余白を確保 */
}

/* ▼ 見出しのスタイル調整 */
.visual-text h1 {
  font-size: 1.8em; /* フォントサイズを大きめに */
  margin-bottom: 10px; /* 下に余白 */
}

/* ▼ サブタイトルのスタイル調整 */
.visual-text p {
  font-size: 1em; /* 標準的な大きさの本文フォント */
}