/* page-about only */

#modal-content::-webkit-scrollbar {
  width: 8px;
}

#modal-content::-webkit-scrollbar-track {
  background: #f1f5f9;
}

#modal-content::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

#modal-content::-webkit-scrollbar-thumb:hover {
  background: #175B66;
}

.delay-100 {
  transition-delay: 0.1s;
}

.delay-200 {
  transition-delay: 0.2s;
}

@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color: #000000 !important;
    background-color: #FFFFFF !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body,
  header,
  section,
  footer,
  main,
  div,
  table,
  tr,
  th,
  td {
    background-color: #FFFFFF !important;
  }

  .fade-in-section {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
  }

  #mobile-menu,
  #menu-btn,
  #open-modal-btn,
  #message-modal {
    display: none !important;
  }
}

/* about hero visual */
.about-hero-visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.about-hero-visual-inner {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.13;
  transform: scale(1.02);
}

/* ===== about 図表サイズ調整 ===== */

.about-diagram-wrap {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.about-diagram-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .about-diagram-wrap {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }
}

/* =========================
   About 会社概要：役員欄
========================= */
.about-company-management {
  line-height: 2.2;
}

.about-company-management .role-name-pair {
  display: block;
}

.about-company-management .role {
  display: inline;
}

.about-company-management .name {
  display: inline;
  margin-left: 1em;
}

.about-company-management .note {
  color: #6b7280;
  font-size: 13px;
  margin-left: 0.6em;
}

/* SPのみ：役職と名前を分けて、人物ごとに余白 */
@media (max-width: 767px) {
  .about-company-management .role-name-pair {
    margin-bottom: 1.1rem;
  }

  .about-company-management .role,
  .about-company-management .name,
  .about-company-management .note {
    display: block;
    margin-left: 0;
  }

  .about-company-management .name {
    margin-top: 0.25rem;
  }

  .about-company-management .note {
    margin-top: 0.25rem;
    line-height: 2;
  }
}