/* 基本的なリセットとフォント設定 */
body {
    margin: 0;
    font-family: font-family 'Zen Kaku Gothic Antique', sans-serif;
    background-color: rgb(215, 250, 221);
    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: 2em;
    color: #289e2e;
    margin-bottom: 0px;
}





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

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





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

header nav ul li a {
    text-decoration: none; /* 下線を消します */
    color: #325938; /* 現在の色 */
    font-weight: bold;
    padding: 5px 10px;
    
    transition: border-color 0.3s ease, color 0.3s ease;
}

header nav ul li a:hover {
    color: #a7ff68; /* ホバー時の色 */
    border-color: #a6db34; /* ホバー時に下線を表示 */
    /* ホバー時も完全に線を消したい場合は、↑のborder-color行を削除 */
}

/* 作品コンテナ (グリッドレイアウト) */
.works-container {
    max-width: 1200px;
    margin: 0 auto; /* 中央揃え */
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; /* カード間の余白 */
}
    




/* 作品画像ラッパー */
.work-image-wrapper {
    width: 100%;
    padding-bottom: 75%; /* 4:3の比率を保つ */
    position: relative;
    overflow: hidden;
    /* ここを修正：画像の白い部分をなくすため、背景色を削除 */
    /* background-color: #ffffff; */
}

.work-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* ここを修正：画像をトリミングして空白をなくす */
    object-fit: contain;
    display: block;
}





.tooltip-text {
    /* その他のスタイルはそのまま */
    visibility: hidden;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    text-align: center;
    padding: 10px 15px;
    font-size: 0.85em;
    line-height: 1.5;
    box-sizing: border-box;
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    opacity: 0;
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;

   font-family: "Times New Roman", Times, serif; /* 例：Times New Roman */
}







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

/* アイコンコンテナ：アイコン全体を横に並べる */
.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: 0px;       /* アイコンとテキストの間の余白 */
  transition: transform 0.3s ease; /* ホバー時のアニメーション */
}
/* ホバー時のスタイル */
.icon-link:hover {
  color: #550954;            /* ホバー時のテキスト・アイコンの色 */
  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: 0.2rem;
  width: 100%;
  margin-top: auto; /* mainコンテンツとの間に自動で余白を作り、下部に固定されるようにする */
}











/* スマートフォンとタブレット用 (画面幅 768px以下) */
@media all and (max-width: 768px) {
    .works-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        padding: 15px; /* こちらのpaddingを調整 */
    }
    .icon-container {
        /* ... 他のスタイル ... */
        gap: 30px; /* 例えばこのように値を小さくする */
    }
    .icon-link {
        width: 30%;
    }
    .icon-link img {
        width: 70px; /* こちらのアイコンサイズを調整 */
    }
}
















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

/* タブレット用 (画面幅 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) {
  header nav ul {
    display: flex;
    justify-content: center;
    gap: 85px;
  }

  .icon-link {
    width: 25%;              /* 幅を狭くしました（例：30%から25%へ変更） */
    max-width: 80px;        /* max-widthも必要に応じて狭くしました */
  }

  .icon-link img {
    width: 70px;             /* 画像の幅を狭くしました（例：70pxから60pxへ変更） */
  }

  .icon-link p {
    font-size: 15px;         /* 文字が大きすぎる場合はフォントサイズを調整してください */
  }
}