/*
 * FamilyLinkJapan 共享样式。
 * 所有页面使用同一组品牌令牌和断点，避免三语版本因复制样式产生视觉或无障碍差异。
 */
/*
 * 标题与正文统一从 Google Fonts 获取 Noto 字体，而不再把 macOS 的苹方、游明朝和
 * Windows 的微软雅黑作为首选。这样两套系统会使用相同的字形、字面高度和字重，
 * 可避免同一级标题因为系统字体回退而出现视觉尺寸不一致；display=swap 保证字体
 * 网络暂时不可用时正文仍能立即显示，后续再无阻塞地切换到网站指定字体。
 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400..900&family=Noto+Sans+JP:wght@400..900&family=Noto+Sans+SC:wght@400..900&family=Noto+Serif:wght@600;700&family=Noto+Serif+JP:wght@600;700&family=Noto+Serif+SC:wght@600;700&display=swap");

:root {
  --brand-navy: #0b5aa6;
  --brand-navy-deep: #173f68;
  --brand-coral: #f26f80;
  --brand-green: #62b45d;
  --brand-sun: #f7bf3c;
  --brand-cream: #fff9f1;
  --brand-mist: #eff8fc;
  --brand-mint: #f1f8ee;
  --text: #173247;
  --muted: #536575;
  --line: #dce8e7;
  --white: #fff;
  --container: 1240px;
  --shadow-sm: 0 12px 32px rgba(23, 63, 104, .1);
  --shadow-lg: 0 28px 72px rgba(23, 63, 104, .16);
  --radius-sm: 16px;
  --radius-md: 26px;
  --radius-lg: 42px;
  --transition: 220ms ease;
  /* 中文是网站默认入口，因此未知或缺失 lang 时优先采用简体中文字体，避免回退到本机字体。 */
  --font-sans: "Noto Sans SC", "Noto Sans JP", "Noto Sans", sans-serif;
  --font-serif: "Noto Serif SC", "Noto Serif JP", "Noto Serif", serif;
}

/* 日文汉字与简体中文字形并不完全相同，必须根据文档语言调整优先级，不能共用错误字形。 */
html:lang(ja) {
  --font-sans: "Noto Sans JP", "Noto Sans SC", "Noto Sans", sans-serif;
  --font-serif: "Noto Serif JP", "Noto Serif SC", "Noto Serif", serif;
}

/* 英文页面使用 Noto 的拉丁字体，避免为了少量拉丁字符加载并采用 CJK 字体的度量。 */
html:lang(en) {
  --font-sans: "Noto Sans", "Noto Sans SC", "Noto Sans JP", sans-serif;
  --font-serif: "Noto Serif", "Noto Serif SC", "Noto Serif JP", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--brand-cream);
  font-family: var(--font-sans);
  /* 禁止浏览器在字体文件缺少某个字重时自行加粗或倾斜，否则不同系统的合成算法会产生粗细差异。 */
  font-synthesis: none;
  line-height: 1.75;
  overflow-wrap: break-word;
}
body.is-modal-open { overflow: hidden; }
img { display: block; max-width: 100%; }
button, summary, a[href] { cursor: pointer; }
button, input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

/* 珊瑚色焦点环与暖白、浅蓝、浅绿和深蓝背景都有清晰差异，键盘定位不依赖颜色深浅的细微变化。 */
:focus-visible { outline: 3px solid var(--brand-coral); outline-offset: 4px; }
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 10px 16px;
  color: var(--white);
  background: var(--brand-navy-deep);
  border-radius: 8px;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
.container { width: min(calc(100% - 80px), var(--container)); margin-inline: auto; }
/*
 * 页面以连续卡片、流程和说明内容为主，固定 88px 会让相邻区块的内容间距累计到 176px，削弱信息浏览效率。
 * 48–56px 仍能清楚分隔背景与标题层级，同时让常见桌面屏幕展示更多有效内容；上限用于宽屏，避免留白随视口无限增大。
 */
.section { padding: clamp(48px, 4vw, 56px) 0; }
.section--cream { background: var(--brand-cream); }
.section--mist { background: var(--brand-mist); }
.section--navy { color: var(--text); background: var(--brand-mint); }
/* 紧凑区块比普通内容区再减少一个 8px 间距单位，但保留 40px，防止文字与相邻背景边界显得拥挤。 */
.section--compact { padding: 40px 0; }

h1, h2, h3, p { margin-top: 0; }
h1, h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.25;
}
h1 { margin-bottom: 24px; font-size: clamp(42px, 5vw, 72px); }
h2 { margin-bottom: 20px; font-size: clamp(32px, 3.4vw, 48px); }
h3 { margin-bottom: 10px; font-size: 21px; line-height: 1.45; }
.lead { max-width: 760px; color: var(--muted); font-size: 18px; }
.section--navy .lead { color: var(--muted); }
/* 原深色理念区改成浅薄荷后，按钮必须回到品牌蓝实底；否则旧的白底按钮会与浅色面板融为一体。 */
.section--navy .button--light { color: var(--white); background: var(--brand-navy); border-color: var(--brand-navy); }
.section--navy .button--light:hover { color: var(--brand-navy); background: var(--white); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--brand-navy);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.eyebrow::before { width: 28px; height: 3px; content: ""; background: var(--brand-sun); border-radius: 99px; }
.section--navy .eyebrow { color: var(--brand-navy); }
.section-heading { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: end; margin-bottom: 40px; }
/*
 * 内容区标题需要和右侧说明、下方卡片共同构成信息层级，不能沿用首屏标题的强视觉重量。
 * 单独降低字号、字重并放松行高后，两行中日韩标题仍清晰醒目，但不会压过本节的流程内容；
 * 该规则仅作用于 section-heading，轮播、行动区和页脚等具有独立语义的标题保持原有尺寸。
 */
