@charset "utf-8";
p,h1,h2,ul,body{
margin:0;
padding:0;
}
body {
font-size: 0.9em;
line-height: 1.5;
font-family: "メイリオ";
background-color: #FF6699;
}
#wrapper {
overflow: hidden;
}
#header {
position: relative;
z-index: 6;
}
#header h1 {
color: #FFCCCC;
padding-top: 5%;
padding-left: 3%;
text-shadow:1px 1px 1px #333;
}
#header p {
color: #FFFFFF;
width: 50%;
padding-left: 3%;
text-shadow:1px 1px 1px #333;
}
#nav {
display: flex;
justify-content: flex-end;
text-align: right;
width: 100%;
list-style-type: none;
position: absolute;
top: 0px;
right: 0px;
z-index: 10;
background: linear-gradient(to bottom,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.5) 1%,rgba(255,255,255,0.5) 100%); /* W3C */
box-shadow: 0px 2px 1px #333;
}
#nav li {
float:left;
}
#nav li a {
color: #006699;
text-decoration: none;
text-shadow:1px 1px 1px #ccc;
display:block;
white-space:nowrap;
padding: 10px;
}
#nav li a:hover {
	color: #6699CC;
}

#mission {
	background: #EEE url(../img/img01.jpg) no-repeat center center;
	background-size:cover;
	text-align: right;
	width: 80%;
	padding: 5% 60% 30% 60%;
	margin-left: -50%;
	z-index: 1;
	transform: rotate(-15deg);
	box-shadow: 0px -1px 2px #211721;
}
#business {
	background: #EEE url(../img/img02.jpg) no-repeat center bottom;
	background-size:cover;
	width: 80%;
	padding: 5% 60% 30% 60%;
	margin-left: -50%;
	margin-top: -30%;
	z-index: 2;
	transform: rotate(10deg);
    box-shadow: 0px -1px 2px #211721;
}
#staff {
	background: #EEE url(../img/img03.jpg) no-repeat center center;
	background-size:cover;
	width: 80%;
	padding: 5% 60% 30% 60%;
	margin-left: -50%;
	margin-top: -30%;
	z-index: 3;
	transform: rotate(-15deg);
    box-shadow: 0px -1px 2px #211721;
}
#works {
	background: #EEE url(../img/img04.jpg) no-repeat center center;
	background-size:cover;
	width: 80%;
	padding: 5% 60% 30% 60%;
	margin-left: -50%;
	margin-top: -30%;
	z-index: 4;
	transform: rotate(10deg);
    box-shadow: 0px -1px 2px #211721;

}
#company {
	background: #EEE url(../img/img05.jpg) no-repeat center center;
	background-size:cover;
	width: 80%;
	padding: 5% 60% 30% 60%;
	margin-left: -50%;
	margin-top: -30%;
	z-index: 5;
	transform: rotate(-15deg);
    box-shadow: 0px -1px 2px #211721;

}
#wrapper .right {
	color: #222;
	text-align: left;
	width: 50%;
	margin-left: 50%;
	margin-top: 10%;
	transform: rotate(15deg);
	text-shadow:1px 1px 1px #ccc;
}
#wrapper .left {
	color: #222;
	width: 50%;
	transform: rotate(-10deg);
	text-shadow:1px 1px 1px #ccc;
}
#wrapper .pagetop {
	text-align: right;
}
#wrapper .pagetop a {
	padding-bottom: 3px;
	border-bottom-style: double;
	border-bottom-color: #990033;
	text-decoration: none;
}
#wrapper .pagetop a:hover {
	border-bottom-color: #CC6666;
}
h2 {
	font-size: 1.5em;
	color: #CCCC99;
	padding-top: 50px;
	text-shadow:1px 1px 3px #333;
}
h3 {
	color: #fff;
	text-shadow:1px 1px 3px #333;
}
a:link {
	color: #990033;
}
a:visited {
	color: #990033;
}
a:hover {
	color: #CC6699;
}
a:active {
	color: #CC6699;
}
#copy {
	color: #FFFFFF;
	text-align: right;
	width: 95%;
	padding-right: 5%;
	z-index: 7;
}