@charset "utf-8";

/* CSS Document */
.artec_logo {
	margin-top: 30px;
}

.main {
	padding-top: 30px;
	padding-bottom: 10px;

	.logo {
		text-align: center;

		>div {
			margin-top: 30px;
			font-size: min(7vw, 30px);
			line-height: min(7vw, 30px);
		}

		img {
			width: 100%;
			max-width: 420px;
		}
	}

	.prod {
		img {
			width: 100%;
			max-width: 339px;
		}
	}
}

/*ヘッダ背景*/
.header {
	background-color: #F9F9F9;
}

/*グローバルナビ*/
/*ナビ背景*/
.naviback {
	background-color: #24A74B;
	width: 100%;
}

/*ナビ基本*/
li.pill a {
	background-color: #24A74B;
	color: #ffffff;
	font-size: 16px;
	border-radius: 0px;
}

/*ナビアクティブ時*/
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
	color: #ffffff;
	background-color: #0F6428;
	font-size: 16px;
	border-radius: 0px;
}

/*ナビホバー時*/
.pill a:hover,
.pill a:focus {
	color: #ffffff;
	background-color: #0F6428 !important;
}


/*リンク画像のホバー*/
a:hover img {
	opacity: 0.5;
	-moz-opacity: 0.5;
	filter: alpha(opacity=50);
}


/*フッタ*/
footer {
	background-color: black;
	padding-top: 15px;
	padding-bottom: 30px;
	color: white;
	margin-top: 90px;
}

.companyname {
	font-size: 17px;
}

.copyright {
	font-size: 14px;
}


/*背景ドット*/
.bg_pt {
	background-color: #f3fcfa;
	background-image: radial-gradient(#c8c8c8 1px, #f3fcfa 1px);
	background-size: 20px 20px;
	padding-bottom: 20px;
}

/*背景グリーンドット*/
.bg_green {
	background-color: #24A74B;
	background-image: radial-gradient(#209543 1px, #24A74B 1px);
	background-size: 20px 20px;
	padding-bottom: 20px;
}

/*背景グレー*/
.bg_gray {
	background-color: #E8E5E0;
	padding-bottom: 20px;
}

/*動画埋め込み*/
@media (max-width:599px) {
	.videoframe {
		margin-bottom: 10px;
		width: 420px;
		margin: 20px auto 75px;
	}
}

@media (min-width:600px) and (max-width:768px) {
	.videoframe {
		margin-bottom: 10px;
		width: 500px;
		margin: 20px auto 75px;
	}
}

@media (min-width:769px) {
	.videoframe {
		width: 600px;
		margin: 20px auto 75px;
	}
}

video {
	width: 100%;
	border: 3px solid #24A74B;
}

/*見出し*/
.subtitle {
	font-size: 32px;
	color: #3E3A39;
	font-weight: bold;
	margin-top: 60px;
	margin-bottom: 15px;
}

/*見出し帯*/
.category_headline {
	font-size: 26px;
	color: white;
	border-radius: 30px;
	background: #24A74B;
	margin-top: 75px;
	margin-bottom: -10px;
}

.spectext {
	font-size: 18px;
}

p {
	margin-top: 15px;
	font-size: 18px;
}

/*センサーと実験例ページ用*/
.sensor_title {
	margin-bottom: 15px;
}

.sensor_description {
	font-size: 21px;
	margin-bottom: 30px;
}

.sensor_img {
	margin-bottom: 15px;
}

/*ソフトウェアページ用*/
.boderbox {
	border-bottom: 1px solid gray;
	margin-bottom: 10px;
	margin-top: 10px;
}

.wrap-btn {
	display: flex;
	flex-direction: column;
	text-align: center;
}

.wrap-btn>a {
	margin-top: 10px;
	margin-bottom: 30px;
	display: inline-block;
}

.wrap-btn img {
	max-width: 100%;
}

/*画像共通マージン*/
.pc_images {
	margin-top: 60px;
	margin-bottom: 60px;

}

.pc_images_exception {
	margin-top: 90px;
}

.sp_images {
	margin-top: 45px;
	margin-bottom: 45px;
}

.info-wrap:nth-child(2n+1) {
	background-color: #f3fcfa;
	background-image: radial-gradient(#c8c8c8 1px, #f3fcfa 1px);
	background-size: 20px 20px;
	padding-bottom: 20px;
}

.sensor_images {
	margin-top: 60px;
	margin-bottom: 60px;

	img {
		width: 100%;
		max-width: 450px;
	}

	>div:nth-child(1) {
		>div:nth-child(1) {
			color: #24a74b;
			font-size: min(8vw, 45px);
			font-weight: 700;
		}

		>div:nth-child(2) {
			font-size: min(3.5vw, 21px);
		}
	}

	@media only screen and (max-width: 991px) {
		>div:nth-child(2) {
			>div:nth-child(2) {
				margin-top: 10px;
			}
		}
	}

	>div {
		.spec {
			text-align: left;

			>div:nth-child(2) {
				font-size: min(3.2vw, 18px);
				font-weight: bold;
			}

			ul {
				list-style: none;
				margin-left: 0;
				padding-left: 0;
				font-weight: 500;
				font-size: min(3.2vw, 18px);

				li {
					line-height: min(4.3vw, 24px);
				}

				li::before {
					content: '■';
					padding: 5px;
				}
			}

		}

		.wcyd {
			background-color: #cbedb2;
			border-radius: 10px;
			margin-bottom: 10px;
			padding: 10px;
			font-size: min(3.2vw, 18px);

			>div:nth-child(1) {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				width: 35%;
				font-weight: bold;
			}

			ul {
				/* font-size: min(2.5vw, 15px); */
				text-align: left;
				font-weight: 500;
				padding-right: 4px;

				li {
					line-height: min(4.3vw, 24px);
				}
			}
		}

		.image-wrap {
			position: relative;

			>div {
				position: absolute;
				right: 0;
				bottom: 0;
				font-size: min(3.6vw, 20px);
				line-height: min(3.6vw, 20px);
				/* width: 30%; */
				text-shadow: 1px 1px white;
				padding: 10px;
			}
		}
	}
}

.sensor_images_exception {
	margin-top: 0px;
	margin-bottom: 60px;
}

/* ページトップへ戻るボタン */
#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: 60px;
	height: 84px;
	background-size: 60px 84px;
	-moz-background-size: 60px 84px;
	background-image: url('../images/top_btn.png');
	background-repeat: no-repeat;
	/*	bottom:110px;*/
}

#page-top a:hover {
	opacity: 0.5;
}

@media only screen and (max-width: 480px) {
	#page-top {
		display: none;
	}
}

