@charset "utf-8";

/*全体の設定

---------------------------------------------------------------------------*/
:root {
		--gray:#707070; /* #333333*/
		--blue:#0A89B2; /* 濃い青*/
		--light-blue:#C0EEFD;/*水色*/

		--bg-green2:rgba(192, 240, 218,0.2);
}


* {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--gray);
}

.mb{
    margin-bottom: 50px;
}

.mi{
	 margin-inline: 20px;
}

hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: var(--light-blue) solid;
  opacity: 1.25;
  width: 80%; /* 線の長さを80%に設定 */
  margin-left: auto; /* 中央に配置 */
  margin-right: auto; /* 中央に配置 */
}

.title_color{
color: var(--blue);
}

/*ヘッダー左上の文字*/
.navbar-brand.title_color {
  color: var(--blue); /* 初期のテキスト色 */
  text-decoration: none; /* デフォルトの装飾を削除 */
}

.navbar-brand.title_color:hover {
  color: var(--blue); /* ホバー時の色を固定 */
  text-decoration: none; /* ホバー時も装飾を追加しない */
}

/*ヘッダー右上の文字*/
.navbar-nav .nav-link {
  color: #000; /* 初期のテキスト色 */
  text-decoration: none; /* デフォルトで下線を削除 */
  transition: color 0.3s ease; /* スムーズな色の変化を追加 */
}

.navbar-nav .nav-link:hover {
  color: #007BFF; /* ホバー時の色 */
  text-decoration: none; /* ホバー時も下線を追加しない */
}

.br {
  position: relative; /* 擬似要素の配置の基準を設定 */
  display: inline-block; /* コンテンツのサイズに応じた範囲にする */
  padding-bottom: 5px; /* テキストと線の間隔 */
  font-size: 17px;
  color: #333;
  cursor: pointer;
}

.br::after {
  content: ''; /* 擬似要素を生成 */
  position: absolute; /* 親要素に対する配置 */
  bottom: 0; /* 親要素の下部に配置 */
  left: 0; /* 左端から開始 */
  width: 0; /* 初期幅を0に設定 */
  height: 2px; /* 線の太さ */
  background-color: var(--blue); /* 線の色 */
  transition: width 0.3s ease; /* アニメーションを追加 */
}

.br:hover::after {
  width: 100%; /* ホバー時に線が全幅まで伸びる */
}

.contents {
    max-width: 1230px;
    margin: 0 auto;
}

/*table*/
.ta1 {
    padding: 12px;
    table-layout: fixed;
    width: 80%;
    margin: 20px auto 20px;
    background: var(--white);
    color: var(--gray);
}

.ta1, .ta1 td, .ta1 th {
    word-break: break-all;
    border: 1px solid var(--blue);
    padding: 10px;
}

.ta1 th {
    width: 180px;
    font-weight: normal;
    background: var(--light-blue);
    padding: 0px;
    padding: 12px;
}

/*header*/
.navbar-collapse {
    flex-grow: 0;
}

.bg-body-tertiary {
  background-color: rgba(255, 255, 255, 0.8) !important; /* 白色で透明度50% */
  position: absolute; /* 画像の上に重ねるため絶対配置 */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1; /* 他の要素より上に表示 */
}

#mainimg {
  position: relative; /* 子要素（navbar）が画像上に表示されるようにする */
  height: auto; /* 任意の高さに設定 */
  width: 100%;
}

.bxslider img {
  width: 100%;
  height: auto; /* 画像が横幅に合わせて調整されるように */
}

.navbar {
    position: absolute; /* ヘッダーを絶対位置に設定 */
    top: 0;
    left: 0;
    width: 100%; /* ヘッダーを画面幅全体に広げる */
    z-index: 10; /* ヘッダーを前面に表示 */
    background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
}

.img_sp {
    position: relative; /* トップ画像の親要素を基準にする */
    margin-top: 0; /* ヘッダーの下に隙間を作らない */
}


/*トップ画像*/
img_pc{
    display: block;
}

.img_sp{
	display: none;
}

/*製品・技術 ここから*/
.tac{
    text-align: center;
}

.img_w{
    max-width: 80%;
}

/*footer*/

.footer{
    background-color: var(--blue);
    padding: 50px;
}

.footer-text{
	color: #fff;
    font-size: 12px;
}
/*600px以下*/
@media (max-width: 600px) {
    .navbar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 10;
        background-color: rgba(255, 255, 255, 0.8);
    }

    .img_sp {
        margin-top: 0;
    }
}


/*768px以下*/
@media screen and (max-width: 768px) {

.img_pc{
	display: none;
}

.img_sp{
	display: block;
}

	/*table*/

    .ta1 {
        border: 0;
    }

    .ta1 th, .ta1 th {
        width: 100%;
        display: block;
        border-right: none;
        border-left: none;
        border-top: 1.5px solid var(--blue);
        border-bottom: 1.5px solid var(--blue);
        padding-bottom: .6em;
        margin-top: .6em;
        margin-bottom: .6em;
    }

    .ta1 td {
        background: var(--white);
        padding: 10px;
        display: block;
        border: 0;
    }

}

/*予期せぬ横スクロール・謎の余白を枠線で表示*/
/*
* {
  outline: 2px solid blue;
}
*/

