@charset "UTF-8";
/* CSS Document */
/* breadArea" */
.mainArea {
	background-image: url(../img/works/worksBg.jpg);
}
.works01Bg {
	background-image: url(../img/works/works01Bg.jpg);
}
.works02Bg {
	background-image: url(../img/works/works02Bg.jpg);
}
.works03Bg {
	background-image: url(../img/works/works03Bg.jpg);
}
.works04Bg {
	background-image: url(../img/works/works04Bg.jpg);
}
.worksListBox .listBox ul {
    text-align: left;
}
.worksListBox .listBox ul li a p {
	color: #000;
}
.listBox ul li {
    margin-bottom: 40px;
}
.h3Area {
    border-bottom: 2px dotted #CCC;
    margin-bottom: 70px;
    padding: 30px 0 15px;
}
.h3Area h3 {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}
.h4Area{
max-width: 1200px;
margin: 0 auto;
}
.h4Area h4{
	text-align: left;
	margin: 30px auto 20px;
	padding: 20px;
	font-size: 16px;
	font-weight: bold;
	border-bottom: 2px solid #eee;
}
.movieArea .inner {
    width: 1000px;
  	margin: 0 auto;
}
.movieArea .inner .movie a {
    display: block;
    position: relative;
    text-align: center;
}
.movieArea .inner .movie:hover a img {
    opacity: .3;
    transition: .5s;
}
.modal {
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 500;
}
.modal_bg {
    width: 100%;
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
}
.modal_content {
    position: absolute;
    width: 60%;
    height: 40vw;
    margin: 0 auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.movieBox {
    width: 100%;
    height: auto;
    position: relative;
}
.movieBox video {
    width: 100%;
    height: auto;
}
.movieBox .closeBtn {
    float: right;
    padding-right: .2em;
    color: #FFF;
    font-size: 30px;
}
.video {
  width: 480px;
  margin: 0 auto;
}
.video video {
  width: 480px;
  height: auto;
}

@media screen and (max-width: 768px) {
	.m2p {
		margin-right: 2%!important;
	}
	.h4Area h4 {
	text-align: left;
	margin: 0 auto;
	padding: 15px;
}
  .movieArea .inner {
      width: 100%;
  }
    .video {
      width: 100%;
  }
    .video video {
      width: 100%;
  }

}



