@charset "UTF-8";

/*ヘッダー
-------------------------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
header {
    position: relative;
    /*height: 200px;*/
    /*background: #383bbc;*/
    color: #fff;
}

header img.logo{
	width:80%;
}

center.header_img{
	background: url(../img/PCR_header.png);
}


h1 {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    color: #fff;
    font-size: 2em;
    text-align: center;
    transform: translateY(-50%);
}
nav {
    height: 50px;
    background: #383bbc;
    color: #fff;
}

nav ul{
	 display: table;
	 margin: 0 auto;
	 padding: 20px 0 0 0;
	 width: 50%;
	 text-align: center;
}

nav li{
	 display: table-cell;
	 min-width: 50px;
}
nav a{
	 display: block;
	 width: 100%;
	 text-decoration: none;
	 color: #fff;
	 font-weight:bold;
	 padding-bottom: 5px;
}
nav li.current{
 	border-bottom: 3px solid #92D050;
}
nav li:hover{
	 color: #E7DA66;
	 border-bottom: 3px solid #F0E475;
}

main {
    padding: 20px 20px;
    background: #ecf0f1;
     
}

body{
	 font-family: sans-serif;
}

section {
    max-width: 960px;
    /*height: 1000px;*/
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(0,0,0,.1);
}
section + section {
    margin-top: 20px;
}
footer {
    height: 100px;
    background: #2c3e50;
    text-align:center;
    bottom: 0;
}

footer div{
    height: 100px;
    display: inline-block;
    color:#fff;
    vertical-align: middle;
}


/*FIXメニュー
-------------------------------------*/
.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
}

section h2{
   color:#383bbc;
}

section hr{
  background-color: #383bbc;
  border: none;
  height: 2px;
  color: #383bbc;
  margin: 0 0 3px 0;
}

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col-sm-step {
  width: 25%;
  padding: 0.5em;
}

.col-sm-step-50 {
  width: 50%;
  padding: 0.5em;
}


/*はじめに
---------------------------*/
.row video{
	text-align: center;
	margin: 0 auto;

}

.heading{
	background-color: #383bbc; /* 線色 */
    border-radius: 15px; /* 線幅の半分 */
    content: "";
    display: block;
    height: 30px; /* 線幅 */
    text-align: center;
    width: 100%;
    margin-top: 10px;
    color: #fff;
    
    font-size: 20px;
   
}

.font-s{
	font-size:12px;
}

.nonQR{
	 border: solid 3px #6091d3;
	 border-radius: 20px; 
}

.yellow-border{
	background-color: #ffd700; /* 線色 */
    border-radius: 15px; /* 線幅の半分 */
    content: "";
    display: block;
    height: 30px; /* 線幅 */
    text-align: center;
    width: 100%;
    
   font-size: 20px;
   
}


.nonQR .row .col-sm-step{
	margin-left: 35px;
	padding: 0px;
	margin-top: 15px;

}

.font-color{
	color:#e60000;
}

.bfr-collect .row .col-sm-step{
	margin-left: 55px;
	margin-top: 25px;

}



.careful{
	 border: solid 3px #e60000;
	 border-radius: 20px; 
}

.red-border{
	background-color: #e60000; /* 線色 */
    border-radius: 15px; /* 線幅の半分 */
    content: "";
    display: block;
    height: 30px; /* 線幅 */
    text-align: center;
    width: 100%;
    color: #fff;
    font-size: 20px;
   
}

.careful .row .col-sm-step{
	margin-left: 35px;
	padding: 0px;
	margin-top: 15px;

}

.font-b{
	font-weight: bold;
	text-align: center;
	font-size: 20px;
}

.inspec{
	text-align: center;
}

.specimen{
	border: solid 3px #ffd700;
	 border-radius: 20px; 
	 background-color: #ffd700;
}

.spac_vari{
	padding: 8px;

}

/*PC用画面*/
@media screen and (min-width: 768px) {
    header img.logo{
      width: auto;
    }
	dl.contact{
		border-top: none;
		width: 90%;
	}
	dl.contact dt {
		border-top: 1px solid #383bbc;
		clear: left;
		float: left;
		width: 40%;
	}

	dl.contact dd {
		border-left: 1px solid #383bbc;
		border-top: 1px solid #383bbc;
		margin-left: 40%;
	}
	
	.bfr-collect .row{
	margin-left: 7%;
	
	}
	


}

