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

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

/*===ナビゲーションメニュー===*/
.nav-menu {
	background-color: #1FBDC3;
	color: #fff;
}

.menu-list {
	display: flex;
	justify-content: center; /*===中央揃え===*/
}

.menu-item {
	background-color: #1FBDC3; /*=== メニューの背景色=== */
  	border-left: 1px solid #fff; /*=== メニューアイテムの左ボーダー ===*/
  	position: relative;
	list-style: none;
}
.menu-item:last-child {
  	border-right: 1px solid #fff; /*=== 最後のメニューアイテムの右ボーダー ===*/
}

/* メニューアイテムのホバースタイル */
.menu-item:hover .drop-menu-list,
.drop-menu-item:hover .drop-menu-list-child {
  	opacity: 1; /*=== 不透明度100% ===*/
	transition: opacity .3s, visibility .3s; /*=== アニメーション設定 ===*/
	visibility: visible; /*=== 下層メニューを表示 ===*/
}

.menu-item a {
	align-items: center;
  	color: #fff;
  	display: flex;
  	height: 50px;
  	justify-content: center;
  	text-decoration: none; 
  	width: 135px;
}

/* ドロップダウンメニュー */
.drop-menu {
  position: relative;
}

.drop-menu-item {
  position: relative;
}

/*====== ドロップダウンメニューのスタイル ======*/
.drop-menu-list-child {
  background-color: #4682b4; /*=== 下層メニューの背景色 ===*/
}
.drop-menu-list {
	list-style: none;
	background-color: #1FBDC3; 
  	left: 0;
  	opacity: 0; /* 不透明度0 */
  	position: absolute;
  	top: 100%;
  	transition: opacity .3s, visibility .3s; /*=== アニメーション設定 ===*/
  	visibility: hidden; /*=== 下層メニューを非表示 ===*/
  	width: max-content;
  	z-index: 1;
}

/*====== 下層メニューのスタイル======*/
.drop-menu-list-child {
  left: 100%;
  opacity: 0; /*=== 不透明度を最小に ===*/
  position: absolute;
  top: 0;
  transition: opacity .3s, visibility .3s; /*=== アニメーション設定 ===*/
  visibility: hidden; /*=== 下層メニューを非表示 ===*/
  width: max-content;
  z-index: 1;
}