@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-brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; }
.site-brand:hover { text-decoration: none; }
.site-logo { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(240,192,96,0.45), 0 0 16px rgba(240,192,96,0.18); }
.site-name { display: block; min-width: 0; }
.site-title { color: #f0c060; font-size: 22px; letter-spacing: 0.2em; display: block; font-family: 'Noto Serif JP', serif; }
.site-sub,
.site-subtitle { color: #a07840; font-size: 11px; letter-spacing: 0.15em; display: block; margin-top: 3px; font-family: 'Cinzel', serif; }

.mobile-menu-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(240,192,96,0.42);
  border-radius: 4px;
  background: rgba(255,248,238,0.06);
  color: #f0c060;
  cursor: pointer;
  font-family: inherit;
}

.mobile-menu-icon {
  display: inline-grid;
  gap: 4px;
  width: 20px;
}

.mobile-menu-icon span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ===== Nav ===== */
nav {
  position: relative;
  background: #2a0e00;
  border-bottom: 1px solid #5a2000;
  z-index: 30;
}

.mega-nav {
  list-style: none;
  display: flex;
  justify-content: center;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 20px;
}

.mega-item {
  position: static;
  list-style: none;
}

.mega-trigger {
  display: block;
  color: #e0b060;
  font-size: 14px;
  padding: 13px 24px;
  letter-spacing: 0.1em;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, background 0.2s;
}

.mega-trigger::after {
  content: ' ▾';
  color: rgba(224,176,96,0.72);
  font-size: 10px;
}

.mega-trigger-standalone::after {
  content: none;
}

.mega-trigger:hover,
.mega-trigger.active,
.mega-item:focus-within .mega-trigger {
  color: #fff;
  border-bottom-color: #f0c060;
  background: rgba(255,248,238,0.05);
  text-decoration: none;
}

.mega-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: none;
  background: #2a0e00;
  border-top: 1px solid rgba(240,192,96,0.18);
  border-bottom: 1px solid #5a2000;
  box-shadow: 0 18px 36px rgba(26,8,0,0.28);
}

.mega-item:hover .mega-panel,
.mega-item:focus-within .mega-panel {
  display: block;
}

.mega-panel-inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
  padding: 22px 20px 24px;
}

.mega-intro {
  border-right: 1px solid rgba(240,192,96,0.22);
  padding-right: 20px;
}

.mega-intro p,
.mega-intro strong {
  display: block;
  color: #f0c060;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}

.mega-intro span {
  display: block;
  color: rgba(240,200,120,0.78);
  font-size: 12px;
  line-height: 1.8;
}

.mega-panel ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  list-style: none;
}

.mega-panel a {
  display: block;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(240,192,96,0.18);
  border-radius: 4px;
  color: #f0c060;
  background: rgba(255,248,238,0.05);
}

.mega-panel a:hover {
  color: #fff;
  background: rgba(255,248,238,0.1);
  text-decoration: none;
}

.mega-panel a.current {
  background: #f0c060;
  color: #1a0800;
  border-color: #f0c060;
}

.mega-panel a strong {
  display: block;
  font-size: 13px;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

.mega-panel a span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(240,200,120,0.74);
}

.mega-panel a.current span {
  color: rgba(26,8,0,0.72);
}

/* ===== 10. スマホ専用ナビ ===== */
.mobile-nav {
  display: none;
}

.mobile-nav-inner,
.mobile-nav-groups {
  max-width: 920px;
  margin: 0 auto;
  padding: 12px 16px 14px;
}

.mobile-nav-details summary,
.mobile-nav-details a {
  border-radius: 4px;
  text-decoration: none;
}

.mobile-nav-details {
  background: rgba(255,248,238,0.06);
  border: 1px solid rgba(240,192,96,0.26);
  border-radius: 4px;
  margin-top: 8px;
}

.mobile-nav-details summary {
  position: relative;
  display: block;
  padding: 11px 42px 11px 14px;
  color: #f5d188;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.08em;
  list-style: none;
}

.mobile-nav-details summary::-webkit-details-marker {
  display: none;
}

.mobile-nav-details summary::before {
  content: '▸';
  margin-right: 8px;
  color: #f0c060;
}

.mobile-nav-details summary::after {
  content: '+';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #f0c060;
  font-size: 18px;
  line-height: 1;
}

