@charset "utf-8";

/* --------------------------------------------
メインビジュアル
-----------------------------------------------*/
#home .main-visual{
  position: relative;
  display: flex;
  align-items: end;
  justify-content: center;
  z-index: 1;
  height: 100%;
  /* min-height: min(43.1111vw, 600px); */
  min-height: min(50.1111vw, 800px);
  background : url(img/top/main-visual.jpg) right top / auto auto no-repeat scroll padding-box border-box transparent;
  background-position: center;
  background-size: cover;
  background-color: var(--base-white);
  margin-top: 120px;
  z-index: 10;
}

#home .main-visual__catch{
  position: absolute;
  bottom: 5%;
  left: 5%;
  max-width: 886px;
  width: 50%;
  font-size: var(--fontsize100);
}

/* 線形 */
#home .main-visual__line{
  position: absolute;
  right: -3%;
  width: min(25%, 425px);
}

@media screen and (max-width: 1199px) {
  #home .main-visual{
    margin-top: 100px;
  }
}

@media screen and (max-width: 767px) {
  #home .main-visual{
    margin-top: 80px;
  }
}

/* --------------------------------------------
TOPICS
-----------------------------------------------*/
#home .topics{
  position: relative;
  padding-top: min(80/1200 * 100vw, 80px);
  margin-bottom: min(120/1200 * 100vw, 120px);
}

#home .topics::after{
  content: '';
  position: absolute;
  top: calc(-1 * min(190 / 1200 * 100vw, 190px));
  right: 0;
  background : url(img/top/topics-bg.png) center center / auto auto no-repeat scroll padding-box border-box transparent;
  background-size: min(413/1200 * 100vw, 413px) min(490/1200 * 100vw, 490px);
  width: min(413/1200 * 100vw, 413px);
  height: min(490/1200 * 100vw, 490px);
}

#home .topics__wrap{
  position: relative;
}

#home .topics__content {
  display: flex;
  gap: min(50/1200 * 100vw, 50px);
}

#home .topics__heading {
  flex-shrink: 0;
}

#home .topics__list{
  width: 100%;
}

#home .topics__list-item{
  position: relative;
  display: flex;
}

#home .topics__list-item:first-child{
  border-top: 1px solid #f1eee7;
}

#home .topics__list-item a{
  padding: min(30/1200 * 100vw, 30px) 0 min(30/1200 * 100vw, 30px) min(35/1200 * 100vw, 35px);
  display: flex;
  font-size: var(--fontsize16);
  letter-spacing: 0.04em;
  border-bottom: 1px solid #f1eee7;
  width: 100%;
}

#home .topics__list-item a::before{
  content: '';
  flex-shrink: 0;
  display: block;
  background: var(--base-orange);
  width: 7px;
  height: 6px;
  margin-right: min(15/1200 * 100vw, 15px);
  translate: 0 0.8em;
  transform: skewX(-30deg);
}

#home .topics-wrap__list-date{
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  flex-shrink: 0;
  margin-right: min(25/1200 * 100vw, 25px);
}

#home .topics-illust{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#home .topics-illust__item2{
  position: absolute;
  top: 0;
  right: -235px;
  background: var(--base-orange);
  transform: skewX(-30deg);
  width: min(245/1200 * 100vw, 245px);
  height: min(189/1200 * 100vw, 189px);
  overflow: hidden;
  transform-origin: top right;
}

#home .topics-illust__item2::after{
  content: '';
  position: absolute;
  top: 0px;
  left: calc(-1 * min(54/1200 * 100vw, 54px));
  background : url(img/top/topic-illust-cloud.webp) center center / auto auto no-repeat scroll padding-box border-box transparent;
  background-size: min(389/1200 * 100vw, 389px) 100%;
  width: min(389/1200 * 100vw, 389px);
  height: 100%;
  transform: skewX(30deg);
}

