body {
	background-image : url(../common/bodybg3.png);
}

/*----------COVER----------*/

#cover {
	position : relative;
	width : 1300px;
	height: 550px;
	margin : 50px auto 50px auto;
}

#cover h2 {
	position : absolute;
	display : inline-block;
	margin-bottom : 25px;
	padding  : 17px 20px 23px 35px;
	color : #ffffff;
	background : #00142d;
	font-size : 230%;
	font-weight : 900;
	top : 50px;
	left : 0;
	z-index : 0;
}

#cover h2 font {
	letter-spacing : -15px;
}

#cover ul {
	position : absolute;
	list-style : none;
	left : 0;
	bottom : 100px;
}

#cover ul li {
	margin-bottom : 12px;
	padding : 2px 0 2px 44px;
	color : #ffffff;
	font-size : 130%;
	font-weight : 700;
	background-image : url(check.svg);
	background-repeat : no-repeat;
	background-size : 34px;
	background-position : 0 5px;
	line-height : 1.4em;
}

/*----------WORKS----------*/

dl.cindex {
	overflow : hidden;
	margin-bottom : 30px;
}

dl.cindex dt {
	float : left;
	width : 350px;
	padding-top : 6px;
	font-family : joost, sans-serif;
	font-style : normal;
	font-weight : 300;
	font-size : 450%;
	color : #2d9bf5;
	letter-spacing : 3px;
	line-height : 0.75em;
}

dl.cindex dt span {
	display : block;
	margin-left : 5px;
	font-size : 30%;
	font-family : "source-han-sans-japanese", sans-serif;
	font-weight : 700;
	font-style : normal;
	color : #282828;
	letter-spacing : 0;
}

dl.cindex dd {
	float : right;
	width : 800px;
	line-height : 1.6em;
}

#worksList {
	width : 1250px;
}

ul#works {
	list-style : none;
	overflow : hidden;
	width : 1250px;
}

ul#works li {
	float : left;
	position : relative;
	margin-right : 24px;
}

ul#works li:last-child {
	margin : 0;
}

ul#works li p {
	position : relative;
	width : 293px;
	border-radius : 10px;
}

ul#works li p:after {
	position : absolute;
	content : "";
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	background : -webkit-linear-gradient(top,rgba(0,0,0,0)20%,rgba(0,0,0,0.6)90%);
	border-radius : 10px;
}

.thumb01 {
	width : 293px;
	background-size : cover;
	background-position : center center;
	padding-top : 380px;
}

ul#works li h4 {
	position : absolute;
	width : 250px;
	font-size : 100%;
	font-weight : 600;
	line-height : 1.3em;
	color : #ffffff;
	text-align : center;
	left : 20px;
	bottom : 30px;
	z-index : 1;
}

ul#works li h4 span {
	display : block;
}

ul#works li a:hover p {
	opacity : 0.6;
	filter : opacity(80%);
}

/*----------VARIATION----------*/

ul#variation {
	clear : both;
	list-style : none;
	overflow : hidden;
	width : 1250px;
	margin-bottom : 10px;
}

ul#variation li {
	float : left;
	position : relative;
	width : 605px;
	height : 270px;
	margin : 0 40px 40px 0;
}

ul#variation li:nth-child(2) {
	margin : 0 0 40px 0;
}

ul#variation li:nth-child(3) {
	margin : 0 40px 0 0;
}

ul#variation li:nth-child(4) {
	margin : 0;
}

.thumb02 {
	position : absolute;
	width : 250px;
	background-size : cover;
	background-position : center center;
	padding-top : 250px;
	border-radius : 12px;
	top : 0;
	left : 0;
	z-index : 1;
}

ul#variation li div {
	position : absolute;
    width : 290px !important;
	width /**/: 550px;
	height : 200px !important;
	height /**/: 250px;
	padding : 25px 30px 25px 230px;
	color : #282828;
	background : #d7e1f5;
	border-radius : 12px;
	right : 0;
	bottom : 0;
}

ul#variation li div h4 {
	margin-bottom : 12px;
	color : #0546af;
	font-weight : 700;
	font-size : 130%;
}

ul#variation li div p {
	line-height : 1.5em;
}

ul#variation li a:hover div {
	color : #282828;
	background : #cde1ff;
	text-decoration : none;
}