/* hero */
#hero {
  width: 100%;
  height: calc(100vh - 12rem);
}

@media(max-width:768px) {
  #hero {
    height: calc(100vh - 8rem);
    min-height: 60rem;
  }
}

.swiper.hero__slider {
  width: 100%;
  height: 100%;
}

.hero__bg {
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
  width: 90%;
  max-width: 1710px;
  height: 100%;
  margin-left: auto;
  position: relative;
  z-index: 1;
}

.bg1 {
  background-image: url("../images/mainvisual_bg.png");
}

.bg2 {
  background-image: url("../images/mainvisual_bg-2.png");
}

.bg3 {
  background-image: url("../images/mainvisual_bg-3.png");
}

.hero__bg::after {
  content: "";
  background-image: url("../images/mainvisual_txt.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 149.2rem;
  max-width: 100%;
  height: 13.6rem;
  position: absolute;
  bottom: 10%;
  left: -8rem;
}

@media(max-width:768px) {
  .hero__bg::after {
    bottom: 8%;
    left: -4rem;
  }
}

.hero__txt {
  width: 119rem;
  max-width: 65%;
  position: absolute;
  transform: translateY(-50%);
  left: 0;
  top: 45%;
  z-index: 2;
}

@media(max-width:768px) {
  .hero__txt {
    width: 80rem;
    max-width: none;
    transform: none;
    left: -6rem;
    top: 35%;
  }
}




/* news */
#news {
  background-color: #056fd2;
  color: #fff;
  padding: 24.4rem 0 10.3rem;
  margin-bottom: -14rem;
  transform: translateY(-14rem);
}

.news__inner {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media(max-width:768px) {
  .news__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

.news__inner h2 {
  font-family: 'Prompt', sans-serif;
  font-size: 6rem;
  font-weight: 600;
  letter-spacing: .075em;
  transform: translateY(-1.5rem);
}

@media(max-width:768px) {
  .news__inner h2 {
    transform: none;
    margin-bottom: 4rem;
  }
}

.news__list {
  margin-bottom: -5rem;
}

.news__list-item {
  margin-bottom: 5rem;
}

.news__link {
  font-size: 1.5rem;
  letter-spacing: .075em;
  transition: .3s;
}

@media(max-width:768px) {
  .news__link {
    font-size: max(14px, 1.5rem);
    line-height: calc(24/15);
  }
}

@media (hover: hover) and (pointer: fine) {
  .news__link:hover {
    color: #1d1d1d;
  }
}

.news__time {
  font-family: 'Prompt', sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  margin-right: 3rem;
}

@media(max-width:768px) {
  .news__time {
    font-size: max(14px, 1.6rem);
    display: block;
    margin: 0 0 1rem;
  }
}




/* about */
#about {
  padding-top: 20rem;
  overflow: hidden;
}

@media(max-width:768px) {
  #about {
    padding: 0 0 10rem;
  }
}

.about__inner {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

@media(max-width:768px) {
  .about__inner {
    flex-direction: column-reverse;
  }
}

.about__inner h2 {
  font-size: 4.8rem;
  letter-spacing: .15em;
  line-height: calc(80/48);
  margin: 13rem 0 6rem;
  position: relative;
}

.about__inner h2::before {
  content: "";
  background-image: url("../images/about_ttl.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 42.1rem;
  height: 46.9rem;
  position: absolute;
  left: -10rem;
  top: -24rem;
  z-index: -1;
}

.about__txt {
  font-size: 2rem;
  letter-spacing: .075em;
  line-height: calc(50/20);
  margin-bottom: 8rem;
}

.about__txt span {
  font-size: 2.4rem;
  line-height: calc(50/24);
}

.about__img {
  width: 45vw;
  max-width: 85rem;
  height: 97rem;
  margin: 0 calc(50% - 50vw);
  position: relative;
}

@media(max-width:768px) {
  .about__img {
    width: 100%;
    height: auto;
    margin: 0 calc(50vw - 50%);
  }
}

.about__img::before {
  content: "ABOUT US";
  font-family: 'Prompt', sans-serif;
  font-size: 18rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: #f1f3f5;
  white-space: nowrap;
  position: absolute;
  transform: translateY(-50%);
  top: 0;
  left: -35rem;
}

.about__img::after {
  content: "";
  background-image: url("../images/about.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 32.1rem;
  height: 26.6rem;
  position: absolute;
  transform: translateX(-100%);
  bottom: 0;
  left: 5.5rem;
}

@media(max-width:768px) {
  .about__img::before {
    font-size: 12rem;
    transform: none;
    left: -8%;
  }

  .about__img::after {
    background-image: none;
  }
}

#about .common__btn {
  margin: 0;
}




/* att */
#att {
  background-color: #f1f3f5;
  padding: 16.4rem 0 10rem;
}

.att__inner {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
}

.att__en {
  font-family: 'Prompt', sans-serif;
  font-size: 14rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  text-align: center;
}

@media(max-width:768px) {
  .att__en {
    font-size: 8rem;
  }
}

.att__inner h2 {
  font-size: 6rem;
  letter-spacing: .1em;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-14rem);
  margin-bottom: -14rem;
}

