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

※このスタイルシートはSCSSで生成されています。
cssへの直記入はなさらないようにしてください。

-----------------------------------------*/
/* 変数の定義
--------------------------------------------------*/
/*-----------------------------------------

※このスタイルシートはSCSSで生成されています。
cssへの直記入はなさらないようにしてください。

-----------------------------------------*/
/*-----------------------------------------

※このスタイルシートはSCSSで生成されています。
cssへの直記入はなさらないようにしてください。

-----------------------------------------*/
/* 色の定義
--------------------------------------------------*/
/* フォントの定義
--------------------------------------------------*/
html,
body,
ul,
ol,
dl,
li,
dt,
dd,
a,
p,
div,
img,
svg,
table,
tr,
th,
td,
figure {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.6;
  color: #000F08;
}

body,
ul,
ol,
dl,
li,
dt,
dd,
p,
div,
img,
svg,
a,
table,
tr,
th,
td,
figure {
  font-size: 1.6rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  letter-spacing: 0.05em;
  line-height: 1.6;
  font-weight: 700;
}

.en {
  font-family: "Google Sans", sans-serif;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1;
  font-weight: 500;
  display: inline-block;
}

/* TOPページ
--------------------------------------------------*/
/* KV
--------------------------------------------------*/
#kv {
  position: relative;
  height: 420vh;
  background: #0c295a;
  overflow: clip;
}
@media screen and (max-width: 999px) {
  #kv {
    height: 360vh;
  }
}
@media screen and (max-width: 768px) {
  #kv {
    height: 330vh;
  }
}
#kv .kv_bg_fixed {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  z-index: 1;
}
#kv .kv_media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#kv .kv_video,
#kv .kv_fallback {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
#kv .kv_fallback {
  position: absolute;
  inset: 0;
  z-index: -1;
}
#kv .kv_gradation {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(125, 229, 255, 0.6) 0%, rgba(85, 78, 210, 0.7) 42%, rgba(19, 65, 143, 0.92) 100%);
}
#kv .kv_catch_layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
#kv .kv_catch_list {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 40vh;
  padding-bottom: 38vh;
}
#kv .kv_catch_item {
  position: relative;
  width: 100%;
  color: #fff;
  opacity: 0;
}
#kv .kv_catch_item:first-child .kv_title {
  margin-bottom: 20px;
}
@media screen and (max-width: 999px) {
  #kv .kv_catch_item:first-child .kv_title {
    white-space: nowrap;
  }
}
#kv .kv_catch_item:first-child .kv_text {
  font-size: clamp(1.4rem, 2.4vw, 2.8rem);
  display: block;
}
#kv .kv_catch_item.is-active .kv_text {
  opacity: 1;
  transform: translateY(0);
}
#kv .kv_catch_item.is-active.is-animated .kv_title .char {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
#kv .kv_catch_item.is-active.is-animating .kv_title .char {
  animation: kv-char-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--char-index, 0) * 0.028s);
}
#kv .kv_title {
  font-size: clamp(5rem, 5.6vw, 6.4rem);
  line-height: 1.3;
  font-weight: 900;
  margin-bottom: clamp(20px, 2vw, 30px);
  color: #fff;
  opacity: 0;
}
#kv .kv_title:has(.char) {
  opacity: 1;
}
@media screen and (max-width: 999px) {
  #kv .kv_title {
    font-size: clamp(2.5rem, 7.1428571429vw + 0.2143rem, 5rem);
  }
}
#kv .kv_title_sub {
  font-size: clamp(4rem, 4vw, 5rem);
  font-weight: 700;
}
@media screen and (max-width: 999px) {
  #kv .kv_title_sub {
    font-size: clamp(2.7rem, 7.17vw, 4rem);
  }
}
#kv .kv_title .kv_em {
  font-size: clamp(8rem, 8vw, 10rem);
  font-weight: 900;
  margin-left: 0.17em;
}
@media screen and (max-width: 999px) {
  #kv .kv_title .kv_em {
    font-size: clamp(3.4rem, 17.1428571429vw - 2.0857rem, 4.6rem);
  }
}
@media screen and (min-width: 391px) and (max-width: 999px) {
  #kv .kv_title .kv_em {
    font-size: clamp(4.6rem, 5.5737704918vw + 2.4262rem, 8rem);
  }
}
#kv .kv_text {
  font-size: clamp(1.6rem, 2vw, 2rem);
  line-height: 1.6;
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
@media screen and (max-width: 999px) {
  #kv .kv_text {
    font-size: 1.4rem;
  }
}
#kv .kv_scroll_deco {
  pointer-events: none;
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 50px;
}
#kv .kv_scroll_deco_line {
  display: inline-block;
  position: relative;
  width: 1px;
  height: 70px;
  background: rgba(255, 255, 255, 0.35);
  overflow: hidden;
}
#kv .kv_scroll_deco_line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 24px;
  background: #fff;
  transform: translateY(-120%);
  animation: kv-scroll-line-flow 1.6s ease-in-out infinite;
}
#kv .kv_scroll_cue_label {
  display: inline-block;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.03em;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  color: #fff;
}
@keyframes kv-scroll-line-flow {
  0% {
    transform: translateY(-120%);
  }
  70% {
    transform: translateY(290%);
  }
  100% {
    transform: translateY(290%);
  }
}
#kv .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  filter: blur(6px);
  will-change: transform, opacity, filter;
}
@keyframes kv-char-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

