/* ナビゲーションの基本スタイル */
.navbar {
	padding: 0.5rem 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background-color: var(--bg-dark) !important;
}

/* ロゴのスタイル */
.header-logo {
	height: 40px;
	width: auto;
}

/* ナビゲーションリンクのアニメーション */
.navbar-dark .navbar-nav .nav-link {
	color: rgba(255, 255, 255, 0.85);
	padding: 1rem 1.25rem;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

/* ホバー時のアンダーライン効果 */
.navbar-dark .navbar-nav .nav-link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 2px;
	background-color: var(--bs-primary);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	transform: translateX(-50%);
}

.navbar-dark .navbar-nav .nav-link:hover::after {
	width: 100%;
}

/* ドロップダウンメニューのアニメーション */
.dropdown-menu {
	display: block;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	margin-top: 0;
}

.dropdown:hover .dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dropdown-menu-dark {
	background-color: var(--bg-card);
	border: 1px solid rgba(255, 255, 255, 0.05);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	backdrop-filter: blur(10px);
}

/* ドロップダウンアイテムのアニメーション */
.dropdown-item {
	color: rgba(255, 255, 255, 0.85);
	padding: 0.75rem 1.5rem;
	transition: all 0.2s ease;
	position: relative;
	transform: translateX(0);
}

.dropdown-item:hover {
	background-color: rgba(255, 255, 255, 0.05);
	color: #ffffff;
	transform: translateX(5px);
}

/* モバイル用のアニメーション */
@media (max-width: 991.98px) {
	.navbar-collapse {
		padding: 1rem 0;
		transform-origin: top;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.navbar-collapse.collapsing {
		opacity: 0;
		transform: scaleY(0);
	}

	.navbar-collapse.show {
		opacity: 1;
		transform: scaleY(1);
	}

	.dropdown-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: all 0.3s ease;
		max-height: 0;
		overflow: hidden;
		padding: 0;
		margin: 0;
	}

	.dropdown-menu.show {
		max-height: 500px;
		padding: 0.5rem 0;
	}

	.nav-item {
		opacity: 0;
		transform: translateX(-20px);
		animation: slideIn 0.3s forwards;
	}

	@keyframes slideIn {
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	/* 各メニュー項目を少しずつ遅らせて表示 */
	.nav-item:nth-child(1) {
		animation-delay: 0.1s;
	}

	.nav-item:nth-child(2) {
		animation-delay: 0.2s;
	}

	.nav-item:nth-child(3) {
		animation-delay: 0.3s;
	}

	.nav-item:nth-child(4) {
		animation-delay: 0.4s;
	}
}

/* ハンバーガーメニューのアニメーション */
.navbar-toggler {
	border: none;
	padding: 0;
	width: 30px;
	height: 20px;
	position: relative;
	transition: all 0.3s ease;
}

.navbar-toggler:focus {
	box-shadow: none;
}

.navbar-toggler-icon {
	background-image: none !important;
	background-color: #fff;
	height: 2px;
	width: 100%;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.3s ease;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
	content: '';
	background-color: #fff;
	height: 2px;
	width: 100%;
	position: absolute;
	left: 0;
	transition: all 0.3s ease;
}

.navbar-toggler-icon::before {
	top: -8px;
}

.navbar-toggler-icon::after {
	bottom: -8px;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
	background-color: transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
	transform: rotate(45deg);
	top: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
	transform: rotate(-45deg);
	bottom: 0;
}


/* ハンバーガーメニューのスタイル修正 */
.navbar-toggler {
	border: none;
	padding: 0;
	width: 30px;
	height: 30px;
	/* 高さを増やして余裕を持たせる */
	position: relative;
	transition: all 0.3s ease;
	margin-right: 5px;
	/* 右側に少し余白 */
}

.navbar-toggler:focus {
	box-shadow: none;
	outline: none;
}

.navbar-toggler-icon {
	background-image: none !important;
	display: inline-block;
	width: 24px;
	/* 線の長さを調整 */
	height: 2px;
	/* 線の太さ */
	background-color: #fff;
	position: relative;
	transition: all 0.3s ease;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
	content: '';
	position: absolute;
	left: 0;
	width: 24px;
	/* 線の長さを統一 */
	height: 2px;
	/* 線の太さ */
	background-color: #fff;
	transition: all 0.3s ease;
}

.navbar-toggler-icon::before {
	top: -7px;
	/* 上線の位置を調整 */
}

.navbar-toggler-icon::after {
	top: 7px;
	/* 下線の位置を調整 */
}

/* 開いた時のアニメーション */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
	background-color: transparent;
	/* 中央の線を消す */
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
	top: 0;
	transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
	top: 0;
	transform: rotate(-45deg);
}

