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

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

article h1 span{
	text-align:center;
	display:block;
	margin:0 auto;
	background-image:url(../images/ttl/works_ttl.svg);
	display:block;
	background-size:contain;
	background-position:center top;
	background-repeat:no-repeat;
	width:255px;
	height:45px;
	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:350px;
	background-image:url(../images/mv/works_mv.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position: center center
	}
	
/* box */
/****************************************************************/
	
.top,.btm{background-color:#e5e6e6}


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

.flex {
	display:-webkit-box;
	display:-ms-flexbox;
	display: -webkit-flex;
	display:flex;
	flex-direction: column;
	flex-wrap: wrap;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	-webkit-justify-content:space-between;
	justify-content:space-between;
	align-items: center;
	}
.flex div{
	width:100%;
	padding:90px 15px 120px;	}


.flex div h2{
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-size:35px;
	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;
	}

.btm .flex div:nth-child(2){
		-ms-flex-order:1;
	-webkit-order:1;
	order:1;
	}

.btm .flex div:nth-child(1){
		-ms-flex-order:2;
	-webkit-order:2;
	order:2;
	}