@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
body {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #ffffff;
  background-image: linear-gradient(90deg, #0000000f 1px, transparent 1px), linear-gradient(#0000000f 1px, transparent 1px);
  background-position: 10px 10px;
  background-size: 16px 16px;
  color: #333333;
}
@media (max-width: 768px) {
  .display-vertical {
    display: block;
  }
}
/* CSS Document */
.artec_logo {
  margin-top: 15px;
}
.main_title {
  margin-top: -15px;
}
.marker-yellow {
  text-decoration: underline;
  text-decoration-color: #ffe200;
  text-decoration-thickness: 10px; /* ラインの太さ */
  text-underline-offset: 10px;     /* テキストとの距離 */
}
.background-content {
  background-color: #e6f4f3;
  box-shadow: 2px 2px 8px;
  display: flex;
  flex-direction: column;
  padding-top:1em;
  padding-bottom:1em;
  width: 90%;
}
@media (min-width: 768px) {
  .background-content {
    width: 100%;
  }
}
.background-spec {
  background-color: #e6f4f3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  margin-bottom: 20px;
  padding: 10px;
}
.spec_row {
  display: block;
}
@media (min-width: 768px) {
  .spec_row {
    display: flex;
  }
}
.background-application {
  background-color: #f8e58a;
  padding-left:20px;
  padding-right:20px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.background-robot {
  background-color: #ffffff;
  border-radius: 1vh;
  border: 4px solid #00a29a;
  display: flex;
  flex-direction: column;
  padding: 30px;
}
.btn_app_icon {
  width: 100%;
}
@media (min-width: 768px) {
  .btn_app_icon {
    width: 50%;
  }
}
.btn_app_icon:hover {
  opacity: 0.7;
  cursor: pointer;
}
.btn_app_icon:active {
  opacity: 1;
  filter: brightness(0.7);
  cursor: pointer;
}
.btn-intelligence {
  /* width: 50%;  */
  margin: auto;
  font-size: clamp(16px, 3vw, 18px);
  padding: 16px;
  --bs-btn-bg: #00a29a;
  --bs-btn-border-color: #00a29a;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #33b7b1;
  --bs-btn-hover-border-color: #33b7b1;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #00a29a;
  --bs-btn-active-border-color: #00a29a;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn-inquiry {
  width: 100%; 
  margin: auto;
  font-size: clamp(16px, 3vw, 18px);
  padding: 16px;
  --bs-btn-bg: #00a29a;
  --bs-btn-border-color: #00a29a;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #33b7b1;
  --bs-btn-hover-border-color: #33b7b1;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #00a29a;
  --bs-btn-active-border-color: #00a29a;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
@media (min-width: 768px) {
  .btn-inquiry {
    width: 30%;
  }
}
.btn-spec-active {
  padding: 16px 32px;
  font-size: clamp(16px, 3vw, 18px);
  --bs-btn-bg: #00a29a;
  --bs-btn-border-color: #00a29a;
  --bs-btn-color: #ffe200;
  --bs-btn-hover-color: #ffe200;
  --bs-btn-hover-bg: #33b7b1;
  --bs-btn-hover-border-color: #33b7b1;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #00a29a;
  --bs-btn-active-border-color: #00a29a;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn-spec-inactive {
  padding: 16px 32px;
  font-size: clamp(16px, 3vw, 18px);
  --bs-btn-bg: #dcdcdc;
  --bs-btn-border-color: #dcdcdc;
  --bs-btn-color: #000;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #e8e8e8;
  --bs-btn-hover-border-color: #e8e8e8;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #dcdcdc;
  --bs-btn-active-border-color: #dcdcdc;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.text-content{
  color: #00a29a;
  font-size: clamp(21px, 3vw, 26px);
}
.titleback {
  background-color: #00a29a;
  color: white;
  font-size: clamp(21px, 3vw, 26px);
}
.text-caution {
  color: red;
}
.box01 {
  position: relative; /* 中央寄せしたい要素の親タグにrelativeをつける */
  overflow: hidden; /* はみ出した部分は表示しないようにする */
  height: 900px; /* 高さは固定値を入れる */
}
.box01 img {
  position: absolute;
  top: 50%; /* トップを基準に中央配置 */
  left: 50%; /* 左を基準に中央配置 */
  width: 1920px;
  height: 900px;
  margin-top: -450px;
  margin-left: -960px;
}
.logos {
  margin-bottom: 20px;
  margin-top: 70px;
}
.bg_gray {
  background-color: #e6e6e6;
  margin-top: 75px;
  margin-bottom: 75px;
  padding-top: 60px;
  padding-bottom: 60px;
}
.text26_21pt_black {
  font-size: clamp(21px, 3vw, 26px);
  font-weight: bold;
  color: #000000;
}
.text21_18pt_black {
  font-size: clamp(18px, 3vw, 21px);
  font-weight: bold;
  color: #333333;
}
.text26_21pt_green {
  font-size: clamp(21px, 3vw, 26px);
  font-weight: bold;
  color: #009999;
  margin-top: 60px;
　margin-bottom: 10px;
}

.text21_18pt_green {
  font-size: clamp(18px, 3vw, 21px);
  font-weight: bold;
  color: #009999;
  margin-top: 30px;
　margin-bottom: 100px;
}

.main_text {
	font-size: clamp(16px, 3vw, 18px);
}

.main_text_green {
	font-size: clamp(16px, 3vw, 18px);
	color: #009999;
}

.unit_text {
	font-size: clamp(16px, 3vw, 18px);
	margin-bottom: 15px;
	margin-top: 75px;
}



.unit_name {
	font-size: clamp(16px, 3vw, 18px);
	color: #009999;
	font-weight: bold;
}

.product_unit_name {
	font-size: clamp(14px, 3vw, 18px);
	margin-bottom: 15px;
}


.sub_text {
	font-size: clamp(12px, 3vw, 16px);
}

.annotation_text{
	font-size: clamp(11px, 3vw, 13px);
	margin-top: 15px;
}

.product_name{
	font-size: clamp(16px, 3vw, 16px);
	color: #009999;
	font-weight: bold;
	margin-bottom: 5px;
	margin-top: 30px;
}


.use_unit {
	margin-top: 10px;
	margin-bottom: 10px;
}


a:hover img {
  opacity: 0.5;
  -moz-opacity: 0.5;
  filter: alpha(opacity=50);
}

.modal_btn {
	/*border-radius: 25px;*/
}

.modal_btn:hover {
	  opacity: 0.5;
  -moz-opacity: 0.5;
  filter: alpha(opacity=50);
}

.catalog_btn {
  display: inline-block;
}
/*ナビ背景*/
.naviback {
  background-color: #00a29a;
  width: 100%;
  margin-top: 10px;
}
.pill {
  color: #fff;
  background-color: #00a29a;
  height: 70px;
  font-weight: 500;
}
.pill_border:not(:last-child) {
  border-right: 1px solid #666666;
}
@media (max-width: 768px) {
  .pill_border:not(:last-child) {
    border-right: none;
  }
}
.pill:hover {
  color: #ffe200;
  background-color: #40bfb7;
}
.navi_active {
  color: #ffe200;
}
/*ナビアクティブ時*/
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #ffffff;
  background-color: #000000;
  border-radius: 0px;
}
/*ここまで*/
footer {
  background-color: black;
  padding-top: 30px;
  padding-bottom: 15px;
  margin-top: 75px;
  color: white;
}
.companyname {
  font-size: 16px;
}
.copyright {
  font-size: 14px;
}
/* ページトップへ戻るボタン */
#page-top {
  position: fixed;
  display: none;
  width: 100%;
  height: 0;
  bottom: 180px;
  z-index: 2;
  margin: auto;
}
#page-top a {
  position: absolute;
  display: block;
  right: 40px;
  width: 80px;
  height: 80px;
  background-size: 80px 80px;
  -moz-background-size: 80px 80px;
  background-image: url('../images/top_btn.png');
  background-repeat: no-repeat;
  /*	bottom:110px;*/
}
#page-top a:hover {
  opacity: 0.5;
}
/*　画面サイズが768px以下の場合読み込む　*/
@media screen and (max-width:768px) {
  #page-top {
    display: none !important;
  }
  .logos {
    margin-bottom: 10px;
    margin-top: 35px;
  }
}
.link-btn a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  font-size: 20px;
  padding: 0.5em;
  line-height: 1.4em;
  margin-top: 1.6em;
  margin-bottom: 1.2em;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
  background-color: #337ab7;
}
.link-btn a:hover {
  opacity: 0.5;
  -moz-opacity: 0.5;
  filter: alpha(opacity=50);
}

/*改行位置調節*/
@media screen and (min-width: 768px) {
  /*　画面サイズが768px以上の場合読み込む　*/
  .br-sp {
    display: none;
  }
}
@media screen and (max-width:990px) {
  .br-pc {
    display: none;
  }
}

.sample-wrap a {
  font-size: 16px;
  margin-top: 15px;
  line-height: 40px;
}

.sample-wrap a:nth-child(4) {
  margin-top: 10px;
}

.marker-gray {
  text-decoration: underline;
  text-decoration-color: #353333;
  text-decoration-thickness: 2px; /* ラインの太さ */
  text-underline-offset: 10px;     /* テキストとの距離 */
}
.background-yellow {
  background-color: #f5d16efe;
  color: rgb(11, 1, 1);
  font-size: clamp(21px, 3vw, 26px);
  text-align: center;
}

.solid {
  border-bottom: solid 2px gray;
}