@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700&family=Noto+Sans+JP:wght@400;700&family=Noto+Sans+SC:wght@400;700&display=swap');

*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* 兜底机制：绝对禁止水平滚动 */

    /* 移动端建议使用流动字号，避免文字太小或太大 */
    font-size: clamp(15px, 2.5vw, 20px);
}

body {
  font-family: "Noto Sans JP", "Noto Sans SC", sans-serif;
  color: #333;
  background-color: #f5f5f5;
  line-height: 1.6;
}

main {
  width: 100%;
  padding-inline: .5rem; /* 左右各留出 1rem 边距，绝不会溢出 */
  margin: 0 auto;

  /* 处理日文中带有 ~ 等符号导致不换行的问题 */
  word-break: break-all;
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    main {
	max-width: 70vw;       /* 始终占据屏幕宽度的 70% */
	margin-inline: auto;   /* 居中 */

  }
}




a {
    cursor: pointer;
    /* text-decoration: none; */
}
a:link    { color: maroon; }
a:visited { color: gray; }
a:focus,
a:hover   { color: maroon; background-color: #ffd9d9; }
a:active  { color: red; background-color: #ffd9d9; }

ul > li { list-style-type: circle; }
ol > li { list-style-type: decimal; }

u {
    text-decoration: underline dashed;
    text-decoration-color: maroon;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

th, td {
    text-align: left;
    border-spacing: 60px 0;
  }


ruby {
    line-height: 1.9; /* 预留足够的顶部空间 */
}
rt {
  font-size: .5em;       /* 注音字号通常设置为正文的 50% - 60% */
  color: #909399;         /* 使用醒目的颜色与正文区分 */
  font-weight: normal;    /* 保持注音纤细清晰 */
  letter-spacing: 1px;    /* 增加字间距，防止拼音挤在一起 */
}


section {
  margin-bottom: 40px; /* 间隔大小可以根据需求调整，例如 20px、40px、2rem 等 */
}

/* 如果不想让最后一个 section 后面也有大空白，可以使用： */
section:not(:last-child) {
  margin-bottom: 40px;
}

abbr[title] {
  text-decoration: underline wavy #3b82f6; /* 换成蓝色波浪下划线 */
  cursor: help;                           /* 悬停显示问号手型 */
}