/* ==========================================================================
   日式企业官网 - 全局样式
   配色：黑白灰主色 + 绿色强调色（#2e7d32）
   字体：日文哥特体（ゴシック体）系统栈
   ========================================================================== */

:root {
  --brand: #006837;        /* 主强调绿（Material Green 800） */
  --brand-dark: #006837;   /* hover 深绿 */
  --brand-light: #e8f5e9;  /* 浅绿背景 */
  --ink: #1f2937;          /* 主文字色（近黑） */
  --gray: #6b7280;         /* 次级文字灰 */
  --line: #e5e7eb;         /* 分隔线 */
  --bg-soft: #f8faf9;      /* 浅灰背景区 */
}

/* 日文哥特体字体栈：优先 Hiragino / 游ゴシック / メイリオ / Noto Sans JP */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic",
    "Noto Sans JP", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  color: var(--ink);
  background: #ffffff;
  line-height: 1.75;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   绿色描边按钮（截图中的「検索する」绿色边框按钮样式）
   -------------------------------------------------------------------------- */
.btn-outline-green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid var(--brand);
  color: var(--brand);
  background: transparent;
  padding: 0.55rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-outline-green:hover {
  background: var(--brand);
  color: #ffffff;
}

/* 绿色实心按钮 */
.btn-solid-green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--brand);
  color: #ffffff;
  padding: 0.55rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
}
.btn-solid-green:hover {
  background: var(--brand-dark);
}

/* --------------------------------------------------------------------------
   章节标题（左侧绿色竖条 + 标题，日式企业官网常见样式）
   -------------------------------------------------------------------------- */
.section-title {
  position: relative;
  font-size: 1.35rem;
  font-weight: 700;
  padding-left: 0.9rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 4px;
  background: var(--brand);
  border-radius: 2px;
}

/* 英文/罗马字小标题（标题上方的淡色标注） */
.section-en {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--gray);
  font-weight: 500;
  margin-bottom: 0.35rem;
}

/* Hero 主视觉标题下方的绿色短横线 */
.hero-line {
  width: 3rem;
  height: 0.25rem;
  background: var(--brand);
  border-radius: 2px;
  margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   表单控件（复选框、下拉框等）统一绿色强调
   -------------------------------------------------------------------------- */
input[type="checkbox"] {
  accent-color: var(--brand);
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}
input[type="radio"] {
  accent-color: var(--brand);
}
select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="date"],
textarea {
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  color: var(--ink);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
select:focus,
input:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light);
}

/* 表单校验错误态（红色描边） */
.has-error {
  border-color: #dc2626 !important;
}

/* 标签（#分类标签） */
.tag {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--brand);
  background: var(--brand-light);
  border-radius: 0.2rem;
  padding: 0.1rem 0.55rem;
  line-height: 1.6;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   顶部导航链接下划线动画
   -------------------------------------------------------------------------- */
.nav-link {
  position: relative;
  padding: 0.25rem 0;
  font-size: 0.9rem;
  color: var(--ink);
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--brand);
  transition: width 0.25s ease;
}
.nav-link:hover {
  color: var(--brand);
}
.nav-link:hover::after {
  width: 100%;
}
.nav-link.active {
  color: var(--brand);
  font-weight: 600;
}
.nav-link.active::after {
  width: 100%;
}

/* --------------------------------------------------------------------------
   商品卡片 hover 微动效
   -------------------------------------------------------------------------- */
.product-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

/* --------------------------------------------------------------------------
   商品图片 hover 放大动效（卡片整体不动，仅图片缩放）
   -------------------------------------------------------------------------- */
.prod-img img {
  transition: transform 0.5s ease;
}
.prod-img:hover img {
  transform: scale(1.1);
}

/* 商品标题 hover 下划线 */
.prod-title:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 交叉触发：移到图片或标题上，都同时触发图片放大 + 标题下划线 */
.prod-card:has(.prod-img:hover) .prod-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prod-card:has(.prod-title:hover) .prod-img img {
  transform: scale(1.1);
}

/* --------------------------------------------------------------------------
   通用容器 / 辅助
   -------------------------------------------------------------------------- */
.container-site {
  max-width: 72rem; /* max-w-6xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* 浅灰背景区 */
.bg-soft {
  background-color: var(--bg-soft);

  background-size: cover;
  background-position: center;
}


/* 浅灰背景区 */
.bg-soft2 {
  background-color: var(--bg-soft);
  background-image: url('/images/bb1.webp');
  background-size: cover;
  background-position: center;
}





/* 面包屑 */
.breadcrumb {
  font-size: 0.78rem;
  color: var(--gray);
}
.breadcrumb a:hover {
  color: var(--brand);
}

/* 页脚链接 */
.footer-link {
  font-size: 0.85rem;
  color: #cbd5e1;
  transition: color 0.2s;
}
.footer-link:hover {
  color: #ffffff;
}

/* 后台管理 Tab */
.admin-tab {
  position: relative;
  color: var(--gray);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  padding-bottom: 0.6rem;
}
.admin-tab:hover {
  color: var(--brand);
}
.admin-tab.tab-active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   品牌色工具类（等价 Tailwind 的 text-brand / hover:text-brand）
   ★ 因品牌绿未注册进 Tailwind 调色板，这里以 CSS 补齐，避免样式失效。
   -------------------------------------------------------------------------- */
.text-brand {
  color: var(--brand);
}
.hover\:text-brand:hover {
  color: var(--brand);
}

/* 新闻/文章正文排版 */
.article-body {
  font-size: 0.95rem;
  line-height: 2;
}
.article-body p + p {
  margin-top: 1rem;
}