@charset "UTF-8";

/* **************************************************

Name: service_koutsuanzen.css

Description: Setting of grid layout

***************************************************** */
* {
  box-sizing: border-box;
}
.topArea{
	display:flex;
  justify-content: space-between;
  margin-bottom: 2em;
}
.topArea .topTxt{
  width:60%;
}
.topArea .topImg{
	width:38%;
}
.topArea .topImg img{
	width:100%;
}
@media screen and (max-width: 767px) {
  .JS .topArea{
	display:block;
	}
	.JS .topArea .topTxt{
	  width:100%;
    margin-bottom: 1em;
	}
  .JS .topArea .topImg{
	  width:100%;
    text-align: center;
	}
}

.infoArea{
  display:flex;
  margin-top:3em;
  gap:20px;
  font-size:90%;
}
.infoArea div:first-child{
  color:#CC0000;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
	.JS .infoArea{
    margin-top:1em;
	   display:block;
	}
}

.movieArea{
  display:flex;
  flex-wrap: wrap;
  gap:18px;
  margin-top:2em;
}
.movieArea div{
   width: calc((100% - 36px) / 3);
}
.movieArea div p.MOVIE{
  width:100%;
  position: relative;
}
.movieArea div p.MOVIE img{
  width:100%;
}
.movieArea div p.MOVIE:hover { opacity: 0.7;}
.movieArea div p.MOVIE::after {
    content: "";
    position: absolute;
    width: 71px;
    height: 71px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url(/service/images/koutsuanzen/icon_movie_play.svg);
  }
.movieArea dl{
  font-size:90%;
}
.movieArea dl dt{
  font-weight: 700;
  margin-top:1em;
}
.movieArea dl dd{
  margin-top:0.5em;
}
@media screen and (max-width: 767px) {
	.JS .movieArea{
	   display:block;
	}
  .JS .movieArea div{
     width: 100%;
    margin-bottom:2em;
  }
}