@media(max-width:768px) {
  .att__inner h2 {
    font-size: max(20px, 4rem);
    transform: translateY(-8rem);
    margin-bottom: -14rem;
    white-space: nowrap;
  }
}

.att__italic {
  font-family: 'Prompt', sans-serif;
  font-size: 15rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: .15em;
  color: #056fd2;
}

@media(max-width:768px) {
  .att__italic {
    font-size: 9rem;
  }
}

.att__list {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 12rem;
}

@media(max-width:768px) {
  .att__list {
    flex-direction: column;
  }
}

.att__list-item {
  width: 40rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

@media(max-width:768px) {
  .att__list-item {
    width: 80%;
    margin: 0 auto;
  }
}

.att__list-item::before {
  content: "01";
  font-family: 'Prompt', sans-serif;
  font-size: 22rem;
  color: #fff;
  position: absolute;
  top: -2.5rem;
  z-index: -1;
}

.att__list-item:nth-of-type(2)::before {
  content: "02";
}

.att__list-item:nth-of-type(3)::before {
  content: "03";
}

.att__list-item h3 {
  font-size: 3rem;
  letter-spacing: .075em;
  line-height: calc(48/30);
  color: #056fd2;
  text-align: center;
}

@media(max-width:768px) {
  .att__list-item h3 {
    font-size: max(20px, 3rem);
  }
}

.att__img {
  width: 30rem;
  height: 25rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.att__list-item:nth-of-type(1) .att__img img {
  width: 12.9rem;
  height: auto;
}

.att__list-item:nth-of-type(2) .att__img img {
  width: 16.4rem;
  height: auto;
}

.att__list-item:nth-of-type(3) .att__img img {
  width: 23.3rem;
  height: auto;
}

.att__list-txt {
  font-size: 1.6rem;
  letter-spacing: .075em;
  line-height: calc(26/16);
  margin-bottom: 6rem;
}

@media(max-width:768px) {
  .att__list-txt {
    font-size: max(14px, 1.6rem);
  }
}




/* int */
#int {
  padding: 19.1rem 0 14rem;
  position: relative;
}

#int::before,
#int::after {
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
}

#int::before {
  background-image: url("../images/interview_ttl.png");
  width: 42.1rem;
  height: 46rem;
  top: -5rem;
  z-index: 0;
}

#int::after {
  background-image: url("../images/about.png");
  width: 32rem;
  height: 26.6rem;
  bottom: 0;
  right: 11rem;
  z-index: -1;
}

@media(max-width:768px) {
  #int::after {
    width: 16rem;
    height: 13.3rem;
    right: 0;
  }
}