/* ここまでnav */

:root {
	/* メインカラー - 深みのある緑 */
	--bs-primary: rgb(52, 99, 75);
	--bs-primary-rgb: 52, 99, 75;

	/* 背景色 - 暗めのグレー */
	--bg-dark: #1a1f25;
	--bg-card: #242a32;

	/* テキストカラー */
	--text-light: #e9ecef;
	--text-muted: #8b949e;
}

body {
	background-color: var(--bg-dark);
	color: var(--text-light);
}

.card {
	background-color: var(--bg-card);
	border: 1px solid rgba(255, 255, 255, 0.05);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card-title {
	color: #333;
}

.text-dark {
	color: var(--text-light) !important;
}

.text-muted {
	color: var(--text-muted) !important;
}

.feature-icon {
	background: linear-gradient(135deg, var(--bs-primary), rgba(var(--bs-primary-rgb), 0.8)) !important;
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.2);
}

.bg-light {
	background-color: rgba(255, 255, 255, 0.03) !important;
}

.hover-card:hover {
	background-color: rgba(255, 255, 255, 0.05);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.border-primary {
	border-color: var(--bs-primary) !important;
	opacity: 0.8;
}

h1, h2, h3, h4, h5, h6 {
	/* color: var(--text-light); */
	color: #333;
}

.lead {
	color: var(--text-muted);
}

.feature-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
	transition: transform 0.2s ease;
}

.hover-card {
	transition: all 0.3s ease;
}

.hover-card:hover {
	transform: translateY(-5px);
}

.card {
	border-radius: 16px;
	overflow: hidden;
}

.bg-light {
	background-color: rgba(var(--bs-primary-rgb), 0.02) !important;
}

.hover-card:hover .feature-icon {
	transform: scale(1.1);
}

.border-primary {
	border-color: var(--bs-primary) !important;
}

.bg-primary {
	background-color: var(--bs-primary) !important;
}

@media (max-width: 768px) {
	.feature-icon {
		width: 40px;
		height: 40px;
	}
}


/* テーブルの基本構造 */
/* テーブル全体で改行をしない場合 */
table {
	white-space: nowrap;
  }

  /* もしくは特定のカラム（thやtd）だけ改行をしない場合 */
  th,
  td {
	white-space: nowrap;
  }
  table {
	white-space: nowrap;
  }
  table.my-target-class {
	white-space: nowrap;
  }

  /* 1列目の td の背景色を #fff に指定（table にクラス my-target-class が付与されている場合のみ） */
  table.my-target-class td:nth-child(1) {
	background-color: #fff !important;
  }
/*
  HTMLを変更せずに<ul class="pagination">内を操作しやすくするためのCSS例
  Bootstrapのデフォルトクラスを活用しながら、固有のスタイルを付けたい場合に追加・上書きできます
*/

.pagination {
	/* ページング全体に関する調整 */
	margin: 1rem 0;
  }
  .pagination li {
	/* 各ページ番号用のリストアイテム */
	display: inline-block;
	margin: 0 2px;
  }
  .pagination li a {
	/* リンク部分の基本スタイル */
	display: inline-block;
	padding: 8px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	color: #007bff;
	text-decoration: none;
	transition: background-color 0.2s;
  }
  /* ホバー時の動作 */
  .pagination li:not(.disabled):not(.active) a:hover {
	background-color: #e9ecef;
  }

  /* 非活性( disabled ) */
  .pagination li.disabled a {
	color: #6c757d;
	pointer-events: none;
	cursor: default;
  }

  /* アクティブ( active ) */
  .pagination li.active a {
	background-color: #007bff;
	color: #fff;
	border-color: #007bff;
	cursor: default;
  }

  /* 前へ、次へ、最後へなどのクラスを個別に着色 or アイコンを変えたりなど */
  .pagination li.prev a,
  .pagination li.next a,
  .pagination li.last a {
	/* 必要に応じてカスタマイズ */
  }