html {
  scroll-behavior: smooth;
}

body {
  /* background: radial-gradient(circle at 50% 30%, #f2f8fc, #ffffff 60%); */
  background: #fff;
  position: relative;
  font-size: 16px;
  line-height: 1.6;
  font-family: "Noto Sans JP", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px; /* 渐变高度可调 */
  background: linear-gradient(to bottom, #eaf4ff 0%, #ffffff 100%);
  z-index: -1;
  pointer-events: none;
}





/* 包裹 hero 内容 */
.bg-glow-wrapper {
  position: relative;
  z-index: 0;
  /* min-height: 480px; */
  /* display: flex; */
  align-items: center;
  justify-content: center;
  overflow: hidden;
}





/* Hero 渐变过渡 */
.hero-glow-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 80px;
  width: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%);
  z-index: 1;
}



body {
  margin: 0;
  /*font-family: "Noto Sans JP", sans-serif;*/
  font-family: "HG丸ゴシックM-PRO", sans-serif;
  
}

/* 通用段落首行缩进 2 字符 */
p {
  text-indent: 1em;
}


.admin-link:hover {
  color: #072b52;
}


/* 顶部导航栏样式（卡片式居中浮动） */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  z-index: 1000;
  background-color: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  align-items: center;
}

.navbar.scrolled {
  background-color: #f6fbff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  position: relative;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  max-height: 45px;   
  height: auto;
  display: block;
  
}

@media screen and (max-width: 480px) {
  .logo img {
    max-height: 25px; 

  }
}


.nav-center a {
  margin: 0 12px;
  color: #424242;
  text-decoration: none;
  font-weight: 500;
  font-size: 18px;
  transition: color 0.2s ease;
}

.nav-center a:hover {
  color: #003366;
}

.nav-center a.active {
  color: #000;
  font-weight: 600;
}