#business {
  padding-top: 150px;
}
@media screen and (max-width: 999px) {
  #business {
    padding-top: 100px;
  }
}
@media screen and (max-width: 768px) {
  #business {
    padding-top: 72px;
  }
}
#business .wrap_top_business {
  display: grid;
  grid-template-columns: minmax(245px, 28%) 1fr;
  gap: clamp(50px, 5vw, 70px);
  align-items: start;
}
@media screen and (max-width: 999px) {
  #business .wrap_top_business {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
#business .business_head .sec_ttl .en {
  font-style: normal;
  line-height: 1;
  font-size: clamp(5rem, 6vw, 7rem);
  color: #2F5BFF;
}
#business .business_head .sec_ttl h2 {
  margin-top: 14px;
  font-size: 1.6rem;
  font-weight: 500;
  color: #2F5BFF;
}
#business .business_head .sec_btn {
  margin-top: 28px;
}
#business .business_list {
  display: grid;
  gap: 30px;
}
@media screen and (max-width: 999px) {
  #business .business_list {
    gap: 20px;
  }
}
#business .business_card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 265px;
  border-radius: 15px;
  overflow: hidden;
  padding: 0 clamp(20px, 3vw, 40px);
  isolation: isolate;
}
@media screen and (max-width: 999px) {
  #business .business_card {
    justify-content: flex-start;
    padding: 45px 20px;
    min-height: 220px;
  }
}
#business .business_card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(12, 41, 90, 0.2);
  transition: background 0.3s ease-in-out;
}
#business .business_card .media {
  position: absolute;
  inset: 0;
  z-index: -2;
  transition: transform 0.3s ease-in-out;
}
#business .business_card video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
#business .business_card .txt {
  width: calc(100% - 80px);
  color: #fff;
}
@media screen and (max-width: 999px) {
  #business .business_card .txt {
    width: 100%;
  }
}
#business .business_card h3 {
  font-size: clamp(2.4rem, 2.8vw, 2.8rem);
  margin-bottom: 20px;
  color: #fff;
}
@media screen and (max-width: 999px) {
  #business .business_card h3 {
    font-size: clamp(2rem, 5.12vw, 2.4rem);
    margin-bottom: 16px;
  }
}
#business .business_card p {
  color: #fff;
}
@media screen and (max-width: 999px) {
  #business .business_card p {
    font-size: 1.4rem;
  }
}
#business .business_card p .pc-view {
  display: none !important;
}
@media screen and (min-width: 769px) {
  #business .business_card p .pc-view {
    display: inline-block !important;
  }
}
#business .business_card .arrow {
  position: absolute;
  width: 25px;
  height: 17px;
  right: 55px;
  bottom: 55px;
  background-image: url(../img/common/arrow-white.svg);
  background-size: contain;
  background-repeat: no-repeat;
  --arrow-base-transform: translateX(0);
  transform: translateX(0);
}
@media screen and (max-width: 999px) {
  #business .business_card .arrow {
    right: 20px;
    bottom: 20px;
  }
}
#business .business_card:hover::before {
  background: rgba(12, 41, 90, 0.7);
}
#business .business_card:hover .media {
  transform: scale(1.1);
}

#mindset,
#company {
  background: #fff;
}
#mindset .sec_ttl,
#company .sec_ttl {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  #mindset .sec_ttl,
  #company .sec_ttl {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 30px;
  }
}
#mindset .sec_ttl .en,
#company .sec_ttl .en {
  font-style: normal;
  font-size: clamp(5rem, 6vw, 7rem);
  line-height: 1;
  color: #2F5BFF;
}
#mindset .sec_ttl h2,
#company .sec_ttl h2 {
  color: #2F5BFF;
  font-size: 1.6rem;
  font-weight: 500;
}

