:root {
  --bg: #05070a;
  --bg-deep: #020306;

  /* 6月看板用：旧HARMONIA寄りの深い緑を見出しに残しつつ、
     図像線には現行HARMONIAのエメラルド系を混ぜる。 */
  --green-title: #008824;
  --green: #00a53a;
  --green-soft: #47b39c;
  --green-deep: #104d2b;

  --gold: #d7b35a;
  --gold-soft: #f0d987;
  --text: #e8eee8;
  --muted: #aeb9ad;
  --shadow: rgba(0, 0, 0, 0.72);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg-deep);
  color: var(--text);
  font-family: "Times New Roman", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN",
    "Noto Serif CJK JP", serif;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 13% 8%, rgba(232, 238, 232, 0.30) 0 0.4%, transparent 7%),
    radial-gradient(circle at 17% 10%, rgba(71, 179, 156, 0.17) 0, transparent 20%),
    radial-gradient(circle at 28% 0%, rgba(215, 179, 90, 0.065) 0, transparent 24%),
    radial-gradient(circle at 50% 72%, rgba(0, 105, 44, 0.11) 0, transparent 34%),
    linear-gradient(90deg, rgba(10, 21, 31, 0.95) 0%, rgba(5, 7, 10, 0.985) 54%, #000 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.72;
  background-image:
    radial-gradient(circle, rgba(232, 238, 232, 0.82) 0 1px, transparent 1.35px),
    radial-gradient(circle, rgba(240, 217, 135, 0.55) 0 1px, transparent 1.3px),
    radial-gradient(circle, rgba(0, 165, 58, 0.48) 0 1px, transparent 1.35px);
  background-size: 151px 151px, 223px 223px, 307px 307px;
  background-position: 10px 18px, 84px 56px, 34px 102px;
  mix-blend-mode: screen;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 14% 11%, rgba(209, 222, 232, 0.31) 0, rgba(71, 179, 156, 0.105) 18%, transparent 36%),
    radial-gradient(ellipse at 23% 20%, rgba(197, 209, 232, 0.18) 0, transparent 24%),
    linear-gradient(180deg, transparent 0%, transparent 67%, rgba(0, 0, 0, 0.68) 100%);
}

.cover {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: clamp(22px, 3vw, 38px) 28px clamp(92px, 12vh, 124px);
}

.hero {
  width: min(100%, 1120px);
  min-height: calc(100vh - clamp(114px, 15vh, 162px));
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  justify-items: center;
  gap: 0;
  text-align: center;
}

.title-block {
  width: min(100%, 860px);
}

h1 {
  margin: 0;
  color: var(--green-title);
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.225em;
  text-indent: 0.225em;
  text-shadow:
    0 0 12px rgba(0, 165, 58, 0.22),
    0 0 28px rgba(0, 100, 40, 0.20),
    0 12px 22px var(--shadow);
}

.ornament {
  position: relative;
  width: min(64vw, 640px);
  height: 20px;
  margin: 10px auto 7px;
}

.ornament::before,
.ornament::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 28px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(215, 179, 90, 0.72));
}

.ornament::before {
  left: 0;
}

.ornament::after {
  right: 0;
  transform: rotate(180deg);
}

.ornament span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: radial-gradient(circle, var(--gold-soft) 0 16%, var(--gold) 17% 42%, transparent 43%);
  filter: drop-shadow(0 0 8px rgba(240, 217, 135, 0.55));
}

.entry-link {
  position: relative;
  z-index: 5;
  margin: 0;
  color: var(--gold-soft);
  font-size: clamp(0.82rem, 1.2vw, 0.98rem);
  letter-spacing: 0.14em;
  text-align: center;
  text-shadow: 0 4px 14px var(--shadow);
}

