@charset "UTF-8";
/**
* sitetop CSS
*
*/


/*
* レイアウト
*/
#sitetop {
  padding-top: 0;
}


/*
* メインビジュアル
*/
#mv {
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
/* スライド */
#mv .slider {
  position: absolute;
  top: 0;
  left: -2vw;
  width: 100%;
  max-width: 63vw;
  height: 100vh;
  max-height: 70vw;
  z-index: 4;
  pointer-events: none;
}
#mv .slider ul.slick {
  display: block;
  width: auto;
  height: 100vh;
  margin: 0;
  padding: 0;
}
#mv .slider ul.slick li {
  display: block;
  width: 100%;
  height: 100vh;
  max-height: 70vw;
  mask-image:
    url("../img/sitetop/mvSlideMask02.png");
  mask-composite: intersect;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
}
#mv .slider ul.slick img.pict {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
/* コンテンツ */
#mv .container {
  position: relative;
  z-index: 10;
  width: 100vw;
  height: 100vh;
}
#mv .container .catch {
  position: absolute;
  top: 65%;
  left: 70%;
  transform: translate(-50%, -50%);
  width: 770px;
  max-width: 40vw;
}
/* お知らせ 背景をぼかす */
#mv .newsInfo {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 20px;
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  z-index: 10;
}
#mv .newsInfo .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0;
}
#mv .newsInfo dl {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0;
  padding: 0;
}
#mv .newsInfo dt {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0;
  padding: 10px 20px 10px 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-right: #1B74C1 1px solid;
}
#mv .newsInfo dt en {
  font-family: 'Red Hat Display', sans-serif;
  font-size: 12px;
  font-weight: 700;
}
#mv .newsInfo dd {
  margin: 0;
  padding: 0;
}
#mv .newsInfo dd a {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0;
  padding: 0;
}
#mv .newsInfo dd .date {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1B74C1;
}
#mv .newsInfo dd h4 {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#mv .newsInfo dd a:hover {
  opacity: 1;
}
#mv .newsInfo dd a:hover h4 {
  text-decoration: underline;
  color: #1B74C1 !important;
}
#mv .newsInfo a.link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 500;
  color: #1B74C1;
}
#mv .newsInfo a.link::after {
  content: "";
  width: 40px;
  height: 40px;
  background-image: url(../img/arrowCircleBlue01R.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#mv .newsInfo a.link:hover {
  opacity: 1;
}
#mv .newsInfo a.link:hover::after {
  background-image: url(../img/arrowCircleBlue03R.svg);
}


/*
* 京都から世界へ
*/
#fromKyoto {
  position: relative;
  width: 100vw;
  padding: 80px 0 200px 0;
  overflow: hidden;
}
#fromKyoto img.parts01 {
  position: absolute;
  top: 90px;
  left: calc(50% - 420px);
  width: 140px;
  z-index: 10;
}
#fromKyoto .wrap {
  position: relative;
  width: 100%;
  max-width: 710px;
  margin: 0 auto;
  padding: 0;
  z-index: 11;
} 
#fromKyoto .topSectionTitle {
  position: relative;
  display: flex;
  align-items:last baseline;
  gap: 120px;
  width: 100%;
  color: #FFFFFF;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
#fromKyoto .topSectionTitle en {
  position: relative;
  display: block;
  font-family: 'Red Hat Display', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}
#fromKyoto .topSectionTitle en::before {
  content: '';
  position: absolute;
  top: calc(100% - 0.5em);
  left: -100px;
  transform: translate(0, -100%);
  display: inline-block;
  width: 80px;
  height: 1px;
  margin-right: 10px;
  background-color: #FFFFFF;
}
#fromKyoto p {
  margin: 0;
  padding: 0;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
}
#fromKyoto img.parts02 {
  position: absolute;
  bottom: 120px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 40px;
  z-index: 10;
}
#fromKyoto .lowerArch {
  position: absolute;
  bottom: -120px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 120vw;
  height: 240px;
  background-color: #F5F9FF;
  border-radius: 50%;
  z-index: 5;
}


