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

/*================================================
 *  キャッチ
 ================================================*/
.detailCahtch,.detailCahtch2 ,.detailCahtch3{
	margin: 20px auto;
	width: 100%;
	height: 62px;
	display: flex;
	align-items: center;
}
.detailCahtch {
	background: url("../img/catchback.png") no-repeat left center;
	background-size: cover;
}
.detailCahtch2 {
	background: url("../img/catchback_ccb.png") no-repeat left center;
	background-size: cover;
}

.detailCahtch3 {
	background-color: rgb(235, 237, 243);
	background-size: cover;
}

.detailCahtch3 h2 {
	width: 125px;
	text-align: center;
	font-size: 1.8em;
	font-weight: 700;
	color: #0F325B;
}

.detailCahtch h2,.detailCahtch2 h2 {
	width: 350px;
	text-align: center;
	font-size: 2.4em;
	font-weight: 700;
	color: #0F325B;
}

.detailCahtch p,.detailCahtch2 p {
	width: 820px;
	text-align: center;
	font-size: 1.6em;
	color: #fff;
}

@media screen and (max-width: 640px) {
	.detailCahtch,.detailCahtch2 ,.detailCahtch3 {
		margin: 5vw auto;
		width: 90vw;
		height: 14vw;
	}

	.detailCahtch h2,.detailCahtch2 h2 ,.detailCahtch3 h2{ margin-left: 1.5vw; width: 25vw; font-size: 3.5vw; }

	.detailCahtch p,.detailCahtch2 p { padding: 0 2vw 0 3vw;
		width: 65vw;
		text-align: left;
		font-size: 3.2vw;
		line-height: 1.3;
	}
}

/*================================================
 *  シリーズ名
 ================================================*/
.seriesName {
	width: 100%;
	font-size: 1.8em;
	font-weight: 700;
}

@media screen and (max-width: 640px) {
	.seriesName {
		margin: 0 auto;
		width: 90vw;
		font-size: 3.5vw;
	}
}

/*================================================
 *  シリーズ概要
 ================================================*/
.seriesBox {
	position: relative;
	margin: 5px auto 20px;
	padding: 15px 25px;
	height: 100%;
	height: auto;
	background: #ebeef4;
	display: flex;
	align-items: center;
}

.seriesBox input,
.seriesBox label {
	display: none;
}

.seriesL {
	width: 185px;
	height: 100%;
	padding-right: 20px;
	font-size: 1.8em;
	font-weight: 700;
	color: black;
}

.seriesR {
	padding: 0 35px;
	width: 955px;
	font-size: 1.2em;
	line-height: 1.75;
	border-left: 1px solid #000;
	color: black;
}

.seriesBox p {
	font-size: 1.8em;
	font-weight: 700;
}

@media screen and (max-width: 640px) {
	.seriesBox p { font-size: 4.6vw;}
	.seriesBox {
		margin: 2vw auto 3vw;
		padding: 2vw;
		width: 90vw;
		flex-direction: column;
	}

	.seriesL {
		width: 90vw;
		padding: 0 5vw;
		align-items: center;
		font-size: 4.25vw;
	}

	.seriesR {
		margin: 0 2.5vw;
		padding: 0;
		width: 100%;
		height: 0;
		overflow: hidden;
		font-size: 3.2vw;
		border: none;
	}


	.seriesBox label {
		position: absolute;
		top: 0;
		left: 0;
		width: 90vw;
		height: 10.5vw;
		z-index: 1;
		display: flex;
	}

	.seriesBox label:after {
		content: '▼';
		z-index: 2;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 2vw 3.5vw 0 auto;
		padding-top: 1px;
		width: 6vw;
		height: 6vw;
		font-size: 3vw;
		line-height: 6vw;
		color: #fff;
		border-radius: 50%;
		background: #6C7585;
		transition: 0.2s;
	}

	.seriesBox input:checked+label:after {
		transform: rotate(180deg);
		transition: 0.2s;
	}

	.seriesBox input {
		display: none;
	}

	.seriesBox input:checked~.seriesR {
		padding: 3vw;
		height: auto;
	}

	.seriesBox input:checked~.seriesBox label {
		display: none;
	}
}

/*================================================
 *  製品名
 ================================================*/
