#Contents {
  background: #e5f0f2; }

#kv_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  background: #fff;
  z-index: 1; }
  @media screen and (min-width: 769px) {
    #kv_bg {
      height: 68rem; } }
  @media screen and (max-width: 768px) {
    #kv_bg {
      height: 82rem; } }

#bg_line {
  position: absolute;
  top: 0;
  left: 50%;
  overflow: hidden;
  transition: all 1800ms cubic-bezier(0.565, 0.28, 0.02, 1.01);
  transition-timing-function: cubic-bezier(0.565, 0.28, 0.02, 1.01);
  opacity: 0; }
  @media screen and (min-width: 769px) {
    #bg_line {
      background: url("../img/interview/pats_gradation_1.png") center top no-repeat;
      background-size: 100% auto;
      width: 170rem;
      height: 71rem;
      transform: translateX(-150%); } }
  @media screen and (max-width: 768px) {
    #bg_line {
      background: url("../img/interview/pats_gradation_1_sp.png") center top no-repeat;
      background-size: 100% auto;
      width: 100%;
      height: 65rem;
      transform: translateX(150%); } }

#kv_bg.start #bg_line {
  transform: translateX(-50%);
  opacity: 1; }

#kv {
  position: relative;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2;
  /*height: 100vh;*/ }

#kv hgroup {
  position: relative; }
  @media screen and (min-width: 769px) {
    #kv hgroup {
      padding: 7.5rem 0 3rem !important; } }
  @media screen and (max-width: 768px) {
    #kv hgroup {
      padding: 5.5rem 0 3rem !important; } }

#kv hgroup h1 {
  position: relative;
  color: #333333;
  font-family: "Shippori Mincho", serif;
  letter-spacing: 0.00em;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(0, 0, 0, 0);
  font-weight: 600; }
  @media screen and (min-width: 769px) {
    #kv hgroup h1 {
      line-height: 1em;
      font-size: 4rem; } }
  @media screen and (max-width: 768px) {
    #kv hgroup h1 {
      line-height: 1em;
      font-size: 2.2rem; } }

#kv hgroup p {
  position: relative;
  color: #333333;
  letter-spacing: 0.00em;
  font-weight: 500; }
  @media screen and (min-width: 769px) {
    #kv hgroup p {
      line-height: 1.875em;
      font-size: 1.6rem;
      padding-top: 2rem; } }
  @media screen and (max-width: 768px) {
    #kv hgroup p {
      line-height: 2em;
      font-size: 1.5rem;
      padding-top: 1.5rem; } }

#kv.slide_in hgroup,
#kv.slide_in nav {
  transition: ease-out 0.9s all;
  transform: translateX(-3rem);
  opacity: 0; }

#kv.slide_in.active hgroup,
#kv.slide_in.active nav {
  transition: ease-out 0.9s all;
  transform: translateX(0);
  opacity: 1; }

.list_section#se {
  position: relative;
  z-index: 10; }
  @media screen and (min-width: 769px) {
    .list_section#se {
      margin-top: 7rem !important; } }
  @media screen and (max-width: 768px) {
    .list_section#se {
      margin-top: 4rem !important; } }

.list_section#eigyo {
  position: relative;
  z-index: 10; }
  @media screen and (min-width: 769px) {
    .list_section#eigyo {
      margin-top: 10rem !important; } }
  @media screen and (max-width: 768px) {
    .list_section#eigyo {
      margin-top: 5.5rem !important; } }

.list_section {
  transition: ease-out 0.9s all;
  opacity: 0; }

.list_section.active {
  opacity: 1; }

.list_section h2 {
  position: relative;
  color: #333333;
  letter-spacing: 0.00em;
  margin: 0 !important;
  background: rgba(0, 0, 0, 0);
  border-bottom: #333333 1px solid;
  font-weight: 600; }
  @media screen and (min-width: 769px) {
    .list_section h2 {
      line-height: 1em;
      font-size: 2rem;
      padding-bottom: 1.5rem !important; } }
  @media screen and (max-width: 768px) {
    .list_section h2 {
      line-height: 1em;
      font-size: 2rem;
      padding-bottom: 1.5rem !important; } }