/*
* 会社・事業を知る
*/
#company {
  position: relative;
  width: 100vw;
  margin: -1px 0 0 0;
  padding: 40px 0 0 0;
  background-color: #F5F9FF;
}
#company .topSectionTitle {
  display: flex;
  align-items: last baseline;
  gap: 20px;
  width: 100%;
  margin: 0 0 60px 0;
}
#company .topSectionTitle img.titlePict {
  transform: translateY(10px);
}
#company .topSectionTitle strong {
  display: block;
  color: #1B74C1;
  font-size: 16px;
  font-weight: 400;
}
#company .topSectionTitle strong span {
  color: #D8504C;
}
#company .topSectionTitle .line {
  flex: 1;
  height: 24px;
  transform: translateY(20px);
  background-image: url(../img/line01.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
}
/* 会社・事業を知る コンテンツ */
#company .contentWrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 0;
  margin: 0 0 40px 0;
  padding: 0;
}
#company .contentWrap .pict {
  flex: 1;
  display: block;
  width: 700px;
  max-width: calc(100% - 80px);
  height: auto;
}
#company .contentWrap .pict img {
  display: block;
  width: 100%;
  border-radius: 8px;
}
#company .contentWrap .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 830px;
  width: 50%;
  padding: 40px;
  margin: 0 0 0 -80px;
  background-color: #FFFFFF;
  border-radius: 8px;
}
#company .contentWrap .text img.mark {
  display: block;
  width: 32px;
  margin-bottom: 20px;
}
#company .contentWrap .text h4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 20px 0;
  padding: 0;
  font-size: 16px;
  font-weight: 500;
}
#company .contentWrap .text h4 en {
  font-family: 'Red Hat Display', sans-serif;
  color: #D8504C;
  font-size: 12px;
  font-weight: 700;
}
/* バナー */
#company ul.banner {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: 40px;
  margin: 0;
  padding: 0;
}
#company ul.banner li {
  flex: 1;
  margin: 0;
  padding: 0;
}
#company ul.banner li a {
  position: relative;
  flex: 1;
  display: flex;
  height: 200px;
  margin: 0;
  padding: 0;
  background-color: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
}
#company ul.banner img.pict {
  display: block;
  object-fit: contain;
  width: auto;
  max-width: 60%;
  height: 286px;
  object-position: -20px -40px;
}
#company ul.banner h5 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}
#company ul.banner h5 .dot {
  width: 25px;
}
#company ul.banner h5 en {
  font-family: 'Red Hat Display', sans-serif;
  color: #D8504C;
  font-size: 12px;
  font-weight: 700;
}
#company ul.banner img.arrow {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 32px;
}


/*
* はたらく環境を知る
*/
#environment {
  position: relative;
  width: 100vw;
  margin: 0;
  padding: 40px 0 120px 0;
  background-color: #F5F9FF;
}
#environment .inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 60px;
}
#environment .contentWrap {
  flex: 1;
  min-width: 400px;
  margin: 0;
  padding: 0;
}
/* タイトル */
#environment .topSectionTitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin: 0 0 20px 0;
}
#environment .topSectionTitle img.titlePict {
  transform: translateY(10px);
  margin-bottom: 10px;
}
#environment .topSectionTitle strong {
  display: block;
  color: #1B74C1;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}
