@charset "utf-8";

.problem{
	position: relative;
	top: 0px;
	left: 1px;
	height: 550px;
	width: 958px;
	margin-bottom: 20px;
}

.problem .problem01,
.problem .problem02,
.problem .problem03,
.problem .problem04,
.problem .problem05{
	position: absolute;
	height: 238px;
	width: 216px;
	background:url(/tech/engineering/topics/sanitary_management/images/bg_balloon.png) repeat-x left top;
}

.problem .problem01 p,
.problem .problem02 p,
.problem .problem03 p,
.problem .problem04 p,
.problem .problem05 p{
	text-align: center;
	font-size: 155%;
	font-weight: bold;
	line-height: 1.7;
	margin-top: 65px;
}

.problem .problem01 p,
.problem .problem03 p,
.problem .problem05 p{
	margin-top: 60px;
}
.problem .problem02 p,
.problem .problem04 p{
	margin-top: 80px;
}

.problem .problem01{ top: 42px;	left: 205px;}
.problem .problem02{ top: 42px;	left: 537px;}
.problem .problem03{ top: 268px;	left: 48px;}
.problem .problem04{ top: 268px;	left: 371px;}
.problem .problem05{ top: 268px;	left: 695px;}

.merit_area{
	background: #DAF0FC;
	border-left: solid 1px #A8B6C8;
	border-right: solid 1px #A8B6C8;
	padding: 30px 98px;
	margin-top: 30px;
	margin-bottom: 30px;
}

div#main .merit_area h2{
	margin: 0px auto 30px;
	padding: 15px 0px 11px;
	text-align: center;
	width: 18em;
	font-size: 178.5%;
	font-weight: bold;
	color: #fff;
	line-height: 1;
	background: #0C5BA8;
	border-radius: 26px;
}

.merit_area .merit_box{
	clear: both;
	background: #fff;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.25);
	margin-bottom: 20px;
	padding: 20px 30px;
}

.merit_area .merit_box .merit{
	float: left;
	width: 66px;
	margin-right: 30px;
	display: flex;
	align-items: center; 
	justify-content: center;
}

.merit_area .merit_box .merit p{
	font-size: 370%;
	color: #D7001F;
	line-height: 1;
	border-bottom: solid 3px #D7001F;
	padding-top: 30px;
}
.merit_area .merit_box .merit p span{
	font-size: 30%;
	font-weight: bold;
}

.merit_area .merit_box .txt_area{
	float: left;
	width: 604px;
}
div#main .merit_area .merit_box .txt_area h3{
	margin: 0;
	font-size: 171.5%;
	font-weight: bold;
	color: #193F8C;
	margin-bottom: 10px;
}
.merit_area .merit_box .txt_area .txt{
	float: left;
	width: 359px;
	margin-right: 15px;
	font-size: 114.2%;
}
.merit_area .merit_box .txt_area .img{
	float: left;
	width: 230px;
}

/*×î½ü¤Î°k±íŒg¿ƒ*/
div#body div#main.tech_body .treatise {
	padding: 25px 98px 15px; 
	margin-bottom: 0px;
	background-color: #F9F6F1;
	border: none;
	border-left: solid 1px #A8B6C8;
	border-right: solid 1px #A8B6C8;
}
div#body div#main.tech_body .treatise h3{
	position: relative;
	margin: 0 0 15px;
	padding: 0;
	background: none;
	text-align: center;
	font-size: 130%;
	font-weight: bold;
	color: #1B408C;
}

div#body div#main.tech_body .treatise h3:before {
	content: '';
	position: absolute;
	bottom: -1px;
	display: inline-block;
	width: 18.5%;
	height: 3px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #1B408C;
}

div#body div#main.tech_body .treatise ul{
	font-size: 100%;
}

.italic{
	font-style: italic;
}


/*¥¢¥Ë¥á©`¥·¥ç¥ó*/
@keyframes righttoleft {
  0% {
	opacity: 0;
	transform: translateX(50px);
	width:910px ;
	overflow: hidden;
  }
  100% {
	opacity: 1;
	transform: translateX(0);
	width:960px;
	overflow: hidden;
  }
}
#main_visual {
  animation: righttoleft 1.5s 1;
}


@keyframes problem {
  100% {
    opacity: 1;
  }
}
.problem01{opacity: 0;  animation: problem 0.8s ease 1.5s 1 forwards;}
.problem02{opacity: 0;  animation: problem 0.8s ease 3s 1 forwards;}
.problem03{opacity: 0;  animation: problem 0.8s ease 4.5s 1 forwards;}
.problem04{opacity: 0;  animation: problem 0.8s ease 6s 1 forwards;}
.problem05{opacity: 0;  animation: problem 0.8s ease 7.5s 1 forwards;}

.merit_box{
	position: relative;
	left: 50px;
	opacity: 0;
}

.merit_box#one,
.merit_box#two,
.merit_box#three{
	position: relative;
	width: 700px;
}


/**
		=Clearfix
---------------------------------------------------------- */
*:after {
  display:block;
  clear:both;} /* ¤³¤ÎÓ›Êö¤Ï¹Ì¶¨¤Ç¤¹ */

.clearfix,
.merit_box,
.txt_area{zoom:1;} /* clearfix IE6, 7 */

.clearfix:after,
.merit_box:after,
.txt_area:after {content:"";}

/* End_clearfix */



@media print {
.problem{
	background: url(/tech/engineering/topics/sanitary_management/images/bg_problem_print.jpg) no-repeat left top;
}
#main_visual {
	display: none;
}	
}