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

/*-----共通-----*/

.bg-case-index {
	background-image:url(../../../img/common/bg-plant.jpg);
    background-size: cover;
    position: relative;
	margin:0 auto 0px;
}
.case-title{ line-height:1; margin:0 auto 40px; }
.case-title h3{ font-size:30px; font-weight:600; border-bottom:solid 1px #000; padding:0 0 16px 0; margin:0 auto 16px;}
.case-title h4{ font-size:20px; font-weight:600; margin:0 auto 12px;}

/*-----トップページ-----*/

#content-case{ padding:100px 0; margin:80px auto 0; }
.content-case-photo{ width:560px; margin:0 auto 100px; position:relative;}
.content-case-photo-parts1{ position:absolute; top:-60px; right:0; z-index:10; border:solid 2px #000; width:360px; background-color: rgb(255 255 255 / 60%); text-align:center; padding:60px 0; font-size:24px; font-weight:bold; line-height:1.4;}
.txt-caseproduct:before{ position:absolute; right:10px; bottom:10px; content:'Pickup\AProduct'; font-size:12px; z-index:10; white-space: pre; text-align:right;}
.content-case-photo-parts1:after{ position:absolute; right:0; top:0; content:''; line-height:1; background-image:url(file:///C|/Apache24/htdocs/laboratory/pickup/img/top/labo-parts1.png); background-size:cover; width:20px; height:20px;}

.content-case-list1{}
.content-case-list1 ul{ overflow:hidden; margin:0 -5.3333% -5.3333% 0; }
.content-case-list1 ul li{ float:left; width:28%; margin:0 5.3333% 5.3333% 0; text-align:center; position:relative; padding:15px 0 0 0;}

.content-case-list1 ul li p{ margin:0 auto 16px;}
.content-case-list1 ul li p:first-child{ margin:0 auto 0px;}
.content-case-list1 ul li p:last-child{ margin:0 auto 0px;}
.content-case-list1 ul li p.content-case-list1-photo{ position:relative;}
.content-case-list1 ul li p.content-case-list1-photo:after {
    display: inline-block;
    background-color: #000;
    padding: 10px 12px;
    color: #fff;
    line-height: 1;
    position: absolute;
    right: -15px;
    top: -15px;
    transform: translate(0%, 0%);
    z-index: 10;
	font-weight: 600;
}

.case-subtitle{ font-size:18px; font-weight:600; background-color:#F2F2F3; border-top:solid 2px #000; border-bottom:solid 2px #000; padding:10px 0; text-align: center; margin: 60px 0 30px; }
.content-case-list1 ul li p.case-number1:after{ content: '1'; }
.content-case-list1 ul li p.case-number2:after{ content: '2'; }
.content-case-list1 ul li p.case-number3:after{ content: '3'; }
.content-case-list1 ul li p.case-number4:after{ content: '4'; }
.content-case-list1 ul li p.case-number5:after{ content: '5'; }
.content-case-list1 ul li p.case-number6:after{ content: '6'; }
.content-case-list1 ul li p.case-number7:after{ content: '7'; }
.content-case-list1 ul li p.case-number8:after{ content: '8'; }

.content-case-list1 ul li p.content-case-list1-txt1{ font-weight:600;}
.content-case-list1 ul li p.content-case-list1-txt1 br{ display:none; }
.content-case-list1 ul li p.content-case-list1-txt2{ font-size:18px; font-weight:600; background-color:#F2F2F3; border-top:solid 2px #000; border-bottom:solid 2px #000; padding:10px 0; }
.content-case-list1 ul li p.content-case-list1-txt3{ text-align:justify; line-height:1.8;}
.content-case-list1 ul li p.content-case-list1-btn a{ background-color:#0075C2; color:#fff; display:inline-block; padding:7px 15px 5px; text-decoration:none;}

/*-----内面-----*/

.case-detail-info{ border-bottom:solid 1px #000;}
.case-detail-info-photo{ margin:0 auto 40px; text-align: right;}
.case-detail-info-photo img{ width:100%;}
.case-detail-info-photo span{ margin-left: auto; background-color: #89B928; color: #fff; padding: 6px 13px;}
.case-detail-info-number{ font-weight:600; font-size:16px; margin:0 auto 16px;}
.case-detail-info-title{ font-size:26px; font-weight:600; margin:0 auto 24px; line-height:1.4; }
.case-detail-info-txt{ font-size:18px; line-height:1.8; margin:0 auto 30px;}

.case-detail-list{ padding:60px 0; border-bottom:solid 1px #000; }
.case-detail-list ul{ overflow:hidden; margin:0 -5.3333% -5.3333% 0; }
.case-detail-list ul li{ float:left; width:28%; margin:0 5.3333% 5.3333% 0; text-align:center; position:relative;}
.case-detail-list-photo{ margin:0 auto 24px;}
.case-detail-list-txt{ text-align:left; }


.case-detail-info02{ border-bottom:solid 1px #000;}
.case-detail-info-txt02{ font-size:18px; line-height:1.8; margin:30px auto;}

.case-detail-info03{ border-bottom:solid 1px #000; padding-top: 30px;}
.case-detail-info-title02{ font-size:22px; font-weight:600; margin:0 auto ; line-height:1.4; }
.case-detail-info03 ul{ margin-top:20px; margin-bottom: 30px;}
.case-detail-info03 ul li{ margin-top:5px;}
.case-detail-info03 ul li dl{ display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: flex-start;}
.case-detail-info03 dl dt,.case-detail-info03 dl dd{ display:inline-block;}
.case-detail-info03 dl dt{ width:80px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify;  -ms-flex-pack: justify; justify-content: space-between; }
.case-detail-info03 dl dd{ width: calc(100% - 80px); margin-left: 3px;}

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

.case-title {
    margin: 80px auto 40px;
}

}

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

.bg-case-index { margin:0 auto 60px; }
.case-title h3 { font-size: 26px; }

/*-----トップページ-----*/

#content-case { padding: 100px 0 60px; }
.content-case-photo { width: 460px;}
.content-case-photo-parts1 { width: 240px; padding: 40px 0; font-size: 16px; }
.content-case-list1 ul li p.content-case-list1-txt2 {
    font-size: 15px;
    line-height: 1.4;
    padding: 10px 0 8px;
}
.txt-caseproduct:before { font-size: 10px; line-height: 1.1; }
.content-case-photo-parts1:after { width: 15px; height: 15px;}
.content-case-list1 ul li p.content-case-list1-txt1 br{ display:block; }
.content-case-list1 ul li p.content-case-list1-btn a { display: block; }

/*-----内面-----*/

.case-detail-list ul{ overflow:hidden; margin:0 -5% -5% 0; }
.case-detail-list ul li{ float:left; width:45%; margin:0 5% 5% 0; text-align:center; position:relative;}

}

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

/*-----共通-----*/

.bg-case-index { margin:0 auto 40px; }
.case-title { margin: 0 auto 24px; }
.case-title h3 { font-size: 18px; padding: 0 0 12px 0; margin: 0 auto 12px;}

/*-----トップページ-----*/

#content-case { padding: 80px 0 40px; }
.content-case-photo { width: 100%; margin: 0 auto 60px;}
.content-case-photo-parts1 { width: 200px; padding: 35px 0; font-size: 13px;}
.content-case-list1 { width: 80%; margin: 0 auto;     padding: 0 10%;}
.content-case-list1 ul { margin: 0; padding: 0 10%; }
.content-case-list1 ul li { float: none; width: 100%; display: block; margin: 0 auto 36px; text-align: center;}
.content-case-list1 ul li:last-child{ margin:0 auto 0px;}
.content-case-list1 ul li p.content-case-list1-btn a { display:inline-block;}
.case-subtitle{ font-size: 15px; line-height: 1.4; padding: 10px 0 8px; margin: 30px 0 15px; }

/*-----内面-----*/

.case-detail-info-number {
    font-size: 14px;
    margin: 0 auto 10px;
    line-height: 1;
}
.case-detail-info-title { font-size: 18px; margin: 0 auto 16px; }
.case-detail-list { padding: 40px 0; }
.case-detail-list ul{ overflow:hidden; margin: 0 auto; width: 70%;}
.case-detail-list ul li{ float:none; display:block; width:100%; margin:0 0 24px 0;}
.case-detail-list ul li:last-child{ margin:0;}
.case-detail-list-photo{ margin:0 auto 16px;}
.case-detail-info-txt {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 auto 30px;
}
.case-detail-info-txt02 {
    font-size: 14px;
    line-height: 1.6;
    margin: 30px auto ;
}
.case-detail-info-title02 { font-size: 16px; }
    
.case-detail-info03 ul{ margin-top:10px; }
.case-detail-list-txt{ line-height: 1.8; }
}