.nav-contact .contact-btn {
  background: linear-gradient(45deg, #001a36, #000b16); /* Blue gradient example */
  color: #fff;
  padding: 10px 20px;
  border-radius: 30px; /* Pill shape */
  font-weight: 700; /* Slightly bolder */
  font-size: 15px; /* Larger font */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease; /* Smoother transition for all properties */
  box-shadow: 0 2px 5px rgba(0, 51, 105, 0.5); /* Shadow matching gradient */
  border: none; /* Ensure no default border */
}

.nav-contact .contact-btn:hover {
  background: linear-gradient(45deg, #003366, #4683ff); /* Invert or shift gradient on hover */
  transform: translateY(-2px) scale(1.0); /* More pronounced lift and slight scale */
  box-shadow: 0 8px 10px rgba(0, 86, 179, 0.2);
}

/* 引入品牌色变量（假设蓝色和金色/橙色是品牌色） */
:root {
  --brand-blue: #003366; 
  --menu-hover-bg: #f5f9ff; 
  --menu-border-color: #e6eef5;
}


/* 1. 按钮容器基础样式 */
.hamburger {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px; 
    height: 40px; 
    background: transparent;
    border: 1px solid var(--brand-accent);
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.2s; 
    position: relative; /* 核心：用于绝对定位图标 */
    overflow: hidden; /* 隐藏移出区域的图标 */
    color: var(--brand-blue); /* 默认图标颜色 */
    flex-shrink: 0; /* 防止按钮缩小 */
    display: none; /* 默认隐藏，响应式时显示 */
}

/* 2. 两个图标的通用样式 */
.hamburger i {
    position: absolute; 
    font-size: 1.5rem; /* 调整图标大小 */
    line-height: 1;
    /* 核心动画过渡：平滑切换 */
    transition: opacity 0.3s ease, transform 0.3s ease; 
}

/* 3. 汉堡图标 (fa-bars) - 默认状态 */
.hamburger .fa-bars {
    opacity: 1;
    transform: translateX(0);
}

/* 4. 叉号图标 (fa-xmark) - 默认隐藏 */
.hamburger .fa-xmark {
    opacity: 0;
    /* 默认从右侧移出视野，准备进入 */
    transform: translateX(100%); 
}

/* 5. 激活状态 (.is-active) */
.hamburger.is-active .fa-bars {
    opacity: 0;
    /* 汉堡图标向左侧移出视野 */
    transform: translateX(-100%);
}

.hamburger.is-active .fa-xmark {
    opacity: 1;
    /* 叉号图标移入中央 */
    transform: translateX(0);
}


/* 折叠菜单容器样式 */
.mobile-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 64px; /* 确保与顶部导航栏高度一致 */
  left: 0;
  width: 100%;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
  padding: 0; 
  z-index: 999;
}

/* 导航链接样式 */
.mobile-menu a {
  /* 增加内边距，让点击区域更大 */
  padding: 14px 25px; 
  color: var(--brand-blue); /* 使用品牌色作为链接色 */
  text-decoration: none;
  font-size: 1.05rem; /* 略微增大字体 */
  font-weight: 500; /* 略微加粗 */
  /* 使用更精致的边框 */
  border-bottom: 1px solid var(--menu-border-color);
  
  /* 保持 block，便于设置边距和背景 */
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  transition: all 0.2s ease;
}

/* 移除最后一个链接的下边框，使菜单底部更干净 */
.mobile-menu a:last-child {
  border-bottom: none;
}

/* 悬停/活动状态样式 */
.mobile-menu a:hover,
.mobile-menu a.active {
  background-color: var(--menu-hover-bg); /* 极浅的品牌色悬停背景 */
  color: var(--brand-blue); 
  font-weight: 600; /* 突出活动项 */
}


/* 可以在每个链接后添加一个指示箭头 */
.mobile-menu a::after {
  content: "›"; /* 使用一个简单的符号 */
  font-size: 1.2rem;
  color: #a0aec0; /* 柔和的灰色 */
  font-weight: 300;
  margin-left: auto; /* 将箭头推到最右侧 */
  transform: scaleY(1.5);
}



/* 响应式启用 */
@media screen and (max-width: 820px) {
  /* 1. 阻止页面横向滚动 */
html, body {
  overflow-x: hidden;
}
  .nav-center {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .mobile-menu.show {
    display: flex;
  }
}

@media screen and (max-width: 480px) {
  .nav-container {
    padding: 0 12px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* 整体靠右排列 */
  .nav-right-group {
    display: flex;
    align-items: center;
    gap: 12px; /* 间距 */
    margin-left: auto;
  }

  /* 問い合わせ按钮样式 */
  .nav-contact .contact-btn {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 20px;
    background: #001a36;
    color: white;
    white-space: nowrap;
  }

  .nav-contact .contact-btn .fas {
    display: none; /* 隐藏图标 */
  }

  /* 汉堡按钮紧贴右边 */
  .hamburger {
    display: flex;
    width: 22px;
    height: 18px;
    background: none;
    border: none;
    flex-shrink: 0;
  }

  .hamburger span {
    height: 2px;
    width: 100%;
    background-color: #333;
    border-radius: 2px;
  }
}


/* 响应式启用 */
@media screen and (max-width: 820px) {
  html, body {
    overflow-x: hidden;
  }

  .nav-center {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .mobile-menu.show {
    display: flex;
  }

  /* 使 nav-right-group 横向排列：768 以下 */
  .nav-right-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
  }

  .nav-contact .contact-btn {
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 20px;
    background: #001a36;
    color: white;
    white-space: nowrap;
  }

  .nav-contact .contact-btn .fas {
    display: none;
  }

  .hamburger {
    width: 22px;
    height: 18px;
    background: none;
    border: none;
    flex-shrink: 0;
  }

  .hamburger span {
    height: 2px;
    width: 100%;
    background-color: #333;
    border-radius: 2px;
  }
}

@media screen and (max-width: 480px) {
  .nav-container {
    padding: 0 12px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* 整体靠右排列 */
  .nav-right-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
  }

  .nav-contact .contact-btn {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 20px;
    background: #001a36;
    color: white;
    white-space: nowrap;
  }

  .nav-contact .contact-btn .fas {
    display: none;
  }

  .hamburger {
    display: flex;
    width: 22px;
    height: 18px;
    background: none;
    border: none;
    flex-shrink: 0;
  }

  .hamburger span {
    height: 2px;
    width: 100%;
    background-color: #333;
    border-radius: 2px;
  }
}




/* 页面主区域 */
.hero {
  padding-top: 120px;
  text-align: center;
  color: #003366;

}

.hero h1 {
  font-size: 2.5rem;
  
}

.hero p {
  font-size: 1rem;
}

/* 平板尺寸 */
@media (max-width: 820px) {
  .hero {
    padding-top: 80px;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero p {
    font-size: 0.95rem;
  }
}

/* 手机尺寸 */
@media (max-width: 480px) {
  .hero {
    padding-top: 60px;
  }

  .hero h1 {
    font-size: 1.6rem;
  }

  .hero p {
    font-size: 0.9rem;
  }
}

/* 内容区域卡片样式 */
.content {
  max-width: 1200px;   
  min-height: 630px; 
  width: 90%;
  margin: 60px auto;
  padding: 40px;

}

.content h2{
    margin-top: 0px;
  font-size: 1.5em;
  border-left: 5px solid #3498db;
  padding-left: 10px;
  /* padding-top: 24px; */
  margin-bottom: 10px;
}



.content-card h2 {
  font-size: 1.6rem;
  color: #003366;
  margin-bottom: 15px;
  margin-top: 0;
}


.content-card p {
  font-size: 1rem;
  color: #444;
}


.highlight-box {
  border-left: 6px solid #3ba4e6;
  padding-left: 20px;
  
}


.footer {
  
  padding: 20px;
  text-align: center;
  font-size: 14px;
  color: #161616;
  margin-top: 40px;
}

.footer-content a {
  color: #61abfa;
  text-decoration: none;
}
.footer-content a:hover {
  text-decoration: underline;
}
/* Swiper 基本设置 */
.carousel-content {
  max-width: 1400px;
  margin: 20px auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.carousel-btn {
  background: rgba(255, 255, 255, 0.8);
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  z-index: 10;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.carousel-btn:hover {
  background: rgba(255, 255, 255, 0.95);
}

.carousel-btn.prev {
  margin-right: 50px;
}

.carousel-btn.next {
  margin-left: 50px;
}

.semi-carousel {
  position: relative;
  height: 600px;
  overflow: hidden;
  flex: 1;
  width: 100%;
}

/* 中央缩放关键部分 */
.carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 50%;
  width: 70%;
  height: 100%;
  transform: translateX(-50%) scale(0.8);
  opacity: 0;
  z-index: 0;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 分页指示器 */
.carousel-dots {
  position: absolute;
  bottom: 12px;
  width: 100%;
  text-align: center;
  z-index: 10;
}

.carousel-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 6px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
  transition: background-color 0.3s;
}

.carousel-dot.active {
  background-color: #333;
}

/* 新闻列表 */
/* 全宽 section 包裹，每块内容撑满横幅 */
.full-section {
  width: 100%;
  padding: 60px 0;

}

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
  border-top: 2px solid #ddd; /* 横线在内层 div 上 */
  padding-top: 40px;

  min-height: 620px; /* 确保内容区有足够高度 */
}


/* 标题带底线强调 */
.section-title {
  font-size: 1.5rem;
  font-weight: bold;
  border-bottom: 2px solid #e94e77;
  display: inline-block;
  padding-bottom: 6px;
  margin-bottom: 30px;
}

/* 每条新闻样式（仍用分隔线分隔） */
.news-list .news-item {
  padding: 20px 0;
  border-bottom: 1px solid #ddd;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.news-list .news-item:last-child {
  border-bottom: none;
}

.news-item.show {
  opacity: 1;
  transform: translateY(0);
}

.news-item .date {
  font-size: 0.9rem;
  color: #777;
  margin-bottom: 4px;
}

.news-item .title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 4px;
}

.news-item .desc {
  font-size: 1rem;
  color: #555;
  line-height: 1.5;
}

.tag-new {
  color: white;
  background: #e60039;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
}

/* 分页点样式 */
#news-pagination {
  text-align: center;
  margin-top: 30px;
}

#news-pagination span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 4px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}

#news-pagination span.active {
  background-color: #222;
}

/* ===== 📱响应式处理：轮播部分 ===== */
@media screen and (max-width: 768px) {
  .carousel-content {
    flex-direction: column;
    margin: 30px auto;
    padding: 0 20px;
  }

  .semi-carousel {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .carousel-item {
    width: 85%;
    height: auto;
    transform: translateX(-50%) scale(1);
  }

  .carousel-item img {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .carousel-btn {
    display: none;
  }

  /* .carousel-btn.prev {
    margin-right: 20px;
  }

  .carousel-btn.next {
    margin-left: 20px;
  } */

  .carousel-dots {
    bottom: -20px;
  }
}

/* ===== 📱响应式处理：新闻列表部分 ===== */
@media screen and (max-width: 768px) {
  .section-inner {
    padding: 0 16px;
    padding-top: 32px;
  }

  .news-item .title {
    font-size: 1rem;
  }

  .news-item .desc {
    font-size: 0.95rem;
  }

  .section-title {
    font-size: 1.3rem;
  }
}
  
/* ===== 📱响应式处理：轮播部分 ===== */
@media screen and (max-width: 1024px) {
  .carousel-content {
    flex-direction: column;
    margin: 30px auto;
    padding: 0 16px;
  }

  .semi-carousel {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .carousel-item {
    width: 100%;
    height: auto;
    transform: translateX(-50%) scale(1);
  }

  .carousel-item img {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .carousel-btn {
    display: none;
  }


}

@media screen and (max-width: 600px) {
  .carousel-content {
    padding: 0 12px;
  }

  .carousel-dots {
    bottom: -16px;
  }
}

/* ===== 📱响应式处理：新闻列表部分 ===== */
@media screen and (max-width: 1024px) {
  .section-inner {
    padding: 0 24px;
    padding-top: 40px;
  }

  .news-item .title {
    font-size: 1.05rem;
  }

  .news-item .desc {
    font-size: 0.95rem;
  }

  .section-title {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 600px) {
  .section-inner {
    padding: 0 16px;
    padding-top: 32px;
  }

  .news-item .title {
    font-size: 1rem;
  }

  .news-item .desc {
    font-size: 0.9rem;
  }

  .section-title {
    font-size: 1.3rem;
  }
}

/* 三列布局 */
.nav-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-collapse: collapse;
  max-width: 1200px;
}

/* 基础样式 */
.nav-card-item {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 只添加内边框（十字交叉线） */
.nav-card-item {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}


.nav-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
}

/* 移除最上面一排的上边框 */
.nav-card-item:nth-child(-n+3) {
  border-top: none;
}

/* 每行的第一个元素不加左边框 */
.nav-card-item:nth-child(3n+1) {
  border-left: none;
}

/* 样式优化 */
.nav-card-item h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #222;
}

.nav-card-item p {
  font-size: 0.95rem;
  color: #666;
  flex-grow: 1;
  margin-bottom: 20px;
}

.nav-card-item .more-link {
  font-size: 0.9rem;
  color: #0056b3;
  text-decoration: none;
  border: 1px solid #0056b3;
  padding: 5px 12px;
  display: inline-block;
  transition: all 0.3s;
}

.nav-card-item .more-link:hover {
  background-color: #0056b3;
  color: white;
}

@media screen and (max-width: 1024px) {
  .nav-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .nav-card-item {
    padding: 24px;
  }

  .nav-card-item h3 {
    font-size: 1.1rem;
  }

  .nav-card-item p {
    font-size: 0.9rem;
  }
}

@media screen and (max-width: 600px) {
  .nav-cards-grid {
    grid-template-columns: 1fr;
  }

  .nav-card-item {
    padding: 20px;
    border: none;
  }

  .nav-card-item h3 {
    font-size: 1rem;
  }

  .nav-card-item p {
    font-size: 0.88rem;
  }

  .nav-card-item .more-link {
    font-size: 0.85rem;
    padding: 4px 10px;
  }

  .nav-card-img {
    aspect-ratio: 16 / 9;
    border-radius: 4px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* 适配 iPad Pro、iPad mini 横向 */
  .hero h1 {
    font-size: 2.2rem;
  }

  .hero p {
    font-size: 1.05rem;
  }

  .nav-container {
    padding: 0 24px;
  }

  .nav-card-item h3 {
    font-size: 1.2rem;
  }

  .nav-card-item p {
    font-size: 1rem;
  }

  .semi-carousel {
    height: 480px;
  }

  .nav-card-item {
    padding: 20px;
    border: none;
  }
}


@media screen and (max-width: 768px) and (orientation: portrait) {
  .hero h1 {
    font-size: 1.8rem;
  }

  .hero p {
    font-size: 0.95rem;
  }

  .nav-card-item {
    padding: 20px;
    border: none;
  }
}


@media screen and (max-width: 480px) and (orientation: landscape) {
  .hero h1 {
    font-size: 1.4rem;
  }

  .hero p {
    font-size: 0.85rem;
  }

  .nav-container {
    padding: 0 8px;
  }

  .nav-card-item {
    padding: 16px;
    border: none;
  }
}



#company.html

/* 页面容器设置 */
.page-container {
  max-width: 1200px;
  overflow: visible;
  margin: 0 auto;  
  padding-top: 100px;
}


/* 布局分为侧边栏 + 主体 */
.layout {
  display: flex;
  gap: 100px;
  width: 100%;
  justify-content: center;  
  overflow: visible;
  min-height: 1000px;
}



/* 左侧导航栏：无背景、线条风格 */
.sidebar {

  background: transparent;
  border: none;
  box-shadow: none;
  font-size: 0.95rem;
  position: sticky;
  top: 120px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  flex: 0 0 220px; /* 固定宽度 */
  
}

/* 滚动条可选 */
.sidebar::-webkit-scrollbar {
  width: 6px;
}
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

/* 标题样式 */
.sidebar-title {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 16px;
  padding-left: 10px;
  border-left: 4px solid #3498db;
  margin-top: 0;
}

/* 导航列表 */
.business-nav {
  padding: 0;
  margin: 0;
  border: none;
}
.business-nav li {
  list-style: none;
  margin: 0;
  border-top: 1px solid #ddd;
}

.business-nav li:first-child {
  border-top: none;
}
.business-nav a {
  display: block;
  padding: 12px 12px;
  text-decoration: none;
  color: #333;
  border-top: 1px solid #eee;
  transition: all 0.25s ease;
}
.business-nav a:first-child {
  border-top: none;
}
.business-nav a:hover,
.business-nav a.active {
  color: #3498db;
  background: rgba(52,152,219,0.05);
  font-weight: 600;
}

.text-with-image {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.text-block {
  flex: 2;
}

.image-block {
  flex: 1;
  /* max-height: 300px; */
  width: 880px;
}

.image-block img {
  /* max-height: 300px; */
  width: 100%;
  object-fit: cover; 
  border-radius: 4px;
  overflow: hidden;
  display: block;
  
}
/* 小屏幕下的优化 */
@media (max-width: 768px) {
  .image-block {
    max-width: 100%;       /* 移动端不限制宽度 */
    /* max-height: 300px; */
  }

  /* .image-block img {
    max-height: 300px;
  } */
}

@media (max-width: 480px) {
  /* .image-block {
    max-height: 300px;
  }

  .image-block img {
    max-height: 300px;
  } */
}


/* 主内容区块 */
.main-content {
  flex: 1;
  max-width: 880px;
  min-width: 0;    
  padding-top: calc(120px - 0px); /* 100px 为导航栏高度 0px为子容器的margin-top值 */
}

.page-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    color: #333;
    text-align: center;
}

.full-width {
    max-width: 900px;
    margin: 0 auto;
    padding: 100px 20px 50px 20px;

}

.full-width h1 {
    font-size: 2.3rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 2.5rem;
    color: #003366;
    text-align: center;
   
    
    line-height: 1.2;
}

.full-width h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
    color: #0056b3;
    border-left: 6px solid #007acc;
    padding-left: 1rem;
    position: relative;
}

.full-width h2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 122, 204, 0.05);
    z-index: -1;
    border-radius: 0 5px 5px 0;
}

.full-width h3 {
    font-size: 1.35rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: #333;
    position: relative;
}

.full-width h4 {
    font-size: 1.15rem;
    margin-top: 2rem;
    margin-bottom: 0.8rem;
    color: #333;
    font-weight: 600;
    position: relative; /* 为 ::before 定位 */
    padding-left: 1.2rem; /* 为 ::before 预留空间 */
}


.full-width h4::before {
    content: '\2022'; 
    font-family: 'Arial', sans-serif;
    color: #007acc; 
    font-size: 1.2rem; 
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
}

.full-width p {
    line-height: 1.9;
    margin-bottom: 1.2rem;
    color: #444;
    font-size: 1.05rem;
}

.full-width ul {
    padding-left: 2rem;
    margin-bottom: 1.8rem;
    list-style: none;
}

.full-width li {
    margin-bottom: 0.8rem;
    line-height: 1.7;
    color: #555;
    position: relative;
    padding-left: 1.5rem;
}

.full-width li::before {
    content: '\2023';
    font-family: 'Arial', sans-serif;
    color: #007acc;
    font-size: 1rem;
    position: absolute;
    left: 0;
    top: 0.2rem;
}

.full-width h4 {
    font-size: 1.15rem;
    margin-top: 2rem;
    margin-bottom: 0.8rem;
    color: #333;
    font-weight: 600;
}

@media (max-width: 768px) {
    .full-width {
        padding: 80px 15px 40px 15px;
    }

    .full-width h1 {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    .full-width h2 {
        font-size: 1.5rem;
        margin-top: 3rem;
        margin-bottom: 1.2rem;
        border-left-width: 4px;
        padding-left: 0.8rem;
    }

    .full-width h2::before {
        border-radius: 0 3px 3px 0;
    }

    .full-width h3 {
        font-size: 1.2rem;
        margin-top: 2rem;
        padding-left: 1rem;
    }

    .full-width h3::before {
        font-size: 1.2rem;
    }

    .full-width p {
        font-size: 1rem;
        line-height: 1.7;
        margin-bottom: 1rem;
    }

    .full-width ul {
        padding-left: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .full-width li {
        font-size: 0.95rem;
        margin-bottom: 0.6rem;
        line-height: 1.5;
        padding-left: 1.2rem;
    }

    .full-width li::before {
        font-size: 0.9rem;
    }

    .full-width h4 {
        font-size: 1.05rem;
        margin-top: 1.5rem;
        margin-bottom: 0.7rem;
    }

    .fancy-divider {
        margin: 3rem auto;
        width: 80%;
    }
}
/* 分割线 */
.fancy-divider {
  height: 1px;
  background: linear-gradient(to right, #ddd, #eee, #ddd);
  margin: 2rem 0;
  border: none;
}


.main-content h2 {
  margin-top: 0px;
  font-size: 1.5em;
  border-left: 5px solid #3498db;
  padding-left: 10px;
  /* padding-top: 24px; */
  margin-bottom: 10px;
}

/* 卡片统一样式 */
.content-card {
  /* padding: 24px 0; */
  margin-bottom: 40px;
  border: none;
  
  position: relative;
}


.fancy-divider {
  width: 100%;
  height: 1px;
  margin: 48px 0;
  background: linear-gradient(to right, transparent, #34a6db, transparent);
}


/* 表格样式 */
.info-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  border-top: none;
  border-bottom: none;
  background: transparent;
}

.info-table th,
.info-table td {
  padding: 10px;
  text-align: left;
  border: none;
  border-bottom: 0.8px solid #ccc;
}

.info-table th {
  /* background-color: #ecf7ff; */
  color: #333;
  font-weight: bold;
  width: 180px;
}


.info-table tr:last-child td,
.info-table tr:last-child th {
  border-bottom: none;
}


/* 小标题 */
.main-content h4 {
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 6px;
}

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
  width: 100%;
}

.image-item {
  flex: 1 1 calc(50% - 20px); /* 二列布局 */
  box-sizing: border-box;
  
}

.image-item img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* === 移动端表格样式优化 (max-width: 768px) - 正式风格 === */
@media screen and (max-width: 768px) {
    .layout {
    flex-direction: column;
    gap: 0;
  }

  .sidebar {
    display: none;
  }

  .main-content {
    max-width: 100%;
    
    padding-left: 20px;
    padding-right: 20px;
  }

  /* 1. 整体表格容器 */
  .info-table {
    border-top: none; /* 移除原来的顶边框 */
    margin-top: 15px;
  }
  
  /* 2. 表格行：转为块级，保持列表感，只留底部细线 */
  .info-table tr {
    display: block; 
    margin: 0;
    padding: 0;
    border: none;
    border-bottom: 1px solid #ddd; /* 使用细线分隔每一项 */
    background: transparent;
    box-shadow: none;
    
  }

  .info-table tr:hover {
      background-color: #f7f9fc; 
  }

  /* 3. 标题 (th) 和内容 (td)：转为块级，并对齐内容 */
  .info-table th,
  .info-table td {
    display: block;
    width: 100%; 
    padding: 10px 0; /* 垂直方向的内边距 */
    text-align: left;
    border-bottom: none !important;
  }
  
  /* 4. 标题 (th) 样式：正式且突出 */
  .info-table th {
    font-weight: 600;
    color: #1f2937; /* 使用深色，保持严肃 */
    font-size: 0.95rem;
    
    /* 视觉强调：使用背景色块或底部粗线 */
    /* background-color: #f3f7fa; 
    padding-left: 10px; */
    
    /* 选项B：如果觉得背景色不正式，可以注释掉上面两行，使用下面这条粗下划线 */
    border-bottom: 3px solid #3498db; 
    padding-bottom: 5px;
    
    margin-bottom: 0; 
  }

  /* 5. 内容 (td) 样式 */
  .info-table td {
    font-size: 1.0rem;
    color: #4b5563;
    line-height: 1.6;
    padding-left: 10px; 
    padding-top: 8px; 
  }
  
  /* 移除最后一条分隔线 */
  .info-table tr:last-child {
      border-bottom: none;
  }
}

@media screen and (max-width: 1024px) {
  .layout {
    gap: 40px; /* 缩小间距 */
    
  }

  .sidebar {
    display: none;
  }

  .main-content {
    padding-top: 100px;
  }

  .image-item {
    flex: 1 1 100%; /* 移动端每行一张图 */
  }
}

@media screen and (max-width: 768px) {
  .layout {
    flex-direction: column;
    gap: 0;
  }

  .sidebar {
    display: none;
  }

  .main-content {
    max-width: 100%;
    
    padding-left: 20px;
    padding-right: 20px;
  }
}


@media screen and (max-width: 480px) {
  .main-content h2 {
    font-size: 1.2em;
  }

  .main-content h4 {
    font-size: 1em;
  }

  .sidebar-title {
    font-size: 0.95em;
  }

  .image-gallery {
    gap: 16px;
  }

  .image-item {
    flex: 1 1 100%;
  }
}


/* ===== 事業紹介ページ用 ===== */
.main-content p {
  line-height: 1.8;    
  margin: 0;
}

.main-content ul {
  padding-left: 20px;
  margin: 0;
}

.main-content h5 {
  margin-top: 20px;
  color: #3f3f3f;
  margin-bottom: 6px;

}

.service-block {
  background: white;
  border-radius: 16px;
  padding: 30px 24px;
  margin: 40px auto;
  max-width: 1000px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  
}

.service-block h2 {
  font-size: 1.5rem;
  color: #003366;
  margin-bottom: 12px;
  border-left: 6px solid #3ba4e6;
  padding-left: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.service-block h3 {
  font-size: 1.25rem;
  margin-top: 24px;
  color: #2a2a2a;
  border-left: 4px solid #aaa;
  padding-left: 10px;
}

.service-block h4 {
  font-size: 1.1rem;
  margin-top: 20px;
  color: #3f3f3f;
}



.service-block p {
  font-size: 1rem;
  line-height: 0.5em;
  color: #444;
  margin: 0 0 0.5em;
}

hr {
  border: none;
  height: 1px;
  background: #e0e0e0;
  margin: 60px auto;
  max-width: 1000px;
}


/*問い合わせ*/

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.contact-modal-layout {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}


.contact-modal-backdrop {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 0;
}

.contact-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  flex-direction: row;
  background: #fff;
  width: 90%;
  max-width: 900px;
  height: auto;
  animation: none;
  transition: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  overflow: hidden;
}



.contact-form-area {
  width: 55%;
  padding: 25px;
  box-sizing: border-box;
  position: relative;
  overflow-y: auto;
}


.contact-visual-area {
  width: 45%;
  background: transparent;  
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0; 
}

.contact-visual-area img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
}



input, textarea {
  width: 100%;
  margin-bottom: 24px;
  padding: 8px 0;
  font-size: 15px;
  border: none;
  border-bottom: 2px solid #ccc;
  border-radius: 0;
  background: transparent;
  resize: none;
  /* min-height: 40px; */
  max-height: 90px;
  box-shadow: none;
  transition: border-color 0.3s ease;
}

input:focus,
textarea:focus {
  border-bottom-color: #003366;
  outline: none;
}

textarea.is-error{
  border-bottom-color: #c0392b; 
}

.contact-form-area h2 {
  font-size: 28px;
  font-weight: bold;
  color: #003366;  
  margin-bottom: 8px;
}


.contact-description {
  margin-bottom: 32px;
  font-size: 14px;
  color: #777;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.form-row input {
  flex: 1;
  /* min-width: 140px; */
}


select {
  width: 100%;
  margin-bottom: 24px;
  padding: 8px 0;
  font-size: 15px;
  border: none;
  border-bottom: 2px solid #ccc;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: border-color 0.3s ease;
  color: #000;
  appearance: none; /* 取消默认样式（尤其是 Safari、Firefox） */
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px 8px;
}

/* focus 状态下统一 */
select:focus {
  border-bottom-color: #003366;
  outline: none;
}

#accessTopicSelect:invalid {
    color: #757575;
}
#accessTopicSelect option {
    color: #000; 
}

/* placeholder（提示项）浅色显示 */
select:invalid {
  color: #757575;
}
select option {
  color: #000;
}
select option[disabled] {
  color: #999;
}

.message-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  gap: 12px;
}

