@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;700&family=Cinzel:wght@400;600&display=swap');

:root {
  --primary: #3a1c71;
  --mid: #1a6a80;
  --accent: #c8a84b;
  --bg: #fdf8f0;
  --text: #2a1a0e;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Serif JP','Hiragino Mincho ProN',serif;
  font-size: 15px; line-height: 1.95; color: var(--text); background: var(--bg);
}
a { color: #6a2a00; text-decoration: none; }
a:hover { color: #a03000; text-decoration: underline; }
img { max-width: 100%; height: auto; }
p { margin-bottom: 14px; }
p:last-child { margin-bottom: 0; }

/* ===== Header ===== */
header { background: #1a0800; border-bottom: 3px solid #8b2500; }
.header-inner { max-width: 920px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; gap: 18px; }
.site-title { color: #f0c060; font-size: 22px; letter-spacing: 0.2em; display: block; font-family: 'Noto Serif JP', serif; }
.site-sub { color: #a07840; font-size: 11px; letter-spacing: 0.15em; display: block; margin-top: 3px; font-family: 'Cinzel', serif; }

/* ===== Nav ===== */
nav { background: #2a0e00; border-bottom: 1px solid #5a2000; }
nav ul { list-style: none; display: flex; flex-wrap: wrap; max-width: 920px; margin: 0 auto; padding: 0 20px; }
nav ul li a { display: block; color: #e0b060; font-size: 13px; padding: 10px 14px; letter-spacing: 0.1em; border-bottom: 2px solid transparent; transition: color 0.2s; }
nav ul li a:hover { color: #fff; text-decoration: none; }
nav ul li a.active { color: #fff; border-bottom: 2px solid #f0c060; }

/* ===== Hero with wave ===== */
.hero {
  position: relative;
  background: linear-gradient(135deg, #1a0800 0%, #4a1200 60%, #2a0e00 100%);
  padding: 70px 24px 160px;
  text-align: center;
  overflow: hidden;
}
.hero::before {
  content: '風';
  position: absolute; font-size: 240px; color: rgba(240,192,96,0.04);
  top: -40px; left: -20px; font-family: 'Noto Serif JP', serif;
}
.hero::after {
  content: '水';
  position: absolute; font-size: 240px; color: rgba(240,192,96,0.04);
  bottom: 80px; right: -10px; font-family: 'Noto Serif JP', serif;
}
.hero h1 { color: #f0c060; font-size: clamp(22px, 5vw, 36px); letter-spacing: 0.25em; margin-bottom: 12px; position: relative; }
.hero .hero-lead { color: rgba(240,192,96,0.8); font-size: 14px; max-width: 540px; margin: 0 auto; letter-spacing: 0.08em; line-height: 2; position: relative; }

.waves-wrap { position: absolute; bottom: 0; left: 0; width: 100%; }
.waves { width: 100%; height: 100px; min-height: 60px; max-height: 130px; }
.parallax > use { animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite; }
.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }
.parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; }
@keyframes move-forever {
  0% { transform: translate3d(-90px,0,0); }
  100% { transform: translate3d(85px,0,0); }
}

/* ===== Page head (subpages) ===== */
.page-head { background: linear-gradient(135deg, #2a0e00 0%, #5a1a00 100%); padding: 40px 24px; text-align: center; }
.page-head .breadcrumb { font-size: 12px; color: rgba(240,192,96,0.5); margin-bottom: 8px; letter-spacing: 0.08em; }
.page-head .breadcrumb a { color: rgba(240,192,96,0.6); }
.page-head h1 { color: #f0c060; font-size: 24px; letter-spacing: 0.2em; margin-bottom: 6px; }
.page-head .lead { color: #c09050; font-size: 13px; letter-spacing: 0.1em; }

/* ===== Layout ===== */
.content-wrap { display: grid; grid-template-columns: 1fr 220px; gap: 40px; max-width: 920px; margin: 0 auto; padding: 52px 20px; }

/* ===== Main ===== */
main h2 { font-size: 19px; color: #5a1a00; border-left: 4px solid #8b2500; padding-left: 12px; margin: 36px 0 14px; letter-spacing: 0.1em; line-height: 1.5; }
main h2:first-child { margin-top: 0; }
main h3 { font-size: 15px; color: #5a1a00; margin: 24px 0 10px; letter-spacing: 0.05em; }
main h3::before { content: '◆ '; color: #8b2500; font-size: 11px; }

.highlight { background: #fff8ee; border: 1px solid #e8c080; border-radius: 3px; padding: 18px 22px; margin: 20px 0; }
.highlight p:last-child { margin: 0; }

.img-center { text-align: center; margin: 28px 0; }
.img-center figcaption { font-size: 13px; color: #999; margin-top: 6px; letter-spacing: 0.05em; }

/* ===== Tables ===== */
table.fusuitable { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
table.fusuitable th { background: #5a1a00; color: #f0c060; padding: 8px 12px; text-align: left; letter-spacing: 0.05em; }
table.fusuitable td { padding: 10px 12px; border-bottom: 1px solid #e8d8c0; vertical-align: top; line-height: 1.8; }
table.fusuitable tr:nth-child(even) td { background: #fff8ee; }
table.fusuitable td strong { color: #5a1a00; }

/* ===== Cards ===== */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 24px 0; }
.card { border: 1px solid #e8c080; border-radius: 3px; padding: 20px; background: #fff8ee; transition: box-shadow 0.2s; }
.card:hover { box-shadow: 0 4px 20px rgba(139,37,0,0.1); }
.card h3 { font-size: 14px; color: #5a1a00; margin: 0 0 8px; letter-spacing: 0.08em; }
.card h3::before { content: none; }
.card p { font-size: 13px; color: #666; margin: 0 0 10px; line-height: 1.7; }
.card a { font-size: 13px; color: #8b2500; }

/* ===== Sidebar ===== */
aside { padding-top: 0; }
.side-nav { background: #fff8ee; border: 1px solid #e8c080; border-radius: 3px; padding: 16px; margin-bottom: 20px; }
.side-nav h4 { font-size: 13px; color: #5a1a00; font-weight: bold; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #e8c080; letter-spacing: 0.1em; }
.side-nav ul { list-style: none; }
.side-nav ul li a { font-size: 13px; color: #5a1a00; display: block; padding: 6px 0; border-bottom: 1px dotted #e0c090; letter-spacing: 0.05em; }
.side-nav ul li:last-child a { border-bottom: none; }
.side-nav ul li a:hover { color: #8b2500; text-decoration: none; }

.side-cta { background: linear-gradient(135deg, #3a1c71 0%, #1a6a80 100%); color: #fff; border-radius: 3px; padding: 20px; text-align: center; }
.side-cta h4 { color: #f0c060; font-size: 14px; margin-bottom: 10px; letter-spacing: 0.1em; line-height: 1.6; }
.side-cta p { font-size: 12px; color: rgba(240,200,120,0.8); margin-bottom: 14px; line-height: 1.7; }
.side-cta a.cta-btn { display: block; background: #f0c060; color: #1a0a2e; font-weight: bold; padding: 9px; border-radius: 2px; font-size: 13px; letter-spacing: 0.05em; }
.side-cta a.cta-btn:hover { text-decoration: none; background: #ffd070; }

/* ===== Inline CTA ===== */
.cta-inline { background: linear-gradient(135deg, #3a1c71 0%, #1a6a80 100%); color: #fff; border-radius: 3px; padding: 32px; text-align: center; margin: 36px 0; }
.cta-inline h3 { color: #f0c060; font-size: 17px; margin-bottom: 10px; letter-spacing: 0.12em; }
.cta-inline h3::before { content: none; }
.cta-inline p { font-size: 14px; color: rgba(240,200,120,0.85); margin-bottom: 20px; line-height: 1.9; }
.cta-inline a { display: inline-block; background: #f0c060; color: #1a0a2e; font-weight: bold; padding: 12px 36px; border-radius: 2px; font-size: 14px; letter-spacing: 0.1em; transition: background 0.2s; }
.cta-inline a:hover { text-decoration: none; background: #ffd070; }

/* ===== Next link ===== */
.next-link { background: #fff8ee; border: 1px solid #e8c080; border-radius: 3px; padding: 14px 20px; margin-top: 32px; display: flex; justify-content: space-between; align-items: center; }
.next-link span { font-size: 12px; color: #999; }
.next-link a { font-size: 14px; font-weight: bold; color: #5a1a00; letter-spacing: 0.05em; }

/* ===== Footer ===== */
footer { background: #1a0800; color: rgba(255,255,255,0.35); text-align: center; padding: 28px; font-size: 12px; border-top: 2px solid #5a1a00; letter-spacing: 0.08em; line-height: 2; }
footer a { color: rgba(200,168,75,0.6); }
footer a:hover { color: #c8a84b; }

/* ===== Mobile ===== */
@media (max-width: 640px) {
  .content-wrap { grid-template-columns: 1fr; }
  aside { order: -1; }
  .hero { padding-bottom: 120px; }
  .hero h1 { font-size: 20px; }
}

/* ===== Table width override for fusui.info ===== */

/* houitable / fusuitable / main内の通常tableをすべて同じ見た目にする */
main table,
main table.houitable,
main table.fusuitable,
table.houitable,
table.fusuitable {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
}

main table th,
main table.houitable th,
main table.fusuitable th,
table.houitable th,
table.fusuitable th {
  background: #5a1a00;
  color: #f0c060;
  padding: 8px 12px;
  text-align: left;
  letter-spacing: 0.05em;
}

main table td,
main table.houitable td,
main table.fusuitable td,
table.houitable td,
table.fusuitable td {
  padding: 10px 12px;
  border-bottom: 1px solid #e8d8c0;
  vertical-align: top;
  line-height: 1.8;
}

main table tr:nth-child(even) td,
main table.houitable tr:nth-child(even) td,
main table.fusuitable tr:nth-child(even) td,
table.houitable tr:nth-child(even) td,
table.fusuitable tr:nth-child(even) td {
  background: #fff8ee;
}

main table td strong,
main table.houitable td strong,
main table.fusuitable td strong,
table.houitable td strong,
table.fusuitable td strong {
  color: #5a1a00;
}

/* 1列目の幅を確保する */
main table th:first-child,
main table td:first-child,
main table.houitable th:first-child,
main table.houitable td:first-child,
main table.fusuitable th:first-child,
main table.fusuitable td:first-child,
table.houitable th:first-child,
table.houitable td:first-child,
table.fusuitable th:first-child,
table.fusuitable td:first-child {
  width: 8em !important;
  min-width: 8em !important;
  white-space: nowrap;
  text-align: center;
}

/* 2列目は残り幅を使う */
main table th:nth-child(2),
main table td:nth-child(2),
main table.houitable th:nth-child(2),
main table.houitable td:nth-child(2),
main table.fusuitable th:nth-child(2),
main table.fusuitable td:nth-child(2),
table.houitable th:nth-child(2),
table.houitable td:nth-child(2),
table.fusuitable th:nth-child(2),
table.fusuitable td:nth-child(2) {
  width: auto;
}

/* スマホでは1列目を少し狭める */
@media (max-width: 640px) {
  main table,
  main table.houitable,
  main table.fusuitable,
  table.houitable,
  table.fusuitable {
    font-size: 13px;
  }

  main table th,
  main table td,
  main table.houitable th,
  main table.houitable td,
  main table.fusuitable th,
  main table.fusuitable td,
  table.houitable th,
  table.houitable td,
  table.fusuitable th,
  table.fusuitable td {
    padding: 8px 9px;
  }

  main table th:first-child,
  main table td:first-child,
  main table.houitable th:first-child,
  main table.houitable td:first-child,
  main table.fusuitable th:first-child,
  main table.fusuitable td:first-child,
  table.houitable th:first-child,
  table.houitable td:first-child,
  table.fusuitable th:first-child,
  table.fusuitable td:first-child {
    width: 4.8em !important;
    min-width: 4.8em !important;
    white-space: normal;
  }
}

/* ===== SEO site additions for fusui.info ===== */

main ul,
main ol {
  margin: 12px 0 18px 1.4em;
}

main li {
  margin-bottom: 6px;
}

.lead-box {
  background: #fff8ee;
  border: 1px solid #e8c080;
  border-radius: 4px;
  padding: 20px 22px;
  margin: 20px 0 28px;
}

.lead-box p {
  margin-bottom: 0;
}

.related-links {
  background: #fff8ee;
  border: 1px solid #e8c080;
  border-radius: 4px;
  padding: 20px 22px;
  margin: 32px 0;
}

.related-links h3 {
  margin-top: 0;
}

.related-links ul {
  list-style: none;
  margin: 0;
}

.related-links li {
  border-bottom: 1px dotted #e0c090;
  padding: 7px 0;
  margin: 0;
}

.related-links li:last-child {
  border-bottom: none;
}

.article-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 24px 0;
}

.article-card {
  background: #fff8ee;
  border: 1px solid #e8c080;
  border-radius: 4px;
  padding: 18px;
}

.article-card h3 {
  margin-top: 0;
}

.article-card h3::before {
  content: none;
}

.article-card p {
  font-size: 13px;
  color: #66564a;
  line-height: 1.75;
}

.article-card a {
  font-size: 13px;
  font-weight: bold;
}

.note-small {
  color: #7a6a5a;
  font-size: 13px;
  line-height: 1.8;
}

.breadcrumb-text {
  max-width: 920px;
  margin: 0 auto;
  padding: 10px 20px 0;
  font-size: 12px;
  color: #8a765e;
}

.breadcrumb-text a {
  color: #6a2a00;
}

/* houitable / fusuitable / main内の通常tableをすべて同じ見た目にする */
main table,
main table.houitable,
main table.fusuitable,
table.houitable,
table.fusuitable {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
}

main table th,
main table.houitable th,
main table.fusuitable th,
table.houitable th,
table.fusuitable th {
  background: #5a1a00;
  color: #f0c060;
  padding: 8px 12px;
  text-align: left;
  letter-spacing: 0.05em;
}

main table td,
main table.houitable td,
main table.fusuitable td,
table.houitable td,
table.fusuitable td {
  padding: 10px 12px;
  border-bottom: 1px solid #e8d8c0;
  vertical-align: top;
  line-height: 1.8;
}

main table tr:nth-child(even) td,
main table.houitable tr:nth-child(even) td,
main table.fusuitable tr:nth-child(even) td,
table.houitable tr:nth-child(even) td,
table.fusuitable tr:nth-child(even) td {
  background: #fff8ee;
}

main table td strong,
main table.houitable td strong,
main table.fusuitable td strong,
table.houitable td strong,
table.fusuitable td strong {
  color: #5a1a00;
}

main table th:first-child,
main table td:first-child,
main table.houitable th:first-child,
main table.houitable td:first-child,
main table.fusuitable th:first-child,
main table.fusuitable td:first-child,
table.houitable th:first-child,
table.houitable td:first-child,
table.fusuitable th:first-child,
table.fusuitable td:first-child {
  width: 8em !important;
  min-width: 8em !important;
  white-space: nowrap;
  text-align: center;
}

@media (max-width: 640px) {
  .article-list {
    grid-template-columns: 1fr;
  }

  main table,
  main table.houitable,
  main table.fusuitable,
  table.houitable,
  table.fusuitable {
    font-size: 13px;
  }

  main table th,
  main table td,
  main table.houitable th,
  main table.houitable td,
  main table.fusuitable th,
  main table.fusuitable td,
  table.houitable th,
  table.houitable td,
  table.fusuitable th,
  table.fusuitable td {
    padding: 8px 9px;
  }

  main table th:first-child,
  main table td:first-child,
  main table.houitable th:first-child,
  main table.houitable td:first-child,
  main table.fusuitable th:first-child,
  main table.fusuitable td:first-child,
  table.houitable th:first-child,
  table.houitable td:first-child,
  table.fusuitable th:first-child,
  table.fusuitable td:first-child {
    width: 4.8em !important;
    min-width: 4.8em !important;
    white-space: normal;
  }
}