/* ヘッダ全体の装飾 */
.site-header {
  width: 100%;
  background-color: #ffffff;
  /* 下側に影を追加 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: relative; /* z-index（重なり順）を有効にするためのおまじない */
  z-index: 10;        /* 数字が大きいほど手前（上側）に表示されます */
}

/* レイアウト調整用コンテナ */
.header-inner {
  max-width: 1100px; /* 表示の最大の幅を設定 */
  margin: 0 auto;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  display: flex;
  justify-content: space-between; /* 両端に寄せる */
  align-items: center; /* 垂直方向の中央揃え */
}

/* ロゴのスタイル */
.logo {
  font-weight: bold;
  font-size: 20px;
}

/* グロナビのスタイル */
.nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.first-view {
  max-width: 1200px; /* 表示の最大の幅を設定 */
  text-align: center; /* 中にある画像や文字を中央に寄せる */
  max-width: 100%;
  height: auto;
  background-color: #d1eced;
}

/* ページ全体の最大幅を1100pxにして中央に寄せる */
.container {
  max-width: 1100px;
  margin: 0 auto;       /* 左右の中央寄せ */
  padding: 0 20px;      /* スマホ画面などで端にぴったりくっつかないための余白 */
  box-sizing: border-box;
}

/* 画像の親要素を横並び（Flexbox）にする */
.image-gallery {
  display: flex;
  gap: 20px;            /* 画像と画像の間隔（お好みで調整してください） */
}

/* 1. 「説明」の見出しを中央に寄せる */
h1 {
  color: #333;
  font-weight: bold;
  text-align: center;
  margin: 40px; /* 画像との間のすき間（お好みで調整してください） */
}

/* 新しく作った「画像＋テキスト」を囲む箱 */
.image-item {
  /* 箱自体を3等分する */
  width: calc((100% - 40px) / 3);
  /* これを入れるだけで、画像の下のテキストが自動で中央に寄ります！ */
  text-align: center;
}

/* 箱の中にある画像の設定 */
.image-item img {
  width: 100%;        /* 箱の横幅いっぱいに画像を広げる */
  height: auto;
  object-fit: cover;
}

/* 犬の名前のテキストの調整（お好みで） */
.dog-name {
  margin-top: 10px;   /* 画像との間のすき間 */
  font-weight: bold;  /* 文字を太字にする */
  font-size: 16px;    /* 文字の大きさ */
  color: #333;        /* 文字の色 */
}

/* ボタンのスタイル */
.button {
  /* ボタンをインラインブロック要素にして、幅や余白を効かせる */
  display: block;
  /* 背景色（紺色）と文字色（白） */
  background-color: #f67e55; /* お好みの紺色のカラーコード */
  color: #ffffff;
  /* 文字の周りの余白（上下 10px、左右 30px） */
  padding: 10px 30px;
  /* 角の丸み（数値を大きくするとより丸くなります） */
  border-radius: 25px;
  /* リンクの下線を消す */
  text-decoration: none;
  /* 文字を中央揃えにする */
  text-align: center;
  margin: 0;
}

/* フッター全体の装飾 */
.site-footer {
  width: 100%;
  background-color: #ffffff;
  /* 下側に影を追加 */
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  margin-top: 30px;
}

/* レイアウト調整用コンテナ */
.footer-text {
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: right;
  align-items: center; /* 垂直方向の中央揃え */
}