.main-copy {
	margin: 60px 0;
	font-size: min(6.5vw, 2.6rem);
	line-height: min(7vw, 2.8rem);
	font-weight: 600;
	letter-spacing: -1px;
}

.head {
	color: #24a74b;
	font-size: min(6.6vw, 50px);
	font-weight: 700;
	letter-spacing: -1px;
	margin-top: 90px;
}

.top2 {
	.head {
		font-size: min(7.1vw, 42px);
	}

	.desc {
		font-size: min(5.8vw, 34px);
		line-height: min(5.8vw, 34px);
		font-weight: 100;
		text-align: left;

		img {
			max-width: 10vw;
		}

		img+div {
			padding-left: 1vw;
		}

		+div {
			margin-top: min(2.9vw, 22px);
			font-size: min(2.9vw, 22px);
		}
	}
}

.support {
	.head+div {
		font-size: min(5.2vw, 40px);
		line-height: min(5.2vw, 40px);
	}

	.desc {
		font-size: min(4.5vw, 34px);
		line-height: min(4.5vw, 34px);
	}
}

.sensor-explanation {
	.head+div {
		font-size: min(4vw, 30px);
		line-height: min(4vw, 30px);
	}

	.sensor-wrap {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background: #e8e5e0;
		margin: 10px auto;
		width: 240px;
		height: 240px;
		border-radius: 50%;
		vertical-align: middle;
		padding-bottom: min(1.5vw, 9px);

		img {
			margin: 44px auto 0;
			width: 100px;
		}

		img+* {
			font-size: 25px;
		}

		@media only screen and (min-width: 768px) and (max-width: 991px) {
			width: 200px;
			height: 200px;

			img {
				margin: 35px auto 0;
				width: 82px;
			}

			img+* {
				font-size: 21px;
			}
		}

		@media only screen and (max-width: 767px) {
			width: min(35vw, 220px);
			height: min(35vw, 220px);

			img {
				margin: min(7vw, 44px) auto 0;
				width: min(15vw, 100px);
			}

			img+* {
				font-size: min(2.5vw, 19px);
			}
		}
	}

	.upto3 {
		color: #00a23b;
		font-size: min(3vw, 30px);
		letter-spacing: -1px;

		div:nth-child(2) {
			margin: 0 auto;
			font-size: min(12vw, 110px);
			line-height: min(12vw, 110px);
			color: white;
			background: #00a23b;
			border-radius: 50%;
			width: min(12vw, 110px);
			height: min(12vw, 110px);
		}

		+* {
			max-width: 500px;
		}
	}

	.feature-wrap {
		max-width: 930px;
		margin: auto;
	}

	.feature {
		margin-top: 50px;
		padding-bottom: 30px;

		.number {
			font-size: 72px;
			text-align: left;
			color: #9fa0a0;
			line-height: initial;

			span {
				margin-left: 50px;
			}
		}

		.head {
			font-size: 50px;
			line-height: 100px;
			margin-top: initial;
		}

		.desc {
			font-size: 32px;
			line-height: 35px;
			text-align: left;
			font-weight: 500;

			span {
				display: block;
				margin-left: 50px;
			}
		}

		.back {
			position: absolute;
			top: 50px;
			bottom: 0;
			background-color: #e8e5e0;
			border-radius: 20px;
		}

		*:nth-child(n + 2) {
			z-index: 10;
		}

		@media only screen and (min-width: 768px) and (max-width: 991px) {
			.number {
				font-size: 62px;

				span {
					margin-left: 40px;
				}
			}

			.head {
				font-size: 45px;
				line-height: 90px;
			}

			.desc {
				font-size: 25px;
				line-height: 30px;

				span {
					margin-left: 40px;
				}
			}
		}

		@media only screen and (max-width: 767px) {
			padding-bottom: min(6vw, 35px);

			.number {
				font-size: min(12vw, 70px);
				line-height: min(7vw, 42px);
				text-align: center;

				span {
					margin: inherit;
				}
			}

			.head {
				font-size: min(6.6vw, 40px);
			}

			.desc {
				order: 1;
				font-weight: inherit;
				font-size: min(5.3vw, 32px);

				span {
					margin: inherit;
					text-align: center;
				}
			}

			.back {
				top: min(6vw, 35px);
			}
		}
	}
}