#mindset .mindset_card,
#company .company_card {
  display: block;
  transition: opacity 0.3s ease-in-out;
}
@media screen and (max-width: 768px) {
  #mindset .mindset_card,
  #company .company_card {
    display: grid;
    grid-template-columns: max(23.5%, 80px) 1fr;
    align-items: center;
    gap: clamp(10px, 2.8vw, 20px);
    padding: 15px 10px;
    border-bottom: solid 1px #D9D9D9;
  }
}
#mindset .mindset_card .media,
#company .company_card .media {
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 12px;
  aspect-ratio: 560/270;
  background: #dde6f6;
}
@media screen and (max-width: 768px) {
  #mindset .mindset_card .media,
  #company .company_card .media {
    border-radius: 4%;
    aspect-ratio: 1/1;
    margin-bottom: 0;
  }
}
#mindset .mindset_card img,
#company .company_card img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: transform 0.3s ease-in-out;
}
#mindset .mindset_card .en_sub,
#company .company_card .en_sub {
  color: #2F5BFF;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.6;
}
@media screen and (max-width: 768px) {
  #mindset .mindset_card .en_sub,
  #company .company_card .en_sub {
    font-size: 1.2rem;
  }
}
#mindset .mindset_card .row,
#company .company_card .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: solid 1px #d7d7d7;
  gap: 12px;
  padding-bottom: 10px;
}
@media screen and (max-width: 768px) {
  #mindset .mindset_card .row,
  #company .company_card .row {
    padding-bottom: 0;
    border: none;
  }
}
#mindset .mindset_card h3,
#company .company_card h3 {
  font-size: 2rem;
}
@media screen and (max-width: 449px) {
  #mindset .mindset_card h3,
  #company .company_card h3 {
    font-size: clamp(1.6rem, 5.12vw, 2rem);
  }
}
#mindset .mindset_card .arrow,
#company .company_card .arrow {
  width: 20px;
  height: 14px;
}
#mindset .mindset_card:hover,
#company .company_card:hover {
  opacity: 0.6;
}
#mindset .mindset_card:hover .media img,
#company .company_card:hover .media img {
  transform: scale(1.1);
}

#mindset {
  padding: 100px 0;
  overflow: hidden;
}
@media screen and (max-width: 999px) {
  #mindset {
    padding: 80px 0;
  }
}
@media screen and (max-width: 768px) {
  #mindset {
    padding: 60px 0;
  }
}
#mindset .wrap_top_mindset {
  position: relative;
  z-index: 1;
}
#mindset .wrap_top_mindset::before {
  content: "";
  position: absolute;
  top: clamp(-100px, -8vw, -52px);
  left: clamp(-100px, -8vw, -43px);
  width: clamp(390px, 55vw, 655px);
  aspect-ratio: 1/1;
  z-index: -1;
  pointer-events: none;
  opacity: 0.3;
  background: url(../img/common/logo_bg.svg) no-repeat center/contain;
}
#mindset .mindset_list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}
@media screen and (max-width: 768px) {
  #mindset .mindset_list {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

#company {
  padding: 60px 0 100px;
}
@media screen and (max-width: 999px) {
  #company {
    padding: 40px 0 80px;
  }
}
@media screen and (max-width: 768px) {
  #company {
    padding: 20px 0 60px;
  }
}
#company .company_list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 6vw, 77px);
}
@media screen and (max-width: 768px) {
  #company .company_list {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

#pickup {
  background: #EDF3FD;
  padding: 80px 0;
}
@media screen and (max-width: 999px) {
  #pickup {
    padding: 60px 0;
  }
}
#pickup .sec_ttl {
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  #pickup .sec_ttl {
    margin-bottom: 30px;
  }
}
#pickup .sec_ttl .en {
  font-style: normal;
  font-size: 4rem;
  line-height: 1;
  color: #2F5BFF;
}
@media screen and (max-width: 768px) {
  #pickup .sec_ttl .en {
    font-size: 5rem;
  }
}
#pickup .sec_ttl h2 {
  margin-top: 10px;
  color: #2F5BFF;
  font-size: 1.6rem;
  font-weight: 500;
}
#pickup .pickup_list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
}
@media screen and (max-width: 768px) {
  #pickup .pickup_list {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
#pickup .pickup_card {
  display: block;
  position: relative;
  transition: opacity 0.3s ease-in-out;
}
#pickup .pickup_card .img {
  border-radius: 7px;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 352/172;
  margin-bottom: 12px;
}
#pickup .pickup_card img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: transform 0.3s ease-in-out;
}
#pickup .pickup_card .date {
  color: #99a9b0;
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 4px;
}
#pickup .pickup_card .ttl_wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 15px;
}
#pickup .pickup_card .ttl_wrap .ttl {
  color: #000F08;
  font-size: clamp(1.8rem, 1.8vw, 2rem);
  font-weight: 700;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease-in-out;
}
#pickup .pickup_card .ttl_wrap .ttl span {
  color: inherit;
}
#pickup .pickup_card .ttl_wrap .arrow {
  width: 20px;
  height: 14px;
}
#pickup .pickup_card:hover {
  opacity: 0.6;
}
#pickup .pickup_card:hover .img img {
  transform: scale(1.1);
}
#pickup .pickup_card:hover .ttl {
  color: #2F5BFF;
}

