@charset "UTF-8";

h2 { color: #254678; font-size: 2.0rem; font-weight: 500; line-height: 1.0; letter-spacing: 0.04em; }
h2 span { margin-bottom: 12px; display: block; font-family: "Roboto", sans-serif; font-size: 7.4rem; font-weight: 500; letter-spacing: 0.01em; }

@media screen and (max-width: 767px) {
  h2 { font-size: 1.6rem; }
  h2 span { font-size: 5.0rem; margin-bottom: 8px; }
}

/* --------------------------------------------------
	MV
-------------------------------------------------- */
#mv { width: 100%; height: 100vh; overflow: hidden; display: flex; justify-content: center; position: relative;  }
#mv .mv-bg { width: 100%; height: 100%; }
#mv .mv-bg .slick-slide { height: 100vh; object-fit: cover; object-position: center; }
#mv .mv-text { width: 100%; height: 100%; display: flex; align-items: center; position: absolute; top: 0; left: 0; }
#mv .copy-en { margin-bottom: 16px; color: #DA6A38; font-size: 2.4rem; font-weight: 700; opacity: 0; transform: translateY(15%); animation: textanimation-en 1s forwards; animation-delay: 1s; transition: translate 0.7s cubic-bezier(0.25, 1, 0.5, 1); }
#mv .copy { color: #fff; font-size: 6.0rem; font-weight: 700; line-height: 1.5; overflow: hidden; }
#mv .copy span { display: inline-block; transform: translateY(15%); opacity: 0; animation: textanimation 1s forwards; transition: translate 0.7s cubic-bezier(0.25, 1, 0.5, 1); animation-delay: calc(1.0s + (0.05s * var(--index)));  }
@keyframes textanimation-en {
  0% {
    opacity: 0;
    transform: translateY(15%);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes textanimation {
  0% {
      transform: translateY(15%);
      opacity: 0;
  }
  100% {
      transform: translateY(0);
      opacity: 1;
  }
}
#mv .loop-container { display: flex; justify-content: center; align-items: center; overflow: hidden; position: absolute; bottom: -23px; left: 0; }
#mv .loop-wrapper { display: flex; animation: loop-text 20s linear infinite; }
#mv .loop-wrapper span { padding: 0 20px; display: inline-block; font-family: "Roboto", sans-serif; color: #fff; font-size: 15rem; font-weight: 500; line-height: 1; white-space: nowrap; }
@keyframes loop-text {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}


@media screen and (max-width: 767px) {
  #mv .copy-en { margin-bottom: 10px; font-size: 1.6rem; }
  #mv .copy { font-size: 8vw; line-height: 1.56; }
  #mv .loop-container {  bottom: -12px; }
  #mv .loop-wrapper span { font-size: 75px; }
}

/* --------------------------------------------------
	service
-------------------------------------------------- */
#service { padding: 120px 0 140px; background: #fff; }
#service .service-top { display: flex; gap: 160px; justify-content: space-between; align-items: center; }
#service .service-top p { font-size: 1.8rem; }
#service .service-li { margin-top: 60px; width: 100%; display: flex; justify-content: space-between; row-gap: 50px; flex-wrap: wrap; list-style: none; }
#service .service-li li { width: 48%; background: #fff; box-shadow: 4px 4px 4px rgba(37, 70, 120, 0.2); border-radius: 10px; overflow: hidden; }
#service .service-li li a { text-decoration: none; }
#service .service-li .img-wrap { width: 100%; height: 190px; display: flex; align-items: center; overflow: hidden; }
#service .service-li .img-wrap img { width: 100%; height: auto; transition: all .3s; }
#service .service-li li a:hover .img-wrap img { transform: scale(1.05); }
#service .service-li .text-wrap { padding: 20px; }
#service .service-li .text-wrap span { color: #254678; font-size: 2.0rem; font-weight: 500; display: flex; align-items: center; gap: 8px; }
#service .service-li .text-wrap span img { width: 38px; transition: all .3s; }
#service .service-li li a:hover span img { transform: translateX(1px); }
#service .service-li .text-wrap p { color: #000; font-size: 1.8rem; }

@media screen and (max-width: 767px) {
  #service { padding: 70px 0; }
  #service .service-top { flex-direction: column; align-items: flex-start; gap: 24px; }
  #service .service-top p { font-size: 1.6rem; }
  #service .service-li { margin-top: 24px; row-gap: 24px; }
  #service .service-li li { width: 100%; }
  #service .service-li .img-wrap { height: auto; }
  #service .service-li .text-wrap { padding: 16px; min-height: 128px; }
  #service .service-li .text-wrap span { padding-bottom: 10px; font-size: 2rem; gap: 5px; }
  #service .service-li .text-wrap span img { width: 28px; height: auto; }
  #service .service-li .text-wrap p { line-height: 1.5; }
}


/* --------------------------------------------------
	works
-------------------------------------------------- */
#works { padding: 120px 0; background: #EAF6FD; }
#works .works-top { display: flex; gap: 100px; justify-content: space-between; align-items: center; }
#works .works-top p { font-size: 1.6rem; }
#works .works-li { margin-top: 60px; }
#works .works-li ul { display: flex; justify-content: space-between; list-style: none; counter-reset: num; }
#works .works-li li { width: 23%; aspect-ratio: 6/7; position: relative; }
#works .works-li .img-wrap { width: 100%; height: 100%; border-radius: 0 100px 0 0; overflow: hidden; z-index: 1; isolation: isolate; }
#works .works-li .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: all .3s; }
#works .works-li a:hover .img-wrap img { transform: scale(1.05); }
#works .works-li p { color: #fff; font-size: 1.6rem; position: absolute; bottom: 10px; left: 10px; }
#works .works-li span { display: block; font-size: 2.0rem; line-height: 1.5; }
#works .works-li span.no { font-size: 5.0rem; color: #254678; font-weight: 700; line-height: 1; position: absolute; top: 0; right: 0; z-index: 10; text-shadow:1.5px 1.5px 0 #FFF, -1.5px -1.5px 0 #FFF, -1.5px 1.5px 0 #FFF, 1.5px -1.5px 0 #FFF, 0px 1.5px 0 #FFF,  0-1.5px 0 #FFF, -1.5px 0 0 #FFF, 1.5px 0 0 #FFF; }
/*
#works .works-li li:before { counter-increment: num 1; content: counter(num,decimal-leading-zero); font-size: 5.0rem; color: #254678; font-weight: 700; line-height: 1; position: absolute; top: 0; right: 0; z-index: 10; text-shadow:1.5px 1.5px 0 #FFF, -1.5px -1.5px 0 #FFF, -1.5px 1.5px 0 #FFF, 1.5px -1.5px 0 #FFF, 0px 1.5px 0 #FFF,  0-1.5px 0 #FFF, -1.5px 0 0 #FFF, 1.5px 0 0 #FFF; }
*/
#works .btn { margin-top: 50px; display: flex; justify-content: center; }
#works .btn a { width: 300px; height: 70px; padding: 0 10px 0 30px; display: flex; align-items: center; justify-content: space-between; background: #254678; border-radius: 10vw; color: #fff; font-size: 1.8rem; font-weight: 500; transition: all .3s; }
#works .btn a:hover { background: #1b355b; text-decoration: none; }
#works .btn a span { display: block; width: 45px; height: 45px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
#works .btn a span img { transition: all .3s; }
#works .btn a:hover span img { transform: translateX(2px); opacity: 1; }

@media screen and (max-width: 767px) {
  #works { padding: 50px 0 70px; }
  #works .works-top { display: block; }
  #works h2 { margin-bottom: 24px; }
  #works .works-li { margin-top: 30px; width: calc(100% + 20px); overflow: scroll; }
  #works .works-li ul { min-width: 1240px; }
  #works .btn { margin-top: 30px; }
  #works .btn a { height: 60px; }
  #works .btn a span { width: 38px; height: 38px; }
  #works .btn a span img { width: 25px; }
}

/* --------------------------------------------------
	company
-------------------------------------------------- */
#company { padding: 120px 0 160px; }
#company .flex { display: flex; flex-direction: row; justify-content: space-between; }
#company .text-wrap { width: 45%; } 
#company .img-wrap { width: 49.8%; border-radius: 10px; overflow: hidden;}
#company .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
#company h2 { margin-bottom: 50px; }
#company ul { margin-top: 20px; border-top: solid 1px #9D9999; }
#company li { list-style: none; border-bottom: solid 1px #9D9999; }
#company li a { padding: 20px 0; display: flex; justify-content: space-between; align-items: center; color: #000; font-size: 1.8rem; font-weight: 500; transition: all .3s; }
#company li a:hover { text-decoration: none; color: #1b355b; }
#company li a img { width: 52px; transition: all .3s; }
#company li a:hover img { transform: translateX(2px); opacity: 1; }

@media screen and (max-width: 767px) {
  #company { padding: 60px 0 80px; }
  #company .flex { flex-direction: column; justify-content: center; }
  #company .text-wrap { display: contents; width: 100%; }
  #company .text-wrap h2 { order: 1; margin-bottom: 24px; }
  #company .text-wrap p { order: 2; }
  #company .img-wrap { order: 3; width: 100%; margin: 30px 0; }
  #company .text-wrap ul { order: 4; }
  #company h2 { margin-bottom: 30px; }
  #company ul { margin-top: 0; }
  #company li a { padding: 12px 0; font-size: 1.6rem; }
  #company li a img { width: 38px; }
}


/* --------------------------------------------------
	recruit
-------------------------------------------------- */
#recruit { padding-bottom: 120px; }
#recruit .recruit-wrap { padding: 40px; width: 100%; background: #DA6A38; border-radius: 10px; display: flex; justify-content: space-between; }
#recruit .img-wrap {  width: 50%; border-radius: 10px; overflow: hidden; }
#recruit .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
#recruit .text-wrap { width: 47%; display: flex; flex-direction: column; justify-content: center; }
#recruit .recruit-wrap h2 { color: #fff; }
#recruit p { margin: 40px 0; color: #fff; }
#recruit .btn a { width: 300px; height: 70px; padding: 0 10px 0 30px; display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 10vw; color: #DA6A38; font-size: 1.8rem; font-weight: 500; transition: all .3s; }
#recruit .btn a:hover { background: #c64c15; text-decoration: none; color: #fff; }
#recruit .btn a span { display: block; width: 45px; height: 45px; border-radius: 50%; background: #DA6A38; display: flex; align-items: center; justify-content: center; transition: all .3s; }
#recruit .btn a:hover span { background-color: #fff; }
#recruit .btn a span img { transition: all .3s; }
#recruit .btn a:hover span img { transform: translateX(2px); filter: brightness(0) saturate(100%) invert(35%) sepia(43%) saturate(1544%) hue-rotate(344deg) brightness(96%) contrast(103%); }


@media screen and (max-width: 767px) {
  #recruit { padding-bottom: 60px; }
  #recruit .recruit-wrap { padding: 30px 20px; flex-direction: column; gap: 30px; }
  #recruit .text-wrap { display: contents; width: 100%; }
  #recruit .text-wrap h2 { order: 1; }
  #recruit .img-wrap { order: 2; width: 100%; height: auto; }
  #recruit .text-wrap p { order: 3; margin: 0; }
  #recruit .text-wrap .btn { order: 4; }
  #recruit .btn a { height: 60px; margin: 0 auto }
  #recruit .btn a span { width: 38px; height: 38px; }
  #recruit .btn a span img { width: 25px; }
}


/* --------------------------------------------------
	news
-------------------------------------------------- */
#news { padding: 80px 0 100px; background: #EAF6FD; }
#news .flex { display: flex; align-items: flex-start; gap: 110px; }
#news h2 { margin-bottom: 40px; }
#news .btn_more { display: inline-flex; align-items: center; gap: 5px; color: #254678; font-size: 1.6rem; text-decoration: underline; letter-spacing: -0.04em; }
#news .btn_more img { width: 38px; }
#news ul { margin-top: 20px; width: 100%; }
#news ul li { padding: 15px 0; width: 100%; font-size: 1.6rem; border-bottom: solid 1px #9D9999; list-style: none; display: flex; align-items: center; }
#news ul li span.date { margin-right: 20px; letter-spacing: 0.05em; flex-shrink: 0; }
#news ul li a { width: 100%; color: #000; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
#news ul li a img { margin-left: auto; margin-right: 0; width: 52px; transition: all .3s; }
#news ul li a:hover { text-decoration: none; }
#news ul li a:hover span.title { text-decoration: underline; }
#news ul li a:hover img { transform: translateX(2px); opacity: 1; }#news .btn_more:hover { text-decoration: none; }
#news .btn_more span.sp { display: none; }
#news .btn_more .pc { transition: all .3s; }
#news .btn_more:hover .pc { transform: translateX(2px); opacity: 1; }

@media screen and (max-width: 767px) {
  #news { padding: 50px 0 60px; }
  #news .flex { flex-direction: column; gap: 0; }
  #news .flex > div { display: contents; }
  #news h2 { order: 1; margin-bottom: 24px; }
  #news ul { order: 2; margin: 0 0 30px; border-top: solid 1px #9D9999; }
  #news ul li { padding: 16px 0; }
  #news ul li span { display: block; }
  #news ul li a img { width: 38px; }
  #news .btn_more { order: 3; margin: 0 auto; width: 300px; height: 60px; padding: 0 10px 0 30px; display: flex; align-items: center; justify-content: space-between; background: #254678; border-radius: 10vw; color: #fff; font-size: 1.8rem; text-decoration: none; transition: all .3s; }
  #news .btn_more .pc { display: none; }
  #news .btn_more span.sp { width: 38px; height: 38px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
  #news .btn_more span.sp img { width: 25px; }
}