.spec-logger {
	ul {
		list-style-type: square;

		font-size: 20px;

		@media only screen and (min-width: 768px) and (max-width: 991px) {
			font-size: 15px;
		}

		@media only screen and (max-width: 767px) {
			margin-bottom: 0;
		}
	}
}

.spec {
	.title {
		color: #24a74b;
		font-size: min(6vw, 40px);
		letter-spacing: -1px;

		+div>div:nth-child(1) {
			font-weight: bold;
			font-size: min(3vw, 18px);
		}
	}

	.content {
		font-size: min(3vw, 18px);

		:nth-child(2n) {
			text-align: right;
			display: flex;
			justify-content: flex-end;
		}

		:nth-child(2n)::before {
			content: '・・・・・・';
		}

		@media only screen and (min-width: 768px) and (max-width: 991px) {
			font-size: 13.5px;
		}

		@media only screen and (max-width: 767px) {
			font-size: min(2.8vw, 14.4px);
		}
	}
}

.icon {
	color: white;
	text-align: center;

	.color1 {
		background: #00adba;
	}

	.color2 {
		background: #008cce;
	}

	.color3 {
		background: #00adba;
	}

	.color4 {
		background: #ec6c00;
	}

	.color5 {
		background: #e7af00;
	}

	.case {
		display: flex;
		color: initial;

		img {
			width: 100%;
		}
	}

	>div {
		width: min(18%, 90px);
		margin: 5px;
		padding: 2px;
		border-radius: 5px;
		font-size: min(3vw, 15px);
		line-height: min(3vw, 15px);

		@media only screen and (min-width: 992px) {
			font-size: 20px;
			line-height: 20px;
		}
	}
}