/*スマホ用画面*/
@media (max-width: 767px){

    .section-one{
         width: 90%
    }
	.col-sm-step {
	  width:auto;
	  padding: 0.5em;
	}
	
	/*.start img{
	  width:350px;
	
	} */
	
	.nonQR .row .col-sm-step{
	  margin-right: 10px;
	}
	
	.bfr-collect .row .col-sm-step{
	  margin-left: 25px;
	  margin-top: 25px;
	}
	
	.care_1{
	  width: 80%;
	}
	
	.care_2{
	  width: 80%;
	}
	
	.not_ins{
	  width: 80%
	
	}
	
	.send_step1{
	  width: 90%;
	}
	
	.send_step2{
	  width: 90%;
	}

	.send_step3{
	  width: 90%;
	}

	.result{
	  width: 90%;
	}


}

ol {
  counter-reset:number;
  list-style-type: none!important;
  padding:0.5em;
  background: #f5faff;
}
ol li {
  position: relative;
  padding-left: 30px;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 30px;
}

ol li:before{
  position: absolute;
  counter-increment: number;
  content: counter(number);
  display:inline-block;
  background: #383bbc;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  top: 12%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/*ヘッダー用
-------------------------------------*/
span.circle-head {
    display: inline-block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    text-align:center;
    line-height: 70px;
    color:#383bbc;
    font-weight:bold;
    font-size:1.0em;
    background:#fff;
    margin: 10px;
}

div.header-jp {
    padding: 0.5em 1em;
    margin: 1em 0;
    font-weight: bold;
    color: #fff;
    background: #383bbc;
    border: solid 1px #fff;
    border-radius: 10px;
}

div.header-jp p {
    margin: 0;
    padding: 0;
}

.col-sm-header {
  padding: 0.5em;
}


/* 最初のセクション
-------------------------------------*/
.start{
	text-align:center;
}


/* 使用方法
-------------------------------------*/
span.method-step {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  border-radius: 10px;
  background-color: #383bbc;

  text-align:center;
  line-height: 1.5em;
  color:#fff;
  font-weight:bold;
  font-size:1.5em;

  margin: 5px;
}


/*採取前
------------------------------------*/
.brfcol{
	margin-top: 30px;
}


/* 検査結果
-------------------------------------*/
span.circle {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  text-align:center;
  line-height: 100px;
  color:#fff;
  font-weight:bold;
  font-size:1.5em;

  margin: 10px;
}

.bgred {
   background: red;
}

.bgblue {
   background: blue;
}

.bgyellow {
   background: #FFBF00;
}

hr.result{
  background-color: #ccc;
  border: none;
  height: 2px;
  color: #ccc;
  margin: 0 0 3px 0;
}

/*img.judge-size{
  width : 300px;
  margin-right: 40px;
}*/

div.col-sm {
  padding : 5px;
}

div.col-sm p {
  padding : 5px;
}

p.bgred-txt {
  color:red;
  font-weight:bold;
  font-size:1.2em;
}


p.bgblue-txt {
  color:blue;
  font-weight:bold;
  font-size:1.2em;
}

p.bgyellow-txt {
  color:#000;
  font-weight:bold;
  font-size:1.2em;
}

span.attent {
  color:red;
  font-weight:bold;
  font-size:1em;
}

span.bgback {
  color:#000;
  font-weight:bold;
  font-size:1em;
}

.result{
	text-align:center;
}
/* 注意事項
-------------------------------------*/

section h2.attent {
 color:rgb(234,84,19);
}

hr.attent {
  background-color: rgb(234,84,19);
  border: none;
  height: 2px;
  color: rgb(234,84,19);
  margin: 0 0 3px 0;
}

ol.attent {
  background: #fff5e6;
  width:100%;
}

ol.attent li{
  font-size: smaller;
}
ol.attent li:before{
  background-color: rgb(234,84,19);
}


/*よくある質問-TOP
-------------------------------------*/
a.btn-blue {
  display: block;
  margin: 1em;
  padding: 0.6em;
  text-decoration: none;
  border-radius: 5px;
  color: #fff;
  background-color: #383bbc;
  font-weight:bold;
}


a.btn-blue:hover {
  color: #383bbc;
  font-weight:bold;
  background: #ccc;
}

div.container-fluid-qa {
   width: 100%;
}

div.col-sm-qa {
	text-align:center;
    width: 45%;
    margin: 10px auto
}


a.mail-form {
   width: 25%;
   heigth: 15%;
}
a.mail-form:hover {
  color: #fff;
  background: #383bbc;
}

/*よくある質問-詳細ページ
-------------------------------------*/
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_qa {
	overflow-x: hidden;
	margin: 0 auto;
	color: #333333;
}
.cp_qa .cp_actab {
	padding: 10px 0;
	border-bottom: 3px dotted #ccc;
}
.cp_qa label {
	font-size: 1.0em;
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 10px 10px 0 48px;
	cursor: pointer;
}
.cp_qa .cp_actab-content {
	font-size: 1em;
	position: relative;
	overflow: hidden;
	height: 0;
	margin: 0 40px;
	padding: 0 14px;
	-webkit-transition: 0.4s ease;
	        transition: 0.4s ease;
	opacity: 0;
}
.cp_qa .cp_actab input[type=checkbox]:checked ~ .cp_actab-content {
	height: auto;
	padding: 14px;
	opacity: 1;
}
.cp_qa .cp_plus {
	font-size: 2.0em;
	line-height: 100%;
	position: absolute;
	z-index: 5;
	margin: 3px 0 0 10px;
	-webkit-transition: 0.2s ease;
	        transition: 0.2s ease;
}
.cp_qa .cp_actab input[type=checkbox]:checked ~ .cp_plus {
	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
}
.cp_qa .cp_actab input[type=checkbox] {
  display: none;
}


/*お問合せフォーム
-------------------------------------*/

blockquote { width:50%; margin:0 auto; }

dl.contact dl,dt,dd {
	margin: 0;
	padding: 0;
}

dl.contact{
	background: #f5faff;
	border: 1px solid #383bbc;
	width: 100%;
}
dl.contact dt,dd {
	padding: 6px;
}

dl.contact dt {
	border-top: 1px solid #383bbc;
}

dl.contact dd {
	background: #fff;
	border-left: 1px solid #383bbc;
	border-top: 1px solid #383bbc;
	border-rigth: 1px solid #383bbc;
	border-buttom: 1px solid #383bbc;
}


input.contact-input{
    border: 1px solid #ccc;
	max-width:99%;
}
textarea.contact-area{
	max-width:99%;
    border: 1px solid #ccc;
    overflow:auto;
}



textarea.privacy {
	max-width:99%;
    border: 1px solid #ccc;
    overflow:auto;
}

div.boxes {
	padding: 10px;
}


/* @media only screen and (max-width:768px){ */
/*@media screen and (min-width: 768px) {
    header img.logo{
      width: auto;
    }
	dl.contact{
		border-top: none;
		width: 90%;
	}
	dl.contact dt {
		border-top: 1px solid #383bbc;
		clear: left;
		float: left;
		width: 40%;
	}

	dl.contact dd {
		border-left: 1px solid #383bbc;
		border-top: 1px solid #383bbc;
		margin-left: 40%;
	}
}*/

span.req {
	font-size: x-small;
	color: #ff7f50;
	border:1px solid #ff7f50;
	padding: 2px;
}


input.button {
	  display: inline-block;               /*表示形式*/
	  border-radius : 5%;                  /*角丸をまとめて指定*/
	  font-size : 18pt;                    /*文字の大きさ*/
	  text-align : center;                 /*横（水平）方向の文字位置*/
	  cursor : pointer;                    /*カーソル*/
	  padding : 12px 12px;                 /*パディングの大きさ*/
	  background : #383bbc;         /*背景全般の設定*/
	  color : #ffffff;                     /*文字色*/
	  line-height : 1em;                   /*行の高さ*/
	  transition : .3s;                    /*トランジションの設定*/
	  box-shadow : 6px 6px 3px #666666;    /*ボックスの影付け*/
	  border : 2px solid #383bbc;   /*ボーダーのスタイル・太さ・色*/
}

input.button_x {
	  display: inline-block;               /*表示形式*/
	  border-radius : 5%;                  /*角丸をまとめて指定*/
	  font-size : 18pt;                    /*文字の大きさ*/
	  text-align : center;                 /*横（水平）方向の文字位置*/
	  cursor : pointer;                    /*カーソル*/
	  padding : 12px 12px;                 /*パディングの大きさ*/
	  /*background : #383bbc;*/         /*背景全般の設定*/
	  color : #ffffff;                     /*文字色*/
	  line-height : 1em;                   /*行の高さ*/
	  transition : .3s;                    /*トランジションの設定*/
	  box-shadow : 6px 6px 3px #666666;    /*ボックスの影付け*/
	  border : 2px solid #383bbc;   /*ボーダーのスタイル・太さ・色*/
}


/*
-------------------------------------*/


/*input.button:hover {  */
/*
input.button {
	  box-shadow : none;
	  color : #383bbc;
	  background : #ffffff;
}
*/

.copylight a{
	color:#d3d3d3;
}