.message-hint {
  opacity: 0.8;
  font-size: 0.9em;
  color: #757575;
}

.char-count {
  white-space: nowrap;
  opacity: 0.8;
}

.submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.message-error {
  margin-top: 6px;
  color: #c0392b; 
  font-size: 0.9em;
  display: none;
}


/* contact-privacy */
.privacy-row .privacy-link {
  font-size: 14px;
  
}

.privacy-row .checkbox-label {
  position: relative;
  display: flex;
  font-size: 16px;
  color: #333;
  cursor: pointer;

}


.privacy-row{
    text-align: left; 
    font-size: 14px; 
    color: #555;
    line-height: 1.5;
}

.privacy-row  input[type="checkbox" ] {
    margin-right: 8px;
    transform: scale(1.1); 
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
    width: 16px ; 
    height: 16px ;
    border: 2px solid #ccc; 
    border-radius: 4px; 
    background-color: #fff;
    outline: none;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.privacy-row .checkbox-label input[type="checkbox"]:checked {
    background-color: #0056b3; 
    border-color: #0056b3; 
}


.privacy-row .checkbox-label input[type="checkbox"]:checked::before {
    content: '\2713';
    display: block;
    color: white;
    font-size: 14px;
    line-height: 14px; 
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-bottom: 0;
}


.privacy-row .checkbox-label input[type="checkbox"]:focus {
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.3); /* 聚焦时的阴影 */
}




