@charset "utf-8";

.bg{width: 100%; height: 100vh; object-fit: cover; transition: all .6s;}
.bg.ani{animation: scaleup 4s linear forwards;}
.title{font-size: 22px; font-weight: 700; font-family: var(--ff-third); color: var(--primary); display: block;}
.slogan{font-size: 60px; line-height: 1.26;}
.slogan span{font-weight: 700; display: block;}
.click-white{font-weight: 500; max-width: 166px; width: 100%; background: #fff; display: flex; align-items: center; justify-content: center; gap: 40px; border-radius: 26px; color: var(--primary); height: 47px; transition: all .3s;}
/* .mainpage .container--wide{height: 755px;} */
.t{display: none;}
.mo{display: none;}

/* main-visual */
.main-visual{height: 100%;}
.main-visual .inner{position: absolute; bottom: 94px; left: 50%; transform: translateX(-50%);}
.main-visual .bg{transform: scale(1.1);}
.main-visual h1{font-size: 126px; font-family: var(--ff-third); font-weight: 700; letter-spacing: -0.03em; color: #fff; line-height: 1.1;}
.main-visual h1 span{display: block; padding: 0 0 0 303px;}
.click-blue{font-weight: 500; max-width: 166px; width: 100%; background: var(--primary); display: flex; align-items: center; justify-content: center; gap: 40px; border-radius: 26px; color: #fff; height: 47px; transition: all .3s;}
.main-visual .click-blue{margin-top: -48px; position: relative; z-index: 1;}
.typo{-webkit-mask-image: var(--mask-img); -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100%; backdrop-filter: blur(10px) brightness(1.3); --mask-img: url(../images/main/typo.svg); mask-image: var(--mask-img); mask-position: center center; mask-repeat: no-repeat; mask-size: 100%; max-width: 100%; height: auto; width: 100%; display: block;}

@keyframes scaleup {
    0%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
}

@media (hover: hover) {
    .click-blue:hover{background: #fff; color: var(--primary);}
    .click-blue:hover path{stroke: var(--primary);}
}

/* experience */
.experience .bg{height: 60.5%; position: absolute; left: 0; top: 0; z-index: -3;}
.experience .title{margin-bottom: 11px;}
.experience .flex{align-items: flex-end;}
.experience .flex p{font-size: 18px; line-height: 1.55; max-width: 453px; margin: 0 auto 0 54px;}
.experience .grid{grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 59px 0 0;}
.experience .grid li{height: 453px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; color: #fff; overflow: hidden; padding: 0 36px 50px; cursor: pointer;}
.experience .grid li:nth-child(2){margin: 47px 0 0;}
.experience .grid li .img-box img{position: absolute; left: 0; top: 0; width: 100%; z-index: -1; transition: all .3s;}
.experience .grid li>img{width: fit-content;}
.experience .grid .first{border-top-left-radius: 75px;}
.experience .grid .third{border-bottom-right-radius: 75px;} 
.experience .grid .first .img-box img:nth-child(1), .experience .grid .second .img-box img:nth-child(2), .experience .grid .third .img-box img:nth-child(3){z-index: -2;}
.experience .grid .first .img-box img:nth-child(2), .experience .grid .first .img-box img:nth-child(3), .experience .grid .second .img-box img:nth-child(1), .experience .grid .second .img-box img:nth-child(3), .experience .grid .third .img-box img:nth-child(1), .experience .grid .third .img-box img:nth-child(2){opacity: 0;}
.experience .grid li b{font-family: var(--ff-third); display: block; font-size: 40px; padding-block: 17px 16px;}
.experience .grid li p{font-size: 18px; max-width: 310px;}

@media (hover: hover) {
    .click-white:hover{background: var(--primary); color: #fff;}
    .click-white:hover path{stroke: #fff;}

    .experience .grid:has(.first:hover) .second .img-box img:nth-child(1), .experience .grid:has(.first:hover) .third .img-box img:nth-child(1){opacity: 1;}
    .experience .grid:has(.second:hover) .first .img-box img:nth-child(2), .experience .grid:has(.second:hover) .third .img-box img:nth-child(2){opacity: 1;}
    .experience .grid:has(.third:hover) .first .img-box img:nth-child(3), .experience .grid:has(.third:hover) .second .img-box img:nth-child(3){opacity: 1;}
}

/* core */
.core{background: #F2F2F2; overflow: hidden;}
.core .flex{justify-content: space-between;}
.core .left{display: flex; flex-direction: column;}
.core .title{margin-bottom: 32px;}
.core .slogan{max-width: 412px; font-size: 54px; font-weight: 300; line-height: 1.4;}
.core  a{margin-top: auto;}
.core .left p{font-size: 18px; color: #8C8C8C; max-width: 380px; line-height: 1.666; margin: 31px 0 228px;}
.core .bg_elem {position: absolute; top: 0; left: calc(50% + 320px); transform: translateX(-50%); z-index: 5; width: auto; height: auto; display: flex; gap: 60px;}
.core .bg_elem .col{animation-duration: 20s; animation-timing-function: linear; animation-iteration-count: infinite; -webkit-will-change: transform; -moz-will-change: transform; -ms-will-change: transform; will-change: transform; display: flex; flex-direction: column;}
.core .bg_elem .col div{display: flex; flex-direction: column; margin-bottom: 40px; height: auto; padding: 50px 13px 46px 30px; background: #fff;  border-radius: 19px; width: 343px; height: 457px; box-shadow: 6px 6px 20px rgba(113,126,159,.2);}
.core .bg_elem .col img{width: fit-content;}
.core .bg_elem .col b{font-size: 28px; max-width: 289px; display: block; line-height: 1.4; margin: auto 0 18px;}
.core .bg_elem .col p{font-size: 16px; color: #8C8C8C; max-width: 283px; line-height: 1.375;}
.core .bg_elem .col:nth-child(1) {justify-content: flex-start; transform: translate(0, 0); animation-name: indexBg1;}
.core .bg_elem .col:nth-child(2) {justify-content: flex-end; transform: translate(0, -50%); animation-name: indexBg2;}
/* .core .bg_elem img {
  display: block;
  margin: 25px 0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 20px;
} */

@keyframes indexBg1 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -50%);
  }
}
@keyframes indexBg2 {
  0% {
    transform: translate(0, -50%);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes indexBgReverse1 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, 0);
  }
}
@keyframes indexBgReverse2 {
  0% {
    transform: translate(-50%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* lineup */
.lineup .flex{height: 100%;}
.lineup .flex>div{flex: 1;}
.lineup .left{background: radial-gradient(circle at bottom,rgba(233, 249, 255, 1) 0%, rgba(205, 233, 255, 1) 70%, rgba(156, 211, 255, 1) 100%); background-position: right top;}
.lineup .left img{object-fit: cover; height: 100vh; margin: auto;}
.lineup .right{background: linear-gradient(340deg,rgba(97, 186, 255, 1) 0%, rgba(0, 39, 236, 1) 100%); color: #fff; display: flex; flex-direction: column; justify-content: center; padding-top: 88px;}
.lineup .right .container--wide{width: calc(100% - 220px); max-width: 610px;}
.lineup .right .title{color: #fff; margin-bottom: 11px;}
.lineup .right .slogan{font-family: var(--ff-third);}
.lineup .right ul{margin-top: 59px;}
.lineup .right li a{display: flex; border-top: 1px solid rgba(255,255,255,.2); padding: 24px 0 44px;}
.lineup .right li a img{opacity: .4; height: fit-content;}
.lineup .right li a p{font-size: 20px; font-weight: 600; padding-inline: 40px 54px; opacity: .4;}
.lineup .right li a span{opacity: .4;}
.lineup .right li a div{border: 1px solid #fff; border-radius: 8px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin-left: auto;}

@media (hover: hover) {
    .lineup .right li a:hover img, .lineup .right li a:hover p, .lineup .right li a:hover span{opacity: 1;}
    .lineup .right li a:hover div{background: #fff;}
    .lineup .right li a:hover div path{stroke: var(--primary);}
}

/* functional */
.functional .left{background: radial-gradient(circle at bottom,rgba(15, 149, 255, 1) 0%, rgba(153, 210, 255, 1) 70%, rgba(143, 206, 255, 1) 100%);}
.functional .right{background: #fff; color: #000;}
.functional .right .title{color: var(--primary);}
.functional .right li a{border-top: 1px solid rgba(0,0,0,.2); padding: 24px 0 30px;}
.functional .right li a div{border-color: #5C5C5C;}
.functional .right li a p{padding: 0; min-width: 160px;}
.functional .right li a span{padding-left: 40px;}

@media (hover: hover) {
    .functional .right li a:hover div{background: var(--primary); border-color: var(--primary);}
    .functional .right li a:hover div path{stroke: #fff;}
}

/* news */
.news .container--wide{height: 1117px; padding: 155px 0 201px;}
.news .container--wide>.flex{border-top: 3px solid #000; padding-top: 40px;}
.news div b{font-size: 60px; font-family: var(--ff-third);}
.news div>span{font-size: 18px; color: #8C8C8C; display: block; margin-block: 29px 48px;}
.news .container--wide>.flex{gap: 140px;}
.news .flex ul{flex: 1;}
.news .flex li a{display: flex; border-bottom: 1px solid #A8A8A8; padding-block: 24px; align-items: center; justify-content: space-between; padding-inline: 15px;}
.news .flex li:first-child a{padding-block: 0 24px;}
.news .flex li:last-child a{border-bottom: none;}
.news .flex li a span{color: #A8A8A8;}
.news .grid{grid-template-columns: repeat(3, 1fr); gap: 36px; margin: 61px 0 0;}
.news .grid strong{font-size: 30px; display: block; margin-block: 26px 20px;}
.news .grid button{color: #707070; display: flex; align-items: center; justify-content: flex-end; width: 100%; margin-block: 24px; gap: 17px;}
.news .grid li{border-bottom: 2px solid #D2D2D2;}
.news .grid li p{min-height: 48px;}
.news .grid li img{height: 249px; border-radius: 20px;}

@media screen and (max-width: 1600px) {
  .lineup .right .slogan{font-size: 50px;}
}

@media screen and (max-width: 1399px) {
  .pc{display: none;}
  .t{display: block;}

  .click-blue{max-width: 146px;}
  .title{font-size: 18px;}
  
  .section{overflow: hidden;}

  .experience .flex{flex-direction: column; align-items: center;}
  .experience .title{text-align: center;}
  .slogan{font-size: 30px; text-align: center;}
  .experience .flex p{font-size: 16px; text-align: center; margin: 20px 0;}
  .experience .grid li{height: 230px; padding: 0 15px 20px;}
  .experience .grid li b{font-size: 24px;}
  .experience .grid li p{font-size: 14px;}

  .core .slogan{text-align: left; font-size: 30px;}
  .core .left p{max-width: 300px; font-size: 15px;}
  .core .bg_elem{gap: 20px; left: calc(50% + 160px );}
  .core .bg_elem .col b{font-size: 15px;}
  .core .bg_elem .col p{font-size: 13px;}
  .core .bg_elem .col div{width: 189px; height: 244px; padding: 20px 15px; margin-bottom: 20px;}
  .core .bg_elem .col img{width: 45px;}

  .lineup .flex{flex-direction: column-reverse;}
  .lineup .right{padding-block: 60px;}
  .lineup .right .container--wide{width: 100%; padding: 20px 15px; max-width: 720px;}
  .lineup .right .title{text-align: center;}
  .lineup .right .slogan{text-align: left; font-size: 34px; text-align: center;}
  .lineup .right li a{align-items: center;}
  .lineup .right li a img{max-width: 100px;}
  .lineup .right li a p{font-size: 18px; padding-inline: 20px; min-width: 130px;}
  .lineup .right li a span{font-size: 14px; min-width: 123px;}
  .lineup .right li a div{min-width: 40px;}

  .functional .flex{flex-direction: column;}
  .functional .right li a{align-items: center;}
  .functional .right li a span{padding-left: 0; padding-right: 10px;}
  .functional .right li a p{min-width: 180px;}

  .news .container--wide>.flex{gap: 20px;}
  .news .flex li a{gap: 20px;}
  .news .grid li p{min-height: 96px;}
  .news .flex li a span{white-space: nowrap;}
  .news .grid li img{height: 121px;}
}

@media screen and (max-width: 767px) {
  .pc{display: none;}
  .t{display: none;}
  .mo{display: block;}

  .slogan{font-size: 26px; line-height: 1.26;}
  .click-blue{font-size: 14px; height: 36px; min-width: 146px;}
  .click-white{font-size: 14px; height: 36px;}
  .main-visual .click-blue{margin: 40px auto 0;}

  .experience{padding-block: 100px;}
  .experience .title{margin-bottom: 4px;}
  .experience .grid{grid-template-columns: 1fr;}
  .experience .grid li:nth-child(2){margin: 0;}

  .core{padding-block: 20px 100px;}
  .core .flex{flex-direction: column;}
  .core .left{align-items: center; margin-bottom: 60px;}
  .core .slogan{text-align: center; line-height: 1.26; font-size: 26px;}
  .core .slogan span{display: inline;}
  .core .title{margin-bottom: 4px;}
  .core .left p{margin: 20px 0; text-align: center;}
  .core .bg_elem{position: initial; transform: initial; flex-direction: column; width: 100%;}
  .core .bg_elem .col{flex-direction: row; gap: 0 20px; animation-duration: 10s; flex-shrink: 0; width: fit-content;}
  .core .bg_elem .col div{width: 189px; min-width: 189px; max-width: 189px; flex-shrink: 0; flex-grow: 0; margin-bottom: 0; box-sizing: border-box;}
  .core .bg_elem .col:nth-child(1){animation-name: indexBgReverse1;}
  .core .bg_elem .col:nth-child(2){transform: translate(-50%, 0); animation-name: indexBgReverse2;}

  .lineup .right .title{margin-bottom: 4px;}
  .lineup .right .slogan{font-size: 28px;}
  .lineup .right ul{margin-top: 30px;}
  .lineup .right ul li a{flex-direction: column; gap: 10px; padding: 20px 0;}
  .lineup .right li a div{margin: 15px auto 0;}
  .lineup .right li a p br{display: none;}
  .lineup .right li a img{opacity: 1;}
  .lineup .right li a p{opacity: 1; text-align: center;}
  .lineup .right li a span{opacity: 1; padding-right: 0;}

  .news .container--wide{padding: 60px 0 100px;}
  .news div b{font-size: 26px;}
  .news .container--wide{height: initial;}
  .news .container--wide:has(.grid)>.flex{padding-top: 20px; flex-direction: column; border-top: none; gap: 40px;}
  .news .container--wide>.flex>div{text-align: center;}
  .news div>span{margin-block: 20px; font-size: 16px;}
  .news .click-blue{margin: auto;}
  .news .grid{grid-template-columns: 1fr;}
  .news .grid li a img{width: 100%; height: auto;}
  .news .grid strong{font-size: 20px; margin-block: 20px;}
  .news .grid li p{min-height: initial;}
  
}

/* Base */
@media (hover: hover) {}
@media screen and (max-width: 1399px) {}
@media screen and (max-width: 767px) {}