@charset "utf-8";

@media print{
  #loading,#t-mv:before{ display:none; }
}

html{ overflow-y:scroll; }
html.on{ overflow-y:visible; }
body{ overflow-y:hidden; height:100svh; }
body.on{ overflow-y:scroll; height:100%; }

#loading {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: #fff;
  text-align: center;
}
#loading .logo{ position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); width:100%; display:none; }
#loading .logo img{ max-width:500px; width: 80%; margin:0 auto; display:block; position:relative; }
#loading .logo p{ color:#000; letter-spacing:0; font-size:110%; opacity:0; transition:opacity .5s; }
#loading .logo p.on{ opacity:1; }
#loading .logo p #loading_text{ color:#000; display:inline-block; }
/*#loading .logo p #loading_text svg{ display:none !important; }*/

#wrap{ padding-top:200vh; }
#top-mv { height:100dvh; width: 100%; z-index:1; position: fixed; top:0; left:0; max-width:1920px; background-color:rgba(20, 40, 70); overflow:hidden; }
#top-copy{ position:absolute; left:10%; top: 50%; transform: translateY(-50%); font-weight:400; z-index:5; }
#top-copy > div{ position: relative; display: flex; align-items: flex-start; gap: 1em;  line-height:1; font-size:350%;  }
#top-copy > p{ color:#fff; font-size:180%; margin-top:1em; letter-spacing:0.05em; position:relative; display:flex; width:14em; }
#top-copy > p:before{ content:""; width:0; height:1px; background:#fff; bottom:0; left:0; position:absolute; }
#top-copy > p b{ font-weight:600; flex-basis: auto; opacity:0; }
#top-copy .tc1{ background: #043ca3; background-image: linear-gradient(90deg, var(--color-base), #029ced); padding:0.1em 1em 0.1em 0.1em; clip-path: inset(0 100% 0 0); }
#top-copy .tc2{ background: #0464a3; background-image: linear-gradient(90deg, #0464a3, #02d5ec); padding:0.1em 1em 0.1em 0.1em; clip-path: inset(0 100% 0 0); }
#top-copy .tcx{ position:absolute; left:46%; top:50%; transform:translate(-50%,-50%); opacity:0; z-index:1; }

#top-mv video{ position: absolute; top: 49%; left: 49%; display: block; width: 102%; height: 102%; object-fit: cover;transform: translate(-50%,-50%); opacity:.6; }
#top-sc {
  position: absolute;
  left: 10px; bottom: 6rem; 
  width: 50px; height: 200px;
  transition: 1s 1.8s opacity;
  opacity:0;
}
#top-sc p {
  display: inline-block;
  position: absolute;
  right: 10px;
  bottom: 0;
  z-index: 2;
  padding: 10px 10px 95px;
  font-size: 70%;
  color: #fff;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
  transition: .2s;
  overflow: hidden;
}
#top-sc p::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 150px;
  background: #fff;
}
#top-sc p::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 150px;
  background: rgba(255, 255, 255, 0.4);
}
#top-sc p::after {
  animation: sdl06 2.5s infinite;
}