.form-footer {
  /* position: absolute;   */
  bottom: 24px;
  left: 40px;
  right: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff; 
  padding-top: 12px;
  padding-bottom: 12px;
  z-index: 2;
  border-top: 1px solid #eee;
}

.submit-btn {
  background-color: #003366;
  color: white;
  padding: 8px 20px;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}


.cancel-btn {
  background-color: #f0f0f0;
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.close-btn {
  position: absolute;
  right: 16px;
  top: 16px;
  font-size: 24px;
  color: #888;
  cursor: pointer;
}


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 768px) {
  .contact-modal-content {
    flex-direction: column;
    height: auto;
    max-height: 95vh;
    overflow: auto;
  }

  .contact-form-area {
    width: 100%;
    padding: 24px 20px;
    box-sizing: border-box;
    
  }

  .contact-visual-area {
    width: 100%;
    height: auto;
    max-height: 200px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
  }

  .contact-visual-area img {
    display: none;
  }

  .form-footer {
      flex-direction: row;
      align-items: stretch;
      gap: 10px;
      margin-top: 16px;
    }

    .submit-btn,
    .cancel-btn {
      width: 100%;
      padding: 12px;
      font-size: 16px;
    }

  .close-btn {
    top: 10px;
    right: 12px;
  }
}



