@charset "UTF-8";
/* CSS Document */
/*ここからコンテンツ*/
.section-top {
  width: 100%;
  max-width: /*1140px*/800px;
  margin: 0 auto 50px;
  text-align: center;
  /*animation: fadeIn 3s ease 0s 1 normal;
   -webkit-animation: fadeIn 3s ease 0s 1 normal;*/
}
.works-age{
  display: flex;
  flex-wrap:wrap;
  justify-content: center;
  margin-bottom: 200px;
}
.works-age_list{
  list-style: none;
  font-size: 5rem;
  margin: 30px;
}
.section-top img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.img-wrapper{
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 31%;
  grid-template-rows: 190px 320px 360px 360px 190px;
  /*grid-template-rows: 13.194444444444445vw 22.22222222222222vw 25vw 25vw 13.194444444444445vw 13.194444444444445vw 30.555555555555557vw;*/
  column-gap: /*30px*/3rem;
  grid-row-gap: /*80px*/6rem;
  padding: 0 100px 200px;
}
.video-item{
  width: 640px;
  height: 360px;
}
.video-item1{
  grid-column: 1/3;
  grid-row: 3;
  line-height: 0;
}
.video-item2{
  grid-column: 2/4;
  grid-row: 4;
  line-height: 0;
}
.video-item4{
  line-height: 0;
}
.video-item3{
grid-row: 7;
line-height: 0;
height: 190px;
width: auto;
  }
.sample1 {
  overflow: hidden;
  position: relative;
}
.sample1 .caption {
  font-size: 120%;
  text-align: center;
  padding-top: 80px;
  color: #fff;
  letter-spacing: 2px;
  font-weight: 600;
}
.sample1 .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0; /* マスクを表示しない*/
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.sample1:hover .mask {
  opacity: 1; /* マスクを表示する*/
}
.sample2 {
  overflow: hidden;
  position: relative;
}
.sample2 .caption {
  font-size: 120%;
  text-align: center;
  color: #fff;
  letter-spacing: 2px;
  font-weight: 600;
  padding-top: 140px;
}
.notitle .caption{
  padding-top: 80px;
}
.exp .caption{
  line-height: 2.6rem;
}
.sample2 .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0; /* マスクを表示しない*/
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.sample2:hover .mask {
  opacity: 1; /* マスクを表示する*/
}
.sample3 {
  /*grid-column: 1 / 2.5;2~4列目までの２列*/
  overflow: hidden;
  position: relative;
}
.sample3 .caption {
  font-size: 120%;
  text-align: center;
  padding-top: 9em;
  color: #fff;
  letter-spacing: 2px;
  font-weight: 600;
}
.sample3 .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0; /* マスクを表示しない*/
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.sample3:hover .mask {
  opacity: 1; /* マスクを表示する*/
}
.ten .mask{
  height: 100%;
}
.title{
  display: none;
}
.video-sp{
  display: none!important;
}

/*
@media (max-width:960px){
.content-wrapper{
   width: 100%;
    max-width: 960px;
  }
.img-wrapper{
  width: 100%;
  max-width: 960px;
  padding: 0 50px;
  grid-template-rows: 190px 320px 320px 320px 190px 190px 320px;
  overflow: hidden;
}
}
*/
@media (max-width: 1200px){
.sns-nav,.section-top h1{
  display: none;
}
.video-item1,.video-item2,.video-item3{
  display: none;
}
.vp-center{
  display: block;
}
.video-sp{
  display: block!important;
}
.video-item-sp{
  display: flex;
  flex-wrap: wrap;
}
/*.video-item{
  width: 100%!important;
  height: auto!important;
}*/
.content-wrapper{
  width: 100%;
  max-width: 1200px;
  padding-top:0px;
  }
.section-top{
    margin: 0 auto 80px;
    padding: 0 15px;
  }
.img-wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
  column-gap: 0px; 
  grid-row-gap: 0px;
}
/*
.section-top iframe{
  max-width: 1200px;
  width: 100%;
  }
  */
.section-top iframe {
    object-fit: cover;
    width: 100%;
    padding: 0;
    margin: 0;
  }
#ten_video{
    height: 60vw;
  }
.sample1,.sample2{
   width: 45vw;
   margin-bottom: 60px;
  overflow: visible;
  }
.sample3{
    margin-bottom: 60px;
    overflow: visible;
  }
.mask{
    display: none;
  }
.title{
  display: inline-block;
  font-size: 1.1rem;
  color: rgba(0,0,0,55%);
  font-weight: 600;
}
.sample3 .title{
    margin-top: 1.8rem;
  }
.exp .title, .somehow .title{
    line-height: 1.4rem;
  }
}
/*@media (max-width: 599px){
.content-wrapper{
   width: 100%;
    max-width: 599px;
    padding-top:50px;
  }
}*/
/*
.img-wrapper{
  width: 50%;
  height: auto;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  /*
  grid-template-columns: 31%;
  grid-template-rows: 190px 320px 360px 360px 190px 190px 440px;
  /*grid-template-rows: 13.194444444444445vw 22.22222222222222vw 25vw 25vw 13.194444444444445vw 13.194444444444445vw 30.555555555555557vw;*/
  /*column-gap: /*30px*//*3rem;*/
  /*grid-row-gap: /*80px*//*6rem;*/
  /*padding: 0 100px;*/
}
/*
.box{
  padding-bottom: 40px;
}