@charset "UTF-8";

.wrapper-animations-top-banner {
  position: relative;
  overflow: hidden;
  @media screen and (max-width: 767px) {
    overflow: hidden;
	}
}

.wrapper-animations-top-banner .swiper-slide img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.banner-top-container {
    width: 100%;
    height: 100vh;
    position: relative;
}

@keyframes slideUp {
    from {
      bottom: -50rem; 
      left: -45rem;
      z-index: -1;
    }
    to {
      bottom: 0.9rem; 
      left: 0;
      z-index: 777;
    }
}

@keyframes slideUpSP {
  from {
    bottom: -59rem;
    left: -45rem;
    z-index: -1;
    opacity:0;
  }
  to {
    bottom: -17.1rem;
    left: 0;
    z-index: 777;
    opacity:1;
  }
}
.text-animation-container {
    position: absolute;
    bottom: 0.9rem;
    left: 0;
    width: 140rem;
    height: 78rem;
    animation: slideUp 0.8s ease-out forwards;
    z-index: 777;
    @media screen and (max-width: 1399px) {
      width: 115rem;
      height: 63rem;
    }
    @media screen and (max-width: 767px) {
      animation: slideUpSP 2s ease-out forwards;
      width: 127rem;
      height: 75rem;
    }
}

.wrapper-animation-sp-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.text-animation-container-sp {
  position: relative;
  height: 100vh;
  z-index: 999;
  overflow: hidden;
}

.text-animation01, .text-animation02, .text-animation03 {
  position: absolute;
  opacity: 0;
  /* 初期状態の left は inline style か CSS で設定済みなのでアニメーション内で初期値を上書きしない */
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  animation-duration: 0.8s;
}

.text-animation01 {
  left: -100%;
  top: 54.5%;
  width: 20.6rem;
  animation-name: slideIn01;
  animation-delay: 0s;
}

.text-animation02 {
  left: -100%;
  top: 63%;
  width: 24.9rem;
  animation-name: slideIn02;
  animation-delay: 0.5s;
}

.text-animation03 {
  left: -100%;
  top: 73%;
  width: 38rem;
  animation-name: slideIn03;
  animation-delay: 1s;
}

@keyframes slideIn01 {
  0% {
    opacity: 0;
    /* left は設定済みなので変えない */
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    left: -2%;
  }
}

@keyframes slideIn02 {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    left: -3%;
  }
}

@keyframes slideIn03 {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    left: -10%;
  }
}


.arrow-go-down {
  font-size: 2rem;
  color: white;
  position: absolute;
  bottom: 1rem;
  width: 13rem;
  height: 13rem;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 999;
  font-family: Jost;
  background: #3278D6;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-style: italic;
  @media screen and (max-width: 767px) {
      font-size: 1.2rem;
      width: 8rem;
      height: 8rem;
  }
}

.arrow-go-down p {
  position: relative;
}

.arrow-go-down p::after {
  content: "";
  position: absolute;
  bottom: -4.5rem;
  left: 0;
  right: 0;
  margin: auto;
  background: url(../img/home/svg-arrow-white.svg) no-repeat;
  transform: rotate(90deg) translateY(15px);
  width: 3rem;
  height: 4rem;
  background-size: 100%;
}

@media screen and (max-width: 767px) {
  .arrow-go-down p::after {
    bottom: -2.5rem;
    transform: rotate(90deg) translateY(2px) scale(0.6);
    width: 4rem;
    height: 2rem;
  }
}

.introduction-home {
  padding-top: 9.4rem;
  position: relative;
  height: 90rem;
  z-index: 1;
  @media screen and (max-width: 767px) {
    padding-top: 3.5rem;
    height: inherit;
    margin-top: -0.2rem;
	}
}

.triangle-bg {
  position: absolute;
  width: 100%;
  height: 83rem;
  background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="1399.622" height="609.999" viewBox="0 0 1399.622 609.999"><defs><linearGradient id="gradient" x1="0.666" y1="0.034" x2="0.031" y2="0.625" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="%232c7eed"/><stop offset="1" stop-color="%2360baff"/></linearGradient></defs><path d="M-4266-13175v610l1399.622-496.978V-13175Z" transform="translate(4266 13174.999)" fill="url(%23gradient)"/></svg>');
  background-size: cover;
  background-repeat: no-repeat;
  top: 0;
  z-index: -1;
  @media screen and (max-width: 767px) {
    height: 61rem;
	}
}

