@charset "utf-8";

/*
  WordPress标题样式
  包含圆点装饰效果和日式明朝体字体
*/

/* 日式明朝体字体定义 */
.mod-ft-mincho {
  font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  -webkit-font-smoothing: antialiased;
  -ms-font-feature-settings: "normal";
}

/* 圆点装饰标题样式 */
.sec__ttl {
  font-size: 34px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 60px;
  color: #000; /* 改为黑色 */
}

.sec__ttl span {
  display: inline-block;
  position: relative;
  padding: 0 1.25em; /* 两侧预留1.25em空间给圆点 */
}

/* 圆点装饰效果 - 使用更淡的颜色 */
.sec__ttl span:before,
.sec__ttl span:after {
  position: absolute;
  display: block;
  top: 50%;
  margin-top: -.5em;
  font-size: 60%; /* 圆点大小为标题的60% */
  content: "●"; /* 实心圆点字符 */
  color: #e5e7eb; /* 更淡的灰色 */
  opacity: 0.6; /* 添加透明度让圆点更淡 */
}

.sec__ttl span:before {
  left: 0; /* 左侧圆点 */
}

.sec__ttl span:after {
  right: 0; /* 右侧圆点 */
}

/* 标题变体样式 - 保持文字黑色，圆点淡蓝色 */
.wp-title-variant {
  color: #000; /* 文字黑色 */
}

.wp-title-variant span:before,
.wp-title-variant span:after {
  color: #93c5fd; /* 淡蓝色圆点 */
  opacity: 0.5; /* 更淡的透明度 */
}

/* 白色版本（用于深色背景） */
.wp-title-white {
  color: #fff;
}

.wp-title-white span:before,
.wp-title-white span:after {
  color: rgba(255, 255, 255, 0.6);
}

/* 响应式设计 */
@media screen and (max-width: 1024px) {
  .sec__ttl {
    font-size: 30px;
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 767px) {
  .sec__ttl {
    font-size: 24px;
    margin-bottom: 40px;
  }
  
  .sec__ttl span {
    padding: 0 1em; /* 移动端减少圆点间距 */
  }
}

@media screen and (max-width: 480px) {
  .sec__ttl {
    font-size: 20px;
    margin-bottom: 30px;
  }
  
  .sec__ttl span:before,
  .sec__ttl span:after {
    font-size: 50%; /* 移动端进一步缩小圆点 */
  }
}

/* 额外的装饰样式 */
.sec__ttl.with-underline span:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 2px;
  background: linear-gradient(to right, transparent, #d2dfec, transparent);
}

/* 动画效果 */
.sec__ttl.animated span:before,
.sec__ttl.animated span:after {
  opacity: 0;
  animation: dotFadeIn 1s ease-in-out 0.5s forwards;
}

@keyframes dotFadeIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 大标题样式（用于重要区域） */
.sec__ttl-large {
  font-size: 48px;
  margin-bottom: 80px;
}

@media screen and (max-width: 767px) {
  .sec__ttl-large {
    font-size: 32px;
    margin-bottom: 60px;
  }
}

/* 小标题样式 */
.sec__ttl-small {
  font-size: 24px;
  margin-bottom: 40px;
}

@media screen and (max-width: 767px) {
  .sec__ttl-small {
    font-size: 18px;
    margin-bottom: 30px;
  }
}

/* 为朱印船项目定制的额外样式 - 文字黑色，圆点淡色 */
.shuinsen-title {
  color: #000; /* 文字黑色 */
}

.shuinsen-title span:before,
.shuinsen-title span:after {
  color: #a78bfa; /* 淡紫色圆点 */
  opacity: 0.4; /* 很淡的透明度 */
}

/* 与现有Tailwind样式兼容的调整 */
.sec__ttl.tailwind-compat {
  font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;
  color: #000; /* 确保文字是黑色 */
}

/* 朱印船网站特殊调整 */
.sec__ttl {
  position: relative;
  z-index: 1;
  line-height: 1.2;
  color: #000; /* 确保文字是黑色 */
}

/* 确保圆点在所有浏览器中正确显示 */
.sec__ttl span:before,
.sec__ttl span:after {
  font-family: "Arial", "Helvetica", sans-serif;
  line-height: 1;
  font-weight: normal;
  opacity: 0.4; /* 统一设置淡淡的透明度 */
}

/* 针对不同背景的调整 */
.content-section .sec__ttl {
  margin-bottom: 3rem;
  color: #000; /* 确保在任何背景下文字都是黑色 */
}

/* 确保在灰色背景上的可见性 */
.bg-gray-50 .sec__ttl {
  color: #000; /* 改为黑色 */
}

/* 修复可能的布局问题 */
.sec__ttl span {
  white-space: nowrap;
  display: inline-block;
  min-width: fit-content;
}

/* 针对响应式的额外调整 */
@media screen and (max-width: 768px) {
  .sec__ttl {
    font-size: 28px !important;
  }
  
  .sec__ttl span {
    padding: 0 0.8em;
  }
}