@charset "UTF-8";

#Contents .GridSet {
	width: auto;
}

/* コンテナ */
.Container1275{
	max-width: 1275px;
	margin: 0 auto;
}
.Container965{
	max-width: 965px;
	margin: 0 auto;
}

/* レイアウト1（PC:2カラム SP:1カラム）  */
.Layout1 {
	display: flex;
	justify-content: space-between;
}
.Layout1Item {
	flex:0 0 48%;
}

/* ボックス（グレー） */
.BoxGray {
	margin: 1.5em 0 1.5em 0;
	background-color: #F2F2F2;
}
#Contents h3.BoxGrayTtl,
.BoxGrayTtl {
	color: #000;
	margin: 0 0 0 1.0em;
	padding: 0.5em 0 0.5em 0.5em;
	font-weight: bold;
}
.BoxGrayBody {
	padding: 1em 2.5em 3em 2.5em;
	font-size: 14px;
}

/* ボックス（枠線付き） */
.BoxBorderGray {
	border: 1px solid #999;
	margin:30px 0;
	padding: 2.5em 4em;
}

/* QA */
.QaBox {
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
}
.QaBoxImg {
	box-sizing: border-box;
	flex: 0 0 37%;
}
.QaBoxTxt {
	box-sizing: border-box;
	flex: 0 0 60%;
	padding-left: 30px;
}
.QaBoxQ,
.QaBoxA {
	display: flex;
	justify-content: flex-start;
	margin-bottom: 1.5em;
}
.QaBoxQ::before,
.QaBoxA::before {
	display: block;
	flex: 0 0 auto;
	letter-spacing: 0.5em;
	text-align: justify;
	text-align-last: justify;
}
.QaBoxQ::before {
	content:'Q:';
}
.QaBoxA::before {
	content:'A:';
	color: #ff0000;
}
.QaBoxQ:last-child,
.QaBoxA:last-child {
	margin-bottom: 0;
}

/* 背景 */
.Bgi01{
	background: url(/image/hsl/products/inspection/hdd/bgi_01_pc.png) no-repeat center top;
	background-size: cover;
	padding: 80px 0;
	box-sizing: border-box;
}
.Bgi02{
	padding: 0 0;
	box-sizing: border-box;
}

/* 見出し1 */
h2.Ttl1,
.Ttl1{
	border-bottom: 1px solid #CCC;
	background-image: none;
	padding-bottom: 0;
	margin: 0 0 1.0em 0;
}
.Ttl1Line{
	position: relative;
	top: 1px;
	display: inline-block;
	padding: 0 0 0.5em 0;
	color: #000;
	border-bottom: 4px solid #ff0000;
	background-color: transparent;
	font-size: 18px;
}

/* 見出し2 */
.JS .Ttl2{
	position: relative;
	margin: 0 0 1.5em 0;
	padding: 0 0 10px 0;
	text-align: center;
	line-height: 1.4;
	font-weight: bold;
	font-size: 22px;
	background-image: none;
}
.Ttl2::after{
	position: absolute;
	left: calc(50% - 35px);
	bottom: 0;
	content:'';
	width: 70px;
	border-bottom: 2px solid #ff0000;
}

/* 見出し3 */
#Contents h3.Ttl3,
.Ttl3{
	margin: 0 0 2em 0;
	padding: 0 0 0 26px;
	border-left: 4px solid #ff0000;
	font-size: 16px;
	line-height: 1.6;
	color: #000;
}

/* アイコン付き見出し */
.TtlIcoImg{
	position: relative;
	width: 10%;
	max-width: 150px !important;
	left: -15px;
}
.JS .TtlIcoTxt{
	position: relative;
	top: -50px;
	margin-bottom: -50px;
}

/* リスト（●） */
.ListCircle{
}
.ListCircle > li{
	position: relative;
	padding-left: 1.1em;
}
.ListCircle > li:before{
	position: absolute;
	left:0;
	top:0;
	content:'●';
	display: block;
	width: 1em;
	text-align: center;
}

/* リスト（・） */
.ListDotRed{
}
.ListDotRed > li{
	position: relative;
	padding-left: 1.1em;
}
.ListDotRed > li:before{
	position: absolute;
	left:0;
	top:0;
	content:'・';
	display: block;
	width: 1em;
	text-align: center;
	color: #ff0000;
}

/* マージン */
.MarginB1{
	margin-bottom: 40px;
}
.MarginB2{
	margin-bottom: 30px;
}
.MarginB3{
	margin-bottom: 20px;
}
.MarginB4{
	margin-bottom: 50px;
}