.introduction-top-flex-title-container {
  display: flex;
  align-items: baseline;
  gap: 3.6rem;
  @media screen and (max-width: 767px) {
    gap: 1.5rem;
	}
}

.introduction-big-en-title {
  font-family: Jost;
  font-weight: 500;
  font-style: italic;
  font-size: 8.2rem;
  letter-spacing: 0.06em;
  line-height: 21.6rem;
  text-align: left;
  color: #fff;
  position: relative;
  @media screen and (max-width: 767px) {
    font-size: 2.5rem;
    line-height: 3.6rem;
	}
}

.introduction-big-en-title::before {
  content: "";
  position: absolute;
  background-color: #3278D6;
  width: 12.7rem;
  height: 12.7rem;
  border-radius: 50%;
  top: -2rem;
  left: -5.5rem;
  z-index: -1;
  bottom: 0;
  margin: auto;
}

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

  .introduction-big-en-title::before {
    width: 3.7rem;
    height: 3.7rem;
    top: 0rem;
    left: -1.2rem;
  }
	
}

.introduction-big-jp-title {
  font-family: "Noto Sans JP";
  font-weight: bold;
  font-size: 2.8rem;
  letter-spacing: 0.06em;
  /* line-height: 28px; */
  text-align: left;
  color: #fff;
  @media screen and (max-width: 767px) {
    font-size: 1.8rem;
	} 
}

.movies-home {
  position: relative;
  @media screen and (max-width: 767px) {
    margin-top: 9rem;
	}
}

.movies-home::before {
  content: "";
  position: absolute;
  top: 0;
  right: -18rem;
  margin: auto;
  background: url(../img/home/movie-background.svg) no-repeat;
  background-size: 100%;
  width: 171.2rem;
  height: 116.2rem;
  transform: translateX(-6.3rem) translateY(-6rem);
}

@media screen and (max-width: 767px) {
  .movies-home::before {
    background: url(../img/home/movie-background.svg) no-repeat;
    background-size: 100%;
    width: 78.2rem;
  }
}

.movies-home .introduction-big-en-title {
  color: #3278D6;
}

.movies-home .introduction-big-en-title span {
  color: #2a67b7;
  @media screen and (max-width: 767px) {
    color: #3278D6;
	}
}

.movies-home .introduction-big-jp-title {
  color: #3278D6;
}

.movies-home .introduction-big-en-title::before {
  background-color: #60BAFF;
}

.flex-container-introduction-box {
  display: flex;
  margin-top: 4rem;
  @media screen and (max-width: 767px) {
    flex-direction: column;
	}
}

.flex-container-introduction-box .box-flex1 {
  margin-right: 4.9rem;
  margin-left: 11rem;
  display: flex;
  justify-content: flex-end;
  height: 50.6rem;
  align-items: flex-end;
  @media screen and (max-width: 767px) {
    display: inherit;
    height: 15rem;
    align-items: unset;
    justify-content: unset;
    margin-right: 0.9rem;
	}
}

.box-flex1 {
  position: relative;
}

.box-inside-arrow-container {
  transition: 0.4s;
  @media screen and (max-width: 767px) {
    width: 3rem;
	}
}

.box-flex1:hover .box-inside-arrow-container {
  transform: translateX(1rem);
}

.box-flex2 {
  position: relative;
}

.box-flex2:hover .box-inside-arrow-container {
  transform: translateX(1rem);
}

.box-flex3 {
  position: relative;
}

.box-flex3:hover .box-inside-arrow-container {
  transform: translateX(1rem);
}

.flex-container-introduction-box .box-flex2 {
  margin-right: 19rem;
  margin-left: 0rem;
  display: flex;
  justify-content: flex-start;
  @media screen and (max-width: 767px) {
    margin-left: 13rem;
    margin-right: 0rem;
  }
}

.flex-container-introduction-box .box-flex3 {
  display: flex;
  align-items: center;
  @media screen and (max-width: 767px) {
    margin-left: 4rem;
    margin-right: -3rem;
  }
}

