@charset "utf-8";


a {
	text-decoration: none;
}


  img {
	  max-width: 100%;
	  height: auto;
}


body, main {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

main > *:first-child {
	margin-top: 0 !important;
	padding-top: 0 !important;
}


#topCarousel {
	margin-top: 0 !important;
	padding-top: 0 !important;
}


/* メニューバーのスタイル */

.navbar {
	padding-bottom: 0 !important;
	z-index: 9999 !important;
}


nav.navbar {
	margin-bottom: 0 !important;
	width: 100% !important;
}


nav.navbar + * {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.navbar,
.container-fluid {
	overflow: visible !important;
	position: relative !important;
	z-index: 9995 !important;
}


/* サブメニューの表示位置調整 */

.dropdown-submenu {
  position: relative;
	z-index: 9999 !important;
}

.dropdown-submenu > .dropdown-menu {
  	top: 0;
  	left: 100%;
	margin-top: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
  	margin-left: 0;
  	margin-right: 0;
  	display: none;
  	position: absolute;
	z-index: 9999 !important;
}

.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}


/* 階層1の上下余白を削除 */
.dropdown-submenu > a.dropdown-item {
	padding-top: 0.25rem !important;
	padding-bottom: 0.25rem !important;
	marginp: 0 !important;
	border-top: none !important;
	line-height: 1.2; /* 必要に応じて調整 */
}


.dropdown-menu {
	marginp: 0 !important;
	border-radius: 0 !important; /*角の丸さ*/
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	position: absolute !important;
	z-index: 9999 !important;
	background-color: white !important;
}


.dropdown-menu .dropdown-item {
	padding-top: 0.15rem;
	padding-bottom: 0.15rem;
	font-size: 0.9rem;
	color: black !important;
}

.dropdown-menu .dropdown-menu {
	left: 100%;
	top: 0;
	margin: 0;
}


/* ホバー時のスタイル */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
	background-color: #0077c0 !important;
	color: white !important;
}


/***製品紹介カード設定***/

/* レスポンシブカードの共通スタイル */
.responsive-card {
	width: 100%;
	max-width: 220px;
	margin: 0 auto;
	border: 0;
}

/* カードの高さを揃える（オプション） */
.card-body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	margin: 0;
	padding: 0;
}
	

.img-flex-max {
	max-width: 436px; /* 実サイズに合わせて調整 */
	width: 100%;
	height: auto;
}


.img-original {
	max-height: 100%;
	max-width: 100%;
	width: auto;    /* 横幅は自動（オリジナルサイズ） */
	height: auto;	/* 高さも自動 */
	margin: 0px auto;			/* 中央揃え*/
	display: block;/* ブロック要素化して中央揃えしやすく*/
	object-fit: contain; /*はみ出さずに収める */
  }


.product-card-img
.product-card-img-link img{
	max-height: 70%;
	max-width: 70%;
	width: auto;
	height: auto;	/* 高さも自動 */
	display: block;
	margin: auto; 
	object-fit: contain;
}


.top-card-title{
	margin-bottom: 1px;
	word-break: break-word;
}

.top-card-title a{
	color: black;
}

.top-card-title a:hover {
	color: black; /* ホバー時も黒にしたい場合 */
}

.top-card-text{	
	font-size: 0.7rem;
	margin-bottom: 2px;
	word-break: break-word;
}

.top-card-btn{	
	background-color: white;
	color: black;
	border: 1px solid black;
	text-decoration: none !important;
	font-size: 0.8rem; 
	padding: 2px 5px;
	width: 70%;/* 必要に応じて固定幅を解除 */
	min-width: unset;
	display: block;	/* ブロック要素にする */
	margin: 0 auto; /* 左右のマージンを自動にして中央揃え */
	text-align: center;/* テキストも中央に */
	border-radius: 0;
}

.top-card-btn:hover,
.top-card-btn:focus,
.top-card-btn:active {
	background-color: #0077c0;
	color: white;
	border-color: #0077c0;
}


  .navbar-nav .nav-link,
  .dropdown-menu .dropdown-item {
    color: white; /* テキストの色を白に設定 */
  }
  .dropdown-menu {
    background-color:#9fcdff; /* 背景色をグレーに設定 */
  }

.product-card-col {
  width: 50%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  margin-bottom: 1rem;
}

@media (min-width: 576px) {
  .product-card-col {
    flex: 0 0 auto;
    width: 33.333%;
  }
}

@media (min-width: 768px) {
  .product-card-col {
    width: 25%;
  }
}

@media (min-width: 992px) {
  .product-card-col {
    width: 20%;
  }
}

@media (min-width: 1200px) {
  .product-card-col {
    width: 20%;
  }
}


.oneline-image-container {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	margin-top: 20px;
}

/* 横並びの設定（PCなど大きい画面） */
.oneline-list{
	flex: 0.5;
}

.oneline-image {
	flex: 1;
}

.img-original {
	max-width: 100%;
}

/* スマホサイズ（画面幅568px以下）のときは縦並びに変更 */
@media (max-width: 568px) {
  .oneline-image-container {
	  flex-direction: column;
	}
}