#environment .topSectionTitle strong span {
  color: #D8504C;
}
/* イメージ画像 */
#environment .pict {
  width: 100%;
  max-width: 700px;
  height: auto;
}
#environment .pict img {
  display: block;
  width: 100%;
  border-radius: 8px;
}
/* リンクリスト */
#environment .linkList {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
}
#environment .linkList li {
  margin: 0;
  padding: 0;
}
#environment .linkList li a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin: 0;
  padding: 20px 90px 20px 20px;
  border-bottom: #E4EDF8 1px solid;
}
#environment .linkList li a img {
  display: block;
  width: 60px;
  height: 60px;
  object-fit: contain;
}
#environment .linkList li a span {
  font-size: 16px;
  font-weight: 400;
}
#environment .linkList li a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translate(0, -50%);
  width: 50px;
  height: 50px;
  background-image: url(../img/arrowCircleBlue02R.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#environment .linkList li a:hover {
  color: #1B74C1;
  background-color: #E4EDF8;
  opacity: 1;
}
#environment .linkList li a:hover::after {
  background-image: url(../img/arrowCircleBlue03R.svg);
}


/*
* 仕事を知る
*/
#jobs {
  position: relative;
  width: 100vw;
  margin: 0;
  padding: 0;
}
#jobs .wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0;
  width: 100vw;
  margin: 0;
  padding: 0;
  background: linear-gradient(90deg, #32A5ED 0%, #1A74C1 100%);
  z-index: 0;
  overflow: hidden;
}
#jobs .wrap::after {
  content: '';
  position: absolute;
  top: 70%;
  left: 80%;
  transform: translate(-50%, -50%);
  width: 480px;
  height: 452px;
  background-image: url(../img/sitetop/jobsBack01.svg);
  z-index: 1;
}
/* スライド */
#jobs .slideWrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  width: 50%;
  max-width: 720px;
  height: 100%;
  margin: 0 0 0 auto;
  padding: 0;
}
#jobs .slideWrap.sp {
  display: none;
}
#jobs .slideWrap .mySwiper {
  flex: 1;
  display: block;
  width: auto;
  height: 452px;
  margin: 0;
  padding: 0;
}
#jobs .slideWrap ul.slick {
  flex: 1;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
}
#jobs .slideWrap ul.slick li {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
}
#jobs .slideWrap ul.slick img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
#jobs .swiper-wrapper{-webkit-transition-timing-function:linear!important; -o-transition-timing-function:linear!important; transition-timing-function:linear!important; }
/* タイトル */
#jobs .contentWrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50%;
  margin: 0;
  padding: 80px 40px;
}
#jobs .topSectionTitle {
  display: flex;
  align-items: last baseline;
  justify-content: center;
  gap: 30px;
  margin: 0 0 60px 0;
  line-height: 1;
}
#jobs .topSectionTitle img.titlePict {
  transform: translateY(0px);
}
#jobs .topSectionTitle strong {
  display: block;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 400;
}
#jobs .linkButtonArrow {
  width: 280px;
  max-width: 100%;
  padding-left: 40px;
}




































