@charset "UTF-8";
/*!
 * bootstrap利用デザインに切り替えるページで、カスタム欄に定義記述して利用するスタイル
 * - 見出し、リスト調整
 */
.bge-contents {
    line-height: 24px;
}

[data-bgb] p {
    /* margin: 0; */
	margin-top: 0;
	margin-bottom: 1rem;
}

[data-bgb] h1, [data-bgb] h2, [data-bgb] h3, [data-bgb] h4, [data-bgb] h5, [data-bgb] h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
	overflow: initial;
}

[data-bgb] h2.h2, [data-bgb] h3.h2, [data-bgb] h4.h2, [data-bgb] h5.h2, [data-bgb] h6.h2 {
    /* font-size: 2rem; */
	font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
	[data-bgb] h2.h2, [data-bgb] h3.h2, [data-bgb] h4.h2, [data-bgb] h5.h2, [data-bgb] h6.h2 {
		font-size: 2rem;
	}
}

[data-bgb] h2.h3, [data-bgb] h3.h3, [data-bgb] h4.h3, [data-bgb] h5.h3, [data-bgb] h6.h3 {
    /* font-size: 1.75rem; */
	font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
	[data-bgb] h2.h3, [data-bgb] h3.h3, [data-bgb] h4.h3, [data-bgb] h5.h3, [data-bgb] h6.h3 {
		font-size: 1.75rem;
	}
}

[data-bgb] h2.h4, [data-bgb] h3.h4, [data-bgb] h4.h4, [data-bgb] h5.h4, [data-bgb] h6.h4 {
    /* font-size: 1.5rem; */
	font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
	[data-bgb] h2.h4, [data-bgb] h3.h4, [data-bgb] h4.h4, [data-bgb] h5.h4, [data-bgb] h6.h4 {
		font-size: 1.5rem;
	}
}

[data-bgb] h2.h5, [data-bgb] h3.h5, [data-bgb] h4.h5, [data-bgb] h5.h5, [data-bgb] h6.h5 {
	font-size: 1.25rem;
}

[data-bgb] h2.h6, [data-bgb] h3.h6, [data-bgb] h4.h6, [data-bgb] h5.h6, [data-bgb] h6.h6 {
	font-size: 1rem;
}

[data-bgb] h2.h5, [data-bgb] h3.h5, [data-bgb] h4.h5, [data-bgb] h5.h5, [data-bgb] h6.h5 {
	/* margin: initial; */
    padding: initial;
    /* text-align: left; */
    /* background: none; */
    /* overflow: hidden; */
}

[data-bgb] h1, .h1 {
	font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
	[data-bgb] h1, .h1 {
		font-size: 2.5rem;
	}
}

[data-bgb] h2, .h2 {
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  [data-bgb] h2, .h2 {
    font-size: 2rem;
  }
}
[data-bgb] h2 {
    /* text-align: initial; */
    background: initial;
	padding: initial;
    overflow: initial;
}
[data-bgb] h2::after {
    content: "";
    display: none;
    width: 0;
    height: 0;
    background: #ccc;
    margin: 0;
}

[data-bgb] h3, .h3 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  [data-bgb] h3, .h3 {
    font-size: 1.75rem;
  }
}
[data-bgb] h3 {
    /* font-size: 1.5em; */
    /* font-weight: bold; */
    /* line-height: 1.2; */
    /* margin: 0; */
    padding: 0;
    background: none;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    overflow: initial;
}

[data-bgb] h4, .h4 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  [data-bgb] h4, .h4 {
    font-size: 1.5rem;
  }
}
[data-bgb] h4 {
    /* font-size: 1.5rem; */
    /* font-weight: bold; */
    margin: initial;
    border: none;
    padding: 0;
    overflow: hidden;
    position: relative;
}
[data-bgb] h4::after {
    position: initial;
    /* bottom: .25em; */
    /* left: 0; */
    /* z-index: -1; */
    /* content: ""; */
    /* width: 100%; */
    /* height: 8px; */
    background-color: initial;
    border-radius: initial;
}