/* technology */

.technology-container{
  max-width: 880px;   
  /* margin: 100px auto; */
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
  padding-top: 100px; 
  flex : 1;
}

/* === 開発分野カード布局 === */
.tech-area-grid {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); */
  grid-template-columns: repeat(1, 1fr);
  gap: 24px;
  margin-top: 25px;
  margin-bottom: 60px;
}

/* 单个卡片样式 */
.tech-area-card {
  background: transparent;
  border: 1px solid #e5e9f0;
  border-radius: 12px;
  padding: 22px 24px;
  margin-bottom: 20px;
  transition: transform 0.2s ease;
}

.tech-area-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

/* 业务标题 */
.business-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #0a2a5e;
  margin: 0 0 10px 0;
}

/* 业界标签 */
.industry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.industry-tags .tag {
  background-color: #edf2f7;
  color: #2c5282;
  border: 1px solid #cbd5e0;
  padding: 3px 10px;
  border-radius: 15px;
  font-size: 0.85em;
}
/* 业务简介 */
.summary-text {
  color: #555;
  font-size: 0.95em;
  /* 增加底部间距，确保与标题拉开距离 */
  margin-bottom: 0px; 
  line-height: 1.6;
}

/* 功能列表标题 */
.feature-title {
  font-weight: 600;
  color: #2d3748;

  margin-bottom: 8px !important;
  margin-top: 14px !important;    
}