@media screen and (max-width: 767px) {
  #home .topics {
    padding-top: min(30/390 * 100vw, 30px);
    margin-bottom: min(60/390 * 100vw, 60px);
  }

  #home .topics__content{
    padding: 0;
    gap: 0;
    flex-direction: column;
  }

  #home .topics__list-item a{
    padding: 15px 0;
    font-size: var(--fontsize14);
  }
}

/* --------------------------------------------
会社を知る
-----------------------------------------------*/
#home .company{
  position: relative;
  background: #f9d6b8;
  width: 100%;
  z-index: 5;
}

#home .company__wrap {
  padding: min(90/1200 * 100vw, 90px) 0 min(120/1200 * 100vw, 120px);
}

#home .company__contain {
  display: flex;
  gap: min(80/1200 * 100vw, 80px);
}

#home .company__box{
  display: flex;
  flex-direction: column;
  width: 100%;
}

#home .company__box-img{
  position: relative;
  margin-bottom: min(35/1200 * 100vw, 35px);
  aspect-ratio: 112/69;
  background: #4d4d4d;
}

#home .company__box-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#home .company__box-txt {
  display: flex;
  flex-direction: column;
}

#home .company__box a{
  position: relative;
  padding: min(20/1200 * 100vw, 20px) min(75/1200 * 100vw, 75px) min(20/1200 * 100vw, 20px)
    min(35/1200 * 100vw, 35px);
  border-bottom: 1px solid var(--base-orange);
  font-size: var(--fontsize20);
  font-weight: 600;
}

#home .company__box a::before{
  content: '';
  position: absolute;
  top: 50%;
  left: min(10/1200 * 100vw, 10px);
  translate: 0 -50%;
  width: 7px;
  height: 6px;
  background: var(--base-orange);
  transform: skewX(-30deg);
}

#home .company__box a::after{
  content: '';
  position: absolute;
  top: 50%;
  right: min(30/1200 * 100vw, 30px);
  translate: 0 -50%;
  width: min(46/1200 * 100vw, 46px);
  height: min(46/1200 * 100vw, 46px);
  background : url(img/top/white-right-arw.png) 0% 0% / auto auto no-repeat scroll padding-box border-box transparent;
  background-size: min(15/1200 * 100vw, 15px) min(15/1200 * 100vw, 15px);
  background-position: center center;
  background-color: var(--base-black);
  border-radius: 50px;
}

.font-c-org{
  color: #e77400;
}

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

  #home .company__wrap {
    padding: min(60/390 * 100vw, 60px) 0 min(605/1200 * 100vw, 60px);
  }

  #home .company__contain {
    flex-wrap: wrap;
    gap: min(40/390 * 100vw, 40px);
  }

  #home .company__box-img {
    margin-bottom: min(20/390 * 100vw, 20px);
  }

  #home .company__box a {
    padding: min(15/390 * 100vw, 15px) min(40/390 * 100vw, 40px) min(15/390 * 100vw, 15px)
      min(20/390 * 100vw, 20px);
    font-size: var(--fontsize16);
  }

  #home .company__box a::after {
    right: min(15/390 * 100vw, 15px);
    translate: 0 -50%;
    width: min(23/390 * 100vw, 23px);
    height: min(23/390 * 100vw, 23px);
    background-size: min(10/390 * 100vw, 10px) min(10/390 * 100vw, 10px);
  }
}

/* --------------------------------------------
インタビュー
-----------------------------------------------*/
#home .interview{
  position: relative;
  background: var(--base-light-gray);
  padding: min(110/1200 * 100vw, 110px) 0 min(120/1200 * 100vw, 120px);
}

#home .interview__title-wrap {
  display: flex;
  gap: min(45/1200 * 100vw, 45px);
}

#home .interview__heading {
  flex-shrink: 0;
}

#home .interview__description{
  font-size: var(--fontsize16);
  letter-spacing: 0.04em;
}

#home .interview__content{
  position: relative;
}

