@charset "utf-8";

/* ==================================================
		
		排水中のPFAS多成分一斉分析 PC

================================================== */

/* --------------------------------------------------
		base
-------------------------------------------------- */
h3 {
 color: #33333A;
}
.centered {
 text-align: center;
}
.ldeco03 a:link, 
.ldeco03 a:visited  {
 color: #333333;
 text-decoration: underline;
 text-underline-offset: 5px;
 opacity: 1;
}
.ldeco02 a:hover {
 color: #333333;
 text-decoration: none;
 transition: opacity 0.5s;
 opacity: 0.7;
}
.topicPath>ul {
 color: #2b7ea6;
}
.relat {
 border-top: 1px solid #e5e5e5;
}

@media screen and (min-width:741px) {
/* --------------------------------------------------
		base
-------------------------------------------------- */
.inner {
 width: 1140px;
 margin: 0 auto;
}
.contents p {
 font-size: 16px;
 color: #333333;
 line-height: 2;
 letter-spacing: 0;
 padding: 0;
 margin: 0;
}
.btnblue02 {
 display: block;
 background: #3e8db3;
 padding: 7px 0 10px !important;
 border-radius: 30px;
 width: 327px;
 margin: -8px auto 0 !important;
 position: relative;
 top: 27px;
 transition: .3s;
}
a:hover .btnblue01, 
a:hover .btnblue02 {
 background: #091c45;
}
.btnblue01 span, 
.btnblue02 span {
 color: #ffffff !important;
}
.btnblue02 span::after {
 content: url(../images/arrow_down.png);
 position: relative;
 top: 1px;
 margin-left: 9px;
}
.relat {
 padding: 45px 0 50px;
}
 

/* --------------------------------------------------
		.menu
-------------------------------------------------- */
.menu .nav-list li .fc {
 color: #2b7ea6;
}
 
/* --------------------------------------------------
		.vi
-------------------------------------------------- */
.vi {
 background: url(../images/vi_img01_pc.jpg) no-repeat center / cover;
}
.vi .vi-inner {
 width: 1140px;
 height: 259px;
 margin: 0 auto;
 position: relative;
}
 
/* --------------------------------------------------
		h
-------------------------------------------------- */
h1 {
 font-size: 34px;
 color: #2b7ea6;
 font-weight: 700;
 letter-spacing: 0.4px;
 text-shadow: 2px 2px 10px #ffffff, -2px 2px 10px #ffffff, 2px -2px 10px #ffffff, -2px -2px 10px #ffffff;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 width: 100%;
}
h2 {
 font-size: 36px;
 font-weight: 800;
 color: #2b7ea6;
 letter-spacing: 3.5px;
}
h3 {
 font-size: 20px;
 font-weight: 700;
 letter-spacing: 2px;
}
h4 {
 font-size: 19px;
 color: #2b7ea6;
 font-weight: 700;
 text-shadow: 2px 2px 10px #ffffff, -2px 2px 10px #ffffff, 2px -2px 10px #ffffff, -2px -2px 10px #ffffff;
 width: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
}
h5 {
 font-weight: 700;
 position: relative;
 padding-left: 32px;
}
h5 a::before {
 content: url(../images/arrow_red.png);
 position: absolute;
 top: 1px;
 left: 0;
}
 
/* --------------------------------------------------
		.intro
-------------------------------------------------- */
.intro .intro-inner {
 padding: 0 49px;
}
 
/* --------------------------------------------------
		.section
-------------------------------------------------- */
.section {
 margin: 0;
 border-top: 1px solid #e5e5e5;
 border-bottom: none;
}
.section .section-inner {
 padding: 0 49px;
}
.section .section-inner .section-box li {
 width: 422px;
 margin: 0 20px;
}
.section .section-inner .secbox li {
 width: 475px;
}
.section .section-inner .secbox li:first-of-type {
 margin: 0 12px 0 0;
}
.section .section-inner .secbox li:last-of-type {
 margin: 0 0 0 12px;
}
.section .section-inner .section-box li .cap {
 line-height: 1.6;
 padding: 0 10px;
}
 
/* --------------------------------------------------
		.dl
-------------------------------------------------- */
.dl .txt {
 line-height: 1.6;
}
.dl a {
 display: inline-block;
}
.dl a .btn {
 margin-top: 0 !important;
 position: relative;
 top: 0;
}
 
/* --------------------------------------------------
		.btnarea
-------------------------------------------------- */
.btnarea {
 background: #f5fafd;
}
.btnarea .btnarea-inner {
 padding: 0 49px;
}
.btnarea .btnarea-inner li {
 width: 333px;
 border: 2px solid #e3eaf0;
 background: #ffffff;
}
.btnarea .btnarea-inner li a {
 display: block;
}
.btnarea .btnarea-inner li a .img {
 position: relative;
}
.btnarea .btnarea-inner li a .txt {
 font-size: 15px;
 line-height: 1.5;
 padding: 0 20px 0 20px;
}
 
/* --------------------------------------------------
		.relat
-------------------------------------------------- */
.relatItem {
	width: 592px;
	margin-left: auto;
	margin-right: auto;
}
/*.relat .img {
 width: 333px;
 margin: 0 55px 0 30px;
}
.relat .img .img-inner {
 margin-left: 16px;
}*/
.relat .img .name {
 font-weight: 500;
 letter-spacing: 1.3px;
 line-height: 1.5;
}
.relat .img .name a {
 display: inline-block;
 position: relative;
}
.relat .img .name a::after {
 content: url(../images/arrow_red.png);
 position: absolute;
 top: 2px;
 right: -36px;
}
.relat .img .name a:hover::after {
 transition: opacity 0.5s;
 opacity: 0.7;
} 
/*.relat .relat-inner {
 width: calc(100% - 333px);
} */
.relat .relat-inner a {
 display: inline-block;
} 
.relat .relat-inner a .btn {
 position: relative;
 top: 0;
} 
 
} 