/* 功能列表 */
.feature-list {
  list-style: none;
  padding-left: 0;
  /* 移除列表默认外边距 */
  margin: 0; 
}

.feature-list li {
  position: relative;
  padding-left: 20px;
  /* 增大列表项之间的垂直间距，从 5px 增至 10px */
  margin-bottom: 10px; 
  font-size: 0.95em;
  color: #4a5568;
  line-height: 1.5;
}

/* 列表前的小圆点 */
.feature-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  /* 修正：通常设置为 3px-4px 可以让图标与文本垂直居中对齐 */
  top: 3px; 
  color: #3182ce;
  font-size: 0.85em;
}

/* === 响应式 === */
@media (max-width: 768px) {
  .tech-area-card {
    padding: 16px;
    margin-bottom: 24px;
  }

  .business-title {
    font-size: 1.1rem;
  }

  .feature-list li {
    font-size: 0.9rem;
  }
}



/* 表格基础样式 */
/* table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 15px;
  margin-bottom: 40px;
  background-color: #ffffff;
  border-radius: 10px; 
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); 
  border: 1px solid #e9e9e9; 
  font-size: 15px;
  table-layout: auto;
  border-collapse: collapse;
} */

/* table th:nth-child(1),
table td:nth-child(1) {
  width: 90px;
}

table th:nth-child(2),
table td:nth-child(2) {
  width: 90px;
} */
/* 
table th:nth-child(3),
table td:nth-child(3) {
  width: auto;
} */

/* 表头 */
/* thead th {
  background-color: #f0f8ff; 
  color: #333;
  font-weight: 600;
  padding: 14px 16px; 
  border-bottom: 1px solid #d1e7ff; 
  text-align: left;
  white-space: nowrap;
} */

/* 单元格 */
/* tbody td {
  padding: 12px 16px;
  border-bottom: 1px dashed #f0f0f0; 
  color: #444;
  vertical-align: top;
} */

/* 斑马线效果 */
/* tbody tr:nth-child(even) {
    background-color: #f9f9f9; 
} */

/* 行 hover 效果 */
/* tbody tr:hover {
  background-color: #f3f9ff; 
  transition: background-color 0.2s ease;
}

.main-content table tbody td:last-child {
    line-height: 1.8;
}


ul.table-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.table-feature-list li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 4px;
  line-height: 1.4;
}
ul.table-feature-list li::before {

  content: "•"; 
  color: #007bff; 
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
} */
/* --- 开发分野: 卡片布局 --- */
.tech-area-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
  /* grid-template-columns: repeat(3, 1fr);  */
  gap: 25px; 
  margin-top: 25px;
  margin-bottom: 50px;
}

.area-card {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.area-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.area-card .card-header {
  background-color: #f0f8ff; 
  padding: 18px 20px;
  border-bottom: 1px solid #e0efff;
}

.area-card .card-header .industry-tag {
  display: inline-block;
  background-color: #d1e7ff; 
  color: #0056b3;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.85em;
  font-weight: 600;
  margin-bottom: 8px;
}

.area-card .card-header h3 {
  margin: 0;
  font-size: 1.35em;
  color: #333;
}

.area-card .card-body {
  padding: 20px;
  flex-grow: 1; 
}

.area-card .card-body p {
  margin-top: 0;
  margin-bottom: 10px;
  color: #555;
  line-height: 1.6;
}

.area-card .card-body ul.feature-list {
  list-style: none; /* 移除默认列表点 */
  padding: 0;
  margin: 0;
}

.area-card .card-body ul.feature-list li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 8px;
  color: #444;
}

.area-card .card-body ul.feature-list li:last-child {
  margin-bottom: 0;
}

.area-card .card-body ul.feature-list li::before {
  content: "\f00c"; /* Font Awesome check icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #28a745; /* 绿色勾 */
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 0.9em;
}


/* --- 开发技术: 分组与徽章 --- */
.tech-stack-groups {
  margin-top: 25px;
  margin-bottom: 50px;
}

.stack-group {
  background-color: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 25px;
}

.stack-group h3 {
  color: #2c5282; /* 蓝色标题 */
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
}

.stack-group h3 .fas {
  margin-right: 12px;
  color: #2b6cb0; /* 图标颜色 */
  font-size: 20px;
}

.stack-group h3 span {
  font-size: 0.9em;
  color: #666;
  margin-left: 10px;
  font-weight: normal;
}

.tech-badges {
  display: flex;
  flex-wrap: wrap; /* 徽章自动换行 */
  gap: 10px; /* 徽章间距 */
}

.tech-badge {
  background-color: #edf2f7; /* 浅蓝色背景 */
  color: #2c5282; /* 蓝色文字 */
  padding: 8px 15px;
  border-radius: 20px; /* 圆角徽章 */
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap; /* 防止徽章内容换行 */
  transition: background-color 0.2s ease, transform 0.2s ease;
  border: 1px solid #cceeff;
  
}

.tech-badge:hover {
  background-color: #dbeafe;
  transform: translateY(-2px);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .tech-area-cards {
    grid-template-columns: 1fr; /* 在小屏幕上单列显示 */
  }

  .tech-badge {
    font-size: 12px;
    padding: 6px 12px;
    overflow: scroll;
  }
  .stack-group h3 {
    font-size: 18px;
  }
}


/* 证书卡片 */
.cert-section {
  margin-top: 40px;
}

.cert-section h3 {
  margin-bottom: 20px;
  font-size: 1.3rem;
  font-weight: bold;
}

.cert-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  gap: 24px;
  padding: 10px 0;
}

.cert-card {
  width: 100%;
  height: 250px;
  position: relative;
  /* background-color: transparent; */
  border-radius: 16px;
  overflow: hidden;
  /* box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05); */
  /* display: flex; */
  /* flex-direction: column;
  justify-content: space-between; */
  transition: transform 0.3s;
}

/* 上边渐变条（独立绘制） */
.cert-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 6px;
  width: 100%;
  background: linear-gradient(to right, #B78D32, #EBD47C);
  /* background: linear-gradient(to right,#ff002b, #ffea31, #8cf183, #00b7ff); */
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  z-index: 1;
}

.cert-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 6px;
  width: 100%;
  background: linear-gradient(to right, #B78D32, #EBD47C);
  z-index: 1;
}


.cert-card:hover {
  transform: translateY(-5px);
}

.cert-image {
  width: 100%;
  height: 100%;
  /* background-color: #f8f8f8; */
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.cert-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;


}
/* 
.cert-info {
  padding: 12px 16px;
  text-align: center;
  display: flex;
  justify-content: center;  
  align-items: center;       
  height: 80px;              
}


.cert-title {
  font-weight: 600;
  font-size: 1rem;
  color: #333;
  word-break: break-word;
  white-space: normal;
  line-height: 1.4;
  
} */

.image-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
}

.image-modal-content {
  margin: auto;
  display: block;
  max-width: 80%;
  max-height: 80%;
}

.image-modal .close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