.blue-box-about {
  border-radius: 0.8rem;
  background: #3278d6;
  opacity: 0.85;
  /* padding-top: 9.1rem;
  padding-bottom: 7.7rem; */
  width: 25.8rem;
  height: 25.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  @media screen and (max-width: 767px) {
    width: 15.8rem;
    height: 11.8rem;
	}
}

.text-and-arrow {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
  @media screen and (max-width: 767px) {
    gap: 1rem;
	}
}

.box-inside-text {
  font-family: "Noto Sans JP";
  font-weight: bold;
  font-size: 2.4rem;
  letter-spacing: 0.1em;
  /* line-height: 40px; */
  text-align: center;
  color: #fff;
  line-height: 3.3rem;
  @media screen and (max-width: 767px) {
    line-height: 1.8rem;
    font-size: 1.4rem;
	}
}

.white-box-about {
  border-radius: 0.8rem;
  background: #fff;
  opacity: 0.75;
  /* padding-top: 6.6rem;
  padding-bottom: 8.6rem; */
  width: 25.8rem;
  height: 25.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  @media screen and (max-width: 767px) {
    height: 12.8rem;
    margin-top: 1rem;
	}
}

.white-box-about .box-inside-text {
  color: #255CA6;
}

.white-blue-box-about {
  border-radius: 0.8rem;
  background: #3278d6;
  opacity: 0.75;
  /* padding-top: 6.6rem;
  padding-bottom: 8.6rem; */
  width: 25.8rem;
  height: 25.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  @media screen and (max-width: 767px) {
    width: 15.3rem;
    height: 12.8rem;
    margin-top: 3.5rem;
    margin-left: 11rem;
	} 
}

.box-flex1 .absolute-img-container-about {
  position: absolute;
  top: 1rem;
  left: -20.6rem;
  width: 38.9rem;
  height: 38.9rem;
  z-index: -1;
  @media screen and (max-width: 767px) {
    left: -12rem;
    width: 14.9rem;
    height: 15.9rem;
    top: -1rem;
	} 
}

.box-flex2 .absolute-img-container-about {
  position: absolute;
  top: 16rem;
  left: 9.4rem;
  width: 30rem;
  height: 30rem;
  z-index: -1;
  @media screen and (max-width: 767px) {
    top: 0rem;
    width: 14.9rem;
    height: 15.9rem;
    left: -12.6rem;
	}
}

.box-flex3 .absolute-img-container-about {
  position: absolute;
  top: -19rem;
  left: 5.4rem;
  width: 38.9rem;
  height: 38.9rem;
  z-index: -1;
  @media screen and (max-width: 767px) {
    width: 14.9rem;
    height: 15.9rem;
    left: -1rem;
    top: 2.4rem;
	}
}

.about-absolute-text-blue {
  font-family: Jost;
  font-weight: 500;
  font-size: 3.6rem;
  letter-spacing: 0.1em;
  /* line-height: 50px; */
  text-align: left;
  color: #255CA6;
  position: absolute;
  bottom: 14rem;
  left: 0.2rem;
  @media screen and (max-width: 767px) {
    font-size: 1.1rem;
    bottom: 1rem;
    left: 1.4rem;
	}
}

.about-absolute-text-white {
  font-family: Jost;
  font-weight: 500;
  font-size: 3.6rem;
  letter-spacing: 0.1em;
  /* line-height: 50px; */
  text-align: left;
  color: white;
  position: absolute;
  top: 14rem;
  left: -14.8rem;
  width: 38rem;
  @media screen and (max-width: 767px) {
    font-size: 1.1rem;
    left: 2rem;
    top: 9.5rem;
    }
}

.about-absolute-text-blue-white {
  font-family: Jost;
  font-weight: 500;
  font-size: 3.6rem;
  letter-spacing: 0.1em;
  /* line-height: 50px; */
  text-align: left;
  color: #255CA6;
  position: absolute;
  top: 0rem;
  left: -8rem;
  width: 24rem;
  @media screen and (max-width: 767px) {
    font-size: 1.1rem;
    left: 13rem;
    color: white;
    top: 14rem;
	}
}

.movie-section-container {
  width: 100%;
  margin-top: 3rem;
  margin-bottom: 22.6rem;
  @media screen and (max-width: 767px) {
    margin-bottom: 12rem;
    margin-top: 6rem;
	}
}