.detailNameBox { width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; }
.detailNameR{ display: flex; align-items: center; margin-bottom: 16px; height: 26px;}
.detailName,.detailName2,.detailName3{ font-size: 3.8em; font-weight: 700; color: #0f325b; background-color: #FFF; display: flex; align-items: baseline;}
.detailName,.detailName3{ margin: 20px 0 0;}
.detailName2{ margin: 0;}
.ttlPcBorderBox{
	border: 1px solid #000000;
    padding: 0.3em 1em;
    vertical-align: middle;
	font-size: 37%;
	color: #000000;
	display: table-cell;
	line-height: 1em;
}

.nameSub { margin: 0 20px 0px 20px ; padding: 0px 20px; font-size: 1.5em; height: 100%;  font-weight: 700; color: #fff; background: #0F325B; display: flex; align-items: center;}

@media screen and (max-width: 640px) {
	.detailNameBox { margin: 0 auto; width: 90vw; flex-direction: column; align-items: flex-start; }
	.detailNameR{ margin-top: 1vw; margin-bottom: 2vw;}
	.detailName,.detailName2,.detailName3 { font-size: 6.4vw; line-height: 1.3; }
	.detailName { margin: 3vw 0 0; }
	.detailName2,.detailName3 { margin: 0.5vw 0 0; }
	.nameSub { margin-left: 0; padding: 1vw 3vw; font-size: 3.2vw;}
}

/*================================================
 *  ロゴ
 ================================================*/
.detailLogo {
	margin: 26px auto 22px; width: 100%; height: 42px;
	display: flex; justify-content: flex-start;
}

.detailLogo div + div{
	margin-left: 22px;
}
#tmpl_main .detailLogo img{
	object-fit: contain;
	max-height: 100%;
	max-width: 100%;
}
@media screen and (min-width: 641px) {
	/* 余白調整 */
	.logoExmorR {
		padding: 6px;
	}
	.logo4K {
		padding: 6px;
	}

	.logoSTARVIS2 {
		padding: 6px;
	}
}
@media screen and (max-width: 640px) {
	.detailLogo { margin: 2vw 5vw 4vw 5vw; width: 90vw; height: 5vw; }
	.detailLogo div + div{ margin-left: 2.5vw; }
	.logoPregius{width: 13vw;}
	.logoExmor{width: 16.35vw}
	
	/* 余白調整 */
	.logoExmorR { padding: 0.75vw; padding-left: 0; width: 23.485vw;}
	.logo4K { padding: 0.75vw; width: 12.176vw; }
	.logoSTARVIS2 { }
}

/*================================================
 *  カテゴリータグ
 ================================================*/
.detailTag { margin: 10px auto 0 0; width: 80%; display: flex; flex-wrap: wrap; justify-content: flex-start; }

.tag { margin: 0 5px 5px 0; padding: 5px 10px 3px; font-size: 1.2em; color: #fff; background: #000; border-bottom: 2px solid #808080; }
.tagNote{ width: 100%; font-size: 1.4em;}
.tagNote .red{background-color: #FFF;}


@media screen and (max-width: 640px) {
	.detailTag {
		margin: 0 auto;
		width: 90vw;
		flex-wrap: wrap;
	}

	.tag {
		margin: 0 1vw 1vw 0;
		padding: 1vw 3vw;
		font-size: 2.5vw;
		border-bottom: 1px solid #808080;
	}
}

/*================================================
 *  概要
 ================================================*/
.detailOverview { margin: 40px auto; width: 100%; display: flex; align-items: flex-start; }

.detailOverviewL { width: 480px; }
.detailOverviewR { position: relative; width: 710px; height: auto; min-height: 322px; padding: 0 60px 140px 30px; }


.detailOverviewR p { font-size: 1.4em; line-height: 1.85; }
.detailOverviewR p.pickup { font-size: 1.5em; font-weight: 700; }
.detailOverviewR p.pickup:before{ content: "■"; color: #0F328B; margin-right: 5px;}

.maru:before{  content: "●";}

/*----- バナー -----*/
.detailBnr { position: absolute; bottom: 0; width: 620px; display: flex; justify-content: space-between; }
.detailBnr a { width: 300px; }

/*----- 製品画像 スライド-----*/
/*----- 枠 -----*/
.swipeBox {
	width: 480px;
	height: 320px;
	border: 1px solid #4d4d4d;
	box-sizing: content-box;
}

.fit-cover{
	object-fit: cover !important;
}

/*----- 本体 -----*/
.swiper-container {
	position: relative;
	width: 100%;
	height: 320px;
}

.slider .swiper-wrapper {
	overflow: visible !important;
	width: 100%;
	height: auto;
}

.slider .swiper-slide img {
	width: 480px !important;
	height: 320px !important;
	object-fit: contain;
}

/*----- サムネ -----*/
.slider-thumbnail {
	margin-top: 24px;
	width: 500px;
	height: auto;
}

.slider-thumbnail .swiper-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.slider-thumbnail .swiper-slide {
	cursor: pointer;
	width: 105px !important;
	height: 70px;
	margin: 0 18px 10px 0;
	border: 1px solid #4d4d4d;
	display: flex;
	box-sizing: content-box;
}

.slider-thumbnail .swiper-slide img {
	width: 105px !important;
	height: 70px !important;
	object-fit: contain;
}

@media screen and (max-width: 640px) {
	.detailOverview {
		margin: 4vw auto;
		width: 90vw;
		flex-direction: column;
	}

	.detailOverviewL {
		width: 90vw;
	}

	.detailOverviewR { margin-top: 5vw; width: 90vw; min-height: auto; height: auto; padding: 0; }

	.detailOverviewR p {
		font-size: 3.75vw;
	}

	.detailOverviewR p.pickup {
		font-size: 3.5vw;
	}

	.detailBnr {
		position: static;
		margin-top: 5vw;
		width: 90vw;
		flex-direction: column;
	}

	.detailBnr a {
		width: 100%;
		margin-bottom: 2vw;
	}

	.swipeBox {
		margin: 0 auto;
		width: 60vw;
		height: 40vw;
	}

	.swiper-container {
		height: 40vw;
	}

	.slider-thumbnail {
		margin-top: 3vw;
		width: 95vw;
		height: auto;
	}

	.slider-thumbnail .swiper-wrapper {
		justify-content: center;
	}

	.slider-thumbnail .swiper-slide {
		width: 21vw !important;
		height: 14vw;
		margin: 0 2.5vw 1.5vw 0;
	}

	/* z */
	.slider-thumbnail .swiper-slide img {
		max-width: 100%;
		max-height: 14vw;
		object-fit: contain;
	}

	.slider .swiper-slide img {
		max-width: 100% !important;
		max-height: 40vw !important;
		object-fit: contain;
	}

	/* z */
}

/*================================================
 *  アンカーリンク
 ================================================*/
/*
.anchor {
	margin: 10px auto;
	width: 100%;
	height: 40px;
	display: flex;
	border-left: 2px solid #989898;
}

.anchor a {
	padding-top: 5px;
	width: 100%;
	text-align: center;
	font-size: 1.2em;
	font-weight: 700;
	border-right: 2px solid #989898;
	background: url("../../../img/arrowDG.svg") no-repeat center bottom;
	background-size: 12px 9px;
}

@media screen and (max-width: 640px) {
	.anchor {
		margin: 3vw auto;
		width: 90vw;
		height: auto;
		flex-wrap: wrap;
		border: none;
	}

	.anchor a {
		margin-bottom: 3vw;
		padding-top: 0;
		width: 45vw;
		height: 12vw;
		font-size: 3.5vw;
		line-height: 1.3;
		border-right: 1px solid #989898;
		background-size: 2.25vw 1.68vw;
	}

	.anchor a.w90vw {
		width: 90vw;
	}

	.anchor a:nth-child(2n+1) {
		border-left: 1px solid #989898;
	}
}

.anchor a:hover {
	background-color: #f3f3f3;
}
*/
/*================================================
 *  詳細
 ================================================*/
/*----- 枠 -----*/
.detailBox {
	margin: 20px auto 0 auto;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.detailBox2 {
	margin: 20px auto 0 auto;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
}

.detailBox3{
	margin: 20px auto -49px auto;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.pointCloud {
	display: flex;
	border-bottom: 1px solid #000;
	line-height: 1.2;
	text-align: left;
	width: 100%;
}

@media screen and ( min-width: 640px ){
	.pointCloud {
		align-items: baseline;
	}
}

@media screen and ( max-width: 640px ){
	.pointCloud {
		flex-direction: column;
	}
}

.detail {
	margin-bottom: 30px;
	width: 580px;
	display: flex;
	flex-direction: column;
}

.detail2 {
	margin-bottom: 30px;
	width: 710px;
}

.detail2 {
	display: flex;
	flex-direction: column;
}

.detail2 p {
	font-size: 1.4em;
	line-height: 1.85;
}

.detail2 img {
	margin: 10px auto;
	padding: 20px;
	border: 1px solid #4d4d4d;
	object-fit: contain;
}

.detail3 { margin-bottom: 30px; width: 450px; }

.detail4 {
	width: 360px;
}

.detail h3,
.detail2 h3,
.detail3 h3 {
	margin-bottom: 10px;
	padding-left: 10px;
	font-size: 1.8em;
	font-weight: 700;
	border-left: 5px solid #6c7585;
}

.detail:nth-child(2n+1),
.detail2:nth-child(2n+1),
.detail3:nth-child(2n+1) {
	margin-right: 30px;
}

.detail p,
.detail2 p,
.detail3 p {
	font-size: 1.4em;
	line-height: 1.85;
}

.detail p.sub,
.detail2 p.sub,
.detail3 p.sub {
	font-size: 1.6em;
	font-weight: 700;
}

.detail img,
.detail2 img,
.detail3 img {
	margin: 10px auto;
	padding: 20px;
	border: 1px solid #4d4d4d;
	object-fit: contain;
}

.detail img.nobdr,
.detail2 img.nobdr,
.detail3 img.nobdr {
	margin: 0;
	padding: 0;
	border: none;
	object-fit: contain;
}

.detail4 {
    display: flex;
    flex-direction: column;
}

.detail5 {
    width: 580px;
    display: flex;
    flex-direction: column;
}

.detail5 img{
	margin-top: 10px !important;
}

.font-blue{
	color: blue;
	line-height:1
}

.center{
	display: flex;
	justify-content: center;
}

.img_text2{
	display: flex;
	flex-direction: row;
	align-items: baseline;
	justify-content: space-around;
	width: 50%;
}

.img_text2 p:nth-child(1){
	color: rgb(0,0,255);
}

.img_text2 p:nth-child(9){
	color: rgb(236, 0, 0);
}

.img_text2 div{
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 100%;
	margin: 5px; /* 丸の間にスペースを入れたい場合 */
}

.flex-end img{
	padding-bottom: 0px !important;
}
.img_caption{
	font-size: 1.5em;
}

.resizeImg {

}

.resizeImg img{
	width: 350px;
}
  
  .circle-red { background: rgb(253, 0, 0); }
  .circle-blue { background: rgb(0,0,255); }
  .circle-lightblue { background: rgb(0, 131, 255); }
  .circle-lightgreen { background: rgb(0, 205, 206); }
  .circle-green { background: rgb(0, 255, 0); }
  .circle-yellow { background: rgb(255, 255, 0); }
  .circle-orange { background: rgb(250, 108, 0); }
  

@media screen and (min-width: 640px){
	.img_text2 p{
		font-size: 1.5em !important;
	}
	.img_text{
		display: flex;
		flex-direction: row;
	}

	.font-blue{
		font-size: 2.4em !important;
		color: blue;
		width: 145px;
	}
	.detail5:nth-child(2n+1) {
		margin-right: 30px;
	}	
	.detail-left{
		margin-left: 250px !important;
	}

	.detail-right{
		margin-right: 175px !important;
	}
	.img-unit{
		margin-left: 420px;
	}
}

@media screen and (max-width: 640px) {
	.img-unit{
		margin-left: 64vw;
	}
	.img_text2{
		margin-top: -10px;
	}
	.img_text2 p{
		font-size: 2.75vw !important;
	}

	.detail5 img{
		margin-top: -10px !important;
	}
	.img_text{
		padding: 0 10vw;
	}
	.font-blue{
		font-size: 1.4em !important;
	}
	.sub-text{
		font-size: 2.75vw !important;
	}

	.detailBox {
		margin: 0 auto 5vw;
		width: 90vw;
		flex-direction: column;
	}

	.detail,
	.detail2,
	.detail3 {
		margin-bottom: 1.5vw;
		width: 90vw;
	}

	.detail4 {
		width: 100%;
	}

	.detail4 img{
		padding: 3vw 10vw;
	}

	.detail5 {
		width: 100%;
	}

	.detail5 img{
		padding: 3vw 10vw;
	}

	.detail h3,
	.detail2 h3,
	.detail3 h3 {
		margin-bottom: 2vw;
		font-size: 4.5vw;
	}

	.detail:nth-child(2n+1),
	.detail2:nth-child(2n+1),
	.detail3:nth-child(2n+1) {
		margin-right: 0;
	}

	.detail p,
	.detail2 p,
	.detail3 p {
		font-size: 3.75vw;
	}

	.detail p.sub,
	.detail2 p.sub,
	.detail3 p.sub {
		font-size: 4vw;
	}

	.detail img,
	.detail2 img,
	.detail3 img {
		margin: 2vw auto;
		padding: 3vw;
	}

	.detail img.nobdr,
	.detail2 img.nobdr,
	.detail3 img.nobdr {
		margin: 2vw auto;
		padding: 3vw 10vw;
	}
}

/*----- 接続 画像-----*/
.detailconnect {
	width: 750px;
	display: flex;
	flex-direction: column;
}

.detailconnect img {
	margin: 10px auto;
	padding: 20px;
	border: 1px solid #4d4d4d;
	object-fit: contain;
}

@media screen and (max-width: 640px) {
	.detailconnect {
		width: 90vw !important;
		margin: 0 auto;
	}

	.detailconnect img {
		margin: 2vw auto;
		padding: 3vw;
	}
}

/*----- 動画 -----*/
.movie {
	position: relative;
	overflow: hidden;
	margin: 10px auto;
	padding-bottom: 56.25%;
	height: 0;
	width: 100%;
}

.movie video{
	width: 100%;
}

.movie iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.movie img {
    padding: 0;
    border: 0;
}

/*----- 表 -----*/
.tableTitle {
	margin: 0 auto 10px;
	width: 100%;
}

.tableTitle h3 {
	margin-bottom: 10px;
	padding-left: 10px;
	font-size: 1.8em;
	font-weight: 700;
	border-left: 5px solid #6c7585;
}

.tableBox2 {
	margin: 0 auto 20px;
	padding-bottom: 15px;
	width: 100%;
	height: auto;
	font-size: 1.6em;
}

.tableBox3 {
	margin: 0 auto 20px;
	width: 100%;
	height: auto;
}

@media screen and (max-width: 640px) {
	.tableTitle {
		margin: 0 auto 1vw;
		width: 90vw;
	}

	.tableTitle h3 {
		margin-bottom: 3vw;
		font-size: 4vw;
	}

	.tableBox {
		overflow-x: scroll;
		margin: 0 0 5vw auto;
		padding-bottom: 3vw;
		width: 95vw;
		height: auto;
		font-size: 3.5vw;
	}

	.tableBox2 {
		height: auto;
		font-size: 2.5vw;
	}
}

/*-----  -----*/
.sub {
	font-size: 65%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

.productTable1,.productTable2,.productTable3,.productTable4,.productTable5,.specTable,
.specTable2,.specTable3,.specTable4,.specTable5,.specTable6 {
	margin-top: 20px; width: 100%; font-size: 1.6em;
	border-spacing: 0; border-collapse: collapse; border: 2px solid #4d4d4d;
}
.specTable7 {
	margin-top: 5px; width: 100%; font-size: 1.4em;
	border-spacing: 0; border-collapse: collapse; border: 2px solid #4d4d4d;
}


.productTable1 th ,.productTable5 th { padding: 15px 0; width: calc(100%/6); background: #ebeef4; border: 1px solid #4d4d4d; }
.productTable1 td,.productTable5 td { padding: 15px 0; text-align: center; border: 1px solid #4d4d4d; }

.productTable5 th,.productTable5 td { width: calc(100% / 5)}

.productTable3 th {
	padding: 10px 5px;
	background: #ebeef4;
	border: 1px solid #4d4d4d;
}

.productTable3 td {
	padding: 10px 5px;
	width: 500px;
	text-align: center;
	border: 1px solid #4d4d4d;
	font-size: 1em;
}

.productTable2 {
	background: #ebeef4;
}

.productTable2 th {
	height: 68px;
	border: 1px solid #4d4d4d;
}

.productTable2 th:first-child {
	width: 20%;
}

.productTable2 td {
	width: calc(100%/8);
	text-align: center;
	vertical-align: middle;
	border: 1px solid #4d4d4d;
}

.productTable4 th {
	height: 44px;
	border: 1px solid #4d4d4d;
	background: #ebeef4;
}

.productTable4 td {
	padding: 10px 5px;
	text-align: center;
	vertical-align: middle;
	border: 1px solid #4d4d4d;
}

.productTableDetail {
	width: 100%;
}

.productTableDetail p {
	height: 68px;
	font-size: 1em;
	border-bottom: 1px solid #4d4d4d;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

.productTableDetail p.blank {
	background: none;
}

.productTableDetail p:last-child {
	border-bottom: none;
}

@media screen and (max-width: 640px) {

	.productTable1,
	.productTable2,
	.productTable3,
	.productTable4,
	.productTable5,
	.specTable,
	.specTable2,
	.specTable3,
	.specTable4,.specTable5,.specTable6,.specTable7{
		font-size: 3.7vw;
	}

	.productTable1,.productTable2,.productTable5,.productTable6{width: 220vw;}
	
	.productTable4{
		width: 150vw;
	}

	.productTable1 th,.productTable5 th {
		padding: 4vw 0;
	}

	.productTable1 td,.productTable5 td {
		padding: 4vw 0;
	}

	.productTable2 th {
		height: 15vw;
		width: 80%;
	}

	.productTable2 th:first-child {
		width: 20%;
	}

	.productTable2 th.productTh {
		padding-left: 3vw;
		height: 15vw;
		text-align: left;
	}

	.productTable2 td {
		width: calc(100%/8);
		text-align: center;
		vertical-align: middle;
		border: 1px solid #4d4d4d;
	}

	.productTableDetail p {
		height: 15vw;
	}
}

/*-----  -----*/
.specTable th {
	width: 400px;
	background: #ebeef4;
	border-right: 1px solid #4d4d4d;
}

.specTable p {
	width: 100%;
	height: 68px;
	font-size: 1em;
	border-bottom: 1px solid #4d4d4d;
	display: flex;
}

.specTable th p {
	justify-content: center;
	align-items: center;
}

.specTable td p {
	padding: 0 45px;
	justify-content: flex-start;
	align-items: center;
}

.specTable2 th,.specTable5 th,.specTable6 th,.specTable2 td,.specTable5 td,.specTable6 td,.specTable7 th,.specTable7 td { padding: 15px; border: 1px solid #4d4d4d; }
.specTable2 th,.specTable5 th,.specTable6 th,.specTable7 th { background: #ebeef4;}
.specTable2 td,.specTable5 td,.specTable7 td { text-align: center;}

.specTable4 th {
	padding: 15px 35px;
	background: #ebeef4;
	border: 1px solid #4d4d4d;
	width: 12%;
}

.specTable4 td {
	padding: 15px 35px;
	border: 1px solid #4d4d4d;
	width: 12%;
}
.boardHead .caution{ position: relative; float: right; font-size: 0.75em; z-index: 2;}
@media screen and (max-width: 640px) {
	.specTable {width: 90vw;}
	.specTable7 {width: 150vw;}
	.specTable2,.specTable4,.specTable6{width: 200vw;}
	.specTable5 { width: 300vw; }
	.specTable2 th,.specTable5 th,.specTable7 th { padding: 2vw; }
	.specTable p {
		width: 100%;
		height: 15vw;
	}

	.specTable p:nth-child(4) {
		height: 50vw;
	}

	.specTable td p {
		padding: 0 2vw 0 1.5vw;
		justify-content: flex-start;
		align-items: center;
	}
}

/*----- 機能紹介 -----*/
.functionBox {
	margin: 0 auto;
	width: 100%;
	border: 2px solid #4d4d4d;
	display: flex;
	align-items: stretch;
}

.functionBox+.functionBox {
	border-top: none;
}

/*.functionBox:nth-child(2){ border-top:none; }*/
.functionHead {
	width: 130px;
	background: #ebeef4;
	display: flex;
	justify-content: center;
	align-items: center;
}

.fHead {
	padding: 5px 15px;
	background: #1A3258;
	font-size: 0.9em
}

.fHead a { color: #fff; text-decoration: none;}

.fHead:hover {
	background: #000;
	box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.4);
}

.functionTable {
	width: 1060px;
	border-spacing: 0;
	border-collapse: collapse;
	font-size: 1.4em;
}

.functionTable th {
	width: 280px;
	color: #0f325b;
	border-left: 1px solid #4d4d4d;
}

.functionTable td {
	width: 780px;
	border-left: 1px solid #4d4d4d;
}

.functionSub {
	width: 100%;
}



.functionSub p,
.functionDetail p {
	padding-left: 35px;
	height: 35px;
	font-size: 1em;
	border-bottom: 1px solid #4d4d4d;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.functionSub p.h70,
.functionDetail p.h70 {
	height: 70px;
}

/* z */
.functionTableZ {
	min-width: 100%;
	border: 2px solid #4d4d4d;
	border-collapse: collapse;
	font-size: 1.6em;
}

.functionTableZ tr {
	border-bottom: 1px solid #4d4d4d;
}

.functionTableZ th {
	padding: 15px 35px;
	width: 270px;
	color: #0f325b;
	border-left: 1px solid #4d4d4d;
	text-align: left;
	vertical-align: middle;
}

.functionTableZ th.functionHeadZ {
	width: 130px;
	background: #ebeef4;
	text-align: center;
	vertical-align: middle;
	padding: 0;
}

.functionTableZ td {
	width: auto;
	border-left: 1px solid #4d4d4d;
	text-align: left;
	vertical-align: top;
	padding: 15px 35px;
}

/* z */
@media screen and (max-width: 640px) {
	.functionBox {
		width: 256vw;
	}

	.functionHead {
		width: 25vw;
	}

	.fHead {
		padding: 1vw 2vw;
		font-size: 3.5vw;
	}

	.functionTable {
		width: 230vw;
		font-size: 3.5vw;
	}

	.functionTable th {
		width: 50vw;
	}

	.functionTable td {
		width: 175vw;
	}

	.functionSub p,
	.functionDetail p {
		padding-left: 4vw;
		height: 8vw;
	}

	.functionSub p.h70,
	.functionDetail p.h70 {
		height: 18.5vw;
	}

	.functionTableZ {
		width: 300vw;
	}

	.functionTableZ th {
		padding: 4vw 2vw;
		width: 40vw;
		font-size: 3.5vw;
	}

	.functionTableZ th.functionHeadZ {
		width: 25vw;
	}

	.functionTableZ td {
		width: 160vw;
		font-size: 3.5vw;
	}

	.contentBox {
		margin: 0 5vw;
	}

	.page .tabs { margin: 20px auto; width: 90vw; }
	.comment{
		width: 90vw;
		margin: 0 5vw;
		font-size: 1em;
	}
}

.productTableDetail p:last-child,
.specTable p:last-child,
.functionSub p:last-child,
.functionDetail p:last-child {
	border-bottom: none;
}

/*----- 対応ボード詳細 -----*/
table.boardTable,table.boardTable2,table.boardTable3 {
	color: #000; margin: 0; width: 100%; border-spacing: 0; border-collapse: collapse; border: 2px solid #4d4d4d;
}
table.boardTable tr,table.boardTable2 tr,table.boardTable3 tr { height: 34px; font-size: 1.6em; font-weight: 700; }

table.boardTable tr.ft14 {
	font-size: 1.4em
}

table.boardTable td,table.boardTable2 td,table.boardTable3 td { text-align: center; vertical-align: middle; border: 1px solid #4d4d4d; font-size: 1em;}
table.boardTable td { width: 132px; }
table.boardTable tbody td,table.boardTable3 tbody td { background-color: #fff;}
table.boardTable2 td { width: 20%; }
table.boardTable3 td { width: 50%; font-size: 1em; }
table.boardTable td.boardSub1 { width: 265px; }

.boardHead {
	position: relative;
	padding-left: 20px;
	width: 100%;
	height: 34px;
	font-size: 1.6em;
	font-weight: 700;
	line-height: 34px;
	color: #fff;
	background: #6c7584;
	border-left: 2px solid #4d4d4d;
	border-right: 2px solid #4d4d4d;
}

.boardHead a {
	color: #fff;
}

.boardnote {
	position: absolute;
	top: 2px;
	right: 10px;
	font-size: 0.75em;
	font-weight: 500;
}

.boardCompatible {
	width: 100%;
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid #4d4d4d;
	border-left: 2px solid #4d4d4d;
	border-right: 1px solid #4d4d4d;
}

.boardDetail p {
	width: 132px;
	height: 34px;
	text-align: center;
	font-size: 1.6em;
	line-height: 34px;
	border-right: 1px solid #4d4d4d;
}

.boardDetail p.boardName {
	padding-left: 20px;
	width: 265px;
	text-align: left;
}

/* z */
table.boardTable thead,table.boardTable2 thead,table.boardTable3 thead { background: #ebeef4; }

table.boardTable tbody th,table.boardTable2 tbody th,table.boardTable3 tbody th {
	text-align: left;
	font-size: 1em;
	font-weight: 400;
	line-height: 34px;
	background:#fff;
}

table.boardTable tbody th.boardHead,table.boardTable2 tbody th.boardHead,table.boardTable3 tbody th.boardHead {
	padding-left: 20px;
	height: 34px;
	font-weight: 700;
	color: #fff;
	background: #6c7584;
}

table.boardTable tbody th.boardHead a,table.boardTable2 tbody th.boardHead a,table.boardTable3 tbody th.boardHead a {
	position: absolute; top:0; left:0; width: 100%; height: 100%; padding-left: 20px; color: #fff; display: flex; align-items: center; text-decoration: none;
}
table.boardTable tbody th.boardHead a:hover,table.boardTable2 tbody th.boardHead a:hover,table.boardTable3 tbody th.boardHead a:hover {
	background:#0F325B
}

table.boardTable tbody td,table.boardTable2 tbody td,table.boardTable3 tbody td {
	width: auto; text-align: center; vertical-align: middle; border: 1px solid #4d4d4d; font-weight: 500;
}

table.boardTable2 tbody td {
	width: 20%;
}

table.boardTable tbody th,table.boardTable2 tbody th,table.boardTable tbody th,table.boardTable3 tbody th {
	padding: 10px 20px; width: auto; vertical-align: middle; line-height: 1.6; border: 1px solid #4d4d4d; 
}
table.boardTable2 tbody th {
	width: 40%;
}

.tableBoxZ th {
	color: #000;
}

@media screen and (max-width: 640px) {
	.tableBoxZ {
		margin: 0 0 0 5vw;
		padding-bottom: 1.5vw;
		width: 95vw;
		overflow-x: scroll;
	}
	.tableBoxZ2 {
		margin: 0 0 0 auto;
		padding-bottom: 1.5vw;
		width: 95vw;
		overflow-x: scroll;
	}

	.page {
		max-width: 100vw;
	}

	.movielogo .movielogoText {
		margin: 10px 0px 0 10px;
		font-size: 1em;
	}
}

/* z */
@media screen and (max-width: 640px) {

	table.boardTable {
		margin: 0;
		width: 190vw;
	}
	table.boardTable3 { margin: 0 auto; width: 120vw; }

	table.boardTable tr,table.boardTable3 tr {
		height: 8vw;
		font-size: 3.5vw;
	}

	table.boardTable tr.ft14 {
		font-size: 3.2vw
	}

	table.boardTable td {
		width: 22vw;
	}

	table.boardTable td.boardSub1 {
		width: 50vw;
	}

	.boardHead {
		position: relative;
		padding-left: 5vw;
		width: 190vw;
		height: 8vw;
		font-size: 3.5vw;
		line-height: 8vw;
	}

	.boardnote {
		position: absolute;
		top: 0;
		right: 37vw;
		font-size: 0.75em;
		font-weight: 500;
	}

	.boardCompatible {
		width: 190vw;
		border-left: 2px solid #4d4d4d;
		border-right: 1px solid #4d4d4d;
	}

	.boardDetail p {
		width: 23vw;
		height: 8vw;
		font-size: 3.5vw;
		line-height: 8vw;
	}

	.boardDetail p.boardName {
		padding-left: 4vw;
		width: 52vw;
	}
}

/*-----  -----*/
.annotation {
	margin-top: 10px;
	width: 100%;
	font-size: 0.9em;
	line-height: 1.3;
}

@media screen and (max-width: 640px) {
	.annotation {
		margin: 0 auto 5vw;
		width: 90vw;
		font-size: 3.2vw;
	}

}

/*================================================
 *  カテゴリータブ
 ================================================*/
/*
.tabs {
	position: relative;
	margin: 30px auto 60px;
	width: 100%;
}

.tab-buttons {
	width: 100%;
	height: 36px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.tab-buttons span {
	width: 49%;
	height: 100%;
	text-align: center;
	font-size: 1.6em;
	font-weight: 700;
	line-height: 36px;
	color: #6c6c6c;
	border-bottom: 2px solid #b2b2b2;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.tab-buttons span:hover {
	color: #000;
}

.tab-buttons span.active {
	color: #000;
	border-bottom: 2px solid #0F325B;
}

.tab-content {
	margin-top: 20px;
	padding: 0;
	width: 1190px;
	display: inline-block;
}
*/

.tab-content p {
	width: 132px;
	height: 34px;
	text-align: center;
	font-size: 1.6em;
	line-height: 34px;
	border-right: 1px solid #4d4d4d;
}

.tab-content p.boardName {
	padding-left: 20px;
	width: 265px;
	text-align: left;
}

/*
.tab-content table {
	border: 2px solid #4d4d4d;
}

#lamp {
	width: 49%;
	height: 2px;
	background: #0F325B;
	display: block;
	position: absolute;
	top: 34px;
	transition: all .3s ease-in;
}

#lamp.content2 {
	left: 51%;
	transition: all .3s ease-in;
}

#lamp.content1 {
	left: 0;
	transition: all .3s ease-in;
}
*/

.movielogoImg { margin: 0 22px 0 0; width:110px; height: 42px; }
.movielogoImg img{ width: auto; height: 100%; padding: 0; border:none; }


@media screen and (max-width: 640px) {
	.cameraCategoryBox {
		margin: 4.8vw 5vw 4vw;
		width: 90vw;
		height: 13.5vw;
	}

	.cameraCategory {
		font-size: 3.7vw;
		line-height: 1.3;
	}

	.cameraCategoryBox .current {
		color: #000;
		border-color: #0F325B;
		background: #EBEEF4;
	}
	.movielogoImg { margin: 0 3vw 0 0; width: 13.1vw; height: auto; }
.movielogoImg img{ width: 100%; height: auto; padding: 0; border:none; }
}

.Cautionary,.Cautionary2 { margin: 5px 0px; font-size: 1.4em; }

.movielogo { margin: 12px 0; width: 100%; display: flex; align-items: flex-end; }

.movielogoText { font-size: 1.3em;}


@media screen and (max-width: 640px) {
	.tab-buttons {
		width: 90vw;
		height: 8vw;
	}

	.tab-buttons span {
		width: 48%;
		height: 100%;
		font-size: 3.7vw;
	}

	.tab-content {
		/*overflow-x: scroll;*/
		margin: 5vw auto;
		padding: 0;
		width: 90vw;
		display: inline-block;
		border: none;
	}

	.tab-content p {
		width: 20vw;
		height: 34px;
		text-align: center;
		font-size: 3.5vw;
		line-height: 34px;
		border-right: 1px solid #4d4d4d;
	}

	.tab-content p.boardName {
		padding-left: 5vw;
		width: 50vw;
		text-align: left;
	}
	
	/*
	.tab-content table {
		width: 190vw;
	}
	
	#lamp {
		width: 48%;
		height: 2px;
		top: 7.5vw;
	}

	#lamp.content2 {
		left: 52%;
	}
*/
	.cameraCategoryBox {
		margin: 4.8vw 5vw 4vw;
		width: 90vw;
		height: 13.5vw;
	}

	.cameraCategory {
		font-size: 3.7vw;
		line-height: 1.3;
	}

	.cameraCategoryBox .current {
		color: #000;
		border-color: #0F325B;
		background: #EBEEF4;
	}

	.Cautionary { margin: 1vw 0 0; font-size: 3.5vw; }
	.Cautionary2 { margin: 1vw auto 0; min-width: 90vw; font-size: 3.5vw; }
}

/** Z **/
.borderBox {
	border: 1px solid #000000;
	padding: 0.5em 1em;
	vertical-align: middle;
}

.text-center {
	text-align: center;
}

.notice {
	font-weight: normal;
	font-size: 1.4em;
	text-align: right;
}

.setImage {
	padding: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: #000 solid 1px;
}

#tmpl_main .setImage img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border: none;
	margin: 0;
}

.setImage figure {
	padding: 0;
	margin: 0;
}

.detailOverviewR_height {
	position: relative;
	width: 710px;
	height: auto;
	padding: 0 60px 0 30px;
}

.td_Blank {
	background: #ebeef4;
}

.tableBox2 {
	width: 100%;
	height: auto;
	font-size: 1.6em;
}

.visual__summary__price a{
	color: darkblue;
}

@media screen and (max-width: 640px) {
	.setImage {
		flex-direction: column;
		width: 90vw;
		margin: 0 auto;
	}

	.detailOverviewR_height {
		margin-top: 5vw;
		width: 90vw;
		height: auto;
		padding: 0;
	}
}

@media screen and (min-width: 641px) {
	.setImage {
		flex-direction: row;
	}
	.detailOverviewR_height .productTable3{
		font-size: 1em;
	}

}

.specTable3 {
	margin-bottom: 20px;
	width: auto;
	border-spacing: 0;
	border-collapse: collapse;
	border: 2px solid #4d4d4d;
}

.specTable3 th {
	padding: 15px;
	background: #ebeef4;
	border: 1px solid #4d4d4d;
	width: auto;
}

.specTable3 td {
	padding: 15px;
	text-align: center;
	border: 1px solid #4d4d4d;
	width: auto;
}

.contentBox a{
	color: darkblue;
}

.setImage2 {
	display: flex;
	justify-content: center;
	align-items: center;
}

@media screen and (max-width: 640px) {
	.detail2 {
		width: 90vw;
	}

	.detail2 h3 {
		margin-bottom: 2vw;
		font-size: 4.5vw;
	}

	.detail2:nth-child(2n+1) {
		margin-right: 0;
	}

	.detail2 p {
		font-size: 3.75vw;
	}

	.detail2 img {
		margin: 2vw auto;
		padding: 3vw;
	}
	.setImage2 {
		flex-direction: column;
	}

}

#tmpl_main .detailconnect { margin-top: 20px; width: auto;}

#tmpl_main .detailconnect img {
	width: auto;
	max-width: 100%;
}

/** Z **/

.pop_table_box{
  max-width: 1050px;
    height: 100%;
    overflow-x: auto;
    overflow-y: auto;
  -webkit-overflow-scrolling: touch;
    position: relative;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
}

.pop_table_box table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-weight: bold;
  
}
.pop_table_box th, .pop_table_box td {
  vertical-align: middle;
  padding: 10px;
  border-left: 1px solid #000;
    border-bottom: 1px solid #000;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}
.pop_table_box td{
    white-space: pre-wrap;
}
.pop_table_box tr:last-child th, .pop_table_box tr:last-child td{
    border-bottom: none;
}
.pop_table_box th {
  background: #ccc;
}
.pop_table_box td {
  background: #fff;
}
.sticky_row {
  position: sticky;
 
  left: 0;
  background: none;
  border-left: none;
  border-right: none;
        z-index: 2;
}
.sticky_row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 
  border-right: 1px solid #000;
  background: #fff;
  z-index: -1;
    
}
.sticky_col {
  position: sticky;
  top: 0;
 
  background: none;
  border-top: none;
  border-bottom: none;
  line-height: 20px;
        z-index: 2;
}
.sticky_col::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  background: #EDEDED;
  z-index: -1;
}
.ccb .sticky_col::before{
    background: #ebeef4;
}
.sticky_col2 {
  position: sticky;
  top: 40px;
 
  background: none;
  border-top: none;
  border-bottom: none;
  line-height: 20px;
        z-index: 2;
}
.sticky_col2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  background: #EDEDED;
  z-index: -1;
}

.sticky_col.active::before,.sticky_col2.active::before{
    background:#ebeef4
}
.sticky_col.ttl::before,.sticky_row.ttl::before{
    background:#ebeef4
}
.sticky_col a,.sticky_col2 a{
    opacity: .4;
}

.sticky_col.active a,.sticky_col2.active a{
    opacity: 1;
}
.sticky_cross {
  position: sticky;
  top: 0;
  left: 0;
  background: none;
  border-top: none;
  border-bottom: none;
  border-left: none;
  border-right: none;
  z-index: 3;
}
.sticky_cross::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
 
  border-right: 1px solid #000;
  background: #ebeef4;
  z-index: -1;
}
.triangle {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid black;
    margin: 0 auto;
}
.pop_riyou {
    margin-top: 180px;
}
.pop_table_box .pop_spec a {
    width: 80px;
    color: #fff!important;
    background-color: #0f325b;
    padding: 4px;
	text-decoration: none;
}
.pop_table_box .pop_spec a:hover {
    background-color: #000;
    box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.4);
}
.pop_table_box a {
    color: #0f328c; text-decoration: underline; text-underline-offset:0.2em;
}
.pop_table_box td{
    opacity: .4;
}
.pop_table_box th.active,.pop_table_box td.active{
    opacity: 1;
   
}

.pop_table_box .ttl,.pop_table_box .sticky_row{
    opacity: 1;
}

.box_gigeusb .sticky_col a,.box_gigeusb .pop_table_box td{
    opacity: 1;
}

.pop_table_box{
    border-bottom: none;
    border-right: none;
}
.pop_table_box table{
    border-bottom: 1px solid #000000;
    border-right: 1px solid #000000;
}
.pop_table_box p.anno{
    border-bottom: none;
    border-right: none;
    font-size: 1.3em;
    padding: 10px;
    white-space: nowrap
}

.box_gigeusb .sticky_col::before{
    background: #ebeef4;
}
.ccb .ttl{
    white-space: nowrap;
}
/*ポップアップ*/
.popup-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.4);
    z-index: 9999999;
    display: none;
}
.popup-window{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    padding: 20px;
  border-radius: 6px;
    max-width: 1050px;
    width: 95%;
    height: 80%;
    max-height: 640px;
}
.popup-close {
  cursor: pointer;
  position: absolute;
  top: -26px;
  right: 0;
}
/*ポップアップ*/
/*
.detailLogo {
  display: flex;
  justify-content: flex-start;
  margin: 10px 0 20px;
}

#tmpl_main .detailLogo img {
  margin: inherit;
  margin-right: 10px;
}
#tmpl_main .detailLogo img:last-child {
  margin-right: 0;
}
*/