@charset "utf-8";
/* CSS Document */

/*ここからサンプル画像用CSS*/
.imagesample{
	width: 700px;
	height: 150px;
	object-fit: cover;
}
/*ここまでサンプル画像用CSS*/

/*========================================
  ここから課題
========================================*/

/*========================================
  全体設計
========================================*/

* {
	list-style: none;
}
/*========================================
  全体のナビゲーション
========================================*/

nav {
  background-color: #b3e5fc; /* 薄い水色背景 */
  font-family: sans-serif;
}

/*========================================
  メインのメニューリスト
========================================*/

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

/* メニュー項目 */
nav ul li {
  position: relative;
}

/* メニューリンク */
nav ul li a {
  display: block;
  padding: 15px 20px;
  color: #01579b; /* 濃い水色（テキスト） */
  text-decoration: none;
  transition: background-color 0.3s;
}

/* ホバー時の背景色 */
nav ul li a:hover {
  background-color: #81d4fa; /* 少し濃い水色 */
  color: #004d40;
}

/*========================================
  サブメニュー（初期は非表示）
========================================*/

nav ul li .sub-menu {
  display: none;
  position: absolute;
  background-color: #e1f5fe; /* サブメニューの背景 */
  top: 100%;
  left: 0;
  min-width: 180px;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* サブメニューの項目 */
nav ul li .sub-menu li a {
  padding: 10px 15px;
  color: #0277bd;
}

/* 親メニューにホバーしたらサブメニューを表示 */
nav ul li:hover .sub-menu {
  display: block;
}