/* 幅 */
.Width100P{
	width: 100%;
}

/* ボタン */
.BtnArray *{
	box-sizing: border-box;
	width: auto !important;
}
.BtnArray{
	display: flex;
	justify-content: center;
	margin-bottom: 30px;
	box-sizing: border-box;
}
.BtnArrayItem{
	display: block;
	flex:0 0 49%;
	max-width: 49% !important;
	width: auto !important;
}
.BtnArrayItem:first-child{
	margin-right: 10px;
}
.BtnArrayItem:last-child{
	margin-left: 10px;
}
.BtnArrayItem img{
	max-width: 100% !important;
	width: auto !important;
}

.ButtonStyleNoArrow a{
	padding: 15px 30px !important;
	border-right: none !important;
	background-image: none;
	font-weight: bold;
	font-size: 15px;
	letter-spacing: 0.05em;
}

/* ラボソリューション メインビジュアル */
.LabSolMainVisualWrap{
	position: relative;
	height: 502px;
	margin-bottom: 20px;
}
.LabSolMainVisual{
	width: calc(100vw - 10px);
	overflow: hidden;
	position: absolute;
	left: -25px;
	top: 0;
	height: 502px;
}
.LabSolMainVisualImg{
	width:2000px;
	max-width: none !important;
	position: relative;
	left: 50%;
	top: 0;
	margin-left: -1000px;
}