.movies-video-container {
  position: relative;
  width: 58.4rem;
  margin: 0 auto;
  @media screen and (max-width: 767px) {
    width: 100%;
	}
}

.movies-video-container video{
  width: 64.4rem;
  margin: 0 auto;
  @media screen and (max-width: 767px) {
    width: 100%;
	}
}

.button-container-absolute {
  position: absolute;
  bottom: 0;
  right: -23rem;
  width: 14.6rem;
  height: 14.6rem;
  border-radius: 50%;
  background-color: #3278D6;
  display: flex;
  align-items: center;
  justify-content: center;
  @media screen and (max-width: 767px) {
    right: 0;
    left: 0;
    margin: auto;
    width: 7.6rem;
    height: 7.6rem;
    bottom: -9rem;
	}
}

.button-container-absolute:hover .svg-arrow-container {
  transform: translateX(1rem);
}

.text-and-arrow-button {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  @media screen and (max-width: 767px) {
    gap: 0.5rem;
	}
}

.text-and-arrow-button:hover .svg-arrow-container {
  transform: translateX(1rem);
}

.text-button-abs {
  font-family: "Noto Sans JP";
  font-weight: bold;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  /* line-height: 25px; */
  text-align: center;
  color: #fff;
  margin-top: 1rem;
  @media screen and (max-width: 767px) {
    font-size: 1.1rem;
    margin-top: 0.5rem;
	}
}

.svg-arrow-container {
  width: 3.2rem;
  transition: 0.4s;
  @media screen and (max-width: 767px) {
    width: 2.5rem;
	}
}

@media screen and (max-width: 767px ) {
  .image-message-button-container .text-button-abs {
    font-size: 1rem;
  }
}


.marquee-slider {
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  position: relative;
}

.marquee-slider .swiper-wrapper {
  display: flex;
  transition-timing-function: linear;
}

.marquee-slider .swiper-slide {
  width: auto;
  flex-shrink: 0;
  transform: scale(1.2);
  clip-path: polygon(0% 0%, 85% 0%, 100% 100%, 16% 100%);
  margin-right: 2.5rem;
  @media screen and (max-width: 767px) {
    margin-right: 1rem;
	}
}

.marquee-slider img {
  width: 48rem;
  display: block;
  height: 20rem;
  object-fit: cover;
  @media screen and (max-width: 767px) {
    width: 14rem;
    height: 8rem;
	}
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.marquee-track {
  display: flex;
  width: 200%;
  animation: marquee 25s linear infinite; 
}

.marquee-slider-right {
  margin-top: 1.5rem;
}

.marquee-slider-right .marquee-track {
  animation: marquee-right 25s linear infinite;
}

@keyframes marquee-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}


.message-home {
  padding-top: 15rem;
  padding-bottom: 30rem;
  position: relative;
  @media screen and (min-width: 1520px) {
    padding-top: 23rem;
    padding-bottom: 40rem;
  }
  @media screen and (max-width: 767px) {
    padding-top: 6rem;
    padding-bottom: 6rem;
	}
}

.message-home::before {
  position: absolute;
  content: "";
  background: url(../img/home/message-background.png) no-repeat;
  background-size: 100%;
  width: 101%;
  height: 191.8rem;
  top: -31rem;
  left: 0;
  margin: auto;
  z-index: -1;
}

@media screen and (min-width: 1520px) {
	.message-home::before {
    height: 235.8rem;
    top: -41rem;
  }
}

@media screen and (max-width: 767px) {
  .message-home::before {
    background: url(../img/home/message-background-sp.png) no-repeat;
    background-size: 100%;
    width: 100%;
    height: 86rem;
    top: 0;
    left: 0;
  }
	
}

.message-home .introduction-big-en-title::before {
  background-color: #FFFFFF;
  opacity: 0.7;
  @media screen and (max-width: 767px) {
    background-color: #ececec;
	}
}

.message-home .introduction-top-flex-title-container {
  gap: 1.5rem;
  flex-direction: column;
  @media screen and (max-width: 767px) {
    flex-direction: unset;
	}
}

.message-home .introduction-big-en-title {
  color: #3278D6;
  z-index: 776;
  line-height: unset;
}

