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

#cover {
	position : relative;
	width : 100%;
	height : 460px;
	margin-top : 5%;
}

#cover h2 {
	position : absolute;
	display : inline-block;
	padding  : 10px 15px 12px 15px;
	color : #ffffff;
	background : #00142d;
	font-size : 120%;
	font-weight : 900;
	top : 205px;
	left : 0;
	z-index : 100;
}

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

#cover ul {
	position : absolute;
	list-style : none;
	width : 90%;
	left : 5%;
	bottom : 20px;
}

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

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

dl.cindex {
	overflow : hidden;
	margin : 1% 1.5% 7% 1.5%;
}

dl.cindex dt {
	margin-bottom : 4%;
	font-family : joost, sans-serif;
	font-style : normal;
	font-weight : 300;
	font-size : 270%;
	color : #2d9bf5;
	letter-spacing : 2px;
	text-align : center;
}

dl.cindex dt span {
	margin-left : 10px;
	font-size : 40%;
	font-family : "source-han-sans-japanese", sans-serif;
	font-weight : 700;
	font-style : normal;
	vertical-align : 9px;
	color : #282828;
	letter-spacing : 0;
}

dl.cindex dd {
	clear : both;
	line-height : 1.5em;
}

#worksList {
	width : 100%;
}

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

ul#works li {
	float : left;
	position : relative;
	width : 49%;
	margin : 0 2% 2% 0;
}

ul#works li:nth-last-child(2n) {
	margin : 0 0 2% 0;
}

ul#works li p {
	position : relative;
	width : 100%;
	border-radius : 8px;
}

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)0%,rgba(0,0,0,0.5)70%);
	border-radius : 8px;
}

.thumb01 {
	width : 100%;
	background-size : cover;
	background-position : center center;
	padding-top : 250px;
}

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

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

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

ul#variation {
	clear : both;
	list-style : none;
	overflow : hidden;
	width : 100%;
}

ul#variation li {
	position : relative;
	width : 100%;
	margin-bottom : 5%;
	padding-top : 3%;
}

ul#variation li:last-child {
	margin-bottom : 2%;
}

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

ul#variation li div {
	margin-left : 15%;
	padding : 20px 20px 25px 115px;
	color : #282828;
	background : #d7e1f5;
	border-radius : 10px;
}

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

ul#variation li div p {
	font-size : 90%;
	line-height : 1.45em;
}

ul#variation li a {
	color : #282828;
	text-decoration : none;
}