@charset "utf-8";

/*adstaff*/

@media (min-width: 1107px) {
	.mainVisual .headLine01 :not(span.en) {
		/*text-shadow: 1px 1px 1px #fff;*/
	}
}
@media (max-width: 767px) {
	.mainVisual .headLine01 {
		/*text-shadow: 0px 1px 3px #fff;*/
	}
}

/*------------------------------------------------------------
	animation
------------------------------------------------------------*/

.comNavi li a:after {
	/*bottom:-30px;*/
  /*transition: bottom .1s linear;*/
}
.comNavi li a:hover:after {
  animation-name: iconMoveToBottom;
  animation-duration: .35s;
  animation-timing-function: easeInQuint;
  animation-iteration-count: 1;
  animation-delay: .0s;
  animation-fill-mode:forwards;
}

@keyframes iconMoveToBottom {
  0% {
    bottom:-30px;
  }
  35% {
  	bottom:-38px;
  }
  100% {
  	bottom:-30px;
  }
}

div.mainVisual .headLine01 {
	z-index: 3;
  color: #808080;
}
div.mainVisual .headLine01 .en {

}
div.mainVisual div.shadow {
	position: absolute;
	left: 0;
	top: 0;
	width: 71.2%;
	height: 100%;
	background-color: #E3E3E3;
	content: "";
}

#main  {
	z-index: 2;
}

@media (max-width:767px){
	div.mainVisual div.shadow {
    	height: 210px;
	}


}/*sp*/

/*/adstaff*/



/*------------------------------------------------------------
	movie
	------------------------------------------------------------*/
	.mainVisual {/*padding-bottom: 60px;*/}
	.mainVisual .headLine01 {/* margin-bottom: -122px;*/
  }
	#pagePath {margin-bottom: 160px;
  }

  /* #main .movie{margin-bottom: 245px;
  } */
  /* #main .movie .headLine01{font-size: 6rem;} */
  #main .movie > .movie_item{
    width: 65%; max-width: 800px; margin: auto;
  }
  #main .movie > .movie_item .iframe_wrap{
    /* width: calc((100% - 120px) / 3); */
    position: relative; width: 100%; padding-top: 56.25%;
  }
  #main .movie > .movie_item .iframe_wrap iframe{
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  }
  #main .movie .movie_item a{
    display: block; cursor: pointer;
  }
  #main .movie .movie_item a:hover{
    opacity: .7;
  }
  #main .movie .movie_item a > img{
    margin-bottom: 24px;
  }
  #main .movie .movie_item  h3{
    line-height: 1.53125; letter-spacing: .14em;
  }
  #main .movie .movie_list{
    display: grid; grid-template-columns: repeat(3,1fr); gap: 68px 20px;
  }
  #main .movie .movie_list .movie_item .iframe_wrap{
    /* width: calc((100% - 120px) / 3); */
    position: relative; width: 100%; padding-top: 56.25%;
  }
  #main .movie .movie_list .movie_item .iframe_wrap iframe{
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  }
  #main .movie_recruit{
    margin-top: 160px;
  }

  #main .att{
    font-size: 1.4rem; margin-top: 122px; margin-bottom: 122px; text-align: center;
  }

  #main .athers > div{
    padding: 10px 5px 0;
  }
  #main .athers > div > a{
    position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: #0070C4; margin-bottom: 156px; padding: 68px 16px 60px;
  }
  #main .athers > div > a:hover{
    opacity: .7;
  }
  #main .athers > div > a > p{
    color: #fff; line-height: 1.3125; letter-spacing: .08em;
  }
  #main .athers > div > a > p:nth-child(1){
    font-size: 2.1rem; margin-bottom: 33px;
  }
  #main .athers > div > a > p:nth-child(2){
    font-size: 3.2rem; text-align: center;
  }
  #main .athers > div > a > p:nth-child(2) > span.small{
    display: block; font-size: 2rem;
  }
  #main .athers > div > a > p:nth-child(3){
    position: absolute;top: 30px;right: 26px;max-width: 30px;
  }

  @media all and (max-width: 767px) {
    .comBox{
      padding: 0 40px;
    }
    #main .movie .headLine01{
      font-size: 3rem;
    }
    #main .movie{
      margin-bottom: 80px;
    }
    #main .movie > .movie_item{
      width: 100%;
    }
    #main .movie .movie_item a > img {
      margin-bottom: 14px;
    }
    #main .movie .movie_list{
      display: grid; grid-template-columns: repeat(1,1fr); gap: 40px;
    }
    #main .comBox.athers{
      padding: 0;
    }
    #main .movie_recruit{
      margin: 80px 0 0;
    }
    #main .att{
      font-size: 1.2rem; margin-top: 60px; margin-bottom: 60px;
    }
    #main .athers > div {
      padding: 10px 0 0;
    }
    #main .athers > div > a{
      margin-bottom: 9.87vw;
      padding: 8vw 5.33vw 5.33vw;
    }
    #main .athers > div > a > p:nth-child(1) {
      font-size: 1.4rem;
      margin-bottom: 2.1333vw;
    }
    #main .athers > div > a > p:nth-child(2) > span {
      font-size: 2rem;
      text-align: center;
      letter-spacing: .08em;
    }
    #main .athers > div > a > p:nth-child(2) > span.small {
      font-size: 1.6rem;
      text-align: center;
      letter-spacing: .08em;
    }
    #main .athers > div > a > p:nth-child(3) {
      width: 4vw;
      max-width: 30px;
      top: 4vw;
      right: 4vw;
    }
  }