@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;
}
/* CSS Document */
.artec_logo {
  margin-top: 15px;
}
.main_title {
  margin-top: -15px;
}
.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;
}
.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);
	margin-bottom: 15px;
}

.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: #009999;
  width: 100%;
  margin-top: 10px;
}
/*ナビ基本*/
li.pill {
  vertical-align: middle;
}
li.pill a {
  color: #ffffff;
  border-radius: 0px;
  font-size: 15px;
}
li.pill a:hover {
  background-color: inherit;
}
/*ナビアクティブ時*/
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #ffffff;
  background-color: #000000;
  border-radius: 0px;
}
/*ナビホバー時*/
.pill:hover, .pill li:focus {
  color: #ffffff;
  background-color: #000000 !important;
}
/*ここまで*/
/*ここまで*/
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;
}