/*
* スマホ用
*/
@media screen and (max-width:993px){


  /*
  * レイアウト
  */
  #sitetop {

  }


  /*
  * メインビジュアル
  */
  #mv {
    position: relative;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  /* スライド */
  #mv .slider {
    top: -5vw;
    left: -10vw;
    width: 105vw;
    max-width: 105vw;
    height: 150vw;
    max-height: 100vh;
  }
  #mv .slider ul.slick {
    display: block;
    width: auto;
    height: 100vh;
    margin: 0;
    padding: 0;
  }
  #mv .slider ul.slick li {
    display: block;
    width: 100%;
    height: 150vw;
    max-height: 100vh;
    mask-size: contain;
  }
  #mv .slider ul.slick img.pict {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  /* コンテンツ */
  #mv .container {
    position: relative;
    z-index: 10;
    width: 100vw;
    height: 100vh;
  }
  #mv .container .catch {
    position: absolute;
    top: auto;
    bottom: 20vh;
    left: auto;
    right: 5vw;
    transform: none;;
    width: 90vw;
    max-width: 90vw;
  }
  /* お知らせ 背景をぼかす */
  #mv .newsInfo {
    padding: 10px;
  }
  #mv .newsInfo dl {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin: 0;
    padding: 0;
  }
  #mv .newsInfo dt {
    display: none;
  }
  #mv .newsInfo dd {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  #mv .newsInfo dd a {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  #mv .newsInfo dd h4 {
    width: 100%;
  }
  #mv .newsInfo a.link {
    display: none;
  }


  /*
  * 京都から世界へ
  */
  #fromKyoto {
    position: relative;
    width: 100vw;
    padding: 40px 20px 160px 20px;
    overflow: hidden;
  }
  #fromKyoto img.parts01 {
    top: 90px;
    left: 50%;
    width: 60vw;
  }
  #fromKyoto .wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: none;
  } 
  #fromKyoto .topSectionTitle {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    font-size: 40px;
  }
  #fromKyoto .topSectionTitle en {
    padding: 0 0 0 100px;
  }
  #fromKyoto .topSectionTitle en::before {
    top: calc(100% - 0.5em);
    left: 0px;
    transform: translate(0, -100%);
    width: 80px;
    margin-right: 10px;
  }
  #fromKyoto img.parts02 {
    position: absolute;
    bottom: 10vw;
    left: 50%;
    transform: translate(-50%, 0);
    width: 40px;
    z-index: 10;
  }
  #fromKyoto .lowerArch {
    bottom: -10vw;
    width: 120vw;
    height: 20vw;
  }
  @media screen and (max-width:380px){
    #fromKyoto .topSectionTitle en {
      font-size: 10px;
    }
  }


  /*
  * 会社・事業を知る
  */
  #company {
    margin: -1px 0 0 0;
    padding: 20px 0 0 0;
  }
  #company .inner {
    width: 100%;
  }
  #company .topSectionTitle {
    gap: 10px;
    margin: 0 0 30px 0;
    padding: 0 20px;
  }
  #company .topSectionTitle img.titlePict {
    max-width: 40vw; 
  }
  /* 会社・事業を知る コンテンツ */
  #company .contentWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0 0 40px 0;
    padding: 0;
  }
  #company .contentWrap .pict {
    flex: none;
    width: calc(100% - 40px);
    max-width: none;
  }
  #company .contentWrap .text {
    align-items: center;
    width: 100%;
    padding: 20px;
    margin: 0;
  }
  /* バナー */
  #company ul.banner {
    flex-direction: column;
    gap: 20px;
    padding: 0 20px;
  }
  #company ul.banner li a {
    gap: 20px;
    height: auto;
  }
  #company ul.banner img.pict {
    width: 50%;
    height: auto;
    object-position: -5px -5px;
  }
  #company ul.banner h5 {
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 20px 0;
  }
  #company .separateline {
    padding: 60px 20px;
  }


  /*
  * はたらく環境を知る
  */
  #environment {
    margin: 0;
    padding: 20px 0 40px 0;
  }
  #environment .inner {
    flex-direction: column;
    gap: 60px;
  }
  #environment .contentWrap {
    flex: none;
    min-width: 100%;
  }
  /* イメージ画像 */
  #environment .pict {
    max-width: 100%;
  }


  /*
  * 仕事を知る
  */
  #jobs {
    margin: 0;
    padding: 0;
  }
  #jobs .wrap {
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 30px 0;
  }
  #jobs .wrap::after {
    top: 60%;
    left: 80%;
    transform: translate(-50%, -50%);
    width: 70vw;
    height: 70vw;
    background-image: url(../img/sitetop/jobsBack01.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
  }
  /* スライド */
  #jobs .slideWrap {
    gap: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #jobs .slideWrap.sp {
    display: block;
  }
  #jobs .slideWrap .mySwiper {
    height: auto;
  }
  #jobs .slideWrap ul.slick li {
    height: 164px !important;
  }
  /* タイトル */
  #jobs .contentWrap {
    width: 100%;
    margin: 0;
    padding: 80px 40px;
  }
  
  







}