/* スワイパー
===========================*/
#home .interview__swiper{
  position: relative;
  margin-right: calc(50% - 50vw);
  margin-bottom: min(80/1200 * 100vw, 80px);
}

#home .interview__list{
  position: relative;
  max-width: 360px;
  width: 27%;
  margin-right: 3%;
  padding-top: min(80/1200 * 100vw, 80px);
}

#home .interview__list-number{
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: var(--fontsize160);
  font-weight: 600;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--base-light-grey);
  opacity: 0.2;
  line-height: 0.8;
}

#home .interview__list-image{
  position: relative;
  margin-bottom: min(35/1200 * 100vw, 35px);
}

#home .interview__list-image::after{
  content: 'INTERVIEW';
  position: absolute;
  bottom: -1em;
  right: 0px;
  font-size: var(--fontsize26);
  font-weight: 600;
  line-height: 1;
  color: #c03731;
  transform: rotate(90deg);
  transform-origin: top right;
  opacity: 0.2;
}

#home .interview__list-image img{
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50%;
  max-height: 315px;
  height: 130%;
  width: auto;
}

#home .interview__list-square{
  position: relative;
  height: min(240/1500 * 100vw, 240px);
  width: min(220/1500 * 100vw, 220px);
  background: var(--base-orange);
  transform: skewX(-30deg);
  transform-origin: left bottom;
}

#home .interview__txt-position{
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  writing-mode: vertical-lr;
  font-size: var(--fontsize18);
  font-weight: 600;
  padding-top: 15px;
  z-index: 5;
}

#home .interview__txt-position::before{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50%;
  width: 7px;
  height: 6px;
  background: var(--base-orange);
  transform: skewX(-30deg);
}

#home .interview__txt-description{
  font-size: var(--fontsize18);
  font-weight: 600;
  line-height: 1.7;
  margin-bottom: min(5/1200 * 100vw, 5px);
}

#home .interview__join {
  font-size: var(--fontsize14);
}

/* ページネーション
============================*/
#home .interview__pagination{
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  gap: 18px;
}

#home .interview-button-prev{
  position: relative;
  width: min(50/1200 * 100vw, 50px);
  height: min(50/1200 * 100vw, 50px);
  border: 1px solid var(--base-orange);
  border-radius: 50px;
  cursor: pointer;
}

#home .interview-button-prev::after{
  content: '';
  background : url(img/top/orange-left-arw.png) center center / auto auto no-repeat scroll padding-box border-box transparent;
  background-size: min(17/1200 * 100vw, 17px) min(17/1200 * 100vw, 17px);
  width: min(17/1200 * 100vw, 17px);
  height: min(17/1200 * 100vw, 17px);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  pointer-events: none;
}

#home .interview-button-next{
  position: relative;
  width: min(50/1200 * 100vw, 50px);
  height: min(50/1200 * 100vw, 50px);
  background: var(--base-black);
  border-radius: 50px;
  cursor: pointer;
}

