@charset "utf-8";

/*----------------------------------------------------------------------
* top
--------------------------------------------------------------------- */
/* section-ttl */
.section-ttl .en {
  display: block;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 52px;
  letter-spacing: 0.1em;
  line-height: 1.3;
}
.section-ttl .jp {
  font-weight: 700;
  font-size: 18px;
  color: #666666;
}
@media screen and (max-width: 767px) {
  .section-ttl {
    margin: -1rem 0 0;
  }
  .section-ttl .en {
    font-size: 8rem;
  }
  .section-ttl .jp {
    font-size: 3.2rem;
  }
}

/* more */
.more {
  display: flex;
  align-items: center;
}
.more a {
  display: flex;
  align-items: center;
}
.more .txt {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 767px) {
  .more .txt {
    font-size: 2rem;
  }
}

.more .arrow {
  position: relative;
  margin-left: 12px;
  width: 30px;
  height: 30px;
}
.more .arrow::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 30px;
  height: 30px;
  background-image: url(/assets/img/common/arrow01_r.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 6.2px;
}
.more .arrow::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  background: #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  transition: 0.4s;
}
@media screen and (max-width: 767px) {
  .more .arrow {
    margin-left: 1.2rem;
    width: 3.8rem;
    height: 3.8rem;
  }
  .more .arrow::before {
    width: 3.8rem;
    height: 3.8rem;
    background-size: 0.88rem;
  }
  .more .arrow::after {
    width: 3.8rem;
    height: 3.8rem;
  }
}

a:hover .more .arrow::after {
  transform: scale(1.2);
}
.more a:hover .arrow::after {
  transform: scale(1.2);
}

.more.blue .arrow::before {
  background-image: url(/assets/img/common/arrow01_r_white.svg);
}
.more.blue .arrow::after {
  background: #052765;
}

.more.shadow .txt {
  text-shadow: 0 0 6px rgb(0, 0, 0, 0.4);
}
.more.shadow .arrow {
  filter:drop-shadow(0 0 6px rgb(0, 0, 0, 0.4));
}



/* mv
---------------------------------------------- */
.mv {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 480px;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .mv {
    height: 88rem;
  }
}

/* mv-image */
.mv-image p {
  position: absolute;
  opacity: 0;
  transition: 1.5s;
}
.mv-image p.active {
  opacity: 1;
}
.mv-image01 {
  top: 80px;
  left: calc(50% + 70px);
  width: 400px;
}
.mv-image02 {
  top: 44px;
  left: calc(50% + 530px);
  width: 320px;
}
.mv-image03 {
  top: 160px;
  left: calc(50% - 824px);
  width: 250px;
}
@media screen and (max-width: 767px) {
  .mv-image01 {
    top: 48rem;
    left: 26rem;
    width: 40rem;
  }
  .mv-image02 {
    top: 12rem;
    left: 59rem;
    width: 32rem;
  }
  .mv-image03 {
    top: 54rem;
    left: -11.4rem;
    width: 25rem;
  }
}

/* mv-txt */
.mv-txt {
  position: absolute;
  top: 180px;
  left: calc(50% - 436px);
}
.mv-txt-item {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.92;
  letter-spacing: 0.32em;
  font-feature-settings: normal;
  opacity: 0;
  transition: 0.4s;
}
.mv-txt-item.active {
  opacity: 1;
}
.mv-txt-item .small {
  font-size: 44px;
}
.mv-txt-item span {
  display: inline-block;
  opacity: 0;
  transform : translate(0, 10px);
  transition: 0.4s;
}
.mv-txt-item span.active {
  transform : translate(0);
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .mv-txt {
    position: absolute;
    top: 17rem;
    left: 10.8rem;
  }
  .mv-txt-item {
    font-size: 5.2rem;
  }
  .mv-txt-item .small {
    font-size: 4.4rem;
  }
}

/* mv-bg */
.mv-bg div {
  position: absolute;
  z-index: -1;
}
.mv-bg01 {
  width: 160px;
  top: 44px;
  left: calc(50% - 625px);
}
.mv-bg02 {
  width: 100px;
  top: 314px;
  left: calc(50% + 500px);
}
@media screen and (max-width: 767px) {
  .mv-bg01 {
    width: 16rem;
    top: 6rem;
    left: -4rem;
  }
  .mv-bg02 {
    width: 10rem;
    top: 36.3rem;
    left: 51rem;
  }
}