.entry-link a {
  display: inline-block;
  position: relative;
  z-index: 6;
  color: var(--gold-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(215, 179, 90, 0.34);
  pointer-events: auto;
}

.entry-link a:hover {
  color: var(--green-soft);
  border-bottom-color: rgba(71, 179, 156, 0.72);
}

.diagram {
  position: relative;
  width: min(78vw, 560px);
  height: clamp(286px, 38vh, 365px);
  margin-top: clamp(28px, 5vh, 56px);
}

.entry-link {
  margin-top: clamp(12px, 2vh, 22px);
}

.diagram,
.diagram *,
.ornament,
.ornament * {
  pointer-events: none;
}

.symbol {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(62vw, 410px);
  transform: translate(-50%, -50%);
}

.symbol svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.outer-ring {
  fill: none;
  stroke: rgba(0, 165, 58, 0.44);
  stroke-width: 1.4;
}

.inner-ring {
  fill: none;
  stroke: rgba(71, 179, 156, 0.26);
  stroke-width: 1.1;
}

.dotted {
  stroke-dasharray: 2 6;
  stroke: rgba(215, 179, 90, 0.34);
}

.triangle {
  fill: none;
  stroke: rgba(0, 165, 58, 0.76);
  stroke-width: 2;
}

.gold-line {
  fill: none;
  stroke: rgba(215, 179, 90, 0.48);
  stroke-width: 1.2;
  stroke-dasharray: 2 5;
}

.gold-dot {
  fill: var(--gold-soft);
  filter: drop-shadow(0 0 6px rgba(240, 217, 135, 0.65));
}

.node {
  fill: url(#nodeGlow);
  stroke: rgba(0, 165, 58, 0.82);
  stroke-width: 2;
}

.star path,
.star {
  fill: var(--gold-soft);
}

.center-star {
  fill: var(--gold-soft);
  filter: drop-shadow(0 0 10px rgba(240, 217, 135, 0.75));
}

.node-label {
  position: absolute;
  z-index: 2;
  margin: 0;
  color: var(--gold-soft);
  font-size: clamp(0.96rem, 1.75vw, 1.28rem);
  line-height: 1.2;
  letter-spacing: 0.045em;
  white-space: nowrap;
  text-shadow:
    0 0 10px rgba(215, 179, 90, 0.22),
    0 5px 12px var(--shadow);
}

.node-label span {
  color: var(--gold);
}

.node-label.top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.node-label.left {
  bottom: 38px;
  left: -2px;
}

.node-label.right {
  bottom: 38px;
  right: -2px;
}

@media (max-width: 760px) {
  .cover {
    padding: 18px 18px clamp(96px, 16vh, 132px);
  }

  .hero {
    min-height: calc(100vh - 132px);
  }

  h1 {
    font-size: clamp(2.1rem, 10vw, 3.6rem);
    letter-spacing: 0.14em;
    text-indent: 0.14em;
  }

  .notice {
    letter-spacing: 0.08em;
  }

  .entry-link {
    letter-spacing: 0.08em;
  }

  .diagram {
    width: min(96vw, 520px);
    height: 390px;
    margin-top: 26px;
  }

  .symbol {
    width: min(82vw, 390px);
  }

  .node-label {
    white-space: normal;
    font-size: 0.95rem;
  }

  .node-label.left {
    left: 4px;
    bottom: 48px;
    text-align: left;
  }

  .node-label.right {
    right: 4px;
    bottom: 48px;
    text-align: right;
  }

}


/* ------------------------------------------------------------
History page
------------------------------------------------------------ */

.page-shell {
position: relative;
z-index: 1;
width: min(100%, 1180px);
margin: 0 auto;
padding: clamp(18px, 3vw, 34px) clamp(18px, 4vw, 42px) 42px;
color: var(--text);
font-family: "Noto Sans CJK JP", "Hiragino Sans", "Yu Gothic", "YuGothic", sans-serif;
}

.page-footer a {
color: var(--gold-soft);
text-decoration: none;
border-bottom: 1px solid rgba(215, 179, 90, 0.34);
}

.page-footer a:hover {
color: var(--green-soft);
border-bottom-color: rgba(71, 179, 156, 0.72);
}

.page-header {
text-align: center;
margin: 0 auto clamp(18px, 3vw, 32px);
}

.page-title {
margin: 0;
color: var(--green-title);
font-size: clamp(1.8rem, 4vw, 3rem);
font-weight: 400;
line-height: 1.05;
letter-spacing: 0.24em;
text-indent: 0.24em;
text-shadow:
0 0 12px rgba(0, 165, 58, 0.22),
0 0 28px rgba(0, 100, 40, 0.20),
0 12px 22px var(--shadow);
}

.page-lead {
max-width: 760px;
margin: 1.4rem auto 0;
color: var(--muted);
font-size: clamp(0.98rem, 1.5vw, 1.08rem);
line-height: 1.9;
}

.tabula-list {
max-width: 920px;
margin: 0 auto;
}

.tabula-list h2 {
margin: 0 0 1.4rem;
color: var(--gold-soft);
font-weight: 400;
letter-spacing: 0.16em;
line-height: 1.4;
text-align: center;
}

.tabula-list dl {
margin: 0;
display: grid;
gap: 0.85rem;
}

.tabula-list div {
display: grid;
grid-template-columns: minmax(11rem, 0.42fr) 1fr;
gap: 0.9rem 1.2rem;
padding: 0.85rem 0;
border-top: 1px solid rgba(215, 179, 90, 0.18);
}

.tabula-list div:last-child {
border-bottom: 1px solid rgba(215, 179, 90, 0.18);
}

.tabula-list dt,
.tabula-list dd {
margin: 0;
}

.tabula-list dt {
letter-spacing: 0.12em;
line-height: 1.7;
}

.tabula-list dt a {
color: var(--gold-soft);
text-decoration: none;
border-bottom: 1px solid rgba(215, 179, 90, 0.34);
}

.tabula-list dt a:hover {
color: var(--green-soft);
border-bottom-color: rgba(71, 179, 156, 0.72);
}

.tabula-list dd {
color: var(--muted);
line-height: 1.85;
}

.tabula-presentations {
margin-top: clamp(44px, 7vw, 76px);
padding-top: clamp(24px, 4vw, 38px);
border-top: 1px solid rgba(215, 179, 90, 0.24);
}

.page-section {
max-width: 860px;
margin: clamp(4rem, 7vw, 6rem) auto 0;
text-align: left;
}

.page-section--intro {
padding-top: 2rem;
border-top: 1px solid rgba(215, 179, 90, 0.24);
}

.section-header {
max-width: 860px;
margin: 0 auto 2rem;
text-align: left;
}

.section-title {
margin: 0 0 1.2rem;
color: var(--gold-soft);
font-weight: 400;
letter-spacing: 0.08em;
line-height: 1.4;
text-align: left;
}

.section-lead,
.page-section p {
margin: 0;
color: var(--muted);
line-height: 2;
text-align: left;
}

.page-section p + p {
margin-top: 1rem;
}

.history-overview {
max-width: 960px;
margin: clamp(4rem, 7vw, 6rem) auto 0;
}

.section-heading {
max-width: 860px;
margin: 0 auto 2rem;
text-align: center;
}

.section-heading h2,
.history-closing h2 {
margin: 0 0 1rem;
color: var(--gold-soft);
font-weight: 400;
letter-spacing: 0.16em;
line-height: 1.4;
}

.section-heading p,
.history-closing p,
.history-note p {
margin: 0;
color: var(--muted);
line-height: 1.95;
}

.history-list {
display: grid;
gap: 1rem;
margin: 0 auto;
}

.history-item {
min-width: 0;
border: 1px solid rgba(215, 179, 90, 0.24);
background:
linear-gradient(180deg, rgba(8, 14, 13, 0.90), rgba(2, 3, 6, 0.96));
box-shadow:
0 0 24px rgba(0, 165, 58, 0.07),
0 18px 40px rgba(0, 0, 0, 0.34);
padding: clamp(1rem, 2vw, 1.25rem);
overflow-wrap: anywhere;
}

.history-item h3 {
margin: 0;
color: var(--gold-soft);
font-size: clamp(1rem, 1.5vw, 1.12rem);
font-weight: 400;
line-height: 1.55;
letter-spacing: 0.05em;
}

.history-env {
margin: 0.8rem 0;
color: var(--green-soft);
line-height: 1.8;
}

.history-detail {
color: var(--muted);
}

.history-detail summary {
cursor: pointer;
color: var(--gold);
font-size: 0.88rem;
letter-spacing: 0.08em;
line-height: 1.6;
}

.history-detail summary::marker {
color: var(--green-soft);
}

.history-detail-body {
margin-top: 0.9rem;
display: grid;
gap: 0.9rem;
}

.history-detail-body h4 {
margin: 0 0 0.35rem;
color: var(--green-soft);
font-size: 0.83rem;
font-weight: 400;
letter-spacing: 0.12em;
}

.history-detail-body p {
margin: 0;
color: var(--muted);
line-height: 1.8;
}

.history-detail-body section:last-child p {
color: var(--gold-soft);
}

.history-closing {
max-width: 860px;
margin: clamp(42px, 7vw, 72px) auto 0;
padding-top: 2rem;
border-top: 1px solid rgba(215, 179, 90, 0.24);
text-align: center;
}

.history-note {
max-width: 860px;
margin: 2rem auto 0;
padding: 1.2rem 1.3rem;
border: 1px solid rgba(215, 179, 90, 0.20);
background: rgba(2, 3, 6, 0.52);
font-size: 0.88rem;
}

.history-note h2 {
margin: 0 0 0.8rem;
color: var(--gold-soft);
font-size: 0.95rem;
font-weight: 400;
letter-spacing: 0.14em;
}

.history-note p + p {
margin-top: 0.8rem;
}

.concept-index {
max-width: 860px;
margin: 0 auto;
padding: 1.2rem 1.3rem;
border: 1px solid rgba(215, 179, 90, 0.22);
background: rgba(2, 3, 6, 0.50);
}

.concept-index h2 {
margin: 0 0 0.85rem;
color: var(--gold-soft);
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.14em;
}

.concept-index ul {
margin: 0;
padding: 0;
list-style: none;
}

.concept-index li {
padding-top: 0.85rem;
border-top: 1px solid rgba(215, 179, 90, 0.18);
}

.concept-index li:first-child {
padding-top: 0;
border-top: 0;
}

.concept-index a,
.concept-note a {
color: var(--gold-soft);
text-decoration: none;
border-bottom: 1px solid rgba(215, 179, 90, 0.34);
}

.concept-index a:hover,
.concept-note a:hover {
color: var(--green-soft);
border-bottom-color: rgba(71, 179, 156, 0.72);
}

.concept-index p {
margin: 0.55rem 0 0;
color: var(--muted);
line-height: 1.8;
}

.concept-table-wrap {
max-width: 100%;
margin: clamp(28px, 4vw, 42px) auto 0;
overflow-x: auto;
border: 1px solid rgba(215, 179, 90, 0.22);
background: rgba(2, 3, 6, 0.54);
}

.concept-table {
width: 100%;
min-width: 920px;
border-collapse: collapse;
border: 2px solid rgba(245, 238, 214, 0.62);
background: rgba(2, 3, 6, 0.72);
font-size: clamp(0.88rem, 1.3vw, 0.98rem);
}

.concept-table th,
.concept-table td {
padding: 0.62rem 0.7rem;
border: 1px solid rgba(245, 238, 214, 0.42);
text-align: center;
vertical-align: middle;
line-height: 1.75;
}

.concept-table th {
background: rgba(215, 179, 90, 0.34);
color: var(--gold-soft);
font-weight: 400;
letter-spacing: 0.08em;
}

.concept-table td {
color: var(--text);
}

.concept-table tbody tr:nth-child(even) td:not(.concept-emphasis) {
background: rgba(255, 255, 255, 0.025);
}

.concept-table td.concept-emphasis {
  background: rgba(245, 238, 214, 0.72);
  color: #050608;
  font-weight: 700;
  border-color: rgba(245, 238, 214, 0.58);
}

.concept-table td.concept-emphasis .concept-sub {
color: rgba(5, 6, 8, 0.74);
}

.concept-sub {
color: var(--muted);
font-size: 0.92em;
}

.concept-note {
max-width: 860px;
margin: 2rem auto 0;
padding-top: 1.2rem;
border-top: 1px solid rgba(215, 179, 90, 0.20);
color: var(--muted);
font-size: 0.9rem;
line-height: 1.9;
}

.page-footer {
margin-top: 2.4rem;
text-align: center;
color: var(--gold-soft);
font-size: 0.86rem;
letter-spacing: 0.18em;
}

/* PC: table-like overview */
@media (min-width: 761px) {
.history-item {
display: grid;
grid-template-columns: 1.05fr 1.65fr 3fr;
gap: 1rem;
align-items: start;
}

.history-env {
margin: 0;
}

.history-detail {
margin: 0;
}

.history-detail[open] summary {
display: none;
}

.history-detail-body {
margin-top: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
}

/* Mobile: compact history cards */
@media (max-width: 760px) {
.page-shell {
padding: 18px 18px 34px;
}

.page-title {
font-size: clamp(1.8rem, 10vw, 2.8rem);
letter-spacing: 0.18em;
text-indent: 0.18em;
}

.page-lead {
text-align: left;
}

.tabula-list h2 {
text-align: left;
letter-spacing: 0.08em;
}

.tabula-list div {
grid-template-columns: 1fr;
gap: 0.35rem;
}

.section-heading {
text-align: left;
}

.section-heading h2,
.history-closing h2 {
letter-spacing: 0.08em;
}

.history-item {
padding: 1rem;
}

.history-item h3 {
color: var(--gold-soft);
}

.history-env {
margin: 0.65rem 0 0.85rem;
}

.history-detail-body {
padding-top: 0.85rem;
border-top: 1px solid rgba(215, 179, 90, 0.16);
}

.history-closing {
text-align: left;
}
}

/* Optional link on top page */
.hero-link {
margin-top: 0.65rem !important;
font-size: 0.82rem;
letter-spacing: 0.16em;
}

.hero-link a {
color: var(--gold-soft);
text-decoration: none;
border-bottom: 1px solid rgba(215, 179, 90, 0.34);
}

.hero-link a:hover {
color: var(--green-soft);
border-bottom-color: rgba(71, 179, 156, 0.72);
}

.presentation-note {
display: inline-block;
margin-top: 0.35rem;
font-size: 0.88rem;
line-height: 1.7;
letter-spacing: 0;
color: var(--muted);
opacity: 0.82;
}

.hero-link--disabled span:first-child {
opacity: 0.9;
}

.listening-note {
max-width: 860px;
margin: 0 auto clamp(32px, 5vw, 52px);
padding: 1.2rem 1.3rem;
border: 1px solid rgba(215, 179, 90, 0.20);
background: rgba(2, 3, 6, 0.52);
}

.listening-note p,
.listening-role {
margin: 0;
color: var(--muted);
line-height: 1.9;
}

.listening-note p + p {
margin-top: 0.6rem;
}

.listening-group {
max-width: 960px;
margin: 0 auto clamp(34px, 5vw, 58px);
}

.listening-group > h2 {
margin: 0 0 1rem;
color: var(--gold-soft);
font-size: clamp(1.05rem, 2vw, 1.28rem);
font-weight: 400;
letter-spacing: 0.12em;
line-height: 1.55;
}

.listening-items {
display: grid;
gap: 1rem;
}

.listening-item {
min-width: 0;
padding: clamp(1rem, 2vw, 1.25rem);
border: 1px solid rgba(215, 179, 90, 0.24);
background:
linear-gradient(180deg, rgba(8, 14, 13, 0.90), rgba(2, 3, 6, 0.96));
box-shadow:
0 0 24px rgba(0, 165, 58, 0.07),
0 18px 40px rgba(0, 0, 0, 0.34);
overflow-wrap: anywhere;
}

.listening-item h3 {
margin: 0 0 0.7rem;
color: var(--gold-soft);
font-size: clamp(1rem, 1.5vw, 1.12rem);
font-weight: 400;
line-height: 1.55;
letter-spacing: 0.04em;
}

.listening-source {
margin: -0.25rem 0 0.7rem;
color: var(--muted);
line-height: 1.7;
font-size: 0.95rem;
}

.source-label {
color: var(--gold-soft);
letter-spacing: 0.04em;
}

.listening-source a {
color: var(--gold-soft);
text-decoration: none;
border-bottom: 1px solid rgba(215, 179, 90, 0.34);
}

.listening-source a:hover {
color: var(--green-soft);
border-bottom-color: rgba(71, 179, 156, 0.72);
}

.listening-links {
margin: 0.8rem 0 0;
padding-left: 1.2rem;
color: var(--muted);
line-height: 1.8;
}

.listening-links a {
color: var(--gold-soft);
text-decoration: none;
border-bottom: 1px solid rgba(215, 179, 90, 0.34);
}

.listening-links a:hover {
color: var(--green-soft);
border-bottom-color: rgba(71, 179, 156, 0.72);
}

.chronology-table {
width: 100%;
max-width: 960px;
margin: 0 auto;
border-collapse: collapse;
}

.chronology-table th,
.chronology-table td {
vertical-align: top;
padding-top: 0.32rem;
padding-bottom: 0.32rem;
}

.chronology-table th {
color: var(--gold-soft);
font-weight: 400;
letter-spacing: 0.12em;
text-align: left;
}

.chronology-table th:first-child,
.chronology-year {
width: 5.5em;
min-width: 5.5em;
max-width: 5.5em;
padding-left: 0;
padding-right: 0;
text-align: center;
white-space: nowrap;
}

.chronology-table th:nth-child(2),
.chronology-entry {
padding-left: 1.15rem;
text-align: left;
}

.chronology-year {
color: var(--gold-soft);
vertical-align: top;
line-height: 1.25;
padding-top: 0.42rem;
}

.chronology-entry {
vertical-align: top;
line-height: 1.68;
}

.chronology-item {
margin: 0;
}

.chronology-item + .chronology-item {
margin-top: 0.12em;
}

.page-note {
max-width: 860px;
margin: 1.2rem auto 0;
color: var(--muted);
line-height: 1.9;
text-align: center;
}

.presentation-back {
max-width: 860px;
margin: clamp(28px, 5vw, 48px) auto;
text-align: center;
line-height: 1.8;
}

.presentation-back--top {
margin-top: 0;
margin-bottom: clamp(28px, 5vw, 46px);
}

.presentation-back a {
color: var(--gold-soft);
text-decoration: none;
border-bottom: 1px solid rgba(215, 179, 90, 0.34);
}

.presentation-back a:hover {
color: var(--green-soft);
border-bottom-color: rgba(71, 179, 156, 0.72);
}

.slide-alt-link {
max-width: 860px;
margin: 0 auto clamp(32px, 5vw, 56px);
padding: 0.9rem 1.1rem;
border: 1px solid rgba(215, 179, 90, 0.24);
background: rgba(2, 3, 6, 0.50);
text-align: center;
}

.slide-alt-link p {
margin: 0;
color: var(--muted);
line-height: 1.8;
}

.slide-alt-link a {
color: var(--gold-soft);
text-decoration: none;
border-bottom: 1px solid rgba(215, 179, 90, 0.34);
}

.slide-alt-link a:hover {
color: var(--green-soft);
border-bottom-color: rgba(71, 179, 156, 0.72);
}

.slide-pdf-wrap {
max-width: 1100px;
margin: 0 auto clamp(34px, 5vw, 58px);
border: 1px solid rgba(215, 179, 90, 0.24);
background: rgba(2, 3, 6, 0.72);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}

.slide-pdf-frame {
display: block;
width: 100%;
height: min(78vh, 820px);
border: 0;
background: #111;
}

.site-bottom-bar {
position: fixed;
left: 0;
right: 0;
bottom: clamp(10px, 2vh, 18px);
z-index: 20;
padding: 0.45rem 1rem 0.5rem;
font-family: "Noto Sans CJK JP", "Hiragino Sans", "Yu Gothic", "YuGothic", sans-serif;
background:
linear-gradient(180deg, rgba(2, 3, 6, 0.56), rgba(2, 3, 6, 0.96));
border-top: 1px solid rgba(215, 179, 90, 0.22);
box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.38);
}

.site-bottom-bar--presentation {
text-align: center;
}

.site-bottom-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.25rem 0.7rem;
color: var(--muted);
font-size: 0.82rem;
letter-spacing: 0.12em;
line-height: 1.5;
}

.site-bottom-nav a {
color: var(--gold-soft);
text-decoration: none;
border-bottom: 1px solid rgba(215, 179, 90, 0.28);
}

.site-bottom-nav a:hover {
color: var(--green-soft);
border-bottom-color: rgba(71, 179, 156, 0.72);
}

.site-bottom-nav span {
color: rgba(215, 179, 90, 0.55);
}

.site-bottom-copy {
margin: 0.9rem 0 0;
text-align: center;
color: var(--gold);
font-size: 0.68rem;
letter-spacing: 0.22em;
}

.site-bottom-copy a {
color: var(--gold);
text-decoration: none;
}

.site-bottom-copy a:hover {
color: var(--gold-soft);
}

.cover {
padding-bottom: clamp(110px, 14vh, 144px);
}

.page-shell {
padding-bottom: clamp(116px, 14vw, 150px);
}

@media (max-width: 760px) {
.site-bottom-bar {
bottom: 10px;
padding: 0.45rem 0.65rem 0.5rem;
}

.site-bottom-nav {
gap: 0.15rem 0.45rem;
font-size: 0.72rem;
letter-spacing: 0.08em;
}

.site-bottom-copy {
margin-top: 0.5rem;
font-size: 0.62rem;
letter-spacing: 0.16em;
}
}