#home .interview-button-next::after{
  content: '';
  background : url(img/top/white-right-arw.png) center center / auto auto no-repeat scroll padding-box border-box transparent;
  background-size: min(17/1200 * 100vw, 17px) min(17/1200 * 100vw, 17px);
  width: min(17/1200 * 100vw, 17px);
  height: min(17/1200 * 100vw, 17px);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  #home .interview {
    padding: min(70/390 * 100vw, 70px) 0 min(70/390 * 100vw, 70px);
  }

  #home .interview__title-wrap {
    flex-direction: column;
    gap: 0;
    margin-bottom: min(30/390 * 100vw, 390px);
  }

  #home .interview__description {
    font-size: var(--fontsize14);
  }

  #home .interview__list{
    position: relative;
    max-width: initial;
    width: 90%;
    margin-right: 10%;
    padding-top: min(80/390 * 100vw, 80px);
  }

  #home .interview__list-square{
    height: min(200/500 * 100vw, 200px);
    width: 70%;
  }

  #home .interview__list-image img{
    max-height: 335px;
    height: 130%;
  }

  #home .interview__list-image::after {
    font-size: var(--fontsize20);
  }

  #home .interview__txt-description {
    font-size: var(--fontsize16);
  }

  #home .interview__join {
    font-size: var(--fontsize12);
  }

  #home .interview__txt-position {
    font-size: var(--fontsize16);
  }

  #home .interview__pagination{
    bottom: initial;
    top: 0;
    right: 6%;
    gap: 15px;
    z-index: 5;
  }

  #home .interview-button-next {
    width: min(30/390 * 100vw, 30px);
    height: min(30/390 * 100vw, 30px);
  }

  #home .interview-button-prev {
    width: min(30/390 * 100vw, 30px);
    height: min(30/390 * 100vw, 30px);
  }

  #home .interview-button-prev::after {
    width: min(10/390 * 100vw, 10px);
    height: min(10/390 * 100vw, 10px);
    background-size: min(10/390 * 100vw, 10px) min(10/390 * 100vw, 10px);
  }

  #home .interview-button-next::after {
    width: min(15/390 * 100vw, 15px);
    height: min(15/390 * 100vw, 15px);
    background-size: min(10/390 * 100vw, 10px) min(10/390 * 100vw, 10px);
  }
}

/* --------------------------------------------
CROSSTALK
-----------------------------------------------*/
#home .crosstalk__wrap{
  position: relative;
  padding: min(110/1200 * 100vw, 110px) 0 min(120/1200 * 100vw, 120px);
}

#home .crosstalk__content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: min(80/1200 * 100vw, 80px) 0;
}

#home .crosstalk__box{
  width: 46.7%;
}

#home .crosstalk__box-img{
  width: 100%;
  height: auto;
  margin-bottom: min(25/1200 * 100vw, 25px);
}

#home .crosstalk__box-img img{
  width: 100%;
  height: auto;
}

#home .crosstalk__box-txt{
  position: relative;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--base-orange);
  padding: min(20/1200 * 100vw, 20px) min(75/1200 * 100vw, 75px) min(20/1200 * 100vw, 20px)
    min(35/1200 * 100vw, 35px);
}

#home .crosstalk__box-txt::before{
  content: '';
  width: 7px;
  height: 6px;
  background: var(--base-orange);
  position: absolute;
  top: 47%;
  left: 10px;
  translate: 0 -50%;
  pointer-events: none;
  transform: skewX(-30deg);
}

#home .crosstalk__box-txt::after{
  content: '';
  position: absolute;
  width: min(46/1200 * 100vw, 46px);
  height: min(46/1200 * 100vw, 46px);
  background : url(img/top/white-right-arw.png) center center / auto auto no-repeat scroll padding-box border-box transparent;
  background-size: min(15/1200 * 100vw, 15px) min(15/1200 * 100vw, 15px);
  background-position: center center;
  background-color: var(--base-black);
  border-radius: 50%;
  top: 50%;
  right: 30px;
  translate: 0 -50%;
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  #home .crosstalk__wrap {
    padding: min(60/390 * 100vw, 60px) 0 min(60/390 * 100vw, 60px);
  }

  #home .crosstalk__content {
    gap: min(30/390 * 100vw, 30px) 0;
  }

  #home .crosstalk__box{
    width: 100%;
  }

  #home .crosstalk__box-txt {
    padding: min(15/390 * 100vw, 15px) min(40/390 * 100vw, 40px) min(15/390 * 100vw, 15px)
      min(20/390 * 100vw, 20px);
    font-size: var(--fontsize16);
  }

  #home .crosstalk__box-txt::after {
    right: min(15/390 * 100vw, 15px);
    translate: 0 -50%;
    width: min(23/390 * 100vw, 23px);
    height: min(23/390 * 100vw, 23px);
    background-size: min(10/390 * 100vw, 10px) min(10/390 * 100vw, 10px);
  }

  #home .crosstalk__box-txt::before{
    top: calc(min(15/390 * 100vw, 15px) + 1em);
    left: 5px;
  }
}

