@charset "utf-8";
/* CSS Document */

article{padding-top:80px}
article h1{
	display:block;
	padding:0 30px;
	height:260px;
	position:relative
	}

article h1 span{
	text-align:center;
	display:block;
	margin:0 auto;
	background-image:url(../images/ttl/works_ttl.svg);
	display:block;
	width:466px;
	height:82px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
		top:50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	position:absolute;
	}

/* mv */
/****************************************************************/

#mv{
	height:720px;
	background-image:url(../images/mv/works_mv.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position: center center
	}
	
/* box */
/****************************************************************/
	
.top,.btm{padding:0 30px;}
	
.top{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3e3a39+0,3e3a39+50,e5e6e6+50,e5e6e6+100 */
background: #3e3a39; /* Old browsers */
background: -moz-linear-gradient(left, #3e3a39 0%, #3e3a39 50%, #e5e6e6 50%, #e5e6e6 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #3e3a39 0%,#3e3a39 50%,#e5e6e6 50%,#e5e6e6 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #3e3a39 0%,#3e3a39 50%,#e5e6e6 50%,#e5e6e6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e3a39', endColorstr='#e5e6e6',GradientType=1 ); /* IE6-9 */
}
.btm{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e5e6e6+0,e5e6e6+50,3e3a39+50,3e3a39+100 */
background: #e5e6e6; /* Old browsers */
background: -moz-linear-gradient(left, #e5e6e6 0%, #e5e6e6 50%, #3e3a39 50%, #3e3a39 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #e5e6e6 0%,#e5e6e6 50%,#3e3a39 50%,#3e3a39 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #e5e6e6 0%,#e5e6e6 50%,#3e3a39 50%,#3e3a39 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e6e6', endColorstr='#3e3a39',GradientType=1 ); /* IE6-9 */
}

.top .flex div:nth-child(1),
.btm .flex div:nth-child(2){
	color:#FEFEFE;
	}

.flex{
	display:-webkit-box;
	display:-ms-flexbox;
	display: -webkit-flex;
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	-webkit-justify-content:center;
	justify-content:center;
	align-items: center;
	max-width:1280px;
	margin:0 auto;
	width:100%;
	}

.flex div{
	width:50%;
	padding:90px 0 120px;	}

.flex div:nth-child(2n){
	padding:90px 0 120px 100px;
	}
	
.flex div h2{
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-size:40px;
	line-height:100%;
	margin-bottom:40px;
	}

.flex div ul{
	padding:0 0 0 8px;
	}

.flex div li{
	font-size:18px;
	line-height:180%;
	position:relative;
	padding:0 0 0 17px;
 	}

.flex div li:before{
	position:absolute;
	content:"";
	width:13px;
	height:13px;
	top:8px;
	left:0;
	border-radius:50%;
	background-color:#000;
	}

.top .flex div:nth-child(1) li:before,
.btm .flex div:nth-child(2) li:before{
	background-color:#FEFEFE;
	}