/***製品紹介ページ用　***/ 
.products-hero {
	position: relative;
	background-image: url("../images/common/Products_BG.jpg");
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	margin-top: 10 !important;
	/*padding: 0 !important;*/
	height: auto; /* 高さを内容に合わせて可変にする */
	min-height: 300px; /* 必要に応じて最小高さを設定 */
	padding: 2rem 0; /* 上下に余白を追加（任意） */
}


.products-hero .overlay-content {
	position: relative; /* absolute から relative に変更 */
	top: auto;
	left: auto;
	transform: none;
	white-space: normal; /* nowrap を解除 */
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}


.center-left {
	width: fit-content; /* コンテンツの幅に合わせる */
	margin: 0 auto;/* 親要素の中央に配置 */
	text-align: left;/* テキストは左寄せ */
	margin-left: 10px;
}


/***パンくず**/
.breadcrumb-nav {
	margin: 0 !important;
	padding-top: 4px !important;
	padding-left: 5px; 	
	position: relative !important;
	/*z-index: 100;*/
}

.breadcrumb-nav,
.carousel {
	margin: 0 !important;
	padding-top: 2px !important;
}

.breadcrumb-item {
	margin-right: 0; /* 不要な右マージンを削除 */
}


.breadcrumb {
	background-color: rgba(0, 0, 0, 0.4);
	border-radius: 0.1rem;
}

.breadcrumb a {
	color: #fff;
}

.breadcrumb .active {
	color: #ccc;
}

.breadcrumb-item + .breadcrumb-item::before {
	color: #fff; /* スラッシュを白に */
	content: "/"; /* デフォルトの空白付きスラッシュを上書き */
	padding: 0 0.25rem; /* 前後のスペースを調整（前の空白を削除） */
}

.ProductFeatures {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}


.ProductFeatures td {
	text-align: left;
	padding-left: 0.5rem;
	line-height: 1.2; /* 行間を少し詰める */
}

/* タブセクションの余白調整 */
section.bg-white {
	margin-top: 2rem;
}


.card-title {
	display: flex;
	align-items: center;gap: 0.3em; /* アイコンとテキストの間隔 */
}


.card-title-icon {
	vertical-align: middle;
	margin-right: 0.2em; /* 間隔を少し狭く */
	height: auto;
	width: auto;
	max-height: 1em; /* テキストとバランスを取る */
	flex-shrink: 0;
}

.product-card-body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	margin: 0;
	padding: 0;
}


.catalog-button {
	border-radius: 0 !important;
	margin: 10px;
	padding-top: 3px; 
	padding-bottom: 3px; 
	padding-right: 5px;
	padding-left: 5px;
}


/* Prevent horizontal overflow on body */
body {
  overflow-x: hidden;
}

/* Ensure containers do not exceed screen width */
.container, .container-fluid {
  max-width: 100%;
  position: relative;
  overflow-x: hidden;
}


.container-fluid,
.product-card-col {
	overflow: visible !important;
}


/* Make images responsive */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Improve responsiveness for product cards on small screens */
@media (max-width: 576px) {
  .product-card-col {
    width: 100% !important;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/***サブページ　共通　TOP用***/

.sub-title{
	background-image: url("../images/common/Mark.png");
	background-repeat: no-repeat; /* 繰り返さない */
	background-position: left center;/* 左端中央に配置 */
	background-size: auto; /* 必要に応じてサイズ調整 */
	padding-left: 1rem;/* テキスト */
}

.app-hero {
	position: relative;
	background-image: url("../images/common/BG short.jpg");
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	margin-top: 10 !important;
	height: auto; /* 高さを内容に合わせて可変にする */
	min-height: 90px; /* 必要に応じて最小高さを設定 */
	padding-top: 2rem 0; 
	border-radius: 0 !important;
}


.app-menu {
	border: 1px solid #ccc;
	border-radius: 0px;
	margin-bottom: 2px;
	margin-right: 2px;
	padding-left: 4px;
	padding-bottom: 1px;
	padding-top: 1px;
	padding-right: 1px;
	transition: background-color 0.3s ease;
}

.app-menu:hover {
	background-color: #f8f9fa;
}

.app-menu.active {
	background-color: #007bff;
	color: white;
	border-color: #007bff;
}

@media (max-width: 576px) {
	.sidebar {
		padding: 0.5rem;
	}
}

/*製品index　メニュー*/
.product-index-menu
{
	margin: 0;
	padding: 0;
	border-radius: 0 !important;
}

.product-index-menu.active {
	background-color: #ccc !important; /* 任意のグレー色 */
	color: #000 !important; /* テキスト色も調整（必要に応じて） */
}


/* 固定表示用のスタイル */
.sticky-product-menu {
	position: sticky;
	top: 85px; /* ナビバーの高さに合わせて調整 */
	z-index: 9998;
	background-color: #f8f9fa; /* 背景色を設定して重なりを防ぐ */
	padding: 0.5rem 0;
}



/* メニューバーとロゴを常に最上位に表示 */
.sticky-top {
	z-index: 9999 !important;
}