[data-bgb] h5, .h5 {
  font-size: 1.25rem;
}
[data-bgb] h5 {
    /* font-size: 1.2em; */
    /* font-weight: bold; */
    line-height: 1.2;
    margin: 1em 0;
    padding: initial;
    border-bottom: none;
    overflow: initial;
}

[data-bgb] h6, .h6 {
  font-size: 1rem;
}
[data-bgb] h6 {
    /* font-size: 1em; */
    /* font-weight: bold; */
    line-height: 1.2;
    /* margin: 1em 0; */
    border: none;
    border-left: none;
    background: none;
    padding: initial;
    overflow: initial;
}

[data-bgb] ul {
	margin-top: 0;
	margin-bottom: 1rem;
    /* margin: 0 0; */
}

[data-bgb] ol,ul {
	padding-left: 1rem;
    /* margin: 1em 0; */
}

[data-bgb] ul li {
    /* list-style-position: inside; */
    list-style-type: disc;
    /* margin: 0 0 .2em; */
    /* display: list-item; */
}

[data-bgb] .nav {
	margin-top: 0;
	margin-bottom: 0;
}

[data-bgb] .nav-tabs li {
	list-style: none;
	margin: 0;
}

[data-bgb] .tab-content {
	margin-top: -2px;
}

[data-bgb] .card p {
	margin-bottom: 1rem;
}

[data-bgb] hr {
    width: 100%;
    height: initial;
    color: initial;
    background: initial;
    border-style: solid;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

[data-bgb] tbody, td, tfoot, th, thead, tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
}
[data-bgb] th {
	font-weight: bold;
}

[data-bgb] img {
	vertical-align: middle;
}


.number-box-white {
    width: 30px; /* 四角の幅 */
    height: 30px; /* 四角の高さ */
    line-height: 30px; /* テキストの垂直中央揃え */
    border: 1px solid white; /* 枠線のスタイル */
    color:white;
    border-radius: 4px;
    margin-right: 10px; /* テキストとの間隔 */
    display: inline-block; /* インラインブロック要素として表示 */
}
.number-box-black {
    width: 30px; /* 四角の幅 */
    height: 30px; /* 四角の高さ */
    line-height: 30px; /* テキストの垂直中央揃え */
    border: 1px solid black; /* 枠線のスタイル */
    color:black;
    border-radius: 4px;
    margin-right: 10px; /* テキストとの間隔 */
    display: inline-block; /* インラインブロック要素として表示 */
}
.number-box-red {
    width: 30px; /* 四角の幅 */
    height: 30px; /* 四角の高さ */
    line-height: 30px; /* テキストの垂直中央揃え */
    border: 1px solid red; /* 枠線のスタイル */
    color:red;
    border-radius: 4px;
    margin-right: 10px; /* テキストとの間隔 */
    display: inline-block; /* インラインブロック要素として表示 */
}