/* loop-slider */
.loop-slider {
  width: 100%;
  padding: 64px 0 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.5s;
}
.loop-slider.active {
  opacity: 1;
}
.loop-slider-wrapper {
  display: flex;
  width: 100vw;
  animation: flowTxt 12s linear infinite;
}
.loop-slider-item {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 130px;
  line-height: 1;
  letter-spacing: 0.2em;
  white-space: nowrap;
  color: #e6e6e6;
  padding-right: 1em;
}
@media screen and (max-width: 767px) {
  .loop-slider {
    padding: 3.5rem 0 0;
  }
  .loop-slider-item {
    font-size: 10rem;
  }
}

.loop-slider-item:nth-child(odd) {
  animation: loop 50s -25s linear infinite;
}
.loop-slider-item:nth-child(even) {
  animation: loop2 50s linear infinite;
}

@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}


/* top-content
---------------------------------------------- */
.top-content-wrapper {
  position: relative;
  padding-bottom: 160px;
}
.top-content {
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .top-content-wrapper {
    position: relative;
    padding-bottom: 20rem;
  }
}

.top-content-bg div {
  position: absolute;
  z-index: 1;
}
.bg01 {
  width: 250px;
  top: -73px;
  left: calc(50% - 808px);
}
.bg02 {
  width: 400px;
  top: 460px;
  left: calc(50% - 628px);
}
.bg03 {
  width: 174px;
  top: 510px;
  left: calc(50% + 413px);
}
.bg04 {
  width: 250px;
  top: 983px;
  left: calc(50% + 203px);
}
.bg05 {
  width: 250px;
  top: 1318px;
  left: calc(50% + 557px);
}
.bg06 {
  width: 200px;
  top: 1704px;
  left: calc(50% + 382px);
}
.bg07 {
  width: 100px;
  top: 1705px;
  left: calc(50% - 780px);
}
.bg08 {
  width: 250px;
  top: 2094px;
  left: calc(50% - 343px);
}
@media screen and (max-width: 767px) {
  .bg01 {
    width: 25rem;
    top: -13rem;
    left: -13rem;
  }
  .bg02 {
    width: 40rem;
    top: 112.6rem;
    left: -17rem;
  }
  .bg03 {
    width: 17.4rem;
    top: 42.4rem;
    left: 63rem;
  }
  .bg04 {
    width: 25rem;
    top: 139.2rem;
    left: 33rem;
  }
  .bg05 {
    width: 25rem;
    top: 215.8rem;
    left: 58rem;
  }
  .bg06 {
    width: 20rem;
    top: 278.8rem;
    left: 18rem;
  }
  .bg07 {
    width: 10rem;
    top: 279.2rem;
    left: -4.6rem;
  }
  .bg08 {
    width: 25rem;
    top: 317.8rem;
    left: 33.8rem;
  }
}


/* about
---------------------------------------------- */
.about {
  margin: 240px 0 0;
}
.about-inner {
  position: relative;
  width: 1000px;
  margin: 0 auto;
  height: 1154px;
}
@media screen and (max-width: 767px) {
  .about {
    margin: 20rem 0 0;
  }
  .about-inner {
    position: relative;
    width: 100%;
    padding: 0 4rem;
    height: auto;
  }
}

.about-txt {
  width: 264px;
  padding: 80px 0 0;
}
.about-lead {
  margin: 40px 0 0;
  line-height: 2.25;
}
@media screen and (max-width: 767px) {
  .about-txt {
    width: 100%;
    padding: 0;
  }
  .about-lead {
    margin: 4rem 0 0;
    line-height: 1.8;
  }
}

.about-menu ul li{
  position: absolute;
  width: 312px;
}
.about-menu ul li.about-menu01 {
  top: 0;
  left: 344px;
}
.about-menu ul li.about-menu02 {
  top: 135px;
  left: 688px;
}
.about-menu ul li.about-menu03 {
  top: 540px;
  left: 80px;
}
.about-menu ul li.about-menu04 {
  top: 694px;
  left: 512px;
}
@media screen and (max-width: 767px) {
  .about-menu ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 7rem 0 0;
  }
  .about-menu ul li{
    position: static;
    width: 31.6rem;
  }
  .about-menu ul li.about-menu02 {
    padding-top: 8rem;
  }
  .about-menu ul li.about-menu03 {
    margin-top: -4rem;
  }
  .about-menu ul li.about-menu04 {
    padding-top: 8rem;
  }
}