/* --------------------------------------------
キャリ採用 インタビュー
-----------------------------------------------*/
#home .career {
  padding: min(90/1200 * 100vw, 90px) 0 min(120/1200 * 100vw, 120px);
  background: var(--base-white);
}

#home .career_content {
  display: flex;
  gap: min(80/1200 * 100vw, 80px);
}

#home .career__box{
  width: 100%;
}

#home .career__box-img{
  margin-bottom: min(20/1200 * 100vw, 20px);
  aspect-ratio: 112/69;
  background: #4d4d4d;
}

#home .career__box-img img{
  width: 100%;
}

#home .career__box-txt{
  position: relative;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--base-orange);
  padding: 0 min(75/1200 * 100vw, 75px) min(20/1200 * 100vw, 20px) min(35/1200 * 100vw, 35px);
}

#home .career__box-txt::before{
  content: '';
  width: 7px;
  height: 6px;
  background: var(--base-orange);
  position: absolute;
  top: 0.8em;
  left: 10px;
  pointer-events: none;
  transform: skewX(-30deg);
}

#home .career__box-txt::after{
  content: '';
  position: absolute;
  width: min(46/1200 * 100vw, 46px);
  height: min(46/1200 * 100vw, 46px);
  background : url(img/top/white-right-arw.png) center center / auto auto no-repeat scroll padding-box border-box transparent;
  background-size: min(15/1200 * 100vw, 15px) min(15/1200 * 100vw, 15px);
  background-position: center center;
  background-color: var(--base-black);
  border-radius: 50%;
  top: 50%;
  right: 30px;
  translate: 0 -50%;
  pointer-events: none;
}

#home .career__box-division{
  font-size: var(--fontsize20);
  font-weight: 600;
}

#home .career__box-join {
  font-size: var(--fontsize14);
}

@media screen and (max-width: 767px) {
  #home .career {
    padding: min(60/390 * 100vw, 60px) 0 min(65/390 * 100vw, 65px);
  }

  #home .career_content {
    flex-wrap: wrap;
    gap: min(30 / 390 * 100vw, 30px);
  }

  #home .career__box-txt {
    padding: 0 min(40/390 * 100vw, 40px) min(5/390 * 100vw, 5px) min(20/390 * 100vw, 20px);
  }

  #home .career__box-txt::before{
    left: min(10/1200 * 100vw, 10px);
    width: 6px;
    height: 6px;
  }

  #home .career__box-txt::after {
    right: min(15/390 * 100vw, 15px);
    translate: 0 -50%;
    width: min(23/390 * 100vw, 23px);
    height: min(23/390 * 100vw, 23px);
    background-size: min(10/390 * 100vw, 10px) min(10/390 * 100vw, 10px);
  }

  #home .career__box-division {
    font-size: var(--fontsize18);
  }

  #home .career__box-join {
    font-size: var(--fontsize12);
  }
}

/* --------------------------------------------
動画インタビュー
-----------------------------------------------*/
#home .movie {
  padding: min(90/1200 * 100vw, 90px) 0 min(120/1200 * 100vw, 120px);
  background: var(--base-light-gray);
}

#home .movie_content {
  display: flex;
  gap: min(80/1200 * 100vw, 80px);
}

#home .movie__box{
  width: 100%;
}

#home .movie__box-mov{
  margin-bottom: min(20/1200 * 100vw, 20px);
  background: #4d4d4d;
  width: 100%;
  height: auto;
  /* aspect-ratio: 16/9; */
}

#home .movie__box-img video{
  width: 100%;
}

#home .movie__box-txt{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 min(75/1200 * 100vw, 75px) min(20/1200 * 100vw, 20px) min(35/1200 * 100vw, 35px);
}