.mobile-nav-details[open] summary::after {
  content: '−';
}

.mobile-nav-details[open] summary::before {
  content: '▾';
}

.mobile-nav-details ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  list-style: none;
  padding: 0 10px 12px;
}

.mobile-nav-details a {
  display: block;
  background: rgba(255,248,238,0.08);
  color: #e7bd70;
  font-size: 13px;
  line-height: 1.45;
  padding: 9px 10px;
}

.mobile-nav-details a.mobile-current {
  background: #f0c060;
  color: #1a0800;
  font-weight: 700;
}

.mobile-nav-standalone {
  margin-top: 8px;
}

.mobile-nav-standalone a {
  display: block;
  border-radius: 4px;
  background: rgba(255,248,238,0.08);
  border: 1px solid rgba(240,192,96,0.26);
  color: #e7bd70;
  font-size: 13px;
  line-height: 1.45;
  padding: 10px 14px;
  text-decoration: none;
}

.mobile-nav-standalone a.mobile-current {
  background: #f0c060;
  color: #1a0800;
  font-weight: 700;
}

/* ===== 105. Hero first view image ===== */
.hero {
  position: relative;
  background:
    radial-gradient(circle at 50% 42%, rgba(240,192,96,0.22), transparent 34%),
    linear-gradient(90deg, rgba(20,8,0,0.86) 0%, rgba(28,10,0,0.58) 45%, rgba(20,8,0,0.18) 100%),
    linear-gradient(180deg, rgba(20,8,0,0.24) 0%, rgba(20,8,0,0.48) 100%),
    url("../images/fusui-nyumon-hero.webp") center center / cover no-repeat,
    linear-gradient(135deg, #1a0800 0%, #4a1200 60%, #2a0e00 100%);
  min-height: 430px;
  padding: 86px 24px 170px;
  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: #f4c56a; font-size: clamp(28px, 5vw, 48px); letter-spacing: 0.24em; margin-bottom: 16px; position: relative; text-shadow: 0 3px 22px rgba(0,0,0,0.55); }
.hero .hero-lead { color: rgba(255,236,196,0.88); font-size: 15px; max-width: 620px; margin: 0 auto; letter-spacing: 0.08em; line-height: 2; position: relative; text-shadow: 0 2px 16px rgba(0,0,0,0.65); }

/* ===== 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 img {
  display: block;
  margin: 0 auto;
  background: #fff8ee;
  border: 1px solid rgba(200,168,75,0.45);
  border-radius: 4px;
  box-shadow: 0 10px 32px rgba(90,26,0,0.08);
}

.img-center figcaption { font-size: 13px; color: #8a765e; margin-top: 8px; letter-spacing: 0.05em; }

/* ===== 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-section { margin-top: 14px; }
.side-nav-section:first-of-type { margin-top: 0; }
.side-nav-section p { color: #8b2500; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; margin: 0 0 4px; }
.side-nav ul li a { position: relative; font-size: 13px; color: #5a1a00; display: block; padding: 6px 0 6px 18px; 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-nav-standalone {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e8c080;
}
.side-nav-standalone a {
  position: relative;
  display: block;
  color: #5a1a00;
  font-size: 13px;
  padding: 6px 0 6px 18px;
  letter-spacing: 0.05em;
}
.side-nav-standalone a:hover {
  color: #8b2500;
  text-decoration: none;
}
.side-nav ul li a.current::before {
  content: '▶';
  position: absolute;
  left: 0;
  top: 6px;
  color: #8b2500;
  font-size: 11px;
  line-height: 1.95;
}
.side-nav-standalone a.current::before {
  content: '▶';
  position: absolute;
  left: 0;
  top: 6px;
  color: #8b2500;
  font-size: 11px;
  line-height: 1.95;
}

.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; }
.footer-sep { color: rgba(255,255,255,0.18); }

/* ===== Fusui Logo page nav ===== */
.logo-page .mega-trigger {
  color: rgba(216,226,245,0.82);
}

.logo-page .mega-trigger::after {
  color: rgba(184,232,255,0.72);
}

.logo-page .mega-trigger:hover,
.logo-page .mega-trigger.active,
.logo-page .mega-item:focus-within .mega-trigger {
  color: #fff;
  border-bottom-color: #b8e8ff;
}

.logo-page .mega-panel {
  background: #0c214b;
  border-top-color: rgba(184,232,255,0.18);
  border-bottom-color: rgba(184,232,255,0.35);
}

.logo-page .mega-intro {
  border-right-color: rgba(184,232,255,0.24);
}

.logo-page .mega-intro p,
.logo-page .mega-panel a {
  color: #b8e8ff;
}

.logo-page .mega-intro span,
.logo-page .mega-panel a span {
  color: rgba(216,226,245,0.78);
}

.logo-page .mega-panel a {
  border-color: rgba(184,232,255,0.22);
}

.logo-page .mega-panel a.current {
  background: #b8e8ff;
  color: #07142f;
  border-color: #b8e8ff;
}

.logo-page .mega-panel a.current span {
  color: rgba(7,20,47,0.72);
}

.logo-page .mobile-nav {
  background: #0c214b;
  border-bottom-color: rgba(184,232,255,0.35);
}

.logo-page .mobile-nav-details,
.logo-page .mobile-nav-details a {
  border-color: rgba(184,232,255,0.28);
}

.logo-page .mobile-nav-details summary,
.logo-page .mobile-nav-details a {
  color: #d8e2f5;
}

.logo-page .mobile-nav-details summary::before,
.logo-page .mobile-nav-details summary::after {
  color: #b8e8ff;
}

.logo-page .mobile-nav-details a.mobile-current {
  background: #b8e8ff;
  color: #07142f;
}

.logo-page .mobile-menu-toggle {
  border-color: rgba(184,232,255,0.42);
  color: #b8e8ff;
  background: rgba(216,226,245,0.06);
}

/* ===== Mobile ===== */
@media (max-width: 640px) {
  body {
    padding-top: 66px;
  }

  body.nav-open {
    overflow: hidden;
  }

  body.nav-open::before {
    content: '';
    position: fixed;
    inset: 66px 0 0;
    z-index: 998;
    background: rgba(26,8,0,0.48);
  }

  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 8px 22px rgba(26,8,0,0.24);
  }

  .header-inner {
    min-height: 66px;
    justify-content: space-between;
    padding: 10px 14px 10px 18px;
  }

  .site-brand {
    gap: 9px;
    max-width: calc(100% - 54px);
  }

  .site-logo {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  nav {
    display: none;
  }

  .mobile-menu-toggle {
    display: inline-flex;
    width: 42px;
    height: 42px;
    justify-content: center;
    padding: 0;
    border-radius: 6px;
    font-size: 12px;
    letter-spacing: 0.04em;
    line-height: 1;
  }

  .mobile-menu-icon {
    width: 19px;
  }

  .mobile-menu-text {
    display: none;
  }

  body.nav-open .mobile-menu-icon span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  body.nav-open .mobile-menu-icon span:nth-child(2) {
    opacity: 0;
  }

  body.nav-open .mobile-menu-icon span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .mobile-nav {
    display: block;
    position: fixed;
    top: 66px;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 999;
    width: min(88vw, 360px);
    max-height: none;
    overflow-y: auto;
    background: #2a0e00;
    border-left: 1px solid rgba(240,192,96,0.24);
    border-bottom: 0;
    box-shadow: -18px 0 34px rgba(26,8,0,0.34);
    opacity: 1;
    pointer-events: none;
    transform: translateX(100%);
    transition: transform 0.24s ease;
  }

  body.nav-open .mobile-nav {
    transform: translateX(0);
    pointer-events: auto;
  }

  .mobile-nav-inner,
  .mobile-nav-groups {
    max-width: none;
    padding: 14px 14px 22px;
  }

  .mobile-nav-details {
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(240,192,96,0.2);
    border-radius: 0;
    margin-top: 0;
    padding: 12px 0;
  }

  .mobile-nav-details summary {
    position: relative;
    padding: 0 34px 9px 2px;
    color: #f5d188;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
  }

  .mobile-nav-details summary::before {
    content: none;
  }

  .mobile-nav-details summary::after {
    content: '+';
    position: absolute;
    right: 4px;
    top: 0;
    transform: none;
    color: #f0c060;
    font-size: 18px;
    line-height: 1;
  }

  .mobile-nav-details[open] summary::after {
    content: '−';
  }

  .mobile-nav-details ul {
    gap: 7px;
    padding: 0;
  }

  .mobile-nav-details a {
    min-height: 35px;
    background: rgba(255,248,238,0.08);
    border: 1px solid rgba(240,192,96,0.18);
    color: #e7bd70;
    font-size: 12px;
    line-height: 1.35;
    padding: 8px 9px;
  }

  .site-title {
    font-size: 19px;
    letter-spacing: 0.14em;
    line-height: 1.25;
  }

  .site-sub {
    font-size: 10px;
    letter-spacing: 0.08em;
    line-height: 1.6;
  }

  .content-wrap { grid-template-columns: 1fr; }
  .hero { min-height: 390px; padding: 64px 20px 130px; background-position: 58% center; }
  .hero h1 { font-size: 26px; line-height: 1.45; letter-spacing: 0.16em; }
  .hero .hero-lead { font-size: 13px; line-height: 1.9; letter-spacing: 0.04em; }
}

/* ===== 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;
  }
}

/* ===== 100. Site-wide article 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: 0 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;
}

.point-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 28px 0 34px;
}

.point-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

.point-card {
  background: linear-gradient(180deg, #fffaf1 0%, #fff5e6 100%);
  border: 1px solid rgba(200,168,75,0.42);
  border-radius: 4px;
  padding: 18px 14px;
  text-align: center;
}

.point-mark {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #5a1a00;
  color: #f0c060;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 10px;
  box-shadow: inset 0 0 0 1px rgba(240,192,96,0.28);
}

.point-card h3 {
  margin: 0 0 6px;
  font-size: 14px;
  letter-spacing: 0.08em;
}

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

.point-card p {
  margin: 0;
  color: #6a5948;
  font-size: 12px;
  line-height: 1.75;
}

@counter-style guide-circled {
  system: fixed;
  symbols: "①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨" "⑩";
  suffix: "";
}

.ordered-guide {
  counter-reset: guide-step;
  list-style: none;
  background: linear-gradient(180deg, #fffaf3 0%, #fff4e4 100%);
  border: 1px solid rgba(200,168,75,0.44);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.62), 0 10px 24px rgba(90,26,0,0.05);
  padding: 18px 22px;
  margin: 22px 0 30px;
}

.ordered-guide li {
  counter-increment: guide-step;
  position: relative;
  min-height: 38px;
  padding: 8px 0 14px 62px;
  line-height: 1.9;
  border-bottom: 1px dashed rgba(180,122,29,0.22);
}

.ordered-guide li:last-child {
  border-bottom: 0;
  padding-bottom: 4px;
}

.ordered-guide li::before {
  content: counter(guide-step);
  position: absolute;
  left: 0;
  top: 10px;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #3f3f3f;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  font-family: Arial, "Noto Sans JP", sans-serif;
  text-align: center;
  box-shadow: none;
}

.element-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 28px 0 34px;
}

.element-card {
  background: #fff8ee;
  border: 1px solid rgba(200,168,75,0.38);
  border-radius: 4px;
  padding: 16px 12px;
  text-align: center;
}

.element-mark {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 10px;
}

.element-card h3 {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: 0.06em;
}

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

.element-card p {
  margin: 0;
  color: #6a5948;
  font-size: 12px;
  line-height: 1.7;
}

.element-card.wood .element-mark { background: #3f7351; }
.element-card.fire .element-mark { background: #9c3a2e; }
.element-card.earth .element-mark { background: #9a7440; }
.element-card.metal .element-mark { background: #9b8a68; }
.element-card.water .element-mark { background: #2d5369; }

.note-box {
  background: linear-gradient(135deg, #fff8ee 0%, #f8f4ed 100%);
  border: 1px solid rgba(200,168,75,0.45);
  border-left: 4px solid var(--accent);
  border-radius: 4px;
  padding: 20px 22px;
  margin: 30px 0;
}

.note-box h3 {
  margin-top: 0;
}

.note-box h3::before {
  content: none;
}

.note-box a {
  color: #5a1a00;
  font-weight: 700;
}

.advice-box {
  position: relative;
  background: linear-gradient(180deg, #fff7f4 0%, #ffece8 100%);
  border: 1px solid rgba(187,92,78,0.28);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(116,38,30,0.06);
  padding: 22px 24px 20px;
  margin: 34px 0;
}

.advice-box h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: #7a2d24;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1.4;
}

.advice-box h3::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #bb5c4e;
  color: #fff7f4;
  font-size: 14px;
  font-weight: 800;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
}

.advice-box p {
  margin: 0;
  color: #4d2b27;
}

.relation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 22px 0 32px;
}

.relation-card {
  background: #fff8ee;
  border: 1px solid rgba(200,168,75,0.4);
  border-radius: 4px;
  padding: 18px 20px;
}

.relation-card h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

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

.relation-card p {
  color: #5a1a00;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.8;
}

.relation-card span {
  display: block;
  color: #6a5948;
  font-size: 13px;
  line-height: 1.8;
}

.color-chip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 28px 0 34px;
}

.color-chip {
  background: #fff8ee;
  border: 1px solid rgba(200,168,75,0.38);
  border-radius: 4px;
  padding: 16px 14px;
}

.color-chip span {
  display: block;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  margin-bottom: 12px;
  box-shadow: inset 0 0 0 1px rgba(42,26,14,0.08);
}

.color-chip h3 {
  margin: 0 0 6px;
  font-size: 14px;
  letter-spacing: 0.08em;
}

.color-chip h3::before {
  content: none;
}

.color-chip p {
  margin: 0;
  color: #6a5948;
  font-size: 12px;
  line-height: 1.7;
}

.color-chip.red span { background: #a83b30; }
.color-chip.green span { background: #547a57; }
.color-chip.yellow span { background: #d2a344; }
.color-chip.white span {
  background: linear-gradient(90deg, #ffffff 0%, #ece6da 100%);
}
.color-chip.blue span { background: #315c79; }
.color-chip.beige span { background: #c8ad83; }

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

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

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

  .point-grid {
    grid-template-columns: 1fr 1fr;
  }

  .element-grid {
    grid-template-columns: 1fr;
  }

  .relation-grid {
    grid-template-columns: 1fr;
  }

  .color-chip-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== 190. 風水ロゴページ：最終デザイン調整（青系統・元ページ踏襲） ===== */
body.logo-page {
  --primary: #142f73;
  --mid: #0f6f8f;
  --accent: #b8e8ff;
  --bg: #f4f8fb;
  --text: #17243a;
}

/* 191. 風水ロゴページ：リンク色 */
.logo-page .breadcrumb-text a,
.logo-page a {
  color: #0f6688;
}

.logo-page a:hover {
  color: #123f78;
}

/* 192. 風水ロゴページ：ヘッダー／ナビの青系統維持 */
.logo-page header {
  background: #07142f;
  border-bottom-color: #1c7ea1;
}

.logo-page nav {
  background: #0c214b;
  border-bottom-color: rgba(184,232,255,0.32);
}

.logo-page nav ul li a {
  color: rgba(216,226,245,0.82);
}

.logo-page nav ul li a.active {
  color: #fff;
  border-bottom-color: #b8e8ff;
}

/* 193. 風水ロゴページ：ページヘッド */
.page-head.logo-head {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(184,232,255,0.22) 0, transparent 28%),
    linear-gradient(135deg, #07142f 0%, #123f78 52%, #0f6f8f 100%);
  padding: 64px 24px 132px;
  text-align: center;
}

.page-head.logo-head::before {
  content: 'FUSUI LOGO';
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.08);
  font-family: 'Cinzel', serif;
  font-size: clamp(44px, 10vw, 116px);
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.page-head.logo-head h1,
.page-head.logo-head .lead {
  position: relative;
}

.page-head.logo-head h1 {
  color: #d7f3ff;
  font-size: clamp(26px, 5vw, 42px);
  letter-spacing: 0.22em;
}

.page-head.logo-head .lead {
  color: rgba(232,241,255,0.88);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.9;
}

/* 194. 風水ロゴページ：本文見出し */
.logo-page main h2 {
  color: #123f78;
  border-left-color: #1c7ea1;
}

.logo-page main h3 {
  color: #123f78;
}

.logo-page main h3::before {
  color: #1c7ea1;
}

/* 195. 風水ロゴページ：導入・補足・関連リンクのカード */
.logo-page .lead-box,
.logo-page .highlight,
.logo-page .example-box,
.logo-page .soft-list,
.logo-page .related-links,
.logo-page .side-nav {
  background: #ffffff;
  border: 1px solid rgba(28,126,161,0.28);
  border-radius: 4px;
  box-shadow: 0 14px 34px rgba(7,20,47,0.06);
}

.logo-note {
  background: linear-gradient(180deg, #f3f9ff 0%, #e8f4ff 100%);
  border-color: rgba(28,126,161,0.34);
  border-left: 0;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(18,63,120,0.08);
}

.logo-note h3 {
  color: #123f78;
}

.logo-note h3::before {
  content: "◆ ";
  color: #1c7ea1;
}

.logo-note a {
  color: #0f6688;
}

.logo-page .ordered-guide {
  background: linear-gradient(180deg, #f3f9ff 0%, #e8f4ff 100%);
  border-color: rgba(28,126,161,0.34);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.66), 0 10px 24px rgba(18,63,120,0.06);
}

.logo-page .ordered-guide li {
  border-bottom-color: rgba(28,126,161,0.2);
}

.logo-page .ordered-guide li::before {
  background: #123f78;
  color: #fff;
  box-shadow: none;
}

.logo-page .lead-box {
  padding: 20px 22px;
  margin: 0 0 28px;
}

.logo-page .example-box {
  padding: 20px 22px;
  margin: 24px 0 30px;
}

.logo-page .example-box h3 {
  margin-top: 0;
}

.logo-page .example-box h3::before,
.logo-page .related-links h3::before {
  content: none;
}

.logo-page .soft-list {
  padding: 18px 22px 18px 2.4em;
  margin: 20px 0 32px;
}

/* 196. 風水ロゴページ：画像 */
.logo-page .img-center img {
  background: #ffffff;
  border: 1px solid rgba(28,126,161,0.28);
  border-radius: 4px;
  box-shadow: 0 10px 32px rgba(7,20,47,0.08);
}

.logo-page .img-center figcaption {
  color: #66798f;
}

/* 197. 風水ロゴページ：3つの要点カード */
.logo-page .point-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 28px 0 34px;
}

.logo-page .point-card {
  background: #ffffff;
  border: 1px solid rgba(28,126,161,0.28);
  border-radius: 4px;
  box-shadow: 0 14px 34px rgba(7,20,47,0.06);
  padding: 18px 14px;
  text-align: center;
}

.logo-page .point-mark {
  background: #123f78;
  color: #d7f3ff;
  box-shadow: inset 0 0 0 1px rgba(184,232,255,0.3);
}

.logo-page .point-card h3 {
  color: #123f78;
}

.logo-page .point-card h3::before {
  content: none;
}

.logo-page .point-card p {
  color: #4f6078;
}

/* 198. 風水ロゴページ：表の青系統調整 */
.logo-page main table,
.logo-page main table.houitable {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 34px;
  font-size: 14px;
}

.logo-page main table th,
.logo-page main table.houitable th {
  background: #123f78;
  color: #d7f3ff;
  padding: 8px 12px;
  text-align: left;
  letter-spacing: 0.05em;
}

.logo-page main table td,
.logo-page main table.houitable td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(28,126,161,0.22);
  vertical-align: top;
  line-height: 1.8;
}

.logo-page main table tr:nth-child(even) td,
.logo-page main table.houitable tr:nth-child(even) td {
  background: #eef6fa;
}

.logo-page main table td strong,
.logo-page main table.houitable td strong {
  color: #123f78;
}

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

/* 199. 風水ロゴページ：CTA */
.logo-page .side-cta,
.logo-page .cta-inline {
  background: linear-gradient(135deg, #07142f 0%, #123f78 56%, #0f6f8f 100%);
}

.logo-page .side-cta h4,
.logo-page .cta-inline h3 {
  color: #d7f3ff;
}

.logo-page .side-cta p,
.logo-page .cta-inline p {
  color: rgba(232,241,255,0.86);
}

.logo-page .side-cta a.cta-btn,
.logo-page .cta-inline a {
  background: #d7f3ff;
  color: #07142f;
}

.logo-page .side-cta a.cta-btn:hover,
.logo-page .cta-inline a:hover {
  background: #b8e8ff;
  text-decoration: none;
}

/* 200. 風水ロゴページ：サイドナビ */
.logo-page .side-nav h4,
.logo-page .side-nav ul li a {
  color: #123f78;
}

.logo-page .side-nav h4 {
  border-bottom-color: rgba(28,126,161,0.28);
}

.logo-page .side-nav ul li a {
  border-bottom-color: rgba(28,126,161,0.28);
}

.logo-page .side-nav ul li a.current::before {
  color: #1c7ea1;
}

/* 201. 風水ロゴページ：フッター */
.logo-page footer {
  background: #07142f;
  border-top-color: #1c7ea1;
}

.logo-page footer a {
  color: rgba(184,232,255,0.72);
}

.logo-page footer a:hover {
  color: #b8e8ff;
}

/* 202. 風水ロゴページ：スマホ調整 */
@media (max-width: 640px) {
  .logo-page .point-grid {
    grid-template-columns: 1fr;
  }

  .page-head.logo-head {
    padding-bottom: 110px;
  }

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

  .logo-page main table th,
  .logo-page main table td,
  .logo-page main table.houitable th,
  .logo-page main table.houitable td {
    padding: 8px 9px;
  }

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

/* 203. 右カラム広告リンク */
.fusui-ad-slot {
  margin: 20px 0 28px;
  padding: 0;
}

aside > .fusui-ad-slot {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px dotted rgba(139, 37, 0, 0.18);
}

.fusui-ad-card {
  display: block;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #6a5948;
  text-decoration: none;
  box-shadow: none;
}

.fusui-ad-card:hover {
  text-decoration: none;
  background: transparent;
}

.fusui-ad-card--voicegoods {
  background: transparent;
}

.fusui-ad-label {
  display: inline;
  margin: 0 4px 0 0;
  padding: 0;
  border: none;
  background: transparent;
  color: #b79a80;
  font-size: 9px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}

.fusui-ad-title {
  display: inline;
  color: #7a5d48;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}

.fusui-ad-text {
  display: block;
  margin-top: 1px;
  color: #9a8068;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

/* 204. モバイル調整 */
@media (max-width: 640px) {
  .fusui-ad-slot {
    margin: 18px 0 24px;
  }
}

/* 205. 波形装飾 */
.waves-wrap {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  line-height: 0;
}

.waves {
  display: block;
  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); }
}

/* 206. 監修者ページ */
.supervisor-profile {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
  margin: 0 0 30px;
  padding: 34px;
  background: linear-gradient(135deg, #fffaf2 0%, #fff6e8 100%);
  border: 1px solid #ead5b7;
  border-radius: 4px;
}

.supervisor-profile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #8b2500;
  opacity: 0.45;
}

.supervisor-heading h2 {
  margin: 0 0 6px;
  padding-left: 0;
  border-left: 0;
  letter-spacing: 0.04em;
  line-height: 1.55;
  font-size: 24px;
}

.supervisor-title {
  margin: 0;
  color: #8a5a32;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.08em;
  line-height: 1.7;
}

.supervisor-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 24px;
  align-items: start;
}

.supervisor-body p {
  font-size: 15px;
  line-height: 1.95;
}

.supervisor-label {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 12px;
  background: #5a1a00;
  color: #fff8ee;
  border-radius: 2px;
  font-size: 12px;
  letter-spacing: 0.12em;
}

.supervisor-body p:last-child {
  margin-bottom: 0;
}

.supervisor-photo {
  width: 180px;
  margin: 4px 0 0;
}

.supervisor-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: 3px;
}

.supervisor-section {
  margin: 0 0 22px;
  padding: 26px 28px 28px;
  background: #fffaf2;
  border: 1px solid #ead5b7;
  border-radius: 4px;
}

.supervisor-section h2 {
  margin: 0 0 16px;
  padding-left: 0;
  border-left: 0;
  letter-spacing: 0.05em;
  font-size: 18px;
}

.supervisor-section p:last-child {
  margin-bottom: 0;
}

.supervisor-note {
  background: #fbf4e8;
  border-color: #e4c9a8;
}

@media (max-width: 760px) {
  .supervisor-profile {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .supervisor-body {
    grid-template-columns: 1fr;
  }

  .supervisor-photo {
    width: 100%;
    max-width: 280px;
    margin: 0 0 18px;
  }

  .supervisor-section {
    padding: 20px;
  }

}