.section-heading h2 {
  /* 清除通用 h2 的 20px 底部外边距，否则网格对齐的是含外边距的盒子，文字底部会被视觉上抬高。 */
  margin-bottom: 0;
  font-size: clamp(34px, 2.8vw, 42px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.02em;
}
.section-heading > :last-child { margin-bottom: 0; color: var(--muted); }
.section--navy .section-heading > :last-child { color: var(--muted); }
.text-center { text-align: center; }
.text-center .lead { margin-inline: auto; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 11px 24px;
  color: var(--white);
  font-size: 14px;
  font-weight: 800;
  background: var(--brand-navy);
  border: 2px solid var(--brand-navy);
  border-radius: 999px;
  transition: color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.button:hover { color: var(--brand-navy); background: var(--white); box-shadow: var(--shadow-sm); }
.button--light { color: var(--brand-navy-deep); background: var(--white); border-color: var(--white); }
.button--light:hover { color: var(--white); background: transparent; }
.button--ghost { color: var(--brand-navy); background: transparent; }
.button--ghost:hover { color: var(--white); background: var(--brand-navy); }
.text-link { color: var(--brand-navy); font-weight: 800; }
.text-link::after { margin-left: 8px; content: "→"; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 30px; }
/* 居中变体用于深色理念区，避免把一次性的布局需求写进 HTML 内联样式，从而保证三语页面可复用同一规则。 */
.actions--center { justify-content: center; }

/*
 * 卡片组与步骤组后的入口在宽屏设备上承担“板块收尾”的职责，而不是移动端的强操作按钮。
 * 使用与内容容器等宽的浅色信息条建立稳定的左右视觉支点：左侧解释下一步价值，右侧保留轻量文字入口，
 * 从而保证桌面与 Pad 不会出现孤立按钮，也不会用大面积深色抢走后续内容的阅读注意力。
 */
.section-more {
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;
  min-height: 68px;
  margin-top: 24px;
  padding: 14px 20px;
  color: var(--muted);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.section-more__hint { margin: 0; font-size: 14px; line-height: 1.6; }
/*
 * 链接沿用 button 类是为了让手机端无需复制元素即可恢复 44px 触控按钮；
 * 在宽屏端显式消除填充、边框和阴影，使其读作信息条中的次级导航，而不是一枚缩小的主按钮。
 */
.section-more .section-more__link {
  flex: 0 0 auto;
  min-height: auto;
  padding: 6px 0;
  color: var(--brand-navy);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  white-space: nowrap;
}
.section-more .section-more__link::after { display: inline-block; margin-left: 9px; content: "→"; transition: transform var(--transition); }
.section-more .section-more__link:hover { color: var(--brand-blue); background: transparent; box-shadow: none; }
.section-more .section-more__link:hover::after { transform: translateX(3px); }

/* 头部保持 sticky 但改用高不透明暖白，滚动时仍可定位导航，同时不再让首屏顶部形成沉重的深色横条。 */
.site-header { position: sticky; z-index: 100; top: 0; color: var(--text); background: rgba(255, 249, 241, .96); border-bottom: 1px solid rgba(23,63,104,.09); backdrop-filter: blur(14px); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 88px; gap: 24px; }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; }
/* 浅色导航已经能直接承载彩色 Logo，因此移除旧白色胶囊，避免 Logo 周围出现重复容器层级。 */
.brand img { width: 210px; height: auto; }
.desktop-nav { display: flex; align-items: center; gap: 24px; font-size: 14px; font-weight: 700; }
.desktop-nav > a:not(.button) { padding: 8px 0; border-bottom: 2px solid transparent; transition: border-color var(--transition), color var(--transition); }
.desktop-nav > a:not(.button):hover, .desktop-nav > a[aria-current="page"] { color: var(--brand-navy); border-color: var(--brand-sun); }
.desktop-nav .button { color: var(--white); background: var(--brand-navy); border-color: var(--brand-navy); }
.desktop-nav .button:hover { color: var(--brand-navy); background: var(--white); }
.language-selector { position: relative; }
.language-selector summary { display: flex; align-items: center; gap: 8px; padding: 7px 10px; list-style: none; background: var(--white); border: 1px solid var(--line); border-radius: 999px; }
.language-selector summary::-webkit-details-marker { display: none; }
.language-selector summary::after { content: "⌄"; }
.language-selector[open] summary::after { transform: rotate(180deg); }
.language-selector img, .language-menu img { width: 24px; height: 16px; object-fit: cover; }
.language-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  display: grid;
  min-width: 180px;
  padding: 8px;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.language-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; }
.language-menu a:hover, .language-menu a[aria-current="true"] { background: var(--brand-mist); }
.menu-toggle { display: none; width: 48px; height: 48px; padding: 12px; color: var(--brand-navy-deep); background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.menu-toggle span, .menu-toggle::before, .menu-toggle::after { display: block; width: 100%; height: 2px; content: ""; background: currentColor; border-radius: 9px; }
.menu-toggle span { margin: 6px 0; }
.mobile-nav { padding: 8px 0 22px; background: rgba(255,249,241,.98); border-top: 1px solid var(--line); }
.mobile-nav__links { display: grid; gap: 4px; }
.mobile-nav__links > a { padding: 11px 4px; font-weight: 700; }
.mobile-languages { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mobile-languages a { display: flex; align-items: center; gap: 7px; padding: 8px 11px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; }
.mobile-languages img { width: 24px; height: 16px; }

/* 确认后的首屏将文案与照片拆成左右两块：文字在浅色背景上直接获得对比度，照片不再需要深蓝遮罩。 */
.carousel { position: relative; color: var(--text); background: linear-gradient(112deg, var(--brand-cream) 0%, #fffdf8 58%, var(--brand-mint) 100%); }
.carousel::before { position: absolute; top: 90px; left: -58px; width: 165px; height: 165px; content: ""; border: 28px solid rgba(247,191,60,.12); border-radius: 50%; }
/* 首页在 head 中尽早声明脚本可用后，初始化前只占用一屏高度；is-ready 建立后再完全交给 hidden 状态控制。无脚本时没有 js 类，三屏正文仍全部显示。 */
html.js .carousel:not(.is-ready) .carousel__slide:not(:first-child) { display: none; }
.carousel__slide { position: relative; min-height: 660px; overflow: hidden; isolation: isolate; }
.carousel__media { position: absolute; z-index: -1; top: 56px; right: max(40px, calc((100% - var(--container)) / 2)); bottom: 78px; left: calc(50% + 24px); overflow: hidden; background: var(--brand-mist); border-radius: 110px 30px 30px 30px; box-shadow: var(--shadow-lg); }
.carousel__media::before { position: absolute; z-index: 1; inset: 0; content: ""; border: 1px solid rgba(255,255,255,.55); border-radius: inherit; pointer-events: none; }
.carousel__media img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
.carousel__content { display: flex; flex-direction: column; justify-content: center; min-height: 660px; padding-top: 70px; padding-bottom: 96px; }
.carousel__content > * { max-width: 46%; }
/* 三张轮播分别使用 h1 与 h2 保持页面语义，但视觉上必须采用同一字号和下边距，否则切换时标题盒高度会改变。 */
.carousel__content h1, .carousel__content h2 { margin-bottom: 24px; font-size: clamp(42px, 4.2vw, 60px); }
.carousel__content .lead { color: var(--muted); line-height: 1.9; }
.carousel__content .text-link { color: var(--brand-navy); text-decoration: underline; text-decoration-color: rgba(11,90,166,.28); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.carousel__content .button--light { color: var(--white); background: var(--brand-navy); border-color: var(--brand-navy); }
.carousel__content .button--light:hover { color: var(--brand-navy); background: var(--white); }
.carousel__controls {
  position: absolute;
  z-index: 5;
  right: max(32px, calc((100% - var(--container)) / 2));
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(23,63,104,.1);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
.carousel__arrow, .carousel__toggle { width: 44px; height: 44px; color: var(--brand-navy-deep); background: var(--brand-mist); border: 1px solid var(--line); border-radius: 50%; }
.carousel__arrow:hover, .carousel__toggle:hover { color: var(--white); background: var(--brand-navy); }
.carousel__dots { display: flex; gap: 8px; }
.carousel__dot { position: relative; width: 24px; height: 44px; padding: 0; background: transparent; border: 0; }
.carousel__dot::before { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; content: ""; background: #c9d8dc; border-radius: 99px; transform: translate(-50%, -50%); transition: width var(--transition), background var(--transition); }
.carousel__dot[aria-current="true"]::before { width: 20px; background: var(--brand-coral); }

/* 四项价值改为独立浅色卡片；小面积彩色顶边建立节奏，避免多个高饱和色同时占据正文背景。 */
.value-band { padding: 24px 0 34px; color: var(--text); background: var(--brand-cream); }
.value-band__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.value-band__item { position: relative; padding: 25px 24px; overflow: hidden; background: var(--white); border: 1px solid rgba(23,63,104,.08); border-radius: var(--radius-sm); box-shadow: 0 10px 30px rgba(23,63,104,.05); }
.value-band__item::before { position: absolute; top: 0; right: 0; left: 0; height: 4px; content: ""; background: var(--brand-navy); }
.value-band__item:nth-child(2)::before { background: var(--brand-coral); }
.value-band__item:nth-child(3)::before { background: var(--brand-green); }
.value-band__item:nth-child(4)::before { background: var(--brand-sun); }
.value-band__item strong { display: block; margin-bottom: 4px; color: var(--brand-navy-deep); }
.value-band__item span { color: var(--muted); font-size: 13px; }

.image-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 180px; gap: 18px; }
.image-card { position: relative; overflow: hidden; border-radius: var(--radius-md); }
.image-card:first-child { grid-column: span 7; grid-row: span 2; }
.image-card:nth-child(2), .image-card:nth-child(3) { grid-column: span 5; }
.image-card:nth-child(4) { grid-column: span 12; }
.image-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms ease; }
.image-card:hover img { transform: scale(1.025); }
.image-card__copy { position: absolute; inset: auto 0 0; padding: 42px 26px 22px; color: var(--white); background: linear-gradient(transparent, rgba(5,42,87,.92)); }
.image-card__copy h3, .image-card__copy p { margin-bottom: 0; }
.image-card__copy p { color: #dce7f2; font-size: 13px; }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* 四项家庭价值在宽屏保持一行、平板变为 2×2，避免通用三列网格产生 3+1 的孤立尾卡。 */
.card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-grid--values > :last-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 20px;
  align-items: start;
}
/* 桌面端不展示辅助图标，最后一张价值卡恢复为“编号｜完整正文”两列，避免图标挤压成熟的桌面布局。 */
.card-grid--values > :last-child .card__number { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
.card-grid--values > :last-child h3, .card-grid--values > :last-child p { grid-column: 2; }
/* 运行时会把原段落移入详情容器；display:contents 让段落继续参加外层网格，并显式留在正文列。 */
.card-grid--values > :last-child .mobile-card__detail-body > p { grid-column: 2; }
.card {
  position: relative;
  padding: 32px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.card { box-shadow: 0 10px 30px rgba(23,63,104,.04); }
.card:hover { border-color: rgba(11,90,166,.28); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.card p { margin-bottom: 0; color: var(--muted); }
.card__number { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 22px; color: var(--brand-navy-deep); font-weight: 800; background: #dceffd; border-radius: 15px; }
.card__tag { display: inline-block; margin-bottom: 14px; padding: 4px 10px; color: var(--brand-navy); font-size: 12px; font-weight: 800; background: #e8f0f8; border-radius: 99px; }
.card--accent { border-top: 4px solid var(--brand-green); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.card--accent:nth-child(2n) { border-top-color: var(--brand-coral); }
/*
 * 业务图标只服务于手机端快速扫读。桌面布局原本已经清晰，因此默认隐藏，避免辅助元素改变标题宽度、
 * 卡片高度或既有视觉节奏；手机断点内再按内容类型显式恢复为 grid/block。
 */
.card__visual { display: none; width: 34px; height: 34px; margin-bottom: 16px; color: var(--brand-navy); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.value-band__item .card__visual { width: 28px; height: 28px; margin-bottom: 10px; }
.process-summary__step .card__visual { width: 32px; height: 32px; }
.timeline__body .card__visual { width: 30px; height: 30px; }

/*
 * 折叠内容是渐进增强：脚本运行后才生成摘要和 details。桌面端隐藏额外摘要与开关，
 * 直接展示原有完整段落；禁用脚本时这些节点根本不存在，因此原始 HTML 同样完整可读。
 */
.mobile-card__preview, .mobile-card__details > summary { display: none; }
.mobile-card__details, .mobile-card__detail-body { display: contents; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split__media { position: relative; min-width: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
/* 媒体框而不是图片固有尺寸决定布局；图片始终只在框内铺满，避免任何语言页面被 1200/1672px 原图撑宽或撑高。 */
.split__media img { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: center; }
.check-list { display: grid; gap: 14px; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 34px; }
.check-list li::before { position: absolute; top: .52em; left: 0; width: 18px; height: 18px; content: ""; background: var(--brand-green); border: 5px solid #dff0e2; border-radius: 50%; }
/*
 * notice 在三语页面中都是所在内容块的最后一个元素，保留浏览器默认的段落底边距只会在提示框外制造不可见占位。
 * 仅重置 notice，不改变普通正文段落之间的阅读节奏；提示框内部留白继续由 padding 明确控制。
 */
.notice { margin-bottom: 0; padding: 20px 24px; color: #4c3b19; background: #fff7dd; border-left: 5px solid #d99a14; border-radius: var(--radius-sm); }
/*
 * 关于我们页的 notice 直接跟在卡片网格后，前一个元素没有段落外边距；单独补 20px 可区分“对比卡片”和“适用边界”。
 * 使用相邻选择器是为了不影响服务页中跟在普通正文后的 notice，避免正文自身间距与本规则叠加。
 */
.card-grid + .notice { margin-top: 20px; }

.process-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.process-summary__step { padding: 34px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 10px 30px rgba(23,63,104,.05); }
.process-summary__step:not(:last-child) { border-right: 1px solid var(--line); }
/* 13px 的步骤标签需要 4.5:1 正文对比度，因此使用深蓝；时间线编号字号更大，仍可保留珊瑚色作为视觉节奏。 */
.process-summary__step small { color: var(--brand-navy); font-weight: 900; letter-spacing: .1em; }
.timeline__number { color: var(--brand-coral); font-weight: 900; letter-spacing: .1em; }
.process-summary__step p { margin-bottom: 0; color: var(--muted); }
.timeline { position: relative; display: grid; gap: 22px; max-width: 920px; margin: 0 auto; }
.timeline::before { position: absolute; top: 20px; bottom: 20px; left: 39px; width: 2px; content: ""; background: var(--line); }
.timeline__item { position: relative; display: grid; grid-template-columns: 80px 1fr; gap: 22px; }
.timeline__number { z-index: 1; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; color: var(--brand-navy-deep); background: #dceffd; border: 8px solid var(--white); border-radius: 50%; }
.timeline__body { padding: 26px 30px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); }
.timeline__body p { margin-bottom: 0; color: var(--muted); }

.comparison-wrap { overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 18px 50px rgba(23,63,104,.07); }
.comparison { width: 100%; border-collapse: collapse; }
.comparison th, .comparison td { padding: 20px 24px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.comparison tr:last-child td { border-bottom: 0; }
.comparison thead th { color: var(--brand-navy-deep); background: #eaf3f7; }
.comparison thead th:last-child { color: #244e28; background: #dff1db; }
.comparison tbody td:first-child { width: 20%; color: var(--brand-navy); font-weight: 800; }
.comparison tbody td:last-child { color: #35543a; background: #f4faf2; }

/* 内页标题区使用暖白到浅蓝、浅绿的柔和渐变；深蓝仅承担标题文字，避免每个内页打开时先出现整屏暗色。 */
.page-hero { position: relative; min-height: 410px; color: var(--text); overflow: hidden; background: linear-gradient(120deg, var(--brand-cream), var(--brand-mist) 58%, var(--brand-mint)); isolation: isolate; }
.page-hero::before { position: absolute; z-index: -1; top: -90px; right: 9%; width: 280px; height: 280px; content: ""; border: 50px solid rgba(247,191,60,.18); border-radius: 50%; }
.page-hero::after { position: absolute; z-index: -1; right: -100px; bottom: -160px; width: 360px; height: 360px; content: ""; background: rgba(98,180,93,.12); border-radius: 48% 52% 42% 58%; }
.page-hero__inner { display: flex; flex-direction: column; justify-content: center; min-height: 410px; padding-top: 70px; padding-bottom: 70px; }
.page-hero .eyebrow { color: var(--brand-navy); }
.page-hero .lead { color: var(--muted); }
.breadcrumbs { margin-bottom: 28px; color: var(--muted); font-size: 13px; }
.breadcrumbs a:hover { color: var(--brand-navy); }
/* 理念陈述改成浅色品牌面板，左侧阳光黄强调线保留引用语义，同时确保长段文字具有稳定对比度。 */
.quote-panel { padding: 54px; color: var(--brand-navy-deep); background: linear-gradient(135deg, var(--white), #fff5d8); border: 1px solid rgba(23,63,104,.08); border-left: 7px solid var(--brand-sun); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.quote-panel blockquote { margin: 0; font-family: var(--font-serif); font-size: clamp(27px, 3vw, 38px); line-height: 1.55; }
.boundary { margin-top: 22px; padding-top: 20px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }

.cta-panel { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 52px; align-items: center; padding: 68px 72px; overflow: hidden; color: var(--brand-navy-deep); background: linear-gradient(120deg, #ffe8a2, #f8c952); border-radius: var(--radius-lg); }
.cta-panel::after { position: absolute; right: -100px; bottom: -140px; width: 350px; height: 350px; content: ""; background: var(--white); border-radius: 50%; opacity: .28; }
.cta-panel h2 { margin-bottom: 12px; }
.cta-panel p { max-width: 760px; margin-bottom: 0; color: #435563; }
.cta-panel__actions { position: relative; z-index: 2; display: grid; gap: 10px; text-align: center; }
.cta-panel__actions small { color: #5e542e; }
/* 黄色面板上的文字链接使用深蓝并保留下划线；主按钮仍为白底，形成清晰但不过度强势的双操作层级。 */
.cta-panel .text-link { color: var(--brand-navy-deep); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cta-panel .text-link:hover { color: var(--brand-navy); }
.cta-panel .button--light { color: var(--white); background: var(--brand-navy-deep); border-color: var(--brand-navy-deep); }
.cta-panel .button--light:hover { color: var(--brand-navy-deep); background: var(--white); }

.site-footer { padding: 62px 0 30px; color: #d3dfe8; background: var(--brand-navy-deep); }
.site-footer__grid { display: grid; grid-template-columns: 1.3fr .8fr .9fr; gap: 54px; }
.site-footer__logo { width: 170px; height: 170px; margin-bottom: 20px; padding: 22px; object-fit: contain; background: var(--white); border-radius: 50%; }
.site-footer h2 { color: var(--white); font-family: inherit; font-size: 17px; letter-spacing: 0; }
.site-footer p, .site-footer a { font-size: 13px; }
.site-footer nav { display: grid; gap: 8px; }
.site-footer a:hover { color: var(--white); }
.placeholder { color: #ffc2cc; }
/* 页脚底部统一使用客户指定的浅灰蓝；rgb(211, 223, 232) 在深蓝底上达到 7.95:1，使主名称与小字号法律后缀都保持清晰。 */
.site-footer__bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 44px; padding-top: 24px; color: rgb(211, 223, 232); border-top: 1px solid rgba(255,255,255,.12); }
/*
 * 公司法律主体后缀使用 small 语义元素并降低一个视觉层级，让 FamilyLinkJapan 继续承担品牌识别作用；
 * 外层公司名禁止换行，避免窄屏把法律后缀单独甩到下一行而破坏完整名称。后缀显式继承公司主名颜色，
 * 只通过较小字号建立层级，既满足客户要求的颜色一致性，也不会让法律属性压过主品牌名称。
 */
.company-legal-name { white-space: nowrap; }
.company-legal-suffix { color: inherit; font-size: .72em; }
/*
 * 页脚语言区使用 nav 明确表达这组三语链接的导航用途；这里覆盖页脚栏目 nav 的网格布局，
 * 避免三个短链接被拆成纵向菜单。默认不显示下划线可减少页脚底栏的视觉噪点；鼠标悬停
 * 或键盘聚焦时再显示下划线，并配合全站焦点环保证两种操作方式都有明确反馈。
 */
.site-footer nav.site-footer__languages { display: block; margin: 0; }
.site-footer__languages a {
  font-size: inherit;
  text-underline-offset: 3px;
}
.site-footer__languages a:hover,
.site-footer__languages a:focus-visible {
  color: var(--white);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.site-footer__languages a[aria-current="page"] { color: var(--white); font-weight: 700; }

.modal { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 24px; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(23,50,71,.72); backdrop-filter: blur(5px); }
.modal__dialog { position: relative; width: min(100%, 520px); max-height: calc(100vh - 48px); overflow: auto; padding: 38px; text-align: center; background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.modal__close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; color: var(--brand-navy); background: var(--brand-mist); border: 0; border-radius: 50%; font-size: 24px; }
/* 联系微信图片是接近正方形的纯二维码；限制最大宽度并保持高度自动计算，可保证二维码完整清晰，同时避免在小屏弹窗中被拉伸或超出可视区域。 */
.modal__dialog img { width: min(100%, 320px); height: auto; max-height: min(60vh, 520px); margin: 22px auto; object-fit: contain; }
.modal__dialog p { color: var(--muted); }
/* 邮箱在发送按钮前直接可见，让未配置默认邮件客户端的用户仍能获取联系方式；地址与复制操作共用一个边框组，明确它们属于同一项信息。 */
.modal__email { margin: 20px 0 14px; text-align: left; }
.modal__email-label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 13px; font-weight: 800; }
.modal__email-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; overflow: hidden; background: #f7fafc; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.modal__email-address { display: flex; align-items: center; min-width: 0; padding: 12px 14px; color: var(--brand-navy-deep); overflow-wrap: anywhere; font-size: 14px; font-weight: 700; }
.modal__copy-button { min-width: 104px; min-height: 46px; padding: 10px 14px; color: var(--brand-navy); font-weight: 800; background: var(--brand-mist); border: 0; border-left: 1px solid var(--line); transition: color var(--transition), background-color var(--transition); }
.modal__copy-button:hover { color: var(--white); background: var(--brand-navy); }
/* 固定反馈区域的最小高度，成功或失败文字出现时不会推动下方发送按钮跳动；文字本身与 aria-live 同时保证反馈不只依赖颜色。 */
.modal__copy-status { display: block; min-height: 20px; margin-top: 5px; color: var(--brand-navy); font-size: 12px; line-height: 1.5; text-align: right; }

/* 返回顶部属于渐进增强：脚本不可用时按钮不存在，正文与导航仍完整；出现后使用 48px 触控区保证鼠标与触屏都容易命中。 */
.back-to-top {
  position: fixed;
  z-index: 90;
  right: 24px;
  bottom: 24px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: var(--white);
  background: var(--brand-navy);
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(23,63,104,.26);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity var(--transition), transform var(--transition), background var(--transition);
}
/* 28px SVG 使用圆角粗线绘制完整箭头和箭杆，比依赖系统字体的“↑”更稳定，也不会因字体回退而变细或偏离中心。 */
.back-to-top svg { display: block; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
/* 阳光黄悬停态与默认品牌蓝、深蓝页脚均有明显差异，用户滚到页尾时不会把按钮误认为装饰。 */
.back-to-top:hover { color: var(--brand-navy-deep); background: var(--brand-sun); }
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
body.is-modal-open .back-to-top { opacity: 0; pointer-events: none; }

.language-entry { min-height: 100vh; color: var(--text); background: linear-gradient(135deg, var(--brand-cream), var(--brand-mist) 58%, var(--brand-mint)); }
.language-entry__inner { display: grid; place-items: center; min-height: 100vh; padding: 50px 24px; text-align: center; }
.language-entry__card { width: min(100%, 760px); padding: 52px; background: rgba(255,255,255,.86); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.language-entry__logo { width: min(100%, 380px); margin: 0 auto 34px; padding: 14px 22px; }
.language-entry__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.language-entry__links a { display: grid; place-items: center; min-height: 110px; padding: 16px; color: var(--brand-navy-deep); font-weight: 800; background: var(--brand-cream); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.language-entry__links img { width: 30px; margin-bottom: 8px; }
.language-entry__status { margin-top: 22px; color: var(--muted); font-size: 14px; }

@media (max-width: 1080px) {
  .desktop-nav { gap: 15px; font-size: 13px; }
  .desktop-nav .button { display: none; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid--four, .card-grid--values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .container { width: min(calc(100% - 40px), var(--container)); }
  /* Pad 仍使用桌面端内容结构，但纵向空间更有限，因此采用紧凑区间的下限，并与 821px 附近保持平滑过渡。 */
  .section { padding: 48px 0; }
  .section--compact { padding: 40px 0; }
  .desktop-nav { display: none; }
  .menu-toggle { display: block; }
  /* HTML 首帧预先隐藏移动导航以避免主脚本加载后页面整体上移；禁用脚本时覆盖原生 hidden，保证导航仍然完整可读。 */
  html:not(.js) .mobile-nav[hidden] { display: block !important; }
  .section-heading, .split, .cta-panel, .site-footer__grid { grid-template-columns: 1fr; gap: 26px; }
  /* 820px 以下将同一份轮播 DOM 纵向排列：内容先读、照片后看，视觉顺序与无脚本、读屏顺序完全一致。 */
  .carousel__slide { display: flex; flex-direction: column; min-height: 0; }
  /* 490px 取三语在平板断点下的最长内容高度上整值，较短幻灯片也保留同一盒高，因此图片区和后续价值卡不会上下跳动。 */
  .carousel__content { order: 1; min-height: 490px; padding-top: 64px; padding-bottom: 38px; }
  .carousel__content > * { max-width: 100%; }
  /* 平板纵向首屏继续统一三张标题尺寸；clamp 上限避免日文和英文长标题挤压图片区。 */
  .carousel__content h1, .carousel__content h2 { font-size: clamp(38px, 6vw, 48px); }
  .carousel__media { position: relative; z-index: 0; inset: auto; order: 2; width: min(calc(100% - 40px), var(--container)); height: 410px; margin: 0 auto 84px; border-radius: 80px 26px 26px 26px; }
  .carousel__controls { right: 40px; bottom: 22px; }
  .value-band__grid { grid-template-columns: repeat(2, 1fr); }
  .value-band__item:nth-child(n) { border: 1px solid rgba(23,63,104,.08); }
  .image-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 270px; }
  .image-card:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .process-summary { grid-template-columns: 1fr; }
  .process-summary__step:not(:last-child) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .comparison-wrap { overflow-x: auto; }
  .comparison { min-width: 760px; }
  .cta-panel { padding: 48px 38px; }
}

@media (max-width: 560px) {
  /* 16px 页面边距在 375px 屏幕中仍留下 343px 内容宽度，可稳定容纳两个至少 163px 的信息卡。 */
  .container { width: min(calc(100% - 32px), var(--container)); }
  body { font-size: 14px; line-height: 1.65; }
  .site-header__inner { min-height: 64px; }
  .brand img { width: 148px; }
  .menu-toggle { width: 42px; height: 42px; padding: 10px; }
  .mobile-nav { max-height: calc(100vh - 64px); padding: 6px 0 14px; overflow-y: auto; }
  .mobile-nav__links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
  .mobile-nav__links > a { padding: 9px 4px; }

  h1 { margin-bottom: 14px; font-size: 32px; line-height: 1.22; }
  h2 { margin-bottom: 14px; font-size: 26px; }
  h3 { margin-bottom: 7px; font-size: 17px; line-height: 1.42; }
  .lead { font-size: 15px; line-height: 1.7; }
  .eyebrow { gap: 7px; margin-bottom: 10px; font-size: 10px; }
  .eyebrow::before { width: 20px; height: 2px; }
  /*
   * 手机端所有内容区统一保留上下各 24px：该数值已经比 Pad 的 48px 紧凑一半，无需再根据相邻关系削减顶部。
   * 对称留白确保标题不会贴近背景边界，也避免同一 section 因前置元素类型不同而产生不可预测的垂直偏移。
   */
  .section, .section--compact { padding: 24px 0; }
  .section-heading { gap: 10px; margin-bottom: 20px; }
  .section-heading h2 { font-size: 25px; line-height: 1.3; }
  .section-heading > :last-child { font-size: 13px; line-height: 1.65; }

  /* 手机端动作仍纵向排列以保留 44px 触控高度，但收紧按钮之间和内容区之间的距离。 */
  .actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 18px; }
  .actions .button { width: 100%; }
  .button { min-height: 44px; padding: 8px 18px; }

  /*
   * 只有手机断点把板块收尾入口还原为 App 式满宽按钮；辅助句在窄屏上不再重复占用纵向空间。
   * 这里必须覆盖宽屏信息条的全部容器属性，确保 560px 临界宽度也不会残留边框或空白内边距。
   */
  .section-more { min-height: 0; padding: 0; background: transparent; border: 0; border-radius: 0; }
  .section-more__hint { display: none; }
  .section-more .section-more__link {
    min-height: 44px;
    padding: 8px 18px;
    color: var(--white);
    background: var(--brand-navy);
    border: 2px solid var(--brand-navy);
    border-radius: 999px;
    box-shadow: none;
  }
  .section-more .section-more__link::after { display: none; }
  .section-more .section-more__link:hover { color: var(--brand-navy); background: var(--white); box-shadow: var(--shadow-sm); }

  /* 首屏改为先看照片、再读核心主张；取消按语言预留的巨大固定高度，内容长度只占自身实际空间。 */
  .carousel__slide { min-height: 0; }
  .carousel__media { order: 1; width: calc(100% - 32px); height: 205px; margin: 16px auto 0; border-radius: 40px 16px 16px 16px; }
  .carousel__media img { object-position: 60% center; }
  .carousel__content { order: 2; min-height: 0; padding-top: 24px; padding-bottom: 72px; }
  .carousel__content h1, .carousel__content h2 { margin-bottom: 12px; font-size: 31px; }
  .carousel__content .lead { display: -webkit-box; overflow: hidden; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .carousel__content .actions { display: flex; flex-wrap: nowrap; align-items: center; }
  .carousel__content .actions .button { width: auto; min-height: 42px; padding-inline: 16px; white-space: nowrap; }
  .carousel__content .text-link { font-size: 13px; white-space: nowrap; }
  .carousel__controls { right: 16px; bottom: 12px; gap: 2px; padding: 4px 6px; }
  .carousel__arrow, .carousel__toggle { width: 34px; height: 34px; }
  .carousel__dot { width: 18px; height: 34px; }

  /* 核心价值和短信息卡使用两列，用户无需横滑即可在同一屏比较多个概念。 */
  .value-band { padding: 14px 0 20px; }
  .value-band__grid, .card-grid, .process-summary, .image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* 价值卡把图标与标题压到同一行，说明独占下一行；相比纵向堆叠可直接省下一整行图标高度。 */
  .value-band__item { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 5px 8px; align-items: center; min-width: 0; padding: 12px; }
  .value-band__item strong { grid-column: 2; grid-row: 1; margin: 0; font-size: 14px; line-height: 1.35; }
  .value-band__item span { display: block; grid-column: 1 / -1; font-size: 11px; line-height: 1.45; }
  .value-band__item .card__visual { display: block; grid-column: 1; grid-row: 1; width: 25px; height: 25px; margin: 0; }
  /*
   * 窄卡片不能把图标、长标题和编号同时挤在一行。第一行只保留图标与编号/标签作为快速标识，
   * 标题从第二行开始占满卡片宽度，正文和展开操作继续独占后续行，兼顾密度与正常中文分词。
   */
  .card { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 8px; row-gap: 7px; align-items: center; min-width: 0; padding: 13px; border-radius: 15px; }
  .card--accent { border-top-width: 3px; border-radius: 0 0 15px 15px; }
  .card:hover { transform: none; }
  .card > .card__visual { display: block; grid-column: 1; grid-row: 1; width: 28px; height: 28px; margin: 0; }
  .card > .card__number, .card > .card__tag { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; }
  .card > .card__number { width: 28px; height: 28px; font-size: 10px; border-radius: 9px; }
  .card > .card__tag { max-width: 70px; padding: 3px 7px; overflow: hidden; font-size: 9px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
  .card > h2, .card > h3 { grid-column: 1 / -1; grid-row: 2; align-self: center; margin: 0; overflow-wrap: normal; word-break: normal; font-family: var(--font-sans); font-size: 15px; font-weight: 800; letter-spacing: 0; }
  .card > p, .card > .mobile-card__preview, .card > .mobile-card__details { grid-column: 1 / -1; }
  .card p { font-size: 12px; line-height: 1.55; }
  /* 奇数数量的尾卡横跨两列，避免最后一项只占左侧半行形成视觉空洞。 */
  .card-grid > .card:last-child:nth-child(odd), .process-summary > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .card-grid--values > :last-child { display: grid; grid-column: 1 / -1; }
  /* 桌面最后一张价值卡的专用列规则在手机端不再适用，恢复与其他紧凑卡一致的标题栏。 */
  .card-grid--values > :last-child .card__visual,
  .card-grid--values > :last-child .card__number,
  .card-grid--values > :last-child h3,
  .card-grid--values > :last-child p,
  .card-grid--values > :last-child .mobile-card__detail-body > p { margin-bottom: 0; }
  .card-grid--values > :last-child .card__visual { grid-column: 1; grid-row: 1; }
  .card-grid--values > :last-child .card__number { grid-column: 3; grid-row: 1; }
  .card-grid--values > :last-child h3 { grid-column: 1 / -1; grid-row: 2; }
  .card-grid--values > :last-child > p,
  .card-grid--values > :last-child > .mobile-card__preview,
  .card-grid--values > :last-child > .mobile-card__details { grid-column: 1 / -1; }

  /* 运行时生成的摘要仅在手机出现，完整正文放入原生 details；打开的卡片占满整行，长文本不会被压在半屏内。 */
  .mobile-card__preview { display: -webkit-box; margin: 0 0 8px; overflow: hidden; color: var(--muted); font-size: 12px !important; line-height: 1.5 !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .mobile-card__details { display: block; margin-top: auto; }
  .mobile-card__details > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: 0 -6px -7px; padding: 8px 6px; color: var(--brand-navy); font-size: 12px; font-weight: 800; list-style: none; }
  .mobile-card__details > summary::-webkit-details-marker { display: none; }
  .mobile-card__details > summary::after { width: 8px; height: 8px; margin-left: 8px; content: ""; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--transition); }
  .mobile-card__details[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
  .mobile-card__detail-body { display: block; padding-top: 10px; border-top: 1px solid var(--line); }
  .mobile-card__detail-body > p { margin-bottom: 9px; }
  .mobile-card__detail-body > p:last-child { margin-bottom: 0; }
  .mobile-card__detail-body > .boundary { margin-top: 12px; padding-top: 12px; }
  [data-mobile-disclosure] { display: grid; }
  [data-mobile-disclosure] .mobile-card__details:not([open]) .mobile-card__detail-body { display: none; }
  /* :has() 直接跟随原生 open 状态，避免浏览器延迟派发 toggle 事件时短暂保留半宽；is-expanded 为旧环境保留同等兼容路径。 */
  .card.is-expanded, .timeline__item.is-expanded,
  .card:has(.mobile-card__details[open]), .timeline__item:has(.mobile-card__details[open]) { grid-column: 1 / -1; }
  .card.is-expanded .mobile-card__preview, .timeline__item.is-expanded .mobile-card__preview,
  .card:has(.mobile-card__details[open]) .mobile-card__preview,
  .timeline__item:has(.mobile-card__details[open]) .mobile-card__preview { display: none; }

  /* 四张生活照片改成 2×2 宫格；短标题覆盖在图上，说明不再重复占据纵向空间。 */
  .image-grid { grid-auto-rows: 155px; }
  .image-card:nth-child(n) { grid-column: auto; grid-row: auto; border-radius: 15px; }
  .image-card__copy { padding: 38px 12px 11px; }
  .image-card__copy h3 { margin: 0; color: var(--white); font-size: 15px; }
  .image-card__copy p { display: none; }

  .process-summary__step { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 7px 8px; align-items: center; min-width: 0; padding: 13px 12px; border-radius: 15px; }
  .process-summary__step:not(:last-child) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .process-summary__step .card__visual { display: block; grid-column: 1; grid-row: 1; width: 28px; height: 28px; margin: 0; }
  .process-summary__step small { grid-column: 3; grid-row: 1; font-size: 8px; white-space: nowrap; }
  .process-summary__step h3 { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 14px; }
  .process-summary__step p { grid-column: 1 / -1; font-size: 11px; line-height: 1.5; }

  /* 八步流程在手机端成为两列步骤入口；原连接线在这种空间关系下会造成错误阅读顺序，因此移除。 */
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: none; }
  .timeline::before { display: none; }
  .timeline__item { display: block; min-width: 0; }
  .timeline__number { position: absolute; z-index: 2; top: 12px; right: 12px; width: 29px; height: 29px; color: var(--brand-navy); background: var(--brand-mist); border: 0; font-size: 10px; border-radius: 10px; }
  .timeline__body { display: grid; grid-template-columns: 29px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 100%; padding: 13px 12px; border-radius: 15px; }
  .timeline__body .card__visual { display: block; grid-column: 1; grid-row: 1; width: 29px; height: 29px; margin: 0; }
  .timeline__body h3 { grid-column: 1 / -1; grid-row: 2; max-width: none; margin: 0; font-size: 14px; }
  .timeline__body > p, .timeline__body > .mobile-card__preview, .timeline__body > .mobile-card__details { grid-column: 1 / -1; }
  .timeline__body p { font-size: 11px; }

  /* 内页开场不再强制占用 410px，让用户在首屏继续看到下一板块的内容入口。 */
  .page-hero, .page-hero__inner { min-height: 0; }
  .page-hero__inner { padding-top: 28px; padding-bottom: 30px; }
  .page-hero::before { top: -70px; right: -35px; width: 180px; height: 180px; border-width: 32px; }
  .page-hero::after { right: -100px; bottom: -190px; }
  .breadcrumbs { margin-bottom: 12px; font-size: 11px; }
  .quote-panel { padding: 24px 20px; border-left-width: 4px; border-radius: 18px; }
  .quote-panel blockquote { font-size: 21px; line-height: 1.5; }
  .notice { padding: 14px 15px; font-size: 12px; border-left-width: 4px; }
  /* 手机卡片间距本身更紧凑，因此将提示框前距同步压缩为 12px，既不贴边也不重新制造大块空白。 */
  .card-grid + .notice { margin-top: 12px; }
  .split { gap: 16px; }
  /*
   * 替换元素的固有宽度会成为网格项目的 min-content，若不显式允许收缩，1200/1672px 原图会撑破单列，
   * 表面上像“容器只有手机宽度、图片却只露出左侧”。宽度和 min-width 同时约束后，图片尺寸才能基于手机容器计算。
   */
  .split > * { min-width: 0; }
  .split__media { width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; }
  /* 共读照片的人物集中在画面右侧，移动端宽容器若完全居中会留下过多空墙；仅为该实际构图移动焦点，不影响其他服务照片。 */
  body[data-page="about"] .split__media img { object-position: 68% center; }
  .check-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .check-list li { padding-left: 23px; font-size: 12px; }
  .check-list li::before { width: 14px; height: 14px; border-width: 4px; }

  .cta-panel { gap: 18px; padding: 24px 20px; border-radius: 20px; }
  .cta-panel h2 { font-size: 24px; }
  .cta-panel p { font-size: 13px; }
  .cta-panel__actions { grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; text-align: left; }
  .cta-panel__actions small { grid-column: 1 / -1; }
  .site-footer { padding: 32px 0 20px; }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
  .site-footer__grid > section:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; }
  .site-footer__logo { width: 76px; height: 76px; margin: 0; padding: 10px; }
  .site-footer__grid > section:first-child p { margin: 0; }
  .site-footer__bottom { flex-direction: column; gap: 5px; margin-top: 24px; padding-top: 16px; font-size: 12px; }
  .back-to-top { right: 12px; bottom: 12px; width: 44px; height: 44px; }
  /* 手机端按“一个对比维度一张卡片”组织内容，并让两种方案始终左右并排；这样客户可以在同一视线上直接比较差异，同时不会因保留桌面表格宽度而产生整页横向滚动。 */
  .comparison-wrap { overflow: visible; border: 0; border-radius: 0; }
  .comparison { display: block; min-width: 0; }
  .comparison thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .comparison tbody { display: grid; gap: 16px; }
  .comparison tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); }
  /* 单元格允许在等宽双列中收缩，长英文和日文可在自身列内换行，不会撑宽卡片或遮挡另一列。 */
  .comparison td { display: block; min-width: 0; width: auto !important; padding: 15px 14px 17px; overflow-wrap: anywhere; font-size: 15px; line-height: 1.6; border-bottom: 0; }
  .comparison td::before { display: flex; align-items: flex-start; min-height: 45px; margin-bottom: 7px; color: var(--muted); content: attr(data-label); font-size: 11px; font-weight: 800; line-height: 1.35; letter-spacing: .04em; text-transform: uppercase; }
  /* 第一格是本卡片的比较主题而不是第三个方案，因此横跨两列并隐藏重复的“对比维度”字段名。 */
  .comparison tbody td:first-child { grid-column: 1 / -1; padding: 15px 16px; color: var(--brand-navy); font-size: 18px; font-weight: 800; background: #e8f0f8; border-bottom: 1px solid var(--line); }
  .comparison tbody td:first-child::before { display: none; content: none; }
  .comparison tbody td:nth-child(2) { background: var(--white); border-right: 1px solid var(--line); }
  .comparison tbody td:last-child { background: #f0f8f1; }
  .modal__dialog { padding: 34px 22px 24px; }
  /* 小屏弹窗的可用内容宽度有限，复制按钮换到邮箱下方可保留完整地址，并维持不小于 44px 的触控区域。 */
  .modal__email-row { grid-template-columns: 1fr; }
  .modal__copy-button { border-top: 1px solid var(--line); border-left: 0; }
  .language-entry__card { padding: 36px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  /* 用户选择减少动态时取消滚动动画、轮播淡入和悬停位移，不改变任何内容或交互能力。 */
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}