@charset "utf-8";
@import url(cmn.css);
@import url(base.css);


/* ==========================================================================
	CONTENTS
	========================================================================== */

.main-movie {
  position: relative;
  background-color: #000;
}
.main-movie ul {
  position: absolute;
  bottom: 5%;
  left: 50%;
  width: 800px;
  margin-left: -400px;
}
.main-movie ul li {
  width: 45%;
}
.main-movie ul li a {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.8rem;
  text-align: center;
  padding: 20px 0;
}
.main-movie ul li.gifu a {
  background-color: #b4d100;
    background-size: 200% 100%;	
    background-image: -webkit-linear-gradient(left, transparent 50%, rgba(206, 229, 60, 1) 50%);	
    background-image: linear-gradient(to right, transparent 50%, rgba(206, 229, 60, 1) 50%);
    -webkit-transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
    transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
}
.main-movie ul li.gifu a:hover {
  background-color: #cee53c;
  background-position: -100% 100%;
}

.main-movie ul li.kani a {
  background-color: #ff7e00;
}
.video-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}
.video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}




/* ==========================================================================
	PC 1025px -
	========================================================================== */

@media screen and (min-width: 1025px){


}


/* ==========================================================================
	TABLET - 1024px
	========================================================================== */

@media screen and (max-width:1024px){

.main-movie ul {
  width: 80%;
  margin-left: -40%;
}
.main-movie ul li a {
  font-size: 1.6rem;
}

}

/* ==========================================================================
	SP - 640px
	========================================================================== */

@media screen and (max-width: 640px) {

.main-movie ul {
  width: 90%;
  margin-left: -45%;
}
.main-movie ul li a {
  font-size: 1.4rem;
}

}