@charset "UTF-8";
/* -----------------------------------------------------------
   ABOUT
------------------------------------------------------------*/
#l-about .article-about{
  width: 80%;
  margin: 0 auto;
}
.l-main > .l-main-inner > section#l-about .l-inner h2.common-ttl{
  margin-bottom: min(64px,4.4vw);
}
#l-about .article-about .article-block{
  width: 90%;
  max-width: 1060px;
  margin: 0 auto min(70px,57vw);
}
#l-about .article-about .article-block h3{
  font-size: clamp(2.0rem , 1.6vw , 2.4rem);
  letter-spacing: 0.12em;
  display: flex;
  margin-bottom: 2.0em;
}
#l-about .article-about .article-block h3:before{
  content: "";
  display: block;
  width: 5px;
  height: clamp(2.0rem , 1.6vw , 2.4rem);
  background-color: #0050FF;
  margin-right: 0.6em;
}
#l-about .article-about .article-block p{
  font-size: clamp(1.4rem , 1.4vw , 1.8rem);
  line-height: 1.8;
}
#l-about .article-about .article-block .yt-movie a{
  display: block;
  width: 100%;
  height: 0;
  padding-top: 56.22%;
  background-size: cover;
  position: relative;
  margin: min(50px,47vw) 0;
  transition: .3s ease;
}
#l-about .article-about .plan .yt-movie a{
  background-image: url(../img/about_yt.png);
}
#l-about .article-about .harrypotter .yt-movie a{
  background-image: url(../img/about_ex_harry1.png);
}
#l-about .article-about .article-block .yt-movie span{
  width: 80px;
  height: 80px;
  background-image: url(../img/icon_play.svg);
  background-size: cover;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-indent: -9999px;
}
#l-about .article-about .article-block .yt-movie a:hover{
  transform:scale(1.05,1.05);
}

#l-about .article-about .shake{
  background-color: #FFF;
  width: 360px;
  height: 360px;
  margin: 0 auto;
}
#l-about .article-about .shake img{
  width: 100%;
  height: 100%;
  background: url(../img/about_shake.png) no-repeat center;
  background-size: 65%;
}
#l-about .harrypotter ul{
  display: flex;
  justify-content: space-between;
  margin-bottom: min(60px,56vw);
}
#l-about .harrypotter li{
  width: 48%;
}
#l-about .harrypotter li img{
  width: 100%;
  height: 0;
  padding-top: 75.04%;
  background-repeat: no-repeat;
  background-position: center;
  transition: .3s ease;
}
#l-about .harrypotter li:nth-child(1) img{
  background-image: url(../img/about_ex_harry2.png) ;
  background-size: cover;
}
#l-about .harrypotter li:nth-child(2) img{
  background-image: url(../img/about_ex_harry3.png) ;
  background-size: cover;
}
#l-about .article-about .article-block a.image-open{
  display: block;
}
#l-about .article-about .article-block a:hover img{
  transform: scale(1.05,1.05);
}

#l-about .akasaka > ul{
  display: flex;
  justify-content: space-between;
  margin: min(60px,56vw) 0;

}
#l-about .akasaka > ul li:first-child{
  width: 66%;
}
#l-about .akasaka > ul li:first-child img{
  width: 100%;
  height: 0;
  padding-top: 74.98%;
  background-repeat: no-repeat;
  background-position: center;
  transition: .3s ease;
  background-image: url(../img/about_plan1.png) ;
  background-size: cover;
}
#l-about .akasaka > ul li:nth-child(2){
  width: 30%;
}
#l-about .akasaka > ul li:nth-child(2) > ul{
  display: flex;
  flex-wrap: wrap;
}
#l-about .akasaka > ul li:nth-child(2) > ul li{
  width: 100%;
}
#l-about .akasaka > ul li:nth-child(2) > ul li img{
  width: 100%;
  height: 0;
  padding-top: 75.07%;
  background-repeat: no-repeat;
  background-position: center;
  transition: .3s ease;
  background-size: cover;
}
#l-about .akasaka > ul li:nth-child(2) > ul li:first-child{
  margin-bottom: 14%;
}
#l-about .akasaka > ul li:nth-child(2) > ul li:first-child img{
  background-image: url(../img/about_plan2.png) ;
}
#l-about .akasaka > ul li:nth-child(2) > ul li:nth-child(2) img{
  background-image: url(../img/about_plan3.png) ;
}

.modaal-video-wrap{
	margin: 0;
}

@media screen and (min-width : 1024px) {
  #l-info .l-inner{
    width: 80%;
    max-width: 1060px;
  }
}
@media screen and (max-width : 1023px) {
  #l-about .article-about{
    width: 100%;
  }
  #l-about .article-about .article-block{
    width: 100%;
    margin: 0 auto 13vw;
  }
  #l-about .article-about .article-block h3{
    font-size: 1.6rem;
    line-height: 1.4;
    margin-bottom: 1.2em;
  }
  #l-about .article-about .article-block p{
    font-size: 1.2rem;
    line-height: 1.8;
  }
  #l-about .article-about .article-block .yt-movie a{
    margin: 7.4vw 0;
  }
  #l-about .article-about .article-block .yt-movie span{
    width: 50px;
    height: 50px;
  }
  #l-about .article-about .shake{
    width: 52%;
    height: auto;
  }
  #l-about .article-about .harrypotter .yt-movie a{
    margin: 7.4vw 0 1.6vw;
  }
}