@charset "UTF-8";
/* ------------------------------------- */
/* カルーセルキャプションのカスタムスタイル */
/* ------------------------------------- */
.carousel-item img {
    object-fit: cover; /* 画像がはみ出さないように調整 */
}
/* 必要であれば、カルーセルの幅を調整 */
.carousel-wrapper {
    max-width: 1280px; /* カルーセルの最大幅を指定 */
    margin: 20px auto; /* 中央寄せ */
    border: 1px solid #ddd; /* 視覚的に分かりやすくするための枠線 */
}
/* 左右の操作ボタンのスタイルをカスタマイズ */
.carousel-control-prev,
.carousel-control-next {
    width: 80px; /* ボタン全体の幅を広げる */
    opacity: 1; /* 通常時の透過度をなくす（常に表示） */
    transition: opacity 0.3s ease; /* ホバー時のトランジション */
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 0.9; /* ホバー時に少し透過させる */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
	/* アイコンの背景色をカスタマイズ */
	background-color: rgba(0, 0, 0, 1); /* 濃いめの半透明黒 */
	border-radius: 50%; /* 完全な丸型にする */
	width: 4rem; /* アイコンの幅を大きく */
	height: 4rem; /* アイコンの高さを大きく */
	display: flex; /* Flexboxを使ってアイコンを中央寄せ */
	align-items: center; /* 垂直方向中央 */
	justify-content: center; /* 水平方向中央 */
	font-size: 2rem; /* 矢印アイコン自体のサイズ（Bootstrapの背景画像を使用しない場合） */
	/* Bootstrapのアイコンは背景画像で提供されるため、以下のように上書きします */
	background-size: 80% 80%; /* アイコンの大きさを調整 */
	background-repeat: no-repeat;
	background-position: center;
}
.custom-carousel-caption {
    position: absolute; /* 親要素に対して絶対配置 */
    bottom: 10px; /* 下からの距離 */
    left: 10px; /* 左からの距離 */
    right: auto; /* 右寄せの縛りを解除 */
    top: auto; /* 上からの縛りを解除 */
    text-align: left; /* テキスト左寄せ */
    background-color: rgba(255, 255, 255, 0.7); /* 半透明の白背景 */
    padding: 15px; /* 内側の余白 */
    border-radius: 5px; /* 角を丸くする */
    max-width: 400px; /* キャプションボックスの最大幅 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 軽めの影 */
    z-index: 10; /* 他の要素より手前に表示 */
}

.custom-carousel-caption h5 {
    font-size: 1.3rem; /* タイトルを大きく */
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
	word-wrap: break-word;   /* 長い単語を強制的に改行 */
	overflow-wrap: break-word; /* word-wrapの新しい標準名 */
}

.custom-carousel-caption .tags-wrapper {
    margin-top: 15px;
    display: flex; /* タグを横並びにする */
    flex-wrap: wrap; /* タグが多すぎたら次の行に折り返す */
    gap: 10px; /* タグ間のスペース */
}

.custom-carousel-caption .tag {
    background-color: rgba(0, 0, 0, 0.8); /* 半透明の黒背景 */
    color: white; /* テキストの色 */
    padding: 5px 12px; /* 内側の余白 */
    border-radius: 15px; /* 角を丸くする */
    font-size: 1.0rem; /* フォントサイズ */
    white-space: nowrap; /* テキストの折り返しを防ぐ */
}

/* その他の情報 (#EDI #XXXX) のスタイル */
.custom-carousel-caption .info-tags {
    font-size: 1.0rem;
    color: gray;
    margin-left: 5px; /* タグとの間隔 */
}
/* ------------------------------------- */
/* 検索テキストボックスのカスタムスタイル */
/* ------------------------------------- */
.search-container {
    max-width: 500px; /* 検索ボックスの最大幅を設定 */
    margin: 50px auto; /* 上下の余白と中央寄せ */
    text-align: center; /* タイトルテキストの中央寄せ */
}

.search-title {
    font-size: 1.5rem; /* タイトルのフォントサイズ */
    font-weight: bold; /* 太字 */
    margin-bottom: 20px; /* 下の要素との余白 */
    color: #333;
}
/* 検索ボックス全体をカプセル型にするための input-group のスタイル */
/* d-flex はFlexboxを有効にし、align-items-center で垂直方向中央揃えに */
.custom-search-input-group {
    border: 1px solid #ced4da; /* 全体のボーダー */
    border-radius: 0.5rem; /* 全体を角丸 */
    background-color: #fff; /* 全体的な背景色 */
    display: flex; /* Flexboxで中の要素を配置 */
    align-items: center; /* 垂直方向中央寄せ */
    overflow: hidden; /* 角丸からはみ出す内容を隠す */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* 軽い影 */
}