.about-menu ul li a {
  position: relative;
  display: block;
  overflow: hidden;
}
.about-menu ul li a::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: 0.4s;
}
.about-menu-txt {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #FFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-align: center;
}
.about-menu-ttl {
  font-size: 25px;
  font-weight: 500;
  line-height: 1.44;
  letter-spacing: 0.1em;
  margin: 0 0 15px;
  text-shadow: 0 0 6px rgb(0, 0, 0, 0.4);
}
@media screen and (max-width: 767px) {
  .about-menu-ttl {
    font-size: 3.4rem;
    line-height: 1.3;
    margin: 0 0 2rem;
  }
}

.about-menu-image img {
  transition: 0.4s;
}
.about-menu ul li a:hover .about-menu-image img {
  transform: scale(1.1);
}
.about-menu ul li a:hover::after {
  opacity: 1;
}


/* company
---------------------------------------------- */
.company {
  margin: 240px 0 0;
}
.company-inner {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .company {
    margin: 20rem 0 0;
  }
  .company-inner {
    width: 100%;
    display: block;
    padding: 0 4rem;
  }
}

.company-image {
  width: 484px;
}
@media screen and (max-width: 767px) {
  .company-image {
    width: 100%;
  }
}

.company-txt {
  width: 400px;
}
.company-lead {
  margin: 40px 0 30px;
  line-height: 2.25;
}
@media screen and (max-width: 767px) {
  .company-txt {
    width: 100%;
    padding-bottom: 7rem;
  }
  .company-lead {
    margin: 4rem 0 4rem;
    line-height: 1.8;
  }
}


/* news
---------------------------------------------- */
.news {
  margin: 230px 0 0;
}
.news-inner {
  width: 1000px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .news {
    margin: 20rem 0 0;
  }
  .news-inner {
    width: 100%;
    padding: 0 4rem;
  }
}

.news h2 {
  text-align: center;
}
@media screen and (max-width: 767px) {
  .news h2 {
    text-align: left;
  }
}

.news-list ul {
  margin: 40px 0 0;
  border-top: 1px solid #D9D9D9;
}
.news-list ul li {
  display: flex;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid #D9D9D9;
  line-height: 1.75;
}
.news-list ul li .date {
  width: 110px;
  font-size: 14px;
  font-weight: 500;
  color: #21739D;
}
.news-list ul li .txt {
  flex: 1;
}
.news-list ul li .txt a {
  transition: 0.4s;
}
.news-list ul li .txt a:hover{
  color: #21739D;
}
@media screen and (max-width: 767px) {
  .news-list ul {
    margin: 5rem 0 0;
  }
  .news-list ul li {
    display: block;
    padding: 3rem 0;
    line-height: 1.75;
  }
  .news-list ul li .date {
    display: block;
    width: 100%;
    font-size: 2.4rem;
  }
  .news-list ul li .txt {
    font-size: 3rem;
  }
}


/* recruit
---------------------------------------------- */
.recruit {
  height: 320px;
  background: url(/assets/img/top/recruit_img01.jpg);
  background-size: cover;
  margin: 160px 0 0;
}
.recruit-inner {
  width: 1000px;
  margin: 0 auto;
  height: 100%;
}
@media screen and (max-width: 767px) {
  .recruit {
    height: 44rem;
    background: url(/assets/img/top/recruit_img01_sp.jpg);
    background-size: cover;
    margin: 20rem 0 0;
  }
  .recruit-inner {
    width: 100%;
  }
}

.recruit-btn {
  height: 100%;
}
.recruit-btn a {
  display: block;
  width: 380px;
  height: 100%;
  background-color: rgba(33, 115, 157, 0.6);
  padding: 40px 50px 0;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .recruit-btn a {
    width: 50%;
    height: 100%;
    padding: 4rem 4rem;
  }
}

.recruit-section-ttl .en {
  font-size: 50px;
}
.recruit-section-ttl .jp {
  color: #fff;
}
@media screen and (max-width: 767px) {
  .recruit-section-ttl .en {
    font-size: 6rem;
  }
  .recruit-section-ttl .jp {
    font-size: 3rem;
  }
}

.recruit-lead {
  width: 250px;
  margin: 20px 0 10px;
  font-size: 15px;
  line-height: 1.93;
}
@media screen and (max-width: 767px) {
  .recruit-lead {
    width: 100%;
    margin: 2rem 0 1.5rem;
    font-size: 2.8rem;
    line-height: 1.64;
  }
}