.id2 {
  scroll-margin-top: 80px;
}

.img-hidden {
  max-height: 300px;
	overflow: hidden;
	margin-top: 75px;
}


.container-m {
	margin-top: 85px;
}

.mt-80px {
	margin-top: 80px;
}


/* カードにカーソルを合わせた際のエフェクト */
.card:hover {
  cursor: pointer;
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* .card の基本スタイルは Bootstrap の card に任せます */
/* ここではホバー効果を無効にするために上書きします */
.cardNH:hover {
  cursor: default;  /* マウスカーソルも通常に */
  transform: none;
  box-shadow: none;
  transition: none;
}
.carousel-inner2 img {
  height: 225px; /* お好みの高さを指定 */
  object-fit: cover; /* 画像のアスペクト比を保ちながら、指定したサイズに合わせる */
}

/* md (768px以上) の場合に適用 */
@media (min-width: 576px) {
  .carousel-inner3 img {
  height: 215px; /* md 以上で適用 */
  object-fit: cover; /* 画像のアスペクト比を保ちながら、指定したサイズに合わせる */
}
  }

/* lg (992px以上) の場合に適用 */
@media (min-width: 768px) {
  .carousel-inner4 img {
  height: 285px; /* md 以上で適用 */
  object-fit: cover; /* 画像のアスペクト比を保ちながら、指定したサイズに合わせる */
  }
}

/* lg (1200px以上) の場合に適用 */
@media (min-width: 992px) {
  .carousel-inner5 img {
  height: 400px; /* md 以上で適用 */
  object-fit: cover; /* 画像のアスペクト比を保ちながら、指定したサイズに合わせる */
  }
}

/* lg (1200px以上) の場合に適用 */
@media (min-width: 1200px) {
  .carousel-inner6 img {
  height: 465px; /* md 以上で適用 */
  object-fit: cover; /* 画像のアスペクト比を保ちながら、指定したサイズに合わせる */
  }
}

/* lg (1200px以上) の場合に適用 */
@media (min-width: 1400px) {
  .carousel-inner7 img {
  height: 545px; /* md 以上で適用 */
  object-fit: cover; /* 画像のアスペクト比を保ちながら、指定したサイズに合わせる */
  }
}

.container .scroll-box2 {
  max-height: 200px;         /* 固定の高さを指定 */
  overflow-y: scroll;    /* 縦スクロールを有効化 */
  padding: 10px;            /* 内側の余白 */
  border: 2px solid #ccc;   /* 枠線を追加 */
  border-radius: 5px;       /* 角を少し丸く */}

.container .scroll-box2::-webkit-scrollbar {
  width: 8px;             /* スクロールバーの幅を設定 */
}

.container .scroll-box2::-webkit-scrollbar-thumb {
  background-color: #888; /* スクロールバーの色 */
  border-radius: 4px;     /* 角を丸く */
}


.card1 {
  height: 50px; /* 必要に応じて調整 */
  background-color: #e6f9e6;
  overflow: hidden; /* はみ出た部分を非表示 */
}

/* md (768px以上) の場合に適用 */
@media (min-width: 768px) {
  .card2 {
		height: 50px; /* md 以上で適用 */
		background-color: #ffffff !important; /* md 以上では白背景に戻す */
		  overflow: hidden; /* はみ出た部分を非表示 */
}
  }

/* lg (992px以上) の場合に適用 */
@media (min-width: 992px) {
  .card3 {
		height: 65px; /* lg 以上で適用 */
		 background-color: #ffffff !important; /* md 以上では白背景に戻す */
		  overflow: hidden; /* はみ出た部分を非表示 */
  }
}

/* lg (1200px以上) の場合に適用 */
@media (min-width: 1200px) {
  .card4 {
		height: 80px; /* lg 以上で適用 */
		 background-color: #ffffff !important; /* md 以上では白背景に戻す */
		  overflow: hidden; /* はみ出た部分を非表示 */
  }
}

/* lg (1400px以上) の場合に適用 */
@media (min-width: 1400px) {
  .card5 {
		height: 95px; /* lg 以上で適用 */
		 background-color: #ffffff !important; /* md 以上では白背景に戻す */
		  overflow: hidden; /* はみ出た部分を非表示 */
  }
}

/* ▼カード高を row/col に伝播＋縦中央（グリッド幅に依存しない） */
.card1 .row, .card2 .row, .card3 .row, .card4 .row, .card5 .row { height:100%; }

.card1 .row > [class*="col"],
.card2 .row > [class*="col"],
.card3 .row > [class*="col"],
.card4 .row > [class*="col"],
.card5 .row > [class*="col"] {
  height:100%;
  display:flex;
  align-items:center;   /* ← 縦方向の中央寄せ */
  /* 横は既定の左寄せのままにするので justify-content は指定しない */
}

/* ▼画像の余白/はみ出し対策（どの col でも効く） */
.card1 img, .card2 img, .card3 img, .card4 img, .card5 img {
  display:block;        /* ベースライン余白を消す */
  width:auto;
  object-fit:contain;
}



/* 画面幅が768px未満（タブレットやスマートフォン）ではボタンを1列に並べる */
@media (max-width: 768px) {
  .card-body .btn {
    display: inline-block; /* ボタンを横並びにする */
    width: auto; /* ボタンの幅を自動に設定 */
    margin-right: 10px; /* ボタン間のスペースを調整 */
  }
}

.custom-title {
  background-color: #006400; /* 背景をBootstrapの青 */
  color: white; /* 文字色を白 */
  padding: 5px 20px; /* 余白をつけて見やすく */
  border-radius: 6px; /* 角を少し丸く */
  display: inline-block; /* 横幅をテキストに合わせる */
  font-weight: bold; /* 太字 */
}

.custom-title2 {
  background-color: #0000cd; /* 背景をBootstrapの青 */
  color: white; /* 文字色を白 */
  padding: 10px 20px; /* 余白をつけて見やすく */
  border-radius: 3px; /* 角を少し丸く */
  display: inline-block; /* 横幅をテキストに合わせる */
  font-weight: bold; /* 太字 */
}

.table-striped-columns2 tbody tr td:nth-child(1),
.table-striped-columns2 thead tr th:nth-child(1) {
  background-color: var(--bs-secondary-bg); /* Bootstrap の標準グレー */
}

.hang-indent {
  padding-left: 1em;   /* 全体を1文字分右に寄せる */
  text-indent: -1em;   /* 1行目だけ左に戻す */
}

.text-indent {
  padding-left: 1em;   /* 全体を1文字分右に寄せる */
}

.footer{
	background-color: #f8f9fa;
	text-align: center;
	padding: 1rem;
}