@charset "utf-8";

	#mainImage {
		width: 100%;
		margin: 0 0 55px;
		overflow: hidden;
	}
	#mainImage img {
		width: 100%;
	}
	#canvas {
		-moz-transform-origin: 0 0;
		-webkit-transform-origin: 0 0;
		-ms-transform-origin: 0 0;
		transform-origin: 0 0;
	}
	
	#wrapper {
		background: #f9f9f9;
	}
	#copy {
		box-sizing: border-box;
		width: 50%;
		padding: 108px 20px;
		float: left;
		position: relative;
		background: url(../imgs/bg-01.png) 100% 0 repeat;
	}
	#copy .bg {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	#copy .bg01 {
		-webkit-animation: anime1 4s ease infinite;
		animation: anime1 4s ease infinite;
	}
	#copy .bg02 {
		-webkit-animation: anime2 4s ease infinite;
		animation: anime2 4s ease infinite;
	}
	#copy .inner {
		width: 100%;
		max-width: 750px;
		float: right;
		text-align: center;
	}
	
@keyframes anime1 {
	0% { opacity: 0; }
	50% { opacity: 1;}
	100% { opacity: 0;}
}
@keyframes anime2 {
	0% { opacity: 1;}
	50% { opacity: 0; }
	100% { opacity: 1;}
}
@-webkit-keyframes anime1 {
	0% { opacity: 0; }
	50% { opacity: 1;}
	100% { opacity: 0;}
}
@-webkit-keyframes anime2 {
	0% { opacity: 1;}
	50% { opacity: 0; }
	100% { opacity: 1;}
}
	
	#slider {
		box-sizing: border-box;
		width: 50%;
		padding: 80px 20px 0 50px;
		float: left;
		overflow: hidden;
	}
	#slider li {
		width: 200px;
	}
	#slider li .caption {
		display: block;
		margin: 35px 0 0;
		color: #333;
		line-height: 1;
	}
	#slider li .name {
		display: block;
		margin: 0 0 10px;
		color: #d9c879;
		font-size: 14px;
	}
	.bx-wrapper {
		border: none;
		background: transparent;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}	
	#main {
		padding-bottom: 28px;
		position: relative;
		background: url(../imgs/bg-02.png) 50% 0 repeat;
	}
	#main .inner {
		margin: 0 0 50px;
		padding: 40px 0 0 0;
	}
	.obi  {
		width: 1360px;
		margin: 0 auto 70px;
		border-top: 1px solid #d1cdbf;
		border-bottom: 1px solid #d1cdbf;
		padding: 35px 0;
		text-align: center;
	}
	.obi ul {
		width: 100%;
		margin: 0 auto;
	}
	.obi ul li {
		text-align: center;
		margin: 0 30px;
		display: inline-block;
	}
	@media only screen and (max-width:1360px) {
		.obi {
			width: 100%;
		}
	}
	@media only screen and (max-width:1060px) {
		.obi ul li:nth-child(2) {
			margin-bottom: 30px;
		}
	}
	@media only screen and (max-width:640px) {
		.obi ul li {
			text-align: center;
			margin: 0 10px 0;
			display: inline-block;
			margin-bottom: 30px;
		}
		
	}
	#info {
		box-sizing: border-box;
		max-width: 790px;
		border: 4px solid #000;
		padding: 59px 26px 61px;
		position: relative;
		text-align: center;
		margin: 0 auto;
	}
	#info:before {
		content: '';
		display: block;
		border: 1px solid #000;
		position: absolute;
		top: 6px;
		right: 6px;
		bottom: 6px;
		left: 6px;
	}
	#info * {
		position: relative;
	}
	#info .title {
		margin: 0 0 26px;
		padding: 0 0 25px;
	}
	#info .title:after {
		content: '';
		display: block;
		width: 50px;
		height: 1px;
		margin: 0 0 0 -25px;
		position: absolute;
		bottom: 0;
		left: 50%;
		background: #000;
	}
	#info p {
		margin: 0 0 20px;
	}
	#info .cv {
		margin-bottom: 40px;
	}
	
	#sidebar {
		width: 89px;
		border-left: 1px solid #ccc;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		background: #fff;
	}
	#sidebar:after {
		content: url(../imgs/bg-04.png);
		position: absolute;
		right: 32px;
		bottom: 30px;
	}
	
	.banner {
		text-align: center;
	}
	.banner li {
		display: inline-block;
		margin: 0 10px 20px;
	}
	.banner img {
		vertical-align: top;
	}
	
@media only screen and (max-width:1200px) {
	#sidebar {
		display: none;
	}
}
@media only screen and (max-width:800px) {
	#copy {
		width: auto;
		padding: 100px 20px;
		float: none;
	}
	#slider {
		width: auto;
		padding: 50px 20px;
		float: none;
	}
	
	.banner li {
		display: block;
		margin: 0 0 20px;
	}
}
@media only screen and (max-width:640px) {
	#main {
		margin: 0 0 30px;
		padding: 30px 0 0;
		background: none;
	}
	
	#copy {
		padding: 30px 10px;
	}
	#copy .inner {
		float: none;
		text-align: left;
		line-height: 2;
	}
	#copy .sp {
		display: inline;
	}
	#copy .sp+img {
		display: none;
	}
	#slider {
		padding: 30px 30px;
	}
	
	#main .inner {
		margin: 0 0 50px;
		padding: 50px 0 0;
		background: none;
	}
	#info {
		border: 2px solid #000;
		padding: 22px;
	}
	#info:before {
		top: 2px;
		right: 2px;
		bottom: 2px;
		left: 2px;
	}
	
}
	
.infoSp {
	display: none;
}
@media only screen and (max-width:640px) {
.infoSp {
	display: block;
}
.infoPc {
	display: none;
}
}

#info .toAll {
		margin-bottom: 40px;
}