@charset "utf-8";

/* Common
--------------------------------------------------------------------------*/

.lpbox-wrap{
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

.lpbox-wrap .cnt-bt-std + .cnt-bt-std {
	margin-top: 10px;
}

.lpbox-wrap-f{
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	position: relative;
}

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

.lpbox-wrap{
	width: 90%;
	max-width:none;
	margin: 0 5%;
}
	
}

ul.lp-list3{
	width: 100%;
	margin:0 0 20px 0;
	position:relative;
	overflow:hidden;
}

.lp-list3 li{
	position:relative;
	display: block;
}

.lp-list3 li img{
	width: 100%;
}

.lp-list3 li{
	float:left;
	width:31.33%;
	margin:0 1% 10px 1%;
}


/* labo
--------------------------------------------------------------------------*/

#labo .cnt1{
	background: url(../img/labo/bg01.jpg);
	background-color: #000000;
}

#labo .cnt2{
	background: url(../img/labo/bg02.jpg);
	background-color: #9b8845;
}

#labo .cnt3{
	background: url(../img/labo/bg03.jpg);
	background-color: #465256;
}

#labo .lpbox{
	background-size:cover;
	background-repeat: no-repeat;
	position: relative;
	overflow: hidden;
	color: #FFFFFF;
}

.cnt2-2 a{
	color: #ece3b8;
	text-decoration: underline;
}

.labo-lobo{
	background-color: #267d45;
	width: 30%;
	height: 80px;
	position: relative;
	float: left;
}

.labo-lobo img{
	max-width: 360px;
	position: absolute;
	top:0;
	bottom:0;
	margin: auto;
}

.labo-info{
	background-color: #000000;
	width: 70%;
	height: 80px;
	position: relative;
	float: left;
}

.labo-info img{
	max-width: 402px;
	position: absolute;
	top:0;
	bottom:0;
	margin: auto;
}

#labo .cnt1-1{
	padding: 40px 0 0 0;
}

#labo .cnt1-2{
	padding: 40px 0 0 0;
}

#labo .cnt1-2 h3{
	font-size: 350%;
	letter-spacing:0.05em;
}

#labo .cnt1-2 h4{
	font-size: 160%;
	letter-spacing:0.05em;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	margin-bottom: 20px;
}

#labo .cnt1-3 ul{
	margin-bottom: 25px;
}

#labo .cnt1-3 ul li{
	margin: 0 0 7px 20px;
}	

#labo .cnt1-3 ul li::before{
  content: '● ';
  color: #267d45;
	margin: 0 0 0 -13px;
}	

#labo .cnt1-4 h5{
	font-size:140%;
	line-height:120%;
	letter-spacing:0.05em;
	margin:0 1% 20px 1%;
	padding:0 0 0 12px;
	border-left: solid 3px #30a45b;
}

#labo .cnt1-4 ul{
	width: 100%;
	max-width: 400px;
}

#labo .cnt1-5 {
	position:absolute;
	top:280px;
	right: 10%;
  transform: rotate(350deg);
  -ms-transform: rotate(350deg);
  -moz-transform: rotate(350deg);
  -webkit-transform: rotate(350deg);
  -o-transform: rotate(350deg);
}

#labo .cnt1-5 ul{
	width: 100%;
	max-width: 450px;
}

#labo .cnt1-5 li{
	position: relative;
	margin-bottom: 15px;
}

#labo .cnt1-5 li:first-child{
	left:15px;
}

#labo .cnt1-6 {
	margin: 0px auto 50px auto;
}

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

#labo .cnt1-5 {
	position:absolute;
	top:280px;
	right: -10px;
	}
	
}

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

#labo .cnt1-4 ul{
	margin: 0 auto 30px auto;
}
#labo .cnt1-4 h5{
	margin: 0 auto 30px auto;
	width: 100%;
	max-width: 450px;
}
	
#labo .cnt1-5 {
	position:relative;
	top:auto;
	right:auto;
  transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -o-transform: rotate(0deg);

	width: 90%;
	max-width:none;
	margin: 0 5%;
	}
	
#labo .cnt1-5 ul{
	margin: 0 auto 30px auto;
}
	
#labo .cnt1-5 li:first-child{
	left:0px;
}
	
}


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

#labo .cnt1-2{
	padding: 20px 0 0 0;
}

#labo .cnt1-2 h3{
	font-size: 260%;
	letter-spacing:normal;
}
	
.labo-lobo{
	width: 100%;
	text-align: center;
	float: none;
}

.labo-info{
	width: 100%;
	text-align: center;
	float: none;
}

.labo-lobo img{
	max-width: 300px;
	position:relative;
	margin: auto;
}

