/* p { font-family: "微软雅黑", "思源黑体CN-Regular", "Meiryo UI", "游ゴシック";} */

/*--Slder banner--*/
.sliderIndicators { position: absolute; right: 0; bottom: 0; left: 0; /*z-index: 2;*/ display: flex; justify-content: center; padding: 0; margin-right: 15%; margin-bottom: 0rem; margin-left: 15%; list-style: none;}
.sliderIndicators button { background: #e6e6e6; border: 0px; width: 30px; height: 5px; margin: 4px; opacity: 0.5;}
.sliderMobile { display: none;}
/*--Index content--*/
/*--1--*/
.content { padding: 60px 0;}

/*--2--*/
.expertise { padding: 0 0 50px 0;}
.circleData { border-radius: 100%; display: block; padding: 62px 10px; margin: 20px 10px; width: 240px; height: 240px; font-family: "Noto Serif JP", bold;}
.circleData img { width: 20%; color: red;}
.circleColorB { border: #0d6efd solid 1px; transition: 0.5s;}
.circleColorY { border: #ffc107 solid 1px; transition: 0.5s;}
.circleColorR { border: #dc3545 solid 1px; transition: 0.5s;}
.circleColorG { border: #198754 solid 1px; transition: 0.5s;}
.circleColorB:hover, .circleColorY:hover, .circleColorR:hover, .circleColorG:hover { border-radius: 80px; padding: 58px 10px;}
.iconBox > div { width: 50%;}
.iconContentA { text-align: center; position: relative; padding: 10px 0;}
.iconContentA img { width: 40%;}
.iconContentB a { text-align: center; position: absolute; top:0; width: 100%; height: 100%; opacity: 0; display: block;}
.iconContentB a:hover { opacity: 1; background: #FFF; color: red; padding: 10px 0;}
.searchBg { background: #e5e5e5; padding: 20px; text-align: center; margin: 0px 0px 20px 0px;}
.indexData { width: 33.33%; margin: 0 15px;}
.iconBoxM > div { width: 16.6666%;}
.iconSpace_M { display: none;}
/* .iconBox > div { width: 14.28%;} */


/*--3--*/
.LR_Button { width: 30px; padding: 7px; border-radius: 50px; background: #C4C4C4;}
.newsStyle { box-shadow: 0px 0px 3px 1px #e0e0e0; margin: 20px 10px; padding: 30px 15px; display: block; width: 33%;}
.newsStyle:hover { background: rgb(234 234 234 / 75%);}
.newsStyle span { font-size: 0.9rem; color: #C4C4C4;}
.newsStyle h5 { padding: 20px 0; margin: 0;}
.newsStyle p { color: #818181;}
.newsStyle img { width: 20%;}
.mobileNews { display: none;}
.carousel-control-next, .carousel-control-prev { width: auto;}
.boxInside { padding: 0 50px 0 50px;}
.bgImg { background-image: url(../images/bg-pd-bottom.jpg); background-size: 100%; background-repeat: no-repeat; background-position: bottom;}
.carousel-control-next, .carousel-control-prev { top: 20%;}
.DNTbg h6, .SCIbg h6, .IOTbg h6 { color:#FFF;}
.DNTbg, .SCIbg, .IOTbg { background: #dc3545;}
.indexDataM { width: 100%; margin: 10px 0;}
.fontSize_s { font-size: 12px; padding: 10px 0 0 0;}



/*-----------------------------news space-------------------------------*/
.work-carousel { max-width: 100%; overflow: hidden; padding: 2rem 0; position: relative; }
.swiper-slide img { width: 100%; height: auto; display: block; }
.carousel-controls { text-align: center; margin-bottom: 1rem; display: flex; justify-content: flex-end; gap: 10px; }
.carousel-toggle { background: #fff; color: #818181; border: none; padding: 0.4rem 0.6rem; border-radius: 10%; font-size: 1.2rem; cursor: pointer; border: 1px solid #818181;}
.swiper-H { Height: auto !important;}
.swiper-slide { height: auto !important; }

@media (max-width: 1024px) {
    .hideContent ul > li { font-size: 0.8rem;}
/*    .expText { font-size: 1rem;}*/
}

@media (max-width: 990px) {
    /* .iconContentA > p, .iconContentB > p { line-height: 25px;} */

}


@media (max-width: 768px) {
  .boxInside { padding: 0;}
  .newsStyle { margin: 20px 4px;}
  .carousel-indicators { z-index: 3;}
  .iconSpace_C { display: none;}
  .iconSpace_M { display: block;}
}

@media (max-width: 576px) {
  .content { padding: 60px 20px;}
  .expText { font-size: 1.75rem;}
  .carousel-item .active > div, .mobileNews { display: block;}
  .news, .ComputerNews, #carouselExampleCaptions { display: none;}
  .newsStyle { width: 98%; height: 300px;}
  .carousel-control-next, .carousel-control-prev { top: 0; display: none;}
  .mobileNews > .container { padding: 0 20px;}
  .circleData { margin: 10px; padding: 25px 10px; width: 120px; height: 120px;}
  .circleData h3 { font-size: 0.9rem;}
  .iconContentA > p, .iconContentB > p { font-size: 0.9rem;}
  .indexData { width: 100%;}
  .iconBoxM > div { width: 50%;}
  .expertise { padding: 30px;}

}

@media (max-width: 375px) {
/*    .expText { font-size: 1.5rem;}*/
/*
    .expHide { padding: 30px;}
    .expHide ul { padding: 0px; line-height: 20px;}
*/
}