@charset "utf-8";
/* CSS Document */
#trailer .toggle span {
    border-bottom: solid 3px #000;
}
#trailer .toggle.active span {
    border-bottom: solid 3px #fff;
}

.trailer {
    padding: 180px 0 200px ;
    background: #fff;
    background-attachment: fixed;
}
.trailer h1{
  max-width: 600px;
	width: 80%;
	text-align: center;
	margin:0 auto 60px;
}
.trailer>div{
	max-width: 1280px;
	width: 80%;
	margin: 0 auto 30px;
	padding:0 0 120px;
}
.trailer-movie-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.trailer-movie {
  width: 31%;
  margin-right: 3%;
  height: 14vw;
  margin-bottom: 15%;
}
.trailer-movie:nth-child(3n) {
  margin-right: 0%;
}
.trailer-movie:last-child {
  margin-right: 0px;
}
.trailer-movie iframe {
  width: 100%;
}
.trailer-text {
  font-size: 16px;
  font-weight: 600;
  padding: 15px 10px 0 10px;
  text-align: center;
  line-height: 1.6;
}

@media screen and (max-width:768px) {
  .trailer{
		padding:70px 0 0;
	}
	.trailer h1 img{
		width:80vw;
	}
	.trailer>div{
		width:80%;
	}
  .trailer-movie-wrap {
    display: block;
  }
  .trailer-movie {
    width: 100%;
    margin-right: 0%;
    height: 100%;
    margin-bottom: 3%;
    display: inline-block;
  }
  .trailer-movie iframe {
    height: 25vh;
  }
  .trailer-text {
    padding: 15px 10px 30px 0px;
  }

}