@charset "utf-8";

/* www.hokudai.ac.jp/home2016/
 * Style sheet for the HTML 5
 * Last modify 2023/10/12 17:20
 */


/* Base Style
----------------------------------------------------- */
#header {
	height: 560px;
	background: url("../img/bg_maining01.jpg") no-repeat center center;
	-webkit-background-size: cover;
	background-size: cover;
}
	#header #hd_logo {
		top: 150px;
		left: 0;
		width: 100%;
		text-align: center;
	}

#contents {
	width: 100%;
	margin: 0 auto 0;
}

#message {
	margin: 0 auto;
	padding: 40px 0;
	background: url("../img/bg_message01.png") repeat top left;
}
	#message ul,
	#message p:first-child {
		text-align: center;
	}
	#message p {
		width: 960px;
		margin: 1em auto 0;
	}
	#message p {
		text-align: left;
	}
	#message .uline01 {
		text-decoration: underline;
	}
		#message p a {
			color:#00a0e9;
		}
		#message p a:hover {
			color:#eb6100;
		}
	#message ul:first-child {
		width: 865px;
		margin: 6px auto 0;
	}
	#message ul {
		width: 640px;
		margin: 0 auto 30px;
	}
	#message ul:after {
		clear: both;
		content:"";
		display: block;
	}
		#message ul li {
			float: left;
			width: 190px;
			margin: 24px 0 0 35px;
		}
		#message ul li:first-child {
			margin: 24px 0 0 0;
		}

#information {
	width: 960px;
	margin: 0 auto;
	padding: 40px 0;
	text-align: left;
}
	#information:after {
		clear: both;
		content:"";
		display: block;
	}
	#information h2 {
		float: left;
		width: 180px;
	}
	#information #detail {
		float: right;
		width: 742px;
	}
		#information #detail p img {
			vertical-align: middle;
		}
		#information #detail ul {
			margin-bottom: 9px;
		}
		#information #detail li {
			padding: 10px 0 8px 15px;
			border-top: 1px dotted #626262;
		}
		#information #detail li:first-child {
			margin-top: 8px;
			border-top: 1px solid #626262;
			/*padding: 8px 0 8px 15px;
			border-top: none;*/
		}
			#information #detail li .ico01,
			#information #detail li .ico02,
			#information #detail li .ico03,
			#information #detail li .ico04,
			#information #detail li .ico05,
			#information #detail li .ico06,
			#information #detail li .ico07,
			#information #detail li .ico08 {
				display: table-cell;
				width: 225px;
				-webkit-background-size: ;
				background-size: ;
			}
			#information #detail li .ico01 {
				background: url("../common/img/ico_info01.png") no-repeat 100px 1px;
			}
			#information #detail li .ico02 {
				background: url("../common/img/ico_info02.png") no-repeat 100px 1px;
			}
			#information #detail li .ico03 {
				background: url("../common/img/ico_info03.png") no-repeat 100px 1px;
			}
			#information #detail li .ico04 {
				background: url("../common/img/ico_info04.png") no-repeat 100px 1px;
			}
			#information #detail li .ico05 {
				background: url("../common/img/ico_info05.png") no-repeat 100px 1px;
			}
			#information #detail li .ico06 {
				background: url("../common/img/ico_info06.png") no-repeat 100px 1px;
			}
			#information #detail li .ico07 {
				background: url("../common/img/ico_info07.png") no-repeat 100px 1px;
			}
			#information #detail li .ico08 {
				background: url("../common/img/ico_info08.png") no-repeat 100px 1px;
			}
			#information #detail li a {
				display: table-cell;
				padding: 0 0 0 15px;
				background: url("../common/img/ico_arrow01.png") no-repeat left 6px;
			}
				#information #detail .btn01 a:hover img {
					opacity: 0.7;
				}
			#information #detail li a:after {
				display: inline-block;
				position: relative;
				content: "";
				top: 0;
				right: -7px;
				width: 13px;
				height: 13px;
				background: url("../common/img/ico_window01.png") no-repeat right top;
			}
			#information #detail li a.none:after {
				display: none;
			}

#about {
	padding: 50px 0 30px;
	background: url("../img/bg_about01.jpg") no-repeat center center;
	-webkit-background-size: cover;
	background-size: cover;
	text-align: left;
}
	#about h2,
	#about dl {
		width: 960px;
		margin: 0 auto;
	}
	#about h2 {
		margin-bottom: 45px;
		text-align: center;
	}
	#about dl:after {
		clear: both;
		content:"";
		display: block;
	}
	#about dt,
	#about dd {
		float: left;
	}
	#about dt {
		width: 180px;
	}
	#about dd {
		width: 780px;
		padding: 0 0 30px;
	}

#member {
	position: relative;
	overflow: hidden;
	padding: 50px 0 50px;
	background: url("../img/bg_member01.gif") repeat left top;
	text-align: left;
}
#member:before {
	position: absolute;
	display: block;
	content: "";
	width: 150%;
	height: 1px;
	top: 24%;
	left: -25%;
	border-top: 1px solid #c40e36;
	-webkit-transform: rotate(32deg);
	-ms-transform: rotate(32deg);
	-o-transform: rotate(32deg);
	transform: rotate(32deg);
	z-index: 1;
}
#member:after {
	position: absolute;
	display: block;
	content: "";
	width: 150%;
	height: 1px;
	top: 56%;
	left: -25%;
	border-top: 1px solid #c40e36;
	-webkit-transform: rotate(-29deg);
	-ms-transform: rotate(-29deg);
	-o-transform: rotate(-29deg);
	transform: rotate(-29deg);
	z-index: 1;
}
	#member h2 {
		margin-bottom: -30px;
		text-align: center;
	}
	#member h3 {
		position: absolute;
		top: -30px;
	}
	.member_wrap02 h3 {
		right:0;
	}
	#member h4 {
		margin: 0 0 5px;
		font-size: 24px;
	}
	.member_wrap01,
	.member_wrap02 {
		position: relative;
		width: 960px;
		margin: 80px auto 0;
		z-index: 10;
	}
		.member_wrap01 .wrap01,
		.member_wrap02 .wrap01 {
			padding: 15px;
			background: rgba(154, 112, 46, 0.8);
		}
			.member_wrap01 .inner_wrap01,
			.member_wrap02 .inner_wrap01 {
				padding: 30px;
				border: 1px solid #ffffff;
				color: #ffffff;
			}
		.member_wrap01 .wrap01 {
			margin: 0 0 0 165px;
		}
			.member_wrap01 .inner_wrap01 {
				padding-left: 110px;
			}
		.member_wrap02 .wrap01 {
			margin: 0 165px 0 0;
		}
			.member_wrap02 .inner_wrap01 {
				padding-right: 50px;
			}

/* !h(n)eading
---------------------------------------------------------- */


/* Link Style
----------------------------------------------------- */


/* List Style
----------------------------------------------------- */


/*Form Style
----------------------------------------------------- */


/* Line Style
----------------------------------------------------- */


/* Block Style
----------------------------------------------------- */


/* Margin / Padding /Float /Position Style
----------------------------------------------------- */


/* Text Style
----------------------------------------------------- */


/* Image Style
----------------------------------------------------- */


/* Table Style
----------------------------------------------------- */
#member th,
#member td {
	vertical-align: top;
}
#member th {
	width: 5em;
}