.lity,
.lity_wrap {
  z-index: 9999
}

main {
  width: 100%;
  overflow: hidden;
  position: relative
}

main.isend {
  background: #fff
}

section.page_nav {
  margin: 0 0 10rem 0
}

@media only screen and (max-width: 768px) {
  section.page_nav {
    margin: 0 0 2rem 0
  }
}

section.page_nav ul {
  display: flex;
  justify-content: space-between
}

section.page_nav ul li {
  width: 48%
}

section.page_nav ul li a {
  display: block;
  border: 1px solid #2af260;
  padding: 2rem 0;
  background: #fff;
  text-align: center;
  color: #2af260;
  font-weight: bold;
  font-size: 1.4rem;
  transition: all .3s ease
}

section.page_nav ul li a:hover {
  background: #2af260;
  color: #fff
}

section.page_nav ul li a.b01 {
  color: #e54689;
  border: 1px solid #e54689
}

section.page_nav ul li a.b01:hover {
  background: #e54689;
  color: #fff
}

section.page_nav ul li a.b02 {
  color: #3d75dc;
  border: 1px solid #3d75dc
}

section.page_nav ul li a.b02:hover {
  background: #3d75dc;
  color: #fff
}

.seven_title {
  text-align: center;
  padding: 5rem 0 10rem 0;
  position: relative
}

@media only screen and (max-width: 768px) {
  .seven_title {
    padding: 3rem 0
  }
}

.seven_title .seven_icon {
  width: 300px;
  position: absolute;
  top: 5rem;
  left: 5rem
}

@media only screen and (max-width: 768px) {
  .seven_title .seven_icon {
    width: 100px;
    margin: auto;
    position: static
  }
}

.seven_title p.sub {
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0 0 1rem 0
}

.seven_title .category {
  font-size: 2rem
}

.seven_title h1 {
  font-weight: 500;
  font-size: 3.6rem;
  letter-spacing: .1rem;
  font-feature-settings: "palt";
  margin: 0 0 2rem 0
}

@media only screen and (max-width: 768px) {
  .seven_title h1 {
    font-size: 2rem
  }
}

@media only screen and (max-width: 768px) {
  .seven_title .lead {
    text-align: left;
    padding: 0 8vw
  }

  .seven_title .lead br {
    display: none
  }
}

.movie_block {
  margin: 0 0 10rem 0
}

.movie_block .title {
  text-align: center
}

.movie_block .title h2 {
  text-align: center;
  font-size: 2.4rem;
  margin: 0 0 5rem 0
}

@media only screen and (max-width: 768px) {
  .movie_block .title h2 {
    font-size: 1.6rem;
    margin: 0 0 2rem 0
  }
}

.movie_block .inner {
  max-width: 1200px;
  margin: auto;
  background: #fff;
  padding: 5rem 8vw
}

.movie_block .movie_f_flex {
  display: flex;
  justify-content: space-between;
  margin: 0 0 5rem 0
}

@media only screen and (max-width: 768px) {
  .movie_block .movie_f_flex {
    display: block;
    margin: 0 0 2rem 0
  }
}

.movie_block .movie_f_flex .box {
  width: 48%
}

@media only screen and (max-width: 768px) {
  .movie_block .movie_f_flex .box {
    width: 100%;
    margin: 0 0 2rem 0
  }
}

.movie_block .movie_f_flex .box h3 {
  font-weight: bold;
  font-size: 2rem;
  margin: 0 0 2rem 0
}

@media only screen and (max-width: 768px) {
  .movie_block .movie_f_flex .box h3 {
    font-size: 1.6rem;
    margin: 0 0 1rem 0;
    text-align: center
  }
}

.movie_block .movie_f_flex .box .prof_flex .image {
  margin: 0 0 2rem 0
}

@media only screen and (max-width: 768px) {
  .movie_block .movie_f_flex .box .prof_flex .txt {
    text-align: center
  }
}

.movie_block .movie_f_flex .box .prof_flex .txt .name {
  font-size: 2rem
}

@media only screen and (max-width: 768px) {
  .movie_block .movie_f_flex .box .prof_flex .txt .name {
    font-size: 1.6rem
  }
}

.movie_block .movie_f_flex .box .prof_flex .txt .profile {
  font-size: 1.4rem
}

.movie_block .gen {
  margin: 0 0 2rem 0
}

.movie_block h4 {
  font-weight: bold;
  margin: 0 0 1rem 0
}

.movie_flex {
  display: flex;
  justify-content: space-between
}

@media only screen and (max-width: 768px) {
  .movie_flex {
    display: block
  }
}

.movie_flex .moviebox {
  width: 48%;
  position: relative
}

@media only screen and (max-width: 768px) {
  .movie_flex .moviebox {
    width: 100%;
    margin: 0 0 2rem 0
  }
}

.movie_flex .moviebox a {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  content: "";
  z-index: 3000
}

.movie_flex .moviebox:hover .image {
  opacity: .9
}

.movie_flex .moviebox .play_icon {
  width: 44px;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 55
}

.movie_flex .moviebox h3 {
  font-size: 2rem;
  margin: 0 0 1rem 0;
  font-weight: 500
}

@media only screen and (max-width: 768px) {
  .movie_flex .moviebox h3 {
    font-size: 1.6rem;
    text-align: center
  }
}