@charset "UTF-8";

/* ==================== */
/* 全体のリセットと基本スタイル */
/* ==================== */
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}


body {
  font-family: font-family 'Zen Kaku Gothic Antique', sans-serif;
}

body {
  line-height: 1.6;
  color: #77ea4d;
  min-height: 100vh; /* height: 100% を min-height: 100vh に変更して、footerが下部に固定されやすくする */
  background-image: url("images/ICE.JPG");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

body#about {
  background: #EEE;
}

#wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden; /* 親要素のmin-height:100vhと合わせてフッター固定を助ける */
}

/* ==================== */
/* ヘッダー (header) */
/* ==================== */
header {
  position: relative;
}

header h1 {
  text-align: center;
  padding: 1rem;
  font-size: 2rem;
}

header h1 a {
  color: #c9e67b;
}


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

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

/* 各アイコンリンク：写真（上）と文字（下）を縦に並べる */
.icon-link {
  display: flex;             /* 子要素（写真と文字）をFlexboxで並べる */
  flex-direction: column;    /* 子要素を縦方向に並べる (写真が上で文字が下になる) */
  align-items: center;       /* 縦並びにした子要素を、**横方向の中央**に揃える */
  text-decoration: none;     /* リンクの下線を消す */
  color: #ffffff;            /* アイコンとテキストのデフォルト色 */
  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: 20px;       /* アイコンとテキストの間の余白 */
  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); /* ホバー時に影を強調 */
  border-radius: 50%;
}


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


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

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