@media screen and (max-width: 1024px) {
    .image-modal {
        padding-top: 50px; /* 略微减少顶部内边距 */
    }

    .image-modal-content {
        max-width: 90%; /* 允许图片使用更多的屏幕空间 */
        max-height: 85%;
    }

    .image-modal .close {
        top: 15px;
        right: 30px;
        font-size: 36px;
    }
}



@media screen and (max-width: 768px) {
    .image-modal {
        padding-top: 50%; /* 进一步减少顶部内边距，给图片更多空间 */
    }

    .image-modal-content {
        max-width: 95%; /* 移动端最大化图片显示区域 */
        max-height: 90%;
    }
    
    .image-modal .close {
        top: 10px;
        right: 20px;
        font-size: 30px; 

    }
}

/* ---------- 响应式布局 ---------- */

/* 平板端（≈ iPad、768px 以下）→ 两列 */
@media screen and (max-width: 992px) {
  .cert-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 20px;
    padding: 8px 0;
  }

  /* .cert-card {
    height: 280px;
  } */

  /* .cert-title {
    font-size: 0.95rem;
  } */
}

/* 手机端（≈ iPhone、480px 以下）→ 单列 */
@media screen and (max-width: 600px) {
  .cert-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    
  }

  .cert-card {
    border-radius: 0%;
    padding: 0;
  }

  .cert-card::before,
  .cert-card::after {
    display: none !important;
  }

  /* .cert-image img {
    border-top: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    border-left: 2px solid #ccc;
    border-right: 2px solid #ccc;
  } */

}




/* recruit.html */
.recruit-container {
  max-width: 960px;
  margin: 120px auto;
  padding: 20px;
  /* background: #fff;
  border-radius: 8px; */
  /* box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05); */
  /* padding-top: calc(100px - 40px);  */
  /* 100px 为导航栏高度 40px为子容器的margin-top值 */
}


.recruit-container h1 {
  color: #003366;
  margin-top: 0px;
}
.meta-info p {
  margin: 6px 0;
  text-indent: 0em;
}

.job-card {
  background: #fdfdfd;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  padding: 20px;
  margin-bottom: 25px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.04);
  transition: box-shadow 0.3s ease;
}

.job-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.job-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.job-header h2 {
  font-size: 20px;
  color: #004aad;
}

.job-tag {
  background: #000000;
  color: white;
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 20px;
}

.job-meta {
  margin-top: 10px;
  color: #555;
}

.job-meta p {
  margin: 6px 0;
}

.job-details {
  margin-top: 20px;
  padding: 16px;
  background-color: #f7f9fc;
  border-top: 1px solid #d0d0d0;
  border-radius: 6px;
  display: none;
  animation: fadeIn 0.3s ease-in-out;
  color:#333
}

.job-details h3 {
  font-size: 15px;
  margin: 12px 0 6px;
  color: #004aad;
}

.job-details ul {
  padding-left: 20px;
  margin-bottom: 0;
}

.job-details li {
  margin-bottom: 6px;
  line-height: 1.5;
}


.toggle-btn {
  margin-top: 15px;
  background: transparent;
  border: none;
  color: #004aad;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.toggle-btn i {
  margin-left: 6px;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}



/* 地図 */
/* 整体容器 */
.access-container {
    max-width: 1200px; 
    margin: 120px auto 50px auto; /* 顶部间距和底部间距 */
    padding: 0;
}

.access-container h1 {
    color: #003366;
    margin-top: 0;
    margin-bottom: 40px; 
    text-align: center; 
}

/* 两列布局容器 */
.contact-info-layout {
    display: flex;
    gap: 40px; 
    margin-bottom: 50px; 
    flex-wrap: wrap; 
    /* border-left: 4mm ridge rgba(1, 61, 110, 0.4);
    background: linear-gradient(to right, rgba(204, 235, 255, 0.6), rgba(240, 246, 250, 0));  */
}

/* 左侧表单区域 */
.contact-form-side {
    /* flex: 1;  */
    flex-basis: 50%; 
    max-width: calc(50% - 20px); /* 限制最大宽度，并考虑gap的一半 */
    min-width: 280px; 
    
    padding: 0px 30px ; /* 内边距 */

    box-sizing: border-box; /* 确保 padding 和 border 不增加额外宽度 */
    bottom: 20px; /* 底部间距 */
}

.contact-form-side h2 {
    font-size: 24px;
    color: #003366;
    margin-bottom: 25px;
    text-align: center;
    border-left: none; 
    padding-left: 0;
    margin-top: 0;
}

/* .contact-form-side .form-group {
    margin-bottom: 10px;
} */

.contact-form-side .form-label {
    display: block; 
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
    font-size: 15px;
}

.contact-form-side .form-control {
    width: 100%;  /* 100% 宽度减去 padding */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box; 
}

.contact-form-side textarea.form-control {
  width: 100%;
  resize: vertical;
  max-height: 200px;
  min-height: 100px;
  overflow: auto;
  box-sizing: border-box;
}

.submit-btn-access {
    background-color: #0056b3; /* 提交按钮颜色 */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-size: 17px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%; /* 按钮宽度100% */
    margin-top: 15px;
}

.submit-btn-access:hover {
    background-color: #003366;
}

/* 隐私协议和复选框容器样式 */
.contact-form-side .privacy-agreement {

    text-align: left; 
    font-size: 14px; 
    color: #555;
    line-height: 1.5;
}

.contact-form-side .privacy-link a {
    color: #0056b3;
    text-decoration: underline;
}

.contact-form-side .privacy-link a:hover {
    color: #003366; 
    text-decoration: none; 
}

.contact-form-side .checkbox-label {
    display: flex; 
    flex-direction: row;
    
    cursor: pointer; 
    font-size: 15px; 
    color: #333;
}