.message-home .introduction-big-jp-title {
  color: #3278D6;
  z-index: 776;
}

.movie-box-container {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.white-container-box {
  background-color: #ffffffe3;
  padding-top: 9rem;
  padding-left: 16.3rem;
  border-radius: 8px 0 0 8px;
  padding-bottom: 9.2rem;
  /* margin-right: -36rem; */
  /* padding-right: 36rem; */
  /* margin-left: 23rem; */
  width: 92rem;
  position: relative;
  @media screen and (max-width: 767px) {
    padding-top: 2rem;
    padding-left: 1rem;
    padding-bottom: 1rem;
    width: 100%;
    background: white;
    border-radius: 0.8rem;
    margin-top: 2rem;
	}
}

.box-message-titles {
  font-family: "Noto Sans JP";
  font-weight: bold;
  font-size: 2.4rem;
  letter-spacing: 0.06em;
  line-height: 4rem;
  text-align: left;
  color: #255ca6;
  margin-bottom: 2.2rem;
  max-width: 57.7rem;
  @media screen and (max-width: 767px) {
    font-size: 2rem;
    line-height: 160%;
    margin: 1rem auto 2rem;
    max-width: 90%;
	}
}

.box-message-text {
  font-family: "Noto Sans JP";
  font-weight: normal;
  font-size: 1.6rem;
  letter-spacing: 0.03em;
  line-height: 3.5rem;
  text-align: left;
  color: #255ca6;
  margin-bottom: 2.1rem;
  max-width: 57.7rem;
  @media screen and (max-width: 767px) {
    font-size: 1.3rem;
    line-height: 2rem;
    max-width: 90%;
    margin: 0 auto 1rem;
	}
}

.box-message-name {
  font-family: "Noto Sans JP";
  font-weight: normal;
  font-size: 1.6rem;
  letter-spacing: 0.03em;
  /* line-height: 3.5px; */
  text-align: right;
  color: #255ca6;
  max-width: 57.7rem;
  @media screen and (max-width: 767px) {
    font-size: 1.4rem;
    width:93%;
    line-height:150%;
	}
}

.box-message-name span{
  font-size: 1.8rem;
  @media screen and (max-width: 767px) {
    font-size: 1.6rem;
	}
}

.image-message-button-container {
  /* margin-top: -36rem; */
  display: flex;
  gap: 8.4rem;
  align-items: flex-end;
  position: absolute;
  bottom: -6rem;
  left: -24rem;
  @media screen and (max-width: 767px) {
    position: inherit;
    gap: 3rem;
    left: 2rem;
    bottom: 1rem;
    align-items: center;
	}
}

.image-message-container {
  width: 35rem;
  @media screen and (max-width: 767px) {
    width: 14rem;
	}
}

.message-home .text-and-arrow-button {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  width: 14.6rem;
  height: 14.6rem;
  border-radius: 50%;
  background-color: #3278D6;
  justify-content: center;
  @media screen and (max-width: 767px) {
    width: 9.6rem;
    height: 9.6rem;
    gap: 0.8rem;
	}
}


.introduction-top-flex-title-container-flexwrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.buton-ichiran-container {
  display: flex;
  gap: 1.8rem;
  margin-bottom: 1.5rem;
  transition: 0.3s ease-in-out;
  align-items: center;
  @media screen and (max-width: 767px) {
    gap: 0.4rem;
    margin-bottom: 0;
    justify-content: center;
    align-items: center;
	}
}

.ichiran-arrow-container {
  transition: 0.3s ease-in-out;
  width: 3.2rem;
  height: 0.5rem;
  @media screen and (max-width: 767px) {
    width: 2rem;
    display: flex;
	}
}

.buton-ichiran-container:hover .ichiran-arrow-container {
  transform: translateX(1rem);
}

.ichiran-text {
  font-family: "Noto Sans JP";
  font-weight: bold;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  /* line-height: 25px; */
  text-align: center;
  color: #255ca6;
  @media screen and (max-width: 767px) {
    font-size: 1.4rem;
	}
}

.news-home {
  margin-top: 5rem;
  margin-bottom: 10.8rem;
  @media screen and (max-width: 767px) {
    margin-top: 1rem;
    margin-bottom: 4rem;
	}
}

.news-home .introduction-big-en-title {
  color: #3278D6;
  line-height: inherit;
}

.news-home .introduction-big-jp-title {
  color: #255CA6;
}

.news-home .introduction-big-en-title::before {
  background-color: #D6EDFF;
  top: 0;
}

.news-home .introduction-top-flex-title-container {
  gap: 10rem;
  @media screen and (max-width: 767px) {
    gap: 2rem;
	}
}

.article-home-container {
  margin-top: 9.9rem;
  @media screen and (max-width: 767px) {
    margin-top: 4rem;
	}
}

@media screen and (max-width: 767px) {
	.sp-on-flex-container {
		display: flex;
		gap: 2rem;
		margin-bottom: 0.5rem;
    align-items: center;
	}	
}

.list-detail {
  display: none;
}

.common-list.article li a {
  display: flex;
  align-items: baseline;
  padding-bottom: 2.2rem;
  border-bottom: 2px solid #255CA6;
  margin-bottom: 2.9rem;
  align-items: center;
  @media screen and (max-width: 767px) {
    flex-direction: column;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    align-items: flex-start;
	}
}

.common-list.article li a .list-date{
  font-family: "Noto Sans JP";
  font-weight: normal;
  font-size: 1.6rem;
  letter-spacing: 0.03em;
  /* line-height: 35px; */
  text-align: left;
  color: #255ca6;
  margin-right: 1.9rem;
  @media screen and (max-width: 767px) {
    margin-right: 0;
    font-size: 1.4rem;
	}
}

.common-list.article li a .list-category{
  font-family: "Noto Sans JP";
  font-weight: normal;
  font-size: 1.6rem;
  letter-spacing: 0.03em;
  /* line-height: 35px; */
  text-align: center;
  color: #FFFFFF;
  padding: 0.7rem 2rem;
  margin-right: 2.3rem;
  background-color: #255CA6;
  height: fit-content;
  border-radius: 3rem;
  @media screen and (max-width: 767px) {
    font-size: 1.4rem;
    padding: 0.5rem 1rem;
    margin-right: 0;
	}
}

.common-list.article li a .list-title {
  max-width: 57.5rem;
  font-family: "Noto Sans JP";
  font-weight: normal;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  line-height: 2.5rem;
  text-align: left;
  color: #255ca6;
  @media screen and (max-width: 767px) {
    font-size: 1.4rem;
    line-height: 2rem;
	}
}

.recruit-banner-section {
  background-color: #3278D6;
  position: relative;
  height: 51rem;
  overflow: hidden;
  @media screen and (max-width: 767px) {
    height: 23rem;
	}
}

.recruit-container {
  background-color: #60BAFF;
  width: 63.1rem;
  height: 63.1rem;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -5rem;
  left: 0;
  right: 0;
  margin: auto;
  @media screen and (max-width: 767px) {
    width: 23.1rem;
    height: 23.1rem;
    top: 0rem;
	}
}

.recruit-icon-container {
  /* margin-bottom: 1.9rem; */
  width: 5.4rem;
  height: 6.2rem;
  @media screen and (max-width: 767px) {
    width: 3.4rem;
    height: 4.2rem;
	}
}

.recruit-jp-title {
  font-family: Jost;
  font-weight: 500;
  font-style: italic;
  font-size: 8.2rem;
  letter-spacing: 0.1em;
  line-height: 13.6rem;
  text-align: left;
  color: #fff;
  @media screen and (max-width: 767px) {
    font-size: 3rem;
    line-height: 4rem;
	}
}

.recruit-en-title {
  font-family: "Noto Sans JP";
  font-weight: bold;
  font-size: 2.8rem;
  letter-spacing: 0.06em;
  /* line-height: 28px; */
  text-align: left;
  color: #fff; 
  margin-bottom: 2.9rem; 
  @media screen and (max-width: 767px) {
    font-size: 1.8rem;
    margin-bottom: 1.2rem;
	}
}

.recruit-icon-arrow-container {
  width: 6.8rem;
  height: 1rem;
  transition: 0.4s ease-in-out;
  @media screen and (max-width: 767px) {
    width: 3.8rem;
	}
}

.recruit-container:hover .recruit-icon-arrow-container {
  transform: translateX(1rem);
}
@media screen and (max-width: 767px) {
  .entry-section-home .introduction-top-flex-title-container {
    gap: 0rem;
    margin-top: 2rem;
    align-items: center;
    flex-direction: column;
    margin-bottom: 2rem;
  }
}

.entry-section-home .introduction-big-en-title, .entry-section-home .introduction-big-jp-title {
  color: #3278D6;
} 

.entry-section-home .introduction-big-en-title::before {
  display: none;
}

.entry-section-home {
  position: relative;
}

.entry-section-home::before {
  content: "";
  position: absolute;
  top: 0;
  right: -18rem;
  margin: auto;
  background: url(../img/home/movie-background.svg);
  background-size: 100%;
  width: 171.2rem;
  height: 116.2rem;
  transform: translateX(-6.3rem) translateY(-6rem);
  z-index: -1;
}

.new-graduate-container {
  width: 70.5rem;
  height: 26.9rem;
  background: url(../img/home/recuit-home-img01.png) no-repeat;
  margin-left: 9rem;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  position: relative;
  align-items: center;
  justify-content: center;
  margin-bottom: 4.3rem;
  background-size: contain;
  @media screen and (max-width: 767px) {
    width: 100%;
    height: 11rem;
    background-size: cover;
    margin: 1rem auto 0;
    gap: 0.5rem;
	}
}

.new-graduate-container::before {
  content: "NEW GRADUATE";
  position: absolute;
  bottom: 0.5rem;
  left: -4rem;
  font-family: Jost;
  font-weight: 500;
  font-style: italic;
  font-size: 5rem;
  letter-spacing: 0.1em;
  /* line-height: 60px; */
  text-align: left;
  color: #9BC716;
}



.entry-title {
  font-family: "Noto Sans JP";
  font-weight: bold;
  font-size: 4.8rem;
  letter-spacing: 0.06em;
  /* line-height: 25px; */
  text-align: center;
  color: #fff;
  @media screen and (max-width: 767px) {
    font-size: 2.8rem;
	}
}


.entry-arrow-container {
  width: 7.3rem;
  height: 1.1rem;
  transition: 0.2s ease-in-out;
  @media screen and (max-width: 767px) {
    width: 4.3rem;
	}
}

.new-graduate-container:hover .entry-arrow-container, .middle-career-container:hover .entry-arrow-container   {
  transform: translateX(2rem);
}


.middle-career-container {
  width: 70.5rem;
  height: 26.9rem;
  background: url(../img/home/recuit-home-img02.png) no-repeat;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  position: relative;
  align-items: center;
  justify-content: center;
  margin-bottom: 15.2rem;
  background-size: contain;
  @media screen and (max-width: 767px) {
    width: 100%;
    height: 11rem;
    background-size: cover;
    margin: 1rem auto 4rem;
    gap: 0.5rem;
	}
}

.middle-career-container::before {
  content: "MID CAREER";
  position: absolute;
  bottom: 0.5rem;
  left: -4rem;
  font-family: Jost;
  font-weight: 500;
  font-style: italic;
  font-size: 5rem;
  letter-spacing: 0.1em;
  /* line-height: 60px; */
  text-align: left;
  color: #00C1B3;
}

@media screen and (max-width: 767px) {
  .new-graduate-container::before, .middle-career-container::before {
    left: -1rem;
    font-size: 2rem;

  }
}

.display-flex-container-flex-end {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}


#footer .entry-footer-section {
  display: none;
}

.under-movies-picture-section {
  z-index: 7;
  position: relative;
}

/* 
////////////////////////////////////////
//////////Animations////////////////////
//////////////////////////////////////// 
*/

.introduction-home, .movies-home, .message-home,
.news-home, .recruit-banner-section, .entry-section-home  {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 1s ease-out 0.5s, transform 1s ease-out 0.5s;
  @media screen and (max-width: 767px) {
    transform: translateY(-100px);
  }
}



.introduction-home.show, .movies-home.show, 
.message-home.show, .news-home.show, .recruit-banner-section.show, .button_home.show, .entry-section-home.show {
    opacity: 1;
    transform: translateX(0);
}

/* print */

@media print {

	.introduction-home, .movies-home, .message-home,
	.news-home, .recruit-banner-section, .entry-section-home  {
		opacity: 1 !important;
    	transform: translateX(0) !important;
	}
}