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

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

/* ナビゲーションメニュー */
.nav-menu {
  background-color: #333; /* メニューの背景色 */
  color: #fff; /* メニューテキストの色 */
}
.menu-list {
	display: flex;
  	justify-content: center; /* メニューアイテムを中央揃えに */
}
.menu-item {
	background-color: #333; /* メニューアイテムの背景色 */
	border-left: 1px solid #fff; /* メニューアイテムの左ボーダー */
	transition: background-color .3s; /* 背景色の変化をアニメーション化 */
}
.menu-item:last-child {
  border-right: 1px solid #fff; /* 最後のメニューアイテムの右ボーダー */
}

/* メニューアイテムのホバースタイル */
.menu-item:hover .drop-menu-list {
	transform: scaleY(1); /* ドロップダウンメニューの表示 */
}
.menu-item:hover {
	background-color: #696969; /* メニューアイテムのホバー時の背景色 */
	transition: background-color .3s; /* 背景色の変化をアニメーション化 */
}
.drop-menu-item:hover {
	opacity: .8; /* ドロップダウンメニューアイテムのホバー時の不透明度 */
	transition: opacity .3s; /* 不透明度の変化をアニメーション化 */
}

.menu-item a {
	align-items: center;
	color: #fff; /* メニューアイテム内のリンクテキストの色 */
	display: flex;
	height: 50px;
	justify-content: center;
	text-decoration: none; /* リンクの下線を非表示 */
	width: 120px;
}

/* ドロップダウンメニュー */
.drop-menu {
	position: relative;
}
.drop-menu-list {
	left: 0;
	position: absolute;
	top: 100%;
	transform: scaleY(0); /* ドロップダウンメニューの非表示 */
	transform-origin: center top; /* 変形を適応する基準を設定 */
	transition: transform .3s; /* 表示の変化をアニメーション化 */
	width: max-content;
	z-index: 1;
}

.drop-menu-list {
    left: 0 !important;  /* 強制的に左端に配置 */
    margin: 0;           /* マージンをリセット */
    padding: 0;          /* パディングをリセット */
}

.drop-menu-item {
	background-color: #696969; /* ドロップダウンメニューの背景色 */
	transition: opacity .3s; /* 不透明度の変化をアニメーション化 */
}