@charset "utf-8";
/*-----------------------------------------------
 * MOVIE
-------------------------------------------------*/
/* ttl */
.page__ttl_en{
	display: block;
	background: url(../img/common/ttl/ttl_movie_en.svg)no-repeat center center / contain;
	width: min(calc(354 / var(--vw-min) * 100vw),354px);
	height:min(calc(152 / var(--vw-min) * 100vw),152px);
	position: relative;
}
.page__ttl_en .ttl_entxt{
	position: absolute;
	right: max(calc(-16 / var(--vw-min)* 100vw), -16px);
	bottom: min(calc(35 / var(--vw-min)* 100vw), 35px);
	background: url(../img/common/ttl/title_entxt_long.svg) no-repeat center center / contain;
	width: min(calc(220 / var(--vw-min)* 100vw), 220px);
	height: min(calc(9 / var(--vw-min)* 100vw), 9px);
}

@media screen and (max-width:767px){ 
	.page__ttl_en{
		width: calc(410 / var(--vw-min) * 100vw);
		height: calc(176 / var(--vw-min) * 100vw);
		margin-bottom: 0;
	}
	.page__ttl_en .ttl_entxt {
		right: calc(0 / var(--vw-min) * 100vw);
		bottom: calc(22 / var(--vw-min) * 100vw);
		width: calc(188 / var(--vw-min) * 100vw);
		height: calc(26 / var(--vw-min) * 100vw);
	}
}
/*-----------------------------------------------
 * movieArea
-------------------------------------------------*/
.movieArea{
	position: relative;
	z-index: 10;
}
.area__inner{
	width: min(calc(1000 / var(--vw-min) * 100vw),1000px);
	margin: 0 auto;
}
@media screen and (max-width:767px){ 
	.movieArea{
		padding-top: calc(120 / var(--vw-min) * 100vw);
	}
	.area__inner{
		width: 100%;
		padding: 0 calc(40 / var(--vw-min) * 100vw) calc(170 / var(--vw-min) * 100vw);
	}
}
/*movieLists*/
.movieLists {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	padding-left: min(calc(8 / var(--vw-min) * 100vw), 8px);
	padding-top: min(calc(8 / var(--vw-min) * 100vw), 8px);
  }
  .movieLists__item {
    width: calc((100% - 48px) / 2);
    margin-bottom: min(calc(48 / var(--vw-min) * 100vw), 48px);
  }
  @media screen and (max-width: 767px) {
	.movieLists {
		padding-left: calc(6 / var(--vw-min) * 100vw);
		padding-top:calc(6 / var(--vw-min) * 100vw);
	}
    .movieLists__item {
      width: 100%;
      margin-bottom: calc(56	 / var(--vw-min) * 100vw);
    }
  }
  /* movieBox */
  .movieBoxWrap {
    display: block;
    width: 100%;
    padding-top: 56.25%;
    position: relative;
  }
  .movieBox::before {
    background: linear-gradient(90deg, #B8E7FF 0%, #50C3FF 50%, #338EE4 100%);
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
    width: 100%;
    display: block;
    z-index: 1;
    opacity: 0.6;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }
  .movieLists__item:hover .movieBox::before {
    opacity: 0;
  }
  .movieBoxWrap::after {
	background: url(../img/common/deco/movei_frame.png) no-repeat center center / contain;
    position: absolute;
    content: "";
    top: max(calc(-8 / var(--vw-min) * 100vw), -8px);
    left: max(calc(-8 / var(--vw-min) * 100vw), -8px);
    margin: auto;
    height: 100%;
    width: 100%;
    display: block;
    z-index: 1;
    pointer-events: none;
  }
  @media screen and (max-width: 767px) {
    .movieBoxWrap::after {
		top: calc(-6 / var(--vw-min) * 100vw);
		left: calc(-6 / var(--vw-min) * 100vw);
    }
  }
  .movieBox{
    overflow: hidden;
  }
  .item_title {
    display: block;
    font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
    line-height: calc(38 / 20);
	line-height: min(calc(30 / var(--vw-min) * 100vw), 30px); /* 187.5% */
	letter-spacing: min(calc(0.64 / var(--vw-min) * 100vw), 0.64px);
    margin-top: min(calc(12 / var(--vw-min) * 100vw), 12px);
    text-align: center;
	color: var(--color-blue);
  }  
  .item_img {
    height: 100%;
    transition: 0.4s ease;
  }
  .item_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  @media screen and (max-width: 767px) {
    .item_title {
      font-size: calc(26 / var(--vw-min) * 100vw);
      margin-top: calc(24 / var(--vw-min) * 100vw);
    }
  }
  .movieBox {
    width: 100%;
    height: 100%;
    transition: 0.3s ease;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-size: 100% auto;
    background-repeat: no-repeat;
  }
  /* play icon */
  .play-icon {
    width: min(calc(64 / var(--vw-min) * 100vw), 64px);
    height: min(calc(64 / var(--vw-min) * 100vw), 64px);
    background: url(../img/common/deco/playbtn.png) no-repeat center center / contain;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transform: scale(1);
    transition: 0.4s ease;
    z-index: 2;
  }
  @media screen and (max-width: 767px) {
    .play-icon {
        width: calc(101 / var(--vw-min) * 100vw);
        height:calc(101 / var(--vw-min) * 100vw);
      }
  }
  .btn_moviePlay {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  /*hover*/
  .movieBoxWrap:hover .item_img {
    transform: scale(1.05);
  }
  .movieBoxWrap:hover .play-icon {
    opacity: 0;
  }
  .movieBox:hover {
    cursor: pointer;
  }


/* hover */
@media screen and (hover:hover) and (pointer: fine){
    .movieLists__item .movieBoxWrap::after{
        transition: all .4s ease;
    }
    .movieLists__item:hover .movieBoxWrap::after{
		top: 0;
		left: 0;
    }
}