@charset "UTF-8";

h3 { font-size: 3rem; color: #0f172a; text-transform: uppercase; position: relative;  padding-bottom: 15px; text-align: center; font-weight: bolder; margin-bottom: 40px; }
h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background-color: #7e22ce;
}
h4 { color: #5b438a; font-size: 1.75rem; margin-bottom: 15px;}
a { color: #5b438a; text-decoration: none;}

section { padding: 60px 0; }
ul { list-style: inside; }
ul > li { margin-bottom: 5px; }

.hodaka-menu li { list-style: none; }
.row-eq-height {
    display: flex;
    flex-wrap: wrap;
}

.row-eq-height > [class*='col-'] {
    display: flex;
    margin-bottom: 30px;
}
.panel-card {
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    transition: all .3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.panel-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

.panel-card-image img {
    width: 100%;
    display: block;
}

.panel-card-body {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.panel-card-body .btn {
    margin-top: auto;
}

.panel-card-title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 24px;
    font-weight: 600;
    color: #5b438a;
}

.panel-card-text {
    flex: 1;
}

.container p { line-height: 1.6em; margin-bottom: 20px; }

.cover-page {
  position: relative;
  background-image: url('/common/img/sound-test/sound-room-cover.jpg');
  background-size: cover;
  background-position: center;
  height: 450px;
  overflow: hidden;
}

/* Overlay */
.cover-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      90deg,
      rgba(91, 67, 138, 1) 0%,
      rgba(91, 67, 138, 0.85) 40%,
      rgba(91, 67, 138, 0) 100%
  );
  z-index: 1;
}

/* Navigation */
.gNaviSP > ul, .gNaviSP > ul > li > ul { list-style: none;}
.gNaviSP > ul > li { margin-bottom: 0; }
.gNaviSP > ul > li > ul > li { margin: 0; }
.langSwitcher dd ul { list-style: none;}

/* Content */
.cover-page .container {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
}

.cover-page h2 { color: #fff; font-size: 5rem; font-weight: bold; text-transform: uppercase; }
.cover-page .hero-subtitle { color: #fff; font-size: 2rem; }
.cover-page .lead { color: #fff; font-size: 1.65rem; margin-top: 1.5rem; }
.cover-page .btn { padding: 10px 35px; min-width: 200px; margin-right: 15px; transition: opacity 0.3s ease; }
.cover-page .btn:hover { opacity: 0.9; }
.cover-page .btn.btn-primary-custom{ background-color: #f2ebfa; color: #5b438a; }
.cover-page .btn.btn-outline-custom{ background-color: rgb(255 255 255 / 0.1); color: #ffffff; border: 1px solid #ffffff; }

.icon-box { text-align: center; }
.icon-box i { font-size: 4.5rem; margin-bottom: 15px; }
.icon-box h6 { font-size: 2rem; color: #5b438a; font-weight: 600; display: flex; justify-content: center; min-height: 56px; align-items: center;}
.icon-box img { width: 65px;}

#services-section .service-item { margin-top: 30px; }
#services-section .service-item .btn { color: #fff; background-color: #8670b2; padding: 8px 10px; min-width: 200px; border: none; transition: background-color 0.3s ease; }
#services-section .service-item .btn:hover { background-color: #e9d5ff; color: #8670b2; }
#services-section .service-item i { font-size: 1.35rem; margin-left: 15px; vertical-align: middle; }
#services-section .service-item p { color: #555; margin-bottom: 25px;}

#why-section{ background:#f2ebfa; color:#5b438a; }
#why-section h3{ color:#5b438a;}
#why-section h3::after { background: none;}

#about-section h4 { text-align: center; color: #7e22ce; letter-spacing: 0.25em; text-transform: uppercase; }
#about-section h3 { text-align: center; margin-bottom: 40px; }
#about-section .company-details { margin-bottom: 80px; }
#about-section .company-details p { margin-bottom: 10px; }
#about-section .company-profile { margin-bottom: 80px; }
#about-section .company-profile .company-info { margin-top: 40px;}
#about-section .company-profile .company-info dl { display: flex; flex-direction: row; margin-bottom: unset;}
#about-section .company-profile .company-info dt { display: flex; min-width: 220px; font-weight: 600; color: #5b438a; padding: 15px; background-color: #f2ebfa;}
#about-section .company-profile .company-info dt i { font-size: 2rem; margin-right: 10px; vertical-align: middle;}
#about-section .company-profile .company-info dd { color: #555;  padding: 15px; width: 100%; border: 1px solid #f2ebfa;}
#about-section .panel-card { border: 1px solid #f3e8ff; border-radius: 15px;min-height: 180px; }
#about-section .panel-card a { text-transform: uppercase; margin-bottom: 7px;}
#about-section .panel-card .panel-card-title { text-align: center;}

#social-section { background: #020617;
background: linear-gradient(167deg,rgba(2, 6, 23, 1) 0%, rgba(59, 7, 100, 1) 100%, rgba(237, 221, 83, 1) 100%); padding: 60px 0; }
#social-section h4 { color: #d8b4fe; letter-spacing: 0.25em; }
#social-section p { color: #ffffff; font-size: 4.5rem; font-weight: bolder; margin-bottom: 20px; }
#social-section .qr img { width: 100px; margin: 0 auto; }
#social-section .qr img.icon { width: 23px;}
#social-section .qr .panel-card { background: none; border: none; padding: 20px; box-shadow: none; }
#social-section .qr .panel-card  a { color: #ffffff; padding-left: 0;  padding-right: 0; }

#contact-section h4 { text-align: center; color: #7e22ce; letter-spacing: 0.25em;}
#contact-section .map { margin-top: 30px; }
#contact-section .map .panel-card i { color: #5b438a; font-size: 1.5rem; margin-right: 10px;}
#contact-section .panel-card-image img { height: 175px; }
#contact-section .panel-card .panel-card-body a { margin-top: 20px; }
#contact-section .panel-card .panel-card-body a:hover { color: #7e22ce; }
#contact-section .panel-card .panel-card-body a:hover i { color: #7e22ce; }
#contact-section .panel-card .panel-card-body a:active { box-shadow: none;}
#contact-section .panel-card .panel-card-body a:focus { border: none; }
#contact-section .panel-card .panel-card-text { min-height: 160px;}

/* Services */
.contact-box{ background:#f8f9fa; }
.contact-box .social-btn{ margin:5px;}
.contact-box h4 { font-size: 1.75rem; color: #7e22ce; margin-bottom: 20px; letter-spacing: 0.25em;}
.contact-box p { color: #3f2c67; font-size: 4rem; text-align: center; font-weight: bolder; margin-bottom: 30px; text-transform: uppercase;}
.contact-box p span { font-size: 1.5rem;  text-transform: none; font-weight: 100; text-align: center; display: block; color: #2d2a2e; letter-spacing: 0.06em; line-height: normal;}
.contact-box .qr img { width: 100px; margin: 0 auto; }
.contact-box .qr img.icon { width: 23px;}
.contact-box .qr .panel-card { background: none; border: none; padding: 20px; box-shadow: none; }
.contact-box .qr .panel-card  a { color: #000000; padding-left: 0;  padding-right: 0; }

#services-content h4 { text-align: center; color: #7e22ce; letter-spacing: 0.25em; text-transform: uppercase; }
#services-content h5 { margin-top: 0; margin-bottom: 15px; font-size: 24px; font-weight: 600; color: #5b438a;}
#services-content .hero{ background:#f5f2fc; padding:100px 0;}
#services-content .hero h2 { color: #3f2c67; font-size: 4.25rem; font-weight: bold;}
#services-content .hero .hero-sub{ color:#7e22ce; font-weight:600; letter-spacing:2px; text-transform:uppercase;}
#services-content .hero p { color: #362e3d; font-size: 1.5rem; }
#services-content .hero .link-group { margin-top: 30px; }
#services-content .hero .link-group .btn-primary-custom { width:145px; background: rgb(91 67 138 / 0.1); color: #5b438a; border: 1px solid #5b438a; padding:12px 28px; }
#services-content .hero .link-group .btn-primary-custom:hover { background: rgb(91 67 138 / 0.8); color:#fff;}
#services-content .hero .link-group .btn-primary-custom.contact { background:#4b3773; color:#fff;}
#services-content .hero .link-group .btn-primary-custom.contact:hover { background: rgb(91 67 138 / 0.8); }

#services-content section{ padding:80px 0;}
#services-content .overview .btn-primary-custom{ background:#5b438a; color:#fff; border:none; padding:10px 25px; }
#services-content .overview .btn-primary-custom:hover{ background:#4b3773; color:#fff;}
#services-content .solutions .solution-content { margin-bottom: 30px; }

/* #services-content .features { background:#f8f9fa;} */

@media(max-width:991px){
  .panel-card { margin-bottom: 30px;}
  .icon-box { margin-bottom: 50px; }
  .icon-box h6 { font-size: 1.8rem; }
}

@media(max-width:768px){
  h3 { font-size: 2.5rem; }
  h4 { font-size: 2rem; }
  .cover-page h2 { font-size: 4rem; }
  .cover-page .hero-subtitle { font-size: 1.5rem; }
  .cover-page .lead { font-size: 1.25rem; }
  .cover-page .btn { width: 200px; margin: 5px 0; }
  .contact-box .qr .panel-card  a { font-size: 10px; }
  #about-section .company-profile .company-info dt { min-width: 150px;}
  #social-section p { font-size: 3.5rem; }
  #social-section .qr .panel-card  a { font-size: 10px; }
  #services-content .hero{ padding: 50px 0;}
  #contact-section .panel-card-image img { height: auto; }
  #services-content .hero .link-group { text-align: center; }
  #services-content .hero .link-group .btn-primary-custom { width: 49%;}
  #services-content .hero .img-fluid { margin-top: 30px; }
  #services-content .solutions h5 { margin-top: 20px; font-size: 1.9rem;}
}