#home .movie__box-txt::before{
  content: '';
  width: 7px;
  height: 6px;
  background: var(--base-orange);
  position: absolute;
  top: 0.8em;
  left: 10px;
  pointer-events: none;
  transform: skewX(-30deg);
}

#home .movie__box-division{
  font-size: var(--fontsize20);
  font-weight: 600;
}

#home .movie__box-join {
  font-size: var(--fontsize14);
}

@media screen and (max-width: 767px) {
  #home .movie {
    padding: min(60/390 * 100vw, 60px) 0 min(65/390 * 100vw, 65px);
  }

  #home .movie_content {
    flex-wrap: wrap;
    gap: min(30 / 390 * 100vw, 30px);
  }

  #home .movie__box-txt {
    padding: 0 min(40/390 * 100vw, 40px) min(5/390 * 100vw, 5px) min(20/390 * 100vw, 20px);
  }

  #home .movie__box-txt::before{
    left: min(10/1200 * 100vw, 10px);
    width: 6px;
    height: 6px;
  }

  #home .movie__box-division {
    font-size: var(--fontsize18);
  }

  #home .movie__box-join {
    font-size: var(--fontsize12);
  }
}

/* --------------------------------------------
環境を知る
-----------------------------------------------*/

#home .environment {
  background: var(--base-light-gray);
}

#home .environment__wrap {
  padding: min(110/1200 * 100vw, 110px) 0 min(130/1200 * 100vw, 130px);
}

#home .environment__contain {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: min(80/1200 * 100vw, 80px);
}

#home .environment__box-image{
  margin-bottom: min(35/1200 * 100vw, 35px);
  aspect-ratio: 112/69;
  background: #4d4d4d;
}

#home .environment__box-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#home .environment__link {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

#home .environment__link-btn{
  position: relative;
  display: block;
  font-size: var(--fontsize20);
  font-weight: 600;
  padding: min(20/1200 * 100vw, 20px) min(75/1200 * 100vw, 75px) min(20/1200 * 100vw, 20px)
    min(35/1200 * 100vw, 35px);
  border-bottom: 1px solid var(--base-orange);
  width: 100%;
}

#home .environment__link-btn::before{
  content: '';
  width: 7px;
  height: 6px;
  background: var(--base-orange);
  position: absolute;
  top: 50%;
  left: 10px;
  translate: 0 -50%;
  pointer-events: none;
  transform: skewX(-30deg);
}

#home .environment__link-btn::after{
  content: '';
  position: absolute;
  width: min(46/1200 * 100vw, 46px);
  height: min(46/1200 * 100vw, 46px);
  background : url(img/top/white-right-arw.png) center center / auto auto no-repeat scroll padding-box border-box transparent;
  background-size: min(15/1200 * 100vw, 15px) min(15/1200 * 100vw, 15px);
  background-position: center center;
  background-color: var(--base-black);
  border-radius: 50%;
  top: 50%;
  right: 30px;
  translate: 0 -50%;
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  #home .environment__wrap {
    padding: min(60/390 * 100vw, 60px) 0 min(65/390 * 100vw, 65px);
  }

  #home .environment__contain {
    grid-template-columns: repeat(1, 1fr);
    gap: min(30/390 * 100vw, 30px);
  }

  #home .environment__link-btn {
    font-size: var(--fontsize16);
    padding: min(15/390 * 100vw, 15px) min(40/390 * 100vw, 40px) min(15/390 * 100vw, 15px)
      min(20/390 * 100vw, 20px);
  }

  #home .environment__link-btn::before{
    left: min(10/1200 * 100vw, 10px);
    width: 6px;
    height: 6px;
  }

  #home .environment__link-btn::after {
    right: min(15/390 * 100vw, 15px);
    translate: 0 -50%;
    width: min(23/390 * 100vw, 23px);
    height: min(23/390 * 100vw, 23px);
    background-size: min(10/390 * 100vw, 10px) min(10/390 * 100vw, 10px);
  }
}