/* 赤いボタン */
.btn-red {
    background-color: #FF0000;
    color: white;
    padding: 16px 24px;
    border-radius: 30px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-red .right-arrow {
    margin-left: 4px;
    display: inline-block;
    background: url('https://www.osoujikakumei.mom/img/common/icon_btn_red.png') center/contain no-repeat;
    width: 16px;
    height: 16px;
}

.btn-red:hover, .btn-red:focus {
    background-color: #E60000;
    color: white;
    text-decoration: none;
}

/* プロダクトカード */
.tab-content {
    background-color: #FF0000; /* 赤背景 */
}
.nav-tabs .nav-link {
    color: white; /* 非アクティブなタブのテキスト色 */
    background-color: #9B9B9B;
}
.nav-tabs .nav-link.active {
    background-color: #FF0000; /* アクティブなタブの背景色 */
    color: white;
    border-color: #FF0000 #FF0000 transparent; /* アクティブなタブの境界線色 */
}
.card {
    border: none; /* カードのボーダーを消す */
}
.card-header {
    background-color: transparent; /* カードヘッダーの背景色を透明に */
    border: none; /* カードヘッダーのボーダーを消す */
}
.btn-details {
    color: #FF0000; /* ボタンのテキスト色 */
    border: 2px solid #FF0000; /* ボタンのボーダー色 */
    border-radius: 20px; /* ボタンの角丸 */
    padding: 5px 20px; /* ボタンのパディング */
}



/*****************/
/* カラー関連　　　 */
/*****************/
.bg-red{
    background-color:red !important;
}
.red{
    color:red !important;
}
.white{
    color: white !important;
}


/* 赤色のバリエーション */
.text-red-100 { color: #ffcccc; }
.bg-red-100 { background-color: #ffcccc; }
.text-red-200 { color: #ff9999; }
.bg-red-200 { background-color: #ff9999; }
.text-red-300 { color: #ff6666; }
.bg-red-300 { background-color: #ff6666; }
.text-red-400 { color: #ff3333; }
.bg-red-400 { background-color: #ff3333; }
.text-red-500 { color: #ff0000; }
.bg-red-500 { background-color: #ff0000; }
.text-red-600 { color: #cc0000; }
.bg-red-600 { background-color: #cc0000; }
.text-red-700 { color: #990000; }
.bg-red-700 { background-color: #990000; }
.text-red-800 { color: #660000; }
.bg-red-800 { background-color: #660000; }
.text-red-900 { color: #330000; }
.bg-red-900 { background-color: #330000; }

/* 黄色のバリエーション */
.text-yellow-100 { color: #ffffcc; }
.bg-yellow-100 { background-color: #ffffcc; }
.text-yellow-200 { color: #ffff99; }
.bg-yellow-200 { background-color: #ffff99; }
.text-yellow-300 { color: #ffff66; }
.bg-yellow-300 { background-color: #ffff66; }
.text-yellow-400 { color: #ffff33; }
.bg-yellow-400 { background-color: #ffff33; }
.text-yellow-500 { color: #ffff00; }
.bg-yellow-500 { background-color: #ffff00; }
.text-yellow-600 { color: #cccc00; }
.bg-yellow-600 { background-color: #cccc00; }
.text-yellow-700 { color: #999900; }
.bg-yellow-700 { background-color: #999900; }
.text-yellow-800 { color: #666600; }
.bg-yellow-800 { background-color: #666600; }
.text-yellow-900 { color: #333300; }
.bg-yellow-900 { background-color: #333300; }

/* 青色のバリエーション */
.text-blue-100 { color: #cce6ff; }
.bg-blue-100 { background-color: #cce6ff; }
.text-blue-200 { color: #99ccff; }
.bg-blue-200 { background-color: #99ccff; }
.text-blue-300 { color: #6699ff; }
.bg-blue-300 { background-color: #6699ff; }
.text-blue-400 { color: #3366ff; }
.bg-blue-400 { background-color: #3366ff; }
.text-blue-500 { color: #0033ff; }
.bg-blue-500 { background-color: #0033ff; }
.text-blue-600 { color: #002699; }
.bg-blue-600 { background-color: #002699; }
.text-blue-700 { color: #001a66; }
.bg-blue-700 { background-color: #001a66; }
.text-blue-800 { color: #000d33; }
.bg-blue-800 { background-color: #000d33; }
.text-blue-900 { color: #000066; }
.bg-blue-900 { background-color: #000066; }

/* グレーのバリエーション */
.text-gray-100 { color: #f2f2f2; }
.bg-gray-100 { background-color: #f2f2f2; }
.text-gray-200 { color: #e6e6e6; }
.bg-gray-200 { background-color: #e6e6e6; }
.text-gray-300 { color: #d9d9d9; }
.bg-gray-300 { background-color: #d9d9d9; }
.text-gray-400 { color: #cccccc; }
.bg-gray-400 { background-color: #cccccc; }
.text-gray-500 { color: #bfbfbf; }
.bg-gray-500 { background-color: #bfbfbf; }
.text-gray-600 { color: #a6a6a6; }
.bg-gray-600 { background-color: #a6a6a6; }
.text-gray-700 { color: #8c8c8c; }
.bg-gray-700 { background-color: #8c8c8c; }
.text-gray-800 { color: #737373; }
.bg-gray-800 { background-color: #737373; }
.text-gray-900 { color: #595959; }
.bg-gray-900 { background-color: #595959; }