body {
    margin: 0;
    font-family: font-family 'Zen Kaku Gothic Antique', sans-serif;
    background-color: rgb(215, 222, 250);
    line-height: 2;
    display: grid; /* Grid Layout を有効にする */
    grid-template-rows: auto 1fr auto; /* ヘッダー、メインコンテンツ（フレキシブル）、フッター */
    min-height: 100vh; /* 画面の高さ全体を確保する */
}

header {
    text-align: center;
     padding: 5px 10px 10px;
     color: #4852a0;
}



main {
  text-align: center;
}

footer {
  background: #7badde;
  color: #433601;
  text-align: center;
  padding: 0.2rem;
  width: 100%;
}




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

/* アイコンコンテナ：アイコン全体を横に並べる */
.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: #252b84;            /* アイコンとテキストのデフォルト色 */
  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;              /* 高さは自動調整 */
  margin-bottom: 10px;       /* アイコンとテキストの間の余白 */
  transition: transform 0.3s ease; /* ホバー時のアニメーション */
}

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

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

/* カーソルを乗せた時の文字色を変更 */
.icon-link:hover p {
    color: #7c98fd; /* ホバー時の文字色 */
}








/* ... 既存のCSS ... */

.instagram-link-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.instagram-animated-icon {
    display: inline-block;
    transition: transform 0.3s ease-in-out;
}

.instagram-animated-icon:hover {
    transform: scale(1.1); /* ホバー時に少し拡大 */
}

.instagram-animated-icon img {
    border-radius: 50%; /* アイコンを丸くする */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
    width: 100px; /* CSS側でもサイズを指定 (必要に応じて) */
    height: 100px; /* CSS側でもサイズを指定 (必要に応じて) */
    object-fit: cover; /* 画像が指定サイズに収まるようにトリミング (必要に応じて) */
}





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

/* タブレット用 (画面幅 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;             /* スマートフォンでのアイコンサイズを調整 */
  }
}