.labo-info img{
	position:relative;
	margin: auto;
}

}

/* Step
--------------------------------------------------------------------------*/

.cnt2-box{
	height: 780px;
}

#labo .cnt2-1{
	background-color: #267D45;
	width: 100%;
	height: 200px;
	max-width: 380px;
	padding: 40px 20px;
	text-align: center;
	position:absolute;
	top:0%;
	bottom: 0%;
	left: 0;
	margin: auto;
}

#labo .cnt2-1 h3{
	font-size: 260%;
	letter-spacing:0.05em;
	margin-top: 10px;
	margin-bottom: 5px;
}

#labo .cnt2-1 h4{
	font-size: 120%;
	letter-spacing:0.05em;
}

#labo .lp-box-l{
	width: 160px;
	float: left;
}

#labo .lp-box-r{
	padding-top: 40px;
	font-size: 120%;
	letter-spacing: 0.05em;
	float: right;
}

#labo .cnt2-2{
	margin-top: 40px;
	position: relative;
}

#labo .cnt2-2a {
	position: absolute;
	right: 0;
	width: 640px;
}

#labo .cnt2-2a .lp-box-r{
	width: 480px;
}

#labo .cnt2-2b {
	position: absolute;
	right: 0;
	top:143px;
	width: 548px;
}

#labo .cnt2-2b .lp-box-r{
	width: 388px;
}

#labo .cnt2-2c {
	position: absolute;
	right:0;
	top:286px;
	width: 456px;
}

#labo .cnt2-2c .lp-box-r{
	width: 296px;
}


#labo .cnt2-2d {
	position: absolute;
	right: 0;
	top:429px;
	width: 364px;
}

#labo .cnt2-2d .lp-box-r{
	width: 204px;
}

#labo .cnt2-2e {
	position: absolute;
	right: 0;
	top:572px;
	width: 272px;
}

#labo .cnt2-2e .lp-box-r{
	width: 112px;
}

#labo .cnt2-3{
	position: absolute;
	max-width: 250px;
	width: 100%;
	top:340px;
	right: 270px; 
}

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

#labo .cnt2{
	background-position: right;
	}

.cnt2-box{
	height: 980px;
}
	
#labo .cnt2-1{
	background-color: #267D45;
	width: 100%;
	height: 200px;
	max-width: 380px;
	padding: 40px 20px;
	text-align: center;
	position:relative;
	top:0%;
	bottom:auto;
	left: 0;
	margin: auto;
}

	
#labo .cnt2-2{
	width: 640px;
	margin: 0 auto;
	}


#labo .cnt2-3{
	top:540px;
	right:auto;
	left: 20%;

}
}

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

#labo .cnt2-1{
	height:auto;
	max-width: 300px;
	padding: 40px 15px;
	text-align: center;
	position:relative;
}

#labo .cnt2-1 h3{
	font-size: 200%;
}

#labo .cnt2-1 h4{
	font-size: 100%;
}
	
.cnt2-box{
	height: 790px;
}
	
#labo .cnt2-2{
	width:100%;
	margin: 15px auto 0 auto;
	}


#labo .cnt2-3{
	top:460px;
	right:auto;
	left: 0px;
	max-width: 140px;

  transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  -o-transform: rotate(20deg);
}
	
#labo .lp-box-r{
	padding-top: 27px;
	font-size: 100%;
}
	
#labo .lp-box-l{
	width: 110px;
	}
	
#labo .cnt2-2a {
	position: absolute;
	right:auto;
	left: 5%;
	width: 370px;
}

#labo .cnt2-2a .lp-box-r{
	width: 260px;
}

#labo .cnt2-2b {
	position: absolute;
	right:auto;
	left:12%;
	top:110px;
	width: 370px;
}

#labo .cnt2-2b .lp-box-r{
	width: 260px;
}

#labo .cnt2-2c {
	position: absolute;
	right:auto;
	left: 19%;
	top:220px;
	width: 370px;
}

#labo .cnt2-2c .lp-box-r{
	width: 260px;
}


#labo .cnt2-2d {
	position: absolute;
	right:auto;
	left: 26%;
	top:330px;
	width: 370px;
}

#labo .cnt2-2d .lp-box-r{
	width: 260px;
}

#labo .cnt2-2e {
	position: absolute;
	right:auto;
	left: 33%;
	top:440px;
	width: 370px;
}

#labo .cnt2-2e .lp-box-r{
	width: 260px;
}

}


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

#labo .lp-box-l{
	width: 90px;
	}	

#labo .cnt2-2a {
	position: absolute;
	right:auto;
	left: 5%;
	width: 280px;
}

