@charset "UTF-8";
/* CSS Document */

.goods_banner{ background: url(img/banner_comtecs.jpg) no-repeat center center; background-size:cover;}
.fl_box{ flex-wrap:wrap !important;}
.fl_box .sl_goods{ border-bottom:2px solid #FFFFFF;}

#goods .fl_box{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
	gap:28px;
	padding:30px 20px;
}

dl dt{color:#0071DD; font-size:1.2rem;}
dl dl{ margin-left: 2rem;}
dt + dd{ margin-bottom:2rem;}

main.goods{
	max-width: 1200px;
	margin: 100px auto;
	padding: 0 20px;
}
.goods .fl_box{ 
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.goods .sl_goods{ max-width: 300px!important;}

/* Font
---------------------------------------*/
.goods_item h2, .custam_d h2{ border:none; margin-left:-0.4rem;}
.goods_item h3, .catalog h3{
	border-bottom: 6px solid;
	-webkit-border-image: -webkit-gradient(linear, 100% 0, 0 0, from(#21618C), to(#D4E6F1));
	-webkit-border-image: -webkit-linear-gradient(to right, #21618C 0%, #D4E6F1 100%);
	-moz-border-image: -moz-linear-gradient(to right, #21618C 0%, #D4E6F1 100%);
	-o-border-image: -o-linear-gradient(to right, #21618C 0%, #D4E6F1 100%);
	border-image: linear-gradient(to right, #21618C 0%, #D4E6F1 100%);
	border-image-slice: 1;
	margin:0 0 .8rem 0; padding:.8rem 0;}
.goods_item h4{ font-weight:bold; margin:1rem  0 .4rem 0; font-size:1.2rem;}

.goods_item2 h2{
	border:none; margin-left:-0.4rem; font-size:1.4rem;
	background: -webkit-linear-gradient(110deg, #19448e, #95B5C1 40%, #19448e);
	background: -moz-linear-gradient(110deg, #19448e, #95B5C1 40%, #19448e);
	background: -o-linear-gradient(110deg, #19448e, #95B5C1 40%, #19448e);
	background: linear-gradient(110deg, #19448e, #95B5C1 40%, #19448e);
	-webkit-background-clip: text;
	-webkit-text-fill-color: rgba(255,255,255,0.0);
	color: #99ffff;
	}

.product_name{ margin-bottom:14px; text-align: center;}

/* Goods sub banner
---------------------------------------*/
.SB_catalog{ background: url(img/banner_catarog.png) no-repeat center center;background-size:cover;}

/* Goods sub Menu
---------------------------------------*/
.page-layout{
	display:flex;
	align-items:flex-start;
	gap:40px;
	max-width:100%;
	margin:40px auto;
	padding:0 20px;
}

.side-menu{
	width:260px;
	flex:0 0 260px;
	position:sticky;
	top:10px;
	max-height:calc(100vh - 10px);
	overflow-y:auto;
	background:#fff;
	border-right:1px solid #ddd;
	padding-bottom:40px;
	
	scrollbar-gutter: stable;
}

.main-content{
	flex:1;
	min-width:0;
}

.side-menu h3{
	margin:0;
	padding:10px 15px;
	background:#f5f5f5;
	font-size:14px;
}

.side-menu ul{
	list-style:none;
	margin:0;
	padding:0;
}

.side-menu li{
	border-bottom:1px solid #eee;
	margin-left: -1rem;
	padding-left: 14px;
}

.side-menu a{
	display:block;
	padding:10px 15px;
	text-decoration:none;
	color:#333;
	font-size:12px;
}

.side-menu a:hover{
	background:#f2f2f2;
}

.side-menu .active a{
	background: #1E7BA7;
	color:#fff;
}

/*スマホ*/
.menu-toggle{
	display:none;
	width:100%;
	padding:12px;
	background:#1E7BA7;
	color:#fff;
	border:none;
	font-size:16px;
}

@media (max-width:920px){

	main{padding-top:0;}
	.main-content{margin-top:-120px;}
	.page-layout{
		flex-direction:column;
		gap: 0; /* 不要な上下の隙間をなくす */
	}

	.side-menu{
		position:relative;
		width:100%;
		height:auto;
		border-right:none;
		max-height:none;
		overflow:visible;
		margin-bottom:0;
	}
	.menu-toggle{
		display:block;
	}
	.menu-inner{
		display:none;
	}
	.side-menu.open .menu-inner{
		display:block;
	}
	.menu-toggle::after{
		content:"▼";
		float:right;
	}
	.side-menu.open .menu-toggle::after{
		content:"▲";
	}

}

/* Goods Item
---------------------------------------*/
.product-card{
	display:flex;
	gap:40px;
	padding:30px;
	margin:40px auto;
	max-width:1100px;

	background:#fff;
	border-radius:20px;
	box-shadow:0 10px 30px rgba(0,0,0,0.08);
	transition:0.3s;
}

.product-card:hover{
	transform:translateY(-5px);
	box-shadow:0 20px 50px rgba(0,0,0,0.12);
}

.product-media{
	width:320px;
	text-align:center;
}

.product-media img{
	width:100%;
	height: auto;
	border-radius:14px;
}

.btn-primary{
	display:inline-block;
	margin-top:15px;
	padding:12px 24px;
	border-radius:30px;

	background:linear-gradient(135deg,#4f8cff,#6ad0ff);
	color:#fff;
	font-weight:600;
	text-decoration:none;

	transition:0.3s;
}

.btn-primary:hover{
	transform:translateY(-2px);
	box-shadow:0 8px 20px rgba(79,140,255,0.4);
}

.product-content{
	flex:1;
}

.product-tag{
	font-size:12px;
	color:#6a8cff;
	font-weight:600;
	letter-spacing:1px;
	margin-bottom:10px;
}

.product-content h2{
	font-size:28px;
	margin-bottom:10px;
}

.product-sub{
	color:#555;
	margin-bottom:20px;
}

.product-spec{
	list-style:none;
	padding:0;
	margin:0;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px 20px;
}

.product-spec li{
	position:relative;
	padding-left:20px;
	font-size:14px;
}

.product-spec li::before{
	content:"";
	position:absolute;
	left:0;
	top:8px;
	width:6px;
	height:6px;
	background:#6a8cff;
	border-radius:50%;
}

/* ===== Responsive ===== */
@media(max-width:768px){
	.product-card{
		flex-direction:column;
		padding:20px;
	}

	.product-media{
		width:100%;
	}

	.product-spec{
		grid-template-columns:1fr;
	}
}

.goods_item, .goods_item2{ display:flex; justify-content:center; align-items: center; padding:1%; margin:0 auto 2% auto;}
.goods_item div{ margin:0; padding:2%; line-height:1.6rem;}

.goods_item ul{margin-left:1rem;}
.goods_item div:first-child{ text-align:center;}
.goods_item div img{ border-radius: 10px;}
.goods_item div:nth-child(2){ width:60%; min-width: 400px; background-color: rgba(245, 245, 245, 0.5); border-radius: 10px;}
.goods_item div:nth-child(2) li:before, .goods_item2 section li:before{ font-family: 'Font Awesome 5 Free';content: '\f101　';color:#8c8c8c;font-size:1rem; }

.goods_item2{ flex-wrap:wrap; align-items: flex-start;}
.goods_item2 div{ margin:1%; padding:2%; line-height:1.6rem; border:1px solid #c9c9c9; border-radius:10px;box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.3); align-self:stretch; width:360px;}
.goods_item2 div li{ list-style: circle; padding-left: 6px;}
.goods_item2 img{ display:block; margin:0 auto; padding:0;}

.custam{ text-align:center;}

.custam_d div:first-child{ background:#577287; color:#FFFFFF; margin:1%; padding:1%; line-height:2rem;}
.custam_d div:nth-child(2){ text-align:center; padding-bottom:1%;}
.custam_d:nth-child(2){flex-flow: row-reverse;}


/* Catalog
---------------------------------------*/
/*#catalog li:hover{ background:#E9E9E9;}*/
#catalog .fl_box li a:visited{color: #4F8C96;}

#catalog li{
	position:relative;
	transition:.2s;
	line-height:1.6rem; 
	border-collapse:collapse;
	box-sizing: border-box; 
	border:0.5px solid #c6c6c6;
	margin:0; 
	padding:.4rem;
	width:calc((100% - 30px) / 4);
  	min-width:180px;
}
#catalog li:before{
  content:none;
}
#catalog li a::after{
	font-family: "Font Awesome 6 Free";
	content: "\f019";
	font-weight: 900;
	color:#999;
	font-size:.8rem;
	position:absolute;
	right:10px;
	top:50%;
	transform:translateY(-50%) translateX(-5px);
	opacity:0;
	transition:.2s
}
#catalog li:hover a::after{
	opacity:1;
	transform:translateY(-50%) translateX(0);
}
#catalog li:hover{
	background:#E9E9E9;
	transform:translateY(-2px);
}
#catalog li a{ display:block; width:100%;}
#catalog .fl_box{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	justify-content: flex-start!important;
	
}
#catalog li:active{
  transform:translateY(0);
}

#catalog .switchH3, #spec .switchH3{cursor: pointer;position: relative;	padding-right: 20px;}
#catalog .switchH3::after, #spec .switchH3::after{content: "＋";position: absolute;right: 5%;top: 25%;}
#catalog .switchH3.active::after, #spec .switchH3.active::after{content: "－";}

/* Catalog + SPEC
---------------------------------------*/
.accordionList{
  max-height:0;
  overflow:hidden;
  transition:.3s;
}

.accordionList.open{
  display:flex;
  flex-wrap:wrap;
  max-height:1000px;
}


/* SPEC
---------------------------------------*/
#spec .specH4{cursor: pointer;position: relative;	padding-right: 20px; width:100%;}

.spec_tbl{ width:100%; margin:1rem auto; padding:0;}
.spec_tbl .td{ padding:.8rem; line-height:1.6rem;}

#spec ul li{ list-style-type:none;}
#spec .spec_tbl th{	background-color:#21618C;color:#FFFFFF;letter-spacing:2px;border-left:1px solid #333333;}
#spec .spec_tbl td{border:1px solid #333333; padding:1%;letter-spacing: normal; vertical-align:middle;}
#spec .spec_tbl td.td_noB{ border-right:none;}
#spec .spec_tbl td.td_dotted{border-left:1px dotted #333333 !important;}
#spec .spec_tbl td:nth-of-type(1){ width:150px;}
#spec .spec_tbl td:nth-of-type(2){ width:50px; text-align: center;}
#spec .spec_tbl td:nth-of-type(3){ width:200px;}
#spec .spec_tbl td:nth-of-type(4){ width:160px;}
#spec .spec_tbl td:nth-of-type(5){ width:80px; text-align: center;}
#spec .spec_tbl td:nth-of-type(6){ width:50px; text-align: center;}
#spec .fl_boxul{ width:80%; min-width:600px;}
#spec .fl_box li{ margin:1%; padding:0; width:250px;}
#spec ul.series_feature li{list-style:square;}
#spec .new_item{color: #B90E11;}
#spec .spec_tbl tr:nth-child(odd) {background-color: #d9d9d9;}

.pdf_link i {
	color: #d32f2f;
	font-size: 1.2em;
	transition: 0.2s;
}

.pdf_link:hover i {
	color: #ff5252;
	transform: scale(1.2);
}
.spec_note,.datasheet_link{display: block!important; width: 100%;}

/* カメラモジュール
---------------------------------------*/
#CM .fl_box > div,#NC .fl_box > div{ width:100%; flex: 1;}
#CM .fl_box > div:first-child,#NC .fl_box > div:first-child {
    display: flex;
    justify-content: center;  /* 水平方向中央 */
    align-items: center;      /* 垂直方向中央 */
}
#CM .product_name,#NC .product_name{text-align: left;}
/* Page Navi
---------------------------------------*/

div.cp_navi *, div.cp_navi *:after, div.cp_navi *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
div.cp_navi a {
	text-decoration: none;
}
div.cp_navi {
	margin: 2em 0;
	text-align: center;
}
.cp_navi .cp_pagination {
	display: inline-block;
	margin-top: 2em;
	padding: 0 0.5em;
}
.cp_navi .cp_pagenum {
	font-size: 1em;
	line-height: 50px;
	display: block;
	float: left;
	transition: 400ms ease;
	letter-spacing: 0.1em;
	color: #37474F;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	margin: auto .5em;
}
.cp_navi .cp_pagenum:hover,
.cp_navi .cp_pagenum.current {
	font-weight: bold;
	color: #ffffff;
	background-color: #577287;
	border-radius: 50%;
}
.cp_navi .cp_pagenum.prev:hover,
.cp_navi .cp_pagenum.next:hover {
	color: #577287;
	background-color: transparent;
	border-radius: 50%;
}
@media only screen and (max-width: 960px) {
	.cp_navi .cp_pagination {
		margin-top: 50px;
		padding: 0 10px;
	}
	.cp_navi .cp_pagenum {
	font-size: 0.8em;
	line-height: 25px;
	width: 45px;
	height: 25px;
	margin: auto .1em;
	border-radius: 0.3em;
}
	.cp_navi .cp_pagenum.prev,
	.cp_navi .cp_pagenum.next {
		padding: 0 25px 0 0;
	}
	.cp_navi .cp_pagenum:hover,
	.cp_navi .cp_pagenum.current {
		border-radius: 0.3em;
	}
	.cp_navi .cp_pagenum.prev:hover,
	.cp_navi .cp_pagenum.next:hover {
		border-radius: 0.3em;
	}
}
@media only screen and (min-width: 120px) and (max-width: 767px) {
	.cp_navi .cp_pagenum {
	display: none;
	border-radius: 0.3em;
	}
	.cp_navi .cp_pagenum:nth-of-type(2) {
	position: relative;
	padding-right: 20px;
	}
	.cp_navi .cp_pagenum:nth-of-type(2)::after {
	font-size: 1.2em;
	position: absolute;
	top: 0;
	left: 25px;
	content: '...';
	}
	.cp_navi .cp_pagenum:nth-child(-n+3),
	.cp_navi .cp_pagenum:nth-last-child(-n+3) {
		display: block;
	}
	.cp_navi .cp_pagenum:nth-last-child(-n+4) {
		padding: 0 5px;
	}
	.cp_navi .cp_pagenum:nth-last-child(-n+4)::after {
		content: none;
	}
	.cp_navi .cp_pagenum:hover,
	.cp_navi .cp_pagenum.current {
		border-radius: 0.3em;
	}
	.cp_navi .cp_pagenum.prev:hover,
	.cp_navi .cp_pagenum.next:hover {
		border-radius: 0.3em;
	}
}