/* CSS Document */

.pc {
	display:block;
}
.sp {
	display:none;
}

/* heaer */
.pc.pc_header {
	position: relative;
	height: 63px;
}
.pc.pc_header > a {
    position: absolute;
    left: 50%;
    transform: translateX(-490px);
	}
.single_header_tbl {
    background-color: #09F;
}
.single_header_tbl > div {
	width: 980px;
	margin: 0 auto;
}

/* footer */
.pc #footer {
	margin: 0 auto;
}

/* contentsArea */
#contentsArea {
	background-color: #fff;
	width: 980px;
	margin: 0 auto;
}
 @media screen and (max-width: 639px) {
	 #contentsArea {
	 	width: 100%;
	 }
 }

#mainvisual {
	width: 700px;
	margin: 20px auto 0;
}
#mainvisual img {
	width: 100%;
	height: auto;
}
#mainvisual span {
	text-align:right;
	padding:0.5em 0 0 0;
	display:block;
	font-size:75%;
}

#mainvisual+h2 {
	margin:40px 0;
	text-align:center;
	color:#09F;
}
.phase {
	width:700px;
	margin:0 auto 50px;
}
.phase h3 {
	font-size:100%;
}
.phase h3.title {
	color:#09F;
}
.phase p {
	font-size:100%;
	line-height: 1.5;
}

.phase .photo span {
	font-size:75%;
	display: block;
	margin-top: 4px;
}
.phase .photo span.cr {
	text-align: right;
	font-size:70%;
}

.phase.last ul {
	padding:0;
	margin:0;
	text-align:center;
}
.phase.last li {
	display:inline-block;
	margin:0 20px 0 0;
	text-align:center;
	font-weight:bold;
	border-radius:4px;
	background:#eba12b;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffa84c+0,ff7b0d+100;Orange+3D */
	background: #ffa84c; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffa84c 0%, #ff7b0d 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #ffa84c 0%,#ff7b0d 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #ffa84c 0%,#ff7b0d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 ); /* IE6-9 */
}
.phase.last li:hover {
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}
.phase.last li:last-child {
	margin-right:0;
}
.phase.last li a {
	color:#FFF;
	text-decoration:none;
	padding:16px 30px;
	display:block;
}


.textarea {}
.imgbox {
	width: 275px;
	float: right;
	margin: 0 0 25px 25px;
}
	.imgbox img {
		width: 100%;
		height: auto;
	}

.phase h4 span {
	color: #09F;
}
.exhibit {
	width: 700px;
	margin: 0 auto;
}

 @media screen and (max-width: 639px) {
	 body {
	 margin:0;
	 padding:0;
	}
	 img {
	 width:100%;
	}
	 .pc {
	 display:none;
	}
	 .sp {
	 display:block;
	}
	 #wapper {
	 width:auto;
	}
	 #headerArea {
	 padding:4% 0 4% 5%;
	}
	 #headerArea img {
	 width:60%;
	}

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

	#mainvisual span {
		padding:0.5em 5% 0 0;
	}

	#mainvisual+h2 {
		width:80vw;
		margin:6vw auto;
		font-size: 20px;
		line-height: 1.4;
	}

	.phase h3 {
		margin: 1em 0;
		font-size:16px;
		line-height: 1.4;
	}
	.phase h4 {
		font-size:16px;
		line-height: 1.4;
	}
	 .phase {
	 width:90%;
	 margin-bottom:7%;
	}
	.phase p {
		font-size:14px !important;
		line-height: 1.5;
	}
	.phase ul.column {
		padding:4vw 3vw 4vw 6vw;
	}
	.phase ul {
		padding-left:1em;
	}

	 .phase li {
	 width:100%;
	 margin-bottom:3%;
		list-style:outside disc;
	}
	 .phase li:last-child {
	 margin-bottom:0;
	}
	 .phase li a {
	 display:block !important;
	}
	 .phase.last h4 {
	 margin-bottom:2%;
	}

	.textarea {
		width: 100%;
	}
	.imgbox {
		width: 100%;
		float: none;
		margin: 0 0 25px 0;
	}
	.exhibit {
		width: 90%;
		margin-bottom: 1.5vw;
	}

	.phase .photo span {
		font-size:100%;
	}

	.phase.last li a {
		padding:16px 20px;
	}

}

.toiawase {
	text-align:center;
	font-size:14px;
}

/* sfa_tit */
.sfa_tit {
	text-align: center;
}

/* sfa_img */
.sfa_img {
	max-width: 480px;
	width: 100%;
	margin: 20px auto;
}
.sfa_img a:hover img {
	opacity: 0.75;
}
.sfa_img img {
	width: 100%;
	height: auto;
}