#labo .cnt2-2a .lp-box-r{
	width: 190px;
	padding-top: 10px !important;
}

#labo .cnt2-2b {
	position: absolute;
	right:auto;
	left:12%;
	top:110px;
	width: 260px;
}

#labo .cnt2-2b .lp-box-r{
	width: 170px;
	padding-top: 10px !important;
}

#labo .cnt2-2c {
	position: absolute;
	right:auto;
	left: 19%;
	top:220px;
	width: 240px;
}

#labo .cnt2-2c .lp-box-r{
	width: 150px;
	padding-top: 10px !important;
}


#labo .cnt2-2d {
	position: absolute;
	right:auto;
	left: 26%;
	top:330px;
	width: 220px;
}

#labo .cnt2-2d .lp-box-r{
	width: 130px;
	padding-top: 20px !important;
}

#labo .cnt2-2e {
	position: absolute;
	right:auto;
	left: 33%;
	top:440px;
	width: 220px;
}

#labo .cnt2-2e .lp-box-r{
	width: 110px;
}
	
}

/* Melit
--------------------------------------------------------------------------*/

.cnt3-box{
	height: 860px;
}

#labo .cnt3-1{
	background-color: #267D45;
	width: 100%;
	height: 200px;
	max-width: 380px;
	padding: 40px 20px;
	text-align: center;
	position:absolute;
	top:0%;
	bottom: 0%;
	left: 0;
	margin: auto;
}

#labo .cnt3-1 h3{
	font-size: 260%;
	letter-spacing:0.05em;
	margin-top: 10px;
	margin-bottom: 5px;
}

#labo .cnt3-1 h4{
	font-size: 120%;
	letter-spacing:0.05em;
}


#labo .cnt3-2{
	margin-top: 40px;
	position:absolute;
	right: 0;
	width: 100%;
	max-width: 580px;
}

#labo .card-box{
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	margin-bottom: 15px;
	color: #191919;
	background:#FFFFFF;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
	behavior: url(/PIE.htc);
}

#labo .card-box .card-box-l{
	width: 30%;
	height: 100%;
	min-height: 250px;
	float: left;
	background-size:200%;
	background-position: 0 0 ;
	background-repeat: no-repeat;
}

.card1{
	background: url(../img/labo/merit01.jpg);
}
.card2{
	background: url(../img/labo/merit02.jpg);
}
.card3{
	background: url(../img/labo/merit03.jpg);
}



#labo .card-box .card-box-r{
	width: 70%;
	padding: 24px 0px 0px 0px;
	height: 250px;
	float: right;
}

.card-box-r h3{
	font-size:140%;
	line-height:105%;
	letter-spacing:0.05em;
	color:#1c8241;
	margin:0px 20px 10px 20px;
	padding:0 0 10px 0;
	border-bottom: solid 2px #1c8241; 
}

.card-box-r h4{
	font-size:100%;
	line-height:120%;
	letter-spacing:0.05em;
	color:#FFFFFF;
	border: solid 1px #267d45;
    padding: 3px 15px;
	margin:0px 20px 7px 20px;
	background:#267d45;
	
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	behavior: url(/PIE.htc);
	position:relative;
}

.card-box-r p{
	line-height:160%;
	margin:0px 25px 7px 25px;
}

.card-box-r ul{
	margin:0px 25px 7px 25px;
}

.card-box-r ul li{
	margin: 0 0 0 0px;
	line-height:160%;
}	

.card-box-r ul li::before{
  content: '● ';
  color: #75cc40;
	margin: 0 0 0 0;
}	

.bt-dtl{
}

.bt-dtl a{
	color: #FFFFFF;
	font-size: 90%;
	background:#267d45;
	transform:skew(-20deg, 0deg);
	width: 160px;
	padding: 7px 20px;
	position: absolute;
	bottom: 0;
	right:-12px;
	transition: background-color 0.8s ease 0s;
}

.bt-dtl a:hover{
	background-color:#ff9c00;
}

.bt-dtl a::after{
  content: '　>';
  color: #ffe611;
	margin: 0 0 0 0;
}	

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

.cnt3-box{
	height: auto;
}
	
#labo .cnt3-1{
	position:relative;
	top:0%;
	bottom:auto;
	left: 0;
	margin: 0 auto 20px auto;

	height:auto;
}
	
#labo .cnt3-2{
	margin: 0 auto 50px auto;
	width:90%;
	position: relative;
	right: auto;
	}

#labo .card-box .card-box-l{
	height: 100%;
	min-height: 250px;
}

#labo .card-box .card-box-r{
	height: 100%;
	min-height: 250px;
	padding: 24px 0px 30px 0px;
}
	
}