.contact-form-side .checkbox-label input[type="checkbox"] {
    margin: 0 8px 0  0; 
    transform: scale(1.1); 
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
    width: 18px !important; 
    height: 18px !important;
    border: 2px solid #ccc; 
    border-radius: 4px; 
    background-color: #fff;
    outline: none;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.contact-form-side .checkbox-label input[type="checkbox"]:checked {
    background-color: #0056b3; 
    border-color: #0056b3; 
}

.contact-form-side .checkbox-label input[type="checkbox"]:checked::before {
    content: '\2713';
    display: block;
    color: white;
    font-size: 14px;
    line-height: 14px; 
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.contact-form-side .checkbox-label input[type="checkbox"]:focus {
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.3); /* 聚焦时的阴影 */
}

/* 统一 select 样式（access 页用） */
.contact-form-side select.form-control {
  appearance: none;

  border: 1px solid #ccc;
  padding: 10px;
  font-size: 16px;
  color: #333;
  border-radius: 5px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20,50 70,100 120,50' stroke='%23666' stroke-width='15' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}

/* placeholder 提示颜色 */
.contact-form-side select.form-control:invalid {
  color: #757575;
}

.contact-form-side select.form-control option {
  color: #000;
}

.contact-form-side select.form-control option[disabled] {
  color: #aaa;
}


/* 右侧公司信息区域 */
.company-info-side {
    flex-basis: 50%; 
    max-width: calc(50% - 20px);
    min-width: 280px;
    
    position: relative; 
    z-index: 1; 
    overflow: visible; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-around; 
    align-items: stretch; 
    gap: 20px; 
    padding: 0; 
    box-shadow: none; 
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    
}

/* 叠加阴影效果的伪元素 */
/* .company-info-side::after {
    content: '';
    position: absolute;
    bottom: 20px; 
    right: 20px; 

    width: 100%;
    height: 100%;
    
    background-color: #1072ce;
    
    z-index: -1; 
    
    transition: all 0.3s ease; 
    
} */

/* 每个信息块的样式 */
/* .company-info-side .info-block {
    background-color: #f9f9f9; 
    padding: 25px 30px; 
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); 
    text-align: center; 
    display: flex; 
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    flex-grow: 1; 
} */



.company-info-side .info-block {
    background-color: transparent;
    padding: 15px 0;
    box-shadow: none;
    border-radius: 0;
    gap: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
}

.company-info-side .info-block .icon {
    font-size: 32px; 
    color: #1863d3; 
    margin-right: 17px; 
}

.company-info-side .info-block h3 {
    font-size: 28px; 
    font-weight: 600;
    color: #000000;
    margin-bottom: 10px; 
}

.company-info-side .info-block p {
    font-size: 18px;
    color: #3d3d3d;
    margin: 5px 0; 
    line-height: 1.6;
}


/* 地图和指南部分 */
.map-section {
    margin-top: 50px; /* 与上方两列布局的间距 */
}

.guide-section {
    margin-top: 50px; /* 与上方地图的间距 */
}

.guide-section ul {
    list-style: none; /* 移除默认列表样式 */
    padding-left: 0; 
}

.guide-section li {
    font-size: 16px;
    color: #3d3d3d;
    margin-bottom: 10px; /* 每个指南项之间的间距 */
}

.guide-section li::before {
    content: '\2023'; 
    color: #0056b3; /* 圆点颜色 */
    font-weight: bold; /* 圆点加粗 */
    display: inline-block;
    width: 1em; /* 确保圆点有固定宽度 */
    margin-right: 8px; /* 圆点与文本之间的间距 */
}

.access-section h2 {
    font-size: 24px;
    font-weight: 600;
    color: #003366;
    margin-bottom: 20px; /* 调整标题与下方内容的间距 */
    border-left: 4px solid #3ba9ff;
    padding-left: 10px;
}

.map-iframe {
    width: 100%;
    height: 500px; /* 可以调整地图高度 */
    border: 1px solid #ddd; /* 增加边框，更显眼 */
    
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    margin-top: 0; /* 标题和地图之间没有额外的 margin-top */
}

/* -----------------------------------------------------------------
   新模板样式：左右交替流程感设计 (Timeline/Flow)
----------------------------------------------------------------- */

/* 主容器：相对定位，用于包含绝对定位的垂直线 */
.modern-guide-container {
    width: 100%;
    margin-top: 30px;
    padding: 0 10px;
    box-sizing: border-box;
    position: relative; /* 🌟 关键：为垂直线定位提供参考 */
}

/* 垂直连接线：创建流程感 */
.modern-guide-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%; /* 🌟 关键：定位于容器中央 */
    width: 2px; /* 线的宽度 */
    background-color: #bbd3ec; /* 柔和的线条颜色 */
    z-index: 0;
}

/* 统一项目样式：去除圆角和卡片背景 */
.modern-guide-item {
    padding: 15px 25px;
    margin-bottom: 30px;
    border: 1px solid #3b82f6; /* 🌟 关键：使用边框替代背景，实现融合感 */
    border-radius: 0; /* 🌟 关键：使用平角 */
    position: relative;
    max-width: 45%; /* 限制宽度，确保中间有空间 */
    width: 45%; /* 确保左右对齐 */
    background-color: #ffffff; /* 确保内容清晰可读 */
    z-index: 1; /* 确保内容在垂直线上方 */
}

/* 内容文字样式 */
.modern-guide-item p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: #333;
}

/* 中间连接点样式 */
.modern-guide-item::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #3b82f6; /* 连接点颜色 */
    border: 2px solid #ffffff; /* 创造白色边框，增加层次感 */
    z-index: 2;
}


/* --------------------
   左侧项目样式 (left-card)
-------------------- */
.left-card {
    float: left; 
    clear: both;
    /* 调整定位，使其靠近中心线 */
    margin-left: 0;
    margin-right: auto;
    
    /* 左侧项目的边框颜色可以略有不同或保持一致 */
    border-left-width: 4px; /* 突出左侧边框 */
}

/* 左侧项目的连接点位于右侧边缘 */
.left-card::before {
    right: -28px; /* 调整距离，确保连接点位于中心线上 */
}

/* --------------------
   右侧项目样式 (right-card)
-------------------- */
.right-card {
    float: right; 
    clear: both;
    /* 调整定位，使其靠近中心线 */
    margin-right: 0;
    margin-left: auto;
    
    /* 突出右侧边框 */
    border-right-width: 4px; 
}

/* 右侧项目的连接点位于左侧边缘 */
.right-card::before {
    left: -28px; /* 调整距离，确保连接点位于中心线上 */
}


/* 清除浮动 */
.modern-guide-container::after {
    content: "";
    display: table;
    clear: both;
}


/* 响应式优化 */
@media (max-width: 820px) {
  .contact-info-layout {
    flex-direction: column;
    gap: 20px; /* 缩小间距，避免滚动过长 */
  }

  .contact-form-side,
  .company-info-side {
    min-width: 100%;
    max-width: 100%;
    
  }

  .access-container {
    padding: 15px; 
    margin: 80px auto 30px auto;
  }

  .map-iframe {
    height: auto;
    aspect-ratio: 16/9; /* 替代固定高度，更自适应 */
    min-height: 250px;
  }

  .access-container h1 {
    display: none;
  }

  .contact-form-side h2,
  .company-info-side h2,
  .access-section h2 {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .contact-form-side .form-control,
  .contact-form-side textarea.form-control {
    font-size: 15px;
    padding: 8px;
  }

  .submit-btn-access {
    font-size: 16px;
    padding: 10px 20px;
  }
}

@media (max-width: 480px) {
  .access-container {
    margin: 60px auto 20px auto;
    padding: 10px;
  }

  .access-section h2 {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .access-section p,
  .access-section li {
    font-size: 13px;
  }

  .map-iframe {
    aspect-ratio: 4/3; /* 手机上高度更合理 */
    min-height: 200px;
  }

  .contact-form-side .form-label {
    font-size: 13px;
  }

  .company-info-side .info-block h3 {
    font-size: 20px;
  }

  .company-info-side .info-block p {
    font-size: 15px;
  }
}

@media screen and (max-width: 1024px)  {
  .access-container {
    padding: 0 24px;
  }
}