@charset "UTF-8";
body{
  --zindex-hero-img: 2;
  --zindex-hero-tri: 3;
  --zindex-hero-eyecatch: 4;
  --zindex-main: 10;

  background: #F0F0F0;
}
/**/
/*hero*/
/**/
#hero{
  position: relative;

  width: 100%;
  height: 100vh;
  max-height: 100vh;
  padding: 2.6vw;
  padding-bottom: .6vw;
  margin-bottom: 20rem;
}
#hero-inner{
  --scroll-sign: 11.2rem;

  display: grid;
  grid-template-rows: 7fr 3fr;
  row-gap: 2.4rem;

  width: 100%;
  height: 100%;
}
#heroSwiper{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#heroSwiper ul li img{
  position: relative;
  z-index: var(--zindex-hero-img);
  width: 100%;
  height: calc(calc(100vh - 3.2vw) * 0.7);
  object-fit: cover;
}
#hero-inner-content{
  position: relative;
  z-index: var(--zindex-hero-eyecatch);

  grid-column: 1/2;
  grid-row: 2/3;

  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
#hero-inner .eyecatch{
  display: flex;
  flex-direction: column;
  justify-content: center;

  height: 100%;

  font-size: 2.4rem;
  font-weight: 600;
}
#hero-inner .eyecatch>*+*{
  margin-block-start: .8rem;
}
#hero-inner .phraze{
  font-size: min(6.7vw,13rem);
  font-family: poppins, sans-serif;
  font-weight: 700;
  font-style: normal;
}
#scroll-sign{
  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--scroll-sign);
  height: var(--scroll-sign);
  padding: calc(var(--scroll-sign) * 0.25);
  margin-bottom: 2.4rem;
  
  color: #fff;
  font-family: poppins, sans-serif;
  font-weight: 400;
  font-style: normal;

  background: var(--cc);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
#hero-triangle{
  --width: 36.6rem;

  position: absolute;
  z-index: var(--zindex-hero-tri);
  left: 0;
  bottom: calc(var(--width) * -0.55);

  display: block;
  width: var(--width);
  height: calc(var(--width)*2);

  background: var(--cc);
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
/**/
/*main*/
/**/
main{
  position: relative;
  z-index: var(--zindex-main);
}
/**/
/*intro*/
/**/
#sec-intro{
  padding-bottom: 40rem;
}
#sec-intro .phraze{
  display: block;
  text-align: center;

  font-size: 6rem;
  font-family: poppins, sans-serif;
  font-weight: 700;
  font-style: normal;
}
#sec-intro .phraze span{
  display: inline-block;
  width: 2em;
  
  font-size: 15.7rem;
  font-family: poppins, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: var(--cc);

  font-variant: tabular-nums;
  font-feature-settings: "tnum";
}
#sec-intro .intro-eyecatch{
  display: flex;
  flex-direction: column;
  margin-bottom: 4.8rem;

  font-size: 3.6rem;
  font-family: poppins, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  color: #fff;
}
.intro-anime{
  display: inline-block;
  padding: .4em .6em .4em;

  color: transparent;
}
.intro-anime.active{
  animation: introanime 1s forwards;
}

