@charset "utf-8";
@import url(reset.css);
@import url(base.css);
@import url(common.css);


/*-------------------------------------------------------------------
	pagetitle
-------------------------------------------------------------------*/

#wrap #pagetitle {
	background:url(../image/activity/activity_bg.jpg) center center no-repeat;
	background-size:cover;
}

#wrap #pagetitle .title {
	width:960px;
	margin:0 auto;
	text-align:left;
	padding:200px 0 80px;
}

#container {
	padding:70px 0 90px;
	background:#E6F7FF;
}


/*-------------------------------------------------------------------
	安全についての取り組み
-------------------------------------------------------------------*/

#activity {
	width:780px;
	padding:70px;
	background:url(../image/common/content_line.png) repeat-x #FFF;
	margin:0 auto;
}

#activity h2 {
	font-size:1.8em;
	font-weight:500;
	text-align:center;
	margin:0 0 100px;
	color:#133785;
}

#activity h2 span {
	padding-bottom:15px;
	border-bottom:3px solid #133785;
	display:inline-block;
}

#activity h3 {
	font-size:1.8em;
	font-weight:500;
	text-align:center;
	margin:0 0 30px;
	line-height:1.2;
	color:#FFF;
}

#activity h3 span {
	padding-bottom:20px;
	border-bottom:4px solid #fff;
	display:inline-block;
}


#activity .relabox {
	position:relative;
	margin:0 0 100px;
	
}

#activity .no01,
#activity .no02,
#activity .no03,
#activity .no04 {
	padding:73px 0 0;
}

#activity .no02,
#activity .no04 {
	text-align:right;
}

/*
#activity .no04 {
	margin:0;
}
*/

#activity .no01 .number,
#activity .no03 .number {
	position:absolute;
	top:0;
	left:-20px;
	z-index:3;
}

#activity .no01 .blue,
#activity .no03 .blue {
	background:#133785;
	width:350px;
	padding:60px 90px;
	z-index:1;
	color:#fff;
	line-height:2.0;
}

#activity .no01 .photo,
#activity .no03 .photo {
	position:absolute;
	top:0;
	right:0;
	z-index:2;
}

#activity .no02 .number,
#activity .no04 .number {
	position:absolute;
	top:0;
	right:-20px;
	z-index:3;
}

#activity .no02 .blue,
#activity .no04 .blue {
	background:#133785;
	width:350px;
	padding:60px 90px;
	z-index:1;
	color:#fff;
	line-height:2.0;
	display:inline-block;
	text-align:left;
}

#activity .no02 .photo,
#activity .no04 .photo {
	position:absolute;
	top:0;
	left:0;
	z-index:2;
}

/* 2018/01/29追加 */

#activity h3.botted {
	text-align:center;
	border-bottom:1px solid #133785;
	height:50px;
	margin:0 0 40px;
	color:#000;
	line-height:1.0;
}

#activity h3.botted span {
	line-height:1.0;
	display:inline-block;
	border-bottom:4px solid #133785;
	padding:0 5px;
	color:#133785;
	height:51px;
}

#activity .same {
	overflow:hidden;
	zoom:1;
}

#activity .same .left {
	float:left;
	width:450px;
}

#activity .same .right {
	float:right;
}

#activity .same .pdflink {
	margin:30px 0 0;
}

#activity .same .pdflink a {
	display:inline-block;
	padding:10px 30px;
	line-height:1.0;
	font-size:1.05em;
	color:#133785;
	border:1px solid #133785;
	background:#E6F7FF;
	text-align:center;
	font-weight:400;
}

#activity .same .pdflink a span {
	display:inline-block;
	background:url(../image/activity/activity_pdf.png) right center no-repeat;
	background-size:auto 100%;
	padding:5px 40px 5px 35px;
	position:relative;
}

#activity .same .pdflink a span:before {
	position:absolute;
	top: 50%;
	left:0;
	content:"";
	background:url(../image/activity/activity_arrow.png) left center no-repeat;
	width:26px;
	height:9px;
	transform: translateY(-50%);
}

#activity .same .pdflink a:hover {
	background:#CAEBF9;
}


/*===============================================
  画面の横幅が980px以下に適用
===============================================*/
@media screen and (max-width: 980px){
	
	/* pagetitle */
	
	#wrap #pagetitle {
		background-size:auto 100%;
	}

	#wrap #pagetitle .title {
		padding:100px 0 50px;
		width:94%;
	}
	
	#container {
		padding:30px 0 50px !important;
	}
	
	#activity {
		width:90%;
		padding:30px 3%;
		background-size:100% auto;
	}

	#activity h2 {
		margin:0 0 50px;
	}

	#activity .relabox {
		margin:0 0 50px;
		overflow:hidden;
	}
	
	#activity .no01,
	#activity .no03 {
		padding-left:20px;
	}

	#activity .no02,
	#activity .no04 {
		padding-right:20px;
	}


	#activity .no01 .number,
	#activity .no03 .number {
		left:0;
	}

	#activity .no01 .blue,
	#activity .no03 .blue {
		width:auto;
		padding:50px 5% 30px;
		
	}

	#activity .no01 .photo,
	#activity .no03 .photo {
		position:static;
		margin:20px 0 0;
		text-align:center;
	}

	#activity .no02 .number,
	#activity .no04 .number {
		right:0;
	}

	#activity .no02 .blue,
	#activity .no04 .blue {
		width:auto;
		padding:50px 5% 30px;
	}

	#activity .no02 .photo,
	#activity .no04 .photo {
		position:static;
		margin:20px 0 0;
		text-align:center;
	}
	
	#activity h3.botted {
		border-bottom:none;
		height:auto;
		margin:0 0 30px;
	}

	#activity h3.botted span {
		height:auto;
		padding:0 5px 10px;
	}

	#activity .same .left {
		float:none;
		width:auto;
		margin:20px 0 0;
	}

	#activity .same .right {
		float:none;
		text-align:center;
	}
	
	#activity .same .pdflink a span {
		background-size:auto;
		padding:5px 35px;
	}

}

/*===============================================
  画面の横幅が768px以下に適用
===============================================*/
@media screen and (max-width: 768px){
	
	
	
	
}

/*===============================================
  画面の横幅が640px以下に適用
===============================================*/
@media screen and (max-width: 640px){
	
	
}