@keyframes sdl06 {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

#mv-news{ position:absolute; right:0; bottom:-6rem; display:flex; width:100%; align-items:center; background: #043ca3; background-image: linear-gradient(90deg, var(--color-base), #029ced); color: #fff; padding:1.5rem; font-size: 90%; text-align:left; transition:var(--tra1) 1.8s bottom; }
#mv-news h2{ font-weight:600; padding:0 2em; margin-right: 2em; border-right:1px solid #fff;  }
#mv-news ul li > a,
#mv-news ul li > p{ display:flex; align-items:center; gap:.5em 1.5em; font-size:100%; transition:.3s opacity; color: #fff; font-size:90%; }
#mv-news ul li > a:hover{ text-decoration:none; }
#mv-news ul li > a:not(.nolink):hover{ opacity:0.6; }
#mv-news ul li time{ position:relative; display:flex; align-items:center; gap:1rem; }
#mv-news ul li time:after{ background-color:#fff; color:var(--color-base); font-size:80%; padding:.2em 0 .1em; text-align:center; width:9em; text-align:center; }
#mv-news ul li .txt{ display:flex; gap:.5rem 1rem; }
#mv-news ul li .img{ display:none; }
#mv-news ul li .ctg{ background-color:#fff; color:var(--color-base); font-size:80%; padding:.3em 0 .2em; min-width:8em; text-align:center; }
#mv-news ul li p{ -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical; }

.on #mv-news{  bottom:0; }
.on #top-sc{  opacity:1; }
.on #top-copy .tc1,.on #top-copy .tc2{ animation: insetWipeIn var(--tra1) .3s  1 normal both; }
.on #top-copy .tc2{ animation-delay: 1s; }
.on #top-copy .tcx{ animation:scaleX var(--tra1) .7s both; }
@keyframes scaleX {
  0% {opacity: 0; transform: scale(1.4) translate(-50%,-50%);}
  100% {opacity: 1;  transform: scale(1) translate(-50%,-50%); }
}
.on #top-copy > p:before{ animation:wid1 1s cubic-bezier(0.33, 1, 0.68, 1) 1.3s both; }
.on #top-copy > p b{ animation:fadeIn2 .4s cubic-bezier(0.33, 1, 0.68, 1) 1.3s both; }
.on #top-copy > p b:nth-child(2){ animation-delay:1.35s; }
.on #top-copy > p b:nth-child(3){ animation-delay:1.4s; }
.on #top-copy > p b:nth-child(4){ animation-delay:1.45s; }
.on #top-copy > p b:nth-child(5){ animation-delay:1.5s; }
.on #top-copy > p b:nth-child(6){ animation-delay:1.55s; }
.on #top-copy > p b:nth-child(7){ animation-delay:1.6s; }
.on #top-copy > p b:nth-child(8){ animation-delay:1.65s; }
.on #top-copy > p b:nth-child(9){ animation-delay:1.7s; }
.on #top-copy > p b:nth-child(10){ animation-delay:1.75s; }
.on #top-copy > p b:nth-child(11){ animation-delay:1.8s; }
.on #top-copy > p b:nth-child(12){ animation-delay:1.85s; }
.on #top-copy > p b:nth-child(13){ animation-delay:1.9s; }


#mvcover{ position:absolute; left:0; top:0; width:100%; height:100vh; background-color:rgba(20, 40, 70, .8); z-index:1;  display:none; }
#top-about{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);  z-index:2; color:#fff; text-align:center; transition: .3s; pointer-events: none; width: 90%;}
#top-about.play{  pointer-events:auto; }
#top-about h2{  }
#top-about h2 b{ color:#fff; opacity:.6; }
#top-about h2 span{ opacity:.6; }
#top-about h3{ font-size:260%; font-weight:600; line-height:1.5; margin-bottom:1rem; text-shadow:0 0 10px #000; }
#top-about h3 b{ font-weight:600; font-size:110%; }
#top-about p{ font-size:95%; line-height:2.5; text-shadow:0 0 10px #000; margin-bottom:2rem; }
#top-about .view{ width:18em; }

#top-about h2,#top-about h3,#top-about p,#top-about .view{ opacity: 0; }
#top-about.play h2,#top-about.play h3,#top-about.play p,#top-about.play .view{ animation:scale var(--tra1) both; }
#top-about.play h3{ animation-delay:.2s; }
#top-about.play p{ animation-delay:.4s; }
#top-about.play .view{ animation-delay:.6s; }

h2.t-tit{ line-height:1.5; letter-spacing:0.1em; margin-bottom:2rem; }
h2.t-tit span{display:block;}
h2.t-tit b{ display:inline-block; font-size:500%; font-weight:600; line-height:1; background-clip: text; -webkit-background-clip: text; color:transparent; background-image: linear-gradient(90deg, var(--color-base), #029ced); background-repeat:no-repeat; }
h2.t-tit .arrow_box{ position:absolute; left:calc(100% + 1rem); bottom: 1em; display: flex; align-items: center; justify-content: flex-end; }
.prev-arrow,.next-arrow {
    display: block;
    width: 3em;
    height: 3em;
    background: #fff;
    border: 1px solid #112463;
    border-radius: 50%;
    transition: all .3s ease;
    cursor: pointer;
    position:relative;
}
.prev-arrow { transform: rotate(180deg); margin-right: .8rem; }
.prev-arrow::before,.next-arrow::before{
    position:absolute;
    content: "";
    width:.6em;
    height:.6em;
    border-right: 1px solid #112463;
    border-top: 1px solid #112463;
    top:0;
    bottom:0;
    left:-4px;
    right:0;
    margin:auto;
    transform:rotate(45deg);
    transition: all .3s ease;
}
.prev-arrow.slick-disabled,.next-arrow.slick-disabled{ filter: saturate(20%); opacity: .4; pointer-events:none; }
.prev-arrow:hover,.next-arrow:hover{ background:#b0e5f2; }

#tbg{ position:relative; z-index:1; }
#tbg .tbg{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #fff; transform: skewY(-5deg) translateY(10rem); overflow:hidden; }
#tbg .tbg::before{  content:""; position: absolute; top: -10rem; left:0; width:120%; height:12rem; background:#b9c1d4;  transform: rotate(7deg);  }

#top-product::after{ content:""; position: absolute; top: 25rem; left:0; width:95%; height:100%; background:#e5ebf6;  }
#top-product{ padding:0 0 10rem; margin: 0 auto; position:relative; letter-spacing:0.05em; position:relative; z-index:1;  }
#top-product .tinner{ position:relative; z-index:1; }
#top-product .pro-tit{ max-width:1200px; width: 90%; margin:0 auto 2rem; display:flex; align-items:center; justify-content:space-between; overflow: hidden; }
#top-product .pro-tit .view{ margin:0;  }
#top-product .pro-tit h2.t-tit { margin-bottom:0; position:relative; }
#top-product .pro-tit h2.t-tit b{}
#top-product .pro-tit h2.t-tit,#top-product .pro-tit .view{ opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 100);
  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
#top-product .tinner.play .pro-tit h2.t-tit,#top-product .tinner.play .pro-tit .view{ opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0); }

#proslider .slick-list{ padding:1rem 5% 1rem 10%; }
#proslider .slick-track { display: flex; }
#proslider a.pitem{ height: auto !important; margin:1rem; box-shadow:0 0 20px rgba(0, 0, 0, .2); border-radius:1rem; background-color:#fff; transition:.5s background; opacity:0; }
#proslider a.pitem .img{ border-radius:1rem 1rem 0 0; overflow:hidden;  }
#proslider a.pitem .img img{ transition:var(--tra1); }
#proslider a.pitem .txt{ overflow:hidden; padding:1.5em; position:relative; transition:.5s; }
#proslider a.pitem .txt h3{ position:relative; z-index:1; margin-bottom:.5em; }
#proslider a.pitem .txt h3 b{ font-size:150%; font-weight:600; color:#000; transition:.5s; }
#proslider a.pitem .txt h3 span{ color:var(--color-base2); font-weight:400; font-size:75%; transition:.5s; display:block; }
#proslider a.pitem .txt p{ font-size:85%; color:#555; position:relative; z-index:1; transition:.5s; }
#proslider a.pitem:hover{ text-decoration:none; background-color:var(--color-base2); }
#proslider a.pitem:hover .img{ filter:saturate(130%) brightness(1.2); }
#proslider a.pitem:hover .img img{ transform:scale(1.1); }
#proslider a.pitem:hover .txt h3 b,#proslider a.pitem:hover .txt h3 span,#proslider a.pitem:hover .txt p{ color:#fff; }
#top-product .tinner.play #proslider a.pitem{ animation: slideIn 1.5s .9s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
#top-product .tinner.play #proslider a.pitem:nth-child(2){ animation-delay:1s; }
#top-product .tinner.play #proslider a.pitem:nth-child(3){ animation-delay:1.1s; }
#top-product .tinner.play #proslider a.pitem:nth-child(4){ animation-delay:1.2s; }
#top-product .tinner.play #proslider a.pitem:nth-child(5){ animation-delay:1.3s; }
#top-product .tinner.play #proslider a.pitem:nth-child(6){ animation-delay:1.4s; }
#top-product .tinner.play #proslider a.pitem:nth-child(7){ animation-delay:2.5s; }
@keyframes slideIn {
  0% {
    transform: translateX(5rem);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  60%,100% {
    opacity: 1;
  }
}
@keyframes insetWipeIn {
    0% {
        clip-path: inset(0 100% 0 0)
    }
    to {
        clip-path: inset(0 0 0 0)
    }
}


#top-case{ /*padding:2rem 0 8rem;*/ position:relative; z-index:1; }
#top-case .tinner{ max-width:1400px; width:90%; margin:0 auto; gap: 2rem; display:flex; justify-content:space-between; }
#top-case h2{ flex-shrink: 0; }
#top-case .caselist{ max-width:1050px; }
#top-case .caselist li{ display:flex; gap:2rem; margin-bottom:3rem; align-items:flex-start; }
#top-case .caselist li .img{ width:38%; max-width:380px; border-radius:1rem; overflow:hidden; }
#top-case .caselist li .txt{ width:60%; }
#top-case .caselist li .txt h3{ margin:.5rem 0; }
#top-case .caselist li .txt h3 span{ color:var(--color-base2); font-weight:500; }
#top-case .caselist li .txt h3 b{ font-weight:600; display:block; font-size:150%; }
#top-case .caselist li .txt p{ font-size:90%; }
#top-case .caselist li .txt .view{ margin:1rem 0 0 0; }
#top-case .caselist li .txt .btn{ display:flex; justify-content:flex-end; }


#top-company{ position:relative; z-index:1;  }
#top-company .tinner{ max-width:1600px; width:90%; margin:0 auto; padding: 5rem 2rem; display:flex; align-items: center; justify-content:center; gap: 3rem; background:url(../img/top/company_bg.jpg) no-repeat center center; background-size:cover;  clip-path: inset(0 100% 0 0); }
#top-company .tinner .com-tit{  }
#top-company .tinner .com-tit > div{ overflow:hidden; }
#top-company .tinner .com-tit > div:first-child{ margin-bottom:2rem; }
#top-company .tinner .com-tit .t-tit{ color:#fff; margin-bottom:0 !important; }
#top-company .tinner .com-tit .t-tit b{ background:none; color:#fff; }
#top-company .tinner .com-tit a.view{ margin:0; }
#top-company .tinner .caselist{}
#top-company .tinner .caselist li{ margin:1rem 0; opacity:0; }
#top-company .tinner .caselist li a{ display:block; background-color:rgba(255, 255, 255, .85); padding:1rem 3.5rem 1rem 2rem; border-radius:100px; position:relative; color:#102565; font-weight:500; transition:.5s; }
#top-company .tinner .caselist li a:after{ content:""; position:absolute; top:50%; right:0; width:2rem; height:1px; background:var(--color-base2); }
#top-company .tinner .caselist li a:hover{ text-decoration:none; background-color:var(--color-base); color:#fff; }
#top-company .tinner .caselist li a:hover:after{ animation:line2 .6s forwards; }
#top-company .tinner .com-tit .t-tit,#top-company .tinner .com-tit a.view{ opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 100);
  transition: 1s .6s cubic-bezier(0.22, 1, 0.36, 1); }
#top-company .tinner.play .com-tit .t-tit,#top-company .tinner.play .com-tit a.view{ opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0); }
#top-company .tinner.play .caselist li{ animation: slideIn 1.5s .9s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
#top-company .tinner.play .caselist li:nth-child(2){ animation-delay:1s; }
#top-company .tinner.play .caselist li:nth-child(3){ animation-delay:1.1s; }
#top-company .tinner.play .caselist li:nth-child(4){ animation-delay:1.2s; }
#top-company .tinner.play .caselist li:nth-child(5){ animation-delay:1.3s; }
#top-company .tinner.play .caselist li:nth-child(6){ animation-delay:1.4s; }
#top-company .tinner.play .caselist li:nth-child(7){ animation-delay:1.5s; }
#top-company .tinner.play .caselist li:nth-child(8){ animation-delay:1.6s; }
#top-company .tinner.play{ animation: insetWipeIn 1s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 normal both; }

#top-recruit{ position:relative; z-index:1; background-color:#fff; margin:10rem 0; padding:8rem 0;  }
#top-recruit .tinner{  }
#top-recruit  .recruit_bg{ background-image: linear-gradient(90deg, #F4FBFE 25%, #D7E8F7); position:absolute; left:3%; width:94%; top:0; height:100%; overflow:hidden; border-radius:5rem; }
#top-recruit .tinner .recruit_bg img{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); opacity: 0; transform-origin: 0 0; }
#top-recruit .tinner .rec-tit{ text-align:center; margin:0 auto; position:relative; }
#top-recruit .tinner .rec-tit h2{ margin-bottom:0; }
#top-recruit .tinner .rec-tit p{ margin:1rem 0 1.5rem; }
#top-recruit .tinner .rec-tit a.view{ margin:0 auto; width:20em; }

#top-recruit .tinner .rec-tit h2,#top-recruit .tinner .rec-tit p,#top-recruit .tinner .rec-tit a.view{ opacity: 0; }
#top-recruit .tinner.play .rec-tit h2,#top-recruit .tinner.play .rec-tit p,#top-recruit .tinner.play .rec-tit a.view{ animation:scale var(--tra1) both; }
#top-recruit .tinner.play .rec-tit h2{ animation-delay:.6s; }
#top-recruit .tinner.play .rec-tit p{ animation-delay:.75s; }
#top-recruit .tinner.play .rec-tit a.view{ animation-delay:.9s; }
#top-recruit .tinner.play .recruit_bg img{ animation:scale_bg .6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

@keyframes scale_bg {
  0% {opacity: 0; transform: scale(0.2) translate(-50%,-50%);}
  100% {opacity: 1;  transform: scale(1) translate(-50%,-50%); }
}

#rec-mv-ph{ }
.foot-slider{ padding:3rem 0 0; opacity:0; }
.tinner.play .foot-slider{ animation: fade 1.3s 1.2s forwards; }
.foot-slider .slick-track{ display:flex; align-items:center; gap:2rem; }
.foot-slider .s1 { width:24vw; }
.foot-slider .s2 { width:20vw; }
.foot-slider .s3 { width:17vw; margin-top:7rem; }
.foot-slider .s4 { width:12vw; }


#top-news{ padding:22rem 0 10rem; position:relative; z-index:1;   }
#top-news > div{ max-width:1200px; margin: 0 auto; position:relative; display:flex; justify-content:space-between; text-align:left; width:90%; }
#top-news .tinner{ opacity:0; }
#top-news .tinner.play{ animation: fade2 .5s forwards; }
#top-news .news-tit{ width:26%; }
#top-news .news-tit h2 { letter-spacing:0.1em; }
#top-news .news-tit h2 b{ font-weight:300; font-size:320%; line-height:1.2; }
#top-news .news-tit h2 span{ font-size:75%; color: #777777; display:block; font-weight:400; }
#top-news .news-tit a.view{ margin:1.5rem 0; }
#top-news #news-list{ font-size:90%; width:90%; }

#contact-aside{ max-width:1500px; border-radius:1rem; width:90%; }


@media screen and (max-width: 1650px) {
  #tbg .tbg::after{ width:98%; }
}
@media screen and (max-width: 1440px) {
  #top-copy{ width:60%; }
  #top-copy .tcx{ width:12%; }
  #proslider .slick-list{ padding-left:3%; }
  #top-company .tinner { width:100%; }
  #contact-aside{ width:100%; border-radius:0; }
}
@media screen and (max-width: 1280px) {
  
  
  
  
}
@media screen and (max-width: 810px) {
  #tbg .tbg::after{ width:100%; }
  #top-copy { width: 80%; }
  #top-copy > div{ font-size:250%; }
  #top-copy > div p img{ display:block; }
  #top-product .pro-tit { margin-bottom:1rem; }
  h2.t-tit .arrow_box { left:0; top:140%; }
  h2.t-tit b { font-size:450%; }
  #top-product { padding:0 0 6rem; }
  #top-product .pro-tit .view { margin-top:1rem; }
  #top-case .tinner { display:block; }
  #top-company .tinner { display: block; padding: 5rem 5%; }
  #top-company .tinner .com-tit > div:first-child { margin-bottom: 1rem; }
  #top-company .tinner .com-tit { text-align:center; margin-bottom:1.5rem; }
  #top-company .tinner .com-tit .t-tit { margin-bottom:1rem; }
  #top-company .tinner .com-tit a.view { margin:0 auto; }
  #top-company .tinner .caselist { max-width:30em; margin:0 auto; font-size:110%; }
  #top-recruit{ position:relative; z-index:1; background-color:#fff; margin:5rem 0; padding:5rem 0;  }
  #top-recruit  .recruit_bg{ left:5%; width:90%; top:0; height:100%; border-radius:3rem; }
  #top-recruit  .recruit_bg img{ transform:translate(-50%,0); top:5%; }
  #top-news { padding-bottom:6rem; }
  #top-news > div { display:block; }
  #top-news .news-tit { width:100%; display:flex; align-items:center; justify-content:space-between; }
  #top-news #news-list { width:100%; font-size:90%; }

  .foot-slider{ padding:3rem 0 0; }
  .foot-slider .slick-track{ gap:1rem; }
  .foot-slider .s1 { width:45vw; }
  .foot-slider .s2 { width:40vw; }
  .foot-slider .s3 { width:35vw; margin-top:7rem; }
  .foot-slider .s4 { width:28vw; }

}

@media screen and (max-width: 600px) {
  h2.t-tit b { font-size:350%; }
  #top-copy{ width:65%; left:5%; }
  #top-copy > div{ display:block; }
  #top-copy .tcx { width:20%; }
  #top-copy .tc1 { margin-bottom:3.5rem; padding-right:1.5em; }
  #top-copy > p { font-size:150%; }
  #proslider a.pitem .txt h3 b { font-size:120%; }
  #mv-news {padding:1rem;}
  #mv-news ul li > a,#mv-news ul li > p{ font-size:100%; flex-wrap:wrap;  }
  #mv-news ul li .txt{ flex-wrap: wrap; }
  #mv-news ul li p{ width:100%; }
  #top-about h3 { font-size:195%; }
  #proslider a.pitem { margin:.6rem; box-shadow: 0 0 1rem rgba(0, 0, 0, .2); }
  #proslider a.pitem .txt h3 { display:block; margin-bottom:.5rem; }
  #proslider a.pitem .txt h3 b,#proslider a.pitem .txt h3 span{ display:block; line-height:1.4; }
  #top-case { /*padding: 0 0 4rem;*/ }
  #top-case .caselist li { gap:1.5rem; }
  #top-recruit .tinner .rec-tit p { font-size:90%; }
  #top-recruit .rec-tit p span{ background-color:rgba(255, 255, 255, .8); }
  .foot-slider{ padding:1rem 0 0; }
  #top-news #news-list { font-size:100%; }

}