.int__ttl {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media(max-width:768px) {
  .int__ttl {
    flex-direction: column;
    align-items: flex-start;
  }
}

.int__ttl h2 {
  font-family: 'Prompt', sans-serif;
  font-size: 14rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: #056fd2;
  margin-bottom: 1rem;
  position: relative;
}

@media(max-width:768px) {
  .int__ttl h2 {
    font-size: 10rem;
  }
}

.int__ttl h2::after {
  content: "社員インタビュー";
  font-size: 2.2rem;
  letter-spacing: .075em;
  color: #1d1d1d;
  position: absolute;
  transform: translateY(50%);
  left: 0;
  bottom: 0;
}

@media(max-width:768px) {
  .int__ttl h2::after {
    font-size: max(14px, 2.2rem);
  }
}

.int__ttl p {
  font-size: 3.3rem;
  letter-spacing: .1em;
  line-height: calc(48/33);
}

@media(max-width:768px) {
  .int__ttl p {
    font-size: max(16px, 3.3rem);
    position: relative;
    margin-top: 3rem;
  }
}

.swiper-outer {
  overflow: hidden;
}

.swiper.int__slider {
  width: 95%;
  max-width: 1580px;
  height: 100%;
  margin: 9rem auto 7.5rem;
  padding: 0 4.7rem !important;
}


@media(max-width:1660px) {
  .swiper.int__slider {
    max-width: 1580px;
  }
}

@media(max-width:768px) {
  .swiper.int__slider {
    overflow: visible !important;
  }
}

.int__slider .swiper-wrapper {
  width: 100%;
}

@media(max-width:1660px) {
  .int__slider .swiper-wrapper {
    padding: 0;
  }
}

.int__slider .swiper-slide {
  width: 35rem;
}
.int__slider .swiper-slide a:hover {
  opacity: .5;
}

.int__img {
  width: 100%;
  height: 45rem;
  display: flex;
  align-items: flex-end;
  margin-bottom: 3.5rem;
}

@media(max-width:768px) {
  .int__img {
    justify-content: center;
  }
}

.int__01 {
  width: 43.5rem;
  height: 41.4rem;
  transform: translateX(-4.7rem);
  overflow: visible;
}
@media(max-width:1660px) {
.int__01 {
    width: 35rem;
    transform: none;
    overflow: hidden;
}
}
@media(max-width:768px) {
.int__01 {
    overflow: visible;
}
}
.int__02 {
  width: 35rem;
  height: 44.5rem;
}
.int__03 {
  width: 35rem;
  height: 41.4rem;
}
.int__04 {
  width: 35rem;
  height: 41.4rem;
}
.int__05 {
  width: 35rem;
  height: 42.2rem;
}
.int__06{
  width: 35rem;
  height: 41.6rem;
}

.int__slide-txt {
  font-family: 'Prompt', sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: .075em;
  margin-bottom: 2rem;
}

@media(max-width:768px) {
  .int__slide-txt {
    font-size: max(14px, 1.6rem);
    width: 35rem;
    margin: 0 auto 2rem;
  }
}

.int__name {
  font-size: 2rem;
  letter-spacing: .075em;
}

@media(max-width:768px) {
  .int__name {
    font-size: max(14px, 2rem);
    width: 35rem;
    margin: 0 auto;
  }
}

.swiper-button-prev,
.swiper-button-next {
  height: 9rem !important;
  width: 9rem !important;
  top: 58% !important;
}

@media(max-width:768px) {

  .swiper-button-prev,
  .swiper-button-next {
    top: 61% !important;
  }
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: 0 !important;
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: 0 !important;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  content: "" !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  width: 9rem !important;
  height: 9rem !important;
  margin: auto !important;
}

.swiper-button-prev:after {
  background-image: url("../images/interview_arw.jpg");
}

.swiper-button-next:after {
  background-image: url("../images/interview_arw.jpg");
  transform: rotate(180deg) !important;
}

@media(max-width:768px) {
  #int .common__btn {
    width: 90%;
  }
}




/* others */
#others {
  display: flex;
}

@media(max-width:768px) {
  #others {
    flex-direction: column;
  }
}

.others__contents {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 50%;
  height: 50rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  position: relative;
  transition: .3s;
}

.others__contents::after {
  content: "";
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 0.3s;
}

@media (hover: hover) and (pointer: fine) {
  .others__contents:hover::after {
    opacity: .3;
  }
}

@media(max-width:768px) {
  .others__contents {
    width: 95%;
    margin: 0 auto 2rem;
  }
}

.others__contents:nth-of-type(1) {
  background-image: url("../images/faq.jpg");
}

.others__contents:nth-of-type(2) {
  background-image: url("../images/guidelines.jpg");
}

.others__contents h2 {
  font-family: 'Prompt', sans-serif;
  font-size: 8rem;
  letter-spacing: .075em;
  position: relative;
  z-index: 1;
}

.others__contents p {
  font-size: 2rem;
  letter-spacing: .075em;
  position: relative;
  z-index: 1;
}

@media(max-width:768px) {
  .others__contents p {
    font-size: max(14px, 2rem);
  }
}