/* ラボソリューション 私たちが提供するソリューションとは */
.LabSolAbout {
	position: relative;
}
.LabSolAboutKeyVisual {
	position: absolute;
	left: 20%;
	top: 18%;
	width: 60%;
	z-index: 1;
}
.LabSolAboutItems {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.LabSolAboutItem {
	flex-grow: 0;
	flex-shrink: 0;
}
.LabSolAboutItem1 {
	flex-basis: 100%;
	margin-bottom: 14%;
}
.LabSolAboutItem2 {
	flex-basis: 50%;
	order:3;
}
.LabSolAboutItem3 {
	flex-basis: 50%;
	order:2;
}
.LabSolAboutItemIn {
}
.LabSolAboutItem1 .LabSolAboutItemIn {
	width: 60%;
	margin:0 auto;
}
.LabSolAboutItem2 .LabSolAboutItemIn {
	width: 92%;
	margin:0 0 0 auto;
}
.LabSolAboutItem3 .LabSolAboutItemIn {
	width: 92%;
	margin:0 auto 0 0;
}
.LabSolAboutItemImg {
	margin-bottom: 0.5em;
}
.LabSolAboutItemDesc {
	position: relative;
	font-size: 14px;
}
.LabSolAboutItem1 .LabSolAboutItemDesc {
	left:73%;
	margin-top: -3.7em;
	width: 60%;
}
.LabSolAboutItem2 .LabSolAboutItemDesc,
.LabSolAboutItem3 .LabSolAboutItemDesc {
	min-height: 12em;
}
.LabSolAboutBtn {
	display: block;
	position: relative;
	width: 100%;
	margin:1em 0;
	padding: 0.3em 0;
	text-align: center;
	border: 1px solid #999;
	font-size: 12px;
	line-height: 1.6;
	color: #333 !important;
	text-decoration: none !important;
	background-color: #fff;
}
.LabSolAboutBtn:hover {
	opacity: 0.7;
}
.LabSolAboutBtn:after{
	content: "";
	position: absolute;
	top: calc(50% - 3px);
	right: 15px;
	width: 6px;
	height: 6px;
	border-top: 1px solid #D71429;
	border-right: 1px solid #D71429;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.LabSolAboutBtnDisabled {
	color: #999 !important;
}
.LabSolAboutBtnDisabled:hover {
	opacity: 1;
}
.LabSolAboutBtnDisabled:after{
	border-color: #999;
}
.LabSolAboutItem2 .LabSolAboutBtn,
.LabSolAboutItem3 .LabSolAboutBtn {
	position: absolute;
	left: 0;
	bottom: 0;
}

/* ラボソリューション 3つの理由 */
.LabSolReason {
	margin-bottom: 10px;
}
.LabSolReasons {
	display: flex;
	justify-content: space-between;
}
.LabSolReasonItem {
	flex: 0 0 30%;
}
.LabSolReasonImg {
	width: 100%;
	margin-bottom: 20px;
}
.LabSolReasonTtl {
	text-align: center;
	font-weight: bold;
	color: #333;
	border-left: none !important;
	margin-bottom: 15px !important;
	padding: 0 !important;
}
.LabSolReasonTxt {
	font-size: 12px;
}

/* ラボソリューション 3つの理由 表 */
.LabSolTblTtl {
	background: url(/image/hsl/products/inspection/labo/bgi_arrow_t.png) no-repeat center top;
	background-size: 100% 100%;
	padding: 40px 0 5px 0;
	margin-bottom: 10px;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
}
.LabSolTbl {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding:20px 40px;
	background-color: #E2E2E2;
}
.LabSolTblItem {
	flex: 0 0 23.5%;
	margin:10px 0;
	background-color: #fff;
}
.LabSolTblHead {
	background-color: #999;
	color: #FFF;
	text-align: center;
	padding: 9px 0 7px 0;
}
.LabSolTblHeadTtl {
	line-height: 1.4;
	font-weight: bold;
}
.LabSolTblHeadTtlEn {
	font-size: 11px;
	line-height: 1.4;
}
.LabSolTblBody {
	padding: 10px 20px;
	font-size: 14px;
}
.LabSolTblList > li{
	position: relative;
	padding-left: 1.4em;
}
.LabSolTblList > li:before{
	position: absolute;
	left:0;
	top:0.3em;
	content:'';
	display: block;
	width: 1em;
	height: 1em;
	background-color: #999;
}
.LabSolTblItem1 .LabSolTblHead,
.LabSolTblItem1 li:before{
	background-color: #E5A980;
}
.LabSolTblItem2 .LabSolTblHead,
.LabSolTblItem2 li:before{
	background-color: #DBBC7A;
}
.LabSolTblItem3 .LabSolTblHead,
.LabSolTblItem3 li:before{
	background-color: #7DB8AF;
}
.LabSolTblItem4 .LabSolTblHead,
.LabSolTblItem4 li:before{
	background-color: #89B5A3;
}
.LabSolTblItem5 .LabSolTblHead,
.LabSolTblItem5 li:before{
	background-color: #D5ACD9;
}
.LabSolTblItem6 .LabSolTblHead,
.LabSolTblItem6 li:before{
	background-color: #A99CBD;
}
.LabSolTblItem7 .LabSolTblHead,
.LabSolTblItem7 li:before{
	background-color: #B696A5;
}
.LabSolTblItem8 .LabSolTblHead,
.LabSolTblItem8 li:before{
	background-color: #6D9AC9;
}

/* テキスト*/
.TaCPc{
	text-align: center;
}
.NoticeTxt{
	color: #666;
	font-size: 12px;
}

/* 表示/非表示*/
.Show-767{
	display: none;
}
.Hide-767{
}


/* for 995px -
=========================================================================================== */
@media screen and (min-width: 995px) {
}


/* for - 994px
=========================================================================================== */
@media screen and (max-width: 994px) {
	/* 背景 */
	.Bgi01{
		margin-left: -16px;
		margin-right: -16px;
		padding-left: 15px;
		padding-right: 15px;
		background-image: url(/image/hsl/products/inspection/hdd/bgi_01_sp.jpg);
	}
}


/* for - 767px
=========================================================================================== */
@media screen and (max-width: 767px) {
	/* レイアウト1（PC:2カラム SP:1カラム）  */
	.Layout1 {
		display: block;
	}

	/* ボックス（グレー） */
	.BoxGrayBody {
		padding: 1.5em 2em 2.5em 2em;
		font-size: 12px;
	}

	/* ボックス（枠線付き） */
	.BoxBorderGray {
		padding: 2em 30px;
	}

	/* QA */
	.QaBox {
		display: block;
		font-size: 14px;
	}
	.QaBoxImg {
		margin-bottom: 2em;
	}
	.QaBoxTxt {
		padding-left: 0;
	}

	/* 見出し1 */
	.Ttl1Line{
		font-size: 16px;
	}

	/* 見出し2 */
	.JS .Ttl2{
		font-size: 18px;
	}

	/* 見出し3 */
	#Contents h3.Ttl3,
	.Ttl3{
		font-size: 15px;
	}

	/* アイコン付き見出し */
	.TtlIcoImg{
		width: 38%;
		top: -65px;
		left: -1em;
	}
	.JS .TtlIcoTxt{
		top: -6em;
		margin-bottom: -6em;
	}

	/* マージン */
	.MarginB1{
		margin-bottom: 30px;
	}
	.MarginB2{
		margin-bottom: 20px;
	}
	.MarginB3{
		margin-bottom: 10px;
	}
	.MarginB4{
		margin-bottom: 40px;
	}

	/* パディング */
	.PaddingT070Sp{
		padding-top: 70px;
	}

	/* 背景 */
	.Bgi02{
		margin-left: -16px;
		margin-right: -16px;
		padding-left: 15px;
		padding-right: 15px;
		padding-top: 5px;
		padding-bottom: 20px;
		background-image: url(/image/hsl/products/inspection/labo/case-studies/bgi_01_sp.png);
		background-size: cover;
	}

	/* ボタン */
	.BtnArray{
		display: block;
	}
	.BtnArrayItem{
		flex:1 0 100%;
		max-width: none !important;
	}
	.BtnArrayItem{
		width: 100% !important;
	}
	.BtnArrayItem img{
		max-width: none !important;
		width: 100% !important;
	}
	.BtnArrayItem:first-child,
	.BtnArrayItem:last-child{
		margin:0;
	}

	/* ラボソリューション メインビジュアル */
	.LabSolMainVisualWrap{
		position: static;
		height: auto;
		margin-bottom: 10px;
	}
	.LabSolMainVisual{
		overflow: hidden;
		margin-left: -16px;
		margin-right: -16px;
		position: static;
		left: 0;
		top: 0;
		width: auto;
		height: auto;
	}

	.LabSolMainVisualImg{
		width:100%;
		position: static;
		margin: 0;
	}

	/* ラボソリューション 私たちが提供するソリューションとは */
	.LabSolAboutKeyVisual {
		position: static;
		width: 100%;
		margin-bottom: 30px;
	}
	.LabSolAboutItems {
		display: block;
	}
	.LabSolAboutItem {
		margin-bottom: 30px;
	}
	.LabSolAboutItem1 .LabSolAboutItemIn,
	.LabSolAboutItem2 .LabSolAboutItemIn,
	.LabSolAboutItem3 .LabSolAboutItemIn {
		width: 100%;
		margin:0 auto;
	}
	.LabSolAboutItem1 .LabSolAboutItemDesc {
		position: static;
		margin-top:0;
		width: 100%;
	}
	.LabSolAboutItem2 .LabSolAboutItemDesc,
	.LabSolAboutItem3 .LabSolAboutItemDesc {
		min-height: 1px;
	}
	.LabSolAboutBtn {
		padding: 1em 0;
		font-size: 14px;
	}
	.LabSolAboutItem2 .LabSolAboutBtn,
	.LabSolAboutItem3 .LabSolAboutBtn {
		position: relative;
	}

	/* ラボソリューション 3つの理由 */
	.LabSolReason {
		margin-bottom: 10px;
	}
	.LabSolReasons {
		display: block;
		justify-content: space-between;
	}
	.LabSolReasonImg {
		margin-bottom: 10px;
	}
	.LabSolReasonItem {
		margin-bottom: 30px;
	}

	/* ラボソリューション 3つの理由 表 */
	.LabSolTblTtl {
		padding: 20px 0 5px 0;
		font-size: 18px;
	}
	.LabSolTbl {
		display: flex;
		padding: 15px;
		margin-left: -16px;
		margin-right: -16px;
		box-sizing: border-box;
	}
	.LabSolTblItem {
		flex: 0 0 48.5%;
		margin: 5px 0;
	}
	.LabSolTblHeadTtl {
		font-size: 14px;
	}
	.LabSolTblHeadTtlEn {
		font-size: 10px;
	}
	.LabSolTblBody {
		padding: 10px;
		font-size: 12px;
	}

	/* テキスト*/
	.TaCPc{
		text-align: left;
	}

	/* 表示/非表示*/
	.Show-767{
		display: block;
	}
	br.Show-767{
		display: inline;
	}
	.Hide-767{
		display: none;
	}
}


/* for - 579px
=========================================================================================== */
@media screen and (max-width: 579px) {
}


/* for - 399px
=========================================================================================== */
@media screen and (max-width: 399px) {
}

/* for print
=========================================================================================== */
@media print {
	body{
		width: 1275px;
		overflow: hidden;
		transform: scale(0.8);
		transform-origin: 0 0;
	}
	.LabSolMainVisualWrap{
		width: 1275px;
	}
	.LabSolMainVisual{
		width: 100%;
		left:0;
	}
}