@charset "UTF-8";


.kvmovie{ position: relative; width: 100%; height:100vh;}
video {
  display: block;
  margin: 0 0 0 auto;

}
.video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); */
}

.mainTxtx{ position: absolute; left: 40px; bottom: 40px; color: #fff;}
.mainTxtx dt{ font-size: 63px; line-height: 80px; padding-top: 30px; padding-bottom: 25px;}
.mainTxtx dd{ font-size: 20px; letter-spacing: 0.04em; line-height: 80px;}
.mainTxtx p + p {
  margin-top: 2rem;
  font-size: 2rem;
  font-weight: 300;
}

.kv_cont .inner{ max-width: 100%; }
.mainreadtit{ position: absolute; top: 50%;}
.topfoot{ margin-top: 0;}


.aboutcon{ position: relative; z-index: 2;
  display: flex;
  align-items: center;
  gap:  7.5%;
  @media (width < 900px) {
    flex-direction: column;
  }
}
.aboutcon:before{ content: ""; display: block; width: 550px; height: 370px; background: url("../img/top/ilast01.svg") left top no-repeat; position: absolute; right: -100px; bottom: -102px; z-index: -1;}
.aboutTxts{ width: 37%; display: inline-block; vertical-align: middle;}
.aboutTxts dt{ font-size: 30px; margin-bottom: 30px; font-weight: bold;}
.aboutTxts dd{ font-size: 16px;}

.aboutimg{ width: 55%; display: inline-block; vertical-align: middle;}
.aboutimg img{ width: 100%; height: auto;}

.btnmore{ padding-top: 30px;}
.btnmore a{ color: #16376E; background: #fff; border: 1px solid #16376E; width: 160px; line-height: 50px; border-radius: 38px; display: block; padding: 0 29px; box-sizing: border-box; position: relative; font-size: 14px;}

.btnmore a:after{ content: ""; display: inline-block; height: 8px; width: 12px; background: url("../img/icon-arrow_b.svg") left top no-repeat;  position: absolute; right: 29px; top: 21px;}

.topics{position: relative; z-index: 2;}

.topics .contwidthnob{ background: #fff; color: #15376F; margin-top: 248px; padding: 50px 40px; }


.topicshed h2,.topicshed .tpread{ display: inline-block; vertical-align: middle;}
.tpread{ font-size: 16px; padding: 15px 0 0 37px}


.topicsList li{ width: 33%; display: inline-block; vertical-align: top; padding: 40px; box-sizing: border-box;}
.topicshed .sectitS{ font-size: 30px; margin-bottom: 0;}
.topicksSam img{ width: 100%; height: auto;}


.topicsList .tpctg{ padding: 10px 0;}
.topicsList .tpctg span{ font-size: 12px; color: #8B7B04; border: 1px solid #8B7B04; padding: 5px 20px; border-radius: 20px; }


.tpTit{ font-size: 14px; overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;}

.tpdate{ font-weight: bold; color: #BEBEBE; padding-top: 0;}
.tpdate time {font-size: 1.2rem;}

.tpdtbtn a{ font-weight: bold; font-size: 12px; color: #15376F; display: block; padding: 10px 0; margin-top: 35px;}
.tpdtbtn a:after{ content: ""; display: block; width: 18px; height: 25px; background: url("../img/tparw.svg") left top no-repeat; background-size: cover; position: absolute; bottom: 0; right: 0;}
.tpdtbtn{ border-bottom: 1px solid #EFEFEF; position: relative}




.solutiontTxts{ width: 100%; display: inline-block; vertical-align: middle; position: relative; z-index: 2;}
.solutiontTxts dt{ font-size: 30px; margin-bottom: 30px; font-weight: bold; display: inline-block; width: 35%}
.solutiontTxts dd{ font-size: 16px; display: inline-block; width: 64%; box-sizing: border-box; padding-left: 10%;}


.solList{ font-size: 0; letter-spacing: 0; display: inline-flex;
  @media screen and (max-width: 900px) {
    flex-direction: column;
  }
}
.solList li{ color: #fff; padding: 35px 40px; box-sizing: border-box; flex: 1;}
.solList li a{ color: #fff;}
.solList li.universe{ background: url("../img/universeimg.jpg") left top no-repeat; background-size: cover;}
.solList li.system{ background: url("../img/systemimg.jpg") left top no-repeat; background-size: cover;}
.solList li.disaster{ background: url("../img/disasterimg.jpg") left top no-repeat; background-size: cover;}
.solList li dl{ padding-top: 270px; box-sizing: border-box; padding-right: 70px; position: relative}
.solList li dl:after{ content:""; display: block; width: 31px; height: 41px; background: url("../common/img/arwbtn.svg") left top no-repeat; background-size: cover; position: absolute; right: 0; bottom: 0;}
.solList li dt{ font-size: 26px; font-weight: bold; margin-bottom: 25px;}
.solList li dd{ font-size: 16px;}


.btnmore.center a{ margin: 0 auto;}

.whtBg.nopt .contwidth{ padding-top: 0
}



.development{ position: relative; }
.development:before{ content: ""; display: block; background: url("../img/img_svl.svg") left top no-repeat; width: 577px; height: 388px; background-size: cover; position: absolute; left: 0; top: 0;}
.development .contwidth{ padding-top: 215px; padding-bottom: 335px;}


.developmentCon{position: relative; z-index: 2;}






.developtTxts{ width: 37%; display: inline-block; vertical-align: middle;}
.developtTxts dt{ font-size: 30px; margin-bottom: 30px; font-weight: bold;}
.developtTxts dd{ font-size: 16px;}


.dvlctg { margin: 20px 0;}
.dvlctg span{ background: #003DB1; color: #fff; padding: 10px;  border-radius: 6px;}

.developmentList{ width: 60%; position: absolute; right: 0; bottom: 120px; z-index: 2;}
.developmentList li{ box-sizing: border-box; padding-right: 100px; width: 100%;}
.developmentList li a{ color: #15376F;}
.recruitmentImg{ font-size: 0; letter-spacing: 0;}
.recruitmentImg .slscon{ width: 33%; display: inline-block; vertical-align: top;}
.recruitmentImg ul li{ font-size: 0;}
.recruitmentImg ul li img{ width: 100%; height: auto;}

.recruitmentImg .titlist ul li{ white-space: nowrap; word-break: none;  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl; font-size: 80px; color: #EC1D23; margin-bottom: 20px;}
.recruitment{ position: relative; overflow: hidden;}
.recruitmentImg{ width: 50%; height: 794px; position: absolute; right: 0; top: 0;}

.home .developmentList li{  max-width: 560px; }

/*.rclist01{animation: slideShow 30s infinite linear; width: 268px; height: 996px;display: flex;
    flex-direction: column-reverse;  flex-direction: column;}
.rclist02{animation: slideShow2 30s infinite linear; width: 268px; height: 996px;}*/


.topics:before{ content: ""; display: block; width: 32px; height: 24px; background: url("../img/top/topics.png") left top no-repeat; background-size: contain; margin: 0 auto; position: absolute; top: -80px;
    left: 49%;}

.itoWrapp .contwidth{ padding-top: 110px; padding-bottom: 100px;}

.itoCon{position: relative; z-index: 2;  padding-bottom: 100px;}
.itoTxts{ width: 37%; display: inline-block; vertical-align: middle;}
.itoTxts dt{ font-size: 30px; margin-bottom: 30px; font-weight: bold;}
.itoTxts dd{ font-size: 16px;}

.itoImg{ width: 62%;  display: inline-block; vertical-align: middle}
.itoImg img{ width: 100%; height: auto;}

.itoList{ background: #fff; position: relative; z-index: 2;}
.itoList li{ padding: 40px; box-sizing: border-box; display: inline-block; width: 50%; vertical-align: top;}
.itoList ul{ color: #15376F; font-size: 0; letter-spacing: 0;}
.itoList dt{ font-size: 30px; padding: 20px 0; font-weight: bold;}

.itoList dd{ font-size: 16px;}


.home .news{ padding-top: 130px; padding-bottom: 100px; background-color: #fff;}
.home .news .topicshed{ color: #15376F; margin-bottom: 75px;}

.newsList li{ margin-bottom: 34px;}
.newsList dl{ border-bottom: 1px solid #B9B9B9; padding-bottom: 20px;}
.newsList dt{ font-size: 14px; padding-bottom: 15px;}
.newsList dt span{ margin-right: 10px;}
.newsList dt span.new{ color: #FF0000;}
.newsList dt span.newsCtgs{ color: #8B7B04; font-size:12px; border: 1px solid #8B7B04; padding: 5px 20px; box-sizing: border-box; border-radius: 19px;}
.newsList dd{ font-size: 14px;}
.newsList dd span{ width: 27px; display: inline-block; vertical-align: middle; padding-right: 5px;}
.newsList dd span img{ width: 100%; height: auto;}

.newsList a{ color: #000;}

.bannerList{ position: relative; z-index: 2; text-align: center; font-size: 0; letter-spacing: 0; max-width: 984px; margin: 0 auto; text-align: left}
.bannerList li{ width: 25%; display: inline-block; padding: 12px; box-sizing: border-box;}
.bannerList li img{ width: 100%; height: auto;}
.bannerarea .contwidth{ padding: 80px 0;}

@keyframes slideShow {
    0% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(100%);
    }

}

@keyframes slideShow2 {
    0% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(-100%);
    }

}

.secmain .contwidth {
    padding-top: 13vw;
    padding-bottom: 7vw;
}

.moreLstbtn{ position: absolute; right: 40px; top: 72px;}
.moreLstbtn a{ font-size: 14px; text-decoration: underline; color: #15376F; vertical-align: middle;}
.moreLstbtn a:after{ content: ""; display: inline-block; width: 8px; height: 15px; background: url("../img/listArrow.png") left top no-repeat; background-size: cover; vertical-align: middle; margin-left: 15px;}

.secmain{ position: relative; }
.scmainImg {
    width: 68.4%;
    margin-left: auto;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}

.second .developmentList{position: relative; right: auto; bottom: auto; width: 74%; display: inline-block; font-size: 0; letter-spacing: 0;}

.second .developmentList .dvlctg {
    margin: 20px 0; font-size: 12px;
}
.second .developmentList dd {
    margin: 20px 0; font-size: 16px;
  text-decoration: underline;
}

.second .developmentList li{ width: 50%; display: inline-block; padding-left: 50px; padding-right: 0; margin-bottom: 60px;}

.second .developmentList {
    position: relative;
    right: auto;
    bottom: auto;
    width: 77%;
    display: inline-block;
    font-size: 0;
    letter-spacing: 0;
    padding-left: 2%;
}

.secondmaiTit{ color: #15376F; position: relative; z-index: 4;}
.secondmaiTit .sectitS {
    font-size: 16px;
    margin-bottom: 0;
}
.secondmaiTit p{ font-size: 100px; font-weight: bold;}

.ctgLists{ display: inline-block; width: 20%; vertical-align: top;}

.pnav{ font-size: 12px; padding-top: 30px; margin-bottom: 70px;}
.pnav li{ display: inline-block;}
.pnav li a{ text-decoration: underline; color: #15376F;}
.secondrRead{ padding-bottom: 100px; padding-top: 30px;}
.secondrRead h3{ font-size: 34px; margin-bottom: 50px; }
.secondrRead p{ font-size: 16px; line-height: 40px;}

.ctgLists h3{ color: #15376F; margin-bottom: 20px;}
.ctgLists ul{ border-left: 1px solid #ccc; font-size: 14px;   }
.ctgLists ul li{margin-bottom: 10px; padding-left: 10px; position: relative;}
.ctgLists ul li.activ:before{ content: ""; width: 1px; height: 100%; background:#15376F; position: absolute; left: 0; top: 0;}
.ctgLists ul li a{ color: #000;}

@media screen and (min-width: 901px) {

  .scmainImg {
    width: 68.4%;
    margin-left: auto;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    height: 100vh
}
  .scmainImg img{ object-fit: cover; width: 100%; height: 100%;}
}


@media screen and (max-width: 900px) {

.secondmaiTit {
    color: #15376F;
    position: relative;
    top: auto;
    left: auto;
    padding: 20px;
}
  .secondmaiTit p {
    font-size: 33px;
    font-weight: bold;
}

  .secmain .contwidth{ padding-bottom: 0;}
  .second .developmentCon{ padding: 0 20px; box-sizing: border-box; position: relative; z-index: 2;}
  .scmainImg {
    width: 85%;
    margin-left: auto;
    position: relative; right: auto; top: auto;

}
  .scmainImg img{ width: 100%; height: auto; }
  .second.whtBg .contwidth{ padding-top: 0;}
  .secondrRead{padding-top: 44px;padding-bottom: 40px;}
  .secondrRead h3 {
    font-size: 30px;
    margin-bottom: 30px;
}
  .second .developmentList {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    display: inline-block;
    font-size: 0;
    letter-spacing: 0;
    padding-left: 0;
}

  .second .developmentList li {
    width: 100%;
    display: inline-block;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 44px;
}
}

@media screen and (max-width: 900px) {
  .mainTxtx{ left: 20px; bottom: 20px;}
  .mainTxtx img{ width: 217px;}
  .mainTxtx dt {
    font-size: 38px;
    line-height: 48px;
    padding-top: 15px;
    padding-bottom: 25px;
}
  .mainTxtx dd {
    font-size: 11px;
    letter-spacing: 0.04em;
    line-height: 1;
}

  .banv .contwidth {
    padding-top: 60px;
    padding-bottom: 70px;}

  .aboutTxts {
    width: 100%;
    display:block;
    vertical-align: middle;
    padding: 0 20px; box-sizing: border-box;
}

  .aboutcon:before {
    content: "";
    display: block;
    width: 100%;
    height: 370px;
    background: url(../img/top/ilast01.svg) left top no-repeat;
    position: absolute;
    right: 0;
    top: -30px;
    z-index: -1;
    background-size: contain;
}

  .aboutimg {
    width: 100%;
    /* display: inline-block; */
    vertical-align: middle;
    padding-left: 0;
    margin-top: 50px;
}
  .topics .contwidthnob {
    background: #fff;
    color: #15376F;
    margin-top: 80px;
    padding: 20px;
}
  .topics{ width: calc( 100% - 40px); margin-left: 20px}

  .topicsList li{ width: 100%; padding: 0 10px;}
  .moreLstbtn{ position: relative; left: auto; top: auto;}

  .tpread {
    font-size: 16px;
    padding: 15px 0 0 0;
    margin-bottom: 30px;
}

  .moreLstbtn {
        position: relative;
        left: auto;
        top: auto;
    right: auto;
        text-align: right;
        width: 100%;
    margin-top: 40px;
    }

  .whtBg .contwidth{ padding-top: 60px;}
  .solutiontTxts dt{ width: 100%;}
  .solutiontTxts dd {
    font-size: 16px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    padding-left: 0;
}
  .solutiontTxts{ box-sizing: border-box; padding: 0 20px; margin-bottom: 40px;}
  .solList li {
    /* width: 100%; */
    /* display: inline-block; */
    color: #fff;
    padding: 30px 20px;
    box-sizing: border-box;
}
  .solList li dl {
    padding-top: 260px;
    box-sizing: border-box;
    padding-right: 0;
    position: relative;
}

  .solList li dl:after {
    content: "";
    display: block;
    position: relative;
    right: auto;
    bottom: auto;
    margin-left: auto;
}

  .developtTxts {
    width: 100%;
    display: block;
    vertical-align: middle;
    box-sizing: border-box;
    padding: 0 20px;
}

  .developmentList {
    width: 100%;
    position: relative;
    right: 0;
    bottom: auto;
    z-index: 2;
}

  .developmentList {
    width: 100%;
    position: relative;
    right: 0;
    bottom: auto;
    z-index: 2;
}

  .developmentList li {
    box-sizing: border-box;
    padding-right: 20px;
}

.development .contwidth {

    padding-bottom: 30px;
}

  .recruitmentImg {
    width: 100%;
    height: 100%;
    position: relative;
    right: auto;
    top: auto;
}
  .recruitmentImg .slscon {
    width: 50%;
    display: inline-block;
}

  .itoTxts {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    padding: 0 20px;
    box-sizing: border-box;
}

  .itoImg{ width: 100%;}
  .itoTxts dt{ margin-bottom: 0;}
  .itoList li {
    padding: 20px;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    vertical-align: top;
}
  .itoCon{ padding-bottom: 40px;}
  .itoList{ width: calc( 100% - 40px ); margin-left: 20px;}
.home .news {
    padding: 0 20px;
    padding-top: 40px;
    padding-bottom: 50px;    box-sizing: border-box;
}
.home .news .topicshed {
    margin-bottom: 40px;
}
  .bannerList li {
    width: 100%;
    display: inline-block;
    padding: 10px 40px;
    box-sizing: border-box;
}

  .development:before {
    content: "";
    display: block;
    background: url(../img/img_svl.svg) left top no-repeat;
    width: 100%;
    height: 388px;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    background-size: 80%;
}
  .development{ padding-bottom: 95px}
  .developmentList .btnmore a{ margin: 0 auto;}

      .recruitmentImg {
        width: 100%;
        height: 400px;
        position: relative;
        right: auto;
        top: auto;
        overflow: hidden;
    }

      .recruitmentImg .slscon.titlist{
        width: 100%;
        display: block;
    }
  .moreLstbtn{margin-top: 40px;}

}

/*ループスライド*/

@keyframes vertical-animation {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-100%);
  }
}

@keyframes vertical-animation2 {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}



.slider-wrapper {
  /* display: grid; /* slideのmargin-bottom値を全て内包させる為 */ */
  /* animation: vertical-animation 37s linear infinite; */
}

.slider-wrapper2 {
  /* display: grid; /* slideのmargin-bottom値を全て内包させる為 */ */
  /* animation: vertical-animation2 37s linear infinite; */
}
.topicsList .slick-prev,.topicsList  .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    height: 36px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: url(../img/top/nextW.png) right center / 100% no-repeat;
    opacity: 1;
    z-index: 10;
    width: 36px;
}
 .topicsList .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    bottom: -250px;
    left: auto;
    right: 0;
    margin: auto;
    display: block;
    height: 36px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: url(../img/top/nextW.png) right center / 100% no-repeat;
    opacity: 1;
    z-index: 10;
    width: 36px;
}
.topicsList .slick-prev{
    font-size: 0;
    line-height: 0;
    position: absolute;
    bottom: -250px;
    left: 0;
    right: auto;
    margin: auto;
    display: block;
    height: 36px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: url(../img/top/prevW.png) right center / 100% no-repeat;
    opacity: 1;
    z-index: 10;
    width: 36px;
}

.developmentList .slick-next {
    outline: none;
    background: url(../img/top/nextWh.png) right center / 100% no-repeat;
    opacity: 1;
    z-index: 10;
    width: 36px;
    right: 45px;
    width: 35px;
    left: auto;
}

.developmentList .slick-prev {
    outline: none;
    background: url("../img/top/prevWh.png") right center / 100% no-repeat;
    opacity: 1;
    z-index: 10;
    width: 36px;
  left: auto;
    right: 122px;
}
@media screen and (min-width: 901px) {
	.news .moreLstbtn{ top: 15px;}
}
.topicsList {
  .slick-track {
    display: flex;
    align-items: stretch;
  }
  .slick-slide {
    height: auto !important;
    display: flex;
    flex-direction: column;
    .tpdtbtn {
      margin-top: auto;
    }
  }
}

.cnt-cmsod-detail-free-layout img{ display: block; margin: 0 auto;}
.cnt-cmsod-detail-free-layout .caps{ text-align: center;}
.mod-spacer{margin-top: 25px;}
.solution-image{ margin-top: 40px }
.solution-image img{ position: relative; z-index: 3;}
.ctgLists a:after{ right: 20px;}
		.product .ctgLists  a:after{ display: none;}
		.download .ctgLists a:after{ display: none;}
		.recruit .ctgLists .cnt-cmsod-category a:after{ display: none;}
		.technology .ctgLists a:after{ display: none;}
.company .ctgLists a:after{ display: none;}
@media screen and (min-width: 901px) {
			.with-aside .ctgLists{ padding-right: 20px; }
	.solution-image img{max-width: 90%}
	.notitles{  padding: 80px 0 40px;}
		}
		.btn-wrap .external::after {clip-path: none; right: 20px;}
		.btn-wrap .arrow::after{ right: 20px;}