@keyframes introanime{
  0%{
    opacity: 0;
    color: transparent;
  }
  100%{
    opacity: 1;
    color: #fff;
    background: var(--cc);
  }
}
#sec-intro .intro-eyecatch >*+*{
  margin-block-start: 1.6rem;
}
#sec-intro .textContent-wrap{
  display: grid;
  grid-template-columns: 55fr 45fr;
  column-gap: 12.8rem;
  padding-left: 21%;

  font-size: 1.6rem;
  line-height: 2.5;
}
/**/
/*business*/
/**/
#sec-bs{
  --font-width: 93rem;
  --font-height: 14.3rem;

  position: relative;

  margin-bottom: 10.4rem;
}
#sec-bs .h2-wrap{
  position: absolute;
  z-index: 2;
  top: calc(var(--font-height)*-0.8);
  left: 3vw;
}
#sec-bs h2 .prism{
  background: url(../img/index/business_mask.svg) no-repeat left top/var(--font-width) var(--font-height);
}
#sec-bs .nmLink{
  color: #fff;
}
#sec-bs .icon-arrow::before{
  border-color: #fff;
}
.swiper-pagination-bullet {
  width: 255px !important;
  height: 1px;
  margin: 0 0 0 10px !important;
  background: #FFFFFF !important;
  border-radius: 0;
}
.swiper-pagination-bullet-active{
  height: 3px;
}
.swiper-pagination-bullet:first-child {
  margin: 0 !important;
}
.swiper-pagination{
  bottom: 8.8rem !important;
}
#sec-bs .swiper-slide{
  width: 100vw;
  padding-top: 18.8rem;
  padding-bottom: 20rem;
  height: 100%;

  color: #fff;
}
.swiperContent{
  width: min(108rem,100%);
  margin-inline: auto;
}
.swiperContent .h3-wrap{
  margin-bottom: 21.6rem;

  font-size: 3.5rem;
}
.swiperContent h3{
  font-size: 10rem;
  font-family: poppins, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
}
.swiperContent .textContent-wrap{
  display: flex;
  justify-content: right;
}
.swiperContent .textContent{
  width: min(100%,47.5rem);
  height: 36rem;
}
.swiperContent .textContent .desc{
  margin-bottom: 1.6rem;

  font-size: 4rem;
  font-family: poppins, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
}
.swiperContent .textContent .text{
  font-size: 1.8rem;
  line-height: 1.6;
}
.swiper-slide-active .swiperContent{
  animation: fadeIn 0.8s ease-in;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#swiper-it{
  background: url(../img/index/top_business_itsolution.jpg) no-repeat center center / cover;
}
#swiper-office{
  background: url(../img/index/top_business_office.jpg) no-repeat center center / cover;
}
#swiper-japanese{
  background: url(../img/index/top_business_japanese.jpg) no-repeat center center / cover;
}
#swiper-mobile{
  background: url(../img/index/top_business_mobile.jpg) no-repeat center center / cover;
}
#sec-news{
  --font-width: 56.6rem;
  --font-height: 14.3rem;

  padding-bottom: 8rem;

  background: linear-gradient(180deg, var(--maintag-color) 0%, var(--maintag-color) 20rem, var(--cc) 20rem, var(--cc) 100%);
}
#sec-news .sec-news-inner{
  position: relative;

  width: min(112rem,100%);
  padding: 4.8rem;
  padding-left: 42rem;
  margin-inline: auto;

  background: #fff;
}
#sec-news .h2-wrap{
  position: absolute;
  z-index: 2;
  top: calc(var(--font-height)*-0.4);
  left: -22rem;
}
#sec-news h2 .prism{
  background: url(../img/index/news-mask.svg) no-repeat left top/var(--font-width) var(--font-height);
}
#sec-news .news-list{
  display: flex;
  flex-direction: column;
}
#sec-news .news-list li{
  padding: 2rem 0;
  border-bottom: solid 1px #DEDEDE;
}
#sec-news .news-list li a{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#sec-news .news-list li .date{
  display: inline-block;
  padding: .4em 1em;
  margin-bottom: 0.8rem;

  font-size: 1.4rem;
  font-family: poppins, sans-serif;
  font-weight: 600;
  font-style: normal;
  line-height: 1;
  color: #333;

  background: #DEDEDE;
}
#sec-news .news-list li .title{
  font-size: 1.8rem;
  color: #333;
}
@media (hover){
  #sec-bs a.nmLink:hover{
    color: #ffffffa0;
    transition: 0.3s all linear;
  }
  #sec-bs a.nmLink:hover .icon-arrow{
    background: rgba(221, 221, 221, 0.347);
    transition: 0.3s all linear;
  }
  #sec-news .icon-arrow:hover{
    background: #EAEAEA;
    transition: 0.3s all linear;
  }
}
@media (max-width : 1200px){
}
@media (max-width : 599px){
}