/* ==================================================
		
		排水中のPFAS多成分一斉分析 SP

================================================== */
@media screen and (max-width:740px) {
/* --------------------------------------------------
		base
-------------------------------------------------- */
.inner {
 margin: 0 20px;
}
.contents p {
 font-size: 14px;
 color: #333333;
 line-height: 1.8;
 padding: 0;
 margin: 0;
}
.btnblue01, 
.btnblue02 {
 display: block;
 background: #3e8db3;
 padding: 5px 0 6px !important;
 border-radius: 30px;
 width: 90%;
 margin: -8px auto 0 !important;
 position: relative;
 bottom: -20px;
}
.btnblue01 span, 
.btnblue02 span {
 color: #ffffff !important;
}
.btnblue02 span::after {
 content: url(../images/arrow_down.png);
 position: relative;
 top: 2px;
 margin-left: 8px;
}
.relat {
 padding: 45px 0 50px;
}

/* --------------------------------------------------
		.vi
-------------------------------------------------- */
.vi {
 background: url(../images/vi_img01_sp.jpg) no-repeat center / cover;
}
.vi .vi-inner {
 width: 100%;
 height: 160px;
 margin: 0 auto;
 position: relative;
}
 
/* --------------------------------------------------
		h
-------------------------------------------------- */
h1 {
 font-size: 22px;
 color: #2b7ea6;
 font-weight: 700;
 letter-spacing: 0;
 text-shadow: 2px 2px 10px #ffffff, -2px 2px 10px #ffffff, 2px -2px 10px #ffffff, -2px -2px 10px #ffffff;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 width: 100%;
 padding: 0 20px;
}
h2 {
 font-size: 24px;
 font-weight: 800;
 color: #2b7ea6;
 letter-spacing: 1.5px;
 padding: 0 20px;
}
h3 {
 font-size: 15px;
 font-weight: 700;
}
h4 {
 font-size: 14px;
 color: #2b7ea6;
 font-weight: 700;
 text-shadow: 2px 2px 8px #ffffff, -2px 2px 8px #ffffff, 2px -2px 8px #ffffff, -2px -2px 8px #ffffff;
 width: 95%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
}
h5 {
 font-weight: 700;
 position: relative;
}
h5 a {
 padding-left: 33px;
}
h5 a::before {
 content: url(../images/arrow_red.png);
 position: absolute;
 top: 0;
 left: 50%;
 margin-left: 15px;
}
 
/* --------------------------------------------------
		.section
-------------------------------------------------- */
.section {
 margin: 0;
 border-top: 1px solid #e5e5e5;
 border-bottom: none;
}
.section .section-inner .section-box {
 justify-content: space-between;
}
.section .section-inner .section-box li {
 width: 48%;
}
.section .section-inner .section-box li .cap {
 line-height: 1.5;
 padding: 10px;
}
 
/* --------------------------------------------------
		.dl
-------------------------------------------------- */
.dl {
 clear: both;
}
.dl .txt {
 line-height: 1.5;
}
.dl a {
 display: inline-block;
 width: 85%;
}
.dl a .btn {
 bottom: 0;
 margin-top: 0 !important;
}
 
/* --------------------------------------------------
		.btnarea
-------------------------------------------------- */
.btnarea {
 background: #f5fafd;
}
.btnarea .btnarea-inner li {
 width: 49%;
 border: 1px solid #e3eaf0;
 background: #ffffff;
}
.btnarea .btnarea-inner li a {
 display: block;
}
.btnarea .btnarea-inner li a .img {
 position: relative;
}
.btnarea .btnarea-inner li a .txt {
 font-size: 12px;
 line-height: 1.4;
 padding: 0 10px 0 10px;
}
 
/* --------------------------------------------------
		.relat
-------------------------------------------------- */
/*.relat .img {
 width: 50%;
 float: left;
 margin: 5px 15px 5px 0;
}*/
.relat .img .name {
 font-weight: 500;
 line-height: 1.5;
 margin-right: 30px;
 word-break: break-all;
}
.relat .img .name a {
 display: inline-block;
 position: relative;
}
.relat .img .name a::after {
 content: url(../images/arrow_red.png);
 position: absolute;
 top: 2px;
 right: -30px;
}
.relat .img .name a:hover::after {
 transition: opacity 0.5s;
 opacity: 0.7;
}
.relat .relat-inner a {
 display: inline-block;
/* width: 45%;*/
}
.relat .relat-inner a::before {
	left: -15px;
} 
.relat .relat-inner a .btn {
 width: 100%;
 bottom: 0;
 margin-top: 0 !important;
} 
 
}