/* 基本的なリセットとフォント設定 */
body {
    margin: 0;
    font-family: font-family 'Zen Kaku Gothic Antique', sans-serif;
    background-color: antiquewhite;
    line-height: 2;
    /* ここから追加・修正 */
    display: flex; /* bodyをFlexboxコンテナにする */
    flex-direction: column; /* 子要素を縦方向に並べる */
    min-height: 100vh; /* bodyの最小高さをビューポートの高さにする */
    /* ここまで追加・修正 */
}







/* ヘッダー */
header {
    text-align: center;
     padding: 5px 10px 10px;
}
    
  /*background-image: url("images/deza-to.JPG");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    margin-bottom: 10px;
} */


header h1 {
    font-size: 2.5em;
    color: #f6bc92;
    margin-bottom: 10px;
}





header p {
    font-size: 1.1em;
    color: #661301;
}

/* ナビゲーションメニューのスタイル */
header nav ul {
    list-style: none; /* リストの点を消す */
    padding: 0;
    margin: 20px 0 0; /* ヘッダー内の要素との間隔を調整 */
    display: flex; /* 横並びにする */
    justify-content: center; /* 中央に配置 */
    gap: 20px; /* リンク間のスペース */
}




main {
  text-align: center;

}










/* ==================== */
/* アイコンセクションのスタイル */
/* ==================== */

/* アイコンコンテナ：アイコン全体を横に並べる */
.icon-container {
  display: flex;             /* 子要素 (icon-link) を横並びにする */
  justify-content: center;   /* アイコン全体を水平方向の中央に配置 */
  align-items: flex-start;   /* 垂直方向の配置 (必要に応じて調整、ここでは上端揃え) */
  gap: 30px;                 /* 各アイコンリンク間の余白 */
  padding: 0px 0;           /* 上下のパディング */
  margin-top: 0px;          /* 上部の余白 */
  flex-wrap: wrap;           /* 画面が狭い場合にアイコンを折り返す */
}

/* 各アイコンリンク：写真（上）と文字（下）を縦に並べる */
.icon-link {
  display: flex;             /* 子要素（写真と文字）をFlexboxで並べる */
  flex-direction: column;    /* 子要素を縦方向に並べる (写真が上で文字が下になる) */
  align-items: center;       /* 縦並びにした子要素を、**横方向の中央**に揃える */
  text-decoration: none;     /* リンクの下線を消す */
  color: #846925;            /* アイコンとテキストのデフォルト色 */
  font-size: 14px;           /* テキストのフォントサイズ */
  transition: transform 0.3s ease, color 0.3s ease; /* ホバー時のアニメーション */
  width: 150px;              /* 各アイコンリンクの幅（この幅でテキストの改行が決まる） */
  text-align: center;        /* テキストを中央寄せ */
  cursor: pointer;           /* クリック可能であることを示す */
}

/* アイコン画像自体のスタイル */
.icon-link img {
  width: 120px;              /* アイコンの幅 */
  height: auto;              /* 高さは自動調整 */
  /* border-radius: 50%; */    /* 円形にしたい場合のみ有効にする（現在の画像が円形なら不要） */
 
  margin-bottom: 0px;       /* アイコンとテキストの間の余白 */
  transition: transform 0.3s ease; /* ホバー時のアニメーション */
}

/* ホバー時のスタイル */
.icon-link:hover {
  color: #ff1919;            /* ホバー時のテキスト・アイコンの色 */
  transform: translateY(-5px); /* ホバー時に少し上に移動 */
}

.icon-link:hover img {
  transform: scale(1.05);    /* ホバー時にアイコン画像を少し拡大 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* ホバー時に影を強調 */
}

.icon-link:hover img {
  transform: scale(1.05);    /* ホバー時にアイコン画像を少し拡大 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* ホバー時に影を強調 */
  border-radius: 50%;
}



/* ==================== */
/* フッター (footer) */
/* ==================== */
footer {
  background: #ffd2bd;
  color: #6f5a03;
  text-align: center;
  padding: 0.1rem;
  width: 100%;
  margin-top: auto; /* mainコンテンツとの間に自動で余白を作り、下部に固定されるようにする */
}


.polaroid-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* 必要に応じて折り返す */
    padding: 20px;
    gap: 30px;
}

.polaroid-item {
    /* ... 他のスタイル ... */
    width: 220px; /* ← この値を小さくする */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .polaroid-container {
        justify-content: space-around;
        gap: 20px;
    }

    .polaroid-item {
        width: 150px; /* ← この値も必要に応じて調整 */
    }
}
.polaroid-item:nth-child(2n) { /* 偶数番目のアイテムは少し違う角度に */
    transform: rotate(8deg);
}

.polaroid-item:nth-child(3n) { /* 3の倍数番目のアイテムはまた違う角度に */
    transform: rotate(-2deg);
}

.polaroid-item:hover {
    transform: translateY(-10px) scale(1.05) rotate(0deg); /* ホバー時に少し浮き上がり、拡大し、角度を戻す */
}

.polaroid-item img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    display: block;
}

.polaroid-item p {
    font-size: 0.9em;
    color: #333;
}




.icon-link:hover p {
  color: #c95c5c; /* ここにマウスオーバーした時の文字の色を指定します */
}


















/* ==================== */
/* レスポンシブデザイン (メディアクエリ) */
/* ==================== */

/* タブレット用 (画面幅 600px以上) */
@media all and (min-width: 600px) {
  .container {
    grid-template-columns: 1fr 1fr; /* 2列表示 */
  }
}

/* PC用 (画面幅 1025px以上) */
@media all and (min-width: 1025px) {
  header h1 {
    font-size: 4rem; /* ヘッダータイトルを大きく */
  }

  nav {
    display: block; /* ナビメニューを常に表示 */
    height: auto;
    width: 100%;
    position: static; /* positionを解除 */
    background-color: transparent; /* 背景色を透明に */
    transform: none; /* スライドインの変形を解除 */
  }
  
  nav ul {
    display: flex; /* ナビ項目を横並びに */
    justify-content: center; /* ナビ項目を中央揃え */
    padding: 0.5rem 0; /* 上下パディングを調整 */
  }

  nav ul li {
    margin: 0 20px; /* 各ナビ項目の左右余白 */
    padding: 0; /* 不要なパディングを削除 */
  }

  nav ul li a {
    color: #333; /* PC時のメニューリンク色 */
  }

  #navBtn,
  .open {
    display: none; /* ハンバーガーメニューボタンを非表示 */
  }

  .container {
    grid-template-columns: 1fr 1fr 1fr; /* 3列表示 */
  }
}

/* スマートフォン用 (画面幅 599px以下) */
@media all and (max-width: 599px) {
  .icon-container {
    justify-content: space-around; /* 均等なスペースで配置 */
    gap: 15px;               /* スマートフォンでの余白を少し小さく */
  }

  .icon-link {
    width: 30%;              /* スマートフォンで画面幅に合わせて調整 */
    max-width: 100px;        /* 最大幅 */
  }

  .icon-link img {
    width: 70px;             /* スマートフォンでのアイコンサイズを調整 */
  }
}