/* 虫眼鏡アイコン部分のスタイル */
.custom-search-input-group .input-group-prepend {
    padding: 0.5rem 0.75rem; /* アイコン周りの余白 */
    color: #6c757d; /* アイコンの色 */
    background-color: #e9ecef; /* アイコン部分の背景色（画像のような薄いグレー） */
    border-top-left-radius: 0.5rem; /* 左上を丸く */
    border-bottom-left-radius: 0.5rem; /* 左下を丸く */
}
.custom-search-input-group .input-group-prepend .bi-search {
    font-size: 1.25rem; /* アイコンのサイズ */
}
.custom-search-input-group .input-group-prepend a {
    text-decoration: none;
    color: #6c757d; /* アイコンの色 */
}

/* テキスト入力フィールドのスタイル */
.custom-search-input-group .form-control {
    border: none; /* Input Group全体でボーダーを持つため、個別のボーダーをなくす */
    box-shadow: none; /* フォーカス時のデフォルトの影をなくす（必要なら別途指定） */
    padding-left: 0.75rem; /* プレースホルダーの左側の余白 */
    height: calc(1.5em + 1rem + 2px); /* 入力欄の高さをBootstrapのデフォルトに合わせる */
}

/* フォーカス時の調整 */
.custom-search-input-group.focus-within { /* JSでクラスを追加することを想定 */
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* form-control:focus時のInput Groupボーダー調整 */
.custom-search-input-group:has(.form-control:focus) {
    border-color: #86b7fe; /* フォーカス時にグループ全体のボーダー色を変更 */
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* フォーカス時にグループ全体に影を追加 */
}
/* ------------------------------------- */
/* 業種コンテンツリンクのスタイル */
/* ------------------------------------- */
.content-links-container {
    margin-top: 30px;
    padding: 15px 0;
    text-align: center;
}

.content-links-list {
    display: flex; /* Flexboxでリンクを横並びにする */
    justify-content: center; /* リンク群全体を中央揃え */
    align-items: center; /* 垂直方向中央揃え */
    list-style: none;
    padding: 0;
    margin: 0;
}

.content-links-list li {
    font-size: 1.0rem;
    font-weight: bold;
    color: #222;
    /* liの右側に縦線を引く */
    border-right: 2px solid #ccc; /* 薄いグレーの縦線 */
    padding: 0 50px; /* li自体のパディングで左右のスペースを確保 */
    white-space: nowrap; /* テキストの折り返しを防ぐ */
}

.content-links-list li .none-select {
	color: #ccc;
}
/* 最後のli要素の右側には縦線を引かない */
.content-links-list li:last-child {
    border-right: none;
}
.content-links-list li a {
    text-decoration: none;
    color: inherit; /* 親要素（li）の色を継承 */
    display: block; /* リンク領域を広げる */
}

.content-links-list li a:hover {
    color: #007bff;
}

/* レスポンシブ対応: 小さい画面での調整 */
@media (max-width: 768px) {
    .content-links-list {
        flex-wrap: wrap; /* 画面が小さい場合に折り返す */
        padding: 0 10px;
    }
    .content-links-list li {
        width: auto; /* 幅を自動調整 */
        border-right: none; /* 小さい画面では縦線を非表示にする */
        padding: 5px 10px; /* リンクの余白を調整 */
    }
    .content-links-list li:not(:last-child) {
         margin-right: 5px; /* 折り返した時の右マージン */
    }
    .content-links-list li a {
        padding: 0; /* aタグのパディングは不要に */
    }
}
/* ------------------------------------- */
/* コンテンツ表示部分のスタイル */
/* ------------------------------------- */
.industry-container {
    width:85%!important;
}
.industry-main-title {
    font-size:2.0rem;
    font-weight: bold;
}
.industry-main-line {
    font-size:2.0rem;
}
.industry-main-link-container {
    text-align: right;
}
.industry-main-link {
    font-size:1.3rem;
    font-weight: bold;
    color: black;
    text-decoration: none;
}
.industry-main-link:hover {
	text-decoration: underline;
}
.industry-link {
	text-decoration: none;
}
.industry-link:hover {
  	text-decoration: underline;
}
.industry-image-container {
    position: relative;
    display: inline-block;
}
.industry-image-tag {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 1.0rem;
}
.industry-title {
    font-size:1.3rem;
    font-weight: bold;
    color: black;
	/* 親要素の幅に合わせてテキストを折り返す */
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.industry-tag {
    color: gray;
}
/* ------------------------------------- */
/* 偶数/奇数行の背景色スタイル */
/* ------------------------------------- */
/* 奇数番目のセクションの背景色（白） */
.odd-row {
    background-color: #fff;
}
/* 偶数番目のセクションの背景色（薄いグレー） */
.even-row {
    background-color: var(--bs-body-tertiary-bg);
}