section#movie {
  position: relative;
  z-index: 10;
  background: #fff; }
  @media screen and (min-width: 769px) {
    section#movie {
      margin-top: 10rem !important;
      padding-top: 10rem !important;
      padding-bottom: 12rem !important; } }
  @media screen and (max-width: 768px) {
    section#movie {
      margin-top: 5.5rem !important;
      padding-top: 5.5rem !important;
      padding-bottom: 12rem !important; } }

#movie .btn_set {
  position: relative;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important; }
  @media screen and (min-width: 769px) {
    #movie .btn_set {
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      width: 116rem;
      gap: 0rem 1.5rem; } }
  @media screen and (max-width: 768px) {
    #movie .btn_set {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 36rem;
      gap: 2rem; } }

#movie h2 {
  position: relative;
  font-family: "Shippori Mincho", serif;
  color: #333333;
  letter-spacing: 0.00em;
  margin: 0 !important;
  background: rgba(0, 0, 0, 0);
  font-weight: 600; }
  @media screen and (min-width: 769px) {
    #movie h2 {
      line-height: 1em;
      font-size: 3rem; } }
  @media screen and (max-width: 768px) {
    #movie h2 {
      line-height: 1em;
      font-size: 2.2rem; } }

#movie hgroup {
  position: relative;
  width: 100%; }
  @media screen and (min-width: 769px) {
    #movie hgroup {
      padding: 6rem 0 3rem !important; } }
  @media screen and (max-width: 768px) {
    #movie hgroup {
      padding: 3.5rem 0 1rem !important; } }

#movie hgroup p {
  position: relative;
  color: #333333;
  letter-spacing: 0.00em;
  font-weight: 400; }
  @media screen and (min-width: 769px) {
    #movie hgroup p {
      line-height: 1.625em;
      font-size: 1.6rem;
      padding-top: 2rem; } }
  @media screen and (max-width: 768px) {
    #movie hgroup p {
      line-height: 1.6em;
      font-size: 1.5rem;
      padding-top: 1.5rem; } }

#movie h3 {
  position: relative;
  color: #009fcd;
  letter-spacing: 0.00em;
  margin: 0 !important;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-weight: 700; }
  @media screen and (min-width: 769px) {
    #movie h3 {
      line-height: 1em;
      font-size: 2rem;
      padding: 0 0 0 1.6rem !important; } }
  @media screen and (max-width: 768px) {
    #movie h3 {
      line-height: 1em;
      font-size: 2rem;
      padding: 0 0 0 1.6rem !important; } }

#movie h3::before {
  content: "";
  position: relative;
  display: block; }
  @media screen and (min-width: 769px) {
    #movie h3::before {
      background: url("../img/icon_movie_key.png") center center no-repeat;
      background-size: contain;
      margin-right: 0.8rem;
      width: 2.2rem;
      height: 1.8rem;
      transform: translateY(0rem); } }
  @media screen and (max-width: 768px) {
    #movie h3::before {
      background: url("../img/icon_movie_key.png") center center no-repeat;
      background-size: contain;
      margin-right: 0.7rem;
      width: 2.2rem;
      height: 1.8rem;
      transform: translateY(0rem); } }

#movie h3::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 1.8rem;
  transform: translateY(-50%);
  width: 0.4rem;
  background: #009fcd; }

.btn_type_large {
  position: relative;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; }
  @media screen and (min-width: 769px) {
    .btn_type_large {
      width: 100%;
      height: 42rem; } }
  @media screen and (max-width: 768px) {
    .btn_type_large {
      width: 36rem;
      height: 16.6rem; } }

.btn_type_img {
  position: relative;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; }
  @media screen and (min-width: 769px) {
    .btn_type_img {
      width: 57.2rem;
      height: 26.6rem; } }
  @media screen and (max-width: 768px) {
    .btn_type_img {
      width: 36rem;
      height: 16.6rem; } }

.btn_type_img img,
.btn_type_large img {
  position: relative;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: ease-out 1.8s all; }

#movie .btn_type_img,
#movie .btn_type_large {
  opacity: 0; }

#movie.active .btn_type_img,
#movie.active .btn_type_large {
  transition: ease-out 0.9s all;
  opacity: 1; }

#movie.slide_in hgroup,
#movie.slide_in h2 {
  transform: translateX(-3rem);
  opacity: 0; }

#movie.slide_in.active hgroup,
#movie.slide_in.active h2 {
  transition: ease-out 0.9s all;
  transform: translateX(0);
  opacity: 1; }

#movie.slide_in.active a {
  transition-delay: 0.2s; }