#news {
  background: #fff;
  padding: 100px 0;
}
@media screen and (max-width: 999px) {
  #news {
    padding: 80px 0;
  }
}
@media screen and (max-width: 768px) {
  #news {
    padding: 60px 0;
  }
}
#news .news_head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 47px;
}
@media screen and (max-width: 768px) {
  #news .news_head {
    display: contents;
  }
}
@media screen and (max-width: 768px) {
  #news .wrap_top_news {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  #news .sec_ttl {
    order: 1;
  }
  #news .news_list {
    order: 2;
  }
  #news .news_btn {
    order: 3;
    margin-left: auto;
  }
}
#news .sec_ttl .en {
  font-style: normal;
  font-size: clamp(5rem, 5.6vw, 5.6rem);
  line-height: 1;
  color: #2F5BFF;
}
#news .sec_ttl h2 {
  margin-top: 12px;
  color: #2F5BFF;
  font-size: 1.6rem;
  font-weight: 500;
}
#news .news_btn {
  width: 166px;
  height: 44px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  font-weight: 500;
  background: linear-gradient(49deg, #3FC8FF 0%, #4FB6FF 20%, #5C8BFF 40%, #5E6AF0 60%, #3F56D8 80%, #214EC7 100%);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
#news .news_btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #2F5BFF;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease-in-out;
}
#news .news_btn:hover::before {
  opacity: 1;
}
@media screen and (max-width: 768px) {
  #news .news_list {
    border-top: solid 1px #D9D9D9;
  }
}
#news .news_list li:first-child a {
  padding-top: 0;
}
@media screen and (max-width: 768px) {
  #news .news_list li:first-child a {
    padding-top: 20px;
  }
}

#recruit {
  background: #fff;
  padding: 0 0 100px;
}
@media screen and (max-width: 999px) {
  #recruit {
    padding: 0 0 80px;
  }
}
@media screen and (max-width: 768px) {
  #recruit {
    padding: 0 0 60px;
  }
}
#recruit .wrap_top_recruit {
  display: grid;
  grid-template-columns: 1fr minmax(360px, 43.6%);
  align-items: center;
  gap: 30px;
}
@media screen and (max-width: 768px) {
  #recruit .wrap_top_recruit {
    grid-template-columns: auto;
    gap: 0;
  }
}
@media screen and (max-width: 768px) {
  #recruit .recruit_left {
    display: contents;
  }
  #recruit .sec_ttl {
    order: 1;
  }
  #recruit .recruit_right {
    order: 2;
  }
  #recruit .recruit_catch {
    order: 3;
  }
  #recruit .recruit_txt {
    order: 4;
  }
  #recruit .recruit_btn {
    order: 5;
  }
}
#recruit .sec_ttl {
  margin-bottom: 30px;
}
#recruit .sec_ttl .en {
  color: #2F5BFF;
  font-style: normal;
  font-size: clamp(5rem, 5.6vw, 5.6rem);
  line-height: 1;
}
#recruit .sec_ttl h2 {
  margin-top: 12px;
  color: #2F5BFF;
  font-size: 1.6rem;
  font-weight: 500;
}
#recruit .recruit_catch {
  font-size: clamp(3.4rem, 4.2vw, 4.8rem);
  line-height: 1.4;
  font-weight: 700;
  color: #000F08;
  margin-bottom: 20px;
}
#recruit .recruit_catch span {
  background: linear-gradient(90deg, #5992FF 0%, #52A5FF 30%, #4ABBFF 60%, #43CEFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media screen and (max-width: 999px) {
  #recruit .recruit_catch {
    font-size: clamp(3rem, 7.69vw, 3.4rem);
  }
}
#recruit .recruit_txt {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  #recruit .recruit_txt {
    font-size: 1.6rem;
  }
}
#recruit .recruit_right {
  border-radius: 15px;
  overflow: hidden;
  aspect-ratio: 1/1;
}
@media screen and (max-width: 768px) {
  #recruit .recruit_right {
    aspect-ratio: 350/270;
    margin-bottom: 30px;
  }
}
#recruit .recruit_right img {
  width: 100%;
  height: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}/*# sourceMappingURL=top.css.map */