@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
body { margin: 0; padding: 0; font-family: "Noto Sans JP", sans-serif; overflow-x: hidden; color: #212121}
p, li {color: #212121;font-size: 15px;line-height: 27px;font-weight: 400;margin: 0 0 15px 0;letter-spacing: .7px;font-family: "Noto Sans JP", sans-serif;}
.main-table li {color: #212121; font-size: 15px;line-height: 25px;margin: 0 0 10px 0; font-family: "Noto Sans JP", sans-serif;}
a { text-decoration: none !important; font-family: "Noto Sans JP", sans-serif;}
h1, h2, h3, h4, h5, h6 { font-family: "Noto Sans JP", sans-serif; color: #212121}

.main-table {text-align: left;padding: 5% 0;}

#widgetsControl_C, #widgetsControl{ height: auto !important;}
#Div_body .container-fluid { margin: 0; padding: 0;}

#MenuControl .nav-item { margin: 0}
#MenuControl .nav-item .nav-link {color: #ffffff;font-size: 15px;padding: 15px 0;font-weight: 700;}
#MenuControl .nav-fill{ width:100%;}
#MenuControl .bg-light {background: #fff!important;height: 100%;}

#HomepagecontentControl_C { margin-top: -21px}

#HeaderControl, #HeaderControl_C { height: auto !important}

#HeaderControl.RadDock_Default .rdMiddle .rdCenter,
#HeaderControl.RadDock_Default .rdBottom .rdCenter { background-color: transparent !important;}
#MenuControl_C .bg-light { --bs-bg-opacity: 1; background-color: transparent !important; height: 100%;}
#MenuControl.RadDock_Default .rdMiddle .rdCenter, #MenuControl.RadDock_Default .rdBottom .rdCenter { background-color: transparent !important;}

#HeaderControl, #MenuControl, #MenuControl_C {height: 85px !important;}

@media (min-width: 320px) and (max-width: 768px ){ 
  .navbar-toggler { position: absolute; right: 15px; top: -60px; background: #fff}
  #MenuControl, #MenuControl_C { height: 0 !important;}
  #HeaderControl, #HeaderControl_C {height: 100 px !important; background: #114a9f;}
  .navbar-collapse { background: #114a9f; margin-top: -10px}
}

@media (min-width: 769px)  {
  #HeaderControl {position: absolute;left: 10%;top: 8px;z-index: 2;width: 20%;text-align: center;}
  #MenuControl {position: absolute;right: 10%;top: 25px;z-index: 8 !important;width: 60%;}
}

/* innr-pg-c Start */
.otherpagecss #RadDockZone1.container { max-width: 100%;}
.otherpagecss #RadDockZone1.container #HomepagecontentControl_C table { margin-top: 0 !important;}

.product-section .container-fluid {padding: 0 12% !important;}
.custom-btn { display: inline-block; padding: 14px 36px; background: #196fd2; border-radius: 5px; color: #FFF; font-size: 15px; letter-spacing: .8px; transition: all .3s ease-in-out;}
.custom-btn img {width: 17px;margin: -1px 0 0 8px;transition: all .2s ease-in-out;}
.custom-btn:hover { color: #fff; background: #114a9f;}
.custom-btn:hover img { transform: translate(5px, 0);}
.heading { color: #333; font-size: 38px; margin: 0 0 20px 0; font-weight: 600; letter-spacing: .8px;}
.sub-heading { color: #333; font-size: 30px; margin: 0 0 20px 0; font-weight: 600; letter-spacing: .5px;}
.title { color: #0070bb; font-size: 18px;}
.fs-7 { font-size: 14px; line-height: 25px}

header .logo { width: 180px}

.banner-section .carousel-caption {top: 25%;width: 30%;text-align: start;left: 15%;}
.banner-section .carousel-caption h1 {color: #ffffff;font-weight: 600;font-size: 45px;letter-spacing: 1px;margin: 0 0 20px 0; animation: fadeInUp 1s ease-in-out 100ms both;}
.banner-section .carousel-caption p {color: #ffffff;font-size: 22px;font-weight: 400;line-height: 1.8;margin: 0 0 30px 0; animation: fadeInUp 1s ease-in-out 100ms both;}
.banner-section .carousel-caption .custom-btn { animation: fadeInUp 1s ease-in-out 100ms both;}
.carousel-control-next, .carousel-control-prev { width: 12%;}
.banner-section .carousel-item .slide1 { background-image: url('image/banner1.jpg'); width: 100%; height: 100vh; background-attachment: fixed; background-position: 50% 50%; background-size: cover;}
.banner-section .carousel-item .slide2 { background-image: url('image/banner2.jpg'); width: 100%; height: 100vh; background-attachment: fixed; background-position: 50% 50%; background-size: cover;}
.banner-section .carousel-item .slide3 { background-image: url('image/banner3.jpg'); width: 100%; height: 100vh; background-attachment: fixed; background-position: 50% 50%; background-size: cover;}
.banner-section .carousel-item { transition: transform 1s ease-in-out !important;}
.banner-section .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; margin: 0 8px;}

.core-business{
  padding:45px 0 20px;
}
.core-business .accordion button{color: #114a9f;font-weight: 800;}
.core-business .accordion{text-align:left;}

.vision-mission { margin: 5% 0 0 0;}
.vision-mission .side-nav { background: #114a9f; padding: 50px; min-height: 800px; position: relative; overflow: hidden;}
.vision-mission .side-nav::after {content: '';position: absolute;width: 520px;height: 520px;border-radius: 20px;border: 100px solid #fff;transform: rotate(45deg);top: 30%;left: 70%;opacity: .1;}
.vision-mission .right-content {background-image: url('image/vision-mission-bg.jpg');min-height: 800px;padding: 50px;background-size: cover;position: relative;} 
.vision-mission .side-nav .nav { display: block; }
.vision-mission .side-nav .nav-link {text-align: end;font-size: 24px;font-weight: 500;color: #d8d8d8;width: 100%;margin: 0 0 15px 0;}
.vision-mission .side-nav .nav-link img { margin: 0 0 0 10px; width: 24px; filter: invert(1);}
.vision-mission .nav-pills .nav-link.active, .nav-pills .show>.nav-link { background: transparent; color: #ffffff;}
.vision-mission .right-content:before{
  background:#ffffffa8;
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.vision-mission .right-content .tab-pane h3 { font-size: 30px; margin: 0 0 40px 0; font-weight: 600; position: relative; animation: fadeInUp 1s ease-in-out 100ms both;}
.vision-mission .right-content .tab-pane h3::after { content: ''; position: absolute; width: 80px; height: 4px; border-radius: 3px; background: #0070bb; left: 0; bottom: -15px;}
.vision-mission .right-content .tab-pane p { font-size: 17px; line-height: 1.8; margin: 0 0 25px 0; animation: fadeInUp .6s ease-in-out 100ms both;}
.vision-mission .right-content .tab-pane li { font-size: 17px; line-height: 1.8; animation: fadeInUp .8s ease-in-out 100ms both;}
.vision-mission .right-content .tab-pane a { animation: fadeInUp 1s ease-in-out 100ms both;}

.product-section { padding: 6% 0;}
.product-section .product-card {background-image: linear-gradient(#d8d8d8, #e5e5e5);overflow: hidden;border-radius: 10px;position: relative;transition: all .2s ease-in-out; height: 500px; margin: 10px 0;}
.product-section .product-card .bg {position: absolute;right: -60px;opacity: .25;}
.product-section .product-card .bg img { width: 400px; height: 400px}
.product-section .product-card:hover { background-image: linear-gradient(#0070bb, #00a9eb);}
.product-section .product-card .product-img {text-align: center; position: relative; z-index: 2; margin: 80px 0;}
.product-section .product-card .product-img img { width: 70%; transition: all .5s ease-in-out;} 
.product-section .product-card:hover .product-img img { transform: scale(1.05);}
.product-section .product-card .text { position: absolute; z-index: 3; top: 20px; left: 20px;}
.product-section .product-card .text h4 {color: #212121;font-size: 20px;line-height: 1.5;letter-spacing: .5px;margin: 0;transition: all .2s ease-in-out;}
.product-section .product-card .text h4 img {width: 22px;margin: -1px 0 0 0;transition: all .2s ease-in-out;}
.product-section .product-card .text {position: absolute;z-index: 3;top: 20px;left: auto;right: 20px;}
.product-section .product-card1 .text1 {position: absolute;z-index: 3;top: auto;bottom: 20px;right: 20px;left: auto;}
.product-section .product-card1 .text2 {position: absolute;z-index: 3;top: 20px;bottom: auto;right: auto;left: 20px;}
.product-section .product-card:hover .text h4 { color: #fff;}
.product-section .product-card:hover .text h4 img { filter: invert(1);}
.product-section .product-card1 { height: 600px;}
.product-section .product-card1 .product-img {width: 500px;margin-left: -28%;}

.choose-us { margin: 0 0 4% 0;}
.choose-us .carousel-caption { top: 7%;}
.choose-us .carousel-caption p { font-size: 18px; margin: 0 0 25px 0;}
.choose-us .carousel-item img { background-attachment: fixed;}

.about-section { background-image: url('image/about-bg.jpg'); background-size: cover; background-attachment: fixed; padding: 6% 0;}
.about-section p { color: #ebebeb;}

@keyframes brighten {
  0% { filter: brightness(2);}
  100% { filter: brightness(1);}
}

@keyframes clip-out {
  0% { clip-path: inset(0 0 0 0);}
  100% { filter: brightness(0.5); clip-path: inset(100% 0 0 0);}
}

footer {background: #1c1c1d;margin: -20px 0 0 0;}
footer .footer-top { padding: 7% 0 3% 0; border-bottom: 1px solid #ffffff70;}
footer .footer-top h4 { color: #fff; font-size: 30px; margin: 0; letter-spacing: .8px;}
footer .social-icon a { position: relative; color: #fff; background: rgba(255, 255, 255, .1); font-size: 16px; width: 50px; height: 50px; margin: 0 5px; display: inline-block; border-radius: 50%; text-align: center; line-height: 3; transition: all .2s ease-in-out;}
footer .social-icon a i { position: relative; z-index: 3;}
footer .social-icon a::before{ content: ''; position: absolute; width:100%; height: 100%; border-radius: 50%; background: #196fd2; left: 0; transform: scale(0); transition: all .4s ease-in-out;}
footer .social-icon a:hover::before { transform: scale(1);}
footer .footer-middle { padding: 4% 0 6% 0; }
footer .footer-middle h5 { color: #fff; font-size: 20px; font-weight: 400; letter-spacing: .5px; margin: 0 0 20px 0;}
footer .footer-middle p, footer .footer-middle p a { color: #919191; font-size: 14px; margin: 0 0 8px 0; transition: all .2s ease-in-out; line-height: 1.6;}
footer .footer-middle p {/* display: flex; */}
footer .footer-middle p i { color: #e9e9e9; margin: 4px 5px 0 0; font-size: 15px}
footer .footer-middle p a:hover { color: #eeeeee;}
footer .footer-bottom { background: #2e2e2e; padding: 12px 0;}
footer .footer-bottom p { color: #dddddd; font-size: 13px; text-align: center; margin: 0; letter-spacing: .6px;}

.inner-banner { padding: 15% 0 12% 0; background: #919191; background-size: cover; } 
.contact-banner { background-image: url('image/contact-banner.jpg');}
.about-banner { background-image: url('image/about-banner.jpg');}
.inner-banner h2 {color: #fff;font-size: 42px;text-transform: uppercase;font-weight: 600;letter-spacing: .5px;animation: fadeInUp 1s ease-in-out 100ms both;margin: 0 0 18px 0;text-align: start;}
.inner-banner p {color: #fff;font-size: 21px;line-height: 1.6;animation: fadeInUp 1s ease-in-out 100ms both;margin: 0 0 20px 0;text-align: start;}

.contact-form { background: #e6e6e6;}
.contact-form label { color: #333; font-size: 14px; margin: 15px 0 2px 0;}
.contact-form .form-control { padding: 15px; border-radius: 5px;}
.contact-form input[type="button"] { background: #114a9f; color: #fff; border: 0; border-radius: 5px; margin: 20px 0 0 0; padding: 12px 34px;}

.infrastructure ul, .infrastructure ul li { list-style: none;}
.infrastructure ul li {position: relative;padding: 0 0 40px 40px;font-size: 18px;}
.infrastructure ul li::after {content: '';position: absolute;width: 15px;height: 15px;border-radius: 50%;background: #114a9f;left: 0;top: 5px;}
.infrastructure ul li::before {content: '';position: absolute;width: 1px;height: 80%;background: #202020;left: 7px;top: 24px;}
.infrastructure li:last-child::before { height: 0}

@keyframes fadeInUp {
    0% {transform: translate3d(0, 25%, 0);}
    100% { opacity: 1; transform: none;}
}

.flat-panel .product-img{ display: inline-block; background-image: linear-gradient(#d8d8d8, #e5e5e5); padding: 60px; border-radius: 20px; overflow: hidden; margin: 10px 0;}
.flat-panel .product-img img { transition: all .5s ease-in-out;}
.flat-panel .product-img:hover img { transform: scale(1.1);}

.table thead { background: #114a9f; color: #fff;}
.table thead th {font-weight: 400;font-size: 14px;padding: 10px;}
.table td {padding: 8px;font-size: 13px;}

@media (min-width: 320px) and (max-width: 768px) {
  html { overflow-x: hidden;}
  .container-fluid { padding: 0 5%;}
  p { font-size: 14px;}
  .custom-btn { padding: 10px 20px; font-size: 13px;}
  .custom-btn img {width: 15px; margin: 0 0 0 3px}
  .heading { font-size: 27px; margin: 0 0 10px 0;}
  .sub-heading { font-size: 24px; margin: 0 0 12px 0;}
  .title { font-size: 17px;}

  header .logo { width: 130px; padding: 3px 0}
  
  .banner-section .carousel-caption { width: 70%;}
  .banner-section .carousel-caption h1 { font-size: 27px; margin: 0 0 15px 0;}
  .banner-section .carousel-caption p {font-size: 15px;font-weight: 400;line-height: 1.6;margin: 0 0 18px 0;}
  .banner-section .carousel-item .slide1 { height: 400px; background-position: 0 0;}
  .banner-section .carousel-item .slide2 { height: 400px;}
  .banner-section .carousel-item .slide3 { height: 400px; background-position: 0 0;}
  .banner-section .carousel-item { transition: transform 1s ease-in-out !important;}
  .banner-section .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; margin: 0 8px;}

  .vision-mission .side-nav { padding: 20px; min-height: 560px;}
  .vision-mission .right-content { min-height: 560px; padding: 20px;} 
  .vision-mission .side-nav .nav-link {font-size: 15px;letter-spacing: .5px;padding: 0;}
  .vision-mission .side-nav .nav-link img {margin: 0 0 0 3px; width: 15px;}
  .vision-mission .right-content .tab-pane h3 { font-size: 21px; margin: 0 0 20px 0;}
  .vision-mission .right-content .tab-pane h3::after { width: 60px; height: 2px; bottom: -10px;}
  .vision-mission .right-content .tab-pane p { font-size: 15px; line-height: 1.7; margin: 0 0 20px 0;}
  .vision-mission .right-content .tab-pane li { font-size: 15px; line-height: 1.7;}

  .product-section .product-card { height: 350px;}
  .product-section .product-card .product-img { margin: 80px 0;}
  .product-section .product-card .text { top: 18px; left: 18px;}
  .product-section .product-card .text h4 { font-size: 17px;line-height: 1.4;}
  .product-section .product-card .text h4 img {width: 18px; margin: -1px 0 0 0;}
  .product-section .product-card1 .text1 { bottom: 18px;right: 18px;}
  .product-section .product-card1 .text2 { top: 18px; left: 18px;}
  .product-section .product-card1 { height: 350px;}
  .product-section .product-card1 .product-img { width: 400px; margin-left: -18%;}

  footer .footer-top { padding: 7% 0 4% 0;}
  footer .footer-top h4 { font-size: 21px;}
  footer .social-icon a { font-size: 13px; width: 40px; height: 40px;}
  footer .footer-middle { padding: 6% 0; }
  footer .footer-middle h5 { font-size: 18px; margin: 20px 0 10px 0;}

  .inner-banner { padding: 30% 0 20% 0;} 
  .inner-banner h2 { font-size: 27px; letter-spacing: .5px; margin: 0 0 10px 0; line-height: 1.4;}
  .inner-banner p { font-size: 14px;}
}

@media (min-width: 992px) and (max-width: 1300px) {
  .container-fluid { padding: 0 8%;}
  .custom-btn { padding: 12px 30px; font-size: 14px;}
  .custom-btn img {width: 16px; margin: -1px 0 0 5px;}
  .heading { font-size: 30px; margin: 0 0 10px 0;}
  .sub-heading { font-size: 26px; margin: 0 0 15px 0;}
  .title { font-size: 17px;}

  .banner-section .carousel-caption {top: 30%; width: 40%; left: 10%;}
  .banner-section .carousel-caption h1 { font-size: 32px; margin: 0 0 15px 0;}
  .banner-section .carousel-caption p { font-size: 18px; line-height: 1.7; margin: 0 0 25px 0;}

  .vision-mission .side-nav { padding: 40px; min-height: 700px;}
  .vision-mission .right-content { min-height: 700px; padding: 40px;} 
  .vision-mission .side-nav .nav-link { font-size: 21px; }
  .vision-mission .right-content .tab-pane h3 { font-size: 27px; margin: 0 0 30px 0;}
  .vision-mission .right-content .tab-pane p { font-size: 16px;}
  .vision-mission .right-content .tab-pane li { font-size: 16px;}

  .product-section .product-card { height: 400px;}
  .product-section .product-card .product-img {text-align: center; position: relative; z-index: 2; margin: 80px 0;}
  .product-section .product-card .product-img img { width: 70%;}
  .product-section .product-card .text { position: absolute; z-index: 3; top: 20px; left: 20px;}
  .product-section .product-card .text h4 {font-size: 16px;}
  .product-section .product-card .text h4 img {width: 16px;}
  .product-section .product-card .text {position: absolute;z-index: 3;top: 20px;left: auto;right: 20px;}
  .product-section .product-card1 .text1 {position: absolute;z-index: 3;top: auto;bottom: 20px;right: 20px;left: auto;}
  .product-section .product-card1 .text2 {position: absolute;z-index: 3;top: 20px;bottom: auto;right: auto;left: 20px;}
  .product-section .product-card:hover .text h4 { color: #fff;}
  .product-section .product-card:hover .text h4 img { filter: invert(1);}
  .product-section .product-card1 { height: 500px;}
  .product-section .product-card1 .product-img {width: 350px;margin-left: -28%;}

  footer { background: #1c1c1d;}
  footer .footer-top { padding: 7% 0 3% 0; border-bottom: 1px solid #ffffff70;}
  footer .footer-top h4 { font-size: 26px;}
  footer .footer-middle h5 { font-size: 18px;}
  footer .footer-middle p, footer .footer-middle p a { font-size: 13px;}

  .inner-banner { padding: 29% 0 20% 0;} 
  .inner-banner h2 { font-size: 30px;}
  .inner-banner p { font-size: 17px;}
}

#HeaderControl_C_ctl00_tr_HeaderBackImage { background: transparent;}